@hyperframes/studio 0.8.75 → 0.8.77

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 (130) hide show
  1. package/dist/assets/hyperframes-player-BSDTJ9EF.js +464 -0
  2. package/dist/assets/{index-BlUYw1MB.js → index-2GgHjQq-.js} +163 -163
  3. package/dist/assets/{index-0w6iIlwZ.css → index-BWJqxeaH.css} +1 -1
  4. package/dist/assets/{index-BiFKcNjs.js → index-CsFCRdMo.js} +1 -1
  5. package/dist/assets/{index-HjexPsny.js → index-DcxWQ7Za.js} +1 -1
  6. package/dist/{chunk-7BP32G62.js → chunk-5VANA2TG.js} +12 -1
  7. package/dist/chunk-5VANA2TG.js.map +1 -0
  8. package/dist/{domEditingLayers-UKMVYXT6.js → domEditingLayers-IGPLTI5E.js} +4 -2
  9. package/dist/index.d.ts +34 -69
  10. package/dist/index.html +2 -2
  11. package/dist/index.js +5287 -5277
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +1 -1
  14. package/package.json +7 -7
  15. package/src/components/StudioRightPanels.types.ts +0 -2
  16. package/src/components/editor/DomEditOverlay.test.ts +5 -0
  17. package/src/components/editor/LayersPanel.tsx +3 -14
  18. package/src/components/editor/PreviewOverlayProvider.test.tsx +6 -1
  19. package/src/components/editor/domEditing.ts +1 -0
  20. package/src/components/editor/domEditingElement.ts +13 -0
  21. package/src/components/editor/domEditingLayers.test.ts +27 -0
  22. package/src/components/editor/domEditingLayers.ts +9 -0
  23. package/src/components/editor/gsapLivePreview.test.ts +63 -0
  24. package/src/components/editor/gsapLivePreview.ts +2 -14
  25. package/src/components/editor/offCanvasIndicatorRefresh.test.tsx +57 -35
  26. package/src/components/editor/overlayFrameLoop.test.ts +16 -0
  27. package/src/components/editor/overlayFrameLoop.ts +11 -0
  28. package/src/components/editor/propertyPanelHelpers.ts +4 -6
  29. package/src/components/editor/usePreviewCompositionRect.test.tsx +6 -1
  30. package/src/components/nle/NLEPreview.test.ts +202 -22
  31. package/src/components/nle/NLEPreview.tsx +65 -46
  32. package/src/components/nle/PreviewPoster.tsx +99 -0
  33. package/src/components/nle/PreviewZoomOverlay.tsx +111 -0
  34. package/src/components/nle/previewZoom.test.ts +42 -0
  35. package/src/components/nle/previewZoom.ts +33 -0
  36. package/src/components/nle/useCanvasZOrderTimelineMirror.test.tsx +30 -49
  37. package/src/components/panels/VariablesPanel.tsx +0 -2
  38. package/src/components/sidebar/CompositionsTab.drag.test.tsx +5 -1
  39. package/src/components/sidebar/CompositionsTab.rootBadge.test.tsx +14 -0
  40. package/src/components/sidebar/CompositionsTab.test.ts +4 -6
  41. package/src/components/sidebar/CompositionsTab.tsx +28 -21
  42. package/src/components/studioColorGradingScope.ts +0 -3
  43. package/src/hooks/domEditDeleteMembers.ts +0 -2
  44. package/src/hooks/gsapScriptCommitTypes.ts +0 -2
  45. package/src/hooks/keyframeCacheAstLoad.test.ts +31 -1
  46. package/src/hooks/keyframeCacheAstLoad.ts +2 -1
  47. package/src/hooks/timelineAudioGroupCreate.ts +0 -1
  48. package/src/hooks/timelineEditingHelpers.ts +0 -3
  49. package/src/hooks/timelineTimingSync.ts +0 -1
  50. package/src/hooks/timelineTrackVisibility.ts +0 -1
  51. package/src/hooks/useBlockHandlers.ts +0 -2
  52. package/src/hooks/useClipboard.test.ts +69 -10
  53. package/src/hooks/useClipboard.ts +28 -19
  54. package/src/hooks/useDomEditCommits.test.tsx +0 -1
  55. package/src/hooks/useDomEditCommits.ts +0 -4
  56. package/src/hooks/useDomEditWiring.ts +1 -3
  57. package/src/hooks/useEditHistoryActions.test.tsx +31 -14
  58. package/src/hooks/useEditHistoryActions.ts +12 -7
  59. package/src/hooks/useEditorSave.ts +0 -3
  60. package/src/hooks/useElementLifecycleOps.ts +0 -1
  61. package/src/hooks/useEnableKeyframes.test.ts +9 -1
  62. package/src/hooks/useFileManager.ts +0 -2
  63. package/src/hooks/useGestureRecording.test.tsx +1 -1
  64. package/src/hooks/useGestureRecording.ts +6 -10
  65. package/src/hooks/useGroupCommits.ts +0 -1
  66. package/src/hooks/useGsapScriptCommits.ts +0 -1
  67. package/src/hooks/useGsapTweenCache.element.test.tsx +39 -0
  68. package/src/hooks/useGsapTweenCache.ts +5 -13
  69. package/src/hooks/useLintModal.test.tsx +34 -1
  70. package/src/hooks/useLintModal.ts +32 -30
  71. package/src/hooks/usePersistentEditHistory.test.ts +221 -315
  72. package/src/hooks/usePersistentEditHistory.ts +155 -342
  73. package/src/hooks/usePopulateKeyframeCacheForFile.test.tsx +2 -0
  74. package/src/hooks/usePreviewPersistence.ts +0 -2
  75. package/src/hooks/useProjectCompositionVariables.ts +1 -3
  76. package/src/hooks/useRazorSplit.history.test.tsx +46 -67
  77. package/src/hooks/useRazorSplit.test.ts +17 -47
  78. package/src/hooks/useRenderClipContent.test.ts +29 -0
  79. package/src/hooks/useRenderClipContent.ts +6 -3
  80. package/src/hooks/useSdkSession.lifecycle.test.tsx +34 -4
  81. package/src/hooks/useSdkSession.ts +8 -2
  82. package/src/hooks/useSlideshowPersist.ts +0 -2
  83. package/src/hooks/useStudioContextValue.ts +6 -1
  84. package/src/hooks/useTimelineAssetDropOps.ts +0 -1
  85. package/src/hooks/useTimelineDeleteOps.ts +0 -1
  86. package/src/hooks/useTimelineEditing.test.tsx +0 -1
  87. package/src/hooks/useTimelineEditingTypes.ts +0 -2
  88. package/src/hostMount.test.tsx +53 -22
  89. package/src/main.tsx +3 -0
  90. package/src/player/components/CompositionThumbnail.tsx +14 -0
  91. package/src/player/components/Player.test.ts +49 -0
  92. package/src/player/components/Player.tsx +21 -7
  93. package/src/player/components/timelineClipDragCommit.test.ts +7 -39
  94. package/src/player/hooks/timelineDomBinding.test.ts +50 -0
  95. package/src/player/hooks/timelineSyncHydration.test.ts +25 -1
  96. package/src/player/hooks/timelineSyncHydration.ts +3 -3
  97. package/src/player/hooks/useShadowPreviewReload.ts +1 -0
  98. package/src/player/hooks/useTimelinePlayer.play.test.ts +120 -0
  99. package/src/player/hooks/useTimelinePlayer.ts +1 -0
  100. package/src/player/hooks/useTimelineSyncCallbacks.ts +2 -0
  101. package/src/player/lib/automationStoreSync.test.ts +24 -0
  102. package/src/player/lib/automationStoreSync.ts +3 -9
  103. package/src/player/lib/playbackScrub.ts +1 -1
  104. package/src/player/lib/timelineDOM.test.ts +28 -0
  105. package/src/player/lib/timelineDOM.ts +4 -2
  106. package/src/player/lib/timelineElementHelpers.ts +78 -9
  107. package/src/player/lib/timelineIframeHelpers.test.ts +49 -5
  108. package/src/player/lib/timelineIframeHelpers.ts +13 -12
  109. package/src/player/store/playerStore.test.ts +35 -1
  110. package/src/player/store/playerStore.ts +29 -0
  111. package/src/player/store/readinessSlice.ts +34 -6
  112. package/src/utils/blockInstaller.ts +0 -3
  113. package/src/utils/previewPrefetch.test.ts +22 -0
  114. package/src/utils/previewPrefetch.ts +14 -0
  115. package/src/utils/razorSplitTransaction.test.ts +0 -1
  116. package/src/utils/razorSplitTransaction.ts +1 -1
  117. package/src/utils/sdkEditTransaction.ts +0 -3
  118. package/src/utils/studioFileHistory.test.ts +0 -9
  119. package/src/utils/studioFileHistory.ts +1 -5
  120. package/src/utils/studioUiPreferences.test.ts +9 -3
  121. package/src/utils/studioUiPreferences.ts +0 -20
  122. package/src/utils/timelineCompositionInsert.ts +0 -1
  123. package/dist/assets/hyperframes-player-WbBVbWuO.js +0 -464
  124. package/dist/chunk-7BP32G62.js.map +0 -1
  125. package/src/hooks/usePersistentEditHistory.projectOwnership.test.tsx +0 -60
  126. package/src/utils/editHistory.test.ts +0 -534
  127. package/src/utils/editHistory.ts +0 -236
  128. package/src/utils/editHistoryStorage.test.ts +0 -37
  129. package/src/utils/editHistoryStorage.ts +0 -99
  130. /package/dist/{domEditingLayers-UKMVYXT6.js.map → domEditingLayers-IGPLTI5E.js.map} +0 -0
