@videojs/react 10.0.0-beta.31 → 10.0.0-beta.32

package/dist/dev/ui/dialog/dialog-description.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/dialog-description.d.ts
+interface DialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}
+/** Renders the description announced with the dialog. */
+declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogDescriptionProps>;
+declare namespace DialogDescription {
+  type Props = DialogDescriptionProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogDescription, DialogDescriptionProps };
+//# sourceMappingURL=dialog-description.d.ts.map

package/dist/dev/ui/dialog/dialog-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-description.tsx"],"mappings":";;;UAMiB,+BAA+B,sBAAsB,WAAW;;cAGpE,mCAAiB,0BAAA;kBAOb;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/dialog/dialog-description.js

@@ -0,0 +1,14 @@
+import { useDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/dialog/dialog-description.tsx
+/** Renders the description announced with the dialog. */
+const DialogDescription = createContextPart({
+	displayName: "DialogDescription",
+	tag: "p",
+	useContext: useDialogContext,
+	getProps: (state) => ({ id: state.descriptionId })
+});
+//#endregion
+export { DialogDescription };
+
+//# sourceMappingURL=dialog-description.js.map

package/dist/dev/ui/dialog/dialog-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description.js","names":[],"sources":["../../../../src/ui/dialog/dialog-description.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useDialogContext } from './context';\n\nexport interface DialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}\n\n/** Renders the description announced with the dialog. */\nexport const DialogDescription = createContextPart<DialogDescriptionProps, DialogCore.State>({\n  displayName: 'DialogDescription',\n  tag: 'p',\n  useContext: useDialogContext,\n  getProps: (state) => ({ id: state.descriptionId }),\n});\n\nexport namespace DialogDescription {\n  export type Props = DialogDescriptionProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;AASA,MAAa,oBAAoB,kBAA4D;CAC3F,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,cAAc;AAClD,CAAC"}

package/dist/dev/ui/dialog/dialog-popup.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/dialog-popup.d.ts
+interface DialogPopupProps extends UIComponentProps<'div', DialogCore.State> {}
+/** Renders the modal dialog while it is open. */
+declare const DialogPopup: import("react").ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace DialogPopup {
+  type Props = DialogPopupProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogPopup, DialogPopupProps };
+//# sourceMappingURL=dialog-popup.d.ts.map

package/dist/dev/ui/dialog/dialog-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-popup.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-popup.tsx"],"mappings":";;;UAOiB,yBAAyB,wBAAwB,WAAW;;cAGhE,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAsBP;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/dialog/dialog-popup.js

@@ -0,0 +1,28 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/dialog/dialog-popup.tsx
+/** Renders the modal dialog while it is open. */
+const DialogPopup = forwardRef(function DialogPopup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();
+	const popupRef = useCallback((element) => dialog.setPopupElement(element), [dialog]);
+	if (!state.open) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, popupRef],
+		props: [{
+			id: popupId,
+			tabIndex: -1,
+			...core.getPopupAttrs(state)
+		}, elementProps]
+	});
+});
+//#endregion
+export { DialogPopup };
+
+//# sourceMappingURL=dialog-popup.js.map

