svelte-kit-vice/src/uix/soma/components/dropdown-menu/dropdown-menu-provider.svelte.ts

import { Provider, context, type ProviderOpts, type WithRefOpts } from '$soma/provider';
import {
	createAttrs,
	registerContract,
	boolToEmptyStrOrUndef,
	getDataOpenClosed
} from '$soma/attrs';
import {
	readableActive,
	state,
	type Active,
	type ActiveProps,
	type StateProps
} from '$soma/reactive';
import type {
	OnChangeFn,
	SomaMouseEvent,
	SomaKeyboardEvent,
	Direction,
	Arrayable,
	StyleProperties
} from '$soma/types';
import { KEYS, getDirectionalKeys } from '$soma/keyboard';
import { Soma } from '$soma/core/soma.svelte';
import { untrack } from 'svelte';

import { Presence } from '$soma/layers/presence.svelte';
import { FocusScope } from '$soma/layers/focus-scope.svelte';
import { Dismissal, type DismissalBehavior } from '$soma/layers/dismissal.svelte';
import { ScrollLock } from '$soma/layers/scroll-lock.svelte';
import { TextSelection } from '$soma/layers/text-selection.svelte';
import {
	FloatingProvider,
	FloatingContent,
	FloatingArrow,
	FloatingAnchor,
	type Side,
	type Align,
	type Boundary
} from '$soma/layers/floating';

const attrs = createAttrs({
	component: 'dropdown-menu',
	parts: [
		'root',
		'trigger',
		'content',
		'arrow',
		'item',
		'group',
		'group-heading',
		'separator',
		'checkbox-item',
		'radio-group',
		'radio-item',
		'sub',
		'sub-trigger',
		'sub-content'
	] as const
});

registerContract({
	name: 'dropdown-menu',
	version: 1,
	parts: {
		root: [],
		trigger: [{ attr: 'data-state', values: ['open', 'closed'], description: 'Open state' }],
		content: [{ attr: 'data-state', values: ['open', 'closed'], description: 'Open state' }],
		item: [{ attr: 'data-disabled', description: 'Disabled flag' }],
		'checkbox-item': [
			{ attr: 'data-state', values: ['checked', 'unchecked'], description: 'Checked state' },
			{ attr: 'data-disabled', description: 'Disabled flag' }
		],
		'radio-item': [
			{ attr: 'data-state', values: ['checked', 'unchecked'], description: 'Checked state' },
			{ attr: 'data-disabled', description: 'Disabled flag' }
		],
		'sub-trigger': [
			{ attr: 'data-state', values: ['open', 'closed'], description: 'Open state' },
			{ attr: 'data-disabled', description: 'Disabled flag' }
		],
		'sub-content': [{ attr: 'data-state', values: ['open', 'closed'], description: 'Open state' }],
		group: [],
		'group-heading': [],
		separator: [],
		arrow: []
	}
});

// ── Typeahead helper ─────────────────────────────────────────────────────────

class Typeahead {
	private search = '';
	private timer: ReturnType<typeof setTimeout> | null = null;

	handle(key: string, items: HTMLElement[]): HTMLElement | null {
		if (key.length !== 1) return null;

		this.search += key.toLowerCase();
		if (this.timer) clearTimeout(this.timer);
		this.timer = setTimeout(() => {
			this.search = '';
		}, 500);

		const match = items.find((el) => {
			const text = el.getAttribute('data-text-value') || el.textContent || '';
			return text.toLowerCase().startsWith(this.search);
		});

		return match ?? null;
	}

	reset() {
		this.search = '';
		if (this.timer) clearTimeout(this.timer);
	}
}

// ── Root ─────────────────────────────────────────────────────────────────────

interface MenuOpts
	extends
		ProviderOpts,
		StateProps<{ open: boolean }>,
		ActiveProps<{
			modal: boolean;
			dir: Direction;
			onOpenChangeComplete: OnChangeFn<boolean>;
		}> {}

export class MenuProvider extends Provider<MenuOpts> {
	static readonly ctx = context<MenuProvider>('DropdownMenu');

	static from(opts: MenuOpts) {
		return new MenuProvider(opts);
	}

	readonly config = Soma.getOr();
	readonly floatingProvider: FloatingProvider;
	readonly contentPresence: Presence;
	readonly typeahead = new Typeahead();

