@x33025/sveltely 0.1.8 → 0.1.10

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

@@ -303,7 +303,7 @@
 		}
 	}
 
-	function handleOutsideClick(event: MouseEvent) {
+	function handleOutsidePointerDown(event: PointerEvent) {
 		if (!open) return;
 		if (isEventInFloatingTree(event)) return;
 		closePanel();
@@ -316,6 +316,7 @@
 
 	function handlePointerMove(event: MouseEvent) {
 		if (!closeOnPointerLeave) return;
+		if (!parentFloatingId) return;
 		if (!open || !triggerEl || !panelEl) return;
 		if (isEventInFloatingTree(event)) return;
 		if (hasOpenChild(floatingId)) return;
@@ -323,10 +324,10 @@
 		const pointer = { x: event.clientX, y: event.clientY };
 		const triggerRect = triggerEl.getBoundingClientRect();
 		const floatingRect = panelEl.getBoundingClientRect();
-		const safePolygon = getSafePolygon(triggerRect, floatingRect, resolvedAnchor);
 
 		if (isInsideRect(triggerRect, pointer.x, pointer.y)) return;
 		if (isInsideRect(floatingRect, pointer.x, pointer.y)) return;
+		const safePolygon = getSafePolygon(triggerRect, floatingRect, resolvedAnchor);
 		if (pointInPolygon(pointer, safePolygon)) return;
 
 		closePanel();
@@ -343,9 +344,11 @@
 			if (event.type === 'scroll' && isEventInFloatingTree(event)) return;
 			closePanel();
 		};
+		window.addEventListener('pointerdown', handleOutsidePointerDown, true);
 		window.addEventListener('scroll', handleWindowChange, true);
 		window.addEventListener('resize', handleWindowChange);
 		return () => {
+			window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
 			window.removeEventListener('scroll', handleWindowChange, true);
 			window.removeEventListener('resize', handleWindowChange);
 		};
@@ -368,11 +371,7 @@
 	});
 </script>
 
-<svelte:window
-	onclick={handleOutsideClick}
-	onkeydown={handleEscape}
-	onmousemove={handlePointerMove}
-/>
+<svelte:window onkeydown={handleEscape} onmousemove={handlePointerMove} />
 
 <div
 	bind:this={rootEl}

package/dist/components/Library/Grid/Grid.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { loader as loaderAction } from '../../../actions/loader';
+	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
 	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 
@@ -10,27 +12,30 @@
 		autoRows?: number | string;
 		dense?: boolean;
 	} & LayoutProps &
-		StyleProps;
+		StyleProps &
+		LoaderProps;
 
-	let {
-		children,
-		columns = 1,
-		rows,
-		autoRows,
-		dense = false,
-		...restProps
-	}: Props = $props();
+	let { children, columns = 1, rows, autoRows, dense = false, ...restProps }: Props = $props();
 
-	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
+	const loaderProps = $derived(extractedLoaderProps.loaderProps);
+	const afterLoaderProps = $derived(extractedLoaderProps.restProps);
+	const loaderOptions = $derived.by(() => resolveLoaderOptions(loaderProps));
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(afterLoaderProps));
 	const layoutProps = $derived(extractedLayoutProps.layoutProps);
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
 	const templateColumns = $derived(
 		typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns
 	);
 	const templateRows = $derived(
-		rows === undefined ? undefined : typeof rows === 'number' ? `repeat(${rows}, minmax(0, 1fr))` : rows
+		rows === undefined
+			? undefined
+			: typeof rows === 'number'
+				? `repeat(${rows}, minmax(0, 1fr))`
+				: rows
 	);
 	const gridAutoRows = $derived(
 		autoRows === undefined ? undefined : typeof autoRows === 'number' ? `${autoRows}rem` : autoRows
@@ -48,7 +53,13 @@
 	);
 </script>
 
-<div class="grid" class:grid-dense={dense} style={rootStyle}>
+<div
+	class="grid"
+	class:grid-dense={dense}
+	style={rootStyle}
+	{...props}
+	use:loaderAction={loaderOptions}
+>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -62,9 +73,7 @@
 		align-items: stretch;
 		gap: var(--grid-gap, 0px);
 		border-radius: var(--grid-border-radius, 0px);
