@dxos/plugin-graph 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/dist/lib/browser/{chunk-7LNMG3EB.mjs → chunk-L263B77P.mjs}

@@ -1,11 +1,12 @@
 // packages/plugins/plugin-graph/src/meta.ts
 var GRAPH_PLUGIN = "dxos.org/plugin/graph";
 var meta = {
-  id: GRAPH_PLUGIN
+  id: GRAPH_PLUGIN,
+  name: "Graph"
 };
 
 export {
   GRAPH_PLUGIN,
   meta
 };
-//# sourceMappingURL=chunk-7LNMG3EB.mjs.map
+//# sourceMappingURL=chunk-L263B77P.mjs.map

package/dist/lib/browser/chunk-L263B77P.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const GRAPH_PLUGIN = 'dxos.org/plugin/graph';\n\nexport const meta: PluginMeta = {\n  id: GRAPH_PLUGIN,\n  name: 'Graph',\n};\n"],
+  "mappings": ";AAMO,IAAMA,eAAe;AAErB,IAAMC,OAAmB;EAC9BC,IAAIF;EACJG,MAAM;AACR;",
+  "names": ["GRAPH_PLUGIN", "meta", "id", "name"]
+}

package/dist/lib/browser/{graph-U2AHH24Q.mjs → graph-UYXVVZ2I.mjs}

@@ -1,6 +1,6 @@
 import {
   GRAPH_PLUGIN
-} from "./chunk-7LNMG3EB.mjs";
+} from "./chunk-L263B77P.mjs";
 
 // packages/plugins/plugin-graph/src/graph.ts
 import { batch, effect, untracked } from "@preact/signals-core";
@@ -39,4 +39,4 @@ var setupDevtools = (graph) => {
 export {
   graph_default as default
 };
-//# sourceMappingURL=graph-U2AHH24Q.mjs.map
+//# sourceMappingURL=graph-UYXVVZ2I.mjs.map

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   GRAPH_PLUGIN,
   meta
-} from "./chunk-7LNMG3EB.mjs";
+} from "./chunk-L263B77P.mjs";
 
 // packages/plugins/plugin-graph/src/index.ts
 export * from "@dxos/app-graph";
@@ -19,12 +19,43 @@ var GraphPlugin = () => definePlugin(meta, [
     activatesAfter: [
       Events.AppGraphReady
     ],
-    activate: lazy(() => import("./graph-U2AHH24Q.mjs"))
+    activate: lazy(() => import("./graph-UYXVVZ2I.mjs"))
   })
 ]);
