@hyperframes/studio 0.8.9 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "",
   "repository": {
     "type": "git",
@@ -47,11 +47,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.9",
-    "@hyperframes/parsers": "0.8.9",
-    "@hyperframes/sdk": "0.8.9",
-    "@hyperframes/studio-server": "0.8.9",
-    "@hyperframes/player": "0.8.9"
+    "@hyperframes/core": "0.8.11",
+    "@hyperframes/parsers": "0.8.11",
+    "@hyperframes/player": "0.8.11",
+    "@hyperframes/studio-server": "0.8.11",
+    "@hyperframes/sdk": "0.8.11"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -68,7 +68,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.9"
+    "@hyperframes/producer": "0.8.11"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/renders/useRenderQueue.ts

@@ -250,12 +250,19 @@ export function useRenderQueue(projectId: string | null) {
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(body),
         });
-      } catch {
+      } catch (err) {
+        // The cause used to be discarded. Every failure — a dead server, an
+        // aborted request, a DNS error, a mid-render crash — surfaced as the
+        // same sentence, and this string is what travels into the feedback
+        // report too, so field reports of a render that fails *every time*
+        // still carried nothing to act on. Keep the CLI guidance, name the
+        // cause after it.
+        const cause = err instanceof Error ? err.message : String(err);
         const failedJob: RenderJob = {
           id: generateId(),
           status: "failed",
           progress: 0,
-          error: "Could not reach render server. Use `hyperframes render` from the CLI instead.",
+          error: `Could not reach render server: ${cause}. Use \`hyperframes render\` from the CLI instead.`,
           filename: "Export failed",
           createdAt: startTime,
         };

package/src/components/renders/useRenderQueueTransportError.test.tsx

@@ -0,0 +1,49 @@
+// @vitest-environment happy-dom
+
+// The render POST's catch used to discard its error, so a dead server, a DNS
+// failure and a mid-render crash all produced one sentence. That string is also
+// what travels into the feedback report, so three field reports — one of them a
+// render that failed EVERY time — arrived with nothing to act on.
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { mountRenderQueue } from "./renderQueueTestHarness";
+
+vi.mock("./useFfmpegStatus", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./useFfmpegStatus")>()),
+  useFfmpegStatus: () => ({ status: { ok: true }, checking: false, recheck: vi.fn() }),
+}));
+vi.mock("../../telemetry/events", () => ({ trackStudioRenderStart: vi.fn() }));
+
+const { useRenderQueue } = await import("./useRenderQueue");
+
+let queue: ReturnType<typeof mountRenderQueue> | null = null;
+
+beforeEach(() => {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(() => Promise.reject(new TypeError("Failed to fetch"))),
+  );
+});
+
+afterEach(() => {
+  queue?.unmount();
+  queue = null;
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+});
+
+describe("useRenderQueue transport failure", () => {
+  it("names the cause instead of collapsing every failure into one sentence", async () => {
+    queue = mountRenderQueue(useRenderQueue);
+    const { act } = await import("react");
+    await act(async () => {
+      await queue?.api().startRender({});
+    });
+
+    const job = queue.api().jobs.at(-1);
+    expect(job?.status).toBe("failed");
+    expect(job?.error).toContain("Failed to fetch");
+    // The CLI guidance still earns its place; it just no longer stands alone.
+    expect(job?.error).toContain("hyperframes render");
+  });
+});

package/src/player/components/TimelineFxButton.test.tsx

@@ -68,6 +68,37 @@ describe("TimelineFxButton", () => {
     expect(document.querySelector('[role="dialog"]')).toBeTruthy();
   });
 
+  // The reported symptom was "the grouping button did nothing". The dialog WAS
+  // opening — it positioned at `anchorRect.bottom + 4` with no flip and no
+  // clamp, and this button lives in a track header at the bottom of the studio
+  // window, so it opened past the viewport edge. The test below it passed
+  // throughout: happy-dom reports an all-zero rect for an unlaid-out button,
+  // which lands the dialog at top:4 — on screen, and nothing like the app.
+  it("flips the group dialog above the anchor when there is no room below", () => {
+    const host = mount(<TimelineFxButton variant="group-pointer" onGroupClips={vi.fn()} />);
+    const fx = byTextButton(host, "FX");
+    // A track header near the bottom edge of the (1024x768) window.
+    fx!.getBoundingClientRect = () =>
+      ({ left: 300, top: 760, right: 320, bottom: 776, width: 20, height: 16 }) as DOMRect;
+    act(() => fx?.click());
+    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
+    expect(dialog).toBeTruthy();
+    // Above the anchor, and fully inside the viewport: 644 + 112 === 756.
+    expect(dialog.style.top).toBe("644px");
+  });
+
+  it("keeps the group dialog inside the right edge of the window", () => {
+    const host = mount(<TimelineFxButton variant="group-pointer" onGroupClips={vi.fn()} />);
+    const fx = byTextButton(host, "FX");
+    // Hard against the right edge: 224px wide + a 12px margin has to fit.
+    fx!.getBoundingClientRect = () =>
+      ({ left: 1010, top: 100, right: 1024, bottom: 116, width: 14, height: 16 }) as DOMRect;
+    act(() => fx?.click());
+    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
+    expect(dialog.style.left).toBe("788px");
+    expect(dialog.style.top).toBe("120px");
+  });
+
   it("group-pointer variant offers Group instead of a popover", () => {
     const onGroupClips = vi.fn();
     const host = mount(<TimelineFxButton variant="group-pointer" onGroupClips={onGroupClips} />);

package/src/player/components/TimelineFxButton.tsx

@@ -18,6 +18,24 @@ import {
 } from "@hyperframes/core/audio-fx";
 import type { HfAudioNameKind } from "@hyperframes/core/audio-carve";
 import { TimelineFxPopover } from "../../components/editor/TimelineFxPopover.js";
+import { resolveFloatingPanelPosition } from "../../components/editor/floatingPanel.js";
+
+// Estimated, like FORMAT_PANEL_SIZE in RenderQueue: `w-56` is exact, and only
+// the flip decision uses the height — the clamp keeps the dialog on screen
+// either way.
+const GROUP_DIALOG_SIZE = { width: 224, height: 112 };
+
+/** Where the grouping dialog goes: flipped above the anchor when there is no
+ *  room below, and clamped so neither edge leaves the viewport. */
+function groupDialogPosition(anchorRect: DOMRect): { left: number; top: number } {
+  const { left, top } = resolveFloatingPanelPosition(
+    anchorRect,
+    { width: window.innerWidth, height: window.innerHeight },
+    GROUP_DIALOG_SIZE,
+    { offset: 4 },
+  );
+  return { left, top };
+}
 
 function parseFxChainOrEmpty(raw: string | undefined): HfAudioFxChain {
   if (!raw) return { version: 1, nodes: [] };
@@ -80,7 +98,12 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
               role="dialog"
               aria-label="Group these clips to add effects"
               className="z-[200] w-56 rounded-md border border-white/10 bg-[#1b1b1f] p-2.5 text-[11px] text-white/75 shadow-xl"
-              style={{ position: "fixed", left: anchorRect.left, top: anchorRect.bottom + 4 }}
+              // Was `top: anchorRect.bottom + 4` with no flip and no clamp. This
+              // button lives in a track header at the BOTTOM of the studio
+              // window, so the dialog opened past the viewport edge and the
+              // click read as doing nothing at all. Same helper the other body
+              // portals position with.
+              style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
               onPointerDown={(event) => event.stopPropagation()}
             >
               <p>Group these clips to add effects to all of them.</p>