@dxos/plugin-debug 0.6.13 → 0.6.14-main.7bd9c89

package/dist/lib/browser/index.mjs

@@ -1,31 +1,44 @@
 import {
   DebugAction,
   DebugContext
-} from "./chunk-RYK3J66D.mjs";
+} from "./chunk-6Y463JSP.mjs";
 import {
   DEBUG_PLUGIN,
   meta_default
-} from "./chunk-WEGYHXMB.mjs";
+} from "./chunk-2HTS7SNO.mjs";
 
-// packages/plugins/experimental/plugin-debug/src/DebugPlugin.tsx
-import { Bug, Hammer } from "@phosphor-icons/react";
+// packages/plugins/plugin-debug/src/DebugPlugin.tsx
 import React5, { useEffect as useEffect3, useState as useState3 } from "react";
 import { getPlugin, parseGraphPlugin as parseGraphPlugin2, parseIntentPlugin, resolvePlugin } from "@dxos/app-framework";
 import { Timer } from "@dxos/async";
+import { Devtools } from "@dxos/devtools";
 import { LocalStorageStore } from "@dxos/local-storage";
 import { createExtension, Graph } from "@dxos/plugin-graph";
 import { SpaceAction } from "@dxos/plugin-space";
 import { CollectionType } from "@dxos/plugin-space/types";
-import { SpaceState, isSpace } from "@dxos/react-client/echo";
+import { SpaceState, isEchoObject, isSpace } from "@dxos/react-client/echo";
 import { Main } from "@dxos/react-ui";
-import { baseSurface, topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from "@dxos/react-ui-theme";
+import { baseSurface, bottombarBlockPaddingEnd, fixedInsetFlexLayout, topbarBlockPaddingStart } from "@dxos/react-ui-theme";
 
-// packages/plugins/experimental/plugin-debug/src/components/index.ts
-import React4 from "react";
+// 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", {
+    role: "form",
+    className: "flex flex-col"
+  }, /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
+    classNames: "flex text-xs",
+    language: "json"
+  }, JSON.stringify(object, null, 2)));
+};
 
-// packages/plugins/experimental/plugin-debug/src/components/DebugSettings.tsx
+// packages/plugins/plugin-debug/src/components/DebugSettings.tsx
 import { Gift, DownloadSimple, FirstAidKit } from "@phosphor-icons/react";
-import React, { useEffect, useState } from "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";
@@ -34,7 +47,7 @@ import { useClient } from "@dxos/react-client";
 import { useTranslation, Button, Toast, Input, useFileDownload, Select } from "@dxos/react-ui";
 import { getSize, mx } from "@dxos/react-ui-theme";
 import { setDeep } from "@dxos/util";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-debug/src/components/DebugSettings.tsx";
