@hyperframes/studio 0.7.100 → 0.7.102

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 (16) hide show
  1. package/dist/assets/{hyperframes-player-D0x4bQn-.js → hyperframes-player-BTnkvhf3.js} +2 -2
  2. package/dist/assets/{index-F8iVj3EF.js → index-B4MocVKM.js} +1 -1
  3. package/dist/assets/{index-Cy1eXOyE.js → index-CnrSn9Ua.js} +1 -1
  4. package/dist/assets/{index-CVAZ9AJE.js → index-DN614u1l.js} +117 -117
  5. package/dist/index.html +1 -1
  6. package/dist/index.js +33 -15
  7. package/dist/index.js.map +1 -1
  8. package/package.json +7 -7
  9. package/src/components/sidebar/LeftSidebar.storage.test.ts +28 -0
  10. package/src/components/sidebar/LeftSidebar.tsx +18 -3
  11. package/src/hooks/gsapKeyframeCacheHelpers.test.ts +47 -1
  12. package/src/hooks/gsapKeyframeCacheHelpers.ts +31 -3
  13. package/src/hooks/useGsapTweenCache.ts +16 -19
  14. package/src/player/components/Player.test.ts +13 -0
  15. package/src/player/components/Player.tsx +7 -1
  16. package/src/utils/clipboard.ts +1 -1
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-CVAZ9AJE.js"></script>
8
+ <script type="module" crossorigin src="/assets/index-DN614u1l.js"></script>
9
9
  <link rel="stylesheet" crossorigin href="/assets/index-tBPidglp.css">
10
10
  </head>
11
11
  <body>
