diff --git a/package.json b/package.json
index fc7a8a1..a5b4111 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@svelte-atoms/core",
-	"version": "1.0.0-alpha.18",
+	"version": "1.0.0-alpha.19",
 	"description": "A modular, accessible, and extensible Svelte UI component library.",
 	"repository": {
 		"type": "git",
diff --git a/src/lib/components/alert/alert-root.svelte b/src/lib/components/alert/alert-root.svelte
index 88add26..140e402 100644
--- a/src/lib/components/alert/alert-root.svelte
+++ b/src/lib/components/alert/alert-root.svelte
@@ -17,7 +17,7 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
-	import { toClassValue, cn, defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import './alert.css';
 
diff --git a/src/lib/components/atom/html-atom.svelte b/src/lib/components/atom/html-atom.svelte
index cbf94b1..b958d72 100644
--- a/src/lib/components/atom/html-atom.svelte
+++ b/src/lib/components/atom/html-atom.svelte
@@ -21,7 +21,9 @@
 		...restProps
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 
-	const preset = $derived(presetKey ? getPreset(presetKey as PresetModuleName) : undefined);
+	const preset = $derived(
+		presetKey ? getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]) : undefined
+	);
 
 	const _klass = $derived.by(() => {
 		const klasses = Array.isArray(klass) ? klass : [klass];
@@ -33,14 +35,14 @@
 		if (hasPresetPlaceholder) {
 			return klasses.map((cls) => {
 				if (typeof cls === 'string' && cls.includes('$preset')) {
-					return cls.replace('$preset', cn(toClassValue.apply(bond, [preset?.class])));
+					return cls.replace('$preset', cn(preset?.class));
 				}
 
 				return toClassValue.apply(bond, [cls]);
 			});
 		}
 
-		return [preset?.class ?? '', '$preset', klass].map((arg) => toClassValue.apply(bond, [arg]));
+		return [preset?.class ?? '', toClassValue.apply(bond, [klass])];
 	});
 
 	const _base = $derived(base ?? preset?.base);
diff --git a/src/lib/components/combobox/combobox-trigger.svelte b/src/lib/components/combobox/combobox-trigger.svelte
index cfba975..f2a38e2 100644
--- a/src/lib/components/combobox/combobox-trigger.svelte
+++ b/src/lib/components/combobox/combobox-trigger.svelte
@@ -1,7 +1,6 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { ComboboxBond } from './bond.svelte';
 	import { Trigger } from '$svelte-atoms/core/components/dropdown/atoms';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = ComboboxBond.get();
@@ -10,11 +9,9 @@
 		throw new Error('Combobox atom was not found');
 	}
 
-	const preset = getPreset('combobox.trigger');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'button',
+		as = 'button',
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
diff --git a/src/lib/components/container/container.stories.svelte b/src/lib/components/container/container.stories.svelte
index fca2f19..9d5a5b8 100644
--- a/src/lib/components/container/container.stories.svelte
+++ b/src/lib/components/container/container.stories.svelte
@@ -10,7 +10,7 @@
 
 <Story name="Container">
 	<Root class="p-4">
