@hyperframes/studio 0.7.106 → 0.7.107

package/package.json

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

package/src/components/EditorShell.tsx

@@ -8,7 +8,6 @@ import {
 } from "./nle/useTimelineEditCallbacks";
 import { NLEProvider, useNLEContext } from "./nle/NLEContext";
 import { CaptionTimeline } from "../captions/components/CaptionTimeline";
-import { StudioFeedbackBar } from "./StudioFeedbackBar";
 import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
 import { useDomEditActionsContext, useDomEditSelectionContext } from "../contexts/DomEditContext";
 import { TimelineEditProvider } from "../contexts/TimelineEditContext";
@@ -189,7 +188,6 @@ export function EditorShell({
           />
         </NLEProvider>
       </TimelineEditProvider>
-      <StudioFeedbackBar />
     </div>
   );
 }

package/src/components/StudioErrorBoundary.test.tsx

@@ -0,0 +1,97 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+vi.mock("../telemetry/policy", () => ({ browserTelemetryAllowed: () => true }));
+vi.mock("../telemetry/events", () => ({
+  trackStudioFeedback: vi.fn(),
+  trackStudioFeedbackShown: vi.fn(),
+  trackStudioFeedbackDismissed: vi.fn(),
+  trackStudioFeedbackInterviewClick: vi.fn(),
+}));
+
+const { StudioErrorBoundary } = await import("./StudioErrorBoundary");
+const { trackStudioFeedbackShown } = await import("../telemetry/events");
+
+function Boom(): React.ReactElement {
+  throw new Error("timeline exploded");
+}
+
+let container: HTMLDivElement;
+let root: ReturnType<typeof createRoot>;
+let consoleError: ReturnType<typeof vi.spyOn>;
+
+beforeEach(() => {
+  localStorage.clear();
+  sessionStorage.clear();
+  vi.clearAllMocks();
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  // React logs the caught error itself; the boundary is the thing under test.
+  consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  consoleError.mockRestore();
+});
+
+const renderCrashed = () =>
+  act(() => {
+    root.render(
+      <StudioErrorBoundary>
+        <Boom />
+      </StudioErrorBoundary>,
+    );
+  });
+
+describe("StudioErrorBoundary", () => {
+  it("shows the crash screen with the error message and both recovery paths", () => {
+    renderCrashed();
+    expect(container.textContent).toContain("Something went wrong");
+    expect(container.textContent).toContain("timeline exploded");
+    expect(container.textContent).toContain("Try again");
+    expect(container.textContent).toContain("Reload Studio");
+  });
+
+  it("asks what the user was doing, since the stack trace cannot say", () => {
+    renderCrashed();
+    const card = container.querySelector('[aria-label="Send feedback to the HyperFrames team"]');
+    expect(card).not.toBeNull();
+    expect(card?.textContent).toContain("Studio crashed. What were you doing?");
+  });
+
+  it("offers one-tap answers instead of a 0-10 score", () => {
+    renderCrashed();
+    const card = container.querySelector('[aria-label="Send feedback to the HyperFrames team"]');
+    const chips = [...(card?.querySelectorAll("button") ?? [])]
+      .map((b) => b.textContent?.trim())
+      .filter((t) => t && t !== "Send");
+    expect(chips).toContain("Editing the timeline");
+    expect(chips).toContain("Just opened it");
+    // Rating a crash is a question with no useful answer.
+    expect(card?.querySelector('input[name="hf-studio-feedback-rating"]')).toBeNull();
+  });
+
+  it("reports the crash prompt to telemetry so the funnel is visible", () => {
+    renderCrashed();
+    expect(trackStudioFeedbackShown).toHaveBeenCalledWith(
+      expect.objectContaining({ reason: "crash" }),
+    );
+  });
+
+  it("stays quiet when the user already gave feedback recently", () => {
+    localStorage.setItem("hyperframes-studio:feedbackAnsweredAt", String(Date.now()));
+    renderCrashed();
+    // The crash screen itself still works; only the ask is suppressed.
+    expect(container.textContent).toContain("Something went wrong");
+    expect(
+      container.querySelector('[aria-label="Send feedback to the HyperFrames team"]'),
+    ).toBeNull();
+  });
+});

package/src/components/StudioErrorBoundary.tsx

@@ -1,5 +1,6 @@
 import { Component, type ErrorInfo, type ReactNode } from "react";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { CrashFeedbackPrompt } from "./feedback/CrashFeedbackPrompt";
 
 interface Props {
   children: ReactNode;
@@ -51,6 +52,12 @@ export class StudioErrorBoundary extends Component<Props, State> {
             Reload Studio
           </button>
         </div>
+        {/* The crash report tells us what broke; only the user can tell us what
+            they were doing when it did. This is also the one screen where they
+            have nothing else to get on with. */}
+        <div className="mt-6">
+          <CrashFeedbackPrompt />
+        </div>
       </div>
     );
   }

