@player-devtools/client-react 0.13.1--canary.17.955

package/dist/cjs/index.cjs

@@ -0,0 +1,234 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Panel: () => Panel
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx
+var import_react3 = __toESM(require("react"));
+var import_react4 = require("@player-ui/react");
+var import_react5 = require("react");
+var import_react_error_boundary = require("react-error-boundary");
+var import_react6 = require("@chakra-ui/react");
+var import_themes = require("@devtools-ds/themes");
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/plugins/index.ts
+var import_plugin = __toESM(require("@devtools-ui/plugin"));
+var import_pubsub_plugin = require("@player-ui/pubsub-plugin");
+var import_common_expressions_plugin = require("@player-ui/common-expressions-plugin");
+var import_common_types_plugin = require("@player-ui/common-types-plugin");
+var import_data_change_listener_plugin = require("@player-ui/data-change-listener-plugin");
+var import_react = require("@player-ui/react");
+var LogForwarder = class {
+  constructor() {
+    this.name = "Log";
+  }
+  apply(player) {
+    player.logger.addHandler(new import_react.ConsoleLogger("trace", console));
+  }
+  applyReact(reactPlayer) {
+    this.apply(reactPlayer.player);
+  }
+};
+var PUBSUB_PLUGIN = new import_pubsub_plugin.PubSubPlugin();
+var PLAYER_PLUGINS = [
+  new import_common_types_plugin.CommonTypesPlugin(),
+  new import_common_expressions_plugin.CommonExpressionsPlugin(),
+  new import_data_change_listener_plugin.DataChangeListenerPlugin(),
+  new import_plugin.default(),
+  new LogForwarder(),
+  PUBSUB_PLUGIN
+];
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/state/index.ts
+var import_react2 = require("react");
+var import_client = require("@player-devtools/client");
+var useExtensionState = ({
+  communicationLayer
+}) => {
+  const client = (0, import_react2.useMemo)(
+    () => (0, import_client.createExtensionClient)(communicationLayer),
+    [communicationLayer]
+  );
+  (0, import_react2.useEffect)(() => () => client.destroy(), [client]);
+  const state = (0, import_react2.useSyncExternalStore)(client.subscribe, client.getState);
+  return {
+    state,
+    selectPlayer: client.selectPlayer,
+    selectPlugin: client.selectPlugin,
+    handleInteraction: client.handleInteraction
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/helpers/flowDiff.ts
+var import_dequal = require("dequal");
+var flowDiff = ({
+  curr,
+  next
+}) => {
+  const currCopy = { ...curr, data: null };
+  const nextCopy = { ...next, data: null };
+  const baseFlowIsEqual = (0, import_dequal.dequal)(currCopy, nextCopy);
+  if (!baseFlowIsEqual) {
+    return { change: "flow", value: next };
+  }
+  const currData = curr.data;
+  const nextData = next.data;
+  const dataIsEqual = (0, import_dequal.dequal)(currData, nextData);
+  if (!dataIsEqual) {
+    return { change: "data", value: nextData };
+  }
+  return null;
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx
+var INITIAL_FLOW = {
+  id: "initial-flow",
+  views: [
+    {
+      id: "view-1",
+      type: "text",
+      value: "connecting..."
+    }
+  ],
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "view-1",
+        transitions: {}
+      }
+    }
+  }
+};
+var fallbackRender = ({
+  error
+}) => {
+  return /* @__PURE__ */ import_react3.default.createElement(import_react6.Container, { centerContent: true }, /* @__PURE__ */ import_react3.default.createElement(import_react6.Card, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.CardHeader, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.Heading, null, "Ops, something went wrong.")), /* @__PURE__ */ import_react3.default.createElement(import_react6.CardBody, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.Text, { as: "pre" }, error.message))));
+};
+var Panel = ({ communicationLayer, baseTheme }) => {
+  const { state, selectPlayer, selectPlugin, handleInteraction } = useExtensionState({
+    communicationLayer
+  });
+  const { reactPlayer, playerState } = (0, import_react4.useReactPlayer)({
+    plugins: PLAYER_PLUGINS
+  });
+  const dataController = (0, import_react3.useRef)(null);
+  const currentFlow = (0, import_react3.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
+      dataController.current = new WeakRef(d);
+    });
+  }, [reactPlayer]);
+  (0, import_react5.useEffect)(() => {
+    PUBSUB_PLUGIN.subscribe("*", (type, payload) => {
+      handleInteraction({
+        type,
+        payload
+      });
+    });
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const { player, plugin } = state.current;
+    const flow = player && plugin ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW : INITIAL_FLOW;
+    if (!currentFlow.current) {
+      currentFlow.current = flow;
+      reactPlayer.start(flow);
+      return;
+    }
+    const diff = flowDiff({
+      curr: currentFlow.current,
+      next: flow
+    });
+    if (diff) {
+      const { change, value } = diff;
+      if (change === "flow") {
+        currentFlow.current = value;
+        reactPlayer.start(value);
+      } else if (change === "data") {
+        if (dataController.current) {
+          dataController.current.deref()?.set(value);
+        } else {
+          reactPlayer.start(flow);
+        }
+      }
+    }
+  }, [reactPlayer, state]);
+  const isDarkMode = (0, import_themes.useDarkMode)();
+  const colorMode = isDarkMode ? "dark" : "light";
+  const config = {
+    initialColorMode: colorMode,
+    useSystemColorMode: true
+  };
+  const theme = (0, import_react6.extendTheme)({ config, ...baseTheme });
+  const Component = reactPlayer.Component;
+  return /* @__PURE__ */ import_react3.default.createElement(import_react6.ChakraProvider, { resetCSS: false, theme }, /* @__PURE__ */ import_react3.default.createElement(import_themes.ThemeProvider, { theme: "chrome", colorScheme: colorMode }, /* @__PURE__ */ import_react3.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender }, /* @__PURE__ */ import_react3.default.createElement(
+    import_react6.Flex,
+    {
+      direction: "column",
+      h: "100vh",
+      alignItems: "normal",
+      overflow: "scroll"
+    },
+    state.current.player ? /* @__PURE__ */ import_react3.default.createElement(import_react6.Flex, { direction: "column", gap: "20px" }, /* @__PURE__ */ import_react3.default.createElement(import_react6.Flex, { gap: "16px" }, /* @__PURE__ */ import_react3.default.createElement(import_react6.FormControl, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.FormLabel, null, "Player"), /* @__PURE__ */ import_react3.default.createElement(
+      import_react6.Select,
+      {
+        id: "player",
+        value: state.current.player || "",
+        onChange: (event) => selectPlayer(event.target.value)
+      },
+      Object.keys(state.players).map((playerID) => /* @__PURE__ */ import_react3.default.createElement("option", { key: playerID, value: playerID }, playerID))
+    )), /* @__PURE__ */ import_react3.default.createElement(import_react6.FormControl, null, /* @__PURE__ */ import_react3.default.createElement(import_react6.FormLabel, null, "Plugin"), /* @__PURE__ */ import_react3.default.createElement(
+      import_react6.Select,
+      {
+        id: "plugin",
+        value: state.current.plugin || "",
+        onChange: (event) => selectPlugin(event.target.value)
+      },
+      Object.keys(
+        state.players[state.current.player]?.plugins ?? []
+      ).map((pluginID) => /* @__PURE__ */ import_react3.default.createElement("option", { key: pluginID, value: pluginID }, pluginID))
+    ))), /* @__PURE__ */ import_react3.default.createElement(import_react6.Flex, { width: "100%" }, playerState.status === "error" ? fallbackRender({
+      error: playerState.error,
+      resetErrorBoundary: () => {
+      }
+    }) : /* @__PURE__ */ import_react3.default.createElement(Component, null)), /* @__PURE__ */ import_react3.default.createElement("details", null, /* @__PURE__ */ import_react3.default.createElement("summary", null, "Debug"), /* @__PURE__ */ import_react3.default.createElement("pre", { style: { maxHeight: "30vh", overflow: "scroll" } }, JSON.stringify(state, null, 2)))) : /* @__PURE__ */ import_react3.default.createElement(import_react6.Flex, { justifyContent: "center", padding: "6" }, /* @__PURE__ */ import_react3.default.createElement(import_react6.Text, null, "No Player-UI instance or devtools plugin detected. Visit", " ", /* @__PURE__ */ import_react3.default.createElement("a", { href: "https://player-ui.github.io/" }, "https://player-ui.github.io/"), " ", "for more info."))
+  ))));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Panel
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/index.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/plugins/index.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/state/index.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/helpers/flowDiff.ts"],"sourcesContent":["export { Panel } from \"./panel\";\n","import React, { useRef } from \"react\";\nimport type {\n  MessengerOptions,\n  ExtensionSupportedEvents,\n} from \"@player-devtools/types\";\nimport { DataController, Flow, useReactPlayer } from \"@player-ui/react\";\nimport { useEffect } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  ChakraProvider,\n  Container,\n  extendTheme,\n  Flex,\n  FormControl,\n  FormLabel,\n  Heading,\n  Select,\n  Text,\n  type ThemeConfig,\n} from \"@chakra-ui/react\";\n\nimport { ThemeProvider, useDarkMode } from \"@devtools-ds/themes\";\n\nimport { PLAYER_PLUGINS, PUBSUB_PLUGIN } from \"../plugins\";\nimport { useExtensionState } from \"../state\";\nimport { flowDiff } from \"../helpers/flowDiff\";\n\n/** Placeholder flow rendered until a real Player flow arrives. */\nconst INITIAL_FLOW: Flow = {\n  id: \"initial-flow\",\n  views: [\n    {\n      id: \"view-1\",\n      type: \"text\",\n      value: \"connecting...\",\n    },\n  ],\n  navigation: {\n    BEGIN: \"FLOW_1\",\n    FLOW_1: {\n      startState: \"VIEW_1\",\n      VIEW_1: {\n        state_type: \"VIEW\",\n        ref: \"view-1\",\n        transitions: {},\n      },\n    },\n  },\n};\n\nconst fallbackRender: ErrorBoundary[\"props\"][\"fallbackRender\"] = ({\n  error,\n}) => {\n  return (\n    <Container centerContent>\n      <Card>\n        <CardHeader>\n          <Heading>Ops, something went wrong.</Heading>\n        </CardHeader>\n        <CardBody>\n          <Text as=\"pre\">{error.message}</Text>\n        </CardBody>\n      </Card>\n    </Container>\n  );\n};\n\n/**\n * Panel Component\n *\n * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.\n *\n * Props:\n * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,\n *   enabling the exchange of data and events.\n *\n * Features:\n * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors\n *   that may occur during the rendering of the plugin's content.\n * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.\n * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the\n *   DSL defined by the plugin authors.\n *\n * Example Usage:\n * ```tsx\n * <Panel communicationLayer={myCommunicationLayer} />\n * ```\n *\n * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary\n * communication and data exchange with the player-ui/react library.\n */\nexport const Panel: React.FC<{\n  /** the communication layer to use for the extension */\n  readonly communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n  baseTheme?: Record<string, unknown>;\n}> = ({ communicationLayer, baseTheme }) => {\n  const { state, selectPlayer, selectPlugin, handleInteraction } =\n    useExtensionState({\n      communicationLayer,\n    });\n\n  const { reactPlayer, playerState } = useReactPlayer({\n    plugins: PLAYER_PLUGINS,\n  });\n\n  const dataController = useRef<WeakRef<DataController> | null>(null);\n\n  const currentFlow = useRef<Flow | null>(null);\n\n  useEffect(() => {\n    reactPlayer.player.hooks.dataController.tap(\"devtools-panel\", (d) => {\n      dataController.current = new WeakRef(d);\n    });\n  }, [reactPlayer]);\n\n  useEffect(() => {\n    // we subscribe to all messages from the devtools plugin\n    // so the plugin author can define their own events\n    PUBSUB_PLUGIN.subscribe(\"*\", (type: string, payload: string) => {\n      handleInteraction({\n        type,\n        payload,\n      });\n    });\n  }, []);\n\n  useEffect(() => {\n    const { player, plugin } = state.current;\n\n    const flow =\n      player && plugin\n        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW\n        : INITIAL_FLOW;\n\n    if (!currentFlow.current) {\n      currentFlow.current = flow;\n      reactPlayer.start(flow);\n      return;\n    }\n\n    const diff = flowDiff({\n      curr: currentFlow.current as Flow,\n      next: flow,\n    });\n\n    if (diff) {\n      const { change, value } = diff;\n\n      if (change === \"flow\") {\n        currentFlow.current = value;\n        reactPlayer.start(value);\n      } else if (change === \"data\") {\n        if (dataController.current) {\n          dataController.current.deref()?.set(value as Record<string, unknown>);\n        } else {\n          reactPlayer.start(flow);\n        }\n      }\n    }\n  }, [reactPlayer, state]);\n\n  const isDarkMode = useDarkMode();\n  const colorMode = isDarkMode ? \"dark\" : \"light\";\n\n  const config: ThemeConfig = {\n    initialColorMode: colorMode,\n    useSystemColorMode: true,\n  };\n  const theme = extendTheme({ config, ...baseTheme });\n\n  const Component = reactPlayer.Component as React.FC;\n\n  return (\n    <ChakraProvider resetCSS={false} theme={theme}>\n      <ThemeProvider theme=\"chrome\" colorScheme={colorMode}>\n        <ErrorBoundary fallbackRender={fallbackRender}>\n          <Flex\n            direction=\"column\"\n            h=\"100vh\"\n            alignItems={\"normal\"}\n            overflow=\"scroll\"\n          >\n            {state.current.player ? (\n              <Flex direction=\"column\" gap=\"20px\">\n                <Flex gap=\"16px\">\n                  <FormControl>\n                    <FormLabel>Player</FormLabel>\n                    <Select\n                      id=\"player\"\n                      value={state.current.player || \"\"}\n                      onChange={(event) => selectPlayer(event.target.value)}\n                    >\n                      {Object.keys(state.players).map((playerID) => (\n                        <option key={playerID} value={playerID}>\n                          {playerID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                  <FormControl>\n                    <FormLabel>Plugin</FormLabel>\n                    <Select\n                      id=\"plugin\"\n                      value={state.current.plugin || \"\"}\n                      onChange={(event) => selectPlugin(event.target.value)}\n                    >\n                      {Object.keys(\n                        state.players[state.current.player]?.plugins ?? [],\n                      ).map((pluginID) => (\n                        <option key={pluginID} value={pluginID}>\n                          {pluginID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                </Flex>\n                <Flex width=\"100%\">\n                  {playerState.status === \"error\" ? (\n                    fallbackRender({\n                      error: playerState.error,\n                      resetErrorBoundary: () => {},\n                    })\n                  ) : (\n                    <Component />\n                  )}\n                </Flex>\n                <details>\n                  <summary>Debug</summary>\n                  <pre style={{ maxHeight: \"30vh\", overflow: \"scroll\" }}>\n                    {JSON.stringify(state, null, 2)}\n                  </pre>\n                </details>\n              </Flex>\n            ) : (\n              <Flex justifyContent=\"center\" padding=\"6\">\n                <Text>\n                  No Player-UI instance or devtools plugin detected. Visit{\" \"}\n                  <a href=\"https://player-ui.github.io/\">\n                    https://player-ui.github.io/\n                  </a>{\" \"}\n                  for more info.\n                </Text>\n              </Flex>\n            )}\n          </Flex>\n        </ErrorBoundary>\n      </ThemeProvider>\n    </ChakraProvider>\n  );\n};\n","import DevtoolsUIAssetsPlugin from \"@devtools-ui/plugin\";\nimport { PubSubPlugin } from \"@player-ui/pubsub-plugin\";\nimport { CommonExpressionsPlugin } from \"@player-ui/common-expressions-plugin\";\nimport { CommonTypesPlugin } from \"@player-ui/common-types-plugin\";\nimport { DataChangeListenerPlugin } from \"@player-ui/data-change-listener-plugin\";\nimport {\n  ConsoleLogger,\n  Player,\n  PlayerPlugin,\n  ReactPlayer,\n  type ReactPlayerPlugin,\n} from \"@player-ui/react\";\n\nclass LogForwarder implements PlayerPlugin, ReactPlayerPlugin {\n  name = \"Log\";\n  apply(player: Player) {\n    player.logger.addHandler(new ConsoleLogger(\"trace\", console));\n  }\n\n  applyReact(reactPlayer: ReactPlayer) {\n    this.apply(reactPlayer.player);\n  }\n}\n\nexport const PUBSUB_PLUGIN = new PubSubPlugin();\n\nexport const PLAYER_PLUGINS: ReactPlayerPlugin[] = [\n  new CommonTypesPlugin(),\n  new CommonExpressionsPlugin(),\n  new DataChangeListenerPlugin(),\n  new DevtoolsUIAssetsPlugin(),\n  new LogForwarder(),\n  PUBSUB_PLUGIN,\n];\n","import type { CommunicationLayerMethods } from \"@player-devtools/types\";\nimport { useEffect, useMemo, useSyncExternalStore } from \"react\";\n\nimport { createExtensionClient } from \"@player-devtools/client\";\n\n/**\n * Thin React adapter over `createExtensionClient`.\n *\n * Creates the client once per `communicationLayer` identity, subscribes to\n * state via `useSyncExternalStore`, and tears down the Messenger on unmount.\n */\nexport const useExtensionState = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  communicationLayer: CommunicationLayerMethods;\n}) => {\n  const client = useMemo(\n    () => createExtensionClient(communicationLayer),\n    [communicationLayer],\n  );\n\n  useEffect(() => () => client.destroy(), [client]);\n\n  const state = useSyncExternalStore(client.subscribe, client.getState);\n\n  return {\n    state,\n    selectPlayer: client.selectPlayer,\n    selectPlugin: client.selectPlugin,\n    handleInteraction: client.handleInteraction,\n  };\n};\n","import type { Flow } from \"@player-ui/react\";\nimport { dequal } from \"dequal\";\n\n/**\n * Compares two Flow objects and identifies if there's a change in their structure or data.\n *\n * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them\n * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's\n * structure (excluding the `data` property), it returns an object indicating a \"flow\" change along with the\n * new flow. If there's a change in the `data` property, it returns an object indicating a \"data\" change along\n * with the new data. If there are no changes, it returns null.\n */\nexport const flowDiff = ({\n  curr,\n  next,\n}: {\n  curr: Flow;\n  next: Flow;\n}):\n  | { change: \"data\"; value: Flow[\"data\"] }\n  | { change: \"flow\"; value: Flow }\n  | null => {\n  // compare flows except for the `data` property\n  const currCopy = { ...curr, data: null };\n  const nextCopy = { ...next, data: null };\n\n  const baseFlowIsEqual = dequal(currCopy, nextCopy);\n\n  if (!baseFlowIsEqual) {\n    return { change: \"flow\", value: next };\n  }\n\n  // compare data\n  const currData = curr.data;\n  const nextData = next.data;\n\n  const dataIsEqual = dequal(currData, nextData);\n\n  if (!dataIsEqual) {\n    return { change: \"data\", value: nextData };\n  }\n\n  return null;\n};\n"],"mappings":"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","names":["import_react","DevtoolsUIAssetsPlugin","import_react","React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,212 @@
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx
+import React, { useRef } from "react";
+import { useReactPlayer } from "@player-ui/react";
+import { useEffect as useEffect2 } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  ChakraProvider,
+  Container,
+  extendTheme,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Select,
+  Text
+} from "@chakra-ui/react";
+import { ThemeProvider, useDarkMode } from "@devtools-ds/themes";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/plugins/index.ts
+import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+import { CommonExpressionsPlugin } from "@player-ui/common-expressions-plugin";
+import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
+import { DataChangeListenerPlugin } from "@player-ui/data-change-listener-plugin";
+import {
+  ConsoleLogger
+} from "@player-ui/react";
+var LogForwarder = class {
+  constructor() {
+    this.name = "Log";
+  }
+  apply(player) {
+    player.logger.addHandler(new ConsoleLogger("trace", console));
+  }
+  applyReact(reactPlayer) {
+    this.apply(reactPlayer.player);
+  }
+};
+var PUBSUB_PLUGIN = new PubSubPlugin();
+var PLAYER_PLUGINS = [
+  new CommonTypesPlugin(),
+  new CommonExpressionsPlugin(),
+  new DataChangeListenerPlugin(),
+  new DevtoolsUIAssetsPlugin(),
+  new LogForwarder(),
+  PUBSUB_PLUGIN
+];
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/state/index.ts
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { createExtensionClient } from "@player-devtools/client";
+var useExtensionState = ({
+  communicationLayer
+}) => {
+  const client = useMemo(
+    () => createExtensionClient(communicationLayer),
+    [communicationLayer]
+  );
+  useEffect(() => () => client.destroy(), [client]);
+  const state = useSyncExternalStore(client.subscribe, client.getState);
+  return {
+    state,
+    selectPlayer: client.selectPlayer,
+    selectPlugin: client.selectPlugin,
+    handleInteraction: client.handleInteraction
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/helpers/flowDiff.ts
+import { dequal } from "dequal";
+var flowDiff = ({
+  curr,
+  next
+}) => {
+  const currCopy = { ...curr, data: null };
+  const nextCopy = { ...next, data: null };
+  const baseFlowIsEqual = dequal(currCopy, nextCopy);
+  if (!baseFlowIsEqual) {
+    return { change: "flow", value: next };
+  }
+  const currData = curr.data;
+  const nextData = next.data;
+  const dataIsEqual = dequal(currData, nextData);
+  if (!dataIsEqual) {
+    return { change: "data", value: nextData };
+  }
+  return null;
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx
+var INITIAL_FLOW = {
+  id: "initial-flow",
+  views: [
+    {
+      id: "view-1",
+      type: "text",
+      value: "connecting..."
+    }
+  ],
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "view-1",
+        transitions: {}
+      }
+    }
+  }
+};
+var fallbackRender = ({
+  error
+}) => {
+  return /* @__PURE__ */ React.createElement(Container, { centerContent: true }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, null, /* @__PURE__ */ React.createElement(Heading, null, "Ops, something went wrong.")), /* @__PURE__ */ React.createElement(CardBody, null, /* @__PURE__ */ React.createElement(Text, { as: "pre" }, error.message))));
+};
+var Panel = ({ communicationLayer, baseTheme }) => {
+  const { state, selectPlayer, selectPlugin, handleInteraction } = useExtensionState({
+    communicationLayer
+  });
+  const { reactPlayer, playerState } = useReactPlayer({
+    plugins: PLAYER_PLUGINS
+  });
+  const dataController = useRef(null);
+  const currentFlow = useRef(null);
+  useEffect2(() => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
+      dataController.current = new WeakRef(d);
+    });
+  }, [reactPlayer]);
+  useEffect2(() => {
+    PUBSUB_PLUGIN.subscribe("*", (type, payload) => {
+      handleInteraction({
+        type,
+        payload
+      });
+    });
+  }, []);
+  useEffect2(() => {
+    const { player, plugin } = state.current;
+    const flow = player && plugin ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW : INITIAL_FLOW;
+    if (!currentFlow.current) {
+      currentFlow.current = flow;
+      reactPlayer.start(flow);
+      return;
+    }
+    const diff = flowDiff({
+      curr: currentFlow.current,
+      next: flow
+    });
+    if (diff) {
+      const { change, value } = diff;
+      if (change === "flow") {
+        currentFlow.current = value;
+        reactPlayer.start(value);
+      } else if (change === "data") {
+        if (dataController.current) {
+          dataController.current.deref()?.set(value);
+        } else {
+          reactPlayer.start(flow);
+        }
+      }
+    }
+  }, [reactPlayer, state]);
+  const isDarkMode = useDarkMode();
+  const colorMode = isDarkMode ? "dark" : "light";
+  const config = {
+    initialColorMode: colorMode,
+    useSystemColorMode: true
+  };
+  const theme = extendTheme({ config, ...baseTheme });
+  const Component = reactPlayer.Component;
+  return /* @__PURE__ */ React.createElement(ChakraProvider, { resetCSS: false, theme }, /* @__PURE__ */ React.createElement(ThemeProvider, { theme: "chrome", colorScheme: colorMode }, /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender }, /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      direction: "column",
+      h: "100vh",
+      alignItems: "normal",
+      overflow: "scroll"
+    },
+    state.current.player ? /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "20px" }, /* @__PURE__ */ React.createElement(Flex, { gap: "16px" }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, null, "Player"), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        id: "player",
+        value: state.current.player || "",
+        onChange: (event) => selectPlayer(event.target.value)
+      },
+      Object.keys(state.players).map((playerID) => /* @__PURE__ */ React.createElement("option", { key: playerID, value: playerID }, playerID))
+    )), /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, null, "Plugin"), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        id: "plugin",
+        value: state.current.plugin || "",
+        onChange: (event) => selectPlugin(event.target.value)
+      },
+      Object.keys(
+        state.players[state.current.player]?.plugins ?? []
+      ).map((pluginID) => /* @__PURE__ */ React.createElement("option", { key: pluginID, value: pluginID }, pluginID))
+    ))), /* @__PURE__ */ React.createElement(Flex, { width: "100%" }, playerState.status === "error" ? fallbackRender({
+      error: playerState.error,
+      resetErrorBoundary: () => {
+      }
+    }) : /* @__PURE__ */ React.createElement(Component, null)), /* @__PURE__ */ React.createElement("details", null, /* @__PURE__ */ React.createElement("summary", null, "Debug"), /* @__PURE__ */ React.createElement("pre", { style: { maxHeight: "30vh", overflow: "scroll" } }, JSON.stringify(state, null, 2)))) : /* @__PURE__ */ React.createElement(Flex, { justifyContent: "center", padding: "6" }, /* @__PURE__ */ React.createElement(Text, null, "No Player-UI instance or devtools plugin detected. Visit", " ", /* @__PURE__ */ React.createElement("a", { href: "https://player-ui.github.io/" }, "https://player-ui.github.io/"), " ", "for more info."))
+  ))));
+};
+export {
+  Panel
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,212 @@
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx
+import React, { useRef } from "react";
+import { useReactPlayer } from "@player-ui/react";
+import { useEffect as useEffect2 } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  ChakraProvider,
+  Container,
+  extendTheme,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Select,
+  Text
+} from "@chakra-ui/react";
+import { ThemeProvider, useDarkMode } from "@devtools-ds/themes";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/plugins/index.ts
+import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+import { CommonExpressionsPlugin } from "@player-ui/common-expressions-plugin";
+import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
+import { DataChangeListenerPlugin } from "@player-ui/data-change-listener-plugin";
+import {
+  ConsoleLogger
+} from "@player-ui/react";
+var LogForwarder = class {
+  constructor() {
+    this.name = "Log";
+  }
+  apply(player) {
+    player.logger.addHandler(new ConsoleLogger("trace", console));
+  }
+  applyReact(reactPlayer) {
+    this.apply(reactPlayer.player);
+  }
+};
+var PUBSUB_PLUGIN = new PubSubPlugin();
+var PLAYER_PLUGINS = [
+  new CommonTypesPlugin(),
+  new CommonExpressionsPlugin(),
+  new DataChangeListenerPlugin(),
+  new DevtoolsUIAssetsPlugin(),
+  new LogForwarder(),
+  PUBSUB_PLUGIN
+];
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/state/index.ts
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { createExtensionClient } from "@player-devtools/client";
+var useExtensionState = ({
+  communicationLayer
+}) => {
+  const client = useMemo(
+    () => createExtensionClient(communicationLayer),
+    [communicationLayer]
+  );
+  useEffect(() => () => client.destroy(), [client]);
+  const state = useSyncExternalStore(client.subscribe, client.getState);
+  return {
+    state,
+    selectPlayer: client.selectPlayer,
+    selectPlugin: client.selectPlugin,
+    handleInteraction: client.handleInteraction
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/helpers/flowDiff.ts
+import { dequal } from "dequal";
+var flowDiff = ({
+  curr,
+  next
+}) => {
+  const currCopy = { ...curr, data: null };
+  const nextCopy = { ...next, data: null };
+  const baseFlowIsEqual = dequal(currCopy, nextCopy);
+  if (!baseFlowIsEqual) {
+    return { change: "flow", value: next };
+  }
+  const currData = curr.data;
+  const nextData = next.data;
+  const dataIsEqual = dequal(currData, nextData);
+  if (!dataIsEqual) {
+    return { change: "data", value: nextData };
+  }
+  return null;
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx
+var INITIAL_FLOW = {
+  id: "initial-flow",
+  views: [
+    {
+      id: "view-1",
+      type: "text",
+      value: "connecting..."
+    }
+  ],
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "view-1",
+        transitions: {}
+      }
+    }
+  }
+};
+var fallbackRender = ({
+  error
+}) => {
+  return /* @__PURE__ */ React.createElement(Container, { centerContent: true }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, null, /* @__PURE__ */ React.createElement(Heading, null, "Ops, something went wrong.")), /* @__PURE__ */ React.createElement(CardBody, null, /* @__PURE__ */ React.createElement(Text, { as: "pre" }, error.message))));
+};
+var Panel = ({ communicationLayer, baseTheme }) => {
+  const { state, selectPlayer, selectPlugin, handleInteraction } = useExtensionState({
+    communicationLayer
+  });
+  const { reactPlayer, playerState } = useReactPlayer({
+    plugins: PLAYER_PLUGINS
+  });
+  const dataController = useRef(null);
+  const currentFlow = useRef(null);
+  useEffect2(() => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
+      dataController.current = new WeakRef(d);
+    });
+  }, [reactPlayer]);
+  useEffect2(() => {
+    PUBSUB_PLUGIN.subscribe("*", (type, payload) => {
+      handleInteraction({
+        type,
+        payload
+      });
+    });
+  }, []);
+  useEffect2(() => {
+    const { player, plugin } = state.current;
+    const flow = player && plugin ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW : INITIAL_FLOW;
+    if (!currentFlow.current) {
+      currentFlow.current = flow;
+      reactPlayer.start(flow);
+      return;
+    }
+    const diff = flowDiff({
+      curr: currentFlow.current,
+      next: flow
+    });
+    if (diff) {
+      const { change, value } = diff;
+      if (change === "flow") {
+        currentFlow.current = value;
+        reactPlayer.start(value);
+      } else if (change === "data") {
+        if (dataController.current) {
+          dataController.current.deref()?.set(value);
+        } else {
+          reactPlayer.start(flow);
+        }
+      }
+    }
+  }, [reactPlayer, state]);
+  const isDarkMode = useDarkMode();
+  const colorMode = isDarkMode ? "dark" : "light";
+  const config = {
+    initialColorMode: colorMode,
+    useSystemColorMode: true
+  };
+  const theme = extendTheme({ config, ...baseTheme });
+  const Component = reactPlayer.Component;
+  return /* @__PURE__ */ React.createElement(ChakraProvider, { resetCSS: false, theme }, /* @__PURE__ */ React.createElement(ThemeProvider, { theme: "chrome", colorScheme: colorMode }, /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender }, /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      direction: "column",
+      h: "100vh",
+      alignItems: "normal",
+      overflow: "scroll"
+    },
+    state.current.player ? /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "20px" }, /* @__PURE__ */ React.createElement(Flex, { gap: "16px" }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, null, "Player"), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        id: "player",
+        value: state.current.player || "",
+        onChange: (event) => selectPlayer(event.target.value)
+      },
+      Object.keys(state.players).map((playerID) => /* @__PURE__ */ React.createElement("option", { key: playerID, value: playerID }, playerID))
+    )), /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, null, "Plugin"), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        id: "plugin",
+        value: state.current.plugin || "",
+        onChange: (event) => selectPlugin(event.target.value)
+      },
+      Object.keys(
+        state.players[state.current.player]?.plugins ?? []
+      ).map((pluginID) => /* @__PURE__ */ React.createElement("option", { key: pluginID, value: pluginID }, pluginID))
+    ))), /* @__PURE__ */ React.createElement(Flex, { width: "100%" }, playerState.status === "error" ? fallbackRender({
+      error: playerState.error,
+      resetErrorBoundary: () => {
+      }
+    }) : /* @__PURE__ */ React.createElement(Component, null)), /* @__PURE__ */ React.createElement("details", null, /* @__PURE__ */ React.createElement("summary", null, "Debug"), /* @__PURE__ */ React.createElement("pre", { style: { maxHeight: "30vh", overflow: "scroll" } }, JSON.stringify(state, null, 2)))) : /* @__PURE__ */ React.createElement(Flex, { justifyContent: "center", padding: "6" }, /* @__PURE__ */ React.createElement(Text, null, "No Player-UI instance or devtools plugin detected. Visit", " ", /* @__PURE__ */ React.createElement("a", { href: "https://player-ui.github.io/" }, "https://player-ui.github.io/"), " ", "for more info."))
+  ))));
+};
+export {
+  Panel
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/panel/index.tsx","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/plugins/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/state/index.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/react/src/helpers/flowDiff.ts"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type {\n  MessengerOptions,\n  ExtensionSupportedEvents,\n} from \"@player-devtools/types\";\nimport { DataController, Flow, useReactPlayer } from \"@player-ui/react\";\nimport { useEffect } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  ChakraProvider,\n  Container,\n  extendTheme,\n  Flex,\n  FormControl,\n  FormLabel,\n  Heading,\n  Select,\n  Text,\n  type ThemeConfig,\n} from \"@chakra-ui/react\";\n\nimport { ThemeProvider, useDarkMode } from \"@devtools-ds/themes\";\n\nimport { PLAYER_PLUGINS, PUBSUB_PLUGIN } from \"../plugins\";\nimport { useExtensionState } from \"../state\";\nimport { flowDiff } from \"../helpers/flowDiff\";\n\n/** Placeholder flow rendered until a real Player flow arrives. */\nconst INITIAL_FLOW: Flow = {\n  id: \"initial-flow\",\n  views: [\n    {\n      id: \"view-1\",\n      type: \"text\",\n      value: \"connecting...\",\n    },\n  ],\n  navigation: {\n    BEGIN: \"FLOW_1\",\n    FLOW_1: {\n      startState: \"VIEW_1\",\n      VIEW_1: {\n        state_type: \"VIEW\",\n        ref: \"view-1\",\n        transitions: {},\n      },\n    },\n  },\n};\n\nconst fallbackRender: ErrorBoundary[\"props\"][\"fallbackRender\"] = ({\n  error,\n}) => {\n  return (\n    <Container centerContent>\n      <Card>\n        <CardHeader>\n          <Heading>Ops, something went wrong.</Heading>\n        </CardHeader>\n        <CardBody>\n          <Text as=\"pre\">{error.message}</Text>\n        </CardBody>\n      </Card>\n    </Container>\n  );\n};\n\n/**\n * Panel Component\n *\n * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.\n *\n * Props:\n * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,\n *   enabling the exchange of data and events.\n *\n * Features:\n * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors\n *   that may occur during the rendering of the plugin's content.\n * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.\n * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the\n *   DSL defined by the plugin authors.\n *\n * Example Usage:\n * ```tsx\n * <Panel communicationLayer={myCommunicationLayer} />\n * ```\n *\n * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary\n * communication and data exchange with the player-ui/react library.\n */\nexport const Panel: React.FC<{\n  /** the communication layer to use for the extension */\n  readonly communicationLayer: Pick<\n    MessengerOptions<ExtensionSupportedEvents>,\n    \"sendMessage\" | \"addListener\" | \"removeListener\"\n  >;\n  baseTheme?: Record<string, unknown>;\n}> = ({ communicationLayer, baseTheme }) => {\n  const { state, selectPlayer, selectPlugin, handleInteraction } =\n    useExtensionState({\n      communicationLayer,\n    });\n\n  const { reactPlayer, playerState } = useReactPlayer({\n    plugins: PLAYER_PLUGINS,\n  });\n\n  const dataController = useRef<WeakRef<DataController> | null>(null);\n\n  const currentFlow = useRef<Flow | null>(null);\n\n  useEffect(() => {\n    reactPlayer.player.hooks.dataController.tap(\"devtools-panel\", (d) => {\n      dataController.current = new WeakRef(d);\n    });\n  }, [reactPlayer]);\n\n  useEffect(() => {\n    // we subscribe to all messages from the devtools plugin\n    // so the plugin author can define their own events\n    PUBSUB_PLUGIN.subscribe(\"*\", (type: string, payload: string) => {\n      handleInteraction({\n        type,\n        payload,\n      });\n    });\n  }, []);\n\n  useEffect(() => {\n    const { player, plugin } = state.current;\n\n    const flow =\n      player && plugin\n        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW\n        : INITIAL_FLOW;\n\n    if (!currentFlow.current) {\n      currentFlow.current = flow;\n      reactPlayer.start(flow);\n      return;\n    }\n\n    const diff = flowDiff({\n      curr: currentFlow.current as Flow,\n      next: flow,\n    });\n\n    if (diff) {\n      const { change, value } = diff;\n\n      if (change === \"flow\") {\n        currentFlow.current = value;\n        reactPlayer.start(value);\n      } else if (change === \"data\") {\n        if (dataController.current) {\n          dataController.current.deref()?.set(value as Record<string, unknown>);\n        } else {\n          reactPlayer.start(flow);\n        }\n      }\n    }\n  }, [reactPlayer, state]);\n\n  const isDarkMode = useDarkMode();\n  const colorMode = isDarkMode ? \"dark\" : \"light\";\n\n  const config: ThemeConfig = {\n    initialColorMode: colorMode,\n    useSystemColorMode: true,\n  };\n  const theme = extendTheme({ config, ...baseTheme });\n\n  const Component = reactPlayer.Component as React.FC;\n\n  return (\n    <ChakraProvider resetCSS={false} theme={theme}>\n      <ThemeProvider theme=\"chrome\" colorScheme={colorMode}>\n        <ErrorBoundary fallbackRender={fallbackRender}>\n          <Flex\n            direction=\"column\"\n            h=\"100vh\"\n            alignItems={\"normal\"}\n            overflow=\"scroll\"\n          >\n            {state.current.player ? (\n              <Flex direction=\"column\" gap=\"20px\">\n                <Flex gap=\"16px\">\n                  <FormControl>\n                    <FormLabel>Player</FormLabel>\n                    <Select\n                      id=\"player\"\n                      value={state.current.player || \"\"}\n                      onChange={(event) => selectPlayer(event.target.value)}\n                    >\n                      {Object.keys(state.players).map((playerID) => (\n                        <option key={playerID} value={playerID}>\n                          {playerID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                  <FormControl>\n                    <FormLabel>Plugin</FormLabel>\n                    <Select\n                      id=\"plugin\"\n                      value={state.current.plugin || \"\"}\n                      onChange={(event) => selectPlugin(event.target.value)}\n                    >\n                      {Object.keys(\n                        state.players[state.current.player]?.plugins ?? [],\n                      ).map((pluginID) => (\n                        <option key={pluginID} value={pluginID}>\n                          {pluginID}\n                        </option>\n                      ))}\n                    </Select>\n                  </FormControl>\n                </Flex>\n                <Flex width=\"100%\">\n                  {playerState.status === \"error\" ? (\n                    fallbackRender({\n                      error: playerState.error,\n                      resetErrorBoundary: () => {},\n                    })\n                  ) : (\n                    <Component />\n                  )}\n                </Flex>\n                <details>\n                  <summary>Debug</summary>\n                  <pre style={{ maxHeight: \"30vh\", overflow: \"scroll\" }}>\n                    {JSON.stringify(state, null, 2)}\n                  </pre>\n                </details>\n              </Flex>\n            ) : (\n              <Flex justifyContent=\"center\" padding=\"6\">\n                <Text>\n                  No Player-UI instance or devtools plugin detected. Visit{\" \"}\n                  <a href=\"https://player-ui.github.io/\">\n                    https://player-ui.github.io/\n                  </a>{\" \"}\n                  for more info.\n                </Text>\n              </Flex>\n            )}\n          </Flex>\n        </ErrorBoundary>\n      </ThemeProvider>\n    </ChakraProvider>\n  );\n};\n","import DevtoolsUIAssetsPlugin from \"@devtools-ui/plugin\";\nimport { PubSubPlugin } from \"@player-ui/pubsub-plugin\";\nimport { CommonExpressionsPlugin } from \"@player-ui/common-expressions-plugin\";\nimport { CommonTypesPlugin } from \"@player-ui/common-types-plugin\";\nimport { DataChangeListenerPlugin } from \"@player-ui/data-change-listener-plugin\";\nimport {\n  ConsoleLogger,\n  Player,\n  PlayerPlugin,\n  ReactPlayer,\n  type ReactPlayerPlugin,\n} from \"@player-ui/react\";\n\nclass LogForwarder implements PlayerPlugin, ReactPlayerPlugin {\n  name = \"Log\";\n  apply(player: Player) {\n    player.logger.addHandler(new ConsoleLogger(\"trace\", console));\n  }\n\n  applyReact(reactPlayer: ReactPlayer) {\n    this.apply(reactPlayer.player);\n  }\n}\n\nexport const PUBSUB_PLUGIN = new PubSubPlugin();\n\nexport const PLAYER_PLUGINS: ReactPlayerPlugin[] = [\n  new CommonTypesPlugin(),\n  new CommonExpressionsPlugin(),\n  new DataChangeListenerPlugin(),\n  new DevtoolsUIAssetsPlugin(),\n  new LogForwarder(),\n  PUBSUB_PLUGIN,\n];\n","import type { CommunicationLayerMethods } from \"@player-devtools/types\";\nimport { useEffect, useMemo, useSyncExternalStore } from \"react\";\n\nimport { createExtensionClient } from \"@player-devtools/client\";\n\n/**\n * Thin React adapter over `createExtensionClient`.\n *\n * Creates the client once per `communicationLayer` identity, subscribes to\n * state via `useSyncExternalStore`, and tears down the Messenger on unmount.\n */\nexport const useExtensionState = ({\n  communicationLayer,\n}: {\n  /** the communication layer to use for the extension */\n  communicationLayer: CommunicationLayerMethods;\n}) => {\n  const client = useMemo(\n    () => createExtensionClient(communicationLayer),\n    [communicationLayer],\n  );\n\n  useEffect(() => () => client.destroy(), [client]);\n\n  const state = useSyncExternalStore(client.subscribe, client.getState);\n\n  return {\n    state,\n    selectPlayer: client.selectPlayer,\n    selectPlugin: client.selectPlugin,\n    handleInteraction: client.handleInteraction,\n  };\n};\n","import type { Flow } from \"@player-ui/react\";\nimport { dequal } from \"dequal\";\n\n/**\n * Compares two Flow objects and identifies if there's a change in their structure or data.\n *\n * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them\n * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's\n * structure (excluding the `data` property), it returns an object indicating a \"flow\" change along with the\n * new flow. If there's a change in the `data` property, it returns an object indicating a \"data\" change along\n * with the new data. If there are no changes, it returns null.\n */\nexport const flowDiff = ({\n  curr,\n  next,\n}: {\n  curr: Flow;\n  next: Flow;\n}):\n  | { change: \"data\"; value: Flow[\"data\"] }\n  | { change: \"flow\"; value: Flow }\n  | null => {\n  // compare flows except for the `data` property\n  const currCopy = { ...curr, data: null };\n  const nextCopy = { ...next, data: null };\n\n  const baseFlowIsEqual = dequal(currCopy, nextCopy);\n\n  if (!baseFlowIsEqual) {\n    return { change: \"flow\", value: next };\n  }\n\n  // compare data\n  const currData = curr.data;\n  const nextData = next.data;\n\n  const dataIsEqual = dequal(currData, nextData);\n\n  if (!dataIsEqual) {\n    return { change: \"data\", value: nextData };\n  }\n\n  return null;\n};\n"],"mappings":"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","names":["useEffect","useEffect"]}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "name": "@player-devtools/client-react",
+  "version": "0.13.1--canary.17.955",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@player-devtools/client": "0.13.1--canary.17.955",
+    "@player-devtools/messenger": "0.13.1--canary.17.955",
+    "@player-devtools/types": "0.13.1--canary.17.955",
+    "@player-devtools/utils": "0.13.1--canary.17.955",
+    "@chakra-ui/react": "2.8.2",
+    "@player-ui/pubsub-plugin": "0.12.0-next.1",
+    "@player-ui/player": "0.12.0-next.1",
+    "@player-ui/react": "0.12.0-next.1",
+    "@player-ui/common-expressions-plugin": "0.12.0-next.1",
+    "@player-ui/common-types-plugin": "0.12.0-next.1",
+    "@player-ui/data-change-listener-plugin": "0.12.0-next.1",
+    "@devtools-ui/plugin": "0.4.0",
+    "@types/react": "^18.2.51",
+    "immer": "^10.0.3",
+    "react": "^18.2.0",
+    "react-error-boundary": "^4.0.12",
+    "dequal": "^2.0.2",
+    "@devtools-ds/themes": "^1.2.1",
+    "tslib": "^2.6.2"
+  },
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
+  "peerDependencies": {}
+}

