@dxos/plugin-debug 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@dxos/plugin-debug",
-  "version": "0.6.14-main.2b6a0f3",
+  "version": "0.6.14-main.f49f251",
   "description": "DXOS Surface plugin for testing.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": false,
+  "sideEffects": true,
   "exports": {
     ".": {
-      "browser": "./dist/lib/browser/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs"
     },
     "./meta": {
-      "browser": "./dist/lib/browser/meta.mjs",
-      "types": "./dist/types/src/meta.d.ts"
+      "types": "./dist/types/src/meta.d.ts",
+      "browser": "./dist/lib/browser/meta.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -36,36 +36,36 @@
     "lodash.get": "^4.4.2",
     "react-json-tree": "^0.18.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/async": "0.6.14-main.2b6a0f3",
-    "@dxos/app-framework": "0.6.14-main.2b6a0f3",
-    "@dxos/client-services": "0.6.14-main.2b6a0f3",
-    "@dxos/automerge": "0.6.14-main.2b6a0f3",
-    "@dxos/config": "0.6.14-main.2b6a0f3",
-    "@dxos/devtools": "0.6.14-main.2b6a0f3",
-    "@dxos/echo-generator": "0.6.14-main.2b6a0f3",
-    "@dxos/invariant": "0.6.14-main.2b6a0f3",
-    "@dxos/echo-schema": "0.6.14-main.2b6a0f3",
-    "@dxos/echo-pipeline": "0.6.14-main.2b6a0f3",
-    "@dxos/keys": "0.6.14-main.2b6a0f3",
-    "@dxos/local-storage": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-client": "0.6.14-main.2b6a0f3",
-    "@dxos/log": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-graph": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-markdown": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-settings": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-sketch": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-status-bar": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-space": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-table": "0.6.14-main.2b6a0f3",
-    "@dxos/plugin-theme": "0.6.14-main.2b6a0f3",
-    "@dxos/random": "0.6.14-main.2b6a0f3",
-    "@dxos/protocols": "0.6.14-main.2b6a0f3",
-    "@dxos/react-client": "0.6.14-main.2b6a0f3",
-    "@dxos/react-hooks": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-attention": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-table": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.6.14-main.2b6a0f3",
-    "@dxos/util": "0.6.14-main.2b6a0f3"
+    "@dxos/app-framework": "0.6.14-main.f49f251",
+    "@dxos/async": "0.6.14-main.f49f251",
+    "@dxos/automerge": "0.6.14-main.f49f251",
+    "@dxos/config": "0.6.14-main.f49f251",
+    "@dxos/devtools": "0.6.14-main.f49f251",
+    "@dxos/client-services": "0.6.14-main.f49f251",
+    "@dxos/echo-generator": "0.6.14-main.f49f251",
+    "@dxos/invariant": "0.6.14-main.f49f251",
+    "@dxos/echo-schema": "0.6.14-main.f49f251",
+    "@dxos/echo-pipeline": "0.6.14-main.f49f251",
+    "@dxos/local-storage": "0.6.14-main.f49f251",
+    "@dxos/keys": "0.6.14-main.f49f251",
+    "@dxos/plugin-client": "0.6.14-main.f49f251",
+    "@dxos/log": "0.6.14-main.f49f251",
+    "@dxos/plugin-graph": "0.6.14-main.f49f251",
+    "@dxos/plugin-markdown": "0.6.14-main.f49f251",
+    "@dxos/plugin-sketch": "0.6.14-main.f49f251",
+    "@dxos/plugin-status-bar": "0.6.14-main.f49f251",
+    "@dxos/plugin-space": "0.6.14-main.f49f251",
+    "@dxos/plugin-table": "0.6.14-main.f49f251",
+    "@dxos/protocols": "0.6.14-main.f49f251",
+    "@dxos/plugin-theme": "0.6.14-main.f49f251",
+    "@dxos/react-client": "0.6.14-main.f49f251",
+    "@dxos/react-hooks": "0.6.14-main.f49f251",
+    "@dxos/random": "0.6.14-main.f49f251",
+    "@dxos/react-ui-attention": "0.6.14-main.f49f251",
+    "@dxos/react-ui-syntax-highlighter": "0.6.14-main.f49f251",
+    "@dxos/react-ui-data": "0.6.14-main.f49f251",
+    "@dxos/react-ui-table": "0.6.14-main.f49f251",
+    "@dxos/util": "0.6.14-main.f49f251"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -75,17 +75,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui": "0.6.14-main.2b6a0f3",
-    "@dxos/storybook-utils": "0.6.14-main.2b6a0f3"
+    "@dxos/react-ui": "0.6.14-main.f49f251",
+    "@dxos/storybook-utils": "0.6.14-main.f49f251",
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3"
+    "@dxos/random": "0.6.14-main.f49f251",
+    "@dxos/react-ui": "0.6.14-main.f49f251",
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251"
   },
   "publishConfig": {
     "access": "public"

package/src/DebugPlugin.tsx

@@ -5,23 +5,22 @@
 import React, { type ReactNode, useEffect, useState } from 'react';
 
 import {
-  getPlugin,
+  definePlugin,
   parseGraphPlugin,
   parseIntentPlugin,
+  parseMetadataResolverPlugin,
+  parseSettingsPlugin,
   resolvePlugin,
-  type IntentPluginProvides,
-  type Plugin,
-  type PluginDefinition,
 } from '@dxos/app-framework';
 import { Timer } from '@dxos/async';
 import { Devtools } from '@dxos/devtools';
-import { LocalStorageStore } from '@dxos/local-storage';
-import { type ClientPluginProvides } from '@dxos/plugin-client';
-import { createExtension, Graph, type Node } from '@dxos/plugin-graph';
+import { invariant } from '@dxos/invariant';
+import { type ClientPluginProvides, parseClientPlugin } from '@dxos/plugin-client';
+import { createExtension, Graph, type Node, toSignal } from '@dxos/plugin-graph';
 import { SpaceAction } from '@dxos/plugin-space';
 import { CollectionType } from '@dxos/plugin-space/types';
 import { type Client } from '@dxos/react-client';
-import { type Space, SpaceState, isEchoObject, isSpace } from '@dxos/react-client/echo';
+import { create, getTypename, isEchoObject, isSpace, parseId, type Space, SpaceState } from '@dxos/react-client/echo';
 import { Main } from '@dxos/react-ui';
 import {
   baseSurface,
@@ -30,25 +29,32 @@ import {
   topbarBlockPaddingStart,
 } from '@dxos/react-ui-theme';
 
-import { DebugGlobal, DebugSettings, DebugSpace, DebugObjectPanel, DebugStatus, Wireframe } from './components';
+import { DebugGlobal, DebugObjectPanel, DebugSettings, DebugSpace, DebugStatus, Wireframe } from './components';
 import meta, { DEBUG_PLUGIN } from './meta';
 import translations from './translations';
-import { DebugContext, type DebugSettingsProps, type DebugPluginProvides, DebugAction } from './types';
-
-export const SETTINGS_KEY = DEBUG_PLUGIN + '/settings';
+import {
+  DebugAction,
+  DebugContext,
+  type DebugPluginProvides,
+  type DebugSettingsProps,
+  DebugSettingsSchema,
+} from './types';
 
-export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
-  const settings = new LocalStorageStore<DebugSettingsProps>(DEBUG_PLUGIN, { debug: true, devtools: true });
-  let intentPlugin: Plugin<IntentPluginProvides>;
+export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
+  const settings = create<DebugSettingsProps>({
+    debug: true,
+    devtools: true,
+  });
 
   return {
     meta,
     ready: async (plugins) => {
-      intentPlugin = resolvePlugin(plugins, parseIntentPlugin)!;
-      settings
-        .prop({ key: 'debug', type: LocalStorageStore.bool({ allowUndefined: true }) })
-        .prop({ key: 'devtools', type: LocalStorageStore.bool({ allowUndefined: true }) })
-        .prop({ key: 'wireframe', type: LocalStorageStore.bool({ allowUndefined: true }) });
+      context.init(plugins);
+      context.resolvePlugin(parseSettingsPlugin).provides.settingsStore.createStore({
+        schema: DebugSettingsSchema,
+        prefix: DEBUG_PLUGIN,
+        value: settings,
+      });
 
       // TODO(burdon): Remove hacky dependency on global variable.
       // Used to test how composer handles breaking protocol changes.
@@ -65,10 +71,10 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
       };
     },
     unload: async () => {
-      settings.close();
+      context.dispose();
     },
     provides: {
-      settings: settings.values,
+      settings,
       translations,
       context: ({ children }) => {
         const [timer, setTimer] = useState<Timer>();
@@ -94,15 +100,19 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
       },
       graph: {
         builder: (plugins) => {
+          const clientPlugin = resolvePlugin(plugins, parseClientPlugin);
+          const metadataPlugin = resolvePlugin(plugins, parseMetadataResolverPlugin);
           const graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
-
-          // TODO(burdon): Combine nodes into single subtree.
+          const resolve = metadataPlugin?.provides.metadata.resolver;
+          const client = clientPlugin?.provides.client;
+          invariant(resolve);
+          invariant(client);
 
           return [
             // Devtools node.
             createExtension({
               id: 'dxos.org/plugin/debug/devtools',
-              filter: (node): node is Node<null> => !!settings.values.devtools && node.id === 'root',
+              filter: (node): node is Node<null> => !!settings.devtools && node.id === 'root',
               connector: () => [
                 {
                   // TODO(zan): Removed `/` because it breaks deck layout reload. Fix?
@@ -120,7 +130,7 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
             // Debug node.
             createExtension({
               id: 'dxos.org/plugin/debug/debug',
-              filter: (node): node is Node<null> => !!settings.values.debug && node.id === 'root',
+              filter: (node): node is Node<null> => !!settings.debug && node.id === 'root',
               connector: () => [
                 {
                   id: 'dxos.org/plugin/debug/debug',
@@ -137,7 +147,7 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
             // Space debug nodes.
             createExtension({
               id: 'dxos.org/plugin/debug/spaces',
-              filter: (node): node is Node<Space> => !!settings.values.debug && isSpace(node.data),
+              filter: (node): node is Node<Space> => !!settings.debug && isSpace(node.data),
               connector: ({ node }) => {
                 const space = node.data;
                 return [
@@ -153,6 +163,77 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
                 ];
               },
             }),
+
+            // Create nodes for debug sidebar.
+            createExtension({
+              id: `${DEBUG_PLUGIN}/debug-for-subject`,
+              resolver: ({ id }) => {
+                // TODO(Zan): Find util (or make one).
+                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 space = client.spaces.get().find((space) => space.id === spaceId);
+                if (!objectId) {
+                  // TODO(burdon): Ref SPACE_PLUGIN ns.
+                  const label = space
+                    ? space.properties.name || ['unnamed space label', { ns: DEBUG_PLUGIN }]
+                    : ['unnamed object settings label', { ns: DEBUG_PLUGIN }];
+
+                  // TODO(wittjosiah): Support comments for arbitrary subjects.
+                  //   This is to ensure that the comments panel is not stuck on an old object.
+                  return {
+                    id,
+                    type,
+                    data: null,
+                    properties: {
+                      icon,
+                      label,
+                      showResolvedThreads: false,
+                      object: null,
+                      space,
+                    },
+                  };
+                }
+
+                const object = toSignal(
+                  (onChange) => {
+                    const timeout = setTimeout(async () => {
+                      await space?.db.loadObjectById(objectId);
+                      onChange();
+                    });
+
+                    return () => clearTimeout(timeout);
+                  },
+                  () => space?.db.getObjectById(objectId),
+                  subjectId,
+                );
+                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,
+                  },
+                };
+              },
+            }),
           ];
         },
       },
@@ -160,7 +241,7 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
         resolver: async (intent, plugins) => {
           switch (intent.action) {
             case DebugAction.OPEN_DEVTOOLS: {
-              const clientPlugin = getPlugin<ClientPluginProvides>(plugins, 'dxos.org/plugin/client');
+              const clientPlugin = context.getPlugin<ClientPluginProvides>('dxos.org/plugin/client');
               const client = clientPlugin.provides.client;
               const vaultUrl = client.config.values?.runtime?.client?.remoteSource ?? 'https://halo.dxos.org';
 
@@ -185,7 +266,7 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
         component: ({ name, data, role }) => {
           switch (role) {
             case 'settings':
-              return data.plugin === meta.id ? <DebugSettings settings={settings.values} /> : null;
+              return data.plugin === meta.id ? <DebugSettings settings={settings} /> : null;
             case 'status':
               return <DebugStatus />;
             case 'complementary--debug':
@@ -195,9 +276,9 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
           const primary = data.active ?? data.object;
           let component: ReactNode;
           if (role === 'main' || role === 'article') {
-            if (primary === 'devtools' && settings.values.devtools) {
+            if (primary === 'devtools' && settings.devtools) {
               component = <Devtools />;
-            } else if (!primary || typeof primary !== 'object' || !settings.values.debug) {
+            } else if (!primary || typeof primary !== 'object' || !settings.debug) {
               component = null;
             } else if ('space' in primary && isSpace(primary.space)) {
               component = (
@@ -215,7 +296,7 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
                       return;
                     }
 
-                    void intentPlugin?.provides.intent.dispatch(
+                    void context.resolvePlugin(parseIntentPlugin).provides.intent.dispatch(
                       objects.map((object) => ({
                         action: SpaceAction.ADD_OBJECT,
                         data: { target: collection, object },
@@ -232,17 +313,17 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
           }
 
           if (!component) {
-            if (settings.values.wireframe) {
+            if (settings.wireframe) {
               if (role === 'main' || role === 'article' || role === 'section') {
                 const primary = data.active ?? data.object;
                 const isCollection = primary instanceof CollectionType;
                 // TODO(burdon): Move into Container abstraction.
                 if (!isCollection) {
                   return {
-                    disposition: 'hoist',
                     node: (
                       <Wireframe label={`${role}:${name}`} object={primary} classNames='row-span-2 overflow-hidden' />
                     ),
+                    disposition: 'hoist',
                   };
                 }
               }
@@ -273,4 +354,4 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
       },
     },
   };
-};
+});

package/src/components/DebugSettings.tsx

@@ -8,9 +8,9 @@ import React, { useEffect, useState } from 'react';
 import { parseFileManagerPlugin, useResolvePlugin } from '@dxos/app-framework';
 import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
 import { log } from '@dxos/log';
-import { SettingsValue } from '@dxos/plugin-settings';
 import { useClient } from '@dxos/react-client';
 import { useTranslation, Button, Toast, Input, useFileDownload, Select } from '@dxos/react-ui';
+import { FormInput } from '@dxos/react-ui-data';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { setDeep } from '@dxos/util';
 
@@ -80,25 +80,25 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   return (
     <>
-      <SettingsValue label={t('settings show debug panel')}>
+      <FormInput label={t('settings show debug panel')}>
         <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </SettingsValue>
-      <SettingsValue label={t('settings show devtools panel')}>
+      </FormInput>
+      <FormInput label={t('settings show devtools panel')}>
         <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
-      </SettingsValue>
-      <SettingsValue label={t('settings wireframe')}>
+      </FormInput>
+      <FormInput label={t('settings wireframe')}>
         <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-      </SettingsValue>
-      <SettingsValue label={t('settings download diagnostics')}>
+      </FormInput>
+      <FormInput label={t('settings download diagnostics')}>
         <Button onClick={handleDownload}>
           <DownloadSimple className={getSize(5)} />
         </Button>
-      </SettingsValue>
-      <SettingsValue label={t('settings repair')}>
+      </FormInput>
+      <FormInput label={t('settings repair')}>
         <Button onClick={handleRepair}>
           <FirstAidKit className={getSize(5)} />
         </Button>
-      </SettingsValue>
+      </FormInput>
 
       {/* TODO(burdon): Move to layout? */}
       {toast && (
@@ -113,7 +113,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
         </Toast.Root>
       )}
 
-      <SettingsValue label={t('settings choose storage adaptor')}>
+      <FormInput label={t('settings choose storage adaptor')}>
         <Select.Root
           value={
             Object.entries(StorageAdapters).find(
@@ -144,7 +144,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
+      </FormInput>
     </>
   );
 };

package/src/components/DebugStatus.tsx

@@ -199,7 +199,7 @@ const PerformanceIndicator = () => {
       {visible && (
         <div
           className={mx(
-            'z-20 absolute bottom-[--statusbar-size] right-2 w-[450px] max-h-[600px]',
+            'z-20 absolute bottom-[--statusbar-size] right-4 w-[450px]',
             'overflow-x-hidden overflow-y-auto scrollbar-thin',
             'border-x border-y border-separator',
           )}

package/src/types.ts

@@ -12,6 +12,7 @@ import type {
   TranslationsProvides,
 } from '@dxos/app-framework';
 import type { TimerCallback, TimerOptions } from '@dxos/async';
+import { S } from '@dxos/echo-schema';
 
 import { DEBUG_PLUGIN } from './meta';
 
@@ -32,11 +33,15 @@ export const DebugContext: Context<DebugContextType> = createContext<DebugContex
   stop: () => {},
 });
 
-export type DebugSettingsProps = {
-  devtools?: boolean;
-  debug?: boolean;
-  wireframe?: boolean;
-};
+export const DebugSettingsSchema = S.mutable(
+  S.Struct({
+    devtools: S.optional(S.Boolean),
+    debug: S.optional(S.Boolean),
+    wireframe: S.optional(S.Boolean),
+  }),
+);
+
+export interface DebugSettingsProps extends S.Schema.Type<typeof DebugSettingsSchema> {}
 
 export type DebugPluginProvides = SurfaceProvides &
   IntentResolverProvides &

package/dist/lib/browser/chunk-6Y463JSP.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Context, createContext } from 'react';\n\nimport type {\n  GraphBuilderProvides,\n  IntentResolverProvides,\n  SettingsProvides,\n  SurfaceProvides,\n  TranslationsProvides,\n} from '@dxos/app-framework';\nimport type { TimerCallback, TimerOptions } from '@dxos/async';\n\nimport { DEBUG_PLUGIN } from './meta';\n\nconst DEBUG_ACTION = `${DEBUG_PLUGIN}/action`;\nexport enum DebugAction {\n  OPEN_DEVTOOLS = `${DEBUG_ACTION}/open-devtools`,\n}\n\nexport type DebugContextType = {\n  running: boolean;\n  start: (cb: TimerCallback, options: TimerOptions) => void;\n  stop: () => void;\n};\n\nexport const DebugContext: Context<DebugContextType> = createContext<DebugContextType>({\n  running: false,\n  start: () => {},\n  stop: () => {},\n});\n\nexport type DebugSettingsProps = {\n  devtools?: boolean;\n  debug?: boolean;\n  wireframe?: boolean;\n};\n\nexport type DebugPluginProvides = SurfaceProvides &\n  IntentResolverProvides &\n  GraphBuilderProvides &\n  SettingsProvides<DebugSettingsProps> &\n  TranslationsProvides;\n"],
-  "mappings": ";;;;;AAIA,SAAuBA,qBAAqB;AAa5C,IAAMC,eAAe,GAAGC,YAAAA;;UACZC,cAAAA;+CACM,GAAGF,YAAAA,gBAA4B,IAAA;GADrCE,gBAAAA,cAAAA,CAAAA,EAAAA;AAUL,IAAMC,eAA0CC,cAAgC;EACrFC,SAAS;EACTC,OAAO,MAAA;EAAO;EACdC,MAAM,MAAA;EAAO;AACf,CAAA;",
-  "names": ["createContext", "DEBUG_ACTION", "DEBUG_PLUGIN", "DebugAction", "DebugContext", "createContext", "running", "start", "stop"]
-}