-		padding:
-			var(--grid-padding-y, 0px)
-			var(--grid-padding-x, 0px);
+		padding: var(--grid-padding-y, 0px) var(--grid-padding-x, 0px);
 		font-size: var(--grid-font-size, inherit);
 	}
 

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type LoaderProps } from '../../../style/loader';
 import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
 type Props = {
@@ -7,7 +8,7 @@ type Props = {
     rows?: number | string;
     autoRows?: number | string;
     dense?: boolean;
-} & LayoutProps & StyleProps;
+} & LayoutProps & StyleProps & LoaderProps;
 declare const Grid: import("svelte").Component<Props, {}, "">;
 type Grid = ReturnType<typeof Grid>;
 export default Grid;

package/dist/components/Library/GridItem/GridItem.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { loader as loaderAction } from '../../../actions/loader';
+	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
 	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 
@@ -11,23 +13,21 @@
 		rowSpan?: number;
 		area?: string;
 	} & LayoutProps &
-		StyleProps;
+		StyleProps &
+		LoaderProps;
 
-	let {
-		children,
-		column,
-		row,
-		columnSpan,
-		rowSpan,
-		area,
-		...restProps
-	}: Props = $props();
+	let { children, column, row, columnSpan, rowSpan, area, ...restProps }: Props = $props();
 
-	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
+	const loaderProps = $derived(extractedLoaderProps.loaderProps);
+	const afterLoaderProps = $derived(extractedLoaderProps.restProps);
+	const loaderOptions = $derived.by(() => resolveLoaderOptions(loaderProps));
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(afterLoaderProps));
 	const layoutProps = $derived(extractedLayoutProps.layoutProps);
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[
 			column !== undefined ? `grid-column: ${column};` : '',
@@ -35,7 +35,9 @@
 			column === undefined && columnSpan !== undefined
 				? `grid-column: span ${columnSpan} / span ${columnSpan};`
 				: '',
-			row === undefined && rowSpan !== undefined ? `grid-row: span ${rowSpan} / span ${rowSpan};` : '',
+			row === undefined && rowSpan !== undefined
+				? `grid-row: span ${rowSpan} / span ${rowSpan};`
+				: '',
 			area !== undefined ? `grid-area: ${area};` : '',
 			layoutStyle(layoutProps),
 			surfaceStyle(styleProps, 'grid-item')
@@ -45,7 +47,7 @@
 	);
 </script>
 
-<div class="grid-item" style={rootStyle}>
+<div class="grid-item" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -57,9 +59,7 @@
 		min-height: 0;
 		height: 100%;
 		border-radius: var(--grid-item-border-radius, 0px);
-		padding:
-			var(--grid-item-padding-y, 0px)
-			var(--grid-item-padding-x, 0px);
+		padding: var(--grid-item-padding-y, 0px) var(--grid-item-padding-x, 0px);
 		font-size: var(--grid-item-font-size, inherit);
 	}
 </style>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type LoaderProps } from '../../../style/loader';
 import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
 type Props = {
@@ -8,7 +9,7 @@ type Props = {
     columnSpan?: number;
     rowSpan?: number;
     area?: string;
-} & LayoutProps & StyleProps;
+} & LayoutProps & StyleProps & LoaderProps;
 declare const GridItem: import("svelte").Component<Props, {}, "">;
 type GridItem = ReturnType<typeof GridItem>;
 export default GridItem;

package/dist/components/Library/HStack/HStack.svelte

@@ -1,26 +1,34 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { loader as loaderAction } from '../../../actions/loader';
+	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
 	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 
 	type Props = {
 		children?: Snippet;
 	} & LayoutProps &
-		StyleProps;
+		StyleProps &
+		LoaderProps;
 
 	let { children, ...restProps }: Props = $props();
 
-	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
+	const loaderProps = $derived(extractedLoaderProps.loaderProps);
+	const afterLoaderProps = $derived(extractedLoaderProps.restProps);
+	const loaderOptions = $derived.by(() => resolveLoaderOptions(loaderProps));
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(afterLoaderProps));
 	const layoutProps = $derived(extractedLayoutProps.layoutProps);
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
 	);
 </script>
 
