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

package/dist/lib/chunk-NeighborhoodCompanion.mjs

@@ -1,11 +1,16 @@
 import { meta } from "#meta";
+import { DEFAULT_NEIGHBORHOOD_DEPTH, useNeighborhoodModel } from "#hooks";
 import { useCallback, useState } from "react";
-import { Obj } from "@dxos/echo";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DxAnchorActivate, Panel, Toolbar, useTranslation } from "@dxos/react-ui";
+import { Obj } from "@dxos/echo";
 import "@dxos/react-ui-graph/styles/graph.css";
+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 { Visualization } from "#components";
-import { DEFAULT_NEIGHBORHOOD_DEPTH, useNeighborhoodModel } from "#hooks";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as Tooltip from "@dxos/react-ui/Tooltip";
 //#region src/containers/NeighborhoodCompanion/NeighborhoodCompanion.tsx
 /** Selectable traversal depths offered in the companion toolbar. */
 var DEPTHS = [
@@ -18,7 +23,7 @@ var DEPTHS = [
 * with the active node at the centre. Depth (number of hops traversed) is adjustable in the toolbar.
 */
 var NeighborhoodCompanion = ({ role = "article", subject }) => {
-	const { t } = useTranslation(meta.profile.key);
+	const { t } = Hooks.useTranslation(meta.profile.key);
 	const [depth, setDepth] = useState(DEFAULT_NEIGHBORHOOD_DEPTH);
 	const model = useNeighborhoodModel(subject, depth);
 	const handleDepthChange = useCallback((value) => {
@@ -27,7 +32,7 @@ var NeighborhoodCompanion = ({ role = "article", subject }) => {
 	}, []);
 	const handleDismiss = useCallback(() => {
 		document.defaultView?.dispatchEvent(new DxAnchorActivate({
-			dxn: "",
+			eid: "",
 			label: "",
 			trigger: document.body,
 			state: false
@@ -37,33 +42,32 @@ var NeighborhoodCompanion = ({ role = "article", subject }) => {
 		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
 		}));
 	}, []);
 	if (!subject || !model) return null;
 	return /* @__PURE__ */ jsxs(Panel.Root, {
 		role,
-		children: [/* @__PURE__ */ jsx(Panel.Toolbar, {
-			asChild: true,
-			children: /* @__PURE__ */ jsxs(Toolbar.Root, { children: [/* @__PURE__ */ jsx("div", { className: "grow" }), /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
-				type: "single",
-				value: String(depth),
-				onValueChange: handleDepthChange,
-				children: DEPTHS.map((value) => /* @__PURE__ */ jsx(Toolbar.ToggleGroupItem, {
+		children: [/* @__PURE__ */ jsx(Panel.Header, { children: /* @__PURE__ */ jsxs(Toolbar.Root, { children: [/* @__PURE__ */ jsx("div", { className: "grow" }), /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
+			type: "single",
+			value: String(depth),
+			onValueChange: handleDepthChange,
+			children: DEPTHS.map((value) => /* @__PURE__ */ jsx(Tooltip.Trigger, {
+				asChild: true,
+				content: t("depth.label", { count: value }),
+				children: /* @__PURE__ */ jsx(ToggleGroup.Item, {
 					value: String(value),
-					"aria-label": t("depth.label", { count: value }),
-					title: t("depth.label", { count: value }),
-					children: value
-				}, value))
-			})] })
-		}), /* @__PURE__ */ jsx(Panel.Content, {
+					label: String(value)
+				})
+			}, value))
+		})] }) }), /* @__PURE__ */ jsx(Panel.Body, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(Visualization.Root, {
 				classNames: "dx-base-surface",

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

@@ -1 +1 @@
-{"version":3,"file":"chunk-NeighborhoodCompanion.mjs","names":[],"sources":["../../src/containers/NeighborhoodCompanion/NeighborhoodCompanion.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useCallback, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { DxAnchorActivate, Panel, Toolbar, useTranslation } from '@dxos/react-ui';\nimport { type TreeNode } from '@dxos/react-ui-graph';\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nimport { Visualization } from '#components';\nimport { DEFAULT_NEIGHBORHOOD_DEPTH, useNeighborhoodModel } from '#hooks';\nimport { meta } from '#meta';\n\n/** Selectable traversal depths offered in the companion toolbar. */\nconst DEPTHS = [1, 2, 3] as const;\n\nexport type NeighborhoodCompanionProps = {\n  role?: string;\n  /** The active node whose neighbourhood is rendered (passed as the companion subject). */\n  subject: Obj.Any;\n};\n\n/**\n * Companion that renders the n-hop neighbourhood of the active node as an ego-centric radial graph,\n * with the active node at the centre. Depth (number of hops traversed) is adjustable in the toolbar.\n */\nexport const NeighborhoodCompanion = ({ role = 'article', subject }: NeighborhoodCompanionProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const [depth, setDepth] = useState<number>(DEFAULT_NEIGHBORHOOD_DEPTH);\n  const model = useNeighborhoodModel(subject, depth);\n\n  const handleDepthChange = useCallback((value: string) => {\n    const next = Number.parseInt(value, 10);\n    if (Number.isFinite(next)) {\n      setDepth(next);\n    }\n  }, []);\n\n  // Dismiss the preview popover. The dxn/label/trigger fields are placeholders ignored on `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    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(new DxAnchorActivate({ dxn, kind: 'card', trigger: target, label: Obj.getLabel(obj) ?? dxn }));\n  }, []);\n\n  if (!subject || !model) {\n    return null;\n  }\n\n  return (\n    <Panel.Root role={role}>\n      <Panel.Toolbar asChild>\n        <Toolbar.Root>\n          <div className='grow' />\n          <Toolbar.ToggleGroup type='single' value={String(depth)} onValueChange={handleDepthChange}>\n            {DEPTHS.map((value) => (\n              <Toolbar.ToggleGroupItem\n                key={value}\n                value={String(value)}\n                aria-label={t('depth.label', { count: value })}\n                title={t('depth.label', { count: value })}\n              >\n                {value}\n              </Toolbar.ToggleGroupItem>\n            ))}\n          </Toolbar.ToggleGroup>\n        </Toolbar.Root>\n      </Panel.Toolbar>\n      <Panel.Content asChild>\n        <Visualization.Root\n          classNames='dx-base-surface'\n          model={model}\n          variant='neighborhood'\n          focus={subject.id}\n          onSurfaceClick={handleDismiss}\n        >\n          <Visualization.Graph onNodeHover={handleHover} />\n        </Visualization.Root>\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n\nNeighborhoodCompanion.displayName = 'NeighborhoodCompanion';\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,SAAS;CAAC;CAAG;CAAG;AAAC;;;;;AAYvB,IAAa,yBAAyB,EAAE,OAAO,WAAW,cAA0C;CAClG,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAiB,0BAA0B;CACrE,MAAM,QAAQ,qBAAqB,SAAS,KAAK;CAEjD,MAAM,oBAAoB,aAAa,UAAkB;EACvD,MAAM,OAAO,OAAO,SAAS,OAAO,EAAE;EACtC,IAAI,OAAO,SAAS,IAAI,GACtB,SAAS,IAAI;CAEjB,GAAG,CAAC,CAAC;CAGL,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;EAE7E,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,cAAc,IAAI,iBAAiB;GAAE;GAAK,MAAM;GAAQ,SAAS;GAAQ,OAAO,IAAI,SAAS,GAAG,KAAK;EAAI,CAAC,CAAC;CACpH,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,WAAW,CAAC,OACf,OAAO;CAGT,OACE,qBAAC,MAAM,MAAP;EAAkB;EAAlB,UAAA,CACE,oBAAC,MAAM,SAAP;GAAe,SAAA;GACb,UAAA,qBAAC,QAAQ,MAAT,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAU,OAAQ,CAAA,GACvB,oBAAC,QAAQ,aAAT;IAAqB,MAAK;IAAS,OAAO,OAAO,KAAK;IAAG,eAAe;IACrE,UAAA,OAAO,KAAK,UACX,oBAAC,QAAQ,iBAAT;KAEE,OAAO,OAAO,KAAK;KACnB,cAAY,EAAE,eAAe,EAAE,OAAO,MAAM,CAAC;KAC7C,OAAO,EAAE,eAAe,EAAE,OAAO,MAAM,CAAC;KAEvC,UAAA;IACsB,GANlB,KAMkB,CAC1B;GACkB,CAAA,CACT,EAAA,CAAA;EACD,CAAA,GACf,oBAAC,MAAM,SAAP;GAAe,SAAA;GACb,UAAA,oBAAC,cAAc,MAAf;IACE,YAAW;IACJ;IACP,SAAQ;IACR,OAAO,QAAQ;IACf,gBAAgB;IAEhB,UAAA,oBAAC,cAAc,OAAf,EAAqB,aAAa,YAAc,CAAA;GAC9B,CAAA;EACP,CAAA,CACL;;AAEhB;AAEA,sBAAsB,cAAc"}
+{"version":3,"file":"chunk-NeighborhoodCompanion.mjs","names":[],"sources":["../../src/containers/NeighborhoodCompanion/NeighborhoodCompanion.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useCallback, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { type TreeNode } from '@dxos/react-ui-graph';\nimport * as Hooks from '@dxos/react-ui/Hooks';\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 * as Tooltip from '@dxos/react-ui/Tooltip';\nimport { DxAnchorActivate } from '@dxos/ui-types';\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nimport { Visualization } from '#components';\nimport { DEFAULT_NEIGHBORHOOD_DEPTH, useNeighborhoodModel } from '#hooks';\nimport { meta } from '#meta';\n\n/** Selectable traversal depths offered in the companion toolbar. */\nconst DEPTHS = [1, 2, 3] as const;\n\nexport type NeighborhoodCompanionProps = {\n  role?: string;\n  /** The active node whose neighbourhood is rendered (passed as the companion subject). */\n  subject: Obj.Any;\n};\n\n/**\n * Companion that renders the n-hop neighbourhood of the active node as an ego-centric radial graph,\n * with the active node at the centre. Depth (number of hops traversed) is adjustable in the toolbar.\n */\nexport const NeighborhoodCompanion = ({ role = 'article', subject }: NeighborhoodCompanionProps) => {\n  const { t } = Hooks.useTranslation(meta.profile.key);\n  const [depth, setDepth] = useState<number>(DEFAULT_NEIGHBORHOOD_DEPTH);\n  const model = useNeighborhoodModel(subject, depth);\n\n  const handleDepthChange = useCallback((value: string) => {\n    const next = Number.parseInt(value, 10);\n    if (Number.isFinite(next)) {\n      setDepth(next);\n    }\n  }, []);\n\n  // Dismiss the preview popover. The eid/label/trigger fields are placeholders ignored on `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    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(new DxAnchorActivate({ eid, kind: 'card', trigger: target, label: Obj.getLabel(obj) ?? eid }));\n  }, []);\n\n  if (!subject || !model) {\n    return null;\n  }\n\n  return (\n    <Panel.Root role={role}>\n      <Panel.Header>\n        <Toolbar.Root>\n          <div className='grow' />\n          <Toolbar.ToggleGroup type='single' value={String(depth)} onValueChange={handleDepthChange}>\n            {DEPTHS.map((value) => (\n              <Tooltip.Trigger key={value} asChild content={t('depth.label', { count: value })}>\n                <ToggleGroup.Item value={String(value)} label={String(value)} />\n              </Tooltip.Trigger>\n            ))}\n          </Toolbar.ToggleGroup>\n        </Toolbar.Root>\n      </Panel.Header>\n      <Panel.Body asChild>\n        <Visualization.Root\n          classNames='dx-base-surface'\n          model={model}\n          variant='neighborhood'\n          focus={subject.id}\n          onSurfaceClick={handleDismiss}\n        >\n          <Visualization.Graph onNodeHover={handleHover} />\n        </Visualization.Root>\n      </Panel.Body>\n    </Panel.Root>\n  );\n};\n\nNeighborhoodCompanion.displayName = 'NeighborhoodCompanion';\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAM,SAAS;CAAC;CAAG;CAAG;AAAC;;;;;AAYvB,IAAa,yBAAyB,EAAE,OAAO,WAAW,cAA0C;CAClG,MAAM,EAAE,MAAM,MAAM,eAAe,KAAK,QAAQ,GAAG;CACnD,MAAM,CAAC,OAAO,YAAY,SAAiB,0BAA0B;CACrE,MAAM,QAAQ,qBAAqB,SAAS,KAAK;CAEjD,MAAM,oBAAoB,aAAa,UAAkB;EACvD,MAAM,OAAO,OAAO,SAAS,OAAO,EAAE;EACtC,IAAI,OAAO,SAAS,IAAI,GACtB,SAAS,IAAI;CAEjB,GAAG,CAAC,CAAC;CAGL,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;EAE7E,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,cAAc,IAAI,iBAAiB;GAAE;GAAK,MAAM;GAAQ,SAAS;GAAQ,OAAO,IAAI,SAAS,GAAG,KAAK;EAAI,CAAC,CAAC;CACpH,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,WAAW,CAAC,OACf,OAAO;CAGT,OACE,qBAAC,MAAM,MAAP;EAAkB;EAAlB,UAAA,CACE,oBAAC,MAAM,QAAP,EAAA,UACE,qBAAC,QAAQ,MAAT,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAU,OAAQ,CAAA,GACvB,oBAAC,QAAQ,aAAT;GAAqB,MAAK;GAAS,OAAO,OAAO,KAAK;GAAG,eAAe;GACrE,UAAA,OAAO,KAAK,UACX,oBAAC,QAAQ,SAAT;IAA6B,SAAA;IAAQ,SAAS,EAAE,eAAe,EAAE,OAAO,MAAM,CAAC;IAC7E,UAAA,oBAAC,YAAY,MAAb;KAAkB,OAAO,OAAO,KAAK;KAAG,OAAO,OAAO,KAAK;IAAI,CAAA;GAChD,GAFK,KAEL,CAClB;EACkB,CAAA,CACT,EAAA,CAAA,EACF,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAA;GACV,UAAA,oBAAC,cAAc,MAAf;IACE,YAAW;IACJ;IACP,SAAQ;IACR,OAAO,QAAQ;IACf,gBAAgB;IAEhB,UAAA,oBAAC,cAAc,OAAf,EAAqB,aAAa,YAAc,CAAA;GAC9B,CAAA;EACV,CAAA,CACF;;AAEhB;AAEA,sBAAsB,cAAc"}

package/dist/lib/chunk-PLUGIN.mjs

@@ -0,0 +1,6 @@
+//#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| `scenario`  | `org.dxos.mdl.scenario@1.0`   |\n| `component` | `org.dxos.mdl.component@1.0`  |\n| `op`        | `org.dxos.mdl.op@1.0`         |\n| `test`      | `org.dxos.mdl.test@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\nscenario 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\nscenario 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\nscenario 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\nscenario 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\nscenario 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\nscenario 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\nscenario 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## QA\n\nExecutable tests. Each step carries a human instruction (`do`) and, where the step maps to an\ninvocable operation, an agent binding (`invoke`). Report failures by test and step number.\n\nplugin-explorer is not in `getDefaults` or the dev-only default set (see\n`packages/apps/composer-app/src/plugin-defs.tsx`) — it is OFF by default. Neither `createGraph` nor\n`buildFilter` is a registered runtime `Operation` (no `DXN.make` key exists in\n`src/`) — creation goes through the generic `CreateObjectEntry` capability\n(`src/capabilities/create-object.ts`), a UI-driven path with no operation key to invoke, and the\nquery editor calls `buildFilter` as a plain in-process function. Both steps are human-only.\n\n```mdl\ntest QA-1: Create a Graph and switch layout variants\n  desc: The core explorer round-trip — create a Graph object, watch it render, switch between layout variants.\n  actors: human\n  covers: [F-1.1, F-1.2, F-1.3, F-3.1, T-1, T-2, T-3]\n  status: unverified\n  given:\n    - an identity exists\n    - space: a space is open, containing at least one object of some typename to visualize\n    - no Graph named \"QA Graph\" exists — ABORT rather than reusing one this test did not create\n  steps:\n    - name: Create the Graph\n      do: In the navtree, click + on the space and choose Explorer > Graph. Name it \"QA Graph\" and pick a typename to seed the view.\n      expect: a Graph object named \"QA Graph\" is created and opens as an article, rendering an SVG force-directed graph of matching objects\n      note: |\n        NO `invoke` — `createGraph` has no runtime operation key; the navtree action calls the\n        `CreateObjectEntry` capability directly (see above).\n    - name: Switch to the cluster variant\n      do: Click the \"cluster\" tab in the variant toolbar.\n      expect: the projector swaps to radial cluster layout; nodes tween from their force positions rather than jumping; no pan/zoom wrapper is present\n    - name: Switch to the lattice variant\n      do: Click the \"lattice\" tab.\n      expect: nodes render as small rounded rectangles, grouped by typename then sorted alphabetically by label\n    - name: Hover a node\n      do: Move the pointer over any node with an underlying ECHO object.\n      expect: an anchor-card preview appears showing the object's label\n  after:\n    - name: Delete the Graph\n      do: Right-click \"QA Graph\" in the navtree and choose Delete.\n      expect: the row leaves the navtree and its plank closes\n      note: |\n        NO `invoke` here either — the test never captured a live reference to the Graph (its\n        creation had no `invoke`/`capture`), so a runner must resolve it by querying\n        `space.db.query(dxos.Filter.everything())` for the object named \"QA Graph\" and call\n        `org.dxos.operation.space.removeObjects` with that reference, rather than the test\n        guessing an id it was never given.\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 scenario\n  uri: org.dxos.mdl.scenario@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
+export { PLUGIN_default as t };
+
+//# sourceMappingURL=chunk-PLUGIN.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-PLUGIN.mjs","names":[],"sources":[],"mappings":""}

package/dist/lib/chunk-app-graph-builder.mjs

@@ -1,11 +1,11 @@
 import { meta } from "#meta";
-import { Position } from "@dxos/util";
 import * as Effect from "effect/Effect";
 import * as Capability from "@dxos/app-framework/Capability";
 import * as AppGraphBuilder from "@dxos/app-graph/AppGraphBuilder";
 import * as AppCapabilities from "@dxos/app-toolkit/AppCapabilities";
 import * as AppNode from "@dxos/app-toolkit/AppNode";
 import * as AppNodeMatcher from "@dxos/app-toolkit/AppNodeMatcher";
+import * as Position from "@dxos/util/Position";
 //#region src/capabilities/app-graph-builder.ts
 /**
 * Offers a "Neighborhood" companion on any ECHO object. The matched node is passed through as the
@@ -14,6 +14,7 @@ import * as AppNodeMatcher from "@dxos/app-toolkit/AppNodeMatcher";
 var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function* () {
 	const extensions = yield* Effect.all([AppGraphBuilder.createExtension({
 		id: "neighborhoodCompanion",
+		relation: AppNode.companion,
 		match: AppNodeMatcher.whenEchoObjectMatches,
 		connector: () => Effect.succeed([AppNode.makeCompanion({
 			variant: "neighborhood",

package/dist/lib/chunk-app-graph-builder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-app-graph-builder.mjs","names":[],"sources":["../../src/capabilities/app-graph-builder.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppGraphBuilder from '@dxos/app-graph/AppGraphBuilder';\nimport * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';\nimport * as AppNode from '@dxos/app-toolkit/AppNode';\nimport * as AppNodeMatcher from '@dxos/app-toolkit/AppNodeMatcher';\nimport { Position } from '@dxos/util';\n\nimport { meta } from '#meta';\n\n/**\n * Offers a \"Neighborhood\" companion on any ECHO object. The matched node is passed through as the\n * companion's `companionTo` (the active node), which the surface renders as an ego-centric graph.\n */\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const extensions = yield* Effect.all([\n      AppGraphBuilder.createExtension({\n        id: 'neighborhoodCompanion',\n        match: AppNodeMatcher.whenEchoObjectMatches,\n        connector: () =>\n          Effect.succeed([\n            AppNode.makeCompanion({\n              variant: 'neighborhood',\n              label: ['neighborhood-companion.label', { ns: meta.profile.key }],\n              icon: 'ph--share-network--regular',\n              data: 'neighborhood',\n              position: Position.last,\n            }),\n          ]),\n      }),\n    ]);\n\n    return Capability.contribute(AppCapabilities.AppGraphBuilder, extensions);\n  }),\n);\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAA,4BAAe,WAAW,WACxB,OAAO,WAAW,aAAa;CAC7B,MAAM,aAAa,OAAO,OAAO,IAAI,CACnC,gBAAgB,gBAAgB;EAC9B,IAAI;EACJ,OAAO,eAAe;EACtB,iBACE,OAAO,QAAQ,CACb,QAAQ,cAAc;GACpB,SAAS;GACT,OAAO,CAAC,gCAAgC,EAAE,IAAI,KAAK,QAAQ,IAAI,CAAC;GAChE,MAAM;GACN,MAAM;GACN,UAAU,SAAS;EACrB,CAAC,CACH,CAAC;CACL,CAAC,CACH,CAAC;CAED,OAAO,WAAW,WAAW,gBAAgB,iBAAiB,UAAU;AAC1E,CAAC,CACH"}
+{"version":3,"file":"chunk-app-graph-builder.mjs","names":[],"sources":["../../src/capabilities/app-graph-builder.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppGraphBuilder from '@dxos/app-graph/AppGraphBuilder';\nimport * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';\nimport * as AppNode from '@dxos/app-toolkit/AppNode';\nimport * as AppNodeMatcher from '@dxos/app-toolkit/AppNodeMatcher';\nimport * as Position from '@dxos/util/Position';\n\nimport { meta } from '#meta';\n\n/**\n * Offers a \"Neighborhood\" companion on any ECHO object. The matched node is passed through as the\n * companion's `companionTo` (the active node), which the surface renders as an ego-centric graph.\n */\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const extensions = yield* Effect.all([\n      AppGraphBuilder.createExtension({\n        id: 'neighborhoodCompanion',\n        relation: AppNode.companion,\n        match: AppNodeMatcher.whenEchoObjectMatches,\n        connector: () =>\n          Effect.succeed([\n            AppNode.makeCompanion({\n              variant: 'neighborhood',\n              label: ['neighborhood-companion.label', { ns: meta.profile.key }],\n              icon: 'ph--share-network--regular',\n              data: 'neighborhood',\n              position: Position.last,\n            }),\n          ]),\n      }),\n    ]);\n\n    return Capability.contribute(AppCapabilities.AppGraphBuilder, extensions);\n  }),\n);\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAA,4BAAe,WAAW,WACxB,OAAO,WAAW,aAAa;CAC7B,MAAM,aAAa,OAAO,OAAO,IAAI,CACnC,gBAAgB,gBAAgB;EAC9B,IAAI;EACJ,UAAU,QAAQ;EAClB,OAAO,eAAe;EACtB,iBACE,OAAO,QAAQ,CACb,QAAQ,cAAc;GACpB,SAAS;GACT,OAAO,CAAC,gCAAgC,EAAE,IAAI,KAAK,QAAQ,IAAI,CAAC;GAChE,MAAM;GACN,MAAM;GACN,UAAU,SAAS;EACrB,CAAC,CACH,CAAC;CACL,CAAC,CACH,CAAC;CAED,OAAO,WAAW,WAAW,gBAAgB,iBAAiB,UAAU;AAC1E,CAAC,CACH"}

package/dist/lib/chunk-create-object.mjs

@@ -1,5 +1,5 @@
-import { ExplorerAction, Graph } from "#types";
 import { Type } from "@dxos/echo";
+import { ExplorerAction, Graph } from "#types";
 import { ViewModel } from "@dxos/schema";
 import * as Effect from "effect/Effect";
 import * as Capability from "@dxos/app-framework/Capability";

package/dist/lib/chunk-react-surface.mjs

@@ -1,9 +1,9 @@
 import { Graph } from "#types";
 import * as Capabilities from "@dxos/app-framework/Capabilities";
-import { Surface } from "@dxos/app-framework/ui";
 import * as Effect from "effect/Effect";
 import * as Capability from "@dxos/app-framework/Capability";
-import { AppSurface } from "@dxos/app-toolkit/ui";
+import * as Surface from "@dxos/app-framework/Surface";
+import * as AppSurface from "@dxos/app-toolkit/AppSurface";
 import { ExplorerArticle, NeighborhoodCompanion } from "#containers";
 //#region src/capabilities/react-surface.ts
 var react_surface_default = Capability.makeModule(() => Effect.succeed(Capability.contribute(Capabilities.ReactSurface, [Surface.create({

package/dist/lib/chunk-react-surface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-react-surface.mjs","names":[],"sources":["../../src/capabilities/react-surface.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport * as Capabilities from '@dxos/app-framework/Capabilities';\nimport * as Capability from '@dxos/app-framework/Capability';\nimport { Surface } from '@dxos/app-framework/ui';\nimport { AppSurface } from '@dxos/app-toolkit/ui';\n\nimport { ExplorerArticle, NeighborhoodCompanion } from '#containers';\nimport { Graph } from '#types';\n\nexport default Capability.makeModule(() =>\n  Effect.succeed(\n    Capability.contribute(Capabilities.ReactSurface, [\n      Surface.create({\n        id: 'article',\n        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.\n        filter: AppSurface.oneOf(\n          AppSurface.object(AppSurface.Article, Graph.Graph),\n          AppSurface.object(AppSurface.Section, Graph.Graph),\n        ),\n        component: ExplorerArticle,\n        props: ({ role, data: { subject, attendableId } }) => ({ role, subject, attendableId }),\n      }),\n      // Neighborhood companion offered on any ECHO object; `companionTo` is the active node.\n      Surface.create({\n        id: 'neighborhood',\n        filter: AppSurface.allOf(\n          AppSurface.literal(AppSurface.Article, 'neighborhood'),\n          AppSurface.companion(AppSurface.Article),\n        ),\n        component: NeighborhoodCompanion,\n        props: ({ role, data: { companionTo } }) => ({ role, subject: companionTo }),\n      }),\n    ]),\n  ),\n);\n"],"mappings":";;;;;;;;AAcA,IAAA,wBAAe,WAAW,iBACxB,OAAO,QACL,WAAW,WAAW,aAAa,cAAc,CAC/C,QAAQ,OAAO;CACb,IAAI;CAEJ,QAAQ,WAAW,MACjB,WAAW,OAAO,WAAW,SAAS,MAAM,KAAK,GACjD,WAAW,OAAO,WAAW,SAAS,MAAM,KAAK,CACnD;CACA,WAAW;CACX,QAAQ,EAAE,MAAM,MAAM,EAAE,SAAS,sBAAsB;EAAE;EAAM;EAAS;CAAa;AACvF,CAAC,GAED,QAAQ,OAAO;CACb,IAAI;CACJ,QAAQ,WAAW,MACjB,WAAW,QAAQ,WAAW,SAAS,cAAc,GACrD,WAAW,UAAU,WAAW,OAAO,CACzC;CACA,WAAW;CACX,QAAQ,EAAE,MAAM,MAAM,EAAE,qBAAqB;EAAE;EAAM,SAAS;CAAY;AAC5E,CAAC,CACH,CAAC,CACH,CACF"}
+{"version":3,"file":"chunk-react-surface.mjs","names":[],"sources":["../../src/capabilities/react-surface.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport * as Capabilities from '@dxos/app-framework/Capabilities';\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as Surface from '@dxos/app-framework/Surface';\nimport * as AppSurface from '@dxos/app-toolkit/AppSurface';\n\nimport { ExplorerArticle, NeighborhoodCompanion } from '#containers';\nimport { Graph } from '#types';\n\nexport default Capability.makeModule(() =>\n  Effect.succeed(\n    Capability.contribute(Capabilities.ReactSurface, [\n      Surface.create({\n        id: 'article',\n        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.\n        filter: AppSurface.oneOf(\n          AppSurface.object(AppSurface.Article, Graph.Graph),\n          AppSurface.object(AppSurface.Section, Graph.Graph),\n        ),\n        component: ExplorerArticle,\n        props: ({ role, data: { subject, attendableId } }) => ({ role, subject, attendableId }),\n      }),\n      // Neighborhood companion offered on any ECHO object; `companionTo` is the active node.\n      Surface.create({\n        id: 'neighborhood',\n        filter: AppSurface.allOf(\n          AppSurface.literal(AppSurface.Article, 'neighborhood'),\n          AppSurface.companion(AppSurface.Article),\n        ),\n        component: NeighborhoodCompanion,\n        props: ({ role, data: { companionTo } }) => ({ role, subject: companionTo }),\n      }),\n    ]),\n  ),\n);\n"],"mappings":";;;;;;;;AAcA,IAAA,wBAAe,WAAW,iBACxB,OAAO,QACL,WAAW,WAAW,aAAa,cAAc,CAC/C,QAAQ,OAAO;CACb,IAAI;CAEJ,QAAQ,WAAW,MACjB,WAAW,OAAO,WAAW,SAAS,MAAM,KAAK,GACjD,WAAW,OAAO,WAAW,SAAS,MAAM,KAAK,CACnD;CACA,WAAW;CACX,QAAQ,EAAE,MAAM,MAAM,EAAE,SAAS,sBAAsB;EAAE;EAAM;EAAS;CAAa;AACvF,CAAC,GAED,QAAQ,OAAO;CACb,IAAI;CACJ,QAAQ,WAAW,MACjB,WAAW,QAAQ,WAAW,SAAS,cAAc,GACrD,WAAW,UAAU,WAAW,OAAO,CACzC;CACA,WAAW;CACX,QAAQ,EAAE,MAAM,MAAM,EAAE,qBAAqB;EAAE;EAAM,SAAS;CAAY;AAC5E,CAAC,CACH,CAAC,CACH,CACF"}

package/dist/lib/chunk-rolldown-runtime.mjs

@@ -1,5 +1,8 @@
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
 	for (var name in all) __defProp(target, name, {
@@ -9,5 +12,16 @@ var __exportAll = (all, no_symbols) => {
 	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 //#endregion
-export { __exportAll as t };
+export { __reExport as n, __exportAll as t };

package/dist/lib/{chunk-types.mjs → chunk-tree.mjs}

@@ -121,10 +121,11 @@ var Tree = class Tree {
 	* Clear tree.
 	*/
 	clear() {
-		const root = this._tree.nodes[this._tree.root];
-		root.children.length = 0;
-		Obj.update(this._tree, (obj) => {
-			obj.nodes = { [root.id]: root };
+		const rootId = this._tree.root;
+		Obj.update(this._tree, (tree) => {
+			const root = tree.nodes[rootId];
+			root.children.length = 0;
+			tree.nodes = { [rootId]: root };
 		});
 	}
 	/**
@@ -137,9 +138,9 @@ var Tree = class Tree {
 			data: { text: "" }
 		};
 		const nodeToAdd = node;
-		Obj.update(this._tree, (obj) => {
-			obj.nodes[nodeToAdd.id] = nodeToAdd;
-			parent.children.splice(index ?? parent.children.length, 0, nodeToAdd.id);
+		Obj.update(this._tree, (tree) => {
+			tree.nodes[nodeToAdd.id] = nodeToAdd;
+			tree.nodes[parent.id].children.splice(index ?? parent.children.length, 0, nodeToAdd.id);
 		});
 		return node;
 	}
@@ -149,12 +150,12 @@ var Tree = class Tree {
 	deleteNode(parent, id) {
 		const node = this._tree.nodes[id];
 		if (!node) return;
-		Obj.update(this._tree, (obj) => {
-			delete obj.nodes[node.id];
+		Obj.update(this._tree, (tree) => {
+			delete tree.nodes[node.id];
 		});
 		const idx = parent.children.findIndex((child) => child === id);
-		if (idx !== -1) Obj.update(this._tree, () => {
-			parent.children.splice(idx, 1);
+		if (idx !== -1) Obj.update(this._tree, (tree) => {
+			tree.nodes[parent.id].children.splice(idx, 1);
 		});
 		return node;
 	}
@@ -165,22 +166,23 @@ var Tree = class Tree {
 		invariant(from >= 0 && from < node.children.length, void 0, {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file,
-			L: 234,
+			L: 235,
 			S: this,
 			A: ["from >= 0 && from < node.children.length", ""]
 		});
 		invariant(to >= 0 && to < node.children.length, void 0, {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file,
-			L: 235,
+			L: 236,
 			S: this,
 			A: ["to >= 0 && to < node.children.length", ""]
 		});
 		if (from === to) return null;
 		const child = node.children[from];
-		Obj.update(this._tree, () => {
-			node.children.splice(from, 1);
-			node.children.splice(to, 0, child);
+		Obj.update(this._tree, (tree) => {
+			const children = tree.nodes[node.id].children;
+			children.splice(from, 1);
+			children.splice(to, 0, child);
 		});
 		return this.getNode(child);
 	}
@@ -193,9 +195,9 @@ var Tree = class Tree {
 		const idx = parent.children.findIndex((child) => child === node.id);
 		if (idx < 1 || idx >= parent.children.length) return;
 		const previous = this.getNode(parent.children[idx - 1]);
-		Obj.update(this._tree, () => {
-			parent.children.splice(idx, 1);
-			previous.children.push(node.id);
+		Obj.update(this._tree, (tree) => {
+			tree.nodes[parent.id].children.splice(idx, 1);
+			tree.nodes[previous.id].children.push(node.id);
 		});
 	}
 	/**
@@ -208,19 +210,20 @@ var Tree = class Tree {
 		if (!ancestor) return;
 		const nodeIdx = parent.children.findIndex((id) => id === node.id);
 		let rest = [];
-		Obj.update(this._tree, () => {
-			rest = parent.children.splice(nodeIdx, parent.children.length - nodeIdx).slice(1);
+		Obj.update(this._tree, (tree) => {
+			const children = tree.nodes[parent.id].children;
+			rest = children.splice(nodeIdx, children.length - nodeIdx).slice(1);
 		});
 		const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
-		Obj.update(this._tree, () => {
-			ancestor.children.splice(parentIdx + 1, 0, node.id);
+		Obj.update(this._tree, (tree) => {
+			tree.nodes[ancestor.id].children.splice(parentIdx + 1, 0, node.id);
 		});
-		Obj.update(this._tree, () => {
-			node.children.push(...rest);
+		Obj.update(this._tree, (tree) => {
+			tree.nodes[node.id].children.push(...rest);
 		});
 	}
 };
 //#endregion
 export { TreeNodeType as n, TreeType as r, Tree as t };
 
-//# sourceMappingURL=chunk-types.mjs.map
+//# sourceMappingURL=chunk-tree.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-tree.mjs","names":[],"sources":["../../src/components/Tree/types/tree.ts"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport * as Struct from 'effect/Struct';\n\nimport { DXN, Key, Obj, Ref, Type } from '@dxos/echo';\nimport { TestSchema } from '@dxos/echo/testing';\nimport { invariant } from '@dxos/invariant';\n\n// TODO(burdon): Reconcile with @dxos/graph (i.e., common types).\n\nexport const TreeNodeType = Schema.Struct({\n  id: Key.EntityId,\n  children: Schema.mutable(Schema.Array(Key.EntityId)),\n  data: Schema.mutableKey(Schema.Record(Schema.String, Schema.mutableKey(Schema.Any))),\n  ref: Schema.optional(Ref.Ref(TestSchema.Expando)),\n}).mapFields(Struct.map(Schema.mutableKey));\n\nexport type TreeNodeType = Schema.Schema.Type<typeof TreeNodeType>;\n\nexport class TreeType extends Type.makeObject<TreeType>(DXN.make('org.dxos.type.tree', '0.1.0'))(\n  Schema.Struct({\n    root: Key.EntityId,\n    nodes: Schema.mutableKey(Schema.Record(Key.EntityId, Schema.mutableKey(TreeNodeType))),\n  }),\n) {}\n\n/**\n * Wrapper object for tree.\n */\nexport class Tree {\n  static create = (): TreeType => {\n    const id = Key.EntityId.random();\n    return Obj.make(TreeType, {\n      root: id,\n      nodes: {\n        [id]: {\n          id,\n          children: [],\n          data: { text: '' }, // TODO(burdon): Generic.\n        },\n      },\n    });\n  };\n\n  private _tree: TreeType;\n\n  constructor(tree?: TreeType) {\n    this._tree = tree ?? Tree.create();\n  }\n\n  get tree() {\n    return this._tree;\n  }\n\n  // TODO(burdon): Make reactive.\n  get size() {\n    return Object.keys(this._tree.nodes).length;\n  }\n\n  get root() {\n    return this.getNode(this._tree.root);\n  }\n\n  //\n  // Traversal\n  //\n\n  /**\n   * Recursively traverse the tree until the callback returns a value.\n   */\n  tranverse<T>(\n    callback: (node: TreeNodeType, depth: number) => T | void,\n    root: Key.EntityId = this._tree.root,\n    depth = 0,\n  ): T | void {\n    const node = this._tree.nodes[root];\n    const result = callback(node, depth);\n    if (result !== undefined) {\n      return result;\n    }\n\n    for (const childId of node.children) {\n      const result = this.tranverse(callback, childId, depth + 1);\n      if (result !== undefined) {\n        return result;\n      }\n    }\n  }\n\n  getNode(id: Key.EntityId): TreeNodeType {\n    const node = this._tree.nodes[id];\n    invariant(node);\n    return node;\n  }\n\n  /**\n   * Get the children of a node.\n   */\n  getChildNodes(node: TreeNodeType): Array<TreeNodeType> {\n    return node.children.map((id) => this.getNode(id));\n  }\n\n  /**\n   * Get the parent of a node.\n   */\n  getParent(node: TreeNodeType): TreeNodeType | null {\n    const parent = this.tranverse((n) => {\n      if (n.children.includes(node.id)) {\n        return n;\n      }\n    });\n\n    return parent ?? null;\n  }\n\n  /**\n   * Get the next node in the tree.\n   */\n  getNext(node: TreeNodeType, hierarchical = true): TreeNodeType | undefined {\n    if (hierarchical && node.children.length) {\n      // First child.\n      return this.getChildNodes(node)[0];\n    } else {\n      const parent = this.getParent(node);\n      if (parent) {\n        const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);\n        if (idx < parent.children.length - 1) {\n          // Next sibling.\n          return this.getNode(parent.children[idx + 1]);\n        } else {\n          // Get parent's next sibling.\n          return this.getNext(parent, false);\n        }\n      }\n    }\n  }\n\n  /**\n   * Get the previous node in the tree.\n   */\n  getPrevious(node: TreeNodeType, hierarchical = true): TreeNodeType | undefined {\n    const parent = this.getParent(node)!;\n    const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);\n    if (idx === 0) {\n      if (hierarchical) {\n        return parent;\n      }\n    } else {\n      const previous = this.getNode(parent.children[idx - 1]);\n      if (hierarchical && previous.children.length) {\n        return this.getLastDescendent(previous);\n      }\n\n      return previous;\n    }\n  }\n\n  /**\n   * Get the last descendent of a node.\n   */\n  getLastDescendent(node: TreeNodeType): TreeNodeType | undefined {\n    const children = this.getChildNodes(node);\n    const last = children.length ? children[children.length - 1] : undefined;\n    if (last) {\n      return this.getLastDescendent(last);\n    }\n\n    return node;\n  }\n\n  //\n  // Mutations\n  //\n\n  /**\n   * Clear tree.\n   */\n  clear(): void {\n    const rootId = this._tree.root;\n    Obj.update(this._tree, (tree) => {\n      const root = tree.nodes[rootId];\n      root.children.length = 0;\n      tree.nodes = {\n        [rootId]: root,\n      };\n    });\n  }\n\n  /**\n   * Add node.\n   */\n  addNode(parent: TreeNodeType, node?: TreeNodeType, index?: number): TreeNodeType {\n    if (!node) {\n      const id = Key.EntityId.random();\n      node = { id, children: [], data: { text: '' } }; // TODO(burdon): Generic.\n    }\n\n    const nodeToAdd = node;\n    Obj.update(this._tree, (tree) => {\n      tree.nodes[nodeToAdd.id] = nodeToAdd;\n      tree.nodes[parent.id].children.splice(index ?? parent.children.length, 0, nodeToAdd.id);\n    });\n    return node;\n  }\n\n  /**\n   * Delete node.\n   */\n  deleteNode(parent: TreeNodeType, id: Key.EntityId): TreeNodeType | undefined {\n    const node = this._tree.nodes[id];\n    if (!node) {\n      return undefined;\n    }\n\n    Obj.update(this._tree, (tree) => {\n      delete tree.nodes[node.id];\n    });\n    const idx = parent.children.findIndex((child) => child === id);\n    if (idx !== -1) {\n      Obj.update(this._tree, (tree) => {\n        tree.nodes[parent.id].children.splice(idx, 1);\n      });\n    }\n\n    return node;\n  }\n\n  /**\n   * Move child node.\n   */\n  moveNode(node: TreeNodeType, from: number, to: number): TreeNodeType | null {\n    invariant(from >= 0 && from < node.children.length);\n    invariant(to >= 0 && to < node.children.length);\n    if (from === to) {\n      return null;\n    }\n\n    const child = node.children[from];\n    Obj.update(this._tree, (tree) => {\n      const children = tree.nodes[node.id].children;\n      children.splice(from, 1);\n      children.splice(to, 0, child);\n    });\n    return this.getNode(child);\n  }\n\n  /**\n   * Indent node.\n   */\n  indentNode(node: TreeNodeType): void {\n    const parent = this.getParent(node);\n    if (!parent) {\n      return;\n    }\n\n    const idx = parent.children.findIndex((child) => child === node.id);\n    if (idx < 1 || idx >= parent.children.length) {\n      return;\n    }\n\n    const previous = this.getNode(parent.children[idx - 1]);\n    Obj.update(this._tree, (tree) => {\n      tree.nodes[parent.id].children.splice(idx, 1);\n      tree.nodes[previous.id].children.push(node.id);\n    });\n  }\n\n  /**\n   * Unindent node.\n   */\n  unindentNode(node: TreeNodeType): void {\n    const parent = this.getParent(node);\n    if (!parent) {\n      return;\n    }\n\n    const ancestor = this.getParent(parent);\n    if (!ancestor) {\n      return;\n    }\n\n    // Remove node from parent and get following siblings.\n    const nodeIdx = parent.children.findIndex((id) => id === node.id);\n    let rest: Key.EntityId[] = [];\n    Obj.update(this._tree, (tree) => {\n      const children = tree.nodes[parent.id].children;\n      const removed = children.splice(nodeIdx, children.length - nodeIdx);\n      rest = removed.slice(1); // Skip the node itself.\n    });\n\n    // Add to ancestor.\n    const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);\n    Obj.update(this._tree, (tree) => {\n      tree.nodes[ancestor.id].children.splice(parentIdx + 1, 0, node.id);\n    });\n\n    // Transplant following siblings to current node.\n    Obj.update(this._tree, (tree) => {\n      tree.nodes[node.id].children.push(...rest);\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/lib/components.mjs

@@ -1,21 +1,17 @@
-import { n as TreeNodeType, r as TreeType, t as Tree } from "./chunk-types.mjs";
-import * as Plot from "@observablehq/plot";
+import { n as CanvasForceGraph, t as ForceGraph } from "./chunk-Graph.mjs";
+import { n as TreeNodeType, r as TreeType, t as Tree } from "./chunk-tree.mjs";
+import { curveCatmullRom, line, select } from "d3";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { Obj } from "@dxos/echo";
-import { getHashHue, getHashStyles } from "@dxos/ui-theme";
+import * as Util from "@dxos/react-ui/Util";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as topojson from "topojson-client";
-import { curveCatmullRom, forceLink, forceManyBody, line, select } from "d3";
-import NativeForceGraph from "force-graph";
-import { composable, composableProps, slottable } from "@dxos/react-ui";
-import { useAtomValue } from "@effect/atom-react/Hooks";
-import * as Atom from "effect/unstable/reactivity/Atom";
-import { SelectionModel } from "@dxos/graph";
+import { Obj } from "@dxos/echo";
 import { CLUSTER_NODE_TYPE_LEAF, CLUSTER_NODE_TYPE_ROOT, GraphBundleProjector, GraphClusterProjector, GraphForceProjector, GraphLatticeProjector, GraphPlexusProjector, GraphSwarmProjector, GraphTreeProjector, PLEXUS_NODE_TYPE_FOCUS, PLEXUS_NODE_TYPE_RELATION, SVG, TREE_NODE_TYPE_INBOUND, TREE_NODE_TYPE_ROOT, appendRadialGroupLabel, appendRadialLeafLabel, appendRootLabel, useContainerSize } from "@dxos/react-ui-graph";
-import "@dxos/react-ui-graph/styles/graph.css";
-import { createContext } from "@radix-ui/react-context";
-import { Slot } from "@radix-ui/react-slot";
+import { getHashHue } from "@dxos/ui-theme";
+import * as Plot from "@observablehq/plot";
+import * as topojson from "topojson-client";
+import { ark } from "@ark-ui/react/factory";
+import { createContext } from "@dxos/react-hooks";
 //#region src/util/node-color.ts
 /**
 * Returns the SVG `fill` value for a node, derived from its typename via the
@@ -11660,151 +11656,6 @@ var Globe = ({ items = [], accessor, projection = "orthographic", options = defa
 	});
 };
 //#endregion
-//#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 = 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", {
-		...composableProps(props, { classNames: "relative grow" }),
-		onClick: handleClick,
-		ref: setRef,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: rootRef,
-			className: "absolute inset-0"
-		})
-	});
-});
-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 = composable(({ model, selection: selectionProp, grid, drag, onInspect, ...props }, forwardedRef) => {
-	useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
-	const graph = useRef(null);
-	const selection = useMemo(() => selectionProp ?? new 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", {
-		...composableProps(props, { classNames: "dx-container" }),
-		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
 //#region src/components/Lattice/Lattice.tsx
 var TRANSITION_MS = 350;
 /**
@@ -11851,7 +11702,7 @@ var Lattice = ({ nodes, padding = 16, onNodeHover }) => {
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: setRef,
-		className: "dx-expander relative",
+		className: "dx-expand relative",
 		children: width > 0 && height > 0 && /* @__PURE__ */ jsx("svg", {
 			ref: svgRef,
 			xmlns: "http://www.w3.org/2000/svg",
@@ -12223,14 +12074,14 @@ var [VisualizationProvider, useVisualizationContext] = createContext("Visualizat
 * focus) with the child `Visualization.Graph` via context, so the variant string is set in one
 * place. The surface element is slottable via `asChild` for composition into a host layout.
 */
-var VisualizationRoot = slottable(({ children, asChild, model, variant, focus, onSurfaceClick, ...props }, forwardedRef) => {
-	const { className, ...rest } = composableProps(props, { classNames: "dx-expander relative" });
-	const Comp = asChild ? Slot : "div";
+var VisualizationRoot = Util.slottable(({ children, asChild, model, variant, focus, onSurfaceClick, ...props }, forwardedRef) => {
+	const { className, ...rest } = Util.composableProps(props, { classNames: "dx-expand relative" });
 	return /* @__PURE__ */ jsx(VisualizationProvider, {
 		model,
 		variant: getVariant(variant),
 		focus,
-		children: /* @__PURE__ */ jsx(Comp, {
+		children: /* @__PURE__ */ jsx(ark.div, {
+			asChild,
 			...rest,
 			className,
 			onClick: onSurfaceClick,