@dxos/plugin-debug 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-debug",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "DXOS Surface plugin for testing.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -34,75 +34,76 @@
     "react-json-tree": "^0.18.0",
     "react-resize-detector": "^11.0.1",
     "workerize-loader": "^2.0.2",
-    "@dxos/app-framework": "0.8.4-main.406dc2a",
-    "@dxos/assistant-testing": "0.8.4-main.406dc2a",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/blueprints": "0.8.4-main.406dc2a",
-    "@dxos/client-services": "0.8.4-main.406dc2a",
-    "@dxos/compute": "0.8.4-main.406dc2a",
-    "@dxos/conductor": "0.8.4-main.406dc2a",
-    "@dxos/config": "0.8.4-main.406dc2a",
-    "@dxos/devtools": "0.8.4-main.406dc2a",
-    "@dxos/echo-generator": "0.8.4-main.406dc2a",
-    "@dxos/echo-pipeline": "0.8.4-main.406dc2a",
-    "@dxos/context": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/functions": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/keys": "0.8.4-main.406dc2a",
-    "@dxos/plugin-client": "0.8.4-main.406dc2a",
-    "@dxos/plugin-deck": "0.8.4-main.406dc2a",
-    "@dxos/plugin-graph": "0.8.4-main.406dc2a",
-    "@dxos/local-storage": "0.8.4-main.406dc2a",
-    "@dxos/plugin-inbox": "0.8.4-main.406dc2a",
-    "@dxos/plugin-markdown": "0.8.4-main.406dc2a",
-    "@dxos/plugin-sheet": "0.8.4-main.406dc2a",
-    "@dxos/plugin-sketch": "0.8.4-main.406dc2a",
-    "@dxos/plugin-meeting": "0.8.4-main.406dc2a",
-    "@dxos/plugin-script": "0.8.4-main.406dc2a",
-    "@dxos/plugin-status-bar": "0.8.4-main.406dc2a",
-    "@dxos/plugin-space": "0.8.4-main.406dc2a",
-    "@dxos/plugin-table": "0.8.4-main.406dc2a",
-    "@dxos/plugin-theme": "0.8.4-main.406dc2a",
-    "@dxos/protocols": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-hooks": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-attention": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-canvas-editor": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-form": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-canvas-compute": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-kanban": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-table": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a"
+    "@dxos/app-framework": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/blueprints": "0.8.4-main.548089c",
+    "@dxos/client-services": "0.8.4-main.548089c",
+    "@dxos/compute": "0.8.4-main.548089c",
+    "@dxos/assistant-toolkit": "0.8.4-main.548089c",
+    "@dxos/conductor": "0.8.4-main.548089c",
+    "@dxos/context": "0.8.4-main.548089c",
+    "@dxos/config": "0.8.4-main.548089c",
+    "@dxos/devtools": "0.8.4-main.548089c",
+    "@dxos/echo-generator": "0.8.4-main.548089c",
+    "@dxos/echo-pipeline": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/functions": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/keys": "0.8.4-main.548089c",
+    "@dxos/local-storage": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/plugin-client": "0.8.4-main.548089c",
+    "@dxos/plugin-deck": "0.8.4-main.548089c",
+    "@dxos/plugin-graph": "0.8.4-main.548089c",
+    "@dxos/plugin-inbox": "0.8.4-main.548089c",
+    "@dxos/plugin-markdown": "0.8.4-main.548089c",
+    "@dxos/plugin-meeting": "0.8.4-main.548089c",
+    "@dxos/plugin-script": "0.8.4-main.548089c",
+    "@dxos/plugin-sheet": "0.8.4-main.548089c",
+    "@dxos/plugin-sketch": "0.8.4-main.548089c",
+    "@dxos/plugin-space": "0.8.4-main.548089c",
+    "@dxos/plugin-status-bar": "0.8.4-main.548089c",
+    "@dxos/plugin-table": "0.8.4-main.548089c",
+    "@dxos/plugin-theme": "0.8.4-main.548089c",
+    "@dxos/protocols": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/react-ui-attention": "0.8.4-main.548089c",
+    "@dxos/react-ui-canvas-compute": "0.8.4-main.548089c",
+    "@dxos/react-ui-canvas-editor": "0.8.4-main.548089c",
+    "@dxos/react-ui-form": "0.8.4-main.548089c",
+    "@dxos/react-hooks": "0.8.4-main.548089c",
+    "@dxos/react-ui-kanban": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/react-ui-table": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "0.92.1",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
 
@@ -23,7 +23,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: `${meta.id}/devtools`,
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) =>
@@ -381,7 +381,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: `${meta.id}/debug-object`,
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (Obj.isObject(node.data) ? Option.some(node) : Option.none())),
@@ -407,7 +407,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: `${meta.id}/devtools-overview`,
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),

