sheer-ui 0.0.0

package/src/lib/components/tooltip/types.ts

@@ -0,0 +1,175 @@
+import type { OpenCell } from '../../internal/open-cell.svelte.js';
+import type { FloatingLayerContentProps } from '../../internal/floating-layer/types.js';
+import type { DismissibleLayerProps } from '../../internal/dismissible-layer/types.js';
+import type { EscapeLayerProps } from '../../internal/escape-layer/types.js';
+import type { Snippet } from 'svelte';
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from '../../internal/types.js';
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from '../../internal/attribute-types.js';
+import type { PortalProps } from '../../internal/portal/index.js';
+import type { FloatingContentSnippetProps } from '../../internal/types.js';
+import type { TooltipTether as TooltipTetherImpl } from './tooltip.svelte.js';
+
+export type TooltipTether<Payload = never> = TooltipTetherImpl<Payload>;
+
+export type TooltipRootSnippetProps<Payload = never> = {
+	open: boolean;
+	triggerId: string | null;
+	payload: [Payload] extends [never] ? null : Payload | null;
+};
+
+export type TooltipProviderPropsWithoutHTML = WithChildren<{
+	/**
+	 * The delay in milliseconds before the tooltip opens.
+	 *
+	 * @defaultValue 700
+	 */
+	delayDuration?: number;
+
+	/**
+	 * How much time a user has to enter another trigger without
+	 * incurring a delay again.
+	 * @defaultValue 300
+	 */
+	skipDelayDuration?: number;
+
+	/**
+	 * Prevents tooltip from remaining open when hovering over the content.
+	 *
+	 * @defaultValue false
+	 */
+	disableHoverableContent?: boolean;
+
+	/**
+	 * When `true`, the tooltip will not close when you click on the trigger.
+	 *
+	 * @defaultValue false
+	 */
+	disableCloseOnTriggerClick?: boolean;
+
+	/**
+	 * When `true`, the tooltip will be disabled and will not open.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Prevent the tooltip from opening if the focus did not come using
+	 * the keyboard.
+	 *
+	 * @defaultValue false
+	 */
+	ignoreNonKeyboardFocus?: boolean;
+}>;
+
+export type TooltipProviderProps = TooltipProviderPropsWithoutHTML;
+
+export type TooltipRootPropsWithoutHTML<Payload = never> = Omit<
+	WithChildren<{
+		/**
+		 * The derivation source for the tooltip's open state: the internal cell
+		 * re-derives whenever this prop changes, and interactions override it
+		 * until the next change. Plain value — not bindable.
+		 */
+		open?: boolean;
+
+		/**
+		 * A caller-constructed cell (own source and, optionally, a delegate writer)
+		 * used instead of building one from `open`. When given, `open` is ignored.
+		 */
+		state?: OpenCell;
+
+		/**
+		 * A callback that will be called when the tooltip finishes opening/closing animations.
+		 */
+		onOpenChangeComplete?: OnChangeFn<boolean>;
+
+		/**
+		 * The delay in milliseconds before the tooltip opens.
+		 *
+		 * @defaultValue 700
+		 */
+		delayDuration?: number;
+
+		/**
+		 * Prevents tooltip from remaining open when hovering over the content.
+		 *
+		 * @defaultValue false
+		 */
+		disableHoverableContent?: boolean;
+
+		/**
+		 * When `true`, the tooltip will not close when you click on the trigger.
+		 *
+		 * @defaultValue false
+		 */
+		disableCloseOnTriggerClick?: boolean;
+
+		/**
+		 * When `true`, the tooltip will be disabled and will not open.
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+
+		/**
+		 * Prevent the tooltip from opening if the focus did not come using
+		 * the keyboard.
+		 *
+		 * @defaultValue false
+		 */
+		ignoreNonKeyboardFocus?: boolean;
+		/**
+		 * The active trigger id for controlled single tooltip mode.
+		 */
+		triggerId?: string | null;
+		/**
+		 * Shared tether used to connect detached triggers and infer payload types.
+		 */
+		tether?: TooltipTether<Payload> | undefined;
+	}>,
+	'children'
+> & {
+	children?: Snippet | Snippet<[TooltipRootSnippetProps<Payload>]>;
+};
+
+export type TooltipRootProps<Payload = never> = TooltipRootPropsWithoutHTML<Payload>;
+
+export type TooltipContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
+	Omit<FloatingLayerContentProps, 'content' | 'preventScroll'> &
+		Omit<DismissibleLayerProps, 'onInteractOutsideStart'> &
+		EscapeLayerProps & {
+			/**
+			 * When `true`, the tooltip will be forced to mount in the DOM.
+			 *
+			 * Useful for more control over the transition behavior.
+			 */
+			forceMount?: boolean;
+		},
+	FloatingContentSnippetProps
+>;
+
+export type TooltipContentProps = TooltipContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TooltipContentPropsWithoutHTML>;
+
+export type TooltipPortalPropsWithoutHTML = PortalProps;
+export type TooltipPortalProps = PortalProps;
+
+export type TooltipTriggerPropsWithoutHTML<Payload = never> = WithChild<{
+	/**
+	 * Whether the tooltip trigger is disabled or not.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean | null | undefined;
+	/**
+	 * Payload for the trigger used by singleton tooltip root snippets.
+	 */
+	payload?: [Payload] extends [never] ? unknown : Payload;
+	/**
+	 * Shared tether used to connect detached triggers and infer payload types.
+	 */
+	tether?: TooltipTether<Payload> | undefined;
+}>;
+
+export type TooltipTriggerProps<Payload = never> = TooltipTriggerPropsWithoutHTML<Payload> &
+	Without<BitsPrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML<Payload>>;

