@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

package/dist/gui/EFTimeDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFTimeDisplay.js","names":["EFTimeDisplay"],"sources":["../../src/gui/EFTimeDisplay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { efContext } from \"./efContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\n@customElement(\"ef-time-display\")\nexport class EFTimeDisplay extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--ef-font-family, system-ui);\n      font-size: var(--ef-font-size-xs, 0.75rem);\n      color: var(--ef-text-color, rgb(75 85 99));\n      white-space: nowrap;\n    }\n  `;\n\n  @consume({ context: currentTimeContext, subscribe: true })\n  currentTimeMs = Number.NaN;\n\n  @consume({ context: durationContext, subscribe: true })\n  durationMs = 0;\n\n  private formatTime(ms: number): string {\n    // Handle NaN, undefined, null, or negative values\n    if (!Number.isFinite(ms) || ms < 0) {\n      return \"0:00\";\n    }\n\n    const totalSeconds = Math.floor(ms / 1000);\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n  }\n\n  render() {\n    const currentTime = this.currentTimeMs;\n    const totalTime = this.durationMs;\n\n    return html`\n      <span part=\"time\">\n        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-time-display\": EFTimeDisplay;\n  }\n}\n"],"mappings":";;;;;;;;;;AASO,0BAAMA,wBAAsB,qBAAqB,YAAY,UAAU,CAAC;;;uBAY7D;oBAGH;;;gBAdG,GAAG;;;;;;;;;;CAgBnB,AAAQ,WAAW,IAAoB;AAErC,MAAI,CAAC,OAAO,SAAS,GAAG,IAAI,KAAK,EAC/B,QAAO;EAGT,MAAM,eAAe,KAAK,MAAM,KAAK,IAAK;AAG1C,SAAO,GAFS,KAAK,MAAM,eAAe,GAAG,CAE3B,IADF,eAAe,IACF,UAAU,CAAC,SAAS,GAAG,IAAI;;CAG1D,SAAS;EACP,MAAM,cAAc,KAAK;EACzB,MAAM,YAAY,KAAK;AAEvB,SAAO,IAAI;;UAEL,KAAK,WAAW,YAAY,CAAC,KAAK,KAAK,WAAW,UAAU,CAAC;;;;;YAxBpE,QAAQ;CAAE,SAAS;CAAoB,WAAW;CAAM,CAAC;YAGzD,QAAQ;CAAE,SAAS;CAAiB,WAAW;CAAM,CAAC;4BAfxD,cAAc,kBAAkB"}
+{"version":3,"file":"EFTimeDisplay.js","names":["EFTimeDisplay"],"sources":["../../src/gui/EFTimeDisplay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { efContext } from \"./efContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\n@customElement(\"ef-time-display\")\nexport class EFTimeDisplay extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      font-family: var(--ef-font-family, system-ui);\n      font-size: var(--ef-font-size-xs, 0.75rem);\n      color: var(--ef-text-color, rgb(75 85 99));\n      white-space: nowrap;\n    }\n\n    ::part(time) {}\n  `;\n\n  @consume({ context: currentTimeContext, subscribe: true })\n  currentTimeMs = Number.NaN;\n\n  @consume({ context: durationContext, subscribe: true })\n  durationMs = 0;\n\n  private formatTime(ms: number): string {\n    // Handle NaN, undefined, null, or negative values\n    if (!Number.isFinite(ms) || ms < 0) {\n      return \"0:00\";\n    }\n\n    const totalSeconds = Math.floor(ms / 1000);\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n  }\n\n  render() {\n    const currentTime = this.currentTimeMs;\n    const totalTime = this.durationMs;\n\n    return html`\n      <span part=\"time\">\n        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-time-display\": EFTimeDisplay;\n  }\n}\n"],"mappings":";;;;;;;;;;AASO,0BAAMA,wBAAsB,qBAAqB,YAAY,UAAU,CAAC;;;uBAe7D;oBAGH;;;gBAjBG,GAAG;;;;;;;;;;;;;CAmBnB,AAAQ,WAAW,IAAoB;AAErC,MAAI,CAAC,OAAO,SAAS,GAAG,IAAI,KAAK,EAC/B,QAAO;EAGT,MAAM,eAAe,KAAK,MAAM,KAAK,IAAK;AAG1C,SAAO,GAFS,KAAK,MAAM,eAAe,GAAG,CAE3B,IADF,eAAe,IACF,UAAU,CAAC,SAAS,GAAG,IAAI;;CAG1D,SAAS;EACP,MAAM,cAAc,KAAK;EACzB,MAAM,YAAY,KAAK;AAEvB,SAAO,IAAI;;UAEL,KAAK,WAAW,YAAY,CAAC,KAAK,KAAK,WAAW,UAAU,CAAC;;;;;YAxBpE,QAAQ;CAAE,SAAS;CAAoB,WAAW;CAAM,CAAC;YAGzD,QAAQ;CAAE,SAAS;CAAiB,WAAW;CAAM,CAAC;4BAlBxD,cAAc,kBAAkB"}

