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

package/dist/shared/bond.svelte.d.ts

@@ -1,15 +1,25 @@
+import type { VirtualElement } from '@floating-ui/dom';
+export type BondVirtualElement = VirtualElement;
 export type BondStateProps = {
     id?: string;
 };
-export type BondElements = Record<string, Element | undefined>;
+export type BondElements = Record<string, Element | BondVirtualElement | undefined>;
 export declare abstract class Bond<Props extends BondStateProps = BondStateProps, State extends BondState<Props> = BondState<Props>, Elements extends BondElements = BondElements> {
     #private;
     static CONTEXT_KEY: string;
-    constructor(state: State);
-    get elements(): Elements;
+    constructor(state: State, name?: string);
+    get elements(): Record<string, Element | VirtualElement | undefined>;
+    get animationPromises(): Record<string, Promise<{
+        duration?: number;
+        delay?: number;
+        controller?: any;
+    }>>;
     get id(): string;
     get state(): State;
+    get name(): string;
+    protected atom<T extends BondAtom<any, any>>(key: keyof Elements | (string & {}), factory: () => T): T;
     abstract share(): this;
+    element<T extends Element | BondVirtualElement = Element | BondVirtualElement>(key: keyof Elements): T | undefined;
     destroy(): void;
     static get(): unknown | undefined;
     static set(bond: unknown): unknown;
@@ -20,3 +30,19 @@ export declare abstract class BondState<S extends BondStateProps = BondStateProp
     get id(): string;
     get props(): S;
 }
+export declare abstract class BondAtom<B extends Bond<BondStateProps, BondState<BondStateProps>, BondElements> = Bond, E extends Element | BondVirtualElement = Element | BondVirtualElement> {
+    #private;
+    protected bond: B;
+    protected key: string;
+    constructor(bond: B, key: string);
+    protected get id(): string;
+    get element(): E | undefined;
+    get kind(): string;
+    get attrs(): Record<string, unknown>;
+    get handlers(): Record<string, unknown>;
+    get attachments(): Record<string, (node: E) => void | (() => void)>;
+    get spread(): Record<string | symbol, unknown>;
+    onmount(_node: E): void | (() => void);
+    ondestroy?(): void;
+    protected setElement(element: E | undefined): void;
+}

package/dist/shared/bond.svelte.js

@@ -1,13 +1,66 @@
 import { nanoid } from 'nanoid';