@@ -11,7 +11,6 @@ describe("saveProjectFilesWithHistory", () => {
11
11
  await saveProjectFilesWithHistory({
12
12
  projectId: "project-1",
13
13
  label: "Move layer",
14
- kind: "manual",
15
14
  files: { "index.html": "after" },
16
15
  readFile: async (path) => reads[path],
17
16
  writeFile: async (path, content) => {
@@ -23,7 +22,6 @@ describe("saveProjectFilesWithHistory", () => {
23
22
  expect(writes).toEqual({ "index.html": "after" });
24
23
  expect(recordEdit).toHaveBeenCalledWith({
25
24
  label: "Move layer",
26
- kind: "manual",
27
25
  coalesceKey: undefined,
28
26
  files: { "index.html": { before: "before", after: "after" } },
29
27
  });
@@ -42,7 +40,6 @@ describe("saveProjectFilesWithHistory", () => {
42
40
  await saveProjectFilesWithHistory({
43
41
  projectId: "project-1",
44
42
  label: "Delete timeline clip",
45
- kind: "timeline",
46
43
  files: { "index.html": "removed+shrunk" },
47
44
  readFile: async () => "original",
48
45
  diskContent: { "index.html": "removed" },
@@ -67,7 +64,6 @@ describe("saveProjectFilesWithHistory", () => {
67
64
  await saveProjectFilesWithHistory({
68
65
  projectId: "project-1",
69
66
  label: "Move layer",
70
- kind: "manual",
71
67
  files: { "index.html": "after" },
72
68
  readFile: async () => "before",
73
69
  writeFile: async (path, _content, expectedContent) => {
@@ -85,7 +81,6 @@ describe("saveProjectFilesWithHistory", () => {
85
81
  const changedPaths = await saveProjectFilesWithHistory({
86
82
  projectId: "project-1",
87
83
  label: "Edit layer",
88
- kind: "manual",
89
84
  files: { "index.html": "same" },
90
85
  readFile: async () => "same",
91
86
  writeFile,
@@ -109,7 +104,6 @@ describe("saveProjectFilesWithHistory", () => {
109
104
  saveProjectFilesWithHistory({
110
105
  projectId: "project-1",
111
106
  label: "Move layer",
112
- kind: "manual",
113
107
  files: {
114
108
  "index.html": "index-after",
115
109
  "scene.html": "scene-after",
@@ -144,7 +138,6 @@ describe("saveProjectFilesWithHistory", () => {
144
138
  saveProjectFilesWithHistory({
145
139
  projectId: "project-1",
146
140
  label: "Move layer",
147
- kind: "manual",
148
141
  files: {
149
142
  "index.html": "index-after",
150
143
  "scene.html": "scene-after",
@@ -178,7 +171,6 @@ describe("saveProjectFilesWithHistory", () => {
178
171
  saveProjectFilesWithHistory({
179
172
  projectId: "project-1",
180
173
  label: "Move layer",
181
- kind: "manual",
182
174
  files: {
183
175
  "index.html": "index-after",
184
176
  "scene.html": "scene-after",
@@ -223,7 +215,6 @@ describe("saveProjectFilesWithHistory", () => {
223
215
  const save = saveProjectFilesWithHistory({
224
216
  projectId: "project-1",
225
217
  label: "Edit source",
226
- kind: "source",
227
218
  files: { "index.html": "editor-after" },
228
219
  readFile,
229
220
  writeFile,
@@ -1,12 +1,10 @@
1
1
  import { buildProjectApiPath } from "./projectRouting";
2
2
  import type { MutableRefObject } from "react";
3
- import type { EditHistoryKind } from "./editHistory";
4
3
  import { serializeStudioFileMutations } from "./studioFileMutationCoordinator";
5
4
  import { createStudioSaveHttpError } from "./studioSaveDiagnostics";
6
5
 
7
6
  export interface RecordEditInput {
8
7
  label: string;
9
- kind: EditHistoryKind;
10
8
  coalesceKey?: string;
11
9
  coalesceMs?: number;
12
10
  files: Record<string, { before: string; after: string }>;
@@ -27,7 +25,6 @@ type ProjectFileWriter = (path: string, content: string, expectedContent?: strin
27
25
  interface SaveProjectFilesWithHistoryInput {
28
26
  projectId: string;
29
27
  label: string;
30
- kind: EditHistoryKind;
31
28
  coalesceKey?: string;
32
29
  coalesceMs?: number;
33
30
  files: Record<string, string>;
@@ -65,7 +62,6 @@ export async function readProjectFileContent(pid: string, path: string): Promise
65
62
 
66
63
  export async function saveProjectFilesWithHistory({
67
64
  label,
68
- kind,
69
65
  coalesceKey,
70
66
  coalesceMs,
71
67
  files,
@@ -93,7 +89,7 @@ export async function saveProjectFilesWithHistory({
93
89
  writtenPaths.push(path);
94
90
  }
95
91
 
96
- await recordEdit({ label, kind, coalesceKey, coalesceMs, files: snapshots });
92
+ await recordEdit({ label, coalesceKey, coalesceMs, files: snapshots });
97
93
  } catch (error) {
98
94
  try {
99
95
  for (const path of writtenPaths.reverse()) {
@@ -23,14 +23,12 @@ describe("studio UI preferences", () => {
23
23
  writeStudioUiPreferences({ playbackRate: 1.5 }, storage);
24
24
  writeStudioUiPreferences({ audioMuted: true }, storage);
25
25
  writeStudioUiPreferences({ audioVolume: 0.4 }, storage);
26
- writeStudioUiPreferences({ previewZoom: { zoomPercent: 160, panX: -20, panY: 12 } }, storage);
27
26
 
28
27
  expect(readStudioUiPreferences(storage)).toEqual({
29
28
  timelineVisible: false,
30
29
  playbackRate: 1.5,
31
30
  audioMuted: true,
32
31
  audioVolume: 0.4,
33
- previewZoom: { zoomPercent: 160, panX: -20, panY: 12 },
34
32
  });
35
33
  });
36
34
 
@@ -49,6 +47,15 @@ describe("studio UI preferences", () => {
49
47
  expect(readStudioUiPreferences(storage)).toEqual({});
50
48
  });
51
49
 
50
+ it("keeps no preview zoom, so every project opens at Fit", () => {
51
+ const storage = createStorage();
52
+ storage.setItem(
53
+ "hf-studio-ui-preferences",
54
+ JSON.stringify({ previewZoom: { zoomPercent: 245, panX: 0, panY: 0 } }),
55
+ );
56
+ expect(readStudioUiPreferences(storage)).toEqual({});
57
+ });
58
+
52
59
  it("ignores malformed stored values", () => {
53
60
  const storage = createStorage();
54
61
  storage.setItem(
@@ -58,7 +65,6 @@ describe("studio UI preferences", () => {
58
65
  playbackRate: Number.NaN,
59
66
  audioMuted: "false",
60
67
  audioVolume: 2,
61
- previewZoom: { zoomPercent: 150, panX: 0, panY: "bad" },
62
68
  }),
63
69
  );
64
70
 
@@ -1,12 +1,6 @@
1
1
  import type { SerializedDockview } from "dockview-react";
2
2
  import { parseDockLayout } from "../components/dock/dockLayoutSchema";
3
3
 
4
- export interface StoredPreviewZoomState {
5
- zoomPercent: number;
6
- panX: number;
7
- panY: number;
8
- }
9
-
10
4
  export type TimelineTimeDisplayMode = "time" | "frame";
11
5
 
12
6
  export interface StudioUiPreferences {
@@ -15,7 +9,6 @@ export interface StudioUiPreferences {
15
9
  audioMuted?: boolean;
16
10
  audioVolume?: number;
17
11
  thumbnailMode?: "adaptive" | "hidden";
18
- previewZoom?: StoredPreviewZoomState;
19
12
  recentBlocks?: string[];
20
13
  snapEnabled?: boolean;
21
14
  gridVisible?: boolean;
@@ -103,19 +96,6 @@ function readStorage(storage: Storage | null, key: string): StudioUiPreferences
103
96
  } else if (typeof parsed.thumbnailsEnabled === "boolean") {
104
97
  preferences.thumbnailMode = parsed.thumbnailsEnabled ? "adaptive" : "hidden";
105
98
  }
106
- if (isRecord(parsed.previewZoom)) {
107
- const { zoomPercent, panX, panY } = parsed.previewZoom;
108
- if (
109
- typeof zoomPercent === "number" &&
110
- Number.isFinite(zoomPercent) &&
111
- typeof panX === "number" &&
112
- Number.isFinite(panX) &&
113
- typeof panY === "number" &&
114
- Number.isFinite(panY)
115
- ) {
116
- preferences.previewZoom = { zoomPercent, panX, panY };
117
- }
118
- }
119
99
  if (Array.isArray(parsed.recentBlocks)) {
120
100
  preferences.recentBlocks = parsed.recentBlocks.filter(
121
101
  (v: unknown): v is string => typeof v === "string",
@@ -70,7 +70,6 @@ export async function commitTimelineCompositionInsertion(input: {
70
70
  try {
71
71
  await input.recordEdit({
72
72
  label: "Add composition to timeline",
73
- kind: "timeline",
74
73
  files: { [input.targetPath]: { before: result.before, after: result.after } },
75
74
  });
76
75
  } catch (error) {