package/dist/gui/EFTimelineRuler.d.ts

@@ -0,0 +1,71 @@
+import { TimelineState } from "./timeline/timelineStateContext.js";
+import * as lit37 from "lit";
+import { LitElement } from "lit";
+import * as lit_html36 from "lit-html";
+
+//#region src/gui/EFTimelineRuler.d.ts
+/**
+ * Quantize a time value to the nearest frame boundary.
+ * This ensures frame markers align perfectly with playhead position.
+ */
+declare function quantizeToFrameTimeMs(timeMs: number, fps: number): number;
+/**
+ * Calculate the duration of a single frame in milliseconds.
+ */
+declare function calculateFrameIntervalMs(fps: number): number;
+/**
+ * Calculate pixels per frame given frame interval and zoom scale.
+ * @param frameIntervalMs Duration of one frame in ms
+ * @param pixelsPerMs Current zoom level (pixels per millisecond)
+ */
+declare function calculatePixelsPerFrame(frameIntervalMs: number, pixelsPerMs: number): number;
+/**
+ * Determine if frame markers should be visible at the current zoom level.
+ * Frame markers appear when each frame is at least MIN_FRAME_SPACING_PX wide.
+ */
+declare function shouldShowFrameMarkers(pixelsPerFrame: number, minSpacing?: number): boolean;
+declare class EFTimelineRuler extends LitElement {
+  static styles: lit37.CSSResult[];
+  durationMs: number;
+  contextDurationMs: number;
+  timelineState?: TimelineState;
+  fps: number;
+  /** Full content width in pixels (for virtualization) */
+  contentWidth: number;
+  private containerRef;
+  private canvasRef;
+  private resizeObserver?;
+  private viewportWidth;
+  /** Canvas viewport left position for virtualization */
+  private _canvasViewportLeft;
+  /** Canvas viewport width for virtualization */
+  private _canvasViewportWidth;
+  /** Last rendered scroll position - for detecting scroll changes */
+  private _lastRenderedScrollLeft;
+  /** Last rendered viewport width - for detecting viewport changes */
+  private _lastRenderedViewportWidth;
+  get effectiveDurationMs(): number;
+  get pixelsPerMs(): number;
+  get scrollLeft(): number;
+  /**
+   * Calculate canvas viewport bounds for virtualization.
+   * Returns the left position and width of the canvas viewport.
+   */
+  private calculateCanvasViewport;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected firstUpdated(): void;
+  protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+  private calculateLabelInterval;
+  private getVisibleLabels;
+  private renderCanvas;
+  render(): lit_html36.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-timeline-ruler": EFTimelineRuler;
+  }
+}
+//#endregion
+export { EFTimelineRuler, calculateFrameIntervalMs, calculatePixelsPerFrame, quantizeToFrameTimeMs, shouldShowFrameMarkers };
+//# sourceMappingURL=EFTimelineRuler.d.ts.map

package/dist/gui/EFTimelineRuler.js

