@ignix-social/editor 0.1.0

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

@@ -0,0 +1,1103 @@
+// src/utils/sourceScopedSelectorIndex.ts
+var activePass = null;
+function withSelectorIndexPass(doc, run) {
+  const previous = activePass;
+  activePass = { doc, bySelector: /* @__PURE__ */ new Map() };
+  try {
+    return run();
+  } finally {
+    activePass = previous;
+  }
+}
+function buildOccurrences(doc, selector, resolveSourceFile) {
+  const occurrences = /* @__PURE__ */ new Map();
+  const counts = /* @__PURE__ */ new Map();
+  for (const candidate of doc.querySelectorAll(selector)) {
+    const scope = resolveSourceFile(candidate) ?? "index.html";
+    const index = counts.get(scope) ?? 0;
+    counts.set(scope, index + 1);
+    occurrences.set(candidate, { scope, index });
+  }
+  return occurrences;
+}
+function getSourceScopedSelectorIndex(doc, el, selector, sourceFile, resolveSourceFile) {
+  if (!selector || selector.startsWith("#") || selector.startsWith("[data-composition-id=")) {
+    return void 0;
+  }
+  try {
+    const pass = activePass?.doc === doc ? activePass : null;
+    let occurrences = pass?.bySelector.get(selector);
+    if (!occurrences) {
+      occurrences = buildOccurrences(doc, selector, resolveSourceFile);
+      pass?.bySelector.set(selector, occurrences);
+    }
+    const hit = occurrences.get(el);
+    return hit && hit.scope === (sourceFile ?? "index.html") ? hit.index : void 0;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/components/editor/domEditingDom.ts
+import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-grading";
+
+// src/components/editor/domEditingTypes.ts
+var CURATED_STYLE_PROPERTIES = [
+  "position",
+  "display",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "inset",
+  "width",
+  "height",
+  "gap",
+  "justify-content",
+  "align-items",
+  "flex-direction",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "font-family",
+  "line-height",
+  "letter-spacing",
+  "text-align",
+  "text-transform",
+  "color",
+  "background-color",
+  "background-image",
+  "opacity",
+  "mix-blend-mode",
+  "border-radius",
+  "border-width",
+  "border-style",
+  "border-color",
+  "border-top-width",
+  "border-top-style",
+  "border-top-color",
+  "outline-color",
+  "overflow",
+  "clip-path",
+  "box-shadow",
+  "filter",
+  "backdrop-filter",
+  "z-index",
+  "transform",
+  "object-fit",
+  "object-position"
+];
+
+// src/components/editor/domEditingDom.ts
+import { parsePx } from "@hyperframes/core/editing";
+function isHtmlElement(value) {
+  return typeof value === "object" && value !== null && "nodeType" in value && typeof value.nodeType === "number" && value.nodeType === 1;
+}
+function isTextBearingTag(tagName) {
+  return ["div", "span", "p", "strong", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tagName);
+}
+function isEditableTextLeaf(el) {
+  return isTextBearingTag(el.tagName.toLowerCase()) && el.children.length === 0;
+}
+function elementRendersItself(win, el) {
+  const computed = win.getComputedStyle(el);
+  if (computed.display === "none" || computed.visibility === "hidden") return false;
+  const opacity = Number.parseFloat(computed.opacity);
+  return !(Number.isFinite(opacity) && opacity <= 0.01 && !el.hasAttribute(COLOR_GRADING_SOURCE_HIDDEN_ATTR));
+}
+function isElementVisibleThroughAncestors(el, memo) {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return true;
+  const pending = [];
+  let inherited = true;
+  for (let node = el; node; node = node.parentElement) {
+    const answered = memo?.get(node);
+    if (answered !== void 0) {
+      inherited = answered;
+      break;
+    }
+    pending.push(node);
+  }
+  for (let i = pending.length - 1; i >= 0; i -= 1) {
+    const node = pending[i];
+    inherited = inherited && elementRendersItself(win, node);
+    memo?.set(node, inherited);
+  }
+  return inherited;
+}
+function getCuratedComputedStyles(el) {
+  const styles = {};
+  const computed = el.ownerDocument.defaultView?.getComputedStyle(el);
+  if (!computed) return styles;
+  for (const prop of CURATED_STYLE_PROPERTIES) {
+    const value = computed.getPropertyValue(prop);
+    if (value) styles[prop] = value;
+  }
+  return styles;
+}
+function getInlineStyles(el) {
+  const styles = {};
+  for (const property of CURATED_STYLE_PROPERTIES) {
+    const value = el.style.getPropertyValue(property);
+    if (value) styles[property] = value;
+  }
+  return styles;
+}
+function getDataAttributes(el) {
+  const attrs = {};
+  for (const attr of el.attributes) {
+    if (attr.name.startsWith("data-")) {
+      attrs[attr.name.slice(5)] = attr.value;
+    }
+  }
+  return attrs;
+}
+function findClosestByAttribute(el, attributeNames) {
+  let current = el;
+  while (current) {
+    const candidate = current;
+    if (attributeNames.some((attribute) => candidate.hasAttribute(attribute))) {
+      return candidate;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+var compositionSourceMap = /* @__PURE__ */ new Map();
+var compositionSourceMapRevision = 0;
+function setCompositionSourceMap(map) {
+  compositionSourceMap = map;
+  compositionSourceMapRevision += 1;
+}
+function getCompositionSourceMapRevision() {
+  return compositionSourceMapRevision;
+}
+function sourceFromCompositionId(ownerRoot) {
+  if (!ownerRoot || compositionSourceMap.size === 0) return void 0;
+  const authored = ownerRoot.getAttribute("data-hf-original-composition-id");
+  const current = ownerRoot.getAttribute("data-composition-id");
+  return (authored ? compositionSourceMap.get(authored) : void 0) ?? (current ? compositionSourceMap.get(current) : void 0);
+}
+function getSourceFileForElement(el, activeCompositionPath) {
+  const sourceHost = findClosestByAttribute(el, ["data-composition-file", "data-composition-src"]);
+  const ownerRoot = findClosestByAttribute(el, ["data-composition-id"]);
+  const sourceFile = sourceHost?.getAttribute("data-composition-file") ?? sourceHost?.getAttribute("data-composition-src") ?? ownerRoot?.getAttribute("data-composition-file") ?? ownerRoot?.getAttribute("data-composition-src") ?? sourceFromCompositionId(ownerRoot) ?? activeCompositionPath ?? "index.html";
+  return {
+    sourceFile,
+    compositionPath: sourceFile
+  };
+}
+function normalizeTimelineCompositionSource(value) {
+  const trimmed = value?.trim();
+  if (!trimmed) return void 0;
+  if (!/^([a-z][a-z0-9+.-]*:|\/)/i.test(trimmed)) return trimmed;
+  let pathname = trimmed;
+  try {
+    pathname = new URL(trimmed, "http://studio.local").pathname;
+  } catch {
+    pathname = trimmed;
+  }
+  for (const marker of ["/preview/comp/", "/preview/"]) {
+    const markerIndex = pathname.indexOf(marker);
+    if (markerIndex < 0) continue;
+    const sourcePath = pathname.slice(markerIndex + marker.length).replace(/^\/+/, "");
+    return sourcePath || trimmed;
+  }
+  return trimmed;
+}
+function escapeCssIdentifier(value) {
+  const css = globalThis.CSS;
+  if (typeof css?.escape === "function") return css.escape(value);
+  if (value === "-") return "\\-";
+  let escaped = "";
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index] ?? "";
+    const code = char.charCodeAt(0);
+    if (code === 0) {
+      escaped += "\uFFFD";
+      continue;
+    }
+    const isDigit = code >= 48 && code <= 57;
+    const isUpperAlpha = code >= 65 && code <= 90;
+    const isLowerAlpha = code >= 97 && code <= 122;
+    const isControl = code >= 1 && code <= 31 || code === 127;
+    const isLeadingDigit = index === 0 && isDigit;
+    const isSecondDigitAfterDash = index === 1 && value.startsWith("-") && isDigit;
+    if (isControl || isLeadingDigit || isSecondDigitAfterDash) {
+      escaped += `\\${code.toString(16)} `;
+      continue;
+    }
+    if (isUpperAlpha || isLowerAlpha || isDigit || char === "-" || char === "_" || code >= 128) {
+      escaped += char;
+      continue;
+    }
+    escaped += `\\${char}`;
+  }
+  return escaped;
+}
+function escapeCssString(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ");
+}
+function querySelectorAllSafely(doc, selector) {
+  try {
+    return Array.from(doc.querySelectorAll(selector));
+  } catch {
+    return [];
+  }
+}
+function humanizeIdentifier(value) {
+  return value.replace(/\.html$/i, "").replace(/^compositions\//i, "").split("/").at(-1)?.replace(/[-_]+/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()) ?? value;
+}
+function buildStableSelector(el) {
+  if (el.id) return `#${escapeCssIdentifier(el.id)}`;
+  const compositionId = el.getAttribute("data-composition-id");
+  if (compositionId) return `[data-composition-id="${escapeCssString(compositionId)}"]`;
+  const group = el.getAttribute("data-hf-group");
+  if (group) return `[data-hf-group="${escapeCssString(group)}"]`;
+  return getPreferredClassSelector(el);
+}
+function getPreferredClassSelector(el) {
+  const classes = Array.from(el.classList).map((value) => value.trim()).filter(Boolean);
+  if (classes.length === 0) return void 0;
+  const preferred = classes.find((value) => value !== "clip" && !value.startsWith("__hf-")) ?? classes[0];
+  return preferred ? `.${escapeCssIdentifier(preferred)}` : void 0;
+}
+function buildElementLabel(el) {
+  const compositionId = el.getAttribute("data-hf-original-composition-id") ?? el.getAttribute("data-composition-id");
+  if (compositionId && compositionId !== "main") {
+    return humanizeIdentifier(compositionId);
+  }
+  const compositionSrc = el.getAttribute("data-composition-src") ?? el.getAttribute("data-composition-file");
+  if (compositionSrc) {
+    return humanizeIdentifier(compositionSrc);
+  }
+  const group = el.getAttribute("data-hf-group");
+  if (group) return group;
+  if (el.id) return humanizeIdentifier(el.id);
+  const preferredClass = getPreferredClassSelector(el);
+  if (preferredClass) {
+    return humanizeIdentifier(preferredClass.replace(/^\./, ""));
+  }
+  const text = (el.textContent ?? "").trim().replace(/\s+/g, " ");
+  if (text) return text.length > 40 ? `${text.slice(0, 39)}\u2026` : text;
+  return el.tagName.toLowerCase();
+}
+function getSelectorIndex(doc, el, selector, sourceFile, activeCompositionPath) {
+  if (!selector?.startsWith(".")) return void 0;
+  return getSourceScopedSelectorIndex(
+    doc,
+    el,
+    selector,
+    sourceFile,
+    (candidate) => isHtmlElement(candidate) ? getSourceFileForElement(candidate, activeCompositionPath).sourceFile : void 0
+  );
+}
+
+// src/player/lib/timelineText.ts
+import { isHtmlElement as isHtmlElement2 } from "@hyperframes/core/runtime/dom-realm";
+
+// src/utils/rounding.ts
+function roundTo3(val) {
+  return Math.round(val * 1e3) / 1e3;
+}
+function roundToLayoutPx(val) {
+  return Math.round(val);
+}
+function roundToCenti(val) {
+  return Math.round(val * 100) / 100;
+}
+
+// src/components/editor/colorValue.ts
+function clampChannel(value) {
+  return Math.max(0, Math.min(255, Math.round(value)));
+}
+function clampAlpha(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function toHex(value) {
+  return clampChannel(value).toString(16).padStart(2, "0");
+}
+function formatAlpha(value) {
+  return `${roundToCenti(clampAlpha(value))}`;
+}
+function parseComponent(value, scale) {
+  return value.endsWith("%") ? Number(value.slice(0, -1)) * scale / 100 : Number(value);
+}
+var NUMBER = String.raw`(?:\d+(?:\.\d+)?|\.\d+)`;
+var COMMA_RGB = new RegExp(
+  String.raw`^rgba?\(\s*(${NUMBER})\s*,\s*(${NUMBER})\s*,\s*(${NUMBER})(?:\s*,\s*(${NUMBER}))?\s*\)$`
+);
+var SPACE_RGB = new RegExp(
+  String.raw`^rgba?\(\s*(${NUMBER}%?)\s+(${NUMBER}%?)\s+(${NUMBER}%?)(?:\s*\/\s*(${NUMBER}%?))?\s*\)$`
+);
+function parseSerializedColor(value) {
+  const trimmed = value.trim().toLowerCase();
+  if (!trimmed) return null;
+  if (trimmed === "transparent") {
+    return { red: 0, green: 0, blue: 0, alpha: 0 };
+  }
+  const hex = trimmed.match(/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/);
+  if (hex) {
+    const digits = hex[1].length <= 4 ? [...hex[1]].map((digit) => digit + digit).join("") : hex[1];
+    return {
+      red: Number.parseInt(digits.slice(0, 2), 16),
+      green: Number.parseInt(digits.slice(2, 4), 16),
+      blue: Number.parseInt(digits.slice(4, 6), 16),
+      alpha: digits.length === 8 ? Number.parseInt(digits.slice(6, 8), 16) / 255 : 1
+    };
+  }
+  const rgba = trimmed.match(COMMA_RGB) ?? trimmed.match(SPACE_RGB);
+  if (rgba) {
+    return {
+      red: clampChannel(parseComponent(rgba[1], 255)),
+      green: clampChannel(parseComponent(rgba[2], 255)),
+      blue: clampChannel(parseComponent(rgba[3], 255)),
+      alpha: clampAlpha(rgba[4] != null ? parseComponent(rgba[4], 1) : 1)
+    };
+  }
+  return null;
+}
+var colorContext = null;
+function canResolveInBrowser(value) {
+  return typeof document !== "undefined" && typeof CSS !== "undefined" && CSS.supports("color", value) && !/\bcurrentcolor\b|\bvar\s*\(|\blight-dark\s*\(/i.test(value);
+}
+function parseBrowserColor(value) {
+  try {
+    if (!canResolveInBrowser(value)) return null;
+    colorContext ??= document.createElement("canvas").getContext("2d");
+    if (!colorContext) return null;
+    return parseCanvasColor(
+      colorContext,
+      `color(from ${value} srgb r g b / alpha)`,
+      parseSrgbSerialization
+    ) ?? parseCanvasColor(colorContext, value, parseSerializedColor);
+  } catch {
+    return null;
+  }
+}
+function parseCanvasColor(context, value, parse) {
+  const serialized = readCanvasColor(context, value);
+  return serialized === null ? null : parse(serialized);
+}
+function readCanvasColor(context, value) {
+  context.fillStyle = "transparent";
+  context.fillStyle = value;
+  const first = context.fillStyle;
+  context.fillStyle = "white";
+  context.fillStyle = value;
+  return typeof first === "string" && first === context.fillStyle ? first : null;
+}
+function parseSrgbSerialization(serialized) {
+  const match = serialized.match(/^color\(srgb ([^ ]+) ([^ ]+) ([^ /)]+)(?: \/ ([^)]+))?\)$/);
+  if (!match) return null;
+  const channels = match.slice(1, 4).map(Number);
+  const alpha = match[4] === void 0 ? 1 : Number(match[4]);
+  if (!channels.every(Number.isFinite) || !Number.isFinite(alpha)) return null;
+  return {
+    red: clampChannel(channels[0] * 255),
+    green: clampChannel(channels[1] * 255),
+    blue: clampChannel(channels[2] * 255),
+    alpha: clampAlpha(alpha)
+  };
+}
+function parseCssColor(value) {
+  return parseSerializedColor(value) ?? parseBrowserColor(value.trim());
+}
+function resolvePickerColor(value, element, fallback) {
+  const view = element?.ownerDocument.defaultView;
+  const parsed = (value ? parseCssColor(value) : null) ?? (element && view ? parseCssColor(view.getComputedStyle(element).color) : null);
+  return parsed ? toHexColor(parsed) : fallback;
+}
+function toHexColor(color) {
+  return `#${toHex(color.red)}${toHex(color.green)}${toHex(color.blue)}`;
+}
+function formatCssColor(color) {
+  const red = clampChannel(color.red);
+  const green = clampChannel(color.green);
+  const blue = clampChannel(color.blue);
+  const alpha = clampAlpha(color.alpha);
+  if (alpha >= 1) {
+    return `rgb(${red}, ${green}, ${blue})`;
+  }
+  return `rgba(${red}, ${green}, ${blue}, ${formatAlpha(alpha)})`;
+}
+function rgbToHsv(color) {
+  const red = clampChannel(color.red) / 255;
+  const green = clampChannel(color.green) / 255;
+  const blue = clampChannel(color.blue) / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  let hue = 0;
+  if (delta !== 0) {
+    if (max === red) {
+      hue = 60 * ((green - blue) / delta % 6);
+    } else if (max === green) {
+      hue = 60 * ((blue - red) / delta + 2);
+    } else {
+      hue = 60 * ((red - green) / delta + 4);
+    }
+  }
+  if (hue < 0) hue += 360;
+  return {
+    hue,
+    saturation: max === 0 ? 0 : delta / max,
+    value: max
+  };
+}
+function hsvToRgb(color) {
+  const hue = (color.hue % 360 + 360) % 360 / 60;
+  const saturation = Math.max(0, Math.min(1, color.saturation));
+  const value = Math.max(0, Math.min(1, color.value));
+  const chroma = value * saturation;
+  const x = chroma * (1 - Math.abs(hue % 2 - 1));
+  const m = value - chroma;
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (hue >= 0 && hue < 1) {
+    red = chroma;
+    green = x;
+  } else if (hue >= 1 && hue < 2) {
+    red = x;
+    green = chroma;
+  } else if (hue >= 2 && hue < 3) {
+    green = chroma;
+    blue = x;
+  } else if (hue >= 3 && hue < 4) {
+    green = x;
+    blue = chroma;
+  } else if (hue >= 4 && hue < 5) {
+    red = x;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = x;
+  }
+  return {
+    red: clampChannel((red + m) * 255),
+    green: clampChannel((green + m) * 255),
+    blue: clampChannel((blue + m) * 255)
+  };
+}
+
+// src/player/lib/timelineText.ts
+function readTimelineText(el) {
+  if (!isHtmlElement2(el) || !isTextBearingTag(el.localName)) return void 0;
+  const children = Array.from(el.children);
+  if (!children.every((child) => isHtmlElement2(child) && isEditableTextLeaf(child)))
+    return void 0;
+  const value = el.textContent?.replace(/\s+/g, " ").trim();
+  if (!value) return void 0;
+  const style = getCuratedComputedStyles(el);
+  if ((style["background-image"] ?? "none") !== "none") return void 0;
+  const background = style["background-color"];
+  return {
+    value,
+    fontFamily: style["font-family"],
+    fontWeight: style["font-weight"],
+    color: style.color,
+    background: background && parseCssColor(background)?.alpha === 1 ? background : void 0
+  };
+}
+function sameTimelineText(a, b) {
+  if (!a || !b) return a === b;
+  return a.value === b.value && a.fontFamily === b.fontFamily && a.fontWeight === b.fontWeight && a.color === b.color && a.background === b.background;
+}
+
+// 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 { isHtmlElement as isHtmlElement3, isImageElement, isMediaElement } from "@hyperframes/core/runtime/dom-realm";
+
+// src/player/lib/storedVolume.ts
+function parseStoredVolume(text) {
+  const volume = Number.parseFloat(text ?? "");
+  return Number.isFinite(volume) ? volume : void 0;
+}
+var elementVolume = (el, media) => parseStoredVolume(el.getAttribute("data-volume") ?? media.getAttribute("data-volume"));
+
+// src/player/lib/timelineElementHelpers.ts
+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 isCompositionHost(el) {
+  return el.hasAttribute("data-composition-id") || el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
+}
+function resolveMediaElement(el) {
+  if (isMediaElement(el) || isImageElement(el)) return el;
+  if (isCompositionHost(el)) return null;
+  const candidate = el.querySelector("video, audio, img");
+  return isMediaElement(candidate) || isImageElement(candidate) ? 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 isVideoAudible(opts) {
+  if (opts.hasAudioAttr === "true") return true;
+  if (opts.hasAudioAttr === "false" || opts.hasAudioAttr === "") return false;
+  return opts.tag.toLowerCase() === "video" && !opts.muted;
+}
+function isAudibleVideoNode(el) {
+  if (el.tagName.toLowerCase() !== "video" || el.hasAttribute("muted")) return false;
+  return isVideoAudible({
+    tag: "video",
+    hasAudioAttr: el.getAttribute("data-has-audio"),
+    muted: false
+  });
+}
+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", elementVolume(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) {
+  setOptional(entry, "text", readTimelineText(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;
+  if (!isMediaElement(mediaEl)) 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 (isHtmlElement3(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 (isHtmlElement3(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/utils/projectRouting.ts
+var PROJECT_HASH_PREFIX = "#project/";
+var WINDOWS_DRIVE_PREFIX = /^[a-z]:/i;
+function isValidProjectId(value) {
+  return value.length > 0 && value !== "." && value !== ".." && !WINDOWS_DRIVE_PREFIX.test(value) && !value.includes("/") && !value.includes("\\") && !Array.from(value).some((char) => char.charCodeAt(0) < 32);
+}
+function decodeHashProjectId(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function normalizeHashParams(params) {
+  if (!params) return new URLSearchParams();
+  if (params instanceof URLSearchParams) return params;
+  const next = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (!key || value == null || value === "") continue;
+    next.set(key, value);
+  }
+  return next;
+}
+function encodeProjectId(projectId) {
+  if (!isValidProjectId(projectId)) throw new Error("Invalid project ID");
+  return encodeURIComponent(projectId);
+}
+function buildProjectHash(projectId, params) {
+  const search = normalizeHashParams(params).toString();
+  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}${search ? `?${search}` : ""}`;
+}
+function parseProjectHashRoute(hash) {
+  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;
+  const route = hash.slice(PROJECT_HASH_PREFIX.length);
+  const queryIndex = route.indexOf("?");
+  const encodedProjectId = queryIndex >= 0 ? route.slice(0, queryIndex) : route;
+  if (!encodedProjectId || encodedProjectId.includes("/")) return null;
+  const projectId = decodeHashProjectId(encodedProjectId);
+  if (!isValidProjectId(projectId)) return null;
+  const rawParams = queryIndex >= 0 ? route.slice(queryIndex + 1) : "";
+  return {
+    projectId,
+    params: new URLSearchParams(rawParams)
+  };
+}
+function parseProjectIdFromHash(hash) {
+  return parseProjectHashRoute(hash)?.projectId ?? null;
+}
+function buildProjectApiPath(projectId, suffix = "") {
+  const normalizedSuffix = suffix && !suffix.startsWith("/") ? `/${suffix}` : suffix;
+  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;
+}
+
+export {
+  buildProjectHash,
+  parseProjectHashRoute,
+  parseProjectIdFromHash,
+  buildProjectApiPath,
+  roundTo3,
+  roundToLayoutPx,
+  roundToCenti,
+  parseCssColor,
+  resolvePickerColor,
+  toHexColor,
+  formatCssColor,
+  rgbToHsv,
+  hsvToRgb,
+  withSelectorIndexPass,
+  isHtmlElement,
+  isEditableTextLeaf,
+  isElementVisibleThroughAncestors,
+  getCuratedComputedStyles,
+  getInlineStyles,
+  getDataAttributes,
+  findClosestByAttribute,
+  setCompositionSourceMap,
+  getCompositionSourceMapRevision,
+  getSourceFileForElement,
+  normalizeTimelineCompositionSource,
+  escapeCssString,
+  querySelectorAllSafely,
+  buildStableSelector,
+  buildElementLabel,
+  getSelectorIndex,
+  parsePx,
+  readTimelineText,
+  sameTimelineText,
+  getAdapterDuration,
+  getDefaultStaticSeekPlaybackClock,
+  releaseStaticSeekCache,
+  resolveStaticSeekFallback,
+  wrapTimeline,
+  parseStoredVolume,
+  elementVolume,
+  LAYER_REVEAL_PRIOR_Z_ATTR,
+  LAYER_REVEAL_PRIOR_POSITION_ATTR,
+  readLayerRevealPriorZ,
+  readTimelineElementZIndex,
+  isTimelineIgnoredElement,
+  furthestClipEndFromDocument,
+  readTimelineDurationFromDocument,
+  furthestClipEndFromSource,
+  resolveMediaElement,
+  readPlaybackStartAttributes,
+  playbackStartAttributeForElement,
+  isVideoAudible,
+  isAudibleVideoNode,
+  applyMediaMetadataFromElement,
+  getTimelineElementDisplayLabel,
+  getTimelineElementSelector,
+  getTimelineElementSourceFile,
+  getTimelineElementSelectorIndex,
+  buildTimelineElementKey,
+  splitTimelineElementKey,
+  buildTimelineElementIdentity,
+  getTimelineElementIdentity,
+  runtimeAudioId,
+  deriveTimelineStoreKey,
+  deriveTimelineStoreKeyForDomId,
+  previewElementFinder,
+  findClipElementById,
+  createTimelineDomNodeResolver
+};
+//# sourceMappingURL=chunk-TDWGXBUT.js.map