@x33025/sveltely 0.0.50 → 0.0.53

package/dist/components/AsyncButton.svelte

@@ -10,6 +10,8 @@
 		label: string;
 		action: () => void | Promise<void>;
 		error?: unknown | null;
+		loading?: boolean;
+		disableWhileLoading?: boolean;
 		style?: 'iconAndLabel' | 'iconOnly';
 	} & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
 
@@ -18,6 +20,8 @@
 		label,
 		action,
 		error = $bindable<unknown | null>(null),
+		loading = undefined,
+		disableWhileLoading = true,
 		style: styleMode = 'iconAndLabel',
 		disabled = false,
 		class: className = '',
@@ -25,18 +29,31 @@
 		...props
 	}: Props = $props();
 
-	let pending = $state(false);
+	let internalLoading = $state(false);
+
+	const isControlledLoading = $derived(loading !== undefined);
+	const effectiveLoading = $derived(isControlledLoading ? loading : internalLoading);
+	const effectiveDisabled = $derived(disabled || (disableWhileLoading && effectiveLoading));
 
 	const handleClick = async () => {
-		if (disabled || pending) return;
+		if (effectiveDisabled) return;
 		error = null;
-		pending = true;
+		if (isControlledLoading) {
+			try {
+				await action();
+			} catch (caught) {
+				error = caught;
+			}
+			return;
+		}
+
+		internalLoading = true;
 		try {
 			await action();
 		} catch (caught) {
 			error = caught;
 		} finally {
-			pending = false;
+			internalLoading = false;
 		}
 	};
 
@@ -52,21 +69,23 @@
 	<button
 		{type}
 		class="inline-flex items-center gap-2 disabled:cursor-not-allowed disabled:opacity-50 {className}"
-		disabled={disabled || pending}
-		aria-busy={pending}
+		disabled={effectiveDisabled}
+		aria-busy={effectiveLoading}
 		aria-label={styleMode === 'iconOnly' ? label : undefined}
 		data-error={error ? 'true' : 'false'}
 		{...props}
 		onclick={handleClick}
 	>
