atom.io 0.6.7 → 0.6.8

package/react-devtools/dist/index.js

@@ -127,6 +127,18 @@ var doNothing = () => void 0;
 var become = (nextVersionOfThing) => (originalThing) => nextVersionOfThing instanceof Function ? nextVersionOfThing(
   originalThing instanceof Function ? originalThing() : originalThing
 ) : nextVersionOfThing;
+var isModifier = (validate) => (sample) => {
+  const sampleIsValid = validate(sample);
+  if (!sampleIsValid) {
+    throw new Error(`Invalid test case: JSON.stringify(${sample})`);
+  }
+  return (input) => {
+    if (typeof input !== `function`)
+      return false;
+    const testResult = input(sample);
+    return validate(testResult);
+  };
+};
 var pass = (...params) => (fn) => fn(...params);
 var raiseError = (message) => {
   throw new Error(message);
@@ -959,34 +971,6 @@ function atom__INTERNAL(options, family, store = IMPLICIT.STORE) {
   return token;
 }
 
-// ../../anvl/src/json/index.ts
-var import_function9 = require("fp-ts/function");
-
-// ../../anvl/src/json/refine.ts
-var import_boolean = require("fp-ts/boolean");
-var import_number = require("fp-ts/number");
-var import_string3 = require("fp-ts/string");
-var JSON_PROTOTYPES = [
-  `Array`,
-  `Boolean`,
-  `Number`,
-  `Object`,
-  `String`
-];
-var refineJsonType = (data) => data === null ? { type: `null`, data: null } : (0, import_boolean.isBoolean)(data) ? { type: `boolean`, data } : (0, import_number.isNumber)(data) ? { type: `number`, data } : (0, import_string3.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) => {
-  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 = [
@@ -1011,20 +995,23 @@ 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(
-        {
+      let token;
+      if (existing) {
+        token = deposit(existing);
+      } else {
+        const individualOptions = {
           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
-      );
+          default: options.default instanceof Function ? options.default(key) : options.default
+        };
+        if (options.effects) {
+          individualOptions.effects = options.effects(key);
+        }
+        token = atom__INTERNAL(individualOptions, family, store);
+      }
       subject.next(token);
       return token;
     },
@@ -1135,7 +1122,7 @@ var setState__INTERNAL = (state, value, store = IMPLICIT.STORE) => {
   }
 };
 
-// ../src/internal/subject.ts
+// ../../anvl/reactivity/subject.ts
 var Subject = class {
   constructor() {
     this.subscribers = [];
@@ -1407,7 +1394,7 @@ var attachTimelineFamily = (store = import_atom3.__INTERNAL__.IMPLICIT.STORE) =>
         return (_a2 = store.timelines.get(key)) != null ? _a2 : {
           key: ``,
           at: 0,
-          timeTraveling: false,
+          timeTraveling: null,
           history: [],
           selectorTime: null,
           transactionKey: null,
@@ -1568,13 +1555,38 @@ var persistAtom = (storage) => ({ stringify, parse }) => (key) => ({ setSelf, on
 var lazyLocalStorageEffect = persistAtom(localStorage)(JSON);
 
 // ../src/react-devtools/AtomIODevtools.tsx
-var import_react11 = require("atom.io/react");
+var import_react12 = require("atom.io/react");
 var import_framer_motion = require("framer-motion");
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // ../src/react-devtools/StateIndex.tsx
 var import_atom8 = require("atom.io");
-var import_react7 = require("atom.io/react");
+var import_react8 = require("atom.io/react");
+
+// ../../anvl/src/refinement/refine-json.ts
+var import_boolean = require("fp-ts/boolean");
+var import_number = require("fp-ts/number");
+var import_string3 = require("fp-ts/string");
+var JSON_PROTOTYPES = [
+  `Array`,
+  `Boolean`,
+  `Number`,
+  `Object`,
+  `String`
+];
+var refineJsonType = (data) => data === null ? { type: `null`, data: null } : (0, import_boolean.isBoolean)(data) ? { type: `boolean`, data } : (0, import_number.isNumber)(data) ? { type: `number`, data } : (0, import_string3.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) => {
+  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;
+};
 
 // ../src/react-devtools/Button.tsx
 var import_jsx_dev_runtime = require("react/jsx-dev-runtime");
@@ -1603,7 +1615,16 @@ var button = {
 };
 
 // ../src/react-devtools/StateEditor.tsx
-var import_react6 = require("atom.io/react");
+var import_react7 = require("atom.io/react");
+
+// ../../hamr/src/react-json-editor/editors-by-type/utilities/array-elements.ts
+var makeElementSetters = (data, set) => data.map(
+  (value, index) => (newValue) => set(() => {
+    const newData = [...data];
+    newData[index] = become(newValue)(value);
+    return newData;
+  })
+);
 
 // ../../hamr/src/react-elastic-input/ElasticInput.tsx
 var import_react = require("react");
@@ -1692,12 +1713,15 @@ var import_react2 = require("react");
 // ../../anvl/src/number/clamp.ts
 var clampInto = (min, max) => (value) => value < min ? min : value > max ? max : value;
 
+// ../../anvl/src/number/wrap.ts
+var wrapInto = (min, max) => (value) => value < min ? max - (min - value) % (max - min) : min + (value - min) % (max - min);
+
 // ../../hamr/src/react-elastic-input/NumberInput.tsx
 var import_jsx_dev_runtime3 = require("react/jsx-dev-runtime");
 function round(value, decimalPlaces) {
   if (decimalPlaces === void 0)
     return value;
-  const factor = Math.pow(10, decimalPlaces);
+  const factor = 10 ** decimalPlaces;
   return Math.round(value * factor) / factor;
 }
 var VALID_NON_NUMBERS = [``, `-`, `.`, `-.`];
@@ -1792,7 +1816,7 @@ var NumberInput = ({
   return /* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)("span", { css: customCss, children: [
     label && /* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)("label", { htmlFor: id, children: label }, void 0, false, {
       fileName: "../../hamr/src/react-elastic-input/NumberInput.tsx",
-      lineNumber: 166,
+      lineNumber: 168,
       columnNumber: 14
     }, this),
     autoSize ? /* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)(
@@ -1813,7 +1837,7 @@ var NumberInput = ({
       false,
       {
         fileName: "../../hamr/src/react-elastic-input/NumberInput.tsx",
-        lineNumber: 168,
+        lineNumber: 170,
         columnNumber: 5
       },
       this
@@ -1835,14 +1859,14 @@ var NumberInput = ({
       false,
       {
         fileName: "../../hamr/src/react-elastic-input/NumberInput.tsx",
-        lineNumber: 181,
+        lineNumber: 183,
         columnNumber: 5
       },
       this
     )
   ] }, void 0, true, {
     fileName: "../../hamr/src/react-elastic-input/NumberInput.tsx",
-    lineNumber: 165,
+    lineNumber: 167,
     columnNumber: 3
   }, this);
 };
@@ -1905,15 +1929,6 @@ var TextInput = ({
   }, this);
 };
 
-// ../../hamr/src/react-json-editor/editors-by-type/utilities/array-elements.ts
-var makeElementSetters = (data, set) => data.map(
-  (value, index) => (newValue) => set(() => {
-    const newData = [...data];
-    newData[index] = become(newValue)(value);
-    return newData;
-  })
-);
-
 // ../../hamr/src/react-json-editor/editors-by-type/non-json.tsx
 var import_jsx_dev_runtime5 = require("react/jsx-dev-runtime");
 var NonJsonEditor = ({ data }) => {
@@ -1968,7 +1983,7 @@ var JsonEditor_INTERNAL = ({
         disabled,
         children: /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)(Components.DeleteIcon, {}, void 0, false, {
           fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-          lineNumber: 63,
+          lineNumber: 65,
           columnNumber: 7
         }, this)
       },
@@ -1976,14 +1991,14 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 59,
+        lineNumber: 61,
         columnNumber: 6
       },
       this
     ),
     HeaderDisplay && /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)(HeaderDisplay, { data, schema }, void 0, false, {
       fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-      lineNumber: 66,
+      lineNumber: 68,
       columnNumber: 23
     }, this),
     rename && /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)(Components.KeyWrapper, { children: /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)(
@@ -1997,13 +2012,13 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 69,
+        lineNumber: 71,
         columnNumber: 7
       },
       this
     ) }, void 0, false, {
       fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-      lineNumber: 68,
+      lineNumber: 70,
       columnNumber: 6
     }, this),
     /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)(
@@ -2023,7 +2038,7 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 76,
+        lineNumber: 78,
         columnNumber: 5
       },
       this
@@ -2036,7 +2051,7 @@ var JsonEditor_INTERNAL = ({
         disabled,
         children: Object.keys(SubEditors).map((type) => /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)("option", { value: type, children: type }, type, false, {
           fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-          lineNumber: 98,
+          lineNumber: 100,
           columnNumber: 8
         }, this))
       },
@@ -2044,18 +2059,18 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 88,
+        lineNumber: 90,
         columnNumber: 6
       },
       this
     ) : null
   ] }, void 0, true, {
     fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-    lineNumber: 57,
+    lineNumber: 59,
     columnNumber: 4
   }, this) }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-    lineNumber: 56,
+    lineNumber: 58,
     columnNumber: 3
   }, this);
 };
@@ -2108,7 +2123,7 @@ var import_number3 = require("fp-ts/number");
 var import_string6 = require("fp-ts/string");
 
 // ../../anvl/src/json-schema/integer.ts
-var import_function14 = require("fp-ts/function");
+var import_function13 = require("fp-ts/function");
 var isInteger = (input) => Number.isInteger(input);
 var parseInteger = (input) => {
   if (isInteger(input))
@@ -2134,7 +2149,7 @@ var IntegerParseError = class extends Error {
   }
 };
 var Int = Object.assign((input) => parseInteger(input), {
-  from: (input) => (0, import_function14.pipe)(
+  from: (input) => (0, import_function13.pipe)(
     input,
     String,
     parseFloat,
@@ -2435,7 +2450,7 @@ var findSubSchema = (schema) => {
   };
 };
 
-// ../../anvl/src/json/cast.ts
+// ../../anvl/src/json/cast-json.ts
 var stringToBoolean = (str) => str === `true`;
 var stringToNumber = (str) => Number(str);
 var stringToArray = (str) => str.split(`,`);
@@ -2477,7 +2492,9 @@ var nullToNumber = () => 0;
 var nullToBoolean = () => false;
 var nullToArray = () => [];
 var nullToObject = () => ({});
-var cast = (input) => {
+
+// ../../anvl/src/refinement/smart-cast-json.ts
+var castToJson = (input) => {
   const json = refineJsonType(input);
   return {
     to: {
@@ -2594,7 +2611,7 @@ var makePropertyRemovers = (data, set) => mapObject(
 var makePropertyRecasters = (data, set) => mapObject(
   data,
   (value, key) => (newType) => set(() => __spreadProps(__spreadValues({}, data), {
-    [key]: cast(value).to[newType]()
+    [key]: castToJson(value).to[newType]()
   }))
 );
 var makePropertyCreationInterface = (data, set) => (key, type) => (value) => set(__spreadProps(__spreadValues({}, data), { [key]: value != null ? value : JSON_DEFAULTS[type] }));
@@ -2783,11 +2800,7 @@ var BooleanEditor = ({
 }, this);
 var NullEditor = ({
   Components
-}) => /* @__PURE__ */ (0, import_jsx_dev_runtime9.jsxDEV)(Components.NullWrapper, { children: /* @__PURE__ */ (0, import_jsx_dev_runtime9.jsxDEV)(import_jsx_dev_runtime9.Fragment, {}, void 0, false, {
-  fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-  lineNumber: 24,
-  columnNumber: 3
-}, this) }, void 0, false, {
+}) => /* @__PURE__ */ (0, import_jsx_dev_runtime9.jsxDEV)(Components.NullWrapper, { children: '" "' }, void 0, false, {
   fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
   lineNumber: 23,
   columnNumber: 2
@@ -2809,13 +2822,13 @@ var NumberEditor = ({
   false,
   {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-    lineNumber: 36,
+    lineNumber: 34,
     columnNumber: 3
   },
   this
 ) }, void 0, false, {
   fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-  lineNumber: 35,
+  lineNumber: 33,
   columnNumber: 2
 }, this);
 var StringEditor = ({
@@ -2836,13 +2849,13 @@ var StringEditor = ({
     false,
     {
       fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-      lineNumber: 53,
+      lineNumber: 51,
       columnNumber: 4
     },
     this
   ) }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
-    lineNumber: 52,
+    lineNumber: 50,
     columnNumber: 3
   }, this);
 };
@@ -2933,7 +2946,7 @@ var import_jsx_dev_runtime11 = require("react/jsx-dev-runtime");
 var ErrorBoundary = class extends import_react4.Component {
   constructor(props) {
     super(props);
-    this.state = { error: void 0, errorInfo: void 0 };
+    this.state = {};
   }
   componentDidCatch(error, errorInfo) {
     var _a2, _b;
@@ -2959,7 +2972,7 @@ var import_jsx_dev_runtime12 = require("react/jsx-dev-runtime");
 var DEFAULT_JSON_EDITOR_COMPONENTS = {
   ErrorBoundary: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(ErrorBoundary, { children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 46,
+    lineNumber: 49,
     columnNumber: 35
   }, this),
   Button: ({ onClick, children, disabled }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(
@@ -2975,14 +2988,14 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
     false,
     {
       fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-      lineNumber: 48,
+      lineNumber: 51,
       columnNumber: 3
     },
     this
   ),
   EditorWrapper: ({ children, customCss, className }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("div", { className: `json_editor ` + className, css: customCss, children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 58,
+    lineNumber: 61,
     columnNumber: 3
   }, this),
   EditorLayout: ({
@@ -2996,98 +3009,98 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
     return /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(Wrapper, { children: [
       DeleteButton && /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(DeleteButton, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 72,
+        lineNumber: 75,
         columnNumber: 22
       }, this),
       Header && /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(Header, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 73,
+        lineNumber: 76,
         columnNumber: 16
       }, this),
       KeyInput && /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(KeyInput, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 74,
+        lineNumber: 77,
         columnNumber: 18
       }, this),
       TypeSelect && /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(TypeSelect, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 75,
+        lineNumber: 78,
         columnNumber: 20
       }, this),
       /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(ValueEditor, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 76,
+        lineNumber: 79,
         columnNumber: 5
       }, this)
     ] }, void 0, true, {
       fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-      lineNumber: 71,
+      lineNumber: 74,
       columnNumber: 4
     }, this);
   },
   ArrayWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("div", { className: "json_editor_array", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 81,
+    lineNumber: 84,
     columnNumber: 3
   }, this),
   ObjectWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("div", { className: "json_editor_object", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 84,
+    lineNumber: 87,
     columnNumber: 3
   }, this),
   StringWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_string", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 87,
+    lineNumber: 90,
     columnNumber: 3
   }, this),
   NumberWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_number", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 90,
+    lineNumber: 93,
     columnNumber: 3
   }, this),
   BooleanWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_boolean", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 93,
+    lineNumber: 96,
     columnNumber: 3
   }, this),
   NullWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_null", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 96,
+    lineNumber: 99,
     columnNumber: 3
   }, this),
   MissingPropertyWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("div", { className: "json_editor_property json_editor_missing", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 99,
+    lineNumber: 102,
     columnNumber: 3
   }, this),
   MiscastPropertyWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("div", { className: "json_editor_property json_editor_miscast", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 102,
+    lineNumber: 105,
     columnNumber: 3
   }, this),
   IllegalPropertyWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_property json_editor_illegal", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 105,
+    lineNumber: 108,
     columnNumber: 3
   }, this),
   OfficialPropertyWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_property json_editor_official", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 108,
