storybook 10.1.0-alpha.2 → 10.1.0-alpha.4

package/dist/core-server/index.js

@@ -1,29 +1,29 @@
-import CJS_COMPAT_NODE_URL_gimmxetvr7 from 'node:url';
-import CJS_COMPAT_NODE_PATH_gimmxetvr7 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_gimmxetvr7 from "node:module";
+import CJS_COMPAT_NODE_URL_1ale42sn21 from 'node:url';
+import CJS_COMPAT_NODE_PATH_1ale42sn21 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_1ale42sn21 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_gimmxetvr7.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_gimmxetvr7.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_gimmxetvr7.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_1ale42sn21.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_1ale42sn21.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_1ale42sn21.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   detectPnp
-} from "../_node-chunks/chunk-6TX2TV3E.js";
+} from "../_node-chunks/chunk-PW7ECOTU.js";
 import {
   require_pretty_hrtime
-} from "../_node-chunks/chunk-ZN2EDLIJ.js";
+} from "../_node-chunks/chunk-5E5YDTCQ.js";
 import {
   boxen,
   require_string_width
-} from "../_node-chunks/chunk-BYQZFXRF.js";
-import "../_node-chunks/chunk-5RN3IJGF.js";
+} from "../_node-chunks/chunk-RFAREF3S.js";
+import "../_node-chunks/chunk-JS5I7ZY6.js";
 import {
   StatusTypeIdMismatchError,
   StorybookError
-} from "../_node-chunks/chunk-HFHQNHRU.js";
+} from "../_node-chunks/chunk-FU2KCZJG.js";
 import {
   getErrorLevel,
   mapStaticDir,
@@ -31,61 +31,63 @@ import {
   sendTelemetryError,
   useStatics,
   withTelemetry
-} from "../_node-chunks/chunk-ZTHTAFLY.js";
-import "../_node-chunks/chunk-RQKELEE4.js";
+} from "../_node-chunks/chunk-K3K6H2BF.js";
+import "../_node-chunks/chunk-LPBJHVNR.js";
 import {
   telemetry
-} from "../_node-chunks/chunk-FI6CLUVL.js";
-import "../_node-chunks/chunk-U6VJQXTG.js";
+} from "../_node-chunks/chunk-OXPHRY7P.js";
+import "../_node-chunks/chunk-3OPGVNKX.js";
 import {
+  resolveImport,
+  supportedExtensions,
   userOrAutoTitleFromSpecifier
-} from "../_node-chunks/chunk-GWSFLQQQ.js";
-import "../_node-chunks/chunk-XVXUF5GE.js";
-import "../_node-chunks/chunk-N3ZE2FCS.js";
-import "../_node-chunks/chunk-L5J4RBU5.js";
+} from "../_node-chunks/chunk-7332Y23R.js";
+import "../_node-chunks/chunk-T6VOUSIY.js";
+import "../_node-chunks/chunk-VCC35ZLQ.js";
+import "../_node-chunks/chunk-XCTASIYK.js";
 import {
   optionalEnvToBoolean,
   require_cross_spawn
-} from "../_node-chunks/chunk-S6RYOO4I.js";
+} from "../_node-chunks/chunk-TXDBGO2X.js";
 import {
   up2 as up
-} from "../_node-chunks/chunk-3AR5SJTX.js";
-import "../_node-chunks/chunk-OM4TBMP7.js";
+} from "../_node-chunks/chunk-PCXGFAQ3.js";
+import "../_node-chunks/chunk-ICT62CX5.js";
 import {
   invariant
-} from "../_node-chunks/chunk-D43KJFPO.js";
+} from "../_node-chunks/chunk-3GTBPTCZ.js";
 import {
   importModule,
   resolvePackageDir
-} from "../_node-chunks/chunk-ZI3WVJBS.js";
+} from "../_node-chunks/chunk-CPI4IKLK.js";
 import {
   join,
   relative,
   resolve
-} from "../_node-chunks/chunk-LJPS53G5.js";
+} from "../_node-chunks/chunk-TFBHPN6J.js";
 import {
   require_prompts
-} from "../_node-chunks/chunk-BB3ZKTWJ.js";
-import "../_node-chunks/chunk-Q5JSLT56.js";
+} from "../_node-chunks/chunk-6VWT3H7R.js";
+import "../_node-chunks/chunk-CAKHJEH6.js";
 import {
   slash
-} from "../_node-chunks/chunk-EKPHXLN6.js";
+} from "../_node-chunks/chunk-7C52H6S6.js";
 import {
   require_dist
-} from "../_node-chunks/chunk-IK3K67LJ.js";
+} from "../_node-chunks/chunk-HPERTMWB.js";
 import {
   require_lib,
   require_src
-} from "../_node-chunks/chunk-QS5MMNF7.js";
+} from "../_node-chunks/chunk-FMLH3V5B.js";
 import {
   require_picocolors
-} from "../_node-chunks/chunk-2L3QAN3W.js";
+} from "../_node-chunks/chunk-6DHXOOK2.js";
 import {
   __commonJS,
   __name,
   __require,
   __toESM
-} from "../_node-chunks/chunk-RUJOX3JR.js";
+} from "../_node-chunks/chunk-VAAX75EL.js";
 
 // ../node_modules/tsconfig-paths/lib/filesystem.js
 var require_filesystem = __commonJS({
@@ -8487,6 +8489,766 @@ import { getPrecedingUpgrade, telemetry as telemetry2 } from "storybook/internal
 import { global as global2 } from "@storybook/global";
 var import_picocolors4 = __toESM(require_picocolors(), 1);
 
+// src/core-server/manifest.ts
+import { groupBy } from "storybook/internal/common";
+function renderManifestComponentsPage(manifest) {
+  const entries = Object.entries(manifest?.components ?? {}).sort(
+    (a, b) => (a[1].name || a[0]).localeCompare(b[1].name || b[0])
+  );
+  const analyses = entries.map(([, c]) => analyzeComponent(c));
+  const totals = {
+    components: entries.length,
+    componentsWithPropTypeError: analyses.filter((a) => a.hasPropTypeError).length,
+    warnings: analyses.filter((a) => a.hasWarns).length,
+    stories: analyses.reduce((sum, a) => sum + a.totalStories, 0),
+    storyErrors: analyses.reduce((sum, a) => sum + a.storyErrors, 0)
+  };
+  const allPill = `<a class="filter-pill all" data-k="all" href="#filter-all">All</a>`;
+  const 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>`;
+  const compWarningsPill = totals.warnings > 0 ? `<a class="filter-pill warn" data-k="warnings" href="#filter-warnings">${totals.warnings}/${totals.components} ${plural(totals.warnings, "warning")}</a>` : "";
+  const 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>`;
+  const grid = entries.map(([key, c], idx) => renderComponentCard(key, c, `${idx}`)).join("");
+  const errorGroups = Object.entries(
+    groupBy(
+      entries.map(([, it]) => it).filter((it) => it.error),
+      (manifest2) => manifest2.error?.name ?? "Error"
+    )
+  );
+  const errorGroupsHTML = errorGroups.map(([error, grouped]) => {
+    const id = error.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+    const headerText = `${esc(error)}`;
+    const cards = grouped.map((manifest2, id2) => renderComponentCard(manifest2.id, manifest2, `error-${id2}`)).join("");
+    return `
+        <section class="group">
+          <input id="${id}-toggle" class="group-tg" type="checkbox" hidden />
+          <label for="${id}-toggle" class="group-header">
+            <span class="caret">\u25B8</span>
+            <span class="group-title">${headerText}</span>
+            <span class="group-count">${grouped.length}</span>
+          </label>
+          <div class="group-cards">${cards}</div>
+        </section>
+      `;
+  }).join("");
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Components Manifest</title>
+  <style>
+      :root {
+          --bg: #0b0c10;
+          --panel: #121318;
+          --muted: #9aa0a6;
+          --fg: #e8eaed;
+          --ok: #22c55e;
+          --warn: #b08900;
+          --err: #c62828;
+          --ok-bg: #0c1a13;
+          --warn-bg: #1a1608;
+          --err-bg: #1a0e0e;
+          --chip: #1f2330;
+          --border: #2b2f3a;
+          --link: #8ab4f8;
+          --active-ring: 1px; /* 1px active ring for pills and toggles */
+      }
+
+      * {
+          box-sizing: border-box;
+      }
+
+      html,
+      body {
+          margin: 0;
+          background: var(--bg);
+          color: var(--fg);
+          font: 14px/1.5 system-ui,
+          -apple-system,
+          Segoe UI,
+          Roboto,
+          Ubuntu,
+          Cantarell,
+          'Helvetica Neue',
+          Arial,
+          'Noto Sans';
+      }
+
+      .wrap {
+          max-width: 1100px;
+          margin: 0 auto;
+          padding: 16px 20px;
+      }
+
+      header {
+          position: sticky;
+          top: 0;
+          backdrop-filter: blur(6px);
+          background: color-mix(in srgb, var(--bg) 84%, transparent);
+          border-bottom: 1px solid var(--border);
+          z-index: 10;
+      }
+
+      h1 {
+          font-size: 20px;
+          margin: 0 0 6px;
+      }
+
+      .summary {
+          display: flex;
+          gap: 12px;
+          flex-wrap: wrap;
+          align-items: center;
+      }
+
+      /* Top filter pills */
+      .filter-pill {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 12px;
+          border: 1px solid var(--border);
+          border-radius: 999px;
+          background: var(--panel);
+          text-decoration: none;
+          cursor: pointer;
+          user-select: none;
+          color: var(--fg);
+      }
+
+      .filter-pill.ok {
+          color: #b9f6ca;
+          border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
+          background: color-mix(in srgb, var(--ok) 18%, #000);
+      }
+
+      .filter-pill.warn {
+          color: #ffd666;
+          border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
+          background: var(--warn-bg);
+      }
+
+      .filter-pill.err {
+          color: #ff9aa0;
+          border-color: color-mix(in srgb, var(--err) 55%, var(--border));
+          background: var(--err-bg);
+      }
+
+      .filter-pill.all {
+          color: #d7dbe0;
+          border-color: var(--border);
+          background: var(--panel);
+      }
+
+      .filter-pill[aria-disabled='true'] {
+          cursor: default;
+          text-decoration: none;
+      }
+
+      .filter-pill:focus,
+      .filter-pill:active {
+          outline: none;
+          box-shadow: none;
+      }
+
+      /* Selected top pill ring via :target */
+      #filter-all:target ~ header .filter-pill[data-k='all'],
+      #filter-errors:target ~ header .filter-pill[data-k='errors'],
+      #filter-warnings:target ~ header .filter-pill[data-k='warnings'],
+      #filter-story-errors:target ~ header .filter-pill[data-k='story-errors'] {
+          box-shadow: 0 0 0 var(--active-ring) currentColor;
+          border-color: currentColor;
+      }
+
+      /* Hidden targets for filtering */
+      #filter-all,
+      #filter-errors,
+      #filter-warnings,
+      #filter-story-errors {
+          display: none;
+      }
+
+      main {
+          padding: 36px 0 40px;
+      }
+
+      .grid {
+          display: grid;
+          grid-template-columns: 1fr;
+          gap: 18px;
+      }
+
+      /* one card per row */
+
+      .card {
+          border: 1px solid var(--border);
+          background: var(--panel);
+          border-radius: 14px;
+          padding: 14px;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+      }
+
+      .head {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+      }
+
+      .title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 10px;
+      }
+
+      .title h2 {
+          font-size: 16px;
+          margin: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+      }
+
+      .meta {
+          font-size: 12px;
+          color: var(--muted);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+      }
+
+      .kv {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+      }
+
+      .chip {
+          font-size: 12px;
+          padding: 4px 8px;
+          border-radius: 999px;
+          background: var(--chip);
+          border: 1px solid var(--border);
+      }
+
+      .hint {
+          color: var(--muted);
+          font-size: 12px;
+      }
+
+      .badges {
+          display: flex;
+          gap: 8px;
+          flex-wrap: wrap;
+      }
+
+      /* Per-card badges: labels become toggles when clickable */
+      .badge {
+          font-size: 12px;
+          padding: 3px 8px;
+          border-radius: 999px;
+          border: 1px solid var(--border);
+          background: var(--chip);
+          color: #d7dbe0;
+      }
+
+      .badge.ok {
+          color: #b9f6ca;
+          border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
+      }
+
+      .badge.warn {
+          color: #ffd666;
+          border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
+      }
+
+      .badge.err {
+          color: #ff9aa0;
+          border-color: color-mix(in srgb, var(--err) 55%, var(--border));
+      }
+
+      .as-toggle {
+          cursor: pointer;
+      }
+
+      /* 1px ring on active toggle */
+      .tg-err:checked + label.as-toggle,
+      .tg-warn:checked + label.as-toggle,
+      .tg-stories:checked + label.as-toggle,
+      .tg-props:checked + label.as-toggle {
+          box-shadow: 0 0 0 var(--active-ring) currentColor;
+          border-color: currentColor;
+      }
+
+      /* Panels: hidden by default, shown when respective toggle checked */
+      .panels {
+          display: grid;
+          gap: 10px;
+      }
+
+      .panel {
+          display: none;
+      }
+
+      .tg-err:checked ~ .panels .panel-err {
+          display: grid;
+      }
+
+      .tg-warn:checked ~ .panels .panel-warn {
+          display: grid;
+          gap: 8px;
+      }
+
+      .tg-stories:checked ~ .panels .panel-stories {
+          display: grid;
+          gap: 8px;
+      }
+
+      .tg-props:checked ~ .panels .panel-props {
+          display: grid;
+      }
+
+      /* Colored notes for prop type error + warnings */
+      .note {
+          padding: 12px;
+          border: 1px solid var(--border);
+          border-radius: 10px;
+      }
+
+      .note.err {
+          border-color: color-mix(in srgb, var(--err) 55%, var(--border));
+          background: var(--err-bg);
+          color: #ffd1d4;
+      }
+
+      .note.warn {
+          border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
+          background: var(--warn-bg);
+          color: #ffe9a6;
+      }
+
+      .note.ok {
+          border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
+          background: var(--ok-bg);
+          color: var(--fg);
+      }
+
+      .note-title {
+          font-weight: 600;
+          margin-bottom: 6px;
+      }
+
+      .note-body {
+          white-space: normal;
+      }
+
+      /* Story error cards */
+      .ex {
+          padding: 10px;
+          border: 1px solid var(--border);
+          border-radius: 10px;
+          background: #0f131b;
+      }
+
+      .ex.err {
+          border-color: color-mix(in srgb, var(--err) 55%, var(--border));
+      }
+
+      .row {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex-wrap: wrap;
+      }
+
+      .status-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          display: inline-block;
+      }
+
+      .dot-ok {
+          background: var(--ok);
+      }
+
+      .dot-err {
+          background: var(--err);
+      }
+
+      .ex-name {
+          font-weight: 600;
+      }
+
+      /* Error groups (visible in errors filter) */
+      .error-groups {
+          display: none;
+          margin-bottom: 16px;
+      }
+
+      .group {
+          border: 1px solid var(--border);
+          background: var(--panel);
+          border-radius: 14px;
+          overflow: hidden;
+      }
+
+      .group + .group {
+          margin-top: 12px;
+      }
+
+      .group-header {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          padding: 12px 14px;
+          cursor: pointer;
+          border-bottom: 1px solid var(--border);
+      }
+
+      .group-header:hover {
+          background: #141722;
+      }
+
+      .group-title {
+          font-weight: 600;
+          flex: 1;
+      }
+
+      .group-count {
+          font-size: 12px;
+          color: var(--muted);
+      }
+
+      .group-cards {
+          display: none;
+          padding: 12px;
+      }
+
+      .group .card {
+          margin: 12px 0;
+      }
+
+      .group .card:first-child {
+          margin-top: 0;
+      }
+
+      .group .card:last-child {
+          margin-bottom: 0;
+      }
+
+      /* caret rotation */
+      .group-tg:checked + label .caret {
+          transform: rotate(90deg);
+      }
+
+      .caret {
+          transition: transform 0.15s ease;
+      }
+
+      /* toggle body */
+      .group-tg:checked ~ .group-cards {
+          display: block;
+      }
+
+      /* CSS-only filtering of cards via top pills */
+      #filter-errors:target ~ main .card:not(.has-error):not(.has-story-error) {
+          display: none;
+      }
+
+      #filter-warnings:target ~ main .card:not(.has-warn) {
+          display: none;
+      }
+
+      #filter-story-errors:target ~ main .card:not(.has-story-error) {
+          display: none;
+      }
+
+      #filter-all:target ~ main .card {
+          display: block;
+      }
+
+      /* In errors view, hide standalone component-error cards in the regular grid (they will appear in groups) */
+      #filter-errors:target ~ main .grid .card.has-error {
+          display: none;
+      }
+
+      /* Show grouped section only in errors view */
+      #filter-errors:target ~ main .error-groups {
+          display: block;
+      }
+
+      /* When a toggle is checked, show the corresponding panel */
+      .card > .tg-err:checked ~ .panels .panel-err {
+          display: grid;
+      }
+
+      .card > .tg-warn:checked ~ .panels .panel-warn {
+          display: grid;
+      }
+
+      .card > .tg-stories:checked ~ .panels .panel-stories {
+          display: grid;
+      }
+
+      /* Optional: a subtle 1px ring on the active badge, using :has() if available */
+      @supports selector(.card:has(.tg-err:checked)) {
+          .card:has(.tg-err:checked) label[for$='-err'],
+          .card:has(.tg-warn:checked) label[for$='-warn'],
+          .card:has(.tg-stories:checked) label[for$='-stories'],
+          .card:has(.tg-props:checked) label[for$='-props'] {
+              box-shadow: 0 0 0 1px currentColor;
+              border-color: currentColor;
+          }
+      }
+  </style>
+</head>
+<body>
+<!-- Hidden targets for the top-level filters -->
+<span id="filter-all"></span>
+<span id="filter-errors"></span>
+<span id="filter-warnings"></span>
+<span id="filter-story-errors"></span>
+<header>
+  <div class="wrap">
+    <h1>Components Manifest</h1>
+    <div class="summary">${allPill}${compErrorsPill}${compWarningsPill}${storiesPill}</div>
+  </div>
+</header>
+<main>
+  <div class="wrap">
+    <div class="grid" role="list">
+      ${grid || `<div class="card"><div class="head"><div class="hint">No components.</div></div></div>`}
+    </div>
+    ${errorGroups.length ? `<div class="error-groups" role="region" aria-label="Prop type error groups">${errorGroupsHTML}</div>` : ""}
+  </div>
+</main>
+</body>
+</html>  `;
+}
+__name(renderManifestComponentsPage, "renderManifestComponentsPage");
+var esc = /* @__PURE__ */ __name((s) => String(s ?? "").replace(
+  /[&<>"']/g,
+  (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
+), "esc");
+var plural = /* @__PURE__ */ __name((n, one, many = `${one}s`) => n === 1 ? one : many, "plural");
+function analyzeComponent(c) {
+  const hasPropTypeError = !!c.error;
+  const warns = [];
+  if (!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';`
+    );
+  }
+  const totalStories = c.stories?.length ?? 0;
+  const storyErrors = (c.stories ?? []).filter((e) => !!e?.error).length;
+  const storyOk = totalStories - storyErrors;
+  const hasAnyError = hasPropTypeError || storyErrors > 0;
+  return {
+    hasPropTypeError,
+    hasAnyError,
+    hasWarns: warns.length > 0,
+    warns,
+    totalStories,
+    storyErrors,
+    storyOk
+  };
+}
+__name(analyzeComponent, "analyzeComponent");
+function note(title, bodyHTML, kind) {
+  return `
+    <div class="note ${kind}">
+      <div class="note-title">${esc(title)}</div>
+      <div class="note-body">${bodyHTML}</div>
+    </div>`;
+}
+__name(note, "note");
+function renderComponentCard(key, c, id) {
+  const a = analyzeComponent(c);
+  const statusDot = a.hasAnyError ? "dot-err" : "dot-ok";
+  const allStories = c.stories ?? [];
+  const errorStories = allStories.filter((ex) => !!ex?.error);
+  const okStories = allStories.filter((ex) => !ex?.error);
+  const slug = `c-${id}-${(c.id || key).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`;
+  const componentErrorBadge = a.hasPropTypeError ? `<label for="${slug}-err" class="badge err as-toggle">prop type error</label>` : "";
+  const warningsBadge = a.hasWarns ? `<label for="${slug}-warn" class="badge warn as-toggle">${a.warns.length} ${plural(a.warns.length, "warning")}</label>` : "";
+  const 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>` : "";
+  const hasDocgen = !a.hasPropTypeError && "reactDocgen" in c && c.reactDocgen;
+  const parsedDocgen = hasDocgen ? parseReactDocgen(c.reactDocgen) : void 0;
+  const propEntries = parsedDocgen ? Object.entries(parsedDocgen.props ?? {}) : [];
+  const propTypesBadge = !a.hasPropTypeError && propEntries.length > 0 ? `<label for="${slug}-props" class="badge ok as-toggle">${propEntries.length} ${plural(propEntries.length, "prop type")}</label>` : "";
+  const primaryBadge = componentErrorBadge || propTypesBadge;
+  const propsCode = propEntries.length > 0 ? propEntries.sort(([aName], [bName]) => aName.localeCompare(bName)).map(([propName, info]) => {
+    const description = (info?.description ?? "").trim();
+    const t = (info?.type ?? "any").trim();
+    const optional = info?.required ? "" : "?";
+    const defaultVal = (info?.defaultValue ?? "").trim();
+    const def = defaultVal ? ` = ${defaultVal}` : "";
+    const doc = description ? `/** ${description} */
+` : "";
+    return `${doc}${propName}${optional}: ${t}${def}`;
+  }).join("\n\n") : "";
+  const tags = c.jsDocTags && typeof c.jsDocTags === "object" ? Object.entries(c.jsDocTags).flatMap(
+    ([k, v]) => (Array.isArray(v) ? v : [v]).map(
+      (val) => `<span class="chip">${esc(k)}: ${esc(val)}</span>`
+    )
+  ).join("") : "";
+  esc(c.error?.message || "Unknown error");
+  return `
+<article
+  class="card 
+  ${a.hasPropTypeError ? "has-error" : "no-error"} 
+  ${a.hasWarns ? "has-warn" : "no-warn"} 
+  ${a.storyErrors ? "has-story-error" : "no-story-error"}"
+  role="listitem"
+  aria-label="${esc(c.name || key)}">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot ${statusDot}"></span> ${esc(c.name || key)}</h2>
+      <div class="badges">
+        ${primaryBadge}
+        ${warningsBadge}
+        ${storiesBadge}
+      </div>
+    </div>
+    <div class="meta" title="${esc(c.path)}">${esc(c.id)} \xB7 ${esc(c.path)}</div>
+    ${c.summary ? `<div>${esc(c.summary)}</div>` : ""}
+    ${c.description ? `<div class="hint">${esc(c.description)}</div>` : ""}
+    ${tags ? `<div class="kv">${tags}</div>` : ""}
+  </div>
+
+  <!-- \u2B07\uFE0F Hidden toggles must be siblings BEFORE .panels -->
+  ${a.hasPropTypeError ? `<input id="${slug}-err" class="tg tg-err" type="checkbox" hidden />` : ""}
+  ${a.hasWarns ? `<input id="${slug}-warn" class="tg tg-warn" type="checkbox" hidden />` : ""}
+  ${a.totalStories > 0 ? `<input id="${slug}-stories" class="tg tg-stories" type="checkbox" hidden />` : ""}
+  ${!a.hasPropTypeError && propEntries.length > 0 ? `<input id="${slug}-props" class="tg tg-props" type="checkbox" hidden />` : ""}
+
+  <div class="panels">
+    ${a.hasPropTypeError ? `
+        <div class="panel panel-err">
+          ${note("Prop type error", `<pre><code>${esc(c.error?.message || "Unknown error")}</code></pre>`, "err")}
+        </div>` : ""}
+    ${a.hasWarns ? `
+        <div class="panel panel-warn">
+          ${a.warns.map((w) => note("Warning", esc(w), "warn")).join("")}
+        </div>` : ""}
+    ${!a.hasPropTypeError && propEntries.length > 0 ? `
+        <div class="panel panel-props">
+          <div class="note ok">
+            <div class="row">
+              <span class="ex-name">Prop types</span>
+              <span class="badge ok">${propEntries.length} ${plural(propEntries.length, "prop type")}</span>
+            </div>
+            <pre><code>${esc(propsCode)}</code></pre>
+          </div>
+        </div>` : ""}
+    ${a.totalStories > 0 ? `
+        <div class="panel panel-stories">
+          ${errorStories.map(
+    (ex, j) => `
+            <div class="note err">
+              <div class="row">
+                <span class="ex-name">${esc(ex.name)}</span>
+                <span class="badge err">story error</span>
+              </div>
+              ${ex?.snippet ? `<pre><code>${esc(ex.snippet)}</code></pre>` : ""}
+              ${ex?.error?.message ? `<pre><code>${esc(ex.error.message)}</code></pre>` : ""}
+            </div>`
+  ).join("")}
+          ${okStories.map(
+    (ex, k) => `
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">${esc(ex.name)}</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              ${ex?.snippet ? `<pre><code>${esc(ex.snippet)}</code></pre>` : ""}
+            </div>`
+  ).join("")}
+        </div>` : ""}
+  </div>
+</article>`;
+}
+__name(renderComponentCard, "renderComponentCard");
+var parseReactDocgen = /* @__PURE__ */ __name((reactDocgen) => {
+  const props = reactDocgen?.props ?? {};
+  return {
+    props: Object.fromEntries(
+      Object.entries(props).map(([propName, prop]) => [
+        propName,
+        {
+          description: prop.description,
+          type: serializeTsType(prop.tsType ?? prop.type),
+          defaultValue: prop.defaultValue?.value,
+          required: prop.required
+        }
+      ])
+    )
+  };
+}, "parseReactDocgen");
+function serializeTsType(tsType) {
+  if (!tsType) {
+    return void 0;
+  }
+  if ("raw" in tsType && typeof tsType.raw === "string" && tsType.raw.trim().length > 0) {
+    return tsType.raw;
+  }
+  if (!tsType.name) {
+    return void 0;
+  }
+  if ("elements" in tsType) {
+    if (tsType.name === "union") {
+      const parts = (tsType.elements ?? []).map((el) => serializeTsType(el) ?? "unknown");
+      return parts.join(" | ");
+    }
+    if (tsType.name === "intersection") {
+      const parts = (tsType.elements ?? []).map((el) => serializeTsType(el) ?? "unknown");
+      return parts.join(" & ");
+    }
+    if (tsType.name === "Array") {
+      const el = (tsType.elements ?? [])[0];
+      const inner = serializeTsType(el) ?? "unknown";
+      return `${inner}[]`;
+    }
+    if (tsType.name === "tuple") {
+      const parts = (tsType.elements ?? []).map((el) => serializeTsType(el) ?? "unknown");
+      return `[${parts.join(", ")}]`;
+    }
+  }
+  if ("value" in tsType && tsType.name === "literal") {
+    return tsType.value;
+  }
+  if ("signature" in tsType && tsType.name === "signature") {
+    if (tsType.type === "function") {
+      const args = (tsType.signature?.arguments ?? []).map((a) => {
+        const argType = serializeTsType(a.type) ?? "any";
+        return `${a.name}: ${argType}`;
+      });
+      const ret = serializeTsType(tsType.signature?.return) ?? "void";
+      return `(${args.join(", ")}) => ${ret}`;
+    }
+    if (tsType.type === "object") {
+      const props = (tsType.signature?.properties ?? []).map((p) => {
+        const req = Boolean(p.value?.required);
+        const propType = serializeTsType(p.value) ?? "any";
+        return `${p.key}${req ? "" : "?"}: ${propType}`;
+      });
+      return `{ ${props.join("; ")} }`;
+    }
+    return "unknown";
+  }
+  if ("elements" in tsType) {
+    const inner = (tsType.elements ?? []).map((el) => serializeTsType(el) ?? "unknown");
+    if (inner.length > 0) {
+      return `${tsType.name}<${inner.join(", ")}>`;
+    }
+  }
+  return tsType.name;
+}
+__name(serializeTsType, "serializeTsType");
+
 // src/core-server/utils/StoryIndexGenerator.ts
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
@@ -8719,7 +9481,7 @@ var StoryIndexGenerator = class _StoryIndexGenerator {
     }
     const pathToSubIndex = {};
     const fullGlob = slash(join2(specifier.directory, specifier.files));
-    const { globby } = await import("../_node-chunks/globby-I54LIY47.js");
+    const { globby } = await import("../_node-chunks/globby-L3NPKIS7.js");
     const files = await globby(fullGlob, {
       absolute: true,
       cwd: workingDir,
@@ -8868,17 +9630,15 @@ var StoryIndexGenerator = class _StoryIndexGenerator {
    * If no such file exists, assume that the import is from a package and return the raw
    */
   resolveComponentPath(rawComponentPath, absolutePath, matchPath) {
-    let rawPath = rawComponentPath;
-    if (matchPath) {
-      rawPath = matchPath(rawPath) ?? rawPath;
-    }
-    const absoluteComponentPath = resolve2(dirname(absolutePath), rawPath);
-    const existing = ["", ".js", ".ts", ".jsx", ".tsx", ".mjs", ".mts"].map((ext) => `${absoluteComponentPath}${ext}`).find((candidate) => existsSync(candidate));
-    if (existing) {
-      const relativePath = relative2(this.options.workingDir, existing);
-      return slash(normalizeStoryPath(relativePath));
+    const matchedPath = matchPath?.(rawComponentPath, void 0, void 0, supportedExtensions) ?? rawComponentPath;
+    let resolved;
+    try {
+      resolved = resolveImport(matchedPath, { basedir: dirname(absolutePath) });
+    } catch (_) {
+      return matchedPath;
     }
-    return rawComponentPath;
+    const relativePath = relative2(this.options.workingDir, resolved);
+    return slash(normalizeStoryPath(relativePath));
   }
   async extractStories(specifier, absolutePath, projectTags = []) {
     const relativePath = relative2(this.options.workingDir, absolutePath);
@@ -8977,7 +9737,7 @@ var StoryIndexGenerator = class _StoryIndexGenerator {
       const normalizedPath = normalizeStoryPath(relativePath);
       const importPath = slash(normalizedPath);
       const content = await readFile(absolutePath, { encoding: "utf8" });
-      const { analyze } = await import("../_node-chunks/dist-Q25SOSXX.js");
+      const { analyze } = await import("../_node-chunks/dist-MCOAOC3B.js");
       const result = await analyze(content);
       if (result.isTemplate) {
         return false;
@@ -9320,7 +10080,7 @@ __name(print, "print");
 // src/core-server/utils/get-builders.ts
 import { MissingBuilderError } from "storybook/internal/server-errors";
 async function getManagerBuilder() {
-  return await import("../_node-chunks/builder-manager-XRIDLU42.js");
+  return await import("../_node-chunks/builder-manager-P652CU5Z.js");
 }
 __name(getManagerBuilder, "getManagerBuilder");
 async function getPreviewBuilder(resolvedPreviewBuilder) {
@@ -9559,7 +10319,7 @@ function watchStorySpecifiers(specifiers, options, onInvalidate) {
             // because the directory could already be within the files part (e.g. './x/foo/bar')
             basename2(specifier.files)
           );
-          const { globby } = await import("../_node-chunks/globby-I54LIY47.js");
+          const { globby } = await import("../_node-chunks/globby-L3NPKIS7.js");
           const addedFiles = await globby(slash(dirGlob), commonGlobOptions2(dirGlob));
           addedFiles.forEach((filePath) => {
             const fileImportPath = toImportPath(filePath);
@@ -9881,6 +10641,10 @@ async function buildStaticStandalone(options) {
             join(options.outputDir, "manifests", "components.json"),
             JSON.stringify(manifests)
           );
+          await writeFile3(
+            join(options.outputDir, "manifests", "components.html"),
+            renderManifestComponentsPage(manifests)
+          );
         } catch (e) {
           logger4.error("Failed to generate manifests/components.json");
           logger4.error(e instanceof Error ? e : String(e));
@@ -11781,6 +12545,29 @@ async function storybookDevServer(options) {
         return;
       }
     });
+    app.get("/manifests/components.html", async (req, res) => {
+      try {
+        const componentManifestGenerator = await options.presets.apply(
+          "experimental_componentManifestGenerator"
+        );
+        const indexGenerator = await initializedStoryIndexGenerator;
+        if (!componentManifestGenerator || !indexGenerator) {
+          res.statusCode = 400;
+          res.setHeader("Content-Type", "text/html; charset=utf-8");
+          res.end(`<pre>No component manifest generator configured.</pre>`);
+          return;
+        }
+        const manifest = await componentManifestGenerator(
+          indexGenerator
+        );
+        res.setHeader("Content-Type", "text/html; charset=utf-8");
+        res.end(renderManifestComponentsPage(manifest));
+      } catch (e) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "text/html; charset=utf-8");
+        res.end(`<pre>${e instanceof Error ? e.toString() : String(e)}</pre>`);
+      }
+    });
   }
   doTelemetry(app, core2, initializedStoryIndexGenerator, options);
   async function cancelTelemetry() {