npm - @videojs/react - Versions diffs - 10.0.0-alpha.9 → 10.0.0-beta.10 - Mend

@videojs/react 10.0.0-alpha.9 → 10.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (444) hide show

package/dist/default/skins/dist/default/minimal/tailwind/components/seek.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"seek.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/seek.js"],"sourcesContent":["//#region src/minimal/tailwind/components/seek.ts\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[10px] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\n\n//#endregion\nexport { seek };\n//# sourceMappingURL=seek.js.map"],"mappings":";AACA,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf"}

package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/components/slider.js
+const slider = {
+	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
+	track: cn("relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75", "data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full"),
+	fill: {
+		base: "absolute rounded-[inherit] pointer-events-none",
+		fill: cn("bg-current", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:w-(--media-slider-fill,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:h-(--media-slider-fill,0)"),
+		buffer: cn("bg-current/20 duration-250 ease-out", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)")
+	},
+	thumb: {
+		base: cn("z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2", "bg-current rounded-full", "shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]", "transition-[opacity,scale,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]"),
+		interactive: cn("opacity-0 scale-70 origin-center", "group-hover/slider:opacity-100 group-hover/slider:scale-100", "group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100")
+	}
+};
+//#endregion
+export { slider };
+//# sourceMappingURL=slider.js.map

package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/slider.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/slider.ts\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-current\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-current/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-current rounded-full\", \"shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\n\n//#endregion\nexport { slider };\n//# sourceMappingURL=slider.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,0GAA0G,iHAAiH,yEAAyE;CAC7S,OAAO,GAAG,gFAAgF,6EAA6E,wEAAwE;CAC/O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACxS,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACta;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,wJAAwJ,+EAA+E,mDAAmD,gEAAgE,oGAAoG,+GAA+G;EAC3oB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD"}

package/dist/default/skins/dist/default/minimal/tailwind/components/time.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/components/time.js
+const time = {
+	group: "flex items-center gap-1",
+	current: cn("hidden tabular-nums", "@md/media-controls:inline"),
+	separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-current/60"),
+	duration: cn("tabular-nums", "@md/media-controls:text-current/60"),
+	controls: cn("flex flex-row-reverse items-center flex-1 gap-3", "@md/media-controls:flex-row")
+};
+//#endregion
+export { time };
+//# sourceMappingURL=time.js.map

package/dist/default/skins/dist/default/minimal/tailwind/components/time.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"time.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/time.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-current/60\"),\n\tduration: cn(\"tabular-nums\", \"@md/media-controls:text-current/60\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\n\n//#endregion\nexport { time };\n//# sourceMappingURL=time.js.map"],"mappings":";;;AAGA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,uBAAuB,4BAA4B;CAC/D,WAAW,GAAG,UAAU,+DAA+D;CACvF,UAAU,GAAG,gBAAgB,qCAAqC;CAClE,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F"}

