@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/gui/timeline/tracks/renderTrackChildren.js

@@ -0,0 +1,119 @@
+import { EFAudio } from "../../../elements/EFAudio.js";
+import { EFVideo } from "../../../elements/EFVideo.js";
+import { EFCaptions, EFCaptionsActiveWord } from "../../../elements/EFCaptions.js";
+import { EFImage } from "../../../elements/EFImage.js";
+import { EFText } from "../../../elements/EFText.js";
+import { EFTextSegment } from "../../../elements/EFTextSegment.js";
+import { EFWaveform } from "../../../elements/EFWaveform.js";
+import { shouldRenderElement } from "../../hierarchy/EFHierarchyItem.js";
+import { EFTimegroup } from "../../../elements/EFTimegroup.js";
+import { html, nothing } from "lit";
+
+//#region src/gui/timeline/tracks/renderTrackChildren.ts
+function renderTrackChildren(children, pixelsPerMs, hideSelectors, showSelectors, skipRootFiltering = false, enableTrim = false, useAbsolutePosition = false) {
+	return children.map((child) => {
+		if (!skipRootFiltering && !shouldRenderElement(child, hideSelectors, showSelectors)) return nothing;
+		if (child instanceof EFTimegroup) return html`<ef-timegroup-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      >
+      </ef-timegroup-track>`;
+		if (child instanceof EFImage) return html`<ef-image-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-image-track>`;
+		if (child instanceof EFAudio) return html`<ef-audio-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-audio-track>`;
+		if (child instanceof EFVideo) return html`<ef-video-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-video-track>`;
+		if (child instanceof EFCaptions) return html`<ef-captions-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-captions-track>`;
+		if (child instanceof EFCaptionsActiveWord) return html`<ef-captions-active-word-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-captions-active-word-track>`;
+		if (child instanceof EFText) return html`<ef-text-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-text-track>`;
+		if (child instanceof EFTextSegment) return html`<ef-text-segment-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-text-segment-track>`;
+		if (child.tagName === "EF-CAPTIONS-SEGMENT") return html`<ef-captions-segment-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-captions-segment-track>`;
+		if (child.tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD") return html`<ef-captions-before-word-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-captions-before-word-track>`;
+		if (child.tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD") return html`<ef-captions-after-word-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-captions-after-word-track>`;
+		if (child instanceof EFWaveform) return html`<ef-waveform-track
+        .element=${child}
+        pixels-per-ms=${pixelsPerMs}
+        ?enable-trim=${enableTrim}
+        ?use-absolute-position=${useAbsolutePosition}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-waveform-track>`;
+		return nothing;
+	});
+}
+
+//#endregion
+export { renderTrackChildren };
+//# sourceMappingURL=renderTrackChildren.js.map

package/dist/gui/timeline/tracks/renderTrackChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTrackChildren.js","names":[],"sources":["../../../../src/gui/timeline/tracks/renderTrackChildren.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from \"lit\";\nimport { EFAudio } from \"../../../elements/EFAudio.js\";\nimport {\n  EFCaptions,\n  EFCaptionsActiveWord,\n} from \"../../../elements/EFCaptions.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { EFTextSegment } from \"../../../elements/EFTextSegment.js\";\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { EFWaveform } from \"../../../elements/EFWaveform.js\";\nimport { shouldRenderElement } from \"../../hierarchy/EFHierarchyItem.js\";\n\n// NOTE: Track components are NOT imported here to avoid circular dependencies.\n// They must be pre-loaded elsewhere before this module is used.\n// The custom elements (ef-audio-track, ef-video-track, etc.) are rendered\n// via Lit templates which will work as long as the elements are registered.\n// See preloadTracks.ts for the track component initialization.\n\nexport function renderTrackChildren(\n  children: Element[],\n  pixelsPerMs: number,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n  enableTrim = false,\n  useAbsolutePosition = false,\n): Array<TemplateResult<1> | typeof nothing> {\n  return children.map((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      >\n      </ef-timegroup-track>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-image-track>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-audio-track>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-video-track>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-track>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-active-word-track>`;\n    }\n    if (child instanceof EFText) {\n      return html`<ef-text-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-track>`;\n    }\n    if (child instanceof EFTextSegment) {\n      return html`<ef-text-segment-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-segment-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-SEGMENT\") {\n      return html`<ef-captions-segment-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-segment-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-BEFORE-ACTIVE-WORD\") {\n      return html`<ef-captions-before-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-before-word-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-AFTER-ACTIVE-WORD\") {\n      return html`<ef-captions-after-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-after-word-track>`;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-waveform-track>`;\n    }\n    return nothing;\n  });\n}\n\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAgB,oBACd,UACA,aACA,eACA,eACA,oBAAoB,OACpB,aAAa,OACb,sBAAsB,OACqB;AAC3C,QAAO,SAAS,KAAK,UAAU;AAC7B,MACE,CAAC,qBACD,CAAC,oBAAoB,OAAO,eAAe,cAAc,CAEzD,QAAO;AAGT,MAAI,iBAAiB,YACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;;AAInC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,WACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,qBACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,OACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,cACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,sBACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,iCACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,gCACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,WACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,SAAO;GACP"}

package/dist/gui/timeline/tracks/waveformUtils.js

@@ -0,0 +1,80 @@
+//#region src/gui/timeline/tracks/waveformUtils.ts
+/**
+* Waveform extraction utilities for DAW-style audio visualization.
+* 
+* Extracts min/max peak pairs from audio data at a given resolution.
+* Designed for timeline visualization where we need to see amplitude
+* overview across the entire audio duration.
+*/
+/** Samples per second for waveform data - balances resolution vs. data size */
+const WAVEFORM_SAMPLES_PER_SECOND = 100;
+/** Simple cache for waveform data keyed by audio URL */
+const waveformCache = /* @__PURE__ */ new Map();
+/**
+* Extract waveform peak data from an audio URL.
+* Uses Web Audio API to decode and analyze the audio.
+* Results are cached by URL.
+*/
+async function extractWaveformData(audioUrl, signal) {
+	const cached = waveformCache.get(audioUrl);
+	if (cached) return cached;
+	try {
+		const response = await fetch(audioUrl, { signal });
+		if (!response.ok) {
+			console.warn(`Failed to fetch audio for waveform: ${response.status}`);
+			return null;
+		}
+		const arrayBuffer = await response.arrayBuffer();
+		signal?.throwIfAborted();
+		const audioContext = new OfflineAudioContext(1, 1, 44100);
+		let audioBuffer;
+		try {
+			audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+		} catch (decodeError) {
+			console.warn("Failed to decode audio for waveform:", decodeError);
+			return null;
+		}
+		signal?.throwIfAborted();
+		const waveformData = {
+			peaks: extractPeaksFromBuffer(audioBuffer, WAVEFORM_SAMPLES_PER_SECOND),
+			durationMs: audioBuffer.duration * 1e3,
+			samplesPerSecond: WAVEFORM_SAMPLES_PER_SECOND
+		};
+		waveformCache.set(audioUrl, waveformData);
+		return waveformData;
+	} catch (error) {
+		if (error instanceof DOMException && error.name === "AbortError") throw error;
+		console.warn("Error extracting waveform data:", error);
+		return null;
+	}
+}
+/**
+* Extract min/max peaks from an AudioBuffer.
+* Returns Float32Array with alternating [min, max, min, max, ...] values.
+*/
+function extractPeaksFromBuffer(buffer, samplesPerSecond) {
+	const channelData = buffer.getChannelData(0);
+	const sampleRate = buffer.sampleRate;
+	const duration = buffer.duration;
+	const outputSamples = Math.ceil(duration * samplesPerSecond);
+	const peaks = new Float32Array(outputSamples * 2);
+	const samplesPerWindow = Math.floor(sampleRate / samplesPerSecond);
+	for (let i = 0; i < outputSamples; i++) {
+		const startSample = i * samplesPerWindow;
+		const endSample = Math.min(startSample + samplesPerWindow, channelData.length);
+		let min = 0;
+		let max = 0;
+		for (let j = startSample; j < endSample; j++) {
+			const sample = channelData[j] ?? 0;
+			if (sample < min) min = sample;
+			if (sample > max) max = sample;
+		}
+		peaks[i * 2] = min;
+		peaks[i * 2 + 1] = max;
+	}
+	return peaks;
+}
+
+//#endregion
+export { extractWaveformData };
+//# sourceMappingURL=waveformUtils.js.map

package/dist/gui/timeline/tracks/waveformUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveformUtils.js","names":["audioBuffer: AudioBuffer","waveformData: WaveformData"],"sources":["../../../../src/gui/timeline/tracks/waveformUtils.ts"],"sourcesContent":["/**\n * Waveform extraction utilities for DAW-style audio visualization.\n * \n * Extracts min/max peak pairs from audio data at a given resolution.\n * Designed for timeline visualization where we need to see amplitude\n * overview across the entire audio duration.\n */\n\n/** Samples per second for waveform data - balances resolution vs. data size */\nexport const WAVEFORM_SAMPLES_PER_SECOND = 100;\n\n/** Waveform peak data: alternating min/max values normalized to [-1, 1] */\nexport interface WaveformData {\n  /** Peak data: [min0, max0, min1, max1, ...] normalized to [-1, 1] */\n  peaks: Float32Array;\n  /** Duration of the audio in milliseconds */\n  durationMs: number;\n  /** Samples per second (for interpreting peaks array) */\n  samplesPerSecond: number;\n}\n\n/** Simple cache for waveform data keyed by audio URL */\nconst waveformCache = new Map<string, WaveformData>();\n\n/**\n * Extract waveform peak data from an audio URL.\n * Uses Web Audio API to decode and analyze the audio.\n * Results are cached by URL.\n */\nexport async function extractWaveformData(\n  audioUrl: string,\n  signal?: AbortSignal,\n): Promise<WaveformData | null> {\n  // Check cache first\n  const cached = waveformCache.get(audioUrl);\n  if (cached) {\n    return cached;\n  }\n\n  try {\n    // Fetch the audio file\n    const response = await fetch(audioUrl, { signal });\n    if (!response.ok) {\n      console.warn(`Failed to fetch audio for waveform: ${response.status}`);\n      return null;\n    }\n\n    const arrayBuffer = await response.arrayBuffer();\n    signal?.throwIfAborted();\n\n    // Decode audio data\n    const audioContext = new OfflineAudioContext(1, 1, 44100);\n    let audioBuffer: AudioBuffer;\n    \n    try {\n      audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n    } catch (decodeError) {\n      console.warn(\"Failed to decode audio for waveform:\", decodeError);\n      return null;\n    }\n\n    signal?.throwIfAborted();\n\n    // Extract peaks from the decoded audio\n    const peaks = extractPeaksFromBuffer(audioBuffer, WAVEFORM_SAMPLES_PER_SECOND);\n    const durationMs = audioBuffer.duration * 1000;\n\n    const waveformData: WaveformData = {\n      peaks,\n      durationMs,\n      samplesPerSecond: WAVEFORM_SAMPLES_PER_SECOND,\n    };\n\n    // Cache the result\n    waveformCache.set(audioUrl, waveformData);\n\n    return waveformData;\n  } catch (error) {\n    if (error instanceof DOMException && error.name === \"AbortError\") {\n      throw error;\n    }\n    console.warn(\"Error extracting waveform data:\", error);\n    return null;\n  }\n}\n\n/**\n * Extract min/max peaks from an AudioBuffer.\n * Returns Float32Array with alternating [min, max, min, max, ...] values.\n */\nfunction extractPeaksFromBuffer(\n  buffer: AudioBuffer,\n  samplesPerSecond: number,\n): Float32Array {\n  const channelData = buffer.getChannelData(0); // Use first channel\n  const sampleRate = buffer.sampleRate;\n  const duration = buffer.duration;\n  \n  // Calculate how many samples to output\n  const outputSamples = Math.ceil(duration * samplesPerSecond);\n  \n  // Each output sample has min and max\n  const peaks = new Float32Array(outputSamples * 2);\n  \n  // Samples per output window\n  const samplesPerWindow = Math.floor(sampleRate / samplesPerSecond);\n  \n  for (let i = 0; i < outputSamples; i++) {\n    const startSample = i * samplesPerWindow;\n    const endSample = Math.min(startSample + samplesPerWindow, channelData.length);\n    \n    let min = 0;\n    let max = 0;\n    \n    for (let j = startSample; j < endSample; j++) {\n      const sample = channelData[j] ?? 0;\n      if (sample < min) min = sample;\n      if (sample > max) max = sample;\n    }\n    \n    // Store as alternating min/max pairs\n    peaks[i * 2] = min;\n    peaks[i * 2 + 1] = max;\n  }\n  \n  return peaks;\n}\n\n/**\n * Render waveform data to a canvas context.\n * Draws a filled waveform path centered vertically.\n */\nexport function renderWaveformToCanvas(\n  ctx: CanvasRenderingContext2D,\n  waveformData: WaveformData,\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  color: string,\n  startMs: number = 0,\n  endMs?: number,\n): void {\n  const { peaks, durationMs, samplesPerSecond } = waveformData;\n  const actualEndMs = endMs ?? durationMs;\n  \n  // Calculate which samples to render\n  const startSample = Math.floor((startMs / 1000) * samplesPerSecond);\n  const endSample = Math.ceil((actualEndMs / 1000) * samplesPerSecond);\n  const sampleCount = endSample - startSample;\n  \n  if (sampleCount <= 0) return;\n  \n  const centerY = y + height / 2;\n  const halfHeight = height / 2;\n  const pixelsPerSample = width / sampleCount;\n  \n  ctx.fillStyle = color;\n  ctx.beginPath();\n  \n  // Draw top half (max values) left to right\n  for (let i = 0; i < sampleCount; i++) {\n    const sampleIndex = startSample + i;\n    const peakIndex = sampleIndex * 2;\n    const maxValue = peaks[peakIndex + 1] ?? 0;\n    \n    const px = x + i * pixelsPerSample;\n    const py = centerY - maxValue * halfHeight;\n    \n    if (i === 0) {\n      ctx.moveTo(px, py);\n    } else {\n      ctx.lineTo(px, py);\n    }\n  }\n  \n  // Draw bottom half (min values) right to left\n  for (let i = sampleCount - 1; i >= 0; i--) {\n    const sampleIndex = startSample + i;\n    const peakIndex = sampleIndex * 2;\n    const minValue = peaks[peakIndex] ?? 0;\n    \n    const px = x + i * pixelsPerSample;\n    const py = centerY - minValue * halfHeight;\n    \n    ctx.lineTo(px, py);\n  }\n  \n  ctx.closePath();\n  ctx.fill();\n}\n\n/**\n * Clear waveform cache (useful for testing or memory management)\n */\nexport function clearWaveformCache(): void {\n  waveformCache.clear();\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,8BAA8B;;AAa3C,MAAM,gCAAgB,IAAI,KAA2B;;;;;;AAOrD,eAAsB,oBACpB,UACA,QAC8B;CAE9B,MAAM,SAAS,cAAc,IAAI,SAAS;AAC1C,KAAI,OACF,QAAO;AAGT,KAAI;EAEF,MAAM,WAAW,MAAM,MAAM,UAAU,EAAE,QAAQ,CAAC;AAClD,MAAI,CAAC,SAAS,IAAI;AAChB,WAAQ,KAAK,uCAAuC,SAAS,SAAS;AACtE,UAAO;;EAGT,MAAM,cAAc,MAAM,SAAS,aAAa;AAChD,UAAQ,gBAAgB;EAGxB,MAAM,eAAe,IAAI,oBAAoB,GAAG,GAAG,MAAM;EACzD,IAAIA;AAEJ,MAAI;AACF,iBAAc,MAAM,aAAa,gBAAgB,YAAY;WACtD,aAAa;AACpB,WAAQ,KAAK,wCAAwC,YAAY;AACjE,UAAO;;AAGT,UAAQ,gBAAgB;EAMxB,MAAMC,eAA6B;GACjC,OAJY,uBAAuB,aAAa,4BAA4B;GAK5E,YAJiB,YAAY,WAAW;GAKxC,kBAAkB;GACnB;AAGD,gBAAc,IAAI,UAAU,aAAa;AAEzC,SAAO;UACA,OAAO;AACd,MAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,OAAM;AAER,UAAQ,KAAK,mCAAmC,MAAM;AACtD,SAAO;;;;;;;AAQX,SAAS,uBACP,QACA,kBACc;CACd,MAAM,cAAc,OAAO,eAAe,EAAE;CAC5C,MAAM,aAAa,OAAO;CAC1B,MAAM,WAAW,OAAO;CAGxB,MAAM,gBAAgB,KAAK,KAAK,WAAW,iBAAiB;CAG5D,MAAM,QAAQ,IAAI,aAAa,gBAAgB,EAAE;CAGjD,MAAM,mBAAmB,KAAK,MAAM,aAAa,iBAAiB;AAElE,MAAK,IAAI,IAAI,GAAG,IAAI,eAAe,KAAK;EACtC,MAAM,cAAc,IAAI;EACxB,MAAM,YAAY,KAAK,IAAI,cAAc,kBAAkB,YAAY,OAAO;EAE9E,IAAI,MAAM;EACV,IAAI,MAAM;AAEV,OAAK,IAAI,IAAI,aAAa,IAAI,WAAW,KAAK;GAC5C,MAAM,SAAS,YAAY,MAAM;AACjC,OAAI,SAAS,IAAK,OAAM;AACxB,OAAI,SAAS,IAAK,OAAM;;AAI1B,QAAM,IAAI,KAAK;AACf,QAAM,IAAI,IAAI,KAAK;;AAGrB,QAAO"}

package/dist/gui/transformCalculations.js

@@ -0,0 +1,217 @@
+import { getCornerPoint, getOppositeCorner } from "./transformUtils.js";
+
+//#region src/gui/transformCalculations.ts
+/**
+* Calculate the axis-aligned bounding box of a rotated rectangle.
+* Given the element's position (top-left), size, and rotation,
+* returns the min/max x/y that fully contains the rotated rectangle.
+*/
+function getRotatedBoundingBox(x, y, width, height, rotationDegrees) {
+	if (rotationDegrees === 0) return {
+		minX: x,
+		minY: y,
+		maxX: x + width,
+		maxY: y + height
+	};
+	const rotationRadians = rotationDegrees * Math.PI / 180;
+	const cos = Math.cos(rotationRadians);
+	const sin = Math.sin(rotationRadians);
+	const centerX = x + width / 2;
+	const centerY = y + height / 2;
+	const halfW = width / 2;
+	const halfH = height / 2;
+	const corners = [
+		{
+			x: -halfW,
+			y: -halfH
+		},
+		{
+			x: halfW,
+			y: -halfH
+		},
+		{
+			x: halfW,
+			y: halfH
+		},
+		{
+			x: -halfW,
+			y: halfH
+		}
+	];
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const corner of corners) {
+		const rotatedX = corner.x * cos - corner.y * sin + centerX;
+		const rotatedY = corner.x * sin + corner.y * cos + centerY;
+		minX = Math.min(minX, rotatedX);
+		minY = Math.min(minY, rotatedY);
+		maxX = Math.max(maxX, rotatedX);
+		maxY = Math.max(maxY, rotatedY);
+	}
+	return {
+		minX,
+		minY,
+		maxX,
+		maxY
+	};
+}
+/**
+* Get the cursor type for a resize handle based on rotation.
+* The cursor should reflect the actual direction the handle will resize in screen space.
+*
+* @param handle - The resize handle identifier
+* @param rotationDegrees - Current rotation in degrees (0-360)
+* @returns CSS cursor value
+*/
+function getResizeHandleCursor(handle, rotationDegrees) {
+	const effectiveAngle = ({
+		n: 0,
+		ne: 45,
+		e: 90,
+		se: 135,
+		s: 180,
+		sw: 225,
+		w: 270,
+		nw: 315
+	}[handle] + rotationDegrees) % 360;
+	const normalizedAngle = effectiveAngle < 0 ? effectiveAngle + 360 : effectiveAngle;
+	if (normalizedAngle >= 337.5 || normalizedAngle < 22.5) return "n-resize";
+	else if (normalizedAngle >= 22.5 && normalizedAngle < 67.5) return "ne-resize";
+	else if (normalizedAngle >= 67.5 && normalizedAngle < 112.5) return "e-resize";
+	else if (normalizedAngle >= 112.5 && normalizedAngle < 157.5) return "se-resize";
+	else if (normalizedAngle >= 157.5 && normalizedAngle < 202.5) return "s-resize";
+	else if (normalizedAngle >= 202.5 && normalizedAngle < 247.5) return "sw-resize";
+	else if (normalizedAngle >= 247.5 && normalizedAngle < 292.5) return "w-resize";
+	else return "nw-resize";
+}
+/**
+* Calculate new bounds for drag operation in canvas coordinates.
+* Pure function - no side effects.
+*
+* Works in canvas coordinate space with zoom as a parameter.
+* Converts screen deltas to canvas deltas.
+*
+* @param startPosition - Starting position in canvas coordinates
+* @param screenDeltaX - Mouse movement delta in screen pixels
+* @param screenDeltaY - Mouse movement delta in screen pixels
+* @param zoomScale - Canvas zoom scale (1.0 = no zoom, 2.0 = 2x zoom, etc.)
+* @returns New bounds with updated position (in canvas coordinates)
+*/
+function calculateDragBounds(startPosition, screenDeltaX, screenDeltaY, zoomScale = 1) {
+	if (zoomScale <= 0) throw new Error("Zoom scale must be greater than 0");
+	const canvasDeltaX = screenDeltaX / zoomScale;
+	const canvasDeltaY = screenDeltaY / zoomScale;
+	return {
+		x: startPosition.x + canvasDeltaX,
+		y: startPosition.y + canvasDeltaY
+	};
+}
+/**
+* Calculate new bounds for resize operation in canvas coordinates.
+* Pure function - no side effects.
+*
+* Works in canvas coordinate space with zoom as a parameter.
+* Converts screen deltas to canvas deltas, calculates new bounds in canvas coordinates.
+*
+* @param startSize - Starting size in canvas coordinates
+* @param startPosition - Starting position in canvas coordinates
+* @param startCorner - Starting corner position in canvas coordinates
+* @param handle - Resize handle being dragged
+* @param screenDeltaX - Mouse movement delta in screen pixels
+* @param screenDeltaY - Mouse movement delta in screen pixels
+* @param rotationDegrees - Current rotation in degrees
+* @param minSize - Minimum size constraint in canvas coordinates
+* @param zoomScale - Canvas zoom scale (1.0 = no zoom, 2.0 = 2x zoom, etc.)
+* @param options - Optional resize modifiers (lockAspectRatio, resizeFromCenter)
+* @returns New bounds with updated size and position (in canvas coordinates)
+*/
+function calculateResizeBounds(startSize, startPosition, startCorner, handle, screenDeltaX, screenDeltaY, rotationDegrees, minSize, zoomScale = 1, options = {}) {
+	if (zoomScale <= 0) throw new Error("Zoom scale must be greater than 0");
+	const { lockAspectRatio = false, resizeFromCenter = false } = options;
+	const initialAspectRatio = startSize.width / startSize.height;
+	const canvasDeltaX = screenDeltaX / zoomScale;
+	const canvasDeltaY = screenDeltaY / zoomScale;
+	const rotationRadians = rotationDegrees * Math.PI / 180;
+	const oppositeCorner = getOppositeCorner(handle);
+	const cos = Math.cos(-rotationRadians);
+	const sin = Math.sin(-rotationRadians);
+	const rotatedDeltaX = cos * canvasDeltaX - sin * canvasDeltaY;
+	const rotatedDeltaY = sin * canvasDeltaX + cos * canvasDeltaY;
+	const deltaMultiplier = resizeFromCenter ? 2 : 1;
+	let newWidth = startSize.width;
+	let newHeight = startSize.height;
+	if (handle.includes("e")) newWidth = startSize.width + rotatedDeltaX * deltaMultiplier;
+	else if (handle.includes("w")) newWidth = startSize.width - rotatedDeltaX * deltaMultiplier;
+	if (handle.includes("s")) newHeight = startSize.height + rotatedDeltaY * deltaMultiplier;
+	else if (handle.includes("n")) newHeight = startSize.height - rotatedDeltaY * deltaMultiplier;
+	if (lockAspectRatio) {
+		const isCornerHandle = handle.length === 2;
+		const isHorizontalOnly = handle === "e" || handle === "w";
+		const isVerticalOnly = handle === "n" || handle === "s";
+		if (isCornerHandle) {
+			const widthScale = newWidth / startSize.width;
+			const heightScale = newHeight / startSize.height;
+			const uniformScale = Math.abs(widthScale - 1) > Math.abs(heightScale - 1) ? widthScale : heightScale;
+			newWidth = startSize.width * uniformScale;
+			newHeight = startSize.height * uniformScale;
+		} else if (isHorizontalOnly) newHeight = newWidth / initialAspectRatio;
+		else if (isVerticalOnly) newWidth = newHeight * initialAspectRatio;
+	}
+	newWidth = Math.max(minSize, newWidth);
+	newHeight = Math.max(minSize, newHeight);
+	if (lockAspectRatio && (newWidth === minSize || newHeight === minSize)) if (newWidth === minSize) newHeight = Math.max(minSize, minSize / initialAspectRatio);
+	else newWidth = Math.max(minSize, minSize * initialAspectRatio);
+	let newX;
+	let newY;
+	if (resizeFromCenter) {
+		const centerX = startPosition.x + startSize.width / 2;
+		const centerY = startPosition.y + startSize.height / 2;
+		newX = centerX - newWidth / 2;
+		newY = centerY - newHeight / 2;
+	} else {
+		const newOppositeCorner = getCornerPoint(startPosition.x, startPosition.y, newWidth, newHeight, rotationRadians, oppositeCorner.x, oppositeCorner.y);
+		const offsetX = startCorner.x - newOppositeCorner.x;
+		const offsetY = startCorner.y - newOppositeCorner.y;
+		newX = startPosition.x + offsetX;
+		newY = startPosition.y + offsetY;
+	}
+	return {
+		x: newX,
+		y: newY,
+		width: newWidth,
+		height: newHeight
+	};
+}
+/**
+* Parse rotation angle from CSS transform.
+* Handles both rotate() syntax and matrix() transforms.
+* Pure function - no side effects.
+*
+* @param transform - CSS transform string (e.g., "rotate(45deg)" or "matrix(a, b, c, d, e, f)")
+* @returns Rotation angle in degrees
+*/
+function parseRotationFromTransform(transform) {
+	if (!transform || transform === "none") return 0;
+	const rotateMatch = transform.match(/rotate\(([^)]+)\)/);
+	if (rotateMatch?.[1]) {
+		const value = rotateMatch[1].trim();
+		const numValue = parseFloat(value);
+		const unit = value.replace(String(numValue), "").trim();
+		if (unit === "rad" || unit === "radians") return numValue * 180 / Math.PI;
+		return numValue;
+	}
+	const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+	if (!matrixMatch?.[1]) return 0;
+	const values = matrixMatch[1].split(",").map((v) => parseFloat(v.trim()));
+	if (values.length < 2) return 0;
+	const a = values[0];
+	const b = values[1];
+	if (a === void 0 || b === void 0 || isNaN(a) || isNaN(b)) return 0;
+	return Math.atan2(b, a) * (180 / Math.PI);
+}
+
+//#endregion
+export { calculateDragBounds, calculateResizeBounds, getResizeHandleCursor, getRotatedBoundingBox, parseRotationFromTransform };
+//# sourceMappingURL=transformCalculations.js.map

