@epoch32/visage 1.0.0 → 1.1.1

package/dist/{src/dom → dom}/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();

package/dist/dom/lazy.d.ts

@@ -0,0 +1,30 @@
+import type { Child } from "./render";
+export type Component<P = any> = (props: P) => Child;
+export type LazyComponent<T extends Component<any>> = T & {
+    preload(): Promise<T>;
+};
+/**
+ * Lazy load an asynchronous component with automatic `<Suspense>` boundary coordination and preloading.
+ *
+ * Dynamically imports the component module upon first render or when `.preload()` is invoked.
+ *
+ * @example
+ * ```tsx
+ * // Dynamic code-split component
+ * const HeavyChart = lazy(() => import("./HeavyChart"));
+ *
+ * // Optional early prefetching
+ * HeavyChart.preload();
+ *
+ * // Render inside Suspense
+ * <Suspense fallback={<div>Loading chart...</div>}>
+ *   <HeavyChart data={chartData()} />
+ * </Suspense>
+ * ```
+ *
+ * @param importer - Dynamic import function returning a component or `{ default: Component }`
+ * @returns A lazy component with a `.preload()` method
+ */
+export declare function lazy<T extends Component<any>>(importer: () => Promise<{
+    default: T;
+} | T>): LazyComponent<T>;

package/dist/dom/render.d.ts

@@ -0,0 +1,23 @@
+import { type ReadonlySignal } from "../signals";
+export type ReactiveValue<T> = T | ReadonlySignal<T> | (() => T);
+export type Child = Node | string | number | boolean | null | undefined | ReadonlySignal<any> | (() => any) | Child[];
+/**
+ * Check if a property is a reactive getter or signal
+ */
+export declare function isReactive<T>(value: unknown): value is ReadonlySignal<T> | (() => T);
+/**
+ * Extract current value whether static, signal, or getter
+ */
+export declare function resolveValue<T>(val: ReactiveValue<T>): T;
+/**
+ * Mount a Visage component or element to a DOM container
+ */
+export declare function render(fn: () => Child, container: HTMLElement | DocumentFragment): () => void;
+/**
+ * Bind dynamic or static attributes, properties, styles, and events to an Element
+ */
+export declare function setAttribute(el: HTMLElement | SVGElement, key: string, value: any): void;
+/**
+ * Insert a child node into a parent container with reactive fine-grained updates
+ */
+export declare function insertChild(parent: Node, child: Child, before?: Node | null): Node | null;

package/dist/dom/resource.d.ts

@@ -0,0 +1,34 @@
+import { type ReadonlySignal } from "../signals";
+import { type ReactiveValue } from "./render";
+export interface SuspenseContextValue {
+    registerPromise(p: Promise<any>): void;
+}
+export declare const SuspenseContext: import("..").Context<SuspenseContextValue | null>;
+export interface ResourceActions<T> {
+    mutate(value: T): void;
+    refetch(): Promise<T>;
+    readonly loading: ReadonlySignal<boolean>;
+    readonly error: ReadonlySignal<any>;
+}
+export type Resource<T> = ReadonlySignal<T | undefined> & ResourceActions<T>;
+/**
+ * Create an asynchronous resource tied to optional source signals and suspense boundaries.
+ *
+ * Automatically tracks async state, registers pending promises with `<Suspense>`,
+ * and supports manual mutation and refetching.
+ *
+ * @example
+ * ```tsx
+ * const [userId, setUserId] = createSignal("user-1");
+ * const user = createResource(userId, (id) => fetchUser(id));
+ *
+ * // Read data, loading state, error
+ * <div>{() => user()?.name}</div>
+ * ```
+ *
+ * @param sourceOrFetcher - A reactive source signal or direct async fetcher function
+ * @param maybeFetcher - Async fetcher taking the resolved source value
+ * @returns A reactive Resource accessor with `.loading`, `.error`, `.mutate`, and `.refetch`
+ */
+export declare function createResource<T>(fetcher: () => Promise<T>): Resource<T>;
+export declare function createResource<T, S>(source: ReactiveValue<S>, fetcher: (source: S) => Promise<T>): Resource<T>;

package/dist/form/form.d.ts

