@editframe/elements 0.26.4-beta.0 → 0.30.0-beta.14

package/dist/elements/EFSourceMixin.js

@@ -21,7 +21,7 @@ function EFSourceMixin(superClass, options) {
 			});
 		}
 		get apiHost() {
-			return (this.closest("ef-configuration")?.apiHost ?? this.closest("ef-workbench")?.apiHost ?? this.closest("ef-preview")?.apiHost) || "https://editframe.dev";
+			return (this.closest("ef-configuration")?.apiHost ?? this.closest("ef-workbench")?.apiHost ?? this.closest("ef-preview")?.apiHost) || "https://editframe.com";
 		}
 		productionSrc() {
 			if (!this.md5SumLoader.value) throw new Error(`MD5 sum not available for ${this}. Cannot generate production URL`);

package/dist/elements/EFSourceMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFSourceMixin.js","names":[],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        this.closest(\"ef-configuration\")?.apiHost ??\n        this.closest(\"ef-workbench\")?.apiHost ??\n        this.closest(\"ef-preview\")?.apiHost;\n\n      return apiHost || \"https://editframe.dev\";\n    }\n\n    @property({ type: String })\n    src = \"\";\n\n    productionSrc() {\n      if (!this.md5SumLoader.value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;\n    }\n\n    md5SumLoader = new Task(this, {\n      autoRun: false,\n      args: () => [this.src] as const,\n      task: async ([src], { signal }) => {\n        const md5Path = `/@ef-asset/${src}`;\n        const response = await fetch(md5Path, { method: \"HEAD\", signal });\n        return response.headers.get(\"etag\") ?? undefined;\n      },\n    });\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;;AAcA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAWjC;uBAkBS,IAAI,KAAK,MAAM;IAC5B,SAAS;IACT,YAAY,CAAC,KAAK,IAAI;IACtB,MAAM,OAAO,CAAC,MAAM,EAAE,aAAa;KACjC,MAAM,UAAU,cAAc;AAE9B,aADiB,MAAM,MAAM,SAAS;MAAE,QAAQ;MAAQ;MAAQ,CAAC,EACjD,QAAQ,IAAI,OAAO,IAAI;;IAE1C,CAAC;;EApCF,IAAI,UAAU;AAMZ,WAJE,KAAK,QAAQ,mBAAmB,EAAE,WAClC,KAAK,QAAQ,eAAe,EAAE,WAC9B,KAAK,QAAQ,aAAa,EAAE,YAEZ;;EAMpB,gBAAgB;AACd,OAAI,CAAC,KAAK,aAAa,MACrB,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,KAAK,aAAa;;;aAhBzE,SAAS,EAAE,MAAM,QAAQ,CAAC;AA8B7B,QAAO"}
+{"version":3,"file":"EFSourceMixin.js","names":[],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        this.closest(\"ef-configuration\")?.apiHost ??\n        this.closest(\"ef-workbench\")?.apiHost ??\n        this.closest(\"ef-preview\")?.apiHost;\n\n      return apiHost || \"https://editframe.com\";\n    }\n\n    @property({ type: String })\n    src = \"\";\n\n    productionSrc() {\n      if (!this.md5SumLoader.value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;\n    }\n\n    md5SumLoader = new Task(this, {\n      autoRun: false,\n      args: () => [this.src] as const,\n      task: async ([src], { signal }) => {\n        const md5Path = `/@ef-asset/${src}`;\n        const response = await fetch(md5Path, { method: \"HEAD\", signal });\n        return response.headers.get(\"etag\") ?? undefined;\n      },\n    });\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;;AAcA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAWjC;uBAkBS,IAAI,KAAK,MAAM;IAC5B,SAAS;IACT,YAAY,CAAC,KAAK,IAAI;IACtB,MAAM,OAAO,CAAC,MAAM,EAAE,aAAa;KACjC,MAAM,UAAU,cAAc;AAE9B,aADiB,MAAM,MAAM,SAAS;MAAE,QAAQ;MAAQ;MAAQ,CAAC,EACjD,QAAQ,IAAI,OAAO,IAAI;;IAE1C,CAAC;;EApCF,IAAI,UAAU;AAMZ,WAJE,KAAK,QAAQ,mBAAmB,EAAE,WAClC,KAAK,QAAQ,eAAe,EAAE,WAC9B,KAAK,QAAQ,aAAa,EAAE,YAEZ;;EAMpB,gBAAgB;AACd,OAAI,CAAC,KAAK,aAAa,MACrB,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,KAAK,aAAa;;;aAhBzE,SAAS,EAAE,MAAM,QAAQ,CAAC;AA8B7B,QAAO"}

package/dist/elements/EFSurface.d.ts

@@ -1,18 +1,18 @@
 import { ContextMixinInterface } from "../gui/ContextMixin.js";
 import { Task } from "@lit/task";
-import * as lit24 from "lit";
+import * as lit26 from "lit";
 import { LitElement } from "lit";
-import * as lit_html21 from "lit-html";
+import * as lit_html23 from "lit-html";
 import * as lit_html_directives_ref5 from "lit-html/directives/ref";
 
 //#region src/elements/EFSurface.d.ts
 declare class EFSurface extends LitElement {
   #private;
-  static styles: lit24.CSSResult[];
+  static styles: lit26.CSSResult[];
   canvasRef: lit_html_directives_ref5.Ref<HTMLCanvasElement>;
   targetElement: ContextMixinInterface | null;
   target: string;
-  render(): lit_html21.TemplateResult<1>;
+  render(): lit_html23.TemplateResult<1>;
   get rootTimegroup(): any;
   get currentTimeMs(): number;
   get durationMs(): number;

package/dist/elements/EFText.d.ts

@@ -0,0 +1,52 @@
+import { TemporalMixinInterface } from "./EFTemporal.js";
+import { EFTextSegment } from "./EFTextSegment.js";
+import * as lit8 from "lit";
+import { LitElement, PropertyValueMap } from "lit";
+import * as lit_html8 from "lit-html";
+
+//#region src/elements/EFText.d.ts
+type SplitMode = "line" | "word" | "char";
+declare const EFText_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
+declare class EFText extends EFText_base {
+  static styles: lit8.CSSResult[];
+  split: SplitMode;
+  private validateSplit;
+  staggerMs?: number;
+  private validateStagger;
+  easing: string;
+  private mutationObserver?;
+  private lastTextContent;
+  private _textContent;
+  private _templateElement;
+  private _segmentsReadyResolvers;
+  render(): lit_html8.TemplateResult<1>;
+  set textContent(value: string | null);
+  get textContent(): string;
+  /**
+   * Get all ef-text-segment elements directly
+   * @public
+   */
+  get segments(): EFTextSegment[];
+  /**
+   * Returns a promise that resolves when segments are ready (created and connected)
+   * Use this to wait for segments after setting textContent or other properties
+   * @public
+   */
+  whenSegmentsReady(): Promise<EFTextSegment[]>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+  private setupMutationObserver;
+  private getTextContent;
+  private splitText;
+  private splitTextIntoSegments;
+  get intrinsicDurationMs(): number | undefined;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-text": EFText;
+  }
+}
+//#endregion
+export { EFText };
+//# sourceMappingURL=EFText.d.ts.map

package/dist/elements/EFText.js

@@ -0,0 +1,319 @@
+import { durationConverter } from "./durationConverter.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { updateAnimations } from "./updateAnimations.js";
+import { evaluateEasing } from "./easingUtils.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+//#region src/elements/EFText.ts
+let EFText = class EFText$1 extends EFTemporal(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.split = "word";
+		this.easing = "linear";
+		this.lastTextContent = "";
+		this._textContent = null;
+		this._templateElement = null;
+		this._segmentsReadyResolvers = [];
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: inline-flex;
+        white-space: normal;
+        line-height: 1;
+        gap: 0;
+      }
+      :host([split="char"]) {
+        white-space: pre;
+      }
+      :host([split="line"]) {
+        display: flex;
+        flex-direction: column;
+      }
+      ::slotted(*) {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+      }
+    `];
+	}
+	validateSplit(value) {
+		if (value === "line" || value === "word" || value === "char") return value;
+		console.warn(`Invalid split value "${value}". Must be "line", "word", or "char". Defaulting to "word".`);
+		return "word";
+	}
+	validateStagger(value) {
+		if (value === void 0) return void 0;
+		if (value < 0) {
+			console.warn(`Invalid stagger value ${value}ms. Must be >= 0. Using 0.`);
+			return 0;
+		}
+		return value;
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+	set textContent(value) {
+		const newValue = value || "";
+		if (this._textContent !== newValue) {
+			this._textContent = newValue;
+			if (!this._templateElement && this.isConnected) this._templateElement = this.querySelector("template");
+			const textNodes = [];
+			for (const node of Array.from(this.childNodes)) if (node.nodeType === Node.TEXT_NODE) textNodes.push(node);
+			for (const node of textNodes) node.remove();
+			if (newValue) {
+				const textNode = document.createTextNode(newValue);
+				this.appendChild(textNode);
+			}
+			if (this.isConnected) this.splitText();
+		}
+	}
+	get textContent() {
+		if (this._textContent === null) return this.getTextContent();
+		return this._textContent;
+	}
+	/**
+	* Get all ef-text-segment elements directly
+	* @public
+	*/
+	get segments() {
+		return Array.from(this.querySelectorAll("ef-text-segment[data-segment-created]"));
+	}
+	/**
+	* Returns a promise that resolves when segments are ready (created and connected)
+	* Use this to wait for segments after setting textContent or other properties
+	* @public
+	*/
+	async whenSegmentsReady() {
+		await this.updateComplete;
+		const text = this._textContent !== null ? this._textContent : this.getTextContent();
+		if (!text || text.trim().length === 0) return [];
+		await new Promise((resolve) => requestAnimationFrame(resolve));
+		let segments = this.segments;
+		if (segments.length > 0) {
+			await Promise.all(segments.map((seg) => seg.updateComplete));
+			await new Promise((resolve) => requestAnimationFrame(resolve));
+			await new Promise((resolve) => requestAnimationFrame(resolve));
+			return this.segments;
+		}
+		return new Promise((resolve) => {
+			let attempts = 0;
+			const maxAttempts = 100;
+			const checkSegments = () => {
+				segments = this.segments;
+				if (segments.length > 0) Promise.all(segments.map((seg) => seg.updateComplete)).then(() => {
+					requestAnimationFrame(() => {
+						requestAnimationFrame(() => {
+							resolve(this.segments);
+						});
+					});
+				});
+				else if (attempts < maxAttempts) {
+					attempts++;
+					requestAnimationFrame(checkSegments);
+				} else resolve([]);
+			};
+			checkSegments();
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._templateElement = this.querySelector("template");
+		if (this._textContent === null) {
+			this._textContent = this.getTextContent();
+			this.lastTextContent = this._textContent;
+		}
+		requestAnimationFrame(() => {
+			this.setupMutationObserver();
+			this.splitText();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.mutationObserver?.disconnect();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("split") || changedProperties.has("staggerMs") || changedProperties.has("easing") || changedProperties.has("durationMs")) this.splitText();
+	}
+	setupMutationObserver() {
+		this.mutationObserver = new MutationObserver(() => {
+			const currentText = this._textContent || this.getTextContent();
+			if (currentText !== this.lastTextContent) {
+				this._textContent = currentText;
+				this.lastTextContent = currentText;
+				this.splitText();
+			}
+		});
+		this.mutationObserver.observe(this, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+	}
+	getTextContent() {
+		let text = "";
+		for (const node of Array.from(this.childNodes)) if (node.nodeType === Node.TEXT_NODE) text += node.textContent || "";
+		else if (node.nodeType === Node.ELEMENT_NODE) {
+			const element = node;
+			if (element.tagName === "EF-TEXT-SEGMENT") continue;
+			if (element.tagName === "TEMPLATE") continue;
+			text += element.textContent || "";
+		}
+		return text;
+	}
+	splitText() {
+		const validatedSplit = this.validateSplit(this.split);
+		if (validatedSplit !== this.split) {
+			this.split = validatedSplit;
+			return;
+		}
+		const validatedStagger = this.validateStagger(this.staggerMs);
+		if (validatedStagger !== this.staggerMs) {
+			this.staggerMs = validatedStagger;
+			return;
+		}
+		const text = this._textContent !== null ? this._textContent : this.getTextContent();
+		if (!text || text.trim().length === 0) {
+			const existingSegments = Array.from(this.querySelectorAll("ef-text-segment"));
+			for (const segment of existingSegments) segment.remove();
+			const textNodes = [];
+			for (const node of Array.from(this.childNodes)) if (node.nodeType === Node.TEXT_NODE) textNodes.push(node);
+			for (const node of textNodes) node.remove();
+			this.lastTextContent = "";
+			this._segmentsReadyResolvers.forEach((resolve) => {
+				resolve();
+			});
+			this._segmentsReadyResolvers = [];
+			return;
+		}
+		const segments = this.splitTextIntoSegments(text);
+		const durationMs = this.durationMs || 1e3;
+		const fragment = document.createDocumentFragment();
+		if (!this._templateElement) this._templateElement = this.querySelector("template");
+		const templateContent = this._templateElement?.content;
+		const templateSegments = templateContent ? Array.from(templateContent.querySelectorAll("ef-text-segment")) : [];
+		const useTemplate = templateSegments.length > 0;
+		const segmentsPerTextSegment = useTemplate ? templateSegments.length : 1;
+		segments.forEach((segmentText, textIndex) => {
+			let staggerOffset;
+			if (this.staggerMs !== void 0) {
+				const totalSegments = segments.length;
+				const normalizedProgress = totalSegments > 1 ? textIndex / (totalSegments - 1) : 0;
+				staggerOffset = evaluateEasing(this.easing, normalizedProgress) * ((totalSegments - 1) * this.staggerMs);
+			}
+			if (useTemplate && templateContent) {
+				const clonedContent = templateContent.cloneNode(true);
+				Array.from(clonedContent.querySelectorAll("ef-text-segment")).forEach((segment, templateIndex) => {
+					segment.segmentText = segmentText;
+					segment.segmentIndex = textIndex * segmentsPerTextSegment + templateIndex;
+					segment.segmentStartMs = 0;
+					segment.segmentEndMs = durationMs;
+					segment.staggerOffsetMs = staggerOffset ?? 0;
+					if (this.split === "line") segment.setAttribute("data-line-segment", "true");
+					segment.setAttribute("data-segment-created", "true");
+					fragment.appendChild(segment);
+				});
+			} else {
+				const segment = document.createElement("ef-text-segment");
+				segment.segmentText = segmentText;
+				segment.segmentIndex = textIndex;
+				segment.segmentStartMs = 0;
+				segment.segmentEndMs = durationMs;
+				segment.staggerOffsetMs = staggerOffset ?? 0;
+				if (this.split === "line") segment.setAttribute("data-line-segment", "true");
+				segment.setAttribute("data-segment-created", "true");
+				fragment.appendChild(segment);
+			}
+		});
+		const templateToPreserve = this._templateElement;
+		while (this.firstChild) {
+			const child = this.firstChild;
+			if (child === templateToPreserve) {
+				this.removeChild(child);
+				continue;
+			}
+			this.removeChild(child);
+		}
+		this.appendChild(fragment);
+		if (templateToPreserve) this.appendChild(templateToPreserve);
+		requestAnimationFrame(() => {
+			const segmentElements = this.segments;
+			Promise.all(segmentElements.map((seg) => seg.updateComplete)).then(() => {
+				requestAnimationFrame(() => {
+					const rootTimegroup = this.rootTimegroup;
+					if (rootTimegroup) updateAnimations(rootTimegroup);
+					else updateAnimations(this);
+				});
+			});
+		});
+		this.lastTextContent = text;
+		this._textContent = text;
+		requestAnimationFrame(() => {
+			this._segmentsReadyResolvers.forEach((resolve) => {
+				resolve();
+			});
+			this._segmentsReadyResolvers = [];
+		});
+	}
+	splitTextIntoSegments(text) {
+		switch (this.split) {
+			case "line": return text.split(/\r?\n/).filter((line) => line.length > 0);
+			case "word": {
+				const words = [];
+				const parts = text.split(/(\S+)/);
+				for (const part of parts) if (part.trim().length > 0) words.push(part);
+				else if (part.length > 0) {
+					if (words.length > 0) words[words.length - 1] += part;
+				}
+				return words.length > 0 ? words : [text];
+			}
+			case "char": return Array.from(text);
+			default: return [text];
+		}
+	}
+	get intrinsicDurationMs() {
+		if (this.hasExplicitDuration) return;
+		const text = this._textContent !== null ? this._textContent : this.getTextContent();
+		if (!text || text.trim().length === 0) return 0;
+		let segmentCount = 1;
+		switch (this.split) {
+			case "line":
+				segmentCount = text.split(/\r?\n/).filter((line) => line.trim().length > 0).length || 1;
+				break;
+			case "word": {
+				const words = [];
+				const parts = text.split(/(\S+)/);
+				for (const part of parts) if (part.trim().length > 0) words.push(part);
+				else if (part.length > 0) {
+					if (words.length > 0) words[words.length - 1] += part;
+				}
+				segmentCount = words.length > 0 ? words.length : 1;
+				break;
+			}
+			case "char":
+				segmentCount = text.length || 1;
+				break;
+		}
+		return segmentCount * 1e3;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], EFText.prototype, "split", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "stagger",
+	converter: durationConverter
+})], EFText.prototype, "staggerMs", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], EFText.prototype, "easing", void 0);
+EFText = __decorate([customElement("ef-text")], EFText);
+
+//#endregion
+export { EFText };
+//# sourceMappingURL=EFText.js.map

package/dist/elements/EFText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFText.js","names":["EFText","textNodes: ChildNode[]","staggerOffset: number | undefined","words: string[]"],"sources":["../../src/elements/EFText.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { durationConverter } from \"./durationConverter.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport { evaluateEasing } from \"./easingUtils.js\";\nimport type { EFTextSegment } from \"./EFTextSegment.js\";\nimport { updateAnimations } from \"./updateAnimations.js\";\n\nexport type SplitMode = \"line\" | \"word\" | \"char\";\n\n@customElement(\"ef-text\")\nexport class EFText extends EFTemporal(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: inline-flex;\n        white-space: normal;\n        line-height: 1;\n        gap: 0;\n      }\n      :host([split=\"char\"]) {\n        white-space: pre;\n      }\n      :host([split=\"line\"]) {\n        display: flex;\n        flex-direction: column;\n      }\n      ::slotted(*) {\n        display: inline-block;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  split: SplitMode = \"word\";\n\n  private validateSplit(value: string): SplitMode {\n    if (value === \"line\" || value === \"word\" || value === \"char\") {\n      return value as SplitMode;\n    }\n    console.warn(\n      `Invalid split value \"${value}\". Must be \"line\", \"word\", or \"char\". Defaulting to \"word\".`,\n    );\n    return \"word\";\n  }\n\n  @property({\n    type: Number,\n    attribute: \"stagger\",\n    converter: durationConverter,\n  })\n  staggerMs?: number;\n\n  private validateStagger(value: number | undefined): number | undefined {\n    if (value === undefined) return undefined;\n    if (value < 0) {\n      console.warn(`Invalid stagger value ${value}ms. Must be >= 0. Using 0.`);\n      return 0;\n    }\n    return value;\n  }\n\n  @property({ type: String, reflect: true })\n  easing = \"linear\";\n\n  private mutationObserver?: MutationObserver;\n  private lastTextContent = \"\";\n  private _textContent: string | null = null; // null means not initialized, \"\" means explicitly empty\n  private _templateElement: HTMLTemplateElement | null = null;\n  private _segmentsReadyResolvers: Array<() => void> = [];\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  // Store text content so we can use it even after DOM is cleared\n  set textContent(value: string | null) {\n    const newValue = value || \"\";\n    // Only update if value actually changed\n    if (this._textContent !== newValue) {\n      this._textContent = newValue;\n\n      // Find template element if not already stored\n      if (!this._templateElement && this.isConnected) {\n        this._templateElement = this.querySelector(\"template\");\n      }\n\n      // Clear any existing text nodes\n      const textNodes: ChildNode[] = [];\n      for (const node of Array.from(this.childNodes)) {\n        if (node.nodeType === Node.TEXT_NODE) {\n          textNodes.push(node as ChildNode);\n        }\n      }\n      for (const node of textNodes) {\n        node.remove();\n      }\n      // Add new text node if value is not empty\n      if (newValue) {\n        const textNode = document.createTextNode(newValue);\n        this.appendChild(textNode);\n      }\n      // Trigger re-split\n      if (this.isConnected) {\n        this.splitText();\n      }\n    }\n  }\n\n  get textContent(): string {\n    // If _textContent is null, it hasn't been initialized - read from DOM\n    if (this._textContent === null) {\n      return this.getTextContent();\n    }\n    // Otherwise use stored value (even if empty string)\n    return this._textContent;\n  }\n\n  /**\n   * Get all ef-text-segment elements directly\n   * @public\n   */\n  get segments(): EFTextSegment[] {\n    return Array.from(\n      this.querySelectorAll(\"ef-text-segment[data-segment-created]\"),\n    ) as EFTextSegment[];\n  }\n\n  /**\n   * Returns a promise that resolves when segments are ready (created and connected)\n   * Use this to wait for segments after setting textContent or other properties\n   * @public\n   */\n  async whenSegmentsReady(): Promise<EFTextSegment[]> {\n    // Wait for text element to be updated first\n    await this.updateComplete;\n\n    // If no text content, segments will be empty - return immediately\n    // Use same logic as splitText to read text content\n    const text =\n      this._textContent !== null ? this._textContent : this.getTextContent();\n    if (!text || text.trim().length === 0) {\n      return [];\n    }\n\n    // Wait a frame for splitText to run\n    await new Promise((resolve) => requestAnimationFrame(resolve));\n\n    // If segments already exist and are connected, wait for updates\n    let segments = this.segments;\n    if (segments.length > 0) {\n      // Wait for all segments to be updated\n      await Promise.all(segments.map((seg) => seg.updateComplete));\n      // Wait one more frame to ensure connectedCallback has run and properties are set\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      // Wait one more frame to ensure properties are fully processed\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      return this.segments;\n    }\n\n    // Otherwise, wait for segments to be created (with timeout)\n    return new Promise<EFTextSegment[]>((resolve) => {\n      let attempts = 0;\n      const maxAttempts = 100; // 100 frames = ~1.6 seconds at 60fps\n\n      const checkSegments = () => {\n        segments = this.segments;\n        if (segments.length > 0) {\n          // Wait for all segments to be updated\n          Promise.all(segments.map((seg) => seg.updateComplete)).then(() => {\n            // Wait frames to ensure connectedCallback has run and properties are set\n            requestAnimationFrame(() => {\n              requestAnimationFrame(() => {\n                resolve(this.segments);\n              });\n            });\n          });\n        } else if (attempts < maxAttempts) {\n          attempts++;\n          requestAnimationFrame(checkSegments);\n        } else {\n          // Timeout - return empty array (might be empty text)\n          resolve([]);\n        }\n      };\n      checkSegments();\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Find and store template element before any modifications\n    this._templateElement = this.querySelector(\"template\");\n\n    // Initialize _textContent from DOM if not already set (for declarative usage)\n    if (this._textContent === null) {\n      this._textContent = this.getTextContent();\n      this.lastTextContent = this._textContent;\n    }\n\n    // Use requestAnimationFrame to ensure DOM is ready\n    requestAnimationFrame(() => {\n      this.setupMutationObserver();\n      this.splitText();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    if (\n      changedProperties.has(\"split\") ||\n      changedProperties.has(\"staggerMs\") ||\n      changedProperties.has(\"easing\") ||\n      changedProperties.has(\"durationMs\")\n    ) {\n      this.splitText();\n    }\n  }\n\n  private setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(() => {\n      // Only react to changes that aren't from our own segment creation\n      const currentText = this._textContent || this.getTextContent();\n      if (currentText !== this.lastTextContent) {\n        this._textContent = currentText;\n        this.lastTextContent = currentText;\n        this.splitText();\n      }\n    });\n\n    this.mutationObserver.observe(this, {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n  }\n\n  private getTextContent(): string {\n    // Get text content, handling both text nodes and HTML content\n    let text = \"\";\n    for (const node of Array.from(this.childNodes)) {\n      if (node.nodeType === Node.TEXT_NODE) {\n        text += node.textContent || \"\";\n      } else if (node.nodeType === Node.ELEMENT_NODE) {\n        const element = node as HTMLElement;\n        // Skip ef-text-segment elements (they're created by us)\n        if (element.tagName === \"EF-TEXT-SEGMENT\") {\n          continue;\n        }\n        // Skip template elements (they're templates, not content)\n        if (element.tagName === \"TEMPLATE\") {\n          continue;\n        }\n        text += element.textContent || \"\";\n      }\n    }\n    return text;\n  }\n\n  private splitText() {\n    // Validate split mode\n    const validatedSplit = this.validateSplit(this.split);\n    if (validatedSplit !== this.split) {\n      this.split = validatedSplit;\n      return; // Will trigger updated() which calls splitText() again\n    }\n\n    // Validate stagger\n    const validatedStagger = this.validateStagger(this.staggerMs);\n    if (validatedStagger !== this.staggerMs) {\n      this.staggerMs = validatedStagger;\n      return; // Will trigger updated() which calls splitText() again\n    }\n\n    // Read text content - use stored _textContent if set, otherwise read from DOM\n    const text =\n      this._textContent !== null ? this._textContent : this.getTextContent();\n    if (!text || text.trim().length === 0) {\n      // Clear segments if no text\n      const existingSegments = Array.from(\n        this.querySelectorAll(\"ef-text-segment\"),\n      );\n      for (const segment of existingSegments) {\n        segment.remove();\n      }\n      // Clear text nodes\n      const textNodes: ChildNode[] = [];\n      for (const node of Array.from(this.childNodes)) {\n        if (node.nodeType === Node.TEXT_NODE) {\n          textNodes.push(node as ChildNode);\n        }\n      }\n      for (const node of textNodes) {\n        node.remove();\n      }\n      this.lastTextContent = \"\";\n      // Resolve any waiting promises\n      this._segmentsReadyResolvers.forEach((resolve) => {\n        resolve();\n      });\n      this._segmentsReadyResolvers = [];\n      return;\n    }\n\n    const segments = this.splitTextIntoSegments(text);\n    const durationMs = this.durationMs || 1000; // Default 1 second if no duration\n\n    // Clear ALL child nodes (text nodes and segments) by replacing innerHTML\n    // This ensures we don't have any leftover text nodes\n    const fragment = document.createDocumentFragment();\n\n    // Find template element if not already stored\n    if (!this._templateElement) {\n      this._templateElement = this.querySelector(\"template\");\n    }\n\n    // Get template content structure\n    // If template exists, clone it; otherwise create default ef-text-segment\n    const templateContent = this._templateElement?.content;\n    const templateSegments = templateContent\n      ? Array.from(templateContent.querySelectorAll(\"ef-text-segment\"))\n      : [];\n\n    // If no template segments found, we'll create a default one\n    const useTemplate = templateSegments.length > 0;\n    const segmentsPerTextSegment = useTemplate ? templateSegments.length : 1;\n\n    // Create new segments in a fragment first\n    segments.forEach((segmentText, textIndex) => {\n      // Calculate stagger offset if stagger is set\n      let staggerOffset: number | undefined;\n      if (this.staggerMs !== undefined) {\n        // Apply easing to the stagger offset\n        // Normalize index to 0-1 range (0 for first segment, 1 for last segment)\n        const totalSegments = segments.length;\n        const normalizedProgress =\n          totalSegments > 1 ? textIndex / (totalSegments - 1) : 0;\n\n        // Apply easing function to get eased progress\n        const easedProgress = evaluateEasing(this.easing, normalizedProgress);\n\n        // Calculate total stagger duration (last segment gets full stagger)\n        const totalStaggerDuration = (totalSegments - 1) * this.staggerMs;\n\n        // Apply eased progress to total stagger duration\n        staggerOffset = easedProgress * totalStaggerDuration;\n      }\n\n      if (useTemplate && templateContent) {\n        // Clone template content for each text segment\n        // This allows multiple ef-text-segment elements per character/word/line\n        const clonedContent = templateContent.cloneNode(\n          true,\n        ) as DocumentFragment;\n        const clonedSegments = Array.from(\n          clonedContent.querySelectorAll(\"ef-text-segment\"),\n        ) as EFTextSegment[];\n\n        clonedSegments.forEach((segment, templateIndex) => {\n          // Set properties - Lit will process these when element is connected\n          segment.segmentText = segmentText;\n          // Calculate segment index accounting for multiple segments per text segment\n          segment.segmentIndex =\n            textIndex * segmentsPerTextSegment + templateIndex;\n          segment.segmentStartMs = 0;\n          segment.segmentEndMs = durationMs;\n          segment.staggerOffsetMs = staggerOffset ?? 0;\n\n          // Set data attribute for line mode to enable block display\n          if (this.split === \"line\") {\n            segment.setAttribute(\"data-line-segment\", \"true\");\n          }\n\n          // Mark as created to avoid being picked up as template\n          segment.setAttribute(\"data-segment-created\", \"true\");\n\n          fragment.appendChild(segment);\n        });\n      } else {\n        // No template - create default ef-text-segment\n        const segment = document.createElement(\n          \"ef-text-segment\",\n        ) as EFTextSegment;\n\n        segment.segmentText = segmentText;\n        segment.segmentIndex = textIndex;\n        segment.segmentStartMs = 0;\n        segment.segmentEndMs = durationMs;\n        segment.staggerOffsetMs = staggerOffset ?? 0;\n\n        // Set data attribute for line mode to enable block display\n        if (this.split === \"line\") {\n          segment.setAttribute(\"data-line-segment\", \"true\");\n        }\n\n        // Mark as created to avoid being picked up as template\n        segment.setAttribute(\"data-segment-created\", \"true\");\n\n        fragment.appendChild(segment);\n      }\n    });\n\n    // Ensure segments are connected to DOM before checking for animations\n    // Append fragment first, then trigger updates\n\n    // Replace all children with the fragment (this clears text nodes and old segments)\n    // But preserve the template element if it exists\n    const templateToPreserve = this._templateElement;\n    while (this.firstChild) {\n      const child = this.firstChild;\n      // Don't remove the template element\n      if (child === templateToPreserve) {\n        // Skip template, but we need to move it after the fragment\n        // So we'll remove it temporarily and re-add it after\n        this.removeChild(child);\n        continue;\n      }\n      this.removeChild(child);\n    }\n    this.appendChild(fragment);\n    // Re-add template element if it existed\n    if (templateToPreserve) {\n      this.appendChild(templateToPreserve);\n    }\n\n    // Segments will pause their own animations in connectedCallback\n    // Lit will automatically update them when they're connected to the DOM\n    // Ensure segments are updated after being connected\n    requestAnimationFrame(() => {\n      const segmentElements = this.segments;\n      Promise.all(segmentElements.map((seg) => seg.updateComplete)).then(() => {\n        // Wait an additional frame to ensure animations are paused in connectedCallback\n        // Then trigger updateAnimations to set correct state\n        // This ensures animations are positioned correctly on first load\n        requestAnimationFrame(() => {\n          const rootTimegroup = this.rootTimegroup;\n          if (rootTimegroup) {\n            updateAnimations(rootTimegroup);\n          } else {\n            updateAnimations(this);\n          }\n        });\n      });\n    });\n\n    this.lastTextContent = text;\n    this._textContent = text;\n\n    // Resolve any waiting promises after segments are connected\n    requestAnimationFrame(() => {\n      this._segmentsReadyResolvers.forEach((resolve) => {\n        resolve();\n      });\n      this._segmentsReadyResolvers = [];\n    });\n  }\n\n  private splitTextIntoSegments(text: string): string[] {\n    switch (this.split) {\n      case \"line\": {\n        // Split on newlines\n        const lines = text.split(/\\r?\\n/);\n        // Filter out empty lines but keep the structure\n        return lines.filter((line) => line.length > 0);\n      }\n      case \"word\": {\n        // Split on whitespace boundaries, preserving spaces after words\n        const words: string[] = [];\n        // Split by word boundaries, but keep spaces after words\n        const parts = text.split(/(\\S+)/);\n        for (const part of parts) {\n          if (part.trim().length > 0) {\n            // This is a word - check if there's a space after it in the original text\n            words.push(part);\n          } else if (part.length > 0) {\n            // This is whitespace - attach it to the previous word if exists, otherwise skip\n            if (words.length > 0) {\n              words[words.length - 1] += part;\n            }\n          }\n        }\n        // If no words found, return original text\n        return words.length > 0 ? words : [text];\n      }\n      case \"char\": {\n        // Split every character, preserving whitespace\n        return Array.from(text);\n      }\n      default:\n        return [text];\n    }\n  }\n\n  get intrinsicDurationMs(): number | undefined {\n    // If explicit duration is set, use it\n    if (this.hasExplicitDuration) {\n      return undefined; // Let explicit duration take precedence\n    }\n\n    // Otherwise, calculate from content\n    // Use _textContent if set, otherwise read from DOM\n    const text =\n      this._textContent !== null ? this._textContent : this.getTextContent();\n    if (!text || text.trim().length === 0) {\n      return 0;\n    }\n\n    // Default to 1 second per segment (can be overridden with explicit duration)\n    // Use the same splitting logic as splitTextIntoSegments\n    let segmentCount = 1;\n    switch (this.split) {\n      case \"line\": {\n        const lines = text\n          .split(/\\r?\\n/)\n          .filter((line) => line.trim().length > 0);\n        segmentCount = lines.length || 1;\n        break;\n      }\n      case \"word\": {\n        // Use same logic as splitTextIntoSegments for consistency\n        const words: string[] = [];\n        const parts = text.split(/(\\S+)/);\n        for (const part of parts) {\n          if (part.trim().length > 0) {\n            words.push(part);\n          } else if (part.length > 0) {\n            if (words.length > 0) {\n              words[words.length - 1] += part;\n            }\n          }\n        }\n        segmentCount = words.length > 0 ? words.length : 1;\n        break;\n      }\n      case \"char\": {\n        segmentCount = text.length || 1;\n        break;\n      }\n    }\n\n    return segmentCount * 1000;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-text\": EFText;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFTextSegment.d.ts

@@ -0,0 +1,30 @@
+import { TemporalMixinInterface } from "./EFTemporal.js";
+import * as lit9 from "lit";
+import { LitElement } from "lit";
+import * as lit_html9 from "lit-html";
+
+//#region src/elements/EFTextSegment.d.ts
+declare const EFTextSegment_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
+declare class EFTextSegment extends EFTextSegment_base {
+  static styles: lit9.CSSResult[];
+  render(): lit_html9.TemplateResult<1>;
+  private _animationsPaused;
+  connectedCallback(): void;
+  segmentText: string;
+  segmentIndex: number;
+  staggerOffsetMs?: number;
+  segmentStartMs: number;
+  segmentEndMs: number;
+  hidden: boolean;
+  get startTimeMs(): number;
+  get endTimeMs(): number;
+  get durationMs(): number;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-text-segment": EFTextSegment;
+  }
+}
+//#endregion
+export { EFTextSegment };
+//# sourceMappingURL=EFTextSegment.d.ts.map