package/src/helpers/__tests__/flowDiff.test.ts

@@ -0,0 +1,72 @@
+import { describe, test, expect } from "vitest";
+import type { Flow } from "@player-ui/react";
+import { flowDiff } from "../flowDiff";
+
+const mockFlow1: Flow = {
+  id: "flow",
+  views: [
+    {
+      id: "view",
+      type: "info",
+    },
+  ],
+  data: {
+    foo: "bar",
+  },
+  navigation: {
+    BEGIN: "BEGIN",
+  },
+};
+
+const mockFlow2: Flow = {
+  id: "flow",
+  views: [
+    {
+      id: "view",
+      type: "info",
+    },
+  ],
+  data: {
+    foo: "bar",
+    something: "else",
+  },
+  navigation: {
+    BEGIN: "BEGIN",
+  },
+};
+
+const mockFlow3: Flow = {
+  id: "another_flow",
+  views: [
+    {
+      id: "view",
+      type: "info",
+    },
+  ],
+  data: {
+    foo: "bar",
+  },
+  navigation: {
+    BEGIN: "BEGIN",
+  },
+};
+
+describe("flowDiff", () => {
+  test("returns null if no changes", () => {
+    const result = flowDiff({ curr: mockFlow1, next: mockFlow1 });
+
+    expect(result).toBeNull();
+  });
+
+  test("returns flow change if base flow is different", () => {
+    const result = flowDiff({ curr: mockFlow1, next: mockFlow3 });
+
+    expect(result).toEqual({ change: "flow", value: mockFlow3 });
+  });
+
+  test("returns data change if data is different", () => {
+    const result = flowDiff({ curr: mockFlow1, next: mockFlow2 });
+
+    expect(result).toEqual({ change: "data", value: mockFlow2.data });
+  });
+});

