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 { GsapAnimation, ArcPathSegment } from '@hyperframes/parsers/gsap-parser';

interface PlayerProps {
    projectId?: string;
    directUrl?: string;
    onLoad: () => void;
    onCompositionLoadingChange?: (loading: boolean) => void;
    portrait?: boolean;
    style?: React.CSSProperties;
    suppressLoadingOverlay?: boolean;
}
/**
 * Renders a composition preview using the <hyperframes-player> web component.
 *
 * The web component handles iframe scaling, dimension detection, and
 * ResizeObserver internally. This wrapper bridges its inner iframe to the
 * forwarded ref so useTimelinePlayer can access it for clip manifest parsing,
 * timeline probing, and DOM inspection.
 */
declare const Player: react.ForwardRefExoticComponent<PlayerProps & react.RefAttributes<HTMLIFrameElement>>;

interface PlayerControlsProps {
    onTogglePlay: () => void;
    onSeek: (time: number) => void;
    disabled?: boolean;
    isFullscreen?: boolean;
    onToggleFullscreen?: () => void;
}
declare const PlayerControls: react.NamedExoticComponent<PlayerControlsProps>;

interface UserBeat {
    time: number;
    strength: number;
}
interface BeatEditState {
    /** Music src these edits apply to; edits reset when the src changes. */
    src: string;
    /** Beats the user added (audio-file coords). */
    added: UserBeat[];
    /** Audio-file times of detected beats the user removed. */
    removed: number[];
}

interface ClipManifestClip {
    id: string | null;
    label: string;
    start: number;
    duration: number;
    track: number;
    zIndex?: number;
    stackingContextId?: string | null;
    kind: "video" | "audio" | "image" | "element" | "composition";
    tagName: string | null;
    compositionId: string | null;
    compositionAncestors?: string[];
    parentCompositionId: string | null;
    compositionSrc: string | null;
    assetUrl: string | null;
}

