atom.io 0.6.4 → 0.6.6

package/react-devtools/dist/index.mjs

@@ -19,28 +19,18 @@ var __spreadValues = (a2, b2) => {
 var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 var __restKey = (key) => typeof key === "symbol" ? key : key + "";
 var __objRest = (source, exclude) => {
-  var target = {};
+  var target2 = {};
   for (var prop in source)
     if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
+      target2[prop] = source[prop];
   if (source != null && __getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(source)) {
       if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
+        target2[prop] = source[prop];
     }
-  return target;
+  return target2;
 };
 
-// ../src/react-devtools/AtomIODevtools.tsx
-import { atom, __INTERNAL__ } from "atom.io";
-import { useI, useO, useIO } from "atom.io/react";
-import { LayoutGroup, motion, spring } from "framer-motion";
-import { useRef as useRef4 } from "react";
-
-// ../src/react-devtools/TokenList.tsx
-import { getState } from "atom.io";
-import { Fragment as Fragment3 } from "react";
-
 // ../../anvl/src/object/index.ts
 import { pipe as pipe3 } from "fp-ts/function";
 
@@ -59,11 +49,24 @@ var entriesToRecord = (entries) => Object.fromEntries(entries);
 // ../../anvl/src/object/mapObject.ts
 import { pipe } from "fp-ts/function";
 
+// ../../anvl/src/array/venn.ts
+var includesAll = (items) => (array) => {
+  for (const item of items) {
+    if (!array.includes(item))
+      return false;
+  }
+  return true;
+};
+var comprises = (items) => (array) => includesAll(items)(array) && includesAll(array)(items);
+
 // ../../anvl/src/array/index.ts
 var isArray = (isType) => (input) => Array.isArray(input) && input.every((item) => isType(item));
 var map = (f) => (a2) => a2.map(f);
 var every = (f = Boolean) => (a2) => a2.every(f);
 var allTrue = every((x) => x === true);
+var addTo = (a2) => (x) => a2.includes(x) ? a2 : [...a2, x];
+var isEmptyArray = (input) => Array.isArray(input) && input.length === 0;
+var isOneOf = (...args) => (input) => args.includes(input);
 
 // ../../anvl/src/object/mapObject.ts
 var mapObject = (obj, fn) => pipe(
@@ -83,12 +86,11 @@ var pass = (...params) => (fn) => fn(...params);
 var raiseError = (message) => {
   throw new Error(message);
 };
-var attempt = (fn) => {
+var fallback = (fn, fallbackValue) => {
   try {
-    fn();
-    return true;
+    return fn();
   } catch (_) {
-    return false;
+    return fallbackValue;
   }
 };
 
@@ -100,6 +102,7 @@ var ifNullish = (alt) => (input) => input != null ? input : alt;
 // ../../anvl/src/object/refinement.ts
 var isNonNullObject = (input) => typeof input === `object` && input !== null;
 var isPlainObject = (input) => isNonNullObject(input) && Object.getPrototypeOf(input) === Object.prototype;
+var isEmptyObject = (input) => isPlainObject(input) && Object.keys(input).length === 0;
 var isRecord = (isKey, isValue) => (input) => isPlainObject(input) && Object.entries(input).every(([k, v]) => isKey(k) && isValue(v));
 var hasProperties = (isValue, options = { allowExtraProperties: false }) => {
   const name = `{${recordToEntries(
@@ -130,190 +133,1567 @@ var doesExtend = (
   /* alias for hasExactProperties with allowExtraProperties */
   (isValue) => hasProperties(isValue, { allowExtraProperties: true })
 );
+var hasExactProperties = (
+  /* alias for hasProperties without allowExtraProperties */
+  (isValue) => hasProperties(isValue, { allowExtraProperties: false })
+);
+
+// ../../anvl/src/object/sprawl.ts
+var sprawl = (tree, inspector) => {
+  const walk = (path, node) => {
+    const inspect = (path2, node2) => {
+      const result2 = inspector(path2, node2);
+      if (result2)
+        return result2;
+      return null;
+    };
+    const result = inspect(path, node);
+    if ((result == null ? void 0 : result.jobComplete) || (result == null ? void 0 : result.pathComplete)) {
+      return result;
+    }
+    const childEntries = Array.isArray(node) ? node.map((v, i) => [i, v]) : isPlainObject(node) ? Object.entries(node) : [];
+    for (const [k, v] of childEntries) {
+      const subResult = walk([...path, k], v);
+      if (subResult == null ? void 0 : subResult.jobComplete) {
+        return subResult;
+      }
+    }
+    return {};
+  };
+  walk([], tree);
+};
 
 // ../../anvl/src/object/index.ts
+var treeShake = (shouldDiscard = isUndefined) => (obj) => {
+  const newObj = {};
+  const entries = Object.entries(obj);
+  entries.forEach(
+    ([key, val]) => !shouldDiscard(val, key) ? newObj[key] = val : null
+  );
+  return newObj;
+};
 var delve = (obj, path) => {
   const found = path.reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
   return found === void 0 ? new Error(`Not found`) : { found };
 };
 
-// ../../anvl/src/json/index.ts
-import { pipe as pipe4 } from "fp-ts/function";
-
-// ../../anvl/src/json/refine.ts
-import { isBoolean } from "fp-ts/boolean";
-import { isNumber } from "fp-ts/number";
-import { isString } from "fp-ts/string";
-var refineJsonType = (data) => data === null ? { type: `null`, data: null } : isBoolean(data) ? { type: `boolean`, data } : isNumber(data) ? { type: `number`, data } : isString(data) ? { type: `string`, data } : Array.isArray(data) ? { type: `array`, data } : isPlainObject(data) ? { type: `object`, data } : raiseError(
-  data === void 0 ? `undefined passed to refineJsonType. This is not valid JSON.` : `${stringifyJson(data)} with prototype "${Object.getPrototypeOf(data).constructor.name}" passed to refineJsonType. This is not valid JSON.`
-);
-var isJson = (input) => {
-  try {
-    JSON.stringify(input);
-    return true;
-  } catch (e) {
-    return false;
+// ../../anvl/src/refinement/refinery.ts
+var Refinery = class {
+  constructor(supported) {
+    this.supported = supported;
+  }
+  refine(input) {
+    for (const [key, refiner] of Object.entries(this.supported)) {
+      try {
+        if (
+          // @ts-expect-error that's the point
+          refiner(input) === true && refiner !== Boolean
+        ) {
+          return { type: key, data: input };
+        }
+      } catch (e) {
+        try {
+          if (input instanceof refiner) {
+            return { type: key, data: input };
+          }
+        } catch (e2) {
+        }
+      }
+    }
+    return null;
   }
 };
-var isPlainJson = (input) => attempt(() => isJson(input) && refineJsonType(input));
-
-// ../../anvl/src/json/index.ts
-var stringifyJson = (json) => JSON.stringify(json);
-var JSON_TYPE_NAMES = [
-  `array`,
-  `boolean`,
-  `null`,
-  `number`,
-  `object`,
-  `string`
-];
-var JSON_DEFAULTS = {
-  array: [],
-  boolean: false,
-  null: null,
-  number: 0,
-  object: {},
-  string: ``
+var jsonRefinery = new Refinery({
+  number: (input) => typeof input === `number`,
+  string: (input) => typeof input === `string`,
+  boolean: (input) => typeof input === `boolean`,
+  object: isPlainObject,
+  array: (input) => Array.isArray(input),
+  null: (input) => input === null
+});
+var discoverType = (input) => {
+  if (input === void 0) {
+    return `undefined`;
+  }
+  const refined = jsonRefinery.refine(input);
+  if (refined) {
+    return refined.type;
+  }
+  return Object.getPrototypeOf(input).constructor.name;
 };
 
-// ../../hamr/src/react-elastic-input/ElasticInput.tsx
-import {
-  useLayoutEffect,
-  useImperativeHandle,
-  forwardRef,
-  useRef,
-  useState
-} from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
-var ElasticInput = forwardRef(function ElasticInputFC(props, ref) {
-  var _a2, _b, _c, _d;
-  const inputRef = useRef(null);
-  const spanRef = useRef(null);
-  const [inputWidth, setInputWidth] = useState(`auto`);
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      var _a3;
-      (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
+// ../../anvl/src/tree/differ.ts
+function diffNumber(a2, b2) {
+  const sign = a2 < b2 ? `+` : `-`;
+  return {
+    summary: `${sign}${Math.abs(a2 - b2)} (${a2} \u2192 ${b2})`
+  };
+}
+function diffString(a2, b2) {
+  const sign = a2.length < b2.length ? `+` : `-`;
+  return {
+    summary: `${sign}${Math.abs(a2.length - b2.length)} ("${a2}" \u2192 "${b2}")`
+  };
+}
+function diffBoolean(a2, b2) {
+  return {
+    summary: `${a2} \u2192 ${b2}`
+  };
+}
+function diffObject(a2, b2, recurse) {
+  let summary = ``;
+  const added = [];
+  const removed = [];
+  const changed = [];
+  sprawl(a2, (path, nodeA) => {
+    let key;
+    for (key of path) {
+      const nodeB = b2[key];
+      if (nodeB === void 0) {
+        removed.push([key, JSON.stringify(nodeA)]);
+      } else {
+        const delta = recurse(nodeA, nodeB);
+        if (delta.summary !== `No Change`) {
+          changed.push([key, delta]);
+        }
+      }
     }
-  }));
-  const extraWidth = props.type === `number` ? 15 : 0;
-  useLayoutEffect(() => {
-    if (spanRef.current) {
-      setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
-      const interval = setInterval(() => {
-        if (spanRef.current) {
-          setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
+  });
+  sprawl(b2, (path, nodeB) => {
+    let key;
+    for (key of path) {
+      const nodeA = a2[key];
+      if (nodeA === void 0) {
+        added.push([key, JSON.stringify(nodeB)]);
+      }
+    }
+  });
+  summary = `\uFF5E${changed.length} \uFF0B${added.length} \uFF0D${removed.length}`;
+  return {
+    summary,
+    added,
+    removed,
+    changed
+  };
+}
+function diffArray(a2, b2, recurse) {
+  return diffObject(a2, b2, recurse);
+}
+var Differ = class {
+  constructor(leafRefinery, treeRefinery, diffFunctions) {
+    this.leafRefinery = leafRefinery;
+    this.treeRefinery = treeRefinery;
+    this.leafDiffers = {};
+    this.treeDiffers = {};
+    for (const key of Object.keys(leafRefinery.supported)) {
+      const diffFunction = diffFunctions[key];
+      this.leafDiffers[key] = diffFunction;
+    }
+    for (const key of Object.keys(treeRefinery.supported)) {
+      const diffFunction = diffFunctions[key];
+      this.treeDiffers[key] = diffFunction;
+    }
+  }
+  diff(a2, b2) {
+    var _a2, _b;
+    if (a2 === b2) {
+      return { summary: `No Change` };
+    }
+    try {
+      if (JSON.stringify(a2) === JSON.stringify(b2)) {
+        return { summary: `No Change` };
+      }
+    } catch (thrown) {
+      console.error(`Error stringifying`, a2, b2);
+    }
+    const aRefined = (_a2 = this.leafRefinery.refine(a2)) != null ? _a2 : this.treeRefinery.refine(a2);
+    const bRefined = (_b = this.leafRefinery.refine(b2)) != null ? _b : this.treeRefinery.refine(b2);
+    if (aRefined !== null && bRefined !== null) {
+      if (aRefined.type === bRefined.type) {
+        if (aRefined.type in this.leafDiffers) {
+          const delta = this.leafDiffers[aRefined.type](
+            aRefined.data,
+            bRefined.data
+          );
+          return delta;
         }
-      }, 1e3);
-      return () => clearInterval(interval);
+        if (aRefined.type in this.treeDiffers) {
+          const delta = this.treeDiffers[aRefined.type](
+            aRefined.data,
+            bRefined.data,
+            (x, y) => this.diff(x, y)
+          );
+          return delta;
+        }
+      }
     }
-  }, [(_a2 = inputRef.current) == null ? void 0 : _a2.value, props.value]);
-  return /* @__PURE__ */ jsxDEV("div", { style: { display: `inline-block`, position: `relative` }, children: [
-    /* @__PURE__ */ jsxDEV(
-      "input",
-      __spreadProps(__spreadValues({}, props), {
-        ref: inputRef,
-        style: __spreadValues({
-          padding: 0,
-          borderRadius: 0,
-          border: `none`,
-          fontFamily: `inherit`,
-          fontSize: `inherit`,
-          width: inputWidth
-        }, props.style)
-      }),
-      void 0,
-      false,
-      {
-        fileName: "../../hamr/src/react-elastic-input/ElasticInput.tsx",
-        lineNumber: 45,
-        columnNumber: 4
-      },
-      this
-    ),
-    /* @__PURE__ */ jsxDEV(
-      "span",
-      {
-        ref: spanRef,
-        style: {
-          padding: (_b = props.style) == null ? void 0 : _b.padding,
-          position: `absolute`,
-          visibility: `hidden`,
-          // color: `red`,
-          whiteSpace: `pre`,
-          fontFamily: ((_c = props.style) == null ? void 0 : _c.fontFamily) || `inherit`,
-          fontSize: ((_d = props.style) == null ? void 0 : _d.fontSize) || `inherit`
-        },
-        children: props.value
-      },
-      void 0,
-      false,
-      {
-        fileName: "../../hamr/src/react-elastic-input/ElasticInput.tsx",
-        lineNumber: 58,
-        columnNumber: 4
-      },
-      this
-    )
-  ] }, void 0, true, {
-    fileName: "../../hamr/src/react-elastic-input/ElasticInput.tsx",
-    lineNumber: 44,
-    columnNumber: 3
-  }, this);
-});
+    const typeA = discoverType(a2);
+    const typeB = discoverType(b2);
+    if (typeA === typeB) {
+      return {
+        summary: `${typeA} \u2192 ${typeB}`
+      };
+    }
+    return {
+      summary: `Type change: ${typeA} \u2192 ${typeB}`
+    };
+  }
+};
 
-// ../../hamr/src/react-elastic-input/NumberInput.tsx
-import { pipe as pipe5 } from "fp-ts/function";
-import { useState as useState2, useId, useRef as useRef2 } from "react";
+// ../../anvl/src/string/capitalize.ts
+var capitalize = (str) => str[0].toUpperCase() + str.slice(1);
 
-// ../../anvl/src/number/clamp.ts
-var clampInto = (min, max) => (value) => value < min ? min : value > max ? max : value;
+// ../src/internal/atom-internal.ts
+import HAMT5 from "hamt_plus";
 
-// ../../hamr/src/react-elastic-input/NumberInput.tsx
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-function round(value, decimalPlaces) {
-  if (decimalPlaces === void 0)
-    return value;
-  const factor = Math.pow(10, decimalPlaces);
-  return Math.round(value * factor) / factor;
+// ../src/internal/get.ts
+import HAMT from "hamt_plus";
+var computeSelectorState = (selector) => selector.get();
+function lookup(key, store) {
+  const core = target(store);
+  const type = HAMT.has(key, core.atoms) ? `atom` : HAMT.has(key, core.selectors) ? `selector` : `readonly_selector`;
+  return { key, type };
 }
-var VALID_NON_NUMBERS = [``, `-`, `.`, `-.`];
-var isValidNonNumber = (input) => VALID_NON_NUMBERS.includes(input);
-var VALID_NON_NUMBER_INTERPRETATIONS = {
-  "": null,
-  "-": 0,
-  ".": 0,
-  "-.": 0
+function withdraw(token, store) {
+  var _a2, _b, _c, _d, _e;
+  const core = target(store);
+  return (_e = (_d = (_c = (_b = (_a2 = HAMT.get(token.key, core.atoms)) != null ? _a2 : HAMT.get(token.key, core.selectors)) != null ? _b : HAMT.get(token.key, core.readonlySelectors)) != null ? _c : HAMT.get(token.key, core.transactions)) != null ? _d : HAMT.get(token.key, core.timelines)) != null ? _e : null;
+}
+function deposit(state) {
+  return __spreadValues({
+    key: state.key,
+    type: state.type
+  }, `family` in state && { family: state.family });
+}
+var getState__INTERNAL = (state, store = IMPLICIT.STORE) => {
+  var _a2, _b, _c;
+  if (isValueCached(state.key, store)) {
+    (_a2 = store.config.logger) == null ? void 0 : _a2.info(`>> read "${state.key}"`);
+    return readCachedValue(state.key, store);
+  }
+  if (state.type !== `atom`) {
+    (_b = store.config.logger) == null ? void 0 : _b.info(`-> calc "${state.key}"`);
+    return computeSelectorState(state);
+  }
+  (_c = store.config.logger) == null ? void 0 : _c.error(
+    `Attempted to get atom "${state.key}", which was never initialized in store "${store.config.name}".`
+  );
+  return state.default;
 };
-var isDecimalInProgress = (input) => input === `0` || !isNaN(Number(input)) && input.includes(`.`);
-var textToValue = (input, allowDecimal) => {
-  if (isValidNonNumber(input))
-    return VALID_NON_NUMBER_INTERPRETATIONS[input];
-  return allowDecimal ? parseFloat(input) : Math.round(parseFloat(input));
+
+// ../src/internal/is-default.ts
+var isAtomDefault = (key, store = IMPLICIT.STORE) => {
+  const core = target(store);
+  return core.atomsThatAreDefault.has(key);
 };
-var DEFAULT_NUMBER_CONSTRAINTS = {
-  max: Infinity,
-  min: -Infinity,
-  decimalPlaces: 100,
-  nullable: true
+var markAtomAsDefault = (key, store = IMPLICIT.STORE) => {
+  const core = target(store);
+  core.atomsThatAreDefault = new Set(core.atomsThatAreDefault).add(key);
 };
-var initRefinery = (constraints) => (input) => {
-  if (input === null && constraints.nullable === true) {
-    return null;
-  }
-  const { max, min, decimalPlaces } = __spreadValues(__spreadValues({}, DEFAULT_NUMBER_CONSTRAINTS), constraints);
-  const constrained = pipe5(
-    input != null ? input : 0,
-    clampInto(min, max),
-    (n) => decimalPlaces ? round(n, decimalPlaces) : n
-  );
-  return constrained;
+var markAtomAsNotDefault = (key, store = IMPLICIT.STORE) => {
+  const core = target(store);
+  core.atomsThatAreDefault = new Set(target(store).atomsThatAreDefault);
+  core.atomsThatAreDefault.delete(key);
 };
-var valueToText = (numericValue) => {
-  if (numericValue === null || numericValue === void 0) {
-    return ``;
-  }
-  return numericValue.toString();
+
+// ../src/internal/operation.ts
+import HAMT3 from "hamt_plus";
+
+// ../src/internal/store.ts
+import HAMT2 from "hamt_plus";
+
+// ../../anvl/src/join/core-relation-data.ts
+import { isString } from "fp-ts/string";
+
+// ../../anvl/src/refinement/index.ts
+var canExist = (_) => true;
+var cannotExist = (_) => false;
+var isLiteral = (value) => (input) => input === value;
+var isWithin = (args) => (input) => args.includes(input);
+var couldBe = (isTypeA, logging = false, refinements = [isTypeA]) => {
+  const name = `(${refinements.map((r) => r.name || `anon`).join(` | `)})`;
+  const _ = {
+    [name]: (input) => refinements.some(
+      (refinement) => {
+        var _a2;
+        return logging && console.log(
+          refinements.map((r) => r.name || `anon`).join(` | `),
+          `>`,
+          (_a2 = refinement.name) != null ? _a2 : `anon`,
+          `:`,
+          refinement(input)
+        ), refinement(input);
+      }
+    )
+  };
+  const checkTypes = Object.assign(_[name], {
+    or: (isTypeB) => couldBe(isTypeB, logging, [...refinements, isTypeB])
+  });
+  return checkTypes;
+};
+var isUnion = couldBe(cannotExist);
+var mustBe = (isTypeA, logging = false, refinements = [isTypeA]) => {
+  const name = `(${refinements.map((r) => r.name || `anon`).join(` & `)})`;
+  const _ = {
+    [name]: (input) => refinements.every(
+      (refinement) => (logging && console.log(
+        refinements.map((r) => r.name || `anon`).join(` & `),
+        `>`,
+        refinement.name || `anon`,
+        `:`,
+        refinement(input)
+      ), refinement(input))
+    )
+  };
+  const checkTypes = Object.assign(_[name], {
+    and: (isTypeB) => mustBe(isTypeB, logging, [...refinements, isTypeB])
+  });
+  return checkTypes;
+};
+var isIntersection = mustBe(canExist);
+
+// ../../anvl/src/join/core-relation-data.ts
+var RELATION_TYPES = [`1:1`, `1:n`, `n:n`];
+var isRelationType = (x) => RELATION_TYPES.includes(x);
+var EMPTY_RELATION_DATA = {
+  contents: {},
+  relations: {},
+  relationType: `n:n`,
+  a: `from`,
+  b: `to`
+};
+var isRelationData = ({
+  from: a2 = `from`,
+  to: b2 = `to`,
+  isContent
+} = {}) => (input) => {
+  return hasExactProperties({
+    contents: isContent ? isRecord(isString, isContent) : hasExactProperties({}),
+    relations: isRecord(isString, isArray(isString)),
+    relationType: isRelationType,
+    a: isLiteral(a2),
+    b: isLiteral(b2)
+  })(input);
+};
+
+// ../../anvl/src/join/get-related-ids.ts
+var getRelatedIds = (relationMap, id) => {
+  var _a2;
+  return (_a2 = relationMap.relations[id]) != null ? _a2 : [];
+};
+var getRelatedId = (relationMap, id) => {
+  const relations = getRelatedIds(relationMap, id);
+  if (relations.length > 1) {
+    console.warn(
+      `entry with id ${id} was not expected to have multiple relations`
+    );
+  }
+  return relations[0];
+};
+
+// ../../anvl/src/join/make-json-interface.ts
+var makeJsonInterface = (join, ...params) => {
+  const isContent = params[0];
+  const { a: a2, b: b2 } = join;
+  const options = {
+    from: a2,
+    to: b2,
+    isContent
+  };
+  return {
+    toJson: (join2) => join2.toJSON(),
+    fromJson: (json) => Join.fromJSON(json, options)
+  };
+};
+
+// ../../anvl/src/join/relation-contents.ts
+import { pipe as pipe5 } from "fp-ts/function";
+
+// ../../anvl/src/join/relation-record.ts
+var getRelationEntries = (relationMap, idA) => getRelatedIds(relationMap, idA).map((idB) => [
+  idB,
+  getContent(relationMap, idA, idB)
+]);
+var getRelationRecord = (relationMap, id) => Object.fromEntries(getRelationEntries(relationMap, id));
+
+// ../../anvl/src/join/remove-relation.ts
+import { pipe as pipe4 } from "fp-ts/function";
+import { isString as isString2 } from "fp-ts/string";
+
+// ../../anvl/src/string/split.ts
+var split = (separator) => (str) => str.split(separator);
+
+// ../../anvl/src/join/remove-relation.ts
+var removeSpecific = (current, idA, idB) => {
+  const isIdForRemoval = isOneOf(idA, idB);
+  return __spreadProps(__spreadValues({}, current), {
+    relations: pipe4(
+      current.relations,
+      recordToEntries,
+      map(([id, relations]) => [
+        id,
+        isIdForRemoval(id) ? relations.filter((relation) => !isIdForRemoval(relation)) : relations
+      ]),
+      entriesToRecord,
+      treeShake(isEmptyArray)
+    ),
+    contents: pipe4(
+      current.contents,
+      treeShake(
+        (_, key) => isString2(key) && pipe4(key, split(`/`), comprises([idA, idB]))
+      )
+    )
+  });
+};
+var removeAll = (current, idToRemove) => {
+  const next = __spreadProps(__spreadValues({}, current), {
+    relations: pipe4(
+      current.relations,
+      recordToEntries,
+      map(([id, relations]) => [
+        id,
+        relations.filter((relation) => relation !== idToRemove)
+      ]),
+      entriesToRecord,
+      treeShake((val, key) => key === idToRemove || isEmptyArray(val))
+    ),
+    contents: pipe4(
+      current.contents,
+      treeShake(
+        (_, key) => isString2(key) && key.split(`/`).includes(idToRemove)
+      )
+    )
+  });
+  return next;
+};
+var removeRelation = (current, relation) => {
+  const idA = relation[current.a];
+  const idB = relation[current.b];
+  return idB ? removeSpecific(current, idA, idB) : removeAll(current, idA);
+};
+
+// ../../anvl/src/join/set-relation.ts
+var setManyToMany = (map2, idA, idB, ...rest) => {
+  var _a2, _b;
+  const next = __spreadProps(__spreadValues({}, map2), {
+    relations: __spreadProps(__spreadValues({}, map2.relations), {
+      [idA]: addTo((_a2 = map2.relations[idA]) != null ? _a2 : [])(idB),
+      [idB]: addTo((_b = map2.relations[idB]) != null ? _b : [])(idA)
+    })
+  });
+  const content = rest[0];
+  return content ? setContent(next, idA, idB, content) : next;
+};
+var removeEmpties = treeShake(isEmptyArray);
+var set1ToMany = (current, leaderId, followerId, ...rest) => {
+  var _a2;
+  const relations = __spreadValues({}, current.relations);
+  const prevLeaderId = getRelatedId(current, followerId);
+  const next = __spreadProps(__spreadValues({}, current), {
+    relations: removeEmpties(__spreadProps(__spreadValues(__spreadValues({}, relations), prevLeaderId && prevLeaderId !== leaderId && {
+      [prevLeaderId]: relations[prevLeaderId].filter(
+        (id) => id !== followerId
+      )
+    }), {
+      [followerId]: [leaderId],
+      [leaderId]: addTo((_a2 = relations[leaderId]) != null ? _a2 : [])(followerId)
+    }))
+  });
+  const content = rest[0];
+  return content ? setContent(next, leaderId, followerId, content) : next;
+};
+var set1To1 = (current, wifeId, husbandId, ...rest) => {
+  const prevWifeId = getRelatedId(current, husbandId);
+  const prevHusbandId = getRelatedId(current, wifeId);
+  const next = __spreadProps(__spreadValues({}, current), {
+    relations: removeEmpties(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, current.relations), prevWifeId && { [prevWifeId]: [] }), prevHusbandId && { [prevHusbandId]: [] }), {
+      [wifeId]: [husbandId],
+      [husbandId]: [wifeId]
+    }))
+  });
+  const content = rest[0];
+  return content ? setContent(next, wifeId, husbandId, content) : next;
+};
+var setRelationWithContent = (current, relation, ...rest) => {
+  const { [current.a]: idA, [current.b]: idB } = relation;
+  switch (current.relationType) {
+    case `1:1`:
+      return set1To1(current, idA, idB, ...rest);
+    case `1:n`:
+      return set1ToMany(current, idA, idB, ...rest);
+    case `n:n`:
+      return setManyToMany(current, idA, idB, ...rest);
+  }
+};
+
+// ../../anvl/src/join/relation-contents.ts
+var makeContentId = (idA, idB) => [idA, idB].sort().join(`/`);
+var getContent = (relationMap, idA, idB) => relationMap.contents[makeContentId(idA, idB)];
+var setContent = (map2, idA, idB, content) => __spreadProps(__spreadValues({}, map2), {
+  contents: __spreadProps(__spreadValues({}, map2.contents), {
+    [makeContentId(idA, idB)]: content
+  })
+});
+var getRelations = (relationMap, id) => getRelationEntries(relationMap, id).map(
+  ([id2, content]) => __spreadValues({
+    id: id2
+  }, content)
+);
+var setRelations = (current, subject, relations) => {
+  const idA = subject[current.a];
+  const idB = subject[current.b];
+  return pipe5(
+    current,
+    (relationData) => {
+      const relatedIds = getRelatedIds(current, idA);
+      const removedIds = relatedIds.filter(
+        (id) => !relations.some((r) => r.id === id)
+      );
+      let step = relationData;
+      for (const id of removedIds) {
+        const remove = {
+          [current.a]: idA != null ? idA : id,
+          [current.b]: idB != null ? idB : id
+        };
+        step = removeRelation(step, remove);
+      }
+      return step;
+    },
+    (relationData) => {
+      let step = relationData;
+      for (const _a2 of relations) {
+        const _b = _a2, { id } = _b, rest = __objRest(_b, ["id"]);
+        const content = isEmptyObject(rest) ? void 0 : rest;
+        step = setRelationWithContent(
+          step,
+          { [current.a]: idA != null ? idA : id, [current.b]: idB != null ? idB : id },
+          // @ts-expect-error hacky
+          content
+        );
+      }
+      return step;
+    },
+    (relationData) => {
+      const newlyOrderedIds = relations.map((r) => r.id);
+      return __spreadProps(__spreadValues({}, relationData), {
+        relations: __spreadProps(__spreadValues({}, relationData.relations), {
+          [idA != null ? idA : idB]: newlyOrderedIds
+        })
+      });
+    }
+  );
+};
+
+// ../../anvl/src/join/index.ts
+var Join = class _Join {
+  constructor(json) {
+    this.a = `from`;
+    this.b = `to`;
+    this.makeJsonInterface = (...params) => {
+      return makeJsonInterface(this, ...params);
+    };
+    Object.assign(this, __spreadProps(__spreadValues(__spreadValues({}, EMPTY_RELATION_DATA), json), {
+      makeJsonInterface: this.makeJsonInterface
+    }));
+  }
+  toJSON() {
+    return {
+      relationType: this.relationType,
+      relations: this.relations,
+      contents: this.contents,
+      a: this.a,
+      b: this.b
+    };
+  }
+  static fromJSON(json, options) {
+    const isValid = isRelationData(options)(json);
+    if (isValid) {
+      return new _Join(json);
+    }
+    throw new Error(
+      `Saved JSON for this Join is invalid: ${JSON.stringify(json)}`
+    );
+  }
+  from(newA) {
+    return new _Join(__spreadProps(__spreadValues({}, this), { a: newA }));
+  }
+  to(newB) {
+    return new _Join(__spreadProps(__spreadValues({}, this), { b: newB }));
+  }
+  getRelatedId(id) {
+    return getRelatedId(this, id);
+  }
+  getRelatedIds(id) {
+    return getRelatedIds(this, id);
+  }
+  getContent(idA, idB) {
+    return getContent(this, idA, idB);
+  }
+  getRelationEntries(id) {
+    return getRelationEntries(this, id);
+  }
+  getRelationRecord(id) {
+    return getRelationRecord(this, id);
+  }
+  getRelation(id) {
+    return getRelations(this, id)[0];
+  }
+  getRelations(id) {
+    return getRelations(this, id);
+  }
+  setRelations(subject, relations) {
+    return new _Join(setRelations(this, subject, relations));
+  }
+  set(relation, ...rest) {
+    return new _Join(setRelationWithContent(this, relation, ...rest));
+  }
+  remove(relation) {
+    return new _Join(
+      removeRelation(this, relation)
+    );
+  }
+};
+
+// ../src/internal/store.ts
+var createStore = (name, store = null) => {
+  var _a2;
+  const copiedStore = __spreadProps(__spreadValues({}, store != null ? store : (() => ({
+    atomsThatAreDefault: /* @__PURE__ */ new Set(),
+    selectorAtoms: new Join({ relationType: `n:n` }).from(`selectorKey`).to(`atomKey`),
+    selectorGraph: new Join({ relationType: `n:n` }),
+    valueMap: HAMT2.make()
+  }))()), {
+    atoms: HAMT2.make(),
+    readonlySelectors: HAMT2.make(),
+    selectors: HAMT2.make(),
+    transactions: HAMT2.make(),
+    timelines: HAMT2.make(),
+    timelineAtoms: new Join({ relationType: `1:n` }).from(`timelineKey`).to(`atomKey`),
+    subject: {
+      atomCreation: new Subject(),
+      selectorCreation: new Subject(),
+      transactionCreation: new Subject(),
+      timelineCreation: new Subject(),
+      operationStatus: new Subject()
+    },
+    operation: __spreadValues({
+      open: false
+    }, store == null ? void 0 : store.operation),
+    transactionStatus: __spreadValues({
+      phase: `idle`
+    }, store == null ? void 0 : store.transactionStatus),
+    config: __spreadProps(__spreadValues({
+      logger: __spreadValues(__spreadProps(__spreadValues({}, console), {
+        info: doNothing
+      }), (_a2 = store == null ? void 0 : store.config) == null ? void 0 : _a2.logger),
+      logger__INTERNAL: console
+    }, store == null ? void 0 : store.config), {
+      name
+    })
+  });
+  store == null ? void 0 : store.atoms.forEach((atom2) => {
+    const copiedAtom = __spreadProps(__spreadValues({}, atom2), { subject: new Subject() });
+    copiedStore.atoms = HAMT2.set(atom2.key, copiedAtom, copiedStore.atoms);
+  });
+  store == null ? void 0 : store.readonlySelectors.forEach((selector) => {
+    selector.install(copiedStore);
+  });
+  store == null ? void 0 : store.selectors.forEach((selector) => {
+    selector.install(copiedStore);
+  });
+  store == null ? void 0 : store.transactions.forEach((tx) => {
+    tx.install(copiedStore);
+  });
+  store == null ? void 0 : store.timelines.forEach((timeline) => {
+    timeline.install(copiedStore);
+  });
+  return copiedStore;
+};
+var IMPLICIT = {
+  STORE_INTERNAL: void 0,
+  get STORE() {
+    var _a2;
+    return (_a2 = this.STORE_INTERNAL) != null ? _a2 : this.STORE_INTERNAL = createStore(`DEFAULT`);
+  }
+};
+
+// ../src/internal/operation.ts
+var openOperation = (token, store) => {
+  var _a2, _b;
+  const core = target(store);
+  if (core.operation.open) {
+    (_a2 = store.config.logger) == null ? void 0 : _a2.error(
+      `\u274C failed to setState to "${token.key}" during a setState for "${core.operation.token.key}"`
+    );
+    throw Symbol(`violation`);
+  }
+  core.operation = {
+    open: true,
+    done: /* @__PURE__ */ new Set(),
+    prev: store.valueMap,
+    time: Date.now(),
+    token
+  };
+  (_b = store.config.logger) == null ? void 0 : _b.info(
+    `\u2B55 operation start from "${token.key}" in store "${store.config.name}"`
+  );
+};
+var closeOperation = (store) => {
+  var _a2;
+  const core = target(store);
+  core.operation = { open: false };
+  (_a2 = store.config.logger) == null ? void 0 : _a2.info(`\u{1F534} operation done`);
+  store.subject.operationStatus.next(core.operation);
+};
+var isDone = (key, store = IMPLICIT.STORE) => {
+  var _a2;
+  const core = target(store);
+  if (!core.operation.open) {
+    (_a2 = store.config.logger) == null ? void 0 : _a2.warn(
+      `isDone called outside of an operation. This is probably a bug.`
+    );
+    return true;
+  }
+  return core.operation.done.has(key);
+};
+var markDone = (key, store = IMPLICIT.STORE) => {
+  var _a2;
+  const core = target(store);
+  if (!core.operation.open) {
+    (_a2 = store.config.logger) == null ? void 0 : _a2.warn(
+      `markDone called outside of an operation. This is probably a bug.`
+    );
+    return;
+  }
+  core.operation.done.add(key);
+};
+var recallState = (state, store = IMPLICIT.STORE) => {
+  var _a2;
+  const core = target(store);
+  if (!core.operation.open) {
+    (_a2 = store.config.logger) == null ? void 0 : _a2.warn(
+      `recall called outside of an operation. This is probably a bug.`
+    );
+    return HAMT3.get(state.key, core.valueMap);
+  }
+  return HAMT3.get(state.key, core.operation.prev);
+};
+var cacheValue = (key, value, store = IMPLICIT.STORE) => {
+  const core = target(store);
+  core.valueMap = HAMT3.set(key, value, core.valueMap);
+};
+var evictCachedValue = (key, store = IMPLICIT.STORE) => {
+  const core = target(store);
+  core.valueMap = HAMT3.remove(key, core.valueMap);
+};
+var readCachedValue = (key, store = IMPLICIT.STORE) => HAMT3.get(key, target(store).valueMap);
+var isValueCached = (key, store = IMPLICIT.STORE) => HAMT3.has(key, target(store).valueMap);
+var hasKeyBeenUsed = (key, store = IMPLICIT.STORE) => {
+  const core = target(store);
+  return HAMT3.has(key, core.atoms) || HAMT3.has(key, core.selectors) || HAMT3.has(key, core.readonlySelectors);
+};
+
+// ../src/internal/transaction-internal.ts
+import HAMT4 from "hamt_plus";
+var target = (store = IMPLICIT.STORE) => store.transactionStatus.phase === `building` ? store.transactionStatus.core : store;
+
+// ../src/internal/atom-internal.ts
+function atom__INTERNAL(options, family, store = IMPLICIT.STORE) {
+  var _a2, _b, _c;
+  const core = target(store);
+  if (hasKeyBeenUsed(options.key, store)) {
+    (_b = (_a2 = store.config.logger) == null ? void 0 : _a2.error) == null ? void 0 : _b.call(
+      _a2,
+      `Key "${options.key}" already exists in the store.`
+    );
+    return deposit(core.atoms.get(options.key));
+  }
+  const subject = new Subject();
+  const newAtom = __spreadValues(__spreadProps(__spreadValues({}, options), {
+    subject,
+    type: `atom`
+  }), family && { family });
+  const initialValue = options.default instanceof Function ? options.default() : options.default;
+  core.atoms = HAMT5.set(newAtom.key, newAtom, core.atoms);
+  markAtomAsDefault(options.key, store);
+  cacheValue(options.key, initialValue, store);
+  const token = deposit(newAtom);
+  (_c = options.effects) == null ? void 0 : _c.forEach(
+    (effect) => effect({
+      setSelf: (next) => setState(token, next, store),
+      onSet: (handle) => subscribe(token, handle, store)
+    })
+  );
+  store.subject.atomCreation.next(token);
+  return token;
+}
+
+// ../../anvl/src/json/index.ts
+import { pipe as pipe6 } from "fp-ts/function";
+
+// ../../anvl/src/json/refine.ts
+import { isBoolean } from "fp-ts/boolean";
+import { isNumber } from "fp-ts/number";
+import { isString as isString3 } from "fp-ts/string";
+var JSON_PROTOTYPES = [
+  `Array`,
+  `Boolean`,
+  `Number`,
+  `Object`,
+  `String`
+];
+var refineJsonType = (data) => data === null ? { type: `null`, data: null } : isBoolean(data) ? { type: `boolean`, data } : isNumber(data) ? { type: `number`, data } : isString3(data) ? { type: `string`, data } : Array.isArray(data) ? { type: `array`, data } : isPlainObject(data) ? { type: `object`, data } : raiseError(
+  data === void 0 ? `undefined passed to refineJsonType. This is not valid JSON.` : `${stringifyJson(data)} with prototype "${Object.getPrototypeOf(data).constructor.name}" passed to refineJsonType. This is not valid JSON.`
+);
+var isJson = (input) => {
+  var _a2;
+  if (input === null)
+    return true;
+  if (input === void 0)
+    return false;
+  const prototype = (_a2 = Object.getPrototypeOf(input)) == null ? void 0 : _a2.constructor.name;
+  const isJson2 = JSON_PROTOTYPES.includes(prototype);
+  return isJson2;
+};
+
+// ../../anvl/src/json/index.ts
+var stringifyJson = (json) => JSON.stringify(json);
+var JSON_TYPE_NAMES = [
+  `array`,
+  `boolean`,
+  `null`,
+  `number`,
+  `object`,
+  `string`
+];
+var JSON_DEFAULTS = {
+  array: [],
+  boolean: false,
+  null: null,
+  number: 0,
+  object: {},
+  string: ``
+};
+
+// ../src/internal/families-internal.ts
+function atomFamily__INTERNAL(options, store = IMPLICIT.STORE) {
+  const subject = new Subject();
+  return Object.assign(
+    (key) => {
+      var _a2;
+      const subKey = stringifyJson(key);
+      const family = { key: options.key, subKey };
+      const fullKey = `${options.key}(${subKey})`;
+      const existing = withdraw({ key: fullKey, type: `atom` }, store);
+      const token = existing ? deposit(existing) : atom__INTERNAL(
+        {
+          key: fullKey,
+          default: options.default instanceof Function ? options.default(key) : options.default,
+          effects: (_a2 = options.effects) == null ? void 0 : _a2.call(options, key)
+        },
+        family,
+        store
+      );
+      subject.next(token);
+      return token;
+    },
+    {
+      key: options.key,
+      type: `atom_family`,
+      subject
+    }
+  );
+}
+
+// ../src/internal/selector/lookup-selector-sources.ts
+var lookupSelectorSources = (key, store) => target(store).selectorGraph.getRelations(key).filter(({ source }) => source !== key).map(({ source }) => lookup(source, store));
+
+// ../src/internal/selector/trace-selector-atoms.ts
+var traceSelectorAtoms = (selectorKey, dependency, store) => {
+  const roots = [];
+  const sources = lookupSelectorSources(dependency.key, store);
+  let depth = 0;
+  while (sources.length > 0) {
+    const source = sources.shift();
+    ++depth;
+    if (depth > 999) {
+      throw new Error(
+        `Maximum selector dependency depth exceeded in selector "${selectorKey}".`
+      );
+    }
+    if (source.type !== `atom`) {
+      sources.push(...lookupSelectorSources(source.key, store));
+    } else {
+      roots.push(source);
+    }
+  }
+  return roots;
+};
+var traceAllSelectorAtoms = (selectorKey, store) => {
+  const sources = lookupSelectorSources(selectorKey, store);
+  return sources.flatMap(
+    (source) => source.type === `atom` ? source : traceSelectorAtoms(selectorKey, source, store)
+  );
+};
+
+// ../src/internal/set.ts
+import HAMT6 from "hamt_plus";
+var evictDownStream = (state, store = IMPLICIT.STORE) => {
+  var _a2, _b;
+  const core = target(store);
+  const downstream = core.selectorAtoms.getRelations(state.key);
+  const downstreamKeys = downstream.map(({ id }) => id);
+  (_a2 = store.config.logger) == null ? void 0 : _a2.info(
+    `   || ${downstreamKeys.length} downstream:`,
+    downstreamKeys
+  );
+  if (core.operation.open) {
+    (_b = store.config.logger) == null ? void 0 : _b.info(`   ||`, [...core.operation.done], `already done`);
+  }
+  downstream.forEach(({ id: stateKey }) => {
+    var _a3, _b2, _c, _d;
+    if (isDone(stateKey, store)) {
+      (_a3 = store.config.logger) == null ? void 0 : _a3.info(`   || ${stateKey} already done`);
+      return;
+    }
+    const state2 = (_b2 = HAMT6.get(stateKey, core.selectors)) != null ? _b2 : HAMT6.get(stateKey, core.readonlySelectors);
+    if (!state2) {
+      (_c = store.config.logger) == null ? void 0 : _c.info(
+        `   || ${stateKey} is an atom, and can't be downstream`
+      );
+      return;
+    }
+    evictCachedValue(stateKey, store);
+    (_d = store.config.logger) == null ? void 0 : _d.info(`   xx evicted "${stateKey}"`);
+    markDone(stateKey, store);
+  });
+};
+var setAtomState = (atom2, next, store = IMPLICIT.STORE) => {
+  var _a2, _b;
+  const oldValue = getState__INTERNAL(atom2, store);
+  const newValue = become(next)(oldValue);
+  (_a2 = store.config.logger) == null ? void 0 : _a2.info(`<< setting atom "${atom2.key}" to`, newValue);
+  cacheValue(atom2.key, newValue, store);
+  if (isAtomDefault(atom2.key, store)) {
+    markAtomAsNotDefault(atom2.key, store);
+  }
+  markDone(atom2.key, store);
+  (_b = store.config.logger) == null ? void 0 : _b.info(
+    `   || evicting caches downstream from "${atom2.key}"`
+  );
+  evictDownStream(atom2, store);
+  const update = { oldValue, newValue };
+  if (store.transactionStatus.phase !== `building`) {
+    emitUpdate(atom2, update, store);
+  } else {
+    stowUpdate(atom2, update, store);
+  }
+};
+var setSelectorState = (selector, next, store = IMPLICIT.STORE) => {
+  var _a2, _b;
+  const oldValue = getState__INTERNAL(selector, store);
+  const newValue = become(next)(oldValue);
+  (_a2 = store.config.logger) == null ? void 0 : _a2.info(`<< setting selector "${selector.key}" to`, newValue);
+  (_b = store.config.logger) == null ? void 0 : _b.info(`   || propagating change made to "${selector.key}"`);
+  selector.set(newValue);
+};
+var setState__INTERNAL = (state, value, store = IMPLICIT.STORE) => {
+  if (`set` in state) {
+    setSelectorState(state, value, store);
+  } else {
+    setAtomState(state, value, store);
+  }
+};
+
+// ../src/internal/subject.ts
+var Subject = class {
+  constructor() {
+    this.subscribers = [];
+  }
+  subscribe(subscriber) {
+    this.subscribers.push(subscriber);
+    const unsubscribe = () => this.unsubscribe(subscriber);
+    return { unsubscribe };
+  }
+  unsubscribe(subscriber) {
+    const subscriberIndex = this.subscribers.indexOf(subscriber);
+    if (subscriberIndex !== -1) {
+      this.subscribers.splice(subscriberIndex, 1);
+    }
+  }
+  next(value) {
+    for (const subscriber of this.subscribers) {
+      subscriber(value);
+    }
+  }
+};
+
+// ../src/internal/subscribe-internal.ts
+var stowUpdate = (state, update, store) => {
+  var _a2;
+  const { key } = state;
+  const { logger } = store.config;
+  if (store.transactionStatus.phase !== `building`) {
+    (_a2 = store.config.logger) == null ? void 0 : _a2.warn(
+      `stowUpdate called outside of a transaction. This is probably a bug.`
+    );
+    return;
+  }
+  store.transactionStatus.atomUpdates.push(__spreadValues({ key }, update));
+  logger == null ? void 0 : logger.info(`\u{1F4DD} ${key} stowed (`, update.oldValue, `->`, update.newValue, `)`);
+};
+var emitUpdate = (state, update, store) => {
+  const { key } = state;
+  const { logger } = store.config;
+  logger == null ? void 0 : logger.info(
+    `\u{1F4E2} ${state.type} "${key}" went (`,
+    update.oldValue,
+    `->`,
+    update.newValue,
+    `)`
+  );
+  state.subject.next(update);
+};
+var subscribeToRootAtoms = (state, store) => {
+  const dependencySubscriptions = `default` in state ? null : traceAllSelectorAtoms(state.key, store).map((atomToken) => {
+    const atom2 = withdraw(atomToken, store);
+    if (atom2 === null) {
+      throw new Error(
+        `Atom "${atomToken.key}", a dependency of selector "${state.key}", not found in store "${store.config.name}".`
+      );
+    }
+    return atom2.subject.subscribe((atomChange) => {
+      var _a2, _b;
+      (_a2 = store.config.logger) == null ? void 0 : _a2.info(
+        `\u{1F4E2} selector "${state.key}" saw root "${atomToken.key}" go (`,
+        atomChange.oldValue,
+        `->`,
+        atomChange.newValue,
+        `)`
+      );
+      const oldValue = recallState(state, store);
+      const newValue = getState__INTERNAL(state, store);
+      (_b = store.config.logger) == null ? void 0 : _b.info(`   <- ${state.key} became`, newValue);
+      state.subject.next({ newValue, oldValue });
+    });
+  });
+  return dependencySubscriptions;
+};
+
+// ../src/atom.ts
+function atom(options) {
+  return atom__INTERNAL(options);
+}
+function atomFamily(options) {
+  return atomFamily__INTERNAL(options);
+}
+
+// ../src/subscribe.ts
+var subscribe = (token, handleUpdate, store = IMPLICIT.STORE) => {
+  var _a2;
+  const state = withdraw(token, store);
+  if (state === null) {
+    throw new Error(
+      `State "${token.key}" not found in this store. Did you forget to initialize with the "atom" or "selector" function?`
+    );
+  }
+  const subscription = state.subject.subscribe(handleUpdate);
+  (_a2 = store.config.logger) == null ? void 0 : _a2.info(`\u{1F440} subscribe to "${state.key}"`);
+  const dependencySubscriptions = state.type !== `atom` ? subscribeToRootAtoms(state, store) : null;
+  const unsubscribe = dependencySubscriptions === null ? () => {
+    var _a3;
+    (_a3 = store.config.logger) == null ? void 0 : _a3.info(`\u{1F648} unsubscribe from "${state.key}"`);
+    subscription.unsubscribe();
+  } : () => {
+    var _a3;
+    (_a3 = store.config.logger) == null ? void 0 : _a3.info(
+      `\u{1F648} unsubscribe from "${state.key}" and its dependencies`
+    );
+    subscription.unsubscribe();
+    for (const dependencySubscription of dependencySubscriptions) {
+      dependencySubscription.unsubscribe();
+    }
+  };
+  return unsubscribe;
+};
+
+// ../src/index.ts
+var setState = (token, value, store = IMPLICIT.STORE) => {
+  try {
+    openOperation(token, store);
+  } catch (thrown) {
+    if (!(typeof thrown === `symbol`)) {
+      throw thrown;
+    }
+    return;
+  }
+  const state = withdraw(token, store);
+  if (state === null) {
+    throw new Error(
+      `${capitalize(token.type)} "${token.key}" not found in store "${store.config.name}".`
+    );
+  }
+  setState__INTERNAL(state, value, store);
+  closeOperation(store);
+};
+
+// ../src/introspection/attach-introspection-states.ts
+import { __INTERNAL__ as __INTERNAL__7 } from "atom.io";
+
+// ../src/introspection/attach-atom-index.ts
+import { __INTERNAL__ } from "atom.io";
+var attachAtomIndex = (store = __INTERNAL__.IMPLICIT.STORE) => {
+  const atomTokenIndexState__INTERNAL = __INTERNAL__.atom__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Atom Token Index (Internal)`,
+      default: () => [...store.atoms].filter(([key]) => !key.includes(`\u{1F441}\u200D\u{1F5E8}`)).reduce((acc, [key]) => {
+        acc[key] = { key, type: `atom` };
+        return acc;
+      }, {}),
+      effects: [
+        ({ setSelf }) => {
+          store.subject.atomCreation.subscribe((atomToken) => {
+            if (store.operation.open) {
+              return;
+            }
+            if (atomToken.key.includes(`\u{1F441}\u200D\u{1F5E8}`)) {
+              return;
+            }
+            setSelf((state) => {
+              const { key, family } = atomToken;
+              if (family) {
+                const { key: familyKey, subKey } = family;
+                const current = state[familyKey];
+                if (current === void 0 || `familyMembers` in current) {
+                  const familyKeyState = current || {
+                    key: familyKey,
+                    familyMembers: {}
+                  };
+                  return __spreadProps(__spreadValues({}, state), {
+                    [familyKey]: __spreadProps(__spreadValues({}, familyKeyState), {
+                      familyMembers: __spreadProps(__spreadValues({}, familyKeyState.familyMembers), {
+                        [subKey]: atomToken
+                      })
+                    })
+                  });
+                }
+              }
+              return __spreadProps(__spreadValues({}, state), {
+                [key]: atomToken
+              });
+            });
+          });
+        }
+      ]
+    },
+    void 0,
+    store
+  );
+  return __INTERNAL__.selector__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Atom Token Index`,
+      get: ({ get }) => get(atomTokenIndexState__INTERNAL)
+    },
+    void 0,
+    store
+  );
+};
+
+// ../src/introspection/attach-selector-index.ts
+import { __INTERNAL__ as __INTERNAL__2 } from "atom.io";
+var attachSelectorIndex = (store = __INTERNAL__2.IMPLICIT.STORE) => {
+  const readonlySelectorTokenIndexState__INTERNAL = __INTERNAL__2.atom__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Selector Token Index (Internal)`,
+      default: () => Object.assign(
+        [...store.readonlySelectors].filter(([key]) => !key.includes(`\u{1F441}\u200D\u{1F5E8}`)).reduce((acc, [key]) => {
+          acc[key] = { key, type: `readonly_selector` };
+          return acc;
+        }, {}),
+        [...store.selectors].reduce((acc, [key]) => {
+          acc[key] = { key, type: `selector` };
+          return acc;
+        }, {})
+      ),
+      effects: [
+        ({ setSelf }) => {
+          store.subject.selectorCreation.subscribe((selectorToken) => {
+            if (store.operation.open) {
+              return;
+            }
+            if (selectorToken.key.includes(`\u{1F441}\u200D\u{1F5E8}`)) {
+              return;
+            }
+            setSelf((state) => {
+              const { key, family } = selectorToken;
+              if (family) {
+                const { key: familyKey, subKey } = family;
+                const current = state[familyKey];
+                if (current === void 0 || `familyMembers` in current) {
+                  const familyKeyState = current || {
+                    key: familyKey,
+                    familyMembers: {}
+                  };
+                  return __spreadProps(__spreadValues({}, state), {
+                    [familyKey]: __spreadProps(__spreadValues({}, familyKeyState), {
+                      familyMembers: __spreadProps(__spreadValues({}, familyKeyState.familyMembers), {
+                        [subKey]: selectorToken
+                      })
+                    })
+                  });
+                }
+              }
+              return __spreadProps(__spreadValues({}, state), {
+                [key]: selectorToken
+              });
+            });
+          });
+        }
+      ]
+    },
+    void 0,
+    store
+  );
+  return __INTERNAL__2.selector__INTERNAL({
+    key: `\u{1F441}\u200D\u{1F5E8} Selector Token Index`,
+    get: ({ get }) => get(readonlySelectorTokenIndexState__INTERNAL)
+  });
+};
+
+// ../src/introspection/attach-timeline-family.ts
+import { __INTERNAL__ as __INTERNAL__3 } from "atom.io";
+var attachTimelineFamily = (store = __INTERNAL__3.IMPLICIT.STORE) => {
+  const findTimelineLogState__INTERNAL = __INTERNAL__3.atomFamily__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Timeline Update Log (Internal)`,
+      default: (key) => store.timelines.get(key),
+      effects: (key) => [
+        ({ setSelf }) => {
+          const tl = store.timelines.get(key);
+          tl.subject.subscribe((_) => {
+            if (store.operation.open === true) {
+              const subscription = store.subject.operationStatus.subscribe(
+                (operationStatus) => {
+                  if (operationStatus.open === false) {
+                    subscription.unsubscribe();
+                    setSelf(__spreadValues({}, tl));
+                  }
+                }
+              );
+            } else {
+              setSelf(__spreadValues({}, tl));
+            }
+          });
+        }
+      ]
+    },
+    store
+  );
+  const findTimelineLogState = __INTERNAL__3.selectorFamily__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Timeline Update Log`,
+      get: (key) => ({ get }) => get(findTimelineLogState__INTERNAL(key))
+    },
+    store
+  );
+  return findTimelineLogState;
+};
+
+// ../src/introspection/attach-timeline-index.ts
+import { __INTERNAL__ as __INTERNAL__4 } from "atom.io";
+var attachTimelineIndex = (store = __INTERNAL__4.IMPLICIT.STORE) => {
+  const timelineTokenIndexState__INTERNAL = __INTERNAL__4.atom__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Timeline Token Index (Internal)`,
+      default: () => [...store.timelines].map(([key]) => {
+        return { key, type: `timeline` };
+      }),
+      effects: [
+        ({ setSelf }) => {
+          store.subject.timelineCreation.subscribe((timelineToken) => {
+            setSelf((state) => [...state, timelineToken]);
+          });
+        }
+      ]
+    },
+    void 0,
+    store
+  );
+  const timelineTokenIndex = __INTERNAL__4.selector__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Timeline Token Index`,
+      get: ({ get }) => get(timelineTokenIndexState__INTERNAL)
+    },
+    void 0,
+    store
+  );
+  return timelineTokenIndex;
+};
+
+// ../src/introspection/attach-transaction-index.ts
+import { __INTERNAL__ as __INTERNAL__5 } from "atom.io";
+var attachTransactionIndex = (store = __INTERNAL__5.IMPLICIT.STORE) => {
+  const transactionTokenIndexState__INTERNAL = __INTERNAL__5.atom__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Transaction Token Index (Internal)`,
+      default: () => [...store.transactions].map(([key]) => {
+        return { key, type: `transaction` };
+      }),
+      effects: [
+        ({ setSelf }) => {
+          store.subject.transactionCreation.subscribe((transactionToken) => {
+            setSelf((state) => [...state, transactionToken]);
+          });
+        }
+      ]
+    },
+    void 0,
+    store
+  );
+  const transactionTokenIndex = __INTERNAL__5.selector__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Transaction Token Index`,
+      get: ({ get }) => get(transactionTokenIndexState__INTERNAL)
+    },
+    void 0,
+    store
+  );
+  return transactionTokenIndex;
+};
+
+// ../src/introspection/attach-transaction-logs.ts
+import { __INTERNAL__ as __INTERNAL__6 } from "atom.io";
+var attachTransactionLogs = (store = __INTERNAL__6.IMPLICIT.STORE) => {
+  const findTransactionUpdateLog = __INTERNAL__6.atomFamily__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Transaction Update Log (Internal)`,
+      default: () => [],
+      effects: (key) => [
+        ({ setSelf }) => {
+          const tx = store.transactions.get(key);
+          tx.subject.subscribe((transactionUpdate) => {
+            if (transactionUpdate.key === key) {
+              setSelf((state) => [...state, transactionUpdate]);
+            }
+          });
+        }
+      ]
+    },
+    store
+  );
+  const findTransactionUpdateLogState = __INTERNAL__6.selectorFamily__INTERNAL(
+    {
+      key: `\u{1F441}\u200D\u{1F5E8} Transaction Update Log`,
+      get: (key) => ({ get }) => get(findTransactionUpdateLog(key))
+    },
+    store
+  );
+  return findTransactionUpdateLogState;
+};
+
+// ../src/introspection/attach-introspection-states.ts
+var attachIntrospectionStates = (store = __INTERNAL__7.IMPLICIT.STORE) => {
+  return {
+    atomIndex: attachAtomIndex(store),
+    selectorIndex: attachSelectorIndex(store),
+    transactionIndex: attachTransactionIndex(store),
+    findTransactionLogState: attachTransactionLogs(store),
+    timelineIndex: attachTimelineIndex(store),
+    findTimelineState: attachTimelineFamily(store)
+  };
+};
+
+// ../src/web-effects/storage.ts
+var persistAtom = (storage) => ({ stringify, parse }) => (key) => ({ setSelf, onSet }) => {
+  const savedValue = storage.getItem(key);
+  if (savedValue != null)
+    setSelf(parse(savedValue));
+  onSet(({ newValue }) => {
+    if (newValue == null) {
+      storage.removeItem(key);
+      return;
+    }
+    storage.setItem(key, stringify(newValue));
+  });
+};
+var lazyLocalStorageEffect = persistAtom(localStorage)(JSON);
+
+// ../src/react-devtools/AtomIODevtools.tsx
+import { useO as useO5, useIO as useIO5 } from "atom.io/react";
+import { LayoutGroup, motion, spring } from "framer-motion";
+import { useRef as useRef4 } from "react";
+
+// ../src/react-devtools/StateIndex.tsx
+import { getState, selectorFamily } from "atom.io";
+import { useO as useO2, useIO as useIO2 } from "atom.io/react";
+
+// ../src/react-devtools/Button.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var OpenClose = ({ isOpen, setIsOpen, disabled }) => {
+  return /* @__PURE__ */ jsxDEV(
+    "button",
+    {
+      type: "button",
+      className: `carat ${isOpen ? `open` : `closed`}`,
+      onClick: () => setIsOpen((isOpen2) => !isOpen2),
+      disabled,
+      children: "\u25B6"
+    },
+    void 0,
+    false,
+    {
+      fileName: "../src/react-devtools/Button.tsx",
+      lineNumber: 11,
+      columnNumber: 3
+    },
+    this
+  );
+};
+var button = {
+  OpenClose
+};
+
+// ../src/react-devtools/StateEditor.tsx
+import { useO, useIO } from "atom.io/react";
+
+// ../../hamr/src/react-elastic-input/ElasticInput.tsx
+import {
+  useLayoutEffect,
+  useImperativeHandle,
+  forwardRef,
+  useRef,
+  useState
+} from "react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var ElasticInput = forwardRef(function ElasticInputFC(props, ref) {
+  var _a2, _b, _c, _d;
+  const inputRef = useRef(null);
+  const spanRef = useRef(null);
+  const [inputWidth, setInputWidth] = useState(`auto`);
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a3;
+      (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
+    }
+  }));
+  const extraWidth = props.type === `number` ? 15 : 0;
+  useLayoutEffect(() => {
+    if (spanRef.current) {
+      setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
+      const interval = setInterval(() => {
+        if (spanRef.current) {
+          setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
+        }
+      }, 1e3);
+      return () => clearInterval(interval);
+    }
+  }, [(_a2 = inputRef.current) == null ? void 0 : _a2.value, props.value]);
+  return /* @__PURE__ */ jsxDEV2("div", { style: { display: `inline-block`, position: `relative` }, children: [
+    /* @__PURE__ */ jsxDEV2(
+      "input",
+      __spreadProps(__spreadValues({}, props), {
+        ref: inputRef,
+        style: __spreadValues({
+          padding: 0,
+          borderRadius: 0,
+          border: `none`,
+          fontFamily: `inherit`,
+          fontSize: `inherit`,
+          width: inputWidth
+        }, props.style)
+      }),
+      void 0,
+      false,
+      {
+        fileName: "../../hamr/src/react-elastic-input/ElasticInput.tsx",
+        lineNumber: 45,
+        columnNumber: 4
+      },
+      this
+    ),
+    /* @__PURE__ */ jsxDEV2(
+      "span",
+      {
+        ref: spanRef,
+        style: {
+          padding: (_b = props.style) == null ? void 0 : _b.padding,
+          position: `absolute`,
+          visibility: `hidden`,
+          // color: `red`,
+          whiteSpace: `pre`,
+          fontFamily: ((_c = props.style) == null ? void 0 : _c.fontFamily) || `inherit`,
+          fontSize: ((_d = props.style) == null ? void 0 : _d.fontSize) || `inherit`
+        },
+        children: props.value
+      },
+      void 0,
+      false,
+      {
+        fileName: "../../hamr/src/react-elastic-input/ElasticInput.tsx",
+        lineNumber: 58,
+        columnNumber: 4
+      },
+      this
+    )
+  ] }, void 0, true, {
+    fileName: "../../hamr/src/react-elastic-input/ElasticInput.tsx",
+    lineNumber: 44,
+    columnNumber: 3
+  }, this);
+});
+
+// ../../hamr/src/react-elastic-input/NumberInput.tsx
+import { pipe as pipe7 } from "fp-ts/function";
+import { useState as useState2, useId, useRef as useRef2 } from "react";
+
+// ../../anvl/src/number/clamp.ts
+var clampInto = (min, max) => (value) => value < min ? min : value > max ? max : value;
+
+// ../../hamr/src/react-elastic-input/NumberInput.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function round(value, decimalPlaces) {
+  if (decimalPlaces === void 0)
+    return value;
+  const factor = Math.pow(10, decimalPlaces);
+  return Math.round(value * factor) / factor;
+}
+var VALID_NON_NUMBERS = [``, `-`, `.`, `-.`];
+var isValidNonNumber = (input) => VALID_NON_NUMBERS.includes(input);
+var VALID_NON_NUMBER_INTERPRETATIONS = {
+  "": null,
+  "-": 0,
+  ".": 0,
+  "-.": 0
+};
+var isDecimalInProgress = (input) => input === `0` || !isNaN(Number(input)) && input.includes(`.`);
+var textToValue = (input, allowDecimal) => {
+  if (isValidNonNumber(input))
+    return VALID_NON_NUMBER_INTERPRETATIONS[input];
+  return allowDecimal ? parseFloat(input) : Math.round(parseFloat(input));
+};
+var DEFAULT_NUMBER_CONSTRAINTS = {
+  max: Infinity,
+  min: -Infinity,
+  decimalPlaces: 100,
+  nullable: true
+};
+var initRefinery = (constraints) => (input) => {
+  if (input === null && constraints.nullable === true) {
+    return null;
+  }
+  const { max, min, decimalPlaces } = __spreadValues(__spreadValues({}, DEFAULT_NUMBER_CONSTRAINTS), constraints);
+  const constrained = pipe7(
+    input != null ? input : 0,
+    clampInto(min, max),
+    (n) => decimalPlaces ? round(n, decimalPlaces) : n
+  );
+  return constrained;
+};
+var valueToText = (numericValue) => {
+  if (numericValue === null || numericValue === void 0) {
+    return ``;
+  }
+  return numericValue.toString();
 };
 var NumberInput = ({
   autoSize = false,
@@ -366,13 +1746,13 @@ var NumberInput = ({
     }
   };
   const displayValue = temporaryEntry != null ? temporaryEntry : valueToText(value ? refine(value) : value);
-  return /* @__PURE__ */ jsxDEV2("span", { css: customCss, children: [
-    label && /* @__PURE__ */ jsxDEV2("label", { htmlFor: id, children: label }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV3("span", { css: customCss, children: [
+    label && /* @__PURE__ */ jsxDEV3("label", { htmlFor: id, children: label }, void 0, false, {
       fileName: "../../hamr/src/react-elastic-input/NumberInput.tsx",
       lineNumber: 166,
       columnNumber: 14
     }, this),
-    autoSize ? /* @__PURE__ */ jsxDEV2(
+    autoSize ? /* @__PURE__ */ jsxDEV3(
       ElasticInput,
       {
         type: "text",
@@ -394,7 +1774,7 @@ var NumberInput = ({
         columnNumber: 5
       },
       this
-    ) : /* @__PURE__ */ jsxDEV2(
+    ) : /* @__PURE__ */ jsxDEV3(
       "input",
       {
         type: "text",
@@ -425,7 +1805,7 @@ var NumberInput = ({
 };
 
 // ../../hamr/src/react-elastic-input/TextInput.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 var TextInput = ({
   value,
   set,
@@ -434,13 +1814,13 @@ var TextInput = ({
   customCss,
   autoSize = false
 }) => {
-  return /* @__PURE__ */ jsxDEV3("span", { css: customCss, children: [
-    /* @__PURE__ */ jsxDEV3("label", { children: label }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV4("span", { css: customCss, children: [
+    /* @__PURE__ */ jsxDEV4("label", { children: label }, void 0, false, {
       fileName: "../../hamr/src/react-elastic-input/TextInput.tsx",
-      lineNumber: 25,
+      lineNumber: 26,
       columnNumber: 4
     }, this),
-    autoSize ? /* @__PURE__ */ jsxDEV3(
+    autoSize ? /* @__PURE__ */ jsxDEV4(
       ElasticInput,
       {
         type: "text",
@@ -453,11 +1833,11 @@ var TextInput = ({
       false,
       {
         fileName: "../../hamr/src/react-elastic-input/TextInput.tsx",
-        lineNumber: 27,
+        lineNumber: 28,
         columnNumber: 5
       },
       this
-    ) : /* @__PURE__ */ jsxDEV3(
+    ) : /* @__PURE__ */ jsxDEV4(
       "input",
       {
         type: "text",
@@ -470,14 +1850,14 @@ var TextInput = ({
       false,
       {
         fileName: "../../hamr/src/react-elastic-input/TextInput.tsx",
-        lineNumber: 35,
+        lineNumber: 36,
         columnNumber: 5
       },
       this
     )
   ] }, void 0, true, {
     fileName: "../../hamr/src/react-elastic-input/TextInput.tsx",
-    lineNumber: 24,
+    lineNumber: 25,
     columnNumber: 3
   }, this);
 };
@@ -491,8 +1871,32 @@ var makeElementSetters = (data, set) => data.map(
   })
 );
 
+// ../../hamr/src/react-json-editor/editors-by-type/non-json.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var NonJsonEditor = ({ data }) => {
+  return data === void 0 ? /* @__PURE__ */ jsxDEV5(ElasticInput, { disabled: true, value: "undefined" }, void 0, false, {
+    fileName: "../../hamr/src/react-json-editor/editors-by-type/non-json.tsx",
+    lineNumber: 6,
+    columnNumber: 3
+  }, this) : /* @__PURE__ */ jsxDEV5(
+    ElasticInput,
+    {
+      disabled: true,
+      value: Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data)
+    },
+    void 0,
+    false,
+    {
+      fileName: "../../hamr/src/react-json-editor/editors-by-type/non-json.tsx",
+      lineNumber: 8,
+      columnNumber: 3
+    },
+    this
+  );
+};
+
 // ../../hamr/src/react-json-editor/json-editor-internal.tsx
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 var JsonEditor_INTERNAL = ({
   data,
   set,
@@ -509,18 +1913,19 @@ var JsonEditor_INTERNAL = ({
   Header: HeaderDisplay,
   Components
 }) => {
-  const json = refineJsonType(data);
-  const SubEditor = SubEditors[json.type];
+  const dataIsJson = isJson(data);
+  const refined = dataIsJson ? refineJsonType(data) : { type: `non-json`, data };
+  const SubEditor = dataIsJson ? SubEditors[refined.type] : NonJsonEditor;
   const disabled = isReadonly(path);
-  return isHidden(path) ? null : /* @__PURE__ */ jsxDEV4(Components.ErrorBoundary, { children: /* @__PURE__ */ jsxDEV4(Components.EditorWrapper, { className, customCss, children: [
-    remove && /* @__PURE__ */ jsxDEV4(
+  return isHidden(path) ? null : /* @__PURE__ */ jsxDEV6(Components.ErrorBoundary, { children: /* @__PURE__ */ jsxDEV6(Components.EditorWrapper, { className, customCss, children: [
+    remove && /* @__PURE__ */ jsxDEV6(
       Components.Button,
       {
         onClick: disabled ? doNothing : remove,
         disabled,
-        children: /* @__PURE__ */ jsxDEV4(Components.DeleteIcon, {}, void 0, false, {
+        children: /* @__PURE__ */ jsxDEV6(Components.DeleteIcon, {}, void 0, false, {
           fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-          lineNumber: 61,
+          lineNumber: 63,
           columnNumber: 7
         }, this)
       },
@@ -528,17 +1933,17 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 57,
+        lineNumber: 59,
         columnNumber: 6
       },
       this
     ),
-    HeaderDisplay && /* @__PURE__ */ jsxDEV4(HeaderDisplay, { data, schema }, void 0, false, {
+    HeaderDisplay && /* @__PURE__ */ jsxDEV6(HeaderDisplay, { data, schema }, void 0, false, {
       fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-      lineNumber: 64,
+      lineNumber: 66,
       columnNumber: 23
     }, this),
-    rename && /* @__PURE__ */ jsxDEV4(Components.KeyWrapper, { children: /* @__PURE__ */ jsxDEV4(
+    rename && /* @__PURE__ */ jsxDEV6(Components.KeyWrapper, { children: /* @__PURE__ */ jsxDEV6(
       ElasticInput,
       {
         value: name,
@@ -549,19 +1954,19 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 67,
+        lineNumber: 69,
         columnNumber: 7
       },
       this
     ) }, void 0, false, {
       fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-      lineNumber: 66,
+      lineNumber: 68,
       columnNumber: 6
     }, this),
-    /* @__PURE__ */ jsxDEV4(
+    /* @__PURE__ */ jsxDEV6(
       SubEditor,
       {
-        data: json.data,
+        data: refined.data,
         set,
         schema,
         remove,
@@ -575,20 +1980,20 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 74,
+        lineNumber: 76,
         columnNumber: 5
       },
       this
     ),
-    recast && /* @__PURE__ */ jsxDEV4(
+    recast && dataIsJson ? /* @__PURE__ */ jsxDEV6(
       "select",
       {
         onChange: disabled ? doNothing : (e) => recast(e.target.value),
-        value: json.type,
+        value: refined.type,
         disabled,
-        children: Object.keys(SubEditors).map((type) => /* @__PURE__ */ jsxDEV4("option", { value: type, children: type }, type, false, {
+        children: Object.keys(SubEditors).map((type) => /* @__PURE__ */ jsxDEV6("option", { value: type, children: type }, type, false, {
           fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-          lineNumber: 96,
+          lineNumber: 98,
           columnNumber: 8
         }, this))
       },
@@ -596,24 +2001,24 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 86,
+        lineNumber: 88,
         columnNumber: 6
       },
       this
-    )
+    ) : null
   ] }, void 0, true, {
     fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-    lineNumber: 55,
+    lineNumber: 57,
     columnNumber: 4
   }, this) }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-    lineNumber: 54,
+    lineNumber: 56,
     columnNumber: 3
   }, this);
 };
 
 // ../../hamr/src/react-json-editor/editors-by-type/array-editor.tsx
-import { Fragment, jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { Fragment, jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
 var ArrayEditor = ({
   path = [],
   isReadonly = () => false,
@@ -623,9 +2028,9 @@ var ArrayEditor = ({
   Components
 }) => {
   const setElement = makeElementSetters(data, set);
-  return /* @__PURE__ */ jsxDEV5(Fragment, { children: data.map((element, index) => {
+  return /* @__PURE__ */ jsxDEV7(Fragment, { children: data.map((element, index) => {
     const newPath = [...path, index];
-    return /* @__PURE__ */ jsxDEV5(
+    return /* @__PURE__ */ jsxDEV7(
       JsonEditor_INTERNAL,
       {
         path: newPath,
@@ -657,10 +2062,10 @@ import { useRef as useRef3 } from "react";
 // ../../anvl/src/json-schema/json-schema.ts
 import { isBoolean as isBoolean2 } from "fp-ts/boolean";
 import { isNumber as isNumber2 } from "fp-ts/number";
-import { isString as isString4 } from "fp-ts/string";
+import { isString as isString6 } from "fp-ts/string";
 
 // ../../anvl/src/json-schema/integer.ts
-import { pipe as pipe6 } from "fp-ts/function";
+import { pipe as pipe8 } from "fp-ts/function";
 var isInteger = (input) => Number.isInteger(input);
 var parseInteger = (input) => {
   if (isInteger(input))
@@ -686,7 +2091,7 @@ var IntegerParseError = class extends Error {
   }
 };
 var Int = Object.assign((input) => parseInteger(input), {
-  from: (input) => pipe6(
+  from: (input) => pipe8(
     input,
     String,
     parseFloat,
@@ -722,10 +2127,10 @@ var b = asNumber([new Fraction(1, 2)]);
 var c = asNumber({ a: new Fraction(1, 2) });
 
 // ../../anvl/src/json-schema/refs.ts
-import { isString as isString2 } from "fp-ts/string";
+import { isString as isString4 } from "fp-ts/string";
 function isJsonSchemaRef(input) {
   return doesExtend({
-    $ref: isString2
+    $ref: isString4
   })(input);
 }
 var colorPalette = {
@@ -776,7 +2181,7 @@ var retrieveRef = ({
 };
 
 // ../../anvl/src/json-schema/string-formats.ts
-import { isString as isString3 } from "fp-ts/string";
+import { isString as isString5 } from "fp-ts/string";
 var JSON_SCHEMA_STRING_FORMATS = [
   `date-time`,
   `date`,
@@ -792,53 +2197,6 @@ var JSON_SCHEMA_STRING_FORMATS = [
   `uuid`
 ];
 
-// ../../anvl/src/refinement/index.ts
-var canExist = (_) => true;
-var cannotExist = (_) => false;
-var isLiteral = (value) => (input) => input === value;
-var isWithin = (args) => (input) => args.includes(input);
-var couldBe = (isTypeA, logging = false, refinements = [isTypeA]) => {
-  const name = `(${refinements.map((r) => r.name || `anon`).join(` | `)})`;
-  const _ = {
-    [name]: (input) => refinements.some(
-      (refinement) => {
-        var _a2;
-        return logging && console.log(
-          refinements.map((r) => r.name || `anon`).join(` | `),
-          `>`,
-          (_a2 = refinement.name) != null ? _a2 : `anon`,
-          `:`,
-          refinement(input)
-        ), refinement(input);
-      }
-    )
-  };
-  const checkTypes = Object.assign(_[name], {
-    or: (isTypeB) => couldBe(isTypeB, logging, [...refinements, isTypeB])
-  });
-  return checkTypes;
-};
-var isUnion = couldBe(cannotExist);
-var mustBe = (isTypeA, logging = false, refinements = [isTypeA]) => {
-  const name = `(${refinements.map((r) => r.name || `anon`).join(` & `)})`;
-  const _ = {
-    [name]: (input) => refinements.every(
-      (refinement) => (logging && console.log(
-        refinements.map((r) => r.name || `anon`).join(` & `),
-        `>`,
-        refinement.name || `anon`,
-        `:`,
-        refinement(input)
-      ), refinement(input))
-    )
-  };
-  const checkTypes = Object.assign(_[name], {
-    and: (isTypeB) => mustBe(isTypeB, logging, [...refinements, isTypeB])
-  });
-  return checkTypes;
-};
-var isIntersection = mustBe(canExist);
-
 // ../../anvl/src/json-schema/json-schema.ts
 var JSON_SCHEMA_TYPE_NAMES = [...JSON_TYPE_NAMES, `integer`];
 var JSON_SCHEMA_META_TYPE_NAMES = [
@@ -863,10 +2221,10 @@ var JSON_SCHEMA_REFINERY = {
 };
 var stringSchemaStructure = {
   type: isLiteral(`string`),
-  enum: ifDefined(isArray(isString4)),
+  enum: ifDefined(isArray(isString6)),
   minLength: ifDefined(isInteger),
   maxLength: ifDefined(isInteger),
-  pattern: ifDefined(isString4),
+  pattern: ifDefined(isString6),
   format: ifDefined(isWithin(JSON_SCHEMA_STRING_FORMATS))
 };
 function isStringSchema(input) {
@@ -911,13 +2269,13 @@ function isNullSchema(input) {
 }
 var objectSchemaStructure = {
   type: isLiteral(`object`),
-  properties: ifDefined(isRecord(isString4, isJsonSchema)),
-  required: ifDefined(isArray(isString4)),
+  properties: ifDefined(isRecord(isString6, isJsonSchema)),
+  required: ifDefined(isArray(isString6)),
   additionalProperties: ifDefined(isJsonSchema),
   propertyNames: ifDefined(isStringSchema),
   minProperties: ifDefined(isInteger),
   maxProperties: ifDefined(isInteger),
-  dependentSchemas: ifDefined(isRecord(isString4, isJsonSchema))
+  dependentSchemas: ifDefined(isRecord(isString6, isJsonSchema))
 };
 function isObjectSchema(input) {
   return doesExtend(objectSchemaStructure)(input);
@@ -959,7 +2317,7 @@ function isNegationSchema(input) {
 var mixedSchemaStructure = __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, arraySchemaStructure), booleanSchemaStructure), integerSchemaStructure), nullSchemaStructure), numberSchemaStructure), objectSchemaStructure), stringSchemaStructure), {
   type: isArray(isWithin(JSON_SCHEMA_TYPE_NAMES)),
   enum: ifDefined(
-    isArray(isUnion.or(isInteger).or(isBoolean2).or(isNumber2).or(isString4))
+    isArray(isUnion.or(isInteger).or(isBoolean2).or(isNumber2).or(isString6))
   )
 });
 function isMixedSchema(input) {
@@ -967,8 +2325,8 @@ function isMixedSchema(input) {
 }
 var isJsonSchemaCore = isUnion.or(isArraySchema).or(isBooleanSchema).or(isConditionalSchema).or(isExclusiveSchema).or(isIntegerSchema).or(isIntersectionSchema).or(isMixedSchema).or(isNegationSchema).or(isNullSchema).or(isNumberSchema).or(isObjectSchema).or(isStringSchema).or(isUnionSchema);
 var isJsonSchemaRoot = doesExtend({
-  $id: ifDefined(isString4),
-  $schema: ifDefined(isString4)
+  $id: ifDefined(isString6),
+  $schema: ifDefined(isString6)
 });
 var isJsonSchemaObject = isIntersection.and(isJsonSchemaCore).and(isJsonSchemaRoot);
 function isJsonSchema(input) {
@@ -1205,27 +2563,27 @@ var makePropertySorter = (data, set, sortFn) => () => {
 };
 
 // ../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx
-import { Fragment as Fragment2, jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+import { Fragment as Fragment2, jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
 var PropertyAdder = ({
   addProperty,
   disabled,
   propertyKey,
   Components
-}) => /* @__PURE__ */ jsxDEV6(Components.MissingPropertyWrapper, { children: [
-  /* @__PURE__ */ jsxDEV6(ElasticInput, { disabled: true, defaultValue: propertyKey }, void 0, false, {
+}) => /* @__PURE__ */ jsxDEV8(Components.MissingPropertyWrapper, { children: [
+  /* @__PURE__ */ jsxDEV8(ElasticInput, { disabled: true, defaultValue: propertyKey }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
     lineNumber: 38,
     columnNumber: 3
   }, this),
   ` `,
-  /* @__PURE__ */ jsxDEV6(ElasticInput, { disabled: true, defaultValue: "is missing" }, void 0, false, {
+  /* @__PURE__ */ jsxDEV8(ElasticInput, { disabled: true, defaultValue: "is missing" }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-    lineNumber: 41,
+    lineNumber: 40,
     columnNumber: 3
   }, this),
-  /* @__PURE__ */ jsxDEV6(Components.Button, { onClick: () => addProperty(), disabled, children: "+" }, void 0, false, {
+  /* @__PURE__ */ jsxDEV8(Components.Button, { onClick: () => addProperty(), disabled, children: "+" }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-    lineNumber: 42,
+    lineNumber: 41,
     columnNumber: 3
   }, this)
 ] }, void 0, true, {
@@ -1267,20 +2625,20 @@ var ObjectEditor = ({
     [[], []]
   );
   const missingKeys = schemaKeys === true ? [] : schemaKeys.filter((key) => !dataKeys.includes(key));
-  return /* @__PURE__ */ jsxDEV6(Fragment2, { children: [
-    /* @__PURE__ */ jsxDEV6(Components.Button, { onClick: () => sortProperties(), disabled, children: "Sort" }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV8(Fragment2, { children: [
+    /* @__PURE__ */ jsxDEV8(Components.Button, { onClick: () => sortProperties(), disabled, children: "Sort" }, void 0, false, {
       fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-      lineNumber: 96,
+      lineNumber: 95,
       columnNumber: 4
     }, this),
-    /* @__PURE__ */ jsxDEV6(Components.ObjectWrapper, { children: [
-      /* @__PURE__ */ jsxDEV6("div", { className: "json_editor_properties", children: [...missingKeys, ...officialKeys, ...unofficialKeys].map((key) => {
+    /* @__PURE__ */ jsxDEV8(Components.ObjectWrapper, { children: [
+      /* @__PURE__ */ jsxDEV8("div", { className: "json_editor_properties", children: [...missingKeys, ...officialKeys, ...unofficialKeys].map((key) => {
         const originalKey = stableKeyMap.current[key];
         const newPath = [...path, key];
         const originalPath = [...path, originalKey];
         const isOfficial = schemaKeys === true || schemaKeys.includes(key);
         const isMissing = missingKeys.includes(key);
-        return isMissing ? /* @__PURE__ */ jsxDEV6(
+        return isMissing ? /* @__PURE__ */ jsxDEV8(
           PropertyAdder,
           {
             propertyKey: key,
@@ -1292,11 +2650,11 @@ var ObjectEditor = ({
           false,
           {
             fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-            lineNumber: 109,
+            lineNumber: 108,
             columnNumber: 8
           },
           this
-        ) : /* @__PURE__ */ jsxDEV6(
+        ) : /* @__PURE__ */ jsxDEV8(
           JsonEditor_INTERNAL,
           {
             schema,
@@ -1316,17 +2674,17 @@ var ObjectEditor = ({
           false,
           {
             fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-            lineNumber: 117,
+            lineNumber: 116,
             columnNumber: 8
           },
           this
         );
       }) }, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-        lineNumber: 100,
+        lineNumber: 99,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ jsxDEV6(
+      /* @__PURE__ */ jsxDEV8(
         Components.Button,
         {
           onClick: disabled ? doNothing : () => makePropertyAdder(`new_property`, `string`)(),
@@ -1337,29 +2695,30 @@ var ObjectEditor = ({
         false,
         {
           fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-          lineNumber: 137,
+          lineNumber: 136,
           columnNumber: 5
         },
         this
       )
     ] }, void 0, true, {
       fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-      lineNumber: 99,
+      lineNumber: 98,
       columnNumber: 4
     }, this)
   ] }, void 0, true, {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/object-editor.tsx",
-    lineNumber: 95,
+    lineNumber: 94,
     columnNumber: 3
   }, this);
 };
 
 // ../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+import { Fragment as Fragment3, jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
 var BooleanEditor = ({
   data,
-  set
-}) => /* @__PURE__ */ jsxDEV7(
+  set,
+  Components
+}) => /* @__PURE__ */ jsxDEV9(Components.BooleanWrapper, { children: /* @__PURE__ */ jsxDEV9(
   "input",
   {
     type: "checkbox",
@@ -1370,22 +2729,33 @@ var BooleanEditor = ({
   false,
   {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-    lineNumber: 10,
-    columnNumber: 2
+    lineNumber: 12,
+    columnNumber: 3
   },
   this
-);
-var NullEditor = () => /* @__PURE__ */ jsxDEV7("input", { type: "text", value: "null", readOnly: true }, void 0, false, {
+) }, void 0, false, {
+  fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
+  lineNumber: 11,
+  columnNumber: 2
+}, this);
+var NullEditor = ({
+  Components
+}) => /* @__PURE__ */ jsxDEV9(Components.NullWrapper, { children: /* @__PURE__ */ jsxDEV9(Fragment3, {}, void 0, false, {
+  fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
+  lineNumber: 24,
+  columnNumber: 3
+}, this) }, void 0, false, {
   fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-  lineNumber: 18,
+  lineNumber: 23,
   columnNumber: 2
 }, this);
 var NumberEditor = ({
   path = [],
   isReadonly = () => false,
   data,
-  set
-}) => /* @__PURE__ */ jsxDEV7(
+  set,
+  Components
+}) => /* @__PURE__ */ jsxDEV9(Components.NumberWrapper, { children: /* @__PURE__ */ jsxDEV9(
   NumberInput,
   {
     value: data,
@@ -1396,11 +2766,15 @@ var NumberEditor = ({
   false,
   {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-    lineNumber: 27,
-    columnNumber: 2
+    lineNumber: 36,
+    columnNumber: 3
   },
   this
-);
+) }, void 0, false, {
+  fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
+  lineNumber: 35,
+  columnNumber: 2
+}, this);
 var StringEditor = ({
   path = [],
   isReadonly = () => false,
@@ -1408,7 +2782,7 @@ var StringEditor = ({
   set,
   Components
 }) => {
-  return /* @__PURE__ */ jsxDEV7(Components.StringWrapper, { children: /* @__PURE__ */ jsxDEV7(
+  return /* @__PURE__ */ jsxDEV9(Components.StringWrapper, { children: /* @__PURE__ */ jsxDEV9(
     TextInput,
     {
       value: data,
@@ -1419,28 +2793,28 @@ var StringEditor = ({
     false,
     {
       fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-      lineNumber: 43,
+      lineNumber: 53,
       columnNumber: 4
     },
     this
   ) }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-    lineNumber: 42,
+    lineNumber: 52,
     columnNumber: 3
   }, this);
 };
 
 // ../../hamr/src/react-error-boundary/ErrorBoundary.tsx
 import { useId as useId2, Component } from "react";
-import { atomFamily, useRecoilState, useResetRecoilState } from "recoil";
+import { atomFamily as atomFamily2, useRecoilState, useResetRecoilState } from "recoil";
 
 // ../../hamr/src/react-error-boundary/DefaultFallback.tsx
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
 var DefaultFallback = ({ error, errorInfo }) => {
   var _a2, _b;
   const component = errorInfo == null ? void 0 : errorInfo.componentStack.split(` `).filter(Boolean)[2];
   const message = (_b = (_a2 = error == null ? void 0 : error.toString()) != null ? _a2 : errorInfo == null ? void 0 : errorInfo.componentStack) != null ? _b : `Unknown error`;
-  return /* @__PURE__ */ jsxDEV8(
+  return /* @__PURE__ */ jsxDEV10(
     "div",
     {
       "data-testid": "error-boundary",
@@ -1452,7 +2826,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
         // backgroundRepeat: `no-repeat`,
         backgroundSize: `overlay`
       },
-      children: /* @__PURE__ */ jsxDEV8(
+      children: /* @__PURE__ */ jsxDEV10(
         "div",
         {
           style: {
@@ -1461,7 +2835,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
             padding: `50px`,
             border: `1px solid dashed`
           },
-          children: /* @__PURE__ */ jsxDEV8(
+          children: /* @__PURE__ */ jsxDEV10(
             "span",
             {
               style: {
@@ -1472,7 +2846,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
               },
               children: [
                 `\u26A0\uFE0F `,
-                /* @__PURE__ */ jsxDEV8("span", { style: { color: `#fc0`, fontWeight: 700 }, children: component }, void 0, false, {
+                /* @__PURE__ */ jsxDEV10("span", { style: { color: `#fc0`, fontWeight: 700 }, children: component }, void 0, false, {
                   fileName: "../../hamr/src/react-error-boundary/DefaultFallback.tsx",
                   lineNumber: 42,
                   columnNumber: 6
@@ -1513,7 +2887,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
 };
 
 // ../../hamr/src/react-error-boundary/ErrorBoundary.tsx
-import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -1530,27 +2904,27 @@ var ErrorBoundary = class extends Component {
   render() {
     const { error, errorInfo } = this.state;
     const { children, Fallback = DefaultFallback } = this.props;
-    return errorInfo ? /* @__PURE__ */ jsxDEV9(Fallback, { error, errorInfo }, void 0, false, {
+    return errorInfo ? /* @__PURE__ */ jsxDEV11(Fallback, { error, errorInfo }, void 0, false, {
       fileName: "../../hamr/src/react-error-boundary/ErrorBoundary.tsx",
       lineNumber: 43,
       columnNumber: 4
     }, this) : children;
   }
 };
-var findErrorBoundaryState = atomFamily({
+var findErrorBoundaryState = atomFamily2({
   key: `errorBoundary`,
   default: { error: void 0, errorInfo: void 0 }
 });
 
 // ../../hamr/src/react-json-editor/default-components.tsx
-import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
 var DEFAULT_JSON_EDITOR_COMPONENTS = {
-  ErrorBoundary: ({ children }) => /* @__PURE__ */ jsxDEV10(ErrorBoundary, { children }, void 0, false, {
+  ErrorBoundary: ({ children }) => /* @__PURE__ */ jsxDEV12(ErrorBoundary, { children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 47,
     columnNumber: 35
   }, this),
-  Button: ({ onClick, children, disabled }) => /* @__PURE__ */ jsxDEV10(
+  Button: ({ onClick, children, disabled }) => /* @__PURE__ */ jsxDEV12(
     "button",
     {
       type: "button",
@@ -1568,7 +2942,7 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
     },
     this
   ),
-  EditorWrapper: ({ children, customCss, className }) => /* @__PURE__ */ jsxDEV10("div", { className: `json_editor ` + className, css: customCss, children }, void 0, false, {
+  EditorWrapper: ({ children, customCss, className }) => /* @__PURE__ */ jsxDEV12("div", { className: `json_editor ` + className, css: customCss, children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 59,
     columnNumber: 3
@@ -1581,28 +2955,28 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
     ValueEditor,
     Wrapper
   }) => {
-    return /* @__PURE__ */ jsxDEV10(Wrapper, { children: [
-      DeleteButton && /* @__PURE__ */ jsxDEV10(DeleteButton, {}, void 0, false, {
+    return /* @__PURE__ */ jsxDEV12(Wrapper, { children: [
+      DeleteButton && /* @__PURE__ */ jsxDEV12(DeleteButton, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
         lineNumber: 73,
         columnNumber: 22
       }, this),
-      Header && /* @__PURE__ */ jsxDEV10(Header, {}, void 0, false, {
+      Header && /* @__PURE__ */ jsxDEV12(Header, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
         lineNumber: 74,
         columnNumber: 16
       }, this),
-      KeyInput && /* @__PURE__ */ jsxDEV10(KeyInput, {}, void 0, false, {
+      KeyInput && /* @__PURE__ */ jsxDEV12(KeyInput, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
         lineNumber: 75,
         columnNumber: 18
       }, this),
-      TypeSelect && /* @__PURE__ */ jsxDEV10(TypeSelect, {}, void 0, false, {
+      TypeSelect && /* @__PURE__ */ jsxDEV12(TypeSelect, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
         lineNumber: 76,
         columnNumber: 20
       }, this),
-      /* @__PURE__ */ jsxDEV10(ValueEditor, {}, void 0, false, {
+      /* @__PURE__ */ jsxDEV12(ValueEditor, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
         lineNumber: 77,
         columnNumber: 5
@@ -1613,67 +2987,67 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
       columnNumber: 4
     }, this);
   },
-  ArrayWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("div", { className: "json_editor_array", children }, void 0, false, {
+  ArrayWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("div", { className: "json_editor_array", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 82,
     columnNumber: 3
   }, this),
-  ObjectWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("div", { className: "json_editor_object", children }, void 0, false, {
+  ObjectWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("div", { className: "json_editor_object", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 85,
     columnNumber: 3
   }, this),
-  StringWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_string", children }, void 0, false, {
+  StringWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_string", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 88,
     columnNumber: 3
   }, this),
-  NumberWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_number", children }, void 0, false, {
+  NumberWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_number", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 91,
     columnNumber: 3
   }, this),
-  BooleanWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_boolean", children }, void 0, false, {
+  BooleanWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_boolean", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 94,
     columnNumber: 3
   }, this),
-  NullWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_null", children }, void 0, false, {
+  NullWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_null", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 97,
     columnNumber: 3
   }, this),
-  MissingPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("div", { className: "json_editor_property json_editor_missing", children }, void 0, false, {
+  MissingPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("div", { className: "json_editor_property json_editor_missing", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 100,
     columnNumber: 3
   }, this),
-  MiscastPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("div", { className: "json_editor_property json_editor_miscast", children }, void 0, false, {
+  MiscastPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("div", { className: "json_editor_property json_editor_miscast", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 103,
     columnNumber: 3
   }, this),
-  IllegalPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_property json_editor_illegal", children }, void 0, false, {
+  IllegalPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_property json_editor_illegal", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 106,
     columnNumber: 3
   }, this),
-  OfficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_property json_editor_official", children }, void 0, false, {
+  OfficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_property json_editor_official", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 109,
     columnNumber: 3
   }, this),
-  UnofficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_property json_editor_unofficial", children }, void 0, false, {
+  UnofficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_property json_editor_unofficial", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 112,
     columnNumber: 3
   }, this),
-  DeleteIcon: () => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_icon json_editor_delete", children: "x" }, void 0, false, {
+  DeleteIcon: () => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_icon json_editor_delete", children: "x" }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 117,
     columnNumber: 3
   }, this),
-  KeyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV10("span", { className: "json_editor_key", children }, void 0, false, {
+  KeyWrapper: ({ children }) => /* @__PURE__ */ jsxDEV12("span", { className: "json_editor_key", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
     lineNumber: 120,
     columnNumber: 3
@@ -1683,7 +3057,7 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
 // ../../hamr/src/react-json-editor/developer-interface.tsx
 import Ajv from "ajv";
 import { useMemo } from "react";
-import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
 var JsonEditor = ({
   data,
   set,
@@ -1705,7 +3079,7 @@ var JsonEditor = ({
     return ajv.compile(schema);
   }, [schema]);
   const validationResults = validate(data);
-  return /* @__PURE__ */ jsxDEV11(
+  return /* @__PURE__ */ jsxDEV13(
     JsonEditor_INTERNAL,
     {
       data,
@@ -1744,17 +3118,17 @@ var SubEditors = {
 };
 
 // ../src/react-devtools/StateEditor.tsx
-import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
-var StateEditor = ({ storeHooks, token }) => {
-  const [data, set] = storeHooks.useIO(token);
-  return isPlainJson(data) ? /* @__PURE__ */ jsxDEV12(JsonEditor, { data, set, schema: true }, void 0, false, {
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+var StateEditor = ({ token }) => {
+  const [data, set] = useIO(token);
+  return isJson(data) ? /* @__PURE__ */ jsxDEV14(JsonEditor, { data, set, schema: true }, void 0, false, {
     fileName: "../src/react-devtools/StateEditor.tsx",
     lineNumber: 15,
     columnNumber: 3
-  }, this) : /* @__PURE__ */ jsxDEV12("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV12(
+  }, this) : /* @__PURE__ */ jsxDEV14("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV14(
     ElasticInput,
     {
-      value: data instanceof Set ? `Set { ${JSON.stringify([...data]).slice(1, -1)} }` : data instanceof Map ? `Map ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
+      value: data instanceof Set ? `Set { ${JSON.stringify([...data]).slice(1, -1)} }` : data instanceof Map ? `Map ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + fallback(() => JSON.stringify(data), `?`),
       disabled: true
     },
     void 0,
@@ -1763,318 +3137,983 @@ var StateEditor = ({ storeHooks, token }) => {
       fileName: "../src/react-devtools/StateEditor.tsx",
       lineNumber: 18,
       columnNumber: 4
-    },
-    this
-  ) }, void 0, false, {
-    fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 17,
+    },
+    this
+  ) }, void 0, false, {
+    fileName: "../src/react-devtools/StateEditor.tsx",
+    lineNumber: 17,
+    columnNumber: 3
+  }, this);
+};
+var ReadonlySelectorViewer = ({ token }) => {
+  const data = useO(token);
+  return isJson(data) ? /* @__PURE__ */ jsxDEV14(
+    JsonEditor,
+    {
+      data,
+      set: () => null,
+      schema: true,
+      isReadonly: () => true
+    },
+    void 0,
+    false,
+    {
+      fileName: "../src/react-devtools/StateEditor.tsx",
+      lineNumber: 39,
+      columnNumber: 3
+    },
+    this
+  ) : /* @__PURE__ */ jsxDEV14("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV14(
+    ElasticInput,
+    {
+      value: data instanceof Set ? `Set ` + JSON.stringify([...data]) : data instanceof Map ? `Map ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
+      disabled: true
+    },
+    void 0,
+    false,
+    {
+      fileName: "../src/react-devtools/StateEditor.tsx",
+      lineNumber: 47,
+      columnNumber: 4
+    },
+    this
+  ) }, void 0, false, {
+    fileName: "../src/react-devtools/StateEditor.tsx",
+    lineNumber: 46,
+    columnNumber: 3
+  }, this);
+};
+var StoreEditor = ({ token }) => {
+  if (token.type === `readonly_selector`) {
+    return /* @__PURE__ */ jsxDEV14(ReadonlySelectorViewer, { token }, void 0, false, {
+      fileName: "../src/react-devtools/StateEditor.tsx",
+      lineNumber: 67,
+      columnNumber: 10
+    }, this);
+  }
+  return /* @__PURE__ */ jsxDEV14(StateEditor, { token }, void 0, false, {
+    fileName: "../src/react-devtools/StateEditor.tsx",
+    lineNumber: 69,
+    columnNumber: 9
+  }, this);
+};
+
+// ../src/react-devtools/StateIndex.tsx
+import { Fragment as Fragment4, jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+var findStateTypeState = selectorFamily({
+  key: `\u{1F441}\u200D\u{1F5E8} State Type`,
+  get: (token) => ({ get }) => {
+    let state;
+    try {
+      state = get(token);
+    } catch (error) {
+      return `error`;
+    }
+    if (state === void 0)
+      return `undefined`;
+    if (isJson(state))
+      return refineJsonType(state).type;
+    return Object.getPrototypeOf(state).constructor.name;
+  }
+});
+var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
+  var _a2, _b;
+  const [isOpen, setIsOpen] = useIO2(isOpenState);
+  const state = useO2(node);
+  const stateType = useO2(typeState);
+  const isPrimitive = Boolean(primitiveRefinery.refine(state));
+  return /* @__PURE__ */ jsxDEV15(Fragment4, { children: [
+    /* @__PURE__ */ jsxDEV15("header", { children: [
+      /* @__PURE__ */ jsxDEV15(
+        button.OpenClose,
+        {
+          isOpen: isOpen && !isPrimitive,
+          setIsOpen,
+          disabled: isPrimitive
+        },
+        void 0,
+        false,
+        {
+          fileName: "../src/react-devtools/StateIndex.tsx",
+          lineNumber: 45,
+          columnNumber: 5
+        },
+        this
+      ),
+      /* @__PURE__ */ jsxDEV15(
+        "label",
+        {
+          onClick: () => console.log(node, getState(node)),
+          onKeyUp: () => console.log(node, getState(node)),
+          children: [
+            /* @__PURE__ */ jsxDEV15("h2", { children: (_b = (_a2 = node.family) == null ? void 0 : _a2.subKey) != null ? _b : node.key }, void 0, false, {
+              fileName: "../src/react-devtools/StateIndex.tsx",
+              lineNumber: 54,
+              columnNumber: 6
+            }, this),
+            /* @__PURE__ */ jsxDEV15("span", { className: "type detail", children: [
+              "(",
+              stateType,
+              ")"
+            ] }, void 0, true, {
+              fileName: "../src/react-devtools/StateIndex.tsx",
+              lineNumber: 55,
+              columnNumber: 6
+            }, this)
+          ]
+        },
+        void 0,
+        true,
+        {
+          fileName: "../src/react-devtools/StateIndex.tsx",
+          lineNumber: 50,
+          columnNumber: 5
+        },
+        this
+      ),
+      isPrimitive ? /* @__PURE__ */ jsxDEV15(StoreEditor, { token: node }, void 0, false, {
+        fileName: "../src/react-devtools/StateIndex.tsx",
+        lineNumber: 57,
+        columnNumber: 20
+      }, this) : null
+    ] }, void 0, true, {
+      fileName: "../src/react-devtools/StateIndex.tsx",
+      lineNumber: 44,
+      columnNumber: 4
+    }, this),
+    isOpen && !isPrimitive ? /* @__PURE__ */ jsxDEV15("main", { children: /* @__PURE__ */ jsxDEV15(StoreEditor, { token: node }, void 0, false, {
+      fileName: "../src/react-devtools/StateIndex.tsx",
+      lineNumber: 61,
+      columnNumber: 6
+    }, this) }, void 0, false, {
+      fileName: "../src/react-devtools/StateIndex.tsx",
+      lineNumber: 60,
+      columnNumber: 5
+    }, this) : null
+  ] }, void 0, true, {
+    fileName: "../src/react-devtools/StateIndex.tsx",
+    lineNumber: 43,
+    columnNumber: 3
+  }, this);
+};
+var StateIndexTreeNode = ({ node, isOpenState }) => {
+  const [isOpen, setIsOpen] = useIO2(isOpenState);
+  Object.entries(node.familyMembers).forEach(([key, childNode]) => {
+    findViewIsOpenState(key);
+    findStateTypeState(childNode);
+  });
+  return /* @__PURE__ */ jsxDEV15(Fragment4, { children: [
+    /* @__PURE__ */ jsxDEV15("header", { children: [
+      /* @__PURE__ */ jsxDEV15(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
+        fileName: "../src/react-devtools/StateIndex.tsx",
+        lineNumber: 81,
+        columnNumber: 5
+      }, this),
+      /* @__PURE__ */ jsxDEV15("label", { children: [
+        /* @__PURE__ */ jsxDEV15("h2", { children: node.key }, void 0, false, {
+          fileName: "../src/react-devtools/StateIndex.tsx",
+          lineNumber: 83,
+          columnNumber: 6
+        }, this),
+        /* @__PURE__ */ jsxDEV15("span", { className: "type detail", children: " (family)" }, void 0, false, {
+          fileName: "../src/react-devtools/StateIndex.tsx",
+          lineNumber: 84,
+          columnNumber: 6
+        }, this)
+      ] }, void 0, true, {
+        fileName: "../src/react-devtools/StateIndex.tsx",
+        lineNumber: 82,
+        columnNumber: 5
+      }, this)
+    ] }, void 0, true, {
+      fileName: "../src/react-devtools/StateIndex.tsx",
+      lineNumber: 80,
+      columnNumber: 4
+    }, this),
+    isOpen ? Object.entries(node.familyMembers).map(([key, childNode]) => /* @__PURE__ */ jsxDEV15(
+      StateIndexNode,
+      {
+        node: childNode,
+        isOpenState: findViewIsOpenState(childNode.key),
+        typeState: findStateTypeState(childNode)
+      },
+      key,
+      false,
+      {
+        fileName: "../src/react-devtools/StateIndex.tsx",
+        lineNumber: 89,
+        columnNumber: 7
+      },
+      this
+    )) : null
+  ] }, void 0, true, {
+    fileName: "../src/react-devtools/StateIndex.tsx",
+    lineNumber: 79,
+    columnNumber: 3
+  }, this);
+};
+var StateIndexNode = ({ node, isOpenState, typeState }) => {
+  if (node.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV15("section", { className: "node state", children: `type` in node ? /* @__PURE__ */ jsxDEV15(
+    StateIndexLeafNode,
+    {
+      node,
+      isOpenState,
+      typeState
+    },
+    void 0,
+    false,
+    {
+      fileName: "../src/react-devtools/StateIndex.tsx",
+      lineNumber: 114,
+      columnNumber: 5
+    },
+    this
+  ) : /* @__PURE__ */ jsxDEV15(StateIndexTreeNode, { node, isOpenState }, void 0, false, {
+    fileName: "../src/react-devtools/StateIndex.tsx",
+    lineNumber: 120,
+    columnNumber: 5
+  }, this) }, void 0, false, {
+    fileName: "../src/react-devtools/StateIndex.tsx",
+    lineNumber: 112,
+    columnNumber: 3
+  }, this);
+};
+var StateIndex = ({ tokenIndex }) => {
+  const tokenIds = useO2(tokenIndex);
+  return /* @__PURE__ */ jsxDEV15("article", { className: "index state_index", children: Object.entries(tokenIds).filter(([key]) => !key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).sort().map(([key, node]) => {
+    return /* @__PURE__ */ jsxDEV15(
+      StateIndexNode,
+      {
+        node,
+        isOpenState: findViewIsOpenState(node.key),
+        typeState: findStateTypeState(node)
+      },
+      key,
+      false,
+      {
+        fileName: "../src/react-devtools/StateIndex.tsx",
+        lineNumber: 143,
+        columnNumber: 7
+      },
+      this
+    );
+  }) }, void 0, false, {
+    fileName: "../src/react-devtools/StateIndex.tsx",
+    lineNumber: 137,
+    columnNumber: 3
+  }, this);
+};
+
+// ../src/react-devtools/TimelineIndex.tsx
+import {
+  undo,
+  redo
+} from "atom.io";
+import { useIO as useIO3, useO as useO3 } from "atom.io/react";
+import { Fragment as Fragment6 } from "react";
+
+// ../src/react-devtools/Updates.tsx
+import { Fragment as Fragment5, jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
+var AtomUpdateFC = ({ atomUpdate }) => {
+  return /* @__PURE__ */ jsxDEV16(
+    "article",
+    {
+      className: "node atom_update",
+      onClick: () => console.log(atomUpdate),
+      onKeyUp: () => console.log(atomUpdate),
+      children: [
+        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: [
+          atomUpdate.key,
+          ": "
+        ] }, void 0, true, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 20,
+          columnNumber: 4
+        }, this),
+        /* @__PURE__ */ jsxDEV16("span", { children: /* @__PURE__ */ jsxDEV16("span", { className: "summary", children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary }, void 0, false, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 22,
+          columnNumber: 5
+        }, this) }, void 0, false, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 21,
+          columnNumber: 4
+        }, this)
+      ]
+    },
+    atomUpdate.key,
+    true,
+    {
+      fileName: "../src/react-devtools/Updates.tsx",
+      lineNumber: 14,
+      columnNumber: 3
+    },
+    this
+  );
+};
+var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
+  return /* @__PURE__ */ jsxDEV16("article", { className: "node transaction_update", children: [
+    /* @__PURE__ */ jsxDEV16("header", { children: /* @__PURE__ */ jsxDEV16("h4", { children: serialNumber }, void 0, false, {
+      fileName: "../src/react-devtools/Updates.tsx",
+      lineNumber: 37,
+      columnNumber: 5
+    }, this) }, void 0, false, {
+      fileName: "../src/react-devtools/Updates.tsx",
+      lineNumber: 36,
+      columnNumber: 4
+    }, this),
+    /* @__PURE__ */ jsxDEV16("main", { children: [
+      /* @__PURE__ */ jsxDEV16("section", { className: "transaction_params", children: [
+        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: "params: " }, void 0, false, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 41,
+          columnNumber: 6
+        }, this),
+        transactionUpdate.params.map((param, index) => {
+          return /* @__PURE__ */ jsxDEV16(
+            "article",
+            {
+              className: "node transaction_param",
+              onClick: () => console.log(transactionUpdate),
+              onKeyUp: () => console.log(transactionUpdate),
+              children: [
+                /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: [
+                  discoverType(param),
+                  ": "
+                ] }, void 0, true, {
+                  fileName: "../src/react-devtools/Updates.tsx",
+                  lineNumber: 50,
+                  columnNumber: 9
+                }, this),
+                /* @__PURE__ */ jsxDEV16("span", { className: "summary", children: typeof param === `object` && `type` in param && `target` in param ? /* @__PURE__ */ jsxDEV16(Fragment5, { children: JSON.stringify(param.type) }, void 0, false, {
+                  fileName: "../src/react-devtools/Updates.tsx",
+                  lineNumber: 55,
+                  columnNumber: 11
+                }, this) : /* @__PURE__ */ jsxDEV16(Fragment5, { children: JSON.stringify(param) }, void 0, false, {
+                  fileName: "../src/react-devtools/Updates.tsx",
+                  lineNumber: 57,
+                  columnNumber: 11
+                }, this) }, void 0, false, {
+                  fileName: "../src/react-devtools/Updates.tsx",
+                  lineNumber: 51,
+                  columnNumber: 9
+                }, this)
+              ]
+            },
+            `param` + index,
+            true,
+            {
+              fileName: "../src/react-devtools/Updates.tsx",
+              lineNumber: 44,
+              columnNumber: 8
+            },
+            this
+          );
+        })
+      ] }, void 0, true, {
+        fileName: "../src/react-devtools/Updates.tsx",
+        lineNumber: 40,
+        columnNumber: 5
+      }, this),
+      /* @__PURE__ */ jsxDEV16("section", { className: "node transaction_output", children: [
+        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: "output: " }, void 0, false, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 65,
+          columnNumber: 6
+        }, this),
+        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: discoverType(transactionUpdate.output) }, void 0, false, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 66,
+          columnNumber: 6
+        }, this),
+        transactionUpdate.output ? /* @__PURE__ */ jsxDEV16("span", { className: "summary", children: [
+          ": ",
+          JSON.stringify(transactionUpdate.output)
+        ] }, void 0, true, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 70,
+          columnNumber: 7
+        }, this) : null
+      ] }, void 0, true, {
+        fileName: "../src/react-devtools/Updates.tsx",
+        lineNumber: 64,
+        columnNumber: 5
+      }, this),
+      /* @__PURE__ */ jsxDEV16("section", { className: "transaction_impact", children: [
+        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: "impact: " }, void 0, false, {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 76,
+          columnNumber: 6
+        }, this),
+        transactionUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
+          return /* @__PURE__ */ jsxDEV16(
+            article.AtomUpdate,
+            {
+              serialNumber: index,
+              atomUpdate
+            },
+            `${transactionUpdate.key}:${index}:${atomUpdate.key}`,
+            false,
+            {
+              fileName: "../src/react-devtools/Updates.tsx",
+              lineNumber: 81,
+              columnNumber: 9
+            },
+            this
+          );
+        })
+      ] }, void 0, true, {
+        fileName: "../src/react-devtools/Updates.tsx",
+        lineNumber: 75,
+        columnNumber: 5
+      }, this)
+    ] }, void 0, true, {
+      fileName: "../src/react-devtools/Updates.tsx",
+      lineNumber: 39,
+      columnNumber: 4
+    }, this)
+  ] }, void 0, true, {
+    fileName: "../src/react-devtools/Updates.tsx",
+    lineNumber: 35,
     columnNumber: 3
   }, this);
 };
-var ReadonlySelectorEditor = ({ storeHooks, token }) => {
-  const data = storeHooks.useO(token);
-  return isPlainJson(data) ? /* @__PURE__ */ jsxDEV12(
-    JsonEditor,
-    {
-      data,
-      set: () => null,
-      schema: true,
-      isReadonly: () => true
-    },
-    void 0,
-    false,
-    {
-      fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 40,
-      columnNumber: 3
-    },
-    this
-  ) : /* @__PURE__ */ jsxDEV12("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV12(
-    ElasticInput,
-    {
-      value: data instanceof Set ? `Set ` + JSON.stringify([...data]) : data instanceof Map ? `Map ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
-      disabled: true
-    },
-    void 0,
-    false,
-    {
-      fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 48,
+var TimelineUpdateFC = ({ timelineUpdate }) => {
+  return /* @__PURE__ */ jsxDEV16("article", { className: "node timeline_update", children: [
+    /* @__PURE__ */ jsxDEV16("header", { children: /* @__PURE__ */ jsxDEV16("h4", { children: [
+      timelineUpdate.timestamp,
+      ": ",
+      timelineUpdate.type,
+      " (",
+      timelineUpdate.key,
+      ")"
+    ] }, void 0, true, {
+      fileName: "../src/react-devtools/Updates.tsx",
+      lineNumber: 100,
+      columnNumber: 5
+    }, this) }, void 0, false, {
+      fileName: "../src/react-devtools/Updates.tsx",
+      lineNumber: 99,
       columnNumber: 4
-    },
-    this
-  ) }, void 0, false, {
-    fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 47,
+    }, this),
+    /* @__PURE__ */ jsxDEV16("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
+      return /* @__PURE__ */ jsxDEV16(
+        article.AtomUpdate,
+        {
+          serialNumber: index,
+          atomUpdate
+        },
+        `${timelineUpdate.key}:${index}:${atomUpdate.key}`,
+        false,
+        {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 111,
+          columnNumber: 9
+        },
+        this
+      );
+    }) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
+      return /* @__PURE__ */ jsxDEV16(
+        article.AtomUpdate,
+        {
+          serialNumber: index,
+          atomUpdate
+        },
+        `${timelineUpdate.key}:${index}:${atomUpdate.key}`,
+        false,
+        {
+          fileName: "../src/react-devtools/Updates.tsx",
+          lineNumber: 123,
+          columnNumber: 9
+        },
+        this
+      );
+    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsxDEV16(
+      article.AtomUpdate,
+      {
+        serialNumber: timelineUpdate.timestamp,
+        atomUpdate: timelineUpdate
+      },
+      void 0,
+      false,
+      {
+        fileName: "../src/react-devtools/Updates.tsx",
+        lineNumber: 131,
+        columnNumber: 6
+      },
+      this
+    ) : null }, void 0, false, {
+      fileName: "../src/react-devtools/Updates.tsx",
+      lineNumber: 105,
+      columnNumber: 4
+    }, this)
+  ] }, void 0, true, {
+    fileName: "../src/react-devtools/Updates.tsx",
+    lineNumber: 98,
     columnNumber: 3
   }, this);
 };
-var StoreEditor = ({ storeHooks, token }) => {
-  if (token.type === `readonly_selector`) {
-    return /* @__PURE__ */ jsxDEV12(ReadonlySelectorEditor, { storeHooks, token }, void 0, false, {
-      fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 69,
-      columnNumber: 10
-    }, this);
-  }
-  return /* @__PURE__ */ jsxDEV12(StateEditor, { storeHooks, token }, void 0, false, {
-    fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 71,
+var article = {
+  AtomUpdate: AtomUpdateFC,
+  TransactionUpdate: TransactionUpdateFC,
+  TimelineUpdate: TimelineUpdateFC
+};
+
+// ../src/react-devtools/TimelineIndex.tsx
+import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
+var YouAreHere = () => {
+  return /* @__PURE__ */ jsxDEV17("span", { className: "you_are_here", children: "you are here" }, void 0, false, {
+    fileName: "../src/react-devtools/TimelineIndex.tsx",
+    lineNumber: 17,
     columnNumber: 9
   }, this);
 };
-
-// ../src/react-devtools/TokenList.tsx
-import { Fragment as Fragment4, jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
-var TokenList = ({ storeHooks, tokenIndex }) => {
-  const tokenIds = storeHooks.useO(tokenIndex);
-  return /* @__PURE__ */ jsxDEV13(Fragment4, { children: Object.entries(tokenIds).map(([key, token]) => {
-    let logState;
-    return /* @__PURE__ */ jsxDEV13(Fragment3, { children: key.startsWith(`\u{1F441}\u200D\u{1F5E8}_`) ? null : /* @__PURE__ */ jsxDEV13("div", { className: "node", children: `type` in token ? (logState = () => console.log(token, getState(token)), /* @__PURE__ */ jsxDEV13(Fragment4, { children: [
-      /* @__PURE__ */ jsxDEV13("label", { onClick: logState, onKeyUp: logState, children: key }, void 0, false, {
-        fileName: "../src/react-devtools/TokenList.tsx",
-        lineNumber: 39,
-        columnNumber: 13
-      }, this),
-      /* @__PURE__ */ jsxDEV13(StoreEditor, { storeHooks, token }, void 0, false, {
-        fileName: "../src/react-devtools/TokenList.tsx",
-        lineNumber: 42,
-        columnNumber: 13
-      }, this)
-    ] }, void 0, true, {
-      fileName: "../src/react-devtools/TokenList.tsx",
-      lineNumber: 38,
-      columnNumber: 12
-    }, this)) : recordToEntries(token.familyMembers).map(([key2, token2]) => /* @__PURE__ */ jsxDEV13(Fragment4, { children: [
-      /* @__PURE__ */ jsxDEV13("label", { children: key2 }, void 0, false, {
-        fileName: "../src/react-devtools/TokenList.tsx",
-        lineNumber: 47,
-        columnNumber: 13
+var TimelineLog = ({ token, isOpenState, timelineState }) => {
+  const timeline = useO3(timelineState);
+  const [isOpen, setIsOpen] = useIO3(isOpenState);
+  return /* @__PURE__ */ jsxDEV17("section", { className: "node timeline_log", children: [
+    /* @__PURE__ */ jsxDEV17("header", { children: [
+      /* @__PURE__ */ jsxDEV17(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
+        fileName: "../src/react-devtools/TimelineIndex.tsx",
+        lineNumber: 31,
+        columnNumber: 5
       }, this),
-      /* @__PURE__ */ jsxDEV13("div", { className: "node", children: [
-        key2,
-        ":",
-        /* @__PURE__ */ jsxDEV13(StoreEditor, { storeHooks, token: token2 }, void 0, false, {
-          fileName: "../src/react-devtools/TokenList.tsx",
-          lineNumber: 50,
-          columnNumber: 14
+      /* @__PURE__ */ jsxDEV17("label", { children: [
+        /* @__PURE__ */ jsxDEV17("h2", { children: token.key }, void 0, false, {
+          fileName: "../src/react-devtools/TimelineIndex.tsx",
+          lineNumber: 33,
+          columnNumber: 6
+        }, this),
+        /* @__PURE__ */ jsxDEV17("span", { className: "detail length", children: [
+          "(",
+          timeline.at,
+          "/",
+          timeline.history.length,
+          ")"
+        ] }, void 0, true, {
+          fileName: "../src/react-devtools/TimelineIndex.tsx",
+          lineNumber: 34,
+          columnNumber: 6
+        }, this),
+        /* @__PURE__ */ jsxDEV17("span", { className: "gap" }, void 0, false, {
+          fileName: "../src/react-devtools/TimelineIndex.tsx",
+          lineNumber: 37,
+          columnNumber: 6
+        }, this),
+        /* @__PURE__ */ jsxDEV17("nav", { children: [
+          /* @__PURE__ */ jsxDEV17(
+            "button",
+            {
+              type: "button",
+              onClick: () => undo(token),
+              disabled: timeline.at === 0,
+              children: "undo"
+            },
+            void 0,
+            false,
+            {
+              fileName: "../src/react-devtools/TimelineIndex.tsx",
+              lineNumber: 39,
+              columnNumber: 7
+            },
+            this
+          ),
+          /* @__PURE__ */ jsxDEV17(
+            "button",
+            {
+              type: "button",
+              onClick: () => redo(token),
+              disabled: timeline.at === timeline.history.length,
+              children: "redo"
+            },
+            void 0,
+            false,
+            {
+              fileName: "../src/react-devtools/TimelineIndex.tsx",
+              lineNumber: 46,
+              columnNumber: 7
+            },
+            this
+          )
+        ] }, void 0, true, {
+          fileName: "../src/react-devtools/TimelineIndex.tsx",
+          lineNumber: 38,
+          columnNumber: 6
         }, this)
-      ] }, key2, true, {
-        fileName: "../src/react-devtools/TokenList.tsx",
-        lineNumber: 48,
-        columnNumber: 13
+      ] }, void 0, true, {
+        fileName: "../src/react-devtools/TimelineIndex.tsx",
+        lineNumber: 32,
+        columnNumber: 5
       }, this)
     ] }, void 0, true, {
-      fileName: "../src/react-devtools/TokenList.tsx",
-      lineNumber: 46,
-      columnNumber: 12
+      fileName: "../src/react-devtools/TimelineIndex.tsx",
+      lineNumber: 30,
+      columnNumber: 4
+    }, this),
+    isOpen ? /* @__PURE__ */ jsxDEV17("main", { children: timeline.history.map((update, index) => /* @__PURE__ */ jsxDEV17(Fragment6, { children: [
+      index === timeline.at ? /* @__PURE__ */ jsxDEV17(YouAreHere, {}, void 0, false, {
+        fileName: "../src/react-devtools/TimelineIndex.tsx",
+        lineNumber: 60,
+        columnNumber: 33
+      }, this) : null,
+      /* @__PURE__ */ jsxDEV17(article.TimelineUpdate, { timelineUpdate: update }, void 0, false, {
+        fileName: "../src/react-devtools/TimelineIndex.tsx",
+        lineNumber: 61,
+        columnNumber: 8
+      }, this),
+      index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ jsxDEV17(YouAreHere, {}, void 0, false, {
+        fileName: "../src/react-devtools/TimelineIndex.tsx",
+        lineNumber: 64,
+        columnNumber: 9
+      }, this) : null
+    ] }, update.key + index + timeline.at, true, {
+      fileName: "../src/react-devtools/TimelineIndex.tsx",
+      lineNumber: 59,
+      columnNumber: 7
     }, this)) }, void 0, false, {
-      fileName: "../src/react-devtools/TokenList.tsx",
-      lineNumber: 34,
-      columnNumber: 8
-    }, this) }, key, false, {
-      fileName: "../src/react-devtools/TokenList.tsx",
-      lineNumber: 32,
-      columnNumber: 6
-    }, this);
+      fileName: "../src/react-devtools/TimelineIndex.tsx",
+      lineNumber: 57,
+      columnNumber: 5
+    }, this) : null
+  ] }, void 0, true, {
+    fileName: "../src/react-devtools/TimelineIndex.tsx",
+    lineNumber: 29,
+    columnNumber: 3
+  }, this);
+};
+var TimelineIndex = () => {
+  const tokenIds = useO3(timelineIndex);
+  return /* @__PURE__ */ jsxDEV17("article", { className: "index timeline_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ jsxDEV17(
+      TimelineLog,
+      {
+        token,
+        isOpenState: findViewIsOpenState(token.key),
+        timelineState: findTimelineState(token.key)
+      },
+      token.key,
+      false,
+      {
+        fileName: "../src/react-devtools/TimelineIndex.tsx",
+        lineNumber: 82,
+        columnNumber: 7
+      },
+      this
+    );
   }) }, void 0, false, {
-    fileName: "../src/react-devtools/TokenList.tsx",
-    lineNumber: 28,
+    fileName: "../src/react-devtools/TimelineIndex.tsx",
+    lineNumber: 77,
     columnNumber: 3
   }, this);
 };
 
-// ../src/web-effects/storage.ts
-var persistAtom = (storage) => ({ stringify, parse }) => (key) => ({ setSelf, onSet }) => {
-  const savedValue = storage.getItem(key);
-  if (savedValue != null)
-    setSelf(parse(savedValue));
-  onSet(({ newValue }) => {
-    if (newValue == null) {
-      storage.removeItem(key);
-      return;
-    }
-    storage.setItem(key, stringify(newValue));
-  });
+// ../src/react-devtools/TransactionIndex.tsx
+import { useIO as useIO4, useO as useO4 } from "atom.io/react";
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+var TransactionLog = ({ token, isOpenState, logState }) => {
+  const log = useO4(logState);
+  const [isOpen, setIsOpen] = useIO4(isOpenState);
+  return /* @__PURE__ */ jsxDEV18("section", { className: "node transaction_log", children: [
+    /* @__PURE__ */ jsxDEV18("header", { children: [
+      /* @__PURE__ */ jsxDEV18(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
+        fileName: "../src/react-devtools/TransactionIndex.tsx",
+        lineNumber: 31,
+        columnNumber: 5
+      }, this),
+      /* @__PURE__ */ jsxDEV18("label", { children: [
+        /* @__PURE__ */ jsxDEV18("h2", { children: token.key }, void 0, false, {
+          fileName: "../src/react-devtools/TransactionIndex.tsx",
+          lineNumber: 33,
+          columnNumber: 6
+        }, this),
+        /* @__PURE__ */ jsxDEV18("span", { className: "detail length", children: [
+          "(",
+          log.length,
+          ")"
+        ] }, void 0, true, {
+          fileName: "../src/react-devtools/TransactionIndex.tsx",
+          lineNumber: 34,
+          columnNumber: 6
+        }, this)
+      ] }, void 0, true, {
+        fileName: "../src/react-devtools/TransactionIndex.tsx",
+        lineNumber: 32,
+        columnNumber: 5
+      }, this)
+    ] }, void 0, true, {
+      fileName: "../src/react-devtools/TransactionIndex.tsx",
+      lineNumber: 30,
+      columnNumber: 4
+    }, this),
+    isOpen ? /* @__PURE__ */ jsxDEV18("main", { children: log.map((update, index) => /* @__PURE__ */ jsxDEV18(
+      article.TransactionUpdate,
+      {
+        serialNumber: index,
+        transactionUpdate: update
+      },
+      update.key + index,
+      false,
+      {
+        fileName: "../src/react-devtools/TransactionIndex.tsx",
+        lineNumber: 40,
+        columnNumber: 7
+      },
+      this
+    )) }, void 0, false, {
+      fileName: "../src/react-devtools/TransactionIndex.tsx",
+      lineNumber: 38,
+      columnNumber: 5
+    }, this) : null
+  ] }, void 0, true, {
+    fileName: "../src/react-devtools/TransactionIndex.tsx",
+    lineNumber: 29,
+    columnNumber: 3
+  }, this);
+};
+var TransactionIndex = () => {
+  const tokenIds = useO4(transactionIndex);
+  return /* @__PURE__ */ jsxDEV18("article", { className: "index transaction_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ jsxDEV18(
+      TransactionLog,
+      {
+        token,
+        isOpenState: findViewIsOpenState(token.key),
+        logState: findTransactionLogState(token.key)
+      },
+      token.key,
+      false,
+      {
+        fileName: "../src/react-devtools/TransactionIndex.tsx",
+        lineNumber: 60,
+        columnNumber: 7
+      },
+      this
+    );
+  }) }, void 0, false, {
+    fileName: "../src/react-devtools/TransactionIndex.tsx",
+    lineNumber: 55,
+    columnNumber: 3
+  }, this);
 };
-var lazyLocalStorageEffect = persistAtom(localStorage)(JSON);
 
 // ../src/react-devtools/AtomIODevtools.tsx
-import { Fragment as Fragment5, jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
-var { atomTokenIndexState, selectorTokenIndexState } = __INTERNAL__.META.attachMetaState();
-var devtoolsAreOpenState = atom({
-  key: `\u{1F441}\u200D\u{1F5E8}_devtools_are_open`,
-  default: true,
-  effects: [lazyLocalStorageEffect(`\u{1F441}\u200D\u{1F5E8}_devtools_are_open`)]
-});
-var composeDevtools = (storeHooks) => {
-  const Devtools = () => {
-    const constraintsRef = useRef4(null);
-    const [devtoolsAreOpen, setDevtoolsAreOpen] = storeHooks.useIO(devtoolsAreOpenState);
-    const mouseHasMoved = useRef4(false);
-    return /* @__PURE__ */ jsxDEV14(Fragment5, { children: [
-      /* @__PURE__ */ jsxDEV14(
-        motion.span,
-        {
-          ref: constraintsRef,
-          className: "atom_io_devtools_zone",
-          style: {
-            position: `fixed`,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            pointerEvents: `none`
-          }
-        },
-        void 0,
-        false,
-        {
-          fileName: "../src/react-devtools/AtomIODevtools.tsx",
-          lineNumber: 33,
-          columnNumber: 5
+import { Fragment as Fragment7, jsxDEV as jsxDEV19 } from "react/jsx-dev-runtime";
+var AtomIODevtools = () => {
+  const constraintsRef = useRef4(null);
+  const [devtoolsAreOpen, setDevtoolsAreOpen] = useIO5(devtoolsAreOpenState);
+  const [devtoolsView, setDevtoolsView] = useIO5(devtoolsViewSelectionState);
+  const devtoolsViewOptions = useO5(devtoolsViewOptionsState);
+  const mouseHasMoved = useRef4(false);
+  return /* @__PURE__ */ jsxDEV19(Fragment7, { children: [
+    /* @__PURE__ */ jsxDEV19(
+      motion.span,
+      {
+        ref: constraintsRef,
+        className: "atom_io_devtools_zone",
+        style: {
+          position: `fixed`,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          pointerEvents: `none`
+        }
+      },
+      void 0,
+      false,
+      {
+        fileName: "../src/react-devtools/AtomIODevtools.tsx",
+        lineNumber: 30,
+        columnNumber: 4
+      },
+      this
+    ),
+    /* @__PURE__ */ jsxDEV19(
+      motion.main,
+      {
+        drag: true,
+        dragConstraints: constraintsRef,
+        className: "atom_io_devtools",
+        transition: spring,
+        style: devtoolsAreOpen ? {} : {
+          backgroundColor: `#0000`,
+          borderColor: `#0000`,
+          maxHeight: 28,
+          maxWidth: 33
         },
-        this
-      ),
-      /* @__PURE__ */ jsxDEV14(
-        motion.main,
-        {
-          drag: true,
-          dragConstraints: constraintsRef,
-          className: "atom_io_devtools",
-          transition: spring,
-          style: devtoolsAreOpen ? {} : {
-            backgroundColor: `#0000`,
-            borderColor: `#0000`,
-            maxHeight: 28,
-            maxWidth: 33
-          },
-          children: [
-            devtoolsAreOpen ? /* @__PURE__ */ jsxDEV14(Fragment5, { children: [
-              /* @__PURE__ */ jsxDEV14(motion.header, { children: /* @__PURE__ */ jsxDEV14("h1", { children: "atom.io" }, void 0, false, {
+        children: [
+          devtoolsAreOpen ? /* @__PURE__ */ jsxDEV19(Fragment7, { children: [
+            /* @__PURE__ */ jsxDEV19(motion.header, { children: [
+              /* @__PURE__ */ jsxDEV19("h1", { children: "atom.io" }, void 0, false, {
                 fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                lineNumber: 64,
-                columnNumber: 9
-              }, this) }, void 0, false, {
-                fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                lineNumber: 63,
+                lineNumber: 61,
                 columnNumber: 8
               }, this),
-              /* @__PURE__ */ jsxDEV14(motion.main, { children: /* @__PURE__ */ jsxDEV14(LayoutGroup, { children: [
-                /* @__PURE__ */ jsxDEV14("section", { children: [
-                  /* @__PURE__ */ jsxDEV14("h2", { children: "atoms" }, void 0, false, {
-                    fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                    lineNumber: 69,
-                    columnNumber: 11
-                  }, this),
-                  /* @__PURE__ */ jsxDEV14(
-                    TokenList,
-                    {
-                      storeHooks,
-                      tokenIndex: atomTokenIndexState
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                      lineNumber: 70,
-                      columnNumber: 11
-                    },
-                    this
-                  )
-                ] }, void 0, true, {
-                  fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                  lineNumber: 68,
-                  columnNumber: 10
-                }, this),
-                /* @__PURE__ */ jsxDEV14("section", { children: [
-                  /* @__PURE__ */ jsxDEV14("h2", { children: "selectors" }, void 0, false, {
-                    fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                    lineNumber: 76,
-                    columnNumber: 11
-                  }, this),
-                  /* @__PURE__ */ jsxDEV14(
-                    TokenList,
-                    {
-                      storeHooks,
-                      tokenIndex: selectorTokenIndexState
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                      lineNumber: 77,
-                      columnNumber: 11
-                    },
-                    this
-                  )
-                ] }, void 0, true, {
+              /* @__PURE__ */ jsxDEV19("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsxDEV19(
+                "button",
+                {
+                  type: "button",
+                  className: viewOption === devtoolsView ? `active` : ``,
+                  onClick: () => setDevtoolsView(viewOption),
+                  disabled: viewOption === devtoolsView,
+                  children: viewOption
+                },
+                viewOption,
+                false,
+                {
                   fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                  lineNumber: 75,
+                  lineNumber: 64,
                   columnNumber: 10
-                }, this)
-              ] }, void 0, true, {
-                fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                lineNumber: 67,
-                columnNumber: 9
-              }, this) }, void 0, false, {
+                },
+                this
+              )) }, void 0, false, {
                 fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                lineNumber: 66,
+                lineNumber: 62,
                 columnNumber: 8
               }, this)
             ] }, void 0, true, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
-              lineNumber: 62,
+              lineNumber: 60,
               columnNumber: 7
-            }, this) : null,
-            /* @__PURE__ */ jsxDEV14("footer", { children: /* @__PURE__ */ jsxDEV14(
-              "button",
-              {
-                type: "button",
-                onMouseDown: () => mouseHasMoved.current = false,
-                onMouseMove: () => mouseHasMoved.current = true,
-                onMouseUp: () => {
-                  if (!mouseHasMoved.current) {
-                    setDevtoolsAreOpen((open) => !open);
-                  }
-                },
-                children: "\u{1F441}\u200D\u{1F5E8}"
-              },
-              void 0,
-              false,
-              {
-                fileName: "../src/react-devtools/AtomIODevtools.tsx",
-                lineNumber: 87,
-                columnNumber: 7
+            }, this),
+            /* @__PURE__ */ jsxDEV19(motion.main, { children: /* @__PURE__ */ jsxDEV19(LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsxDEV19(StateIndex, { tokenIndex: atomIndex }, void 0, false, {
+              fileName: "../src/react-devtools/AtomIODevtools.tsx",
+              lineNumber: 79,
+              columnNumber: 10
+            }, this) : devtoolsView === `selectors` ? /* @__PURE__ */ jsxDEV19(StateIndex, { tokenIndex: selectorIndex }, void 0, false, {
+              fileName: "../src/react-devtools/AtomIODevtools.tsx",
+              lineNumber: 81,
+              columnNumber: 10
+            }, this) : devtoolsView === `transactions` ? /* @__PURE__ */ jsxDEV19(TransactionIndex, {}, void 0, false, {
+              fileName: "../src/react-devtools/AtomIODevtools.tsx",
+              lineNumber: 83,
+              columnNumber: 10
+            }, this) : devtoolsView === `timelines` ? /* @__PURE__ */ jsxDEV19(TimelineIndex, {}, void 0, false, {
+              fileName: "../src/react-devtools/AtomIODevtools.tsx",
+              lineNumber: 85,
+              columnNumber: 10
+            }, this) : null }, void 0, false, {
+              fileName: "../src/react-devtools/AtomIODevtools.tsx",
+              lineNumber: 77,
+              columnNumber: 8
+            }, this) }, void 0, false, {
+              fileName: "../src/react-devtools/AtomIODevtools.tsx",
+              lineNumber: 76,
+              columnNumber: 7
+            }, this)
+          ] }, void 0, true, {
+            fileName: "../src/react-devtools/AtomIODevtools.tsx",
+            lineNumber: 59,
+            columnNumber: 6
+          }, this) : null,
+          /* @__PURE__ */ jsxDEV19("footer", { children: /* @__PURE__ */ jsxDEV19(
+            "button",
+            {
+              type: "button",
+              onMouseDown: () => mouseHasMoved.current = false,
+              onMouseMove: () => mouseHasMoved.current = true,
+              onMouseUp: () => {
+                if (!mouseHasMoved.current) {
+                  setDevtoolsAreOpen((open) => !open);
+                }
               },
-              this
-            ) }, void 0, false, {
+              children: "\u{1F441}\u200D\u{1F5E8}"
+            },
+            void 0,
+            false,
+            {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
-              lineNumber: 86,
+              lineNumber: 92,
               columnNumber: 6
-            }, this)
-          ]
-        },
-        void 0,
-        true,
-        {
-          fileName: "../src/react-devtools/AtomIODevtools.tsx",
-          lineNumber: 45,
-          columnNumber: 5
-        },
-        this
-      )
-    ] }, void 0, true, {
-      fileName: "../src/react-devtools/AtomIODevtools.tsx",
-      lineNumber: 32,
-      columnNumber: 4
-    }, this);
-  };
-  return Devtools;
+            },
+            this
+          ) }, void 0, false, {
+            fileName: "../src/react-devtools/AtomIODevtools.tsx",
+            lineNumber: 91,
+            columnNumber: 5
+          }, this)
+        ]
+      },
+      void 0,
+      true,
+      {
+        fileName: "../src/react-devtools/AtomIODevtools.tsx",
+        lineNumber: 42,
+        columnNumber: 4
+      },
+      this
+    )
+  ] }, void 0, true, {
+    fileName: "../src/react-devtools/AtomIODevtools.tsx",
+    lineNumber: 29,
+    columnNumber: 3
+  }, this);
 };
-var AtomIODevtools = composeDevtools({ useI, useO, useIO });
+
+// ../src/react-devtools/index.ts
+var {
+  atomIndex,
+  selectorIndex,
+  transactionIndex,
+  findTransactionLogState,
+  timelineIndex,
+  findTimelineState
+} = attachIntrospectionStates();
+var devtoolsAreOpenState = atom({
+  key: `\u{1F441}\u200D\u{1F5E8} Devtools Are Open`,
+  default: true,
+  effects: [lazyLocalStorageEffect(`\u{1F441}\u200D\u{1F5E8} Devtools Are Open`)]
+});
+var devtoolsViewSelectionState = atom({
+  key: `\u{1F441}\u200D\u{1F5E8} Devtools View Selection`,
+  default: `atoms`,
+  effects: [lazyLocalStorageEffect(`\u{1F441}\u200D\u{1F5E8} Devtools View`)]
+});
+var devtoolsViewOptionsState = atom({
+  key: `\u{1F441}\u200D\u{1F5E8} Devtools View Options`,
+  default: [`atoms`, `selectors`, `transactions`, `timelines`],
+  effects: [lazyLocalStorageEffect(`\u{1F441}\u200D\u{1F5E8} Devtools View Options`)]
+});
+var findViewIsOpenState = atomFamily({
+  key: `\u{1F441}\u200D\u{1F5E8} Devtools View Is Open`,
+  default: false,
+  effects: (key) => [lazyLocalStorageEffect(key + `:view-is-open`)]
+});
+var primitiveRefinery = new Refinery({
+  number: (input) => typeof input === `number`,
+  string: (input) => typeof input === `string`,
+  boolean: (input) => typeof input === `boolean`,
+  null: (input) => input === null
+});
+var jsonTreeRefinery = new Refinery({
+  object: isPlainObject,
+  array: (input) => Array.isArray(input)
+});
+var prettyJson = new Differ(primitiveRefinery, jsonTreeRefinery, {
+  number: diffNumber,
+  string: diffString,
+  boolean: diffBoolean,
+  null: () => ({ summary: `No Change` }),
+  object: diffObject,
+  array: diffArray
+});
 export {
   AtomIODevtools,
-  composeDevtools
+  atomIndex,
+  devtoolsAreOpenState,
+  devtoolsViewOptionsState,
+  devtoolsViewSelectionState,
+  findTimelineState,
+  findTransactionLogState,
+  findViewIsOpenState,
+  jsonTreeRefinery,
+  prettyJson,
+  primitiveRefinery,
+  selectorIndex,
+  timelineIndex,
+  transactionIndex
 };
 //# sourceMappingURL=index.mjs.map