@dxos/plugin-debug 0.6.8-main.046e6cf

package/dist/lib/browser/index.mjs

@@ -0,0 +1,658 @@
+import {
+  DebugAction,
+  DebugContext
+} from "./chunk-RYK3J66D.mjs";
+import {
+  DEBUG_PLUGIN,
+  meta_default
+} from "./chunk-WEGYHXMB.mjs";
+
+// packages/plugins/experimental/plugin-debug/src/DebugPlugin.tsx
+import { Bug, Hammer } from "@phosphor-icons/react";
+import React5, { useEffect as useEffect3, useState as useState3 } from "react";
+import { getPlugin, parseGraphPlugin as parseGraphPlugin2, parseIntentPlugin, resolvePlugin } from "@dxos/app-framework";
+import { Timer } from "@dxos/async";
+import { LocalStorageStore } from "@dxos/local-storage";
+import { createExtension, Graph } from "@dxos/plugin-graph";
+import { SpaceAction } from "@dxos/plugin-space";
+import { CollectionType } from "@dxos/plugin-space/types";
+import { SpaceState, isSpace } from "@dxos/react-client/echo";
+import { Main } from "@dxos/react-ui";
+import { baseSurface, topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from "@dxos/react-ui-theme";
+
+// packages/plugins/experimental/plugin-debug/src/components/index.ts
+import React4 from "react";
+
+// packages/plugins/experimental/plugin-debug/src/components/DebugSettings.tsx
+import { Gift, DownloadSimple, FirstAidKit } from "@phosphor-icons/react";
+import React, { useEffect, useState } from "react";
+import { parseFileManagerPlugin, useResolvePlugin } from "@dxos/app-framework";
+import { defs, SaveConfig, Storage } from "@dxos/config";
+import { log } from "@dxos/log";
+import { SettingsValue } from "@dxos/plugin-settings";
+import { useClient } from "@dxos/react-client";
+import { useTranslation, Button, Toast, Input, useFileDownload, Select } from "@dxos/react-ui";
+import { getSize, mx } from "@dxos/react-ui-theme";
+import { setDeep } from "@dxos/util";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-debug/src/components/DebugSettings.tsx";
+var StorageAdapters = {
+  opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
+  idb: defs.Runtime.Client.Storage.StorageDriver.IDB
+};
+var DebugSettings = ({ settings }) => {
+  const { t } = useTranslation(DEBUG_PLUGIN);
+  const [toast, setToast] = useState();
+  const client = useClient();
+  const download = useFileDownload();
+  const [storageConfig, setStorageConfig] = useState({});
+  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+  useEffect(() => {
+    void Storage().then((config) => setStorageConfig(config));
+  }, []);
+  const handleToast = (toast2) => {
+    setToast(toast2);
+    const t2 = setTimeout(() => setToast(void 0), 5e3);
+    return () => clearTimeout(t2);
+  };
+  const handleDownload = async () => {
+    const data = await client.diagnostics();
+    const file = new Blob([
+      JSON.stringify(data, void 0, 2)
+    ], {
+      type: "text/plain"
+    });
+    const fileName = `composer-${(/* @__PURE__ */ new Date()).toISOString().replace(/\W/g, "-")}.json`;
+    download(file, fileName);
+    if (fileManagerPlugin?.provides.file.upload) {
+      const info = await fileManagerPlugin.provides.file.upload(new File([
+        file
+      ], fileName), client.spaces.default);
+      if (!info) {
+        log.error("diagnostics failed to upload to IPFS", void 0, {
+          F: __dxlog_file,
+          L: 58,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return;
+      }
+      handleToast({
+        title: t("settings uploaded"),
+        description: t("settings uploaded to clipboard")
+      });
+      const url = client.config.values.runtime.services.ipfs.gateway + "/" + info.cid;
+      void navigator.clipboard.writeText(url);
+      handleToast({
+        title: t("settings uploaded"),
+        description: t("settings uploaded to clipboard")
+      });
+      log.info("diagnostics", {
+        url
+      }, {
+        F: __dxlog_file,
+        L: 67,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+  const handleRepair = async () => {
+    try {
+      const info = await client.repair();
+      setStorageConfig(await Storage());
+      handleToast({
+        title: t("settings repair success"),
+        description: JSON.stringify(info, void 0, 2)
+      });
+    } catch (err) {
+      handleToast({
+        title: t("settings repair failed"),
+        description: err.message
+      });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SettingsValue, {
+    label: t("settings show debug panel")
+  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+    checked: settings.debug,
+    onCheckedChange: (checked) => settings.debug = !!checked
+  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+    label: t("settings show devtools panel")
+  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+    checked: settings.devtools,
+    onCheckedChange: (checked) => settings.devtools = !!checked
+  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+    label: t("settings wireframe")
+  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+    checked: settings.wireframe,
+    onCheckedChange: (checked) => settings.wireframe = !!checked
+  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+    label: t("settings download diagnostics")
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleDownload
+  }, /* @__PURE__ */ React.createElement(DownloadSimple, {
+    className: getSize(5)
+  }))), /* @__PURE__ */ React.createElement(SettingsValue, {
+    label: t("settings repair")
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleRepair
+  }, /* @__PURE__ */ React.createElement(FirstAidKit, {
+    className: getSize(5)
+  }))), toast && /* @__PURE__ */ React.createElement(Toast.Root, null, /* @__PURE__ */ React.createElement(Toast.Body, null, /* @__PURE__ */ React.createElement(Toast.Title, null, /* @__PURE__ */ React.createElement(Gift, {
+    className: mx(getSize(5), "inline mr-1"),
+    weight: "duotone"
+  }), /* @__PURE__ */ React.createElement("span", null, toast.title)), toast.description && /* @__PURE__ */ React.createElement(Toast.Description, null, toast.description))), /* @__PURE__ */ React.createElement(SettingsValue, {
+    label: t("settings choose storage adaptor")
+  }, /* @__PURE__ */ React.createElement(Select.Root, {
+    value: Object.entries(StorageAdapters).find(([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore)?.[0],
+    onValueChange: (value) => {
+      if (confirm(t("settings storage adapter changed alert"))) {
+        updateConfig(storageConfig, setStorageConfig, [
+          "runtime",
+          "client",
+          "storage",
+          "dataStore"
+        ], StorageAdapters[value]);
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+    placeholder: t("settings data store label")
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, Object.keys(StorageAdapters).map((key) => /* @__PURE__ */ React.createElement(Select.Option, {
+    key,
+    value: key
+  }, t(`settings storage adaptor ${key} label`)))))))));
+};
+var updateConfig = (config, setConfig, path, value) => {
+  const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
+  setDeep(storageConfigCopy, path, value);
+  setConfig(storageConfigCopy);
+  queueMicrotask(async () => {
+    await SaveConfig(storageConfigCopy);
+  });
+};
+
+// packages/plugins/experimental/plugin-debug/src/components/DebugStatus.tsx
+import { ChartBar, Circle, Lightning, LightningSlash } from "@phosphor-icons/react";
+import React2, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { firstIdInPart, parseGraphPlugin, parseNavigationPlugin, useResolvePlugin as useResolvePlugin2 } from "@dxos/app-framework";
+import { TimeoutError } from "@dxos/async";
+import { StatsPanel, useStats } from "@dxos/devtools";
+import { log as log2 } from "@dxos/log";
+import { getActiveSpace } from "@dxos/plugin-space";
+import { StatusBar } from "@dxos/plugin-status-bar";
+import { ConnectionState } from "@dxos/protocols/proto/dxos/client/services";
+import { useNetworkStatus } from "@dxos/react-client/mesh";
+import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-debug/src/components/DebugStatus.tsx";
+var styles = {
+  success: "text-sky-300 dark:text-green-700",
+  warning: "text-orange-300 dark:text-orange-600",
+  error: "text-red-300 dark:text-red-600"
+};
+var ErrorIndicator = () => {
+  const [, forceUpdate] = useState2({});
+  const errorRef = useRef();
+  useEffect2(() => {
+    const errorListener = (event) => {
+      const error = event.error ?? event.reason;
+      if (errorRef.current !== error) {
+        log2.error("onError", {
+          event
+        }, {
+          F: __dxlog_file2,
+          L: 73,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        errorRef.current = error;
+        forceUpdate({});
+      }
+    };
+    window.addEventListener("error", errorListener);
+    window.addEventListener("unhandledrejection", errorListener);
+    return () => {
+      window.removeEventListener("error", errorListener);
+      window.removeEventListener("unhandledrejection", errorListener);
+    };
+  }, []);
+  const handleReset = () => {
+    errorRef.current = void 0;
+    forceUpdate({});
+  };
+  if (errorRef.current) {
+    return /* @__PURE__ */ React2.createElement(StatusBar.Button, {
+      title: errorRef.current.message,
+      onClick: handleReset
+    }, /* @__PURE__ */ React2.createElement(Circle, {
+      weight: "fill",
+      className: mx2(styles.error, getSize2(3))
+    }));
+  } else {
+    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      title: "No errors."
+    }, /* @__PURE__ */ React2.createElement(Circle, {
+      weight: "fill",
+      className: getSize2(3)
+    }));
+  }
+};
+var SwarmIndicator = () => {
+  const [state, setState] = useState2(0);
+  const { swarm } = useNetworkStatus();
+  useEffect2(() => {
+    setState(swarm === ConnectionState.ONLINE ? 0 : 1);
+  }, [
+    swarm
+  ]);
+  if (state === 0) {
+    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      title: "Connected to swarm."
+    }, /* @__PURE__ */ React2.createElement(Lightning, {
+      className: getSize2(4)
+    }));
+  } else {
+    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      title: "Disconnected from swarm."
+    }, /* @__PURE__ */ React2.createElement(LightningSlash, {
+      className: mx2(styles.warning, getSize2(4))
+    }));
+  }
+};
+var SavingIndicator = () => {
+  const [state, _setState] = useState2(0);
+  const navigationPlugin = useResolvePlugin2(parseNavigationPlugin);
+  const graphPlugin = useResolvePlugin2(parseGraphPlugin);
+  const location2 = navigationPlugin?.provides.location;
+  const graph = graphPlugin?.provides.graph;
+  const _space = location2 && graph ? getActiveSpace(graph, firstIdInPart(location2.active, "main")) : void 0;
+  switch (state) {
+    case 2:
+      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+        title: "Edit not saved."
+      }, /* @__PURE__ */ React2.createElement(Circle, {
+        weight: "fill",
+        className: mx2(styles.warning, getSize2(3))
+      }));
+    case 1:
+      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+        title: "Saving..."
+      }, /* @__PURE__ */ React2.createElement(Circle, {
+        weight: "fill",
+        className: mx2(styles.success, getSize2(3))
+      }));
+    case 0:
+    default:
+      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+        title: "Modified indicator."
+      }, /* @__PURE__ */ React2.createElement(Circle, {
+        weight: "fill",
+        className: getSize2(3)
+      }));
+  }
+};
+var PerformanceIndicator = () => {
+  const [visible, setVisible] = useState2(false);
+  const [stats, refreshStats] = useStats();
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StatusBar.Button, {
+    onClick: () => setVisible((visible2) => !visible2),
+    title: "Performance panels"
+  }, /* @__PURE__ */ React2.createElement(ChartBar, null)), /* @__PURE__ */ React2.createElement("div", {
+    className: mx2("z-20 absolute transition-[right] bottom-[24px] w-[450px]", "border-l border-y border-neutral-300 dark:border-neutral-700", visible ? "right-0" : "right-[-450px]")
+  }, /* @__PURE__ */ React2.createElement(StatsPanel, {
+    stats,
+    onRefresh: refreshStats
+  })));
+};
+var indicators = [
+  PerformanceIndicator,
+  SavingIndicator,
+  ErrorIndicator,
+  SwarmIndicator
+];
+var DebugStatus = () => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React2.createElement(Indicator, {
+    key: Indicator.name
+  })));
+};
+
+// packages/plugins/experimental/plugin-debug/src/components/Wireframe.tsx
+import React3 from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { createAttendableAttributes } from "@dxos/react-ui-attention";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var Wireframe = ({ label, data, className }) => {
+  const attendableAttrs = createAttendableAttributes(data);
+  const { width, height, ref } = useResizeDetector();
+  return /* @__PURE__ */ React3.createElement("div", {
+    ref,
+    className: mx3("relative grow", className),
+    ...attendableAttrs
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "absolute inset-2 flex flex-col overflow-hidden font-mono"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex justify-between"
+  }, /* @__PURE__ */ React3.createElement("div", null, label), /* @__PURE__ */ React3.createElement("div", null, `[${width}x${height}]`)), /* @__PURE__ */ React3.createElement("div", {
+    className: "flex grow overflow-auto"
+  }, data && /* @__PURE__ */ React3.createElement("pre", {
+    className: "text-neutral-500 text-sm whitespace-pre-line"
+  }, JSON.stringify(data, void 0, 1)))), /* @__PURE__ */ React3.createElement("svg", {
+    width,
+    height,
+    className: "bg-transparent [&>*]:stroke-neutral-500"
+  }, /* @__PURE__ */ React3.createElement("rect", {
+    x: 0,
+    y: 0,
+    width,
+    height,
+    strokeWidth: 1,
+    fill: "none"
+  }), /* @__PURE__ */ React3.createElement("line", {
+    x1: 0,
+    y1: 0,
+    x2: width,
+    y2: height,
+    strokeWidth: 1
+  }), /* @__PURE__ */ React3.createElement("line", {
+    x1: 0,
+    y1: height,
+    x2: width,
+    y2: 0,
+    strokeWidth: 1
+  })));
+};
+
+// packages/plugins/experimental/plugin-debug/src/components/index.ts
+var DebugGlobal = React4.lazy(() => import("./DebugGlobal-H37KGFEG.mjs"));
+var DebugSpace = React4.lazy(() => import("./DebugSpace-ZZ2JLU6F.mjs"));
+var DevtoolsMain = React4.lazy(() => import("./DevtoolsMain-DTAWVF22.mjs"));
+
+// packages/plugins/experimental/plugin-debug/src/translations.ts
+var translations_default = [
+  {
+    "en-US": {
+      [DEBUG_PLUGIN]: {
+        "plugin name": "Debug",
+        "mutation count": "Number of mutations",
+        "mutation period": "Mutation period",
+        "open devtools label": "Open DevTools",
+        "devtools label": "DevTools",
+        "debug label": "Debug",
+        "settings show debug panel": "Show Debug panel.",
+        "settings show devtools panel": "Show DevTools panel.",
+        "settings wireframe": "Show wireframes.",
+        "settings repair": "Run repair tool.",
+        "settings download diagnostics": "Download diagnostics.",
+        "settings uploaded": "Uploaded to IPFS",
+        "settings uploaded to clipboard": "URL copied to clipboard.",
+        "settings repair success": "Repair succeeded",
+        "settings repair failed": "Repair failed",
+        "settings choose storage adaptor": "Storage adaptor (worker reload required).",
+        "settings storage adaptor idb label": "IndexedDB",
+        "settings storage adaptor opfs label": "OPFS",
+        "settings data store label": "Data Store",
+        "settings storage adapter changed alert": "Warning: Swapping the storage adapter will make your data unavailable.",
+        "settings space fragmentation": "Enable AM space fragmentation"
+      }
+    }
+  }
+];
+
+// packages/plugins/experimental/plugin-debug/src/DebugPlugin.tsx
+var SETTINGS_KEY = DEBUG_PLUGIN + "/settings";
+var DebugPlugin = () => {
+  const settings = new LocalStorageStore(DEBUG_PLUGIN, {
+    debug: true,
+    devtools: true
+  });
+  let intentPlugin;
+  return {
+    meta: meta_default,
+    ready: async (plugins) => {
+      intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+      settings.prop({
+        key: "debug",
+        type: LocalStorageStore.bool({
+          allowUndefined: true
+        })
+      }).prop({
+        key: "devtools",
+        type: LocalStorageStore.bool({
+          allowUndefined: true
+        })
+      }).prop({
+        key: "wireframe",
+        type: LocalStorageStore.bool({
+          allowUndefined: true
+        })
+      });
+      const composer = window.composer;
+      composer.changeStorageVersionInMetadata = async (version) => {
+        const { changeStorageVersionInMetadata } = await import("@dxos/echo-pipeline/testing");
+        const { createStorageObjects } = await import("@dxos/client-services");
+        const client = window.dxos.client;
+        const config = client.config;
+        await client.destroy();
+        const { storage } = createStorageObjects(config.values?.runtime?.client?.storage ?? {});
+        await changeStorageVersionInMetadata(storage, version);
+        location.pathname = "/";
+      };
+    },
+    unload: async () => {
+      settings.close();
+    },
+    provides: {
+      settings: settings.values,
+      translations: translations_default,
+      context: ({ children }) => {
+        const [timer, setTimer] = useState3();
+        useEffect3(() => timer?.state.on((value) => !value && setTimer(void 0)), [
+          timer
+        ]);
+        useEffect3(() => {
+          timer?.stop();
+        }, []);
+        return /* @__PURE__ */ React5.createElement(DebugContext.Provider, {
+          value: {
+            running: !!timer,
+            start: (cb, options) => {
+              timer?.stop();
+              setTimer(new Timer(cb).start(options));
+            },
+            stop: () => timer?.stop()
+          }
+        }, children);
+      },
+      graph: {
+        builder: (plugins) => {
+          const graphPlugin = resolvePlugin(plugins, parseGraphPlugin2);
+          return [
+            // Devtools node.
+            createExtension({
+              id: "dxos.org/plugin/debug/devtools",
+              filter: (node) => !!settings.values.devtools && node.id === "root",
+              connector: () => [
+                {
+                  // TODO(zan): Removed `/` because it breaks deck layout reload. Fix?
+                  id: "dxos.org.plugin.debug.devtools",
+                  data: "devtools",
+                  type: "dxos.org/plugin/debug/devtools",
+                  properties: {
+                    label: [
+                      "devtools label",
+                      {
+                        ns: DEBUG_PLUGIN
+                      }
+                    ],
+                    icon: (props) => /* @__PURE__ */ React5.createElement(Hammer, props),
+                    iconSymbol: "ph--hammer--regular"
+                  }
+                }
+              ]
+            }),
+            // Debug node.
+            createExtension({
+              id: "dxos.org/plugin/debug/debug",
+              filter: (node) => !!settings.values.debug && node.id === "root",
+              connector: () => [
+                {
+                  id: "dxos.org/plugin/debug/debug",
+                  type: "dxos.org/plugin/debug/debug",
+                  data: {
+                    graph: graphPlugin?.provides.graph
+                  },
+                  properties: {
+                    label: [
+                      "debug label",
+                      {
+                        ns: DEBUG_PLUGIN
+                      }
+                    ],
+                    icon: (props) => /* @__PURE__ */ React5.createElement(Bug, props),
+                    iconSymbol: "ph--bug--regular"
+                  }
+                }
+              ]
+            }),
+            // Space debug nodes.
+            createExtension({
+              id: "dxos.org/plugin/debug/spaces",
+              filter: (node) => !!settings.values.debug && isSpace(node.data),
+              connector: ({ node }) => {
+                const space = node.data;
+                return [
+                  {
+                    id: `${space.id}-debug`,
+                    type: "dxos.org/plugin/debug/space",
+                    data: {
+                      space
+                    },
+                    properties: {
+                      label: [
+                        "debug label",
+                        {
+                          ns: DEBUG_PLUGIN
+                        }
+                      ],
+                      icon: (props) => /* @__PURE__ */ React5.createElement(Bug, props),
+                      iconSymbol: "ph--bug--regular"
+                    }
+                  }
+                ];
+              }
+            })
+          ];
+        }
+      },
+      intent: {
+        resolver: async (intent, plugins) => {
+          switch (intent.action) {
+            case DebugAction.OPEN_DEVTOOLS: {
+              const clientPlugin = getPlugin(plugins, "dxos.org/plugin/client");
+              const client = clientPlugin.provides.client;
+              const vaultUrl = client.config.values?.runtime?.client?.remoteSource ?? "https://halo.dxos.org";
+              let devtoolsUrl = "http://localhost:5174";
+              try {
+                await fetch(devtoolsUrl);
+              } catch {
+                const isDev = window.location.href.includes(".dev.") || window.location.href.includes("localhost");
+                devtoolsUrl = `https://devtools${isDev ? ".dev." : "."}dxos.org`;
+              }
+              window.open(`${devtoolsUrl}?target=${vaultUrl}`, "_blank");
+              return {
+                data: true
+              };
+            }
+          }
+        }
+      },
+      surface: {
+        component: ({ name, data, role }) => {
+          switch (role) {
+            case "settings":
+              return data.plugin === meta_default.id ? /* @__PURE__ */ React5.createElement(DebugSettings, {
+                settings: settings.values
+              }) : null;
+            case "status":
+              return /* @__PURE__ */ React5.createElement(DebugStatus, null);
+          }
+          const primary = data.active ?? data.object;
+          let component;
+          if (role === "main" || role === "article") {
+            if (primary === "devtools" && settings.values.devtools) {
+              component = /* @__PURE__ */ React5.createElement(DevtoolsMain, null);
+            } else if (!primary || typeof primary !== "object" || !settings.values.debug) {
+              component = null;
+            } else if ("space" in primary && isSpace(primary.space)) {
+              component = /* @__PURE__ */ React5.createElement(DebugSpace, {
+                space: primary.space,
+                onAddObjects: (objects) => {
+                  if (!isSpace(primary.space)) {
+                    return;
+                  }
+                  const collection = primary.space.state.get() === SpaceState.SPACE_READY && primary.space.properties[CollectionType.typename];
+                  if (!(collection instanceof CollectionType)) {
+                    return;
+                  }
+                  void intentPlugin?.provides.intent.dispatch(objects.map((object) => ({
+                    action: SpaceAction.ADD_OBJECT,
+                    data: {
+                      target: collection,
+                      object
+                    }
+                  })));
+                }
+              });
+            } else if ("graph" in primary && primary.graph instanceof Graph) {
+              component = /* @__PURE__ */ React5.createElement(DebugGlobal, {
+                graph: primary.graph
+              });
+            } else {
+              component = null;
+            }
+          }
+          if (!component) {
+            if (settings.values.wireframe) {
+              if (role === "main" || role === "article" || role === "section") {
+                const primary2 = data.active ?? data.object;
+                if (!(primary2 instanceof CollectionType)) {
+                  return /* @__PURE__ */ React5.createElement(Wireframe, {
+                    label: role,
+                    data,
+                    className: "row-span-2 overflow-hidden"
+                  });
+                }
+              }
+            }
+            return null;
+          }
+          switch (role) {
+            case "article":
+              return /* @__PURE__ */ React5.createElement("div", {
+                role: "none",
+                className: "row-span-2 rounded-t-md overflow-x-auto"
+              }, component);
+            case "main":
+              return /* @__PURE__ */ React5.createElement(Main.Content, {
+                classNames: [
+                  baseSurface,
+                  fixedInsetFlexLayout,
+                  topbarBlockPaddingStart,
+                  bottombarBlockPaddingEnd
+                ]
+              }, component);
+          }
+          return null;
+        }
+      }
+    }
+  };
+};
+
+// packages/plugins/experimental/plugin-debug/src/index.ts
+var src_default = DebugPlugin;
+export {
+  DebugPlugin,
+  SETTINGS_KEY,
+  src_default as default
+};
+//# sourceMappingURL=index.mjs.map