refactor: remove redundant comments and improve type safety in sandbox and menu components

Author: huntabyte

docs/src/routes/(docs)/sandbox/+page.svelte

@@ -11,7 +11,7 @@
 	let selectedPriority = $state("p1");
 	let selectedLabel = $state("strategic-initiative");
 	let selectedLead = $state("hunter");
-	const debugRootProps = $derived.by(() => ({ debugMode }) as any);
+	const debugRootProps = $derived.by(() => ({ debugMode }) satisfies { debugMode: boolean });
 
 	const statusItems = [
 		{ value: "icebox", label: "Icebox" },

packages/bits-ui/src/lib/bits/menu/menu.svelte.ts

@@ -297,7 +297,6 @@ class MenuSubmenuIntent {
 
 				const onContentLeave = (e: PointerEvent) => {
 					if (!isMouseEvent(e)) return;
-					// don't start return-tracking when leaving into a child sub-content
 					if (isElement(e.relatedTarget)) {
 						const selector = this.#opts.subContentSelector();
 						const matchedSubContent = e.relatedTarget.closest(selector);
@@ -319,13 +318,11 @@ class MenuSubmenuIntent {
 
 				const onTriggerEnter = (e: PointerEvent) => {
 					if (!isMouseEvent(e)) return;
-					// arrived at trigger, transit complete
 					this.#disengage();
 				};
 
 				const onContentEnter = (e: PointerEvent) => {
 					if (!isMouseEvent(e)) return;
-					// arrived at content, transit complete
 					this.#disengage();
 				};
 
@@ -405,10 +402,6 @@ class MenuSubmenuIntent {
 		return isPointInPolygon(pt, corridor) || isPointInPolygon(pt, intent);
 	}
 
-	/**
-	 * When the pointer hovers over the trigger or content, we start previewing the transit.
-	 * This is used to show the debug overlay while hovering the trigger or content.
-	 */
 	#preview(e: PointerEvent, target: IntentTarget) {
 		const pt = { x: e.clientX, y: e.clientY };
 		const geo = this.#computePolygons(pt, target);
@@ -421,17 +414,13 @@ class MenuSubmenuIntent {
 		this.#syncDebug();
 	}
 
-	/**
-	 * When the pointer leaves the trigger or content, we start actively tracking the transit.
-	 */
 	#engage(e: PointerEvent, target: IntentTarget) {
 		if (!this.#opts.enabled()) return;
 
 		const triggerNode = this.#opts.triggerNode();
 		const contentNode = this.#opts.contentNode();
 		if (!triggerNode || !contentNode) return;
 
-		// pointer moved directly into the destination — no transit needed
 		const related = e.relatedTarget;
 		if (isElement(related)) {
 			if (target === "content" && contentNode.contains(related)) return;
@@ -440,16 +429,13 @@ class MenuSubmenuIntent {
 
 		const pt = { x: e.clientX, y: e.clientY };
 
-		// immediately check if pointer is already outside the safe zone
-		// (e.g. moving downward to a sibling instead of toward the content)
 		const geo = this.#computePolygons(pt, target);
 		if (!geo) return;
 
 		if (
 			!isInsideRect(pt, geo.targetRect) &&
 			!this.#isInSafeZone(pt, geo.corridor, geo.intent)
 		) {
-			// pointer left toward somewhere outside the safe zone — don't engage
 			this.#clearVisuals();
 			return;
 		}
@@ -468,9 +454,6 @@ class MenuSubmenuIntent {
 
 	#disengageTimer: ReturnType<typeof setTimeout> | null = null;
 
-	/**
-	 * When the pointer arrives at the destination, we stop tracking the transit.
-	 */
 	#disengage() {
 		if (!this.#active) return;
 		const wasReturning = this.#target === "trigger";
@@ -480,8 +463,6 @@ class MenuSubmenuIntent {
 		this.#clearVisuals();
 
 		if (wasReturning) {
-			// keep isPointerInTransit true briefly so the pointer can settle on the
-			// trigger without accidentally opening a neighboring sub-trigger
 			this.#clearDisengageTimer();
 			this.#disengageTimer = setTimeout(() => {
 				this.#disengageTimer = null;
@@ -498,9 +479,6 @@ class MenuSubmenuIntent {
 		this.#disengageTimer = null;
 	}
 
-	/**
-	 * When the pointer leaves the safe zone, we close the submenu.
-	 */
 	#intentExit() {
 		this.#detachDocMove();
 		this.#clearFallback();
@@ -511,9 +489,6 @@ class MenuSubmenuIntent {
 		this.#opts.onIntentExit();
 	}
 
-	/**
-	 * When the node changes or the component is destroyed, we reset the state.
-	 */
 	#reset() {
 		this.#detachDocMove();
 		this.#clearFallback();
@@ -529,9 +504,6 @@ class MenuSubmenuIntent {
 		this.#syncDebug();
 	}
 
-	/**
-	 * When the pointer moves over the document, we track the transit.
-	 */
 	#isPointerInDescendantSubContent(pt: Point): boolean {
 		const contentNode = this.#opts.contentNode();
 		if (!contentNode) return false;
@@ -541,9 +513,6 @@ class MenuSubmenuIntent {
 		const selector = this.#opts.subContentSelector();
 		const subContent = el.closest(selector);
 		if (!subContent || subContent === contentNode) return false;
-		// verify this sub-content was triggered from within our content by checking
-		// if a sub-trigger with aria-controls matching the sub-content's id exists
-		// inside our content node
 		if (subContent.id) return !!contentNode.querySelector(`[aria-controls="${subContent.id}"]`);
 		return false;
 	}
@@ -563,7 +532,6 @@ class MenuSubmenuIntent {
 		const pt = { x: e.clientX, y: e.clientY };
 		this.#pointerPoint = pt;
 
-		// check if pointer arrived at the destination element
 		const triggerRect = triggerNode.getBoundingClientRect();
 		const contentRect = contentNode.getBoundingClientRect();
 		if (this.#target === "content" && isInsideRect(pt, contentRect)) {
@@ -575,13 +543,11 @@ class MenuSubmenuIntent {
 			return;
 		}
 
-		// pointer is inside a child sub-content portal, treat as safe, don't close
 		if (this.#isPointerInDescendantSubContent(pt)) {
 			this.#startFallback();
 			return;
 		}
 
-		// recompute safe zone from the locked apex
 		const geo = this.#computePolygons(pt, this.#target);
 		if (!geo) {
 			this.#intentExit();
@@ -615,9 +581,6 @@ class MenuSubmenuIntent {
 		this.#cleanupDocMove?.();
 	}
 
-	/**
-	 * When the pointer goes completely still mid-transit, we close the submenu.
-	 */
 	#startFallback() {
 		this.#clearFallback();
 		this.#fallbackTimer = setTimeout(() => {
@@ -770,8 +733,6 @@ function getIntentPolygon(
 	const edgeBuffer = 8;
 	const effectiveSide = target === "trigger" ? flipSide(side) : side;
 
-	// when returning to trigger, the base edge should span the full extent
-	// of both the source (submenu content) and the target (parent content)
 	const top = sourceRect
 		? Math.min(targetRect.top, sourceRect.top) - edgeBuffer
 		: targetRect.top - edgeBuffer;
@@ -1176,7 +1137,6 @@ export class MenuContentState {
 				dir: this.parentMenu.root.opts.dir.current,
 				style: {
 					pointerEvents: "auto",
-					// CSS containment isolates style/layout/paint calculations from the rest of the page
 					contain: "layout style",
 				},
 				...this.attachment,
@@ -1969,7 +1929,6 @@ export class ContextMenuTriggerState {
 				"data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
 				[CONTEXT_MENU_TRIGGER_ATTR]: "",
 				tabindex: -1,
-				//
 				onpointerdown: this.onpointerdown,
 				onpointermove: this.onpointermove,
 				onpointercancel: this.onpointercancel,

packages/bits-ui/src/lib/internal/animations-complete.ts

@@ -28,7 +28,6 @@ export class AnimationsComplete {
 	}
 
 	run(fn: () => void | Promise<void>): void {
-		// if already running, cleanup and restart
 		this.#cleanup();
 
 		const node = this.#opts.ref.current;

packages/bits-ui/src/lib/internal/presence-manager.svelte.ts

@@ -10,10 +10,6 @@ interface PresenceManagerOpts
 	}> {
 	onComplete?: () => void;
 	enabled?: boolean;
-	/**
-	 * When closing, if true, skip waiting on exit animations (instant unmount).
-	 * Used e.g. when swapping top-level menubar panels so exit animations still run for dismissals.
-	 */
 	shouldSkipExitAnimation?: () => boolean;
 }
 

tests/src/tests/browser-utils.ts

@@ -1,7 +1,6 @@
 import { type Locator } from "@vitest/browser/context";
 import { expect, vi } from "vitest";
 
-/** Mirrors `getSide` in menu.svelte.ts so tests match popper placement (incl. vertical). */
 export function getSubmenuPlacementSide(
 	triggerRect: DOMRect,
 	contentRect: DOMRect
@@ -18,9 +17,6 @@ export function getSubmenuPlacementSide(
 	return deltaY > 0 ? "bottom" : "top";
 }
 
-/**
- * Synthetic pointerleave coords on the trigger edge facing the submenu (same basis as menu intent).
- */
 export function getPointerLeaveTowardSubmenuClientCoords(
 	triggerRect: DOMRect,
 	contentRect: DOMRect
@@ -40,9 +36,6 @@ export function getPointerLeaveTowardSubmenuClientCoords(
 	}
 }
 
-/**
- * Midpoint between trigger and submenu along the placement axis (for "moving toward" synthetic moves).
- */
 export function getPointerMidpointTowardSubmenuClientCoords(
 	triggerRect: DOMRect,
 	contentRect: DOMRect
@@ -62,9 +55,6 @@ export function getPointerMidpointTowardSubmenuClientCoords(
 	}
 }
 
-/**
- * Point outside the submenu panel on the parent-menu side so intent can exit (not "entered submenu").
- */
 export function getPointerAwayFromSubmenuIntentClientCoords(
 	triggerRect: DOMRect,
 	subContentRect: DOMRect

tests/src/tests/context-menu/context-menu.browser.test.ts

@@ -180,7 +180,6 @@ it("should close submenu when pointer intent changes away from submenu", async (
 	const subContentWrapper = subContentEl.parentElement as HTMLElement;
 	const triggerRect = subTriggerEl.getBoundingClientRect();
 	const contentRect = subContentEl.getBoundingClientRect();
-	// edge-based leave coords can fall outside the intent corridor for some placements; midpoint matches menu geometry
 	const leavePt = getPointerMidpointTowardSubmenuClientCoords(triggerRect, contentRect);
 	const awayFromSub = getPointerAwayFromSubmenuIntentClientCoords(triggerRect, contentRect);