sheer-ui 0.0.0

package/src/lib/components/pin-input/usePasswordManager.svelte.ts

@@ -0,0 +1,122 @@
+import { getWindow, type DOMContext, type ReadableBox, type WritableBox } from '../../internal/tools/index.js';
+import type { PinInputRootPropsWithoutHTML } from './types.js';
+
+const PWM_BADGE_MARGIN_RIGHT = 18;
+const PWM_BADGE_SPACE_WIDTH_PX = 40;
+const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const;
+
+const PASSWORD_MANAGER_SELECTORS = [
+	'[data-lastpass-icon-root]', // LastPass,
+	'com-1password-button', // 1Password,
+	'[data-dashlanecreated]', // Dashlane,
+	'[style$="2147483647 !important;"]', // Bitwarden
+].join(',');
+
+type UsePasswordManagerBadgeProps = {
+	containerRef: WritableBox<HTMLElement | null>;
+	inputRef: WritableBox<HTMLInputElement | null>;
+	pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML['pushPasswordManagerStrategy']>;
+	isFocused: ReadableBox<boolean>;
+	domContext: DOMContext;
+};
+
+export function usePasswordManagerBadge({
+	containerRef,
+	inputRef,
+	pushPasswordManagerStrategy,
+	isFocused,
+	domContext,
+}: UsePasswordManagerBadgeProps) {
+	let hasPwmBadge = $state(false);
+	let hasPwmBadgeSpace = $state(false);
+	let done = $state(false);
+
+	function willPushPwmBadge() {
+		const strategy = pushPasswordManagerStrategy.current;
+		if (strategy === 'none') return false;
+
+		const increaseWidthCase = strategy === 'increase-width' && hasPwmBadge && hasPwmBadgeSpace;
+
+		return increaseWidthCase;
+	}
+
+	function trackPwmBadge() {
+		const container = containerRef.current;
+		const input = inputRef.current;
+		if (!container || !input || done || pushPasswordManagerStrategy.current === 'none') return;
+
+		const elementToCompare = container;
+
+		// get the top right-center point of the container
+		// that is usually where most password managers place their badge
+		const rightCornerX = elementToCompare.getBoundingClientRect().left + elementToCompare.offsetWidth;
+		const centeredY = elementToCompare.getBoundingClientRect().top + elementToCompare.offsetHeight / 2;
+		const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
+		const y = centeredY;
+
+		// do an extra search to check for all the password manager badges
+		const passwordManagerStrategy = domContext.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
+
+		// if no password manager is detected, dispatch document.elementFromPoint to
+		// identify the badges
+		if (passwordManagerStrategy.length === 0) {
+			const maybeBadgeEl = domContext.getDocument().elementFromPoint(x, y);
+
+			// if the found element is the container,
+			// then it is not a badge, most times there is no badge in this case
+			if (maybeBadgeEl === container) return;
+		}
+
+		hasPwmBadge = true;
+		done = true;
+	}
+
+	$effect(() => {
+		const container = containerRef.current;
+		if (!container || pushPasswordManagerStrategy.current === 'none') return;
+
+		// check if the pwm area is fully visible
+		function checkHasSpace() {
+			const viewportWidth = getWindow(container).innerWidth;
+			const distanceToRightEdge = viewportWidth - container!.getBoundingClientRect().right;
+			hasPwmBadgeSpace = distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX;
+		}
+
+		checkHasSpace();
+		const interval = setInterval(checkHasSpace, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+
+	$effect(() => {
+		const focused = isFocused.current || domContext.getActiveElement() === inputRef.current;
+
+		if (pushPasswordManagerStrategy.current === 'none' || !focused) return;
+
+		const t1 = setTimeout(trackPwmBadge, 0);
+		const t2 = setTimeout(trackPwmBadge, 2000);
+		const t3 = setTimeout(trackPwmBadge, 5000);
+		const t4 = setTimeout(() => {
+			done = true;
+		}, 6000);
+
+		return () => {
+			clearTimeout(t1);
+			clearTimeout(t2);
+			clearTimeout(t3);
+			clearTimeout(t4);
+		};
+	});
+
+	return {
+		get hasPwmBadge() {
+			return hasPwmBadge;
+		},
+		get willPushPwmBadge() {
+			return willPushPwmBadge();
+		},
+		PWM_BADGE_SPACE_WIDTH,
+	};
+}

package/src/lib/components/popover/components/popover-close.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PopoverCloseProps } from '../types.js';
+	import { PopoverCloseState } from '../popover.svelte.js';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { child, children, id = createId(uid), ref = $bindable(null), ...restProps }: PopoverCloseProps = $props();
+
+	const closeState = PopoverCloseState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'popover-close',
+			},
+			closeState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/popover/components/popover-content.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PopoverContentProps } from '../types.js';
+	import { PopoverContentState } from '../popover.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { useNativePopoverLifecycle } from '../../../internal/native-popover.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		side = 'bottom',
+		align = 'center',
+		customAnchor = null,
+		style,
+		// No native equivalent — accepted for API compatibility but intentionally ignored.
+		// Native popovers don't trap focus or lock scroll (ARIA-correct for a non-modal
+		// popover), and the content is always mounted (the popover toggles `display` itself),
+		// so trapFocus / preventScroll / forceMount / the FU auto-focus hooks are no-ops.
+		// Dismissal is the UA's (`popover="auto"` light dismiss + top-layer Escape), so the
+		// onInteractOutside / onEscapeKeydown interception hooks are no-ops too.
+		// The remaining FU-only positioning props (sideOffset, avoidCollisions, …) ride in
+		// restProps; native CSS `anchor()` positioning ignores them.
+		trapFocus = true,
+		preventScroll = false,
+		forceMount = false,
+		onOpenAutoFocus = () => {},
+		onCloseAutoFocus = () => {},
+		onInteractOutside = () => {},
+		onEscapeKeydown = () => {},
+		...restProps
+	}: PopoverContentProps = $props();
+
+	const contentState = PopoverContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		customAnchor: boxWith(() => customAnchor),
+	});
+
+	const lifecycleProps = useNativePopoverLifecycle(contentState, { anchor: () => customAnchor, mode: 'auto' });
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'popover-content',
+				class:
+					'bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden transition-[opacity,scale,translate,display,overlay] transition-discrete opacity-0 scale-95 open:data-[state=open]:opacity-100 open:data-[state=open]:scale-100 starting:open:data-[state=open]:opacity-0 starting:open:data-[state=open]:scale-95',
+			},
+			restProps,
+			contentState.props,
+			{ style },
+			lifecycleProps,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...contentState.snippetProps })}
+{:else}
+	<div {...mergedProps} bind:this={ref} data-side={side} data-align={align}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/popover/components/popover-header.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-header" class={join('flex flex-col gap-1 text-sm', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/popover/components/popover-title.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-title" class={join('font-medium', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/popover/components/popover-trigger.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PopoverTriggerProps } from '../types.js';
+	import { PopoverTriggerState } from '../popover.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		type = 'button',
+		disabled = false,
+		openOnHover = false,
+		openDelay = 700,
+		closeDelay = 300,
+		...restProps
+	}: PopoverTriggerProps = $props();
+
+	const triggerState = PopoverTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+		openOnHover: boxWith(() => openOnHover),
+		openDelay: boxWith(() => openDelay),
+		closeDelay: boxWith(() => closeDelay),
+	});
+
+	const mergedProps = $derived(mergeProps({ 'data-slot': 'popover-trigger' }, restProps, triggerState.props, { type }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/popover/components/popover.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { PopoverRootProps } from '../types.js';
+	import { PopoverRootState } from '../popover.svelte.js';
+	import { OpenCell } from '../../../internal/open-cell.svelte.js';
+	import { boxWith } from '../../../internal/tools/index.js';
+
+	let { open = false, onOpenChangeComplete = () => {}, state, children }: PopoverRootProps = $props();
+
+	// Root owns both the machinery and the cell; `open` (the prop) is the cell's
+	// derivation source, and the children snippet is the only way the cell leaves.
+	// A caller-built `state` cell (with its own source/writer) takes over both roles.
+	// The cell's identity is fixed at mount — swapping `state` later is not supported.
+	// The engine keeps its boxed-open interface (vendored, ADR 0006); the box is a
+	// bridge over the cell, so the cell stays the one owner of `open`.
+	// svelte-ignore state_referenced_locally
+	const popover = state ?? new OpenCell(() => open);
+	PopoverRootState.create({
+		open: boxWith(
+			() => popover.open,
+			(value) => (popover.open = value),
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+{@render children?.(popover)}

package/src/lib/components/popover/exports.ts

@@ -0,0 +1,13 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../../internal/portal/portal.svelte";
+
+export type {
+	PopoverRootProps as RootProps,
+	PopoverContentProps as ContentProps,
+	PopoverTriggerProps as TriggerProps,
+	PopoverCloseProps as CloseProps,
+	PopoverPortalProps as PortalProps,
+} from "./types.js";

package/src/lib/components/popover/index.ts

@@ -0,0 +1,2 @@
+export * as Popover from './exports.js';
+export * from './exports.js';