package/dist/dev/ui/dialog/dialog-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-popup.js","names":[],"sources":["../../../../src/ui/dialog/dialog-popup.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from './context';\n\nexport interface DialogPopupProps extends UIComponentProps<'div', DialogCore.State> {}\n\n/** Renders the modal dialog while it is open. */\nexport const DialogPopup = forwardRef<HTMLDivElement, DialogPopupProps>(function DialogPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();\n\n  const popupRef = useCallback((element: HTMLDivElement | null) => dialog.setPopupElement(element), [dialog]);\n\n  if (!state.open) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, popupRef],\n      props: [{ id: popupId, tabIndex: -1, ...core.getPopupAttrs(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace DialogPopup {\n  export type Props = DialogPopupProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,cAAc,YAAY,iBAAiB;CAExE,MAAM,WAAW,aAAa,YAAmC,OAAO,gBAAgB,OAAO,GAAG,CAAC,MAAM,CAAC;CAE1G,IAAI,CAAC,MAAM,MAAM,OAAO;CAExB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,QAAQ;EAC5B,OAAO,CAAC;GAAE,IAAI;GAAS,UAAU;GAAI,GAAG,KAAK,cAAc,KAAK;EAAE,GAAG,YAAY;CACnF,CACF;AACF,CAAC"}

package/dist/dev/ui/dialog/dialog-root.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { DialogProps } from "@videojs/core";
+//#region src/ui/dialog/dialog-root.d.ts
+interface DialogRootProps extends DialogProps {
+  /** Called when the open state changes, before animations complete. */
+  onOpenChange?: (open: boolean) => void;
+  /** Called after open or close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+/** Manages dialog state and provides it to the compound parts. */
+declare function DialogRoot(props: DialogRootProps): ReactNode;
+declare namespace DialogRoot {
+  type Props = DialogRootProps;
+}
+//#endregion
+export { DialogRoot, DialogRootProps };
+//# sourceMappingURL=dialog-root.d.ts.map

package/dist/dev/ui/dialog/dialog-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-root.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-root.tsx"],"mappings":";;;UAMiB,wBAAwB;;EAEvC,gBAAgB;;EAEhB,wBAAwB;EACxB,WAAW;;;iBAIG,WAAW,OAAO,kBAAkB;kBAUnC;OACH,QAAQ"}

package/dist/dev/ui/dialog/dialog-root.js

@@ -0,0 +1,23 @@
+import { DialogContextProvider } from "./context.js";
+import { useDialogRoot } from "./use-dialog-root.js";
+import { jsx } from "react/jsx-runtime";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/dialog-root.tsx
+/** Manages dialog state and provides it to the compound parts. */
+function DialogRoot(props) {
+	const context = useDialogRoot({
+		...props,
+		coreFactory: createDialogCore
+	});
+	return /* @__PURE__ */ jsx(DialogContextProvider, {
+		value: context,
+		children: props.children
+	});
+}
+function createDialogCore() {
+	return new DialogCore();
+}
+//#endregion
+export { DialogRoot };
+
+//# sourceMappingURL=dialog-root.js.map

package/dist/dev/ui/dialog/dialog-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-root.js","names":[],"sources":["../../../../src/ui/dialog/dialog-root.tsx"],"sourcesContent":["import { DialogCore, type DialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from './context';\nimport { useDialogRoot } from './use-dialog-root';\n\nexport interface DialogRootProps extends DialogProps {\n  /** Called when the open state changes, before animations complete. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open or close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/** Manages dialog state and provides it to the compound parts. */\nexport function DialogRoot(props: DialogRootProps): ReactNode {\n  const context = useDialogRoot({ ...props, coreFactory: createDialogCore });\n\n  return <DialogContextProvider value={context}>{props.children}</DialogContextProvider>;\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n\nexport namespace DialogRoot {\n  export type Props = DialogRootProps;\n}\n"],"mappings":";;;;;;AAeA,SAAgB,WAAW,OAAmC;CAC5D,MAAM,UAAU,cAAc;EAAE,GAAG;EAAO,aAAa;CAAiB,CAAC;CAEzE,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAAU,UAAA,MAAM;CAAgC,CAAA;AACvF;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}

package/dist/dev/ui/dialog/dialog-title.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/dialog-title.d.ts
+interface DialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}
+/** Renders the heading that labels the dialog. */
+declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps>;
+declare namespace DialogTitle {
+  type Props = DialogTitleProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogTitle, DialogTitleProps };
+//# sourceMappingURL=dialog-title.d.ts.map

package/dist/dev/ui/dialog/dialog-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-title.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-title.tsx"],"mappings":";;;UAMiB,yBAAyB,uBAAuB,WAAW;;cAG/D,6BAAW,0BAAA;kBAOP;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/dialog/dialog-title.js

@@ -0,0 +1,14 @@
+import { useDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/dialog/dialog-title.tsx
+/** Renders the heading that labels the dialog. */
+const DialogTitle = createContextPart({
+	displayName: "DialogTitle",
+	tag: "h2",
+	useContext: useDialogContext,
+	getProps: (state) => ({ id: state.titleId })
+});
+//#endregion
+export { DialogTitle };
+
+//# sourceMappingURL=dialog-title.js.map

package/dist/dev/ui/dialog/dialog-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-title.js","names":[],"sources":["../../../../src/ui/dialog/dialog-title.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useDialogContext } from './context';\n\nexport interface DialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}\n\n/** Renders the heading that labels the dialog. */\nexport const DialogTitle = createContextPart<DialogTitleProps, DialogCore.State>({\n  displayName: 'DialogTitle',\n  tag: 'h2',\n  useContext: useDialogContext,\n  getProps: (state) => ({ id: state.titleId }),\n});\n\nexport namespace DialogTitle {\n  export type Props = DialogTitleProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;AASA,MAAa,cAAc,kBAAsD;CAC/E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,QAAQ;AAC5C,CAAC"}

package/dist/dev/ui/dialog/dialog-trigger.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/dialog-trigger.d.ts
+interface DialogTriggerProps extends UIComponentProps<'button', DialogCore.State> {}
+/** Renders a button that opens the dialog. */
+declare const DialogTrigger: import("react").ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace DialogTrigger {
+  type Props = DialogTriggerProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogTrigger, DialogTriggerProps };
+//# sourceMappingURL=dialog-trigger.d.ts.map

package/dist/dev/ui/dialog/dialog-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-trigger.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-trigger.tsx"],"mappings":";;;UAOiB,2BAA2B,2BAA2B,WAAW;;cAGrE,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAoBT;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/dialog/dialog-trigger.js

@@ -0,0 +1,30 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/dialog/dialog-trigger.tsx
+/** Renders a button that opens the dialog. */
+const DialogTrigger = forwardRef(function DialogTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();
+	const triggerRef = useCallback((element) => dialog.setTriggerElement(element), [dialog]);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, popupId)
+			},
+			dialog.triggerProps,
+			elementProps
+		]
+	});
+});
+//#endregion
+export { DialogTrigger };
+
+//# sourceMappingURL=dialog-trigger.js.map

