seitu 0.0.1 → 0.2.0

package/README.md

@@ -15,10 +15,10 @@ To quick start you only need to write the following code:
 
 ```tsx
 import { useSubscription } from 'seitu/react'
-import { sessionStorageValue } from 'seitu/web'
+import { createSessionStorageValue } from 'seitu/web'
 import * as z from 'zod'
 
-const value = sessionStorageValue({
+const value = createSessionStorageValue({
   key: 'test',
   defaultValue: 0,
   schema: z.number(),

package/dist/core/index.d.ts

@@ -1 +1,2 @@
+export * from './schema-store';
 export * from './subscription';

package/dist/core/schema-store.d.ts

@@ -0,0 +1,19 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import type { Simplify } from '../utils';
+import type { Readable, Subscribable, Writable } from './index';
+export type SchemaStoreSchema = Record<string, StandardSchemaV1<unknown, unknown>>;
+export type SchemaStoreOutput<S extends SchemaStoreSchema> = Simplify<{
+    [K in keyof S]: StandardSchemaV1.InferOutput<S[K]>;
+}>;
+export interface SchemaStore<O extends Record<string, unknown>> extends Subscribable<O>, Readable<O>, Writable<Partial<O>> {
+    getDefaultValue: <K extends keyof O>(key: K) => O[K];
+}
+export interface SchemaStoreOptions<S extends Record<string, StandardSchemaV1>> {
+    schemas: S;
+    defaultValues: SchemaStoreOutput<S>;
+    provider: {
+        get: () => SchemaStoreOutput<S>;
+        set: (value: Partial<SchemaStoreOutput<S>>) => void;
+    };
+}
+export declare function createSchemaStore<S extends Record<string, StandardSchemaV1>>(options: SchemaStoreOptions<S>): SchemaStore<SchemaStoreOutput<S>>;

package/dist/core/schema-store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/subscription.d.ts

@@ -1,19 +1,23 @@
 export interface Subscribable<V> {
     'subscribe': (callback: (value: V) => any) => () => void;
-    '~types': {
+    '~': {
+        /**
+         * Type type with returned value of the subscription.
+         */
         output: V;
+        /**
+         * A function that notifies all subscribers that the value has changed.
+         */
+        notify: () => void;
     };
 }
 export interface Readable<T> {
     get: () => T;
 }
-export interface Writable<T, P extends Partial<T> = T> {
-    set: (value: T | ((prev: P) => T)) => any;
+export interface Writable<T> {
+    set: (value: T | ((prev: T) => T)) => any;
 }
-export interface Removable {
-    remove: () => void;
-}
-export declare function createSubscription<V>(): {
-    subscribe: (callback: (value: V) => any) => () => void;
-    notify: (value: V) => void;
+export declare function createSubscription<T = void>(): {
+    subscribe: (callback: (payload: T) => any) => () => void;
+    notify: (payload: T) => void;
 };

package/dist/core-CuCUF5Aj.js

@@ -0,0 +1,48 @@
+function e(e) {
+	if (typeof e != "string") return e;
+	try {
+		return JSON.parse(e);
+	} catch {
+		return e;
+	}
+}
+function t(t) {
+	let { subscribe: r, notify: i } = n(), a = { ...t.defaultValues }, o = () => {
+		let n = { ...a };
+		for (let [r, i] of Object.entries(t.schemas)) {
+			let o = t.provider.get()[r], s = i["~standard"].validate(e(o));
+			if (s instanceof Promise) throw TypeError("[createStorage] Validation schema should not return a Promise.");
+			s.issues && console.warn(JSON.stringify(s.issues, null, 2), { cause: s.issues }), n[r] = s.issues ? a[r] : s.value;
+		}
+		return n;
+	};
+	return {
+		get: o,
+		set: (e) => {
+			let n = typeof e == "function" ? e(o()) : e;
+			t.provider.set(n), i();
+		},
+		getDefaultValue: (e) => a[e],
+		subscribe: (e) => r(() => {
+			e(o());
+		}),
+		"~": {
+			output: null,
+			notify: i
+		}
+	};
+}
+function n() {
+	let e = new Set();
+	return {
+		subscribe(t) {
+			return e.add(t), () => {
+				e.delete(t);
+			};
+		},
+		notify(t) {
+			e.forEach((e) => e(t));
+		}
+	};
+}
+export { t as n, e as r, n as t };

package/dist/core.js

@@ -1,14 +1,2 @@
-function e() {
-	let e = new Set();
-	return {
-		subscribe(t) {
-			return e.add(t), () => {
-				e.delete(t);
-			};
-		},
-		notify(t) {
-			e.forEach((e) => e(t));
-		}
-	};
-}
-export { e as createSubscription };
+import { n as e, t } from "./core-CuCUF5Aj.js";
+export { e as createSchemaStore, t as createSubscription };

package/dist/react/hooks.d.ts

@@ -1,19 +1,25 @@
-import type { Readable, Subscribable } from '../core/subscription';
+import type { Readable, Subscribable } from '../core/index';
+import * as React from 'react';
+export type UseSubscriptionSource<S extends Subscribable<any> & Readable<any>> = S | (() => S);
+export interface UseSubscriptionOptions<S extends Subscribable<any> & Readable<any>, R = S['~']['output']> {
+    selector?: (value: S['~']['output']) => R;
+    deps?: React.DependencyList;
+}
 /**
- * Use this hook to access a subscription for any function that implements the Subscription interface.
+ * Use this hook to subscribe to a reactive value. Accepts a subscription object
+ * directly, or a factory function that is called only once on first render —
+ * subsequent renders reuse the cached subscription unless dependency array changes.
  *
- * @kind hook
- *
- * @example
+ * @example Inline subscription
  * ```tsx twoslash title="/app/page.tsx"
  * 'use client'
  *