	contentId = state('');
	triggerId = state('');
	private contentRef = state<HTMLElement | null>(null);

	private constructor(opts: MenuOpts) {
		super(opts, 'DropdownMenu', 'root', attrs.root, MenuProvider.ctx);

		this.floatingProvider = FloatingProvider.create();

		this.contentPresence = new Presence({
			open: opts.open,
			ref: this.contentRef,
			onComplete: (open) => opts.onOpenChangeComplete.current(open)
		});
	}

	handleOpen() {
		this.opts.open.current = true;
	}

	handleClose() {
		this.typeahead.reset();
		this.opts.open.current = false;
	}

	setContentRef(el: HTMLElement | null) {
		this.contentRef.current = el;
	}

	/** Get all focusable menu items in content. */
	getItems(container: HTMLElement | null): HTMLElement[] {
		if (!container) return [];
		const selector = `[${attrs.item}]:not([data-disabled]), [${attrs['checkbox-item']}]:not([data-disabled]), [${attrs['radio-item']}]:not([data-disabled]), [${attrs['sub-trigger']}]:not([data-disabled])`;
		return Array.from(container.querySelectorAll<HTMLElement>(selector));
	}
}

// ── Trigger ──────────────────────────────────────────────────────────────────

interface MenuTriggerOpts extends WithRefOpts {}

export class MenuTriggerProvider extends Provider<MenuTriggerOpts> {
	static from(opts: MenuTriggerOpts) {
		return new MenuTriggerProvider(opts);
	}

	readonly provider: MenuProvider;

	private constructor(opts: MenuTriggerOpts) {
		super(opts, 'DropdownMenu', 'trigger', attrs.trigger);
		this.provider = MenuProvider.ctx.get();
		this.provider.triggerId.current = opts.id.current;

		FloatingAnchor.create({
			id: opts.id,
			ref: readableActive(() => opts.ref.current)
		});
	}

	readonly onclick = (_e: SomaMouseEvent<HTMLButtonElement>) => {
		if (this.provider.opts.open.current) this.provider.handleClose();
		else this.provider.handleOpen();
	};

	readonly onkeydown = (e: SomaKeyboardEvent<HTMLButtonElement>) => {
		if (e.key === KEYS.ARROW_DOWN || e.key === KEYS.ENTER || e.key === KEYS.SPACE) {
			e.preventDefault();
			this.provider.handleOpen();
		}
	};

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			type: 'button' as const,
			'aria-haspopup': 'menu' as const,
			'aria-expanded': this.provider.opts.open.current,
			'aria-controls': this.provider.contentId.current || undefined,
			'data-state': getDataOpenClosed(this.provider.opts.open.current),
			onclick: this.onclick,
			onkeydown: this.onkeydown
		} as const)
	);
}

// ── Content ──────────────────────────────────────────────────────────────────

interface MenuContentOpts
	extends
		WithRefOpts,
		ActiveProps<{
			side: Side;
			sideOffset: number;
			align: Align;
			alignOffset: number;
			arrowPadding: number;
			avoidCollisions: boolean;
			collisionBoundary: Arrayable<Boundary>;
			collisionPadding: number | Partial<Record<Side, number>>;
			sticky: 'partial' | 'always';
			hideWhenDetached: boolean;
			updatePositionStrategy: 'optimized' | 'always';
			strategy: 'fixed' | 'absolute';
			loop: boolean;
			trapFocus: boolean;
			preventScroll: boolean;
			onOpenAutoFocus: (e: Event) => void;
			onCloseAutoFocus: (e: Event) => void;
			onEscapeKeydown: (e: KeyboardEvent) => void;
			escapeKeydownBehavior: DismissalBehavior;
			onInteractOutside: (e: PointerEvent) => void;
			interactOutsideBehavior: DismissalBehavior | undefined;
			onFocusOutside: (e: FocusEvent) => void;
			dir: Direction;
			style: StyleProperties | null | undefined | string;
		}> {}

export class MenuContentProvider extends Provider<MenuContentOpts> {
	static from(opts: MenuContentOpts) {
		return new MenuContentProvider(opts);
	}

