@hyperframes/studio 0.7.54 → 0.7.56

package/dist/index.d.ts

@@ -1,8 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
 import * as zustand from 'zustand';
 import { MusicBeatAnalysis } from '@hyperframes/core/beats';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GsapAnimation, ArcPathSegment } from '@hyperframes/parsers/gsap-parser';
 
 interface PlayerProps {
@@ -131,6 +131,9 @@ interface TimelineElement {
 }
 type ZoomMode = "fit" | "manual";
 type TimelineTool = "select" | "razor";
+interface SelectElementOptions {
+    preserveSet?: boolean;
+}
 interface PlayerState {
     isPlaying: boolean;
     currentTime: number;
@@ -177,6 +180,25 @@ interface PlayerState {
     setAutoKeyframeEnabled: (enabled: boolean) => void;
     /** Multi-select: additional selected elements beyond selectedElementId. */
     selectedElementIds: Set<string>;
+    clearSelectedElementIds: () => void;
+    /** Replace the whole multi-selection at once (marquee live updates). */
+    setSelectedElementIds: (ids: Set<string>) => void;
+    /** Timeline magnet toggle — when false, clip drags/trims/drops never snap. */
+    timelineSnapEnabled: boolean;
+    setTimelineSnapEnabled: (enabled: boolean) => void;
+    /**
+     * Pin the timeline zoom to its current visual scale before a duration-changing
+     * edit, so a subsequent duration change (which recomputes fit-pps) stops
+     * rescaling every clip. No-op once already pinned (mode is "manual").
+     */
+    pinTimelineZoom: (currentPixelsPerSecond: number, fitPixelsPerSecond: number) => void;
+    /**
+     * The timeline's live pixels-per-second + fit basis, published by <Timeline> on
+     * every render. Non-reactive scratch state (never read as a render input).
+     */
+    timelinePps: number;
+    timelineFitPps: number;
+    setTimelineScale: (pps: number, fitPps: number) => void;
     setSelection: (ids: Iterable<string>, anchor?: string | null) => void;
     addSelectedElementId: (id: string) => void;
     toggleSelectedElementId: (id: string) => void;
@@ -193,7 +215,7 @@ interface PlayerState {
     setTimelineReady: (ready: boolean) => void;
     setBeatDragging: (dragging: boolean) => void;
     setElements: (elements: TimelineElement[]) => void;
-    setSelectedElementId: (id: string | null) => void;
+    setSelectedElementId: (id: string | null, options?: SelectElementOptions) => void;
     /** Move the selection anchor within an active multi-selection without collapsing it. */
     setSelectionAnchor: (id: string | null) => void;
     updateElement: (elementId: string, updates: Partial<Pick<TimelineElement, "start" | "duration" | "track" | "zIndex" | "hasExplicitZIndex" | "playbackStart" | "hidden">>) => void;
@@ -264,36 +286,6 @@ declare const liveTime: {
 };
 declare const usePlayerStore: zustand.UseBoundStore<zustand.StoreApi<PlayerState>>;
 
-type TimelineLayerDropPlacement = {
-    type: "onto";
-    layerId: string;
-} | {
-    type: "between";
-    beforeLayerId: string;
-    afterLayerId: string;
-} | {
-    type: "above";
-    layerId: string;
-} | {
-    type: "below";
-    layerId: string;
-};
-interface TimelineStackingZIndexChange {
-    key: string;
-    zIndex: number;
-    domId?: string;
-    selector?: string;
-    selectorIndex?: number;
-    sourceFile?: string;
-}
-interface TimelineStackingReorderIntent {
-    contextKey: string;
-    placement: TimelineLayerDropPlacement;
-    zIndexChanges: TimelineStackingZIndexChange[];
-}
-
-type BlockedTimelineEditIntent = "move" | "resize-start" | "resize-end";
-
 /**
  * Source Patcher — Maps visual property edits back to source HTML files.
  * Handles inline style updates, attribute changes, and text content.
@@ -320,21 +312,63 @@ declare function resolveSourceFile(elementId: string | null, selector: string, f
  */
 declare function applyPatch(html: string, elementId: string, op: PatchOperation): string;
 
-interface TimelineGroupMoveChange {
-    element: TimelineElement;
-    start: number;
+type BlockedTimelineEditIntent = "move" | "resize-start" | "resize-end";
+
+interface DomEditCapabilities {
+    canSelect: boolean;
+    canEditStyles: boolean;
+    /** Can take a non-destructive `clip-path: inset()` crop — broader than
+     *  canEditStyles (a sub-composition host is croppable from the parent view). */
+    canCrop: boolean;
+    /** Directly editable authored left/top style fields. Canvas drag uses manual edits instead. */
+    canMove: boolean;
+    /** Directly editable authored width/height style fields. Canvas resize uses manual edits instead. */
+    canResize: boolean;
+    canApplyManualOffset: boolean;
+    canApplyManualSize: boolean;
+    canApplyManualRotation: boolean;
+    reasonIfDisabled?: string;
 }
-interface TimelineGroupResizeChange {
-    element: TimelineElement;
-    start: number;
-    duration: number;
-    playbackStart?: number;
+interface DomEditTextField {
+    key: string;
+    label: string;
+    value: string;
+    tagName: string;
+    attributes: Array<{
+        name: string;
+        value: string;
+    }>;
+    inlineStyles: Record<string, string>;
+    computedStyles: Record<string, string>;
+    source: "self" | "child" | "text-node";
+    sourceChildIndex?: number;
 }
-interface TimelineGroupCommitOptions {
-    beforeTiming?: Promise<void>;
-    coalesceKey?: string;
+interface DomEditSelection extends PatchTarget {
+    element: HTMLElement;
+    label: string;
+    tagName: string;
+    sourceFile: string;
+    compositionPath: string;
+    compositionSrc?: string;
+    isCompositionHost: boolean;
+    isInsideLockedComposition: boolean;
+    boundingBox: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    textContent: string | null;
+    dataAttributes: Record<string, string>;
+    inlineStyles: Record<string, string>;
+    computedStyles: Record<string, string>;
+    textFields: DomEditTextField[];
+    capabilities: DomEditCapabilities;
+    gsapAnimations?: GsapAnimation[];
 }
 
+type TimelineMoveOperation = "timing" | "lane-reorder" | "track-insert";
+
 /**
  * Shared callback signatures for timeline editing operations.
  * Used by NLELayout, Timeline, and any component that passes through
@@ -355,16 +389,24 @@ interface TimelineDropCallbacks {
     }) => Promise<void> | void;
 }
 interface TimelineEditCallbacks {
-    onMoveElement?: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track"> & {
-        stackingReorder?: TimelineStackingReorderIntent | null;
-    }) => Promise<void> | void;
+    onMoveElement?: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track">) => Promise<void> | void;
+    /** Atomic multi-clip move (single undo) for main-track ripple + track-insert.
+     *  `coalesceKey` (drag-commit gesture id) merges the move history entry with a
+     *  lane change's follow-up z-reorder entry into one undo step. */
+    onMoveElements?: (edits: Array<{
+        element: TimelineElement;
+        updates: Pick<TimelineElement, "start" | "track">;
+    }>, coalesceKey?: string, operation?: TimelineMoveOperation) => Promise<void> | void;
     onResizeElement?: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">) => Promise<void> | void;
-    onMoveElements?: (changes: TimelineGroupMoveChange[], options?: TimelineGroupCommitOptions) => Promise<void> | void;
-    onResizeElements?: (changes: TimelineGroupResizeChange[], options?: TimelineGroupCommitOptions) => Promise<void> | void;
-    onPreviewMoveElements?: (changes: TimelineGroupMoveChange[]) => void;
-    onPreviewResizeElements?: (changes: TimelineGroupResizeChange[]) => void;
+    onResizeElements?: (changes: Array<{
+        element: TimelineElement;
+        start: number;
+        duration: number;
+        playbackStart?: number;
+    }>, options?: {
+        coalesceKey?: string;
+    }) => Promise<void> | void;
     onToggleTrackHidden?: (track: number, hidden: boolean) => Promise<void> | void;
-    onToggleElementHidden?: (elementKey: string, hidden: boolean) => Promise<void> | void;
     onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
     onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
     onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
@@ -405,7 +447,7 @@ interface TimelineTheme {
     clipRadius: string;
 }
 
-type TimelineEditOverrides = Pick<TimelineEditCallbacks, "onMoveElement" | "onResizeElement" | "onBlockedEditAttempt" | "onSplitElement">;
+type TimelineEditOverrides = Pick<TimelineEditCallbacks, "onMoveElement" | "onMoveElements" | "onResizeElement" | "onResizeElements" | "onBlockedEditAttempt" | "onSplitElement">;
 
 interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
     onSeek?: (time: number) => void;
@@ -498,48 +540,61 @@ declare function useTimelinePlayer(): {
 
 declare function formatTime(time: number): string;
 
-interface NLELayoutProps {
-    projectId: string;
-    portrait?: boolean;
-    /** Slot for overlays rendered on top of the preview (cursors, highlights, etc.) */
-    previewOverlay?: ReactNode;
-    /** Slot rendered above the timeline tracks (toolbar with split, delete, zoom) */
-    timelineToolbar?: ReactNode;
-    /** Slot rendered below the timeline tracks */
-    timelineFooter?: ReactNode;
-    /** Increment to force the preview to reload (e.g., after file writes) */
-    refreshKey?: number;
-    /** Navigate to a specific composition path (e.g., "compositions/intro.html") */
-    activeCompositionPath?: string | null;
-    /** Callback to expose the iframe ref (for element picker, etc.) */
-    onIframeRef?: (iframe: HTMLIFrameElement | null) => void;
-    /** Callback when the viewed composition changes (drill-down/back) */
-    onCompositionChange?: (compositionPath: string | null) => void;
-    /** Custom clip content renderer for timeline (thumbnails, waveforms, etc.) */
-    renderClipContent?: (element: TimelineElement, style: {
-        clip: string;
-        label: string;
-    }) => ReactNode;
-    onFileDrop?: (files: File[], placement?: Pick<TimelineElement, "start" | "track">) => Promise<void> | void;
-    onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
-    onAssetDrop?: (assetPath: string, placement: Pick<TimelineElement, "start" | "track">) => Promise<void> | void;
-    onBlockDrop?: (blockName: string, placement: Pick<TimelineElement, "start" | "track">) => Promise<void> | void;
-    onPreviewBlockDrop?: (blockName: string, position: {
+interface TimelineEditCallbackDeps {
+    handleTimelineElementMove: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track">) => Promise<void> | void;
+    handleTimelineElementsMove: (edits: Array<{
+        element: TimelineElement;
+        updates: Pick<TimelineElement, "start" | "track">;
+    }>, coalesceKey?: string, operation?: TimelineMoveOperation) => Promise<void> | void;
+    handleTimelineElementResize: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">) => Promise<void> | void;
+    handleTimelineGroupResize: NonNullable<TimelineEditCallbacks["onResizeElements"]>;
+    handleToggleTrackHidden: (track: number, hidden: boolean) => Promise<void> | void;
+    handleBlockedTimelineEdit: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+    handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
+    handleRazorSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
+    handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
+}
+
+interface BlockPreviewInfo {
+    videoUrl?: string;
+    posterUrl?: string;
+    title: string;
+}
+
+type GestureRecordingState = "idle" | "recording" | "preview";
+
+type RenderClipContent = (element: TimelineElement, style: {
+    clip: string;
+    label: string;
+}) => ReactNode;
+type TimelineDropPlacement = Pick<TimelineElement, "start" | "track">;
+interface EditorShellProps extends TimelineEditCallbackDeps {
+    /** Left sidebar (media/library), rendered in the top row. */
+    left: ReactNode;
+    /** Right panel (inspector/design) or null when collapsed, in the top row. */
+    right: ReactNode;
+    /** Hide the whole shell (e.g. while the storyboard view is active). */
+    hidden?: boolean;
+    timelineToolbar: ReactNode;
+    renderClipContent: RenderClipContent;
+    handleTimelineElementDelete: (element: TimelineElement) => Promise<void> | void;
+    handleTimelineAssetDrop: (assetPath: string, placement: TimelineDropPlacement) => Promise<void> | void;
+    handleTimelineBlockDrop?: (blockName: string, placement: TimelineDropPlacement) => Promise<void> | void;
+    handlePreviewBlockDrop?: (blockName: string, position: {
         left: number;
         top: number;
     }) => Promise<void> | void;
-    onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
-    onSelectTimelineElement?: (element: TimelineElement | null) => void;
-    /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
-    onCompIdToSrcChange?: (map: Map<string, string>) => void;
-    /** Whether the timeline panel is visible (default: true) */
-    timelineVisible?: boolean;
-    /** Callback to toggle timeline visibility */
-    onToggleTimeline?: () => void;
-    /** Notifies parent when composition loading state changes */
-    onCompositionLoadingChange?: (loading: boolean) => void;
+    handleTimelineFileDrop: (files: File[], placement?: TimelineDropPlacement) => Promise<void> | void;
+    setCompIdToSrc: (map: Map<string, string>) => void;
+    setCompositionLoading: (loading: boolean) => void;
+    shouldShowSelectedDomBounds: boolean;
+    blockPreview?: BlockPreviewInfo | null;
+    isGestureRecording?: boolean;
+    recordingState?: GestureRecordingState;
+    onToggleRecording?: () => void;
+    gestureOverlay?: ReactNode;
 }
-declare const NLELayout: react.NamedExoticComponent<NLELayoutProps>;
+declare function EditorShell({ left, right, hidden, timelineToolbar, renderClipContent, handleTimelineElementDelete, handleTimelineAssetDrop, handleTimelineBlockDrop, handlePreviewBlockDrop, handleTimelineFileDrop, handleTimelineElementMove, handleTimelineElementsMove, handleTimelineElementResize, handleTimelineGroupResize, handleToggleTrackHidden, handleBlockedTimelineEdit, handleTimelineElementSplit, handleRazorSplit, handleRazorSplitAll, setCompIdToSrc, setCompositionLoading, shouldShowSelectedDomBounds, isGestureRecording, recordingState, onToggleRecording, blockPreview, gestureOverlay, }: EditorShellProps): react_jsx_runtime.JSX.Element;
 
 interface NLEPreviewProps {
     projectId: string;
@@ -583,59 +638,6 @@ interface SourceEditorProps {
 }
 declare const SourceEditor: react.NamedExoticComponent<SourceEditorProps>;
 
-interface DomEditCapabilities {
-    canSelect: boolean;
-    canEditStyles: boolean;
-    /** Can take a non-destructive `clip-path: inset()` crop — broader than
-     *  canEditStyles (a sub-composition host is croppable from the parent view). */
-    canCrop: boolean;
-    /** Directly editable authored left/top style fields. Canvas drag uses manual edits instead. */
-    canMove: boolean;
-    /** Directly editable authored width/height style fields. Canvas resize uses manual edits instead. */
-    canResize: boolean;
-    canApplyManualOffset: boolean;
-    canApplyManualSize: boolean;
-    canApplyManualRotation: boolean;
-    reasonIfDisabled?: string;
-}
-interface DomEditTextField {
-    key: string;
-    label: string;
-    value: string;
-    tagName: string;
-    attributes: Array<{
-        name: string;
-        value: string;
-    }>;
-    inlineStyles: Record<string, string>;
-    computedStyles: Record<string, string>;
-    source: "self" | "child" | "text-node";
-    sourceChildIndex?: number;
-}
-interface DomEditSelection extends PatchTarget {
-    element: HTMLElement;
-    label: string;
-    tagName: string;
-    sourceFile: string;
-    compositionPath: string;
-    compositionSrc?: string;
-    isCompositionHost: boolean;
-    isInsideLockedComposition: boolean;
-    boundingBox: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    textContent: string | null;
-    dataAttributes: Record<string, string>;
-    inlineStyles: Record<string, string>;
-    computedStyles: Record<string, string>;
-    textFields: DomEditTextField[];
-    capabilities: DomEditCapabilities;
-    gsapAnimations?: GsapAnimation[];
-}
-
 interface ImportedFontAsset {
     family: string;
     path: string;
@@ -845,4 +847,4 @@ declare function findElementBlock(html: string, elementId: string): {
     isSelfClosing: boolean;
 } | null;
 
-export { CompositionBreadcrumb, type CompositionLevel, CompositionThumbnail, FileTree, NLELayout, NLEPreview, type PatchOperation, type PickedElement, Player, PlayerControls, PropertyPanel, SourceEditor, StudioApp, Timeline, type TimelineElement, VideoThumbnail, applyPatch, findElementBlock, formatTime, liveTime, mergeStyleIntoTag, parseStyleString, resolveIframe, resolveSourceFile, useElementPicker, usePlayerStore, useTimelinePlayer };
+export { CompositionBreadcrumb, type CompositionLevel, CompositionThumbnail, EditorShell, FileTree, NLEPreview, type PatchOperation, type PickedElement, Player, PlayerControls, PropertyPanel, SourceEditor, StudioApp, Timeline, type TimelineElement, VideoThumbnail, applyPatch, findElementBlock, formatTime, liveTime, mergeStyleIntoTag, parseStyleString, resolveIframe, resolveSourceFile, useElementPicker, usePlayerStore, useTimelinePlayer };

package/dist/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-pRhCpGPz.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dq7FEg0K.css">
+    <script type="module" crossorigin src="/assets/index-CmVCjZjp.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D-GyYi2d.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>