- * import { sessionStorageValue } from 'seitu/web'
+ * import { createSessionStorageValue } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  * import * as z from 'zod'
  *
  * export default function Page() {
- *   const value = useSubscription(sessionStorageValue({
+ *   const value = useSubscription(() => createSessionStorageValue({
  *     key: 'test',
  *     defaultValue: 0,
  *     schema: z.number(),
@@ -23,32 +29,30 @@ import type { Readable, Subscribable } from '../core/subscription';
  * }
  * ```
  *
- * @example
+ * @example Instance outside of component
  * ```tsx twoslash title="/app/page.tsx"
  * 'use client'
  *
- * import { sessionStorageValue } from 'seitu/web'
+ * import { createSessionStorage } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  * import * as z from 'zod'
  *
- * const sessionStorage = sessionStorageValue({
- *   key: 'test',
- *   defaultValue: 0,
- *   schema: z.number(),
+ * const sessionStorage = createSessionStorage({
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
  * })
  *
  * export default function Page() {
  *   const value = useSubscription(sessionStorage)
- *
- *   return <div>{value}</div>
+ *   return <div>{value.count}</div>
  * }
  * ```
  *
- * @example
+ * @example Subscription with selector
  * ```tsx twoslash title="/app/page.tsx"
  * 'use client'
  *
- * import { createSessionStorage, sessionStorageValue } from 'seitu/web'
+ * import { createSessionStorage } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  * import * as z from 'zod'
  *
@@ -60,12 +64,32 @@ import type { Readable, Subscribable } from '../core/subscription';
  *   defaultValues: { count: 0, name: '' },
  * })
  *
- * // Usage with selector, re-renders only when count changes
  * export default function Page() {
- *   const count = useSubscription(sessionStorage, value => value.count)
+ *   // Usage with selector, re-renders only when count changes
+ *   const count = useSubscription(sessionStorage, { selector: value => value.count })
  *
  *   return <div>{count}</div>
  * }
  * ```
+ *
+ * @example Ref example
+ * ```tsx twoslash title="/app/page.tsx"
+ * 'use client'
+ *
+ * import * as React from 'react'
+ * import { scrollState } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ *
+ * export default function Page() {
+ *   const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
+ *   const state = useSubscription(() => scrollState({ element: ref, direction: 'vertical' }), { deps: [ref] })
+ *
+ *   return (
+ *     <div ref={setRef}>
+ *       {String(state.top.value)}
+ *     </div>
+ *   )
+ * }
+ * ```
  */
-export declare function useSubscription<S extends Subscribable<any> & Readable<any>, R = S['~types']['output']>(subscription: S, selector?: (value: S['~types']['output']) => R): R;
+export declare function useSubscription<S extends Subscribable<any> & Readable<any> = Subscribable<any> & Readable<any>, R = S['~']['output']>(source: UseSubscriptionSource<S>, options?: UseSubscriptionOptions<S, R>): R;

package/dist/react/hooks.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/dist/react.js

@@ -1778,11 +1778,17 @@ var t = Object.create, n = Object.defineProperty, r = Object.getOwnPropertyDescr
 	};
 }))(), 1);
 function Ze(t, n) {
-	if (!t.get || !t.subscribe) throw Error("Subscription is not valid. It must have a get and subscribe method.");
-	let [r, i] = e.useState(() => n ? n(t.get()) : t.get()), a = e.useEffectEvent(() => r);
-	return e.useEffect(() => t.subscribe((e) => {
-		let t = n ? n(e) : e;
-		(0, Xe.default)(t, a()) || i(t);
-	}), [t, n]), r;
+	let { selector: r, deps: i = [] } = n ?? {}, a = typeof t == "function", o = e.useRef(t);
+	if (!a && t !== o.current) throw Error("useSubscription detected a new object on re-render. Either create the subscription outside the component or wrap it in a factory: useSubscription(() => yourSubscription(...))");
+	o.current = t;
+	let s = a ? t : () => t, c = e.useRef(s);
+	c.current = s;
+	let l = e.useMemo(() => c.current(), i);
+	if (!l.get || !l.subscribe) throw Error("Subscription is not valid. It must have a get and subscribe method.");
+	let [u, d] = e.useState(() => r ? r(l.get()) : l.get()), f = e.useEffectEvent(() => u);
+	return e.useEffect(() => l.subscribe((e) => {
+		let t = r ? r(e) : e;
+		(0, Xe.default)(t, f()) || d(t);
+	}), [l, r]), u;
 }
 export { Ze as useSubscription };

package/dist/utils.d.ts

@@ -4,4 +4,4 @@ export type Simplify<T> = {
 } & {};
 export type Satisfies<T extends U, U> = T;
 export type PartialForKeys<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>;
-export declare function tryParseJson(value: string): unknown;
+export declare function tryParseJson(value: unknown): unknown;

package/dist/web/index.d.ts

@@ -1,2 +1,6 @@
+export * from './local-storage';
+export * from './local-storage-value';
+export * from './media-query';
+export * from './scroll-state';
 export * from './session-storage';
 export * from './session-storage-value';

package/dist/web/local-storage-value.d.ts

@@ -0,0 +1,68 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import type { LocalStorage } from './local-storage';
+import type { WebStorageValue as LocalStorageValue, WebStorageValueOptionsWithSchema as LocalStorageValueOptionsWithSchema, WebStorageValueOptionsWithStorage as LocalStorageValueOptionsWithStorage } from './web-storage-value';
+export type { LocalStorageValue, LocalStorageValueOptionsWithSchema, LocalStorageValueOptionsWithStorage, };
+/**
+ * Creates a reactive handle for a single localStorage value.
+ *
+ * Two modes:
+ * - **Schema mode** (`schema`, `key`, `defaultValue`): standalone key with validation. Missing or
+ *   invalid stored data returns `defaultValue`.
+ * - **Storage mode** (`storage`, `key`): binds to one key of a `createLocalStorage` instance.
+ *   Type and default come from that storage.
+ *
+ * @example Vanilla
+ * ```ts twoslash title="local-storage-value.ts"
+ * import { createLocalStorageValue } from 'seitu/web'
+ * import * as z from 'zod'
+ *
+ * const value = createLocalStorageValue({
+ *   key: 'count',
+ *   defaultValue: 0,
+ *   schema: z.number(),
+ * })
+ * value.get() // 0
+ * value.set(1)
+ * value.set(v => v + 1)
+ * value.subscribe(v => console.log(v))
+ * ```
+ *
+ * @example Storage mode
+ * ```ts twoslash title="local-storage-value.ts"
+ * import { createLocalStorage, createLocalStorageValue } from 'seitu/web'
+ * import * as z from 'zod'
+ *
+ * const storage = createLocalStorage({
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ * const count = createLocalStorageValue({ storage, key: 'count' })
+ * count.set(5)
+ * storage.get().count === 5 // true
+ * ```
+ *
+ * @example React
+ * ```tsx twoslash title="page.tsx"
+ * 'use client'
+ *
+ * import { createLocalStorageValue } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ * import * as z from 'zod'
+ *
+ * export default function Page() {
+ *   const { value: count } = useSubscription(() => createLocalStorageValue({
+ *     key: 'count',
+ *     defaultValue: 0,
+ *     schema: z.number(),
+ *   }))
+ *
+ *   return (
+ *     <div>
+ *       <span>{count}</span>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function createLocalStorageValue<Storage extends LocalStorage<any>, K extends keyof Storage['~']['output']>(options: LocalStorageValueOptionsWithStorage<Storage, K>): LocalStorageValue<Storage['~']['output'][K]>;
+export declare function createLocalStorageValue<S extends StandardSchemaV1<unknown>>(options: LocalStorageValueOptionsWithSchema<S>): LocalStorageValue<StandardSchemaV1.InferOutput<S>>;

package/dist/web/local-storage.d.ts

@@ -0,0 +1,50 @@
+import type { SchemaStoreOutput, SchemaStoreSchema } from '../core/index';
+import type { WebStorage as LocalStorage, WebStorageOptions as LocalStorageOptions } from './web-storage';
+export type { LocalStorage, LocalStorageOptions };
+/**
+ * Creates a reactive handle for a localStorage instance.
+ *
+ * @example Vanilla
+ * ```ts twoslash title="local-storage.ts"
+ * import { createLocalStorage } from 'seitu/web'
+ * import * as z from 'zod'
+ *
+ * const localStorage = createLocalStorage({
+ *   schemas: {
+ *     token: z.string().nullable(),
+ *     preferences: z.object({ theme: z.enum(['light', 'dark']) }),
+ *   },
+ *   defaultValues: { token: null, preferences: { theme: 'light' } },
+ * })
+ *
+ * localStorage.get() // { token: null, preferences: { theme: 'light' } }
+ * localStorage.set({ token: 'abc' })
+ * localStorage.get() // { token: 'abc', preferences: { theme: 'light' } }
+ * localStorage.subscribe(console.log)
+ * ```
+ *
+ * @example React
+ * ```tsx twoslash title="page.tsx"
+ * 'use client'
+ *
+ * import { createLocalStorage } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ * import * as z from 'zod'
+ *
+ * const localStorage = createLocalStorage({
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * export default function Page() {
+ *   const { value } = useSubscription(localStorage)
+ *   return (
+ *     <div>
+ *       <span>{value.count}</span>
+ *       <span>{value.name}</span>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function createLocalStorage<S extends SchemaStoreSchema>(options: LocalStorageOptions<S>): LocalStorage<SchemaStoreOutput<S>>;

package/dist/web/media-query.d.ts

@@ -0,0 +1,77 @@
+import type { Readable, Subscribable } from '../core/index';
+export interface MediaQuery extends Subscribable<boolean>, Readable<boolean> {
+}
+type MinMaxPrefix = 'min-' | 'max-' | '';
+type CSSUnitSuffix = 'px' | 'em' | 'rem' | 'vw' | 'vh' | 'dvw' | 'dvh' | 'svw' | 'svh' | 'lvw' | 'lvh' | 'cqw' | 'cqh' | 'vmin' | 'vmax' | 'cm' | 'mm' | 'in' | 'pt' | 'pc';
+type CSSUnit = `${number}${CSSUnitSuffix}`;
+type CSSResolution = `${number}${'dpi' | 'dpcm' | 'dppx' | 'x'}`;
+type Ratio = `${number}/${number}`;
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+type ParseNum<S extends string, Acc extends string = ''> = S extends `${infer D extends Digit | '.'}${infer Rest}` ? ParseNum<Rest, `${Acc}${D}`> : Acc extends `${infer N extends number}` ? N : false;
+type MQEnum<F extends string, V extends string> = `(${F}: ${V})`;
+type MQRange<F extends string, V extends string = CSSUnit> = `(${MinMaxPrefix}${F}: ${V})`;
+type MQOptNum<F extends string> = `(${MinMaxPrefix}${F}${'' | `: ${number}`})`;
+export type MediaQueryType = `${'only ' | 'not ' | ''}${'screen' | 'print' | 'all'}` | MQEnum<'any-hover' | 'hover', 'hover' | 'none'> | MQEnum<'any-pointer' | 'pointer', 'none' | 'coarse' | 'fine'> | MQRange<'width' | 'height' | 'device-width' | 'device-height' | 'inline-size' | 'block-size'> | MQRange<'aspect-ratio' | 'device-aspect-ratio', Ratio> | MQOptNum<'color' | 'color-index' | 'monochrome'> | MQEnum<'color-gamut', 'srgb' | 'p3' | 'rec2020'> | MQEnum<'dynamic-range' | 'video-dynamic-range', 'standard' | 'high'> | MQEnum<'device-posture', 'continuous' | 'folded'> | MQEnum<'display-mode', 'browser' | 'fullscreen' | 'minimal-ui' | 'picture-in-picture' | 'standalone' | 'window-controls-overlay'> | MQEnum<'orientation', 'portrait' | 'landscape'> | MQEnum<'scan', 'interlace' | 'progressive'> | MQEnum<'grid', '0' | '1'> | MQEnum<'update', 'none' | 'slow' | 'fast'> | MQEnum<'overflow-block', 'none' | 'scroll' | 'optional-paged' | 'paged'> | MQEnum<'overflow-inline', 'none' | 'scroll'> | MQEnum<'environment-blending', 'opaque' | 'additive' | 'subtractive'> | MQRange<'resolution', 'infinite' | CSSResolution> | MQEnum<'prefers-color-scheme', 'light' | 'dark'> | MQEnum<'prefers-contrast', 'no-preference' | 'more' | 'less' | 'forced'> | MQEnum<'prefers-reduced-motion' | 'prefers-reduced-transparency' | 'prefers-reduced-data', 'no-preference' | 'reduce'> | MQEnum<'forced-colors', 'none' | 'active'> | MQEnum<'inverted-colors', 'none' | 'inverted'> | MQEnum<'prefers-online', 'online' | 'offline'> | MQEnum<'scripting', 'none' | 'initial-only' | 'enabled'>;
+type Suggestion = MediaQueryType | `${MediaQueryType} and ` | `${MediaQueryType}, `;
+type IsValid<T extends string> = string extends T ? true : T extends `${infer L}, ${infer R}` ? (IsValid<L> extends true ? IsValid<R> : false) : T extends `${infer L} and ${infer R}` ? (IsValid<L> extends true ? IsValid<R> : false) : T extends `not ${infer Rest}` ? IsValid<Rest> : T extends MediaQueryType ? true : false;
+type ValuesOf<F extends string, MQ = MediaQueryType> = MQ extends `(${F}: ${infer V})` ? V : never;
+type SuggestFeature<F extends string, V extends string> = ParseNum<V> extends infer N extends number ? `(${F}: ${N}${CSSUnitSuffix})` : [ValuesOf<F>] extends [never] ? MediaQueryType : `(${F}: ${ValuesOf<F>})`;
+type Suggest<T extends string> = string extends T ? Suggestion : T extends `${infer L}, ${infer R}` ? (IsValid<L> extends true ? `${L}, ${Suggest<R>}` : Suggestion) : T extends `${infer L} and ${infer R}` ? (IsValid<L> extends true ? `${L} and ${Suggest<R>}` : Suggestion) : T extends `not ${infer Rest}` ? `not ${Suggest<Rest>}` : T extends `(${infer F}: ${infer Rest}` ? SuggestFeature<F, Rest extends `${infer V})` ? V : Rest> : MediaQueryType;
+export interface MediaQueryOptions<T extends string> {
+    /**
+     * A media query string (e.g. `(min-width: 768px)` or `(prefers-color-scheme: dark)`).
+     */
+    query: IsValid<T> extends true ? T : Suggest<T>;
+    /**
+     * Value returned from `get()` during SSR.
+     * @default false
+     */
+    defaultMatches?: boolean;
+}
+/**
+ * Creates a handle for a media query.
+ *
+ * @example Vanilla
+ * ```ts twoslash title="media-query.ts"
+ * import { mediaQuery } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ *
+ * const isDesktop = mediaQuery({ query: '(min-width: 768px)' })
+ *
+ * // Usage with subscribe
+ * isDesktop.subscribe(matches => {
+ *   console.log(matches)
+ * })
+ *
+ * const state = isDesktop.get()
+ * console.log(state)
+ * ```
+ *
+ * @example React
+ * ```tsx twoslash title="page.tsx"
+ * import { mediaQuery } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ *
+ * const isDesktop = mediaQuery({ query: '(min-width: 768px)' })
+ *
+ * // Usage with some function component
+ * function Layout() {
+ *   const { value: matches } = useSubscription(isDesktop)
+ *   return matches ? 'i am desktop' : 'i am mobile'
+ * }
+ * ```
+ *
+ * @example Errors
+ * ```tsx twoslash
+ * import { mediaQuery } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ *
+ * // @errors: 2362 2322 1109
+ * mediaQuery({ query: '(min-width: ' })
+ *
+ * // @errors: 2362 2322 2820
+ * mediaQuery({ query: '(min-width: 768' })
+ * ```
+ */
+export declare function mediaQuery<T extends string>(options: MediaQueryOptions<T>): MediaQuery;
+export {};

package/dist/web/media-query.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web/scroll-state.d.ts

@@ -0,0 +1,87 @@
+import type { Readable, Subscribable } from '../core/index';
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
+export interface ScrollStateEdge {
+    value: boolean;
+    remaining: number;
+}
+export interface ScrollStateValue {
+    top: ScrollStateEdge;
+    bottom: ScrollStateEdge;
+    left: ScrollStateEdge;
+    right: ScrollStateEdge;
+}
+export interface ScrollState extends Subscribable<ScrollStateValue>, Readable<ScrollStateValue> {
+}
+export interface ScrollStateOptions {
+    /**
+     * The element to observe scroll position on.
+     */
+    element: Element | null;
+    /**
+     * Which scroll axis to track.
+     * @default 'both'
+     */
+    direction?: ScrollDirection;
+    /**
+     * Number of pixels from each edge before it counts as "scrolled".
+     * @default 0
+     */
+    threshold?: number;
+}
+/**
+ * Creates a reactive handle that tracks scroll position of an element relative to each edge.
+ *
+ * @example Vanilla
+ * ```ts twoslash
+ * import { scrollState } from 'seitu/web'
+ *
+ * const scroll = scrollState({
+ *   element: document.querySelector('.container'),
+ *   direction: 'vertical',
+ *   threshold: 10,
+ * })
+ *
+ * scroll.subscribe(state => {
+ *   console.log(state.top.value)
+ *   console.log(state.top.remaining)
+ *   console.log(state.bottom.value)
+ *   console.log(state.bottom.remaining)
+ * })
+ *
+ * const state = scroll.get()
+ * console.log(state)
+ * ```
+ *
+ * @example React
+ * ```tsx twoslash title="page.tsx"
+ * import { scrollState } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ *
+ * const scroll = scrollState({
+ *   element: document.querySelector('.container'),
+ *   threshold: 10,
+ * })
+ *
+ * function Layout() {
+ *   const { value: state, ref } = useSubscription(scroll)
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       <div>
+ *         {state.top.value ? 'scrolled' : 'at the top'}
+ *       </div>
+ *       <div>
+ *         {state.bottom.value ? 'scrolled' : 'at the bottom'}
+ *       </div>
+ *       <div>
+ *         {state.left.value ? 'scrolled' : 'at the left'}
+ *       </div>
+ *       <div>
+ *         {state.right.value ? 'scrolled' : 'at the right'}
+ *       </div>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function scrollState(options: ScrollStateOptions): ScrollState;

package/dist/web/scroll-state.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web/session-storage-value.d.ts

@@ -1,18 +1,7 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec';
-import type { Readable, Removable, Subscribable, Writable } from '../core/index';
 import type { SessionStorage } from './session-storage';
-export interface SessionStorageValue<V> extends Subscribable<V>, Readable<V>, Writable<V>, Removable {
-}
-export interface SessionStorageValueOptionsWithStorage<Storage extends SessionStorage<any>, K extends keyof Storage['~types']['output']> {
-    storage: Storage;
-    key: K;
-}
-export interface SessionStorageValueOptionsWithSchema<S extends StandardSchemaV1<unknown>> {
-    schema: S;
-    key: string;
-    defaultValue: StandardSchemaV1.InferOutput<S>;
-}
-export type SessionStorageValueOptions = SessionStorageValueOptionsWithStorage<SessionStorage<any>, string> | SessionStorageValueOptionsWithSchema<StandardSchemaV1<unknown>>;
+import type { WebStorageValue as SessionStorageValue, WebStorageValueOptionsWithSchema as SessionStorageValueOptionsWithSchema, WebStorageValueOptionsWithStorage as SessionStorageValueOptionsWithStorage } from './web-storage-value';
+export type { SessionStorageValue, SessionStorageValueOptionsWithSchema, SessionStorageValueOptionsWithStorage, };
 /**
  * Creates a reactive handle for a single sessionStorage value.
  *
@@ -22,12 +11,12 @@ export type SessionStorageValueOptions = SessionStorageValueOptionsWithStorage<S
  * - **Storage mode** (`storage`, `key`): binds to one key of a `createSessionStorage` instance.
  *   Type and default come from that storage.
  *
- * @example
- * ```ts twoslash
- * import { sessionStorageValue } from 'seitu/web'
+ * @example Vanilla
+ * ```ts twoslash title="session-storage-value.ts"
+ * import { createSessionStorageValue } from 'seitu/web'
  * import * as z from 'zod'
  *
- * const value = sessionStorageValue({
+ * const value = createSessionStorageValue({
  *   key: 'count',
  *   defaultValue: 0,
  *   schema: z.number(),
@@ -35,23 +24,45 @@ export type SessionStorageValueOptions = SessionStorageValueOptionsWithStorage<S
  * value.get() // 0
  * value.set(1)
  * value.set(v => v + 1)
- * value.remove()
  * value.subscribe(v => console.log(v))
  * ```
  *
- * @example
- * ```ts twoslash
- * import { createSessionStorage, sessionStorageValue } from 'seitu/web'
+ * @example Storage mode
+ * ```ts twoslash title="session-storage-value.ts"
+ * import { createSessionStorage, createSessionStorageValue } from 'seitu/web'
  * import * as z from 'zod'
  *
  * const storage = createSessionStorage({
  *   schemas: { count: z.number(), name: z.string() },
  *   defaultValues: { count: 0, name: '' },
  * })
- * const count = sessionStorageValue({ storage, key: 'count' })
+ * const count = createSessionStorageValue({ storage, key: 'count' })
  * count.set(5)
  * storage.get().count === 5 // true
  * ```
+ *
+ * @example React
+ * ```tsx twoslash title="page.tsx"
+ * 'use client'
+ *
+ * import { createSessionStorageValue } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ * import * as z from 'zod'
+ *
+ * export default function Page() {
+ *   const { value: count } = useSubscription(() => createSessionStorageValue({
+ *     key: 'count',
+ *     defaultValue: 0,
+ *     schema: z.number(),
+ *   }))
+ *
+ *   return (
+ *     <div>
+ *       <span>{count}</span>
+ *     </div>
+ *   )
+ * }
+ * ```
  */
-export declare function sessionStorageValue<Storage extends SessionStorage<any>, K extends keyof Storage['~types']['output']>(options: SessionStorageValueOptionsWithStorage<Storage, K>): SessionStorageValue<Storage['~types']['output'][K]>;
-export declare function sessionStorageValue<S extends StandardSchemaV1<unknown>>(options: SessionStorageValueOptionsWithSchema<S>): SessionStorageValue<StandardSchemaV1.InferOutput<S>>;
+export declare function createSessionStorageValue<Storage extends SessionStorage<any>, K extends keyof Storage['~']['output']>(options: SessionStorageValueOptionsWithStorage<Storage, K>): SessionStorageValue<Storage['~']['output'][K]>;
+export declare function createSessionStorageValue<S extends StandardSchemaV1<unknown>>(options: SessionStorageValueOptionsWithSchema<S>): SessionStorageValue<StandardSchemaV1.InferOutput<S>>;

package/dist/web/session-storage.d.ts

@@ -1,50 +1,11 @@
-import type { StandardSchemaV1 } from '@standard-schema/spec';
-import type { Readable, Subscribable, Writable } from '../core/index';
-import type { Simplify } from '../utils';
-type Output<S extends Record<string, StandardSchemaV1>> = Simplify<{
-    [K in keyof S]: StandardSchemaV1.InferOutput<S[K]>;
-}>;
-export interface SessionStorage<O extends Record<string, unknown>> extends Subscribable<O>, Readable<O>, Writable<Partial<O>, O> {
-    clear: () => void;
-    defaultValues: Readonly<O>;
-}
-export interface SessionStorageOptions<S extends Record<string, StandardSchemaV1>> {
-    /**
-     * Schemas for each session storage key (one validator per key).
-     * Use this when each key has its own type; for a single compound schema use a wrapper with one key.
-     *
-     * @example
-     * ```ts
-     * const sessionStorage = createSessionStorage({
-     *   schemas: {
-     *     token: z.string().nullable(),
-     *     preferences: z.object({ theme: z.enum(['light', 'dark']) }),
-     *   },
-     *   defaultValues: { token: null, preferences: { theme: 'light' } },
-     * })
-     * ```
-     */
-    schemas: S;
-    /**
-     * The default values to use for the session storage.
-     *
-     * @example
-     * ```ts
-     * const sessionStorage = createSessionStorage({
-     *   defaultValues: {
-     *     token: null,
-     *     preferences: { theme: 'light' },
-     *   },
-     * })
-     * ```
-     */
-    defaultValues: Output<S>;
-}
+import type { SchemaStoreOutput, SchemaStoreSchema } from '../core/index';
+import type { WebStorage as SessionStorage, WebStorageOptions as SessionStorageOptions } from './web-storage';
+export type { SessionStorage, SessionStorageOptions };
 /**
  * Creates a reactive handle for a sessionStorage instance.
  *
- * @example
- * ```ts twoslash
+ * @example Vanilla
+ * ```ts twoslash title="session-storage.ts"
  * import { createSessionStorage } from 'seitu/web'
  * import * as z from 'zod'
  *
@@ -56,20 +17,34 @@ export interface SessionStorageOptions<S extends Record<string, StandardSchemaV1
  *   defaultValues: { token: null, preferences: { theme: 'light' } },
  * })
  *
- * sessionStorage.get().token // null
- * sessionStorage.get().preferences // { theme: 'light' }
- * sessionStorage.set({ token: '123', preferences: { theme: 'dark' } })
- * sessionStorage.get().token // '123'
- * sessionStorage.get().preferences // { theme: 'dark' }
- * sessionStorage.clear()
- * sessionStorage.get().token // null
- * sessionStorage.get().preferences // { theme: 'light' }
- * sessionStorage.subscribe(value => console.log(value))
- * sessionStorage.set({ token: '456', preferences: { theme: 'light' } })
- * // { token: '456', preferences: { theme: 'light' } }
- * sessionStorage.clear()
- * // { token: null, preferences: { theme: 'light' } }
+ * sessionStorage.get() // { token: null, preferences: { theme: 'light' } }
+ * sessionStorage.set({ token: 'abc' })
+ * sessionStorage.get() // { token: 'abc', preferences: { theme: 'light' } }
+ * sessionStorage.subscribe(console.log)
+ * ```
+ *
+ * @example React
+ * ```tsx twoslash title="page.tsx"
+ * 'use client'
+ *
+ * import { createSessionStorage } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createSessionStorage({
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * export default function Page() {
+ *   const { value } = useSubscription(sessionStorage)
+ *   return (
+ *     <div>
+ *       <span>{value.count}</span>
+ *       <span>{value.name}</span>
+ *     </div>
+ *   )
+ * }
  * ```
  */
-export declare function createSessionStorage<S extends Record<string, StandardSchemaV1>>(options: SessionStorageOptions<S>): SessionStorage<Output<S>>;
-export {};
+export declare function createSessionStorage<S extends SchemaStoreSchema>(options: SessionStorageOptions<S>): SessionStorage<SchemaStoreOutput<S>>;

package/dist/web/web-storage-value.d.ts

@@ -0,0 +1,18 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import type { Readable, Subscribable, Writable } from '../core/index';
+import type { WebStorage } from './web-storage';
+export interface WebStorageValue<V> extends Subscribable<V>, Readable<V>, Writable<V> {
+}
+export interface WebStorageValueOptionsWithStorage<Storage extends WebStorage<any>, K extends keyof Storage['~']['output']> {
+    storage: Storage;
+    key: K;
+}
+export interface WebStorageValueOptionsWithSchema<S extends StandardSchemaV1<unknown>> {
+    schema: S;
+    key: string;
+    defaultValue: StandardSchemaV1.InferOutput<S>;
+}
+export declare function createWebStorageValue<Storage extends WebStorage<any>, K extends keyof Storage['~']['output']>(options: WebStorageValueOptionsWithStorage<Storage, K>): WebStorageValue<Storage['~']['output'][K]>;
+export declare function createWebStorageValue<S extends StandardSchemaV1<unknown>>(options: WebStorageValueOptionsWithSchema<S> & {
+    kind: 'sessionStorage' | 'localStorage';
+}): WebStorageValue<StandardSchemaV1.InferOutput<S>>;

package/dist/web/web-storage-value.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web/web-storage.d.ts

@@ -0,0 +1,11 @@
+import type { SchemaStore, SchemaStoreOptions, SchemaStoreOutput, SchemaStoreSchema } from '../core/index';
+export interface WebStorageOptions<S extends SchemaStoreSchema> extends Omit<SchemaStoreOptions<S>, 'provider'> {
+}
+export interface WebStorage<O extends Record<string, unknown>> extends SchemaStore<O> {
+    '~': {
+        kind: 'sessionStorage' | 'localStorage';
+    } & SchemaStore<O>['~'];
+}
+export declare function createWebStorage<S extends SchemaStoreSchema>(options: WebStorageOptions<S> & {
+    kind: 'sessionStorage' | 'localStorage';
+}): WebStorage<SchemaStoreOutput<S>>;

package/dist/web/web-storage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web.js

@@ -1,87 +1,164 @@
-import { createSubscription as e } from "./core.js";
-function t(e) {
-	try {
-		return JSON.parse(e);
-	} catch {
-		return e;
-	}
+import { n as e, r as t, t as n } from "./core-CuCUF5Aj.js";
+function r(n) {
+	let { kind: r, ...i } = n, a = e({
+		...i,
+		provider: {
+			get: () => {
+				if (typeof window > "u") return i.defaultValues;
+				let e = window[r], n = { ...i.defaultValues };
+				for (let r in n) {
+					let a = t(e.getItem(r)), o = i.schemas[r]["~standard"].validate(a);
+					if (o instanceof Promise) throw TypeError("[createWebSchemaStore] Validation schema should not return a Promise.");
+					o.issues && console.warn(JSON.stringify(o.issues, null, 2), { cause: o.issues }), n[r] = o.issues ? i.defaultValues[r] : o.value;
+				}
+				return n;
+			},
+			set: (e) => {
+				if (typeof window > "u") return;
+				let t = window[r];
+				Object.entries(e).forEach(([e, n]) => {
+					t.setItem(e, typeof n == "string" ? n : JSON.stringify(n));
+				});
+			}
+		}
+	});
+	return typeof window < "u" && window.addEventListener("storage", () => {
+		a["~"].notify();
+	}), {
+		...a,
+		"~": {
+			kind: r,
+			...a["~"]
+		}
+	};
 }
-function n(n) {
-	let { subscribe: r, notify: i } = e(), a = { ...n.defaultValues }, o = () => {
-		let e = { ...a };
-		for (let [r, i] of Object.entries(n.schemas)) {
-			if (typeof window > "u") return a;
-			let n = window.sessionStorage.getItem(r);
-			if (n === null) continue;
-			let o = i["~standard"].validate(t(n));
-			if (o instanceof Promise) throw TypeError("[createSessionStorage] Validation schema should not return a Promise.");
-			e[r] = o.issues ? a[r] : o.value;
+function i(e) {
+	return r({
+		kind: "localStorage",
+		...e
+	});
+}
+function a(e) {
+	let r = "storage" in e ? e.storage["~"].kind : e.kind, i = `${r}Value`;
+	if ("schema" in e && e.defaultValue === void 0) throw Error(`[${i}] Default value is required`);
+	if (e.key === void 0) throw Error(`[${i}] Key is required`);
+	if (!("schema" in e || "storage" in e)) throw Error(`[${i}] Either schema or storage must be provided`);
+	let a = ("schema" in e ? e.defaultValue : e.storage.getDefaultValue(e.key)) ?? null, { subscribe: o, notify: s } = n(), c = () => {
+		if (typeof window > "u") return a;
+		let n = window[r].getItem(e.key);
+		if (n === null) return a;
+		let i = t(n);
+		try {
+			if ("schema" in e) {
+				let t = e.schema["~standard"].validate(i);
+				if (t instanceof Promise) throw TypeError("Validation schema should not return a Promise.");
+				return t.issues ? (console.error(JSON.stringify(t.issues, null, 2), { cause: t.issues }), a) : t.value;
+			} else return i;
+		} catch {
+			return a !== void 0 && typeof a != "string" ? a : i;
 		}
-		return e;
 	};
 	return {
-		get: o,
-		set: (e) => {
-			let t = typeof e == "function" ? e(o()) : e;
-			for (let [e, n] of Object.entries(t)) window.sessionStorage.setItem(e, typeof n == "string" ? n : JSON.stringify(n));
-			i({
-				...o(),
-				...t
-			});
+		get: c,
+		set: (t) => {
+			if (typeof window > "u") return;
+			let n = window[r], i = typeof t == "function" ? t(c()) : t;
+			n.setItem(e.key, typeof i == "string" ? i : JSON.stringify(i)), window.dispatchEvent(new Event("storage")), s();
 		},
-		subscribe: (e) => {
-			let t = r(() => {
-				e(o());
-			});
-			return () => {
-				t();
+		subscribe: (t) => {
+			let n = o(() => t(c())), r = (n) => {
+				n.key === e.key && t(c());
+			};
+			return typeof window < "u" && window.addEventListener("storage", r), () => {
+				n(), typeof window < "u" && window.removeEventListener("storage", r);
 			};
 		},
-		clear: () => {
-			window.sessionStorage.clear(), i({ ...n.defaultValues });
-		},
-		defaultValues: a,
-		"~types": { output: null }
+		"~": {
+			output: null,
+			notify: s
+		}
 	};
 }
-function r(n) {
-	if ("schema" in n && n.defaultValue === void 0) throw Error("[sessionStorageValue] Default value is required");
-	if (n.key === void 0) throw Error("[sessionStorageValue] Key is required");
-	if (!("schema" in n || "storage" in n)) throw Error("[sessionStorageValue] Either schema or storage must be provided");
-	let r = ("schema" in n ? n.defaultValue : n.storage.defaultValues[n.key]) ?? null, { subscribe: i, notify: a } = e(), o = () => {
-		if (typeof window > "u") return r;
-		let e = window.sessionStorage.getItem(n.key);
-		if (e === null) return r;
-		let i = t(e);
+function o(e) {
+	return "storage" in e ? a(e) : a({
+		...e,
+		kind: "localStorage"
+	});
+}
+function s(e) {
+	let { subscribe: t, notify: r } = n(), i = () => {
+		if (typeof window > "u") return e.defaultMatches ?? !1;
 		try {
-			if ("schema" in n) {
-				let e = n.schema["~standard"].validate(i);
-				if (e instanceof Promise) throw TypeError("Validation schema should not return a Promise.");
-				return e.issues ? (console.error(JSON.stringify(e.issues, null, 2), { cause: e.issues }), r) : e.value;
-			} else return n.storage.get()[n.key];
+			return window.matchMedia(e.query).matches;
 		} catch {
-			return r !== void 0 && typeof r != "string" ? r : i;
+			return e.defaultMatches ?? !1;
 		}
 	};
 	return {
-		get: o,
-		set: (e) => {
-			if (typeof window > "u") return;
-			let t = typeof e == "function" ? e(o()) : e;
-			window.sessionStorage.setItem(n.key, typeof t == "string" ? t : JSON.stringify(t)), window.dispatchEvent(new Event("storage")), a(t);
-		},
-		remove: () => {
-			typeof window > "u" || (window.sessionStorage.removeItem(n.key), window.dispatchEvent(new Event("storage")), a(o()));
-		},
-		subscribe: (e) => {
-			let t = i(e), r = (t) => {
-				t.key === n.key && e(o());
+		get: i,
+		subscribe: (n) => {
+			if (typeof window > "u") return n(i()), () => {};
+			let r = t(() => n(i())), a = window.matchMedia(e.query), o = () => n(i());
+			return a.addEventListener("change", o), () => {
+				r(), a.removeEventListener("change", o);
 			};
-			return typeof window < "u" && window.addEventListener("storage", r), () => {
-				t(), typeof window < "u" && window.removeEventListener("storage", r);
+		},
+		"~": {
+			output: null,
+			notify: r
+		}
+	};
+}
+var c = {
+	value: !1,
+	remaining: 0
+};
+function l(e) {
+	let { direction: t = "both", threshold: r = 0 } = e, { subscribe: i, notify: a } = n(), o = () => {
+		let n = e.element, i = (e, t) => ({
+			value: e,
+			remaining: Math.max(0, t)
+		});
+		if (!n) return {
+			top: c,
+			bottom: c,
+			left: c,
+			right: c
+		};
+		let a = n.scrollTop, o = n.scrollHeight - n.scrollTop - n.clientHeight, s = n.scrollLeft, l = n.scrollWidth - n.scrollLeft - n.clientWidth;
+		return {
+			top: t === "horizontal" ? c : i(a > r, a),
+			bottom: t === "horizontal" ? c : i(o <= r, o),
+			left: t === "vertical" ? c : i(s > r, s),
+			right: t === "vertical" ? c : i(l <= r, l)
+		};
+	};
+	return {
+		get: o,
+		subscribe: (t) => {
+			let n = e.element;
+			if (!n) return t(o()), () => {};
+			let r = i(() => t(o())), a = () => t(o());
+			return n.addEventListener("scroll", a, { passive: !0 }), () => {
+				r(), n.removeEventListener("scroll", a);
 			};
 		},
-		"~types": { output: null }
+		"~": {
+			output: null,
+			notify: a
+		}
 	};
 }
-export { n as createSessionStorage, r as sessionStorageValue };
+function u(e) {
+	return r({
+		kind: "sessionStorage",
+		...e
+	});
+}
+function d(e) {
+	return "storage" in e ? a(e) : a({
+		...e,
+		kind: "sessionStorage"
+	});
+}
+export { i as createLocalStorage, o as createLocalStorageValue, u as createSessionStorage, d as createSessionStorageValue, s as mediaQuery, l as scrollState };

package/package.json

@@ -2,7 +2,7 @@
   "name": "seitu",
   "displayName": "Seitu",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "private": false,
   "author": "Valerii Strilets",
   "license": "MIT",