package/dist/elements/EFTextSegment.js

@@ -0,0 +1,94 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+//#region src/elements/EFTextSegment.ts
+let EFTextSegment = class EFTextSegment$1 extends EFTemporal(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._animationsPaused = false;
+		this.segmentText = "";
+		this.segmentIndex = 0;
+		this.segmentStartMs = 0;
+		this.segmentEndMs = 0;
+		this.hidden = false;
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: inline-block;
+        white-space: pre;
+        line-height: 1;
+      }
+      :host([data-line-segment]) {
+        display: block;
+        white-space: normal;
+      }
+      :host([hidden]) {
+        opacity: 0;
+        pointer-events: none;
+      }
+    `];
+	}
+	render() {
+		const seedValue = this.segmentIndex * 9007 % 233 / 233;
+		this.style.setProperty("--ef-seed", seedValue.toString());
+		const offsetMs = this.staggerOffsetMs ?? 0;
+		this.style.setProperty("--ef-stagger-offset", `${offsetMs}ms`);
+		this.style.setProperty("--ef-index", this.segmentIndex.toString());
+		return html`${this.segmentText}`;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this._animationsPaused) this.updateComplete.then(() => {
+			requestAnimationFrame(() => {
+				const animations = this.getAnimations();
+				for (const animation of animations) if (animation.playState === "finished") {
+					animation.cancel();
+					animation.play();
+					animation.pause();
+				} else if (animation.playState === "running") animation.pause();
+				this._animationsPaused = true;
+			});
+		});
+	}
+	get startTimeMs() {
+		return (this.closest("ef-text")?.startTimeMs || 0) + (this.segmentStartMs || 0);
+	}
+	get endTimeMs() {
+		return (this.closest("ef-text")?.startTimeMs || 0) + (this.segmentEndMs || 0);
+	}
+	get durationMs() {
+		return this.segmentEndMs - this.segmentStartMs;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: false
+})], EFTextSegment.prototype, "segmentText", void 0);
+__decorate([property({
+	type: Number,
+	attribute: false
+})], EFTextSegment.prototype, "segmentIndex", void 0);
+__decorate([property({
+	type: Number,
+	attribute: false
+})], EFTextSegment.prototype, "staggerOffsetMs", void 0);
+__decorate([property({
+	type: Number,
+	attribute: false
+})], EFTextSegment.prototype, "segmentStartMs", void 0);
+__decorate([property({
+	type: Number,
+	attribute: false
+})], EFTextSegment.prototype, "segmentEndMs", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], EFTextSegment.prototype, "hidden", void 0);
+EFTextSegment = __decorate([customElement("ef-text-segment")], EFTextSegment);
+
+//#endregion
+export { EFTextSegment };
+//# sourceMappingURL=EFTextSegment.js.map

package/dist/elements/EFTextSegment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFTextSegment.js","names":["EFTextSegment"],"sources":["../../src/elements/EFTextSegment.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport type { EFText } from \"./EFText.js\";\n\n@customElement(\"ef-text-segment\")\nexport class EFTextSegment extends EFTemporal(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        white-space: pre;\n        line-height: 1;\n      }\n      :host([data-line-segment]) {\n        display: block;\n        white-space: normal;\n      }\n      :host([hidden]) {\n        opacity: 0;\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  render() {\n    // Set deterministic --ef-seed value based on segment index\n    const seed = (this.segmentIndex * 9007) % 233; // Prime numbers for better distribution\n    const seedValue = seed / 233; // Normalize to 0-1 range\n    this.style.setProperty(\"--ef-seed\", seedValue.toString());\n\n    // Set stagger offset CSS variable\n    // staggerOffsetMs is always set (defaults to 0), so we can always set the CSS variable\n    const offsetMs = this.staggerOffsetMs ?? 0;\n    this.style.setProperty(\"--ef-stagger-offset\", `${offsetMs}ms`);\n\n    // Set index CSS variable\n    this.style.setProperty(\"--ef-index\", this.segmentIndex.toString());\n\n    return html`${this.segmentText}`;\n  }\n\n  private _animationsPaused = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // CRITICAL: Pause all animations once when segment is first connected\n    // CSS animations start automatically and must be paused so updateAnimations can control them\n    // Only do this once on initial load\n    if (!this._animationsPaused) {\n      // Wait for segment to be fully updated before pausing animations\n      this.updateComplete.then(() => {\n        requestAnimationFrame(() => {\n          const animations = this.getAnimations();\n          for (const animation of animations) {\n            // Ensure animation is in a playable state\n            // If it's finished, reset it\n            if (animation.playState === \"finished\") {\n              animation.cancel();\n              animation.play();\n              animation.pause();\n            } else if (animation.playState === \"running\") {\n              // Pause if running, preserving current visual state\n              animation.pause();\n            }\n            // Don't reset currentTime here - let updateAnimations set it based on timeline\n            // This preserves any visual state that was already applied\n          }\n          this._animationsPaused = true;\n          // Note: updateAnimations is called from parent EFText after all segments are created\n          // This avoids calling it multiple times (once per segment)\n        });\n      });\n    }\n  }\n\n  @property({ type: String, attribute: false })\n  segmentText = \"\";\n\n  @property({ type: Number, attribute: false })\n  segmentIndex = 0;\n\n  @property({ type: Number, attribute: false })\n  staggerOffsetMs?: number;\n\n  @property({ type: Number, attribute: false })\n  segmentStartMs = 0;\n\n  @property({ type: Number, attribute: false })\n  segmentEndMs = 0;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  get startTimeMs() {\n    // Get parent text element's absolute start time, then add our local offset\n    const parentText = this.closest(\"ef-text\") as EFText;\n    const parentStartTime = parentText?.startTimeMs || 0;\n    return parentStartTime + (this.segmentStartMs || 0);\n  }\n\n  get endTimeMs() {\n    const parentText = this.closest(\"ef-text\") as EFText;\n    const parentStartTime = parentText?.startTimeMs || 0;\n    return parentStartTime + (this.segmentEndMs || 0);\n  }\n\n  get durationMs(): number {\n    return this.segmentEndMs - this.segmentStartMs;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-text-segment\": EFTextSegment;\n  }\n}\n"],"mappings":";;;;;;AAMO,0BAAMA,wBAAsB,WAAW,WAAW,CAAC;;;2BAoC5B;qBAmCd;sBAGC;wBAME;sBAGF;gBAGN;;;gBArFO,CACd,GAAG;;;;;;;;;;;;;;MAeJ;;CAED,SAAS;EAGP,MAAM,YADQ,KAAK,eAAe,OAAQ,MACjB;AACzB,OAAK,MAAM,YAAY,aAAa,UAAU,UAAU,CAAC;EAIzD,MAAM,WAAW,KAAK,mBAAmB;AACzC,OAAK,MAAM,YAAY,uBAAuB,GAAG,SAAS,IAAI;AAG9D,OAAK,MAAM,YAAY,cAAc,KAAK,aAAa,UAAU,CAAC;AAElE,SAAO,IAAI,GAAG,KAAK;;CAKrB,oBAAoB;AAClB,QAAM,mBAAmB;AAIzB,MAAI,CAAC,KAAK,kBAER,MAAK,eAAe,WAAW;AAC7B,+BAA4B;IAC1B,MAAM,aAAa,KAAK,eAAe;AACvC,SAAK,MAAM,aAAa,WAGtB,KAAI,UAAU,cAAc,YAAY;AACtC,eAAU,QAAQ;AAClB,eAAU,MAAM;AAChB,eAAU,OAAO;eACR,UAAU,cAAc,UAEjC,WAAU,OAAO;AAKrB,SAAK,oBAAoB;KAGzB;IACF;;CAsBN,IAAI,cAAc;AAIhB,UAFmB,KAAK,QAAQ,UAAU,EACN,eAAe,MACzB,KAAK,kBAAkB;;CAGnD,IAAI,YAAY;AAGd,UAFmB,KAAK,QAAQ,UAAU,EACN,eAAe,MACzB,KAAK,gBAAgB;;CAGjD,IAAI,aAAqB;AACvB,SAAO,KAAK,eAAe,KAAK;;;YAhCjC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;4BAtF5C,cAAc,kBAAkB"}

package/dist/elements/EFThumbnailStrip.d.ts

@@ -1,12 +1,12 @@
 import { EFVideo } from "./EFVideo.js";
-import * as lit25 from "lit";
+import * as lit27 from "lit";
 import { LitElement } from "lit";
-import * as lit_html22 from "lit-html";
+import * as lit_html24 from "lit-html";
 import * as lit_html_directives_ref6 from "lit-html/directives/ref";
 
 //#region src/elements/EFThumbnailStrip.d.ts
 declare class EFThumbnailStrip extends LitElement {
-  static styles: lit25.CSSResult[];
+  static styles: lit27.CSSResult[];
   canvasRef: lit_html_directives_ref6.Ref<HTMLCanvasElement>;
   private _targetController;
   private _targetElement;
@@ -82,7 +82,7 @@ declare class EFThumbnailStrip extends LitElement {
    * Convert Canvas to ImageData for caching
    */
   private canvasToImageData;
-  render(): lit_html22.TemplateResult<1>;
+  render(): lit_html24.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {