hyperframes 0.8.85 → 0.8.86

package/dist/studio/index.js

@@ -13,6 +13,7 @@ import {
   applyPreviewVariablesToUrl,
   buildTimelineElementIdentity,
   buildTimelineElementKey,
+  computePinnedZoomPercent,
   createTimelineDomNodeResolver,
   createTimelineResetState,
   deriveTimelineStoreKey,
@@ -65,7 +66,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-7VDQIGOU.js";
+} from "./chunk-7PLTC6SV.js";
 import {
   Button,
   ContextMenu,
@@ -2048,20 +2049,20 @@ function getTimelineInsertBoundaryBand(rowHeight) {
 var DRAG_EXTEND_MARGIN_PX = 160;
 var MIN_TIMELINE_EXTENT_S = 60;
 var FIT_ZOOM_HEADROOM = 1.2;
+function getTimelineFitSpan(effectiveDuration) {
+  return Number.isFinite(effectiveDuration) && effectiveDuration > 0 ? effectiveDuration * FIT_ZOOM_HEADROOM : MIN_TIMELINE_EXTENT_S;
+}
 function getTimelineFitPps(viewportWidth, effectiveDuration, contentOrigin) {
-  const safeDuration = Number.isFinite(effectiveDuration) && effectiveDuration > 0 ? effectiveDuration : 0;
-  const span = Math.max(safeDuration * FIT_ZOOM_HEADROOM, MIN_TIMELINE_EXTENT_S);
   if (!Number.isFinite(viewportWidth) || viewportWidth <= contentOrigin) return 100;
-  return (viewportWidth - contentOrigin - 2) / span;
+  return (viewportWidth - contentOrigin - 2) / getTimelineFitSpan(effectiveDuration);
 }
 function getTimelineDisplayContentWidth(input) {
   const safePps = Number.isFinite(input.pps) ? Math.max(input.pps, 0) : 0;
   return Math.max(
-    input.trackContentWidth,
     input.viewportWidth - input.contentOrigin - 2,
     input.dragGhostEndPx ?? 0,
     input.resizeGhostEndPx ?? 0,
-    MIN_TIMELINE_EXTENT_S * safePps
+    getTimelineFitSpan(input.effectiveDuration) * safePps
   );
 }
 function getTimelineContentXFromClient(input) {
@@ -2887,7 +2888,7 @@ function useTimelinePlayhead({
   );
   useEffect5(() => {
     syncPlayheadPosition(currentTime);
-  }, [currentTime, pps, syncPlayheadPosition]);
+  }, [currentTime, pps, syncPlayheadPosition, timelineReady, elementsLength]);
   useLayoutEffect(() => {
     const scroll = scrollRef.current;
     if (!scroll || zoomMode !== "fit") return;
@@ -7055,7 +7056,7 @@ function useTimelineStackingSync({
 }
 
 // src/player/components/useTimelineGeometry.ts
-import { useEffect as useEffect12, useRef as useRef13 } from "react";
+import { useEffect as useEffect12, useLayoutEffect as useLayoutEffect2, useRef as useRef13 } from "react";
 function useTimelineGeometry({
   viewportWidth,
   effectiveDuration,
@@ -7074,11 +7075,10 @@ function useTimelineGeometry({
   const fitPps = getTimelineFitPps(viewportWidth, effectiveDuration, contentOrigin);
   const pps = getTimelinePixelsPerSecond(fitPps, zoomMode, manualZoomPercent);
   ppsRef.current = pps;
-  const trackContentWidth = Math.max(0, effectiveDuration * pps);
   const dragGhostEndPx = draggedClip?.started ? (draggedClip.previewStart + draggedClip.element.duration) * pps + DRAG_EXTEND_MARGIN_PX : 0;
   const resizeGhostEndPx = resizingClip?.started ? (resizingClip.previewStart + resizingClip.previewDuration) * pps + DRAG_EXTEND_MARGIN_PX : 0;
   const displayContentWidth = getTimelineDisplayContentWidth({
-    trackContentWidth,
+    effectiveDuration,
     viewportWidth,
     contentOrigin,
     pps,
@@ -7107,6 +7107,15 @@ function useTimelineGeometry({
   useEffect12(() => {
     usePlayerStore.getState().setTimelineScale(pps, fitPps);
   }, [pps, fitPps]);
+  const hasClips = expandedElements.length > 0;
+  const lastScale = useRef13({ effectiveDuration, pps, hasClips });
+  useLayoutEffect2(() => {
+    const last = lastScale.current;
+    lastScale.current = { effectiveDuration, pps, hasClips };
+    if (zoomMode !== "manual" || !last.hasClips || !hasClips) return;
+    if (last.effectiveDuration === effectiveDuration) return;
+    usePlayerStore.setState({ manualZoomPercent: computePinnedZoomPercent(last.pps, fitPps) });
+  });
   return {
     pps,
     fitPps,
@@ -11800,7 +11809,7 @@ function useTimelineClipRenderWindow({
 }
 
 // src/player/components/useTimelineActiveClips.ts
-import { useCallback as useCallback16, useLayoutEffect as useLayoutEffect2, useRef as useRef22 } from "react";
+import { useCallback as useCallback16, useLayoutEffect as useLayoutEffect3, useRef as useRef22 } from "react";
 function isTimelineIntervalActive(interval, time) {
   return Number.isFinite(time) && !interval.hidden && Number.isFinite(interval.start) && Number.isFinite(interval.end) && time >= interval.start && time <= interval.end;
 }
@@ -11867,7 +11876,7 @@ function useTimelineActiveClips({
     },
     [scrollRef]
   );
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     refreshRecords(currentTime);
   }, [clipStateVersion, currentTime, elementStateVersion, refreshRecords]);
   useMountEffect(
@@ -11885,7 +11894,7 @@ function useTimelineLaneMoveRefresh() {
 }
 
 // src/player/components/useTimelineFocusCoordinator.ts
-import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect3, useMemo as useMemo17, useRef as useRef23 } from "react";
+import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect4, useMemo as useMemo17, useRef as useRef23 } from "react";
 
 // src/player/components/timelineKeyboardNavigation.ts
 var NAVIGATION_KEYS = /* @__PURE__ */ new Set([
@@ -12305,7 +12314,7 @@ function useTimelineFocusCoordinator({
     resolvedRef.current = null;
     return null;
   }, [logicalRows, projectId, request, sessionEpoch]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     previousRowsRef.current = logicalRows;
   }, [logicalRows]);
   useEffect18(() => {
@@ -12423,7 +12432,7 @@ function useTimelineLogicalRows({
 // src/player/components/useTimelineRowVirtualization.ts
 import {
   useCallback as useCallback19,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo20,
   useRef as useRef24,
   useState as useState14
@@ -12603,7 +12612,7 @@ function useTimelineRowVirtualization({
   });
   const previousLayoutRef = useRef24(rowGeometry);
   const previousSessionEpochRef = useRef24(sessionEpoch);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const scroll = scrollRef.current;
     const previousGeometry = previousLayoutRef.current;
     if (previousSessionEpochRef.current !== sessionEpoch) {
@@ -22348,7 +22357,7 @@ var Timeline = Object.assign(TimelineComposed, {
 import { memo as memo17, useMemo as useMemo30 } from "react";
 
 // src/hooks/useThumbnailLease.ts
-import { useCallback as useCallback31, useLayoutEffect as useLayoutEffect5, useRef as useRef40, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback31, useLayoutEffect as useLayoutEffect6, useRef as useRef40, useSyncExternalStore as useSyncExternalStore3 } from "react";
 
 // src/player/lib/thumbnailScheduler.ts
 var PRIORITY_SCORE = {
@@ -22744,7 +22753,7 @@ function useThumbnailLease(request, scheduler = thumbnailScheduler) {
     const current = requestRef.current;
     return current && identity !== null ? scheduler.getSnapshot(current) : IDLE;
   }, [identity, scheduler]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (priority) leaseRef.current?.updatePriority(priority);
   }, [priority]);
   return useSyncExternalStore3(subscribe, getSnapshot, () => IDLE);
@@ -26088,23 +26097,33 @@ function useCompositionStack({
   ]);
   const onCompositionChangeRef = useRef46(onCompositionChange);
   onCompositionChangeRef.current = onCompositionChange;
+  const masterSeekRef = useRef46(0);
+  const masterSeekProjectRef = useRef46(null);
+  const projectIdRef = useRef46(projectId);
+  projectIdRef.current = projectId;
+  const stackRef = useRef46(compositionStack);
   const updateCompositionStack = useCallback38((action) => {
-    setCompositionStack((prev) => {
-      const next = typeof action === "function" ? action(prev) : action;
-      const id = next[next.length - 1]?.id;
-      queueMicrotask(() => onCompositionChangeRef.current?.(id === "master" ? null : id));
-      return next;
-    });
+    const prev = stackRef.current;
+    const next = typeof action === "function" ? action(prev) : action;
+    stackRef.current = next;
+    const player = usePlayerStore.getState();
+    if (prev.length === 1 && next.length > 1) {
+      masterSeekRef.current = player.isPlaying ? liveTime.latest() : player.currentTime;
+      masterSeekProjectRef.current = projectIdRef.current;
+    } else if (next.length === 1 && prev.length > 1) {
+      if (masterSeekProjectRef.current === projectIdRef.current) {
+        player.setCurrentTime(masterSeekRef.current);
+      }
+    }
+    setCompositionStack(next);
+    const id = next[next.length - 1]?.id;
+    queueMicrotask(() => onCompositionChangeRef.current?.(id === "master" ? null : id));
   }, []);
-  const masterSeekRef = useRef46(0);
   const [compIdToSrc, setCompIdToSrc] = useState28(/* @__PURE__ */ new Map());
   const compIdToSrcRef = useRef46(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
   const handleNavigateComposition = useCallback38(
     (index) => {
-      if (index === 0 && masterSeekRef.current > 0) {
-        usePlayerStore.getState().setCurrentTime(masterSeekRef.current);
-      }
       usePlayerStore.getState().setElements([]);
       updateCompositionStack((prev) => prev.slice(0, index + 1));
     },
@@ -26114,7 +26133,6 @@ function useCompositionStack({
   const handleDrillDown = useCallback38(
     (element) => {
       if (!element.compositionSrc) return;
-      masterSeekRef.current = usePlayerStore.getState().currentTime;
       const compId = element.id;
       let resolvedPath = compIdToSrcRef.current.get(compId);
       if (!resolvedPath) {
@@ -26480,7 +26498,7 @@ import {
   memo as memo19,
   useCallback as useCallback44,
   useEffect as useEffect34,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useRef as useRef51,
   useState as useState31
 } from "react";
@@ -26978,7 +26996,7 @@ var NLEPreview = memo19(function NLEPreview2({
     [drawNavigator]
   );
   const zoomProjectRef = useRef51(projectId);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (zoomProjectRef.current === projectId) return;
     zoomProjectRef.current = projectId;
     zoomRef.current = DEFAULT_PREVIEW_ZOOM;
@@ -38179,7 +38197,7 @@ function ConnectedDomEditOverlay({
 // src/components/editor/TopologyLens.tsx
 import {
   useEffect as useEffect49,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useReducer,
   useRef as useRef71,
   useState as useState44,
@@ -39024,7 +39042,7 @@ function TopologyLens({ iframeRef, activeCompositionPath }) {
   const ownedCallIdRef = useRef71(callId);
   const pendingUnmountDismissRef = useRef71(null);
   ownedCallIdRef.current = callId;
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (!callId || !handle) {
       setMeasured(null);
       return;
@@ -49312,7 +49330,7 @@ function ColorGradingSection({
 import { useEffect as useEffect73, useRef as useRef92, useState as useState67 } from "react";
 
 // src/components/editor/propertyPanelColor.tsx
-import { useCallback as useCallback78, useEffect as useEffect68, useLayoutEffect as useLayoutEffect8, useRef as useRef88, useState as useState59 } from "react";
+import { useCallback as useCallback78, useEffect as useEffect68, useLayoutEffect as useLayoutEffect9, useRef as useRef88, useState as useState59 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { jsx as jsx113, jsxs as jsxs81 } from "react/jsx-runtime";
 var COLOR_PICKER_SIZE = { width: 292, height: 386 };
@@ -49511,7 +49529,7 @@ function ColorField({
       )
     );
   }, []);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (!open) return;
     updatePanelPosition();
     const handlePositionInvalidated = () => updatePanelPosition();
@@ -65569,7 +65587,7 @@ var FileTree = memo38(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState148, useCallback as useCallback181, useRef as useRef179, useMemo as useMemo77, useLayoutEffect as useLayoutEffect11 } from "react";
+import { useState as useState148, useCallback as useCallback181, useRef as useRef179, useMemo as useMemo77, useLayoutEffect as useLayoutEffect12 } from "react";
 
 // src/hooks/useRightPanelIntents.ts
 import { useCallback as useCallback88, useEffect as useEffect97, useRef as useRef114 } from "react";
@@ -82227,7 +82245,7 @@ import { useState as useState124, useRef as useRef162, useEffect as useEffect126
 import { classifyWebAudioMediaRoute } from "@hyperframes/core/runtime/web-audio-route";
 
 // src/components/sidebar/AssetContextMenu.tsx
-import { useCallback as useCallback152, useEffect as useEffect125, useLayoutEffect as useLayoutEffect9, useRef as useRef161, useState as useState123 } from "react";
+import { useCallback as useCallback152, useEffect as useEffect125, useLayoutEffect as useLayoutEffect10, useRef as useRef161, useState as useState123 } from "react";
 import { Fragment as Fragment54, jsx as jsx193, jsxs as jsxs153 } from "react/jsx-runtime";
 function isValidAssetName(name) {
   return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
@@ -82247,7 +82265,7 @@ function ContextMenu3({
   const [mode, setMode] = useState123("menu");
   const [renameDraft, setRenameDraft] = useState123(() => filename(asset));
   const [renameError, setRenameError] = useState123(null);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const el = menuRef.current;
     if (!el) return;
     const rect = el.getBoundingClientRect();
@@ -85935,7 +85953,7 @@ function ParamControl({
 import { memo as memo51 } from "react";
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo50, useState as useState139, useRef as useRef173, useEffect as useEffect138, useLayoutEffect as useLayoutEffect10, useId as useId5 } from "react";
+import { memo as memo50, useState as useState139, useRef as useRef173, useEffect as useEffect138, useLayoutEffect as useLayoutEffect11, useId as useId5 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
@@ -86320,7 +86338,7 @@ function FormatInfoTooltip({ format }) {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
   useEffect138(() => () => clearTimeout(timeoutRef.current), []);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!open) return;
     const el = triggerRef.current;
     if (!el) return;
@@ -89369,7 +89387,13 @@ function StudioRightPanels({
 
 // src/components/TimelineToolbar.tsx
 import { useEffect as useEffect144, useRef as useRef176 } from "react";
-import { Image as Image3, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
+import {
+  ArrowsOutLineHorizontal,
+  Image as Image3,
+  Magnet,
+  MagnifyingGlassMinus,
+  MagnifyingGlassPlus
+} from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
 import { useCallback as useCallback177 } from "react";
@@ -89830,7 +89854,7 @@ function TimelineHistoryButtons(props) {
 }
 
 // src/components/TimelineToolbar.tsx
-import { jsx as jsx225, jsxs as jsxs179 } from "react/jsx-runtime";
+import { Fragment as Fragment63, jsx as jsx225, jsxs as jsxs179 } from "react/jsx-runtime";
 var NO_KEYFRAME_TOGGLE = {
   state: "none",
   isMotionPath: false,
@@ -89889,7 +89913,8 @@ function TimelineToolbar({
   domEditSession,
   onSplitElement,
   history: history2,
-  showAddBeat = true
+  showAddBeat = true,
+  showKeyframes = true
 }) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
@@ -89924,9 +89949,12 @@ function TimelineToolbar({
     onToggle: onToggleKeyframe
   } = useKeyframeToggle(domEditSession);
   useKeyframeKeyboard({
-    enabled: Boolean(onToggleKeyframe),
+    enabled: showKeyframes && Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe
   });
+  useEffect144(() => {
+    if (!showKeyframes) setAutoKeyframeEnabled(false);
+  }, [showKeyframes, setAutoKeyframeEnabled]);
   useEffect144(() => {
     const onKeyDown = (e) => {
       if (e.key !== "n" && e.key !== "N") return;
@@ -90009,61 +90037,63 @@ function TimelineToolbar({
             children: /* @__PURE__ */ jsx225(AudioMetersIcon, { size: 16 })
           }
         ) }),
-        /* @__PURE__ */ jsx225(
-          Tooltip,
-          {
-            label: keyframePathEndpoint ? "Motion path endpoints cannot be removed" : !onToggleKeyframe ? "Select an animated element to add keyframes" : keyframeIsMotionPath ? keyframeWillExtend ? "Extend motion path to playhead (K)" : keyframeState === "active" ? "Remove waypoint from motion path (K)" : "Add waypoint to motion path (K)" : keyframeState === "active" ? "Remove keyframe at playhead (K)" : keyframeState === "inactive" ? keyframeWillExtend ? "Add keyframe at playhead, extends animation (K)" : "Add keyframe at playhead (K)" : "Add keyframe (K)",
-            children: /* @__PURE__ */ jsx225(
-              "button",
-              {
-                type: "button",
-                disabled: !onToggleKeyframe,
-                onClick: onToggleKeyframe,
-                "aria-label": keyframePathEndpoint ? "Motion path endpoint" : keyframeIsMotionPath ? keyframeState === "active" ? "Remove motion path waypoint" : keyframeWillExtend ? "Extend motion path to playhead" : "Add motion path waypoint" : keyframeState === "active" ? "Remove keyframe at playhead" : "Add keyframe at playhead",
-                className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${keyframeState === "active" ? "text-studio-accent" : keyframeState === "inactive" ? "text-neutral-400 hover:text-studio-accent" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsx225("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx225("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx225(
-                  "path",
-                  {
-                    d: "M5 1.2L8.8 5L5 8.8L1.2 5Z",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "1.2"
-                  }
-                ) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx225(
-          Tooltip,
-          {
-            label: autoKeyframeEnabled ? "Auto-record manual edits as keyframes (click to turn off)" : "Manual edits will not be recorded as keyframes (click to turn on)",
-            children: /* @__PURE__ */ jsx225(
-              "button",
-              {
-                type: "button",
-                onClick: () => setAutoKeyframeEnabled(!autoKeyframeEnabled),
-                "aria-label": "Auto-record manual edits as keyframes",
-                "aria-pressed": autoKeyframeEnabled,
-                className: `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${autoKeyframeEnabled ? "text-red-400 hover:text-red-300" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsxs179("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
-                  /* @__PURE__ */ jsx225("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsx225(
-                    "circle",
+        showKeyframes && /* @__PURE__ */ jsxs179(Fragment63, { children: [
+          /* @__PURE__ */ jsx225(
+            Tooltip,
+            {
+              label: keyframePathEndpoint ? "Motion path endpoints cannot be removed" : !onToggleKeyframe ? "Select an animated element to add keyframes" : keyframeIsMotionPath ? keyframeWillExtend ? "Extend motion path to playhead (K)" : keyframeState === "active" ? "Remove waypoint from motion path (K)" : "Add waypoint to motion path (K)" : keyframeState === "active" ? "Remove keyframe at playhead (K)" : keyframeState === "inactive" ? keyframeWillExtend ? "Add keyframe at playhead, extends animation (K)" : "Add keyframe at playhead (K)" : "Add keyframe (K)",
+              children: /* @__PURE__ */ jsx225(
+                "button",
+                {
+                  type: "button",
+                  disabled: !onToggleKeyframe,
+                  onClick: onToggleKeyframe,
+                  "aria-label": keyframePathEndpoint ? "Motion path endpoint" : keyframeIsMotionPath ? keyframeState === "active" ? "Remove motion path waypoint" : keyframeWillExtend ? "Extend motion path to playhead" : "Add motion path waypoint" : keyframeState === "active" ? "Remove keyframe at playhead" : "Add keyframe at playhead",
+                  className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${keyframeState === "active" ? "text-studio-accent" : keyframeState === "inactive" ? "text-neutral-400 hover:text-studio-accent" : "text-neutral-600 hover:text-neutral-400"}`,
+                  children: /* @__PURE__ */ jsx225("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx225("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx225(
+                    "path",
                     {
-                      cx: "5",
-                      cy: "5",
-                      r: "1.8",
-                      fill: autoKeyframeEnabled ? "currentColor" : "none",
+                      d: "M5 1.2L8.8 5L5 8.8L1.2 5Z",
+                      fill: "none",
                       stroke: "currentColor",
-                      strokeWidth: "1"
+                      strokeWidth: "1.2"
                     }
-                  )
-                ] })
-              }
-            )
-          }
-        ),
+                  ) })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx225(
+            Tooltip,
+            {
+              label: autoKeyframeEnabled ? "Auto-record manual edits as keyframes (click to turn off)" : "Manual edits will not be recorded as keyframes (click to turn on)",
+              children: /* @__PURE__ */ jsx225(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setAutoKeyframeEnabled(!autoKeyframeEnabled),
+                  "aria-label": "Auto-record manual edits as keyframes",
+                  "aria-pressed": autoKeyframeEnabled,
+                  className: `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${autoKeyframeEnabled ? "text-red-400 hover:text-red-300" : "text-neutral-600 hover:text-neutral-400"}`,
+                  children: /* @__PURE__ */ jsxs179("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
+                    /* @__PURE__ */ jsx225("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
+                    /* @__PURE__ */ jsx225(
+                      "circle",
+                      {
+                        cx: "5",
+                        cy: "5",
+                        r: "1.8",
+                        fill: autoKeyframeEnabled ? "currentColor" : "none",
+                        stroke: "currentColor",
+                        strokeWidth: "1"
+                      }
+                    )
+                  ] })
+                }
+              )
+            }
+          )
+        ] }),
         onSplitElement && (() => {
           const el = selectedElementId ? elements.find((e) => (e.key ?? e.id) === selectedElementId) : null;
           const splittable = el != null && canSplitElement(el);
@@ -90161,8 +90191,10 @@ function TimelineToolbar({
           {
             type: "button",
             onClick: () => setZoomMode("fit"),
+            "aria-label": "Fit timeline to width",
+            "aria-pressed": zoomMode === "fit",
             className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
-            children: "Fit"
+            children: /* @__PURE__ */ jsx225(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
           }
         ) }),
         /* @__PURE__ */ jsx225(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx225(
@@ -90505,7 +90537,7 @@ function useActiveComposition({
 }
 
 // src/App.tsx
-import { Fragment as Fragment63, jsx as jsx227, jsxs as jsxs181 } from "react/jsx-runtime";
+import { Fragment as Fragment64, jsx as jsx227, jsxs as jsxs181 } from "react/jsx-runtime";
 var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const { projectId, resolving, waitingForServer } = useServerConnection();
@@ -90801,7 +90833,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   handleToggleRecordingRef.current = handleToggleRecording;
   const canvasRectRef = useRef179(null);
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
       return;
@@ -90920,7 +90952,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
           {
             readOnlyPreview,
             readOnlyPreviewReason,
-            panels: /* @__PURE__ */ jsxs181(Fragment63, { children: [
+            panels: /* @__PURE__ */ jsxs181(Fragment64, { children: [
               /* @__PURE__ */ jsx227(
                 StudioLeftPanels,
                 {