-		{#if pending}
-			<Spinner class="async-button-icon size-4" />
-		{:else if error}
-			<CircleAlertIcon class="async-button-icon size-4 text-red-600" />
-		{:else if icon}
-			{@const Icon = icon}
-			<Icon class="async-button-icon size-4" />
-		{/if}
+		<span class="inline-grid size-4 shrink-0 place-items-center">
+			{#if effectiveLoading}
+				<Spinner class="async-button-icon size-4" />
+			{:else if error}
+				<CircleAlertIcon class="async-button-icon size-4 text-red-600" />
+			{:else if icon}
+				{@const Icon = icon}
+				<Icon class="async-button-icon size-4" />
+			{/if}
+		</span>
 		{#if styleMode === 'iconAndLabel'}
 			<span class="async-button-text">{label}</span>
 		{/if}

package/dist/components/AsyncButton.svelte.d.ts

@@ -7,6 +7,8 @@ type Props = {
     label: string;
     action: () => void | Promise<void>;
     error?: unknown | null;
+    loading?: boolean;
+    disableWhileLoading?: boolean;
     style?: 'iconAndLabel' | 'iconOnly';
 } & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
 declare const AsyncButton: Component<Props, {}, "error">;

package/dist/components/Popover/Popover.svelte

@@ -1,29 +1,31 @@
 <script lang="ts">
-	import { tick } from 'svelte';
+	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 {
+		registerPopover,
+		unregisterPopover,
+		setParentId,
+		setOpen,
+		hasOpenChild,
+		isAncestor
+	} from './registry.svelte';
 
 	interface Props {
 		trigger: Snippet;
 		children: Snippet;
 		open?: boolean;
 		class?: string;
-		align?: 'left' | 'center' | 'right';
-		anchor?: 'top' | 'bottom' | 'leading' | 'trailing';
+		align?: Align;
+		anchor?: Anchor;
 	}
-	type Anchor = 'top' | 'bottom' | 'leading' | 'trailing';
-	type Align = 'left' | 'center' | 'right';
 	type Point = { x: number; y: number };
-	type Placement = {
-		top: number;
-		left: number;
-		transform:
-			| 'none'
-			| 'translateX(-50%)'
-			| 'translateX(-100%)'
-			| 'translateY(-100%)'
-			| 'translate(-50%, -100%)'
-			| 'translate(-100%, -100%)';
+	const createPopoverId = () => {
+		if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+			return crypto.randomUUID();
+		}
+		return `popover-${Math.random().toString(36).slice(2, 10)}`;
 	};
 
 	let {
@@ -37,9 +39,41 @@
 
 	let triggerEl = $state<HTMLElement | null>(null);
 	let panelEl = $state<HTMLElement | null>(null);
+	let contentEl = $state<HTMLElement | null>(null);
 	let panelCoords = $state({ top: 0, left: 0 });
 	let panelTransform = $state('none');
 	let resolvedAnchor = $state<Anchor>('bottom');
+	let computedPanelRadius = $state<string | null>(null);
+
+	const popoverId = createPopoverId();
+	let parentPopoverId = $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;
+		while (current) {
+			const id = current.getAttribute('data-popover-id');
+			if (id && id !== popoverId) return id;
+			current = current.parentElement;
+		}
+		return null;
+	};
+
+	registerPopover(popoverId);
+
+	$effect(() => {
+		if (!triggerEl) return;
+		parentPopoverId = detectParentPopoverId();
+		setParentId(popoverId, parentPopoverId);
+	});
+
+	$effect(() => setOpen(popoverId, open));
+
+	onDestroy(() => unregisterPopover(popoverId));
 
 	const isInsideRect = (rect: DOMRect, x: number, y: number) =>
 		x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
@@ -99,136 +133,87 @@
 		];
 	};
 
-	const oppositeAnchor = (value: Anchor): Anchor => {
-		if (value === 'top') return 'bottom';
-		if (value === 'bottom') return 'top';
-		if (value === 'leading') return 'trailing';
-		return 'leading';
-	};
-
-	const flippedAlign = (value: Align): Align => {
-		if (value === 'center') return 'center';
-		return value === 'left' ? 'right' : 'left';
+	const parsePx = (value: string) => {
+		const first = value.split(' ')[0];
+		const parsed = Number.parseFloat(first);
+		return Number.isFinite(parsed) ? parsed : 0;
 	};
 
-	const getPlacement = (rect: DOMRect, nextAnchor: Anchor, nextAlign: Align): Placement => {
-		if (nextAnchor === 'top' || nextAnchor === 'bottom') {
-			const left =
-				nextAlign === 'left'
-					? rect.left + window.scrollX
-					: nextAlign === 'right'
-						? rect.right + window.scrollX
-						: rect.left + rect.width / 2 + window.scrollX;
-			const top =
-				nextAnchor === 'bottom' ? rect.bottom + window.scrollY : rect.top + window.scrollY;
-			if (nextAnchor === 'top' && nextAlign === 'center') {
-				return { top, left, transform: 'translate(-50%, -100%)' };
-			}
-			if (nextAnchor === 'top' && nextAlign === 'right') {
-				return { top, left, transform: 'translate(-100%, -100%)' };
-			}
-			if (nextAlign === 'center') {
-				return { top, left, transform: 'translateX(-50%)' };
-			}
-			if (nextAnchor === 'top') {
-				return { top, left, transform: 'translateY(-100%)' };
-			}
-			if (nextAlign === 'right') {
-				return { top, left, transform: 'translateX(-100%)' };
-			}
-			return { top, left, transform: 'none' };
+	const updateComputedPanelRadius = () => {
+		if (!panelEl || !contentEl) {
+			computedPanelRadius = null;
+			return;
 		}
 
-		if (nextAnchor === 'leading') {
-			return {
-				top: rect.top + window.scrollY,
-				left: rect.left + window.scrollX,
-				transform: 'translateX(-100%)'
-			};
+		const itemEl =
+			contentEl.querySelector<HTMLElement>('[data-popover-radius-item]') ||
+			contentEl.querySelector<HTMLElement>('.popover-item') ||
+			contentEl.querySelector<HTMLElement>('.dropdown-item');
+		if (!itemEl) {
+			computedPanelRadius = null;
+			return;
 		}
 
-		return {
-			top: rect.top + window.scrollY,
-			left: rect.right + window.scrollX,
-			transform: 'none'
-		};
+		const itemRect = itemEl.getBoundingClientRect();
+		const itemStyle = getComputedStyle(itemEl);
+		const itemRadius = parsePx(itemStyle.borderTopLeftRadius);
+		const effectiveItemRadius = Math.min(itemRadius, itemRect.height / 2, itemRect.width / 2);
+
+		const panelStyle = getComputedStyle(panelEl);
+		const panelPadding = Math.min(parsePx(panelStyle.paddingTop), parsePx(panelStyle.paddingLeft));
+
+		const panelRect = panelEl.getBoundingClientRect();
+		const outerRadius = Math.min(
+			effectiveItemRadius + panelPadding,
+			panelRect.height / 2,
+			panelRect.width / 2
+		);
+
+		computedPanelRadius = `${outerRadius}px`;
 	};
 
-	const getViewportRect = (placement: Placement, width: number, height: number) => {
-		let left = placement.left - window.scrollX;
-		let top = placement.top - window.scrollY;
-
-		if (placement.transform === 'translateX(-100%)') left -= width;
-		else if (placement.transform === 'translateX(-50%)') left -= width / 2;
-		else if (placement.transform === 'translateY(-100%)') top -= height;
-		else if (placement.transform === 'translate(-50%, -100%)') {
-			left -= width / 2;
-			top -= height;
-		} else if (placement.transform === 'translate(-100%, -100%)') {
-			left -= width;
-			top -= height;
-		}
+	const positionAndMeasure = async () => {
+		await tick();
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+		positionPanel();
+		updateComputedPanelRadius();
+	};
 
-		return { left, top, right: left + width, bottom: top + height };
+	const getPopoverIdsFromEvent = (event: Event) => {
+		const ids: string[] = [];
+		for (const node of event.composedPath()) {
+			if (!(node instanceof Element)) continue;
+			const id = node.getAttribute('data-popover-id');
+			if (!id || ids.includes(id)) continue;
+			ids.push(id);
+		}
+		return ids;
 	};
 
-	const overflowScore = (
-		rect: { left: number; top: number; right: number; bottom: number },
-		margin = 8
-	) => {
-		const leftOverflow = Math.max(0, margin - rect.left);
-		const rightOverflow = Math.max(0, rect.right - (window.innerWidth - margin));
-		const topOverflow = Math.max(0, margin - rect.top);
-		const bottomOverflow = Math.max(0, rect.bottom - (window.innerHeight - margin));
-		return leftOverflow + rightOverflow + topOverflow + bottomOverflow;
+	const isInPopoverTree = (candidateId: string | null) => isAncestor(candidateId, popoverId);
+
+	const isEventInPopoverTree = (event: Event) => {
+		const ids = getPopoverIdsFromEvent(event);
+		return ids.some(isInPopoverTree);
 	};
 
 	const positionPanel = () => {
 		if (!triggerEl || !panelEl) return;
 		const rect = triggerEl.getBoundingClientRect();
-		const width = panelEl.offsetWidth;
-		const height = panelEl.offsetHeight;
-		const candidates: Array<{ anchor: Anchor; align: Align }> = [
-			{ anchor, align },
-			{ anchor, align: flippedAlign(align) },
-			{ anchor: oppositeAnchor(anchor), align },
-			{ anchor: oppositeAnchor(anchor), align: flippedAlign(align) }
-		];
-
-		const unique = new Set<string>();
-		let bestPlacement: Placement | null = null;
-		let bestAnchor: Anchor | null = null;
-		let bestScore = Number.POSITIVE_INFINITY;
-
-		for (const candidate of candidates) {
-			const key = `${candidate.anchor}:${candidate.align}`;
-			if (unique.has(key)) continue;
-			unique.add(key);
-
-			const placement = getPlacement(rect, candidate.anchor, candidate.align);
-			const nextRect = getViewportRect(placement, width, height);
-			const score = overflowScore(nextRect);
-			if (score < bestScore) {
-				bestScore = score;
-				bestPlacement = placement;
-				bestAnchor = candidate.anchor;
-			}
-		}
-
-		if (!bestPlacement) return;
-		panelCoords = { top: bestPlacement.top, left: bestPlacement.left };
-		panelTransform = bestPlacement.transform;
-		if (bestAnchor) resolvedAnchor = bestAnchor;
+		const result = computePosition(rect, panelEl.offsetWidth, panelEl.offsetHeight, anchor, align);
+		panelCoords = { top: result.top, left: result.left };
+		panelTransform = result.transform;
+		resolvedAnchor = result.anchor;
 	};
 
 	async function openPanel() {
 		open = true;
-		await tick();
-		positionPanel();
+		await positionAndMeasure();
 	}
 
 	function closePanel() {
 		open = false;
+		computedPanelRadius = null;
 	}
 
 	function toggle() {
@@ -241,8 +226,7 @@
 
 	function handleOutsideClick(event: MouseEvent) {
 		if (!open) return;
-		const target = event.target as HTMLElement;
-		if (target.closest('[data-popover-root]') || target.closest('[data-popover]')) return;
+		if (isEventInPopoverTree(event)) return;
 		closePanel();
 	}
 
@@ -253,6 +237,8 @@
 
 	function handlePointerMove(event: MouseEvent) {
 		if (!open || !triggerEl || !panelEl) return;
+		if (isEventInPopoverTree(event)) return;
+		if (hasOpenChild(popoverId)) return;
 
 		const pointer = { x: event.clientX, y: event.clientY };
 		const triggerRect = triggerEl.getBoundingClientRect();
@@ -268,9 +254,12 @@
 
 	$effect(() => {
 		if (!open) return;
-		void tick().then(() => {
-			positionPanel();
-		});
+		void positionAndMeasure();
+	});
+
+	$effect(() => {
+		if (!open) return;
+		updateComputedPanelRadius();
 	});
 </script>
 
@@ -282,7 +271,12 @@
 	onmousemove={handlePointerMove}
 />
 
-<div class="relative inline-block text-left" data-popover-root>
+<div
+	class="relative inline-block text-left"
+	data-popover-root
+	data-popover-id={popoverId}
+	data-popover-parent-id={parentPopoverId ?? ''}
+>
 	<div bind:this={triggerEl}>
 		<button
 			type="button"
@@ -300,13 +294,18 @@
 			use:portalContent
 			class="popover fixed z-50 focus:outline-none {className}"
 			data-popover
-			style="top: {panelCoords.top}px; left: {panelCoords.left}px; transform: {panelTransform};"
+			data-popover-id={popoverId}
+			data-popover-parent-id={parentPopoverId ?? ''}
+			style="top: {panelCoords.top}px; left: {panelCoords.left}px; transform: {panelTransform}; border-radius: {computedPanelRadius ??
+				'0.375rem'};"
 			role="dialog"
 			aria-modal="false"
 			tabindex="-1"
 			bind:this={panelEl}
 		>
-			{@render children()}
+			<div role="none" bind:this={contentEl}>
+				{@render children()}
+			</div>
 		</div>
 	{/if}
 </div>

package/dist/components/Popover/Popover.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
+import { type Anchor, type Align } from '../../utils/positioning';
 interface Props {
     trigger: Snippet;
     children: Snippet;
     open?: boolean;
     class?: string;
-    align?: 'left' | 'center' | 'right';
-    anchor?: 'top' | 'bottom' | 'leading' | 'trailing';
+    align?: Align;
+    anchor?: Anchor;
 }
 declare const Popover: import("svelte").Component<Props, {}, "open">;
 type Popover = ReturnType<typeof Popover>;

package/dist/components/Popover/PopoverDebugOverlay.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { portalContent } from '../../actions/portal';
+	import { getOpenPopoverIds, getParentId } from './registry.svelte';
+
+	type Point = { x: number; y: number };
+	type Anchor = 'top' | 'bottom' | 'leading' | 'trailing';
+
+	interface PopoverGeometry {
+		id: string;
+		parentId: string | null;
+		triggerRect: DOMRect;
+		panelRect: DOMRect;
+		anchor: Anchor;
+		safePolygon: Point[];
+	}
+
+	let geometries = $state<PopoverGeometry[]>([]);
+
+	const inferAnchor = (trigger: DOMRect, panel: DOMRect): Anchor => {
+		const dx = panel.left + panel.width / 2 - (trigger.left + trigger.width / 2);
+		const dy = panel.top + panel.height / 2 - (trigger.top + trigger.height / 2);
+		if (Math.abs(dy) >= Math.abs(dx)) return dy >= 0 ? 'bottom' : 'top';
+		return dx >= 0 ? 'trailing' : 'leading';
+	};
+
+	const getSafePolygon = (trigger: DOMRect, panel: DOMRect, anchor: Anchor): Point[] => {
+		if (anchor === 'bottom') {
+			return [
+				{ x: trigger.left, y: trigger.top },
+				{ x: trigger.right, y: trigger.top },
+				{ x: panel.right, y: panel.top },
+				{ x: panel.left, y: panel.top }
+			];
+		}
+		if (anchor === 'top') {
+			return [
+				{ x: trigger.left, y: trigger.bottom },
+				{ x: trigger.right, y: trigger.bottom },
+				{ x: panel.right, y: panel.bottom },
+				{ x: panel.left, y: panel.bottom }
+			];
+		}
+		if (anchor === 'leading') {
+			return [
+				{ x: trigger.right, y: trigger.top },
+				{ x: trigger.right, y: trigger.bottom },
+				{ x: panel.right, y: panel.bottom },
+				{ x: panel.right, y: panel.top }
+			];
+		}
+		return [
+			{ x: trigger.left, y: trigger.top },
+			{ x: trigger.left, y: trigger.bottom },
+			{ x: panel.left, y: panel.bottom },
+			{ x: panel.left, y: panel.top }
+		];
+	};
+
+	const measure = () => {
+		const ids = getOpenPopoverIds();
+		const results: PopoverGeometry[] = [];
+
+		for (const id of ids) {
+			const root = document.querySelector<HTMLElement>(
+				`[data-popover-root][data-popover-id="${id}"]`
+			);
+			const panel = document.querySelector<HTMLElement>(`[data-popover][data-popover-id="${id}"]`);
+			if (!root || !panel) continue;
+
+			const triggerRect = root.getBoundingClientRect();
+			const panelRect = panel.getBoundingClientRect();
+			const anchor = inferAnchor(triggerRect, panelRect);
+
+			results.push({
+				id,
+				parentId: getParentId(id),
+				triggerRect,
+				panelRect,
+				anchor,
+				safePolygon: getSafePolygon(triggerRect, panelRect, anchor)
+			});
+		}
+
+		geometries = results;
+	};
+
+	$effect(() => {
+		let raf: number;
+		const loop = () => {
+			measure();
+			raf = requestAnimationFrame(loop);
+		};
+		raf = requestAnimationFrame(loop);
+		return () => cancelAnimationFrame(raf);
+	});
+</script>
+
+{#if geometries.length > 0}
+	<div use:portalContent class="pointer-events-none fixed inset-0 z-[9999]">
+		<svg width="100%" height="100%" aria-hidden="true">
+			{#each geometries as geo (geo.id)}
+				<!-- Safe polygon (rendered first so rects draw over it) -->
+				<polygon
+					points={geo.safePolygon.map((p) => `${p.x},${p.y}`).join(' ')}
+					fill="rgba(239,68,68,0.10)"
+					stroke="rgb(220,38,38)"
+					stroke-width="1.5"
+				/>
+
+				<!-- Trigger rect -->
+				<rect
+					x={geo.triggerRect.left}
+					y={geo.triggerRect.top}
+					width={geo.triggerRect.width}
+					height={geo.triggerRect.height}
+					fill="rgba(37,99,235,0.06)"
+					stroke="rgb(37,99,235)"
+					stroke-width="1"
+					stroke-dasharray="3,2"
+				/>
+
+				<!-- Panel rect -->
+				<rect
+					x={geo.panelRect.left}
+					y={geo.panelRect.top}
+					width={geo.panelRect.width}
+					height={geo.panelRect.height}
+					fill="rgba(22,163,74,0.06)"
+					stroke="rgb(22,163,74)"
+					stroke-width="1"
+					stroke-dasharray="3,2"
+				/>
+
+				<!-- Parent → child connection line -->
+				{#if geo.parentId}
+					{@const parent = geometries.find((g) => g.id === geo.parentId)}
+					{#if parent}
+						<line
+							x1={parent.panelRect.left + parent.panelRect.width / 2}
+							y1={parent.panelRect.top + parent.panelRect.height / 2}
+							x2={geo.panelRect.left + geo.panelRect.width / 2}
+							y2={geo.panelRect.top + geo.panelRect.height / 2}
+							stroke="rgba(168,85,247,0.4)"
+							stroke-width="1"
+							stroke-dasharray="4,3"
+						/>
+					{/if}
+				{/if}
+
+				<!-- Popover ID label -->
+				<text
+					x={geo.panelRect.left + 4}
+					y={geo.panelRect.top - 4}
+					font-size="10"
+					fill="rgb(113,113,122)"
+					font-family="ui-monospace, monospace"
+				>
+					{geo.id.slice(0, 8)}
+				</text>
+			{/each}
+		</svg>
+	</div>
+{/if}

package/dist/components/Popover/PopoverDebugOverlay.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PopoverDebugOverlay: import("svelte").Component<Record<string, never>, {}, "">;
+type PopoverDebugOverlay = ReturnType<typeof PopoverDebugOverlay>;
+export default PopoverDebugOverlay;

package/dist/components/Popover/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Popover.svelte';
+export { default as PopoverDebugOverlay } from './PopoverDebugOverlay.svelte';

package/dist/components/Popover/index.js

@@ -1 +1,2 @@
 export { default } from './Popover.svelte';
+export { default as PopoverDebugOverlay } from './PopoverDebugOverlay.svelte';

package/dist/components/Popover/registry.svelte.d.ts

@@ -0,0 +1,18 @@
+export declare function registerPopover(id: string): void;
+export declare function unregisterPopover(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 getParentId(id: string): string | null;
+/**
+ * Returns true if any registered popover lists `parentId` as its parent and is currently open.
+ */
+export declare function hasOpenChild(parentId: string): boolean;
+/**
+ * Walk the parent chain from `candidateId` upward.
+ * Returns true if `ancestorId` is found in the chain.
+ */
+export declare function isAncestor(candidateId: string | null, ancestorId: string): boolean;
+/**
+ * Returns the IDs of all currently open popovers.
+ */
+export declare function getOpenPopoverIds(): string[];