@hyperframes/studio 0.8.107 → 0.8.109

package/dist/{chunk-4OZC426H.js → chunk-QUXZVHOJ.js}

@@ -1,10 +1,10 @@
 import {
   HyperframesLoader
-} from "./chunk-NCUBAVGK.js";
+} from "./chunk-5VSXRGIX.js";
 import {
   buildProjectApiPath,
-  getSourceScopedSelectorIndex
-} from "./chunk-DI4LCJHL.js";
+  splitTimelineElementKey
+} from "./chunk-6LUNLTHR.js";
 
 // src/player/lib/time.ts
 var STUDIO_PREVIEW_FPS = 30;
@@ -72,474 +72,6 @@ function attachPlayerStoreDevHandle(store) {
   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 {
-  clampPlaybackRate,
-  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 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 = clampPlaybackRate(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 isVideoAudible(opts) {
-  if (opts.hasAudioAttr === "true") return true;
-  if (opts.hasAudioAttr === "false" || opts.hasAudioAttr === "") return false;
-  return opts.tag.toLowerCase() === "video" && !opts.muted;
-}
-function applyAudioMetadataFromElement(entry, el) {
-  const media = resolveMediaElement(el) ?? el;
-  const muted = el.hasAttribute("muted") || media.hasAttribute("muted");
-  const sound = isVideoAudible({
-    tag: el.tagName,
-    hasAudioAttr: el.getAttribute("data-has-audio"),
-    muted
-  });
-  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 = clampPlaybackRate(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();
@@ -737,6 +269,12 @@ function readStorage(storage, key) {
     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;
@@ -1836,38 +1374,6 @@ 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,
-  isVideoAudible,
-  applyMediaMetadataFromElement,
-  getTimelineElementDisplayLabel,
-  getTimelineElementSelector,
-  getTimelineElementSourceFile,
-  getTimelineElementSelectorIndex,
-  buildTimelineElementKey,
-  splitTimelineElementKey,
-  buildTimelineElementIdentity,
-  getTimelineElementIdentity,
-  runtimeAudioId,
-  deriveTimelineStoreKey,
-  deriveTimelineStoreKeyForDomId,
-  previewElementFinder,
-  findClipElementById,
-  createTimelineDomNodeResolver,
   PANEL_IDS,
   PANEL_DEFINITIONS,
   isPanelId,
@@ -1900,4 +1406,4 @@ export {
   whenPreviewBooted,
   Player
 };
-//# sourceMappingURL=chunk-4OZC426H.js.map
+//# sourceMappingURL=chunk-QUXZVHOJ.js.map