@hyperframes/studio 0.8.32 → 0.8.34

package/dist/assets/{index-CSyaU1m2.js → index-aNyQBoJv.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-PVOehm7h.js";/*!
+import{n as Qi}from"./index-CkxPQxLJ.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/assets/{index-D0AjUHNT.js → index-hch4ktcC.js}

@@ -1 +1 @@
-import{g as P}from"./index-PVOehm7h.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-CkxPQxLJ.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/{chunk-A7S5SGNA.js → chunk-7BP32G62.js}

@@ -1,3 +1,80 @@
+// src/utils/projectRouting.ts
+var PROJECT_HASH_PREFIX = "#project/";
+function isValidProjectId(value) {
+  return value.length > 0 && value !== "." && value !== ".." && !value.includes(":") && !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}`;
+}
+
+// src/components/editor/probeSourceElement.ts
+async function probeSourceElement(projectId, sourceFile, target) {
+  try {
+    const response = await fetch(
+      buildProjectApiPath(
+        projectId,
+        `/file-mutations/probe-element/${encodeURIComponent(sourceFile)}`
+      ),
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ target })
+      }
+    );
+    if (!response.ok) return true;
+    const data = await response.json();
+    if (data && typeof data === "object" && "exists" in data && data.exists === false) {
+      return false;
+    }
+    return true;
+  } catch {
+    return true;
+  }
+}
+
 // src/components/editor/domEditingLayers.ts
 import {
   resolveEditingAffordances,
@@ -8,17 +85,40 @@ import {
 import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-grading";
 
 // 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 scope = sourceFile ?? "index.html";
-    const matches = Array.from(doc.querySelectorAll(selector)).filter(
-      (candidate) => (resolveSourceFile(candidate) ?? "index.html") === scope
-    );
-    const matchIndex = matches.indexOf(el);
-    return matchIndex >= 0 ? matchIndex : void 0;
+    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;
   }
@@ -79,19 +179,31 @@ function isHtmlElement(value) {
 function isTextBearingTag(tagName) {
   return ["div", "span", "p", "strong", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tagName);
 }
-function isElementVisibleThroughAncestors(el) {
+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;
-  let current = el;
-  while (current) {
-    const computed = win.getComputedStyle(current);
-    if (computed.display === "none" || computed.visibility === "hidden") return false;
-    const opacity = Number.parseFloat(computed.opacity);
-    if (Number.isFinite(opacity) && opacity <= 0.01 && !current.hasAttribute(COLOR_GRADING_SOURCE_HIDDEN_ATTR))
-      return false;
-    current = current.parentElement;
+  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);
   }
-  return true;
+  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 = {};
@@ -132,8 +244,13 @@ function findClosestByAttribute(el, attributeNames) {
   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;
@@ -279,8 +396,8 @@ function resolveGroupCapture(startEl, activeGroupElement) {
 }
 
 // src/components/editor/domEditingElement.ts
-function isElementComputedVisible(el) {
-  return isElementVisibleThroughAncestors(el);
+function isElementComputedVisible(el, memo) {
+  return isElementVisibleThroughAncestors(el, memo);
 }
 var VISUAL_LEAF_TAGS = /* @__PURE__ */ new Set(["img", "video", "canvas", "svg", "audio"]);
 function hasVisualPresence(el) {
@@ -337,10 +454,12 @@ function isInspectableLayerElement(el) {
   if (computed?.display === "none" || computed?.visibility === "hidden") return false;
   return true;
 }
-function getDomLayerPatchTarget(el, activeCompositionPath) {
-  if (!isInspectableLayerElement(el)) return null;
-  if (el.hasAttribute("data-composition-id")) return null;
-  const selector = buildStableSelector(el);
+function resolveLayerSelector(el) {
+  if (el.hasAttribute("data-composition-id")) return void 0;
+  return buildStableSelector(el);
+}
+function resolveDomLayerIdentity(el, activeCompositionPath) {
+  const selector = resolveLayerSelector(el);
   if (!selector) return null;
   const { sourceFile } = getSourceFileForElement(el, activeCompositionPath);
   return {
@@ -357,6 +476,12 @@ function getDomLayerPatchTarget(el, activeCompositionPath) {
     sourceFile
   };
 }
+function getDomLayerPatchTarget(el, activeCompositionPath) {
+  return isInspectableLayerElement(el) ? resolveDomLayerIdentity(el, activeCompositionPath) : null;
+}
+function isDomLayerElement(el) {
+  return isInspectableLayerElement(el) && resolveLayerSelector(el) !== void 0;
+}
 function getPreferredClipAncestor(startEl) {
   let current = startEl;
   while (current) {
@@ -442,9 +567,9 @@ function findElementForTimelineElement(doc, element, options) {
   if (!isHtmlElement(root)) return null;
   return getSourceFileForElement(root, options.activeCompositionPath).sourceFile === sourceFile ? root : null;
 }
-function getDirectLayerChildren(el, options) {
+function getDirectLayerChildren(el) {
   return Array.from(el.children).filter(
-    (child) => isHtmlElement(child) && getDomLayerPatchTarget(child, options.activeCompositionPath) !== null
+    (child) => isHtmlElement(child) && isDomLayerElement(child)
   );
 }
 
@@ -488,6 +613,131 @@ function isCompositionRootLayer(element, doc, computedStyles) {
   );
 }
 
+// src/components/editor/domEditLayerWalkCache.ts
+var SELECTOR_IDENTITY_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "id",
+  "class",
+  "data-hf-group",
+  "data-composition-id",
+  "data-composition-file",
+  "data-composition-src",
+  "data-hf-original-composition-id"
+]);
+var DOM_EDIT_LAYER_OBSERVER_INIT = {
+  attributes: true,
+  characterData: true,
+  childList: true,
+  subtree: true
+};
+var lastInlineVisibility = /* @__PURE__ */ new WeakMap();
+function inlineVisibilityChanged(el) {
+  const next = el.style.visibility;
+  if (lastInlineVisibility.get(el) === next) return false;
+  lastInlineVisibility.set(el, next);
+  return true;
+}
+function createDomEditLayerWalkCache() {
+  let presence = /* @__PURE__ */ new WeakMap();
+  let identities = /* @__PURE__ */ new WeakMap();
+  let scope = null;
+  const invalidateAll = () => {
+    presence = /* @__PURE__ */ new WeakMap();
+    identities = /* @__PURE__ */ new WeakMap();
+  };
+  const drop = (el) => {
+    if (el) presence.delete(el);
+  };
+  const dropSubtree = (el) => {
+    for (const descendant of el.querySelectorAll("*")) {
+      if (isHtmlElement(descendant)) presence.delete(descendant);
+    }
+  };
+  const ingestOne = (record) => {
+    if (record.type === "childList") return false;
+    if (record.type === "characterData") {
+      for (let ancestor = record.target.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        identities.delete(ancestor);
+      }
+      return true;
+    }
+    const target = record.target;
+    if (!isHtmlElement(target)) return true;
+    if (record.attributeName && SELECTOR_IDENTITY_ATTRIBUTES.has(record.attributeName))
+      return false;
+    drop(target);
+    drop(target.parentElement);
+    if (record.attributeName === "style" && inlineVisibilityChanged(target)) dropSubtree(target);
+    return true;
+  };
+  return {
+    beginWalk(activeCompositionPath) {
+      const nextScope = `${activeCompositionPath ?? ""}|${getCompositionSourceMapRevision()}`;
+      if (nextScope === scope) return;
+      scope = nextScope;
+      invalidateAll();
+    },
+    readInspectable(el, compute) {
+      const memo = presence.get(el) ?? {};
+      if (memo.inspectable === void 0) {
+        memo.inspectable = compute();
+        presence.set(el, memo);
+      }
+      return memo.inspectable;
+    },
+    readChildCount(el, compute) {
+      const memo = presence.get(el) ?? {};
+      if (memo.childCount === void 0) {
+        memo.childCount = compute();
+        presence.set(el, memo);
+      }
+      return memo.childCount;
+    },
+    readIdentity(el, compute) {
+      const memo = identities.get(el) ?? {};
+      if (memo.identity === void 0) {
+        memo.identity = compute();
+        identities.set(el, memo);
+      }
+      return memo.identity;
+    },
+    readLabel(el, compute) {
+      const memo = identities.get(el) ?? {};
+      if (memo.label === void 0) {
+        memo.label = compute();
+        identities.set(el, memo);
+      }
+      return memo.label;
+    },
+    ingest(records) {
+      for (const record of records) {
+        if (!ingestOne(record)) {
+          invalidateAll();
+          return;
+        }
+      }
+    },
+    invalidateAll
+  };
+}
+function readDomEditLayerWalkEntry(el, activeCompositionPath, cache) {
+  const inspectable = cache ? cache.readInspectable(el, () => isInspectableLayerElement(el)) : isInspectableLayerElement(el);
+  if (!inspectable) return null;
+  const identity = () => resolveDomLayerIdentity(el, activeCompositionPath);
+  const target = cache ? cache.readIdentity(el, identity) : identity();
+  if (!target) return null;
+  const label = () => buildElementLabel(el);
+  const childCount = () => getDirectLayerChildren(el).length;
+  return {
+    target,
+    label: cache ? cache.readLabel(el, label) : label(),
+    childCount: cache ? cache.readChildCount(el, childCount) : childCount()
+  };
+}
+function drainPendingLayerMutations(observer, cache) {
+  if (!observer) return;
+  cache.ingest(observer.takeRecords());
+}
+
 // src/components/editor/domEditingLayers.ts
 function isEditableTextLeaf(el) {
   return isTextBearingTag(el.tagName.toLowerCase()) && el.children.length === 0;
@@ -652,26 +902,6 @@ function resolveDomEditCapabilities(args) {
     })
   ).capabilities;
 }
-async function probeSourceElement(projectId, sourceFile, target) {
-  try {
-    const response = await fetch(
-      `/api/projects/${projectId}/file-mutations/probe-element/${encodeURIComponent(sourceFile)}`,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ target })
-      }
-    );
-    if (!response.ok) return true;
-    const data = await response.json();
-    if (data && typeof data === "object" && "exists" in data && data.exists === false) {
-      return false;
-    }
-    return true;
-  } catch {
-    return true;
-  }
-}
 async function resolveDomEditSelection(startEl, options) {
   if (!startEl) return null;
   const doc = startEl.ownerDocument;
@@ -768,7 +998,7 @@ function countDomEditChildLayers(root, options, maxCount = 99) {
   const visit = (el) => {
     for (const child of Array.from(el.children)) {
       if (!isHtmlElement(child)) continue;
-      if (getDomLayerPatchTarget(child, options.activeCompositionPath)) {
+      if (isDomLayerElement(child)) {
         count += 1;
         if (count >= maxCount) return;
       }
@@ -779,20 +1009,22 @@ function countDomEditChildLayers(root, options, maxCount = 99) {
   visit(root);
   return count;
 }
-function collectDomEditLayerItems(root, options, maxItems = Number.POSITIVE_INFINITY) {
+function collectDomEditLayerItems(root, options, maxItems = Number.POSITIVE_INFINITY, cache) {
   if (!root) return [];
+  cache?.beginWalk(options.activeCompositionPath);
   const items = [];
   const visit = (el, depth) => {
     if (items.length >= maxItems) return;
-    const target = getDomLayerPatchTarget(el, options.activeCompositionPath);
-    if (target) {
+    const entry = readDomEditLayerWalkEntry(el, options.activeCompositionPath, cache);
+    if (entry) {
+      const { target } = entry;
       items.push({
         key: getDomEditLayerKey(target),
         element: el,
-        label: buildElementLabel(el),
+        label: entry.label,
         tagName: el.tagName.toLowerCase(),
         depth,
-        childCount: getDirectLayerChildren(el, options).length,
+        childCount: entry.childCount,
         id: target.id ?? void 0,
         hfId: target.hfId ?? void 0,
         selector: target.selector ?? void 0,
@@ -800,14 +1032,16 @@ function collectDomEditLayerItems(root, options, maxItems = Number.POSITIVE_INFI
         sourceFile: target.sourceFile
       });
     }
-    const nextDepth = target ? depth + 1 : depth;
+    const nextDepth = entry ? depth + 1 : depth;
     for (const child of Array.from(el.children)) {
       if (!isHtmlElement(child)) continue;
       visit(child, nextDepth);
       if (items.length >= maxItems) return;
     }
   };
-  for (const el of groupScopedLayerRoots(root, options.activeGroupElement ?? null)) visit(el, 0);
+  withSelectorIndexPass(root.ownerDocument, () => {
+    for (const el of groupScopedLayerRoots(root, options.activeGroupElement ?? null)) visit(el, 0);
+  });
   return items;
 }
 function buildDomEditStylePatchOperation(property, value, childLocator) {
@@ -864,6 +1098,10 @@ function buildDomEditPatchTarget(selection) {
 }
 
 export {
+  buildProjectHash,
+  parseProjectHashRoute,
+  parseProjectIdFromHash,
+  buildProjectApiPath,
   getSourceScopedSelectorIndex,
   isHtmlElement,
   isElementVisibleThroughAncestors,
@@ -876,6 +1114,9 @@ export {
   resolveAllVisualDomEditTargets,
   findElementForSelection,
   findElementForTimelineElement,
+  DOM_EDIT_LAYER_OBSERVER_INIT,
+  createDomEditLayerWalkCache,
+  drainPendingLayerMutations,
   isEditableTextLeaf,
   collectDomEditTextFields,
   serializeDomEditTextFields,
@@ -897,4 +1138,4 @@ export {
   readHfId,
   buildDomEditPatchTarget
 };
-//# sourceMappingURL=chunk-A7S5SGNA.js.map
+//# sourceMappingURL=chunk-7BP32G62.js.map