diff --git a/.vscode/launch.json b/.vscode/launch.json
index 8db31d402..63a074e00 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -91,6 +91,15 @@
       "runtimeArgs": ["--nolazy"],
       "sourceMaps": false
     },
+    {
+      "name": "nextjs attach",
+      "type": "node",
+      "request": "attach",
+      "port": 9229,
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    },
     {
       "type": "node",
       "request": "launch",
diff --git a/core/core/src/stories-utils.ts b/core/core/src/stories-utils.ts
index 0495f1248..f3464990d 100644
--- a/core/core/src/stories-utils.ts
+++ b/core/core/src/stories-utils.ts
@@ -20,13 +20,17 @@ export const getDocPath = (
   const { basePath = '' } = pagesConfig?.[docType] || {};
   const route = doc
     ? doc.route ||
-      `${ensureStartingSlash(ensureTrailingSlash(basePath))}${
+      `${ensureStartingSlash(
+        ensureTrailingSlash(basePath),
+      )}${ensureTrailingSlash(strToId(doc.title))}${
         activeTab ? `${ensureTrailingSlash(activeTab)}` : ''
-      }${ensureTrailingSlash(strToId(doc.title))}`
-    : `${ensureStartingSlash(ensureTrailingSlash(basePath))}${
+      }`
+    : `${ensureStartingSlash(
+        ensureTrailingSlash(basePath),
+      )}${ensureTrailingSlash(strToId(name))}${
         activeTab ? `${ensureTrailingSlash(activeTab)}` : ''
-      }${ensureTrailingSlash(strToId(name))}`;
-  return route;
+      }`;
+  return ensureTrailingSlash(route);
 };
 
 export const getStoryPath = (
@@ -41,12 +45,15 @@ export const getStoryPath = (
   }
 
   const { basePath = '' } = pagesConfig?.[docType] || {};
-  const route = `${
+  const docRoute = `${
     doc?.route
       ? ensureStartingSlash(ensureTrailingSlash(doc?.route))
       : `${ensureStartingSlash(ensureTrailingSlash(basePath))}`
-  }${activeTab ? `${ensureTrailingSlash(activeTab)}` : ''}`;
-  return `${route}${storyId || ''}`;
+  }`;
+  const route = `${docRoute}${storyId ? ensureTrailingSlash(storyId) : ''}${
+    activeTab ? `${ensureTrailingSlash(activeTab)}` : ''
+  }`;
+  return ensureTrailingSlash(route);
 };
 
 export const docStoryToId = (docId: string, storyId: string) =>
diff --git a/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap b/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap
index 19020cebe..4e92eb9d0 100644
--- a/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap
@@ -23,7 +23,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -59,7 +59,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -112,7 +112,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -148,7 +148,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -215,7 +215,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -251,7 +251,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
diff --git a/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap b/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap
index 2f5bf6df5..b7818c5c6 100644
--- a/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap
@@ -17,7 +17,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -53,7 +53,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -102,7 +102,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -138,7 +138,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -187,7 +187,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -223,7 +223,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
diff --git a/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap b/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap
index 33be7fc24..2bfa3f429 100644
--- a/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap
@@ -23,7 +23,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -59,7 +59,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -114,7 +114,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -150,7 +150,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -219,7 +219,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -255,7 +255,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
diff --git a/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap b/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap
index b2c3d0a09..ea82f16bb 100644
--- a/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap
@@ -2445,10 +2445,10 @@ user setting can display only props table or only controls",
   "packages": Object {
     "53689598fe7786493f4584ab098c73cc": Object {
       "dependencies": Object {
-        "@component-controls/components": "^1.7.0",
-        "@component-controls/core": "^1.7.0",
-        "@component-controls/editors": "^1.7.0",
-        "@component-controls/store": "^1.7.1",
+        "@component-controls/components": "^1.8.0",
+        "@component-controls/core": "^1.8.0",
+        "@component-controls/editors": "^1.8.0",
+        "@component-controls/store": "^1.8.0",
         "@primer/octicons-react": "^10.0.0",
         "@theme-ui/css": "next",
         "copy-to-clipboard": "^3.2.1",
@@ -2492,14 +2492,14 @@ user setting can display only props table or only controls",
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
     "a62e1dde0ad3643683513e77602cc630": Object {
       "dependencies": Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -2535,7 +2535,7 @@ user setting can display only props table or only controls",
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
diff --git a/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap b/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap
index 2e38c19cf..e4232ddb7 100644
--- a/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap
@@ -17,7 +17,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -53,7 +53,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -134,7 +134,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -170,7 +170,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -279,7 +279,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -315,7 +315,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -406,7 +406,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -442,7 +442,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -551,7 +551,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -587,7 +587,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -702,7 +702,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -738,7 +738,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -935,7 +935,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -971,7 +971,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -1047,7 +1047,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -1083,7 +1083,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -1189,7 +1189,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -1225,7 +1225,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -1334,7 +1334,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -1370,7 +1370,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -1487,7 +1487,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -1523,7 +1523,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -1697,7 +1697,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -1733,7 +1733,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -1823,7 +1823,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -1859,7 +1859,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -1983,7 +1983,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -2019,7 +2019,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
diff --git a/core/instrument/test/__snapshots__/esm-stories.test.ts.snap b/core/instrument/test/__snapshots__/esm-stories.test.ts.snap
index 383899d54..4c5a55955 100644
--- a/core/instrument/test/__snapshots__/esm-stories.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-stories.test.ts.snap
@@ -17,7 +17,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -53,7 +53,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
@@ -82,7 +82,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -118,7 +118,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -162,7 +162,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -198,7 +198,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
@@ -225,7 +225,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -261,7 +261,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -320,7 +320,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -356,7 +356,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -473,7 +473,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -509,7 +509,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -582,7 +582,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -618,7 +618,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -706,7 +706,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -742,7 +742,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -830,7 +830,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -866,7 +866,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
diff --git a/core/instrument/test/__snapshots__/esm-story-doc.test.ts.snap b/core/instrument/test/__snapshots__/esm-story-doc.test.ts.snap
index 276da1a12..82ac96a1e 100644
--- a/core/instrument/test/__snapshots__/esm-story-doc.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-story-doc.test.ts.snap
@@ -18,7 +18,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -54,7 +54,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
@@ -93,7 +93,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -129,7 +129,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
@@ -176,7 +176,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -212,7 +212,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
@@ -249,7 +249,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -285,7 +285,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
diff --git a/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap b/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap
index 0257244e4..e937f29b9 100644
--- a/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap
+++ b/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap
@@ -30,7 +30,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -66,7 +66,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
diff --git a/core/instrument/test/__snapshots__/extract-component.test.ts.snap b/core/instrument/test/__snapshots__/extract-component.test.ts.snap
index 4fd58530d..93deed1eb 100644
--- a/core/instrument/test/__snapshots__/extract-component.test.ts.snap
+++ b/core/instrument/test/__snapshots__/extract-component.test.ts.snap
@@ -21,7 +21,7 @@ Object {
       "@babel/generator": "^7.9.4",
       "@babel/parser": "^7.9.4",
       "@babel/traverse": "^7.9.0",
-      "@component-controls/core": "^1.7.0",
+      "@component-controls/core": "^1.8.0",
       "@hutson/parse-repository-url": "^5.0.0",
       "@mdx-js/loader": "^1.5.5",
       "@mdx-js/react": "^1.6.5",
@@ -57,7 +57,7 @@ Object {
       "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
       "issues": "https://github.com/ccontrols/component-controls/issues",
     },
-    "version": "1.7.1",
+    "version": "1.8.0",
   },
 }
 `;
@@ -83,7 +83,7 @@ Object {
       "@babel/generator": "^7.9.4",
       "@babel/parser": "^7.9.4",
       "@babel/traverse": "^7.9.0",
-      "@component-controls/core": "^1.7.0",
+      "@component-controls/core": "^1.8.0",
       "@hutson/parse-repository-url": "^5.0.0",
       "@mdx-js/loader": "^1.5.5",
       "@mdx-js/react": "^1.6.5",
@@ -119,7 +119,7 @@ Object {
       "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
       "issues": "https://github.com/ccontrols/component-controls/issues",
     },
-    "version": "1.7.1",
+    "version": "1.8.0",
   },
 }
 `;
@@ -167,7 +167,7 @@ Object {
       "@babel/generator": "^7.9.4",
       "@babel/parser": "^7.9.4",
       "@babel/traverse": "^7.9.0",
-      "@component-controls/core": "^1.7.0",
+      "@component-controls/core": "^1.8.0",
       "@hutson/parse-repository-url": "^5.0.0",
       "@mdx-js/loader": "^1.5.5",
       "@mdx-js/react": "^1.6.5",
@@ -203,7 +203,7 @@ Object {
       "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
       "issues": "https://github.com/ccontrols/component-controls/issues",
     },
-    "version": "1.7.1",
+    "version": "1.8.0",
   },
 }
 `;
@@ -299,7 +299,7 @@ Object {
       "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
       "issues": "https://github.com/ccontrols/component-controls/issues",
     },
-    "version": "1.7.0",
+    "version": "1.8.0",
   },
 }
 `;
@@ -338,7 +338,7 @@ Object {
       "@babel/generator": "^7.9.4",
       "@babel/parser": "^7.9.4",
       "@babel/traverse": "^7.9.0",
-      "@component-controls/core": "^1.7.0",
+      "@component-controls/core": "^1.8.0",
       "@hutson/parse-repository-url": "^5.0.0",
       "@mdx-js/loader": "^1.5.5",
       "@mdx-js/react": "^1.6.5",
@@ -374,7 +374,7 @@ Object {
       "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
       "issues": "https://github.com/ccontrols/component-controls/issues",
     },
-    "version": "1.7.1",
+    "version": "1.8.0",
   },
 }
 `;
@@ -400,7 +400,7 @@ Object {
       "@babel/generator": "^7.9.4",
       "@babel/parser": "^7.9.4",
       "@babel/traverse": "^7.9.0",
-      "@component-controls/core": "^1.7.0",
+      "@component-controls/core": "^1.8.0",
       "@hutson/parse-repository-url": "^5.0.0",
       "@mdx-js/loader": "^1.5.5",
       "@mdx-js/react": "^1.6.5",
@@ -436,7 +436,7 @@ Object {
       "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
       "issues": "https://github.com/ccontrols/component-controls/issues",
     },
-    "version": "1.7.1",
+    "version": "1.8.0",
   },
 }
 `;
diff --git a/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap b/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap
index 088cf6417..109a262a8 100644
--- a/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap
+++ b/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap
@@ -29,7 +29,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -65,7 +65,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {},
@@ -113,7 +113,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -149,7 +149,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -252,7 +252,7 @@ export default Button;
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -288,14 +288,14 @@ export default Button;
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
     "9d6345a2d09c05cff0ad7c86fe40c4f9": Object {
       "dependencies": Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -331,7 +331,7 @@ export default Button;
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -396,7 +396,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -432,7 +432,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -575,7 +575,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -611,7 +611,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -720,7 +720,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -756,7 +756,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
@@ -850,7 +850,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.7.0",
+        "@component-controls/core": "^1.8.0",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -886,7 +886,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.1",
+      "version": "1.8.0",
     },
   },
   "stories": Object {
diff --git a/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap b/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap
index 00deb27fe..825ebeb49 100644
--- a/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap
+++ b/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap
@@ -66,14 +66,14 @@ MDXContent.isMDXComponent = true;
 
         export default Object.assign(dmsPageExport, 
         {
-        title: \\"MDX\\"
+        \\"title\\": \\"MDX\\"
         }
         );
 
 export const mdxStory = () => <div>test</div>
 mdxStory.story = 
         {
-        name: \\"mdx-story\\"
+        \\"name\\": \\"mdx-story\\"
         }
         
              ",
@@ -191,14 +191,14 @@ MDXContent.isMDXComponent = true;
 
         export default Object.assign(dmsPageExport, 
         {
-        title: \\"MDX\\"
+        \\"title\\": \\"MDX\\"
         }
         );
 
 export const mdxStory = ({ text }) => <div>{text}</div>
 mdxStory.story = 
         {
-        name: \\"mdx-story\\"
+        \\"name\\": \\"mdx-story\\"
         }
         
              ",
@@ -301,14 +301,14 @@ MDXContent.isMDXComponent = true;
 
         export default Object.assign(dmsPageExport, 
         {
-        title: \\"MDX\\"
+        \\"title\\": \\"MDX\\"
         }
         );
 
 export const mdxStory = props => <div>{props.text}</div>
 mdxStory.story = 
         {
-        name: \\"mdx-story\\"
+        \\"name\\": \\"mdx-story\\"
         }
         
              ",
@@ -379,7 +379,7 @@ MDXContent.isMDXComponent = true;
 
         export default Object.assign(dmsPageExport, 
         {
-        title: \\"MDX\\"
+        \\"title\\": \\"MDX\\"
         }
         );
 
@@ -390,7 +390,7 @@ export const mdxStory = () => (<>
 </>)
 mdxStory.story = 
         {
-        name: \\"mdx-story\\"
+        \\"name\\": \\"mdx-story\\"
         }
         
              ",
@@ -492,14 +492,14 @@ MDXContent.isMDXComponent = true;
 
         export default Object.assign(dmsPageExport, 
         {
-        title: \\"MDX\\"
+        \\"title\\": \\"MDX\\"
         }
         );
 
 export const mdxStory = props => <div>{props.text}</div>
 mdxStory.story = 
         {
-        name: \\"mdx-story\\"
+        \\"name\\": \\"mdx-story\\"
         }
         
              ",
diff --git a/core/instrument/test/__snapshots__/package-info.test.ts.snap b/core/instrument/test/__snapshots__/package-info.test.ts.snap
index 11d6aba91..0cb166ad9 100644
--- a/core/instrument/test/__snapshots__/package-info.test.ts.snap
+++ b/core/instrument/test/__snapshots__/package-info.test.ts.snap
@@ -6,7 +6,7 @@ Object {
     "@babel/generator": "^7.9.4",
     "@babel/parser": "^7.9.4",
     "@babel/traverse": "^7.9.0",
-    "@component-controls/core": "^1.7.0",
+    "@component-controls/core": "^1.8.0",
     "@hutson/parse-repository-url": "^5.0.0",
     "@mdx-js/loader": "^1.5.5",
     "@mdx-js/react": "^1.6.5",
@@ -42,7 +42,7 @@ Object {
     "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
     "issues": "https://github.com/ccontrols/component-controls/issues",
   },
-  "version": "1.7.1",
+  "version": "1.8.0",
 }
 `;
 
diff --git a/core/loader/src/store.ts b/core/loader/src/store.ts
index 1192cdd85..c140753b1 100644
--- a/core/loader/src/store.ts
+++ b/core/loader/src/store.ts
@@ -8,6 +8,9 @@ import {
   defDocType,
   DocType,
   docStoryToId,
+  TabConfiguration,
+  getStoryPath,
+  getDocPath,
 } from '@component-controls/core';
 import { LoadingDocStore } from '@component-controls/instrument';
 
@@ -36,62 +39,196 @@ export interface LoadingStore {
   stores: (Partial<Pick<LoadingDocStore, 'stories' | 'doc'>> & {
     filePath: string;
   })[];
+
+  getDocs: (docType: DocType) => Pages;
+
+  getUniquesByField: (field: string) => { [key: string]: number };
+  getIndexPage: () => HomePageInfo;
+  getHomePage: (path: string) => HomePageInfo | undefined;
+  getHomePaths: () => string[];
+
+  getDocPage: (path: string) => DocPageInfo | undefined;
+  getDocPaths: () => string[];
 }
 
-class Store implements LoadingStore {
+export interface HomePageInfo {
+  type: string;
+  docId?: string;
+}
+
+export interface DocPageInfo {
+  type: string;
+  activeTab?: string;
+  docId?: string;
+  storyId?: string;
+  category?: string;
+}
+export class Store implements LoadingStore {
+  _homepaths: { [path: string]: HomePageInfo } | undefined = undefined;
+  _docpaths: { [path: string]: DocPageInfo } | undefined = undefined;
   stores: LoadingStore['stores'] = [];
   components: LoadingStore['components'] = {};
   packages: LoadingStore['packages'] = {};
   config: LoadingStore['config'] = {};
   buildConfig: LoadingStore['buildConfig'] = {};
-}
 
-export const getDocs = (
-  stores: LoadingStore['stores'],
-  docType: DocType,
-): Pages =>
-  stores
-    .filter(store => {
+  constructor(initial?: LoadingStore) {
+    if (initial) {
+      this.stores = initial.stores;
+      this.components = initial.components;
+      this.packages = initial.packages;
+      this.config = initial.config;
+      this.buildConfig = initial.buildConfig;
+    }
+  }
+  getDocs = (docType: DocType): Pages =>
+    this.stores
+      .filter(store => {
+        if (store?.doc) {
+          const { type = defDocType } = store.doc;
+          return type === docType;
+        }
+        return false;
+      })
+      .map(
+        store =>
+          ({
+            ...store.doc,
+            stories:
+              store.doc && store.stories
+                ? Object.keys(store.stories).map(id =>
+                    //@ts-ignore
+                    docStoryToId(store.doc.title, id),
+                  )
+                : undefined,
+          } as Document),
+      );
+  getUniquesByField = (field: string): { [key: string]: number } => {
+    return this.stores.reduce((acc: { [key: string]: number }, store) => {
       if (store?.doc) {
-        const { type = defDocType } = store.doc;
-        return type === docType;
+        //@ts-ignore
+        const value = store.doc[field];
+        const values = Array.isArray(value) ? value : [value];
+        values.forEach(v => {
+          if (v !== undefined) {
+            if (typeof acc[v] === 'undefined') {
+              acc[v] = 0;
+            }
+            acc[v] = acc[v] = 1;
+          }
+        });
       }
-      return false;
-    })
-    .map(
-      store =>
-        ({
-          ...store.doc,
-          stories:
-            store.doc && store.stories
-              ? Object.keys(store.stories).map(id =>
-                  //@ts-ignore
-                  docStoryToId(store.doc.title, id),
-                )
-              : undefined,
-        } as Document),
-    );
-export const getUniquesByField = (
-  stores: LoadingStore['stores'],
-  field: string,
-): { [key: string]: number } => {
-  return stores.reduce((acc: { [key: string]: number }, store) => {
-    if (store?.doc) {
-      //@ts-ignore
-      const value = store.doc[field];
-      const values = Array.isArray(value) ? value : [value];
-      values.forEach(v => {
-        if (v !== undefined) {
-          if (typeof acc[v] === 'undefined') {
-            acc[v] = 0;
+      return acc;
+    }, {});
+  };
+  getIndexPage = (): HomePageInfo => {
+    const homePage = this.stores.find(s => s.doc?.route === '/');
+    return {
+      docId: homePage?.doc?.title,
+      type: homePage?.doc?.type || defDocType,
+    };
+  };
+
+  buildHomePaths = () => {
+    if (this._homepaths === undefined) {
+      const { pages } = this.buildConfig || {};
+      if (pages) {
+        this._homepaths = {};
+        Object.keys(pages).forEach(type => {
+          const page = pages[type as DocType];
+          const docs = this.getDocs(type as DocType);
+          const doc = docs.find(doc => doc?.route === `/${page.basePath}`);
+          //@ts-ignore
+          this._homepaths[`/${page.basePath}`] = {
+            type,
+            docId: doc?.title,
+          };
+        });
+      }
+    }
+  };
+  getHomePage = (path: string): HomePageInfo | undefined => {
+    this.buildHomePaths();
+    return this._homepaths ? this._homepaths[path] : undefined;
+  };
+  getHomePaths = (): string[] => {
+    this.buildHomePaths();
+    return this._homepaths ? Object.keys(this._homepaths) : [];
+  };
+
+  buildDocPaths = () => {
+    if (this._docpaths === undefined) {
+      this._docpaths = {};
+      const { pages, categories = [] } = this.buildConfig || {};
+      if (pages) {
+        Object.keys(pages).forEach(type => {
+          if (!categories.includes(type as DocType)) {
+            const page = pages[type as DocType];
+            const docType = type as DocType;
+            const docs: Pages = this.getDocs(docType);
+            const tabs: Pick<TabConfiguration, 'route'>[] = page.tabs || [
+              { route: undefined },
+            ];
+            tabs.forEach((tab, tabIndex) => {
+              const route = tabIndex > 0 ? tab.route : undefined;
+              docs.forEach(doc => {
+                if (doc.route !== '/') {
+                  const stories =
+                    page.storyPaths && doc.stories?.length
+                      ? doc.stories
+                      : [undefined];
+                  stories.forEach((storyId?: string) => {
+                    const url = getStoryPath(storyId, doc, pages, route);
+                    //@ts-ignore
+                    this._docpaths[url] = {
+                      type: docType,
+                      activeTab: route,
+                      docId: doc.title,
+                      storyId,
+                    };
+                  });
+                }
+              });
+            });
+          } else {
+            const cats = this.getUniquesByField(type);
+            const catKeys = Object.keys(cats);
+            catKeys.forEach(tag => {
+              const url = getDocPath(
+                type as DocType,
+                { title: tag, componentsLookup: {} },
+                pages,
+              );
+              //@ts-ignore
+              this._docpaths[url] = {
+                type,
+                category: tag,
+              };
+            });
           }
-          acc[v] = acc[v] = 1;
-        }
-      });
+        });
+      }
     }
-    return acc;
-  }, {});
-};
+  };
+
+  getDocPage = (path: string): DocPageInfo | undefined => {
+    this.buildDocPaths();
+    if (this._docpaths && !this._docpaths[path]) {
+      console.log(
+        path,
+        Object.keys(this._docpaths).filter(key =>
+          key.startsWith('/tutorial/structure/'),
+        ),
+      );
+    }
+    return this._docpaths ? this._docpaths[path] : undefined;
+  };
+  getDocPaths = (): string[] => {
+    this.buildDocPaths();
+    return this._docpaths ? Object.keys(this._docpaths) : [];
+  };
+}
+
 export const store = new Store();
 
 export const reserveStories = (filePaths: string[]) => {
@@ -112,7 +249,9 @@ export const addStoriesDoc = (filePath: string, added: LoadingDocStore) => {
     store.packages[key] = packages[key];
   });
   const { title } = doc;
-  if (store.stores.find(s => s.doc?.title === title)) {
+  if (
+    store.stores.find(s => s.filePath !== filePath && s.doc?.title === title)
+  ) {
     throw new Error(`Duplicate document title "${title}"`);
   }
   const storeStore = store.stores.find(s => s.filePath === filePath);
diff --git a/core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap b/core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap
index d55bd2c2f..4b526bcc1 100644
--- a/core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap
+++ b/core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap
@@ -2,6 +2,8 @@
 
 exports[`test example stories compile 1`] = `
 Store {
+  "_docpaths": undefined,
+  "_homepaths": undefined,
   "buildConfig": Object {
     "categories": Array [
       "author",
@@ -37,6 +39,8 @@ Store {
       "../../../../../examples/stories/src/**/*.stories.(js|jsx|tsx|mdx)",
     ],
   },
+  "buildDocPaths": [Function],
+  "buildHomePaths": [Function],
   "components": Object {
     "b5fffc2a9e710b29374f13f1d7ef028c": Object {
       "from": "../components/Button",
@@ -459,7 +463,12 @@ Button.propTypes = {
     },
   },
   "config": Object {},
+  "getDocPage": [Function],
+  "getDocPaths": [Function],
   "getDocs": [Function],
+  "getHomePage": [Function],
+  "getHomePaths": [Function],
+  "getIndexPage": [Function],
   "getUniquesByField": [Function],
   "packages": Object {
     "2971104eea653041fd49648ff7a04be8": Object {
@@ -473,7 +482,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "56bf0298abb3e6152739be8e0540ef47": Object {
       "dependencies": undefined,
@@ -486,7 +495,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "684baa68d45c8becd8f39da85795335b": Object {
       "dependencies": undefined,
@@ -499,7 +508,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "6b1e448146504b441f181f0e3fc41fc9": Object {
       "dependencies": undefined,
@@ -512,7 +521,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "7661d674db5188cc22e26c1b22bef349": Object {
       "dependencies": undefined,
@@ -525,7 +534,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "999878322b2acba3a7ca83bc6972a800": Object {
       "dependencies": undefined,
@@ -538,7 +547,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "d1f03618863bd813182b2668bed6d262": Object {
       "dependencies": undefined,
@@ -551,7 +560,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "f6e72e22789f0ec595d8610e56ea91ff": Object {
       "dependencies": undefined,
@@ -564,7 +573,7 @@ Button.propTypes = {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
   },
   "stores": Array [
diff --git a/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap b/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap
index 70ca474fb..27754b453 100644
--- a/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap
+++ b/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap
@@ -2,6 +2,8 @@
 
 exports[`test typescript react settings compile 1`] = `
 Store {
+  "_docpaths": undefined,
+  "_homepaths": undefined,
   "buildConfig": Object {
     "categories": Array [
       "author",
@@ -37,6 +39,8 @@ Store {
       "../../../../ui/components/src/ActionBar/*.stories.(js|jsx|tsx|mdx)",
     ],
   },
+  "buildDocPaths": [Function],
+  "buildHomePaths": [Function],
   "components": Object {
     "fded7dbaa855ea6869a794f877eab680": Object {
       "from": "./ActionBar",
@@ -196,7 +200,12 @@ export const ActionBar: FC<ActionBarProps> = ({
     },
   },
   "config": Object {},
+  "getDocPage": [Function],
+  "getDocPaths": [Function],
   "getDocs": [Function],
+  "getHomePage": [Function],
+  "getHomePaths": [Function],
+  "getIndexPage": [Function],
   "getUniquesByField": [Function],
   "packages": Object {
     "30938aa5d7bae6c78434e15f2a2723b5": Object {
@@ -242,7 +251,7 @@ export const ActionBar: FC<ActionBarProps> = ({
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
     "7bbf88bf0b53ee8e93c2e0a4cbe4c6b2": Object {
       "dependencies": Object {
@@ -287,7 +296,7 @@ export const ActionBar: FC<ActionBarProps> = ({
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.7.0",
+      "version": "1.8.0",
     },
   },
   "stores": Array [
diff --git a/core/webpack-compile/tests/__snapshots__/subcomponents.test.ts.snap b/core/webpack-compile/tests/__snapshots__/subcomponents.test.ts.snap
index 90212c2a1..f1103ceca 100644
--- a/core/webpack-compile/tests/__snapshots__/subcomponents.test.ts.snap
+++ b/core/webpack-compile/tests/__snapshots__/subcomponents.test.ts.snap
@@ -2,6 +2,8 @@
 
 exports[`test subcomponents compile 1`] = `
 Store {
+  "_docpaths": undefined,
+  "_homepaths": undefined,
   "buildConfig": Object {
     "categories": Array [
       "author",
@@ -37,6 +39,8 @@ Store {
       "./*.stories.(js|jsx|tsx|mdx)",
     ],
   },
+  "buildDocPaths": [Function],
+  "buildHomePaths": [Function],
   "components": Object {
     "08a97b28475aff9eba8252eeffddeea5": Object {
       "from": "../../../../../examples/stories/src/components/PropTypesButton",
@@ -450,7 +454,12 @@ Button.defaultProps = {
     },
   },
   "config": Object {},
+  "getDocPage": [Function],
+  "getDocPaths": [Function],
   "getDocs": [Function],
+  "getHomePage": [Function],
+  "getHomePaths": [Function],
+  "getIndexPage": [Function],
   "getUniquesByField": [Function],
   "packages": Object {
     "411a6b6f22151d62603115530afde73f": Object {
diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
index 5b25a4f02..26a09573a 100644
--- a/examples/gatsby/package.json
+++ b/examples/gatsby/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "component-controls-gatsby",
+  "name": "component-controls-gatsby-starter",
   "private": true,
   "version": "1.8.0",
   "main": "index.js",
@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@component-controls/gatsby-theme-stories": "^1.8.0",
-    "@component-controls/pages": "^1.8.0",
     "gatsby": "^2.22.10",
     "gatsby-plugin-sitemap": "^2.4.11",
     "react": "^16.13.1",
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 2cad60100..b7e9bf1df 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -1,12 +1,13 @@
 {
-  "name": "component-controls-nextjs",
+  "name": "component-controls-nextjs-starter",
   "private": true,
   "version": "1.8.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
     "build-sample": "next build && next export",
-    "start": "next -p 9021"
+    "start": "next -p 9021",
+    "debug": "NODE_OPTIONS='--inspect' next -p 9021"
   },
   "repository": {
     "type": "git",
@@ -15,7 +16,6 @@
   },
   "dependencies": {
     "@component-controls/nextjs-plugin": "^1.8.0",
-    "@component-controls/pages": "^1.8.0",
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
     "next": "^9.4.4",
diff --git a/examples/nextjs/pages/[doctype].tsx b/examples/nextjs/pages/[doctype].tsx
index add7c58e6..cabb839cf 100644
--- a/examples/nextjs/pages/[doctype].tsx
+++ b/examples/nextjs/pages/[doctype].tsx
@@ -1,9 +1,8 @@
 import React, { FC } from 'react';
 import { GetStaticProps, GetStaticPaths } from 'next';
-import { DocType, defDocType, Pages } from '@component-controls/core';
+import { DocType, defDocType } from '@component-controls/core';
 import { DocumentHomePage } from '@component-controls/app';
-import { getDocs } from '@component-controls/loader';
-import { Layout } from '@component-controls/nextjs-plugin';
+import { Layout, store } from '@component-controls/nextjs-plugin';
 
 interface PageListProps {
   type: DocType;
@@ -19,32 +18,15 @@ const DocHomeTemplate: FC<PageListProps> = ({ type = defDocType, docId }) => {
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const paths: string[] = [];
-  const store = require('@component-controls/webpack-compile/bundle');
-  const { pages } = store.buildConfig || {};
-  if (pages) {
-    Object.keys(pages).forEach(type => {
-      const page = pages[type as DocType];
-      //const docType = type as DocType;
-      // const docs = getDocs(store.stores, docType);
-      paths.push(`/${page.basePath}`);
-    });
-  }
+  const paths: string[] = store.getHomePaths();
   return { paths, fallback: false };
 };
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const store = require('@component-controls/webpack-compile/bundle');
   const { doctype: basepath } = params as { doctype: string };
-
-  const { pages } = store.buildConfig || {};
-  const doctype = Object.keys(pages).find(key => {
-    return pages[key].basePath.replace(/\//g, '') === basepath;
-  }) as DocType;
-  const docs: Pages = getDocs(store.stores, doctype);
-  const page = pages[doctype];
-  const docsPage = docs.find(doc => doc?.route === `/${page.basePath}`);
-  return { props: { docId: docsPage?.title || null, type: doctype } };
+  const { type = null, docId = null } =
+    store.getHomePage(`/${basepath}/`) || {};
+  return { props: { docId, type } };
 };
 
 export default DocHomeTemplate;
diff --git a/examples/nextjs/pages/[doctype]/[...docid].tsx b/examples/nextjs/pages/[doctype]/[...docid].tsx
new file mode 100644
index 000000000..f83c6706a
--- /dev/null
+++ b/examples/nextjs/pages/[doctype]/[...docid].tsx
@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { DocPage } from '@component-controls/app';
+import { DocType } from '@component-controls/core';
+import { Layout, store } from '@component-controls/nextjs-plugin';
+
+interface DocPageProps {
+  docId?: string;
+  storyId?: string;
+  type: DocType;
+  activeTab?: string;
+  category?: string;
+}
+
+const DocPageTemplate: FC<DocPageProps> = ({
+  docId,
+  storyId,
+  type,
+  activeTab,
+  category,
+}) => {
+  return (
+    <Layout docId={docId} storyId={storyId} type={type}>
+      <DocPage activeTab={activeTab} type={type} category={category} />
+    </Layout>
+  );
+};
+
+export default DocPageTemplate;
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths: string[] = store.getDocPaths();
+  return { paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const { doctype, docid } = params as { doctype: string; docid: string[] };
+  const {
+    type = null,
+    docId = null,
+    storyId = null,
+    category = null,
+    activeTab = null,
+  } = store.getDocPage(`/${doctype}/${docid.join('/')}/`) || {};
+  return { props: { docId, type, storyId, category, activeTab } };
+};
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
index d7f45a17f..dd6a1b51b 100644
--- a/examples/nextjs/pages/index.tsx
+++ b/examples/nextjs/pages/index.tsx
@@ -4,7 +4,6 @@ import { GetStaticProps } from 'next';
 import { DocType, defDocType } from '@component-controls/core';
 import { DocPage } from '@component-controls/app';
 import { Layout } from '@component-controls/nextjs-plugin';
-import { LoadingDocStore } from '@component-controls/instrument';
 
 interface PageListProps {
   type: DocType;
@@ -20,11 +19,9 @@ const HomePage: FC<PageListProps> = ({ type = defDocType, docId }) => {
 };
 
 export const getStaticProps: GetStaticProps = async () => {
-  const store = require('@component-controls/webpack-compile/bundle');
-  const homePage = store.stores.find(
-    (s: LoadingDocStore) => s.doc?.route === '/',
-  );
-  return { props: { docId: homePage?.doc?.title, type: homePage?.doc?.type } };
+  const { store } = require('@component-controls/nextjs-plugin');
+  const { docId = null, type = null } = store.getIndexPage() || {};
+  return { props: { docId, type } };
 };
 
 export default HomePage;
diff --git a/integrations/gatsby-theme-stories/README.md b/integrations/gatsby-theme-stories/README.md
index f7892a259..fa2e99e34 100644
--- a/integrations/gatsby-theme-stories/README.md
+++ b/integrations/gatsby-theme-stories/README.md
@@ -10,7 +10,6 @@
     -   [<ins>GatsbyLink</ins>](#insgatsbylinkins)
     -   [<ins>Layout</ins>](#inslayoutins)
     -   [<ins>DefaultName</ins>](#insdefaultnameins)
-    -   [<ins>CategoryList</ins>](#inscategorylistins)
     -   [<ins>CategoryPage</ins>](#inscategorypageins)
     -   [<ins>DocHome</ins>](#insdochomeins)
     -   [<ins>DocPage</ins>](#insdocpageins)
@@ -33,7 +32,7 @@ Special thanks for the inspiration drawn from [Gatsby themes](https://github.com
 ## Install
 
 ```sh
-yarn add gatsby-theme-stories
+yarn add @component-controls/gatsby-theme-stories
 ```
 
 ## Configure
@@ -96,16 +95,6 @@ _Layout [source code](https://github.com/ccontrols/component-controls/tree/maste
 
 _DefaultName [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/pages/404.tsx)_
 
-## <ins>CategoryList</ins>
-
-_CategoryList [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/CategoryList.tsx)_
-
-### properties
-
-| Name           | Type                               | Description |
-| -------------- | ---------------------------------- | ----------- |
-| `pathContext*` | _{ type: string; docId: string; }_ |             |
-
 ## <ins>CategoryPage</ins>
 
 _CategoryPage [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx)_
@@ -132,8 +121,8 @@ _DocPage [source code](https://github.com/ccontrols/component-controls/tree/mast
 
 ### properties
 
-| Name           | Type                                                                      | Description |
-| -------------- | ------------------------------------------------------------------------- | ----------- |
-| `pathContext*` | _{ docId?: string; storyId?: string; type: string; activeTab?: string; }_ |             |
+| Name           | Type                                                                                         | Description |
+| -------------- | -------------------------------------------------------------------------------------------- | ----------- |
+| `pathContext*` | _{ docId?: string; storyId?: string; type: string; activeTab?: string; category?: string; }_ |             |
 
 <!-- END-REACT-DOCGEN-TYPESCRIPT -->
diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts
index 28b2bf723..b93e4e11d 100644
--- a/integrations/gatsby-theme-stories/src/gatsby-node.ts
+++ b/integrations/gatsby-theme-stories/src/gatsby-node.ts
@@ -1,12 +1,4 @@
 import * as path from 'path';
-import {
-  getDocPath,
-  getStoryPath,
-  DocType,
-  TabConfiguration,
-  Pages,
-} from '@component-controls/core';
-import { getDocs, getUniquesByField } from '@component-controls/loader';
 
 import {
   compile,
@@ -35,96 +27,50 @@ exports.createPages = async (
       ? await watch(config)
       : await compile(config);
   if (store) {
-    const { pages, categories = [] } = store.buildConfig || {};
-    if (pages) {
-      Object.keys(pages).forEach(type => {
-        if (!categories.includes(type as DocType)) {
-          const page = pages[type as DocType];
-          const docType = type as DocType;
-          const docs: Pages = getDocs(store.stores, docType);
-          const tabs: Pick<TabConfiguration, 'route'>[] = page.tabs || [
-            { route: undefined },
-          ];
-          tabs.forEach((tab, tabIndex) => {
-            const route = tabIndex > 0 ? tab.route : undefined;
-            docs.forEach(doc => {
-              const stories =
-                page.storyPaths && doc.stories?.length
-                  ? doc.stories
-                  : [undefined];
-              stories.forEach((storyId?: string) => {
-                const url = getStoryPath(
-                  storyId,
-                  doc,
-                  store.buildConfig?.pages,
-                  route,
-                );
-                createPage({
-                  path: url,
-                  component: require.resolve(`../src/templates/DocPage.tsx`),
-                  context: {
-                    type: docType,
-                    activeTab: route,
-                    docId: doc.title,
-                    storyId,
-                  },
-                });
-              });
-            });
-          });
-          if (docs.length) {
-            const docsPage = docs.find(
-              doc => doc?.route === `/${page.basePath}`,
-            );
-            createPage({
-              path: `/${page.basePath}`,
-              component: require.resolve(`../src/templates/DocHome.tsx`),
-              context: {
-                type: docType,
-                docId: docsPage?.title,
-              },
-            });
-          }
-        }
-      });
-      categories.forEach(catName => {
-        const cats = getUniquesByField(store.stores, catName);
-        const catPage = pages[catName as DocType];
-        const catKeys = Object.keys(cats);
-        catKeys.forEach(tag => {
-          createPage({
-            path: getDocPath(
-              catName as DocType,
-              undefined,
-              store.buildConfig?.pages,
-              tag,
-            ),
-            component: require.resolve(`../src/templates/CategoryPage.tsx`),
-            context: {
-              type: catName as DocType,
-              category: tag,
-              docId: null,
-            },
-          });
-        });
-        createPage({
-          path: `/${catPage.basePath}`,
-          component: require.resolve(`../src/templates/DocHome.tsx`),
-          context: {
-            type: catName,
-            docId: null,
-          },
-        });
-      });
-    }
-    const homePage = store.stores.find(s => s.doc?.route === '/');
+    //home page
+    const { docId = null, type = null } = store.getIndexPage() || {};
     createPage({
       path: `/`,
       component: require.resolve(`../src/templates/DocPage.tsx`),
       context: {
-        docId: homePage?.doc?.title,
-        type: homePage?.doc?.type,
+        docId,
+        type,
       },
     });
+    const paths: string[] = store.getHomePaths();
+    paths.forEach(path => {
+      const { type = null, docId = null } = store.getHomePage(path) || {};
+      createPage({
+        path,
+        component: require.resolve(`../src/templates/DocHome.tsx`),
+        context: {
+          type,
+          docId,
+        },
+      });
+    });
+
+    const docPaths: string[] = store.getDocPaths();
+    docPaths.forEach(path => {
+      const {
+        type = null,
+        docId = null,
+        storyId = null,
+        category = null,
+        activeTab = null,
+      } = store.getDocPage(path) || {};
+
+      createPage({
+        path,
+        component: require.resolve(`../src/templates/DocPage.tsx`),
+        context: {
+          type,
+          docId,
+          storyId,
+          category,
+          activeTab,
+        },
+      });
+    });
   }
 };
diff --git a/integrations/gatsby-theme-stories/src/templates/DocPage.tsx b/integrations/gatsby-theme-stories/src/templates/DocPage.tsx
index 199d3679f..ee12a6abc 100644
--- a/integrations/gatsby-theme-stories/src/templates/DocPage.tsx
+++ b/integrations/gatsby-theme-stories/src/templates/DocPage.tsx
@@ -9,15 +9,16 @@ interface DocPageProps {
     storyId?: string;
     type: DocType;
     activeTab?: string;
+    category?: string;
   };
 }
 
 const DocPageTemplate: FC<DocPageProps> = ({
-  pathContext: { docId, storyId, type, activeTab },
+  pathContext: { docId, storyId, type, activeTab, category },
 }) => {
   return (
     <Layout docId={docId} storyId={storyId} type={type}>
-      <DocPage activeTab={activeTab} type={type} />
+      <DocPage activeTab={activeTab} type={type} category={category} />
     </Layout>
   );
 };
diff --git a/integrations/nextjs-plugin/README.md b/integrations/nextjs-plugin/README.md
index 82e2ce91f..39d18ec4b 100644
--- a/integrations/nextjs-plugin/README.md
+++ b/integrations/nextjs-plugin/README.md
@@ -1,47 +1,212 @@
 # Table of contents
 
+-   [In action](#in-action)
+-   [Overview](#overview)
+-   [Getting Started](#getting-started)
+    -   [Install](#install)
+    -   [Configure](#configure)
+-   [API](#api)
+    -   [<ins>build</ins>](#insbuildins)
+    -   [<ins>Layout</ins>](#inslayoutins)
+    -   [<ins>NextLink</ins>](#insnextlinkins)
+
 # In action
 
-[Example site](https://components-storybook-6-no-docs.netlify.app/?path=/test/components-actioncontainer--overview)
+[Live site](https://component-controls-nextjs.netlify.app)
 
 # Overview
 
 Next.js plugin for documenting your projects with component controls
 
--   Gatsby theme quick start.
--   Full UI configurability with components shadowing.
-
+-   Exports building and store interfaces.
+-   Exports generic Layout component.
 
 # Getting Started
 
 ## Install
 
 ```sh
-yarn add gatsby-theme-stories
+yarn add @component-controls/nextjs-plugin
 ```
 
 ## Configure
 
 the default options will configure `component-controls` to work with react apps,  with `react-docgen` for prop-types and `react-docgen-typescript` for typescript props information
 
-in `gatsby-config.js`:
+in `next.config.js`:
 
 ```js
-  plugins: [
-    ...
-    {
-      resolve: '@component-controls/gatsby-theme-stories',
-      options: {
-        //path to the configuration files
-        configPath: '.config',
-      },
-    },
-    ...
-  ],
+const withStories = require('@component-controls/nextjs-plugin/build');
+
+module.exports = withStories({ configPath: '.config', ....other options });
+```
+## Configure emotion ssr
+
+[`_app.js and _document.js`](https://github.com/vercel/next.js/tree/canary/examples/with-emotion/pages)
+
+## Create routes
+
+### Create home page
+in `pages/index.tsx`:
+```jsx
+import React, { FC } from 'react';
+import { GetStaticProps } from 'next';
+
+import { DocType, defDocType } from '@component-controls/core';
+import { DocPage } from '@component-controls/app';
+import { Layout } from '@component-controls/nextjs-plugin';
+
+interface PageListProps {
+  type: DocType;
+  docId?: string;
+}
+
+const HomePage: FC<PageListProps> = ({ type = defDocType, docId }) => {
+  return (
+    <Layout docId={docId} type={type}>
+      <DocPage type={type} />
+    </Layout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async () => {
+  const { store } = require('@component-controls/nextjs-plugin');
+  const { docId = null, type = null } = store.getIndexPage() || {};
+  return { props: { docId, type } };
+};
+
+export default HomePage;
+```
 
+### Create document type pages
+
+in `pages/[doctype].tsx`:
+```jsx
+import React, { FC } from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { DocType, defDocType } from '@component-controls/core';
+import { DocumentHomePage } from '@component-controls/app';
+import { Layout, store } from '@component-controls/nextjs-plugin';
+
+interface PageListProps {
+  type: DocType;
+  docId?: string;
+}
+
+const DocHomeTemplate: FC<PageListProps> = ({ type = defDocType, docId }) => {
+  return (
+    <Layout docId={docId} type={type}>
+      <DocumentHomePage type={type} />
+    </Layout>
+  );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths: string[] = store.getHomePaths();
+  return { paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const { doctype: basepath } = params as { doctype: string };
+  const { type = null, docId = null } =
+    store.getHomePage(`/${basepath}/`) || {};
+  return { props: { docId, type } };
+};
+
+export default DocHomeTemplate;
 ```
 
+### Create document and story pages
+
+in `pages/[doctype]/[...docid].tsx`:
+```jsx
+import React, { FC } from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { DocPage } from '@component-controls/app';
+import { DocType } from '@component-controls/core';
+import { Layout, store } from '@component-controls/nextjs-plugin';
+
+interface DocPageProps {
+  docId?: string;
+  storyId?: string;
+  type: DocType;
+  activeTab?: string;
+  category?: string;
+}
+
+const DocPageTemplate: FC<DocPageProps> = ({
+  docId,
+  storyId,
+  type,
+  activeTab,
+  category,
+}) => {
+  return (
+    <Layout docId={docId} storyId={storyId} type={type}>
+      <DocPage activeTab={activeTab} type={type} category={category} />
+    </Layout>
+  );
+};
+
+export default DocPageTemplate;
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths: string[] = store.getDocPaths();
+  return { paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const { doctype, docid } = params as { doctype: string; docid: string[] };
+  const {
+    type = null,
+    docId = null,
+    storyId = null,
+    category = null,
+    activeTab = null,
+  } = store.getDocPage(`/${doctype}/${docid.join('/')}/`) || {};
+  return { props: { docId, type, storyId, category, activeTab } };
+};
+```
 # API
 
 <react-docgen-typescript path="./src" />
 
+<!-- START-REACT-DOCGEN-TYPESCRIPT -->
+
+## <ins>build</ins>
+
+_build [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/build.ts)_
+
+### properties
+
+| Name           | Type            | Description                                              |
+| -------------- | --------------- | -------------------------------------------------------- |
+| `configPath`   | _string_        | path to config file                                      |
+| `webpack`      | _Configuration_ | webpack                                                  |
+| `presets`      | _RuleTypes_     | presets options that will be passed to the instrumenter. |
+| `outputFolder` | _string_        | output folder for generated bundle                       |
+
+## <ins>Layout</ins>
+
+_Layout [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/components/Layout.tsx)_
+
+### properties
+
+| Name      | Type     | Description |
+| --------- | -------- | ----------- |
+| `docId`   | _string_ |             |
+| `storyId` | _string_ |             |
+| `type`    | _string_ |             |
+
+## <ins>NextLink</ins>
+
+_NextLink [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/components/NextLink.tsx)_
+
+### properties
+
+| Name  | Type                                                                         | Description |
+| ----- | ---------------------------------------------------------------------------- | ----------- |
+| `ref` | _((instance: HTMLAnchorElement) => void) \| RefObject&lt;HTMLAnchorElement>_ |             |
+| `to`  | _string_                                                                     |             |
+
+<!-- END-REACT-DOCGEN-TYPESCRIPT -->
diff --git a/integrations/nextjs-plugin/src/build.ts b/integrations/nextjs-plugin/src/build.ts
index c88e3b4b6..bbab0ab8b 100644
--- a/integrations/nextjs-plugin/src/build.ts
+++ b/integrations/nextjs-plugin/src/build.ts
@@ -4,12 +4,13 @@ import {
   watch,
   CompileProps,
 } from '@component-controls/webpack-compile';
-import { LoadingStore } from '@component-controls/loader';
+
 import { LoaderOptions } from './types';
+import { LoadingStore } from '@component-controls/loader';
 
 const defaultPresets = ['react', 'react-docgen-typescript'];
 
-let store: LoadingStore | undefined = undefined;
+let store: LoadingStore;
 export default ({
   configPath,
   outputFolder,
diff --git a/integrations/nextjs-plugin/src/components/NextLink.tsx b/integrations/nextjs-plugin/src/components/NextLink.tsx
index 6e695bbc0..2f6f4e209 100644
--- a/integrations/nextjs-plugin/src/components/NextLink.tsx
+++ b/integrations/nextjs-plugin/src/components/NextLink.tsx
@@ -4,12 +4,24 @@ import { jsx, LinkProps } from 'theme-ui';
 import Link from 'next/link';
 
 export const NextLink: FC<LinkProps & { to?: string }> = ({
-  href,
-  to,
+  href = '',
   children,
   ...props
-}) => (
-  <Link href={href || to || ''}>
-    <a {...props}>{children}</a>
-  </Link>
-);
+}) => {
+  const urlparts = href.split('/');
+  const isHomePage =
+    urlparts.length === 2 && urlparts[0] === '' && urlparts[1] === '';
+  const isDocTypeHome =
+    (!isHomePage && urlparts.length === 2) ||
+    (urlparts.length === 3 && urlparts[2] === '');
+  const dynamicHref = isHomePage
+    ? '/'
+    : isDocTypeHome
+    ? '/[doctype]'
+    : '/[doctype]/[...docid]';
+  return (
+    <Link href={dynamicHref} as={href}>
+      <a {...props}>{children}</a>
+    </Link>
+  );
+};
diff --git a/integrations/nextjs-plugin/src/index.ts b/integrations/nextjs-plugin/src/index.ts
index e5210474d..ba520d07b 100644
--- a/integrations/nextjs-plugin/src/index.ts
+++ b/integrations/nextjs-plugin/src/index.ts
@@ -1 +1,2 @@
 export * from './components/Layout';
+export * from './store';
diff --git a/integrations/nextjs-plugin/src/store.ts b/integrations/nextjs-plugin/src/store.ts
new file mode 100644
index 000000000..8e7b78bbd
--- /dev/null
+++ b/integrations/nextjs-plugin/src/store.ts
@@ -0,0 +1,7 @@
+import { LoadingStore, Store } from '@component-controls/loader';
+
+const bundle = require('@component-controls/webpack-compile/bundle');
+
+const store: LoadingStore = new Store(bundle);
+
+export { store };
diff --git a/ui/app/README.md b/ui/app/README.md
index 3c3ba59df..802aae7a1 100644
--- a/ui/app/README.md
+++ b/ui/app/README.md
@@ -124,6 +124,7 @@ _DocPage [source code](https://github.com/ccontrols/component-controls/tree/mast
 | ----------- | -------- | --------------- |
 | `type`      | _string_ | document type   |
 | `activeTab` | _string_ | active page tab |
+| `category`  | _string_ |                 |
 
 ## <ins>DocumentHomePage</ins>
 
diff --git a/ui/app/src/DocPage/DocPage.tsx b/ui/app/src/DocPage/DocPage.tsx
index 52bee87b2..4465192e2 100644
--- a/ui/app/src/DocPage/DocPage.tsx
+++ b/ui/app/src/DocPage/DocPage.tsx
@@ -4,16 +4,22 @@ import { jsx } from 'theme-ui';
 import { BlockContext } from '@component-controls/blocks';
 import { PageContainer } from '../PageContainer';
 import { SidebarsPage, DocPageProps } from '../SidebarsPage';
+import { CategoryPage } from '../CategoryPage';
 
 /**
  * documentation page for current document.
  * will check if the page has a layout with sidebars or if the page is standalone.
  */
-export const DocPage: FC<Omit<DocPageProps, 'doc'>> = ({
+export const DocPage: FC<Omit<DocPageProps, 'doc'> & { category?: string }> = ({
   type = 'story',
+  category,
   ...props
 }) => {
   const { storeProvider, docId } = useContext(BlockContext);
+  if (category) {
+    return <CategoryPage type={type} category={category} />;
+  }
+
   const doc = docId ? storeProvider.getStoryDoc(docId) : undefined;
 
   const hasNoSideBars = doc && !doc.navSidebar && !doc.contextSidebar;
diff --git a/ui/blocks/src/Container/Container.tsx b/ui/blocks/src/Container/Container.tsx
index a0493ce53..a40a597fc 100644
--- a/ui/blocks/src/Container/Container.tsx
+++ b/ui/blocks/src/Container/Container.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx, Box, Text } from 'theme-ui';
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, Fragment } from 'react';
 import { dateToLocalString } from '@component-controls/core';
 import { Value } from '@component-controls/components';
 import { Title } from '../Title';
@@ -22,12 +22,20 @@ export const Container: FC<ContainerProps> = ({ children, author }) => {
       <Box variant="blockpagecontainer.inforow">
         <EditPage />
         <Box variant="blockpagecontainer.createdbox.container">
-          <Value label="created:" value={dateToLocalString(doc?.date)} />
-          <Text variant="blockpagecontainer.createdbox.separator">,</Text>
-          <Value
-            label="updated:"
-            value={dateToLocalString(doc?.dateModified)}
-          />
+          {doc?.date && (
+            <Fragment>
+              <Value label="created:" value={dateToLocalString(doc.date)} />
+              {doc?.dateModified && (
+                <Text variant="blockpagecontainer.createdbox.separator">,</Text>
+              )}
+            </Fragment>
+          )}
+          {doc?.dateModified && (
+            <Value
+              label="updated:"
+              value={dateToLocalString(doc.dateModified)}
+            />
+          )}
           {author}
         </Box>
       </Box>
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
index 38397a90f..6e2a80a63 100644
--- a/ui/components/src/ThemeContext/theme.ts
+++ b/ui/components/src/ThemeContext/theme.ts
@@ -588,7 +588,8 @@ export const theme: ControlsTheme = {
     color: 'text',
     fontFamily: 'body',
     flex: '1 0 auto',
-    p: 4,
+    py: 4,
+    px: 5,
     margin: 'auto',
     width: '100%',
     position: 'relative',