@editframe/react 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/_virtual/rolldown_runtime.js

@@ -0,0 +1,31 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function() {
+	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
+});
+
+//#endregion
+export { __commonJS, __require, __toESM };

package/dist/components/TimelineRoot.d.ts

@@ -0,0 +1,41 @@
+import * as React$1 from "react";
+
+//#region src/components/TimelineRoot.d.ts
+interface TimelineRootProps {
+  /** Unique identifier for the root timegroup */
+  id: string;
+  /** React component that renders the timeline content (must include a Timegroup at root) */
+  component: React$1.ComponentType;
+  /** Optional CSS class name for the container */
+  className?: string;
+  /** Optional inline styles for the container */
+  style?: React$1.CSSProperties;
+  /** Optional children to render alongside the component (e.g., Configuration wrapper) */
+  children?: React$1.ReactNode;
+}
+/**
+ * TimelineRoot - Factory wrapper for React-based timelines.
+ *
+ * This component enables proper clone rendering by providing a factory pattern
+ * for creating fully functional timeline instances. When render clones are created
+ * (for exports, thumbnails, etc.), the initializer re-renders the React component
+ * tree to ensure all JavaScript state and React lifecycle methods work correctly.
+ *
+ * @example
+ * ```tsx
+ * const MyTimelineContent = () => (
+ *   <Timegroup mode="sequence">
+ *     <MyScenes />
+ *   </Timegroup>
+ * );
+ *
+ * // Wrap with Configuration if needed
+ * <Configuration apiHost="...">
+ *   <TimelineRoot id="root" component={MyTimelineContent} />
+ * </Configuration>
+ * ```
+ */
+declare const TimelineRoot: React$1.FC<TimelineRootProps>;
+//#endregion
+export { TimelineRoot };
+//# sourceMappingURL=TimelineRoot.d.ts.map

package/dist/components/TimelineRoot.js

@@ -0,0 +1,78 @@
+import { __toESM } from "../_virtual/rolldown_runtime.js";
+import { require_react_dom } from "../node_modules/react-dom/index.js";
+import { require_client } from "../node_modules/react-dom/client.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/TimelineRoot.tsx
+var import_client = /* @__PURE__ */ __toESM(require_client());
+var import_react_dom = /* @__PURE__ */ __toESM(require_react_dom());
+/**
+* TimelineRoot - Factory wrapper for React-based timelines.
+* 
+* This component enables proper clone rendering by providing a factory pattern
+* for creating fully functional timeline instances. When render clones are created
+* (for exports, thumbnails, etc.), the initializer re-renders the React component
+* tree to ensure all JavaScript state and React lifecycle methods work correctly.
+* 
+* @example
+* ```tsx
+* const MyTimelineContent = () => (
+*   <Timegroup mode="sequence">
+*     <MyScenes />
+*   </Timegroup>
+* );
+* 
+* // Wrap with Configuration if needed
+* <Configuration apiHost="...">
+*   <TimelineRoot id="root" component={MyTimelineContent} />
+* </Configuration>
+* ```
+*/
+const TimelineRoot = ({ id, component: Component, className, style, children }) => {
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const timegroup = container.querySelector("ef-timegroup");
+		if (!timegroup) {
+			console.warn("[TimelineRoot] No ef-timegroup found in component. Ensure your component renders a Timegroup.");
+			return;
+		}
+		timegroup.id = id;
+		timegroup.initializer = (cloneEl) => {
+			const cloneContainer = cloneEl.parentElement;
+			if (!cloneContainer) {
+				console.error("[TimelineRoot] No parent container for clone");
+				return;
+			}
+			cloneEl.remove();
+			const root = import_client.createRoot(cloneContainer);
+			(0, import_react_dom.flushSync)(() => {
+				root.render(/* @__PURE__ */ jsx(Component, {}));
+			});
+			const newTimegroup = cloneContainer.querySelector("ef-timegroup");
+			if (newTimegroup) newTimegroup._reactRoot = root;
+			else {
+				cloneContainer._reactRoot = root;
+				console.error("[TimelineRoot] No ef-timegroup found after React render");
+			}
+		};
+		return () => {
+			timegroup.initializer = void 0;
+		};
+	}, [id, Component]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className,
+		style: {
+			display: "contents",
+			...style
+		},
+		children: [children, /* @__PURE__ */ jsx(Component, {})]
+	});
+};
+
+//#endregion
+export { TimelineRoot };
+//# sourceMappingURL=TimelineRoot.js.map

