@editframe/react 0.24.1-beta.0 → 0.25.1-beta.0

package/dist/hooks/useTimingInfo.js

@@ -1,68 +1,65 @@
-import { useRef, useState, useEffect } from "react";
-class CurrentTimeController {
-  constructor(host, setCurrentTime) {
-    this.host = host;
-    this.setCurrentTime = setCurrentTime;
-    this.host.addController(this);
-  }
-  #lastTaskPromise = null;
-  #isConnected = false;
-  hostConnected() {
-    this.#isConnected = true;
-  }
-  hostDisconnected() {
-    this.#isConnected = false;
-    this.#lastTaskPromise = null;
-    this.host.removeController(this);
-  }
-  hostUpdated() {
-    const currentTaskPromise = this.host.frameTask.taskComplete;
-    if (currentTaskPromise !== this.#lastTaskPromise) {
-      this.#lastTaskPromise = currentTaskPromise;
-      currentTaskPromise.then(() => {
-        if (this.#isConnected) {
-          this.#updateReactState();
-        }
-      }).catch(() => {
-      });
-    }
-  }
-  #updateReactState() {
-    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() {
-    this.#updateReactState();
-  }
-}
-const useTimingInfo = (timegroupRef = useRef(null)) => {
-  const [timeInfo, setTimeInfo] = useState({
-    ownCurrentTimeMs: 0,
-    durationMs: 0,
-    percentComplete: 0
-  });
-  useEffect(() => {
-    if (!timegroupRef.current) {
-      throw new Error("Timegroup ref not set");
-    }
-    const controller = new CurrentTimeController(
-      timegroupRef.current,
-      setTimeInfo
-    );
-    if (timegroupRef.current.isConnected) {
-      controller.hostConnected();
-      controller.syncNow();
-    }
-    return () => {
-      controller.hostDisconnected();
-    };
-  }, [timegroupRef.current]);
-  return { ...timeInfo, ref: timegroupRef };
+import { useEffect, useRef, useState } from "react";
+
+//#region src/hooks/useTimingInfo.ts
+var CurrentTimeController = class {
+	#lastTaskPromise = null;
+	#isConnected = false;
+	constructor(host, setCurrentTime) {
+		this.host = host;
+		this.setCurrentTime = setCurrentTime;
+		this.host.addController(this);
+	}
+	hostConnected() {
+		this.#isConnected = true;
+	}
+	hostDisconnected() {
+		this.#isConnected = false;
+		this.#lastTaskPromise = null;
+		this.host.removeController(this);
+	}
+	hostUpdated() {
+		const currentTaskPromise = this.host.frameTask.taskComplete;
+		if (currentTaskPromise !== this.#lastTaskPromise) {
+			this.#lastTaskPromise = currentTaskPromise;
+			currentTaskPromise.then(() => {
+				if (this.#isConnected) this.#updateReactState();
+			}).catch(() => {});
+		}
+	}
+	#updateReactState() {
+		this.setCurrentTime({
+			ownCurrentTimeMs: this.host.ownCurrentTimeMs,
+			durationMs: this.host.durationMs,
+			percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs
+		});
+	}
+	syncNow() {
+		this.#updateReactState();
+	}
 };
-export {
-  useTimingInfo
+const useTimingInfo = (timegroupRef = useRef(null)) => {
+	const [timeInfo, setTimeInfo] = useState({
+		ownCurrentTimeMs: 0,
+		durationMs: 0,
+		percentComplete: 0
+	});
+	useEffect(() => {
+		if (!timegroupRef.current) throw new Error("Timegroup ref not set");
+		const controller = new CurrentTimeController(timegroupRef.current, setTimeInfo);
+		if (timegroupRef.current.isConnected) {
+			controller.hostConnected();
+			controller.syncNow();
+		}
+		return () => {
+			controller.hostDisconnected();
+		};
+	}, [timegroupRef.current]);
+	return {
+		...timeInfo,
+		ref: timegroupRef
+	};
 };
+
+//#endregion
+export { useTimingInfo };
+//# sourceMappingURL=useTimingInfo.js.map

package/dist/hooks/useTimingInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimingInfo.js","names":["host: {\n      ownCurrentTimeMs: number;\n      durationMs: number;\n      frameTask: Task<readonly unknown[], unknown>;\n    } & ReactiveControllerHost","setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>","#isConnected","#lastTaskPromise","#updateReactState"],"sources":["../../src/hooks/useTimingInfo.ts"],"sourcesContent":["import type { EFTimegroup } from \"@editframe/elements\";\nimport type { Task } from \"@lit/task\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface TimeInfo {\n  ownCurrentTimeMs: number;\n  durationMs: number;\n  percentComplete: number;\n}\n\nclass CurrentTimeController implements ReactiveController {\n  #lastTaskPromise: Promise<unknown> | null = null;\n  #isConnected = false;\n\n  constructor(\n    private host: {\n      ownCurrentTimeMs: number;\n      durationMs: number;\n      frameTask: Task<readonly unknown[], unknown>;\n    } & ReactiveControllerHost,\n    private setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>,\n  ) {\n    this.host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#isConnected = true;\n  }\n\n  hostDisconnected(): void {\n    this.#isConnected = false;\n    this.#lastTaskPromise = null;\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    const currentTaskPromise = this.host.frameTask.taskComplete;\n\n    // Detect if a new frame task has started (promise reference changed)\n    if (currentTaskPromise !== this.#lastTaskPromise) {\n      this.#lastTaskPromise = currentTaskPromise;\n\n      // Wait for this specific task to complete, then update React\n      // This is async so it doesn't block the update cycle\n      currentTaskPromise\n        .then(() => {\n          // Only update if still connected\n          if (this.#isConnected) {\n            this.#updateReactState();\n          }\n        })\n        .catch(() => {\n          // Ignore task errors - we'll continue observing\n        });\n    }\n  }\n\n  #updateReactState(): void {\n    // Always update to ensure React has the latest state\n    this.setCurrentTime({\n      ownCurrentTimeMs: this.host.ownCurrentTimeMs,\n      durationMs: this.host.durationMs,\n      percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs,\n    });\n  }\n\n  // Public method to manually trigger sync (for initialization)\n  syncNow(): void {\n    this.#updateReactState();\n  }\n}\n\nexport const useTimingInfo = (\n  timegroupRef: React.RefObject<EFTimegroup> = useRef<EFTimegroup>(null),\n) => {\n  const [timeInfo, setTimeInfo] = useState<TimeInfo>({\n    ownCurrentTimeMs: 0,\n    durationMs: 0,\n    percentComplete: 0,\n  });\n\n  useEffect(() => {\n    if (!timegroupRef.current) {\n      throw new Error(\"Timegroup ref not set\");\n    }\n\n    const controller = new CurrentTimeController(\n      timegroupRef.current,\n      setTimeInfo,\n    );\n\n    // Trigger initial update if the timegroup is already connected\n    if (timegroupRef.current.isConnected) {\n      controller.hostConnected();\n      // Sync initial state immediately\n      controller.syncNow();\n    }\n\n    // Cleanup function\n    return () => {\n      controller.hostDisconnected();\n    };\n  }, [timegroupRef.current]);\n\n  return { ...timeInfo, ref: timegroupRef };\n};\n"],"mappings":";;;AAWA,IAAM,wBAAN,MAA0D;CACxD,mBAA4C;CAC5C,eAAe;CAEf,YACE,AAAQA,MAKR,AAAQC,gBACR;EANQ;EAKA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAsB;AACpB,QAAKC,cAAe;;CAGtB,mBAAyB;AACvB,QAAKA,cAAe;AACpB,QAAKC,kBAAmB;AACxB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;EAClB,MAAM,qBAAqB,KAAK,KAAK,UAAU;AAG/C,MAAI,uBAAuB,MAAKA,iBAAkB;AAChD,SAAKA,kBAAmB;AAIxB,sBACG,WAAW;AAEV,QAAI,MAAKD,YACP,OAAKE,kBAAmB;KAE1B,CACD,YAAY,GAEX;;;CAIR,oBAA0B;AAExB,OAAK,eAAe;GAClB,kBAAkB,KAAK,KAAK;GAC5B,YAAY,KAAK,KAAK;GACtB,iBAAiB,KAAK,KAAK,mBAAmB,KAAK,KAAK;GACzD,CAAC;;CAIJ,UAAgB;AACd,QAAKA,kBAAmB;;;AAI5B,MAAa,iBACX,eAA6C,OAAoB,KAAK,KACnE;CACH,MAAM,CAAC,UAAU,eAAe,SAAmB;EACjD,kBAAkB;EAClB,YAAY;EACZ,iBAAiB;EAClB,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,aAAa,QAChB,OAAM,IAAI,MAAM,wBAAwB;EAG1C,MAAM,aAAa,IAAI,sBACrB,aAAa,SACb,YACD;AAGD,MAAI,aAAa,QAAQ,aAAa;AACpC,cAAW,eAAe;AAE1B,cAAW,SAAS;;AAItB,eAAa;AACX,cAAW,kBAAkB;;IAE9B,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAO;EAAE,GAAG;EAAU,KAAK;EAAc"}

package/dist/index.d.ts

@@ -1,24 +1,25 @@
-export { TimeDisplay } from './components/TimeDisplay.js';
-export { Audio } from './elements/Audio.js';
-export { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, } from './elements/Captions.js';
-export { Image } from './elements/Image.js';
-export { Surface } from './elements/Surface.js';
-export { ThumbnailStrip } from './elements/ThumbnailStrip.js';
-export { Timegroup } from './elements/Timegroup.js';
-export { Video } from './elements/Video.js';
-export { Waveform } from './elements/Waveform.js';
-export { Configuration } from './gui/Configuration.js';
-export { Controls } from './gui/Controls.js';
-export { Dial } from './gui/EFDial.js';
-export { ResizableBox } from './gui/EFResizableBox.js';
-export { Filmstrip } from './gui/Filmstrip.js';
-export { FitScale } from './gui/FitScale.js';
-export { FocusOverlay } from './gui/FocusOverlay.js';
-export { Pause } from './gui/Pause.js';
-export { Play } from './gui/Play.js';
-export { Preview } from './gui/Preview.js';
-export { Scrubber } from './gui/Scrubber.js';
-export { ToggleLoop } from './gui/ToggleLoop.js';
-export { TogglePlay } from './gui/TogglePlay.js';
-export { Workbench } from './gui/Workbench.js';
-export { useTimingInfo } from './hooks/useTimingInfo.js';
+import { TimeDisplay } from "./components/TimeDisplay.js";
+import { Audio } from "./elements/Audio.js";
+import { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment } from "./elements/Captions.js";
+import { Image } from "./elements/Image.js";
+import { Surface } from "./elements/Surface.js";
+import { ThumbnailStrip } from "./elements/ThumbnailStrip.js";
+import { Timegroup } from "./elements/Timegroup.js";
+import { Video } from "./elements/Video.js";
+import { Waveform } from "./elements/Waveform.js";
+import { Configuration } from "./gui/Configuration.js";
+import { Controls } from "./gui/Controls.js";
+import { Dial } from "./gui/EFDial.js";
+import { ResizableBox } from "./gui/EFResizableBox.js";
+import { Filmstrip } from "./gui/Filmstrip.js";
+import { FitScale } from "./gui/FitScale.js";
+import { FocusOverlay } from "./gui/FocusOverlay.js";
+import { Pause } from "./gui/Pause.js";
+import { Play } from "./gui/Play.js";
+import { Preview } from "./gui/Preview.js";
+import { Scrubber } from "./gui/Scrubber.js";
+import { ToggleLoop } from "./gui/ToggleLoop.js";
+import { TogglePlay } from "./gui/TogglePlay.js";
+import { Workbench } from "./gui/Workbench.js";
+import { useTimingInfo } from "./hooks/useTimingInfo.js";
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, Pause, Play, Preview, ResizableBox, Scrubber, Surface, ThumbnailStrip, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };

package/dist/index.js

@@ -22,33 +22,5 @@ import { ToggleLoop } from "./gui/ToggleLoop.js";
 import { TogglePlay } from "./gui/TogglePlay.js";
 import { Workbench } from "./gui/Workbench.js";
 import { useTimingInfo } from "./hooks/useTimingInfo.js";
-export {
-  Audio,
-  Captions,
-  CaptionsActiveWord,
-  CaptionsAfterActiveWord,
-  CaptionsBeforeActiveWord,
-  CaptionsSegment,
-  Configuration,
-  Controls,
-  Dial,
-  Filmstrip,
-  FitScale,
-  FocusOverlay,
-  Image,
-  Pause,
-  Play,
-  Preview,
-  ResizableBox,
-  Scrubber,
-  Surface,
-  ThumbnailStrip,
-  TimeDisplay,
-  Timegroup,
-  ToggleLoop,
-  TogglePlay,
-  Video,
-  Waveform,
-  Workbench,
-  useTimingInfo
-};
+
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, Pause, Play, Preview, ResizableBox, Scrubber, Surface, ThumbnailStrip, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/react",
-  "version": "0.24.1-beta.0",
+  "version": "0.25.1-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -9,23 +9,20 @@
         "default": "./dist/index.js"
       }
     },
