atom.io 0.16.1 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom.io",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "description": "Composable and testable reactive data library.",
   "homepage": "https://atom.io.fyi",
   "sideEffects": false,
@@ -51,31 +51,31 @@
     "@testing-library/react": "14.1.2",
     "@types/http-proxy": "1.17.14",
     "@types/npmlog": "7.0.0",
-    "@types/react": "18.2.47",
+    "@types/react": "18.2.48",
     "@types/tmp": "0.2.6",
-    "@vitest/coverage-v8": "1.2.0",
-    "@vitest/ui": "1.2.0",
+    "@vitest/coverage-v8": "1.2.1",
+    "@vitest/ui": "1.2.1",
     "concurrently": "8.2.2",
-    "drizzle-kit": "0.20.12",
+    "drizzle-kit": "0.20.13",
     "drizzle-orm": "0.29.3",
     "eslint": "8.56.0",
     "framer-motion": "10.18.0",
-    "happy-dom": "13.0.6",
+    "happy-dom": "13.2.0",
     "http-proxy": "1.18.1",
     "npmlog": "7.0.1",
     "postgres": "3.4.3",
     "preact": "10.19.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.21.2",
+    "react-router-dom": "6.21.3",
     "socket.io": "4.7.4",
     "socket.io-client": "4.7.4",
     "tmp": "0.2.1",
     "tsup": "8.0.1",
     "typescript": "5.3.3",
-    "vite": "5.0.11",
-    "vite-tsconfig-paths": "4.2.3",
-    "vitest": "1.2.0"
+    "vite": "5.0.12",
+    "vite-tsconfig-paths": "4.3.1",
+    "vitest": "1.2.1"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/react/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var internal = require('atom.io/internal');
-var React2 = require('react');
+var React5 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var atom_io = require('atom.io');
 
@@ -23,37 +23,43 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 // react/src/store-context.tsx
-var StoreContext = React2__namespace.createContext(internal.IMPLICIT.STORE);
+var StoreContext = React5__namespace.createContext(internal.IMPLICIT.STORE);
 var StoreProvider = ({ children, store = internal.IMPLICIT.STORE }) => /* @__PURE__ */ jsxRuntime.jsx(StoreContext.Provider, { value: store, children });
