hyperframes 0.8.83 → 0.8.85

package/dist/studio/index.js

@@ -65,7 +65,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-LPZMAGS7.js";
+} from "./chunk-7VDQIGOU.js";
 import {
   Button,
   ContextMenu,
@@ -11914,7 +11914,8 @@ function clipItems(rowId, elements) {
       kind: "clip",
       rowId,
       elementId: id,
-      time: element.start + element.duration / 2
+      time: element.start + element.duration / 2,
+      element
     };
   });
 }
@@ -20390,7 +20391,8 @@ function useTimelineKeyboardActor({
   focusedTargetId,
   rowGeometry,
   scrollRef,
-  onToggleRow
+  onToggleRow,
+  onDrillDown
 }) {
   const rovingTargetId = (focusedTargetId && locateTimelineLogicalTarget(logicalRows, focusedTargetId)?.target.id) ?? logicalRows[0]?.id ?? null;
   const logicalRowCountByTrack = useMemo27(() => {
@@ -20441,13 +20443,19 @@ function useTimelineKeyboardActor({
         openContextMenu(targetElement);
         return;
       }
+      const composition = located.target.kind === "clip" && located.target.element;
+      if (event.key === "Enter" && composition && composition.compositionSrc && onDrillDown) {
+        event.preventDefault();
+        onDrillDown(composition);
+        return;
+      }
       if (event.key !== "Enter" && event.key !== " " || located.target.kind !== "row" || !located.target.expandable) {
         return;
       }
       event.preventDefault();
       onToggleRow(located.target);
     },
-    [logicalRowCountByTrack, logicalRows, onToggleRow, rowGeometry, scrollRef]
+    [logicalRowCountByTrack, logicalRows, onDrillDown, onToggleRow, rowGeometry, scrollRef]
   );
   return { rovingTargetId, onFocus, onKeyDown };
 }
@@ -20683,9 +20691,8 @@ function TimelineLanes({
     focusedTargetId,
     rowGeometry,
     scrollRef,
-    onToggleRow: (row) => {
-      if (row.elementId) toggleClipExpandedTracked(row.elementId);
-    }
+    onToggleRow: (row) => row.elementId && toggleClipExpandedTracked(row.elementId),
+    onDrillDown
   });
   return /* @__PURE__ */ jsx52(
     "div",
@@ -25622,7 +25629,8 @@ var RENDERED_FIELDS = [
   "audioGroupVolume",
   "audioGroupHidden",
   "fadeIn",
-  "fadeOut"
+  "fadeOut",
+  "src"
 ];
 function timelineElementsChanged(previous, next) {
   if (next.length !== previous.length) return true;
@@ -27299,7 +27307,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
     "nav",
     {
       "aria-label": "Composition navigation",
-      className: "flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 shrink-0",
+      className: "flex items-center gap-1 px-2 h-8 border-b border-hairline bg-bg-1 shrink-0",
       children: [
         /* @__PURE__ */ jsx70(
           "button",
@@ -27312,7 +27320,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
               });
               onNavigate(stack.length - 2);
             },
-            className: "flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors",
+            className: "flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-text-3 hover:text-text-0 hover:bg-hover active:scale-[0.98] transition-colors",
             title: "Back (Esc, or double-click empty timeline)",
             "aria-label": "Back to parent composition",
             children: /* @__PURE__ */ jsx70(ArrowLeft2, { size: 12, weight: "bold" })
@@ -27321,8 +27329,8 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
         stack.map((level, i) => {
           const isLast = i === stack.length - 1;
           return /* @__PURE__ */ jsxs48("span", { className: "flex items-center gap-1", children: [
-            i > 0 && /* @__PURE__ */ jsx70(CaretRight2, { size: 10, className: "text-neutral-600 shrink-0" }),
-            isLast ? /* @__PURE__ */ jsx70("span", { className: "text-xs text-neutral-200 font-medium", children: level.label }) : /* @__PURE__ */ jsx70(
+            i > 0 && /* @__PURE__ */ jsx70(CaretRight2, { size: 10, className: "text-text-4 shrink-0" }),
+            isLast ? /* @__PURE__ */ jsx70("span", { className: "text-xs text-text-1 font-medium", children: level.label }) : /* @__PURE__ */ jsx70(
               "button",
               {
                 type: "button",
@@ -27330,7 +27338,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
                   trackStudioEvent("navigation", { action: "breadcrumb", target: level.label });
                   onNavigate(i);
                 },
-                className: "text-xs text-neutral-500 hover:text-neutral-200 transition-colors",
+                className: "text-xs text-text-3 hover:text-text-1 transition-colors",
                 children: level.label
               }
             )
@@ -35416,12 +35424,9 @@ function useInlineTextEdit({
       element.removeEventListener("drop", onDrop);
     };
   }, [session, commit, cancel]);
-  useEffect44(
-    () => () => {
-      teardown();
-    },
-    [teardown]
-  );
+  const commitRef = useRef65(commit);
+  commitRef.current = commit;
+  useEffect44(() => () => commitRef.current(), []);
   return { session, start, commit, cancel };
 }
 function placeCaret(element, at) {
@@ -72647,8 +72652,11 @@ function useDomEditTextCommits({
   refreshDomEditSelectionFromPreview,
   buildDomSelectionFromTarget,
   persistDomEditOperations,
-  resolveImportedFontAsset
+  resolveImportedFontAsset,
+  readOnlyPreview
 }) {
+  const latestReadOnlyPreviewRef = useRef140(readOnlyPreview);
+  latestReadOnlyPreviewRef.current = readOnlyPreview;
   const domTextCommitVersionRef = useRef140(/* @__PURE__ */ new Map());
   const domStyleCommitVersionRef = useRef140(/* @__PURE__ */ new Map());
   const {
@@ -72809,6 +72817,10 @@ function useDomEditTextCommits({
   const handleDomRichTextCommit = useCallback119(
     async ({ element, html: html2, previousHtml }) => {
       if (!domEditSelection) return;
+      if (latestReadOnlyPreviewRef.current) {
+        if (element.isConnected && element.innerHTML === html2) element.innerHTML = previousHtml;
+        return;
+      }
       if (!canCommitInlineTextSelection(domEditSelection, element)) return;
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
@@ -73819,6 +73831,7 @@ function useDomEditCommits({
     handleDomAddTextField,
     handleDomRemoveTextField
   } = useDomEditTextCommits({
+    readOnlyPreview,
     activeCompPath,
     previewIframeRef,
     domEditSelection,
@@ -91475,6 +91488,7 @@ export {
   resolveSourceFile,
   snapEngagedForTravel,
   useClipboard,
+  useCompositionStack,
   useDomEditSelectionContext,
   useDomEditSession,
   useEditHistoryActions,