-    "./types.json": {
-      "import": {
-        "default": "./types.json"
-      }
-    }
+    "./package.json": "./package.json",
+    "./types.json": "./types.json"
   },
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
     "typedoc": "typedoc --json ./types.json --plugin typedoc-plugin-zod --excludeExternals ./src && jq -c . ./types.json > ./types.tmp.json && mv ./types.tmp.json ./types.json"
   },
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.24.1-beta.0",
+    "@editframe/elements": "0.25.1-beta.0",
     "@lit/react": "^1.0.8",
     "@lit/task": "^1.0.1",
     "debug": "^4.3.5",
@@ -37,10 +34,25 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.5.4",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        }
+      },
+      "./package.json": "./package.json",
+      "./types.json": "./types.json"
+    }
   }
 }

package/tsdown.config.ts

@@ -0,0 +1,55 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import autoprefixer from "autoprefixer";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+import { defineConfig, type Plugin } from "tsdown";
+
+import { createTsdownConfig } from "../tsdown.config.base.ts";
+
+// Plugin to handle CSS ?inline imports from @editframe/elements with Tailwind processing
+const inlineCssPlugin = (): Plugin => ({
+  name: "inline-css",
+  resolveId(source, importer) {
+    if (source.endsWith(".css?inline") && importer) {
+      const resolved = path.resolve(
+        path.dirname(importer),
+        source.replace("?inline", ""),
+      );
+      return { id: resolved + "?inline", external: false };
+    }
+    return null;
+  },
+  async load(id) {
+    if (id.endsWith("?inline")) {
+      const filePath = id.replace("?inline", "");
+      const css = readFileSync(filePath, "utf-8");
+
+      // Process through Tailwind if it contains @tailwind directives
+      if (css.includes("@tailwind")) {
+        const srcDir = path.resolve(path.dirname(filePath));
+        const result = await postcss([
+          tailwindcss({
+            content: [path.join(srcDir, "**/*.ts")],
+          }),
+          autoprefixer(),
+        ]).process(css, { from: filePath });
+
+        return `export default ${JSON.stringify(result.css)}`;
+      }
+
+      return `export default ${JSON.stringify(css)}`;
+    }
+    return null;
+  },
+});
+
+export default defineConfig(
+  createTsdownConfig({
+    plugins: [inlineCssPlugin()],
+    external: [/@editframe\/(elements|assets)/],
+    additionalExports: {
+      "./types.json": "./types.json",
+    },
+  }),
+);