@svelte-atoms/core 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist/components/root/root.css

@@ -1,119 +1,119 @@
-@import 'tailwindcss';
-
-:root {
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(1 0 0);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-	--radius: 0.625rem;
-	--shadow-x: 0px;
-	--shadow-y: 1px;
-	--shadow-blur: 2px;
-	--shadow-spread: 0px;
-	--shadow-opacity: 0.18;
-	--shadow-color: hsl(0 0% 0%);
-	--tracking-normal: 0em;
-	--spacing: 0.25rem;
-}
-
-.dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
-	--shadow-color: hsl(0, 0%, 100%);
-}
-
-@theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-
-	--radius-inherit: inherit;
-}
+@import 'tailwindcss';
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(1 0 0);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.99 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--radius: 0.625rem;
+	--shadow-x: 0px;
+	--shadow-y: 1px;
+	--shadow-blur: 2px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.18;
+	--shadow-color: hsl(0 0% 0%);
+	--tracking-normal: 0em;
+	--spacing: 0.25rem;
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 5%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--shadow-color: hsl(0, 0%, 100%);
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--radius-inherit: inherit;
+}

package/dist/components/root/root.svelte

@@ -4,18 +4,23 @@
 
 <script lang="ts">
 	import { cn, defineState, defineProperty } from '../../utils';
-	import { Portal, ActivePortal, Portals } from '../portal';
+	import { ActivePortal, Portals } from '../portal';
 	import { HtmlAtom as Atom } from '../atom';
 	import { HtmlElement, MathmlElement, SvgElement } from '../element';
 	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import L0Portal from './l0-portal.svelte';
+	import L1Portal from './l1-portal.svelte';
+	import type { RootProps } from './types';
 
 	let {
 		class: klass = '',
 		base = undefined,
 		children = undefined,
 		portals = undefined,
+		l0portal = undefined,
+		l1portal = undefined,
 		...restProps
-	} = $props();
+	}: RootProps = $props();
 
 	let html: typeof HtmlElement | undefined = $state(HtmlElement);
 	let svg: typeof SvgElement | undefined = $state(undefined);
@@ -77,26 +82,20 @@
 		)}
 		{...restProps}
 	>
