@x33025/sveltely 0.0.57 → 0.1.0

package/dist/components/{Popover/Popover.svelte → Library/Floating/Floating.svelte}

@@ -1,42 +1,73 @@
 <script lang="ts">
 	import { tick, onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
-	import { portalContent } from '../../actions/portal';
-	import { computePosition, type Anchor, type Align } from '../../utils/positioning';
+	import { portalContent } from '../../../actions/portal';
+	import {
+		autoAlignForViewport,
+		computePosition,
+		type Anchor
+	} from '../../../utils/positioning';
 	import {
-		registerPopover,
-		unregisterPopover,
-		setParentId,
-		setOpen,
 		hasOpenChild,
-		isAncestor
+		isAncestor,
+		registerFloating,
+		setOpen,
+		setParentId,
+		unregisterFloating
 	} from './registry.svelte';
 
+	type TriggerApi = {
+		useTrigger: (node: HTMLElement) => { destroy: () => void };
+		open: boolean;
+		toggle: () => void;
+		openPanel: () => Promise<void>;
+		closePanel: () => void;
+	};
+
 	interface Props {
-		trigger: Snippet;
+		trigger: Snippet<[TriggerApi]>;
 		children: Snippet;
 		open?: boolean;
-		class?: string;
-		align?: Align;
-		anchor?: Anchor;
+		placement?: Anchor;
+		rootClass?: string;
+		rootStyle?: string;
+		panelClass?: string;
+		panelStyle?: string;
+		contentClass?: string;
+		contentStyle?: string;
+		panelRole?: string;
+		panelAriaModal?: 'true' | 'false';
+		matchPanelRadiusToSource?: boolean;
+		closeOnPointerLeave?: boolean;
 	}
+
 	type Point = { x: number; y: number };
-	const createPopoverId = () => {
+
+	const createFloatingId = () => {
 		if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
 			return crypto.randomUUID();
 		}
-		return `popover-${Math.random().toString(36).slice(2, 10)}`;
+		return `floating-${Math.random().toString(36).slice(2, 10)}`;
 	};
 
 	let {
 		trigger,
 		children,
 		open = $bindable(false),
-		class: className = '',
-		align = 'left',
-		anchor = 'bottom'
+		placement = 'bottom',
+		rootClass = '',
+		rootStyle = '',
+		panelClass = '',
+		panelStyle = '',
+		contentClass = '',
+		contentStyle = '',
+		panelRole = 'dialog',
+		panelAriaModal = 'false',
+		matchPanelRadiusToSource = false,
+		closeOnPointerLeave = false
 	}: Props = $props();
 
+	let rootEl = $state<HTMLElement | null>(null);
 	let triggerEl = $state<HTMLElement | null>(null);
 	let panelEl = $state<HTMLElement | null>(null);
 	let contentEl = $state<HTMLElement | null>(null);
@@ -45,35 +76,42 @@
 	let resolvedAnchor = $state<Anchor>('bottom');
 	let computedPanelRadius = $state<string | null>(null);
 
-	const popoverId = createPopoverId();
-	let parentPopoverId = $state<string | null>(null);
+	const floatingId = createFloatingId();
+	let parentFloatingId = $state<string | null>(null);
 
-	/**
-	 * Detect parent popover by walking the DOM upward from the trigger element.
-	 * Works even with portaling because the trigger stays in its original
-	 * DOM position (inside the parent's portaled content).
-	 */
-	const detectParentPopoverId = (): string | null => {
-		let current = triggerEl?.parentElement ?? null;
+	registerFloating(floatingId);
+
+	const detectParentFloatingId = (): string | null => {
+		let current = rootEl?.parentElement ?? null;
 		while (current) {
-			const id = current.getAttribute('data-popover-id');
-			if (id && id !== popoverId) return id;
+			const id = current.getAttribute('data-floating-id');
+			if (id && id !== floatingId) return id;
 			current = current.parentElement;
 		}
 		return null;
 	};
 
-	registerPopover(popoverId);
-
 	$effect(() => {
-		if (!triggerEl) return;
-		parentPopoverId = detectParentPopoverId();
-		setParentId(popoverId, parentPopoverId);
+		if (!rootEl) return;
+		parentFloatingId = detectParentFloatingId();
+		setParentId(floatingId, parentFloatingId);
 	});
 
-	$effect(() => setOpen(popoverId, open));
+	$effect(() => setOpen(floatingId, open));
+
+	onDestroy(() => unregisterFloating(floatingId));
 
-	onDestroy(() => unregisterPopover(popoverId));
+	const useTrigger = (node: HTMLElement) => {
+		triggerEl = node;
+
+		return {
+			destroy: () => {
+				if (triggerEl === node) {
+					triggerEl = null;
+				}
+			}
+		};
+	};
 
 	const isInsideRect = (rect: DOMRect, x: number, y: number) =>
 		x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
@@ -95,15 +133,15 @@
 
 	const getSafePolygon = (
 		triggerRect: DOMRect,
-		popoverRect: DOMRect,
+		floatingRect: DOMRect,
 		currentAnchor: Anchor
 	): Point[] => {
 		if (currentAnchor === 'bottom') {
 			return [
 				{ x: triggerRect.left, y: triggerRect.top },
 				{ x: triggerRect.right, y: triggerRect.top },
-				{ x: popoverRect.right, y: popoverRect.top },
-				{ x: popoverRect.left, y: popoverRect.top }
+				{ x: floatingRect.right, y: floatingRect.top },
+				{ x: floatingRect.left, y: floatingRect.top }
 			];
 		}
 
@@ -111,25 +149,25 @@
 			return [
 				{ x: triggerRect.left, y: triggerRect.bottom },
 				{ x: triggerRect.right, y: triggerRect.bottom },
-				{ x: popoverRect.right, y: popoverRect.bottom },
-				{ x: popoverRect.left, y: popoverRect.bottom }
+				{ x: floatingRect.right, y: floatingRect.bottom },
+				{ x: floatingRect.left, y: floatingRect.bottom }
 			];
 		}
 
-		if (currentAnchor === 'leading') {
+		if (currentAnchor === 'left') {
 			return [
 				{ x: triggerRect.right, y: triggerRect.top },
 				{ x: triggerRect.right, y: triggerRect.bottom },
-				{ x: popoverRect.right, y: popoverRect.bottom },
-				{ x: popoverRect.right, y: popoverRect.top }
+				{ x: floatingRect.right, y: floatingRect.bottom },
+				{ x: floatingRect.right, y: floatingRect.top }
 			];
 		}
 
 		return [
 			{ x: triggerRect.left, y: triggerRect.top },
 			{ x: triggerRect.left, y: triggerRect.bottom },
-			{ x: popoverRect.left, y: popoverRect.bottom },
-			{ x: popoverRect.left, y: popoverRect.top }
+			{ x: floatingRect.left, y: floatingRect.bottom },
+			{ x: floatingRect.left, y: floatingRect.top }
 		];
 	};
 
@@ -140,7 +178,7 @@
 	};
 
 	const updateRadiusFromSource = () => {
-		if (!panelEl || !contentEl) {
+		if (!matchPanelRadiusToSource || !panelEl || !contentEl) {
 			computedPanelRadius = null;
 			return;
 		}
@@ -172,6 +210,23 @@
 		computedPanelRadius = `${panelRadius}px`;
 	};
 
+	const positionPanel = () => {
+		if (!triggerEl || !panelEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		const preferredAlign =
+			placement === 'top' || placement === 'bottom' ? autoAlignForViewport(rect) : 'left';
+		const result = computePosition(
+			rect,
+			panelEl.offsetWidth,
+			panelEl.offsetHeight,
+			placement,
+			preferredAlign
+		);
+		panelCoords = { top: result.top, left: result.left };
+		panelTransform = result.transform;
+		resolvedAnchor = result.anchor;
+	};
+
 	const positionAndMeasure = async () => {
 		await tick();
 		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
@@ -179,31 +234,22 @@
 		updateRadiusFromSource();
 	};
 
-	const getPopoverIdsFromEvent = (event: Event) => {
+	const getFloatingIdsFromEvent = (event: Event) => {
 		const ids: string[] = [];
 		for (const node of event.composedPath()) {
 			if (!(node instanceof Element)) continue;
-			const id = node.getAttribute('data-popover-id');
+			const id = node.getAttribute('data-floating-id');
 			if (!id || ids.includes(id)) continue;
 			ids.push(id);
 		}
 		return ids;
 	};
 
-	const isInPopoverTree = (candidateId: string | null) => isAncestor(candidateId, popoverId);
+	const isInFloatingTree = (candidateId: string | null) => isAncestor(candidateId, floatingId);
 
-	const isEventInPopoverTree = (event: Event) => {
-		const ids = getPopoverIdsFromEvent(event);
-		return ids.some(isInPopoverTree);
-	};
-
-	const positionPanel = () => {
-		if (!triggerEl || !panelEl) return;
-		const rect = triggerEl.getBoundingClientRect();
-		const result = computePosition(rect, panelEl.offsetWidth, panelEl.offsetHeight, anchor, align);
-		panelCoords = { top: result.top, left: result.left };
-		panelTransform = result.transform;
-		resolvedAnchor = result.anchor;
+	const isEventInFloatingTree = (event: Event) => {
+		const ids = getFloatingIdsFromEvent(event);
+		return ids.some(isInFloatingTree);
 	};
 
 	async function openPanel() {
@@ -224,15 +270,9 @@
 		}
 	}
 
-	function handleTriggerKeydown(event: KeyboardEvent) {
-		if (event.key !== 'Enter' && event.key !== ' ') return;
-		event.preventDefault();
-		toggle();
-	}
-
 	function handleOutsideClick(event: MouseEvent) {
 		if (!open) return;
-		if (isEventInPopoverTree(event)) return;
+		if (isEventInFloatingTree(event)) return;
 		closePanel();
 	}
 
@@ -242,17 +282,18 @@
 	}
 
 	function handlePointerMove(event: MouseEvent) {
+		if (!closeOnPointerLeave) return;
 		if (!open || !triggerEl || !panelEl) return;
-		if (isEventInPopoverTree(event)) return;
-		if (hasOpenChild(popoverId)) return;
+		if (isEventInFloatingTree(event)) return;
+		if (hasOpenChild(floatingId)) return;
 
 		const pointer = { x: event.clientX, y: event.clientY };
 		const triggerRect = triggerEl.getBoundingClientRect();
-		const popoverRect = panelEl.getBoundingClientRect();
-		const safePolygon = getSafePolygon(triggerRect, popoverRect, resolvedAnchor);
+		const floatingRect = panelEl.getBoundingClientRect();
+		const safePolygon = getSafePolygon(triggerRect, floatingRect, resolvedAnchor);
 
 		if (isInsideRect(triggerRect, pointer.x, pointer.y)) return;
-		if (isInsideRect(popoverRect, pointer.x, pointer.y)) return;
+		if (isInsideRect(floatingRect, pointer.x, pointer.y)) return;
 		if (pointInPolygon(pointer, safePolygon)) return;
 
 		closePanel();
@@ -262,51 +303,64 @@
 		if (!open) return;
 		void positionAndMeasure();
 	});
+
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		const handleWindowChange = () => closePanel();
+		window.addEventListener('scroll', handleWindowChange, true);
+		window.addEventListener('resize', handleWindowChange);
+		return () => {
+			window.removeEventListener('scroll', handleWindowChange, true);
+			window.removeEventListener('resize', handleWindowChange);
+		};
+	});
+
+	const resolvedPanelStyle = $derived.by(() => {
+		const declarations = [
+			`top: ${panelCoords.top}px;`,
+			`left: ${panelCoords.left}px;`,
+			`transform: ${panelTransform};`
+		];
+		if (computedPanelRadius) {
+			declarations.push(`border-radius: ${computedPanelRadius};`);
+		}
+		if (panelStyle) {
+			declarations.push(panelStyle);
+		}
+		return declarations.join(' ');
+	});
 </script>
 
 <svelte:window
 	onclick={handleOutsideClick}