package/dist/dev/ui/dialog/dialog-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-trigger.js","names":[],"sources":["../../../../src/ui/dialog/dialog-trigger.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from './context';\n\nexport interface DialogTriggerProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a button that opens the dialog. */\nexport const DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(function DialogTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();\n\n  const triggerRef = useCallback((element: HTMLButtonElement | null) => dialog.setTriggerElement(element), [dialog]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [{ type: 'button' as const, ...core.getTriggerAttrs(state, popupId) }, dialog.triggerProps, elementProps],\n    }\n  );\n});\n\nexport namespace DialogTrigger {\n  export type Props = DialogTriggerProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,WAAkD,SAAS,cACtF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,cAAc,YAAY,iBAAiB;CAExE,MAAM,aAAa,aAAa,YAAsC,OAAO,kBAAkB,OAAO,GAAG,CAAC,MAAM,CAAC;CAEjH,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC;IAAE,MAAM;IAAmB,GAAG,KAAK,gBAAgB,OAAO,OAAO;GAAE;GAAG,OAAO;GAAc;EAAY;CACjH,CACF;AACF,CAAC"}

package/dist/dev/ui/dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { index_parts_d_exports } from "./index.parts.js";
+import { DialogContextValue, useDialogContext } from "./context.js";
+export { index_parts_d_exports as Dialog, type DialogContextValue, useDialogContext };

package/dist/dev/ui/dialog/index.js

@@ -0,0 +1,3 @@
+import { useDialogContext } from "./context.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Dialog, useDialogContext };

package/dist/dev/ui/dialog/index.parts.d.ts

@@ -0,0 +1,13 @@
+import { DialogBackdrop, DialogBackdropProps } from "./dialog-backdrop.js";
+import { DialogClose, DialogCloseProps } from "./dialog-close.js";
+import { DialogDescription, DialogDescriptionProps } from "./dialog-description.js";
+import { DialogPopup, DialogPopupProps } from "./dialog-popup.js";
+import { DialogRoot, DialogRootProps } from "./dialog-root.js";
+import { DialogTitle, DialogTitleProps } from "./dialog-title.js";
+import { DialogTrigger, DialogTriggerProps } from "./dialog-trigger.js";
+declare namespace index_parts_d_exports {
+  export { DialogBackdrop as Backdrop, DialogBackdropProps as BackdropProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogPopup as Popup, DialogPopupProps as PopupProps, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps };
+}
+//#endregion
+export { DialogBackdrop as Backdrop, type DialogBackdropProps as BackdropProps, DialogClose as Close, type DialogCloseProps as CloseProps, DialogDescription as Description, type DialogDescriptionProps as DescriptionProps, DialogPopup as Popup, type DialogPopupProps as PopupProps, DialogRoot as Root, type DialogRootProps as RootProps, DialogTitle as Title, type DialogTitleProps as TitleProps, DialogTrigger as Trigger, type DialogTriggerProps as TriggerProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/dialog/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/dialog/index.parts.ts"],"mappings":""}

package/dist/dev/ui/dialog/index.parts.js

@@ -0,0 +1,22 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { DialogBackdrop } from "./dialog-backdrop.js";
+import { DialogClose } from "./dialog-close.js";
+import { DialogDescription } from "./dialog-description.js";
+import { DialogPopup } from "./dialog-popup.js";
+import { DialogRoot } from "./dialog-root.js";
+import { DialogTitle } from "./dialog-title.js";
+import { DialogTrigger } from "./dialog-trigger.js";
+//#region src/ui/dialog/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Backdrop: () => DialogBackdrop,
+	Close: () => DialogClose,
+	Description: () => DialogDescription,
+	Popup: () => DialogPopup,
+	Root: () => DialogRoot,
+	Title: () => DialogTitle,
+	Trigger: () => DialogTrigger
+});
+//#endregion
+export { DialogBackdrop as Backdrop, DialogClose as Close, DialogDescription as Description, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/dialog/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/dialog/index.parts.ts"],"sourcesContent":["export { DialogBackdrop as Backdrop, type DialogBackdropProps as BackdropProps } from './dialog-backdrop';\nexport { DialogClose as Close, type DialogCloseProps as CloseProps } from './dialog-close';\nexport {\n  DialogDescription as Description,\n  type DialogDescriptionProps as DescriptionProps,\n} from './dialog-description';\nexport { DialogPopup as Popup, type DialogPopupProps as PopupProps } from './dialog-popup';\nexport { DialogRoot as Root, type DialogRootProps as RootProps } from './dialog-root';\nexport { DialogTitle as Title, type DialogTitleProps as TitleProps } from './dialog-title';\nexport { DialogTrigger as Trigger, type DialogTriggerProps as TriggerProps } from './dialog-trigger';\n"],"mappings":""}

package/dist/dev/ui/dialog/use-dialog-root.js

@@ -0,0 +1,59 @@
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { createDialog, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useState } from "react";
+import { DialogCore, DialogDataAttrs } from "@videojs/core";
+//#region src/ui/dialog/use-dialog-root.ts
+function useDialogRoot({ open: controlledOpen, defaultOpen = DialogCore.defaultProps.defaultOpen, closeOnEscape = DialogCore.defaultProps.closeOnEscape, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, coreFactory = createDialogCore, stateAttrMap = DialogDataAttrs, idPrefix = "dialog" }) {
+	const [core] = useState(coreFactory);
+	core.setProps({
+		open: controlledOpen,
+		defaultOpen,
+		closeOnEscape
+	});
+	const isControlled = controlledOpen !== void 0;
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const closeOnEscapeRef = useLatestRef(closeOnEscape);
+	const [dialog] = useState(() => {
+		const instance = createDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => onOpenChangeRef.current?.(nextOpen),
+			onOpenChangeComplete: (nextOpen) => onOpenChangeCompleteRef.current?.(nextOpen),
+			closeOnEscape: () => closeOnEscapeRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const popupId = useSafeId(`${idPrefix}-popup`);
+	const titleId = useSafeId(`${idPrefix}-title`);
+	const descriptionId = useSafeId(`${idPrefix}-desc`);
+	core.setTitleId(titleId);
+	core.setDescriptionId(descriptionId);
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = dialog.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) dialog.open();
+		else dialog.close();
+	}, [controlledOpen, dialog]);
+	useDestroy(dialog);
+	const input = useSnapshot(dialog.input);
+	core.setInput(input);
+	return {
+		core,
+		dialog,
+		state: core.getState(),
+		stateAttrMap,
+		popupId
+	};
+}
+function createDialogCore() {
+	return new DialogCore();
+}
+//#endregion
+export { useDialogRoot };
+
+//# sourceMappingURL=use-dialog-root.js.map

