@hyperframes/studio 0.8.50 → 0.8.52

package/dist/assets/{index-DUAIWxkI.js → index-Du5x7KUR.js}

@@ -1 +1 @@
-import{g as P}from"./index-n2ml4tUn.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-DocJlW2v.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/index.d.ts

@@ -1,12 +1,280 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ButtonHTMLAttributes, ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import * as node_modules_cn_dist_types from 'node_modules/cn/dist/types';
+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 * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
 import { MusicBeatAnalysis } from '@hyperframes/core/beats';
 import { GsapAnimation as GsapAnimation$1, ArcPathSegment } from '@hyperframes/parsers/gsap-parser';
+import { CanvasResolution } from '@hyperframes/parsers';
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+/** Forces one interactive look for a gallery shot. CSS-only; see the header. */
+type PreviewState = "hover" | "active" | "focus";
+interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    "data-preview-state"?: PreviewState;
+}
+interface ButtonProps extends ButtonBaseProps {
+    loading?: boolean;
+    icon?: ReactNode;
+}
+/**
+ * Shared by Button and IconButton. `disabled:` keeps pointer events alive so a
+ * wrapping Tooltip can still explain why the control is disabled.
+ */
+declare const buttonBase: string;
+/**
+ * One entry per variant. The `data-[preview-state=…]` half of each string
+ * repeats the `hover:` and `active:` half exactly; the test pairs them.
+ */
+declare const buttonVariants: Record<ButtonVariant, string>;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface IconButtonProps extends ButtonBaseProps {
+    icon: ReactNode;
+    "aria-label": string;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Base UI lets `className` be a function of the part's state. Studio's parts
+ * merge a string with `cn`, so the string form is the one they accept.
+ */
+type StyledProps$1<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, "className"> & {
+    className?: string;
+};
+/**
+ * Groups a tab list with its panels. Uncontrolled by default; pass `value` and
+ * `onValueChange` for a strip whose selection lives in a store.
+ */
+declare function Tabs(props: ComponentPropsWithoutRef<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
+/** The strip. Give it an `aria-label`: a tablist with no name is unlabelled. */
+declare function TabsList({ className, ...props }: StyledProps$1<typeof Tabs$1.List>): react_jsx_runtime.JSX.Element;
+interface TabProps extends StyledProps$1<typeof Tabs$1.Tab> {
+    value: string;
+    "data-preview-state"?: PreviewState;
+}
+/**
+ * aria-selected drives the selected look (Base UI sets it) so assistive tech
+ * and sighted users match. data-preview-state is for gallery shots only.
+ */
+declare function Tab({ value, className, ...props }: TabProps): react_jsx_runtime.JSX.Element;
+/** The panel for one tab. Base UI wires `aria-labelledby` back to its tab. */
+declare function TabPanel({ className, ...props }: StyledProps$1<typeof Tabs$1.Panel>): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    label: string;
+    /** A single element, wrapped in a box-less span so a disabled one still gets hover. */
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+    /** Hover delay in ms. */
+    delay?: number;
+    side?: "top" | "bottom" | "left" | "right";
+}
+declare function Tooltip({ label, children, delay, side }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Studio's tailwind-merge config: teaches it the two scales `theme.css`
+ * invents (`text-step-*`, `ctl`/`ctl-sm`/`ctl-lg`) so overrides replace, not stack.
+ */
+declare const cn: node_modules_cn_dist_types.CnFunction;
+
+/**
+ * Base UI lets `className` be a function of the part's state. Studio's parts
+ * merge a string with `cn`, so the string form is the one they accept.
+ */
+type StyledProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, "className"> & {
+    className?: string;
+};
+/** Forces the settled open look for a gallery shot; CSS-only, open state stays controlled. */
+type PopupPreviewState = "open";
+/** Where the portal puts the popup. `null` keeps it inline, next to its trigger. */
+type PortalContainer$1 = ComponentPropsWithoutRef<typeof Menu$1.Portal>["container"];
+/**
+ * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
+ * `data-starting-style`/`data-ending-style` are Base UI's transition attributes.
+ */
+declare const popupSurface: string;
+type MenuItemTone = "default" | "danger";
+interface PositionedProps {
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    /** Portal target. Pass the shadow root when the trigger lives in one. */
+    container?: PortalContainer$1;
+    /** Names the popup for assistive tech. A menu with no name is unlabelled. */
+    "aria-label"?: string;
+    className?: string;
+    "data-preview-state"?: PopupPreviewState;
+}
+interface MenuProps extends PositionedProps, Omit<ComponentPropsWithoutRef<typeof Menu$1.Root>, "children"> {
+    /** A single element. It becomes the trigger; no wrapper is added around it. */
+    trigger: ReactElement;
+    /** The items: `MenuItem`, `MenuRadioGroup`, `MenuSeparator`. */
+    children: ReactNode;
+}
+/**
+ * A menu opened by its trigger. Uncontrolled by default; pass `open` and
+ * `onOpenChange` for a menu whose state lives in a store.
+ */
+declare function Menu({ trigger, children, side, align, sideOffset, container, className, "aria-label": ariaLabel, "data-preview-state": previewState, ...root }: MenuProps): react_jsx_runtime.JSX.Element;
+interface ContextMenuProps extends PositionedProps, Omit<ComponentPropsWithoutRef<typeof ContextMenu$1.Root>, "children"> {
+    /**
+     * The right-clickable area, as the caller's own element. Its children are
+     * kept: the trigger renders that element rather than wrapping it.
+     */
+    trigger: ReactElement;
+    children: ReactNode;
+}
+/** Opened by right click or long press at the pointer, so `side` and `align` are not offered. */
+declare function ContextMenu({ trigger, children, container, className, "aria-label": ariaLabel, "data-preview-state": previewState, ...root }: Omit<ContextMenuProps, "side" | "align" | "sideOffset">): react_jsx_runtime.JSX.Element;
+/** Keyboard shortcut hint, mono and tabular; exported for hints that are not a plain string. */
+declare function MenuShortcut({ className, ...props }: StyledProps<"span">): react_jsx_runtime.JSX.Element;
+interface MenuItemProps extends StyledProps<typeof Menu$1.Item> {
+    /** Rendered as a dim mono hint on the trailing edge. Decorative. */
+    shortcut?: string;
+    /** `danger` for a destructive action (Delete, Remove). */
+    tone?: MenuItemTone;
+    "data-preview-state"?: "hover";
+}
+/** One action. `disabled` items are skipped by the arrow keys, not just dimmed. */
+declare function MenuItem({ shortcut, tone, className, children, ...props }: MenuItemProps): react_jsx_runtime.JSX.Element;
+/** Single-choice group; selection is `aria-checked` on each item, which the dot indicator draws from. */
+declare function MenuRadioGroup(props: ComponentPropsWithoutRef<typeof Menu$1.RadioGroup>): react_jsx_runtime.JSX.Element;
+interface MenuRadioItemProps extends StyledProps<typeof Menu$1.RadioItem> {
+    "data-preview-state"?: "hover";
+}
+/** One choice in a `MenuRadioGroup`. The dot renders only while it is checked. */
+declare function MenuRadioItem({ className, children, ...props }: MenuRadioItemProps): react_jsx_runtime.JSX.Element;
+/** A hairline between two groups of items. */
+declare function MenuSeparator({ className, ...props }: StyledProps<typeof Menu$1.Separator>): react_jsx_runtime.JSX.Element;
+
+type PortalContainer = ComponentPropsWithoutRef<typeof Popover$1.Portal>["container"];
+interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Root>, "children"> {
+    /** A single element. It becomes the trigger; no wrapper is added around it. */
+    trigger: ReactElement;
+    /** Arbitrary content. The popover owns none of its keys. */
+    children: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    /** Portal target. Pass the shadow root when the trigger lives in one. */
+    container?: PortalContainer;
+    /** Names the popup for assistive tech. */
+    "aria-label"?: string;
+    /**
+     * What to focus on open. Defaults to Base UI's behaviour (the first tabbable
+     * element), which is what a rename field wants.
+     */
+    initialFocus?: ComponentPropsWithoutRef<typeof Popover$1.Popup>["initialFocus"];
+    className?: string;
+    "data-preview-state"?: PopupPreviewState;
+}
+declare function Popover({ trigger, children, side, align, sideOffset, container, className, initialFocus, "aria-label": ariaLabel, "data-preview-state": previewState, ...root }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared field look (also used by NumberField and Select). Each interactive state is written
+ * twice, real and `data-[preview-state=...]`; `valueControls.test.tsx` asserts the lists match.
+ */
+declare const fieldBase: string;
+/** The text itself, inside the box. The box owns the border and the ring. */
+declare const fieldText: string;
+interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "value" | "onChange" | "className"> {
+    /** The committed value. A draft lives inside until Enter or blur. */
+    value: string;
+    /** Called with the draft on Enter and on blur, only when it really changed. */
+    onCommit: (next: string) => void;
+    /** Called once per committed change, for design-input telemetry. */
+    onTrack?: () => void;
+    /** Marks the field invalid: red boundary and `aria-invalid`. */
+    invalid?: boolean;
+    className?: string;
+    "data-preview-state"?: PreviewState;
+}
+declare function Input({ value, onCommit, onTrack, invalid, disabled, className, "data-preview-state": previewState, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface NumberFieldProps {
+    /** Accessible name. The inspector's row label is the usual one. */
+    label: string;
+    /** The committed value. */
+    value: number;
+    /** Called when a commit boundary produces a value different from `value`. */
+    onCommit: (next: number) => void;
+    /** Called once per committed change, for design-input telemetry. */
+    onTrack?: () => void;
+    /** Rendered beside the number: "px", "%", "deg". Never part of the text. */
+    unit?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+    "data-preview-state"?: PreviewState;
+}
+declare function NumberField({ label, value, onCommit, onTrack, unit, min, max, step, disabled, className, "data-preview-state": previewState, }: NumberFieldProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    label: string;
+    value: string;
+}
+interface SelectProps {
+    /** Accessible name for the trigger. */
+    label: string;
+    value: string;
+    options: SelectOption[];
+    /** Called when a different option is chosen. */
+    onCommit: (next: string) => void;
+    /** Called once per committed change, for design-input telemetry. */
+    onTrack?: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-preview-state"?: PreviewState;
+}
+declare function Select({ label, value, options, onCommit, onTrack, disabled, className, "data-preview-state": previewState, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface SliderProps {
+    /** Accessible name for the thumb. The inspector's row label is the usual one. */
+    label: string;
+    /** The committed value. */
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    /** Every intermediate value while dragging or stepping. Not a commit. */
+    onPreview?: (next: number) => void;
+    /** Called at a commit boundary when the value really changed. */
+    onCommit: (next: number) => void;
+    /** Called once per commit boundary, for design-input telemetry. */
+    onTrack?: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-preview-state"?: PreviewState;
+}
+declare function Slider({ label, value, min, max, step, onPreview, onCommit, onTrack, disabled, className, "data-preview-state": previewState, }: SliderProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps {
+    /** Accessible name. */
+    label: string;
+    checked: boolean;
+    /** Called on every flip. */
+    onCommit: (next: boolean) => void;
+    /** Called once per flip, for design-input telemetry. */
+    onTrack?: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-preview-state"?: PreviewState;
+}
+declare function Toggle({ label, checked, onCommit, onTrack, disabled, className, "data-preview-state": previewState, }: ToggleProps): react_jsx_runtime.JSX.Element;
 
 interface PlayerProps {
     projectId?: string;
@@ -587,10 +855,6 @@ interface BeatHistoryEntry {
 }
 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" | "rich-text";
     property: string;
@@ -724,20 +988,25 @@ interface TimelinePropertyGroupKeyframeToggle {
     properties: Record<string, number | string>;
     remove: boolean;
 }
+/** Where an outside drop lands; `insertRow` opens a new track at that row boundary of `trackOrder`. */
+type TimelineDropPlacement = {
+    start: number;
+    track: number;
+} & ({
+    insertRow?: null;
+    trackOrder?: undefined;
+} | {
+    insertRow: number;
+    trackOrder: readonly number[];
+});
 /**
  * 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;
+    onFileDrop?: (files: File[], placement?: TimelineDropPlacement) => Promise<void> | void;
+    onAssetDrop?: (assetPath: string, placement: TimelineDropPlacement) => Promise<void> | void;
     onBlockDrop?: (blockName: string, placement: {
         start: number;
         track: number;
@@ -840,7 +1109,10 @@ interface TimelineClipRenderContext {
 interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
     /** Project-scoped reset boundary; soft source refreshes retain the same epoch. */
     sessionEpoch?: number;
-    onSeek?: (time: number) => void;
+    /** keepPlaying: true preserves the current play state across the seek. */
+    onSeek?: (time: number, options?: {
+        keepPlaying?: boolean;
+    }) => void;
     onDrillDown?: (element: TimelineElement) => void;
     renderClipContent?: (element: TimelineElement, style: {
         clip: string;
@@ -982,14 +1254,11 @@ 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;
@@ -1013,9 +1282,13 @@ interface EditorShellProps extends TimelineEditCallbackDeps {
     isGestureRecording?: boolean;
     recordingState?: GestureRecordingState;
     onToggleRecording?: () => void;
+    /**
+     * Host layer over the preview, positioned with `usePreviewCompositionRect`. Hidden in
+     * fullscreen and during a block preview; below the selection overlay past z-index 10.
+     */
     gestureOverlay?: ReactNode;
 }
-declare function EditorShell({ left, right, hidden, timelineToolbar, renderClipContent, handleTimelineElementDelete, handleTimelineAssetDrop, handleTimelineBlockDrop, handleTimelineCompositionDrop, handlePreviewBlockDrop, handleTimelineFileDrop, handleTimelineElementMove, handleTimelineElementsMove, handleTimelineElementResize, handleTimelineGroupResize, handleToggleTrackHidden, setAudioGroupAttribute, handleGroupClips, setElementFxAttribute, handleBlockedTimelineEdit, handleTimelineElementSplit, handleRazorSplit, handleRazorSplitAll, onCopyClip, onPasteClip, onDuplicateClip, canPasteClip, setCompIdToSrc, setCompositionLoading, shouldShowMotionPath, shouldShowSelectedDomBounds, isGestureRecording, recordingState, onToggleRecording, blockPreview, gestureOverlay, }: EditorShellProps): react_jsx_runtime.JSX.Element;
+declare function EditorShell({ left, right, timelineToolbar, renderClipContent, handleTimelineElementDelete, handleTimelineAssetDrop, handleTimelineBlockDrop, handleTimelineCompositionDrop, handlePreviewBlockDrop, handleTimelineFileDrop, handleTimelineElementMove, handleTimelineElementsMove, handleTimelineElementResize, handleTimelineGroupResize, handleToggleTrackHidden, setAudioGroupAttribute, handleGroupClips, setElementFxAttribute, handleBlockedTimelineEdit, handleTimelineElementSplit, handleRazorSplit, handleRazorSplitAll, onCopyClip, onPasteClip, onDuplicateClip, canPasteClip, setCompIdToSrc, setCompositionLoading, shouldShowMotionPath, shouldShowSelectedDomBounds, isGestureRecording, recordingState, onToggleRecording, blockPreview, gestureOverlay, }: EditorShellProps): react_jsx_runtime.JSX.Element;
 
 interface NLEPreviewProps {
     projectId: string;
@@ -1049,6 +1322,21 @@ interface CompositionBreadcrumbProps {
 }
 declare function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcrumbProps): react_jsx_runtime.JSX.Element | null;
 
+interface DomEditCompositionRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    scaleX: number;
+    scaleY: number;
+}
+
+/**
+ * Where the composition sits inside `overlayRef`, in overlay pixels, plus the scale from
+ * composition units to pixels. Follows the live preview iframe across reloads.
+ */
+declare function usePreviewCompositionRect(overlayRef: RefObject<HTMLDivElement | null>): DomEditCompositionRect;
+
 interface SourceEditorProps {
     content: string;
     filePath?: string;
@@ -1268,6 +1556,117 @@ interface AskAgentModalProps {
 }
 declare function AskAgentModal({ selectionLabel, contextPreview, anchorPoint, onSubmit, onClose, }: AskAgentModalProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * What the dev server knows about this machine's FFmpeg, as reported by
+ * `GET /api/environment/ffmpeg`. Studio asks when the Render panel opens so a
+ * missing encoder is a prompt with an install command, not a failed export an
+ * hour into the work.
+ */
+interface FfmpegStatus {
+    ok: boolean;
+    /** Short headline, e.g. "FFmpeg not found". Absent when ok. */
+    title?: string;
+    /** Why it cannot run, in the server's words. Absent when ok. */
+    detail?: string;
+    /** Prose remediation, including the manual route where one exists. */
+    hint?: string;
+    /** A single pasteable install command, when this platform has one. */
+    command?: string;
+}
+
+interface RenderJob {
+    id: string;
+    status: "rendering" | "complete" | "failed" | "cancelled";
+    progress: number;
+    stage?: string;
+    error?: string;
+    filename: string;
+    createdAt: number;
+    durationMs?: number;
+}
+type ResolutionPreset = CanvasResolution;
+interface StartRenderOptions {
+    fps?: number;
+    quality?: "draft" | "standard" | "high";
+    format?: "mp4" | "webm" | "mov";
+    /** `"auto"` (default) renders at the composition's authored dimensions. */
+    resolution?: ResolutionPreset | "auto";
+    /**
+     * Render a specific composition file. Omit it to render the composition the
+     * user currently has open — only the sidebar's per-composition Render button
+     * names one, because it renders a card the user is not looking at.
+     */
+    composition?: string;
+    /**
+     * Composition-variable overrides ({variableId: value}), forwarded to the
+     * render route and injected as window.__hfVariables — the same channel
+     * `hyperframes render --variables` uses.
+     */
+    variables?: Record<string, unknown>;
+}
+declare function useRenderQueue(projectId: string | null, activeCompPathRef: {
+    current: string | null;
+}): {
+    jobs: RenderJob[];
+    isRendering: boolean;
+    loadError: string | null;
+    actionError: string | null;
+    dismissActionError: () => void;
+    reloadRenders: () => Promise<void>;
+    deleteRender: (jobId: string) => Promise<void>;
+    cancelRender: (jobId: string) => Promise<void>;
+    clearCompleted: () => void;
+    startRender: (options: unknown) => Promise<void>;
+    ffmpeg: FfmpegStatus | null;
+    ffmpegMissing: boolean;
+    ffmpegChecking: boolean;
+    recheckFfmpeg: () => void;
+};
+
+interface CompositionDimensions {
+    width: number;
+    height: number;
+}
+type StartRenderHandler = (format: "mp4" | "webm" | "mov", quality: "draft" | "standard" | "high", resolution: ResolutionPreset | "auto", fps: 24 | 30 | 60) => void | Promise<void>;
+interface RenderQueueProps {
+    jobs: RenderJob[];
+    projectId: string;
+    onDelete: (jobId: string) => void;
+    onCancel?: (jobId: string) => void;
+    onClearCompleted: () => void;
+    onStartRender: StartRenderHandler;
+    isRendering: boolean;
+    /** History fetch failure (null when the last load succeeded). */
+    loadError?: string | null;
+    /** Retry a failed history load. */
+    onRetryLoad?: () => void;
+    /** Failure of a delete/cancel action, shown inline until dismissed. */
+    actionError?: string | null;
+    onDismissActionError?: () => void;
+    /**
+     * Authored dimensions of the active composition. Used to pick the
+     * matching preset (landscape / portrait / square) when the user selects
+     * a 1080p or 4K scale. `null` falls back to landscape (legacy default).
+     */
+    compositionDimensions?: CompositionDimensions | null;
+    /**
+     * Encoder availability, owned by useRenderQueue so the panel's Export button
+     * and the header's agree. `null` means "no answer", not "missing".
+     */
+    ffmpeg: FfmpegStatus | null;
+    ffmpegChecking: boolean;
+    onRecheckFfmpeg: () => void;
+}
+declare const RenderQueue: react.NamedExoticComponent<RenderQueueProps>;
+
+interface PersistedRenderSettings {
+    format: "mp4" | "webm" | "mov";
+    quality: "draft" | "standard" | "high";
+    fps: 24 | 30 | 60;
+}
+declare function getPersistedRenderSettings(): PersistedRenderSettings;
+declare function persistRenderSettings(format: PersistedRenderSettings["format"], quality: PersistedRenderSettings["quality"], fps: PersistedRenderSettings["fps"]): void;
+
 interface PickedElement {
     id: string | null;
     tagName: string;
@@ -1343,4 +1742,4 @@ declare function findElementBlock(html: string, elementId: string): {
     isSelfClosing: boolean;
 } | null;
 
-export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, CompositionBreadcrumb, type CompositionLevel, CompositionThumbnail, EditorShell, FileTree, NLEPreview, type PatchOperation, type PickedElement, Player, PlayerControls, PropertyPanel, SourceEditor, StudioApp, Timeline, type TimelineElement, VideoThumbnail, applyPatch, buildPickerAgentContextPreview, buildPickerAgentPrompt, findElementBlock, formatTime, liveTime, mergeStyleIntoTag, parseStyleString, resolveIframe, resolveSourceFile, useElementPicker, usePlayerStore, useTimelinePlayer };
+export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, Button, type ButtonSize, type ButtonVariant, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ContextMenu, EditorShell, type EditorShellProps, type FfmpegStatus, FileTree, IconButton, Input, type InputProps, Menu, MenuItem, type MenuItemTone, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, NLEPreview, NumberField, type NumberFieldProps, type PatchOperation, type PersistedRenderSettings, type PickedElement, Player, PlayerControls, Popover, type PopupPreviewState, type DomEditCompositionRect as PreviewCompositionRect, type PreviewState, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, Select, type SelectOption, type SelectProps, Slider, type SliderProps, SourceEditor, type StartRenderOptions, StudioApp, Tab, TabPanel, Tabs, TabsList, Timeline, type TimelineElement, Toggle, type ToggleProps, Tooltip, VideoThumbnail, applyPatch, buildPickerAgentContextPreview, buildPickerAgentPrompt, buttonBase, buttonVariants, cn, fieldBase, fieldText, findElementBlock, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, popupSurface, resolveIframe, resolveSourceFile, useElementPicker, usePlayerStore, usePreviewCompositionRect, useRenderQueue, 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-n2ml4tUn.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-pO6p0H27.css">
+    <script type="module" crossorigin src="/assets/index-DocJlW2v.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CxAu_Okg.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>