package/src/components/StudioOverlays.tsx

@@ -3,6 +3,7 @@ import { LintModal } from "./LintModal";
 import { AskAgentModal } from "./AskAgentModal";
 import { StudioGlobalDragOverlay } from "./StudioGlobalDragOverlay";
 import { StudioToast } from "./StudioToast";
+import { StudioFeedbackCard } from "./feedback/StudioFeedbackCard";
 import { buildAgentContextPreview } from "./editor/domEditingAgentPrompt";
 import type { useDomEditSession } from "../hooks/useDomEditSession";
 import type { useToast } from "../hooks/useToast";
@@ -78,19 +79,20 @@ export function StudioOverlays({
         />
       )}
       {dragOverlayActive && <StudioGlobalDragOverlay />}
-      {toasts.length > 0 && (
-        <div className="absolute bottom-6 right-6 z-[91] flex flex-col items-end gap-2">
-          {toasts.map((toast) => (
-            <StudioToast
-              key={toast.id}
-              message={toast.message}
-              tone={toast.tone}
-              leaving={toast.leaving}
-              onDismiss={() => dismissToast(toast.id)}
-            />
-          ))}
-        </div>
-      )}
+      {/* One bottom-right stack so the feedback card and toasts queue instead
+          of covering each other. Empty when nothing is showing. */}
+      <div className="absolute bottom-6 right-6 z-[91] flex flex-col items-end gap-2">
+        {toasts.map((toast) => (
+          <StudioToast
+            key={toast.id}
+            message={toast.message}
+            tone={toast.tone}
+            leaving={toast.leaving}
+            onDismiss={() => dismissToast(toast.id)}
+          />
+        ))}
+        <StudioFeedbackCard />
+      </div>
     </>
   );
 }

package/src/components/editor/DomEditOverlay.tsx

@@ -16,7 +16,7 @@ import {
   resolveShiftClickCandidate,
 } from "./domEditOverlayGestures";
 import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
-import { OffCanvasIndicators, type OffCanvasRect } from "./OffCanvasIndicators";
+import { ChildRectOutlines, OffCanvasIndicators, type OffCanvasRect } from "./OffCanvasIndicators";
 import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
 import { useDomEditNudge } from "./useDomEditNudge";
 import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
@@ -30,6 +30,7 @@ import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { startOffCanvasIndicatorRefresh } from "./offCanvasIndicatorRefresh";
 import { CanvasContextMenu } from "./CanvasContextMenu";
+import { useInlineTextEditing } from "./useInlineTextEditing";
 import type { ZOrderAction, ZOrderPatch } from "./canvasContextMenuZOrder";
 import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
 import { logSelect } from "../../utils/selectDebug";
@@ -164,6 +165,9 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   groupSelectionsRef.current = groupSelections;
   const hoverSelectionRef = useRef(hoverSelection);
   hoverSelectionRef.current = hoverSelection;
+
+  // Double-click an element to edit its text where it sits.
+  const inlineText = useInlineTextEditing(selectionRef);
   const onPathOffsetCommitRef = useRef(onPathOffsetCommit);
   onPathOffsetCommitRef.current = onPathOffsetCommit;
   const onGroupPathOffsetCommitRef = useRef(onGroupPathOffsetCommit);
@@ -370,6 +374,16 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       return;
     }
 
+    // A second press on the same spot opens that element's text. This is the
+    // press path that actually runs: the pointer handler prevents the default
+    // on its way through, so the overlay's own mousedown never fires, and the
+    // browser never pairs the presses into a dblclick either.
+    if (inlineText.startFromPress(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
     const target = event.target as HTMLElement | null;
     if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
 
@@ -449,7 +463,12 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   return (
     <div
       ref={overlayRef}
-      className="absolute inset-0 z-10 pointer-events-auto outline-none"
+      // Standing aside is the only way the caret below can be reached, and is
+      // what keeps selection, drag and marquee from firing mid-edit.
+      className={`absolute inset-0 z-10 outline-none ${
+        inlineText.editing ? "pointer-events-none" : "pointer-events-auto"
+      }`}
+      data-editing-text={inlineText.editing ? "true" : undefined}
       tabIndex={-1}
       aria-label="Composition canvas"
       // Cursor follows marquee rect *state* (re-renders), not the mutable ref.
@@ -458,7 +477,15 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         // A pointer gesture supersedes a pending nudge burst — commit it first
         // so the gesture's member snapshot starts from the nudged position.
         flushNudge();
-        focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay);
+        // Not while editing: taking focus back would send the keystroke nowhere.
+        if (!inlineText.editing) {
+          focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay);
+        }
+      }}
+      onKeyDown={(event) => {
+        if (!inlineText.handleKeyDown(event)) return;
+        event.preventDefault();
+        event.stopPropagation();
       }}
       onPointerDown={handleOverlayPointerDown}
       onMouseDown={handleOverlayMouseDown}