-		<ContainerCmp class="flex flex-col items-center gap-4 w-full">
+		<ContainerCmp class="flex w-full flex-col items-center gap-4">
 			<div class="flex w-full gap-4">
 				{#each { length: 5 } as _, i (i)}
 					<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
diff --git a/src/lib/components/datagrid/datagrid-body.svelte b/src/lib/components/datagrid/datagrid-body.svelte
index a7cf7ea..8eb8e21 100644
--- a/src/lib/components/datagrid/datagrid-body.svelte
+++ b/src/lib/components/datagrid/datagrid-body.svelte
@@ -10,7 +10,6 @@
 <script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { DataGridBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	export type { HtmlElementTagName } from '$svelte-atoms/core/components/element';
 
diff --git a/src/lib/components/dialog/dialog-description.svelte b/src/lib/components/dialog/dialog-description.svelte
index 4ca97cf..931ad38 100644
--- a/src/lib/components/dialog/dialog-description.svelte
+++ b/src/lib/components/dialog/dialog-description.svelte
@@ -7,15 +7,11 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
 	import { DialogBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('dialog.description');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('p' as E),
-		base = preset?.base as B,
+		as = 'p' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -36,7 +32,7 @@
 
 <HtmlAtom
 	{as}
-	{base}
+	preset="dialog.description"
 	class={['$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index 69b2165..4c08a6b 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -23,23 +23,20 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { toClassValue, defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { type TransitionFunction } from '$svelte-atoms/core/helpers/html-element.svelte';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { type TransitionFunction } from '$svelte-atoms/core/components/element';
 	import Teleport from '$svelte-atoms/core/components/portal/teleport.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
 
 	type Element = HTMLElementTagNameMap[E];
 
-	const preset = getPreset('drawer');
-
 	let {
 		open = $bindable(false),
 		children = undefined,
 		class: klass = '',
-		as = preset?.as ?? 'dialog',
+		as = 'dialog',
 		disabled = false,
 		onclose = undefined,
 		onmount = undefined,
@@ -96,6 +93,7 @@
 	{as}
 	{bond}
 	portal="root.l1"
+	preset="drawer"
 	class={[
 		'pointer-events-auto h-full w-full overflow-hidden bg-transparent',
 		!open && 'pointer-events-none',
diff --git a/src/lib/components/input/input-value.svelte b/src/lib/components/input/input-value.svelte
index 63b3657..21bdb46 100644
--- a/src/lib/components/input/input-value.svelte
+++ b/src/lib/components/input/input-value.svelte
@@ -39,7 +39,7 @@
 		...restProps
 	}: InputProps = $props();
 
-	const preset = getPreset(presetKey as PresetModuleName);
+	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
 
 	const valueProps = $derived({
 		...(bond?.input?.() ?? {}),
@@ -96,7 +96,7 @@
 	}
 	class={[
 		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		toClassValue(bond, preset?.class),
+		preset?.class,
 		toClassValue(bond, klass)
 	]}
 	onchange={handleChange}
diff --git a/src/lib/components/portal/portal-root.svelte b/src/lib/components/portal/portal-root.svelte
index adad5b7..7a50102 100644
--- a/src/lib/components/portal/portal-root.svelte
+++ b/src/lib/components/portal/portal-root.svelte
@@ -20,13 +20,10 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { toClassValue, defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 
 	type Element = ElementType<E>;
 
-	const preset = getPreset('portal');
-
 	let {
 		class: klass = '',
 		id,
@@ -45,7 +42,7 @@
 	const portalsBond = PortalsBond.get();
 
 	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id)]);
-	const bond = factory(bondProps) as PortalBond;
+	const bond = factory(bondProps).share() as PortalBond;
 
 	portalsBond?.state.set(id, bond);
 
@@ -67,7 +64,7 @@
 
 	function _factory(props: typeof bondProps) {
 		const portalState = new PortalState(() => props);
-		return new PortalBond(portalState).share();
+		return new PortalBond(portalState);
 	}
 
 	export function getBond() {
@@ -77,6 +74,7 @@
 
 <HtmlAtom
 	{bond}
+	preset="portal"
 	class={['pointer-events-none', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/scrollable/scrollable-content.svelte b/src/lib/components/scrollable/scrollable-content.svelte
index 78ce4fc..560b622 100644
--- a/src/lib/components/scrollable/scrollable-content.svelte
+++ b/src/lib/components/scrollable/scrollable-content.svelte
@@ -12,7 +12,6 @@
 	import { ScrollableBond } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = ScrollableBond.get();
 
diff --git a/src/lib/components/scrollable/scrollable-root.svelte b/src/lib/components/scrollable/scrollable-root.svelte
index 1bd5852..c171bed 100644
--- a/src/lib/components/scrollable/scrollable-root.svelte
+++ b/src/lib/components/scrollable/scrollable-root.svelte
@@ -21,11 +21,8 @@
 	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('scrollable');
-
 	let {
 		scrollX = $bindable(0),
 		scrollY = $bindable(0),
@@ -36,8 +33,6 @@
 		class: klass = '',
 		disabled = false,
 		open = true,
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -110,7 +105,6 @@
 </script>
 
 <HtmlAtom
-	{as}
 	{bond}
 	preset="scrollable"
 	class={['scrollable-root border-border relative box-content overflow-hidden', '$preset', klass]}
diff --git a/src/lib/components/tree/tree-root.svelte b/src/lib/components/tree/tree-root.svelte
index f65dabc..f99f1d9 100644
--- a/src/lib/components/tree/tree-root.svelte
+++ b/src/lib/components/tree/tree-root.svelte
@@ -18,16 +18,11 @@
 	import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/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,
diff --git a/src/lib/context/index.ts b/src/lib/context/index.ts
index 1a21314..479b56b 100644
--- a/src/lib/context/index.ts
+++ b/src/lib/context/index.ts
@@ -1,6 +1,7 @@
 export {
 	type PresetModuleName as ModuleName,
 	type Preset,
+	type PresetEntryRecord,
 	type PresetEntry,
 	getPreset,
 	setPreset
diff --git a/src/lib/context/preset.svelte.ts b/src/lib/context/preset.svelte.ts
index 4b6d5cf..ac24f8a 100644
--- a/src/lib/context/preset.svelte.ts
+++ b/src/lib/context/preset.svelte.ts
@@ -1,7 +1,10 @@
 import { getContext, setContext } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 import { merge } from 'es-toolkit';
-import type { ClassValue } from '$svelte-atoms/core/utils';
 import type { Base } from '$svelte-atoms/core/components/atom';
+import type { Bond } from '../shared';
+
+const CONTEXT_KEY = '@svelte-atoms/context/preset';
 
 export type PresetModuleName =
 	| 'accordion'
@@ -121,14 +124,20 @@ export type PresetModuleName =
 	| 'radio.group'
 	| 'container';
 
-export type PresetEntry = {
+export type PresetEntryRecord = {
+	[key: string]: unknown;
 	class?: ClassValue;
 	as?: string;
 	base?: Base;
 };
-export type Preset = Record<PresetModuleName, PresetEntry>;
 
-const CONTEXT_KEY = '@svelte-atoms/context/preset';
+export type PresetEntry = (
+	this: Bond | undefined | null,
+	bond: Bond | undefined | null,
+	...args: any[]
+) => PresetEntryRecord;
+
+export type Preset = Record<PresetModuleName, PresetEntry>;
 
 export function getPreset<K extends PresetModuleName>(key: K): PresetEntry | undefined;
 export function getPreset(): Partial<Preset> | undefined;
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index eee03b7..e2b05a2 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -4,10 +4,11 @@ import type { ClassValue as SvelteClassValue } from 'svelte/elements';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-export type ClassValueFunction = <T = unknown>(this: T, ...args: unknown[]) => SvelteClassValue;
+export type ClassValueFunction = <T = unknown>(bond: T, ...args: unknown[]) => SvelteClassValue;
 export type ClassValue = SvelteClassValue | ClassValueFunction | undefined;
 
-export function cn(...inputs: SvelteClassValue[]) {
+export type Cn = SvelteClassValue | undefined | false;
+export function cn(...inputs: Cn[]) {
 	return twMerge(clsx(...inputs));
 }
 
diff --git a/src/stories/Theme.svelte b/src/stories/Theme.svelte
index 537ce8d..40b01f0 100644
--- a/src/stories/Theme.svelte
+++ b/src/stories/Theme.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, colorScheme } from '$lib';
+	import { cn, colorScheme, defineProperty, defineState } from '$lib';
 	import { setPreset, type Preset } from '$lib/context';
 
 	let { children = undefined } = $props();
@@ -7,47 +7,51 @@
 	const scheme = colorScheme();
 
 	const preset: Partial<Preset> = {
-		root: {
+		root: () => ({
 			class: 'flex flex-col items-center justify-center p-4'
-		},
-		accordion: {
+		}),
+		accordion: () => ({
 			as: 'ul',
 			class: 'w-full max-w-md rounded-md p-4 accordion-preset'
-		},
-		'accordion.item': {
+		}),
+		'accordion.item': () => ({
 			as: 'li',
 			class: 'mb-2 last:mb-0 rounded-md border border-border bg-popover px-2 py-2'
-		},
-		'accordion.item.header': {
-			class: function () {
-				return [this.state.isActive ? 'text-foreground/100' : 'text-foreground/50'];
-			}
-		},
-		'accordion.item.body': {
+		}),
+		'accordion.item.header': (bond) => {
+			console.log('bond in preset:', bond);
+			return defineState([
+				defineProperty('class', () => [
+					bond?.state?.isActive ? 'text-foreground/100' : 'text-foreground/50'
+				])
+			]);
+		},
+		'accordion.item.body': () => ({
 			class: 'overflow-hidden'
-		},
-		datagrid: {
+		}),
+		datagrid: () => ({
 			class: 'bg-card rounded-md gap-x-2 border border-border overflow-hidden'
-		},
-		'datagrid.header': {
+		}),
+		'datagrid.header': () => ({
 			class: 'bg-background/25 py-2'
-		},
-		'datagrid.tr': {
+		}),
+		'datagrid.tr': () => ({
 			class: 'pr-2 pl-4'
-		},
-		collapsible: {
+		}),
+		collapsible: () => ({
 			class: 'max-w-md rounded-md border border-border'
-		},
-		'collapsible.header': {
+		}),
+		'collapsible.header': () => ({
 			class: 'px-4 py-2 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer'
-		},
-		'collapsible.body': {
+		}),
+		'collapsible.body': () => ({
 			class: 'text-sm px-4'
-		},
-		'popover.content': {
+		}),
+		'popover.content': () => ({
 			class: ''
-		}
+		})
 	};
+
 	setPreset(preset);
 </script>