/** Minimal keyframe cache types — mirrors GsapKeyframesData without pulling in Node-only gsap-parser. */
interface KeyframeCacheEntry {
    format: string;
    keyframes: Array<{
        percentage: number;
        /** Original tween-relative percentage (server mutations need this, not the clip-relative `percentage`). */
        tweenPercentage?: number;
        /** Which property group the source tween belongs to (position, scale, rotation, visual, etc.). */
        propertyGroup?: string;
        properties: Record<string, number | string>;
        ease?: string;
    }>;
    ease?: string;
    easeEach?: string;
}
interface TimelineElement {
    id: string;
    label?: string;
    key?: string;
    tag: string;
    start: number;
    duration: number;
    track: number;
    /**
     * The data-track-index as written in the source file. Set at the manifest
     * translation boundary (createTimelineElementFromManifestClip) from the
     * runtime clip's verbatim track, and preserved through display-lane remaps
     * (normalizeToZones packs sparse authored tracks onto contiguous display
     * lanes; expanded sub-comp children get synthetic display rows). Lane edits
     * must persist THIS space — writing a display-lane number into a sparse file
     * re-targets the wrong track. For an expanded child the value is in its OWN
     * source file's coordinate space, not the host timeline's.
     */
    authoredTrack?: number;
    /** Resolved z-index for stacking-aware timeline ordering. */
    zIndex?: number;
    /** True when the effective z-index was authored inline or through CSS, not auto. */
    hasExplicitZIndex?: boolean;
    /** Canonical CSS stacking context this element's z-index participates in. */
    stackingContextId?: string | null;
    /** Nearest parent composition context, matching RuntimeTimelineClip. */
    parentCompositionId?: string | null;
    /** Composition ancestry from root to nearest parent, matching RuntimeTimelineClip. */
    compositionAncestors?: string[];
    domId?: string;
    /** Stable `data-hf-id` attribute value — used as primary patch target when present */
    hfId?: string;
    /** Best-effort selector used when patching source HTML back from timeline edits */
    selector?: string;
    /** Zero-based occurrence index for non-unique selectors */
    selectorIndex?: number;
    /** Source composition file that owns this element, when known */
    sourceFile?: string;
    src?: string;
    playbackStart?: number;
    playbackStartAttr?: "media-start" | "playback-start";
    playbackRate?: number;
    sourceDuration?: number;
    volume?: number;
    /** Path from data-composition-src — identifies sub-composition elements */
    compositionSrc?: string;
    /** Whether this row came from authored clip timing or Studio's full-duration layer fallback. */
    timingSource?: "authored" | "implicit";
    /** Set by data-timeline-locked on the host element — disables move and trim in Studio. */
    timelineLocked?: boolean;
    /** Set by data-hidden on the host element — hides the clip in preview and render. */
    hidden?: boolean;
    /** Value of data-timeline-role attribute — used to identify music vs. voiceover. */
    timelineRole?: string;
    /**
     * Set by useExpandedTimelineElements on an inline-expanded sub-composition
     * child: the absolute master-timeline start of the sub-comp host the child
     * lives in. Presence marks the element as expanded; edits subtract it to get
     * the child's local (sourceFile-relative) time. Works at any nesting depth.
     */
    expandedParentStart?: number;
}
type ZoomMode = "fit" | "manual";
type TimelineTool = "select" | "razor";
interface SelectElementOptions {
    preserveSet?: boolean;
}
interface PlayerState {
    isPlaying: boolean;
    currentTime: number;
    duration: number;
    timelineReady: boolean;
    /** True while a beat dot is being dragged — hides the playhead guideline. */
    beatDragging: boolean;
    elements: TimelineElement[];
    selectedElementId: string | null;
    playbackRate: number;
    audioMuted: boolean;
    loopEnabled: boolean;
    /** Timeline zoom: 'fit' auto-scales to viewport, 'manual' uses manualZoomPercent */
    zoomMode: ZoomMode;
    /** Timeline zoom percent relative to the fit width when in manual mode */
    manualZoomPercent: number;
    /**
     * Bumped on every live z-index edit (handleDomZIndexReorderCommit apply AND
     * rollback). Flashless z commits (skipReload) never reload the iframe or
     * bump refreshKey, so DOM-derived views (the Layers panel's z-sorted tree)
     * subscribe to this to re-read the live DOM while playback is paused.
     */
    zEditVersion: number;
    /** Work-area in-point (seconds). When set, loop starts here and A jumps here. */
    inPoint: number | null;
    /** Work-area out-point (seconds). When set, loop ends here and E jumps here. */
    outPoint: number | null;
    activeTool: TimelineTool;
    setActiveTool: (tool: TimelineTool) => void;
    /** Set of selected keyframe keys in format `${elementId}:${percentage}`. */
    selectedKeyframes: Set<string>;
    toggleSelectedKeyframe: (key: string) => void;
    clearSelectedKeyframes: () => void;
    /** Tween-relative percentage of the last-clicked keyframe diamond. Operations
     *  (drag, resize, rotate) target this instead of recomputing from playhead. */
    activeKeyframePct: number | null;
    setActiveKeyframePct: (pct: number | null) => void;
    /** Motion-path "set destination" mode. Armed from the preview toolbar (replaces
     *  the old double-click-on-canvas UX); while armed, one canvas click places the
     *  new path's destination. `available` is published by MotionPathOverlay so the
     *  toolbar shows the button only when the selected element can take a path. */
    motionPathArmed: boolean;
    setMotionPathArmed: (armed: boolean) => void;
    motionPathCreateAvailable: boolean;
    setMotionPathCreateAvailable: (available: boolean) => void;
    /** Global toggle for the "Add keyframe" diamond in the timeline toolbar (#1808).
     *  When false, a manual drag/resize/rotate edit on an element that already has
     *  a live tween shifts every keyframe by the edit's delta (preserving the
     *  animation's shape) instead of inserting/updating a keyframe at the playhead. */
    autoKeyframeEnabled: boolean;
    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;
    /** Transport + ruler readout: timecode ("time") or frame number ("frame"). */
    timeDisplayMode: "time" | "frame";
    setTimeDisplayMode: (mode: "time" | "frame") => 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;
    clearSelection: () => void;
    /** Keyframe data per element id, populated from parsed GSAP animations. */
    keyframeCache: Map<string, KeyframeCacheEntry>;
    setKeyframeCache: (elementId: string, data: KeyframeCacheEntry | undefined) => void;
    setIsPlaying: (playing: boolean) => void;
    setCurrentTime: (time: number) => void;
    setDuration: (duration: number) => void;
    setPlaybackRate: (rate: number) => void;
    setAudioMuted: (muted: boolean) => void;
    setLoopEnabled: (enabled: boolean) => void;
    setTimelineReady: (ready: boolean) => void;
    setBeatDragging: (dragging: boolean) => void;
    setElements: (elements: TimelineElement[]) => 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;
    setZoomMode: (mode: ZoomMode) => void;
    setManualZoomPercent: (percent: number) => void;
    bumpZEditVersion: () => void;
    setInPoint: (time: number | null) => void;
    setOutPoint: (time: number | null) => void;
    reset: () => void;
    /**
     * Request a seek from outside the player loop (e.g. Layers panel).
     * useTimelinePlayer subscribes and calls adapter.seek() + liveTime.notify().
     */
    requestedSeekTime: number | null;
    requestSeek: (time: number) => void;
    clearSeekRequest: () => void;
    /**
     * Request the timeline to scroll a clip into view (e.g. clicking an
     * already-added asset card in the sidebar). Consumed and cleared by
     * useTimelineRevealClip. The nonce makes repeat requests for the same
     * clip observable so a second click re-reveals after the user scrolls away.
     */
    clipRevealRequest: {
        elementId: string;
        nonce: number;
    } | null;
    requestClipReveal: (elementId: string) => void;
    clearClipRevealRequest: () => void;
    lintFindingsByElement: Map<string, {
        count: number;
        messages: string[];
    }>;
    setLintFindingsByElement: (map: Map<string, {
        count: number;
        messages: string[];
    }>) => void;
    beatAnalysis: MusicBeatAnalysis | null;
    setBeatAnalysis: (analysis: MusicBeatAnalysis | null) => void;
    /** User edits (add/move/delete) layered over the detected beat grid. */
    beatEdits: BeatEditState | null;
    setBeatEdits: (edits: BeatEditState | null) => void;
    /** Undo/redo stacks for beat edits (in-memory, session-only). */
    beatUndo: BeatHistoryEntry[];
    beatRedo: BeatHistoryEntry[];
    commitBeatEdits: (next: BeatEditState | null, label: string) => void;
    undoBeatEdits: () => string | null;
    redoBeatEdits: () => string | null;
    resetBeatHistory: () => void;
    beatPersist: (() => void) | null;
    setBeatPersist: (fn: (() => void) | null) => void;
    clipManifest: ClipManifestClip[] | null;
    setClipManifest: (clips: ClipManifestClip[] | null) => void;
    clipParentMap: Map<string, string>;
    setClipParentMap: (map: Map<string, string>) => void;
    /**
     * Sub-composition DOM descendants (groups + their children) that have no
     * `data-start`, so they're absent from the clip manifest/tree. Collected
     * studio-side from the live preview so the timeline can expand a sub-comp row
     * to show its DOM-only children. Keeps the manifest lean (timed clips only).
     */
    domClipChildren: DomClipChild[];
    setDomClipChildren: (children: DomClipChild[]) => void;
}
/** A sub-comp DOM-only timeline child (no data-start) and its nesting context. */
interface DomClipChild {
    id: string;
    parentId: string;
    /** The manifest sub-comp host clip id this descendant ultimately lives under. */
    hostId: string;
    label: string;
    stackingContextId: string;
}
interface BeatHistoryEntry {
    restore: BeatEditState | null;
    at: number;
    label: string;
}
type TimeListener = (time: number) => void;
declare const liveTime: {
    notify: (t: number) => void;
    subscribe: (cb: TimeListener) => () => boolean;
};
declare const usePlayerStore: zustand.UseBoundStore<zustand.StoreApi<PlayerState>>;

