@hyperframes/studio 0.6.0-alpha.4 → 0.6.0-alpha.5

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 (6) hide show
  1. package/dist/assets/{index-BfnyZllX.js → index-BTa7zV4Z.js} +32 -32
  2. package/dist/index.html +1 -1
  3. package/package.json +4 -4
  4. package/src/App.tsx +11 -3
  5. package/src/components/editor/manualEditingAvailability.ts +2 -2
  6. package/src/components/nle/NLELayout.tsx +7 -0
package/dist/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
6
  <title>HyperFrames Studio</title>
7
- <script type="module" crossorigin src="/assets/index-BfnyZllX.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-BTa7zV4Z.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-pZvEUcY0.css">
9
9
  </head>
10
10
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyperframes/studio",
3
- "version": "0.6.0-alpha.4",
3
+ "version": "0.6.0-alpha.5",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,8 +32,8 @@
32
32
  "@phosphor-icons/react": "^2.1.10",
33
33
  "codemirror": "^6.0.1",
34
34
  "motion": "^12.38.0",
35
- "@hyperframes/core": "0.6.0-alpha.4",
36
- "@hyperframes/player": "0.6.0-alpha.4"
35
+ "@hyperframes/core": "0.6.0-alpha.5",
36
+ "@hyperframes/player": "0.6.0-alpha.5"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@types/react": "^19.0.0",
@@ -47,7 +47,7 @@
47
47
  "vite": "^6.4.2",
48
48
  "vitest": "^3.2.4",
49
49
  "zustand": "^5.0.0",
50
- "@hyperframes/producer": "0.6.0-alpha.4"
50
+ "@hyperframes/producer": "0.6.0-alpha.5"
51
51
  },
52
52
  "peerDependencies": {
53
53
  "react": "^18.0.0 || ^19.0.0",
package/src/App.tsx CHANGED
@@ -894,6 +894,7 @@ export function StudioApp() {
894
894
  const [agentModalOpen, setAgentModalOpen] = useState(false);
895
895
  const [previewIframe, setPreviewIframe] = useState<HTMLIFrameElement | null>(null);
896
896
  const [inspectedTimelineElementId, setInspectedTimelineElementId] = useState<string | null>(null);
897
+ const [compositionLoading, setCompositionLoading] = useState(true);
897
898
  const [previewDocumentVersion, setPreviewDocumentVersion] = useState(0);
898
899
  const refreshPreviewDocumentVersion = useCallback(() => {
899
900
  setPreviewDocumentVersion((version) => version + 1);
@@ -3169,7 +3170,7 @@ export function StudioApp() {
3169
3170
 
3170
3171
  const handlePreviewCanvasMouseDown = useCallback(
3171
3172
  (e: React.MouseEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
3172
- if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode) return;
3173
+ if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) return;
3173
3174
  const nextSelection = resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
3174
3175
  preferClipAncestor: options?.preferClipAncestor ?? false,
3175
3176
  });
@@ -3199,6 +3200,7 @@ export function StudioApp() {
3199
3200
  [
3200
3201
  applyDomSelection,
3201
3202
  captionEditMode,
3203
+ compositionLoading,
3202
3204
  preloadAgentPromptSnippet,
3203
3205
  resolveDomSelectionFromPreviewPoint,
3204
3206
  ],
@@ -3206,7 +3208,7 @@ export function StudioApp() {
3206
3208
 
3207
3209
  const handlePreviewCanvasPointerMove = useCallback(
3208
3210
  (e: React.PointerEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
3209
- if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode) {
3211
+ if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) {
3210
3212
  updateDomEditHoverSelection(null);
3211
3213
  return null;
3212
3214
  }
@@ -3217,7 +3219,12 @@ export function StudioApp() {
3217
3219
  updateDomEditHoverSelection(nextSelection);
3218
3220
  return nextSelection;
3219
3221
  },
3220
- [captionEditMode, resolveDomSelectionFromPreviewPoint, updateDomEditHoverSelection],
3222
+ [
3223
+ captionEditMode,
3224
+ compositionLoading,
3225
+ resolveDomSelectionFromPreviewPoint,
3226
+ updateDomEditHoverSelection,
3227
+ ],
3221
3228
  );
3222
3229
 
3223
3230
  const handlePreviewCanvasPointerLeave = useCallback(() => {
@@ -4085,6 +4092,7 @@ export function StudioApp() {
4085
4092
  inspectedTimelineElementId={inspectedTimelineElementId}
4086
4093
  timelineLayerChildCounts={timelineLayerChildCounts}
4087
4094
  onCompIdToSrcChange={setCompIdToSrc}
4095
+ onCompositionLoadingChange={setCompositionLoading}
4088
4096
  onCompositionChange={(compPath) => {
4089
4097
  // Sync activeCompPath when user drills down via timeline double-click
4090
4098
  // or navigates back via breadcrumb — keeps sidebar + thumbnails in sync.
package/src/components/editor/manualEditingAvailability.ts CHANGED
@@ -32,7 +32,7 @@ const env = import.meta.env as StudioFeatureFlagEnv;
32
32
  export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag(
33
33
  env,
34
34
  [STUDIO_PREVIEW_MANUAL_DRAGGING_ENV, "VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],
35
- true,
35
+ false,
36
36
  );
37
37
 
38
38
  export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
@@ -44,7 +44,7 @@ export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
44
44
  export const STUDIO_MOTION_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
45
45
  env,
46
46
  [STUDIO_MOTION_PANEL_ENV, "VITE_STUDIO_MOTION_PANEL_ENABLED"],
47
- true,
47
+ false,
48
48
  );
49
49
 
50
50
  export const STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED =
package/src/components/nle/NLELayout.tsx CHANGED
@@ -61,6 +61,8 @@ interface NLELayoutProps {
61
61
  timelineVisible?: boolean;
62
62
  /** Callback to toggle timeline visibility */
63
63
  onToggleTimeline?: () => void;
64
+ /** Notifies parent when composition loading state changes */
65
+ onCompositionLoadingChange?: (loading: boolean) => void;
64
66
  }
65
67
 
66
68
  const MIN_TIMELINE_H = 100;
@@ -95,6 +97,7 @@ export const NLELayout = memo(function NLELayout({
95
97
  onCompIdToSrcChange,
96
98
  timelineVisible,
97
99
  onToggleTimeline,
100
+ onCompositionLoadingChange: onCompositionLoadingChangeParent,
98
101
  }: NLELayoutProps) {
99
102
  const {
100
103
  iframeRef,
@@ -216,6 +219,10 @@ export const NLELayout = memo(function NLELayout({
216
219
  const [timelineH, setTimelineH] = useState(DEFAULT_TIMELINE_H);
217
220
  const [compositionLoading, setCompositionLoading] = useState(true);
218
221
  const timelineDisabled = shouldDisableTimelineWhileCompositionLoading(compositionLoading);
222
+
223
+ useEffect(() => {
224
+ onCompositionLoadingChangeParent?.(compositionLoading);
225
+ }, [compositionLoading, onCompositionLoadingChangeParent]);
219
226
  const isTimelineVisible = timelineVisible ?? true;
220
227
  const isDragging = useRef(false);
221
228
  const containerRef = useRef<HTMLDivElement>(null);