package/dist/dev/ui/dialog/use-dialog-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dialog-root.js","names":[],"sources":["../../../../src/ui/dialog/use-dialog-root.ts"],"sourcesContent":["import { DialogCore, DialogDataAttrs, type DialogProps, type DialogState, type StateAttrMap } from '@videojs/core';\nimport { createDialog, createTransition } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport type { DialogContextValue } from './context';\n\nexport interface UseDialogRootOptions extends DialogProps {\n  onOpenChange?: (open: boolean) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n  coreFactory?: () => DialogCore;\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n}\n\nexport function useDialogRoot({\n  open: controlledOpen,\n  defaultOpen = DialogCore.defaultProps.defaultOpen,\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  coreFactory = createDialogCore,\n  stateAttrMap = DialogDataAttrs,\n  idPrefix = 'dialog',\n}: UseDialogRootOptions): DialogContextValue {\n  const [core] = useState(coreFactory);\n\n  core.setProps({ open: controlledOpen, defaultOpen, closeOnEscape });\n\n  const isControlled = controlledOpen !== undefined;\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n\n  const [dialog] = useState(() => {\n    const instance = createDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => onOpenChangeRef.current?.(nextOpen),\n      onOpenChangeComplete: (nextOpen: boolean) => onOpenChangeCompleteRef.current?.(nextOpen),\n      closeOnEscape: () => closeOnEscapeRef.current,\n    });\n\n    if (!isControlled && defaultOpen) instance.open();\n\n    return instance;\n  });\n\n  const popupId = useSafeId(`${idPrefix}-popup`);\n  const titleId = useSafeId(`${idPrefix}-title`);\n  const descriptionId = useSafeId(`${idPrefix}-desc`);\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = dialog.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) dialog.open();\n    else dialog.close();\n  }, [controlledOpen, dialog]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n\n  core.setInput(input);\n\n  return {\n    core,\n    dialog,\n    state: core.getState(),\n    stateAttrMap,\n    popupId,\n  };\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,cAAc,EAC5B,MAAM,gBACN,cAAc,WAAW,aAAa,aACtC,gBAAgB,WAAW,aAAa,eACxC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,kBACd,eAAe,iBACf,WAAW,YACgC;CAC3C,MAAM,CAAC,QAAQ,SAAS,WAAW;CAEnC,KAAK,SAAS;EAAE,MAAM;EAAgB;EAAa;CAAc,CAAC;CAElE,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,aAAa;CAEnD,MAAM,CAAC,UAAU,eAAe;EAC9B,MAAM,WAAW,aAAa;GAC5B,YAAY,iBAAiB;GAC7B,eAAe,aAAsB,gBAAgB,UAAU,QAAQ;GACvE,uBAAuB,aAAsB,wBAAwB,UAAU,QAAQ;GACvF,qBAAqB,iBAAiB;EACxC,CAAC;EAED,IAAI,CAAC,gBAAgB,aAAa,SAAS,KAAK;EAEhD,OAAO;CACT,CAAC;CAED,MAAM,UAAU,UAAU,GAAG,SAAS,OAAO;CAC7C,MAAM,UAAU,UAAU,GAAG,SAAS,OAAO;CAC7C,MAAM,gBAAgB,UAAU,GAAG,SAAS,MAAM;CAElD,KAAK,WAAW,OAAO;CACvB,KAAK,iBAAiB,aAAa;CAEnC,gBAAgB;EACd,IAAI,mBAAmB,KAAA,GAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,OAAO,MAAM;EAC3C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBAAgB,OAAO,KAAK;OAC3B,OAAO,MAAM;CACpB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,WAAW,MAAM;CAEjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CAEtC,KAAK,SAAS,KAAK;CAEnB,OAAO;EACL;EACA;EACA,OAAO,KAAK,SAAS;EACrB;EACA;CACF;AACF;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}