package/dist/gui/transformCalculations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformCalculations.js","names":["newX: number","newY: number"],"sources":["../../src/gui/transformCalculations.ts"],"sourcesContent":["import { getCornerPoint, getOppositeCorner } from \"./transformUtils.js\";\nimport type { TransformBounds } from \"./EFTransformHandles.js\";\n\nexport type ResizeHandle = \"nw\" | \"n\" | \"ne\" | \"e\" | \"se\" | \"s\" | \"sw\" | \"w\";\n\n/**\n * Calculate the axis-aligned bounding box of a rotated rectangle.\n * Given the element's position (top-left), size, and rotation,\n * returns the min/max x/y that fully contains the rotated rectangle.\n */\nexport function getRotatedBoundingBox(\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  rotationDegrees: number,\n): { minX: number; minY: number; maxX: number; maxY: number } {\n  // If no rotation, simple case\n  if (rotationDegrees === 0) {\n    return { minX: x, minY: y, maxX: x + width, maxY: y + height };\n  }\n\n  const rotationRadians = (rotationDegrees * Math.PI) / 180;\n  const cos = Math.cos(rotationRadians);\n  const sin = Math.sin(rotationRadians);\n\n  // Center of the rectangle\n  const centerX = x + width / 2;\n  const centerY = y + height / 2;\n\n  // Half dimensions\n  const halfW = width / 2;\n  const halfH = height / 2;\n\n  // Four corners relative to center (before rotation)\n  const corners = [\n    { x: -halfW, y: -halfH }, // top-left\n    { x: halfW, y: -halfH }, // top-right\n    { x: halfW, y: halfH }, // bottom-right\n    { x: -halfW, y: halfH }, // bottom-left\n  ];\n\n  // Rotate each corner and find bounds\n  let minX = Infinity;\n  let minY = Infinity;\n  let maxX = -Infinity;\n  let maxY = -Infinity;\n\n  for (const corner of corners) {\n    // Rotate corner around center\n    const rotatedX = corner.x * cos - corner.y * sin + centerX;\n    const rotatedY = corner.x * sin + corner.y * cos + centerY;\n\n    minX = Math.min(minX, rotatedX);\n    minY = Math.min(minY, rotatedY);\n    maxX = Math.max(maxX, rotatedX);\n    maxY = Math.max(maxY, rotatedY);\n  }\n\n  return { minX, minY, maxX, maxY };\n}\n\ntype CursorType =\n  | \"n-resize\"\n  | \"e-resize\"\n  | \"s-resize\"\n  | \"w-resize\"\n  | \"ne-resize\"\n  | \"nw-resize\"\n  | \"se-resize\"\n  | \"sw-resize\";\n\n/**\n * Get the cursor type for a resize handle based on rotation.\n * The cursor should reflect the actual direction the handle will resize in screen space.\n *\n * @param handle - The resize handle identifier\n * @param rotationDegrees - Current rotation in degrees (0-360)\n * @returns CSS cursor value\n */\nexport function getResizeHandleCursor(\n  handle: ResizeHandle,\n  rotationDegrees: number,\n): CursorType {\n  // Map handles to their base angles (in degrees, where 0° is north, clockwise)\n  const handleAngles: Record<ResizeHandle, number> = {\n    n: 0,\n    ne: 45,\n    e: 90,\n    se: 135,\n    s: 180,\n    sw: 225,\n    w: 270,\n    nw: 315,\n  };\n\n  // Calculate the effective angle after rotation\n  const baseAngle = handleAngles[handle];\n  const effectiveAngle = (baseAngle + rotationDegrees) % 360;\n  const normalizedAngle =\n    effectiveAngle < 0 ? effectiveAngle + 360 : effectiveAngle;\n\n  // Map angle back to cursor\n  // Edge handles (n, e, s, w) map to cardinal directions\n  // Corner handles (ne, nw, se, sw) map to diagonal directions\n  if (normalizedAngle >= 337.5 || normalizedAngle < 22.5) {\n    return \"n-resize\";\n  } else if (normalizedAngle >= 22.5 && normalizedAngle < 67.5) {\n    return \"ne-resize\";\n  } else if (normalizedAngle >= 67.5 && normalizedAngle < 112.5) {\n    return \"e-resize\";\n  } else if (normalizedAngle >= 112.5 && normalizedAngle < 157.5) {\n    return \"se-resize\";\n  } else if (normalizedAngle >= 157.5 && normalizedAngle < 202.5) {\n    return \"s-resize\";\n  } else if (normalizedAngle >= 202.5 && normalizedAngle < 247.5) {\n    return \"sw-resize\";\n  } else if (normalizedAngle >= 247.5 && normalizedAngle < 292.5) {\n    return \"w-resize\";\n  } else {\n    // 292.5 to 337.5\n    return \"nw-resize\";\n  }\n}\n\n/**\n * Convert screen coordinate delta to canvas coordinate delta.\n * @param screenDeltaX - Screen pixel delta X\n * @param screenDeltaY - Screen pixel delta Y\n * @param canvasScale - Canvas zoom scale (must be > 0)\n * @returns Canvas coordinate delta\n */\nexport function screenToCanvasDelta(\n  screenDeltaX: number,\n  screenDeltaY: number,\n  canvasScale: number,\n): { x: number; y: number } {\n  if (canvasScale <= 0) {\n    throw new Error(\"Canvas scale must be greater than 0\");\n  }\n  return {\n    x: screenDeltaX / canvasScale,\n    y: screenDeltaY / canvasScale,\n  };\n}\n\n/**\n * Convert canvas coordinate delta to screen coordinate delta.\n * @param canvasDeltaX - Canvas coordinate delta X\n * @param canvasDeltaY - Canvas coordinate delta Y\n * @param canvasScale - Canvas zoom scale (must be > 0)\n * @returns Screen pixel delta\n */\nexport function canvasToScreenDelta(\n  canvasDeltaX: number,\n  canvasDeltaY: number,\n  canvasScale: number,\n): { x: number; y: number } {\n  if (canvasScale <= 0) {\n    throw new Error(\"Canvas scale must be greater than 0\");\n  }\n  return {\n    x: canvasDeltaX * canvasScale,\n    y: canvasDeltaY * canvasScale,\n  };\n}\n\n/**\n * Calculate new bounds for drag operation in canvas coordinates.\n * Pure function - no side effects.\n *\n * Works in canvas coordinate space with zoom as a parameter.\n * Converts screen deltas to canvas deltas.\n *\n * @param startPosition - Starting position in canvas coordinates\n * @param screenDeltaX - Mouse movement delta in screen pixels\n * @param screenDeltaY - Mouse movement delta in screen pixels\n * @param zoomScale - Canvas zoom scale (1.0 = no zoom, 2.0 = 2x zoom, etc.)\n * @returns New bounds with updated position (in canvas coordinates)\n */\nexport function calculateDragBounds(\n  startPosition: { x: number; y: number },\n  screenDeltaX: number,\n  screenDeltaY: number,\n  zoomScale: number = 1,\n): { x: number; y: number } {\n  if (zoomScale <= 0) {\n    throw new Error(\"Zoom scale must be greater than 0\");\n  }\n\n  // Convert screen deltas to canvas deltas\n  const canvasDeltaX = screenDeltaX / zoomScale;\n  const canvasDeltaY = screenDeltaY / zoomScale;\n\n  return {\n    x: startPosition.x + canvasDeltaX,\n    y: startPosition.y + canvasDeltaY,\n  };\n}\n\n/**\n * Options for resize calculation.\n * Modifier keys and constraints.\n */\nexport interface ResizeOptions {\n  /** Lock aspect ratio (Shift key or multi-selection) */\n  lockAspectRatio?: boolean;\n  /** Resize from center instead of opposite corner (Ctrl key) */\n  resizeFromCenter?: boolean;\n}\n\n/**\n * Calculate new bounds for resize operation in canvas coordinates.\n * Pure function - no side effects.\n *\n * Works in canvas coordinate space with zoom as a parameter.\n * Converts screen deltas to canvas deltas, calculates new bounds in canvas coordinates.\n *\n * @param startSize - Starting size in canvas coordinates\n * @param startPosition - Starting position in canvas coordinates\n * @param startCorner - Starting corner position in canvas coordinates\n * @param handle - Resize handle being dragged\n * @param screenDeltaX - Mouse movement delta in screen pixels\n * @param screenDeltaY - Mouse movement delta in screen pixels\n * @param rotationDegrees - Current rotation in degrees\n * @param minSize - Minimum size constraint in canvas coordinates\n * @param zoomScale - Canvas zoom scale (1.0 = no zoom, 2.0 = 2x zoom, etc.)\n * @param options - Optional resize modifiers (lockAspectRatio, resizeFromCenter)\n * @returns New bounds with updated size and position (in canvas coordinates)\n */\nexport function calculateResizeBounds(\n  startSize: { width: number; height: number },\n  startPosition: { x: number; y: number },\n  startCorner: { x: number; y: number },\n  handle: ResizeHandle,\n  screenDeltaX: number,\n  screenDeltaY: number,\n  rotationDegrees: number,\n  minSize: number,\n  zoomScale: number = 1,\n  options: ResizeOptions = {},\n): TransformBounds {\n  if (zoomScale <= 0) {\n    throw new Error(\"Zoom scale must be greater than 0\");\n  }\n\n  const { lockAspectRatio = false, resizeFromCenter = false } = options;\n  const initialAspectRatio = startSize.width / startSize.height;\n\n  // Convert screen deltas to canvas deltas\n  const canvasDeltaX = screenDeltaX / zoomScale;\n  const canvasDeltaY = screenDeltaY / zoomScale;\n\n  const rotationRadians = (rotationDegrees * Math.PI) / 180;\n  const oppositeCorner = getOppositeCorner(handle);\n\n  // Rotate canvas deltas to align with element's local coordinate system\n  const cos = Math.cos(-rotationRadians);\n  const sin = Math.sin(-rotationRadians);\n  const rotatedDeltaX = cos * canvasDeltaX - sin * canvasDeltaY;\n  const rotatedDeltaY = sin * canvasDeltaX + cos * canvasDeltaY;\n\n  // For center resize, delta applies to both sides (double effect)\n  const deltaMultiplier = resizeFromCenter ? 2 : 1;\n\n  // Calculate new size in canvas coordinates\n  let newWidth = startSize.width;\n  let newHeight = startSize.height;\n\n  if (handle.includes(\"e\")) {\n    newWidth = startSize.width + rotatedDeltaX * deltaMultiplier;\n  } else if (handle.includes(\"w\")) {\n    newWidth = startSize.width - rotatedDeltaX * deltaMultiplier;\n  }\n\n  if (handle.includes(\"s\")) {\n    newHeight = startSize.height + rotatedDeltaY * deltaMultiplier;\n  } else if (handle.includes(\"n\")) {\n    newHeight = startSize.height - rotatedDeltaY * deltaMultiplier;\n  }\n\n  // Apply aspect ratio constraint if enabled\n  if (lockAspectRatio) {\n    const isCornerHandle = handle.length === 2; // \"ne\", \"nw\", \"se\", \"sw\"\n    const isHorizontalOnly = handle === \"e\" || handle === \"w\";\n    const isVerticalOnly = handle === \"n\" || handle === \"s\";\n\n    if (isCornerHandle) {\n      // For corners: use the dimension with larger change\n      const widthScale = newWidth / startSize.width;\n      const heightScale = newHeight / startSize.height;\n      const uniformScale =\n        Math.abs(widthScale - 1) > Math.abs(heightScale - 1)\n          ? widthScale\n          : heightScale;\n      newWidth = startSize.width * uniformScale;\n      newHeight = startSize.height * uniformScale;\n    } else if (isHorizontalOnly) {\n      // Horizontal handle: adjust height to match aspect ratio\n      newHeight = newWidth / initialAspectRatio;\n    } else if (isVerticalOnly) {\n      // Vertical handle: adjust width to match aspect ratio\n      newWidth = newHeight * initialAspectRatio;\n    }\n  }\n\n  // Apply min size constraint (in canvas coordinates)\n  newWidth = Math.max(minSize, newWidth);\n  newHeight = Math.max(minSize, newHeight);\n\n  // Re-apply aspect ratio after min size if needed\n  if (lockAspectRatio && (newWidth === minSize || newHeight === minSize)) {\n    if (newWidth === minSize) {\n      newHeight = Math.max(minSize, minSize / initialAspectRatio);\n    } else {\n      newWidth = Math.max(minSize, minSize * initialAspectRatio);\n    }\n  }\n\n  // Calculate new position based on resize mode\n  let newX: number;\n  let newY: number;\n\n  if (resizeFromCenter) {\n    // Keep center fixed\n    const centerX = startPosition.x + startSize.width / 2;\n    const centerY = startPosition.y + startSize.height / 2;\n    newX = centerX - newWidth / 2;\n    newY = centerY - newHeight / 2;\n  } else {\n    // Keep opposite corner fixed\n    const newOppositeCorner = getCornerPoint(\n      startPosition.x,\n      startPosition.y,\n      newWidth,\n      newHeight,\n      rotationRadians,\n      oppositeCorner.x,\n      oppositeCorner.y,\n    );\n\n    const offsetX = startCorner.x - newOppositeCorner.x;\n    const offsetY = startCorner.y - newOppositeCorner.y;\n    newX = startPosition.x + offsetX;\n    newY = startPosition.y + offsetY;\n  }\n\n  return {\n    x: newX,\n    y: newY,\n    width: newWidth,\n    height: newHeight,\n  };\n}\n\n/**\n * Calculate new rotation angle.\n * Pure function - no side effects.\n *\n * @param startAngle - Starting angle in degrees (0-360)\n * @param startRotation - Starting rotation value in degrees\n * @param currentMouseX - Current mouse X in screen pixels\n * @param currentMouseY - Current mouse Y in screen pixels\n * @param centerX - Element center X in screen pixels\n * @param centerY - Element center Y in screen pixels\n * @param rotationStep - Optional rotation step for snapping (in degrees)\n * @returns New rotation angle in degrees\n */\nexport function calculateRotation(\n  startAngle: number,\n  startRotation: number,\n  currentMouseX: number,\n  currentMouseY: number,\n  centerX: number,\n  centerY: number,\n  rotationStep?: number,\n): number {\n  const dx = currentMouseX - centerX;\n  const dy = currentMouseY - centerY;\n  const radians = Math.atan2(dy, dx);\n  const currentAngle = radians * (180 / Math.PI) + 90;\n\n  // Normalize angle difference to [-180, 180] to avoid wrapping issues\n  let deltaAngle = currentAngle - startAngle;\n  while (deltaAngle > 180) deltaAngle -= 360;\n  while (deltaAngle < -180) deltaAngle += 360;\n\n  let newRotation = startRotation + deltaAngle;\n\n  if (rotationStep !== undefined && rotationStep > 0) {\n    newRotation = Math.round(newRotation / rotationStep) * rotationStep;\n  }\n\n  return newRotation;\n}\n\n/**\n * Parse rotation angle from CSS transform.\n * Handles both rotate() syntax and matrix() transforms.\n * Pure function - no side effects.\n *\n * @param transform - CSS transform string (e.g., \"rotate(45deg)\" or \"matrix(a, b, c, d, e, f)\")\n * @returns Rotation angle in degrees\n */\nexport function parseRotationFromTransform(transform: string): number {\n  if (!transform || transform === \"none\") return 0;\n\n  // Try rotate() syntax first (e.g., \"rotate(45deg)\", \"rotate(0.5rad)\")\n  const rotateMatch = transform.match(/rotate\\(([^)]+)\\)/);\n  if (rotateMatch?.[1]) {\n    const value = rotateMatch[1].trim();\n    const numValue = parseFloat(value);\n    const unit = value.replace(String(numValue), \"\").trim();\n    if (unit === \"rad\" || unit === \"radians\") {\n      return (numValue * 180) / Math.PI;\n    }\n    return numValue; // degrees (default)\n  }\n\n  // Fall back to matrix transform: matrix(a, b, c, d, tx, ty)\n  // For rotation: a = cos(θ), b = sin(θ)\n  const matrixMatch = transform.match(/matrix\\(([^)]+)\\)/);\n  if (!matrixMatch?.[1]) return 0;\n\n  const values = matrixMatch[1].split(\",\").map((v) => parseFloat(v.trim()));\n  if (values.length < 2) return 0;\n\n  const a = values[0];\n  const b = values[1];\n  if (a === undefined || b === undefined || isNaN(a) || isNaN(b)) {\n    return 0;\n  }\n\n  return Math.atan2(b, a) * (180 / Math.PI);\n}\n"],"mappings":"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"}

