@x33025/sveltely 0.1.7 → 0.1.9

package/dist/actions/LoaderOverlay.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Spinner from '../components/Library/Spinner/Spinner.svelte';
+	import VStack from '../components/Library/VStack/VStack.svelte';
+
+	type Props = {
+		text: string;
+	};
+
+	let { text }: Props = $props();
+</script>
+
+<div class="sveltely-loader-overlay" role="status" aria-live="polite" aria-label={text}>
+	<VStack align="center" justify="center" gap="var(--sveltely-gap)">
+		<Spinner />
+		<span class="sveltely-loader-text">{text}</span>
+	</VStack>
+</div>
+
+<style>
+	.sveltely-loader-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 20;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: inherit;
+		background: var(--sveltely-background-color, white);
+		color: var(--sveltely-primary-color, black);
+		padding: var(--sveltely-padding-y, 0.75rem) var(--sveltely-padding-x, 0.75rem);
+		pointer-events: auto;
+		text-align: center;
+	}
+
+	.sveltely-loader-text {
+		max-width: 100%;
+		overflow: hidden;
+		color: var(--sveltely-secondary-color, currentColor);
+		font-size: calc(var(--sveltely-font-size, 1rem) * 0.875);
+		line-height: 1.25;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/dist/actions/LoaderOverlay.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    text: string;
+};
+declare const LoaderOverlay: import("svelte").Component<Props, {}, "">;
+type LoaderOverlay = ReturnType<typeof LoaderOverlay>;
+export default LoaderOverlay;

package/dist/actions/loader.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from 'svelte/action';
+type LoaderTrigger = boolean | PromiseLike<unknown> | null | undefined;
+export type LoaderOptions = LoaderTrigger | [text: string, loading: LoaderTrigger] | {
+    text?: string;
+    loading?: LoaderTrigger;
+    active?: LoaderTrigger;
+    promise?: PromiseLike<unknown> | null;
+    disabled?: boolean;
+};
+export declare const loader: Action<HTMLElement, LoaderOptions>;
+export {};

package/dist/actions/loader.js

@@ -0,0 +1,117 @@
+import { mount, unmount } from 'svelte';
+import LoaderOverlay from './LoaderOverlay.svelte';
+const DEFAULT_TEXT = 'Loading';
+const isPromiseLike = (value) => typeof value === 'object' &&
+    value !== null &&
+    'then' in value &&
+    typeof value.then === 'function';
+const parseOptions = (value = false) => {
+    if (Array.isArray(value)) {
+        return {
+            text: value[0] || DEFAULT_TEXT,
+            loading: value[1],
+            disabled: false
+        };
+    }
+    if (typeof value === 'object' && value !== null && !isPromiseLike(value)) {
+        return {
+            text: value.text || DEFAULT_TEXT,
+            loading: value.loading ?? value.active ?? value.promise ?? false,
+            disabled: value.disabled ?? false
+        };
+    }
+    return {
+        text: DEFAULT_TEXT,
+        loading: value,
+        disabled: false
+    };
+};
+export const loader = (node, initialOptions = false) => {
+    if (typeof document === 'undefined') {
+        return {
+            update() { },
+            destroy() { }
+        };
+    }
+    const originalPosition = node.style.position;
+    const originalAriaBusy = node.getAttribute('aria-busy');
+    let options = parseOptions(initialOptions);
+    let overlay = null;
+    let overlayText = '';
+    let promiseVersion = 0;
+    let appliedPosition = false;
+    const ensureHostPosition = () => {
+        if (getComputedStyle(node).position !== 'static')
+            return;
+        node.style.position = 'relative';
+        appliedPosition = true;
+    };
+    const resetHostPosition = () => {
+        if (!appliedPosition)
+            return;
+        if (node.style.position === 'relative') {
+            node.style.position = originalPosition;
+        }
+        appliedPosition = false;
+    };
+    const show = () => {
+        ensureHostPosition();
+        node.setAttribute('aria-busy', 'true');
+        if (overlay && overlayText === options.text) {
+            return;
+        }
+        if (overlay) {
+            void unmount(overlay);
+        }
+        overlayText = options.text;
+        overlay = mount(LoaderOverlay, {
+            target: node,
+            props: {
+                text: options.text
+            }
+        });
+    };
+    const hide = () => {
+        if (overlay) {
+            void unmount(overlay);
+            overlay = null;
+            overlayText = '';
+        }
+        if (originalAriaBusy === null) {
+            node.removeAttribute('aria-busy');
+        }
+        else {
+            node.setAttribute('aria-busy', originalAriaBusy);
+        }
+        resetHostPosition();
+    };
+    const render = () => {
+        const currentVersion = ++promiseVersion;
+        if (options.disabled || !options.loading) {
+            hide();
+            return;
+        }
+        show();
+        if (!isPromiseLike(options.loading))
+            return;
+        options.loading.then(() => {
+            if (currentVersion === promiseVersion)
+                hide();
+        }, () => {
+            if (currentVersion === promiseVersion)
+                hide();
+        });
+    };
+    render();
+    return {
+        update(nextOptions = false) {
+            options = parseOptions(nextOptions);
+            render();
+        },
+        destroy() {
+            promiseVersion++;
+            hide();
+            resetHostPosition();
+        }
+    };
+};

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

