Source

// Device storage: small JSON values in localStorage, shared live between components.
import { useSyncExternalStore } from "react";

const listeners = new Map<string, Set<() => void>>();
const cache = new Map<string, unknown>();

export function read<T>(key: string, fallback: T): T {
  if (cache.has(key)) return cache.get(key) as T;
  let value = fallback;
  try {
    const raw = localStorage.getItem(key);
    if (raw != null) value = JSON.parse(raw) as T;
  } catch { /* storage blocked or bad JSON: use the fallback */ }
  cache.set(key, value);
  return value;
}

export function write<T>(key: string, value: T) {
  if (value === undefined) cache.delete(key);
  else cache.set(key, value);
  try {
    if (value === undefined) localStorage.removeItem(key);
    else localStorage.setItem(key, JSON.stringify(value));
  } catch { /* storage full or blocked: keep it for this visit */ }
  listeners.get(key)?.forEach((l) => l());
}

export function useStored<T>(key: string, fallback: T): T {
  return useSyncExternalStore(
    (l) => {
      const set = listeners.get(key) ?? new Set();
      set.add(l);
      listeners.set(key, set);
      return () => set.delete(l);
    },
    () => read(key, fallback),
  );
}

// Another tab changed storage: drop the cached value so the next read sees it.
if (typeof window !== "undefined") {
  window.addEventListener("storage", (e) => {
    if (!e.key) return;
    cache.delete(e.key);
    listeners.get(e.key)?.forEach((l) => l());
  });
}