package/dist/components/TimelineRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRoot.js","names":["TimelineRoot: React.FC<TimelineRootProps>"],"sources":["../../src/components/TimelineRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { flushSync } from 'react-dom';\nimport { useEffect, useRef } from 'react';\nimport type { EFTimegroup } from '@editframe/elements';\n\ninterface TimelineRootProps {\n  /** Unique identifier for the root timegroup */\n  id: string;\n  /** React component that renders the timeline content (must include a Timegroup at root) */\n  component: React.ComponentType;\n  /** Optional CSS class name for the container */\n  className?: string;\n  /** Optional inline styles for the container */\n  style?: React.CSSProperties;\n  /** Optional children to render alongside the component (e.g., Configuration wrapper) */\n  children?: React.ReactNode;\n}\n\n/**\n * TimelineRoot - Factory wrapper for React-based timelines.\n * \n * This component enables proper clone rendering by providing a factory pattern\n * for creating fully functional timeline instances. When render clones are created\n * (for exports, thumbnails, etc.), the initializer re-renders the React component\n * tree to ensure all JavaScript state and React lifecycle methods work correctly.\n * \n * @example\n * ```tsx\n * const MyTimelineContent = () => (\n *   <Timegroup mode=\"sequence\">\n *     <MyScenes />\n *   </Timegroup>\n * );\n * \n * // Wrap with Configuration if needed\n * <Configuration apiHost=\"...\">\n *   <TimelineRoot id=\"root\" component={MyTimelineContent} />\n * </Configuration>\n * ```\n */\nexport const TimelineRoot: React.FC<TimelineRootProps> = ({\n  id,\n  component: Component,\n  className,\n  style,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  \n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    \n    // Find the root timegroup rendered by Component\n    const timegroup = container.querySelector('ef-timegroup') as EFTimegroup;\n    if (!timegroup) {\n      console.warn('[TimelineRoot] No ef-timegroup found in component. Ensure your component renders a Timegroup.');\n      return;\n    }\n    \n    // Ensure the timegroup has the specified ID\n    timegroup.id = id;\n    \n    // Register factory initializer - MUST be synchronous\n    // Uses flushSync to force React to render synchronously\n    timegroup.initializer = (cloneEl: EFTimegroup) => {\n      const cloneContainer = cloneEl.parentElement;\n      if (!cloneContainer) {\n        console.error('[TimelineRoot] No parent container for clone');\n        return;\n      }\n      \n      // Remove the cloned DOM - React will render a fresh component tree\n      // The cloned DOM doesn't have React bindings, so we need to replace it\n      cloneEl.remove();\n      \n      // Create React root for the clone container\n      const root = ReactDOM.createRoot(cloneContainer);\n      \n      // Use flushSync to render synchronously (required by initializer contract)\n      // This ensures the component tree is fully rendered before initializer returns\n      flushSync(() => {\n        root.render(<Component />);\n      });\n      \n      // Find the new timegroup rendered by React and store the React root on it\n      // This is needed for cleanup in createRenderClone\n      const newTimegroup = cloneContainer.querySelector('ef-timegroup');\n      if (newTimegroup) {\n        (newTimegroup as any)._reactRoot = root;\n      } else {\n        // Store root on container so we can still clean up\n        (cloneContainer as any)._reactRoot = root;\n        console.error('[TimelineRoot] No ef-timegroup found after React render');\n      }\n    };\n    \n    // Cleanup: remove initializer when component unmounts\n    return () => {\n      timegroup.initializer = undefined;\n    };\n  }, [id, Component]);\n  \n  return (\n    <div \n      ref={containerRef} \n      className={className} \n      style={{ display: 'contents', ...style }}\n    >\n      {children}\n      <Component />\n    </div>\n  );\n};\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAaA,gBAA6C,EACxD,IACA,WAAW,WACX,WACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;AAEjD,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAGhB,MAAM,YAAY,UAAU,cAAc,eAAe;AACzD,MAAI,CAAC,WAAW;AACd,WAAQ,KAAK,gGAAgG;AAC7G;;AAIF,YAAU,KAAK;AAIf,YAAU,eAAe,YAAyB;GAChD,MAAM,iBAAiB,QAAQ;AAC/B,OAAI,CAAC,gBAAgB;AACnB,YAAQ,MAAM,+CAA+C;AAC7D;;AAKF,WAAQ,QAAQ;GAGhB,MAAM,qBAAgB,WAAW,eAAe;AAIhD,yCAAgB;AACd,SAAK,OAAO,oBAAC,cAAY,CAAC;KAC1B;GAIF,MAAM,eAAe,eAAe,cAAc,eAAe;AACjE,OAAI,aACF,CAAC,aAAqB,aAAa;QAC9B;AAEL,IAAC,eAAuB,aAAa;AACrC,YAAQ,MAAM,0DAA0D;;;AAK5E,eAAa;AACX,aAAU,cAAc;;IAEzB,CAAC,IAAI,UAAU,CAAC;AAEnB,QACE,qBAAC;EACC,KAAK;EACM;EACX,OAAO;GAAE,SAAS;GAAY,GAAG;GAAO;aAEvC,UACD,oBAAC,cAAY;GACT"}

package/dist/elements/PanZoom.d.ts

@@ -0,0 +1,10 @@
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFPanZoom } from "@editframe/elements";
+
+//#region src/elements/PanZoom.d.ts
+declare const PanZoom: ReactWebComponent<EFPanZoom, {
+  onTransformChanged: string;
+}>;
+//#endregion
+export { PanZoom };
+//# sourceMappingURL=PanZoom.d.ts.map

package/dist/elements/PanZoom.js

@@ -0,0 +1,16 @@
+import { createComponent } from "../hooks/create-element.js";
+import { EFPanZoom } from "@editframe/elements";
+import React from "react";
+
+//#region src/elements/PanZoom.ts
+const PanZoom = createComponent({
+	tagName: "ef-pan-zoom",
+	elementClass: EFPanZoom,
+	react: React,
+	displayName: "PanZoom",
+	events: { onTransformChanged: "transform-changed" }
+});
+
+//#endregion
+export { PanZoom };
+//# sourceMappingURL=PanZoom.js.map

package/dist/elements/PanZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanZoom.js","names":["EFPanZoomElement"],"sources":["../../src/elements/PanZoom.ts"],"sourcesContent":["import { EFPanZoom as EFPanZoomElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const PanZoom = createComponent({\n  tagName: \"ef-pan-zoom\",\n  elementClass: EFPanZoomElement,\n  react: React,\n  displayName: \"PanZoom\",\n  events: {\n    onTransformChanged: \"transform-changed\",\n  },\n});\n"],"mappings":";;;;;AAIA,MAAa,UAAU,gBAAgB;CACrC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,oBAAoB,qBACrB;CACF,CAAC"}

package/dist/gui/EFTransformHandles.d.ts

@@ -0,0 +1,11 @@
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFTransformHandles } from "@editframe/elements";
+
+//#region src/gui/EFTransformHandles.d.ts
+declare const TransformHandles: ReactWebComponent<EFTransformHandles, {
+  onBoundsChange: string;
+  onRotationChange: string;
+}>;
+//#endregion
+export { TransformHandles };
+//# sourceMappingURL=EFTransformHandles.d.ts.map

package/dist/gui/EFTransformHandles.js

@@ -0,0 +1,18 @@
+import { createComponent } from "../hooks/create-element.js";
+import { EFTransformHandles } from "@editframe/elements";
+import React from "react";
+
+//#region src/gui/EFTransformHandles.ts
+const TransformHandles = createComponent({
+	tagName: "ef-transform-handles",
+	elementClass: EFTransformHandles,
+	react: React,
+	events: {
+		onBoundsChange: "bounds-change",
+		onRotationChange: "rotation-change"
+	}
+});
+
+//#endregion
+export { TransformHandles };
+//# sourceMappingURL=EFTransformHandles.js.map

package/dist/gui/EFTransformHandles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFTransformHandles.js","names":["EFTransformHandlesElement"],"sources":["../../src/gui/EFTransformHandles.ts"],"sourcesContent":["import { EFTransformHandles as EFTransformHandlesElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const TransformHandles = createComponent({\n  tagName: \"ef-transform-handles\",\n  elementClass: EFTransformHandlesElement,\n  react: React,\n  events: {\n    onBoundsChange: \"bounds-change\",\n    onRotationChange: \"rotation-change\",\n  },\n});\n"],"mappings":";;;;;AAIA,MAAa,mBAAmB,gBAAgB;CAC9C,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ;EACN,gBAAgB;EAChB,kBAAkB;EACnB;CACF,CAAC"}

package/dist/gui/OverlayItem.d.ts

@@ -0,0 +1,16 @@
+import { EFOverlayItem } from "@editframe/elements";
+import React from "react";
+
+//#region src/gui/OverlayItem.d.ts
+interface OverlayItemProps {
+  /** Element ID - automatically resolves to [data-element-id] or [data-timegroup-id] selector */
+  elementId?: string;
+  /** Target element or selector - use for custom targeting when elementId doesn't work */
+  target?: HTMLElement | string;
+  /** Called when position changes. Receives CustomEvent with OverlayItemPosition as detail. */
+  onPositionChanged?: (e: Event) => void;
+}
+declare const OverlayItem: React.ForwardRefExoticComponent<OverlayItemProps & React.RefAttributes<EFOverlayItem>>;
+//#endregion
+export { OverlayItem, OverlayItemProps };
+//# sourceMappingURL=OverlayItem.d.ts.map

package/dist/gui/OverlayItem.js

@@ -0,0 +1,16 @@
+import { createComponent } from "../hooks/create-element.js";
+import { EFOverlayItem } from "@editframe/elements";
+import React from "react";
+
+//#region src/gui/OverlayItem.tsx
+const OverlayItem = createComponent({
+	tagName: "ef-overlay-item",
+	elementClass: EFOverlayItem,
+	react: React,
+	displayName: "OverlayItem",
+	events: { onPositionChanged: "position-changed" }
+});
+
+//#endregion
+export { OverlayItem };
+//# sourceMappingURL=OverlayItem.js.map

package/dist/gui/OverlayItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayItem.js","names":["EFOverlayItemElement"],"sources":["../../src/gui/OverlayItem.tsx"],"sourcesContent":["import {\n  EFOverlayItem as EFOverlayItemElement,\n} from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport interface OverlayItemProps {\n  /** Element ID - automatically resolves to [data-element-id] or [data-timegroup-id] selector */\n  elementId?: string;\n  /** Target element or selector - use for custom targeting when elementId doesn't work */\n  target?: HTMLElement | string;\n  /** Called when position changes. Receives CustomEvent with OverlayItemPosition as detail. */\n  onPositionChanged?: (e: Event) => void;\n}\n\nexport const OverlayItem = createComponent<\n  EFOverlayItemElement,\n  { onPositionChanged: \"position-changed\" }\n>({\n  tagName: \"ef-overlay-item\",\n  elementClass: EFOverlayItemElement,\n  react: React,\n  displayName: \"OverlayItem\",\n  events: {\n    onPositionChanged: \"position-changed\",\n  },\n}) as React.ForwardRefExoticComponent<OverlayItemProps & React.RefAttributes<EFOverlayItemElement>>;\n"],"mappings":";;;;;AAeA,MAAa,cAAc,gBAGzB;CACA,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,mBAAmB,oBACpB;CACF,CAAC"}

package/dist/gui/OverlayLayer.d.ts

@@ -0,0 +1,8 @@
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFOverlayLayer } from "@editframe/elements";
+
+//#region src/gui/OverlayLayer.d.ts
+declare const OverlayLayer: ReactWebComponent<EFOverlayLayer, {}>;
+//#endregion
+export { OverlayLayer };
+//# sourceMappingURL=OverlayLayer.d.ts.map

