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

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

@@ -1,7 +1,8 @@
 import React from 'react';
-export declare const Wireframe: ({ label, data, className }: {
+import { type ThemedClassName } from '@dxos/react-ui';
+export type WireframeProps = ThemedClassName<{
     label?: string;
-    data?: any;
-    className?: string;
-}) => React.JSX.Element;
+    object?: any;
+}>;
+export declare const Wireframe: ({ classNames, label, object }: WireframeProps) => React.JSX.Element;
 //# sourceMappingURL=Wireframe.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Wireframe.d.ts","sourceRoot":"","sources":["../../../../src/components/Wireframe.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,SAAS,+BAAgC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,sBAuBvG,CAAC"}
+{"version":3,"file":"Wireframe.d.ts","sourceRoot":"","sources":["../../../../src/components/Wireframe.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMtD,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,GAAG,CAAC;CACd,CAAC,CAAC;AAGH,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBAuBtE,CAAC"}

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

@@ -1,12 +1,11 @@
-import React from 'react';
-export declare const DebugGlobal: React.LazyExoticComponent<React.FC<{
+export declare const DebugGlobal: import("react").LazyExoticComponent<import("react").FC<{
     graph: import("packages/sdk/app-graph/dist/types/src").Graph;
 }>>;
-export declare const DebugSpace: React.LazyExoticComponent<React.FC<{
+export declare const DebugSpace: import("react").LazyExoticComponent<import("react").FC<{
     space: import("packages/sdk/client-protocol/dist/types/src").Space;
     onAddObjects?: (objects: import("packages/core/echo/echo-schema/dist/types/src").ReactiveObject<any>[]) => void;
 }>>;
-export declare const DevtoolsMain: React.LazyExoticComponent<() => React.JSX.Element>;
+export * from './DebugObjectPanel';
 export * from './DebugSettings';
 export * from './DebugStatus';
 export * from './Wireframe';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,WAAW;;GAA4C,CAAC;AACrE,eAAO,MAAM,UAAU;;;GAA2C,CAAC;AACnE,eAAO,MAAM,YAAY,oDAA6C,CAAC;AAEvE,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;;GAAsC,CAAC;AAC/D,eAAO,MAAM,UAAU;;;GAAqC,CAAC;AAE7D,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/dist/types/src/meta.d.ts

@@ -1,15 +1,10 @@
-import { type IconProps } from '@phosphor-icons/react';
-import React from 'react';
 export declare const DEBUG_PLUGIN = "dxos.org/plugin/debug";
 declare const _default: {
     id: string;
-    shortId?: string;
-    name?: string;
-    description?: string;
-    homePage?: string;
-    tags?: string[];
-    iconComponent?: React.FC<IconProps>;
-    iconSymbol?: string;
+    name: string;
+    description: string;
+    tags: string[];
+    icon: string;
 };
 export default _default;
 //# sourceMappingURL=meta.d.ts.map

package/dist/types/src/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,YAAY,0BAA0B,CAAC;;;;;;;;;;;AAEpD,wBAOG"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,0BAA0B,CAAC;;;;;;;;AAEpD,wBAMuB"}

package/dist/types/src/scaffolding/generator.d.ts

@@ -2,8 +2,7 @@ import { SpaceObjectGenerator, type TestGeneratorMap, type TestMutationsMap, typ
 import { type Space } from '@dxos/react-client/echo';
 export declare enum SchemasNames {
     document = "dxos.org/type/Document",
-    diagram = "dxos.org/type/Diagram",
-    sheet = "dxos.org/type/SheetType"
+    diagram = "dxos.org/type/Diagram"
 }
 export declare const SchemasMap: TestSchemaMap<SchemasNames>;
 export declare const ObjectGenerators: TestGeneratorMap<SchemasNames>;

package/dist/types/src/scaffolding/generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/scaffolding/generator.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,oBAAoB,EACpB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EACnB,MAAM,sBAAsB,CAAC;AAS9B,OAAO,EAAqB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGxE,oBAAY,YAAY;IACtB,QAAQ,2BAA2B;IACnC,OAAO,0BAA0B;IACjC,KAAK,4BAA4B;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,YAAY,CAIlD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,gBAAgB,CAAC,YAAY,CAkB3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,CAAC,YAAY,CAyF9D,CAAC;AAEF,eAAO,MAAM,0BAA0B,UAAW,KAAK,uCAC6B,CAAC"}
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/scaffolding/generator.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,oBAAoB,EACpB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EACnB,MAAM,sBAAsB,CAAC;AAO9B,OAAO,EAAqB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKxE,oBAAY,YAAY;IACtB,QAAQ,2BAA2B;IACnC,OAAO,0BAA0B;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,YAAY,CAGlD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,gBAAgB,CAAC,YAAY,CAa3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,CAAC,YAAY,CAqF9D,CAAC;AAEF,eAAO,MAAM,0BAA0B,UAAW,KAAK,uCAC6B,CAAC"}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/plugin-debug",
-  "version": "0.6.13",
+  "version": "0.6.14-main.2b6a0f3",
   "description": "DXOS Surface plugin for testing.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": false,
   "exports": {
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
@@ -35,59 +36,56 @@
     "lodash.get": "^4.4.2",
     "react-json-tree": "^0.18.0",
     "react-resize-detector": "^11.0.1",
-    "react-syntax-highlighter": "^15.5.0",
-    "@dxos/app-framework": "0.6.13",
-    "@dxos/async": "0.6.13",
-    "@dxos/client-services": "0.6.13",
-    "@dxos/config": "0.6.13",
-    "@dxos/automerge": "0.6.13",
-    "@dxos/devtools": "0.6.13",
-    "@dxos/echo-generator": "0.6.13",
-    "@dxos/echo-pipeline": "0.6.13",
-    "@dxos/invariant": "0.6.13",
-    "@dxos/echo-schema": "0.6.13",
-    "@dxos/keys": "0.6.13",
-    "@dxos/local-storage": "0.6.13",
-    "@dxos/plugin-client": "0.6.13",
-    "@dxos/plugin-graph": "0.6.13",
-    "@dxos/log": "0.6.13",
-    "@dxos/plugin-markdown": "0.6.13",
-    "@dxos/plugin-settings": "0.6.13",
-    "@dxos/plugin-sheet": "0.6.13",
-    "@dxos/plugin-sketch": "0.6.13",
-    "@dxos/plugin-status-bar": "0.6.13",
-    "@dxos/plugin-space": "0.6.13",
-    "@dxos/plugin-table": "0.6.13",
-    "@dxos/protocols": "0.6.13",
-    "@dxos/random": "0.6.13",
-    "@dxos/react-client": "0.6.13",
-    "@dxos/react-hooks": "0.6.13",
-    "@dxos/react-ui-attention": "0.6.13",
-    "@dxos/react-ui-syntax-highlighter": "0.6.13",
-    "@dxos/react-ui-table": "0.6.13",
-    "@dxos/plugin-theme": "0.6.13",
-    "@dxos/util": "0.6.13"
+    "@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"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@types/lodash.get": "^4.4.7",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/random": "0.6.13",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13",
-    "@dxos/storybook-utils": "0.6.13"
+    "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"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13"
+    "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"
   },
   "publishConfig": {
     "access": "public"

package/src/DebugPlugin.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Bug, Hammer, type IconProps } from '@phosphor-icons/react';
 import React, { type ReactNode, useEffect, useState } from 'react';
 
 import {
@@ -15,22 +14,23 @@ import {
   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 { SpaceAction } from '@dxos/plugin-space';
 import { CollectionType } from '@dxos/plugin-space/types';
 import { type Client } from '@dxos/react-client';
-import { type Space, SpaceState, isSpace } from '@dxos/react-client/echo';
+import { type Space, SpaceState, isEchoObject, isSpace } from '@dxos/react-client/echo';
 import { Main } from '@dxos/react-ui';
 import {
   baseSurface,
-  topbarBlockPaddingStart,
-  fixedInsetFlexLayout,
   bottombarBlockPaddingEnd,
+  fixedInsetFlexLayout,
+  topbarBlockPaddingStart,
 } from '@dxos/react-ui-theme';
 
-import { DebugGlobal, DebugSettings, DebugSpace, DebugStatus, DevtoolsMain, Wireframe } from './components';
+import { DebugGlobal, DebugSettings, DebugSpace, DebugObjectPanel, DebugStatus, Wireframe } from './components';
 import meta, { DEBUG_PLUGIN } from './meta';
 import translations from './translations';
 import { DebugContext, type DebugSettingsProps, type DebugPluginProvides, DebugAction } from './types';
@@ -111,8 +111,7 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
                   type: 'dxos.org/plugin/debug/devtools',
                   properties: {
                     label: ['devtools label', { ns: DEBUG_PLUGIN }],
-                    icon: (props: IconProps) => <Hammer {...props} />,
-                    iconSymbol: 'ph--hammer--regular',
+                    icon: 'ph--hammer--regular',
                   },
                 },
               ],
@@ -129,8 +128,7 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
                   data: { graph: graphPlugin?.provides.graph },
                   properties: {
                     label: ['debug label', { ns: DEBUG_PLUGIN }],
-                    icon: (props: IconProps) => <Bug {...props} />,
-                    iconSymbol: 'ph--bug--regular',
+                    icon: 'ph--bug--regular',
                   },
                 },
               ],
@@ -144,13 +142,12 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
                 const space = node.data;
                 return [
                   {
-                    id: `${space.id}-debug`,
+                    id: `${space.id}-debug`, // TODO(burdon): Change to slashes consistently.
                     type: 'dxos.org/plugin/debug/space',
                     data: { space },
                     properties: {
                       label: ['debug label', { ns: DEBUG_PLUGIN }],
-                      icon: (props: IconProps) => <Bug {...props} />,
-                      iconSymbol: 'ph--bug--regular',
+                      icon: 'ph--bug--regular',
                     },
                   },
                 ];
@@ -191,13 +188,15 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
               return data.plugin === meta.id ? <DebugSettings settings={settings.values} /> : null;
             case 'status':
               return <DebugStatus />;
+            case 'complementary--debug':
+              return isEchoObject(data.subject) ? <DebugObjectPanel object={data.subject} /> : null;
           }
 
           const primary = data.active ?? data.object;
           let component: ReactNode;
           if (role === 'main' || role === 'article') {
             if (primary === 'devtools' && settings.values.devtools) {
-              component = <DevtoolsMain />;
+              component = <Devtools />;
             } else if (!primary || typeof primary !== 'object' || !settings.values.debug) {
               component = null;
             } else if ('space' in primary && isSpace(primary.space)) {
@@ -236,8 +235,15 @@ export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
             if (settings.values.wireframe) {
               if (role === 'main' || role === 'article' || role === 'section') {
                 const primary = data.active ?? data.object;
-                if (!(primary instanceof CollectionType)) {
-                  return <Wireframe label={role} data={data} className='row-span-2 overflow-hidden' />;
+                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' />
+                    ),
+                  };
                 }
               }
             }

