@videojs/html 0.1.0-preview.3 → 0.1.0-preview.4

package/dist/time-slider-CA1GMs6A.js

@@ -0,0 +1,201 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { timeSliderStateDefinition } from "@videojs/core/store";
+import { setAttributes } from "@videojs/utils/dom";
+import { TimeSlider } from "@videojs/core";
+
+//#region src/elements/time-slider.ts
+/**
+* TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
+* Handles element attributes and properties based on state
+*/
+const getTimeSliderRootProps = (state, element) => {
+	const formatTime = (time) => {
+		return `${Math.floor(time / 60)}:${Math.floor(time % 60).toString().padStart(2, "0")}`;
+	};
+	const currentTimeText = formatTime(state.currentTime);
+	const durationText = formatTime(state.duration);
+	return {
+		role: "slider",
+		tabindex: element.getAttribute("tabindex") ?? "0",
+		"data-current-time": state.currentTime.toString(),
+		"data-duration": state.duration.toString(),
+		"data-orientation": element.orientation || "horizontal",
+		"aria-label": "Seek",
+		"aria-valuemin": "0",
+		"aria-valuemax": Math.round(state.duration).toString(),
+		"aria-valuenow": Math.round(state.currentTime).toString(),
+		"aria-valuetext": `${currentTimeText} of ${durationText}`,
+		"aria-orientation": element.orientation || "horizontal"
+	};
+};
+var TimeSliderRoot = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		this._core = null;
+	}
+	static {
+		this.observedAttributes = ["orientation"];
+	}
+	get currentTime() {
+		return this._state?.currentTime ?? 0;
+	}
+	get duration() {
+		return this._state?.duration ?? 0;
+	}
+	get orientation() {
+		return this.getAttribute("orientation") || "horizontal";
+	}
+	attributeChangedCallback(name, _oldValue, _newValue) {
+		if (name === "orientation" && this._state) this._render(getTimeSliderRootProps(this._state, this), this._state);
+	}
+	_update(_props, state) {
+		this._state = state;
+		if (state && !this._core) {
+			this._core = new TimeSlider();
+			this._core.subscribe(() => this._render(getTimeSliderRootProps(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", `${Math.round(coreState._fillWidth)}%`);
+		this.style.setProperty("--slider-pointer", `${Math.round(coreState._pointerWidth)}%`);
+		setAttributes(this, props);
+	}
+};
+var TimeSliderTrack = class extends HTMLElement {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		const rootElement = this.closest("media-time-slider");
+		if (rootElement?._state?.core) rootElement._state.core.setState({ _trackElement: this });
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "100%";
+			this.style.removeProperty("height");
+		} else {
+			this.style.height = "100%";
+			this.style.removeProperty("width");
+		}
+	}
+};
+var TimeSliderProgress = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+		this.style.width = "var(--slider-fill, 0%)";
+		this.style.height = "100%";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "var(--slider-fill, 0%)";
+			this.style.height = "100%";
+			this.style.top = "0";
+			this.style.removeProperty("bottom");
+		} else {
+			this.style.height = "var(--slider-fill, 0%)";
+			this.style.width = "100%";
+			this.style.bottom = "0";
+			this.style.removeProperty("top");
+		}
+	}
+};
+var TimeSliderPointer = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+		this.style.width = "var(--slider-pointer, 0%)";
+		this.style.height = "100%";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "var(--slider-pointer, 0%)";
+			this.style.height = "100%";
+			this.style.top = "0";
+			this.style.removeProperty("bottom");
+		} else {
+			this.style.height = "var(--slider-pointer, 0%)";
+			this.style.width = "100%";
+			this.style.bottom = "0";
+			this.style.removeProperty("top");
+		}
+	}
+};
+var TimeSliderThumb = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.left = "var(--slider-fill, 0%)";
+			this.style.top = "50%";
+			this.style.translate = "-50% -50%";
+		} else {
+			this.style.bottom = "var(--slider-fill, 0%)";
+			this.style.left = "50%";
+			this.style.translate = "-50% 50%";
+		}
+	}
+};
+const useTimeSliderRootState = {
+	keys: timeSliderStateDefinition.keys,
+	transform: (rawState, mediaStore) => ({
+		...timeSliderStateDefinition.stateTransform(rawState),
+		...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
+		core: null
+	})
+};
+const getTimeSliderTrackProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const getTimeSliderProgressProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const getTimeSliderPointerProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const getTimeSliderThumbProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const TimeSliderRootElement = toConnectedHTMLComponent(TimeSliderRoot, useTimeSliderRootState, getTimeSliderRootProps, "TimeSliderRoot");
+const TimeSliderTrackElement = toConnectedHTMLComponent(TimeSliderTrack, {
+	keys: [],
+	transform: () => ({})
+}, getTimeSliderTrackProps, "TimeSliderTrack");
+const TimeSliderProgressElement = toConnectedHTMLComponent(TimeSliderProgress, {
+	keys: [],
+	transform: () => ({})
+}, getTimeSliderProgressProps, "TimeSliderProgress");
+const TimeSliderPointerElement = toConnectedHTMLComponent(TimeSliderPointer, {
+	keys: [],
+	transform: () => ({})
+}, getTimeSliderPointerProps, "TimeSliderPointer");
+const TimeSliderThumbElement = toConnectedHTMLComponent(TimeSliderThumb, {
+	keys: [],
+	transform: () => ({})
+}, getTimeSliderThumbProps, "TimeSliderThumb");
+const TimeSliderElement = Object.assign({}, {
+	Root: TimeSliderRootElement,
+	Track: TimeSliderTrackElement,
+	Progress: TimeSliderProgressElement,
+	Pointer: TimeSliderPointerElement,
+	Thumb: TimeSliderThumbElement
+});
+
+//#endregion
+export { TimeSliderThumbElement as a, TimeSliderRootElement as i, TimeSliderPointerElement as n, TimeSliderTrackElement as o, TimeSliderProgressElement as r, TimeSliderElement as t };
+//# sourceMappingURL=time-slider-CA1GMs6A.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-CA1GMs6A.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[] = ['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    }\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/tooltip-54fBUUpb.js

