@dxos/plugin-explorer 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/PLUGIN.mdl

@@ -18,9 +18,10 @@ Each extension is defined in the Appendix or resolved via its URI.
 |-------------|--------------------------------|
 | `type`      | `org.dxos.mdl.type@1.0`       |
 | `feat`      | `org.dxos.mdl.feat@1.0`       |
-| `test`      | `org.dxos.mdl.test@1.0`       |
+| `scenario`  | `org.dxos.mdl.scenario@1.0`   |
 | `component` | `org.dxos.mdl.component@1.0`  |
 | `op`        | `org.dxos.mdl.op@1.0`         |
+| `test`      | `org.dxos.mdl.test@1.0`       |
 
 ## Types
 
@@ -204,7 +205,7 @@ feat F-4: Node Interaction
 ## Acceptance
 
 ```mdl
-test T-1: Graph creation
+scenario T-1: Graph creation
   given: user opens the object creation dialog and selects Graph
   when: a typename is selected and the form submitted
   then:
@@ -214,7 +215,7 @@ test T-1: Graph creation
 ```
 
 ```mdl
-test T-2: Article mounts model
+scenario T-2: Article mounts model
   given: a Graph with a populated query
   when: ExplorerArticle is rendered with role === article
   then:
@@ -224,7 +225,7 @@ test T-2: Article mounts model
 ```
 
 ```mdl
-test T-3: Variant switch preserves positions
+scenario T-3: Variant switch preserves positions
   given: force variant is active with nodes positioned
   when: user switches to cluster variant
   then:
@@ -234,7 +235,7 @@ test T-3: Variant switch preserves positions
 ```
 
 ```mdl
-test T-4: Query filter updates graph
+scenario T-4: Query filter updates graph
   given: ExplorerArticle is open with all objects visible
   when: user types a typename filter in QueryEditor
   then:
@@ -244,7 +245,7 @@ test T-4: Query filter updates graph
 ```
 
 ```mdl
-test T-5: Node hover preview
+scenario T-5: Node hover preview
   given: force-directed graph with at least one ECHO object node
   when: pointer enters that node
   then:
@@ -253,7 +254,7 @@ test T-5: Node hover preview
 ```
 
 ```mdl
-test T-6: Lattice sort order
+scenario T-6: Lattice sort order
   given: database contains objects of two typenames A and B
   when: lattice variant is active
   then:
@@ -262,7 +263,7 @@ test T-6: Lattice sort order
 ```
 
 ```mdl
-test T-7: Model closed on unmount
+scenario T-7: Model closed on unmount
   given: ExplorerArticle is mounted and SpaceGraphModel is open
   when: component unmounts
   then:
@@ -272,6 +273,58 @@ test T-7: Model closed on unmount
 
 ---
 
+## QA
+
+Executable tests. Each step carries a human instruction (`do`) and, where the step maps to an
+invocable operation, an agent binding (`invoke`). Report failures by test and step number.
+
+plugin-explorer is not in `getDefaults` or the dev-only default set (see
+`packages/apps/composer-app/src/plugin-defs.tsx`) — it is OFF by default. Neither `createGraph` nor
+`buildFilter` is a registered runtime `Operation` (no `DXN.make` key exists in
+`src/`) — creation goes through the generic `CreateObjectEntry` capability
+(`src/capabilities/create-object.ts`), a UI-driven path with no operation key to invoke, and the
+query editor calls `buildFilter` as a plain in-process function. Both steps are human-only.
+
+```mdl
+test QA-1: Create a Graph and switch layout variants
+  desc: The core explorer round-trip — create a Graph object, watch it render, switch between layout variants.
+  actors: human
+  covers: [F-1.1, F-1.2, F-1.3, F-3.1, T-1, T-2, T-3]
+  status: unverified
+  given:
+    - an identity exists
+    - space: a space is open, containing at least one object of some typename to visualize
+    - no Graph named "QA Graph" exists — ABORT rather than reusing one this test did not create
+  steps:
+    - name: Create the Graph
+      do: In the navtree, click + on the space and choose Explorer > Graph. Name it "QA Graph" and pick a typename to seed the view.
+      expect: a Graph object named "QA Graph" is created and opens as an article, rendering an SVG force-directed graph of matching objects
+      note: |
+        NO `invoke` — `createGraph` has no runtime operation key; the navtree action calls the
+        `CreateObjectEntry` capability directly (see above).
+    - name: Switch to the cluster variant
+      do: Click the "cluster" tab in the variant toolbar.
+      expect: the projector swaps to radial cluster layout; nodes tween from their force positions rather than jumping; no pan/zoom wrapper is present
+    - name: Switch to the lattice variant
+      do: Click the "lattice" tab.
+      expect: nodes render as small rounded rectangles, grouped by typename then sorted alphabetically by label
+    - name: Hover a node
+      do: Move the pointer over any node with an underlying ECHO object.
+      expect: an anchor-card preview appears showing the object's label
+  after:
+    - name: Delete the Graph
+      do: Right-click "QA Graph" in the navtree and choose Delete.
+      expect: the row leaves the navtree and its plank closes
+      note: |
+        NO `invoke` here either — the test never captured a live reference to the Graph (its
+        creation had no `invoke`/`capture`), so a runner must resolve it by querying
+        `space.db.query(dxos.Filter.everything())` for the object named "QA Graph" and call
+        `org.dxos.operation.space.removeObjects` with that reference, rather than the test
+        guessing an id it was never given.
+```
+
+---
+
 ## Appendix: Extension Definitions
 
 Extension block types used in this document are defined below using
@@ -299,8 +352,8 @@ ext feat
 ```
 
 ```mdl
-ext test
-  uri: org.dxos.mdl.test@1.0
+ext scenario
+  uri: org.dxos.mdl.scenario@1.0
   desc: An acceptance scenario expressed as given / when / then steps.
   fields:
     given?: Step | Step[]

package/dist/lib/ForceGraph.mjs

@@ -0,0 +1,2 @@
+import { n as CanvasForceGraph, t as ForceGraph } from "./chunk-Graph.mjs";
+export { CanvasForceGraph, ForceGraph };

package/dist/lib/Graph.mjs

@@ -2,7 +2,6 @@ import { t as __exportAll } from "./chunk-rolldown-runtime.mjs";
 import { Annotation, DXN, Filter, Obj, Query, QueryAST, Ref, Type, View } from "@dxos/echo";
 import * as Schema from "effect/Schema";
 import { ViewAnnotation } from "@dxos/schema";
-import { FormInputAnnotation, LabelAnnotation } from "@dxos/echo/Annotation";
 //#region src/types/Graph.ts
 var Graph_exports = /* @__PURE__ */ __exportAll({
 	Graph: () => Graph,
@@ -10,15 +9,15 @@ var Graph_exports = /* @__PURE__ */ __exportAll({
 });
 var Graph = class extends Type.makeObject(DXN.make("org.dxos.type.graph", "0.1.0"))(Schema.Struct({
 	name: Schema.optional(Schema.String),
-	view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false), Schema.optional),
+	view: Ref.Ref(View.View).pipe(Annotation.FormInputAnnotation.set(false), Schema.optional),
 	query: Schema.Struct({
 		raw: Schema.optional(Schema.String),
 		ast: QueryAST.Query
-	}).pipe(FormInputAnnotation.set(false))
-}).pipe(LabelAnnotation.set(["name"]), ViewAnnotation.set(["view"]), Annotation.IconAnnotation.set({
+	}).pipe(Annotation.FormInputAnnotation.set(false))
+}).pipe(Annotation.LabelAnnotation.set(["name"]), ViewAnnotation.set(["view"]), Annotation.IconAnnotation.set({
 	icon: "ph--graph--regular",
 	hue: "green"
-}))) {};
+}), Annotation.UserType.set())) {};
 /**
 * Make a graph as a view of a data set.
 */

package/dist/lib/Graph.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Graph.mjs","names":[],"sources":["../../src/types/Graph.ts"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Annotation, DXN, Filter, Obj, Query, QueryAST, Ref, Type, View } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/Annotation';\nimport { ViewAnnotation } from '@dxos/schema';\n\nexport class Graph extends Type.makeObject<Graph>(DXN.make('org.dxos.type.graph', '0.1.0'))(\n  Schema.Struct({\n    name: Schema.optional(Schema.String),\n    view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false), Schema.optional),\n    query: Schema.Struct({\n      raw: Schema.optional(Schema.String),\n      ast: QueryAST.Query,\n    }).pipe(FormInputAnnotation.set(false)),\n  }).pipe(\n    LabelAnnotation.set(['name']),\n    ViewAnnotation.set(['view']),\n    Annotation.IconAnnotation.set({ icon: 'ph--graph--regular', hue: 'green' }),\n  ),\n) {}\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {\n  view?: View.View;\n};\n\n/**\n * Make a graph as a view of a data set.\n */\nexport const make = ({\n  name,\n  query = { raw: '', ast: Query.select(Filter.nothing()).ast },\n  view,\n}: MakeProps = {}): Graph => {\n  return Obj.make(Graph, { name, view: view && Ref.make(view), query });\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAa,QAAb,cAA2B,KAAK,WAAkB,IAAI,KAAK,uBAAuB,OAAO,CAAC,CAAC,CACzF,OAAO,OAAO;CACZ,MAAM,OAAO,SAAS,OAAO,MAAM;CACnC,MAAM,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,oBAAoB,IAAI,KAAK,GAAG,OAAO,QAAQ;CAC7E,OAAO,OAAO,OAAO;EACnB,KAAK,OAAO,SAAS,OAAO,MAAM;EAClC,KAAK,SAAS;CAChB,CAAC,CAAC,CAAC,KAAK,oBAAoB,IAAI,KAAK,CAAC;AACxC,CAAC,CAAC,CAAC,KACD,gBAAgB,IAAI,CAAC,MAAM,CAAC,GAC5B,eAAe,IAAI,CAAC,MAAM,CAAC,GAC3B,WAAW,eAAe,IAAI;CAAE,MAAM;CAAsB,KAAK;AAAQ,CAAC,CAC5E,CACF,CAAC,CAAC,CAAC;;;;AASH,IAAa,QAAQ,EACnB,MACA,QAAQ;CAAE,KAAK;CAAI,KAAK,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAC;AAAI,GAC3D,SACa,CAAC,MAAa;CAC3B,OAAO,IAAI,KAAK,OAAO;EAAE;EAAM,MAAM,QAAQ,IAAI,KAAK,IAAI;EAAG;CAAM,CAAC;AACtE"}
+{"version":3,"file":"Graph.mjs","names":[],"sources":["../../src/types/Graph.ts"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Annotation, DXN, Filter, Obj, Query, QueryAST, Ref, Type, View } from '@dxos/echo';\nimport { ViewAnnotation } from '@dxos/schema';\n\nexport class Graph extends Type.makeObject<Graph>(DXN.make('org.dxos.type.graph', '0.1.0'))(\n  Schema.Struct({\n    name: Schema.optional(Schema.String),\n    view: Ref.Ref(View.View).pipe(Annotation.FormInputAnnotation.set(false), Schema.optional),\n    query: Schema.Struct({\n      raw: Schema.optional(Schema.String),\n      ast: QueryAST.Query,\n    }).pipe(Annotation.FormInputAnnotation.set(false)),\n  }).pipe(\n    Annotation.LabelAnnotation.set(['name']),\n    ViewAnnotation.set(['view']),\n    Annotation.IconAnnotation.set({ icon: 'ph--graph--regular', hue: 'green' }),\n    Annotation.UserType.set(),\n  ),\n) {}\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {\n  view?: View.View;\n};\n\n/**\n * Make a graph as a view of a data set.\n */\nexport const make = ({\n  name,\n  query = { raw: '', ast: Query.select(Filter.nothing()).ast },\n  view,\n}: MakeProps = {}): Graph => {\n  return Obj.make(Graph, { name, view: view && Ref.make(view), query });\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,QAAb,cAA2B,KAAK,WAAkB,IAAI,KAAK,uBAAuB,OAAO,CAAC,CAAC,CACzF,OAAO,OAAO;CACZ,MAAM,OAAO,SAAS,OAAO,MAAM;CACnC,MAAM,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,WAAW,oBAAoB,IAAI,KAAK,GAAG,OAAO,QAAQ;CACxF,OAAO,OAAO,OAAO;EACnB,KAAK,OAAO,SAAS,OAAO,MAAM;EAClC,KAAK,SAAS;CAChB,CAAC,CAAC,CAAC,KAAK,WAAW,oBAAoB,IAAI,KAAK,CAAC;AACnD,CAAC,CAAC,CAAC,KACD,WAAW,gBAAgB,IAAI,CAAC,MAAM,CAAC,GACvC,eAAe,IAAI,CAAC,MAAM,CAAC,GAC3B,WAAW,eAAe,IAAI;CAAE,MAAM;CAAsB,KAAK;AAAQ,CAAC,GAC1E,WAAW,SAAS,IAAI,CAC1B,CACF,CAAC,CAAC,CAAC;;;;AASH,IAAa,QAAQ,EACnB,MACA,QAAQ;CAAE,KAAK;CAAI,KAAK,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAC;AAAI,GAC3D,SACa,CAAC,MAAa;CAC3B,OAAO,IAAI,KAAK,OAAO;EAAE;EAAM,MAAM,QAAQ,IAAI,KAAK,IAAI;EAAG;CAAM,CAAC;AACtE"}

package/dist/lib/capabilities.browser.mjs

@@ -0,0 +1,21 @@
+import { t as PLUGIN_default } from "./chunk-PLUGIN.mjs";
+import * as AppCapability from "@dxos/app-toolkit/AppCapability";
+import * as SpaceCapability from "@dxos/plugin-space/SpaceCapability";
+import { translations } from "#translations";
+import { meta } from "#meta";
+//#region src/capabilities/gen/browser.ts
+var AppGraphBuilder = AppCapability.appGraphBuilder(() => import("./chunk-app-graph-builder.mjs"));
+var CreateObject = SpaceCapability.createObject(() => import("./chunk-create-object.mjs"));
+var PluginAsset = AppCapability.pluginAsset({
+	pluginId: meta.profile.key,
+	path: "PLUGIN.mdl",
+	content: PLUGIN_default,
+	mimeType: "application/x-mdl"
+});
+var ReactSurface = AppCapability.surface(() => import("./chunk-react-surface.mjs"), { roles: ["org.dxos.role.article", "org.dxos.role.section"] });
+var Schema = AppCapability.schema(() => import("./chunk-schema.mjs"));
+var Translations = AppCapability.translations(translations);
+//#endregion
+export { AppGraphBuilder, CreateObject, PluginAsset, ReactSurface, Schema, Translations };
+
+//# sourceMappingURL=capabilities.browser.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"capabilities.browser.mjs","names":[],"sources":["../../src/capabilities/gen/browser.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'browser' condition.\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\n\nimport pluginSpec from '../../../PLUGIN.mdl?raw';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));\n\nexport const CreateObject = SpaceCapability.createObject(() => import('../create-object.ts'));\n\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\n\nexport const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {\n  roles: ['org.dxos.role.article', 'org.dxos.role.section'],\n});\n\nexport const Schema = AppCapability.schema(() => import('../schema.ts'));\n\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;AAcA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAA0B;AAEpG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAsB;AAE5F,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AAED,IAAa,eAAe,cAAc,cAAc,OAAO,8BAAwB,EACrF,OAAO,CAAC,yBAAyB,uBAAuB,EAC1D,CAAC;AAED,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAe;AAEvE,IAAa,eAAe,cAAc,aAAa,YAAY"}

package/dist/lib/capabilities.mjs

@@ -1,10 +1,8 @@
+import { t as PLUGIN_default } from "./chunk-PLUGIN.mjs";
 import * as AppCapability from "@dxos/app-toolkit/AppCapability";
 import * as SpaceCapability from "@dxos/plugin-space/SpaceCapability";
 import { translations } from "#translations";
 import { meta } from "#meta";
-//#region PLUGIN.mdl?raw
-var PLUGIN_default = "---\nid: org.dxos.plugin.explorer\nname: ExplorerPlugin\nversion: 0.1.0\n---\n\nAn interactive hypergraph visualization plugin for `DXOS` Composer that reveals relationships between objects in a workspace.\nThe plugin renders a live `Graph` object — backed by a `View` and a `QueryAST` query — through four switchable layout\nvariants: force-directed, radial cluster, edge bundling, and lattice.\nNode colours are derived from ECHO object types; hovering a node triggers an anchor-card preview.\n\n## Extensions\n\nThe following extension dialects are used in this document.\nEach extension is defined in the Appendix or resolved via its URI.\n\n| Term        | URI                            |\n|-------------|--------------------------------|\n| `type`      | `org.dxos.mdl.type@1.0`       |\n| `feat`      | `org.dxos.mdl.feat@1.0`       |\n| `test`      | `org.dxos.mdl.test@1.0`       |\n| `component` | `org.dxos.mdl.component@1.0`  |\n| `op`        | `org.dxos.mdl.op@1.0`         |\n\n## Types\n\n```mdl\ntype QueryInput\n  fields:\n    raw?: string               # raw query string entered by the user\n    ast: QueryAST.Query        # compiled AST produced by QueryBuilder\n```\n\n```mdl\ntype GraphObject\n  desc: ECHO-persistent object that describes a hypergraph visualisation session.\n  fields:\n    name?: string\n    view: Ref<View>            # schema view that defines visible fields\n    query: QueryInput\n```\n\n```mdl\ntype ExplorerVariant\n  literals: force | cluster | bundle | lattice\n```\n\n## Components\n\n```mdl\ncomponent ExplorerArticle\n  desc: |\n    Top-level article / section surface for a Graph object.\n    Renders one of four SVG layout variants and a toolbar for switching between them.\n  props:\n    role: article | section\n    subject: Ref<View>\n    attendableId?: string\n  state:\n    variant: ExplorerVariant        # active layout; default force\n    filter?: Filter.Any             # compiled from toolbar query input\n    model?: SpaceGraphModel         # live reactive graph built from db + filter\n  slots:\n    toolbar?: ReactNode             # shown only when role === article\n  actions:\n    setVariant(v: ExplorerVariant)\n    setFilter(raw: string)\n  layout: |\n    ┌────────────────────────────────┐\n    │ [toolbar slot — article only]  │\n    │  [QueryEditor] [variant tabs]  │\n    ├────────────────────────────────┤\n    │                                │\n    │   SVG canvas (force / cluster  │\n    │   / bundle / lattice)          │\n    │                                │\n    └────────────────────────────────┘\n```\n\n```mdl\ncomponent Visualization\n  desc: |\n    Internal component that owns a single persistent SVG.Graph mount.\n    Swaps the active GraphProjector when the variant changes, seeding the\n    new projector with the previous layout so node positions tween smoothly.\n  props:\n    variant: ExplorerVariant\n    model: SpaceGraphModel\n  state:\n    projector?: GraphProjector<SpaceGraphNode>\n  actions:\n    createProjector(variant: ExplorerVariant, prev?: GraphLayout) → GraphProjector\n    createRenderNode(variant: ExplorerVariant) → RenderNode\n```\n\n## Operations\n\n```mdl\nop createGraph\n  desc: |\n    Creates a new Graph object scoped to a target space or collection.\n    Derives a ViewModel from the database for the selected typename, then\n    writes the object via SpaceOperation.AddObject.\n  input:\n    name?: string\n    typename?: string            # ECHO typename used to seed the initial view\n    target: Space | Collection\n    targetNodeId?: string\n  output: GraphObject\n  effects: [echo:write]\n  note: |\n    The typename is resolved through ViewModel.makeFromDatabase; the resulting\n    View is stored as a Ref inside the Graph object.\n```\n\n```mdl\nop buildFilter\n  desc: |\n    Compiles a raw query string into a Filter via QueryBuilder.\n    Pure — no side effects; result is passed to SpaceGraphModel.setFilter.\n  input:\n    raw: string\n  output: Filter.Any\n  errors:\n    ParseError: raw string is not valid query syntax\n```\n\n## Features\n\n```mdl\nfeat F-1: Graph Object\n\n  req F-1.1: A Graph object stores a name, a View ref, and a compiled QueryAST.\n  req F-1.2:\n    when: user creates a new graph\n    then: op:createGraph derives a ViewModel from the chosen typename and writes the Graph to ECHO\n\n  req F-1.3:\n    when: Graph is persisted\n    then: it appears in the space object list and can be opened as an article\n```\n\n```mdl\nfeat F-2: Live Graph Model\n\n  req F-2.1:\n    when: ExplorerArticle mounts with a valid Graph subject\n    then: SpaceGraphModel is opened against the subject's database\n\n  req F-2.2:\n    when: user types a query in the toolbar\n    then: op:buildFilter compiles the raw string; model.setFilter applied; SVG re-renders\n\n  req F-2.3:\n    when: Graph is unmounted\n    then: SpaceGraphModel is closed and all subscriptions released\n\n  req F-2.4:\n    when: an ECHO object in the database changes\n    then: SpaceGraphModel emits an update and SVG.Graph re-renders without full remount\n    tags: [reactive, collaborative]\n```\n\n```mdl\nfeat F-3: Visualization Variants\n\n  req F-3.1:\n    when: variant tab is selected\n    then: Visualization swaps projector; previous node x/y seed the new projector so positions tween\n\n  req F-3.2:\n    when: variant is force\n    then: SVG.Zoom wrapper is mounted enabling pan/zoom drag interaction\n\n  req F-3.3:\n    when: variant is cluster or bundle\n    then: no SVG.Zoom wrapper; leaves grouped by typename; radial labels fade in after tween\n\n  req F-3.4:\n    when: variant is lattice\n    then: nodes rendered as small rounded rectangles sorted by typename then label\n\n  req F-3.5:\n    when: variant is cluster and user clicks a root or group node\n    then: subtree toggles collapsed/expanded via GraphClusterProjector.toggleCollapsed\n```\n\n```mdl\nfeat F-4: Node Interaction\n\n  req F-4.1:\n    when: pointer enters a node\n    then: DxAnchorActivate event dispatched with the object's DXN and label, kind: card\n\n  req F-4.2:\n    when: pointer leaves a node\n    then: DxAnchorActivate cleared (onNodeHover called with null)\n\n  req F-4.3:\n    when: node has no underlying ECHO object (synthetic root / group)\n    then: no preview dispatched; node rendered in neutral colour\n```\n\n## Acceptance\n\n```mdl\ntest T-1: Graph creation\n  given: user opens the object creation dialog and selects Graph\n  when: a typename is selected and the form submitted\n  then:\n    - op:createGraph runs without error\n    - new Graph object visible in space object list\n    - Graph.view references a valid View object\n```\n\n```mdl\ntest T-2: Article mounts model\n  given: a Graph with a populated query\n  when: ExplorerArticle is rendered with role === article\n  then:\n    - SpaceGraphModel is opened\n    - SVG canvas renders nodes derived from the database\n    - toolbar shows QueryEditor and variant tabs\n```\n\n```mdl\ntest T-3: Variant switch preserves positions\n  given: force variant is active with nodes positioned\n  when: user switches to cluster variant\n  then:\n    - projector is recreated from previous layout\n    - nodes tween from old positions to cluster target positions\n    - SVG.Zoom wrapper is absent in the new mount\n```\n\n```mdl\ntest T-4: Query filter updates graph\n  given: ExplorerArticle is open with all objects visible\n  when: user types a typename filter in QueryEditor\n  then:\n    - op:buildFilter returns a Filter without error\n    - SpaceGraphModel.setFilter applied\n    - only matching nodes remain visible in the SVG\n```\n\n```mdl\ntest T-5: Node hover preview\n  given: force-directed graph with at least one ECHO object node\n  when: pointer enters that node\n  then:\n    - DxAnchorActivate event fired with correct DXN\n    - kind === card\n```\n\n```mdl\ntest T-6: Lattice sort order\n  given: database contains objects of two typenames A and B\n  when: lattice variant is active\n  then:\n    - all typename-A nodes appear before typename-B nodes (or vice-versa, consistent order)\n    - within each group nodes are ordered alphabetically by label\n```\n\n```mdl\ntest T-7: Model closed on unmount\n  given: ExplorerArticle is mounted and SpaceGraphModel is open\n  when: component unmounts\n  then:\n    - SpaceGraphModel.close() is called\n    - no lingering ECHO subscriptions remain\n```\n\n---\n\n## Appendix: Extension Definitions\n\nExtension block types used in this document are defined below using\nthe core `ext` primitive — the only construct the base language provides.\n\n```mdl\next type\n  uri: org.dxos.mdl.type@1.0\n  desc: A named data structure with typed fields and optional literals.\n  fields:\n    desc?: Prose\n    fields?: FieldMap        # name[?]: TypeExpr  (# inline comment)\n    literals?: UnionList     # a | b | c\n    extends?: TypeRef[]\n```\n\n```mdl\next feat\n  uri: org.dxos.mdl.feat@1.0\n  desc: A named feature grouping one or more requirements.\n  fields:\n    desc?: Prose\n    req: RequirementList\n  nesting: self              # feat blocks may contain feat blocks\n```\n\n```mdl\next test\n  uri: org.dxos.mdl.test@1.0\n  desc: An acceptance scenario expressed as given / when / then steps.\n  fields:\n    given?: Step | Step[]\n    when?: Step | Step[]\n    then: Step | Step[]\n    tags?: TagList\n```\n\n```mdl\next component\n  uri: org.dxos.mdl.component@1.0\n  desc: A UI component with props, internal state, slots, actions, and events.\n  fields:\n    desc?: Prose\n    props?: FieldMap            # external inputs (immutable inside component)\n    state?: FieldMap            # internal reactive state\n    slots?: FieldMap            # named ReactNode injection points\n    actions?: ActionMap         # methods the component exposes or handles\n    emits?: EventMap            # events the component raises to its parent\n    layout?: CodeBlock          # ASCII sketch of visual structure (non-normative)\n```\n\n```mdl\next op\n  uri: org.dxos.mdl.op@1.0\n  desc: |\n    A named operation with typed inputs, outputs, and declared errors.\n    Pure ops have no effects or requires. Effectful ops declare both.\n  fields:\n    desc?: Prose\n    input?: FieldMap            # named input parameters\n    output?: TypeExpr           # return type\n    errors?: ErrorMap           # name: Prose  (when this error occurs)\n    effects?: EffectList        # echo:read | echo:write | http | fs | ...\n    requires?: ServiceList      # injected service dependencies\n    note?: Prose                # implementation guidance (non-normative)\n```\n";
-//#endregion
 //#region src/capabilities/index.ts
 var AppGraphBuilder = AppCapability.appGraphBuilder(() => import("./chunk-app-graph-builder.mjs"));
 var CreateObject = SpaceCapability.createObject(() => import("./chunk-create-object.mjs"));