@@ -0,0 +1,320 @@
+import { durationContext } from "./durationContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { DEFAULT_PIXELS_PER_MS, timelineStateContext } from "./timeline/timelineStateContext.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+
+//#region src/gui/EFTimelineRuler.ts
+const MIN_LABEL_SPACING_PX = 80;
+const MIN_FRAME_SPACING_PX = 5;
+/** Maximum canvas width for ruler virtualization */
+const MAX_RULER_CANVAS_WIDTH = 2e3;
+/** Buffer pixels on each side of viewport for smooth scrolling */
+const RULER_CANVAS_BUFFER = 200;
+/**
+* Quantize a time value to the nearest frame boundary.
+* This ensures frame markers align perfectly with playhead position.
+*/
+function quantizeToFrameTimeMs(timeMs, fps) {
+	if (!fps || fps <= 0) return timeMs;
+	const frameDurationS = 1 / fps;
+	const timeSeconds = timeMs / 1e3;
+	return Math.round(timeSeconds / frameDurationS) * frameDurationS * 1e3;
+}
+/**
+* Calculate the duration of a single frame in milliseconds.
+*/
+function calculateFrameIntervalMs(fps) {
+	if (fps <= 0) return 1e3 / 30;
+	return 1e3 / fps;
+}
+/**
+* Calculate pixels per frame given frame interval and zoom scale.
+* @param frameIntervalMs Duration of one frame in ms
+* @param pixelsPerMs Current zoom level (pixels per millisecond)
+*/
+function calculatePixelsPerFrame(frameIntervalMs, pixelsPerMs) {
+	return frameIntervalMs * pixelsPerMs;
+}
+/**
+* Determine if frame markers should be visible at the current zoom level.
+* Frame markers appear when each frame is at least MIN_FRAME_SPACING_PX wide.
+*/
+function shouldShowFrameMarkers(pixelsPerFrame, minSpacing = MIN_FRAME_SPACING_PX) {
+	return pixelsPerFrame >= minSpacing;
+}
+let EFTimelineRuler = class EFTimelineRuler$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.durationMs = 0;
+		this.contextDurationMs = 0;
+		this.fps = 30;
+		this.contentWidth = 0;
+		this.containerRef = createRef();
+		this.canvasRef = createRef();
+		this.viewportWidth = 0;
+		this._canvasViewportLeft = 0;
+		this._canvasViewportWidth = 0;
+		this._lastRenderedScrollLeft = -1;
+		this._lastRenderedViewportWidth = 0;
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        position: relative;
+        height: 100%;
+        pointer-events: none;
+      }
+      
+      .ruler-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      
+      .canvas-viewport {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        /* left and width set via inline styles for virtualization */
+      }
+      
+      canvas {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+      }
+      
+      .label {
+        position: absolute;
+        top: 50%;
+        font-size: 10px;
+        color: rgb(156, 163, 175);
+        font-family: ui-monospace, monospace;
+        white-space: nowrap;
+        pointer-events: none;
+        user-select: none;
+      }
+    `];
+	}
+	get effectiveDurationMs() {
+		return this.durationMs || this.contextDurationMs || 0;
+	}
+	get pixelsPerMs() {
+		return this.timelineState?.pixelsPerMs ?? DEFAULT_PIXELS_PER_MS;
+	}
+	get scrollLeft() {
+		return this.timelineState?.viewportScrollLeft ?? 0;
+	}
+	/**
+	* Calculate canvas viewport bounds for virtualization.
+	* Returns the left position and width of the canvas viewport.
+	*/
+	calculateCanvasViewport() {
+		const totalWidth = this.contentWidth || this.viewportWidth;
+		if (totalWidth <= MAX_RULER_CANVAS_WIDTH) return {
+			left: 0,
+			width: totalWidth
+		};
+		const viewportScrollLeft = this.scrollLeft;
+		const viewportWidth = this.timelineState?.viewportWidth ?? this.viewportWidth;
+		const canvasLeft = Math.max(0, viewportScrollLeft - RULER_CANVAS_BUFFER);
+		let canvasWidth = Math.min(totalWidth, viewportScrollLeft + viewportWidth + RULER_CANVAS_BUFFER) - canvasLeft;
+		if (canvasWidth > MAX_RULER_CANVAS_WIDTH) canvasWidth = MAX_RULER_CANVAS_WIDTH;
+		return {
+			left: canvasLeft,
+			width: canvasWidth
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.resizeObserver) this.resizeObserver.disconnect();
+	}
+	firstUpdated() {
+		const container = this.containerRef.value;
+		if (container) {
+			this.resizeObserver = new ResizeObserver((entries) => {
+				const entry = entries[0];
+				if (entry) {
+					const width = entry.contentRect.width;
+					if (width !== this.viewportWidth) this.viewportWidth = width;
+				}
+			});
+			this.resizeObserver.observe(container);
+			this.viewportWidth = container.clientWidth;
+		}
+	}
+	updated(changedProperties) {
+		const currentScrollLeft = this.scrollLeft;
+		const currentViewportWidth = this.timelineState?.viewportWidth ?? this.viewportWidth;
+		const scrollChanged = currentScrollLeft !== this._lastRenderedScrollLeft;
+		const viewportChanged = currentViewportWidth !== this._lastRenderedViewportWidth;
+		const pixelsPerMsChanged = changedProperties.has("timelineState") || changedProperties.has("pixelsPerMs");
+		const contentWidthChanged = changedProperties.has("contentWidth");
+		const durationChanged = changedProperties.has("durationMs") || changedProperties.has("contextDurationMs");
+		if (scrollChanged || viewportChanged || pixelsPerMsChanged || contentWidthChanged || durationChanged || this._lastRenderedScrollLeft < 0) {
+			this.renderCanvas();
+			this._lastRenderedScrollLeft = currentScrollLeft;
+			this._lastRenderedViewportWidth = currentViewportWidth;
+		}
+	}
+	calculateLabelInterval() {
+		const pixelsPerSecond = this.pixelsPerMs * 1e3;
+		for (const intervalS of [
+			.1,
+			.25,
+			.5,
+			1,
+			2,
+			5,
+			10,
+			30,
+			60
+		]) if (intervalS * pixelsPerSecond >= MIN_LABEL_SPACING_PX) return intervalS * 1e3;
+		return 6e4;
+	}
+	getVisibleLabels() {
+		const canvasWidth = this._canvasViewportWidth;
+		if (canvasWidth <= 0) return [];
+		const pixelsPerMs = this.pixelsPerMs;
+		const canvasLeft = this._canvasViewportLeft;
+		const intervalMs = this.calculateLabelInterval();
+		const visibleStartTimeMs = Math.max(0, canvasLeft / pixelsPerMs - intervalMs);
+		const visibleEndTimeMs = (canvasLeft + canvasWidth) / pixelsPerMs + intervalMs;
+		const firstLabelIndex = Math.floor(visibleStartTimeMs / intervalMs);
+		const lastLabelIndex = Math.ceil(visibleEndTimeMs / intervalMs);
+		const labels = [];
+		for (let i = firstLabelIndex; i <= lastLabelIndex; i++) {
+			const timeMs = i * intervalMs;
+			if (timeMs < 0) continue;
+			const viewportX = timeMs * pixelsPerMs - canvasLeft;
+			if (viewportX >= -50 && viewportX <= canvasWidth + 50) {
+				const timeSeconds = timeMs / 1e3;
+				const text = timeSeconds % 1 === 0 ? `${timeSeconds}s` : `${timeSeconds.toFixed(1)}s`;
+				labels.push({
+					timeMs,
+					viewportX,
+					text
+				});
+			}
+		}
+		return labels;
+	}
+	renderCanvas() {
+		const canvas = this.canvasRef.value;
+		const container = this.containerRef.value;
+		if (!canvas || !container) return;
+		const viewport = this.calculateCanvasViewport();
+		this._canvasViewportLeft = viewport.left;
+		this._canvasViewportWidth = viewport.width;
+		const width = viewport.width;
+		const height = container.getBoundingClientRect().height;
+		if (width <= 0 || height <= 0) return;
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		canvas.style.width = `${width}px`;
+		canvas.style.height = `${height}px`;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		ctx.scale(dpr, dpr);
+		ctx.clearRect(0, 0, width, height);
+		const pixelsPerMs = this.pixelsPerMs;
+		const canvasLeft = viewport.left;
+		ctx.strokeStyle = "rgb(156, 163, 175)";
+		ctx.lineWidth = 1;
+		const labelIntervalMs = this.calculateLabelInterval();
+		const visibleStartTimeMs = Math.max(0, canvasLeft / pixelsPerMs - labelIntervalMs);
+		const visibleEndTimeMs = (canvasLeft + width) / pixelsPerMs + labelIntervalMs;
+		const firstTickIndex = Math.floor(visibleStartTimeMs / labelIntervalMs);
+		const lastTickIndex = Math.ceil(visibleEndTimeMs / labelIntervalMs);
+		for (let i = firstTickIndex; i <= lastTickIndex; i++) {
+			const timeMs = i * labelIntervalMs;
+			if (timeMs < 0) continue;
+			const canvasX = timeMs * pixelsPerMs - canvasLeft;
+			if (canvasX >= -1 && canvasX <= width + 1) {
+				ctx.beginPath();
+				ctx.moveTo(canvasX, 0);
+				ctx.lineTo(canvasX, height * .4);
+				ctx.stroke();
+			}
+		}
+		const frameIntervalMs = 1e3 / this.fps;
+		if (frameIntervalMs * pixelsPerMs >= MIN_FRAME_SPACING_PX) {
+			ctx.strokeStyle = "rgb(107, 114, 128)";
+			ctx.lineWidth = 1;
+			const firstFrameIndex = Math.floor(visibleStartTimeMs / frameIntervalMs);
+			const lastFrameIndex = Math.ceil(visibleEndTimeMs / frameIntervalMs);
+			for (let i = firstFrameIndex; i <= lastFrameIndex; i++) {
+				const timeMs = i * frameIntervalMs;
+				if (timeMs < 0) continue;
+				if (timeMs % labelIntervalMs === 0) continue;
+				const canvasX = timeMs * pixelsPerMs - canvasLeft;
+				if (canvasX >= -1 && canvasX <= width + 1) {
+					ctx.beginPath();
+					ctx.moveTo(canvasX, 0);
+					ctx.lineTo(canvasX, height * .25);
+					ctx.stroke();
+				}
+			}
+		}
+	}
+	render() {
+		const visibleLabels = this.getVisibleLabels();
+		const canvasViewportStyles = styleMap({
+			left: `${this._canvasViewportLeft}px`,
+			width: `${this._canvasViewportWidth}px`
+		});
+		return html`
+      <div ${ref(this.containerRef)} class="ruler-container">
+        <div class="canvas-viewport" style=${canvasViewportStyles}>
+          <canvas ${ref(this.canvasRef)}></canvas>
+          ${visibleLabels.map(({ viewportX, text }) => html`
+            <span 
+              class="label" 
+              style="transform: translateX(${viewportX}px)"
+            >${text}</span>
+          `)}
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: "duration-ms"
+})], EFTimelineRuler.prototype, "durationMs", void 0);
+__decorate([consume({
+	context: durationContext,
+	subscribe: true
+})], EFTimelineRuler.prototype, "contextDurationMs", void 0);
+__decorate([consume({
+	context: timelineStateContext,
+	subscribe: true
+})], EFTimelineRuler.prototype, "timelineState", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "fps"
+})], EFTimelineRuler.prototype, "fps", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "content-width"
+})], EFTimelineRuler.prototype, "contentWidth", void 0);
+__decorate([state()], EFTimelineRuler.prototype, "viewportWidth", void 0);
+__decorate([state()], EFTimelineRuler.prototype, "_canvasViewportLeft", void 0);
+__decorate([state()], EFTimelineRuler.prototype, "_canvasViewportWidth", void 0);
+EFTimelineRuler = __decorate([customElement("ef-timeline-ruler")], EFTimelineRuler);
+
+//#endregion
+export { EFTimelineRuler, calculateFrameIntervalMs, calculatePixelsPerFrame, quantizeToFrameTimeMs, shouldShowFrameMarkers };
+//# sourceMappingURL=EFTimelineRuler.js.map

