@player-ui/storybook 0.9.0-next.0 → 0.9.0-next.2

package/dist/index.js

@@ -18,8 +18,9 @@ var managerApi = require('@storybook/manager-api');
 var types = require('@storybook/types');
 var dequal = require('dequal');
 var Editor = require('@monaco-editor/react');
+var storybookDarkMode = require('storybook-dark-mode');
 var table = require('@devtools-ds/table');
-var clsx = require('clsx');
+var ts = require('typescript');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -44,6 +45,7 @@ function _interopNamespace(e) {
 var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var PlayerDSL__namespace = /*#__PURE__*/_interopNamespace(PlayerDSL);
 var Editor__default = /*#__PURE__*/_interopDefault(Editor);
+var ts__default = /*#__PURE__*/_interopDefault(ts);
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/decorator/index.tsx
 var initializedPromise;
@@ -226,10 +228,10 @@ var StorybookPlayerPlugin = class {
   }
 };
 var PlayerFlowSummary = (props) => {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   React5.useEffect(() => {
-    var _a2;
-    const model = new react.LocalModel((_a2 = props.completedState) == null ? void 0 : _a2.data);
+    var _a3;
+    const model = new react.LocalModel((_a3 = props.completedState) == null ? void 0 : _a3.data);
     const parser = new react.BindingParser({
       get: (binding) => model.get(binding)
     });
@@ -242,7 +244,7 @@ var PlayerFlowSummary = (props) => {
       delete window.__PLAYER_COMPLETED_DATA__;
     };
   }, [props.completedState, props.beacons]);
-  return /* @__PURE__ */ React5__namespace.default.createElement("div", null, /* @__PURE__ */ React5__namespace.default.createElement("h1", null, "Flow Completed ", props.error ? "with Error" : ""), ((_a = props.completedState) == null ? void 0 : _a.endState.outcome) && /* @__PURE__ */ React5__namespace.default.createElement("pre", null, "Outcome: ", /* @__PURE__ */ React5__namespace.default.createElement("span", null, (_b = props.completedState) == null ? void 0 : _b.endState.outcome)), props.error && /* @__PURE__ */ React5__namespace.default.createElement("pre", { colorScheme: "red" }, "Error Message: ", /* @__PURE__ */ React5__namespace.default.createElement("span", null, (_c = props.error) == null ? void 0 : _c.message)), /* @__PURE__ */ React5__namespace.default.createElement("button", { onClick: props.reset }, "Reset"));
+  return /* @__PURE__ */ React5__namespace.default.createElement("div", null, /* @__PURE__ */ React5__namespace.default.createElement("h1", null, "Flow Completed ", props.error ? "with Error" : ""), ((_a2 = props.completedState) == null ? void 0 : _a2.endState.outcome) && /* @__PURE__ */ React5__namespace.default.createElement("pre", null, "Outcome: ", /* @__PURE__ */ React5__namespace.default.createElement("span", null, (_b = props.completedState) == null ? void 0 : _b.endState.outcome)), props.error && /* @__PURE__ */ React5__namespace.default.createElement("pre", { colorScheme: "red" }, "Error Message: ", /* @__PURE__ */ React5__namespace.default.createElement("span", null, (_c = props.error) == null ? void 0 : _c.message)), /* @__PURE__ */ React5__namespace.default.createElement("button", { onClick: props.reset }, "Reset"));
 };
 var useFlowSetListener = (chan) => {
   const dispatch = reactRedux.useDispatch();
@@ -455,8 +457,8 @@ var setCompiledEditorResult = toolkit.createAction("setCompiledEditorResult");
 var setEditorContentType = toolkit.createAction("setEditorContentType");
 var setJSONEditorValue = toolkit.createAction("setJSONEditorValue");
 var updateAndCompileDSLFlow = toolkit.createAsyncThunk("editor/dsl/compile", async (context, thunkAPI) => {
-  var _a;
-  const content = (_a = thunkAPI.getState().editor.dsl) == null ? void 0 : _a.value;
+  var _a2;
+  const content = (_a2 = thunkAPI.getState().editor.dsl) == null ? void 0 : _a2.value;
   if (!content) {
     throw new Error("No content to compile");
   }
@@ -524,8 +526,8 @@ var flowEditorReducer = toolkit.createReducer(
       };
     });
     builder.addCase(setCompilationErrors, (state, action) => {
-      var _a;
-      if (((_a = state.dsl) == null ? void 0 : _a.state) === "loaded") {
+      var _a2;
+      if (((_a2 = state.dsl) == null ? void 0 : _a2.state) === "loaded") {
         state.dsl.compilationErrors = action.payload;
       }
     });
@@ -540,8 +542,8 @@ var flowEditorReducer = toolkit.createReducer(
       state.dsl = { state: "error" };
     });
     builder.addCase(setCompiledEditorResult, (state, action) => {
-      var _a;
-      if (((_a = state.dsl) == null ? void 0 : _a.state) === "loaded") {
+      var _a2;
+      if (((_a2 = state.dsl) == null ? void 0 : _a2.state) === "loaded") {
         state.dsl.needsCompile = false;
         state.dsl.compilationErrors = action.payload.errors;
       }
@@ -565,11 +567,13 @@ var eventsReducer = toolkit.createReducer([], (builder) => {
   });
 });
 var STATE_SYNC_CHANNEL_NAME = (() => {
-  if (window == null ? void 0 : window.sessionStorage.getItem("player:channel")) {
+  if (typeof window !== "undefined" && window.sessionStorage.getItem("player:channel")) {
     return window == null ? void 0 : window.sessionStorage.getItem("player:channel");
   }
   const channel = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-  window == null ? void 0 : window.sessionStorage.setItem("player:channel", channel);
+  if (typeof window !== "undefined") {
+    window == null ? void 0 : window.sessionStorage.setItem("player:channel", channel);
+  }
   return channel;
 })();
 var store = toolkit.configureStore({
@@ -668,7 +672,7 @@ var useInitialJsonEditorValue = (initialValue) => {
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/decorator/index.tsx
 var PlayerRenderContextWrapper = (props) => {
-  var _a;
+  var _a2;
   const { playerParams } = props;
   const platform = reactRedux.useSelector(
     (s) => s.platform.platform ?? "web"
@@ -678,7 +682,7 @@ var PlayerRenderContextWrapper = (props) => {
     {
       value: {
         platform,
-        token: platform === "web" ? void 0 : (_a = playerParams == null ? void 0 : playerParams.appetizeTokens) == null ? void 0 : _a[platform],
+        token: platform === "web" ? void 0 : (_a2 = playerParams == null ? void 0 : playerParams.appetizeTokens) == null ? void 0 : _a2[platform],
         baseUrl: playerParams.appetizeBaseUrl,
         appetizeVersions: playerParams.appetizeVersions
       }
@@ -703,29 +707,40 @@ var preview = {
 };
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/addons/constants.ts
-var ADDON_ID = "web-player/addon";
+var ADDON_ID = "@player-ui/storybook";
 var FLOW_PANEL_ID = `${ADDON_ID}/flow-editor-panel`;
 var EVENT_PANEL_ID = `${ADDON_ID}/events-panel`;
-
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/addons/useDarkMode.ts
-function useDarkMode() {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  return matchMedia("(prefers-color-scheme: dark)").matches;
+var DOCS_PANEL_ID = `${ADDON_ID}/asset-docs-panel`;
+var FLOW_REFRESH_TOOL_ID = `${ADDON_ID}/flow-refresh-tool`;
+var _a;
+var prefersDark = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-color-scheme: dark)");
+function useDarkMode(api) {
+  const [isDark, setIsDark] = React5.useState(prefersDark);
+  React5.useEffect(function() {
+    var chan = api.getChannel();
+    chan.on(storybookDarkMode.DARK_MODE_EVENT_NAME, setIsDark);
+    return function() {
+      return chan.off(storybookDarkMode.DARK_MODE_EVENT_NAME, setIsDark);
+    };
+  }, []);
+  return isDark;
 }
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/addons/editor/index.tsx
 if (typeof window !== "undefined") {
   Editor.loader.init().then((m) => {
     m.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+    m.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: true
+    });
     m.languages.typescript.typescriptDefaults.setCompilerOptions({
       jsx: m.languages.typescript.JsxEmit.React
     });
   });
 }
-var JSONEditorPanel = () => {
-  const darkMode = useDarkMode();
+var JSONEditorPanel = (props) => {
+  const darkMode = useDarkMode(props.api);
   const jsonEditorValue = useJSONEditorValue();
   const jsonValueAsString = (jsonEditorValue == null ? void 0 : jsonEditorValue.state) === "loaded" ? JSON.stringify(jsonEditorValue.value, null, 2) : "";
   const dispatch = reactRedux.useDispatch();
@@ -763,7 +778,7 @@ var JSONEditorPanel = () => {
 var CompileErrors = ({
   errors
 }) => {
-  var _a, _b;
+  var _a2, _b;
   if ((errors.compileErrors === void 0 || errors.compileErrors.length === 0) && (errors.transpileErrors === void 0 || errors.transpileErrors.length === 0)) {
     return null;
   }
@@ -782,12 +797,12 @@ var CompileErrors = ({
       }
     },
     /* @__PURE__ */ React5__namespace.default.createElement("h3", null, "Errors"),
-    (_a = errors.compileErrors) == null ? void 0 : _a.map((e) => /* @__PURE__ */ React5__namespace.default.createElement("pre", { key: e.message }, e.message)),
+    (_a2 = errors.compileErrors) == null ? void 0 : _a2.map((e) => /* @__PURE__ */ React5__namespace.default.createElement("pre", { key: e.message }, e.message)),
     (_b = errors.transpileErrors) == null ? void 0 : _b.map((e) => /* @__PURE__ */ React5__namespace.default.createElement("pre", { key: e.message }, e.message))
   );
 };
-var DSLEditorPanel = () => {
-  const darkMode = useDarkMode();
+var DSLEditorPanel = (props) => {
+  const darkMode = useDarkMode(props.api);
   const jsonEditorValue = useJSONEditorValue();
   const dslEditorValue = useDSLEditorValue();
   const dispatch = reactRedux.useDispatch();
@@ -864,18 +879,13 @@ var EditorPanel = (props) => {
     return null;
   }
   if (contentType === "dsl") {
-    return /* @__PURE__ */ React5__namespace.default.createElement(DSLEditorPanel, null);
+    return /* @__PURE__ */ React5__namespace.default.createElement(DSLEditorPanel, { ...props });
   }
   if (contentType === "json") {
-    return /* @__PURE__ */ React5__namespace.default.createElement(JSONEditorPanel, null);
+    return /* @__PURE__ */ React5__namespace.default.createElement(JSONEditorPanel, { ...props });
   }
   return /* @__PURE__ */ React5__namespace.default.createElement(components.Placeholder, null, "This story is not configured to allow flow edits.");
 };
-
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/addons/events/events.css
-var events_default = {};
-
-// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/addons/events/index.tsx
 var ExtraCells = (event) => {
   if (event.type === "log") {
     return /* @__PURE__ */ React5__namespace.default.createElement(React5__namespace.default.Fragment, null, /* @__PURE__ */ React5__namespace.default.createElement("td", null, event.severity), /* @__PURE__ */ React5__namespace.default.createElement("td", null, event.message.map((a) => JSON.stringify(a)).join(" ")));
@@ -898,38 +908,616 @@ var ExtraCells = (event) => {
 var EventsPanel = (props) => {
   const events = reactRedux.useSelector((state) => state.events);
   const contentType = useContentKind();
-  const darkMode = useDarkMode();
+  const darkMode = useDarkMode(props.api);
   if (!props.active) {
     return null;
   }
   if (contentType === void 0) {
     return /* @__PURE__ */ React5__namespace.default.createElement(components.Placeholder, null, "This story is not configured to receive Player events.");
   }
-  return /* @__PURE__ */ React5__namespace.default.createElement(
-    "div",
-    {
-      className: clsx.clsx(events_default.wrapper, {
-        [events_default.dark]: darkMode
+  return /* @__PURE__ */ React5__namespace.default.createElement("div", null, /* @__PURE__ */ React5__namespace.default.createElement(table.Table, { colorScheme: darkMode ? "dark" : "light" }, /* @__PURE__ */ React5__namespace.default.createElement(table.Head, null, /* @__PURE__ */ React5__namespace.default.createElement(table.Row, null, /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null, "Time"), /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null, "Type"), /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null), /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null))), /* @__PURE__ */ React5__namespace.default.createElement(table.Body, null, events.map((evt) => /* @__PURE__ */ React5__namespace.default.createElement(table.Row, { key: evt.id }, /* @__PURE__ */ React5__namespace.default.createElement(table.Cell, null, evt.time), /* @__PURE__ */ React5__namespace.default.createElement(table.Cell, null, evt.type), /* @__PURE__ */ React5__namespace.default.createElement(ExtraCells, { ...evt }))))));
+};
+var templateTokenize = /(?=true\|false|\.\*|\[0-9]\*)/gm;
+var tokenSplit = new RegExp("(?<=true\\|false|\\.\\*|\\[0-9]\\*)", "gm");
+function isPrimitiveTypeNode(node) {
+  return node.type === "string" || node.type === "number" || node.type === "boolean" || node.type === "null" || node.type === "any" || node.type === "never" || node.type === "undefined" || node.type === "unknown" || node.type === "void";
+}
+function isGenericNamedType(nt) {
+  var _a2;
+  return ((_a2 = nt.genericTokens) == null ? void 0 : _a2.length) > 0;
+}
+var ConversionError = class _ConversionError extends Error {
+  constructor(msg) {
+    super(msg);
+    Object.setPrototypeOf(this, _ConversionError.prototype);
+  }
+  toString() {
+    return `Conversion Error: ${this.message}`;
+  }
+};
+var TSWriter = class {
+  constructor(factory) {
+    this.context = {
+      factory: factory ?? ts__default.default.factory,
+      throwError: (message) => {
+        throw new ConversionError(message);
+      }
+    };
+    this.importSet = /* @__PURE__ */ new Set();
+    this.additionalTypes = /* @__PURE__ */ new Map();
+  }
+  convertNamedType(type) {
+    this.importSet.clear();
+    this.additionalTypes.clear();
+    const finalNode = this.convertNamedTypeNode(type);
+    const referencedTypes = this.importSet.size > 0 ? this.importSet : void 0;
+    const additionalTypes = this.additionalTypes.size > 0 ? this.additionalTypes : void 0;
+    return {
+      type: this.makeAnnotations(finalNode, type),
+      referencedTypes,
+      additionalTypes
+    };
+  }
+  convertNamedTypeNode(type) {
+    const typeName = type.name;
+    const tsNode = this.convertTypeNode(type);
+    let customPrimitiveHeritageClass;
+    if (type.type === "object" && type.extends) {
+      const refName = type.extends.ref.split("<")[0];
+      customPrimitiveHeritageClass = [
+        this.context.factory.createHeritageClause(
+          ts__default.default.SyntaxKind.ExtendsKeyword,
+          [
+            this.context.factory.createExpressionWithTypeArguments(
+              this.context.factory.createIdentifier(refName),
+              type.extends.genericArguments ? type.extends.genericArguments.map(
+                (node) => this.convertTypeNode(node)
+              ) : void 0
+            )
+          ]
+        )
+      ];
+    }
+    let generics;
+    if (isGenericNamedType(type)) {
+      generics = this.createTypeParameters(type);
+      type.genericTokens.forEach((token) => {
+        if (this.importSet.has(token.symbol)) {
+          this.importSet.delete(token.symbol);
+        }
+      });
+    }
+    let finalNode;
+    if (ts__default.default.isTypeLiteralNode(tsNode)) {
+      finalNode = this.makeInterfaceDeclaration(
+        typeName,
+        tsNode.members,
+        generics,
+        customPrimitiveHeritageClass
+      );
+    } else {
+      finalNode = this.makeTypeDeclaration(typeName, tsNode, generics);
+    }
+    return finalNode;
+  }
+  convertTypeNode(type) {
+    if (type.type === "object") {
+      return this.createObjectNode(type);
+    }
+    if (type.type === "and") {
+      return this.context.factory.createIntersectionTypeNode(
+        type.and.map((element) => {
+          return this.convertTypeNode(element);
+        })
+      );
+    }
+    if (type.type === "or") {
+      return this.context.factory.createUnionTypeNode(
+        type.or.map((element) => {
+          return this.convertTypeNode(element);
+        })
+      );
+    }
+    if (type.type === "array") {
+      if (type.const) {
+        return this.context.factory.createTupleTypeNode(
+          type.const.map(
+            (element) => this.convertTypeNode(element)
+          )
+        );
+      }
+      return this.context.factory.createTypeReferenceNode(
+        this.context.factory.createIdentifier("Array"),
+        [this.convertTypeNode(type.elementType)]
+      );
+    }
+    if (isPrimitiveTypeNode(type)) {
+      return this.createPrimitiveNode(type);
+    }
+    if (type.type === "conditional") {
+      return this.createConditionalTypeNode(type);
+    }
+    if (type.type === "function") {
+      return this.createFunctionDeclarationNode(type);
+    }
+    if (type.type === "record") {
+      return this.createRecordNode(type);
+    }
+    if (type.type === "ref") {
+      return this.createRefNode(type);
+    }
+    if (type.type === "template") {
+      return this.createTemplateLiteral(type);
+    }
+    if (type.type === "tuple") {
+      return this.createTupleNode(type);
+    }
+    this.context.throwError(
+      `Unable to convert node type: ${type.type}`
+    );
+  }
+  createRefNode(xlrNode) {
+    const typeArgs = [];
+    if (xlrNode.genericArguments) {
+      xlrNode.genericArguments.forEach((genericArg) => {
+        if (genericArg.name) {
+          const additionalType = this.convertNamedTypeNode(
+            genericArg
+          );
+          this.additionalTypes.set(genericArg.name, additionalType);
+        } else if (genericArg.type === "and") {
+          genericArg.and.forEach((type) => {
+            if (type.name) {
+              const additionalType = this.convertNamedTypeNode(
+                type
+              );
+              this.additionalTypes.set(type.name, additionalType);
+            }
+          });
+        } else if (genericArg.type === "or") {
+          genericArg.or.forEach((type) => {
+            if (type.name) {
+              const additionalType = this.convertNamedTypeNode(
+                type
+              );
+              this.additionalTypes.set(type.name, additionalType);
+            }
+          });
+        } else {
+          typeArgs.push(this.convertTypeNode(genericArg));
+        }
+      });
+    }
+    const importName = xlrNode.ref.split("<")[0];
+    this.importSet.add(importName);
+    return this.context.factory.createTypeReferenceNode(importName, typeArgs);
+  }
+  createPrimitiveNode(xlrNode) {
+    if ((xlrNode.type === "string" || xlrNode.type === "boolean" || xlrNode.type === "number") && xlrNode.const || xlrNode.type === "null") {
+      return this.context.factory.createLiteralTypeNode(
+        this.createLiteralTypeNode(xlrNode)
+      );
+    }
+    switch (xlrNode.type) {
+      case "string":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.StringKeyword
+        );
+      case "number":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.NumberKeyword
+        );
+      case "boolean":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.BooleanKeyword
+        );
+      case "any":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.AnyKeyword
+        );
+      case "unknown":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.UnknownKeyword
+        );
+      case "never":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.NeverKeyword
+        );
+      case "undefined":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.UndefinedKeyword
+        );
+      case "void":
+        return this.context.factory.createKeywordTypeNode(
+          ts__default.default.SyntaxKind.VoidKeyword
+        );
+      default:
+        this.context.throwError(
+          `Unknown primitive type ${xlrNode.type}`
+        );
+    }
+  }
+  createLiteralTypeNode(xlrNode) {
+    if (xlrNode.type === "boolean") {
+      return xlrNode.const ? this.context.factory.createTrue() : this.context.factory.createFalse();
+    }
+    if (xlrNode.type === "number") {
+      return xlrNode.const ? this.context.factory.createNumericLiteral(xlrNode.const) : this.context.throwError(
+        "Can't make literal type out of non constant number"
+      );
+    }
+    if (xlrNode.type === "string") {
+      return xlrNode.const ? this.context.factory.createStringLiteral(xlrNode.const, true) : this.context.throwError(
+        "Can't make literal type out of non constant string"
+      );
+    }
+    if (xlrNode.type === "null") {
+      return this.context.factory.createNull();
+    }
+    this.context.throwError(`Can't make literal out of type ${xlrNode.type}`);
+  }
+  createTupleNode(xlrNode) {
+    return this.context.factory.createTupleTypeNode(
+      xlrNode.elementTypes.map((e) => {
+        if (e.name) {
+          return this.context.factory.createNamedTupleMember(
+            void 0,
+            this.context.factory.createIdentifier(e.name),
+            e.optional ? this.context.factory.createToken(ts__default.default.SyntaxKind.QuestionToken) : void 0,
+            this.convertTypeNode(e.type)
+          );
+        }
+        return this.convertTypeNode(e.type);
       })
-    },
-    /* @__PURE__ */ React5__namespace.default.createElement(table.Table, { colorScheme: darkMode ? "dark" : "light" }, /* @__PURE__ */ React5__namespace.default.createElement(table.Head, { className: events_default.header }, /* @__PURE__ */ React5__namespace.default.createElement(table.Row, null, /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null, "Time"), /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null, "Type"), /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null), /* @__PURE__ */ React5__namespace.default.createElement(table.HeadCell, null))), /* @__PURE__ */ React5__namespace.default.createElement(table.Body, { className: events_default.body }, events.map((evt) => /* @__PURE__ */ React5__namespace.default.createElement(table.Row, { key: evt.id }, /* @__PURE__ */ React5__namespace.default.createElement(table.Cell, null, evt.time), /* @__PURE__ */ React5__namespace.default.createElement(table.Cell, null, evt.type), /* @__PURE__ */ React5__namespace.default.createElement(ExtraCells, { ...evt })))))
+    );
+  }
+  createFunctionDeclarationNode(xlrNode) {
+    return this.context.factory.createFunctionTypeNode(
+      void 0,
+      xlrNode.parameters.map((e) => {
+        return this.context.factory.createParameterDeclaration(
+          void 0,
+          void 0,
+          e.name,
+          e.optional ? this.context.factory.createToken(ts__default.default.SyntaxKind.QuestionToken) : void 0,
+          this.convertTypeNode(e.type),
+          e.default ? this.createLiteralTypeNode(e.default) : void 0
+        );
+      }),
+      xlrNode.returnType ? this.convertTypeNode(xlrNode.returnType) : this.context.factory.createToken(ts__default.default.SyntaxKind.VoidKeyword)
+    );
+  }
+  createRecordNode(xlrNode) {
+    const keyType = this.convertTypeNode(xlrNode.keyType);
+    const valueType = this.convertTypeNode(xlrNode.valueType);
+    return this.context.factory.createTypeReferenceNode(
+      this.context.factory.createIdentifier("Record"),
+      [keyType, valueType]
+    );
+  }
+  createConditionalTypeNode(xlrNode) {
+    const leftCheck = this.convertTypeNode(xlrNode.check.left);
+    const rightCheck = this.convertTypeNode(xlrNode.check.right);
+    const trueValue = this.convertTypeNode(xlrNode.value.true);
+    const falseValue = this.convertTypeNode(xlrNode.value.false);
+    return this.context.factory.createConditionalTypeNode(
+      leftCheck,
+      rightCheck,
+      trueValue,
+      falseValue
+    );
+  }
+  createObjectNode(xlrNode) {
+    const { properties, additionalProperties = false } = xlrNode;
+    const propertyNodes = [
+      ...Object.keys(properties).map((name) => ({ name, ...properties[name] })).map(
+        ({ name, node, required }) => this.makeAnnotations(
+          this.context.factory.createPropertySignature(
+            void 0,
+            // modifiers
+            name,
+            required ? void 0 : this.context.factory.createToken(ts__default.default.SyntaxKind.QuestionToken),
+            this.convertTypeNode(node)
+          ),
+          node
+        )
+      )
+    ];
+    if (additionalProperties) {
+      propertyNodes.push(
+        this.context.factory.createIndexSignature(
+          void 0,
+          // modifiers
+          [
+            this.context.factory.createParameterDeclaration(
+              void 0,
+              // modifiers
+              void 0,
+              // dotdotdot token
+              "key",
+              void 0,
+              // question token
+              this.context.factory.createKeywordTypeNode(
+                ts__default.default.SyntaxKind.StringKeyword
+              )
+            )
+          ],
+          this.convertTypeNode(additionalProperties)
+        )
+      );
+    }
+    return this.context.factory.createTypeLiteralNode(propertyNodes);
+  }
+  createTemplateLiteral(xlrNode) {
+    const templateSegments = xlrNode.format.split(templateTokenize);
+    let templateHead;
+    if (templateSegments.length % 2 === 0) {
+      templateHead = this.context.factory.createTemplateHead(
+        templateSegments[0]
+      );
+      templateSegments.splice(0, 1);
+    } else {
+      templateHead = this.context.factory.createTemplateHead("");
+    }
+    return this.context.factory.createTemplateLiteralType(
+      templateHead,
+      templateSegments.map((segments, i) => {
+        const [regexSegment, stringSegment = ""] = segments.split(tokenSplit);
+        let regexTemplateType;
+        if (regexSegment === ".*") {
+          regexTemplateType = ts__default.default.SyntaxKind.StringKeyword;
+        } else if (regexSegment === "[0-9]*") {
+          regexTemplateType = ts__default.default.SyntaxKind.NumberKeyword;
+        } else if (regexSegment === "true|false") {
+          regexTemplateType = ts__default.default.SyntaxKind.BooleanKeyword;
+        } else {
+          this.context.throwError(
+            `Can't make template literal type from regex ${regexSegment}`
+          );
+        }
+        let stringTemplateType;
+        if (i === templateSegments.length - 1) {
+          stringTemplateType = this.context.factory.createTemplateTail(stringSegment);
+        } else {
+          stringTemplateType = this.context.factory.createTemplateMiddle(stringSegment);
+        }
+        return this.context.factory.createTemplateLiteralTypeSpan(
+          this.context.factory.createKeywordTypeNode(regexTemplateType),
+          stringTemplateType
+        );
+      })
+    );
+  }
+  createGenericArgumentNode(node) {
+    if (node) {
+      if (node.type === "object" && node.name) {
+        const additionalType = this.convertNamedTypeNode(
+          node
+        );
+        this.additionalTypes.set(node.name, additionalType);
+        return this.context.factory.createTypeReferenceNode(node.name);
+      }
+      return this.convertTypeNode(node);
+    }
+    return void 0;
+  }
+  makeAnnotations(tsNode, xlrAnnotations) {
+    let comment = xlrAnnotations.description;
+    if (!comment) {
+      return tsNode;
+    }
+    if (comment.includes("\n")) {
+      comment = `*
+${comment.split("\n").map((s) => ` * ${s}`).join("\n")}
+`;
+    } else {
+      comment = `* ${comment} `;
+    }
+    return ts__default.default.addSyntheticLeadingComment(
+      tsNode,
+      ts__default.default.SyntaxKind.MultiLineCommentTrivia,
+      comment,
+      true
+    );
+  }
+  createTypeParameters(genericXLRNode) {
+    return genericXLRNode.genericTokens.map((generic) => {
+      return this.context.factory.createTypeParameterDeclaration(
+        void 0,
+        generic.symbol,
+        this.createGenericArgumentNode(generic.constraints),
+        this.createGenericArgumentNode(generic.default)
+      );
+    });
+  }
+  makeInterfaceDeclaration(name, node, generics, heritageClass) {
+    return this.context.factory.createInterfaceDeclaration(
+      this.context.factory.createModifiersFromModifierFlags(
+        ts__default.default.ModifierFlags.Export
+      ),
+      this.context.factory.createIdentifier(name),
+      generics,
+      // type parameters
+      heritageClass,
+      // heritage
+      node
+    );
+  }
+  makeTypeDeclaration(name, node, generics) {
+    return this.context.factory.createTypeAliasDeclaration(
+      this.context.factory.createModifiersFromModifierFlags(
+        ts__default.default.ModifierFlags.Export
+      ),
+      this.context.factory.createIdentifier(name),
+      generics,
+      // type parameters
+      node
+    );
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/addons/docs/index.tsx
+function getKeyName(node) {
+  if (node.type === "ref") {
+    return node.ref;
+  }
+  if (node.type === "or") {
+    return node.or.map((subnode) => getKeyName(subnode)).join(" | ");
+  }
+  if (node.type === "and") {
+    return node.and.map((subnode) => getKeyName(subnode)).join(" & ");
+  }
+  if (node.type === "array") {
+    return `Array<${getKeyName(node.elementType)}>`;
+  }
+  if (node.type === "record") {
+    return `Record<${getKeyName(node.keyType)}, ${getKeyName(node.valueType)}>`;
+  }
+  if (isPrimitiveTypeNode(node) && node.type !== "null") {
+    return node.type;
+  }
+  if (node.type === "object" && node.name) {
+    return node.name;
+  }
+  return node.type;
+}
+function XLRObjectDocs(props) {
+  const tsWriter = new TSWriter();
+  const printer = ts__default.default.createPrinter();
+  const resultFile = ts__default.default.createSourceFile(
+    "output.d.ts",
+    "",
+    ts__default.default.ScriptTarget.ES2017,
+    false,
+    // setParentNodes
+    ts__default.default.ScriptKind.TS
   );
+  return /* @__PURE__ */ React5__namespace.default.createElement("div", { style: { padding: "8px" } }, /* @__PURE__ */ React5__namespace.default.createElement("h2", null, props.xlr.title ?? props.xlr.name), /* @__PURE__ */ React5__namespace.default.createElement("p", { style: { whiteSpace: "pre-line" } }, props.xlr.description), /* @__PURE__ */ React5__namespace.default.createElement("table", null, /* @__PURE__ */ React5__namespace.default.createElement("thead", null, /* @__PURE__ */ React5__namespace.default.createElement("tr", null, /* @__PURE__ */ React5__namespace.default.createElement("th", null, "Name"), /* @__PURE__ */ React5__namespace.default.createElement("th", null, "Required"), /* @__PURE__ */ React5__namespace.default.createElement("th", null, "Type"), /* @__PURE__ */ React5__namespace.default.createElement("th", null, "Description"))), /* @__PURE__ */ React5__namespace.default.createElement("tbody", null, Object.entries(props.xlr.properties).sort(
+    (a, b) => (
+      // bubble up the required props first
+      a[1].required === b[1].required ? 0 : a[1].required ? -1 : 1
+    )
+  ).map(([propKey, propType]) => {
+    let nodeText = getKeyName(
+      propType.node
+    );
+    if (nodeText === "object") {
+      nodeText = propKey;
+    }
+    if (!isPrimitiveTypeNode(propType.node) && propType.node.type !== "ref" && !(propType.node.type === "array" && propType.node.elementType.type === "ref")) {
+      const tsType = tsWriter.convertNamedType({
+        source: props.xlr.source,
+        name: propType.node.name ?? propKey,
+        ...propType.node
+      });
+      const tsText = printer.printNode(
+        ts__default.default.EmitHint.Unspecified,
+        tsType.type,
+        resultFile
+      );
+      nodeText = /* @__PURE__ */ React5__namespace.default.createElement(
+        components.WithTooltip,
+        {
+          trigger: "hover",
+          withArrows: true,
+          tooltip: /* @__PURE__ */ React5__namespace.default.createElement(components.SyntaxHighlighter, { language: "typescript", bordered: true }, tsText)
+        },
+        /* @__PURE__ */ React5__namespace.default.createElement(components.Link, null, nodeText)
+      );
+    }
+    return /* @__PURE__ */ React5__namespace.default.createElement("tr", { key: propKey }, /* @__PURE__ */ React5__namespace.default.createElement("td", null, propKey), /* @__PURE__ */ React5__namespace.default.createElement("td", null, propType.required ? /* @__PURE__ */ React5__namespace.default.createElement("b", null, "yes") : "no"), /* @__PURE__ */ React5__namespace.default.createElement("td", null, nodeText), /* @__PURE__ */ React5__namespace.default.createElement("td", null, propType.node.description));
+  }))));
+}
+function DocsPanel(props) {
+  const assetDocsToRender = managerApi.useParameter(
+    "assetDocs"
+  );
+  const defaultXLRSources = managerApi.useParameter(
+    "assetXLRSources"
+  );
+  const darkMode = useDarkMode(props.api);
+  if (!props.active) {
+    return null;
+  }
+  if (assetDocsToRender === void 0 && defaultXLRSources === void 0) {
+    return /* @__PURE__ */ React5__namespace.default.createElement("div", null, "Loading...");
+  }
+  if (defaultXLRSources === void 0) {
+    return /* @__PURE__ */ React5__namespace.default.createElement("div", null, "No assetXLRSources configured. Unable to generate docs.");
+  }
+  if (assetDocsToRender === void 0) {
+    return /* @__PURE__ */ React5__namespace.default.createElement("div", null, "Story is not configured to generate asset docs.");
+  }
+  const assetsToRender = assetDocsToRender.map((name) => {
+    for (const xlrSource of defaultXLRSources) {
+      for (const assetXLR of xlrSource.capabilities.Assets) {
+        if (assetXLR.name === name) {
+          return assetXLR;
+        }
+      }
+      for (const viewXLR of xlrSource.capabilities.Views) {
+        if (viewXLR.name === name) {
+          return viewXLR;
+        }
+      }
+    }
+  });
+  return /* @__PURE__ */ React5__namespace.default.createElement("div", null, assetsToRender.map(
+    (assetXLR) => assetDocsToRender === void 0 ? null : /* @__PURE__ */ React5__namespace.default.createElement(
+      XLRObjectDocs,
+      {
+        key: assetXLR.name,
+        xlr: assetXLR,
+        darkMode: Boolean(darkMode)
+      }
+    )
+  ));
+}
+var FlowRefresh = () => {
+  const dispatch = reactRedux.useDispatch();
+  return /* @__PURE__ */ React5__namespace.default.createElement(React5__namespace.default.Fragment, null, /* @__PURE__ */ React5__namespace.default.createElement(components.Separator, null), /* @__PURE__ */ React5__namespace.default.createElement(
+    components.IconButton,
+    {
+      placeholder: "Flow Reset",
+      title: "Reset the current flow",
+      onPointerEnterCapture: () => {
+      },
+      onPointerLeaveCapture: () => {
+      },
+      onClick: () => {
+        dispatch(resetEditor());
+      }
+    },
+    /* @__PURE__ */ React5__namespace.default.createElement(components.Icons, { icon: "sync" })
+  ));
 };
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/manager.tsx
 var register = () => {
-  managerApi.addons.register(ADDON_ID, () => {
+  managerApi.addons.register(ADDON_ID, (api) => {
+    managerApi.addons.add(DOCS_PANEL_ID, {
+      type: types.Addon_TypesEnum.PANEL,
+      title: "Asset Docs",
+      match: ({ viewMode }) => viewMode === "story",
+      render: ({ active }) => /* @__PURE__ */ React5__namespace.default.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.default.createElement(DocsPanel, { api, active }))
+    });
     managerApi.addons.add(EVENT_PANEL_ID, {
       type: types.Addon_TypesEnum.PANEL,
       title: "Events",
       match: ({ viewMode }) => viewMode === "story",
-      render: ({ active }) => /* @__PURE__ */ React5__namespace.default.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.default.createElement(EventsPanel, { active: Boolean(active) }))
+      render: ({ active }) => /* @__PURE__ */ React5__namespace.default.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.default.createElement(EventsPanel, { api, active: Boolean(active) }))
     });
     managerApi.addons.add(FLOW_PANEL_ID, {
       type: types.Addon_TypesEnum.PANEL,
       title: "Flow Editor",
       match: ({ viewMode }) => viewMode === "story",
-      render: ({ active }) => /* @__PURE__ */ React5__namespace.default.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.default.createElement(EditorPanel, { active: Boolean(active) }))
+      render: ({ active }) => /* @__PURE__ */ React5__namespace.default.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.default.createElement(EditorPanel, { api, active: Boolean(active) }))
+    });
+    managerApi.addons.add(FLOW_REFRESH_TOOL_ID, {
+      title: "Refresh Flow",
+      type: types.Addon_TypesEnum.TOOL,
+      match: ({ viewMode }) => viewMode === "story",
+      render: () => /* @__PURE__ */ React5__namespace.default.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.default.createElement(FlowRefresh, null))
     });
   });
 };