-<div class="hstack" style={rootStyle}>
+<div class="hstack" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -34,9 +42,7 @@
 		flex-direction: row;
 		gap: var(--stack-gap, 0px);
 		border-radius: var(--stack-border-radius, 0px);
-		padding:
-			var(--stack-padding-y, 0px)
-			var(--stack-padding-x, 0px);
+		padding: var(--stack-padding-y, 0px) var(--stack-padding-x, 0px);
 		font-size: var(--stack-font-size, inherit);
 		--divider-width: 1px;
 		--divider-height: auto;

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

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
+import { type LoaderProps } from '../../../style/loader';
 import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
 type Props = {
     children?: Snippet;
-} & LayoutProps & StyleProps;
+} & LayoutProps & StyleProps & LoaderProps;
 declare const HStack: import("svelte").Component<Props, {}, "">;
 type HStack = ReturnType<typeof HStack>;
 export default HStack;

package/dist/components/Library/Loader/Loader.demo.svelte

@@ -8,8 +8,8 @@
 </script>
 
 <script lang="ts">
-	import { loader } from '../../../actions/loader';
 	import Button from '../Button';
+	import ScrollView from '../ScrollView';
 
 	let pending = $state<Promise<void> | null>(null);
 
@@ -27,13 +27,20 @@
 	};
 </script>
 
-<div class="loader-demo" use:loader={{ text: 'Loading preview...', promise: pending }}>
-	<div class="loader-demo-copy">
-		<strong>Preview panel</strong>
-		<span>Click the button to cover this component with the loader overlay.</span>
+<ScrollView
+	background="color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-primary-color))"
+	borderRadius="var(--sveltely-border-radius)"
+	scrollGradient={false}
+	loader={{ text: 'Loading preview...', promise: pending }}
+>
+	<div class="loader-demo">
+		<div class="loader-demo-copy">
+			<strong>Preview panel</strong>
+			<span>Click the button to cover this ScrollView component with the loader overlay.</span>
+		</div>
+		<Button label="Show loader" onclick={startLoading} disabled={pending !== null} />
 	</div>
-	<Button label="Show loader" onclick={startLoading} disabled={pending !== null} />
-</div>
+</ScrollView>
 
 <style>
 	.loader-demo {
@@ -44,13 +51,6 @@
 		align-items: flex-start;
 		justify-content: space-between;
 		gap: var(--sveltely-gap);
-		border: 1px solid var(--sveltely-border-color);
-		border-radius: var(--sveltely-border-radius);
-		background: color-mix(
-			in oklab,
-			var(--sveltely-background-color) 94%,
-			var(--sveltely-primary-color)
-		);
 		padding: var(--sveltely-padding-y) var(--sveltely-padding-x);
 	}
 

package/dist/components/Library/ScrollView/ScrollView.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
+	import { loader as loaderAction } from '../../../actions/loader';
+	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
 	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 	import type { ScrollAxis } from '../../../style/scroll';
@@ -40,7 +42,8 @@
 		scrollGradient?: boolean;
 		scrollGradientSize?: number | string;
 	} & LayoutProps &
-		StyleProps;
+		StyleProps &
+		LoaderProps;
 
 	let {
 		children,
@@ -53,11 +56,16 @@
 		...restProps
 	}: Props = $props();
 
-	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
+	const loaderProps = $derived(extractedLoaderProps.loaderProps);
+	const afterLoaderProps = $derived(extractedLoaderProps.restProps);
+	const loaderOptions = $derived.by(() => resolveLoaderOptions(loaderProps));
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(afterLoaderProps));
 	const layoutProps = $derived(extractedLayoutProps.layoutProps);
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
 	const viewportStyle = $derived.by(() => surfaceStyle(styleProps, 'scroll-view'));
 	const contentStyle = $derived.by(() => surfaceStyle(contentStyles, 'scroll-view-content'));
 	const scrollGradientStyle = $derived(
@@ -141,6 +149,8 @@
 	class:scroll-view-can-scroll-up={canScrollToTop}
 	class:scroll-view-can-scroll-down={canScrollToBottom}
 	style={rootStyle}
+	{...props}
+	use:loaderAction={loaderOptions}
 	onscroll={handleScroll}
 	onwheel={handleWheel}
 >

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type LoaderProps } from '../../../style/loader';
 import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
 import type { ScrollAxis } from '../../../style/scroll';
