@editframe/react 0.47.2 → 0.48.1

package/dist/components/TimeDisplay.js

@@ -1,14 +1,13 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFTimeDisplay } from "@editframe/elements";
 import React from "react";
-
 //#region src/components/TimeDisplay.tsx
 const TimeDisplay = createComponent({
 	tagName: "ef-time-display",
 	elementClass: EFTimeDisplay,
 	react: React
 });
-
 //#endregion
 export { TimeDisplay };
+
 //# sourceMappingURL=TimeDisplay.js.map

package/dist/components/TimeDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeDisplay.js","names":[],"sources":["../../src/components/TimeDisplay.tsx"],"sourcesContent":["import { EFTimeDisplay } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const TimeDisplay = createComponent({\n  tagName: \"ef-time-display\",\n  elementClass: EFTimeDisplay,\n  react: React,\n});\n\nexport type TimeDisplayProps = {\n  className?: string;\n};\n"],"mappings":";;;;;AAIA,MAAa,cAAc,gBAAgB;CACzC,SAAS;CACT,cAAc;CACd,OAAO;CACR,CAAC"}
+{"version":3,"file":"TimeDisplay.js","names":[],"sources":["../../src/components/TimeDisplay.tsx"],"mappings":";;;;AAIA,MAAa,cAAc,gBAAgB;CACzC,SAAS;CACT,cAAc;CACd,OAAO;CACR,CAAC"}

package/dist/components/TimelineRoot.js

@@ -3,7 +3,6 @@ import { useEffect, useRef } from "react";
 import * as ReactDOM from "react-dom/client";
 import { flushSync } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/TimelineRoot.tsx
 /**
 * TimelineRoot - Factory wrapper for React-based timelines.
@@ -67,7 +66,7 @@ const TimelineRoot = ({ id, component: Component, className, style, children })
 		children: [children, /* @__PURE__ */ jsx(Component, { id })]
 	});
 };
-
 //#endregion
 export { TimelineRoot };
+
 //# sourceMappingURL=TimelineRoot.js.map

package/dist/components/TimelineRoot.js.map

