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

package/dist/gui/FitScale.d.ts

@@ -1,2 +1,8 @@
-import { EFFitScale as EFFitScaleElement } from '../../../elements/src/index.ts';
-export declare const FitScale: import('../hooks/create-element').ReactWebComponent<EFFitScaleElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFFitScale } from "@editframe/elements";
+
+//#region src/gui/FitScale.d.ts
+declare const FitScale: ReactWebComponent<EFFitScale, {}>;
+//#endregion
+export { FitScale };
+//# sourceMappingURL=FitScale.d.ts.map

package/dist/gui/FitScale.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFFitScale } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/FitScale.ts
 const FitScale = createComponent({
-  tagName: "ef-fit-scale",
-  elementClass: EFFitScale,
-  react: React
+	tagName: "ef-fit-scale",
+	elementClass: EFFitScale,
+	react: React
 });
-export {
-  FitScale
-};
+
+//#endregion
+export { FitScale };
+//# sourceMappingURL=FitScale.js.map

package/dist/gui/FitScale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FitScale.js","names":["EFFitScaleElement"],"sources":["../../src/gui/FitScale.ts"],"sourcesContent":["import { EFFitScale as EFFitScaleElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const FitScale = createComponent({\n  tagName: \"ef-fit-scale\",\n  elementClass: EFFitScaleElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,WAAW,gBAAgB;CACtC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/FocusOverlay.d.ts

@@ -1,2 +1,8 @@
-import { EFFocusOverlay as EFFocusOverlayElement } from '../../../elements/src/index.ts';
-export declare const FocusOverlay: import('../hooks/create-element').ReactWebComponent<EFFocusOverlayElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFFocusOverlay } from "@editframe/elements";
+
+//#region src/gui/FocusOverlay.d.ts
+declare const FocusOverlay: ReactWebComponent<EFFocusOverlay, {}>;
+//#endregion
+export { FocusOverlay };
+//# sourceMappingURL=FocusOverlay.d.ts.map

package/dist/gui/FocusOverlay.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFFocusOverlay } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/FocusOverlay.ts
 const FocusOverlay = createComponent({
-  tagName: "ef-focus-overlay",
-  elementClass: EFFocusOverlay,
-  react: React
+	tagName: "ef-focus-overlay",
+	elementClass: EFFocusOverlay,
+	react: React
 });
-export {
-  FocusOverlay
-};
+
+//#endregion
+export { FocusOverlay };
+//# sourceMappingURL=FocusOverlay.js.map

package/dist/gui/FocusOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusOverlay.js","names":["EFFocusOverlayElement"],"sources":["../../src/gui/FocusOverlay.ts"],"sourcesContent":["import { EFFocusOverlay as EFFocusOverlayElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const FocusOverlay = createComponent({\n  tagName: \"ef-focus-overlay\",\n  elementClass: EFFocusOverlayElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,eAAe,gBAAgB;CAC1C,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Pause.d.ts

@@ -1,2 +1,8 @@
-import { EFPause as EFPauseElement } from '../../../elements/src/index.ts';
-export declare const Pause: import('../hooks/create-element').ReactWebComponent<EFPauseElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFPause } from "@editframe/elements";
+
+//#region src/gui/Pause.d.ts
+declare const Pause: ReactWebComponent<EFPause, {}>;
+//#endregion
+export { Pause };
+//# sourceMappingURL=Pause.d.ts.map

package/dist/gui/Pause.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFPause } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/Pause.ts
 const Pause = createComponent({
-  tagName: "ef-pause",
-  elementClass: EFPause,
-  react: React
+	tagName: "ef-pause",
+	elementClass: EFPause,
+	react: React
 });
-export {
-  Pause
-};
+
+//#endregion
+export { Pause };
+//# sourceMappingURL=Pause.js.map

package/dist/gui/Pause.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pause.js","names":["EFPauseElement"],"sources":["../../src/gui/Pause.ts"],"sourcesContent":["import { EFPause as EFPauseElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Pause = createComponent({\n  tagName: \"ef-pause\",\n  elementClass: EFPauseElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,QAAQ,gBAAgB;CACnC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Play.d.ts

@@ -1,2 +1,8 @@
-import { EFPlay as EFPlayElement } from '../../../elements/src/index.ts';
-export declare const Play: import('../hooks/create-element').ReactWebComponent<EFPlayElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFPlay } from "@editframe/elements";
+
+//#region src/gui/Play.d.ts
+declare const Play: ReactWebComponent<EFPlay, {}>;
+//#endregion
+export { Play };
+//# sourceMappingURL=Play.d.ts.map

package/dist/gui/Play.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFPlay } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/Play.ts
 const Play = createComponent({
-  tagName: "ef-play",
-  elementClass: EFPlay,
-  react: React
+	tagName: "ef-play",
+	elementClass: EFPlay,
+	react: React
 });
-export {
-  Play
-};
+
+//#endregion
+export { Play };
+//# sourceMappingURL=Play.js.map

package/dist/gui/Play.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Play.js","names":["EFPlayElement"],"sources":["../../src/gui/Play.ts"],"sourcesContent":["import { EFPlay as EFPlayElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Play = createComponent({\n  tagName: \"ef-play\",\n  elementClass: EFPlayElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,OAAO,gBAAgB;CAClC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Preview.d.ts

@@ -1,2 +1,8 @@
-import { EFPreview as EFPreviewElement } from '../../../elements/src/index.ts';
-export declare const Preview: import('../hooks/create-element').ReactWebComponent<EFPreviewElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFPreview } from "@editframe/elements";
+
+//#region src/gui/Preview.d.ts
+declare const Preview: ReactWebComponent<EFPreview, {}>;
+//#endregion
+export { Preview };
+//# sourceMappingURL=Preview.d.ts.map

package/dist/gui/Preview.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFPreview } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/Preview.ts
 const Preview = createComponent({
-  tagName: "ef-preview",
-  elementClass: EFPreview,
-  react: React
+	tagName: "ef-preview",
+	elementClass: EFPreview,
+	react: React
 });
-export {
-  Preview
-};
+
+//#endregion
+export { Preview };
+//# sourceMappingURL=Preview.js.map

package/dist/gui/Preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.js","names":["EFPreviewElement"],"sources":["../../src/gui/Preview.ts"],"sourcesContent":["import { EFPreview as EFPreviewElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Preview = createComponent({\n  tagName: \"ef-preview\",\n  elementClass: EFPreviewElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,UAAU,gBAAgB;CACrC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Scrubber.d.ts

@@ -1,2 +1,8 @@
-import { EFScrubber as EFScrubberElement } from '../../../elements/src/index.ts';
-export declare const Scrubber: import('../hooks/create-element').ReactWebComponent<EFScrubberElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFScrubber } from "@editframe/elements";
+
+//#region src/gui/Scrubber.d.ts
+declare const Scrubber: ReactWebComponent<EFScrubber, {}>;
+//#endregion
+export { Scrubber };
+//# sourceMappingURL=Scrubber.d.ts.map

package/dist/gui/Scrubber.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFScrubber } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/Scrubber.ts
 const Scrubber = createComponent({
-  tagName: "ef-scrubber",
-  elementClass: EFScrubber,
-  react: React
+	tagName: "ef-scrubber",
+	elementClass: EFScrubber,
+	react: React
 });
-export {
-  Scrubber
-};
+
+//#endregion
+export { Scrubber };
+//# sourceMappingURL=Scrubber.js.map

package/dist/gui/Scrubber.js.map

@@ -0,0 +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"}

package/dist/gui/ToggleLoop.d.ts

@@ -1,2 +1,8 @@
-import { EFToggleLoop as EFToggleLoopElement } from '../../../elements/src/index.ts';
-export declare const ToggleLoop: import('../hooks/create-element').ReactWebComponent<EFToggleLoopElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFToggleLoop } from "@editframe/elements";
+
+//#region src/gui/ToggleLoop.d.ts
+declare const ToggleLoop: ReactWebComponent<EFToggleLoop, {}>;
+//#endregion
+export { ToggleLoop };
+//# sourceMappingURL=ToggleLoop.d.ts.map

package/dist/gui/ToggleLoop.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFToggleLoop } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/ToggleLoop.ts
 const ToggleLoop = createComponent({
-  tagName: "ef-toggle-loop",
-  elementClass: EFToggleLoop,
-  react: React
+	tagName: "ef-toggle-loop",
+	elementClass: EFToggleLoop,
+	react: React
 });
-export {
-  ToggleLoop
-};
+
+//#endregion
+export { ToggleLoop };
+//# sourceMappingURL=ToggleLoop.js.map

package/dist/gui/ToggleLoop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleLoop.js","names":["EFToggleLoopElement"],"sources":["../../src/gui/ToggleLoop.ts"],"sourcesContent":["import { EFToggleLoop as EFToggleLoopElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const ToggleLoop = createComponent({\n  tagName: \"ef-toggle-loop\",\n  elementClass: EFToggleLoopElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,aAAa,gBAAgB;CACxC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/TogglePlay.d.ts

@@ -1,2 +1,8 @@
-import { EFTogglePlay as EFTogglePlayElement } from '../../../elements/src/index.ts';
-export declare const TogglePlay: import('../hooks/create-element').ReactWebComponent<EFTogglePlayElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFTogglePlay } from "@editframe/elements";
+
+//#region src/gui/TogglePlay.d.ts
+declare const TogglePlay: ReactWebComponent<EFTogglePlay, {}>;
+//#endregion
+export { TogglePlay };
+//# sourceMappingURL=TogglePlay.d.ts.map

package/dist/gui/TogglePlay.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFTogglePlay } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/TogglePlay.ts
 const TogglePlay = createComponent({
-  tagName: "ef-toggle-play",
-  elementClass: EFTogglePlay,
-  react: React
+	tagName: "ef-toggle-play",
+	elementClass: EFTogglePlay,
+	react: React
 });
-export {
-  TogglePlay
-};
+
+//#endregion
+export { TogglePlay };
+//# sourceMappingURL=TogglePlay.js.map

package/dist/gui/TogglePlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TogglePlay.js","names":["EFTogglePlayElement"],"sources":["../../src/gui/TogglePlay.ts"],"sourcesContent":["import { EFTogglePlay as EFTogglePlayElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const TogglePlay = createComponent({\n  tagName: \"ef-toggle-play\",\n  elementClass: EFTogglePlayElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,aAAa,gBAAgB;CACxC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Workbench.d.ts

@@ -1,2 +1,8 @@
-import { EFWorkbench as EFWorkbenchElement } from '../../../elements/src/index.ts';
-export declare const Workbench: import('../hooks/create-element').ReactWebComponent<EFWorkbenchElement, {}>;
+import { ReactWebComponent } from "../hooks/create-element.js";
+import { EFWorkbench } from "@editframe/elements";
+
+//#region src/gui/Workbench.d.ts
+declare const Workbench: ReactWebComponent<EFWorkbench, {}>;
+//#endregion
+export { Workbench };
+//# sourceMappingURL=Workbench.d.ts.map

package/dist/gui/Workbench.js

@@ -1,11 +1,14 @@
+import { createComponent } from "../hooks/create-element.js";
 import { EFWorkbench } from "@editframe/elements";
 import React from "react";
-import { createComponent } from "../hooks/create-element.js";
+
+//#region src/gui/Workbench.ts
 const Workbench = createComponent({
-  tagName: "ef-workbench",
-  elementClass: EFWorkbench,
-  react: React
+	tagName: "ef-workbench",
+	elementClass: EFWorkbench,
+	react: React
 });
-export {
-  Workbench
-};
+
+//#endregion
+export { Workbench };
+//# sourceMappingURL=Workbench.js.map

package/dist/gui/Workbench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workbench.js","names":["EFWorkbenchElement"],"sources":["../../src/gui/Workbench.ts"],"sourcesContent":["import { EFWorkbench as EFWorkbenchElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Workbench = createComponent({\n  tagName: \"ef-workbench\",\n  elementClass: EFWorkbenchElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,YAAY,gBAAgB;CACvC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/hooks/create-element.d.ts

@@ -1,21 +1,12 @@
-import { default as React } from 'react';
-export declare function setIsomorphicEffect(effect: typeof React.useLayoutEffect | typeof React.useEffect): void;
-type Constructor<T> = {
-    new (): T;
-};
+import React from "react";
+
+//#region src/hooks/create-element.d.ts
+
 type EventNames = Record<string, string>;
-type EventListeners<E extends EventNames> = {
-    [K in keyof E]?: (e: Event) => void;
-};
+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;
-}
-export declare function createComponent<I extends HTMLElement, E extends EventNames = {}>({ react: React, tagName, elementClass, events, displayName, }: Options<I, E>): ReactWebComponent<I, E>;
-export {};
+type ReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = React.ForwardRefExoticComponent<ComponentProps<I, E> & React.RefAttributes<I>>;
+//#endregion
+export { ReactWebComponent };
+//# sourceMappingURL=create-element.d.ts.map

package/dist/hooks/create-element.js

@@ -1,103 +1,81 @@
 import React from "react";
+
+//#region src/hooks/create-element.ts
 let isomorphicEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-const reservedReactProperties = /* @__PURE__ */ new Set([
-  "children",
-  "localName",
-  "ref",
-  "style",
-  "className"
+const reservedReactProperties = new Set([
+	"children",
+	"localName",
+	"ref",
+	"style",
+	"className"
 ]);
 const listenedEvents = /* @__PURE__ */ new WeakMap();
 function addOrUpdateEventListener(node, event, listener) {
-  let events = listenedEvents.get(node);
-  if (!events) {
-    events = /* @__PURE__ */ 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);
-  }
+	let events = listenedEvents.get(node);
+	if (!events) {
+		events = /* @__PURE__ */ 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(node, name, value, old, events) {
-  const event = events?.[name];
-  if (event) {
-    if (value !== old)
-      addOrUpdateEventListener(node, event, value);
-    return;
-  }
-  node[name] = value;
-  if ((value === void 0 || value === null) && name in HTMLElement.prototype) {
-    node.removeAttribute(name);
-  }
+	const event = events?.[name];
+	if (event) {
+		if (value !== old) addOrUpdateEventListener(node, event, value);
+		return;
+	}
+	node[name] = value;
+	if ((value === void 0 || value === null) && name in HTMLElement.prototype) node.removeAttribute(name);
 }
-function createComponent({
-  react: React2,
-  tagName,
-  elementClass,
-  events,
-  displayName
-}) {
-  const eventProps = new Set(Object.keys(events ?? {}));
-  const ReactComponent = React2.forwardRef(
-    (props, ref) => {
-      const elementRef = React2.useRef(null);
-      const prevPropsRef = React2.useRef(/* @__PURE__ */ new Map());
-      const reactProps = {
-        suppressHydrationWarning: true
-      };
-      const elementProps = {};
-      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 = /* @__PURE__ */ new Map();
-        for (const key in elementProps) {
-          setProperty(
-            elementRef.current,
-            key,
-            props[key],
-            prevPropsRef.current.get(key),
-            events
-          );
-          prevPropsRef.current.delete(key);
-          newProps.set(key, props[key]);
-        }
-        for (const [key, value] of prevPropsRef.current) {
-          setProperty(elementRef.current, key, void 0, value, events);
-        }
-        prevPropsRef.current = newProps;
-        elementRef.current.removeAttribute("defer-hydration");
-      }, [props]);
-      return React2.createElement(tagName, {
-        ...reactProps,
-        ref: (node) => {
-          elementRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        }
-      });
-    }
-  );
-  ReactComponent.displayName = displayName ?? elementClass.name;
-  return ReactComponent;
+function createComponent({ react: React$1, tagName, elementClass, events, displayName }) {
+	const eventProps = new Set(Object.keys(events ?? {}));
+	const ReactComponent = React$1.forwardRef((props, ref) => {
+		const elementRef = React$1.useRef(null);
+		const prevPropsRef = React$1.useRef(/* @__PURE__ */ new Map());
+		const reactProps = { suppressHydrationWarning: true };
+		const elementProps = {};
+		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 = /* @__PURE__ */ new Map();
+			for (const key in elementProps) {
+				setProperty(elementRef.current, key, props[key], prevPropsRef.current.get(key), events);
+				prevPropsRef.current.delete(key);
+				newProps.set(key, props[key]);
+			}
+			for (const [key, value] of prevPropsRef.current) setProperty(elementRef.current, key, void 0, value, events);
+			prevPropsRef.current = newProps;
+			elementRef.current.removeAttribute("defer-hydration");
+		}, [props]);
+		return React$1.createElement(tagName, {
+			...reactProps,
+			ref: (node) => {
+				elementRef.current = node;
+				if (typeof ref === "function") ref(node);
+				else if (ref) ref.current = node;
+			}
+		});
+	});
+	ReactComponent.displayName = displayName ?? elementClass.name;
+	return ReactComponent;
 }
-export {
-  createComponent
-};
+
+//#endregion
+export { createComponent };
+//# sourceMappingURL=create-element.js.map

package/dist/hooks/create-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-element.js","names":["React","reactProps: Record<string, unknown>","elementProps: Record<string, unknown>"],"sources":["../../src/hooks/create-element.ts"],"sourcesContent":["import React from \"react\";\n\nlet isomorphicEffect =\n  typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\nexport function setIsomorphicEffect(\n  effect: typeof React.useLayoutEffect | typeof React.useEffect,\n) {\n  isomorphicEffect = effect;\n}\n\nconst reservedReactProperties = new Set([\n  \"children\",\n  \"localName\",\n  \"ref\",\n  \"style\",\n  \"className\",\n]);\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\ntype Constructor<T> = { new (): T };\ntype EventNames = Record<string, string>;\n\ntype EventListeners<E extends EventNames> = {\n  [K in keyof E]?: (e: Event) => void;\n};\n\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\nexport type ReactWebComponent<\n  I extends HTMLElement,\n  E extends EventNames = {},\n> = React.ForwardRefExoticComponent<\n  ComponentProps<I, E> & React.RefAttributes<I>\n>;\n\nexport interface Options<I extends HTMLElement, E extends EventNames = {}> {\n  react: typeof React;\n  tagName: string;\n  elementClass: Constructor<I>;\n  events?: E;\n  displayName?: string;\n}\n\nfunction addOrUpdateEventListener(\n  node: Element,\n  event: string,\n  listener?: (e?: Event) => void,\n) {\n  let events = listenedEvents.get(node);\n  if (!events) {\n    events = new Map();\n    listenedEvents.set(node, events);\n  }\n  let handler = events.get(event);\n\n  if (listener) {\n    if (!handler) {\n      handler = { handleEvent: listener };\n      events.set(event, handler);\n      node.addEventListener(event, handler);\n    } else {\n      handler.handleEvent = listener;\n    }\n  } else if (handler) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n}\n\nfunction setProperty<E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: EventNames,\n) {\n  const event = events?.[name];\n  if (event) {\n    if (value !== old)\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    return;\n  }\n  node[name as keyof E] = value as E[keyof E];\n  if (\n    (value === undefined || value === null) &&\n    name in HTMLElement.prototype\n  ) {\n    node.removeAttribute(name);\n  }\n}\n\nexport function createComponent<\n  I extends HTMLElement,\n  E extends EventNames = {},\n>({\n  react: React,\n  tagName,\n  elementClass,\n  events,\n  displayName,\n}: Options<I, E>): ReactWebComponent<I, E> {\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  const ReactComponent = React.forwardRef<I, ComponentProps<I, E>>(\n    (props, ref) => {\n      const elementRef = React.useRef<I | null>(null);\n      const prevPropsRef = React.useRef(new Map<string, unknown>());\n\n      const reactProps: Record<string, unknown> = {\n        suppressHydrationWarning: true,\n      };\n      const elementProps: Record<string, unknown> = {};\n\n      for (const [k, v] of Object.entries(props)) {\n        if (reservedReactProperties.has(k)) {\n          reactProps[k === \"className\" ? \"class\" : k] = v;\n          continue;\n        }\n        if (eventProps.has(k) || k in elementClass.prototype)\n          elementProps[k] = v;\n        reactProps[k] = v;\n      }\n\n      isomorphicEffect(() => {\n        if (!elementRef.current) return;\n        const newProps = new Map<string, unknown>();\n        for (const key in elementProps) {\n          setProperty(\n            elementRef.current,\n            key,\n            props[key as keyof typeof props],\n            prevPropsRef.current.get(key),\n            events,\n          );\n          prevPropsRef.current.delete(key);\n          newProps.set(key, props[key as keyof typeof props]);\n        }\n        for (const [key, value] of prevPropsRef.current) {\n          setProperty(elementRef.current, key, undefined, value, events);\n        }\n        prevPropsRef.current = newProps;\n\n        // Remove defer-hydration if present\n        elementRef.current.removeAttribute(\"defer-hydration\");\n      }, [props]);\n\n      return React.createElement(tagName, {\n        ...reactProps,\n        ref: (node: I) => {\n          elementRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        },\n      });\n    },\n  );\n\n  ReactComponent.displayName = displayName ?? elementClass.name;\n  return ReactComponent as ReactWebComponent<I, E>;\n}\n"],"mappings":";;;AAEA,IAAI,mBACF,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAQhE,MAAM,0BAA0B,IAAI,IAAI;CACtC;CACA;CACA;CACA;CACA;CACD,CAAC;AACF,MAAM,iCAAiB,IAAI,SAAoD;AAgC/E,SAAS,yBACP,MACA,OACA,UACA;CACA,IAAI,SAAS,eAAe,IAAI,KAAK;AACrC,KAAI,CAAC,QAAQ;AACX,2BAAS,IAAI,KAAK;AAClB,iBAAe,IAAI,MAAM,OAAO;;CAElC,IAAI,UAAU,OAAO,IAAI,MAAM;AAE/B,KAAI,SACF,KAAI,CAAC,SAAS;AACZ,YAAU,EAAE,aAAa,UAAU;AACnC,SAAO,IAAI,OAAO,QAAQ;AAC1B,OAAK,iBAAiB,OAAO,QAAQ;OAErC,SAAQ,cAAc;UAEf,SAAS;AAClB,SAAO,OAAO,MAAM;AACpB,OAAK,oBAAoB,OAAO,QAAQ;;;AAI5C,SAAS,YACP,MACA,MACA,OACA,KACA,QACA;CACA,MAAM,QAAQ,SAAS;AACvB,KAAI,OAAO;AACT,MAAI,UAAU,IACZ,0BAAyB,MAAM,OAAO,MAA6B;AACrE;;AAEF,MAAK,QAAmB;AACxB,MACG,UAAU,UAAa,UAAU,SAClC,QAAQ,YAAY,UAEpB,MAAK,gBAAgB,KAAK;;AAI9B,SAAgB,gBAGd,EACA,OAAOA,SACP,SACA,cACA,QACA,eACyC;CACzC,MAAM,aAAa,IAAI,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC,CAAC;CAErD,MAAM,iBAAiBA,QAAM,YAC1B,OAAO,QAAQ;EACd,MAAM,aAAaA,QAAM,OAAiB,KAAK;EAC/C,MAAM,eAAeA,QAAM,uBAAO,IAAI,KAAsB,CAAC;EAE7D,MAAMC,aAAsC,EAC1C,0BAA0B,MAC3B;EACD,MAAMC,eAAwC,EAAE;AAEhD,OAAK,MAAM,CAAC,GAAG,MAAM,OAAO,QAAQ,MAAM,EAAE;AAC1C,OAAI,wBAAwB,IAAI,EAAE,EAAE;AAClC,eAAW,MAAM,cAAc,UAAU,KAAK;AAC9C;;AAEF,OAAI,WAAW,IAAI,EAAE,IAAI,KAAK,aAAa,UACzC,cAAa,KAAK;AACpB,cAAW,KAAK;;AAGlB,yBAAuB;AACrB,OAAI,CAAC,WAAW,QAAS;GACzB,MAAM,2BAAW,IAAI,KAAsB;AAC3C,QAAK,MAAM,OAAO,cAAc;AAC9B,gBACE,WAAW,SACX,KACA,MAAM,MACN,aAAa,QAAQ,IAAI,IAAI,EAC7B,OACD;AACD,iBAAa,QAAQ,OAAO,IAAI;AAChC,aAAS,IAAI,KAAK,MAAM,KAA2B;;AAErD,QAAK,MAAM,CAAC,KAAK,UAAU,aAAa,QACtC,aAAY,WAAW,SAAS,KAAK,QAAW,OAAO,OAAO;AAEhE,gBAAa,UAAU;AAGvB,cAAW,QAAQ,gBAAgB,kBAAkB;KACpD,CAAC,MAAM,CAAC;AAEX,SAAOF,QAAM,cAAc,SAAS;GAClC,GAAG;GACH,MAAM,SAAY;AAChB,eAAW,UAAU;AACrB,QAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;aAC/B,IAAK,KAAI,UAAU;;GAE/B,CAAC;GAEL;AAED,gBAAe,cAAc,eAAe,aAAa;AACzD,QAAO"}

package/dist/hooks/useTimingInfo.d.ts

@@ -1,7 +1,13 @@
-import { EFTimegroup } from '../../../elements/src/index.ts';
-export declare const useTimingInfo: (timegroupRef?: React.RefObject<EFTimegroup>) => {
-    ref: import('react').RefObject<EFTimegroup>;
-    ownCurrentTimeMs: number;
-    durationMs: number;
-    percentComplete: number;
+import { EFTimegroup } from "@editframe/elements";
+import * as react0 from "react";
+
+//#region src/hooks/useTimingInfo.d.ts
+declare const useTimingInfo: (timegroupRef?: React.RefObject<EFTimegroup>) => {
+  ref: react0.RefObject<EFTimegroup>;
+  ownCurrentTimeMs: number;
+  durationMs: number;
+  percentComplete: number;
 };
+//#endregion
+export { useTimingInfo };
+//# sourceMappingURL=useTimingInfo.d.ts.map