@hyperframes/studio 0.8.86 → 0.8.88

package/src/hooks/useDomStyleCommit.test.tsx

@@ -0,0 +1,155 @@
+// @vitest-environment happy-dom
+import { act, createElement, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useDomStyleCommit, type UseDomStyleCommitOptions } from "../index";
+import { makeSelection } from "./domSelectionTestHarness";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const SOURCE = '<div id="card" style="color: red">Card</div>';
+
+/** Each patch answers with the next status in `failures` (none left: success). */
+function stubServer(failures: number[] = []) {
+  const patches: unknown[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input instanceof Request ? input.url : input);
+      const json = (body: unknown) =>
+        new Response(JSON.stringify(body), { headers: { "content-type": "application/json" } });
+      if (url.includes("/api/projects/p1/files/")) return json({ content: SOURCE });
+      if (url.includes("/api/projects/p1/file-mutations/patch-element/")) {
+        patches.push(JSON.parse(String(init?.body)));
+        const status = failures.shift();
+        if (status) return new Response(JSON.stringify({ error: "refused" }), { status });
+        return json({
+          ok: true,
+          changed: true,
+          matched: true,
+          content: "<div>saved</div>",
+          path: "index.html",
+          version: "v2",
+        });
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    }),
+  );
+  return patches;
+}
+
+function renderHost(options: Partial<UseDomStyleCommitOptions> = {}) {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("Expected iframe document");
+  doc.body.innerHTML = SOURCE;
+  const element = doc.getElementById("card") as HTMLElement;
+  const recordEdit = vi.fn(async () => {});
+  const api: { current: ReturnType<typeof useDomStyleCommit> | null } = { current: null };
+  function Host() {
+    const iframeRef = useRef<HTMLIFrameElement | null>(iframe);
+    api.current = useDomStyleCommit({
+      projectId: "p1",
+      iframeRef,
+      writeProjectFile: vi.fn(async () => {}),
+      recordEdit,
+      ...options,
+    });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(createElement(Host)));
+  const hook = () => {
+    if (!api.current) throw new Error("Expected the hook to render");
+    return api.current;
+  };
+  return { element, recordEdit, hook, unmount: () => act(() => root.unmount()) };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = "";
+});
+
+describe("useDomStyleCommit, from the package entry", () => {
+  it("applies several properties live and saves them as one patch and one undo step", async () => {
+    const patches = stubServer();
+    const { element, recordEdit, hook, unmount } = renderHost();
+
+    const outcome = await hook().commitStyle(makeSelection("card", element), {
+      color: "blue",
+      "font-size": "40px",
+    });
+    await hook().waitForPendingSaves();
+
+    expect(outcome.ok).toBe(true);
+    expect(element.style.color).toBe("blue");
+    expect(element.style.fontSize).toBe("40px");
+    expect(patches).toHaveLength(1);
+    expect((patches[0] as { operations: unknown[] }).operations).toHaveLength(2);
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    expect(recordEdit).toHaveBeenCalledWith(expect.objectContaining({ label: "Edit layer style" }));
+    unmount();
+  });
+
+  it("refuses geometry and read-only selections with a reason, and writes nothing", async () => {
+    const patches = stubServer();
+    const { element, hook, unmount } = renderHost();
+    const selection = makeSelection("card", element);
+
+    await expect(hook().commitStyle(selection, { width: "10px" })).resolves.toEqual({
+      ok: false,
+      reason: "geometry-property",
+    });
+    const readOnly = {
+      ...selection,
+      capabilities: { ...selection.capabilities, canEditStyles: false },
+    };
+    await expect(hook().commitStyle(readOnly, { color: "blue" })).resolves.toEqual({
+      ok: false,
+      reason: "styles-not-editable",
+    });
+    expect(patches).toHaveLength(0);
+    expect(element.style.color).toBe("red");
+    unmount();
+  });
+
+  it("never lets a failed save revert a later edit's property", async () => {
+    stubServer([500]);
+    const { element, hook, unmount } = renderHost();
+    const selection = makeSelection("card", element);
+
+    const first = hook().commitStyle(selection, { color: "blue" });
+    const second = hook().commitStyle(selection, { color: "green", "font-size": "40px" });
+
+    expect((await first).ok).toBe(false);
+    expect((await second).ok).toBe(true);
+    expect(element.style.color).toBe("green");
+    unmount();
+  });
+
+  it("saves again after a conflict paused the queue", async () => {
+    stubServer([409]);
+    const { element, hook, unmount } = renderHost();
+    const selection = makeSelection("card", element);
+
+    expect((await hook().commitStyle(selection, { color: "blue" })).ok).toBe(false);
+    expect((await hook().commitStyle(selection, { color: "green" })).ok).toBe(true);
+    unmount();
+  });
+
+  it("refuses without a project", async () => {
+    stubServer();
+    const { element, hook, unmount } = renderHost({ projectId: null });
+    await expect(
+      hook().commitStyle(makeSelection("card", element), { color: "blue" }),
+    ).resolves.toEqual({
+      ok: false,
+      reason: "no-project",
+    });
+    unmount();
+  });
+});

