storybook 10.3.0-alpha.0 → 10.3.0-alpha.1

package/dist/core-server/index.js

@@ -1,20 +1,20 @@
-import CJS_COMPAT_NODE_URL_4e9y47oshw1 from 'node:url';
-import CJS_COMPAT_NODE_PATH_4e9y47oshw1 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_4e9y47oshw1 from "node:module";
+import CJS_COMPAT_NODE_URL_zqey0uqkkfj from 'node:url';
+import CJS_COMPAT_NODE_PATH_zqey0uqkkfj from 'node:path';
+import CJS_COMPAT_NODE_MODULE_zqey0uqkkfj from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_4e9y47oshw1.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_4e9y47oshw1.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_4e9y47oshw1.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_zqey0uqkkfj.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_zqey0uqkkfj.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_zqey0uqkkfj.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   toEstree
-} from "../_node-chunks/chunk-SXSROWK5.js";
+} from "../_node-chunks/chunk-MQRFGFNQ.js";
 import {
   StatusTypeIdMismatchError
-} from "../_node-chunks/chunk-WEV5QRLC.js";
+} from "../_node-chunks/chunk-J3ELUK74.js";
 import {
   debounce,
   generateStoryFile,
@@ -25,69 +25,69 @@ import {
   sendTelemetryError,
   useStatics,
   withTelemetry
-} from "../_node-chunks/chunk-DPH2UCZZ.js";
+} from "../_node-chunks/chunk-XDPBSRAB.js";
 import {
   detectPnp
-} from "../_node-chunks/chunk-L7XEZ3OX.js";
-import "../_node-chunks/chunk-XD4YM6VU.js";
+} from "../_node-chunks/chunk-Y3PKDQ4M.js";
+import "../_node-chunks/chunk-VEH2EH3O.js";
 import {
   StorybookError
-} from "../_node-chunks/chunk-UIFZBVEB.js";
+} from "../_node-chunks/chunk-H7D4CVP2.js";
 import {
   telemetry
-} from "../_node-chunks/chunk-ECXPVHM6.js";
-import "../_node-chunks/chunk-MP3TH4TQ.js";
+} from "../_node-chunks/chunk-VAWKE2WR.js";
+import "../_node-chunks/chunk-PRGD4PPZ.js";
 import {
   optionalEnvToBoolean,
   require_cross_spawn,
   resolveImport,
   supportedExtensions,
   userOrAutoTitleFromSpecifier
-} from "../_node-chunks/chunk-WY5ZA2BT.js";
-import "../_node-chunks/chunk-PMDMPQ4D.js";
-import "../_node-chunks/chunk-QRXP6OHU.js";
+} from "../_node-chunks/chunk-XGCRSXNA.js";
+import "../_node-chunks/chunk-OWFCNEJA.js";
+import "../_node-chunks/chunk-GOFZ5AI4.js";
 import {
   require_pretty_hrtime
-} from "../_node-chunks/chunk-HU47ACHM.js";
-import "../_node-chunks/chunk-JC4EH5XJ.js";
-import "../_node-chunks/chunk-EKE4NU7S.js";
+} from "../_node-chunks/chunk-TGA5YZ47.js";
+import "../_node-chunks/chunk-PHOKMPEA.js";
+import "../_node-chunks/chunk-Y3BQKYFK.js";
 import {
   invariant,
   up2 as up
-} from "../_node-chunks/chunk-STKSD6QT.js";
-import "../_node-chunks/chunk-M3FEZVKN.js";
+} from "../_node-chunks/chunk-NFDBZKV6.js";
+import "../_node-chunks/chunk-CR23DEWX.js";
 import {
   importModule,
   resolvePackageDir
-} from "../_node-chunks/chunk-F4NW7OLO.js";
+} from "../_node-chunks/chunk-FIDYKCZW.js";
 import {
   dirname,
   join,
   relative,
   resolve
-} from "../_node-chunks/chunk-3B7C4FEQ.js";
+} from "../_node-chunks/chunk-74PNH6JI.js";
 import {
   slash
-} from "../_node-chunks/chunk-4CKOLZCE.js";
-import "../_node-chunks/chunk-2GDFAXX5.js";
+} from "../_node-chunks/chunk-MJPMP6AB.js";
+import "../_node-chunks/chunk-36AZRL2D.js";
 import {
   Tag
-} from "../_node-chunks/chunk-CHJGYZHC.js";
+} from "../_node-chunks/chunk-CCGS5R3P.js";
 import {
   require_dist
-} from "../_node-chunks/chunk-WBSFK4AO.js";
+} from "../_node-chunks/chunk-4WL6MGXA.js";
 import {
   require_lib,
   require_src
-} from "../_node-chunks/chunk-ZE2TRJ2H.js";
+} from "../_node-chunks/chunk-BOYAUA6D.js";
 import {
   require_picocolors
-} from "../_node-chunks/chunk-MGDZKZCC.js";
+} from "../_node-chunks/chunk-Z2ZHJPAA.js";
 import {
   __commonJS,
   __require,
   __toESM
-} from "../_node-chunks/chunk-SXSM6HLI.js";
+} from "../_node-chunks/chunk-JFSKHQG7.js";
 
 // ../../node_modules/glob-to-regexp/index.js
 var require_glob_to_regexp = __commonJS({
@@ -4544,7 +4544,7 @@ function print(p) {
 // src/core-server/utils/get-builders.ts
 import { MissingBuilderError } from "storybook/internal/server-errors";
 async function getManagerBuilder() {
-  return await import("../_node-chunks/builder-manager-5HPOYFJR.js");
+  return await import("../_node-chunks/builder-manager-KERY565B.js");
 }
 async function getPreviewBuilder(resolvedPreviewBuilder) {
   return await importModule(resolvedPreviewBuilder);
@@ -4608,7 +4608,7 @@ function watchStorySpecifiers(specifiers, options, onInvalidate) {
           // files can be e.g. '**/foo/*/*.js' so we just want the last bit,
           // because the directory could already be within the files part (e.g. './x/foo/bar')
           basename(specifier.files)
-        ), { globby } = await import("../_node-chunks/globby-ON4YVWHY.js");
+        ), { globby } = await import("../_node-chunks/globby-GL3THFIK.js");
         (await globby(slash(dirGlob), commonGlobOptions(dirGlob))).forEach((filePath) => {
           let fileImportPath = toImportPath(filePath);
           specifier.importPathMatcher.exec(fileImportPath) && onInvalidate(fileImportPath, removed);
@@ -4687,16 +4687,20 @@ import { logger as logger2 } from "storybook/internal/node-logger";
 // src/core-server/utils/manifests/render-components-manifest.ts
 import path from "node:path";
 import { groupBy } from "storybook/internal/common";
-function renderComponentsManifest(manifest) {
+function renderComponentsManifest(manifest, docsManifest) {
   let entries = Object.entries(manifest?.components ?? {}).sort(
     (a, b) => (a[1].name || a[0]).localeCompare(b[1].name || b[0])
-  ), analyses = entries.map(([, c]) => analyzeComponent(c)), totals = {
+  ), docsEntries = Object.entries(docsManifest?.docs ?? {}).sort(
+    (a, b) => (a[1].name || a[0]).localeCompare(b[1].name || b[0])
+  ), analyses = entries.map(([, c]) => analyzeComponent(c)), docsAnalyses = docsEntries.map(([, d]) => analyzeDoc(d)), attachedDocs = analyses.reduce((sum, a) => sum + a.totalDocs, 0), attachedDocsWithError = analyses.reduce((sum, a) => sum + a.docsErrors, 0), unattachedDocsWithError = docsAnalyses.filter((a) => a.hasError).length, totals = {
     components: entries.length,
     componentsWithPropTypeError: analyses.filter((a) => a.hasPropTypeError).length,
     infos: analyses.filter((a) => a.hasWarns).length,
     stories: analyses.reduce((sum, a) => sum + a.totalStories, 0),
-    storyErrors: analyses.reduce((sum, a) => sum + a.storyErrors, 0)
-  }, allPill = '<a class="filter-pill all" data-k="all" href="#filter-all">All</a>', compErrorsPill = totals.componentsWithPropTypeError > 0 ? `<a class="filter-pill err" data-k="errors" href="#filter-errors">${totals.componentsWithPropTypeError}/${totals.components} prop type ${plural(totals.componentsWithPropTypeError, "error")}</a>` : `<span class="filter-pill ok" aria-disabled="true">${totals.components} components ok</span>`, compInfosPill = totals.infos > 0 ? `<a class="filter-pill info" data-k="infos" href="#filter-infos">${totals.infos}/${totals.components} ${plural(totals.infos, "info", "infos")}</a>` : "", storiesPill = totals.storyErrors > 0 ? `<a class="filter-pill err" data-k="story-errors" href="#filter-story-errors">${totals.storyErrors}/${totals.stories} story errors</a>` : `<span class="filter-pill ok" aria-disabled="true">${totals.stories} ${plural(totals.stories, "story", "stories")} ok</span>`, grid = entries.map(([key, c], idx) => renderComponentCard(key, c, `${idx}`)).join(""), errorGroups = Object.entries(
+    storyErrors: analyses.reduce((sum, a) => sum + a.storyErrors, 0),
+    docs: docsEntries.length + attachedDocs,
+    docsWithError: unattachedDocsWithError + attachedDocsWithError
+  }, allPill = '<a class="filter-pill all" data-k="all" href="#filter-all">All</a>', compErrorsPill = totals.componentsWithPropTypeError > 0 ? `<a class="filter-pill err" data-k="errors" href="#filter-errors">${totals.componentsWithPropTypeError}/${totals.components} prop type ${plural(totals.componentsWithPropTypeError, "error")}</a>` : totals.components > 0 ? `<span class="filter-pill ok" aria-disabled="true">${totals.components} components ok</span>` : "", compInfosPill = totals.infos > 0 ? `<a class="filter-pill info" data-k="infos" href="#filter-infos">${totals.infos}/${totals.components} ${plural(totals.infos, "info", "infos")}</a>` : "", storiesPill = totals.storyErrors > 0 ? `<a class="filter-pill err" data-k="story-errors" href="#filter-story-errors">${totals.storyErrors}/${totals.stories} story errors</a>` : totals.stories > 0 ? `<span class="filter-pill ok" aria-disabled="true">${totals.stories} ${plural(totals.stories, "story", "stories")} ok</span>` : "", docsPill = totals.docs > 0 ? totals.docsWithError > 0 ? `<a class="filter-pill info" data-k="docs" href="#filter-docs">${totals.docsWithError}/${totals.docs} doc ${plural(totals.docsWithError, "error")}</a>` : `<a class="filter-pill ok" data-k="docs" href="#filter-docs">${totals.docs} ${plural(totals.docs, "doc")} ok</a>` : "", grid = entries.map(([key, c], idx) => renderComponentCard(key, c, `${idx}`)).join(""), docsGrid = docsEntries.map(([key, d], idx) => renderDocCard(key, d, `doc-${idx}`)).join(""), errorGroups = Object.entries(
     groupBy(
       entries.map(([, it]) => it).filter((it) => it.error),
       (manifest2) => manifest2.error?.name ?? "Error"
@@ -4840,7 +4844,9 @@ function renderComponentsManifest(manifest) {
       #filter-all:target ~ header .filter-pill[data-k='all'],
       #filter-errors:target ~ header .filter-pill[data-k='errors'],
       #filter-infos:target ~ header .filter-pill[data-k='infos'],
-      #filter-story-errors:target ~ header .filter-pill[data-k='story-errors'] {
+      #filter-story-errors:target ~ header .filter-pill[data-k='story-errors'],
+      #filter-doc-errors:target ~ header .filter-pill[data-k='docs'],
+      #filter-docs:target ~ header .filter-pill[data-k='docs'] {
           box-shadow: 0 0 0 var(--active-ring) currentColor;
           border-color: currentColor;
       }
@@ -4849,7 +4855,9 @@ function renderComponentsManifest(manifest) {
       #filter-all,
       #filter-errors,
       #filter-infos,
-      #filter-story-errors {
+      #filter-story-errors,
+      #filter-doc-errors,
+      #filter-docs {
           display: none;
       }
 
@@ -4962,6 +4970,8 @@ function renderComponentsManifest(manifest) {
       .tg-err:checked + label.as-toggle,
       .tg-info:checked + label.as-toggle,
       .tg-stories:checked + label.as-toggle,
+      .tg-docs:checked + label.as-toggle,
+      .tg-content:checked + label.as-toggle,
       .tg-props:checked + label.as-toggle {
           box-shadow: 0 0 0 var(--active-ring) currentColor;
           border-color: currentColor;
@@ -4991,6 +5001,16 @@ function renderComponentsManifest(manifest) {
           gap: 8px;
       }
 
+      .tg-docs:checked ~ .panels .panel-docs {
+          display: grid;
+          gap: 8px;
+      }
+
+      .tg-content:checked ~ .panels .panel-content {
+          display: grid;
+          gap: 8px;
+      }
+
       .tg-props:checked ~ .panels .panel-props {
           display: grid;
       }
@@ -5151,6 +5171,19 @@ function renderComponentsManifest(manifest) {
           display: none;
       }
 
+      #filter-doc-errors:target ~ main .card:not(.has-doc-error) {
+          display: none;
+      }
+
+      #filter-docs:target ~ main .card:has(> .tg-docs),
+      #filter-docs:target ~ main .card.is-doc {
+          display: block;
+      }
+
+      #filter-docs:target ~ main .card:not(:has(> .tg-docs)):not(.is-doc) {
+          display: none;
+      }
+
       #filter-all:target ~ main .card {
           display: block;
       }
@@ -5165,6 +5198,19 @@ function renderComponentsManifest(manifest) {
           display: block;
       }
 
+      /* Section titles */
+      .section-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--muted);
+          margin: 24px 0 12px;
+          padding-bottom: 8px;
+          border-bottom: 1px solid var(--border);
+      }
+      .section-title:first-child {
+          margin-top: 0;
+      }
+
       /* When a toggle is checked, show the corresponding panel */
       .card > .tg-err:checked ~ .panels .panel-err {
           display: grid;
@@ -5178,10 +5224,20 @@ function renderComponentsManifest(manifest) {
           display: grid;
       }
 
+      .card > .tg-docs:checked ~ .panels .panel-docs {
+          display: grid;
+      }
+
+      .card > .tg-content:checked ~ .panels .panel-content {
+          display: grid;
+      }
+
       /* Add vertical spacing around panels only when any panel is visible */
       .card > .tg-err:checked ~ .panels,
       .card > .tg-info:checked ~ .panels,
       .card > .tg-stories:checked ~ .panels,
+      .card > .tg-docs:checked ~ .panels,
+      .card > .tg-content:checked ~ .panels,
       .card > .tg-props:checked ~ .panels {
           margin: 10px 0;
       }
@@ -5191,6 +5247,8 @@ function renderComponentsManifest(manifest) {
           .card:has(.tg-err:checked) label[for$='-err'],
           .card:has(.tg-info:checked) label[for$='-info'],
           .card:has(.tg-stories:checked) label[for$='-stories'],
+          .card:has(.tg-docs:checked) label[for$='-docs'],
+          .card:has(.tg-content:checked) label[for$='-content'],
           .card:has(.tg-props:checked) label[for$='-props'] {
               box-shadow: 0 0 0 1px currentColor;
               border-color: currentColor;
@@ -5215,6 +5273,17 @@ function renderComponentsManifest(manifest) {
           word-break: inherit;
           inline-size: min(100%, 120ch);
       }
+
+      /* MDX content container for docs */
+      .mdx-content {
+          background: #0f131b;
+          border: 1px solid var(--border);
+          border-radius: 10px;
+          padding: 12px;
+          max-height: 400px;
+          overflow-y: auto;
+          margin-top: 8px;
+      }
   </style>
 </head>
 <body>
@@ -5223,18 +5292,26 @@ function renderComponentsManifest(manifest) {
 <span id="filter-errors"></span>
 <span id="filter-infos"></span>
 <span id="filter-story-errors"></span>
+<span id="filter-doc-errors"></span>
+<span id="filter-docs"></span>
 <header>
   <div class="wrap">
-    <h1>Components Manifest</h1>
-    <div class="summary">${allPill}${compErrorsPill}${compInfosPill}${storiesPill}</div>
+    <h1>Manifest Debugger</h1>
+    <div class="summary">${allPill}${compErrorsPill}${compInfosPill}${storiesPill}${docsPill}</div>
   </div>
 </header>
 <main>
   <div class="wrap">
+    ${grid ? `<h2 class="section-title">Components</h2>
     <div class="grid" role="list">
-      ${grid || '<div class="card"><div class="head"><div class="hint">No components.</div></div></div>'}
-    </div>
+      ${grid}
+    </div>` : ""}
     ${errorGroups.length ? `<div class="error-groups" role="region" aria-label="Prop type error groups">${errorGroupsHTML}</div>` : ""}
+    ${docsGrid ? `<h2 class="section-title">Unattached Docs</h2>
+    <div class="grid" role="list">
+      ${docsGrid}
+    </div>` : ""}
+    ${!grid && !docsGrid ? '<div class="card"><div class="head"><div class="hint">No components or docs.</div></div></div>' : ""}
   </div>
 </main>
 </body>
@@ -5249,7 +5326,7 @@ function analyzeComponent(c) {
   c.description?.trim() || warns.push("No description found. Write a jsdoc comment such as /** Component description */."), c.import?.trim() || warns.push(
     `Specify an @import jsdoc tag on your component or your stories meta such as @import import { ${c.name} } from 'my-design-system';`
   );
-  let totalStories = c.stories?.length ?? 0, storyErrors = (c.stories ?? []).filter((e) => !!e?.error).length, storyOk = totalStories - storyErrors, hasAnyError = hasPropTypeError || storyErrors > 0;
+  let totalStories = c.stories?.length ?? 0, storyErrors = (c.stories ?? []).filter((e) => !!e?.error).length, storyOk = totalStories - storyErrors, docsEntries = c.docs ? Object.values(c.docs) : [], totalDocs = docsEntries.length, docsErrors = docsEntries.filter((d) => !!d?.error).length, docsOk = totalDocs - docsErrors, hasAnyError = hasPropTypeError || storyErrors > 0 || docsErrors > 0;
   return {
     hasPropTypeError,
     hasAnyError,
@@ -5257,7 +5334,15 @@ function analyzeComponent(c) {
     warns,
     totalStories,
     storyErrors,
-    storyOk
+    storyOk,
+    totalDocs,
+    docsErrors,
+    docsOk
+  };
+}
+function analyzeDoc(d) {
+  return {
+    hasError: !!d.error
   };
 }
 function note(title, bodyHTML, kind) {
@@ -5267,8 +5352,48 @@ function note(title, bodyHTML, kind) {
       <div class="note-body">${bodyHTML}</div>
     </div>`;
 }
+function renderDocCard(key, d, id) {
+  let a = analyzeDoc(d), statusDot = a.hasError ? "dot-err" : "dot-ok", slug = `${id}-${(d.id || key).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`, errorBadge = a.hasError ? `<label for="${slug}-err" class="badge err as-toggle">error</label>` : "", contentBadge = d.content ? `<label for="${slug}-content" class="badge ok as-toggle">view content</label>` : "";
+  return `
+<article
+  class="card is-doc ${a.hasError ? "has-doc-error" : "no-doc-error"}"
+  role="listitem"
+  aria-label="${esc(d.name || key)}">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot ${statusDot}"></span> ${esc(d.title || d.name || key)}</h2>
+      <div class="badges">
+        ${errorBadge}
+        ${contentBadge}
+      </div>
+    </div>
+    <div class="meta" title="${esc(d.path)}">${esc(d.id)} \xB7 ${esc(d.path)}</div>
+    ${d.summary ? `<div>${esc(d.summary)}</div>` : ""}
+  </div>
+
+  <!-- Hidden toggles must be siblings BEFORE .panels -->
+  ${a.hasError ? `<input id="${slug}-err" class="tg tg-err" type="checkbox" hidden />` : ""}
+  ${d.content ? `<input id="${slug}-content" class="tg tg-content" type="checkbox" hidden />` : ""}
+
+  <div class="panels">
+    ${a.hasError ? `
+        <div class="panel panel-err">
+          <div class="note err">
+            <div class="note-title">${esc(d.error?.name || "Error")}</div>
+            <div class="note-body"><pre><code>${esc(d.error?.message || "Unknown error")}</code></pre></div>
+          </div>
+        </div>` : ""}
+    ${d.content ? `
+        <div class="panel panel-content">
+          <div class="mdx-content">
+            <pre><code>${esc(d.content)}</code></pre>
+          </div>
+        </div>` : ""}
+  </div>
+</article>`;
+}
 function renderComponentCard(key, c, id) {
-  let a = analyzeComponent(c), statusDot = a.hasAnyError ? "dot-err" : "dot-ok", allStories = c.stories ?? [], errorStories = allStories.filter((ex) => !!ex?.error), okStories = allStories.filter((ex) => !ex?.error), slug = `c-${id}-${(c.id || key).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`, componentErrorBadge = a.hasPropTypeError ? `<label for="${slug}-err" class="badge err as-toggle">prop type error</label>` : "", infosBadge = a.hasWarns ? `<label for="${slug}-info" class="badge info as-toggle">${a.warns.length} ${plural(a.warns.length, "info", "infos")}</label>` : "", storiesBadge = a.totalStories > 0 ? `<label for="${slug}-stories" class="badge ${a.storyErrors > 0 ? "err" : "ok"} as-toggle">${a.storyErrors > 0 ? `${a.storyErrors}/${a.totalStories} story errors` : `${a.totalStories} ${plural(a.totalStories, "story", "stories")}`}</label>` : "", reactDocgen = !a.hasPropTypeError && "reactDocgen" in c && c.reactDocgen, parsedDocgen = reactDocgen ? parseReactDocgen(reactDocgen) : void 0, propEntries = parsedDocgen ? Object.entries(parsedDocgen.props ?? {}) : [], propTypesBadge = !a.hasPropTypeError && propEntries.length > 0 ? `<label for="${slug}-props" class="badge ok as-toggle">${propEntries.length} ${plural(propEntries.length, "prop type")}</label>` : "", primaryBadge = componentErrorBadge || propTypesBadge, propsCode = propEntries.length > 0 ? propEntries.sort(([aName], [bName]) => aName.localeCompare(bName)).map(([propName, info]) => {
+  let a = analyzeComponent(c), statusDot = a.hasAnyError ? "dot-err" : "dot-ok", allStories = c.stories ?? [], errorStories = allStories.filter((ex) => !!ex?.error), okStories = allStories.filter((ex) => !ex?.error), allDocs = c.docs ? Object.values(c.docs) : [], errorDocs = allDocs.filter((d) => !!d?.error), okDocs = allDocs.filter((d) => !d?.error), slug = `c-${id}-${(c.id || key).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`, componentErrorBadge = a.hasPropTypeError ? `<label for="${slug}-err" class="badge err as-toggle">prop type error</label>` : "", infosBadge = a.hasWarns ? `<label for="${slug}-info" class="badge info as-toggle">${a.warns.length} ${plural(a.warns.length, "info", "infos")}</label>` : "", storiesBadge = a.totalStories > 0 ? `<label for="${slug}-stories" class="badge ${a.storyErrors > 0 ? "err" : "ok"} as-toggle">${a.storyErrors > 0 ? `${a.storyErrors}/${a.totalStories} story errors` : `${a.totalStories} ${plural(a.totalStories, "story", "stories")}`}</label>` : "", docsBadge = a.totalDocs > 0 ? `<label for="${slug}-docs" class="badge ${a.docsErrors > 0 ? "err" : "ok"} as-toggle">${a.docsErrors > 0 ? `${a.docsErrors}/${a.totalDocs} doc errors` : `${a.totalDocs} ${plural(a.totalDocs, "doc")}`}</label>` : "", reactDocgen = !a.hasPropTypeError && "reactDocgen" in c && c.reactDocgen, parsedDocgen = reactDocgen ? parseReactDocgen(reactDocgen) : void 0, propEntries = parsedDocgen ? Object.entries(parsedDocgen.props ?? {}) : [], propTypesBadge = !a.hasPropTypeError && propEntries.length > 0 ? `<label for="${slug}-props" class="badge ok as-toggle">${propEntries.length} ${plural(propEntries.length, "prop type")}</label>` : "", primaryBadge = componentErrorBadge || propTypesBadge, propsCode = propEntries.length > 0 ? propEntries.sort(([aName], [bName]) => aName.localeCompare(bName)).map(([propName, info]) => {
     let description = (info?.description ?? "").trim(), t = (info?.type ?? "any").trim(), optional = info?.required ? "" : "?", defaultVal = (info?.defaultValue ?? "").trim(), def = defaultVal ? ` = ${defaultVal}` : "", doc = ["/**", ...description.split(`
 `).map((line) => ` * ${line}`), " */"].join(`
 `) + `
@@ -5286,7 +5411,8 @@ function renderComponentCard(key, c, id) {
   class="card 
   ${a.hasPropTypeError ? "has-error" : "no-error"} 
   ${a.hasWarns ? "has-info" : "no-info"} 
-  ${a.storyErrors ? "has-story-error" : "no-story-error"}"
+  ${a.storyErrors ? "has-story-error" : "no-story-error"}
+  ${a.docsErrors ? "has-doc-error" : "no-doc-error"}"
   role="listitem"
   aria-label="${esc(c.name || key)}">
   <div class="head">
@@ -5296,6 +5422,7 @@ function renderComponentCard(key, c, id) {
         ${primaryBadge}
         ${infosBadge}
         ${storiesBadge}
+        ${docsBadge}
       </div>
     </div>
     <div class="meta" title="${esc(c.path)}">${esc(c.id)} \xB7 ${esc(c.path)}</div>
@@ -5308,6 +5435,7 @@ function renderComponentCard(key, c, id) {
   ${a.hasPropTypeError ? `<input id="${slug}-err" class="tg tg-err" type="checkbox" hidden />` : ""}
   ${a.hasWarns ? `<input id="${slug}-info" class="tg tg-info" type="checkbox" hidden />` : ""}
   ${a.totalStories > 0 ? `<input id="${slug}-stories" class="tg tg-stories" type="checkbox" hidden />` : ""}
+  ${a.totalDocs > 0 ? `<input id="${slug}-docs" class="tg tg-docs" type="checkbox" hidden />` : ""}
   ${!a.hasPropTypeError && propEntries.length > 0 ? `<input id="${slug}-props" class="tg tg-props" type="checkbox" hidden />` : ""}
 
   <div class="panels">
@@ -5366,6 +5494,33 @@ function renderComponentCard(key, c, id) {
               ${ex?.description ? `<div class="hint">${esc(ex.description)}</div>` : ""}
               ${ex?.snippet ? `<pre><code>${esc(ex.snippet)}</code></pre>` : ""}
             </div>`
+  ).join("")}
+        </div>` : ""}
+    ${a.totalDocs > 0 ? `
+        <div class="panel panel-docs">
+          ${errorDocs.map(
+    (doc) => `
+            <div class="note err">
+              <div class="row">
+                <span class="ex-name">${esc(doc.name)}</span>
+                <span class="badge err">doc error</span>
+              </div>
+              <div class="hint">${esc(doc.path)}</div>
+              ${doc?.summary ? `<div>${esc(doc.summary)}</div>` : ""}
+              ${doc?.error?.message ? `<pre><code>${esc(doc.error.message)}</code></pre>` : ""}
+            </div>`
+  ).join("")}
+          ${okDocs.map(
+    (doc) => `
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">${esc(doc.name)}</span>
+                <span class="badge ok">doc ok</span>
+              </div>
+              <div class="hint">${esc(doc.path)}</div>
+              ${doc?.summary ? `<div>${esc(doc.summary)}</div>` : ""}
+              ${doc?.content ? `<div class="mdx-content"><pre><code>${esc(doc.content)}</code></pre></div>` : ""}
+            </div>`
   ).join("")}
         </div>` : ""}
   </div>
@@ -5449,9 +5604,12 @@ async function writeManifests(outputDir, presets) {
       Object.entries(manifests).map(
         ([name, content]) => writeFile2(join(outputDir, "manifests", `${name}.json`), JSON.stringify(content))
       )
-    ), "components" in manifests && await writeFile2(
+    ), ("components" in manifests || "docs" in manifests) && await writeFile2(
       join(outputDir, "manifests", "components.html"),
-      renderComponentsManifest(manifests.components)
+      renderComponentsManifest(
+        manifests.components,
+        manifests.docs
+      )
     );
   } catch (e) {
     logger2.error("Failed to generate manifests"), logger2.error(e instanceof Error ? e : String(e));
@@ -5467,12 +5625,12 @@ function registerManifests({ app, presets }) {
     }
   }), app.get("/manifests/components.html", async (req, res) => {
     try {
-      let manifest = (await getManifests(presets)).components;
-      if (!manifest) {
-        res.statusCode = 404, res.setHeader("Content-Type", "text/html; charset=utf-8"), res.end("<pre>No components manifest configured.</pre>");
+      let manifests = await getManifests(presets), componentsManifest = manifests.components, docsManifest = manifests.docs;
+      if (!componentsManifest && !docsManifest) {
+        res.statusCode = 404, res.setHeader("Content-Type", "text/html; charset=utf-8"), res.end("<pre>No components or docs manifest configured.</pre>");
         return;
       }
-      res.setHeader("Content-Type", "text/html; charset=utf-8"), res.end(renderComponentsManifest(manifest));
+      res.setHeader("Content-Type", "text/html; charset=utf-8"), res.end(renderComponentsManifest(componentsManifest, docsManifest));
     } catch (e) {
       res.statusCode = 500, res.setHeader("Content-Type", "text/html; charset=utf-8"), res.end(`<pre>${e instanceof Error ? e.stack : String(e)}</pre>`);
     }
@@ -5627,7 +5785,7 @@ var getAttr = (elt, what) => elt.attributes.find((n) => n.type === "JSXAttribute
     isTemplate: !1,
     metaTags: void 0,
     imports: void 0
-  }, { compile } = await import("../_node-chunks/mdx-N42X6CFJ-VU7ALTQ4.js");
+  }, { compile } = await import("../_node-chunks/mdx-N42X6CFJ-MQX7F3YI.js");
   await compile(code, {
     rehypePlugins: [[plugin, store]]
   });
@@ -5772,7 +5930,7 @@ var makeAbsolute = (otherImport, normalizedPath, workingDir) => otherImport.star
     let cacheKey = this.getFindMatchingFilesCacheKey(specifier, workingDir, ignoreWarnings), cached = this.findMatchingFilesCache.get(cacheKey);
     if (cached)
       return cached;
-    let pathToSubIndex = {}, globCwd = slash(resolve3(workingDir, specifier.directory)), globPattern = specifier.files.startsWith("!") ? `./${specifier.files}` : specifier.files, { globby } = await import("../_node-chunks/globby-ON4YVWHY.js"), files = await globby(globPattern, {
+    let pathToSubIndex = {}, globCwd = slash(resolve3(workingDir, specifier.directory)), globPattern = specifier.files.startsWith("!") ? `./${specifier.files}` : specifier.files, { globby } = await import("../_node-chunks/globby-GL3THFIK.js"), files = await globby(globPattern, {
       absolute: !0,
       cwd: globCwd,
       ...commonGlobOptions2(globPattern)

package/dist/core-server/presets/common-override-preset.js

@@ -1,21 +1,21 @@
-import CJS_COMPAT_NODE_URL_4e9y47oshw1 from 'node:url';
-import CJS_COMPAT_NODE_PATH_4e9y47oshw1 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_4e9y47oshw1 from "node:module";
+import CJS_COMPAT_NODE_URL_zqey0uqkkfj from 'node:url';
+import CJS_COMPAT_NODE_PATH_zqey0uqkkfj from 'node:path';
+import CJS_COMPAT_NODE_MODULE_zqey0uqkkfj from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_4e9y47oshw1.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_4e9y47oshw1.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_4e9y47oshw1.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_zqey0uqkkfj.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_zqey0uqkkfj.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_zqey0uqkkfj.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   slash
-} from "../../_node-chunks/chunk-4CKOLZCE.js";
+} from "../../_node-chunks/chunk-MJPMP6AB.js";
 import {
   glob
-} from "../../_node-chunks/chunk-2GDFAXX5.js";
-import "../../_node-chunks/chunk-SXSM6HLI.js";
+} from "../../_node-chunks/chunk-36AZRL2D.js";
+import "../../_node-chunks/chunk-JFSKHQG7.js";
 
 // src/core-server/utils/remove-mdx-entries.ts
 import { isAbsolute, join, relative } from "node:path";

package/dist/core-server/presets/common-preset.js

@@ -1,15 +1,15 @@
-import CJS_COMPAT_NODE_URL_4e9y47oshw1 from 'node:url';
-import CJS_COMPAT_NODE_PATH_4e9y47oshw1 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_4e9y47oshw1 from "node:module";
+import CJS_COMPAT_NODE_URL_zqey0uqkkfj from 'node:url';
+import CJS_COMPAT_NODE_PATH_zqey0uqkkfj from 'node:path';
+import CJS_COMPAT_NODE_MODULE_zqey0uqkkfj from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_4e9y47oshw1.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_4e9y47oshw1.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_4e9y47oshw1.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_zqey0uqkkfj.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_zqey0uqkkfj.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_zqey0uqkkfj.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-import "../../_node-chunks/chunk-6ADIAPP2.js";
+import "../../_node-chunks/chunk-DB5UH4IK.js";
 import {
   doesStoryFileExist,
   generateStoryFile,
@@ -17,47 +17,47 @@ import {
   parseStaticDir,
   sendTelemetryError,
   throttle
-} from "../../_node-chunks/chunk-DPH2UCZZ.js";
-import "../../_node-chunks/chunk-L7XEZ3OX.js";
-import "../../_node-chunks/chunk-XD4YM6VU.js";
-import "../../_node-chunks/chunk-UIFZBVEB.js";
+} from "../../_node-chunks/chunk-XDPBSRAB.js";
+import "../../_node-chunks/chunk-Y3PKDQ4M.js";
+import "../../_node-chunks/chunk-VEH2EH3O.js";
+import "../../_node-chunks/chunk-H7D4CVP2.js";
 import {
   isI18nPackage,
   isRouterPackage,
   isStateManagementPackage,
   isStylingPackage
-} from "../../_node-chunks/chunk-JC4EH5XJ.js";
+} from "../../_node-chunks/chunk-PHOKMPEA.js";
 import {
   globalSettings
-} from "../../_node-chunks/chunk-EKE4NU7S.js";
+} from "../../_node-chunks/chunk-Y3BQKYFK.js";
 import {
   invariant
-} from "../../_node-chunks/chunk-STKSD6QT.js";
-import "../../_node-chunks/chunk-M3FEZVKN.js";
+} from "../../_node-chunks/chunk-NFDBZKV6.js";
+import "../../_node-chunks/chunk-CR23DEWX.js";
 import {
   resolvePackageDir
-} from "../../_node-chunks/chunk-F4NW7OLO.js";
+} from "../../_node-chunks/chunk-FIDYKCZW.js";
 import {
   isAbsolute,
   join
-} from "../../_node-chunks/chunk-3B7C4FEQ.js";
+} from "../../_node-chunks/chunk-74PNH6JI.js";
 import {
   glob
-} from "../../_node-chunks/chunk-2GDFAXX5.js";
-import "../../_node-chunks/chunk-CHJGYZHC.js";
+} from "../../_node-chunks/chunk-36AZRL2D.js";
+import "../../_node-chunks/chunk-CCGS5R3P.js";
 import {
   require_dist
-} from "../../_node-chunks/chunk-WBSFK4AO.js";
-import "../../_node-chunks/chunk-YU53VQ3D.js";
-import "../../_node-chunks/chunk-ZE2TRJ2H.js";
+} from "../../_node-chunks/chunk-4WL6MGXA.js";
+import "../../_node-chunks/chunk-QQZ4ZWAS.js";
+import "../../_node-chunks/chunk-BOYAUA6D.js";
 import {
   require_picocolors
-} from "../../_node-chunks/chunk-MGDZKZCC.js";
+} from "../../_node-chunks/chunk-Z2ZHJPAA.js";
 import {
   __commonJS,
   __require,
   __toESM
-} from "../../_node-chunks/chunk-SXSM6HLI.js";
+} from "../../_node-chunks/chunk-JFSKHQG7.js";
 
 // ../../node_modules/shell-quote/quote.js
 var require_quote = __commonJS({
@@ -650,7 +650,7 @@ async function searchFiles({
   ignoredFiles = IGNORED_FILES,
   fileExtensions = FILE_EXTENSIONS
 }) {
-  let { globby, isDynamicPattern } = await import("../../_node-chunks/globby-ON4YVWHY.js"), hasSearchSpecialGlobChars = isDynamicPattern(searchQuery, { cwd }), searchQueryHasExtension = /(\.[a-z]+)$/i.test(searchQuery), fileExtensionsPattern = `{${fileExtensions.join(",")}}`, globbedSearchQuery = hasSearchSpecialGlobChars ? searchQuery : searchQueryHasExtension ? [`**/*${searchQuery}*`, `**/*${searchQuery}*/**`] : [
+  let { globby, isDynamicPattern } = await import("../../_node-chunks/globby-GL3THFIK.js"), hasSearchSpecialGlobChars = isDynamicPattern(searchQuery, { cwd }), searchQueryHasExtension = /(\.[a-z]+)$/i.test(searchQuery), fileExtensionsPattern = `{${fileExtensions.join(",")}}`, globbedSearchQuery = hasSearchSpecialGlobChars ? searchQuery : searchQueryHasExtension ? [`**/*${searchQuery}*`, `**/*${searchQuery}*/**`] : [
     `**/*${searchQuery}*.${fileExtensionsPattern}`,
     `**/*${searchQuery}*/**/*.${fileExtensionsPattern}`
   ];