@editframe/elements 0.23.8-beta.0 → 0.25.0-beta.0

package/dist/gui/ContextMixin.js

@@ -12,8 +12,10 @@ import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { ContextProvider, consume, createContext, provide } from "@lit/context";
 import { property, state } from "lit/decorators.js";
+
+//#region src/gui/ContextMixin.ts
 const targetTemporalContext = createContext(Symbol("target-temporal"));
-var contextMixinSymbol = Symbol("contextMixin");
+const contextMixinSymbol = Symbol("contextMixin");
 function isContextMixin(value) {
 	return typeof value === "object" && value !== null && contextMixinSymbol in value.constructor;
 }
@@ -75,6 +77,11 @@ function ContextMixin(superClass) {
 			return this.#targetTemporal;
 		}
 		#controllerSubscribed = false;
+		/**
+		* Find the first root temporal element (recursively searches through children)
+		* Supports ef-timegroup, ef-video, ef-audio, and any other temporal elements
+		* even when they're wrapped in non-temporal elements like divs
+		*/
 		findRootTemporal() {
 			const findRecursive = (element) => {
 				if (isEFTemporal(element)) return element;
@@ -120,6 +127,15 @@ function ContextMixin(superClass) {
 					break;
 			}
 		};
+		/**
+		* Generate a cache key for URL token based on signing strategy
+		*
+		* Uses unified prefix + parameter matching approach:
+		* - For transcode URLs: signs base "/api/v1/transcode" + params like {url: "source.mp4"}
+		* - For regular URLs: signs full URL with empty params {}
+		* - All validation uses prefix matching + exhaustive parameter matching
+		* - Multiple transcode segments with same source share one token (reduces round-trips)
+		*/
 		#getTokenCacheKey(url) {
 			try {
 				const urlObj = new URL(url);
@@ -147,6 +163,11 @@ function ContextMixin(superClass) {
 				};
 			}
 		}
+		/**
+		* Parse JWT token to extract safe expiration time (with buffer)
+		* @param token JWT token string
+		* @returns Safe expiration timestamp in milliseconds (actual expiry minus buffer), or 0 if parsing fails
+		*/
 		#parseTokenExpiration(token) {
 			try {
 				const parts = token.split(".");
@@ -166,6 +187,10 @@ function ContextMixin(superClass) {
 			}
 		}
 		#signingURL;
+		/**
+		* A URL that will be used to generated signed tokens for accessing media files from the
+		* editframe API. This is used to authenticate media requests per-user.
+		*/
 		get signingURL() {
 			return this.#signingURL ?? this.efConfiguration?.signingURL ?? "";
 		}
@@ -217,6 +242,9 @@ function ContextMixin(superClass) {
 				if (this.targetTemporal) this.targetTemporal.requestUpdate();
 			});
 		});