package/dist/index.js CHANGED
@@ -621,7 +621,7 @@ var Player = forwardRef2(
621
621
  player.removeEventListener("error", handleError);
622
622
  if (assetPollRef.current) clearInterval(assetPollRef.current);
623
623
  assetPollRef.current = null;
624
- container.removeChild(player);
624
+ player.remove();
625
625
  if (retryPreviewRef.current === retryPreview) retryPreviewRef.current = null;
626
626
  if (typeof ref === "function") {
627
627
  } else if (ref) {
@@ -15465,7 +15465,7 @@ function copyWithSelection(text) {
15465
15465
  } catch {
15466
15466
  return false;
15467
15467
  } finally {
15468
- document.body.removeChild(textarea);
15468
+ textarea.remove();
15469
15469
  }
15470
15470
  }
15471
15471
  function shouldCopyWithSelectionFirst() {
@@ -28751,7 +28751,19 @@ function scopedElementKey(element) {
28751
28751
  return `${element.sourceFile || "index.html"}#${element.id}`;
28752
28752
  }
28753
28753
  function elementCacheKeys(sourceFile, elementId2) {
28754
- return sourceFile === "index.html" ? [`index.html#${elementId2}`, elementId2] : [`${sourceFile}#${elementId2}`, `index.html#${elementId2}`, elementId2];
28754
+ const id = typeof elementId2 === "string" ? elementId2 : coerceCacheKeyId(elementId2, sourceFile);
28755
+ return sourceFile === "index.html" ? [`index.html#${id}`, id] : [`${sourceFile}#${id}`, `index.html#${id}`, id];
28756
+ }
28757
+ function coerceCacheKeyId(elementId2, sourceFile) {
28758
+ trackStudioEvent("cache_key_non_string", {
28759
+ value_type: typeof elementId2,
28760
+ // An Element lands here as "HTMLDivElement", a boxed id as "Number" — enough
28761
+ // to name the producer without shipping user content to telemetry.
28762
+ constructor_name: elementId2?.constructor?.name ?? null,
28763
+ is_array: Array.isArray(elementId2),
28764
+ source_file: sourceFile
28765
+ });
28766
+ return String(elementId2);
28755
28767
  }
28756
28768
  function replaceKeyframeCacheForFile(sourceFile, entries, animationsByElement) {
28757
28769
  publishKeyframeCache((draft) => {
@@ -33507,7 +33519,9 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
33507
33519
  }
33508
33520
  if (allKeyframes.length === 0) {
33509
33521
  const { keyframeCache } = usePlayerStore.getState();
33510
- const hasCached = keyframeCache.has(`${sourceFile}#${elementId2}`) || keyframeCache.has(elementId2);
33522
+ const hasCached = elementCacheKeys(sourceFile, elementId2).some(
33523
+ (key2) => keyframeCache.has(key2)
33524
+ );
33511
33525
  if (!hasCached) clearKeyframeCacheForElement(sourceFile, elementId2);
33512
33526
  return;
33513
33527
  }
@@ -33519,8 +33533,9 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
33519
33533
  ...easeEach ? { easeEach } : {}
33520
33534
  };
33521
33535
  publishKeyframeCache((draft) => {
33522
- draft.keyframeCache.set(`${sourceFile}#${elementId2}`, merged);
33523
- draft.keyframeCache.set(elementId2, merged);
33536
+ for (const key2 of elementCacheKeys(sourceFile, elementId2)) {
33537
+ draft.keyframeCache.set(key2, merged);
33538
+ }
33524
33539
  });
33525
33540
  }, [elementId2, sourceFile, animations, domClipChildrenKey]);
33526
33541
  return { animations, multipleTimelines, unsupportedTimelinePattern };
@@ -33574,10 +33589,8 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
33574
33589
  if (scanned.size === 0) return false;
33575
33590
  publishKeyframeCache((draft) => {
33576
33591
  for (const [id, data] of scanned) {
33577
- const cacheKey = `${sf}#${id}`;
33578
- const fallbackKey = `index.html#${id}`;
33579
- const alreadyCached = draft.keyframeCache.has(cacheKey) || draft.keyframeCache.has(fallbackKey) || draft.keyframeCache.has(id);
33580
- if (alreadyCached) continue;
33592
+ const keys = elementCacheKeys(sf, id);
33593
+ if (keys.some((key2) => draft.keyframeCache.has(key2))) continue;
33581
33594
  const isPosOnly = data.keyframes.length === 1 && Object.keys(data.keyframes[0].properties).every((k) => k === "x" || k === "y");
33582
33595
  if (isPosOnly) {
33583
33596
  continue;
@@ -33587,9 +33600,7 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
33587
33600
  keyframes: data.keyframes,
33588
33601
  ...data.easeEach ? { easeEach: data.easeEach } : {}
33589
33602
  };
33590
- draft.keyframeCache.set(cacheKey, entry);
33591
- if (sf !== "index.html") draft.keyframeCache.set(fallbackKey, entry);
33592
- draft.keyframeCache.set(id, entry);
33603
+ for (const key2 of keys) draft.keyframeCache.set(key2, entry);
33593
33604
  }
33594
33605
  });
33595
33606
  runtimeScanDoneRef.current = `kf-cache:${projectId}:${sf}:${version}`;
@@ -67604,7 +67615,11 @@ function PromptPreviewModal({
67604
67615
  import { Fragment as Fragment47, jsx as jsx152, jsxs as jsxs127 } from "react/jsx-runtime";
67605
67616
  var STORAGE_KEY = "hf-studio-sidebar-tab";
67606
67617
  function getPersistedTab() {
67607
- const stored = localStorage.getItem(STORAGE_KEY);
67618
+ let stored = null;
67619
+ try {
67620
+ stored = safeLocalStorage()?.getItem(STORAGE_KEY) ?? null;
67621
+ } catch {
67622
+ }
67608
67623
  if (stored === "assets") return "assets";
67609
67624
  if (stored === "code") return "code";
67610
67625
  if (stored === "blocks") return "blocks";
@@ -67647,7 +67662,10 @@ var LeftSidebar = memo40(
67647
67662
  tabRef.current = tab;
67648
67663
  const selectTab = useCallback127((t) => {
67649
67664
  setTab(t);
67650
- localStorage.setItem(STORAGE_KEY, t);
67665
+ try {
67666
+ safeLocalStorage()?.setItem(STORAGE_KEY, t);
67667
+ } catch {
67668
+ }
67651
67669
  trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
67652
67670
  }, []);
67653
67671
  const getTab = useCallback127(() => tabRef.current, []);