@@ -0,0 +1,74 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Loader',
+		description: 'Overlay loading state for any component.',
+		columnSpan: 1,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Button from '../Button';
+	import ScrollView from '../ScrollView';
+
+	let pending = $state<Promise<void> | null>(null);
+
+	const startLoading = () => {
+		const next = new Promise<void>((resolve) => {
+			setTimeout(resolve, 1600);
+		});
+
+		pending = next;
+		next.finally(() => {
+			if (pending === next) {
+				pending = null;
+			}
+		});
+	};
+</script>
+
+<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>
+</ScrollView>
+
+<style>
+	.loader-demo {
+		display: flex;
+		min-height: 8rem;
+		width: 100%;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--sveltely-gap);
+		padding: var(--sveltely-padding-y) var(--sveltely-padding-x);
+	}
+
+	.loader-demo-copy {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		gap: calc(var(--sveltely-gap) * 0.5);
+	}
+
+	.loader-demo-copy strong {
+		font-size: var(--sveltely-font-size);
+		line-height: 1.25;
+	}
+
+	.loader-demo-copy span {
+		color: var(--sveltely-secondary-color);
+		font-size: calc(var(--sveltely-font-size) * 0.875);
+		line-height: 1.3;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+declare const Loader: import("svelte").Component<Record<string, never>, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

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

@@ -2,6 +2,9 @@ export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 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/index.js

@@ -1,6 +1,7 @@
 export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
+export { loader } from './actions/loader';
 export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
 export { LabelOrientation } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';

package/dist/style/layout.d.ts

@@ -39,9 +39,9 @@ export type LayoutProps = {
     align?: LayoutAlignment;
     justify?: LayoutJustification;
 };
-export declare const extractLayoutProps: <T extends Record<string, unknown>>(props: T) => {
+export declare const extractLayoutProps: <T extends Record<PropertyKey, unknown>>(props: T) => {
     layoutProps: Partial<LayoutProps>;
-    restProps: Record<string, unknown>;
+    restProps: Record<PropertyKey, unknown>;
 };
 export declare const layoutStyle: (styles?: LayoutProps) => string;
 export {};

package/dist/style/layout.js

@@ -69,8 +69,9 @@ const justifyValues = {
 export const extractLayoutProps = (props) => {
     const layoutProps = {};
     const restProps = {};
-    for (const [key, value] of Object.entries(props)) {
-        if (LAYOUT_PROP_KEYS.has(key)) {
+    for (const key of Reflect.ownKeys(props)) {
+        const value = props[key];
+        if (typeof key === 'string' && LAYOUT_PROP_KEYS.has(key)) {
             layoutProps[key] = value;
             continue;
         }

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<PropertyKey, unknown>>(props: T) => {
+    loaderProps: LoaderProps;
+    restProps: Record<PropertyKey, unknown>;
+};
+export declare const resolveLoaderOptions: (props?: LoaderProps) => LoaderOptions;

package/dist/style/loader.js

@@ -0,0 +1,22 @@
+const LOADER_PROP_KEYS = new Set(['loader']);
+export const extractLoaderProps = (props) => {
+    const loaderProps = {};
+    const restProps = {};
+    for (const key of Reflect.ownKeys(props)) {
+        const value = props[key];
+        if (typeof key === 'string' && 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/dist/style/surface.d.ts

@@ -10,8 +10,8 @@ export type StyleProps = {
     color?: string;
 };
 export type SurfaceStyles = StyleProps;
-export declare const extractStyleProps: <T extends Record<string, unknown>>(props: T) => {
+export declare const extractStyleProps: <T extends Record<PropertyKey, unknown>>(props: T) => {
     styleProps: Partial<StyleProps>;
-    restProps: Record<string, unknown>;
+    restProps: Record<PropertyKey, unknown>;
 };
 export declare const surfaceStyle: (styles?: SurfaceStyles, prefix?: string) => string;

package/dist/style/surface.js

@@ -19,8 +19,9 @@ const pushVar = (declarations, name, value) => {
 export const extractStyleProps = (props) => {
     const styleProps = {};
     const restProps = {};
-    for (const [key, value] of Object.entries(props)) {
-        if (STYLE_PROP_KEYS.has(key)) {
+    for (const key of Reflect.ownKeys(props)) {
+        const value = props[key];
+        if (typeof key === 'string' && STYLE_PROP_KEYS.has(key)) {
             styleProps[key] = value;
             continue;
         }

package/dist/style.css

@@ -212,6 +212,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }

package/package.json

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