package/dist/gui/transformUtils.d.ts

@@ -0,0 +1,37 @@
+//#region src/gui/transformUtils.d.ts
+/**
+ * Pure utility functions for transform calculations.
+ * Extracted from motion designer TransformHandles component.
+ */
+/**
+ * Rotate a point around a center point by given radians.
+ */
+declare function rotatePoint(cx: number, cy: number, x: number, y: number, radians: number): {
+  x: number;
+  y: number;
+};
+/**
+ * Calculate corner point in canvas coordinates for a rotated element.
+ * @param x - Element x position
+ * @param y - Element y position
+ * @param width - Element width
+ * @param height - Element height
+ * @param rotationRadians - Rotation in radians
+ * @param xMagnitude - 0 = left, 0.5 = center, 1 = right
+ * @param yMagnitude - 0 = top, 0.5 = center, 1 = bottom
+ */
+declare function getCornerPoint(x: number, y: number, width: number, height: number, rotationRadians: number, xMagnitude: number, yMagnitude: number): {
+  x: number;
+  y: number;
+};
+/**
+ * Get opposite corner magnitudes for a handle.
+ * Used to determine which corner stays fixed during resize.
+ */
+declare function getOppositeCorner(handle: string): {
+  x: number;
+  y: number;
+};
+//#endregion
+export { getCornerPoint, getOppositeCorner, rotatePoint };
+//# sourceMappingURL=transformUtils.d.ts.map

