@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/alert/alert-icon.svelte

@@ -11,12 +11,6 @@
 		base = Icon,
 		preset = 'alert.icon',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: AlertIconProps<E, B> = $props();
 
@@ -35,12 +29,6 @@
 		'$preset',
 		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)}
 	{...iconProps}
 >
 	{@render children?.({ alert: bond! })}

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

@@ -1,68 +1,56 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
-	import type { AlertRootProps } from './types';
-	import './alert.css';
-
-	let {
-		class: klass = '',
-		preset = 'alert',
-		disabled = false,
-		extend = {},
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertRootProps<E, B> = $props();
-
-	const bondProps = defineState<AlertBondProps>(
-		[defineProperty('disabled', () => disabled), defineProperty('rest', () => restProps)],
-		() => ({ disabled, extend })
-	);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new AlertBondState(() => props);
-		return new AlertBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{preset}
-	class={[
-		'alert border-border relative flex gap-1 rounded-md border p-4 transition-all duration-200',
-		// Base styles
-		'bg-background text-foreground',
-		// State styles
-		{
-			'pointer-events-none opacity-50': disabled
-		},
-		'$preset',
-		klass
-	]}
-	{bond}
-	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?.({ alert: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
+	import type { AlertRootProps } from './types';
+	import './alert.css';
+
+	let {
+		class: klass = '',
+		preset = 'alert',
+		disabled = false,
+		extend = {},
+		factory = _factory,
+		children,
+		...restProps
+	}: AlertRootProps<E, B> = $props();
+
+	const bondProps = defineState<AlertBondProps>(
+		[defineProperty('disabled', () => disabled), defineProperty('rest', () => restProps)],
+		() => ({ disabled, extend })
+	);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new AlertBondState(() => props);
+		return new AlertBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		'alert border-border relative flex gap-1 rounded-md border p-4 transition-all duration-200',
+		// Base styles
+		'bg-background text-foreground',
+		// State styles
+		{
+			'pointer-events-none opacity-50': disabled
+		},
+		'$preset',
+		klass
+	]}
+	{bond}
+	{...rootProps}
+>
+	{@render children?.({ alert: bond })}
+</HtmlAtom>

package/dist/components/alert/alert-title.svelte

@@ -10,12 +10,6 @@
 		class: klass = '',
 		preset = 'alert.title',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: AlertTitleProps<E, B> = $props();
 
@@ -30,12 +24,6 @@
 	{bond}
 	{preset}
 	class={['alert-title border-border text-sm leading-tight font-medium', '$preset', 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)}
 	{...titleProps}
 >
 	{@render children?.({ alert: bond! })}

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

@@ -1,61 +1,27 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory } from '../../types';
 import type { AlertBond } from './bond.svelte';
