@dxos/plugin-debug 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Capabilities, contributes, createIntent, createSurface, type PluginsContext } from '@dxos/app-framework';
+import { Devtools } from '@dxos/devtools';
+import { SettingsStore } from '@dxos/local-storage';
+import { Graph } from '@dxos/plugin-graph';
+import { SpaceAction, CollectionType } from '@dxos/plugin-space/types';
+import {
+  SpaceState,
+  isSpace,
+  isEchoObject,
+  type ReactiveEchoObject,
+  type ReactiveObject,
+  type Space,
+} from '@dxos/react-client/echo';
+
+import {
+  DebugApp,
+  DebugObjectPanel,
+  DebugSettings,
+  DebugSpace,
+  DebugStatus,
+  SpaceGenerator,
+  Wireframe,
+} from '../components';
+import { DEBUG_PLUGIN } from '../meta';
+import { type DebugSettingsProps } from '../types';
+
+type SpaceDebug = {
+  type: string;
+  space: Space;
+};
+
+type GraphDebug = {
+  graph: Graph;
+};
+
+const isSpaceDebug = (data: any): data is SpaceDebug => data.type === `${DEBUG_PLUGIN}/space` && isSpace(data.space);
+const isGraphDebug = (data: any): data is GraphDebug => data.graph instanceof Graph;
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${DEBUG_PLUGIN}/settings`,
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<DebugSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === DEBUG_PLUGIN,
+      component: ({ data: { subject } }) => <DebugSettings settings={subject.value} />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/status`,
+      role: 'status',
+      component: () => <DebugStatus />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/complementary`,
+      role: 'complementary--debug',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
+      component: ({ data }) => <DebugObjectPanel object={data.subject} />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/devtools`,
+      role: 'article',
+      filter: (data): data is any => {
+        const settings = context
+          .requestCapability(Capabilities.SettingsStore)
+          .getStore<DebugSettingsProps>(DEBUG_PLUGIN)!.value;
+        return data.subject === 'devtools' && !!settings.devtools;
+      },
+      component: () => <Devtools />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/space`,
+      role: 'article',
+      filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
+      component: ({ data }) => {
+        const handleCreateObject = useCallback(
+          (objects: ReactiveObject<any>[]) => {
+            if (!isSpace(data.subject.space)) {
+              return;
+            }
+
+            const collection =
+              data.subject.space.state.get() === SpaceState.SPACE_READY &&
+              data.subject.space.properties[CollectionType.typename]?.target;
+            if (!(collection instanceof CollectionType)) {
+              return;
+            }
+
+            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            objects.forEach((object) => {
+              void dispatch(createIntent(SpaceAction.AddObject, { target: collection, object }));
+            });
+          },
+          [data.subject.space],
+        );
+
+        const deprecated = false;
+        return deprecated ? (
+          <DebugSpace space={data.subject.space} onAddObjects={handleCreateObject} />
+        ) : (
+          <SpaceGenerator space={data.subject.space} onCreateObjects={handleCreateObject} />
+        );
+      },
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/graph`,
+      role: 'article',
+      filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
+      component: ({ data }) => <DebugApp graph={data.subject.graph} />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/wireframe`,
+      role: ['article', 'section'],
+      position: 'hoist',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } => {
+        const settings = context
+          .requestCapability(Capabilities.SettingsStore)
+          .getStore<DebugSettingsProps>(DEBUG_PLUGIN)!.value;
+        return isEchoObject(data.subject) && !!settings.wireframe;
+      },
+      component: ({ data, role }) => (
+        <Wireframe label={`${role}:${name}`} object={data.subject} classNames='row-span-2 overflow-hidden' />
+      ),
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/react-client/echo';
+
+import { DEBUG_PLUGIN } from '../meta';
+import { type DebugSettingsProps, DebugSettingsSchema } from '../types';
+
+export default () => {
+  const settings = create<DebugSettingsProps>({
+    debug: true,
+    devtools: true,
+  });
+
+  return contributes(Capabilities.Settings, { schema: DebugSettingsSchema, prefix: DEBUG_PLUGIN, value: settings });
+};

package/src/components/DebugApp/DebugApp.tsx

@@ -59,7 +59,7 @@ export const DebugApp: FC<{ graph: Graph }> = ({ graph }) => {
             </ToggleGroupItem>
           </ToggleGroup>
 
-          <Toolbar.Expander />
+          <Toolbar.Separator variant='gap' />
           <Button onClick={(event) => handleResetClient(event.shiftKey)} title='Reset client'>
             <Warning className={mx(getSize(5), 'text-red-700')} />
           </Button>

package/src/components/DebugSettings.tsx

@@ -2,16 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Gift, DownloadSimple, FirstAidKit } from '@phosphor-icons/react';
 import React, { useEffect, useState } from 'react';
 
-import { parseFileManagerPlugin, useResolvePlugin } from '@dxos/app-framework';
+import { Capabilities, useCapabilities } from '@dxos/app-framework';
 import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { useTranslation, Button, Toast, Input, useFileDownload, Select } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { useTranslation, Button, Toast, Input, useFileDownload, Select, Icon } from '@dxos/react-ui';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
 import { DEBUG_PLUGIN } from '../meta';
@@ -34,7 +32,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
   const download = useFileDownload();
   // TODO(mykola): Get updates from other places that change Config.
   const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
-  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+  const [upload] = useCapabilities(Capabilities.FileUploader);
 
   useEffect(() => {
     void Storage().then((config) => setStorageConfig(config));
@@ -52,8 +50,8 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
     const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
     download(file, fileName);
 
-    if (fileManagerPlugin?.provides.file.upload) {
-      const info = await fileManagerPlugin.provides.file.upload(new File([file], fileName), client.spaces.default);
+    if (upload) {
+      const info = await upload(new File([file], fileName), client.spaces.default);
       if (!info) {
         log.error('diagnostics failed to upload to IPFS');
         return;
@@ -79,73 +77,75 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
   };
 
   return (
-    <>
-      <DeprecatedFormInput label={t('settings show debug panel')}>
-        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings show devtools panel')}>
-        <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings wireframe')}>
-        <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings download diagnostics')}>
-        <Button onClick={handleDownload}>
-          <DownloadSimple className={getSize(5)} />
-        </Button>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings repair')}>
-        <Button onClick={handleRepair}>
-          <FirstAidKit className={getSize(5)} />
-        </Button>
-      </DeprecatedFormInput>
-
-      {/* TODO(burdon): Move to layout? */}
-      {toast && (
-        <Toast.Root>
-          <Toast.Body>
-            <Toast.Title>
-              <Gift className={mx(getSize(5), 'inline mr-1')} weight='duotone' />
-              <span>{toast.title}</span>
-            </Toast.Title>
-            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-          </Toast.Body>
-        </Toast.Root>
-      )}
-
-      <DeprecatedFormInput label={t('settings choose storage adaptor')}>
-        <Select.Root
-          value={
-            Object.entries(StorageAdapters).find(
-              ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-            )?.[0]
-          }
-          onValueChange={(value) => {
-            if (confirm(t('settings storage adapter changed alert'))) {
-              updateConfig(
-                storageConfig,
-                setStorageConfig,
-                ['runtime', 'client', 'storage', 'dataStore'],
-                StorageAdapters[value as keyof typeof StorageAdapters],
-              );
+    <DeprecatedFormContainer>
+      <DeprecatedFormContainer>
+        <DeprecatedFormInput label={t('settings show debug panel')}>
+          <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings show devtools panel')}>
+          <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings wireframe')}>
+          <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings download diagnostics')}>
+          <Button onClick={handleDownload}>
+            <Icon icon='ph--download-simple--regular' size={5} />
+          </Button>
+        </DeprecatedFormInput>
+        <DeprecatedFormInput label={t('settings repair')}>
+          <Button onClick={handleRepair}>
+            <Icon icon='ph--first-aid-kit--regular' size={5} />
+          </Button>
+        </DeprecatedFormInput>
+
+        {/* TODO(burdon): Move to layout? */}
+        {toast && (
+          <Toast.Root>
+            <Toast.Body>
+              <Toast.Title>
+                <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
+                <span>{toast.title}</span>
+              </Toast.Title>
+              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+            </Toast.Body>
+          </Toast.Root>
+        )}
+
+        <DeprecatedFormInput label={t('settings choose storage adaptor')}>
+          <Select.Root
+            value={
+              Object.entries(StorageAdapters).find(
+                ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+              )?.[0]
             }
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings data store label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {Object.keys(StorageAdapters).map((key) => (
-                  <Select.Option key={key} value={key}>
-                    {t(`settings storage adaptor ${key} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-    </>
+            onValueChange={(value) => {
+              if (confirm(t('settings storage adapter changed alert'))) {
+                updateConfig(
+                  storageConfig,
+                  setStorageConfig,
+                  ['runtime', 'client', 'storage', 'dataStore'],
+                  StorageAdapters[value as keyof typeof StorageAdapters],
+                );
+              }
+            }}
+          >
+            <Select.TriggerButton placeholder={t('settings data store label')} />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {Object.keys(StorageAdapters).map((key) => (
+                    <Select.Option key={key} value={key}>
+                      {t(`settings storage adaptor ${key} label`)}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </DeprecatedFormInput>
+      </DeprecatedFormContainer>
+    </DeprecatedFormContainer>
   );
 };
 

package/src/components/DebugSpace/DebugSpace.tsx

@@ -158,7 +158,7 @@ export const DebugSpace: FC<{
           <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' size={5} onClick={handleUpdate} />
           <IconButton icon='ph--download-simple--regular' iconOnly label='Download' size={5} onClick={handleDownload} />
 
-          <Toolbar.Expander />
+          <Toolbar.Separator variant='gap' />
           <IconButton
             icon='ph--flag-pennant--regular'
             iconOnly

package/src/components/DebugStatus.tsx

@@ -4,16 +4,14 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import { firstIdInPart, parseGraphPlugin, parseNavigationPlugin, useResolvePlugin } from '@dxos/app-framework';
+import { useAppGraph, useLayout } from '@dxos/app-framework';
 import { TimeoutError } from '@dxos/async';
 import { StatsPanel, useStats } from '@dxos/devtools';
-import { log } from '@dxos/log';
 import { getActiveSpace } from '@dxos/plugin-space';
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { Icon, Popover } from '@dxos/react-ui';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -67,10 +65,7 @@ const ErrorIndicator = () => {
   useEffect(() => {
     const errorListener = (event: any) => {
       const error: Error = event.error ?? event.reason;
-      // event.preventDefault();
       if (errorRef.current !== error) {
-        // eslint-disable-next-line no-console
-        log.error('onError', { event });
         errorRef.current = error;
         forceUpdate({});
       }
@@ -140,11 +135,9 @@ const SwarmIndicator = () => {
 // TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
-  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
-  const graphPlugin = useResolvePlugin(parseGraphPlugin);
-  const location = navigationPlugin?.provides.location;
-  const graph = graphPlugin?.provides.graph;
-  const _space = location && graph ? getActiveSpace(graph, firstIdInPart(location.active, 'main')) : undefined;
+  const layout = useLayout();
+  const { graph } = useAppGraph();
+  const _space = graph ? getActiveSpace(graph, layout.active[0]) : undefined;
   // TODO(dmaretskyi): Fix this when we have save status for automerge.
   // useEffect(() => {
   //   if (!space) {
@@ -192,22 +185,19 @@ const PerformanceIndicator = () => {
   const [stats, refreshStats] = useStats();
 
   return (
-    <>
-      <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
-        <Icon icon='ph--chart-bar--regular' size={4} />
-      </StatusBar.Button>
-      {visible && (
-        <div
-          className={mx(
-            'z-20 absolute bottom-[--statusbar-size] right-4 w-[450px]',
-            'overflow-x-hidden overflow-y-auto scrollbar-thin',
-            'border-x border-y border-separator',
-          )}
-        >
+    <Popover.Root open={visible} onOpenChange={setVisible}>
+      <Popover.Trigger asChild>
+        <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
+          <Icon icon='ph--chart-bar--regular' size={4} />
+        </StatusBar.Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content classNames='max-is-[min(var(--radix-popover-content-available-width),300px)] max-bs-[--radix-popover-content-available-height]'>
           <StatsPanel stats={stats} onRefresh={refreshStats} />
-        </div>
-      )}
-    </>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 };
 

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -5,14 +5,14 @@
 import { addressToA1Notation } from '@dxos/compute';
 import { type BaseObject, type TypedObject } from '@dxos/echo-schema';
 import { create, makeRef, type ReactiveObject } from '@dxos/live-object';
-import { DocumentType, TextType } from '@dxos/plugin-markdown/types';
-import { createSheet } from '@dxos/plugin-sheet';
+import { DocumentType } from '@dxos/plugin-markdown/types';
+import { createSheet } from '@dxos/plugin-sheet/types';
 import { SheetType, type CellValue } from '@dxos/plugin-sheet/types';
 import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
 import { faker } from '@dxos/random';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { TableType } from '@dxos/react-ui-table';
-import { createView } from '@dxos/schema';
+import { createView, TextType } from '@dxos/schema';
 import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -86,7 +86,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
     <div role='none' className='flex flex-col divide-y divide-separator'>
       <Toolbar.Root classNames='p-1'>
         <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
-        <Toolbar.Expander />
+        <Toolbar.Separator variant='gap' />
         <div className='flex'>
           <Input.Root>
             <Input.TextInput

package/src/index.ts

@@ -2,8 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DebugPlugin } from './DebugPlugin';
-
 export * from './DebugPlugin';
-
-export default DebugPlugin;
+export * from './meta';

package/src/meta.ts

@@ -6,11 +6,13 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const DEBUG_PLUGIN = 'dxos.org/plugin/debug';
 
-export default {
+export const meta = {
   id: DEBUG_PLUGIN,
   name: 'Debug',
-  description: 'DXOS debugging tools.',
+  description:
+    'The debug plugin is useful for troubleshooting inside of Composer. You can also use the Debug plugin to create test data inside of sheets or tables or explore pre-built automations. Non-technical users will likely not spend much time here, but this plugin is invaluable for developers and technical users.',
   icon: 'ph--bug--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug',
   tags: ['experimental'],
+  screenshots: ['https://dxos.network/plugin-details-debug-dark.png'],
 } satisfies PluginMeta;

package/src/types.ts

@@ -4,15 +4,8 @@
 
 import { type Context, createContext } from 'react';
 
-import type {
-  GraphBuilderProvides,
-  SettingsProvides,
-  SurfaceProvides,
-  TranslationsProvides,
-} from '@dxos/app-framework';
 import type { TimerCallback, TimerOptions } from '@dxos/async';
 import { S } from '@dxos/echo-schema';
-import { type PanelProvides } from '@dxos/plugin-deck/types';
 
 export type DebugContextType = {
   running: boolean;
@@ -35,9 +28,3 @@ export const DebugSettingsSchema = S.mutable(
 );
 
 export interface DebugSettingsProps extends S.Schema.Type<typeof DebugSettingsSchema> {}
-
-export type DebugPluginProvides = SurfaceProvides &
-  GraphBuilderProvides &
-  SettingsProvides<DebugSettingsProps> &
-  TranslationsProvides &
-  PanelProvides;

package/dist/lib/browser/chunk-6CGQHKET.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  SettingsProvides,\n  SurfaceProvides,\n  TranslationsProvides,\n} from '@dxos/app-framework';\nimport type { TimerCallback, TimerOptions } from '@dxos/async';\nimport { S } from '@dxos/echo-schema';\nimport { type PanelProvides } from '@dxos/plugin-deck/types';\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 const DebugSettingsSchema = S.mutable(\n  S.Struct({\n    devtools: S.optional(S.Boolean),\n    debug: S.optional(S.Boolean),\n    wireframe: S.optional(S.Boolean),\n  }),\n);\n\nexport interface DebugSettingsProps extends S.Schema.Type<typeof DebugSettingsSchema> {}\n\nexport type DebugPluginProvides = SurfaceProvides &\n  GraphBuilderProvides &\n  SettingsProvides<DebugSettingsProps> &\n  TranslationsProvides &\n  PanelProvides;\n"],
-  "mappings": ";AAIA,SAAuBA,qBAAqB;AAS5C,SAASC,SAAS;AASX,IAAMC,eAA0CC,cAAgC;EACrFC,SAAS;EACTC,OAAO,MAAA;EAAO;EACdC,MAAM,MAAA;EAAO;AACf,CAAA;AAEO,IAAMC,sBAAsBC,EAAEC,QACnCD,EAAEE,OAAO;EACPC,UAAUH,EAAEI,SAASJ,EAAEK,OAAO;EAC9BC,OAAON,EAAEI,SAASJ,EAAEK,OAAO;EAC3BE,WAAWP,EAAEI,SAASJ,EAAEK,OAAO;AACjC,CAAA,CAAA;",
-  "names": ["createContext", "S", "DebugContext", "createContext", "running", "start", "stop", "DebugSettingsSchema", "S", "mutable", "Struct", "devtools", "optional", "Boolean", "debug", "wireframe"]
-}

package/dist/lib/browser/chunk-CAENAAHY.mjs

@@ -1,18 +0,0 @@
-// packages/plugins/plugin-debug/src/meta.ts
-var DEBUG_PLUGIN = "dxos.org/plugin/debug";
-var meta_default = {
-  id: DEBUG_PLUGIN,
-  name: "Debug",
-  description: "DXOS debugging tools.",
-  icon: "ph--bug--regular",
-  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug",
-  tags: [
-    "experimental"
-  ]
-};
-
-export {
-  DEBUG_PLUGIN,
-  meta_default
-};
-//# sourceMappingURL=chunk-CAENAAHY.mjs.map

package/dist/lib/browser/chunk-CAENAAHY.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const DEBUG_PLUGIN = 'dxos.org/plugin/debug';\n\nexport default {\n  id: DEBUG_PLUGIN,\n  name: 'Debug',\n  description: 'DXOS debugging tools.',\n  icon: 'ph--bug--regular',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug',\n  tags: ['experimental'],\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,eAAe;AAE5B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,MAAM;IAAC;;AACT;",
-  "names": ["DEBUG_PLUGIN", "id", "name", "description", "icon", "source", "tags"]
-}

package/dist/lib/browser/meta.mjs

@@ -1,9 +0,0 @@
-import {
-  DEBUG_PLUGIN,
-  meta_default
-} from "./chunk-CAENAAHY.mjs";
-export {
-  DEBUG_PLUGIN,
-  meta_default as default
-};
-//# sourceMappingURL=meta.mjs.map

package/dist/lib/browser/meta.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/types/src/components/DebugSurface.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type SurfaceDebugProps = ThemedClassName<{}>;
-/**
- * Show surface info.
- * NOTE: Remove from @dxos/app-framework if removing this.
- */
-export declare const DebugSurface: ({ classNames }: SurfaceDebugProps) => React.JSX.Element;
-//# sourceMappingURL=DebugSurface.d.ts.map

package/dist/types/src/components/DebugSurface.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DebugSurface.d.ts","sourceRoot":"","sources":["../../../../src/components/DebugSurface.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKpE,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,EAAE,CAAC,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,YAAY,mBAAoB,iBAAiB,sBAoC7D,CAAC"}

package/src/components/DebugSurface.tsx

@@ -1,55 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useMemo, useState } from 'react';
-
-import { type DebugInfo, useSurfaceRoot } from '@dxos/app-framework';
-import { Button, Icon, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-// TODO(burdon): Move to debug panel.
-
-export type SurfaceDebugProps = ThemedClassName<{}>;
-
-/**
- * Show surface info.
- * NOTE: Remove from @dxos/app-framework if removing this.
- */
-export const DebugSurface = ({ classNames }: SurfaceDebugProps) => {
-  const context = useSurfaceRoot();
-  const [surfaces, setSurfaces] = useState<DebugInfo[]>([]);
-  const renderMap = useMemo(() => new Map<string, { last: number; delta: number }>(), []);
-  const handleRefresh = () => {
-    if (context.debugInfo) {
-      setSurfaces(
-        Array.from(context.debugInfo.values())
-          .sort(({ created: a }, { created: b }) => a - b)
-          .map((surface) => {
-            const state = renderMap.get(surface.id) ?? { last: 0, delta: 0 };
-            renderMap.set(surface.id, { last: surface.renderCount, delta: surface.renderCount - state.last });
-            return surface;
-          }),
-      );
-    }
-  };
-
-  return (
-    <div className={mx('flex flex-col border border-separator overflow-hidden bg-modalSurface', classNames)}>
-      <div className='flex flex-col h-full w-full p-2'>
-        {surfaces.map(({ id, role, renderCount }) => (
-          <div key={id} className='grid grid-cols-[1fr_3rem_3rem] items-center text-xs font-mono whitespace-nowrap'>
-            <span className='px-1 truncate'>{role}</span>
-            <span className='px-1 text-right'>{renderCount}</span>
-            <span className='px-1 text-right'>{renderMap.get(id)?.delta}</span>
-          </div>
-        ))}
-      </div>
-      <div className='flex justify-center text-sm items-center'>
-        <Button onClick={handleRefresh}>
-          <Icon icon='ph--arrow-clockwise--regular' size={4} />
-        </Button>
-      </div>
-    </div>
-  );
-};