@epoch32/visage 1.0.0 → 1.1.1

package/dist/rpc/types.d.ts

@@ -0,0 +1,200 @@
+import type { InferSchemaType, SchemaLike, ValidationIssue } from "../form/schema";
+import type { CreateQueryOptions, MutationOptions, MutationResult, QueryResult } from "../query/types";
+export type RPCErrorCode = "BAD_REQUEST" | "UNAUTHORIZED" | "FORBIDDEN" | "NOT_FOUND" | "METHOD_NOT_ALLOWED" | "TIMEOUT" | "CONFLICT" | "UNPROCESSABLE_CONTENT" | "INTERNAL_SERVER_ERROR";
+export type ProcedureType = "query" | "mutation" | "subscription";
+export type MiddlewareFn<TContext = any, TNewContext = TContext> = (opts: {
+    ctx: TContext;
+    req: Request;
+    signal: AbortSignal;
+    next: (opts?: {
+        ctx?: TNewContext;
+    }) => Promise<any>;
+}) => Promise<any>;
+export interface ProcedureOptionsWithInput<TSchema extends SchemaLike<any>, TOutput = any, TContext = any> {
+    input: TSchema;
+    output?: SchemaLike<TOutput>;
+    resolve: (opts: {
+        input: InferSchemaType<TSchema>;
+        ctx: TContext;
+        req: Request;
+        signal: AbortSignal;
+    }) => Promise<TOutput> | TOutput | AsyncIterable<TOutput>;
+}
+export interface ProcedureOptionsWithoutInput<TOutput = any, TContext = any> {
+    input?: undefined;
+    output?: SchemaLike<TOutput>;
+    resolve: (opts: {
+        input: void;
+        ctx: TContext;
+        req: Request;
+        signal: AbortSignal;
+    }) => Promise<TOutput> | TOutput | AsyncIterable<TOutput>;
+}
+export type ProcedureOptions<TInput = any, TOutput = any, TContext = any> = {
+    input?: SchemaLike<TInput>;
+    output?: SchemaLike<TOutput>;
+    resolve: (opts: {
+        input: TInput;
+        ctx: TContext;
+        req: Request;
+        signal: AbortSignal;
+    }) => Promise<TOutput> | TOutput | AsyncIterable<TOutput>;
+};
+export interface Procedure<TType extends ProcedureType = ProcedureType, TInput = any, TOutput = any, TContext = any> {
+    type: TType;
+    inputSchema?: SchemaLike<TInput>;
+    outputSchema?: SchemaLike<TOutput>;
+    middlewares: MiddlewareFn<any, any>[];
+    resolve: (opts: {
+        input: TInput;
+        ctx: TContext;
+        req: Request;
+        signal: AbortSignal;
+    }) => Promise<TOutput> | TOutput | AsyncIterable<TOutput>;
+}
+export type ProcedureRecord = Record<string, Procedure<any, any, any, any> | Router<any, any>>;
+export interface Router<TRecord extends ProcedureRecord = ProcedureRecord, TContext = any> {
+    _def: {
+        record: TRecord;
+        middlewares: MiddlewareFn<any, any>[];
+    };
+    query<TName extends string, TSchema extends SchemaLike<any>, TOutput = any>(name: TName, options: ProcedureOptionsWithInput<TSchema, TOutput, TContext>): Router<TRecord & {
+        [K in TName]: Procedure<"query", InferSchemaType<TSchema>, TOutput, TContext>;
+    }, TContext>;
+    query<TName extends string, TOutput = any>(name: TName, options: ProcedureOptionsWithoutInput<TOutput, TContext>): Router<TRecord & {
+        [K in TName]: Procedure<"query", void, TOutput, TContext>;
+    }, TContext>;
+    mutation<TName extends string, TSchema extends SchemaLike<any>, TOutput = any>(name: TName, options: ProcedureOptionsWithInput<TSchema, TOutput, TContext>): Router<TRecord & {
+        [K in TName]: Procedure<"mutation", InferSchemaType<TSchema>, TOutput, TContext>;
+    }, TContext>;
+    mutation<TName extends string, TOutput = any>(name: TName, options: ProcedureOptionsWithoutInput<TOutput, TContext>): Router<TRecord & {
+        [K in TName]: Procedure<"mutation", void, TOutput, TContext>;
+    }, TContext>;
+    subscription<TName extends string, TSchema extends SchemaLike<any>, TOutput = any>(name: TName, options: ProcedureOptionsWithInput<TSchema, TOutput, TContext>): Router<TRecord & {
+        [K in TName]: Procedure<"subscription", InferSchemaType<TSchema>, TOutput, TContext>;
+    }, TContext>;
+    subscription<TName extends string, TOutput = any>(name: TName, options: ProcedureOptionsWithoutInput<TOutput, TContext>): Router<TRecord & {
+        [K in TName]: Procedure<"subscription", void, TOutput, TContext>;
+    }, TContext>;
+    use<TNewContext = TContext>(middleware: MiddlewareFn<TContext, TNewContext>): Router<TRecord, TNewContext>;
+    merge<TPrefix extends string, TSubRecord extends ProcedureRecord>(prefix: TPrefix, router: Router<TSubRecord, TContext>): Router<TRecord & {
+        [K in TPrefix]: Router<TSubRecord, TContext>;
+    }, TContext>;
+}
+export interface CORSOptions {
+    origin?: string | string[] | ((origin: string) => boolean | string);
+    methods?: string[];
+    allowedHeaders?: string[];
+    exposedHeaders?: string[];
+    credentials?: boolean;
+    maxAge?: number;
+}
+export type DynamicHeadersFn = (req: Request, ctx: any) => Promise<Record<string, string>> | Record<string, string>;
+export type HeadersConfig = Record<string, string> | DynamicHeadersFn;
+export interface RouteRule {
+    /**
+     * Response headers to attach to all matching requests.
+     */
+    headers?: HeadersConfig;
+    /**
+     * Required request headers. If any are missing, automatically rejects with HTTP 401 Unauthorized.
+     */
+    requireHeaders?: string[];
+    /**
+     * Required query parameters. If missing on GET requests, rejects with HTTP 400 Bad Request.
+     */
+    requireParams?: string[];
+    /**
+     * Custom guard function for matching requests. Return false or throw RPCError to reject.
+     */
+    guard?: (opts: {
+        req: Request;
+        ctx: any;
+        path: string;
+    }) => Promise<boolean | void> | boolean | void;
+}
+export interface FetchHandlerOptions<TRouter extends Router<any, any> = Router<any, any>, TContext = any> {
+    router: TRouter;
+    endpoint?: string;
+    createContext?: (opts: {
+        req: Request;
+        extra: any[];
+    }) => Promise<TContext> | TContext;
+    onError?: (opts: {
+        error: any;
+        path?: string;
+        req: Request;
+    }) => void;
+    cors?: boolean | CORSOptions;
+    securityHeaders?: boolean | Record<string, string>;
+    /**
+     * Declarative pattern rules matching URL paths or procedure names (e.g. "*", "/api/*", "admin.*").
+     * Supports wildcard matching with '*'.
+     */
+    rules?: Record<string, RouteRule> | Array<{
+        match: string;
+    } & RouteRule>;
+}
+export type ClientHeadersRule = Record<string, string> | (() => Promise<Record<string, string>> | Record<string, string>);
+export interface ClientOptions {
+    baseUrl: string;
+    fetch?: typeof fetch;
+    headers?: Record<string, string> | Record<string, ClientHeadersRule> | (() => Promise<Record<string, string>> | Record<string, string>);
+}
+export interface SubscriptionCallbacks<TData = any> {
+    onData: (data: TData) => void;
+    onError?: (error: any) => void;
+    onComplete?: () => void;
+}
+export interface SubscriptionHandle {
+    unsubscribe: () => void;
+}
+export type InferProcedureInput<P> = P extends Procedure<any, infer TInput, any, any> ? TInput : void;
+export type InferProcedureOutput<P> = P extends Procedure<any, any, infer TOutput, any> ? TOutput : unknown;
+export type ClientQueryMethod<P> = InferProcedureInput<P> extends void | undefined ? (input?: void, options?: {
+    signal?: AbortSignal;
+    headers?: Record<string, string>;
+}) => Promise<InferProcedureOutput<P>> : (input: InferProcedureInput<P>, options?: {
+    signal?: AbortSignal;
+    headers?: Record<string, string>;
+}) => Promise<InferProcedureOutput<P>>;
+export type ClientMutationMethod<P> = InferProcedureInput<P> extends void | undefined ? (input?: void, options?: {
+    signal?: AbortSignal;
+    headers?: Record<string, string>;
+}) => Promise<InferProcedureOutput<P>> : (input: InferProcedureInput<P>, options?: {
+    signal?: AbortSignal;
+    headers?: Record<string, string>;
+}) => Promise<InferProcedureOutput<P>>;
+export type ClientSubscriptionMethod<P> = InferProcedureInput<P> extends void | undefined ? (input: void | undefined, callbacks: SubscriptionCallbacks<InferProcedureOutput<P>>) => SubscriptionHandle : (input: InferProcedureInput<P>, callbacks: SubscriptionCallbacks<InferProcedureOutput<P>>) => SubscriptionHandle;
+export type ClientProcedure<P> = P extends Procedure<"query", infer TInput, infer TOutput, any> ? {
+    query: ClientQueryMethod<P>;
+    createQuery: (input?: TInput | (() => TInput), extra?: Partial<CreateQueryOptions<TOutput, any, TOutput, any>>) => QueryResult<TOutput, any>;
+    useQuery: (input?: TInput | (() => TInput), extra?: Partial<CreateQueryOptions<TOutput, any, TOutput, any>>) => QueryResult<TOutput, any>;
+    queryKey: (input?: TInput) => unknown[];
+    queryOptions: (input?: TInput, extra?: Partial<CreateQueryOptions<TOutput, any, TOutput, any>>) => CreateQueryOptions<TOutput, any, TOutput, any>;
+} : P extends Procedure<"mutation", infer TInput, infer TOutput, any> ? {
+    mutate: ClientMutationMethod<P>;
+    createMutation: (extra?: Partial<MutationOptions<TOutput, any, TInput, any>>) => MutationResult<TOutput, any, TInput, any>;
+    useMutation: (extra?: Partial<MutationOptions<TOutput, any, TInput, any>>) => MutationResult<TOutput, any, TInput, any>;
+    mutationKey: () => unknown[];
+    mutationOptions: (extra?: Partial<MutationOptions<TOutput, any, TInput, any>>) => MutationOptions<TOutput, any, TInput, any>;
+} : P extends Procedure<"subscription", any, any, any> ? {
+    subscribe: ClientSubscriptionMethod<P>;
+} : never;
+export type ClientRouter<R> = R extends Router<infer TRecord, any> ? {
+    [K in keyof TRecord]: TRecord[K] extends Procedure<any, any, any, any> ? ClientProcedure<TRecord[K]> : TRecord[K] extends Router<any, any> ? ClientRouter<TRecord[K]> : never;
+} : never;
+export interface RPCResponseSuccess<T = any> {
+    result: {
+        data: T;
+    };
+}
+export interface RPCResponseError {
+    error: {
+        code: RPCErrorCode;
+        message: string;
+        issues?: ValidationIssue[];
+        data?: any;
+    };
+}
+export type RPCResponse<T = any> = RPCResponseSuccess<T> | RPCResponseError;