+    lineNumber: 111,
     columnNumber: 3
   }, this),
   UnofficialPropertyWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_property json_editor_unofficial", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 111,
+    lineNumber: 114,
     columnNumber: 3
   }, this),
   DeleteIcon: () => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_icon json_editor_delete", children: "x" }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 116,
+    lineNumber: 119,
     columnNumber: 3
   }, this),
   KeyWrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("span", { className: "json_editor_key", children }, void 0, false, {
     fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-    lineNumber: 119,
+    lineNumber: 122,
     columnNumber: 3
   }, this)
 };
@@ -3138,7 +3151,7 @@ var JsonEditor = ({
     false,
     {
       fileName: "../../hamr/src/react-json-editor/developer-interface.tsx",
-      lineNumber: 78,
+      lineNumber: 77,
       columnNumber: 3
     },
     this
@@ -3155,15 +3168,522 @@ var SubEditors = {
   string: StringEditor
 };
 
-// ../src/react-devtools/StateEditor.tsx
+// ../../hamr/src/react-data-designer/RelationEditor.module.scss
+var RelationEditor_module_default = {};
+
+// ../../hamr/src/react-id/Id.tsx
+var import_react6 = require("@floating-ui/react");
+var import_function22 = require("fp-ts/function");
+var React = __toESM(require("react"));
+
+// ../../anvl/src/string/string-to-color.ts
+function stringToColor(input) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  let hexColor = (hash & 16777215).toString(16);
+  while (hexColor.length < 6) {
+    hexColor = `0` + hexColor;
+  }
+  return `#${hexColor}`;
+}
+
+// ../../luum/src/constants/index.ts
+var CHANNEL_SPECIFIC_LUM = {
+  R: 0.3,
+  G: 0.5,
+  B: 0.2
+};
+
+// ../../luum/src/constants/filters.ts
+var unfiltered = [
+  { sat: 255, hue: 0 },
+  { sat: 255, hue: 360 }
+];
+
+// ../../luum/src/export/channelsToHex.ts
+var channelsToHex = (channels) => `#${Object.values(channels).map((channel) => {
+  let channelHex = channel.toString(16);
+  if (channelHex.length === 1)
+    channelHex = 0 + channelHex;
+  return channelHex;
+}).join(``)}`;
+var channelsToHex_default = channelsToHex;
+
+// ../../luum/src/import/hueToRelativeChannels.ts
+var hueToRelativeChannels_default = (hue) => {
+  const hueWrapped = wrapInto(0, 360)(hue);
+  const hueReduced = hueWrapped / 60;
+  const hueInteger = Math.floor(hueReduced);
+  const hueDecimal = hueReduced - hueInteger;
+  const x = hueDecimal;
+  const y = 1 - hueDecimal;
+  switch (hueInteger) {
+    case 0:
+      return [1, x, 0];
+    case 1:
+      return [y, 1, 0];
+    case 2:
+      return [0, 1, x];
+    case 3:
+      return [0, y, 1];
+    case 4:
+      return [x, 0, 1];
+    case 5:
+      return [1, 0, y];
+    default:
+      throw new Error(`invalid hue served: ${hue}`);
+  }
+};
+
+// ../../luum/src/solveFor/hueFromChannels.ts
+var hueFromChannels = ({ R, G, B }) => {
+  let hue = 0;
+  if (R > G && G >= B)
+    hue = 60 * (0 + (G - B) / (R - B));
+  if (G >= R && R > B)
+    hue = 60 * (2 - (R - B) / (G - B));
+  if (G > B && B >= R)
+    hue = 60 * (2 + (B - R) / (G - R));
+  if (B >= G && G > R)
+    hue = 60 * (4 - (G - R) / (B - R));
+  if (B > R && R >= G)
+    hue = 60 * (4 + (R - G) / (B - G));
+  if (R >= B && B > G)
+    hue = 60 * (6 - (B - G) / (R - G));
+  return hue;
+};
+var hueFromChannels_default = hueFromChannels;
+
+// ../../luum/src/solveFor/lumFromChannels.ts
+var lumFromChannels = ({ R, G, B }) => {
+  const lum = CHANNEL_SPECIFIC_LUM.R * R / 255 + CHANNEL_SPECIFIC_LUM.G * G / 255 + CHANNEL_SPECIFIC_LUM.B * B / 255;
+  return lum;
+};
+var lumFromChannels_default = lumFromChannels;
+
+// ../../luum/src/solveFor/maxSatForHueInFilter.ts
+var maxSatForHueInFilter_default = (hue, filter) => {
+  let maxSat = 255;
+  const hueWrapped = wrapInto(0, 360)(hue);
+  for (let a2 = -1, b2 = 0; b2 < filter.length; a2++, b2++) {
+    a2 = wrapInto(0, filter.length)(a2);
+    const hueDoubleWrapped = a2 > b2 ? wrapInto(-180, 180)(hueWrapped) : void 0;
+    const tuningPointA = filter[a2];
+    const tuningPointB = filter[b2];
+    const hueA = a2 > b2 ? wrapInto(-180, 180)(tuningPointA.hue) : tuningPointA.hue;
+    const hueB = tuningPointB.hue;
+    if ((hueDoubleWrapped || hueWrapped) >= hueA && (hueDoubleWrapped || hueWrapped) < hueB) {
+      let $ = hueDoubleWrapped || hueWrapped;
+      $ -= hueA;
+      $ /= hueB - hueA;
+      $ *= tuningPointB.sat - tuningPointA.sat;
+      $ += tuningPointA.sat;
+      Math.round($);
+      maxSat = $;
+    }
+  }
+  return maxSat;
+};
+
+// ../../luum/src/solveFor/satFromChannels.ts
+var satFromChannels = ({ R, G, B }) => {
+  const sat = Math.max(R, G, B) - Math.min(R, G, B);
+  return sat;
+};
+var satFromChannels_default = satFromChannels;
+
+// ../../luum/src/solveFor/specificLumFromHue.ts
+var specificLumFromHue_default = (hue) => {
+  const [factorR, factorG, factorB] = hueToRelativeChannels_default(hue);
+  const lumR = CHANNEL_SPECIFIC_LUM.R * factorR;
+  const lumG = CHANNEL_SPECIFIC_LUM.G * factorG;
+  const lumB = CHANNEL_SPECIFIC_LUM.B * factorB;
+  const specificLum = lumR + lumG + lumB;
+  return specificLum;
+};
+
+// ../../luum/src/export/specToChannelsFixLimit.ts
+var minChannelsForSaturationFromHue = (hue) => {
+  const relativeChannels = hueToRelativeChannels_default(hue);
+  const channelSpreader = (trueSaturation) => {
+    const makeMinChannel = (idx) => Math.round(relativeChannels[idx] * trueSaturation);
+    return {
+      R: makeMinChannel(0),
+      G: makeMinChannel(1),
+      B: makeMinChannel(2)
+    };
+  };
+  return channelSpreader;
+};
+var channelsFromIlluminationObj = ({
+  minChannels,
+  trueLuminosity,
+  minLum
+}) => {
+  const { max, round: round2 } = Math;
+  const maxWhite = 255 - max(...Object.values(minChannels));
+  const white = clampInto(0, maxWhite)(round2((trueLuminosity - minLum) * 255));
+  const channels = {
+    R: minChannels.R + white,
+    G: minChannels.G + white,
+    B: minChannels.B + white
+  };
+  return channels;
+};
+var specToChannelsFixLimit = ({ hue, sat, lum, prefer = `lum` }, filter = unfiltered) => {
+  const minChannelsForSaturation = minChannelsForSaturationFromHue(hue);
+  let trueSaturation;
+  let trueLuminosity;
+  let minChannels;
+  let maxChannels;
+  let specificLum;
+  let minLum = 0;
+  let maxLum = 1;
+  let maxSat = maxSatForHueInFilter_default(hue, filter);
+  switch (prefer) {
+    case `sat`:
+      trueSaturation = clampInto(0, 255)(Math.min(sat, maxSat));
+      minChannels = minChannelsForSaturation(trueSaturation);
+      maxChannels = {
+        R: minChannels.R + 255 - trueSaturation,
+        G: minChannels.G + 255 - trueSaturation,
+        B: minChannels.B + 255 - trueSaturation
+      };
+      minLum = lumFromChannels_default(minChannels);
+      maxLum = lumFromChannels_default(maxChannels);
+      trueLuminosity = clampInto(minLum, maxLum)(lum);
+      break;
+    case `lum`:
+      trueLuminosity = clampInto(0, 1)(lum);
+      specificLum = specificLumFromHue_default(hue);
+      maxSat = Math.min(
+        maxSat,
+        Math.round(
+          trueLuminosity <= specificLum ? 255 * (trueLuminosity / specificLum) : 255 * (1 - trueLuminosity) / (1 - specificLum)
+        )
+      );
+      trueSaturation = Math.min(sat, maxSat);
+      minChannels = minChannelsForSaturation(trueSaturation);
+      minLum = lumFromChannels_default(minChannels);
+      break;
+  }
+  const channels = channelsFromIlluminationObj({
+    minChannels,
+    trueLuminosity,
+    minLum
+  });
+  return {
+    channels,
+    fix: {
+      sat: trueSaturation,
+      lum: trueLuminosity
+    },
+    limit: {
+      sat: [0, maxSat],
+      lum: [prefer === `lum` ? 0 : minLum, maxLum]
+    }
+  };
+};
+var specToChannelsFixLimit_default = specToChannelsFixLimit;
+
+// ../../luum/src/export/specToHexFixLimit.ts
+var specToHexFixLimit = ({ hue, sat, lum, prefer }, filter) => {
+  const { channels, fix, limit } = specToChannelsFixLimit_default(
+    {
+      hue,
+      sat,
+      lum,
+      prefer
+    },
+    filter
+  );
+  const { R, G, B } = channels;
+  const hex = channelsToHex_default({ R, G, B });
+  return { hex, fix, limit };
+};
+var specToHexFixLimit_default = specToHexFixLimit;
+
+// ../../luum/src/export/specToHex.ts
+var specToHex = ({ hue, sat, lum, prefer }, filter) => {
+  const { hex } = specToHexFixLimit_default({ hue, sat, lum, prefer }, filter);
+  return hex;
+};
+var specToHex_default = specToHex;
+
+// ../../luum/src/import/channelsToSpec.ts
+var channelsToSpec = ({ R, G, B }) => {
+  const hue = hueFromChannels_default({ R, G, B });
+  const sat = satFromChannels_default({ R, G, B });
+  const lum = lumFromChannels_default({ R, G, B });
+  return { hue, sat, lum };
+};
+var channelsToSpec_default = channelsToSpec;
+
+// ../../luum/src/import/normalizeHex.ts
+var BASE_16_CHAR_SET = `[a-fA-F0-9]+`;
+var miniHexToHex = (miniHex) => {
+  const miniHexArray = miniHex.split(``);
+  const hexTemplate = [0, 0, 1, 1, 2, 2];
+  return hexTemplate.map((idx) => miniHexArray[idx]).join(``);
+};
+var normalizeHex = (maybeHex) => {
+  const hex = maybeHex.replace(/^#/, ``);
+  const hexIsCorrectLength = hex.length === 6 || hex.length === 3;
+  const hexIsCorrectCharSet = hex.match(new RegExp(`^${BASE_16_CHAR_SET}$`)) !== null;
+  const hexIsValid = hexIsCorrectLength && hexIsCorrectCharSet;
+  if (!hexIsValid) {
+    throw new Error(`${maybeHex} is not a valid hex code`);
+  }
+  if (hex.length === 3) {
+    return miniHexToHex(hex);
+  }
+  return hex;
+};
+var normalizeHex_default = normalizeHex;
+
+// ../../luum/src/import/hexToChannels.ts
+var hexToChannels_default = (maybeHex) => {
+  const hex = normalizeHex_default(maybeHex);
+  return {
+    R: parseInt(hex.slice(0, 2), 16),
+    G: parseInt(hex.slice(2, 4), 16),
+    B: parseInt(hex.slice(4, 6), 16)
+  };
+};
+
+// ../../luum/src/import/hexToSpec.ts
+var hexToSpec = (hex) => {
+  const { R, G, B } = hexToChannels_default(hex);
+  const { hue, sat, lum } = channelsToSpec_default({ R, G, B });
+  return { hue, sat, lum };
+};
+var hexToSpec_default = hexToSpec;
+
+// ../../luum/src/mixers/lum.ts
+var import_function16 = require("fp-ts/function");
+var resetColor = (color) => (0, import_function16.pipe)(color, specToHex_default, hexToSpec_default, (hsl) => __spreadProps(__spreadValues({}, hsl), {
+  prefer: color.prefer
+}));
+var setLum = (newLum) => (currentColor) => {
+  const newColor = __spreadProps(__spreadValues({}, currentColor), {
+    lum: (0, import_function16.pipe)(currentColor.lum, become(newLum), clampInto(0, 1))
+  });
+  return newColor;
+};
+var shadeBy = (shadeAmount) => (color) => setLum((lum) => (lum * 100 - shadeAmount) / 100)(resetColor(color));
+
+// ../../luum/src/mixers/sat.ts
+var import_function18 = require("fp-ts/function");
+
+// ../../luum/src/mixers/hue.ts
+var import_function19 = require("fp-ts/function");
+
+// ../../luum/src/mixers/contrast.ts
+var contrastMax = (color) => __spreadProps(__spreadValues({}, color), {
+  lum: color.lum > 0.666 ? 0 : 1
+});
+var offset = (offsetAmount) => (color) => __spreadProps(__spreadValues({}, color), {
+  lum: color.lum > 0.666 ? color.lum - offsetAmount : color.lum + offsetAmount
+});
+
+// ../../luum/src/scheme/index.ts
+var import_function20 = require("fp-ts/function");
+var import_string7 = require("fp-ts/string");
+
+// ../../luum/src/constants/luum-spec.ts
+var defaultSpec = {
+  hue: 0,
+  lum: 0,
+  sat: 0,
+  prefer: `lum`
+};
+
+// ../../luum/src/scheme/index.ts
+var isLuumSpec = (input) => typeof input === `object` && input !== null && typeof input.hue === `number` && typeof input.sat === `number` && typeof input.lum === `number` && [`sat`, `lum`].includes(input.prefer);
+var isLuumSpecModifier = isModifier(isLuumSpec)(defaultSpec);
+var RED = {
+  hue: 0,
+  sat: 255,
+  lum: 0.5,
+  prefer: `sat`
+};
+var WAYFORGE_CORE_COLOR_NAMES = [
+  `Red`,
+  `Orange`,
+  `Yellow`,
+  `Lime`,
+  `Green`,
+  `Teal`,
+  `Cyan`,
+  `Blue`,
+  `Indigo`,
+  `Violet`,
+  `Magenta`,
+  `Pink`
+];
+var WAYFORGE_CORE_COLORS = WAYFORGE_CORE_COLOR_NAMES.reduce((acc, name, idx) => {
+  acc[name] = {
+    hue: idx * 30,
+    sat: 255,
+    lum: 0.5,
+    prefer: `sat`
+  };
+  return acc;
+}, {});
+var PAINT_MY_WAGON_RED = {
+  rootSelectors: [`.wagon`],
+  root: RED,
+  attributes: [`background-color`, shadeBy(5)],
+  states: [
+    [
+      [`:hover`, `:focus`],
+      [`background-color`, shadeBy(10)]
+    ],
+    [`:active`, [`background-color`, shadeBy(15)]]
+  ]
+};
+
+// ../../hamr/src/react-id/Id.tsx
 var import_jsx_dev_runtime14 = require("react/jsx-dev-runtime");
+var Id = ({ id }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { refs, floatingStyles, context } = (0, import_react6.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: `bottom-start`
+  });
+  const click = (0, import_react6.useClick)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react6.useInteractions)([click]);
+  const bgColor = stringToColor(id);
+  const contrastColor = (0, import_function22.pipe)(bgColor, hexToSpec_default, contrastMax, specToHex_default);
+  const offsetColor = (0, import_function22.pipe)(bgColor, hexToSpec_default, offset(0.25), specToHex_default);
+  const contrastOffsetColor = (0, import_function22.pipe)(
+    offsetColor,
+    hexToSpec_default,
+    contrastMax,
+    specToHex_default
+  );
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(import_jsx_dev_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(
+      "span",
+      __spreadProps(__spreadValues({
+        role: "content",
+        ref: refs.setReference
+      }, getReferenceProps()), {
+        style: {
+          background: bgColor,
+          cursor: `pointer`,
+          padding: `0px 4px`,
+          color: contrastColor,
+          userSelect: `none`,
+          whiteSpace: `nowrap`
+        },
+        children: id.substring(0, 3)
+      }),
+      void 0,
+      false,
+      {
+        fileName: "../../hamr/src/react-id/Id.tsx",
+        lineNumber: 36,
+        columnNumber: 4
+      },
+      this
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(import_react6.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(
+      "span",
+      __spreadProps(__spreadValues({
+        role: "popup",
+        ref: refs.setFloating
+      }, getFloatingProps()), {
+        style: __spreadProps(__spreadValues({}, floatingStyles), {
+          color: contrastOffsetColor,
+          background: offsetColor,
+          padding: `0px 4px`,
+          boxShadow: `0px 2px 10px rgba(0, 0, 0, 0.1)`
+        }),
+        children: id
+      }),
+      void 0,
+      false,
+      {
+        fileName: "../../hamr/src/react-id/Id.tsx",
+        lineNumber: 53,
+        columnNumber: 6
+      },
+      this
+    ) }, void 0, false, {
+      fileName: "../../hamr/src/react-id/Id.tsx",
+      lineNumber: 52,
+      columnNumber: 5
+    }, this)
+  ] }, void 0, true, {
+    fileName: "../../hamr/src/react-id/Id.tsx",
+    lineNumber: 35,
+    columnNumber: 3
+  }, this);
+};
+
+// ../../hamr/src/react-data-designer/RelationEditor.tsx
+var import_jsx_dev_runtime15 = require("react/jsx-dev-runtime");
+var RelationEditor = (props) => {
+  const seen = /* @__PURE__ */ new Set();
+  const data = Object.entries(props.data.relations).sort(([_, a2], [__, b2]) => b2.length - a2.length).filter(([head, tail]) => {
+    if (seen.has(head))
+      return false;
+    seen.add(head);
+    for (const tailElement of tail) {
+      seen.add(tailElement);
+    }
+    return true;
+  });
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("article", { className: RelationEditor_module_default.class, children: data.map(([head, tail]) => /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("span", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(Id, { id: head }, void 0, false, {
+      fileName: "../../hamr/src/react-data-designer/RelationEditor.tsx",
+      lineNumber: 26,
+      columnNumber: 7
+    }, this) }, void 0, false, {
+      fileName: "../../hamr/src/react-data-designer/RelationEditor.tsx",
+      lineNumber: 25,
+      columnNumber: 6
+    }, this),
+    ":",
+    /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("span", { children: tail.map((child) => /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(Id, { id: child }, void 0, false, {
+      fileName: "../../hamr/src/react-data-designer/RelationEditor.tsx",
+      lineNumber: 31,
+      columnNumber: 8
+    }, this)) }, void 0, false, {
+      fileName: "../../hamr/src/react-data-designer/RelationEditor.tsx",
+      lineNumber: 29,
+      columnNumber: 6
+    }, this)
+  ] }, void 0, true, {
+    fileName: "../../hamr/src/react-data-designer/RelationEditor.tsx",
+    lineNumber: 24,
+    columnNumber: 5
+  }, this)) }, void 0, false, {
+    fileName: "../../hamr/src/react-data-designer/RelationEditor.tsx",
+    lineNumber: 21,
+    columnNumber: 3
+  }, this);
+};
+
+// ../src/react-devtools/StateEditor.tsx
+var import_jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 var StateEditor = ({ token }) => {
-  const [data, set] = (0, import_react6.useIO)(token);
-  return isJson(data) ? /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(JsonEditor, { data, set, schema: true }, void 0, false, {
+  const [data, set] = (0, import_react7.useIO)(token);
+  return isJson(data) ? /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(JsonEditor, { data, set, schema: true }, void 0, false, {
     fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 15,
+    lineNumber: 17,
     columnNumber: 3
-  }, this) : /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)("div", { className: "json_editor", children: /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(
+  }, this) : data instanceof Join ? /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(RelationEditor, { data, set }, void 0, false, {
+    fileName: "../src/react-devtools/StateEditor.tsx",
+    lineNumber: 19,
+    columnNumber: 3
+  }, this) : /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("div", { className: "json_editor", children: /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
     ElasticInput,
     {
       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), `?`),
@@ -3173,19 +3693,19 @@ var StateEditor = ({ token }) => {
     false,
     {
       fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 18,
+      lineNumber: 22,
       columnNumber: 4
     },
     this
   ) }, void 0, false, {
     fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 17,
+    lineNumber: 21,
     columnNumber: 3
   }, this);
 };
 var ReadonlySelectorViewer = ({ token }) => {
-  const data = (0, import_react6.useO)(token);
-  return isJson(data) ? /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(
+  const data = (0, import_react7.useO)(token);
+  return isJson(data) ? /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
     JsonEditor,
     {
       data,
@@ -3197,11 +3717,11 @@ var ReadonlySelectorViewer = ({ token }) => {
     false,
     {
       fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 39,
+      lineNumber: 43,
       columnNumber: 3
     },
     this
-  ) : /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)("div", { className: "json_editor", children: /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(
+  ) : /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("div", { className: "json_editor", children: /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
     ElasticInput,
     {
       value: data instanceof Set ? `Set ` + JSON.stringify([...data]) : data instanceof Map ? `Map ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
@@ -3211,33 +3731,33 @@ var ReadonlySelectorViewer = ({ token }) => {
     false,
     {
       fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 47,
+      lineNumber: 51,
       columnNumber: 4
     },
     this
   ) }, void 0, false, {
     fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 46,
+    lineNumber: 50,
     columnNumber: 3
   }, this);
 };
 var StoreEditor = ({ token }) => {
   if (token.type === `readonly_selector`) {
-    return /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(ReadonlySelectorViewer, { token }, void 0, false, {
+    return /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(ReadonlySelectorViewer, { token }, void 0, false, {
       fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 67,
+      lineNumber: 71,
       columnNumber: 10
     }, this);
   }
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)(StateEditor, { token }, void 0, false, {
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(StateEditor, { token }, void 0, false, {
     fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 69,
+    lineNumber: 73,
     columnNumber: 9
   }, this);
 };
 
 // ../src/react-devtools/StateIndex.tsx
-var import_jsx_dev_runtime15 = require("react/jsx-dev-runtime");
+var import_jsx_dev_runtime17 = require("react/jsx-dev-runtime");
 var findStateTypeState = (0, import_atom8.selectorFamily)({
   key: `\u{1F441}\u200D\u{1F5E8} State Type`,
   get: (token) => ({ get }) => {
@@ -3256,13 +3776,13 @@ var findStateTypeState = (0, import_atom8.selectorFamily)({
 });
 var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
   var _a2, _b;
-  const [isOpen, setIsOpen] = (0, import_react7.useIO)(isOpenState);
-  const state = (0, import_react7.useO)(node);
-  const stateType = (0, import_react7.useO)(typeState);
+  const [isOpen, setIsOpen] = (0, import_react8.useIO)(isOpenState);
+  const state = (0, import_react8.useO)(node);
+  const stateType = (0, import_react8.useO)(typeState);
   const isPrimitive = Boolean(primitiveRefinery.refine(state));
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(import_jsx_dev_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("header", { children: [
-      /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(import_jsx_dev_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("header", { children: [
+      /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
         button.OpenClose,
         {
           isOpen: isOpen && !isPrimitive,
@@ -3273,29 +3793,29 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
         false,
         {
           fileName: "../src/react-devtools/StateIndex.tsx",
-          lineNumber: 45,
+          lineNumber: 48,
           columnNumber: 5
         },
         this
       ),
-      /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(
+      /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
         "label",
         {
           onClick: () => console.log(node, (0, import_atom8.getState)(node)),
           onKeyUp: () => console.log(node, (0, import_atom8.getState)(node)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("h2", { children: (_b = (_a2 = node.family) == null ? void 0 : _a2.subKey) != null ? _b : node.key }, void 0, false, {
+            /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("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,
+              lineNumber: 57,
               columnNumber: 6
             }, this),
-            /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("span", { className: "type detail", children: [
+            /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("span", { className: "type detail", children: [
               "(",
               stateType,
               ")"
             ] }, void 0, true, {
               fileName: "../src/react-devtools/StateIndex.tsx",
-              lineNumber: 55,
+              lineNumber: 58,
               columnNumber: 6
             }, this)
           ]
@@ -3304,71 +3824,71 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
         true,
         {
           fileName: "../src/react-devtools/StateIndex.tsx",
-          lineNumber: 50,
+          lineNumber: 53,
           columnNumber: 5
         },
         this
       ),
-      isPrimitive ? /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(StoreEditor, { token: node }, void 0, false, {
+      isPrimitive ? /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(StoreEditor, { token: node }, void 0, false, {
         fileName: "../src/react-devtools/StateIndex.tsx",
-        lineNumber: 57,
+        lineNumber: 60,
         columnNumber: 20
       }, this) : null
     ] }, void 0, true, {
       fileName: "../src/react-devtools/StateIndex.tsx",
-      lineNumber: 44,
+      lineNumber: 47,
       columnNumber: 4
     }, this),
-    isOpen && !isPrimitive ? /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("main", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(StoreEditor, { token: node }, void 0, false, {
+    isOpen && !isPrimitive ? /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("main", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(StoreEditor, { token: node }, void 0, false, {
       fileName: "../src/react-devtools/StateIndex.tsx",
-      lineNumber: 61,
+      lineNumber: 64,
       columnNumber: 6
     }, this) }, void 0, false, {
       fileName: "../src/react-devtools/StateIndex.tsx",
-      lineNumber: 60,
+      lineNumber: 63,
       columnNumber: 5
     }, this) : null
   ] }, void 0, true, {
     fileName: "../src/react-devtools/StateIndex.tsx",
-    lineNumber: 43,
+    lineNumber: 46,
     columnNumber: 3
   }, this);
 };
 var StateIndexTreeNode = ({ node, isOpenState }) => {
-  const [isOpen, setIsOpen] = (0, import_react7.useIO)(isOpenState);
+  const [isOpen, setIsOpen] = (0, import_react8.useIO)(isOpenState);
   Object.entries(node.familyMembers).forEach(([key, childNode]) => {
     findViewIsOpenState(key);
     findStateTypeState(childNode);
   });
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(import_jsx_dev_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("header", { children: [
-      /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(import_jsx_dev_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("header", { children: [
+      /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
         fileName: "../src/react-devtools/StateIndex.tsx",
-        lineNumber: 81,
+        lineNumber: 84,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("label", { children: [
-        /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("h2", { children: node.key }, void 0, false, {
+      /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("h2", { children: node.key }, void 0, false, {
           fileName: "../src/react-devtools/StateIndex.tsx",
-          lineNumber: 83,
+          lineNumber: 86,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("span", { className: "type detail", children: " (family)" }, void 0, false, {
+        /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("span", { className: "type detail", children: " (family)" }, void 0, false, {
           fileName: "../src/react-devtools/StateIndex.tsx",
-          lineNumber: 84,
+          lineNumber: 87,
           columnNumber: 6
         }, this)
       ] }, void 0, true, {
         fileName: "../src/react-devtools/StateIndex.tsx",
-        lineNumber: 82,
+        lineNumber: 85,
         columnNumber: 5
       }, this)
     ] }, void 0, true, {
       fileName: "../src/react-devtools/StateIndex.tsx",
-      lineNumber: 80,
+      lineNumber: 83,
       columnNumber: 4
     }, this),
-    isOpen ? Object.entries(node.familyMembers).map(([key, childNode]) => /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(
+    isOpen ? Object.entries(node.familyMembers).map(([key, childNode]) => /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
       StateIndexNode,
       {
         node: childNode,
@@ -3379,14 +3899,14 @@ var StateIndexTreeNode = ({ node, isOpenState }) => {
       false,
       {
         fileName: "../src/react-devtools/StateIndex.tsx",
-        lineNumber: 89,
+        lineNumber: 92,
         columnNumber: 7
       },
       this
     )) : null
   ] }, void 0, true, {
     fileName: "../src/react-devtools/StateIndex.tsx",
-    lineNumber: 79,
+    lineNumber: 82,
     columnNumber: 3
   }, this);
 };
@@ -3394,7 +3914,7 @@ var StateIndexNode = ({ node, isOpenState, typeState }) => {
   if (node.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("section", { className: "node state", children: `type` in node ? /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("section", { className: "node state", children: `type` in node ? /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
     StateIndexLeafNode,
     {
       node,
@@ -3405,24 +3925,24 @@ var StateIndexNode = ({ node, isOpenState, typeState }) => {
     false,
     {
       fileName: "../src/react-devtools/StateIndex.tsx",
-      lineNumber: 114,
+      lineNumber: 117,
       columnNumber: 5
     },
     this
-  ) : /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(StateIndexTreeNode, { node, isOpenState }, void 0, false, {
+  ) : /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(StateIndexTreeNode, { node, isOpenState }, void 0, false, {
     fileName: "../src/react-devtools/StateIndex.tsx",
-    lineNumber: 120,
+    lineNumber: 123,
     columnNumber: 5
   }, this) }, void 0, false, {
     fileName: "../src/react-devtools/StateIndex.tsx",
-    lineNumber: 112,
+    lineNumber: 115,
     columnNumber: 3
   }, this);
 };
 var StateIndex = ({ tokenIndex }) => {
-  const tokenIds = (0, import_react7.useO)(tokenIndex);
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)("article", { className: "index state_index", children: Object.entries(tokenIds).filter(([key]) => !key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).sort().map(([key, node]) => {
-    return /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(
+  const tokenIds = (0, import_react8.useO)(tokenIndex);
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("article", { className: "index state_index", children: Object.entries(tokenIds).filter(([key]) => !key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).sort().map(([key, node]) => {
+    return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
       StateIndexNode,
       {
         node,
@@ -3433,34 +3953,34 @@ var StateIndex = ({ tokenIndex }) => {
       false,
       {
         fileName: "../src/react-devtools/StateIndex.tsx",
-        lineNumber: 143,
+        lineNumber: 146,
         columnNumber: 7
       },
       this
     );
   }) }, void 0, false, {
     fileName: "../src/react-devtools/StateIndex.tsx",
-    lineNumber: 137,
+    lineNumber: 140,
     columnNumber: 3
   }, this);
 };
 
 // ../src/react-devtools/TimelineIndex.tsx
 var import_atom9 = require("atom.io");
-var import_react8 = require("atom.io/react");
-var import_react9 = require("react");
+var import_react9 = require("atom.io/react");
+var import_react10 = require("react");
 
 // ../src/react-devtools/Updates.tsx
-var import_jsx_dev_runtime16 = require("react/jsx-dev-runtime");
+var import_jsx_dev_runtime18 = require("react/jsx-dev-runtime");
 var AtomUpdateFC = ({ atomUpdate }) => {
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
     "article",
     {
       className: "node atom_update",
       onClick: () => console.log(atomUpdate),
       onKeyUp: () => console.log(atomUpdate),
       children: [
-        /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "detail", children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "detail", children: [
           atomUpdate.key,
           ": "
         ] }, void 0, true, {
@@ -3468,7 +3988,7 @@ var AtomUpdateFC = ({ atomUpdate }) => {
           lineNumber: 20,
           columnNumber: 4
         }, this),
-        /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "summary", children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary }, void 0, false, {
+        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "summary", children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary }, void 0, false, {
           fileName: "../src/react-devtools/Updates.tsx",
           lineNumber: 22,
           columnNumber: 5
@@ -3490,8 +4010,8 @@ var AtomUpdateFC = ({ atomUpdate }) => {
   );
 };
 var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("article", { className: "node transaction_update", children: [
-    /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("header", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("h4", { children: serialNumber }, void 0, false, {
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("article", { className: "node transaction_update", children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("header", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("h4", { children: serialNumber }, void 0, false, {
       fileName: "../src/react-devtools/Updates.tsx",
       lineNumber: 37,
       columnNumber: 5
@@ -3500,22 +4020,22 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
       lineNumber: 36,
       columnNumber: 4
     }, this),
-    /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("main", { children: [
-      /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("section", { className: "transaction_params", children: [
-        /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "detail", children: "params: " }, void 0, false, {
+    /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("main", { children: [
+      /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("section", { className: "transaction_params", children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("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__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
+          return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
             "article",
             {
               className: "node transaction_param",
               onClick: () => console.log(transactionUpdate),
               onKeyUp: () => console.log(transactionUpdate),
               children: [
-                /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "detail", children: [
+                /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "detail", children: [
                   discoverType(param),
                   ": "
                 ] }, void 0, true, {
@@ -3523,11 +4043,11 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
                   lineNumber: 50,
                   columnNumber: 9
                 }, this),
-                /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "summary", children: typeof param === `object` && `type` in param && `target` in param ? /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(import_jsx_dev_runtime16.Fragment, { children: JSON.stringify(param.type) }, void 0, false, {
+                /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "summary", children: typeof param === `object` && `type` in param && `target` in param ? /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(import_jsx_dev_runtime18.Fragment, { children: JSON.stringify(param.type) }, void 0, false, {
                   fileName: "../src/react-devtools/Updates.tsx",
                   lineNumber: 55,
                   columnNumber: 11
-                }, this) : /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(import_jsx_dev_runtime16.Fragment, { children: JSON.stringify(param) }, void 0, false, {
+                }, this) : /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(import_jsx_dev_runtime18.Fragment, { children: JSON.stringify(param) }, void 0, false, {
                   fileName: "../src/react-devtools/Updates.tsx",
                   lineNumber: 57,
                   columnNumber: 11
@@ -3553,18 +4073,18 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
         lineNumber: 40,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("section", { className: "node transaction_output", children: [
-        /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "detail", children: "output: " }, void 0, false, {
+      /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("section", { className: "node transaction_output", children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "detail", children: "output: " }, void 0, false, {
           fileName: "../src/react-devtools/Updates.tsx",
           lineNumber: 65,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "detail", children: discoverType(transactionUpdate.output) }, void 0, false, {
+        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "detail", children: discoverType(transactionUpdate.output) }, void 0, false, {
           fileName: "../src/react-devtools/Updates.tsx",
           lineNumber: 66,
           columnNumber: 6
         }, this),
-        transactionUpdate.output ? /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "summary", children: [
+        transactionUpdate.output ? /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "summary", children: [
           ": ",
           JSON.stringify(transactionUpdate.output)
         ] }, void 0, true, {
@@ -3577,14 +4097,14 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
         lineNumber: 64,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("section", { className: "transaction_impact", children: [
-        /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("span", { className: "detail", children: "impact: " }, void 0, false, {
+      /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("section", { className: "transaction_impact", children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("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__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
+          return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
             article.AtomUpdate,
             {
               serialNumber: index,
@@ -3617,8 +4137,8 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
   }, this);
 };
 var TimelineUpdateFC = ({ timelineUpdate }) => {
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("article", { className: "node timeline_update", children: [
-    /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("header", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("h4", { children: [
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("article", { className: "node timeline_update", children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("header", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("h4", { children: [
       timelineUpdate.timestamp,
       ": ",
       timelineUpdate.type,
@@ -3634,8 +4154,8 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
       lineNumber: 99,
       columnNumber: 4
     }, this),
-    /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
-      return /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
+    /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
+      return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
         article.AtomUpdate,
         {
           serialNumber: index,
@@ -3651,7 +4171,7 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
         this
       );
     }) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
-      return /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
+      return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
         article.AtomUpdate,
         {
           serialNumber: index,
@@ -3666,7 +4186,7 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
         },
         this
       );
-    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ (0, import_jsx_dev_runtime16.jsxDEV)(
+    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
       article.AtomUpdate,
       {
         serialNumber: timelineUpdate.timestamp,
@@ -3698,31 +4218,31 @@ var article = {
 };
 
 // ../src/react-devtools/TimelineIndex.tsx
-var import_jsx_dev_runtime17 = require("react/jsx-dev-runtime");
+var import_jsx_dev_runtime19 = require("react/jsx-dev-runtime");
 var YouAreHere = () => {
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("span", { className: "you_are_here", children: "you are here" }, void 0, false, {
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("span", { className: "you_are_here", children: "you are here" }, void 0, false, {
     fileName: "../src/react-devtools/TimelineIndex.tsx",
     lineNumber: 17,
     columnNumber: 9
   }, this);
 };
 var TimelineLog = ({ token, isOpenState, timelineState }) => {
-  const timeline2 = (0, import_react8.useO)(timelineState);
-  const [isOpen, setIsOpen] = (0, import_react8.useIO)(isOpenState);
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("section", { className: "node timeline_log", children: [
-    /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("header", { children: [
-      /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
+  const timeline2 = (0, import_react9.useO)(timelineState);
+  const [isOpen, setIsOpen] = (0, import_react9.useIO)(isOpenState);
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("section", { className: "node timeline_log", children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("header", { children: [
+      /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
         fileName: "../src/react-devtools/TimelineIndex.tsx",
         lineNumber: 31,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("label", { children: [
-        /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("h2", { children: token.key }, void 0, false, {
+      /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("h2", { children: token.key }, void 0, false, {
           fileName: "../src/react-devtools/TimelineIndex.tsx",
           lineNumber: 33,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("span", { className: "detail length", children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("span", { className: "detail length", children: [
           "(",
           timeline2.at,
           "/",
@@ -3733,13 +4253,13 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
           lineNumber: 34,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("span", { className: "gap" }, void 0, false, {
+        /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("span", { className: "gap" }, void 0, false, {
           fileName: "../src/react-devtools/TimelineIndex.tsx",
           lineNumber: 37,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("nav", { children: [
-          /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
+        /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("nav", { children: [
+          /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(
             "button",
             {
               type: "button",
@@ -3756,7 +4276,7 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
             },
             this
           ),
-          /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
+          /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(
             "button",
             {
               type: "button",
@@ -3788,18 +4308,18 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
       lineNumber: 30,
       columnNumber: 4
     }, this),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("main", { children: timeline2.history.map((update, index) => /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(import_react9.Fragment, { children: [
-      index === timeline2.at ? /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(YouAreHere, {}, void 0, false, {
+    isOpen ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("main", { children: timeline2.history.map((update, index) => /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(import_react10.Fragment, { children: [
+      index === timeline2.at ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(YouAreHere, {}, void 0, false, {
         fileName: "../src/react-devtools/TimelineIndex.tsx",
         lineNumber: 60,
         columnNumber: 33
       }, this) : null,
-      /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(article.TimelineUpdate, { timelineUpdate: update }, void 0, false, {
+      /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(article.TimelineUpdate, { timelineUpdate: update }, void 0, false, {
         fileName: "../src/react-devtools/TimelineIndex.tsx",
         lineNumber: 61,
         columnNumber: 8
       }, this),
-      index === timeline2.history.length - 1 && timeline2.at === timeline2.history.length ? /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(YouAreHere, {}, void 0, false, {
+      index === timeline2.history.length - 1 && timeline2.at === timeline2.history.length ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(YouAreHere, {}, void 0, false, {
         fileName: "../src/react-devtools/TimelineIndex.tsx",
         lineNumber: 64,
         columnNumber: 9
@@ -3820,9 +4340,9 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
   }, this);
 };
 var TimelineIndex = () => {
-  const tokenIds = (0, import_react8.useO)(timelineIndex);
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)("article", { className: "index timeline_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
-    return /* @__PURE__ */ (0, import_jsx_dev_runtime17.jsxDEV)(
+  const tokenIds = (0, import_react9.useO)(timelineIndex);
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("article", { className: "index timeline_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(
       TimelineLog,
       {
         token,
@@ -3846,25 +4366,25 @@ var TimelineIndex = () => {
 };
 
 // ../src/react-devtools/TransactionIndex.tsx
-var import_react10 = require("atom.io/react");
-var import_jsx_dev_runtime18 = require("react/jsx-dev-runtime");
+var import_react11 = require("atom.io/react");
+var import_jsx_dev_runtime20 = require("react/jsx-dev-runtime");
 var TransactionLog = ({ token, isOpenState, logState }) => {
-  const log = (0, import_react10.useO)(logState);
-  const [isOpen, setIsOpen] = (0, import_react10.useIO)(isOpenState);
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("section", { className: "node transaction_log", children: [
-    /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("header", { children: [
-      /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
+  const log = (0, import_react11.useO)(logState);
+  const [isOpen, setIsOpen] = (0, import_react11.useIO)(isOpenState);
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)("section", { className: "node transaction_log", children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)("header", { children: [
+      /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
         fileName: "../src/react-devtools/TransactionIndex.tsx",
         lineNumber: 31,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("label", { children: [
-        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("h2", { children: token.key }, void 0, false, {
+      /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)("h2", { children: token.key }, void 0, false, {
           fileName: "../src/react-devtools/TransactionIndex.tsx",
           lineNumber: 33,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("span", { className: "detail length", children: [
+        /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)("span", { className: "detail length", children: [
           "(",
           log.length,
           ")"
@@ -3883,7 +4403,7 @@ var TransactionLog = ({ token, isOpenState, logState }) => {
       lineNumber: 30,
       columnNumber: 4
     }, this),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("main", { children: log.map((update, index) => /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
+    isOpen ? /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)("main", { children: log.map((update, index) => /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)(
       article.TransactionUpdate,
       {
         serialNumber: index,
@@ -3909,9 +4429,9 @@ var TransactionLog = ({ token, isOpenState, logState }) => {
   }, this);
 };
 var TransactionIndex = () => {
-  const tokenIds = (0, import_react10.useO)(transactionIndex);
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)("article", { className: "index transaction_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
-    return /* @__PURE__ */ (0, import_jsx_dev_runtime18.jsxDEV)(
+  const tokenIds = (0, import_react11.useO)(transactionIndex);
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)("article", { className: "index transaction_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ (0, import_jsx_dev_runtime20.jsxDEV)(
       TransactionLog,
       {
         token,
@@ -3935,15 +4455,15 @@ var TransactionIndex = () => {
 };
 
 // ../src/react-devtools/AtomIODevtools.tsx
-var import_jsx_dev_runtime19 = require("react/jsx-dev-runtime");
+var import_jsx_dev_runtime21 = require("react/jsx-dev-runtime");
 var AtomIODevtools = () => {
-  const constraintsRef = (0, import_react12.useRef)(null);
-  const [devtoolsAreOpen, setDevtoolsAreOpen] = (0, import_react11.useIO)(devtoolsAreOpenState);
-  const [devtoolsView, setDevtoolsView] = (0, import_react11.useIO)(devtoolsViewSelectionState);
-  const devtoolsViewOptions = (0, import_react11.useO)(devtoolsViewOptionsState);
-  const mouseHasMoved = (0, import_react12.useRef)(false);
-  return /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(import_jsx_dev_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(
+  const constraintsRef = (0, import_react13.useRef)(null);
+  const [devtoolsAreOpen, setDevtoolsAreOpen] = (0, import_react12.useIO)(devtoolsAreOpenState);
+  const [devtoolsView, setDevtoolsView] = (0, import_react12.useIO)(devtoolsViewSelectionState);
+  const devtoolsViewOptions = (0, import_react12.useO)(devtoolsViewOptionsState);
+  const mouseHasMoved = (0, import_react13.useRef)(false);
+  return /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(import_jsx_dev_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(
       import_framer_motion.motion.span,
       {
         ref: constraintsRef,
@@ -3966,7 +4486,7 @@ var AtomIODevtools = () => {
       },
       this
     ),
-    /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(
+    /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(
       import_framer_motion.motion.main,
       {
         drag: true,
@@ -3980,14 +4500,14 @@ var AtomIODevtools = () => {
           maxWidth: 33
         },
         children: [
-          devtoolsAreOpen ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(import_jsx_dev_runtime19.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(import_framer_motion.motion.header, { children: [
-              /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("h1", { children: "atom.io" }, void 0, false, {
+          devtoolsAreOpen ? /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(import_jsx_dev_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(import_framer_motion.motion.header, { children: [
+              /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)("h1", { children: "atom.io" }, void 0, false, {
                 fileName: "../src/react-devtools/AtomIODevtools.tsx",
                 lineNumber: 60,
                 columnNumber: 8
               }, this),
-              /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(
+              /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(
                 "button",
                 {
                   type: "button",
@@ -4014,19 +4534,19 @@ var AtomIODevtools = () => {
               lineNumber: 59,
               columnNumber: 7
             }, this),
-            /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(import_framer_motion.motion.main, { children: /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(import_framer_motion.LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(StateIndex, { tokenIndex: atomIndex }, void 0, false, {
+            /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(import_framer_motion.motion.main, { children: /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(import_framer_motion.LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(StateIndex, { tokenIndex: atomIndex }, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 78,
               columnNumber: 10
-            }, this) : devtoolsView === `selectors` ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(StateIndex, { tokenIndex: selectorIndex }, void 0, false, {
+            }, this) : devtoolsView === `selectors` ? /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(StateIndex, { tokenIndex: selectorIndex }, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 80,
               columnNumber: 10
-            }, this) : devtoolsView === `transactions` ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(TransactionIndex, {}, void 0, false, {
+            }, this) : devtoolsView === `transactions` ? /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(TransactionIndex, {}, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 82,
               columnNumber: 10
-            }, this) : devtoolsView === `timelines` ? /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(TimelineIndex, {}, void 0, false, {
+            }, this) : devtoolsView === `timelines` ? /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(TimelineIndex, {}, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 84,
               columnNumber: 10
@@ -4044,7 +4564,7 @@ var AtomIODevtools = () => {
             lineNumber: 58,
             columnNumber: 6
           }, this) : null,
-          /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)("footer", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime19.jsxDEV)(
+          /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)("footer", { children: /* @__PURE__ */ (0, import_jsx_dev_runtime21.jsxDEV)(
             "button",
             {
               type: "button",