@dxos/plugin-debug 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/dist/lib/browser/{react-surface-NEMNEAAI.mjs → react-surface-PHUWS5WD.mjs}

@@ -1,15 +1,15 @@
 import {
   Devtools
-} from "./chunk-TCEHALD4.mjs";
+} from "./chunk-KS3YBEL7.mjs";
 import {
   DEBUG_PLUGIN
-} from "./chunk-RORUXVAC.mjs";
+} from "./chunk-47JOZTT2.mjs";
 
 // packages/plugins/plugin-debug/src/capabilities/react-surface.tsx
 import { pipe } from "effect";
 import React5, { useCallback } from "react";
-import { Capabilities as Capabilities2, chain, contributes, createIntent, createSurface, LayoutAction, useCapability } from "@dxos/app-framework";
-import { AutomergePanel, ConfigPanel, CredentialsPanel, DeviceListPanel, DiagnosticsPanel, EdgeDashboardPanel, FeedsPanel, IdentityPanel, InvocationTracePanel, KeyringPanel, LoggingPanel, MembersPanel, MetadataPanel, NetworkPanel, ObjectsPanel, QueuesPanel, SignalPanel, SpaceInfoPanel, SpaceListPanel, StoragePanel, SwarmPanel, TestingPanel, TracingPanel, WorkflowPanel } from "@dxos/devtools";
+import { Capabilities as Capabilities2, chain, contributes, createIntent, createSurface, LayoutAction, useCapability, useIntentDispatcher } from "@dxos/app-framework";
+import { AutomergePanel, ConfigPanel, CredentialsPanel, DeviceListPanel, DiagnosticsPanel, EdgeDashboardPanel, FeedsPanel, IdentityPanel, InvocationTraceContainer, KeyringPanel, LoggingPanel, MembersPanel, MetadataPanel, NetworkPanel, ObjectsPanel, QueuesPanel, SchemaPanel, SignalPanel, SpaceInfoPanel, SpaceListPanel, StoragePanel, SwarmPanel, TestingPanel, TracingPanel, WorkflowPanel } from "@dxos/devtools";
 import { SettingsStore } from "@dxos/local-storage";
 import { log as log2 } from "@dxos/log";
 import { ClientCapabilities } from "@dxos/plugin-client";
@@ -22,31 +22,38 @@ import { SpaceState, isSpace, isEchoObject, parseId } from "@dxos/react-client/e
 import { lazy } from "react";
 
 // packages/plugins/plugin-debug/src/components/DebugObjectPanel.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import { Clipboard, Input } from "@dxos/react-ui";
 import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
 var DebugObjectPanel = ({ object }) => {
-  const dxn = `dxn:echo:@:${object.id}`;
-  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement("div", {
-    className: "flex flex-col"
-  }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-1"
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "flex gap-1"
-  }, /* @__PURE__ */ React.createElement(Input.TextInput, {
-    disabled: true,
-    value: dxn
-  }), /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
-    value: dxn
-  })))), /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
-    classNames: "flex text-xs",
-    language: "json"
-  }, JSON.stringify(object, null, 2))));
+  var _effect = _useSignals();
+  try {
+    const dxn = `dxn:echo:@:${object.id}`;
+    return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement("div", {
+      className: "flex flex-col"
+    }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      className: "flex flex-col gap-1"
+    }, /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      className: "flex gap-1"
+    }, /* @__PURE__ */ React.createElement(Input.TextInput, {
+      disabled: true,
+      value: dxn
+    }), /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
+      value: dxn
+    })))), /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
+      classNames: "flex text-xs",
+      language: "json"
+    }, JSON.stringify(object, null, 2))));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-debug/src/components/DebugSettings.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2, { useEffect, useState } from "react";
 import { Capabilities, useCapabilities } from "@dxos/app-framework";
 import { defs, SaveConfig, Storage } from "@dxos/config";
