@dxos/plugin-debug 0.8.4-main.67995b8 → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-debug",
-  "version": "0.8.4-main.67995b8",
+  "version": "0.8.4-main.dedc0f3",
   "description": "DXOS Surface plugin for testing.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,9 +10,9 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "source": "./src/index.ts"
+      "browser": "./dist/lib/browser/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -34,63 +34,63 @@
     "react-json-tree": "^0.18.0",
     "react-resize-detector": "^11.0.1",
     "workerize-loader": "^2.0.2",
-    "@dxos/app-framework": "0.8.4-main.67995b8",
-    "@dxos/async": "0.8.4-main.67995b8",
-    "@dxos/client-services": "0.8.4-main.67995b8",
-    "@dxos/compute": "0.8.4-main.67995b8",
-    "@dxos/config": "0.8.4-main.67995b8",
-    "@dxos/context": "0.8.4-main.67995b8",
-    "@dxos/conductor": "0.8.4-main.67995b8",
-    "@dxos/devtools": "0.8.4-main.67995b8",
-    "@dxos/echo": "0.8.4-main.67995b8",
-    "@dxos/echo-generator": "0.8.4-main.67995b8",
-    "@dxos/echo-pipeline": "0.8.4-main.67995b8",
-    "@dxos/echo-schema": "0.8.4-main.67995b8",
-    "@dxos/functions": "0.8.4-main.67995b8",
-    "@dxos/invariant": "0.8.4-main.67995b8",
-    "@dxos/keys": "0.8.4-main.67995b8",
-    "@dxos/local-storage": "0.8.4-main.67995b8",
-    "@dxos/live-object": "0.8.4-main.67995b8",
-    "@dxos/plugin-client": "0.8.4-main.67995b8",
-    "@dxos/log": "0.8.4-main.67995b8",
-    "@dxos/plugin-deck": "0.8.4-main.67995b8",
-    "@dxos/plugin-meeting": "0.8.4-main.67995b8",
-    "@dxos/plugin-graph": "0.8.4-main.67995b8",
-    "@dxos/plugin-markdown": "0.8.4-main.67995b8",
-    "@dxos/plugin-script": "0.8.4-main.67995b8",
-    "@dxos/plugin-sheet": "0.8.4-main.67995b8",
-    "@dxos/plugin-sketch": "0.8.4-main.67995b8",
-    "@dxos/plugin-space": "0.8.4-main.67995b8",
-    "@dxos/plugin-status-bar": "0.8.4-main.67995b8",
-    "@dxos/plugin-table": "0.8.4-main.67995b8",
-    "@dxos/plugin-theme": "0.8.4-main.67995b8",
-    "@dxos/protocols": "0.8.4-main.67995b8",
-    "@dxos/react-client": "0.8.4-main.67995b8",
-    "@dxos/react-hooks": "0.8.4-main.67995b8",
-    "@dxos/random": "0.8.4-main.67995b8",
-    "@dxos/react-ui-canvas-compute": "0.8.4-main.67995b8",
-    "@dxos/react-ui-attention": "0.8.4-main.67995b8",
-    "@dxos/react-ui-canvas-editor": "0.8.4-main.67995b8",
-    "@dxos/react-ui-form": "0.8.4-main.67995b8",
-    "@dxos/react-ui-kanban": "0.8.4-main.67995b8",
-    "@dxos/react-ui-stack": "0.8.4-main.67995b8",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.67995b8",
-    "@dxos/react-ui-table": "0.8.4-main.67995b8",
-    "@dxos/schema": "0.8.4-main.67995b8",
-    "@dxos/util": "0.8.4-main.67995b8"
+    "@dxos/app-framework": "0.8.4-main.dedc0f3",
+    "@dxos/async": "0.8.4-main.dedc0f3",
+    "@dxos/client-services": "0.8.4-main.dedc0f3",
+    "@dxos/compute": "0.8.4-main.dedc0f3",
+    "@dxos/conductor": "0.8.4-main.dedc0f3",
+    "@dxos/context": "0.8.4-main.dedc0f3",
+    "@dxos/config": "0.8.4-main.dedc0f3",
+    "@dxos/devtools": "0.8.4-main.dedc0f3",
+    "@dxos/echo": "0.8.4-main.dedc0f3",
+    "@dxos/echo-generator": "0.8.4-main.dedc0f3",
+    "@dxos/functions": "0.8.4-main.dedc0f3",
+    "@dxos/invariant": "0.8.4-main.dedc0f3",
+    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
+    "@dxos/keys": "0.8.4-main.dedc0f3",
+    "@dxos/live-object": "0.8.4-main.dedc0f3",
+    "@dxos/local-storage": "0.8.4-main.dedc0f3",
+    "@dxos/echo-pipeline": "0.8.4-main.dedc0f3",
+    "@dxos/log": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-client": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-graph": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-markdown": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-deck": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-meeting": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-sheet": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-sketch": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-space": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-script": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-status-bar": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-table": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-theme": "0.8.4-main.dedc0f3",
+    "@dxos/protocols": "0.8.4-main.dedc0f3",
+    "@dxos/react-hooks": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
+    "@dxos/random": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-canvas-compute": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-form": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-kanban": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-canvas-editor": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-table": "0.8.4-main.dedc0f3",
+    "@dxos/react-client": "0.8.4-main.dedc0f3",
+    "@dxos/schema": "0.8.4-main.dedc0f3",
+    "@dxos/util": "0.8.4-main.dedc0f3"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.17.0",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.67995b8",
-    "@dxos/react-ui-theme": "0.8.4-main.67995b8",
-    "@dxos/storybook-utils": "0.8.4-main.67995b8"
+    "vite": "7.1.1",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/storybook-utils": "0.8.4-main.dedc0f3"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -98,9 +98,9 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.8.4-main.67995b8",
-    "@dxos/react-ui": "0.8.4-main.67995b8",
-    "@dxos/react-ui-theme": "0.8.4-main.67995b8"
+    "@dxos/random": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
   },
   "publishConfig": {
     "access": "public"

package/src/DebugPlugin.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
 import { type Client } from '@dxos/react-client';
 
 import { AppGraphBuilder, DebugSettings, ReactContext, ReactSurface } from './capabilities';

package/src/capabilities/app-graph-builder.ts

@@ -5,11 +5,11 @@
 import { Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 
-import { contributes, Capabilities, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE, PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { createExtension, ROOT_ID, rxFromSignal } from '@dxos/plugin-graph';
-import { getActiveSpace, SPACE_PLUGIN } from '@dxos/plugin-space';
+import { ROOT_ID, createExtension, rxFromSignal } from '@dxos/plugin-graph';
+import { SPACE_PLUGIN, getActiveSpace } from '@dxos/plugin-space';
 
 import { DEBUG_PLUGIN } from '../meta';
 import { Devtools } from '../types';
@@ -30,6 +30,7 @@ export default (context: PluginContext) =>
             ),
             Option.map((node) => {
               const space = get(rxFromSignal(() => getActiveSpace(context)));
+              const [graph] = get(context.capabilities(Capabilities.AppGraph));
 
               return [
                 {
@@ -56,6 +57,15 @@ export default (context: PluginContext) =>
                           },
                         ]
                       : []),
+                    {
+                      id: `app-graph-${node.id}`,
+                      type: 'dxos.org/plugin/debug/app-graph',
+                      data: { graph: graph?.graph, root: space ? space.id : ROOT_ID },
+                      properties: {
+                        label: ['debug app graph label', { ns: DEBUG_PLUGIN }],
+                        icon: 'ph--graph--regular',
+                      },
+                    },
                     {
                       id: `${Devtools.Client.id}-${node.id}`,
                       data: null,
@@ -366,43 +376,6 @@ export default (context: PluginContext) =>
         ),
     }),
 
-    // Debug node.
-    createExtension({
-      id: 'dxos.org/plugin/debug/debug',
-      connector: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.flatMap(() => {
-              const [graph] = get(context.capabilities(Capabilities.AppGraph));
-              return graph ? Option.some(graph) : Option.none();
-            }),
-            Option.flatMap((graph) => {
-              // TODO(wittjosiah): Plank is currently blank. Remove?
-              // const settings = context
-              //   .requestCapabilities(Capabilities.SettingsStore)[0]
-              //   ?.getStore<DebugSettingsProps>(DEBUG_PLUGIN)?.value;
-              // return !!settings?.debug && node.id === 'root';
-              return Option.none();
-            }),
-            Option.map((graph) => [
-              {
-                id: 'dxos.org/plugin/debug/debug',
-                type: 'dxos.org/plugin/debug/debug',
-                data: { graph },
-                properties: {
-                  label: ['debug label', { ns: DEBUG_PLUGIN }],
-                  disposition: 'navigation',
-                  icon: 'ph--bug--regular',
-                },
-              },
-            ]),
-            Option.getOrElse(() => []),
-          ),
-        ),
-    }),
-
     // Debug object companion.
     createExtension({
       id: `${DEBUG_PLUGIN}/debug-object`,

package/src/capabilities/react-surface.tsx

@@ -7,14 +7,14 @@ import React, { useCallback } from 'react';
 
 import {
   Capabilities,
+  LayoutAction,
+  type PluginContext,
   chain,
   contributes,
   createIntent,
   createSurface,
-  LayoutAction,
   useCapability,
   useIntentDispatcher,
-  type PluginContext,
 } from '@dxos/app-framework';
 import {
   AutomergePanel,
@@ -50,12 +50,12 @@ import { ClientCapabilities } from '@dxos/plugin-client';
 import { Graph } from '@dxos/plugin-graph';
 import { ScriptAction } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { SpaceState, isSpace, type Space, parseId } from '@dxos/react-client/echo';
+import { type Space, SpaceState, isSpace, parseId } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 import { DataType } from '@dxos/schema';
 
 import {
-  DebugApp,
+  DebugGraph,
   DebugObjectPanel,
   DebugSettings,
   DebugStatus,
@@ -73,10 +73,11 @@ type SpaceDebug = {
 
 type GraphDebug = {
   graph: Graph;
+  root: string;
 };
 
 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;
+const isGraphDebug = (data: any): data is GraphDebug => data?.graph instanceof Graph && typeof data?.root === 'string';
 
 // TODO(wittjosiah): Factor out?
 const useCurrentSpace = () => {
@@ -134,7 +135,7 @@ export default (context: PluginContext) =>
       id: `${DEBUG_PLUGIN}/graph`,
       role: 'article',
       filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
-      component: ({ data }) => <DebugApp graph={data.subject.graph} />,
+      component: ({ data }) => <DebugGraph graph={data.subject.graph} root={data.subject.root} />,
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/wireframe`,

package/src/components/DebugGraph.tsx

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { Tree } from '@dxos/devtools';
+import { type Graph } from '@dxos/plugin-graph';
+
+export const DebugGraph: FC<{ graph: Graph; root: string }> = ({ graph, root }) => {
+  return <Tree data={graph.toJSON(root)} />;
+};
+
+export default DebugGraph;

package/src/components/DebugObjectPanel.tsx

@@ -26,7 +26,7 @@ export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
             <Clipboard.IconButton value={dxn} />
           </Input.Root>
         </Toolbar.Root>
-        <SyntaxHighlighter classNames='flex text-xs' language='json'>
+        <SyntaxHighlighter language='json' classNames='text-xs'>
           {JSON.stringify(object, null, 2)}
         </SyntaxHighlighter>
       </StackItem.Content>

package/src/components/DebugSettings.tsx

@@ -5,11 +5,11 @@
 import React, { useEffect, useState } from 'react';
 
 import { Capabilities, useCapabilities } from '@dxos/app-framework';
-import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
+import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { useTranslation, Button, Toast, Input, useFileDownload, Select, Icon } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { Button, Icon, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
 import { DEBUG_PLUGIN } from '../meta';
@@ -77,67 +77,75 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
   };
 
   return (
-    <DeprecatedFormContainer>
-      <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]
-          }
-          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>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: DEBUG_PLUGIN })}>
+        <ControlGroup>
+          <ControlItemInput title={t('settings wireframe')}>
+            <Input.Switch
+              checked={settings.wireframe}
+              onCheckedChange={(checked) => (settings.wireframe = !!checked)}
+            />
+          </ControlItemInput>
+          <ControlItemInput title={t('settings download diagnostics')}>
+            <Button onClick={handleDownload}>
+              <Icon icon='ph--download-simple--regular' size={5} />
+            </Button>
+          </ControlItemInput>
+          <ControlItemInput title={t('settings repair')}>
+            <Button onClick={handleRepair}>
+              <Icon icon='ph--first-aid-kit--regular' size={5} />
+            </Button>
+          </ControlItemInput>
+
+          {/* 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>
+          )}
+
+          <ControlItemInput title={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],
+                  );
+                }
+              }}
+            >
+              <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.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };
 

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -2,37 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
-import { createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
+import { type PromiseIntentDispatcher, createIntent } from '@dxos/app-framework';
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { DXN, Filter, Key, Obj, Ref, Type } from '@dxos/echo';
 import { type TypedObject } from '@dxos/echo-schema';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { createSheet } from '@dxos/plugin-sheet/types';
-import { SheetType, type CellValue } from '@dxos/plugin-sheet/types';
+import { type CellValue, SheetType } from '@dxos/plugin-sheet/types';
 import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { DataType, typenameFromQuery } from '@dxos/schema';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
 const generator: ValueGenerator = faker as any;
 
-export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
-
 const findViewByTypename = async (views: DataType.View[], typename: string) => {
-  return views.find((view) => view.query.typename === typename);
+  return views.find((view) => typenameFromQuery(view.query) === typename);
 };
 
+export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
+
 export const createGenerator = <T extends Obj.Any>(
   client: Client,
   dispatch: PromiseIntentDispatcher,
   schema: TypedObject<T>,
 ): ObjectGenerator<T> => {
-  return async (space: Space, n: number, cb?: (objects: T[]) => void): Promise<T[]> => {
+  return async (space: Space, n: number): Promise<T[]> => {
     const typename = schema.typename;
 
     // Find or create table and view.

package/src/components/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
@@ -24,15 +24,15 @@ const DefaultStory = () => {
   return <SpaceGenerator space={space} />;
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-debug/SpaceGenerator',
-  component: SpaceGenerator,
+  component: SpaceGenerator as any,
   render: render(DefaultStory),
   decorators: [
     withPluginManager({
       plugins: [
         ClientPlugin({
-          onClientInitialized: async (_, client) => {
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
@@ -45,8 +45,10 @@ const meta: Meta = {
   parameters: {
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -11,15 +11,15 @@ import { Markdown } from '@dxos/plugin-markdown/types';
 import { SheetType } from '@dxos/plugin-sheet/types';
 import { DiagramType } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
-import { getTypename, type Space } from '@dxos/react-client/echo';
+import { type Space, getTypename } from '@dxos/react-client/echo';
 import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { DataType } from '@dxos/schema';
 import { jsonKeyReplacer, sortKeys } from '@dxos/util';
 
-import { createGenerator, staticGenerators, type ObjectGenerator } from './ObjectGenerator';
-import { SchemaTable } from './SchemaTable';
+import { type ObjectGenerator, createGenerator, staticGenerators } from './ObjectGenerator';
 import { generator } from './presets';
+import { SchemaTable } from './SchemaTable';
 
 export type SpaceGeneratorProps = {
   space: Space;
@@ -30,7 +30,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const staticTypes = [Markdown.Document, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
-  const recordTypes = [DataType.Organization, DataType.Project, DataType.Person, DataType.Message];
+  const recordTypes = [DataType.Organization, DataType.Person, DataType.Task];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
   const presets = useMemo(() => generator(), []);
@@ -112,7 +112,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
         <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
 
         <div>
-          <SyntaxHighlighter classNames='flex text-xs' language='json'>
+          <SyntaxHighlighter language='json' classNames='text-xs'>
             {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
           </SyntaxHighlighter>
         </div>

package/src/components/SpaceGenerator/draw-util.ts

@@ -3,17 +3,17 @@
 //
 
 // TODO(burdon): workerize-loader dep.
-import { Graph, type Edge, type PlainObject } from '@antv/graphlib';
+import { type Edge, Graph, type PlainObject } from '@antv/graphlib';
 import {
-  type Layout,
   D3ForceLayout,
   type D3ForceLayoutOptions,
   GridLayout,
   type GridLayoutOptions,
+  type Layout,
   RadialLayout,
   type RadialLayoutOptions,
 } from '@antv/layout';
-import { createBindingId, createShapeId, type Editor, type SerializedStore, type TLRecord } from '@tldraw/tldraw';
+import { type Editor, type SerializedStore, type TLRecord, createBindingId, createShapeId } from '@tldraw/tldraw';
 
 import { faker } from '@dxos/random';
 import { isNotFalsy, range } from '@dxos/util';