package/dist/gui/transformUtils.js

@@ -0,0 +1,77 @@
+//#region src/gui/transformUtils.ts
+/**
+* Pure utility functions for transform calculations.
+* Extracted from motion designer TransformHandles component.
+*/
+/**
+* Rotate a point around a center point by given radians.
+*/
+function rotatePoint(cx, cy, x, y, radians) {
+	const cos = Math.cos(radians);
+	const sin = Math.sin(radians);
+	return {
+		x: cos * (x - cx) - sin * (y - cy) + cx,
+		y: sin * (x - cx) + cos * (y - cy) + cy
+	};
+}
+/**
+* Calculate corner point in canvas coordinates for a rotated element.
+* @param x - Element x position
+* @param y - Element y position
+* @param width - Element width
+* @param height - Element height
+* @param rotationRadians - Rotation in radians
+* @param xMagnitude - 0 = left, 0.5 = center, 1 = right
+* @param yMagnitude - 0 = top, 0.5 = center, 1 = bottom
+*/
+function getCornerPoint(x, y, width, height, rotationRadians, xMagnitude, yMagnitude) {
+	return rotatePoint(x + width / 2, y + height / 2, x + xMagnitude * width, y + yMagnitude * height, rotationRadians);
+}
+/**
+* Get opposite corner magnitudes for a handle.
+* Used to determine which corner stays fixed during resize.
+*/
+function getOppositeCorner(handle) {
+	switch (handle) {
+		case "nw": return {
+			x: 1,
+			y: 1
+		};
+		case "n": return {
+			x: .5,
+			y: 1
+		};
+		case "ne": return {
+			x: 0,
+			y: 1
+		};
+		case "e": return {
+			x: 0,
+			y: .5
+		};
+		case "se": return {
+			x: 0,
+			y: 0
+		};
+		case "s": return {
+			x: .5,
+			y: 0
+		};
+		case "sw": return {
+			x: 1,
+			y: 0
+		};
+		case "w": return {
+			x: 1,
+			y: .5
+		};
+		default: return {
+			x: .5,
+			y: .5
+		};
+	}
+}
+
+//#endregion
+export { getCornerPoint, getOppositeCorner, rotatePoint };
+//# sourceMappingURL=transformUtils.js.map