package/dist/lib/capabilities.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.mjs","names":[],"sources":["../../src/capabilities/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../../PLUGIN.mdl?raw';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder'));\nexport const CreateObject = SpaceCapability.createObject(() => import('./create-object'));\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\nexport const ReactSurface = AppCapability.surface(() => import('./react-surface'), {\n  roles: ['org.dxos.role.article', 'org.dxos.role.section'],\n});\nexport const Schema = AppCapability.schema(() => import('./schema'));\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;;;AAaA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAAsB;AAChG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAkB;AACxF,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AACD,IAAa,eAAe,cAAc,cAAc,OAAO,8BAAoB,EACjF,OAAO,CAAC,yBAAyB,uBAAuB,EAC1D,CAAC;AACD,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAW;AACnE,IAAa,eAAe,cAAc,aAAa,YAAY"}
+{"version":3,"file":"capabilities.mjs","names":[],"sources":["../../src/capabilities/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../../PLUGIN.mdl?raw';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder.ts'));\nexport const CreateObject = SpaceCapability.createObject(() => import('./create-object.ts'));\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\nexport const ReactSurface = AppCapability.surface(() => import('./react-surface.ts'), {\n  roles: ['org.dxos.role.article', 'org.dxos.role.section'],\n});\nexport const Schema = AppCapability.schema(() => import('./schema.ts'));\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;AAaA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAAyB;AACnG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAqB;AAC3F,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AACD,IAAa,eAAe,cAAc,cAAc,OAAO,8BAAuB,EACpF,OAAO,CAAC,yBAAyB,uBAAuB,EAC1D,CAAC;AACD,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAc;AACtE,IAAa,eAAe,cAAc,aAAa,YAAY"}

package/dist/lib/capabilities.node.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.node.mjs","names":[],"sources":["../../src/capabilities/gen/node.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'node' condition.\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { translations } from '#translations';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder'));\n\nexport const CreateObject = SpaceCapability.createObject(() => import('../create-object'));\n\nexport const Schema = AppCapability.schema(() => import('../schema'));\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const PluginAsset = undefined;\nexport const ReactSurface = undefined;\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAAuB;AAEjG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAmB;AAEzF,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAY;AAEpE,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,cAAc,KAAA;AAC3B,IAAa,eAAe,KAAA"}
+{"version":3,"file":"capabilities.node.mjs","names":[],"sources":["../../src/capabilities/gen/node.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'node' condition.\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { translations } from '#translations';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));\n\nexport const CreateObject = SpaceCapability.createObject(() => import('../create-object.ts'));\n\nexport const Schema = AppCapability.schema(() => import('../schema.ts'));\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const PluginAsset = undefined;\nexport const ReactSurface = undefined;\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAA0B;AAEpG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAsB;AAE5F,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAe;AAEvE,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,cAAc,KAAA;AAC3B,IAAa,eAAe,KAAA"}

package/dist/lib/capabilities.tauri.mjs

@@ -0,0 +1,21 @@
+import { t as PLUGIN_default } from "./chunk-PLUGIN.mjs";
+import * as AppCapability from "@dxos/app-toolkit/AppCapability";
+import * as SpaceCapability from "@dxos/plugin-space/SpaceCapability";
+import { translations } from "#translations";
+import { meta } from "#meta";
+//#region src/capabilities/gen/tauri.ts
+var AppGraphBuilder = AppCapability.appGraphBuilder(() => import("./chunk-app-graph-builder.mjs"));
+var CreateObject = SpaceCapability.createObject(() => import("./chunk-create-object.mjs"));
+var PluginAsset = AppCapability.pluginAsset({
+	pluginId: meta.profile.key,
+	path: "PLUGIN.mdl",
+	content: PLUGIN_default,
+	mimeType: "application/x-mdl"
+});
+var ReactSurface = AppCapability.surface(() => import("./chunk-react-surface.mjs"), { roles: ["org.dxos.role.article", "org.dxos.role.section"] });
+var Schema = AppCapability.schema(() => import("./chunk-schema.mjs"));
+var Translations = AppCapability.translations(translations);
+//#endregion
+export { AppGraphBuilder, CreateObject, PluginAsset, ReactSurface, Schema, Translations };
+
+//# sourceMappingURL=capabilities.tauri.mjs.map

package/dist/lib/capabilities.tauri.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"capabilities.tauri.mjs","names":[],"sources":["../../src/capabilities/gen/tauri.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'tauri' condition.\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\n\nimport pluginSpec from '../../../PLUGIN.mdl?raw';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));\n\nexport const CreateObject = SpaceCapability.createObject(() => import('../create-object.ts'));\n\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\n\nexport const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {\n  roles: ['org.dxos.role.article', 'org.dxos.role.section'],\n});\n\nexport const Schema = AppCapability.schema(() => import('../schema.ts'));\n\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;AAcA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAA0B;AAEpG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAsB;AAE5F,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AAED,IAAa,eAAe,cAAc,cAAc,OAAO,8BAAwB,EACrF,OAAO,CAAC,yBAAyB,uBAAuB,EAC1D,CAAC;AAED,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAe;AAEvE,IAAa,eAAe,cAAc,aAAa,YAAY"}

package/dist/lib/capabilities.workerd.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.workerd.mjs","names":[],"sources":["../../src/capabilities/gen/workerd.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'workerd' condition.\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { translations } from '#translations';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder'));\n\nexport const CreateObject = SpaceCapability.createObject(() => import('../create-object'));\n\nexport const Schema = AppCapability.schema(() => import('../schema'));\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const PluginAsset = undefined;\nexport const ReactSurface = undefined;\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAAuB;AAEjG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAmB;AAEzF,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAY;AAEpE,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,cAAc,KAAA;AAC3B,IAAa,eAAe,KAAA"}
+{"version":3,"file":"capabilities.workerd.mjs","names":[],"sources":["../../src/capabilities/gen/workerd.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'workerd' condition.\n\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';\n\nimport { translations } from '#translations';\n\nexport const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));\n\nexport const CreateObject = SpaceCapability.createObject(() => import('../create-object.ts'));\n\nexport const Schema = AppCapability.schema(() => import('../schema.ts'));\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const PluginAsset = undefined;\nexport const ReactSurface = undefined;\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,cAAc,sBAAsB,OAAO,gCAA0B;AAEpG,IAAa,eAAe,gBAAgB,mBAAmB,OAAO,4BAAsB;AAE5F,IAAa,SAAS,cAAc,aAAa,OAAO,qBAAe;AAEvE,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,cAAc,KAAA;AAC3B,IAAa,eAAe,KAAA"}

package/dist/lib/chunk-ExplorerArticle.mjs

@@ -1,13 +1,16 @@
+import { useGraphModel } from "#hooks";
 import { useCallback, useEffect, useState } from "react";
-import { Obj } from "@dxos/echo";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DxAnchorActivate, Icon, Panel, Toolbar } from "@dxos/react-ui";
+import { Obj } from "@dxos/echo";
 import "@dxos/react-ui-graph/styles/graph.css";
-import { AppSurface } from "@dxos/app-toolkit/ui";
+import * as AppSurface from "@dxos/app-toolkit/AppSurface";
 import { useObject } from "@dxos/echo-react";
-import { QueryEditor } from "@dxos/react-ui-components";
+import { QueryEditor } from "@dxos/react-ui-query";
+import * as Panel from "@dxos/react-ui/Panel";
+import * as ToggleGroup from "@dxos/react-ui/ToggleGroup";
+import * as Toolbar from "@dxos/react-ui/Toolbar";
+import { DxAnchorActivate } from "@dxos/ui-types";
 import { VARIANTS, Visualization, isVariant } from "#components";
-import { useGraphModel } from "#hooks";
 //#region src/containers/ExplorerArticle/ExplorerArticle.tsx
 var ExplorerArticle = ({ role, subject, variant }) => {
 	const [view] = useObject(subject);
@@ -24,7 +27,7 @@ var ExplorerArticle = ({ role, subject, variant }) => {
 	}, []);
 	const handleDismiss = useCallback(() => {
 		document.defaultView?.dispatchEvent(new DxAnchorActivate({
-			dxn: "",
+			eid: "",
 			label: "",
 			trigger: document.body,
 			state: false
@@ -34,40 +37,34 @@ var ExplorerArticle = ({ role, subject, variant }) => {
 		if (!node || !event) return;
 		const obj = node.data;
 		if (!obj || !Obj.isObject(obj)) return;
-		const dxn = Obj.getURI(obj);
-		if (!dxn) return;
+		const eid = Obj.getURI(obj);
+		if (!eid) return;
 		const target = event.target;
 		target.dispatchEvent(new DxAnchorActivate({
-			dxn,
+			eid,
 			kind: "card",
 			trigger: target,
-			label: Obj.getLabel(obj) ?? dxn
+			label: Obj.getLabel(obj) ?? eid
 		}));
 	}, []);
 	const showToolbar = role === AppSurface.Article.role;
 	if (!db || !model) return null;
 	return /* @__PURE__ */ jsxs(Panel.Root, {
 		role,
-		children: [showToolbar && /* @__PURE__ */ jsx(Panel.Toolbar, {
-			asChild: true,
-			children: /* @__PURE__ */ jsxs(Toolbar.Root, { children: [/* @__PURE__ */ jsx(QueryEditor, {
-				db,
-				onFilterChange: handleFilterChange
-			}), /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
-				type: "single",
-				value: selected,
-				onValueChange: handleVariantChange,
-				children: VARIANTS.map(({ value, icon, label }) => /* @__PURE__ */ jsx(Toolbar.ToggleGroupItem, {
-					value,
-					"aria-label": label,
-					title: label,
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon,
-						size: 4
-					})
-				}, value))
-			})] })
-		}), /* @__PURE__ */ jsx(Panel.Content, {
+		children: [showToolbar && /* @__PURE__ */ jsx(Panel.Header, { children: /* @__PURE__ */ jsxs(Toolbar.Root, { children: [/* @__PURE__ */ jsx(QueryEditor, {
+			db,
+			onFilterChange: handleFilterChange
+		}), /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
+			type: "single",
+			value: selected,
+			onValueChange: handleVariantChange,
+			children: VARIANTS.map(({ value, icon, label }) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
+				value,
+				icon,
+				iconOnly: true,
+				label
+			}, value))
+		})] }) }), /* @__PURE__ */ jsx(Panel.Body, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(Visualization.Root, {
 				classNames: "dx-base-surface",

package/dist/lib/chunk-ExplorerArticle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-ExplorerArticle.mjs","names":[],"sources":["../../src/containers/ExplorerArticle/ExplorerArticle.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { AppSurface } from '@dxos/app-toolkit/ui';\nimport { type Filter, Obj, type View } from '@dxos/echo';\nimport { useObject } from '@dxos/echo-react';\nimport { DxAnchorActivate, Icon, Panel, Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\nimport { type TreeNode } from '@dxos/react-ui-graph';\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nimport { type ExplorerArticleVariant, VARIANTS, Visualization, isVariant } from '#components';\nimport { useGraphModel } from '#hooks';\n\nexport type { ExplorerArticleVariant } from '#components';\n\nexport type ExplorerArticleProps = AppSurface.ObjectArticleProps<View.View>;\n\nexport const ExplorerArticle = ({ role, subject, variant }: ExplorerArticleProps) => {\n  const [view] = useObject(subject);\n  const [filter, setFilter] = useState<Filter.Any>();\n\n  const db = view && Obj.getDatabase(view);\n  const model = useGraphModel(db, filter);\n\n  const handleFilterChange = useCallback<NonNullable<QueryEditorProps['onFilterChange']>>(\n    ({ filter }) => setFilter(filter),\n    [],\n  );\n\n  const [selected, setSelected] = useState<ExplorerArticleVariant>(isVariant(variant) ? variant : 'force');\n  useEffect(() => {\n    if (isVariant(variant)) {\n      setSelected(variant);\n    }\n  }, [variant]);\n\n  const handleVariantChange = useCallback((value: string) => {\n    if (isVariant(value)) {\n      setSelected(value);\n    }\n  }, []);\n\n  // Dismiss the preview popover. The dxn/label/trigger fields are placeholders ignored on\n  // `state: false`.\n  const handleDismiss = useCallback(() => {\n    document.defaultView?.dispatchEvent(\n      new DxAnchorActivate({ dxn: '', label: '', trigger: document.body, state: false }),\n    );\n  }, []);\n\n  const handleHover = useCallback((node: TreeNode | null, event?: MouseEvent) => {\n    // Pointer left the node/label: keep the popover open so it can be hovered/interacted with.\n    // The popover is dismissed only on an explicit click on the component surface (handleDismiss).\n    if (!node || !event) {\n      return;\n    }\n    const obj = node.data;\n    if (!obj || !Obj.isObject(obj)) {\n      return;\n    }\n    const dxn = Obj.getURI(obj);\n    if (!dxn) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    target.dispatchEvent(\n      new DxAnchorActivate({\n        dxn,\n        kind: 'card',\n        trigger: target,\n        label: Obj.getLabel(obj) ?? dxn,\n      }),\n    );\n  }, []);\n\n  const showToolbar = role === AppSurface.Article.role;\n\n  if (!db || !model) {\n    return null;\n  }\n\n  return (\n    <Panel.Root role={role}>\n      {showToolbar && (\n        <Panel.Toolbar asChild>\n          <Toolbar.Root>\n            <QueryEditor db={db} onFilterChange={handleFilterChange} />\n            <Toolbar.ToggleGroup type='single' value={selected} onValueChange={handleVariantChange}>\n              {VARIANTS.map(({ value, icon, label }) => (\n                <Toolbar.ToggleGroupItem key={value} value={value} aria-label={label} title={label}>\n                  <Icon icon={icon} size={4} />\n                </Toolbar.ToggleGroupItem>\n              ))}\n            </Toolbar.ToggleGroup>\n          </Toolbar.Root>\n        </Panel.Toolbar>\n      )}\n      <Panel.Content asChild>\n        <Visualization.Root\n          classNames='dx-base-surface'\n          variant={selected}\n          model={model}\n          onSurfaceClick={handleDismiss}\n        >\n          <Visualization.Graph onNodeHover={handleHover} />\n        </Visualization.Root>\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n\nExplorerArticle.displayName = 'ExplorerArticle';\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,mBAAmB,EAAE,MAAM,SAAS,cAAoC;CACnF,MAAM,CAAC,QAAQ,UAAU,OAAO;CAChC,MAAM,CAAC,QAAQ,aAAa,SAAqB;CAEjD,MAAM,KAAK,QAAQ,IAAI,YAAY,IAAI;CACvC,MAAM,QAAQ,cAAc,IAAI,MAAM;CAEtC,MAAM,qBAAqB,aACxB,EAAE,aAAa,UAAU,MAAM,GAChC,CAAC,CACH;CAEA,MAAM,CAAC,UAAU,eAAe,SAAiC,UAAU,OAAO,IAAI,UAAU,OAAO;CACvG,gBAAgB;EACd,IAAI,UAAU,OAAO,GACnB,YAAY,OAAO;CAEvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,sBAAsB,aAAa,UAAkB;EACzD,IAAI,UAAU,KAAK,GACjB,YAAY,KAAK;CAErB,GAAG,CAAC,CAAC;CAIL,MAAM,gBAAgB,kBAAkB;EACtC,SAAS,aAAa,cACpB,IAAI,iBAAiB;GAAE,KAAK;GAAI,OAAO;GAAI,SAAS,SAAS;GAAM,OAAO;EAAM,CAAC,CACnF;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,aAAa,MAAuB,UAAuB;EAG7E,IAAI,CAAC,QAAQ,CAAC,OACZ;EAEF,MAAM,MAAM,KAAK;EACjB,IAAI,CAAC,OAAO,CAAC,IAAI,SAAS,GAAG,GAC3B;EAEF,MAAM,MAAM,IAAI,OAAO,GAAG;EAC1B,IAAI,CAAC,KACH;EAGF,MAAM,SAAS,MAAM;EACrB,OAAO,cACL,IAAI,iBAAiB;GACnB;GACA,MAAM;GACN,SAAS;GACT,OAAO,IAAI,SAAS,GAAG,KAAK;EAC9B,CAAC,CACH;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,SAAS,WAAW,QAAQ;CAEhD,IAAI,CAAC,MAAM,CAAC,OACV,OAAO;CAGT,OACE,qBAAC,MAAM,MAAP;EAAkB;EAAlB,UAAA,CACG,eACC,oBAAC,MAAM,SAAP;GAAe,SAAA;GACb,UAAA,qBAAC,QAAQ,MAAT,EAAA,UAAA,CACE,oBAAC,aAAD;IAAiB;IAAI,gBAAgB;GAAqB,CAAA,GAC1D,oBAAC,QAAQ,aAAT;IAAqB,MAAK;IAAS,OAAO;IAAU,eAAe;IAChE,UAAA,SAAS,KAAK,EAAE,OAAO,MAAM,YAC5B,oBAAC,QAAQ,iBAAT;KAA4C;KAAO,cAAY;KAAO,OAAO;KAC3E,UAAA,oBAAC,MAAD;MAAY;MAAM,MAAM;KAAI,CAAA;IACL,GAFK,KAEL,CAC1B;GACkB,CAAA,CACT,EAAA,CAAA;EACD,CAAA,GAEjB,oBAAC,MAAM,SAAP;GAAe,SAAA;GACb,UAAA,oBAAC,cAAc,MAAf;IACE,YAAW;IACX,SAAS;IACF;IACP,gBAAgB;IAEhB,UAAA,oBAAC,cAAc,OAAf,EAAqB,aAAa,YAAc,CAAA;GAC9B,CAAA;EACP,CAAA,CACL;;AAEhB;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"chunk-ExplorerArticle.mjs","names":[],"sources":["../../src/containers/ExplorerArticle/ExplorerArticle.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport * as AppSurface from '@dxos/app-toolkit/AppSurface';\nimport { type Filter, Obj, type View } from '@dxos/echo';\nimport { useObject } from '@dxos/echo-react';\nimport { type TreeNode } from '@dxos/react-ui-graph';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-query';\nimport * as Panel from '@dxos/react-ui/Panel';\nimport * as ToggleGroup from '@dxos/react-ui/ToggleGroup';\nimport * as Toolbar from '@dxos/react-ui/Toolbar';\nimport { DxAnchorActivate } from '@dxos/ui-types';\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nimport { type ExplorerArticleVariant, VARIANTS, Visualization, isVariant } from '#components';\nimport { useGraphModel } from '#hooks';\n\nexport type { ExplorerArticleVariant } from '#components';\n\nexport type ExplorerArticleProps = AppSurface.ObjectArticleProps<View.View>;\n\nexport const ExplorerArticle = ({ role, subject, variant }: ExplorerArticleProps) => {\n  const [view] = useObject(subject);\n  const [filter, setFilter] = useState<Filter.Any>();\n\n  const db = view && Obj.getDatabase(view);\n  const model = useGraphModel(db, filter);\n\n  const handleFilterChange = useCallback<NonNullable<QueryEditorProps['onFilterChange']>>(\n    ({ filter }) => setFilter(filter),\n    [],\n  );\n\n  const [selected, setSelected] = useState<ExplorerArticleVariant>(isVariant(variant) ? variant : 'force');\n  useEffect(() => {\n    if (isVariant(variant)) {\n      setSelected(variant);\n    }\n  }, [variant]);\n\n  const handleVariantChange = useCallback((value: string) => {\n    if (isVariant(value)) {\n      setSelected(value);\n    }\n  }, []);\n\n  // Dismiss the preview popover. The eid/label/trigger fields are placeholders ignored on\n  // `state: false`.\n  const handleDismiss = useCallback(() => {\n    document.defaultView?.dispatchEvent(\n      new DxAnchorActivate({ eid: '', label: '', trigger: document.body, state: false }),\n    );\n  }, []);\n\n  const handleHover = useCallback((node: TreeNode | null, event?: MouseEvent) => {\n    // Pointer left the node/label: keep the popover open so it can be hovered/interacted with.\n    // The popover is dismissed only on an explicit click on the component surface (handleDismiss).\n    if (!node || !event) {\n      return;\n    }\n    const obj = node.data;\n    if (!obj || !Obj.isObject(obj)) {\n      return;\n    }\n    const eid = Obj.getURI(obj);\n    if (!eid) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    target.dispatchEvent(\n      new DxAnchorActivate({\n        eid,\n        kind: 'card',\n        trigger: target,\n        label: Obj.getLabel(obj) ?? eid,\n      }),\n    );\n  }, []);\n\n  const showToolbar = role === AppSurface.Article.role;\n\n  if (!db || !model) {\n    return null;\n  }\n\n  return (\n    <Panel.Root role={role}>\n      {showToolbar && (\n        <Panel.Header>\n          <Toolbar.Root>\n            <QueryEditor db={db} onFilterChange={handleFilterChange} />\n            <Toolbar.ToggleGroup type='single' value={selected} onValueChange={handleVariantChange}>\n              {VARIANTS.map(({ value, icon, label }) => (\n                <ToggleGroup.Item key={value} value={value} icon={icon} iconOnly label={label} />\n              ))}\n            </Toolbar.ToggleGroup>\n          </Toolbar.Root>\n        </Panel.Header>\n      )}\n      <Panel.Body asChild>\n        <Visualization.Root\n          classNames='dx-base-surface'\n          variant={selected}\n          model={model}\n          onSurfaceClick={handleDismiss}\n        >\n          <Visualization.Graph onNodeHover={handleHover} />\n        </Visualization.Root>\n      </Panel.Body>\n    </Panel.Root>\n  );\n};\n\nExplorerArticle.displayName = 'ExplorerArticle';\n"],"mappings":";;;;;;;;;;;;;;AAwBA,IAAa,mBAAmB,EAAE,MAAM,SAAS,cAAoC;CACnF,MAAM,CAAC,QAAQ,UAAU,OAAO;CAChC,MAAM,CAAC,QAAQ,aAAa,SAAqB;CAEjD,MAAM,KAAK,QAAQ,IAAI,YAAY,IAAI;CACvC,MAAM,QAAQ,cAAc,IAAI,MAAM;CAEtC,MAAM,qBAAqB,aACxB,EAAE,aAAa,UAAU,MAAM,GAChC,CAAC,CACH;CAEA,MAAM,CAAC,UAAU,eAAe,SAAiC,UAAU,OAAO,IAAI,UAAU,OAAO;CACvG,gBAAgB;EACd,IAAI,UAAU,OAAO,GACnB,YAAY,OAAO;CAEvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,sBAAsB,aAAa,UAAkB;EACzD,IAAI,UAAU,KAAK,GACjB,YAAY,KAAK;CAErB,GAAG,CAAC,CAAC;CAIL,MAAM,gBAAgB,kBAAkB;EACtC,SAAS,aAAa,cACpB,IAAI,iBAAiB;GAAE,KAAK;GAAI,OAAO;GAAI,SAAS,SAAS;GAAM,OAAO;EAAM,CAAC,CACnF;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,aAAa,MAAuB,UAAuB;EAG7E,IAAI,CAAC,QAAQ,CAAC,OACZ;EAEF,MAAM,MAAM,KAAK;EACjB,IAAI,CAAC,OAAO,CAAC,IAAI,SAAS,GAAG,GAC3B;EAEF,MAAM,MAAM,IAAI,OAAO,GAAG;EAC1B,IAAI,CAAC,KACH;EAGF,MAAM,SAAS,MAAM;EACrB,OAAO,cACL,IAAI,iBAAiB;GACnB;GACA,MAAM;GACN,SAAS;GACT,OAAO,IAAI,SAAS,GAAG,KAAK;EAC9B,CAAC,CACH;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,SAAS,WAAW,QAAQ;CAEhD,IAAI,CAAC,MAAM,CAAC,OACV,OAAO;CAGT,OACE,qBAAC,MAAM,MAAP;EAAkB;EAAlB,UAAA,CACG,eACC,oBAAC,MAAM,QAAP,EAAA,UACE,qBAAC,QAAQ,MAAT,EAAA,UAAA,CACE,oBAAC,aAAD;GAAiB;GAAI,gBAAgB;EAAqB,CAAA,GAC1D,oBAAC,QAAQ,aAAT;GAAqB,MAAK;GAAS,OAAO;GAAU,eAAe;GAChE,UAAA,SAAS,KAAK,EAAE,OAAO,MAAM,YAC5B,oBAAC,YAAY,MAAb;IAAqC;IAAa;IAAM,UAAA;IAAgB;GAAQ,GAAzD,KAAyD,CACjF;EACkB,CAAA,CACT,EAAA,CAAA,EACF,CAAA,GAEhB,oBAAC,MAAM,MAAP;GAAY,SAAA;GACV,UAAA,oBAAC,cAAc,MAAf;IACE,YAAW;IACX,SAAS;IACF;IACP,gBAAgB;IAEhB,UAAA,oBAAC,cAAc,OAAf,EAAqB,aAAa,YAAc,CAAA;GAC9B,CAAA;EACV,CAAA,CACF;;AAEhB;AAEA,gBAAgB,cAAc"}

package/dist/lib/chunk-Graph.mjs

@@ -0,0 +1,161 @@
+import { forceLink, forceManyBody } from "d3";
+import NativeForceGraph from "force-graph";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import * as Util from "@dxos/react-ui/Util";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAtomValue } from "@effect/atom-react/Hooks";
+import * as Atom from "effect/reactivity/Atom";
+import { Obj } from "@dxos/echo";
+import * as SelectionModel from "@dxos/graph/SelectionModel";
+import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
+import { getHashStyles } from "@dxos/ui-theme";
+import "@dxos/react-ui-graph/styles/graph.css";
+//#region src/components/Graph/graph-adapter.ts
+/**
+* Map common graph to force-graph format.
+*/
+var GraphAdapter = class {
+	graph;
+	_nodes = [];
+	_links = [];
+	constructor(graph) {
+		this.graph = graph;
+		this._nodes = graph.nodes.map((node) => ({
+			id: node.id,
+			type: node.type,
+			data: node.data
+		}));
+		const nodeIds = new Set(this._nodes.map((node) => node.id));
+		this._links = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge) => ({
+			type: edge.type,
+			source: edge.source,
+			target: edge.target,
+			data: edge.data
+		}));
+	}
+	get nodes() {
+		return this._nodes;
+	}
+	get links() {
+		return this._links;
+	}
+};
+//#endregion
+//#region src/components/Graph/CanvasForceGraph.tsx
+/**
+* More performance optimized version of the ForceGraph.
+*/
+var CanvasForceGraph = Util.composable(({ model, match, onClick, ...props }, forwardedRef) => {
+	const { ref: resizeRef, width, height } = useResizeDetector({ refreshRate: 200 });
+	const setRef = useCallback((node) => {
+		resizeRef(node);
+		assignRef(forwardedRef, node);
+	}, [resizeRef, forwardedRef]);
+	const rootRef = useRef(null);
+	const forceGraph = useRef(null);
+	const [data, setData] = useState();
+	useEffect(() => {
+		return model?.subscribe((model) => setData(new GraphAdapter(model.graph)));
+	}, [model]);
+	useEffect(() => {
+		if (rootRef.current) forceGraph.current = new NativeForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => node.type === "schema" ? node.data.typename : node.data.label ?? node.id).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkAutoColorBy((link) => link.type);
+		return () => {
+			forceGraph.current?.pauseAnimation().graphData({
+				nodes: [],
+				links: []
+			});
+			forceGraph.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		if (!data || !width || !height || !forceGraph.current) return;
+		forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => handleZoomToFit()).onNodeClick((node) => {
+			forceGraph.current?.emitParticle(node);
+		}).d3Force("link", forceLink().distance(160).strength(.5)).d3Force("charge", forceManyBody().strength(-30)).graphData(data).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
+	}, [
+		data,
+		width,
+		height
+	]);
+	const handleZoomToFit = () => {
+		forceGraph.current?.zoomToFit(400, 40);
+	};
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) handleZoomToFit();
+	}, [onClick]);
+	return /* @__PURE__ */ jsx("div", {
+		...Util.composableProps(props, { classNames: "relative grow" }),
+		onClick: handleClick,
+		ref: setRef,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
+			className: "dx-cover"
+		})
+	});
+});
+var assignRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+//#endregion
+//#region src/components/Graph/ForceGraph.tsx
+var EMPTY_ATOM = Atom.make({
+	nodes: [],
+	edges: []
+});
+var ForceGraph = Util.composable(({ model, selection: selectionProp, grid, drag, onInspect, ...props }, forwardedRef) => {
+	useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
+	const graph = useRef(null);
+	const selection = useMemo(() => selectionProp ?? new SelectionModel.SelectionModel(), [selectionProp]);
+	useEffect(() => {
+		return selection.subscribe(() => graph.current?.repaint());
+	}, [selection]);
+	const svgRef = useRef(null);
+	const [projector, setProjector] = useState();
+	useEffect(() => {
+		if (svgRef.current) setProjector(new GraphForceProjector(svgRef.current, {
+			attributes: { linkForce: (edge) => edge.data?.object?.active !== false },
+			forces: { point: { strength: .01 } }
+		}));
+	}, []);
+	const handleSelect = useCallback((node) => {
+		if (selection.contains(node.id)) selection.remove(node.id);
+		else selection.add(node.id);
+	}, [selection]);
+	return /* @__PURE__ */ jsx("div", {
+		...Util.composableProps(props, { classNames: "dx-expand" }),
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsxs(SVG.Root, {
+			ref: svgRef,
+			children: [
+				/* @__PURE__ */ jsx(SVG.Markers, {}),
+				grid && /* @__PURE__ */ jsx(SVG.Grid, { axis: true }),
+				/* @__PURE__ */ jsx(SVG.Zoom, {
+					extent: [1 / 2, 2],
+					children: /* @__PURE__ */ jsx(SVG.Graph, {
+						ref: graph,
+						drag,
+						model,
+						projector,
+						labels: { text: (node) => node.data?.data.label ?? node.id },
+						attributes: { node: (node) => {
+							const obj = node.data?.data.object;
+							return {
+								data: { color: getHashStyles(obj && Obj.getTypename(obj))?.hue },
+								classes: { "dx-selected": selection.contains(node.id) }
+							};
+						} },
+						onSelect: handleSelect,
+						onInspect
+					})
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { CanvasForceGraph as n, ForceGraph as t };
+
+//# sourceMappingURL=chunk-Graph.mjs.map

package/dist/lib/chunk-Graph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-Graph.mjs","names":[],"sources":["../../src/components/Graph/graph-adapter.ts","../../src/components/Graph/CanvasForceGraph.tsx","../../src/components/Graph/ForceGraph.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as GraphEdge from '@dxos/graph/GraphEdge';\nimport * as GraphModel from '@dxos/graph/GraphModel';\nimport * as GraphNode from '@dxos/graph/GraphNode';\n\nexport type ForceNode = {\n  id?: string;\n};\n\nexport type ForceLink = {\n  source?: string;\n  target?: string;\n};\n\nexport type GraphData = {\n  nodes: ForceNode[];\n  links: ForceLink[];\n};\n\n/**\n * Map common graph to force-graph format.\n */\nexport class GraphAdapter implements GraphData {\n  private readonly _nodes: ForceNode[] = [];\n  private readonly _links: ForceLink[] = [];\n\n  constructor(private readonly graph: GraphModel.AnyData) {\n    this._nodes = graph.nodes.map((node: GraphNode.Any) => ({\n      id: node.id,\n      type: node.type,\n      data: node.data,\n    }));\n\n    // Build a set of node IDs for efficient lookup.\n    const nodeIds = new Set(this._nodes.map((node) => node.id));\n\n    // Filter out edges where source or target node doesn't exist.\n    this._links = graph.edges\n      .filter((edge: GraphEdge.Any) => nodeIds.has(edge.source) && nodeIds.has(edge.target))\n      .map((edge: GraphEdge.Any) => ({\n        type: edge.type,\n        source: edge.source,\n        target: edge.target,\n        data: edge.data,\n      }));\n  }\n\n  get nodes() {\n    return this._nodes;\n  }\n\n  get links() {\n    return this._links;\n  }\n}\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport NativeForceGraph from 'force-graph';\nimport React, {\n  type ComponentPropsWithoutRef,\n  type Ref,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport * as Util from '@dxos/react-ui/Util';\nimport { type SpaceGraphModel } from '@dxos/schema';\n\nimport { GraphAdapter } from './graph-adapter.ts';\n\nexport type CanvasForceGraphProps = {\n  model?: SpaceGraphModel;\n  match?: RegExp;\n};\n\n/**\n * More performance optimized version of the ForceGraph.\n */\nexport const CanvasForceGraph = Util.composable<HTMLDivElement, CanvasForceGraphProps>(\n  ({ model, match, onClick, ...props }, forwardedRef) => {\n    const { ref: resizeRef, width, height } = useResizeDetector({ refreshRate: 200 });\n    const setRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        resizeRef(node);\n        assignRef(forwardedRef, node);\n      },\n      [resizeRef, forwardedRef],\n    );\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const forceGraph = useRef<NativeForceGraph>(null);\n\n    const [data, setData] = useState<GraphAdapter>();\n    useEffect(() => {\n      return model?.subscribe((model) => setData(new GraphAdapter(model.graph)));\n    }, [model]);\n\n    useEffect(() => {\n      if (rootRef.current) {\n        // https://github.com/vasturiano/force-graph\n        // https://github.com/vasturiano/3d-force-graph\n        forceGraph.current = new NativeForceGraph(rootRef.current)\n          // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling\n          .nodeRelSize(6)\n          .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))\n          .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n\n          // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling\n          .linkAutoColorBy((link: any) => link.type);\n      }\n\n      return () => {\n        forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n        forceGraph.current = null;\n      };\n    }, []);\n\n    useEffect(() => {\n      if (!data || !width || !height || !forceGraph.current) {\n        return;\n      }\n\n      // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout\n      forceGraph.current\n        .pauseAnimation()\n        .width(width)\n        .height(height)\n        .onEngineStop(() => handleZoomToFit())\n        .onNodeClick((node: any) => {\n          forceGraph.current?.emitParticle(node);\n        })\n\n        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration\n        // .d3Force('center', forceCenter().strength(0.9))\n        .d3Force('link', forceLink().distance(160).strength(0.5))\n        .d3Force('charge', forceManyBody().strength(-30))\n\n        .graphData(data)\n        .warmupTicks(100)\n        .cooldownTime(1_000)\n        .resumeAnimation();\n    }, [data, width, height]);\n\n    const handleZoomToFit = () => {\n      forceGraph.current?.zoomToFit(400, 40);\n    };\n\n    const handleClick = useCallback<NonNullable<ComponentPropsWithoutRef<'div'>['onClick']>>(\n      (event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) {\n          handleZoomToFit();\n        }\n      },\n      [onClick],\n    );\n\n    return (\n      <div {...Util.composableProps(props, { classNames: 'relative grow' })} onClick={handleClick} ref={setRef}>\n        <div ref={rootRef} className='dx-cover' />\n      </div>\n    );\n  },\n);\n\nconst assignRef = <T,>(ref: Ref<T> | undefined, value: T | null): void => {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref) {\n    (ref as RefObject<T | null>).current = value;\n  }\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { useAtomValue } from '@effect/atom-react/Hooks';\nimport * as Atom from 'effect/reactivity/Atom';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport * as SelectionModel from '@dxos/graph/SelectionModel';\nimport {\n  type GraphController,\n  GraphForceProjector,\n  type GraphLayoutNode,\n  type GraphProps,\n  SVG,\n  type SVGContext,\n} from '@dxos/react-ui-graph';\nimport * as Util from '@dxos/react-ui/Util';\nimport { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';\nimport { getHashStyles } from '@dxos/ui-theme';\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nconst EMPTY_ATOM = Atom.make<{ nodes: SpaceGraphNode[]; edges: SpaceGraphEdge[] }>({ nodes: [], edges: [] });\n\nexport type ForceGraphProps = {\n  model?: SpaceGraphModel;\n  grid?: boolean;\n  selection?: SelectionModel.SelectionModel;\n  onInspect?: GraphProps<SpaceGraphNode, SpaceGraphEdge>['onInspect'];\n} & Pick<GraphProps, 'drag'>;\n\nexport const ForceGraph = Util.composable<HTMLDivElement, ForceGraphProps>(\n  ({ model, selection: selectionProp, grid, drag, onInspect, ...props }, forwardedRef) => {\n    // TODO(wittjosiah): This should go into Graph.tsx but for some reason doesn't work.\n    useAtomValue(model?.graphAtom ?? EMPTY_ATOM);\n\n    const graph = useRef<GraphController>(null);\n    const selection = useMemo(() => selectionProp ?? new SelectionModel.SelectionModel(), [selectionProp]);\n    useEffect(() => {\n      const unsubscribe = selection.subscribe(() => graph.current?.repaint());\n      return unsubscribe;\n    }, [selection]);\n\n    const svgRef = useRef<SVGContext>(null);\n    const [projector, setProjector] = useState<GraphForceProjector>();\n    useEffect(() => {\n      if (svgRef.current) {\n        setProjector(\n          new GraphForceProjector(svgRef.current, {\n            attributes: {\n              // TODO(burdon): Check type (currently assumes Employee property).\n              // Edge shouldn't contribute to force if it's not active.\n              linkForce: (edge) => edge.data?.object?.active !== false,\n            },\n            forces: {\n              point: {\n                strength: 0.01,\n              },\n            },\n          }),\n        );\n      }\n      // SVG.Graph owns projector start/stop; nothing to clean up here.\n    }, []);\n\n    const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(\n      (node) => {\n        if (selection.contains(node.id)) {\n          selection.remove(node.id);\n        } else {\n          selection.add(node.id);\n        }\n      },\n      [selection],\n    );\n\n    return (\n      <div {...Util.composableProps(props, { classNames: 'dx-expand' })} ref={forwardedRef}>\n        <SVG.Root ref={svgRef}>\n          <SVG.Markers />\n          {grid && <SVG.Grid axis />}\n          <SVG.Zoom extent={[1 / 2, 2]}>\n            <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>\n              ref={graph}\n              drag={drag}\n              model={model}\n              projector={projector}\n              labels={{\n                text: (node) => node.data?.data.label ?? node.id,\n              }}\n              attributes={{\n                node: (node: GraphLayoutNode<SpaceGraphNode>) => {\n                  const obj = node.data?.data.object;\n                  return {\n                    data: {\n                      color: getHashStyles(obj && Obj.getTypename(obj))?.hue,\n                    },\n                    classes: {\n                      'dx-selected': selection.contains(node.id),\n                    },\n                  };\n                },\n              }}\n              onSelect={handleSelect}\n              onInspect={onInspect}\n            />\n          </SVG.Zoom>\n        </SVG.Root>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}