@player-ui/storybook 0.4.0-next.9 → 0.4.1-next.0

package/dist/index.cjs.js

@@ -5,28 +5,53 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var addons = require('@storybook/addons');
 var storybookDarkMode = require('storybook-dark-mode');
-var dequal = require('dequal');
+var deepEqual = require('deep-equal');
 var Editor = require('@monaco-editor/react');
-var uuid = require('uuid');
-var table = require('@devtools-ds/table');
-var makeClass = require('clsx');
 var components = require('@storybook/components');
-var api = require('@storybook/api');
-var coreEvents = require('@storybook/core-events');
-var beaconPluginReact = require('@player-ui/beacon-plugin-react');
+var reactRedux = require('react-redux');
+var PlayerDSL = require('@player-tools/dsl');
+var toolkit = require('@reduxjs/toolkit');
+var reduxStateSync = require('redux-state-sync');
+var browser = require('esbuild-wasm/lib/browser');
 var react$1 = require('@player-ui/react');
-var react = require('@chakra-ui/react');
+var beaconPluginReact = require('@player-ui/beacon-plugin-react');
 var makeFlow = require('@player-ui/make-flow');
-var addonDocs = require('@storybook/addon-docs');
 var lzString = require('lz-string');
 var metricsPluginReact = require('@player-ui/metrics-plugin-react');
+var uuid = require('uuid');
 var player = require('@player-ui/player');
+var react = require('@chakra-ui/react');
+var table = require('@devtools-ds/table');
+var makeClass = require('clsx');
+var api = require('@storybook/api');
+var coreEvents = require('@storybook/core-events');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var addons__default = /*#__PURE__*/_interopDefaultLegacy(addons);
+var deepEqual__default = /*#__PURE__*/_interopDefaultLegacy(deepEqual);
 var Editor__default = /*#__PURE__*/_interopDefaultLegacy(Editor);
+var PlayerDSL__namespace = /*#__PURE__*/_interopNamespace(PlayerDSL);
 var makeClass__default = /*#__PURE__*/_interopDefaultLegacy(makeClass);
 
 const ADDON_ID = "web-player/addon";
