@ignix-social/editor 0.1.0

package/vendor/hyperframes/dist/studio/chunk-FOEID72M.js

@@ -0,0 +1,1441 @@
+import {
+  HyperframesLoader
+} from "./chunk-5VSXRGIX.js";
+import {
+  buildProjectApiPath,
+  splitTimelineElementKey
+} from "./chunk-TDWGXBUT.js";
+
+// src/player/lib/time.ts
+var STUDIO_PREVIEW_FPS = 30;
+var clampToDuration = (time, duration) => Math.max(0, duration > 0 ? Math.min(duration, time) : time);
+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 latestTime = 0;
+var seekCount = 0;
+var liveTime = {
+  notify: (time) => {
+    latestTime = time;
+    timeListeners.forEach((listener) => listener(time));
+  },
+  notifySeek: (time) => {
+    seekCount += 1;
+    liveTime.notify(time);
+  },
+  seekCount: () => seekCount,
+  latest: () => latestTime,
+  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/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, allowed) {
+  const ids = Object.keys(panels);
+  return ids.length > 0 && ids.every((id) => {
+    const state = panels[id];
+    return isPanelId(id) && allowed.includes(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, allowed = PANEL_IDS) {
+  if (!isRecord(value) || !isRecord(value.grid) || !isRecord(value.panels)) return null;
+  const { grid, panels } = value;
+  if (!hasGridShape(grid) || !panelsAreRegistered(panels, allowed)) 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, key) {
+  return projectId ? `${key}:${projectId}` : 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.theme === "light" || parsed.theme === "dark") preferences.theme = parsed.theme;
+    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;
+    }
+    if (typeof parsed.linkedSelectionEnabled === "boolean") {
+      preferences.linkedSelectionEnabled = parsed.linkedSelectionEnabled;
+    }
+    if (typeof parsed.syncIndicatorsVisible === "boolean") {
+      preferences.syncIndicatorsVisible = parsed.syncIndicatorsVisible;
+    }
+    const dockLayout = parseDockLayout(parsed.dockLayout);
+    if (dockLayout) preferences.dockLayout = dockLayout;
+    return preferences;
+  } catch {
+    return {};
+  }
+}
+function readStudioUiPreferences(storage = getBrowserStorage(), projectId = null, key = STUDIO_UI_PREFERENCES_KEY) {
+  const scoped = readStorage(storage, storageKeyFor(projectId, key));
+  if (!projectId || Object.keys(scoped).length > 0) return scoped;
+  return readStorage(storage, key);
+}
+function writeStudioUiPreferences(patch, storage = getBrowserStorage(), projectId = null, key = STUDIO_UI_PREFERENCES_KEY) {
+  if (!storage) return;
+  try {
+    const next = {
+      ...readStudioUiPreferences(storage, projectId, key),
+      ...patch
+    };
+    storage.setItem(storageKeyFor(projectId, key), 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 }),
+    playLocked: false,
+    setPlayLocked: (locked) => set({ playLocked: locked }),
+    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/elementPatchQueue.ts
+var queued = null;
+function queueElementPatch(key, updates) {
+  if (!queued) return false;
+  queued.set(key, { ...queued.get(key), ...updates });
+  return true;
+}
+function collectElementPatches(run) {
+  if (queued) {
+    run();
+    return null;
+  }
+  const patches = queued = /* @__PURE__ */ new Map();
+  try {
+    run();
+  } finally {
+    queued = null;
+  }
+  return patches;
+}
+function patchElements(elements, patches) {
+  return elements.map((el) => {
+    const patch = patches.get(el.key ?? el.id);
+    return patch ? { ...el, ...patch } : el;
+  });
+}
+
+// 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
+  };
+}
+function selectAroundPlayhead(state, keep) {
+  const playhead = state.isPlaying ? liveTime.latest() : state.currentTime;
+  const ids = state.elements.filter((el) => keep(el, playhead)).map((el) => el.key ?? el.id);
+  state.setSelectedElementId(ids[0] ?? null);
+  state.setSelectedElementIds(new Set(ids));
+}
+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,
+  userZoomCount: 0,
+  zEditVersion: 0,
+  timelinePps: 100,
+  timelineFitPps: 100,
+  inPoint: null,
+  outPoint: null,
+  activeTool: "select",
+  setActiveTool: (tool) => set({ activeTool: tool }),
+  selectLeftward: () => selectAroundPlayhead(get(), (el, t) => el.start < t),
+  selectRightward: () => selectAroundPlayhead(get(), (el, t) => el.start + el.duration > t),
+  ...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) => {
+    if (queueElementPatch(elementId, updates)) return;
+    set((state) => ({ elements: patchElements(state.elements, /* @__PURE__ */ new Map([[elementId, updates]])) }));
+  },
+  // 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,
+  PANEL_IDS,
+  PANEL_DEFINITIONS,
+  isPanelId,
+  panelsInZone,
+  DOCK_PANEL_COMPONENT,
+  parseDockLayout,
+  readStudioUiPreferences,
+  writeStudioUiPreferences,
+  STUDIO_PREVIEW_FPS,
+  clampToDuration,
+  formatTime,
+  secondsToFrame,
+  frameToSeconds,
+  stepFrameTime,
+  formatFrameTime,
+  getTimelineZoomPercent,
+  computePinnedZoomPercent,
+  getTimelinePixelsPerSecond,
+  getNextTimelineZoomPercent,
+  getPinchTimelineZoomPercent,
+  timelineZoomPercentToSlider,
+  timelineSliderToZoomPercent,
+  isRevealedAudioFxRequestCurrent,
+  isFocusedEaseRequestCurrent,
+  effectiveThumbnailMode,
+  thumbnailRevisionOf,
+  createTimelineResetState,
+  collectElementPatches,
+  patchElements,
+  liveTime,
+  usePlayerStore,
+  isPreviewBooted,
+  whenPreviewBooted,
+  Player
+};
+//# sourceMappingURL=chunk-FOEID72M.js.map