@hyperframes/studio 0.7.106 → 0.7.108

package/src/components/editor/PropertyPanelFlat.tsx

@@ -6,6 +6,7 @@ import { slugifyDesignInput } from "../../utils/designInputTracking";
 import { isTextEditableSelection } from "./domEditing";
 import type { PropertyPanelFlatProps } from "./propertyPanelFlatProps";
 import { formatPxMetricValue } from "./propertyPanelHelpers";
+import { audioFxSummary } from "./audioFxSummary";
 import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
 import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
 import { FlatGroupHeader } from "./propertyPanelFlatPrimitives";
@@ -13,6 +14,9 @@ import { FlatTextSection } from "./propertyPanelFlatTextSection";
 import { FlatStyleSection } from "./propertyPanelFlatStyleSections";
 import { FlatLayoutSection } from "./propertyPanelFlatLayoutSection";
 import { FlatMotionSection } from "./propertyPanelFlatMotionSection";
+import { isCanaryEnabled } from "../../telemetry/canary";
+import { AudioFxGroup } from "./propertyPanelAudioFxGroup.js";
+import { useVolumeAutomation } from "./useVolumeAutomation";
 import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
 import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
 import { createGsapLivePreview } from "./gsapLivePreview";
@@ -64,6 +68,7 @@ export function PropertyPanelFlat({
   onSetAttribute,
   onSetAttributes,
   onSetAttributeLive,
+  onSetAttributeQuiet,
   onApplyColorGradingScope,
   onSetHtmlAttribute,
   onRemoveBackground,
@@ -252,6 +257,8 @@ export function PropertyPanelFlat({
   const showMotionEffects = gsapEffectHandlers !== null;
   const showMotionGroup = showMotionTiming || showMotionEffects;
 
+  const volumeAutomation = useVolumeAutomation(element, onSetAttributeQuiet ?? onSetAttributeLive);
+
   const groups: FlatGroupDescriptor[] = [];
   if (isTextEditable) {
     groups.push({
@@ -420,6 +427,23 @@ export function PropertyPanelFlat({
       });
     }
   }
+  // Behind `audio-fx-rack`, at 0%. Gates the AUTHORING surface only: the runtime
+  // and render still honour a `data-fx-chain` already on an element, so a
+  // composition written through the skill does not go silently dry off-cohort.
+  if (sections.audioFx && isCanaryEnabled("audio-fx-rack")) {
+    groups.push({
+      id: "audio-fx",
+      title: "Audio FX",
+      summary: audioFxSummary(element),
+      content: (
+        <AudioFxGroup
+          element={element}
+          onSetAttributeQuiet={onSetAttributeQuiet ?? onSetAttributeLive}
+          onSetAttributeLive={onSetAttributeLive}
+        />
+      ),
+    });
+  }
   if (sections.media) {
     groups.push({
       id: "media",
@@ -434,6 +458,7 @@ export function PropertyPanelFlat({
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={onSetHtmlAttribute}
           onRemoveBackground={onRemoveBackground}
+          {...volumeAutomation}
         />
       ),
     });

package/src/components/editor/audioFxSummary.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import { audioFxSummary } from "./audioFxSummary";
+import type { DomEditSelection } from "./domEditingTypes";
+
+const el = (dataAttributes: Record<string, string>): DomEditSelection =>
+  ({ dataAttributes }) as unknown as DomEditSelection;
+
+const chain = (nodes: unknown[]) => JSON.stringify({ version: 1, nodes });
+
+describe("audioFxSummary", () => {
+  it("counts a carve as one module, not as the filters behind it", () => {
+    // Six bands and a level stage reading "7 effects" is the misreading the
+    // grouping exists to prevent.
+    const summary = audioFxSummary(
+      el({
+        "fx-chain": chain([
+          { type: "peaking", id: "n1", fromCarve: true, params: { frequency: 400 } },
+          { type: "peaking", id: "n2", fromCarve: true, params: { frequency: 1600 } },
+          { type: "gain", id: "n3", fromCarve: true, params: { gain: -6 } },
+        ]),
+        "fx-carve": JSON.stringify({ source: "vo", strength: 0.25 }),
+      }),
+    );
+    expect(summary).toBe("carve");
+  });
+
+  it("counts hand-built effects alongside the module", () => {
+    expect(
+      audioFxSummary(
+        el({
+          "fx-chain": chain([
+            { type: "peaking", id: "n1", fromCarve: true, params: { frequency: 400 } },
+            { type: "lowpass", id: "n2", params: { frequency: 8000 } },
+            { type: "delay", id: "n3", params: { time: 200 } },
+          ]),
+        }),
+      ),
+    ).toBe("2 effects + carve");
+  });
+
+  it("says how many when there is no carve", () => {
+    expect(audioFxSummary(el({ "fx-chain": chain([{ type: "lowpass", id: "n1" }]) }))).toBe(
+      "1 effect",
+    );
+  });
+
+  it("names a carve that is on but has not compiled to filters yet", () => {
+    // Switching it on with no voice chosen leaves the control in this section with
+    // nothing behind it; the summary should still say the section holds one.
+    expect(audioFxSummary(el({ "fx-carve": JSON.stringify({ source: "", strength: 0.25 }) }))).toBe(
+      "carve",
+    );
+  });
+
+  it("ignores bypassed effects, as it always did", () => {
+    expect(
+      audioFxSummary(
+        el({
+          "fx-chain": chain([
+            { type: "lowpass", id: "n1", enabled: false },
+            { type: "delay", id: "n2" },
+          ]),
+        }),
+      ),
+    ).toBe("1 effect");
+  });
+
+  it("says none for a track with neither", () => {
+    expect(audioFxSummary(el({}))).toBe("none");
+  });
+
+  it("says so when the chain cannot be read", () => {
+    expect(audioFxSummary(el({ "fx-chain": "{not json" }))).toBe("unreadable");
+  });
+});

package/src/components/editor/audioFxSummary.ts

@@ -0,0 +1,36 @@
+/**
+ * What the collapsed Audio FX group says it holds.
+ *
+ * It has to describe the rack the author would see on opening it, which counts a
+ * carve as one module rather than as the filters it compiles to. Six peaking
+ * bands and a level stage reading "7 effects" invited exactly the misreading the
+ * grouping exists to prevent — that they are seven things to manage.
+ */
+
+import { HF_AUDIO_FX_DATA_KEY, parseAudioFxChain } from "@hyperframes/core/audio-fx";
+import type { DomEditSelection } from "./domEditingTypes";
+
+export function audioFxSummary(element: DomEditSelection): string {
+  const raw = element.dataAttributes?.[HF_AUDIO_FX_DATA_KEY];
+  const carveAttr = element.dataAttributes?.["fx-carve"];
+  let handBuilt = 0;
+  let carveNodes = 0;
+  if (raw) {
+    try {
+      for (const node of parseAudioFxChain(raw).nodes) {
+        if (node.enabled === false) continue;
+        if (node.fromCarve) carveNodes += 1;
+        else handBuilt += 1;
+      }
+    } catch {
+      return "unreadable";
+    }
+  }
+  const parts: string[] = [];
+  if (handBuilt > 0) parts.push(`${handBuilt} effect${handBuilt === 1 ? "" : "s"}`);
+  // One name for the module however many filters are behind it. Named when the
+  // carve is switched on at all, because the control is in this section whether or
+  // not it has compiled to anything yet.
+  if (carveNodes > 0 || carveAttr) parts.push("carve");
+  return parts.length > 0 ? parts.join(" + ") : "none";
+}

package/src/components/editor/audioFxTelemetry.test.ts

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
+
+const trackStudioEvent = vi.fn();
+vi.mock("../../utils/studioTelemetry", () => ({
+  trackStudioEvent: (...args: unknown[]) => trackStudioEvent(...args),
+}));
+
+const { chainShape, nodeOrigin, trackChainObserved, trackParamCommitted, trackPresetApplied } =
+  await import("./audioFxTelemetry");
+
+beforeEach(() => trackStudioEvent.mockReset());
+
+const chainOf = (nodes: HfAudioFxChain["nodes"]): HfAudioFxChain => ({ version: 1, nodes });
+
+describe("what the rack reports", () => {
+  it("namespaces every event so the feature can be found as one thing", () => {
+    trackPresetApplied("voice-clean", "voice", 5, "append", { trackKind: "voice" });
+    expect(trackStudioEvent).toHaveBeenCalledWith("audio_fx_preset_applied", expect.anything());
+  });
+
+  it("carries what the track is, so a preset's use can be read per material", () => {
+    trackPresetApplied("telephone", "character", 7, "append", { trackKind: "music" });
+    expect(trackStudioEvent.mock.calls[0]?.[1]).toMatchObject({
+      preset: "telephone",
+      family: "character",
+      track_kind: "music",
+    });
+  });
+
+  it("says 'unknown' rather than nothing when the track is unclassified", () => {
+    // Absent and "unclassified" are different facts; encoding them the same way
+    // is what makes a breakdown read as a gap that is not there.
+    trackPresetApplied("hall", "space", 1, "append", {});
+    expect(trackStudioEvent.mock.calls[0]?.[1]).toMatchObject({ track_kind: "unknown" });
+  });
+
+  it("separates the two surfaces a parameter can be set from", () => {
+    // The whole one-knob design rests on which of these people use.
+    trackParamCommitted("compressor", "ratio", 4, "details", {});
+    expect(trackStudioEvent.mock.calls[0]?.[1]).toMatchObject({
+      effect: "compressor",
+      param: "ratio",
+      value: 4,
+      surface: "details",
+    });
+  });
+});
+
+describe("a chain reduced to counts", () => {
+  it("names where each node came from", () => {
+    expect(nodeOrigin({ type: "peaking", fromPreset: "voice-clean" })).toBe("preset");
+    expect(nodeOrigin({ type: "peaking", fromCarve: true })).toBe("carve");
+    expect(nodeOrigin({ type: "gain", fromLeveller: true })).toBe("leveller");
+    expect(nodeOrigin({ type: "highpass" })).toBe("hand");
+  });
+
+  it("counts by origin, which is what separates hand-built from generated", () => {
+    const shape = chainShape(
+      chainOf([
+        { type: "highpass", fromPreset: "voice-clean" },
+        { type: "peaking", fromPreset: "voice-clean" },
+        { type: "peaking", fromCarve: true },
+        { type: "lowpass" },
+      ]),
+    );
+    expect(shape).toMatchObject({
+      node_count: 4,
+      nodes_from_preset: 2,
+      nodes_from_carve: 1,
+      nodes_by_hand: 1,
+      preset_count: 1,
+    });
+  });
+
+  it("counts distinct presets, not preset nodes — stacking is the question", () => {
+    const shape = chainShape(
+      chainOf([
+        { type: "highpass", fromPreset: "voice-clean" },
+        { type: "lowpass", fromPreset: "telephone" },
+        { type: "peaking", fromPreset: "telephone" },
+      ]),
+    );
+    expect(shape.preset_count).toBe(2);
+  });
+
+  it("survives an empty or absent chain", () => {
+    expect(chainShape(null)).toMatchObject({ node_count: 0, preset_count: 0 });
+  });
+
+  it("ships no chain contents — only counts and flags", () => {
+    // The standing rule: nothing user-authored leaves the browser. A parameter
+    // value or an element id in here would be the author's own data.
+    const shape = chainShape(chainOf([{ type: "peaking", id: "n1", params: { frequency: 3000 } }]));
+    const serialized = JSON.stringify(shape);
+    expect(serialized).not.toContain("3000");
+    expect(serialized).not.toContain("n1");
+  });
+});
+
+describe("effects this session did not apply", () => {
+  it("calls a chain with no panel edits behind it authored outside", () => {
+    // This is the agent signal. An agent edits the composition and the panel
+    // simply finds the work done — none of its own events ever fire.
+    trackChainObserved(
+      chainOf([{ type: "highpass", fromPreset: "voice-clean" }]),
+      { firstSight: true, panelEdits: 0, hasCarve: false, hasAutomation: false },
+      { trackKind: "voice" },
+    );
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "audio_fx_chain_observed",
+      expect.objectContaining({ authored_outside: true, first_sight: true }),
+    );
+  });
+
+  it("does not, when this session's own edits explain it", () => {
+    trackChainObserved(
+      chainOf([{ type: "highpass" }]),
+      { firstSight: false, panelEdits: 3, hasCarve: false, hasAutomation: false },
+      {},
+    );
+    expect(trackStudioEvent.mock.calls[0]?.[1]).toMatchObject({
+      authored_outside: false,
+      panel_edits: 3,
+    });
+  });
+});

package/src/components/editor/audioFxTelemetry.ts

@@ -0,0 +1,230 @@
+/**
+ * What the audio FX rack reports about itself.
+ *
+ * One module rather than `trackStudioEvent` calls scattered through six
+ * components, for two reasons. The event names and property shapes have to
+ * agree across the panel or a dashboard cannot join them — and everything here
+ * is subject to one rule that is easy to break a callsite at a time:
+ *
+ * **Nothing user-authored leaves the browser.** Not element ids, not media
+ * filenames, not composition paths, not chain JSON. Every property below is
+ * either a fixed identifier from our own catalogue (a preset id, an effect
+ * type, a parameter key), a number, or a boolean. `studioTelemetry.ts` already
+ * strips the query string off `url_hash` for exactly this reason — the ids in
+ * it are the author's own. The rack sees the same class of data and must hold
+ * the same line.
+ *
+ * The second rule is about volume: **commit, not preview.** Every control in
+ * the rack has a preview path that fires continuously while a slider moves and
+ * a commit path that fires once when it is released. Only the commit path
+ * belongs here. Wiring a param event to the preview would emit tens of events
+ * per drag, which is both a cost and a lie — an author who nudges a knob and
+ * puts it back did not make thirty decisions.
+ */
+
+import { trackStudioEvent } from "../../utils/studioTelemetry";
+import type { HfAudioFxChain, HfAudioFxNode } from "@hyperframes/core/audio-fx";
+
+/** Kept narrow deliberately — see the "nothing user-authored" rule above. */
+type FxEventProperties = Record<string, string | number | boolean | null | undefined>;
+
+function track(event: string, properties: FxEventProperties = {}): void {
+  trackStudioEvent(`audio_fx_${event}`, properties);
+}
+
+/** Where a node in the chain came from, as one word. */
+export function nodeOrigin(node: HfAudioFxNode): string {
+  if (node.fromPreset) return "preset";
+  if (node.fromCarve) return "carve";
+  if (node.fromEq) return "eq";
+  if (node.fromLeveller) return "leveller";
+  return "hand";
+}
+
+/**
+ * A chain reduced to counts.
+ *
+ * Counts rather than contents: "four nodes, two of them from a preset" answers
+ * how the rack is used without shipping what the author built. The origin mix
+ * is the interesting half — it separates a chain somebody assembled by hand
+ * from one a preset wrote from one an analysis wrote.
+ */
+export function chainShape(chain: HfAudioFxChain | null): FxEventProperties {
+  const nodes = chain?.nodes ?? [];
+  const byOrigin = new Map<string, number>();
+  for (const node of nodes) {
+    const origin = nodeOrigin(node);
+    byOrigin.set(origin, (byOrigin.get(origin) ?? 0) + 1);
+  }
+  return {
+    node_count: nodes.length,
+    nodes_from_preset: byOrigin.get("preset") ?? 0,
+    nodes_from_carve: byOrigin.get("carve") ?? 0,
+    nodes_from_eq: byOrigin.get("eq") ?? 0,
+    nodes_from_leveller: byOrigin.get("leveller") ?? 0,
+    nodes_by_hand: byOrigin.get("hand") ?? 0,
+    // How many distinct presets are live on this track. Stacking a character
+    // preset onto a cleaned voice is a supported thing to want, and this is the
+    // only way to find out whether anybody does it.
+    preset_count: new Set(nodes.map((n) => n.fromPreset).filter(Boolean)).size,
+    bypassed_count: nodes.filter((n) => n.enabled === false).length,
+  };
+}
+
+export interface FxTrackContext {
+  /** What the track reads as — `voice` / `music` / `sfx` / `unknown`. */
+  trackKind?: string;
+}
+
+const ctx = (c: FxTrackContext): FxEventProperties => ({ track_kind: c.trackKind ?? "unknown" });
+
+// --- presets ---------------------------------------------------------------
+
+export function trackPresetApplied(
+  presetId: string,
+  family: string,
+  nodeCount: number,
+  mode: "append" | "replace" | "reapply",
+  c: FxTrackContext,
+): void {
+  track("preset_applied", { preset: presetId, family, node_count: nodeCount, mode, ...ctx(c) });
+}
+
+export function trackPresetRemoved(presetId: string, c: FxTrackContext): void {
+  track("preset_removed", { preset: presetId, ...ctx(c) });
+}
+
+/** The whole-preset wet/dry knob, on release. `amount` is 0..1. */
+export function trackPresetAmount(presetId: string, amount: number, c: FxTrackContext): void {
+  track("preset_amount", { preset: presetId, amount, ...ctx(c) });
+}
+
+export function trackPresetAutomated(presetId: string, on: boolean, c: FxTrackContext): void {
+  track("preset_automated", { preset: presetId, enabled: on, ...ctx(c) });
+}
+
+/**
+ * Hover-auditioning a preset from the shelf.
+ *
+ * Fired once per preset per time the shelf is opened, not once per hover: a
+ * pointer crossing the shelf passes over a dozen items in a second, and
+ * counting those would drown every other event in the feature and describe
+ * mouse travel rather than interest.
+ */
+export function trackPresetAuditioned(presetId: string, c: FxTrackContext): void {
+  track("preset_auditioned", { preset: presetId, ...ctx(c) });
+}
+
+// --- nodes -----------------------------------------------------------------
+
+/**
+ * `via` separates the two doors onto the same effect: a named job arrives
+ * already aimed at a frequency, a bare effect does not. Which one authors
+ * actually reach for is the question the jobs were built to answer.
+ */
+export function trackNodeAdded(
+  type: string,
+  via: "job" | "effect" | "eq" | "leveller",
+  jobId: string | null,
+  c: FxTrackContext,
+): void {
+  track("node_added", { effect: type, via, job: jobId ?? "none", ...ctx(c) });
+}
+
+export function trackNodeRemoved(type: string, origin: string, c: FxTrackContext): void {
+  track("node_removed", { effect: type, origin, ...ctx(c) });
+}
+
+export function trackNodeBypassed(type: string, bypassed: boolean, c: FxTrackContext): void {
+  track("node_bypassed", { effect: type, bypassed, ...ctx(c) });
+}
+
+export function trackNodeMoved(type: string, direction: "up" | "down", c: FxTrackContext): void {
+  track("node_moved", { effect: type, direction, ...ctx(c) });
+}
+
+// --- parameters ------------------------------------------------------------
+
+/**
+ * A committed parameter edit.
+ *
+ * `surface` is the point of the event. Every effect with a one-knob profile can
+ * be driven either by that derived knob or by opening Details and setting the
+ * mechanism directly, and the whole one-knob design rests on a claim about
+ * which one people use. Without this property the two are indistinguishable.
+ *
+ * The value goes too — a parameter key with no value tells you somebody touched
+ * "frequency" and not that every author lands on 80 Hz.
+ */
+export function trackParamCommitted(
+  type: string,
+  param: string,
+  value: number | string,
+  surface: "knob" | "details",
+  c: FxTrackContext,
+): void {
+  track("param_committed", { effect: type, param, value, surface, ...ctx(c) });
+}
+
+/** The derived one-knob control, on release. `strength` is 0..1. */
+export function trackProfileCommitted(type: string, strength: number, c: FxTrackContext): void {
+  track("profile_committed", { effect: type, strength, ...ctx(c) });
+}
+
+// --- the measuring modules -------------------------------------------------
+
+export function trackCarveChanged(
+  action: "enabled" | "disabled" | "strength" | "sources",
+  props: { strength?: number; sourceCount?: number },
+): void {
+  track("carve_changed", {
+    action,
+    strength: props.strength,
+    source_count: props.sourceCount,
+  });
+}
+
+export function trackLeveller(action: "run" | "removed" | "auditioned"): void {
+  track("leveller", { action });
+}
+
+export function trackEqChanged(band: string, value: number): void {
+  track("eq_changed", { band, value });
+}
+
+// --- provenance ------------------------------------------------------------
+
+/**
+ * What arrived on a composition that this session did not put there.
+ *
+ * This is how agent-applied effects become visible at all. An agent asked to
+ * fix a mix does not drive the panel — it edits the composition HTML, or runs
+ * `scripts/carve.mjs`, and the rack simply finds the result already present.
+ * None of the events above will ever fire for that work.
+ *
+ * So the panel reports the shape of what it was handed, and how many edits this
+ * session had made when it appeared. Fx that changed while the studio was open
+ * with `panel_edits` unmoved was written by something else — which, combined
+ * with `agent_runtime` on the same event, is as close to "an agent did this" as
+ * the browser can honestly get.
+ *
+ * `first_sight` distinguishes opening a composition that already had effects
+ * from watching effects appear in one that did not.
+ */
+export function trackChainObserved(
+  chain: HfAudioFxChain | null,
+  props: { firstSight: boolean; panelEdits: number; hasCarve: boolean; hasAutomation: boolean },
+  c: FxTrackContext,
+): void {
+  track("chain_observed", {
+    ...chainShape(chain),
+    first_sight: props.firstSight,
+    panel_edits: props.panelEdits,
+    // The whole point: no panel edits behind a chain that is present or that
+    // just changed means the chain came from outside the studio.
+    authored_outside: props.panelEdits === 0,
+    has_carve: props.hasCarve,
+    has_automation: props.hasAutomation,
+    ...ctx(c),
+  });
+}

package/src/components/editor/domEditInlineText.test.ts

@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi } from "vitest";
+import type { DomEditSelection, DomEditTextField } from "./domEditingTypes";
+
+const editable = vi.hoisted(() => ({ current: true }));
+vi.mock("./domEditingLayers", () => ({
+  isTextEditableSelection: () => editable.current,
+}));
+
+const { canEditTextInline, isDoublePress } = await import("./domEditInlineText");
+
+function field(key: string): DomEditTextField {
+  return {
+    key,
+    label: key,
+    value: "text",
+    tagName: "SPAN",
+    attributes: [],
+    inlineStyles: {},
+    computedStyles: {},
+    source: "self",
+  };
+}
+
+function selection(partial: Partial<DomEditSelection> = {}): DomEditSelection {
+  return {
+    label: "Heading",
+    tagName: "H1",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    textFields: [field("self")],
+    ...partial,
+  } as DomEditSelection;
+}
+
+describe("canEditTextInline", () => {
+  it("allows an element the panel would let you edit text on", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection())).toBe(true);
+  });
+
+  // The bar is the panel's bar: nothing becomes editable here that is not
+  // editable there.
+  it("refuses an element whose text the panel cannot edit either", () => {
+    editable.current = false;
+    expect(canEditTextInline(selection())).toBe(false);
+  });
+
+  // Editing the whole element would flatten its children into one string.
+  it("refuses an element with several text fields", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ textFields: [field("a"), field("b")] }))).toBe(false);
+  });
+
+  it("allows an element with no separate text fields", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ textFields: [] }))).toBe(true);
+  });
+
+  it("refuses the composition host, which is the document rather than copy", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ isCompositionHost: true }))).toBe(false);
+  });
+
+  it("refuses anything inside a locked composition", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ isInsideLockedComposition: true }))).toBe(false);
+  });
+
+  it("refuses nothing at all", () => {
+    editable.current = true;
+    expect(canEditTextInline(null)).toBe(false);
+  });
+});
+
+describe("isDoublePress", () => {
+  it("pairs presses only when they land on the same element", () => {
+    const first = document.createElement("div");
+    const second = document.createElement("div");
+    const previous = { x: 10, y: 10, at: 100, element: first };
+
+    expect(isDoublePress(previous, { x: 12, y: 12, at: 200, element: first })).toBe(true);
+    expect(isDoublePress(previous, { x: 12, y: 12, at: 200, element: second })).toBe(false);
+  });
+});