@editframe/elements 0.34.7-beta → 0.34.9-beta

package/dist/gui/EFToggleLoop.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit19 from "lit";
+import * as lit17 from "lit";
 import { LitElement } from "lit";
-import * as lit_html19 from "lit-html";
+import * as lit_html17 from "lit-html";
 
 //#region src/gui/EFToggleLoop.d.ts
 declare const EFToggleLoop_base: (new (...args: any[]) => {
@@ -10,9 +10,9 @@ declare const EFToggleLoop_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFToggleLoop extends EFToggleLoop_base {
-  static styles: lit19.CSSResult[];
+  static styles: lit17.CSSResult[];
   get context(): ControllableInterface | null;
-  render(): lit_html19.TemplateResult<1>;
+  render(): lit_html17.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFTogglePlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit16 from "lit";
+import * as lit14 from "lit";
 import { LitElement } from "lit";
-import * as lit_html16 from "lit-html";
+import * as lit_html14 from "lit-html";
 
 //#region src/gui/EFTogglePlay.d.ts
 declare const EFTogglePlay_base: (new (...args: any[]) => {
@@ -10,12 +10,12 @@ declare const EFTogglePlay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFTogglePlay extends EFTogglePlay_base {
-  static styles: lit16.CSSResult[];
+  static styles: lit14.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html16.TemplateResult<1>;
+  render(): lit_html14.TemplateResult<1>;
   togglePlay: () => void;
   private getPlaybackController;
 }

package/dist/gui/EFTransformHandles.d.ts

@@ -1,7 +1,7 @@
 import { PanZoomTransform } from "../elements/EFPanZoom.js";
-import * as lit26 from "lit";
+import * as lit24 from "lit";
 import { LitElement } from "lit";
-import * as lit_html25 from "lit-html";
+import * as lit_html23 from "lit-html";
 
 //#region src/gui/EFTransformHandles.d.ts
 interface TransformBounds {
@@ -49,7 +49,7 @@ declare class EFTransformHandles extends LitElement {
    * Note: Not a @state() property to avoid re-renders during interaction.
    */
   private initialBounds;
-  static styles: lit26.CSSResult;
+  static styles: lit24.CSSResult;
   private resizeObserver?;
   /**
    * Single source of truth for zoom scale.
@@ -79,7 +79,7 @@ declare class EFTransformHandles extends LitElement {
   private handleMouseMove;
   private handleMouseUp;
   private cleanup;
-  render(): lit_html25.TemplateResult<1>;
+  render(): lit_html23.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFWorkbench.d.ts

@@ -1,15 +1,15 @@
 import { ContextMixinInterface } from "./ContextMixin.js";
 import { RenderToVideoOptions } from "../preview/renderTimegroupToVideo.js";
 import "./EFFitScale.js";
-import * as lit6 from "lit";
+import * as lit8 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html6 from "lit-html";
-import * as lit_html_directives_ref_js1 from "lit-html/directives/ref.js";
+import * as lit_html8 from "lit-html";
+import * as lit_html_directives_ref_js2 from "lit-html/directives/ref.js";
 
 //#region src/gui/EFWorkbench.d.ts
 declare const EFWorkbench_base: (new (...args: any[]) => ContextMixinInterface) & typeof LitElement;
 declare class EFWorkbench extends EFWorkbench_base {
-  static styles: lit6.CSSResult[];
+  static styles: lit8.CSSResult[];
   rendering: boolean;
   private panZoomTransform;
   private isExporting;
@@ -61,7 +61,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   private canvasPreviewResult;
   private canvasAnimationFrame;
   private boundHandleTransformChanged;
-  focusOverlay: lit_html_directives_ref_js1.Ref<HTMLDivElement>;
+  focusOverlay: lit_html_directives_ref_js2.Ref<HTMLDivElement>;
   handleStageWheel(event: WheelEvent): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -194,7 +194,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
   drawOverlays: () => void;
   private renderPlaybackStats;
-  render(): lit_html6.TemplateResult<1>;
+  render(): lit_html8.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/hierarchy/EFHierarchy.d.ts

@@ -1,12 +1,12 @@
 import { SelectionContext } from "../../canvas/selection/selectionContext.js";
-import * as lit5 from "lit";
+import * as lit10 from "lit";
 import { LitElement, PropertyValues } from "lit";
-import * as lit_html4 from "lit-html";
+import * as lit_html11 from "lit-html";
 
 //#region src/gui/hierarchy/EFHierarchy.d.ts
 declare const EFHierarchy_base: typeof LitElement;
 declare class EFHierarchy extends EFHierarchy_base {
-  static styles: lit5.CSSResult[];
+  static styles: lit10.CSSResult[];
   target: string;
   header: string;
   showHeader: boolean;
@@ -53,7 +53,7 @@ declare class EFHierarchy extends EFHierarchy_base {
   private autoSelectFirstRootTimegroup;
   private setupSelectionListener;
   private removeSelectionListener;
-  render(): lit_html4.TemplateResult<1>;
+  render(): lit_html11.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/hierarchy/EFHierarchyItem.d.ts

@@ -4,13 +4,13 @@ import { EFAudio } from "../../elements/EFAudio.js";
 import { EFTimegroup } from "../../elements/EFTimegroup.js";
 import { EFImage } from "../../elements/EFImage.js";
 import { HierarchyContext } from "./hierarchyContext.js";
-import * as lit13 from "lit";
+import * as lit11 from "lit";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 
 //#region src/gui/hierarchy/EFHierarchyItem.d.ts
 declare const EFHierarchyItem_base: typeof LitElement;
 declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> extends EFHierarchyItem_base {
-  static styles: lit13.CSSResult[];
+  static styles: lit11.CSSResult[];
   hierarchyContext?: HierarchyContext;
   canvasSelectionContext?: SelectionContext;
   element: ElementType;

package/dist/gui/tree/EFTree.d.ts

@@ -1,8 +1,8 @@
 import { TreeItem } from "./treeContext.js";
 import "./EFTreeItem.js";
-import * as lit14 from "lit";
+import * as lit12 from "lit";
 import { LitElement, PropertyValues } from "lit";
-import * as lit_html14 from "lit-html";
+import * as lit_html12 from "lit-html";
 
 //#region src/gui/tree/EFTree.d.ts
 
@@ -29,7 +29,7 @@ import * as lit_html14 from "lit-html";
  * ```
  */
 declare class EFTree extends LitElement {
-  static styles: lit14.CSSResult;
+  static styles: lit12.CSSResult;
   /** Tree items to display */
   items: TreeItem[];
   /** Optional header text */
@@ -48,7 +48,7 @@ declare class EFTree extends LitElement {
   protected willUpdate(changedProperties: PropertyValues): void;
   protected updated(changedProperties: PropertyValues): void;
   connectedCallback(): void;
-  render(): lit_html14.TemplateResult<1>;
+  render(): lit_html12.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/tree/EFTreeItem.d.ts

@@ -1,7 +1,7 @@
 import { TreeContext, TreeItem } from "./treeContext.js";
-import * as lit15 from "lit";
+import * as lit13 from "lit";
 import { LitElement, nothing } from "lit";
-import * as lit_html15 from "lit-html";
+import * as lit_html13 from "lit-html";
 
 //#region src/gui/tree/EFTreeItem.d.ts
 
@@ -17,7 +17,7 @@ import * as lit_html15 from "lit-html";
  * @fires tree-item-click - When item is clicked (for selection)
  */
 declare class EFTreeItem extends LitElement {
-  static styles: lit15.CSSResult;
+  static styles: lit13.CSSResult;
   treeContext?: TreeContext;
   item: TreeItem;
   private localExpanded;
@@ -26,7 +26,7 @@ declare class EFTreeItem extends LitElement {
   get hasChildren(): boolean;
   private handleClick;
   private handleExpandClick;
-  render(): lit_html15.TemplateResult<1> | typeof nothing;
+  render(): lit_html13.TemplateResult<1> | typeof nothing;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/preview/renderTimegroupPreview.js

@@ -193,27 +193,130 @@ function restoreHiddenNodes(removed) {
 	}
 }
 /**
-* Helper to copy styles from host and content elements to a canvas clone.
-* Reduces code duplication for shadow canvas and shadow img cases.
+* Unified CSS property sync for all elements (canvas clones and regular elements).
+* Single source of truth using the SYNC_PROPERTIES array.
+* 
+* @param source - Source element to read styles from
+* @param clone - Clone element to write styles to
+* @param contentSource - Optional content element for width/height (canvas clones only)
+*/
+function syncElementStyles(source, clone, contentSource) {
+	const cloneStyle = clone.style;
+	const propLen = SYNC_PROPERTIES.length;
+	const tagName = source.tagName;
+	if (HAS_COMPUTED_STYLE_MAP) {
+		let srcMap;
+		let contentMap;
+		try {
+			srcMap = source.computedStyleMap();
+			if (contentSource) contentMap = contentSource.computedStyleMap();
+		} catch {
+			return;
+		}
+		for (let j = 0; j < propLen; j++) {
+			const kebab = SYNC_PROPERTIES_KEBAB[j];
+			const camel = SYNC_PROPERTIES[j];
+			const styleMap = contentSource && (camel === "width" || camel === "height") ? contentMap : srcMap;
+			if (!styleMap) continue;
+			const srcVal = styleMap.get(kebab);
+			if (!srcVal) continue;
+			const strVal = srcVal.toString();
+			if (camel === "display") {
+				cloneStyle.display = strVal === "none" && !(tagName && (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT")) ? "block" : strVal;
+				continue;
+			}
+			if (camel === "clipPath") continue;
+			if (isDefaultValue(camel, strVal)) {
+				if (cloneStyle[camel]) cloneStyle[camel] = "";
+				continue;
+			}
+			cloneStyle[camel] = strVal;
+		}
+	} else {
+		let cs;
+		let contentCs;
+		try {
+			cs = getComputedStyle(source);
+			if (contentSource) contentCs = getComputedStyle(contentSource);
+		} catch {
+			return;
+		}
+		const srcStyle = cs;
+		const contentStyle = contentCs;
+		for (const prop of SYNC_PROPERTIES) {
+			const srcVal = contentSource && (prop === "width" || prop === "height") ? contentStyle?.[prop] : srcStyle[prop];
+			if (!srcVal) continue;
+			if (prop === "display") {
+				cloneStyle.display = srcVal === "none" && !(tagName && (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT")) ? "block" : srcVal;
+				continue;
+			}
+			if (prop === "clipPath") continue;
+			if (isDefaultValue(prop, srcVal)) {
+				if (cloneStyle[prop]) cloneStyle[prop] = "";
+				continue;
+			}
+			cloneStyle[prop] = srcVal;
+		}
+	}
+	cloneStyle.animation = "none";
+	cloneStyle.transition = "none";
+}
+/**
+* Refresh canvas pixel content from shadow DOM source.
+* Handles both shadow canvas and shadow img sources.
+*/
+function refreshCanvasPixels(node) {
+	const { source, clone } = node;
+	const canvas = clone;
+	const shadowCanvas = source.shadowRoot?.querySelector("canvas");
+	const shadowImg = source.shadowRoot?.querySelector("img");
+	if (shadowCanvas) {
+		if (canvas.width !== shadowCanvas.width) canvas.width = shadowCanvas.width;
+		if (canvas.height !== shadowCanvas.height) canvas.height = shadowCanvas.height;
+		const ctx = canvas.getContext("2d");
+		if (ctx && shadowCanvas.width > 0 && shadowCanvas.height > 0) try {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			ctx.drawImage(shadowCanvas, 0, 0);
+		} catch (e) {
+			logger.warn("[refreshCanvasPixels] Canvas draw failed:", e);
+		}
+	} else if (shadowImg?.complete && shadowImg.naturalWidth > 0) {
+		if (canvas.width !== shadowImg.naturalWidth) canvas.width = shadowImg.naturalWidth;
+		if (canvas.height !== shadowImg.naturalHeight) canvas.height = shadowImg.naturalHeight;
+		const ctx = canvas.getContext("2d");
+		if (ctx) {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			try {
+				ctx.drawImage(shadowImg, 0, 0);
+			} catch {}
+		}
+	}
+}
+/**
+* Sync text content from light DOM to clone.
 */
-function copyCanvasCloneStyles(clone, hostCs, contentCs) {
-	const s = clone.style;
-	s.position = hostCs.position;
-	s.top = hostCs.top;
-	s.right = hostCs.right;
-	s.bottom = hostCs.bottom;
-	s.left = hostCs.left;
-	s.margin = hostCs.margin;
-	s.zIndex = hostCs.zIndex;
-	s.transform = hostCs.transform;
-	s.transformOrigin = hostCs.transformOrigin;
-	s.opacity = hostCs.opacity;
-	s.visibility = hostCs.visibility;
-	s.width = contentCs.width;
-	s.height = contentCs.height;
-	s.display = "block";
-	s.animation = "none";
-	s.transition = "none";
+function syncTextContent(source, clone) {
+	const srcTextNode = source.childNodes[0];
+	if (srcTextNode?.nodeType === Node.TEXT_NODE) {
+		const srcText = srcTextNode.textContent || "";
+		const cloneTextNode = clone.childNodes[0];
+		if (cloneTextNode?.nodeType === Node.TEXT_NODE) {
+			if (cloneTextNode.textContent !== srcText) cloneTextNode.textContent = srcText;
+		} else if (!clone.childNodes.length) clone.appendChild(document.createTextNode(srcText));
+	}
+}
+/**
+* Sync input element value.
+*/
+function syncInputValue(source, clone) {
+	if (source instanceof HTMLInputElement) {
+		const srcVal = source.value;
+		const cloneInput = clone;
+		if (cloneInput.value !== srcVal) {
+			cloneInput.value = srcVal;
+			cloneInput.setAttribute("value", srcVal);
+		}
+	}
 }
 /**
 * Build clone tree structure with minimal overhead.
@@ -262,7 +365,7 @@ function buildCloneStructure(source, timeMs) {
 					ctx.drawImage(shadowCanvas, 0, 0);
 				} catch {}
 				try {
-					copyCanvasCloneStyles(clone$1, getComputedStyle(srcEl), getComputedStyle(shadowCanvas));
+					syncElementStyles(srcEl, clone$1, shadowCanvas);
 				} catch {}
 				canvasSourceMap.set(clone$1, srcEl);
 				const node$1 = {
@@ -287,7 +390,7 @@ function buildCloneStructure(source, timeMs) {
 					ctx.drawImage(shadowImg, 0, 0);
 				} catch {}
 				try {
-					copyCanvasCloneStyles(clone$1, getComputedStyle(srcEl), getComputedStyle(shadowImg));
+					syncElementStyles(srcEl, clone$1, shadowImg);
 				} catch {}
 				canvasSourceMap.set(clone$1, srcEl);
 				const node$1 = {
@@ -385,142 +488,17 @@ function buildCloneStructure(source, timeMs) {
 }
 /**
 * Sync a single node's styles (extracted for reuse).
+* Now uses unified style syncing with clear separation of concerns:
+* 1. Canvas pixel refresh (if canvas clone)
+* 2. Unified CSS property sync (all elements)
+* 3. Content sync (text, input values)
 */
 function syncNodeStyles(node) {
 	const { source, clone, isCanvasClone } = node;
-	if (isCanvasClone) {
-		const canvas = clone;
-		const shadowCanvas = source.shadowRoot?.querySelector("canvas");
-		const shadowImg = source.shadowRoot?.querySelector("img");
-		if (shadowCanvas) {
-			if (canvas.width !== shadowCanvas.width) canvas.width = shadowCanvas.width;
-			if (canvas.height !== shadowCanvas.height) canvas.height = shadowCanvas.height;
-			const ctx = canvas.getContext("2d");
-			if (ctx && shadowCanvas.width > 0 && shadowCanvas.height > 0) try {
-				ctx.clearRect(0, 0, canvas.width, canvas.height);
-				ctx.drawImage(shadowCanvas, 0, 0);
-			} catch (e) {
-				logger.warn("[syncNodeStyles] Canvas draw failed:", e);
-			}
-			try {
-				const canvasCs = getComputedStyle(shadowCanvas);
-				const hostCs = getComputedStyle(source);
-				const s = canvas.style;
-				s.position = hostCs.position;
-				s.top = hostCs.top;
-				s.left = hostCs.left;
-				s.right = hostCs.right;
-				s.bottom = hostCs.bottom;
-				s.margin = hostCs.margin;
-				s.transform = hostCs.transform;
-				s.transformOrigin = hostCs.transformOrigin;
-				s.opacity = hostCs.opacity;
-				s.visibility = hostCs.visibility;
-				s.zIndex = hostCs.zIndex;
-				s.width = canvasCs.width;
-				s.height = canvasCs.height;
-				s.backfaceVisibility = hostCs.backfaceVisibility;
-				s.transformStyle = hostCs.transformStyle;
-			} catch {}
-		} else if (shadowImg?.complete && shadowImg.naturalWidth > 0) {
-			if (canvas.width !== shadowImg.naturalWidth) canvas.width = shadowImg.naturalWidth;
-			if (canvas.height !== shadowImg.naturalHeight) canvas.height = shadowImg.naturalHeight;
-			const ctx = canvas.getContext("2d");
-			if (ctx) {
-				ctx.clearRect(0, 0, canvas.width, canvas.height);
-				try {
-					ctx.drawImage(shadowImg, 0, 0);
-				} catch {}
-			}
-			try {
-				const imgCs = getComputedStyle(shadowImg);
-				const hostCs = getComputedStyle(source);
-				const s = canvas.style;
-				s.position = hostCs.position;
-				s.top = hostCs.top;
-				s.left = hostCs.left;
-				s.right = hostCs.right;
-				s.bottom = hostCs.bottom;
-				s.margin = hostCs.margin;
-				s.transform = hostCs.transform;
-				s.transformOrigin = hostCs.transformOrigin;
-				s.opacity = hostCs.opacity;
-				s.visibility = hostCs.visibility;
-				s.zIndex = hostCs.zIndex;
-				s.width = imgCs.width;
-				s.height = imgCs.height;
-				s.backfaceVisibility = hostCs.backfaceVisibility;
-				s.transformStyle = hostCs.transformStyle;
-			} catch {}
-		}
-	}
-	const cloneStyle = clone.style;
-	const propLen = SYNC_PROPERTIES.length;
-	const tagName = source.tagName;
-	if (HAS_COMPUTED_STYLE_MAP) {
-		let srcMap;
-		try {
-			srcMap = source.computedStyleMap();
-		} catch {
-			return;
-		}
-		for (let j = 0; j < propLen; j++) {
-			const kebab = SYNC_PROPERTIES_KEBAB[j];
-			const camel = SYNC_PROPERTIES[j];
-			const srcVal = srcMap.get(kebab);
-			if (!srcVal) continue;
-			const strVal = srcVal.toString();
-			if (camel === "display") {
-				cloneStyle.display = strVal === "none" && !(tagName && (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT")) ? "block" : strVal;
-				continue;
-			}
-			if (camel === "clipPath") continue;
-			if (isDefaultValue(camel, strVal)) {
-				if (cloneStyle[camel]) cloneStyle[camel] = "";
-				continue;
-			}
-			cloneStyle[camel] = strVal;
-		}
-	} else {
-		let cs;
-		try {
-			cs = getComputedStyle(source);
-		} catch {
-			return;
-		}
-		const srcStyle = cs;
-		for (const prop of SYNC_PROPERTIES) {
-			const srcVal = srcStyle[prop];
-			if (prop === "display") {
-				cloneStyle.display = srcVal === "none" && !(tagName && (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT")) ? "block" : srcVal;
-				continue;
-			}
-			if (prop === "clipPath") continue;
-			if (isDefaultValue(prop, srcVal)) {
-				if (cloneStyle[prop]) cloneStyle[prop] = "";
-				continue;
-			}
-			cloneStyle[prop] = srcVal;
-		}
-	}
-	cloneStyle.animation = "none";
-	cloneStyle.transition = "none";
-	const srcTextNode = source.childNodes[0];
-	if (srcTextNode?.nodeType === Node.TEXT_NODE) {
-		const srcText = srcTextNode.textContent || "";
-		const cloneTextNode = clone.childNodes[0];
-		if (cloneTextNode?.nodeType === Node.TEXT_NODE) {
-			if (cloneTextNode.textContent !== srcText) cloneTextNode.textContent = srcText;
-		} else if (!clone.childNodes.length) clone.appendChild(document.createTextNode(srcText));
-	}
-	if (source instanceof HTMLInputElement) {
-		const srcVal = source.value;
-		const cloneInput = clone;
-		if (cloneInput.value !== srcVal) {
-			cloneInput.value = srcVal;
-			cloneInput.setAttribute("value", srcVal);
-		}
-	}
+	if (isCanvasClone) refreshCanvasPixels(node);
+	syncElementStyles(source, clone, isCanvasClone ? source.shadowRoot?.querySelector("canvas") || source.shadowRoot?.querySelector("img") || void 0 : void 0);
+	syncTextContent(source, clone);
+	syncInputValue(source, clone);
 }
 let syncStats = {
 	nodesVisited: 0,