package/src/lib/components/tooltip/utils.ts

@@ -0,0 +1 @@
+export const TOOLTIP_OPEN_EVENT = "tooltip.open";

package/src/lib/icons/google-icon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg class={className ?? 'size-4'} viewBox="0 0 24 24" {...rest}>
+	<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" />
+	<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+	<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+	<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+</svg>

package/src/lib/icons/google-workspace.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 48 48" class="g-logo {className}" {...rest}>
+	<path
+		fill="#FFC107"
+		d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
+	<path
+		fill="#FF3D00"
+		d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
+	<path
+		fill="#4CAF50"
+		d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
+	<path
+		fill="#1976D2"
+		d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
+</svg>

package/src/lib/icons/icon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Type declaration for every `*.svelte` file in this folder, wired up by the `./icons/*` export's
+ * `types` condition.
+ *
+ * Without it, TypeScript resolves an icon import straight to the `.svelte` file and gives up:
+ * `svelte-check` copes (it runs the source through svelte2tsx), but a bare tsserver — which is what
+ * an editor uses for the `.ts` and `.svelte` files that *import* an icon — does not process `.svelte`
+ * modules reached through `node_modules`, and reports "has no default export" (ts1192). Every consumer
+ * reaches this package through a workspace symlink, so every icon import hit that.
+ *
+ * One declaration serves all of them because every icon takes exactly the same props.
+ */
+
+import type { Component } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+
+declare const Icon: Component<SVGAttributes<SVGSVGElement>>;
+
+export default Icon;

package/src/lib/icons/instagram.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class={className} aria-hidden="true" {...rest}>
+	<path
+		d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
+		fill="currentColor" />
+</svg>

package/src/lib/icons/instantly.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 32 32" class={className} {...rest}>
+	<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#0081FF" />
+	<path
+		d="M11.5214 18.3125H7.27312C7.12372 18.3125 7.02982 18.151 7.1041 18.0212L13.9093 6.12891H23.8678C24.0293 6.12891 24.1207 6.3142 24.0218 6.44231L19.1563 12.753C19.0578 12.8811 19.1488 13.0664 19.3103 13.0664H24.5063C24.6816 13.0664 24.7675 13.2797 24.6411 13.4011L9.83879 27.6479C9.69815 27.7832 9.46821 27.6505 9.51495 27.461L11.7105 18.5533C11.7405 18.431 11.6479 18.3125 11.5214 18.3125Z"
+		fill="white" />
+</svg>

package/src/lib/icons/linkedin.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class={className} aria-hidden="true" {...rest}>
+	<path
+		d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+		fill="currentColor" />
+</svg>

package/src/lib/icons/mailshake.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 32 32" class={className} {...rest}>
+	<path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0Z" fill="#3B82F6" />
+	<path
+		d="M24 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 8 20.5v-9a1.5 1.5 0 0 1 1.5-1.5h13a1.5 1.5 0 0 1 1.5 1.5Zm-1.5.81-6.5 4.19-6.5-4.19v-.81h13v.81Zm0 8.19v-6.69l-6.5 4.19-6.5-4.19v6.69h13Z"
+		fill="white" />
+</svg>

package/src/lib/icons/microsoft-365.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 48 48" class="ms-logo {className}" {...rest}>
+	<path fill="#0078d4" d="M6 6h16v16H6zm20 0h16v16H26zM6 26h16v16H6zm20 0h16v16H26z" />
+</svg>