package/dist/server/hydrate.d.ts

@@ -0,0 +1,5 @@
+import { type Child } from "../dom/render";
+/**
+ * Hydrate server-rendered HTML by attaching fine-grained signal subscriptions and event listeners
+ */
+export declare function hydrate(fn: () => Child, container: HTMLElement | DocumentFragment): () => void;

package/dist/server/index.d.ts

@@ -0,0 +1,3 @@
+export { hydrate } from "./hydrate";
+export { renderToStream, type StreamOptions } from "./render-to-stream";
+export { renderChildToString, renderToString } from "./render-to-string";

package/dist/{src/server → server}/index.js

@@ -431,10 +431,12 @@ class Signal {
   _value;
   _subscribers = new Set;
   _equals;
+  _onSet;
   version = 0;
-  constructor(initialValue, equals) {
+  constructor(initialValue, equals, onSet) {
     this._value = initialValue;
     this._equals = equals ?? Object.is;
+    this._onSet = onSet;
   }
   get() {
     if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
@@ -459,6 +461,9 @@ class Signal {
     }
     this._value = newValue;
     this.version++;
+    if (this._onSet) {
+      this._onSet(newValue);
+    }
     batch(() => {
       this.notify();
     });
@@ -484,11 +489,91 @@ class Signal {
     }
   }
 }
+function resolveStorage(storageOption) {
+  if (storageOption && typeof storageOption === "object") {
+    return storageOption;
+  }
+  if (storageOption === "session") {
+    try {
+      if (typeof sessionStorage !== "undefined")
+        return sessionStorage;
+    } catch {}
+    try {
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        return window.sessionStorage;
+      }
+    } catch {}
+    try {
+      if (typeof globalThis !== "undefined" && globalThis.sessionStorage) {
+        return globalThis.sessionStorage;
+      }
+    } catch {}
+    return null;
+  }
+  try {
+    if (typeof localStorage !== "undefined")
+      return localStorage;
+  } catch {}
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage;
+    }
+  } catch {}
+  try {
+    if (typeof globalThis !== "undefined" && globalThis.localStorage) {
+      return globalThis.localStorage;
+    }
+  } catch {}
+  return null;
+}
 function signal(initialValue, optionsOrEquals) {
   const equals = typeof optionsOrEquals === "function" ? optionsOrEquals : optionsOrEquals?.equals;
   const isInternal = typeof optionsOrEquals === "object" ? optionsOrEquals?.internal : false;
   const customName = typeof optionsOrEquals === "object" ? optionsOrEquals?.name : undefined;
-  const s = new Signal(initialValue, equals);
+  const persistOption = typeof optionsOrEquals === "object" ? optionsOrEquals?.persist : undefined;
+  const persistConfig = persistOption ? typeof persistOption === "string" ? { key: persistOption } : persistOption : undefined;
+  let effectiveInitial = initialValue;
+  const storage = persistConfig ? resolveStorage(persistConfig.storage) : null;
+  const serialize = persistConfig?.serialize ?? JSON.stringify;
+  const deserialize = persistConfig?.deserialize ?? JSON.parse;
+  if (persistConfig && storage) {
+    try {
+      const stored = storage.getItem(persistConfig.key);
+      if (stored !== null) {
+        effectiveInitial = deserialize(stored);
+      }
+    } catch {}
+  }
+  let isSyncing = false;
+  const onSet = persistConfig && storage ? (val) => {
+    if (isSyncing)
+      return;
+    try {
+      storage.setItem(persistConfig.key, serialize(val));
+    } catch {}
+  } : undefined;
+  const s = new Signal(effectiveInitial, equals, onSet);
+  if (persistConfig && storage && (persistConfig.syncTabs ?? true) && typeof window !== "undefined" && typeof window.addEventListener === "function") {
+    const onStorage = (e) => {
+      if (e.key === persistConfig.key) {
+        try {
+          const nextVal = e.newValue !== null ? deserialize(e.newValue) : initialValue;
+          isSyncing = true;
+          try {
+            s.set(nextVal);
+          } finally {
+            isSyncing = false;
+          }
+        } catch {}
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    if (currentScope) {
+      currentScope.addCleanup(() => {
+        window.removeEventListener("storage", onStorage);
+      });
+    }
+  }
   const accessor = (...args) => {
     if (args.length === 0) {
       return s.get();

package/dist/server/render-to-stream.d.ts

@@ -0,0 +1,9 @@
+import type { Child } from "../dom/render";
+export interface StreamOptions {
+    onChunk?: (chunk: string) => void;
+    onError?: (error: any) => void;
+}
+/**
+ * Stream HTML chunks progressively using standard Web Streams (ReadableStream)
+ */
+export declare function renderToStream(fn: () => Child, options?: StreamOptions): ReadableStream<Uint8Array>;

package/dist/server/render-to-string.d.ts

@@ -0,0 +1,6 @@
+import type { Child } from "../dom/render";
+export declare function renderChildToString(child: Child): string;
+/**
+ * Synchronously render a Visage component tree to an HTML string
+ */
+export declare function renderToString(fn: () => Child): string;

package/dist/signals/computed.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Visage Lazy, Glitch-Free Computed State Engine
+ */
+import type { Scope } from "./scope";
+import { COMPUTED_BRAND, type ComputedOptions, type IDependency, type ISubscriber, type ReadonlySignal, SubscriberState } from "./types";
+export type { ComputedOptions };
+/**
+ * Computed / Derived reactive state (Lazy, Glitch-Free, Memoized)
+ */
+export declare class Computed<T> implements ISubscriber, IDependency {
+    [COMPUTED_BRAND]: true;
+    private _fn;
+    private _value;
+    private _subscribers;
+    sources: Set<IDependency>;
+    sourceVersions: Map<IDependency, number>;
+    state: SubscriberState;
+    scope: Scope | null;
+    version: number;
+    constructor(fn: () => T);
+    get(): T;
+    get value(): T;
+    removeSubscriber(sub: ISubscriber): void;
+    markDirty(targetState?: SubscriberState): void;
+    updateIfNecessary(): boolean;
+    private recompute;
+    private cleanupSources;
+    dispose(): void;
+}
+/**
+ * Factory for creating lazy, memoized, glitch-free computed signals.
+ *
+ * Computed values are only recalculated when one of their recorded reactive
+ * dependencies changes and the value is actually accessed.
+ *
+ * @example
+ * ```tsx
+ * const count = signal(2);
+ * const double = computed(() => count() * 2);
+ *
+ * console.log(double()); // 4
+ *
+ * // In JSX, passes directly or as a function
+ * <div>Doubled value: {double}</div>
+ * ```
+ *
+ * @param fn - The pure reactive computation function
+ * @param options - Optional debug metadata and internal flags
+ * @returns A readonly reactive signal function accessor
+ */
+export declare function computed<T>(fn: () => T, options?: ComputedOptions): ReadonlySignal<T>;
+/**
+ * Solid-compatible alias for `computed()`.
+ *
+ * @example
+ * ```tsx
+ * const count = signal(5);
+ * const squared = createMemo(() => count() ** 2);
+ * ```
+ */
+export declare const createMemo: typeof computed;

package/dist/signals/context.d.ts

@@ -0,0 +1,44 @@
+import { type Child } from "../dom/render";
+export interface Context<T> {
+    id: symbol;
+    defaultValue: T;
+    Provider: (props: {
+        value: T;
+        children: Child;
+    }) => any;
+}
+/**
+ * Create a reactive Context for dependency injection across the component tree.
+ *
+ * Context allows passing state and utilities down the component tree without
+ * manually drilling props through every intermediate component.
+ *
+ * @example
+ * ```tsx
+ * const ThemeContext = createContext<"light" | "dark">("light");
+ *
+ * // Provide value in parent
+ * function App() {
+ *   return (
+ *     <ThemeContext.Provider value="dark">
+ *       <Header />
+ *     </ThemeContext.Provider>
+ *   );
+ * }
+ *
+ * // Consume value in descendant
+ * function Header() {
+ *   const theme = useContext(ThemeContext);
+ *   return <div>Current theme: {theme}</div>;
+ * }
+ * ```
+ */
+export declare function createContext<T>(defaultValue: T): Context<T>;
+export declare function createContext<T>(): Context<T | undefined>;
+/**
+ * Consume a Context value from the nearest ancestor Provider, falling back to defaultValue.
+ *
+ * @param context - The Context object returned from `createContext`
+ * @returns The current context value
+ */
+export declare function useContext<T>(context: Context<T>): T;

package/dist/signals/effect.d.ts

@@ -0,0 +1,56 @@
+import type { Scope } from "./scope";
+import { type CleanupFn, type IDependency, type ISubscriber, SubscriberState } from "./types";
+/**
+ * Side-effect runner with automatic dependency tracking and disposal
+ */
+export declare class Effect implements ISubscriber {
+    private _fn;
+    sources: Set<IDependency>;
+    sourceVersions: Map<IDependency, number>;
+    cleanups: CleanupFn[];
+    state: SubscriberState;
+    scope: Scope | null;
+    constructor(fn: () => void | CleanupFn);
+    addCleanup(fn: CleanupFn): void;
+    private runCleanups;
+    markDirty(targetState?: SubscriberState): void;
+    run(): void;
+    private cleanupSources;
+    dispose(): void;
+}
+/**
+ * Execute side-effects reactively when dependencies change.
+ *
+ * Runs immediately upon creation and tracks any signals read within `fn`.
+ * When dependencies change, re-execution is scheduled automatically.
+ *
+ * An optional cleanup function can be returned from `fn`, which runs
+ * before the next re-execution and when the enclosing scope is disposed.
+ *
+ * @example
+ * ```tsx
+ * const count = signal(0);
+ *
+ * effect(() => {
+ *   console.log("Count changed to:", count());
+ *
+ *   const timer = setInterval(() => console.log("tick"), 1000);
+ *   return () => clearInterval(timer);
+ * });
+ * ```
+ *
+ * @param fn - The side-effect function, optionally returning a cleanup function
+ * @returns A manual disposal cleanup function
+ */
+export declare function effect(fn: () => void | CleanupFn): CleanupFn;
+/**
+ * Solid / React-compatible alias for `effect()`.
+ *
+ * @example
+ * ```tsx
+ * createEffect(() => {
+ *   document.title = `Total: ${count()}`;
+ * });
+ * ```
+ */
+export declare const createEffect: typeof effect;

package/dist/signals/index.d.ts

@@ -0,0 +1,8 @@
+export { Computed, type ComputedOptions, computed, createMemo } from "./computed";
+export { type Context, createContext, useContext } from "./context";
+export { createEffect, Effect, effect } from "./effect";
+export { createRoot, getActiveScope, onCleanup, runInScope, Scope } from "./scope";
+export { createSignal, Signal, type SignalOptions, signal } from "./signal";
+export { createStore, mutateStore, type Store, unwrapStore } from "./store";
+export { batch, untrack } from "./system";
+export { type CleanupFn, COMPUTED_BRAND, type Dependency, isSignal, type PersistOptions, type ReadonlySignal, SIGNAL_BRAND, type Subscriber, SubscriberState, type WritableSignal } from "./types";

package/dist/{src/signals → signals}/index.js

@@ -848,10 +848,12 @@ class Signal {
   _value;
   _subscribers = new Set;
   _equals;
+  _onSet;
   version = 0;
-  constructor(initialValue, equals) {
+  constructor(initialValue, equals, onSet) {
     this._value = initialValue;
     this._equals = equals ?? Object.is;
+    this._onSet = onSet;
   }
   get() {
     if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
@@ -876,6 +878,9 @@ class Signal {
     }
     this._value = newValue;
     this.version++;
+    if (this._onSet) {
+      this._onSet(newValue);
+    }
     batch(() => {
       this.notify();
     });
@@ -901,11 +906,91 @@ class Signal {
     }
   }
 }
+function resolveStorage(storageOption) {
+  if (storageOption && typeof storageOption === "object") {
+    return storageOption;
+  }
+  if (storageOption === "session") {
+    try {
+      if (typeof sessionStorage !== "undefined")
+        return sessionStorage;
+    } catch {}
+    try {
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        return window.sessionStorage;
+      }
+    } catch {}
+    try {
+      if (typeof globalThis !== "undefined" && globalThis.sessionStorage) {
+        return globalThis.sessionStorage;
+      }
+    } catch {}
+    return null;
+  }
+  try {
+    if (typeof localStorage !== "undefined")
+      return localStorage;
+  } catch {}
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage;
+    }
+  } catch {}
+  try {
+    if (typeof globalThis !== "undefined" && globalThis.localStorage) {
+      return globalThis.localStorage;
+    }
+  } catch {}
+  return null;
+}
 function signal(initialValue, optionsOrEquals) {
   const equals = typeof optionsOrEquals === "function" ? optionsOrEquals : optionsOrEquals?.equals;
   const isInternal = typeof optionsOrEquals === "object" ? optionsOrEquals?.internal : false;
   const customName = typeof optionsOrEquals === "object" ? optionsOrEquals?.name : undefined;
-  const s = new Signal(initialValue, equals);
+  const persistOption = typeof optionsOrEquals === "object" ? optionsOrEquals?.persist : undefined;
+  const persistConfig = persistOption ? typeof persistOption === "string" ? { key: persistOption } : persistOption : undefined;
+  let effectiveInitial = initialValue;
+  const storage = persistConfig ? resolveStorage(persistConfig.storage) : null;
+  const serialize = persistConfig?.serialize ?? JSON.stringify;
+  const deserialize = persistConfig?.deserialize ?? JSON.parse;
+  if (persistConfig && storage) {
+    try {
+      const stored = storage.getItem(persistConfig.key);
+      if (stored !== null) {
+        effectiveInitial = deserialize(stored);
+      }
+    } catch {}
+  }
+  let isSyncing = false;
+  const onSet = persistConfig && storage ? (val) => {
+    if (isSyncing)
+      return;
+    try {
+      storage.setItem(persistConfig.key, serialize(val));
+    } catch {}
+  } : undefined;
+  const s = new Signal(effectiveInitial, equals, onSet);
+  if (persistConfig && storage && (persistConfig.syncTabs ?? true) && typeof window !== "undefined" && typeof window.addEventListener === "function") {
+    const onStorage = (e) => {
+      if (e.key === persistConfig.key) {
+        try {
+          const nextVal = e.newValue !== null ? deserialize(e.newValue) : initialValue;
+          isSyncing = true;
+          try {
+            s.set(nextVal);
+          } finally {
+            isSyncing = false;
+          }
+        } catch {}
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    if (currentScope) {
+      currentScope.addCleanup(() => {
+        window.removeEventListener("storage", onStorage);
+      });
+    }
+  }
   const accessor = (...args) => {
     if (args.length === 0) {
       return s.get();