atom.io 0.19.0 → 0.19.2

package/react-devtools/dist/index.cjs

@@ -2,31 +2,10 @@
 
 var atom_io = require('atom.io');
 var introspection = require('atom.io/introspection');
-var react = require('atom.io/react');
+var react$1 = require('atom.io/react');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -97,18 +76,6 @@ 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);
@@ -121,24 +88,11 @@ var fallback = (fn, fallbackValue) => {
   }
 };
 
-// ../anvl/src/array/venn.ts
-var includesAll = (items) => (array) => {
-  for (const item of items) {
-    if (!array.includes(item))
-      return false;
-  }
-  return true;
-};
-var comprises = (items) => (array) => includesAll(items)(array) && includesAll(array)(items);
-
 // ../anvl/src/array/index.ts
 var isArray = (isType) => (input) => Array.isArray(input) && input.every((item) => isType(item));
 var map = (f) => (a2) => a2.map(f);
 var every = (f = Boolean) => (a2) => a2.every(f);
 var allTrue = every((x) => x === true);
-var addTo = (a2) => (x) => a2.includes(x) ? a2 : [...a2, x];
-var isEmptyArray = (input) => Array.isArray(input) && input.length === 0;
-var isOneOf = (...args) => (input) => args.includes(input);
 
 // ../anvl/src/nullish/index.ts
 var isUndefined = (input) => input === void 0;
@@ -166,7 +120,6 @@ var mob = (fn) => (obj) => mapObject(obj, fn);
 // ../anvl/src/object/refinement.ts
 var isNonNullObject = (input) => typeof input === `object` && input !== null;
 var isPlainObject = (input) => isNonNullObject(input) && Object.getPrototypeOf(input) === Object.prototype;