+
+// packages/plugins/plugin-graph/src/hooks/useNode.ts
+import { useEffect, useState } from "react";
+var useNode = (graph, id, timeout) => {
+  const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
+  useEffect(() => {
+    if (!id && nodeState) {
+      setNodeState(void 0);
+    }
+    if (nodeState?.id === id || !id) {
+      return;
+    }
+    const frame = requestAnimationFrame(async () => {
+      try {
+        const node = await graph.waitForNode(id, timeout);
+        if (node) {
+          setNodeState(node);
+        }
+      } catch {
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    graph,
+    id,
+    timeout,
+    nodeState?.id
+  ]);
+  return nodeState;
+};
 export {
   GRAPH_PLUGIN,
   GraphPlugin,
-  meta
+  meta,
+  useNode
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n  definePlugin(meta, [\n    defineModule({\n      id: `${meta.id}/module/graph`,\n      activatesOn: Events.Startup,\n      activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n      activatesAfter: [Events.AppGraphReady],\n      activate: lazy(() => import('./graph')),\n    }),\n  ]);\n"],
-  "mappings": ";;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;",
-  "names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy"]
+  "sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts", "../../../src/hooks/useNode.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './hooks';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n  definePlugin(meta, [\n    defineModule({\n      id: `${meta.id}/module/graph`,\n      activatesOn: Events.Startup,\n      activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n      activatesAfter: [Events.AppGraphReady],\n      activate: lazy(() => import('./graph')),\n    }),\n  ]);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Graph, type Node } from '@dxos/app-graph';\n\n/**\n * React hook to get a node from the graph.\n *\n * @param graph Graph to find the node in.\n * @param id Id of the node to find.\n * @param timeout Optional timeout in milliseconds to wait for the node to be found.\n * @returns Node if found, undefined otherwise.\n */\n// TODO(wittjosiah): Factor out?\nexport const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {\n  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);\n\n  useEffect(() => {\n    if (!id && nodeState) {\n      setNodeState(undefined);\n    }\n\n    if (nodeState?.id === id || !id) {\n      return;\n    }\n\n    // Set timeout did not seem to effectively not block the UI thread.\n    const frame = requestAnimationFrame(async () => {\n      try {\n        const node = await graph.waitForNode(id, timeout);\n        if (node) {\n          setNodeState(node);\n        }\n      } catch {\n        // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.\n      }\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [graph, id, timeout, nodeState?.id]);\n\n  return nodeState;\n};\n"],
+  "mappings": ";;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;;;AClBH,SAASC,WAAWC,gBAAgB;AAa7B,IAAMC,UAAU,CAAUC,OAAcC,IAAaC,YAAAA;AAC1D,QAAM,CAACC,WAAWC,YAAAA,IAAgBC,SAA8BJ,KAAKD,MAAMM,SAASL,IAAI,KAAA,IAASM,MAAAA;AAEjGC,YAAU,MAAA;AACR,QAAI,CAACP,MAAME,WAAW;AACpBC,mBAAaG,MAAAA;IACf;AAEA,QAAIJ,WAAWF,OAAOA,MAAM,CAACA,IAAI;AAC/B;IACF;AAGA,UAAMQ,QAAQC,sBAAsB,YAAA;AAClC,UAAI;AACF,cAAMC,OAAO,MAAMX,MAAMY,YAAYX,IAAIC,OAAAA;AACzC,YAAIS,MAAM;AACRP,uBAAaO,IAAAA;QACf;MACF,QAAQ;MAER;IACF,CAAA;AAEA,WAAO,MAAME,qBAAqBJ,KAAAA;EACpC,GAAG;IAACT;IAAOC;IAAIC;IAASC,WAAWF;GAAG;AAEtC,SAAOE;AACT;",
+  "names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy", "useEffect", "useState", "useNode", "graph", "id", "timeout", "nodeState", "setNodeState", "useState", "findNode", "undefined", "useEffect", "frame", "requestAnimationFrame", "node", "waitForNode", "cancelAnimationFrame"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":891,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":697,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1499},"packages/plugins/plugin-graph/dist/lib/browser/index.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/browser/chunk-7LNMG3EB.mjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/browser/graph-U2AHH24Q.mjs","kind":"dynamic-import"}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417}},"bytes":698},"packages/plugins/plugin-graph/dist/lib/browser/graph-U2AHH24Q.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3429},"packages/plugins/plugin-graph/dist/lib/browser/graph-U2AHH24Q.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/browser/chunk-7LNMG3EB.mjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1516},"packages/plugins/plugin-graph/dist/lib/browser/chunk-7LNMG3EB.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":418},"packages/plugins/plugin-graph/dist/lib/browser/chunk-7LNMG3EB.mjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":79}},"bytes":204}}}
+{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytes":4473,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytes":506,"imports":[{"path":"packages/plugins/plugin-graph/src/hooks/useNode.ts","kind":"import-statement","original":"./useNode"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":778,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3652},"packages/plugins/plugin-graph/dist/lib/browser/index.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/browser/graph-UYXVVZ2I.mjs","kind":"dynamic-import"},{"path":"react","kind":"import-statement","external":true}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta","useNode"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytesInOutput":662},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytesInOutput":0}},"bytes":1426},"packages/plugins/plugin-graph/dist/lib/browser/graph-UYXVVZ2I.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3429},"packages/plugins/plugin-graph/dist/lib/browser/graph-UYXVVZ2I.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1516},"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":447},"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":96}},"bytes":221}}}

package/dist/lib/node/{chunk-KHIPMH35.cjs → chunk-AKNWBLRY.cjs}