+import { getElementId } from '../utils/dom.svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { SvelteMap } from 'svelte/reactivity';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class AtomsQueue {
+    #pending = new Map();
+    #atoms = new SvelteMap();
+    #flushScheduled = false;
+    /**
+     * Schedules a microtask to flush pending atoms into the reactive SvelteMap.
+     * Defers reactive writes outside `$derived` to avoid `state_unsafe_mutation`.
+     */
+    #scheduleFlush() {
+        if (this.#flushScheduled)
+            return;
+        this.#flushScheduled = true;
+        queueMicrotask(() => {
+            this.#flushScheduled = false;
+            for (const [key, atom] of this.#pending)
+                this.#atoms.set(key, atom);
+            this.#pending.clear();
+        });
+    }
+    get(key) {
+        // Always read from #atoms first to register a reactive dependency.
+        // Without this, a $derived that finds the value in #pending never tracks
+        // #atoms — so the microtask flush into #atoms won't re-trigger it.
+        const committed = this.#atoms.get(key);
+        return this.#pending.get(key) ?? committed;
+    }
+    stage(key, atom) {
+        this.#pending.set(key, atom);
+        this.#scheduleFlush();
+    }
+    clear() {
+        this.#pending.clear();
+        this.#atoms.clear();
+    }
+    forEach(cb) {
+        for (const [key, atom] of this.#atoms)
+            cb(key, atom);
+        for (const [key, atom] of this.#pending)
+            cb(key, atom);
+    }
+}
 export class Bond {
     static CONTEXT_KEY = '@atoms/context/bond';
-    #elements = $state({});
+    #animationPromises = {};
     #state;
-    constructor(state) {
+    #queue = new AtomsQueue();
+    #name;
+    constructor(state, name) {
         this.#state = state;
+        this.#name = name ?? '';
     }
     get elements() {
-        return this.#elements;
+        const obj = {};
+        this.#queue.forEach((key, atom) => (obj[key] = atom.element));
+        return obj;
+    }
+    get animationPromises() {
+        return this.#animationPromises;
     }
     get id() {
         return this.state.id;
@@ -15,11 +68,29 @@ export class Bond {
     get state() {
         return this.#state;
     }
-    destroy() { }
+    get name() {
+        return this.#name;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    atom(key, factory) {
+        const existing = this.#queue.get(key);
+        if (existing)
+            return existing;
+        const newAtom = factory();
+        this.#queue.stage(key, newAtom);
+        return newAtom;
+    }
+    element(key) {
+        return this.#queue.get(key)?.element;
+    }
+    destroy() {
+        this.#queue.clear();
+    }
     static get() {
         throw new Error('Method not implemented! Use derived class');
     }
     static set(bond) {
+        void bond;
         throw new Error('Method not implemented! Use derived class');
     }
 }
@@ -37,3 +108,54 @@ export class BondState {
         return this.#props();
     }
 }
+export class BondAtom {
+    #element = $state();
+    bond;
+    key;
+    constructor(bond, key) {
+        this.bond = bond;
+        this.key = key;
+    }
+    get id() {
+        return getElementId(this.bond.id, this.kind);
+    }
+    get element() {
+        return this.#element;
+    }
+    get kind() {
+        return `${this.bond.name}-${this.key}`;
+    }
+    get attrs() {
+        return {
+            id: this.id,
+            'data-bond': this.bond.name,
+            'data-kind': this.kind
+        };
+    }
+    get handlers() {
+        return {};
+    }
+    get attachments() {
+        return {
+            [createAttachmentKey()]: (node) => {
+                this.setElement(node);
+                const cleanup = this.onmount(node);
+                return () => {
+                    cleanup?.();
+                    this.ondestroy?.();
+                };
+            }
+        };
+    }
+    get spread() {
+        return { ...this.attrs, ...this.handlers, ...this.attachments };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onmount(_node) {
+        return;
+    }
+    ondestroy() { }
+    setElement(element) {
+        this.#element = element;
+    }
+}

package/dist/shared/index.d.ts

@@ -1,2 +1,2 @@
-export { Bond, BondState, type BondElements, type BondStateProps } from './bond.svelte';
+export { Bond, BondState, BondAtom, type BondElements, type BondStateProps } from './bond.svelte';
 export { DURATION } from './motion';

package/dist/shared/index.js

@@ -1,2 +1,2 @@
-export { Bond, BondState } from './bond.svelte';
+export { Bond, BondState, BondAtom } from './bond.svelte';
 export { DURATION } from './motion';

package/dist/shared/motion.d.ts

@@ -1,4 +1,5 @@
 export declare const DURATION: {
+    none: number;
     quick: number;
     fast: number;
     normal: number;

package/dist/shared/motion.js

@@ -1,8 +1,2 @@
-export const DURATION = {
-    quick: 50,
-    fast: 100,
-    normal: 200,
-    smooth: 300,
-    slow: 400,
-    dragging: 500
-};
+import { DURATION as D } from '../constants/motion';
+export const DURATION = D;

package/dist/types/index.d.ts

@@ -15,3 +15,7 @@ export type DeepOverride<T, U> = U extends object ? T extends object ? {
     [K in keyof T | keyof U]: K extends keyof U ? U[K] : K extends keyof T ? T[K] : never;
 } : U : U;
 export type Factory<T extends Bond> = (props?: BondStateProps) => T;
+/** Sort direction */
+export type Direction = 'asc' | 'desc';
+/** Column sort type — the field key used when sorting */
+export type SortableType = string;

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 export { type StateDefiner, defineProperty, defineState } from './state';
-export { defineVariants, type VariantDefinition, type VariantProps, type VariantValue, type ExtractVariants, type VariantPropsType } from './variant';
+export { defineVariants, VARIANT_DEF_TAG, type TaggedVariantFn, type VariantDefinition, type VariantProps, type VariantValue, type ExtractVariants, type VariantPropsType } from './variant';
 import type { ClassValue as SvelteClassValue } from 'svelte/elements';
 export type ClassValueFunction = <T = unknown>(bond: T, ...args: unknown[]) => SvelteClassValue;
 export type ClassValue = SvelteClassValue | ClassValueFunction | undefined;

package/dist/utils/index.js

@@ -1,5 +1,5 @@
 export { defineProperty, defineState } from './state';
-export { defineVariants } from './variant';
+export { defineVariants, VARIANT_DEF_TAG } from './variant';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {

package/dist/utils/promise.svelte.d.ts

@@ -3,3 +3,8 @@ export declare function promiseToState<T>(promise: Promise<T> | (() => Promise<T
     readonly current: T | null;
     refresh: () => Promise<void>;
 };
+export declare function promiseWithResolvers<T>(): {
+    promise: Promise<T>;
+    readonly resolve: (value: T) => void;
+    readonly reject: (reason?: any) => void;
+};

package/dist/utils/promise.svelte.js

@@ -18,3 +18,20 @@ export function promiseToState(promise) {
         refresh
     };
 }
+export function promiseWithResolvers() {
+    let resolve = null;
+    let reject = null;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return {
+        promise,
+        get resolve() {
+            return resolve;
+        },
+        get reject() {
+            return reject;
+        }
+    };
+}

package/dist/utils/variant.d.ts

@@ -13,6 +13,15 @@
  */
 import type { ClassValue } from 'svelte/elements';
 import type { Bond } from '../shared';
+/**
+ * Internal symbol used to tag functions returned by `defineVariants`.
+ * Allows `resolveLocalVariants` in atom/utils.ts to detect them and route
+ * through the cached `resolveVariants` engine instead of calling them directly.
+ */
+export declare const VARIANT_DEF_TAG: unique symbol;
+export type TaggedVariantFn<V extends Record<string, Record<string, any>>> = ((bond: Bond, props?: VariantProps<V>) => Record<string, any>) & {
+    [VARIANT_DEF_TAG]: VariantDefinition<V> | ((bond?: Bond | null) => VariantDefinition<V>);
+};
 /**
  * Variant value can be a static value or a function that receives bond
  */
@@ -114,7 +123,7 @@ export type VariantProps<V extends Record<string, Record<string, any>>> = Partia
  * // Returns: { class: '...' }
  * ```
  */
-export declare function defineVariants<V extends Record<string, Record<string, any>>>(config: VariantDefinition<V> | ((bond?: Bond | null) => VariantDefinition<V>)): (bond: Bond, props?: VariantProps<V>) => Record<string, any>;
+export declare function defineVariants<V extends Record<string, Record<string, any>>>(config: VariantDefinition<V> | ((bond?: Bond | null) => VariantDefinition<V>)): TaggedVariantFn<V>;
 /**
  * Example 1: Simple button variants (static config)
  *

package/dist/utils/variant.js

@@ -11,6 +11,12 @@
  * 4. Type-safe with autocompletion
  * 5. No context, no complexity
  */
+/**
+ * Internal symbol used to tag functions returned by `defineVariants`.
+ * Allows `resolveLocalVariants` in atom/utils.ts to detect them and route
+ * through the cached `resolveVariants` engine instead of calling them directly.
+ */
+export const VARIANT_DEF_TAG = Symbol('svelte-atoms/variant-def');
 /**
  * Define variants for a component
  * Returns a function that takes variant props and returns classes + attributes
@@ -80,7 +86,7 @@
  * ```
  */
 export function defineVariants(config) {
-    return (bond, props) => {
+    const fn = (bond, props) => {
         // Get config (either static or dynamic based on bond)
         const resolvedConfig = typeof config === 'function' ? config(bond) : config;
         // Merge with defaults
@@ -134,4 +140,8 @@ export function defineVariants(config) {
             ...attributes
         };
     };
+    // Tag the function with the original config so atom/utils.ts can detect it
+    // and route through the cached resolveVariants engine.
+    fn[VARIANT_DEF_TAG] = config;
+    return fn;
 }