@dxos/plugin-debug 0.7.5-main.9d26e3a → 0.7.5-main.9d2a38b

package/dist/lib/browser/index.mjs

@@ -1,391 +1,18 @@
 import {
   DEBUG_PLUGIN,
-  meta_default
-} from "./chunk-CAENAAHY.mjs";
-import {
-  DebugContext,
-  DebugSettingsSchema
-} from "./chunk-6CGQHKET.mjs";
+  meta
+} from "./chunk-I3ON45JK.mjs";
 
 // packages/plugins/plugin-debug/src/DebugPlugin.tsx
-import React5, { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
-import { createIntent, createSurface, definePlugin, parseGraphPlugin as parseGraphPlugin2, parseIntentPlugin, parseMetadataResolverPlugin, parseSettingsPlugin, resolvePlugin } from "@dxos/app-framework";
-import { Timer } from "@dxos/async";
-import { Devtools } from "@dxos/devtools";
-import { invariant } from "@dxos/invariant";
-import { parseClientPlugin } from "@dxos/plugin-client/types";
-import { createExtension, Graph, toSignal } from "@dxos/plugin-graph";
-import { memoizeQuery, SpaceAction } from "@dxos/plugin-space";
-import { CollectionType } from "@dxos/plugin-space/types";
-import { create, getTypename, isEchoObject, isSpace, parseId, SpaceState } from "@dxos/react-client/echo";
-
-// packages/plugins/plugin-debug/src/components/index.ts
-import { lazy } from "react";
-
-// packages/plugins/plugin-debug/src/components/DebugObjectPanel.tsx
-import React from "react";
-import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
-var DebugObjectPanel = ({ object }) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "flex flex-col"
-  }, /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
-    classNames: "flex text-xs",
-    language: "json"
-  }, JSON.stringify(object, null, 2)));
-};
-
-// packages/plugins/plugin-debug/src/components/DebugSettings.tsx
-import { Gift, DownloadSimple, FirstAidKit } from "@phosphor-icons/react";
-import React2, { useEffect, useState } from "react";
-import { parseFileManagerPlugin, useResolvePlugin } from "@dxos/app-framework";
-import { defs, SaveConfig, Storage } from "@dxos/config";
-import { log } from "@dxos/log";
-import { useClient } from "@dxos/react-client";
-import { useTranslation, Button, Toast, Input, useFileDownload, Select } from "@dxos/react-ui";
-import { DeprecatedFormInput } from "@dxos/react-ui-form";
-import { getSize, mx } from "@dxos/react-ui-theme";
-import { setDeep } from "@dxos/util";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings show debug panel")
-  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
-    checked: settings.debug,
-    onCheckedChange: (checked) => settings.debug = !!checked
-  })), /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings show devtools panel")
-  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
-    checked: settings.devtools,
-    onCheckedChange: (checked) => settings.devtools = !!checked
-  })), /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings wireframe")
-  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
-    checked: settings.wireframe,
-    onCheckedChange: (checked) => settings.wireframe = !!checked
-  })), /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings download diagnostics")
-  }, /* @__PURE__ */ React2.createElement(Button, {
-    onClick: handleDownload
-  }, /* @__PURE__ */ React2.createElement(DownloadSimple, {
-    className: getSize(5)
-  }))), /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings repair")
-  }, /* @__PURE__ */ React2.createElement(Button, {
-    onClick: handleRepair
-  }, /* @__PURE__ */ React2.createElement(FirstAidKit, {
-    className: getSize(5)
-  }))), toast && /* @__PURE__ */ React2.createElement(Toast.Root, null, /* @__PURE__ */ React2.createElement(Toast.Body, null, /* @__PURE__ */ React2.createElement(Toast.Title, null, /* @__PURE__ */ React2.createElement(Gift, {
-    className: mx(getSize(5), "inline mr-1"),
-    weight: "duotone"
-  }), /* @__PURE__ */ React2.createElement("span", null, toast.title)), toast.description && /* @__PURE__ */ React2.createElement(Toast.Description, null, toast.description))), /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings choose storage adaptor")
-  }, /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: Object.entries(StorageAdapters).find(([name2, 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__ */ React2.createElement(Select.TriggerButton, {
-    placeholder: t("settings data store label")
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, Object.keys(StorageAdapters).map((key) => /* @__PURE__ */ React2.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/plugin-debug/src/components/DebugStatus.tsx
-import React3, { 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 { Icon } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/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__ */ React3.createElement(StatusBar.Button, {
-      title: errorRef.current.message,
-      onClick: handleReset
-    }, /* @__PURE__ */ React3.createElement(Icon, {
-      icon: "ph--warning-circle--duotone",
-      size: 4,
-      classNames: styles.error
-    }));
-  } else {
-    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-      title: "No errors."
-    }, /* @__PURE__ */ React3.createElement(Icon, {
-      icon: "ph--check--regular",
-      size: 4
-    }));
-  }
-};
-var SwarmIndicator = () => {
-  const [state, setState] = useState2(0);
-  const { swarm } = useNetworkStatus();
-  useEffect2(() => {
-    setState(swarm === ConnectionState.ONLINE ? 0 : 1);
-  }, [
-    swarm
-  ]);
-  if (state === 0) {
-    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-      title: "Connected to swarm."
-    }, /* @__PURE__ */ React3.createElement(Icon, {
-      icon: "ph--lightning--regular",
-      size: 4
-    }));
-  } else {
-    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-      title: "Disconnected from swarm."
-    }, /* @__PURE__ */ React3.createElement(Icon, {
-      icon: "ph--lightning-slash--regular",
-      size: 4,
-      classNames: styles.warning
-    }));
-  }
-};
-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__ */ React3.createElement(StatusBar.Item, {
-        title: "Edit not saved."
-      }, /* @__PURE__ */ React3.createElement(Icon, {
-        icon: "ph--circle--duotone",
-        size: 4,
-        classNames: styles.warning
-      }));
-    case 1:
-      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-        title: "Saving..."
-      }, /* @__PURE__ */ React3.createElement(Icon, {
-        icon: "ph--circle--duotone",
-        size: 4,
-        classNames: styles.success
-      }));
-    case 0:
-    default:
-      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-        title: "Modified indicator."
-      }, /* @__PURE__ */ React3.createElement(Icon, {
-        icon: "ph--circle--duotone",
-        size: 4
-      }));
-  }
-};
-var PerformanceIndicator = () => {
-  const [visible, setVisible] = useState2(false);
-  const [stats, refreshStats] = useStats();
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(StatusBar.Button, {
-    onClick: () => setVisible((visible2) => !visible2),
-    title: "Performance panels"
-  }, /* @__PURE__ */ React3.createElement(Icon, {
-    icon: "ph--chart-bar--regular",
-    size: 4
-  })), visible && /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute bottom-[--statusbar-size] right-4 w-[450px]", "overflow-x-hidden overflow-y-auto scrollbar-thin", "border-x border-y border-separator")
-  }, /* @__PURE__ */ React3.createElement(StatsPanel, {
-    stats,
-    onRefresh: refreshStats
-  })));
-};
-var indicators = [
-  SavingIndicator,
-  SwarmIndicator,
-  PerformanceIndicator,
-  ErrorIndicator
-];
-var DebugStatus = () => {
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React3.createElement(Indicator, {
-    key: Indicator.name
-  })));
-};
+import { Capabilities, contributes, defineModule, definePlugin, Events } from "@dxos/app-framework";
+import { DeckCapabilities } from "@dxos/plugin-deck";
 
