hyperframes 0.8.80 → 0.8.82

package/dist/studio/assets/{index-DZGVvqDT.js → index-DStmfnpZ.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-CsG24Jub.js";/*!
+import{n as Qi}from"./index-DSazIt7R.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/studio/index.d.ts

@@ -7,7 +7,7 @@ import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
 import { Menu as Menu$1 } from '@base-ui/react/menu';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
 import { RuntimeTimelineClipIdentity, HyperframePickerElementInfo } from '@hyperframes/core';
-import { GsapAnimation, PropertyGroupName } from '@hyperframes/core/gsap-parser';
+import { GsapAnimation, ParsedGsap, PropertyGroupName } from '@hyperframes/core/gsap-parser';
 import { MusicBeatAnalysis } from '@hyperframes/core/beats';
 import * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
@@ -654,8 +654,9 @@ interface TimelineElement {
     playbackRate?: number;
     sourceDuration?: number;
     volume?: number;
-    /** `data-has-audio="true"` on a video: its sound is mixed, so it takes audio affordances (fades). */
+    /** A video with sound to mix (`data-has-audio`, or unmuted without it); `muted` silences it. */
     hasAudio?: boolean;
+    muted?: boolean;
     /** Clip-edge fades from `data-fade-in` / `data-fade-out`, seconds; absent means none. */
     fadeIn?: number;
     fadeOut?: number;
@@ -1094,7 +1095,7 @@ interface DomEditPatchBatchesResult {
     changed: boolean;
 }
 
-interface RecordEditInput$1 {
+interface RecordEditInput$2 {
     label: string;
     coalesceKey?: string;
     files: Record<string, {
@@ -1118,7 +1119,7 @@ interface UseTimelineEditingOptions {
     showToast: (message: string, tone?: "error" | "info") => void;
     writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
     observeProjectFileVersion?: (path: string, version: string | null) => void;
-    recordEdit: (input: RecordEditInput$1) => Promise<void>;
+    recordEdit: (input: RecordEditInput$2) => Promise<void>;
     reloadPreview: () => void;
     previewIframeRef: RefObject<HTMLIFrameElement | null>;
     pendingTimelineEditPathRef: MutableRefObject<Set<string>>;
@@ -1142,6 +1143,101 @@ type TimelineMoveUpdates = Pick<TimelineElement, "start" | "track"> & {
     stackingReorder?: TimelineStackingReorderIntent | null;
 };
 
+/** Value-only channels a `tl.set(...)` patch may touch. */
+interface SetPatchProps {
+    x?: number;
+    y?: number;
+    rotation?: number;
+    rotationX?: number;
+    rotationY?: number;
+    rotationZ?: number;
+    z?: number;
+    transformPerspective?: number;
+    scaleX?: number;
+    scaleY?: number;
+    scale?: number;
+    opacity?: number;
+}
+/** A single keyframe step's numeric channels (the GSAP array-keyframe form). */
+type KeyframeStep = Record<string, number>;
+type RuntimeTweenChange = {
+    kind: "set";
+    props: SetPatchProps;
+} | {
+    kind: "keyframes";
+    keyframes: KeyframeStep[];
+} | {
+    kind: "keyframe-rebuild";
+    pct: number;
+    props: KeyframeStep;
+} | {
+    kind: "global-set";
+    props: SetPatchProps;
+};
+
+interface MutationResult {
+    ok: boolean;
+    changed?: boolean;
+    parsed?: ParsedGsap;
+    before?: string;
+    after?: string;
+    scriptText?: string;
+}
+interface CommitMutationOptions {
+    label: string;
+    /** Observe the durable writer result without duplicating the request path. */
+    onResult?: (result: MutationResult) => void;
+    coalesceKey?: string;
+    coalesceMs?: number;
+    softReload?: boolean;
+    skipReload?: boolean;
+    /**
+     * Write the source but leave the preview alone; the caller renders once when it
+     * is done. For a multi-write action like a group drag, rendering after each
+     * write shows a source where the members not yet written still hold their old
+     * values, so they snap back until their own write lands. This also defers the
+     * in-place runtime patch's seek, which re-renders the whole timeline and repaints
+     * the queued members the same way. Unlike `skipReload` this changes nothing about
+     * error handling — a failed write still throws.
+     */
+    deferPreviewSync?: boolean;
+    /** Shares an in-place patch miss with the final render of one multi-write action. */
+    previewFallbackLatch?: {
+        pending: boolean;
+    };
+    beforeReload?: () => void;
+    /**
+     * Serialize this commit against others sharing the same key. Used to chain
+     * per-animationId GSAP meta updates. Every commit independently takes the
+     * project/file mutation lock, so this key only adds ordering and can never
+     * bypass whole-file serialization.
+     */
+    serializeKey?: string;
+    /**
+     * Value-only edit fast path. When present, `runCommit` first tries to patch the
+     * one changed tween in the preview's runtime timeline in place
+     * (`patchRuntimeTweenInPlace`) — instant, no composition re-run, no iframe
+     * remount. On a successful patch the reload is skipped entirely (panels still
+     * refresh); when the patch can't be confidently applied it falls back to the
+     * existing soft/full reload path. Structural edits omit this and reload as before.
+     */
+    instantPatch?: {
+        selector: string;
+        change: RuntimeTweenChange;
+    };
+    /**
+     * The same fast path for a batched commit: one patch per element the batch
+     * wrote, applied in order. All of them must land for the reload to be skipped
+     * — one that can't be applied leaves the preview half-patched, so the whole
+     * batch falls back to the reload. Only the last patch re-renders (see
+     * `deferSeek`), so a ten-element batch repaints once.
+     */
+    instantPatches?: Array<{
+        selector: string;
+        change: RuntimeTweenChange;
+    }>;
+}
+
 interface TimelineGroupMoveChange {
     element: TimelineElement;
     start: number;
@@ -2648,7 +2744,7 @@ declare function findElementBlock(html: string, elementId: string): {
     isSelfClosing: boolean;
 } | null;
 
-interface RecordEditInput {
+interface RecordEditInput$1 {
     label: string;
     coalesceKey?: string;
     coalesceMs?: number;
@@ -2694,7 +2790,7 @@ declare function usePersistentEditHistory({ projectId }: UsePersistentEditHistor
             createdAt: number;
         }[];
     };
-    recordEdit: ({ label, coalesceKey, coalesceMs, files }: RecordEditInput) => Promise<void>;
+    recordEdit: ({ label, coalesceKey, coalesceMs, files }: RecordEditInput$1) => Promise<void>;
     undo: (callbacks: ApplyCallbacks) => Promise<ApplyResult>;
     redo: (callbacks: ApplyCallbacks) => Promise<ApplyResult>;
 };
@@ -2890,4 +2986,73 @@ declare function TimelineEditProvider({ value, children, }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, Button, type ButtonSize, type ButtonVariant, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ContextMenu, DEFAULT_SHORTCUT_SECTIONS, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, HyperframesLoader, type HyperframesLoaderProps, HyperframesLogo, IconButton, ImageThumbnail, type ImageThumbnailProps, Input, type InputProps, Menu, MenuItem, type MenuItemTone, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, NLEPreview, NumberField, type NumberFieldProps, type PatchOperation, type PersistedRenderSettings, type PickedElement, Player, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, Popover, type PopupPreviewState, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewSnapPreferences, type PreviewState, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, Select, type SelectOption, type SelectProps, type ShortcutHint, type ShortcutSection, Slider, type SliderProps, SnapToolbar, SourceEditor, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, Tab, TabPanel, Tabs, TabsList, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, Toggle, type ToggleProps, Tooltip, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, applyPatch, buildPickerAgentContextPreview, buildPickerAgentPrompt, buttonBase, buttonSizes, buttonVariants, cn, fieldBase, fieldText, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, popupSurface, resolveIframe, resolveSourceFile, useEditHistoryActions, useElementPicker, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };
+interface EnableKeyframesSession {
+    domEditSelection: DomEditSelection | null;
+    selectedGsapAnimations: GsapAnimation[];
+    previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;
+    handleGsapAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
+    handleGsapConvertToKeyframes: (animId: string, resolvedFromValues?: Record<string, number | string>, duration?: number, commitOverrides?: Partial<CommitMutationOptions>) => void | Promise<void>;
+    handleGsapRemoveKeyframe: (animId: string, pct: number) => void;
+    handleGsapAddKeyframeBatch?: (animId: string, pct: number, properties: Record<string, number | string>, commitOverrides?: Partial<CommitMutationOptions>) => Promise<void>;
+    commitMutation?: (mutation: Record<string, unknown>, options: CommitMutationOptions) => Promise<void>;
+}
+
+interface TimelineHistoryButtonsProps {
+    canUndo?: boolean;
+    canRedo?: boolean;
+    undoLabel?: string;
+    redoLabel?: string;
+    onUndo?: () => Promise<void> | void;
+    onRedo?: () => Promise<void> | void;
+}
+/** Undo and Redo: a host's props win, else the shell's edit history. */
+declare function TimelineHistoryButtons(props: TimelineHistoryButtonsProps): react_jsx_runtime.JSX.Element;
+
+interface DomEditSessionSlice extends EnableKeyframesSession {
+    domEditSelection: DomEditSelection | null;
+    selectedGsapAnimations: GsapAnimation[];
+}
+interface TimelineToolbarProps {
+    domEditSession?: DomEditSessionSlice;
+    onSplitElement?: (element: TimelineElement, splitTime: number) => void;
+    history?: TimelineHistoryButtonsProps;
+    showAddBeat?: boolean;
+}
+declare function TimelineToolbar({ domEditSession, onSplitElement, history, showAddBeat, }: TimelineToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface AudioMeterStripProps {
+    /** Pass a stable ref (useRef): a new object each render restarts the meter loop. */
+    previewIframeRef?: RefObject<HTMLIFrameElement | null>;
+}
+declare const AudioMeterStrip: react.NamedExoticComponent<AudioMeterStripProps>;
+
+interface RecordEditInput {
+    label: string;
+    coalesceKey?: string;
+    files: Record<string, {
+        before: string;
+        after: string;
+    }>;
+}
+interface UseClipboardOptions {
+    projectId: string | null;
+    activeCompPath: string | null;
+    domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
+    showToast: (message: string, tone?: "error" | "info") => void;
+    writeProjectFile: (path: string, content: string) => Promise<void>;
+    recordEdit: (input: RecordEditInput) => Promise<void>;
+    reloadPreview: () => void;
+    handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
+    handleDomEditElementDelete: (selection: DomEditSelection) => Promise<void>;
+    previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+    waitForPendingDomEditSaves: () => Promise<void>;
+}
+declare function useClipboard({ projectId, activeCompPath, domEditSelectionRef, showToast, writeProjectFile, recordEdit, reloadPreview, handleTimelineElementsDelete, handleDomEditElementDelete, previewIframeRef, waitForPendingDomEditSaves, }: UseClipboardOptions): {
+    handleCopy: () => boolean;
+    handlePaste: () => Promise<void>;
+    handleCut: () => Promise<boolean>;
+    handleDuplicate: () => Promise<boolean>;
+    canPaste: () => boolean;
+};
+
+export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, Button, type ButtonSize, type ButtonVariant, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ContextMenu, DEFAULT_SHORTCUT_SECTIONS, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, HyperframesLoader, type HyperframesLoaderProps, HyperframesLogo, IconButton, ImageThumbnail, type ImageThumbnailProps, Input, type InputProps, Menu, MenuItem, type MenuItemTone, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, NLEPreview, NumberField, type NumberFieldProps, type PatchOperation, type PersistedRenderSettings, type PickedElement, Player, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, Popover, type PopupPreviewState, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewSnapPreferences, type PreviewState, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, Select, type SelectOption, type SelectProps, type ShortcutHint, type ShortcutSection, Slider, type SliderProps, SnapToolbar, SourceEditor, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, Tab, TabPanel, Tabs, TabsList, 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, Toggle, type ToggleProps, Tooltip, type UseClipboardOptions, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, applyPatch, buildPickerAgentContextPreview, buildPickerAgentPrompt, buttonBase, buttonSizes, buttonVariants, cn, fieldBase, fieldText, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, popupSurface, resolveIframe, resolveSourceFile, useClipboard, useEditHistoryActions, useElementPicker, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };

package/dist/studio/index.html

@@ -5,7 +5,7 @@
     <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-CsG24Jub.js"></script>
+    <script type="module" crossorigin src="/assets/index-DSazIt7R.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BWJqxeaH.css">
   </head>
   <body>