@plasmicapp/react-web 0.2.109 → 0.2.112

package/dist/react-web.cjs.development.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var classNames$1 = _interopDefault(require('classnames'));
+var _get = _interopDefault(require('dlv'));
 var React = require('react');
 var React__default = _interopDefault(React);
 var ReactDOM = require('react-dom');
 var ReactDOM__default = _interopDefault(ReactDOM);
+var dataSourcesContext = require('@plasmicapp/data-sources-context');
 var ssr = require('@react-aria/ssr');
 var focus = require('@react-aria/focus');
 var checkbox = require('@react-aria/checkbox');
@@ -25,8 +27,9 @@ var listbox = require('@react-aria/listbox');
 var select$1 = require('@react-stately/select');
 var _switch = require('@react-aria/switch');
 var overlays = require('@react-aria/overlays');
-var _get = _interopDefault(require('dlv'));
-var dset = require('dset');
+var deepEqual = _interopDefault(require('fast-deep-equal'));
+var valtio = require('valtio');
+var utils = require('valtio/utils');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -692,6 +695,14 @@ function mergeVariants(v1, v2) {
   return _extends({}, v1, v2);
 }
 
+function mergeVariantsWithStates(variants, $state, linkedStates) {
+  return _extends({}, variants, Object.fromEntries(linkedStates.map(function (_ref) {
+    var variantGroup = _ref.variantGroup,
+        statePath = _ref.statePath;
+    return [variantGroup, _get($state, statePath)];
+  })));
+}
+
 function mergeArgs(a1, a2) {
   if (!a1 || !a2) {
     return a1 || a2 || {};
@@ -717,7 +728,7 @@ function mergeFlexOverrides(o1, o2) {
 }
 
 function mergeFlexOverride(fo1, fo2) {
-  var _o1$props, _ref;
+  var _o1$props, _ref2;
 
   if (!fo1) {
     return fo2;
@@ -753,7 +764,7 @@ function mergeFlexOverride(fo1, fo2) {
   } // "as" will take precedence
 
 
-  var as = (_ref = o2.type === "as" ? o2.as : undefined) != null ? _ref : o1.type === "as" ? o1.as : undefined;
+  var as = (_ref2 = o2.type === "as" ? o2.as : undefined) != null ? _ref2 : o1.type === "as" ? o1.as : undefined;
   return _extends({
     props: props,
     wrap: wrap,
@@ -819,9 +830,12 @@ function PlasmicHead(props) {
     console.warn("Plasmic: Head meta tags are being ignored. To make them work, pass a Head component into PlasmicRootProvider."); // TODO: Link to doc about Head.
 
     return null;
-  }
+  } // Helmet does not support React.Fragments, so we need to use `[<meta />,
+  // <meta />]` instead of `<><meta /><meta /></>`.
 
-  return React.createElement(Head, null, props.image ? React.createElement(React.Fragment, null, React.createElement("meta", {
+
+  return React.createElement(Head, null, props.image ? [React.createElement("meta", {
+    key: "twitter:card",
     name: "twitter:card",
     content: "summary_large_image"
   }), React.createElement("meta", {
@@ -832,10 +846,11 @@ function PlasmicHead(props) {
     key: "twitter:image",
     name: "twitter:image",
     content: props.image
-  })) : React.createElement("meta", {
+  })] : React.createElement("meta", {
+    key: "twitter:card",
     name: "twitter:card",
     content: "summary"
-  }), props.title && React.createElement(React.Fragment, null, React.createElement("title", {
+  }), props.title && [React.createElement("title", {
     key: "title"
   }, props.title), React.createElement("meta", {
     key: "og:title",
@@ -845,7 +860,7 @@ function PlasmicHead(props) {
     key: "twitter:title",
     property: "twitter:title",
     content: props.title
-  })), props.description && React.createElement(React.Fragment, null, React.createElement("meta", {
+  })], props.description && [React.createElement("meta", {
     key: "description",
     name: "description",
     content: props.description
@@ -857,7 +872,8 @@ function PlasmicHead(props) {
     key: "twitter:description",
     name: "twitter:description",
     content: props.description
-  })), props.canonical && React.createElement("link", {
+  })], props.canonical && React.createElement("link", {
+    key: "canonical",
     ref: "canonical",
     href: props.canonical
   }));
@@ -865,7 +881,7 @@ function PlasmicHead(props) {
 var plasmicHeadMeta = {
   name: "hostless-plasmic-head",
   displayName: "Head",
-  description: "Used to add page metadata to HEAD tag",
+  description: "Used to add page metadata to HTML <head />.",
   importName: "PlasmicHead",
   importPath: "@plasmicapp/react-web",
   isRepeatable: false,
@@ -1533,19 +1549,27 @@ function createUseScreenVariants(isMulti, screenQueries) {
 var PlasmicRootContext = /*#__PURE__*/React.createContext(undefined);
 function PlasmicRootProvider(props) {
   var platform = props.platform,
-      children = props.children;
+      children = props.children,
+      userAuthToken = props.userAuthToken;
   var context = React.useMemo(function () {
     return {
       platform: platform
     };
   }, [platform]);
+  var dataSourceContextValue = React.useMemo(function () {
+    return {
+      userAuthToken: userAuthToken
+    };
+  }, [userAuthToken]);
   return React.createElement(PlasmicRootContext.Provider, {
     value: context
-  }, React.createElement(ssr.SSRProvider, null, React.createElement(PlasmicTranslatorContext.Provider, {
+  }, React.createElement(ssr.SSRProvider, null, React.createElement(dataSourcesContext.PlasmicDataSourceContextProvider, {
+    value: dataSourceContextValue
+  }, React.createElement(PlasmicTranslatorContext.Provider, {
     value: props.translator
   }, React.createElement(PlasmicHeadContext.Provider, {
     value: props.Head
-  }, children))));
+  }, children)))));
 }
 var useIsSSR = ssr.useIsSSR;
 function useHasPlasmicRoot() {
@@ -3212,7 +3236,7 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
 
 function generateStateOnChangeProp($state, stateName, dataReps) {
   return function (val, path) {
-    return dset.dset($state, [stateName].concat(dataReps, path), val);
+    return set($state, [stateName].concat(dataReps, path), val);
   };
 }
 /**
@@ -3226,8 +3250,51 @@ function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
 ) {
   return _get($state, path);
 }
+/**
+ * Forked from https://github.com/lukeed/dset
+ * Changes: fixed setting a deep value to a proxy object
+ */
+
+function set(obj, keys, val) {
+  keys = keys.split ? keys.split(".") : keys;
+  var i = 0,
+      l = keys.length,
+      t = obj,
+      x,
+      k;
+
+  while (i < l) {
+    k = keys[i++];
+    if (k === "__proto__" || k === "constructor" || k === "prototype") break;
+
+    if (i === l) {
+      t[k] = val;
+      t = t[k];
+    } else {
+      if (typeof (x = t[k]) === typeof keys) {
+        t = t[k] = x;
+      } else if (keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".")) {
+        t[k] = {};
+        t = t[k];
+      } else {
+        t[k] = [];
+        t = t[k];
+      }
+    }
+  }
+}
+
+var mkUntrackedValue = function mkUntrackedValue(o) {
+  return typeof o === "object" ? valtio.ref(o) : o;
+};
+
+var transformPathStringToObj = function transformPathStringToObj(str) {
+  var splitStatePathPart = function splitStatePathPart(state) {
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+  };
 
-var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
+  return str.split(".").flatMap(splitStatePathPart);
+};
 
 function shallowEqual(a1, a2) {
   if (a1.length !== a2.length) {
@@ -3243,145 +3310,144 @@ function shallowEqual(a1, a2) {
   return true;
 }
 
-var isNum = function isNum(value) {
+function isNum(value) {
   return typeof value === "symbol" ? false : !isNaN(+value);
-};
+}
 
-function mkProxy(specs, maybeHandlers) {
-  var handlers = maybeHandlers != null ? maybeHandlers : function () {
-    return {
-      get: function get(target, property) {
-        return target[property];
-      },
-      set: function set(target, property, value) {
-        return (target[property] = value) || true;
-      }
-    };
-  };
+function saveNewState($$state, path, spec) {
+  var key = JSON.stringify(path);
+  $$state.existingStates.set(key, {
+    path: path,
+    specKey: spec.path
+  });
+
+  if (!$$state.statesInstanceBySpec.has(spec.path)) {
+    $$state.statesInstanceBySpec.set(spec.path, []);
+  }
 
-  var getNextParts = function getNextParts(currPath) {
-    return Object.fromEntries(Object.values(specs).filter(function (spec) {
+  $$state.statesInstanceBySpec.get(spec.path).push({
+    path: path,
+    specKey: spec.path
+  });
+}
+
+function create$StateProxy($$state, handlers) {
+  var getNextKeyToSpecMap = function getNextKeyToSpecMap(currPath) {
+    return new Map(Object.entries(Object.values($$state.specsByKey).filter(function (spec) {
       return shallowEqual(currPath.map(function (p) {
         return isNum(p) ? "[]" : p;
-      }), spec.path.slice(0, currPath.length));
-    }).map(function (spec) {
-      var nextPart = spec.path[currPath.length];
-
-      if (spec.path.length === currPath.length + 1) {
-        return [nextPart, {
-          isLast: true,
-          specKey: spec.pathStr
-        }];
-      } else {
-        return [nextPart, {
-          isLast: false,
-          specKey: spec.pathStr
-        }];
+      }), spec.pathObj.slice(0, currPath.length));
+    }).reduce(function (agg, spec) {
+      var nextKey = spec.pathObj[currPath.length];
+
+      if (!(nextKey in agg)) {
+        agg[nextKey] = [];
       }
-    }));
-  };
-  /**
-   * We use this function when we're setting a value in the middle of the state path.
-   * We can't just set the value, because we need to keep the proxy properties, so
-   * we use the specs to walk through the object and just set the value in the end of the path
-   **/
 
+      agg[nextKey].push(spec);
+      return agg;
+    }, {})));
+  };
 
-  var cloneValue = function cloneValue(target, currPath, value) {
-    if (typeof value !== "object") {
-      return;
-    }
+  var rec = function rec(currPath) {
+    var nextKeyToSpecs = getNextKeyToSpecMap(currPath);
 
-    var nextParts = getNextParts(currPath);
+    var getSpecForProperty = function getSpecForProperty(property) {
+      var _nextKeyToSpecs$get, _nextKeyToSpecs$get2;
 
-    for (var _i = 0, _Object$entries = Object.entries(nextParts); _i < _Object$entries.length; _i++) {
-      var _Object$entries$_i = _Object$entries[_i],
-          nextPart = _Object$entries$_i[0],
-          _Object$entries$_i$ = _Object$entries$_i[1],
-          isLast = _Object$entries$_i$.isLast,
-          specKey = _Object$entries$_i$.specKey;
+      return nextKeyToSpecs.has("[]") && isNum(property) ? (_nextKeyToSpecs$get = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get[0] : typeof property === "string" && nextKeyToSpecs.has(property) ? (_nextKeyToSpecs$get2 = nextKeyToSpecs.get(property)) == null ? void 0 : _nextKeyToSpecs$get2[0] : undefined;
+    };
 
-      if (nextPart === "[]" && Array.isArray(value)) {
-        for (var i = 0; i < value.length; i++) {
-          cloneValue(target[i], [].concat(currPath, [i]), value[i]);
-        }
-      } else if (nextPart in value) {
-        if (isLast) {
-          var _handlers$set, _handlers;
-
-          handlers == null ? void 0 : (_handlers$set = (_handlers = handlers({
-            specKey: specKey,
-            path: [].concat(currPath, [nextPart])
-          })).set) == null ? void 0 : _handlers$set.call(_handlers, target, nextPart, value[nextPart], undefined);
-        } else {
-          cloneValue(target[nextPart], [].concat(currPath, [nextPart]), value[nextPart]);
-        }
-      }
-    }
-  };
+    var getNextPath = function getNextPath(property) {
+      return [].concat(currPath, [isNum(property) ? +property : property]);
+    };
 
-  var rec = function rec(currPath) {
-    var nextParts = getNextParts(currPath);
-    return new Proxy("[]" in nextParts ? [] : {}, {
+    return new Proxy(nextKeyToSpecs.has("[]") ? [] : {}, {
       deleteProperty: function deleteProperty(target, property) {
-        if ("[]" in nextParts && isNum(property)) {
-          var _handlers$deletePrope, _handlers2;
-
-          delete target[property];
-          handlers == null ? void 0 : (_handlers$deletePrope = (_handlers2 = handlers({
-            path: [].concat(currPath, [+property]),
-            specKey: nextParts["[]"].specKey
-          })).deleteProperty) == null ? void 0 : _handlers$deletePrope.call(_handlers2, target, property);
-        } else {
-          throw new Error("You can't delete a non-repeated property in the middle of the path");
-        }
+        var prefixPath = getNextPath(property);
+        var specKeysToUpdate = new Set();
+        $$state.existingStates.forEach(function (_ref) {
+          var path = _ref.path,
+              specKey = _ref.specKey;
+
+          if (path.length >= prefixPath.length && shallowEqual(path.slice(0, prefixPath.length), prefixPath)) {
+            deleteState($$state, path);
+            specKeysToUpdate.add(specKey);
+          }
+        });
+        specKeysToUpdate.forEach(function (specKey) {
+          var spec = $$state.specsByKey[specKey];
 
-        return true;
+          if (spec.onChangeProp) {
+            var _$$state$props$spec$o, _$$state$props;
+
+            (_$$state$props$spec$o = (_$$state$props = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props, _get($$state.stateValues, currPath), currPath);
+          }
+        });
+        return Reflect.deleteProperty(target, property);
       },
       get: function get(target, property, receiver) {
-        if ("[]" in nextParts && isNum(property)) {
-          if (!(property in target)) {
-            target[property] = rec([].concat(currPath, [+property]));
-          }
-        } else if (property in nextParts) {
-          if (nextParts[property].isLast) {
-            var _handlers$get, _handlers3;
-
-            return target[property] = handlers == null ? void 0 : (_handlers$get = (_handlers3 = handlers({
-              path: [].concat(currPath, [property]),
-              specKey: nextParts[property].specKey
-            })).get) == null ? void 0 : _handlers$get.call(_handlers3, target, property, receiver);
+        var spec = getSpecForProperty(property);
+
+        if (spec && typeof property !== "symbol") {
+          var nextPath = getNextPath(property);
+
+          if (spec.pathObj.length === currPath.length + 1) {
+            var _handlers$get, _handlers;
+
+            // reached the end of the spec
+            target[property] = (_handlers$get = (_handlers = handlers(nextPath, spec)).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
           } else if (!(property in target)) {
-            target[property] = rec([].concat(currPath, [property]));
+            target[property] = rec(nextPath);
           }
         }
 
-        return target[property];
+        return Reflect.get(target, property, receiver);
       },
-      set: function set(target, property, value, receiver) {
-        if ("[]" in nextParts && isNum(property)) {
-          if (!(property in target)) {
-            target[property] = rec([].concat(currPath, [+property]));
-          }
-        } else if (property in nextParts) {
-          if (nextParts[property].isLast) {
-            var _handlers$set2, _handlers$set3, _handlers4;
-
-            target[property] = value;
-            return (_handlers$set2 = (_handlers$set3 = (_handlers4 = handlers({
-              path: [].concat(currPath, [property]),
-              specKey: nextParts[property].specKey
-            })).set) == null ? void 0 : _handlers$set3.call(_handlers4, target, property, value, receiver)) != null ? _handlers$set2 : false;
+      set: function set$1(target, property, value, receiver) {
+        var spec = getSpecForProperty(property);
+        var nextPath = getNextPath(property);
+
+        if (spec && typeof property !== "symbol") {
+          if (spec.pathObj.length === currPath.length + 1) {
+            var _handlers$set, _handlers2;
+
+            // reached the end of the spec
+            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, spec)).set) == null ? void 0 : _handlers$set.call(_handlers2, target, property, value, receiver);
+            return Reflect.set(target, property, value, receiver);
+          } else if (typeof value === "object") {
+            target[property] = rec(nextPath);
+
+            for (var _i = 0, _Object$keys = Object.keys(value); _i < _Object$keys.length; _i++) {
+              var key = _Object$keys[_i];
+              target[property][key] = value[key];
+            }
+
+            return true;
           }
         }
 
-        if (property === "registerInitFunc") {
-          target[property] = value;
-        } else if (typeof value === "object") {
-          cloneValue(target[property], [].concat(currPath, [isNum(property) ? +property : property]), value);
+        if (property === "registerInitFunc" && currPath.length === 0) {
+          return Reflect.set(target, property, value, receiver);
         }
 
-        return true;
+        if (nextKeyToSpecs.has("[]")) {
+          var _nextKeyToSpecs$get3;
+
+          set($$state.stateValues, nextPath, value);
+
+          (_nextKeyToSpecs$get3 = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get3.forEach(function (spec) {
+            if (spec != null && spec.onChangeProp) {
+              var _$$state$props$spec$o2, _$$state$props2;
+
+              (_$$state$props$spec$o2 = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props2, value, nextPath);
+            }
+          });
+          return Reflect.set(target, property, value, receiver);
+        } // invalid setting a value that doesn't make part of the spec
+
+
+        return false;
       }
     });
   };
@@ -3389,136 +3455,136 @@ function mkProxy(specs, maybeHandlers) {
   return rec([]);
 }
 
-function cloneProxy(specs, states, obj) {
-  var newObj = mkProxy(specs);
-  Object.values(states).forEach(function (_ref) {
-    var path = _ref.path;
+var deleteState = function deleteState($$state, path) {
+  var _$$state$unsubscripti;
 
-    dset.dset(newObj, path, _get(obj, path));
+  var key = JSON.stringify(path);
+  (_$$state$unsubscripti = $$state.unsubscriptionsByState[key]) == null ? void 0 : _$$state$unsubscripti.forEach(function (f) {
+    return f();
   });
-  return newObj;
-}
+  delete $$state.unsubscriptionsByState[key];
+  $$state.existingStates["delete"](key); // delete get($$state.stateValues, path.slice(-1))[path.slice(-1)[0]];
+  // delete get($$state.initStateValues, path.slice(-1))[path.slice(-1)[0]];
+};
 
-function saveState(state, states) {
-  states[JSON.stringify(state.path)] = state;
-}
+var getIndexes = function getIndexes(path, spec) {
+  var indexes = [];
 
-function hasState(state, states) {
-  return JSON.stringify(state.path) in states;
-}
+  if (path.length !== spec.pathObj.length) {
+    throw new Error("Unexpected error: state path and spec path have different lengths");
+  }
 
-var transformPathStringToObj = function transformPathStringToObj(str) {
-  // "c[][]" -> ["c", "[]", "[]"]
-  var splitStatePathPart = function splitStatePathPart(state) {
-    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
-  };
+  for (var i = 0; i < spec.pathObj.length; i++) {
+    if (spec.pathObj[i] === "[]") {
+      indexes.push(path[i]);
+    }
+  }
 
-  return str.split(".").flatMap(splitStatePathPart);
+  return indexes;
 };
 
-function useVanillaDollarState(_specs, props) {
-  var forceRender = React__default.useState(0)[1];
-  var $$state = React__default.useMemo(function () {
-    var specs = Object.fromEntries(_specs.map(function (_ref2) {
-      var pathStr = _ref2.path,
-          spec = _objectWithoutPropertiesLoose(_ref2, ["path"]);
-
-      return [pathStr, _extends({}, spec, {
-        pathStr: pathStr,
-        path: transformPathStringToObj(pathStr),
-        isRepeated: pathStr.split(".").some(function (part) {
-          return part.endsWith("[]");
-        })
-      })];
-    }));
-    return {
-      stateValues: mkProxy(specs),
-      initStateDeps: {},
-      initStateValues: mkProxy(specs),
-      states: {},
-      specs: specs
-    };
-  }, []);
-  var $state = Object.assign(mkProxy($$state.specs, function (state) {
-    return {
-      deleteProperty: function deleteProperty(_target, _property) {
-        var prefixPath = state.path;
-
-        for (var _i2 = 0, _Object$entries2 = Object.entries($$state.states); _i2 < _Object$entries2.length; _i2++) {
-          var _Object$entries2$_i = _Object$entries2[_i2],
-              key = _Object$entries2$_i[0],
-              existingState = _Object$entries2$_i[1];
+function initializeStateValue($$state, initialStatePath, initialSpec) {
+  var _$$state$unsubscripti2;
 
-          if (existingState.path.length >= prefixPath.length && shallowEqual(existingState.path.slice(0, prefixPath.length), prefixPath)) {
-            delete $$state.states[key];
-          }
-        }
-
-        forceRender(function (r) {
-          return r + 1;
+  var initialStateKey = JSON.stringify(initialStatePath);
+  var stateAccess = new Set();
+  var $state = create$StateProxy($$state, function (path, spec) {
+    return {
+      get: function get() {
+        var key = JSON.stringify(path);
+        stateAccess.add({
+          path: path,
+          spec: spec
         });
-        return true;
-      },
-      get: function get(_target, _property) {
-        var spec = $$state.specs[state.specKey];
 
         if (spec.valueProp) {
-          if (!spec.isRepeated) {
-            return props[spec.valueProp];
-          } else {
-            return _get(props[spec.valueProp], state.path.slice(1));
-          }
+          return !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
         }
 
-        if (!hasState(state, $$state.states)) {
-          var _spec$initVal;
+        if ($$state.existingStates.has(key)) {
+          // is already initialized
+          return _get($$state.stateValues, path);
+        } else if (spec.initFunc) {
+          initializeStateValue($$state, path, spec);
+        }
 
-          saveState(state, $$state.states);
+        return _get($$state.stateValues, path);
+      },
+      set: function set() {
+        throw new Error("Cannot update state values during initialization");
+      }
+    };
+  });
+  (_$$state$unsubscripti2 = $$state.unsubscriptionsByState[initialStateKey]) == null ? void 0 : _$$state$unsubscripti2.forEach(function (f) {
+    return f();
+  });
+  $$state.unsubscriptionsByState[initialStateKey] = [];
+  stateAccess.forEach(function (_ref2) {
+    var path = _ref2.path,
+        spec = _ref2.spec;
+    var unsubscribe = utils.subscribeKey(_get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
+      return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(path, spec))));
+    });
+    $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
+  });
+  var untrackedInitialValue = mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(initialStatePath, initialSpec)));
 
-          dset.dset($$state.stateValues, state.path, spec.initFunc ? UNINITIALIZED : (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined);
+  set($$state.initStateValues, initialStatePath, untrackedInitialValue);
 
-          var deps = spec.initFunc ? fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states) : {};
+  set($$state.stateValues, initialStatePath, untrackedInitialValue);
 
-          dset.dset($$state.initStateValues, state.path, _get($$state.stateValues, state.path));
+  return untrackedInitialValue;
+}
 
-          $$state.initStateDeps = _extends({}, $$state.initStateDeps, deps);
-          forceRender(function (r) {
-            return r + 1;
-          });
-          return spec.initFunc ? spec.initFunc(props, $state) : spec.initVal;
-        }
+function useDollarState(specs, props) {
+  var $$state = React__default.useRef(valtio.proxy({
+    stateValues: {},
+    initStateValues: {},
+    specsByKey: Object.fromEntries(specs.map(function (spec) {
+      return [spec.path, _extends({}, spec, {
+        pathObj: transformPathStringToObj(spec.path),
+        isRepeated: spec.path.split(".").some(function (part) {
+          return part.endsWith("[]");
+        })
+      })];
+    })),
+    statesInstanceBySpec: new Map(),
+    existingStates: new Map(),
+    unsubscriptionsByState: {},
+    props: undefined,
+    registrationsQueue: []
+  })).current;
+  $$state.props = mkUntrackedValue(props);
+  var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
+    var key = JSON.stringify(path);
 
-        return _get($$state.stateValues, state.path);
-      },
-      set: function set(_target, _property, newValue) {
-        if (newValue !== _get($$state.stateValues, state.path)) {
-          saveState(state, $$state.states);
+    if (!$$state.existingStates.has(key)) {
+      var _spec$initVal;
 
-          dset.dset($$state.stateValues, state.path, newValue);
+      saveNewState($$state, path, spec);
+      var untrackedValue = !spec.initFunc ? mkUntrackedValue((_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined) : initializeStateValue($$state, path, spec);
 
-          for (var _i3 = 0, _Object$entries3 = Object.entries($$state.initStateDeps); _i3 < _Object$entries3.length; _i3++) {
-            var _Object$entries3$_i = _Object$entries3[_i3],
-                key = _Object$entries3$_i[0],
-                deps = _Object$entries3$_i[1];
+      set($$state.stateValues, path, untrackedValue);
 
-            if (deps.includes(JSON.stringify(state.path))) {
-              dset.dset($$state.stateValues, JSON.parse(key), UNINITIALIZED);
-            }
-          }
+      set($$state.initStateValues, path, untrackedValue);
+    }
 
-          var newDeps = fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states);
-          $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
-          forceRender(function (r) {
-            return r + 1;
-          });
+    return {
+      get: function get() {
+        if (spec.valueProp) {
+          var value = !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
+          return value;
+        } else {
+          return _get($$state.stateValues, path);
         }
-
-        var spec = $$state.specs[state.specKey];
+      },
+      set: function set$1(_t, _p, value) {
+        set($$state.stateValues, path, mkUntrackedValue(value));
 
         if (spec.onChangeProp) {
-          var _props$spec$onChangeP;
+          var _$$state$props$spec$o3, _$$state$props3;
 
-          (_props$spec$onChangeP = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP.call(props, newValue, state.path);
+          (_$$state$props$spec$o3 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props3, value, path);
         }
 
         return true;
@@ -3526,157 +3592,117 @@ function useVanillaDollarState(_specs, props) {
     };
   }), {
     registerInitFunc: function registerInitFunc(pathStr, f) {
-      if (Object.values($$state.states).filter(function (_ref3) {
-        var specKey = _ref3.specKey;
-        return specKey === pathStr;
-      }).some(function (_ref4) {
-        var path = _ref4.path;
-        return _get($$state.stateValues, path) !== f(props, $state);
+      var _$$state$statesInstan;
+
+      if ((_$$state$statesInstan = $$state.statesInstanceBySpec.get(pathStr)) != null && _$$state$statesInstan.some(function (_ref3) {
+        var path = _ref3.path,
+            specKey = _ref3.specKey;
+        return !deepEqual(_get($$state.initStateValues, path), f(props, $state, getIndexes(path, $$state.specsByKey[specKey])));
       })) {
-        $$state.specs[pathStr] = _extends({}, $$state.specs[pathStr], {
-          initFunc: f
-        });
-        forceRender(function (r) {
-          return r + 1;
+        $$state.registrationsQueue.push({
+          pathStr: pathStr,
+          f: f
         });
       }
     }
-  }); // For each spec with an initFunc, evaluate it and see if
+  })).current; // For each spec with an initFunc, evaluate it and see if
   // the init value has changed. If so, reset its state.
 
-  var newStateValues = undefined;
   var resetSpecs = [];
-
-  for (var _i4 = 0, _Object$values = Object.values($$state.states); _i4 < _Object$values.length; _i4++) {
-    var _Object$values$_i = _Object$values[_i4],
-        path = _Object$values$_i.path,
-        specKey = _Object$values$_i.specKey;
-    var spec = $$state.specs[specKey];
+  $$state.existingStates.forEach(function (_ref4) {
+    var path = _ref4.path,
+        specKey = _ref4.specKey;
+    var spec = $$state.specsByKey[specKey];
 
     if (spec.initFunc) {
-      var newInit = spec.initFunc(props, $state);
+      var newInit = spec.initFunc(props, $state, getIndexes(path, spec));
 
-      if (newInit !== _get($$state.initStateValues, path)) {
-        console.log("init changed for " + JSON.stringify(path) + " from " + _get($$state.initStateValues, path) + " to " + newInit + "; resetting state");
+      if (!deepEqual(newInit, _get($$state.initStateValues, path))) {
         resetSpecs.push({
           path: path,
-          specKey: specKey
+          spec: spec
         });
-
-        if (!newStateValues) {
-          newStateValues = cloneProxy($$state.specs, $$state.states, $$state.stateValues);
-        }
-
-        dset.dset(newStateValues, path, UNINITIALIZED);
       }
     }
-  }
-
+  });
   React__default.useLayoutEffect(function () {
-    if (newStateValues !== undefined) {
-      var newDeps = fillUninitializedStateValues($$state.specs, props, newStateValues, $$state.states);
-      var initStateValues = cloneProxy($$state.specs, $$state.states, $$state.initStateValues);
-      resetSpecs.forEach(function (_ref5) {
-        var path = _ref5.path;
-
-        dset.dset(initStateValues, path, _get(newStateValues, path));
-      });
-      $$state.stateValues = cloneProxy($$state.specs, $$state.states, newStateValues);
-      $$state.initStateValues = initStateValues;
-      $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
-      forceRender(function (r) {
-        return r + 1;
-      });
-
-      for (var _iterator = _createForOfIteratorHelperLoose(resetSpecs), _step; !(_step = _iterator()).done;) {
-        var _step$value = _step.value,
-            _path = _step$value.path,
-            _specKey = _step$value.specKey;
-        var _spec = $$state.specs[_specKey];
+    resetSpecs.forEach(function (_ref5) {
+      var path = _ref5.path,
+          spec = _ref5.spec;
+      var newInit = initializeStateValue($$state, path, spec);
 
-        if (_spec.onChangeProp) {
-          var _props$_spec$onChange;
+      if (spec.onChangeProp) {
+        var _$$state$props$spec$o4, _$$state$props4;
 
-          console.log("Firing onChange for reset init value: " + _spec.path, _get(newStateValues, _path));
-          (_props$_spec$onChange = props[_spec.onChangeProp]) == null ? void 0 : _props$_spec$onChange.call(props, _get(newStateValues, _path));
-        }
+        (_$$state$props$spec$o4 = (_$$state$props4 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o4.call(_$$state$props4, newInit, path);
       }
-    }
-  }, [newStateValues, props, resetSpecs, $$state.specs]);
-  /* *
-   * Initialize all known states. (we need to do it for repeated states
-   * because they're created only after the first get/set operation)
-   * If we don't initialize them, we won't be able to consume the repeated states properly.
-   * For example, let's say the consumer is just mapping the repeated states. The first operation
-   * is to get the length of the array which will always be 0 because the existing states
-   * weren't allocated yet -- they're only stored in internal state)
-   * */
-
-  for (var _i5 = 0, _Object$values2 = Object.values($$state.states); _i5 < _Object$values2.length; _i5++) {
-    var _path2 = _Object$values2[_i5].path;
-
-    _get($state, _path2);
-  }
+    });
+  }, [props, resetSpecs]);
+  React__default.useLayoutEffect(function () {
+    $$state.registrationsQueue.forEach(function (_ref6) {
+      var f = _ref6.f,
+          pathStr = _ref6.pathStr;
+      $$state.specsByKey[pathStr].initFunc = f;
+    });
+    $$state.registrationsQueue = [];
+  }, [$$state.registrationsQueue]); // Re-render if any value changed in one of these objects
 
+  valtio.useSnapshot($$state.stateValues, {
+    sync: true
+  });
+  valtio.useSnapshot($$state.specsByKey, {
+    sync: true
+  });
   return $state;
 }
 
-function fillUninitializedStateValues(specs, props, stateValues, states) {
-  var stateAccessStack = [new Set()];
-  var initFuncDeps = {};
-  var $state = Object.assign(mkProxy(specs, function (state) {
+function useCanvasDollarState(specs, props) {
+  var $$state = valtio.proxy({
+    stateValues: {},
+    initStateValues: {},
+    specsByKey: Object.fromEntries(specs.map(function (spec) {
+      return [spec.path, _extends({}, spec, {
+        pathObj: transformPathStringToObj(spec.path),
+        isRepeated: spec.path.split(".").some(function (part) {
+          return part.endsWith("[]");
+        })
+      })];
+    })),
+    statesInstanceBySpec: new Map(),
+    existingStates: new Map(),
+    unsubscriptionsByState: {},
+    props: undefined,
+    registrationsQueue: []
+  });
+  $$state.props = mkUntrackedValue(props);
+  var $state = create$StateProxy($$state, function (path, spec) {
     return {
-      get: function get(_target, _property) {
-        var spec = specs[state.specKey];
-
-        if (spec.valueProp) {
-          if (!spec.isRepeated) {
-            return props[spec.valueProp];
-          } else {
-            return _get(props[spec.valueProp], state.path.slice(1));
-          }
-        }
-
-        var value = _get(stateValues, state.path);
-
-        if (value === UNINITIALIZED) {
-          // This value has a init expression; need to be evaluated.
-          value = tracked(state);
+      get: function get() {
+        return _get($$state.stateValues, path);
+      },
+      set: function set$1(_t, _p, value) {
+        set($$state.stateValues, path, mkUntrackedValue(value));
 
-          dset.dset(stateValues, state.path, value);
-        } // Record that this field had just been accessed; for
-        // trackInit() to know what fields were used to compute
-        // the init value
+        if (spec.onChangeProp) {
+          var _$$state$props$spec$o5, _$$state$props5;
 
+          (_$$state$props$spec$o5 = (_$$state$props5 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o5.call(_$$state$props5, value, path);
+        }
 
-        stateAccessStack[stateAccessStack.length - 1].add(JSON.stringify(state.path));
-        return value;
-      },
-      set: function set() {
-        throw new Error("Cannot update state values during initialization");
+        return true;
       }
     };
-  }), {
-    registerInitFunc: function registerInitFunc() {}
   });
 
-  function tracked(state) {
-    stateAccessStack.push(new Set());
-    var res = specs[state.specKey].initFunc(props, $state);
-    var deps = stateAccessStack.pop();
-    initFuncDeps[JSON.stringify(state.path)] = [].concat(deps.values());
-    return res;
-  }
-
-  for (var _i6 = 0, _Object$values3 = Object.values(states); _i6 < _Object$values3.length; _i6++) {
-    var path = _Object$values3[_i6].path;
+  for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
+    var spec = _step.value;
+    var path = transformPathStringToObj(spec.path);
+    var init = spec.valueProp ? $$state.props[spec.valueProp] : spec.initVal ? spec.initVal : spec.initFunc ? initializeStateValue($$state, path, $$state.specsByKey[spec.path]) : undefined;
 
-    if (_get(stateValues, path) === UNINITIALIZED) {
-      _get($state, path);
-    }
+    set($state, path, init);
   }
 
-  return initFuncDeps;
+  return $state;
 }
 
 exports.DropdownMenu = DropdownMenu;
@@ -3701,14 +3727,17 @@ exports.generateStateValueProp = generateStateValueProp;
 exports.getDataProps = getDataProps;
 exports.hasVariant = hasVariant;
 exports.makeFragment = makeFragment;
+exports.mergeVariantsWithStates = mergeVariantsWithStates;
 exports.omit = omit;
 exports.pick = pick;
 exports.plasmicHeadMeta = plasmicHeadMeta;
 exports.renderPlasmicSlot = renderPlasmicSlot;
+exports.set = set;
 exports.setPlumeStrictMode = setPlumeStrictMode;
 exports.useButton = useButton;
+exports.useCanvasDollarState = useCanvasDollarState;
 exports.useCheckbox = useCheckbox;
-exports.useDollarState = useVanillaDollarState;
+exports.useDollarState = useDollarState;
 exports.useIsSSR = useIsSSR;
 exports.useMenu = useMenu;
 exports.useMenuButton = useMenuButton;