package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { iconState } from "../../shared/tailwind/icon-state.js";
+import { controls as controls$1 } from "./components/controls.js";
+import { error as error$1 } from "./components/error.js";
+import { popup as popup$1 } from "./components/popup.js";
+import { root as root$1 } from "./components/root.js";
+import { bufferingIndicator } from "./components/buffering.js";
+import { button } from "./components/button.js";
+import { buttonGroup } from "./components/button-group.js";
+import { icon, iconContainer, iconFlipped } from "./components/icon.js";
+import { seek } from "./components/seek.js";
+import { slider as slider$1 } from "./components/slider.js";
+import { time } from "./components/time.js";
+import { preview as preview$1 } from "./components/preview.js";
+import { overlay } from "./components/overlay.js";
+import { poster } from "./components/poster.js";
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
+const root = (isShadowDOM) => cn(root$1, "bg-black overflow-clip", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15", {
+	"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]": isShadowDOM,
+	"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]": !isShadowDOM
+}, "[--media-video-border-radius:var(--media-border-radius,0.75rem)]", "[--media-controls-padding:0.375rem]", "[--media-controls-transition-duration:100ms]", "[--media-controls-transition-delay:0ms]", "[--media-controls-transition-timing-function:ease-out]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-error-dialog-transition-timing-function:ease-out]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]", "[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]", "motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]", "[--media-caption-track-duration:var(--media-controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]", !isShadowDOM ? [
+	"[&_video::-webkit-media-text-track-container]:transition-[translate]",
+	"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)",
+	"[&_video::-webkit-media-text-track-container]:ease-out",
+	"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)",
+	"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)",
+	"[&_video::-webkit-media-text-track-container]:scale-98",
+	"[&_video::-webkit-media-text-track-container]:z-1",
+	"[&_video::-webkit-media-text-track-container]:font-[inherit]"
+] : [], "[&:fullscreen]:[--media-border-radius:0]", {
+	"[&:fullscreen_video]:object-contain": !isShadowDOM,
+	"[&:fullscreen_::slotted(video)]:object-contain": isShadowDOM
+});
+const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-(--media-controls-padding) pb-(--media-controls-padding) gap-2", "[color:var(--media-color-primary,oklch(1_0_0))] z-10", "peer-data-open/error:hidden", "ease-(--media-controls-transition-timing-function)", "duration-(--media-controls-transition-duration)", "delay-(--media-controls-transition-delay)", "[@media(pointer:fine)]:will-change-[translate,filter,opacity]", "[@media(pointer:fine)]:transition-[translate,filter,opacity]", "[@media(pointer:coarse)]:will-change-[translate,opacity]", "[@media(pointer:coarse)]:transition-[translate,opacity]", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "motion-safe:not-data-visible:translate-y-full", "[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
+const error = {
+	...error$1,
+	root: cn(error$1.root, "pointer-events-none outline-none"),
+	dialog: cn(error$1.dialog, "pointer-events-auto"),
+	title: cn(error$1.title, "text-lg")
+};
+const preview = {
+	...preview$1,
+	root: cn("absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2", "opacity-0 scale-80 blur-sm origin-bottom", "transition-[scale,opacity,filter] duration-150", "group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none", "[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm", "[&:has([role=img][data-loading])]:max-h-24", preview$1.root),
+	thumbnailWrapper: cn(preview$1.thumbnailWrapper, "after:absolute after:inset-0 after:rounded-[inherit]", "after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20"),
+	thumbnail: cn(preview$1.thumbnail, "max-w-44")
+};
+const slider = {
+	...slider$1,
+	track: cn(slider$1.track, "ring-1 ring-black/5")
+};
+const popup = {
+	...popup$1,
+	volume: cn(popup$1.popover, "[--media-popover-side-offset:0.5rem] p-1 bg-transparent")
+};
+//#endregion
+export { controls, error, popup, preview, root, slider };
+//# sourceMappingURL=video.tailwind.js.map

package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { poster } from \"./components/poster.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black overflow-clip\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]\": !isShadowDOM\n}, \"[--media-video-border-radius:var(--media-border-radius,0.75rem)]\", \"[--media-controls-padding:0.375rem]\", \"[--media-controls-transition-duration:100ms]\", \"[--media-controls-transition-delay:0ms]\", \"[--media-controls-transition-timing-function:ease-out]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-error-dialog-transition-timing-function:ease-out]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]\", \"[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-[translate]\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\"\n] : [], \"[&:fullscreen]:[--media-border-radius:0]\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain\": isShadowDOM\n});\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-(--media-controls-padding) pb-(--media-controls-padding) gap-2\", \"[color:var(--media-color-primary,oklch(1_0_0))] z-10\", \"peer-data-open/error:hidden\", \"ease-(--media-controls-transition-timing-function)\", \"duration-(--media-controls-transition-duration)\", \"delay-(--media-controls-transition-delay)\", \"[@media(pointer:fine)]:will-change-[translate,filter,opacity]\", \"[@media(pointer:fine)]:transition-[translate,filter,opacity]\", \"[@media(pointer:coarse)]:will-change-[translate,opacity]\", \"[@media(pointer:coarse)]:transition-[translate,opacity]\", \"not-data-visible:opacity-0 not-data-visible:pointer-events-none\", \"motion-safe:not-data-visible:translate-y-full\", \"[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst error = {\n\t...error$1,\n\troot: cn(error$1.root, \"pointer-events-none outline-none\"),\n\tdialog: cn(error$1.dialog, \"pointer-events-auto\"),\n\ttitle: cn(error$1.title, \"text-lg\")\n};\nconst preview = {\n\t...preview$1,\n\troot: cn(\"absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2\", \"opacity-0 scale-80 blur-sm origin-bottom\", \"transition-[scale,opacity,filter] duration-150\", \"group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none\", \"[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm\", \"[&:has([role=img][data-loading])]:max-h-24\", preview$1.root),\n\tthumbnailWrapper: cn(preview$1.thumbnailWrapper, \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20\"),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-44\")\n};\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"ring-1 ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(popup$1.popover, \"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, poster, preview, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,0BAA0B,+EAA+E,4FAA4F;CAC7O,4RAA4R;CAC5R,wMAAwM,CAAC;CACzM,EAAE,oEAAoE,uCAAuC,gDAAgD,2CAA2C,0DAA0D,oDAAoD,iDAAiD,8DAA8D,6CAA6C,uDAAuD,iEAAiE,6DAA6D,yDAAyD,8GAA8G,iHAAiH,mHAAmH,uGAAuG,qCAAqC,qFAAqF,8EAA8E,uEAAuE,CAAC,cAAc;CACv5C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,WAAW,GAAG,YAAY,+BAA+B,0EAA0E,wDAAwD,+BAA+B,sDAAsD,mDAAmD,6CAA6C,iEAAiE,gEAAgE,4DAA4D,2DAA2D,mEAAmE,iDAAiD,+DAA+D,gEAAgE,yBAAyB;AAC13B,MAAM,QAAQ;CACb,GAAG;CACH,MAAM,GAAG,QAAQ,MAAM,mCAAmC;CAC1D,QAAQ,GAAG,QAAQ,QAAQ,sBAAsB;CACjD,OAAO,GAAG,QAAQ,OAAO,UAAU;CACnC;AACD,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,sFAAsF,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,UAAU,KAAK;CAC/e,kBAAkB,GAAG,UAAU,kBAAkB,wDAAwD,wEAAwE;CACjL,WAAW,GAAG,UAAU,WAAW,WAAW;CAC9C;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,sBAAsB;CAChD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,0DAA0D;CACtF"}

package/dist/default/skins/dist/default/shared/tailwind/icon-state.js ADDED Viewed

@@ -0,0 +1,34 @@
+//#region ../skins/dist/default/shared/tailwind/icon-state.js
+const iconState = {
+	play: {
+		button: "group",
+		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
+		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
+		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
+	},
+	mute: {
+		button: "group",
+		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
+		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
+		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
+	},
+	fullscreen: {
+		button: "group",
+		enter: "hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100",
+		exit: "hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100"
+	},
+	captions: {
+		button: "group",
+		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
+		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
+	},
+	pip: {
+		button: "group",
+		off: "hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100",
+		on: "hidden opacity-0 group-data-pip:block group-data-pip:opacity-100"
+	}
+};
+//#endregion
+export { iconState };
+//# sourceMappingURL=icon-state.js.map

package/dist/default/skins/dist/default/shared/tailwind/icon-state.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t},\n\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-pip:block group-data-pip:opacity-100\"\n\t}\n};\n\n//#endregion\nexport { iconState };\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}