@@ -16,19 +16,20 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_KHIPMH35_exports = {};
-__export(chunk_KHIPMH35_exports, {
+var chunk_AKNWBLRY_exports = {};
+__export(chunk_AKNWBLRY_exports, {
   GRAPH_PLUGIN: () => GRAPH_PLUGIN,
   meta: () => meta
 });
-module.exports = __toCommonJS(chunk_KHIPMH35_exports);
+module.exports = __toCommonJS(chunk_AKNWBLRY_exports);
 var GRAPH_PLUGIN = "dxos.org/plugin/graph";
 var meta = {
-  id: GRAPH_PLUGIN
+  id: GRAPH_PLUGIN,
+  name: "Graph"
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   GRAPH_PLUGIN,
   meta
 });
-//# sourceMappingURL=chunk-KHIPMH35.cjs.map
+//# sourceMappingURL=chunk-AKNWBLRY.cjs.map

package/dist/lib/node/{chunk-KHIPMH35.cjs.map → chunk-AKNWBLRY.cjs.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const GRAPH_PLUGIN = 'dxos.org/plugin/graph';\n\nexport const meta = {\n  id: GRAPH_PLUGIN,\n} satisfies PluginMeta;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAMA,eAAe;AAErB,IAAMC,OAAO;EAClBC,IAAIF;AACN;",
-  "names": ["GRAPH_PLUGIN", "meta", "id"]
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const GRAPH_PLUGIN = 'dxos.org/plugin/graph';\n\nexport const meta: PluginMeta = {\n  id: GRAPH_PLUGIN,\n  name: 'Graph',\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAMA,eAAe;AAErB,IAAMC,OAAmB;EAC9BC,IAAIF;EACJG,MAAM;AACR;",
+  "names": ["GRAPH_PLUGIN", "meta", "id", "name"]
 }

package/dist/lib/node/{graph-AOAAITHV.cjs → graph-GCGIYOGJ.cjs}

@@ -16,16 +16,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var graph_AOAAITHV_exports = {};
-__export(graph_AOAAITHV_exports, {
+var graph_GCGIYOGJ_exports = {};
+__export(graph_GCGIYOGJ_exports, {
   default: () => graph_default
 });
-module.exports = __toCommonJS(graph_AOAAITHV_exports);
-var import_chunk_KHIPMH35 = require("./chunk-KHIPMH35.cjs");
+module.exports = __toCommonJS(graph_GCGIYOGJ_exports);
+var import_chunk_AKNWBLRY = require("./chunk-AKNWBLRY.cjs");
 var import_signals_core = require("@preact/signals-core");
 var import_app_framework = require("@dxos/app-framework");
 var import_app_graph = require("@dxos/app-graph");
-var KEY = `${import_chunk_KHIPMH35.GRAPH_PLUGIN}/app-graph`;
+var KEY = `${import_chunk_AKNWBLRY.GRAPH_PLUGIN}/app-graph`;
 var graph_default = async (context) => {
   const builder = import_app_graph.GraphBuilder.from(localStorage.getItem(KEY) ?? void 0);
   const interval = setInterval(() => {
@@ -55,4 +55,4 @@ var setupDevtools = (graph) => {
   globalThis.composer ??= {};
   globalThis.composer.graph = graph;
 };
-//# sourceMappingURL=graph-AOAAITHV.cjs.map
+//# sourceMappingURL=graph-GCGIYOGJ.cjs.map

package/dist/lib/node/index.cjs

@@ -29,17 +29,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
-  GRAPH_PLUGIN: () => import_chunk_KHIPMH35.GRAPH_PLUGIN,
+  GRAPH_PLUGIN: () => import_chunk_AKNWBLRY.GRAPH_PLUGIN,
   GraphPlugin: () => GraphPlugin,
-  meta: () => import_chunk_KHIPMH35.meta
+  meta: () => import_chunk_AKNWBLRY.meta,
+  useNode: () => useNode
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_KHIPMH35 = require("./chunk-KHIPMH35.cjs");
+var import_chunk_AKNWBLRY = require("./chunk-AKNWBLRY.cjs");
 __reExport(node_exports, require("@dxos/app-graph"), module.exports);
 var import_app_framework = require("@dxos/app-framework");
-var GraphPlugin = () => (0, import_app_framework.definePlugin)(import_chunk_KHIPMH35.meta, [
+var import_react = require("react");
+var GraphPlugin = () => (0, import_app_framework.definePlugin)(import_chunk_AKNWBLRY.meta, [
   (0, import_app_framework.defineModule)({
-    id: `${import_chunk_KHIPMH35.meta.id}/module/graph`,
+    id: `${import_chunk_AKNWBLRY.meta.id}/module/graph`,
     activatesOn: import_app_framework.Events.Startup,
     activatesBefore: [
       import_app_framework.Events.SetupAppGraph,
@@ -48,14 +50,42 @@ var GraphPlugin = () => (0, import_app_framework.definePlugin)(import_chunk_KHIP
     activatesAfter: [
       import_app_framework.Events.AppGraphReady
     ],
-    activate: (0, import_app_framework.lazy)(() => import("./graph-AOAAITHV.cjs"))
+    activate: (0, import_app_framework.lazy)(() => import("./graph-GCGIYOGJ.cjs"))
   })
 ]);
+var useNode = (graph, id, timeout) => {
+  const [nodeState, setNodeState] = (0, import_react.useState)(id ? graph.findNode(id, false) : void 0);
+  (0, import_react.useEffect)(() => {
+    if (!id && nodeState) {
+      setNodeState(void 0);
+    }
+    if (nodeState?.id === id || !id) {
+      return;
+    }
+    const frame = requestAnimationFrame(async () => {
+      try {
+        const node = await graph.waitForNode(id, timeout);
+        if (node) {
+          setNodeState(node);
+        }
+      } catch {
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    graph,
+    id,
+    timeout,
+    nodeState?.id
+  ]);
+  return nodeState;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   GRAPH_PLUGIN,
   GraphPlugin,
   meta,
+  useNode,
   ...require("@dxos/app-graph")
 });
 //# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n  definePlugin(meta, [\n    defineModule({\n      id: `${meta.id}/module/graph`,\n      activatesOn: Events.Startup,\n      activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n      activatesAfter: [Events.AppGraphReady],\n      activate: lazy(() => import('./graph')),\n    }),\n  ]);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,yBAAc;ACAd,2BAAyD;AASlD,IAAMA,cAAc,UACzBC,mCAAaC,4BAAM;MACjBC,mCAAa;IACXC,IAAI,GAAGF,2BAAKE,EAAE;IACdC,aAAaC,4BAAOC;IACpBC,iBAAiB;MAACF,4BAAOG;MAAeH,4BAAOI;;IAC/CC,gBAAgB;MAACL,4BAAOM;;IACxBC,cAAUC,2BAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;",
-  "names": ["GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy"]
+  "sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts", "../../../src/hooks/useNode.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './hooks';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n  definePlugin(meta, [\n    defineModule({\n      id: `${meta.id}/module/graph`,\n      activatesOn: Events.Startup,\n      activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n      activatesAfter: [Events.AppGraphReady],\n      activate: lazy(() => import('./graph')),\n    }),\n  ]);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Graph, type Node } from '@dxos/app-graph';\n\n/**\n * React hook to get a node from the graph.\n *\n * @param graph Graph to find the node in.\n * @param id Id of the node to find.\n * @param timeout Optional timeout in milliseconds to wait for the node to be found.\n * @returns Node if found, undefined otherwise.\n */\n// TODO(wittjosiah): Factor out?\nexport const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {\n  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);\n\n  useEffect(() => {\n    if (!id && nodeState) {\n      setNodeState(undefined);\n    }\n\n    if (nodeState?.id === id || !id) {\n      return;\n    }\n\n    // Set timeout did not seem to effectively not block the UI thread.\n    const frame = requestAnimationFrame(async () => {\n      try {\n        const node = await graph.waitForNode(id, timeout);\n        if (node) {\n          setNodeState(node);\n        }\n      } catch {\n        // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.\n      }\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [graph, id, timeout, nodeState?.id]);\n\n  return nodeState;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,yBAAc;ACAd,2BAAyD;ACAzD,mBAAoC;ADS7B,IAAMA,cAAc,UACzBC,mCAAaC,4BAAM;MACjBC,mCAAa;IACXC,IAAI,GAAGF,2BAAKE,EAAE;IACdC,aAAaC,4BAAOC;IACpBC,iBAAiB;MAACF,4BAAOG;MAAeH,4BAAOI;;IAC/CC,gBAAgB;MAACL,4BAAOM;;IACxBC,cAAUC,2BAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;ACLI,IAAMC,UAAU,CAAUC,OAAcZ,IAAaa,YAAAA;AAC1D,QAAM,CAACC,WAAWC,YAAAA,QAAgBC,uBAA8BhB,KAAKY,MAAMK,SAASjB,IAAI,KAAA,IAASkB,MAAAA;AAEjGC,8BAAU,MAAA;AACR,QAAI,CAACnB,MAAMc,WAAW;AACpBC,mBAAaG,MAAAA;IACf;AAEA,QAAIJ,WAAWd,OAAOA,MAAM,CAACA,IAAI;AAC/B;IACF;AAGA,UAAMoB,QAAQC,sBAAsB,YAAA;AAClC,UAAI;AACF,cAAMC,OAAO,MAAMV,MAAMW,YAAYvB,IAAIa,OAAAA;AACzC,YAAIS,MAAM;AACRP,uBAAaO,IAAAA;QACf;MACF,QAAQ;MAER;IACF,CAAA;AAEA,WAAO,MAAME,qBAAqBJ,KAAAA;EACpC,GAAG;IAACR;IAAOZ;IAAIa;IAASC,WAAWd;GAAG;AAEtC,SAAOc;AACT;",
+  "names": ["GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy", "useNode", "graph", "timeout", "nodeState", "setNodeState", "useState", "findNode", "undefined", "useEffect", "frame", "requestAnimationFrame", "node", "waitForNode", "cancelAnimationFrame"]
 }

package/dist/lib/node/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":891,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":697,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1499},"packages/plugins/plugin-graph/dist/lib/node/index.cjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node/chunk-KHIPMH35.cjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/node/graph-AOAAITHV.cjs","kind":"dynamic-import"}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417}},"bytes":698},"packages/plugins/plugin-graph/dist/lib/node/graph-AOAAITHV.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3429},"packages/plugins/plugin-graph/dist/lib/node/graph-AOAAITHV.cjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node/chunk-KHIPMH35.cjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1516},"packages/plugins/plugin-graph/dist/lib/node/chunk-KHIPMH35.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":418},"packages/plugins/plugin-graph/dist/lib/node/chunk-KHIPMH35.cjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":79}},"bytes":204}}}
+{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytes":4473,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytes":506,"imports":[{"path":"packages/plugins/plugin-graph/src/hooks/useNode.ts","kind":"import-statement","original":"./useNode"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":778,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3652},"packages/plugins/plugin-graph/dist/lib/node/index.cjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/node/graph-GCGIYOGJ.cjs","kind":"dynamic-import"},{"path":"react","kind":"import-statement","external":true}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta","useNode"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytesInOutput":662},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytesInOutput":0}},"bytes":1426},"packages/plugins/plugin-graph/dist/lib/node/graph-GCGIYOGJ.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3429},"packages/plugins/plugin-graph/dist/lib/node/graph-GCGIYOGJ.cjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1516},"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":447},"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":96}},"bytes":221}}}