-// packages/plugins/plugin-debug/src/components/Wireframe.tsx
-import React4 from "react";
-import { useResizeDetector } from "react-resize-detector";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
-import { useAttendableAttributes } from "@dxos/react-ui-attention";
-import { SyntaxHighlighter as SyntaxHighlighter2 } from "@dxos/react-ui-syntax-highlighter";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var Wireframe = ({ classNames, label, object }) => {
-  const attendableAttrs = useAttendableAttributes(fullyQualifiedId(object));
-  const { width, height, ref } = useResizeDetector();
-  return /* @__PURE__ */ React4.createElement("div", {
-    ref,
-    className: mx3("relative grow min-bs-96", classNames),
-    ...attendableAttrs
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: "absolute inset-2 flex flex-col gap-2 overflow-hidden font-mono"
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: "flex justify-between"
-  }, /* @__PURE__ */ React4.createElement("div", null, label), /* @__PURE__ */ React4.createElement("div", null, `[${width}x${height}]`)), object && /* @__PURE__ */ React4.createElement(SyntaxHighlighter2, {
-    language: "json",
-    classNames: "flex w-full text-xs opacity-75 rounded"
-  }, JSON.stringify(object, void 0, 2))), /* @__PURE__ */ React4.createElement("svg", {
-    width,
-    height,
-    className: "bg-transparent [&>*]:text-subdued"
-  }, /* @__PURE__ */ React4.createElement("rect", {
-    x: 0,
-    y: 0,
-    width,
-    height,
-    strokeWidth: 1,
-    fill: "none"
-  }), /* @__PURE__ */ React4.createElement("line", {
-    x1: 0,
-    y1: 0,
-    x2: width,
-    y2: height,
-    strokeWidth: 1
-  }), /* @__PURE__ */ React4.createElement("line", {
-    x1: 0,
-    y1: height,
-    x2: width,
-    y2: 0,
-    strokeWidth: 1
-  })));
-};
-
-// packages/plugins/plugin-debug/src/components/index.ts
-var DebugApp = lazy(() => import("./DebugApp-HCHR6GKO.mjs"));
-var DebugSpace = lazy(() => import("./DebugSpace-V3K3PQP6.mjs"));
-var SpaceGenerator = lazy(() => import("./SpaceGenerator-Y2NXBQVR.mjs"));
+// packages/plugins/plugin-debug/src/capabilities/index.ts
+import { lazy } from "@dxos/app-framework";
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-FXELWOFS.mjs"));
+var ReactContext = lazy(() => import("./react-context-OZU6J7G3.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-5GNO6NWP.mjs"));
+var DebugSettings = lazy(() => import("./settings-JCZUA643.mjs"));
 
 // packages/plugins/plugin-debug/src/translations.ts
 var translations_default = [
@@ -420,339 +47,66 @@ var translations_default = [
 ];
 
 // packages/plugins/plugin-debug/src/DebugPlugin.tsx
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-debug/src/DebugPlugin.tsx";
-var isSpaceDebug = (data) => data.type === `${DEBUG_PLUGIN}/space` && isSpace(data.space);
-var isGraphDebug = (data) => data.graph instanceof Graph;
-var DebugPlugin = definePlugin((context) => {
-  const settings = create({
-    debug: true,
-    devtools: true
-  });
-  return {
-    meta: meta_default,
-    ready: async ({ plugins }) => {
-      context.init(plugins);
-      context.resolvePlugin(parseSettingsPlugin).provides.settingsStore.createStore({
-        schema: DebugSettingsSchema,
-        prefix: DEBUG_PLUGIN,
-        value: settings
-      });
-      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 () => {
-      context.dispose();
-    },
-    provides: {
-      settings,
-      translations: translations_default,
-      complementary: {
-        panels: [
+var DebugPlugin = () => {
+  setupDevtools();
+  return definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/settings`,
+      activatesOn: Events.SetupSettings,
+      activate: DebugSettings
+    }),
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations_default)
+    }),
+    defineModule({
+      id: `${meta.id}/module/complementary-panel`,
+      activatesOn: Events.Startup,
+      activate: () => contributes(DeckCapabilities.ComplementaryPanel, {
+        id: "debug",
+        label: [
+          "debug label",
           {
-            id: "debug",
-            label: [
-              "open debug panel label",
-              {
-                ns: DEBUG_PLUGIN
-              }
-            ],
-            icon: "ph--bug--regular"
-          }
-        ]
-      },
-      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()
+            ns: DEBUG_PLUGIN
           }
-        }, children);
-      },
-      graph: {
-        builder: (plugins) => {
-          const clientPlugin = resolvePlugin(plugins, parseClientPlugin);
-          const metadataPlugin = resolvePlugin(plugins, parseMetadataResolverPlugin);
-          const graphPlugin = resolvePlugin(plugins, parseGraphPlugin2);
-          const resolve = metadataPlugin?.provides.metadata.resolver;
-          const client = clientPlugin?.provides.client;
-          invariant(resolve, void 0, {
-            F: __dxlog_file3,
-            L: 130,
-            S: void 0,
-            A: [
-              "resolve",
-              ""
-            ]
-          });
-          invariant(client, void 0, {
-            F: __dxlog_file3,
-            L: 131,
-            S: void 0,
-            A: [
-              "client",
-              ""
-            ]
-          });
-          return [
-            // Devtools node.
-            createExtension({
-              id: "dxos.org/plugin/debug/devtools",
-              filter: (node) => !!settings.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: "ph--hammer--regular"
-                  }
-                }
-              ]
-            }),
-            // Debug node.
-            createExtension({
-              id: "dxos.org/plugin/debug/debug",
-              filter: (node) => !!settings.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: "ph--bug--regular"
-                  }
-                }
-              ]
-            }),
-            // Space debug nodes.
-            createExtension({
-              id: "dxos.org/plugin/debug/spaces",
-              filter: (node) => !!settings.debug && isSpace(node.data),
-              connector: ({ node }) => {
-                const space = node.data;
-                const state = toSignal((onChange) => space.state.subscribe(() => onChange()).unsubscribe, () => space.state.get(), space.id);
-                if (state !== SpaceState.SPACE_READY) {
-                  return;
-                }
-                const collection = space.properties[CollectionType.typename]?.target;
-                if (!collection) {
-                  return;
-                }
-                return [
-                  {
-                    id: `${space.id}-debug`,
-                    type: "dxos.org/plugin/debug/space",
-                    data: {
-                      space,
-                      type: "dxos.org/plugin/debug/space"
-                    },
-                    properties: {
-                      label: [
-                        "debug label",
-                        {
-                          ns: DEBUG_PLUGIN
-                        }
-                      ],
-                      icon: "ph--bug--regular"
-                    }
-                  }
-                ];
-              }
-            }),
-            // Create nodes for debug sidebar.
-            createExtension({
-              id: `${DEBUG_PLUGIN}/debug-for-subject`,
-              resolver: ({ id }) => {
-                if (!id.endsWith("~debug")) {
-                  return;
-                }
-                const type = "orphan-settings-for-subject";
-                const icon = "ph--bug--regular";
-                const [subjectId] = id.split("~");
-                const { spaceId, objectId } = parseId(subjectId);
-                const spaces = toSignal((onChange) => client.spaces.subscribe(() => onChange()).unsubscribe, () => client.spaces.get());
-                const space = spaces?.find((space2) => space2.state.get() === SpaceState.SPACE_READY && space2.id === spaceId);
-                if (!objectId) {
-                  const label2 = space ? space.properties.name || [
-                    "unnamed space label",
-                    {
-                      ns: DEBUG_PLUGIN
-                    }
-                  ] : [
-                    "unnamed object settings label",
-                    {
-                      ns: DEBUG_PLUGIN
-                    }
-                  ];
-                  return {
-                    id,
-                    type,
-                    data: null,
-                    properties: {
-                      icon,
-                      label: label2,
-                      showResolvedThreads: false,
-                      object: null,
-                      space
-                    }
-                  };
-                }
-                const [object] = memoizeQuery(space, {
-                  id: objectId
-                });
-                if (!object || !subjectId) {
-                  return;
-                }
-                const meta = resolve(getTypename(object) ?? "");
-                const label = meta.label?.(object) || object.name || meta.placeholder || [
-                  "unnamed object settings label",
-                  {
-                    ns: DEBUG_PLUGIN
-                  }
-                ];
-                return {
-                  id,
-                  type,
-                  data: null,
-                  properties: {
-                    icon,
-                    label,
-                    object
-                  }
-                };
-              }
-            })
-          ];
-        }
-      },
-      surface: {
-        definitions: () => [
-          createSurface({
-            id: `${DEBUG_PLUGIN}/settings`,
-            role: "settings",
-            filter: (data) => data.subject === DEBUG_PLUGIN,
-            component: () => /* @__PURE__ */ React5.createElement(DebugSettings, {
-              settings
-            })
-          }),
-          createSurface({
-            id: `${DEBUG_PLUGIN}/status`,
-            role: "status",
-            component: () => /* @__PURE__ */ React5.createElement(DebugStatus, null)
-          }),
-          createSurface({
-            id: `${DEBUG_PLUGIN}/complementary`,
-            role: "complementary--debug",
-            filter: (data) => isEchoObject(data.subject),
-            component: ({ data }) => /* @__PURE__ */ React5.createElement(DebugObjectPanel, {
-              object: data.subject
-            })
-          }),
-          createSurface({
-            id: `${DEBUG_PLUGIN}/devtools`,
-            role: "article",
-            filter: (data) => data.subject === "devtools" && !!settings.devtools,
-            component: () => /* @__PURE__ */ React5.createElement(Devtools, null)
-          }),
-          createSurface({
-            id: `${DEBUG_PLUGIN}/space`,
-            role: "article",
-            filter: (data) => isSpaceDebug(data.subject),
-            component: ({ data }) => {
-              const handleCreateObject = useCallback((objects) => {
-                if (!isSpace(data.subject.space)) {
-                  return;
-                }
-                const collection = data.subject.space.state.get() === SpaceState.SPACE_READY && data.subject.space.properties[CollectionType.typename]?.target;
-                if (!(collection instanceof CollectionType)) {
-                  return;
-                }
-                objects.forEach((object) => {
-                  void context.resolvePlugin(parseIntentPlugin).provides.intent.dispatchPromise(createIntent(SpaceAction.AddObject, {
-                    target: collection,
-                    object
-                  }));
-                });
-              }, [
-                data.subject.space
-              ]);
-              const deprecated = false;
-              return deprecated ? /* @__PURE__ */ React5.createElement(DebugSpace, {
-                space: data.subject.space,
-                onAddObjects: handleCreateObject
-              }) : /* @__PURE__ */ React5.createElement(SpaceGenerator, {
-                space: data.subject.space,
-                onCreateObjects: handleCreateObject
-              });
-            }
-          }),
-          createSurface({
-            id: `${DEBUG_PLUGIN}/graph`,
-            role: "article",
-            filter: (data) => isGraphDebug(data.subject),
-            component: ({ data }) => /* @__PURE__ */ React5.createElement(DebugApp, {
-              graph: data.subject.graph
-            })
-          }),
-          createSurface({
-            id: `${DEBUG_PLUGIN}/wireframe`,
-            role: [
-              "article",
-              "section"
-            ],
-            disposition: "hoist",
-            filter: (data) => isEchoObject(data.subject) && !!settings.wireframe,
-            component: ({ data, role }) => /* @__PURE__ */ React5.createElement(Wireframe, {
-              label: `${role}:${name}`,
-              object: data.subject,
-              classNames: "row-span-2 overflow-hidden"
-            })
-          })
-        ]
-      }
-    }
+        ],
+        icon: "ph--bug--regular"
+      })
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-context`,
+      activatesOn: Events.Startup,
+      activate: ReactContext
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.Startup,
+      activate: ReactSurface
+    }),
+    defineModule({
+      id: `${meta.id}/module/app-graph-builder`,
+      activatesOn: Events.SetupAppGraph,
+      activate: AppGraphBuilder
+    })
+  ]);
+};
+var setupDevtools = () => {
+  globalThis.composer ??= {};
+  globalThis.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 = "/";
   };
-});
-
-// packages/plugins/plugin-debug/src/index.ts
-var src_default = DebugPlugin;
+};
 export {
+  DEBUG_PLUGIN,
   DebugPlugin,
-  src_default as default
+  meta
 };
 //# sourceMappingURL=index.mjs.map