package/dist/dev/ui/error-dialog/context.d.ts

@@ -3,6 +3,7 @@ import { ErrorLike } from "@videojs/media";
 interface ErrorDialogContextValue {
   lastError: ErrorLike | null;
 }
+/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */
 declare function useErrorDialogContext(): ErrorDialogContextValue;
 //#endregion
 export { ErrorDialogContextValue, useErrorDialogContext };

package/dist/dev/ui/error-dialog/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"mappings":";;UAGiB;EACf,WAAW;;iBAOG,yBAAyB"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"mappings":";;UAGiB;EACf,WAAW;;;iBAQG,yBAAyB"}

package/dist/dev/ui/error-dialog/context.js

@@ -2,6 +2,7 @@ import { createContext, useContext } from "react";
 //#region src/ui/error-dialog/context.tsx
 const ErrorDialogContext = createContext(null);
 const ErrorDialogContextProvider = ErrorDialogContext.Provider;
+/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */
 function useErrorDialogContext() {
 	const ctx = useContext(ErrorDialogContext);
 	if (!ctx) throw new Error("ErrorDialog compound components must be used within an ErrorDialog.Root");

package/dist/dev/ui/error-dialog/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["import type { ErrorLike } from '@videojs/media';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: ErrorLike | null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue | null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\nexport function useErrorDialogContext(): ErrorDialogContextValue {\n  const ctx = useContext(ErrorDialogContext);\n  if (!ctx) throw new Error('ErrorDialog compound components must be used within an ErrorDialog.Root');\n  return ctx;\n}\n"],"mappings":";;AAOA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,MAAa,6BAA6B,mBAAmB;AAE7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,kBAAkB;CACzC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yEAAyE;CACnG,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["import type { ErrorLike } from '@videojs/media';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: ErrorLike | null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue | null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\n/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */\nexport function useErrorDialogContext(): ErrorDialogContextValue {\n  const ctx = useContext(ErrorDialogContext);\n  if (!ctx) throw new Error('ErrorDialog compound components must be used within an ErrorDialog.Root');\n\n  return ctx;\n}\n"],"mappings":";;AAOA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,MAAa,6BAA6B,mBAAmB;;AAG7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,kBAAkB;CACzC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yEAAyE;CAEnG,OAAO;AACT"}

package/dist/dev/ui/error-dialog/error-dialog-close.d.ts

@@ -1,11 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import { AlertDialogCore } from "@videojs/core";
+import { DialogCore } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-close.d.ts
-interface ErrorDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}
+interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}
+/** Renders a localized button that closes the dialog and dismisses the player error. */
 declare const ErrorDialogClose: import("react").ForwardRefExoticComponent<Omit<ErrorDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace ErrorDialogClose {
   type Props = ErrorDialogCloseProps;
-  type State = AlertDialogCore.State;
+  type State = DialogCore.State;
 }
 //#endregion
 export { ErrorDialogClose, ErrorDialogCloseProps };

