@editframe/react 0.47.1 → 0.48.0

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

package/dist/gui/ThumbnailStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailStrip.js","names":["EFThumbnailStripElement"],"sources":["../../src/gui/ThumbnailStrip.tsx"],"sourcesContent":["import { EFThumbnailStrip as EFThumbnailStripElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const ThumbnailStrip = createComponent({\n  tagName: \"ef-thumbnail-strip\",\n  elementClass: EFThumbnailStripElement,\n  react: React,\n});\n"],"mappings":";;;;;AAIA,MAAa,iBAAiB,gBAAgB;CAC5C,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}
+{"version":3,"file":"ThumbnailStrip.js","names":["EFThumbnailStripElement"],"sources":["../../src/gui/ThumbnailStrip.tsx"],"mappings":";;;;AAIA,MAAa,iBAAiB,gBAAgB;CAC5C,SAAS;CACT,cAAcA;CACd,OAAO;CACR,CAAC"}

package/dist/gui/TimelineRuler.js

@@ -2,7 +2,6 @@ import { createComponent } from "../hooks/create-element.js";
 import { EFTimelineRuler } from "@editframe/elements";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/gui/TimelineRuler.tsx
 const BaseTimelineRuler = createComponent({
 	tagName: "ef-timeline-ruler",
@@ -11,7 +10,7 @@ const BaseTimelineRuler = createComponent({
 	displayName: "TimelineRuler"
 });
 const TimelineRuler = React.forwardRef((props, ref) => {
-	const { scrollContainerRef,...restProps } = props;
+	const { scrollContainerRef, ...restProps } = props;
 	const elementRef = React.useRef(null);
 	React.useLayoutEffect(() => {
 		if (elementRef.current && scrollContainerRef?.current) elementRef.current.scrollContainerElement = scrollContainerRef.current;
@@ -27,7 +26,7 @@ const TimelineRuler = React.forwardRef((props, ref) => {
 	});
 });
 TimelineRuler.displayName = "TimelineRuler";
-
 //#endregion
 export { TimelineRuler };
+
 //# sourceMappingURL=TimelineRuler.js.map

package/dist/gui/TimelineRuler.js.map

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

package/dist/gui/ToggleLoop.js

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

package/dist/gui/ToggleLoop.js.map

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

package/dist/gui/TogglePlay.js

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

package/dist/gui/TogglePlay.js.map

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

package/dist/gui/TrimHandles.js

@@ -1,7 +1,6 @@
 import { createComponent } from "../hooks/create-element.js";
 import { EFTrimHandles } from "@editframe/elements";
 import React from "react";
-
 //#region src/gui/TrimHandles.ts
 const TrimHandles = createComponent({
 	tagName: "ef-trim-handles",
@@ -12,7 +11,7 @@ const TrimHandles = createComponent({
 		onTrimChangeEnd: "trim-change-end"
 	}
 });
-
 //#endregion
 export { TrimHandles };
+
 //# sourceMappingURL=TrimHandles.js.map

package/dist/gui/TrimHandles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrimHandles.js","names":["EFTrimHandlesElement"],"sources":["../../src/gui/TrimHandles.ts"],"sourcesContent":["import { EFTrimHandles as EFTrimHandlesElement, type TrimChangeDetail } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent, type EventName } from \"../hooks/create-element\";\n\nexport const TrimHandles = createComponent({\n  tagName: \"ef-trim-handles\",\n  elementClass: EFTrimHandlesElement,\n  react: React,\n  events: {\n    onTrimChange: \"trim-change\" as EventName<CustomEvent<TrimChangeDetail>>,\n    onTrimChangeEnd: \"trim-change-end\" as EventName<CustomEvent<TrimChangeDetail>>,\n  },\n});\n"],"mappings":";;;;;AAIA,MAAa,cAAc,gBAAgB;CACzC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ;EACN,cAAc;EACd,iBAAiB;EAClB;CACF,CAAC"}
+{"version":3,"file":"TrimHandles.js","names":["EFTrimHandlesElement"],"sources":["../../src/gui/TrimHandles.ts"],"mappings":";;;;AAIA,MAAa,cAAc,gBAAgB;CACzC,SAAS;CACT,cAAcA;CACd,OAAO;CACP,QAAQ;EACN,cAAc;EACd,iBAAiB;EAClB;CACF,CAAC"}

package/dist/gui/Workbench.js

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

package/dist/gui/Workbench.js.map

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

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

@@ -1,13 +1,12 @@
 import React from "react";
 
 //#region src/hooks/create-element.d.ts
-
 /**
  * Branded string that carries the DOM event type at the type level.
  * At runtime it's just a string (the DOM event name).
  */
-type EventName<T$1 extends Event = Event> = string & {
-  __eventType?: T$1;
+type EventName<T extends Event = Event> = string & {
+  __eventType?: T;
 };
 type EventNames = Record<string, EventName>;
 type EventListeners<E extends EventNames> = { [K in keyof E]?: (e: E[K] extends EventName<infer T> ? T : Event) => void };

package/dist/hooks/create-element.js

@@ -1,5 +1,4 @@
 import React from "react";
-
 //#region src/hooks/create-element.ts
 let isomorphicEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 const reservedReactProperties = new Set([
@@ -36,11 +35,11 @@ function setProperty(node, name, value, old, events) {
 	node[name] = value;
 	if ((value === void 0 || value === null) && name in HTMLElement.prototype) node.removeAttribute(name);
 }
-function createComponent({ react: React$1, tagName, elementClass, events, displayName }) {
+function createComponent({ react: React, 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 ReactComponent = React.forwardRef((props, ref) => {
+		const elementRef = React.useRef(null);
+		const prevPropsRef = React.useRef(/* @__PURE__ */ new Map());
 		const reactProps = { suppressHydrationWarning: true };
 		const elementProps = {};
 		for (const [k, v] of Object.entries(props)) {
@@ -66,7 +65,7 @@ function createComponent({ react: React$1, tagName, elementClass, events, displa
 			prevPropsRef.current = newProps;
 			elementRef.current.removeAttribute("defer-hydration");
 		}, [props]);
-		return React$1.createElement(tagName, {
+		return React.createElement(tagName, {
 			...reactProps,
 			ref: (node) => {
 				elementRef.current = node;
@@ -78,7 +77,7 @@ function createComponent({ react: React$1, tagName, elementClass, events, displa
 	ReactComponent.displayName = displayName ?? elementClass.name;
 	return ReactComponent;
 }
-
 //#endregion
 export { createComponent };
+
 //# sourceMappingURL=create-element.js.map

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

@@ -1 +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 = typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\nexport function setIsomorphicEffect(effect: typeof React.useLayoutEffect | typeof React.useEffect) {\n  isomorphicEffect = effect;\n}\n\nconst reservedReactProperties = new Set([\"children\", \"localName\", \"ref\", \"style\", \"className\"]);\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\ntype Constructor<T> = { new (): T };\n\n/**\n * Branded string that carries the DOM event type at the type level.\n * At runtime it's just a string (the DOM event name).\n */\nexport type EventName<T extends Event = Event> = string & { __eventType?: T };\n\ntype EventNames = Record<string, EventName>;\n\ntype EventListeners<E extends EventNames> = {\n  [K in keyof E]?: (e: E[K] extends EventName<infer T> ? T : 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<ComponentProps<I, E> & React.RefAttributes<I>>;\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(node: Element, event: string, listener?: (e?: Event) => void) {\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) addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    return;\n  }\n  node[name as keyof E] = value as E[keyof E];\n  if ((value === undefined || value === null) && name in HTMLElement.prototype) {\n    node.removeAttribute(name);\n  }\n}\n\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\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>>((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        continue;\n      }\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  ReactComponent.displayName = displayName ?? elementClass.name;\n  return ReactComponent as ReactWebComponent<I, E>;\n}\n"],"mappings":";;;AAEA,IAAI,mBAAmB,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAMrF,MAAM,0BAA0B,IAAI,IAAI;CAAC;CAAY;CAAa;CAAO;CAAS;CAAY,CAAC;AAC/F,MAAM,iCAAiB,IAAI,SAAoD;AAqC/E,SAAS,yBAAyB,MAAe,OAAe,UAAgC;CAC9F,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,IAAK,0BAAyB,MAAM,OAAO,MAA6B;AACtF;;AAEF,MAAK,QAAmB;AACxB,MAAK,UAAU,UAAa,UAAU,SAAS,QAAQ,YAAY,UACjE,MAAK,gBAAgB,KAAK;;AAI9B,SAAgB,gBAAkE,EAChF,OAAOA,SACP,SACA,cACA,QACA,eACyC;CACzC,MAAM,aAAa,IAAI,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC,CAAC;CAErD,MAAM,iBAAiBA,QAAM,YAAqC,OAAO,QAAQ;EAC/E,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,WAAW;AACpD,iBAAa,KAAK;AAClB;;AAEF,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;GACF;AAEF,gBAAe,cAAc,eAAe,aAAa;AACzD,QAAO"}
+{"version":3,"file":"create-element.js","names":[],"sources":["../../src/hooks/create-element.ts"],"mappings":";;AAEA,IAAI,mBAAmB,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAMrF,MAAM,0BAA0B,IAAI,IAAI;CAAC;CAAY;CAAa;CAAO;CAAS;CAAY,CAAC;AAC/F,MAAM,iCAAiB,IAAI,SAAoD;AAqC/E,SAAS,yBAAyB,MAAe,OAAe,UAAgC;CAC9F,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,IAAK,0BAAyB,MAAM,OAAO,MAA6B;AACtF;;AAEF,MAAK,QAAmB;AACxB,MAAK,UAAU,KAAA,KAAa,UAAU,SAAS,QAAQ,YAAY,UACjE,MAAK,gBAAgB,KAAK;;AAI9B,SAAgB,gBAAkE,EAChF,OAAO,OACP,SACA,cACA,QACA,eACyC;CACzC,MAAM,aAAa,IAAI,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC,CAAC;CAErD,MAAM,iBAAiB,MAAM,YAAqC,OAAO,QAAQ;EAC/E,MAAM,aAAa,MAAM,OAAiB,KAAK;EAC/C,MAAM,eAAe,MAAM,uBAAO,IAAI,KAAsB,CAAC;EAE7D,MAAM,aAAsC,EAC1C,0BAA0B,MAC3B;EACD,MAAM,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,WAAW;AACpD,iBAAa,KAAK;AAClB;;AAEF,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,KAAA,GAAW,OAAO,OAAO;AAEhE,gBAAa,UAAU;AAGvB,cAAW,QAAQ,gBAAgB,kBAAkB;KACpD,CAAC,MAAM,CAAC;AAEX,SAAO,MAAM,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;GACF;AAEF,gBAAe,cAAc,eAAe,aAAa;AACzD,QAAO"}

package/dist/hooks/useMediaInfo.js

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-
 //#region src/hooks/useMediaInfo.ts
 var MediaInfoController = class {
 	#isConnected = false;
@@ -53,7 +52,7 @@ const useMediaInfo = (mediaRef) => {
 	}, [mediaRef.current]);
 	return mediaInfo;
 };
-
 //#endregion
 export { useMediaInfo };
+
 //# sourceMappingURL=useMediaInfo.js.map

package/dist/hooks/useMediaInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaInfo.js","names":["host: MediaElement","setMediaInfo: React.Dispatch<React.SetStateAction<MediaInfo>>","#isConnected","#lastIntrinsicDurationMs","#updateReactState"],"sources":["../../src/hooks/useMediaInfo.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { useEffect, useState } from \"react\";\n\nexport interface MediaInfo {\n  intrinsicDurationMs: number | undefined;\n  loading: boolean;\n}\n\ntype MediaElement = ReactiveControllerHost & {\n  intrinsicDurationMs: number | undefined;\n  isConnected: boolean;\n};\n\nexport class MediaInfoController implements ReactiveController {\n  #isConnected = false;\n  #lastIntrinsicDurationMs: number | undefined = undefined;\n\n  constructor(\n    private host: MediaElement,\n    private setMediaInfo: React.Dispatch<React.SetStateAction<MediaInfo>>,\n  ) {\n    this.host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#isConnected = true;\n  }\n\n  hostDisconnected(): void {\n    this.#isConnected = false;\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    if (!this.#isConnected) return;\n\n    const intrinsicDurationMs = this.host.intrinsicDurationMs;\n\n    if (intrinsicDurationMs !== this.#lastIntrinsicDurationMs) {\n      this.#lastIntrinsicDurationMs = intrinsicDurationMs;\n      this.#updateReactState();\n    }\n  }\n\n  #updateReactState(): void {\n    const intrinsicDurationMs = this.host.intrinsicDurationMs;\n    this.setMediaInfo({\n      intrinsicDurationMs,\n      loading: intrinsicDurationMs === undefined,\n    });\n  }\n\n  syncNow(): void {\n    this.#updateReactState();\n  }\n}\n\nexport const useMediaInfo = (mediaRef: React.RefObject<MediaElement | null>) => {\n  const [mediaInfo, setMediaInfo] = useState<MediaInfo>({\n    intrinsicDurationMs: undefined,\n    loading: true,\n  });\n\n  useEffect(() => {\n    if (!mediaRef.current) return;\n\n    const controller = new MediaInfoController(mediaRef.current, setMediaInfo);\n\n    if (mediaRef.current.isConnected) {\n      controller.hostConnected();\n      controller.syncNow();\n    }\n\n    return () => {\n      controller.hostDisconnected();\n    };\n  }, [mediaRef.current]);\n\n  return mediaInfo;\n};\n"],"mappings":";;;AAaA,IAAa,sBAAb,MAA+D;CAC7D,eAAe;CACf,2BAA+C;CAE/C,YACE,AAAQA,MACR,AAAQC,cACR;EAFQ;EACA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAsB;AACpB,QAAKC,cAAe;;CAGtB,mBAAyB;AACvB,QAAKA,cAAe;AACpB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;AAClB,MAAI,CAAC,MAAKA,YAAc;EAExB,MAAM,sBAAsB,KAAK,KAAK;AAEtC,MAAI,wBAAwB,MAAKC,yBAA0B;AACzD,SAAKA,0BAA2B;AAChC,SAAKC,kBAAmB;;;CAI5B,oBAA0B;EACxB,MAAM,sBAAsB,KAAK,KAAK;AACtC,OAAK,aAAa;GAChB;GACA,SAAS,wBAAwB;GAClC,CAAC;;CAGJ,UAAgB;AACd,QAAKA,kBAAmB;;;AAI5B,MAAa,gBAAgB,aAAmD;CAC9E,MAAM,CAAC,WAAW,gBAAgB,SAAoB;EACpD,qBAAqB;EACrB,SAAS;EACV,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAEvB,MAAM,aAAa,IAAI,oBAAoB,SAAS,SAAS,aAAa;AAE1E,MAAI,SAAS,QAAQ,aAAa;AAChC,cAAW,eAAe;AAC1B,cAAW,SAAS;;AAGtB,eAAa;AACX,cAAW,kBAAkB;;IAE9B,CAAC,SAAS,QAAQ,CAAC;AAEtB,QAAO"}
+{"version":3,"file":"useMediaInfo.js","names":["#isConnected","#lastIntrinsicDurationMs","#updateReactState"],"sources":["../../src/hooks/useMediaInfo.ts"],"mappings":";;AAaA,IAAa,sBAAb,MAA+D;CAC7D,eAAe;CACf,2BAA+C,KAAA;CAE/C,YACE,MACA,cACA;AAFQ,OAAA,OAAA;AACA,OAAA,eAAA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAsB;AACpB,QAAA,cAAoB;;CAGtB,mBAAyB;AACvB,QAAA,cAAoB;AACpB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;AAClB,MAAI,CAAC,MAAA,YAAmB;EAExB,MAAM,sBAAsB,KAAK,KAAK;AAEtC,MAAI,wBAAwB,MAAA,yBAA+B;AACzD,SAAA,0BAAgC;AAChC,SAAA,kBAAwB;;;CAI5B,oBAA0B;EACxB,MAAM,sBAAsB,KAAK,KAAK;AACtC,OAAK,aAAa;GAChB;GACA,SAAS,wBAAwB,KAAA;GAClC,CAAC;;CAGJ,UAAgB;AACd,QAAA,kBAAwB;;;AAI5B,MAAa,gBAAgB,aAAmD;CAC9E,MAAM,CAAC,WAAW,gBAAgB,SAAoB;EACpD,qBAAqB,KAAA;EACrB,SAAS;EACV,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAEvB,MAAM,aAAa,IAAI,oBAAoB,SAAS,SAAS,aAAa;AAE1E,MAAI,SAAS,QAAQ,aAAa;AAChC,cAAW,eAAe;AAC1B,cAAW,SAAS;;AAGtB,eAAa;AACX,cAAW,kBAAkB;;IAE9B,CAAC,SAAS,QAAQ,CAAC;AAEtB,QAAO"}

package/dist/hooks/usePanZoomTransform.d.ts

@@ -2,7 +2,6 @@ import { PanZoomTransform } from "@editframe/elements";
 import React from "react";
 
 //#region src/hooks/usePanZoomTransform.d.ts
-
 /**
  * Hook to get PanZoom transform values from a PanZoom element ref.
  * Listens to transform-changed events to keep transform values in sync.

package/dist/hooks/usePanZoomTransform.js

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-
 //#region src/hooks/usePanZoomTransform.ts
 /**
 * Hook to get PanZoom transform values from a PanZoom element ref.
@@ -43,7 +42,7 @@ function usePanZoomTransform(panZoomRef) {
 	}, [panZoomRef]);
 	return transform;
 }
-
 //#endregion
 export { usePanZoomTransform };
+
 //# sourceMappingURL=usePanZoomTransform.js.map

package/dist/hooks/usePanZoomTransform.js.map

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

package/dist/hooks/useRenderData.js

@@ -1,11 +1,10 @@
 import { getRenderData } from "@editframe/elements";
 import { useMemo } from "react";
-
 //#region src/hooks/useRenderData.ts
 function useRenderData() {
 	return useMemo(() => getRenderData(), []);
 }
-
 //#endregion
 export { useRenderData };
+
 //# sourceMappingURL=useRenderData.js.map

package/dist/hooks/useRenderData.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRenderData.js","names":[],"sources":["../../src/hooks/useRenderData.ts"],"sourcesContent":["import { getRenderData } from \"@editframe/elements\";\nimport { useMemo } from \"react\";\n\nexport function useRenderData<T = unknown>(): T | undefined {\n  return useMemo(() => getRenderData<T>(), []);\n}\n"],"mappings":";;;;AAGA,SAAgB,gBAA4C;AAC1D,QAAO,cAAc,eAAkB,EAAE,EAAE,CAAC"}
+{"version":3,"file":"useRenderData.js","names":[],"sources":["../../src/hooks/useRenderData.ts"],"mappings":";;;AAGA,SAAgB,gBAA4C;AAC1D,QAAO,cAAc,eAAkB,EAAE,EAAE,CAAC"}

package/dist/hooks/useTimingInfo.d.ts

@@ -1,9 +1,9 @@
 import { EFTimegroup } from "@editframe/elements";
-import * as react0 from "react";
+import * as _$react from "react";
 
 //#region src/hooks/useTimingInfo.d.ts
 declare const useTimingInfo: (timegroupRef?: React.RefObject<EFTimegroup | null>) => {
-  ref: react0.RefObject<EFTimegroup | null>;
+  ref: _$react.RefObject<EFTimegroup | null>;
   ownCurrentTimeMs: number;
   durationMs: number;
   percentComplete: number;

package/dist/hooks/useTimingInfo.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-
 //#region src/hooks/useTimingInfo.ts
 var CurrentTimeController = class {
 	#isConnected = false;
@@ -60,7 +59,7 @@ const useTimingInfo = (timegroupRef = useRef(null)) => {
 		ref: timegroupRef
 	};
 };
-
 //#endregion
 export { useTimingInfo };
+
 //# sourceMappingURL=useTimingInfo.js.map

package/dist/hooks/useTimingInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTimingInfo.js","names":["host: {\n      ownCurrentTimeMs: number;\n      durationMs: number;\n    } & ReactiveControllerHost","setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>","#isConnected","#lastOwnCurrentTimeMs","#lastDurationMs","#updateReactState"],"sources":["../../src/hooks/useTimingInfo.ts"],"sourcesContent":["import type { EFTimegroup } from \"@editframe/elements\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface TimeInfo {\n  ownCurrentTimeMs: number;\n  durationMs: number;\n  percentComplete: number;\n}\n\nclass CurrentTimeController implements ReactiveController {\n  #isConnected = false;\n  #lastOwnCurrentTimeMs = Number.NaN;\n  #lastDurationMs = Number.NaN;\n\n  constructor(\n    private host: {\n      ownCurrentTimeMs: number;\n      durationMs: number;\n    } & ReactiveControllerHost,\n    private setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>,\n  ) {\n    this.host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#isConnected = true;\n  }\n\n  hostDisconnected(): void {\n    this.#isConnected = false;\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    if (!this.#isConnected) return;\n\n    const { ownCurrentTimeMs, durationMs } = this.host;\n\n    if (ownCurrentTimeMs !== this.#lastOwnCurrentTimeMs || durationMs !== this.#lastDurationMs) {\n      this.#lastOwnCurrentTimeMs = ownCurrentTimeMs;\n      this.#lastDurationMs = durationMs;\n      this.#updateReactState();\n    }\n  }\n\n  #updateReactState(): void {\n    const { ownCurrentTimeMs, durationMs } = this.host;\n    this.setCurrentTime({\n      ownCurrentTimeMs,\n      durationMs,\n      percentComplete: durationMs > 0 ? ownCurrentTimeMs / durationMs : 0,\n    });\n  }\n\n  syncNow(): void {\n    this.#updateReactState();\n  }\n}\n\nexport const useTimingInfo = (\n  timegroupRef: React.RefObject<EFTimegroup | null> = useRef<EFTimegroup>(null),\n) => {\n  const [timeInfo, setTimeInfo] = useState<TimeInfo>({\n    ownCurrentTimeMs: 0,\n    durationMs: 0,\n    percentComplete: 0,\n  });\n\n  useEffect(() => {\n    if (!timegroupRef.current) {\n      throw new Error(\"Timegroup ref not set\");\n    }\n\n    const controller = new CurrentTimeController(timegroupRef.current, setTimeInfo);\n\n    if (timegroupRef.current.isConnected) {\n      controller.hostConnected();\n      controller.syncNow();\n    }\n\n    return () => {\n      controller.hostDisconnected();\n    };\n  }, [timegroupRef.current]);\n\n  return { ...timeInfo, ref: timegroupRef };\n};\n"],"mappings":";;;AAUA,IAAM,wBAAN,MAA0D;CACxD,eAAe;CACf,wBAAwB;CACxB,kBAAkB;CAElB,YACE,AAAQA,MAIR,AAAQC,gBACR;EALQ;EAIA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAsB;AACpB,QAAKC,cAAe;;CAGtB,mBAAyB;AACvB,QAAKA,cAAe;AACpB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;AAClB,MAAI,CAAC,MAAKA,YAAc;EAExB,MAAM,EAAE,kBAAkB,eAAe,KAAK;AAE9C,MAAI,qBAAqB,MAAKC,wBAAyB,eAAe,MAAKC,gBAAiB;AAC1F,SAAKD,uBAAwB;AAC7B,SAAKC,iBAAkB;AACvB,SAAKC,kBAAmB;;;CAI5B,oBAA0B;EACxB,MAAM,EAAE,kBAAkB,eAAe,KAAK;AAC9C,OAAK,eAAe;GAClB;GACA;GACA,iBAAiB,aAAa,IAAI,mBAAmB,aAAa;GACnE,CAAC;;CAGJ,UAAgB;AACd,QAAKA,kBAAmB;;;AAI5B,MAAa,iBACX,eAAoD,OAAoB,KAAK,KAC1E;CACH,MAAM,CAAC,UAAU,eAAe,SAAmB;EACjD,kBAAkB;EAClB,YAAY;EACZ,iBAAiB;EAClB,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,aAAa,QAChB,OAAM,IAAI,MAAM,wBAAwB;EAG1C,MAAM,aAAa,IAAI,sBAAsB,aAAa,SAAS,YAAY;AAE/E,MAAI,aAAa,QAAQ,aAAa;AACpC,cAAW,eAAe;AAC1B,cAAW,SAAS;;AAGtB,eAAa;AACX,cAAW,kBAAkB;;IAE9B,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAO;EAAE,GAAG;EAAU,KAAK;EAAc"}
+{"version":3,"file":"useTimingInfo.js","names":["#isConnected","#lastOwnCurrentTimeMs","#lastDurationMs","#updateReactState"],"sources":["../../src/hooks/useTimingInfo.ts"],"mappings":";;AAUA,IAAM,wBAAN,MAA0D;CACxD,eAAe;CACf,wBAAwB;CACxB,kBAAkB;CAElB,YACE,MAIA,gBACA;AALQ,OAAA,OAAA;AAIA,OAAA,iBAAA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAsB;AACpB,QAAA,cAAoB;;CAGtB,mBAAyB;AACvB,QAAA,cAAoB;AACpB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;AAClB,MAAI,CAAC,MAAA,YAAmB;EAExB,MAAM,EAAE,kBAAkB,eAAe,KAAK;AAE9C,MAAI,qBAAqB,MAAA,wBAA8B,eAAe,MAAA,gBAAsB;AAC1F,SAAA,uBAA6B;AAC7B,SAAA,iBAAuB;AACvB,SAAA,kBAAwB;;;CAI5B,oBAA0B;EACxB,MAAM,EAAE,kBAAkB,eAAe,KAAK;AAC9C,OAAK,eAAe;GAClB;GACA;GACA,iBAAiB,aAAa,IAAI,mBAAmB,aAAa;GACnE,CAAC;;CAGJ,UAAgB;AACd,QAAA,kBAAwB;;;AAI5B,MAAa,iBACX,eAAoD,OAAoB,KAAK,KAC1E;CACH,MAAM,CAAC,UAAU,eAAe,SAAmB;EACjD,kBAAkB;EAClB,YAAY;EACZ,iBAAiB;EAClB,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,aAAa,QAChB,OAAM,IAAI,MAAM,wBAAwB;EAG1C,MAAM,aAAa,IAAI,sBAAsB,aAAa,SAAS,YAAY;AAE/E,MAAI,aAAa,QAAQ,aAAa;AACpC,cAAW,eAAe;AAC1B,cAAW,SAAS;;AAGtB,eAAa;AACX,cAAW,kBAAkB;;IAE9B,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAO;EAAE,GAAG;EAAU,KAAK;EAAc"}

package/dist/index.js

@@ -34,5 +34,4 @@ import { useMediaInfo } from "./hooks/useMediaInfo.js";
 import { usePanZoomTransform } from "./hooks/usePanZoomTransform.js";
 import { useRenderData } from "./hooks/useRenderData.js";
 import { elementNeedsFitScale, needsFitScale } from "@editframe/elements";
-
-export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, OverlayItem, OverlayLayer, PanZoom, Pause, Play, Preview, ResizableBox, Scrubber, Surface, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, TimelineRoot, TimelineRuler, ToggleLoop, TogglePlay, TransformHandles, TrimHandles, Video, Waveform, Workbench, elementNeedsFitScale, needsFitScale, useMediaInfo, usePanZoomTransform, useRenderData, useTimingInfo };
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, OverlayItem, OverlayLayer, PanZoom, Pause, Play, Preview, ResizableBox, Scrubber, Surface, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, TimelineRoot, TimelineRuler, ToggleLoop, TogglePlay, TransformHandles, TrimHandles, Video, Waveform, Workbench, elementNeedsFitScale, needsFitScale, useMediaInfo, usePanZoomTransform, useRenderData, useTimingInfo };

package/dist/r3f/CompositionCanvas.d.ts

@@ -1,9 +1,8 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { CanvasProps } from "@react-three/fiber";
 
 //#region src/r3f/CompositionCanvas.d.ts
-
 /**
  * Hook to read the current composition time inside an R3F scene.
  * Must be used within a `<CompositionCanvas>`.
@@ -26,7 +25,7 @@ declare function CompositionCanvas({
   containerClassName,
   gl: glProp,
   ...canvasProps
-}: CompositionCanvasProps): react_jsx_runtime0.JSX.Element;
+}: CompositionCanvasProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CompositionCanvas, CompositionCanvasProps, useCompositionTime };
 //# sourceMappingURL=CompositionCanvas.d.ts.map

package/dist/r3f/CompositionCanvas.js

@@ -2,7 +2,6 @@ import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState
 import { flushSync } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Canvas, useFrame, useThree } from "@react-three/fiber";
-
 //#region src/r3f/CompositionCanvas.tsx
 const CompositionTimeContext = createContext({
 	timeMs: 0,
@@ -31,7 +30,7 @@ function InvalidateOnTimeChange({ timeMs }) {
 	}, [timeMs, invalidate]);
 	return null;
 }
-function CompositionCanvas({ children, containerStyle, containerClassName, gl: glProp,...canvasProps }) {
+function CompositionCanvas({ children, containerStyle, containerClassName, gl: glProp, ...canvasProps }) {
 	const [timeMs, setTimeMs] = useState(0);
 	const [durationMs, setDurationMs] = useState(0);
 	const containerRef = useRef(null);
@@ -68,6 +67,7 @@ function CompositionCanvas({ children, containerStyle, containerClassName, gl: g
 		children: /* @__PURE__ */ jsx(Canvas, {
 			frameloop: "demand",
 			gl: mergedGl,
+			resize: { offsetSize: true },
 			...canvasProps,
 			style: {
 				width: "100%",
@@ -88,7 +88,7 @@ function CompositionCanvas({ children, containerStyle, containerClassName, gl: g
 		})
 	});
 }
-
 //#endregion
 export { CompositionCanvas, useCompositionTime };
+
 //# sourceMappingURL=CompositionCanvas.js.map