package/src/hooks/useDomStyleCommit.ts

@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import { createDomEditSaveQueue, type DomEditSaveDrainResult } from "../utils/domEditSaveQueue";
+import type { DomEditCommitOutcome } from "./domEditCommitRunner";
+import { commitDomStyles } from "./domStyleCommit";
+import { useDomEditPersist, type RecordEditInput } from "./useDomEditPersist";
+import { useMountEffect } from "./useMountEffect";
+
+export interface UseDomStyleCommitOptions {
+  projectId: string | null;
+  /** The preview the host already runs: the style applies there live, and it reseeks after a save. */
+  iframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+  /** The same function objects the host gives the timeline, so there is one writer and one undo list. */
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
+  recordEdit: (entry: RecordEditInput) => Promise<void>;
+  activeCompPath?: string | null;
+  showToast?: (message: string, tone?: "error" | "info") => void;
+}
+
+const noop = () => {};
+
+/** Saves style edits on a selection through Studio's own style commit, for a host without the editor. */
+export function useDomStyleCommit({
+  projectId,
+  iframeRef,
+  writeProjectFile,
+  recordEdit,
+  activeCompPath = null,
+  showToast = noop,
+}: UseDomStyleCommitOptions): {
+  commitStyle: (
+    selection: DomEditSelection,
+    styles: Record<string, string>,
+  ) => Promise<DomEditCommitOutcome>;
+  waitForPendingSaves: () => Promise<DomEditSaveDrainResult>;
+} {
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
+  const [queue] = useState(createDomEditSaveQueue);
+  useMountEffect(() => () => queue.destroy());
+  const versions = useRef(new Map<string, symbol>()).current;
+  const editHistory = useMemo(() => ({ recordEdit }), [recordEdit]);
+  const persistDomEditOperations = useDomEditPersist({
+    activeCompPath,
+    previewIframeRef: iframeRef,
+    showToast,
+    queueDomEditSave: queue.enqueue,
+    writeProjectFile,
+    editHistory,
+    projectIdRef,
+    reloadPreview: noop,
+  });
+  const commitStyle = useCallback(
+    (selection: DomEditSelection, styles: Record<string, string>) => {
+      // Each call is the user's own retry, so a pause left by an earlier failed save never blocks it.
+      queue.reset();
+      return projectIdRef.current
+        ? commitDomStyles(
+            {
+              activeCompPath,
+              previewIframeRef: iframeRef,
+              persistDomEditOperations,
+              showToast,
+              versions,
+            },
+            selection,
+            styles,
+          )
+        : Promise.resolve<DomEditCommitOutcome>({ ok: false, reason: "no-project" });
+    },
+    [activeCompPath, iframeRef, persistDomEditOperations, queue, showToast, versions],
+  );
+  return { commitStyle, waitForPendingSaves: queue.waitForIdle };
+}

package/src/hooks/useGsapAnimationFetchFallback.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, expect, it } from "vitest";
 import type { GsapAnimation, ParsedGsap } from "@hyperframes/core/gsap-parser";
 import {
@@ -41,6 +43,16 @@ describe("selectElementAnimationsOrRetry", () => {
     ]);
   });
 
