atom.io 0.11.0 → 0.12.1

package/react-devtools/dist/index.js

@@ -1,32 +1,11 @@
-'use strict';
-
-var atom_io = require('atom.io');
-var introspection = require('atom.io/introspection');
-var react = require('atom.io/react');
-var framerMotion = require('framer-motion');
-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);
+import { selectorFamily, atom, atomFamily, undo, redo, getState } from 'atom.io';
+import { attachIntrospectionStates } from 'atom.io/introspection';
+import { useI, useO } from 'atom.io/react';
+import { motion, spring, LayoutGroup } from 'framer-motion';
+import * as React from 'react';
+import { forwardRef, useRef, useState, useImperativeHandle, useLayoutEffect, Fragment as Fragment$1, Component, useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useFloating, useClick, useInteractions, FloatingPortal } from '@floating-ui/react';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -469,7 +448,7 @@ var isJson = (input) => {
   return isJson2;
 };
 var OpenClose = ({ isOpen, setIsOpen, disabled }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -836,19 +815,22 @@ var Join = class _Join {
     );
   }
 };
-var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
+var ElasticInput = 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(ref, () => ({
-    focus: () => {
-      var _a3;
-      (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
-    }
-  }));
+  const inputRef = useRef(null);
+  const spanRef = useRef(null);
+  const [inputWidth, setInputWidth] = useState(`auto`);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => {
+        var _a3;
+        (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
+      }
+    })
+  );
   const extraWidth = props.type === `number` ? 15 : 0;
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (spanRef.current) {
       setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
       const interval = setInterval(() => {
@@ -859,8 +841,8 @@ var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
       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: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs("div", { style: { display: `inline-block`, position: `relative` }, children: [
+    /* @__PURE__ */ jsx(
       "input",
       __spreadProps(__spreadValues({}, props), {
         ref: inputRef,
@@ -874,7 +856,7 @@ var ElasticInput = React.forwardRef(function ElasticInputFC(props, ref) {
         }, props.style)
       })
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(
       "span",
       {
         ref: spanRef,
@@ -958,9 +940,9 @@ var NumberInput = ({
   testId,
   value = null
 }) => {
-  const id = React.useId();
-  const [temporaryEntry, setTemporaryEntry] = React.useState(null);
-  const userHasMadeDeliberateChange = React.useRef(false);
+  const id = useId();
+  const [temporaryEntry, setTemporaryEntry] = useState(null);
+  const userHasMadeDeliberateChange = useRef(false);
   const refine = initRefinery({ max, min, decimalPlaces, nullable: true });
   const allowDecimal = decimalPlaces === void 0 || decimalPlaces > 0;
   const handleBlur = () => {
@@ -993,9 +975,9 @@ var NumberInput = ({
     }
   };
   const displayValue = temporaryEntry != null ? temporaryEntry : valueToText(value ? refine(value) : value);
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { css: customCss, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, children: label }),
-    autoSize ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs("span", { css: customCss, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
+    autoSize ? /* @__PURE__ */ jsx(
       ElasticInput,
       {
         type: "text",
@@ -1009,7 +991,7 @@ var NumberInput = ({
         onClick,
         "data-testid": `number-input-${testId != null ? testId : id}`
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ) : /* @__PURE__ */ jsx(
       "input",
       {
         type: "text",
@@ -1034,9 +1016,9 @@ var TextInput = ({
   customCss,
   autoSize = false
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { css: customCss, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { children: label }),
-    autoSize ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs("span", { css: customCss, children: [
+    /* @__PURE__ */ jsx("label", { children: label }),
+    autoSize ? /* @__PURE__ */ jsx(
       ElasticInput,
       {
         type: "text",
@@ -1045,7 +1027,7 @@ var TextInput = ({
         disabled: set === void 0,
         placeholder
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ) : /* @__PURE__ */ jsx(
       "input",
       {
         type: "text",
@@ -1058,7 +1040,7 @@ var TextInput = ({
   ] });
 };
 var NonJsonEditor = ({ data }) => {
-  return data === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ElasticInput, { disabled: true, value: "undefined" }) : /* @__PURE__ */ jsxRuntime.jsx(
+  return data === void 0 ? /* @__PURE__ */ jsx(ElasticInput, { disabled: true, value: "undefined" }) : /* @__PURE__ */ jsx(
     ElasticInput,
     {
       disabled: true,
@@ -1086,17 +1068,17 @@ var JsonEditor_INTERNAL = ({
   const refined = dataIsJson ? refineJsonType(data) : { type: `non-json`, data };
   const SubEditor = dataIsJson ? SubEditors[refined.type] : NonJsonEditor;
   const disabled = isReadonly(path);
-  return isHidden(path) ? null : /* @__PURE__ */ jsxRuntime.jsx(Components.ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(Components.EditorWrapper, { className, customCss, children: [
-    remove && /* @__PURE__ */ jsxRuntime.jsx(
+  return isHidden(path) ? null : /* @__PURE__ */ jsx(Components.ErrorBoundary, { children: /* @__PURE__ */ jsxs(Components.EditorWrapper, { className, customCss, children: [
+    remove && /* @__PURE__ */ jsx(
       Components.Button,
       {
         onClick: disabled ? doNothing : remove,
         disabled,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Components.DeleteIcon, {})
+        children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
       }
     ),
-    HeaderDisplay && /* @__PURE__ */ jsxRuntime.jsx(HeaderDisplay, { data, schema }),
-    rename && /* @__PURE__ */ jsxRuntime.jsx(Components.KeyWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    HeaderDisplay && /* @__PURE__ */ jsx(HeaderDisplay, { data, schema }),
+    rename && /* @__PURE__ */ jsx(Components.KeyWrapper, { children: /* @__PURE__ */ jsx(
       ElasticInput,
       {
         value: name,
@@ -1104,7 +1086,7 @@ var JsonEditor_INTERNAL = ({
         disabled
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(
       SubEditor,
       {
         data: refined.data,
@@ -1118,13 +1100,13 @@ var JsonEditor_INTERNAL = ({
         Components
       }
     ),
-    recast && dataIsJson ? /* @__PURE__ */ jsxRuntime.jsx(
+    recast && dataIsJson ? /* @__PURE__ */ jsx(
       "select",
       {
         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))
+        children: Object.keys(SubEditors).map((type) => /* @__PURE__ */ jsx("option", { value: type, children: type }, type))
       }
     ) : null
   ] }) });
@@ -1147,9 +1129,9 @@ var ArrayEditor = ({
   Components
 }) => {
   const setElement = makeElementSetters(data, set);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.map((element, index) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: data.map((element, index) => {
     const newPath = [...path, index];
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       JsonEditor_INTERNAL,
       {
         path: newPath,
@@ -1509,10 +1491,13 @@ var numberToArray = (num) => Array(num).fill(null);
 var arrayToString = (arr) => arr.join(`,`);
 var arrayToNumber = (arr) => arr.length;
 var arrayToBoolean = (arr) => typeof arr[0] === `boolean` ? arr[0] : arr.length > 0;
-var arrayToObject = (arr) => arr.reduce((acc, cur, idx) => {
-  acc[`${idx}`] = cur;
-  return acc;
-}, {});
+var arrayToObject = (arr) => arr.reduce(
+  (acc, cur, idx) => {
+    acc[`${idx}`] = cur;
+    return acc;
+  },
+  {}
+);
 var nullToString = () => ``;
 var nullToNumber = () => 0;
 var nullToBoolean = () => false;
@@ -1654,11 +1639,11 @@ var PropertyAdder = ({
   disabled,
   propertyKey,
   Components
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Components.MissingPropertyWrapper, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(ElasticInput, { disabled: true, defaultValue: propertyKey }),
+}) => /* @__PURE__ */ jsxs(Components.MissingPropertyWrapper, { children: [
+  /* @__PURE__ */ 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__ */ jsx(ElasticInput, { disabled: true, defaultValue: "is missing" }),
+  /* @__PURE__ */ jsx(Components.Button, { onClick: () => addProperty(), disabled, children: "+" })
 ] });
 var ObjectEditor = ({
   schema,
@@ -1671,11 +1656,14 @@ var ObjectEditor = ({
 }) => {
   var _a2;
   const disabled = isReadonly(path);
-  const stableKeyMap = React.useRef(
-    Object.keys(data).reduce((acc, key) => {
-      acc[key] = key;
-      return acc;
-    }, {})
+  const stableKeyMap = useRef(
+    Object.keys(data).reduce(
+      (acc, key) => {
+        acc[key] = key;
+        return acc;
+      },
+      {}
+    )
   );
   const setProperty = makePropertySetters(data, set);
   const renameProperty = makePropertyRenamers(data, set, stableKeyMap);
@@ -1694,16 +1682,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.jsxs(Components.ObjectWrapper, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor_properties", children: [...missingKeys, ...officialKeys, ...unofficialKeys].map((key) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Components.Button, { onClick: () => sortProperties(), disabled, children: "Sort" }),
+    /* @__PURE__ */ jsxs(Components.ObjectWrapper, { children: [
+      /* @__PURE__ */ jsx("div", { className: "json_editor_properties", children: [...missingKeys, ...officialKeys, ...unofficialKeys].map((key) => {
         const originalKey = stableKeyMap.current[key];
         const newPath = [...path, key];
         const originalPath = [...path, originalKey];
         const isOfficial = schemaKeys === true || schemaKeys.includes(key);
         const isMissing = missingKeys.includes(key);
-        return isMissing ? /* @__PURE__ */ jsxRuntime.jsx(
+        return isMissing ? /* @__PURE__ */ jsx(
           PropertyAdder,
           {
             propertyKey: key,
@@ -1712,7 +1700,7 @@ var ObjectEditor = ({
             Components
           },
           key + `IsMissing`
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
+        ) : /* @__PURE__ */ jsx(
           JsonEditor_INTERNAL,
           {
             schema,
@@ -1731,7 +1719,7 @@ var ObjectEditor = ({
           originalPath.join(`.`)
         );
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         Components.Button,
         {
           onClick: disabled ? doNothing : () => makePropertyAdder(`new_property`, `string`)(),
@@ -1746,7 +1734,7 @@ var BooleanEditor = ({
   data,
   set,
   Components
-}) => /* @__PURE__ */ jsxRuntime.jsx(Components.BooleanWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+}) => /* @__PURE__ */ jsx(Components.BooleanWrapper, { children: /* @__PURE__ */ jsx(
   "input",
   {
     type: "checkbox",
@@ -1756,14 +1744,14 @@ var BooleanEditor = ({
 ) });
 var NullEditor = ({
   Components
-}) => /* @__PURE__ */ jsxRuntime.jsx(Components.NullWrapper, { children: '" "' });
+}) => /* @__PURE__ */ jsx(Components.NullWrapper, { children: '" "' });
 var NumberEditor = ({
   path = [],
   isReadonly = () => false,
   data,
   set,
   Components
-}) => /* @__PURE__ */ jsxRuntime.jsx(Components.NumberWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+}) => /* @__PURE__ */ jsx(Components.NumberWrapper, { children: /* @__PURE__ */ jsx(
   NumberInput,
   {
     value: data,
@@ -1778,7 +1766,7 @@ var StringEditor = ({
   set,
   Components
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Components.StringWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(Components.StringWrapper, { children: /* @__PURE__ */ jsx(
     TextInput,
     {
       value: data,
@@ -1791,7 +1779,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
   var _a2, _b, _c;
   const component = (_a2 = errorInfo == null ? void 0 : errorInfo.componentStack) == null ? void 0 : _a2.split(` `).filter(Boolean)[2];
   const message = (_c = (_b = error == null ? void 0 : error.toString()) != null ? _b : errorInfo == null ? void 0 : errorInfo.componentStack) != null ? _c : `Unknown error`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-testid": "error-boundary",
@@ -1803,7 +1791,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
         // backgroundRepeat: `no-repeat`,
         backgroundSize: `overlay`
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
           style: {
@@ -1812,7 +1800,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
             padding: `50px`,
             border: `1px solid dashed`
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(
+          children: /* @__PURE__ */ jsxs(
             "span",
             {
               style: {
@@ -1823,7 +1811,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
               },
               children: [
                 `\u26A0\uFE0F `,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: `#fc0`, fontWeight: 700 }, children: component }),
+                /* @__PURE__ */ jsx("span", { style: { color: `#fc0`, fontWeight: 700 }, children: component }),
                 ` \u26A0\uFE0F `,
                 message
               ]
@@ -1834,7 +1822,7 @@ var DefaultFallback = ({ error, errorInfo }) => {
     }
   );
 };
-var ErrorBoundary = class extends React.Component {
+var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -1850,12 +1838,12 @@ var ErrorBoundary = class extends React.Component {
   render() {
     const { error, errorInfo } = this.state;
     const { children, Fallback = DefaultFallback } = this.props;
-    return errorInfo ? /* @__PURE__ */ jsxRuntime.jsx(Fallback, { error, errorInfo }) : children;
+    return errorInfo ? /* @__PURE__ */ jsx(Fallback, { error, errorInfo }) : children;
   }
 };
 var DEFAULT_JSON_EDITOR_COMPONENTS = {
-  ErrorBoundary: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children }),
-  Button: ({ onClick, children, disabled }) => /* @__PURE__ */ jsxRuntime.jsx(
+  ErrorBoundary: ({ children }) => /* @__PURE__ */ jsx(ErrorBoundary, { children }),
+  Button: ({ onClick, children, disabled }) => /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -1865,7 +1853,7 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
       children
     }
   ),
-  EditorWrapper: ({ children, customCss, className }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `json_editor ` + className, css: customCss, children }),
+  EditorWrapper: ({ children, customCss, className }) => /* @__PURE__ */ jsx("div", { className: `json_editor ` + className, css: customCss, children }),
   EditorLayout: ({
     DeleteButton,
     Header,
@@ -1874,27 +1862,27 @@ var DEFAULT_JSON_EDITOR_COMPONENTS = {
     ValueEditor,
     Wrapper
   }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
-      DeleteButton && /* @__PURE__ */ jsxRuntime.jsx(DeleteButton, {}),
-      Header && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
-      KeyInput && /* @__PURE__ */ jsxRuntime.jsx(KeyInput, {}),
-      TypeSelect && /* @__PURE__ */ jsxRuntime.jsx(TypeSelect, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(ValueEditor, {})
+    return /* @__PURE__ */ jsxs(Wrapper, { children: [
+      DeleteButton && /* @__PURE__ */ jsx(DeleteButton, {}),
+      Header && /* @__PURE__ */ jsx(Header, {}),
+      KeyInput && /* @__PURE__ */ jsx(KeyInput, {}),
+      TypeSelect && /* @__PURE__ */ jsx(TypeSelect, {}),
+      /* @__PURE__ */ jsx(ValueEditor, {})
     ] });
   },
-  ArrayWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor_array", children }),
-  ObjectWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor_object", children }),
-  StringWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_string", children }),
-  NumberWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_number", children }),
-  BooleanWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_boolean", children }),
-  NullWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_null", children }),
-  MissingPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor_property json_editor_missing", children }),
-  MiscastPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor_property json_editor_miscast", children }),
-  IllegalPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_property json_editor_illegal", children }),
-  OfficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_property json_editor_official", children }),
-  UnofficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_property json_editor_unofficial", children }),
-  DeleteIcon: () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_icon json_editor_delete", children: "x" }),
-  KeyWrapper: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json_editor_key", children })
+  ArrayWrapper: ({ children }) => /* @__PURE__ */ jsx("div", { className: "json_editor_array", children }),
+  ObjectWrapper: ({ children }) => /* @__PURE__ */ jsx("div", { className: "json_editor_object", children }),
+  StringWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_string", children }),
+  NumberWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_number", children }),
+  BooleanWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_boolean", children }),
+  NullWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_null", children }),
+  MissingPropertyWrapper: ({ children }) => /* @__PURE__ */ jsx("div", { className: "json_editor_property json_editor_missing", children }),
+  MiscastPropertyWrapper: ({ children }) => /* @__PURE__ */ jsx("div", { className: "json_editor_property json_editor_miscast", children }),
+  IllegalPropertyWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_property json_editor_illegal", children }),
+  OfficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_property json_editor_official", children }),
+  UnofficialPropertyWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_property json_editor_unofficial", children }),
+  DeleteIcon: () => /* @__PURE__ */ jsx("span", { className: "json_editor_icon json_editor_delete", children: "x" }),
+  KeyWrapper: ({ children }) => /* @__PURE__ */ jsx("span", { className: "json_editor_key", children })
 };
 var JsonEditor = ({
   data,
@@ -1912,7 +1900,7 @@ var JsonEditor = ({
   Components: CustomComponents = {}
 }) => {
   const Components = __spreadValues(__spreadValues({}, DEFAULT_JSON_EDITOR_COMPONENTS), CustomComponents);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     JsonEditor_INTERNAL,
     {
       data,
@@ -2261,24 +2249,27 @@ var WAYFORGE_CORE_COLOR_NAMES = [
   `Magenta`,
   `Pink`
 ];
-WAYFORGE_CORE_COLOR_NAMES.reduce((acc, name, idx) => {
-  acc[name] = {
-    hue: idx * 30,
-    sat: 255,
-    lum: 0.5,
-    prefer: `sat`
-  };
-  return acc;
-}, {});
+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({
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement: `bottom-start`
   });
-  const click = react$1.useClick(context);
-  const { getReferenceProps, getFloatingProps } = react$1.useInteractions([click]);
+  const click = useClick(context);
+  const { getReferenceProps, getFloatingProps } = 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);
@@ -2288,8 +2279,8 @@ var Id = ({ id }) => {
     contrastMax,
     specToHex_default
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "span",
       __spreadProps(__spreadValues({
         role: "content",
@@ -2306,7 +2297,7 @@ var Id = ({ id }) => {
         children: id.substring(0, 3)
       })
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
       "span",
       __spreadProps(__spreadValues({
         role: "popup",
@@ -2337,16 +2328,16 @@ var RelationEditor = (props) => {
     }
     return true;
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: RelationEditor_module_default.class, children: data.map(([head, tail]) => /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Id, { id: head }) }),
+  return /* @__PURE__ */ jsx("article", { className: RelationEditor_module_default.class, children: data.map(([head, tail]) => /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Id, { id: head }) }),
     ":",
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: tail.map((child) => /* @__PURE__ */ jsxRuntime.jsx(Id, { id: child })) })
+    /* @__PURE__ */ jsx("span", { children: tail.map((child) => /* @__PURE__ */ 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 = useI(token);
+  const data = useO(token);
+  return isJson(data) ? /* @__PURE__ */ jsx(JsonEditor, { data, set, schema: true }) : data instanceof Join ? /* @__PURE__ */ jsx(RelationEditor, { data, set }) : /* @__PURE__ */ jsx("div", { className: "json_editor", children: /* @__PURE__ */ 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), `?`),
@@ -2355,8 +2346,8 @@ var StateEditor = ({ token }) => {
   ) });
 };
 var ReadonlySelectorViewer = ({ token }) => {
-  const data = react.useO(token);
-  return isJson(data) ? /* @__PURE__ */ jsxRuntime.jsx(
+  const data = useO(token);
+  return isJson(data) ? /* @__PURE__ */ jsx(
     JsonEditor,
     {
       data,
@@ -2364,7 +2355,7 @@ var ReadonlySelectorViewer = ({ token }) => {
       schema: true,
       isReadonly: () => true
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "json_editor", children: /* @__PURE__ */ jsxRuntime.jsx(
+  ) : /* @__PURE__ */ jsx("div", { className: "json_editor", children: /* @__PURE__ */ 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),
@@ -2374,11 +2365,11 @@ var ReadonlySelectorViewer = ({ token }) => {
 };
 var StoreEditor = ({ token }) => {
   if (token.type === `readonly_selector`) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ReadonlySelectorViewer, { token });
+    return /* @__PURE__ */ jsx(ReadonlySelectorViewer, { token });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(StateEditor, { token });
+  return /* @__PURE__ */ jsx(StateEditor, { token });
 };
-var findStateTypeState = atom_io.selectorFamily({
+var findStateTypeState = selectorFamily({
   key: `\u{1F441}\u200D\u{1F5E8} State Type`,
   get: (token) => ({ get }) => {
     let state;
@@ -2396,14 +2387,14 @@ 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 = useI(isOpenState);
+  const isOpen = useO(isOpenState);
+  const state = useO(node);
+  const stateType = useO(typeState);
   const isPrimitive = Boolean(primitiveRefinery.refine(state));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(
         button.OpenClose,
         {
           isOpen: isOpen && !isPrimitive,
@@ -2411,14 +2402,14 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
           disabled: isPrimitive
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxs(
         "label",
         {
-          onClick: () => console.log(node, atom_io.getState(node)),
-          onKeyUp: () => console.log(node, atom_io.getState(node)),
+          onClick: () => console.log(node, getState(node)),
+          onKeyUp: () => console.log(node, 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: [
+            /* @__PURE__ */ jsx("h2", { children: (_b = (_a2 = node.family) == null ? void 0 : _a2.subKey) != null ? _b : node.key }),
+            /* @__PURE__ */ jsxs("span", { className: "type detail", children: [
               "(",
               stateType,
               ")"
@@ -2426,27 +2417,27 @@ var StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
           ]
         }
       ),
-      isPrimitive ? /* @__PURE__ */ jsxRuntime.jsx(StoreEditor, { token: node }) : null
+      isPrimitive ? /* @__PURE__ */ jsx(StoreEditor, { token: node }) : null
     ] }),
-    isOpen && !isPrimitive ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: /* @__PURE__ */ jsxRuntime.jsx(StoreEditor, { token: node }) }) : null
+    isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null
   ] });
 };
 var StateIndexTreeNode = ({ node, isOpenState }) => {
-  const setIsOpen = react.useI(isOpenState);
-  const isOpen = react.useO(isOpenState);
+  const setIsOpen = useI(isOpenState);
+  const isOpen = useO(isOpenState);
   for (const [key, childNode] of recordToEntries(node.familyMembers)) {
     findViewIsOpenState(key);
     findStateTypeState(childNode);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(button.OpenClose, { isOpen, setIsOpen }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { children: node.key }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "type detail", children: " (family)" })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(button.OpenClose, { isOpen, setIsOpen }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("h2", { children: node.key }),
+        /* @__PURE__ */ jsx("span", { className: "type detail", children: " (family)" })
       ] })
     ] }),
-    isOpen ? Object.entries(node.familyMembers).map(([key, childNode]) => /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen ? Object.entries(node.familyMembers).map(([key, childNode]) => /* @__PURE__ */ jsx(
       StateIndexNode,
       {
         node: childNode,
@@ -2461,19 +2452,19 @@ 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__ */ jsx("section", { className: "node state", children: `type` in node ? /* @__PURE__ */ jsx(
     StateIndexLeafNode,
     {
       node,
       isOpenState,
       typeState
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(StateIndexTreeNode, { node, isOpenState }) });
+  ) : /* @__PURE__ */ 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]) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  const tokenIds = useO(tokenIndex);
+  return /* @__PURE__ */ jsx("article", { className: "index state_index", children: Object.entries(tokenIds).filter(([key]) => !key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).sort().map(([key, node]) => {
+    return /* @__PURE__ */ jsx(
       StateIndexNode,
       {
         node,
@@ -2485,60 +2476,60 @@ var StateIndex = ({ tokenIndex }) => {
   }) });
 };
 var AtomUpdateFC = ({ atomUpdate }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     "article",
     {
       className: "node atom_update",
       onClick: () => console.log(atomUpdate),
       onKeyUp: () => console.log(atomUpdate),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail", children: [
+        /* @__PURE__ */ jsxs("span", { className: "detail", children: [
           atomUpdate.key,
           ": "
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary", children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary }) })
+        /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { className: "summary", children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary }) })
       ]
     },
     atomUpdate.key
   );
 };
 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: " }),
+  return /* @__PURE__ */ jsxs("article", { className: "node transaction_update", children: [
+    /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h4", { children: serialNumber }) }),
+    /* @__PURE__ */ jsxs("main", { children: [
+      /* @__PURE__ */ jsxs("section", { className: "transaction_params", children: [
+        /* @__PURE__ */ jsx("span", { className: "detail", children: "params: " }),
         transactionUpdate.params.map((param, index) => {
-          return /* @__PURE__ */ jsxRuntime.jsxs(
+          return /* @__PURE__ */ jsxs(
             "article",
             {
               className: "node transaction_param",
               onClick: () => console.log(transactionUpdate),
               onKeyUp: () => console.log(transactionUpdate),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "detail", children: [
+                /* @__PURE__ */ 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) }) })
+                /* @__PURE__ */ jsx("span", { className: "summary", children: typeof param === `object` && param !== null && `type` in param && `target` in param ? /* @__PURE__ */ jsx(Fragment, { children: JSON.stringify(param.type) }) : /* @__PURE__ */ jsx(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: [
+      /* @__PURE__ */ jsxs("section", { className: "node transaction_output", children: [
+        /* @__PURE__ */ jsx("span", { className: "detail", children: "output: " }),
+        /* @__PURE__ */ jsx("span", { className: "detail", children: discoverType(transactionUpdate.output) }),
+        transactionUpdate.output ? /* @__PURE__ */ 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: " }),
+      /* @__PURE__ */ jsxs("section", { className: "transaction_impact", children: [
+        /* @__PURE__ */ jsx("span", { className: "detail", children: "impact: " }),
         transactionUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ jsx(
             article.AtomUpdate,
             {
               serialNumber: index,
@@ -2552,8 +2543,8 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
   ] });
 };
 var TimelineUpdateFC = ({ timelineUpdate }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "node timeline_update", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsxs("h4", { children: [
+  return /* @__PURE__ */ jsxs("article", { className: "node timeline_update", children: [
+    /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("h4", { children: [
       timelineUpdate.timestamp,
       ": ",
       timelineUpdate.type,
@@ -2561,8 +2552,8 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
       timelineUpdate.key,
       ")"
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
+      return /* @__PURE__ */ jsx(
         article.AtomUpdate,
         {
           serialNumber: index,
@@ -2571,7 +2562,7 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
         `${timelineUpdate.key}:${index}:${atomUpdate.key}`
       );
     }) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsx(
         article.AtomUpdate,
         {
           serialNumber: index,
@@ -2579,7 +2570,7 @@ var TimelineUpdateFC = ({ timelineUpdate }) => {
         },
         `${timelineUpdate.key}:${index}:${atomUpdate.key}`
       );
-    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsxRuntime.jsx(
+    }) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsx(
       article.AtomUpdate,
       {
         serialNumber: timelineUpdate.timestamp,
@@ -2594,40 +2585,40 @@ var article = {
   TimelineUpdate: TimelineUpdateFC
 };
 var YouAreHere = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "you_are_here", children: "you are here" });
+  return /* @__PURE__ */ 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: [
-    /* @__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: [
+  const timeline = useO(timelineState);
+  const isOpen = useO(isOpenState);
+  const setIsOpen = useI(isOpenState);
+  return /* @__PURE__ */ jsxs("section", { className: "node timeline_log", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(button.OpenClose, { isOpen, setIsOpen }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("h2", { children: token.key }),
+        /* @__PURE__ */ jsxs("span", { className: "detail length", children: [
           "(",
           timeline.at,
           "/",
           timeline.history.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gap" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("nav", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx("span", { className: "gap" }),
+        /* @__PURE__ */ jsxs("nav", { children: [
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: () => atom_io.undo(token),
+              onClick: () => undo(token),
               disabled: timeline.at === 0,
               children: "undo"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: () => atom_io.redo(token),
+              onClick: () => redo(token),
               disabled: timeline.at === timeline.history.length,
               children: "redo"
             }
@@ -2635,17 +2626,17 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
         ] })
       ] })
     ] }),
-    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 }),
-      index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ jsxRuntime.jsx(YouAreHere, {}) : null
+    isOpen ? /* @__PURE__ */ jsx("main", { children: timeline.history.map((update, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      index === timeline.at ? /* @__PURE__ */ jsx(YouAreHere, {}) : null,
+      /* @__PURE__ */ jsx(article.TimelineUpdate, { timelineUpdate: update }),
+      index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ 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) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  const tokenIds = useO(timelineIndex);
+  return /* @__PURE__ */ jsx("article", { className: "index timeline_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ jsx(
       TimelineLog,
       {
         token,
@@ -2657,22 +2648,22 @@ 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: [
+  const log = useO(logState);
+  const isOpen = useO(isOpenState);
+  const setIsOpen = useI(isOpenState);
+  return /* @__PURE__ */ jsxs("section", { className: "node transaction_log", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(button.OpenClose, { isOpen, setIsOpen }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("h2", { children: token.key }),
+        /* @__PURE__ */ jsxs("span", { className: "detail length", children: [
           "(",
           log.length,
           ")"
         ] })
       ] })
     ] }),
-    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen ? /* @__PURE__ */ jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsx(
       article.TransactionUpdate,
       {
         serialNumber: index,
@@ -2683,9 +2674,9 @@ var TransactionLog = ({ token, isOpenState, logState }) => {
   ] });
 };
 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) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  const tokenIds = useO(transactionIndex);
+  return /* @__PURE__ */ jsx("article", { className: "index transaction_index", children: tokenIds.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((token) => {
+    return /* @__PURE__ */ jsx(
       TransactionLog,
       {
         token,
@@ -2697,16 +2688,16 @@ 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);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.span,
+  const constraintsRef = useRef(null);
+  const setDevtoolsAreOpen = useI(devtoolsAreOpenState);
+  const devtoolsAreOpen = useO(devtoolsAreOpenState);
+  const setDevtoolsView = useI(devtoolsViewSelectionState);
+  const devtoolsView = useO(devtoolsViewSelectionState);
+  const devtoolsViewOptions = useO(devtoolsViewOptionsState);
+  const mouseHasMoved = useRef(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.span,
       {
         ref: constraintsRef,
         className: "atom_io_devtools_zone",
@@ -2720,13 +2711,13 @@ var AtomIODevtools = () => {
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.motion.main,
+    /* @__PURE__ */ jsxs(
+      motion.main,
       {
         drag: true,
         dragConstraints: constraintsRef,
         className: "atom_io_devtools",
-        transition: framerMotion.spring,
+        transition: spring,
         style: devtoolsAreOpen ? {} : {
           backgroundColor: `#0000`,
           borderColor: `#0000`,
@@ -2734,10 +2725,10 @@ var AtomIODevtools = () => {
           maxWidth: 33
         },
         children: [
-          devtoolsAreOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.header, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "atom.io" }),
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsxRuntime.jsx(
+          devtoolsAreOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(motion.header, { children: [
+              /* @__PURE__ */ jsx("h1", { children: "atom.io" }),
+              /* @__PURE__ */ jsx("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -2749,9 +2740,9 @@ var AtomIODevtools = () => {
                 viewOption
               )) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.main, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsxRuntime.jsx(StateIndex, { tokenIndex: atomIndex }) : devtoolsView === `selectors` ? /* @__PURE__ */ jsxRuntime.jsx(StateIndex, { tokenIndex: selectorIndex }) : devtoolsView === `transactions` ? /* @__PURE__ */ jsxRuntime.jsx(TransactionIndex, {}) : devtoolsView === `timelines` ? /* @__PURE__ */ jsxRuntime.jsx(TimelineIndex, {}) : null }) })
+            /* @__PURE__ */ jsx(motion.main, { children: /* @__PURE__ */ jsx(LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: atomIndex }) : devtoolsView === `selectors` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: selectorIndex }) : devtoolsView === `transactions` ? /* @__PURE__ */ jsx(TransactionIndex, {}) : devtoolsView === `timelines` ? /* @__PURE__ */ jsx(TimelineIndex, {}) : null }) })
           ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("footer", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -2779,23 +2770,23 @@ var {
   findTransactionLogState,
   timelineIndex,
   findTimelineState
-} = introspection.attachIntrospectionStates();
-var devtoolsAreOpenState = atom_io.atom({
+} = attachIntrospectionStates();
+var devtoolsAreOpenState = atom({
   key: `\u{1F441}\u200D\u{1F5E8} Devtools Are Open`,
   default: true,
   effects: [lazyLocalStorageEffect(`\u{1F441}\u200D\u{1F5E8} Devtools Are Open`)]
 });
-var devtoolsViewSelectionState = atom_io.atom({
+var devtoolsViewSelectionState = atom({
   key: `\u{1F441}\u200D\u{1F5E8} Devtools View Selection`,
   default: `atoms`,
   effects: [lazyLocalStorageEffect(`\u{1F441}\u200D\u{1F5E8} Devtools View`)]
 });
-var devtoolsViewOptionsState = atom_io.atom({
+var devtoolsViewOptionsState = atom({
   key: `\u{1F441}\u200D\u{1F5E8} Devtools View Options`,
   default: [`atoms`, `selectors`, `transactions`, `timelines`],
   effects: [lazyLocalStorageEffect(`\u{1F441}\u200D\u{1F5E8} Devtools View Options`)]
 });
-var findViewIsOpenState = atom_io.atomFamily({
+var findViewIsOpenState = atomFamily({
   key: `\u{1F441}\u200D\u{1F5E8} Devtools View Is Open`,
   default: false,
   effects: (key) => [lazyLocalStorageEffect(key + `:view-is-open`)]
@@ -2819,19 +2810,6 @@ var prettyJson = new Differ(primitiveRefinery, jsonTreeRefinery, {
   array: diffArray
 });
 
-exports.AtomIODevtools = AtomIODevtools;
-exports.atomIndex = atomIndex;
-exports.devtoolsAreOpenState = devtoolsAreOpenState;
-exports.devtoolsViewOptionsState = devtoolsViewOptionsState;
-exports.devtoolsViewSelectionState = devtoolsViewSelectionState;
-exports.findTimelineState = findTimelineState;
-exports.findTransactionLogState = findTransactionLogState;
-exports.findViewIsOpenState = findViewIsOpenState;
-exports.jsonTreeRefinery = jsonTreeRefinery;
-exports.prettyJson = prettyJson;
-exports.primitiveRefinery = primitiveRefinery;
-exports.selectorIndex = selectorIndex;
-exports.timelineIndex = timelineIndex;
-exports.transactionIndex = transactionIndex;
+export { AtomIODevtools, atomIndex, devtoolsAreOpenState, devtoolsViewOptionsState, devtoolsViewSelectionState, findTimelineState, findTransactionLogState, findViewIsOpenState, jsonTreeRefinery, prettyJson, primitiveRefinery, selectorIndex, timelineIndex, transactionIndex };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map