package/dist/gui/transformUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformUtils.js","names":[],"sources":["../../src/gui/transformUtils.ts"],"sourcesContent":["/**\n * Pure utility functions for transform calculations.\n * Extracted from motion designer TransformHandles component.\n */\n\n/**\n * Rotate a point around a center point by given radians.\n */\nexport function rotatePoint(\n  cx: number,\n  cy: number,\n  x: number,\n  y: number,\n  radians: number,\n): { x: number; y: number } {\n  const cos = Math.cos(radians);\n  const sin = Math.sin(radians);\n  const nx = cos * (x - cx) - sin * (y - cy) + cx;\n  const ny = sin * (x - cx) + cos * (y - cy) + cy;\n  return { x: nx, y: ny };\n}\n\n/**\n * Calculate corner point in canvas coordinates for a rotated element.\n * @param x - Element x position\n * @param y - Element y position\n * @param width - Element width\n * @param height - Element height\n * @param rotationRadians - Rotation in radians\n * @param xMagnitude - 0 = left, 0.5 = center, 1 = right\n * @param yMagnitude - 0 = top, 0.5 = center, 1 = bottom\n */\nexport function getCornerPoint(\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  rotationRadians: number,\n  xMagnitude: number,\n  yMagnitude: number,\n): { x: number; y: number } {\n  const centerX = x + width / 2;\n  const centerY = y + height / 2;\n  const localCornerX = x + xMagnitude * width;\n  const localCornerY = y + yMagnitude * height;\n  return rotatePoint(\n    centerX,\n    centerY,\n    localCornerX,\n    localCornerY,\n    rotationRadians,\n  );\n}\n\n/**\n * Get opposite corner magnitudes for a handle.\n * Used to determine which corner stays fixed during resize.\n */\nexport function getOppositeCorner(handle: string): { x: number; y: number } {\n  switch (handle) {\n    case \"nw\":\n      return { x: 1, y: 1 }; // se corner\n    case \"n\":\n      return { x: 0.5, y: 1 }; // s corner\n    case \"ne\":\n      return { x: 0, y: 1 }; // sw corner\n    case \"e\":\n      return { x: 0, y: 0.5 }; // w corner\n    case \"se\":\n      return { x: 0, y: 0 }; // nw corner\n    case \"s\":\n      return { x: 0.5, y: 0 }; // n corner\n    case \"sw\":\n      return { x: 1, y: 0 }; // ne corner\n    case \"w\":\n      return { x: 1, y: 0.5 }; // e corner\n    default:\n      return { x: 0.5, y: 0.5 };\n  }\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,YACd,IACA,IACA,GACA,GACA,SAC0B;CAC1B,MAAM,MAAM,KAAK,IAAI,QAAQ;CAC7B,MAAM,MAAM,KAAK,IAAI,QAAQ;AAG7B,QAAO;EAAE,GAFE,OAAO,IAAI,MAAM,OAAO,IAAI,MAAM;EAE7B,GADL,OAAO,IAAI,MAAM,OAAO,IAAI,MAAM;EACtB;;;;;;;;;;;;AAazB,SAAgB,eACd,GACA,GACA,OACA,QACA,iBACA,YACA,YAC0B;AAK1B,QAAO,YAJS,IAAI,QAAQ,GACZ,IAAI,SAAS,GACR,IAAI,aAAa,OACjB,IAAI,aAAa,QAMpC,gBACD;;;;;;AAOH,SAAgB,kBAAkB,QAA0C;AAC1E,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;GAAE,GAAG;GAAG,GAAG;GAAG;EACvB,KAAK,IACH,QAAO;GAAE,GAAG;GAAK,GAAG;GAAG;EACzB,KAAK,KACH,QAAO;GAAE,GAAG;GAAG,GAAG;GAAG;EACvB,KAAK,IACH,QAAO;GAAE,GAAG;GAAG,GAAG;GAAK;EACzB,KAAK,KACH,QAAO;GAAE,GAAG;GAAG,GAAG;GAAG;EACvB,KAAK,IACH,QAAO;GAAE,GAAG;GAAK,GAAG;GAAG;EACzB,KAAK,KACH,QAAO;GAAE,GAAG;GAAG,GAAG;GAAG;EACvB,KAAK,IACH,QAAO;GAAE,GAAG;GAAG,GAAG;GAAK;EACzB,QACE,QAAO;GAAE,GAAG;GAAK,GAAG;GAAK"}