@@ -0,0 +1,296 @@
+import { uniqueId } from "@videojs/utils";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+
+//#region src/elements/tooltip.ts
+var TooltipRootElement = class extends HTMLElement {
+	#open = false;
+	#hoverTimeout = null;
+	#cleanup = null;
+	#arrowElement = null;
+	#pointerPosition = {
+		x: 0,
+		y: 0
+	};
+	#transitionStatus = "initial";
+	constructor() {
+		super();
+		if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
+			this.addEventListener("pointerenter", this);
+			this.addEventListener("pointerleave", this);
+			this.addEventListener("pointermove", this);
+		}
+	}
+	handleEvent(event) {
+		if (event.type === "pointerenter") this.#handlePointerEnter();
+		else if (event.type === "pointerleave") this.#handlePointerLeave(event);
+		else if (event.type === "pointermove") this.#handlePointerMove(event);
+	}
+	connectedCallback() {
+		this.#updateVisibility();
+	}
+	disconnectedCallback() {
+		this.#clearHoverTimeout();
+		this.#cleanup?.();
+		this.#transitionStatus = "unmounted";
+		this.#updateVisibility();
+	}
+	static get observedAttributes() {
+		return [
+			"delay",
+			"close-delay",
+			"track-cursor-axis"
+		];
+	}
+	get delay() {
+		return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
+	}
+	get closeDelay() {
+		return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
+	}
+	get trackCursorAxis() {
+		const value = this.getAttribute("track-cursor-axis");
+		return value === "x" || value === "y" || value === "both" ? value : void 0;
+	}
+	get #triggerElement() {
+		return this.querySelector("media-tooltip-trigger");
+	}
+	get #portalElement() {
+		return this.querySelector("media-tooltip-portal");
+	}
+	get #positionerElement() {
+		return this.#portalElement?.querySelector("media-tooltip-positioner");
+	}
+	get #popupElement() {
+		return this.#portalElement?.querySelector("media-tooltip-popup");
+	}
+	#setOpen(open) {
+		if (this.#open === open) return;
+		this.#open = open;
+		if (open) {
+			this.#transitionStatus = "initial";
+			requestAnimationFrame(() => {
+				this.#transitionStatus = "open";
+				this.#updateVisibility();
+			});
+		} else this.#transitionStatus = "close";
+		this.#updateVisibility();
+		if (open) this.#setupFloating();
+		else {
+			this.#cleanup?.();
+			this.#cleanup = null;
+		}
+	}
+	#updateVisibility() {
+		this.style.display = "contents";
+		if (this.#popupElement) {
+			const placement = this.#positionerElement?.side ?? "top";
+			this.#popupElement.setAttribute("data-side", placement);
+			this.#popupElement.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
+			this.#popupElement.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
+			this.#popupElement.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
+			this.#popupElement.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
+		}
+		const triggerElement = this.#triggerElement?.firstElementChild;
+		if (triggerElement) triggerElement.toggleAttribute("data-popup-open", this.#open);
+	}
+	#setupFloating() {
+		if (!this.#triggerElement || !this.#popupElement) return;
+		const trigger = this.#triggerElement.firstElementChild;
+		const popup = this.#popupElement;
+		if (!trigger || !popup) return;
+		const placement = this.#positionerElement?.side ?? "top";
+		const sideOffset = this.#positionerElement?.sideOffset ?? 0;
+		const collisionPadding = this.#positionerElement?.collisionPadding ?? 0;
+		const mediaContainer = this.closest("media-container");
+		this.#arrowElement = popup.querySelector("media-tooltip-arrow");
+		const updatePosition = () => {
+			const middleware = [
+				offset(sideOffset),
+				flip(),
+				shift({
+					boundary: mediaContainer,
+					padding: collisionPadding
+				})
+			];
+			if (this.#arrowElement) middleware.push(arrow({ element: this.#arrowElement }));
+			computePosition(this.trackCursorAxis ? { getBoundingClientRect: () => {
+				const triggerRect = trigger.getBoundingClientRect();
+				if (this.trackCursorAxis === "x") return {
+					width: 0,
+					height: 0,
+					top: triggerRect.top,
+					right: this.#pointerPosition.x,
+					bottom: triggerRect.bottom,
+					left: this.#pointerPosition.x,
+					x: this.#pointerPosition.x,
+					y: triggerRect.top
+				};
+				else if (this.trackCursorAxis === "y") return {
+					width: 0,
+					height: 0,
+					top: this.#pointerPosition.y,
+					right: triggerRect.right,
+					bottom: this.#pointerPosition.y,
+					left: triggerRect.left,
+					x: triggerRect.left,
+					y: this.#pointerPosition.y
+				};
+				else return {
+					width: 0,
+					height: 0,
+					top: this.#pointerPosition.y,
+					right: this.#pointerPosition.x,
+					bottom: this.#pointerPosition.y,
+					left: this.#pointerPosition.x,
+					x: this.#pointerPosition.x,
+					y: this.#pointerPosition.y
+				};
+			} } : trigger, popup, {
+				placement,
+				middleware
+			}).then(({ x, y, middlewareData, placement: computedPlacement }) => {
+				Object.assign(popup.style, {
+					left: `${x}px`,
+					top: `${y}px`
+				});
+				popup.setAttribute("data-side", computedPlacement);
+				if (this.#arrowElement && middlewareData.arrow) {
+					const { x: arrowX, y: arrowY } = middlewareData.arrow;
+					Object.assign(this.#arrowElement.style, {
+						left: arrowX != null ? `${arrowX}px` : void 0,
+						top: arrowY != null ? `${arrowY}px` : void 0
+					});
+				}
+			});
+		};
+		updatePosition();
+		if (!this.trackCursorAxis) this.#cleanup = autoUpdate(trigger, popup, updatePosition);
+	}
+	#updatePosition() {
+		if (this.#open && this.trackCursorAxis) this.#setupFloating();
+	}
+	#clearHoverTimeout() {
+		if (this.#hoverTimeout) {
+			clearTimeout(this.#hoverTimeout);
+			this.#hoverTimeout = null;
+		}
+	}
+	#handlePointerEnter() {
+		this.#clearHoverTimeout();
+		this.#hoverTimeout = globalThis.setTimeout(() => {
+			this.#setOpen(true);
+		}, this.delay);
+	}
+	#handlePointerLeave(_event) {
+		this.#clearHoverTimeout();
+		this.#hoverTimeout = globalThis.setTimeout(() => {
+			this.#setOpen(false);
+		}, this.closeDelay);
+	}
+	#handlePointerMove(event) {
+		if (this.trackCursorAxis) {
+			this.#pointerPosition = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (this.#open) this.#updatePosition();
+		}
+	}
+};
+var TooltipTriggerElement = class extends HTMLElement {
+	connectedCallback() {
+		this.style.display = "contents";
+		const triggerElement = this.firstElementChild;
+		if (triggerElement) new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === "attributes") {
+					const rootElement = this.closest("media-tooltip");
+					let popupElement = rootElement.querySelector("media-tooltip-popup");
+					if (!popupElement) {
+						const portalElement = rootElement.querySelector("media-tooltip-portal");
+						if (!portalElement) return;
+						popupElement = portalElement.querySelector("media-tooltip-popup");
+						if (!popupElement) return;
+					}
+					const attributeName = mutation.attributeName;
+					if (!attributeName || !attributeName.startsWith("data-")) return;
+					const attributeValue = triggerElement.getAttribute(attributeName);
+					if (attributeValue !== null) popupElement.setAttribute(attributeName, attributeValue);
+					else popupElement.removeAttribute(attributeName);
+				}
+			});
+		}).observe(triggerElement, { attributes: true });
+	}
+};
+var TooltipPortalElement = class extends HTMLElement {
+	#portal = null;
+	connectedCallback() {
+		this.style.display = "contents";
+		this.#setupPortal();
+	}
+	disconnectedCallback() {
+		this.#cleanupPortal();
+	}
+	querySelector(selector) {
+		return this.#portal?.querySelector(selector) ?? null;
+	}
+	#setupPortal() {
+		const portalId = this.getAttribute("root-id") ?? "@default_portal_id";
+		if (!portalId) return;
+		const portalContainer = this.getRootNode().getElementById(portalId) ?? this.getRootNode().querySelector("media-container")?.shadowRoot?.getElementById(portalId) ? this.getRootNode().querySelector("media-container") : void 0;
+		if (!portalContainer) return;
+		this.#portal = document.createElement("div");
+		this.#portal.slot = "portal";
+		this.#portal.id = uniqueId();
+		portalContainer.append(this.#portal);
+		this.#portal.append(...this.children);
+	}
+	#cleanupPortal() {
+		if (!this.#portal) return;
+		this.append(...this.#portal.children);
+		this.#portal.remove();
+		this.#portal = null;
+	}
+};
+var TooltipPositionerElement = class extends HTMLElement {
+	connectedCallback() {
+		this.style.display = "contents";
+		const popup = this.firstElementChild;
+		if (popup) Object.assign(popup.style, {
+			position: "absolute",
+			top: "0",
+			left: "0"
+		});
+	}
+	get side() {
+		return this.getAttribute("side") ?? "top";
+	}
+	get sideOffset() {
+		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
+	}
+	get collisionPadding() {
+		return Number.parseInt(this.getAttribute("collision-padding") ?? "0", 10);
+	}
+};
+var TooltipPopupElement = class extends HTMLElement {
+	connectedCallback() {
+		this.setAttribute("role", "tooltip");
+	}
+};
+var TooltipArrowElement = class extends HTMLElement {
+	connectedCallback() {
+		this.setAttribute("aria-hidden", "true");
+	}
+};
+const TooltipElement = {
+	Root: TooltipRootElement,
+	Trigger: TooltipTriggerElement,
+	Portal: TooltipPortalElement,
+	Positioner: TooltipPositionerElement,
+	Popup: TooltipPopupElement,
+	Arrow: TooltipArrowElement
+};
+
+//#endregion
+export { TooltipPositionerElement as a, TooltipPortalElement as i, TooltipElement as n, TooltipRootElement as o, TooltipPopupElement as r, TooltipTriggerElement as s, TooltipArrowElement as t };
+//# sourceMappingURL=tooltip-54fBUUpb.js.map

package/dist/tooltip-54fBUUpb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-54fBUUpb.js","names":["#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#updateVisibility","#clearHoverTimeout","#cleanup","#transitionStatus","#triggerElement","#portalElement","#positionerElement","#popupElement","#open","#setupFloating","#arrowElement","#pointerPosition","#hoverTimeout","#setOpen","#updatePosition","#setupPortal","#cleanupPortal","#portal","TooltipElement: {\n  Root: typeof TooltipRootElement;\n  Trigger: typeof TooltipTriggerElement;\n  Portal: typeof TooltipPortalElement;\n  Positioner: typeof TooltipPositionerElement;\n  Popup: typeof TooltipPopupElement;\n  Arrow: typeof TooltipArrowElement;\n}"],"sources":["../src/elements/tooltip.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom';\nimport type { MediaContainerElement } from '@/media/media-container';\n\nimport { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { uniqueId } from '@videojs/utils';\n\nexport class TooltipRootElement extends HTMLElement {\n  #open = false;\n  #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n  #cleanup: (() => void) | null = null;\n  #arrowElement: HTMLElement | null = null;\n  #pointerPosition = { x: 0, y: 0 };\n  #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n\n  constructor() {\n    super();\n\n    if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n      this.addEventListener('pointerenter', this);\n      this.addEventListener('pointerleave', this);\n      this.addEventListener('pointermove', this);\n    }\n  }\n\n  handleEvent(event: Event): void {\n    if (event.type === 'pointerenter') {\n      this.#handlePointerEnter();\n    } else if (event.type === 'pointerleave') {\n      this.#handlePointerLeave(event as PointerEvent);\n    } else if (event.type === 'pointermove') {\n      this.#handlePointerMove(event as PointerEvent);\n    }\n  }\n\n  connectedCallback(): void {\n    this.#updateVisibility();\n  }\n\n  disconnectedCallback(): void {\n    this.#clearHoverTimeout();\n    this.#cleanup?.();\n\n    this.#transitionStatus = 'unmounted';\n    this.#updateVisibility();\n  }\n\n  static get observedAttributes(): string[] {\n    return ['delay', 'close-delay', 'track-cursor-axis'];\n  }\n\n  get delay(): number {\n    return Number.parseInt(this.getAttribute('delay') ?? '0', 10);\n  }\n\n  get closeDelay(): number {\n    return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);\n  }\n\n  get trackCursorAxis(): 'x' | 'y' | 'both' | undefined {\n    const value = this.getAttribute('track-cursor-axis');\n    return value === 'x' || value === 'y' || value === 'both' ? value : undefined;\n  }\n\n  get #triggerElement(): TooltipTriggerElement | null {\n    return this.querySelector('media-tooltip-trigger') as TooltipTriggerElement | null;\n  }\n\n  get #portalElement(): TooltipPortalElement | null {\n    return this.querySelector('media-tooltip-portal') as TooltipPortalElement | null;\n  }\n\n  get #positionerElement(): TooltipPositionerElement | null {\n    return this.#portalElement?.querySelector('media-tooltip-positioner') as TooltipPositionerElement | null;\n  }\n\n  get #popupElement(): TooltipPopupElement | null {\n    return this.#portalElement?.querySelector('media-tooltip-popup') as TooltipPopupElement | null;\n  }\n\n  #setOpen(open: boolean): void {\n    if (this.#open === open) return;\n\n    this.#open = open;\n\n    if (open) {\n      this.#transitionStatus = 'initial';\n      requestAnimationFrame(() => {\n        this.#transitionStatus = 'open';\n        this.#updateVisibility();\n      });\n    } else {\n      this.#transitionStatus = 'close';\n    }\n\n    this.#updateVisibility();\n\n    if (open) {\n      this.#setupFloating();\n    } else {\n      this.#cleanup?.();\n      this.#cleanup = null;\n    }\n  }\n\n  #updateVisibility(): void {\n    this.style.display = 'contents';\n\n    if (this.#popupElement) {\n      const placement = this.#positionerElement?.side ?? 'top';\n      this.#popupElement.setAttribute('data-side', placement);\n\n      this.#popupElement.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial');\n      this.#popupElement.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open');\n      this.#popupElement.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n      this.#popupElement.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n    }\n\n    const triggerElement = this.#triggerElement?.firstElementChild as HTMLElement;\n    if (triggerElement) {\n      triggerElement.toggleAttribute('data-popup-open', this.#open);\n    }\n  }\n\n  #setupFloating(): void {\n    if (!this.#triggerElement || !this.#popupElement) return;\n\n    const trigger = this.#triggerElement.firstElementChild as HTMLElement;\n    const popup = this.#popupElement;\n\n    if (!trigger || !popup) return;\n\n    const placement = this.#positionerElement?.side ?? 'top';\n    const sideOffset = this.#positionerElement?.sideOffset ?? 0;\n    const collisionPadding = this.#positionerElement?.collisionPadding ?? 0;\n    const mediaContainer = this.closest('media-container') as MediaContainerElement;\n\n    this.#arrowElement = popup.querySelector('media-tooltip-arrow') as HTMLElement;\n\n    const updatePosition = () => {\n      const middleware = [\n        offset(sideOffset),\n        flip(),\n        shift({\n          boundary: mediaContainer,\n          padding: collisionPadding,\n        }),\n      ];\n\n      if (this.#arrowElement) {\n        middleware.push(arrow({ element: this.#arrowElement }));\n      }\n\n      const referenceElement = this.trackCursorAxis\n        ? {\n            getBoundingClientRect: () => {\n              const triggerRect = trigger.getBoundingClientRect();\n\n              if (this.trackCursorAxis === 'x') {\n                return {\n                  width: 0,\n                  height: 0,\n                  top: triggerRect.top,\n                  right: this.#pointerPosition.x,\n                  bottom: triggerRect.bottom,\n                  left: this.#pointerPosition.x,\n                  x: this.#pointerPosition.x,\n                  y: triggerRect.top,\n                };\n              } else if (this.trackCursorAxis === 'y') {\n                return {\n                  width: 0,\n                  height: 0,\n                  top: this.#pointerPosition.y,\n                  right: triggerRect.right,\n                  bottom: this.#pointerPosition.y,\n                  left: triggerRect.left,\n                  x: triggerRect.left,\n                  y: this.#pointerPosition.y,\n                };\n              } else {\n                // Track both axes (trackCursorAxis === 'both')\n                return {\n                  width: 0,\n                  height: 0,\n                  top: this.#pointerPosition.y,\n                  right: this.#pointerPosition.x,\n                  bottom: this.#pointerPosition.y,\n                  left: this.#pointerPosition.x,\n                  x: this.#pointerPosition.x,\n                  y: this.#pointerPosition.y,\n                };\n              }\n            },\n          }\n        : trigger;\n\n      computePosition(referenceElement, popup, {\n        placement,\n        middleware,\n      }).then(({ x, y, middlewareData, placement: computedPlacement }: { x: number; y: number; middlewareData: any; placement: Placement }) => {\n        Object.assign(popup.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        popup.setAttribute('data-side', computedPlacement);\n\n        if (this.#arrowElement && middlewareData.arrow) {\n          const { x: arrowX, y: arrowY } = middlewareData.arrow;\n          Object.assign(this.#arrowElement.style, {\n            left: arrowX != null ? `${arrowX}px` : undefined,\n            top: arrowY != null ? `${arrowY}px` : undefined,\n          });\n        }\n      });\n    };\n\n    updatePosition();\n\n    if (!this.trackCursorAxis) {\n      this.#cleanup = autoUpdate(trigger, popup, updatePosition);\n    }\n  }\n\n  #updatePosition(): void {\n    if (this.#open && this.trackCursorAxis) {\n      this.#setupFloating();\n    }\n  }\n\n  #clearHoverTimeout(): void {\n    if (this.#hoverTimeout) {\n      clearTimeout(this.#hoverTimeout);\n      this.#hoverTimeout = null;\n    }\n  }\n\n  #handlePointerEnter(): void {\n    this.#clearHoverTimeout();\n    this.#hoverTimeout = globalThis.setTimeout(() => {\n      this.#setOpen(true);\n    }, this.delay);\n  }\n\n  #handlePointerLeave(_event: PointerEvent): void {\n    this.#clearHoverTimeout();\n    this.#hoverTimeout = globalThis.setTimeout(() => {\n      this.#setOpen(false);\n    }, this.closeDelay);\n  }\n\n  #handlePointerMove(event: PointerEvent): void {\n    if (this.trackCursorAxis) {\n      this.#pointerPosition = { x: event.clientX, y: event.clientY };\n\n      if (this.#open) {\n        this.#updatePosition();\n      }\n    }\n  }\n}\n\nexport class TooltipTriggerElement extends HTMLElement {\n  connectedCallback(): void {\n    this.style.display = 'contents';\n\n    const triggerElement = this.firstElementChild as HTMLElement;\n    if (triggerElement) {\n      const mutationObserver = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n          if (mutation.type === 'attributes') {\n            const rootElement = this.closest('media-tooltip') as TooltipRootElement;\n            let popupElement = rootElement.querySelector('media-tooltip-popup') as TooltipPopupElement;\n\n            if (!popupElement) {\n              const portalElement = rootElement.querySelector('media-tooltip-portal') as TooltipPortalElement;\n              if (!portalElement) {\n                return;\n              }\n\n              popupElement = portalElement.querySelector('media-tooltip-popup') as TooltipPopupElement;\n              if (!popupElement) {\n                return;\n              }\n            }\n\n            const attributeName = mutation.attributeName;\n            if (!attributeName || !attributeName.startsWith('data-')) {\n              return;\n            }\n\n            const attributeValue = triggerElement.getAttribute(attributeName);\n            if (attributeValue !== null) {\n              popupElement.setAttribute(attributeName, attributeValue);\n            } else {\n              popupElement.removeAttribute(attributeName);\n            }\n          }\n        });\n      });\n\n      mutationObserver.observe(triggerElement, {\n        attributes: true,\n      });\n    }\n  }\n}\n\nexport class TooltipPortalElement extends HTMLElement {\n  #portal: HTMLElement | null = null;\n\n  connectedCallback(): void {\n    this.style.display = 'contents';\n    this.#setupPortal();\n  }\n\n  disconnectedCallback(): void {\n    this.#cleanupPortal();\n  }\n\n  querySelector(selector: string): HTMLElement | null {\n    return this.#portal?.querySelector(selector) ?? null;\n  }\n\n  #setupPortal(): void {\n    const portalId = this.getAttribute('root-id') ?? '@default_portal_id';\n    if (!portalId) return;\n\n    /* @TODO We need to make sure portal logic is non-brittle longer term (CJP) */\n    // NOTE: Hacky solution in part to ensure styling propogates from skin to container's baked in portal (TL;DR - Shadow DOM vs. Light DOM CSS) (CJP)\n    const portalContainer\n      = ((this.getRootNode() as ShadowRoot | Document).getElementById(portalId)\n        ?? (this.getRootNode() as ShadowRoot | Document)\n          .querySelector('media-container')\n          ?.shadowRoot\n          ?.getElementById(portalId))\n        ? (this.getRootNode() as ShadowRoot | Document).querySelector('media-container')\n        : undefined;\n    if (!portalContainer) return;\n\n    this.#portal = document.createElement('div');\n    this.#portal.slot = 'portal';\n    this.#portal.id = uniqueId();\n    portalContainer.append(this.#portal);\n\n    this.#portal.append(...this.children);\n  }\n\n  #cleanupPortal(): void {\n    if (!this.#portal) return;\n\n    // Move children back to the portal element\n    this.append(...this.#portal.children);\n    this.#portal.remove();\n    this.#portal = null;\n  }\n}\n\nexport class TooltipPositionerElement extends HTMLElement {\n  connectedCallback(): void {\n    this.style.display = 'contents';\n\n    const popup = this.firstElementChild as HTMLElement;\n    if (popup) {\n      Object.assign(popup.style, {\n        position: 'absolute',\n        top: '0',\n        left: '0',\n      });\n    }\n  }\n\n  get side(): Placement {\n    return (this.getAttribute('side') as Placement) ?? 'top';\n  }\n\n  get sideOffset(): number {\n    return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);\n  }\n\n  get collisionPadding(): number {\n    return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10);\n  }\n}\n\nexport class TooltipPopupElement extends HTMLElement {\n  connectedCallback(): void {\n    this.setAttribute('role', 'tooltip');\n  }\n}\n\nexport class TooltipArrowElement extends HTMLElement {\n  connectedCallback(): void {\n    this.setAttribute('aria-hidden', 'true');\n  }\n}\n\nexport const TooltipElement: {\n  Root: typeof TooltipRootElement;\n  Trigger: typeof TooltipTriggerElement;\n  Portal: typeof TooltipPortalElement;\n  Positioner: typeof TooltipPositionerElement;\n  Popup: typeof TooltipPopupElement;\n  Arrow: typeof TooltipArrowElement;\n} = {\n  Root: TooltipRootElement,\n  Trigger: TooltipTriggerElement,\n  Portal: TooltipPortalElement,\n  Positioner: TooltipPositionerElement,\n  Popup: TooltipPopupElement,\n  Arrow: TooltipArrowElement,\n};\n"],"mappings":";;;;AAMA,IAAa,qBAAb,cAAwC,YAAY;CAClD,QAAQ;CACR,gBAAsD;CACtD,WAAgC;CAChC,gBAAoC;CACpC,mBAAmB;EAAE,GAAG;EAAG,GAAG;EAAG;CACjC,oBAAgE;CAEhE,cAAc;AACZ,SAAO;AAEP,MAAI,WAAW,aAAa,iBAAiB,EAAE,SAAS;AACtD,QAAK,iBAAiB,gBAAgB,KAAK;AAC3C,QAAK,iBAAiB,gBAAgB,KAAK;AAC3C,QAAK,iBAAiB,eAAe,KAAK;;;CAI9C,YAAY,OAAoB;AAC9B,MAAI,MAAM,SAAS,eACjB,OAAKA,oBAAqB;WACjB,MAAM,SAAS,eACxB,OAAKC,mBAAoB,MAAsB;WACtC,MAAM,SAAS,cACxB,OAAKC,kBAAmB,MAAsB;;CAIlD,oBAA0B;AACxB,QAAKC,kBAAmB;;CAG1B,uBAA6B;AAC3B,QAAKC,mBAAoB;AACzB,QAAKC,WAAY;AAEjB,QAAKC,mBAAoB;AACzB,QAAKH,kBAAmB;;CAG1B,WAAW,qBAA+B;AACxC,SAAO;GAAC;GAAS;GAAe;GAAoB;;CAGtD,IAAI,QAAgB;AAClB,SAAO,OAAO,SAAS,KAAK,aAAa,QAAQ,IAAI,KAAK,GAAG;;CAG/D,IAAI,aAAqB;AACvB,SAAO,OAAO,SAAS,KAAK,aAAa,cAAc,IAAI,KAAK,GAAG;;CAGrE,IAAI,kBAAkD;EACpD,MAAM,QAAQ,KAAK,aAAa,oBAAoB;AACpD,SAAO,UAAU,OAAO,UAAU,OAAO,UAAU,SAAS,QAAQ;;CAGtE,KAAII,iBAAgD;AAClD,SAAO,KAAK,cAAc,wBAAwB;;CAGpD,KAAIC,gBAA8C;AAChD,SAAO,KAAK,cAAc,uBAAuB;;CAGnD,KAAIC,oBAAsD;AACxD,SAAO,MAAKD,eAAgB,cAAc,2BAA2B;;CAGvE,KAAIE,eAA4C;AAC9C,SAAO,MAAKF,eAAgB,cAAc,sBAAsB;;CAGlE,SAAS,MAAqB;AAC5B,MAAI,MAAKG,SAAU,KAAM;AAEzB,QAAKA,OAAQ;AAEb,MAAI,MAAM;AACR,SAAKL,mBAAoB;AACzB,+BAA4B;AAC1B,UAAKA,mBAAoB;AACzB,UAAKH,kBAAmB;KACxB;QAEF,OAAKG,mBAAoB;AAG3B,QAAKH,kBAAmB;AAExB,MAAI,KACF,OAAKS,eAAgB;OAChB;AACL,SAAKP,WAAY;AACjB,SAAKA,UAAW;;;CAIpB,oBAA0B;AACxB,OAAK,MAAM,UAAU;AAErB,MAAI,MAAKK,cAAe;GACtB,MAAM,YAAY,MAAKD,mBAAoB,QAAQ;AACnD,SAAKC,aAAc,aAAa,aAAa,UAAU;AAEvD,SAAKA,aAAc,gBAAgB,uBAAuB,MAAKJ,qBAAsB,UAAU;AAC/F,SAAKI,aAAc,gBAAgB,aAAa,MAAKJ,qBAAsB,aAAa,MAAKA,qBAAsB,OAAO;AAC1H,SAAKI,aAAc,gBAAgB,qBAAqB,MAAKJ,qBAAsB,WAAW,MAAKA,qBAAsB,YAAY;AACrI,SAAKI,aAAc,gBAAgB,eAAe,MAAKJ,qBAAsB,WAAW,MAAKA,qBAAsB,YAAY;;EAGjI,MAAM,iBAAiB,MAAKC,gBAAiB;AAC7C,MAAI,eACF,gBAAe,gBAAgB,mBAAmB,MAAKI,KAAM;;CAIjE,iBAAuB;AACrB,MAAI,CAAC,MAAKJ,kBAAmB,CAAC,MAAKG,aAAe;EAElD,MAAM,UAAU,MAAKH,eAAgB;EACrC,MAAM,QAAQ,MAAKG;AAEnB,MAAI,CAAC,WAAW,CAAC,MAAO;EAExB,MAAM,YAAY,MAAKD,mBAAoB,QAAQ;EACnD,MAAM,aAAa,MAAKA,mBAAoB,cAAc;EAC1D,MAAM,mBAAmB,MAAKA,mBAAoB,oBAAoB;EACtE,MAAM,iBAAiB,KAAK,QAAQ,kBAAkB;AAEtD,QAAKI,eAAgB,MAAM,cAAc,sBAAsB;EAE/D,MAAM,uBAAuB;GAC3B,MAAM,aAAa;IACjB,OAAO,WAAW;IAClB,MAAM;IACN,MAAM;KACJ,UAAU;KACV,SAAS;KACV,CAAC;IACH;AAED,OAAI,MAAKA,aACP,YAAW,KAAK,MAAM,EAAE,SAAS,MAAKA,cAAe,CAAC,CAAC;AA+CzD,mBA5CyB,KAAK,kBAC1B,EACE,6BAA6B;IAC3B,MAAM,cAAc,QAAQ,uBAAuB;AAEnD,QAAI,KAAK,oBAAoB,IAC3B,QAAO;KACL,OAAO;KACP,QAAQ;KACR,KAAK,YAAY;KACjB,OAAO,MAAKC,gBAAiB;KAC7B,QAAQ,YAAY;KACpB,MAAM,MAAKA,gBAAiB;KAC5B,GAAG,MAAKA,gBAAiB;KACzB,GAAG,YAAY;KAChB;aACQ,KAAK,oBAAoB,IAClC,QAAO;KACL,OAAO;KACP,QAAQ;KACR,KAAK,MAAKA,gBAAiB;KAC3B,OAAO,YAAY;KACnB,QAAQ,MAAKA,gBAAiB;KAC9B,MAAM,YAAY;KAClB,GAAG,YAAY;KACf,GAAG,MAAKA,gBAAiB;KAC1B;QAGD,QAAO;KACL,OAAO;KACP,QAAQ;KACR,KAAK,MAAKA,gBAAiB;KAC3B,OAAO,MAAKA,gBAAiB;KAC7B,QAAQ,MAAKA,gBAAiB;KAC9B,MAAM,MAAKA,gBAAiB;KAC5B,GAAG,MAAKA,gBAAiB;KACzB,GAAG,MAAKA,gBAAiB;KAC1B;MAGN,GACD,SAE8B,OAAO;IACvC;IACA;IACD,CAAC,CAAC,MAAM,EAAE,GAAG,GAAG,gBAAgB,WAAW,wBAA6F;AACvI,WAAO,OAAO,MAAM,OAAO;KACzB,MAAM,GAAG,EAAE;KACX,KAAK,GAAG,EAAE;KACX,CAAC;AAEF,UAAM,aAAa,aAAa,kBAAkB;AAElD,QAAI,MAAKD,gBAAiB,eAAe,OAAO;KAC9C,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;AAChD,YAAO,OAAO,MAAKA,aAAc,OAAO;MACtC,MAAM,UAAU,OAAO,GAAG,OAAO,MAAM;MACvC,KAAK,UAAU,OAAO,GAAG,OAAO,MAAM;MACvC,CAAC;;KAEJ;;AAGJ,kBAAgB;AAEhB,MAAI,CAAC,KAAK,gBACR,OAAKR,UAAW,WAAW,SAAS,OAAO,eAAe;;CAI9D,kBAAwB;AACtB,MAAI,MAAKM,QAAS,KAAK,gBACrB,OAAKC,eAAgB;;CAIzB,qBAA2B;AACzB,MAAI,MAAKG,cAAe;AACtB,gBAAa,MAAKA,aAAc;AAChC,SAAKA,eAAgB;;;CAIzB,sBAA4B;AAC1B,QAAKX,mBAAoB;AACzB,QAAKW,eAAgB,WAAW,iBAAiB;AAC/C,SAAKC,QAAS,KAAK;KAClB,KAAK,MAAM;;CAGhB,oBAAoB,QAA4B;AAC9C,QAAKZ,mBAAoB;AACzB,QAAKW,eAAgB,WAAW,iBAAiB;AAC/C,SAAKC,QAAS,MAAM;KACnB,KAAK,WAAW;;CAGrB,mBAAmB,OAA2B;AAC5C,MAAI,KAAK,iBAAiB;AACxB,SAAKF,kBAAmB;IAAE,GAAG,MAAM;IAAS,GAAG,MAAM;IAAS;AAE9D,OAAI,MAAKH,KACP,OAAKM,gBAAiB;;;;AAM9B,IAAa,wBAAb,cAA2C,YAAY;CACrD,oBAA0B;AACxB,OAAK,MAAM,UAAU;EAErB,MAAM,iBAAiB,KAAK;AAC5B,MAAI,eAkCF,CAjCyB,IAAI,kBAAkB,cAAc;AAC3D,aAAU,SAAS,aAAa;AAC9B,QAAI,SAAS,SAAS,cAAc;KAClC,MAAM,cAAc,KAAK,QAAQ,gBAAgB;KACjD,IAAI,eAAe,YAAY,cAAc,sBAAsB;AAEnE,SAAI,CAAC,cAAc;MACjB,MAAM,gBAAgB,YAAY,cAAc,uBAAuB;AACvE,UAAI,CAAC,cACH;AAGF,qBAAe,cAAc,cAAc,sBAAsB;AACjE,UAAI,CAAC,aACH;;KAIJ,MAAM,gBAAgB,SAAS;AAC/B,SAAI,CAAC,iBAAiB,CAAC,cAAc,WAAW,QAAQ,CACtD;KAGF,MAAM,iBAAiB,eAAe,aAAa,cAAc;AACjE,SAAI,mBAAmB,KACrB,cAAa,aAAa,eAAe,eAAe;SAExD,cAAa,gBAAgB,cAAc;;KAG/C;IACF,CAEe,QAAQ,gBAAgB,EACvC,YAAY,MACb,CAAC;;;AAKR,IAAa,uBAAb,cAA0C,YAAY;CACpD,UAA8B;CAE9B,oBAA0B;AACxB,OAAK,MAAM,UAAU;AACrB,QAAKC,aAAc;;CAGrB,uBAA6B;AAC3B,QAAKC,eAAgB;;CAGvB,cAAc,UAAsC;AAClD,SAAO,MAAKC,QAAS,cAAc,SAAS,IAAI;;CAGlD,eAAqB;EACnB,MAAM,WAAW,KAAK,aAAa,UAAU,IAAI;AACjD,MAAI,CAAC,SAAU;EAIf,MAAM,kBACA,KAAK,aAAa,CAA2B,eAAe,SAAS,IACnE,KAAK,aAAa,CACnB,cAAc,kBAAkB,EAC/B,YACA,eAAe,SAAS,GACzB,KAAK,aAAa,CAA2B,cAAc,kBAAkB,GAC9E;AACN,MAAI,CAAC,gBAAiB;AAEtB,QAAKA,SAAU,SAAS,cAAc,MAAM;AAC5C,QAAKA,OAAQ,OAAO;AACpB,QAAKA,OAAQ,KAAK,UAAU;AAC5B,kBAAgB,OAAO,MAAKA,OAAQ;AAEpC,QAAKA,OAAQ,OAAO,GAAG,KAAK,SAAS;;CAGvC,iBAAuB;AACrB,MAAI,CAAC,MAAKA,OAAS;AAGnB,OAAK,OAAO,GAAG,MAAKA,OAAQ,SAAS;AACrC,QAAKA,OAAQ,QAAQ;AACrB,QAAKA,SAAU;;;AAInB,IAAa,2BAAb,cAA8C,YAAY;CACxD,oBAA0B;AACxB,OAAK,MAAM,UAAU;EAErB,MAAM,QAAQ,KAAK;AACnB,MAAI,MACF,QAAO,OAAO,MAAM,OAAO;GACzB,UAAU;GACV,KAAK;GACL,MAAM;GACP,CAAC;;CAIN,IAAI,OAAkB;AACpB,SAAQ,KAAK,aAAa,OAAO,IAAkB;;CAGrD,IAAI,aAAqB;AACvB,SAAO,OAAO,SAAS,KAAK,aAAa,cAAc,IAAI,KAAK,GAAG;;CAGrE,IAAI,mBAA2B;AAC7B,SAAO,OAAO,SAAS,KAAK,aAAa,oBAAoB,IAAI,KAAK,GAAG;;;AAI7E,IAAa,sBAAb,cAAyC,YAAY;CACnD,oBAA0B;AACxB,OAAK,aAAa,QAAQ,UAAU;;;AAIxC,IAAa,sBAAb,cAAyC,YAAY;CACnD,oBAA0B;AACxB,OAAK,aAAa,eAAe,OAAO;;;AAI5C,MAAaC,iBAOT;CACF,MAAM;CACN,SAAS;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,OAAO;CACR"}