package/dist/gui/OverlayLayer.js

@@ -0,0 +1,15 @@
+import { createComponent } from "../hooks/create-element.js";
+import { EFOverlayLayer } from "@editframe/elements";
+import React from "react";
+
+//#region src/gui/OverlayLayer.tsx
+const OverlayLayer = createComponent({
+	tagName: "ef-overlay-layer",
+	elementClass: EFOverlayLayer,
+	react: React,
+	displayName: "OverlayLayer"
+});
+
+//#endregion
+export { OverlayLayer };
+//# sourceMappingURL=OverlayLayer.js.map

package/dist/gui/OverlayLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayer.js","names":["EFOverlayLayerElement"],"sources":["../../src/gui/OverlayLayer.tsx"],"sourcesContent":["import { EFOverlayLayer as EFOverlayLayerElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\n// OverlayLayer discovers PanZoom automatically via:\n// - Lit context (if PanZoom is ancestor)\n// - Direct DOM query (if PanZoom is sibling)\n// No React props needed for coordination!\n\nexport const OverlayLayer = createComponent<EFOverlayLayerElement, {}>({\n  tagName: \"ef-overlay-layer\",\n  elementClass: EFOverlayLayerElement,\n  react: React,\n  displayName: \"OverlayLayer\",\n});\n"],"mappings":";;;;;AASA,MAAa,eAAe,gBAA2C;CACrE,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACd,CAAC"}

package/dist/gui/Scrubber.d.ts

@@ -1,8 +1,20 @@
-import { ReactWebComponent } from "../hooks/create-element.js";
 import { EFScrubber } from "@editframe/elements";
+import React from "react";
 
 //#region src/gui/Scrubber.d.ts
-declare const Scrubber: ReactWebComponent<EFScrubber, {}>;
+interface ScrubberProps {
+  orientation?: "horizontal" | "vertical";
+  currentTimeMs?: number;
+  durationMs?: number;
+  zoomScale?: number;
+  containerWidth?: number;
+  fps?: number;
+  rawScrubTimeMs?: number | null;
+  scrollContainerRef?: React.RefObject<HTMLElement>;
+  isScrubbingRef?: React.MutableRefObject<boolean>;
+  onSeek?: (time: number) => void;
+}
+declare const Scrubber: React.ForwardRefExoticComponent<ScrubberProps & React.RefAttributes<EFScrubber>>;
 //#endregion
-export { Scrubber };
+export { Scrubber, ScrubberProps };
 //# sourceMappingURL=Scrubber.d.ts.map

package/dist/gui/Scrubber.js

@@ -1,13 +1,37 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFScrubber } from "@editframe/elements";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 
-//#region src/gui/Scrubber.ts
-const Scrubber = createComponent({
+//#region src/gui/Scrubber.tsx
+const BaseScrubber = createComponent({
 	tagName: "ef-scrubber",
 	elementClass: EFScrubber,
-	react: React
+	react: React,
+	displayName: "Scrubber",
+	events: { onSeek: "seek" }
 });
+const Scrubber = React.forwardRef((props, ref) => {
+	const { scrollContainerRef, isScrubbingRef,...restProps } = props;
+	const elementRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		if (elementRef.current) {
+			if (scrollContainerRef?.current) elementRef.current.scrollContainerRef = scrollContainerRef;
+			else elementRef.current.scrollContainerRef = void 0;
+			if (isScrubbingRef) elementRef.current.isScrubbingRef = isScrubbingRef;
+			else elementRef.current.isScrubbingRef = void 0;
+		}
+	}, [scrollContainerRef?.current, isScrubbingRef]);
+	return /* @__PURE__ */ jsx(BaseScrubber, {
+		...restProps,
+		ref: (node) => {
+			elementRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		}
+	});
+});
+Scrubber.displayName = "Scrubber";
 
 //#endregion
 export { Scrubber };