@@ -0,0 +1,41 @@
+import { type ReadonlySignal, type WritableSignal } from "../signals";
+import { type SchemaLike } from "./schema";
+export interface FieldState<T> {
+    value: WritableSignal<T>;
+    error: ReadonlySignal<string | null>;
+    touched: WritableSignal<boolean>;
+    isDirty: ReadonlySignal<boolean>;
+}
+export type FormFields<T> = {
+    [K in keyof T]-?: FieldState<T[K]>;
+};
+export interface FormOptions<T extends Record<string, any> = Record<string, any>> {
+    initialValues: T;
+    schema?: SchemaLike<any>;
+    validateOn?: "change" | "blur" | "submit";
+    onSubmit?: (values: T) => void | Promise<void>;
+}
+export interface Form<T> {
+    fields: FormFields<T>;
+    values: () => T;
+    errors: ReadonlySignal<Partial<Record<keyof T, string>>>;
+    isValid: ReadonlySignal<boolean>;
+    isDirty: ReadonlySignal<boolean>;
+    isSubmitting: ReadonlySignal<boolean>;
+    submitCount: ReadonlySignal<number>;
+    bind: (name: keyof T) => {
+        name: string;
+        value: WritableSignal<any>;
+        onInput: (e: any) => void;
+        onBlur: () => void;
+    };
+    handleSubmit: (e?: Event) => Promise<boolean>;
+    reset: (values?: Partial<T>) => void;
+    setFieldValue: <K extends keyof T>(name: K, value: T[K]) => void;
+    setFieldError: (name: keyof T, error: string | null) => void;
+    validate: () => boolean;
+}
+/**
+ * Create a fine-grained reactive form with built-in schema validation (ArkType, Zod, Valibot, or native v)
+ */
+export declare function createForm<T extends Record<string, any> = Record<string, any>>(options: FormOptions<T>): Form<T>;

package/dist/form/index.d.ts

@@ -0,0 +1,2 @@
+export { createForm, type FieldState, type Form, type FormFields, type FormOptions } from "./form";
+export { Schema, type SchemaLike, type StandardSchemaV1, type ValidationIssue, type ValidationResult, v, validateWithSchema } from "./schema";

package/dist/{src/form → form}/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();