/**
 * Source Patcher — Maps visual property edits back to source HTML files.
 * Handles inline style updates, attribute changes, and text content.
 */
interface PatchOperation {
    type: "inline-style" | "attribute" | "text-content" | "html-attribute";
    property: string;
    value: string | null;
    childSelector?: string;
    childIndex?: number;
}
interface PatchTarget {
    id?: string | null;
    hfId?: string;
    selector?: string;
    selectorIndex?: number;
}
/**
 * Find which source file contains an element by its ID.
 */
declare function resolveSourceFile(elementId: string | null, selector: string, files: Record<string, string>): string | null;
/**
 * Apply a patch operation to an HTML source file.
 */
declare function applyPatch(html: string, elementId: string, op: PatchOperation): string;

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 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[];
}

type TimelineMoveOperation = "timing" | "lane-reorder" | "track-insert";

/**
 * Shared callback signatures for timeline editing operations.
 * Used by NLELayout, Timeline, and any component that passes through
 * the standard set of timeline mutation handlers.
 */
interface TimelineDropCallbacks {
    onFileDrop?: (files: File[], placement?: {
        start: number;
        track: number;
    }) => Promise<void> | void;
    onAssetDrop?: (assetPath: string, placement: {
        start: number;
        track: number;
    }) => Promise<void> | void;
    onBlockDrop?: (blockName: string, placement: {
        start: number;
        track: number;
    }) => Promise<void> | void;
}
interface TimelineEditCallbacks {
    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; `coalesceMs`
     *  widens that entry's fold window when a server round-trip separates the
     *  gesture's records (per-gesture-unique keys keep the fold gesture-scoped). */
    onMoveElements?: (edits: Array<{
        element: TimelineElement;
        updates: Pick<TimelineElement, "start" | "track">;
    }>, coalesceKey?: string, operation?: TimelineMoveOperation, coalesceMs?: number) => Promise<void> | void;
    onResizeElement?: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">) => Promise<void> | 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;
    onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
    onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
    onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
    onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
    onDeleteKeyframe?: (elementId: string, percentage: number) => void;
    onDeleteAllKeyframes?: (elementId: string) => void;
    onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
    onMoveKeyframeToPlayhead?: (elementId: string, percentage: number) => void;
    onMoveKeyframe?: (elementId: string, fromClipPercentage: number, toClipPercentage: number) => void;
    onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
}