-function useI(token) {
-  const store = React2__namespace.useContext(StoreContext);
-  const setter = React2__namespace.useRef(null);
+function useI(token, key) {
+  const store = React5__namespace.useContext(StoreContext);
+  const stateToken = token.type === `atom_family` || token.type === `mutable_atom_family` || token.type === `selector_family` ? internal.findInStore(token, key, store) : token;
+  const setter = React5__namespace.useRef(null);
   if (setter.current === null) {
-    setter.current = (next) => atom_io.setState(token, next, store);
+    setter.current = (next) => atom_io.setState(stateToken, next, store);
   }
   return setter.current;
 }
-function useO(token) {
-  const store = React2__namespace.useContext(StoreContext);
-  const id = React2__namespace.useId();
-  return React2__namespace.useSyncExternalStore(
-    (dispatch) => internal.subscribeToState(token, dispatch, `use-o:${id}`, store),
-    () => atom_io.getState(token, store),
-    () => atom_io.getState(token, store)
+function useO(token, key) {
+  const store = React5__namespace.useContext(StoreContext);
+  const stateToken = token.type === `atom_family` || token.type === `mutable_atom_family` || token.type === `selector_family` || token.type === `readonly_selector_family` ? internal.findInStore(token, key, store) : token;
+  const id = React5__namespace.useId();
+  return React5__namespace.useSyncExternalStore(
+    (dispatch) => internal.subscribeToState(stateToken, dispatch, `use-o:${id}`, store),
+    () => atom_io.getState(stateToken, store),
+    () => atom_io.getState(stateToken, store)
   );
 }
-function useJSON(token) {
-  const jsonToken = internal.getJsonToken(token);
+
+// react/src/use-json.ts
+function useJSON(token, key) {
+  const store = React5__namespace.useContext(StoreContext);
+  const stateToken = token.type === `mutable_atom_family` ? internal.findInStore(token, key, store) : token;
+  const jsonToken = internal.getJsonToken(stateToken);
   return useO(jsonToken);
 }
 function useTL(token) {
-  const store = React2__namespace.useContext(StoreContext);
-  const id = React2__namespace.useId();
+  const store = React5__namespace.useContext(StoreContext);
+  const id = React5__namespace.useId();
   const timeline = internal.withdraw(token, store);
-  const tokenRef = React2__namespace.useRef(token);
+  const tokenRef = React5__namespace.useRef(token);
   const rebuildMeta = () => {
     var _a, _b;
     return {
@@ -63,7 +69,7 @@ function useTL(token) {
       redo: () => atom_io.redo(token)
     };
   };
-  const meta = React2__namespace.useRef(rebuildMeta());
+  const meta = React5__namespace.useRef(rebuildMeta());
   const retrieve = () => {
     if (meta.current.at !== (timeline == null ? void 0 : timeline.at) || meta.current.length !== (timeline == null ? void 0 : timeline.history.length) || tokenRef.current !== token) {
       tokenRef.current = token;
@@ -71,7 +77,7 @@ function useTL(token) {
     }
     return meta.current;
   };
-  return React2__namespace.useSyncExternalStore(
+  return React5__namespace.useSyncExternalStore(
     (dispatch) => internal.subscribeToTimeline(token, dispatch, `use-tl:${id}`, store),
     retrieve,
     retrieve

package/react/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/store-context.tsx","../src/store-hooks.ts"],"names":["React"],"mappings":";AACA,SAAS,gBAAgB;AACzB,YAAY,WAAW;AAQtB;AANM,IAAM,eAAqB,oBAAqB,SAAS,KAAK;AAE9D,IAAM,gBAGR,CAAC,EAAE,UAAU,QAAQ,SAAS,MAAM,MACxC,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAAQ,UAAS;;;ACVhD,YAAYA,YAAW;AAEvB,SAAS,UAAU,MAAM,UAAU,YAAY;AAQ/C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAIA,SAAS,KACf,OACyD;AACzD,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,SAEI,cAAO,IAAI;AACrB,MAAI,OAAO,YAAY,MAAM;AAC5B,WAAO,UAAU,CAAC,SAAS,SAAS,OAAO,MAAM,KAAK;AAAA,EACvD;AACA,SAAO,OAAO;AACf;AAEO,SAAS,KAAQ,OAA4B;AACnD,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,KAAW,aAAM;AACvB,SAAa;AAAA,IACZ,CAAC,aAAa,iBAAiB,OAAO,UAAU,SAAS,EAAE,IAAI,KAAK;AAAA,IACpE,MAAM,SAAS,OAAO,KAAK;AAAA,IAC3B,MAAM,SAAS,OAAO,KAAK;AAAA,EAC5B;AACD;AAEO,SAAS,QACf,OACe;AACf,QAAM,YAAY,aAAa,KAAK;AACpC,SAAO,KAAK,SAAS;AACtB;AASO,SAAS,MAAM,OAAyC;AAC9D,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,KAAW,aAAM;AACvB,QAAM,WAAW,SAAS,OAAO,KAAK;AACtC,QAAM,WAAiB,cAAO,KAAK;AACnC,QAAM,cAAc,MAAM;AA7D3B;AA8DE,WAAO;AAAA,MACN,KAAI,0CAAU,OAAV,YAAgB;AAAA,MACpB,SAAQ,0CAAU,QAAQ,WAAlB,YAA4B;AAAA,MACpC,MAAM,MAAM,KAAK,KAAK;AAAA,MACtB,MAAM,MAAM,KAAK,KAAK;AAAA,IACvB;AAAA,EACD;AACA,QAAM,OAAa,cAAqB,YAAY,CAAC;AACrD,QAAM,WAAW,MAAM;AACtB,QACC,KAAK,QAAQ,QAAO,qCAAU,OAC9B,KAAK,QAAQ,YAAW,qCAAU,QAAQ,WAC1C,SAAS,YAAY,OACpB;AACD,eAAS,UAAU;AACnB,WAAK,UAAU,YAAY;AAAA,IAC5B;AACA,WAAO,KAAK;AAAA,EACb;AACA,SAAa;AAAA,IACZ,CAAC,aAAa,oBAAoB,OAAO,UAAU,UAAU,EAAE,IAAI,KAAK;AAAA,IACxE;AAAA,IACA;AAAA,EACD;AACD","sourcesContent":["import type { Store } from \"atom.io/internal\"\nimport { IMPLICIT } from \"atom.io/internal\"\nimport * as React from \"react\"\n\nexport const StoreContext = React.createContext<Store>(IMPLICIT.STORE)\n\nexport const StoreProvider: React.FC<{\n\tchildren: React.ReactNode\n\tstore?: Store\n}> = ({ children, store = IMPLICIT.STORE }) => (\n\t<StoreContext.Provider value={store}>{children}</StoreContext.Provider>\n)\n","import * as React from \"react\"\n\nimport { getState, redo, setState, undo } from \"atom.io\"\nimport type {\n\tMutableAtomToken,\n\tReadableToken,\n\tTimelineToken,\n\tWritableToken,\n} from \"atom.io\"\n\nimport {\n\tgetJsonToken,\n\tsubscribeToState,\n\tsubscribeToTimeline,\n\twithdraw,\n} from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport { StoreContext } from \"./store-context\"\n\nexport function useI<T>(\n\ttoken: WritableToken<T>,\n): <New extends T>(next: New | ((old: T) => New)) => void {\n\tconst store = React.useContext(StoreContext)\n\tconst setter: React.MutableRefObject<\n\t\t(<New extends T>(next: New | ((old: T) => New)) => void) | null\n\t> = React.useRef(null)\n\tif (setter.current === null) {\n\t\tsetter.current = (next) => setState(token, next, store)\n\t}\n\treturn setter.current\n}\n\nexport function useO<T>(token: ReadableToken<T>): T {\n\tconst store = React.useContext(StoreContext)\n\tconst id = React.useId()\n\treturn React.useSyncExternalStore<T>(\n\t\t(dispatch) => subscribeToState(token, dispatch, `use-o:${id}`, store),\n\t\t() => getState(token, store),\n\t\t() => getState(token, store),\n\t)\n}\n\nexport function useJSON<Serializable extends Json.Serializable>(\n\ttoken: MutableAtomToken<any, Serializable>,\n): Serializable {\n\tconst jsonToken = getJsonToken(token)\n\treturn useO(jsonToken)\n}\n\nexport type TimelineMeta = {\n\tat: number\n\tlength: number\n\tundo: () => void\n\tredo: () => void\n}\n\nexport function useTL(token: TimelineToken<any>): TimelineMeta {\n\tconst store = React.useContext(StoreContext)\n\tconst id = React.useId()\n\tconst timeline = withdraw(token, store)\n\tconst tokenRef = React.useRef(token)\n\tconst rebuildMeta = () => {\n\t\treturn {\n\t\t\tat: timeline?.at ?? NaN,\n\t\t\tlength: timeline?.history.length ?? NaN,\n\t\t\tundo: () => undo(token),\n\t\t\tredo: () => redo(token),\n\t\t}\n\t}\n\tconst meta = React.useRef<TimelineMeta>(rebuildMeta())\n\tconst retrieve = () => {\n\t\tif (\n\t\t\tmeta.current.at !== timeline?.at ||\n\t\t\tmeta.current.length !== timeline?.history.length ||\n\t\t\ttokenRef.current !== token\n\t\t) {\n\t\t\ttokenRef.current = token\n\t\t\tmeta.current = rebuildMeta()\n\t\t}\n\t\treturn meta.current\n\t}\n\treturn React.useSyncExternalStore<TimelineMeta>(\n\t\t(dispatch) => subscribeToTimeline(token, dispatch, `use-tl:${id}`, store),\n\t\tretrieve,\n\t\tretrieve,\n\t)\n}\n"]}
+{"version":3,"sources":["../src/store-context.tsx","../src/use-i.ts","../src/use-json.ts","../src/use-o.ts","../src/use-tl.ts"],"names":["React","findInStore"],"mappings":";AACA,SAAS,gBAAgB;AACzB,YAAY,WAAW;AAQtB;AANM,IAAM,eAAqB,oBAAqB,SAAS,KAAK;AAE9D,IAAM,gBAGR,CAAC,EAAE,UAAU,QAAQ,SAAS,MAAM,MACxC,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAAQ,UAAS;;;ACVhD,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAE5B,YAAYA,YAAW;AAahB,SAAS,KACf,OACA,KACyD;AACzD,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,aACL,MAAM,SAAS,iBACf,MAAM,SAAS,yBACf,MAAM,SAAS,oBACZ,YAAY,OAAO,KAAU,KAAK,IAClC;AACJ,QAAM,SAEI,cAAO,IAAI;AACrB,MAAI,OAAO,YAAY,MAAM;AAC5B,WAAO,UAAU,CAAC,SAAS,SAAS,YAAY,MAAM,KAAK;AAAA,EAC5D;AACA,SAAO,OAAO;AACf;;;AC9BA,SAAS,eAAAC,cAAa,oBAAoB;AAE1C,YAAYD,YAAW;;;ACPvB,SAAS,gBAAgB;AAEzB,SAAS,eAAAC,cAAa,wBAAwB;AAE9C,YAAYD,YAAW;AAWhB,SAAS,KACf,OACA,KACI;AACJ,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,aACL,MAAM,SAAS,iBACf,MAAM,SAAS,yBACf,MAAM,SAAS,qBACf,MAAM,SAAS,6BACZC,aAAY,OAAO,KAAU,KAAK,IAClC;AACJ,QAAM,KAAW,aAAM;AACvB,SAAa;AAAA,IACZ,CAAC,aAAa,iBAAiB,YAAY,UAAU,SAAS,EAAE,IAAI,KAAK;AAAA,IACzE,MAAM,SAAS,YAAY,KAAK;AAAA,IAChC,MAAM,SAAS,YAAY,KAAK;AAAA,EACjC;AACD;;;ADZO,SAAS,QAIf,OAGA,KACe;AACf,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,aACL,MAAM,SAAS,wBACZA,aAAY,OAAO,KAAY,KAAK,IACpC;AACJ,QAAM,YAAY,aAAa,UAAU;AACzC,SAAO,KAAK,SAAS;AACtB;;;AErCA,SAAS,MAAM,YAAY;AAE3B,SAAS,qBAAqB,gBAAgB;AAC9C,YAAYD,YAAW;AAWhB,SAAS,MAAM,OAAyC;AAC9D,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,KAAW,aAAM;AACvB,QAAM,WAAW,SAAS,OAAO,KAAK;AACtC,QAAM,WAAiB,cAAO,KAAK;AACnC,QAAM,cAAc,MAAM;AAnB3B;AAoBE,WAAO;AAAA,MACN,KAAI,0CAAU,OAAV,YAAgB;AAAA,MACpB,SAAQ,0CAAU,QAAQ,WAAlB,YAA4B;AAAA,MACpC,MAAM,MAAM,KAAK,KAAK;AAAA,MACtB,MAAM,MAAM,KAAK,KAAK;AAAA,IACvB;AAAA,EACD;AACA,QAAM,OAAa,cAAqB,YAAY,CAAC;AACrD,QAAM,WAAW,MAAM;AACtB,QACC,KAAK,QAAQ,QAAO,qCAAU,OAC9B,KAAK,QAAQ,YAAW,qCAAU,QAAQ,WAC1C,SAAS,YAAY,OACpB;AACD,eAAS,UAAU;AACnB,WAAK,UAAU,YAAY;AAAA,IAC5B;AACA,WAAO,KAAK;AAAA,EACb;AACA,SAAa;AAAA,IACZ,CAAC,aAAa,oBAAoB,OAAO,UAAU,UAAU,EAAE,IAAI,KAAK;AAAA,IACxE;AAAA,IACA;AAAA,EACD;AACD","sourcesContent":["import type { Store } from \"atom.io/internal\"\nimport { IMPLICIT } from \"atom.io/internal\"\nimport * as React from \"react\"\n\nexport const StoreContext = React.createContext<Store>(IMPLICIT.STORE)\n\nexport const StoreProvider: React.FC<{\n\tchildren: React.ReactNode\n\tstore?: Store\n}> = ({ children, store = IMPLICIT.STORE }) => (\n\t<StoreContext.Provider value={store}>{children}</StoreContext.Provider>\n)\n","import { setState } from \"atom.io\"\nimport type { ReadableToken, WritableFamilyToken, WritableToken } from \"atom.io\"\nimport { findInStore } from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\n\nexport function useI<T>(\n\ttoken: WritableToken<T>,\n): <New extends T>(next: New | ((old: T) => New)) => void\n\nexport function useI<T, K extends Json.Serializable>(\n\ttoken: WritableFamilyToken<T, K>,\n\tkey: K,\n): <New extends T>(next: New | ((old: T) => New)) => void\n\nexport function useI<T, K extends Json.Serializable>(\n\ttoken: WritableFamilyToken<T, K> | WritableToken<T>,\n\tkey?: K,\n): <New extends T>(next: New | ((old: T) => New)) => void {\n\tconst store = React.useContext(StoreContext)\n\tconst stateToken: ReadableToken<any> =\n\t\ttoken.type === `atom_family` ||\n\t\ttoken.type === `mutable_atom_family` ||\n\t\ttoken.type === `selector_family`\n\t\t\t? findInStore(token, key as K, store)\n\t\t\t: token\n\tconst setter: React.MutableRefObject<\n\t\t(<New extends T>(next: New | ((old: T) => New)) => void) | null\n\t> = React.useRef(null)\n\tif (setter.current === null) {\n\t\tsetter.current = (next) => setState(stateToken, next, store)\n\t}\n\treturn setter.current\n}\n","import type {\n\tMutableAtomFamilyToken,\n\tMutableAtomToken,\n\tReadableToken,\n} from \"atom.io\"\nimport { findInStore, getJsonToken } from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\nimport { useO } from \"./use-o\"\n\nexport function useJSON<Serializable extends Json.Serializable>(\n\ttoken: MutableAtomToken<any, Serializable>,\n): Serializable\n\nexport function useJSON<\n\tSerializable extends Json.Serializable,\n\tKey extends Serializable,\n>(token: MutableAtomFamilyToken<any, Serializable, Key>, key: Key): Serializable\n\nexport function useJSON<\n\tSerializable extends Json.Serializable,\n\tKey extends Serializable,\n>(\n\ttoken:\n\t\t| MutableAtomFamilyToken<any, Serializable, Key>\n\t\t| MutableAtomToken<any, Serializable>,\n\tkey?: Key,\n): Serializable {\n\tconst store = React.useContext(StoreContext)\n\tconst stateToken: ReadableToken<any> =\n\t\ttoken.type === `mutable_atom_family`\n\t\t\t? findInStore(token, key as Key, store)\n\t\t\t: token\n\tconst jsonToken = getJsonToken(stateToken)\n\treturn useO(jsonToken)\n}\n","import { getState } from \"atom.io\"\nimport type { ReadableFamilyToken, ReadableToken } from \"atom.io\"\nimport { findInStore, subscribeToState } from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\n\nexport function useO<T>(token: ReadableToken<T>): T\n\nexport function useO<T, K extends Json.Serializable>(\n\ttoken: ReadableFamilyToken<T, K>,\n\tkey: K,\n): T\n\nexport function useO<T, K extends Json.Serializable>(\n\ttoken: ReadableFamilyToken<T, K> | ReadableToken<T>,\n\tkey?: K,\n): T {\n\tconst store = React.useContext(StoreContext)\n\tconst stateToken: ReadableToken<any> =\n\t\ttoken.type === `atom_family` ||\n\t\ttoken.type === `mutable_atom_family` ||\n\t\ttoken.type === `selector_family` ||\n\t\ttoken.type === `readonly_selector_family`\n\t\t\t? findInStore(token, key as K, store)\n\t\t\t: token\n\tconst id = React.useId()\n\treturn React.useSyncExternalStore<T>(\n\t\t(dispatch) => subscribeToState(stateToken, dispatch, `use-o:${id}`, store),\n\t\t() => getState(stateToken, store),\n\t\t() => getState(stateToken, store),\n\t)\n}\n","import { redo, undo } from \"atom.io\"\nimport type { TimelineToken } from \"atom.io\"\nimport { subscribeToTimeline, withdraw } from \"atom.io/internal\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\n\nexport type TimelineMeta = {\n\tat: number\n\tlength: number\n\tundo: () => void\n\tredo: () => void\n}\n\nexport function useTL(token: TimelineToken<any>): TimelineMeta {\n\tconst store = React.useContext(StoreContext)\n\tconst id = React.useId()\n\tconst timeline = withdraw(token, store)\n\tconst tokenRef = React.useRef(token)\n\tconst rebuildMeta = () => {\n\t\treturn {\n\t\t\tat: timeline?.at ?? NaN,\n\t\t\tlength: timeline?.history.length ?? NaN,\n\t\t\tundo: () => undo(token),\n\t\t\tredo: () => redo(token),\n\t\t}\n\t}\n\tconst meta = React.useRef<TimelineMeta>(rebuildMeta())\n\tconst retrieve = () => {\n\t\tif (\n\t\t\tmeta.current.at !== timeline?.at ||\n\t\t\tmeta.current.length !== timeline?.history.length ||\n\t\t\ttokenRef.current !== token\n\t\t) {\n\t\t\ttokenRef.current = token\n\t\t\tmeta.current = rebuildMeta()\n\t\t}\n\t\treturn meta.current\n\t}\n\treturn React.useSyncExternalStore<TimelineMeta>(\n\t\t(dispatch) => subscribeToTimeline(token, dispatch, `use-tl:${id}`, store),\n\t\tretrieve,\n\t\tretrieve,\n\t)\n}\n"]}

package/react/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Store } from 'atom.io/internal';
 import * as React from 'react';
-import { WritableToken, ReadableToken, MutableAtomToken, TimelineToken } from 'atom.io';
+import { WritableToken, WritableFamilyToken, MutableAtomToken, MutableAtomFamilyToken, ReadableToken, ReadableFamilyToken, TimelineToken } from 'atom.io';
 import { Json } from 'atom.io/json';
 
 declare const StoreContext: React.Context<Store>;
@@ -10,8 +10,14 @@ declare const StoreProvider: React.FC<{
 }>;
 
 declare function useI<T>(token: WritableToken<T>): <New extends T>(next: New | ((old: T) => New)) => void;
-declare function useO<T>(token: ReadableToken<T>): T;
+declare function useI<T, K extends Json.Serializable>(token: WritableFamilyToken<T, K>, key: K): <New extends T>(next: New | ((old: T) => New)) => void;
+
 declare function useJSON<Serializable extends Json.Serializable>(token: MutableAtomToken<any, Serializable>): Serializable;
+declare function useJSON<Serializable extends Json.Serializable, Key extends Serializable>(token: MutableAtomFamilyToken<any, Serializable, Key>, key: Key): Serializable;
+
+declare function useO<T>(token: ReadableToken<T>): T;
+declare function useO<T, K extends Json.Serializable>(token: ReadableFamilyToken<T, K>, key: K): T;
+
 type TimelineMeta = {
     at: number;
     length: number;

package/react/dist/index.js

@@ -1,37 +1,43 @@
 import '../../dist/chunk-PZLG2HP3.js';
-import { IMPLICIT, subscribeToState, getJsonToken, withdraw, subscribeToTimeline } from 'atom.io/internal';
-import * as React2 from 'react';
+import { IMPLICIT, findInStore, subscribeToState, getJsonToken, withdraw, subscribeToTimeline } from 'atom.io/internal';
+import * as React5 from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { setState, getState, undo, redo } from 'atom.io';
 
-var StoreContext = React2.createContext(IMPLICIT.STORE);
+var StoreContext = React5.createContext(IMPLICIT.STORE);
 var StoreProvider = ({ children, store = IMPLICIT.STORE }) => /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children });
-function useI(token) {
-  const store = React2.useContext(StoreContext);
-  const setter = React2.useRef(null);
+function useI(token, key) {
+  const store = React5.useContext(StoreContext);
+  const stateToken = token.type === `atom_family` || token.type === `mutable_atom_family` || token.type === `selector_family` ? findInStore(token, key, store) : token;
+  const setter = React5.useRef(null);
   if (setter.current === null) {
-    setter.current = (next) => setState(token, next, store);
+    setter.current = (next) => setState(stateToken, next, store);
   }
   return setter.current;
 }
-function useO(token) {
-  const store = React2.useContext(StoreContext);
-  const id = React2.useId();
-  return React2.useSyncExternalStore(
-    (dispatch) => subscribeToState(token, dispatch, `use-o:${id}`, store),
-    () => getState(token, store),
-    () => getState(token, store)
+function useO(token, key) {
+  const store = React5.useContext(StoreContext);
+  const stateToken = token.type === `atom_family` || token.type === `mutable_atom_family` || token.type === `selector_family` || token.type === `readonly_selector_family` ? findInStore(token, key, store) : token;
+  const id = React5.useId();
+  return React5.useSyncExternalStore(
+    (dispatch) => subscribeToState(stateToken, dispatch, `use-o:${id}`, store),
+    () => getState(stateToken, store),
+    () => getState(stateToken, store)
   );
 }
-function useJSON(token) {
-  const jsonToken = getJsonToken(token);
+
+// react/src/use-json.ts
+function useJSON(token, key) {
+  const store = React5.useContext(StoreContext);
+  const stateToken = token.type === `mutable_atom_family` ? findInStore(token, key, store) : token;
+  const jsonToken = getJsonToken(stateToken);
   return useO(jsonToken);
 }
 function useTL(token) {
-  const store = React2.useContext(StoreContext);
-  const id = React2.useId();
+  const store = React5.useContext(StoreContext);
+  const id = React5.useId();
   const timeline = withdraw(token, store);
-  const tokenRef = React2.useRef(token);
+  const tokenRef = React5.useRef(token);
   const rebuildMeta = () => {
     var _a, _b;
     return {
@@ -41,7 +47,7 @@ function useTL(token) {
       redo: () => redo(token)
     };
   };
-  const meta = React2.useRef(rebuildMeta());
+  const meta = React5.useRef(rebuildMeta());
   const retrieve = () => {
     if (meta.current.at !== (timeline == null ? void 0 : timeline.at) || meta.current.length !== (timeline == null ? void 0 : timeline.history.length) || tokenRef.current !== token) {
       tokenRef.current = token;
@@ -49,7 +55,7 @@ function useTL(token) {
     }
     return meta.current;
   };
-  return React2.useSyncExternalStore(
+  return React5.useSyncExternalStore(
     (dispatch) => subscribeToTimeline(token, dispatch, `use-tl:${id}`, store),
     retrieve,
     retrieve

package/react/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/store-context.tsx","../src/store-hooks.ts"],"names":["React"],"mappings":";;;AACA,SAAS,gBAAgB;AACzB,YAAY,WAAW;AAQtB;AANM,IAAM,eAAqB,oBAAqB,SAAS,KAAK;AAE9D,IAAM,gBAGR,CAAC,EAAE,UAAU,QAAQ,SAAS,MAAM,MACxC,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAAQ,UAAS;;;ACVhD,YAAYA,YAAW;AAEvB,SAAS,UAAU,MAAM,UAAU,YAAY;AAQ/C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAIA,SAAS,KACf,OACyD;AACzD,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,SAEI,cAAO,IAAI;AACrB,MAAI,OAAO,YAAY,MAAM;AAC5B,WAAO,UAAU,CAAC,SAAS,SAAS,OAAO,MAAM,KAAK;AAAA,EACvD;AACA,SAAO,OAAO;AACf;AAEO,SAAS,KAAQ,OAA4B;AACnD,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,KAAW,aAAM;AACvB,SAAa;AAAA,IACZ,CAAC,aAAa,iBAAiB,OAAO,UAAU,SAAS,EAAE,IAAI,KAAK;AAAA,IACpE,MAAM,SAAS,OAAO,KAAK;AAAA,IAC3B,MAAM,SAAS,OAAO,KAAK;AAAA,EAC5B;AACD;AAEO,SAAS,QACf,OACe;AACf,QAAM,YAAY,aAAa,KAAK;AACpC,SAAO,KAAK,SAAS;AACtB;AASO,SAAS,MAAM,OAAyC;AAC9D,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,KAAW,aAAM;AACvB,QAAM,WAAW,SAAS,OAAO,KAAK;AACtC,QAAM,WAAiB,cAAO,KAAK;AACnC,QAAM,cAAc,MAAM;AA7D3B;AA8DE,WAAO;AAAA,MACN,KAAI,0CAAU,OAAV,YAAgB;AAAA,MACpB,SAAQ,0CAAU,QAAQ,WAAlB,YAA4B;AAAA,MACpC,MAAM,MAAM,KAAK,KAAK;AAAA,MACtB,MAAM,MAAM,KAAK,KAAK;AAAA,IACvB;AAAA,EACD;AACA,QAAM,OAAa,cAAqB,YAAY,CAAC;AACrD,QAAM,WAAW,MAAM;AACtB,QACC,KAAK,QAAQ,QAAO,qCAAU,OAC9B,KAAK,QAAQ,YAAW,qCAAU,QAAQ,WAC1C,SAAS,YAAY,OACpB;AACD,eAAS,UAAU;AACnB,WAAK,UAAU,YAAY;AAAA,IAC5B;AACA,WAAO,KAAK;AAAA,EACb;AACA,SAAa;AAAA,IACZ,CAAC,aAAa,oBAAoB,OAAO,UAAU,UAAU,EAAE,IAAI,KAAK;AAAA,IACxE;AAAA,IACA;AAAA,EACD;AACD","sourcesContent":["import type { Store } from \"atom.io/internal\"\nimport { IMPLICIT } from \"atom.io/internal\"\nimport * as React from \"react\"\n\nexport const StoreContext = React.createContext<Store>(IMPLICIT.STORE)\n\nexport const StoreProvider: React.FC<{\n\tchildren: React.ReactNode\n\tstore?: Store\n}> = ({ children, store = IMPLICIT.STORE }) => (\n\t<StoreContext.Provider value={store}>{children}</StoreContext.Provider>\n)\n","import * as React from \"react\"\n\nimport { getState, redo, setState, undo } from \"atom.io\"\nimport type {\n\tMutableAtomToken,\n\tReadableToken,\n\tTimelineToken,\n\tWritableToken,\n} from \"atom.io\"\n\nimport {\n\tgetJsonToken,\n\tsubscribeToState,\n\tsubscribeToTimeline,\n\twithdraw,\n} from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport { StoreContext } from \"./store-context\"\n\nexport function useI<T>(\n\ttoken: WritableToken<T>,\n): <New extends T>(next: New | ((old: T) => New)) => void {\n\tconst store = React.useContext(StoreContext)\n\tconst setter: React.MutableRefObject<\n\t\t(<New extends T>(next: New | ((old: T) => New)) => void) | null\n\t> = React.useRef(null)\n\tif (setter.current === null) {\n\t\tsetter.current = (next) => setState(token, next, store)\n\t}\n\treturn setter.current\n}\n\nexport function useO<T>(token: ReadableToken<T>): T {\n\tconst store = React.useContext(StoreContext)\n\tconst id = React.useId()\n\treturn React.useSyncExternalStore<T>(\n\t\t(dispatch) => subscribeToState(token, dispatch, `use-o:${id}`, store),\n\t\t() => getState(token, store),\n\t\t() => getState(token, store),\n\t)\n}\n\nexport function useJSON<Serializable extends Json.Serializable>(\n\ttoken: MutableAtomToken<any, Serializable>,\n): Serializable {\n\tconst jsonToken = getJsonToken(token)\n\treturn useO(jsonToken)\n}\n\nexport type TimelineMeta = {\n\tat: number\n\tlength: number\n\tundo: () => void\n\tredo: () => void\n}\n\nexport function useTL(token: TimelineToken<any>): TimelineMeta {\n\tconst store = React.useContext(StoreContext)\n\tconst id = React.useId()\n\tconst timeline = withdraw(token, store)\n\tconst tokenRef = React.useRef(token)\n\tconst rebuildMeta = () => {\n\t\treturn {\n\t\t\tat: timeline?.at ?? NaN,\n\t\t\tlength: timeline?.history.length ?? NaN,\n\t\t\tundo: () => undo(token),\n\t\t\tredo: () => redo(token),\n\t\t}\n\t}\n\tconst meta = React.useRef<TimelineMeta>(rebuildMeta())\n\tconst retrieve = () => {\n\t\tif (\n\t\t\tmeta.current.at !== timeline?.at ||\n\t\t\tmeta.current.length !== timeline?.history.length ||\n\t\t\ttokenRef.current !== token\n\t\t) {\n\t\t\ttokenRef.current = token\n\t\t\tmeta.current = rebuildMeta()\n\t\t}\n\t\treturn meta.current\n\t}\n\treturn React.useSyncExternalStore<TimelineMeta>(\n\t\t(dispatch) => subscribeToTimeline(token, dispatch, `use-tl:${id}`, store),\n\t\tretrieve,\n\t\tretrieve,\n\t)\n}\n"]}
+{"version":3,"sources":["../src/store-context.tsx","../src/use-i.ts","../src/use-json.ts","../src/use-o.ts","../src/use-tl.ts"],"names":["React","findInStore"],"mappings":";;;AACA,SAAS,gBAAgB;AACzB,YAAY,WAAW;AAQtB;AANM,IAAM,eAAqB,oBAAqB,SAAS,KAAK;AAE9D,IAAM,gBAGR,CAAC,EAAE,UAAU,QAAQ,SAAS,MAAM,MACxC,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAAQ,UAAS;;;ACVhD,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAE5B,YAAYA,YAAW;AAahB,SAAS,KACf,OACA,KACyD;AACzD,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,aACL,MAAM,SAAS,iBACf,MAAM,SAAS,yBACf,MAAM,SAAS,oBACZ,YAAY,OAAO,KAAU,KAAK,IAClC;AACJ,QAAM,SAEI,cAAO,IAAI;AACrB,MAAI,OAAO,YAAY,MAAM;AAC5B,WAAO,UAAU,CAAC,SAAS,SAAS,YAAY,MAAM,KAAK;AAAA,EAC5D;AACA,SAAO,OAAO;AACf;;;AC9BA,SAAS,eAAAC,cAAa,oBAAoB;AAE1C,YAAYD,YAAW;;;ACPvB,SAAS,gBAAgB;AAEzB,SAAS,eAAAC,cAAa,wBAAwB;AAE9C,YAAYD,YAAW;AAWhB,SAAS,KACf,OACA,KACI;AACJ,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,aACL,MAAM,SAAS,iBACf,MAAM,SAAS,yBACf,MAAM,SAAS,qBACf,MAAM,SAAS,6BACZC,aAAY,OAAO,KAAU,KAAK,IAClC;AACJ,QAAM,KAAW,aAAM;AACvB,SAAa;AAAA,IACZ,CAAC,aAAa,iBAAiB,YAAY,UAAU,SAAS,EAAE,IAAI,KAAK;AAAA,IACzE,MAAM,SAAS,YAAY,KAAK;AAAA,IAChC,MAAM,SAAS,YAAY,KAAK;AAAA,EACjC;AACD;;;ADZO,SAAS,QAIf,OAGA,KACe;AACf,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,aACL,MAAM,SAAS,wBACZA,aAAY,OAAO,KAAY,KAAK,IACpC;AACJ,QAAM,YAAY,aAAa,UAAU;AACzC,SAAO,KAAK,SAAS;AACtB;;;AErCA,SAAS,MAAM,YAAY;AAE3B,SAAS,qBAAqB,gBAAgB;AAC9C,YAAYD,YAAW;AAWhB,SAAS,MAAM,OAAyC;AAC9D,QAAM,QAAc,kBAAW,YAAY;AAC3C,QAAM,KAAW,aAAM;AACvB,QAAM,WAAW,SAAS,OAAO,KAAK;AACtC,QAAM,WAAiB,cAAO,KAAK;AACnC,QAAM,cAAc,MAAM;AAnB3B;AAoBE,WAAO;AAAA,MACN,KAAI,0CAAU,OAAV,YAAgB;AAAA,MACpB,SAAQ,0CAAU,QAAQ,WAAlB,YAA4B;AAAA,MACpC,MAAM,MAAM,KAAK,KAAK;AAAA,MACtB,MAAM,MAAM,KAAK,KAAK;AAAA,IACvB;AAAA,EACD;AACA,QAAM,OAAa,cAAqB,YAAY,CAAC;AACrD,QAAM,WAAW,MAAM;AACtB,QACC,KAAK,QAAQ,QAAO,qCAAU,OAC9B,KAAK,QAAQ,YAAW,qCAAU,QAAQ,WAC1C,SAAS,YAAY,OACpB;AACD,eAAS,UAAU;AACnB,WAAK,UAAU,YAAY;AAAA,IAC5B;AACA,WAAO,KAAK;AAAA,EACb;AACA,SAAa;AAAA,IACZ,CAAC,aAAa,oBAAoB,OAAO,UAAU,UAAU,EAAE,IAAI,KAAK;AAAA,IACxE;AAAA,IACA;AAAA,EACD;AACD","sourcesContent":["import type { Store } from \"atom.io/internal\"\nimport { IMPLICIT } from \"atom.io/internal\"\nimport * as React from \"react\"\n\nexport const StoreContext = React.createContext<Store>(IMPLICIT.STORE)\n\nexport const StoreProvider: React.FC<{\n\tchildren: React.ReactNode\n\tstore?: Store\n}> = ({ children, store = IMPLICIT.STORE }) => (\n\t<StoreContext.Provider value={store}>{children}</StoreContext.Provider>\n)\n","import { setState } from \"atom.io\"\nimport type { ReadableToken, WritableFamilyToken, WritableToken } from \"atom.io\"\nimport { findInStore } from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\n\nexport function useI<T>(\n\ttoken: WritableToken<T>,\n): <New extends T>(next: New | ((old: T) => New)) => void\n\nexport function useI<T, K extends Json.Serializable>(\n\ttoken: WritableFamilyToken<T, K>,\n\tkey: K,\n): <New extends T>(next: New | ((old: T) => New)) => void\n\nexport function useI<T, K extends Json.Serializable>(\n\ttoken: WritableFamilyToken<T, K> | WritableToken<T>,\n\tkey?: K,\n): <New extends T>(next: New | ((old: T) => New)) => void {\n\tconst store = React.useContext(StoreContext)\n\tconst stateToken: ReadableToken<any> =\n\t\ttoken.type === `atom_family` ||\n\t\ttoken.type === `mutable_atom_family` ||\n\t\ttoken.type === `selector_family`\n\t\t\t? findInStore(token, key as K, store)\n\t\t\t: token\n\tconst setter: React.MutableRefObject<\n\t\t(<New extends T>(next: New | ((old: T) => New)) => void) | null\n\t> = React.useRef(null)\n\tif (setter.current === null) {\n\t\tsetter.current = (next) => setState(stateToken, next, store)\n\t}\n\treturn setter.current\n}\n","import type {\n\tMutableAtomFamilyToken,\n\tMutableAtomToken,\n\tReadableToken,\n} from \"atom.io\"\nimport { findInStore, getJsonToken } from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\nimport { useO } from \"./use-o\"\n\nexport function useJSON<Serializable extends Json.Serializable>(\n\ttoken: MutableAtomToken<any, Serializable>,\n): Serializable\n\nexport function useJSON<\n\tSerializable extends Json.Serializable,\n\tKey extends Serializable,\n>(token: MutableAtomFamilyToken<any, Serializable, Key>, key: Key): Serializable\n\nexport function useJSON<\n\tSerializable extends Json.Serializable,\n\tKey extends Serializable,\n>(\n\ttoken:\n\t\t| MutableAtomFamilyToken<any, Serializable, Key>\n\t\t| MutableAtomToken<any, Serializable>,\n\tkey?: Key,\n): Serializable {\n\tconst store = React.useContext(StoreContext)\n\tconst stateToken: ReadableToken<any> =\n\t\ttoken.type === `mutable_atom_family`\n\t\t\t? findInStore(token, key as Key, store)\n\t\t\t: token\n\tconst jsonToken = getJsonToken(stateToken)\n\treturn useO(jsonToken)\n}\n","import { getState } from \"atom.io\"\nimport type { ReadableFamilyToken, ReadableToken } from \"atom.io\"\nimport { findInStore, subscribeToState } from \"atom.io/internal\"\nimport type { Json } from \"atom.io/json\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\n\nexport function useO<T>(token: ReadableToken<T>): T\n\nexport function useO<T, K extends Json.Serializable>(\n\ttoken: ReadableFamilyToken<T, K>,\n\tkey: K,\n): T\n\nexport function useO<T, K extends Json.Serializable>(\n\ttoken: ReadableFamilyToken<T, K> | ReadableToken<T>,\n\tkey?: K,\n): T {\n\tconst store = React.useContext(StoreContext)\n\tconst stateToken: ReadableToken<any> =\n\t\ttoken.type === `atom_family` ||\n\t\ttoken.type === `mutable_atom_family` ||\n\t\ttoken.type === `selector_family` ||\n\t\ttoken.type === `readonly_selector_family`\n\t\t\t? findInStore(token, key as K, store)\n\t\t\t: token\n\tconst id = React.useId()\n\treturn React.useSyncExternalStore<T>(\n\t\t(dispatch) => subscribeToState(stateToken, dispatch, `use-o:${id}`, store),\n\t\t() => getState(stateToken, store),\n\t\t() => getState(stateToken, store),\n\t)\n}\n","import { redo, undo } from \"atom.io\"\nimport type { TimelineToken } from \"atom.io\"\nimport { subscribeToTimeline, withdraw } from \"atom.io/internal\"\nimport * as React from \"react\"\n\nimport { StoreContext } from \"./store-context\"\n\nexport type TimelineMeta = {\n\tat: number\n\tlength: number\n\tundo: () => void\n\tredo: () => void\n}\n\nexport function useTL(token: TimelineToken<any>): TimelineMeta {\n\tconst store = React.useContext(StoreContext)\n\tconst id = React.useId()\n\tconst timeline = withdraw(token, store)\n\tconst tokenRef = React.useRef(token)\n\tconst rebuildMeta = () => {\n\t\treturn {\n\t\t\tat: timeline?.at ?? NaN,\n\t\t\tlength: timeline?.history.length ?? NaN,\n\t\t\tundo: () => undo(token),\n\t\t\tredo: () => redo(token),\n\t\t}\n\t}\n\tconst meta = React.useRef<TimelineMeta>(rebuildMeta())\n\tconst retrieve = () => {\n\t\tif (\n\t\t\tmeta.current.at !== timeline?.at ||\n\t\t\tmeta.current.length !== timeline?.history.length ||\n\t\t\ttokenRef.current !== token\n\t\t) {\n\t\t\ttokenRef.current = token\n\t\t\tmeta.current = rebuildMeta()\n\t\t}\n\t\treturn meta.current\n\t}\n\treturn React.useSyncExternalStore<TimelineMeta>(\n\t\t(dispatch) => subscribeToTimeline(token, dispatch, `use-tl:${id}`, store),\n\t\tretrieve,\n\t\tretrieve,\n\t)\n}\n"]}

package/react/src/index.ts

@@ -1,2 +1,5 @@
 export * from "./store-context"
-export * from "./store-hooks"
+export * from "./use-i"
+export * from "./use-json"
+export * from "./use-o"
+export * from "./use-tl"

package/react/src/use-i.ts

@@ -0,0 +1,36 @@
+import { setState } from "atom.io"
+import type { ReadableToken, WritableFamilyToken, WritableToken } from "atom.io"
+import { findInStore } from "atom.io/internal"
+import type { Json } from "atom.io/json"
+import * as React from "react"
+
+import { StoreContext } from "./store-context"
+
+export function useI<T>(
+	token: WritableToken<T>,
+): <New extends T>(next: New | ((old: T) => New)) => void
+
+export function useI<T, K extends Json.Serializable>(
+	token: WritableFamilyToken<T, K>,
+	key: K,
+): <New extends T>(next: New | ((old: T) => New)) => void
+
+export function useI<T, K extends Json.Serializable>(
+	token: WritableFamilyToken<T, K> | WritableToken<T>,
+	key?: K,
+): <New extends T>(next: New | ((old: T) => New)) => void {
+	const store = React.useContext(StoreContext)
+	const stateToken: ReadableToken<any> =
+		token.type === `atom_family` ||
+		token.type === `mutable_atom_family` ||
+		token.type === `selector_family`
+			? findInStore(token, key as K, store)
+			: token
+	const setter: React.MutableRefObject<
+		(<New extends T>(next: New | ((old: T) => New)) => void) | null
+	> = React.useRef(null)
+	if (setter.current === null) {
+		setter.current = (next) => setState(stateToken, next, store)
+	}
+	return setter.current
+}

package/react/src/use-json.ts

@@ -0,0 +1,38 @@
+import type {
+	MutableAtomFamilyToken,
+	MutableAtomToken,
+	ReadableToken,
+} from "atom.io"
+import { findInStore, getJsonToken } from "atom.io/internal"
+import type { Json } from "atom.io/json"
+import * as React from "react"
+
+import { StoreContext } from "./store-context"
+import { useO } from "./use-o"
+
+export function useJSON<Serializable extends Json.Serializable>(
+	token: MutableAtomToken<any, Serializable>,
+): Serializable
+
+export function useJSON<
+	Serializable extends Json.Serializable,
+	Key extends Serializable,
+>(token: MutableAtomFamilyToken<any, Serializable, Key>, key: Key): Serializable
+
+export function useJSON<
+	Serializable extends Json.Serializable,
+	Key extends Serializable,
+>(
+	token:
+		| MutableAtomFamilyToken<any, Serializable, Key>
+		| MutableAtomToken<any, Serializable>,
+	key?: Key,
+): Serializable {
+	const store = React.useContext(StoreContext)
+	const stateToken: ReadableToken<any> =
+		token.type === `mutable_atom_family`
+			? findInStore(token, key as Key, store)
+			: token
+	const jsonToken = getJsonToken(stateToken)
+	return useO(jsonToken)
+}

package/react/src/use-o.ts

@@ -0,0 +1,34 @@
+import { getState } from "atom.io"
+import type { ReadableFamilyToken, ReadableToken } from "atom.io"
+import { findInStore, subscribeToState } from "atom.io/internal"
+import type { Json } from "atom.io/json"
+import * as React from "react"
+
+import { StoreContext } from "./store-context"
+
+export function useO<T>(token: ReadableToken<T>): T
+
+export function useO<T, K extends Json.Serializable>(
+	token: ReadableFamilyToken<T, K>,
+	key: K,
+): T
+
+export function useO<T, K extends Json.Serializable>(
+	token: ReadableFamilyToken<T, K> | ReadableToken<T>,
+	key?: K,
+): T {
+	const store = React.useContext(StoreContext)
+	const stateToken: ReadableToken<any> =
+		token.type === `atom_family` ||
+		token.type === `mutable_atom_family` ||
+		token.type === `selector_family` ||
+		token.type === `readonly_selector_family`
+			? findInStore(token, key as K, store)
+			: token
+	const id = React.useId()
+	return React.useSyncExternalStore<T>(
+		(dispatch) => subscribeToState(stateToken, dispatch, `use-o:${id}`, store),
+		() => getState(stateToken, store),
+		() => getState(stateToken, store),
+	)
+}

package/react/src/use-tl.ts

@@ -0,0 +1,45 @@
+import { redo, undo } from "atom.io"
+import type { TimelineToken } from "atom.io"
+import { subscribeToTimeline, withdraw } from "atom.io/internal"
+import * as React from "react"
+
+import { StoreContext } from "./store-context"
+
+export type TimelineMeta = {
+	at: number
+	length: number
+	undo: () => void
+	redo: () => void
+}
+
+export function useTL(token: TimelineToken<any>): TimelineMeta {
+	const store = React.useContext(StoreContext)
+	const id = React.useId()
+	const timeline = withdraw(token, store)
+	const tokenRef = React.useRef(token)
+	const rebuildMeta = () => {
+		return {
+			at: timeline?.at ?? NaN,
+			length: timeline?.history.length ?? NaN,
+			undo: () => undo(token),
+			redo: () => redo(token),
+		}
+	}
+	const meta = React.useRef<TimelineMeta>(rebuildMeta())
+	const retrieve = () => {
+		if (
+			meta.current.at !== timeline?.at ||
+			meta.current.length !== timeline?.history.length ||
+			tokenRef.current !== token
+		) {
+			tokenRef.current = token
+			meta.current = rebuildMeta()
+		}
+		return meta.current
+	}
+	return React.useSyncExternalStore<TimelineMeta>(
+		(dispatch) => subscribeToTimeline(token, dispatch, `use-tl:${id}`, store),
+		retrieve,
+		retrieve,
+	)
+}