@hyperframes/studio 0.8.53-desktop.0 → 0.8.54

package/src/components/renders/RenderQueueItem.tsx

@@ -2,6 +2,8 @@ import { buildProjectApiPath } from "../../utils/projectRouting";
 import { memo, useCallback, useState } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Tooltip } from "../ui/Tooltip";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
@@ -66,7 +68,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         setVideoReady(false);
         setConfirmingDelete(false);
       }}
-      className="px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150 hover:bg-panel-hover/30"
+      className="px-3 py-2.5 border-b border-border last:border-0 transition-colors duration-150 hover:bg-hover/30"
     >
       <div className="flex items-center gap-2.5">
         {/* Thumbnail — static frame; swaps to live video on hover.
@@ -77,8 +79,8 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           disabled={!isComplete}
           aria-label={isComplete ? `Open ${job.filename} in a new tab` : undefined}
           className={[
-            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input shrink-0 relative",
-            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent",
+            "w-20 h-[45px] rounded-md overflow-hidden bg-input shrink-0 relative",
+            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent",
             isComplete ? "cursor-pointer" : "cursor-default",
           ].join(" ")}
         >
@@ -108,17 +110,17 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
           {isRendering && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse motion-reduce:animate-none" />
+              <div className="w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" />
             </div>
           )}
           {job.status === "failed" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-red-400" />
+              <div className="w-2 h-2 rounded-full bg-danger" />
             </div>
           )}
           {job.status === "cancelled" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-neutral-600" />
+              <div className="w-2 h-2 rounded-full bg-text-5" />
             </div>
           )}
         </button>
@@ -126,11 +128,9 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         {/* Info */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
-            <span className="text-[11px] font-medium text-panel-text-2 truncate">
-              {job.filename}
-            </span>
+            <span className="text-step-11 font-medium text-text-2 truncate">{job.filename}</span>
             {job.durationMs && (
-              <span className="text-[9px] text-panel-text-5 shrink-0">
+              <span className="text-step-9 text-text-5 shrink-0">
                 {formatDuration(job.durationMs)}
               </span>
             )}
@@ -139,11 +139,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           {isRendering && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
-                <span className="text-[9px] text-panel-text-4">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-panel-accent">{job.progress}%</span>
+                <span className="text-step-9 text-text-4">{job.stage || "Rendering"}</span>
+                <span className="text-step-9 font-mono text-accent">{job.progress}%</span>
               </div>
               <div
-                className="w-full h-1 bg-panel-border rounded-full overflow-hidden"
+                className="w-full h-1 bg-border rounded-full overflow-hidden"
                 role="progressbar"
                 aria-valuenow={job.progress}
                 aria-valuemin={0}
@@ -151,7 +151,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                 aria-label={`Render progress: ${job.progress}%`}
               >
                 <div
-                  className="h-full bg-panel-accent rounded-full transition-all duration-300"
+                  className="h-full bg-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>
@@ -159,14 +159,14 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
 
           {job.status === "failed" && job.error && (
-            <span className="text-[9px] text-red-400 mt-0.5 block">{job.error}</span>
+            <span className="text-step-9 text-danger mt-0.5 block">{job.error}</span>
           )}
           {job.status === "cancelled" && (
-            <span className="text-[9px] text-panel-text-4 mt-0.5 block">Cancelled</span>
+            <span className="text-step-9 text-text-4 mt-0.5 block">Cancelled</span>
           )}
 
           {!isRendering && (
-            <span className="text-[9px] text-panel-text-5">{formatTimeAgo(job.createdAt)}</span>
+            <span className="text-step-9 text-text-5">{formatTimeAgo(job.createdAt)}</span>
           )}
         </div>
 
@@ -209,53 +209,58 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             </>
           ) : (
             <>
-              <button
-                onClick={isComplete ? handleDownload : undefined}
-                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent ${
-                  isComplete
-                    ? "text-panel-text-5 hover:text-panel-accent"
-                    : "text-panel-text-5/30 cursor-default"
-                }`}
-                title={isComplete ? "Download" : undefined}
-                aria-label={`Download ${job.filename}`}
-                disabled={!isComplete}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-                  <polyline points="7 10 12 15 17 10" />
-                  <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setConfirmingDelete(true);
-                }}
-                className="p-1.5 min-w-6 min-h-6 rounded-sm text-panel-text-5 hover:text-red-400 transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
-                title="Delete render file"
-                aria-label={`Delete ${job.filename}`}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                >
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              </button>
+              {/* The tooltip explains the control whether or not it is
+                  reachable; `disabled:` on the shared Button keeps pointer
+                  events alive precisely so a disabled one can still say why. */}
+              <Tooltip label={isComplete ? "Download" : "Available when the render finishes"}>
+                <IconButton
+                  size="sm"
+                  onClick={handleDownload}
+                  disabled={!isComplete}
+                  aria-label={`Download ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                      <polyline points="7 10 12 15 17 10" />
+                      <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
+              <Tooltip label="Delete render file">
+                <IconButton
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmingDelete(true);
+                  }}
+                  aria-label={`Delete ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M18 6L6 18M6 6l12 12" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
             </>
           )}
         </div>

package/src/components/ui/Select.tsx

@@ -11,6 +11,8 @@ import type { PreviewState } from "./Button";
 export interface SelectOption {
   label: string;
   value: string;
+  /** Offered but not choosable; the label stays visible so the reason stays visible too. */
+  disabled?: boolean;
 }
 
 export interface SelectProps {
@@ -81,11 +83,13 @@ export function Select({
                 <BaseSelect.Item
                   key={option.value}
                   value={option.value}
+                  disabled={option.disabled}
                   className={cn(
                     "flex h-ctl-sm cursor-pointer select-none items-center gap-2 px-2.5",
                     "text-step-11 text-text-2 outline-hidden",
                     "data-[highlighted]:bg-hover data-[highlighted]:text-text-0",
                     "data-[selected]:text-text-0",
+                    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
                   )}
                 >
                   <BaseSelect.ItemText className="truncate">{option.label}</BaseSelect.ItemText>

package/src/headerExports.test.tsx

@@ -0,0 +1,23 @@
+// @vitest-environment happy-dom
+// Imports the header logo and button size classes the way a host app does: by package name.
+import { createRoot } from "react-dom/client";
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+import { HyperframesLogo, buttonSizes } from "@hyperframes/studio";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe("header package exports", () => {
+  it("mounts the logo mark", async () => {
+    const el = document.createElement("div");
+    document.body.append(el);
+    const root = createRoot(el);
+    await act(async () => root.render(<HyperframesLogo />));
+    expect(el.querySelector("svg")).not.toBeNull();
+    await act(async () => root.unmount());
+  });
+
+  it("exposes the button size classes a host reuses for matching chrome", () => {
+    expect(buttonSizes.md).toEqual(expect.any(String));
+  });
+});

package/src/hooks/timelineAudioGroupCreate.ts

@@ -28,6 +28,19 @@ import {
   type UseTimelineElementVisibilityEditingInput,
 } from "./timelineTrackVisibility";
 
+interface AudioGroupCarveInput extends UseTimelineElementVisibilityEditingInput {
+  checkEditable?: (elements: readonly TimelineElement[]) => boolean;
+}
+
+function assertAudioGroupEditable(
+  checkEditable: AudioGroupCarveInput["checkEditable"],
+  elements: readonly TimelineElement[],
+): void {
+  if (checkEditable && !checkEditable(elements)) {
+    throw new Error("Timeline edit blocked");
+  }
+}
+
 /**
  * Assign (or restore) `data-audio-group` across a set of members.
  *
@@ -267,7 +280,8 @@ export function useAudioGroupCarveAssignment({
   previewIframeRef,
   pendingTimelineEditPathRef,
   isRecordingRef,
-}: UseTimelineElementVisibilityEditingInput): (
+  checkEditable,
+}: AudioGroupCarveInput): (
   clipIds: readonly string[],
   groupId: string,
   groupLabel?: string,
@@ -289,6 +303,7 @@ export function useAudioGroupCarveAssignment({
         const domId = runtimeAudioId(item);
         return domId !== null && wanted.has(domId);
       });
+      if (elements.length === wanted.size) assertAudioGroupEditable(checkEditable, elements);
       try {
         // Loud, not silent: an unresolved id used to leave `elements` short,
         // `createAudioGroupAndAssignMembers` returning early with no write, and
@@ -333,6 +348,7 @@ export function useAudioGroupCarveAssignment({
       isRecordingRef,
       showToast,
       projectIdRef,
+      checkEditable,
     ],
   );
 }

package/src/hooks/timelineAudioGroupVolume.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { HF_AUDIO_FX_ATTR } from "@hyperframes/core/audio-fx";
 import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
 import { usePlayerStore } from "../player";
@@ -29,6 +29,10 @@ function patchLiveGroupAttribute(
   invalidateGroupInfoCache(iframe?.contentDocument);
 }
 
+function audioGroupAttributeLiveKey(groupId: string, attr: string): string {
+  return `${groupId}\0${attr}`;
+}
+
 /**
  * `data-volume` exactly as core reads it (`readAudioGroupVolume`): an absent or
  * empty attribute is UNITY, not zero.
@@ -210,9 +214,16 @@ export function useSetAudioGroupAttribute({
 }: UseTimelineElementVisibilityEditingInput): {
   setLive: (groupId: string, attr: string, value: string | null) => void;
   setQuiet: (groupId: string, attr: string, value: string | null, label: string) => Promise<void>;
+  revertLive: (groupId: string, attr: string) => void;
 } {
+  const liveBeforeRef = useRef(new Map<string, string | null>());
   const setLive = useCallback(
     (groupId: string, attr: string, value: string | null) => {
+      const key = audioGroupAttributeLiveKey(groupId, attr);
+      const target = previewIframeRef.current?.contentDocument?.getElementById(groupId);
+      if (!liveBeforeRef.current.has(key)) {
+        liveBeforeRef.current.set(key, target?.getAttribute(attr) ?? null);
+      }
       patchLiveGroupAttribute(previewIframeRef.current, groupId, attr, value);
       // Live too, not just on commit: a fader drag is `setLive` per frame and
       // `setQuiet` once on release, so without this the strip's own readout
@@ -221,6 +232,26 @@ export function useSetAudioGroupAttribute({
     },
     [previewIframeRef],
   );
+  const revertLive = useCallback(
+    (groupId: string, attr: string) => {
+      const key = audioGroupAttributeLiveKey(groupId, attr);
+      if (!liveBeforeRef.current.has(key)) return;
+      patchLiveGroupAttribute(
+        previewIframeRef.current,
+        groupId,
+        attr,
+        liveBeforeRef.current.get(key) ?? null,
+      );
+      syncStoredGroupAttribute(
+        groupId,
+        attr,
+        previewIframeRef.current?.contentDocument?.getElementById(groupId)?.getAttribute(attr) ??
+          null,
+      );
+      liveBeforeRef.current.delete(key);
+    },
+    [previewIframeRef],
+  );
   const setQuiet = useCallback(
     async (groupId: string, attr: string, value: string | null, label: string) => {
       if (isRecordingRef?.current) {
@@ -242,6 +273,7 @@ export function useSetAudioGroupAttribute({
           recordEdit,
           pendingTimelineEditPathRef,
         });
+        liveBeforeRef.current.delete(audioGroupAttributeLiveKey(groupId, attr));
         syncStoredGroupAttribute(groupId, attr, value);
       } catch (error) {
         // `persistElementAttribute` leaves the live DOM at the previous value
@@ -257,6 +289,7 @@ export function useSetAudioGroupAttribute({
         console.error("[Timeline] Failed to set group attribute", error);
         const message = error instanceof Error ? error.message : "Failed to update group";
         showToast(message);
+        liveBeforeRef.current.delete(audioGroupAttributeLiveKey(groupId, attr));
       }
     },
     [
@@ -270,5 +303,5 @@ export function useSetAudioGroupAttribute({
       projectIdRef,
     ],
   );
-  return { setLive, setQuiet };
+  return { setLive, setQuiet, revertLive };
 }

package/src/hooks/timelineElementFxAttribute.ts

@@ -7,7 +7,7 @@
  * shared core `setAudioGroupAttribute` also uses.
  */
 
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import type { TimelineElement } from "../player";
 import {
   buildPatchTarget,
@@ -32,6 +32,14 @@ function patchLiveElementAttribute(
   else target.setAttribute(attr, value);
 }
 
+function elementAttributeLiveKey(
+  element: TimelineElement,
+  activeCompPath: string | null,
+  attr: string,
+): string {
+  return `${element.sourceFile || activeCompPath || "index.html"}\0${element.key ?? element.domId ?? element.id}\0${attr}`;
+}
+
 interface SetElementAttributeInput {
   projectId: string;
   activeCompPath: string | null;
@@ -92,13 +100,35 @@ export function useSetElementAttribute({
     value: string | null,
     label: string,
   ) => Promise<void>;
+  revertLive: (element: TimelineElement, attr: string) => void;
 } {
+  const liveBeforeRef = useRef(new Map<string, string | null>());
   const setLive = useCallback(
     (element: TimelineElement, attr: string, value: string | null) => {
+      const key = elementAttributeLiveKey(element, activeCompPath, attr);
+      const target = findTimelineElementInIframe(previewIframeRef.current, element, activeCompPath);
+      if (!liveBeforeRef.current.has(key)) {
+        liveBeforeRef.current.set(key, target?.getAttribute(attr) ?? null);
+      }
       patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath);
     },
     [previewIframeRef, activeCompPath],
   );
+  const revertLive = useCallback(
+    (element: TimelineElement, attr: string) => {
+      const key = elementAttributeLiveKey(element, activeCompPath, attr);
+      if (!liveBeforeRef.current.has(key)) return;
+      patchLiveElementAttribute(
+        previewIframeRef.current,
+        element,
+        attr,
+        liveBeforeRef.current.get(key) ?? null,
+        activeCompPath,
+      );
+      liveBeforeRef.current.delete(key);
+    },
+    [previewIframeRef, activeCompPath],
+  );
   const setQuiet = useCallback(
     async (element: TimelineElement, attr: string, value: string | null, label: string) => {
       if (isRecordingRef?.current) {
@@ -120,10 +150,12 @@ export function useSetElementAttribute({
           recordEdit,
           pendingTimelineEditPathRef,
         });
+        liveBeforeRef.current.delete(elementAttributeLiveKey(element, activeCompPath, attr));
       } catch (error) {
         console.error("[Timeline] Failed to set element attribute", error);
         const message = error instanceof Error ? error.message : "Failed to update effect";
         showToast(message);
+        liveBeforeRef.current.delete(elementAttributeLiveKey(element, activeCompPath, attr));
       }
     },
     [
@@ -137,5 +169,5 @@ export function useSetElementAttribute({
       projectIdRef,
     ],
   );
-  return { setLive, setQuiet };
+  return { setLive, setQuiet, revertLive };
 }

package/src/hooks/useRightPanelIntents.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useDockLayoutStore, visiblePanelInZone } from "../components/dock/dockLayoutStore";
 
-/** Opens the Slideshow panel when the file becomes a slideshow and closes it when it stops being one; a user's own close, and a restored layout's placement, stick. */
+/** Opens the Slideshow panel when the file becomes a slideshow, closes it when it stops being one.
+ * A user's own close, and a restored layout's placement, stick. */
 export function useSlideshowDockPanel(isSlideshowComposition: boolean) {
   const controller = useDockLayoutStore((state) => state.controller);
   const wasSlideshow = useRef(false);

package/src/hooks/useTimelineAssetDropOps.test.tsx

@@ -16,19 +16,29 @@ afterEach(() => {
 });
 
 type DropFn = ReturnType<typeof useTimelineAssetDropOps>["handleTimelineAssetDrop"];
+type FileDropFn = ReturnType<typeof useTimelineAssetDropOps>["handleTimelineFileDrop"];
+type CompositionDropFn = ReturnType<
+  typeof useTimelineAssetDropOps
+>["handleTimelineCompositionDrop"];
 
 function renderDropHook(
   sourceContent: string,
   writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
   timelineElements: TimelineElement[] = [],
+  checkEditable?: (targets: readonly TimelineElement[]) => boolean,
+  uploadProjectFiles: (files: Iterable<File>, dir?: string) => Promise<string[]> = vi
+    .fn()
+    .mockResolvedValue([]),
 ) {
   vi.stubGlobal(
     "fetch",
     vi.fn().mockResolvedValue({ ok: true, json: async () => ({ content: sourceContent }) }),
   );
   let drop: DropFn | null = null;
+  let fileDrop: FileDropFn | null = null;
+  let compositionDrop: CompositionDropFn | null = null;
   function Harness() {
-    const { handleTimelineAssetDrop } = useTimelineAssetDropOps({
+    const handlers = useTimelineAssetDropOps({
       projectIdRef: { current: "project" },
       activeCompPath: "index.html",
       timelineElements,
@@ -36,13 +46,19 @@ function renderDropHook(
       writeProjectFile,
       recordEdit: vi.fn().mockResolvedValue(undefined),
       reloadPreview: vi.fn(),
-      uploadProjectFiles: vi.fn().mockResolvedValue([]),
+      uploadProjectFiles,
+      checkEditable,
     });
-    drop = handleTimelineAssetDrop;
+    drop = handlers.handleTimelineAssetDrop;
+    fileDrop = handlers.handleTimelineFileDrop;
+    compositionDrop = handlers.handleTimelineCompositionDrop;
     return null;
   }
   mountReactHarness(<Harness />);
-  return () => drop!;
+  return Object.assign(() => drop!, {
+    file: () => fileDrop!,
+    composition: () => compositionDrop!,
+  });
 }
 
 describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
@@ -124,4 +140,46 @@ describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
     expect(written).toContain('id="hidden" data-start="0" data-track-index="1"');
     expect(written).toMatch(/<video id="clip"[^>]*data-track-index="1"/);
   });
+
+  it("refuses an asset drop before reading or writing when editing is blocked", async () => {
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const checkEditable = vi.fn(() => false);
+    const getDrop = renderDropHook(
+      '<main data-composition-id="scene" data-duration="10"></main>',
+      writeProjectFile,
+      [],
+      checkEditable,
+    );
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 1, track: 0 }, 2);
+    });
+
+    expect(writeProjectFile).not.toHaveBeenCalled();
+    expect(checkEditable).toHaveBeenCalledWith([
+      expect.objectContaining({ sourceFile: "index.html", start: 1, track: 0 }),
+    ]);
+  });
+
+  it("refuses file and composition drops before their writes when editing is blocked", async () => {
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const uploadProjectFiles = vi.fn().mockResolvedValue(["clip.mp4"]);
+    const getDrop = renderDropHook(
+      '<main data-composition-id="scene" data-duration="10"></main>',
+      writeProjectFile,
+      [],
+      () => false,
+      uploadProjectFiles,
+    );
+    const fetchMock = vi.mocked(globalThis.fetch);
+
+    await act(async () => {
+      await getDrop.file()([new File(["clip"], "clip.mp4")], { start: 1, track: 0 });
+      await getDrop.composition()("scene.html", { start: 1, track: 0 });
+    });
+
+    expect(uploadProjectFiles).not.toHaveBeenCalled();
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(writeProjectFile).not.toHaveBeenCalled();
+  });
 });