+var __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
@@ -111,39 +124,39 @@ var DebugSettings = ({ settings }) => {
       });
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SettingsValue, {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(SettingsValue, {
     label: t("settings show debug panel")
-  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
     checked: settings.debug,
     onCheckedChange: (checked) => settings.debug = !!checked
-  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React2.createElement(SettingsValue, {
     label: t("settings show devtools panel")
-  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
     checked: settings.devtools,
     onCheckedChange: (checked) => settings.devtools = !!checked
-  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React2.createElement(SettingsValue, {
     label: t("settings wireframe")
-  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
     checked: settings.wireframe,
     onCheckedChange: (checked) => settings.wireframe = !!checked
-  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React2.createElement(SettingsValue, {
     label: t("settings download diagnostics")
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Button, {
     onClick: handleDownload
-  }, /* @__PURE__ */ React.createElement(DownloadSimple, {
+  }, /* @__PURE__ */ React2.createElement(DownloadSimple, {
     className: getSize(5)
-  }))), /* @__PURE__ */ React.createElement(SettingsValue, {
+  }))), /* @__PURE__ */ React2.createElement(SettingsValue, {
     label: t("settings repair")
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Button, {
     onClick: handleRepair
-  }, /* @__PURE__ */ React.createElement(FirstAidKit, {
+  }, /* @__PURE__ */ React2.createElement(FirstAidKit, {
     className: getSize(5)
-  }))), toast && /* @__PURE__ */ React.createElement(Toast.Root, null, /* @__PURE__ */ React.createElement(Toast.Body, null, /* @__PURE__ */ React.createElement(Toast.Title, null, /* @__PURE__ */ React.createElement(Gift, {
+  }))), 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__ */ React.createElement("span", null, toast.title)), toast.description && /* @__PURE__ */ React.createElement(Toast.Description, null, toast.description))), /* @__PURE__ */ React.createElement(SettingsValue, {
+  }), /* @__PURE__ */ React2.createElement("span", null, toast.title)), toast.description && /* @__PURE__ */ React2.createElement(Toast.Description, null, toast.description))), /* @__PURE__ */ React2.createElement(SettingsValue, {
     label: t("settings choose storage adaptor")
-  }, /* @__PURE__ */ React.createElement(Select.Root, {
+  }, /* @__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"))) {
@@ -155,9 +168,9 @@ var DebugSettings = ({ settings }) => {
         ], StorageAdapters[value]);
       }
     }
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: t("settings data store label")
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, Object.keys(StorageAdapters).map((key) => /* @__PURE__ */ React.createElement(Select.Option, {
+  }), /* @__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`)))))))));
@@ -171,9 +184,8 @@ var updateConfig = (config, setConfig, path, value) => {
   });
 };
 
-// packages/plugins/experimental/plugin-debug/src/components/DebugStatus.tsx
-import { ChartBar, Circle, Lightning, LightningSlash } from "@phosphor-icons/react";
-import React2, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+// 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";
@@ -182,8 +194,9 @@ import { getActiveSpace } from "@dxos/plugin-space";
 import { StatusBar } from "@dxos/plugin-status-bar";
 import { ConnectionState } from "@dxos/protocols/proto/dxos/client/services";
 import { useNetworkStatus } from "@dxos/react-client/mesh";
-import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-debug/src/components/DebugStatus.tsx";
+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",
@@ -220,19 +233,20 @@ var ErrorIndicator = () => {
     forceUpdate({});
   };
   if (errorRef.current) {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Button, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Button, {
       title: errorRef.current.message,
       onClick: handleReset
-    }, /* @__PURE__ */ React2.createElement(Circle, {
-      weight: "fill",
-      className: mx2(styles.error, getSize2(3))
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--warning-circle--duotone",
+      size: 4,
+      classNames: styles.error
     }));
   } else {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
       title: "No errors."
-    }, /* @__PURE__ */ React2.createElement(Circle, {
-      weight: "fill",
-      className: getSize2(3)
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--check--regular",
+      size: 4
     }));
   }
 };
@@ -245,16 +259,19 @@ var SwarmIndicator = () => {
     swarm
   ]);
   if (state === 0) {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
       title: "Connected to swarm."
-    }, /* @__PURE__ */ React2.createElement(Lightning, {
-      className: getSize2(4)
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--lightning--regular",
+      size: 4
     }));
   } else {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
       title: "Disconnected from swarm."
-    }, /* @__PURE__ */ React2.createElement(LightningSlash, {
-      className: mx2(styles.warning, getSize2(4))
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--lightning-slash--regular",
+      size: 4,
+      classNames: styles.warning
     }));
   }
 };
@@ -267,92 +284,98 @@ var SavingIndicator = () => {
   const _space = location2 && graph ? getActiveSpace(graph, firstIdInPart(location2.active, "main")) : void 0;
   switch (state) {
     case 2:
-      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
         title: "Edit not saved."
-      }, /* @__PURE__ */ React2.createElement(Circle, {
-        weight: "fill",
-        className: mx2(styles.warning, getSize2(3))
+      }, /* @__PURE__ */ React3.createElement(Icon, {
+        icon: "ph--circle--duotone",
+        size: 4,
+        classNames: styles.warning
       }));
     case 1:
-      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
         title: "Saving..."
-      }, /* @__PURE__ */ React2.createElement(Circle, {
-        weight: "fill",
-        className: mx2(styles.success, getSize2(3))
+      }, /* @__PURE__ */ React3.createElement(Icon, {
+        icon: "ph--circle--duotone",
+        size: 4,
+        classNames: styles.success
       }));
     case 0:
     default:
