@dxos/plugin-debug 0.7.4 → 0.7.5-labs.401163d

package/dist/lib/browser/index.mjs

@@ -1,394 +1,17 @@
-import {
-  DebugAction,
-  DebugContext,
-  DebugSettingsSchema
-} from "./chunk-LZEK532R.mjs";
 import {
   DEBUG_PLUGIN,
-  meta_default
-} from "./chunk-CAENAAHY.mjs";
+  meta
+} from "./chunk-EF3UVAVI.mjs";
 
 // packages/plugins/plugin-debug/src/DebugPlugin.tsx
-import React5, { useEffect as useEffect3, useState as useState3 } from "react";
-import { 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";
-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";
-import { Main } from "@dxos/react-ui";
-import { baseSurface, bottombarBlockPaddingEnd, fixedInsetFlexLayout, topbarBlockPaddingStart } from "@dxos/react-ui-theme";
-
-// packages/plugins/plugin-debug/src/components/index.ts
-import { lazy } from "react";
+import { Capabilities, contributes, defineModule, definePlugin, Events } from "@dxos/app-framework";
+import { DeckCapabilities } from "@dxos/plugin-deck";
 
-// 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(([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__ */ 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
-  })));
-};
-
-// 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-DHKEAMIC.mjs"));
-var SpaceGenerator = lazy(() => import("./SpaceGenerator-BQ3645OS.mjs"));
+// packages/plugins/plugin-debug/src/capabilities/index.ts
+import { lazy } from "@dxos/app-framework";
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-DCMGZAT3.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-6GVTLM4O.mjs"));
+var DebugSettings = lazy(() => import("./settings-OIMSBZUC.mjs"));
 
 // packages/plugins/plugin-debug/src/translations.ts
 var translations_default = [
@@ -423,361 +46,61 @@ 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 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()
-          }
-        }, 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: 128,
-            S: void 0,
-            A: [
-              "resolve",
-              ""
-            ]
-          });
-          invariant(client, void 0, {
-            F: __dxlog_file3,
-            L: 129,
-            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];
-                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
-                  }
-                };
-              }
-            })
-          ];
-        }
-      },
-      intent: {
-        resolver: async (intent, plugins) => {
-          switch (intent.action) {
-            case DebugAction.OPEN_DEVTOOLS: {
-              const clientPlugin = context.getPlugin("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
-              };
-            }
+            ns: DEBUG_PLUGIN
           }
-        }
-      },
-      surface: {
-        component: ({ name, data, role }) => {
-          switch (role) {
-            case "settings":
-              return data.plugin === meta_default.id ? /* @__PURE__ */ React5.createElement(DebugSettings, {
-                settings
-              }) : null;
-            case "status":
-              return /* @__PURE__ */ React5.createElement(DebugStatus, null);
-            case "complementary--debug":
-              return isEchoObject(data.subject) ? /* @__PURE__ */ React5.createElement(DebugObjectPanel, {
-                object: data.subject
-              }) : null;
-          }
-          const primary = data.active ?? data.object;
-          let component = null;
-          if (role === "main" || role === "article") {
-            if (primary === "devtools" && settings.devtools) {
-              component = /* @__PURE__ */ React5.createElement(Devtools, null);
-            } else if (!primary || typeof primary !== "object" || !settings.debug) {
-              component = null;
-            } else if ("type" in primary && primary.type === "dxos.org/plugin/debug/space" && "space" in primary && isSpace(primary.space)) {
-              const handleCreateObject = (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 context.resolvePlugin(parseIntentPlugin).provides.intent.dispatch(objects.map((object) => ({
-                  action: SpaceAction.ADD_OBJECT,
-                  data: {
-                    target: collection,
-                    object
-                  }
-                })));
-              };
-              const deprecated = false;
-              component = deprecated ? /* @__PURE__ */ React5.createElement(DebugSpace, {
-                space: primary.space,
-                onAddObjects: handleCreateObject
-              }) : /* @__PURE__ */ React5.createElement(SpaceGenerator, {
-                space: primary.space,
-                onCreateObjects: handleCreateObject
-              });
-            } else if ("graph" in primary && primary.graph instanceof Graph) {
-              component = /* @__PURE__ */ React5.createElement(DebugApp, {
-                graph: primary.graph
-              });
-            }
-          }
-          if (!component) {
-            if (settings.wireframe) {
-              if (role === "main" || role === "article" || role === "section") {
-                const primary2 = data.active ?? data.object;
-                const isCollection = primary2 instanceof CollectionType;
-                if (!isCollection) {
-                  return {
-                    node: /* @__PURE__ */ React5.createElement(Wireframe, {
-                      label: `${role}:${name}`,
-                      object: primary2,
-                      classNames: "row-span-2 overflow-hidden"
-                    }),
-                    disposition: "hoist"
-                  };
-                }
-              }
-            }
-            return null;
-          }
-          switch (role) {
-            case "article":
-              return /* @__PURE__ */ React5.createElement(React5.Fragment, null, component);
-            case "main":
-              return /* @__PURE__ */ React5.createElement(Main.Content, {
-                classNames: [
-                  baseSurface,
-                  fixedInsetFlexLayout,
-                  topbarBlockPaddingStart,
-                  bottombarBlockPaddingEnd
-                ]
-              }, component);
-          }
-          return null;
-        }
-      }
-    }
+        ],
+        icon: "ph--bug--regular"
+      })
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupSurfaces,
+      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