@videojs/html 0.1.0-preview.7 → 0.1.0-preview.9

package/dist/{volume-slider-CbFzCHX4.js → volume-slider-CUyfwehe.js}

@@ -1,14 +1,23 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent, t as getCoreState } from "./component-factory-C0cl1nrL.js";
 import { volumeSliderStateDefinition } from "@videojs/core/store";
 import { setAttributes } from "@videojs/utils/dom";
 import { VolumeSlider } from "@videojs/core";
 
 //#region src/elements/volume-slider.ts
+function getVolumeSliderRootState(mediaStore) {
+	const mediaState = volumeSliderStateDefinition.stateTransform(mediaStore.getState());
+	const mediaMethods = volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch);
+	return { ...getCoreState(VolumeSlider, {
+		...mediaState,
+		...mediaMethods
+	}) };
+}
 /**
 * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps
 * Handles element attributes and properties based on state
 */
 const getVolumeSliderRootProps = (state, element) => {
+	if (state._rootElement !== element) state._setRootElement(element);
 	const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;
 	return {
 		role: "slider",
@@ -19,20 +28,17 @@ const getVolumeSliderRootProps = (state, element) => {
 		"aria-label": "Volume",
 		"aria-valuemin": "0",
 		"aria-valuemax": "100",
+		"aria-valuenow": Math.round(state.muted ? 0 : state.volume * 100).toString(),
 		"aria-valuetext": volumeText,
 		"aria-orientation": element.orientation || "horizontal"
 	};
 };
 var VolumeSliderRoot = class extends HTMLElement {
-	constructor(..._args) {
-		super(..._args);
-		this._core = null;
-	}
 	static {
-		this.observedAttributes = ["orientation"];
+		this.observedAttributes = ["commandfor", "orientation"];
 	}
 	get volume() {
-		return this._state?.volume;
+		return this._state?.volume ?? 0;
 	}
 	get muted() {
 		return this._state?.muted ?? false;
@@ -43,39 +49,23 @@ var VolumeSliderRoot = class extends HTMLElement {
 	get orientation() {
 		return this.getAttribute("orientation") || "horizontal";
 	}
-	attributeChangedCallback(name, _oldValue, _newValue) {
-		if (name === "orientation" && this._state) this._render(getVolumeSliderRootProps(this._state, this), this._state);
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (name === "orientation" && this._state) this._update(getVolumeSliderRootProps(this._state, this), this._state);
+		else if (name === "commandfor") this.style.setProperty("anchor-name", `--${newValue}`);
 	}
-	_update(_props, state) {
+	_update(props, state) {
 		this._state = state;
-		if (state && !this._core) {
-			this._core = new VolumeSlider();
-			this._core.subscribe(() => this._render(getVolumeSliderRootProps(state, this), state));
-			this._core.attach(this);
-			state.core = this._core;
-		}
-		this._core?.setState(state);
-	}
-	_render(props, state) {
-		const coreState = state?.core?.getState();
-		if (!coreState) return;
-		this.style.setProperty("--slider-fill", `${coreState._fillWidth.toFixed(3)}%`);
-		this.style.setProperty("--slider-pointer", `${coreState._pointerWidth.toFixed(3)}%`);
-		props["aria-valuenow"] = coreState._fillWidth.toString();
+		this.style.setProperty("--slider-fill", `${state._fillWidth.toFixed(3)}%`);
 		setAttributes(this, props);
 	}
 };
-/**
-* VolumeSlider Track component - Track element that captures pointer events
-*/
+const VolumeSliderRootElement = toConnectedHTMLComponent(VolumeSliderRoot, getVolumeSliderRootState, getVolumeSliderRootProps, "VolumeSliderRoot");
+const getVolumeSliderTrackProps = (_state, element) => {
+	const rootElement = element.closest("media-volume-slider");
+	if (rootElement._state?._trackElement !== element) rootElement._state?._setTrackElement?.(element);
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
 var VolumeSliderTrack = class extends HTMLElement {
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		const rootElement = this.closest("media-volume-slider");
-		if (rootElement?._state?.core) rootElement._state.core.setState({ _trackElement: this });
-	}
 	_update(props, _state) {
 		setAttributes(this, props);
 		if (props["data-orientation"] === "horizontal") {
@@ -87,9 +77,11 @@ var VolumeSliderTrack = class extends HTMLElement {
 		}
 	}
 };
-/**
-* VolumeSlider Progress component - Shows current progress
-*/
+const VolumeSliderTrackElement = toConnectedHTMLComponent(VolumeSliderTrack, void 0, getVolumeSliderTrackProps, "VolumeSliderTrack");
+const getVolumeSliderIndicatorProps = (_state, element) => {
+	const rootElement = element.closest("media-volume-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
 var VolumeSliderIndicator = class extends HTMLElement {
 	constructor() {
 		super();
@@ -112,9 +104,11 @@ var VolumeSliderIndicator = class extends HTMLElement {
 		}
 	}
 };
-/**
-* VolumeSlider Thumb component - Draggable thumb element
-*/
+const VolumeSliderIndicatorElement = toConnectedHTMLComponent(VolumeSliderIndicator, void 0, getVolumeSliderIndicatorProps, "VolumeSliderIndicator");
+const getVolumeSliderThumbProps = (_state, element) => {
+	const rootElement = element.closest("media-volume-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
 var VolumeSliderThumb = class extends HTMLElement {
 	constructor() {
 		super();
@@ -133,67 +127,7 @@ var VolumeSliderThumb = class extends HTMLElement {
 		}
 	}
 };
-/**
-* VolumeSlider Root state hook - equivalent to React's useVolumeSliderRootState
-* Handles media store state subscription and transformation
-*/
-const useVolumeSliderRootState = {
-	keys: volumeSliderStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...volumeSliderStateDefinition.stateTransform(rawState),
-		...volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
-		core: null
-	})
-};
-/**
-* VolumeSlider Track props hook
-*/
-const getVolumeSliderTrackProps = (_state, element) => {
-	const rootElement = element.closest("media-volume-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-/**
-* VolumeSlider Progress props hook
-*/
-const getVolumeSliderProgressProps = (_state, element) => {
-	const rootElement = element.closest("media-volume-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-/**
-* VolumeSlider Thumb props hook
-*/
-const getVolumeSliderThumbProps = (_state, element) => {
-	const rootElement = element.closest("media-volume-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-/**
-* Connected VolumeSlider Root component using hook-style architecture
-*/
-const VolumeSliderRootElement = toConnectedHTMLComponent(VolumeSliderRoot, useVolumeSliderRootState, getVolumeSliderRootProps, "VolumeSliderRoot");
-/**
-* Connected VolumeSlider Track component
-*/
-const VolumeSliderTrackElement = toConnectedHTMLComponent(VolumeSliderTrack, {
-	keys: [],
-	transform: () => ({})
-}, getVolumeSliderTrackProps, "VolumeSliderTrack");
-/**
-* Connected VolumeSlider Progress component
-*/
-const VolumeSliderIndicatorElement = toConnectedHTMLComponent(VolumeSliderIndicator, {
-	keys: [],
-	transform: () => ({})
-}, getVolumeSliderProgressProps, "VolumeSliderProgress");
-/**
-* Connected VolumeSlider Thumb component
-*/
-const VolumeSliderThumbElement = toConnectedHTMLComponent(VolumeSliderThumb, {
-	keys: [],
-	transform: () => ({})
-}, getVolumeSliderThumbProps, "VolumeSliderThumb");
-/**
-* Compound VolumeSlider component object
-*/
+const VolumeSliderThumbElement = toConnectedHTMLComponent(VolumeSliderThumb, void 0, getVolumeSliderThumbProps, "VolumeSliderThumb");
 const VolumeSliderElement = Object.assign({}, {
 	Root: VolumeSliderRootElement,
 	Track: VolumeSliderTrackElement,
@@ -203,4 +137,4 @@ const VolumeSliderElement = Object.assign({}, {
 
 //#endregion
 export { VolumeSliderTrackElement as a, VolumeSliderThumbElement as i, VolumeSliderIndicatorElement as n, VolumeSliderRootElement as r, VolumeSliderElement as t };
-//# sourceMappingURL=volume-slider-CbFzCHX4.js.map
+//# sourceMappingURL=volume-slider-CUyfwehe.js.map

package/dist/volume-slider-CUyfwehe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider-CUyfwehe.js","names":["CoreVolumeSlider","getVolumeSliderRootProps: PropsHook<VolumeSliderState>","VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderState>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","getVolumeSliderIndicatorProps: PropsHook<Record<string, never>>","VolumeSliderIndicatorElement: ConnectedComponentConstructor<any>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/volume-slider.ts"],"sourcesContent":["import type { MediaStore } from '@videojs/core/store';\nimport type { Prettify } from '../types';\n\nimport type { ConnectedComponentConstructor, PropsHook } from '../utils/component-factory';\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { getCoreState, toConnectedHTMLComponent } from '../utils/component-factory';\n\ntype VolumeSliderState = Prettify<ReturnType<CoreVolumeSlider['getState']>>;\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function getVolumeSliderRootState(mediaStore: MediaStore): VolumeSliderState {\n  const mediaState = volumeSliderStateDefinition.stateTransform(mediaStore.getState());\n  const mediaMethods = volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch);\n  const coreState = getCoreState(CoreVolumeSlider, { ...mediaState, ...mediaMethods });\n  return {\n    ...coreState,\n  };\n}\n\n/**\n * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getVolumeSliderRootProps: PropsHook<VolumeSliderState> = (state, element) => {\n  if (state._rootElement !== element) {\n    state._setRootElement(element);\n  }\n\n  const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;\n\n  return {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-muted': state.muted.toString(),\n    'data-volume-level': state.volumeLevel,\n    'data-orientation': (element as any).orientation || 'horizontal',\n    'aria-label': 'Volume',\n    'aria-valuemin': '0',\n    'aria-valuemax': '100',\n    'aria-valuenow': Math.round(state.muted ? 0 : state.volume * 100).toString(),\n    'aria-valuetext': volumeText,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n};\n\nexport class VolumeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = [\n    'commandfor',\n    'orientation',\n  ];\n\n  _state: VolumeSliderState | undefined;\n\n  get volume(): number {\n    return this._state?.volume ?? 0;\n  }\n\n  get muted(): boolean {\n    return this._state?.muted ?? false;\n  }\n\n  get volumeLevel(): string {\n    return this._state?.volumeLevel ?? 'high';\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._update(getVolumeSliderRootProps(this._state, this), this._state);\n    } else if (name === 'commandfor') {\n      this.style.setProperty('anchor-name', `--${newValue}`);\n    }\n  }\n\n  _update(props: any, state: VolumeSliderState): void {\n    this._state = state;\n\n    this.style.setProperty('--slider-fill', `${state._fillWidth.toFixed(3)}%`);\n\n    setAttributes(this, props);\n  }\n}\n\nexport const VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderState>\n  = toConnectedHTMLComponent(\n    VolumeSliderRoot,\n    getVolumeSliderRootState,\n    getVolumeSliderRootProps,\n    'VolumeSliderRoot',\n  );\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport const getVolumeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n\n  if (rootElement._state?._trackElement !== element) {\n    rootElement._state?._setTrackElement?.(element);\n  }\n\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class VolumeSliderTrack extends HTMLElement {\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\nexport const VolumeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderTrack,\n  undefined,\n  getVolumeSliderTrackProps,\n  'VolumeSliderTrack',\n);\n\n// ============================================================================\n// INDICATOR COMPONENT\n// ============================================================================\n\nexport const getVolumeSliderIndicatorProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class VolumeSliderIndicator extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport const VolumeSliderIndicatorElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderIndicator,\n  undefined,\n  getVolumeSliderIndicatorProps,\n  'VolumeSliderIndicator',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport const getVolumeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class VolumeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\nexport const VolumeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderThumb,\n  undefined,\n  getVolumeSliderThumbProps,\n  'VolumeSliderThumb',\n);\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const VolumeSliderElement = Object.assign(\n  {},\n  {\n    Root: VolumeSliderRootElement,\n    Track: VolumeSliderTrackElement,\n    Indicator: VolumeSliderIndicatorElement,\n    Thumb: VolumeSliderThumbElement,\n  },\n) as {\n  Root: typeof VolumeSliderRootElement;\n  Track: typeof VolumeSliderTrackElement;\n  Indicator: typeof VolumeSliderIndicatorElement;\n  Thumb: typeof VolumeSliderThumbElement;\n};\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "0.1.0-preview.7",
+  "version": "0.1.0-preview.9",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,9 +46,9 @@
   ],
   "dependencies": {
     "@open-wc/context-protocol": "^0.0.9",
-    "@videojs/core": "0.1.0-preview.7",
-    "@videojs/icons": "0.1.0-preview.7",
-    "@videojs/utils": "0.1.0-preview.7"
+    "@videojs/core": "0.1.0-preview.9",
+    "@videojs/icons": "0.1.0-preview.9",
+    "@videojs/utils": "0.1.0-preview.9"
   },
   "devDependencies": {
     "tsdown": "^0.15.9",

package/dist/component-factory-DeAN6cjC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-factory-DeAN6cjC.js","names":[],"sources":["../src/utils/component-factory.ts"],"sourcesContent":["import { ConsumerMixin } from '@open-wc/context-protocol';\n\n/**\n * Generic types for HTML component hooks pattern\n * Mirrors the React hooks architecture for consistency\n */\nexport interface StateHook<T = any> {\n  keys: string[];\n  transform: (rawState: any, mediaStore: any) => T;\n}\n\nexport type PropsHook<T = any, P = any> = (state: T, element: HTMLElement) => P;\n\nexport interface ConnectedComponentConstructor<State> {\n  new (state: State): HTMLElement;\n}\n\n/**\n * Generic factory function to create connected HTML components using hooks pattern.\n * Provides equivalent functionality to React's toConnectedComponent but for custom elements.\n *\n * @param BaseClass - Base custom element class to extend\n * @param stateHook - Hook that defines state keys and transformation logic\n * @param propsHook - Hook that handles element attributes and properties based on state\n * @param eventsHook - Hook that defines event handling logic\n * @param displayName - Display name for debugging\n * @returns Connected custom element class with media store integration\n */\nexport function toConnectedHTMLComponent<State = any>(\n  BaseClass: CustomElementConstructor,\n  stateHook: StateHook<State>,\n  propsHook: PropsHook<State>,\n  displayName?: string,\n): ConnectedComponentConstructor<State> {\n  const ConnectedComponent = class extends ConsumerMixin(BaseClass) {\n    static get observedAttributes(): string[] {\n      return [\n        // @ts-expect-error ts(2339)\n        ...(super.observedAttributes ?? []),\n      ];\n    }\n\n    _mediaStore: any;\n\n    contexts = {\n      mediaStore: (mediaStore: any) => {\n        this._mediaStore = mediaStore;\n\n        // Subscribe to media store state changes\n        // Split into two phases: state transformation, then props update\n        this._mediaStore.subscribeKeys(stateHook.keys, (rawState: any) => {\n          // Phase 1: Transform raw media store state (state concern)\n          const state = stateHook.transform(rawState, mediaStore);\n\n          // Phase 2: Update element attributes/properties (props concern)\n          const props = propsHook(state ?? {} as State, this);\n          // @ts-expect-error any\n          this._update(props, state, mediaStore);\n        });\n      },\n    };\n\n    connectedCallback(): void {\n      super.connectedCallback?.();\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback?.();\n    }\n\n    handleEvent(event: CustomEvent): void {\n      // @ts-expect-error any\n      super.handleEvent?.(event);\n    }\n  };\n\n  // Set display name for debugging and dev tools\n  if (displayName) {\n    Object.defineProperty(ConnectedComponent, 'name', { value: displayName });\n  }\n\n  return ConnectedComponent;\n}\n"],"mappings":";;;;;;;;;;;;;;AA4BA,SAAgB,yBACd,WACA,WACA,WACA,aACsC;CACtC,MAAM,qBAAqB,cAAc,cAAc,UAAU,CAAC;;;mBAUrD,EACT,aAAa,eAAoB;AAC/B,SAAK,cAAc;AAInB,SAAK,YAAY,cAAc,UAAU,OAAO,aAAkB;KAEhE,MAAM,QAAQ,UAAU,UAAU,UAAU,WAAW;KAGvD,MAAM,QAAQ,UAAU,SAAS,EAAE,EAAW,KAAK;AAEnD,UAAK,QAAQ,OAAO,OAAO,WAAW;MACtC;MAEL;;EAzBD,WAAW,qBAA+B;AACxC,UAAO,CAEL,GAAI,MAAM,sBAAsB,EAAE,CACnC;;EAuBH,oBAA0B;AACxB,SAAM,qBAAqB;;EAG7B,uBAA6B;AAC3B,SAAM,wBAAwB;;EAGhC,YAAY,OAA0B;AAEpC,SAAM,cAAc,MAAM;;;AAK9B,KAAI,YACF,QAAO,eAAe,oBAAoB,QAAQ,EAAE,OAAO,aAAa,CAAC;AAG3E,QAAO"}

package/dist/current-time-display-C3qndGf5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"current-time-display-C3qndGf5.js","names":["useCurrentTimeDisplayState: StateHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","getCurrentTimeDisplayProps: PropsHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>"],"sources":["../src/elements/current-time-display.ts"],"sourcesContent":["import type { CurrentTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { currentTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport class CurrentTimeDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static observedAttributes: string[] = ['show-remaining'];\n\n  _state:\n    | {\n      currentTime: number | undefined;\n      duration: number | undefined;\n    }\n    | undefined;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof CurrentTimeDisplay).shadowRootOptions);\n    }\n  }\n\n  get currentTime(): number {\n    return this._state?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  get showRemaining(): boolean {\n    return this.hasAttribute('show-remaining');\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (name === 'show-remaining' && this._state) {\n      // Re-render with current state when show-remaining attribute changes\n      this._update({}, this._state);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    /** @TODO Should this live here or elsewhere? (CJP) */\n    const timeLabel\n      = this.showRemaining && state.duration != null && state.currentTime != null\n        ? formatDisplayTime(-(state.duration - state.currentTime))\n        : formatDisplayTime(state.currentTime);\n\n    if (this.shadowRoot) {\n      this.shadowRoot.textContent = timeLabel;\n    }\n  }\n}\n\nexport const useCurrentTimeDisplayState: StateHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}> = {\n  keys: [...currentTimeDisplayStateDefinition.keys],\n  transform: (rawState, _mediaStore) => ({\n    ...currentTimeDisplayStateDefinition.stateTransform(rawState),\n    // Current time display is read-only, so no request methods needed\n  }),\n};\n\nexport const getCurrentTimeDisplayProps: PropsHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}> = (_state, _element) => {\n  const baseProps: Record<string, any> = {};\n  return baseProps;\n};\n\nexport const CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState> = toConnectedHTMLComponent(\n  CurrentTimeDisplay,\n  useCurrentTimeDisplayState,\n  getCurrentTimeDisplayProps,\n  'CurrentTimeDisplay',\n);\n"],"mappings":";;;;;AAQA,IAAa,qBAAb,cAAwC,YAAY;;2BACvB,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CASxD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA0C,kBAAkB;;CAIxF,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,WAAmB;AACrB,SAAO,KAAK,QAAQ,YAAY;;CAGlC,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,yBAAyB,MAAc,WAA0B,WAAgC;AAC/F,MAAI,SAAS,oBAAoB,KAAK,OAEpC,MAAK,QAAQ,EAAE,EAAE,KAAK,OAAO;;CAIjC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;;EAGd,MAAM,YACF,KAAK,iBAAiB,MAAM,YAAY,QAAQ,MAAM,eAAe,OACnE,kBAAkB,EAAE,MAAM,WAAW,MAAM,aAAa,GACxD,kBAAkB,MAAM,YAAY;AAE1C,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,MAAaA,6BAGR;CACH,MAAM,CAAC,GAAG,kCAAkC,KAAK;CACjD,YAAY,UAAU,iBAAiB,EACrC,GAAG,kCAAkC,eAAe,SAAS,EAE9D;CACF;AAED,MAAaC,8BAGP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,4BAAoF,yBAC/F,oBACA,4BACA,4BACA,qBACD"}

package/dist/duration-display-JOPp3bdU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"duration-display-JOPp3bdU.js","names":["useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>"],"sources":["../src/elements/duration-display.ts"],"sourcesContent":["import type { DurationDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { durationDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport function getTemplateHTML(\n  this: typeof DurationDisplay,\n  _attrs: Record<string, string>,\n  _props: Record<string, any> = {},\n) {\n  return /* html */ `\n    <span></span>\n  `;\n}\n\nexport class DurationDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static getTemplateHTML: typeof getTemplateHTML = getTemplateHTML;\n\n  _state:\n    | {\n      duration: number | undefined;\n    }\n    | undefined;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof DurationDisplay).shadowRootOptions);\n\n      const attrs = namedNodeMapToObject(this.attributes);\n      const html = (this.constructor as typeof DurationDisplay).getTemplateHTML(attrs);\n      const shadowRoot = this.shadowRoot as unknown as ShadowRoot;\n      shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);\n    }\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    // Update the span content with formatted duration\n    const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement;\n    if (spanElement) {\n      spanElement.textContent = formatDisplayTime(state.duration);\n    }\n  }\n}\n\nexport const useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}> = {\n  keys: [...durationDisplayStateDefinition.keys],\n  transform: (rawState, _mediaStore) => ({\n    ...durationDisplayStateDefinition.stateTransform(rawState),\n    // Duration display is read-only, so no request methods needed\n  }),\n};\n\nexport const getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}> = (_state, _element) => {\n  const baseProps: Record<string, any> = {};\n  return baseProps;\n};\n\nexport const DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState> = toConnectedHTMLComponent(\n  DurationDisplay,\n  useDurationDisplayState,\n  getDurationDisplayProps,\n  'DurationDisplay',\n);\n"],"mappings":";;;;;;AASA,SAAgB,gBAEd,QACA,SAA8B,EAAE,EAChC;AACA,QAAkB;;;;AAKpB,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EACzB,MAAM,QACP;;;yBAEgD;;CAQjD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ,qBAAqB,KAAK,WAAW;GACnD,MAAM,OAAQ,KAAK,YAAuC,gBAAgB,MAAM;GAChF,MAAM,aAAa,KAAK;AACxB,cAAW,gBAAgB,WAAW,cAAc,KAAK,GAAI,WAAW,YAAY;;;CAIxF,IAAI,WAAmB;AACrB,SAAO,KAAK,QAAQ,YAAY;;CAGlC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;EAGd,MAAM,cAAc,KAAK,YAAY,cAAc,OAAO;AAC1D,MAAI,YACF,aAAY,cAAc,kBAAkB,MAAM,SAAS;;;AAKjE,MAAaA,0BAER;CACH,MAAM,CAAC,GAAG,+BAA+B,KAAK;CAC9C,YAAY,UAAU,iBAAiB,EACrC,GAAG,+BAA+B,eAAe,SAAS,EAE3D;CACF;AAED,MAAaC,2BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,yBAA8E,yBACzF,iBACA,yBACA,yBACA,kBACD"}

package/dist/fullscreen-button-C1nq8yP-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fullscreen-button-C1nq8yP-.js","names":["getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>"],"sources":["../src/elements/fullscreen-button.ts"],"sourcesContent":["import type { FullscreenButtonState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { fullscreenButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class FullscreenButton extends ButtonElement {\n  _state:\n    | {\n      fullscreen: boolean;\n      requestEnterFullscreen: () => void;\n      requestExitFullscreen: () => void;\n    }\n    | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n    if (state && type === 'click') {\n      if (state.fullscreen) {\n        state.requestExitFullscreen();\n      } else {\n        state.requestEnterFullscreen();\n      }\n    }\n  }\n\n  get fullscreen(): boolean {\n    return this._state?.fullscreen ?? false;\n  }\n\n  _update(props: any, state: any, _mediaStore?: any): void {\n    this._state = state;\n    /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */\n    setAttributes(this, props);\n  }\n}\n\n/**\n * FullscreenButton state hook - equivalent to React's useFullscreenButtonState\n * Handles media store state subscription and transformation\n */\nexport const getFullscreenButtonState: StateHook<{ fullscreen: boolean }> = {\n  keys: fullscreenButtonStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...fullscreenButtonStateDefinition.stateTransform(rawState),\n    ...fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n  }),\n};\n\nexport const getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (state, _element) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-fullscreen': state.fullscreen,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',\n    /** tooltip */\n    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n\n  return baseProps;\n};\n\nexport const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState> = toConnectedHTMLComponent(\n  FullscreenButton,\n  getFullscreenButtonState,\n  getFullscreenButtonProps,\n  'FullscreenButton',\n);\n"],"mappings":";;;;;;AASA,IAAa,mBAAb,cAAsC,cAAc;CASlD,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AACnB,MAAI,SAAS,SAAS,QACpB,KAAI,MAAM,WACR,OAAM,uBAAuB;MAE7B,OAAM,wBAAwB;;CAKpC,IAAI,aAAsB;AACxB,SAAO,KAAK,QAAQ,cAAc;;CAGpC,QAAQ,OAAY,OAAY,aAAyB;AACvD,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;;;;;AAQ9B,MAAaA,2BAA+D;CAC1E,MAAM,gCAAgC;CACtC,YAAY,UAAU,gBAAgB;EACpC,GAAG,gCAAgC,eAAe,SAAS;EAC3D,GAAG,gCAAgC,qBAAqB,WAAW,SAAS;EAC7E;CACF;AAED,MAAaC,4BAAgE,OAAO,aAAa;AAgB/F,QAfuC;EAErC,mBAAmB,MAAM;EAGzB,MAAM;EACN,UAAU;EACV,cAAc,MAAM,aAAa,oBAAoB;EAErD,gBAAgB,MAAM,aAAa,oBAAoB;EAIxD;;AAKH,MAAaC,0BAAgF,yBAC3F,kBACA,0BACA,0BACA,mBACD"}

package/dist/mute-button-BSDoCZs3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mute-button-BSDoCZs3.js","names":["getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>"],"sources":["../src/elements/mute-button.ts"],"sourcesContent":["import type { MuteButtonState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class MuteButton extends ButtonElement {\n  _state:\n    | {\n      muted: boolean;\n      volumeLevel: string;\n      requestMute: () => void;\n      requestUnmute: () => void;\n    }\n    | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n\n    if (state) {\n      if (type === 'click') {\n        if (state.volumeLevel === 'off') {\n          state.requestUnmute();\n        } else {\n          state.requestMute();\n        }\n      }\n    }\n  }\n\n  get muted(): boolean {\n    return this._state?.muted ?? false;\n  }\n\n  get volumeLevel(): string {\n    return this._state?.volumeLevel ?? 'high';\n  }\n\n  _update(props: any, state: any): void {\n    this._state = state;\n    /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */\n    setAttributes(this, props);\n  }\n}\n\nexport const getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}> = {\n  keys: muteButtonStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...muteButtonStateDefinition.stateTransform(rawState),\n    ...muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n  }),\n};\n\nexport const getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}> = (state, _element) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-muted': state.muted,\n    'data-volume-level': state.volumeLevel,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.muted ? 'unmute' : 'mute',\n    /** tooltip */\n    'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n\n  return baseProps;\n};\n\nexport const MuteButtonElement: ConnectedComponentConstructor<MuteButtonState> = toConnectedHTMLComponent(\n  MuteButton,\n  getMuteButtonState,\n  getMuteButtonProps,\n  'MuteButton',\n);\n"],"mappings":";;;;;;AASA,IAAa,aAAb,cAAgC,cAAc;CAU5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AAEnB,MAAI,OACF;OAAI,SAAS,QACX,KAAI,MAAM,gBAAgB,MACxB,OAAM,eAAe;OAErB,OAAM,aAAa;;;CAM3B,IAAI,QAAiB;AACnB,SAAO,KAAK,QAAQ,SAAS;;CAG/B,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,QAAQ,OAAY,OAAkB;AACpC,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;AAI9B,MAAaA,qBAGR;CACH,MAAM,0BAA0B;CAChC,YAAY,UAAU,gBAAgB;EACpC,GAAG,0BAA0B,eAAe,SAAS;EACrD,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;CACF;AAED,MAAaC,sBAGP,OAAO,aAAa;AAiBxB,QAhBuC;EAErC,cAAc,MAAM;EACpB,qBAAqB,MAAM;EAG3B,MAAM;EACN,UAAU;EACV,cAAc,MAAM,QAAQ,WAAW;EAEvC,gBAAgB,MAAM,QAAQ,WAAW;EAI1C;;AAKH,MAAaC,oBAAoE,yBAC/E,YACA,oBACA,oBACA,aACD"}

package/dist/play-button-gaqIKsrv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"play-button-gaqIKsrv.js","names":["getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>"],"sources":["../src/elements/play-button.ts"],"sourcesContent":["import type { PlayButtonState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class PlayButton extends ButtonElement {\n  _state: { paused: boolean; requestPlay: () => void; requestPause: () => void } | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n    if (state && type === 'click') {\n      if (state.paused) {\n        state.requestPlay();\n      } else {\n        state.requestPause();\n      }\n    }\n  }\n\n  get paused(): boolean {\n    return this._state?.paused ?? true;\n  }\n\n  _update(props: any, state: any, _mediaStore?: any): void {\n    this._state = state;\n    /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */\n    setAttributes(this, props);\n  }\n}\n\nexport const getPlayButtonState: StateHook<{ paused: boolean }> = {\n  keys: playButtonStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...playButtonStateDefinition.stateTransform(rawState),\n    ...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n  }),\n};\n\nexport const getPlayButtonProps: PropsHook<{ paused: boolean }> = (state, _element) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-paused': state.paused,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.paused ? 'play' : 'pause',\n    /** tooltip */\n    'data-tooltip': state.paused ? 'Play' : 'Pause',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n\n  return baseProps;\n};\n\nexport const PlayButtonElement: ConnectedComponentConstructor<PlayButtonState> = toConnectedHTMLComponent(\n  PlayButton,\n  getPlayButtonState,\n  getPlayButtonProps,\n  'PlayButton',\n);\n"],"mappings":";;;;;;AASA,IAAa,aAAb,cAAgC,cAAc;CAG5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AACnB,MAAI,SAAS,SAAS,QACpB,KAAI,MAAM,OACR,OAAM,aAAa;MAEnB,OAAM,cAAc;;CAK1B,IAAI,SAAkB;AACpB,SAAO,KAAK,QAAQ,UAAU;;CAGhC,QAAQ,OAAY,OAAY,aAAyB;AACvD,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;AAI9B,MAAaA,qBAAqD;CAChE,MAAM,0BAA0B;CAChC,YAAY,UAAU,gBAAgB;EACpC,GAAG,0BAA0B,eAAe,SAAS;EACrD,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;CACF;AAED,MAAaC,sBAAsD,OAAO,aAAa;AAgBrF,QAfuC;EAErC,eAAe,MAAM;EAGrB,MAAM;EACN,UAAU;EACV,cAAc,MAAM,SAAS,SAAS;EAEtC,gBAAgB,MAAM,SAAS,SAAS;EAIzC;;AAKH,MAAaC,oBAAoE,yBAC/E,YACA,oBACA,oBACA,aACD"}

package/dist/preview-time-display-Dax0FQ2X.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-time-display-Dax0FQ2X.js","names":["usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>"],"sources":["../src/elements/preview-time-display.ts"],"sourcesContent":["import type { PreviewTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport class PreviewTimeDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static observedAttributes: string[] = ['show-remaining'];\n\n  _state:\n    | {\n      previewTime: number | undefined;\n    }\n    | undefined;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof PreviewTimeDisplay).shadowRootOptions);\n    }\n  }\n\n  get previewTime(): number {\n    return this._state?.previewTime ?? 0;\n  }\n\n  get showRemaining(): boolean {\n    return this.hasAttribute('show-remaining');\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (name === 'show-remaining' && this._state) {\n      // Re-render with current state when show-remaining attribute changes\n      this._update({}, this._state);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    /** @TODO Should this live here or elsewhere? (CJP) */\n    const timeLabel = formatDisplayTime(state.previewTime);\n\n    if (this.shadowRoot) {\n      this.shadowRoot.textContent = timeLabel;\n    }\n  }\n}\n\nexport const usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}> = {\n  keys: [...previewTimeDisplayStateDefinition.keys],\n  transform: (rawState, _mediaStore) => ({\n    ...previewTimeDisplayStateDefinition.stateTransform(rawState),\n    // Preview time display is read-only, so no request methods needed\n  }),\n};\n\nexport const getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}> = (_state, _element) => {\n  const baseProps: Record<string, any> = {};\n  return baseProps;\n};\n\nexport const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState> = toConnectedHTMLComponent(\n  PreviewTimeDisplay,\n  usePreviewTimeDisplayState,\n  getPreviewTimeDisplayProps,\n  'PreviewTimeDisplay',\n);\n"],"mappings":";;;;;AAQA,IAAa,qBAAb,cAAwC,YAAY;;2BACvB,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CAQxD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA0C,kBAAkB;;CAIxF,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,yBAAyB,MAAc,WAA0B,WAAgC;AAC/F,MAAI,SAAS,oBAAoB,KAAK,OAEpC,MAAK,QAAQ,EAAE,EAAE,KAAK,OAAO;;CAIjC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;;EAGd,MAAM,YAAY,kBAAkB,MAAM,YAAY;AAEtD,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,MAAaA,6BAER;CACH,MAAM,CAAC,GAAG,kCAAkC,KAAK;CACjD,YAAY,UAAU,iBAAiB,EACrC,GAAG,kCAAkC,eAAe,SAAS,EAE9D;CACF;AAED,MAAaC,8BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,4BAAoF,yBAC/F,oBACA,4BACA,4BACA,qBACD"}

package/dist/time-slider-DKamO_2Q.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"time-slider-DKamO_2Q.js","names":["getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","CoreTimeSlider","useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/time-slider.ts"],"sourcesContent":["import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\nimport { timeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\ninterface TimeSliderRootState {\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}\n\n/**\n * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = (state, element) => {\n  const formatTime = (time: number) => {\n    const minutes = Math.floor(time / 60);\n    const seconds = Math.floor(time % 60);\n    return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n  };\n\n  const currentTimeText = formatTime(state.currentTime);\n  const durationText = formatTime(state.duration);\n\n  const baseProps: Record<string, any> = {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-current-time': state.currentTime.toString(),\n    'data-duration': state.duration.toString(),\n    'data-orientation': (element as any).orientation || 'horizontal',\n    'aria-label': 'Seek',\n    'aria-valuemin': '0',\n    'aria-valuemax': Math.round(state.duration).toString(),\n    'aria-valuenow': Math.round(state.currentTime).toString(),\n    'aria-valuetext': `${currentTimeText} of ${durationText}`,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n\n  return baseProps;\n};\n\nexport class TimeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = ['commandfor', 'orientation'];\n\n  _state: TimeSliderRootState | undefined;\n  _core: CoreTimeSlider | null = null;\n\n  get currentTime(): number {\n    return this._state?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._render(getTimeSliderRootProps(this._state, this), this._state);\n    } else if (name === 'commandfor') {\n      this.style.setProperty('anchor-name', `--${newValue}`);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    if (state && !this._core) {\n      this._core = new CoreTimeSlider();\n      this._core.subscribe(() => this._render(getTimeSliderRootProps(state, this), state));\n      this._core.attach(this);\n      state.core = this._core;\n    }\n\n    this._core?.setState(state);\n  }\n\n  _render(props: any, state: any): void {\n    const coreState = state?.core?.getState();\n    if (!coreState) return;\n\n    this.style.setProperty('--slider-fill', `${Math.round(coreState._fillWidth)}%`);\n    this.style.setProperty('--slider-pointer', `${Math.round(coreState._pointerWidth)}%`);\n\n    setAttributes(this, props);\n  }\n}\n\nexport class TimeSliderTrack extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback(): void {\n    // Set this element as the track element in the core TimeSlider\n    const rootElement = this.closest('media-time-slider') as any;\n    if (rootElement?._state?.core) {\n      rootElement._state.core.setState({ _trackElement: this });\n    }\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\nexport class TimeSliderProgress extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport class TimeSliderPointer extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-pointer, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-pointer, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-pointer, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport class TimeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\nexport const useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = {\n  keys: timeSliderStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...timeSliderStateDefinition.stateTransform(rawState),\n    ...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n    core: null,\n  }),\n};\n\nexport const getTimeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderPointerProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = toConnectedHTMLComponent(TimeSliderRoot, useTimeSliderRootState, getTimeSliderRootProps, 'TimeSliderRoot');\n\nexport const TimeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderTrack,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderTrackProps,\n  'TimeSliderTrack',\n);\n\nexport const TimeSliderProgressElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderProgress,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderProgressProps,\n  'TimeSliderProgress',\n);\n\nexport const TimeSliderPointerElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderPointer,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderPointerProps,\n  'TimeSliderPointer',\n);\n\nexport const TimeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderThumb,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderThumbProps,\n  'TimeSliderThumb',\n);\n\nexport const TimeSliderElement = Object.assign(\n  {},\n  {\n    Root: TimeSliderRootElement,\n    Track: TimeSliderTrackElement,\n    Progress: TimeSliderProgressElement,\n    Pointer: TimeSliderPointerElement,\n    Thumb: TimeSliderThumbElement,\n  },\n) as {\n  Root: typeof TimeSliderRootElement;\n  Track: typeof TimeSliderTrackElement;\n  Progress: typeof TimeSliderProgressElement;\n  Pointer: typeof TimeSliderPointerElement;\n  Thumb: typeof TimeSliderThumbElement;\n};\n"],"mappings":"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"}

package/dist/volume-slider-CbFzCHX4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"volume-slider-CbFzCHX4.js","names":["getVolumeSliderRootProps: PropsHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","CoreVolumeSlider","useVolumeSliderRootState: StateHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderIndicatorElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/volume-slider.ts"],"sourcesContent":["import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\n/**\n * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getVolumeSliderRootProps: PropsHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}> = (state, element) => {\n  const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;\n\n  const baseProps: Record<string, any> = {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-muted': state.muted.toString(),\n    'data-volume-level': state.volumeLevel,\n    'data-orientation': (element as any).orientation || 'horizontal',\n    'aria-label': 'Volume',\n    'aria-valuemin': '0',\n    'aria-valuemax': '100',\n    'aria-valuetext': volumeText,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n\n  return baseProps;\n};\n\n/**\n * VolumeSlider Root component - Main container with pointer event handling\n */\ninterface VolumeSliderRootState {\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}\n\nexport class VolumeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = ['orientation'];\n\n  _state: VolumeSliderRootState | undefined;\n  _core: CoreVolumeSlider | null = null;\n\n  get volume(): number | undefined {\n    return this._state?.volume;\n  }\n\n  get muted(): boolean {\n    return this._state?.muted ?? false;\n  }\n\n  get volumeLevel(): string {\n    return this._state?.volumeLevel ?? 'high';\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._render(getVolumeSliderRootProps(this._state, this), this._state);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    if (state && !this._core) {\n      this._core = new CoreVolumeSlider();\n      this._core.subscribe(() => this._render(getVolumeSliderRootProps(state, this), state));\n      this._core.attach(this);\n      state.core = this._core;\n    }\n\n    this._core?.setState(state);\n  }\n\n  _render(props: any, state: any): void {\n    const coreState = state?.core?.getState();\n    if (!coreState) return;\n\n    this.style.setProperty('--slider-fill', `${coreState._fillWidth.toFixed(3)}%`);\n    this.style.setProperty('--slider-pointer', `${coreState._pointerWidth.toFixed(3)}%`);\n\n    props['aria-valuenow'] = coreState._fillWidth.toString();\n\n    setAttributes(this, props);\n  }\n}\n\n/**\n * VolumeSlider Track component - Track element that captures pointer events\n */\nexport class VolumeSliderTrack extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback(): void {\n    // Set this element as the track element in the core VolumeSlider\n    const rootElement = this.closest('media-volume-slider') as any;\n    if (rootElement?._state?.core) {\n      rootElement._state.core.setState({ _trackElement: this });\n    }\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\n/**\n * VolumeSlider Progress component - Shows current progress\n */\nexport class VolumeSliderIndicator extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\n/**\n * VolumeSlider Thumb component - Draggable thumb element\n */\nexport class VolumeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\n/**\n * VolumeSlider Root state hook - equivalent to React's useVolumeSliderRootState\n * Handles media store state subscription and transformation\n */\nexport const useVolumeSliderRootState: StateHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}> = {\n  keys: volumeSliderStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...volumeSliderStateDefinition.stateTransform(rawState),\n    ...volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n    core: null,\n  }),\n};\n\n/**\n * VolumeSlider Track props hook\n */\nexport const getVolumeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\n/**\n * VolumeSlider Progress props hook\n */\nexport const getVolumeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\n/**\n * VolumeSlider Thumb props hook\n */\nexport const getVolumeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\n/**\n * Connected VolumeSlider Root component using hook-style architecture\n */\nexport const VolumeSliderRootElement: ConnectedComponentConstructor<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}> = toConnectedHTMLComponent(VolumeSliderRoot, useVolumeSliderRootState, getVolumeSliderRootProps, 'VolumeSliderRoot');\n\n/**\n * Connected VolumeSlider Track component\n */\nexport const VolumeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderTrack,\n  { keys: [], transform: () => ({}) },\n  getVolumeSliderTrackProps,\n  'VolumeSliderTrack',\n);\n\n/**\n * Connected VolumeSlider Progress component\n */\nexport const VolumeSliderIndicatorElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderIndicator,\n  { keys: [], transform: () => ({}) },\n  getVolumeSliderProgressProps,\n  'VolumeSliderProgress',\n);\n\n/**\n * Connected VolumeSlider Thumb component\n */\nexport const VolumeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderThumb,\n  { keys: [], transform: () => ({}) },\n  getVolumeSliderThumbProps,\n  'VolumeSliderThumb',\n);\n\n/**\n * Compound VolumeSlider component object\n */\nexport const VolumeSliderElement = Object.assign(\n  {},\n  {\n    Root: VolumeSliderRootElement,\n    Track: VolumeSliderTrackElement,\n    Indicator: VolumeSliderIndicatorElement,\n    Thumb: VolumeSliderThumbElement,\n  },\n) as {\n  Root: typeof VolumeSliderRootElement;\n  Track: typeof VolumeSliderTrackElement;\n  Indicator: typeof VolumeSliderIndicatorElement;\n  Thumb: typeof VolumeSliderThumbElement;\n};\n"],"mappings":"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"}