@dxos/plugin-debug 0.8.4-main.c85a9c8dae → 0.8.4-main.dfabb4ec29

package/src/containers/DebugObjectPanel/DebugObjectPanel.tsx

@@ -2,42 +2,73 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { ObjectsTree } from '@dxos/devtools';
-import { Filter, Obj, Query } from '@dxos/echo';
+import { Filter, Json, Obj, Query } from '@dxos/echo';
 import type { ObjectId } from '@dxos/keys';
 import { useQuery } from '@dxos/react-client/echo';
-import { Clipboard, Grid, Panel, ScrollArea } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Clipboard, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/ui-theme';
 
-export type DebugObjectPanelProps = {
-  object: Obj.Unknown;
-};
-
-export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
-  const db = Obj.getDatabase(object);
+export type DebugObjectPanelProps = Pick<
+  AppSurface.ObjectArticleProps<Obj.Unknown, {}, Obj.Unknown>,
+  'role' | 'companionTo'
+>;
 
+export const DebugObjectPanel = ({ role, companionTo }: DebugObjectPanelProps) => {
+  const db = Obj.getDatabase(companionTo);
   const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
+  const [depth, setDepth] = useState(0);
   const [selectedObject] = useQuery(
     db,
-    Query.select(Filter.id(selectedId ?? object.id)).options({ deleted: 'include' }),
+    Query.select(Filter.id(selectedId ?? companionTo.id)).options({ deleted: 'include' }),
   );
+  const refReplacer = useMemo(() => (db ? Json.createRefReplacer({ db, depth }) : undefined), [db, depth]);
 
   return (
     <Clipboard.Provider>
-      <Panel.Root>
+      <Panel.Root role={role}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root />
+        </Panel.Toolbar>
         <Panel.Content asChild>
-          <Grid rows={db ? 2 : 1} classNames='divide-y divide-separator'>
+          <div className={mx('grid divide-y divide-separator', db && 'grid-rows-[1fr_2fr]')}>
             {db && (
               <ScrollArea.Root>
                 <ScrollArea.Viewport>
-                  <ObjectsTree db={db} root={object} onSelect={(entity) => setSelectedId(entity.id)} />
+                  <ObjectsTree db={db} root={companionTo} onSelect={(entity) => setSelectedId(entity.id)} />
                 </ScrollArea.Viewport>
               </ScrollArea.Root>
             )}
-            <Json data={selectedObject} />
-          </Grid>
+            <Syntax.Root data={selectedObject} replacer={refReplacer}>
+              <Panel.Root>
+                <Panel.Toolbar asChild>
+                  <Toolbar.Root classNames='grid grid-cols-[1fr_3rem]'>
+                    <Syntax.Filter />
+                    <Input.Root>
+                      <Input.TextInput
+                        variant='subdued'
+                        type='number'
+                        min={0}
+                        step={1}
+                        aria-label='Ref depth'
+                        value={depth}
+                        onChange={(event) => setDepth(Math.max(0, Number(event.target.value) || 0))}
+                      />
+                    </Input.Root>
+                  </Toolbar.Root>
+                </Panel.Toolbar>
+                <Panel.Content asChild>
+                  <Syntax.Viewport>
+                    <Syntax.Code />
+                  </Syntax.Viewport>
+                </Panel.Content>
+              </Panel.Root>
+            </Syntax.Root>
+          </div>
         </Panel.Content>
       </Panel.Root>
     </Clipboard.Provider>

package/src/containers/DebugObjectPanel/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { DebugObjectPanel } from './DebugObjectPanel';
-
-export default DebugObjectPanel;
+export { DebugObjectPanel as default } from './DebugObjectPanel';

package/src/containers/DebugSpaceObjectsPanel/DebugSpaceObjectsPanel.tsx

@@ -4,33 +4,20 @@
 
 import React, { useState } from 'react';
 
-import { useCapability } from '@dxos/app-framework/ui';
-import { useLayout } from '@dxos/app-toolkit/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { ObjectsTree } from '@dxos/devtools';
-import { type Database, Filter, Query } from '@dxos/echo';
-import type { ObjectId } from '@dxos/keys';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { parseId, useQuery } from '@dxos/react-client/echo';
+import { Filter, Query } from '@dxos/echo';
+import { type ObjectId } from '@dxos/keys';
+import { useQuery } from '@dxos/react-client/echo';
 import { Clipboard, Grid, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
-export const DebugSpaceObjectsPanel = () => {
-  const layout = useLayout();
-  const client = useCapability(ClientCapabilities.Client);
-  const { spaceId } = parseId(layout.workspace);
-  const space = spaceId ? client.spaces.get(spaceId) : undefined;
-  if (!space) {
-    return null;
-  }
+export type DebugSpaceObjectsPanelProps = AppSurface.SpaceArticleProps;
 
-  return <DebugSpaceObjectsPanelMain database={space.db} />;
-};
-
-const DebugSpaceObjectsPanelMain = ({ database }: { database: Database.Database }) => {
+export const DebugSpaceObjectsPanel = ({ space }: DebugSpaceObjectsPanelProps) => {
   const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
-
   const [selectedObject] = useQuery(
-    database,
+    space.db,
     selectedId ? Query.select(Filter.id(selectedId)) : Query.select(Filter.nothing()),
   );
 
@@ -48,10 +35,10 @@ const DebugSpaceObjectsPanelMain = ({ database }: { database: Database.Database
           <Grid rows={2} classNames='divide-y divide-separator'>
             <ScrollArea.Root>
               <ScrollArea.Viewport>
-                <ObjectsTree db={database} onSelect={(entity) => setSelectedId(entity.id)} />
+                <ObjectsTree db={space.db} onSelect={(entity) => setSelectedId(entity.id)} />
               </ScrollArea.Viewport>
             </ScrollArea.Root>
-            {selectedObject && <Json classNames='p-1' data={selectedObject} />}
+            {selectedObject && <JsonHighlighter classNames='p-1' data={selectedObject} />}
           </Grid>
         </Panel.Content>
       </Panel.Root>

package/src/containers/DebugSpaceObjectsPanel/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { DebugSpaceObjectsPanel } from './DebugSpaceObjectsPanel';
-
-export default DebugSpaceObjectsPanel;
+export { DebugSpaceObjectsPanel as default } from './DebugSpaceObjectsPanel';

package/src/containers/DebugStatus/DebugStatus.tsx

@@ -5,11 +5,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { TimeoutError } from '@dxos/async';
-import { useActiveSpace } from '@dxos/plugin-space';
-import { StatusBar } from '@dxos/plugin-status-bar';
+import { StatusBar } from '@dxos/plugin-status-bar/components';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { Icon } from '@dxos/react-ui';
+import { IconButton } from '@dxos/react-ui';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -89,14 +88,20 @@ const ErrorIndicator = () => {
 
   if (errorRef.current) {
     return (
-      <StatusBar.Button title={errorRef.current.message} onClick={handleReset}>
-        <Icon icon='ph--warning-circle--duotone' size={4} classNames={styles.error} />
-      </StatusBar.Button>
+      <StatusBar.Item>
+        <IconButton
+          icon='ph--warning-circle--duotone'
+          iconOnly
+          label={errorRef.current.message}
+          classNames={styles.error}
+          onClick={handleReset}
+        />
+      </StatusBar.Item>
     );
   } else {
     return (
-      <StatusBar.Item title='No errors.'>
-        <Icon icon='ph--check--regular' size={4} />
+      <StatusBar.Item>
+        <IconButton variant='ghost' icon='ph--check--regular' iconOnly label='No errors.' />
       </StatusBar.Item>
     );
   }
@@ -114,14 +119,20 @@ const SwarmIndicator = () => {
 
   if (state === 0) {
     return (
-      <StatusBar.Item title='Connected to swarm.'>
-        <Icon icon='ph--lightning--regular' size={4} />
+      <StatusBar.Item>
+        <IconButton variant='ghost' icon='ph--lightning--regular' iconOnly label='Connected to swarm.' />
       </StatusBar.Item>
     );
   } else {
     return (
-      <StatusBar.Item title='Disconnected from swarm.'>
-        <Icon icon='ph--lightning-slash--regular' size={4} classNames={styles.warning} />
+      <StatusBar.Item>
+        <IconButton
+          variant='ghost'
+          icon='ph--lightning-slash--regular'
+          iconOnly
+          label='Disconnected from swarm.'
+          classNames={styles.warning}
+        />
       </StatusBar.Item>
     );
   }
@@ -133,7 +144,6 @@ const SwarmIndicator = () => {
 // TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
-  const _space = useActiveSpace();
   // TODO(dmaretskyi): Fix this when we have save status for automerge.
   // useEffect(() => {
   //   if (!space) {
@@ -156,21 +166,33 @@ const SavingIndicator = () => {
   switch (state) {
     case 2:
       return (
-        <StatusBar.Item title='Edit not saved.'>
-          <Icon icon='ph--circle--duotone' size={4} classNames={styles.warning} />
+        <StatusBar.Item>
+          <IconButton
+            variant='ghost'
+            icon='ph--circle--duotone'
+            iconOnly
+            label='Edit not saved.'
+            classNames={styles.warning}
+          />
         </StatusBar.Item>
       );
     case 1:
       return (
-        <StatusBar.Item title='Saving...'>
-          <Icon icon='ph--circle--duotone' size={4} classNames={styles.success} />
+        <StatusBar.Item>
+          <IconButton
+            variant='ghost'
+            icon='ph--circle--duotone'
+            iconOnly
+            label='Saving...'
+            classNames={styles.success}
+          />
         </StatusBar.Item>
       );
     case 0:
     default:
       return (
-        <StatusBar.Item title='Modified indicator.'>
-          <Icon icon='ph--circle--duotone' size={4} />
+        <StatusBar.Item>
+          <IconButton variant='ghost' icon='ph--circle--duotone' iconOnly label='Modified indicator.' />
         </StatusBar.Item>
       );
   }

package/src/containers/DebugStatus/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DebugStatus } from './DebugStatus';
-
-export default DebugStatus;
+export { DebugStatus as default } from './DebugStatus';

package/src/containers/DevtoolsOverviewContainer/DevtoolsOverviewContainer.tsx

@@ -9,9 +9,16 @@ import { StatsPanel, useStats } from '@dxos/devtools';
 
 export const DevtoolsOverviewContainer = () => {
   const [stats, refreshStats] = useStats();
+  const surfaceProfilerStats = Surface.useProfilerStats();
+  const clearSurfaceProfiler = Surface.useProfilerClear();
 
   return (
-    <StatsPanel stats={stats} onRefresh={refreshStats}>
+    <StatsPanel
+      stats={stats}
+      surfaceProfilerStats={surfaceProfilerStats}
+      onRefresh={refreshStats}
+      onClearSurfaceProfiler={clearSurfaceProfiler}
+    >
       <Surface.Surface role='devtools-overview' />
     </StatsPanel>
   );

package/src/containers/DevtoolsOverviewContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { DevtoolsOverviewContainer } from './DevtoolsOverviewContainer';
-
-export default DevtoolsOverviewContainer;
+export { DevtoolsOverviewContainer as default } from './DevtoolsOverviewContainer';

package/src/containers/SpaceGenerator/SpaceGenerator.tsx

@@ -7,121 +7,120 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { ComputeGraph } from '@dxos/conductor';
 import { Filter, Obj, type Type } from '@dxos/echo';
-import { Markdown } from '@dxos/plugin-markdown/types';
-import { Sheet } from '@dxos/plugin-sheet/types';
-import { Diagram } from '@dxos/plugin-sketch/types';
+import { Markdown } from '@dxos/plugin-markdown';
+import { Sheet } from '@dxos/plugin-sheet';
+import { Sketch } from '@dxos/plugin-sketch';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { IconButton, Input, Panel, ScrollArea, Toolbar, useAsyncEffect } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { Organization, Person, Task } from '@dxos/types';
-import { jsonKeyReplacer, sortKeys } from '@dxos/util';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { sortKeys } from '@dxos/util';
 
-import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '../../components';
+import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '#components';
+
+// TODO(burdon): Make extensible.
+const staticTypes = [Markdown.Document, Sketch.Sketch, Sheet.Sheet, ComputeGraph];
+const recordTypes: Type.AnyObj[] = [Organization.Organization, Person.Person, Task.Task];
 
 export type SpaceGeneratorProps = {
   space: Space;
   onCreateObjects?: (objects: Obj.Unknown[]) => void;
 };
 
-export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
-  const { invokePromise } = useOperationInvoker();
-  const client = useClient();
-  const staticTypes = [Markdown.Document, Diagram.Diagram, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
-  const recordTypes: Type.AnyObj[] = [Organization.Organization, Person.Person, Task.Task];
-  const [count, setCount] = useState(1);
-  const [info, setInfo] = useState<any>({});
-  const presets = useMemo(() => generator(), []);
-
-  // Register types.
-  useAsyncEffect(async () => {
-    await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
-  }, [client]);
-
-  // Create type generators.
-  const typeMap = useMemo(() => {
-    const recordGenerators = new Map<string, ObjectGenerator<any>>(
-      recordTypes.map((type) => [type.typename, createGenerator(client, invokePromise, type)]),
-    );
+export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
+  ({ space, onCreateObjects, children, ...props }, forwardedRef) => {
+    const { invokePromise } = useOperationInvoker();
+    const client = useClient();
+    const [count, setCount] = useState(1);
+    const [info, setInfo] = useState<any>({});
+    const presets = useMemo(() => generator(), []);
 
-    return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
-  }, [client, recordTypes, invokePromise]);
-
-  // Query space to get info.
-  const updateInfo = async () => {
-    // Create schema map.
-    const echoSchema = await space.db.schemaRegistry.query().run();
-    const staticSchema = await space.db.graph.schemaRegistry.query().run();
-
-    // Create object map.
-    const objects = await space.db.query(Filter.everything()).run();
-    const objectMap = sortKeys(
-      objects.reduce<Record<string, number>>((map, obj) => {
-        const type = Obj.getTypename(obj);
-        if (type) {
-          const count = map[type] ?? 0;
-          map[type] = count + 1;
-        }
+    // Register types.
+    useAsyncEffect(async () => {
+      await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
+    }, [client, presets]);
 
-        return map;
-      }, {}),
-    );
+    // Create type generators.
+    const typeMap = useMemo(() => {
+      const recordGenerators = new Map<string, ObjectGenerator<any>>(
+        recordTypes.map((type) => [type.typename, createGenerator(client, invokePromise, type)]),
+      );
+
+      return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
+    }, [client, invokePromise, presets]);
+
+    // Query space to get info.
+    const updateInfo = useCallback(async () => {
+      const echoSchema = await space.db.schemaRegistry.query().run();
+      const staticSchema = await space.db.graph.schemaRegistry.query().run();
+
+      const objects = await space.db.query(Filter.everything()).run();
+      const objectMap = sortKeys(
+        objects.reduce<Record<string, number>>((map, obj) => {
+          const type = Obj.getTypename(obj);
+          if (type) {
+            const count = map[type] ?? 0;
+            map[type] = count + 1;
+          }
+
+          return map;
+        }, {}),
+      );
 
-    setInfo({
-      schema: {
-        static: staticSchema.length,
-        mutable: echoSchema.length,
+      setInfo({
+        schema: {
+          static: staticSchema.length,
+          mutable: echoSchema.length,
+        },
+        objects: objectMap,
+      });
+    }, [space]);
+
+    useAsyncEffect(updateInfo, [updateInfo]);
+
+    const handleCreateData = useCallback(
+      async (typename: string) => {
+        const constructor = typeMap.get(typename);
+        if (constructor) {
+          // TODO(burdon): Input to specify number of objects.
+          await constructor(space, count, onCreateObjects);
+          await updateInfo();
+        }
       },
-      objects: objectMap,
-    });
-  };
-
-  useAsyncEffect(updateInfo, [space]);
-
-  const handleCreateData = useCallback(
-    async (typename: string) => {
-      const constructor = typeMap.get(typename);
-      if (constructor) {
-        // TODO(burdon): Input to specify number of objects.
-        await constructor(space, count, onCreateObjects);
-        await updateInfo();
-      }
-    },
-    [typeMap, count],
-  );
-
-  return (
-    <Panel.Root>
-      <Panel.Toolbar asChild>
-        <Toolbar.Root>
-          <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
-          <Toolbar.Separator />
-          <Input.Root>
-            <Input.TextInput
-              type='number'
-              placeholder='Count'
-              classNames='w-[4rem] text-right'
-              min={1}
-              max={100}
-              size={8}
-              value={count}
-              onChange={(event) => setCount(parseInt(event.target.value))}
-            />
-          </Input.Root>
-        </Toolbar.Root>
-      </Panel.Toolbar>
-      <Panel.Content asChild>
-        <ScrollArea.Root thin orientation='vertical'>
-          <ScrollArea.Viewport classNames='gap-4 divide-y divide-subdued-separator'>
-            <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
-            <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
-            <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
-            <SyntaxHighlighter language='json' classNames='text-xs'>
-              {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
-            </SyntaxHighlighter>
-          </ScrollArea.Viewport>
-        </ScrollArea.Root>
-      </Panel.Content>
-    </Panel.Root>
-  );
-};
+      [typeMap, count, space, onCreateObjects, updateInfo],
+    );
+
+    return (
+      <Panel.Root {...composableProps(props)} ref={forwardedRef}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
+            <Toolbar.Separator />
+            <Input.Root>
+              <Input.TextInput
+                type='number'
+                placeholder='Count'
+                classNames='w-[4rem] text-right'
+                min={1}
+                max={100}
+                size={8}
+                value={count}
+                onChange={(event) => setCount(parseInt(event.target.value))}
+              />
+            </Input.Root>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root thin orientation='vertical'>
+            <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-subdued-separator'>
+              <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
+              <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
+              <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);

package/src/containers/SpaceGenerator/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SpaceGenerator } from './SpaceGenerator';
-
-export default SpaceGenerator;
+export { SpaceGenerator as default } from './SpaceGenerator';

package/src/containers/Wireframe/Wireframe.tsx

@@ -8,7 +8,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { Obj } from '@dxos/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/ui-theme';
 
 // TODO(burdon): Create generic container with wireframe mode.
@@ -29,11 +29,7 @@ export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
           <div>{label}</div>
           <div>{`[${width}x${height}]`}</div>
         </div>
-        {object && (
-          <SyntaxHighlighter language='json' classNames='text-xs opacity-75 rounded-sm'>
-            {JSON.stringify(object, undefined, 2)}
-          </SyntaxHighlighter>
-        )}
+        {object && <JsonHighlighter data={object} classNames='text-xs opacity-75 rounded-sm' />}
       </div>
       <svg width={width} height={height} className='bg-transparent *:text-subdued'>
         <rect x={0} y={0} width={width} height={height} strokeWidth={1} fill='none' />

package/src/containers/Wireframe/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Wireframe } from './Wireframe';
-
-export default Wireframe;
+export { Wireframe as default } from './Wireframe';

package/src/containers/index.ts

@@ -6,7 +6,6 @@ import { type ComponentType, lazy } from 'react';
 
 export const DebugGraph: ComponentType<any> = lazy(() => import('./DebugGraph'));
 export const DebugObjectPanel: ComponentType<any> = lazy(() => import('./DebugObjectPanel'));
-export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
 export const DebugStatus: ComponentType<any> = lazy(() => import('./DebugStatus'));
 export const DevtoolsOverviewContainer: ComponentType<any> = lazy(() => import('./DevtoolsOverviewContainer'));
 export const SpaceGenerator: ComponentType<any> = lazy(() => import('./SpaceGenerator'));

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './DebugPlugin';
 export * from './meta';
+export * from './types';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/debug',
+  id: 'org.dxos.plugin.debug',
   name: 'Debug',
   description: trim`
     Comprehensive developer toolkit for troubleshooting applications, generating test data, and exploring automation capabilities.

package/src/plugin.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const DebugPlugin = Plugin.lazy(meta, () => import('#plugin'));
+export type { DebugPluginOptions } from '#types';