	readonly provider: MenuProvider;
	readonly floating: FloatingContent;
	readonly focusScope: ReturnType<typeof FocusScope.use>;
	readonly dismissal: Dismissal;
	readonly scrollLock: ScrollLock;
	readonly textSelection: TextSelection;

	private constructor(opts: MenuContentOpts) {
		super(opts, 'DropdownMenu', 'content', attrs.content, undefined, (el) => {
			this.provider.setContentRef(el);
		});
		this.provider = MenuProvider.ctx.get();
		this.provider.contentId.current = opts.id.current;

		// Floating
		this.floating = FloatingContent.create({
			id: opts.id,
			wrapperId: readableActive(() => `${opts.id.current}-wrapper`),
			side: opts.side,
			sideOffset: opts.sideOffset,
			align: opts.align,
			alignOffset: opts.alignOffset,
			arrowPadding: opts.arrowPadding,
			avoidCollisions: opts.avoidCollisions,
			collisionBoundary: opts.collisionBoundary,
			collisionPadding: opts.collisionPadding,
			sticky: opts.sticky,
			hideWhenDetached: opts.hideWhenDetached,
			updatePositionStrategy: opts.updatePositionStrategy,
			strategy: opts.strategy,
			onPlaced: readableActive(() => () => {}),
			dir: opts.dir,
			style: opts.style,
			enabled: readableActive(() => this.provider.opts.open.current),
			customAnchor: readableActive(() => null)
		});

		// Focus
		this.focusScope = FocusScope.use({
			onOpenAutoFocus: opts.onOpenAutoFocus,
			onCloseAutoFocus: opts.onCloseAutoFocus,
			trap: opts.trapFocus,
			loop: opts.loop,
			ref: opts.ref,
			enabled: readableActive(() => this.provider.contentPresence.isPresent)
		});

		// Dismissal — menus always close on outside click (unlike dialogs where modal=true ignores it)
		const resolvedInteractBehavior = readableActive(
			() => opts.interactOutsideBehavior.current ?? 'close'
		);

		this.dismissal = Dismissal.use({
			ref: readableActive(() => opts.ref.current),
			enabled: readableActive(() => this.provider.opts.open.current),
			onEscapeKeydown: readableActive(() => (e: KeyboardEvent) => {
				opts.onEscapeKeydown.current(e);
				if (!e.defaultPrevented) this.provider.handleClose();
			}),
			escapeKeydownBehavior: opts.escapeKeydownBehavior,
			onInteractOutside: readableActive(() => (e: PointerEvent) => {
				opts.onInteractOutside.current(e);
				if (!e.defaultPrevented) this.provider.handleClose();
			}),
			interactOutsideBehavior: resolvedInteractBehavior,
			onFocusOutside: opts.onFocusOutside,
			isValidEvent: readableActive(() => () => false)
		});

		// Scroll lock
		this.scrollLock = new ScrollLock();
		$effect(() => {
			this.scrollLock.locked.current =
				this.provider.opts.open.current && opts.preventScroll.current;
		});

		// Text selection
		this.textSelection = TextSelection.use({
			ref: readableActive(() => opts.ref.current),
			enabled: readableActive(() => this.provider.opts.open.current),
			onPointerDown: readableActive(() => () => {}),
			onPointerUp: readableActive(() => () => {})
		});
	}

	readonly isPresent = $derived.by(() => this.provider.contentPresence.isPresent);

	readonly wrapperProps = $derived.by(() => ({
		...this.floating.wrapperProps,
		style: {
			...(typeof this.floating.wrapperProps.style === 'object'
				? this.floating.wrapperProps.style
				: {}),
			'pointer-events': 'auto'
		}
	}));