-      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
         title: "Modified indicator."
-      }, /* @__PURE__ */ React2.createElement(Circle, {
-        weight: "fill",
-        className: getSize2(3)
+      }, /* @__PURE__ */ React3.createElement(Icon, {
+        icon: "ph--circle--duotone",
+        size: 4
       }));
   }
 };
 var PerformanceIndicator = () => {
   const [visible, setVisible] = useState2(false);
   const [stats, refreshStats] = useStats();
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StatusBar.Button, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(StatusBar.Button, {
     onClick: () => setVisible((visible2) => !visible2),
     title: "Performance panels"
-  }, /* @__PURE__ */ React2.createElement(ChartBar, null)), visible && /* @__PURE__ */ React2.createElement("div", {
-    className: "z-20 absolute bottom-[24px] w-[450px] border-l border-y border-separator"
-  }, /* @__PURE__ */ React2.createElement(StatsPanel, {
+  }, /* @__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-2 w-[450px] max-h-[600px]", "overflow-x-hidden overflow-y-auto scrollbar-thin", "border-x border-y border-separator")
+  }, /* @__PURE__ */ React3.createElement(StatsPanel, {
     stats,
     onRefresh: refreshStats
   })));
 };
 var indicators = [
-  PerformanceIndicator,
   SavingIndicator,
-  ErrorIndicator,
-  SwarmIndicator
+  SwarmIndicator,
+  PerformanceIndicator,
+  ErrorIndicator
 ];
 var DebugStatus = () => {
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React2.createElement(Indicator, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React3.createElement(Indicator, {
     key: Indicator.name
   })));
 };
 
-// packages/plugins/experimental/plugin-debug/src/components/Wireframe.tsx
-import React3 from "react";
+// packages/plugins/plugin-debug/src/components/Wireframe.tsx
+import React4 from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { createAttendableAttributes } from "@dxos/react-ui-attention";
+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 = ({ label, data, className }) => {
-  const attendableAttrs = createAttendableAttributes(data);
+var Wireframe = ({ classNames, label, object }) => {
+  const attendableAttrs = useAttendableAttributes(fullyQualifiedId(object));
   const { width, height, ref } = useResizeDetector();
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     ref,
-    className: mx3("relative grow min-bs-96", className),
+    className: mx3("relative grow min-bs-96", classNames),
     ...attendableAttrs
-  }, /* @__PURE__ */ React3.createElement("div", {
-    className: "absolute inset-2 flex flex-col overflow-hidden font-mono"
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__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__ */ React3.createElement("div", null, label), /* @__PURE__ */ React3.createElement("div", null, `[${width}x${height}]`)), /* @__PURE__ */ React3.createElement("div", {
-    className: "flex grow overflow-auto"
-  }, data && /* @__PURE__ */ React3.createElement("pre", {
-    className: "text-neutral-500 text-sm whitespace-pre-line"
-  }, JSON.stringify(data, void 0, 1)))), /* @__PURE__ */ React3.createElement("svg", {
+  }, /* @__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 [&>*]:stroke-neutral-500"
-  }, /* @__PURE__ */ React3.createElement("rect", {
+    className: "bg-transparent [&>*]:text-subdued"
+  }, /* @__PURE__ */ React4.createElement("rect", {
     x: 0,
     y: 0,
     width,
     height,
     strokeWidth: 1,
     fill: "none"
-  }), /* @__PURE__ */ React3.createElement("line", {
+  }), /* @__PURE__ */ React4.createElement("line", {
     x1: 0,
     y1: 0,
     x2: width,
     y2: height,
     strokeWidth: 1
-  }), /* @__PURE__ */ React3.createElement("line", {
+  }), /* @__PURE__ */ React4.createElement("line", {
     x1: 0,
     y1: height,
     x2: width,
@@ -361,12 +384,11 @@ var Wireframe = ({ label, data, className }) => {
   })));
 };
 
-// packages/plugins/experimental/plugin-debug/src/components/index.ts
-var DebugGlobal = React4.lazy(() => import("./DebugGlobal-H56M2VL4.mjs"));
-var DebugSpace = React4.lazy(() => import("./DebugSpace-NHPMLATA.mjs"));
-var DevtoolsMain = React4.lazy(() => import("./DevtoolsMain-RWT3FLJ6.mjs"));
+// packages/plugins/plugin-debug/src/components/index.ts
+var DebugGlobal = lazy(() => import("./DebugGlobal-ZTCBF3XR.mjs"));
+var DebugSpace = lazy(() => import("./DebugSpace-FKZHQ75S.mjs"));
 
-// packages/plugins/experimental/plugin-debug/src/translations.ts
+// packages/plugins/plugin-debug/src/translations.ts
 var translations_default = [
   {
     "en-US": {
@@ -397,7 +419,7 @@ var translations_default = [
   }
 ];
 
-// packages/plugins/experimental/plugin-debug/src/DebugPlugin.tsx
+// packages/plugins/plugin-debug/src/DebugPlugin.tsx
 var SETTINGS_KEY = DEBUG_PLUGIN + "/settings";
 var DebugPlugin = () => {
   const settings = new LocalStorageStore(DEBUG_PLUGIN, {
@@ -483,8 +505,7 @@ var DebugPlugin = () => {
                         ns: DEBUG_PLUGIN
                       }
                     ],
-                    icon: (props) => /* @__PURE__ */ React5.createElement(Hammer, props),
-                    iconSymbol: "ph--hammer--regular"
+                    icon: "ph--hammer--regular"
                   }
                 }
               ]
@@ -507,8 +528,7 @@ var DebugPlugin = () => {
                         ns: DEBUG_PLUGIN
                       }
                     ],
-                    icon: (props) => /* @__PURE__ */ React5.createElement(Bug, props),
-                    iconSymbol: "ph--bug--regular"
+                    icon: "ph--bug--regular"
                   }
                 }
               ]
