@hyperframes/studio 0.8.58 → 0.8.60

package/src/components/nle/AudioMeterStrip.tsx

@@ -0,0 +1,430 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type PointerEvent as ReactPointerEvent,
+  type Ref,
+  type RefObject,
+} from "react";
+import {
+  AUDIO_GAIN_FADER_MIN,
+  AUDIO_GAIN_FADER_MAX,
+  audioGainToFaderPosition,
+  audioFaderPositionToGain,
+  audioGainToText,
+  formatAudioGain,
+} from "@hyperframes/core/audio-gain";
+import type { StereoLevel } from "@hyperframes/core/runtime/levelTap";
+import { usePlayerStore } from "../../player";
+import { clampNumber } from "../../utils/studioHelpers";
+import { useAudioMetersVisible } from "../../utils/audioMeterVisibility";
+import { useStudioShellContext } from "../../contexts/StudioContext";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import {
+  METER_DB_MARKS,
+  useProjectHasAudio,
+  markFraction,
+  stepPair,
+  type MeterPair as Pair,
+} from "../../utils/audioMeterMath";
+
+interface Levels {
+  master: StereoLevel;
+  groups: Record<string, StereoLevel>;
+}
+interface AudioMeterHook {
+  start(): void;
+  stop(): void;
+  read(): Levels;
+}
+interface Strip {
+  id: string | null;
+  label: string;
+  volume: number;
+}
+type Bars = { mask: HTMLElement | null; peak: HTMLElement | null };
+type StripBars = [Bars, Bars];
+
+const MONITOR_LABEL = "Monitor";
+
+/** Where the fill turns amber, then red, on the same piecewise dB scale the marks use. */
+const AMBER_AT = markFraction(-6);
+const RED_AT = markFraction(-3);
+
+function useStrips(): Strip[] {
+  const elements = usePlayerStore((s) => s.elements);
+  const masterVolume = usePlayerStore((s) => s.audioVolume);
+  return useMemo(() => {
+    const labels = new Map<string, string>();
+    const volumes = new Map<string, number>();
+    for (const el of elements) {
+      if (el.audioGroup && !labels.has(el.audioGroup)) {
+        labels.set(el.audioGroup, el.audioGroupLabel ?? el.audioGroup);
+        volumes.set(el.audioGroup, el.audioGroupVolume ?? 1);
+      }
+    }
+    return [
+      ...[...labels].map(([id, label]) => ({ id, label, volume: volumes.get(id) ?? 1 })),
+      { id: null, label: MONITOR_LABEL, volume: masterVolume },
+    ];
+  }, [elements, masterVolume]);
+}
+
+/** Group volume through the existing `data-volume` write path (live while dragging, one
+ *  undo entry on release); monitor volume through the player store's own volume action —
+ *  the same one `VolumeControl` in `PlayerControls` already drives. */
+function useVolumeHandlers(): {
+  onLive: (id: string | null, volume: number) => void;
+  onCommit: (id: string | null, volume: number) => void;
+} {
+  const { onSetAudioGroupAttributeLive, onSetAudioGroupAttributeQuiet } =
+    useTimelineEditContextOptional();
+  const setAudioVolume = usePlayerStore((s) => s.setAudioVolume);
+  const onLive = useCallback(
+    (id: string | null, volume: number) => {
+      if (id === null) setAudioVolume(volume);
+      else onSetAudioGroupAttributeLive?.(id, "data-volume", formatAudioGain(volume));
+    },
+    [onSetAudioGroupAttributeLive, setAudioVolume],
+  );
+  const onCommit = useCallback(
+    (id: string | null, volume: number) => {
+      if (id === null) setAudioVolume(volume);
+      else
+        void onSetAudioGroupAttributeQuiet?.(
+          id,
+          "data-volume",
+          formatAudioGain(volume),
+          "Set volume",
+        );
+    },
+    [onSetAudioGroupAttributeQuiet, setAudioVolume],
+  );
+  return { onLive, onCommit };
+}
+
+type PreviewWindow = (Window & { __hf?: { audioMeter?: AudioMeterHook } }) | null | undefined;
+
+function readHook(iframe: HTMLIFrameElement | null): AudioMeterHook | null {
+  try {
+    return (iframe?.contentWindow as PreviewWindow)?.__hf?.audioMeter ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** 0 dB is bottom 100% plus 1px down, so the tick stays inside overflow-hidden.
+ *  A calc() bottom does not stick as an inline style on Windows happy-dom. */
+function paintPeak(el: HTMLElement | null, peak: number): void {
+  if (!el) return;
+  el.style.setProperty("bottom", `${peak * 100}%`);
+  el.style.setProperty("transform", peak >= 1 ? "translateY(1px)" : "none");
+}
+
+/** The fill is a fixed green/amber/red backdrop; painting only moves the dark
+ *  mask that covers the unlit top portion, so a loud peak lights the real red
+ *  band instead of tinting a flat colour brighter. */
+function paint(bars: StripBars | undefined, channels: Pair): void {
+  channels.forEach((ch, i) => {
+    bars?.[i]?.mask?.style.setProperty("height", `${(1 - ch.level) * 100}%`);
+    paintPeak(bars?.[i]?.peak ?? null, ch.peak);
+  });
+}
+
+/** Attach to the live preview hook. Always returns `live`, even if start/stop throw. */
+export function followMeterHook(
+  active: AudioMeterHook | null,
+  live: AudioMeterHook | null,
+): AudioMeterHook | null {
+  if (live === active) return active;
+  try {
+    active?.stop();
+  } catch {
+    // Preview iframe was torn down; the old hook is uncallable.
+  }
+  try {
+    live?.start();
+  } catch {
+    // New preview is not ready to attach yet.
+  }
+  return live;
+}
+
+export function evictGoneMeterState(
+  state: Map<string | null, Pair>,
+  liveIds: ReadonlySet<string | null>,
+): void {
+  for (const id of [...state.keys()]) {
+    if (!liveIds.has(id)) state.delete(id);
+  }
+}
+
+export function stepAndPaintStrips(
+  strips: readonly { id: string | null }[],
+  state: Map<string | null, Pair>,
+  bars: Map<string | null, StripBars>,
+  levels: Levels | undefined,
+  now: number,
+  dt: number,
+): void {
+  for (const { id } of strips) {
+    const prev = state.get(id);
+    const next = stepPair(prev, id === null ? levels?.master : levels?.groups[id], now, dt);
+    if (next === prev) continue;
+    state.set(id, next);
+    paint(bars.get(id), next);
+  }
+}
+
+/** One rAF loop re-reads the hook off the live preview window, so a reloaded iframe is followed. */
+function useMeterLoop(strips: Strip[], bars: RefObject<Map<string | null, StripBars>>) {
+  const { previewIframeRef } = useStudioShellContext();
+  const stripsRef = useRef(strips);
+  stripsRef.current = strips;
+  useEffect(() => {
+    let raf = 0;
+    let active: AudioMeterHook | null = null;
+    let last = performance.now();
+    const state = new Map<string | null, Pair>();
+    const tick = (now: number) => {
+      raf = requestAnimationFrame(tick);
+      active = followMeterHook(active, readHook(previewIframeRef.current));
+      const levels = active?.read();
+      const dt = now - last;
+      last = now;
+      evictGoneMeterState(state, new Set(stripsRef.current.map((s) => s.id)));
+      stepAndPaintStrips(stripsRef.current, state, bars.current, levels, now, dt);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      try {
+        active?.stop();
+      } catch {
+        // Preview iframe already gone.
+      }
+    };
+  }, [previewIframeRef, bars]);
+}
+
+function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<HTMLDivElement> }) {
+  return (
+    <div className="relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900">
+      <div
+        className="absolute inset-x-0 bottom-0 bg-green-500"
+        style={{ height: `${AMBER_AT * 100}%` }}
+      />
+      <div
+        className="absolute inset-x-0 bg-amber-500"
+        style={{ bottom: `${AMBER_AT * 100}%`, height: `${(RED_AT - AMBER_AT) * 100}%` }}
+      />
+      <div
+        className="absolute inset-x-0 top-0 bg-red-500"
+        style={{ height: `${(1 - RED_AT) * 100}%` }}
+      />
+      <div
+        ref={maskRef}
+        data-testid="meter-mask"
+        className="absolute inset-x-0 top-0 bg-neutral-900"
+        style={{ height: "100%" }}
+      />
+      <div
+        ref={peakRef}
+        data-testid="meter-peak"
+        className="absolute inset-x-0 bottom-0 h-px bg-white"
+      />
+    </div>
+  );
+}
+
+/** Uses the authored clip-gain scale; meter readings have a separate scale. */
+function Fader({
+  label,
+  title,
+  volume,
+  maxPosition,
+  onLive,
+  onCommit,
+}: {
+  label: string;
+  title: string;
+  volume: number;
+  maxPosition: number;
+  onLive: (v: number) => void;
+  onCommit: (v: number) => void;
+}) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const draggingRef = useRef<number | null>(null);
+  const position = audioGainToFaderPosition(volume);
+  const span = maxPosition - AUDIO_GAIN_FADER_MIN;
+  const fraction = (position - AUDIO_GAIN_FADER_MIN) / span;
+  const readout = audioGainToText(volume);
+
+  const positionAt = useCallback(
+    (clientY: number): number => {
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (!rect || rect.height === 0) return position;
+      return (
+        AUDIO_GAIN_FADER_MIN + clampNumber(1 - (clientY - rect.top) / rect.height, 0, 1) * span
+      );
+    },
+    [position, span],
+  );
+
+  const moveTo = (clientY: number) => {
+    const gain = audioFaderPositionToGain(positionAt(clientY));
+    draggingRef.current = gain;
+    onLive(gain);
+  };
+  const finishDrag = () => {
+    if (draggingRef.current === null) return;
+    const gain = draggingRef.current;
+    draggingRef.current = null;
+    onCommit(gain);
+  };
+  const keyPositions = new Map([
+    ["ArrowUp", position + span * 0.02],
+    ["ArrowDown", position - span * 0.02],
+    ["PageUp", position + span * 0.1],
+    ["PageDown", position - span * 0.1],
+    ["Home", AUDIO_GAIN_FADER_MIN],
+    ["End", maxPosition],
+  ]);
+
+  return (
+    <div
+      ref={trackRef}
+      role="slider"
+      tabIndex={0}
+      aria-label={label}
+      title={`${title}: ${readout}`}
+      aria-orientation="vertical"
+      aria-valuemin={AUDIO_GAIN_FADER_MIN}
+      aria-valuemax={maxPosition}
+      aria-valuenow={Math.round(position)}
+      aria-valuetext={readout}
+      onPointerDown={(e: ReactPointerEvent<HTMLDivElement>) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        moveTo(e.clientY);
+      }}
+      onPointerMove={(e: ReactPointerEvent<HTMLDivElement>) => {
+        if (draggingRef.current === null) return;
+        moveTo(e.clientY);
+      }}
+      onPointerUp={finishDrag}
+      onPointerCancel={finishDrag}
+      onLostPointerCapture={finishDrag}
+      onKeyDown={(e) => {
+        const next = keyPositions.get(e.key);
+        if (next === undefined) return;
+        onCommit(audioFaderPositionToGain(clampNumber(next, AUDIO_GAIN_FADER_MIN, maxPosition)));
+        e.preventDefault();
+      }}
+      className="relative h-full w-2 shrink-0 cursor-ns-resize touch-none rounded-full bg-neutral-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
+    >
+      <div
+        className="absolute inset-x-[-3px] h-1.5 -translate-y-1/2 rounded-full bg-neutral-200"
+        style={{ bottom: `${fraction * 100}%` }}
+      />
+    </div>
+  );
+}
+
+function MeterStrip({
+  strip,
+  register,
+  onLive,
+  onCommit,
+}: {
+  strip: Strip;
+  register: (id: string | null, bars: StripBars | null) => void;
+  onLive: (id: string | null, volume: number) => void;
+  onCommit: (id: string | null, volume: number) => void;
+}) {
+  const refs = [
+    useRef<HTMLDivElement>(null),
+    useRef<HTMLDivElement>(null),
+    useRef<HTMLDivElement>(null),
+    useRef<HTMLDivElement>(null),
+  ] as const;
+  useEffect(() => {
+    register(strip.id, [
+      { mask: refs[0].current, peak: refs[1].current },
+      { mask: refs[2].current, peak: refs[3].current },
+    ]);
+    return () => register(strip.id, null);
+    // refs are stable objects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [strip.id, register]);
+  return (
+    <div className="flex w-[104px] shrink-0 flex-col items-center gap-1 px-1.5 pt-2 pb-1">
+      <div
+        className="flex min-h-0 flex-1 items-stretch gap-1.5"
+        aria-label={`${strip.label} level`}
+      >
+        <Fader
+          label={`${strip.label} volume`}
+          title={strip.id === null ? "Preview monitor volume" : `${strip.label} volume`}
+          volume={strip.volume}
+          maxPosition={strip.id === null ? audioGainToFaderPosition(1) : AUDIO_GAIN_FADER_MAX}
+          onLive={(v) => onLive(strip.id, v)}
+          onCommit={(v) => onCommit(strip.id, v)}
+        />
+        <div className="relative w-5 font-mono text-[9px] leading-none text-neutral-500">
+          {METER_DB_MARKS.map((db) => (
+            <span
+              key={db}
+              className="absolute right-0 translate-y-1/2"
+              style={{ bottom: `${markFraction(db) * 100}%` }}
+            >
+              {db}
+            </span>
+          ))}
+        </div>
+        <div className="flex items-stretch gap-0.5">
+          <Bar maskRef={refs[0]} peakRef={refs[1]} />
+          <Bar maskRef={refs[2]} peakRef={refs[3]} />
+        </div>
+      </div>
+      <span className="max-w-full truncate text-[10px] text-neutral-400" title={strip.label}>
+        {strip.label}
+      </span>
+    </div>
+  );
+}
+
+export const AudioMeterStrip = memo(function AudioMeterStrip() {
+  const visible = useAudioMetersVisible((s) => s.visible);
+  const projectHasAudio = useProjectHasAudio();
+  if (!visible || !projectHasAudio) return null;
+  return <MeterStripBody />;
+});
+
+function MeterStripBody() {
+  const strips = useStrips();
+  const bars = useRef(new Map<string | null, StripBars>());
+  const register = useRef((id: string | null, b: StripBars | null) => {
+    if (b) bars.current.set(id, b);
+    else bars.current.delete(id);
+  }).current;
+  const { onLive, onCommit } = useVolumeHandlers();
+  useMeterLoop(strips, bars);
+  return (
+    <div
+      data-testid="audio-meter-strip"
+      className="flex shrink-0 overflow-x-auto border-l border-neutral-800/50 bg-neutral-950"
+    >
+      {strips.map((strip) => (
+        <MeterStrip
+          key={strip.id ?? "master"}
+          strip={strip}
+          register={register}
+          onLive={onLive}
+          onCommit={onCommit}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/nle/TimelinePane.tsx

@@ -2,6 +2,7 @@ import { useCallback, type ReactNode } from "react";
 import { Timeline } from "../../player";
 import type { TimelineElement, TimelineTimeRange } from "../../player";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
+import { AudioMeterStrip } from "./AudioMeterStrip";
 import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
 import { trackStudioExpandedClipEdit } from "../../telemetry/events";
 import { useNLEContext } from "./NLEContext";
@@ -271,29 +272,34 @@ export function TimelinePane({
         }}
       >
         <div className="shrink-0">{timelineToolbar}</div>
-        <Timeline
-          sessionEpoch={timelineSessionEpoch}
-          onSeek={seek}
-          onDrillDown={handleDrillDown}
-          renderClipContent={renderClipContent}
-          onFileDrop={onFileDrop}
-          onDeleteElement={handleDeleteElement}
-          onAssetDrop={onAssetDrop}
-          onBlockDrop={onBlockDrop}
-          onCompositionDrop={onCompositionDrop}
-          onMoveElement={handleMoveElement}
-          onMoveElements={handleMoveElements}
-          onResizeElement={handleResizeElement}
-          onResizeElements={handleResizeElements}
-          onBlockedEditAttempt={onBlockedEditAttempt}
-          onSplitElement={handleSplitElement}
-          onSelectElement={onSelectTimelineElement}
-          onRangeSelect={onRangeSelect}
-          onCopyClip={onCopyClip}
-          onPasteClip={onPasteClip}
-          onDuplicateClip={onDuplicateClip}
-          canPasteClip={canPasteClip}
-        />
+        <div className="flex min-h-0 flex-1">
+          <div className="min-w-0 flex-1">
+            <Timeline
+              sessionEpoch={timelineSessionEpoch}
+              onSeek={seek}
+              onDrillDown={handleDrillDown}
+              renderClipContent={renderClipContent}
+              onFileDrop={onFileDrop}
+              onDeleteElement={handleDeleteElement}
+              onAssetDrop={onAssetDrop}
+              onBlockDrop={onBlockDrop}
+              onCompositionDrop={onCompositionDrop}
+              onMoveElement={handleMoveElement}
+              onMoveElements={handleMoveElements}
+              onResizeElement={handleResizeElement}
+              onResizeElements={handleResizeElements}
+              onBlockedEditAttempt={onBlockedEditAttempt}
+              onSplitElement={handleSplitElement}
+              onSelectElement={onSelectTimelineElement}
+              onRangeSelect={onRangeSelect}
+              onCopyClip={onCopyClip}
+              onPasteClip={onPasteClip}
+              onDuplicateClip={onDuplicateClip}
+              canPasteClip={canPasteClip}
+            />
+          </div>
+          <AudioMeterStrip />
+        </div>
       </div>
       {timelineFooter && <div className="shrink-0">{timelineFooter}</div>}
       {timelineOverlay && (

package/src/components/ui/Menu.test.tsx

@@ -360,10 +360,9 @@ describe("open motion", () => {
 
   // AE4.
   it("names a motion token that zeroes itself under reduced motion", async () => {
-    // The zero-duration case lives in the `duration-open` utility itself
-    // (theme.css), not in a `motion-reduce:` class beside it, so a caller
-    // cannot use the token and forget the reduced-motion half. The menu's job
-    // is to name the token; the stylesheet's job is the media query.
+    // Reduced motion lives in the `duration-open` utility itself (theme.css),
+    // not in a `motion-reduce:` class beside it, so a caller cannot use the
+    // token and forget that half. The menu's job is to name the token.
     await openActionMenu();
 
     expect([...popup()!.classList]).toContain("duration-open");

package/src/components/ui/Menu.tsx

@@ -27,15 +27,28 @@ const SIDE_OFFSET = 6;
 const VIEWPORT_MARGIN = 8;
 
 /**
- * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
+ * Enter and exit shared by menus, popovers, dropdowns, and tooltips.
+ * The open duration class differs; the shape does not.
  * `data-starting-style`/`data-ending-style` are Base UI's transition attributes.
  */
+export function floatingMotion(openDuration: "duration-open" | "duration-tooltip") {
+  return cn(
+    "origin-[var(--transform-origin)] outline-hidden",
+    "transition-[opacity,transform] ease-out-quint",
+    openDuration,
+    "data-[ending-style]:duration-close data-[ending-style]:ease-in",
+    "data-[starting-style]:[opacity:var(--popup-enter-opacity)]",
+    "data-[starting-style]:[scale:var(--popup-enter-scale)]",
+    "data-[ending-style]:opacity-0",
+  );
+}
+
+/**
+ * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
+ */
 export const popupSurface = cn(
   "rounded-lg border border-border-input bg-surface",
-  "origin-[var(--transform-origin)] outline-hidden",
-  "transition-[opacity,transform] ease-out-quint duration-open",
-  "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
-  "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
+  floatingMotion("duration-open"),
   "data-[preview-state=open]:opacity-100 data-[preview-state=open]:scale-100",
 );
 

package/src/components/ui/Select.tsx

@@ -6,6 +6,7 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { cn } from "./cn";
 import { fieldBase } from "./Input";
+import { floatingMotion } from "./Menu";
 import type { PreviewState } from "./Button";
 
 export interface SelectOption {
@@ -77,7 +78,12 @@ export function Select({
 
       <BaseSelect.Portal>
         <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false}>
-          <BaseSelect.Popup className="min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu outline-hidden">
+          <BaseSelect.Popup
+            className={cn(
+              "min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu",
+              floatingMotion("duration-open"),
+            )}
+          >
             <BaseSelect.List>
               {options.map((option) => (
                 <BaseSelect.Item

package/src/components/ui/Tooltip.tsx

@@ -5,6 +5,8 @@
 
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cloneElement, useId, useRef, useState, type ReactElement } from "react";
+import { cn } from "./cn";
+import { floatingMotion } from "./Menu";
 
 interface TooltipProps {
   label: string;
@@ -42,7 +44,10 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
           <BaseTooltip.Popup
             id={tooltipId}
             role="tooltip"
-            className="pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu"
+            className={cn(
+              "pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu",
+              floatingMotion("duration-tooltip"),
+            )}
           >
             {label}
           </BaseTooltip.Popup>

package/src/contexts/TimelineEditContext.tsx

@@ -21,6 +21,10 @@ export function useTimelineEditContextOptional(): TimelineEditCallbacks {
   return useContext(TimelineEditContext) ?? {};
 }
 
+export function useTimelineEditContextValue(): TimelineEditCallbacks | null {
+  return useContext(TimelineEditContext);
+}
+
 export function TimelineEditProvider({
   value,
   children,

package/src/hooks/useTimelineAssetDropOps.ts

@@ -18,7 +18,11 @@ import {
 } from "../utils/timelineAssetDrop";
 import { generateId } from "../utils/generateId";
 import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
-import { collectHtmlIds, resolveDroppedAssetDuration } from "../utils/studioHelpers";
+import {
+  collectHtmlIds,
+  resolveDroppedAssetDuration,
+  resolveDroppedAssetHasAudio,
+} from "../utils/studioHelpers";
 import { formatTimelineAttributeNumber } from "./timelineEditingHelpers";
 import { readFileContent } from "./timelineTimingSync";
 import { commitTimelineCompositionInsertion } from "../utils/timelineCompositionInsert";
@@ -113,6 +117,9 @@ export function useTimelineAssetDropOps({
             ? durationOverride
             : await resolveDroppedAssetDuration(pid, assetPath, kind);
         const normalizedDuration = Number(formatTimelineAttributeNumber(duration));
+        // A video with an audio stream lands audible; the mixer only hears a
+        // <video> marked data-has-audio, and a muted drop was losing the sound.
+        const hasAudio = await resolveDroppedAssetHasAudio(pid, assetPath, kind);
         const newId = buildTimelineAssetId(assetPath, collectHtmlIds(originalContent));
         const resolvedAssetSrc = resolveTimelineAssetSrc(targetPath, assetPath);
 
@@ -146,6 +153,7 @@ export function useTimelineAssetDropOps({
               duration: normalizedDuration,
               track,
               zIndex: newElementZIndex,
+              hasAudio,
               geometry: fitTimelineAssetGeometry(
                 null,
                 resolveTimelineAssetCompositionSize(originalContent),

package/src/index.ts

@@ -60,6 +60,22 @@ export type {
   TimelineElement,
   TimelineTimeRange,
 } from "./player";
+export {
+  TimelineFrame,
+  TimelineLanes,
+  TimelineOverlays,
+  TimelinePlayhead,
+  TimelineRazorGuide,
+  TimelineRuler,
+  TimelineEmptyStatePart,
+  TimelineEditPopover,
+  TimelineClipMenu,
+  TimelineGapMenu,
+  TimelineKeyframeMenu,
+  TimelineShortcutHint,
+} from "./player/components/TimelineParts";
+export { TimelineProvider, useTimelineContext } from "./player/components/TimelineProvider";
+export type { TimelineTheme } from "./player/components/timelineTheme";
 
 // Host overlays: draw over the preview in composition coordinates (see EditorShellProps.gestureOverlay)
 export { usePreviewCompositionRect } from "./components/editor/usePreviewCompositionRect";