@editframe/react 0.21.0-beta.0 → 0.23.6-beta.0

package/dist/components/TimeDisplay.js

@@ -1,9 +1,11 @@
 import { EFTimeDisplay } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element.js";
 const TimeDisplay = createComponent({
-	tagName: "ef-time-display",
-	elementClass: EFTimeDisplay,
-	react: React
+  tagName: "ef-time-display",
+  elementClass: EFTimeDisplay,
+  react: React
 });
-export { TimeDisplay };
+export {
+  TimeDisplay
+};

package/dist/elements/Audio.d.ts

@@ -1,2 +1,2 @@
 import { EFAudio as EFAudioElement } from '../../../elements/src/index.ts';
-export declare const Audio: import('@lit/react').ReactWebComponent<EFAudioElement, {}>;
+export declare const Audio: import('../hooks/create-element').ReactWebComponent<EFAudioElement, {}>;

package/dist/elements/Audio.js

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

package/dist/elements/Captions.d.ts

@@ -1,6 +1,6 @@
 import { EFCaptionsActiveWord as EFCaptionsActiveWordElement, EFCaptionsAfterActiveWord as EFCaptionsAfterActiveWordElement, EFCaptionsBeforeActiveWord as EFCaptionsBeforeActiveWordElement, EFCaptions as EFCaptionsElement, EFCaptionsSegment as EFCaptionsSegmentElement } from '../../../elements/src/index.ts';
-export declare const Captions: import('@lit/react').ReactWebComponent<EFCaptionsElement, {}>;
-export declare const CaptionsActiveWord: import('@lit/react').ReactWebComponent<EFCaptionsActiveWordElement, {}>;
-export declare const CaptionsSegment: import('@lit/react').ReactWebComponent<EFCaptionsSegmentElement, {}>;
-export declare const CaptionsBeforeActiveWord: import('@lit/react').ReactWebComponent<EFCaptionsBeforeActiveWordElement, {}>;
-export declare const CaptionsAfterActiveWord: import('@lit/react').ReactWebComponent<EFCaptionsAfterActiveWordElement, {}>;
+export declare const Captions: import('../hooks/create-element').ReactWebComponent<EFCaptionsElement, {}>;
+export declare const CaptionsActiveWord: import('../hooks/create-element').ReactWebComponent<EFCaptionsActiveWordElement, {}>;
+export declare const CaptionsSegment: import('../hooks/create-element').ReactWebComponent<EFCaptionsSegmentElement, {}>;
+export declare const CaptionsBeforeActiveWord: import('../hooks/create-element').ReactWebComponent<EFCaptionsBeforeActiveWordElement, {}>;
+export declare const CaptionsAfterActiveWord: import('../hooks/create-element').ReactWebComponent<EFCaptionsAfterActiveWordElement, {}>;

package/dist/elements/Captions.js

@@ -1,29 +1,35 @@
-import { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment } from "@editframe/elements";
-import { createComponent } from "@lit/react";
+import { EFCaptions, EFCaptionsActiveWord, EFCaptionsSegment, EFCaptionsBeforeActiveWord, EFCaptionsAfterActiveWord } from "@editframe/elements";
 import React from "react";
+import { createComponent } from "../hooks/create-element.js";
 const Captions = createComponent({
-	tagName: "ef-captions",
-	elementClass: EFCaptions,
-	react: React
+  tagName: "ef-captions",
+  elementClass: EFCaptions,
+  react: React
 });
 const CaptionsActiveWord = createComponent({
-	tagName: "ef-captions-active-word",
-	elementClass: EFCaptionsActiveWord,
-	react: React
+  tagName: "ef-captions-active-word",
+  elementClass: EFCaptionsActiveWord,
+  react: React
 });
 const CaptionsSegment = createComponent({
-	tagName: "ef-captions-segment",
-	elementClass: EFCaptionsSegment,
-	react: React
+  tagName: "ef-captions-segment",
+  elementClass: EFCaptionsSegment,
+  react: React
 });
 const CaptionsBeforeActiveWord = createComponent({
-	tagName: "ef-captions-before-active-word",
-	elementClass: EFCaptionsBeforeActiveWord,
-	react: React
+  tagName: "ef-captions-before-active-word",
+  elementClass: EFCaptionsBeforeActiveWord,
+  react: React
 });
 const CaptionsAfterActiveWord = createComponent({
-	tagName: "ef-captions-after-active-word",
-	elementClass: EFCaptionsAfterActiveWord,
-	react: React
+  tagName: "ef-captions-after-active-word",
+  elementClass: EFCaptionsAfterActiveWord,
+  react: React
 });