interface TimelineTheme {
    shellBackground: string;
    shellBorder: string;
    rulerBorder: string;
    rowBackground: string;
    rowBorder: string;
    gutterBackground: string;
    gutterBorder: string;
    textPrimary: string;
    textSecondary: string;
    tickText: string;
    tickMajor: string;
    tickMinor: string;
    clipBackground: string;
    clipBackgroundActive: string;
    clipBorder: string;
    clipBorderHover: string;
    clipBorderActive: string;
    clipShadow: string;
    clipShadowHover: string;
    clipShadowActive: string;
    clipShadowDragging: string;
    handleColor: string;
    panelResizeSeam: string;
    panelResizeActive: string;
    clipRadius: string;
}

type TimelineEditOverrides = Pick<TimelineEditCallbacks, "onMoveElement" | "onMoveElements" | "onResizeElement" | "onResizeElements" | "onBlockedEditAttempt" | "onSplitElement">;

interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
    onSeek?: (time: number) => void;
    onDrillDown?: (element: TimelineElement) => void;
    renderClipContent?: (element: TimelineElement, style: {
        clip: string;
        label: string;
    }) => ReactNode;
    renderClipOverlay?: (element: TimelineElement) => ReactNode;
    onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
    onSelectElement?: (element: TimelineElement | null) => void;
    theme?: Partial<TimelineTheme>;
}