package/dist/dev/ui/error-dialog/error-dialog-close.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-close.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"mappings":";;;UASiB,8BAA8B,2BAA2B,gBAAgB;cAE7E,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBA0BZ;OACH,QAAQ;OACR,QAAQ,gBAAgB"}
+{"version":3,"file":"error-dialog-close.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"mappings":";;;UASiB,8BAA8B,2BAA2B,WAAW;;cAGxE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBA2BZ;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/error-dialog/error-dialog-close.js

@@ -1,13 +1,14 @@
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { useDialogContext } from "../dialog/context.js";
 import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useCallback } from "react";
 import { getErrorDialogDismissText } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-close.tsx
+/** Renders a localized button that closes the dialog and dismisses the player error. */
 const ErrorDialogClose = forwardRef(function ErrorDialogClose({ render, className, style, disabled, children, ...elementProps }, forwardedRef) {
 	const t = useTranslator();
-	const { dialog, state, stateAttrMap } = useAlertDialogContext();
+	const { dialog, state, stateAttrMap } = useDialogContext();
 	const handleClick = useCallback(() => {
 		if (disabled) return;
 		dialog.close();

package/dist/dev/ui/error-dialog/error-dialog-close.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"sourcesContent":["import type { AlertDialogCore } from '@videojs/core';\nimport { getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\n\nexport interface ErrorDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}\n\nexport const ErrorDialogClose = forwardRef<HTMLButtonElement, ErrorDialogCloseProps>(function ErrorDialogClose(\n  { render, className, style, disabled, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { dialog, state, stateAttrMap } = useAlertDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    dialog.close();\n  }, [dialog, disabled]);\n\n  const content: ReactNode = children ?? translateText(getErrorDialogDismissText(), t);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogClose {\n  export type Props = ErrorDialogCloseProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,sBAAsB;CAE9D,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EACd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,MAAM,UAAqB,YAAY,cAAc,0BAA0B,GAAG,CAAC;CAEnF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,UAAU;EAAQ,GAAG,YAAY;CACtG,CACF;AACF,CAAC"}
+{"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a localized button that closes the dialog and dismisses the player error. */\nexport const ErrorDialogClose = forwardRef<HTMLButtonElement, ErrorDialogCloseProps>(function ErrorDialogClose(\n  { render, className, style, disabled, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { dialog, state, stateAttrMap } = useDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n\n    dialog.close();\n  }, [dialog, disabled]);\n\n  const content: ReactNode = children ?? translateText(getErrorDialogDismissText(), t);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogClose {\n  export type Props = ErrorDialogCloseProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,iBAAiB;CAEzD,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EAEd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,MAAM,UAAqB,YAAY,cAAc,0BAA0B,GAAG,CAAC;CAEnF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,UAAU;EAAQ,GAAG,YAAY;CACtG,CACF;AACF,CAAC"}

package/dist/dev/ui/error-dialog/error-dialog-description.d.ts

@@ -1,11 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import { AlertDialogCore } from "@videojs/core";
+import { DialogCore } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-description.d.ts
-interface ErrorDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}
+interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}
+/** Renders the localized playback error message, or authored children when provided. */
 declare const ErrorDialogDescription: import("react").ForwardRefExoticComponent<Omit<ErrorDialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 declare namespace ErrorDialogDescription {
   type Props = ErrorDialogDescriptionProps;
-  type State = AlertDialogCore.State;
+  type State = DialogCore.State;
 }
 //#endregion
 export { ErrorDialogDescription, ErrorDialogDescriptionProps };

package/dist/dev/ui/error-dialog/error-dialog-description.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"mappings":";;;UAUiB,oCAAoC,sBAAsB,gBAAgB;cAE9E,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAqBlB;OACH,QAAQ;OACR,QAAQ,gBAAgB"}
+{"version":3,"file":"error-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"mappings":";;;UAUiB,oCAAoC,sBAAsB,WAAW;;cAGzE,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAqBlB;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/error-dialog/error-dialog-description.js

@@ -1,14 +1,15 @@
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { useDialogContext } from "../dialog/context.js";
 import { useErrorDialogContext } from "./context.js";
 import { translateText } from "@videojs/core/i18n";
 import { forwardRef } from "react";
 import { resolveErrorDialogDescription } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-description.tsx
+/** Renders the localized playback error message, or authored children when provided. */
 const ErrorDialogDescription = forwardRef(function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {
 	const t = useTranslator();
-	const { state, stateAttrMap } = useAlertDialogContext();
+	const { state, stateAttrMap } = useDialogContext();
 	const { lastError } = useErrorDialogContext();
 	const description = resolveErrorDialogDescription(lastError);
 	const content = children ?? translateText(description, t);

package/dist/dev/ui/error-dialog/error-dialog-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["import type { AlertDialogCore } from '@videojs/core';\nimport { resolveErrorDialogDescription } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}\n\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useAlertDialogContext();\n    const { lastError } = useErrorDialogContext();\n    const description = resolveErrorDialogDescription(lastError);\n    const content: ReactNode = children ?? translateText(description, t);\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [{ id: state.descriptionId, children: content }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;CACtD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,cAAc,8BAA8B,SAAS;CAC3D,MAAM,UAAqB,YAAY,cAAc,aAAa,CAAC;CAEnE,OAAO,cACL,KACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAe,UAAU;EAAQ,GAAG,YAAY;CACtE,CACF;AACF,CACF"}
+{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["import { type DialogCore, resolveErrorDialogDescription } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}\n\n/** Renders the localized playback error message, or authored children when provided. */\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useDialogContext();\n    const { lastError } = useErrorDialogContext();\n    const description = resolveErrorDialogDescription(lastError);\n    const content: ReactNode = children ?? translateText(description, t);\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [{ id: state.descriptionId, children: content }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,cAAc,8BAA8B,SAAS;CAC3D,MAAM,UAAqB,YAAY,cAAc,aAAa,CAAC;CAEnE,OAAO,cACL,KACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAe,UAAU;EAAQ,GAAG,YAAY;CACtE,CACF;AACF,CACF"}

package/dist/dev/ui/error-dialog/error-dialog-root.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 interface ErrorDialogRootProps {
   children?: ReactNode;
 }
+/** Opens from player error state and provides it to the shared dialog parts. */
 declare function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode;
 declare namespace ErrorDialogRoot {
   type Props = ErrorDialogRootProps;

package/dist/dev/ui/error-dialog/error-dialog-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"mappings":";;UAaiB;EACf,WAAW;;iBAGG,kBAAkB,YAAY,uBAAuB;kBAsDpD;OACH,QAAQ"}
+{"version":3,"file":"error-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"mappings":";;UAWiB;EACf,WAAW;;;iBAIG,kBAAkB,YAAY,uBAAuB;kBA8BpD;OACH,QAAQ"}

package/dist/dev/ui/error-dialog/error-dialog-root.js

@@ -1,55 +1,40 @@
 import { usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { AlertDialogContextProvider } from "../alert-dialog/context.js";
-import { useSafeId } from "../../utils/use-safe-id.js";
+import { DialogContextProvider } from "../dialog/context.js";
+import { useDialogRoot } from "../dialog/use-dialog-root.js";
 import { ErrorDialogContextProvider } from "./context.js";
-import { createAlertDialog, createTransition, selectError } from "@videojs/core/dom";
-import { useSnapshot } from "@videojs/store/react";
-import { useEffect, useRef, useState } from "react";
+import { selectError } from "@videojs/core/dom";
+import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { AlertDialogDataAttrs, ErrorDialogCore } from "@videojs/core";
+import { ErrorDialogCore, ErrorDialogDataAttrs } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-root.tsx
+/** Opens from player error state and provides it to the shared dialog parts. */
 function ErrorDialogRoot({ children }) {
-	const [core] = useState(() => new ErrorDialogCore());
 	const errorState = usePlayer(selectError);
 	const lastError = useRef(errorState?.error ?? null);
 	if (errorState?.error) lastError.current = errorState.error;
 	const errorStateRef = useLatestRef(errorState);
-	const [dialog] = useState(() => createAlertDialog({
-		transition: createTransition(),
-		onOpenChange: (nextOpen) => {
+	const dialogContext = useDialogRoot({
+		open: Boolean(errorState?.error),
+		onOpenChange(nextOpen) {
 			if (!nextOpen) errorStateRef.current?.dismissError();
-		}
-	}));
-	const titleId = useSafeId("error-dialog-title");
-	const descriptionId = useSafeId("error-dialog-desc");
-	core.setTitleId(titleId);
-	core.setDescriptionId(descriptionId);
-	useEffect(() => {
-		const hasError = Boolean(errorState?.error);
-		const { active: isOpen } = dialog.input.current;
-		if (hasError && !isOpen) dialog.open();
-		else if (!hasError && isOpen) dialog.close();
-	}, [errorState?.error, dialog]);
-	useDestroy(dialog);
-	const input = useSnapshot(dialog.input);
-	core.setInput(input);
-	const state = core.getState();
+		},
+		coreFactory: createErrorDialogCore,
+		stateAttrMap: ErrorDialogDataAttrs,
+		idPrefix: "error-dialog"
+	});
 	if (!errorState) return null;
 	return /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
 		value: { lastError: lastError.current },
-		children: /* @__PURE__ */ jsx(AlertDialogContextProvider, {
-			value: {
-				core,
-				dialog,
-				state,
-				stateAttrMap: AlertDialogDataAttrs
-			},
+		children: /* @__PURE__ */ jsx(DialogContextProvider, {
+			value: dialogContext,
 			children
 		})
 	});
 }
+function createErrorDialogCore() {
+	return new ErrorDialogCore();
+}
 //#endregion
 export { ErrorDialogRoot };