package/src/capabilities/react-surface.tsx

@@ -13,9 +13,8 @@ import {
   contributes,
   createIntent,
   createSurface,
-  useCapability,
-  useIntentDispatcher,
 } from '@dxos/app-framework';
+import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
 import {
   AutomergePanel,
   ConfigPanel,
@@ -52,7 +51,7 @@ import { ScriptAction } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { type Space, SpaceState, isSpace, parseId } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { Collection } from '@dxos/schema';
 
 import {
   DebugGraph,
@@ -112,13 +111,18 @@ export default (context: PluginContext) =>
 
             const collection =
               data.subject.space.state.get() === SpaceState.SPACE_READY &&
-              data.subject.space.properties[DataType.Collection.typename]?.target;
-            if (!Obj.instanceOf(DataType.Collection, collection)) {
+              data.subject.space.properties[Collection.Collection.typename]?.target;
+            if (!Obj.instanceOf(Collection.Collection, collection)) {
               return;
             }
 
             objects.forEach((object) => {
-              void dispatch(createIntent(SpaceAction.AddObject, { target: collection, object }));
+              void dispatch(
+                createIntent(SpaceAction.AddObject, {
+                  target: collection,
+                  object,
+                }),
+              );
             });
           },
           [data.subject.space],
@@ -234,7 +238,13 @@ export default (context: PluginContext) =>
       component: () => {
         const { dispatchPromise: dispatch } = useIntentDispatcher();
         const handleSelect = useCallback(
-          () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [Devtools.Echo.Space] })),
+          () =>
+            dispatch(
+              createIntent(LayoutAction.Open, {
+                part: 'main',
+                subject: [Devtools.Echo.Space],
+              }),
+            ),
           [dispatch],
         );
         return <SpaceListPanel onSelect={handleSelect} />;
@@ -248,7 +258,13 @@ export default (context: PluginContext) =>
         const space = useCurrentSpace();
         const { dispatchPromise: dispatch } = useIntentDispatcher();
         const handleSelect = useCallback(
-          () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [Devtools.Echo.Feeds] })),
+          () =>
+            dispatch(
+              createIntent(LayoutAction.Open, {
+                part: 'main',
+                subject: [Devtools.Echo.Feeds],
+              }),
+            ),
           [dispatch],
         );
         return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
@@ -388,7 +404,10 @@ export default (context: PluginContext) =>
             );
             log.info('script created', { result });
             await dispatch(
-              createIntent(LayoutAction.Open, { part: 'main', subject: [`${space.id}:${result.data?.object.id}`] }),
+              createIntent(LayoutAction.Open, {
+                part: 'main',
+                subject: [`${space.id}:${result.data?.object.id}`],
+              }),
             );
           },
           [dispatch],

package/src/components/DebugSettings.tsx

@@ -4,11 +4,12 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Capabilities, useCapabilities } from '@dxos/app-framework';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapabilities } from '@dxos/app-framework/react';
 import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Button, Icon, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
@@ -46,22 +47,30 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   const handleDownload = async () => {
     const data = await client.diagnostics();
-    const file = new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' });
+    const file = new Blob([JSON.stringify(data, undefined, 2)], {
+      type: 'text/plain',
+    });
     const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
     download(file, fileName);
 
     if (upload) {
-      const info = await upload(new File([file], fileName), client.spaces.default);
+      const info = await upload(client.spaces.default, new File([file], fileName));
       if (!info) {
         log.error('diagnostics failed to upload to IPFS');
         return;
       }
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
 
       // TODO(nf): move to IpfsPlugin?
       const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
       void navigator.clipboard.writeText(url);
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
       log.info('diagnostics', { url });
     }
   };
@@ -70,9 +79,15 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
     try {
       const info = await client.repair();
       setStorageConfig(await Storage());
-      handleToast({ title: t('settings repair success'), description: JSON.stringify(info, undefined, 2) });
+      handleToast({
+        title: t('settings repair success'),
+        description: JSON.stringify(info, undefined, 2),
+      });
     } catch (err: any) {
-      handleToast({ title: t('settings repair failed'), description: err.message });
+      handleToast({
+        title: t('settings repair failed'),
+        description: err.message,
+      });
     }
   };
 
@@ -87,14 +102,20 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
             />
           </ControlItemInput>
           <ControlItemInput title={t('settings download diagnostics')}>
-            <Button onClick={handleDownload}>
-              <Icon icon='ph--download-simple--regular' size={5} />
-            </Button>
+            <IconButton
+              icon='ph--download-simple--regular'
+              iconOnly
+              label={t('settings download diagnostics')}
+              onClick={handleDownload}
+            />
           </ControlItemInput>
           <ControlItemInput title={t('settings repair')}>