-export { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment };
+export {
+  Captions,
+  CaptionsActiveWord,
+  CaptionsAfterActiveWord,
+  CaptionsBeforeActiveWord,
+  CaptionsSegment
+};

package/dist/elements/Image.d.ts

@@ -1,2 +1,2 @@
 import { EFImage as EFImageElement } from '../../../elements/src/index.ts';
-export declare const Image: import('@lit/react').ReactWebComponent<EFImageElement, {}>;
+export declare const Image: import('../hooks/create-element').ReactWebComponent<EFImageElement, {}>;

package/dist/elements/Image.js

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

package/dist/elements/Surface.d.ts

@@ -1,2 +1,2 @@
 import { EFSurface as EFSurfaceElement } from '../../../elements/src/index.ts';
-export declare const Surface: import('@lit/react').ReactWebComponent<EFSurfaceElement, {}>;
+export declare const Surface: import('../hooks/create-element').ReactWebComponent<EFSurfaceElement, {}>;

package/dist/elements/Surface.js

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

package/dist/elements/ThumbnailStrip.d.ts

@@ -1,2 +1,2 @@
 import { EFThumbnailStrip as EFThumbnailStripElement } from '../../../elements/src/index.ts';
-export declare const ThumbnailStrip: import('@lit/react').ReactWebComponent<EFThumbnailStripElement, {}>;
+export declare const ThumbnailStrip: import('../hooks/create-element').ReactWebComponent<EFThumbnailStripElement, {}>;

package/dist/elements/ThumbnailStrip.js

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

package/dist/elements/Timegroup.d.ts

@@ -1,2 +1,2 @@
 import { EFTimegroup as EFTimegroupElement } from '../../../elements/src/index.ts';
-export declare const Timegroup: import('@lit/react').ReactWebComponent<EFTimegroupElement, {}>;
+export declare const Timegroup: import('../hooks/create-element').ReactWebComponent<EFTimegroupElement, {}>;

package/dist/elements/Timegroup.js

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

package/dist/elements/Video.d.ts

@@ -1,2 +1,2 @@
 import { EFVideo as EFVideoElement } from '../../../elements/src/index.ts';
-export declare const Video: import('@lit/react').ReactWebComponent<EFVideoElement, {}>;
+export declare const Video: import('../hooks/create-element').ReactWebComponent<EFVideoElement, {}>;

package/dist/elements/Video.js

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

package/dist/elements/Waveform.d.ts

@@ -1,2 +1,2 @@
 import { EFWaveform as EFWaveformElement } from '../../../elements/src/index.ts';
-export declare const Waveform: import('@lit/react').ReactWebComponent<EFWaveformElement, {}>;
+export declare const Waveform: import('../hooks/create-element').ReactWebComponent<EFWaveformElement, {}>;

package/dist/elements/Waveform.js

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

package/dist/gui/Configuration.d.ts

@@ -1,2 +1,2 @@
 import { EFConfiguration } from '../../../elements/src/index.ts';
-export declare const Configuration: import('@lit/react').ReactWebComponent<EFConfiguration, {}>;
+export declare const Configuration: import('../hooks/create-element').ReactWebComponent<EFConfiguration, {}>;

package/dist/gui/Configuration.js

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

package/dist/gui/Controls.d.ts

@@ -1,2 +1,2 @@
 import { EFControls as EFControlsElement } from '../../../elements/src/index.ts';
-export declare const Controls: import('@lit/react').ReactWebComponent<EFControlsElement, {}>;
+export declare const Controls: import('../hooks/create-element').ReactWebComponent<EFControlsElement, {}>;

package/dist/gui/Controls.js

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

package/dist/gui/EFDial.d.ts

@@ -0,0 +1,4 @@
+import { EFDial as EFDialElement } from '../../../elements/src/index.ts';
+export declare const Dial: import('../hooks/create-element').ReactWebComponent<EFDialElement, {
+    onChange: string;
+}>;

package/dist/gui/EFDial.js

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

package/dist/gui/EFResizableBox.d.ts

@@ -0,0 +1,4 @@
+import { EFResizableBox as EFResizableBoxElement } from '../../../elements/src/index.ts';
+export declare const ResizableBox: import('../hooks/create-element').ReactWebComponent<EFResizableBoxElement, {
+    onBoundsChange: string;
+}>;

package/dist/gui/EFResizableBox.js

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

package/dist/gui/Filmstrip.d.ts

