@videojs/react 10.0.0-beta.26 → 10.0.0-beta.27

package/dist/dev/ui/input-indicator/use-rendered-indicator-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["'use client';\n\nimport { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n  replayOnUpdate?: boolean | undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n  currentState: State,\n  options: RenderedIndicatorOptions = {}\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const currentStateRef = useRef(currentState);\n  const snapshotRef = useRef(currentState);\n  const [transition] = useState(() => createTransition());\n  useDestroy(transition);\n  currentStateRef.current = currentState;\n\n  const transitionState = useSyncExternalStore(\n    (callback) => transition.state.subscribe(callback),\n    () => transition.state.current,\n    () => transition.state.current\n  );\n\n  const { generation, open } = currentState;\n\n  useLayoutEffect(() => {\n    if (open) {\n      const nextState = currentStateRef.current;\n      if (nextState.generation !== generation) return;\n\n      snapshotRef.current = nextState;\n      const transitionState = transition.state.current;\n      if (!transitionState.active || options.replayOnUpdate !== false) {\n        void transition.open(elementRef.current);\n      } else if (transitionState.status === 'ending') {\n        transition.cancel();\n      }\n      return;\n    }\n\n    const { active, status } = transition.state.current;\n    if (active && status !== 'ending') {\n      void transition.close(elementRef.current);\n    }\n  }, [generation, open, options.replayOnUpdate, transition]);\n\n  return {\n    elementRef,\n    present: isIndicatorPresent(currentState, transitionState),\n    state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n  };\n}\n"],"mappings":";;;;;;AAYA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;GACzC,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;GAEpB;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;EAC5C,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}

package/dist/dev/ui/menu/context.d.ts

@@ -4,6 +4,7 @@ import { MenuCore, MenuState, StateAttrMap as StateAttrMap$1 } from "@videojs/co
 interface MenuContextValue {
   core: MenuCore;
   menu: MenuApi;
+  parent: MenuContextValue | null;
   state: MenuState;
   preferredSide: MenuState['side'];
   setPositionedSide: (side: MenuState['side']) => void;
@@ -12,16 +13,6 @@ interface MenuContextValue {
   anchorName: string;
   boundary: PositioningBoundary;
   container: MediaContainer | null;
-  /** ID of the currently visible submenu, or null when at root view. */
-  activeSubMenuId: string | null;
-  /** Triggerer ID of the active submenu entry (for focus restoration on pop). */
-  activeSubMenuTriggerId: string | null;
-  /** Direction of the most recent navigation. */
-  navigationDirection: 'forward' | 'back';
-  /** Push a submenu onto the navigation stack. */
-  push: (menuId: string, triggerId: string) => void;
-  /** Pop the current submenu from the navigation stack. */
-  pop: () => void;
 }
 declare function useMenuContext(): MenuContextValue;
 declare function useOptionalMenuContext(): MenuContextValue | null;

package/dist/dev/ui/menu/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"mappings":";;;UAQiB;EACf,MAAM;EACN,MAAM;EACN,OAAO;EACP,eAAe;EACf,oBAAoB,MAAM;EAC1B,cAAc,eAAa;EAC3B;EACA;EACA,UAAU;EACV,WAAW;;EAEX;;EAEA;;EAEA;;EAEA,OAAO,gBAAgB;;EAEvB;;iBAOc,kBAAkB;iBAMlB,0BAA0B"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"mappings":";;;UAMiB;EACf,MAAM;EACN,MAAM;EACN,QAAQ;EACR,OAAO;EACP,eAAe;EACf,oBAAoB,MAAM;EAC1B,cAAc,eAAa;EAC3B;EACA;EACA,UAAU;EACV,WAAW;;iBAOG,kBAAkB;iBAMlB,0BAA0B"}

package/dist/dev/ui/menu/context.js

