@hyperframes/studio 0.8.30 → 0.8.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/assets/{hyperframes-player-jDyYPwpC.js → hyperframes-player-CroojEG1.js} +5 -1
  2. package/dist/assets/{index-DRWtJgb8.js → index-CSyaU1m2.js} +1 -1
  3. package/dist/assets/{index-BLvqFdnB.js → index-D0AjUHNT.js} +1 -1
  4. package/dist/assets/{index-hQAWl6re.js → index-PVOehm7h.js} +113 -113
  5. package/dist/index.html +1 -1
  6. package/dist/index.js +26 -11
  7. package/dist/index.js.map +1 -1
  8. package/package.json +7 -7
  9. package/src/player/components/timelineAuthoredMoveTarget.ts +1 -0
  10. package/src/player/components/timelineEditCapabilities.ts +7 -2
  11. package/src/player/components/timelineGroupEditing.ts +1 -0
  12. package/src/player/hooks/timelineDomBinding.test.ts +122 -0
  13. package/src/player/hooks/timelineSyncHydration.ts +4 -7
  14. package/src/player/lib/timelineElementHelpers.ts +24 -5
package/dist/index.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
6
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7
7
  <title>HyperFrames Studio</title>
8
- <script type="module" crossorigin src="/assets/index-hQAWl6re.js"></script>
8
+ <script type="module" crossorigin src="/assets/index-PVOehm7h.js"></script>
9
9
  <link rel="stylesheet" crossorigin href="/assets/index-DnRfAiK2.css">
10
10
  </head>
11
11
  <body>
package/dist/index.js CHANGED
@@ -1193,24 +1193,38 @@ var MANIFEST_CLIP_ATTRS = [
1193
1193
  ["data-duration", (clip) => clip.duration],
1194
1194
  ["data-track-index", (clip) => clip.track]
1195
1195
  ];
1196
+ function nodeMatchesClipTag(node, clip) {
1197
+ return !clip.tagName || node.tagName.toLowerCase() === clip.tagName.toLowerCase();
1198
+ }
1196
1199
  function nodeMatchesManifestClip(node, clip) {
1197
- const tagName = clip.tagName?.toLowerCase();
1198
- if (tagName && node.tagName.toLowerCase() !== tagName) return false;
1200
+ if (!nodeMatchesClipTag(node, clip)) return false;
1199
1201
  return MANIFEST_CLIP_ATTRS.every(([attr, expected]) => {
1200
1202
  const actual = Number.parseFloat(node.getAttribute(attr) ?? "");
1201
1203
  return !Number.isFinite(actual) || numbersNearlyEqual(actual, expected(clip));
1202
1204
  });
1203
1205
  }
1204
1206
  function findTimelineDomNode(doc, id) {
1205
- return doc.getElementById(id) ?? doc.querySelector(`[data-composition-id="${CSS.escape(id)}"]`) ?? doc.querySelector(`.${CSS.escape(id)}`) ?? null;
1207
+ return doc.getElementById(id) ?? doc.querySelector(`[data-hf-id="${CSS.escape(id)}"]`) ?? doc.querySelector(`[data-composition-id="${CSS.escape(id)}"]`) ?? doc.querySelector(`.${CSS.escape(id)}`) ?? null;
1206
1208
  }
1207
- function findTimelineDomNodeForClip(doc, clip, fallbackIndex, usedNodes = /* @__PURE__ */ new Set()) {
1209
+ function findTimelineDomNodeForClip(doc, clip, fallbackIndex, usedNodes = /* @__PURE__ */ new Set(), getCandidates = () => getTimelineDomNodes(doc)) {
1208
1210
  const byIdentity = clip.id ? findTimelineDomNode(doc, clip.id) : null;
1209
- if (byIdentity && !usedNodes.has(byIdentity)) return byIdentity;
1210
- const candidates = getTimelineDomNodes(doc).filter((node) => !usedNodes.has(node));
1211
+ if (byIdentity && !usedNodes.has(byIdentity) && nodeMatchesClipTag(byIdentity, clip))
1212
+ return byIdentity;
1213
+ const candidates = getCandidates().filter((node) => !usedNodes.has(node));
1211
1214
  const exact = candidates.find((node) => nodeMatchesManifestClip(node, clip));
1212
1215
  if (exact) return exact;
1213
- return candidates[fallbackIndex] ?? null;
1216
+ const positional = candidates[fallbackIndex];
1217
+ return positional && nodeMatchesClipTag(positional, clip) ? positional : null;
1218
+ }
1219
+ function createTimelineDomNodeResolver(doc) {
1220
+ let candidates;
1221
+ const usedNodes = /* @__PURE__ */ new Set();
1222
+ const getCandidates = () => candidates ??= getTimelineDomNodes(doc);
1223
+ return (clip, index) => {
1224
+ const node = findTimelineDomNodeForClip(doc, clip, index, usedNodes, getCandidates);
1225
+ if (node) usedNodes.add(node);
1226
+ return node;
1227
+ };
1214
1228
  }
1215
1229
  function isImplicitTimelineLayerCandidate(root, el) {
1216
1230
  if (!isHtmlElement2(el)) return false;
@@ -5197,7 +5211,7 @@ function isDeterministicTimelineWindow(input) {
5197
5211
  return ["video", "audio", "img"].includes(input.tag.toLowerCase());
5198
5212
  }
5199
5213
  function hasPatchableTimelineTarget(input) {
5200
- return Boolean(input.domId || input.selector);
5214
+ return Boolean(input.domId || input.hfId || input.selector);
5201
5215
  }
5202
5216
  function getTimelineEditCapabilities(input) {
5203
5217
  if (input.timingSource === "implicit" || input.timelineLocked) {
@@ -5289,6 +5303,7 @@ function canTrimEdge(element, edge) {
5289
5303
  kind: element.kind,
5290
5304
  duration: element.duration,
5291
5305
  domId: element.domId,
5306
+ hfId: element.hfId,
5292
5307
  selector: element.selector,
5293
5308
  compositionSrc: element.compositionSrc,
5294
5309
  playbackStart: element.playbackStart,
@@ -19291,6 +19306,7 @@ function canMoveTimelineElement(element) {
19291
19306
  kind: element.kind,
19292
19307
  duration: element.duration,
19293
19308
  domId: element.domId,
19309
+ hfId: element.hfId,
19294
19310
  selector: element.selector,
19295
19311
  compositionSrc: element.compositionSrc,
19296
19312
  playbackStart: element.playbackStart,
@@ -24910,10 +24926,9 @@ function safeContentDocument(iframe) {
24910
24926
  }
24911
24927
  }
24912
24928
  function buildTimelineElementsFromClips(clips, iframeDoc) {
24913
- const usedHostEls = /* @__PURE__ */ new Set();
24929
+ const resolveHost = iframeDoc ? createTimelineDomNodeResolver(iframeDoc) : null;
24914
24930
  return clips.map((clip, index) => {
24915
- const hostEl = iframeDoc ? findTimelineDomNodeForClip(iframeDoc, clip, index, usedHostEls) : null;
24916
- if (hostEl) usedHostEls.add(hostEl);
24931
+ const hostEl = resolveHost?.(clip, index) ?? null;
24917
24932
  return createTimelineElementFromManifestClip({
24918
24933
  clip,
24919
24934
  fallbackIndex: index,