declare const Timeline: react.NamedExoticComponent<TimelineProps>;

interface VideoThumbnailProps {
    videoSrc: string;
    label: string;
    labelColor: string;
    duration?: number;
}
/**
 * Renders a film-strip of video frames extracted client-side via a hidden
 * <video> + <canvas>. Each frame is a fixed-width tile; frames repeat to
 * fill the clip width — matching ClipThumbnail's visual pattern.
 */
declare const VideoThumbnail: react.NamedExoticComponent<VideoThumbnailProps>;

interface CompositionThumbnailProps {
    previewUrl: string;
    label: string;
    labelColor: string;
    selector?: string;
    selectorIndex?: number;
    seekTime?: number;
    duration?: number;
    width?: number;
    height?: number;
}
declare const CompositionThumbnail: react.NamedExoticComponent<CompositionThumbnailProps>;

/**
 * Runtime iframe integration utilities.
 *
 * Handles the boundary between the studio host page and the preview iframe:
 * - Viewport normalisation on load
 * - Auto-healing missing data-composition-id attributes
 * - Unmuting media via postMessage
 * - Resolving the underlying <iframe> from any wrapper element
 * - Scanning the DOM for composition hosts the manifest missed
 *   (element-reference starts that the CDN runtime fails to resolve)
 */

/**
 * Resolve the underlying iframe from any host element. Supports:
 * - Direct `<iframe>` element (most common — studio's own `Player.tsx`)
 * - Custom elements (e.g. `<hyperframes-player>`) whose shadow DOM contains an iframe
 * - Wrapper elements whose light DOM contains a descendant iframe
 *
 * Exported so web-component consumers can pre-resolve the iframe before
 * assigning it to `iframeRef` returned by `useTimelinePlayer`. Returns `null`
 * when the element has no associated iframe yet.
 *
 * @example
 * ```tsx
 * const { iframeRef } = useTimelinePlayer();
 * const playerElRef = useRef<HyperframesPlayer>(null);
 *
 * useEffect(() => {
 *   iframeRef.current = resolveIframe(playerElRef.current);
 * }, [iframeRef]);
 * ```
 */
declare function resolveIframe(el: Element | null): HTMLIFrameElement | null;

declare function useTimelinePlayer(): {
    iframeRef: react.RefObject<HTMLIFrameElement | null>;
    play: () => void;
    pause: () => void;
    togglePlay: () => void;
    seek: (time: number, options?: {
        keepPlaying?: boolean;
    }) => boolean;
    onIframeLoad: () => void;
    refreshPlayer: () => void;
    saveSeekPosition: () => void;
    resetPlayer: () => void;
};

declare function formatTime(time: number): string;

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, coalesceMs?: number) => 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;
    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 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;
    iframeRef: RefObject<HTMLIFrameElement | null>;
    onIframeLoad: () => void;
    onCompositionLoadingChange?: (loading: boolean) => void;
    portrait?: boolean;
    directUrl?: string;
    suppressLoadingOverlay?: boolean;
    onStageRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
    /** Reports the authored composition size measured from the loaded preview. */
    onCompositionSizeChange?: (size: PreviewCompositionSize | null) => void;
}
interface PreviewCompositionSize {
    width: number;
    height: number;
}
declare const NLEPreview: react.NamedExoticComponent<NLEPreviewProps>;

interface CompositionLevel {
    /** Unique id — "master" or composition file path */
    id: string;
    /** Display label — "Master" or filename without extension */
    label: string;
    /** Preview URL for this composition level */
    previewUrl: string;
}
interface CompositionBreadcrumbProps {
    stack: CompositionLevel[];
    onNavigate: (index: number) => void;
}
declare function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcrumbProps): react_jsx_runtime.JSX.Element | null;