	readonly onkeydown = (e: KeyboardEvent) => {
		const container = this.opts.ref.current;
		if (!container) return;

		const items = this.provider.getItems(container);
		const active = document.activeElement as HTMLElement;
		const currentIndex = items.indexOf(active);
		const dir = this.provider.opts.dir.current;
		const { nextKey, prevKey } = getDirectionalKeys(dir, 'vertical');

		let targetIndex = -1;

		if (e.key === nextKey) {
			e.preventDefault();
			targetIndex = this.opts.loop.current
				? (currentIndex + 1) % items.length
				: Math.min(currentIndex + 1, items.length - 1);
		} else if (e.key === prevKey) {
			e.preventDefault();
			targetIndex = this.opts.loop.current
				? (currentIndex - 1 + items.length) % items.length
				: Math.max(currentIndex - 1, 0);
		} else if (e.key === KEYS.HOME) {
			e.preventDefault();
			targetIndex = 0;
		} else if (e.key === KEYS.END) {
			e.preventDefault();
			targetIndex = items.length - 1;
		} else {
			// Typeahead
			const match = this.provider.typeahead.handle(e.key, items);
			if (match) match.focus();
			return;
		}

		if (targetIndex >= 0 && items[targetIndex]) {
			items[targetIndex].focus();
		}
	};

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'menu' as const,
			'aria-orientation': 'vertical' as const,
			'data-state': getDataOpenClosed(this.provider.opts.open.current),
			...this.floating.props,
			...this.provider.contentPresence.transitionAttrs,
			...this.focusScope.props,
			...this.dismissal.props,
			onkeydown: this.onkeydown
		} as const)
	);
}

// ── Arrow ────────────────────────────────────────────────────────────────────

interface MenuArrowOpts extends WithRefOpts {}

export class MenuArrowProvider extends Provider<MenuArrowOpts> {
	static from(opts: MenuArrowOpts) {
		return new MenuArrowProvider(opts);
	}

	readonly floatingArrow: FloatingArrow;

	private constructor(opts: MenuArrowOpts) {
		super(opts, 'DropdownMenu', 'arrow', attrs.arrow);
		this.floatingArrow = FloatingArrow.create(opts);
	}

	readonly props = $derived.by(() =>
		this.assertProps({ ...this.baseProps, ...this.floatingArrow.props } as const)
	);
}

// ── Item ─────────────────────────────────────────────────────────────────────

interface MenuItemOpts
	extends
		WithRefOpts,
		ActiveProps<{
			disabled: boolean;
			textValue: string;
			closeOnSelect: boolean;
			onSelect: () => void;
		}> {}

export class MenuItemProvider extends Provider<MenuItemOpts> {
	static from(opts: MenuItemOpts) {
		return new MenuItemProvider(opts);
	}

	readonly provider: MenuProvider;

	private constructor(opts: MenuItemOpts) {
		super(opts, 'DropdownMenu', 'item', attrs.item);
		this.provider = MenuProvider.ctx.get();
	}

	readonly onclick = (_e: SomaMouseEvent<HTMLElement>) => {
		if (this.opts.disabled.current) return;
		this.opts.onSelect.current();
		if (this.opts.closeOnSelect.current) this.provider.handleClose();
	};

	readonly onkeydown = (e: SomaKeyboardEvent<HTMLElement>) => {
		if (this.opts.disabled.current) return;
		if (e.key === KEYS.ENTER || e.key === KEYS.SPACE) {
			e.preventDefault();
			this.opts.onSelect.current();
			if (this.opts.closeOnSelect.current) this.provider.handleClose();
		}
	};

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'menuitem' as const,
			tabindex: this.opts.disabled.current ? undefined : -1,
			'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
			'data-text-value': this.opts.textValue.current || undefined,
			onclick: this.onclick,
			onkeydown: this.onkeydown
		} as const)
	);
}

// ── Group ────────────────────────────────────────────────────────────────────

interface MenuGroupOpts extends WithRefOpts {}

export class MenuGroupProvider extends Provider<MenuGroupOpts> {
	static readonly ctx = context<MenuGroupProvider>('DropdownMenuGroup');

	static from(opts: MenuGroupOpts) {
		return new MenuGroupProvider(opts);
	}

	headingId = state('');

	private constructor(opts: MenuGroupOpts) {
		super(opts, 'DropdownMenu', 'group', attrs.group, MenuGroupProvider.ctx);
	}

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'group' as const,
			'aria-labelledby': this.headingId.current || undefined
		} as const)
	);
}

// ── GroupHeading ─────────────────────────────────────────────────────────────

interface MenuGroupHeadingOpts extends WithRefOpts {}

export class MenuGroupHeadingProvider extends Provider<MenuGroupHeadingOpts> {
	static from(opts: MenuGroupHeadingOpts) {
		return new MenuGroupHeadingProvider(opts);
	}

