@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/tree/tree-header.svelte.d.ts

@@ -0,0 +1,35 @@
+export type TreeHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    class?: string;
+    open?: boolean;
+    disabled?: boolean;
+    children?: Snippet<[{
+        tree: TreeBond;
+    }]>;
+};
+import type { Snippet } from 'svelte';
+import { TreeBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: any;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const TreeHeader: $$IsomorphicComponent;
+type TreeHeader<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof TreeHeader<E, B>>;
+export default TreeHeader;

package/dist/components/tree/tree-indicator.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+	export type CollapsibleHeaderProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> &
+		TreeBondProps & {
+			children?: Snippet<[{ tree?: TreeBond }]>;
+		};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { TreeBond, type TreeBondProps } from './bond.svelte';
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { getPreset } from '../../context';
+
+	const bond = TreeBond.get();
+
+	const preset = getPreset('tree.indicator');
+
+	let {
+		open = $bindable(false),
+		class: klass = '',
+		as = preset?.as ?? ('div' as E),
+		base = preset?.base as B,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CollapsibleHeaderProps<E, B> = $props();
+
+	const indicatorProps = $derived({
+		...bond?.indicator(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	class={[
+		'aspect-square h-fit',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{as}
+	{base}
+	{...indicatorProps}
+>
+	{@render children?.({ tree: bond })}
+</HtmlAtom>

package/dist/components/tree/tree-indicator.svelte.d.ts

@@ -0,0 +1,32 @@
+export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeBondProps & {
+    children?: Snippet<[{
+        tree?: TreeBond;
+    }]>;
+};
+import type { Snippet } from 'svelte';
+import { TreeBond, type TreeBondProps } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: CollapsibleHeaderProps<E, B>;
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const TreeIndicator: $$IsomorphicComponent;
+type TreeIndicator<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof TreeIndicator<E, B>>;
+export default TreeIndicator;

package/dist/components/tree/tree-root.svelte

@@ -0,0 +1,87 @@
+<script module lang="ts">
+	import type { Factory } from '../../types';
+
+	export type TreeRootProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		class?: string;
+		open?: boolean;
+		disabled?: boolean;
+		factory?: Factory<TreeBond>;
+		children?: Snippet<[{ tree: TreeBond }]>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
+	import { defineProperty, defineState, toClassValue } from '../../utils';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { getPreset } from '../../context';
+
+	const preset = getPreset('tree');
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		children = undefined,
+		factory = _factory,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TreeRootProps<E, B> = $props();
+
+	const bondProps = defineState<TreeBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			)
+		],
+		() => ({ disabled })
+	);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new TreeBondState(() => props);
+		return new TreeBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	class={[
+		'flex flex-col',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{...rootProps}
+>
+	{@render children?.({ tree: bond })}
+</HtmlAtom>

package/dist/components/tree/tree-root.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Factory } from '../../types';
+export type TreeRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    class?: string;
+    open?: boolean;
+    disabled?: boolean;
+    factory?: Factory<TreeBond>;
+    children?: Snippet<[{
+        tree: TreeBond;
+    }]>;
+};
+import type { Snippet } from 'svelte';
+import { TreeBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: TreeRootProps<E, B>;
+    exports: {
+        getBond: () => any;
+    };
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "open";
+    exports(): {
+        getBond: () => any;
+    };
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const TreeRoot: $$IsomorphicComponent;
+type TreeRoot<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof TreeRoot<E, B>>;
+export default TreeRoot;

package/dist/components/tree/tree.stories.svelte

@@ -0,0 +1,134 @@
+<script module>
+	import { untrack } from 'svelte';
+	import gsap from 'gsap';
+	import { RenderScan } from 'svelte-render-scan';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { dev } from '$app/environment';
+	import { Tree as Tree_ } from '.';
+	import { tree } from './attachments.svelte';
+	import { Root as TreeRoot } from './atoms';
+	import { TreeBond } from './bond.svelte';
+	import Root from '../root/root.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Tree',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let open = $state(true);
+</script>
+
+<Story name="Tree" args={{}}>
+	<Root class="p-4">
+		<Tree_.Root class="" bind:open>
+			{#if dev}
+				<RenderScan duration={300} />
+			{/if}
+
+			<Tree_.Header>Vehicles</Tree_.Header>
+
+			<Tree_.Body
+				class="border-l border-l-neutral-200"
+				onmount={(node) => {
+					const bond = TreeBond.get();
+					const isOpen = untrack(() => bond?.state.props.open ?? false);
+					gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
+				}}
+				{@attach tree((node, bond) => {
+					const isOpen = bond?.state.props.open ?? false;
+					gsap.to(node, {
+						height: +isOpen ? 'auto' : 0,
+						opacity: +isOpen,
+						pointerEvents: isOpen ? 'all' : 'none',
+						duration: 0.1
+					});
+				})}
+			>
+				<Tree_.Root>
+					<Tree_.Header>Cars</Tree_.Header>
+					<Tree_.Body
+						class="border-l border-l-neutral-200"
+						onmount={(node) => {
+							const bond = TreeBond.get();
+							const isOpen = bond?.state.props.open ?? false;
+							gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
+						}}
+						animate={(node) => {
+							const bond = TreeBond.get();
+							const isOpen = bond?.state.props.open ?? false;
+							gsap.to(node, {
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none',
+								duration: 0.1
+							});
+						}}
+					>
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</Tree_.Body>
+				</Tree_.Root>
+
+				<Tree_.Root>
+					<Tree_.Header>Trucks</Tree_.Header>
+					<Tree_.Body
+						class="border-l border-l-neutral-200"
+						onmount={(node) => {
+							const bond = TreeBond.get();
+							const isOpen = bond?.state.props.open ?? false;
+							gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
+						}}
+						{@attach tree((node, bond) => {
+							const isOpen = bond?.state.props.open ?? false;
+							gsap.to(node, {
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none',
+								duration: 0.1
+							});
+						})}
+					>
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</Tree_.Body>
+				</Tree_.Root>
+
+				<Tree_.Root>
+					<Tree_.Header>Bikes</Tree_.Header>
+					<Tree_.Body
+						class="border-l border-l-neutral-200"
+						onmount={(node) => {
+							const bond = TreeBond.get();
+							const isOpen = untrack(() => bond?.state.props.open ?? false);
+							gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
+						}}
+						{@attach tree((node, bond) => {
+							const isOpen = bond?.state.props.open ?? false;
+							gsap.to(node, {
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none',
+								duration: 0.1
+							});
+						})}
+					>
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</Tree_.Body>
+				</Tree_.Root>
+			</Tree_.Body>
+		</Tree_.Root>
+	</Root>
+</Story>

package/dist/components/tree/tree.stories.svelte.d.ts

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

package/dist/components/virtual/virtual-root.svelte

@@ -0,0 +1,258 @@
+<script module lang="ts">
+	export type VirtualListViewportProps<T> = {
+		class?: string;
+		data: T[];
+		itemHeight?: number; // Optional for dynamic heights
+		overscan?: number; // Buffer items to render above/below viewport
+		onScroll?: (scrollTop: number) => void;
+		scrollToIndex?: number; // Scroll to specific item
+		header?: Snippet;
+		children: Snippet<
+			[
+				{
+					items: { index: number; data: T }[];
+				}
+			]
+		>;
+	};
+</script>
+
+<script lang="ts" generics="T">
+	import { throttle } from 'es-toolkit';
+
+	import { onMount, tick, type Snippet } from 'svelte';
+	import { twMerge } from 'tailwind-merge';
+
+	let {
+		class: klass = '',
+		data = [],
+		itemHeight,
+		overscan = 5,
+		children,
+		header,
+		onScroll,
+		scrollToIndex,
+		...restProps
+	}: VirtualListViewportProps<T> = $props();
+
+	// Internal state
+	let start = $state(0);
+	let end = $state(0);
+
+	const visibleItems = $derived(
+		data.slice(start, end).map((d, i) => ({ index: i + start, data: d }))
+	);
+
+	let viewportElement: HTMLElement | undefined = $state();
+	let contentElement: HTMLElement | undefined = $state();
+	let top = $state(0);
+	let bottom = $state(0);
+	let viewportHeight = $state(0);
+
+	// Height management with exponential moving average
+	let heightMap: number[] = $state([]);
+	let averageHeight = $state(itemHeight || 50);
+	let heightSampleCount = $state(0);
+
+	let rows: HTMLElement[] = $state([]);
+	let mounted = $state(false);
+
+	// trigger initial refresh
+	onMount(() => {
+		if (!contentElement) return;
+
+		rows = Array.from(contentElement.getElementsByClassName('virtual-list-row')) as HTMLElement[];
+
+		mounted = true;
+
+		// Give the browser time to render and measure the viewport
+		setTimeout(() => {
+			if (viewportElement) {
+				viewportHeight = viewportElement.offsetHeight;
+			}
+
+			refresh();
+		}, 0);
+	});
+
+	// Watch for data changes and viewport size changes
+	$effect(() => {
+		if (mounted) refresh();
+	});
+
+	// Handle scroll to specific index
+	$effect(() => {
+		if (scrollToIndex !== undefined && viewportElement && mounted) {
+			scrollToItem(scrollToIndex);
+		}
+	});
+
+	const handleScroll = throttle(async () => {
+		if (!viewportElement) return;
+
+		const { scrollTop } = viewportElement;
+
+		// Call user's onScroll callback
+		onScroll?.(scrollTop);
+
+		await refresh();
+	}, 1000 / 60);
+
+	// Improved height estimation using exponential moving average
+	function updateAverageHeight(newHeight: number) {
+		if (heightSampleCount < 1) {
+			averageHeight = newHeight;
+			heightSampleCount = 1;
+		} else {
+			// Exponential moving average with alpha = 0.1 for stability
+			const alpha = Math.min(0.1, 1 / heightSampleCount);
+			averageHeight = alpha * newHeight + (1 - alpha) * averageHeight;
+			heightSampleCount++;
+		}
+	}
+
+	function getItemHeight(index: number): number {
+		return heightMap[index] || itemHeight || averageHeight;
+	}
+
+	async function refresh() {
+		if (!viewportElement || !mounted) return;
+
+		const { scrollTop } = viewportElement;
+
+		// Calculate visible range with overscan buffer
+		const startIndex = Math.max(0, findStartIndex(scrollTop) - overscan);
+		const endIndex = Math.min(data.length, findEndIndex(scrollTop, startIndex) + overscan);
+
+		start = startIndex;
+		end = endIndex;
+
+		await tick(); // Wait for DOM update
+
+		// Update height measurements for visible items
+		updateHeights();
+		updatePadding();
+	}
+
+	function findStartIndex(scrollTop: number): number {
+		let index = 0;
+		let accumulatedHeight = 0;
+
+		while (index < data.length && accumulatedHeight + getItemHeight(index) <= scrollTop) {
+			accumulatedHeight += getItemHeight(index);
+			index++;
+		}
+
+		return index;
+	}
+
+	function findEndIndex(scrollTop: number, startIndex: number): number {
+		let index = startIndex;
+		let accumulatedHeight = 0;
+
+		// Start from the scroll position
+		for (let i = 0; i < startIndex; i++) {
+			accumulatedHeight += getItemHeight(i);
+		}
+
+		// Use a minimum viewport height to ensure we render enough items initially
+		const effectiveViewportHeight = Math.max(viewportHeight, 800);
+
+		while (index < data.length && accumulatedHeight <= scrollTop + effectiveViewportHeight) {
+			accumulatedHeight += getItemHeight(index);
+			index++;
+		}
+
+		return index;
+	}
+
+	function updateHeights() {
+		if (!contentElement) return;
+
+		rows = Array.from(contentElement.getElementsByClassName('virtual-list-row')) as HTMLElement[];
+
+		// Update heights for currently rendered items
+		rows.forEach((row, i) => {
+			const actualIndex = start + i;
+			const measuredHeight = itemHeight || row.offsetHeight;
+
+			if (heightMap[actualIndex] !== measuredHeight) {
+				heightMap[actualIndex] = measuredHeight;
+				if (!itemHeight) {
+					updateAverageHeight(measuredHeight);
+				}
+			}
+		});
+	}
+
+	function updatePadding() {
+		// Calculate top padding (sum of heights above visible area)
+		let topPadding = 0;
+		for (let i = 0; i < start; i++) {
+			topPadding += getItemHeight(i);
+		}
+
+		// Calculate bottom padding (estimated heights below visible area)
+		let bottomPadding = 0;
+		for (let i = end; i < data.length; i++) {
+			bottomPadding += getItemHeight(i);
+		}
+
+		top = topPadding;
+		bottom = bottomPadding;
+	}
+
+	async function scrollToItem(index: number) {
+		if (!viewportElement || index < 0 || index >= data.length) return;
+
+		let targetScrollTop = 0;
+		for (let i = 0; i < index; i++) {
+			targetScrollTop += getItemHeight(i);
+		}
+
+		viewportElement.scrollTo({
+			top: targetScrollTop,
+			behavior: 'smooth'
+		});
+	}
+</script>
+
+<div class="absolute inset-0 block size-full max-h-full">
+	<div
+		bind:this={viewportElement}
+		bind:offsetHeight={viewportHeight}
+		class={twMerge(
+			'virtual-list-viewport virtual-list-viewport relative block h-full max-h-full w-full flex-1 overflow-y-auto',
+			klass
+		)}
+		onscroll={handleScroll}
+	>
+		<table class={twMerge('virtual-list-contents w-full')} {...restProps}>
+			{@render header?.()}
+
+			<tbody bind:this={contentElement}>
+				<!-- Top spacer row -->
+				{#if top > 0}
+					<tr style="height: {top}px;">
+						<td colspan="100" style="padding: 0; border: none;"></td>
+					</tr>
+				{/if}
+
+				{@render children?.({ items: visibleItems })}
+
+				<!-- Bottom spacer row -->
+				{#if bottom > 0}
+					<tr style="height: {bottom}px;">
+						<td colspan="100" style="padding: 0; border: none;"></td>
+					</tr>
+				{/if}
+			</tbody>
+		</table>
+	</div>
+</div>
+
+<style>
+	.virtual-list-viewport {
+		-webkit-overflow-scrolling: touch;
+	}
+</style>