package/src/lib/icons/passcode.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 48 48" class={className} {...rest}>
+	<title>Passcode</title>
+	<g fill="currentColor">
+		<circle cx="4.5" cy="4.5" r="1.5" /><circle cx="12" cy="4.5" r="1.5" /><circle cx="19.5" cy="4.5" r="1.5" />
+		<circle cx="4.5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19.5" cy="12" r="1.5" />
+		<circle cx="12" cy="19.5" r="1.5" />
+	</g>
+</svg>

package/src/lib/icons/replyio.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 136 136" class={className} {...rest}>
+	<path
+		d="M127.4 72.2c0 10.6-1.2 20-3.6 30.6-3.6 15.3-14.2 25.9-29.7 29.4-20.2 4.7-41.6 4.7-61.7 0-14.2-3.5-26.1-15.3-28.5-29.4C1.5 92.2.3 81.6.3 72.2c0-10.6 1.2-20 3.6-30.6 3.6-15.3 14.2-25.9 29.7-29.4 9.5-2.4 20.2-3.5 30.9-3.5s20.2 1.2 30.9 3.5c15.4 3.5 26.1 14.1 29.7 29.4 1.1 9.4 2.3 20 2.3 30.6Z"
+		fill="#F6B802" />
+	<path d="M103.2 65.2c17.894 0 32.4-14.506 32.4-32.4S121.094.4 103.2.4 70.8 14.906 70.8 32.8s14.506 32.4 32.4 32.4Z" fill="#005AFF" />
+</svg>

package/src/lib/icons/smartlead.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 40 40" class={className} {...rest}>
+	<path d="M0 5.03C0 2.25 2.25 0 5.03 0H34.97C37.75 0 40 2.25 40 5.03V34.97C40 37.75 37.75 40 34.97 40H5.03C2.25 40 0 37.75 0 34.97V5.03Z" fill="#6E58F1" />
+	<path
+		d="M5.77 17.1C5.77 13.65 8.56 10.85 12 10.85H12.35C13.81 10.85 14.99 12.03 14.99 13.49V20.7C14.99 22.16 13.81 23.34 12.35 23.34H12C8.56 23.34 5.77 20.55 5.77 17.1Z"
+		fill="white" />
+	<path
+		d="M16.41 11.95C16.41 11.28 16.8 10.68 17.41 10.4L26.47 6.33C27.59 5.82 28.85 6.65 28.85 7.88V26.45C28.85 27.69 27.57 28.51 26.45 27.99L17.39 23.8C16.79 23.52 16.41 22.92 16.41 22.26V21.4C16.41 20.69 16.84 20.06 17.5 19.81L22.55 17.89C23.28 17.62 23.28 16.58 22.55 16.3L17.5 14.39C16.84 14.14 16.41 13.51 16.41 12.8V11.95Z"
+		fill="white" />
+	<path
+		d="M34.22 18.59V18.21C34.22 16.12 32.53 14.42 30.45 14.42C30.34 14.42 30.26 14.51 30.26 14.61V22.18C30.26 22.29 30.34 22.37 30.45 22.37C32.53 22.37 34.22 20.68 34.22 18.59Z"
+		fill="white" />
+	<path
+		d="M11.99 25.76C11.99 25.39 12.29 25.09 12.66 25.09H16.17C16.54 25.09 16.84 25.39 16.84 25.76V31.74C16.84 33.08 15.76 34.17 14.42 34.17C13.08 34.17 11.99 33.08 11.99 31.74V25.76Z"
+		fill="white" />
+</svg>

package/src/lib/icons/smtp.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 24 24" class="smtp-logo overflow-visible {className}" {...rest}>
+	<defs><path id="tri" d="M2 5h20L12 11z" /></defs>
+	<path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7z" fill="currentColor" opacity="0.6" />
+	<use href="#tri" fill="currentColor" opacity="0.3" />
+	<use href="#tri" fill="currentColor" class="smtp-flap" />
+</svg>

package/src/lib/icons/x-logo.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let { class: className, ...rest }: import('svelte/elements').SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg" class={className} aria-hidden="true" {...rest}>
+	<path
+		d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+		fill="currentColor" />
+</svg>

package/src/lib/internal/animations-settled.svelte.ts