-/**
- * Extend this interface to add custom alert root properties in your application.
- */
-export interface AlertRootExtendProps {
-}
-/**
- * Extend this interface to add custom alert content properties in your application.
- */
-export interface AlertContentExtendProps {
-}
-/**
- * Extend this interface to add custom alert title properties in your application.
- */
-export interface AlertTitleExtendProps {
-}
-/**
- * Extend this interface to add custom alert description properties in your application.
- */
-export interface AlertDescriptionExtendProps {
-}
-/**
- * Extend this interface to add custom alert icon properties in your application.
- */
-export interface AlertIconExtendProps {
-}
-/**
- * Extend this interface to add custom alert actions properties in your application.
- */
-export interface AlertActionsExtendProps {
-}
-/**
- * Extend this interface to add custom alert close button properties in your application.
- */
-export interface AlertCloseButtonExtendProps {
-}
-export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertRootExtendProps {
+export interface AlertSnippetProps extends SnippetProps {
+    alert: AlertBond;
+}
+export type AlertChildren = Snippet<[AlertSnippetProps]>;
+export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AlertChildren> {
     dismissible?: boolean;
     dismissed?: boolean;
     disabled?: boolean;
     extend?: Record<string, unknown>;
     factory?: Factory<AlertBond>;
-    children?: Snippet<[{
-        alert: AlertBond;
-    }]>;
 }
-export interface AlertContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertContentExtendProps {
+export interface AlertContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AlertChildren> {
 }
-export interface AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertTitleExtendProps {
+export interface AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AlertChildren> {
 }
-export interface AlertDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertDescriptionExtendProps {
+export interface AlertDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AlertChildren> {
 }
-export interface AlertIconProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertIconExtendProps {
+export interface AlertIconProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AlertChildren> {
 }
-export interface AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertActionsExtendProps {
+export interface AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AlertChildren> {
 }
-export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertCloseButtonExtendProps {
+export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AlertChildren> {
 }

package/dist/components/atom/html-atom.svelte

@@ -1,95 +1,98 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Base, HtmlAtomProps, SnippetBase } from './types';
-	import { RootBond } from '../root';
-	import { HtmlElement } from '../element';
-	import { getPreset } from '../../context';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import SnippetRenderer from './snippet-renderer.svelte';
-	import type { Component } from 'svelte';
-	import type { ClassValue } from '../../utils';
-	import {
-		resolvePreset,
-		resolveLocalVariants,
-		mergeVariants,
-		mergeClassesWithPreset,
-		extractRestProps,
-		isSnippetBase
-	} from './utils';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	type Props =  Omit<HTMLAttributes<Element>, 'children'> & HtmlAtomProps<E, B>;
-
-	const rootBond = RootBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div',
-		base = undefined,
-		preset: presetKey = undefined,
-		bond = undefined,
-		variants = undefined,
-		children: childrenProp = undefined,
-		...restProps
-	}: Props = $props();
-
-	// Memoize preset resolution - only recompute when presetKey or bond changes
-	const preset = $derived.by(() => {
-		if (!presetKey) return undefined;
-		const result = getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]);
-		return resolvePreset(result);
-	});
-
-	const presetVariantsProps = $derived(preset?.variants);
-
-	// Resolve local variants - either VariantDefinition or function
-	const localVariants = $derived(resolveLocalVariants(variants, bond, restProps));
-
-	// Merge preset variants with local variants
-	// Memoized to avoid recomputation when inputs haven't changed
-	const mergedVariants = $derived.by(() => {
-		return mergeVariants(
-			presetVariantsProps,
-			preset?.class,
-			preset?.compounds,
-			preset?.defaults,
-			localVariants,
-			bond,
-			restProps
-		);
-	});
-
-	const _klass = $derived(
-		mergeClassesWithPreset(klass, preset?.class, mergedVariants?.class as ClassValue)
-	);
-
-	const _base = $derived(base ?? preset?.base);
-	const _as = $derived(as ?? preset?.as);
-	const _restProps = $derived(extractRestProps(preset, mergedVariants, restProps));
-
-	const isSnippet = $derived(isSnippetBase(_base));
-
-	const snippet = $derived(_base as SnippetBase);
-
-	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
-
-	const renderer = $derived.by(() => {
-		if (isSnippet)
-			return {
-				component: SnippetRenderer,
-				props: { snippet: snippet, class: _klass, as: _as, children: childrenProp, ..._restProps }
-			};
-
-		return {
-			component: _base ?? atom,
-			props: { class: _klass, as: _as, ..._restProps }
-		};
-	}) as { component: Component; props: Record<string, any> };
-</script>
-
-<renderer.component {...renderer.props}>
-	{#snippet children(args: any)}
-		{@render (childrenProp as any)?.(args)}
-	{/snippet}
-</renderer.component>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Base, HtmlAtomProps } from './types';
+	import { RootBond } from '../root';
+	import { HtmlElement } from '../element';
+	import { getPreset } from '../../context';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import SnippetRenderer from './snippet-renderer.svelte';
+	import type { Component } from 'svelte';
+	import type { ClassValue } from '../../utils';
+	import {
+		resolvePreset,
+		resolveLocalVariants,
+		mergeVariants,
+		mergeClassesWithPreset,
+		extractRestProps,
+		isSnippetBase
+	} from './utils';
+
+	const rootBond = RootBond.get();
+
+	let {
+		class: klass = '',
+		as = undefined,
+		base = undefined,
+		preset: presetKey = undefined,
+		bond = undefined,
+		variants = undefined,
+		fallback = undefined,
+		children: children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> = $props();
+
+	// Memoize preset resolution - only recompute when presetKey or bond changes
+	const preset = $derived.by(() => {
+		if (!presetKey) return undefined;
+		const result = getPreset(presetKey as PresetModuleName)?.(bond);
+		return resolvePreset(result);
+	});
+
+	// Resolve local variants - either VariantDefinition or function
+	const localVariants = $derived(resolveLocalVariants(variants, bond, restProps));
+
+	// Merge preset variants with local variants
+	// Memoized to avoid recomputation when inputs haven't changed
+	const mergedVariants = $derived.by(() => {
+		return mergeVariants(
+			preset?.variants,
+			preset?.class,
+			preset?.compounds,
+			preset?.defaults,
+			localVariants,
+			bond,
+			restProps
+		);
+	});
+
+	const finalKlass = $derived(
+		mergeClassesWithPreset(klass, preset?.class, mergedVariants?.class as ClassValue)
+	);
+
+	const finalBase = $derived(base ?? preset?.base);
+	const finalAs = $derived(as ?? preset?.as);
+	const finalRestProps = $derived(extractRestProps(preset, mergedVariants, restProps, fallback));
+
+	const atom = $derived(rootBond?.state?.props?.renderers?.html ?? HtmlElement);
+
+	// Memoize the snippet check so the renderer component / props don't both
+	// recompute it on every reactive tick.
+	const baseIsSnippet = $derived(isSnippetBase(finalBase));
+
+	// Track the renderer component and its props as INDEPENDENT signals.
+	// - `rendererComponent` only flips when the underlying base/atom changes,
+	//   so Svelte won't tear down + remount when only props change.
+	// - `rendererProps` re-allocates when any prop changes, but doesn't drag
+	//   the component identity with it (no nested `{ component, props }` wrapper).
+	const RendererComponent = $derived(
+		baseIsSnippet ? (SnippetRenderer as unknown as Component) : ((finalBase ?? atom) as Component)
+	);
+
+	const rendererProps = $derived.by((): Record<string, unknown> => {
+		if (baseIsSnippet) {
+			return {
+				snippet: finalBase,
+				class: finalKlass,
+				as: finalAs,
+				children: children,
+				...finalRestProps
+			};
+		}
+		return { class: finalKlass, as: finalAs, ...finalRestProps };
+	});
+
+	function forwardChildren(...args: any[]) {
+		return children?.(...args);
+	}
+</script>
+
+<RendererComponent {...rendererProps} children={forwardChildren} />

package/dist/components/atom/html-atom.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import type { Base, HtmlAtomProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Omit<HTMLAttributes<HTMLElementTagNameMap[E]>, "children"> & HtmlAtomProps<E, B>;
+    props: HtmlAtomProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,3 +1,4 @@
 export { default as HtmlAtom } from './html-atom.svelte';
 export * as Atom from './atoms';
 export * from './types';
+export { resolvePreset } from './utils';

package/dist/components/atom/index.js

@@ -1,3 +1,4 @@
 export { default as HtmlAtom } from './html-atom.svelte';
 export * as Atom from './atoms';
 export * from './types';
+export { resolvePreset } from './utils';

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

@@ -1,27 +1,78 @@
 import type { Component, Snippet } from 'svelte';
-import { type HtmlElementTagName } from '../element';
+import type { HtmlElementTagName } from '../element';
 import type { HtmlElementProps, ElementType } from '../element/types';
 import type { PresetModuleName } from '../../context/preset.svelte';
 import type { Bond } from '../../shared';
 import type { VariantDefinition } from '../../utils';
+/** Base type for component-based implementations */
 export type ComponentBase = Component;
+/** Base type for snippet-based implementations */
 export type SnippetBase = Snippet;
-export type Base<Args = any> = Args extends Record<string, any> ? ComponentBase : Args extends unknown[] ? SnippetBase : never;
 /**
- * Extend this interface to add custom HTML atom properties in your application.
+ * Generic base type that can be either a Component or Snippet
+ * - Allows components to work with both rendering patterns
+ * - Provides type safety for generic component props
  */
-export interface HtmlAtomExtendProps {
+export type Base<Args extends unknown[] = unknown[]> = Args extends [
+    infer First extends Record<string, any>,
+    ...unknown[]
+] ? ComponentBase : Args extends [] ? SnippetBase | ComponentBase : Args extends unknown[] ? SnippetBase : never;
+/**
+ * Base interface for snippet context props.
+ * Extend this to type the snippet argument in your component.
+ */
+export interface SnippetProps {
 }
-type Variants = VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
-export interface HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B extends Base<any> = Base> extends HtmlElementProps<E>, HtmlAtomExtendProps {
-    bond?: Bond;
+/** Variant configuration - can be static or dynamic */
+export type Variants = VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
+/**
+ * Base props for HTML atom components
+ *
+ * Extensibility pattern:
+ * ```ts
+ * // In component type file:
+ * interface CustomSnippetProps extends SnippetProps {
+ *   value: string;
+ *   onChange: (value: string) => void;
+ * }
+ *
+ * interface CustomAtomProps extends HtmlAtomProps<'input'> {
+ *   children?: Snippet<[CustomSnippetProps]>;
+ * }
+ * ```
+ */
+export interface HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B extends Base<any> = Base, Children extends Snippet<unknown[]> = Snippet> extends HtmlElementProps<E, Children> {
+    /** Optional Bond for state management & context */
+    bond?: Bond | undefined;
+    /** Base component or snippet to render (can be overridden) */
     base?: B | undefined;
+    /** Preset configuration module */
     preset?: PresetModuleName | (string & {});
     /**
-     * Variant definition or function to resolve variants
-     * - VariantDefinition: Static variant config with base, variants, compoundVariants, defaultVariants
-     * - Function: Dynamic function that receives bond and props, returns props (legacy)
+     * Variant definition or function to resolve variants dynamically
+     *
+     * Supports two patterns:
+     * 1. Static: `VariantDefinition` - static config with variants, defaultVariants, etc.
+     * 2. Dynamic: `Function` - receives bond and props, returns resolved props
+     *
+     * Example:
+     * ```ts
+     * variants: cva('button', {
+     *   variants: {
+     *     size: { sm: 'px-2 py-1', lg: 'px-4 py-2' }
+     *   }
+     * })
+     * ```
      */
     variants?: Variants;
+    /**
+     * Fallback props applied **before** the preset, so user/preset configuration
+     * overrides them. Useful for component implementers who want sensible
+     * defaults (e.g. `animate`, `enter`, `exit`, `initial`) without preventing
+     * downstream consumers from customizing via presets.
+     *
+     * Merge order (last wins): `fallback` → `preset` → `variants` → `restProps`.
+     */
+    fallback?: Record<string, any> | undefined;
 }
 export type { ElementType };

package/dist/components/atom/types.js

@@ -1 +1 @@
-import {} from '../element';
+export {};

package/dist/components/atom/utils/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns `true` when `base` is a Svelte 5 snippet (compiled to an arrow function
+ * with no `.prototype`), as opposed to a component (compiled to a named function
+ * that does have a `.prototype`).
+ */
+export declare function isSnippetBase(base: unknown): boolean;

package/dist/components/atom/utils/base.js

@@ -0,0 +1,8 @@
+/**
+ * Returns `true` when `base` is a Svelte 5 snippet (compiled to an arrow function
+ * with no `.prototype`), as opposed to a component (compiled to a named function
+ * that does have a `.prototype`).
+ */
+export function isSnippetBase(base) {
+    return typeof base === 'function' && !base.prototype;
+}

package/dist/components/atom/utils/cache.d.ts

@@ -0,0 +1,17 @@
+import type { Bond } from '../../../shared';
+export type ResolvedProps = Record<string, unknown>;
+export declare const MAX_CACHE_SIZE = 100;
+export declare function getCacheMap(bond: Bond | null | undefined): Map<string, ResolvedProps>;
+export declare function getDefCacheMap(def: object, bond: Bond | null | undefined): Map<string, ResolvedProps>;
+/**
+ * Performs a true-LRU lookup (touch on hit) and returns the cached value, or
+ * `undefined` if absent. Avoids the FIFO eviction bug of the previous impl.
+ */
+export declare function lruGet<V>(map: Map<string, V>, key: string): V | undefined;
+/** Insert with capacity eviction of the least-recently-used entry. */
+export declare function lruSet<V>(map: Map<string, V>, key: string, value: V, max: number): void;
+export declare function getCachedOwnKeys(obj: object | null | undefined): readonly string[];
+/** Returns true if `obj` has at least one own enumerable key. */
+export declare function hasOwnKeys(obj: object): boolean;
+export declare function hasOwnKeysCached(obj: object | null | undefined): boolean;
+export declare function getCompoundConditionKeys(compound: object): string[];