hyperframes 0.8.82 → 0.8.83

package/dist/studio/chunk-LPZMAGS7.js

@@ -0,0 +1,1871 @@
+import {
+  HyperframesLoader
+} from "./chunk-QZ6HNNFG.js";
+import {
+  buildProjectApiPath,
+  getSourceScopedSelectorIndex
+} from "./chunk-S65AQH6M.js";
+
+// src/player/lib/time.ts
+var STUDIO_PREVIEW_FPS = 30;
+function formatTime(time) {
+  if (!Number.isFinite(time) || time < 0) return "00:00";
+  const mins = Math.floor(time / 60);
+  const secs = Math.floor(time % 60);
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+}
+function secondsToFrame(time, fps = STUDIO_PREVIEW_FPS) {
+  if (!Number.isFinite(time) || time <= 0) return 0;
+  if (!Number.isFinite(fps) || fps <= 0) return 0;
+  return Math.round(time * fps);
+}
+function frameToSeconds(frame, fps = STUDIO_PREVIEW_FPS) {
+  if (!Number.isFinite(frame) || frame <= 0) return 0;
+  if (!Number.isFinite(fps) || fps <= 0) return 0;
+  return frame / fps;
+}
+function stepFrameTime(time, deltaFrames, fps = STUDIO_PREVIEW_FPS) {
+  const currentFrame = secondsToFrame(time, fps);
+  const nextFrame = Math.max(0, currentFrame + deltaFrames);
+  return frameToSeconds(nextFrame, fps);
+}
+function formatFrameTime(time, duration, fps = STUDIO_PREVIEW_FPS) {
+  const currentFrame = secondsToFrame(time, fps);
+  const totalFrames = secondsToFrame(duration, fps);
+  return `${currentFrame}f / ${totalFrames}f`;
+}
+
+// src/player/store/liveTime.ts
+var timeListeners = /* @__PURE__ */ new Set();
+var liveTime = {
+  notify: (time) => timeListeners.forEach((listener) => listener(time)),
+  subscribe: (listener) => {
+    timeListeners.add(listener);
+    return () => timeListeners.delete(listener);
+  }
+};
+
+// src/player/store/playerStore.ts
+import { create } from "zustand";
+
+// src/player/store/playerStoreDevHandle.ts
+function isDevBuild() {
+  try {
+    return import.meta.env.DEV === true;
+  } catch {
+    return false;
+  }
+}
+function attachPlayerStoreDevHandle(store) {
+  if (!isDevBuild() || typeof window === "undefined") return;
+  window.__playerStore = store;
+}
+
+// src/player/lib/playbackAdapter.ts
+function isFinitePositive(value) {
+  return Number.isFinite(value) && value > 0;
+}
+function clampTime(time, duration) {
+  const safeDuration = Math.max(0, Number.isFinite(duration) ? duration : 0);
+  const safeTime = Math.max(0, Number.isFinite(time) ? time : 0);
+  return safeDuration > 0 ? Math.min(safeTime, safeDuration) : safeTime;
+}
+function getAdapterDuration(adapter) {
+  if (!adapter) return 0;
+  try {
+    const duration = Number(adapter.getDuration());
+    return isFinitePositive(duration) ? duration : 0;
+  } catch {
+    return 0;
+  }
+}
+function getDefaultStaticSeekPlaybackClock(win) {
+  return {
+    now: () => win.performance.now(),
+    requestAnimationFrame: (callback) => win.requestAnimationFrame(callback),
+    cancelAnimationFrame: (handle) => win.cancelAnimationFrame(handle)
+  };
+}
+function createStaticSeekPlaybackAdapter(player, duration, clock, getPlaybackRate = () => 1) {
+  const safeDuration = Math.max(0, Number.isFinite(duration) ? duration : 0);
+  let currentTime = clampTime(Number(player.getTime?.() ?? 0), safeDuration);
+  let playing = false;
+  let rafId = 0;
+  let playStartTime = currentTime;
+  let playStartNow = clock.now();
+  const renderSeek = (time) => {
+    currentTime = clampTime(time, safeDuration);
+    if (typeof player.renderSeek === "function") {
+      player.renderSeek(currentTime);
+      return;
+    }
+    player.seek?.(currentTime);
+  };
+  const stopTicker = () => {
+    if (rafId) {
+      clock.cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+  };
+  const tick = (now) => {
+    if (!playing) return;
+    const playbackRate = Math.max(0.1, Number(getPlaybackRate()) || 1);
+    const elapsed = (now - playStartNow) / 1e3 * playbackRate;
+    renderSeek(playStartTime + elapsed);
+    if (currentTime >= safeDuration) {
+      playing = false;
+      rafId = 0;
+      return;
+    }
+    rafId = clock.requestAnimationFrame(tick);
+  };
+  return {
+    play: () => {
+      if (playing || safeDuration <= 0) return;
+      if (currentTime >= safeDuration) renderSeek(0);
+      playing = true;
+      playStartTime = currentTime;
+      playStartNow = clock.now();
+      stopTicker();
+      rafId = clock.requestAnimationFrame(tick);
+    },
+    pause: () => {
+      playing = false;
+      stopTicker();
+    },
+    seek: (time, options) => {
+      renderSeek(time);
+      if (options?.keepPlaying) {
+        if (playing) {
+          playStartTime = currentTime;
+          playStartNow = clock.now();
+        }
+        return;
+      }
+      playing = false;
+      stopTicker();
+    },
+    getTime: () => currentTime,
+    getDuration: () => safeDuration,
+    isPlaying: () => playing
+  };
+}
+function releaseStaticSeekCache(cache, warned) {
+  cache.current?.adapter.pause();
+  cache.current = null;
+  warned.current = false;
+}
+function resolveStaticSeekFallback(opts) {
+  const { cache, warned, bestAdapter, effectiveDuration, docDuration } = opts;
+  const cached = cache.current;
+  if (cached?.player === bestAdapter && cached.duration === effectiveDuration) {
+    return cached.adapter;
+  }
+  cached?.adapter.pause();
+  if (!warned.current) {
+    warned.current = true;
+    console.warn(
+      `[useTimelinePlayer] Selected adapter duration (${getAdapterDuration(bestAdapter)}s) does not cover the document duration (${docDuration}s); falling back to seek-driven playback, which never starts media elements or WebAudio. Audio will not play in preview \u2014 extend the GSAP timeline to cover the declared data-duration.`
+    );
+  }
+  const adapter = createStaticSeekPlaybackAdapter(
+    bestAdapter,
+    effectiveDuration,
+    opts.clock,
+    opts.getPlaybackRate
+  );
+  cache.current = { player: bestAdapter, duration: effectiveDuration, adapter };
+  return adapter;
+}
+function wrapTimeline(tl) {
+  return {
+    play: () => tl.play(),
+    pause: () => tl.pause(),
+    seek: (t, options) => {
+      const shouldPause = !options?.keepPlaying;
+      if (shouldPause) tl.pause();
+      tl.seek(t);
+      if (shouldPause) tl.pause();
+    },
+    getTime: () => tl.time(),
+    getDuration: () => tl.duration(),
+    isPlaying: () => tl.isActive()
+  };
+}
+
+// src/player/lib/timelineElementHelpers.ts
+import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
+import { readElementFades } from "@hyperframes/core/audio-fade";
+import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
+var LAYER_REVEAL_PRIOR_Z_ATTR = "data-hf-reveal-prior-z";
+var LAYER_REVEAL_PRIOR_POSITION_ATTR = "data-hf-reveal-prior-pos";
+function readLayerRevealPriorZ(el) {
+  const raw = el.getAttribute(LAYER_REVEAL_PRIOR_Z_ATTR);
+  if (raw == null) return null;
+  const n = Number.parseInt(raw, 10);
+  return Number.isFinite(n) ? n : null;
+}
+function readTimelineElementZIndex(el) {
+  const prior = readLayerRevealPriorZ(el);
+  if (prior != null) return prior;
+  const html = el;
+  const parseZ = (value) => {
+    if (value == null || value === "" || value === "auto") return null;
+    const n = Number.parseInt(value, 10);
+    return Number.isFinite(n) ? n : null;
+  };
+  const fromInline = parseZ(html.style?.zIndex);
+  if (fromInline != null) return fromInline;
+  const view = el.ownerDocument?.defaultView;
+  if (view?.getComputedStyle) {
+    const fromComputed = parseZ(view.getComputedStyle(html).zIndex);
+    if (fromComputed != null) return fromComputed;
+  }
+  return 0;
+}
+function readDurationAttribute(el) {
+  if (!el) return 0;
+  const duration = Number.parseFloat(el.getAttribute("data-duration") ?? "") || Number.parseFloat(el.getAttribute("data-hf-authored-duration") ?? "");
+  return isFinitePositive(duration) ? duration : 0;
+}
+function normalizePlaybackRate(raw) {
+  return Number.isFinite(raw) && raw > 0 ? Math.max(0.1, Math.min(5, raw)) : 1;
+}
+function isTimelineIgnoredElement(el) {
+  if (el.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG) return true;
+  return Boolean(
+    el.closest(
+      [
+        "[data-hyperframes-ignore]",
+        "[data-hyperframes-picker-ignore]",
+        "[data-hf-ignore]",
+        "[data-hf-color-grading-canvas]"
+      ].join(",")
+    )
+  );
+}
+function furthestClipEndFromDocument(doc) {
+  if (!doc) return 0;
+  const root = doc.querySelector("[data-composition-id]");
+  let maxEnd = 0;
+  for (const node of Array.from(doc.querySelectorAll("[data-start]"))) {
+    if (node === root || isTimelineIgnoredElement(node)) continue;
+    const start = Number.parseFloat(node.getAttribute("data-start") ?? "");
+    const duration = readDurationAttribute(node);
+    if (!Number.isFinite(start) || start < 0 || duration <= 0) continue;
+    maxEnd = Math.max(maxEnd, start + duration);
+  }
+  return maxEnd;
+}
+function readTimelineDurationFromDocument(doc) {
+  if (!doc) return 0;
+  const rootDuration = readDurationAttribute(doc.querySelector("[data-composition-id]"));
+  if (rootDuration > 0) return rootDuration;
+  return furthestClipEndFromDocument(doc);
+}
+function furthestClipEndFromSource(source) {
+  if (!source) return 0;
+  return furthestClipEndFromDocument(new DOMParser().parseFromString(source, "text/html"));
+}
+function isHtmlElement(el) {
+  const HtmlElementCtor = el.ownerDocument.defaultView?.HTMLElement ?? globalThis.HTMLElement;
+  return typeof HtmlElementCtor !== "undefined" && el instanceof HtmlElementCtor;
+}
+function isCompositionHost(el) {
+  return el.hasAttribute("data-composition-id") || el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
+}
+function resolveMediaElement(el) {
+  const win = el.ownerDocument.defaultView ?? window;
+  const MediaElementCtor = win.HTMLMediaElement ?? globalThis.HTMLMediaElement;
+  const ImageElementCtor = win.HTMLImageElement ?? globalThis.HTMLImageElement;
+  if (el instanceof MediaElementCtor || el instanceof ImageElementCtor) return el;
+  if (isCompositionHost(el)) return null;
+  const candidate = el.querySelector("video, audio, img");
+  return candidate instanceof MediaElementCtor || candidate instanceof ImageElementCtor ? candidate : null;
+}
+function readPlaybackStartAttributes(getAttr) {
+  const playbackStartAttr = getAttr("data-playback-start") != null ? "playback-start" : getAttr("data-media-start") != null ? "media-start" : void 0;
+  return playbackStartAttr ? { playbackStart: readMediaOffsetSeconds(getAttr), playbackStartAttr } : {};
+}
+function playbackStartAttributeForElement(element) {
+  return element.playbackStartAttr === "playback-start" || element.kind === "composition" ? "data-playback-start" : "data-media-start";
+}
+function applyPlaybackMetadataFromElement(entry, el) {
+  Object.assign(
+    entry,
+    readPlaybackStartAttributes((n) => el.getAttribute(n))
+  );
+  const authoredPlaybackRate = Number.parseFloat(el.getAttribute("data-playback-rate") ?? "");
+  if (Number.isFinite(authoredPlaybackRate) && authoredPlaybackRate > 0) {
+    entry.playbackRate = normalizePlaybackRate(authoredPlaybackRate);
+  }
+}
+function setOptional(entry, key, value) {
+  if (value === void 0) delete entry[key];
+  else entry[key] = value;
+}
+function readVolume(el, media) {
+  const volume = Number.parseFloat(
+    el.getAttribute("data-volume") ?? media.getAttribute("data-volume") ?? ""
+  );
+  return Number.isFinite(volume) ? volume : void 0;
+}
+function applyAudioMetadataFromElement(entry, el) {
+  const media = resolveMediaElement(el) ?? el;
+  const muted = el.hasAttribute("muted") || media.hasAttribute("muted");
+  const hasAudio = el.getAttribute("data-has-audio");
+  const sound = hasAudio === null ? el.tagName === "VIDEO" && !muted : hasAudio === "true";
+  setOptional(entry, "hasAudio", sound ? true : void 0);
+  setOptional(entry, "muted", muted ? true : void 0);
+  setOptional(entry, "volume", readVolume(el, media));
+}
+function applyFadeMetadataFromElement(entry, el) {
+  const fades = readElementFades(el);
+  setOptional(entry, "fadeIn", fades.fadeIn > 0 ? fades.fadeIn : void 0);
+  setOptional(entry, "fadeOut", fades.fadeOut > 0 ? fades.fadeOut : void 0);
+}
+function applyMediaMetadataFromElement(entry, el) {
+  applyPlaybackMetadataFromElement(entry, el);
+  applyAudioMetadataFromElement(entry, el);
+  applyFadeMetadataFromElement(entry, el);
+  const mediaEl = resolveMediaElement(el);
+  if (!mediaEl) return;
+  entry.tag = mediaEl.tagName.toLowerCase();
+  const src = mediaEl.getAttribute("src");
+  if (src) entry.src = src;
+  const win = mediaEl.ownerDocument.defaultView ?? window;
+  const MediaElementCtor = win.HTMLMediaElement ?? globalThis.HTMLMediaElement;
+  if (typeof MediaElementCtor === "undefined" || !(mediaEl instanceof MediaElementCtor)) return;
+  const sourceDurationAttr = el.getAttribute("data-source-duration") ?? mediaEl.getAttribute("data-source-duration");
+  const sourceDuration = sourceDurationAttr ? parseFloat(sourceDurationAttr) : mediaEl.duration;
+  if (Number.isFinite(sourceDuration) && sourceDuration > 0) {
+    entry.sourceDuration = sourceDuration;
+  }
+  const playbackRate = mediaEl.defaultPlaybackRate;
+  if (entry.playbackRate == null && Number.isFinite(playbackRate) && playbackRate > 0) {
+    entry.playbackRate = normalizePlaybackRate(playbackRate);
+  }
+}
+function getTimelineElementDisplayLabel(input) {
+  const label = input.label?.trim();
+  if (label) return label;
+  const id = input.id?.trim();
+  if (id) return id;
+  const tag = input.tag?.trim().toLowerCase();
+  return tag ? `${tag} clip` : "Timeline clip";
+}
+function getTimelineElementSelector(el) {
+  if (isHtmlElement(el) && el.id) return `#${CSS.escape(el.id)}`;
+  const compId = el.getAttribute("data-composition-id");
+  if (compId) return `[data-composition-id="${CSS.escape(compId)}"]`;
+  if (isHtmlElement(el)) {
+    const classes = el.className.split(/\s+/).filter(Boolean);
+    const firstClass = classes.find((className) => className !== "clip") ?? classes[0];
+    if (firstClass) return `.${CSS.escape(firstClass)}`;
+  }
+  return void 0;
+}
+function getTimelineElementSourceFile(el) {
+  const ownerRoot = el.parentElement?.closest("[data-composition-id]");
+  return ownerRoot?.getAttribute("data-composition-file") ?? ownerRoot?.getAttribute("data-composition-src") ?? void 0;
+}
+function getTimelineElementSelectorIndex(doc, el, selector) {
+  return getSourceScopedSelectorIndex(
+    doc,
+    el,
+    selector,
+    getTimelineElementSourceFile(el),
+    getTimelineElementSourceFile
+  );
+}
+function buildTimelineElementKey(params) {
+  const scope = params.sourceFile ?? "index.html";
+  if (params.domId) return `${scope}#${params.domId}`;
+  if (params.selector) return `${scope}:${params.selector}:${params.selectorIndex ?? 0}`;
+  return `${scope}:${params.id}:${params.fallbackIndex}`;
+}
+function splitTimelineElementKey(key) {
+  const hashIndex = key.lastIndexOf("#");
+  if (hashIndex < 0) return { sourceFile: null, domId: key };
+  return { sourceFile: key.slice(0, hashIndex), domId: key.slice(hashIndex + 1) };
+}
+function buildTimelineElementIdentity(params) {
+  const id = params.preferredId?.trim() || buildTimelineElementKey({
+    id: params.label,
+    fallbackIndex: params.fallbackIndex,
+    domId: params.domId,
+    selector: params.selector,
+    selectorIndex: params.selectorIndex,
+    sourceFile: params.sourceFile
+  });
+  const key = buildTimelineElementKey({
+    id,
+    fallbackIndex: params.fallbackIndex,
+    domId: params.domId,
+    selector: params.selector,
+    selectorIndex: params.selectorIndex,
+    sourceFile: params.sourceFile
+  });
+  return { id, key };
+}
+function getTimelineElementIdentity(element) {
+  return element.key ?? element.id;
+}
+function runtimeAudioId(element) {
+  return element.domId || null;
+}
+function deriveTimelineStoreKey(params) {
+  if (!params.domId && !params.selector) return void 0;
+  return buildTimelineElementKey({ id: "", fallbackIndex: 0, ...params });
+}
+function deriveTimelineStoreKeyForDomId(domId, sourceFile) {
+  return deriveTimelineStoreKey({ domId, sourceFile });
+}
+function getTimelineDomNodes(doc) {
+  const rootComp = doc.querySelector("[data-composition-id]");
+  return Array.from(doc.querySelectorAll("[data-start]")).filter(
+    (node) => node !== rootComp && !isTimelineIgnoredElement(node)
+  );
+}
+function numbersNearlyEqual(a, b) {
+  return Math.abs(a - b) < 1e-3;
+}
+var MANIFEST_CLIP_ATTRS = [
+  ["data-start", (clip) => clip.start],
+  ["data-duration", (clip) => clip.duration],
+  ["data-track-index", (clip) => clip.track]
+];
+function nodeMatchesClipTag(node, clip) {
+  return !clip.tagName || node.tagName.toLowerCase() === clip.tagName.toLowerCase();
+}
+function nodeMatchesManifestClip(node, clip) {
+  if (!nodeMatchesClipTag(node, clip)) return false;
+  return MANIFEST_CLIP_ATTRS.every(([attr, expected]) => {
+    const actual = Number.parseFloat(node.getAttribute(attr) ?? "");
+    return !Number.isFinite(actual) || numbersNearlyEqual(actual, expected(clip));
+  });
+}
+function nodeInClipScope(node, clip) {
+  const scope = clip.compositionAncestors;
+  if (!scope) return true;
+  const ids = [];
+  for (let cursor = node.parentElement; cursor; cursor = cursor.parentElement) {
+    const id = cursor.getAttribute("data-composition-id");
+    if (id) ids.unshift(id);
+  }
+  return ids.length === scope.length && ids.every((id, index) => id === scope[index]);
+}
+function findInClipScope(doc, clip, selectors) {
+  let lone = null;
+  for (const selector of selectors) {
+    const nodes = Array.from(doc.querySelectorAll(selector));
+    const scoped = nodes.find((node) => nodeInClipScope(node, clip));
+    if (scoped) return scoped;
+    if (nodes.length === 1) lone ??= nodes[0];
+  }
+  return lone;
+}
+function previewElementFinder(doc, selector = "[data-hf-id], [id]") {
+  const byKey = /* @__PURE__ */ new Map();
+  const add = (key, node) => {
+    const nodes = byKey.get(key);
+    if (nodes) nodes.push(node);
+    else byKey.set(key, [node]);
+  };
+  for (const node of doc.querySelectorAll(selector)) {
+    const hfId = node.getAttribute("data-hf-id");
+    const id = node.getAttribute("id");
+    if (hfId) add(`hf:${hfId}`, node);
+    if (id) add(`id:${id}`, node);
+  }
+  return (target) => {
+    const matches = [
+      ...target.hfId && byKey.get(`hf:${target.hfId}`) || [],
+      ...byKey.get(`id:${target.domId ?? target.id}`) ?? []
+    ];
+    return matches.find((node) => getTimelineElementSourceFile(node) === target.sourceFile) ?? matches[0] ?? null;
+  };
+}
+function findClipElementById(doc, clip) {
+  if (!clip.id) return null;
+  const first = doc.getElementById(clip.id);
+  if (!first || nodeInClipScope(first, clip)) return first;
+  return findInClipScope(doc, clip, [`[id="${CSS.escape(clip.id)}"]`]);
+}
+function findTimelineDomNode(doc, clip) {
+  if (!clip.id) return null;
+  const first = doc.getElementById(clip.id);
+  if (first && nodeInClipScope(first, clip)) return first;
+  const id = CSS.escape(clip.id);
+  const byOtherKeys = [`[data-hf-id="${id}"]`, `[data-composition-id="${id}"]`, `.${id}`];
+  return findInClipScope(doc, clip, first ? [`[id="${id}"]`, ...byOtherKeys] : byOtherKeys);
+}
+function findTimelineDomNodeForClip(doc, clip, fallbackIndex, usedNodes = /* @__PURE__ */ new Set(), getCandidates = () => getTimelineDomNodes(doc)) {
+  const byIdentity = findTimelineDomNode(doc, clip);
+  if (byIdentity && !usedNodes.has(byIdentity) && nodeMatchesClipTag(byIdentity, clip))
+    return byIdentity;
+  const candidates = getCandidates().filter((node) => !usedNodes.has(node));
+  const exact = candidates.find((node) => nodeMatchesManifestClip(node, clip));
+  if (exact) return exact;
+  const positional = candidates[fallbackIndex];
+  return positional && nodeMatchesClipTag(positional, clip) ? positional : null;
+}
+function createTimelineDomNodeResolver(doc) {
+  let candidates;
+  const usedNodes = /* @__PURE__ */ new Set();
+  const getCandidates = () => candidates ??= getTimelineDomNodes(doc);
+  return (clip, index) => {
+    const node = findTimelineDomNodeForClip(doc, clip, index, usedNodes, getCandidates);
+    if (node) usedNodes.add(node);
+    return node;
+  };
+}
+
+// src/player/store/playerStoreSelection.ts
+function nextSelectionSet(current, id, preserveSet) {
+  if (preserveSet) return id && current.has(id) ? new Set(current) : /* @__PURE__ */ new Set();
+  return id ? /* @__PURE__ */ new Set([id]) : /* @__PURE__ */ new Set();
+}
+function revealTargetsSelection(request, id) {
+  if (!request || id === null) return false;
+  return request.elementKey === splitTimelineElementKey(id).domId;
+}
+
+// src/components/dock/panelRegistry.ts
+var PANEL_IDS = [
+  "preview",
+  "timeline",
+  "compositions",
+  "assets",
+  "code",
+  "catalog",
+  "design",
+  "layers",
+  "renders",
+  "variables",
+  "slideshow"
+];
+var PANEL_DEFINITIONS = {
+  preview: {
+    title: "Preview",
+    zone: "center",
+    reopen: { near: "timeline", direction: "above" },
+    keepMounted: true
+  },
+  timeline: {
+    title: "Timeline",
+    zone: "center",
+    reopen: { near: "preview", direction: "below" },
+    keepMounted: true
+  },
+  compositions: {
+    title: "Compositions",
+    zone: "left",
+    reopen: { near: "preview", direction: "left" }
+  },
+  assets: { title: "Assets", zone: "left", reopen: { near: "compositions", direction: "within" } },
+  code: { title: "Code", zone: "left", reopen: { near: "compositions", direction: "within" } },
+  catalog: {
+    title: "Catalog",
+    zone: "left",
+    reopen: { near: "compositions", direction: "within" }
+  },
+  design: { title: "Design", zone: "right", reopen: { near: "preview", direction: "right" } },
+  layers: { title: "Layers", zone: "right", reopen: { near: "design", direction: "within" } },
+  renders: { title: "Renders", zone: "right", reopen: { near: "design", direction: "within" } },
+  variables: { title: "Variables", zone: "right", reopen: { near: "design", direction: "within" } },
+  slideshow: { title: "Slideshow", zone: "right", reopen: { near: "design", direction: "within" } }
+};
+function isPanelId(value) {
+  return typeof value === "string" && PANEL_IDS.includes(value);
+}
+function panelsInZone(zone) {
+  return PANEL_IDS.filter((id) => PANEL_DEFINITIONS[id].zone === zone);
+}
+
+// src/components/dock/dockLayoutSchema.ts
+var DOCK_PANEL_COMPONENT = "panel";
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function collectLeafViews(node, into) {
+  if (!isRecord(node)) return false;
+  if (node.type === "leaf") {
+    if (!isRecord(node.data) || !Array.isArray(node.data.views)) return false;
+    into.push(...node.data.views);
+    return true;
+  }
+  if (node.type === "branch") {
+    return Array.isArray(node.data) && node.data.every((child) => collectLeafViews(child, into));
+  }
+  return false;
+}
+function hasGridShape(grid) {
+  const oriented = grid.orientation === "HORIZONTAL" || grid.orientation === "VERTICAL";
+  return oriented && typeof grid.width === "number" && typeof grid.height === "number";
+}
+function panelsAreRegistered(panels) {
+  const ids = Object.keys(panels);
+  return ids.length > 0 && ids.every((id) => {
+    const state = panels[id];
+    return isPanelId(id) && isRecord(state) && state.id === id && state.contentComponent === DOCK_PANEL_COMPONENT;
+  });
+}
+function collectFloatingViews(floating, into) {
+  if (floating === void 0) return true;
+  if (!Array.isArray(floating)) return false;
+  return floating.every((group) => {
+    if (!isRecord(group) || !isRecord(group.data) || !Array.isArray(group.data.views)) return false;
+    into.push(...group.data.views);
+    return true;
+  });
+}
+function parseDockLayout(value) {
+  if (!isRecord(value) || !isRecord(value.grid) || !isRecord(value.panels)) return null;
+  const { grid, panels } = value;
+  if (!hasGridShape(grid) || !panelsAreRegistered(panels)) return null;
+  const views = [];
+  if (!collectLeafViews(grid.root, views)) return null;
+  if (!collectFloatingViews(value.floatingGroups, views)) return null;
+  const everyViewIsAPanel = views.every((id) => typeof id === "string" && id in panels);
+  const everyPanelIsPlaced = Object.keys(panels).every((id) => views.includes(id));
+  return everyViewIsAPanel && everyPanelIsPlaced ? value : null;
+}
+
+// src/utils/studioUiPreferences.ts
+var STUDIO_UI_PREFERENCES_KEY = "hf-studio-ui-preferences";
+function isRecord2(value) {
+  return typeof value === "object" && value !== null;
+}
+function getBrowserStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function storageKeyFor(projectId) {
+  return projectId ? `${STUDIO_UI_PREFERENCES_KEY}:${projectId}` : STUDIO_UI_PREFERENCES_KEY;
+}
+function readStorage(storage, key) {
+  if (!storage) return {};
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (!isRecord2(parsed)) return {};
+    const preferences = {};
+    if (typeof parsed.timelineVisible === "boolean") {
+      preferences.timelineVisible = parsed.timelineVisible;
+    }
+    if (typeof parsed.playbackRate === "number" && Number.isFinite(parsed.playbackRate)) {
+      preferences.playbackRate = parsed.playbackRate;
+    }
+    if (typeof parsed.audioMuted === "boolean") {
+      preferences.audioMuted = parsed.audioMuted;
+    }
+    if (typeof parsed.audioVolume === "number" && Number.isFinite(parsed.audioVolume) && parsed.audioVolume >= 0 && parsed.audioVolume <= 1) {
+      preferences.audioVolume = parsed.audioVolume;
+    }
+    if (parsed.thumbnailMode === "adaptive" || parsed.thumbnailMode === "hidden") {
+      preferences.thumbnailMode = parsed.thumbnailMode;
+    } else if (typeof parsed.thumbnailsEnabled === "boolean") {
+      preferences.thumbnailMode = parsed.thumbnailsEnabled ? "adaptive" : "hidden";
+    }
+    if (Array.isArray(parsed.recentBlocks)) {
+      preferences.recentBlocks = parsed.recentBlocks.filter(
+        (v) => typeof v === "string"
+      );
+    }
+    if (typeof parsed.snapEnabled === "boolean") {
+      preferences.snapEnabled = parsed.snapEnabled;
+    }
+    if (typeof parsed.gridVisible === "boolean") {
+      preferences.gridVisible = parsed.gridVisible;
+    }
+    if (typeof parsed.rulerVisible === "boolean") {
+      preferences.rulerVisible = parsed.rulerVisible;
+    }
+    if (typeof parsed.safeMarginsVisible === "boolean") {
+      preferences.safeMarginsVisible = parsed.safeMarginsVisible;
+    }
+    if (typeof parsed.gridSpacing === "number" && Number.isFinite(parsed.gridSpacing)) {
+      preferences.gridSpacing = parsed.gridSpacing;
+    }
+    if (typeof parsed.snapToGrid === "boolean") {
+      preferences.snapToGrid = parsed.snapToGrid;
+    }
+    if (typeof parsed.timelineSnapEnabled === "boolean") {
+      preferences.timelineSnapEnabled = parsed.timelineSnapEnabled;
+    }
+    if (typeof parsed.audioMetersVisible === "boolean") {
+      preferences.audioMetersVisible = parsed.audioMetersVisible;
+    }
+    if (typeof parsed.rippleEditEnabled === "boolean") {
+      preferences.rippleEditEnabled = parsed.rippleEditEnabled;
+    }
+    if (parsed.timeDisplayMode === "time" || parsed.timeDisplayMode === "frame") {
+      preferences.timeDisplayMode = parsed.timeDisplayMode;
+    }
+    if (parsed.timelineZoomMode === "fit" || parsed.timelineZoomMode === "manual") {
+      preferences.timelineZoomMode = parsed.timelineZoomMode;
+    }
+    if (typeof parsed.timelineManualZoomPercent === "number" && Number.isFinite(parsed.timelineManualZoomPercent)) {
+      preferences.timelineManualZoomPercent = parsed.timelineManualZoomPercent;
+    }
+    if (typeof parsed.agentToolsEnabled === "boolean") {
+      preferences.agentToolsEnabled = parsed.agentToolsEnabled;
+    }
+    const dockLayout = parseDockLayout(parsed.dockLayout);
+    if (dockLayout) preferences.dockLayout = dockLayout;
+    return preferences;
+  } catch {
+    return {};
+  }
+}
+function readStudioUiPreferences(storage = getBrowserStorage(), projectId = null) {
+  const scoped = readStorage(storage, storageKeyFor(projectId));
+  if (!projectId || Object.keys(scoped).length > 0) return scoped;
+  return readStorage(storage, STUDIO_UI_PREFERENCES_KEY);
+}
+function writeStudioUiPreferences(patch, storage = getBrowserStorage(), projectId = null) {
+  if (!storage) return;
+  try {
+    const next = {
+      ...readStudioUiPreferences(storage, projectId),
+      ...patch
+    };
+    storage.setItem(storageKeyFor(projectId), JSON.stringify(next));
+  } catch {
+  }
+}
+
+// src/player/components/timelineZoom.ts
+var MIN_TIMELINE_ZOOM_PERCENT = 10;
+var MAX_TIMELINE_FRAME_WIDTH_PX = 48;
+var ZOOM_OUT_FACTOR = 0.5;
+var ZOOM_IN_FACTOR = 2;
+var PINCH_ZOOM_SENSITIVITY = 0.014;
+function getMaxTimelineZoomPercent(fitPixelsPerSecond) {
+  if (!Number.isFinite(fitPixelsPerSecond) || fitPixelsPerSecond <= 0) return 100;
+  const frameLevelPixelsPerSecond = STUDIO_PREVIEW_FPS * MAX_TIMELINE_FRAME_WIDTH_PX;
+  return Math.max(100, Math.round(frameLevelPixelsPerSecond / fitPixelsPerSecond * 100));
+}
+function clampTimelineZoomPercent(percent, fitPixelsPerSecond) {
+  if (!Number.isFinite(percent)) return 100;
+  const maxZoomPercent = getMaxTimelineZoomPercent(fitPixelsPerSecond);
+  return Math.max(MIN_TIMELINE_ZOOM_PERCENT, Math.min(maxZoomPercent, Math.round(percent)));
+}
+function getTimelineZoomPercent(zoomMode, manualZoomPercent, fitPixelsPerSecond) {
+  return zoomMode === "fit" ? 100 : clampTimelineZoomPercent(manualZoomPercent, fitPixelsPerSecond);
+}
+function computePinnedZoomPercent(currentPixelsPerSecond, fitPixelsPerSecond) {
+  if (!Number.isFinite(currentPixelsPerSecond) || currentPixelsPerSecond <= 0 || !Number.isFinite(fitPixelsPerSecond) || fitPixelsPerSecond <= 0) {
+    return 100;
+  }
+  return clampTimelineZoomPercent(
+    currentPixelsPerSecond / fitPixelsPerSecond * 100,
+    fitPixelsPerSecond
+  );
+}
+function getTimelinePixelsPerSecond(fitPixelsPerSecond, zoomMode, manualZoomPercent) {
+  if (!Number.isFinite(fitPixelsPerSecond) || fitPixelsPerSecond <= 0) return 100;
+  const zoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent, fitPixelsPerSecond);
+  return zoomMode === "fit" ? fitPixelsPerSecond : fitPixelsPerSecond * (zoomPercent / 100);
+}
+function getNextTimelineZoomPercent(direction, zoomMode, manualZoomPercent, fitPixelsPerSecond) {
+  const current = getTimelineZoomPercent(zoomMode, manualZoomPercent, fitPixelsPerSecond);
+  const next = direction === "in" ? current * ZOOM_IN_FACTOR : current * ZOOM_OUT_FACTOR;
+  return clampTimelineZoomPercent(next, fitPixelsPerSecond);
+}
+function getPinchTimelineZoomPercent(deltaY, zoomMode, manualZoomPercent, fitPixelsPerSecond) {
+  const current = getTimelineZoomPercent(zoomMode, manualZoomPercent, fitPixelsPerSecond);
+  if (!Number.isFinite(deltaY) || deltaY === 0) return current;
+  return clampTimelineZoomPercent(
+    current * Math.exp(-deltaY * PINCH_ZOOM_SENSITIVITY),
+    fitPixelsPerSecond
+  );
+}
+var LOG_MIN = Math.log(MIN_TIMELINE_ZOOM_PERCENT);
+function timelineZoomPercentToSlider(percent, fitPixelsPerSecond) {
+  const clamped = clampTimelineZoomPercent(percent, fitPixelsPerSecond);
+  const logMax = Math.log(getMaxTimelineZoomPercent(fitPixelsPerSecond));
+  return (Math.log(clamped) - LOG_MIN) / (logMax - LOG_MIN) * 100;
+}
+function timelineSliderToZoomPercent(slider, fitPixelsPerSecond) {
+  const clampedSlider = Math.max(0, Math.min(100, slider));
+  const logMax = Math.log(getMaxTimelineZoomPercent(fitPixelsPerSecond));
+  const logValue = LOG_MIN + clampedSlider / 100 * (logMax - LOG_MIN);
+  return clampTimelineZoomPercent(Math.exp(logValue), fitPixelsPerSecond);
+}
+
+// src/player/store/keyframeSlice.ts
+function isRevealedAudioFxRequestCurrent(request, state) {
+  return request.projectId === state.timelineProjectId && request.sessionEpoch === state.timelineSessionEpoch;
+}
+function isFocusedEaseRequestCurrent(request, state) {
+  return request.projectId === state.timelineProjectId && request.sessionEpoch === state.timelineSessionEpoch && request.elementId === state.selectedElementId;
+}
+function createKeyframeSlice(set, getTimelineSessionIdentity) {
+  return {
+    selectedKeyframes: /* @__PURE__ */ new Set(),
+    toggleSelectedKeyframe: (key) => set((state) => {
+      const next = new Set(state.selectedKeyframes);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return { selectedKeyframes: next };
+    }),
+    clearSelectedKeyframes: () => set({ selectedKeyframes: /* @__PURE__ */ new Set() }),
+    expandedClipIds: /* @__PURE__ */ new Set(),
+    toggleClipExpanded: (id) => set((state) => {
+      const next = new Set(state.expandedClipIds);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return { expandedClipIds: next };
+    }),
+    setClipExpanded: (id, expanded) => set((state) => {
+      if (state.expandedClipIds.has(id) === expanded) return state;
+      const next = new Set(state.expandedClipIds);
+      if (expanded) next.add(id);
+      else next.delete(id);
+      return { expandedClipIds: next };
+    }),
+    expandClips: (ids) => set((state) => {
+      if (ids.every((id) => state.expandedClipIds.has(id))) return state;
+      const next = new Set(state.expandedClipIds);
+      for (const id of ids) next.add(id);
+      return { expandedClipIds: next };
+    }),
+    collapsedGroupIds: /* @__PURE__ */ new Set(),
+    toggleGroupExpanded: (id) => set((state) => {
+      const next = new Set(state.collapsedGroupIds);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return { collapsedGroupIds: next };
+    }),
+    expandedLaneOwnerIds: /* @__PURE__ */ new Set(),
+    toggleLaneOwnerExpanded: (id) => set((state) => {
+      const next = new Set(state.expandedLaneOwnerIds);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return { expandedLaneOwnerIds: next };
+    }),
+    focusedEaseSegment: null,
+    focusedEaseRequestNonce: 0,
+    setFocusedEaseSegment: (target) => set((state) => {
+      const nonce = state.focusedEaseRequestNonce + 1;
+      const { timelineProjectId, timelineSessionEpoch } = getTimelineSessionIdentity();
+      return {
+        focusedEaseRequestNonce: nonce,
+        focusedEaseSegment: {
+          ...target,
+          projectId: timelineProjectId,
+          sessionEpoch: timelineSessionEpoch,
+          nonce
+        }
+      };
+    }),
+    clearFocusedEaseSegment: (nonce) => set(
+      (state) => state.focusedEaseSegment?.nonce === nonce ? { focusedEaseSegment: null } : state
+    ),
+    revealedAudioFxTarget: null,
+    revealedAudioFxNonce: 0,
+    setRevealedAudioFxTarget: (target) => set((state) => {
+      const nonce = state.revealedAudioFxNonce + 1;
+      const { timelineProjectId, timelineSessionEpoch } = getTimelineSessionIdentity();
+      return {
+        revealedAudioFxNonce: nonce,
+        revealedAudioFxTarget: {
+          ...target,
+          projectId: timelineProjectId,
+          sessionEpoch: timelineSessionEpoch,
+          nonce
+        }
+      };
+    }),
+    clearRevealedAudioFxTarget: (nonce) => set(
+      (state) => state.revealedAudioFxTarget?.nonce === nonce ? { revealedAudioFxTarget: null } : state
+    ),
+    keyframeCache: /* @__PURE__ */ new Map(),
+    setKeyframeCache: (elementId, data) => set((state) => {
+      if (data ? state.keyframeCache.get(elementId) === data : !state.keyframeCache.has(elementId))
+        return state;
+      const next = new Map(state.keyframeCache);
+      if (data) next.set(elementId, data);
+      else next.delete(elementId);
+      return { keyframeCache: next };
+    }),
+    gsapAnimations: /* @__PURE__ */ new Map(),
+    setGsapAnimations: (elementId, animations) => set((state) => {
+      if (animations ? state.gsapAnimations.get(elementId) === animations : !state.gsapAnimations.has(elementId))
+        return state;
+      const next = new Map(state.gsapAnimations);
+      if (animations) next.set(elementId, animations);
+      else next.delete(elementId);
+      return { gsapAnimations: next };
+    })
+  };
+}
+
+// src/player/store/automationSelectionSlice.ts
+function createAutomationSelectionSlice(set) {
+  return {
+    automationSelection: null,
+    setAutomationSelection: (sel) => set({
+      automationSelection: {
+        ...sel,
+        t0: Math.min(sel.t0, sel.t1),
+        t1: Math.max(sel.t0, sel.t1),
+        v0: Math.min(sel.v0, sel.v1),
+        v1: Math.max(sel.v0, sel.v1)
+      }
+    }),
+    clearAutomationSelection: () => set({ automationSelection: null })
+  };
+}
+
+// src/player/store/editingModeSlice.ts
+function createEditingModeSlice(set) {
+  return {
+    motionPathArmed: false,
+    setMotionPathArmed: (armed) => set({ motionPathArmed: armed }),
+    motionPathCreateAvailable: false,
+    setMotionPathCreateAvailable: (available) => set({ motionPathCreateAvailable: available }),
+    autoKeyframeEnabled: true,
+    setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled })
+  };
+}
+
+// src/player/store/timelineFocusState.ts
+function createTimelineFocusRequest(id, projectId, sessionEpoch, nonce) {
+  return { id, projectId, sessionEpoch, nonce };
+}
+
+// src/player/lib/thumbnailPolicy.ts
+var rawPolicy = import.meta.env?.VITE_STUDIO_TIMELINE_THUMBNAIL_POLICY;
+var studioThumbnailRuntimePolicy = rawPolicy === "force-hidden" || rawPolicy === "legacy-default" ? rawPolicy : "follow-preference";
+function defaultThumbnailMode(storedMode, policy = studioThumbnailRuntimePolicy) {
+  return storedMode ?? (policy === "legacy-default" ? "hidden" : "adaptive");
+}
+function effectiveThumbnailMode(preferredMode, policy = studioThumbnailRuntimePolicy) {
+  return policy === "force-hidden" ? "hidden" : preferredMode;
+}
+
+// src/player/store/thumbnailSlice.ts
+var EVERY_COMPOSITION = "*";
+function revisionKey(path) {
+  return (path.split(/[?#]/)[0] ?? "").replace(/\\/g, "/").replace(/^\.?\//, "");
+}
+function thumbnailRevisionOf(revisions, compositionPath) {
+  return (revisions[EVERY_COMPOSITION] ?? 0) + (revisions[revisionKey(compositionPath)] ?? 0);
+}
+function createThumbnailSlice(set) {
+  return {
+    thumbnailMode: defaultThumbnailMode(readStudioUiPreferences().thumbnailMode),
+    thumbnailRevisions: {},
+    setThumbnailMode: (mode) => {
+      writeStudioUiPreferences({ thumbnailMode: mode });
+      set({ thumbnailMode: mode });
+    },
+    bumpThumbnailRevisions: (compositions) => set(({ thumbnailRevisions }) => {
+      const next = { ...thumbnailRevisions };
+      for (const path of compositions?.map(revisionKey) ?? [EVERY_COMPOSITION]) {
+        next[path] = (next[path] ?? 0) + 1;
+      }
+      return { thumbnailRevisions: next };
+    })
+  };
+}
+
+// src/player/store/readinessSlice.ts
+import { settleCompositionReadiness } from "@hyperframes/core/composition-readiness";
+var timelineReadyGeneration = 0;
+var loadStepDocs = /* @__PURE__ */ new WeakSet();
+var awaitingLoadStep = null;
+function resetPlaybackReadinessState() {
+  timelineReadyGeneration++;
+  return { timelineReady: false, previewBooted: false };
+}
+function createPlaybackReadinessSlice(set) {
+  const settle = (doc, generation) => settleCompositionReadiness(doc, () => {
+    if (generation === timelineReadyGeneration) set({ timelineReady: true });
+  });
+  return {
+    timelineReady: false,
+    previewBooted: false,
+    markPreviewBooted: () => set({ previewBooted: true }),
+    setTimelineReady: (ready) => {
+      timelineReadyGeneration++;
+      set({ timelineReady: ready });
+    },
+    requestTimelineReady: (doc) => {
+      const generation = ++timelineReadyGeneration;
+      if (!doc) return set({ timelineReady: true });
+      if (!loadStepDocs.has(doc)) {
+        awaitingLoadStep = { doc, generation };
+        return;
+      }
+      settle(doc, generation);
+    },
+    markPreviewLoadStep: (doc) => {
+      loadStepDocs.add(doc);
+      if (awaitingLoadStep?.doc !== doc) return;
+      const { generation } = awaitingLoadStep;
+      awaitingLoadStep = null;
+      settle(doc, generation);
+    }
+  };
+}
+
+// src/player/store/rangeSelectionSlice.ts
+function createRangeSelectionSlice() {
+  return { rangeSelection: null };
+}
+
+// src/player/store/timelineResetState.ts
+function createTimelineResetState() {
+  return {
+    isPlaying: false,
+    currentTime: 0,
+    duration: 0,
+    ...resetPlaybackReadinessState(),
+    beatDragging: false,
+    elements: [],
+    selectedElementId: null,
+    zEditVersion: 0,
+    inPoint: null,
+    outPoint: null,
+    rangeSelection: null,
+    activeTool: "select",
+    activeKeyframePct: null,
+    motionPathArmed: false,
+    motionPathCreateAvailable: false,
+    selectedKeyframes: /* @__PURE__ */ new Set(),
+    // Ephemeral like every other selection here. A range surviving a project
+    // switch can match a same-keyed clip in the new project and redirect a
+    // paste through `sel.elementKey === paste.elementKey` to a stale t0.
+    automationSelection: null,
+    expandedClipIds: /* @__PURE__ */ new Set(),
+    // Per-composition: ids from comp A match nothing in B, silencing all of it.
+    collapsedGroupIds: /* @__PURE__ */ new Set(),
+    expandedLaneOwnerIds: /* @__PURE__ */ new Set(),
+    focusedEaseSegment: null,
+    revealedAudioFxTarget: null,
+    selectedElementIds: /* @__PURE__ */ new Set(),
+    requestedSeekTime: null,
+    lintFindingsByElement: /* @__PURE__ */ new Map(),
+    timelineFocus: null,
+    keyframeCache: /* @__PURE__ */ new Map(),
+    gsapAnimations: /* @__PURE__ */ new Map(),
+    beatAnalysis: null,
+    beatEdits: null,
+    beatUndo: [],
+    beatRedo: [],
+    beatPersist: null,
+    clipManifest: null,
+    clipParentMap: /* @__PURE__ */ new Map(),
+    domClipChildren: [],
+    subCompositionHostState: /* @__PURE__ */ new Map()
+  };
+}
+
+// src/player/store/playerStore.ts
+function resolveElementSelection(ids, anchor) {
+  const selectedElementIds = new Set(ids);
+  if (selectedElementIds.size === 0) {
+    return { selectedElementIds, selectedElementId: null };
+  }
+  if (anchor && selectedElementIds.has(anchor)) {
+    return { selectedElementIds, selectedElementId: anchor };
+  }
+  return {
+    selectedElementIds,
+    selectedElementId: selectedElementIds.values().next().value ?? null
+  };
+}
+var usePlayerStore = create((set, get) => ({
+  isPlaying: false,
+  currentTime: 0,
+  duration: 0,
+  timelineSessionEpoch: 0,
+  timelineProjectId: null,
+  beatDragging: false,
+  elements: [],
+  selectedElementId: null,
+  playbackRate: readStudioUiPreferences().playbackRate ?? 1,
+  audioMuted: readStudioUiPreferences().audioMuted ?? false,
+  audioVolume: readStudioUiPreferences().audioVolume ?? 1,
+  loopEnabled: false,
+  zoomMode: "fit",
+  manualZoomPercent: 100,
+  zEditVersion: 0,
+  timelinePps: 100,
+  timelineFitPps: 100,
+  inPoint: null,
+  outPoint: null,
+  activeTool: "select",
+  setActiveTool: (tool) => set({ activeTool: tool }),
+  ...createKeyframeSlice(set, () => ({
+    timelineProjectId: get().timelineProjectId,
+    timelineSessionEpoch: get().timelineSessionEpoch
+  })),
+  ...createThumbnailSlice(set),
+  ...createAutomationSelectionSlice(set),
+  ...createEditingModeSlice(set),
+  ...createRangeSelectionSlice(),
+  ...createPlaybackReadinessSlice(set),
+  activeKeyframePct: null,
+  setActiveKeyframePct: (pct) => set({ activeKeyframePct: pct }),
+  selectedElementIds: /* @__PURE__ */ new Set(),
+  setSelection: (ids, anchor) => set(resolveElementSelection(ids, anchor)),
+  addSelectedElementId: (id) => set((s) => {
+    const next = new Set(s.selectedElementIds);
+    next.add(id);
+    return resolveElementSelection(next, s.selectedElementId);
+  }),
+  toggleSelectedElementId: (id) => set((s) => {
+    const next = new Set(s.selectedElementIds);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return resolveElementSelection(next, s.selectedElementId);
+  }),
+  clearSelection: () => set({ selectedElementId: null, selectedElementIds: /* @__PURE__ */ new Set() }),
+  requestedSeekTime: null,
+  requestSeek: (time) => set({ requestedSeekTime: time }),
+  clearSeekRequest: () => set({ requestedSeekTime: null }),
+  playbackRequest: null,
+  requestPlayback: (playing, returnTo = null) => set((s) => ({
+    playbackRequest: { playing, returnTo, nonce: (s.playbackRequest?.nonce ?? 0) + 1 }
+  })),
+  clearPlaybackRequest: () => set({ playbackRequest: null }),
+  clipRevealRequest: null,
+  requestClipReveal: (elementId) => set((s) => ({
+    clipRevealRequest: { elementId, nonce: (s.clipRevealRequest?.nonce ?? 0) + 1 }
+  })),
+  clearClipRevealRequest: () => set({ clipRevealRequest: null }),
+  timelineFocus: null,
+  timelineFocusNonce: 0,
+  requestTimelineFocus: (id) => set((s) => {
+    const nonce = s.timelineFocusNonce + 1;
+    return {
+      timelineFocusNonce: nonce,
+      timelineFocus: createTimelineFocusRequest(
+        id,
+        s.timelineProjectId,
+        s.timelineSessionEpoch,
+        nonce
+      )
+    };
+  }),
+  clearTimelineFocus: (nonce) => set((s) => s.timelineFocus?.nonce === nonce ? { timelineFocus: null } : s),
+  lintFindingsByElement: /* @__PURE__ */ new Map(),
+  setLintFindingsByElement: (map) => set({ lintFindingsByElement: map }),
+  beatAnalysis: null,
+  setBeatAnalysis: (analysis) => set({ beatAnalysis: analysis }),
+  beatEdits: null,
+  setBeatEdits: (edits) => set({ beatEdits: edits }),
+  beatUndo: [],
+  beatRedo: [],
+  beatPersist: null,
+  setBeatPersist: (fn) => set({ beatPersist: fn }),
+  commitBeatEdits: (next, label) => {
+    set((s) => ({
+      beatEdits: next,
+      beatUndo: [...s.beatUndo, { restore: s.beatEdits, at: Date.now(), label }],
+      beatRedo: []
+    }));
+    get().beatPersist?.();
+  },
+  undoBeatEdits: () => {
+    const s = get();
+    const entry = s.beatUndo[s.beatUndo.length - 1];
+    if (!entry) return null;
+    set({
+      beatEdits: entry.restore,
+      beatUndo: s.beatUndo.slice(0, -1),
+      beatRedo: [...s.beatRedo, { restore: s.beatEdits, at: entry.at, label: entry.label }]
+    });
+    get().beatPersist?.();
+    return entry.label;
+  },
+  resetBeatHistory: () => set({ beatUndo: [], beatRedo: [] }),
+  redoBeatEdits: () => {
+    const s = get();
+    const entry = s.beatRedo[s.beatRedo.length - 1];
+    if (!entry) return null;
+    set({
+      beatEdits: entry.restore,
+      beatRedo: s.beatRedo.slice(0, -1),
+      beatUndo: [...s.beatUndo, { restore: s.beatEdits, at: entry.at, label: entry.label }]
+    });
+    get().beatPersist?.();
+    return entry.label;
+  },
+  clipManifest: null,
+  setClipManifest: (clips) => set({ clipManifest: clips }),
+  clipParentMap: /* @__PURE__ */ new Map(),
+  setClipParentMap: (map) => set({ clipParentMap: map }),
+  domClipChildren: [],
+  setDomClipChildren: (children) => set({ domClipChildren: children }),
+  subCompositionHostState: /* @__PURE__ */ new Map(),
+  setSubCompositionHostState: (state) => set({ subCompositionHostState: state }),
+  setIsPlaying: (playing) => {
+    if (get().isPlaying === playing) return;
+    set({ isPlaying: playing });
+  },
+  setPlaybackRate: (rate) => {
+    writeStudioUiPreferences({ playbackRate: rate });
+    set({ playbackRate: rate });
+  },
+  setAudioMuted: (muted) => {
+    writeStudioUiPreferences({ audioMuted: muted });
+    set({ audioMuted: muted });
+  },
+  setAudioVolume: (volume) => {
+    const nextVolume = Number.isFinite(volume) ? Math.max(0, Math.min(1, volume)) : 1;
+    writeStudioUiPreferences({ audioVolume: nextVolume });
+    set({ audioVolume: nextVolume });
+  },
+  setLoopEnabled: (enabled) => set({ loopEnabled: enabled }),
+  setZoomMode: (mode) => set({ zoomMode: mode }),
+  clearSelectedElementIds: () => set({ selectedElementIds: /* @__PURE__ */ new Set() }),
+  setSelectedElementIds: (ids) => set({ selectedElementIds: new Set(ids) }),
+  timelineSnapEnabled: readStudioUiPreferences().timelineSnapEnabled ?? true,
+  setTimelineSnapEnabled: (enabled) => {
+    writeStudioUiPreferences({ timelineSnapEnabled: enabled });
+    set({ timelineSnapEnabled: enabled });
+  },
+  rippleEditEnabled: readStudioUiPreferences().rippleEditEnabled ?? true,
+  // default on
+  setRippleEditEnabled: (enabled) => {
+    writeStudioUiPreferences({ rippleEditEnabled: enabled });
+    set({ rippleEditEnabled: enabled });
+  },
+  timeDisplayMode: readStudioUiPreferences().timeDisplayMode ?? "time",
+  setTimeDisplayMode: (mode) => {
+    writeStudioUiPreferences({ timeDisplayMode: mode });
+    set({ timeDisplayMode: mode });
+  },
+  pinTimelineZoom: (currentPixelsPerSecond, fitPixelsPerSecond) => set((s) => {
+    if (s.zoomMode === "manual") return {};
+    const percent = computePinnedZoomPercent(currentPixelsPerSecond, fitPixelsPerSecond);
+    writeStudioUiPreferences({
+      timelineZoomMode: "manual",
+      timelineManualZoomPercent: percent
+    });
+    return { zoomMode: "manual", manualZoomPercent: percent };
+  }),
+  setTimelineScale: (pps, fitPps) => {
+    const state = get();
+    if (state.timelinePps === pps && state.timelineFitPps === fitPps) return;
+    set({ timelinePps: pps, timelineFitPps: fitPps });
+  },
+  setInPoint: (time) => set((state) => {
+    const t = time !== null && Number.isFinite(time) ? time : null;
+    return {
+      inPoint: t,
+      outPoint: t !== null && state.outPoint !== null && t >= state.outPoint ? null : state.outPoint,
+      // Setting a work-area marker implies the user wants playback bounded by it.
+      // Auto-enable loop so the playhead respects the marker instead of running past.
+      loopEnabled: t !== null ? true : state.loopEnabled
+    };
+  }),
+  setOutPoint: (time) => set((state) => {
+    const t = time !== null && Number.isFinite(time) ? time : null;
+    return {
+      outPoint: t,
+      inPoint: t !== null && state.inPoint !== null && t <= state.inPoint ? null : state.inPoint,
+      loopEnabled: t !== null ? true : state.loopEnabled
+    };
+  }),
+  setManualZoomPercent: (percent) => set((state) => ({
+    manualZoomPercent: clampTimelineZoomPercent(percent, state.timelineFitPps)
+  })),
+  bumpZEditVersion: () => set((state) => ({ zEditVersion: state.zEditVersion + 1 })),
+  setCurrentTime: (time) => set({ currentTime: Number.isFinite(time) ? time : 0 }),
+  setDuration: (duration) => set({ duration: Number.isFinite(duration) ? duration : 0 }),
+  setBeatDragging: (dragging) => set({ beatDragging: dragging }),
+  setElements: (elements) => set({ elements }),
+  // A genuine single selection: always collapse the set to just this element. User
+  // intent (timeline click, preview click via applyDomSelection) flows here; DOM sync
+  // echoes that must preserve a group go through setSelectionAnchor instead.
+  setSelectedElementId: (id, options) => set((s) => {
+    const selectedElementIds = nextSelectionSet(s.selectedElementIds, id, options?.preserveSet);
+    const revealSurvives = revealTargetsSelection(s.revealedAudioFxTarget, id);
+    return id !== s.selectedElementId ? {
+      selectedElementId: id,
+      selectedElementIds,
+      activeKeyframePct: null,
+      motionPathArmed: false,
+      focusedEaseSegment: null,
+      ...revealSurvives ? {} : { revealedAudioFxTarget: null }
+    } : { selectedElementId: id, selectedElementIds };
+  }),
+  // Move the anchor within an active multi-selection WITHOUT collapsing it — used by
+  // DOM->store sync echoes while a group gesture re-patches the preview. A non-member
+  // id is treated as a genuine new single selection.
+  setSelectionAnchor: (id) => set((s) => {
+    if (id != null && s.selectedElementIds.size > 1 && s.selectedElementIds.has(id)) {
+      return {
+        selectedElementId: id,
+        focusedEaseSegment: id === s.selectedElementId ? s.focusedEaseSegment : null
+      };
+    }
+    return {
+      selectedElementId: id,
+      selectedElementIds: id ? /* @__PURE__ */ new Set([id]) : /* @__PURE__ */ new Set(),
+      focusedEaseSegment: id === s.selectedElementId ? s.focusedEaseSegment : null
+    };
+  }),
+  updateElement: (elementId, updates) => set((state) => ({
+    elements: state.elements.map(
+      (el) => (el.key ?? el.id) === elementId ? { ...el, ...updates } : el
+    )
+  })),
+  // UI preferences intentionally survive reset. So do timelineSessionEpoch and
+  // focusedEaseRequestNonce: the epoch advances only when project identity
+  // changes, while a monotonic nonce prevents collisions with stale consumers.
+  beginTimelineSession: (projectId) => set((state) => {
+    if (state.timelineProjectId === projectId) return state;
+    return {
+      ...createTimelineResetState(),
+      timelineSessionEpoch: state.timelineSessionEpoch + 1,
+      timelineProjectId: projectId
+    };
+  }),
+  reset: () => set(createTimelineResetState())
+}));
+attachPlayerStoreDevHandle(usePlayerStore);
+function isPreviewBooted(projectId) {
+  const { previewBooted, timelineProjectId } = usePlayerStore.getState();
+  return previewBooted && timelineProjectId === projectId;
+}
+function whenPreviewBooted(projectId) {
+  const openedFrom = usePlayerStore.getState().timelineProjectId;
+  let seen = false;
+  const settle = (state) => {
+    if (state.timelineProjectId === projectId) {
+      seen = true;
+      return state.previewBooted ? true : null;
+    }
+    return seen || state.timelineProjectId !== openedFrom ? false : null;
+  };
+  return new Promise((resolve) => {
+    const now = settle(usePlayerStore.getState());
+    if (now !== null) return resolve(now);
+    const stop = usePlayerStore.subscribe((state) => {
+      const result = settle(state);
+      if (result === null) return;
+      stop();
+      resolve(result);
+    });
+  });
+}
+
+// src/player/components/Player.tsx
+import { forwardRef, useEffect as useEffect2, useRef, useState } from "react";
+import { isLottieAnimationLoaded } from "@hyperframes/core/runtime/lottie-readiness";
+
+// src/hooks/useMountEffect.ts
+import { useEffect } from "react";
+function useMountEffect(effect) {
+  useEffect(effect, []);
+}
+
+// src/hooks/previewVariablesStore.ts
+import { create as create2 } from "zustand";
+var usePreviewVariablesStore = create2((set) => ({
+  values: null,
+  setValues: (values) => set({ values: values && Object.keys(values).length > 0 ? values : null })
+}));
+function applyPreviewVariablesToUrl(url) {
+  const values = usePreviewVariablesStore.getState().values;
+  if (values) {
+    url.searchParams.set("variables", JSON.stringify(values));
+  } else {
+    url.searchParams.delete("variables");
+  }
+}
+
+// src/player/components/Player.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var playerModule = null;
+function loadPlayerModule() {
+  playerModule ??= import("@hyperframes/player").catch((err) => {
+    playerModule = null;
+    throw err;
+  });
+  return playerModule;
+}
+if (typeof window !== "undefined") void loadPlayerModule().catch(() => {
+});
+var MEDIA_HAVE_FUTURE_DATA = 3;
+var MEDIA_NETWORK_NO_SOURCE = 3;
+function isRecord3(value) {
+  return typeof value === "object" && value !== null;
+}
+function getShaderTransitionLoading(event) {
+  if (!(event instanceof CustomEvent)) return null;
+  const detail = event.detail;
+  if (!isRecord3(detail)) return null;
+  const state = detail.state;
+  if (!isRecord3(state)) return null;
+  return state.loading === true && state.ready !== true;
+}
+var COMPOSITION_LOADING_OVERLAY_DELAY_MS = 400;
+var PREVIEW_BOOT_DEADLINE_MS = 5e3;
+var DEFAULT_PREVIEW_ERROR = "The composition preview did not become ready.";
+function shouldShowCompositionLoadingOverlay(compositionLoading) {
+  return compositionLoading;
+}
+function readPreviewErrorMessage(event) {
+  if (!(event instanceof CustomEvent) || !isRecord3(event.detail)) return DEFAULT_PREVIEW_ERROR;
+  return typeof event.detail.message === "string" && event.detail.message.trim() ? event.detail.message : DEFAULT_PREVIEW_ERROR;
+}
+function enableInteractiveIframe(player) {
+  const root = player.shadowRoot;
+  if (!root) return;
+  const container = root.querySelector(".hfp-container");
+  const iframe = root.querySelector(".hfp-iframe");
+  container?.style.setProperty("pointer-events", "auto");
+  iframe?.style.setProperty("pointer-events", "auto");
+}
+function isPreviewMediaElement(el) {
+  const tagName = el.tagName.toLowerCase();
+  return tagName === "video" || tagName === "audio";
+}
+function hasUnloadedAssets(iframe, lastResult) {
+  try {
+    const win = iframe.contentWindow;
+    const doc = iframe.contentDocument;
+    if (!win || !doc) return lastResult;
+    for (const el of doc.querySelectorAll("video, audio")) {
+      if (isPreviewMediaElement(el) && !el.error && el.networkState !== MEDIA_NETWORK_NO_SOURCE && el.readyState < MEDIA_HAVE_FUTURE_DATA) {
+        return true;
+      }
+    }
+    const lotties = win.__hfLottie;
+    if (lotties?.length) {
+      for (const anim of lotties) {
+        if (!isLottieAnimationLoaded(anim)) return true;
+      }
+    }
+    return false;
+  } catch {
+    return lastResult;
+  }
+}
+var Player = forwardRef(
+  ({
+    projectId,
+    directUrl,
+    onLoad,
+    onReadyToShowChange,
+    onPreviewError,
+    onCompositionLoadingChange,
+    onPainted,
+    portrait,
+    style,
+    suppressLoadingOverlay
+  }, ref) => {
+    const containerRef = useRef(null);
+    const loadCountRef = useRef(0);
+    const assetPollRef = useRef(null);
+    const assetFadeRef = useRef(null);
+    const retryPreviewRef = useRef(null);
+    const loadStartedAtRef = useRef(0);
+    const loadIdRef = useRef(0);
+    const retryCountRef = useRef(0);
+    const onLoadRef = useRef(onLoad);
+    onLoadRef.current = onLoad;
+    const onReadyToShowChangeRef = useRef(onReadyToShowChange);
+    onReadyToShowChangeRef.current = onReadyToShowChange;
+    const onPreviewErrorRef = useRef(onPreviewError);
+    onPreviewErrorRef.current = onPreviewError;
+    const [loaded, setLoaded] = useState(false);
+    const [assetsLoading, setAssetsLoading] = useState(false);
+    const [assetOverlayVisible, setAssetOverlayVisible] = useState(false);
+    const [assetOverlayFading, setAssetOverlayFading] = useState(false);
+    const [assetWaitLong, setAssetWaitLong] = useState(false);
+    const [shaderTransitionLoading, setShaderTransitionLoading] = useState(false);
+    const [compositionLoading, setCompositionLoading] = useState(true);
+    const [painted, setPainted] = useState(false);
+    const [compositionOverlayDeferred, setCompositionOverlayDeferred] = useState(true);
+    const [previewError, setPreviewError] = useState(null);
+    useEffect2(() => {
+      if (!compositionLoading) {
+        setCompositionOverlayDeferred(true);
+        return;
+      }
+      const timer = setTimeout(
+        () => setCompositionOverlayDeferred(false),
+        COMPOSITION_LOADING_OVERLAY_DELAY_MS
+      );
+      return () => clearTimeout(timer);
+    }, [compositionLoading]);
+    useMountEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const previewSource = directUrl || (projectId ? buildProjectApiPath(projectId, "/preview") : null);
+      if (!previewSource) return;
+      let canceled = false;
+      let cleanup;
+      void loadPlayerModule().then(() => {
+        if (canceled) return;
+        const player = document.createElement("hyperframes-player");
+        const srcUrl = new URL(previewSource, window.location.origin);
+        applyPreviewVariablesToUrl(srcUrl);
+        const src = srcUrl.pathname + srcUrl.search;
+        const retryPreview = () => {
+          retryCountRef.current += 1;
+          const retryUrl = new URL(src, window.location.origin);
+          retryUrl.searchParams.set("_hfStudioRetry", String(retryCountRef.current));
+          setPreviewError(null);
+          setCompositionLoading(true);
+          loadStartedAtRef.current = performance.now();
+          loadIdRef.current += 1;
+          player.setAttribute("src", retryUrl.pathname + retryUrl.search);
+        };
+        retryPreviewRef.current = retryPreview;
+        const iframe = player.iframeElement;
+        const preventToggle = (e) => e.stopImmediatePropagation();
+        const handleShaderTransitionState = (event) => {
+          const loading = getShaderTransitionLoading(event);
+          if (loading !== null) setShaderTransitionLoading(loading);
+        };
+        const handleReady = () => {
+          setPreviewError(null);
+          setCompositionLoading(false);
+        };
+        const handlePainted = () => {
+          setPainted(true);
+          onPainted?.({ iframe, startedAt: loadStartedAtRef.current, loadId: loadIdRef.current });
+        };
+        const handleError = (event) => {
+          const message = readPreviewErrorMessage(event);
+          onPreviewErrorRef.current?.(message);
+          setPreviewError(message);
+          setCompositionLoading(false);
+        };
+        const handleLoad = () => {
+          loadCountRef.current++;
+          setLoaded(true);
+          setPreviewError(null);
+          setShaderTransitionLoading(false);
+          setCompositionLoading(!player.ready);
+          setPainted(Boolean(player.painted));
+          if (loadCountRef.current > 1) {
+            container.classList.remove("preview-revealing");
+            void container.offsetWidth;
+            container.classList.add("preview-revealing");
+            const onEnd = () => container.classList.remove("preview-revealing");
+            container.addEventListener("animationend", onEnd, { once: true });
+          }
+          onLoadRef.current();
+          if (assetPollRef.current) clearInterval(assetPollRef.current);
+          const isContentRefresh = loadCountRef.current > 1;
+          let lastUnloaded = isContentRefresh ? false : hasUnloadedAssets(iframe, false);
+          if (lastUnloaded) {
+            setAssetsLoading(true);
+            let attempts = 0;
+            assetPollRef.current = setInterval(() => {
+              attempts += 1;
+              lastUnloaded = hasUnloadedAssets(iframe, lastUnloaded);
+              if (!lastUnloaded || attempts > 100) {
+                if (lastUnloaded && attempts > 100) {
+                  console.debug(
+                    "[studio] asset readiness poll hit the 10s cap \u2014 continuing with unloaded assets"
+                  );
+                }
+                if (assetPollRef.current) clearInterval(assetPollRef.current);
+                assetPollRef.current = null;
+                setAssetsLoading(false);
+              }
+            }, 100);
+          } else {
+            setAssetsLoading(false);
+          }
+        };
+        iframe.addEventListener("load", handleLoad);
+        player.addEventListener("click", preventToggle, { capture: true });
+        player.addEventListener("shadertransitionstate", handleShaderTransitionState);
+        player.addEventListener("ready", handleReady);
+        player.addEventListener("painted", handlePainted);
+        player.addEventListener("error", handleError);
+        if (typeof ref === "function") {
+          ref(iframe);
+        } else if (ref) {
+          ref.current = iframe;
+        }
+        player.setAttribute("shader-capture-scale", "1");
+        player.setAttribute("shader-loading", "player");
+        player.setAttribute("low-power-idle", "");
+        player.setAttribute("width", String(portrait ? 1080 : 1920));
+        player.setAttribute("height", String(portrait ? 1920 : 1080));
+        player.style.width = "100%";
+        player.style.height = "100%";
+        player.style.display = "block";
+        player.style.background = "transparent";
+        loadStartedAtRef.current = performance.now();
+        loadIdRef.current += 1;
+        player.setAttribute("src", src);
+        container.appendChild(player);
+        if (player.shadowRoot) {
+          const pasteboardStyle = document.createElement("style");
+          pasteboardStyle.textContent = ".hfp-container{overflow:visible}.hfp-iframe{box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 4px 32px rgba(0,0,0,.7)}";
+          player.shadowRoot.appendChild(pasteboardStyle);
+        }
+        enableInteractiveIframe(player);
+        cleanup = () => {
+          iframe.removeEventListener("load", handleLoad);
+          player.removeEventListener("click", preventToggle, { capture: true });
+          player.removeEventListener("shadertransitionstate", handleShaderTransitionState);
+          player.removeEventListener("ready", handleReady);
+          player.removeEventListener("painted", handlePainted);
+          player.removeEventListener("error", handleError);
+          if (assetPollRef.current) clearInterval(assetPollRef.current);
+          assetPollRef.current = null;
+          player.remove();
+          if (retryPreviewRef.current === retryPreview) retryPreviewRef.current = null;
+          if (typeof ref === "function") {
+          } else if (ref) {
+            const mutableRef = ref;
+            if (mutableRef.current === iframe) {
+              mutableRef.current = null;
+            }
+          }
+        };
+      });
+      return () => {
+        canceled = true;
+        cleanup?.();
+      };
+    });
+    useEffect2(() => {
+      if (!assetsLoading) {
+        setAssetWaitLong(false);
+        return;
+      }
+      const timer = setTimeout(() => setAssetWaitLong(true), 3e3);
+      return () => clearTimeout(timer);
+    }, [assetsLoading]);
+    useEffect2(() => {
+      if (assetFadeRef.current) {
+        clearTimeout(assetFadeRef.current);
+        assetFadeRef.current = null;
+      }
+      if (assetsLoading) {
+        setAssetOverlayVisible(true);
+        setAssetOverlayFading(false);
+        return;
+      }
+      setAssetOverlayFading(true);
+      assetFadeRef.current = setTimeout(() => {
+        setAssetOverlayVisible(false);
+        setAssetOverlayFading(false);
+        assetFadeRef.current = null;
+      }, 240);
+      return () => {
+        if (assetFadeRef.current) {
+          clearTimeout(assetFadeRef.current);
+          assetFadeRef.current = null;
+        }
+      };
+    }, [assetsLoading]);
+    const handleContinueAnyway = () => {
+      if (assetPollRef.current) {
+        clearInterval(assetPollRef.current);
+        assetPollRef.current = null;
+      }
+      setAssetsLoading(false);
+    };
+    const firstFrameShown = loaded && painted && !compositionLoading && !shaderTransitionLoading && !previewError;
+    const readyToShow = firstFrameShown && !assetsLoading;
+    useEffect2(() => {
+      if (firstFrameShown) usePlayerStore.getState().markPreviewBooted();
+    }, [firstFrameShown]);
+    useEffect2(() => {
+      if (!readyToShow) {
+        onReadyToShowChangeRef.current?.(false);
+        return;
+      }
+      let second = 0;
+      const first = requestAnimationFrame(() => {
+        second = requestAnimationFrame(() => onReadyToShowChangeRef.current?.(true));
+      });
+      return () => {
+        cancelAnimationFrame(first);
+        cancelAnimationFrame(second);
+      };
+    }, [readyToShow]);
+    useEffect2(() => {
+      if (previewError) usePlayerStore.getState().markPreviewBooted();
+    }, [previewError]);
+    useEffect2(() => {
+      const timer = setTimeout(
+        () => usePlayerStore.getState().markPreviewBooted(),
+        PREVIEW_BOOT_DEADLINE_MS
+      );
+      return () => clearTimeout(timer);
+    }, [projectId]);
+    const showCompositionOverlay = !suppressLoadingOverlay && !compositionOverlayDeferred && shouldShowCompositionLoadingOverlay(compositionLoading);
+    const showAssetOverlay = assetOverlayVisible && !shaderTransitionLoading && !showCompositionOverlay && !previewError;
+    useEffect2(() => {
+      onCompositionLoadingChange?.(showCompositionOverlay || showAssetOverlay);
+    }, [onCompositionLoadingChange, showCompositionOverlay, showAssetOverlay]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative w-full h-full max-w-full max-h-full overflow-hidden flex items-center justify-center",
+        style,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full h-full" }),
+          showCompositionOverlay && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black flex items-center justify-center z-30 select-none",
+              "data-hyperframes-ignore": "",
+              "data-testid": "composition-loading-overlay",
+              draggable: false,
+              onDragStart: (event) => event.preventDefault(),
+              onMouseDown: (event) => event.preventDefault(),
+              onPointerDown: (event) => event.preventDefault(),
+              children: /* @__PURE__ */ jsx(
+                HyperframesLoader,
+                {
+                  title: "Loading composition",
+                  detail: "Preparing the Studio preview.",
+                  size: 56
+                }
+              )
+            }
+          ),
+          showAssetOverlay && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black flex items-center justify-center z-20 select-none",
+              "data-hyperframes-ignore": "",
+              draggable: false,
+              style: {
+                opacity: assetOverlayFading ? 0 : 1,
+                pointerEvents: assetOverlayFading ? "none" : "auto",
+                transition: "opacity 180ms ease-in"
+              },
+              onDragStart: (event) => event.preventDefault(),
+              onMouseDown: (event) => event.preventDefault(),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  HyperframesLoader,
+                  {
+                    title: "Preparing preview assets",
+                    detail: "Waiting for media and motion assets before playback starts.",
+                    size: 56
+                  }
+                ),
+                assetWaitLong && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleContinueAnyway,
+                    className: "px-3 py-1.5 text-[11px] rounded-md border border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800 transition-colors",
+                    children: "Continue anyway"
+                  }
+                )
+              ] })
+            }
+          ),
+          previewError && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 z-40 flex items-center justify-center bg-black/90 px-6 text-center",
+              "data-hyperframes-ignore": "",
+              "data-testid": "composition-preview-error",
+              children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-white", children: "Preview failed to load" }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-neutral-400", children: previewError }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "mt-4 rounded-md bg-white px-3 py-1.5 text-xs font-semibold text-black transition-colors hover:bg-neutral-200",
+                    onClick: () => retryPreviewRef.current?.(),
+                    children: "Retry preview"
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Player.displayName = "Player";
+
+export {
+  useMountEffect,
+  usePreviewVariablesStore,
+  applyPreviewVariablesToUrl,
+  getAdapterDuration,
+  getDefaultStaticSeekPlaybackClock,
+  releaseStaticSeekCache,
+  resolveStaticSeekFallback,
+  wrapTimeline,
+  LAYER_REVEAL_PRIOR_Z_ATTR,
+  LAYER_REVEAL_PRIOR_POSITION_ATTR,
+  readLayerRevealPriorZ,
+  readTimelineElementZIndex,
+  isTimelineIgnoredElement,
+  furthestClipEndFromDocument,
+  readTimelineDurationFromDocument,
+  furthestClipEndFromSource,
+  resolveMediaElement,
+  readPlaybackStartAttributes,
+  playbackStartAttributeForElement,
+  applyMediaMetadataFromElement,
+  getTimelineElementDisplayLabel,
+  getTimelineElementSelector,
+  getTimelineElementSourceFile,
+  getTimelineElementSelectorIndex,
+  buildTimelineElementKey,
+  splitTimelineElementKey,
+  buildTimelineElementIdentity,
+  getTimelineElementIdentity,
+  runtimeAudioId,
+  deriveTimelineStoreKey,
+  deriveTimelineStoreKeyForDomId,
+  previewElementFinder,
+  findClipElementById,
+  createTimelineDomNodeResolver,
+  PANEL_IDS,
+  PANEL_DEFINITIONS,
+  isPanelId,
+  panelsInZone,
+  DOCK_PANEL_COMPONENT,
+  readStudioUiPreferences,
+  writeStudioUiPreferences,
+  STUDIO_PREVIEW_FPS,
+  formatTime,
+  secondsToFrame,
+  frameToSeconds,
+  stepFrameTime,
+  formatFrameTime,
+  getTimelineZoomPercent,
+  getTimelinePixelsPerSecond,
+  getNextTimelineZoomPercent,
+  getPinchTimelineZoomPercent,
+  timelineZoomPercentToSlider,
+  timelineSliderToZoomPercent,
+  isRevealedAudioFxRequestCurrent,
+  isFocusedEaseRequestCurrent,
+  effectiveThumbnailMode,
+  thumbnailRevisionOf,
+  createTimelineResetState,
+  liveTime,
+  usePlayerStore,
+  isPreviewBooted,
+  whenPreviewBooted,
+  Player
+};
+//# sourceMappingURL=chunk-LPZMAGS7.js.map