@@ -61,120 +68,125 @@ var StorageAdapters = {
   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 [upload] = useCapabilities(Capabilities.FileUploader);
-  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 (upload) {
-      const info = await upload(new File([
-        file
-      ], fileName), client.spaces.default);
-      if (!info) {
-        log.error("diagnostics failed to upload to IPFS", void 0, {
+  var _effect = _useSignals2();
+  try {
+    const { t } = useTranslation(DEBUG_PLUGIN);
+    const [toast, setToast] = useState();
+    const client = useClient();
+    const download = useFileDownload();
+    const [storageConfig, setStorageConfig] = useState({});
+    const [upload] = useCapabilities(Capabilities.FileUploader);
+    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 (upload) {
+        const info = await upload(new File([
+          file
+        ], fileName), client.spaces.default);
+        if (!info) {
+          log.error("diagnostics failed to upload to IPFS", void 0, {
+            F: __dxlog_file,
+            L: 56,
+            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: 56,
+          L: 65,
           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: 65,
-        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(DeprecatedFormContainer, null, /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings wireframe")
-  }, /* @__PURE__ */ React2.createElement(Input2.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(Icon, {
-    icon: "ph--download-simple--regular",
-    size: 5
-  }))), /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
-    label: t("settings repair")
-  }, /* @__PURE__ */ React2.createElement(Button, {
-    onClick: handleRepair
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    icon: "ph--first-aid-kit--regular",
-    size: 5
-  }))), toast && /* @__PURE__ */ React2.createElement(Toast.Root, null, /* @__PURE__ */ React2.createElement(Toast.Body, null, /* @__PURE__ */ React2.createElement(Toast.Title, null, /* @__PURE__ */ React2.createElement(Icon, {
-    icon: "ph--gift--duotone",
-    size: 5,
-    classNames: "inline mr-1"
-  }), /* @__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]);
+    };
+    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
+        });
       }
-    }
-  }, /* @__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`)))))))));
+    };
+    return /* @__PURE__ */ React2.createElement(DeprecatedFormContainer, null, /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
+      label: t("settings wireframe")
+    }, /* @__PURE__ */ React2.createElement(Input2.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(Icon, {
+      icon: "ph--download-simple--regular",
+      size: 5
+    }))), /* @__PURE__ */ React2.createElement(DeprecatedFormInput, {
+      label: t("settings repair")
+    }, /* @__PURE__ */ React2.createElement(Button, {
+      onClick: handleRepair
+    }, /* @__PURE__ */ React2.createElement(Icon, {
+      icon: "ph--first-aid-kit--regular",
+      size: 5
+    }))), toast && /* @__PURE__ */ React2.createElement(Toast.Root, null, /* @__PURE__ */ React2.createElement(Toast.Body, null, /* @__PURE__ */ React2.createElement(Toast.Title, null, /* @__PURE__ */ React2.createElement(Icon, {
+      icon: "ph--gift--duotone",
+      size: 5,
+      classNames: "inline mr-1"
+    }), /* @__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`)))))))));
+  } finally {
+    _effect.f();
+  }
 };
 var updateConfig = (config, setConfig, path, value) => {
   const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
@@ -186,10 +198,10 @@ var updateConfig = (config, setConfig, path, value) => {
 };
 
 // packages/plugins/plugin-debug/src/components/DebugStatus.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { useAppGraph, useLayout } from "@dxos/app-framework";
 import { TimeoutError } from "@dxos/async";
-import { getActiveSpace } from "@dxos/plugin-space";
+import { useActiveSpace } 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";
@@ -200,100 +212,113 @@ var styles = {
   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) {
-        errorRef.current = error;
-        forceUpdate({});
-      }
-    };
-    window.addEventListener("error", errorListener);
-    window.addEventListener("unhandledrejection", errorListener);
-    return () => {
-      window.removeEventListener("error", errorListener);
-      window.removeEventListener("unhandledrejection", errorListener);
+  var _effect = _useSignals3();
+  try {
+    const [, forceUpdate] = useState2({});
+    const errorRef = useRef();
+    useEffect2(() => {
+      const errorListener = (event) => {
+        const error = event.error ?? event.reason;
+        if (errorRef.current !== error) {
+          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({});
     };
-  }, []);
-  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(Icon2, {
-      icon: "ph--warning-circle--duotone",
-      size: 4,
-      classNames: styles.error
-    }));
-  } else {
-    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-      title: "No errors."
-    }, /* @__PURE__ */ React3.createElement(Icon2, {
-      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(Icon2, {
-      icon: "ph--lightning--regular",
-      size: 4
-    }));
-  } else {
-    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-      title: "Disconnected from swarm."
-    }, /* @__PURE__ */ React3.createElement(Icon2, {
-      icon: "ph--lightning-slash--regular",
-      size: 4,
-      classNames: styles.warning
-    }));
-  }
-};
-var SavingIndicator = () => {
-  const [state, _setState] = useState2(0);
-  const layout = useLayout();
-  const { graph } = useAppGraph();
-  const _space = graph ? getActiveSpace(graph, layout.active[0]) : void 0;
-  switch (state) {
-    case 2:
-      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-        title: "Edit not saved."
+    if (errorRef.current) {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Button, {
+        title: errorRef.current.message,
+        onClick: handleReset
       }, /* @__PURE__ */ React3.createElement(Icon2, {
-        icon: "ph--circle--duotone",
+        icon: "ph--warning-circle--duotone",
         size: 4,
-        classNames: styles.warning
+        classNames: styles.error
       }));
-    case 1:
+    } else {
       return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
-        title: "Saving..."
+        title: "No errors."
       }, /* @__PURE__ */ React3.createElement(Icon2, {
-        icon: "ph--circle--duotone",
-        size: 4,
-        classNames: styles.success
+        icon: "ph--check--regular",
+        size: 4
       }));
-    case 0:
-    default:
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var SwarmIndicator = () => {
+  var _effect = _useSignals3();
+  try {
+    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: "Modified indicator."
+        title: "Connected to swarm."
       }, /* @__PURE__ */ React3.createElement(Icon2, {
-        icon: "ph--circle--duotone",
+        icon: "ph--lightning--regular",
         size: 4
       }));
+    } else {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+        title: "Disconnected from swarm."
+      }, /* @__PURE__ */ React3.createElement(Icon2, {
+        icon: "ph--lightning-slash--regular",
+        size: 4,
+        classNames: styles.warning
+      }));
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var SavingIndicator = () => {
+  var _effect = _useSignals3();
+  try {
+    const [state, _setState] = useState2(0);
+    const _space = useActiveSpace();
+    switch (state) {
+      case 2:
+        return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+          title: "Edit not saved."
+        }, /* @__PURE__ */ React3.createElement(Icon2, {
+          icon: "ph--circle--duotone",
+          size: 4,
+          classNames: styles.warning
+        }));
+      case 1:
+        return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+          title: "Saving..."
+        }, /* @__PURE__ */ React3.createElement(Icon2, {
+          icon: "ph--circle--duotone",
+          size: 4,
+          classNames: styles.success
+        }));
+      case 0:
+      default:
+        return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+          title: "Modified indicator."
+        }, /* @__PURE__ */ React3.createElement(Icon2, {
+          icon: "ph--circle--duotone",
+          size: 4
+        }));
+    }
+  } finally {
+    _effect.f();
   }
 };
 var indicators = [
@@ -302,12 +327,18 @@ var indicators = [
   ErrorIndicator
 ];
 var DebugStatus = () => {
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React3.createElement(Indicator, {
-    key: Indicator.name
-  })));
+  var _effect = _useSignals3();
+  try {
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React3.createElement(Indicator, {
+      key: Indicator.name
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-debug/src/components/Wireframe.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4 from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { fullyQualifiedId } from "@dxos/react-client/echo";
@@ -315,49 +346,54 @@ import { useAttendableAttributes } from "@dxos/react-ui-attention";
 import { SyntaxHighlighter as SyntaxHighlighter2 } from "@dxos/react-ui-syntax-highlighter";
 import { mx } 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: mx("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
-  })));
+  var _effect = _useSignals4();
+  try {
+    const attendableAttrs = useAttendableAttributes(fullyQualifiedId(object));
+    const { width, height, ref } = useResizeDetector();
+    return /* @__PURE__ */ React4.createElement("div", {
+      ref,
+      className: mx("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
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-debug/src/components/index.ts
-var DebugApp = lazy(() => import("./DebugApp-7PFYN52J.mjs"));
-var DevtoolsOverviewContainer = lazy(() => import("./DevtoolsOverviewContainer-HYNZTH2Z.mjs"));
-var SpaceGenerator = lazy(() => import("./SpaceGenerator-HR7R3RTE.mjs"));
+var DebugApp = lazy(() => import("./DebugApp-WSEJPCKY.mjs"));
+var DevtoolsOverviewContainer = lazy(() => import("./DevtoolsOverviewContainer-IIIWO77Q.mjs"));
+var SpaceGenerator = lazy(() => import("./SpaceGenerator-RHQLPN44.mjs"));
 
 // packages/plugins/plugin-debug/src/capabilities/react-surface.tsx
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-debug/src/capabilities/react-surface.tsx";
@@ -392,7 +428,7 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
         if (!(collection instanceof CollectionType)) {
           return;
         }
-        const { dispatchPromise: dispatch } = context.requestCapability(Capabilities2.IntentDispatcher);
+        const { dispatchPromise: dispatch } = useIntentDispatcher();
         objects.forEach((object) => {
           void dispatch(createIntent(SpaceAction.AddObject, {
             target: collection,
@@ -424,7 +460,7 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
     ],
     position: "hoist",
     filter: (data) => {
-      const settings = context.requestCapability(Capabilities2.SettingsStore).getStore(DEBUG_PLUGIN).value;
+      const settings = context.getCapability(Capabilities2.SettingsStore).getStore(DEBUG_PLUGIN).value;
       return isEchoObject(data.subject) && !!settings.wireframe;
     },
     component: ({ data, role }) => /* @__PURE__ */ React5.createElement(Wireframe, {
@@ -520,7 +556,7 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
     role: "article",
     filter: (data) => data.subject === Devtools.Echo.Spaces,
     component: () => {
-      const { dispatchPromise: dispatch } = context.requestCapability(Capabilities2.IntentDispatcher);
+      const { dispatchPromise: dispatch } = useIntentDispatcher();
       const handleSelect = useCallback(() => dispatch(createIntent(LayoutAction.Open, {
         part: "main",
         subject: [
@@ -540,7 +576,7 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
     filter: (data) => data.subject === Devtools.Echo.Space,
     component: () => {
       const space = useCurrentSpace();
-      const { dispatchPromise: dispatch } = context.requestCapability(Capabilities2.IntentDispatcher);
+      const { dispatchPromise: dispatch } = useIntentDispatcher();
       const handleSelect = useCallback(() => dispatch(createIntent(LayoutAction.Open, {
         part: "main",
         subject: [
@@ -578,6 +614,17 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
       });
     }
   }),
+  createSurface({
+    id: `${DEBUG_PLUGIN}/echo/schema`,
+    role: "article",
+    filter: (data) => data.subject === Devtools.Echo.Schema,
+    component: () => {
+      const space = useCurrentSpace();
+      return /* @__PURE__ */ React5.createElement(SchemaPanel, {
+        space
+      });
+    }
+  }),
   createSurface({
     id: `${DEBUG_PLUGIN}/echo/automerge`,
     role: "article",
@@ -665,7 +712,7 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
     filter: (data) => data.subject === Devtools.Edge.Traces,
     component: () => {
       const space = useCurrentSpace();
-      return /* @__PURE__ */ React5.createElement(InvocationTracePanel, {
+      return /* @__PURE__ */ React5.createElement(InvocationTraceContainer, {
         space
       });
     }
@@ -675,7 +722,7 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
     role: "article",
     filter: (data) => data.subject === Devtools.Edge.Testing,
     component: () => {
-      const { dispatchPromise: dispatch } = context.requestCapability(Capabilities2.IntentDispatcher);
+      const { dispatchPromise: dispatch } = useIntentDispatcher();
       const onSpaceCreate = useCallback(async (space) => {
         await space.waitUntilReady();
         await dispatch(createIntent(SpaceAction.Migrate, {
@@ -696,7 +743,7 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
           result
         }, {
           F: __dxlog_file2,
-          L: 377,
+          L: 388,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -719,4 +766,4 @@ var react_surface_default = (context) => contributes(Capabilities2.ReactSurface,
 export {
   react_surface_default as default
 };
-//# sourceMappingURL=react-surface-NEMNEAAI.mjs.map
+//# sourceMappingURL=react-surface-PHUWS5WD.mjs.map