@powerhousedao/reactor-browser 5.1.0-staging.0 → 5.1.0

package/README.md

@@ -1,492 +1,692 @@
-# Reactor Browser Hooks API Documentation
+# Editor state management hooks
 
-This document contains all documentation comments for the hooks exported from `packages/reactor-browser/src/hooks/index.ts`.
+This library provides hooks intended to be used by editors (including drive editors) which will be rendered inside of Powerhouse applications such as Connect and Vetra.
 
-## Table of Contents
+## Key concepts
 
-- [Allowed Document Model Modules](#allowed-document-model-modules)
-- [Child Nodes](#child-nodes)
-- [Config: Editor](#config-editor)
-- [Config: Set Config by Object](#config-set-config-by-object)
-- [Config: Use Value by Key](#config-use-value-by-key)
-- [Document by ID](#document-by-id)
-- [Document Cache](#document-cache)
-- [Document of Type](#document-of-type)
-- [Document Types](#document-types)
-- [Drives](#drives)
-- [Items in Selected Drive](#items-in-selected-drive)
-- [Items in Selected Folder](#items-in-selected-folder)
-- [Modals](#modals)
-- [Node by ID](#node-by-id)
-- [Node Path](#node-path)
-- [Revision History](#revision-history)
-- [Selected Document](#selected-document)
-- [Selected Drive](#selected-drive)
-- [Selected Folder](#selected-folder)
-- [Selected Node](#selected-node)
-- [Selected Timeline Item](#selected-timeline-item)
-- [Supported Document Types](#supported-document-types)
-- [Timeline Revision](#timeline-revision)
-- [Use Get Switchboard Link](#use-get-switchboard-link)
-- [Vetra Packages](#vetra-packages)
+### Reactor
 
----
+All of the data used by these hooks is ultimately derived from the `Reactor`, which manages the asynchronous eventually consistent state of drives and documents.
 
-## Allowed Document Model Modules
+### Selected drives, folders and documents
 
-### `useAllowedDocumentModelModules`
+In the application, there are certain items that can be set as "selected".
 
-No documentation available.
+- selected drive
+- selected folder
+- selected document
 
----
+We provide hooks for getting the selected item for each:
 
-## Child Nodes
+`useSelectedDrive`
+`useSelectedFolder`
+`useSelectedDocument`
 
-### `useNodesInSelectedDriveOrFolder`
+Folders and documents are part of a given drive, so they will both be undefined if the selected drive is undefined.
 
-Returns the child nodes for the selected drive or folder.
-
----
-
-## Document by ID
-
-### `useDocumentById`
-
-Returns a document by id.
-
-### `useDocumentsByIds`
-
-Returns documents by ids.
-
----
-
-## Document Cache
-
-### `useDocumentCache`
+_Either_ a folder or a document can be selected but not both, so if one is defined then the other will be undefined.
 
-Returns all documents in the reactor.
+To set the selected drive, we provide a function `setSelectedDrive` which takes either a `DocumentDriveDocument` or a `DocumentDriveDocument['header']['slug']`.
 
-### `setDocumentCache`
+To set the selected document/folder, we provide a function `setSelectedNode` which returns a setter function which can be used for _both_ documents and folders. This function takes either a `Node` or a slug which can be the url slug or the node's id.
 
-Sets all of the documents in the reactor.
+## Hooks
 
-### `addDocumentCacheEventHandler`
+### Reactor
 
-Adds an event handler for all of the documents in the reactor.
+```ts
+function useReactor(): Reactor | undefined;
+```
 
-### `useGetDocument`
+Returns the reactor instance.
 
-Retrieves a document from the reactor and subscribes to changes using React Suspense.
-This hook will suspend rendering while the document is loading.
+##### Usage
 
-**Parameters:**
-- `id` - The document ID to retrieve, or null/undefined to skip retrieval
+```jsx
+import { useReactor } from '@powerhousedao/state`
 
-**Returns:** The document if found, or undefined if id is null/undefined
+function MyEditorComponent() {
+  const reactor = useReactor();
+}
+```
 
-### `useGetDocuments`
+### Drives
 
-Retrieves multiple documents from the reactor using React Suspense.
-This hook will suspend rendering while any of the documents are loading.
+#### useDrives
 
-**Parameters:**
-- `ids` - Array of document IDs to retrieve, or null/undefined to skip retrieval
+```ts
+function useDrives(): DocumentDriveDocument[] | undefined;
+```
 
-**Returns:** An array of documents if found, or undefined if ids is null/undefined
+Returns the drives for a reactor.
 
-### `useGetDocumentAsync`
+##### Usage
 
-Retrieves a document from the reactor without suspending rendering.
-Returns the current state of the document loading operation.
+```jsx
+import { useDrives } from "@powerhousedao/state";
 
-**Parameters:**
-- `id` - The document ID to retrieve, or null/undefined to skip retrieval
+function MyEditorComponent() {
+  const drives = useDrives();
+}
+```
 
-**Returns:** An object containing:
-- `status`: "initial" | "pending" | "success" | "error"
-- `data`: The document if successfully loaded
-- `isPending`: Boolean indicating if the document is currently loading
-- `error`: Any error that occurred during loading
-- `reload`: Function to force reload the document from cache
+#### useDriveById
 
----
+```ts
+function useDriveById(
+  id: string | null | undefined,
+): DocumentDriveDocument | undefined;
+```
 
-## Document of Type
+Returns a drive by id.
 
-### `useDocumentOfType`
+##### Usage
 
-Returns a document of a specific type, throws an error if the found document has a different type.
+```jsx
+import { useDriveById } from "@powerhousedao/state";
 
----
+function MyEditorComponent() {
+  const driveById = useDriveById();
+}
+```
 
-## Document Types
+#### useSelectedDrive
 
-### `useDocumentTypes`
+```ts
+function useSelectedDrive(): DocumentDriveDocument | undefined;
+```
 
-Returns the document types a drive editor supports.
+Returns the selected drive. You can se the selected drive with `setSelectedDrive`.
 
-If present, uses the `allowedDocumentTypes` config value.
-Otherwise, uses the supported document types from the reactor.
+##### Usage
 
----
+```jsx
+import { useSelectedDrive } from "@powerhousedao/state";
 
-## Drives
+function MyEditorComponent() {
+  const selectedDrive = useSelectedDrive();
+}
+```
 
-### `useDrives`
+#### drive properties convenience hooks
 
-Returns all of the drives in the reactor.
+We provide hooks for accessing various properties on the drive object for your convenience. These use the above hooks to get a drive and then return properties in the object.
 
-### `setDrives`
+```ts
+/** Returns the remote URL for a drive. */
+function useDriveRemoteUrl(
+  driveId: string | null | undefined,
+): string | undefined;
 
-Sets the drives in the reactor.
+/** Returns the pull responder trigger for a drive. */
+function useDrivePullResponderTrigger(
+  driveId: string | null | undefined,
+): Trigger | undefined;
 
-### `addDrivesEventHandler`
+/** Returns the pull responder URL for a drive. */
+function useDrivePullResponderUrl(
+  driveId: string | null | undefined,
+): string | undefined;
 
-Adds an event handler for the drives.
+/** Returns whether a drive is remote. */
+function useDriveIsRemote(driveId: string | null | undefined): boolean;
 
----
+/** Returns the sharing type for a drive. */
+function useDriveSharingType(
+  driveId: string | null | undefined,
+): SharingType | undefined;
 
-## Items in Selected Drive
+/** Returns  whether a drive is available offline. */
+function useDriveAvailableOffline(driveId: string | null | undefined): boolean;
+```
 
-### `useNodesInSelectedDrive`
+##### Usage
 
-Returns the nodes in the selected drive.
+```jsx
+import {
+  useDriveRemoteUrl,
+  useDrivePullResponderTrigger,
+  useDrivePullResponderUrl,
+  useDriveIsRemote,
+  useDriveSharingType,
+  useDriveAvailableOffline,
+} from "@powerhousedao/state";
 
-### `useFileNodesInSelectedDrive`
+function MyEditorComponent() {
+  const myDriveId = "some-drive-id";
+  const driveRemoteUrl = useDriveRemoteUrl(myDriveId);
+  const drivePullResponderTrigger = useDrivePullResponderTrigger(myDriveId);
+  const drivePullResponderUrl = useDrivePullResponderUrl(myDriveId);
+  const driveIsRemote = useDriveIsRemote(myDriveId);
+  const driveSharingType = useDriveSharingType(myDriveId);
+  const driveAvailableOffline = useDriveAvailableOffline(myDriveId);
 
-Returns the file nodes in the selected drive.
+  console.log({
+    driveRemoteUrl,
+    drivePullResponderTrigger,
+    drivePullResponderUrl,
+    driveIsRemote,
+    driveSharingType,
+    driveAvailableOffline,
+  });
+}
+```
 
-### `useFolderNodesInSelectedDrive`
+### Documents
 
-Returns the folder nodes in the selected drive.
+#### useDocumentById
 
-### `useDocumentsInSelectedDrive`
+```ts
+function useDocumentById(id: string | null | undefined): PHDocument | undefined;
+```
 
-Returns the documents in the selected drive.
+Returns a document and a dispatch function by id.
 
-### `useDocumentTypesInSelectedDrive`
+##### Usage
 
-Returns the document types supported by the selected drive, as defined by the document model documents present in the drive.
+```jsx
+import { useDocumentById } from "@powerhousedao/state";
 
----
+function MyEditorComponent() {
+  const myDocumentId = "some-document-id";
+  const [document, dispatch] = useDocumentById(myDocumentId);
+}
+```
 
-## Items in Selected Folder
+#### useGetDocument
 
-### `useNodesInSelectedFolder`
+```ts
+function useGetDocument(id: string | null | undefined): PHDocument | undefined;
+```
 
-Returns the nodes in the selected folder.
+Retrieves a document from the reactor and subscribes to changes using React Suspense. This hook will suspend rendering while the document is loading.
 
-### `useFileNodesInSelectedFolder`
+##### Usage
 
-Returns the file nodes in the selected folder.
+```jsx
+import { useGetDocument } from "@powerhousedao/state";
 
-### `useFolderNodesInSelectedFolder`
+function MyEditorComponent() {
+  const documentId = "some-document-id";
+  const document = useGetDocument(documentId);
+}
+```
 
-Returns the folder nodes in the selected folder.
+#### useGetDocuments
 
-### `useDocumentsInSelectedFolder`
+```ts
+function useGetDocuments(
+  ids: string[] | null | undefined,
+): PHDocument[] | undefined;
+```
 
-Returns the documents in the selected folder.
+Retrieves multiple documents from the reactor using React Suspense. This hook will suspend rendering while any of the documents are loading.
 
----
+##### Usage
 
-## Modals
+```jsx
+import { useGetDocuments } from "@powerhousedao/state";
 
-### `usePHModal`
+function MyEditorComponent() {
+  const documentIds = ["doc-id-1", "doc-id-2", "doc-id-3"];
+  const documents = useGetDocuments(documentIds);
+}
+```
 
-Returns the current modal.
+#### useGetDocumentAsync
 
-### `setPHModal`
+```ts
+function useGetDocumentAsync(id: string | null | undefined): {
+  status: "initial" | "pending" | "success" | "error";
+  data: PHDocument | undefined;
+  isPending: boolean;
+  error: unknown;
+  reload: (() => void) | undefined;
+};
+```
 
-Sets the current modal.
+Retrieves a document from the reactor without suspending rendering. Returns the current state of the document loading operation, including status, data, error, and a reload function.
 
-### `addModalEventHandler`
+##### Usage
 
-Adds an event handler for the modal.
+```jsx
+import { useGetDocumentAsync } from "@powerhousedao/state";
 
-### `showPHModal`
+function MyEditorComponent() {
+  const documentId = "some-document-id";
+  const { status, data, isPending, error, reload } =
+    useGetDocumentAsync(documentId);
 
-Shows a modal.
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
 
-### `closePHModal`
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
 
-Closes the current modal.
+  if (status === "success" && data) {
+    return <div>Document: {data.name}</div>;
+  }
+}
+```
 
-### `showCreateDocumentModal`
+#### useDocumentsInSelectedDrive
 
-Shows the create document modal.
+```ts
+function useDocumentsInSelectedDrive(): PHDocument[] | undefined;
+```
 
-### `showDeleteNodeModal`
+Returns the documents in the reactor for the selected drive.
 
-Shows the delete node modal.
+##### Usage
 
----
+```jsx
+import { useDocumentsInSelectedDrive } from "@powerhousedao/state";
 
-## Node by ID
+function MyEditorComponent() {
+  const selectedDriveDocuments = useDocumentsInSelectedDrive();
+}
+```
 
-### `useNodeById`
+#### useSelectedDocument
 
-Returns a node in the selected drive by id.
-
----
-
-## Node Path
-
-### `useNodePathById`
-
-Returns the path to a node in the selected drive.
+```ts
+function useSelectedDocument(): PHDocument | undefined;
+```
 
-### `useSelectedNodePath`
+Returns the selected document. You can set the selected document with `setSelectedNode`.
 
-Returns the path to the currently selected node in the selected drive.
+##### Usage
 
----
+```jsx
+import { useSelectedDocument } from "@powerhousedao/state";
 
-## Revision History
+function MyEditorComponent() {
+  const selectedDocument = useSelectedDocument();
+}
+```
 
-### `useRevisionHistoryVisible`
+### Nodes
 
-Returns whether revision history is visible.
+"Nodes" refers to the items found in a given drive's `state.global.nodes` array. Nodes can represent both files (documents) and folders.
 
-### `setRevisionHistoryVisible`
+A document in a drive will have a node in the drive's node list which has the same id as the document.
 
-Sets revision history visibility.
+Nodes have an optional `parentFolder` field, which is the id of a folder node in the drive when it is defined. If it is undefined, the node is a direct child of the drive.
 
-### `addRevisionHistoryVisibleEventHandler`
+A given folder node's children are the nodes in the drive's node list which have their parent folder set to the folder node's id.
 
-Adds event handler for revision history visibility.
+```ts
+type FileNode = {
+  documentType: string;
+  id: string;
+  kind: string;
+  name: string;
+  parentFolder: string | null | undefined;
+};
 
-### `showRevisionHistory`
+type FolderNode = {
+  id: string;
+  kind: string;
+  name: string;
+  parentFolder: string | null | undefined;
+};
 
-Shows the revision history.
+type Node = FileNode | FolderNode;
+```
 
-### `hideRevisionHistory`
+#### useNodes
 
-Hides the revision history.
+Ideally you should not need to handle the list of nodes directly, since we already provide documents and folders. But these hooks are provided just in case.
 
----
+```ts
+function useNodes(): Node[] | undefined;
+```
 
-## Selected Document
+Returns the nodes for a drive.
 
-### `useSelectedDocumentId`
+##### Usage
 
-Returns the selected document id.
+```jsx
+import { useNodes } from "@powerhousedao/state";
 
-### `useSelectedDocument`
+function MyEditorComponent() {
+  const nodes = useNodes();
+}
+```
 
-Returns the selected document.
+#### useNodeById
 
-### `useSelectedDocumentOfType`
+```ts
+function useNodeById(id: string | null | undefined): Node | undefined;
+```
 
-Returns the selected document of a specific type, throws an error if the found document has a different type.
-
----
-
-## Selected Drive
-
-### `useSelectedDriveId`
+Returns a node in the selected drive by id.
 
-Returns the selected drive id.
+##### Usage
 
-### `setSelectedDriveId`
+```jsx
+import { useNodeById } from "@powerhousedao/state";
 
-Sets the selected drive id.
+function MyEditorComponent() {
+  const myFolderId = "some-folder-id";
+  const myDocumentId = "some-document-id";
+  const myFolderNode = useNodeById(myFolderId);
+  const myFileNode = useNodeById(myDocumentId);
+}
+```
 
-### `addSelectedDriveIdEventHandler`
+#### useSelectedFolder
 
-Adds an event handler for the selected drive id.
+```ts
+function useSelectedFolder(): FolderNode | undefined;
+```
 
-### `useSelectedDrive`
+Returns the selected folder. You can set the selected folder with `setSelectedNode`
 
-Returns the selected drive.
+##### Usage
 
-### `useSelectedDriveSafe`
+```jsx
+import { useSelectedFolder } from "@powerhousedao/state";
 
-Returns the selected drive, or undefined if no drive is selected.
+function MyEditorComponent() {
+  const selectedFolder = useSelectedFolder();
+}
+```
 
----
+#### useSelectedNodePath
 
-## Selected Folder
+```ts
+function useSelectedNodePath(): Node[];
+```
 
-### `useSelectedFolder`
+Returns the path to the selected node. Useful for navigational components like breadcrumbs.
 
-Returns the selected folder.
+##### Usage
 
----
+```jsx
+import { useSelectedNodePath } from '@powerhousedao/state';
 
-## Selected Node
+function MyEditorComponent() {
+  const nodes = useSelectedNodePath();
 
-### `useSelectedNode`
+  return <Breadcrumbs nodes={nodes}>
+}
+```
 
-Returns the selected node.
+#### useChildNodes/useFolderChildNodes/useFileChildNodes
 
-### `setSelectedNode`
+```ts
+function useChildNodes(): Node[];
+```
 
-Sets the selected node (file or folder).
+Returns the child nodes for the selected drive or folder.
 
----
+```ts
+function useFolderChildNodes(): FolderNode[];
+```
 
-## Selected Timeline Item
+Returns the folder child nodes for the selected drive or folder.
 
-### `useSelectedTimelineItem`
+```ts
+function useFileChildNodes(): FileNode[];
+```
 
-Returns the selected timeline item.
+Returns the file (document) child nodes for the selected drive or folder.
 
-### `setSelectedTimelineItem`
+##### Usage
 
-Sets the selected timeline item.
+```jsx
+import { useChildNodes, useFolderChildNodes, useFileChildNodes } from '@powerhousedao/state';
 
-### `addSelectedTimelineItemEventHandler`
+function MyEditorComponent() {
+  const nodes = useChildNodes();
+  const fileNodes = useChildFileNodes();
+  const folderNodes = useChildFolderNodes();
 
-Adds event handler for selected timeline item.
+  return (
+    <div>
+     <FilesAndFolders nodes={nodes}>
+     <Files fileNodes={fileNodes}>
+     <Folders folderNodes={folderNodes}>
+    </div>
+ )
+}
+```
 
----
+#### useChildNodesForId/useFolderChildNodesForId/useFileChildNodesForId
 
-## Supported Document Types
+```ts
+function useChildNodesForId(id: string | null | undefined): Node[];
+```
 
-### `useSupportedDocumentTypesInReactor`
+Returns the child nodes for a drive or folder by id.
 
-Returns the supported document types for the reactor (derived from the document model modules).
+```ts
+function useFolderChildNodesForId(id: string | null | undefined): FolderNode[];
+```
 
----
+Returns the folder child nodes for a drive or folder by id.
 
-## Timeline Revision
+```ts
+function useFileChildNodesForId(id: string | null | undefined): FileNode[];
+```
 
-### `useSelectedTimelineRevision`
+Returns the file (document) child nodes for a drive or folder by id.
 
-Returns the selected timeline revision.
+##### Usage
 
-### `setSelectedTimelineRevision`
+```jsx
+import { useChildNodesForId, useFolderChildNodesForId, useFileChildNodesForId } from '@powerhousedao/state';
 
-Sets the selected timeline revision.
+function MyEditorComponent() {
+  const driveOrFolderId = 'some-drive-or-folder-id';
+  const nodes = useChildNodesForId(driveOrFolderId);
+  const fileNodes = useFileChildNodesForId(driveOrFolderId);
+  const folderNodes = useFolderChildNodesForId(driveOrFolderId);
 
-### `addSelectedTimelineRevisionEventHandler`
+  return (
+    <div>
+     <FilesAndFolders nodes={nodes}>
+     <Files fileNodes={fileNodes}>
+     <Folders folderNodes={folderNodes}>
+    </div>
+ )
+}
+```
 
-Adds an event handler for the selected timeline revision.
+#### useNodeName/useNodeKind
 
----
+```ts
+function useNodeName(id: string | null | undefined): string | undefined;
+```
 
-## Use Get Switchboard Link
+Returns the name of a node.
 
-### `useGetSwitchboardLink`
+```ts
+function useNodeKind(id: string | null | undefined): NodeKind | undefined;
+```
 
-Hook that returns a function to generate a document's switchboard URL.
-Only returns a function for documents in remote drives.
-Returns null for local drives or when the document/drive cannot be determined.
+Returns the kind of a node.
 
-The returned function generates a fresh bearer token and builds the switchboard URL
-with authentication when called.
+##### Usage
 
-**Parameters:**
-- `document` - The document to create a switchboard URL generator for
+```jsx
+import { useNodeName, useNodeKind } from "@powerhousedao/state";
 
-**Returns:** An async function that returns the switchboard URL, or null if not applicable
+function MyEditorComponent() {
+  const nodeId = "some-node-id";
+  const nodeName = useNodeName(nodeId);
+  const nodeKind = useNodeKind(nodeId);
 
----
+  if (nodeKind === "file") {
+    return <File name={nodeName} />;
+  }
 
-## Vetra Packages
+  if (nodeKind === "folder") {
+    return <Folder name={nodeName} />;
+  }
+}
+```
 
-### `useVetraPackages`
+### Vetra packages and modules
 
-Returns all of the Vetra packages loaded by the Connect instance.
+Vetra packages hold code which can plug into your Connect application. This includes common default modules like the document model document model editor and document drive document model, as well as the modules from your local project and the various packages you have installed.
 
-### `addVetraPackagesEventHandler`
+These modules can be for:
 
-Adds the Vetra packages event handler.
+- document models
+- editors
+- subgraphs
+- import scripts
+- processors
 
-### `setVetraPackages`
+Each Vetra package contains a `modules` field which optionally contains lists of these modules.
 
-Sets the Vetra packages for the Connect instance.
+#### useVetraPackages
 
----
+```ts
+function useVetraPackages(): VetraPackage[] | undefined;
+```
 
+Returns all of the Vetra packages in your Connect app.
 
-## Config: Editor
+##### Usage
 
-### `setIsExternalControlsEnabled`
+```jsx
+import { useVetraPackages } from "@powerhousedao/state";
 
-Sets whether external controls are enabled for a given editor.
+function MyEditorComponent() {
+  const vetraPackages = useVetraPackages();
+}
+```
 
-### `useIsExternalControlsEnabled`
+#### useDocumentModelModules
 
-Gets whether external controls are enabled for a given editor.
+```ts
+function useDocumentModelModules(): DocumentModelModule[] | undefined;
+```
 
-### `addIsExternalControlsEnabledEventHandler`
+Returns the document model modules from your Vetra packages.
 
-Adds an event handler for when the external controls enabled state changes.
+##### Usage
 
-### `setIsDragAndDropEnabled`
+```jsx
+import { useDocumentModelModules } from "@powerhousedao/state";
 
-Sets whether drag and drop is enabled for a given drive editor.
+function MyEditorComponent() {
+  const documentModelModules = useDocumentModelModules();
+}
+```
 
-### `useIsDragAndDropEnabled`
+#### useDocumentModelModuleById
 
-Gets whether drag and drop is enabled for a given drive editor.
+```ts
+function useDocumentModelModuleById(): DocumentModelModule[] | undefined;
+```
 
-### `addIsDragAndDropEnabledEventHandler`
+Returns the document model for a given id (document type).
+_NOTE_ What we call here an id is really the value in the "document type" field in the document model editor
+_NOTE_ Connect assumes that these document types (ids) are unique. It is your responsibility to enforce this.
 
-Adds an event handler for when the drag and drop enabled state changes.
+##### Usage
 
-### `setAllowedDocumentTypes`
+```jsx
+import { useDocumentModelModuleById } from "@powerhousedao/state";
 
-Sets the allowed document types for a given drive editor.
+function MyEditorComponent() {
+  const documentType = "my-org/my-document";
+  const documentModelModuleById = useDocumentModelModuleById(documentType);
+}
+```
 
-### `useAllowedDocumentTypes`
+#### useEditorModules
 
-Defines the document types a drive supports.
+```ts
+function useEditorModules(): EditorModule[] | undefined;
+```
 
-Defaults to all of the document types registered in the reactor.
+Returns the editor modules from your Vetra packages.
 
-### `addAllowedDocumentTypesEventHandler`
+##### Usage
 
-Adds an event handler for when the allowed document types for a given drive editor changes.
+```jsx
+import { useEditorModules } from "@powerhousedao/state";
 
----
+function MyEditorComponent() {
+  const editorModules = useEditorModules();
+}
+```
 
-## Config: Set Config by Object
+#### useDriveEditorModules
 
-### `setPHDriveEditorConfig`
+```ts
+function useDriveEditorModules(): DriveEditorModule[] | undefined;
+```
 
-Sets the global drive config.
+Returns the drive editor modules from your Vetra packages.
 
-Pass in a partial object of the global drive config to set.
+##### Usage
 
-### `setPHDocumentEditorConfig`
+```jsx
+import { useDriveEditorModules } from "@powerhousedao/state";
 
-Sets the global document config.
+function MyDriveEditorComponent() {
+  const driveEditorModules = useDriveEditorModules();
+}
+```
 
-Pass in a partial object of the global document config to set.
+#### useProcessorModules
 
-### `useSetPHDriveEditorConfig`
+```ts
+function useProcessorModules(): ProcessorModule[] | undefined;
+```
 
-Wrapper hook for setting the global drive editor config.
+Returns the processor modules from your Vetra packages.
 
-Automatically sets the global drive editor config when the component mounts.
+##### Usage
 
-Pass in a partial object of the global drive editor config to set.
+```jsx
+import { useProcessorModules } from "@powerhousedao/state";
 
-### `useSetPHDocumentEditorConfig`
+function MyProcessorComponent() {
+  const processorModules = useProcessorModules();
+}
+```
 
-Wrapper hook for setting the global document editor config.
+#### useSubgraphModules
 
-Automatically sets the global document editor config when the component mounts.
+```ts
+function useSubgraphModules(): SubgraphModule[] | undefined;
+```
 
-Pass in a partial object of the global document editor config to set.
+Returns the subgraph modules from your Vetra packages.
 
----
+##### Usage
 
-## Config: Use Value by Key
+```jsx
+import { useSubgraphModules } from "@powerhousedao/state";
 
-### `usePHDriveEditorConfigByKey`
+function MySubgraphComponent() {
+  const subgraphModules = useSubgraphModules();
+}
+```
 
-Gets the value of an item in the global drive config for a given key.
+#### useImportScriptModules
 
-Strongly typed, inferred from type definition for the key.
+```ts
+function useImportScriptModules(): ImportScriptModule[] | undefined;
+```
 
-### `usePHDocumentEditorConfigByKey`
+Returns the import script modules from your Vetra packages.
 
-Gets the value of an item in the global document config for a given key.
+##### Usage
 
-Strongly typed, inferred from type definition for the key.
+```jsx
+import { useImportScriptModules } from "@powerhousedao/state";
 
----
+function MyImportScriptComponent() {
+  const importScriptModules = useImportScriptModules();
+}
+```