	private constructor(opts: MenuGroupHeadingOpts) {
		super(opts, 'DropdownMenu', 'group-heading', attrs['group-heading']);
		// Register with parent group if available
		const group = MenuGroupProvider.ctx.getOr(undefined) as MenuGroupProvider | undefined;
		if (group) group.headingId.current = opts.id.current;
	}

	readonly props = $derived.by(() => this.assertProps({ ...this.baseProps } as const));
}

// ── Separator ────────────────────────────────────────────────────────────────

interface MenuSeparatorOpts extends WithRefOpts {}

export class MenuSeparatorProvider extends Provider<MenuSeparatorOpts> {
	static from(opts: MenuSeparatorOpts) {
		return new MenuSeparatorProvider(opts);
	}

	private constructor(opts: MenuSeparatorOpts) {
		super(opts, 'DropdownMenu', 'separator', attrs.separator);
	}

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'separator' as const,
			'aria-orientation': 'horizontal' as const
		} as const)
	);
}

// ── CheckboxItem ─────────────────────────────────────────────────────────────

interface MenuCheckboxItemOpts
	extends
		WithRefOpts,
		StateProps<{ checked: boolean }>,
		ActiveProps<{
			disabled: boolean;
			textValue: string;
			closeOnSelect: boolean;
			onSelect: () => void;
		}> {}

export class MenuCheckboxItemProvider extends Provider<MenuCheckboxItemOpts> {
	static from(opts: MenuCheckboxItemOpts) {
		return new MenuCheckboxItemProvider(opts);
	}

	readonly provider: MenuProvider;

	private constructor(opts: MenuCheckboxItemOpts) {
		super(opts, 'DropdownMenu', 'checkbox-item', attrs['checkbox-item']);
		this.provider = MenuProvider.ctx.get();
	}

	readonly onclick = (_e: SomaMouseEvent<HTMLElement>) => {
		if (this.opts.disabled.current) return;
		const next = !this.opts.checked.current;
		this.opts.checked.current = next;
		this.opts.onSelect.current();
		if (this.opts.closeOnSelect.current) this.provider.handleClose();
	};

	readonly onkeydown = (e: SomaKeyboardEvent<HTMLElement>) => {
		if (this.opts.disabled.current) return;
		if (e.key === KEYS.ENTER || e.key === KEYS.SPACE) {
			e.preventDefault();
			this.onclick(e as any);
		}
	};

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'menuitemcheckbox' as const,
			'aria-checked': this.opts.checked.current,
			tabindex: this.opts.disabled.current ? undefined : -1,
			'data-state': this.opts.checked.current ? 'checked' : 'unchecked',
			'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
			'data-text-value': this.opts.textValue.current || undefined,
			onclick: this.onclick,
			onkeydown: this.onkeydown
		} as const)
	);
}

// ── RadioGroup ───────────────────────────────────────────────────────────────

interface MenuRadioGroupOpts extends WithRefOpts, StateProps<{ value: string }> {}

export class MenuRadioGroupProvider extends Provider<MenuRadioGroupOpts> {
	static readonly ctx = context<MenuRadioGroupProvider>('DropdownMenuRadioGroup');

	static from(opts: MenuRadioGroupOpts) {
		return new MenuRadioGroupProvider(opts);
	}

	private constructor(opts: MenuRadioGroupOpts) {
		super(opts, 'DropdownMenu', 'radio-group', attrs['radio-group'], MenuRadioGroupProvider.ctx);
	}

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'group' as const
		} as const)
	);
}

// ── RadioItem ────────────────────────────────────────────────────────────────

interface MenuRadioItemOpts
	extends
		WithRefOpts,
		ActiveProps<{
			value: string;
			disabled: boolean;
			textValue: string;
			closeOnSelect: boolean;
			onSelect: () => void;
		}> {}

export class MenuRadioItemProvider extends Provider<MenuRadioItemOpts> {
	static from(opts: MenuRadioItemOpts) {
		return new MenuRadioItemProvider(opts);
	}

	readonly provider: MenuProvider;
	readonly radioGroup: MenuRadioGroupProvider;

	private constructor(opts: MenuRadioItemOpts) {
		super(opts, 'DropdownMenu', 'radio-item', attrs['radio-item']);
		this.provider = MenuProvider.ctx.get();
		this.radioGroup = MenuRadioGroupProvider.ctx.get();
	}

