@movable/studio-framework 3.0.0-canary.0 → 3.0.0-esmodules.0

package/dist/index.js

@@ -2,11 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var React = require('react');
+var ReactDOM = require('react-dom');
+var CD = require('cropduster');
 
-var React = _interopDefault(require('react'));
-var ReactDOM = _interopDefault(require('react-dom'));
-var CD = _interopDefault(require('cropduster'));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var CD__default = /*#__PURE__*/_interopDefaultLegacy(CD);
 
 // Capturama needs a polyfill for Object.entries
 if (typeof Object.entries === 'undefined') {
@@ -50,13 +54,50 @@ function _extends() {
 }
 
 const {
-  entries
+  entries: entries$2
 } = Object;
-const STYLE_WHITELIST = new Set(['top', 'left', 'color', 'width', 'border', 'borderRadius', 'borderColor', 'borderStyle', 'borderWidth', 'boxSizing', 'boxShadow', 'height', 'marginTop', 'marginLeft', 'marginBottom', 'marginRight', 'zIndex', 'fontSize', 'position', 'textAlign', 'transform', 'textShadow', 'lineHeight', 'fontFamily', 'fontWeight', 'textTransform', 'letterSpacing', 'backgroundColor', 'backgroundImage', 'transformOrigin', 'opacity', 'overflow', 'display', 'flexDirection', 'justifyContent', 'whiteSpace']);
+const STYLE_WHITELIST = {
+  top: true,
+  left: true,
+  color: true,
+  width: true,
+  border: true,
+  borderRadius: true,
+  borderColor: true,
+  borderStyle: true,
+  borderWidth: true,
+  boxSizing: true,
+  boxShadow: true,
+  height: true,
+  marginTop: true,
+  marginLeft: true,
+  marginBottom: true,
+  marginRight: true,
+  zIndex: true,
+  fontSize: true,
+  position: true,
+  textAlign: true,
+  transform: true,
+  textShadow: true,
+  lineHeight: true,
+  fontFamily: true,
+  fontWeight: true,
+  textTransform: true,
+  letterSpacing: true,
+  backgroundColor: true,
+  backgroundImage: true,
+  transformOrigin: true,
+  opacity: true,
+  overflow: true,
+  display: true,
+  flexDirection: true,
+  justifyContent: true,
+  whiteSpace: true
+};
 const PROPERTY_TRANSFORMS = {
   transform: value => `rotate(${value}deg)`
 };
-const TRANSFORMS_MAP = new Map(entries(PROPERTY_TRANSFORMS));
+const TRANSFORMS_MAP = new Map(entries$2(PROPERTY_TRANSFORMS));
 
 function transformStyle(key, value) {
   const transform = TRANSFORMS_MAP.get(key);
@@ -64,9 +105,13 @@ function transformStyle(key, value) {
 }
 
 function styleFromAttributes(tag) {
-  return entries(tag).filter(([key]) => STYLE_WHITELIST.has(key)).map(([key, value]) => [key, transformStyle(key, value)]).reduce((result, [key, value]) => ({ ...result,
-    [key]: value
-  }), {});
+  const result = {};
+
+  for (const key of Object.keys(tag)) {
+    if (STYLE_WHITELIST[key]) result[key] = transformStyle(key, tag[key]);
+  }
+
+  return result;
 }
 
 function normalizeRichTextStyles(attributes = {}) {
@@ -118,7 +163,7 @@ function runModifiers(element, fns) {
   }
 }
 
-class StyledElement extends React.Component {
+class StyledElement extends React__default['default'].Component {
   updateStyleElement() {
     const domNode = this.styleElementRef;
 
@@ -127,7 +172,7 @@ class StyledElement extends React.Component {
         tag,
         registryResolver
       } = this.props;
-      const elementModifierFunctions = resolveElementModifiers((tag === null || tag === void 0 ? void 0 : tag.appliedElementModifiers) || [], registryResolver);
+      const elementModifierFunctions = resolveElementModifiers(tag?.appliedElementModifiers || [], registryResolver);
       runModifiers(domNode, elementModifierFunctions);
     }
   }
@@ -155,7 +200,7 @@ class StyledElement extends React.Component {
     } = this.props;
     const style = styleFromAttributes(tag);
     const className = classNameFromAttributes(tag);
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
       className: className,
       style: style,
       ref: this.setStyleElementRef
@@ -370,6 +415,13 @@ function StudioErrorWrapper(error, message) {
 
   return error.clone(wrappedMessage);
 }
+class StudioError extends BaseStudioError {
+  constructor(dynamicProperty, message) {
+    super(message);
+    this.setSourceDynamicProperty(dynamicProperty);
+  }
+
+}
 
 function getStateTuple(prop, resolver) {
   if (!prop) {
@@ -388,7 +440,7 @@ function getStateTuple(prop, resolver) {
   return resolver.getPropertyStateTuple(propertyGroupKey, propertyPath, context);
 }
 
-class TagComponent extends React.Component {
+class TagComponent extends React__default['default'].Component {
   static getDerivedStateFromProps(props) {
     const {
       tag,
@@ -433,6 +485,7 @@ class TagComponent extends React.Component {
   getPropertyWithFallback(prop, fallback) {
     const {
       tag,
+      canvas,
       propertyResolver
     } = this.props;
     const [result, error] = getStateTuple(prop, propertyResolver);
@@ -442,7 +495,7 @@ class TagComponent extends React.Component {
 
     if (propertyFallback) {
       const warning = error ? StudioErrorWrapper(error, 'Fallback Warning') : new BaseStudioError('Fallback Warning');
-      const consoleMessage = warning.setErrorType('FallbackWarning').setTag(tag).setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
+      const consoleMessage = warning.setErrorType('FallbackWarning').setTag(tag).setCanvas(canvas).setSourceType('tag').setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
       console.warn(consoleMessage);
       return propertyFallback;
     }
@@ -450,10 +503,10 @@ class TagComponent extends React.Component {
     if (passedFallback) return fallback;
 
     if (error) {
-      throw StudioErrorWrapper(error).setTag(tag);
+      throw StudioErrorWrapper(error).setTag(tag).setCanvas(canvas).setSourceType('tag');
     }
 
-    throw new BaseStudioError('Missing Data').setErrorType('MissingData').setTag(tag).setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
+    throw new BaseStudioError('Missing Data').setErrorType('MissingData').setTag(tag).setCanvas(canvas).setSourceType('tag').setSourceDynamicProperty(prop).setEntryDynamicProperty(prop);
   }
 
   constructor(props) {
@@ -486,7 +539,7 @@ class TagComponent extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(StudioTool, {
+    return /*#__PURE__*/React__default['default'].createElement(StudioTool, {
       tag: tag,
       getPropertyState: this.getPropertyState,
       getPropertyWithFallback: this.getPropertyWithFallback
@@ -495,29 +548,32 @@ class TagComponent extends React.Component {
 
 }
 
-class Tags extends React.Component {
+class Tags extends React__default['default'].Component {
   render() {
     const {
       registryResolver,
       propertyResolver,
       onPendingPromise,
-      tags
+      tags,
+      canvas
     } = this.props;
     return tags.map((tag, index) => {
       const {
         subtags
       } = tag;
-      return /*#__PURE__*/React.createElement(StyledElement, {
+      return /*#__PURE__*/React__default['default'].createElement(StyledElement, {
         key: index,
         tag: tag,
         registryResolver: registryResolver
-      }, subtags ? /*#__PURE__*/React.createElement(Tags, {
+      }, subtags ? /*#__PURE__*/React__default['default'].createElement(Tags, {
         tags: subtags,
+        canvas: canvas,
         registryResolver: registryResolver,
         propertyResolver: propertyResolver,
         onPendingPromise: onPendingPromise
-      }) : /*#__PURE__*/React.createElement(TagComponent, {
+      }) : /*#__PURE__*/React__default['default'].createElement(TagComponent, {
         tag: tag,
+        canvas: canvas,
         registryResolver: registryResolver,
         propertyResolver: propertyResolver,
         onPendingPromise: onPendingPromise
@@ -527,7 +583,7 @@ class Tags extends React.Component {
 
 }
 
-class SizeContainer extends React.Component {
+class SizeContainer extends React__default['default'].Component {
   updateContainer() {
     const domNode = this.containerElementRef;
 
@@ -536,7 +592,7 @@ class SizeContainer extends React.Component {
         canvas,
         registryResolver
       } = this.props;
-      const elementModifierFunctions = resolveElementModifiers((canvas === null || canvas === void 0 ? void 0 : canvas.appliedElementModifiers) || [], registryResolver);
+      const elementModifierFunctions = resolveElementModifiers(canvas?.appliedElementModifiers || [], registryResolver);
       runModifiers(domNode, elementModifierFunctions);
     }
   }
@@ -565,7 +621,7 @@ class SizeContainer extends React.Component {
       },
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
       id: "mi_size_container",
       style: {
         width,
@@ -652,7 +708,6 @@ function contextAccessor(context, cb) {
 let _Symbol$iterator;
 
 const ERROR_KEY = Symbol('error');
-const TEMP_STORAGE = Symbol('temporary-key');
 
 function isError(t) {
   return t && typeof t === 'object' && ERROR_KEY in t;
@@ -672,6 +727,8 @@ class CacheMap {
     _defineProperty(this, "acceptingKeys", true);
 
     _defineProperty(this, "tempContext", void 0);
+
+    _defineProperty(this, "tempStorageKey", context => JSON.stringify(context));
   }
 
   get(context) {
@@ -709,11 +766,12 @@ class CacheMap {
 
   freezeContext() {
     this.acceptingKeys = false;
+    const temp = this.tempStorageKey(this.tempContext);
 
-    if (this.cache.has(TEMP_STORAGE)) {
-      const value = this.cache.get(TEMP_STORAGE);
+    if (this.cache.has(temp)) {
+      const value = this.cache.get(temp);
       const context = this.tempContext;
-      this.cache.delete(TEMP_STORAGE);
+      this.cache.delete(temp);
       this.cache.set(this.cacheKeyFor(context), value);
     }
   }
@@ -731,7 +789,7 @@ class CacheMap {
   cacheKeyFor(context) {
     if (this.acceptingKeys) {
       this.tempContext = context;
-      return TEMP_STORAGE;
+      return this.tempStorageKey(context);
     }
 
     if (this.keyCache.has(context)) {
@@ -790,6 +848,7 @@ class ComputeThrottler {
       result = compute();
     } catch (e) {
       this.isPending = false;
+      this.tryNextInQueue();
       throw e;
     }
 
@@ -880,6 +939,31 @@ function parseGetPropertyArgs(args) {
     return [false, '', arg3];
   }
 }
+function parseGetPropertyProxyArgs(args) {
+  let callback = null;
+
+  if (typeof args[args.length - 1] === 'function') {
+    callback = args.pop();
+  }
+
+  if (!callback) {
+    callback = (_, error) => {
+      if (error) {
+        throw error;
+      }
+    };
+  }
+
+  const [arg1, arg2, arg3] = args;
+
+  if (typeof arg2 === 'string' && typeof arg3 !== 'function') {
+    return [arg1, arg2, arg3, callback];
+  } else if (typeof arg1 === 'string' && typeof arg2 !== 'function' && typeof arg2 !== 'string') {
+    return [false, arg1, arg2, callback];
+  } else if (typeof arg3 !== 'function') {
+    return [false, '', arg3, callback];
+  }
+}
 function parseSetPropertyArgs(args) {
   if (args.length === 2) {
     const [arg1, arg2] = args;
@@ -889,18 +973,42 @@ function parseSetPropertyArgs(args) {
   }
 }
 
-let DebugType;
+/** This implementation is adapted from uuidjs rather than requiring the full library
+ * see: https://github.com/movableink/studio-framework/pull/762#discussion_r555175040
+ */
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function generateV4Uuid() {
+  // generate cryptographically strong random numbers
+  // see: github.com/uuidjs/uuid/blob/master/src/rng-browser.js
+  const unsigned8BitArray = new Uint8Array(16);
+  const getRandomValues = crypto.getRandomValues.bind(crypto);
+  const randomValues = getRandomValues(unsigned8BitArray); // per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  // see: github.com/uuidjs/uuid/blob/master/src/v4.js
 
-(function (DebugType) {
-  DebugType["cacheRead"] = "cache-read";
-  DebugType["propertyRequest"] = "property-request";
-  DebugType["resolve"] = "resolve";
-  DebugType["await"] = "await";
-  DebugType["error"] = "error";
-  DebugType["override"] = "override";
-})(DebugType || (DebugType = {}));
+  randomValues[6] = randomValues[6] & 0x0f | 0x40;
+  randomValues[8] = randomValues[8] & 0x3f | 0x80; // strigify v4 format
+  // see: github.com/uuidjs/uuid/blob/master/src/stringify.js
 
-class InertDebugEvent {
+  return (byteToHex[randomValues[0]] + byteToHex[randomValues[1]] + byteToHex[randomValues[2]] + byteToHex[randomValues[3]] + '-' + byteToHex[randomValues[4]] + byteToHex[randomValues[5]] + '-' + byteToHex[randomValues[6]] + byteToHex[randomValues[7]] + '-' + byteToHex[randomValues[8]] + byteToHex[randomValues[9]] + '-' + byteToHex[randomValues[10]] + byteToHex[randomValues[11]] + byteToHex[randomValues[12]] + byteToHex[randomValues[13]] + byteToHex[randomValues[14]] + byteToHex[randomValues[15]]).toLowerCase();
+}
+
+let EventType;
+
+(function (EventType) {
+  EventType["cacheRead"] = "cache-read";
+  EventType["propertyRequest"] = "property-request";
+  EventType["resolve"] = "resolve";
+  EventType["await"] = "await";
+  EventType["error"] = "error";
+  EventType["override"] = "override";
+})(EventType || (EventType = {}));
+
+class InertEvent {
   makeChildEvent() {
     return this;
   } // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -913,8 +1021,12 @@ class InertDebugEvent {
 
 }
 
-class ActiveDebugEvent {
+class ActiveEvent {
   constructor(type, dynamicProperty) {
+    _defineProperty(this, "id", void 0);
+
+    _defineProperty(this, "createdAt", void 0);
+
     _defineProperty(this, "type", void 0);
 
     _defineProperty(this, "dynamicProperty", void 0);
@@ -927,10 +1039,12 @@ class ActiveDebugEvent {
 
     this.type = type;
     this.dynamicProperty = dynamicProperty;
+    this.id = generateV4Uuid();
+    this.createdAt = Date.now();
   }
 
   makeChildEvent(type, prop) {
-    const event = new ActiveDebugEvent(type, prop || this.dynamicProperty);
+    const event = new ActiveEvent(type, prop || this.dynamicProperty);
     this.childEvents.push(event);
     return event;
   }
@@ -945,10 +1059,10 @@ class ActiveDebugEvent {
 
 }
 function createEvent(type, prop) {
-  return new ActiveDebugEvent(type, prop);
+  return new ActiveEvent(type, prop);
 }
 function createInertEvent() {
-  return new InertDebugEvent();
+  return new InertEvent();
 }
 
 function deprecateGetContext(key) {
@@ -1010,6 +1124,10 @@ class Property {
     return this.overrideFn;
   }
 
+  get dependencies() {
+    return this.dependentProperties;
+  }
+
   getCacheFor(context) {
     if (this.memoizeCache) {
       return this.memoizeCache.get(context);
@@ -1078,8 +1196,9 @@ class Property {
 
   getPropertyProxy(context, requestEvent) {
     return (...args) => {
-      const [grouping, key, extraContext = {}] = parseGetPropertyArgs(args);
-      const property = this.computed.getPropertyInstance(grouping || this.grouping, key);
+      const [grouping, key, extraContext = {}, callback] = parseGetPropertyProxyArgs(args);
+      const propertyGroupKey = grouping || this.grouping;
+      const property = this.computed.getPropertyInstance(propertyGroupKey, key);
 
       if (!property) {
         return null;
@@ -1090,21 +1209,89 @@ class Property {
         ...extraContext
       };
       const prop = {
-        propertyGroupKey: grouping,
+        propertyGroupKey: propertyGroupKey,
         propertyPath: key,
         context: fullContext
       };
-      const childEvent = requestEvent.makeChildEvent(DebugType.propertyRequest, prop);
-      const result = property.compute(fullContext, childEvent);
+      const childEvent = requestEvent.makeChildEvent(EventType.propertyRequest, prop);
+      let result;
+      let error;
+      if (window.MICapture?.isPreview) this.throwIfDependencyCycleDetected(property);
+
+      try {
+        result = property.compute(fullContext, childEvent);
+      } catch (e) {
+        error = e;
+      }
 
       if (isPromise(result)) {
         throw new PromiseException(result);
       }
 
-      return result;
+      try {
+        if (error) {
+          callback(null, error);
+          return;
+        } else {
+          callback(result, null);
+          return result;
+        }
+      } catch (e) {
+        const wrappedError = StudioErrorWrapper(e).setSourceDynamicProperty(prop);
+        throw wrappedError;
+      }
     };
   }
 
+  throwIfDependencyCycleDetected(property) {
+    performance.now();
+    const hasDependentProperties = property.dependentProperties.size;
+
+    if (hasDependentProperties) {
+      const dependencyCycleProperties = this.getDependencyCycle(property.dependentProperties);
+      const isDependencyCycleDetected = dependencyCycleProperties.length;
+
+      if (isDependencyCycleDetected) {
+        throw new Error(`Dependency cycle detected: ${dependencyCycleProperties.map(prop => {
+          return prop.grouping ? prop.grouping + '::' + prop.propertyKey : prop.propertyKey;
+        }).join(' > ')}`);
+      }
+    }
+  }
+
+  getDependencyCycle(dependencies) {
+    const propsToInspect = [...dependencies.values()];
+    const propsInspected = new Set();
+    const propsCompleted = new Set();
+
+    while (propsToInspect.length) {
+      const currentProperty = propsToInspect.pop();
+      const detectionResult = this.detectCycle(currentProperty, propsInspected, propsCompleted);
+      if (detectionResult.length) return [currentProperty, ...detectionResult];
+    }
+
+    return [];
+  }
+
+  detectCycle(currentProperty, propsInspected, propsCompleted) {
+    if (!propsCompleted.has(currentProperty)) {
+      propsInspected.add(currentProperty);
+      propsCompleted.add(currentProperty);
+
+      for (const prop of currentProperty.dependencies) {
+        if (!propsCompleted.has(prop)) {
+          const detectionResult = this.detectCycle(prop, propsInspected, propsCompleted);
+          if (detectionResult.length) return [prop, ...detectionResult];
+        }
+
+        if (propsInspected.has(prop)) return [prop];
+      }
+    }
+
+    propsInspected.delete(currentProperty);
+    return [];
+  }
+
   generateComputeArgs(passedContext = {}, requestEvent) {
     const context = contextAccessor(passedContext, key => this.memoizeCache.addContextKey(key));
     const getProperty = this.getPropertyProxy(passedContext, requestEvent);
@@ -1134,7 +1321,7 @@ class Property {
     const overwrittenResult = overrideFn(result, context);
 
     if (overrideFn !== DEFAULT_OVERRIDE) {
-      const overrideEvent = event.makeChildEvent(DebugType.override);
+      const overrideEvent = event.makeChildEvent(EventType.override);
       overrideEvent.setValue(result);
     }
 
@@ -1153,7 +1340,7 @@ class Property {
     };
     const wrappedError = StudioErrorWrapper(error).setSourceDynamicProperty(dynamicProperty).setEntryDynamicProperty(dynamicProperty);
     this.memoizeCache.setError(context, wrappedError);
-    event.makeChildEvent(DebugType.error);
+    event.makeChildEvent(EventType.error);
     event.setError(wrappedError);
     throw wrappedError;
   }
@@ -1161,7 +1348,7 @@ class Property {
   async resolvePromiseResult(promise, context, event) {
     try {
       const result = await promise;
-      event.makeChildEvent(DebugType.resolve);
+      event.makeChildEvent(EventType.resolve);
       const overwrittenResult = this.overrideResult(result, context, event);
       this.memoizeCache.set(context, overwrittenResult);
       event.setValue(overwrittenResult);
@@ -1173,7 +1360,7 @@ class Property {
 
   async yieldPromiseException(exception, context, event) {
     try {
-      event.makeChildEvent(DebugType.await);
+      event.makeChildEvent(EventType.await);
       await exception.promise;
       return this.trySyncCompute(context, event);
     } catch (error) {
@@ -1187,10 +1374,10 @@ class Property {
       const result = this.computeFn(computeArgs);
 
       if (isPromise(result)) {
-        event.makeChildEvent(DebugType.await);
+        event.makeChildEvent(EventType.await);
         return this.resolvePromiseResult(result, context, event);
       } else {
-        event.makeChildEvent(DebugType.resolve);
+        event.makeChildEvent(EventType.resolve);
         const overwrittenResult = this.overrideResult(result, context, event);
         this.memoizeCache.set(context, overwrittenResult);
         event.setValue(overwrittenResult);
@@ -1204,7 +1391,7 @@ class Property {
   cachedCompute(context, event) {
     // If memoize cache is not set up, compute compute and set up the cache.
     if (this.memoizeCache.has(context)) {
-      event.makeChildEvent(DebugType.cacheRead);
+      event.makeChildEvent(EventType.cacheRead);
       return this.memoizeCache.get(context);
     } // Immediately cache the response (it wil be re-written when finalized if it's a promise).
 
@@ -1297,7 +1484,7 @@ class GroupedRegistry {
 }
 
 const {
-  entries: entries$2
+  entries
 } = Object;
 
 function isComputeFn(fn) {
@@ -1312,13 +1499,13 @@ class AsyncComputed {
 
     _defineProperty(this, "globProperties", new GroupedRegistry());
 
-    _defineProperty(this, "debugEnabled", false);
+    _defineProperty(this, "eventsEnabled", false);
 
-    _defineProperty(this, "propertyDebugEventsTree", []);
+    _defineProperty(this, "eventsTree", []);
   }
 
-  enableDebugMode() {
-    this.debugEnabled = true;
+  enableEvents() {
+    this.eventsEnabled = true;
   }
 
   setProperty(...args) {
@@ -1337,7 +1524,7 @@ class AsyncComputed {
   }
 
   setProperties(object, prefix) {
-    entries$2(object).forEach(([path, value]) => {
+    entries(object).forEach(([path, value]) => {
       const fullPath = prefix ? `${prefix}.${path}` : path;
       this.setProperty(fullPath, value);
     });
@@ -1353,8 +1540,8 @@ class AsyncComputed {
     return result;
   }
 
-  get propertyDebugEvents() {
-    return this.propertyDebugEventsTree;
+  get propertyEvents() {
+    return this.eventsTree;
   }
 
   getPropertyInstance(grouping, path) {
@@ -1425,14 +1612,14 @@ class AsyncComputed {
 
     let requestEvent;
 
-    if (this.debugEnabled) {
-      requestEvent = createEvent(DebugType.propertyRequest, {
+    if (this.eventsEnabled) {
+      requestEvent = createEvent(EventType.propertyRequest, {
         propertyGroupKey: property.grouping,
         // make sure we're using the property's actual grouping
         propertyPath: path,
         context: context
       });
-      this.propertyDebugEventsTree.push(requestEvent);
+      this.eventsTree.push(requestEvent);
     } else {
       requestEvent = createInertEvent();
     }
@@ -1521,9 +1708,9 @@ class AsyncComputed {
 
 }
 
-const ShapeTag = () => /*#__PURE__*/React.createElement("div", null);
+const ShapeTag = () => /*#__PURE__*/React__default['default'].createElement("div", null);
 
-class StudioTool extends React.Component {
+class StudioTool extends React__default['default'].Component {
   // TODO: We need to be able to extend StudioTool and create a new call signature for dynamicProperties
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   static dynamicProperties(tag) {
@@ -1536,7 +1723,7 @@ function trimTextOverflow(element) {
   const parentElement = element.parentElement;
   const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
 
-  if (!overflowsParent(element, parentBox)) {
+  if (!overflowsParent$1(element, parentBox)) {
     return;
   }
 
@@ -1561,7 +1748,7 @@ function truncateText(element, parentBox) {
     element.parentElement.nextElementSibling.remove();
   }
 
-  while (endPos > 0 && overflowsParent(element, parentBox)) {
+  while (endPos > 0 && overflowsParent$1(element, parentBox)) {
     endPos = currentText.lastIndexOf(' ');
     currentText = currentText.substr(0, endPos);
 
@@ -1592,7 +1779,7 @@ function findOverlappingElement(element, parentBox) {
   const children = Array.from(element.children);
 
   for (const child of children) {
-    if (overflowsParent(child, parentBox)) {
+    if (overflowsParent$1(child, parentBox)) {
       return findOverlappingElement(child, parentBox);
     }
   } // if no child is found to overlap, return self.
@@ -1601,14 +1788,14 @@ function findOverlappingElement(element, parentBox) {
   return element;
 }
 
-function overflowsParent(element, parentBox) {
+function overflowsParent$1(element, parentBox) {
   const selfBox = element.getBoundingClientRect();
   const isOutside = !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && selfBox.bottom <= parentBox.bottom && element.scrollHeight <= parentBox.height && element.scrollWidth <= parentBox.width);
   return isOutside;
 }
 
 const {
-  min
+  min: min$1
 } = Math;
 function convertToEms(insertProperties, baseFontSize) {
   return insertProperties.map(prop => {
@@ -1629,16 +1816,16 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
   } = element;
   const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
 
-  if (!overflowsParent$1(parentBox, element)) {
+  if (!overflowsParent(parentBox, element)) {
     return true;
   }
 
   const smallestFontRatio = richTextStructure.reduce((smallest, op) => {
-    smallest = min(smallest, getFontRatio(op));
+    smallest = min$1(smallest, getFontRatio(op));
 
     if (op.spans) {
       for (const span of op.spans) {
-        smallest = min(smallest, getFontRatio(span));
+        smallest = min$1(smallest, getFontRatio(span));
       }
     }
 
@@ -1664,7 +1851,7 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
 
   selfElement.style.fontSize = `${currentFontSize}px`; // Re-run if still outside of parent container
 
-  if (overflowsParent$1(parentBox, selfElement)) {
+  if (overflowsParent(parentBox, selfElement)) {
     // truncate if min font size reached
     const nextFontSize = currentFontSize - 1;
     return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio);
@@ -1673,7 +1860,7 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
   return true;
 }
 
-function overflowsParent$1(parentBox, selfElement) {
+function overflowsParent(parentBox, selfElement) {
   const range = document.createRange();
   range.selectNode(selfElement);
   const selfBox = range.getBoundingClientRect();
@@ -1713,7 +1900,7 @@ const DEFAULT_P_STYLES = {
   padding: 0
 };
 const {
-  min: min$1
+  min
 } = Math;
 function makeRenderStructure(ops, fitToOneLine) {
   const paragraphs = [];
@@ -1800,7 +1987,7 @@ function getMinFontSize(ops, defaultSize) {
     const fontSize = op.attributes && op.attributes.fontSize;
 
     if (fontSize) {
-      return min$1(curMin, parseFloat(fontSize.toString()));
+      return min(curMin, parseFloat(fontSize.toString()));
     }
 
     return curMin;
@@ -1813,7 +2000,7 @@ const RichTextSpan = ({
   fitToOneLine
 }) => {
   const whiteSpace = fitToOneLine ? 'nowrap' : 'pre-wrap';
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React__default['default'].createElement("span", {
     style: { ...normalizeRichTextStyles(attributes),
       whiteSpace
     }
@@ -1826,9 +2013,9 @@ const isNewLine = ({
 
 const haveSpans = spans => spans.length;
 
-const mapSpans = (spans, fitToOneLine) => spans.map((span, n) => isNewLine(span) ? /*#__PURE__*/React.createElement("br", {
+const mapSpans = (spans, fitToOneLine) => spans.map((span, n) => isNewLine(span) ? /*#__PURE__*/React__default['default'].createElement("br", {
   key: n
-}) : /*#__PURE__*/React.createElement(RichTextSpan, _extends({
+}) : /*#__PURE__*/React__default['default'].createElement(RichTextSpan, _extends({
   key: n
 }, span, {
   fitToOneLine: fitToOneLine
@@ -1844,7 +2031,7 @@ class RichTextElement extends StudioTool {
       didOverflow: false
     });
 
-    _defineProperty(this, "elementRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "elementRef", /*#__PURE__*/React__default['default'].createRef());
   }
 
   static dynamicProperties(tag) {
@@ -1936,18 +2123,18 @@ class RichTextElement extends StudioTool {
     const style = {
       fontSize: baseFontSize
     };
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
       className: "rich-text-element",
       ref: this.elementRef,
       style: style
     }, ops.map(({
       attributes,
       spans
-    }, i) => /*#__PURE__*/React.createElement("p", {
+    }, i) => /*#__PURE__*/React__default['default'].createElement("p", {
       style: { ...attributes
       },
       key: i
-    }, haveSpans(spans) ? mapSpans(spans, fitToOneLine) : /*#__PURE__*/React.createElement("br", null))));
+    }, haveSpans(spans) ? mapSpans(spans, fitToOneLine) : /*#__PURE__*/React__default['default'].createElement("br", null))));
   }
 
 }
@@ -1965,7 +2152,12 @@ function ImageTag({
     throw new Error('Could not render image as no URL was provided');
   }
 
-  CD.waitForAsset(imageUrl);
+  const isDataURL = imageUrl.match(/^data:/);
+
+  if (!isDataURL) {
+    CD__default['default'].waitForAsset(imageUrl);
+  }
+
   const styles = {
     height: '100%',
     width: '100%',
@@ -1973,7 +2165,7 @@ function ImageTag({
     left: '0',
     top: '0'
   };
-  return /*#__PURE__*/React.createElement("img", {
+  return /*#__PURE__*/React__default['default'].createElement("img", {
     src: imageUrl,
     style: styles,
     alt: altText,
@@ -2007,13 +2199,22 @@ const HIDDEN_IMAGE_STYLE = {
   position: 'absolute',
   opacity: 0
 };
-function stylesForImage(imageUrl, cropStyle) {
+function stylesForImage(imageUrl, cropStyle, imageAnchor = {
+  horizontalPosition: 'left',
+  verticalPosition: 'top'
+}) {
   const cropStyles = CROPPING_OPTIONS[cropStyle];
-  return {
+  const {
+    horizontalPosition,
+    verticalPosition
+  } = imageAnchor;
+  const imageStyles = {
     background: `url("${imageUrl}")`,
     ...BASE_STYLES,
     ...cropStyles
   };
+  imageStyles.backgroundPosition = `${horizontalPosition} ${verticalPosition}`;
+  return imageStyles;
 }
 
 class DynamicImageTag extends StudioTool {
@@ -2030,21 +2231,27 @@ class DynamicImageTag extends StudioTool {
       tag: {
         dynamicProperty,
         isCropped,
-        dynamicAltText
+        dynamicAltText,
+        imageAnchor
       },
       getPropertyWithFallback
     } = this.props;
     const src = getPropertyWithFallback(dynamicProperty);
     const altText = getPropertyWithFallback(dynamicAltText, '');
-    CD.waitForAsset(src);
+    const isDataURL = src.match(/^data:/);
+
+    if (!isDataURL) {
+      CD__default['default'].waitForAsset(src);
+    }
+
     const styleType = isCropped ? 'cropped' : 'contained';
-    const styles = stylesForImage(src, styleType);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    const styles = stylesForImage(src, styleType, imageAnchor);
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "studio-dynamic-image",
       role: "image",
       "aria-label": altText,
       style: styles
-    }), /*#__PURE__*/React.createElement("img", {
+    }), /*#__PURE__*/React__default['default'].createElement("img", {
       alt: "hidden",
       "aria-hidden": "true",
       className: "studio-hidden-dynamic-image",
@@ -2063,7 +2270,7 @@ var bootstrapApp = (resolver => {
   resolver.registerComponent('image', DynamicImageTag);
 });
 
-class App extends React.Component {
+class App extends React__default['default'].Component {
   constructor(props) {
     super(props);
 
@@ -2140,19 +2347,20 @@ class App extends React.Component {
         canvas
       }
     } = this;
-    const container = /*#__PURE__*/React.createElement(SizeContainer, {
+    const container = /*#__PURE__*/React__default['default'].createElement(SizeContainer, {
       dimensions: dimensions || this.dimensionsDefault,
       registryResolver: registryResolver,
       canvas: canvas
-    }, /*#__PURE__*/React.createElement(Tags, {
+    }, /*#__PURE__*/React__default['default'].createElement(Tags, {
       tags: tags || [],
+      canvas: canvas,
       registryResolver: registryResolver,
       propertyResolver: propertyResolver,
       onPendingPromise: this.onPendingPromise
     }));
 
     if (clickthroughURL) {
-      return /*#__PURE__*/React.createElement("a", {
+      return /*#__PURE__*/React__default['default'].createElement("a", {
         id: "mi_dynamic_link",
         href: clickthroughURL,
         rel: "noopener noreferrer",
@@ -2218,7 +2426,7 @@ function setupAppDefaults() {
     },
     namespacedOptions = []
   } = MI;
-  const queryParams = CD.params();
+  const queryParams = CD__default['default'].params();
   const attributes = document.querySelector('.mi-attributes');
   const {
     canvases,
@@ -2296,7 +2504,7 @@ function animation(app) {
 
 var n=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t=new Map;function htm(s){var r=t.get(this);return r||(r=new Map,t.set(this,r)),(r=n(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
 
-const html = htm.bind(React.createElement);
+const html = htm.bind(React__default['default'].createElement);
 function makeCustomTool(toolData) {
   return class CustomTool extends StudioTool {
     static dynamicProperties() {
@@ -2310,12 +2518,15 @@ function makeCustomTool(toolData) {
       } = this.props;
       const {
         code,
-        propertyInputs = []
+        propertyInputs = [],
+        context_options: contextOptionsInputs = []
       } = toolData;
       const propertyNames = propertyInputs.map(input => input.variableName);
-      const Tool = new Function(...propertyNames, 'html', 'CD', 'tag', code);
-      const values = propertyInputs.map(prop => getPropertyWithFallback(prop));
-      return Tool(...values, html, CD, tag);
+      const contextOptionsNames = contextOptionsInputs.map(input => input.name);
+      const Tool = new Function(...propertyNames, ...contextOptionsNames, 'html', 'CD', 'tag', code);
+      const propertyValues = propertyInputs.map(prop => getPropertyWithFallback(prop));
+      const contextValues = contextOptionsInputs.map(input => tag.toolProperties[input.name]);
+      return Tool(...propertyValues, ...contextValues, html, CD__default['default'], tag);
     }
 
   };
@@ -2349,9 +2560,9 @@ function cleanHTML(element) {
   newBody.style.cssText = BASE_STYLE;
   newBody.appendChild(element);
 
-  if (analyticsLength > 250) {
+  if (analyticsLength > 500) {
     analytics.setAttribute('data-mi-data', '{}');
-    console.log('extraData trying to be set exceeds 250 characters, setting extraData to be empty to avoid breaking crops');
+    console.log('extraData trying to be set exceeds 500 characters, setting extraData to be empty to avoid breaking crops');
   }
 
   if (analytics) {
@@ -2388,6 +2599,85 @@ function addBrowserContent(baseElement) {
   rootNode.body.appendChild(script);
 }
 
+const COUNT_OF_SCRIPT_TAGS_COMPILED_BY_STUDIO = 5;
+
+const stringMatch = (original, comparable, ignoreRegExp) => {
+  return original.replace(ignoreRegExp, '') === comparable;
+};
+
+const studioOverwritableJs = 'var app = new studio[a-zA-Z0-9]*.A\\(\\);';
+const jsIgnoreRE = new RegExp(`\\s|${studioOverwritableJs}`, 'g');
+const jsCompareString = `(function(){app.render(document.getElementById('react-root')).then(function(){window.APP_SUCCESSFULLY_RENDERED=true;});})();`;
+const isPristinePicJsTag = scriptTag => {
+  const script = scriptTag.innerHTML;
+  return stringMatch(script, jsCompareString, jsIgnoreRE);
+};
+const isDocumentEligibleForStaticHandling = rootNode => {
+  const document = getDocumentNode(rootNode);
+  const scriptTags = document.getElementsByTagName('script');
+  const hasTagContainingPristinePicJs = Array.from(scriptTags).some(isPristinePicJsTag);
+
+  if (!hasTagContainingPristinePicJs) {
+    console.log('static status is false - user-altered js detected');
+    return false;
+  }
+
+  if (scriptTags.length > COUNT_OF_SCRIPT_TAGS_COMPILED_BY_STUDIO) {
+    console.log('static status is false - user-added script tags detected');
+    return false;
+  }
+
+  return true;
+};
+
+const basicTypes = new Set(['group', 'image', 'rectangle', 'richText', 'staticPic', 'text']);
+
+const isTagStatic = tag => {
+  const {
+    appliedElementModifiers,
+    conditionalDynamicProperty,
+    dynamicAltText,
+    dynamicProperty,
+    richText,
+    subtags,
+    type
+  } = tag;
+  if (subtags?.length) return subtags.some(isTagStatic);
+  const isCustomTool = type.startsWith('customTool.');
+  const hasDynamicRichText = richText?.some(({
+    insert
+  }) => typeof insert === 'object' && insert.dynamicProperty);
+  if (appliedElementModifiers || !basicTypes.has(type) || conditionalDynamicProperty || dynamicAltText || dynamicProperty || hasDynamicRichText || isCustomTool) return false;
+  return true;
+};
+
+const areAttributesStatic = attributes => {
+  const {
+    canvases
+  } = attributes;
+
+  for (const {
+    appliedElementModifiers,
+    tags = [],
+    clickthroughDynamicProperty,
+    conditionalDynamicProperty
+  } of canvases) {
+    if (appliedElementModifiers || clickthroughDynamicProperty || conditionalDynamicProperty) {
+      console.log('static status is false - dynamic properties on canvas detected');
+      return false;
+    }
+
+    for (const tag of tags) {
+      if (!isTagStatic(tag)) {
+        console.log('static status is false - dynamic properties on tag detected');
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
 class StudioFramework {
   constructor(opts = setupAppDefaults()) {
     _defineProperty(this, "currentGrouping", false);
@@ -2411,23 +2701,41 @@ class StudioFramework {
     _defineProperty(this, "namespacedOptions", void 0);
 
     _defineProperty(this, "debug", {
-      CD,
+      CD: CD__default['default'],
+      enableDebugMode: () => {
+        this.asyncComputed.enableEvents();
+      },
       getAllProperties: () => this.asyncComputed.dumpState(),
-      getPropertyEvents: () => this.asyncComputed.propertyDebugEvents,
+      getPropertyEvents: () => {
+        console.warn('`app.debug.getPropertyEvents()` is deprecated. Please use `app.meta.enableEvents()` and `app.meta.getEvents([consoleLog])`.');
+        return this.asyncComputed.propertyEvents;
+      },
       logProperties: () => {
         const state = this.asyncComputed.dumpState();
-        console.warn('`app.debug.logProperties()` is deprecated. Please use `app.debug.logPropertyTree()`');
+        console.warn('`app.debug.logProperties()` is deprecated. Please use `app.meta.enableEvents` and `app.meta.getEvents([consoleLog])`.');
         console.log(JSON.stringify(state, null, 2));
       },
-      enableDebugMode: () => {
-        this.asyncComputed.enableDebugMode();
-      },
       logPropertyTree: () => {
-        const events = this.asyncComputed.propertyDebugEvents;
+        const events = this.asyncComputed.propertyEvents;
         console.log(JSON.stringify(events, null, 2));
       }
     });
 
+    _defineProperty(this, "meta", {
+      eventsEnabled: false,
+      enableEvents: () => {
+        // tbd: options for pruning which events are captured
+        this.meta.eventsEnabled = true;
+        this.asyncComputed.enableEvents();
+      },
+      getEvents: consoleLog => {
+        if (!this.meta.eventsEnabled) console.warn('`app.metadata.getEvents()` was called, however `app.metadata.enableEvents([...options])` was not set first. No events will be returned.');
+        const events = this.asyncComputed.propertyEvents;
+        if (consoleLog) console.log(JSON.stringify(events, null, 2));
+        return events;
+      }
+    });
+
     const {
       canvases = [],
       customProps = [],
@@ -2440,6 +2748,12 @@ class StudioFramework {
       namespacedOptions = [],
       queryParams = {}
     } = opts;
+
+    if (window.MICapture?.isPreview) {
+      console.log('static status is true - static check has started');
+      window.RENDERED_STATICALLY = true;
+    }
+
     this.options = options;
     this.namespacedOptions = namespacedOptions;
     this.customProps = customProps;
@@ -2457,7 +2771,25 @@ class StudioFramework {
       return queryParams;
     });
     animation(this);
-    this.setup();
+
+    if (this.shouldPerformStaticCheck) {
+      const proxy = new Proxy(this, {
+        set(target, key, value) {
+          if (key in target && key !== 'currentGrouping') {
+            window.RENDERED_STATICALLY = false;
+            console.log(`static status is false - overridden StudioFramework class method `, key);
+          }
+
+          return Reflect.set(target, key, value);
+        }
+
+      });
+      this.setup.call(proxy);
+      if (this.shouldPerformStaticCheck) window.RENDERED_STATICALLY = areAttributesStatic(opts);
+    } else {
+      this.setup();
+    }
+
     this.setupOptions();
     this.setupNamespacedOptions();
     this.setupCustomTools();
@@ -2465,16 +2797,20 @@ class StudioFramework {
     this.setupModifiedProps();
   }
 
+  get shouldPerformStaticCheck() {
+    return window.MICapture?.isPreview && window.RENDERED_STATICALLY;
+  }
+
   triggerRerender() {
     if (this.appComponent) {
       this.appComponent.forceUpdate();
     }
   }
 
-  async isCurrentCanvas(canvas) {
+  async resolveConditionalDynamicProperty(model) {
     const {
       conditionalDynamicProperty
-    } = canvas;
+    } = model;
     if (!conditionalDynamicProperty) return [true, null];
     const {
       propertyGroupKey = '',
@@ -2491,7 +2827,7 @@ class StudioFramework {
     } = this;
 
     for (const canvas of canvases) {
-      const [result, error] = await this.isCurrentCanvas(canvas);
+      const [result, error] = await this.resolveConditionalDynamicProperty(canvas);
       if (result) return canvas;
 
       if (error) {
@@ -2561,28 +2897,41 @@ class StudioFramework {
   setup() {} // eslint-disable-next-line
 
 
-  setupTags(tags) {
-    return tags;
-  } // eslint-disable-next-line
+  async getCurrentTags(tags, canvas) {
+    const filteredTags = [];
 
+    for (const tag of tags) {
+      const [result, error] = await this.resolveConditionalDynamicProperty(tag);
 
-  async clickthrough(currentCanvas) {
-    let {
-      clickthrough_dynamic_property
-    } = this.options;
+      if (result) {
+        filteredTags.push(tag);
+      }
 
-    if (currentCanvas === null || currentCanvas === void 0 ? void 0 : currentCanvas.clickthroughDynamicProperty) {
-      clickthrough_dynamic_property = currentCanvas.clickthroughDynamicProperty;
+      if (error) {
+        const wrappedError = StudioErrorWrapper(error, `Skipped ${tag.label || tag.displayName} because conditional dynamic property threw an error`).setSourceType('tag-condition').setSourceDynamicProperty(tag.conditionalDynamicProperty).setEntryDynamicProperty(tag.conditionalDynamicProperty).setTag(tag).setCanvas(canvas);
+        console.warn(wrappedError);
+      }
     }
 
-    if (clickthrough_dynamic_property) {
+    return this.setupTags(filteredTags);
+  }
+
+  setupTags(tags) {
+    return tags;
+  }
+
+  async clickthrough(currentCanvas) {
+    const canvasCDP = currentCanvas?.clickthroughDynamicProperty;
+
+    if (canvasCDP) {
       const {
         context,
         propertyPath,
-        propertyValue
-      } = clickthrough_dynamic_property;
+        propertyValue,
+        propertyGroupKey
+      } = canvasCDP;
       if (propertyValue) return propertyValue;
-      const [result, error] = await this.getPropertyTuple(propertyPath, context);
+      const [result, error] = await this.getPropertyTuple(propertyGroupKey, propertyPath, context);
 
       if (error) {
         throw StudioErrorWrapper(error).setSourceType('dynamic-clickthrough').setCanvas(currentCanvas);
@@ -2617,12 +2966,12 @@ class StudioFramework {
       throw new Error('The result of `analyticsData` must be an object');
     }
 
-    CD.setExtraData(analyticsData);
+    CD__default['default'].setExtraData(analyticsData);
   }
 
   renderApp(targetElement, clickthroughURL, tags, dimensions, canvas) {
     return new Promise((resolve, reject) => {
-      ReactDOM.render( /*#__PURE__*/React.createElement(App, {
+      ReactDOM__default['default'].render( /*#__PURE__*/React__default['default'].createElement(App, {
         asyncComputed: this.asyncComputed,
         clickthroughURL: clickthroughURL,
         resolver: this.resolver,
@@ -2664,18 +3013,25 @@ class StudioFramework {
         const {
           propertyGroupKey,
           propertyPath,
+          propertyValue,
           context
         } = value;
-        this.setProperty(`options.${key}`, ({
-          getProperty
-        }) => {
-          return getProperty(propertyGroupKey, propertyPath, context);
-        });
-        this.setProperty(key, ({
-          getProperty
-        }) => {
-          return getProperty(propertyGroupKey, propertyPath, context);
-        });
+
+        if (propertyGroupKey === 'static') {
+          this.setProperty(`options.${key}`, propertyValue);
+          this.setProperty(key, propertyValue);
+        } else {
+          this.setProperty(`options.${key}`, ({
+            getProperty
+          }) => {
+            return getProperty(propertyGroupKey, propertyPath, context);
+          });
+          this.setProperty(key, ({
+            getProperty
+          }) => {
+            return getProperty(propertyGroupKey, propertyPath, context);
+          });
+        }
       } else {
         this.setProperty(`options.${key}`, value);
         this.setProperty(key, value);
@@ -2701,13 +3057,19 @@ class StudioFramework {
             const {
               propertyGroupKey,
               propertyPath,
+              propertyValue,
               context
             } = value;
-            this.setProperty(`options.${fieldName}`, ({
-              getProperty
-            }) => {
-              return getProperty(propertyGroupKey, propertyPath, context);
-            });
+
+            if (propertyGroupKey === 'static') {
+              this.setProperty(`options.${fieldName}`, propertyValue);
+            } else {
+              this.setProperty(`options.${fieldName}`, ({
+                getProperty
+              }) => {
+                return getProperty(propertyGroupKey, propertyPath, context);
+              });
+            }
           } else {
             this.setProperty(`options.${fieldName}`, value);
           }
@@ -2797,23 +3159,51 @@ class StudioFramework {
 
   handleRenderError(e) {
     console.error(e);
-    CD.throwError(e);
+    CD__default['default'].throwError(e);
     throw e;
   }
 
+  handleAndPreventFutureAnalyticsCalls(data) {
+    if (typeof data !== 'object') {
+      throw new Error('The result of `analyticsData` must be an object');
+    }
+
+    const format = window.MICapture?.format;
+    const analytics = document.querySelector('#mi-data');
+
+    if (format === 'html') {
+      const analyticsLength = analytics ? (analytics.getAttribute('data-mi-data') || '').length : 0;
+
+      if (analyticsLength > 500) {
+        analytics.setAttribute('data-mi-data', '{}');
+        console.log('extraData trying to be set exceeds 500 characters, setting extraData to be empty to avoid breaking crops');
+      }
+    } // Force a full overwrite
+
+
+    if (analytics) document.querySelector('#mi-data').remove();
+    CD__default['default'].setExtraData(data);
+
+    CD__default['default'].setExtraData = () => {
+      console.log('setExtraData call was prevented via handleAndPreventFutureAnalyticsCalls');
+    };
+
+    CD__default['default'].resume();
+  }
+
   async render(targetElement) {
+    if (window.MICapture?.isPreview) console.log('Preview Render');
     let currentCanvas;
 
     try {
-      var _currentCanvas;
-
-      CD.pause();
+      CD__default['default'].pause();
       currentCanvas = await this.getCurrentCanvas();
       const clickthroughURL = await this.handleClickthrough(currentCanvas);
-      const canvasTags = ((_currentCanvas = currentCanvas) === null || _currentCanvas === void 0 ? void 0 : _currentCanvas.tags) || [];
-      const tags = this.setupTags(canvasTags);
+      const canvasTags = currentCanvas?.tags || [];
+      const tags = await this.getCurrentTags(canvasTags, currentCanvas);
       const height = currentCanvas.height || this.options.height;
       const width = currentCanvas.width || this.options.width;
+      const format = window.MICapture?.format;
       const renderPromise = this.renderApp(targetElement, clickthroughURL, tags, {
         height,
         width
@@ -2825,12 +3215,23 @@ class StudioFramework {
         this.setupAnimation();
       }
 
-      cleanHTML(targetElement);
-      addBrowserContent(targetElement);
-      CD.resume();
+      if (this.shouldPerformStaticCheck) {
+        if (window.RENDERED_STATICALLY = isDocumentEligibleForStaticHandling(targetElement)) {
+          console.log('static status is true - static check has finished');
+        } else {
+          console.log('static status is false - static check has finished');
+        }
+      }
+
+      if (format === 'html') {
+        cleanHTML(targetElement);
+        addBrowserContent(targetElement);
+      }
     } catch (e) {
       const wrappedError = StudioErrorWrapper(e).setCanvas(currentCanvas);
       this.handleRenderError(wrappedError);
+    } finally {
+      CD__default['default'].resume();
     }
   }
 
@@ -3122,6 +3523,7 @@ if (window.MICapture && window.MICapture.captureAppLog) {
 }
 
 exports.App = App;
+exports.StudioError = StudioError;
 exports.StudioTool = StudioTool;
 exports.computedPath = computedPath;
 exports.default = StudioFramework;