-var isEmptyObject = (input) => isPlainObject(input) && Object.keys(input).length === 0;
 var isRecord = (isKey, isValue) => (input) => isPlainObject(input) && Object.entries(input).every(([k, v]) => isKey(k) && isValue(v));
 var hasProperties = (isValue, options = { allowExtraProperties: false }) => {
   const name = `{${recordToEntries(
@@ -195,20 +148,19 @@ var hasProperties = (isValue, options = { allowExtraProperties: false }) => {
 };
 var ALLOW_EXTENSION = { allowExtraProperties: true };
 var doesExtend = (isValue) => hasProperties(isValue, ALLOW_EXTENSION);
-var DO_NOT_ALLOW_EXTENSION = { allowExtraProperties: false };
-var hasExactProperties = (isValue) => hasProperties(isValue, DO_NOT_ALLOW_EXTENSION);
 
 // ../anvl/src/object/sprawl.ts
 var sprawl = (tree, inspector) => {
   const walk = (path, node) => {
-    const inspect = (path2, node2) => {
-      const result2 = inspector(path2, node2);
+    var _a2;
+    const inspect = (p, n) => {
+      const result2 = inspector(p, n);
       if (result2)
         return result2;
       return null;
     };
     const result = inspect(path, node);
-    if ((result == null ? void 0 : result.jobComplete) || (result == null ? void 0 : result.pathComplete)) {
+    if ((_a2 = result == null ? void 0 : result.jobComplete) != null ? _a2 : result == null ? void 0 : result.pathComplete) {
       return result;
     }
     const childEntries = Array.isArray(node) ? node.map((v, i) => [i, v]) : isPlainObject(node) ? Object.entries(node) : [];
@@ -224,16 +176,6 @@ var sprawl = (tree, inspector) => {
 };
 
 // ../anvl/src/object/index.ts
-var treeShake = (shouldDiscard = isUndefined) => (obj) => {
-  const newObj = {};
-  const entries = Object.entries(obj);
-  for (const [key, val] of entries) {
-    if (!shouldDiscard(val, key)) {
-      newObj[key] = val;
-    }
-  }
-  return newObj;
-};
 var delve = (obj, path) => {
   const found = path.reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
   return found === void 0 ? new Error(`Not found`) : { found };
@@ -258,7 +200,7 @@ var Refinery = class {
           if (input instanceof refiner) {
             return { type: key, data: input };
           }
-        } catch (e2) {
+        } catch (_) {
         }
       }
     }
@@ -332,8 +274,8 @@ var isJson = (input) => {
   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;
+  const refine = JSON_PROTOTYPES.includes(prototype);
+  return refine;
 };
 
 // ../anvl/src/refinement/can-exist.ts
@@ -526,13 +468,16 @@ var persistAtom = (storage) => ({ stringify, parse }) => (key) => ({ setSelf, on
   });
 };
 var lazyLocalStorageEffect = persistAtom(window.localStorage)(JSON);
-var OpenClose = ({ isOpen, setIsOpen, disabled }) => {
+var OpenClose = ({ isOpen, setIsOpen, disabled, testid }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
+      "data-testid": testid,
       className: `carat ${isOpen ? `open` : `closed`}`,
-      onClick: () => setIsOpen((isOpen2) => !isOpen2),
+      onClick: () => {
+        setIsOpen((prev) => !prev);
+      },
       disabled,
       children: "\u25B6"
     }
@@ -541,307 +486,12 @@ var OpenClose = ({ isOpen, setIsOpen, disabled }) => {
 var button = {
   OpenClose
 };
-
-// ../anvl/src/join/core-relation-data.ts
-var RELATION_TYPES = [`1:1`, `1:n`, `n:n`];
-var isRelationType = (x) => RELATION_TYPES.includes(x);
-var EMPTY_RELATION_DATA = {
-  contents: {},
-  relations: {},
-  relationType: `n:n`,
-  a: `from`,
-  b: `to`
-};
-var isRelationData = ({
-  from: a2 = `from`,
-  to: b2 = `to`,
-  isContent
-} = {}) => (input) => {
-  return hasExactProperties({
-    contents: isContent ? isRecord(isString, isContent) : hasExactProperties({}),
-    relations: isRecord(isString, isArray(isString)),
-    relationType: isRelationType,
-    a: isLiteral(a2),
-    b: isLiteral(b2)
-  })(input);
-};
-
-// ../anvl/src/join/get-related-ids.ts
-var getRelatedIds = (relationMap, id) => {
-  var _a2;
-  return (_a2 = relationMap.relations[id]) != null ? _a2 : [];
-};
-var getRelatedId = (relationMap, id) => {
-  const relations = getRelatedIds(relationMap, id);
-  if (relations.length > 1) {
-    console.warn(
-      `entry with id ${id} was not expected to have multiple relations`
-    );
-  }
-  return relations[0];
-};
-
-// ../anvl/src/join/make-json-interface.ts
-var makeJsonInterface = (join, ...params) => {
-  const isContent = params[0];
-  const { a: a2, b: b2 } = join;
-  const options = {
-    from: a2,
-    to: b2,
-    isContent
-  };
-  return {
-    toJson: (join2) => join2.toJSON(),
-    fromJson: (json) => Join.fromJSON(json, options)
-  };
-};
-
-// ../anvl/src/join/relation-record.ts
-var getRelationEntries = (relationMap, idA) => getRelatedIds(relationMap, idA).map((idB) => [
-  idB,
-  getContent(relationMap, idA, idB)
-]);
-var getRelationRecord = (relationMap, id) => Object.fromEntries(getRelationEntries(relationMap, id));
-
-// ../anvl/src/string/split.ts
-var split = (separator) => (str) => str.split(separator);
-
-// ../anvl/src/join/remove-relation.ts
-var removeSpecific = (current, idA, idB) => {
-  const isIdForRemoval = isOneOf(idA, idB);
-  return __spreadProps(__spreadValues({}, current), {
-    relations: pipe(
-      current.relations,
-      recordToEntries,
-      map(([id, relations]) => [
-        id,
-        isIdForRemoval(id) ? relations.filter((relation) => !isIdForRemoval(relation)) : relations
-      ]),
-      entriesToRecord,
-      treeShake(isEmptyArray)
-    ),
-    contents: pipe(
-      current.contents,
-      treeShake(
-        (_, key) => isString(key) && pipe(key, split(`/`), comprises([idA, idB]))
-      )
-    )
-  });
-};
-var removeAll = (current, idToRemove) => {
-  const next = __spreadProps(__spreadValues({}, current), {
-    relations: pipe(
-      current.relations,
-      recordToEntries,
-      map(([id, relations]) => [
-        id,
-        relations.filter((relation) => relation !== idToRemove)
-      ]),
-      entriesToRecord,
-      treeShake((val, key) => key === idToRemove || isEmptyArray(val))
-    ),
-    contents: pipe(
-      current.contents,
-      treeShake(
-        (_, key) => isString(key) && key.split(`/`).includes(idToRemove)
-      )
-    )
-  });
-  return next;
-};
-var removeRelation = (current, relation) => {
-  const idA = relation[current.a];
-  const idB = relation[current.b];
-  return idB ? removeSpecific(current, idA, idB) : removeAll(current, idA);
-};
-
-// ../anvl/src/join/set-relation.ts
-var setManyToMany = (map2, idA, idB, ...rest) => {
-  var _a2, _b;
-  const next = __spreadProps(__spreadValues({}, map2), {
-    relations: __spreadProps(__spreadValues({}, map2.relations), {
-      [idA]: addTo((_a2 = map2.relations[idA]) != null ? _a2 : [])(idB),
-      [idB]: addTo((_b = map2.relations[idB]) != null ? _b : [])(idA)
-    })
-  });
-  const content = rest[0];
-  return content ? setContent(next, idA, idB, content) : next;
-};
-var removeEmpties = treeShake(isEmptyArray);
-var set1ToMany = (current, leaderId, followerId, ...rest) => {
-  var _a2;
-  const relations = __spreadValues({}, current.relations);
-  const prevLeaderId = getRelatedId(current, followerId);
-  const next = __spreadProps(__spreadValues({}, current), {
-    relations: removeEmpties(__spreadProps(__spreadValues(__spreadValues({}, relations), prevLeaderId && prevLeaderId !== leaderId && {
-      [prevLeaderId]: relations[prevLeaderId].filter(
-        (id) => id !== followerId
-      )
-    }), {
-      [followerId]: [leaderId],
-      [leaderId]: addTo((_a2 = relations[leaderId]) != null ? _a2 : [])(followerId)
-    }))
-  });
-  const content = rest[0];
-  return content ? setContent(next, leaderId, followerId, content) : next;
-};
-var set1To1 = (current, wifeId, husbandId, ...rest) => {
-  const prevWifeId = getRelatedId(current, husbandId);
-  const prevHusbandId = getRelatedId(current, wifeId);
-  const next = __spreadProps(__spreadValues({}, current), {
-    relations: removeEmpties(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, current.relations), prevWifeId && { [prevWifeId]: [] }), prevHusbandId && { [prevHusbandId]: [] }), {
-      [wifeId]: [husbandId],
-      [husbandId]: [wifeId]
-    }))
-  });
-  const content = rest[0];
-  return content ? setContent(next, wifeId, husbandId, content) : next;
-};
-var setRelationWithContent = (current, relation, ...rest) => {
-  const { [current.a]: idA, [current.b]: idB } = relation;
-  switch (current.relationType) {
-    case `1:1`:
-      return set1To1(current, idA, idB, ...rest);
-    case `1:n`:
-      return set1ToMany(current, idA, idB, ...rest);
-    case `n:n`:
-      return setManyToMany(current, idA, idB, ...rest);
-  }
-};
-
-// ../anvl/src/join/relation-contents.ts
-var makeContentId = (idA, idB) => [idA, idB].sort().join(`/`);
-var getContent = (relationMap, idA, idB) => relationMap.contents[makeContentId(idA, idB)];
-var setContent = (map2, idA, idB, content) => __spreadProps(__spreadValues({}, map2), {
-  contents: __spreadProps(__spreadValues({}, map2.contents), {
-    [makeContentId(idA, idB)]: content
-  })
-});
-var getRelations = (relationMap, id) => getRelationEntries(relationMap, id).map(
-  ([id2, content]) => __spreadValues({
-    id: id2
-  }, content)
-);
-var setRelations = (current, subject, relations) => {
-  const idA = subject[current.a];
-  const idB = subject[current.b];
-  return pipe(
-    current,
-    (relationData) => {
-      const relatedIds = getRelatedIds(current, idA);
-      const removedIds = relatedIds.filter(
-        (id) => !relations.some((r) => r.id === id)
-      );
-      let step = relationData;
-      for (const id of removedIds) {
-        const remove = {
-          [current.a]: idA != null ? idA : id,
-          [current.b]: idB != null ? idB : id
-        };
-        step = removeRelation(step, remove);
-      }
-      return step;
-    },
-    (relationData) => {
-      let step = relationData;
-      for (const _a2 of relations) {
-        const _b = _a2, { id } = _b, rest = __objRest(_b, ["id"]);
-        const content = isEmptyObject(rest) ? void 0 : rest;
-        step = setRelationWithContent(
-          step,
-          { [current.a]: idA != null ? idA : id, [current.b]: idB != null ? idB : id },
-          // @ts-expect-error hacky
-          content
-        );
-      }
-      return step;
-    },
-    (relationData) => {
-      const newlyOrderedIds = relations.map((r) => r.id);
-      return __spreadProps(__spreadValues({}, relationData), {
-        relations: __spreadProps(__spreadValues({}, relationData.relations), {
-          [idA != null ? idA : idB]: newlyOrderedIds
-        })
-      });
-    }
-  );
-};
-
-// ../anvl/src/join/index.ts
-var Join = class _Join {
-  constructor(json) {
-    this.a = `from`;
-    this.b = `to`;
-    this.makeJsonInterface = (...params) => {
-      return makeJsonInterface(this, ...params);
-    };
-    Object.assign(this, __spreadProps(__spreadValues(__spreadValues({}, EMPTY_RELATION_DATA), json), {
-      makeJsonInterface: this.makeJsonInterface
-    }));
-  }
-  toJSON() {
-    return {
-      relationType: this.relationType,
-      relations: this.relations,
-      contents: this.contents,
-      a: this.a,
-      b: this.b
-    };
-  }
-  static fromJSON(json, options) {
-    const isValid = isRelationData(options)(json);
-    if (isValid) {
-      return new _Join(json);
-    }
-    throw new Error(
-      `Saved JSON for this Join is invalid: ${JSON.stringify(json)}`
-    );
-  }
-  from(newA) {
-    return new _Join(__spreadProps(__spreadValues({}, this), { a: newA }));
-  }
-  to(newB) {
-    return new _Join(__spreadProps(__spreadValues({}, this), { b: newB }));
-  }
-  getRelatedId(id) {
-    return getRelatedId(this, id);
-  }
-  getRelatedIds(id) {
-    return getRelatedIds(this, id);
-  }
-  getContent(idA, idB) {
-    return getContent(this, idA, idB);
-  }
-  getRelationEntries(id) {
-    return getRelationEntries(this, id);
-  }
-  getRelationRecord(id) {
-    return getRelationRecord(this, id);
-  }
-  getRelation(id) {
-    return getRelations(this, id)[0];
-  }
-  getRelations(id) {
-    return getRelations(this, id);
-  }
-  setRelations(subject, relations) {
-    return new _Join(setRelations(this, subject, relations));
-  }
-  set(relation, ...rest) {
-    return new _Join(setRelationWithContent(this, relation, ...rest));
-  }
-  remove(relation) {
-    return new _Join(
-      removeRelation(this, relation)
-    );
-  }
-};
-var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
-  var _a2, _b, _c, _d;
-  const inputRef = React.useRef(null);
-  const spanRef = React.useRef(null);
-  const [inputWidth, setInputWidth] = React.useState(`auto`);
-  React.useImperativeHandle(
+var ElasticInput = react.forwardRef(function ElasticInputFC(props, ref) {
+  var _a2, _b, _c, _d, _e, _f;
+  const inputRef = react.useRef(null);
+  const spanRef = react.useRef(null);
+  const [inputWidth, setInputWidth] = react.useState(`auto`);
+  react.useImperativeHandle(
     ref,
     () => ({
       focus: () => {
@@ -851,7 +501,7 @@ var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
     })
   );
   const extraWidth = props.type === `number` ? 15 : 0;
-  React.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (spanRef.current) {
       setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
       const interval = setInterval(() => {
@@ -859,7 +509,9 @@ var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
           setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
         }
       }, 1e3);
-      return () => clearInterval(interval);
+      return () => {
+        clearInterval(interval);
+      };
     }
   }, [(_a2 = inputRef.current) == null ? void 0 : _a2.value, props.value]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: `inline-block`, position: `relative` }, children: [
@@ -887,8 +539,8 @@ var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
           visibility: `hidden`,
           // color: `red`,
           whiteSpace: `pre`,
-          fontFamily: ((_c = props.style) == null ? void 0 : _c.fontFamily) || `inherit`,
-          fontSize: ((_d = props.style) == null ? void 0 : _d.fontSize) || `inherit`
+          fontFamily: (_d = (_c = props.style) == null ? void 0 : _c.fontFamily) != null ? _d : `inherit`,
+          fontSize: (_f = (_e = props.style) == null ? void 0 : _e.fontSize) != null ? _f : `inherit`
         },
         children: props.value
       }
@@ -898,9 +550,6 @@ var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
 
 // ../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);
 function round(value, decimalPlaces) {
   if (decimalPlaces === void 0)
     return value;
@@ -919,11 +568,11 @@ var isDecimalInProgress = (input) => input === `0` || !Number.isNaN(Number(input
 var textToValue = (input, allowDecimal) => {
   if (isValidNonNumber(input))
     return VALID_NON_NUMBER_INTERPRETATIONS[input];
-  return allowDecimal ? parseFloat(input) : Math.round(parseFloat(input));
+  return allowDecimal ? Number.parseFloat(input) : Math.round(Number.parseFloat(input));
 };
 var DEFAULT_NUMBER_CONSTRAINTS = {
-  max: Infinity,
-  min: -Infinity,
+  max: Number.POSITIVE_INFINITY,
+  min: Number.NEGATIVE_INFINITY,
   decimalPlaces: 100,
   nullable: true
 };
@@ -960,9 +609,9 @@ var NumberInput = ({
   testId,
   value = null
 }) => {
-  const id = React.useId();
-  const [temporaryEntry, setTemporaryEntry] = React.useState(null);
-  const userHasMadeDeliberateChange = React.useRef(false);
+  const id = react.useId();
+  const [temporaryEntry, setTemporaryEntry] = react.useState(null);
+  const userHasMadeDeliberateChange = react.useRef(false);
   const refine = initRefinery({ max, min, decimalPlaces, nullable: true });
   const allowDecimal = decimalPlaces === void 0 || decimalPlaces > 0;
   const handleBlur = () => {
@@ -1101,7 +750,9 @@ var JsonEditor_INTERNAL = ({
       ElasticInput,
       {
         value: name,
-        onChange: disabled ? doNothing : (e) => rename(e.target.value),
+        onChange: disabled ? doNothing : (e) => {
+          rename(e.target.value);
+        },
         disabled
       }
     ) }),
@@ -1122,7 +773,9 @@ var JsonEditor_INTERNAL = ({
     recast && dataIsJson ? /* @__PURE__ */ jsxRuntime.jsx(
       "select",
       {
-        onChange: disabled ? doNothing : (e) => recast(e.target.value),
+        onChange: disabled ? doNothing : (e) => {
+          recast(e.target.value);
+        },
         value: refined.type,
         disabled,
         children: Object.keys(SubEditors).map((type) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: type, children: type }, type))
@@ -1132,13 +785,13 @@ var JsonEditor_INTERNAL = ({
 };
 
 // ../hamr/react-json-editor/src/editors-by-type/utilities/array-elements.ts
-var makeElementSetters = (data, set) => data.map(
-  (value, index) => (newValue) => set(() => {
+var makeElementSetters = (data, set) => data.map((value, index) => (newValue) => {
+  set(() => {
     const newData = [...data];
     newData[index] = become(newValue)(value);
     return newData;
-  })
-);
+  });
+});
 var ArrayEditor = ({
   path = [],
   isReadonly = () => false,
@@ -1194,7 +847,7 @@ var Int = Object.assign((input) => parseInteger(input), {
   from: (input) => pipe(
     input,
     String,
-    parseFloat,
+    Number.parseFloat,
     (num) => isInteger(num) ? {
       value: num,
       error: null,
@@ -1435,7 +1088,9 @@ var expandPathForSchema = (path) => {
           );
         default:
           throw new TypeError(
-            `The key ${key} is not a valid JSON key; expected string or number, got ${typeof key}`
+            `The key ${JSON.stringify(
+              key
+            )} is not a valid JSON key; expected string or number, got ${typeof key}`
           );
       }
     });
@@ -1458,10 +1113,11 @@ var findSubSchema = (schema) => {
     if (typeof schema === `boolean`) {
       return new TypeError(`The schema is not a JsonSchema`);
     }
-    const { node, refMap } = pathIntoSchema.reduce(
+    const reduction = pathIntoSchema.reduce(
       ({ node: node2, refMap: refMap2 = void 0 }, key) => (console.log({ node: node2, key }), isJsonSchemaRef(node2) ? retrieveRef({ refNode: node2, root: schema, refMap: refMap2 }) : { node: node2[key], refMap: refMap2 }),
       { node: schema, refMap: void 0 }
     );
+    const { node, refMap } = reduction;
     if (node instanceof Error)
       throw node;
     let subSchema = node;
@@ -1616,35 +1272,44 @@ var castToJson = (input) => {
 // ../hamr/react-json-editor/src/editors-by-type/utilities/object-properties.ts
 var makePropertySetters = (data, set) => mapObject(
   data,
-  (value, key) => (newValue) => set(__spreadProps(__spreadValues({}, data), { [key]: become(newValue)(value[key]) }))
+  (value, key) => (newValue) => {
+    set(__spreadProps(__spreadValues({}, data), { [key]: become(newValue)(value[key]) }));
+  }
 );
 var makePropertyRenamers = (data, set, stableKeyMapRef) => mapObject(
   data,
-  (value, key) => (newKey) => Object.hasOwn(data, newKey) ? null : set(() => {
-    const entries = Object.entries(data);
-    const index = entries.findIndex(([k]) => k === key);
-    entries[index] = [newKey, value];
-    const stableKeyMap = stableKeyMapRef.current;
-    stableKeyMapRef.current = __spreadProps(__spreadValues({}, stableKeyMap), {
-      [newKey]: stableKeyMap[key]
-    });
-    return Object.fromEntries(entries);
-  })
+  (value, key) => (newKey) => {
+    if (!Object.hasOwn(data, newKey)) {
+      set(() => {
+        const entries = Object.entries(data);
+        const index = entries.findIndex(([k]) => k === key);
+        entries[index] = [newKey, value];
+        const stableKeyMap = stableKeyMapRef.current;
+        stableKeyMapRef.current = __spreadProps(__spreadValues({}, stableKeyMap), {
+          [newKey]: stableKeyMap[key]
+        });
+        return Object.fromEntries(entries);
+      });
+    }
+  }
 );
-var makePropertyRemovers = (data, set) => mapObject(
-  data,
-  (_, key) => () => set(() => {
+var makePropertyRemovers = (data, set) => mapObject(data, (_, key) => () => {
+  set(() => {
     const _a2 = data, rest = __objRest(_a2, [__restKey(key)]);
     return rest;
-  })
-);
+  });
+});
 var makePropertyRecasters = (data, set) => mapObject(
   data,
-  (value, key) => (newType) => set(() => __spreadProps(__spreadValues({}, data), {
-    [key]: castToJson(value).to[newType]()
-  }))
+  (value, key) => (newType) => {
+    set(() => __spreadProps(__spreadValues({}, data), {
+      [key]: castToJson(value).to[newType]()
+    }));
+  }
 );
-var makePropertyCreationInterface = (data, set) => (key, type) => (value) => set(__spreadProps(__spreadValues({}, data), { [key]: value != null ? value : JSON_DEFAULTS[type] }));
+var makePropertyCreationInterface = (data, set) => (key, type) => (value) => {
+  set(__spreadProps(__spreadValues({}, data), { [key]: value != null ? value : JSON_DEFAULTS[type] }));
+};
 var makePropertySorter = (data, set, sortFn) => () => {
   const sortedKeys = Object.keys(data).sort(sortFn);
   const sortedObj = {};
@@ -1662,7 +1327,16 @@ var PropertyAdder = ({
   /* @__PURE__ */ jsxRuntime.jsx(ElasticInput, { disabled: true, defaultValue: propertyKey }),
   ` `,
   /* @__PURE__ */ jsxRuntime.jsx(ElasticInput, { disabled: true, defaultValue: "is missing" }),
-  /* @__PURE__ */ jsxRuntime.jsx(Components.Button, { onClick: () => addProperty(), disabled, children: "+" })
+  /* @__PURE__ */ jsxRuntime.jsx(
+    Components.Button,
+    {
+      onClick: () => {
+        addProperty();
+      },
+      disabled,
+      children: "+"
+    }
+  )
 ] });
 var ObjectEditor = ({
   schema,
@@ -1675,7 +1349,7 @@ var ObjectEditor = ({
 }) => {
   var _a2;
   const disabled = isReadonly(path);
-  const stableKeyMap = React.useRef(
+  const stableKeyMap = react.useRef(
     Object.keys(data).reduce(
       (acc, key) => {
         acc[key] = key;
@@ -1702,7 +1376,16 @@ var ObjectEditor = ({
   );
   const missingKeys = schemaKeys === true ? [] : schemaKeys.filter((key) => !dataKeys.includes(key));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Components.Button, { onClick: () => sortProperties(), disabled, children: "Sort" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Components.Button,
+      {
+        onClick: () => {
+          sortProperties();
+        },
+        disabled,
+        children: "Sort"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(Components.ObjectWrapper, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor_properties", children: [...missingKeys, ...officialKeys, ...unofficialKeys].map((key) => {
         const originalKey = stableKeyMap.current[key];
@@ -1741,7 +1424,9 @@ var ObjectEditor = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         Components.Button,
         {
-          onClick: disabled ? doNothing : () => makePropertyAdder(`new_property`, `string`)(),
+          onClick: disabled ? doNothing : () => {
+            makePropertyAdder(`new_property`, `string`)();
+          },
           disabled,
           children: "+"
         }
@@ -1758,7 +1443,9 @@ var BooleanEditor = ({
   {
     type: "checkbox",
     checked: data,
-    onChange: (event) => set(event.target.checked)
+    onChange: (event) => {
+      set(event.target.checked);
+    }
   }
 ) });
 var NullEditor = ({
@@ -1774,7 +1461,9 @@ var NumberEditor = ({
   NumberInput,
   {
     value: data,
-    set: isReadonly(path) ? void 0 : (newValue) => set(Number(newValue)),
+    set: isReadonly(path) ? void 0 : (newValue) => {
+      set(Number(newValue));
+    },
     autoSize: true
   }
 ) });
@@ -1841,7 +1530,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
     }
   );
 };
-var ErrorBoundary = class extends React.Component {
+var ErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -1948,419 +1637,19 @@ var SubEditors = {
   object: ObjectEditor,
   string: StringEditor
 };
-
-// ../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;
-      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/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/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);
-isModifier(isLuumSpec)(defaultSpec);
-var WAYFORGE_CORE_COLOR_NAMES = [
-  `Red`,
-  `Orange`,
-  `Yellow`,
-  `Lime`,
-  `Green`,
-  `Teal`,
-  `Cyan`,
-  `Blue`,
-  `Indigo`,
-  `Violet`,
-  `Magenta`,
-  `Pink`
-];
-WAYFORGE_CORE_COLOR_NAMES.reduce(
-  (acc, name, idx) => {
-    acc[name] = {
-      hue: idx * 30,
-      sat: 255,
-      lum: 0.5,
-      prefer: `sat`
-    };
-    return acc;
-  },
-  {}
-);
-var Id = ({ id }) => {
-  const [isOpen, setIsOpen] = React__namespace.useState(false);
-  const { refs, floatingStyles, context } = react$1.useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    placement: `bottom-start`
-  });
-  const click = react$1.useClick(context);
-  const { getReferenceProps, getFloatingProps } = react$1.useInteractions([click]);
-  const bgColor = stringToColor(id);
-  const contrastColor = pipe(bgColor, hexToSpec_default, contrastMax, specToHex_default);
-  const offsetColor = pipe(bgColor, hexToSpec_default, offset(0.25), specToHex_default);
-  const contrastOffsetColor = pipe(
-    offsetColor,
-    hexToSpec_default,
-    contrastMax,
-    specToHex_default
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      __spreadProps(__spreadValues({
-        ref: refs.setReference
-      }, getReferenceProps()), {
-        style: {
-          background: bgColor,
-          cursor: `pointer`,
-          padding: `0px 4px`,
-          color: contrastColor,
-          userSelect: `none`,
-          whiteSpace: `nowrap`
-        },
-        children: id.substring(0, 3)
-      })
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      __spreadProps(__spreadValues({
-        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
-      })
-    ) })
-  ] });
-};
-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__ */ jsxRuntime.jsx("article", { className: "relation-editor-0123456789", children: data.map(([head, tail]) => /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Id, { id: head }) }),
-    ":",
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: tail.map((child) => /* @__PURE__ */ jsxRuntime.jsx(Id, { id: child })) })
-  ] })) });
-};
 var StateEditor = ({ token }) => {
-  const set = react.useI(token);
-  const data = react.useO(token);
-  return isJson(data) ? /* @__PURE__ */ jsxRuntime.jsx(JsonEditor, { data, set, schema: true }) : data instanceof Join ? /* @__PURE__ */ jsxRuntime.jsx(RelationEditor, { data, set }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const set = react$1.useI(token);
+  const data = react$1.useO(token);
+  return isJson(data) ? /* @__PURE__ */ jsxRuntime.jsx(JsonEditor, { data, set, schema: true }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor", children: /* @__PURE__ */ jsxRuntime.jsx(
     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), `?`),
+      value: data !== null && typeof data === `object` && `toJson` in data && typeof data.toJson === `function` ? JSON.stringify(data.toJson()) : data instanceof Set ? `Set { ${JSON.stringify([...data]).slice(1, -1)} }` : Object.getPrototypeOf(data).constructor.name + ` ` + fallback(() => JSON.stringify(data), `?`),
       disabled: true
     }
   ) });
 };
 var ReadonlySelectorViewer = ({ token }) => {
-  const data = react.useO(token);
+  const data = react$1.useO(token);
   return isJson(data) ? /* @__PURE__ */ jsxRuntime.jsx(
     JsonEditor,
     {
@@ -2372,7 +1661,7 @@ var ReadonlySelectorViewer = ({ token }) => {
   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor", children: /* @__PURE__ */ jsxRuntime.jsx(
     ElasticInput,
     {
-      value: data instanceof Set ? `Set ` + JSON.stringify([...data]) : data instanceof Map ? `Map ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
+      value: data instanceof Set ? `Set ` + JSON.stringify([...data]) : Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
       disabled: true
     }
   ) });