@@ -11,11 +11,6 @@ function useMenuContext() {
 function useOptionalMenuContext() {
 	return useContext(MenuContext);
 }
-const SubMenuContext = createContext(null);
-const SubMenuContextProvider = SubMenuContext.Provider;
-function useSubMenuContext() {
-	return useContext(SubMenuContext);
-}
 const MenuGroupContext = createContext(null);
 const MenuGroupContextProvider = MenuGroupContext.Provider;
 function useMenuGroupContext() {
@@ -33,12 +28,7 @@ const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;
 function useOptionalMenuTriggerChildContext() {
 	return useContext(MenuTriggerChildContext);
 }
-const MenuItemSettingContext = createContext(null);
-const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;
-function useOptionalMenuItemSettingContext() {
-	return useContext(MenuItemSettingContext);
-}
 //#endregion
-export { MenuContextProvider, MenuGroupContextProvider, MenuItemSettingContextProvider, MenuRadioGroupContextProvider, MenuTriggerChildContextProvider, SubMenuContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuItemSettingContext, useOptionalMenuTriggerChildContext, useSubMenuContext };
+export { MenuContextProvider, MenuGroupContextProvider, MenuRadioGroupContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuTriggerChildContext };
 
 //# sourceMappingURL=context.js.map

package/dist/dev/ui/menu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  /** ID of the currently visible submenu, or null when at root view. */\n  activeSubMenuId: string | null;\n  /** Triggerer ID of the active submenu entry (for focus restoration on pop). */\n  activeSubMenuTriggerId: string | null;\n  /** Direction of the most recent navigation. */\n  navigationDirection: 'forward' | 'back';\n  /** Push a submenu onto the navigation stack. */\n  push: (menuId: string, triggerId: string) => void;\n  /** Pop the current submenu from the navigation stack. */\n  pop: () => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-menu identity context — provided by a nested Menu.Root so child parts\n// (Trigger, Content) can read the submenu ID and access the parent menu for\n// push/pop and item registration.\n// ---------------------------------------------------------------------------\n\nexport interface SubMenuContextValue {\n  /** Stable ID for this submenu (matches the contentId of the nested Root). */\n  subMenuId: string;\n  /** The parent menu's context — used by Trigger to register and push. */\n  parentMenu: MenuContextValue;\n}\n\nconst SubMenuContext = createContext<SubMenuContextValue | null>(null);\n\nexport const SubMenuContextProvider = SubMenuContext.Provider;\n\nexport function useSubMenuContext(): SubMenuContextValue | null {\n  return useContext(SubMenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n\n// ---------------------------------------------------------------------------\n// Menu item setting context — provided by Menu.Item or Menu.Trigger when `type`\n// is set; consumed by Menu.ItemValue.\n// ---------------------------------------------------------------------------\n\nexport interface MenuItemSettingContextValue {\n  type: MenuItemSettingType;\n  label: string;\n  availability: 'available' | 'unavailable';\n}\n\nconst MenuItemSettingContext = createContext<MenuItemSettingContextValue | null>(null);\n\nexport const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;\n\nexport function useMenuItemSettingContext(): MenuItemSettingContextValue {\n  const ctx = useContext(MenuItemSettingContext);\n  if (!ctx) throw new Error('Menu.ItemValue must be used within a Menu.Item or Menu.Trigger with `type` set');\n  return ctx;\n}\n\nexport function useOptionalMenuItemSettingContext(): MenuItemSettingContextValue | null {\n  return useContext(MenuItemSettingContext);\n}\n"],"mappings":";;;AA+BA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAeA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAgD;CAC9D,OAAO,WAAW,cAAc;AAClC;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C;AAaA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,MAAa,iCAAiC,uBAAuB;AAQrE,SAAgB,oCAAwE;CACtF,OAAO,WAAW,sBAAsB;AAC1C"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;;AAoBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}

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

@@ -1,20 +1,17 @@
-import { MenuBack, MenuBackProps } from "./menu-back.js";
+import { MenuRadioItem, MenuRadioItemProps } from "./menu-radio-item.js";
 import { MenuCheckboxItem, MenuCheckboxItemProps } from "./menu-checkbox-item.js";
 import { MenuContent, MenuContentProps } from "./menu-content.js";
 import { MenuGroup, MenuGroupProps } from "./menu-group.js";
 import { MenuGroupLabel, MenuGroupLabelProps } from "./menu-group-label.js";
 import { MenuItem, MenuItemProps } from "./menu-item.js";
 import { MenuItemIndicator, MenuItemIndicatorProps } from "./menu-item-indicator.js";
-import { MenuItemValue, MenuItemValueProps } from "./menu-item-value.js";
 import { MenuRadioGroup, MenuRadioGroupProps } from "./menu-radio-group.js";
-import { MenuRadioItem, MenuRadioItemProps } from "./menu-radio-item.js";
 import { MenuRoot, MenuRootProps } from "./menu-root.js";
 import { MenuSeparator, MenuSeparatorProps } from "./menu-separator.js";
 import { MenuTrigger, MenuTriggerProps } from "./menu-trigger.js";
-import { MenuView, MenuViewProps } from "./menu-view.js";
 declare namespace index_parts_d_exports {
-  export { MenuBack as Back, MenuBackProps as BackProps, MenuCheckboxItem as CheckboxItem, MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuGroupLabelProps as GroupLabelProps, MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemIndicatorProps as ItemIndicatorProps, MenuItemProps as ItemProps, MenuItemValue as ItemValue, MenuItemValueProps as ItemValueProps, MenuRadioGroup as RadioGroup, MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, MenuRadioItemProps as RadioItemProps, MenuRoot as Root, MenuRootProps as RootProps, MenuSeparator as Separator, MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, MenuTriggerProps as TriggerProps, MenuView as View, MenuViewProps as ViewProps };
+  export { MenuCheckboxItem as CheckboxItem, MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuGroupLabelProps as GroupLabelProps, MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemIndicatorProps as ItemIndicatorProps, MenuItemProps as ItemProps, MenuRadioGroup as RadioGroup, MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, MenuRadioItemProps as RadioItemProps, MenuRoot as Root, MenuRootProps as RootProps, MenuSeparator as Separator, MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, MenuTriggerProps as TriggerProps };
 }
 //#endregion
-export { MenuBack as Back, type MenuBackProps as BackProps, MenuCheckboxItem as CheckboxItem, type MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, type MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps, type MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, type MenuItemIndicatorProps as ItemIndicatorProps, type MenuItemProps as ItemProps, MenuItemValue as ItemValue, type MenuItemValueProps as ItemValueProps, MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps, MenuRoot as Root, type MenuRootProps as RootProps, MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps, MenuView as View, type MenuViewProps as ViewProps, index_parts_d_exports };
+export { MenuCheckboxItem as CheckboxItem, type MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, type MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps, type MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, type MenuItemIndicatorProps as ItemIndicatorProps, type MenuItemProps as ItemProps, MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps, MenuRoot as Root, type MenuRootProps as RootProps, MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -1,36 +1,30 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { MenuBack } from "./menu-back.js";
+import { MenuRadioGroup } from "./menu-radio-group.js";
 import { MenuCheckboxItem } from "./menu-checkbox-item.js";
 import { MenuContent } from "./menu-content.js";
 import { MenuGroup } from "./menu-group.js";
 import { MenuGroupLabel } from "./menu-group-label.js";
 import { MenuItem } from "./menu-item.js";
 import { MenuItemIndicator } from "./menu-item-indicator.js";
-import { MenuItemValue } from "./menu-item-value.js";
-import { MenuRadioGroup } from "./menu-radio-group.js";
 import { MenuRadioItem } from "./menu-radio-item.js";
 import { MenuRoot } from "./menu-root.js";
 import { MenuSeparator } from "./menu-separator.js";
 import { MenuTrigger } from "./menu-trigger.js";
-import { MenuView } from "./menu-view.js";
 //#region src/ui/menu/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
-	Back: () => MenuBack,
 	CheckboxItem: () => MenuCheckboxItem,
 	Content: () => MenuContent,
 	Group: () => MenuGroup,
 	GroupLabel: () => MenuGroupLabel,
 	Item: () => MenuItem,
 	ItemIndicator: () => MenuItemIndicator,
-	ItemValue: () => MenuItemValue,
 	RadioGroup: () => MenuRadioGroup,
 	RadioItem: () => MenuRadioItem,
 	Root: () => MenuRoot,
 	Separator: () => MenuSeparator,
-	Trigger: () => MenuTrigger,
-	View: () => MenuView
+	Trigger: () => MenuTrigger
 });
 //#endregion
-export { MenuBack as Back, MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemValue as ItemValue, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, MenuView as View, index_parts_exports };
+export { MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export { MenuBack as Back, type MenuBackProps as BackProps } from './menu-back';\nexport {\n  MenuCheckboxItem as CheckboxItem,\n  type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuItemValue as ItemValue, type MenuItemValueProps as ItemValueProps } from './menu-item-value';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\nexport { MenuView as View, type MenuViewProps as ViewProps } from './menu-view';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export {\n  MenuCheckboxItem as CheckboxItem,\n  type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\n"],"mappings":""}

package/dist/dev/ui/menu/menu-checkbox-item.js

@@ -25,7 +25,10 @@ const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, classNam
 	const handlePointerEnter = useCallback(() => {
 		const element = elementRef.current;
 		if (!element || disabled) return;
-		menu.highlight(element, { focus: false });
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
 	}, [menu, disabled]);
 	return renderElement("div", {
 		render,

package/dist/dev/ui/menu/menu-checkbox-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemcheckbox' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAmBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS,EAAE,OAAO,MAAM,CAAC;CAC1C,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}
+{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemcheckbox' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAmBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/menu/menu-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"mappings":";;;UAkCiB,yBAAyB,wBAAwB;;cA0ErD,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAyUP;OACH,QAAQ;OACR,QAAQ"}
+{"version":3,"file":"menu-content.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"mappings":";;;UAoBiB,yBAAyB,wBAAwB;;cAGrD,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBA2MP;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/menu/menu-content.js

@@ -1,291 +1,134 @@
 "use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext, useSubMenuContext } from "./context.js";
-import { createMenuViewTransition, getAnchorPositionStyle, getMenuViewTransitionAttrs, getMenuViewportAttrs, getMenuViewportElement, getPopupPositionRect, getPositionedSide, getPositioningBoundaryRect, getRootPositionOptions, isEventWithinElement, isMenuNavigationKey, observeMenuViewContent, resolveOffsets, resolvePositioningBoundary, syncMenuViewRoot, syncMenuViewTransition } from "@videojs/core/dom";
-import { useSnapshot } from "@videojs/store/react";
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
-import { PopoverCSSVars } from "@videojs/core";
+import { useMenuContext } from "./context.js";
+import { usePopupPosition } from "../popover/use-popup-position.js";
+import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
+import { MenuPositioningCSSVars, getRootPositionOptions, isMenuNavigationKey, observeMenuSize, syncMenuSizeChain } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 //#region src/ui/menu/menu-content.tsx
-const POPOVER_RESET = {
-	position: "fixed",
-	inset: "auto",
-	margin: 0
-};
-const menuPreventedNativeEvents = /* @__PURE__ */ new WeakSet();
-function toUIKeyboardEvent(event) {
-	return {
-		get defaultPrevented() {
-			return event.defaultPrevented;
-		},
-		key: event.key,
-		shiftKey: event.shiftKey,
-		ctrlKey: event.ctrlKey,
-		altKey: event.altKey,
-		metaKey: event.metaKey,
-		target: event.target instanceof Node ? event.target : event.currentTarget,
-		currentTarget: event.currentTarget,
-		preventDefault: () => event.preventDefault(),
-		stopPropagation: () => event.stopPropagation()
-	};
-}
-function toUIFocusEvent(event) {
-	return {
-		get defaultPrevented() {
-			return event.defaultPrevented;
-		},
-		relatedTarget: event.relatedTarget,
-		preventDefault: () => event.preventDefault(),
-		stopPropagation: () => event.stopPropagation()
-	};
-}
-function preventMenuKeyDefault(event) {
-	const keyboardEvent = toUIKeyboardEvent(event);
-	if (event.key !== "Escape" && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {
-		event.preventDefault();
-		menuPreventedNativeEvents.add(event.nativeEvent);
-	}
-}
-function wasDefaultPreventedByMenu(event) {
-	return menuPreventedNativeEvents.has(event.nativeEvent);
-}
-function callKeyDownHandler(handler, event) {
-	const defaultPreventedBeforeHandler = event.defaultPrevented && !wasDefaultPreventedByMenu(event);
-	if (!handler) return defaultPreventedBeforeHandler;
-	let defaultPreventedByHandler = false;
-	const preventDefault = event.preventDefault;
-	event.preventDefault = () => {
-		defaultPreventedByHandler = true;
-		preventDefault.call(event);
-	};
-	try {
-		handler(event);
-	} finally {
-		event.preventDefault = preventDefault;
-	}
-	return defaultPreventedBeforeHandler || defaultPreventedByHandler;
-}
 /** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */
 const MenuContent = forwardRef(function MenuContent({ render, className, style, onKeyDown, onBlur, ...elementProps }, forwardedRef) {
-	const { core, menu, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, contentId, boundary, container, activeSubMenuId } = useMenuContext();
-	const subMenuCtx = useSubMenuContext();
+	const { core, menu, parent, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, contentId, boundary, container } = useMenuContext();
 	const isSubmenu = state.isSubmenu;
-	const parentMenu = subMenuCtx?.parentMenu ?? null;
-	const subMenuId = subMenuCtx?.subMenuId ?? null;
-	const isActive = isSubmenu && parentMenu !== null && subMenuId !== null ? parentMenu.activeSubMenuId === subMenuId : false;
-	const [menuViewTransition] = useState(() => createMenuViewTransition({
-		focusFirstItem() {
-			menu.highlightFirstItem({ preventScroll: true });
-		},
-		restoreFocus(triggerId) {
-			if (triggerId) document.getElementById(triggerId)?.focus({ preventScroll: true });
-		}
-	}));
-	const menuViewTransitionState = useSnapshot(menuViewTransition.input);
-	const menuViewElementRef = useRef(null);
-	const parentContentElementRef = useRef(null);
-	const activeSubMenuIdRef = useRef(activeSubMenuId);
-	activeSubMenuIdRef.current = activeSubMenuId;
+	const isActive = isSubmenu && state.open;
+	const wasActiveRef = useRef(false);
 	useLayoutEffect(() => {
-		return () => menuViewTransition.destroy();
-	}, [menuViewTransition]);
-	useLayoutEffect(() => {
-		if (!isSubmenu) return;
-		menuViewTransition.sync({
-			active: isActive,
-			direction: parentMenu?.navigationDirection ?? "forward",
-			triggerId: parentMenu?.activeSubMenuTriggerId ?? null
-		});
+		if (!isSubmenu) return void 0;
+		const wasActive = wasActiveRef.current;
+		wasActiveRef.current = isActive;
+		if (isActive && !wasActive) {
+			const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));
+			return () => cancelAnimationFrame(frame);
+		}
 	}, [
 		isActive,
 		isSubmenu,
-		parentMenu,
-		menuViewTransition
+		menu
 	]);
-	const setMenuViewElement = useCallback((element) => {
-		menuViewElementRef.current = element;
+	const setSubmenuContentElement = useCallback((element) => {
 		menu.setContentElement(element);
-		menuViewTransition.setElement(element);
-	}, [menu, menuViewTransition]);
+		if (!element) requestAnimationFrame(() => {
+			syncMenuSizeChain(parent?.menu.contentElement ?? null);
+			if (!menu.input.current.active) menu.restoreFocus({ preventScroll: true });
+		});
+	}, [menu, parent]);
 	const handleSubMenuKeyDown = useCallback((event) => {
 		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		const keyboardEvent = toUIKeyboardEvent(event);
-		const isNavigationKey = isMenuNavigationKey(keyboardEvent);
-		menu.contentProps.onKeyDown(keyboardEvent);
-		const isBackNavigationKey = event.key === "ArrowLeft" || event.key === "Escape";
-		const ownsActiveSubmenu = parentMenu !== null && subMenuId !== null && parentMenu.menu.navigationInput.current.stack[parentMenu.menu.navigationInput.current.stack.length - 1]?.menuId === subMenuId;
-		if (isBackNavigationKey && ownsActiveSubmenu && !defaultPreventedByUser) {
+		const isNavigationKey = isMenuNavigationKey(event);
+		menu.contentProps.onKeyDown(event);
+		if ((event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
 			event.preventDefault();
-			parentMenu.pop();
+			menu.close("escape");
 		}
-		if (isNavigationKey && (!isBackNavigationKey || ownsActiveSubmenu)) event.stopPropagation();
-	}, [
-		onKeyDown,
-		parentMenu,
-		subMenuId,
-		menu
-	]);
+		if (isNavigationKey) event.stopPropagation();
+	}, [onKeyDown, menu]);
 	const handleRootMenuKeyDown = useCallback((event) => {
 		onKeyDown?.(event);
-		const keyboardEvent = toUIKeyboardEvent(event);
-		menu.contentProps.onKeyDown(keyboardEvent);
+		menu.contentProps.onKeyDown(event);
 		if (event.key === "Escape") return;
-		if (isMenuNavigationKey(keyboardEvent)) event.stopPropagation();
+		if (isMenuNavigationKey(event)) event.stopPropagation();
 	}, [onKeyDown, menu]);
 	const handleRootMenuBlur = useCallback((event) => {
 		onBlur?.(event);
-		menu.contentProps.onFocusOut(toUIFocusEvent(event));
+		menu.contentProps.onFocusOut(event);
+	}, [onBlur, menu]);
+	const handleSubMenuBlur = useCallback((event) => {
+		onBlur?.(event);
+		menu.contentProps.onFocusOut(event);
 	}, [onBlur, menu]);
 	const internalRef = useRef(null);
 	const rootComposedRef = useComposedRefs(forwardedRef, useCallback((element) => {
-		if (isSubmenu) return;
-		menu.setContentElement(element);
-		if (element && supportsAnchorPositioning()) element.style.setProperty("position-anchor", `--${anchorName}`);
-	}, [
-		isSubmenu,
-		menu,
-		anchorName
-	]), internalRef);
-	const menuViewComposedRef = useComposedRefs(forwardedRef, setMenuViewElement);
+		if (!isSubmenu) menu.setContentElement(element);
+	}, [isSubmenu, menu]), internalRef);
+	const submenuComposedRef = useComposedRefs(forwardedRef, setSubmenuContentElement);
 	const positionOptions = useMemo(() => getRootPositionOptions(preferredSide, state.align), [preferredSide, state.align]);
-	const anchorStyle = useMemo(() => {
-		if (isSubmenu || !positionOptions || !supportsAnchorPositioning()) return null;
-		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, positionOptions);
-		return rest;
-	}, [
-		isSubmenu,
+	const positioningStyle = usePopupPosition({
+		open: state.open && !isSubmenu,
 		anchorName,
-		positionOptions
-	]);
-	const [position, setPosition] = useState(null);
+		position: positionOptions,
+		triggerSource: menu,
+		popupRef: internalRef,
+		boundary,
+		container,
+		cssVars: MenuPositioningCSSVars,
+		onSideChange: setPositionedSide
+	});
 	useLayoutEffect(() => {
-		if (isSubmenu) return;
-		if (!state.open) return;
-		syncMenuViewRoot(internalRef.current, activeSubMenuId !== null);
+		if (isSubmenu || !state.open) return;
 		const contentElement = internalRef.current;
 		if (!contentElement) return;
-		return observeMenuViewContent(contentElement, () => {
-			syncMenuViewRoot(contentElement, activeSubMenuId !== null);
-		});
-	}, [
-		isSubmenu,
-		state.open,
-		activeSubMenuId
-	]);
+		const sync = () => syncMenuSizeChain(contentElement);
+		sync();
+		const frame = requestAnimationFrame(sync);
+		const stopObserving = observeMenuSize(contentElement, sync);
+		return () => {
+			cancelAnimationFrame(frame);
+			stopObserving();
+		};
+	}, [isSubmenu, state.open]);
 	useLayoutEffect(() => {
 		if (!isSubmenu) return;
-		const parentContentElement = parentMenu?.menu.contentElement ?? parentContentElementRef.current;
-		parentContentElementRef.current = parentContentElement;
-		syncMenuViewTransition(parentContentElement, menuViewElementRef.current, menuViewTransitionState);
-	});
-	useLayoutEffect(() => {
-		if (isSubmenu) return;
-		if (!state.open) {
-			setPosition(null);
-			return;
-		}
-		if (!positionOptions) {
-			syncMenuViewRoot(internalRef.current, activeSubMenuIdRef.current !== null);
-			return;
-		}
-		const rootPositionOptions = positionOptions;
-		function measure() {
-			const triggerElement = menu.triggerElement;
-			const contentElement = internalRef.current;
-			if (!triggerElement || !contentElement) return;
-			const triggerRect = triggerElement.getBoundingClientRect();
-			const root = contentElement.getRootNode();
-			const boundaryElement = resolvePositioningBoundary(boundary, {
-				container,
-				root
-			});
-			const anchorSupported = supportsAnchorPositioning();
-			let contentRect = getPopupPositionRect(contentElement, rootPositionOptions.side);
-			const boundaryRect = getPositioningBoundaryRect(boundaryElement);
-			const offsets = resolveOffsets(contentElement);
-			let side = getPositionedSide(triggerRect, contentRect, boundaryRect, rootPositionOptions, offsets);
-			let nextStyle = getAnchorPositionStyle(anchorName, {
-				...rootPositionOptions,
-				side
-			}, triggerRect, anchorSupported ? void 0 : contentRect, boundaryRect, offsets);
-			const availableWidth = nextStyle[PopoverCSSVars.availableWidth];
-			syncMenuViewRoot(contentElement, activeSubMenuIdRef.current !== null, availableWidth ? { availableWidth } : void 0);
-			if (!anchorSupported) {
-				contentRect = getPopupPositionRect(contentElement, rootPositionOptions.side);
-				side = getPositionedSide(triggerRect, contentRect, boundaryRect, rootPositionOptions, offsets);
-				nextStyle = getAnchorPositionStyle(anchorName, {
-					...rootPositionOptions,
-					side
-				}, triggerRect, contentRect, boundaryRect, offsets);
-			}
-			const { positionAnchor: _, ...rootStyle } = nextStyle;
-			setPosition(rootStyle);
-			setPositionedSide(side);
-		}
-		measure();
-		const triggerElement = menu.triggerElement;
-		const contentElement = internalRef.current;
-		const boundaryElement = contentElement ? resolvePositioningBoundary(boundary, {
-			container,
-			root: contentElement.getRootNode()
-		}) : null;
-		let animationFrameId = 0;
-		function reposition(event) {
-			if (event && isEventWithinElement(event, internalRef.current)) return;
-			cancelAnimationFrame(animationFrameId);
-			animationFrameId = requestAnimationFrame(measure);
-		}
-		reposition();
-		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => reposition()) : null;
-		if (triggerElement && resizeObserver) resizeObserver.observe(triggerElement);
-		if (contentElement && resizeObserver) resizeObserver.observe(contentElement);
-		if (boundaryElement && resizeObserver) resizeObserver.observe(boundaryElement);
-		window.addEventListener("scroll", reposition, {
-			capture: true,
-			passive: true
-		});
-		window.addEventListener("resize", reposition);
+		const isEnding = state.status === "ending";
+		const parentContentElement = parent?.menu.contentElement ?? null;
+		const sync = () => syncMenuSizeChain(parentContentElement);
+		sync();
+		const frame = requestAnimationFrame(sync);
+		const stopObserving = state.open && !isEnding && parentContentElement ? observeMenuSize(parentContentElement, sync) : null;
 		return () => {
-			cancelAnimationFrame(animationFrameId);
-			resizeObserver?.disconnect();
-			window.removeEventListener("scroll", reposition, true);
-			window.removeEventListener("resize", reposition);
+			cancelAnimationFrame(frame);
+			stopObserving?.();
 		};
 	}, [
 		isSubmenu,
+		parent,
 		state.open,
-		anchorName,
-		positionOptions,
-		menu,
-		boundary,
-		container,
-		setPositionedSide
+		state.status
 	]);
 	if (isSubmenu) {
-		if (menuViewTransitionState.phase === "hidden") return null;
+		if (!isActive && state.status !== "ending") return null;
 		const subMenuContent = renderElement("div", {
 			render,
 			className,
 			style
 		}, {
 			state,
-			ref: menuViewComposedRef,
+			stateAttrMap,
+			ref: submenuComposedRef,
 			props: [{
-				...getMenuViewTransitionAttrs(menuViewTransitionState),
+				id: contentId,
 				role: "menu",
 				tabIndex: -1,
-				"data-submenu": "",
 				onKeyDownCapture: preventMenuKeyDefault,
 				onKeyDown: handleSubMenuKeyDown,
-				onBlur
+				onBlur: handleSubMenuBlur
 			}, elementProps]
 		});
-		const parentViewportElement = getMenuViewportElement(parentMenu?.menu.contentElement ?? parentContentElementRef.current);
-		return parentViewportElement ? createPortal(subMenuContent, parentViewportElement) : subMenuContent;
+		const parentContentElement = parent?.menu.contentElement ?? null;
+		return parentContentElement ? createPortal(subMenuContent, parentContentElement) : subMenuContent;
 	}
-	if (!state.open) return null;
+	if (!state.open && state.status !== "ending") return null;
 	return renderElement("div", {
 		render,
 		className,
@@ -297,9 +140,8 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		props: [
 			{
 				id: contentId,
-				style: position ?? anchorStyle ?? POPOVER_RESET,
-				...core.getContentAttrs(state),
-				...getMenuViewportAttrs()
+				style: positioningStyle,
+				...core.getContentAttrs(state)
 			},
 			{
 				onKeyDownCapture: preventMenuKeyDefault,