@hyperframes/studio 0.7.106 → 0.7.108

package/src/telemetry/agentRuntime.ts

@@ -0,0 +1,62 @@
+/**
+ * Which coding agent, if any, is driving this Studio.
+ *
+ * Studio cannot detect this. The signal lives entirely in the environment of
+ * the CLI process — `CLAUDECODE`, `CURSOR_TRACE_ID` and friends — which the
+ * browser has no access to. So the CLI classifies it once
+ * (`cli/src/telemetry/agent_runtime.ts`) and publishes the resulting category
+ * into the served page as `window.__HF_CLI_AGENT_RUNTIME`, alongside the
+ * distinct id and the canary decisions.
+ *
+ * Null is the common, correct answer: a Studio opened by hand, or served by
+ * Vite in development, has no CLI to ask. Reading it as "no agent" rather than
+ * "unknown" is the honest default — every agent we can name sets a marker, and
+ * an unnamed one is indistinguishable from a person either way.
+ *
+ * Memoized, matching `distinctId.ts`: the value is fixed for the life of the
+ * page, and a caller that reads it per event should not pay for a global lookup
+ * and a type check every time.
+ */
+
+declare global {
+  interface Window {
+    __HF_CLI_AGENT_RUNTIME?: string;
+  }
+}
+
+let resolved: string | null | undefined;
+
+export function resolveAgentRuntime(): string | null {
+  if (resolved !== undefined) return resolved;
+  if (typeof window === "undefined") {
+    resolved = null;
+    return resolved;
+  }
+  const raw = window.__HF_CLI_AGENT_RUNTIME;
+  // A non-empty string only. An empty string means the CLI had nothing to say,
+  // and sending `""` would land in PostHog as a distinct value from absent —
+  // two encodings of the same fact, which is exactly what makes a breakdown
+  // read as a gap that is not there.
+  resolved = typeof raw === "string" && raw.length > 0 ? raw : null;
+  return resolved;
+}
+
+/**
+ * The same answer as a telemetry property: never null, never absent.
+ *
+ * "No agent" is a real, common finding — most sessions are people — so it needs
+ * a value that survives a breakdown. Encoding it as an omitted property would
+ * make "a person used this" indistinguishable from "this event predates the
+ * property", and the two studio transports type their payloads differently
+ * (one permits null, one does not), so left alone they would encode the same
+ * fact two ways. That mismatch has already produced one wrong conclusion in
+ * this project's telemetry; a shared sentinel is what stops it.
+ */
+export function agentRuntimeProperty(): string {
+  return resolveAgentRuntime() ?? "none";
+}
+
+/** Test seam: the memo would otherwise leak between cases in one module load. */
+export function resetAgentRuntimeForTests(): void {
+  resolved = undefined;
+}

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/telemetry/system.ts

@@ -4,6 +4,8 @@
 // No PII — only environment characteristics useful for product analytics.
 // ---------------------------------------------------------------------------
 
+import { agentRuntimeProperty } from "./agentRuntime";
+
 export interface BrowserSystemMeta {
   user_agent: string;
   language: string;
@@ -13,6 +15,8 @@ export interface BrowserSystemMeta {
   timezone_offset_minutes: number;
   is_mobile: boolean;
   studio_version: string;
+  /** Which coding agent is driving this Studio, or null when a person is. */
+  agent_runtime: string;
 }
 
 const EMPTY_META: BrowserSystemMeta = {
@@ -24,6 +28,7 @@ const EMPTY_META: BrowserSystemMeta = {
   timezone_offset_minutes: 0,
   is_mobile: false,
   studio_version: "dev",
+  agent_runtime: "none",
 };
 
 let cached: BrowserSystemMeta | null = null;
@@ -46,6 +51,9 @@ export function getBrowserSystemMeta(): BrowserSystemMeta {
     timezone_offset_minutes: new Date().getTimezoneOffset(),
     is_mobile: /Android|iPhone|iPad/i.test(ua),
     studio_version: typeof __STUDIO_VERSION__ !== "undefined" ? __STUDIO_VERSION__ : "dev",
+    // Same value the `studio:*` transport attaches, from the same accessor —
+    // two families that disagreed here would split every agent breakdown.
+    agent_runtime: agentRuntimeProperty(),
   };
   return cached;
 }

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/studioFileHistory.test.ts

@@ -29,6 +29,55 @@ describe("saveProjectFilesWithHistory", () => {
     });
   });
 