package/dist/gui/EFTimelineRuler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFTimelineRuler.js","names":["EFTimelineRuler","labels: VisibleLabel[]"],"sources":["../../src/gui/EFTimelineRuler.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport {\n  timelineStateContext,\n  type TimelineState,\n  DEFAULT_PIXELS_PER_MS,\n} from \"./timeline/timelineStateContext.js\";\n\nconst MIN_LABEL_SPACING_PX = 80;\nconst MIN_FRAME_SPACING_PX = 5;\n\n/** Maximum canvas width for ruler virtualization */\nconst MAX_RULER_CANVAS_WIDTH = 2000;\n\n/** Buffer pixels on each side of viewport for smooth scrolling */\nconst RULER_CANVAS_BUFFER = 200;\n\n/**\n * Quantize a time value to the nearest frame boundary.\n * This ensures frame markers align perfectly with playhead position.\n */\nexport function quantizeToFrameTimeMs(timeMs: number, fps: number): number {\n  if (!fps || fps <= 0) return timeMs;\n  const frameDurationS = 1 / fps;\n  const timeSeconds = timeMs / 1000;\n  const quantizedSeconds =\n    Math.round(timeSeconds / frameDurationS) * frameDurationS;\n  return quantizedSeconds * 1000;\n}\n\n/**\n * Calculate the duration of a single frame in milliseconds.\n */\nexport function calculateFrameIntervalMs(fps: number): number {\n  if (fps <= 0) return 1000 / 30; // fallback to 30fps\n  return 1000 / fps;\n}\n\n/**\n * Calculate pixels per frame given frame interval and zoom scale.\n * @param frameIntervalMs Duration of one frame in ms\n * @param pixelsPerMs Current zoom level (pixels per millisecond)\n */\nexport function calculatePixelsPerFrame(\n  frameIntervalMs: number,\n  pixelsPerMs: number,\n): number {\n  return frameIntervalMs * pixelsPerMs;\n}\n\n/**\n * Determine if frame markers should be visible at the current zoom level.\n * Frame markers appear when each frame is at least MIN_FRAME_SPACING_PX wide.\n */\nexport function shouldShowFrameMarkers(\n  pixelsPerFrame: number,\n  minSpacing: number = MIN_FRAME_SPACING_PX,\n): boolean {\n  return pixelsPerFrame >= minSpacing;\n}\n\ninterface VisibleLabel {\n  timeMs: number;\n  viewportX: number;\n  text: string;\n}\n\n@customElement(\"ef-timeline-ruler\")\nexport class EFTimelineRuler extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        height: 100%;\n        pointer-events: none;\n      }\n      \n      .ruler-container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n      \n      .canvas-viewport {\n        position: absolute;\n        top: 0;\n        height: 100%;\n        /* left and width set via inline styles for virtualization */\n      }\n      \n      canvas {\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        pointer-events: none;\n      }\n      \n      .label {\n        position: absolute;\n        top: 50%;\n        font-size: 10px;\n        color: rgb(156, 163, 175);\n        font-family: ui-monospace, monospace;\n        white-space: nowrap;\n        pointer-events: none;\n        user-select: none;\n      }\n    `,\n  ];\n\n  @property({ type: Number, attribute: \"duration-ms\" })\n  durationMs = 0;\n\n  @consume({ context: durationContext, subscribe: true })\n  contextDurationMs = 0;\n\n  @consume({ context: timelineStateContext, subscribe: true })\n  timelineState?: TimelineState;\n\n  @property({ type: Number, attribute: \"fps\" })\n  fps = 30;\n\n  /** Full content width in pixels (for virtualization) */\n  @property({ type: Number, attribute: \"content-width\" })\n  contentWidth = 0;\n\n  private containerRef = createRef<HTMLDivElement>();\n  private canvasRef = createRef<HTMLCanvasElement>();\n  private resizeObserver?: ResizeObserver;\n\n  @state()\n  private viewportWidth = 0;\n\n  /** Canvas viewport left position for virtualization */\n  @state()\n  private _canvasViewportLeft = 0;\n\n  /** Canvas viewport width for virtualization */\n  @state()\n  private _canvasViewportWidth = 0;\n\n  /** Last rendered scroll position - for detecting scroll changes */\n  private _lastRenderedScrollLeft = -1;\n\n  /** Last rendered viewport width - for detecting viewport changes */\n  private _lastRenderedViewportWidth = 0;\n\n  get effectiveDurationMs(): number {\n    return this.durationMs || this.contextDurationMs || 0;\n  }\n\n  get pixelsPerMs(): number {\n    return this.timelineState?.pixelsPerMs ?? DEFAULT_PIXELS_PER_MS;\n  }\n\n  get scrollLeft(): number {\n    return this.timelineState?.viewportScrollLeft ?? 0;\n  }\n\n  /**\n   * Calculate canvas viewport bounds for virtualization.\n   * Returns the left position and width of the canvas viewport.\n   */\n  private calculateCanvasViewport(): { left: number; width: number } {\n    const totalWidth = this.contentWidth || this.viewportWidth;\n    \n    // If content is small enough, no virtualization needed\n    if (totalWidth <= MAX_RULER_CANVAS_WIDTH) {\n      return { left: 0, width: totalWidth };\n    }\n\n    // Get visible region from scroll position\n    const viewportScrollLeft = this.scrollLeft;\n    const viewportWidth = this.timelineState?.viewportWidth ?? this.viewportWidth;\n\n    // Calculate canvas viewport with buffer for smooth scrolling\n    const canvasLeft = Math.max(0, viewportScrollLeft - RULER_CANVAS_BUFFER);\n    const canvasRight = Math.min(\n      totalWidth,\n      viewportScrollLeft + viewportWidth + RULER_CANVAS_BUFFER\n    );\n\n    // Cap canvas width at maximum\n    let canvasWidth = canvasRight - canvasLeft;\n    if (canvasWidth > MAX_RULER_CANVAS_WIDTH) {\n      canvasWidth = MAX_RULER_CANVAS_WIDTH;\n    }\n\n    return { left: canvasLeft, width: canvasWidth };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  protected firstUpdated(): void {\n    const container = this.containerRef.value;\n    if (container) {\n      this.resizeObserver = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (entry) {\n          const width = entry.contentRect.width;\n          if (width !== this.viewportWidth) {\n            this.viewportWidth = width;\n          }\n        }\n      });\n      this.resizeObserver.observe(container);\n      this.viewportWidth = container.clientWidth;\n    }\n  }\n\n  protected updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    // Check if scroll position or viewport changed from context\n    const currentScrollLeft = this.scrollLeft;\n    const currentViewportWidth = this.timelineState?.viewportWidth ?? this.viewportWidth;\n    \n    // Check if scroll changed, viewport changed, or other relevant properties changed\n    const scrollChanged = currentScrollLeft !== this._lastRenderedScrollLeft;\n    const viewportChanged = currentViewportWidth !== this._lastRenderedViewportWidth;\n    const pixelsPerMsChanged = changedProperties.has(\"timelineState\") || \n                               changedProperties.has(\"pixelsPerMs\");\n    const contentWidthChanged = changedProperties.has(\"contentWidth\");\n    const durationChanged = changedProperties.has(\"durationMs\") || \n                          changedProperties.has(\"contextDurationMs\");\n    \n    // Only render if something actually changed\n    if (scrollChanged || viewportChanged || pixelsPerMsChanged || \n        contentWidthChanged || durationChanged || \n        this._lastRenderedScrollLeft < 0) {\n      this.renderCanvas();\n      this._lastRenderedScrollLeft = currentScrollLeft;\n      this._lastRenderedViewportWidth = currentViewportWidth;\n    }\n  }\n\n  private calculateLabelInterval(): number {\n    const pixelsPerMs = this.pixelsPerMs;\n    const pixelsPerSecond = pixelsPerMs * 1000;\n\n    const intervals = [0.1, 0.25, 0.5, 1, 2, 5, 10, 30, 60];\n\n    for (const intervalS of intervals) {\n      const pixelsPerInterval = intervalS * pixelsPerSecond;\n      if (pixelsPerInterval >= MIN_LABEL_SPACING_PX) {\n        return intervalS * 1000;\n      }\n    }\n\n    return 60000;\n  }\n\n  private getVisibleLabels(): VisibleLabel[] {\n    const canvasWidth = this._canvasViewportWidth;\n    if (canvasWidth <= 0) return [];\n\n    const pixelsPerMs = this.pixelsPerMs;\n    const canvasLeft = this._canvasViewportLeft;\n\n    const intervalMs = this.calculateLabelInterval();\n\n    // Generate labels for the canvas viewport range\n    const visibleStartTimeMs = Math.max(\n      0,\n      canvasLeft / pixelsPerMs - intervalMs,\n    );\n    const visibleEndTimeMs =\n      (canvasLeft + canvasWidth) / pixelsPerMs + intervalMs;\n\n    const firstLabelIndex = Math.floor(visibleStartTimeMs / intervalMs);\n    const lastLabelIndex = Math.ceil(visibleEndTimeMs / intervalMs);\n\n    const labels: VisibleLabel[] = [];\n\n    for (let i = firstLabelIndex; i <= lastLabelIndex; i++) {\n      const timeMs = i * intervalMs;\n      if (timeMs < 0) continue;\n\n      const absoluteX = timeMs * pixelsPerMs;\n      // Position relative to canvas viewport (canvas is positioned at canvasLeft)\n      const viewportX = absoluteX - canvasLeft;\n\n      if (viewportX >= -50 && viewportX <= canvasWidth + 50) {\n        const timeSeconds = timeMs / 1000;\n        const text =\n          timeSeconds % 1 === 0\n            ? `${timeSeconds}s`\n            : `${timeSeconds.toFixed(1)}s`;\n\n        labels.push({ timeMs, viewportX, text });\n      }\n    }\n\n    return labels;\n  }\n\n  private renderCanvas(): void {\n    const canvas = this.canvasRef.value;\n    const container = this.containerRef.value;\n    if (!canvas || !container) return;\n\n    // Calculate virtualized canvas viewport\n    const viewport = this.calculateCanvasViewport();\n    this._canvasViewportLeft = viewport.left;\n    this._canvasViewportWidth = viewport.width;\n\n    const width = viewport.width;\n    const height = container.getBoundingClientRect().height;\n\n    if (width <= 0 || height <= 0) return;\n\n    const dpr = window.devicePixelRatio || 1;\n    canvas.width = width * dpr;\n    canvas.height = height * dpr;\n    canvas.style.width = `${width}px`;\n    canvas.style.height = `${height}px`;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    ctx.scale(dpr, dpr);\n    ctx.clearRect(0, 0, width, height);\n\n    const pixelsPerMs = this.pixelsPerMs;\n    const canvasLeft = viewport.left;\n\n    // Time label ticks - more prominent (gray-400)\n    ctx.strokeStyle = \"rgb(156, 163, 175)\";\n    ctx.lineWidth = 1;\n\n    const labelIntervalMs = this.calculateLabelInterval();\n    // Fill the canvas viewport with ticks\n    const visibleStartTimeMs = Math.max(\n      0,\n      canvasLeft / pixelsPerMs - labelIntervalMs,\n    );\n    const visibleEndTimeMs =\n      (canvasLeft + width) / pixelsPerMs + labelIntervalMs;\n\n    const firstTickIndex = Math.floor(visibleStartTimeMs / labelIntervalMs);\n    const lastTickIndex = Math.ceil(visibleEndTimeMs / labelIntervalMs);\n\n    for (let i = firstTickIndex; i <= lastTickIndex; i++) {\n      const timeMs = i * labelIntervalMs;\n      if (timeMs < 0) continue;\n\n      const absoluteX = timeMs * pixelsPerMs;\n      // Position relative to canvas viewport\n      const canvasX = absoluteX - canvasLeft;\n\n      if (canvasX >= -1 && canvasX <= width + 1) {\n        ctx.beginPath();\n        ctx.moveTo(canvasX, 0);\n        ctx.lineTo(canvasX, height * 0.4);\n        ctx.stroke();\n      }\n    }\n\n    const frameIntervalMs = 1000 / this.fps;\n    const pixelsPerFrame = frameIntervalMs * pixelsPerMs;\n\n    if (pixelsPerFrame >= MIN_FRAME_SPACING_PX) {\n      // Frame markers should be lighter than background (gray-500) to be visible\n      ctx.strokeStyle = \"rgb(107, 114, 128)\";\n      ctx.lineWidth = 1;\n\n      const firstFrameIndex = Math.floor(visibleStartTimeMs / frameIntervalMs);\n      const lastFrameIndex = Math.ceil(visibleEndTimeMs / frameIntervalMs);\n\n      for (let i = firstFrameIndex; i <= lastFrameIndex; i++) {\n        const timeMs = i * frameIntervalMs;\n        if (timeMs < 0) continue;\n\n        if (timeMs % labelIntervalMs === 0) continue;\n\n        const absoluteX = timeMs * pixelsPerMs;\n        // Position relative to canvas viewport\n        const canvasX = absoluteX - canvasLeft;\n\n        if (canvasX >= -1 && canvasX <= width + 1) {\n          ctx.beginPath();\n          ctx.moveTo(canvasX, 0);\n          ctx.lineTo(canvasX, height * 0.25);\n          ctx.stroke();\n        }\n      }\n    }\n  }\n\n  render() {\n    const visibleLabels = this.getVisibleLabels();\n    \n    const canvasViewportStyles = styleMap({\n      left: `${this._canvasViewportLeft}px`,\n      width: `${this._canvasViewportWidth}px`,\n    });\n\n    return html`\n      <div ${ref(this.containerRef)} class=\"ruler-container\">\n        <div class=\"canvas-viewport\" style=${canvasViewportStyles}>\n          <canvas ${ref(this.canvasRef)}></canvas>\n          ${visibleLabels.map(\n            ({ viewportX, text }) => html`\n            <span \n              class=\"label\" \n              style=\"transform: translateX(${viewportX}px)\"\n            >${text}</span>\n          `,\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-timeline-ruler\": EFTimelineRuler;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/EFToggleLoop.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit19 from "lit";
+import * as lit21 from "lit";
 import { LitElement } from "lit";