	readonly isChecked = $derived.by(
		() => this.radioGroup.opts.value.current === this.opts.value.current
	);

	readonly onclick = (_e: SomaMouseEvent<HTMLElement>) => {
		if (this.opts.disabled.current) return;
		this.radioGroup.opts.value.current = this.opts.value.current;
		this.opts.onSelect.current();
		if (this.opts.closeOnSelect.current) this.provider.handleClose();
	};

	readonly onkeydown = (e: SomaKeyboardEvent<HTMLElement>) => {
		if (this.opts.disabled.current) return;
		if (e.key === KEYS.ENTER || e.key === KEYS.SPACE) {
			e.preventDefault();
			this.onclick(e as any);
		}
	};

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'menuitemradio' as const,
			'aria-checked': this.isChecked,
			tabindex: this.opts.disabled.current ? undefined : -1,
			'data-state': this.isChecked ? 'checked' : 'unchecked',
			'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
			'data-text-value': this.opts.textValue.current || undefined,
			onclick: this.onclick,
			onkeydown: this.onkeydown
		} as const)
	);
}

// ── Sub ──────────────────────────────────────────────────────────────────────

interface MenuSubOpts extends StateProps<{ open: boolean }> {}

export class MenuSubProvider {
	static readonly ctx = context<MenuSubProvider>('DropdownMenuSub');

	static from(opts: MenuSubOpts) {
		return MenuSubProvider.ctx.set(new MenuSubProvider(opts));
	}

	readonly opts: MenuSubOpts;
	readonly provider: MenuProvider;
	readonly contentPresence: Presence;
	readonly floatingProvider: FloatingProvider;

	contentId = state('');
	private contentRef = state<HTMLElement | null>(null);

	private constructor(opts: MenuSubOpts) {
		this.opts = opts;
		this.provider = MenuProvider.ctx.get();
		this.floatingProvider = FloatingProvider.create();

		this.contentPresence = new Presence({
			open: opts.open,
			ref: this.contentRef
		});
	}

	handleOpen() {
		this.opts.open.current = true;
	}

	handleClose() {
		this.opts.open.current = false;
	}

	setContentRef(el: HTMLElement | null) {
		this.contentRef.current = el;
	}
}

// ── SubTrigger ───────────────────────────────────────────────────────────────

interface MenuSubTriggerOpts
	extends WithRefOpts, ActiveProps<{ disabled: boolean; textValue: string }> {}

export class MenuSubTriggerProvider extends Provider<MenuSubTriggerOpts> {
	static from(opts: MenuSubTriggerOpts) {
		return new MenuSubTriggerProvider(opts);
	}

	readonly sub: MenuSubProvider;
	private openTimeout: ReturnType<typeof setTimeout> | null = null;

	private constructor(opts: MenuSubTriggerOpts) {
		super(opts, 'DropdownMenu', 'sub-trigger', attrs['sub-trigger']);
		this.sub = MenuSubProvider.ctx.get();

		FloatingAnchor.create({
			id: opts.id,
			ref: readableActive(() => opts.ref.current)
		});
	}

	readonly onpointerenter = () => {
		if (this.opts.disabled.current) return;
		if (this.openTimeout) clearTimeout(this.openTimeout);
		this.openTimeout = setTimeout(() => this.sub.handleOpen(), 100);
	};

	readonly onpointerleave = () => {
		if (this.openTimeout) clearTimeout(this.openTimeout);
		this.openTimeout = setTimeout(() => this.sub.handleClose(), 100);
	};

	readonly onkeydown = (e: SomaKeyboardEvent<HTMLElement>) => {
		if (this.opts.disabled.current) return;
		const dir = this.sub.provider.opts.dir.current;
		const openKey = dir === 'rtl' ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT;
		if (e.key === openKey || e.key === KEYS.ENTER || e.key === KEYS.SPACE) {
			e.preventDefault();
			this.sub.handleOpen();
		}
	};

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'menuitem' as const,
			'aria-haspopup': 'menu' as const,
			'aria-expanded': this.sub.opts.open.current,
			'aria-controls': this.sub.contentId.current || undefined,
			tabindex: this.opts.disabled.current ? undefined : -1,
			'data-state': getDataOpenClosed(this.sub.opts.open.current),
			'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
			'data-text-value': this.opts.textValue.current || undefined,
			onpointerenter: this.onpointerenter,
			onpointerleave: this.onpointerleave,
			onkeydown: this.onkeydown
		} as const)
	);
}

