@editframe/react 0.26.3-beta.0 → 0.26.4-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/react",
-  "version": "0.26.3-beta.0",
+  "version": "0.26.4-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -22,7 +22,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.26.3-beta.0",
+    "@editframe/elements": "0.26.4-beta.0",
     "@lit/task": "^1.0.1",
     "lit": "^3.3.1",
     "react": "^18.3.0"

package/tsdown.config.ts

@@ -16,7 +16,7 @@ const inlineCssPlugin = (): Plugin => ({
         path.dirname(importer),
         source.replace("?inline", ""),
       );
-      return { id: resolved + "?inline", external: false };
+      return { id: `${resolved}?inline`, external: false };
     }
     return null;
   },

package/src/components/TimeDisplay.tsx

@@ -1,13 +0,0 @@
-import { EFTimeDisplay } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const TimeDisplay = createComponent({
-  tagName: "ef-time-display",
-  elementClass: EFTimeDisplay,
-  react: React,
-});
-
-export type TimeDisplayProps = {
-  className?: string;
-};

package/src/elements/Audio.ts

@@ -1,9 +0,0 @@
-import { EFAudio as EFAudioElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Audio = createComponent({
-  tagName: "ef-audio",
-  elementClass: EFAudioElement,
-  react: React,
-});

package/src/elements/Captions.ts

@@ -1,39 +0,0 @@
-import {
-  EFCaptionsActiveWord as EFCaptionsActiveWordElement,
-  EFCaptionsAfterActiveWord as EFCaptionsAfterActiveWordElement,
-  EFCaptionsBeforeActiveWord as EFCaptionsBeforeActiveWordElement,
-  EFCaptions as EFCaptionsElement,
-  EFCaptionsSegment as EFCaptionsSegmentElement,
-} from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Captions = createComponent({
-  tagName: "ef-captions",
-  elementClass: EFCaptionsElement,
-  react: React,
-});
-
-export const CaptionsActiveWord = createComponent({
-  tagName: "ef-captions-active-word",
-  elementClass: EFCaptionsActiveWordElement,
-  react: React,
-});
-
-export const CaptionsSegment = createComponent({
-  tagName: "ef-captions-segment",
-  elementClass: EFCaptionsSegmentElement,
-  react: React,
-});
-
-export const CaptionsBeforeActiveWord = createComponent({
-  tagName: "ef-captions-before-active-word",
-  elementClass: EFCaptionsBeforeActiveWordElement,
-  react: React,
-});
-
-export const CaptionsAfterActiveWord = createComponent({
-  tagName: "ef-captions-after-active-word",
-  elementClass: EFCaptionsAfterActiveWordElement,
-  react: React,
-});

package/src/elements/Image.ts

@@ -1,9 +0,0 @@
-import { EFImage as EFImageElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Image = createComponent({
-  tagName: "ef-image",
-  elementClass: EFImageElement,
-  react: React,
-});

package/src/elements/Surface.ts

@@ -1,11 +0,0 @@
-import { EFSurface as EFSurfaceElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Surface = createComponent({
-  tagName: "ef-surface",
-  elementClass: EFSurfaceElement,
-  react: React,
-  displayName: "Surface",
-  events: {},
-});

package/src/elements/ThumbnailStrip.ts

@@ -1,11 +0,0 @@
-import { EFThumbnailStrip as EFThumbnailStripElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const ThumbnailStrip = createComponent({
-  tagName: "ef-thumbnail-strip",
-  elementClass: EFThumbnailStripElement,
-  react: React,
-  displayName: "ThumbnailStrip",
-  events: {},
-});

package/src/elements/Timegroup.ts

@@ -1,9 +0,0 @@
-import { EFTimegroup as EFTimegroupElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Timegroup = createComponent({
-  tagName: "ef-timegroup",
-  elementClass: EFTimegroupElement,
-  react: React,
-});

package/src/elements/Video.ts

@@ -1,9 +0,0 @@
-import { EFVideo as EFVideoElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Video = createComponent({
-  tagName: "ef-video",
-  elementClass: EFVideoElement,
-  react: React,
-});

package/src/elements/Waveform.ts

@@ -1,9 +0,0 @@
-import { EFWaveform as EFWaveformElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Waveform = createComponent({
-  tagName: "ef-waveform",
-  elementClass: EFWaveformElement,
-  react: React,
-});

package/src/gui/Configuration.ts

@@ -1,9 +0,0 @@
-import { EFConfiguration } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Configuration = createComponent({
-  tagName: "ef-configuration",
-  elementClass: EFConfiguration,
-  react: React,
-});

package/src/gui/Controls.browsertest.tsx

@@ -1,112 +0,0 @@
-import React from "react";
-import { createRoot, hydrateRoot, type Root } from "react-dom/client";
-import { renderToString } from "react-dom/server";
-import { test as baseTest, describe, vi } from "vitest";
-import { Timegroup } from "../elements/Timegroup";
-import { setIsomorphicEffect } from "../hooks/create-element";
-import { Configuration } from "./Configuration";
-import { Controls } from "./Controls";
-import { Preview } from "./Preview";
-import { TogglePlay } from "./TogglePlay";
-
-const test = baseTest.extend<{
-  root: Root;
-  markup: JSX.Element;
-  stringMarkup: string;
-  hydratedContainer: HTMLElement;
-  renderedContainer: HTMLElement;
-}>({
-  // biome-ignore lint/correctness/noEmptyPattern: Required by Vitest fixture syntax
-  markup: async ({}, use) => {
-    const markup = (
-      <>
-        <Configuration>
-          {/* biome-ignore lint/correctness/useUniqueElementIds: OK for test fixture with single instance */}
-          <Preview id="test-preview">
-            <Timegroup mode="fixed" duration="10s" />
-          </Preview>
-          <Controls target="test-preview">
-            <TogglePlay />
-          </Controls>
-        </Configuration>
-      </>
-    );
-    await use(markup);
-  },
-  stringMarkup: async ({ markup }, use) => {
-    setIsomorphicEffect(React.useEffect);
-    const stringMarkup = renderToString(markup);
-    setIsomorphicEffect(React.useLayoutEffect);
-    await use(stringMarkup);
-  },
-  hydratedContainer: async ({ stringMarkup, markup }, use) => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    container.innerHTML = stringMarkup;
-    hydrateRoot(container, markup);
-    await use(container);
-    container.remove();
-  },
-  // biome-ignore lint/correctness/noEmptyPattern: Required by Vitest fixture syntax
-  renderedContainer: async ({}, use) => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    await use(container);
-    container.remove();
-  },
-  root: async ({ renderedContainer, markup }, use) => {
-    const root = createRoot(renderedContainer);
-    root.render(markup);
-    await use(root);
-    root.unmount();
-  },
-});
-
-describe("Controls", () => {
-  describe("renderedContainer", () => {
-    test.skip("works", async ({ renderedContainer, expect }) => {
-      await vi.waitUntil(
-        () => {
-          return renderedContainer.innerHTML.includes("ef-controls");
-        },
-        { timeout: 5000 },
-      );
-      const controls =
-        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
-        renderedContainer.getElementsByTagName("ef-controls")[0]!;
-      const preview =
-        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
-        renderedContainer.getElementsByTagName("ef-preview")[0]!;
-      const togglePlay =
-        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
-        renderedContainer.getElementsByTagName("ef-toggle-play")[0]!;
-
-      expect(controls.targetElement).toBe(preview);
-      expect(togglePlay.efContext).toBe(preview);
-    }, 5000);
-  });
-
-  describe("hydratedContainer", () => {
-    test("proxies contexts following hydration", async ({
-      hydratedContainer,
-      expect,
-    }) => {
-      await vi.waitUntil(
-        () => hydratedContainer.innerHTML.includes("ef-controls"),
-        { timeout: 5000 },
-      );
-      const controls =
-        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
-        hydratedContainer.getElementsByTagName("ef-controls")[0]!;
-      const preview =
-        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
-        hydratedContainer.getElementsByTagName("ef-preview")[0]!;
-      const togglePlay =
-        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
-        hydratedContainer.getElementsByTagName("ef-toggle-play")[0]!;
-
-      expect(controls.targetElement).toBe(preview);
-      expect(togglePlay.efContext).toBe(preview);
-    }, 5000);
-  });
-});

package/src/gui/Controls.ts

@@ -1,9 +0,0 @@
-import { EFControls as EFControlsElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Controls = createComponent({
-  tagName: "ef-controls",
-  elementClass: EFControlsElement,
-  react: React,
-});

package/src/gui/EFDial.ts

@@ -1,12 +0,0 @@
-import { EFDial as EFDialElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Dial = createComponent({
-  tagName: "ef-dial",
-  elementClass: EFDialElement,
-  react: React,
-  events: {
-    onChange: "change",
-  },
-});

package/src/gui/EFResizableBox.ts

@@ -1,12 +0,0 @@
-import { EFResizableBox as EFResizableBoxElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const ResizableBox = createComponent({
-  tagName: "ef-resizable-box",
-  elementClass: EFResizableBoxElement,
-  react: React,
-  events: {
-    onBoundsChange: "bounds-change",
-  },
-});

package/src/gui/Filmstrip.ts

@@ -1,9 +0,0 @@
-import { EFFilmstrip as EFFilmstripElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Filmstrip = createComponent({
-  tagName: "ef-filmstrip",
-  elementClass: EFFilmstripElement,
-  react: React,
-});

package/src/gui/FitScale.ts

@@ -1,9 +0,0 @@
-import { EFFitScale as EFFitScaleElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const FitScale = createComponent({
-  tagName: "ef-fit-scale",
-  elementClass: EFFitScaleElement,
-  react: React,
-});

package/src/gui/FocusOverlay.ts

@@ -1,9 +0,0 @@
-import { EFFocusOverlay as EFFocusOverlayElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const FocusOverlay = createComponent({
-  tagName: "ef-focus-overlay",
-  elementClass: EFFocusOverlayElement,
-  react: React,
-});

package/src/gui/Pause.ts

@@ -1,9 +0,0 @@
-import { EFPause as EFPauseElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Pause = createComponent({
-  tagName: "ef-pause",
-  elementClass: EFPauseElement,
-  react: React,
-});

package/src/gui/Play.ts

@@ -1,9 +0,0 @@
-import { EFPlay as EFPlayElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Play = createComponent({
-  tagName: "ef-play",
-  elementClass: EFPlayElement,
-  react: React,
-});

package/src/gui/Preview.ts

@@ -1,9 +0,0 @@
-import { EFPreview as EFPreviewElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Preview = createComponent({
-  tagName: "ef-preview",
-  elementClass: EFPreviewElement,
-  react: React,
-});

package/src/gui/Scrubber.ts

@@ -1,9 +0,0 @@
-import { EFScrubber as EFScrubberElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Scrubber = createComponent({
-  tagName: "ef-scrubber",
-  elementClass: EFScrubberElement,
-  react: React,
-});

package/src/gui/ToggleLoop.ts

@@ -1,9 +0,0 @@
-import { EFToggleLoop as EFToggleLoopElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const ToggleLoop = createComponent({
-  tagName: "ef-toggle-loop",
-  elementClass: EFToggleLoopElement,
-  react: React,
-});

package/src/gui/TogglePlay.ts

@@ -1,9 +0,0 @@
-import { EFTogglePlay as EFTogglePlayElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const TogglePlay = createComponent({
-  tagName: "ef-toggle-play",
-  elementClass: EFTogglePlayElement,
-  react: React,
-});

package/src/gui/Workbench.ts

@@ -1,9 +0,0 @@
-import { EFWorkbench as EFWorkbenchElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Workbench = createComponent({
-  tagName: "ef-workbench",
-  elementClass: EFWorkbenchElement,
-  react: React,
-});

package/src/hooks/create-element.ts

@@ -1,167 +0,0 @@
-import React from "react";
-
-let isomorphicEffect =
-  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-
-export function setIsomorphicEffect(
-  effect: typeof React.useLayoutEffect | typeof React.useEffect,
-) {
-  isomorphicEffect = effect;
-}
-
-const reservedReactProperties = new Set([
-  "children",
-  "localName",
-  "ref",
-  "style",
-  "className",
-]);
-const listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();
-
-type Constructor<T> = { new (): T };
-type EventNames = Record<string, string>;
-
-type EventListeners<E extends EventNames> = {
-  [K in keyof E]?: (e: Event) => void;
-};
-
-type ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;
-type ComponentProps<I, E extends EventNames = {}> = Omit<
-  React.HTMLAttributes<I>,
-  keyof E | keyof ElementProps<I>
-> &
-  EventListeners<E> &
-  ElementProps<I>;
-
-export type ReactWebComponent<
-  I extends HTMLElement,
-  E extends EventNames = {},
-> = React.ForwardRefExoticComponent<
-  ComponentProps<I, E> & React.RefAttributes<I>
->;
-
-export interface Options<I extends HTMLElement, E extends EventNames = {}> {
-  react: typeof React;
-  tagName: string;
-  elementClass: Constructor<I>;
-  events?: E;
-  displayName?: string;
-}
-
-function addOrUpdateEventListener(
-  node: Element,
-  event: string,
-  listener?: (e?: Event) => void,
-) {
-  let events = listenedEvents.get(node);
-  if (!events) {
-    events = new Map();
-    listenedEvents.set(node, events);
-  }
-  let handler = events.get(event);
-
-  if (listener) {
-    if (!handler) {
-      handler = { handleEvent: listener };
-      events.set(event, handler);
-      node.addEventListener(event, handler);
-    } else {
-      handler.handleEvent = listener;
-    }
-  } else if (handler) {
-    events.delete(event);
-    node.removeEventListener(event, handler);
-  }
-}
-
-function setProperty<E extends Element>(
-  node: E,
-  name: string,
-  value: unknown,
-  old: unknown,
-  events?: EventNames,
-) {
-  const event = events?.[name];
-  if (event) {
-    if (value !== old)
-      addOrUpdateEventListener(node, event, value as (e?: Event) => void);
-    return;
-  }
-  node[name as keyof E] = value as E[keyof E];
-  if (
-    (value === undefined || value === null) &&
-    name in HTMLElement.prototype
-  ) {
-    node.removeAttribute(name);
-  }
-}
-
-export function createComponent<
-  I extends HTMLElement,
-  E extends EventNames = {},
->({
-  react: React,
-  tagName,
-  elementClass,
-  events,
-  displayName,
-}: Options<I, E>): ReactWebComponent<I, E> {
-  const eventProps = new Set(Object.keys(events ?? {}));
-
-  const ReactComponent = React.forwardRef<I, ComponentProps<I, E>>(
-    (props, ref) => {
-      const elementRef = React.useRef<I | null>(null);
-      const prevPropsRef = React.useRef(new Map<string, unknown>());
-
-      const reactProps: Record<string, unknown> = {
-        suppressHydrationWarning: true,
-      };
-      const elementProps: Record<string, unknown> = {};
-
-      for (const [k, v] of Object.entries(props)) {
-        if (reservedReactProperties.has(k)) {
-          reactProps[k === "className" ? "class" : k] = v;
-          continue;
-        }
-        if (eventProps.has(k) || k in elementClass.prototype)
-          elementProps[k] = v;
-        reactProps[k] = v;
-      }
-
-      isomorphicEffect(() => {
-        if (!elementRef.current) return;
-        const newProps = new Map<string, unknown>();
-        for (const key in elementProps) {
-          setProperty(
-            elementRef.current,
-            key,
-            props[key as keyof typeof props],
-            prevPropsRef.current.get(key),
-            events,
-          );
-          prevPropsRef.current.delete(key);
-          newProps.set(key, props[key as keyof typeof props]);
-        }
-        for (const [key, value] of prevPropsRef.current) {
-          setProperty(elementRef.current, key, undefined, value, events);
-        }
-        prevPropsRef.current = newProps;
-
-        // Remove defer-hydration if present
-        elementRef.current.removeAttribute("defer-hydration");
-      }, [props]);
-
-      return React.createElement(tagName, {
-        ...reactProps,
-        ref: (node: I) => {
-          elementRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-      });
-    },
-  );
-
-  ReactComponent.displayName = displayName ?? elementClass.name;
-  return ReactComponent as ReactWebComponent<I, E>;
-}

package/src/hooks/useTimingInfo.browsertest.tsx

@@ -1,371 +0,0 @@
-import type { EFTimegroup } from "@editframe/elements";
-import { type FC, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { assert, beforeEach, describe, test } from "vitest";
-import { Timegroup } from "../elements/Timegroup.js";
-import { Video } from "../elements/Video.js";
-import { Configuration } from "../gui/Configuration.js";
-import { Preview } from "../gui/Preview.js";
-import { useTimingInfo } from "./useTimingInfo.js";
-
-beforeEach(() => {
-  while (document.body.children.length) {
-    document.body.children[0]?.remove();
-  }
-});
-
-interface TimingDisplayProps {
-  onUpdate?: (info: {
-    ownCurrentTimeMs: number;
-    durationMs: number;
-    percentComplete: number;
-  }) => void;
-}
-
-const TimingDisplay: FC<TimingDisplayProps> = ({ onUpdate }) => {
-  const { ownCurrentTimeMs, durationMs, percentComplete, ref } =
-    useTimingInfo();
-
-  useEffect(() => {
-    if (onUpdate) {
-      onUpdate({ ownCurrentTimeMs, durationMs, percentComplete });
-    }
-  }, [ownCurrentTimeMs, durationMs, percentComplete, onUpdate]);
-
-  return (
-    // biome-ignore lint/correctness/useUniqueElementIds: OK for test fixture with single instance
-    <Preview id="test-preview">
-      <Timegroup mode="fixed" duration="3s" ref={ref}>
-        <Video
-          src="https://editframe-dev-assets.s3.us-east-1.amazonaws.com/test-assets/test_audio.mp4"
-          trim="0s-1s"
-        />
-      </Timegroup>
-    </Preview>
-  );
-};
-
-describe("useTimingInfo", () => {
-  test("provides initial timing information", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-
-    let receivedInfo: {
-      ownCurrentTimeMs: number;
-      durationMs: number;
-      percentComplete: number;
-    } | null = null;
-
-    const root = createRoot(container);
-    root.render(
-      <Configuration>
-        <TimingDisplay
-          onUpdate={(info) => {
-            receivedInfo = info;
-          }}
-        />
-      </Configuration>,
-    );
-
-    // Wait for the component to mount and update
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const preview = container.querySelector("ef-preview");
-    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
-
-    assert.ok(timegroup, "Timegroup should be rendered");
-    await timegroup.updateComplete;
-    await timegroup.waitForMediaDurations();
-
-    // Wait for initial frame task
-    await timegroup.frameTask.run();
-
-    assert.ok(receivedInfo, "Should receive timing info");
-    assert.equal(receivedInfo?.ownCurrentTimeMs, 0);
-    assert.equal(receivedInfo?.durationMs, 3000);
-    assert.equal(receivedInfo?.percentComplete, 0);
-
-    root.unmount();
-    container.remove();
-  }, 5000);
-
-  test("updates only on frame task completion, not on every Lit update", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-
-    const updates: number[] = [];
-
-    const root = createRoot(container);
-    root.render(
-      <Configuration>
-        <TimingDisplay
-          onUpdate={(info) => {
-            updates.push(info.ownCurrentTimeMs);
-          }}
-        />
-      </Configuration>,
-    );
-
-    // Wait for initial mount
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const preview = container.querySelector("ef-preview");
-    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
-
-    assert.ok(timegroup, "Timegroup should be rendered");
-    await timegroup.updateComplete;
-    await timegroup.waitForMediaDurations();
-
-    // Clear initial updates
-    updates.length = 0;
-
-    // Trigger multiple Lit updates without frame task
-    // These should NOT trigger React updates
-    timegroup.requestUpdate("mode");
-    await timegroup.updateComplete;
-    timegroup.requestUpdate("mode");
-    await timegroup.updateComplete;
-    timegroup.requestUpdate("mode");
-    await timegroup.updateComplete;
-
-    // Should have no updates since no frame tasks ran
-    assert.equal(
-      updates.length,
-      0,
-      "Should not update on Lit property changes",
-    );
-
-    // Now trigger frame task via seek (proper API that triggers both task and update)
-    await timegroup.seek(1000);
-    // Give React a chance to process the state update
-    await new Promise((resolve) => setTimeout(resolve, 50));
-
-    // Should have exactly one update from frame task
-    assert.ok(updates.length >= 1, "Should update once per frame task");
-
-    root.unmount();
-    container.remove();
-  }, 5000);
-
-  test("updates synchronously with frame tasks during seek", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-
-    const updates: number[] = [];
-
-    const root = createRoot(container);
-    root.render(
-      <Configuration>
-        <TimingDisplay
-          onUpdate={(info) => {
-            updates.push(info.ownCurrentTimeMs);
-          }}
-        />
-      </Configuration>,
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const preview = container.querySelector("ef-preview");
-    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
-
-    assert.ok(timegroup, "Timegroup should be rendered");
-    await timegroup.updateComplete;
-    await timegroup.waitForMediaDurations();
-
-    // Clear initial updates
-    updates.length = 0;
-
-    // Seek to different times
-    await timegroup.seek(1000);
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    const updatesAfterFirstSeek = updates.length;
-    assert.ok(updatesAfterFirstSeek > 0, "Should update after first seek");
-
-    await timegroup.seek(2000);
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    const updatesAfterSecondSeek = updates.length;
-    assert.ok(
-      updatesAfterSecondSeek > updatesAfterFirstSeek,
-      "Should update after second seek",
-    );
-
-    // Verify the last update has the correct time
-    const lastUpdate = updates[updates.length - 1];
-    assert.equal(lastUpdate, 2000, "Should reflect the seeked time");
-
-    root.unmount();
-    container.remove();
-  }, 5000);
-
-  test("updates at controlled rate with sequential frame updates", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-
-    const updateTimestamps: number[] = [];
-    const updateTimes: number[] = [];
-
-    const root = createRoot(container);
-    root.render(
-      <Configuration>
-        <TimingDisplay
-          onUpdate={(info) => {
-            updateTimestamps.push(performance.now());
-            updateTimes.push(info.ownCurrentTimeMs);
-          }}
-        />
-      </Configuration>,
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const preview = container.querySelector("ef-preview");
-    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
-
-    assert.ok(timegroup, "Timegroup should be rendered");
-    await timegroup.updateComplete;
-    await timegroup.waitForMediaDurations();
-
-    // Clear initial updates
-    updateTimestamps.length = 0;
-    updateTimes.length = 0;
-
-    // Simulate frame-by-frame updates at a controlled rate (30fps)
-    // Note: We use seek() rather than play() because AudioContext-based playback
-    // doesn't work in headless browsers due to autoplay policies that require user interaction
-    const FPS = 30;
-    const MS_PER_FRAME = 1000 / FPS;
-    const DURATION_MS = 500;
-    const numFrames = Math.floor(DURATION_MS / MS_PER_FRAME);
-
-    for (let i = 0; i < numFrames; i++) {
-      const targetTime = i * MS_PER_FRAME;
-      await timegroup.seek(targetTime);
-      await new Promise((resolve) => setTimeout(resolve, MS_PER_FRAME));
-    }
-
-    // Should have received multiple updates during simulated playback
-    assert.ok(
-      updateTimestamps.length >= 10,
-      `Should have at least 10 updates during simulated playback (got ${updateTimestamps.length})`,
-    );
-
-    // Calculate update intervals
-    const intervals: number[] = [];
-    for (let i = 1; i < updateTimestamps.length; i++) {
-      intervals.push(updateTimestamps[i] - updateTimestamps[i - 1]);
-    }
-
-    // Average interval should be around 33ms (30fps) matching our simulated rate
-    const avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
-
-    // Should be approximately 33ms per frame
-    // Allow generous variance for timing imprecision in CI
-    assert.ok(
-      avgInterval > 20 && avgInterval < 100,
-      `Update interval should be between 20-100ms (got ${avgInterval}ms), indicating controlled rate`,
-    );
-
-    root.unmount();
-    container.remove();
-  }, 5000);
-
-  test("continues observing after errors in frame task", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-
-    const updates: number[] = [];
-
-    const root = createRoot(container);
-    root.render(
-      <Configuration>
-        <TimingDisplay
-          onUpdate={(info) => {
-            updates.push(info.ownCurrentTimeMs);
-          }}
-        />
-      </Configuration>,
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const preview = container.querySelector("ef-preview");
-    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
-
-    assert.ok(timegroup, "Timegroup should be rendered");
-    await timegroup.updateComplete;
-    await timegroup.waitForMediaDurations();
-
-    updates.length = 0;
-
-    // First seek triggers frame task
-    await timegroup.seek(500);
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    assert.ok(updates.length >= 1, "Should update after first seek");
-
-    // Even if there's an error or the task rejects, the observer should continue
-    // (The implementation catches errors and continues observing)
-    const updatesAfterFirst = updates.length;
-
-    // Second seek triggers another frame task
-    await timegroup.seek(1000);
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    assert.ok(updates.length > updatesAfterFirst, "Should continue updating");
-
-    root.unmount();
-    container.remove();
-  }, 5000);
-
-  test("stops observing when component unmounts", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-
-    const updates: number[] = [];
-
-    const root = createRoot(container);
-    root.render(
-      <Configuration>
-        <TimingDisplay
-          onUpdate={(info) => {
-            updates.push(info.ownCurrentTimeMs);
-          }}
-        />
-      </Configuration>,
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const preview = container.querySelector("ef-preview");
-    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
-
-    assert.ok(timegroup, "Timegroup should be rendered");
-    await timegroup.updateComplete;
-    await timegroup.waitForMediaDurations();
-
-    updates.length = 0;
-
-    // Seek before unmount (triggers frame task)
-    await timegroup.seek(500);
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    assert.ok(updates.length >= 1, "Should update before unmount");
-
-    // Unmount the component
-    root.unmount();
-    await new Promise((resolve) => setTimeout(resolve, 50));
-
-    // Seek after unmount should not cause updates
-    const updatesBeforePost = updates.length;
-    await timegroup.seek(1000);
-
-    // Give time for any potential updates
-    await new Promise((resolve) => setTimeout(resolve, 50));
-
-    assert.equal(
-      updates.length,
-      updatesBeforePost,
-      "Should not update after unmount",
-    );
-
-    container.remove();
-  }, 5000);
-});

package/src/hooks/useTimingInfo.ts

@@ -1,107 +0,0 @@
-import type { EFTimegroup } from "@editframe/elements";
-import type { Task } from "@lit/task";
-import type { ReactiveController, ReactiveControllerHost } from "lit";
-import { useEffect, useRef, useState } from "react";
-
-interface TimeInfo {
-  ownCurrentTimeMs: number;
-  durationMs: number;
-  percentComplete: number;
-}
-
-class CurrentTimeController implements ReactiveController {
-  #lastTaskPromise: Promise<unknown> | null = null;
-  #isConnected = false;
-
-  constructor(
-    private host: {
-      ownCurrentTimeMs: number;
-      durationMs: number;
-      frameTask: Task<readonly unknown[], unknown>;
-    } & ReactiveControllerHost,
-    private setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>,
-  ) {
-    this.host.addController(this);
-  }
-
-  hostConnected(): void {
-    this.#isConnected = true;
-  }
-
-  hostDisconnected(): void {
-    this.#isConnected = false;
-    this.#lastTaskPromise = null;
-    this.host.removeController(this);
-  }
-
-  hostUpdated(): void {
-    const currentTaskPromise = this.host.frameTask.taskComplete;
-
-    // Detect if a new frame task has started (promise reference changed)
-    if (currentTaskPromise !== this.#lastTaskPromise) {
-      this.#lastTaskPromise = currentTaskPromise;
-
-      // Wait for this specific task to complete, then update React
-      // This is async so it doesn't block the update cycle
-      currentTaskPromise
-        .then(() => {
-          // Only update if still connected
-          if (this.#isConnected) {
-            this.#updateReactState();
-          }
-        })
-        .catch(() => {
-          // Ignore task errors - we'll continue observing
-        });
-    }
-  }
-
-  #updateReactState(): void {
-    // Always update to ensure React has the latest state
-    this.setCurrentTime({
-      ownCurrentTimeMs: this.host.ownCurrentTimeMs,
-      durationMs: this.host.durationMs,
-      percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs,
-    });
-  }
-
-  // Public method to manually trigger sync (for initialization)
-  syncNow(): void {
-    this.#updateReactState();
-  }
-}
-
-export const useTimingInfo = (
-  timegroupRef: React.RefObject<EFTimegroup> = useRef<EFTimegroup>(null),
-) => {
-  const [timeInfo, setTimeInfo] = useState<TimeInfo>({
-    ownCurrentTimeMs: 0,
-    durationMs: 0,
-    percentComplete: 0,
-  });
-
-  useEffect(() => {
-    if (!timegroupRef.current) {
-      throw new Error("Timegroup ref not set");
-    }
-
-    const controller = new CurrentTimeController(
-      timegroupRef.current,
-      setTimeInfo,
-    );
-
-    // Trigger initial update if the timegroup is already connected
-    if (timegroupRef.current.isConnected) {
-      controller.hostConnected();
-      // Sync initial state immediately
-      controller.syncNow();
-    }
-
-    // Cleanup function
-    return () => {
-      controller.hostDisconnected();
-    };
-  }, [timegroupRef.current]);
-
-  return { ...timeInfo, ref: timegroupRef };
-};