@@ -1,2 +1,2 @@
 import { EFFilmstrip as EFFilmstripElement } from '../../../elements/src/index.ts';
-export declare const Filmstrip: import('@lit/react').ReactWebComponent<EFFilmstripElement, {}>;
+export declare const Filmstrip: import('../hooks/create-element').ReactWebComponent<EFFilmstripElement, {}>;

package/dist/gui/Filmstrip.js

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

package/dist/gui/FitScale.d.ts

@@ -1,2 +1,2 @@
 import { EFFitScale as EFFitScaleElement } from '../../../elements/src/index.ts';
-export declare const FitScale: import('@lit/react').ReactWebComponent<EFFitScaleElement, {}>;
+export declare const FitScale: import('../hooks/create-element').ReactWebComponent<EFFitScaleElement, {}>;

package/dist/gui/FitScale.js

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

package/dist/gui/FocusOverlay.d.ts

@@ -1,2 +1,2 @@
 import { EFFocusOverlay as EFFocusOverlayElement } from '../../../elements/src/index.ts';
-export declare const FocusOverlay: import('@lit/react').ReactWebComponent<EFFocusOverlayElement, {}>;
+export declare const FocusOverlay: import('../hooks/create-element').ReactWebComponent<EFFocusOverlayElement, {}>;

package/dist/gui/FocusOverlay.js

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

package/dist/gui/Pause.d.ts

@@ -0,0 +1,2 @@
+import { EFPause as EFPauseElement } from '../../../elements/src/index.ts';
+export declare const Pause: import('../hooks/create-element').ReactWebComponent<EFPauseElement, {}>;

package/dist/gui/Pause.js

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

package/dist/gui/Play.d.ts

@@ -0,0 +1,2 @@
+import { EFPlay as EFPlayElement } from '../../../elements/src/index.ts';
+export declare const Play: import('../hooks/create-element').ReactWebComponent<EFPlayElement, {}>;

package/dist/gui/Play.js

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

package/dist/gui/Preview.d.ts

@@ -1,2 +1,2 @@
 import { EFPreview as EFPreviewElement } from '../../../elements/src/index.ts';
-export declare const Preview: import('@lit/react').ReactWebComponent<EFPreviewElement, {}>;
+export declare const Preview: import('../hooks/create-element').ReactWebComponent<EFPreviewElement, {}>;

package/dist/gui/Preview.js

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

package/dist/gui/Scrubber.d.ts

@@ -1,2 +1,2 @@
 import { EFScrubber as EFScrubberElement } from '../../../elements/src/index.ts';
-export declare const Scrubber: import('@lit/react').ReactWebComponent<EFScrubberElement, {}>;
+export declare const Scrubber: import('../hooks/create-element').ReactWebComponent<EFScrubberElement, {}>;

package/dist/gui/Scrubber.js

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

package/dist/gui/ToggleLoop.d.ts

@@ -1,2 +1,2 @@
 import { EFToggleLoop as EFToggleLoopElement } from '../../../elements/src/index.ts';
-export declare const ToggleLoop: import('@lit/react').ReactWebComponent<EFToggleLoopElement, {}>;
+export declare const ToggleLoop: import('../hooks/create-element').ReactWebComponent<EFToggleLoopElement, {}>;

package/dist/gui/ToggleLoop.js

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

package/dist/gui/TogglePlay.d.ts

@@ -1,2 +1,2 @@
 import { EFTogglePlay as EFTogglePlayElement } from '../../../elements/src/index.ts';
-export declare const TogglePlay: import('@lit/react').ReactWebComponent<EFTogglePlayElement, {}>;
+export declare const TogglePlay: import('../hooks/create-element').ReactWebComponent<EFTogglePlayElement, {}>;

package/dist/gui/TogglePlay.js

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

package/dist/gui/Workbench.d.ts

@@ -1,2 +1,2 @@
 import { EFWorkbench as EFWorkbenchElement } from '../../../elements/src/index.ts';
-export declare const Workbench: import('@lit/react').ReactWebComponent<EFWorkbenchElement, {}>;
+export declare const Workbench: import('../hooks/create-element').ReactWebComponent<EFWorkbenchElement, {}>;

package/dist/gui/Workbench.js

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

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export declare function setIsomorphicEffect(effect: typeof React.useLayoutEffect | typeof React.useEffect): void;
+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;
+}
+export declare function createComponent<I extends HTMLElement, E extends EventNames = {}>({ react: React, tagName, elementClass, events, displayName, }: Options<I, E>): ReactWebComponent<I, E>;
+export {};