package/dist/gui/Scrubber.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrubber.js","names":["EFScrubberElement"],"sources":["../../src/gui/Scrubber.ts"],"sourcesContent":["import { EFScrubber as EFScrubberElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Scrubber = createComponent({\n  tagName: \"ef-scrubber\",\n  elementClass: EFScrubberElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,WAAW,gBAAgB;CACtC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}
+{"version":3,"file":"Scrubber.js","names":[],"sources":["../../src/gui/Scrubber.tsx"],"sourcesContent":["import { EFScrubber } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport interface ScrubberProps {\n  orientation?: \"horizontal\" | \"vertical\";\n  currentTimeMs?: number;\n  durationMs?: number;\n  zoomScale?: number;\n  containerWidth?: number;\n  fps?: number;\n  rawScrubTimeMs?: number | null;\n  scrollContainerRef?: React.RefObject<HTMLElement>;\n  isScrubbingRef?: React.MutableRefObject<boolean>;\n  onSeek?: (time: number) => void;\n}\n\nconst BaseScrubber = createComponent<\n  EFScrubber,\n  { onSeek: \"seek\" }\n>({\n  tagName: \"ef-scrubber\",\n  elementClass: EFScrubber,\n  react: React,\n  displayName: \"Scrubber\",\n  events: {\n    onSeek: \"seek\",\n  },\n}) as React.ForwardRefExoticComponent<ScrubberProps & React.RefAttributes<EFScrubber>>;\n\nexport const Scrubber = React.forwardRef<EFScrubber, ScrubberProps>(\n  (props, ref) => {\n    const { scrollContainerRef, isScrubbingRef, ...restProps } = props;\n    const elementRef = React.useRef<EFScrubber | null>(null);\n\n    React.useLayoutEffect(() => {\n      if (elementRef.current) {\n        if (scrollContainerRef?.current) {\n          elementRef.current.scrollContainerRef = scrollContainerRef;\n        } else {\n          elementRef.current.scrollContainerRef = undefined;\n        }\n        if (isScrubbingRef) {\n          elementRef.current.isScrubbingRef = isScrubbingRef;\n        } else {\n          elementRef.current.isScrubbingRef = undefined;\n        }\n      }\n    }, [scrollContainerRef?.current, isScrubbingRef]);\n\n    return (\n      <BaseScrubber\n        {...restProps}\n        ref={(node) => {\n          elementRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n      />\n    );\n  },\n);\n\nScrubber.displayName = \"Scrubber\";\n"],"mappings":";;;;;;AAiBA,MAAM,eAAe,gBAGnB;CACA,SAAS;CACT,cAAc;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,QAAQ,QACT;CACF,CAAC;AAEF,MAAa,WAAW,MAAM,YAC3B,OAAO,QAAQ;CACd,MAAM,EAAE,oBAAoB,eAAgB,GAAG,cAAc;CAC7D,MAAM,aAAa,MAAM,OAA0B,KAAK;AAExD,OAAM,sBAAsB;AAC1B,MAAI,WAAW,SAAS;AACtB,OAAI,oBAAoB,QACtB,YAAW,QAAQ,qBAAqB;OAExC,YAAW,QAAQ,qBAAqB;AAE1C,OAAI,eACF,YAAW,QAAQ,iBAAiB;OAEpC,YAAW,QAAQ,iBAAiB;;IAGvC,CAAC,oBAAoB,SAAS,eAAe,CAAC;AAEjD,QACE,oBAAC;EACC,GAAI;EACJ,MAAM,SAAS;AACb,cAAW,UAAU;AACrB,OAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;YAC/B,IAAK,KAAI,UAAU;;GAE9B;EAGP;AAED,SAAS,cAAc"}

package/dist/gui/TimelineRuler.d.ts

@@ -0,0 +1,16 @@
+import { EFTimelineRuler } from "@editframe/elements";
+import React from "react";
+
+//#region src/gui/TimelineRuler.d.ts
+interface TimelineRulerProps {
+  durationMs?: number;
+  zoomScale?: number;
+  containerWidth?: number;
+  fps?: number;
+  scrollContainerSelector?: string;
+  scrollContainerRef?: React.RefObject<HTMLElement>;
+}
+declare const TimelineRuler: React.ForwardRefExoticComponent<TimelineRulerProps & React.RefAttributes<EFTimelineRuler>>;
+//#endregion
+export { TimelineRuler };
+//# sourceMappingURL=TimelineRuler.d.ts.map

package/dist/gui/TimelineRuler.js

@@ -0,0 +1,33 @@
+import { createComponent } from "../hooks/create-element.js";
+import { EFTimelineRuler } from "@editframe/elements";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/gui/TimelineRuler.tsx
+const BaseTimelineRuler = createComponent({
+	tagName: "ef-timeline-ruler",
+	elementClass: EFTimelineRuler,
+	react: React,
+	displayName: "TimelineRuler"
+});
+const TimelineRuler = React.forwardRef((props, ref) => {
+	const { scrollContainerRef,...restProps } = props;
+	const elementRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		if (elementRef.current && scrollContainerRef?.current) elementRef.current.scrollContainerElement = scrollContainerRef.current;
+		else if (elementRef.current) elementRef.current.scrollContainerElement = null;
+	}, [scrollContainerRef?.current]);
+	return /* @__PURE__ */ jsx(BaseTimelineRuler, {
+		...restProps,
+		ref: (node) => {
+			elementRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		}
+	});
+});
+TimelineRuler.displayName = "TimelineRuler";
+
+//#endregion
+export { TimelineRuler };
+//# sourceMappingURL=TimelineRuler.js.map

package/dist/gui/TimelineRuler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRuler.js","names":[],"sources":["../../src/gui/TimelineRuler.tsx"],"sourcesContent":["import { EFTimelineRuler } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport interface TimelineRulerProps {\n  durationMs?: number;\n  zoomScale?: number;\n  containerWidth?: number;\n  fps?: number;\n  scrollContainerSelector?: string;\n  scrollContainerRef?: React.RefObject<HTMLElement>;\n}\n\nconst BaseTimelineRuler = createComponent<\n  EFTimelineRuler,\n  {}\n>({\n  tagName: \"ef-timeline-ruler\",\n  elementClass: EFTimelineRuler,\n  react: React,\n  displayName: \"TimelineRuler\",\n}) as React.ForwardRefExoticComponent<TimelineRulerProps & React.RefAttributes<EFTimelineRuler>>;\n\nexport const TimelineRuler = React.forwardRef<\n  EFTimelineRuler,\n  TimelineRulerProps\n>((props, ref) => {\n  const { scrollContainerRef, ...restProps } = props;\n  const elementRef = React.useRef<EFTimelineRuler | null>(null);\n\n  React.useLayoutEffect(() => {\n    if (elementRef.current && scrollContainerRef?.current) {\n      (elementRef.current as any).scrollContainerElement = scrollContainerRef.current;\n    } else if (elementRef.current) {\n      (elementRef.current as any).scrollContainerElement = null;\n    }\n  }, [scrollContainerRef?.current]);\n\n  return (\n    <BaseTimelineRuler\n      {...(restProps as any)}\n      ref={(node) => {\n        elementRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n    />\n  );\n});\n\nTimelineRuler.displayName = \"TimelineRuler\";\n"],"mappings":";;;;;;AAaA,MAAM,oBAAoB,gBAGxB;CACA,SAAS;CACT,cAAc;CACd,OAAO;CACP,aAAa;CACd,CAAC;AAEF,MAAa,gBAAgB,MAAM,YAGhC,OAAO,QAAQ;CAChB,MAAM,EAAE,mBAAoB,GAAG,cAAc;CAC7C,MAAM,aAAa,MAAM,OAA+B,KAAK;AAE7D,OAAM,sBAAsB;AAC1B,MAAI,WAAW,WAAW,oBAAoB,QAC5C,CAAC,WAAW,QAAgB,yBAAyB,mBAAmB;WAC/D,WAAW,QACpB,CAAC,WAAW,QAAgB,yBAAyB;IAEtD,CAAC,oBAAoB,QAAQ,CAAC;AAEjC,QACE,oBAAC;EACC,GAAK;EACL,MAAM,SAAS;AACb,cAAW,UAAU;AACrB,OAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;YAC/B,IAAK,KAAI,UAAU;;GAE9B;EAEJ;AAEF,cAAc,cAAc"}

package/dist/hooks/usePanZoomTransform.d.ts

@@ -0,0 +1,25 @@
+import { PanZoomTransform } from "@editframe/elements";
+import React from "react";
+
+//#region src/hooks/usePanZoomTransform.d.ts
+
+/**
+ * Hook to get PanZoom transform values from a PanZoom element ref.
+ * Listens to transform-changed events to keep transform values in sync.
+ *
+ * @param panZoomRef - Ref to the PanZoom element
+ * @returns Current transform values (scale, x, y)
+ *
+ * @example
+ * const panZoomRef = useRef<EFPanZoom | null>(null);
+ * const transform = usePanZoomTransform(panZoomRef);
+ * // transform.scale, transform.x, transform.y
+ */
+declare function usePanZoomTransform(panZoomRef: React.RefObject<(EventTarget & {
+  scale: number;
+  x: number;
+  y: number;
+}) | null>): PanZoomTransform;
+//#endregion
+export { usePanZoomTransform };
+//# sourceMappingURL=usePanZoomTransform.d.ts.map

package/dist/hooks/usePanZoomTransform.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+//#region src/hooks/usePanZoomTransform.ts
+/**
+* Hook to get PanZoom transform values from a PanZoom element ref.
+* Listens to transform-changed events to keep transform values in sync.
+*
+* @param panZoomRef - Ref to the PanZoom element
+* @returns Current transform values (scale, x, y)
+*
+* @example
+* const panZoomRef = useRef<EFPanZoom | null>(null);
+* const transform = usePanZoomTransform(panZoomRef);
+* // transform.scale, transform.x, transform.y
+*/
+function usePanZoomTransform(panZoomRef) {
+	const [transform, setTransform] = useState({
+		scale: 1,
+		x: 0,
+		y: 0
+	});
+	useEffect(() => {
+		const panZoom = panZoomRef.current;
+		if (!panZoom) return;
+		setTransform({
+			scale: panZoom.scale ?? 1,
+			x: panZoom.x ?? 0,
+			y: panZoom.y ?? 0
+		});
+		const handleTransformChanged = (e) => {
+			const customEvent = e;
+			if (customEvent.detail) setTransform(customEvent.detail);
+			else setTransform({
+				scale: panZoom.scale ?? 1,
+				x: panZoom.x ?? 0,
+				y: panZoom.y ?? 0
+			});
+		};
+		panZoom.addEventListener("transform-changed", handleTransformChanged);
+		return () => {
+			panZoom.removeEventListener("transform-changed", handleTransformChanged);
+		};
+	}, [panZoomRef]);
+	return transform;
+}
+
+//#endregion
+export { usePanZoomTransform };
+//# sourceMappingURL=usePanZoomTransform.js.map

package/dist/hooks/usePanZoomTransform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanZoomTransform.js","names":[],"sources":["../../src/hooks/usePanZoomTransform.ts"],"sourcesContent":["import { type PanZoomTransform } from \"@editframe/elements\";\nimport React, { useEffect, useState } from \"react\";\n\n/**\n * Hook to get PanZoom transform values from a PanZoom element ref.\n * Listens to transform-changed events to keep transform values in sync.\n *\n * @param panZoomRef - Ref to the PanZoom element\n * @returns Current transform values (scale, x, y)\n *\n * @example\n * const panZoomRef = useRef<EFPanZoom | null>(null);\n * const transform = usePanZoomTransform(panZoomRef);\n * // transform.scale, transform.x, transform.y\n */\nexport function usePanZoomTransform(\n  panZoomRef: React.RefObject<(EventTarget & { scale: number; x: number; y: number }) | null>,\n): PanZoomTransform {\n  const [transform, setTransform] = useState<PanZoomTransform>({\n    scale: 1,\n    x: 0,\n    y: 0,\n  });\n\n  useEffect(() => {\n    const panZoom = panZoomRef.current;\n    if (!panZoom) {\n      return;\n    }\n\n    // Initialize with current values\n    setTransform({\n      scale: panZoom.scale ?? 1,\n      x: panZoom.x ?? 0,\n      y: panZoom.y ?? 0,\n    });\n\n    // Listen for transform changes\n    const handleTransformChanged = (e: Event) => {\n      const customEvent = e as CustomEvent<PanZoomTransform>;\n      if (customEvent.detail) {\n        setTransform(customEvent.detail);\n      } else {\n        // Fallback to reading from element if detail is not available\n        setTransform({\n          scale: panZoom.scale ?? 1,\n          x: panZoom.x ?? 0,\n          y: panZoom.y ?? 0,\n        });\n      }\n    };\n\n    panZoom.addEventListener(\"transform-changed\", handleTransformChanged);\n\n    return () => {\n      panZoom.removeEventListener(\"transform-changed\", handleTransformChanged);\n    };\n  }, [panZoomRef]);\n\n  return transform;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgB,oBACd,YACkB;CAClB,MAAM,CAAC,WAAW,gBAAgB,SAA2B;EAC3D,OAAO;EACP,GAAG;EACH,GAAG;EACJ,CAAC;AAEF,iBAAgB;EACd,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QACH;AAIF,eAAa;GACX,OAAO,QAAQ,SAAS;GACxB,GAAG,QAAQ,KAAK;GAChB,GAAG,QAAQ,KAAK;GACjB,CAAC;EAGF,MAAM,0BAA0B,MAAa;GAC3C,MAAM,cAAc;AACpB,OAAI,YAAY,OACd,cAAa,YAAY,OAAO;OAGhC,cAAa;IACX,OAAO,QAAQ,SAAS;IACxB,GAAG,QAAQ,KAAK;IAChB,GAAG,QAAQ,KAAK;IACjB,CAAC;;AAIN,UAAQ,iBAAiB,qBAAqB,uBAAuB;AAErE,eAAa;AACX,WAAQ,oBAAoB,qBAAqB,uBAAuB;;IAEzE,CAAC,WAAW,CAAC;AAEhB,QAAO"}