interface SourceEditorProps {
    content: string;
    filePath?: string;
    language?: string;
    onChange?: (content: string) => void;
    readOnly?: boolean;
    revealOffset?: number | null;
}
declare const SourceEditor: react.NamedExoticComponent<SourceEditorProps>;

interface ImportedFontAsset {
    family: string;
    path: string;
    url: string;
}

interface BackgroundRemovalProgress {
    status: "processing" | "complete" | "failed";
    progress: number;
    stage?: string;
    outputPath?: string;
    backgroundOutputPath?: string;
    error?: string;
    provider?: string;
}
interface BackgroundRemovalResult {
    outputPath: string;
    backgroundOutputPath?: string;
    provider?: string;
}
interface PropertyPanelProps {
    projectId: string;
    projectDir: string | null;
    assets: string[];
    element: DomEditSelection | null;
    multiSelectCount?: number;
    copiedAgentPrompt: boolean;
    onClearSelection: () => void;
    onUngroup?: () => void;
    onSetStyle: (prop: string, value: string) => void | Promise<void>;
    onSetAttribute: (attr: string, value: string) => void | Promise<void>;
    onSetAttributeLive: (attr: string, value: string | null) => void | Promise<void>;
    onApplyColorGradingScope?: (scope: "source-file" | "project", value: string | null) => Promise<{
        changedFiles: number;
        changedElements: number;
    }>;
    onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
    onRemoveBackground?: (inputPath: string, options: {
        createBackgroundPlate?: boolean;
        quality?: "fast" | "balanced" | "best";
        onProgress?: (progress: BackgroundRemovalProgress) => void;
    }) => Promise<BackgroundRemovalResult>;
    onSetManualOffset: (element: DomEditSelection, next: {
        x: number;
        y: number;
    }) => void;
    onSetManualSize: (element: DomEditSelection, next: {
        width: number;
        height: number;
    }) => void;
    onSetManualRotation: (element: DomEditSelection, next: {
        angle: number;
    }) => void;
    onSetText: (value: string, fieldKey?: string) => void;
    onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
    onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
    onRemoveTextField: (fieldKey: string) => void;
    onAskAgent: () => void;
    onToggleElementHidden?: (elementKey: string, hidden: boolean) => void | Promise<void>;
    onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
    fontAssets?: ImportedFontAsset[];
    onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
    previewIframeRef?: RefObject<HTMLIFrameElement | null>;
    gsapAnimations?: GsapAnimation[];
    gsapMultipleTimelines?: boolean;
    gsapUnsupportedTimelinePattern?: boolean;
    onUpdateGsapProperty?: (animId: string, prop: string, value: number | string) => void;
    onUpdateGsapMeta?: (animId: string, updates: {
        duration?: number;
        ease?: string;
        position?: number;
    }) => void;
    onDeleteGsapAnimation?: (animId: string) => void;
    onAddGsapProperty?: (animId: string, prop: string) => void;
    onRemoveGsapProperty?: (animId: string, prop: string) => void;
    onUpdateGsapFromProperty?: (animId: string, prop: string, value: number | string) => void;
    onAddGsapFromProperty?: (animId: string, prop: string) => void;
    onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
    onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
    onSetArcPath?: (animId: string, config: {
        enabled: boolean;
        autoRotate?: boolean | number;
        segments?: ArcPathSegment[];
    }) => void;
    onUpdateArcSegment?: (animId: string, segmentIndex: number, update: Partial<ArcPathSegment>) => void;
    onUnroll?: (animationId: string) => void;
    onAddKeyframe?: (animationId: string, percentage: number, property: string, value: number | string) => void;
    onRemoveKeyframe?: (animationId: string, percentage: number) => void;
    onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
    onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
    onConvertToKeyframes?: (animationId: string, duration?: number) => void;
    onCommitAnimatedProperty?: (selection: DomEditSelection, property: string, value: number | string) => Promise<void>;
    onCommitAnimatedProperties?: (selection: DomEditSelection, props: Record<string, number | string>) => Promise<void>;
    onSeekToTime?: (time: number) => void;
    recordingState?: "idle" | "recording" | "preview";
    recordingDuration?: number;
    onToggleRecording?: () => void;
}