-		{#if portals}
-			{@render portals?.()}
+		{#if l0portal}
+			{@render l0portal?.()}
 		{:else}
-			<Portal.Outer id="root.l0" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer id="root.l1" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer id="root.l2" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
-				<Portal.Inner />
-			</Portal.Outer>
+			<L0Portal />
+		{/if}
 
-			<Portal.Outer id="root.l3" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
-				<Portal.Inner />
-			</Portal.Outer>
+		{#if l1portal}
+			{@render l1portal?.()}
+		{:else}
+			<L1Portal />
 		{/if}
 
+		{@render portals?.()}
+
 		<ActivePortal portal="root.l0">
 			{@render children?.()}
 		</ActivePortal>

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

@@ -1,9 +1,5 @@
 export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-declare const Root: import("svelte").Component<{
-    class?: string;
-    base?: any;
-    children?: any;
-    portals?: any;
-} & Record<string, any>, {}, "">;
+import type { RootProps } from './types';
+declare const Root: import("svelte").Component<RootProps<"div", import("../atom").ComponentBase | import("../atom").SnippetBase>, {}, "">;
 type Root = ReturnType<typeof Root>;
 export default Root;

package/dist/components/root/toasts-portal.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { Portal } from '../portal';
+</script>
+
+<Portal.Outer id="root.l3" class="pointer-events-none absolute inset-0 z-14 overflow-hidden">
+	<Portal.Inner />
+</Portal.Outer>

package/dist/components/root/toasts-portal.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ToastsPortal;
+type ToastsPortal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const ToastsPortal: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/root/types.d.ts

@@ -1,8 +1,25 @@
 import type { HtmlAtomProps, Base } from '../atom';
+import type { Snippet } from 'svelte';
 /**
  * Extend this interface to add custom root properties in your application.
  */
 export interface RootExtendProps {
 }
 export interface RootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, RootExtendProps {
+    /**
+     * Main content to render inside the root component.
+     */
+    children?: Snippet;
+    /**
+     * Custom portal configuration snippet.
+     */
+    portals?: Snippet;
+    /**
+     * Custom L0 portal snippet (z-10 layer for popovers).
+     */
+    l0portal?: Snippet;
+    /**
+     * Custom L1 portal snippet (z-12 layer).
+     */
+    l1portal?: Snippet;
 }

package/dist/components/sidebar/motion.svelte.js

@@ -4,10 +4,10 @@ import { SidebarBond } from '.';
 export function animateSidebarContent(params) {
     const { duration = DURATION.fast / 1000, delay = 0, ease = 'easeInOut', axis = 'x', '0': collapsedSize = '96px', '1': expandedSize = 'auto' } = params;
     const bond = SidebarBond.get();
-    const isOpen = bond?.state.props.open ?? false;
-    const collapsedProp = axis === 'x' ? 'min-width' : 'min-height';
-    const prop = axis === 'x' ? 'width' : 'height';
     return (node) => {
+        const isOpen = bond?.state.props.open ?? false;
+        const collapsedProp = axis === 'x' ? 'min-width' : 'min-height';
+        const prop = axis === 'x' ? 'width' : 'height';
         animate(node, {
             [prop]: isOpen ? expandedSize : collapsedSize,
             [collapsedProp]: collapsedSize

package/dist/components/sidebar/sidebar-content.svelte

@@ -1,40 +1,40 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { SidebarBond } from './bond.svelte';
-	import { animateSidebarContent } from './motion.svelte';
-	import type { SidebarRootProps } from './types';
-
-	const bond = SidebarBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateSidebarContent({ '0': '0px', '1': 'auto' }),
-		enter = undefined,
-		exit = undefined,
-		initial = animateSidebarContent({ '0': '0px', '1': 'auto', duration: 0 }),
-		...restProps
-	}: SidebarRootProps<E, B> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="sidebar.content"
-	class={['bg-card border-border', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...contentProps}
->
-	{@render children?.({ sidebar: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { SidebarBond } from './bond.svelte';
+	import { animateSidebarContent } from './motion.svelte';
+	import type { SidebarRootProps } from './types';
+
+	const bond = SidebarBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = animateSidebarContent({ '0': '0px', '1': 'auto' }),
+		enter = undefined,
+		exit = undefined,
+		initial = animateSidebarContent({ '0': '0px', '1': 'auto', duration: 0 }),
+		...restProps
+	}: SidebarRootProps<E, B> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="sidebar.content"
+	class={['bg-card border-border', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...contentProps}
+>
+	{@render children?.({ sidebar: bond })}
+</HtmlAtom>

package/dist/components/textarea/textarea-input.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-	let { class: klass = '', value = $bindable(), ...restProps } = $props();
-</script>
-
-<textarea
-	class={['border-border w-full p-2 outline-none', '$preset', klass]}
-	bind:value
-	{...restProps}
-></textarea>
+<script lang="ts">
+	let { class: klass = '', value = $bindable(), ...restProps } = $props();
+</script>
+
+<textarea
+	class={['border-border w-full p-2 outline-none', '$preset', klass]}
+	bind:value
+	{...restProps}
+></textarea>

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

@@ -1,9 +1,9 @@
-<script>
-	import { Input } from '../input';
-
-	let { class: klass = '', children, ...restProps } = $props();
-</script>
-
-<Input.Root preset="textarea" class={['h-auto', klass]} {...restProps}>
-	{@render children?.()}
-</Input.Root>
+<script>
+	import { Input } from '../input';
+
+	let { class: klass = '', children, ...restProps } = $props();
+</script>
+
+<Input.Root preset="textarea" class={['h-auto', klass]} {...restProps}>
+	{@render children?.()}
+</Input.Root>

package/dist/components/tooltip/tooltip-trigger.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import { PopoverBond } from '../popover/bond.svelte';
-	import { Trigger } from '../popover/atoms';
-
-	const popoverBond = PopoverBond.get();
-
-	let { onmount, children, onclick = undefined, ...restProps } = $props();
-
-	function tooltip(node: HTMLElement) {
-		const onpointerenter = async () => {
-			requestAnimationFrame(() => {
-				popoverBond?.state.open();
-			});
-			node.addEventListener('pointerleave', onpointerleave);
-		};
-		const onpointerleave = () => {
-			popoverBond?.state.close();
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		node.addEventListener('pointerenter', onpointerenter, { passive: true });
-
-		const cleanup = () => {
-			node.removeEventListener('pointerenter', onpointerenter);
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		const unmount = onmount?.(node);
-
-		return () => {
-			cleanup?.();
-			unmount?.();
-		};
-	}
-</script>
-
-<Trigger preset="tooltip.trigger" onmount={tooltip} {onclick} {...restProps}>
-	{@render children?.()}
-</Trigger>
+<script lang="ts">
+	import { PopoverBond } from '../popover/bond.svelte';
+	import { Trigger } from '../popover/atoms';
+
+	const popoverBond = PopoverBond.get();
+
+	let { onmount, children, onclick = undefined, ...restProps } = $props();
+
+	function tooltip(node: HTMLElement) {
+		const onpointerenter = async () => {
+			requestAnimationFrame(() => {
+				popoverBond?.state.open();
+			});
+			node.addEventListener('pointerleave', onpointerleave);
+		};
+		const onpointerleave = () => {
+			popoverBond?.state.close();
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		node.addEventListener('pointerenter', onpointerenter, { passive: true });
+
+		const cleanup = () => {
+			node.removeEventListener('pointerenter', onpointerenter);
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		const unmount = onmount?.(node);
+
+		return () => {
+			cleanup?.();
+			unmount?.();
+		};
+	}
+</script>
+
+<Trigger preset="tooltip.trigger" onmount={tooltip} {onclick} {...restProps}>
+	{@render children?.()}
+</Trigger>

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

@@ -1,2 +1,3 @@
 export * from './types';
 export * as Tree from './atoms';
+export * from './motion.svelte';

package/dist/components/tree/index.js

@@ -1,2 +1,3 @@
 export * from './types';
 export * as Tree from './atoms';
+export * from './motion.svelte';

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

@@ -0,0 +1,6 @@
+export type AnimatePopoverContentParams = {
+    duration?: number;
+    delay?: number;
+    ease?: string;
+};
+export declare function animateTreeBody(params?: AnimatePopoverContentParams): (node: HTMLElement) => void;

package/dist/components/tree/motion.svelte.js

@@ -0,0 +1,14 @@
+import { animate } from 'motion';
+import { TreeBond } from './bond.svelte';
+export function animateTreeBody(params = {}) {
+    const bond = TreeBond.get();
+    return (node) => {
+        const { delay = 0, duration = 0.1, ease } = params;
+        const isOpen = bond?.state.props.open ?? false;
+        animate(node, {
+            height: +isOpen ? 'auto' : 0,
+            opacity: +isOpen,
+            pointerEvents: isOpen ? '' : 'none'
+        }, { duration, delay, ease });
+    };
+}

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

@@ -1,7 +1,8 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { TreeBond } from './bond.svelte';
 	import { HtmlAtom, type Base } from '../atom';
+	import { TreeBond } from './bond.svelte';
 	import type { TreeBodyProps } from './types';
+	import { animateTreeBody } from './motion.svelte';
 
 	const bond = TreeBond.get();
 
@@ -10,10 +11,10 @@
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = undefined,
+		animate = animateTreeBody(),
 		enter = undefined,
 		exit = undefined,
-		initial = undefined,
+		initial = animateTreeBody({ duration: 0 }),
 		...restProps
 	}: TreeBodyProps<E, B> = $props();