-	onscroll={closePanel}
-	onresize={closePanel}
 	onkeydown={handleEscape}
 	onmousemove={handlePointerMove}
 />
 
 <div
-	class="relative inline-block text-left"
-	data-popover-root
-	data-popover-id={popoverId}
-	data-popover-parent-id={parentPopoverId ?? ''}
+	bind:this={rootEl}
+	class={rootClass}
+	style={rootStyle}
+	data-floating-root
+	data-floating-id={floatingId}
+	data-floating-parent-id={parentFloatingId ?? ''}
 >
-	<div bind:this={triggerEl}>
-		<div
-			class="text-left"
-			role="button"
-			tabindex="0"
-			onclick={toggle}
-			onkeydown={handleTriggerKeydown}
-			aria-expanded={open}
-			aria-haspopup="dialog"
-		>
-			{@render trigger()}
-		</div>
-	</div>
+	{@render trigger({ useTrigger, open, toggle, openPanel, closePanel })}
 
 	{#if open}
 		<div
 			use:portalContent
-			class="popover fixed z-50 focus:outline-none {className}"
-			data-popover
-			data-popover-id={popoverId}
-			data-popover-parent-id={parentPopoverId ?? ''}
-			style="top: {panelCoords.top}px; left: {panelCoords.left}px; transform: {panelTransform}; border-radius: {computedPanelRadius ??
-				''};"
-			role="dialog"
-			aria-modal="false"
-			tabindex="-1"
 			bind:this={panelEl}