+  it("matches a class tween through the live element, as the selected-element list does", () => {
+    const element = document.createElement("div");
+    element.id = "puck-a";
+    element.className = "puck";
+    const outcome = selectElementAnimationsOrRetry(parsed([anim(".puck")]), target, element);
+    expect(outcome.kind === "resolved" && outcome.animations.map((a) => a.targetSelector)).toEqual([
+      ".puck",
+    ]);
+  });
+
   it("resolves to [] (no retry) for a warm parse with no match — element genuinely has no animation", () => {
     const outcome = selectElementAnimationsOrRetry(parsed([anim("#other")]), target);
     expect(outcome).toEqual({ kind: "resolved", animations: [] });

package/src/hooks/useGsapAnimationFetchFallback.ts

@@ -49,10 +49,14 @@ export function gsapSourceFileForSelection(selection: DomEditSelection): string
 export function selectElementAnimationsOrRetry(
   parsed: Pick<ParsedGsap, "animations"> | null,
   target: { id: string | null; selector: string | null },
+  element?: Element | null,
 ): ElementAnimationsOutcome {
   if (!parsed) return { kind: "fetch-error" };
   if (parsed.animations.length === 0) return { kind: "cold" };
-  return { kind: "resolved", animations: getAnimationsForElement(parsed.animations, target) };
+  return {
+    kind: "resolved",
+    animations: getAnimationsForElement(parsed.animations, target, element),
+  };
 }
 
 // Retry policy deliberately distinguishes cold parses from hard fetch errors.
@@ -61,6 +65,7 @@ async function fetchElementAnimationsWithRetry(
   projectId: string,
   gsapSourceFile: string,
   target: { id: string | null; selector: string | null },
+  element: Element,
   failOnFetchError: boolean,
   fresh: boolean,
 ): Promise<GsapAnimation[]> {
@@ -69,7 +74,7 @@ async function fetchElementAnimationsWithRetry(
   for (;;) {
     const parsed = await fetchParsedAnimations(projectId, gsapSourceFile, { fresh });
     fresh = false;
-    const outcome = selectElementAnimationsOrRetry(parsed, target);
+    const outcome = selectElementAnimationsOrRetry(parsed, target, element);
     if (outcome.kind === "resolved") return outcome.animations;
     if (outcome.kind === "fetch-error") {
       if (errorAttempts >= FETCH_ERROR_RETRIES) {
@@ -96,6 +101,7 @@ export function useGsapAnimationFetchFallback(projectId: string | null) {
           projectId,
           gsapSourceFileForSelection(selection),
           target,
+          selection.element,
           options?.failOnFetchError === true,
           options?.fresh === true,
         );

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -300,6 +300,10 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     expect(commitMutation).not.toHaveBeenCalled();
     expect(mocks.drag).toHaveBeenCalledTimes(2);
+    expect(mocks.drag.mock.calls.map((call) => call[6])).toEqual([
+      { preflightOnly: true, group: true },
+      { preflightOnly: true, group: true },
+    ]);
     expect(makeFetchFallback).toHaveBeenNthCalledWith(1, updates[0]!.selection, {
       failOnFetchError: true,
     });

package/src/hooks/useGsapAwareEditing.ts

@@ -240,7 +240,7 @@ export function useGsapAwareEditing({
             previewIframeRef.current,
             coalescedCommit,
             undefined,
-            { preflightOnly: true },
+            { preflightOnly: true, group: true },
           );
           assertGsapEditPersisted(outcome);
         }),

package/src/hooks/useGsapTweenCache.ts

@@ -19,58 +19,12 @@ import {
   type MergeableKeyframe,
 } from "./gsapTweenSynth";
 import { fetchParsedAnimations, populateKeyframeCacheFromAst } from "./keyframeCacheAstLoad";
+import { getAnimationsForElement } from "./gsapElementMatch";
 
 // Re-exported so callers keep importing the GSAP cache surface from one module.
 export { resolveClipTimingBasis } from "./gsapShared";
 export { fetchParsedAnimations, resolveSelectorElementIds } from "./keyframeCacheAstLoad";
-
-/** The selected element's identity for matching tweens to it. */
-export interface GsapElementTarget {
-  id?: string | null;
-  selector?: string | null;
-}
-
-/**
- * A tween belongs to the selected element when its target selector addresses
- * that element — by id (`#id`), by the exact CSS selector the element was
- * selected through (`.kicker`), or as one member of a group selector
- * (`.clock-face, .clock-hand`, emitted for array/`toArray` targets). Real
- * compositions target tweens by class via `querySelector`, so id-only matching
- * misses them.
- *
- * When the live DOM `element` is supplied, each comma-part of a tween's selector
- * is also tested with `element.matches(part)` — true CSS semantics — so a
- * class/descendant tween shared across elements (e.g. `gsap.from(".dot", {stagger})`)
- * is attributed to *every* matching element, not just the one whose exact
- * selector string happens to equal the tween's.
- */
-export function getAnimationsForElement(
-  animations: GsapAnimation[],
-  target: GsapElementTarget,
-  element?: Element | null,
-): GsapAnimation[] {
-  const matchers = new Set<string>();
-  if (target.id) matchers.add(`#${target.id}`);
-  if (target.selector) matchers.add(target.selector);
-  if (matchers.size === 0 && !element) return [];
-  return animations.filter((a) =>
-    a.targetSelector.split(",").some((part) => {
-      const trimmed = part.trim();
-      if (!trimmed) return false;
-      if (matchers.has(trimmed)) return true;
-      const lastSimple = trimmed.split(/\s+/).pop();
-      if (lastSimple && matchers.has(lastSimple)) return true;
-      if (element) {
-        try {
-          if (element.matches(trimmed)) return true;
-        } catch {
-          /* tween selector isn't a valid CSS selector for matches() — skip */
-        }
-      }
-      return false;
-    }),
-  );
-}
+export { getAnimationsForElement } from "./gsapElementMatch";
 
 export function useGsapAnimationsForElement(
   projectId: string | null,

package/src/index.ts

@@ -167,7 +167,7 @@ export type { AudioMeterStripProps } from "./components/nle/AudioMeterStrip";
 export { useClipboard } from "./hooks/useClipboard";
 export type { UseClipboardOptions } from "./hooks/useClipboard";
 
-// DOM editing: the canvas session, persistence and overlay, for a host outside EditorShell.
+// DOM editing for a host outside EditorShell; useDomStyleCommit saves styles without the session.
 export { useDomEditSession } from "./hooks/useDomEditSession";
 export type { UseDomEditSessionParams } from "./hooks/useDomEditSession";
 export { usePreviewPersistence } from "./hooks/usePreviewPersistence";
@@ -177,6 +177,15 @@ export { PreviewReadOnlyProvider } from "./components/editor/previewReadOnlyCont
 export { ConnectedDomEditOverlay } from "./components/editor/ConnectedDomEditOverlay";
 export type { ConnectedDomEditOverlayProps } from "./components/editor/ConnectedDomEditOverlay";
 export type { DomEditCapabilities, DomEditSelection } from "./components/editor/domEditingTypes";
+export { useDomStyleCommit } from "./hooks/useDomStyleCommit";
+export type { UseDomStyleCommitOptions } from "./hooks/useDomStyleCommit";
+export type { DomEditCommitDeclineReason, DomEditCommitOutcome } from "./hooks/domEditCommitRunner";
+export { resolveDomEditSelection } from "./components/editor/domEditingLayers";
+export { DomEditOverlay } from "./components/editor/DomEditOverlay";
+export type {
+  DomEditGroupPathOffsetCommit,
+  DomEditOverlayProps,
+} from "./components/editor/DomEditOverlay";
 
 export {
   playSeamTransitionLoop,

package/src/player/components/Timeline.audioEffects.test.tsx

@@ -0,0 +1,80 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Timeline } from "./Timeline";
+import { installTimelineMountEnv } from "./timelineMountTestEnv";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+installTimelineMountEnv();
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+const voice: TimelineElement = {
+  id: "vo",
+  domId: "vo",
+  tag: "audio",
+  start: 0,
+  duration: 4,
+  track: 0,
+};
+const grouped: TimelineElement[] = ["vo-1", "vo-2"].map((id, track) => ({
+  id,
+  domId: id,
+  tag: "audio",
+  start: 0,
+  duration: 4,
+  track,
+  audioGroup: "voiceover",
+  audioGroupLabel: "Voiceover",
+}));
+
+async function mount(elements: TimelineElement[], showAudioEffects?: boolean) {
+  usePlayerStore.setState({ duration: 10, currentTime: 0, timelineReady: true, elements });
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  await act(async () => root.render(<Timeline showAudioEffects={showAudioEffects} />));
+  const labels = Array.from(host.querySelectorAll("button")).map(
+    (b) => b.getAttribute("aria-label") ?? "",
+  );
+  act(() => root.unmount());
+  return labels;
+}
+
+const effects = (labels: string[]) => labels.filter((l) => l.startsWith("Effects"));
+
+describe("Timeline showAudioEffects", () => {
+  it("shows the effects button on an audio track by default", async () => {
+    expect(effects(await mount([voice]))).toHaveLength(1);
+  });
+
+  it("hides the effects button on an audio track when the host turns effects off", async () => {
+    expect(effects(await mount([voice], false))).toEqual([]);
+  });
+
+  it("hides the group-these-clips effects button on a track of several clips", async () => {
+    const clips: TimelineElement[] = [
+      { ...voice, id: "sfx-1", domId: "sfx-1" },
+      { ...voice, id: "sfx-2", domId: "sfx-2", start: 5 },
+    ];
+    expect(effects(await mount(clips))).toHaveLength(1);
+    expect(effects(await mount(clips, false))).toEqual([]);
+  });
+
+  it("hides a group's effects button and its open-effects name when effects are off", async () => {
+    const on = await mount(grouped);
+    expect(effects(on).length).toBeGreaterThan(0);
+    expect(on).toContain("Open Voiceover effects");
+
+    const off = await mount(grouped, false);
+    expect(effects(off)).toEqual([]);
+    expect(off).not.toContain("Open Voiceover effects");
+    expect(off).toContain("Select Voiceover");
+  });
+});

package/src/player/components/Timeline.bandEscape.test.tsx

@@ -0,0 +1,75 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { Timeline } from "./Timeline";
+import { usePlayerStore } from "../store/playerStore";
+import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
+
+installReactActEnvironment();
+for (const [prop, px] of [
+  ["clientWidth", 1000],
+  ["clientHeight", 400],
+  ["offsetWidth", 1000],
+  ["offsetHeight", 400],
+] as const) {
+  vi.spyOn(HTMLElement.prototype, prop, "get").mockReturnValue(px);
+}
+
+const pointer = (type: string, clientX: number, clientY: number) =>
+  new PointerEvent(type, { bubbles: true, button: 0, pointerId: 1, clientX, clientY });
+const band = () => document.querySelector('[style*="dashed"]');
+
+let root: Root;
+let viewport: HTMLElement;
+let hostEscapes: KeyboardEvent[];
+const hostListener = (e: KeyboardEvent) => {
+  if (e.key === "Escape") hostEscapes.push(e);
+};
+
+beforeEach(async () => {
+  usePlayerStore.setState({
+    duration: 20,
+    timelineReady: true,
+    elements: [{ id: "intro", key: "intro", tag: "div", start: 0, duration: 1, track: 0 }],
+  });
+  usePlayerStore.getState().setSelectedElementId("intro");
+  root = mountReactHarness(<Timeline />);
+  await act(async () => new Promise((r) => setTimeout(r, 50)));
+  viewport = document.querySelector<HTMLElement>("[data-timeline-scroll-viewport]")!;
+  hostEscapes = [];
+  document.addEventListener("keydown", hostListener);
+});
+
+afterEach(() => {
+  document.removeEventListener("keydown", hostListener);
+  act(() => root.unmount());
+  usePlayerStore.setState({ elements: [], timelineReady: false, selectedElementId: null });
+  document.body.innerHTML = "";
+});
+
+const escape = () => {
+  const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+  act(() => void document.body.dispatchEvent(event));
+  return event;
+};
+
+it("an escape that cancels a marquee band stops there and never reaches the host", () => {
+  act(() => void viewport.dispatchEvent(pointer("pointerdown", 800, 200)));
+  act(() => void viewport.dispatchEvent(pointer("pointermove", 860, 260)));
+  expect(band()).not.toBeNull();
+
+  const event = escape();
+
+  expect(hostEscapes).toHaveLength(0);
+  expect(event.defaultPrevented).toBe(true);
+  expect(band()).toBeNull();
+  expect(usePlayerStore.getState().selectedElementId).toBe("intro");
+});
+
+it("an escape with no band in flight still reaches the host", () => {
+  const event = escape();
+
+  expect(event.defaultPrevented).toBe(false);
+  expect(hostEscapes).toHaveLength(1);
+});

package/src/player/components/Timeline.playheadRemount.test.tsx

@@ -2,38 +2,14 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { describe, expect, it } from "vitest";
 import { Timeline } from "./Timeline";
+import { installTimelineMountEnv } from "./timelineMountTestEnv";
 import { liveTime, usePlayerStore } from "../store/playerStore";
 
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
-class MockResizeObserver {
-  constructor(private readonly callback: ResizeObserverCallback) {}
-  observe(target: Element) {
-    this.callback([{ target } as ResizeObserverEntry], this as unknown as ResizeObserver);
-  }
-  unobserve() {}
-  disconnect() {}
-}
-
-const originalResizeObserver = globalThis.ResizeObserver;
-const originalClientWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientWidth");
-
-beforeAll(() => {
-  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
-  Object.defineProperty(HTMLElement.prototype, "clientWidth", {
-    configurable: true,
-    get: () => 900,
-  });
-});
-
-afterAll(() => {
-  globalThis.ResizeObserver = originalResizeObserver;
-  if (originalClientWidth)
-    Object.defineProperty(HTMLElement.prototype, "clientWidth", originalClientWidth);
-  document.body.innerHTML = "";
-});
+installTimelineMountEnv();
 
 const clips = [{ id: "intro", tag: "div", start: 2, duration: 10, track: 0 }];
 const needle = (host: HTMLElement) =>