@@ -492,6 +519,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       )}
       {!hasGroupSelection && selection && overlayRect && compRect.width > 0 && (
         <DomEditSelectionChrome
+          inlineText={inlineText}
           selection={selection}
           overlayRect={overlayRect}
           allowCanvasMovement={allowCanvasMovement}
@@ -508,21 +536,11 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           onBoxClick={handleBoxClick}
         />
       )}
-      {childRects.length > 0 &&
-        compRect.width > 0 &&
-        childRects.map((cr, i) => (
-          <div
-            key={i}
-            className="pointer-events-none absolute border border-dashed border-white/20 rounded-sm"
-            style={{
-              left: cr.left,
-              top: cr.top,
-              width: cr.width,
-              height: cr.height,
-              transform: cr.angle ? `rotate(${cr.angle}deg)` : undefined,
-            }}
-          />
-        ))}
+      <ChildRectOutlines rects={compRect.width > 0 ? childRects : []} />
+      {/* Mounted here rather than with the selection chrome: the chrome does
+          not render for every selection, and the toolbar belongs to the
+          editing session, which does. */}
+      {inlineText.toolbar}
       <OffCanvasIndicators
         rects={offCanvasRects}
         elements={offCanvasElementsRef}

package/src/components/editor/DomEditSelectionChrome.test.tsx

@@ -132,3 +132,88 @@ describe("DomEditSelectionChrome crop composition", () => {
     act(() => root.unmount());
   });
 });
+
+// The bug: the overlay above the preview goes pointer-events-none while text is
+// being edited, but `pointer-events: none` on a parent does not disable a child
+// that sets `auto`. The selection box covers exactly the element being typed
+// into, so it kept swallowing every press: the caret could only ever be placed
+// once, when the edit opened, and dragging across characters did nothing.
+describe("DomEditSelectionChrome while editing text", () => {
+  const CAPABLE = {
+    canCrop: true,
+    canApplyManualOffset: true,
+    canApplyManualSize: true,
+    canApplyManualRotation: true,
+  };
+
+  function renderChrome(editing: boolean) {
+    const element = document.createElement("div");
+    element.id = "copy";
+    document.body.append(element);
+    const selection = {
+      element,
+      id: "copy",
+      selector: "#copy",
+      capabilities: CAPABLE,
+    } as unknown as DomEditSelection;
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <DomEditSelectionChrome
+          selection={selection}
+          overlayRect={{ left: 10, top: 20, width: 200, height: 60, editScaleX: 1, editScaleY: 1 }}
+          allowCanvasMovement={true}
+          boxRef={createRef()}
+          boxChromeClass="border border-studio-accent/80"
+          boxClipPath={undefined}
+          selectionKey="copy"
+          groupSelectionCount={0}
+          blockedMoveRef={createRef()}
+          gestures={{ startGesture: vi.fn() } as never}
+          onStyleCommit={vi.fn()}
+          onBoxMouseDown={vi.fn()}
+          onBoxClick={vi.fn()}
+          inlineText={{ editing, startFromPress: vi.fn() }}
+        />,
+      );
+    });
+    return { host, unmount: () => act(() => root.unmount()) };
+  }
+
+  it("stops the selection box taking presses, so they reach the caret below", () => {
+    const { host, unmount } = renderChrome(true);
+    const box = host.querySelector<HTMLElement>('[data-dom-edit-selection-box="true"]')!;
+    expect(box.className).toContain("pointer-events-none");
+    expect(box.className).not.toContain("pointer-events-auto");
+    unmount();
+  });
+
+  it("keeps the box interactive when no text is being edited", () => {
+    const { host, unmount } = renderChrome(false);
+    const box = host.querySelector<HTMLElement>('[data-dom-edit-selection-box="true"]')!;
+    expect(box.className).toContain("pointer-events-auto");
+    unmount();
+  });
+
+  it("still marks the edited element, so it is clear which one has the caret", () => {
+    const { host, unmount } = renderChrome(true);
+    const box = host.querySelector<HTMLElement>('[data-dom-edit-selection-box="true"]')!;
+    expect(box.className).toContain("border-studio-accent/80");
+    unmount();
+  });
+
+  it("takes away every handle that would sit over the text", () => {
+    const { host, unmount } = renderChrome(true);
+    expect(host.querySelectorAll(".pointer-events-auto")).toHaveLength(0);
+    expect(host.querySelector("[data-dom-edit-crop-frame]")).toBeNull();
+    unmount();
+  });
+
+  it("keeps the handles when nothing is being edited", () => {
+    const { host, unmount } = renderChrome(false);
+    expect(host.querySelectorAll(".pointer-events-auto").length).toBeGreaterThan(1);
+    unmount();
+  });
+});