package/src/components/DebugObjectPanel.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type EchoReactiveObject } from '@dxos/client/echo';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+
+export type DebugObjectPanelProps = {
+  object: EchoReactiveObject<any>;
+};
+
+export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
+  return (
+    <div role='form' className='flex flex-col'>
+      <SyntaxHighlighter classNames='flex text-xs' language='json'>
+        {JSON.stringify(object, null, 2)}
+      </SyntaxHighlighter>
+    </div>
+  );
+};

package/src/components/DebugPanel.tsx

@@ -3,29 +3,24 @@
 //
 
 import { formatDistance } from 'date-fns';
-import React, { type FC, type PropsWithChildren, type ReactNode } from 'react';
+import React, { type PropsWithChildren, type ReactNode } from 'react';
 
 import { useConfig } from '@dxos/react-client';
-import { DensityProvider } from '@dxos/react-ui';
 
-export const DebugPanel: FC<PropsWithChildren<{ menu: ReactNode }>> = ({ menu, children }) => {
+export const DebugPanel = ({ menu, children }: PropsWithChildren<{ menu: ReactNode }>) => {
   const config = useConfig();
   return (
     <>
-      <div className='flex shrink-0 p-2 space-x-2'>
-        <DensityProvider density='fine'>{menu}</DensityProvider>
-      </div>
+      <div className='flex shrink-0 p-2 space-x-2'>{menu}</div>
       <div className='flex flex-col grow px-2 overflow-hidden'>
         <div className='flex flex-col grow overflow-auto'>{children}</div>
-
         {config.values?.runtime?.app?.build?.timestamp && (
           <div className='p-2 text-sm font-mono'>
-            {config.values?.runtime?.app?.build?.version} (
+            {config.values?.runtime?.app?.build?.version}
             {formatDistance(new Date(config.values?.runtime?.app?.build?.timestamp), new Date(), {
               addSuffix: true,
               includeSeconds: true,
             })}
-            )
           </div>
         )}
       </div>

package/src/components/DebugSpace.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React, { useEffect } from 'react';
 
 import { createSpaceObjectGenerator } from '@dxos/echo-generator';
@@ -28,8 +29,10 @@ const Story = () => {
   return <DebugSpace space={space} />;
 };
 
-export default {
-  title: 'plugin-debug/DebugSpace',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-debug/DebugSpace',
   component: DebugSpace,
   render: () => <ClientRepeater component={Story} createSpace />,
   parameters: {
@@ -37,4 +40,4 @@ export default {
   },
 };
 
-export const Default = {};
+export default meta;

package/src/components/DebugStatus.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ChartBar, Circle, Lightning, LightningSlash } from '@phosphor-icons/react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { firstIdInPart, parseGraphPlugin, parseNavigationPlugin, useResolvePlugin } from '@dxos/app-framework';
@@ -13,7 +12,8 @@ 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, mx } from '@dxos/react-ui-theme';
+import { Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -97,13 +97,13 @@ const ErrorIndicator = () => {
   if (errorRef.current) {
     return (
       <StatusBar.Button title={errorRef.current.message} onClick={handleReset}>
-        <Circle weight='fill' className={mx(styles.error, getSize(3))} />
+        <Icon icon='ph--warning-circle--duotone' size={4} classNames={styles.error} />
       </StatusBar.Button>
     );
   } else {
     return (
       <StatusBar.Item title='No errors.'>
-        <Circle weight='fill' className={getSize(3)} />
+        <Icon icon='ph--check--regular' size={4} />
       </StatusBar.Item>
     );
   }
@@ -122,21 +122,22 @@ const SwarmIndicator = () => {
   if (state === 0) {
     return (
       <StatusBar.Item title='Connected to swarm.'>
-        <Lightning className={getSize(4)} />
+        <Icon icon='ph--lightning--regular' size={4} />
       </StatusBar.Item>
     );
   } else {
     return (
       <StatusBar.Item title='Disconnected from swarm.'>
-        <LightningSlash className={mx(styles.warning, getSize(4))} />
+        <Icon icon='ph--lightning-slash--regular' size={4} classNames={styles.warning} />
       </StatusBar.Item>
     );
   }
 };
 
 /**
- * Space saving indicator.
+ * Data saving indicator.
  */
+// TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
   const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
@@ -167,20 +168,20 @@ const SavingIndicator = () => {
     case 2:
       return (
         <StatusBar.Item title='Edit not saved.'>
-          <Circle weight='fill' className={mx(styles.warning, getSize(3))} />
+          <Icon icon='ph--circle--duotone' size={4} classNames={styles.warning} />
         </StatusBar.Item>
       );
     case 1:
       return (
         <StatusBar.Item title='Saving...'>
-          <Circle weight='fill' className={mx(styles.success, getSize(3))} />
+          <Icon icon='ph--circle--duotone' size={4} classNames={styles.success} />
         </StatusBar.Item>
       );
     case 0:
     default:
       return (
         <StatusBar.Item title='Modified indicator.'>
-          <Circle weight='fill' className={getSize(3)} />
+          <Icon icon='ph--circle--duotone' size={4} />
         </StatusBar.Item>
       );
   }
@@ -193,10 +194,16 @@ const PerformanceIndicator = () => {
   return (
     <>
       <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
-        <ChartBar />
+        <Icon icon='ph--chart-bar--regular' size={4} />
       </StatusBar.Button>
       {visible && (
-        <div className='z-20 absolute bottom-[24px] w-[450px] border-l border-y border-separator'>
+        <div
+          className={mx(
+            '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',
+          )}
+        >
           <StatsPanel stats={stats} onRefresh={refreshStats} />
         </div>
       )}
@@ -204,7 +211,7 @@ const PerformanceIndicator = () => {
   );
 };
 
-const indicators = [PerformanceIndicator, SavingIndicator, ErrorIndicator, SwarmIndicator];
+const indicators = [SavingIndicator, SwarmIndicator, PerformanceIndicator, ErrorIndicator];
 
 export const DebugStatus = () => {
   return (

package/src/components/ObjectCreator.stories.tsx

@@ -4,15 +4,16 @@
 
 import '@dxos-theme';
 
-import React, { type FC, useEffect } from 'react';
+import { type Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
 
 import { createSpaceObjectGenerator } from '@dxos/echo-generator';
 import { type ReactiveObject, useSpaces } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 
-import { ObjectCreator } from './ObjectCreator';
+import { ObjectCreator, type ObjectCreatorProps } from './ObjectCreator';
 
-const Story: FC = () => {
+const Story = () => {
   const [space] = useSpaces();
   useEffect(() => {
     if (space) {
@@ -21,19 +22,21 @@ const Story: FC = () => {
     }
   }, [space]);
 
-  const handleCreate = (objects: ReactiveObject<any>[]) => {
-    console.log('Created:', objects);
-  };
-
   if (!space) {
     return null;
   }
 
+  const handleCreate: ObjectCreatorProps['onAddObjects'] = (objects: ReactiveObject<any>[]) => {
+    console.log('Created:', objects);
+  };
+
   return <ObjectCreator space={space} onAddObjects={handleCreate} />;
 };
 
-export default {
-  title: 'plugin-debug/SchemaList',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-debug/SchemaList',
   component: ObjectCreator,
   render: () => <ClientRepeater component={Story} createSpace />,
   parameters: {
@@ -41,4 +44,4 @@ export default {
   },
 };
 
-export const Default = {};
+export default meta;

package/src/components/ObjectCreator.tsx

@@ -2,11 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { type EchoReactiveObject, type ReactiveObject } from '@dxos/echo-schema';
-import { type Space } from '@dxos/react-client/echo';
-import { Button, DensityProvider } from '@dxos/react-ui';
+import { type EchoReactiveObject, type ReactiveObject, type Space } from '@dxos/react-client/echo';
+import { Button } from '@dxos/react-ui';
 import { createColumnBuilder, type TableColumnDef, Table } from '@dxos/react-ui-table';
 
 import { SchemasNames, createSpaceObjectGenerator } from '../scaffolding';
@@ -22,10 +21,12 @@ export type CreateObjectsParams = {
 
 const CREATE_OBJECTS_IN_ONE_CHUNK = 10;
 
-export const ObjectCreator: FC<{
+export type ObjectCreatorProps = {
   space: Space;
   onAddObjects?: (objects: ReactiveObject<any>[]) => void;
-}> = ({ space, onAddObjects }) => {
+};
+
+export const ObjectCreator = ({ space, onAddObjects }: ObjectCreatorProps) => {
   const generator = useMemo(() => createSpaceObjectGenerator(space), [space]);
 
   const [objectsToCreate, setObjectsToCreate] = useState<CreateObjectsParams[]>([
@@ -45,14 +46,6 @@ export const ObjectCreator: FC<{
       mutationSize: 10,
       maxContentLength: 1000,
     },
-    {
-      enabled: true,
-      schema: SchemasNames.sheet,
-      objectsCount: 10,
-      mutationsCount: 10,
-      mutationSize: 10,
-      maxContentLength: 1000,
-    },
   ]);
 
   const handleCreate = async () => {
@@ -95,13 +88,11 @@ export const ObjectCreator: FC<{
 
   return (
     <>
-      <DensityProvider density={'fine'}>
-        <Table.Root>
-          <Table.Viewport>
-            <Table.Main<CreateObjectsParams> columns={columns} data={objectsToCreate} />
-          </Table.Viewport>
-        </Table.Root>
-      </DensityProvider>
+      <Table.Root>
+        <Table.Viewport>
+          <Table.Main<CreateObjectsParams> columns={columns} data={objectsToCreate} />
+        </Table.Viewport>
+      </Table.Root>
       <Button onClick={handleCreate}>Create</Button>
     </>
   );