jotai-solid-api 1.0.0

package/dist/index.js

@@ -0,0 +1,1470 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { atom, createStore as createJotaiStore } from "jotai/vanilla";
+const collectorStack = [];
+let batchDepth = 0;
+const pendingSubscribers = new Set();
+function notifySubscriber(subscriber) {
+    if (batchDepth > 0) {
+        pendingSubscribers.add(subscriber);
+        return;
+    }
+    subscriber();
+}
+function flushSubscribers() {
+    while (pendingSubscribers.size > 0) {
+        const queued = Array.from(pendingSubscribers);
+        pendingSubscribers.clear();
+        for (const subscriber of queued) {
+            subscriber();
+        }
+    }
+}
+function currentCollector() {
+    return collectorStack[collectorStack.length - 1];
+}
+function pushCollector(collector) {
+    collectorStack.push(collector);
+}
+function popCollector() {
+    collectorStack.pop();
+}
+function trackDependency(dep) {
+    currentCollector()?.addDependency(dep);
+}
+class DependencyTracker {
+    constructor(onDependencyChange) {
+        this.onDependencyChange = onDependencyChange;
+        this.subscriptions = new Map();
+        this.collecting = new Set();
+    }
+    addDependency(dep) {
+        this.collecting.add(dep);
+    }
+    collect(fn) {
+        this.collecting = new Set();
+        pushCollector(this);
+        try {
+            return fn();
+        }
+        finally {
+            popCollector();
+            this.reconcileSubscriptions(this.collecting);
+        }
+    }
+    dispose() {
+        for (const unsubscribe of this.subscriptions.values()) {
+            unsubscribe();
+        }
+        this.subscriptions.clear();
+    }
+    reconcileSubscriptions(nextDeps) {
+        for (const [dep, unsubscribe] of this.subscriptions) {
+            if (!nextDeps.has(dep)) {
+                unsubscribe();
+                this.subscriptions.delete(dep);
+            }
+        }
+        for (const dep of nextDeps) {
+            if (!this.subscriptions.has(dep)) {
+                const unsubscribe = dep.subscribe(this.onDependencyChange);
+                this.subscriptions.set(dep, unsubscribe);
+            }
+        }
+    }
+}
+class Scope {
+    constructor() {
+        this.store = createJotaiStore();
+        this.disposables = new Set();
+        this.scopeCleanups = new Set();
+        this.layoutStarters = [];
+        this.effectStarters = [];
+        this.layoutStarted = false;
+        this.effectsStarted = false;
+    }
+    register(disposable) {
+        this.disposables.add(disposable);
+    }
+    registerCleanup(cleanup) {
+        this.scopeCleanups.add(cleanup);
+    }
+    registerLayoutStarter(starter) {
+        if (this.layoutStarted) {
+            starter();
+            return;
+        }
+        this.layoutStarters.push(starter);
+    }
+    registerEffectStarter(starter) {
+        if (this.effectsStarted) {
+            starter();
+            return;
+        }
+        this.effectStarters.push(starter);
+    }
+    startLayoutEffects() {
+        if (this.layoutStarted) {
+            return;
+        }
+        this.layoutStarted = true;
+        for (const starter of this.layoutStarters) {
+            starter();
+        }
+        this.layoutStarters.length = 0;
+    }
+    startEffects() {
+        if (this.effectsStarted) {
+            return;
+        }
+        this.effectsStarted = true;
+        for (const starter of this.effectStarters) {
+            starter();
+        }
+        this.effectStarters.length = 0;
+    }
+    dispose() {
+        for (const cleanup of this.scopeCleanups) {
+            cleanup();
+        }
+        this.scopeCleanups.clear();
+        for (const disposable of this.disposables) {
+            disposable.dispose();
+        }
+        this.disposables.clear();
+    }
+}
+const scopeStack = [];
+function withScope(scope, fn) {
+    scopeStack.push(scope);
+    try {
+        return fn();
+    }
+    finally {
+        scopeStack.pop();
+    }
+}
+function activeScope() {
+    const scope = scopeStack[scopeStack.length - 1];
+    if (!scope) {
+        throw new Error("No active reactive scope. Wrap your component with component(...) before calling reactive APIs.");
+    }
+    return scope;
+}
+class SignalSource {
+    constructor(store, initialValue) {
+        this.store = store;
+        this.subscribers = new Set();
+        this.signalAtom = atom(initialValue);
+    }
+    get() {
+        trackDependency(this);
+        return this.store.get(this.signalAtom);
+    }
+    peek() {
+        return this.store.get(this.signalAtom);
+    }
+    set(nextValue) {
+        const previous = this.store.get(this.signalAtom);
+        const resolvedValue = typeof nextValue === "function"
+            ? nextValue(previous)
+            : nextValue;
+        this.store.set(this.signalAtom, resolvedValue);
+        if (!Object.is(previous, resolvedValue)) {
+            for (const subscriber of this.subscribers) {
+                notifySubscriber(subscriber);
+            }
+        }
+        return resolvedValue;
+    }
+    subscribe(callback) {
+        this.subscribers.add(callback);
+        return () => {
+            this.subscribers.delete(callback);
+        };
+    }
+}
+class MemoSource {
+    constructor(compute) {
+        this.compute = compute;
+        this.subscribers = new Set();
+        this.hasValue = false;
+        this.computing = false;
+        this.tracker = new DependencyTracker(() => {
+            this.recompute();
+        });
+    }
+    get() {
+        trackDependency(this);
+        if (!this.hasValue) {
+            this.recompute();
+        }
+        return this.value;
+    }
+    subscribe(callback) {
+        this.subscribers.add(callback);
+        if (!this.hasValue) {
+            this.recompute();
+        }
+        return () => {
+            this.subscribers.delete(callback);
+        };
+    }
+    dispose() {
+        this.tracker.dispose();
+        this.subscribers.clear();
+    }
+    recompute() {
+        if (this.computing) {
+            return;
+        }
+        this.computing = true;
+        try {
+            const nextValue = this.tracker.collect(this.compute);
+            const changed = !this.hasValue || !Object.is(this.value, nextValue);
+            this.value = nextValue;
+            this.hasValue = true;
+            if (changed) {
+                for (const subscriber of this.subscribers) {
+                    notifySubscriber(subscriber);
+                }
+            }
+        }
+        finally {
+            this.computing = false;
+        }
+    }
+}
+let activeEffect = null;
+class EffectComputation {
+    constructor(effect) {
+        this.effect = effect;
+        this.scheduled = false;
+        this.running = false;
+        this.disposed = false;
+        this.cleanups = [];
+        this.tracker = new DependencyTracker(() => {
+            this.schedule();
+        });
+    }
+    start() {
+        this.schedule();
+    }
+    registerCleanup(cleanup) {
+        this.cleanups.push(cleanup);
+    }
+    dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        this.runCleanups();
+        this.tracker.dispose();
+    }
+    schedule() {
+        if (this.disposed) {
+            return;
+        }
+        if (this.running) {
+            this.scheduled = true;
+            return;
+        }
+        this.execute();
+    }
+    execute() {
+        if (this.disposed) {
+            return;
+        }
+        this.running = true;
+        this.scheduled = false;
+        this.runCleanups();
+        const previousEffect = activeEffect;
+        activeEffect = this;
+        try {
+            const maybeCleanup = this.tracker.collect(this.effect);
+            if (typeof maybeCleanup === "function") {
+                this.cleanups.push(maybeCleanup);
+            }
+        }
+        finally {
+            activeEffect = previousEffect;
+            this.running = false;
+        }
+        if (this.scheduled) {
+            this.execute();
+        }
+    }
+    runCleanups() {
+        const pending = this.cleanups;
+        this.cleanups = [];
+        for (const cleanup of pending) {
+            cleanup();
+        }
+    }
+}
+/**
+ * Creates a writable signal.
+ *
+ * @param initialValue Initial value stored in the signal.
+ * @returns Tuple of `[getter, setter]`.
+ *
+ * @example
+ * ```ts
+ * const [count, setCount] = createSignal(0)
+ * setCount((n) => n + 1)
+ * ```
+ */
+export function createSignal(initialValue) {
+    const scope = activeScope();
+    const source = new SignalSource(scope.store, initialValue);
+    return [
+        () => source.get(),
+        (nextValue) => source.set(nextValue),
+    ];
+}
+/**
+ * Alias for {@link createSignal}.
+ *
+ * @example
+ * ```ts
+ * const [count, setCount] = signal(0)
+ * ```
+ */
+export const signal = createSignal;
+/**
+ * Adapts a Solid-compatible signal pair into this library's strict setter shape.
+ *
+ * @param solidSignal Signal tuple `[get, set]` from Solid or compatible runtimes.
+ * @returns Tuple `[get, set]` where `set` returns the current value.
+ *
+ * @example
+ * ```ts
+ * const [count, setCount] = fromSolidSignal(otherSignal)
+ * setCount((n) => n + 1)
+ * ```
+ */
+export function fromSolidSignal(solidSignal) {
+    const [get, set] = solidSignal;
+    const normalizedSet = (nextValue) => {
+        set(nextValue);
+        return get();
+    };
+    return [get, normalizedSet];
+}
+/**
+ * Adapts this library's signal pair to a Solid-compatible tuple shape.
+ *
+ * @param reactiveSignal Tuple `[get, set]` from this library.
+ * @returns Solid-compatible signal tuple.
+ *
+ * @example
+ * ```ts
+ * const solidPair = toSolidSignal(createSignal(0))
+ * ```
+ */
+export function toSolidSignal(reactiveSignal) {
+    const [get, set] = reactiveSignal;
+    const solidSetter = (nextValue) => {
+        set(nextValue);
+    };
+    return [get, solidSetter];
+}
+/**
+ * Alias for {@link fromSolidSignal}.
+ */
+export const fromSignal = fromSolidSignal;
+/**
+ * Alias for {@link toSolidSignal}.
+ */
+export const toSignal = toSolidSignal;
+/**
+ * Creates a cached derived accessor.
+ *
+ * @param compute Derivation function. Reads inside this function become dependencies.
+ * @returns Read-only accessor for the derived value.
+ *
+ * @example
+ * ```ts
+ * const total = createMemo(() => items().length)
+ * ```
+ */
+export function createMemo(compute) {
+    const scope = activeScope();
+    const source = new MemoSource(compute);
+    scope.register(source);
+    return () => source.get();
+}
+/**
+ * Alias for {@link createMemo}.
+ *
+ * @example
+ * ```ts
+ * const total = memo(() => items().length)
+ * ```
+ */
+export const memo = createMemo;
+/**
+ * Registers an effect that runs after React commit.
+ *
+ * @param effect Effect callback. Return a cleanup function to dispose previous run resources.
+ *
+ * @example
+ * ```ts
+ * createEffect(() => {
+ *   console.log(count())
+ * })
+ * ```
+ */
+export function createEffect(effect) {
+    const scope = activeScope();
+    const computation = new EffectComputation(effect);
+    scope.register(computation);
+    scope.registerEffectStarter(() => {
+        computation.start();
+    });
+}
+/**
+ * Alias for {@link createEffect}.
+ *
+ * @example
+ * ```ts
+ * effect(() => console.log(count()))
+ * ```
+ */
+export const effect = createEffect;
+/**
+ * Registers an effect that runs in layout phase.
+ *
+ * @param effect Layout effect callback. Return a cleanup function to dispose previous run resources.
+ *
+ * @example
+ * ```ts
+ * createLayoutEffect(() => {
+ *   measureLayout()
+ * })
+ * ```
+ */
+export function createLayoutEffect(effect) {
+    const scope = activeScope();
+    const computation = new EffectComputation(effect);
+    scope.register(computation);
+    scope.registerLayoutStarter(() => {
+        computation.start();
+    });
+}
+/**
+ * Alias for {@link createLayoutEffect}.
+ *
+ * @example
+ * ```ts
+ * layoutEffect(() => measure())
+ * ```
+ */
+export const layoutEffect = createLayoutEffect;
+/**
+ * Creates a reactive computation for side effects.
+ * Alias of {@link createEffect} for Solid-style API compatibility.
+ *
+ * @param compute Side-effect function.
+ *
+ * @example
+ * ```ts
+ * createComputed(() => {
+ *   syncExternalStore(count())
+ * })
+ * ```
+ */
+export function createComputed(compute) {
+    createEffect(compute);
+}
+/**
+ * Alias for {@link createComputed}.
+ *
+ * @example
+ * ```ts
+ * computed(() => sync(count()))
+ * ```
+ */
+export const computed = createComputed;
+/**
+ * Runs a callback once on mount and disposes it on unmount if cleanup is returned.
+ *
+ * @param callback Mount callback.
+ *
+ * @example
+ * ```ts
+ * onMount(() => {
+ *   const ws = connect()
+ *   return () => ws.close()
+ * })
+ * ```
+ */
+export function onMount(callback) {
+    createEffect(() => {
+        const maybeCleanup = untrack(callback);
+        if (typeof maybeCleanup === "function") {
+            onCleanup(maybeCleanup);
+        }
+    });
+}
+/**
+ * Alias for {@link onMount}.
+ *
+ * @example
+ * ```ts
+ * mount(() => console.log("mounted"))
+ * ```
+ */
+export const mount = onMount;
+/**
+ * Registers cleanup in setup scope or currently running effect.
+ *
+ * @param cleanup Cleanup callback invoked on re-run or scope disposal.
+ *
+ * @example
+ * ```ts
+ * createEffect(() => {
+ *   const id = setInterval(tick, 1000)
+ *   onCleanup(() => clearInterval(id))
+ * })
+ * ```
+ */
+export function onCleanup(cleanup) {
+    if (activeEffect) {
+        activeEffect.registerCleanup(cleanup);
+        return;
+    }
+    const scope = scopeStack[scopeStack.length - 1];
+    if (scope) {
+        scope.registerCleanup(cleanup);
+        return;
+    }
+    throw new Error("onCleanup must run inside component setup or an effect.");
+}
+/**
+ * Alias for {@link onCleanup}.
+ *
+ * @example
+ * ```ts
+ * cleanup(() => console.log("disposed"))
+ * ```
+ */
+export const cleanup = onCleanup;
+/**
+ * Batches reactive notifications and flushes once at the end.
+ *
+ * @param fn Function containing grouped signal/store writes.
+ * @returns Result of `fn()`.
+ *
+ * @example
+ * ```ts
+ * batch(() => {
+ *   setFirst("Ada")
+ *   setLast("Lovelace")
+ * })
+ * ```
+ */
+export function batch(fn) {
+    batchDepth += 1;
+    try {
+        return fn();
+    }
+    finally {
+        batchDepth -= 1;
+        if (batchDepth === 0) {
+            flushSubscribers();
+        }
+    }
+}
+/**
+ * Executes a function without dependency tracking.
+ *
+ * @param fn Function to execute without capturing dependencies.
+ * @returns Result of `fn()`.
+ *
+ * @example
+ * ```ts
+ * const stable = untrack(() => expensiveSnapshot())
+ * ```
+ */
+export function untrack(fn) {
+    const previous = collectorStack.pop();
+    try {
+        return fn();
+    }
+    finally {
+        if (previous) {
+            collectorStack.push(previous);
+        }
+    }
+}
+function resolveResourceArgs(sourceOrFetcher, maybeFetcher, maybeOptions) {
+    if (maybeFetcher) {
+        return {
+            source: sourceOrFetcher,
+            fetcher: maybeFetcher,
+            options: maybeOptions ?? {},
+        };
+    }
+    return {
+        source: null,
+        fetcher: sourceOrFetcher,
+        options: maybeOptions ?? {},
+    };
+}
+export function createResource(sourceOrFetcher, maybeFetcher, maybeOptions) {
+    const isSourceMode = typeof maybeFetcher === "function";
+    const parsed = isSourceMode
+        ? resolveResourceArgs(sourceOrFetcher, maybeFetcher, maybeOptions)
+        : resolveResourceArgs(sourceOrFetcher, undefined, maybeFetcher);
+    const [value, setValue] = createSignal(parsed.options.initialValue);
+    const [latest, setLatest] = createSignal(parsed.options.initialValue);
+    const [loading, setLoading] = createSignal(false);
+    const [error, setError] = createSignal(undefined);
+    const [state, setState] = createSignal(parsed.options.initialValue === undefined ? "unresolved" : "ready");
+    const [refetchCount, setRefetchCount] = createSignal(0);
+    let runId = 0;
+    createEffect(() => {
+        const sourceValue = parsed.source ? parsed.source() : undefined;
+        const currentRefetchCount = refetchCount();
+        const refetching = currentRefetchCount > 0;
+        const requestId = ++runId;
+        setLoading(true);
+        setError(undefined);
+        setState("pending");
+        const execute = async () => {
+            try {
+                const nextValue = parsed.source
+                    ? await parsed.fetcher(sourceValue, { value: latest(), refetching })
+                    : await parsed.fetcher();
+                if (requestId !== runId) {
+                    return;
+                }
+                setValue(nextValue);
+                setLatest(nextValue);
+                setState("ready");
+            }
+            catch (nextError) {
+                if (requestId !== runId) {
+                    return;
+                }
+                setError(nextError);
+                setState("errored");
+            }
+            finally {
+                if (requestId === runId) {
+                    setLoading(false);
+                }
+            }
+        };
+        void execute();
+    });
+    const resource = (() => value());
+    Object.defineProperties(resource, {
+        loading: {
+            value: () => loading(),
+            enumerable: true,
+        },
+        error: {
+            value: () => error(),
+            enumerable: true,
+        },
+        latest: {
+            value: () => latest(),
+            enumerable: true,
+        },
+        state: {
+            value: () => state(),
+            enumerable: true,
+        },
+    });
+    return [
+        resource,
+        {
+            mutate: setValue,
+            refetch: () => {
+                setRefetchCount((n) => n + 1);
+            },
+        },
+    ];
+}
+/**
+ * Alias for {@link createResource}.
+ *
+ * @example
+ * ```ts
+ * const [user] = resource(() => fetchUser())
+ * ```
+ */
+export const resource = createResource;
+/**
+ * Shortcut for `createResource(fetcher)[0]`.
+ *
+ * @param compute Async or sync function that resolves the value.
+ * @param options Optional resource options such as `initialValue`.
+ * @returns Resource accessor only.
+ *
+ * @example
+ * ```ts
+ * const profile = createAsync(() => fetchProfile())
+ * ```
+ */
+export function createAsync(compute, options) {
+    const [resource] = createResource(compute, options);
+    return resource;
+}
+/**
+ * Alias for {@link createAsync}.
+ *
+ * @example
+ * ```ts
+ * const profile = asyncSignal(() => fetchProfile())
+ * ```
+ */
+export const asyncSignal = createAsync;
+const promiseState = new WeakMap();
+export function use(value) {
+    if (typeof value === "function") {
+        return value();
+    }
+    const existing = promiseState.get(value);
+    if (!existing) {
+        const state = { status: "pending" };
+        promiseState.set(value, state);
+        Promise.resolve(value).then((resolvedValue) => {
+            promiseState.set(value, {
+                status: "resolved",
+                value: resolvedValue,
+            });
+        }, (rejectedError) => {
+            promiseState.set(value, {
+                status: "rejected",
+                error: rejectedError,
+            });
+        });
+        throw value;
+    }
+    if (existing.status === "pending") {
+        throw value;
+    }
+    if (existing.status === "rejected") {
+        throw existing.error;
+    }
+    return existing.value;
+}
+const MUTATING_ARRAY_METHODS = new Set([
+    "copyWithin",
+    "fill",
+    "pop",
+    "push",
+    "reverse",
+    "shift",
+    "sort",
+    "splice",
+    "unshift",
+]);
+function isObjectLike(value) {
+    return typeof value === "object" && value !== null;
+}
+function shallowClone(value) {
+    if (Array.isArray(value)) {
+        return [...value];
+    }
+    if (isObjectLike(value)) {
+        return { ...value };
+    }
+    return value;
+}
+function getAtPath(root, path) {
+    let cursor = root;
+    for (const segment of path) {
+        if (!isObjectLike(cursor) && !Array.isArray(cursor)) {
+            return undefined;
+        }
+        cursor = cursor[segment];
+    }
+    return cursor;
+}
+function setAtPath(root, path, value) {
+    if (path.length === 0) {
+        return value;
+    }
+    const [head, ...tail] = path;
+    const clone = shallowClone(root);
+    const container = clone;
+    const currentValue = container[head];
+    container[head] =
+        tail.length === 0
+            ? value
+            : setAtPath(isObjectLike(currentValue) || Array.isArray(currentValue)
+                ? currentValue
+                : typeof tail[0] === "number"
+                    ? []
+                    : {}, tail, value);
+    return clone;
+}
+function pathToKey(path) {
+    return path
+        .map((segment) => typeof segment === "symbol" ? `s:${String(segment.description ?? "")}` : `k:${String(segment)}`)
+        .join("|");
+}
+function createReactiveProxy(source, mutable) {
+    const proxyCache = new Map();
+    const readNode = (path) => getAtPath(source.get(), path);
+    const peekNode = (path) => getAtPath(source.peek(), path);
+    const createAtPath = (path) => {
+        const key = pathToKey(path);
+        const cached = proxyCache.get(key);
+        if (cached) {
+            return cached;
+        }
+        const initialNode = peekNode(path);
+        const target = Array.isArray(initialNode) ? [] : {};
+        const proxy = new Proxy(target, {
+            get(_target, prop) {
+                const node = readNode(path);
+                if (prop === Symbol.toStringTag && Array.isArray(node)) {
+                    return "Array";
+                }
+                if (!isObjectLike(node) && !Array.isArray(node)) {
+                    return undefined;
+                }
+                if (mutable &&
+                    Array.isArray(node) &&
+                    typeof prop === "string" &&
+                    MUTATING_ARRAY_METHODS.has(prop)) {
+                    return (...args) => {
+                        const previousRoot = source.peek();
+                        const currentArray = getAtPath(previousRoot, path);
+                        if (!Array.isArray(currentArray)) {
+                            return undefined;
+                        }
+                        const nextArray = [...currentArray];
+                        const method = nextArray[prop];
+                        const result = method.apply(nextArray, args);
+                        const nextRoot = setAtPath(previousRoot, path, nextArray);
+                        source.set(nextRoot);
+                        return result;
+                    };
+                }
+                const value = node[prop];
+                if (Array.isArray(node) && prop === Symbol.iterator) {
+                    return value.bind(node);
+                }
+                if (isObjectLike(value) || Array.isArray(value)) {
+                    return createAtPath([...path, prop]);
+                }
+                if (typeof value === "function") {
+                    return value.bind(node);
+                }
+                return value;
+            },
+            set(_target, prop, value) {
+                if (!mutable) {
+                    throw new Error("Cannot mutate immutable store. Use setStore instead.");
+                }
+                const previousRoot = source.peek();
+                const nextRoot = setAtPath(previousRoot, [...path, prop], value);
+                source.set(nextRoot);
+                return true;
+            },
+            deleteProperty(_target, prop) {
+                if (!mutable) {
+                    throw new Error("Cannot mutate immutable store. Use setStore instead.");
+                }
+                const previousRoot = source.peek();
+                const node = getAtPath(previousRoot, path);
+                if (!isObjectLike(node) && !Array.isArray(node)) {
+                    return true;
+                }
+                const clone = shallowClone(node);
+                delete clone[prop];
+                source.set(setAtPath(previousRoot, path, clone));
+                return true;
+            },
+            ownKeys() {
+                const node = readNode(path);
+                if (!isObjectLike(node) && !Array.isArray(node)) {
+                    return [];
+                }
+                return Reflect.ownKeys(node);
+            },
+            getOwnPropertyDescriptor(_target, prop) {
+                const node = readNode(path);
+                if (!isObjectLike(node) && !Array.isArray(node)) {
+                    return undefined;
+                }
+                const descriptor = Object.getOwnPropertyDescriptor(node, prop);
+                if (!descriptor) {
+                    return {
+                        configurable: true,
+                        enumerable: true,
+                        writable: true,
+                        value: undefined,
+                    };
+                }
+                return {
+                    ...descriptor,
+                    configurable: true,
+                };
+            },
+            has(_target, prop) {
+                const node = readNode(path);
+                if (!isObjectLike(node) && !Array.isArray(node)) {
+                    return false;
+                }
+                return prop in node;
+            },
+        });
+        proxyCache.set(key, proxy);
+        return proxy;
+    };
+    return createAtPath([]);
+}
+/**
+ * Creates an immutable reactive object store.
+ *
+ * @param initialValue Initial object state.
+ * @returns Tuple of `[storeProxy, setStore]`.
+ *
+ * @example
+ * ```ts
+ * const [store, setStore] = createStore({ count: 0 })
+ * setStore({ count: 1 })
+ * ```
+ */
+export function createStore(initialValue) {
+    const scope = activeScope();
+    const source = new SignalSource(scope.store, initialValue);
+    const store = createReactiveProxy(source, false);
+    const setStore = (next) => {
+        const previous = source.peek();
+        const resolved = typeof next === "function" ? next(previous) : next;
+        const merged = isObjectLike(previous) && isObjectLike(resolved)
+            ? { ...previous, ...resolved }
+            : resolved;
+        return source.set(merged);
+    };
+    return [store, setStore];
+}
+/**
+ * Alias for {@link createStore}.
+ *
+ * @example
+ * ```ts
+ * const [state, setState] = store({ count: 0 })
+ * ```
+ */
+export const store = createStore;
+/**
+ * Typo-friendly alias for {@link createStore}.
+ *
+ * @example
+ * ```ts
+ * const [state, setState] = sotre({ count: 0 })
+ * ```
+ */
+export const sotre = createStore;
+/**
+ * Creates a mutable reactive object.
+ *
+ * @param initialValue Initial object state.
+ * @returns Mutable reactive proxy.
+ *
+ * @example
+ * ```ts
+ * const state = createMutable({ count: 0 })
+ * state.count += 1
+ * ```
+ */
+export function createMutable(initialValue) {
+    const scope = activeScope();
+    const source = new SignalSource(scope.store, initialValue);
+    return createReactiveProxy(source, true);
+}
+/**
+ * Alias for {@link createMutable}.
+ *
+ * @example
+ * ```ts
+ * const state = mutable({ count: 0 })
+ * ```
+ */
+export const mutable = createMutable;
+/**
+ * Alias for {@link createMutable}.
+ *
+ * @param initialValue Initial object state.
+ * @returns Mutable reactive proxy.
+ *
+ * @example
+ * ```ts
+ * const state = createMutableStore({ value: 1 })
+ * ```
+ */
+export function createMutableStore(initialValue) {
+    return createMutable(initialValue);
+}
+/**
+ * Creates a mutable reactive array.
+ *
+ * @param initialValue Initial list values.
+ * @returns Mutable reactive array proxy.
+ *
+ * @example
+ * ```ts
+ * const list = createReactiveArray([1, 2])
+ * list.push(3)
+ * ```
+ */
+export function createReactiveArray(initialValue = []) {
+    return createMutable(initialValue);
+}
+/**
+ * Alias for {@link createReactiveArray}.
+ *
+ * @param initialValue Initial list values.
+ * @returns Mutable reactive array proxy.
+ *
+ * @example
+ * ```ts
+ * const list = createArrayStore(["a"])
+ * ```
+ */
+export function createArrayStore(initialValue = []) {
+    return createReactiveArray(initialValue);
+}
+/**
+ * Creates a stable projected array with keyed move/insert/remove updates.
+ *
+ * @param source Source list accessor to project from.
+ * @param options Projection behavior (`key`, `map`, optional `update`).
+ * @returns Stable mutable projected array.
+ *
+ * @example
+ * ```ts
+ * const rows = createArrayProjection(users, {
+ *   key: (u) => u.id,
+ *   map: (u) => ({ id: u.id, name: u.name }),
+ *   update: (row, u) => { row.name = u.name },
+ * })
+ * ```
+ */
+export function createArrayProjection(source, options) {
+    const keyFn = options.key ?? ((_, index) => index);
+    let keys = [];
+    return createProjection(source, (initialSource) => {
+        const list = initialSource ?? [];
+        keys = list.map((item, index) => keyFn(item, index));
+        return list.map((item, index) => options.map(item, index));
+    }, (target, nextSource) => {
+        const list = nextSource ?? [];
+        const nextKeys = list.map((item, index) => keyFn(item, index));
+        for (let index = 0; index < list.length; index += 1) {
+            const nextKey = nextKeys[index];
+            if (index < keys.length && Object.is(keys[index], nextKey)) {
+                if (options.update) {
+                    options.update(target[index], list[index], index);
+                }
+                continue;
+            }
+            let foundIndex = -1;
+            for (let cursor = index + 1; cursor < keys.length; cursor += 1) {
+                if (Object.is(keys[cursor], nextKey)) {
+                    foundIndex = cursor;
+                    break;
+                }
+            }
+            if (foundIndex >= 0) {
+                const [movedItem] = target.splice(foundIndex, 1);
+                const [movedKey] = keys.splice(foundIndex, 1);
+                target.splice(index, 0, movedItem);
+                keys.splice(index, 0, movedKey);
+                if (options.update) {
+                    options.update(target[index], list[index], index);
+                }
+                continue;
+            }
+            const projected = options.map(list[index], index);
+            target.splice(index, 0, projected);
+            keys.splice(index, 0, nextKey);
+        }
+        while (target.length > list.length) {
+            target.pop();
+        }
+        while (keys.length > list.length) {
+            keys.pop();
+        }
+    });
+}
+/**
+ * Alias for {@link createArrayProjection}.
+ *
+ * @example
+ * ```ts
+ * const rows = arrayProjection(items, { map: (i) => i })
+ * ```
+ */
+export const arrayProjection = createArrayProjection;
+/**
+ * Creates a writable derived signal that resets when derivation inputs change.
+ *
+ * @param derive Function that computes the default value from reactive dependencies.
+ * @returns Linked signal state with `value`, `set`, `reset`, and `isOverridden`.
+ *
+ * @example
+ * ```ts
+ * const selected = createLinkedSignal(() => items()[0]?.id ?? null)
+ * selected.set("custom")
+ * ```
+ */
+export function createLinkedSignal(derive) {
+    const [value, setValue] = createSignal(untrack(derive));
+    const [isOverridden, setIsOverridden] = createSignal(false);
+    createEffect(() => {
+        const nextDefault = derive();
+        setValue(nextDefault);
+        setIsOverridden(false);
+    });
+    const set = (next) => {
+        setIsOverridden(true);
+        return setValue(next);
+    };
+    const reset = () => {
+        const nextDefault = untrack(derive);
+        setIsOverridden(false);
+        return setValue(nextDefault);
+    };
+    return {
+        value,
+        set,
+        reset,
+        isOverridden,
+    };
+}
+/**
+ * Alias for {@link createLinkedSignal}.
+ *
+ * @example
+ * ```ts
+ * const selected = linkedSignal(() => "default")
+ * ```
+ */
+export const linkedSignal = createLinkedSignal;
+/**
+ * Creates a mutable projection with a stable reference.
+ *
+ * @param source Source accessor that drives projection updates.
+ * @param initialize Initializes projection state from the first source value.
+ * @param mutate Applies granular updates to the existing projection object.
+ * @returns Stable mutable projection object.
+ *
+ * @example
+ * ```ts
+ * const projection = createProjection(source, (s) => ({ ...s }), (target, next) => {
+ *   Object.assign(target, next)
+ * })
+ * ```
+ */
+export function createProjection(source, initialize, mutate) {
+    const firstSource = source();
+    const projected = createMutable(initialize(firstSource));
+    let previousSource = firstSource;
+    createEffect(() => {
+        const nextSource = source();
+        untrack(() => {
+            mutate(projected, nextSource, previousSource);
+        });
+        previousSource = nextSource;
+    });
+    return projected;
+}
+/**
+ * Alias for {@link createProjection}.
+ *
+ * @example
+ * ```ts
+ * const state = projection(source, (s) => ({ ...s }), (t, s) => Object.assign(t, s))
+ * ```
+ */
+export const projection = createProjection;
+/**
+ * Re-export of `React.Suspense` for API consistency.
+ *
+ * @example
+ * ```tsx
+ * <Suspense fallback={<p>Loading...</p>}><View /></Suspense>
+ * ```
+ */
+export const Suspense = React.Suspense;
+/**
+ * Wrapper around `React.lazy` that also accepts direct component loaders.
+ *
+ * @param loader Async loader returning either a module with default export or a component.
+ * @returns Lazy React component suitable for Suspense boundaries.
+ *
+ * @example
+ * ```ts
+ * const Settings = lazy(() => import("./Settings"))
+ * ```
+ */
+export function lazy(loader) {
+    return React.lazy(async () => {
+        const loaded = await loader();
+        if (typeof loaded === "function") {
+            return { default: loaded };
+        }
+        return loaded;
+    });
+}
+class ComponentInstance {
+    constructor(initialProps, setup, forceUpdate) {
+        this.forceUpdate = forceUpdate;
+        this.scope = new Scope();
+        this.disposed = false;
+        this.suppressRenderInvalidation = false;
+        this.propsSource = new SignalSource(this.scope.store, initialProps);
+        this.renderTracker = new DependencyTracker(() => {
+            if (!this.suppressRenderInvalidation) {
+                this.forceUpdate();
+            }
+        });
+        this.scope.register(this.renderTracker);
+        const result = withScope(this.scope, () => setup(() => this.propsSource.get()));
+        this.render =
+            typeof result === "function"
+                ? result
+                : () => result;
+    }
+    updateProps(nextProps) {
+        this.suppressRenderInvalidation = true;
+        try {
+            this.propsSource.set(nextProps);
+        }
+        finally {
+            this.suppressRenderInvalidation = false;
+        }
+    }
+    renderNode() {
+        return withScope(this.scope, () => this.renderTracker.collect(this.render));
+    }
+    startLayoutEffects() {
+        this.scope.startLayoutEffects();
+    }
+    startEffects() {
+        this.scope.startEffects();
+    }
+    dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        this.scope.dispose();
+    }
+}
+/**
+ * Wraps a setup function so Solid-style primitives can be used without custom hooks.
+ *
+ * Supports both setup styles:
+ * - no-props: `component(() => () => <div />)`
+ * - props accessor: `component<{ id: string }>((props) => () => <div>{props().id}</div>)`
+ */
+export function component(setup, options = {}) {
+    const normalizedSetup = setup.length === 0
+        ? () => setup()
+        : setup;
+    const Wrapped = (props) => {
+        const [, setTick] = React.useState(0);
+        const forceUpdate = React.useCallback(() => {
+            setTick((tick) => tick + 1);
+        }, []);
+        const instanceRef = React.useRef(null);
+        if (!instanceRef.current) {
+            instanceRef.current = new ComponentInstance(props, normalizedSetup, forceUpdate);
+        }
+        const instance = instanceRef.current;
+        instance.updateProps(props);
+        React.useLayoutEffect(() => {
+            instance.startLayoutEffects();
+            return () => {
+                instance.dispose();
+            };
+        }, [instance]);
+        React.useEffect(() => {
+            instance.startEffects();
+        }, [instance]);
+        return _jsx(_Fragment, { children: instance.renderNode() });
+    };
+    const name = options.displayName ?? setup.name ?? "SolidLikeComponent";
+    Wrapped.displayName = name;
+    if (!options.memo) {
+        return Wrapped;
+    }
+    const memoized = typeof options.memo === "function"
+        ? React.memo(Wrapped, options.memo)
+        : React.memo(Wrapped);
+    memoized.displayName = name;
+    return memoized;
+}
+/**
+ * Alias for {@link component}.
+ *
+ * @example
+ * ```ts
+ * const View = defineComponent(() => <p>Hello</p>)
+ * ```
+ */
+export const defineComponent = component;
+function readMaybeAccessor(value) {
+    return resolveMaybeAccessor(value);
+}
+/**
+ * Conditionally renders content when `when` is truthy.
+ *
+ * @param props Show control-flow props.
+ * @returns Matching branch or fallback.
+ *
+ * @example
+ * ```tsx
+ * <Show when={ready()} fallback={<p>Loading</p>}><p>Ready</p></Show>
+ * ```
+ */
+export function Show(props) {
+    const value = readMaybeAccessor(props.when);
+    if (!value) {
+        return props.fallback ?? null;
+    }
+    if (typeof props.children === "function") {
+        return props.children(value);
+    }
+    return props.children;
+}
+/**
+ * Renders each item in a list.
+ *
+ * @param props For control-flow props.
+ * @returns Rendered list or fallback.
+ *
+ * @example
+ * ```tsx
+ * <For each={todos()} fallback={<p>Empty</p>}>{(todo) => <p>{todo.title}</p>}</For>
+ * ```
+ */
+export function For(props) {
+    const list = readMaybeAccessor(props.each) ?? [];
+    if (list.length === 0) {
+        return props.fallback ?? null;
+    }
+    return (_jsx(_Fragment, { children: list.map((item, index) => (_jsx(React.Fragment, { children: props.children(item, () => index) }, index))) }));
+}
+/**
+ * Renders a list where each child receives an item accessor.
+ *
+ * @param props Index control-flow props.
+ * @returns Rendered list or fallback.
+ *
+ * @example
+ * ```tsx
+ * <Index each={rows()}>{(row) => <Row data={row()} />}</Index>
+ * ```
+ */
+export function Index(props) {
+    const list = readMaybeAccessor(props.each) ?? [];
+    if (list.length === 0) {
+        return props.fallback ?? null;
+    }
+    return (_jsx(_Fragment, { children: list.map((_, index) => (_jsx(React.Fragment, { children: props.children(() => list[index], () => index) }, index))) }));
+}
+/**
+ * Switch branch marker consumed by {@link Switch}.
+ *
+ * @param _props Match branch props consumed by `Switch`.
+ * @returns `null` when rendered standalone.
+ *
+ * @example
+ * ```tsx
+ * <Switch><Match when={ok()}>OK</Match></Switch>
+ * ```
+ */
+export function Match(_props) {
+    return null;
+}
+/**
+ * Type guard for accessors.
+ *
+ * @param value Value to check.
+ * @returns `true` when value is an accessor function.
+ *
+ * @example
+ * ```ts
+ * if (isAccessor(value)) {
+ *   console.log(value())
+ * }
+ * ```
+ */
+export function isAccessor(value) {
+    return typeof value === "function";
+}
+/**
+ * Resolves plain values or accessors into a value.
+ *
+ * @param value Plain value or accessor.
+ * @returns Resolved value.
+ *
+ * @example
+ * ```ts
+ * const enabled = resolveMaybeAccessor(props.enabled)
+ * ```
+ */
+export function resolveMaybeAccessor(value) {
+    return isAccessor(value) ? value() : value;
+}
+/**
+ * Alias for {@link resolveMaybeAccessor}.
+ */
+export const toValue = resolveMaybeAccessor;
+/**
+ * Creates a keyed selector helper for efficient equality checks.
+ *
+ * @param source Source accessor containing the selected value.
+ * @param equals Optional comparison function. Defaults to `Object.is`.
+ * @returns Function that compares keys to the current source value.
+ *
+ * @example
+ * ```ts
+ * const isSelected = createSelector(selectedId)
+ * const active = isSelected(row.id)
+ * ```
+ */
+export function createSelector(source, equals = Object.is) {
+    return (key) => equals(source(), key);
+}
+/**
+ * Renders the first truthy {@link Match}, else `fallback`.
+ *
+ * @param props Switch control-flow props.
+ * @returns First matched branch or fallback.
+ *
+ * @example
+ * ```tsx
+ * <Switch fallback={<p>idle</p>}><Match when={loading()}>loading</Match></Switch>
+ * ```
+ */
+export function Switch(props) {
+    const children = React.Children.toArray(props.children);
+    for (const child of children) {
+        if (!React.isValidElement(child) || child.type !== Match) {
+            continue;
+        }
+        const matchProps = child.props;
+        const value = readMaybeAccessor(matchProps.when);
+        if (!value) {
+            continue;
+        }
+        if (typeof matchProps.children === "function") {
+            return matchProps.children(value);
+        }
+        return matchProps.children;
+    }
+    return props.fallback ?? null;
+}