// ── SubContent ───────────────────────────────────────────────────────────────

interface MenuSubContentOpts
	extends
		WithRefOpts,
		ActiveProps<{
			side: Side;
			sideOffset: number;
			align: Align;
			alignOffset: number;
			avoidCollisions: boolean;
			collisionBoundary: Arrayable<Boundary>;
			collisionPadding: number | Partial<Record<Side, number>>;
			loop: boolean;
			dir: Direction;
			style: StyleProperties | null | undefined | string;
		}> {}

export class MenuSubContentProvider extends Provider<MenuSubContentOpts> {
	static from(opts: MenuSubContentOpts) {
		return new MenuSubContentProvider(opts);
	}

	readonly sub: MenuSubProvider;
	readonly floating: FloatingContent;

	private constructor(opts: MenuSubContentOpts) {
		super(opts, 'DropdownMenu', 'sub-content', attrs['sub-content'], undefined, (el) => {
			this.sub.setContentRef(el);
		});
		this.sub = MenuSubProvider.ctx.get();
		this.sub.contentId.current = opts.id.current;

		this.floating = FloatingContent.create({
			id: opts.id,
			wrapperId: readableActive(() => `${opts.id.current}-wrapper`),
			side: opts.side,
			sideOffset: opts.sideOffset,
			align: opts.align,
			alignOffset: opts.alignOffset,
			arrowPadding: readableActive(() => 0),
			avoidCollisions: opts.avoidCollisions,
			collisionBoundary: opts.collisionBoundary,
			collisionPadding: opts.collisionPadding,
			sticky: readableActive(() => 'partial' as const),
			hideWhenDetached: readableActive(() => true),
			updatePositionStrategy: readableActive(() => 'optimized' as const),
			strategy: readableActive(() => 'fixed' as const),
			onPlaced: readableActive(() => () => {}),
			dir: opts.dir,
			style: opts.style,
			enabled: readableActive(() => this.sub.opts.open.current),
			customAnchor: readableActive(() => null)
		});
	}

	readonly isPresent = $derived.by(() => this.sub.contentPresence.isPresent);

	readonly wrapperProps = $derived.by(() => ({
		...this.floating.wrapperProps,
		style: {
			...(typeof this.floating.wrapperProps.style === 'object'
				? this.floating.wrapperProps.style
				: {}),
			'pointer-events': 'auto'
		}
	}));

	readonly onkeydown = (e: KeyboardEvent) => {
		const dir = this.sub.provider.opts.dir.current;
		const closeKey = dir === 'rtl' ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT;
		if (e.key === closeKey || e.key === KEYS.ESCAPE) {
			e.preventDefault();
			this.sub.handleClose();
		}

		// Arrow nav within sub
		const container = this.opts.ref.current;
		if (!container) return;
		const items = this.sub.provider.getItems(container);
		const active = document.activeElement as HTMLElement;
		const currentIndex = items.indexOf(active);

		let targetIndex = -1;
		if (e.key === KEYS.ARROW_DOWN) {
			e.preventDefault();
			targetIndex = this.opts.loop.current
				? (currentIndex + 1) % items.length
				: Math.min(currentIndex + 1, items.length - 1);
		} else if (e.key === KEYS.ARROW_UP) {
			e.preventDefault();
			targetIndex = this.opts.loop.current
				? (currentIndex - 1 + items.length) % items.length
				: Math.max(currentIndex - 1, 0);
		}

		if (targetIndex >= 0 && items[targetIndex]) {
			items[targetIndex].focus();
		}
	};

	readonly props = $derived.by(() =>
		this.assertProps({
			...this.baseProps,
			role: 'menu' as const,
			'aria-orientation': 'vertical' as const,
			'data-state': getDataOpenClosed(this.sub.opts.open.current),
			...this.floating.props,
			...this.sub.contentPresence.transitionAttrs,
			onkeydown: this.onkeydown
		} as const)
	);
}