-            <Button onClick={handleRepair}>
-              <Icon icon='ph--first-aid-kit--regular' size={5} />
-            </Button>
+            <IconButton
+              icon='ph--first-aid-kit--regular'
+              iconOnly
+              label={t('settings repair')}
+              onClick={handleRepair}
+            />
           </ControlItemInput>
 
           {/* TODO(burdon): Move to layout? */}
@@ -114,7 +135,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
             <Select.Root
               value={
                 Object.entries(StorageAdapters).find(
-                  ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+                  ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
                 )?.[0]
               }
               onValueChange={(value) => {

package/src/components/DevtoolsOverviewContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/react';
 import { StatsPanel, useStats } from '@dxos/devtools';
 
 export const DevtoolsOverviewContainer = () => {

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -5,23 +5,22 @@
 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 { DXN, Filter, Key, type Obj, Type } from '@dxos/echo';
 import { type TypedObject } from '@dxos/echo/internal';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { createSheet } from '@dxos/plugin-sheet/types';
-import { type CellValue, SheetType } from '@dxos/plugin-sheet/types';
-import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } 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, getTypenameFromQuery } from '@dxos/schema';
+import { View, getTypenameFromQuery } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
 const generator: ValueGenerator = faker as any;
 
-const findViewByTypename = async (views: DataType.View[], typename: string) => {
+const findViewByTypename = async (views: View.View[], typename: string) => {
   return views.find((view) => getTypenameFromQuery(view.query.ast) === typename);
 };
 
@@ -36,7 +35,7 @@ export const createGenerator = <T extends Obj.Any>(
     const typename = schema.typename;
 
     // Find or create table and view.
-    const { objects: views } = await space.db.query(Filter.type(DataType.View)).run();
+    const { objects: views } = await space.db.query(Filter.type(View.View)).run();
     const view = await findViewByTypename(views, typename);
     const staticSchema = client?.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
     if (!view && !staticSchema) {
@@ -57,7 +56,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     async (space, n, cb) => {
       const objects = range(n).map(() => {
         return space.db.add(
-          Markdown.makeDocument({
+          Markdown.make({
             name: faker.commerce.productName(),
             content: faker.lorem.sentences(5),
           }),
@@ -69,16 +68,11 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    DiagramType.typename,
+    Diagram.Diagram.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
         // TODO(burdon): Generate diagram.
-        const obj = space.db.add(
-          Obj.make(DiagramType, {
-            name: faker.commerce.productName(),
-            canvas: Ref.make(Obj.make(CanvasType, { content: {} })),
-          }),
-        );
+        const obj = space.db.add(Diagram.make({ name: faker.commerce.productName() }));
 
         return obj;
       });
@@ -89,10 +83,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
   ],
   // TODO(burdon): Create unit tests.
   [
-    SheetType.typename,
+    Sheet.Sheet.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const cells: Record<string, CellValue> = {};
+        const cells: Record<string, Sheet.CellValue> = {};
         const year = new Date().getFullYear();
         const cols = 4;
         const rows = 16;
@@ -114,7 +108,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
         // TODO(burdon): Set width.
         // TODO(burdon): Set formatting for columns.
         return space.db.add(
-          createSheet({
+          Sheet.make({
             name: faker.commerce.productName(),
             cells,
           }),

package/src/components/SpaceGenerator/SchemaTable.tsx

@@ -19,8 +19,8 @@ export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTable
       <h2 className='p-2'>{label}</h2>
       {types.map((type) => (
         <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>
-          <div className='px-2 text-sm font-mono text-subdued'>{type.typename}</div>
-          <div className='px-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
+          <div className='pli-2 text-sm font-mono text-subdued'>{type.typename}</div>
+          <div className='pli-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
           <IconButton
             variant='ghost'
             icon='ph--plus--regular'

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -4,17 +4,17 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { ComputeGraph } from '@dxos/conductor';
 import { Filter, type Obj } from '@dxos/echo';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { SheetType } from '@dxos/plugin-sheet/types';
-import { DiagramType } from '@dxos/plugin-sketch/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
 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 { Organization, Person, Task } from '@dxos/types';
 import { jsonKeyReplacer, sortKeys } from '@dxos/util';
 
 import { type ObjectGenerator, createGenerator, staticGenerators } from './ObjectGenerator';
@@ -29,8 +29,8 @@ export type SpaceGeneratorProps = {
 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.Person, DataType.Task];
+  const staticTypes = [Markdown.Document, Diagram.Diagram, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
+  const recordTypes = [Organization.Organization, Person.Person, Task.Task];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
   const presets = useMemo(() => generator(), []);