@player-devtools/client 0.0.2-next.0

package/dist/index.legacy-esm.js

@@ -0,0 +1,354 @@
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/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/src/constants/index.ts
+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 INITIAL_EXTENSION_STATE = {
+  current: {
+    player: null,
+    plugin: null
+  },
+  players: {}
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/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/src/state/index.ts
+import { Messenger } from "@player-devtools/messenger";
+import { useCallback, useEffect, useMemo, useReducer } from "react";
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts
+import { dsetAssign } from "@player-devtools/utils";
+import { produce } from "immer";
+var reducer = (state, transaction) => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { plugins }
+        } = transaction;
+        const [plugin] = Object.values(plugins);
+        if (!plugin) return;
+        draft.current.player = sender;
+        draft.current.plugin = draft.current.plugin || plugin.id;
+        dsetAssign(draft, ["players", sender, "plugins"], plugins, true);
+        dsetAssign(draft.players, [sender, "active"], true);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { flow, pluginID }
+        } = transaction;
+        dsetAssign(
+          draft,
+          ["players", sender, "plugins", pluginID, "flow"],
+          flow
+        );
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { data, pluginID }
+        } = transaction;
+        dsetAssign(
+          draft,
+          ["players", sender, "plugins", pluginID, "flow", "data"],
+          data
+        );
+      });
+    case "MESSENGER_EVENT_BATCH":
+      return transaction.payload.events.reduce(reducer, state);
+    case "PLAYER_DEVTOOLS_PLAYER_STOPPED":
+      return produce(state, (draft) => {
+        const { sender } = transaction;
+        dsetAssign(draft, ["players", sender, "active"], false);
+      });
+    case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
+      return produce(state, (draft) => {
+        const { playerID } = transaction.payload;
+        draft.current.player = playerID;
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
+      return produce(state, (draft) => {
+        const { pluginID } = transaction.payload;
+        draft.current.plugin = pluginID;
+      });
+    default:
+      return state;
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts
+var NOOP_ID = -1;
+var useExtensionState = ({
+  communicationLayer
+}) => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_EXTENSION_STATE);
+  const messengerOptions = useMemo(
+    () => ({
+      context: "devtools",
+      target: "player",
+      messageCallback: (message) => {
+        dispatch(message);
+      },
+      ...communicationLayer,
+      logger: console
+    }),
+    [dispatch, communicationLayer]
+  );
+  const messenger = useMemo(
+    () => new Messenger(messengerOptions),
+    [messengerOptions]
+  );
+  useEffect(() => {
+    return () => {
+      messenger.destroy();
+    };
+  }, []);
+  const selectPlayer = useCallback(
+    (playerID) => {
+      dispatch({
+        id: NOOP_ID,
+        sender: "internal",
+        context: "devtools",
+        _messenger_: false,
+        timestamp: Date.now(),
+        type: "PLAYER_DEVTOOLS_PLAYER_SELECTED",
+        payload: {
+          playerID
+        }
+      });
+      messenger.sendMessage({
+        type: "PLAYER_DEVTOOLS_PLUGIN_INTERACTION",
+        payload: {
+          type: "player-selected",
+          payload: playerID
+        }
+      });
+    },
+    [dispatch]
+  );
+  const selectPlugin = useCallback(
+    (pluginID) => {
+      dispatch({
+        id: NOOP_ID,
+        sender: "internal",
+        context: "devtools",
+        _messenger_: false,
+        timestamp: Date.now(),
+        type: "PLAYER_DEVTOOLS_PLUGIN_SELECTED",
+        payload: {
+          pluginID
+        }
+      });
+    },
+    [dispatch]
+  );
+  const handleInteraction = useCallback(
+    ({
+      type,
+      payload
+    }) => {
+      messenger.sendMessage({
+        type: "PLAYER_DEVTOOLS_PLUGIN_INTERACTION",
+        payload: {
+          type,
+          payload
+        },
+        ...state.current.player ? { target: state.current.player } : {}
+      });
+    },
+    [messenger]
+  );
+  return { state, selectPlayer, selectPlugin, handleInteraction };
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/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/src/panel/index.tsx
+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,354 @@
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/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/src/constants/index.ts
+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 INITIAL_EXTENSION_STATE = {
+  current: {
+    player: null,
+    plugin: null
+  },
+  players: {}
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/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/src/state/index.ts
+import { Messenger } from "@player-devtools/messenger";
+import { useCallback, useEffect, useMemo, useReducer } from "react";
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/reducer.ts
+import { dsetAssign } from "@player-devtools/utils";
+import { produce } from "immer";
+var reducer = (state, transaction) => {
+  switch (transaction.type) {
+    case "PLAYER_DEVTOOLS_PLAYER_INIT":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { plugins }
+        } = transaction;
+        const [plugin] = Object.values(plugins);
+        if (!plugin) return;
+        draft.current.player = sender;
+        draft.current.plugin = draft.current.plugin || plugin.id;
+        dsetAssign(draft, ["players", sender, "plugins"], plugins, true);
+        dsetAssign(draft.players, [sender, "active"], true);
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { flow, pluginID }
+        } = transaction;
+        dsetAssign(
+          draft,
+          ["players", sender, "plugins", pluginID, "flow"],
+          flow
+        );
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE":
+      return produce(state, (draft) => {
+        const {
+          sender,
+          payload: { data, pluginID }
+        } = transaction;
+        dsetAssign(
+          draft,
+          ["players", sender, "plugins", pluginID, "flow", "data"],
+          data
+        );
+      });
+    case "MESSENGER_EVENT_BATCH":
+      return transaction.payload.events.reduce(reducer, state);
+    case "PLAYER_DEVTOOLS_PLAYER_STOPPED":
+      return produce(state, (draft) => {
+        const { sender } = transaction;
+        dsetAssign(draft, ["players", sender, "active"], false);
+      });
+    case "PLAYER_DEVTOOLS_PLAYER_SELECTED":
+      return produce(state, (draft) => {
+        const { playerID } = transaction.payload;
+        draft.current.player = playerID;
+      });
+    case "PLAYER_DEVTOOLS_PLUGIN_SELECTED":
+      return produce(state, (draft) => {
+        const { pluginID } = transaction.payload;
+        draft.current.plugin = pluginID;
+      });
+    default:
+      return state;
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/src/state/index.ts
+var NOOP_ID = -1;
+var useExtensionState = ({
+  communicationLayer
+}) => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_EXTENSION_STATE);
+  const messengerOptions = useMemo(
+    () => ({
+      context: "devtools",
+      target: "player",
+      messageCallback: (message) => {
+        dispatch(message);
+      },
+      ...communicationLayer,
+      logger: console
+    }),
+    [dispatch, communicationLayer]
+  );
+  const messenger = useMemo(
+    () => new Messenger(messengerOptions),
+    [messengerOptions]
+  );
+  useEffect(() => {
+    return () => {
+      messenger.destroy();
+    };
+  }, []);
+  const selectPlayer = useCallback(
+    (playerID) => {
+      dispatch({
+        id: NOOP_ID,
+        sender: "internal",
+        context: "devtools",
+        _messenger_: false,
+        timestamp: Date.now(),
+        type: "PLAYER_DEVTOOLS_PLAYER_SELECTED",
+        payload: {
+          playerID
+        }
+      });
+      messenger.sendMessage({
+        type: "PLAYER_DEVTOOLS_PLUGIN_INTERACTION",
+        payload: {
+          type: "player-selected",
+          payload: playerID
+        }
+      });
+    },
+    [dispatch]
+  );
+  const selectPlugin = useCallback(
+    (pluginID) => {
+      dispatch({
+        id: NOOP_ID,
+        sender: "internal",
+        context: "devtools",
+        _messenger_: false,
+        timestamp: Date.now(),
+        type: "PLAYER_DEVTOOLS_PLUGIN_SELECTED",
+        payload: {
+          pluginID
+        }
+      });
+    },
+    [dispatch]
+  );
+  const handleInteraction = useCallback(
+    ({
+      type,
+      payload
+    }) => {
+      messenger.sendMessage({
+        type: "PLAYER_DEVTOOLS_PLUGIN_INTERACTION",
+        payload: {
+          type,
+          payload
+        },
+        ...state.current.player ? { target: state.current.player } : {}
+      });
+    },
+    [messenger]
+  );
+  return { state, selectPlayer, selectPlugin, handleInteraction };
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/client/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/src/panel/index.tsx
+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