storybook 10.1.0-alpha.3 → 10.1.0-alpha.4

package/dist/core-server/index.js

@@ -1,29 +1,29 @@
-import CJS_COMPAT_NODE_URL_bqgqh4d46dd from 'node:url';
-import CJS_COMPAT_NODE_PATH_bqgqh4d46dd from 'node:path';
-import CJS_COMPAT_NODE_MODULE_bqgqh4d46dd 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_bqgqh4d46dd.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_bqgqh4d46dd.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_bqgqh4d46dd.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-NTH76OZA.js";
+} from "../_node-chunks/chunk-PW7ECOTU.js";
 import {
   require_pretty_hrtime
-} from "../_node-chunks/chunk-GMO24NTJ.js";
+} from "../_node-chunks/chunk-5E5YDTCQ.js";
 import {
   boxen,
   require_string_width
-} from "../_node-chunks/chunk-RLMJDF6S.js";
-import "../_node-chunks/chunk-NTX43F34.js";
+} from "../_node-chunks/chunk-RFAREF3S.js";
+import "../_node-chunks/chunk-JS5I7ZY6.js";
 import {
   StatusTypeIdMismatchError,
   StorybookError
-} from "../_node-chunks/chunk-CKXP5RYA.js";
+} from "../_node-chunks/chunk-FU2KCZJG.js";
 import {
   getErrorLevel,
   mapStaticDir,
@@ -31,63 +31,63 @@ import {
   sendTelemetryError,
   useStatics,
   withTelemetry
-} from "../_node-chunks/chunk-ZQY3BNST.js";
-import "../_node-chunks/chunk-N7XYNLCJ.js";
+} from "../_node-chunks/chunk-K3K6H2BF.js";
+import "../_node-chunks/chunk-LPBJHVNR.js";
 import {
   telemetry
-} from "../_node-chunks/chunk-MDXYV4OF.js";
-import "../_node-chunks/chunk-D3NGJQDZ.js";
+} from "../_node-chunks/chunk-OXPHRY7P.js";
+import "../_node-chunks/chunk-3OPGVNKX.js";
 import {
   resolveImport,
   supportedExtensions,
   userOrAutoTitleFromSpecifier
-} from "../_node-chunks/chunk-NCHBSJG3.js";
-import "../_node-chunks/chunk-TZ7GUTJ4.js";
-import "../_node-chunks/chunk-LPNJ7PJY.js";
-import "../_node-chunks/chunk-HH57J4TX.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-B63HGQAB.js";
+} from "../_node-chunks/chunk-TXDBGO2X.js";
 import {
   up2 as up
-} from "../_node-chunks/chunk-5KDXQR2J.js";
-import "../_node-chunks/chunk-SQAKXWVV.js";
+} from "../_node-chunks/chunk-PCXGFAQ3.js";
+import "../_node-chunks/chunk-ICT62CX5.js";
 import {
   invariant
-} from "../_node-chunks/chunk-5X7FGASE.js";
+} from "../_node-chunks/chunk-3GTBPTCZ.js";
 import {
   importModule,
   resolvePackageDir
-} from "../_node-chunks/chunk-TSKLBMF3.js";
+} from "../_node-chunks/chunk-CPI4IKLK.js";
 import {
   join,
   relative,
   resolve
-} from "../_node-chunks/chunk-6U2QTN2E.js";
+} from "../_node-chunks/chunk-TFBHPN6J.js";
 import {
   require_prompts
-} from "../_node-chunks/chunk-NYXHMPY4.js";
-import "../_node-chunks/chunk-JKWP2FKQ.js";
+} from "../_node-chunks/chunk-6VWT3H7R.js";
+import "../_node-chunks/chunk-CAKHJEH6.js";
 import {
   slash
-} from "../_node-chunks/chunk-MPUDYIDW.js";
+} from "../_node-chunks/chunk-7C52H6S6.js";
 import {
   require_dist
-} from "../_node-chunks/chunk-S32G4TCP.js";
+} from "../_node-chunks/chunk-HPERTMWB.js";
 import {
   require_lib,
   require_src
-} from "../_node-chunks/chunk-TDLKTACT.js";
+} from "../_node-chunks/chunk-FMLH3V5B.js";
 import {
   require_picocolors
-} from "../_node-chunks/chunk-2JHIUWIN.js";
+} from "../_node-chunks/chunk-6DHXOOK2.js";
 import {
   __commonJS,
   __name,
   __require,
   __toESM
-} from "../_node-chunks/chunk-T7KB265F.js";
+} from "../_node-chunks/chunk-VAAX75EL.js";
 
 // ../node_modules/tsconfig-paths/lib/filesystem.js
 var require_filesystem = __commonJS({
@@ -8498,15 +8498,15 @@ function renderManifestComponentsPage(manifest) {
   const analyses = entries.map(([, c]) => analyzeComponent(c));
   const totals = {
     components: entries.length,
-    componentsWithError: analyses.filter((a) => a.hasComponentError).length,
-    componentsWithWarnings: analyses.filter((a) => a.hasWarns).length,
-    examples: analyses.reduce((sum, a) => sum + a.totalExamples, 0),
-    exampleErrors: analyses.reduce((sum, a) => sum + a.exampleErrors, 0)
+    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.componentsWithError > 0 ? `<a class="filter-pill err" data-k="errors" href="#filter-errors">${totals.componentsWithError}/${totals.components} component ${plural(totals.componentsWithError, "error")}</a>` : `<span class="filter-pill ok" aria-disabled="true">${totals.components} components ok</span>`;
-  const compWarningsPill = totals.componentsWithWarnings > 0 ? `<a class="filter-pill warn" data-k="warnings" href="#filter-warnings">${totals.componentsWithWarnings}/${totals.components} component ${plural(totals.componentsWithWarnings, "warning")}</a>` : "";
-  const examplesPill = totals.exampleErrors > 0 ? `<a class="filter-pill err" data-k="example-errors" href="#filter-example-errors">${totals.exampleErrors}/${totals.examples} example errors</a>` : `<span class="filter-pill ok" aria-disabled="true">${totals.examples} examples ok</span>`;
+  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(
@@ -8655,7 +8655,7 @@ function renderManifestComponentsPage(manifest) {
       #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-example-errors:target ~ header .filter-pill[data-k='example-errors'] {
+      #filter-story-errors:target ~ header .filter-pill[data-k='story-errors'] {
           box-shadow: 0 0 0 var(--active-ring) currentColor;
           border-color: currentColor;
       }
@@ -8664,18 +8664,18 @@ function renderManifestComponentsPage(manifest) {
       #filter-all,
       #filter-errors,
       #filter-warnings,
-      #filter-example-errors {
+      #filter-story-errors {
           display: none;
       }
 
       main {
-          padding: 24px 0 40px;
+          padding: 36px 0 40px;
       }
 
       .grid {
           display: grid;
           grid-template-columns: 1fr;
-          gap: 14px;
+          gap: 18px;
       }
 
       /* one card per row */
@@ -8776,7 +8776,8 @@ function renderManifestComponentsPage(manifest) {
       /* 1px ring on active toggle */
       .tg-err:checked + label.as-toggle,
       .tg-warn:checked + label.as-toggle,
-      .tg-ex: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;
       }
@@ -8800,11 +8801,16 @@ function renderManifestComponentsPage(manifest) {
           gap: 8px;
       }
 
-      .tg-ex:checked ~ .panels .panel-ex {
+      .tg-stories:checked ~ .panels .panel-stories {
           display: grid;
+          gap: 8px;
       }
 
-      /* Colored notes for component error + warnings */
+      .tg-props:checked ~ .panels .panel-props {
+          display: grid;
+      }
+
+      /* Colored notes for prop type error + warnings */
       .note {
           padding: 12px;
           border: 1px solid var(--border);
@@ -8823,6 +8829,12 @@ function renderManifestComponentsPage(manifest) {
           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;
@@ -8832,7 +8844,7 @@ function renderManifestComponentsPage(manifest) {
           white-space: normal;
       }
 
-      /* Example error cards */
+      /* Story error cards */
       .ex {
           padding: 10px;
           border: 1px solid var(--border);
@@ -8942,7 +8954,7 @@ function renderManifestComponentsPage(manifest) {
       }
 
       /* CSS-only filtering of cards via top pills */
-      #filter-errors:target ~ main .card:not(.has-error):not(.has-example-error) {
+      #filter-errors:target ~ main .card:not(.has-error):not(.has-story-error) {
           display: none;
       }
 
@@ -8950,7 +8962,7 @@ function renderManifestComponentsPage(manifest) {
           display: none;
       }
 
-      #filter-example-errors:target ~ main .card:not(.has-example-error) {
+      #filter-story-errors:target ~ main .card:not(.has-story-error) {
           display: none;
       }
 
@@ -8977,7 +8989,7 @@ function renderManifestComponentsPage(manifest) {
           display: grid;
       }
 
-      .card > .tg-ex:checked ~ .panels .panel-ex {
+      .card > .tg-stories:checked ~ .panels .panel-stories {
           display: grid;
       }
 
@@ -8985,7 +8997,8 @@ function renderManifestComponentsPage(manifest) {
       @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-ex:checked) label[for$='-ex'] {
+          .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;
           }
@@ -8997,11 +9010,11 @@ function renderManifestComponentsPage(manifest) {
 <span id="filter-all"></span>
 <span id="filter-errors"></span>
 <span id="filter-warnings"></span>
-<span id="filter-example-errors"></span>
+<span id="filter-story-errors"></span>
 <header>
   <div class="wrap">
     <h1>Components Manifest</h1>
-    <div class="summary">${allPill}${compErrorsPill}${compWarningsPill}${examplesPill}</div>
+    <div class="summary">${allPill}${compErrorsPill}${compWarningsPill}${storiesPill}</div>
   </div>
 </header>
 <main>
@@ -9009,7 +9022,7 @@ function renderManifestComponentsPage(manifest) {
     <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="Error groups">${errorGroupsHTML}</div>` : ""}
+    ${errorGroups.length ? `<div class="error-groups" role="region" aria-label="Prop type error groups">${errorGroupsHTML}</div>` : ""}
   </div>
 </main>
 </body>
@@ -9022,30 +9035,25 @@ var esc = /* @__PURE__ */ __name((s) => String(s ?? "").replace(
 ), "esc");
 var plural = /* @__PURE__ */ __name((n, one, many = `${one}s`) => n === 1 ? one : many, "plural");
 function analyzeComponent(c) {
-  const hasComponentError = !!c.error;
+  const hasPropTypeError = !!c.error;
   const warns = [];
-  if (!c.description?.trim()) {
-    warns.push(
-      "No description found. Write a jsdoc comment such as /** Component description */ on your component or on your stories meta."
-    );
-  }
   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 totalExamples = c.examples?.length ?? 0;
-  const exampleErrors = (c.examples ?? []).filter((e) => !!e?.error).length;
-  const exampleOk = totalExamples - exampleErrors;
-  const hasAnyError = hasComponentError || exampleErrors > 0;
+  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 {
-    hasComponentError,
+    hasPropTypeError,
     hasAnyError,
     hasWarns: warns.length > 0,
     warns,
-    totalExamples,
-    exampleErrors,
-    exampleOk
+    totalStories,
+    storyErrors,
+    storyOk
   };
 }
 __name(analyzeComponent, "analyzeComponent");
@@ -9060,11 +9068,28 @@ __name(note, "note");
 function renderComponentCard(key, c, id) {
   const a = analyzeComponent(c);
   const statusDot = a.hasAnyError ? "dot-err" : "dot-ok";
-  const errorExamples = (c.examples ?? []).filter((ex) => !!ex?.error);
+  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.hasComponentError ? `<label for="${slug}-err" class="badge err as-toggle">component error</label>` : "";
+  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 examplesBadge = a.exampleErrors > 0 ? `<label for="${slug}-ex" class="badge err as-toggle">${a.exampleErrors}/${a.totalExamples} example errors</label>` : `<span class="badge ok">${a.totalExamples} examples ok</span>`;
+  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>`
@@ -9074,18 +9099,18 @@ function renderComponentCard(key, c, id) {
   return `
 <article
   class="card 
-  ${a.hasComponentError ? "has-error" : "no-error"} 
+  ${a.hasPropTypeError ? "has-error" : "no-error"} 
   ${a.hasWarns ? "has-warn" : "no-warn"} 
-  ${a.exampleErrors ? "has-example-error" : "no-example-error"}"
+  ${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">
-        ${componentErrorBadge}
+        ${primaryBadge}
         ${warningsBadge}
-        ${examplesBadge}
+        ${storiesBadge}
       </div>
     </div>
     <div class="meta" title="${esc(c.path)}">${esc(c.id)} \xB7 ${esc(c.path)}</div>
@@ -9095,38 +9120,134 @@ function renderComponentCard(key, c, id) {
   </div>
 
   <!-- \u2B07\uFE0F Hidden toggles must be siblings BEFORE .panels -->
-  ${a.hasComponentError ? `<input id="${slug}-err" class="tg tg-err" type="checkbox" hidden />` : ""}
+  ${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.exampleErrors > 0 ? `<input id="${slug}-ex" class="tg tg-ex" 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.hasComponentError ? `
+    ${a.hasPropTypeError ? `
         <div class="panel panel-err">
-          ${note("Component error", `<pre><code>${esc(c.error?.message || "Unknown error")}</code></pre>`, "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.exampleErrors > 0 ? `
-        <div class="panel panel-ex">
-          ${errorExamples.map(
+    ${!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="ex err">
+            <div class="note err">
               <div class="row">
-                <span class="status-dot dot-err"></span>
-                <span class="ex-name">${esc(ex?.name ?? `Example ${j + 1}`)}</span>
-                <span class="badge err">example error</span>
+                <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";
@@ -9360,7 +9481,7 @@ var StoryIndexGenerator = class _StoryIndexGenerator {
     }
     const pathToSubIndex = {};
     const fullGlob = slash(join2(specifier.directory, specifier.files));
-    const { globby } = await import("../_node-chunks/globby-CVPDLQ5Z.js");
+    const { globby } = await import("../_node-chunks/globby-L3NPKIS7.js");
     const files = await globby(fullGlob, {
       absolute: true,
       cwd: workingDir,
@@ -9616,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-SQENNWFY.js");
+      const { analyze } = await import("../_node-chunks/dist-MCOAOC3B.js");
       const result = await analyze(content);
       if (result.isTemplate) {
         return false;
@@ -9959,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-GBWCUYRR.js");
+  return await import("../_node-chunks/builder-manager-P652CU5Z.js");
 }
 __name(getManagerBuilder, "getManagerBuilder");
 async function getPreviewBuilder(resolvedPreviewBuilder) {
@@ -10198,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-CVPDLQ5Z.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);