package/dist/lib/node-esm/{chunk-IHM26RSC.mjs → chunk-RJQY6JZL.mjs}

@@ -3,11 +3,12 @@ import { createRequire } from 'node:module';const require = createRequire(import
 // packages/plugins/plugin-graph/src/meta.ts
 var GRAPH_PLUGIN = "dxos.org/plugin/graph";
 var meta = {
-  id: GRAPH_PLUGIN
+  id: GRAPH_PLUGIN,
+  name: "Graph"
 };
 
 export {
   GRAPH_PLUGIN,
   meta
 };
-//# sourceMappingURL=chunk-IHM26RSC.mjs.map
+//# sourceMappingURL=chunk-RJQY6JZL.mjs.map

package/dist/lib/node-esm/chunk-RJQY6JZL.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const GRAPH_PLUGIN = 'dxos.org/plugin/graph';\n\nexport const meta: PluginMeta = {\n  id: GRAPH_PLUGIN,\n  name: 'Graph',\n};\n"],
+  "mappings": ";;;AAMO,IAAMA,eAAe;AAErB,IAAMC,OAAmB;EAC9BC,IAAIF;EACJG,MAAM;AACR;",
+  "names": ["GRAPH_PLUGIN", "meta", "id", "name"]
+}

package/dist/lib/node-esm/{graph-VC422POI.mjs → graph-NUZMWBDN.mjs}

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
   GRAPH_PLUGIN
