@dxos/plugin-explorer 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

package/src/components/Tree/testing/relations.ts

@@ -0,0 +1,182 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Space } from '@dxos/client/echo';
+import { Obj, Query, Relation } from '@dxos/echo';
+import { type TypeSpec, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { HasConnection, HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
+import { range } from '@dxos/util';
+
+import { type BundleEdge } from '../layout';
+import { type TreeNode } from '../types';
+
+const SECTORS = ['Technology', 'Finance', 'Research', 'Media'];
+const CONNECTION_KINDS = ['partner', 'investor', 'vendor', 'customer'];
+
+const pick = <T>(arr: readonly T[], rng = Math.random): T => arr[Math.floor(rng() * arr.length)];
+
+export type ConnectedOrgsResult = {
+  organizations: Obj.Any[];
+  people: Obj.Any[];
+  connections: Obj.Any[];
+};
+
+export type ConnectedOrgsOptions = {
+  organizationCount?: number;
+  personCount?: number;
+  connectionCount?: number;
+};
+
+/**
+ * Populate a space with Organizations, People, and HasConnection relations between organizations.
+ * Uses `createObjectFactory` to generate Org/Person properties from their `GeneratorAnnotation`s,
+ * then layers manual HasConnection relations on top — the connection schema is fixed
+ * (Org→Org) so it isn't a fit for the generator's reference inference.
+ */
+export const generateConnectedOrgs = async (
+  space: Space,
+  generator: ValueGenerator,
+  { organizationCount = 12, personCount = 24, connectionCount = 18 }: ConnectedOrgsOptions = {},
+): Promise<ConnectedOrgsResult> => {
+  const specs: TypeSpec[] = [
+    { type: Organization.Organization, count: organizationCount },
+    // Person has a Ref to Organization — generator fills it from objects already in db.
+    { type: Person.Person, count: personCount },
+  ];
+
+  const factory = createObjectFactory(space.db, generator);
+  await factory(specs);
+
+  const organizations = await space.db.query(Query.type(Organization.Organization)).run();
+  const people = await space.db.query(Query.type(Person.Person)).run();
+
+  const connections: Obj.Any[] = [];
+  const seen = new Set<string>();
+  for (let i = 0; i < connectionCount && organizations.length >= 2; i++) {
+    const source = pick(organizations);
+    const target = pick(organizations);
+    if (source.id === target.id) {
+      continue;
+    }
+    const key = `${source.id}->${target.id}`;
+    if (seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+
+    const relation = Relation.make(HasConnection.HasConnection, {
+      [Relation.Source]: source as any,
+      [Relation.Target]: target as any,
+      kind: pick(CONNECTION_KINDS),
+    });
+    connections.push(space.db.add(relation as any));
+  }
+
+  await space.db.flush();
+  return { organizations, people, connections };
+};
+
+/**
+ * Build a TreeNode hierarchy: Root → Sector → Organization (leaf).
+ * Organizations are deterministically bucketed into `SECTORS` so the demo has visible groups.
+ */
+export const buildOrgHierarchy = (organizations: Obj.Any[], sectors: readonly string[] = SECTORS): TreeNode => {
+  // Avoid modulo-by-zero / missing-bucket crashes when the caller passes an empty sectors list.
+  const activeSectors = sectors.length > 0 ? sectors : ['Uncategorized'];
+  const buckets = new Map<string, TreeNode[]>();
+  for (const sector of activeSectors) {
+    buckets.set(sector, []);
+  }
+  for (let i = 0; i < organizations.length; i++) {
+    const org = organizations[i] as any;
+    const sector = activeSectors[i % activeSectors.length];
+    buckets.get(sector)!.push({
+      id: org.id,
+      label: org.name ?? org.id.slice(0, 6),
+    });
+  }
+
+  return {
+    id: 'root',
+    label: 'Organizations',
+    children: activeSectors.map((sector) => ({
+      id: `sector:${sector}`,
+      label: sector,
+      children: buckets.get(sector) ?? [],
+    })),
+  };
+};
+
+const defaultGenerateTypes: TypeSpec[] = [
+  { type: Organization.Organization, count: 20 },
+  { type: Person.Person, count: 20 },
+  { type: Pipeline.Pipeline, count: 20 },
+];
+
+export type GenerateOptions = {
+  spec?: TypeSpec[];
+  relations?: {
+    count: number;
+    kind: string;
+  };
+};
+
+const defaultGenerateRelations: NonNullable<GenerateOptions['relations']> = {
+  kind: 'friend',
+  count: 10,
+};
+
+/**
+ * Populate a space with a mixed dataset (Orgs, Pipelines, People) plus
+ * `HasRelationship` edges between random pairs of People.
+ *
+ * Used by the force-directed and canvas-force graph stories that want a
+ * heterogeneous typed dataset without caring about the precise shape of relations.
+ */
+export const generate = async (
+  space: Space,
+  generator: ValueGenerator,
+  { spec = defaultGenerateTypes, relations = defaultGenerateRelations }: GenerateOptions = {},
+) => {
+  const createObjects = createObjectFactory(space.db, generator);
+  await createObjects(spec);
+
+  const contacts: Obj.Any[] = await space.db.query(Query.type(Person.Person)).run();
+  if (contacts.length < 2 || relations.count <= 0) {
+    return;
+  }
+  for (const _ of range(relations.count)) {
+    const source = pick(contacts);
+    const target = pick(contacts);
+    if (source.id !== target.id) {
+      space.db.add(
+        Relation.make(HasRelationship.HasRelationship, {
+          [Relation.Source]: source as any,
+          [Relation.Target]: target as any,
+          kind: relations.kind,
+        }) as any,
+      );
+    }
+  }
+};
+
+/**
+ * Convert HasConnection relations into bundle edges between organization ids.
+ */
+export const connectionsToEdges = (connections: Obj.Any[]): BundleEdge[] => {
+  return connections
+    .map((relation): BundleEdge | undefined => {
+      const source = Relation.getSource(relation as any) as any;
+      const target = Relation.getTarget(relation as any) as any;
+      if (!source?.id || !target?.id) {
+        return undefined;
+      }
+      return {
+        source: source.id,
+        target: target.id,
+        kind: (relation as any).kind,
+      };
+    })
+    .filter((e): e is BundleEdge => Boolean(e));
+};

package/src/components/Tree/types/types.ts

@@ -2,40 +2,49 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type GraphModel } from '@dxos/graph';
+import { type Key } from '@dxos/echo';
 
-export type TreeNode = {
+import { type TreeType } from './tree';
+
+/**
+ * In-memory tree shape used by the d3 layouts.
+ * `data` carries through to layout callbacks (e.g. hover/inspect) — typically an ECHO object on leaves.
+ */
+export type TreeNode<TData = unknown> = {
   id: string;
   label?: string;
-  children?: TreeNode[];
+  data?: TData;
+  children?: TreeNode<TData>[];
 };
 
-export const mapGraphToTreeData = (model: GraphModel.GraphModel, maxDepth = 8): TreeNode | undefined => {
-  // TODO(burdon): Convert to common/graph.
-  // const mapNode = (node: N, depth = 0): TreeNode => {
-  //   const treeNode: TreeNode = {
-  //     id: model.idAccessor(node),
-  //     label: model.idAccessor(node).slice(0, 8),
-  //   };
-
-  //   const links = model.graph.links.filter((link) => link.source === treeNode.id);
-  //   if (depth < maxDepth) {
-  //     treeNode.children = links.map((link) =>
-  //       mapNode(model.graph.nodes.find((node) => model.idAccessor(node) === link.target)!, depth + 1),
-  //     );
-  //   }
+/**
+ * Convert an ECHO `TreeType` (id-keyed node map) into a nested `TreeNode` hierarchy.
+ * Returns `undefined` if the root id is missing — the tree is then incomplete and shouldn't render.
+ */
+export const treeTypeToTreeNode = (
+  tree: TreeType,
+  rootId: Key.ObjectId = tree.root,
+  visited: Set<string> = new Set(),
+): TreeNode | undefined => {
+  const node = tree.nodes[rootId];
+  if (!node) {
+    return undefined;
+  }
+  if (visited.has(rootId)) {
+    return { id: rootId, label: labelOf(node), data: node.data };
+  }
+  visited.add(rootId);
 
-  //   return treeNode;
-  // };
-
-  let data: TreeNode | undefined;
-  // TODO(burdon): Selection model.
-  // if (model.selected) {
-  //   const node = model.graph.nodes.find((node) => model.idAccessor(node) === model.selected);
-  //   if (node) {
-  //     data = mapNode(node);
-  //   }
-  // }
+  return {
+    id: rootId,
+    label: labelOf(node),
+    data: node.data,
+    children: node.children
+      .map((childId) => treeTypeToTreeNode(tree, childId, visited))
+      .filter((c): c is TreeNode => Boolean(c)),
+  };
+};
 
-  return data;
+const labelOf = (node: { data: Record<string, any> }): string | undefined => {
+  return typeof node.data?.text === 'string' ? node.data.text : undefined;
 };

package/src/containers/ExplorerArticle/ExplorerArticle.stories.tsx

@@ -0,0 +1,119 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Filter, Query, Type, View } from '@dxos/echo';
+import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
+import { type ValueGenerator } from '@dxos/schema/testing';
+import { HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
+
+import { generate } from '../../components/Tree/testing';
+import { Graph } from '../../types';
+import { ExplorerArticle, type ExplorerArticleVariant } from './ExplorerArticle';
+
+const generator = random as any as ValueGenerator;
+
+random.seed(7);
+
+type StoryArgs = { variant: ExplorerArticleVariant };
+
+const DefaultStory = ({ variant }: StoryArgs) => {
+  const [space] = useSpaces();
+  const [graph] = useQuery(space?.db, Filter.type(Graph.Graph));
+  if (!space || !graph) {
+    return <Loading data={{ space: !!space, graph: !!graph }} />;
+  }
+
+  return <ExplorerArticle role='article' subject={graph as any} attendableId={graph.id} variant={variant} />;
+};
+
+const meta: Meta<StoryArgs> = {
+  title: 'plugins/plugin-explorer/containers/ExplorerArticle',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [
+            Graph.Graph,
+            View.View,
+            HasRelationship.HasRelationship,
+            Organization.Organization,
+            Pipeline.Pipeline,
+            Person.Person,
+          ],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              yield* Effect.promise(() => generate(personalSpace, generator));
+              const { view } = yield* Effect.promise(() =>
+                ViewModel.makeFromDatabase({ db: personalSpace.db, typename: Type.getTypename(Graph.Graph) }),
+              );
+              const graph = personalSpace.db.add(
+                Graph.make({
+                  name: 'Test',
+                  view,
+                  query: { raw: '', ast: Query.select(Filter.everything()).ast },
+                }),
+              );
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
+              return graph;
+            }),
+        }),
+        PreviewPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryArgs>;
+
+/**
+ * Default force-directed view (the production layout).
+ */
+export const Force: Story = {
+  args: {
+    variant: 'force',
+  },
+};
+
+/**
+ * Radial cluster: every object on the perimeter, grouped by its schema, all under
+ * a single database root. Inspired by https://observablehq.com/@d3/radial-cluster.
+ */
+export const Cluster: Story = {
+  args: {
+    variant: 'cluster',
+  },
+};
+
+/**
+ * Hierarchical edge bundling: same hierarchy as `cluster`, with bundled curves
+ * routed through the lowest common ancestor for every relation / ref in the space.
+ * Inspired by https://observablehq.com/@d3/hierarchical-edge-bundling.
+ */
+export const Bundle: Story = {
+  args: {
+    variant: 'bundle',
+  },
+};

package/src/containers/ExplorerArticle/ExplorerArticle.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Filter, Obj, type View } from '@dxos/echo';
+import { QueryBuilder } from '@dxos/echo-query';
+import { useObject } from '@dxos/react-client/echo';
+import { DxAnchorActivate, Icon, Panel, Toolbar } from '@dxos/react-ui';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+
+import { ForceGraph } from '#components';
+import { HierarchicalEdgeBundling, RadialTree, spaceGraphToHierarchy, type TreeNode } from '#components';
+import { useGraphModel } from '#hooks';
+
+/** Visualization variants exposed by `ExplorerArticle`. */
+export type ExplorerArticleVariant = 'force' | 'cluster' | 'bundle';
+
+const VARIANTS: { value: ExplorerArticleVariant; icon: string; label: string }[] = [
+  {
+    value: 'force',
+    icon: 'ph--graph--regular',
+    label: 'Force-directed',
+  },
+  {
+    value: 'cluster',
+    icon: 'ph--asterisk-simple--regular',
+    label: 'Radial cluster',
+  },
+  {
+    value: 'bundle',
+    icon: 'ph--circles-three-plus--regular',
+    label: 'Edge bundling',
+  },
+];
+
+export type ExplorerArticleProps = AppSurface.ObjectArticleProps<View.View>;
+
+export const ExplorerArticle = ({ role, subject, variant }: ExplorerArticleProps) => {
+  const [view] = useObject(subject);
+  const db = view && Obj.getDatabase(view);
+  const [filter, setFilter] = useState<Filter.Any>();
+  const model = useGraphModel(db, filter);
+
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {
+    setFilter(builder.build(value).filter);
+  }, []);
+
+  // The `variant` prop is the initial value; user can toggle via the toolbar tabs.
+  const [selected, setSelected] = useState<ExplorerArticleVariant>(isVariant(variant) ? variant : 'force');
+  useEffect(() => {
+    if (isVariant(variant)) {
+      setSelected(variant);
+    }
+  }, [variant]);
+  const handleVariantChange = useCallback((value: string) => {
+    if (isVariant(value)) {
+      setSelected(value);
+    }
+  }, []);
+
+  const handleHoverPreview = useCallback((node: TreeNode | null, event?: MouseEvent) => {
+    if (!node || !event) {
+      return;
+    }
+    const obj = node.data;
+    if (!obj || !Obj.isObject(obj)) {
+      return;
+    }
+    const dxn = Obj.getDXN(obj)?.toString();
+    if (!dxn) {
+      return;
+    }
+    const target = event.target as HTMLElement;
+    target.dispatchEvent(
+      new DxAnchorActivate({
+        dxn,
+        label: Obj.getLabel(obj) ?? dxn,
+        trigger: target,
+        kind: 'card',
+      }),
+    );
+  }, []);
+
+  const showToolbar = role === 'article';
+
+  if (!db || !model) {
+    return null;
+  }
+
+  return (
+    <Panel.Root role={role}>
+      {showToolbar && (
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <QueryEditor db={db} onChange={handleChange} />
+            <Toolbar.ToggleGroup type='single' value={selected} onValueChange={handleVariantChange}>
+              {VARIANTS.map(({ value, icon, label }) => (
+                <Toolbar.ToggleGroupItem key={value} value={value} aria-label={label} title={label}>
+                  <Icon icon={icon} size={4} />
+                </Toolbar.ToggleGroupItem>
+              ))}
+            </Toolbar.ToggleGroup>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+      )}
+      <Panel.Content>
+        <Visualization variant={selected} model={model} onNodeHover={handleHoverPreview} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const isVariant = (value: unknown): value is ExplorerArticleVariant =>
+  value === 'force' || value === 'cluster' || value === 'bundle';
+
+type VisualizationProps = {
+  variant: ExplorerArticleVariant;
+  model: NonNullable<ReturnType<typeof useGraphModel>>;
+  onNodeHover?: (node: TreeNode | null, event?: MouseEvent) => void;
+};
+
+const Visualization = ({ variant, model, onNodeHover }: VisualizationProps) => {
+  if (variant === 'force') {
+    // ForceGraph subscribes to model.graphAtom internally; don't re-render the wrapper on every tick.
+    return (
+      <ForceGraph
+        model={model}
+        onInspect={(node, event) => onNodeHover?.({ id: node.id, data: node.data?.data?.object }, event)}
+      />
+    );
+  }
+
+  return <HierarchyVisualization variant={variant} model={model} onNodeHover={onNodeHover} />;
+};
+
+/**
+ * Read from the model's reactive graph atom so the hierarchy is rebuilt as objects/relations stream in.
+ */
+const HierarchyVisualization = ({ variant, model, onNodeHover }: VisualizationProps) => {
+  // Capture the atom snapshot so the memo's dep list explicitly tracks each push from the atom.
+  const graphSnapshot = useAtomValue(model.graphAtom);
+  const { tree, edges } = useMemo(() => spaceGraphToHierarchy(model), [model, graphSnapshot]);
+  if (variant === 'cluster') {
+    return <RadialTree data={tree} cluster onNodeHover={onNodeHover} />;
+  }
+
+  return <HierarchicalEdgeBundling data={tree} edges={edges} onNodeHover={onNodeHover} />;
+};

package/src/containers/ExplorerArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { ExplorerArticle as default } from './ExplorerArticle';

package/src/containers/index.ts

@@ -4,4 +4,4 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export const ExplorerContainer: ComponentType<any> = lazy(() => import('./ExplorerContainer'));
+export const ExplorerArticle: ComponentType<any> = lazy(() => import('./ExplorerArticle'));

package/src/hooks/useGraphModel.ts

@@ -6,38 +6,42 @@ import { useEffect, useState } from 'react';
 
 import { Capabilities } from '@dxos/app-framework';
 import { useCapability } from '@dxos/app-framework/ui';
-import { type Filter, type Queue, type Space } from '@dxos/client/echo';
+import { type Database, type Entity, type Filter } from '@dxos/echo';
 import { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';
 
 // TODO(burdon): Factor out.
 export const useGraphModel = (
-  space: Space | undefined,
+  db: Database.Database | undefined,
   filter?: Filter.Any | undefined,
   options?: SpaceGraphModelOptions,
-  queue?: Queue,
+  items?: readonly Entity.Unknown[],
 ): SpaceGraphModel | undefined => {
   const registry = useCapability(Capabilities.AtomRegistry);
   const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);
 
   useEffect(() => {
-    if (!space) {
+    if (!db) {
       setModel(undefined);
       return;
     }
 
     const newModel = new SpaceGraphModel(registry);
-    void newModel.open(space.db, queue);
+    void newModel.open(db);
     setModel(newModel);
 
     return () => {
       setModel(undefined);
       void newModel.close();
     };
-  }, [space, registry, queue]);
+  }, [db, registry]);
 
   useEffect(() => {
     model?.setFilter(filter).setOptions(options);
   }, [model, filter, options]);
 
+  useEffect(() => {
+    model?.setItems(items);
+  }, [model, items]);
+
   return model;
 };