interface LocalFontData {
    family: string;
    fullName?: string;
    postscriptName?: string;
    style?: string;
    blob?: () => Promise<Blob>;
}
declare global {
    interface Window {
        queryLocalFonts?: () => Promise<LocalFontData[]>;
    }
}

declare const PropertyPanel: react.NamedExoticComponent<PropertyPanelProps>;

interface FileTreeProps {
    files: string[];
    activeFile: string | null;
    onSelectFile: (path: string) => void;
    onCreateFile?: (path: string) => void;
    onCreateFolder?: (path: string) => void;
    onDeleteFile?: (path: string) => void;
    onRenameFile?: (oldPath: string, newPath: string) => void;
    onDuplicateFile?: (path: string) => void;
    onMoveFile?: (oldPath: string, newPath: string) => void;
    onImportFiles?: (files: FileList, dir?: string) => void;
    lintFindingsByFile?: Map<string, {
        count: number;
        messages: string[];
    }>;
}
declare const FileTree: react.NamedExoticComponent<FileTreeProps>;

declare function StudioApp(): react_jsx_runtime.JSX.Element;

interface PickedElement {
    id: string | null;
    tagName: string;
    selector: string;
    label: string;
    boundingBox: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    textContent: string | null;
    src: string | null;
    dataAttributes: Record<string, string>;
    computedStyles: Record<string, string>;
}
interface UseElementPickerReturn {
    isPickMode: boolean;
    pickedElement: PickedElement | null;
    enablePick: () => void;
    disablePick: () => void;
    clearPick: () => void;
    /** Update a CSS property on the picked element live + persist to source */
    setStyle: (prop: string, value: string) => void;
    /** Update a data attribute on the picked element + persist to source */
    setDataAttr: (attr: string, value: string) => void;
    /** Update the text content of the picked element + persist to source */
    setTextContent: (text: string) => void;
    /** Override the active iframe (for zoomed canvas view). Pass null to restore primary. */
    setActiveIframe: (el: HTMLIFrameElement | null) => void;
    /** Ref that always points to the active iframe (focused canvas frame or preview panel) */
    activeIframeRef: React.RefObject<HTMLIFrameElement | null>;
}
interface PickerOptions {
    /** Workspace files for source patching */
    workspaceFiles?: Record<string, string>;
    /** Callback to sync patched files to the project */
    onSyncFiles?: (files: Record<string, string>) => void;
}
/**
 * Hook for element picking via the HyperFrame runtime's picker API.
 * Communicates with the iframe via postMessage.
 */
declare function useElementPicker(iframeRef: React.RefObject<HTMLIFrameElement | null>, options?: PickerOptions): UseElementPickerReturn;

/**
 * HTML Editor — Utility functions for parsing and manipulating HyperFrame HTML source.
 */
/**
 * Parse a CSS inline style string into a key-value map.
 * e.g. "opacity: 0.5; transform: matrix(1,0,0,1,0,0)" →
 *      { opacity: "0.5", transform: "matrix(1,0,0,1,0,0)" }
 */
declare function parseStyleString(style: string): Record<string, string>;
/**
 * Merge `newStyles` into an opening tag string's `style` attribute.
 * - New values win over existing ones.
 * - If no `style` attribute is present, one is added before the closing `>`.
 */
declare function mergeStyleIntoTag(tag: string, newStyles: string): string;
/**
 * Find the full element block (opening tag through closing tag) in the source.
 * Uses quote-aware scanning to handle attributes containing >.
 * Uses depth counting to handle nested same-name tags.
 */
declare function findElementBlock(html: string, elementId: string): {
    start: number;
    end: number;
    openTag: string;
    tagName: string;
    indent: string;
    innerContent: string;
    isSelfClosing: boolean;
} | null;

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 };