package/src/components/editor/DomEditSelectionChrome.tsx

@@ -126,6 +126,12 @@ interface DomEditSelectionChromeProps {
   onStyleCommit?: (property: string, value: string) => Promise<void> | void;
   onBoxMouseDown: (e: React.MouseEvent) => void;
   onBoxClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+  /** The canvas' text-editing session: what opens one, and whether one is open. */
+  inlineText?: {
+    editing: boolean;
+    /** Every press on the box. Returns true when it opened a text edit. */
+    startFromPress: (event: React.PointerEvent) => boolean;
+  };
 }
 
 // Oriented selection chrome: a rotation wrapper spanning the overlay, rotated by
@@ -149,7 +155,16 @@ export function DomEditSelectionChrome({
   onStyleCommit,
   onBoxMouseDown,
   onBoxClick,
+  inlineText,
 }: DomEditSelectionChromeProps) {
+  // While the text is being edited the chrome is a mark, not a control. The
+  // overlay above the preview already stands aside for the caret, but
+  // `pointer-events: none` on a parent does not disable a child that asks for
+  // them back, and the box is positioned to cover exactly the text being typed
+  // into: left interactive, it swallows every press, so the caret can never be
+  // moved and characters can never be selected by dragging.
+  const editing = inlineText?.editing ?? false;
+
   return (
     <>
       <div
@@ -159,7 +174,7 @@ export function DomEditSelectionChrome({
           transform: overlayRect.angle ? `rotate(${overlayRect.angle}deg)` : undefined,
         }}
       >
-        {allowCanvasMovement && selection.capabilities.canApplyManualRotation && (
+        {allowCanvasMovement && !editing && selection.capabilities.canApplyManualRotation && (
           <DomEditRotateHandle
             overlayRect={overlayRect}
             cropOutlineInsetPx={cropOutlineInsetPx}
@@ -173,7 +188,7 @@ export function DomEditSelectionChrome({
           key={selectionKey}
           ref={boxRef}
           data-dom-edit-selection-box="true"
-          className={`pointer-events-auto absolute rounded-md ${boxChromeClass}`}
+          className={`${editing ? "pointer-events-none" : "pointer-events-auto"} absolute rounded-md ${boxChromeClass}`}
           style={{
             left: overlayRect.left,
             top: overlayRect.top,
@@ -186,6 +201,16 @@ export function DomEditSelectionChrome({
                 : "default",
           }}
           onPointerDown={(e) => {
+            // A second press opens the element's text for editing, and must be
+            // caught here rather than on the canvas: this handler prevents the
+            // default on the first press, which suppresses the compatibility
+            // mousedown the canvas would otherwise see, and the pointer capture
+            // it takes stops the browser pairing the presses into a dblclick.
+            if (inlineText?.startFromPress(e)) {
+              e.preventDefault();
+              e.stopPropagation();
+              return;
+            }
             if (!allowCanvasMovement || e.shiftKey) return;
             if (selection.capabilities.canApplyManualOffset) {
               gestures.startGesture("drag", e);
@@ -221,6 +246,7 @@ export function DomEditSelectionChrome({
           is positioned relative to the overlay container using the
           overlayRect origin, matching the old child-relative offsets. */}
         {allowCanvasMovement &&
+          !editing &&
           selection.capabilities.canApplyManualSize &&
           RESIZE_HANDLE_DEFS.map((def) =>
             def.handle !== "se" && !selection.capabilities.canApplyManualOffset ? null : (
@@ -245,7 +271,7 @@ export function DomEditSelectionChrome({
       </div>
       {/* Crop owns its element-local oriented frame. Keep it outside the chrome's
           rotated plane or a rotated selection applies the angle twice. */}
-      {selection.capabilities.canCrop && groupSelectionCount <= 1 && (
+      {selection.capabilities.canCrop && !editing && groupSelectionCount <= 1 && (
         <DomEditCropHandles
           selection={selection}
           overlayRect={overlayRect}