package/src/index.ts

@@ -2,10 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Plugin } from '@dxos/app-framework';
-
-import { meta } from './meta';
-
 export * from './meta';
-
-export const ExplorerPlugin = Plugin.lazy(meta, () => import('#plugin'));
+export * from './types';

package/src/plugin.ts

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

package/src/testing.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// Eager re-export of `ExplorerPlugin`. See `@dxos/plugin-testing/src/core.ts`
+// for the rationale.
+export * from './ExplorerPlugin';

package/src/types/ExplorerAction.ts

@@ -4,7 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space';
 
 export const GraphProps = Schema.Struct({
   name: Schema.optional(Schema.String),

package/src/types/Graph.ts

@@ -4,8 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Annotation, Filter, Obj, Query, QueryAST, Ref, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Annotation, Filter, Obj, Query, QueryAST, Ref, Type, View } from '@dxos/echo';
 import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
 import { ViewAnnotation } from '@dxos/schema';
 

package/dist/lib/browser/hooks/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/hooks/useGraphModel.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { Capabilities } from '@dxos/app-framework';\nimport { useCapability } from '@dxos/app-framework/ui';\nimport { type Filter, type Queue, type Space } from '@dxos/client/echo';\nimport { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';\n\n// TODO(burdon): Factor out.\nexport const useGraphModel = (\n  space: Space | undefined,\n  filter?: Filter.Any | undefined,\n  options?: SpaceGraphModelOptions,\n  queue?: Queue,\n): SpaceGraphModel | undefined => {\n  const registry = useCapability(Capabilities.AtomRegistry);\n  const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);\n\n  useEffect(() => {\n    if (!space) {\n      setModel(undefined);\n      return;\n    }\n\n    const newModel = new SpaceGraphModel(registry);\n    void newModel.open(space.db, queue);\n    setModel(newModel);\n\n    return () => {\n      setModel(undefined);\n      void newModel.close();\n    };\n  }, [space, registry, queue]);\n\n  useEffect(() => {\n    model?.setFilter(filter).setOptions(options);\n  }, [model, filter, options]);\n\n  return model;\n};\n"],
-  "mappings": ";;;AAIA,SAASA,WAAWC,gBAAgB;AAEpC,SAASC,oBAAoB;AAC7B,SAASC,qBAAqB;AAE9B,SAASC,uBAAoD;AAGtD,IAAMC,gBAAgB,CAC3BC,OACAC,QACAC,SACAC,UAAAA;AAEA,QAAMC,WAAWP,cAAcD,aAAaS,YAAY;AACxD,QAAM,CAACC,OAAOC,QAAAA,IAAYZ,SAAsCa,MAAAA;AAEhEd,YAAU,MAAA;AACR,QAAI,CAACM,OAAO;AACVO,eAASC,MAAAA;AACT;IACF;AAEA,UAAMC,WAAW,IAAIX,gBAAgBM,QAAAA;AACrC,SAAKK,SAASC,KAAKV,MAAMW,IAAIR,KAAAA;AAC7BI,aAASE,QAAAA;AAET,WAAO,MAAA;AACLF,eAASC,MAAAA;AACT,WAAKC,SAASG,MAAK;IACrB;EACF,GAAG;IAACZ;IAAOI;IAAUD;GAAM;AAE3BT,YAAU,MAAA;AACRY,WAAOO,UAAUZ,MAAAA,EAAQa,WAAWZ,OAAAA;EACtC,GAAG;IAACI;IAAOL;IAAQC;GAAQ;AAE3B,SAAOI;AACT;",
-  "names": ["useEffect", "useState", "Capabilities", "useCapability", "SpaceGraphModel", "useGraphModel", "space", "filter", "options", "queue", "registry", "AtomRegistry", "model", "setModel", "undefined", "newModel", "open", "db", "close", "setFilter", "setOptions"]
-}