atom.io 0.6.7 → 0.6.8

package/react-devtools/dist/index.mjs

@@ -82,6 +82,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);
@@ -914,34 +926,6 @@ function atom__INTERNAL(options, family, store = IMPLICIT.STORE) {
   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 = [
@@ -966,20 +950,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;
     },
@@ -1090,7 +1077,7 @@ var setState__INTERNAL = (state, value, store = IMPLICIT.STORE) => {
   }
 };
 
-// ../src/internal/subject.ts
+// ../../anvl/reactivity/subject.ts
 var Subject = class {
   constructor() {
     this.subscribers = [];
@@ -1362,7 +1349,7 @@ var attachTimelineFamily = (store = __INTERNAL__3.IMPLICIT.STORE) => {
         return (_a2 = store.timelines.get(key)) != null ? _a2 : {
           key: ``,
           at: 0,
-          timeTraveling: false,
+          timeTraveling: null,
           history: [],
           selectorTime: null,
           transactionKey: null,
@@ -1531,6 +1518,31 @@ import { useRef as useRef4 } from "react";
 import { getState, selectorFamily } from "atom.io";
 import { useO as useO2, useIO as useIO2 } from "atom.io/react";
 
+// ../../anvl/src/refinement/refine-json.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;
+};
+
 // ../src/react-devtools/Button.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
 var OpenClose = ({ isOpen, setIsOpen, disabled }) => {
@@ -1560,6 +1572,15 @@ var button = {
 // ../src/react-devtools/StateEditor.tsx
 import { useO, useIO } from "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
 import {
   useLayoutEffect,
@@ -1647,18 +1668,21 @@ var ElasticInput = forwardRef(function ElasticInputFC(props, ref) {
 });
 
 // ../../hamr/src/react-elastic-input/NumberInput.tsx
-import { pipe as pipe7 } from "fp-ts/function";
+import { pipe as pipe6 } 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;
 
+// ../../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
 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);
+  const factor = 10 ** decimalPlaces;
   return Math.round(value * factor) / factor;
 }
 var VALID_NON_NUMBERS = [``, `-`, `.`, `-.`];
@@ -1686,7 +1710,7 @@ var initRefinery = (constraints) => (input) => {
     return null;
   }
   const { max, min, decimalPlaces } = __spreadValues(__spreadValues({}, DEFAULT_NUMBER_CONSTRAINTS), constraints);
-  const constrained = pipe7(
+  const constrained = pipe6(
     input != null ? input : 0,
     clampInto(min, max),
     (n) => decimalPlaces ? round(n, decimalPlaces) : n
@@ -1753,7 +1777,7 @@ var NumberInput = ({
   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,
+      lineNumber: 168,
       columnNumber: 14
     }, this),
     autoSize ? /* @__PURE__ */ jsxDEV3(
@@ -1774,7 +1798,7 @@ var NumberInput = ({
       false,
       {
         fileName: "../../hamr/src/react-elastic-input/NumberInput.tsx",
-        lineNumber: 168,
+        lineNumber: 170,
         columnNumber: 5
       },
       this
@@ -1796,14 +1820,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);
 };
@@ -1866,15 +1890,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
 import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 var NonJsonEditor = ({ data }) => {
@@ -1929,7 +1944,7 @@ var JsonEditor_INTERNAL = ({
         disabled,
         children: /* @__PURE__ */ jsxDEV6(Components.DeleteIcon, {}, void 0, false, {
           fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-          lineNumber: 63,
+          lineNumber: 65,
           columnNumber: 7
         }, this)
       },
@@ -1937,14 +1952,14 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 59,
+        lineNumber: 61,
         columnNumber: 6
       },
       this
     ),
     HeaderDisplay && /* @__PURE__ */ jsxDEV6(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__ */ jsxDEV6(Components.KeyWrapper, { children: /* @__PURE__ */ jsxDEV6(
@@ -1958,13 +1973,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__ */ jsxDEV6(
@@ -1984,7 +1999,7 @@ var JsonEditor_INTERNAL = ({
       false,
       {
         fileName: "../../hamr/src/react-json-editor/json-editor-internal.tsx",
-        lineNumber: 76,
+        lineNumber: 78,
         columnNumber: 5
       },
       this
@@ -1997,7 +2012,7 @@ var JsonEditor_INTERNAL = ({
         disabled,
         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: 98,
+          lineNumber: 100,
           columnNumber: 8
         }, this))
       },
@@ -2005,18 +2020,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);
 };
@@ -2069,7 +2084,7 @@ import { isNumber as isNumber2 } from "fp-ts/number";
 import { isString as isString6 } from "fp-ts/string";
 
 // ../../anvl/src/json-schema/integer.ts
-import { pipe as pipe8 } from "fp-ts/function";
+import { pipe as pipe7 } from "fp-ts/function";
 var isInteger = (input) => Number.isInteger(input);
 var parseInteger = (input) => {
   if (isInteger(input))
@@ -2095,7 +2110,7 @@ var IntegerParseError = class extends Error {
   }
 };
 var Int = Object.assign((input) => parseInteger(input), {
-  from: (input) => pipe8(
+  from: (input) => pipe7(
     input,
     String,
     parseFloat,
@@ -2396,7 +2411,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(`,`);
@@ -2438,7 +2453,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: {
@@ -2555,7 +2572,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] }));
@@ -2717,7 +2734,7 @@ var ObjectEditor = ({
 };
 
 // ../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx
-import { Fragment as Fragment3, jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
 var BooleanEditor = ({
   data,
   set,
@@ -2744,11 +2761,7 @@ var BooleanEditor = ({
 }, 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, {
+}) => /* @__PURE__ */ jsxDEV9(Components.NullWrapper, { children: '" "' }, void 0, false, {
   fileName: "../../hamr/src/react-json-editor/editors-by-type/primitive-editors.tsx",
   lineNumber: 23,
   columnNumber: 2
@@ -2770,13 +2783,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 = ({
@@ -2797,13 +2810,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);
 };
@@ -2894,7 +2907,7 @@ import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
-    this.state = { error: void 0, errorInfo: void 0 };
+    this.state = {};
   }
   componentDidCatch(error, errorInfo) {
     var _a2, _b;
@@ -2920,7 +2933,7 @@ import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
 var DEFAULT_JSON_EDITOR_COMPONENTS = {
   ErrorBoundary: ({ children }) => /* @__PURE__ */ jsxDEV12(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__ */ jsxDEV12(
@@ -2936,14 +2949,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__ */ jsxDEV12("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: ({
@@ -2957,98 +2970,98 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
     return /* @__PURE__ */ jsxDEV12(Wrapper, { children: [
       DeleteButton && /* @__PURE__ */ jsxDEV12(DeleteButton, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 72,
+        lineNumber: 75,
         columnNumber: 22
       }, this),
       Header && /* @__PURE__ */ jsxDEV12(Header, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 73,
+        lineNumber: 76,
         columnNumber: 16
       }, this),
       KeyInput && /* @__PURE__ */ jsxDEV12(KeyInput, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 74,
+        lineNumber: 77,
         columnNumber: 18
       }, this),
       TypeSelect && /* @__PURE__ */ jsxDEV12(TypeSelect, {}, void 0, false, {
         fileName: "../../hamr/src/react-json-editor/default-components.tsx",
-        lineNumber: 75,
+        lineNumber: 78,
         columnNumber: 20
       }, this),
       /* @__PURE__ */ jsxDEV12(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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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__ */ jsxDEV12("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)
 };
@@ -3099,7 +3112,7 @@ var JsonEditor = ({
     false,
     {
       fileName: "../../hamr/src/react-json-editor/developer-interface.tsx",
-      lineNumber: 78,
+      lineNumber: 77,
       columnNumber: 3
     },
     this
@@ -3116,15 +3129,527 @@ var SubEditors = {
   string: StringEditor
 };
 
+// ../../hamr/src/react-data-designer/RelationEditor.module.scss
+var RelationEditor_module_default = {};
+
+// ../../hamr/src/react-id/Id.tsx
+import {
+  FloatingPortal,
+  useClick,
+  useFloating,
+  useInteractions
+} from "@floating-ui/react";
+import { pipe as pipe12 } from "fp-ts/function";
+import * as React from "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
+import { pipe as pipe8 } from "fp-ts/function";
+var resetColor = (color) => pipe8(color, specToHex_default, hexToSpec_default, (hsl) => __spreadProps(__spreadValues({}, hsl), {
+  prefer: color.prefer
+}));
+var setLum = (newLum) => (currentColor) => {
+  const newColor = __spreadProps(__spreadValues({}, currentColor), {
+    lum: pipe8(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
+import { pipe as pipe9 } from "fp-ts/function";
+
+// ../../luum/src/mixers/hue.ts
+import { pipe as pipe10 } from "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
+import { pipe as pipe11 } from "fp-ts/function";
+import { isString as isString7 } from "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
+import { Fragment as Fragment3, jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+var Id = ({ id }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: `bottom-start`
+  });
+  const click = useClick(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click]);
+  const bgColor = stringToColor(id);
+  const contrastColor = pipe12(bgColor, hexToSpec_default, contrastMax, specToHex_default);
+  const offsetColor = pipe12(bgColor, hexToSpec_default, offset(0.25), specToHex_default);
+  const contrastOffsetColor = pipe12(
+    offsetColor,
+    hexToSpec_default,
+    contrastMax,
+    specToHex_default
+  );
+  return /* @__PURE__ */ jsxDEV14(Fragment3, { children: [
+    /* @__PURE__ */ jsxDEV14(
+      "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__ */ jsxDEV14(FloatingPortal, { children: /* @__PURE__ */ jsxDEV14(
+      "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
+import { jsxDEV as jsxDEV15 } from "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__ */ jsxDEV15("article", { className: RelationEditor_module_default.class, children: data.map(([head, tail]) => /* @__PURE__ */ jsxDEV15("section", { children: [
+    /* @__PURE__ */ jsxDEV15("span", { children: /* @__PURE__ */ jsxDEV15(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__ */ jsxDEV15("span", { children: tail.map((child) => /* @__PURE__ */ jsxDEV15(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
-import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV16 } 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, {
+  return isJson(data) ? /* @__PURE__ */ jsxDEV16(JsonEditor, { data, set, schema: true }, void 0, false, {
     fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 15,
+    lineNumber: 17,
     columnNumber: 3
-  }, this) : /* @__PURE__ */ jsxDEV14("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV14(
+  }, this) : data instanceof Join ? /* @__PURE__ */ jsxDEV16(RelationEditor, { data, set }, void 0, false, {
+    fileName: "../src/react-devtools/StateEditor.tsx",
+    lineNumber: 19,
+    columnNumber: 3
+  }, this) : /* @__PURE__ */ jsxDEV16("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV16(
     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), `?`),
@@ -3134,19 +3659,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 = useO(token);
-  return isJson(data) ? /* @__PURE__ */ jsxDEV14(
+  return isJson(data) ? /* @__PURE__ */ jsxDEV16(
     JsonEditor,
     {
       data,
@@ -3158,11 +3683,11 @@ var ReadonlySelectorViewer = ({ token }) => {
     false,
     {
       fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 39,
+      lineNumber: 43,
       columnNumber: 3
     },
     this
-  ) : /* @__PURE__ */ jsxDEV14("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV14(
+  ) : /* @__PURE__ */ jsxDEV16("div", { className: "json_editor", children: /* @__PURE__ */ jsxDEV16(
     ElasticInput,
     {
       value: data instanceof Set ? `Set ` + JSON.stringify([...data]) : data instanceof Map ? `Map ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
@@ -3172,33 +3697,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__ */ jsxDEV14(ReadonlySelectorViewer, { token }, void 0, false, {
+    return /* @__PURE__ */ jsxDEV16(ReadonlySelectorViewer, { token }, void 0, false, {
       fileName: "../src/react-devtools/StateEditor.tsx",
-      lineNumber: 67,
+      lineNumber: 71,
       columnNumber: 10
     }, this);
   }
-  return /* @__PURE__ */ jsxDEV14(StateEditor, { token }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV16(StateEditor, { token }, void 0, false, {
     fileName: "../src/react-devtools/StateEditor.tsx",
-    lineNumber: 69,
+    lineNumber: 73,
     columnNumber: 9
   }, this);
 };
 
 // ../src/react-devtools/StateIndex.tsx
-import { Fragment as Fragment4, jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+import { Fragment as Fragment4, jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
 var findStateTypeState = selectorFamily({
   key: `\u{1F441}\u200D\u{1F5E8} State Type`,
   get: (token) => ({ get }) => {
@@ -3221,9 +3746,9 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
   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(
+  return /* @__PURE__ */ jsxDEV17(Fragment4, { children: [
+    /* @__PURE__ */ jsxDEV17("header", { children: [
+      /* @__PURE__ */ jsxDEV17(
         button.OpenClose,
         {
           isOpen: isOpen && !isPrimitive,
@@ -3234,29 +3759,29 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
         false,
         {
           fileName: "../src/react-devtools/StateIndex.tsx",
-          lineNumber: 45,
+          lineNumber: 48,
           columnNumber: 5
         },
         this
       ),
-      /* @__PURE__ */ jsxDEV15(
+      /* @__PURE__ */ jsxDEV17(
         "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, {
+            /* @__PURE__ */ jsxDEV17("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__ */ jsxDEV15("span", { className: "type detail", children: [
+            /* @__PURE__ */ jsxDEV17("span", { className: "type detail", children: [
               "(",
               stateType,
               ")"
             ] }, void 0, true, {
               fileName: "../src/react-devtools/StateIndex.tsx",
-              lineNumber: 55,
+              lineNumber: 58,
               columnNumber: 6
             }, this)
           ]
@@ -3265,33 +3790,33 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
         true,
         {
           fileName: "../src/react-devtools/StateIndex.tsx",
-          lineNumber: 50,
+          lineNumber: 53,
           columnNumber: 5
         },
         this
       ),
-      isPrimitive ? /* @__PURE__ */ jsxDEV15(StoreEditor, { token: node }, void 0, false, {
+      isPrimitive ? /* @__PURE__ */ jsxDEV17(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__ */ jsxDEV15("main", { children: /* @__PURE__ */ jsxDEV15(StoreEditor, { token: node }, void 0, false, {
+    isOpen && !isPrimitive ? /* @__PURE__ */ jsxDEV17("main", { children: /* @__PURE__ */ jsxDEV17(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);
 };
@@ -3301,35 +3826,35 @@ var StateIndexTreeNode = ({ node, isOpenState }) => {
     findViewIsOpenState(key);
     findStateTypeState(childNode);
   });
-  return /* @__PURE__ */ jsxDEV15(Fragment4, { children: [
-    /* @__PURE__ */ jsxDEV15("header", { children: [
-      /* @__PURE__ */ jsxDEV15(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV17(Fragment4, { children: [
+    /* @__PURE__ */ jsxDEV17("header", { children: [
+      /* @__PURE__ */ jsxDEV17(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
         fileName: "../src/react-devtools/StateIndex.tsx",
-        lineNumber: 81,
+        lineNumber: 84,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ jsxDEV15("label", { children: [
-        /* @__PURE__ */ jsxDEV15("h2", { children: node.key }, void 0, false, {
+      /* @__PURE__ */ jsxDEV17("label", { children: [
+        /* @__PURE__ */ jsxDEV17("h2", { children: node.key }, void 0, false, {
           fileName: "../src/react-devtools/StateIndex.tsx",
-          lineNumber: 83,
+          lineNumber: 86,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ jsxDEV15("span", { className: "type detail", children: " (family)" }, void 0, false, {
+        /* @__PURE__ */ jsxDEV17("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__ */ jsxDEV15(
+    isOpen ? Object.entries(node.familyMembers).map(([key, childNode]) => /* @__PURE__ */ jsxDEV17(
       StateIndexNode,
       {
         node: childNode,
@@ -3340,14 +3865,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);
 };
@@ -3355,7 +3880,7 @@ 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(
+  return /* @__PURE__ */ jsxDEV17("section", { className: "node state", children: `type` in node ? /* @__PURE__ */ jsxDEV17(
     StateIndexLeafNode,
     {
       node,
@@ -3366,24 +3891,24 @@ var StateIndexNode = ({ node, isOpenState, typeState }) => {
     false,
     {
       fileName: "../src/react-devtools/StateIndex.tsx",
-      lineNumber: 114,
+      lineNumber: 117,
       columnNumber: 5
     },
     this
-  ) : /* @__PURE__ */ jsxDEV15(StateIndexTreeNode, { node, isOpenState }, void 0, false, {
+  ) : /* @__PURE__ */ jsxDEV17(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 = 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(
+  return /* @__PURE__ */ jsxDEV17("article", { className: "index state_index", children: Object.entries(tokenIds).filter(([key]) => !key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).sort().map(([key, node]) => {
+    return /* @__PURE__ */ jsxDEV17(
       StateIndexNode,
       {
         node,
@@ -3394,14 +3919,14 @@ 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);
 };
@@ -3415,16 +3940,16 @@ 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";
+import { Fragment as Fragment5, jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
 var AtomUpdateFC = ({ atomUpdate }) => {
-  return /* @__PURE__ */ jsxDEV16(
+  return /* @__PURE__ */ jsxDEV18(
     "article",
     {
       className: "node atom_update",
       onClick: () => console.log(atomUpdate),
       onKeyUp: () => console.log(atomUpdate),
       children: [
-        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: [
+        /* @__PURE__ */ jsxDEV18("span", { className: "detail", children: [
           atomUpdate.key,
           ": "
         ] }, void 0, true, {
@@ -3432,7 +3957,7 @@ var AtomUpdateFC = ({ atomUpdate }) => {
           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, {
+        /* @__PURE__ */ jsxDEV18("span", { children: /* @__PURE__ */ jsxDEV18("span", { className: "summary", children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary }, void 0, false, {
           fileName: "../src/react-devtools/Updates.tsx",
           lineNumber: 22,
           columnNumber: 5
@@ -3454,8 +3979,8 @@ var AtomUpdateFC = ({ atomUpdate }) => {
   );
 };
 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, {
+  return /* @__PURE__ */ jsxDEV18("article", { className: "node transaction_update", children: [
+    /* @__PURE__ */ jsxDEV18("header", { children: /* @__PURE__ */ jsxDEV18("h4", { children: serialNumber }, void 0, false, {
       fileName: "../src/react-devtools/Updates.tsx",
       lineNumber: 37,
       columnNumber: 5
@@ -3464,22 +3989,22 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
       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, {
+    /* @__PURE__ */ jsxDEV18("main", { children: [
+      /* @__PURE__ */ jsxDEV18("section", { className: "transaction_params", children: [
+        /* @__PURE__ */ jsxDEV18("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(
+          return /* @__PURE__ */ jsxDEV18(
             "article",
             {
               className: "node transaction_param",
               onClick: () => console.log(transactionUpdate),
               onKeyUp: () => console.log(transactionUpdate),
               children: [
-                /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: [
+                /* @__PURE__ */ jsxDEV18("span", { className: "detail", children: [
                   discoverType(param),
                   ": "
                 ] }, void 0, true, {
@@ -3487,11 +4012,11 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
                   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, {
+                /* @__PURE__ */ jsxDEV18("span", { className: "summary", children: typeof param === `object` && `type` in param && `target` in param ? /* @__PURE__ */ jsxDEV18(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, {
+                }, this) : /* @__PURE__ */ jsxDEV18(Fragment5, { children: JSON.stringify(param) }, void 0, false, {
                   fileName: "../src/react-devtools/Updates.tsx",
                   lineNumber: 57,
                   columnNumber: 11
@@ -3517,18 +4042,18 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
         lineNumber: 40,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ jsxDEV16("section", { className: "node transaction_output", children: [
-        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: "output: " }, void 0, false, {
+      /* @__PURE__ */ jsxDEV18("section", { className: "node transaction_output", children: [
+        /* @__PURE__ */ jsxDEV18("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, {
+        /* @__PURE__ */ jsxDEV18("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: [
+        transactionUpdate.output ? /* @__PURE__ */ jsxDEV18("span", { className: "summary", children: [
           ": ",
           JSON.stringify(transactionUpdate.output)
         ] }, void 0, true, {
@@ -3541,14 +4066,14 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
         lineNumber: 64,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ jsxDEV16("section", { className: "transaction_impact", children: [
-        /* @__PURE__ */ jsxDEV16("span", { className: "detail", children: "impact: " }, void 0, false, {
+      /* @__PURE__ */ jsxDEV18("section", { className: "transaction_impact", children: [
+        /* @__PURE__ */ jsxDEV18("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(
+          return /* @__PURE__ */ jsxDEV18(
             article.AtomUpdate,
             {
               serialNumber: index,
@@ -3581,8 +4106,8 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
   }, this);
 };
 var TimelineUpdateFC = ({ timelineUpdate }) => {
-  return /* @__PURE__ */ jsxDEV16("article", { className: "node timeline_update", children: [
-    /* @__PURE__ */ jsxDEV16("header", { children: /* @__PURE__ */ jsxDEV16("h4", { children: [
+  return /* @__PURE__ */ jsxDEV18("article", { className: "node timeline_update", children: [
+    /* @__PURE__ */ jsxDEV18("header", { children: /* @__PURE__ */ jsxDEV18("h4", { children: [
       timelineUpdate.timestamp,
       ": ",
       timelineUpdate.type,
@@ -3598,8 +4123,8 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
       lineNumber: 99,
       columnNumber: 4
     }, 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(
+    /* @__PURE__ */ jsxDEV18("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
+      return /* @__PURE__ */ jsxDEV18(
         article.AtomUpdate,
         {
           serialNumber: index,
@@ -3615,7 +4140,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__ */ jsxDEV16(
+      return /* @__PURE__ */ jsxDEV18(
         article.AtomUpdate,
         {
           serialNumber: index,
@@ -3630,7 +4155,7 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
         },
         this
       );
-    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsxDEV16(
+    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsxDEV18(
       article.AtomUpdate,
       {
         serialNumber: timelineUpdate.timestamp,
@@ -3662,9 +4187,9 @@ var article = {
 };
 
 // ../src/react-devtools/TimelineIndex.tsx
-import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19 } from "react/jsx-dev-runtime";
 var YouAreHere = () => {
-  return /* @__PURE__ */ jsxDEV17("span", { className: "you_are_here", children: "you are here" }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV19("span", { className: "you_are_here", children: "you are here" }, void 0, false, {
     fileName: "../src/react-devtools/TimelineIndex.tsx",
     lineNumber: 17,
     columnNumber: 9
@@ -3673,20 +4198,20 @@ var YouAreHere = () => {
 var TimelineLog = ({ token, isOpenState, timelineState }) => {
   const timeline2 = 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, {
+  return /* @__PURE__ */ jsxDEV19("section", { className: "node timeline_log", children: [
+    /* @__PURE__ */ jsxDEV19("header", { children: [
+      /* @__PURE__ */ jsxDEV19(button.OpenClose, { isOpen, setIsOpen }, void 0, false, {
         fileName: "../src/react-devtools/TimelineIndex.tsx",
         lineNumber: 31,
         columnNumber: 5
       }, this),
-      /* @__PURE__ */ jsxDEV17("label", { children: [
-        /* @__PURE__ */ jsxDEV17("h2", { children: token.key }, void 0, false, {
+      /* @__PURE__ */ jsxDEV19("label", { children: [
+        /* @__PURE__ */ jsxDEV19("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: [
+        /* @__PURE__ */ jsxDEV19("span", { className: "detail length", children: [
           "(",
           timeline2.at,
           "/",
@@ -3697,13 +4222,13 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
           lineNumber: 34,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ jsxDEV17("span", { className: "gap" }, void 0, false, {
+        /* @__PURE__ */ jsxDEV19("span", { className: "gap" }, void 0, false, {
           fileName: "../src/react-devtools/TimelineIndex.tsx",
           lineNumber: 37,
           columnNumber: 6
         }, this),
-        /* @__PURE__ */ jsxDEV17("nav", { children: [
-          /* @__PURE__ */ jsxDEV17(
+        /* @__PURE__ */ jsxDEV19("nav", { children: [
+          /* @__PURE__ */ jsxDEV19(
             "button",
             {
               type: "button",
@@ -3720,7 +4245,7 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
             },
             this
           ),
-          /* @__PURE__ */ jsxDEV17(
+          /* @__PURE__ */ jsxDEV19(
             "button",
             {
               type: "button",
@@ -3752,18 +4277,18 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
       lineNumber: 30,
       columnNumber: 4
     }, this),
-    isOpen ? /* @__PURE__ */ jsxDEV17("main", { children: timeline2.history.map((update, index) => /* @__PURE__ */ jsxDEV17(Fragment6, { children: [
-      index === timeline2.at ? /* @__PURE__ */ jsxDEV17(YouAreHere, {}, void 0, false, {
+    isOpen ? /* @__PURE__ */ jsxDEV19("main", { children: timeline2.history.map((update, index) => /* @__PURE__ */ jsxDEV19(Fragment6, { children: [
+      index === timeline2.at ? /* @__PURE__ */ jsxDEV19(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, {
+      /* @__PURE__ */ jsxDEV19(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__ */ jsxDEV17(YouAreHere, {}, void 0, false, {
+      index === timeline2.history.length - 1 && timeline2.at === timeline2.history.length ? /* @__PURE__ */ jsxDEV19(YouAreHere, {}, void 0, false, {
         fileName: "../src/react-devtools/TimelineIndex.tsx",
         lineNumber: 64,
         columnNumber: 9
@@ -3785,8 +4310,8 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
 };
 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(
+  return /* @__PURE__ */ jsxDEV19("article", { className: "index timeline_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ jsxDEV19(
       TimelineLog,
       {
         token,
@@ -3811,24 +4336,24 @@ var TimelineIndex = () => {
 
 // ../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";
+import { jsxDEV as jsxDEV20 } 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, {
+  return /* @__PURE__ */ jsxDEV20("section", { className: "node transaction_log", children: [
+    /* @__PURE__ */ jsxDEV20("header", { children: [
+      /* @__PURE__ */ jsxDEV20(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, {
+      /* @__PURE__ */ jsxDEV20("label", { children: [
+        /* @__PURE__ */ jsxDEV20("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: [
+        /* @__PURE__ */ jsxDEV20("span", { className: "detail length", children: [
           "(",
           log.length,
           ")"
@@ -3847,7 +4372,7 @@ var TransactionLog = ({ token, isOpenState, logState }) => {
       lineNumber: 30,
       columnNumber: 4
     }, this),
-    isOpen ? /* @__PURE__ */ jsxDEV18("main", { children: log.map((update, index) => /* @__PURE__ */ jsxDEV18(
+    isOpen ? /* @__PURE__ */ jsxDEV20("main", { children: log.map((update, index) => /* @__PURE__ */ jsxDEV20(
       article.TransactionUpdate,
       {
         serialNumber: index,
@@ -3874,8 +4399,8 @@ var TransactionLog = ({ token, isOpenState, logState }) => {
 };
 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(
+  return /* @__PURE__ */ jsxDEV20("article", { className: "index transaction_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ jsxDEV20(
       TransactionLog,
       {
         token,
@@ -3899,15 +4424,15 @@ var TransactionIndex = () => {
 };
 
 // ../src/react-devtools/AtomIODevtools.tsx
-import { Fragment as Fragment7, jsxDEV as jsxDEV19 } from "react/jsx-dev-runtime";
+import { Fragment as Fragment7, jsxDEV as jsxDEV21 } 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(
+  return /* @__PURE__ */ jsxDEV21(Fragment7, { children: [
+    /* @__PURE__ */ jsxDEV21(
       motion.span,
       {
         ref: constraintsRef,
@@ -3930,7 +4455,7 @@ var AtomIODevtools = () => {
       },
       this
     ),
-    /* @__PURE__ */ jsxDEV19(
+    /* @__PURE__ */ jsxDEV21(
       motion.main,
       {
         drag: true,
@@ -3944,14 +4469,14 @@ var AtomIODevtools = () => {
           maxWidth: 33
         },
         children: [
-          devtoolsAreOpen ? /* @__PURE__ */ jsxDEV19(Fragment7, { children: [
-            /* @__PURE__ */ jsxDEV19(motion.header, { children: [
-              /* @__PURE__ */ jsxDEV19("h1", { children: "atom.io" }, void 0, false, {
+          devtoolsAreOpen ? /* @__PURE__ */ jsxDEV21(Fragment7, { children: [
+            /* @__PURE__ */ jsxDEV21(motion.header, { children: [
+              /* @__PURE__ */ jsxDEV21("h1", { children: "atom.io" }, void 0, false, {
                 fileName: "../src/react-devtools/AtomIODevtools.tsx",
                 lineNumber: 60,
                 columnNumber: 8
               }, this),
-              /* @__PURE__ */ jsxDEV19("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsxDEV19(
+              /* @__PURE__ */ jsxDEV21("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsxDEV21(
                 "button",
                 {
                   type: "button",
@@ -3978,19 +4503,19 @@ var AtomIODevtools = () => {
               lineNumber: 59,
               columnNumber: 7
             }, this),
-            /* @__PURE__ */ jsxDEV19(motion.main, { children: /* @__PURE__ */ jsxDEV19(LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsxDEV19(StateIndex, { tokenIndex: atomIndex }, void 0, false, {
+            /* @__PURE__ */ jsxDEV21(motion.main, { children: /* @__PURE__ */ jsxDEV21(LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsxDEV21(StateIndex, { tokenIndex: atomIndex }, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 78,
               columnNumber: 10
-            }, this) : devtoolsView === `selectors` ? /* @__PURE__ */ jsxDEV19(StateIndex, { tokenIndex: selectorIndex }, void 0, false, {
+            }, this) : devtoolsView === `selectors` ? /* @__PURE__ */ jsxDEV21(StateIndex, { tokenIndex: selectorIndex }, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 80,
               columnNumber: 10
-            }, this) : devtoolsView === `transactions` ? /* @__PURE__ */ jsxDEV19(TransactionIndex, {}, void 0, false, {
+            }, this) : devtoolsView === `transactions` ? /* @__PURE__ */ jsxDEV21(TransactionIndex, {}, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 82,
               columnNumber: 10
-            }, this) : devtoolsView === `timelines` ? /* @__PURE__ */ jsxDEV19(TimelineIndex, {}, void 0, false, {
+            }, this) : devtoolsView === `timelines` ? /* @__PURE__ */ jsxDEV21(TimelineIndex, {}, void 0, false, {
               fileName: "../src/react-devtools/AtomIODevtools.tsx",
               lineNumber: 84,
               columnNumber: 10
@@ -4008,7 +4533,7 @@ var AtomIODevtools = () => {
             lineNumber: 58,
             columnNumber: 6
           }, this) : null,
-          /* @__PURE__ */ jsxDEV19("footer", { children: /* @__PURE__ */ jsxDEV19(
+          /* @__PURE__ */ jsxDEV21("footer", { children: /* @__PURE__ */ jsxDEV21(
             "button",
             {
               type: "button",