@editframe/elements 0.37.3-beta → 0.38.1

package/dist/gui/EFFitScale.d.ts

@@ -2,13 +2,36 @@ import { LitElement } from "lit";
 import * as lit_html_directives_ref1 from "lit-html/directives/ref";
 
 //#region src/gui/EFFitScale.d.ts
+interface ScaleInput {
+  containerWidth: number;
+  containerHeight: number;
+  contentWidth: number;
+  contentHeight: number;
+}
+interface ScaleOutput {
+  scale: number;
+  translateX: number;
+  translateY: number;
+}
+/**
+ * Compute the scale factor and centering translation needed to fit
+ * content of a given size into a container while preserving aspect ratio.
+ *
+ * Returns `null` when any dimension is zero or negative (cannot compute).
+ */
+declare function computeFitScale(input: ScaleInput): ScaleOutput | null;
 declare class EFFitScale extends LitElement {
   containerRef: lit_html_directives_ref1.Ref<HTMLDivElement>;
   contentRef: lit_html_directives_ref1.Ref<HTMLSlotElement>;
   createRenderRoot(): this;
   uniqueId: string;
-  private scale;
-  private animationFrameId?;
+  paused: boolean;
+  updated(changedProperties: Map<string, unknown>): void;
+  private containerResizeObserver?;
+  private contentResizeObserver?;
+  private childMutationObserver?;
+  private observedContentChild;
+  private hasWarnedZeroDimensions;
   get contentChild(): HTMLElement | null;
   get scaleInfo(): {
     scale: number;
@@ -18,7 +41,8 @@ declare class EFFitScale extends LitElement {
     contentHeight: number;
   };
   scaleLastSetOn: HTMLElement | null;
-  setScale: () => void;
+  private updateScale;
+  private observeContentChild;
   removeScale: () => void;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -29,5 +53,5 @@ declare global {
   }
 }
 //#endregion
-export { EFFitScale };
+export { EFFitScale, ScaleInput, ScaleOutput, computeFitScale };
 //# sourceMappingURL=EFFitScale.d.ts.map

package/dist/gui/EFFitScale.js

@@ -1,36 +1,64 @@
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { createRef } from "lit/directives/ref.js";
 
 //#region src/gui/EFFitScale.ts
+/**
+* Compute the scale factor and centering translation needed to fit
+* content of a given size into a container while preserving aspect ratio.
+*
+* Returns `null` when any dimension is zero or negative (cannot compute).
+*/
+function computeFitScale(input) {
+	const { containerWidth, containerHeight, contentWidth, contentHeight } = input;
+	if (containerWidth <= 0 || containerHeight <= 0 || contentWidth <= 0 || contentHeight <= 0) return null;
+	const scale = containerWidth / containerHeight > contentWidth / contentHeight ? containerHeight / contentHeight : containerWidth / contentWidth;
+	const scaledWidth = contentWidth * scale;
+	const scaledHeight = contentHeight * scale;
+	return {
+		scale,
+		translateX: (containerWidth - scaledWidth) / 2,
+		translateY: (containerHeight - scaledHeight) / 2
+	};
+}
 let EFFitScale = class EFFitScale$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.containerRef = createRef();
 		this.contentRef = createRef();
 		this.uniqueId = Math.random().toString(36).substring(2, 15);
-		this.scale = 1;
+		this.paused = false;
+		this.observedContentChild = null;
+		this.hasWarnedZeroDimensions = false;
 		this.scaleLastSetOn = null;
-		this.setScale = () => {
-			if (this.isConnected) {
-				const { scale, containerWidth, containerHeight, contentWidth, contentHeight } = this.scaleInfo;
-				if (this.contentChild && contentWidth > 0 && contentHeight > 0) {
-					const scaledWidth = contentWidth * scale;
-					const scaledHeight = contentHeight * scale;
-					const translateX = (containerWidth - scaledWidth) / 2;
-					const translateY = (containerHeight - scaledHeight) / 2;
-					if (this.scaleLastSetOn !== this.contentChild) this.removeScale();
-					Object.assign(this.contentChild.style, {
-						width: `${contentWidth}px`,
-						height: `${contentHeight}px`,
-						transform: `translate(${translateX.toFixed(4)}px, ${translateY.toFixed(4)}px) scale(${scale.toFixed(4)})`,
-						transformOrigin: "top left"
-					});
-					this.scale = scale;
-					this.scaleLastSetOn = this.contentChild;
+		this.updateScale = () => {
+			if (!this.isConnected || this.paused) return;
+			const { containerWidth, containerHeight, contentWidth, contentHeight } = this.scaleInfo;
+			if (containerWidth === 0 || containerHeight === 0) {
+				if (!this.hasWarnedZeroDimensions) {
+					this.hasWarnedZeroDimensions = true;
+					console.warn(`[ef-fit-scale] Container has zero dimensions (${containerWidth}×${containerHeight}). Content will be invisible. Ensure all ancestors have resolved height.`, this);
 				}
-				this.animationFrameId = requestAnimationFrame(this.setScale);
+				return;
+			}
+			this.hasWarnedZeroDimensions = false;
+			if (this.contentChild && contentWidth > 0 && contentHeight > 0) {
+				const result = computeFitScale({
+					containerWidth,
+					containerHeight,
+					contentWidth,
+					contentHeight
+				});
+				if (!result) return;
+				if (this.scaleLastSetOn !== this.contentChild) this.removeScale();
+				Object.assign(this.contentChild.style, {
+					width: `${contentWidth}px`,
+					height: `${contentHeight}px`,
+					transform: `translate(${result.translateX.toFixed(4)}px, ${result.translateY.toFixed(4)}px) scale(${result.scale.toFixed(4)})`,
+					transformOrigin: "top left"
+				});
+				this.scaleLastSetOn = this.contentChild;
 			}
 		};
 		this.removeScale = () => {
@@ -54,12 +82,15 @@ let EFFitScale = class EFFitScale$1 extends LitElement {
 			gridTemplateRows: "100%",
 			overflow: "hidden",
 			boxSizing: "border-box",
-			contain: "strict",
+			contain: "layout paint style",
 			position: "relative"
 		});
 		this.id = `${this.uniqueId}`;
 		return this;
 	}
+	updated(changedProperties) {
+		if (changedProperties.has("paused") && !this.paused) this.updateScale();
+	}
 	get contentChild() {
 		if (!this.children.length) return null;
 		const isNonContentElement = (element) => {
@@ -143,26 +174,57 @@ let EFFitScale = class EFFitScale$1 extends LitElement {
 			contentHeight: 0
 		};
 		return {
-			scale: containerWidth / containerHeight > contentWidth / contentHeight ? containerHeight / contentHeight : containerWidth / contentWidth,
+			scale: computeFitScale({
+				containerWidth,
+				containerHeight,
+				contentWidth,
+				contentHeight
+			})?.scale ?? 1,
 			containerWidth,
 			containerHeight,
 			contentWidth,
 			contentHeight
 		};
 	}
+	observeContentChild() {
+		const child = this.contentChild;
+		if (child === this.observedContentChild) return;
+		this.contentResizeObserver?.disconnect();
+		if (child) {
+			this.contentResizeObserver = new ResizeObserver(() => {
+				this.updateScale();
+			});
+			this.contentResizeObserver.observe(child);
+		}
+		this.observedContentChild = child;
+	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.animationFrameId = requestAnimationFrame(this.setScale);
+		this.hasWarnedZeroDimensions = false;
+		this.containerResizeObserver = new ResizeObserver(() => {
+			this.updateScale();
+		});
+		this.containerResizeObserver.observe(this);
+		this.childMutationObserver = new MutationObserver(() => {
+			this.observeContentChild();
+			this.updateScale();
+		});
+		this.childMutationObserver.observe(this, { childList: true });
+		this.observeContentChild();
+		requestAnimationFrame(() => this.updateScale());
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeScale();
-		if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
+		this.containerResizeObserver?.disconnect();
+		this.contentResizeObserver?.disconnect();
+		this.childMutationObserver?.disconnect();
+		this.observedContentChild = null;
 	}
 };
-__decorate([state()], EFFitScale.prototype, "scale", void 0);
+__decorate([property({ type: Boolean })], EFFitScale.prototype, "paused", void 0);
 EFFitScale = __decorate([customElement("ef-fit-scale")], EFFitScale);
 
 //#endregion
-export { EFFitScale };
+export { EFFitScale, computeFitScale };
 //# sourceMappingURL=EFFitScale.js.map

package/dist/gui/EFFitScale.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFFitScale.js","names":["EFFitScale","results: HTMLElement[]","children","allContentElements: HTMLElement[]"],"sources":["../../src/gui/EFFitScale.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef } from \"lit/directives/ref.js\";\n\n@customElement(\"ef-fit-scale\")\nexport class EFFitScale extends LitElement {\n  containerRef = createRef<HTMLDivElement>();\n  contentRef = createRef<HTMLSlotElement>();\n\n  createRenderRoot() {\n    Object.assign(this.style, {\n      display: \"grid\",\n      width: \"100%\",\n      height: \"100%\",\n      gridTemplateColumns: \"100%\",\n      gridTemplateRows: \"100%\",\n      overflow: \"hidden\",\n      boxSizing: \"border-box\",\n      contain: \"strict\",\n      position: \"relative\",\n    });\n    this.id = `${this.uniqueId}`;\n    return this;\n  }\n\n  uniqueId = Math.random().toString(36).substring(2, 15);\n\n  @state()\n  private scale = 1;\n\n  private animationFrameId?: number;\n\n  get contentChild() {\n    if (!this.children.length) return null;\n\n    const isNonContentElement = (element: Element): boolean => {\n      const tagName = element.tagName.toLowerCase();\n      const nonContentTags = [\n        \"style\",\n        \"script\",\n        \"meta\",\n        \"link\",\n        \"title\",\n        \"noscript\",\n      ];\n      if (nonContentTags.includes(tagName)) return true;\n\n      try {\n        const display = window.getComputedStyle(element).display;\n        return display === \"none\" || display === \"contents\";\n      } catch {\n        return false;\n      }\n    };\n\n    const findAllContentElements = (element: Element): HTMLElement[] => {\n      const results: HTMLElement[] = [];\n\n      if (element instanceof HTMLSlotElement) {\n        const assigned = element.assignedElements()[0];\n        if (assigned) {\n          results.push(...findAllContentElements(assigned));\n        }\n        return results;\n      }\n\n      if (!isNonContentElement(element)) {\n        results.push(element as HTMLElement);\n      }\n\n      const children = Array.from(element.children);\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i];\n        if (child) {\n          results.push(...findAllContentElements(child));\n        }\n      }\n\n      return results;\n    };\n\n    const children = Array.from(this.children);\n    const allContentElements: HTMLElement[] = [];\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i];\n      if (child) {\n        allContentElements.push(...findAllContentElements(child));\n      }\n    }\n\n    if (allContentElements.length === 0) return null;\n\n    return allContentElements[0] ?? null;\n  }\n\n  get scaleInfo() {\n    if (!this.contentChild) {\n      return {\n        scale: 1,\n        containerWidth: 0,\n        containerHeight: 0,\n        contentWidth: 0,\n        contentHeight: 0,\n      };\n    }\n\n    const containerWidth = this.clientWidth;\n    const containerHeight = this.clientHeight;\n\n    // Try to get natural dimensions from media elements (ef-video, ef-image)\n    let contentWidth = 0;\n    let contentHeight = 0;\n\n    if (typeof (this.contentChild as any).getNaturalDimensions === \"function\") {\n      const naturalDimensions = (\n        this.contentChild as any\n      ).getNaturalDimensions() as { width: number; height: number } | null;\n      if (\n        naturalDimensions &&\n        naturalDimensions.width > 0 &&\n        naturalDimensions.height > 0\n      ) {\n        contentWidth = naturalDimensions.width;\n        contentHeight = naturalDimensions.height;\n\n        // ESSENTIAL: For ef-video, set canvas to explicit pixel dimensions to break 100% circular dependency\n        // Canvas default CSS is width:100%, height:100% which would make ef-video collapse to 0x0\n        // when ef-video is set to width:auto, height:auto by ElementRenderer\n        if (this.contentChild.tagName === \"EF-VIDEO\") {\n          const canvas = (this.contentChild as any).canvasElement;\n          if (canvas) {\n            canvas.style.setProperty(\"width\", `${contentWidth}px`, \"important\");\n            canvas.style.setProperty(\n              \"height\",\n              `${contentHeight}px`,\n              \"important\",\n            );\n          }\n        }\n      } else {\n        // Natural dimensions not available yet, fall back to client dimensions\n        contentWidth = this.contentChild.clientWidth;\n        contentHeight = this.contentChild.clientHeight;\n      }\n    } else {\n      // For other elements, use clientWidth/Height\n      contentWidth = this.contentChild.clientWidth;\n      contentHeight = this.contentChild.clientHeight;\n    }\n\n    if (contentWidth === 0 || contentHeight === 0) {\n      return {\n        scale: 1,\n        containerWidth,\n        containerHeight,\n        contentWidth: 0,\n        contentHeight: 0,\n      };\n    }\n\n    const containerRatio = containerWidth / containerHeight;\n    const contentRatio = contentWidth / contentHeight;\n\n    const scale =\n      containerRatio > contentRatio\n        ? containerHeight / contentHeight\n        : containerWidth / contentWidth;\n\n    return {\n      scale,\n      containerWidth,\n      containerHeight,\n      contentWidth,\n      contentHeight,\n    };\n  }\n\n  scaleLastSetOn: HTMLElement | null = null;\n\n  setScale = () => {\n    if (this.isConnected) {\n      const scaleInfo = this.scaleInfo;\n      const {\n        scale,\n        containerWidth,\n        containerHeight,\n        contentWidth,\n        contentHeight,\n      } = scaleInfo;\n\n      if (this.contentChild && contentWidth > 0 && contentHeight > 0) {\n        // Calculate scaled dimensions using natural size from scaleInfo\n        const scaledWidth = contentWidth * scale;\n        const scaledHeight = contentHeight * scale;\n        const translateX = (containerWidth - scaledWidth) / 2;\n        const translateY = (containerHeight - scaledHeight) / 2;\n\n        // In the rare event that the content child is changed, we need to remove the scale\n        // because we don't want to have a scale on the old content child that is somewhere else in the DOM\n        if (this.scaleLastSetOn !== this.contentChild) {\n          this.removeScale();\n        }\n        // Use toFixed to avoid floating point precision issues\n        // this will update every frame with sub-pixel changes if we don't pin it down\n        Object.assign(this.contentChild.style, {\n          width: `${contentWidth}px`,\n          height: `${contentHeight}px`,\n          transform: `translate(${translateX.toFixed(4)}px, ${translateY.toFixed(4)}px) scale(${scale.toFixed(4)})`,\n          transformOrigin: \"top left\",\n        });\n        this.scale = scale;\n        this.scaleLastSetOn = this.contentChild;\n      }\n      this.animationFrameId = requestAnimationFrame(this.setScale);\n    }\n  };\n\n  removeScale = () => {\n    if (this.scaleLastSetOn) {\n      Object.assign(this.scaleLastSetOn.style, {\n        width: \"\",\n        height: \"\",\n        transform: \"\",\n        transformOrigin: \"\",\n      });\n      this.scaleLastSetOn = null;\n    }\n  };\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.animationFrameId = requestAnimationFrame(this.setScale);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeScale();\n    if (this.animationFrameId) {\n      cancelAnimationFrame(this.animationFrameId);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-fit-scale\": EFFitScale;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFFitScale.js","names":["EFFitScale","results: HTMLElement[]","children","allContentElements: HTMLElement[]"],"sources":["../../src/gui/EFFitScale.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef } from \"lit/directives/ref.js\";\n\n/* ━━ Pure scale calculation ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nexport interface ScaleInput {\n  containerWidth: number;\n  containerHeight: number;\n  contentWidth: number;\n  contentHeight: number;\n}\n\nexport interface ScaleOutput {\n  scale: number;\n  translateX: number;\n  translateY: number;\n}\n\n/**\n * Compute the scale factor and centering translation needed to fit\n * content of a given size into a container while preserving aspect ratio.\n *\n * Returns `null` when any dimension is zero or negative (cannot compute).\n */\nexport function computeFitScale(input: ScaleInput): ScaleOutput | null {\n  const { containerWidth, containerHeight, contentWidth, contentHeight } =\n    input;\n\n  if (\n    containerWidth <= 0 ||\n    containerHeight <= 0 ||\n    contentWidth <= 0 ||\n    contentHeight <= 0\n  ) {\n    return null;\n  }\n\n  const containerRatio = containerWidth / containerHeight;\n  const contentRatio = contentWidth / contentHeight;\n\n  const scale =\n    containerRatio > contentRatio\n      ? containerHeight / contentHeight\n      : containerWidth / contentWidth;\n\n  const scaledWidth = contentWidth * scale;\n  const scaledHeight = contentHeight * scale;\n  const translateX = (containerWidth - scaledWidth) / 2;\n  const translateY = (containerHeight - scaledHeight) / 2;\n\n  return { scale, translateX, translateY };\n}\n\n/* ━━ Component ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n@customElement(\"ef-fit-scale\")\nexport class EFFitScale extends LitElement {\n  containerRef = createRef<HTMLDivElement>();\n  contentRef = createRef<HTMLSlotElement>();\n\n  createRenderRoot() {\n    Object.assign(this.style, {\n      display: \"grid\",\n      width: \"100%\",\n      height: \"100%\",\n      gridTemplateColumns: \"100%\",\n      gridTemplateRows: \"100%\",\n      overflow: \"hidden\",\n      boxSizing: \"border-box\",\n      contain: \"layout paint style\",\n      position: \"relative\",\n    });\n    this.id = `${this.uniqueId}`;\n    return this;\n  }\n\n  uniqueId = Math.random().toString(36).substring(2, 15);\n\n  @property({ type: Boolean })\n  paused = false;\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(\"paused\") && !this.paused) {\n      // When unpaused, immediately recalculate scale\n      this.updateScale();\n    }\n  }\n\n  private containerResizeObserver?: ResizeObserver;\n  private contentResizeObserver?: ResizeObserver;\n  private childMutationObserver?: MutationObserver;\n  private observedContentChild: HTMLElement | null = null;\n  private hasWarnedZeroDimensions = false;\n\n  get contentChild() {\n    if (!this.children.length) return null;\n\n    const isNonContentElement = (element: Element): boolean => {\n      const tagName = element.tagName.toLowerCase();\n      const nonContentTags = [\n        \"style\",\n        \"script\",\n        \"meta\",\n        \"link\",\n        \"title\",\n        \"noscript\",\n      ];\n      if (nonContentTags.includes(tagName)) return true;\n\n      try {\n        const display = window.getComputedStyle(element).display;\n        return display === \"none\" || display === \"contents\";\n      } catch {\n        return false;\n      }\n    };\n\n    const findAllContentElements = (element: Element): HTMLElement[] => {\n      const results: HTMLElement[] = [];\n\n      if (element instanceof HTMLSlotElement) {\n        const assigned = element.assignedElements()[0];\n        if (assigned) {\n          results.push(...findAllContentElements(assigned));\n        }\n        return results;\n      }\n\n      if (!isNonContentElement(element)) {\n        results.push(element as HTMLElement);\n      }\n\n      const children = Array.from(element.children);\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i];\n        if (child) {\n          results.push(...findAllContentElements(child));\n        }\n      }\n\n      return results;\n    };\n\n    const children = Array.from(this.children);\n    const allContentElements: HTMLElement[] = [];\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i];\n      if (child) {\n        allContentElements.push(...findAllContentElements(child));\n      }\n    }\n\n    if (allContentElements.length === 0) return null;\n\n    return allContentElements[0] ?? null;\n  }\n\n  get scaleInfo() {\n    if (!this.contentChild) {\n      return {\n        scale: 1,\n        containerWidth: 0,\n        containerHeight: 0,\n        contentWidth: 0,\n        contentHeight: 0,\n      };\n    }\n\n    const containerWidth = this.clientWidth;\n    const containerHeight = this.clientHeight;\n\n    // Try to get natural dimensions from media elements (ef-video, ef-image)\n    let contentWidth = 0;\n    let contentHeight = 0;\n\n    if (typeof (this.contentChild as any).getNaturalDimensions === \"function\") {\n      const naturalDimensions = (\n        this.contentChild as any\n      ).getNaturalDimensions() as { width: number; height: number } | null;\n      if (\n        naturalDimensions &&\n        naturalDimensions.width > 0 &&\n        naturalDimensions.height > 0\n      ) {\n        contentWidth = naturalDimensions.width;\n        contentHeight = naturalDimensions.height;\n\n        // ESSENTIAL: For ef-video, set canvas to explicit pixel dimensions to break 100% circular dependency\n        // Canvas default CSS is width:100%, height:100% which would make ef-video collapse to 0x0\n        // when ef-video is set to width:auto, height:auto by ElementRenderer\n        if (this.contentChild.tagName === \"EF-VIDEO\") {\n          const canvas = (this.contentChild as any).canvasElement;\n          if (canvas) {\n            canvas.style.setProperty(\"width\", `${contentWidth}px`, \"important\");\n            canvas.style.setProperty(\n              \"height\",\n              `${contentHeight}px`,\n              \"important\",\n            );\n          }\n        }\n      } else {\n        // Natural dimensions not available yet, fall back to client dimensions\n        contentWidth = this.contentChild.clientWidth;\n        contentHeight = this.contentChild.clientHeight;\n      }\n    } else {\n      // For other elements, use clientWidth/Height\n      contentWidth = this.contentChild.clientWidth;\n      contentHeight = this.contentChild.clientHeight;\n    }\n\n    if (contentWidth === 0 || contentHeight === 0) {\n      return {\n        scale: 1,\n        containerWidth,\n        containerHeight,\n        contentWidth: 0,\n        contentHeight: 0,\n      };\n    }\n\n    const result = computeFitScale({\n      containerWidth,\n      containerHeight,\n      contentWidth,\n      contentHeight,\n    });\n\n    return {\n      scale: result?.scale ?? 1,\n      containerWidth,\n      containerHeight,\n      contentWidth,\n      contentHeight,\n    };\n  }\n\n  scaleLastSetOn: HTMLElement | null = null;\n\n  private updateScale = (): void => {\n    if (!this.isConnected || this.paused) return;\n\n    const { containerWidth, containerHeight, contentWidth, contentHeight } =\n      this.scaleInfo;\n\n    // Warn on zero container dimensions\n    if (containerWidth === 0 || containerHeight === 0) {\n      if (!this.hasWarnedZeroDimensions) {\n        this.hasWarnedZeroDimensions = true;\n        console.warn(\n          `[ef-fit-scale] Container has zero dimensions (${containerWidth}×${containerHeight}). ` +\n            `Content will be invisible. Ensure all ancestors have resolved height.`,\n          this,\n        );\n      }\n      return;\n    }\n\n    // Reset warning flag when dimensions become valid\n    this.hasWarnedZeroDimensions = false;\n\n    if (this.contentChild && contentWidth > 0 && contentHeight > 0) {\n      const result = computeFitScale({\n        containerWidth,\n        containerHeight,\n        contentWidth,\n        contentHeight,\n      });\n\n      if (!result) return;\n\n      // In the rare event that the content child is changed, we need to remove the scale\n      // because we don't want to have a scale on the old content child that is somewhere else in the DOM\n      if (this.scaleLastSetOn !== this.contentChild) {\n        this.removeScale();\n      }\n      // Use toFixed to avoid floating point precision issues\n      // this will update every frame with sub-pixel changes if we don't pin it down\n      Object.assign(this.contentChild.style, {\n        width: `${contentWidth}px`,\n        height: `${contentHeight}px`,\n        transform: `translate(${result.translateX.toFixed(4)}px, ${result.translateY.toFixed(4)}px) scale(${result.scale.toFixed(4)})`,\n        transformOrigin: \"top left\",\n      });\n      this.scaleLastSetOn = this.contentChild;\n    }\n  };\n\n  private observeContentChild(): void {\n    const child = this.contentChild;\n    if (child === this.observedContentChild) return;\n\n    // Stop observing old child\n    this.contentResizeObserver?.disconnect();\n\n    // Observe new child\n    if (child) {\n      this.contentResizeObserver = new ResizeObserver(() => {\n        this.updateScale();\n      });\n      this.contentResizeObserver.observe(child);\n    }\n    this.observedContentChild = child;\n  }\n\n  removeScale = () => {\n    if (this.scaleLastSetOn) {\n      Object.assign(this.scaleLastSetOn.style, {\n        width: \"\",\n        height: \"\",\n        transform: \"\",\n        transformOrigin: \"\",\n      });\n      this.scaleLastSetOn = null;\n    }\n  };\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.hasWarnedZeroDimensions = false;\n\n    // Observe self for container size changes\n    this.containerResizeObserver = new ResizeObserver(() => {\n      this.updateScale();\n    });\n    this.containerResizeObserver.observe(this);\n\n    // Observe child list for content child changes\n    this.childMutationObserver = new MutationObserver(() => {\n      this.observeContentChild();\n      this.updateScale();\n    });\n    this.childMutationObserver.observe(this, { childList: true });\n\n    // Initial content child observation\n    this.observeContentChild();\n\n    // Initial scale calculation (deferred to allow layout to settle)\n    requestAnimationFrame(() => this.updateScale());\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeScale();\n    this.containerResizeObserver?.disconnect();\n    this.contentResizeObserver?.disconnect();\n    this.childMutationObserver?.disconnect();\n    this.observedContentChild = null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-fit-scale\": EFFitScale;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,SAAgB,gBAAgB,OAAuC;CACrE,MAAM,EAAE,gBAAgB,iBAAiB,cAAc,kBACrD;AAEF,KACE,kBAAkB,KAClB,mBAAmB,KACnB,gBAAgB,KAChB,iBAAiB,EAEjB,QAAO;CAMT,MAAM,QAHiB,iBAAiB,kBACnB,eAAe,gBAI9B,kBAAkB,gBAClB,iBAAiB;CAEvB,MAAM,cAAc,eAAe;CACnC,MAAM,eAAe,gBAAgB;AAIrC,QAAO;EAAE;EAAO,aAHI,iBAAiB,eAAe;EAGxB,aAFR,kBAAkB,gBAAgB;EAEd;;AAMnC,uBAAMA,qBAAmB,WAAW;;;sBAC1B,WAA2B;oBAC7B,WAA4B;kBAkB9B,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,UAAU,GAAG,GAAG;gBAG7C;8BAY0C;iCACjB;wBAkJG;2BAEH;AAChC,OAAI,CAAC,KAAK,eAAe,KAAK,OAAQ;GAEtC,MAAM,EAAE,gBAAgB,iBAAiB,cAAc,kBACrD,KAAK;AAGP,OAAI,mBAAmB,KAAK,oBAAoB,GAAG;AACjD,QAAI,CAAC,KAAK,yBAAyB;AACjC,UAAK,0BAA0B;AAC/B,aAAQ,KACN,iDAAiD,eAAe,GAAG,gBAAgB,2EAEnF,KACD;;AAEH;;AAIF,QAAK,0BAA0B;AAE/B,OAAI,KAAK,gBAAgB,eAAe,KAAK,gBAAgB,GAAG;IAC9D,MAAM,SAAS,gBAAgB;KAC7B;KACA;KACA;KACA;KACD,CAAC;AAEF,QAAI,CAAC,OAAQ;AAIb,QAAI,KAAK,mBAAmB,KAAK,aAC/B,MAAK,aAAa;AAIpB,WAAO,OAAO,KAAK,aAAa,OAAO;KACrC,OAAO,GAAG,aAAa;KACvB,QAAQ,GAAG,cAAc;KACzB,WAAW,aAAa,OAAO,WAAW,QAAQ,EAAE,CAAC,MAAM,OAAO,WAAW,QAAQ,EAAE,CAAC,YAAY,OAAO,MAAM,QAAQ,EAAE,CAAC;KAC5H,iBAAiB;KAClB,CAAC;AACF,SAAK,iBAAiB,KAAK;;;2BAqBX;AAClB,OAAI,KAAK,gBAAgB;AACvB,WAAO,OAAO,KAAK,eAAe,OAAO;KACvC,OAAO;KACP,QAAQ;KACR,WAAW;KACX,iBAAiB;KAClB,CAAC;AACF,SAAK,iBAAiB;;;;CA9P1B,mBAAmB;AACjB,SAAO,OAAO,KAAK,OAAO;GACxB,SAAS;GACT,OAAO;GACP,QAAQ;GACR,qBAAqB;GACrB,kBAAkB;GAClB,UAAU;GACV,WAAW;GACX,SAAS;GACT,UAAU;GACX,CAAC;AACF,OAAK,KAAK,GAAG,KAAK;AAClB,SAAO;;CAQT,QAAQ,mBAA+C;AACrD,MAAI,kBAAkB,IAAI,SAAS,IAAI,CAAC,KAAK,OAE3C,MAAK,aAAa;;CAUtB,IAAI,eAAe;AACjB,MAAI,CAAC,KAAK,SAAS,OAAQ,QAAO;EAElC,MAAM,uBAAuB,YAA8B;GACzD,MAAM,UAAU,QAAQ,QAAQ,aAAa;AAS7C,OARuB;IACrB;IACA;IACA;IACA;IACA;IACA;IACD,CACkB,SAAS,QAAQ,CAAE,QAAO;AAE7C,OAAI;IACF,MAAM,UAAU,OAAO,iBAAiB,QAAQ,CAAC;AACjD,WAAO,YAAY,UAAU,YAAY;WACnC;AACN,WAAO;;;EAIX,MAAM,0BAA0B,YAAoC;GAClE,MAAMC,UAAyB,EAAE;AAEjC,OAAI,mBAAmB,iBAAiB;IACtC,MAAM,WAAW,QAAQ,kBAAkB,CAAC;AAC5C,QAAI,SACF,SAAQ,KAAK,GAAG,uBAAuB,SAAS,CAAC;AAEnD,WAAO;;AAGT,OAAI,CAAC,oBAAoB,QAAQ,CAC/B,SAAQ,KAAK,QAAuB;GAGtC,MAAMC,aAAW,MAAM,KAAK,QAAQ,SAAS;AAC7C,QAAK,IAAI,IAAI,GAAG,IAAIA,WAAS,QAAQ,KAAK;IACxC,MAAM,QAAQA,WAAS;AACvB,QAAI,MACF,SAAQ,KAAK,GAAG,uBAAuB,MAAM,CAAC;;AAIlD,UAAO;;EAGT,MAAM,WAAW,MAAM,KAAK,KAAK,SAAS;EAC1C,MAAMC,qBAAoC,EAAE;AAC5C,OAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;GACxC,MAAM,QAAQ,SAAS;AACvB,OAAI,MACF,oBAAmB,KAAK,GAAG,uBAAuB,MAAM,CAAC;;AAI7D,MAAI,mBAAmB,WAAW,EAAG,QAAO;AAE5C,SAAO,mBAAmB,MAAM;;CAGlC,IAAI,YAAY;AACd,MAAI,CAAC,KAAK,aACR,QAAO;GACL,OAAO;GACP,gBAAgB;GAChB,iBAAiB;GACjB,cAAc;GACd,eAAe;GAChB;EAGH,MAAM,iBAAiB,KAAK;EAC5B,MAAM,kBAAkB,KAAK;EAG7B,IAAI,eAAe;EACnB,IAAI,gBAAgB;AAEpB,MAAI,OAAQ,KAAK,aAAqB,yBAAyB,YAAY;GACzE,MAAM,oBACJ,KAAK,aACL,sBAAsB;AACxB,OACE,qBACA,kBAAkB,QAAQ,KAC1B,kBAAkB,SAAS,GAC3B;AACA,mBAAe,kBAAkB;AACjC,oBAAgB,kBAAkB;AAKlC,QAAI,KAAK,aAAa,YAAY,YAAY;KAC5C,MAAM,SAAU,KAAK,aAAqB;AAC1C,SAAI,QAAQ;AACV,aAAO,MAAM,YAAY,SAAS,GAAG,aAAa,KAAK,YAAY;AACnE,aAAO,MAAM,YACX,UACA,GAAG,cAAc,KACjB,YACD;;;UAGA;AAEL,mBAAe,KAAK,aAAa;AACjC,oBAAgB,KAAK,aAAa;;SAE/B;AAEL,kBAAe,KAAK,aAAa;AACjC,mBAAgB,KAAK,aAAa;;AAGpC,MAAI,iBAAiB,KAAK,kBAAkB,EAC1C,QAAO;GACL,OAAO;GACP;GACA;GACA,cAAc;GACd,eAAe;GAChB;AAUH,SAAO;GACL,OARa,gBAAgB;IAC7B;IACA;IACA;IACA;IACD,CAAC,EAGe,SAAS;GACxB;GACA;GACA;GACA;GACD;;CAsDH,AAAQ,sBAA4B;EAClC,MAAM,QAAQ,KAAK;AACnB,MAAI,UAAU,KAAK,qBAAsB;AAGzC,OAAK,uBAAuB,YAAY;AAGxC,MAAI,OAAO;AACT,QAAK,wBAAwB,IAAI,qBAAqB;AACpD,SAAK,aAAa;KAClB;AACF,QAAK,sBAAsB,QAAQ,MAAM;;AAE3C,OAAK,uBAAuB;;CAe9B,oBAA0B;AACxB,QAAM,mBAAmB;AAEzB,OAAK,0BAA0B;AAG/B,OAAK,0BAA0B,IAAI,qBAAqB;AACtD,QAAK,aAAa;IAClB;AACF,OAAK,wBAAwB,QAAQ,KAAK;AAG1C,OAAK,wBAAwB,IAAI,uBAAuB;AACtD,QAAK,qBAAqB;AAC1B,QAAK,aAAa;IAClB;AACF,OAAK,sBAAsB,QAAQ,MAAM,EAAE,WAAW,MAAM,CAAC;AAG7D,OAAK,qBAAqB;AAG1B,8BAA4B,KAAK,aAAa,CAAC;;CAGjD,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,OAAK,aAAa;AAClB,OAAK,yBAAyB,YAAY;AAC1C,OAAK,uBAAuB,YAAY;AACxC,OAAK,uBAAuB,YAAY;AACxC,OAAK,uBAAuB;;;YA/Q7B,SAAS,EAAE,MAAM,SAAS,CAAC;yBAvB7B,cAAc,eAAe"}

package/dist/gui/EFFocusOverlay.d.ts

@@ -1,11 +1,11 @@
-import * as lit23 from "lit";
+import * as lit24 from "lit";
 import { LitElement } from "lit";
 import * as lit_html22 from "lit-html";
 import * as lit_html_directives_ref_js3 from "lit-html/directives/ref.js";
 
 //#region src/gui/EFFocusOverlay.d.ts
 declare class EFFocusOverlay extends LitElement {
-  static styles: lit23.CSSResult;
+  static styles: lit24.CSSResult;
   focusedElement?: HTMLElement | null;
   overlay: lit_html_directives_ref_js3.Ref<HTMLDivElement>;
   private animationFrame?;

package/dist/gui/EFFocusOverlay.js

@@ -36,9 +36,9 @@ let EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
     }
     .overlay {
       position: fixed;
-      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
-      background: var(--ef-focus-overlay-background, rgb(59, 130, 246));
-      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
+      outline: 2px solid var(--ef-focus-overlay-color, var(--ef-color-primary));
+      background: var(--ef-focus-overlay-background, var(--ef-color-primary));
+      outline: 2px solid var(--ef-focus-overlay-color, var(--ef-color-primary));
       mix-blend-mode: multiply;
       opacity: 0.4;
       display: none;

package/dist/gui/EFFocusOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFFocusOverlay.js","names":["EFFocusOverlay"],"sources":["../../src/gui/EFFocusOverlay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\n\n@customElement(\"ef-focus-overlay\")\nexport class EFFocusOverlay extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n    .overlay {\n      position: fixed;\n      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));\n      background: var(--ef-focus-overlay-background, rgb(59, 130, 246));\n      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));\n      mix-blend-mode: multiply;\n      opacity: 0.4;\n      display: none;\n    }\n  `;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  overlay = createRef<HTMLDivElement>();\n\n  private animationFrame?: number;\n\n  drawOverlay = () => {\n    const overlay = this.overlay.value;\n    if (overlay) {\n      if (this.focusedElement) {\n        overlay.style.display = \"block\";\n        const rect = this.focusedElement.getBoundingClientRect();\n        Object.assign(overlay.style, {\n          top: `${rect.top}px`,\n          left: `${rect.left}px`,\n          width: `${rect.width}px`,\n          height: `${rect.height}px`,\n        });\n        this.animationFrame = requestAnimationFrame(this.drawOverlay);\n      } else {\n        overlay.style.display = \"none\";\n      }\n    }\n  };\n\n  render() {\n    return html`<div ${ref(this.overlay)} class=\"overlay\"></div>`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.drawOverlay();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.animationFrame) {\n      cancelAnimationFrame(this.animationFrame);\n    }\n  }\n\n  protected updated(): void {\n    this.drawOverlay();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-focus-overlay\": EFFocusOverlay;\n  }\n}\n"],"mappings":";;;;;;;;AAOO,2BAAMA,yBAAuB,WAAW;;;iBAuBnC,WAA2B;2BAIjB;GAClB,MAAM,UAAU,KAAK,QAAQ;AAC7B,OAAI,QACF,KAAI,KAAK,gBAAgB;AACvB,YAAQ,MAAM,UAAU;IACxB,MAAM,OAAO,KAAK,eAAe,uBAAuB;AACxD,WAAO,OAAO,QAAQ,OAAO;KAC3B,KAAK,GAAG,KAAK,IAAI;KACjB,MAAM,GAAG,KAAK,KAAK;KACnB,OAAO,GAAG,KAAK,MAAM;KACrB,QAAQ,GAAG,KAAK,OAAO;KACxB,CAAC;AACF,SAAK,iBAAiB,sBAAsB,KAAK,YAAY;SAE7D,SAAQ,MAAM,UAAU;;;;gBAxCd,GAAG;;;;;;;;;;;;;;;;;;;CA6CnB,SAAS;AACP,SAAO,IAAI,QAAQ,IAAI,KAAK,QAAQ,CAAC;;CAGvC,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,aAAa;;CAGpB,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,MAAI,KAAK,eACP,sBAAqB,KAAK,eAAe;;CAI7C,AAAU,UAAgB;AACxB,OAAK,aAAa;;;YA3CnB,QAAQ;CAAE,SAAS;CAAuB,WAAW;CAAM,CAAC;6BArB9D,cAAc,mBAAmB"}
+{"version":3,"file":"EFFocusOverlay.js","names":["EFFocusOverlay"],"sources":["../../src/gui/EFFocusOverlay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\n\n@customElement(\"ef-focus-overlay\")\nexport class EFFocusOverlay extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n    .overlay {\n      position: fixed;\n      outline: 2px solid var(--ef-focus-overlay-color, var(--ef-color-primary));\n      background: var(--ef-focus-overlay-background, var(--ef-color-primary));\n      outline: 2px solid var(--ef-focus-overlay-color, var(--ef-color-primary));\n      mix-blend-mode: multiply;\n      opacity: 0.4;\n      display: none;\n    }\n  `;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  overlay = createRef<HTMLDivElement>();\n\n  private animationFrame?: number;\n\n  drawOverlay = () => {\n    const overlay = this.overlay.value;\n    if (overlay) {\n      if (this.focusedElement) {\n        overlay.style.display = \"block\";\n        const rect = this.focusedElement.getBoundingClientRect();\n        Object.assign(overlay.style, {\n          top: `${rect.top}px`,\n          left: `${rect.left}px`,\n          width: `${rect.width}px`,\n          height: `${rect.height}px`,\n        });\n        this.animationFrame = requestAnimationFrame(this.drawOverlay);\n      } else {\n        overlay.style.display = \"none\";\n      }\n    }\n  };\n\n  render() {\n    return html`<div ${ref(this.overlay)} class=\"overlay\"></div>`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.drawOverlay();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.animationFrame) {\n      cancelAnimationFrame(this.animationFrame);\n    }\n  }\n\n  protected updated(): void {\n    this.drawOverlay();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-focus-overlay\": EFFocusOverlay;\n  }\n}\n"],"mappings":";;;;;;;;AAOO,2BAAMA,yBAAuB,WAAW;;;iBAuBnC,WAA2B;2BAIjB;GAClB,MAAM,UAAU,KAAK,QAAQ;AAC7B,OAAI,QACF,KAAI,KAAK,gBAAgB;AACvB,YAAQ,MAAM,UAAU;IACxB,MAAM,OAAO,KAAK,eAAe,uBAAuB;AACxD,WAAO,OAAO,QAAQ,OAAO;KAC3B,KAAK,GAAG,KAAK,IAAI;KACjB,MAAM,GAAG,KAAK,KAAK;KACnB,OAAO,GAAG,KAAK,MAAM;KACrB,QAAQ,GAAG,KAAK,OAAO;KACxB,CAAC;AACF,SAAK,iBAAiB,sBAAsB,KAAK,YAAY;SAE7D,SAAQ,MAAM,UAAU;;;;gBAxCd,GAAG;;;;;;;;;;;;;;;;;;;CA6CnB,SAAS;AACP,SAAO,IAAI,QAAQ,IAAI,KAAK,QAAQ,CAAC;;CAGvC,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,aAAa;;CAGpB,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,MAAI,KAAK,eACP,sBAAqB,KAAK,eAAe;;CAI7C,AAAU,UAAgB;AACxB,OAAK,aAAa;;;YA3CnB,QAAQ;CAAE,SAAS;CAAuB,WAAW;CAAM,CAAC;6BArB9D,cAAc,mBAAmB"}

package/dist/gui/EFOverlayItem.d.ts

@@ -1,6 +1,6 @@
 import * as lit32 from "lit";
 import { LitElement } from "lit";
-import * as lit_html31 from "lit-html";
+import * as lit_html30 from "lit-html";
 
 //#region src/gui/EFOverlayItem.d.ts
 /**
@@ -36,7 +36,7 @@ declare class EFOverlayItem extends LitElement {
   updatePosition(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html31.TemplateResult<1>;
+  render(): lit_html30.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFOverlayLayer.d.ts

@@ -2,7 +2,7 @@ import { PanZoomTransform } from "../elements/EFPanZoom.js";
 import { EFOverlayItem } from "./EFOverlayItem.js";
 import * as lit31 from "lit";
 import { LitElement } from "lit";
-import * as lit_html30 from "lit-html";
+import * as lit_html29 from "lit-html";
 
 //#region src/gui/EFOverlayLayer.d.ts
 
@@ -58,7 +58,7 @@ declare class EFOverlayLayer extends LitElement {
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(): void;
-  render(): lit_html30.TemplateResult<1>;
+  render(): lit_html29.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFPause.d.ts

@@ -1,5 +1,5 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit16 from "lit";
+import * as lit17 from "lit";
 import { LitElement } from "lit";
 import * as lit_html16 from "lit-html";
 
@@ -10,7 +10,7 @@ declare const EFPause_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPause extends EFPause_base {
-  static styles: lit16.CSSResult[];
+  static styles: lit17.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;

package/dist/gui/EFPause.js

@@ -1,6 +1,6 @@
+import { efContext } from "./efContext.js";
 import { playingContext } from "./playingContext.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
-import { efContext } from "./efContext.js";
 import { attachContextRoot } from "../attachContextRoot.js";
 import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";

package/dist/gui/EFPlay.d.ts

@@ -1,5 +1,5 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit15 from "lit";
+import * as lit16 from "lit";
 import { LitElement } from "lit";
 import * as lit_html15 from "lit-html";
 
@@ -10,7 +10,7 @@ declare const EFPlay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPlay extends EFPlay_base {
-  static styles: lit15.CSSResult[];
+  static styles: lit16.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;

package/dist/gui/EFPlay.js

@@ -1,6 +1,6 @@
+import { efContext } from "./efContext.js";
 import { playingContext } from "./playingContext.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
-import { efContext } from "./efContext.js";
 import { attachContextRoot } from "../attachContextRoot.js";
 import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";

package/dist/gui/EFPreview.js

@@ -1,8 +1,8 @@
+import { TWMixin } from "./TWMixin2.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { isEFTemporal } from "../elements/EFTemporal.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { ContextMixin } from "./ContextMixin.js";
-import { TWMixin } from "./TWMixin2.js";
 import { EFTargetable } from "../elements/TargetController.js";
 import { provide } from "@lit/context";
 import { LitElement, css, html } from "lit";

package/dist/gui/EFResizableBox.d.ts

@@ -1,4 +1,4 @@
-import * as lit25 from "lit";
+import * as lit26 from "lit";
 import { LitElement } from "lit";
 import * as lit_html24 from "lit-html";
 
@@ -21,7 +21,7 @@ declare class EFResizableBox extends LitElement {
   private resizeStartCorner;
   private resizeStartSize;
   private resizeStartPosition;
-  static styles: lit25.CSSResult;
+  static styles: lit26.CSSResult;
   private resizeObserver?;
   connectedCallback(): void;
   disconnectedCallback(): void;

package/dist/gui/EFResizableBox.js

@@ -101,17 +101,17 @@ let EFResizableBox = class EFResizableBox$1 extends LitElement {
 		this.styles = css`
     .box {
       position: absolute;
-      border: 2px solid var(--ef-resizable-box-border-color, #3b82f6);
-      background-color: var(--ef-resizable-box-bg-color, rgba(59, 130, 246, 0.2));
+      border: 2px solid var(--ef-resizable-box-border-color, var(--ef-color-primary));
+      background-color: var(--ef-resizable-box-bg-color, color-mix(in srgb, var(--ef-color-primary) 20%, transparent));
       cursor: grab;
     }
     .box.dragging {
-      border-color: var(--ef-resizable-box-dragging-border-color, #2563eb);
-      background-color: var(--ef-resizable-box-dragging-bg-color, rgba(37, 99, 235, 0.3));
+      border-color: var(--ef-resizable-box-dragging-border-color, var(--ef-color-primary));
+      background-color: var(--ef-resizable-box-dragging-bg-color, color-mix(in srgb, var(--ef-color-primary) 30%, transparent));
     }
     .handle {
       position: absolute;
-      background-color: var(--ef-resizable-box-handle-color, #3b82f6);
+      background-color: var(--ef-resizable-box-handle-color, var(--ef-color-primary));
       touch-action: none;
     }
     .handle.nw { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }

package/dist/gui/EFResizableBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFResizableBox.js","names":["EFResizableBox"],"sources":["../../src/gui/EFResizableBox.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { getCornerPoint, getOppositeCorner } from \"./transformUtils.js\";\n\nconst DEFAULT_MIN_SIZE = 10;\n\nexport interface BoxBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ntype ResizeHandle = \"nw\" | \"n\" | \"ne\" | \"e\" | \"se\" | \"s\" | \"sw\" | \"w\";\n\nfunction mapHandleToLegacy(handle: ResizeHandle): string {\n  const map: Record<ResizeHandle, string> = {\n    nw: \"top-left\",\n    n: \"top\",\n    ne: \"top-right\",\n    e: \"right\",\n    se: \"bottom-right\",\n    s: \"bottom\",\n    sw: \"bottom-left\",\n    w: \"left\",\n  };\n  return map[handle];\n}\n\n@customElement(\"ef-resizable-box\")\nexport class EFResizableBox extends LitElement {\n  @property({ type: Object })\n  bounds: BoxBounds = { x: 0, y: 0, width: 100, height: 100 };\n\n  @state()\n  private containerWidth = 0;\n\n  @state()\n  private containerHeight = 0;\n\n  @property({ type: Number })\n  minSize = DEFAULT_MIN_SIZE;\n\n  @state()\n  private isDragging = false;\n\n  @state()\n  private isResizing: ResizeHandle | null = null;\n\n  private dragStart: { x: number; y: number } | null = null;\n  private dragStartPosition: { x: number; y: number } = { x: 0, y: 0 };\n  private resizeStartCorner: { x: number; y: number } | null = null;\n  private resizeStartSize: { width: number; height: number } | null = null;\n  private resizeStartPosition: { x: number; y: number } | null = null;\n\n  static styles = css`\n    .box {\n      position: absolute;\n      border: 2px solid var(--ef-resizable-box-border-color, #3b82f6);\n      background-color: var(--ef-resizable-box-bg-color, rgba(59, 130, 246, 0.2));\n      cursor: grab;\n    }\n    .box.dragging {\n      border-color: var(--ef-resizable-box-dragging-border-color, #2563eb);\n      background-color: var(--ef-resizable-box-dragging-bg-color, rgba(37, 99, 235, 0.3));\n    }\n    .handle {\n      position: absolute;\n      background-color: var(--ef-resizable-box-handle-color, #3b82f6);\n      touch-action: none;\n    }\n    .handle.nw { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }\n    .handle.ne { top: -4px; right: -4px; width: 8px; height: 8px; cursor: nesw-resize; }\n    .handle.sw { bottom: -4px; left: -4px; width: 8px; height: 8px; cursor: nesw-resize; }\n    .handle.se { bottom: -4px; right: -4px; width: 8px; height: 8px; cursor: nwse-resize; }\n    .handle.n { top: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }\n    .handle.e { top: 4px; bottom: 4px; right: -4px; width: 8px; cursor: ew-resize; }\n    .handle.s { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }\n    .handle.w { top: 4px; bottom: 4px; left: -4px; width: 8px; cursor: ew-resize; }\n  `;\n\n  private resizeObserver?: ResizeObserver;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.offsetParent) {\n      this.containerWidth = this.offsetParent.clientWidth;\n      this.containerHeight = this.offsetParent.clientHeight;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.offsetParent) {\n        this.containerWidth = this.offsetParent.clientWidth;\n        this.containerHeight = this.offsetParent.clientHeight;\n      }\n    });\n    if (this.offsetParent) {\n      this.resizeObserver.observe(this.offsetParent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.cleanup();\n  }\n\n  private handlePointerDown = (\n    e: PointerEvent,\n    mode: \"move\" | \"resize\",\n    handle?: ResizeHandle,\n  ) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n    this.isResizing = mode === \"resize\" ? handle || null : null;\n\n    this.dragStart = { x: e.clientX, y: e.clientY };\n    this.dragStartPosition = { x: this.bounds.x, y: this.bounds.y };\n\n    if (mode === \"resize\" && handle) {\n      const oppositeCorner = getOppositeCorner(handle);\n      const rotationRadians = 0;\n      const initialCorner = getCornerPoint(\n        this.bounds.x,\n        this.bounds.y,\n        this.bounds.width,\n        this.bounds.height,\n        rotationRadians,\n        oppositeCorner.x,\n        oppositeCorner.y,\n      );\n      this.resizeStartCorner = initialCorner;\n      this.resizeStartSize = {\n        width: this.bounds.width,\n        height: this.bounds.height,\n      };\n      this.resizeStartPosition = { x: this.bounds.x, y: this.bounds.y };\n    }\n\n    document.addEventListener(\"pointermove\", this.handlePointerMove, {\n      passive: false,\n    });\n    document.addEventListener(\"pointerup\", this.handlePointerUp, {\n      passive: false,\n    });\n  };\n\n  private handlePointerMove = (e: PointerEvent) => {\n    if (!this.isDragging || !this.dragStart) return;\n\n    e.preventDefault();\n\n    const deltaX = e.clientX - this.dragStart.x;\n    const deltaY = e.clientY - this.dragStart.y;\n\n    if (\n      this.isResizing &&\n      this.resizeStartCorner &&\n      this.resizeStartSize &&\n      this.resizeStartPosition\n    ) {\n      const oppositeCorner = getOppositeCorner(this.isResizing);\n      const rotationRadians = 0;\n\n      let newWidth = this.resizeStartSize.width;\n      let newHeight = this.resizeStartSize.height;\n\n      if (this.isResizing.includes(\"e\")) {\n        newWidth = this.resizeStartSize.width + deltaX;\n      } else if (this.isResizing.includes(\"w\")) {\n        newWidth = this.resizeStartSize.width - deltaX;\n      }\n\n      if (this.isResizing.includes(\"s\")) {\n        newHeight = this.resizeStartSize.height + deltaY;\n      } else if (this.isResizing.includes(\"n\")) {\n        newHeight = this.resizeStartSize.height - deltaY;\n      }\n\n      newWidth = Math.max(\n        this.minSize,\n        Math.min(this.containerWidth - this.bounds.x, newWidth),\n      );\n      newHeight = Math.max(\n        this.minSize,\n        Math.min(this.containerHeight - this.bounds.y, newHeight),\n      );\n\n      const newOppositeCorner = getCornerPoint(\n        this.resizeStartPosition.x,\n        this.resizeStartPosition.y,\n        newWidth,\n        newHeight,\n        rotationRadians,\n        oppositeCorner.x,\n        oppositeCorner.y,\n      );\n\n      const offsetX = this.resizeStartCorner.x - newOppositeCorner.x;\n      const offsetY = this.resizeStartCorner.y - newOppositeCorner.y;\n\n      const newX = Math.max(\n        0,\n        Math.min(\n          this.containerWidth - newWidth,\n          this.resizeStartPosition.x + offsetX,\n        ),\n      );\n      const newY = Math.max(\n        0,\n        Math.min(\n          this.containerHeight - newHeight,\n          this.resizeStartPosition.y + offsetY,\n        ),\n      );\n\n      this.bounds = {\n        x: newX,\n        y: newY,\n        width: newWidth,\n        height: newHeight,\n      };\n    } else {\n      const constrainedX = Math.max(\n        0,\n        Math.min(\n          this.containerWidth - this.bounds.width,\n          this.dragStartPosition.x + deltaX,\n        ),\n      );\n      const constrainedY = Math.max(\n        0,\n        Math.min(\n          this.containerHeight - this.bounds.height,\n          this.dragStartPosition.y + deltaY,\n        ),\n      );\n\n      this.bounds = {\n        ...this.bounds,\n        x: constrainedX,\n        y: constrainedY,\n      };\n    }\n\n    this.dispatchBoundsChange();\n  };\n\n  private handlePointerUp = (e: PointerEvent) => {\n    e.preventDefault();\n    this.cleanup();\n  };\n\n  private cleanup() {\n    this.isDragging = false;\n    this.isResizing = null;\n    this.dragStart = null;\n    this.dragStartPosition = { x: 0, y: 0 };\n    this.resizeStartCorner = null;\n    this.resizeStartSize = null;\n    this.resizeStartPosition = null;\n    document.removeEventListener(\"pointermove\", this.handlePointerMove);\n    document.removeEventListener(\"pointerup\", this.handlePointerUp);\n  }\n\n  private dispatchBoundsChange() {\n    this.dispatchEvent(\n      new CustomEvent(\"bounds-change\", {\n        detail: { bounds: this.bounds },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render() {\n    const boxStyles = {\n      left: `${this.bounds.x}px`,\n      top: `${this.bounds.y}px`,\n      width: `${this.bounds.width}px`,\n      height: `${this.bounds.height}px`,\n    };\n\n    const handles: ResizeHandle[] = [\n      \"nw\",\n      \"n\",\n      \"ne\",\n      \"e\",\n      \"se\",\n      \"s\",\n      \"sw\",\n      \"w\",\n    ];\n\n    return html`\n      <div\n        class=\"box ${this.isDragging ? \"dragging\" : \"\"}\"\n        style=${styleMap(boxStyles)}\n        @pointerdown=${(e: PointerEvent) => this.handlePointerDown(e, \"move\")}\n      >\n        ${handles.map(\n          (handle) => html`\n            <div\n              class=\"handle ${handle}\"\n              @pointerdown=${(e: PointerEvent) => {\n                e.stopPropagation();\n                this.handlePointerDown(e, \"resize\", handle);\n              }}\n            ></div>\n          `,\n        )}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFResizableBox.js","names":["EFResizableBox"],"sources":["../../src/gui/EFResizableBox.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { getCornerPoint, getOppositeCorner } from \"./transformUtils.js\";\n\nconst DEFAULT_MIN_SIZE = 10;\n\nexport interface BoxBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ntype ResizeHandle = \"nw\" | \"n\" | \"ne\" | \"e\" | \"se\" | \"s\" | \"sw\" | \"w\";\n\n@customElement(\"ef-resizable-box\")\nexport class EFResizableBox extends LitElement {\n  @property({ type: Object })\n  bounds: BoxBounds = { x: 0, y: 0, width: 100, height: 100 };\n\n  @state()\n  private containerWidth = 0;\n\n  @state()\n  private containerHeight = 0;\n\n  @property({ type: Number })\n  minSize = DEFAULT_MIN_SIZE;\n\n  @state()\n  private isDragging = false;\n\n  @state()\n  private isResizing: ResizeHandle | null = null;\n\n  private dragStart: { x: number; y: number } | null = null;\n  private dragStartPosition: { x: number; y: number } = { x: 0, y: 0 };\n  private resizeStartCorner: { x: number; y: number } | null = null;\n  private resizeStartSize: { width: number; height: number } | null = null;\n  private resizeStartPosition: { x: number; y: number } | null = null;\n\n  static styles = css`\n    .box {\n      position: absolute;\n      border: 2px solid var(--ef-resizable-box-border-color, var(--ef-color-primary));\n      background-color: var(--ef-resizable-box-bg-color, color-mix(in srgb, var(--ef-color-primary) 20%, transparent));\n      cursor: grab;\n    }\n    .box.dragging {\n      border-color: var(--ef-resizable-box-dragging-border-color, var(--ef-color-primary));\n      background-color: var(--ef-resizable-box-dragging-bg-color, color-mix(in srgb, var(--ef-color-primary) 30%, transparent));\n    }\n    .handle {\n      position: absolute;\n      background-color: var(--ef-resizable-box-handle-color, var(--ef-color-primary));\n      touch-action: none;\n    }\n    .handle.nw { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }\n    .handle.ne { top: -4px; right: -4px; width: 8px; height: 8px; cursor: nesw-resize; }\n    .handle.sw { bottom: -4px; left: -4px; width: 8px; height: 8px; cursor: nesw-resize; }\n    .handle.se { bottom: -4px; right: -4px; width: 8px; height: 8px; cursor: nwse-resize; }\n    .handle.n { top: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }\n    .handle.e { top: 4px; bottom: 4px; right: -4px; width: 8px; cursor: ew-resize; }\n    .handle.s { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }\n    .handle.w { top: 4px; bottom: 4px; left: -4px; width: 8px; cursor: ew-resize; }\n  `;\n\n  private resizeObserver?: ResizeObserver;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.offsetParent) {\n      this.containerWidth = this.offsetParent.clientWidth;\n      this.containerHeight = this.offsetParent.clientHeight;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.offsetParent) {\n        this.containerWidth = this.offsetParent.clientWidth;\n        this.containerHeight = this.offsetParent.clientHeight;\n      }\n    });\n    if (this.offsetParent) {\n      this.resizeObserver.observe(this.offsetParent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.cleanup();\n  }\n\n  private handlePointerDown = (\n    e: PointerEvent,\n    mode: \"move\" | \"resize\",\n    handle?: ResizeHandle,\n  ) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n    this.isResizing = mode === \"resize\" ? handle || null : null;\n\n    this.dragStart = { x: e.clientX, y: e.clientY };\n    this.dragStartPosition = { x: this.bounds.x, y: this.bounds.y };\n\n    if (mode === \"resize\" && handle) {\n      const oppositeCorner = getOppositeCorner(handle);\n      const rotationRadians = 0;\n      const initialCorner = getCornerPoint(\n        this.bounds.x,\n        this.bounds.y,\n        this.bounds.width,\n        this.bounds.height,\n        rotationRadians,\n        oppositeCorner.x,\n        oppositeCorner.y,\n      );\n      this.resizeStartCorner = initialCorner;\n      this.resizeStartSize = {\n        width: this.bounds.width,\n        height: this.bounds.height,\n      };\n      this.resizeStartPosition = { x: this.bounds.x, y: this.bounds.y };\n    }\n\n    document.addEventListener(\"pointermove\", this.handlePointerMove, {\n      passive: false,\n    });\n    document.addEventListener(\"pointerup\", this.handlePointerUp, {\n      passive: false,\n    });\n  };\n\n  private handlePointerMove = (e: PointerEvent) => {\n    if (!this.isDragging || !this.dragStart) return;\n\n    e.preventDefault();\n\n    const deltaX = e.clientX - this.dragStart.x;\n    const deltaY = e.clientY - this.dragStart.y;\n\n    if (\n      this.isResizing &&\n      this.resizeStartCorner &&\n      this.resizeStartSize &&\n      this.resizeStartPosition\n    ) {\n      const oppositeCorner = getOppositeCorner(this.isResizing);\n      const rotationRadians = 0;\n\n      let newWidth = this.resizeStartSize.width;\n      let newHeight = this.resizeStartSize.height;\n\n      if (this.isResizing.includes(\"e\")) {\n        newWidth = this.resizeStartSize.width + deltaX;\n      } else if (this.isResizing.includes(\"w\")) {\n        newWidth = this.resizeStartSize.width - deltaX;\n      }\n\n      if (this.isResizing.includes(\"s\")) {\n        newHeight = this.resizeStartSize.height + deltaY;\n      } else if (this.isResizing.includes(\"n\")) {\n        newHeight = this.resizeStartSize.height - deltaY;\n      }\n\n      newWidth = Math.max(\n        this.minSize,\n        Math.min(this.containerWidth - this.bounds.x, newWidth),\n      );\n      newHeight = Math.max(\n        this.minSize,\n        Math.min(this.containerHeight - this.bounds.y, newHeight),\n      );\n\n      const newOppositeCorner = getCornerPoint(\n        this.resizeStartPosition.x,\n        this.resizeStartPosition.y,\n        newWidth,\n        newHeight,\n        rotationRadians,\n        oppositeCorner.x,\n        oppositeCorner.y,\n      );\n\n      const offsetX = this.resizeStartCorner.x - newOppositeCorner.x;\n      const offsetY = this.resizeStartCorner.y - newOppositeCorner.y;\n\n      const newX = Math.max(\n        0,\n        Math.min(\n          this.containerWidth - newWidth,\n          this.resizeStartPosition.x + offsetX,\n        ),\n      );\n      const newY = Math.max(\n        0,\n        Math.min(\n          this.containerHeight - newHeight,\n          this.resizeStartPosition.y + offsetY,\n        ),\n      );\n\n      this.bounds = {\n        x: newX,\n        y: newY,\n        width: newWidth,\n        height: newHeight,\n      };\n    } else {\n      const constrainedX = Math.max(\n        0,\n        Math.min(\n          this.containerWidth - this.bounds.width,\n          this.dragStartPosition.x + deltaX,\n        ),\n      );\n      const constrainedY = Math.max(\n        0,\n        Math.min(\n          this.containerHeight - this.bounds.height,\n          this.dragStartPosition.y + deltaY,\n        ),\n      );\n\n      this.bounds = {\n        ...this.bounds,\n        x: constrainedX,\n        y: constrainedY,\n      };\n    }\n\n    this.dispatchBoundsChange();\n  };\n\n  private handlePointerUp = (e: PointerEvent) => {\n    e.preventDefault();\n    this.cleanup();\n  };\n\n  private cleanup() {\n    this.isDragging = false;\n    this.isResizing = null;\n    this.dragStart = null;\n    this.dragStartPosition = { x: 0, y: 0 };\n    this.resizeStartCorner = null;\n    this.resizeStartSize = null;\n    this.resizeStartPosition = null;\n    document.removeEventListener(\"pointermove\", this.handlePointerMove);\n    document.removeEventListener(\"pointerup\", this.handlePointerUp);\n  }\n\n  private dispatchBoundsChange() {\n    this.dispatchEvent(\n      new CustomEvent(\"bounds-change\", {\n        detail: { bounds: this.bounds },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render() {\n    const boxStyles = {\n      left: `${this.bounds.x}px`,\n      top: `${this.bounds.y}px`,\n      width: `${this.bounds.width}px`,\n      height: `${this.bounds.height}px`,\n    };\n\n    const handles: ResizeHandle[] = [\n      \"nw\",\n      \"n\",\n      \"ne\",\n      \"e\",\n      \"se\",\n      \"s\",\n      \"sw\",\n      \"w\",\n    ];\n\n    return html`\n      <div\n        class=\"box ${this.isDragging ? \"dragging\" : \"\"}\"\n        style=${styleMap(boxStyles)}\n        @pointerdown=${(e: PointerEvent) => this.handlePointerDown(e, \"move\")}\n      >\n        ${handles.map(\n          (handle) => html`\n            <div\n              class=\"handle ${handle}\"\n              @pointerdown=${(e: PointerEvent) => {\n                e.stopPropagation();\n                this.handlePointerDown(e, \"resize\", handle);\n              }}\n            ></div>\n          `,\n        )}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/EFScrubber.d.ts

@@ -1,5 +1,5 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit18 from "lit";
+import * as lit19 from "lit";
 import { LitElement } from "lit";
 import * as lit_html18 from "lit-html";
 
@@ -10,7 +10,7 @@ declare const EFScrubber_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFScrubber extends EFScrubber_base {
-  static styles: lit18.CSSResult[];
+  static styles: lit19.CSSResult[];
   playing: boolean;
   contextCurrentTimeMs: number;
   contextDurationMs: number;

package/dist/gui/EFScrubber.js

@@ -1,8 +1,8 @@
+import { efContext } from "./efContext.js";
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
 import { playingContext } from "./playingContext.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
-import { efContext } from "./efContext.js";
 import { quantizeToFrameTimeMs } from "./EFTimelineRuler.js";
 import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
@@ -12,12 +12,12 @@ import { createRef, ref } from "lit/directives/ref.js";
 
 //#region src/gui/EFScrubber.ts
 const BASE_PIXELS_PER_SECOND = 100;
-function timeToPixels(timeMs, durationMs, containerWidth, zoomScale) {
+function timeToPixels(timeMs, durationMs, _containerWidth, zoomScale) {
 	if (durationMs <= 0) return 0;
 	const pixelsPerSecond = BASE_PIXELS_PER_SECOND * zoomScale;
 	return timeMs / 1e3 * pixelsPerSecond;
 }
-function pixelsToTime(pixels, durationMs, containerWidth, zoomScale) {
+function pixelsToTime(pixels, durationMs, _containerWidth, zoomScale) {
 	if (durationMs <= 0) return 0;
 	return pixels / (BASE_PIXELS_PER_SECOND * zoomScale) * 1e3;
 }
@@ -78,8 +78,8 @@ let EFScrubber = class EFScrubber$1 extends TargetOrContextMixin(LitElement, efC
 		this.styles = [css`
     :host {
       --ef-scrubber-height: 4px;
-      --ef-scrubber-background: rgb(209 213 219);
-      --ef-scrubber-progress-color: rgb(37 99 235);
+      --ef-scrubber-background: var(--ef-color-border, rgba(255, 255, 255, 0.2));
+      --ef-scrubber-progress-color: var(--ef-color-primary, #fff);
       --ef-scrubber-handle-size: 12px;
       width: 100%;
       display: flex;
@@ -87,11 +87,6 @@ let EFScrubber = class EFScrubber$1 extends TargetOrContextMixin(LitElement, efC
       justify-content: center;
     }
     
-    :host(.dark), :host-context(.dark) {
-      --ef-scrubber-background: rgb(75 85 99);
-      --ef-scrubber-progress-color: rgb(96 165 250);
-    }
-    
     :host([orientation="vertical"]) {
       width: 100%;
       height: 100%;
@@ -175,7 +170,7 @@ let EFScrubber = class EFScrubber$1 extends TargetOrContextMixin(LitElement, efC
       top: 0;
       bottom: 0;
       width: 2px;
-      background: rgba(37, 99, 235, 0.2);
+      background: color-mix(in srgb, var(--ef-color-primary) 20%, transparent);
       pointer-events: none;
       z-index: 20;
     }
@@ -303,8 +298,8 @@ let EFScrubber = class EFScrubber$1 extends TargetOrContextMixin(LitElement, efC
           @pointerdown=${this.handlePointerDown}
           @contextmenu=${this.boundHandleContextMenu}
         >
-          <div class="progress" style="width: ${displayProgress * 100}%"></div>
-          <div class="handle" style="left: ${displayProgress * 100}%"></div>
+          <div part="progress" class="progress" style="width: ${displayProgress * 100}%"></div>
+          <div part="handle" class="handle" style="left: ${displayProgress * 100}%"></div>
         </div>
       `;
 		}