@hyperframes/studio 0.7.106 → 0.7.107

package/src/hooks/useInlineTextEdit.ts

@@ -0,0 +1,320 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { sanitizeRichTextChildren } from "@hyperframes/core/rich-text-sanitize";
+
+/**
+ * Editing an element's text where it sits, in the composition itself.
+ *
+ * The alternative is an input positioned over the element, which has to
+ * reproduce its font, size, weight, spacing, colour, alignment and wrapping to
+ * look right, and is subtly wrong the moment any of those is missed. The
+ * preview is a same-origin document holding the real element, and the commit
+ * path already mutates that exact node, so the element is both the most
+ * accurate surface to type into and the one the rest of the code understands.
+ *
+ * The session owns the element's editable state for its whole life, and tears
+ * down the same way whichever way it ends. A session that failed to close
+ * would leave the canvas unable to select anything.
+ */
+
+/**
+ * `true`, not `plaintext-only`.
+ *
+ * `plaintext-only` was what kept a text edit from becoming a structural one,
+ * and it also made it impossible to give three characters a colour, which is
+ * the point of editing in the composition rather than in a field. The guard it
+ * was providing is rebuilt as two narrower ones that do not cost the feature:
+ * paste arrives as plain text, and what leaves the element goes through the
+ * sanitiser before anyone writes it to a file.
+ */
+const EDITABLE = "true";
+/** Studio's accent, so the mark belongs to Studio rather than to the design. */
+const EDITING_OUTLINE = "2px solid #3CE6AC";
+
+export interface InlineTextEditSession {
+  element: HTMLElement;
+  /**
+   * The element's markup when editing started, for putting back on cancel.
+   * Markup rather than text: cancelling an edit that recoloured a word has to
+   * restore the colours it replaced, not just the letters.
+   */
+  original: string;
+  /** The element's own outline, to put back when the session ends. */
+  outline: string;
+  /** The element's own outline offset, restored with the outline. */
+  outlineOffset: string;
+}
+
+/** The live markup to persist and the session snapshot to restore on failure. */
+export interface InlineTextEditCommit {
+  /** The exact preview node that owned the edit; a reload must not retarget it. */
+  element: HTMLElement;
+  html: string;
+  previousHtml: string;
+}
+
+export interface InlineTextEditControls {
+  session: InlineTextEditSession | null;
+  /**
+   * Begin editing this element. `caretAt` is a point in the element's own
+   * document, so the caret can open where the user pointed rather than at a
+   * fixed end. Returns false when a session is already open.
+   */
+  start: (element: HTMLElement, caretAt?: { x: number; y: number }) => boolean;
+  /** Hand the current text to the commit function and close. */
+  commit: () => void;
+  /** Put the original text back and close, persisting nothing. */
+  cancel: () => void;
+}
+
+/**
+ * Drop the text selection, but only when it lives inside this element.
+ *
+ * A selection somewhere else in the preview belongs to whatever put it there
+ * and is not this session's to clear.
+ */
+function clearSelectionWithin(element: HTMLElement): void {
+  const selection = element.ownerDocument.defaultView?.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  if (!element.contains(range.startContainer) && !element.contains(range.endContainer)) return;
+  selection.removeAllRanges();
+}
+
+export function useInlineTextEdit({
+  onCommit,
+  onPause,
+}: {
+  /** Where the edited text goes. The caller owns persistence. */
+  onCommit: (commit: InlineTextEditCommit) => void;
+  /** Stop playback, so the element is not animating under the caret. */
+  onPause?: () => void;
+}): InlineTextEditControls {
+  const [session, setSession] = useState<InlineTextEditSession | null>(null);
+  // The teardown reads this rather than the state, so an exit path that runs
+  // before React re-renders still sees the element it has to clean up.
+  const openRef = useRef<InlineTextEditSession | null>(null);
+  /** The pending caret placement, so a session that closes first can drop it. */
+  const framesRef = useRef<number | null>(null);
+
+  const teardown = useCallback((): InlineTextEditSession | null => {
+    const open = openRef.current;
+    if (!open) return null;
+    if (framesRef.current !== null) {
+      open.element.ownerDocument.defaultView?.cancelAnimationFrame(framesRef.current);
+      framesRef.current = null;
+    }
+    openRef.current = null;
+    setSession(null);
+    // An element removed from the document mid-session is not an error, it is
+    // just nothing left to clean up.
+    if (open.element.isConnected) {
+      open.element.removeAttribute("contenteditable");
+      // Restored rather than cleared: the composition may have authored one.
+      open.element.style.outline = open.outline;
+      open.element.style.outlineOffset = open.outlineOffset;
+      // Drop the highlight too. Removing contenteditable and blurring leaves a
+      // selection made inside the element painted on screen, so a word picked
+      // with a double press stayed grey after the click that closed the edit.
+      clearSelectionWithin(open.element);
+      open.element.blur();
+    }
+    return open;
+  }, []);
+
+  const start = useCallback(
+    (element: HTMLElement, caretAt?: { x: number; y: number }): boolean => {
+      if (openRef.current) return false;
+
+      const open = {
+        element,
+        original: element.innerHTML,
+        outline: element.style.outline,
+        outlineOffset: element.style.outlineOffset,
+      };
+      // Drawn on the element itself, not in Studio's overlay above it. This is
+      // the only mark that says the caret is in the TEXT rather than the
+      // element being selected, and it has to sit in the same document as the
+      // caret to read that way.
+      element.style.outline = EDITING_OUTLINE;
+      element.style.outlineOffset = "2px";
+      openRef.current = open;
+      setSession(open);
+      onPause?.();
+
+      element.setAttribute("contenteditable", EDITABLE);
+      // Focused and selected on the next frame, not now. The press that opened
+      // this is still in flight: the canvas overlay takes focus on its own
+      // pointer-down, and the click that follows puts a caret in the element
+      // and collapses any selection. Doing it after all of that is what lands.
+      const view = element.ownerDocument.defaultView;
+      const raf = view?.requestAnimationFrame(() => {
+        framesRef.current = null;
+        if (openRef.current?.element !== element) return;
+        element.focus({ preventScroll: true });
+        placeCaret(element, caretAt);
+      });
+      framesRef.current = raf ?? null;
+      return true;
+    },
+    [onPause],
+  );
+
+  const commit = useCallback(() => {
+    const open = openRef.current;
+    if (!open) return;
+    // Sanitised here, in the element, so the preview shows exactly what will be
+    // saved rather than something the server will quietly cut down.
+    sanitizeRichTextChildren(open.element);
+    const html = open.element.innerHTML;
+    teardown();
+    // After teardown, so the commit path's own resync does not fight an
+    // element that is still editable.
+    onCommit({ element: open.element, html, previousHtml: open.original });
+  }, [onCommit, teardown]);
+
+  const cancel = useCallback(() => {
+    const open = openRef.current;
+    if (!open) return;
+    if (open.element.isConnected) open.element.innerHTML = open.original;
+    teardown();
+  }, [teardown]);
+
+  // The keys belong to the element, not to the document: the element lives in
+  // the preview's own document, so a listener on Studio's would never see them.
+  useEffect(() => {
+    const element = session?.element;
+    if (!element) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Shift+Enter is a line break in a multi-line element, and is left alone.
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        commit();
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
+      }
+    };
+    // Clicking away keeps the work, which is what every other field in Studio
+    // does and what a user who has just typed something expects.
+    const onBlur = () => commit();
+    // Nothing here for double or triple click: the browser already takes the
+    // word on two and the whole text on three, which is what a text field does
+    // everywhere else. Overriding the double click to take everything cost the
+    // word selection and gained nothing the triple click did not already do.
+    // Dropping `plaintext-only` means the browser would otherwise paste a whole
+    // web page's markup straight in. What arrives is the words.
+    const insertPlainText = (text: string) => {
+      if (text) element.ownerDocument.execCommand("insertText", false, text);
+    };
+    const onPaste = (event: ClipboardEvent) => {
+      event.preventDefault();
+      insertPlainText(event.clipboardData?.getData("text/plain") ?? "");
+    };
+    // `contenteditable="true"` accepts dragged HTML as eagerly as pasted HTML.
+    // Keep the drop path on the same plain-text rail as paste so markup cannot
+    // execute in the same-origin preview before commit-time sanitisation.
+    const onDragOver = (event: DragEvent) => event.preventDefault();
+    const onDrop = (event: DragEvent) => {
+      event.preventDefault();
+      insertPlainText(event.dataTransfer?.getData("text/plain") ?? "");
+    };
+
+    element.addEventListener("keydown", onKeyDown);
+    element.addEventListener("blur", onBlur);
+    element.addEventListener("paste", onPaste);
+    element.addEventListener("dragover", onDragOver);
+    element.addEventListener("drop", onDrop);
+    return () => {
+      element.removeEventListener("keydown", onKeyDown);
+      element.removeEventListener("blur", onBlur);
+      element.removeEventListener("paste", onPaste);
+      element.removeEventListener("dragover", onDragOver);
+      element.removeEventListener("drop", onDrop);
+    };
+  }, [session, commit, cancel]);
+
+  // Navigation can remove the overlay while the opening frame is pending.
+  // Teardown is the single owner of cancelling that frame and restoring the
+  // composition node, so unmount closes through the same path as every exit.
+  useEffect(
+    () => () => {
+      teardown();
+    },
+    [teardown],
+  );
+
+  return { session, start, commit, cancel };
+}
+
+/**
+ * Put the caret where the user pointed, or after the last character.
+ *
+ * Opening on a point is what makes this feel like text rather than a dialog:
+ * the caret lands between the two letters that were clicked, exactly as it
+ * would in any other editor.
+ */
+function placeCaret(element: HTMLElement, at?: { x: number; y: number }): void {
+  const doc = element.ownerDocument;
+  const selection = doc.defaultView?.getSelection();
+  if (!selection) return;
+
+  const range = at ? caretRangeAt(doc, at) : null;
+  if (range && element.contains(range.startContainer)) {
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return;
+  }
+  placeCaretAtEnd(element);
+}
+
+/** The caret position under a point, across the two APIs browsers expose. */
+function caretRangeAt(doc: Document, at: { x: number; y: number }): Range | null {
+  const legacy = doc as Document & {
+    caretRangeFromPoint?: (x: number, y: number) => Range | null;
+  };
+  if (typeof legacy.caretRangeFromPoint === "function") {
+    return legacy.caretRangeFromPoint(at.x, at.y);
+  }
+  const standard = doc as Document & {
+    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
+  };
+  const position = standard.caretPositionFromPoint?.(at.x, at.y);
+  if (!position) return null;
+  const range = doc.createRange();
+  range.setStart(position.offsetNode, position.offset);
+  range.collapse(true);
+  return range;
+}
+
+/**
+ * Put the caret after the last character, with nothing selected.
+ *
+ * Selecting the whole text would mean the next keystroke silently destroys it,
+ * which is a bad thing to do to someone who double-clicked to fix a typo. A
+ * caret at the end is where a person who wants to keep typing expects to be,
+ * and everything else stays available: click anywhere to move it, drag to
+ * select, Cmd+A to take the lot.
+ */
+function placeCaretAtEnd(element: HTMLElement): void {
+  const doc = element.ownerDocument;
+  const selection = doc.defaultView?.getSelection();
+  if (!selection) return;
+  const range = doc.createRange();
+  // Into the text node, not just past the last child: collapsing the element's
+  // contents leaves the caret at a node boundary, which types in the right
+  // place but reports itself as "after child 0" and is a different position
+  // from the one the user sees at the end of the word.
+  const last = element.lastChild;
+  if (last && last.nodeType === 3) {
+    range.setStart(last, last.textContent?.length ?? 0);
+    range.collapse(true);
+  } else {
+    range.selectNodeContents(element);
+    range.collapse(false);
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/src/player/lib/playbackShortcuts.ts

@@ -6,15 +6,13 @@
  * is active and the user is navigating caption segments).
  */
 
+import { isTypingTarget } from "../../utils/typingTarget";
+
 const PLAYBACK_FRAME_STEP_CODES = new Set(["ArrowLeft", "ArrowRight"]);
 
 const PLAYBACK_SHORTCUT_IGNORED_SELECTOR = [
-  "input",
-  "textarea",
-  "select",
   "button",
   "a[href]",
-  "[contenteditable='true']",
   "[role='button']",
   "[role='checkbox']",
   "[role='combobox']",
@@ -27,6 +25,9 @@ const PLAYBACK_SHORTCUT_IGNORED_SELECTOR = [
 ].join(",");
 
 export function shouldIgnorePlaybackShortcutTarget(target: EventTarget | null): boolean {
+  // Anything the user is typing into owns its keys outright, editable elements
+  // included: a letter claimed here never reaches the text.
+  if (isTypingTarget(target)) return true;
   if (!target || typeof target !== "object") return false;
   const candidate = target as { closest?: unknown };
   if (typeof candidate.closest !== "function") return false;

package/src/telemetry/breadcrumbs.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { recordBreadcrumb, breadcrumbTrail, resetBreadcrumbs } from "./breadcrumbs";
+
+beforeEach(() => resetBreadcrumbs());
+
+describe("breadcrumbTrail", () => {
+  it("is empty before anything happens", () => {
+    expect(breadcrumbTrail()).toBe("");
+  });
+
+  it("records events oldest first with a seconds stamp", () => {
+    recordBreadcrumb("studio_session_start", {});
+    recordBreadcrumb("studio_render_start", {});
+    const trail = breadcrumbTrail();
+    expect(trail).toMatch(/^\d+\.\d session_start > \d+\.\d render_start$/);
+  });
+
+  it("strips the studio prefix from both event naming styles", () => {
+    recordBreadcrumb("studio_render_start", {});
+    recordBreadcrumb("studio:save_failure", {});
+    expect(breadcrumbTrail()).toContain("render_start");
+    expect(breadcrumbTrail()).toContain("save_failure");
+    expect(breadcrumbTrail()).not.toContain("studio_");
+    expect(breadcrumbTrail()).not.toContain("studio:");
+  });
+
+  it("keeps a short discriminator so an event says where it happened", () => {
+    recordBreadcrumb("studio:tab_switch", { tab: "renders" });
+    expect(breadcrumbTrail()).toContain("tab_switch:renders");
+  });
+
+  it("rolls, keeping the most recent run-up rather than the oldest history", () => {
+    for (let i = 0; i < 40; i++) recordBreadcrumb(`studio_step_${i}`, {});
+    const trail = breadcrumbTrail();
+    expect(trail).toContain("step_39");
+    expect(trail).not.toContain("step_0 ");
+    expect(trail.split(" > ")).toHaveLength(14);
+  });
+
+  describe("privacy", () => {
+    it("never copies free text, however it is spelled", () => {
+      recordBreadcrumb("studio_feedback", {
+        comment: "my secret unreleased product name",
+        error_message: "/Users/someone/private/path.html",
+        stack_trace: "at Object.<anonymous> (/Users/someone/project.ts:1:1)",
+      });
+      const trail = breadcrumbTrail();
+      expect(trail).not.toContain("secret");
+      expect(trail).not.toContain("/Users/");
+      expect(trail).toContain("feedback");
+    });
+
+    it("drops an allowlisted value that is long enough to be prose", () => {
+      recordBreadcrumb("studio_thing", {
+        action: "a".repeat(200),
+      });
+      expect(breadcrumbTrail()).toContain("thing");
+      expect(breadcrumbTrail()).not.toContain("aaaa");
+    });
+
+    it("takes numbers and booleans from allowlisted keys", () => {
+      recordBreadcrumb("studio_a", { status: 500 });
+      recordBreadcrumb("studio_b", { mode: false });
+      expect(breadcrumbTrail()).toContain("a:500");
+      expect(breadcrumbTrail()).toContain("b:false");
+    });
+  });
+});

package/src/telemetry/breadcrumbs.ts

@@ -0,0 +1,70 @@
+// ---------------------------------------------------------------------------
+// A short trail of what the user did before they reported something.
+//
+// A feedback comment says what went wrong; it almost never says how to get
+// there. This is the missing half. Every `studio_*` event already flows through
+// one funnel (`trackEvent`), so recording the trail costs one call there and no
+// new instrumentation anywhere else — and it stays correct as events are added.
+//
+// PRIVACY: names and numbers only. Values are copied from a fixed allowlist of
+// short, low-cardinality keys, so free text (comments, file paths, composition
+// content) can never reach the trail even if some future event carries it.
+// ---------------------------------------------------------------------------
+
+/** Enough to cover the run-up to a failure without bloating the payload. */
+const LIMIT = 14;
+
+/**
+ * Keys worth keeping alongside an event name. Each is a short enum-ish
+ * discriminator: `tab_switch` alone says little, `tab_switch:renders` says
+ * where they were. Anything not on this list is dropped, not truncated.
+ */
+const DETAIL_KEYS = [
+  "action",
+  "tab",
+  "panel",
+  "status",
+  "mode",
+  "reason",
+  "format",
+  "via",
+] as const;
+
+interface Crumb {
+  at: number;
+  label: string;
+}
+
+const trail: Crumb[] = [];
+const startedAt = Date.now();
+
+function detailFor(properties: Record<string, unknown>): string {
+  for (const key of DETAIL_KEYS) {
+    const value = properties[key];
+    if (typeof value === "string" && value.length > 0 && value.length <= 24) return `:${value}`;
+    if (typeof value === "number" || typeof value === "boolean") return `:${String(value)}`;
+  }
+  return "";
+}
+
+export function recordBreadcrumb(event: string, properties: Record<string, unknown>): void {
+  // `studio:` and `studio_` prefixes are noise in a 14-item trail.
+  const name = event.replace(/^studio[:_]/, "");
+  trail.push({ at: Date.now() - startedAt, label: `${name}${detailFor(properties)}` });
+  if (trail.length > LIMIT) trail.shift();
+}
+
+/**
+ * The trail as one line, oldest first, each entry stamped with seconds since
+ * the tab opened: `2.1 session_start > 48.7 render_start > 71.2 save_failure`.
+ * A single string rather than an array so it stays readable in a PostHog cell
+ * and in whatever the report is pasted into.
+ */
+export function breadcrumbTrail(): string {
+  return trail.map((c) => `${(c.at / 1000).toFixed(1)} ${c.label}`).join(" > ");
+}
+
+/** Test seam. Production never clears the trail; it rolls. */
+export function resetBreadcrumbs(): void {
+  trail.length = 0;
+}

package/src/telemetry/client.ts

@@ -8,6 +8,7 @@ import { getAnonymousId, hasShownNotice, markNoticeShown } from "./config";
 import { browserTelemetryAllowed } from "./policy";
 import { getBrowserSystemMeta } from "./system";
 import { canaryEventProperties } from "./canary";
+import { recordBreadcrumb } from "./breadcrumbs";
 
 // Write-only PostHog project key, safe to embed in client code.
 const POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
@@ -37,6 +38,10 @@ export function shouldTrack(): boolean {
 export function trackEvent(event: string, properties: EventProperties = {}): void {
   if (!shouldTrack()) return;
 
+  // Every studio event passes through here, so this is the one place that can
+  // build a repro trail without asking each call site to opt in.
+  recordBreadcrumb(event, properties);
+
   const sys = getBrowserSystemMeta();
   eventQueue.push({
     event,

package/src/telemetry/events.ts

@@ -1,4 +1,5 @@
 import { trackEvent } from "./client";
+import { breadcrumbTrail } from "./breadcrumbs";
 
 // Studio frontend events. The corresponding `render_complete` / `render_error`
 // events are emitted server-side by `packages/cli/src/server/studioServer.ts`
@@ -94,14 +95,94 @@ export function trackStudioSegmentEaseEdit(props: {
   trackEvent("studio_segment_ease_edit", { action: props.action, ease: props.ease });
 }
 
-export function trackStudioFeedback(props: { rating: number; comment?: string }): void {
+/**
+ * Context shared by every event in the feedback funnel, so `shown` →
+ * `dismissed` / `studio_feedback` can be read as one funnel broken down by the
+ * moment that triggered it. Without `shown` there is no way to tell a prompt
+ * nobody answers from a prompt that never renders.
+ */
+interface StudioFeedbackContext {
+  /** What the prompt is about: "render_complete" | "render_failed". */
+  reason: string;
+  /** Render job the prompt followed — joins the response to that render. */
+  render_id?: string;
+}
+
+export function trackStudioFeedbackShown(ctx: StudioFeedbackContext): void {
+  trackEvent("studio_feedback_shown", {
+    reason: ctx.reason,
+    render_id: ctx.render_id,
+    source: "studio",
+  });
+}
+
+export function trackStudioFeedbackDismissed(
+  ctx: StudioFeedbackContext & {
+    /** "close" | "escape" | "timeout" — separates rejection from inattention. */
+    via: string;
+    /** A dismiss after picking a rating is an abandon, not a refusal. */
+    had_rating: boolean;
+  },
+): void {
+  trackEvent("studio_feedback_dismissed", {
+    reason: ctx.reason,
+    render_id: ctx.render_id,
+    via: ctx.via,
+    had_rating: ctx.had_rating,
+    source: "studio",
+  });
+}
+
+/**
+ * The booking link offered after a response. Its own event because the thing
+ * worth measuring is the click, and a link is otherwise invisible to us.
+ */
+export function trackStudioFeedbackInterviewClick(ctx: { reason: string }): void {
+  trackEvent("studio_feedback_interview_click", {
+    reason: ctx.reason,
+    source: "studio",
+  });
+}
+
+export function trackStudioFeedback(
+  props: StudioFeedbackContext & {
+    /**
+     * Absent on the failure prompt, which asks what broke instead of scoring a
+     * render the user never got. A fabricated rating would poison the average.
+     */
+    rating?: number;
+    comment?: string;
+    /**
+     * Which follow-up the comment answers ("remove" | "borrow" | "fix" |
+     * "detractor" | "failure"). One card asks one question, rotated across
+     * users, so this is what makes the free text separable.
+     */
+    question: string;
+    /** "preset" (a tapped chip) or "typed". Never mix them when counting. */
+    answer_kind: string;
+    /**
+     * Reproduction context from whatever produced the prompt: render settings,
+     * outcome, counts. Flattened onto the event so each key is filterable in
+     * PostHog rather than buried in a JSON blob nobody can group by.
+     */
+    context?: Record<string, string | number | boolean | undefined>;
+  },
+): void {
   // Plain product event, not a PostHog survey response: nothing here is served
   // by the surveys product (no survey definition, no targeting, no popover).
   trackEvent("studio_feedback", {
-    rating: props.rating,
-    rating_scale: 10,
+    ...(props.rating === undefined ? {} : { rating: props.rating, rating_scale: 10 }),
     ...(props.comment ? { comment: props.comment } : {}),
+    ...props.context,
+    reason: props.reason,
+    render_id: props.render_id,
+    question: props.question,
+    answer_kind: props.answer_kind,
     doctor_summary: getBrowserDoctorSummary(),
+    // What the user did in the run-up. A comment says what broke; this says
+    // how to get there, which is the half a bug report is usually missing.
+    // Read AFTER the context spread so no caller can shadow it.
+    breadcrumbs: breadcrumbTrail(),
     source: "studio",
   });
 }

package/src/utils/sourcePatcher.ts

@@ -87,7 +87,11 @@ function splitInlineStyleDeclarations(style: string): string[] {
 }
 
 export interface PatchOperation {
-  type: "inline-style" | "attribute" | "text-content" | "html-attribute";
+  // `rich-text` is the only member that carries markup. It is deliberately
+  // separate from `text-content`, whose contract is "this value is text": the
+  // design panel and every other caller rely on that, and widening it would
+  // have turned all of them into markup sinks at once.
+  type: "inline-style" | "attribute" | "text-content" | "html-attribute" | "rich-text";
   property: string;
   value: string | null;
   childSelector?: string;

package/src/utils/studioHelpers.ts

@@ -1,3 +1,4 @@
+import { isTypingTarget } from "./typingTarget";
 import type { TimelineElement } from "../player/store/playerStore";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { TimelineAssetKind } from "./timelineAssetDrop";
@@ -114,11 +115,7 @@ export function getEventTargetElement(target: EventTarget | null): HTMLElement |
 }
 
 export function shouldIgnoreHistoryShortcut(target: EventTarget | null): boolean {
-  const el = getEventTargetElement(target);
-  if (!el) return false;
-  return Boolean(
-    el.closest("input, textarea, select, [contenteditable='true'], [role='textbox'], .cm-editor"),
-  );
+  return isTypingTarget(target);
 }
 
 export function getHistoryShortcutLabel(action: "undo" | "redo"): string {

package/src/utils/timelineDiscovery.ts

@@ -1,24 +1,3 @@
-interface EditableTargetLike {
-  tagName?: string;
-  isContentEditable?: boolean;
-  closest?: (selector: string) => unknown;
-  getAttribute?: (name: string) => string | null;
-}
-
-export function isEditableTarget(target: EventTarget | null): boolean {
-  if (!target || typeof target !== "object") return false;
-
-  const element = target as EditableTargetLike;
-  const tagName = element.tagName?.toLowerCase();
-  if (tagName === "input" || tagName === "textarea" || tagName === "select") return true;
-  if (element.isContentEditable) return true;
-
-  const role = element.getAttribute?.("role");
-  if (role === "textbox" || role === "searchbox" || role === "combobox") return true;
-
-  return Boolean(
-    element.closest?.(
-      "input, textarea, select, [contenteditable='true'], [role='textbox'], .cm-editor",
-    ),
-  );
-}
+// Compatibility name for downstream imports. The typing decision itself has
+// one owner; new Studio callers import `isTypingTarget` directly.
+export { isTypingTarget as isEditableTarget } from "./typingTarget";