@@ -35,7 +36,7 @@ type Props = {
     onScroll?: (geometry: ScrollGeometry) => void;
     scrollGradient?: boolean;
     scrollGradientSize?: number | string;
-} & LayoutProps & StyleProps;
+} & LayoutProps & StyleProps & LoaderProps;
 declare const ScrollView: import("svelte").Component<Props, {}, "viewport">;
 type ScrollView = ReturnType<typeof ScrollView>;
 export default ScrollView;

package/dist/components/Library/VStack/VStack.svelte

@@ -1,26 +1,34 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { loader as loaderAction } from '../../../actions/loader';
+	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
 	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 
 	type Props = {
 		children?: Snippet;
 	} & LayoutProps &
-		StyleProps;
+		StyleProps &
+		LoaderProps;
 
 	let { children, ...restProps }: Props = $props();
 
-	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
+	const loaderProps = $derived(extractedLoaderProps.loaderProps);
+	const afterLoaderProps = $derived(extractedLoaderProps.restProps);
+	const loaderOptions = $derived.by(() => resolveLoaderOptions(loaderProps));
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(afterLoaderProps));
 	const layoutProps = $derived(extractedLayoutProps.layoutProps);
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
 	);
 </script>
 
-<div class="vstack" style={rootStyle}>
+<div class="vstack" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -34,9 +42,7 @@
 		flex-direction: column;
 		gap: var(--stack-gap, 0px);
 		border-radius: var(--stack-border-radius, 0px);
-		padding:
-			var(--stack-padding-y, 0px)
-			var(--stack-padding-x, 0px);
+		padding: var(--stack-padding-y, 0px) var(--stack-padding-x, 0px);
 		font-size: var(--stack-font-size, inherit);
 		--divider-width: 100%;
 		--divider-height: 1px;

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

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
+import { type LoaderProps } from '../../../style/loader';
 import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
 type Props = {
     children?: Snippet;
-} & LayoutProps & StyleProps;
+} & LayoutProps & StyleProps & LoaderProps;
 declare const VStack: import("svelte").Component<Props, {}, "">;
 type VStack = ReturnType<typeof VStack>;
 export default VStack;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { tooltip } from './actions/tooltip';
 export type { TooltipOptions } from './actions/tooltip';
 export { loader } from './actions/loader';
 export type { LoaderOptions } from './actions/loader';
+export type { LoaderProps } from './style/loader';
 export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
 export type { LayoutAlignmentValue, LayoutJustificationValue, LayoutProps, LayoutSizeValue } from './style/layout';
 export { LabelOrientation } from './style/label';

package/dist/style/loader.d.ts

@@ -0,0 +1,9 @@
+import type { LoaderOptions } from '../actions/loader';
+export type LoaderProps = {
+    loader?: LoaderOptions;
+};
+export declare const extractLoaderProps: <T extends Record<string, unknown>>(props: T) => {
+    loaderProps: LoaderProps;
+    restProps: Record<string, unknown>;
+};
+export declare const resolveLoaderOptions: (props?: LoaderProps) => LoaderOptions;

package/dist/style/loader.js

@@ -0,0 +1,21 @@
+const LOADER_PROP_KEYS = new Set(['loader']);
+export const extractLoaderProps = (props) => {
+    const loaderProps = {};
+    const restProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (LOADER_PROP_KEYS.has(key)) {
+            loaderProps[key] = value;
+            continue;
+        }
+        restProps[key] = value;
+    }
+    return {
+        loaderProps,
+        restProps
+    };
+};
+export const resolveLoaderOptions = (props) => {
+    if (!props)
+        return false;
+    return props.loader ?? false;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.8",
+	"version": "0.1.10",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",