@commercetools/nimbus-mcp 3.0.0 → 3.1.0

package/data/docs/routes/hooks-usedraganddrop.json

@@ -0,0 +1,310 @@
+{
+  "meta": {
+    "id": "useDragAndDrop",
+    "title": "useDragAndDrop",
+    "description": "shared drag-and-drop hook for Nimbus collection components",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/hooks/use-drag-and-drop/use-drag-and-drop.mdx",
+    "menu": [
+      "Hooks",
+      "useDragAndDrop"
+    ],
+    "route": "hooks/usedraganddrop",
+    "tags": [
+      "drag",
+      "drop",
+      "reorder",
+      "dnd"
+    ],
+    "toc": [
+      {
+        "value": "Getting started",
+        "href": "#getting-started",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Basic reorderable DataTable",
+        "href": "#basic-reorderable-datatable",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Namespace isolation",
+        "href": "#namespace-isolation",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "External drops",
+        "href": "#external-drops",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Helper functions",
+        "href": "#helper-functions",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Outgoing formats",
+        "href": "#outgoing-formats",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "State handler factories",
+        "href": "#state-handler-factories",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "createListDataHandlers(list)",
+        "href": "#createlistdatahandlerslist",
+        "depth": 3,
+        "numbering": [
+          1,
+          5,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "createArrayHandlers(setItems, getKey?)",
+        "href": "#createarrayhandlerssetitems-getkey",
+        "depth": 3,
+        "numbering": [
+          1,
+          5,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Using with DataTable",
+        "href": "#using-with-datatable",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "API reference",
+        "href": "#api-reference",
+        "depth": 2,
+        "numbering": [
+          1,
+          7
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "DragAndDropProps<T>",
+        "href": "#draganddroppropst",
+        "depth": 3,
+        "numbering": [
+          1,
+          7,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "UseDragAndDropOptions<T>",
+        "href": "#usedraganddropoptionst",
+        "depth": 3,
+        "numbering": [
+          1,
+          7,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# useDragAndDrop\n\nA shared hook that wraps React Aria's drag-and-drop system with namespace isolation,\nexternal drop support, outgoing format serialization, and state handler factories.\nReturns `{ dragAndDropHooks }` to pass to any supported React Aria collection component.\n\n## Getting started\n\n```tsx\nimport { useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n```\n\n### Basic reorderable DataTable\n\n```tsx\nimport { DataTable, useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n\nconst [rows, setRows] = useState([\n  { id: \"1\", name: \"Alice\", role: \"Admin\" },\n  { id: \"2\", name: \"Bob\", role: \"User\" },\n  { id: \"3\", name: \"Carol\", role: \"Manager\" },\n]);\n\nconst columns = [\n  { id: \"name\", header: \"Name\", accessor: (row) => row.name },\n  { id: \"role\", header: \"Role\", accessor: (row) => row.role },\n];\n\nconst { dragAndDropHooks } = useDragAndDrop({\n  ...createArrayHandlers(setRows, (row) => row.id),\n});\n\n<DataTable columns={columns} rows={rows} dragAndDropHooks={dragAndDropHooks} />\n```\n\n> [!NOTE]\n> DraggableList uses `useDragAndDrop` internally — you don't need to call it yourself.\n> Use the hook directly when adding drag-and-drop to other components like DataTable.\n\n## Namespace isolation\n\nUse `dragNamespace` to prevent drag-and-drop between unrelated lists on the same page:\n\n```tsx\nconst { dragAndDropHooks: fruitHooks } = useDragAndDrop({\n  dragNamespace: \"fruits\",\n  ...createArrayHandlers(setFruits),\n});\n\nconst { dragAndDropHooks: veggieHooks } = useDragAndDrop({\n  dragNamespace: \"vegetables\",\n  ...createArrayHandlers(setVeggies),\n});\n```\n\nLists sharing a namespace can exchange items. Lists with different namespaces (or one\nnamespaced and one not) reject each other's drops. Omitting `dragNamespace` preserves\nthe default behavior where all lists interoperate.\n\n## External drops\n\nAccept drops from outside Nimbus (plain text, files, directories) using `onExternalDrop`\nand `acceptExternalTypes`:\n\n```tsx\nimport { useDragAndDrop, createItemsFromFileDrop } from \"@commercetools/nimbus\";\nimport { DIRECTORY_DRAG_TYPE } from \"react-aria-components\";\n\nconst { dragAndDropHooks } = useDragAndDrop({\n  onExternalDrop: createItemsFromFileDrop,\n  acceptExternalTypes: [\"image/png\", \"image/jpeg\", \"application/pdf\"],\n  ...createArrayHandlers(setItems),\n});\n```\n\n### Helper functions\n\nSix composable helpers for common `onExternalDrop` patterns:\n\n| Helper | Accepts | Returns |\n|--------|---------|---------|\n| `createItemsFromTextDrop(items, type?)` | `TextDropItem` | `{ key, label }` |\n| `createItemsFromFileDrop(items)` | `FileDropItem` | `{ key, label, fileName, fileType, file }` |\n| `createItemsFromDirectoryDrop(items)` | `DirectoryDropItem` | `{ key, label, fileName, fileType, file, directory }` |\n| `createItemsFromJsonDrop(items)` | `TextDropItem` with `application/json` | `{ key, label, data }` |\n| `createItemsFromImageDrop(items)` | `FileDropItem` with `image/*` | `{ key, label, fileName, fileType, file, objectUrl }` |\n| `createItemsFromCsvDrop(items)` | `TextDropItem` with `text/csv` | `{ key, label, row, headers }` |\n\nCompose multiple helpers for mixed drop types:\n\n```tsx\nonExternalDrop={async (items) => [\n  ...(await createItemsFromTextDrop(items)),\n  ...(await createItemsFromFileDrop(items)),\n  ...(await createItemsFromDirectoryDrop(items)),\n]}\n```\n\n> [!NOTE]\n> Avoid combining `createItemsFromFileDrop` with `createItemsFromImageDrop` — file drop\n> processes all files including images, so image files would appear twice. Use one or the other.\n\n> [!WARNING]\n> `createItemsFromImageDrop` creates object URLs via `URL.createObjectURL()`.\n> Consumers must call `URL.revokeObjectURL(item.objectUrl)` when items are removed.\n\n## Outgoing formats\n\nUse `serializeDragItem` to make items droppable into non-Nimbus targets:\n\n```tsx\nconst { dragAndDropHooks } = useDragAndDrop({\n  serializeDragItem: (item) => ({\n    \"text/plain\": item.label,\n    \"text/html\": `<li>${item.label}</li>`,\n  }),\n  ...createArrayHandlers(setItems),\n});\n```\n\n## State handler factories\n\nTwo factories that return all four state mutation callbacks (`onInsertItems`,\n`onAppendItems`, `onReorder`, `onRemoveItems`):\n\n### `createListDataHandlers(list)`\n\nFor React Aria's `useListData`:\n\n```tsx\nimport { useListData } from \"react-stately\";\n\nconst list = useListData({ initialItems: items, getKey });\nconst { dragAndDropHooks } = useDragAndDrop({\n  ...createListDataHandlers(list),\n});\n```\n\n### `createArrayHandlers(setItems, getKey?)`\n\nFor plain `useState` arrays:\n\n```tsx\nconst [items, setItems] = useState(initialItems);\nconst { dragAndDropHooks } = useDragAndDrop({\n  ...createArrayHandlers(setItems, (item) => item.key),\n});\n```\n\nIf you need to customize state handling beyond what these factories provide — for example,\npersisting the new list order to an API or combining drag-and-drop with undo/redo — see the\n[React Aria drag and drop documentation](https://react-aria.adobe.com/dnd) for guidance on\nbuilding custom state handlers.\n\n## Using with DataTable\n\nDataTable accepts `dragAndDropHooks` as an optional passthrough prop:\n\n```tsx\nimport { DataTable, useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n\nconst [rows, setRows] = useState(initialRows);\nconst { dragAndDropHooks } = useDragAndDrop({\n  dragNamespace: \"my-table\",\n  ...createArrayHandlers(setRows, (row) => row.id),\n});\n\n<DataTable columns={columns} rows={rows} dragAndDropHooks={dragAndDropHooks} />\n```\n\nThe `dragAndDropHooks` prop is also available on `DataTable.Table` for the compound component API.\n\n## API reference\n\n### `DragAndDropProps<T>`\n\nConsumer-facing props, intended to be intersected into component prop types:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `dragNamespace` | `string` | — | Isolate DnD to collections sharing the same namespace |\n| `onExternalDrop` | `(items: DropItem[]) => T[] \\| Promise<T[]>` | — | Convert external drops into collection items |\n| `acceptExternalTypes` | `Array<string \\| symbol>` | — | Drag types to accept from external sources |\n| `externalDropOperation` | `\"copy\" \\| \"move\" \\| \"link\"` | `\"copy\"` | Drop operation for external items |\n| `serializeDragItem` | `(item: T) => Record<string, string>` | — | Additional format representations for outgoing drags |\n\n### `UseDragAndDropOptions<T>`\n\nFull hook configuration, extends `DragAndDropProps<T>`:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `dataFormatBase` | `string` | `\"nimbus-collection-item\"` | Override the base data format string |\n| `onInsertItems` | `(items: T[], target: ItemDropTarget) => void` | — | Insert items before/after a target |\n| `onAppendItems` | `(items: T[]) => void` | — | Append items (drop on root) |\n| `onReorder` | `(keys: Set<Key>, target: ItemDropTarget) => void` | — | Reorder items within the collection |\n| `onRemoveItems` | `(keys: Set<Key>) => void` | — | Remove items after external move |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# useDragAndDrop\n\nA shared hook that wraps React Aria's drag-and-drop system with namespace isolation,\nexternal drop support, outgoing format serialization, and state handler factories.\nReturns `{ dragAndDropHooks }` to pass to any supported React Aria collection component.\n\n## Getting started\n\n```tsx\nimport { useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n```\n\n### Basic reorderable DataTable\n\n```tsx\nimport { DataTable, useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n\nconst [rows, setRows] = useState([\n  { id: \"1\", name: \"Alice\", role: \"Admin\" },\n  { id: \"2\", name: \"Bob\", role: \"User\" },\n  { id: \"3\", name: \"Carol\", role: \"Manager\" },\n]);\n\nconst columns = [\n  { id: \"name\", header: \"Name\", accessor: (row) => row.name },\n  { id: \"role\", header: \"Role\", accessor: (row) => row.role },\n];\n\nconst { dragAndDropHooks } = useDragAndDrop({\n  ...createArrayHandlers(setRows, (row) => row.id),\n});\n\n<DataTable columns={columns} rows={rows} dragAndDropHooks={dragAndDropHooks} />\n```\n\n> [!NOTE]\n> DraggableList uses `useDragAndDrop` internally — you don't need to call it yourself.\n> Use the hook directly when adding drag-and-drop to other components like DataTable.\n\n## Namespace isolation\n\nUse `dragNamespace` to prevent drag-and-drop between unrelated lists on the same page:\n\n```tsx\nconst { dragAndDropHooks: fruitHooks } = useDragAndDrop({\n  dragNamespace: \"fruits\",\n  ...createArrayHandlers(setFruits),\n});\n\nconst { dragAndDropHooks: veggieHooks } = useDragAndDrop({\n  dragNamespace: \"vegetables\",\n  ...createArrayHandlers(setVeggies),\n});\n```\n\nLists sharing a namespace can exchange items. Lists with different namespaces (or one\nnamespaced and one not) reject each other's drops. Omitting `dragNamespace` preserves\nthe default behavior where all lists interoperate.\n\n## External drops\n\nAccept drops from outside Nimbus (plain text, files, directories) using `onExternalDrop`\nand `acceptExternalTypes`:\n\n```tsx\nimport { useDragAndDrop, createItemsFromFileDrop } from \"@commercetools/nimbus\";\nimport { DIRECTORY_DRAG_TYPE } from \"react-aria-components\";\n\nconst { dragAndDropHooks } = useDragAndDrop({\n  onExternalDrop: createItemsFromFileDrop,\n  acceptExternalTypes: [\"image/png\", \"image/jpeg\", \"application/pdf\"],\n  ...createArrayHandlers(setItems),\n});\n```\n\n### Helper functions\n\nSix composable helpers for common `onExternalDrop` patterns:\n\n| Helper | Accepts | Returns |\n|--------|---------|---------|\n| `createItemsFromTextDrop(items, type?)` | `TextDropItem` | `{ key, label }` |\n| `createItemsFromFileDrop(items)` | `FileDropItem` | `{ key, label, fileName, fileType, file }` |\n| `createItemsFromDirectoryDrop(items)` | `DirectoryDropItem` | `{ key, label, fileName, fileType, file, directory }` |\n| `createItemsFromJsonDrop(items)` | `TextDropItem` with `application/json` | `{ key, label, data }` |\n| `createItemsFromImageDrop(items)` | `FileDropItem` with `image/*` | `{ key, label, fileName, fileType, file, objectUrl }` |\n| `createItemsFromCsvDrop(items)` | `TextDropItem` with `text/csv` | `{ key, label, row, headers }` |\n\nCompose multiple helpers for mixed drop types:\n\n```tsx\nonExternalDrop={async (items) => [\n  ...(await createItemsFromTextDrop(items)),\n  ...(await createItemsFromFileDrop(items)),\n  ...(await createItemsFromDirectoryDrop(items)),\n]}\n```\n\n> [!NOTE]\n> Avoid combining `createItemsFromFileDrop` with `createItemsFromImageDrop` — file drop\n> processes all files including images, so image files would appear twice. Use one or the other.\n\n> [!WARNING]\n> `createItemsFromImageDrop` creates object URLs via `URL.createObjectURL()`.\n> Consumers must call `URL.revokeObjectURL(item.objectUrl)` when items are removed.\n\n## Outgoing formats\n\nUse `serializeDragItem` to make items droppable into non-Nimbus targets:\n\n```tsx\nconst { dragAndDropHooks } = useDragAndDrop({\n  serializeDragItem: (item) => ({\n    \"text/plain\": item.label,\n    \"text/html\": `<li>${item.label}</li>`,\n  }),\n  ...createArrayHandlers(setItems),\n});\n```\n\n## State handler factories\n\nTwo factories that return all four state mutation callbacks (`onInsertItems`,\n`onAppendItems`, `onReorder`, `onRemoveItems`):\n\n### `createListDataHandlers(list)`\n\nFor React Aria's `useListData`:\n\n```tsx\nimport { useListData } from \"react-stately\";\n\nconst list = useListData({ initialItems: items, getKey });\nconst { dragAndDropHooks } = useDragAndDrop({\n  ...createListDataHandlers(list),\n});\n```\n\n### `createArrayHandlers(setItems, getKey?)`\n\nFor plain `useState` arrays:\n\n```tsx\nconst [items, setItems] = useState(initialItems);\nconst { dragAndDropHooks } = useDragAndDrop({\n  ...createArrayHandlers(setItems, (item) => item.key),\n});\n```\n\nIf you need to customize state handling beyond what these factories provide — for example,\npersisting the new list order to an API or combining drag-and-drop with undo/redo — see the\n[React Aria drag and drop documentation](https://react-aria.adobe.com/dnd) for guidance on\nbuilding custom state handlers.\n\n## Using with DataTable\n\nDataTable accepts `dragAndDropHooks` as an optional passthrough prop:\n\n```tsx\nimport { DataTable, useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n\nconst [rows, setRows] = useState(initialRows);\nconst { dragAndDropHooks } = useDragAndDrop({\n  dragNamespace: \"my-table\",\n  ...createArrayHandlers(setRows, (row) => row.id),\n});\n\n<DataTable columns={columns} rows={rows} dragAndDropHooks={dragAndDropHooks} />\n```\n\nThe `dragAndDropHooks` prop is also available on `DataTable.Table` for the compound component API.\n\n## API reference\n\n### `DragAndDropProps<T>`\n\nConsumer-facing props, intended to be intersected into component prop types:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `dragNamespace` | `string` | — | Isolate DnD to collections sharing the same namespace |\n| `onExternalDrop` | `(items: DropItem[]) => T[] \\| Promise<T[]>` | — | Convert external drops into collection items |\n| `acceptExternalTypes` | `Array<string \\| symbol>` | — | Drag types to accept from external sources |\n| `externalDropOperation` | `\"copy\" \\| \"move\" \\| \"link\"` | `\"copy\"` | Drop operation for external items |\n| `serializeDragItem` | `(item: T) => Record<string, string>` | — | Additional format representations for outgoing drags |\n\n### `UseDragAndDropOptions<T>`\n\nFull hook configuration, extends `DragAndDropProps<T>`:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `dataFormatBase` | `string` | `\"nimbus-collection-item\"` | Override the base data format string |\n| `onInsertItems` | `(items: T[], target: ItemDropTarget) => void` | — | Insert items before/after a target |\n| `onAppendItems` | `(items: T[]) => void` | — | Append items (drop on root) |\n| `onReorder` | `(keys: Set<Key>, target: ItemDropTarget) => void` | — | Reorder items within the collection |\n| `onRemoveItems` | `(keys: Set<Key>) => void` | — | Remove items after external move |\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic reorderable DataTable",
+          "href": "#basic-reorderable-datatable",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Namespace isolation",
+          "href": "#namespace-isolation",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "External drops",
+          "href": "#external-drops",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Helper functions",
+          "href": "#helper-functions",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Outgoing formats",
+          "href": "#outgoing-formats",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "State handler factories",
+          "href": "#state-handler-factories",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "createListDataHandlers(list)",
+          "href": "#createlistdatahandlerslist",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "createArrayHandlers(setItems, getKey?)",
+          "href": "#createarrayhandlerssetitems-getkey",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Using with DataTable",
+          "href": "#using-with-datatable",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "DragAndDropProps<T>",
+          "href": "#draganddroppropst",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "UseDragAndDropOptions<T>",
+          "href": "#usedraganddropoptionst",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/patterns-actions.json

@@ -0,0 +1,78 @@
+{
+  "meta": {
+    "id": "Patterns-Actions",
+    "title": "Actions",
+    "description": "Pre-composed action patterns for common form and page controls",
+    "order": 3,
+    "repoPath": "packages/nimbus/src/docs/actions.mdx",
+    "menu": [
+      "Patterns",
+      "Actions"
+    ],
+    "route": "patterns/actions",
+    "tags": [
+      "patterns",
+      "actions",
+      "forms"
+    ],
+    "toc": [
+      {
+        "value": "When to use action patterns",
+        "href": "#when-to-use-action-patterns",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Available action patterns",
+        "href": "#available-action-patterns",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "icon": "TouchApp",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Actions\n\nAction patterns provide pre-composed sets of controls for common form and page interactions. Use them to avoid hand-composing button groups and wiring up save, cancel, and delete behavior from scratch.\n\n## When to use action patterns\n\nAction patterns are ideal for:\n- Standard form footers that need save, cancel, and optional delete controls\n- Reducing boilerplate for repeated action bar shapes across an app\n- Ensuring consistent button ordering and keyboard behavior\n\nFor action bars with non-standard button sets or custom layouts, compose `Button` and `Group` directly.\n\n## Available action patterns\n\n<CategoryOverview variant=\"list\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Actions\n\nAction patterns provide pre-composed sets of controls for common form and page interactions. Use them to avoid hand-composing button groups and wiring up save, cancel, and delete behavior from scratch.\n\n## When to use action patterns\n\nAction patterns are ideal for:\n- Standard form footers that need save, cancel, and optional delete controls\n- Reducing boilerplate for repeated action bar shapes across an app\n- Ensuring consistent button ordering and keyboard behavior\n\nFor action bars with non-standard button sets or custom layouts, compose `Button` and `Group` directly.\n\n## Available action patterns\n\n<CategoryOverview variant=\"list\" />\n",
+      "toc": [
+        {
+          "value": "When to use action patterns",
+          "href": "#when-to-use-action-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Available action patterns",
+          "href": "#available-action-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}