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

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

@@ -0,0 +1,270 @@
+import { VARIANT_DEF_TAG } from '../../../utils';
+import { getDefCacheMap, getCachedOwnKeys, getCompoundConditionKeys, hasOwnKeysCached, lruGet, lruSet, MAX_CACHE_SIZE } from './cache';
+/**
+ * Builds a compact cache key from variant-relevant prop values without
+ * paying the cost of `JSON.stringify`. Variant prop values are almost always
+ * primitives (the keys of a variant map), so we serialize inline and only fall
+ * back to `JSON.stringify` for the rare object value.
+ */
+function buildVariantKey(variantKeys, finalProps) {
+    let key = '';
+    for (const k of variantKeys) {
+        if (!(k in finalProps))
+            continue;
+        const v = finalProps[k];
+        // Discriminate type so e.g. `"true"` and `true` don't collide.
+        const t = typeof v;
+        if (v === undefined) {
+            key += k + '=u|';
+        }
+        else if (v === null) {
+            key += k + '=n|';
+        }
+        else if (t === 'string' || t === 'number' || t === 'boolean') {
+            key += k + '=' + t[0] + ':' + v + '|';
+        }
+        else {
+            key += k + '=o:' + JSON.stringify(v) + '|';
+        }
+    }
+    return key;
+}
+/**
+ * Resolves a `VariantDefinition` to a concrete `ResolvedProps` object.
+ *
+ * Results are cached in a per-definition LRU keyed by bond instance + a fast
+ * structural key over variant-relevant props, so the same inputs always return
+ * the same (reference-equal) object without re-computing.
+ */
+export function resolveVariants(def, bond, props) {
+    const { variants: variantMap, compounds, defaults, class: baseClass } = def;
+    const finalProps = hasOwnKeysCached(defaults) ? { ...defaults, ...props } : props;
+    const variantKeys = getCachedOwnKeys(variantMap);
+    // Fast path: no variants or compounds — cached per `def` reference so
+    // repeated renders return the SAME object (preserves downstream identity).
+    if (variantKeys.length === 0 && !compounds?.length) {
+        const fastMap = getDefCacheMap(def, bond);
+        const fastHit = lruGet(fastMap, '');
+        if (fastHit !== undefined)
+            return fastHit;
+        const fastResult = { class: baseClass ? [baseClass] : [] };
+        lruSet(fastMap, '', fastResult, MAX_CACHE_SIZE);
+        return fastResult;
+    }
+    const cacheKey = buildVariantKey(variantKeys, finalProps);
+    const cacheMap = getDefCacheMap(def, bond);
+    const hit = lruGet(cacheMap, cacheKey);
+    if (hit !== undefined)
+        return hit;
+    const classes = [];
+    const attributes = {};
+    if (baseClass)
+        classes.push(baseClass);
+    if (variantMap) {
+        for (const key of variantKeys) {
+            const value = finalProps[key];
+            if (value === undefined)
+                continue;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const variantValue = variantMap[key]?.[value];
+            if (variantValue === undefined)
+                continue;
+            const resolved = typeof variantValue === 'function' ? variantValue(bond) : variantValue;
+            if (typeof resolved === 'string') {
+                classes.push(resolved);
+            }
+            else if (typeof resolved === 'object' && resolved !== null) {
+                if ('class' in resolved)
+                    classes.push(resolved.class);
+                const syms = Object.getOwnPropertySymbols(resolved);
+                if (syms.length) {
+                    const src = resolved;
+                    for (const sym of syms)
+                        attributes[sym] = src[sym];
+                }
+            }
+        }
+    }
+    if (compounds?.length) {
+        for (const compound of compounds) {
+            const compoundClass = compound.class;
+            const conditionKeys = getCompoundConditionKeys(compound);
+            let matches = true;
+            for (const key of conditionKeys) {
+                if (finalProps[key] !== compound[key]) {
+                    matches = false;
+                    break;
+                }
+            }
+            if (!matches)
+                continue;
+            if (compoundClass)
+                classes.push(compoundClass);
+        }
+    }
+    const result = { class: classes, ...attributes };
+    lruSet(cacheMap, cacheKey, result, MAX_CACHE_SIZE);
+    return result;
+}
+/**
+ * Cache constructed preset variant defs by `presetVariants` reference so the
+ * downstream per-def cache (`getDefCacheMap`) hits across renders.
+ */
+const presetDefCache = new WeakMap();
+function getOrBuildPresetDef(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetVariants, presetClass, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetCompounds, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetDefaults) {
+    const cached = presetDefCache.get(presetVariants);
+    if (cached)
+        return cached;
+    const built = {
+        class: presetClass ?? '',
+        variants: presetVariants,
+        compounds: presetCompounds ?? [],
+        defaults: presetDefaults ?? {}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
+    presetDefCache.set(presetVariants, built);
+    return built;
+}
+/**
+ * Merge cache: chained WeakMaps keyed by `(presetResolved, localVariants)`.
+ *
+ * Both inputs come from `resolveVariants` / `resolveLocalVariants`, which
+ * return reference-stable objects across renders. When neither flips, we
+ * return the SAME merged object every time — eliminating a fresh array+spread
+ * allocation on the hot path. Keys are weak so entries are GC'd whenever
+ * either input is unreachable.
+ */
+const mergeCache = new WeakMap();
+function getCachedMerge(presetResolved, localVariants) {
+    const inner = mergeCache.get(presetResolved);
+    return inner?.get(localVariants);
+}
+function setCachedMerge(presetResolved, localVariants, merged) {
+    let inner = mergeCache.get(presetResolved);
+    if (!inner) {
+        inner = new WeakMap();
+        mergeCache.set(presetResolved, inner);
+    }
+    inner.set(localVariants, merged);
+}
+/**
+ * Merges preset variant definitions with locally-supplied resolved variant props.
+ * Local values always take precedence; classes are concatenated (preset first).
+ */
+export function mergeVariants(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetVariants, presetClass, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetCompounds, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+presetDefaults, localVariants, bond, props) {
+    if (!presetVariants && !localVariants)
+        return undefined;
+    if (presetVariants && !localVariants) {
+        const variantDef = getOrBuildPresetDef(presetVariants, presetClass, presetCompounds, presetDefaults);
+        return resolveVariants(variantDef, bond, props);
+    }
+    if (!presetVariants && localVariants)
+        return localVariants;
+    const presetVariantDef = getOrBuildPresetDef(
+    // `presetVariants` is non-null in this branch (TS narrowing lost via `&&`).
+    presetVariants, presetClass, presetCompounds, presetDefaults);
+    const presetResolved = resolveVariants(presetVariantDef, bond, props);
+    // `localVariants` is guaranteed non-null in this branch.
+    const local = localVariants;
+    const cachedMerge = getCachedMerge(presetResolved, local);
+    if (cachedMerge !== undefined)
+        return cachedMerge;
+    const presetClasses = Array.isArray(presetResolved.class)
+        ? presetResolved.class
+        : [presetResolved.class];
+    const localClasses = Array.isArray(local.class) ? local.class : [local.class];
+    const merged = {
+        ...presetResolved,
+        ...local,
+        class: [...presetClasses, ...localClasses].filter(Boolean)
+    };
+    setCachedMerge(presetResolved, local, merged);
+    return merged;
+}
+const plainFnCacheBond = new WeakMap();
+const plainFnCacheNoBond = new WeakMap();
+function getPlainFnEntry(fn, bond) {
+    if (!bond)
+        return plainFnCacheNoBond.get(fn);
+    const inner = plainFnCacheBond.get(fn);
+    return inner?.get(bond);
+}
+function setPlainFnEntry(fn, bond, entry) {
+    if (!bond) {
+        plainFnCacheNoBond.set(fn, entry);
+        return;
+    }
+    let inner = plainFnCacheBond.get(fn);
+    if (!inner) {
+        inner = new WeakMap();
+        plainFnCacheBond.set(fn, inner);
+    }
+    inner.set(bond, entry);
+}
+function snapshotPrimitiveProps(props) {
+    let s = '';
+    const keys = Object.keys(props).sort();
+    for (const k of keys) {
+        const v = props[k];
+        const t = typeof v;
+        if (v === null) {
+            s += k + '=n|';
+        }
+        else if (t === 'string' || t === 'number' || t === 'boolean' || t === 'undefined') {
+            s += k + '=' + (t === 'undefined' ? 'u' : t[0]) + ':' + String(v) + '|';
+        }
+        else {
+            // Non-primitive value: cannot safely structural-compare — bail out.
+            return null;
+        }
+    }
+    return s;
+}
+/**
+ * Resolves locally-supplied `variants` to a `ResolvedProps` object.
+ *
+ * Handles three shapes:
+ * - A function tagged with `VARIANT_DEF_TAG` (created by `defineVariants`) → routed through the
+ *   cached `resolveVariants` engine.
+ * - A plain function (manual/legacy) → called with a per-(fn, bond) snapshot
+ *   cache so re-renders with the same primitive props return the same result
+ *   reference. Falls back to direct invocation when props contain non-primitive
+ *   values.
+ * - A raw `VariantDefinition` object → resolved through the cache.
+ */
+export function resolveLocalVariants(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+variants, bond, props) {
+    if (!variants)
+        return undefined;
+    if (typeof variants === 'function' && VARIANT_DEF_TAG in variants) {
+        const config = variants[VARIANT_DEF_TAG];
+        const resolvedConfig = typeof config === 'function' ? config(bond) : config;
+        return resolveVariants(resolvedConfig, bond, props);
+    }
+    if (typeof variants === 'function') {
+        const snapshot = snapshotPrimitiveProps(props);
+        if (snapshot !== null) {
+            const cached = getPlainFnEntry(variants, bond);
+            if (cached && cached.snapshot === snapshot)
+                return cached.result;
+            const result = variants(bond, props);
+            setPlainFnEntry(variants, bond, { snapshot, result });
+            return result;
+        }
+        return variants(bond, props);
+    }
+    return resolveVariants(variants, bond, props);
+}

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

@@ -1,10 +1,5 @@
 import type { Component } from 'svelte';
-/**
- * Extend this interface to add custom avatar properties in your application.
- */
-export interface AvatarExtendProps {
-}
-export interface AvatarProps extends AvatarExtendProps {
+export interface AvatarProps {
     class?: string;
     src?: string | Component;
     alt?: string;

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

@@ -1,2 +1,3 @@
 export { default as Badge } from './badge.svelte';
 export type { BadgeProps } from './badge.svelte';
+export type { BadgeSnippetProps, BadgeChildren } from './types';

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

@@ -1,10 +1,7 @@
-import type { HtmlAtomProps } from '../atom';
+import type { HtmlAtomProps, SnippetProps } from '../atom';
 import type { Snippet } from 'svelte';
-/**
- * Extend this interface to add custom badge properties in your application.
- */
-export interface BadgeExtendProps {
+export interface BadgeSnippetProps extends SnippetProps {
 }
-export interface BadgeProps extends HtmlAtomProps<'span'>, BadgeExtendProps {
-    children?: Snippet<[]>;
+export type BadgeChildren = Snippet<[BadgeSnippetProps]>;
+export interface BadgeProps extends HtmlAtomProps<'span', never, BadgeChildren> {
 }

package/dist/components/button/button.svelte

@@ -1,31 +1,31 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { ButtonProps } from './types';
-	import { HtmlAtom } from '../atom';
-
-	let {
-		class: klass = '',
-		type = 'button',
-		preset = 'button',
-		children = undefined,
-		...restProps
-	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
-
-	const buttonProps = $derived({
-		...restProps,
-		type
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	as="button"
-	class={[
-		'button text-primary-foreground bg-primary border-border hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
-		'$preset',
-		klass
-	]}
-	{...buttonProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ButtonProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	let {
+		class: klass = '',
+		type = 'button',
+		preset = 'button',
+		children = undefined,
+		...restProps
+	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
+
+	const buttonProps = $derived({
+		...restProps,
+		type
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	as="button"
+	class={[
+		'button text-primary-foreground bg-primary border-border hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
+		'$preset',
+		klass
+	]}
+	{...buttonProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -1,11 +1,14 @@
 import type { HtmlAtomProps } from '../atom/types';
-import type { Snippet } from 'svelte';
 /**
- * Extend this interface to add custom button properties in your application.
+ * Button component props with extensible snippet type
+ *
+ * Override snippet children in custom implementations:
+ * ```ts
+ * interface CustomButtonProps extends ButtonProps {
+ *   children?: Snippet<[CustomButtonSnippetProps]>;
+ * }
+ * ```
  */
-export interface ButtonExtendProps {
-}
-export interface ButtonProps extends HtmlAtomProps<'button'>, ButtonExtendProps {
+export interface ButtonProps extends HtmlAtomProps<'button'> {
     type?: 'button' | 'submit' | 'reset';
-    children?: Snippet<[]>;
 }

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

@@ -98,7 +98,6 @@
 			<CalendarDay
 				{day}
 				onclick={() => {
-					console.log('day clicked', day.date);
 					calendarBond?.state.selectStart(new Date(day.date));
 				}}
 			/>

package/dist/components/calendar/calendar-day.svelte

@@ -1,99 +1,99 @@
-<script lang="ts">
-	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
-	import { cn } from '../../utils';
-	import { CalendarBond } from './bond.svelte';
-	import type { CalendarDayProps } from './types';
-	import { HtmlAtom } from '../atom';
-	import './calendar-day.css';
-
-	const calendarBond = CalendarBond.get();
-
-	const selectedDateStart = $derived(calendarBond?.state.props.start);
-	const selectedDateEnd = $derived(calendarBond?.state.props.end);
-	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
-
-	let {
-		class: klass = '',
-		preset = 'calendar.day',
-		day,
-		as = 'button',
-		children = undefined,
-		onclick = handleClick,
-		...restProps
-	}: CalendarDayProps = $props();
-
-	const dayProps = $derived({
-		...calendarBond?.day(day),
-		...restProps
-	});
-
-	const isSelected = $derived.by(() => {
-		if (selectedDateEnd && selectedDateStart) {
-			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
-		}
-
-		return !!(selectedDateStart && isSameDay(day.date, selectedDateStart));
-	});
-
-	function handleClick() {
-		if (day.disabled) return;
-
-		if (isRange) {
-			const start = calendarBond?.state.props.start;
-			if (!start) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			if (isBefore(new Date(day.date), new Date(start))) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			calendarBond?.state.selectEnd(new Date(day.date));
-		} else {
-			calendarBond?.state.selectStart(new Date(day.date));
-		}
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{preset}
-	class={[
-		'calendar-day text-foreground/80 border-border box-border aspect-square cursor-pointer border-b border-l',
-		'hover:bg-accent hover:text-accent-foreground',
-		// State modifiers
-		day.weekend && 'text-primary',
-		day.today && 'font-semibold z-1',
-		day.offmonth && 'text-muted-foreground/50 bg-muted/50 hover:text-muted-foreground/70',
-		// Selected state (overrides above)
-		isSelected && [
-			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground transition-colors duration-100',
-			day.offmonth && 'bg-primary/80',
-			day.weekend && 'bg-primary/90',
-		],
-		// Disabled state (applies opacity on top)
-		day.disabled && 'pointer-events-none opacity-25',
-		klass
-	]}
-	data-disabled={day.disabled}
-	data-prec={day.fromPreviousMonth}
-	data-next={day.fromNextMonth}
-	data-offmonth={day.offmonth}
-	data-weekend={day.weekend}
-	data-today={day.today}
-	data-selected={isSelected}
-	{onclick}
-	{...dayProps}
->
-	{#if children}
-		{@render children({
-			calendar: calendarBond!
-		})}
-	{:else}
-		<div class={cn("value flex items-center justify-center size-full transition-colors duration-100", day.today && ['outline-primary outline-2', isSelected && 'outline-offset-3'])}>
-			<span>{day.dayOfMonth}</span>
-		</div>
-	{/if}
-</HtmlAtom>
+<script lang="ts">
+	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
+	import { cn } from '../../utils';
+	import { CalendarBond } from './bond.svelte';
+	import type { CalendarDayProps } from './types';
+	import { HtmlAtom } from '../atom';
+	import './calendar-day.css';
+
+	const calendarBond = CalendarBond.get();
+
+	const selectedDateStart = $derived(calendarBond?.state.props.start);
+	const selectedDateEnd = $derived(calendarBond?.state.props.end);
+	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
+
+	let {
+		class: klass = '',
+		preset = 'calendar.day',
+		day,
+		as = 'button',
+		children = undefined,
+		onclick = handleClick,
+		...restProps
+	}: CalendarDayProps = $props();
+
+	const dayProps = $derived({
+		...calendarBond?.day(day),
+		...restProps
+	});
+
+	const isSelected = $derived.by(() => {
+		if (selectedDateEnd && selectedDateStart) {
+			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
+		}
+
+		return !!(selectedDateStart && isSameDay(day.date, selectedDateStart));
+	});
+
+	function handleClick() {
+		if (day.disabled) return;
+
+		if (isRange) {
+			const start = calendarBond?.state.props.start;
+			if (!start) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			if (isBefore(new Date(day.date), new Date(start))) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			calendarBond?.state.selectEnd(new Date(day.date));
+		} else {
+			calendarBond?.state.selectStart(new Date(day.date));
+		}
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{preset}
+	class={[
+		'calendar-day text-foreground/80 border-border box-border aspect-square cursor-pointer border-b border-l',
+		'hover:bg-accent hover:text-accent-foreground',
+		// State modifiers
+		day.weekend && 'text-primary',
+		day.today && 'font-semibold z-1',
+		day.offmonth && 'text-muted-foreground/50 bg-muted/50 hover:text-muted-foreground/70',
+		// Selected state (overrides above)
+		isSelected && [
+			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground transition-colors duration-100',
+			day.offmonth && 'bg-primary/80',
+			day.weekend && 'bg-primary/90',
+		],
+		// Disabled state (applies opacity on top)
+		day.disabled && 'pointer-events-none opacity-25',
+		klass
+	]}
+	data-disabled={day.disabled}
+	data-prec={day.fromPreviousMonth}
+	data-next={day.fromNextMonth}
+	data-offmonth={day.offmonth}
+	data-weekend={day.weekend}
+	data-today={day.today}
+	data-selected={isSelected}
+	{onclick}
+	{...dayProps}
+>
+	{#if children}
+		{@render children({
+			calendar: calendarBond!
+		})}
+	{:else}
+		<div class={cn("value flex items-center justify-center size-full transition-colors duration-100", day.today && ['outline-primary outline-2', isSelected && 'outline-offset-3'])}>
+			<span>{day.dayOfMonth}</span>
+		</div>
+	{/if}
+</HtmlAtom>

package/dist/components/calendar/calendar-header.svelte

@@ -23,7 +23,7 @@
 	)}
 	{...headerProps}
 >
-	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
+	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day, i (i)}
 		<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
 	{/each}
 </HtmlAtom>