+		/**
+		* Update duration properties when temporal element changes
+		*/
 		updateDurationProperties() {
 			const newDuration = this.targetTemporal?.durationMs ?? 0;
 			const newEndTime = this.targetTemporal?.endTimeMs ?? 0;
@@ -327,4 +355,7 @@ function ContextMixin(superClass) {
 	__decorate([property({ type: Number })], ContextElement.prototype, "currentTimeMs", null);
 	return ContextElement;
 }
+
+//#endregion
 export { ContextMixin, isContextMixin, targetTemporalContext };
+//# sourceMappingURL=ContextMixin.js.map

package/dist/gui/ContextMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMixin.js","names":["#getTokenCacheKey","#parseTokenExpiration","#apiHost","#targetTemporal","#onControllerUpdate","#controllerSubscribed","#targetTemporalProvider","#loop","#playingProvider","#loopProvider","#currentTimeMsProvider","#signingURL","#timegroupObserver"],"sources":["../../src/gui/ContextMixin.ts"],"sourcesContent":["import { ContextProvider, consume, createContext, provide } from \"@lit/context\";\nimport type { LitElement } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { EF_RENDERING } from \"../EF_RENDERING.ts\";\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../elements/EFTemporal.js\";\nimport { globalURLTokenDeduplicator } from \"../transcoding/cache/URLTokenDeduplicator.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport {\n  type EFConfiguration,\n  efConfigurationContext,\n} from \"./EFConfiguration.ts\";\nimport { efContext } from \"./efContext.js\";\nimport { fetchContext } from \"./fetchContext.js\";\nimport { type FocusContext, focusContext } from \"./focusContext.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\n\nexport const targetTemporalContext =\n  createContext<TemporalMixinInterface | null>(Symbol(\"target-temporal\"));\n\nexport declare class ContextMixinInterface extends LitElement {\n  signingURL?: string;\n  apiHost?: string;\n  rendering: boolean;\n  playing: boolean;\n  loop: boolean;\n  currentTimeMs: number;\n  focusedElement?: HTMLElement;\n  targetTemporal: TemporalMixinInterface | null;\n  play(): Promise<void>;\n  pause(): void;\n}\n\nconst contextMixinSymbol = Symbol(\"contextMixin\");\n\nexport function isContextMixin(value: any): value is ContextMixinInterface {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    contextMixinSymbol in value.constructor\n  );\n}\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {\n  class ContextElement extends superClass {\n    static [contextMixinSymbol] = true;\n\n    @consume({ context: efConfigurationContext, subscribe: true })\n    efConfiguration: EFConfiguration | null = null;\n\n    @provide({ context: focusContext })\n    focusContext = this as FocusContext;\n\n    @provide({ context: focusedElementContext })\n    @state()\n    focusedElement?: HTMLElement;\n\n    #playingProvider!: ContextProvider<typeof playingContext>;\n    #loopProvider!: ContextProvider<typeof loopContext>;\n    #currentTimeMsProvider!: ContextProvider<typeof currentTimeContext>;\n    #targetTemporalProvider!: ContextProvider<typeof targetTemporalContext>;\n\n    #loop = false;\n\n    #apiHost?: string;\n    @property({ type: String, attribute: \"api-host\" })\n    get apiHost() {\n      return this.#apiHost ?? this.efConfiguration?.apiHost ?? \"\";\n    }\n\n    set apiHost(value: string) {\n      this.#apiHost = value;\n    }\n\n    @provide({ context: efContext })\n    efContext = this;\n\n    #targetTemporal: TemporalMixinInterface | null = null;\n\n    @state()\n    get targetTemporal(): TemporalMixinInterface | null {\n      return this.#targetTemporal;\n    }\n    #controllerSubscribed = false;\n\n    /**\n     * Find the first root temporal element (recursively searches through children)\n     * Supports ef-timegroup, ef-video, ef-audio, and any other temporal elements\n     * even when they're wrapped in non-temporal elements like divs\n     */\n    private findRootTemporal(): TemporalMixinInterface | null {\n      const findRecursive = (\n        element: Element,\n      ): TemporalMixinInterface | null => {\n        if (isEFTemporal(element)) {\n          return element as TemporalMixinInterface & HTMLElement;\n        }\n\n        for (const child of element.children) {\n          const found = findRecursive(child);\n          if (found) return found;\n        }\n\n        return null;\n      };\n\n      for (const child of this.children) {\n        const found = findRecursive(child);\n        if (found) return found;\n      }\n\n      return null;\n    }\n\n    set targetTemporal(value: TemporalMixinInterface | null) {\n      if (this.#targetTemporal === value) return;\n\n      // Unsubscribe from old controller updates\n      if (this.#targetTemporal?.playbackController) {\n        this.#targetTemporal.playbackController.removeListener(\n          this.#onControllerUpdate,\n        );\n        this.#controllerSubscribed = false;\n      }\n\n      this.#targetTemporal = value;\n      this.#targetTemporalProvider?.setValue(value);\n\n      // Sync all provided contexts\n      this.requestUpdate(\"targetTemporal\");\n      this.requestUpdate(\"playing\");\n      this.requestUpdate(\"loop\");\n      this.requestUpdate(\"currentTimeMs\");\n\n      // If the new targetTemporal has a playbackController, apply stored loop value immediately\n      if (value?.playbackController && this.#loop) {\n        value.playbackController.setLoop(this.#loop);\n      }\n\n      // If the new targetTemporal doesn't have a playbackController yet,\n      // wait for it to complete its updates (it might be initializing)\n      if (value && !value.playbackController) {\n        // Wait for the temporal element to initialize\n        (value as any).updateComplete?.then(() => {\n          if (value === this.#targetTemporal && !this.#controllerSubscribed) {\n            this.requestUpdate();\n          }\n        });\n      }\n    }\n\n    #onControllerUpdate = (\n      event: import(\"./PlaybackController.js\").PlaybackControllerUpdateEvent,\n    ) => {\n      switch (event.property) {\n        case \"playing\":\n          this.#playingProvider.setValue(event.value as boolean);\n          break;\n        case \"loop\":\n          this.#loopProvider.setValue(event.value as boolean);\n          break;\n        case \"currentTimeMs\":\n          this.#currentTimeMsProvider.setValue(event.value as number);\n          break;\n      }\n    };\n\n    // Add reactive properties that depend on the targetTemporal\n    @provide({ context: durationContext })\n    @property({ type: Number })\n    durationMs = 0;\n\n    @property({ type: Number })\n    endTimeMs = 0;\n\n    @provide({ context: fetchContext })\n    fetch = async (url: string, init: RequestInit = {}) => {\n      init.headers ||= {};\n      Object.assign(init.headers, {\n        \"Content-Type\": \"application/json\",\n      });\n\n      if (!EF_RENDERING() && this.signingURL) {\n        const { cacheKey, signingPayload } = this.#getTokenCacheKey(url);\n\n        // Use global token deduplicator to share tokens across all context providers\n        const urlToken = await globalURLTokenDeduplicator.getToken(\n          cacheKey,\n          async () => {\n            try {\n              const response = await fetch(this.signingURL, {\n                method: \"POST\",\n                body: JSON.stringify(signingPayload),\n              });\n\n              if (response.ok) {\n                const tokenData = await response.json();\n                return tokenData.token;\n              }\n              throw new Error(\n                `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`,\n              );\n            } catch (error) {\n              console.error(\"ContextMixin urlToken fetch error\", url, error);\n              throw error;\n            }\n          },\n          (token: string) => this.#parseTokenExpiration(token),\n        );\n\n        Object.assign(init.headers, {\n          authorization: `Bearer ${urlToken}`,\n        });\n      } else {\n        init.credentials = \"include\";\n      }\n\n      try {\n        return fetch(url, init);\n      } catch (error) {\n        console.error(\n          \"ContextMixin fetch error\",\n          url,\n          error,\n          window.location.href,\n        );\n        throw error;\n      }\n    };\n\n    // Note: URL token caching is now handled globally via URLTokenDeduplicator\n    // Keeping these for any potential backwards compatibility, but they're no longer used\n\n    /**\n     * Generate a cache key for URL token based on signing strategy\n     *\n     * Uses unified prefix + parameter matching approach:\n     * - For transcode URLs: signs base \"/api/v1/transcode\" + params like {url: \"source.mp4\"}\n     * - For regular URLs: signs full URL with empty params {}\n     * - All validation uses prefix matching + exhaustive parameter matching\n     * - Multiple transcode segments with same source share one token (reduces round-trips)\n     */\n    #getTokenCacheKey(url: string): {\n      cacheKey: string;\n      signingPayload: { url: string; params?: Record<string, string> };\n    } {\n      try {\n        const urlObj = new URL(url);\n\n        // Check if this is a transcode URL pattern\n        if (urlObj.pathname.includes(\"/api/v1/transcode/\")) {\n          const urlParam = urlObj.searchParams.get(\"url\");\n          if (urlParam) {\n            // For transcode URLs, sign the base path + url parameter\n            const basePath = `${urlObj.origin}/api/v1/transcode`;\n            const cacheKey = `${basePath}?url=${urlParam}`;\n            return {\n              cacheKey,\n              signingPayload: { url: basePath, params: { url: urlParam } },\n            };\n          }\n        }\n\n        // For non-transcode URLs, use full URL (existing behavior)\n        return {\n          cacheKey: url,\n          signingPayload: { url },\n        };\n      } catch {\n        // If URL parsing fails, fall back to full URL\n        return {\n          cacheKey: url,\n          signingPayload: { url },\n        };\n      }\n    }\n\n    /**\n     * Parse JWT token to extract safe expiration time (with buffer)\n     * @param token JWT token string\n     * @returns Safe expiration timestamp in milliseconds (actual expiry minus buffer), or 0 if parsing fails\n     */\n    #parseTokenExpiration(token: string): number {\n      try {\n        // JWT has 3 parts separated by dots: header.payload.signature\n        const parts = token.split(\".\");\n        if (parts.length !== 3) return 0;\n\n        // Decode the payload (second part)\n        const payload = parts[1];\n        if (!payload) return 0;\n\n        const decoded = atob(payload.replace(/-/g, \"+\").replace(/_/g, \"/\"));\n        const parsed = JSON.parse(decoded);\n\n        // Extract timestamps (in seconds)\n        const exp = parsed.exp;\n        const iat = parsed.iat;\n        if (!exp) return 0;\n\n        // Calculate token lifetime and buffer\n        const lifetimeSeconds = iat ? exp - iat : 3600; // Default to 1 hour if no iat\n        const tenPercentBufferMs = lifetimeSeconds * 0.1 * 1000; // 10% of lifetime in ms\n        const fiveMinutesMs = 5 * 60 * 1000; // 5 minutes in ms\n\n        // Use whichever buffer is smaller (more conservative)\n        const bufferMs = Math.min(fiveMinutesMs, tenPercentBufferMs);\n\n        // Return expiration time minus buffer\n        return exp * 1000 - bufferMs;\n      } catch {\n        return 0;\n      }\n    }\n\n    #signingURL?: string;\n    /**\n     * A URL that will be used to generated signed tokens for accessing media files from the\n     * editframe API. This is used to authenticate media requests per-user.\n     */\n    @property({ type: String, attribute: \"signing-url\" })\n    get signingURL() {\n      return this.#signingURL ?? this.efConfiguration?.signingURL ?? \"\";\n    }\n    set signingURL(value: string) {\n      this.#signingURL = value;\n    }\n\n    @property({ type: Boolean, reflect: true })\n    get playing(): boolean {\n      return this.targetTemporal?.playbackController?.playing ?? false;\n    }\n    set playing(value: boolean) {\n      if (this.targetTemporal?.playbackController) {\n        this.targetTemporal.playbackController.setPlaying(value);\n      }\n    }\n\n    @property({ type: Boolean, reflect: true, attribute: \"loop\" })\n    get loop(): boolean {\n      return this.targetTemporal?.playbackController?.loop ?? this.#loop;\n    }\n    set loop(value: boolean) {\n      const oldValue = this.#loop;\n      this.#loop = value;\n      if (this.targetTemporal?.playbackController) {\n        this.targetTemporal.playbackController.setLoop(value);\n      }\n      this.requestUpdate(\"loop\", oldValue);\n    }\n\n    @property({ type: Boolean })\n    rendering = false;\n\n    @property({ type: Number })\n    get currentTimeMs(): number {\n      return (\n        this.targetTemporal?.playbackController?.currentTimeMs ?? Number.NaN\n      );\n    }\n    set currentTimeMs(value: number) {\n      if (this.targetTemporal?.playbackController) {\n        this.targetTemporal.playbackController.setCurrentTimeMs(value);\n      }\n    }\n\n    #timegroupObserver = new MutationObserver((mutations) => {\n      let shouldUpdate = false;\n\n      for (const mutation of mutations) {\n        if (mutation.type === \"childList\") {\n          const newTemporal = this.findRootTemporal();\n          if (newTemporal !== this.targetTemporal) {\n            this.targetTemporal = newTemporal;\n            shouldUpdate = true;\n          } else if (\n            mutation.target instanceof Element &&\n            isEFTemporal(mutation.target)\n          ) {\n            // Handle childList changes within existing temporal elements\n            shouldUpdate = true;\n          }\n        } else if (mutation.type === \"attributes\") {\n          // Watch for attribute changes that might affect duration\n          const durationAffectingAttributes = [\n            \"duration\",\n            \"mode\",\n            \"trimstart\",\n            \"trimend\",\n            \"sourcein\",\n            \"sourceout\",\n          ];\n\n          if (\n            durationAffectingAttributes.includes(\n              mutation.attributeName || \"\",\n            ) ||\n            (mutation.target instanceof Element &&\n              isEFTemporal(mutation.target))\n          ) {\n            shouldUpdate = true;\n          }\n        }\n      }\n\n      if (shouldUpdate) {\n        // Trigger an update to ensure reactive properties recalculate\n        // Use a microtask to ensure DOM updates are complete\n        queueMicrotask(() => {\n          // Recalculate duration and endTime when temporal element changes\n          this.updateDurationProperties();\n          this.requestUpdate();\n          // Also ensure the targetTemporal updates its computed properties\n          if (this.targetTemporal) {\n            (this.targetTemporal as any).requestUpdate();\n          }\n        });\n      }\n    });\n\n    /**\n     * Update duration properties when temporal element changes\n     */\n    updateDurationProperties(): void {\n      const newDuration = this.targetTemporal?.durationMs ?? 0;\n      const newEndTime = this.targetTemporal?.endTimeMs ?? 0;\n\n      if (this.durationMs !== newDuration) {\n        this.durationMs = newDuration;\n      }\n\n      if (this.endTimeMs !== newEndTime) {\n        this.endTimeMs = newEndTime;\n      }\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      // Create manual context providers for playback state\n      this.#playingProvider = new ContextProvider(this, {\n        context: playingContext,\n        initialValue: this.playing,\n      });\n      this.#loopProvider = new ContextProvider(this, {\n        context: loopContext,\n        initialValue: this.loop,\n      });\n      this.#currentTimeMsProvider = new ContextProvider(this, {\n        context: currentTimeContext,\n        initialValue: this.currentTimeMs,\n      });\n      this.#targetTemporalProvider = new ContextProvider(this, {\n        context: targetTemporalContext,\n        initialValue: this.targetTemporal,\n      });\n\n      // Initialize targetTemporal to first root temporal element\n      this.targetTemporal = this.findRootTemporal();\n      // Initialize duration properties\n      this.updateDurationProperties();\n\n      this.#timegroupObserver.observe(this, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.#timegroupObserver.disconnect();\n\n      // Unsubscribe from controller\n      if (this.#targetTemporal?.playbackController) {\n        this.#targetTemporal.playbackController.removeListener(\n          this.#onControllerUpdate,\n        );\n        this.#controllerSubscribed = false;\n      }\n\n      this.pause();\n    }\n\n    updated(changedProperties: Map<string | number | symbol, unknown>) {\n      super.updated?.(changedProperties);\n\n      // Subscribe to controller when it becomes available\n      if (\n        !this.#controllerSubscribed &&\n        this.#targetTemporal?.playbackController\n      ) {\n        this.#targetTemporal.playbackController.addListener(\n          this.#onControllerUpdate,\n        );\n        this.#controllerSubscribed = true;\n\n        // Apply stored loop value when playbackController becomes available\n        if (this.#loop) {\n          this.#targetTemporal.playbackController.setLoop(this.#loop);\n        }\n\n        // Trigger initial sync of context providers\n        this.#playingProvider.setValue(this.playing);\n        this.#loopProvider.setValue(this.loop);\n        this.#currentTimeMsProvider.setValue(this.currentTimeMs);\n      }\n    }\n\n    async play() {\n      // If targetTemporal is not set, try to find it now\n      // This handles cases where the DOM may not have been fully ready during connectedCallback\n      if (!this.targetTemporal) {\n        // Wait for any temporal custom elements to be defined\n        const potentialTemporalTags = Array.from(this.children)\n          .map((el) => el.tagName.toLowerCase())\n          .filter((tag) => tag.startsWith(\"ef-\"));\n\n        await Promise.all(\n          potentialTemporalTags.map((tag) =>\n            customElements.whenDefined(tag).catch(() => {}),\n          ),\n        );\n\n        const foundTemporal = this.findRootTemporal();\n        if (foundTemporal) {\n          this.targetTemporal = foundTemporal;\n          // Wait for it to initialize\n          await (foundTemporal as any).updateComplete;\n        } else {\n          console.warn(\"No temporal element found to play\");\n          return;\n        }\n      }\n\n      // If playbackController doesn't exist yet, wait for it\n      if (!this.targetTemporal.playbackController) {\n        await (this.targetTemporal as any).updateComplete;\n        // After waiting, check again\n        if (!this.targetTemporal.playbackController) {\n          console.warn(\"PlaybackController not available for temporal element\");\n          return;\n        }\n      }\n\n      this.targetTemporal.playbackController.play();\n    }\n\n    pause() {\n      if (this.targetTemporal?.playbackController) {\n        this.targetTemporal.playbackController.pause();\n      }\n    }\n  }\n\n  return ContextElement as Constructor<ContextMixinInterface> & T;\n}\n"],"mappings":"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"}

package/dist/gui/Controllable.d.ts

@@ -1,15 +1,14 @@
-import { LitElement } from 'lit';
-import { TemporalMixinInterface } from '../elements/EFTemporal.js';
-import { ContextMixinInterface } from './ContextMixin.js';
-export declare class ControllableInterface extends LitElement {
-    playing: boolean;
-    loop: boolean;
-    currentTimeMs: number;
-    durationMs: number;
-    play(): void | Promise<void>;
-    pause(): void;
+import { LitElement } from "lit";
+
+//#region src/gui/Controllable.d.ts
+declare class ControllableInterface extends LitElement {
+  playing: boolean;
+  loop: boolean;
+  currentTimeMs: number;
+  durationMs: number;
+  play(): void | Promise<void>;
+  pause(): void;
 }
-export declare function isControllable(value: any): value is ControllableInterface;
-export type ControllableElement = ContextMixinInterface | (TemporalMixinInterface & {
-    playbackController: NonNullable<TemporalMixinInterface["playbackController"]>;
-});
+//#endregion
+export { ControllableInterface };
+//# sourceMappingURL=Controllable.d.ts.map

package/dist/gui/Controllable.js

@@ -1,9 +1,14 @@
 import { isEFTemporal } from "../elements/EFTemporal.js";
 import { isContextMixin } from "./ContextMixin.js";
+
+//#region src/gui/Controllable.ts
 function isControllable(value) {
 	if (!value || typeof value !== "object") return false;
 	if (isContextMixin(value)) return true;
 	if (isEFTemporal(value)) return value.playbackController !== void 0;
 	return false;
 }
+
+//#endregion
 export { isControllable };
+//# sourceMappingURL=Controllable.js.map

package/dist/gui/Controllable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controllable.js","names":[],"sources":["../../src/gui/Controllable.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\n\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../elements/EFTemporal.js\";\nimport { type ContextMixinInterface, isContextMixin } from \"./ContextMixin.js\";\n\nexport declare class ControllableInterface extends LitElement {\n  playing: boolean;\n  loop: boolean;\n  currentTimeMs: number;\n  durationMs: number;\n  play(): void | Promise<void>;\n  pause(): void;\n}\n\nexport function isControllable(value: any): value is ControllableInterface {\n  if (!value || typeof value !== \"object\") {\n    return false;\n  }\n\n  if (isContextMixin(value)) {\n    return true;\n  }\n\n  if (isEFTemporal(value)) {\n    const temporal = value as TemporalMixinInterface;\n    return temporal.playbackController !== undefined;\n  }\n\n  return false;\n}\n\nexport type ControllableElement =\n  | ContextMixinInterface\n  | (TemporalMixinInterface & {\n      playbackController: NonNullable<\n        TemporalMixinInterface[\"playbackController\"]\n      >;\n    });\n"],"mappings":";;;;AAiBA,SAAgB,eAAe,OAA4C;AACzE,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO;AAGT,KAAI,eAAe,MAAM,CACvB,QAAO;AAGT,KAAI,aAAa,MAAM,CAErB,QADiB,MACD,uBAAuB;AAGzC,QAAO"}

