atom.io 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom.io",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Reactive state graph for React, Preact, and vanilla",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,6 +9,8 @@
     "dist",
     "react/dist",
     "react/package.json",
+    "react-devtools/dist",
+    "react-devtools/package.json",
     "src"
   ],
   "exports": {
@@ -25,10 +27,17 @@
       "browser": "./react/dist/index.mjs",
       "import": "./react/dist/index.mjs",
       "require": "./react/dist/index.js"
+    },
+    "./react-devtools/package.json": "./react-devtools/package.json",
+    "./react-devtools": {
+      "types": "./react-devtools/dist/index.d.ts",
+      "browser": "./react-devtools/dist/index.mjs",
+      "import": "./react-devtools/dist/index.mjs",
+      "require": "./react-devtools/dist/index.js"
     }
   },
   "scripts": {
-    "build": "tsup && cd react && tsup",
+    "build": "tsup && (cd react && tsup) && (cd react-devtools && tsup)",
     "lint": "eslint",
     "test": "vitest",
     "test:once": "vitest run"
@@ -46,21 +55,22 @@
     }
   },
   "dependencies": {
-    "fp-ts": "2.14.0",
+    "fp-ts": "2.16.0",
     "hamt_plus": "1.0.2",
-    "rxjs": "7.8.0"
+    "rxjs": "7.8.1"
   },
   "devDependencies": {
     "@testing-library/preact": "3.2.3",
     "@testing-library/react": "14.0.0",
     "@types/mock-fs": "4.13.1",
     "mock-fs": "5.2.0",
-    "preact": "10.13.2",
+    "preact": "10.15.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "6.11.2",
     "tsup": "6.7.0",
     "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.30.1"
+    "vitest": "0.31.1"
   },
   "repository": {
     "type": "git",

package/react/dist/index.d.ts

@@ -1,22 +1,17 @@
-import Preact from 'preact/hooks';
-import React from 'react';
-import { __INTERNAL__, StateToken, ReadonlyValueToken } from 'atom.io';
+import { StateToken, ReadonlySelectorToken, __INTERNAL__ } from 'atom.io';
 
 type Modifier<T> = (thing: T) => T;
 
-type AtomStoreReactConfig = {
-    useState: typeof Preact.useState | typeof React.useState;
-    useEffect: typeof Preact.useEffect | typeof React.useEffect;
-    store?: __INTERNAL__.Store;
-};
-declare const composeStoreHooks: ({ useState, useEffect, store, }: AtomStoreReactConfig) => {
-    useI: <T>(token: StateToken<T>) => (next: T | Modifier<T>) => void;
-    useO: <T_1>(token: ReadonlyValueToken<T_1> | StateToken<T_1>) => T_1;
-    useIO: <T_2>(token: StateToken<T_2>) => [T_2, (next: T_2 | Modifier<T_2>) => void];
-    useStore: {
-        <T_3>(token: StateToken<T_3>): [T_3, (next: T_3 | Modifier<T_3>) => void];
-        <T_4>(token: ReadonlyValueToken<T_4>): T_4;
-    };
+type StoreHooks = {
+    useI: <T>(token: StateToken<T>) => (next: Modifier<T> | T) => void;
+    useO: <T>(token: ReadonlySelectorToken<T> | StateToken<T>) => T;
+    useIO: <T>(token: StateToken<T>) => [T, (next: Modifier<T> | T) => void];
 };
+declare const composeStoreHooks: (store?: __INTERNAL__.Store) => StoreHooks;
+declare const useI: <T>(token: StateToken<T>) => (next: T | Modifier<T>) => void;
+declare const useO: <T>(token: ReadonlySelectorToken<T> | StateToken<T>) => T;
+declare const useIO: <T>(token: StateToken<T>) => [T, (next: T | Modifier<T>) => void];
+declare function useStore<T>(token: StateToken<T>): [T, (next: Modifier<T> | T) => void];
+declare function useStore<T>(token: ReadonlySelectorToken<T>): T;
 
-export { AtomStoreReactConfig, composeStoreHooks };
+export { StoreHooks, composeStoreHooks, useI, useIO, useO, useStore };

package/react/dist/index.js

@@ -19,50 +19,41 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // ../src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  composeStoreHooks: () => composeStoreHooks
+  composeStoreHooks: () => composeStoreHooks,
+  useI: () => useI,
+  useIO: () => useIO,
+  useO: () => useO,
+  useStore: () => useStore
 });
 module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
 var import_atom = require("atom.io");