@@ -533,8 +553,7 @@ var DebugPlugin = () => {
                           ns: DEBUG_PLUGIN
                         }
                       ],
-                      icon: (props) => /* @__PURE__ */ React5.createElement(Bug, props),
-                      iconSymbol: "ph--bug--regular"
+                      icon: "ph--bug--regular"
                     }
                   }
                 ];
@@ -574,12 +593,16 @@ var DebugPlugin = () => {
               }) : 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;
           if (role === "main" || role === "article") {
             if (primary === "devtools" && settings.values.devtools) {
-              component = /* @__PURE__ */ React5.createElement(DevtoolsMain, null);
+              component = /* @__PURE__ */ React5.createElement(Devtools, null);
             } else if (!primary || typeof primary !== "object" || !settings.values.debug) {
               component = null;
             } else if ("space" in primary && isSpace(primary.space)) {
@@ -614,12 +637,16 @@ var DebugPlugin = () => {
             if (settings.values.wireframe) {
               if (role === "main" || role === "article" || role === "section") {
                 const primary2 = data.active ?? data.object;
-                if (!(primary2 instanceof CollectionType)) {
-                  return /* @__PURE__ */ React5.createElement(Wireframe, {
-                    label: role,
-                    data,
-                    className: "row-span-2 overflow-hidden"
-                  });
+                const isCollection = primary2 instanceof CollectionType;
+                if (!isCollection) {
+                  return {
+                    disposition: "hoist",
+                    node: /* @__PURE__ */ React5.createElement(Wireframe, {
+                      label: `${role}:${name}`,
+                      object: primary2,
+                      classNames: "row-span-2 overflow-hidden"
+                    })
+                  };
                 }
               }
             }
@@ -648,7 +675,7 @@ var DebugPlugin = () => {
   };
 };
 
-// packages/plugins/experimental/plugin-debug/src/index.ts
+// packages/plugins/plugin-debug/src/index.ts
 var src_default = DebugPlugin;
 export {
   DebugPlugin,