chore: improve preset definition

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",

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';
 

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);

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,

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>

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';
 

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)}

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',

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}

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)}

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();
 

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]}

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,

src/lib/context/index.ts

@@ -1,6 +1,7 @@
 export {
 	type PresetModuleName as ModuleName,
 	type Preset,
+	type PresetEntryRecord,
 	type PresetEntry,
 	getPreset,
 	setPreset

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;

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));
 }