package/src/helpers/flowDiff.ts

@@ -0,0 +1,44 @@
+import type { Flow } from "@player-ui/react";
+import { dequal } from "dequal";
+
+/**
+ * Compares two Flow objects and identifies if there's a change in their structure or data.
+ *
+ * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them
+ * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's
+ * structure (excluding the `data` property), it returns an object indicating a "flow" change along with the
+ * new flow. If there's a change in the `data` property, it returns an object indicating a "data" change along
+ * with the new data. If there are no changes, it returns null.
+ */
+export const flowDiff = ({
+  curr,
+  next,
+}: {
+  curr: Flow;
+  next: Flow;
+}):
+  | { change: "data"; value: Flow["data"] }
+  | { change: "flow"; value: Flow }
+  | null => {
+  // compare flows except for the `data` property
+  const currCopy = { ...curr, data: null };
+  const nextCopy = { ...next, data: null };
+
+  const baseFlowIsEqual = dequal(currCopy, nextCopy);
+
+  if (!baseFlowIsEqual) {
+    return { change: "flow", value: next };
+  }
+
+  // compare data
+  const currData = curr.data;
+  const nextData = next.data;
+
+  const dataIsEqual = dequal(currData, nextData);
+
+  if (!dataIsEqual) {
+    return { change: "data", value: nextData };
+  }
+
+  return null;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { Panel } from "./panel";

package/src/panel/index.tsx

@@ -0,0 +1,256 @@
+import React, { useRef } from "react";
+import type {
+  MessengerOptions,
+  ExtensionSupportedEvents,
+} from "@player-devtools/types";
+import { DataController, Flow, useReactPlayer } from "@player-ui/react";
+import { useEffect } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  ChakraProvider,
+  Container,
+  extendTheme,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Select,
+  Text,
+  type ThemeConfig,
+} from "@chakra-ui/react";
+
+import { ThemeProvider, useDarkMode } from "@devtools-ds/themes";
+
+import { PLAYER_PLUGINS, PUBSUB_PLUGIN } from "../plugins";
+import { useExtensionState } from "../state";
+import { flowDiff } from "../helpers/flowDiff";
+
+/** Placeholder flow rendered until a real Player flow arrives. */
+const INITIAL_FLOW: Flow = {
+  id: "initial-flow",
+  views: [
+    {
+      id: "view-1",
+      type: "text",
+      value: "connecting...",
+    },
+  ],
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "view-1",
+        transitions: {},
+      },
+    },
+  },
+};
+
+const fallbackRender: ErrorBoundary["props"]["fallbackRender"] = ({
+  error,
+}) => {
+  return (
+    <Container centerContent>
+      <Card>
+        <CardHeader>
+          <Heading>Ops, something went wrong.</Heading>
+        </CardHeader>
+        <CardBody>
+          <Text as="pre">{error.message}</Text>
+        </CardBody>
+      </Card>
+    </Container>
+  );
+};
+
+/**
+ * Panel Component
+ *
+ * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.
+ *
+ * Props:
+ * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,
+ *   enabling the exchange of data and events.
+ *
+ * Features:
+ * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors
+ *   that may occur during the rendering of the plugin's content.
+ * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.
+ * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the
+ *   DSL defined by the plugin authors.
+ *
+ * Example Usage:
+ * ```tsx
+ * <Panel communicationLayer={myCommunicationLayer} />
+ * ```
+ *
+ * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary
+ * communication and data exchange with the player-ui/react library.
+ */
+export const Panel: React.FC<{
+  /** the communication layer to use for the extension */
+  readonly communicationLayer: Pick<
+    MessengerOptions<ExtensionSupportedEvents>,
+    "sendMessage" | "addListener" | "removeListener"
+  >;
+  baseTheme?: Record<string, unknown>;
+}> = ({ communicationLayer, baseTheme }) => {
+  const { state, selectPlayer, selectPlugin, handleInteraction } =
+    useExtensionState({
+      communicationLayer,
+    });
+
+  const { reactPlayer, playerState } = useReactPlayer({
+    plugins: PLAYER_PLUGINS,
+  });
+
+  const dataController = useRef<WeakRef<DataController> | null>(null);
+
+  const currentFlow = useRef<Flow | null>(null);
+
+  useEffect(() => {
+    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
+      dataController.current = new WeakRef(d);
+    });
+  }, [reactPlayer]);
+
+  useEffect(() => {
+    // we subscribe to all messages from the devtools plugin
+    // so the plugin author can define their own events
+    PUBSUB_PLUGIN.subscribe("*", (type: string, payload: string) => {
+      handleInteraction({
+        type,
+        payload,
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    const { player, plugin } = state.current;
+
+    const flow =
+      player && plugin
+        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW
+        : INITIAL_FLOW;
+
+    if (!currentFlow.current) {
+      currentFlow.current = flow;
+      reactPlayer.start(flow);
+      return;
+    }
+
+    const diff = flowDiff({
+      curr: currentFlow.current as Flow,
+      next: flow,
+    });
+
+    if (diff) {
+      const { change, value } = diff;
+
+      if (change === "flow") {
+        currentFlow.current = value;
+        reactPlayer.start(value);
+      } else if (change === "data") {
+        if (dataController.current) {
+          dataController.current.deref()?.set(value as Record<string, unknown>);
+        } else {
+          reactPlayer.start(flow);
+        }
+      }
+    }
+  }, [reactPlayer, state]);
+
+  const isDarkMode = useDarkMode();
+  const colorMode = isDarkMode ? "dark" : "light";
+
+  const config: ThemeConfig = {
+    initialColorMode: colorMode,
+    useSystemColorMode: true,
+  };
+  const theme = extendTheme({ config, ...baseTheme });
+
+  const Component = reactPlayer.Component as React.FC;
+
+  return (
+    <ChakraProvider resetCSS={false} theme={theme}>
+      <ThemeProvider theme="chrome" colorScheme={colorMode}>
+        <ErrorBoundary fallbackRender={fallbackRender}>
+          <Flex
+            direction="column"
+            h="100vh"
+            alignItems={"normal"}
+            overflow="scroll"
+          >
+            {state.current.player ? (
+              <Flex direction="column" gap="20px">
+                <Flex gap="16px">
+                  <FormControl>
+                    <FormLabel>Player</FormLabel>
+                    <Select
+                      id="player"
+                      value={state.current.player || ""}
+                      onChange={(event) => selectPlayer(event.target.value)}
+                    >
+                      {Object.keys(state.players).map((playerID) => (
+                        <option key={playerID} value={playerID}>
+                          {playerID}
+                        </option>
+                      ))}
+                    </Select>
+                  </FormControl>
+                  <FormControl>
+                    <FormLabel>Plugin</FormLabel>
+                    <Select
+                      id="plugin"
+                      value={state.current.plugin || ""}
+                      onChange={(event) => selectPlugin(event.target.value)}
+                    >
+                      {Object.keys(
+                        state.players[state.current.player]?.plugins ?? [],
+                      ).map((pluginID) => (
+                        <option key={pluginID} value={pluginID}>
+                          {pluginID}
+                        </option>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </Flex>
+                <Flex width="100%">
+                  {playerState.status === "error" ? (
+                    fallbackRender({
+                      error: playerState.error,
+                      resetErrorBoundary: () => {},
+                    })
+                  ) : (
+                    <Component />
+                  )}
+                </Flex>
+                <details>
+                  <summary>Debug</summary>
+                  <pre style={{ maxHeight: "30vh", overflow: "scroll" }}>
+                    {JSON.stringify(state, null, 2)}
+                  </pre>
+                </details>
+              </Flex>
+            ) : (
+              <Flex justifyContent="center" padding="6">
+                <Text>
+                  No Player-UI instance or devtools plugin detected. Visit{" "}
+                  <a href="https://player-ui.github.io/">
+                    https://player-ui.github.io/
+                  </a>{" "}
+                  for more info.
+                </Text>
+              </Flex>
+            )}
+          </Flex>
+        </ErrorBoundary>
+      </ThemeProvider>
+    </ChakraProvider>
+  );
+};

package/src/plugins/index.ts

@@ -0,0 +1,34 @@
+import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+import { CommonExpressionsPlugin } from "@player-ui/common-expressions-plugin";
+import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
+import { DataChangeListenerPlugin } from "@player-ui/data-change-listener-plugin";
+import {
+  ConsoleLogger,
+  Player,
+  PlayerPlugin,
+  ReactPlayer,
+  type ReactPlayerPlugin,
+} from "@player-ui/react";
+
+class LogForwarder implements PlayerPlugin, ReactPlayerPlugin {
+  name = "Log";
+  apply(player: Player) {
+    player.logger.addHandler(new ConsoleLogger("trace", console));
+  }
+
+  applyReact(reactPlayer: ReactPlayer) {
+    this.apply(reactPlayer.player);
+  }
+}
+
+export const PUBSUB_PLUGIN = new PubSubPlugin();
+
+export const PLAYER_PLUGINS: ReactPlayerPlugin[] = [
+  new CommonTypesPlugin(),
+  new CommonExpressionsPlugin(),
+  new DataChangeListenerPlugin(),
+  new DevtoolsUIAssetsPlugin(),
+  new LogForwarder(),
+  PUBSUB_PLUGIN,
+];

package/src/state/index.ts

@@ -0,0 +1,33 @@
+import type { CommunicationLayerMethods } from "@player-devtools/types";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+
+import { createExtensionClient } from "@player-devtools/client";
+
+/**
+ * Thin React adapter over `createExtensionClient`.
+ *
+ * Creates the client once per `communicationLayer` identity, subscribes to
+ * state via `useSyncExternalStore`, and tears down the Messenger on unmount.
+ */
+export const useExtensionState = ({
+  communicationLayer,
+}: {
+  /** the communication layer to use for the extension */
+  communicationLayer: CommunicationLayerMethods;
+}) => {
+  const client = useMemo(
+    () => createExtensionClient(communicationLayer),
+    [communicationLayer],
+  );
+
+  useEffect(() => () => client.destroy(), [client]);
+
+  const state = useSyncExternalStore(client.subscribe, client.getState);
+
+  return {
+    state,
+    selectPlayer: client.selectPlayer,
+    selectPlugin: client.selectPlugin,
+    handleInteraction: client.handleInteraction,
+  };
+};

package/types/helpers/flowDiff.d.ts

@@ -0,0 +1,21 @@
+import type { Flow } from "@player-ui/react";
+/**
+ * Compares two Flow objects and identifies if there's a change in their structure or data.
+ *
+ * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them
+ * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's
+ * structure (excluding the `data` property), it returns an object indicating a "flow" change along with the
+ * new flow. If there's a change in the `data` property, it returns an object indicating a "data" change along
+ * with the new data. If there are no changes, it returns null.
+ */
+export declare const flowDiff: ({ curr, next, }: {
+    curr: Flow;
+    next: Flow;
+}) => {
+    change: "data";
+    value: Flow["data"];
+} | {
+    change: "flow";
+    value: Flow;
+} | null;
+//# sourceMappingURL=flowDiff.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export { Panel } from "./panel";
+//# sourceMappingURL=index.d.ts.map

package/types/panel/index.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { MessengerOptions, ExtensionSupportedEvents } from "@player-devtools/types";
+/**
+ * Panel Component
+ *
+ * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.
+ *
+ * Props:
+ * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,
+ *   enabling the exchange of data and events.
+ *
+ * Features:
+ * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors
+ *   that may occur during the rendering of the plugin's content.
+ * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.
+ * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the
+ *   DSL defined by the plugin authors.
+ *
+ * Example Usage:
+ * ```tsx
+ * <Panel communicationLayer={myCommunicationLayer} />
+ * ```
+ *
+ * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary
+ * communication and data exchange with the player-ui/react library.
+ */
+export declare const Panel: React.FC<{
+    /** the communication layer to use for the extension */
+    readonly communicationLayer: Pick<MessengerOptions<ExtensionSupportedEvents>, "sendMessage" | "addListener" | "removeListener">;
+    baseTheme?: Record<string, unknown>;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/types/plugins/index.d.ts

@@ -0,0 +1,5 @@
+import { PubSubPlugin } from "@player-ui/pubsub-plugin";
+import { type ReactPlayerPlugin } from "@player-ui/react";
+export declare const PUBSUB_PLUGIN: PubSubPlugin;
+export declare const PLAYER_PLUGINS: ReactPlayerPlugin[];
+//# sourceMappingURL=index.d.ts.map

package/types/state/index.d.ts

@@ -0,0 +1,21 @@
+import type { CommunicationLayerMethods } from "@player-devtools/types";
+/**
+ * Thin React adapter over `createExtensionClient`.
+ *
+ * Creates the client once per `communicationLayer` identity, subscribes to
+ * state via `useSyncExternalStore`, and tears down the Messenger on unmount.
+ */
+export declare const useExtensionState: ({ communicationLayer, }: {
+    /** the communication layer to use for the extension */
+    communicationLayer: CommunicationLayerMethods;
+}) => {
+    state: import("@player-devtools/types").ExtensionState;
+    selectPlayer: (playerID: string) => void;
+    selectPlugin: (pluginID: string) => void;
+    handleInteraction: (interaction: {
+        type: string;
+        payload?: string;
+        target?: string;
+    }) => void;
+};
+//# sourceMappingURL=index.d.ts.map