@@ -2401,10 +1690,10 @@ var findStateTypeState = atom_io.selectorFamily({
 });
 var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
   var _a2, _b;
-  const setIsOpen = react.useI(isOpenState);
-  const isOpen = react.useO(isOpenState);
-  const state = react.useO(node);
-  const stateType = react.useO(typeState);
+  const setIsOpen = react$1.useI(isOpenState);
+  const isOpen = react$1.useO(isOpenState);
+  const state = react$1.useO(node);
+  const stateType = react$1.useO(typeState);
   const isPrimitive = Boolean(primitiveRefinery.refine(state));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
@@ -2412,6 +1701,7 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
         button.OpenClose,
         {
           isOpen: isOpen && !isPrimitive,
+          testid: `open-close-state-${node.key}`,
           setIsOpen,
           disabled: isPrimitive
         }
@@ -2419,8 +1709,12 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
       /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {
-          onClick: () => console.log(node, atom_io.getState(node)),
-          onKeyUp: () => console.log(node, atom_io.getState(node)),
+          onClick: () => {
+            console.log(node, atom_io.getState(node));
+          },
+          onKeyUp: () => {
+            console.log(node, atom_io.getState(node));
+          },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { children: (_b = (_a2 = node.family) == null ? void 0 : _a2.subKey) != null ? _b : node.key }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "type detail", children: [
@@ -2431,21 +1725,28 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
           ]
         }
       ),
