// sugar: a store slice into render via RxJS
useStorageObservable<S>(storage: IStorageBase<S>): S
useStorageObservable<S, R>(storage: IStorageBase<S>, selector: (state: S) => R): R

// low level: any Observable → value into render
useObservable<T>(
  source: Observable<T> | (() => Observable<T>),
  initialValue: T,
  deps?: DependencyList,
): T

import { useStorageObservable } from 'synapse-storage/react'

// whole state
const state = useStorageObservable(todoStorage)

// a slice — emits only when the slice changes (distinctUntilChanged)
const total = useStorageObservable(todoStorage, (s) => s.todos.length)

import { useObservable } from 'synapse-storage/react'
import { toObservable } from 'synapse-storage/reactive'
import { debounceTime, map } from 'rxjs/operators'

function TodoBadge() {
  // todoStorage is a module-level singleton, stable ref → deps can be omitted
  const label = useObservable(
    () =>
      toObservable(todoStorage, (s) => s.todos.length).pipe(
        debounceTime(200),
        map((count) => `${count} todos`),
      ),
    '0 todos',
  )

  // label is a plain string, render it as is
  return <div className="badge">{label}</div>
}

// store from props + external limit prop used inside pipe → both in deps
const recent = useObservable(
  () =>
    toObservable(store, (s) => s.items).pipe(
      map((items) => items.slice(0, limit)),
    ),
  [],
  [store, limit],
)

import { useStorageSubscribe, useObservable } from 'synapse-storage/react'
import { toObservable } from 'synapse-storage/reactive'
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'

function SearchBox() {
  // 1) live input value — updates on every keystroke
  const query = useStorageSubscribe(searchStorage, (s) => s.query)

  // 2) results — recomputed only after the user idles for 300 ms
  const matches = useObservable<Product[]>(
    () =>
      toObservable(searchStorage, (s) => s.query).pipe(
        map((q) => q.trim().toLowerCase()),
        debounceTime(300),
        distinctUntilChanged(),
        map((q) => (q ? filterProducts(q) : [])),
      ),
    [],
  )

  return (
    <div>
      <input
        value={query}
        placeholder="Search…"
        onChange={(e) =>
          searchStorage.update((s) => {
            s.query = e.target.value
          })
        }
      />
      <ul>
        {matches.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  )
}

import { useSubscription } from 'synapse-storage/react'
import { toObservable } from 'synapse-storage/reactive'
import { bufferTime, filter, map, pairwise } from 'rxjs/operators'

function MessageNotifier() {
  useSubscription(
    () =>
      toObservable(messagesStorage, (s) => s.inbox.length)
        .pipe(
          pairwise(),                                        // [was, now]
          map(([prev, next]) => next - prev),                // how many were added
          filter((added) => added > 0),                      // arrivals only (not removals)
          bufferTime(2000),                                  // collect events for 2 seconds
          filter((batch) => batch.length > 0),               // skip empty windows
          map((batch) => batch.reduce((sum, n) => sum + n, 0)), // total per window
        )
        .subscribe((count) => {
          toast.show(count === 1 ? 'New message' : `${count} new messages`)
        }),
    [],
  )

  return null
}

import { useStorageObservable, useObservable } from 'synapse-storage/react'
import { toObservable } from 'synapse-storage/reactive'
import { map } from 'rxjs/operators'

// --- useStorageObservable: a store slice into render, no operators of your own ---
const total = useStorageObservable(
  // 1. storage — IStorageBase. The stream is memoized by [storage] (no re-subscribe on render).
  todoStorage,
  // 2. selector? — a slice (map + distinctUntilChanged). Without it — the whole state.
  //    Deliberately NOT in deps: re-subscription happens only by storage.
  (s) => s.todos.length,
)

// --- useObservable: any Observable → value into render ---
const label = useObservable(
  // 1. source — an Observable OR a factory () => Observable. A factory is needed for your own
  //    operators (pipe). The hook memoizes the factory itself (see deps below).
  () => toObservable(todoStorage, (s) => s.todos.length).pipe(map((n) => `${n} todos`)),
  // 2. initialValue — what to return before the first emit (the stream emits the initial value
  //    on subscribe, so flicker is usually zero, but the type is required).
  '0 todos',
  // 3. deps? — re-subscription (rebuilds the whole chain). Default: for a factory — []
  //    (built once), for a direct Observable — [source]. Put here everything the factory
  //    closes over that can change (a limit prop, a store from props, …).
  [],
)