package/dist/gui/EFConfiguration.d.ts

@@ -1,17 +1,21 @@
-import { LitElement } from 'lit';
-export declare const efConfigurationContext: {
-    __context__: EFConfiguration | null;
-};
-export declare class EFConfiguration extends LitElement {
-    static styles: import('lit').CSSResult[];
-    efConfiguration: this;
-    apiHost?: string;
-    signingURL: string;
-    mediaEngine?: "cloud" | "local";
-    render(): import('lit-html').TemplateResult<1>;
+import * as lit9 from "lit";
+import { LitElement } from "lit";
+import * as lit_html9 from "lit-html";
+
+//#region src/gui/EFConfiguration.d.ts
+declare class EFConfiguration extends LitElement {
+  static styles: lit9.CSSResult[];
+  efConfiguration: this;
+  apiHost?: string;
+  signingURL: string;
+  mediaEngine?: "cloud" | "local";
+  render(): lit_html9.TemplateResult<1>;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-configuration": EFConfiguration;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-configuration": EFConfiguration;
+  }
 }
+//#endregion
+export { EFConfiguration };
+//# sourceMappingURL=EFConfiguration.d.ts.map

package/dist/gui/EFConfiguration.js

@@ -2,8 +2,10 @@ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/dec
 import { createContext, provide } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+