+			class={panelClass}
+			style={resolvedPanelStyle}
+			data-floating
+			data-floating-id={floatingId}
+			data-floating-parent-id={parentFloatingId ?? ''}
+			role={panelRole}
+			aria-modal={panelAriaModal}
+			tabindex="-1"
 		>
-			<div role="none" bind:this={contentEl}>
+			<div bind:this={contentEl} class={contentClass} style={contentStyle}>
 				{@render children()}
 			</div>
 		</div>

package/dist/components/Library/Floating/Floating.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import { type Anchor } from '../../../utils/positioning';
+type TriggerApi = {
+    useTrigger: (node: HTMLElement) => {
+        destroy: () => void;
+    };
+    open: boolean;
+    toggle: () => void;
+    openPanel: () => Promise<void>;
+    closePanel: () => void;
+};
+interface Props {
+    trigger: Snippet<[TriggerApi]>;
+    children: Snippet;
+    open?: boolean;
+    placement?: Anchor;
+    rootClass?: string;
+    rootStyle?: string;
+    panelClass?: string;
+    panelStyle?: string;
+    contentClass?: string;
+    contentStyle?: string;
+    panelRole?: string;
+    panelAriaModal?: 'true' | 'false';
+    matchPanelRadiusToSource?: boolean;
+    closeOnPointerLeave?: boolean;
+}
+declare const Floating: import("svelte").Component<Props, {}, "open">;
+type Floating = ReturnType<typeof Floating>;
+export default Floating;

