hyperframes 0.8.84 → 0.8.85

package/dist/studio/index.d.ts

@@ -1357,6 +1357,7 @@ interface TimelineLogicalItem {
     elementId: string;
     /** The item's time anchor. Clips use their midpoint; ease controls use the segment midpoint. */
     time: number;
+    element?: TimelineElement;
     keyframeTarget?: TimelineKeyframeTarget;
 }
 interface TimelineLogicalRow {
@@ -1937,6 +1938,25 @@ interface CompositionBreadcrumbProps {
 }
 declare function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcrumbProps): react_jsx_runtime.JSX.Element | null;
 
+interface UseCompositionStackOptions {
+    projectId: string;
+    activeCompositionPath?: string | null;
+    onCompositionChange?: (compositionPath: string | null) => void;
+}
+interface UseCompositionStackResult {
+    compositionStack: CompositionLevel[];
+    updateCompositionStack: React.Dispatch<React.SetStateAction<CompositionLevel[]>>;
+    handleNavigateComposition: (index: number) => void;
+    handleDrillDown: (element: {
+        id: string;
+        compositionSrc?: string;
+    }) => void;
+    masterSeekRef: React.MutableRefObject<number>;
+    compIdToSrc: Map<string, string>;
+    setCompIdToSrc: React.Dispatch<React.SetStateAction<Map<string, string>>>;
+}
+declare function useCompositionStack({ projectId, activeCompositionPath, onCompositionChange, }: UseCompositionStackOptions): UseCompositionStackResult;
+
 interface AudioWaveformProps {
     audioUrl: string;
     waveformUrl?: string;
@@ -3394,4 +3414,4 @@ interface MarqueeOverlayProps {
  */
 declare function MarqueeOverlay({ candidateRects, marqueeRect }: MarqueeOverlayProps): react_jsx_runtime.JSX.Element;
 
-export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, type DomEditCapabilities, DomEditProvider, type DomEditSelection, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, ImageThumbnail, type ImageThumbnailProps, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, NLEPreview, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineZIndexReorderCommit, type UseClipboardOptions, type UseDomEditSessionParams, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, collectSnapContext, extractSnapTargets, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, snapEngagedForTravel, useClipboard, useDomEditSelectionContext, useDomEditSession, useEditHistoryActions, useElementPicker, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };
+export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, type DomEditCapabilities, DomEditProvider, type DomEditSelection, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, ImageThumbnail, type ImageThumbnailProps, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, NLEPreview, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineZIndexReorderCommit, type UseClipboardOptions, type UseDomEditSessionParams, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, collectSnapContext, extractSnapTargets, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, snapEngagedForTravel, useClipboard, useCompositionStack, useDomEditSelectionContext, useDomEditSession, useEditHistoryActions, useElementPicker, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };

package/dist/studio/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-gjbSm-vt.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BWJqxeaH.css">
+    <script type="module" crossorigin src="/assets/index-ClLdmgua.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-mzZCha_N.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>

package/dist/studio/index.js

@@ -11914,7 +11914,8 @@ function clipItems(rowId, elements) {
       kind: "clip",
       rowId,
       elementId: id,
-      time: element.start + element.duration / 2
+      time: element.start + element.duration / 2,
+      element
     };
   });
 }
@@ -20390,7 +20391,8 @@ function useTimelineKeyboardActor({
   focusedTargetId,
   rowGeometry,
   scrollRef,
-  onToggleRow
+  onToggleRow,
+  onDrillDown
 }) {
   const rovingTargetId = (focusedTargetId && locateTimelineLogicalTarget(logicalRows, focusedTargetId)?.target.id) ?? logicalRows[0]?.id ?? null;
   const logicalRowCountByTrack = useMemo27(() => {
@@ -20441,13 +20443,19 @@ function useTimelineKeyboardActor({
         openContextMenu(targetElement);
         return;
       }
+      const composition = located.target.kind === "clip" && located.target.element;
+      if (event.key === "Enter" && composition && composition.compositionSrc && onDrillDown) {
+        event.preventDefault();
+        onDrillDown(composition);
+        return;
+      }
       if (event.key !== "Enter" && event.key !== " " || located.target.kind !== "row" || !located.target.expandable) {
         return;
       }
       event.preventDefault();
       onToggleRow(located.target);
     },
-    [logicalRowCountByTrack, logicalRows, onToggleRow, rowGeometry, scrollRef]
+    [logicalRowCountByTrack, logicalRows, onDrillDown, onToggleRow, rowGeometry, scrollRef]
   );
   return { rovingTargetId, onFocus, onKeyDown };
 }
@@ -20683,9 +20691,8 @@ function TimelineLanes({
     focusedTargetId,
     rowGeometry,
     scrollRef,
-    onToggleRow: (row) => {
-      if (row.elementId) toggleClipExpandedTracked(row.elementId);
-    }
+    onToggleRow: (row) => row.elementId && toggleClipExpandedTracked(row.elementId),
+    onDrillDown
   });
   return /* @__PURE__ */ jsx52(
     "div",
@@ -27300,7 +27307,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
     "nav",
     {
       "aria-label": "Composition navigation",
-      className: "flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 shrink-0",
+      className: "flex items-center gap-1 px-2 h-8 border-b border-hairline bg-bg-1 shrink-0",
       children: [
         /* @__PURE__ */ jsx70(
           "button",
@@ -27313,7 +27320,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
               });
               onNavigate(stack.length - 2);
             },
-            className: "flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors",
+            className: "flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-text-3 hover:text-text-0 hover:bg-hover active:scale-[0.98] transition-colors",
             title: "Back (Esc, or double-click empty timeline)",
             "aria-label": "Back to parent composition",
             children: /* @__PURE__ */ jsx70(ArrowLeft2, { size: 12, weight: "bold" })
@@ -27322,8 +27329,8 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
         stack.map((level, i) => {
           const isLast = i === stack.length - 1;
           return /* @__PURE__ */ jsxs48("span", { className: "flex items-center gap-1", children: [
-            i > 0 && /* @__PURE__ */ jsx70(CaretRight2, { size: 10, className: "text-neutral-600 shrink-0" }),
-            isLast ? /* @__PURE__ */ jsx70("span", { className: "text-xs text-neutral-200 font-medium", children: level.label }) : /* @__PURE__ */ jsx70(
+            i > 0 && /* @__PURE__ */ jsx70(CaretRight2, { size: 10, className: "text-text-4 shrink-0" }),
+            isLast ? /* @__PURE__ */ jsx70("span", { className: "text-xs text-text-1 font-medium", children: level.label }) : /* @__PURE__ */ jsx70(
               "button",
               {
                 type: "button",
@@ -27331,7 +27338,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
                   trackStudioEvent("navigation", { action: "breadcrumb", target: level.label });
                   onNavigate(i);
                 },
-                className: "text-xs text-neutral-500 hover:text-neutral-200 transition-colors",
+                className: "text-xs text-text-3 hover:text-text-1 transition-colors",
                 children: level.label
               }
             )
@@ -91481,6 +91488,7 @@ export {
   resolveSourceFile,
   snapEngagedForTravel,
   useClipboard,
+  useCompositionStack,
   useDomEditSelectionContext,
   useDomEditSession,
   useEditHistoryActions,