+  /**
+   * Deleting a clip POSTs `remove-element`, which rewrites the file server-side,
+   * and only then saves the duration shrink. Expecting the content read before
+   * the mutation made the server refuse that write as a conflict: the save queue
+   * paused on the 409 and the clip stayed on the timeline until a reload.
+   */
+  it("expects what is on disk, not the undo baseline, when they differ", async () => {
+    const expectations: Record<string, string | undefined> = {};
+    const recordEdit = vi.fn();
+
+    await saveProjectFilesWithHistory({
+      projectId: "project-1",
+      label: "Delete timeline clip",
+      kind: "timeline",
+      files: { "index.html": "removed+shrunk" },
+      readFile: async () => "original",
+      diskContent: { "index.html": "removed" },
+      writeFile: async (path, _content, expectedContent) => {
+        expectations[path] = expectedContent;
+      },
+      recordEdit,
+    });
+
+    expect(expectations["index.html"]).toBe("removed");
+    // Undo still goes all the way back, which is the whole reason the two are
+    // allowed to differ.
+    expect(recordEdit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        files: { "index.html": { before: "original", after: "removed+shrunk" } },
+      }),
+    );
+  });
+
+  it("still expects the undo baseline when nothing says otherwise", async () => {
+    const expectations: Record<string, string | undefined> = {};
+    await saveProjectFilesWithHistory({
+      projectId: "project-1",
+      label: "Move layer",
+      kind: "manual",
+      files: { "index.html": "after" },
+      readFile: async () => "before",
+      writeFile: async (path, _content, expectedContent) => {
+        expectations[path] = expectedContent;
+      },
+      recordEdit: vi.fn(),
+    });
+    expect(expectations["index.html"]).toBe("before");
+  });
+
   it("skips writes and history for unchanged content", async () => {
     const writeFile = vi.fn();
     const recordEdit = vi.fn();

package/src/utils/studioFileHistory.ts

@@ -34,6 +34,21 @@ interface SaveProjectFilesWithHistoryInput {
   readFile: (path: string) => Promise<string>;
   writeFile: ProjectFileWriter;
   recordEdit: (entry: RecordEditInput) => Promise<void>;
+  /**
+   * What a path holds ON DISK right now, when that is not the same as the
+   * history's "before".
+   *
+   * The two are normally one value, so the write's optimistic-concurrency
+   * expectation was taken straight from the undo baseline. They come apart when
+   * a server-side mutation has already written part of the edit: deleting a clip
+   * POSTs `remove-element`, which rewrites the file, and only then saves the
+   * duration shrink — expecting the pre-delete content it read at the start. The
+   * server had moved the file on, so the write was refused as a conflict, the
+   * save queue paused, and the clip stayed on the timeline until a reload.
+   *
+   * Undo still restores `before`; this only says what to expect on disk.
+   */
+  diskContent?: Record<string, string>;
 }
 
 export async function readProjectFileContent(pid: string, path: string): Promise<string> {
@@ -57,6 +72,7 @@ export async function saveProjectFilesWithHistory({
   readFile,
   writeFile,
   recordEdit,
+  diskContent,
 }: SaveProjectFilesWithHistoryInput): Promise<string[]> {
   return serializeStudioFileMutations(writeFile, Object.keys(files), async () => {
     const snapshots: Record<string, { before: string; after: string }> = {};
@@ -73,7 +89,7 @@ export async function saveProjectFilesWithHistory({
     const writtenPaths: string[] = [];
     try {
       for (const path of changedPaths) {
-        await writeFile(path, snapshots[path].after, snapshots[path].before);
+        await writeFile(path, snapshots[path].after, diskContent?.[path] ?? snapshots[path].before);
         writtenPaths.push(path);
       }
 

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/studioTelemetry.ts

@@ -1,6 +1,7 @@
 import { resolveStudioDistinctId } from "../telemetry/distinctId";
 import { browserTelemetryAllowed } from "../telemetry/policy";
 import { canaryEventProperties } from "../telemetry/canary";
+import { agentRuntimeProperty } from "../telemetry/agentRuntime";
 
 // PostHog public ingest key — write-only, safe to ship in the client bundle
 const POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
@@ -42,6 +43,11 @@ function isEnabled(): boolean {
 function getSessionProperties(): EventProperties {
   return {
     studio_version: typeof __STUDIO_VERSION__ !== "undefined" ? __STUDIO_VERSION__ : "dev",
+    // On EVERY event, not just the audio ones. "Which of these sessions was a
+    // person and which was an agent" is a question worth asking of any feature,
+    // and a property that only some events carry cannot answer it — the
+    // breakdown silently reads as though the agent never used the rest.
+    agent_runtime: agentRuntimeProperty(),
     screen_width: window.screen?.width,
     screen_height: window.screen?.height,
     viewport_width: window.innerWidth,
@@ -73,9 +79,8 @@ export function trackStudioEvent(event: string, properties: EventProperties = {}
   }
 }
 
-async function flushEvents(): Promise<void> {
-  if (queue.length === 0) return;
-
+/** The queue, shaped for PostHog's batch endpoint — shared by both drain paths. */
+function drainBatch() {
   const batch = queue.map((e) => ({
     event: e.event,
     properties: { ...e.properties, $ip: null },
@@ -83,6 +88,13 @@ async function flushEvents(): Promise<void> {
     timestamp: e.timestamp,
   }));
   queue = [];
+  return batch;
+}
+
+async function flushEvents(): Promise<void> {
+  if (queue.length === 0) return;
+
+  const batch = drainBatch();
 
   const controller = new AbortController();
   const timeout = setTimeout(() => controller.abort(), FLUSH_TIMEOUT_MS);
@@ -112,13 +124,7 @@ export function flushViaBeacon(): void {
     flushTimer = null;
   }
   if (queue.length === 0) return;
-  const batch = queue.map((e) => ({
-    event: e.event,
-    properties: { ...e.properties, $ip: null },
-    distinct_id: getDistinctId(),
-    timestamp: e.timestamp,
-  }));
-  queue = [];
+  const batch = drainBatch();
   const body = JSON.stringify({ api_key: POSTHOG_API_KEY, batch });
   try {
     navigator.sendBeacon(`${POSTHOG_HOST}/batch/`, body);

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";

package/src/utils/typingTarget.test.ts

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { isTypingTarget } from "./typingTarget";
+import { isEditableTarget } from "./timelineDiscovery";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function mount(html: string): HTMLElement {
+  document.body.innerHTML = html;
+  return document.body.firstElementChild as HTMLElement;
+}
+
+describe("isTypingTarget", () => {
+  it("keeps the legacy import on the same canonical decision", () => {
+    expect(isEditableTarget).toBe(isTypingTarget);
+  });
+
+  // The bug this exists for: inline text editing uses plaintext-only, an
+  // attribute selector for 'true' missed it, and the playback shortcuts ate
+  // every letter typed into the composition.
+  it("recognises a plaintext-only editable, not just contenteditable=true", () => {
+    expect(isTypingTarget(mount('<h1 contenteditable="plaintext-only">Hi</h1>'))).toBe(true);
+    expect(isTypingTarget(mount('<h1 contenteditable="true">Hi</h1>'))).toBe(true);
+    expect(isTypingTarget(mount("<h1 contenteditable>Hi</h1>"))).toBe(true);
+  });
+
+  it("recognises a child of an editable, which a selector on the target alone misses", () => {
+    const host = mount('<div contenteditable="true"><span>inner</span></div>');
+    expect(isTypingTarget(host.querySelector("span"))).toBe(true);
+  });
+
+  it("recognises the ordinary fields too", () => {
+    expect(isTypingTarget(mount("<input />"))).toBe(true);
+    expect(isTypingTarget(mount("<textarea></textarea>"))).toBe(true);
+    expect(isTypingTarget(mount("<select></select>"))).toBe(true);
+    expect(isTypingTarget(mount('<div role="textbox"></div>'))).toBe(true);
+    expect(isTypingTarget(mount('<div role="searchbox"></div>'))).toBe(true);
+    expect(isTypingTarget(mount('<div role="combobox"></div>'))).toBe(true);
+  });
+
+  it("leaves the keys alone for anything that is not being typed into", () => {
+    expect(isTypingTarget(mount("<div>plain</div>"))).toBe(false);
+    expect(isTypingTarget(mount("<button>press</button>"))).toBe(false);
+    expect(isTypingTarget(mount('<h1 contenteditable="false">Hi</h1>'))).toBe(false);
+  });
+
+  it("says no to nothing at all", () => {
+    expect(isTypingTarget(null)).toBe(false);
+    expect(isTypingTarget({} as EventTarget)).toBe(false);
+  });
+});