-} from "./chunk-IHM26RSC.mjs";
+} from "./chunk-RJQY6JZL.mjs";
 
 // packages/plugins/plugin-graph/src/graph.ts
 import { batch, effect, untracked } from "@preact/signals-core";
@@ -40,4 +40,4 @@ var setupDevtools = (graph) => {
 export {
   graph_default as default
 };
-//# sourceMappingURL=graph-VC422POI.mjs.map
+//# sourceMappingURL=graph-NUZMWBDN.mjs.map

package/dist/lib/node-esm/index.mjs

@@ -2,7 +2,7 @@ import { createRequire } from 'node:module';const require = createRequire(import
 import {
   GRAPH_PLUGIN,
   meta
-} from "./chunk-IHM26RSC.mjs";
+} from "./chunk-RJQY6JZL.mjs";
 
 // packages/plugins/plugin-graph/src/index.ts
 export * from "@dxos/app-graph";
@@ -20,12 +20,43 @@ var GraphPlugin = () => definePlugin(meta, [
     activatesAfter: [
       Events.AppGraphReady
     ],
-    activate: lazy(() => import("./graph-VC422POI.mjs"))
+    activate: lazy(() => import("./graph-NUZMWBDN.mjs"))
   })
 ]);
+
+// packages/plugins/plugin-graph/src/hooks/useNode.ts
+import { useEffect, useState } from "react";
+var useNode = (graph, id, timeout) => {
+  const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
+  useEffect(() => {
+    if (!id && nodeState) {
+      setNodeState(void 0);
+    }
+    if (nodeState?.id === id || !id) {
+      return;
+    }
+    const frame = requestAnimationFrame(async () => {
+      try {
+        const node = await graph.waitForNode(id, timeout);
+        if (node) {
+          setNodeState(node);
+        }
+      } catch {
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    graph,
+    id,
+    timeout,
+    nodeState?.id
+  ]);
+  return nodeState;
+};
 export {
   GRAPH_PLUGIN,
   GraphPlugin,
-  meta
+  meta,
+  useNode
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/node-esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n  definePlugin(meta, [\n    defineModule({\n      id: `${meta.id}/module/graph`,\n      activatesOn: Events.Startup,\n      activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n      activatesAfter: [Events.AppGraphReady],\n      activate: lazy(() => import('./graph')),\n    }),\n  ]);\n"],
-  "mappings": ";;;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;",
-  "names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy"]
+  "sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts", "../../../src/hooks/useNode.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './hooks';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n  definePlugin(meta, [\n    defineModule({\n      id: `${meta.id}/module/graph`,\n      activatesOn: Events.Startup,\n      activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n      activatesAfter: [Events.AppGraphReady],\n      activate: lazy(() => import('./graph')),\n    }),\n  ]);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Graph, type Node } from '@dxos/app-graph';\n\n/**\n * React hook to get a node from the graph.\n *\n * @param graph Graph to find the node in.\n * @param id Id of the node to find.\n * @param timeout Optional timeout in milliseconds to wait for the node to be found.\n * @returns Node if found, undefined otherwise.\n */\n// TODO(wittjosiah): Factor out?\nexport const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {\n  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);\n\n  useEffect(() => {\n    if (!id && nodeState) {\n      setNodeState(undefined);\n    }\n\n    if (nodeState?.id === id || !id) {\n      return;\n    }\n\n    // Set timeout did not seem to effectively not block the UI thread.\n    const frame = requestAnimationFrame(async () => {\n      try {\n        const node = await graph.waitForNode(id, timeout);\n        if (node) {\n          setNodeState(node);\n        }\n      } catch {\n        // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.\n      }\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [graph, id, timeout, nodeState?.id]);\n\n  return nodeState;\n};\n"],
+  "mappings": ";;;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;;;AClBH,SAASC,WAAWC,gBAAgB;AAa7B,IAAMC,UAAU,CAAUC,OAAcC,IAAaC,YAAAA;AAC1D,QAAM,CAACC,WAAWC,YAAAA,IAAgBC,SAA8BJ,KAAKD,MAAMM,SAASL,IAAI,KAAA,IAASM,MAAAA;AAEjGC,YAAU,MAAA;AACR,QAAI,CAACP,MAAME,WAAW;AACpBC,mBAAaG,MAAAA;IACf;AAEA,QAAIJ,WAAWF,OAAOA,MAAM,CAACA,IAAI;AAC/B;IACF;AAGA,UAAMQ,QAAQC,sBAAsB,YAAA;AAClC,UAAI;AACF,cAAMC,OAAO,MAAMX,MAAMY,YAAYX,IAAIC,OAAAA;AACzC,YAAIS,MAAM;AACRP,uBAAaO,IAAAA;QACf;MACF,QAAQ;MAER;IACF,CAAA;AAEA,WAAO,MAAME,qBAAqBJ,KAAAA;EACpC,GAAG;IAACT;IAAOC;IAAIC;IAASC,WAAWF;GAAG;AAEtC,SAAOE;AACT;",
+  "names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy", "useEffect", "useState", "useNode", "graph", "id", "timeout", "nodeState", "setNodeState", "useState", "findNode", "undefined", "useEffect", "frame", "requestAnimationFrame", "node", "waitForNode", "cancelAnimationFrame"]
 }