@@ -35,325 +60,73 @@ const EVENT_PANEL_ID = `${ADDON_ID}/events-panel`;
 const FLOW_REFRESH_TOOL_ID = `${ADDON_ID}/flow-refresh-tool`;
 const RENDER_SELECT_TOOL_ID = `${ADDON_ID}/render-select-tool`;
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-function createEvent(base) {
-  return __spreadValues$2({
-    id: uuid.v4(),
-    time: Date.now()
-  }, base);
-}
-
-function subscribe(chan, eventName, callback) {
-  const handler = (payload) => {
-    callback(JSON.parse(payload));
-  };
-  chan.addListener(eventName, handler);
-  return () => {
-    chan.removeListener(eventName, handler);
-  };
-}
-function publish(chan, event) {
-  chan.emit(event.type, JSON.stringify(event));
-}
-function useStateActions(chan) {
-  return React__default["default"].useMemo(() => ({
-    addEvents: (events) => {
-      publish(chan, {
-        type: "@@player/event/add",
-        events
-      });
-    },
-    setMetrics: (metrics) => {
-      publish(chan, {
-        type: "@@player/metrics/set",
-        metrics
-      });
-    },
-    clearEvents: () => {
-      publish(chan, {
-        type: "@@player/event/clear"
-      });
-    },
-    setFlow: (flow) => {
-      publish(chan, {
-        type: "@@player/flow/set",
-        flow
-      });
-    },
-    resetFlow: () => {
-      publish(chan, { type: "@@player/flow/reset" });
-    },
-    setPlatform: (platform) => {
-      publish(chan, { type: "@@player/platform/set", platform });
-    }
-  }), [chan]);
-}
-function useEventState(chan) {
-  const [events, setEvents] = React__default["default"].useState([]);
-  React__default["default"].useEffect(() => {
-    const unsubAdd = subscribe(chan, "@@player/event/add", (evt) => setEvents((old) => [...old, ...evt.events]));
-    const unsubClear = subscribe(chan, "@@player/event/clear", () => {
-      setEvents([]);
-    });
-    return () => {
-      unsubAdd();
-      unsubClear();
-    };
-  }, [chan]);
-  return events;
-}
-function useFlowState(chan) {
-  const [flow, setFlow] = React__default["default"].useState();
-  React__default["default"].useEffect(() => {
-    return subscribe(chan, "@@player/flow/set", (evt) => {
-      setFlow(evt.flow);
-    });
-  }, [chan]);
-  return flow;
-}
-
-const EditorPanel = (props) => {
-  const { active } = props;
-  const darkMode = storybookDarkMode.useDarkMode();
-  const flow = useFlowState(props.api.getChannel());
-  const actions = useStateActions(props.api.getChannel());
-  const [editorValue, setEditorValue] = React__default["default"].useState(flow ? JSON.stringify(flow, null, 2) : "{}");
-  const updateTimerRef = React__default["default"].useRef(void 0);
-  function clearPending() {
-    if (updateTimerRef.current) {
-      clearTimeout(updateTimerRef.current);
-      updateTimerRef.current = void 0;
-    }
-  }
-  React__default["default"].useEffect(() => {
-    if (!active) {
-      return;
-    }
-    try {
-      if (editorValue) {
-        const parsed = JSON.parse(editorValue);
-        if (dequal.dequal(flow, parsed)) {
-          return;
-        }
-      }
-    } catch (e) {
-    }
-    setEditorValue(JSON.stringify(flow, null, 2));
-  }, [flow, active]);
-  if (!active) {
-    return null;
-  }
-  const onChange = (val) => {
-    clearPending();
-    setEditorValue(val != null ? val : "");
-    try {
-      if (val) {
-        const parsed = JSON.parse(val);
-        if (!dequal.dequal(parsed, flow)) {
-          updateTimerRef.current = setTimeout(() => {
-            if (active) {
-              actions.setFlow(parsed);
-            }
-          }, 1e3);
-        }
+var __async$2 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
       }
-    } catch (e) {
-    }
-  };
-  return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(Editor__default["default"], {
-    theme: darkMode ? "vs-dark" : "light",
-    value: editorValue,
-    language: "json",
-    options: {
-      formatOnPaste: true
-    },
-    onChange
-  }));
-};
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = "\n.events_header__1bcc1085 td {\n  width: 200px;\n}\n\n.events_body__1bcc1085 td {\n}\n";
-var modules_2563542d = {"header":"events_header__1bcc1085","body":"events_body__1bcc1085"};
-n(css,{});
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-const ExtraCells = (event) => {
-  var _a, _b;
-  if (event.type === "log") {
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, event.severity), /* @__PURE__ */ React__default["default"].createElement("td", null, event.message.map((a) => JSON.stringify(a)).join(" ")));
-  }
-  if (event.type === "dataChange") {
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, event.binding), /* @__PURE__ */ React__default["default"].createElement("td", null, `${JSON.stringify(event.from)} \u279C ${JSON.stringify(event.to)}`));
-  }
-  if (event.type === "stateChange") {
-    let name = event.state;
-    if (event.state === "completed") {
-      name = `${name} (${event.error ? "error" : "success"})`;
-    }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, name), /* @__PURE__ */ React__default["default"].createElement("td", null, (_b = (_a = event.outcome) != null ? _a : event.error) != null ? _b : ""));
-  }
-  if (event.type === "metric") {
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, event.metricType), /* @__PURE__ */ React__default["default"].createElement("td", null, event.message));
-  }
-  return null;
-};
-const EventsPanel = (props) => {
-  const events = useEventState(props.api.getChannel());
-  const darkMode = storybookDarkMode.useDarkMode();
-  if (!props.active) {
-    return null;
-  }
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: makeClass__default["default"](modules_2563542d.wrapper, {
-      [modules_2563542d.dark]: darkMode
-    })
-  }, /* @__PURE__ */ React__default["default"].createElement(table.Table, {
-    colorScheme: darkMode ? "dark" : "light"
-  }, /* @__PURE__ */ React__default["default"].createElement(table.Head, {
-    className: modules_2563542d.header
-  }, /* @__PURE__ */ React__default["default"].createElement(table.Row, null, /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null, "Time"), /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null, "Type"), /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null), /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null))), /* @__PURE__ */ React__default["default"].createElement(table.Body, {
-    className: modules_2563542d.body
-  }, events.map((evt) => /* @__PURE__ */ React__default["default"].createElement(table.Row, {
-    key: evt.id
-  }, /* @__PURE__ */ React__default["default"].createElement(table.Cell, null, evt.time), /* @__PURE__ */ React__default["default"].createElement(table.Cell, null, evt.type), /* @__PURE__ */ React__default["default"].createElement(ExtraCells, __spreadValues$1({}, evt)))))));
-};
-
-const FlowRefresh = ({ api }) => {
-  const actions = useStateActions(api.getChannel());
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(components.Separator, null), /* @__PURE__ */ React__default["default"].createElement(components.IconButton, {
-    title: "Reset the current flow",
-    onClick: () => {
-      actions.resetFlow();
-    }
-  }, /* @__PURE__ */ React__default["default"].createElement(components.Icons, {
-    icon: "sync"
-  })));
-};
-
-const RenderSelection = ({ api: api$1 }) => {
-  const params = api.useParameter("appetizeTokens", {});
-  const actions = useStateActions(api$1.getChannel());
-  const [selectedPlatform, setPlatform] = React__default["default"].useState("web");
-  React__default["default"].useEffect(() => {
-    const listener = () => {
-      setPlatform("web");
     };
-    api$1.getChannel().addListener(coreEvents.STORY_CHANGED, listener);
-    return () => {
-      api$1.getChannel().removeListener(coreEvents.STORY_CHANGED, listener);
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
     };
-  }, [api$1]);
-  const mobilePlatforms = Object.keys(params);
-  if (mobilePlatforms.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React__default["default"].createElement(components.WithTooltip, {
-    closeOnClick: true,
-    placement: "top",
-    trigger: "click",
-    tooltip: ({ onHide }) => /* @__PURE__ */ React__default["default"].createElement(components.TooltipLinkList, {
-      links: ["web", ...mobilePlatforms].map((platform) => ({
-        id: platform,
-        title: platform,
-        onClick: () => {
-          setPlatform(platform);
-          actions.setPlatform(platform);
-          onHide();
-        },
-        value: platform,
-        active: platform === selectedPlatform
-      }))
-    })
-  }, /* @__PURE__ */ React__default["default"].createElement(components.IconButton, {
-    title: "Change the render target"
-  }, /* @__PURE__ */ React__default["default"].createElement(components.Icons, {
-    icon: selectedPlatform === "web" ? "browser" : "mobile"
-  })));
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
 };
-
-function register() {
-  addons__default["default"].register(ADDON_ID, (api) => {
-    addons__default["default"].addPanel(EVENT_PANEL_ID, {
-      title: "Events",
-      render: ({ active, key }) => /* @__PURE__ */ React__default["default"].createElement(EventsPanel, {
-        key,
-        api,
-        active: Boolean(active)
-      })
-    });
-    addons__default["default"].addPanel(FLOW_PANEL_ID, {
-      title: "Flow",
-      render: ({ active, key }) => /* @__PURE__ */ React__default["default"].createElement(EditorPanel, {
-        key,
-        api,
-        active: Boolean(active)
-      })
-    });
-    addons__default["default"].add(FLOW_REFRESH_TOOL_ID, {
-      title: "Refresh Flow",
-      type: addons.types.TOOL,
-      render: () => /* @__PURE__ */ React__default["default"].createElement(FlowRefresh, {
-        api
-      })
-    });
-    addons__default["default"].add(RENDER_SELECT_TOOL_ID, {
-      title: "Render Selection",
-      type: addons.types.TOOL,
-      render: () => /* @__PURE__ */ React__default["default"].createElement(RenderSelection, {
-        api
-      })
+const setup = (() => __async$2(undefined, null, function* () {
+  try {
+    yield browser.initialize({
+      worker: true,
+      wasmURL: "https://unpkg.com/esbuild-wasm@0.14.23/esbuild.wasm"
     });
-  });
-}
-
-function useEditorFlow(initialFlow) {
-  const stateActions = useStateActions(addons__default["default"].getChannel());
-  const flow = useFlowState(addons__default["default"].getChannel());
-  const docsContext = React__default["default"].useContext(addonDocs.DocsContext);
-  React__default["default"].useEffect(() => {
-    stateActions.setFlow(initialFlow);
-  }, [initialFlow]);
-  React__default["default"].useEffect(() => {
-    if (!flow) {
-      stateActions.setFlow(initialFlow);
-    }
-  }, [flow]);
-  if (docsContext.id) {
-    return initialFlow;
+  } catch (e) {
   }
-  return flow != null ? flow : initialFlow;
-}
+}))();
+const execute = (code, options) => __async$2(undefined, null, function* () {
+  const { additionalModules = {} } = options != null ? options : {};
+  yield setup;
+  const result = yield browser.transform(code, {
+    loader: "tsx",
+    format: "cjs",
+    tsconfigRaw: {
+      compilerOptions: {}
+    }
+  });
+  const mods = __spreadValues$4({
+    react: React__namespace,
+    "@player-tools/dsl": PlayerDSL__namespace
+  }, additionalModules);
+  const mod = eval(`(function(require, module){ ${result.code}})`);
+  const exp = {};
+  const req = (name) => {
+    return mods[name];
+  };
+  mod(req, exp);
+  return exp.exports;
+});
 
 const DEVICE_HEIGHT = {
   iphonexs: 845
@@ -390,13 +163,35 @@ const Appetize = (props) => {
   });
 };
 
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+function createEvent(base) {
+  return __spreadValues$3({
+    id: uuid.v4(),
+    time: Date.now()
+  }, base);
+}
+
 class StorybookPlayerPlugin {
-  constructor(actions) {
+  constructor(dispatch) {
     this.name = "Storybook";
-    this.actions = actions;
+    this.dispatch = dispatch;
     this.metricsPlugin = new metricsPluginReact.MetricsPlugin({
       onUpdate: (metrics) => {
-        actions.setMetrics(metrics);
       },
       onRenderEnd: (timing) => {
         this.onMetricChange(timing, "render");
@@ -412,7 +207,7 @@ class StorybookPlayerPlugin {
   applyReact(rp) {
     rp.registerPlugin(this.metricsPlugin);
     rp.player.hooks.dataController.tap(this.name, (dc) => {
-      this.actions.clearEvents();
+      this.dispatch(clearEvents());
       dc.hooks.onUpdate.tap(this.name, (dataUpdates) => {
         const events = dataUpdates.map((dataUpdate) => createEvent({
           type: "dataChange",
@@ -420,42 +215,42 @@ class StorybookPlayerPlugin {
           from: dataUpdate.oldValue,
           to: dataUpdate.newValue
         }));
-        this.actions.addEvents(events);
+        this.dispatch(addEvents(events));
       });
     });
     rp.player.logger.hooks.log.tap(this.name, (severity, data) => {
-      this.actions.addEvents([
+      this.dispatch(addEvents([
         createEvent({
           type: "log",
           message: data,
           severity
         })
-      ]);
+      ]));
     });
     rp.player.hooks.state.tap(this.name, (newState) => {
       if ("error" in newState) {
-        this.actions.addEvents([
+        this.dispatch(addEvents([
           createEvent({
             type: "stateChange",
             state: newState.status,
             error: newState.error.message
           })
-        ]);
+        ]));
       } else if (newState.status === "completed") {
-        this.actions.addEvents([
+        this.dispatch(addEvents([
           createEvent({
             type: "stateChange",
             state: newState.status,
             outcome: newState.endState.outcome
           })
-        ]);
+        ]));
       } else {
-        this.actions.addEvents([
+        this.dispatch(addEvents([
           createEvent({
             type: "stateChange",
             state: newState.status
           })
-        ]);
+        ]));
       }
     });
   }
@@ -463,13 +258,13 @@ class StorybookPlayerPlugin {
     if (!timing.completed) {
       return;
     }
-    this.actions.addEvents([
+    this.dispatch(addEvents([
       createEvent({
         type: "metric",
         metricType,
         message: `Duration: ${timing.duration.toFixed(0)} ms`
       })
-    ]);
+    ]));
   }
 }
 
@@ -502,38 +297,57 @@ const PlayerFlowSummary = (props) => {
   }, "Reset"));
 };
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+const useFlowSetListener = (chan) => {
+  const dispatch = reactRedux.useDispatch();
+  React__default["default"].useEffect(() => {
+    const handler = (payload) => {
+      try {
+        const { flow } = JSON.parse(payload);
+        dispatch(setJSONEditorValue({ value: flow }));
+      } catch (e) {
+        console.error("Unable to set JSON payload from storybook event", e);
+      }
+    };
+    const eventName = "@@player/flow/set";
+    chan.addListener(eventName, handler);
+    return () => {
+      chan.removeListener(eventName, handler);
+    };
+  }, [chan]);
+};
+
+var __defProp$2 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-var __async = (__this, __arguments, generator) => {
+var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
       try {
@@ -554,6 +368,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 const ReactPlayerPluginContext = React__default["default"].createContext({ plugins: [] });
+const DSLPluginContext = React__default["default"].createContext({});
 const PlayerRenderContext = React__default["default"].createContext({
   platform: "web"
 });
@@ -561,38 +376,30 @@ const StorybookControlsContext = React__default["default"].createContext({
   controls: {}
 });
 const PlayerOptionsContext = React__default["default"].createContext({ options: {} });
-const LocalPlayerStory = (props) => {
-  var _a, _b;
-  let flow = useEditorFlow(props.flow);
-  const renderContext = React__default["default"].useContext(PlayerRenderContext);
-  const pluginContext = React__default["default"].useContext(ReactPlayerPluginContext);
-  const controlsContext = React__default["default"].useContext(StorybookControlsContext);
-  const optionsContext = React__default["default"].useContext(PlayerOptionsContext);
-  const options = __spreadValues({}, optionsContext == null ? void 0 : optionsContext.options);
-  const stateActions = useStateActions(addons__default["default"].getChannel());
-  const plugins = (_b = (_a = props.webPlugins) != null ? _a : pluginContext == null ? void 0 : pluginContext.plugins) != null ? _b : [];
+const PlayerJsonEditorStory = () => {
+  const jsonEditorValue = useJSONEditorValue();
+  useFlowSetListener(addons__default["default"].getChannel());
+  const { plugins } = React__default["default"].useContext(ReactPlayerPluginContext);
+  const dispatch = reactRedux.useDispatch();
   const [playerState, setPlayerState] = React__default["default"].useState("not-started");
   const [trackedBeacons, setTrackedBeacons] = React__default["default"].useState([]);
-  const rp = React__default["default"].useMemo(() => {
-    var _a2;
+  const wp = React__default["default"].useMemo(() => {
     const beaconPlugin = new beaconPluginReact.BeaconPlugin({
       callback: (beacon) => {
         setTrackedBeacons((t) => [...t, beacon]);
       }
     });
-    return new react$1.ReactPlayer(__spreadProps(__spreadValues({}, options), {
-      plugins: [
-        new StorybookPlayerPlugin(stateActions),
-        beaconPlugin,
-        ...plugins,
-        ...(_a2 = options == null ? void 0 : options.plugins) != null ? _a2 : []
-      ]
-    }));
-  }, [plugins, flow]);
+    return new react$1.ReactPlayer({
+      plugins: [new StorybookPlayerPlugin(dispatch), beaconPlugin, ...plugins]
+    });
+  }, [dispatch, plugins]);
   const startFlow = () => {
+    if ((jsonEditorValue == null ? void 0 : jsonEditorValue.state) !== "loaded") {
+      return;
+    }
     setPlayerState("in-progress");
     setTrackedBeacons([]);
-    rp.start(flow).then(() => {
+    wp.start(jsonEditorValue.value).then(() => {
       setPlayerState("completed");
     }).catch((e) => {
       console.error("Error starting flow", e);
@@ -601,31 +408,8 @@ const LocalPlayerStory = (props) => {
   };
   React__default["default"].useEffect(() => {
     startFlow();
-  }, [rp]);
-  React__default["default"].useEffect(() => {
-    var _a2;
-    if (controlsContext) {
-      flow = __spreadProps(__spreadValues({}, flow), {
-        data: __spreadValues(__spreadValues({}, (_a2 = flow.data) != null ? _a2 : {}), controlsContext)
-      });
-      stateActions.setFlow(flow);
-    }
-  }, [controlsContext]);
-  React__default["default"].useEffect(() => {
-    return subscribe(addons__default["default"].getChannel(), "@@player/flow/reset", () => {
-      startFlow();
-    });
-  }, [rp]);
-  if (renderContext.platform !== "web" && renderContext.token) {
-    return /* @__PURE__ */ React__default["default"].createElement(Appetize, {
-      flow,
-      platform: renderContext.platform,
-      token: renderContext.token,
-      baseUrl: renderContext.baseUrl,
-      osVersions: renderContext.appetizeVersions
-    });
-  }
-  const currentState = rp.player.getState();
+  }, [wp, jsonEditorValue]);
+  const currentState = wp.player.getState();
   if (playerState === "completed" && currentState.status === "completed") {
     return /* @__PURE__ */ React__default["default"].createElement(PlayerFlowSummary, {
       reset: startFlow,
@@ -639,15 +423,44 @@ const LocalPlayerStory = (props) => {
       error: currentState.error
     });
   }
-  return /* @__PURE__ */ React__default["default"].createElement(rp.Component, null);
+  return /* @__PURE__ */ React__default["default"].createElement(wp.Component, null);
+};
+const LocalPlayerStory = (props) => {
+  var _a, _b;
+  const flow = useInitialJsonEditorValue(props.mock);
+  const platform = reactRedux.useSelector((state) => state.platform.platform);
+  const renderContext = React__default["default"].useContext(PlayerRenderContext);
+  const webPlayerContext = React__default["default"].useContext(ReactPlayerPluginContext);
+  const { options } = React__default["default"].useContext(PlayerOptionsContext);
+  if (platform === "web") {
+    return /* @__PURE__ */ React__default["default"].createElement(ReactPlayerPluginContext.Provider, {
+      value: props.webPlugins || (options == null ? void 0 : options.plugins) ? __spreadProps$1(__spreadValues$2({}, webPlayerContext), {
+        plugins: [
+          ...webPlayerContext.plugins,
+          ...(_a = props.webPlugins) != null ? _a : [],
+          ...(_b = options == null ? void 0 : options.plugins) != null ? _b : []
+        ]
+      }) : webPlayerContext
+    }, /* @__PURE__ */ React__default["default"].createElement(PlayerJsonEditorStory, null));
+  }
+  if (renderContext.platform !== "web" && renderContext.token && (flow == null ? void 0 : flow.state) === "loaded") {
+    return /* @__PURE__ */ React__default["default"].createElement(Appetize, {
+      flow: flow.value,
+      platform: renderContext.platform,
+      token: renderContext.token,
+      baseUrl: renderContext.baseUrl,
+      osVersions: renderContext.appetizeVersions
+    });
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(components.Placeholder, null, "Unable to render flow");
 };
-function wrapInLazy(Component, flowFactory, other) {
-  const asPlayer = () => __async(this, null, function* () {
-    const mock = typeof flowFactory === "function" ? yield flowFactory() : flowFactory;
+function wrapInLazy(Component, mockFactory, other) {
+  const asPlayer = () => __async$1(this, null, function* () {
+    const mock = typeof mockFactory === "function" ? yield mockFactory() : mockFactory;
     const Comp = () => {
-      const flow = __spreadValues(__spreadValues({}, makeFlow.makeFlow("default" in mock ? mock.default : mock)), other != null ? other : {});
+      const flow = __spreadValues$2(__spreadValues$2({}, makeFlow.makeFlow("default" in mock ? mock.default : mock)), other != null ? other : {});
       return /* @__PURE__ */ React__default["default"].createElement(Component, {
-        flow
+        mock: flow
       });
     };
     return {
@@ -658,44 +471,621 @@ function wrapInLazy(Component, flowFactory, other) {
 }
 const PlayerStory = (props) => {
   const _a = props, { flow, storybookControls, options } = _a, other = __objRest(_a, ["flow", "storybookControls", "options"]);
+  useContentKind("json");
   const MockComp = React__default["default"].useMemo(() => wrapInLazy(LocalPlayerStory, flow, other), []);
-  return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.ChakraProvider, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Suspense, {
-    fallback: /* @__PURE__ */ React__default["default"].createElement(react.Spinner, null)
+  return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: "Loading..."
   }, /* @__PURE__ */ React__default["default"].createElement(StorybookControlsContext.Provider, {
-    value: __spreadValues({}, storybookControls)
+    value: __spreadValues$2({}, storybookControls)
   }, /* @__PURE__ */ React__default["default"].createElement(PlayerOptionsContext.Provider, {
     value: {
       options
     }
-  }, /* @__PURE__ */ React__default["default"].createElement(MockComp, null)), " "))));
+  }, /* @__PURE__ */ React__default["default"].createElement(MockComp, null)))));
+};
+const DSLLocalPlayerStory = (props) => {
+  const dslContext = React__default["default"].useContext(DSLPluginContext);
+  useContentKind("dsl");
+  useCompiledEditorValue(props.dslContent, {
+    additionalModules: dslContext == null ? void 0 : dslContext.additionalModules
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(PlayerJsonEditorStory, null);
+};
+const DSLPlayerStory = (props) => {
+  const _a = props, { dslContent } = _a, other = __objRest(_a, ["dslContent"]);
+  const AsLazyComp = React__default["default"].useMemo(() => {
+    const loadFlow = () => __async$1(undefined, null, function* () {
+      let content = yield dslContent();
+      if (typeof content === "object") {
+        content = content.default;
+      }
+      return {
+        default: () => {
+          return /* @__PURE__ */ React__default["default"].createElement(DSLLocalPlayerStory, __spreadValues$2({
+            dslContent: content
+          }, other));
+        }
+      };
+    });
+    return React__default["default"].lazy(loadFlow);
+  }, [dslContent]);
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: "Loading..."
+  }, /* @__PURE__ */ React__default["default"].createElement(AsLazyComp, null));
 };
 
-const PlayerDecorator = (story, ctx) => {
+function createDSLStory(loader, options) {
+  const Comp = () => /* @__PURE__ */ React__default["default"].createElement(DSLPlayerStory, {
+    dslContent: loader
+  });
+  if (options == null ? void 0 : options.args) {
+    Comp.args = options.args;
+  }
+  return Comp;
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const compiler = new PlayerDSL.DSLCompiler();
+const resetEditor = toolkit.createAction("@@player/flow/reset");
+const setDSLEditorValue = toolkit.createAction("setDSLEditorValue");
+const setCompiledEditorResult = toolkit.createAction("setCompiledEditorResult");
+const setEditorContentType = toolkit.createAction("setEditorContentType");
+const setJSONEditorValue = toolkit.createAction("setJSONEditorValue");
+const updateAndCompileDSLFlow = toolkit.createAsyncThunk("editor/dsl/compile", (context, thunkAPI) => __async(undefined, null, function* () {
   var _a;
-  const playerParams = ctx.parameters;
-  const [selectedPlatform, setPlatform] = React__default["default"].useState("web");
-  React__default["default"].useEffect(() => {
-    return subscribe(addons__default["default"].getChannel(), "@@player/platform/set", (evt) => {
-      setPlatform(evt.platform);
+  const content = (_a = thunkAPI.getState().editor.dsl) == null ? void 0 : _a.value;
+  if (!content) {
+    throw new Error("No content to compile");
+  }
+  try {
+    const transpiledResult = yield execute(content, {
+      additionalModules: context.additionalModules
     });
+    if (transpiledResult) {
+      const compiled = yield compiler.serialize(transpiledResult.default);
+      thunkAPI.dispatch(setCompiledEditorResult({ result: compiled.value }));
+    }
+  } catch (e) {
+    thunkAPI.dispatch(setCompiledEditorResult({
+      errors: {
+        transpileErrors: [
+          {
+            message: e.message
+          }
+        ]
+      }
+    }));
+  }
+}));
+const setPlatform = toolkit.createAction("@@player/platform/set");
+const unsetPlatform = toolkit.createAction("@@player/platform/unset");
+const platformReducer = toolkit.createReducer({
+  platform: "web"
+}, (builder) => {
+  builder.addCase(setPlatform, (state, action) => {
+    state.platform = action.payload.platform;
+  });
+  builder.addCase(unsetPlatform, (state) => {
+    state.platform = void 0;
+  });
+});
+const setCompilationErrors = toolkit.createAction("setCompilationErrors");
+const flowEditorReducer = toolkit.createReducer({
+  json: { state: "initial" },
+  dsl: { state: "initial" },
+  contentType: void 0
+}, (builder) => {
+  builder.addCase(setEditorContentType, (state, action) => {
+    state.contentType = action.payload.contentType;
+    if (action.payload.contentType === "json") {
+      state.dsl = { state: "initial" };
+    }
+  });
+  builder.addCase(setDSLEditorValue, (state, action) => {
+    state.dsl = {
+      state: "loaded",
+      value: action.payload.value,
+      needsCompile: true,
+      compilationErrors: void 0
+    };
+  });
+  builder.addCase(setCompilationErrors, (state, action) => {
+    var _a;
+    if (((_a = state.dsl) == null ? void 0 : _a.state) === "loaded") {
+      state.dsl.compilationErrors = action.payload;
+    }
+  });
+  builder.addCase(updateAndCompileDSLFlow.pending, (state) => {
+    state.json = { state: "loading" };
+  });
+  builder.addCase(resetEditor, (state) => {
+    state.json = { state: "initial" };
+    state.dsl = { state: "initial" };
+  });
+  builder.addCase(updateAndCompileDSLFlow.rejected, (state) => {
+    state.dsl = { state: "error" };
+  });
+  builder.addCase(setCompiledEditorResult, (state, action) => {
+    var _a;
+    if (((_a = state.dsl) == null ? void 0 : _a.state) === "loaded") {
+      state.dsl.needsCompile = false;
+      state.dsl.compilationErrors = action.payload.errors;
+    }
+    if (action.payload.result) {
+      state.json = { state: "loaded", value: action.payload.result };
+    }
+  });
+  builder.addCase(setJSONEditorValue, (state, action) => {
+    state.json = { state: "loaded", value: action.payload.value };
+  });
+});
+const addEvents = toolkit.createAction("@@player/events/add");
+const clearEvents = toolkit.createAction("@@player/events/clear");
+const eventsReducer = toolkit.createReducer([], (builder) => {
+  builder.addCase(addEvents, (state, action) => {
+    state.push(...action.payload);
+  });
+  builder.addCase(clearEvents, () => {
+    return [];
+  });
+});
+const STATE_SYNC_CHANNEL_NAME = (() => {
+  if (sessionStorage.getItem("player:channel")) {
+    return sessionStorage.getItem("player:channel");
+  }
+  const channel = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+  sessionStorage.setItem("player:channel", channel);
+  return channel;
+})();
+const store = toolkit.configureStore({
+  reducer: {
+    editor: flowEditorReducer,
+    platform: platformReducer,
+    events: eventsReducer
+  },
+  middleware: (getDefaultMiddleware) => {
+    return [
+      ...getDefaultMiddleware(),
+      reduxStateSync.createStateSyncMiddleware({
+        channel: STATE_SYNC_CHANNEL_NAME,
+        blacklist: [
+          "editor/dsl/compile/pending",
+          "editor/dsl/compile/fulfilled",
+          "editor/dsl/compile/rejected"
+        ]
+      })
+    ];
+  },
+  devTools: true
+});
+reduxStateSync.initStateWithPrevTab(store);
+const StateProvider = (props) => {
+  return /* @__PURE__ */ React__default["default"].createElement(reactRedux.Provider, __spreadProps(__spreadValues$1({}, props), {
+    store
+  }));
+};
+const useJSONEditorValue = () => {
+  return reactRedux.useSelector((state) => {
+    return state.editor.json;
+  });
+};
+const useDSLEditorValue = () => {
+  const dslEditorValue = reactRedux.useSelector((state) => {
+    return state.editor.dsl;
+  });
+  return dslEditorValue;
+};
+const useContentKind = (contentTypeToSet) => {
+  const dispatch = reactRedux.useDispatch();
+  const contentType = reactRedux.useSelector((state) => {
+    return state.editor.contentType;
+  });
+  React__default["default"].useEffect(() => {
+    if (contentTypeToSet && contentTypeToSet !== contentType) {
+      dispatch(setEditorContentType({
+        contentType: contentTypeToSet
+      }));
+    }
+  }, [contentType, contentTypeToSet, dispatch]);
+  return contentType;
+};
+const useCompiledEditorValue = (initialValue, options) => {
+  useContentKind("dsl");
+  const dispatch = reactRedux.useDispatch();
+  const dslEditorValue = reactRedux.useSelector((s) => {
+    return s.editor.dsl;
+  });
+  React__default["default"].useEffect(() => {
+    store.dispatch(setDSLEditorValue({ value: initialValue }));
+  }, []);
+  React__default["default"].useEffect(() => {
+    if ((dslEditorValue == null ? void 0 : dslEditorValue.state) === "initial") {
+      dispatch(setDSLEditorValue({ value: initialValue }));
+    }
+  }, [dslEditorValue, initialValue]);
+  React__default["default"].useEffect(() => {
+    if ((dslEditorValue == null ? void 0 : dslEditorValue.state) === "loaded" && dslEditorValue.needsCompile) {
+      dispatch(updateAndCompileDSLFlow({
+        additionalModules: options == null ? void 0 : options.additionalModules
+      }));
+    }
+  }, [dslEditorValue, options == null ? void 0 : options.additionalModules]);
+  return dslEditorValue;
+};
+const useInitialJsonEditorValue = (initialValue) => {
+  const dispatch = reactRedux.useDispatch();
+  useContentKind("json");
+  const jsonEditorValue = reactRedux.useSelector((s) => {
+    return s.editor.json;
+  });
+  React__default["default"].useEffect(() => {
+    store.dispatch(setJSONEditorValue({ value: initialValue }));
   }, []);
+  React__default["default"].useEffect(() => {
+    if ((jsonEditorValue == null ? void 0 : jsonEditorValue.state) === "initial") {
+      dispatch(setJSONEditorValue({ value: initialValue }));
+    }
+  }, [jsonEditorValue, initialValue]);
+  return jsonEditorValue;
+};
+
+Editor.loader.init().then((m) => {
+  m.languages.typescript.typescriptDefaults.setCompilerOptions({
+    jsx: m.languages.typescript.JsxEmit.React
+  });
+});
+const JSONEditorPanel = () => {
+  const darkMode = storybookDarkMode.useDarkMode();
+  const jsonEditorValue = useJSONEditorValue();
+  const jsonValueAsString = (jsonEditorValue == null ? void 0 : jsonEditorValue.state) === "loaded" ? JSON.stringify(jsonEditorValue.value, null, 2) : "";
+  const dispatch = reactRedux.useDispatch();
+  const onChange = (val) => {
+    if (!val || (jsonEditorValue == null ? void 0 : jsonEditorValue.state) !== "loaded") {
+      return;
+    }
+    try {
+      const parsed = JSON.parse(val);
+      if (!deepEqual__default["default"](parsed, jsonEditorValue.value)) {
+        dispatch(setJSONEditorValue({
+          value: parsed
+        }));
+      }
+    } catch (e) {
+    }
+  };
+  return /* @__PURE__ */ React__default["default"].createElement(Editor__default["default"], {
+    theme: darkMode ? "dark" : "light",
+    value: jsonValueAsString,
+    language: "json",
+    options: {
+      formatOnPaste: true
+    },
+    onChange: (val) => {
+      onChange(val);
+    }
+  });
+};
+const CompileErrors = ({
+  errors
+}) => {
+  var _a, _b;
+  if ((errors.compileErrors === void 0 || errors.compileErrors.length === 0) && (errors.transpileErrors === void 0 || errors.transpileErrors.length === 0)) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      zIndex: 100,
+      background: "white",
+      padding: "8px",
+      border: "1px solid red",
+      color: "red",
+      width: "100%"
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement("h3", null, "Errors"), (_a = errors.compileErrors) == null ? void 0 : _a.map((e) => /* @__PURE__ */ React__default["default"].createElement("pre", {
+    key: e.message
+  }, e.message)), (_b = errors.transpileErrors) == null ? void 0 : _b.map((e) => /* @__PURE__ */ React__default["default"].createElement("pre", {
+    key: e.message
+  }, e.message)));
+};
+const DSLEditorPanel = () => {
+  const darkMode = storybookDarkMode.useDarkMode();
+  const jsonEditorValue = useJSONEditorValue();
+  const dslEditorValue = useDSLEditorValue();
+  const dispatch = reactRedux.useDispatch();
+  const editorValue = (dslEditorValue == null ? void 0 : dslEditorValue.state) === "loaded" ? dslEditorValue.value : "";
+  const flow = (jsonEditorValue == null ? void 0 : jsonEditorValue.state) === "loaded" ? jsonEditorValue.value : "";
+  const compilationErrors = (dslEditorValue == null ? void 0 : dslEditorValue.state) === "loaded" ? dslEditorValue.compilationErrors : void 0;
+  const [selected, setSelected] = React__default["default"].useState("tsx");
+  const onChange = (val) => {
+    if (val) {
+      dispatch(setDSLEditorValue({
+        value: val
+      }));
+    }
+  };
+  return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(components.Tabs, {
+    selected,
+    actions: {
+      onSelect: (id) => {
+        setSelected(id);
+      }
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    id: "tsx",
+    title: "TSX"
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    id: "json",
+    title: "JSON (read-only)"
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: {
+      height: "calc(100% - 60px)"
+    }
+  }, selected === "tsx" && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, compilationErrors && /* @__PURE__ */ React__default["default"].createElement(CompileErrors, {
+    errors: compilationErrors
+  }), /* @__PURE__ */ React__default["default"].createElement(Editor__default["default"], {
+    theme: darkMode ? "dark" : "light",
+    value: editorValue,
+    language: "typescript",
+    onChange: (val) => {
+      onChange(val);
+    }
+  })), selected === "json" && /* @__PURE__ */ React__default["default"].createElement(Editor__default["default"], {
+    options: {
+      readOnly: true
+    },
+    theme: darkMode ? "dark" : "light",
+    value: flow ? JSON.stringify(flow, null, 2) : "{}",
+    language: "json"
+  })));
+};
+const EditorPanel = (props) => {
+  const contentType = useContentKind();
+  if (!props.active) {
+    return null;
+  }
+  if (contentType === "dsl") {
+    return /* @__PURE__ */ React__default["default"].createElement(DSLEditorPanel, null);
+  }
+  if (contentType === "json") {
+    return /* @__PURE__ */ React__default["default"].createElement(JSONEditorPanel, null);
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(components.Placeholder, null, "This story is not configured to allow flow edits.");
+};
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = "\n.events_header__1bcc1085 td {\n  width: 200px;\n}\n\n.events_body__1bcc1085 td {\n}\n";
+var modules_2563542d = {"header":"events_header__1bcc1085","body":"events_body__1bcc1085"};
+n(css,{});
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const ExtraCells = (event) => {
+  var _a, _b;
+  if (event.type === "log") {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, event.severity), /* @__PURE__ */ React__default["default"].createElement("td", null, event.message.map((a) => JSON.stringify(a)).join(" ")));
+  }
+  if (event.type === "dataChange") {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, event.binding), /* @__PURE__ */ React__default["default"].createElement("td", null, `${JSON.stringify(event.from)} \u279C ${JSON.stringify(event.to)}`));
+  }
+  if (event.type === "stateChange") {
+    let name = event.state;
+    if (event.state === "completed") {
+      name = `${name} (${event.error ? "error" : "success"})`;
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, name), /* @__PURE__ */ React__default["default"].createElement("td", null, (_b = (_a = event.outcome) != null ? _a : event.error) != null ? _b : ""));
+  }
+  if (event.type === "metric") {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("td", null, event.metricType), /* @__PURE__ */ React__default["default"].createElement("td", null, event.message));
+  }
+  return null;
+};
+const EventsPanel = (props) => {
+  const events = reactRedux.useSelector((state) => state.events);
+  const darkMode = storybookDarkMode.useDarkMode();
+  const contentType = useContentKind();
+  if (!props.active) {
+    return null;
+  }
+  if (contentType === void 0) {
+    return /* @__PURE__ */ React__default["default"].createElement(components.Placeholder, null, "This story is not configured to receive Player events.");
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: makeClass__default["default"](modules_2563542d.wrapper, {
+      [modules_2563542d.dark]: darkMode
+    })
+  }, /* @__PURE__ */ React__default["default"].createElement(table.Table, {
+    colorScheme: darkMode ? "dark" : "light"
+  }, /* @__PURE__ */ React__default["default"].createElement(table.Head, {
+    className: modules_2563542d.header
+  }, /* @__PURE__ */ React__default["default"].createElement(table.Row, null, /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null, "Time"), /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null, "Type"), /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null), /* @__PURE__ */ React__default["default"].createElement(table.HeadCell, null))), /* @__PURE__ */ React__default["default"].createElement(table.Body, {
+    className: modules_2563542d.body
+  }, events.map((evt) => /* @__PURE__ */ React__default["default"].createElement(table.Row, {
+    key: evt.id
+  }, /* @__PURE__ */ React__default["default"].createElement(table.Cell, null, evt.time), /* @__PURE__ */ React__default["default"].createElement(table.Cell, null, evt.type), /* @__PURE__ */ React__default["default"].createElement(ExtraCells, __spreadValues({}, evt)))))));
+};
+
+const FlowRefresh = () => {
+  const dispatch = reactRedux.useDispatch();
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(components.Separator, null), /* @__PURE__ */ React__default["default"].createElement(components.IconButton, {
+    title: "Reset the current flow",
+    onClick: () => {
+      dispatch(resetEditor());
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement(components.Icons, {
+    icon: "sync"
+  })));
+};
+
+const RenderSelection = ({ api: api$1 }) => {
+  const params = api.useParameter("appetizeTokens", {});
+  const dispatch = reactRedux.useDispatch();
+  const selectedPlatform = reactRedux.useSelector((state) => {
+    var _a;
+    return (_a = state.platform.platform) != null ? _a : "web";
+  });
+  React__default["default"].useEffect(() => {
+    const listener = () => {
+      dispatch(setPlatform({ platform: "web" }));
+    };
+    api$1.getChannel().addListener(coreEvents.STORY_CHANGED, listener);
+    return () => {
+      api$1.getChannel().removeListener(coreEvents.STORY_CHANGED, listener);
+    };
+  }, [api$1, dispatch]);
+  const mobilePlatforms = Object.keys(params);
+  if (mobilePlatforms.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(components.WithTooltip, {
+    closeOnClick: true,
+    placement: "top",
+    trigger: "click",
+    tooltip: ({ onHide }) => /* @__PURE__ */ React__default["default"].createElement(components.TooltipLinkList, {
+      links: ["web", ...mobilePlatforms].map((platform) => ({
+        id: platform,
+        title: platform,
+        onClick: () => {
+          setPlatform(platform);
+          dispatch(setPlatform({ platform }));
+          onHide();
+        },
+        value: platform,
+        active: platform === selectedPlatform
+      }))
+    })
+  }, /* @__PURE__ */ React__default["default"].createElement(components.IconButton, {
+    title: "Change the render target"
+  }, /* @__PURE__ */ React__default["default"].createElement(components.Icons, {
+    icon: selectedPlatform === "web" ? "browser" : "mobile"
+  })));
+};
+
+function register() {
+  addons__default["default"].register(ADDON_ID, (api) => {
+    addons__default["default"].addPanel(EVENT_PANEL_ID, {
+      title: "Events",
+      render: ({ active, key }) => /* @__PURE__ */ React__default["default"].createElement(StateProvider, {
+        key
+      }, /* @__PURE__ */ React__default["default"].createElement(EventsPanel, {
+        active: Boolean(active)
+      }))
+    });
+    addons__default["default"].addPanel(FLOW_PANEL_ID, {
+      title: "Flow",
+      render: ({ active, key }) => /* @__PURE__ */ React__default["default"].createElement(StateProvider, {
+        key
+      }, /* @__PURE__ */ React__default["default"].createElement(EditorPanel, {
+        active: Boolean(active)
+      }))
+    });
+    addons__default["default"].add(FLOW_REFRESH_TOOL_ID, {
+      title: "Refresh Flow",
+      type: addons.types.TOOL,
+      render: () => /* @__PURE__ */ React__default["default"].createElement(StateProvider, null, /* @__PURE__ */ React__default["default"].createElement(FlowRefresh, null))
+    });
+    addons__default["default"].add(RENDER_SELECT_TOOL_ID, {
+      title: "Render Selection",
+      type: addons.types.TOOL,
+      render: () => /* @__PURE__ */ React__default["default"].createElement(StateProvider, null, /* @__PURE__ */ React__default["default"].createElement(RenderSelection, {
+        api
+      }))
+    });
+  });
+}
+
+const PlayerRenderContextWrapper = (props) => {
+  var _a;
+  const { playerParams } = props;
+  const platform = reactRedux.useSelector((s) => {
+    var _a2;
+    return (_a2 = s.platform.platform) != null ? _a2 : "web";
+  });
   return /* @__PURE__ */ React__default["default"].createElement(PlayerRenderContext.Provider, {
     value: {
-      platform: selectedPlatform,
-      token: selectedPlatform === "web" ? void 0 : (_a = playerParams == null ? void 0 : playerParams.appetizeTokens) == null ? void 0 : _a[selectedPlatform],
+      platform,
+      token: platform === "web" ? void 0 : (_a = playerParams == null ? void 0 : playerParams.appetizeTokens) == null ? void 0 : _a[platform],
       baseUrl: playerParams.appetizeBaseUrl,
       appetizeVersions: playerParams.appetizeVersions
     }
+  }, props.children);
+};
+const PlayerDecorator = (story, ctx) => {
+  var _a, _b;
+  const playerParams = ctx.parameters;
+  return /* @__PURE__ */ React__default["default"].createElement(StateProvider, null, /* @__PURE__ */ React__default["default"].createElement(PlayerRenderContextWrapper, {
+    playerParams
   }, /* @__PURE__ */ React__default["default"].createElement(ReactPlayerPluginContext.Provider, {
-    value: { plugins: playerParams.reactPlayerPlugins }
-  }, story()));
+    value: { plugins: (_a = playerParams.reactPlayerPlugins) != null ? _a : [] }
+  }, /* @__PURE__ */ React__default["default"].createElement(DSLPluginContext.Provider, {
+    value: (_b = playerParams.dslEditor) != null ? _b : {}
+  }, story()))));
 };
 
+exports.DSLLocalPlayerStory = DSLLocalPlayerStory;
+exports.DSLPlayerStory = DSLPlayerStory;
+exports.DSLPluginContext = DSLPluginContext;
 exports.PlayerDecorator = PlayerDecorator;
 exports.PlayerOptionsContext = PlayerOptionsContext;
 exports.PlayerRenderContext = PlayerRenderContext;
 exports.PlayerStory = PlayerStory;
 exports.ReactPlayerPluginContext = ReactPlayerPluginContext;
 exports.StorybookControlsContext = StorybookControlsContext;
+exports.createDSLStory = createDSLStory;
+exports.execute = execute;
 exports.register = register;
 //# sourceMappingURL=index.cjs.js.map