package/dist/components/Library/Floating/registry.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function registerFloating(id: string): void;
+export declare function unregisterFloating(id: string): void;
+export declare function setParentId(id: string, parentId: string | null): void;
+export declare function setOpen(id: string, open: boolean): void;
+export declare function hasOpenChild(parentId: string): boolean;
+export declare function isAncestor(candidateId: string | null, ancestorId: string): boolean;

package/dist/components/{Popover → Library/Floating}/registry.svelte.js

@@ -1,8 +1,8 @@
 const registry = new Map();
-export function registerPopover(id) {
+export function registerFloating(id) {
     registry.set(id, { parentId: null, open: false });
 }
-export function unregisterPopover(id) {
+export function unregisterFloating(id) {
     registry.delete(id);
 }
 export function setParentId(id, parentId) {
@@ -15,12 +15,6 @@ export function setOpen(id, open) {
     if (entry)
         entry.open = open;
 }
-export function getParentId(id) {
-    return registry.get(id)?.parentId ?? null;
-}
-/**
- * Returns true if any registered popover lists `parentId` as its parent and is currently open.
- */
 export function hasOpenChild(parentId) {
     for (const [, entry] of registry) {
         if (entry.parentId === parentId && entry.open)
@@ -28,10 +22,6 @@ export function hasOpenChild(parentId) {
     }
     return false;
 }
-/**
- * Walk the parent chain from `candidateId` upward.
- * Returns true if `ancestorId` is found in the chain.
- */
 export function isAncestor(candidateId, ancestorId) {
     let currentId = candidateId;
     const visited = new Set();
@@ -45,14 +35,3 @@ export function isAncestor(candidateId, ancestorId) {
     }
     return false;
 }
-/**
- * Returns the IDs of all currently open popovers.
- */
-export function getOpenPopoverIds() {
-    const ids = [];
-    for (const [id, entry] of registry) {
-        if (entry.open)
-            ids.push(id);
-    }
-    return ids;
-}

package/dist/components/{GlowEffect.svelte → Library/GlowEffect/GlowEffect.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
 	interface Props {
-		class?: string;
 		colors?: string[];
 		mode?: 'breathe' | 'colorShift';
 		blur?: number | 'softest' | 'soft' | 'medium' | 'strong' | 'stronger' | 'strongest' | 'none';
@@ -9,13 +10,18 @@
 	}
 
 	let {
-		class: className = '',
 		colors = ['#FF5733', '#33FF57', '#3357FF', '#F1C40F'],
 		mode = 'breathe',
 		blur = 'medium',
 		scale = 1,
-		duration = 5
-	}: Props = $props();
+		duration = 5,
+		...restProps
+	}: Props & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'glow-effect'));
 
 	const getBlurClass = (blurValue: Props['blur']) => {
 		if (typeof blurValue === 'number') return `blur-[${blurValue}px]`;
@@ -50,11 +56,14 @@
 </script>
 
 <div
-	class="pointer-events-none absolute inset-0 -z-10 h-full w-full overflow-hidden rounded-full {getBlurClass(
+	class="pointer-events-none absolute inset-0 -z-10 h-full w-full overflow-hidden {getBlurClass(
 		blur
-	)} {className}"
+	)}"
+	style={rootStyle}
 	style:isolation="isolate"
 	style:transform-origin="center"
+	style:border-radius="var(--sveltely-border-radius)"
+	{...props}
 >
 	<div
 		class="absolute transform-gpu {animationClass}"

package/dist/components/{GlowEffect.svelte.d.ts → Library/GlowEffect/GlowEffect.svelte.d.ts}

@@ -1,11 +1,12 @@
+import { type StyleProps } from '../../../style/surface';
 interface Props {
-    class?: string;
     colors?: string[];
     mode?: 'breathe' | 'colorShift';
     blur?: number | 'softest' | 'soft' | 'medium' | 'strong' | 'stronger' | 'strongest' | 'none';
     scale?: number;
     duration?: number;
 }
-declare const GlowEffect: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const GlowEffect: import("svelte").Component<$$ComponentProps, {}, "">;
 type GlowEffect = ReturnType<typeof GlowEffect>;
 export default GlowEffect;

package/dist/components/Library/GlowEffect/index.d.ts

@@ -0,0 +1 @@
+export { default } from './GlowEffect.svelte';

package/dist/components/Library/GlowEffect/index.js

@@ -0,0 +1 @@
+export { default } from './GlowEffect.svelte';