+//#region src/gui/EFConfiguration.ts
 const efConfigurationContext = createContext(Symbol("efConfigurationContext"));
-var EFConfiguration = class EFConfiguration$1 extends LitElement {
+let EFConfiguration = class EFConfiguration$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.efConfiguration = this;
@@ -35,4 +37,7 @@ __decorate([property({
 	attribute: "media-engine"
 })], EFConfiguration.prototype, "mediaEngine", void 0);
 EFConfiguration = __decorate([customElement("ef-configuration")], EFConfiguration);
+
+//#endregion
 export { EFConfiguration, efConfigurationContext };
+//# sourceMappingURL=EFConfiguration.js.map

package/dist/gui/EFConfiguration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFConfiguration.js","names":["EFConfiguration"],"sources":["../../src/gui/EFConfiguration.ts"],"sourcesContent":["import { createContext, provide } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const efConfigurationContext = createContext<EFConfiguration | null>(\n  Symbol(\"efConfigurationContext\"),\n);\n\n@customElement(\"ef-configuration\")\nexport class EFConfiguration extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ];\n\n  @provide({ context: efConfigurationContext })\n  efConfiguration = this;\n\n  @property({ type: String, attribute: \"api-host\" })\n  apiHost?: string;\n\n  @property({ type: String, attribute: \"signing-url\" })\n  signingURL = \"/@ef-sign-url\";\n\n  @property({ type: String, attribute: \"media-engine\" })\n  mediaEngine?: \"cloud\" | \"local\" = \"cloud\";\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-configuration\": EFConfiguration;\n  }\n}\n"],"mappings":";;;;;;AAIA,MAAa,yBAAyB,cACpC,OAAO,yBAAyB,CACjC;AAGM,4BAAMA,0BAAwB,WAAW;;;yBAU5B;oBAML;qBAGqB;;;gBAlBlB,CACd,GAAG;;;;MAKJ;;CAcD,SAAS;AACP,SAAO,IAAI;;;YAbZ,QAAQ,EAAE,SAAS,wBAAwB,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAY,CAAC;YAGjD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YAGpD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,CAAC;8BAnBvD,cAAc,mBAAmB"}

package/dist/gui/EFControls.d.ts

@@ -1,10 +1,11 @@
-import { LitElement, PropertyValueMap } from 'lit';
-import { TemporalMixinInterface } from '../elements/EFTemporal.js';
-import { ControllableInterface } from './Controllable.js';
-import { FocusContext } from './focusContext.js';
-export declare const testContext: {
-    __context__: string | null;
-};
+import { TemporalMixinInterface } from "../elements/EFTemporal.js";
+import { ControllableInterface } from "./Controllable.js";
+import { FocusContext } from "./focusContext.js";
+import * as lit21 from "lit";
+import { LitElement, PropertyValueMap } from "lit";
+
+//#region src/gui/EFControls.d.ts
+
 /**
  * EFControls provides a way to control an ef-preview element that is not a direct ancestor.
  * It bridges the contexts from a target preview element to its children controls.
@@ -23,30 +24,33 @@ export declare const testContext: {
  * </ef-controls>
  * ```
  */
-export declare class EFControls extends LitElement {
-    #private;
-    static styles: import('lit').CSSResult;
-    createRenderRoot(): this;
-    /**
-     * The ID of the ef-preview element to control
-     */
-    target: string;
-    /**
-     * The target element (set by TargetController)
-     */
-    targetElement: ControllableInterface | null;
-    playing: boolean;
-    loop: boolean;
-    currentTimeMs: number;
-    durationMs: number;
-    targetTemporal: TemporalMixinInterface | null;
-    focusedElement?: HTMLElement;
-    focusContext: FocusContext;
-    updated(changedProperties: PropertyValueMap<this>): void;
-    disconnectedCallback(): void;
+declare class EFControls extends LitElement {
+  #private;
+  static styles: lit21.CSSResult;
+  createRenderRoot(): this;
+  /**
+   * The ID of the ef-preview element to control
+   */
+  target: string;
+  /**
+   * The target element (set by TargetController)
+   */
+  targetElement: ControllableInterface | null;
+  playing: boolean;
+  loop: boolean;
+  currentTimeMs: number;
+  durationMs: number;
+  targetTemporal: TemporalMixinInterface | null;
+  focusedElement?: HTMLElement;
+  focusContext: FocusContext;
+  updated(changedProperties: PropertyValueMap<this>): void;
+  disconnectedCallback(): void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-controls": EFControls;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-controls": EFControls;
+  }
 }
+//#endregion
+export { EFControls };
+//# sourceMappingURL=EFControls.d.ts.map

package/dist/gui/EFControls.js

@@ -11,6 +11,8 @@ import { attachContextRoot } from "../attachContextRoot.js";
 import { createContext, provide } from "@lit/context";
 import { LitElement, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+
+//#region src/gui/EFControls.ts
 attachContextRoot();
 var ContextRequestEvent = class extends Event {
 	constructor(context, contextTarget, callback, subscribe) {
@@ -24,7 +26,7 @@ var ContextRequestEvent = class extends Event {
 		this.subscribe = subscribe ?? false;
 	}
 };
-var proxiedContexts = [
+const proxiedContexts = [
 	[(proxy, value) => proxy.playing = value, playingContext],
 	[(proxy, value) => proxy.loop = value, loopContext],
 	[(proxy, value) => proxy.currentTimeMs = value, currentTimeContext],
@@ -33,8 +35,8 @@ var proxiedContexts = [
 	[(proxy, value) => proxy.focusedElement = value, focusedElementContext],
 	[(proxy, value) => proxy.focusContext.focusedElement = value, focusContext]
 ];
-createContext("test");
-var EFControls = class EFControls$1 extends LitElement {
+const testContext = createContext("test");
+let EFControls = class EFControls$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.target = "";
@@ -90,4 +92,7 @@ __decorate([provide({ context: targetTemporalContext }), state()], EFControls.pr
 __decorate([provide({ context: focusedElementContext }), state()], EFControls.prototype, "focusedElement", void 0);
 __decorate([provide({ context: focusContext })], EFControls.prototype, "focusContext", void 0);
 EFControls = __decorate([customElement("ef-controls")], EFControls);
+
+//#endregion
 export { EFControls };
+//# sourceMappingURL=EFControls.js.map

package/dist/gui/EFControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFControls.js","names":["EFControls","#proxyUnsubscribeMap","#unsubscribe"],"sources":["../../src/gui/EFControls.ts"],"sourcesContent":["import { type Context, createContext, provide } from \"@lit/context\";\nimport { css, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { attachContextRoot } from \"../attachContextRoot.js\";\nimport type { TemporalMixinInterface } from \"../elements/EFTemporal.js\";\nimport { TargetController } from \"../elements/TargetController.js\";\nimport { targetTemporalContext } from \"./ContextMixin.js\";\nimport type { ControllableInterface } from \"./Controllable.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { efContext } from \"./efContext.js\";\nimport { type FocusContext, focusContext } from \"./focusContext.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\n\nattachContextRoot();\n\nclass ContextRequestEvent extends Event {\n  context: Context<any, any>;\n  contextTarget: Element;\n  callback: (proxy: EFControls, value: any) => void;\n  subscribe: boolean;\n\n  constructor(\n    context: Context<any, any>,\n    contextTarget: Element,\n    callback: (proxy: EFControls, value: any) => void,\n    subscribe: boolean,\n  ) {\n    super(\"context-request\", { bubbles: true, composed: true });\n    this.context = context;\n    this.contextTarget = contextTarget;\n    this.callback = callback;\n    this.subscribe = subscribe ?? false;\n  }\n}\n\nconst proxiedContexts = [\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: boolean) => (proxy.playing = value),\n    playingContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: boolean) => (proxy.loop = value),\n    loopContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: number) => (proxy.currentTimeMs = value),\n    currentTimeContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: number) => (proxy.durationMs = value),\n    durationContext,\n  ],\n  [\n    (proxy: EFControls, value: TemporalMixinInterface) =>\n      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n      (proxy.targetTemporal = value),\n    targetTemporalContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: HTMLElement) => (proxy.focusedElement = value),\n    focusedElementContext,\n  ],\n  [\n    (proxy: EFControls, value: HTMLElement) =>\n      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n      (proxy.focusContext.focusedElement = value),\n    focusContext,\n  ],\n] as const;\n\nexport const testContext = createContext<string | null>(\"test\");\n\n/**\n * EFControls provides a way to control an ef-preview element that is not a direct ancestor.\n * It bridges the contexts from a target preview element to its children controls.\n *\n * Usage:\n * ```html\n * <ef-preview id=\"my-preview\">...</ef-preview>\n *\n * <ef-controls target=\"my-preview\">\n *   <ef-toggle-play>\n *     <button slot=\"play\">Play</button>\n *     <button slot=\"pause\">Pause</button>\n *   </ef-toggle-play>\n *   <ef-scrubber></ef-scrubber>\n *   <ef-time-display></ef-time-display>\n * </ef-controls>\n * ```\n */\n@customElement(\"ef-controls\")\nexport class EFControls extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n  `;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  /**\n   * The ID of the ef-preview element to control\n   */\n  @property({ type: String })\n  target = \"\";\n\n  /**\n   * The target element (set by TargetController)\n   */\n  @provide({ context: efContext })\n  @state()\n  targetElement: ControllableInterface | null = null;\n\n  @provide({ context: playingContext })\n  @state()\n  playing = false;\n\n  @provide({ context: loopContext })\n  @state()\n  loop = false;\n\n  @provide({ context: currentTimeContext })\n  @state()\n  currentTimeMs = 0;\n\n  @provide({ context: durationContext })\n  @state()\n  durationMs = 0;\n\n  @provide({ context: targetTemporalContext })\n  @state()\n  targetTemporal: TemporalMixinInterface | null = null;\n\n  @provide({ context: focusedElementContext })\n  @state()\n  focusedElement?: HTMLElement;\n\n  @provide({ context: focusContext })\n  focusContext = this as FocusContext;\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController = new TargetController(this);\n\n  #proxyUnsubscribeMap = new Map<Context<any, any>, () => void>();\n\n  #unsubscribe() {\n    for (const unsubscribe of this.#proxyUnsubscribeMap.values()) {\n      unsubscribe();\n    }\n    this.#proxyUnsubscribeMap.clear();\n  }\n\n  updated(changedProperties: PropertyValueMap<this>) {\n    super.updated(changedProperties);\n    if (changedProperties.has(\"targetElement\")) {\n      this.#unsubscribe();\n\n      if (this.targetElement) {\n        for (const [callback, context] of proxiedContexts) {\n          const event = new ContextRequestEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              callback(this, value as never);\n              this.#proxyUnsubscribeMap.set(context, unsubscribe);\n            },\n            true,\n          );\n          this.targetElement.dispatchEvent(event);\n        }\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#unsubscribe();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-controls\": EFControls;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,mBAAmB;AAEnB,IAAM,sBAAN,cAAkC,MAAM;CAMtC,YACE,SACA,eACA,UACA,WACA;AACA,QAAM,mBAAmB;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC;AAC3D,OAAK,UAAU;AACf,OAAK,gBAAgB;AACrB,OAAK,WAAW;AAChB,OAAK,YAAY,aAAa;;;AAIlC,MAAM,kBAAkB;CACtB,EAEG,OAAmB,UAAoB,MAAM,UAAU,OACxD,eACD;CACD,EAEG,OAAmB,UAAoB,MAAM,OAAO,OACrD,YACD;CACD,EAEG,OAAmB,UAAmB,MAAM,gBAAgB,OAC7D,mBACD;CACD,EAEG,OAAmB,UAAmB,MAAM,aAAa,OAC1D,gBACD;CACD,EACG,OAAmB,UAEjB,MAAM,iBAAiB,OAC1B,sBACD;CACD,EAEG,OAAmB,UAAwB,MAAM,iBAAiB,OACnE,sBACD;CACD,EACG,OAAmB,UAEjB,MAAM,aAAa,iBAAiB,OACvC,aACD;CACF;AAED,MAAa,cAAc,cAA6B,OAAO;AAqBxD,uBAAMA,qBAAmB,WAAW;;;gBAehC;uBAOqC;iBAIpC;cAIH;uBAIS;oBAIH;wBAImC;sBAOjC;;;gBAhDC,GAAG;;;;;;CAMnB,mBAAmB;AACjB,SAAO;;CA6CT,oBAAoB,IAAI,iBAAiB,KAAK;CAE9C,uCAAuB,IAAI,KAAoC;CAE/D,eAAe;AACb,OAAK,MAAM,eAAe,MAAKC,oBAAqB,QAAQ,CAC1D,cAAa;AAEf,QAAKA,oBAAqB,OAAO;;CAGnC,QAAQ,mBAA2C;AACjD,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,gBAAgB,EAAE;AAC1C,SAAKC,aAAc;AAEnB,OAAI,KAAK,cACP,MAAK,MAAM,CAAC,UAAU,YAAY,iBAAiB;IACjD,MAAM,QAAQ,IAAI,oBAChB,SACA,OACC,OAAO,gBAAgB;AACtB,cAAS,MAAM,MAAe;AAC9B,WAAKD,oBAAqB,IAAI,SAAS,YAAY;OAErD,KACD;AACD,SAAK,cAAc,cAAc,MAAM;;;;CAM/C,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,QAAKC,aAAc;;;YA1EpB,SAAS,EAAE,MAAM,QAAQ,CAAC;YAM1B,QAAQ,EAAE,SAAS,WAAW,CAAC,EAC/B,OAAO;YAGP,QAAQ,EAAE,SAAS,gBAAgB,CAAC,EACpC,OAAO;YAGP,QAAQ,EAAE,SAAS,aAAa,CAAC,EACjC,OAAO;YAGP,QAAQ,EAAE,SAAS,oBAAoB,CAAC,EACxC,OAAO;YAGP,QAAQ,EAAE,SAAS,iBAAiB,CAAC,EACrC,OAAO;YAGP,QAAQ,EAAE,SAAS,uBAAuB,CAAC,EAC3C,OAAO;YAGP,QAAQ,EAAE,SAAS,uBAAuB,CAAC,EAC3C,OAAO;YAGP,QAAQ,EAAE,SAAS,cAAc,CAAC;yBAjDpC,cAAc,cAAc"}

package/dist/gui/EFDial.d.ts

@@ -1,18 +1,25 @@
-import { LitElement } from 'lit';
-export interface DialChangeDetail {
-    value: number;
+import * as lit20 from "lit";
+import { LitElement } from "lit";
+import * as lit_html18 from "lit-html";
+
+//#region src/gui/EFDial.d.ts
+interface DialChangeDetail {
+  value: number;
 }
-export declare class EFDial extends LitElement {
-    set value(newValue: number);
-    get value(): number;
-    private _value;
-    private isDragging;
-    private dragStartAngle;
-    private dragStartValue;
-    static styles: import('lit').CSSResult;
-    private getAngleFromPoint;
-    private handlePointerDown;
-    private handlePointerMove;
-    private handlePointerUp;
-    render(): import('lit-html').TemplateResult<1>;
+declare class EFDial extends LitElement {
+  set value(newValue: number);
+  get value(): number;
+  private _value;
+  private isDragging;
+  private dragStartAngle;
+  private dragStartValue;
+  static styles: lit20.CSSResult;
+  private getAngleFromPoint;
+  private handlePointerDown;
+  private handlePointerMove;
+  private handlePointerUp;
+  render(): lit_html18.TemplateResult<1>;
 }
+//#endregion
+export { DialChangeDetail, EFDial };
+//# sourceMappingURL=EFDial.d.ts.map

package/dist/gui/EFDial.js

@@ -2,7 +2,9 @@ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/dec
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
-var EFDial = class EFDial$1 extends LitElement {
+
+//#region src/gui/EFDial.ts
+let EFDial = class EFDial$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this._value = 0;
@@ -138,4 +140,7 @@ var EFDial = class EFDial$1 extends LitElement {
 __decorate([property({ type: Number })], EFDial.prototype, "value", null);
 __decorate([state()], EFDial.prototype, "isDragging", void 0);
 EFDial = __decorate([customElement("ef-dial")], EFDial);
+
+//#endregion
 export { EFDial };
+//# sourceMappingURL=EFDial.js.map

package/dist/gui/EFDial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFDial.js","names":["EFDial"],"sources":["../../src/gui/EFDial.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nexport interface DialChangeDetail {\n  value: number;\n}\n\n@customElement(\"ef-dial\")\nexport class EFDial extends LitElement {\n  @property({ type: Number })\n  set value(newValue: number) {\n    // Normalize to 0-360 range\n    newValue = newValue % 360;\n    if (newValue < 0) {\n      newValue += 360;\n    }\n    // Limit to 6 significant digits\n    newValue = Number.parseFloat(newValue.toPrecision(6));\n\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate(\"value\", oldValue);\n  }\n\n  get value() {\n    return this._value;\n  }\n\n  private _value = 0;\n\n  @state()\n  private isDragging = false;\n\n  private dragStartAngle = 0;\n  private dragStartValue = 0;\n\n  static styles = css`\n    :host {\n        display: inline-block;\n        width: 200px; /* Default size, can be overridden by CSS */\n        height: 200px; /* Default size, can be overridden by CSS */\n    }\n    .dial-container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background-color: #f3f4f6;\n      border: 2px solid #d1d5db;\n    }\n    .handle {\n        position: absolute;\n        width: 16px;\n        height: 16px;\n        border-radius: 50%;\n        border: 2px solid #3b82f6;\n        background-color: white;\n        cursor: grab;\n    }\n    .handle.dragging {\n        background-color: #3b82f6;\n        cursor: grabbing;\n    }\n    .center-text {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        background-color: white;\n        border: 1px solid #d1d5db;\n        padding: 2px 4px;\n        border-radius: 4px;\n        font-family: monospace;\n        font-size: 12px;\n    }\n  `;\n\n  private getAngleFromPoint(clientX: number, clientY: number, rect: DOMRect) {\n    const center = this.clientWidth / 2;\n    const x = clientX - rect.left - center;\n    const y = clientY - rect.top - center;\n    return Math.atan2(y, x);\n  }\n\n  private handlePointerDown(e: PointerEvent) {\n    e.preventDefault();\n    this.isDragging = true;\n    const rect = this.getBoundingClientRect();\n    this.dragStartAngle = this.getAngleFromPoint(e.clientX, e.clientY, rect);\n    this.dragStartValue = this.value;\n    this.setPointerCapture(e.pointerId);\n    this.addEventListener(\"pointermove\", this.handlePointerMove);\n    this.addEventListener(\"pointerup\", this.handlePointerUp);\n  }\n\n  private handlePointerMove(e: PointerEvent) {\n    if (!this.isDragging) return;\n\n    const rect = this.getBoundingClientRect();\n    const currentAngle = this.getAngleFromPoint(e.clientX, e.clientY, rect);\n    const angleDelta = currentAngle - this.dragStartAngle;\n\n    let newValue = this.dragStartValue + (angleDelta * 180) / Math.PI;\n\n    if (e.shiftKey) {\n      newValue = Math.round(newValue / 15) * 15;\n    }\n\n    // Normalize to 0-360 range\n    newValue = newValue % 360;\n    if (newValue < 0) {\n      newValue += 360;\n    }\n\n    // Limit to 6 significant digits\n    newValue = Number.parseFloat(newValue.toPrecision(6));\n\n    this.value = newValue;\n    this.dispatchEvent(\n      new CustomEvent<DialChangeDetail>(\"change\", {\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  private handlePointerUp(e: PointerEvent) {\n    this.isDragging = false;\n    this.releasePointerCapture(e.pointerId);\n    this.removeEventListener(\"pointermove\", this.handlePointerMove);\n    this.removeEventListener(\"pointerup\", this.handlePointerUp);\n  }\n\n  render() {\n    const center = this.clientWidth / 2;\n    const radius = center - 20;\n    const handleAngle = (this.value * Math.PI) / 180;\n    const handleX = center + Math.cos(handleAngle) * radius;\n    const handleY = center + Math.sin(handleAngle) * radius;\n\n    const handleStyles = {\n      left: `${handleX - 8}px`,\n      top: `${handleY - 8}px`,\n    };\n\n    return html`\n      <div class=\"dial-container\" @pointerdown=${this.handlePointerDown}>\n        <svg class=\"absolute inset-0 w-full h-full\">\n          <circle\n            cx=${center}\n            cy=${center}\n            r=${radius}\n            fill=\"none\"\n            stroke=\"#94a3b8\"\n            stroke-width=\"2\"\n            stroke-dasharray=\"4 4\"\n          />\n          ${[0, 90, 180, 270].map((deg) => {\n            const angle = (deg * Math.PI) / 180;\n            const x1 = center + Math.cos(angle) * (radius - 8);\n            const y1 = center + Math.sin(angle) * (radius - 8);\n            const x2 = center + Math.cos(angle) * (radius + 8);\n            const y2 = center + Math.sin(angle) * (radius + 8);\n            return html`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=\"#64748b\" stroke-width=\"2\" />`;\n          })}\n        </svg>\n        <div class=\"handle ${this.isDragging ? \"dragging\" : \"\"}\" style=${styleMap(handleStyles)}></div>\n        <div class=\"center-text\">${this.value.toFixed(0)}°</div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}