package/dist/default/ui/alert-dialog/alert-dialog-root.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
+import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { AlertDialogContextProvider } from "./context.js";
-import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { createAlertDialog, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";

package/dist/default/ui/buffering-indicator/buffering-indicator.js CHANGED Viewed

@@ -1,6 +1,7 @@
 'use client';
 import { usePlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { renderElement } from "../../utils/use-render.js";
 import { selectPlayback } from "@videojs/core/dom";
 import { forwardRef, useState, useSyncExternalStore } from "react";
@@ -29,6 +30,7 @@ const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps
 	const { render, className, style, delay, ...elementProps } = componentProps;
 	const playback = usePlayer(selectPlayback);
 	const [core] = useState(() => new BufferingIndicatorCore());
+	useDestroy(core);
 	core.setProps({ delay });
 	if (playback) core.update(playback);
 	const state = useSyncExternalStore((cb) => core.state.subscribe(cb), () => core.state.current, () => core.state.current);

package/dist/default/ui/buffering-indicator/buffering-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["'use client';\n\nimport { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n BufferingIndicatorCore.Props {}\n\n/*\n Displays a buffering indicator when media is waiting for data.\n \n Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n \n @example\n * ```tsx\n * <BufferingIndicator />\n \n <BufferingIndicator delay={1000} />\n \n <BufferingIndicator\n * render={(props, state) => (\n * <div {...props}>{state.visible && <Spinner />}</div>\n * )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n componentProps: BufferingIndicatorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, delay, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new BufferingIndicatorCore());\n core.setProps({ delay });\n\n if (playback) core.update(playback);\n\n const state = useSyncExternalStore(\n (cb) => core.state.subscribe(cb),\n () => core.state.current,\n () => core.state.current\n );\n\n if (!playback) {\n if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n return null;\n }\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: BufferingIndicatorDataAttrs,\n ref: [forwardedRef],\n props: [elementProps],\n }\n );\n});\n\nexport namespace BufferingIndicator {\n export type Props = BufferingIndicatorProps;\n export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA~~,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,wBAAwB,CAAC;AAC3D,MAAK,SAAS,EAAE,OAAO,CAAC;AAExB,KAAI,SAAU,MAAK,OAAO,SAAS;CAEnC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,GAAG,QAC1B,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,KAAI,CAAC,SAEH,QAAO;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
1	+ {"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["'use client';\n\nimport { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n BufferingIndicatorCore.Props {}\n\n/*\n Displays a buffering indicator when media is waiting for data.\n \n Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n \n @example\n * ```tsx\n * <BufferingIndicator />\n \n <BufferingIndicator delay={1000} />\n \n <BufferingIndicator\n * render={(props, state) => (\n * <div {...props}>{state.visible && <Spinner />}</div>\n * )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n componentProps: BufferingIndicatorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, delay, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new BufferingIndicatorCore());\n useDestroy(core);\n core.setProps({ delay });\n\n if (playback) core.update(playback);\n\n const state = useSyncExternalStore(\n (cb) => core.state.subscribe(cb),\n () => core.state.current,\n () => core.state.current\n );\n\n if (!playback) {\n if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n return null;\n }\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: BufferingIndicatorDataAttrs,\n ref: [forwardedRef],\n props: [elementProps],\n }\n );\n});\n\nexport namespace BufferingIndicator {\n export type Props = BufferingIndicatorProps;\n export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,wBAAwB,CAAC;AAC3D,YAAW,KAAK;AAChB,MAAK,SAAS,EAAE,OAAO,CAAC;AAExB,KAAI,SAAU,MAAK,OAAO,SAAS;CAEnC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,GAAG,QAC1B,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,KAAI,CAAC,SAEH,QAAO;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}

package/dist/default/ui/hooks/use-slider.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { useDestroy } from "../../utils/use-destroy.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useForceRender } from "../../utils/use-force-render.js";
 import { createSlider } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
@@ -55,6 +55,7 @@ function useSlider(options) {
 			thumbElementRef.current = element;
 		}, []),
 		rootProps: slider.rootProps,
+		rootStyle: slider.rootStyle,
 		thumbProps: slider.thumbProps
 	};
 }

package/dist/default/ui/hooks/use-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n createSlider,\n type SliderApi,\n type SliderOptions,\n type SliderRootProps,\n type SliderThumbProps,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n extends Pick<\n SliderOptions,\n \| 'getPercent'\n \| 'getStepPercent'\n \| 'getLargeStepPercent'\n \| 'commitThrottle'\n \| 'onValueChange'\n \| 'onValueCommit'\n \| 'onDragStart'\n \| 'onDragEnd'\n > {\n computeState: (input: SliderInput) => State;\n orientation?: 'horizontal' \| 'vertical' \| undefined;\n disabled?: boolean \| undefined;\n /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. /\n adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) \| undefined;\n /* Compute CSS variable map from the (possibly alignment-adjusted) state. /\n getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n state: State;\n cssVars: Record<string, string>;\n rootRef: React.RefCallback<HTMLElement>;\n thumbRef: React.RefCallback<HTMLElement>;\n rootProps: SliderRootProps;\n thumbProps: SliderThumbProps;\n}\n\n/\n Manages slider input lifecycle for React.\n \n Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n const optionsRef = useLatestRef(options);\n\n const rootElementRef = useRef<HTMLElement \| null>(null);\n const thumbElementRef = useRef<HTMLElement \| null>(null);\n const forceRender = useForceRender();\n\n // Lazy-init the slider handle. Stable across re-renders.\n const [slider] = useState<SliderApi>(() => {\n const stableOptions: SliderOptions = {\n getElement: () => rootElementRef.current!,\n getThumbElement: () => thumbElementRef.current,\n getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n isDisabled: () => optionsRef.current.disabled ?? false,\n getPercent: () => optionsRef.current.getPercent(),\n getStepPercent: () => optionsRef.current.getStepPercent(),\n getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n commitThrottle: optionsRef.current.commitThrottle,\n adjustPercent: optionsRef.current.adjustPercent,\n onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n onDragStart: () => optionsRef.current.onDragStart?.(),\n onDragEnd: () => optionsRef.current.onDragEnd?.(),\n };\n\n return createSlider(stableOptions);\n });\n\n useDestroy(slider);\n\n // Subscribe to slider input state.\n const input = useSnapshot(slider.input);\n\n // Compute derived state from input + caller-provided projection.\n const state = options.computeState(input);\n\n // Force a synchronous re-render after mount so edge thumb alignment\n // can read DOM measurements from the now-populated element refs.\n useLayoutEffect(() => {\n if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n forceRender();\n }\n }, [state.thumbAlignment]);\n\n // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n // Ref callbacks for root and thumb elements.\n const rootRef = useCallback((element: HTMLElement \| null) => {\n rootElementRef.current = element;\n }, []);\n\n const thumbRef = useCallback((element: HTMLElement \| null) => {\n thumbElementRef.current = element;\n }, []);\n\n return {\n state,\n cssVars,\n rootRef,\n thumbRef,\n rootProps: slider.rootProps,\n thumbProps: slider.thumbProps,\n };\n}\n\nexport namespace useSlider {\n export type Options = UseSliderOptions;\n export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;~~AAsDA~~,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,QAAQ;CAExC,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,CAAC,UAAU,eAA0B;AAkBzC,SAAO,aAjB8B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,QAAQ,GAAG;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,sBAAsB,WAAW,QAAQ,gBAAgB;GACzD,2BAA2B,WAAW,QAAQ,qBAAqB;GACnE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,mBAAmB,WAAW,QAAQ,eAAe;GACrD,iBAAiB,WAAW,QAAQ,aAAa;GAClD,CAEiC;GAClC;AAEF,YAAW,OAAO;CAGlB,MAAM,QAAQ,YAAY,OAAO,MAAM;CAGvC,MAAM,QAAQ,QAAQ,aAAa,MAAM;AAIzC,uBAAsB;AACpB,MAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,QAC/E,cAAa;IAEd,CAAC,MAAM,eAAe,CAAC;AAc1B,QAAO;EACL;EACA,SAbc,QAAQ,WAAW,OAAO,mBAAmB,MAAM,CAAC;EAclE,SAXc,aAAa,YAAgC;AAC3D,kBAAe,UAAU;KACxB,EAAE,CAAC;EAUJ,UARe,aAAa,YAAgC;AAC5D,mBAAgB,UAAU;KACzB,EAAE,CAAC;EAOJ,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB"}
1	+ {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n createSlider,\n type SliderApi,\n type SliderOptions,\n type SliderRootProps,\n type SliderRootStyle,\n type SliderThumbProps,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n extends Pick<\n SliderOptions,\n \| 'getPercent'\n \| 'getStepPercent'\n \| 'getLargeStepPercent'\n \| 'commitThrottle'\n \| 'onValueChange'\n \| 'onValueCommit'\n \| 'onDragStart'\n \| 'onDragEnd'\n > {\n computeState: (input: SliderInput) => State;\n orientation?: 'horizontal' \| 'vertical' \| undefined;\n disabled?: boolean \| undefined;\n /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. /\n adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) \| undefined;\n /* Compute CSS variable map from the (possibly alignment-adjusted) state. /\n getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n state: State;\n cssVars: Record<string, string>;\n rootRef: React.RefCallback<HTMLElement>;\n thumbRef: React.RefCallback<HTMLElement>;\n rootProps: SliderRootProps;\n rootStyle: SliderRootStyle;\n thumbProps: SliderThumbProps;\n}\n\n/\n Manages slider input lifecycle for React.\n \n Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n const optionsRef = useLatestRef(options);\n\n const rootElementRef = useRef<HTMLElement \| null>(null);\n const thumbElementRef = useRef<HTMLElement \| null>(null);\n const forceRender = useForceRender();\n\n // Lazy-init the slider handle. Stable across re-renders.\n const [slider] = useState<SliderApi>(() => {\n const stableOptions: SliderOptions = {\n getElement: () => rootElementRef.current!,\n getThumbElement: () => thumbElementRef.current,\n getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n isDisabled: () => optionsRef.current.disabled ?? false,\n getPercent: () => optionsRef.current.getPercent(),\n getStepPercent: () => optionsRef.current.getStepPercent(),\n getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n commitThrottle: optionsRef.current.commitThrottle,\n adjustPercent: optionsRef.current.adjustPercent,\n onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n onDragStart: () => optionsRef.current.onDragStart?.(),\n onDragEnd: () => optionsRef.current.onDragEnd?.(),\n };\n\n return createSlider(stableOptions);\n });\n\n useDestroy(slider);\n\n // Subscribe to slider input state.\n const input = useSnapshot(slider.input);\n\n // Compute derived state from input + caller-provided projection.\n const state = options.computeState(input);\n\n // Force a synchronous re-render after mount so edge thumb alignment\n // can read DOM measurements from the now-populated element refs.\n useLayoutEffect(() => {\n if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n forceRender();\n }\n }, [state.thumbAlignment]);\n\n // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n // Ref callbacks for root and thumb elements.\n const rootRef = useCallback((element: HTMLElement \| null) => {\n rootElementRef.current = element;\n }, []);\n\n const thumbRef = useCallback((element: HTMLElement \| null) => {\n thumbElementRef.current = element;\n }, []);\n\n return {\n state,\n cssVars,\n rootRef,\n thumbRef,\n rootProps: slider.rootProps,\n rootStyle: slider.rootStyle,\n thumbProps: slider.thumbProps,\n };\n}\n\nexport namespace useSlider {\n export type Options = UseSliderOptions;\n export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,QAAQ;CAExC,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,CAAC,UAAU,eAA0B;AAkBzC,SAAO,aAjB8B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,QAAQ,GAAG;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,sBAAsB,WAAW,QAAQ,gBAAgB;GACzD,2BAA2B,WAAW,QAAQ,qBAAqB;GACnE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,mBAAmB,WAAW,QAAQ,eAAe;GACrD,iBAAiB,WAAW,QAAQ,aAAa;GAClD,CAEiC;GAClC;AAEF,YAAW,OAAO;CAGlB,MAAM,QAAQ,YAAY,OAAO,MAAM;CAGvC,MAAM,QAAQ,QAAQ,aAAa,MAAM;AAIzC,uBAAsB;AACpB,MAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,QAC/E,cAAa;IAEd,CAAC,MAAM,eAAe,CAAC;AAc1B,QAAO;EACL;EACA,SAbc,QAAQ,WAAW,OAAO,mBAAmB,MAAM,CAAC;EAclE,SAXc,aAAa,YAAgC;AAC3D,kBAAe,UAAU;KACxB,EAAE,CAAC;EAUJ,UARe,aAAa,YAAgC;AAC5D,mBAAgB,UAAU;KACzB,EAAE,CAAC;EAOJ,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB"}

package/dist/default/ui/popover/popover-popup.js CHANGED Viewed

@@ -3,7 +3,7 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { usePopoverContext } from "./context.js";
-import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
@@ -41,14 +41,22 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 			const triggerEl = popover.triggerElement;
 			const popupEl = internalRef.current;
 			if (!triggerEl || !popupEl) return;
-			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
 		}
 		measure();
+		const triggerEl = popover.triggerElement;
+		const popupEl = internalRef.current;
 		let rafId = 0;
 		function reposition() {
 			cancelAnimationFrame(rafId);
 			rafId = requestAnimationFrame(measure);
 		}
+		reposition();
+		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+			reposition();
+		}) : null;
+		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
+		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
 		window.addEventListener("scroll", reposition, {
 			capture: true,
 			passive: true
@@ -56,6 +64,7 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 		window.addEventListener("resize", reposition);
 		return () => {
 			cancelAnimationFrame(rafId);
+			resizeObserver?.disconnect();
 			window.removeEventListener("scroll", reposition, true);
 			window.removeEventListener("resize", reposition);
 		};

package/dist/default/ui/popover/popover-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n popover.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = popupEl~~.getBoundingClientRect(~~);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl);\n\n setManualStyle(\n getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n );\n }\n\n measure();\n\n // ~~Recompute~~ on ~~scroll/resize so the~~ popover ~~tracks~~ ~~its~~ ~~trigger.\~~n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,~~uBAAuB~~,~~EAC5B,~~SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;~~EAGT~~,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;~~AAGxC~~,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
1	+ {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n popover.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = getPopupPositionRect(popupEl);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl);\n\n setManualStyle(\n getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n );\n }\n\n measure();\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the popover has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

package/dist/default/ui/popover/popover-root.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { useDestroy } from "../../utils/use-destroy.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { PopoverContextProvider } from "./context.js";
 import { createPopover, createTransition } from "@videojs/core/dom";

package/dist/default/ui/slider/slider-root.js CHANGED Viewed

@@ -22,7 +22,7 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 		disabled,
 		thumbAlignment
 	});
-	const { state, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, thumbProps } = useSlider({
+	const { state, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			return core.getSliderState(value);
@@ -58,7 +58,10 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 			stateAttrMap: SliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
-				{ style: cssVars },
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
 				rootProps,
 				elementProps
 			]

package/dist/default/ui/slider/slider-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n onValueChange?: ((value: number) => void) \| undefined;\n onValueCommit?: ((value: number) => void) \| undefined;\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n componentProps: SliderRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const {\n render,\n className,\n style,\n label,\n min,\n max,\n step,\n largeStep,\n orientation,\n disabled,\n thumbAlignment,\n value = 0,\n onValueChange,\n onValueCommit,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const [core] = useState(() => new SliderCore());\n core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n const {\n state,\n cssVars,\n rootRef,\n thumbRef: sliderThumbRef,\n rootProps,\n thumbProps,\n } = useSlider({\n computeState: (input) => {\n core.setInput(input);\n return core.getSliderState(value);\n },\n getPercent: () => core.percentFromValue(value),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n onDragStart,\n onDragEnd,\n });\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef: sliderThumbRef,\n thumbProps,\n stateAttrMap: SliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState),\n formatValue: undefined,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: SliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: cssVars }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n});\n\nexport namespace SliderRoot {\n export type Props = SliderRootProps;\n export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAC/C,MAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAE1F,MAAM,EACJ,OACA,SACA,SACA,UAAU,gBACV,WACA,eACE,UAAU;EACZ,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,UAAO,KAAK,eAAe,MAAM;;EAEnC,kBAAkB,KAAK,iBAAiB,MAAM;EAC9C,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAY;GACrD,aAAa;GACd;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO,~~SAAS~~;IAAE;IAAW;IAAa;~~GACrD~~,CACF;GACc;EAEnB"}
1	+ {"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n onValueChange?: ((value: number) => void) \| undefined;\n onValueCommit?: ((value: number) => void) \| undefined;\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n componentProps: SliderRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const {\n render,\n className,\n style,\n label,\n min,\n max,\n step,\n largeStep,\n orientation,\n disabled,\n thumbAlignment,\n value = 0,\n onValueChange,\n onValueCommit,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const [core] = useState(() => new SliderCore());\n core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n const {\n state,\n cssVars,\n rootRef,\n thumbRef: sliderThumbRef,\n rootProps,\n rootStyle,\n thumbProps,\n } = useSlider({\n computeState: (input) => {\n core.setInput(input);\n return core.getSliderState(value);\n },\n getPercent: () => core.percentFromValue(value),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n onDragStart,\n onDragEnd,\n });\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef: sliderThumbRef,\n thumbProps,\n stateAttrMap: SliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState),\n formatValue: undefined,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: SliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n});\n\nexport namespace SliderRoot {\n export type Props = SliderRootProps;\n export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAC/C,MAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAE1F,MAAM,EACJ,OACA,SACA,SACA,UAAU,gBACV,WACA,WACA,eACE,UAAU;EACZ,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,UAAO,KAAK,eAAe,MAAM;;EAEnC,kBAAkB,KAAK,iBAAiB,MAAM;EAC9C,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAY;GACrD,aAAa;GACd;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAEnB"}

package/dist/default/ui/thumbnail/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { Thumbnail } from "./thumbnail.js";
+export { Thumbnail };

package/dist/default/ui/time-slider/time-slider-root.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
 import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "../slider/context.js";
 import { getTimeSliderCSSVars, selectBuffer, selectTime } from "@videojs/core/dom";
@@ -31,7 +31,7 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		...buffer
 	} : null);
 	const duration = time?.duration ?? 0;
-	const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider({
+	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			if (!time || !buffer) core.setMedia({
@@ -58,7 +58,7 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		getCSSVars: getTimeSliderCSSVars,
 		onValueCommit: (percent) => {
 			const media = mediaRef.current;
-			if (media) media.seek(core.valueFromPercent(percent));
+			if (media) media.seek(core.rawValueFromPercent(percent));
 		},
 		onDragStart,
 		onDragEnd
@@ -83,7 +83,10 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			stateAttrMap: TimeSliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
-				{ style: cssVars },
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
 				rootProps,
 				elementProps
 			]

package/dist/default/ui/time-slider/time-slider-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const [core] = useState(() => new TimeSliderCore());\n core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n const duration = time?.duration ?? 0;\n\n const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n if (!time \|\| !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n commitThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n if (media) media.seek(core.~~valueFromPercent~~(percent));\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n formatValue: (value) => formatTime(value, duration),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: cssVars }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,eAAe,UAAgC;~~EACnG~~,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,~~iBAAiB~~,QAAQ,CAAC;;~~EAEvD~~;EACA;EACD,CAAC;AAEF,KAAI,CAAC,KAEH,QAAO;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO,~~SAAS~~;IAAE;IAAW;IAAa;~~GACrD~~,CACF;GACc;EAGtB"}
1	+ {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const [core] = useState(() => new TimeSliderCore());\n core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n const duration = time?.duration ?? 0;\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n if (!time \|\| !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n commitThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n if (media) media.seek(core.rawValueFromPercent(percent));\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n formatValue: (value) => formatTime(value, duration),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,KAEH,QAAO;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}

package/dist/default/ui/tooltip/tooltip-popup.js CHANGED Viewed

@@ -3,7 +3,7 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useTooltipContext } from "./context.js";
-import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { TooltipCSSVars } from "@videojs/core";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
@@ -42,14 +42,22 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 			const triggerEl = tooltip.triggerElement;
 			const popupEl = internalRef.current;
 			if (!triggerEl || !popupEl) return;
-			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
 		}
 		measure();
+		const triggerEl = tooltip.triggerElement;
+		const popupEl = internalRef.current;
 		let rafId = 0;
 		function reposition() {
 			cancelAnimationFrame(rafId);
 			rafId = requestAnimationFrame(measure);
 		}
+		reposition();
+		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+			reposition();
+		}) : null;
+		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
+		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
 		window.addEventListener("scroll", reposition, {
 			capture: true,
 			passive: true
@@ -57,6 +65,7 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 		window.addEventListener("resize", reposition);
 		return () => {
 			cancelAnimationFrame(rafId);
+			resizeObserver?.disconnect();
 			window.removeEventListener("scroll", reposition, true);
 			window.removeEventListener("resize", reposition);
 		};

package/dist/default/ui/tooltip/tooltip-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [tooltip, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n undefined,\n undefined,\n undefined,\n undefined,\n TooltipCSSVars\n );\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = popupEl~~.getBoundingClientRect(~~);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n setManualStyle(\n getAnchorPositionStyle(\n anchorName,\n posOpts,\n triggerRect,\n popupRect,\n boundaryRect,\n offsets,\n TooltipCSSVars\n ) as CSSProperties\n );\n }\n\n measure();\n\n // ~~Recompute~~ on ~~scroll/resize so the~~ tooltip ~~tracks~~ ~~its~~ ~~trigger.\~~n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, tooltip]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,QAAQ,~~uBAAuB~~,~~EAC5B,~~SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;~~EAGT~~,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;~~AAGxC~~,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
1	+ {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [tooltip, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n undefined,\n undefined,\n undefined,\n undefined,\n TooltipCSSVars\n );\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = getPopupPositionRect(popupEl);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n setManualStyle(\n getAnchorPositionStyle(\n anchorName,\n posOpts,\n triggerRect,\n popupRect,\n boundaryRect,\n offsets,\n TooltipCSSVars\n ) as CSSProperties\n );\n }\n\n measure();\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the tooltip has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, tooltip]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

package/dist/default/ui/tooltip/tooltip-root.js CHANGED Viewed

@@ -1,6 +1,7 @@
 'use client';
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { TooltipContextProvider } from "./context.js";
 import { useTooltipGroup } from "./group-context.js";
@@ -50,7 +51,7 @@ function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultPr
 		if (controlledOpen) tooltip.open();
 		else tooltip.close();
 	}, [controlledOpen, tooltip]);
-	useEffect(() => () => tooltip.destroy(), [tooltip]);
+	useDestroy(tooltip);
 	const input = useSnapshot(tooltip.input);
 	core.setInput(input);
 	return /* @__PURE__ */ jsx(TooltipContextProvider, {