-var composeStoreHooks = ({
-  useState,
-  useEffect,
-  store = import_atom.__INTERNAL__.IMPLICIT.STORE
-}) => {
-  function useI(token) {
+var composeStoreHooks = (store = import_atom.__INTERNAL__.IMPLICIT.STORE) => {
+  function useI2(token) {
     const updateState = (next) => (0, import_atom.setState)(token, next, store);
     return updateState;
   }
-  function useO(token) {
-    const state = import_atom.__INTERNAL__.withdraw(token, store);
-    const initialValue = import_atom.__INTERNAL__.getState__INTERNAL(state, store);
-    const [current, dispatch] = useState(initialValue);
-    useEffect(() => {
-      const unsubscribe = (0, import_atom.subscribe)(
-        token,
-        ({ newValue, oldValue }) => {
-          if (oldValue !== newValue) {
-            dispatch(newValue);
-          }
-        },
-        store
-      );
-      return unsubscribe;
-    }, []);
-    return current;
+  function useO2(token) {
+    return (0, import_react.useSyncExternalStore)(
+      (observe) => (0, import_atom.subscribe)(token, observe, store),
+      () => (0, import_atom.getState)(token, store)
+    );
   }
-  function useIO(token) {
-    return [useO(token), useI(token)];
+  function useIO2(token) {
+    return [useO2(token), useI2(token)];
   }
-  function useStore(token) {
-    if (token.type === `readonly_selector`) {
-      return useO(token);
-    }
-    return useIO(token);
-  }
-  return { useI, useO, useIO, useStore };
+  return { useI: useI2, useO: useO2, useIO: useIO2 };
 };
+var { useI, useO, useIO } = composeStoreHooks();
+function useStore(token) {
+  return token.type === `readonly_selector` ? useO(token) : useIO(token);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  composeStoreHooks
+  composeStoreHooks,
+  useI,
+  useIO,
+  useO,
+  useStore
 });
 //# sourceMappingURL=index.js.map

package/react/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/index.ts"],"sourcesContent":["import type Preact from \"preact/hooks\"\n\nimport type React from \"react\"\n\nimport { subscribe, setState, __INTERNAL__ } from \"atom.io\"\nimport type { ReadonlyValueToken, StateToken } from \"atom.io\"\n\nimport type { Modifier } from \"~/packages/anvl/src/function\"\n\nexport type AtomStoreReactConfig = {\n  useState: typeof Preact.useState | typeof React.useState\n  useEffect: typeof Preact.useEffect | typeof React.useEffect\n  store?: __INTERNAL__.Store\n}\n\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nexport const composeStoreHooks = ({\n  useState,\n  useEffect,\n  store = __INTERNAL__.IMPLICIT.STORE,\n}: AtomStoreReactConfig) => {\n  function useI<T>(token: StateToken<T>): (next: Modifier<T> | T) => void {\n    const updateState = (next: Modifier<T> | T) => setState(token, next, store)\n    return updateState\n  }\n\n  function useO<T>(token: ReadonlyValueToken<T> | StateToken<T>): T {\n    const state = __INTERNAL__.withdraw(token, store)\n    const initialValue = __INTERNAL__.getState__INTERNAL(state, store)\n    const [current, dispatch] = useState(initialValue)\n    useEffect(() => {\n      const unsubscribe = subscribe(\n        token,\n        ({ newValue, oldValue }) => {\n          if (oldValue !== newValue) {\n            dispatch(newValue)\n          }\n        },\n        store\n      )\n      return unsubscribe\n    }, [])\n\n    return current\n  }\n\n  function useIO<T>(token: StateToken<T>): [T, (next: Modifier<T> | T) => void] {\n    return [useO(token), useI(token)]\n  }\n\n  function useStore<T>(\n    token: StateToken<T>\n  ): [T, (next: Modifier<T> | T) => void]\n  function useStore<T>(token: ReadonlyValueToken<T>): T\n  function useStore<T>(\n    token: ReadonlyValueToken<T> | StateToken<T>\n  ): T | [T, (next: Modifier<T> | T) => void] {\n    if (token.type === `readonly_selector`) {\n      return useO(token)\n    }\n    return useIO(token)\n  }\n  return { useI, useO, useIO, useStore }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAkD;AAY3C,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA,QAAQ,yBAAa,SAAS;AAChC,MAA4B;AAC1B,WAAS,KAAQ,OAAuD;AACtE,UAAM,cAAc,CAAC,aAA0B,sBAAS,OAAO,MAAM,KAAK;AAC1E,WAAO;AAAA,EACT;AAEA,WAAS,KAAQ,OAAiD;AAChE,UAAM,QAAQ,yBAAa,SAAS,OAAO,KAAK;AAChD,UAAM,eAAe,yBAAa,mBAAmB,OAAO,KAAK;AACjE,UAAM,CAAC,SAAS,QAAQ,IAAI,SAAS,YAAY;AACjD,cAAU,MAAM;AACd,YAAM,kBAAc;AAAA,QAClB;AAAA,QACA,CAAC,EAAE,UAAU,SAAS,MAAM;AAC1B,cAAI,aAAa,UAAU;AACzB,qBAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAAC;AAEL,WAAO;AAAA,EACT;AAEA,WAAS,MAAS,OAA4D;AAC5E,WAAO,CAAC,KAAK,KAAK,GAAG,KAAK,KAAK,CAAC;AAAA,EAClC;AAMA,WAAS,SACP,OAC0C;AAC1C,QAAI,MAAM,SAAS,qBAAqB;AACtC,aAAO,KAAK,KAAK;AAAA,IACnB;AACA,WAAO,MAAM,KAAK;AAAA,EACpB;AACA,SAAO,EAAE,MAAM,MAAM,OAAO,SAAS;AACvC;","names":[]}
+{"version":3,"sources":["../../src/react/index.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\"\n\nimport { subscribe, setState, __INTERNAL__, getState } from \"atom.io\"\nimport type { ReadonlySelectorToken, StateToken } from \"atom.io\"\n\nimport type { Modifier } from \"~/packages/anvl/src/function\"\n\nexport type StoreHooks = {\n  useI: <T>(token: StateToken<T>) => (next: Modifier<T> | T) => void\n  useO: <T>(token: ReadonlySelectorToken<T> | StateToken<T>) => T\n  useIO: <T>(token: StateToken<T>) => [T, (next: Modifier<T> | T) => void]\n}\n\nexport const composeStoreHooks = (\n  store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE\n): StoreHooks => {\n  function useI<T>(token: StateToken<T>): (next: Modifier<T> | T) => void {\n    const updateState = (next: Modifier<T> | T) => setState(token, next, store)\n    return updateState\n  }\n\n  function useO<T>(token: ReadonlySelectorToken<T> | StateToken<T>): T {\n    return useSyncExternalStore<T>(\n      (observe) => subscribe(token, observe, store),\n      () => getState(token, store)\n    )\n  }\n\n  function useIO<T>(token: StateToken<T>): [T, (next: Modifier<T> | T) => void] {\n    return [useO(token), useI(token)]\n  }\n\n  return { useI, useO, useIO }\n}\n\nexport const { useI, useO, useIO } = composeStoreHooks()\n\nexport function useStore<T>(\n  token: StateToken<T>\n): [T, (next: Modifier<T> | T) => void]\nexport function useStore<T>(token: ReadonlySelectorToken<T>): T\nexport function useStore<T>(\n  token: ReadonlySelectorToken<T> | StateToken<T>\n): T | [T, (next: Modifier<T> | T) => void] {\n  return token.type === `readonly_selector` ? useO(token) : useIO(token)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAErC,kBAA4D;AAWrD,IAAM,oBAAoB,CAC/B,QAA4B,yBAAa,SAAS,UACnC;AACf,WAASA,MAAQ,OAAuD;AACtE,UAAM,cAAc,CAAC,aAA0B,sBAAS,OAAO,MAAM,KAAK;AAC1E,WAAO;AAAA,EACT;AAEA,WAASC,MAAQ,OAAoD;AACnE,eAAO;AAAA,MACL,CAAC,gBAAY,uBAAU,OAAO,SAAS,KAAK;AAAA,MAC5C,UAAM,sBAAS,OAAO,KAAK;AAAA,IAC7B;AAAA,EACF;AAEA,WAASC,OAAS,OAA4D;AAC5E,WAAO,CAACD,MAAK,KAAK,GAAGD,MAAK,KAAK,CAAC;AAAA,EAClC;AAEA,SAAO,EAAE,MAAAA,OAAM,MAAAC,OAAM,OAAAC,OAAM;AAC7B;AAEO,IAAM,EAAE,MAAM,MAAM,MAAM,IAAI,kBAAkB;AAMhD,SAAS,SACd,OAC0C;AAC1C,SAAO,MAAM,SAAS,sBAAsB,KAAK,KAAK,IAAI,MAAM,KAAK;AACvE;","names":["useI","useO","useIO"]}

package/react/dist/index.mjs

@@ -1,44 +1,31 @@
 // ../src/react/index.ts
-import { subscribe, setState, __INTERNAL__ } from "atom.io";
-var composeStoreHooks = ({
-  useState,
-  useEffect,
-  store = __INTERNAL__.IMPLICIT.STORE
-}) => {
-  function useI(token) {
+import { useSyncExternalStore } from "react";
+import { subscribe, setState, __INTERNAL__, getState } from "atom.io";
+var composeStoreHooks = (store = __INTERNAL__.IMPLICIT.STORE) => {
+  function useI2(token) {
     const updateState = (next) => setState(token, next, store);
     return updateState;
   }
-  function useO(token) {
-    const state = __INTERNAL__.withdraw(token, store);
-    const initialValue = __INTERNAL__.getState__INTERNAL(state, store);
-    const [current, dispatch] = useState(initialValue);
-    useEffect(() => {
-      const unsubscribe = subscribe(
-        token,
-        ({ newValue, oldValue }) => {
-          if (oldValue !== newValue) {
-            dispatch(newValue);
-          }
-        },
-        store
-      );
-      return unsubscribe;
-    }, []);
-    return current;
+  function useO2(token) {
+    return useSyncExternalStore(
+      (observe) => subscribe(token, observe, store),
+      () => getState(token, store)
+    );
   }
-  function useIO(token) {
-    return [useO(token), useI(token)];
+  function useIO2(token) {
+    return [useO2(token), useI2(token)];
   }
-  function useStore(token) {
-    if (token.type === `readonly_selector`) {
-      return useO(token);
-    }
-    return useIO(token);
-  }
-  return { useI, useO, useIO, useStore };
+  return { useI: useI2, useO: useO2, useIO: useIO2 };
 };
+var { useI, useO, useIO } = composeStoreHooks();
+function useStore(token) {
+  return token.type === `readonly_selector` ? useO(token) : useIO(token);
+}
 export {
-  composeStoreHooks
+  composeStoreHooks,
+  useI,
+  useIO,
+  useO,
+  useStore
 };
 //# sourceMappingURL=index.mjs.map

package/react/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/index.ts"],"sourcesContent":["import type Preact from \"preact/hooks\"\n\nimport type React from \"react\"\n\nimport { subscribe, setState, __INTERNAL__ } from \"atom.io\"\nimport type { ReadonlyValueToken, StateToken } from \"atom.io\"\n\nimport type { Modifier } from \"~/packages/anvl/src/function\"\n\nexport type AtomStoreReactConfig = {\n  useState: typeof Preact.useState | typeof React.useState\n  useEffect: typeof Preact.useEffect | typeof React.useEffect\n  store?: __INTERNAL__.Store\n}\n\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nexport const composeStoreHooks = ({\n  useState,\n  useEffect,\n  store = __INTERNAL__.IMPLICIT.STORE,\n}: AtomStoreReactConfig) => {\n  function useI<T>(token: StateToken<T>): (next: Modifier<T> | T) => void {\n    const updateState = (next: Modifier<T> | T) => setState(token, next, store)\n    return updateState\n  }\n\n  function useO<T>(token: ReadonlyValueToken<T> | StateToken<T>): T {\n    const state = __INTERNAL__.withdraw(token, store)\n    const initialValue = __INTERNAL__.getState__INTERNAL(state, store)\n    const [current, dispatch] = useState(initialValue)\n    useEffect(() => {\n      const unsubscribe = subscribe(\n        token,\n        ({ newValue, oldValue }) => {\n          if (oldValue !== newValue) {\n            dispatch(newValue)\n          }\n        },\n        store\n      )\n      return unsubscribe\n    }, [])\n\n    return current\n  }\n\n  function useIO<T>(token: StateToken<T>): [T, (next: Modifier<T> | T) => void] {\n    return [useO(token), useI(token)]\n  }\n\n  function useStore<T>(\n    token: StateToken<T>\n  ): [T, (next: Modifier<T> | T) => void]\n  function useStore<T>(token: ReadonlyValueToken<T>): T\n  function useStore<T>(\n    token: ReadonlyValueToken<T> | StateToken<T>\n  ): T | [T, (next: Modifier<T> | T) => void] {\n    if (token.type === `readonly_selector`) {\n      return useO(token)\n    }\n    return useIO(token)\n  }\n  return { useI, useO, useIO, useStore }\n}\n"],"mappings":";AAIA,SAAS,WAAW,UAAU,oBAAoB;AAY3C,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA,QAAQ,aAAa,SAAS;AAChC,MAA4B;AAC1B,WAAS,KAAQ,OAAuD;AACtE,UAAM,cAAc,CAAC,SAA0B,SAAS,OAAO,MAAM,KAAK;AAC1E,WAAO;AAAA,EACT;AAEA,WAAS,KAAQ,OAAiD;AAChE,UAAM,QAAQ,aAAa,SAAS,OAAO,KAAK;AAChD,UAAM,eAAe,aAAa,mBAAmB,OAAO,KAAK;AACjE,UAAM,CAAC,SAAS,QAAQ,IAAI,SAAS,YAAY;AACjD,cAAU,MAAM;AACd,YAAM,cAAc;AAAA,QAClB;AAAA,QACA,CAAC,EAAE,UAAU,SAAS,MAAM;AAC1B,cAAI,aAAa,UAAU;AACzB,qBAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAAC;AAEL,WAAO;AAAA,EACT;AAEA,WAAS,MAAS,OAA4D;AAC5E,WAAO,CAAC,KAAK,KAAK,GAAG,KAAK,KAAK,CAAC;AAAA,EAClC;AAMA,WAAS,SACP,OAC0C;AAC1C,QAAI,MAAM,SAAS,qBAAqB;AACtC,aAAO,KAAK,KAAK;AAAA,IACnB;AACA,WAAO,MAAM,KAAK;AAAA,EACpB;AACA,SAAO,EAAE,MAAM,MAAM,OAAO,SAAS;AACvC;","names":[]}
+{"version":3,"sources":["../../src/react/index.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\"\n\nimport { subscribe, setState, __INTERNAL__, getState } from \"atom.io\"\nimport type { ReadonlySelectorToken, StateToken } from \"atom.io\"\n\nimport type { Modifier } from \"~/packages/anvl/src/function\"\n\nexport type StoreHooks = {\n  useI: <T>(token: StateToken<T>) => (next: Modifier<T> | T) => void\n  useO: <T>(token: ReadonlySelectorToken<T> | StateToken<T>) => T\n  useIO: <T>(token: StateToken<T>) => [T, (next: Modifier<T> | T) => void]\n}\n\nexport const composeStoreHooks = (\n  store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE\n): StoreHooks => {\n  function useI<T>(token: StateToken<T>): (next: Modifier<T> | T) => void {\n    const updateState = (next: Modifier<T> | T) => setState(token, next, store)\n    return updateState\n  }\n\n  function useO<T>(token: ReadonlySelectorToken<T> | StateToken<T>): T {\n    return useSyncExternalStore<T>(\n      (observe) => subscribe(token, observe, store),\n      () => getState(token, store)\n    )\n  }\n\n  function useIO<T>(token: StateToken<T>): [T, (next: Modifier<T> | T) => void] {\n    return [useO(token), useI(token)]\n  }\n\n  return { useI, useO, useIO }\n}\n\nexport const { useI, useO, useIO } = composeStoreHooks()\n\nexport function useStore<T>(\n  token: StateToken<T>\n): [T, (next: Modifier<T> | T) => void]\nexport function useStore<T>(token: ReadonlySelectorToken<T>): T\nexport function useStore<T>(\n  token: ReadonlySelectorToken<T> | StateToken<T>\n): T | [T, (next: Modifier<T> | T) => void] {\n  return token.type === `readonly_selector` ? useO(token) : useIO(token)\n}\n"],"mappings":";AAAA,SAAS,4BAA4B;AAErC,SAAS,WAAW,UAAU,cAAc,gBAAgB;AAWrD,IAAM,oBAAoB,CAC/B,QAA4B,aAAa,SAAS,UACnC;AACf,WAASA,MAAQ,OAAuD;AACtE,UAAM,cAAc,CAAC,SAA0B,SAAS,OAAO,MAAM,KAAK;AAC1E,WAAO;AAAA,EACT;AAEA,WAASC,MAAQ,OAAoD;AACnE,WAAO;AAAA,MACL,CAAC,YAAY,UAAU,OAAO,SAAS,KAAK;AAAA,MAC5C,MAAM,SAAS,OAAO,KAAK;AAAA,IAC7B;AAAA,EACF;AAEA,WAASC,OAAS,OAA4D;AAC5E,WAAO,CAACD,MAAK,KAAK,GAAGD,MAAK,KAAK,CAAC;AAAA,EAClC;AAEA,SAAO,EAAE,MAAAA,OAAM,MAAAC,OAAM,OAAAC,OAAM;AAC7B;AAEO,IAAM,EAAE,MAAM,MAAM,MAAM,IAAI,kBAAkB;AAMhD,SAAS,SACd,OAC0C;AAC1C,SAAO,MAAM,SAAS,sBAAsB,KAAK,KAAK,IAAI,MAAM,KAAK;AACvE;","names":["useI","useO","useIO"]}

package/react-devtools/dist/index.css

@@ -0,0 +1,26 @@
+/* ../src/react-devtools/devtools.scss */
+main.atom_io_devtools {
+  --fg-color: #eee;
+  --bg-color: #111;
+  @media (prefers-color-scheme: light) {
+    --fg-color: #222;
+    --bg-color: #ccc;
+  }
+  box-sizing: border-box;
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+  border: 2px solid var(--fg-color);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  max-height: 800px;
+  width: 100%;
+  max-width: 460px;
+  overflow-y: scroll;
+  padding: 5px;
+  header { display: flex; justify-content: space-between; h1 { font-size: inherit; margin: 0; } } main { overflow-y: scroll; flex-grow: 1; section { margin-top: 30px; h2 { font-size: inherit; margin: 0; } .node { border: 1px solid var(--fg-color); padding: 5px; margin: 5px; overflow-x: scroll; } } } footer { display: flex; justify-content: flex-end; button { cursor: pointer; background: none; border: none; padding: none; position: absolute; right: 0; bottom: 0; } } .json_editor { input { font-size: 20px; font-family: theia; border: none; border-bottom: 1px solid; background: none; &:disabled { border: none; } } button { background: none; margin-left: auto; color: #777; border: none; font-family: theia; font-size: 14px; margin: none; padding: 4px; padding-bottom: 6px; cursor: pointer; &:hover { color: #333; background-color: #aaa; } } select { font-family: theia; font-size: 14px; background: none; border: none; color: #777; @media (prefers-color-scheme: light) { color: #999; } } .json_editor_unofficial { background-color: #777; button { color: #333; } } .json_editor_missing { background-color: #f055; } .json_editor_key { input { color: #999; @media (prefers-color-scheme: light) { color: #777; } } } .json_editor_object { border-left: 2px solid #333; padding-left: 20px; @media (prefers-color-scheme: light) { border-color: #ccc; } .json_editor_properties { > * { border-bottom: 2px solid #333; margin-bottom: 2px; } } } };
+}
+/*# sourceMappingURL=index.css.map */

package/react-devtools/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react-devtools/devtools.scss"],"sourcesContent":["main.atom_io_devtools {\n  --fg-color: #eee;\n  --bg-color: #111;\n  @media (prefers-color-scheme: light) {\n    --fg-color: #222;\n    --bg-color: #ccc;\n  }\n  box-sizing: border-box;\n  color: var(--fg-color);\n  background-color: var(--bg-color);\n  border: 2px solid var(--fg-color);\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  max-height: 800px;\n  width: 100%;\n  max-width: 460px;\n  overflow-y: scroll;\n  padding: 5px;\n  header {\n    display: flex;\n    justify-content: space-between;\n    h1 {\n      font-size: inherit;\n      margin: 0;\n    }\n  }\n  main {\n    overflow-y: scroll;\n    flex-grow: 1;\n    section {\n      margin-top: 30px;\n      h2 {\n        font-size: inherit;\n        margin: 0;\n      }\n      .node {\n        border: 1px solid var(--fg-color);\n        padding: 5px;\n        margin: 5px;\n        overflow-x: scroll;\n      }\n    }\n  }\n  footer {\n    display: flex;\n    justify-content: flex-end;\n    button {\n      cursor: pointer;\n      background: none;\n      border: none;\n      padding: none;\n      position: absolute;\n      right: 0;\n      bottom: 0;\n    }\n  }\n\n  .json_editor {\n    input {\n      font-size: 20px;\n      font-family: theia;\n      border: none;\n      border-bottom: 1px solid;\n      background: none;\n      &:disabled {\n        border: none;\n      }\n    }\n    button {\n      background: none;\n      margin-left: auto;\n      color: #777;\n      border: none;\n      font-family: theia;\n      font-size: 14px;\n      margin: none;\n      padding: 4px;\n      padding-bottom: 6px;\n      cursor: pointer;\n      &:hover {\n        color: #333;\n        background-color: #aaa;\n      }\n    }\n    select {\n      font-family: theia;\n      font-size: 14px;\n      background: none;\n      border: none;\n      color: #777;\n      @media (prefers-color-scheme: light) {\n        color: #999;\n      }\n    }\n    .json_editor_unofficial {\n      background-color: #777;\n      button {\n        color: #333;\n      }\n    }\n    .json_editor_missing {\n      background-color: #f055;\n    }\n    .json_editor_key {\n      input {\n        color: #999;\n        @media (prefers-color-scheme: light) {\n          color: #777;\n        }\n      }\n    }\n    .json_editor_object {\n      border-left: 2px solid #333;\n      padding-left: 20px;\n      @media (prefers-color-scheme: light) {\n        border-color: #ccc;\n      }\n      .json_editor_properties {\n        > * {\n          border-bottom: 2px solid #333;\n          margin-bottom: 2px;\n        }\n      }\n    }\n  }\n}\n"],"mappings":";AAAA;AACE;AACA;AACA;AACE;AACA;AAAA;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;","names":[]}

package/react-devtools/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { StateToken, ReadonlySelectorToken } from 'atom.io';
+
+type Modifier<T> = (thing: T) => T;
+
+type StoreHooks = {
+    useI: <T>(token: StateToken<T>) => (next: Modifier<T> | T) => void;
+    useO: <T>(token: ReadonlySelectorToken<T> | StateToken<T>) => T;
+    useIO: <T>(token: StateToken<T>) => [T, (next: Modifier<T> | T) => void];
+};
+
+declare const composeDevtools: (storeHooks: StoreHooks) => FC;
+declare const AtomIODevtools: FC;
+
+export { AtomIODevtools, composeDevtools };