-import * as lit_html17 from "lit-html";
+import * as lit_html21 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: lit21.CSSResult[];
   get context(): ControllableInterface | null;
-  render(): lit_html17.TemplateResult<1>;
+  render(): lit_html21.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 lit18 from "lit";
 import { LitElement } from "lit";
-import * as lit_html14 from "lit-html";
+import * as lit_html18 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: lit18.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html14.TemplateResult<1>;
+  render(): lit_html18.TemplateResult<1>;
   togglePlay: () => void;
   private getPlaybackController;
 }

package/dist/gui/EFTransformHandles.d.ts

@@ -0,0 +1,91 @@
+import { PanZoomTransform } from "../elements/EFPanZoom.js";
+import * as lit28 from "lit";
+import { LitElement } from "lit";
+import * as lit_html27 from "lit-html";
+
+//#region src/gui/EFTransformHandles.d.ts
+interface TransformBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation?: number;
+}
+/**
+ * Interaction mode enumeration.
+ * Only one mode can be active at a time (invariant).
+ */
+type InteractionMode = "idle" | "dragging" | "resizing" | "rotating";
+declare class EFTransformHandles extends LitElement {
+  bounds: TransformBounds;
+  minSize: number;
+  target?: string;
+  panZoomTransformFromContext?: PanZoomTransform;
+  canvasScale: number;
+  enableRotation: boolean;
+  enableResize: boolean;
+  cornersOnly: boolean;
+  lockAspectRatio: boolean;
+  enableDrag: boolean;
+  rotationStep?: number;
+  /**
+   * Current interaction mode.
+   * Invariant: Only one mode active at a time.
+   */
+  interactionMode: InteractionMode;
+  /**
+   * Active resize handle when in "resizing" mode.
+   * Only valid when interactionMode === "resizing".
+   */
+  private activeResizeHandle;
+  /**
+   * Mouse start position for calculating deltas.
+   * Only valid during active interaction.
+   */
+  private mouseStart;
+  /**
+   * Initial bounds at interaction start - NEVER mutated during interaction.
+   * All calculations derive from this + mouse deltas.
+   * Note: Not a @state() property to avoid re-renders during interaction.
+   */
+  private initialBounds;
+  static styles: lit28.CSSResult;
+  private resizeObserver?;
+  /**
+   * Single source of truth for zoom scale.
+   * Priority: context > prop > 1.0
+   */
+  private getZoomScale;
+  /**
+   * Convert screen pixel bounds to canvas coordinates.
+   */
+  private screenToCanvas;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Transition interaction mode state machine.
+   * Ensures only one mode is active at a time (invariant).
+   */
+  private transitionInteractionMode;
+  private handleMouseDown;
+  private handleResizeMouseDown;
+  private handleRotateMouseDown;
+  /**
+   * Dispatch bounds change event (one-way data flow).
+   * Parent updates element, then reads element and updates handle bounds prop.
+   * We don't modify this.bounds directly - always render from prop.
+   */
+  private dispatchBoundsChange;
+  private handleMouseMove;
+  private handleMouseUp;
+  private cleanup;
+  render(): lit_html27.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-transform-handles": EFTransformHandles;
+  }
+}
+//#endregion
+export { EFTransformHandles, TransformBounds };
+//# sourceMappingURL=EFTransformHandles.d.ts.map