@@ -1 +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 {\n  registerCloneFactory,\n  unregisterCloneFactory,\n  type EFTimegroup,\n} from \"@editframe/elements\";\n\ninterface TimelineRootProps {\n  /**\n   * Unique identifier used for playback control targeting (Preview, Scrubber, TogglePlay).\n   * Also passed as `id` prop to the component for clone rendering.\n   */\n  id: string;\n  /**\n   * React component that renders the timeline content (must include a Timegroup at root).\n   */\n  component: React.ComponentType<Record<string, unknown>>;\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 registering a clone factory\n * for the managed ef-timegroup element. When render clones are needed\n * (for exports, thumbnails, etc.), the factory mounts a fresh React component\n * tree — producing a fully functional second instance with all hooks, state,\n * and effects running.\n *\n * This is necessary because React DOM cannot be cloned via cloneNode() —\n * cloned elements are dead HTML without React's fiber tree behind them.\n * The factory pattern ensures each clone is a real React mount.\n *\n * @example\n * ```tsx\n * const MyTimeline = () => (\n *   <Timegroup mode=\"sequence\">\n *     <MyScenes />\n *   </Timegroup>\n * );\n *\n * <TimelineRoot id=\"root\" component={MyTimeline} />\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  const componentRef = useRef(Component);\n  componentRef.current = Component;\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      throw new Error(\n        \"[TimelineRoot] No ef-timegroup found in component. \" +\n          \"Ensure your component renders a Timegroup.\",\n      );\n    }\n\n    // Register a clone factory for this element.\n    // When createRenderClone is called, it will use this factory\n    // to mount a fresh React tree instead of cloning dead DOM.\n    registerCloneFactory(timegroup, (cloneContainer: HTMLElement) => {\n      const root = ReactDOM.createRoot(cloneContainer);\n      const Comp = componentRef.current;\n      flushSync(() => {\n        root.render(<Comp id={id} />);\n      });\n\n      const newTimegroup = cloneContainer.querySelector(\"ef-timegroup\") as EFTimegroup | null;\n      if (!newTimegroup) {\n        throw new Error(\n          \"[TimelineRoot] Clone factory did not produce an ef-timegroup. \" +\n            \"Ensure your component renders a Timegroup.\",\n        );\n      }\n\n      return {\n        timegroup: newTimegroup,\n        cleanup: () => {\n          root.unmount();\n        },\n      };\n    });\n\n    return () => {\n      unregisterCloneFactory(timegroup);\n    };\n  }, [id]);\n\n  return (\n    <div ref={containerRef} className={className} style={{ display: \"contents\", ...style }}>\n      {children}\n      <Component id={id} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAaA,gBAA6C,EACxD,IACA,WAAW,WACX,WACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,eAAe,OAAO,UAAU;AACtC,cAAa,UAAU;AAEvB,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAGhB,MAAM,YAAY,UAAU,cAAc,eAAe;AACzD,MAAI,CAAC,UACH,OAAM,IAAI,MACR,gGAED;AAMH,uBAAqB,YAAY,mBAAgC;GAC/D,MAAM,OAAO,SAAS,WAAW,eAAe;GAChD,MAAM,OAAO,aAAa;AAC1B,mBAAgB;AACd,SAAK,OAAO,oBAAC,QAAS,KAAM,CAAC;KAC7B;GAEF,MAAM,eAAe,eAAe,cAAc,eAAe;AACjE,OAAI,CAAC,aACH,OAAM,IAAI,MACR,2GAED;AAGH,UAAO;IACL,WAAW;IACX,eAAe;AACb,UAAK,SAAS;;IAEjB;IACD;AAEF,eAAa;AACX,0BAAuB,UAAU;;IAElC,CAAC,GAAG,CAAC;AAER,QACE,qBAAC;EAAI,KAAK;EAAyB;EAAW,OAAO;GAAE,SAAS;GAAY,GAAG;GAAO;aACnF,UACD,oBAAC,aAAc,KAAM;GACjB"}
+{"version":3,"file":"TimelineRoot.js","names":[],"sources":["../../src/components/TimelineRoot.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAa,gBAA6C,EACxD,IACA,WAAW,WACX,WACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,eAAe,OAAO,UAAU;AACtC,cAAa,UAAU;AAEvB,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAGhB,MAAM,YAAY,UAAU,cAAc,eAAe;AACzD,MAAI,CAAC,UACH,OAAM,IAAI,MACR,gGAED;AAMH,uBAAqB,YAAY,mBAAgC;GAC/D,MAAM,OAAO,SAAS,WAAW,eAAe;GAChD,MAAM,OAAO,aAAa;AAC1B,mBAAgB;AACd,SAAK,OAAO,oBAAC,MAAD,EAAU,IAAM,CAAA,CAAC;KAC7B;GAEF,MAAM,eAAe,eAAe,cAAc,eAAe;AACjE,OAAI,CAAC,aACH,OAAM,IAAI,MACR,2GAED;AAGH,UAAO;IACL,WAAW;IACX,eAAe;AACb,UAAK,SAAS;;IAEjB;IACD;AAEF,eAAa;AACX,0BAAuB,UAAU;;IAElC,CAAC,GAAG,CAAC;AAER,QACE,qBAAC,OAAD;EAAK,KAAK;EAAyB;EAAW,OAAO;GAAE,SAAS;GAAY,GAAG;GAAO;YAAtF,CACG,UACD,oBAAC,WAAD,EAAe,IAAM,CAAA,CACjB"}

package/dist/elements/Audio.js

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

package/dist/elements/Audio.js.map

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

package/dist/elements/Captions.js

@@ -1,7 +1,6 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment } from "@editframe/elements";
 import React from "react";