@@ -0,0 +1,119 @@
+import { untrack } from 'svelte';
+import type { Getter } from './tools/index.js';
+
+/**
+ * Resolves once the node's running animations/transitions finish (descendants included
+ * unless `subtree: false`) — `frames` frames first so a transition triggered by the current
+ * render has started. Environments without getAnimations (jsdom) resolve immediately
+ * after the frames.
+ * Infinite animations (Skeleton pulse, caret-blink, animate-spin) are excluded — their
+ * `finished` never resolves and would strand the caller.
+ *
+ * TODO(revisit ~mid-2027): ::details-content + `content-visibility allow-discrete` lets the
+ * browser hold content rendered through the close, deleting the disclosure use (83% 2026-07).
+ */
+export const animationsSettled = async (node: HTMLElement, { subtree = true, frames = 1 } = {}): Promise<void> => {
+	for (let i = 0; i < frames; i++) await new Promise(requestAnimationFrame);
+	if (typeof node.getAnimations !== 'function') return;
+
+	// A close during an enter retargets the transition: the browser cancels the enter (its
+	// `finished` rejects) and starts the exit, so re-query — one pass per frame. Bounded: a
+	// descendant whose transition is continuously retargeted (live progress bar, hover colour
+	// under a moving pointer) rejects every pass and must not hold the settle open forever.
+	for (let pass = 0; ; pass++) {
+		const running = node
+			.getAnimations({ subtree })
+			.filter((animation) => animation.effect?.getComputedTiming().iterations !== Infinity && isInFlight(animation));
+		if (running.length === 0) return;
+
+		const results = await Promise.allSettled(running.map((animation) => animation.finished));
+		if (pass === MAX_RETARGET_PASSES || !results.some((result) => result.status === 'rejected')) return;
+		await new Promise(requestAnimationFrame);
+	}
+};
+
+const MAX_RETARGET_PASSES = 3;
+
+// `finished` only ever resolves for an animation that is running (or about to be, `pending`);
+// paused/idle finite animations (animation-play-state: paused, a reduced-motion override) would
+// strand the caller exactly like an infinite one.
+const isInFlight = (animation: Animation) => animation.pending || animation.playState === 'running';
+
+export interface SettleRunner {
+	/** Runs `fn` once `node` settles, superseding any pending run. A null node cancels and drops. */
+	run(node: HTMLElement | null, fn: () => void): void;
+	cancel(): void;
+}
+
+/**
+ * The one supersession idiom for settle-deferred work: a monotonic token, so the newest
+ * `run` wins and everything older is dropped. Cancels when the owning effect is destroyed,
+ * which works at component init and inside an attachment body alike.
+ */
+export function createSettleRunner(options?: { subtree?: boolean; frames?: number }): SettleRunner {
+	let token = 0;
+
+	const cancel = () => {
+		token++;
+	};
+
+	const run = (node: HTMLElement | null, fn: () => void) => {
+		const current = ++token;
+		if (!node) return;
+		void animationsSettled(node, options).then(() => {
+			if (current === token) fn();
+		});
+	};
+
+	$effect(() => cancel);
+
+	return { run, cancel };
+}
+
+/**
+ * Fires `onComplete` after an open/close flip once the surface's own animations settle.
+ * Settle-based rather than transitionend so completion still fires when no transition
+ * runs (duration-0 override, reduced motion, jsdom). A flip while a settle is pending
+ * supersedes it; a flip while the surface has no node cancels and is dropped.
+ * `skipSettle` answers per flip: true completes synchronously and drops any pending settle
+ * (a menubar swap, where the outgoing menu's exit is zeroed).
+ * `pending` is true from a flip until its completion fires — an always-mounted surface is still
+ * rendered while a close is pending, which is what its locks key on. It flips in a pre-effect so
+ * it is already set when the surface's own effects and attachments run in the same flush; set a
+ * pass later, `open || pending` would read false for that pass, and a scroll lock would tear
+ * down and re-create itself mid-exit (and capture the locked body as the style to restore).
+ */
+export function useOpenChangeComplete(
+	open: Getter<boolean>,
+	ref: Getter<HTMLElement | null>,
+	onComplete: (open: boolean) => void,
+	skipSettle: (open: boolean) => boolean = () => false,
+): { readonly pending: boolean } {
+	let prevOpen = open();
+	let pending = $state(false);
+	const settle = createSettleRunner({ subtree: false });
+	$effect.pre(() => {
+		const el = ref();
+		const isOpen = open();
+		if (isOpen === prevOpen) return;
+		prevOpen = isOpen;
+		untrack(() => {
+			if (!el || skipSettle(isOpen)) {
+				settle.cancel();
+				pending = false;
+				if (el) onComplete(isOpen);
+				return;
+			}
+			pending = true;
+			settle.run(el, () => {
+				pending = false;
+				onComplete(isOpen);
+			});
+		});
+	});
+	return {
+		get pending() {
+			return pending;
+		},
+	};
+}