-      isPrimitive ? /* @__PURE__ */ jsxRuntime.jsx(StoreEditor, { token: node }) : null
+      /* @__PURE__ */ jsxRuntime.jsx(StoreEditor, { token: node })
     ] }),
     isOpen && !isPrimitive ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: /* @__PURE__ */ jsxRuntime.jsx(StoreEditor, { token: node }) }) : null
   ] });
 };
 var StateIndexTreeNode = ({ node, isOpenState }) => {
-  const setIsOpen = react.useI(isOpenState);
-  const isOpen = react.useO(isOpenState);
+  const setIsOpen = react$1.useI(isOpenState);
+  const isOpen = react$1.useO(isOpenState);
   for (const [key, childNode] of recordToEntries(node.familyMembers)) {
-    findViewIsOpenState(key);
-    findStateTypeState(childNode);
+    atom_io.findState(findViewIsOpenState, key);
+    atom_io.findState(findStateTypeState, childNode);
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(button.OpenClose, { isOpen, setIsOpen }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.OpenClose,
+        {
+          isOpen,
+          testid: `open-close-state-family-${node.key}`,
+          setIsOpen
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { children: node.key }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "type detail", children: " (family)" })
@@ -2455,18 +1756,15 @@ var StateIndexTreeNode = ({ node, isOpenState }) => {
       StateIndexNode,
       {
         node: childNode,
-        isOpenState: findViewIsOpenState(childNode.key),
-        typeState: findStateTypeState(childNode)
+        isOpenState: atom_io.findState(findViewIsOpenState, childNode.key),
+        typeState: atom_io.findState(findStateTypeState, childNode)
       },
       key
     )) : null
   ] });
 };
 var StateIndexNode = ({ node, isOpenState, typeState }) => {
-  if (node.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "node state", children: `type` in node ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "node state", "data-testid": `state-${node.key}`, children: `type` in node ? /* @__PURE__ */ jsxRuntime.jsx(
     StateIndexLeafNode,
     {
       node,
@@ -2476,14 +1774,14 @@ var StateIndexNode = ({ node, isOpenState, typeState }) => {
   ) : /* @__PURE__ */ jsxRuntime.jsx(StateIndexTreeNode, { node, isOpenState }) });
 };
 var StateIndex = ({ tokenIndex }) => {
-  const tokenIds = react.useO(tokenIndex);
-  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "index state_index", children: Object.entries(tokenIds).filter(([key]) => !key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).sort().map(([key, node]) => {
+  const tokenIds = react$1.useO(tokenIndex);
+  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "index state_index", "data-testid": "state-index", children: Object.entries(tokenIds).filter(([key]) => !key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).sort().map(([key, node]) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       StateIndexNode,
       {
         node,
-        isOpenState: findViewIsOpenState(node.key),
-        typeState: findStateTypeState(node)
+        isOpenState: atom_io.findState(findViewIsOpenState, node.key),
+        typeState: atom_io.findState(findStateTypeState, node)
       },
       key
     );
@@ -2494,8 +1792,12 @@ var AtomUpdateFC = ({ atomUpdate }) => {
     "article",
     {
       className: "node atom_update",
-      onClick: () => console.log(atomUpdate),
-      onKeyUp: () => console.log(atomUpdate),
+      onClick: () => {
+        console.log(atomUpdate);
+      },
+      onKeyUp: () => {
+        console.log(atomUpdate);
+      },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail", children: [
           atomUpdate.key,
@@ -2508,104 +1810,122 @@ var AtomUpdateFC = ({ atomUpdate }) => {
   );
 };
 var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "node transaction_update", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx("h4", { children: serialNumber }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("main", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "transaction_params", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: "params: " }),
-        transactionUpdate.params.map((param, index) => {
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "article",
-            {
-              className: "node transaction_param",
-              onClick: () => console.log(transactionUpdate),
-              onKeyUp: () => console.log(transactionUpdate),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail", children: [
-                  discoverType(param),
-                  ": "
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary", children: typeof param === `object` && param !== null && `type` in param && `target` in param ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: JSON.stringify(param.type) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: JSON.stringify(param) }) })
-              ]
-            },
-            `param` + index
-          );
-        })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "node transaction_output", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: "output: " }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: discoverType(transactionUpdate.output) }),
-        transactionUpdate.output ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "summary", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: "node transaction_update",
+      "data-testid": `transaction-update-${transactionUpdate.key}-${serialNumber}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx("h4", { children: serialNumber }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("main", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "transaction_params", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: "params: " }),
+            transactionUpdate.params.map((param, index) => {
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "article",
+                {
+                  className: "node transaction_param",
+                  onClick: () => {
+                    console.log(transactionUpdate);
+                  },
+                  onKeyUp: () => {
+                    console.log(transactionUpdate);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail", children: [
+                      discoverType(param),
+                      ": "
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary", children: typeof param === `object` && param !== null && `type` in param && `target` in param ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: JSON.stringify(param.type) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: JSON.stringify(param) }) })
+                  ]
+                },
+                `param` + index
+              );
+            })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "node transaction_output", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: "output: " }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: discoverType(transactionUpdate.output) }),
+            transactionUpdate.output ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "summary", children: [
+              ": ",
+              JSON.stringify(transactionUpdate.output)
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "transaction_impact", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: "impact: " }),
+            transactionUpdate.updates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
+              return `newValue` in update ? /* @__PURE__ */ jsxRuntime.jsx(
+                article.AtomUpdate,
+                {
+                  serialNumber: index,
+                  atomUpdate: update
+                },
+                `${transactionUpdate.key}:${index}:${update.key}`
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                TransactionUpdateFC,
+                {
+                  serialNumber: index,
+                  transactionUpdate: update
+                },
+                `${transactionUpdate.key}:${index}:${update.key}`
+              );
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var TimelineUpdateFC = ({ timelineUpdate, serialNumber }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: "node timeline_update",
+      "data-testid": `timeline-update-${timelineUpdate.key}-${serialNumber}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsxs("h4", { children: [
+          timelineUpdate.timestamp,
           ": ",
-          JSON.stringify(transactionUpdate.output)
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "transaction_impact", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: "impact: " }),
-        transactionUpdate.updates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
+          timelineUpdate.type,
+          " (",
+          timelineUpdate.key,
+          ")"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.updates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
           return `newValue` in update ? /* @__PURE__ */ jsxRuntime.jsx(
             article.AtomUpdate,
             {
               serialNumber: index,
               atomUpdate: update
             },
-            `${transactionUpdate.key}:${index}:${update.key}`
+            `${timelineUpdate.key}:${index}:${update.key}`
           ) : /* @__PURE__ */ jsxRuntime.jsx(
             TransactionUpdateFC,
             {
               serialNumber: index,
               transactionUpdate: update
             },
-            `${transactionUpdate.key}:${index}:${update.key}`
+            `${timelineUpdate.key}:${index}:${update.key}`
           );
-        })
-      ] })
-    ] })
-  ] });
-};
-var TimelineUpdateFC = ({ timelineUpdate }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "node timeline_update", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsxs("h4", { children: [
-      timelineUpdate.timestamp,
-      ": ",
-      timelineUpdate.type,
-      " (",
-      timelineUpdate.key,
-      ")"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.updates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
-      return `newValue` in update ? /* @__PURE__ */ jsxRuntime.jsx(
-        article.AtomUpdate,
-        {
-          serialNumber: index,
-          atomUpdate: update
-        },
-        `${timelineUpdate.key}:${index}:${update.key}`
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        TransactionUpdateFC,
-        {
-          serialNumber: index,
-          transactionUpdate: update
-        },
-        `${timelineUpdate.key}:${index}:${update.key}`
-      );
-    }) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        article.AtomUpdate,
-        {
-          serialNumber: index,
-          atomUpdate
-        },
-        `${timelineUpdate.key}:${index}:${atomUpdate.key}`
-      );
-    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsxRuntime.jsx(
-      article.AtomUpdate,
-      {
-        serialNumber: timelineUpdate.timestamp,
-        atomUpdate: timelineUpdate
-      }
-    ) : null })
-  ] });
+        }) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            article.AtomUpdate,
+            {
+              serialNumber: index,
+              atomUpdate
+            },
+            `${timelineUpdate.key}:${index}:${atomUpdate.key}`
+          );
+        }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsxRuntime.jsx(
+          article.AtomUpdate,
+          {
+            serialNumber: timelineUpdate.timestamp,
+            atomUpdate: timelineUpdate
+          }
+        ) : null })
+      ]
+    }
+  );
 };
 var article = {
   AtomUpdate: AtomUpdateFC,
@@ -2616,12 +1936,19 @@ var YouAreHere = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "you_are_here", children: "you are here" });
 };
 var TimelineLog = ({ token, isOpenState, timelineState }) => {
-  const timeline = react.useO(timelineState);
-  const isOpen = react.useO(isOpenState);
-  const setIsOpen = react.useI(isOpenState);
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "node timeline_log", children: [
+  const timeline = react$1.useO(timelineState);
+  const isOpen = react$1.useO(isOpenState);
+  const setIsOpen = react$1.useI(isOpenState);
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "node timeline_log", "data-testid": `timeline-${token.key}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(button.OpenClose, { isOpen, setIsOpen }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.OpenClose,
+        {
+          isOpen,
+          testid: `open-close-timeline-${token.key}`,
+          setIsOpen
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { children: token.key }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail length", children: [
@@ -2637,7 +1964,9 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
             "button",
             {
               type: "button",
-              onClick: () => atom_io.undo(token),
+              onClick: () => {
+                atom_io.undo(token);
+              },
               disabled: timeline.at === 0,
               children: "undo"
             }
@@ -2646,7 +1975,9 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
             "button",
             {
               type: "button",
-              onClick: () => atom_io.redo(token),
+              onClick: () => {
+                atom_io.redo(token);
+              },
               disabled: timeline.at === timeline.history.length,
               children: "redo"
             }
@@ -2654,16 +1985,22 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
         ] })
       ] })
     ] }),
-    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: timeline.history.map((update, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: timeline.history.map((update, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       index === timeline.at ? /* @__PURE__ */ jsxRuntime.jsx(YouAreHere, {}) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(article.TimelineUpdate, { timelineUpdate: update }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        article.TimelineUpdate,
+        {
+          timelineUpdate: update,
+          serialNumber: index
+        }
+      ),
       index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ jsxRuntime.jsx(YouAreHere, {}) : null
     ] }, update.key + index + timeline.at)) }) : null
   ] });
 };
 var TimelineIndex = () => {
-  const tokenIds = react.useO(timelineIndex);
-  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "index timeline_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+  const tokenIds = react$1.useO(timelineIndex);
+  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "index timeline_index", "data-testid": "timeline-index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       TimelineLog,
       {
@@ -2676,34 +2013,48 @@ var TimelineIndex = () => {
   }) });
 };
 var TransactionLog = ({ token, isOpenState, logState }) => {
-  const log = react.useO(logState);
-  const isOpen = react.useO(isOpenState);
-  const setIsOpen = react.useI(isOpenState);
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "node transaction_log", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(button.OpenClose, { isOpen, setIsOpen }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { children: token.key }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail length", children: [
-          "(",
-          log.length,
-          ")"
-        ] })
-      ] })
-    ] }),
-    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      article.TransactionUpdate,
-      {
-        serialNumber: index,
-        transactionUpdate: update
-      },
-      update.key + index
-    )) }) : null
-  ] });
+  const log = react$1.useO(logState);
+  const isOpen = react$1.useO(isOpenState);
+  const setIsOpen = react$1.useI(isOpenState);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: "node transaction_log",
+      "data-testid": `transaction-${token.key}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.OpenClose,
+            {
+              isOpen,
+              testid: `open-close-transaction-${token.key}`,
+              setIsOpen
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { children: token.key }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail length", children: [
+              "(",
+              log.length,
+              ")"
+            ] })
+          ] })
+        ] }),
+        isOpen ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          article.TransactionUpdate,
+          {
+            serialNumber: index,
+            transactionUpdate: update
+          },
+          update.key + index
+        )) }) : null
+      ]
+    }
+  );
 };
 var TransactionIndex = () => {
-  const tokenIds = react.useO(transactionIndex);
-  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "index transaction_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+  const tokenIds = react$1.useO(transactionIndex);
+  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "index transaction_index", "data-testid": "transaction-index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       TransactionLog,
       {
@@ -2716,13 +2067,13 @@ var TransactionIndex = () => {
   }) });
 };
 var AtomIODevtools = () => {
-  const constraintsRef = React.useRef(null);
-  const setDevtoolsAreOpen = react.useI(devtoolsAreOpenState);
-  const devtoolsAreOpen = react.useO(devtoolsAreOpenState);
-  const setDevtoolsView = react.useI(devtoolsViewSelectionState);
-  const devtoolsView = react.useO(devtoolsViewSelectionState);
-  const devtoolsViewOptions = react.useO(devtoolsViewOptionsState);
-  const mouseHasMoved = React.useRef(false);
+  const constraintsRef = react.useRef(null);
+  const setDevtoolsAreOpen = react$1.useI(devtoolsAreOpenState);
+  const devtoolsAreOpen = react$1.useO(devtoolsAreOpenState);
+  const setDevtoolsView = react$1.useI(devtoolsViewSelectionState);
+  const devtoolsView = react$1.useO(devtoolsViewSelectionState);
+  const devtoolsViewOptions = react$1.useO(devtoolsViewOptionsState);
+  const mouseHasMoved = react.useRef(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.span,
@@ -2760,8 +2111,11 @@ var AtomIODevtools = () => {
                 "button",
                 {
                   type: "button",
+                  "data-testid": `view-${viewOption}`,
                   className: viewOption === devtoolsView ? `active` : ``,
-                  onClick: () => setDevtoolsView(viewOption),
+                  onClick: () => {
+                    setDevtoolsView(viewOption);
+                  },
                   disabled: viewOption === devtoolsView,
                   children: viewOption
                 },