package/dist/index.d.ts

@@ -6,21 +6,29 @@ 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 { TimelineRoot } from "./components/TimelineRoot.js";
 import { Video } from "./elements/Video.js";
 import { Waveform } from "./elements/Waveform.js";
+import { PanZoom } from "./elements/PanZoom.js";
+import { OverlayLayer } from "./gui/OverlayLayer.js";
+import { OverlayItem, OverlayItemProps } from "./gui/OverlayItem.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 { TransformHandles } from "./gui/EFTransformHandles.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 { Scrubber, ScrubberProps } from "./gui/Scrubber.js";
+import { TimelineRuler } from "./gui/TimelineRuler.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, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };
+import { usePanZoomTransform } from "./hooks/usePanZoomTransform.js";
+import { elementNeedsFitScale, needsFitScale } from "@editframe/elements";
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, OverlayItem, type OverlayItemProps, OverlayLayer, PanZoom, Pause, Play, Preview, ResizableBox, Scrubber, type ScrubberProps, Surface, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, TimelineRoot, TimelineRuler, ToggleLoop, TogglePlay, TransformHandles, Video, Waveform, Workbench, elementNeedsFitScale, needsFitScale, usePanZoomTransform, useTimingInfo };

package/dist/index.js

@@ -6,12 +6,17 @@ 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 { TimelineRoot } from "./components/TimelineRoot.js";
 import { Video } from "./elements/Video.js";
 import { Waveform } from "./elements/Waveform.js";
+import { PanZoom } from "./elements/PanZoom.js";
+import { OverlayLayer } from "./gui/OverlayLayer.js";
+import { OverlayItem } from "./gui/OverlayItem.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 { TransformHandles } from "./gui/EFTransformHandles.js";
 import { Filmstrip } from "./gui/Filmstrip.js";
 import { FitScale } from "./gui/FitScale.js";
 import { FocusOverlay } from "./gui/FocusOverlay.js";
@@ -19,9 +24,12 @@ 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 { TimelineRuler } from "./gui/TimelineRuler.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";
+import { usePanZoomTransform } from "./hooks/usePanZoomTransform.js";
+import { elementNeedsFitScale, needsFitScale } from "@editframe/elements";
 
-export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, Pause, Play, Preview, ResizableBox, Scrubber, Surface, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, OverlayItem, OverlayLayer, PanZoom, Pause, Play, Preview, ResizableBox, Scrubber, Surface, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, TimelineRoot, TimelineRuler, ToggleLoop, TogglePlay, TransformHandles, Video, Waveform, Workbench, elementNeedsFitScale, needsFitScale, usePanZoomTransform, useTimingInfo };