seitu 0.2.0 → 0.2.1

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

@@ -50,7 +50,7 @@ export type { LocalStorageValue, LocalStorageValueOptionsWithSchema, LocalStorag
  * import * as z from 'zod'
  *
  * export default function Page() {
- *   const { value: count } = useSubscription(() => createLocalStorageValue({
+ *   const count = useSubscription(() => createLocalStorageValue({
  *     key: 'count',
  *     defaultValue: 0,
  *     schema: z.number(),

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

@@ -37,7 +37,7 @@ export type { LocalStorage, LocalStorageOptions };
  * })
  *
  * export default function Page() {
- *   const { value } = useSubscription(localStorage)
+ *   const value = useSubscription(localStorage)
  *   return (
  *     <div>
  *       <span>{value.count}</span>

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

@@ -56,7 +56,7 @@ export interface MediaQueryOptions<T extends string> {
  *
  * // Usage with some function component
  * function Layout() {
- *   const { value: matches } = useSubscription(isDesktop)
+ *   const matches = useSubscription(isDesktop)
  *   return matches ? 'i am desktop' : 'i am mobile'
  * }
  * ```

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

@@ -15,8 +15,10 @@ export interface ScrollState extends Subscribable<ScrollStateValue>, Readable<Sc
 export interface ScrollStateOptions {
     /**
      * The element to observe scroll position on.
+     * Accepts an element directly, or a getter function for lazy resolution
+     * (useful with React refs that aren't available during render).
      */
-    element: Element | null;
+    element: Element | null | (() => Element | null);
     /**
      * Which scroll axis to track.
      * @default 'both'
@@ -52,33 +54,47 @@ export interface ScrollStateOptions {
  * console.log(state)
  * ```
  *
- * @example React
+ * @example React (with useRef)
  * ```tsx twoslash title="page.tsx"
+ * 'use client'
+ *
+ * import * as React from 'react'
  * 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)
+ *   const ref = React.useRef<HTMLDivElement>(null)
+ *   const state = useSubscription(() => scrollState({
+ *     element: () => ref.current,
+ *     threshold: 10,
+ *   }))
  *
  *   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>
+ *       {state.top.value ? 'at the top' : 'scrolled'}
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @example React (with useState)
+ * ```tsx twoslash title="page.tsx"
+ * 'use client'
+ *
+ * import * as React from 'react'
+ * import { scrollState } from 'seitu/web'
+ * import { useSubscription } from 'seitu/react'
+ *
+ * function Layout() {
+ *   const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
+ *   const state = useSubscription(() => scrollState({
+ *     element: ref,
+ *     threshold: 10,
+ *   }), { deps: [ref] })
+ *
+ *   return (
+ *     <div ref={setRef}>
+ *       {state.top.value ? 'at the top' : 'scrolled'}
  *     </div>
  *   )
  * }

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

@@ -50,7 +50,7 @@ export type { SessionStorageValue, SessionStorageValueOptionsWithSchema, Session
  * import * as z from 'zod'
  *
  * export default function Page() {
- *   const { value: count } = useSubscription(() => createSessionStorageValue({
+ *   const count = useSubscription(() => createSessionStorageValue({
  *     key: 'count',
  *     defaultValue: 0,
  *     schema: z.number(),

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

@@ -37,7 +37,7 @@ export type { SessionStorage, SessionStorageOptions };
  * })
  *
  * export default function Page() {
- *   const { value } = useSubscription(sessionStorage)
+ *   const value = useSubscription(sessionStorage)
  *   return (
  *     <div>
  *       <span>{value.count}</span>

package/dist/web.js

@@ -114,33 +114,33 @@ var c = {
 	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) => ({
+	let { direction: t = "both", threshold: r = 0 } = e, { subscribe: i, notify: a } = n(), o = () => typeof e.element == "function" ? e.element() : e.element, s = () => {
+		let e = o(), n = (e, t) => ({
 			value: e,
 			remaining: Math.max(0, t)
 		});
-		if (!n) return {
+		if (!e) 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;
+		let i = e.scrollTop, a = e.scrollHeight - e.scrollTop - e.clientHeight, s = e.scrollLeft, l = e.scrollWidth - e.scrollLeft - e.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)
+			top: t === "horizontal" ? c : n(i <= r, i),
+			bottom: t === "horizontal" ? c : n(a <= r, a),
+			left: t === "vertical" ? c : n(s <= r, s),
+			right: t === "vertical" ? c : n(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);
+		get: s,
+		subscribe: (e) => {
+			let t = o();
+			if (!t) return e(s()), () => {};
+			let n = i(() => e(s())), r = () => e(s());
+			return t.addEventListener("scroll", r, { passive: !0 }), () => {
+				n(), t.removeEventListener("scroll", r);
 			};
 		},
 		"~": {

package/package.json

@@ -2,7 +2,7 @@
   "name": "seitu",
   "displayName": "Seitu",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "author": "Valerii Strilets",
   "license": "MIT",
@@ -57,13 +57,12 @@
     }
   },
   "dependencies": {
-    "deep-equal": "^2.2.3"
+    "fast-equals": "^6.0.0"
   },
   "devDependencies": {
     "@standard-schema/spec": "^1.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/deep-equal": "^1.0.4",
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^5.1.4",
     "happy-dom": "^20.8.3",