package/dist/form/schema.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Built-in lightweight schema validator & Standard Schema v1 (ArkType, Zod, Valibot) support
+ */
+export interface ValidationIssue {
+    path: string;
+    message: string;
+}
+export interface ValidationResult<T> {
+    success: boolean;
+    data?: T;
+    issues?: ValidationIssue[];
+}
+export interface StandardSchemaV1<T = any> {
+    "~standard": {
+        version: 1;
+        vendor: string;
+        validate: (value: unknown) => {
+            value: T;
+        } | {
+            issues: ReadonlyArray<{
+                path?: ReadonlyArray<string | number>;
+                message: string;
+            }>;
+        };
+    };
+}
+export type SchemaLike<T = any> = Schema<T> | StandardSchemaV1<T> | ((value: unknown) => ValidationResult<T> | boolean | string | null | undefined);
+export declare abstract class Schema<T = any> {
+    readonly _type: T;
+    abstract validate(value: unknown, path?: string): ValidationResult<T>;
+    "~standard": {
+        version: 1;
+        vendor: string;
+        validate: (val: unknown) => {
+            value: T;
+            issues?: undefined;
+        } | {
+            value?: undefined;
+            issues: {
+                path: string[];
+                message: string;
+            }[];
+        };
+    };
+}
+declare class StringSchema extends Schema<string> {
+    private _min?;
+    private _max?;
+    private _emailMsg?;
+    private _regex?;
+    private _isOptional;
+    min(length: number, message?: string): this;
+    max(length: number, message?: string): this;
+    email(message?: string): this;
+    regex(pattern: RegExp, message?: string): this;
+    optional(): Schema<string | undefined>;
+    validate(value: unknown, path?: string): ValidationResult<string>;
+}
+declare class NumberSchema extends Schema<number> {
+    private _min?;
+    private _max?;
+    private _integer?;
+    private _isOptional;
+    min(value: number, message?: string): this;
+    max(value: number, message?: string): this;
+    integer(message?: string): this;
+    optional(): Schema<number | undefined>;
+    validate(value: unknown, path?: string): ValidationResult<number>;
+}
+declare class BooleanSchema extends Schema<boolean> {
+    validate(value: unknown, _path?: string): ValidationResult<boolean>;
+}
+export type InferSchemaType<S> = S extends Schema<infer T> ? T : S extends StandardSchemaV1<infer T> ? T : S extends (val: any) => ValidationResult<infer T> ? T : any;
+export type InferObjectShape<S extends Record<string, SchemaLike<any>>> = {
+    [K in keyof S]: InferSchemaType<S[K]>;
+};
+export declare class ObjectSchema<T extends Record<string, any>> extends Schema<T> {
+    shape: {
+        [K in keyof T]: SchemaLike<T[K]>;
+    };
+    constructor(shape: {
+        [K in keyof T]: SchemaLike<T[K]>;
+    });
+    validate(value: unknown, basePath?: string): ValidationResult<T>;
+}
+export declare function validateWithSchema<T>(schema: SchemaLike<T>, value: unknown, path?: string): ValidationResult<T>;
+/**
+ * Built-in schema definition library
+ */
+export declare const v: {
+    string: () => StringSchema;
+    number: () => NumberSchema;
+    boolean: () => BooleanSchema;
+    object: <S extends Record<string, SchemaLike<any>>>(shape: S) => ObjectSchema<{ [K in keyof S]: InferSchemaType<S[K]>; }>;
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { type ApiClient, type ApiClientOptions, buildFileRouter, createApi, createApiClient, createApiHandler, defineMiddleware, type FileRouteModule, ProcedureBuilder, procedure } from "./api";
+export { type AnyScale, Area, type AreaProps, type BandScale, Bar, type BarProps, CartesianGrid, type CartesianGridProps, Chart, ChartContext, type ChartContextValue, ChartCursor, type ChartCursorProps, ChartLegend, type ChartProps, ChartTooltip, type CurveType, createBandScale, createLinearScale, generateNiceTicks, type HoverState, Legend, type LegendProps, Line, type LinearScale, type LineProps, type Margin, Pie, type PieProps, type Point, pathArc, pathArea, pathLine, type SeriesMeta, useChartContext, XAxis, type XAxisProps, YAxis, type YAxisProps } from "./charts";
+export { connectDevTools, DevToolsHub, type DevToolsOptions, type DevToolsTab, devtoolsHub, highlightElement, type QueryRecord, type RpcRecord, type SignalRecord, VisageDevTools } from "./devtools";
+export { type Child, type Component, createResource, ErrorBoundary, type ErrorBoundaryProps, For, type ForProps, insertChild, isReactive, type LazyComponent, lazy, Portal, type PortalProps, type ReactiveValue, type Resource, type ResourceActions, render, resolveValue, Show, type ShowProps, Suspense, type SuspenseProps, setAttribute } from "./dom";
+export { createForm, type FieldState, type Form, type FormFields, type FormOptions, Schema, type SchemaLike, type StandardSchemaV1, type ValidationIssue, type ValidationResult, v, validateWithSchema } from "./form";
+export type { AnchorAttributes, ButtonAttributes, HTMLAttributes, InputAttributes, JSX, ReactiveProp } from "./jsx-runtime/jsx";
+export { type CreateQueryOptions, createInfiniteQuery, createMutation, createQuery, type DefaultOptions, type FetchStatus, FocusManager, focusManager, hashKey, type InfiniteData, type InfiniteQueryOptions, type InfiniteQueryResult, type MutateOptions, Mutation, MutationCache, type MutationFunction, type MutationOptions, type MutationResult, type MutationStatus, OnlineManager, onlineManager, Query, QueryCache, QueryClient, type QueryClientConfig, QueryClientContext, QueryClientProvider, type QueryFilters, type QueryFunction, type QueryFunctionContext, type QueryKey, type QueryObserver, type QueryOptions, type QueryResult, type QueryState, type QueryStatus, type RefetchOptions, type RetryDelayValue } from "./query";
+export { Link, type LinkProps, type LocationState, type MatchedRoute, Route, type RouteDefinition, type RouteProps, Router, type RouterContextValue, type RouterProps, Routes, type RoutesProps, useLocation, useNavigate, useParams, useSearchParams } from "./router";
+export { type ClientOptions, type ClientRouter, type CORSOptions, createClient, createFetchHandler, createProcedure, createRouter, ERROR_CODE_TO_STATUS, executeProcedure, type FetchHandlerOptions, type MiddlewareFn, mutation, type Procedure, type ProcedureOptions, type ProcedureRecord, type ProcedureType, query, type Router as RPCRouter, RouterImpl, RPCError, type RPCErrorCode, type RPCResponse, STATUS_TO_ERROR_CODE, type SubscriptionCallbacks, type SubscriptionHandle, subscription } from "./rpc";
+export { hydrate, renderChildToString, renderToStream, renderToString, type StreamOptions } from "./server";
+export { batch, type CleanupFn, Computed, type Context, computed, createContext, createEffect, createMemo, createRoot, createSignal, createStore, type Dependency, Effect, effect, getActiveScope, isSignal, mutateStore, onCleanup, type ReadonlySignal, runInScope, Scope, Signal, type Store, type Subscriber, signal, untrack, unwrapStore, useContext, type WritableSignal } from "./signals";
+export { type BaseLayoutProps, Center, type CenterProps, type ClassValue, createStyle, css, cx, DIMENSION_KEYWORDS, em, extractStyleTags, fluid, formatStyleProp, type GlassOptions, Grid, type GridProps, getScopeId, glass, hashString, hasReactiveClass, normalizeClass, px, type RadiusVariant, Row, type RowProps, radius, rem, type ScopeOptions, type ShadowVariant, Spacer, type SpacerProps, Stack, type StackProps, Style, type StyleClasses, StyleManager, type StyleProps, scopeCSS, scopeSelector, shadow, space, styleManager, UNITLESS_PROPERTIES, useStyle } from "./style";
+export { html, template } from "./template";
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionMultipleProps, type AccordionProps, type AccordionSingleProps, AccordionTrigger, type ColumnDef, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupData, CommandInput, type CommandInputProps, CommandItem, type CommandItemData, type CommandItemProps, CommandList, type CommandProps, createControllableSignal, createIcon, createId, createToastManager, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuSeparator, DropdownMenuTrigger, defaultToastManager, type IconNode, type IconProps, onClickOutside, Popover, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, type PopoverProps, PopoverTrigger, type SortDirection, type SortState, Switch, type SwitchProps, SwitchThumb, type SwitchThumbProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, Toast, ToastClose, type ToastData, ToastDescription, type ToastManager, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, ToastTitle, type ToastVariant, ToastViewport, type ToastViewportProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipPortal, type TooltipProps, TooltipTrigger, toast, trapFocus, useAccordionContext, useAccordionItemContext, useCommandContext, useDialogContext, useDropdownMenuContext, usePopoverContext, useTabsContext, useToast, useTooltipContext } from "./ui";
+export { createVirtualizer, VirtualGrid, type VirtualGridProps, type VirtualItem, type Virtualizer, type VirtualizerOptions, VirtualList, type VirtualListProps } from "./virtual";

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

@@ -1112,10 +1112,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 */) {
@@ -1140,6 +1142,9 @@ class Signal {
     }
     this._value = newValue;
     this.version++;
+    if (this._onSet) {
+      this._onSet(newValue);
+    }
     batch(() => {
       this.notify();
     });
@@ -1165,11 +1170,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/jsx-dev-runtime/index.d.ts

@@ -0,0 +1 @@
+export { Fragment, type JSX, jsx, jsxDEV, jsxs } from "../jsx-runtime";

package/dist/jsx-runtime/index.d.ts

@@ -0,0 +1,8 @@
+import { type Child } from "../dom";
+export type { JSX } from "./jsx";
+export declare function Fragment(props: {
+    children?: Child;
+}): any;
+export declare function jsx(type: any, props?: Record<string, any>, key?: any): any;
+export declare const jsxs: typeof jsx;
+export declare const jsxDEV: typeof jsx;