package/dist/lib/node-esm/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":891,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":697,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1500},"packages/plugins/plugin-graph/dist/lib/node-esm/index.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-IHM26RSC.mjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/graph-VC422POI.mjs","kind":"dynamic-import"}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417}},"bytes":790},"packages/plugins/plugin-graph/dist/lib/node-esm/graph-VC422POI.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3430},"packages/plugins/plugin-graph/dist/lib/node-esm/graph-VC422POI.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-IHM26RSC.mjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1608},"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-IHM26RSC.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":420},"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-IHM26RSC.mjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":79}},"bytes":297}}}
+{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytes":4473,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytes":506,"imports":[{"path":"packages/plugins/plugin-graph/src/hooks/useNode.ts","kind":"import-statement","original":"./useNode"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":778,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3653},"packages/plugins/plugin-graph/dist/lib/node-esm/index.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/graph-NUZMWBDN.mjs","kind":"dynamic-import"},{"path":"react","kind":"import-statement","external":true}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta","useNode"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytesInOutput":662},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytesInOutput":0}},"bytes":1518},"packages/plugins/plugin-graph/dist/lib/node-esm/graph-NUZMWBDN.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3430},"packages/plugins/plugin-graph/dist/lib/node-esm/graph-NUZMWBDN.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1608},"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":449},"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":96}},"bytes":314}}}

