@storybook/addon-docs 10.5.0-alpha.5 → 10.5.0-alpha.7

package/dist/blocks.js

@@ -11,7 +11,7 @@ import {
   curriedTransparentize$1,
   rgba
 } from "./_browser-chunks/chunk-SPXYZZB5.js";
-import "./_browser-chunks/chunk-SL3VIQZ3.js";
+import "./_browser-chunks/chunk-UAWMPV5J.js";
 
 // src/blocks/components/ArgsTable/ArgsTable.tsx
 import React23 from "react";
@@ -1143,7 +1143,10 @@ var styleResets = {
 };
 
 // src/blocks/controls/options/Options.tsx
-var normalizeOptions = (options, labels) => Array.isArray(options) ? options.reduce((acc, item) => (acc[labels?.[item] || String(item)] = item, acc), {}) : options, Controls = {
+var normalizeOptions = (options, labels) => Array.isArray(options) ? options.reduce((acc, item) => {
+  let label = labels != null && !Array.isArray(labels) && typeof labels[item] == "string" ? labels[item] : String(item);
+  return acc[label] = item, acc;
+}, {}) : options, Controls = {
   check: CheckboxControl,
   "inline-check": CheckboxControl,
   radio: RadioControl,
@@ -2430,7 +2433,7 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
   onChange,
   argType
 }) => {
-  let data = useMemo(() => value && cloneDeep(value), [value]), hasData = data != null, [showRaw, setShowRaw] = useState4(!hasData), [parseError, setParseError] = useState4(null), readonly = !!argType?.table?.readonly, updateRaw = useCallback3(
+  let data = useMemo(() => value && cloneDeep(value), [value]), hasData = data != null, [showRaw, setShowRaw] = useState4(!hasData), hadDataRef = useRef3(hasData), [parseError, setParseError] = useState4(null), readonly = !!argType?.table?.readonly, updateRaw = useCallback3(
     (raw) => {
       try {
         raw && onChange(JSON.parse(raw)), setParseError(null);
@@ -2441,7 +2444,11 @@ var { window: globalWindow } = globalThis, Wrapper4 = styled8.div(({ theme }) =>
     [onChange]
   ), [forceVisible, setForceVisible] = useState4(!1), onForceVisible = useCallback3(() => {
     onChange({}), setForceVisible(!0);
-  }, [onChange, setForceVisible]), htmlElRef = useRef3(null);
+  }, [onChange, setForceVisible]);
+  useEffect4(() => {
+    !hadDataRef.current && hasData && showRaw && !forceVisible && setShowRaw(!1), hadDataRef.current = hasData;
+  }, [forceVisible, hasData, showRaw]);
+  let htmlElRef = useRef3(null);
   useEffect4(() => {
     forceVisible && htmlElRef.current && htmlElRef.current.select();
   }, [forceVisible]);
@@ -2767,7 +2774,7 @@ var FilesControl = ({
 };
 
 // src/blocks/controls/index.tsx
-var LazyColorControl = lazy(() => import("./_browser-chunks/Color-MQE2NRD4.js")), ColorControl = (props) => React15.createElement(Suspense, { fallback: React15.createElement("div", null) }, React15.createElement(LazyColorControl, { ...props }));
+var LazyColorControl = lazy(() => import("./_browser-chunks/Color-AVMI7ZZZ.js")), ColorControl = (props) => React15.createElement(Suspense, { fallback: React15.createElement("div", null) }, React15.createElement(LazyColorControl, { ...props }));
 
 // src/blocks/components/ArgsTable/ArgControl.tsx
 var Controls2 = {
@@ -4274,7 +4281,7 @@ function useStories(storyIds, context) {
 // src/blocks/blocks/with-mdx-component-override.tsx
 import React25 from "react";
 import { useMDXComponents } from "@mdx-js/react";
-var MDX_WRAPPED_BLOCK = Symbol("mdxWrappedBlock"), MdxWrappedBlockContext = React25.createContext(null), withMdxComponentOverride = (blockName, Block) => {
+var MDX_WRAPPED_BLOCK = /* @__PURE__ */ Symbol("mdxWrappedBlock"), MdxWrappedBlockContext = React25.createContext(null), withMdxComponentOverride = (blockName, Block) => {
   let WrappedBlock = (props) => {
     let wrappedBlocks = React25.useContext(MdxWrappedBlockContext), Override = useMDXComponents()[blockName];
     if (wrappedBlocks?.has(blockName) || Override === WrappedBlock)
@@ -5544,10 +5551,72 @@ import React36 from "react";
 var anchorBlockIdFromId = (storyId) => `anchor--${storyId}`, Anchor = ({ storyId, children }) => React36.createElement("div", { id: anchorBlockIdFromId(storyId), className: "sb-anchor" }, children);
 
 // src/blocks/blocks/ArgTypes.tsx
-import React37 from "react";
+import React37, { useContext as useContext4 } from "react";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError2 } from "storybook/internal/preview-errors";
 import { filterArgTypes } from "storybook/preview-api";
 
+// src/blocks/blocks/argTypesShared.ts
+import {
+  getServiceSubcomponentArgTypes,
+  mergeServiceArgTypes
+} from "storybook/internal/docs-tools";
+
+// src/blocks/blocks/useServiceDocgen.ts
+import { useCallback as useCallback7, useMemo as useMemo4, useRef as useRef6, useSyncExternalStore } from "react";
+import { getService } from "storybook/preview-api";
+function useServiceDocgen(id) {
+  let snapshotCache = useRef6({ id: void 0, value: void 0 }), service = useMemo4(() => {
+    try {
+      return getService("core/docgen");
+    } catch {
+      return;
+    }
+  }, []), getSnapshot = useCallback7(() => snapshotCache.current.id === id ? snapshotCache.current.value : void 0, [id]), subscribe = useCallback7(
+    (listener) => service && id ? service.queries.getDocgen.subscribe({ id }, (value) => {
+      snapshotCache.current = { id, value }, listener();
+    }) : () => {
+    },
+    [service, id]
+  );
+  return useSyncExternalStore(subscribe, getSnapshot);
+}
+
+// src/blocks/blocks/argTypesShared.ts
+function extractComponentArgTypes(component, parameters) {
+  let { extractArgTypes } = parameters.docs || {};
+  if (!extractArgTypes)
+    throw new Error("Args unsupported. See Args documentation for your framework." /* ARGS_UNSUPPORTED */);
+  return extractArgTypes(component);
+}
+function extractSubcomponentArgTypes(subcomponents, parameters) {
+  return Object.fromEntries(
+    Object.entries(subcomponents || {}).map(([key, comp]) => [
+      key,
+      extractComponentArgTypes(comp, parameters)
+    ])
+  );
+}
+function useDocgenServiceRows({
+  componentId,
+  storyId,
+  parameters,
+  initialArgs,
+  customArgTypes
+}) {
+  let servicePayload = useServiceDocgen(componentId);
+  return !servicePayload || !componentId ? null : {
+    serviceComponentName: servicePayload.name,
+    mainRows: mergeServiceArgTypes({
+      payload: servicePayload,
+      storyId: storyId ?? componentId,
+      parameters,
+      initialArgs,
+      customArgTypes
+    }),
+    subcomponentRows: getServiceSubcomponentArgTypes(servicePayload)
+  };
+}
+
 // src/blocks/blocks/useOf.ts
 import { useContext as useContext3 } from "react";
 var useOf = (moduleExportOrType, validTypes) => useContext3(DocsContext).resolveOf(moduleExportOrType, validTypes);
@@ -5566,68 +5635,112 @@ function scrollToElement(element, block = "start") {
 }
 
 // src/blocks/blocks/ArgTypes.tsx
-function extractComponentArgTypes(component, parameters) {
-  let { extractArgTypes } = parameters.docs || {};
-  if (!extractArgTypes)
-    throw new Error("Args unsupported. See Args documentation for your framework." /* ARGS_UNSUPPORTED */);
-  return extractArgTypes(component);
-}
-function getArgTypesFromResolved(resolved) {
+function useResolveArgTypes(props) {
+  let { of } = props;
+  if ("of" in props && of === void 0)
+    throw new InvalidBlockOfPropError2();
+  let context = useContext4(DocsContext), resolved = useOf(of || "meta"), resolvedArgTypes;
   if (resolved.type === "component") {
     let {
-      component: component2,
-      projectAnnotations: { parameters: parameters2 }
+      component,
+      projectAnnotations: { parameters }
     } = resolved;
-    return {
-      argTypes: extractComponentArgTypes(component2, parameters2),
-      parameters: parameters2,
-      component: component2
+    resolvedArgTypes = {
+      parameters,
+      // Bare `of={Component}` has no story/meta annotations; the docgen service is addressed by
+      // component id, recovered from the CSF file that declares this component.
+      componentId: context.getComponentId(component),
+      argTypes: extractComponentArgTypes(component, parameters),
+      component
+    };
+  } else if (resolved.type === "meta") {
+    let { id, argTypes, parameters, initialArgs, component, subcomponents } = resolved.preparedMeta;
+    resolvedArgTypes = {
+      parameters,
+      componentId: id.split("--")[0],
+      initialArgs,
+      argTypes,
+      component,
+      subcomponents
+    };
+  } else {
+    let { id, argTypes, parameters, initialArgs, component, subcomponents } = resolved.story;
+    resolvedArgTypes = {
+      parameters,
+      componentId: id.split("--")[0],
+      storyId: id,
+      initialArgs,
+      argTypes,
+      component,
+      subcomponents
     };
   }
-  if (resolved.type === "meta") {
-    let {
-      preparedMeta: { argTypes: argTypes2, parameters: parameters2, component: component2, subcomponents: subcomponents2 }
-    } = resolved;
-    return { argTypes: argTypes2, parameters: parameters2, component: component2, subcomponents: subcomponents2 };
-  }
-  let {
-    story: { argTypes, parameters, component, subcomponents }
-  } = resolved;
-  return { argTypes, parameters, component, subcomponents };
+  let argTypesParameters = resolvedArgTypes.parameters?.docs?.argTypes || {};
+  return {
+    ...resolvedArgTypes,
+    filterProps: {
+      include: props.include ?? argTypesParameters.include,
+      exclude: props.exclude ?? argTypesParameters.exclude,
+      sort: props.sort ?? argTypesParameters.sort
+    }
+  };
 }
-var ArgTypesImpl = (props) => {
-  let { of } = props;
-  if ("of" in props && of === void 0)
-    throw new InvalidBlockOfPropError2();
-  let resolved = useOf(of || "meta"), { argTypes, parameters, component, subcomponents } = getArgTypesFromResolved(resolved), argTypesParameters = parameters?.docs?.argTypes || {}, include = props.include ?? argTypesParameters.include, exclude = props.exclude ?? argTypesParameters.exclude, sort = props.sort ?? argTypesParameters.sort, filteredArgTypes = filterArgTypes(argTypes, include, exclude);
-  if (!(!!subcomponents && Object.keys(subcomponents || {}).length > 0))
-    return React37.createElement(ArgsTable, { rows: filteredArgTypes, sort });
-  let mainComponentName = getComponentName(component) || "Main", subcomponentTabs = Object.fromEntries(
-    Object.entries(subcomponents || {}).map(([key, comp]) => [
-      key,
-      {
-        rows: filterArgTypes(
-          extractComponentArgTypes(comp, parameters),
-          include,
-          exclude
-        ),
-        sort
-      }
-    ])
-  ), tabs = {
-    [mainComponentName]: { rows: filteredArgTypes, sort },
-    ...subcomponentTabs
+function renderArgTypesTables({
+  mainName = "Main",
+  mainRows,
+  subcomponentRows,
+  include,
+  exclude,
+  sort
+}) {
+  let filteredMainRows = filterArgTypes(mainRows, include, exclude);
+  if (Object.keys(subcomponentRows).length === 0)
+    return React37.createElement(ArgsTable, { rows: filteredMainRows, sort });
+  let tabs = {
+    [mainName]: { rows: filteredMainRows, sort },
+    ...Object.fromEntries(
+      Object.entries(subcomponentRows).map(([key, rows]) => [
+        key,
+        {
+          rows: filterArgTypes(rows, include, exclude),
+          sort
+        }
+      ])
+    )
   };
   return React37.createElement(TabbedArgsTable, { tabs, sort });
-}, ArgTypes = withMdxComponentOverride("ArgTypes", ArgTypesImpl);
+}
+var LegacyArgTypes = (props) => {
+  let { argTypes, parameters, component, subcomponents, filterProps } = useResolveArgTypes(props);
+  return argTypes ? renderArgTypesTables({
+    mainName: getComponentName(component),
+    mainRows: argTypes,
+    subcomponentRows: extractSubcomponentArgTypes(subcomponents, parameters),
+    ...filterProps
+  }) : null;
+}, DocgenServiceArgTypes = (props) => {
+  let { argTypes, parameters, componentId, storyId, initialArgs, filterProps, component } = useResolveArgTypes(props), serviceRows = useDocgenServiceRows({
+    componentId,
+    storyId,
+    parameters,
+    initialArgs,
+    customArgTypes: argTypes
+  });
+  return serviceRows ? renderArgTypesTables({
+    mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
+    mainRows: serviceRows.mainRows,
+    subcomponentRows: serviceRows.subcomponentRows,
+    ...filterProps
+  }) : null;
+}, ArgTypesImpl = (props) => globalThis.FEATURES?.experimentalDocgenServer ? React37.createElement(DocgenServiceArgTypes, { ...props }) : React37.createElement(LegacyArgTypes, { ...props }), ArgTypes = withMdxComponentOverride("ArgTypes", ArgTypesImpl);
 
 // src/blocks/blocks/Canvas.tsx
-import React40, { useCallback as useCallback7, useContext as useContext5 } from "react";
+import React40, { useCallback as useCallback8, useContext as useContext6 } from "react";
 import { FORCE_REMOUNT } from "storybook/internal/core-events";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError4 } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/Source.tsx
-import React39, { useContext as useContext4, useMemo as useMemo4 } from "react";
+import React39, { useContext as useContext5, useMemo as useMemo5 } from "react";
 import { SourceType } from "storybook/internal/docs-tools";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError3 } from "storybook/internal/preview-errors";
 
@@ -5798,7 +5911,7 @@ var require_es_object_atoms = __commonJS({
         return !1;
       if (typeof Symbol.iterator == "symbol")
         return !0;
-      var obj = {}, sym = Symbol("test"), symObj = Object(sym);
+      var obj = {}, sym = /* @__PURE__ */ Symbol("test"), symObj = Object(sym);
       if (typeof sym == "string" || Object.prototype.toString.call(sym) !== "[object Symbol]" || Object.prototype.toString.call(symObj) !== "[object Symbol]")
         return !1;
       var symVal = 42;
@@ -5826,7 +5939,7 @@ var require_es_object_atoms = __commonJS({
     "use strict";
     var origSymbol = typeof Symbol < "u" && Symbol, hasSymbolSham = require_shams();
     module.exports = function() {
-      return typeof origSymbol != "function" || typeof Symbol != "function" || typeof origSymbol("foo") != "symbol" || typeof Symbol("bar") != "symbol" ? !1 : hasSymbolSham();
+      return typeof origSymbol != "function" || typeof Symbol != "function" || typeof origSymbol("foo") != "symbol" || typeof /* @__PURE__ */ Symbol("bar") != "symbol" ? !1 : hasSymbolSham();
     };
   }
 }), require_Reflect_getPrototypeOf = __commonJS({
@@ -6715,7 +6828,7 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
   type === SourceType.AUTO && snippet && isArgsStory ? snippet : sourceParameters.originalSource || "", transformer = transformFromProps ?? sourceParameters.transform, transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
   return sourceParameters.code !== void 0 ? sourceParameters.code : transformedCode;
 }, useSourceProps = (props, docsContext, sourceContext) => {
-  let { of } = props, story = useMemo4(() => {
+  let { of } = props, story = useMemo5(() => {
     if (of)
       return docsContext.resolveOf(of, ["story"]).story;
     try {
@@ -6743,19 +6856,19 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
     dark
   });
 }, SourceWithStorySnippet = (props) => {
-  let sourceContext = useContext4(SourceContext), docsContext = useContext4(DocsContext), sourceProps = useSourceProps(props, docsContext, sourceContext);
+  let sourceContext = useContext5(SourceContext), docsContext = useContext5(DocsContext), sourceProps = useSourceProps(props, docsContext, sourceContext);
   return React39.createElement(Source, { ...sourceProps });
 }, SourceWithCode = (props) => {
-  let docsContext = useContext4(DocsContext), sourceProps = useSourceProps(props, docsContext, EMPTY_SOURCE_CONTEXT);
+  let docsContext = useContext5(DocsContext), sourceProps = useSourceProps(props, docsContext, EMPTY_SOURCE_CONTEXT);
   return React39.createElement(Source, { ...sourceProps });
 }, SourceImpl = (props) => props.code !== void 0 ? React39.createElement(SourceWithCode, { ...props }) : React39.createElement(SourceWithStorySnippet, { ...props }), Source2 = withMdxComponentOverride("Source", SourceImpl);
 
 // src/blocks/blocks/Canvas.tsx
 var CanvasImpl = (props) => {
-  let docsContext = useContext5(DocsContext), sourceContext = useContext5(SourceContext), { of, source } = props;
+  let docsContext = useContext6(DocsContext), sourceContext = useContext6(SourceContext), { of, source } = props;
   if ("of" in props && of === void 0)
     throw new InvalidBlockOfPropError4();
-  let { story } = useOf(of || "story", ["story"]), sourceProps = useSourceProps({ ...source, ...of && { of } }, docsContext, sourceContext), layout = props.layout ?? story.parameters.layout ?? story.parameters.docs?.canvas?.layout ?? "padded", withToolbar = props.withToolbar ?? story.parameters.docs?.canvas?.withToolbar ?? !1, additionalActions = props.additionalActions ?? story.parameters.docs?.canvas?.additionalActions, sourceState = props.sourceState ?? story.parameters.docs?.canvas?.sourceState ?? "hidden", className = props.className ?? story.parameters.docs?.canvas?.className, inline = props.story?.inline ?? story.parameters?.docs?.story?.inline ?? !1, handleReloadStory = useCallback7(() => {
+  let { story } = useOf(of || "story", ["story"]), sourceProps = useSourceProps({ ...source, ...of && { of } }, docsContext, sourceContext), layout = props.layout ?? story.parameters.layout ?? story.parameters.docs?.canvas?.layout ?? "padded", withToolbar = props.withToolbar ?? story.parameters.docs?.canvas?.withToolbar ?? !1, additionalActions = props.additionalActions ?? story.parameters.docs?.canvas?.additionalActions, sourceState = props.sourceState ?? story.parameters.docs?.canvas?.sourceState ?? "hidden", className = props.className ?? story.parameters.docs?.canvas?.className, inline = props.story?.inline ?? story.parameters?.docs?.story?.inline ?? !1, handleReloadStory = useCallback8(() => {
     docsContext.channel.emit(FORCE_REMOUNT, { storyId: story.id });
   }, [docsContext.channel, story.id]);
   return React40.createElement(
@@ -6775,11 +6888,11 @@ var CanvasImpl = (props) => {
 }, Canvas = withMdxComponentOverride("Canvas", CanvasImpl);
 
 // src/blocks/blocks/Controls.tsx
-import React41, { useContext as useContext7 } from "react";
+import React41, { useContext as useContext8 } from "react";
 import { filterArgTypes as filterArgTypes2 } from "storybook/preview-api";
 
 // src/blocks/blocks/useArgs.ts
-import { useCallback as useCallback8, useEffect as useEffect13, useState as useState16 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect13, useState as useState16 } from "react";
 import {
   RESET_STORY_ARGS,
   STORY_ARGS_UPDATED,
@@ -6798,10 +6911,10 @@ var useArgs = (story, context) => {
     };
     return context.channel.on(STORY_ARGS_UPDATED, onArgsUpdated), () => context.channel.off(STORY_ARGS_UPDATED, onArgsUpdated);
   }, [storyId, context.channel]);
-  let updateArgs = useCallback8(
+  let updateArgs = useCallback9(
     (updatedArgs) => context.channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }),
     [storyId, context.channel]
-  ), resetArgs = useCallback8(
+  ), resetArgs = useCallback9(
     (argNames) => context.channel.emit(RESET_STORY_ARGS, { storyId, argNames }),
     [storyId, context.channel]
   );
@@ -6822,32 +6935,48 @@ var useGlobals = (story, context) => {
 };
 
 // src/blocks/blocks/usePrimaryStory.ts
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 import { Tag } from "storybook/internal/preview-api";
 var usePrimaryStory = () => {
-  let context = useContext6(DocsContext), stories = context.componentStories();
+  let context = useContext7(DocsContext), stories = context.componentStories();
   return context.filterByAutodocs === !1 ? stories[0] : stories.find((story) => story.tags.includes(Tag.AUTODOCS));
 };
 
 // src/blocks/blocks/Controls.tsx
-function extractComponentArgTypes2(component, parameters) {
-  let { extractArgTypes } = parameters.docs || {};
-  if (!extractArgTypes)
-    throw new Error("Args unsupported. See Args documentation for your framework." /* ARGS_UNSUPPORTED */);
-  return extractArgTypes(component);
+function getControlsFilterProps(story, props) {
+  let controlsParameters = story.parameters.docs?.controls || {};
+  return {
+    include: props.include ?? controlsParameters.include,
+    exclude: props.exclude ?? controlsParameters.exclude,
+    sort: props.sort ?? controlsParameters.sort
+  };
 }
-var ControlsImpl = (props) => {
-  let { of } = props, context = useContext7(DocsContext), primaryStory = usePrimaryStory(), controlsId = $bdb11010cef70236$export$f680877a34711e37(), story = of ? context.resolveOf(of, ["story"]).story : primaryStory;
-  if (!story)
-    return null;
-  let { parameters, argTypes, component, subcomponents } = story, controlsParameters = parameters.docs?.controls || {}, include = props.include ?? controlsParameters.include, exclude = props.exclude ?? controlsParameters.exclude, sort = props.sort ?? controlsParameters.sort, [args, updateArgs, resetArgs] = useArgs(story, context), [globals] = useGlobals(story, context), filteredArgTypes = filterArgTypes2(argTypes, include, exclude);
-  if (!(!!subcomponents && Object.keys(subcomponents || {}).length > 0))
-    return Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0 ? React41.createElement(
+function useControlsInteractiveState(story, context) {
+  let controlsId = $bdb11010cef70236$export$f680877a34711e37(), [args, updateArgs, resetArgs] = useArgs(story, context), [globals] = useGlobals(story, context);
+  return { controlsId, args, globals, updateArgs, resetArgs };
+}
+var ControlsTables = ({
+  mainName = "Story",
+  mainRows,
+  subcomponentRows,
+  include,
+  exclude,
+  sort,
+  storyId,
+  controlsId,
+  args,
+  globals,
+  updateArgs,
+  resetArgs
+}) => {
+  let filteredMainRows = filterArgTypes2(mainRows, include, exclude);
+  if (Object.keys(subcomponentRows).length === 0)
+    return Object.keys(filteredMainRows).length > 0 || Object.keys(args).length > 0 ? React41.createElement(
       ArgsTable,
       {
-        storyId: story.id,
+        storyId,
         controlsId,
-        rows: filteredArgTypes,
+        rows: filteredMainRows,
         sort,
         args,
         globals,
@@ -6855,17 +6984,17 @@ var ControlsImpl = (props) => {
         resetArgs
       }
     ) : null;
-  let mainComponentName = getComponentName(component) || "Story", subcomponentTabs = Object.fromEntries(
-    Object.entries(subcomponents || {}).map(([key, comp]) => [
-      key,
-      {
-        rows: filterArgTypes2(extractComponentArgTypes2(comp, parameters), include, exclude),
-        sort
-      }
-    ])
-  ), tabs = {
-    [mainComponentName]: { rows: filteredArgTypes, sort },
-    ...subcomponentTabs
+  let tabs = {
+    [mainName]: { rows: filteredMainRows, sort },
+    ...Object.fromEntries(
+      Object.entries(subcomponentRows).map(([key, rows]) => [
+        key,
+        {
+          rows: filterArgTypes2(rows, include, exclude),
+          sort
+        }
+      ])
+    )
   };
   return React41.createElement(
     TabbedArgsTable,
@@ -6876,14 +7005,52 @@ var ControlsImpl = (props) => {
       globals,
       updateArgs,
       resetArgs,
-      storyId: story.id,
+      storyId,
       controlsId
     }
   );
+}, LegacyControls = ({ story, context, ...props }) => {
+  let { parameters, argTypes, component, subcomponents } = story, filterProps = getControlsFilterProps(story, props), interactiveState = useControlsInteractiveState(story, context);
+  return argTypes ? React41.createElement(
+    ControlsTables,
+    {
+      mainName: getComponentName(component) || "Story",
+      mainRows: argTypes,
+      subcomponentRows: extractSubcomponentArgTypes(subcomponents, parameters),
+      ...filterProps,
+      storyId: story.id,
+      ...interactiveState
+    }
+  ) : null;
+}, DocgenServiceControls = ({ story, context, ...props }) => {
+  let { parameters, argTypes, component } = story, filterProps = getControlsFilterProps(story, props), interactiveState = useControlsInteractiveState(story, context), serviceRows = useDocgenServiceRows({
+    componentId: story.id.split("--")[0],
+    storyId: story.id,
+    parameters,
+    initialArgs: story.initialArgs,
+    customArgTypes: argTypes
+  });
+  return serviceRows ? React41.createElement(
+    ControlsTables,
+    {
+      mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
+      mainRows: serviceRows.mainRows,
+      subcomponentRows: serviceRows.subcomponentRows,
+      ...filterProps,
+      storyId: story.id,
+      ...interactiveState
+    }
+  ) : null;
+}, ControlsImpl = (props) => {
+  let { of } = props, context = useContext8(DocsContext), primaryStory = usePrimaryStory(), story = of ? context.resolveOf(of, ["story"]).story : primaryStory;
+  if (!story)
+    return null;
+  let storyProps = { ...props, story, context };
+  return globalThis.FEATURES?.experimentalDocgenServer ? React41.createElement(DocgenServiceControls, { ...storyProps }) : React41.createElement(LegacyControls, { ...storyProps });
 }, Controls3 = withMdxComponentOverride("Controls", ControlsImpl);
 
 // src/blocks/blocks/Description.tsx
-import React44 from "react";
+import React44, { useContext as useContext10 } from "react";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError5 } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/Markdown.tsx
@@ -6891,7 +7058,7 @@ import React43 from "react";
 import { dedent } from "ts-dedent";
 
 // src/blocks/blocks/mdx.tsx
-import React42, { useContext as useContext8 } from "react";
+import React42, { useContext as useContext9 } from "react";
 import { Button as Button8, Code, components, nameSpaceClassNames } from "storybook/internal/components";
 import { NAVIGATE_URL as NAVIGATE_URL2 } from "storybook/internal/core-events";
 import { LinkIcon } from "@storybook/icons";
@@ -6925,7 +7092,7 @@ function navigate(context, url) {
   context.channel.emit(NAVIGATE_URL2, url);
 }
 var A2 = components.a, AnchorInPage = ({ hash, children }) => {
-  let context = useContext8(DocsContext);
+  let context = useContext9(DocsContext);
   return React42.createElement(
     A2,
     {
@@ -6939,7 +7106,7 @@ var A2 = components.a, AnchorInPage = ({ hash, children }) => {
     children
   );
 }, AnchorMdx = (props) => {
-  let { href, target, children, ...rest } = props, context = useContext8(DocsContext);
+  let { href, target, children, ...rest } = props, context = useContext9(DocsContext);
   return !href || target === "_blank" || /^https?:\/\//.test(href) ? React42.createElement(A2, { ...props }) : href.startsWith("#") ? React42.createElement(AnchorInPage, { hash: href }, children) : React42.createElement(
     A2,
     {
@@ -6996,7 +7163,7 @@ var A2 = components.a, AnchorInPage = ({ hash, children }) => {
   children,
   ...rest
 }) => {
-  let context = useContext8(DocsContext), OcticonHeader = OcticonHeaders[as], hash = `#${id}`;
+  let context = useContext9(DocsContext), OcticonHeader = OcticonHeaders[as], hash = `#${id}`;
   return React42.createElement(OcticonHeader, { id, ...rest }, React42.createElement(OcticonAlignmentWrapper, { className: "sb-unstyled" }, React42.createElement(OcticonAnchorWrapper, null, React42.createElement(
     Button8,
     {
@@ -7076,7 +7243,7 @@ var MarkdownImpl = (props) => {
 }, Markdown = withMdxComponentOverride("Markdown", MarkdownImpl);
 
 // src/blocks/blocks/Description.tsx
-var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.INFO = "info", DescriptionType2.NOTES = "notes", DescriptionType2.DOCGEN = "docgen", DescriptionType2.AUTO = "auto", DescriptionType2))(DescriptionType || {}), getDescriptionFromResolvedOf = (resolvedOf) => {
+var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.INFO = "info", DescriptionType2.NOTES = "notes", DescriptionType2.DOCGEN = "docgen", DescriptionType2.AUTO = "auto", DescriptionType2))(DescriptionType || {}), getDescriptionFromResolvedOf = (resolvedOf, serviceComponentDescription) => {
   switch (resolvedOf.type) {
     case "story":
       return resolvedOf.story.parameters.docs?.description?.story || null;
@@ -7085,7 +7252,7 @@ var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.I
       return metaDescription || parameters.docs?.extractComponentDescription?.(component, {
         component,
         parameters
-      }) || null;
+      }) || serviceComponentDescription || null;
     }
     case "component": {
       let {
@@ -7095,18 +7262,21 @@ var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.I
       return parameters?.docs?.extractComponentDescription?.(component, {
         component,
         parameters
-      }) || null;
+      }) || serviceComponentDescription || null;
     }
     default:
       throw new Error(
         `Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`
       );
   }
+}, useServiceComponentDescription = (resolvedOf) => {
+  let context = useContext10(DocsContext), componentId;
+  return globalThis.FEATURES?.experimentalDocgenServer && (resolvedOf.type === "meta" ? componentId = resolvedOf.preparedMeta.componentId : resolvedOf.type === "component" && (componentId = context.getComponentId(resolvedOf.component))), useServiceDocgen(componentId)?.description || void 0;
 }, DescriptionImpl = (props) => {
   let { of } = props;
   if ("of" in props && of === void 0)
     throw new InvalidBlockOfPropError5();
-  let resolvedOf = useOf(of || "meta"), markdown = getDescriptionFromResolvedOf(resolvedOf);
+  let resolvedOf = useOf(of || "meta"), serviceComponentDescription = useServiceComponentDescription(resolvedOf), markdown = getDescriptionFromResolvedOf(resolvedOf, serviceComponentDescription);
   return markdown ? React44.createElement(Markdown, null, markdown) : null;
 }, Description2 = withMdxComponentOverride("Description", DescriptionImpl);
 
@@ -7114,7 +7284,7 @@ var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.I
 import React54 from "react";
 
 // src/blocks/blocks/DocsContainer.tsx
-import React45, { useEffect as useEffect15, useMemo as useMemo5 } from "react";
+import React45, { useEffect as useEffect15, useMemo as useMemo6 } from "react";
 import { ThemeProvider, ensure as ensureTheme } from "storybook/theming";
 
 // src/blocks/blocks/DocsSluggerContext.ts
@@ -7175,7 +7345,7 @@ var { document: document3, window: globalWindow3 } = globalThis, DocsContainer =
   theme,
   children
 }) => {
-  let slugger = useMemo5(() => createDocsSlugger(), []), toc;
+  let slugger = useMemo6(() => createDocsSlugger(), []), toc;
   try {
     toc = context.resolveOf("meta", ["meta"]).preparedMeta.parameters?.docs?.toc;
   } catch {
@@ -7270,7 +7440,7 @@ var PrimaryImpl = () => {
 }, Primary = withMdxComponentOverride("Primary", PrimaryImpl);
 
 // src/blocks/blocks/Stories.tsx
-import React50, { useContext as useContext9 } from "react";
+import React50, { useContext as useContext11 } from "react";
 import { Tag as Tag2 } from "storybook/internal/preview-api";
 import { styled as styled29 } from "storybook/theming";
 var StyledHeading = styled29(Heading2)(({ theme }) => ({
@@ -7287,7 +7457,7 @@ var StyledHeading = styled29(Heading2)(({ theme }) => ({
     marginTop: "56px"
   }
 })), StoriesImpl = ({ title = "Stories", includePrimary = !0 }) => {
-  let { componentStories, projectAnnotations, getStoryContext } = useContext9(DocsContext), stories = componentStories(), { stories: { filter } = { filter: void 0 } } = projectAnnotations.parameters?.docs || {};
+  let { componentStories, projectAnnotations, getStoryContext } = useContext11(DocsContext), stories = componentStories(), { stories: { filter } = { filter: void 0 } } = projectAnnotations.parameters?.docs || {};
   return filter && (stories = stories.filter((story) => filter(story, getStoryContext(story)))), stories.some((story) => story.tags?.includes(Tag2.AUTODOCS)) && (stories = stories.filter((story) => story.tags?.includes(Tag2.AUTODOCS) && !story.usesMount)), includePrimary || (stories = stories.slice(1)), !stories || stories.length === 0 ? null : React50.createElement(React50.Fragment, null, typeof title == "string" ? React50.createElement(StyledHeading, null, title) : title, stories.map(
     (story) => story && React50.createElement(DocsStory, { key: story.id, of: story.moduleExport, expanded: !0, __forceInitialArgs: !0 })
   ));
@@ -7353,7 +7523,8 @@ function Docs({
 }
 
 // src/blocks/blocks/external/ExternalDocs.tsx
-import React55, { useRef as useRef6 } from "react";
+import React55, { useRef as useRef7 } from "react";
+import { deprecate as deprecate2 } from "storybook/internal/client-logger";
 import { composeConfigs as composeConfigs2 } from "storybook/preview-api";
 
 // src/blocks/blocks/external/ExternalPreview.ts
@@ -7435,13 +7606,14 @@ var ConstantMap = class {
 
 // src/blocks/blocks/external/ExternalDocs.tsx
 function usePreview(projectAnnotations) {
-  let previewRef = useRef6();
+  let previewRef = useRef7();
   return previewRef.current || (previewRef.current = new ExternalPreview(projectAnnotations)), previewRef.current;
 }
 function ExternalDocs({
   projectAnnotationsList,
   children
 }) {
+  deprecate2("ExternalDocs is deprecated and will be removed in Storybook 11.");
   let projectAnnotations = composeConfigs2(projectAnnotationsList), preview2 = usePreview(projectAnnotations), docsParameter = {
     ...projectAnnotations.parameters?.docs,
     page: () => children
@@ -7451,13 +7623,14 @@ function ExternalDocs({
 
 // src/blocks/blocks/external/ExternalDocsContainer.tsx
 import React56 from "react";
+import { deprecate as deprecate3 } from "storybook/internal/client-logger";
 import { ThemeProvider as ThemeProvider2, ensure, themes } from "storybook/theming";
-var preview, ExternalDocsContainer = ({ projectAnnotations, children }) => (preview || (preview = new ExternalPreview(projectAnnotations)), React56.createElement(DocsContext.Provider, { value: preview.docsContext() }, React56.createElement(ThemeProvider2, { theme: ensure(themes.light) }, children)));
+var preview, ExternalDocsContainer = ({ projectAnnotations, children }) => (deprecate3("ExternalDocsContainer is deprecated and will be removed in Storybook 11."), preview || (preview = new ExternalPreview(projectAnnotations)), React56.createElement(DocsContext.Provider, { value: preview.docsContext() }, React56.createElement(ThemeProvider2, { theme: ensure(themes.light) }, children)));
 
 // src/blocks/blocks/Meta.tsx
-import React57, { useContext as useContext10 } from "react";
+import React57, { useContext as useContext12 } from "react";
 var Meta = ({ of }) => {
-  let context = useContext10(DocsContext);
+  let context = useContext12(DocsContext);
   of && context.referenceMeta(of, !0);
   try {
     let primary = context.storyById();
@@ -7537,6 +7710,7 @@ export {
   formatTime,
   getStoryId,
   getStoryProps,
+  normalizeOptions,
   parse2 as parse,
   parseDate,
   parseTime,