-
 //#region src/elements/Captions.ts
 const Captions = createComponent({
 	tagName: "ef-captions",
@@ -28,7 +27,7 @@ const CaptionsAfterActiveWord = createComponent({
 	elementClass: EFCaptionsAfterActiveWord,
 	react: React
 });
-
 //#endregion
 export { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment };
+
 //# sourceMappingURL=Captions.js.map

package/dist/elements/Captions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Captions.js","names":["EFCaptionsElement","EFCaptionsActiveWordElement","EFCaptionsSegmentElement","EFCaptionsBeforeActiveWordElement","EFCaptionsAfterActiveWordElement"],"sources":["../../src/elements/Captions.ts"],"sourcesContent":["import {\n  EFCaptionsActiveWord as EFCaptionsActiveWordElement,\n  EFCaptionsAfterActiveWord as EFCaptionsAfterActiveWordElement,\n  EFCaptionsBeforeActiveWord as EFCaptionsBeforeActiveWordElement,\n  EFCaptions as EFCaptionsElement,\n  EFCaptionsSegment as EFCaptionsSegmentElement,\n} from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Captions = createComponent({\n  tagName: \"ef-captions\",\n  elementClass: EFCaptionsElement,\n  react: React,\n});\n\nexport const CaptionsActiveWord = createComponent({\n  tagName: \"ef-captions-active-word\",\n  elementClass: EFCaptionsActiveWordElement,\n  react: React,\n});\n\nexport const CaptionsSegment = createComponent({\n  tagName: \"ef-captions-segment\",\n  elementClass: EFCaptionsSegmentElement,\n  react: React,\n});\n\nexport const CaptionsBeforeActiveWord = createComponent({\n  tagName: \"ef-captions-before-active-word\",\n  elementClass: EFCaptionsBeforeActiveWordElement,\n  react: React,\n});\n\nexport const CaptionsAfterActiveWord = createComponent({\n  tagName: \"ef-captions-after-active-word\",\n  elementClass: EFCaptionsAfterActiveWordElement,\n  react: React,\n});\n"],"mappings":";;;;;AAUA,MAAa,WAAW,gBAAgB;CACtC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC;AAEF,MAAa,qBAAqB,gBAAgB;CAChD,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC;AAEF,MAAa,kBAAkB,gBAAgB;CAC7C,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC;AAEF,MAAa,2BAA2B,gBAAgB;CACtD,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC;AAEF,MAAa,0BAA0B,gBAAgB;CACrD,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC"}
+{"version":3,"file":"Captions.js","names":["EFCaptionsElement","EFCaptionsActiveWordElement","EFCaptionsSegmentElement","EFCaptionsBeforeActiveWordElement","EFCaptionsAfterActiveWordElement"],"sources":["../../src/elements/Captions.ts"],"mappings":";;;;AAUA,MAAa,WAAW,gBAAgB;CACtC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC;AAEF,MAAa,qBAAqB,gBAAgB;CAChD,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC;AAEF,MAAa,kBAAkB,gBAAgB;CAC7C,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC;AAEF,MAAa,2BAA2B,gBAAgB;CACtD,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC;AAEF,MAAa,0BAA0B,gBAAgB;CACrD,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC"}

package/dist/elements/Image.js

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

package/dist/elements/Image.js.map

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

package/dist/elements/PanZoom.js

@@ -1,7 +1,6 @@
 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",
@@ -10,7 +9,7 @@ const PanZoom = createComponent({
 	displayName: "PanZoom",
 	events: { onTransformChanged: "transform-changed" }
 });
-
 //#endregion
 export { PanZoom };
+
 //# sourceMappingURL=PanZoom.js.map

package/dist/elements/PanZoom.js.map

@@ -1 +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"}
+{"version":3,"file":"PanZoom.js","names":["EFPanZoomElement"],"sources":["../../src/elements/PanZoom.ts"],"mappings":";;;;AAIA,MAAa,UAAU,gBAAgB;CACrC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,oBAAoB,qBACrB;CACF,CAAC"}

package/dist/elements/Surface.js

@@ -1,7 +1,6 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFSurface } from "@editframe/elements";
 import React from "react";
-
 //#region src/elements/Surface.ts
 const Surface = createComponent({
 	tagName: "ef-surface",
@@ -10,7 +9,7 @@ const Surface = createComponent({
 	displayName: "Surface",
 	events: {}
 });
-
 //#endregion
 export { Surface };
+
 //# sourceMappingURL=Surface.js.map

package/dist/elements/Surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.js","names":["EFSurfaceElement"],"sources":["../../src/elements/Surface.ts"],"sourcesContent":["import { EFSurface as EFSurfaceElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Surface = createComponent({\n  tagName: \"ef-surface\",\n  elementClass: EFSurfaceElement,\n  react: React,\n  displayName: \"Surface\",\n  events: {},\n});\n"],"mappings":";;;;;AAIA,MAAa,UAAU,gBAAgB;CACrC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EAAE;CACX,CAAC"}
+{"version":3,"file":"Surface.js","names":["EFSurfaceElement"],"sources":["../../src/elements/Surface.ts"],"mappings":";;;;AAIA,MAAa,UAAU,gBAAgB;CACrC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EAAE;CACX,CAAC"}

package/dist/elements/Text.js

@@ -1,7 +1,6 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFText, EFTextSegment } from "@editframe/elements";
 import React from "react";
-
 //#region src/elements/Text.ts
 const Text = createComponent({
 	tagName: "ef-text",
@@ -13,7 +12,7 @@ const TextSegment = createComponent({
 	elementClass: EFTextSegment,
 	react: React
 });
-
 //#endregion
 export { Text, TextSegment };
+
 //# sourceMappingURL=Text.js.map

package/dist/elements/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["EFTextElement","EFTextSegmentElement"],"sources":["../../src/elements/Text.ts"],"sourcesContent":["import {\n  EFText as EFTextElement,\n  EFTextSegment as EFTextSegmentElement,\n} from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Text = createComponent({\n  tagName: \"ef-text\",\n  elementClass: EFTextElement,\n  react: React,\n});\n\nexport const TextSegment = createComponent({\n  tagName: \"ef-text-segment\",\n  elementClass: EFTextSegmentElement,\n  react: React,\n});\n"],"mappings":";;;;;AAOA,MAAa,OAAO,gBAAgB;CAClC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC;AAEF,MAAa,cAAc,gBAAgB;CACzC,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC"}
+{"version":3,"file":"Text.js","names":["EFTextElement","EFTextSegmentElement"],"sources":["../../src/elements/Text.ts"],"mappings":";;;;AAOA,MAAa,OAAO,gBAAgB;CAClC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC;AAEF,MAAa,cAAc,gBAAgB;CACzC,SAAS;CACT,cAAcC;CACd,OAAO;CACR,CAAC"}

package/dist/elements/Timegroup.js

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

package/dist/elements/Timegroup.js.map

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

package/dist/elements/Video.js

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

package/dist/elements/Video.js.map

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

package/dist/elements/Waveform.js

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

package/dist/elements/Waveform.js.map

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

package/dist/gui/Configuration.js

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

package/dist/gui/Configuration.js.map

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

package/dist/gui/Controls.js

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

package/dist/gui/Controls.js.map

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

package/dist/gui/EFDial.js

@@ -1,7 +1,6 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFDial } from "@editframe/elements";
 import React from "react";
-
 //#region src/gui/EFDial.ts
 const Dial = createComponent({
 	tagName: "ef-dial",
@@ -9,7 +8,7 @@ const Dial = createComponent({
 	react: React,
 	events: { onChange: "change" }
 });
-
 //#endregion
 export { Dial };
+
 //# sourceMappingURL=EFDial.js.map

package/dist/gui/EFDial.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFDial.js","names":["EFDialElement"],"sources":["../../src/gui/EFDial.ts"],"sourcesContent":["import { EFDial as EFDialElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const Dial = createComponent({\n  tagName: \"ef-dial\",\n  elementClass: EFDialElement,\n  react: React,\n  events: {\n    onChange: \"change\",\n  },\n});\n"],"mappings":";;;;;AAIA,MAAa,OAAO,gBAAgB;CAClC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ,EACN,UAAU,UACX;CACF,CAAC"}
+{"version":3,"file":"EFDial.js","names":["EFDialElement"],"sources":["../../src/gui/EFDial.ts"],"mappings":";;;;AAIA,MAAa,OAAO,gBAAgB;CAClC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ,EACN,UAAU,UACX;CACF,CAAC"}

package/dist/gui/EFResizableBox.js

@@ -1,7 +1,6 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFResizableBox } from "@editframe/elements";
 import React from "react";
-
 //#region src/gui/EFResizableBox.ts
 const ResizableBox = createComponent({
 	tagName: "ef-resizable-box",
@@ -9,7 +8,7 @@ const ResizableBox = createComponent({
 	react: React,
 	events: { onBoundsChange: "bounds-change" }
 });
-
 //#endregion
 export { ResizableBox };
+
 //# sourceMappingURL=EFResizableBox.js.map

package/dist/gui/EFResizableBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFResizableBox.js","names":["EFResizableBoxElement"],"sources":["../../src/gui/EFResizableBox.ts"],"sourcesContent":["import { EFResizableBox as EFResizableBoxElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const ResizableBox = createComponent({\n  tagName: \"ef-resizable-box\",\n  elementClass: EFResizableBoxElement,\n  react: React,\n  events: {\n    onBoundsChange: \"bounds-change\",\n  },\n});\n"],"mappings":";;;;;AAIA,MAAa,eAAe,gBAAgB;CAC1C,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ,EACN,gBAAgB,iBACjB;CACF,CAAC"}
+{"version":3,"file":"EFResizableBox.js","names":["EFResizableBoxElement"],"sources":["../../src/gui/EFResizableBox.ts"],"mappings":";;;;AAIA,MAAa,eAAe,gBAAgB;CAC1C,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ,EACN,gBAAgB,iBACjB;CACF,CAAC"}

package/dist/gui/EFTransformHandles.js

@@ -1,7 +1,6 @@
 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",
@@ -12,7 +11,7 @@ const TransformHandles = createComponent({
 		onRotationChange: "rotation-change"
 	}
 });
-
 //#endregion
 export { TransformHandles };
+
 //# sourceMappingURL=EFTransformHandles.js.map

package/dist/gui/EFTransformHandles.js.map

@@ -1 +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"}
+{"version":3,"file":"EFTransformHandles.js","names":["EFTransformHandlesElement"],"sources":["../../src/gui/EFTransformHandles.ts"],"mappings":";;;;AAIA,MAAa,mBAAmB,gBAAgB;CAC9C,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ;EACN,gBAAgB;EAChB,kBAAkB;EACnB;CACF,CAAC"}

package/dist/gui/Filmstrip.js

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

package/dist/gui/Filmstrip.js.map

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

package/dist/gui/FitScale.js

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

package/dist/gui/FitScale.js.map

@@ -1 +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"}
+{"version":3,"file":"FitScale.js","names":["EFFitScaleElement"],"sources":["../../src/gui/FitScale.ts"],"mappings":";;;;AAIA,MAAa,WAAW,gBAAgB;CACtC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/FocusOverlay.js

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

package/dist/gui/FocusOverlay.js.map

@@ -1 +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"}
+{"version":3,"file":"FocusOverlay.js","names":["EFFocusOverlayElement"],"sources":["../../src/gui/FocusOverlay.ts"],"mappings":";;;;AAIA,MAAa,eAAe,gBAAgB;CAC1C,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/OverlayItem.js

@@ -1,7 +1,6 @@
 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",
@@ -10,7 +9,7 @@ const OverlayItem = createComponent({
 	displayName: "OverlayItem",
 	events: { onPositionChanged: "position-changed" }
 });
-
 //#endregion
 export { OverlayItem };
+
 //# sourceMappingURL=OverlayItem.js.map

package/dist/gui/OverlayItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayItem.js","names":["EFOverlayItemElement"],"sources":["../../src/gui/OverlayItem.tsx"],"sourcesContent":["import { EFOverlayItem as EFOverlayItemElement } 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":";;;;;AAaA,MAAa,cAAc,gBAGzB;CACA,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,mBAAmB,oBACpB;CACF,CAAC"}
+{"version":3,"file":"OverlayItem.js","names":["EFOverlayItemElement"],"sources":["../../src/gui/OverlayItem.tsx"],"mappings":";;;;AAaA,MAAa,cAAc,gBAGzB;CACA,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,mBAAmB,oBACpB;CACF,CAAC"}

package/dist/gui/OverlayLayer.js

@@ -1,7 +1,6 @@
 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",
@@ -9,7 +8,7 @@ const OverlayLayer = createComponent({
 	react: React,
 	displayName: "OverlayLayer"
 });
-
 //#endregion
 export { OverlayLayer };
+
 //# sourceMappingURL=OverlayLayer.js.map

package/dist/gui/OverlayLayer.js.map

@@ -1 +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"}
+{"version":3,"file":"OverlayLayer.js","names":["EFOverlayLayerElement"],"sources":["../../src/gui/OverlayLayer.tsx"],"mappings":";;;;AASA,MAAa,eAAe,gBAA2C;CACrE,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACd,CAAC"}

package/dist/gui/Pause.js

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

package/dist/gui/Pause.js.map

@@ -1 +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"}
+{"version":3,"file":"Pause.js","names":["EFPauseElement"],"sources":["../../src/gui/Pause.ts"],"mappings":";;;;AAIA,MAAa,QAAQ,gBAAgB;CACnC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Play.js

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

package/dist/gui/Play.js.map

@@ -1 +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"}
+{"version":3,"file":"Play.js","names":["EFPlayElement"],"sources":["../../src/gui/Play.ts"],"mappings":";;;;AAIA,MAAa,OAAO,gBAAgB;CAClC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Preview.js

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

package/dist/gui/Preview.js.map

@@ -1 +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"}
+{"version":3,"file":"Preview.js","names":["EFPreviewElement"],"sources":["../../src/gui/Preview.ts"],"mappings":";;;;AAIA,MAAa,UAAU,gBAAgB;CACrC,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/Scrubber.js

@@ -2,7 +2,6 @@ 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.tsx
 const BaseScrubber = createComponent({
 	tagName: "ef-scrubber",
@@ -12,7 +11,7 @@ const BaseScrubber = createComponent({
 	events: { onSeek: "seek" }
 });
 const Scrubber = React.forwardRef((props, ref) => {
-	const { scrollContainerRef, isScrubbingRef,...restProps } = props;
+	const { scrollContainerRef, isScrubbingRef, ...restProps } = props;
 	const elementRef = React.useRef(null);
 	React.useLayoutEffect(() => {
 		if (elementRef.current) {
@@ -32,7 +31,7 @@ const Scrubber = React.forwardRef((props, ref) => {
 	});
 });
 Scrubber.displayName = "Scrubber";
-
 //#endregion
 export { Scrubber };
+
 //# sourceMappingURL=Scrubber.js.map

package/dist/gui/Scrubber.js.map

@@ -1 +1 @@
-{"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  target?: string;\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  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst BaseScrubber = createComponent<EFScrubber, { onSeek: \"seek\" }>({\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>((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\nScrubber.displayName = \"Scrubber\";\n"],"mappings":";;;;;;AAoBA,MAAM,eAAe,gBAAgD;CACnE,SAAS;CACT,cAAc;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,QAAQ,QACT;CACF,CAAC;AAEF,MAAa,WAAW,MAAM,YAAuC,OAAO,QAAQ;CAClF,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;EAEJ;AAEF,SAAS,cAAc"}
+{"version":3,"file":"Scrubber.js","names":[],"sources":["../../src/gui/Scrubber.tsx"],"mappings":";;;;;AAoBA,MAAM,eAAe,gBAAgD;CACnE,SAAS;CACT,cAAc;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EACN,QAAQ,QACT;CACF,CAAC;AAEF,MAAa,WAAW,MAAM,YAAuC,OAAO,QAAQ;CAClF,MAAM,EAAE,oBAAoB,gBAAgB,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,KAAA;AAE1C,OAAI,eACF,YAAW,QAAQ,iBAAiB;OAEpC,YAAW,QAAQ,iBAAiB,KAAA;;IAGvC,CAAC,oBAAoB,SAAS,eAAe,CAAC;AAEjD,QACE,oBAAC,cAAD;EACE,GAAI;EACJ,MAAM,SAAS;AACb,cAAW,UAAU;AACrB,OAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;YAC/B,IAAK,KAAI,UAAU;;EAE9B,CAAA;EAEJ;AAEF,SAAS,cAAc"}

package/dist/gui/ThumbnailStrip.js

@@ -1,14 +1,13 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFThumbnailStrip } from "@editframe/elements";
 import React from "react";
-
 //#region src/gui/ThumbnailStrip.tsx
 const ThumbnailStrip = createComponent({
 	tagName: "ef-thumbnail-strip",
 	elementClass: EFThumbnailStrip,
 	react: React
 });
-
 //#endregion
 export { ThumbnailStrip };
+
 //# sourceMappingURL=ThumbnailStrip.js.map