package/dist/types/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useNode';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/types/src/hooks/useNode.d.ts

@@ -0,0 +1,11 @@
+import { type Graph, type Node } from '@dxos/app-graph';
+/**
+ * React hook to get a node from the graph.
+ *
+ * @param graph Graph to find the node in.
+ * @param id Id of the node to find.
+ * @param timeout Optional timeout in milliseconds to wait for the node to be found.
+ * @returns Node if found, undefined otherwise.
+ */
+export declare const useNode: <T = any>(graph: Graph, id?: string, timeout?: number) => Node<T> | undefined;
+//# sourceMappingURL=useNode.d.ts.map

package/dist/types/src/hooks/useNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNode.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useNode.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAExD;;;;;;;GAOG;AAEH,eAAO,MAAM,OAAO,GAAI,CAAC,eAAe,KAAK,OAAO,MAAM,YAAY,MAAM,KAAG,IAAI,CAAC,CAAC,CAAC,GAAG,SA4BxF,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@dxos/app-graph';
 export * from './GraphPlugin';
+export * from './hooks';
 export * from './meta';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/types/src/meta.d.ts

@@ -1,5 +1,4 @@
+import { type PluginMeta } from '@dxos/app-framework';
 export declare const GRAPH_PLUGIN = "dxos.org/plugin/graph";
-export declare const meta: {
-    id: string;
-};
+export declare const meta: PluginMeta;
 //# sourceMappingURL=meta.d.ts.map

package/dist/types/src/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,0BAA0B,CAAC;AAEpD,eAAO,MAAM,IAAI;;CAEK,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,eAAO,MAAM,YAAY,0BAA0B,CAAC;AAEpD,eAAO,MAAM,IAAI,EAAE,UAGlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-graph",
-  "version": "0.8.1-staging.391c573",
+  "version": "0.8.1-staging.9eaf14f",
   "description": "DXOS Surface plugin for constructing knowledge graphs",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,10 +25,10 @@
   ],
   "dependencies": {
     "@preact/signals-core": "^1.6.0",
-    "@dxos/app-framework": "0.8.1-staging.391c573",
-    "@dxos/async": "0.8.1-staging.391c573",
-    "@dxos/debug": "0.8.1-staging.391c573",
-    "@dxos/app-graph": "0.8.1-staging.391c573"
+    "@dxos/app-framework": "0.8.1-staging.9eaf14f",
+    "@dxos/app-graph": "0.8.1-staging.9eaf14f",
+    "@dxos/debug": "0.8.1-staging.9eaf14f",
+    "@dxos/async": "0.8.1-staging.9eaf14f"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -36,8 +36,8 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-client": "0.8.1-staging.391c573",
-    "@dxos/storybook-utils": "0.8.1-staging.391c573"
+    "@dxos/react-client": "0.8.1-staging.9eaf14f",
+    "@dxos/storybook-utils": "0.8.1-staging.9eaf14f"
   },
   "peerDependencies": {
     "react": "~18.2.0",

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './useNode';

package/src/hooks/useNode.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Graph, type Node } from '@dxos/app-graph';
+
+/**
+ * React hook to get a node from the graph.
+ *
+ * @param graph Graph to find the node in.
+ * @param id Id of the node to find.
+ * @param timeout Optional timeout in milliseconds to wait for the node to be found.
+ * @returns Node if found, undefined otherwise.
+ */
+// TODO(wittjosiah): Factor out?
+export const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {
+  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);
+
+  useEffect(() => {
+    if (!id && nodeState) {
+      setNodeState(undefined);
+    }
+
+    if (nodeState?.id === id || !id) {
+      return;
+    }
+
+    // Set timeout did not seem to effectively not block the UI thread.
+    const frame = requestAnimationFrame(async () => {
+      try {
+        const node = await graph.waitForNode(id, timeout);
+        if (node) {
+          setNodeState(node);
+        }
+      } catch {
+        // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.
+      }
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [graph, id, timeout, nodeState?.id]);
+
+  return nodeState;
+};

package/src/index.ts

@@ -5,4 +5,5 @@
 export * from '@dxos/app-graph';
 
 export * from './GraphPlugin';
+export * from './hooks';
 export * from './meta';

package/src/meta.ts

@@ -6,6 +6,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const GRAPH_PLUGIN = 'dxos.org/plugin/graph';
 
-export const meta = {
+export const meta: PluginMeta = {
   id: GRAPH_PLUGIN,
-} satisfies PluginMeta;
+  name: 'Graph',
+};

package/dist/lib/browser/chunk-7LNMG3EB.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const GRAPH_PLUGIN = 'dxos.org/plugin/graph';\n\nexport const meta = {\n  id: GRAPH_PLUGIN,\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,eAAe;AAErB,IAAMC,OAAO;EAClBC,IAAIF;AACN;",
-  "names": ["GRAPH_PLUGIN", "meta", "id"]
-}

package/dist/lib/node-esm/chunk-IHM26RSC.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const GRAPH_PLUGIN = 'dxos.org/plugin/graph';\n\nexport const meta = {\n  id: GRAPH_PLUGIN,\n} satisfies PluginMeta;\n"],
-  "mappings": ";;;AAMO,IAAMA,eAAe;AAErB,IAAMC,OAAO;EAClBC,IAAIF;AACN;",
-  "names": ["GRAPH_PLUGIN", "meta", "id"]
-}