@storybook/addon-docs 10.5.0-alpha.6 → 10.5.0-alpha.8

package/dist/blocks.js

@@ -11,10 +11,10 @@ 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";
+import React23, { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef5, useState as useState11 } from "react";
 import { once } from "storybook/internal/client-logger";
 import { Button as Button5, Link as Link3, ResetWrapper } from "storybook/internal/components";
 import { includeConditionalArg } from "storybook/internal/csf";
@@ -2433,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);
@@ -2444,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]);
@@ -2770,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 = {
@@ -3438,14 +3442,20 @@ var sortFns = {
     isLoading,
     storyId,
     controlsId
-  } = props;
+  } = props, { rows, args, globals } = "rows" in props ? props : { rows: void 0, args: void 0, globals: void 0 }, isResettingRef = useRef5(!1), [isResetting, setIsResetting] = useState11(!1);
+  useEffect8(() => {
+    isResettingRef.current = !1, setIsResetting(!1);
+  }, [args]);
+  let handleResetClick = useCallback6(() => {
+    !isResettingRef.current && resetArgs && (isResettingRef.current = !0, setIsResetting(!0), resetArgs());
+  }, [resetArgs]);
   if ("error" in props) {
     let { error } = props;
     return React23.createElement(EmptyBlock, null, error, "\xA0", React23.createElement(Link3, { href: "http://storybook.js.org/docs/?ref=ui", target: "_blank", withArrow: !0 }, React23.createElement(DocumentIcon2, null), " Read the docs"));
   }
   if (isLoading)
     return React23.createElement(Skeleton, null);
-  let { rows, args, globals } = "rows" in props ? props : { rows: void 0, args: void 0, globals: void 0 }, groups = groupRows(
+  let groups = groupRows(
     pickBy(
       rows || {},
       (row) => !row?.table?.disable && safeIncludeConditionalArg(row, args || {}, globals || {})
@@ -3469,8 +3479,9 @@ var sortFns = {
     {
       variant: "ghost",
       padding: "small",
-      onClick: () => resetArgs(),
-      ariaLabel: "Reset controls"
+      onClick: handleResetClick,
+      disabled: isResetting,
+      ariaLabel: isResetting ? "Resetting controls..." : "Reset controls"
     },
     React23.createElement(UndoIcon, null)
   )), React23.createElement(
@@ -3917,7 +3928,7 @@ var toGlobalSelector = (element) => `& :where(${element}:not(.sb-anchor, .sb-uns
 })), DocsPageWrapper = ({ children, toc }) => React24.createElement(DocsWrapper, { className: "sbdocs sbdocs-wrapper" }, toc, React24.createElement(DocsContent, { className: "sbdocs sbdocs-content" }, children));
 
 // src/blocks/components/Preview.tsx
-import React30, { Children, useCallback as useCallback6, useContext as useContext2, useMemo as useMemo3, useState as useState13 } from "react";
+import React30, { Children, useCallback as useCallback7, useContext as useContext2, useMemo as useMemo3, useState as useState14 } from "react";
 import { logger as logger4 } from "storybook/internal/client-logger";
 import { Bar, Button as Button7, ToggleButton as ToggleButton2, Zoom } from "storybook/internal/components";
 import { CopyIcon, MarkupIcon } from "@storybook/icons";
@@ -4247,14 +4258,14 @@ import React26, { useContext } from "react";
 import { InvalidBlockOfPropError } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/useStory.ts
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState12 } from "react";
 function useStory(storyId, context) {
   let stories = useStories([storyId], context);
   return stories && stories[0];
 }
 function useStories(storyIds, context) {
-  let [storiesById, setStories] = useState11({});
-  return useEffect8(() => {
+  let [storiesById, setStories] = useState12({});
+  return useEffect9(() => {
     Promise.all(
       storyIds.map(async (storyId) => {
         let story = await context.loadStory(storyId);
@@ -4277,7 +4288,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)
@@ -4337,7 +4348,7 @@ var getBlockBackgroundStyle = (theme) => ({
 });
 
 // src/blocks/components/Story.tsx
-import React28, { useEffect as useEffect9, useRef as useRef5, useState as useState12 } from "react";
+import React28, { useEffect as useEffect10, useRef as useRef6, useState as useState13 } from "react";
 import { ErrorFormatter, Loader } from "storybook/internal/components";
 import { styled as styled20 } from "storybook/theming";
 
@@ -4396,8 +4407,8 @@ var ZoomContext = createContext2({
 
 // src/blocks/components/Story.tsx
 var storyBlockIdFromId = ({ story, primary }) => `story--${story.id}${primary ? "--primary" : ""}`, InlineStory = (props) => {
-  let storyRef = useRef5(), [showLoader, setShowLoader] = useState12(!0), [error, setError] = useState12(), { story, height, autoplay, forceInitialArgs, renderStoryToElement } = props;
-  return useEffect9(() => {
+  let storyRef = useRef6(), [showLoader, setShowLoader] = useState13(!0), [error, setError] = useState13(), { story, height, autoplay, forceInitialArgs, renderStoryToElement } = props;
+  return useEffect10(() => {
     if (!(story && storyRef.current))
       return () => {
       };
@@ -4616,13 +4627,13 @@ var PositionedToolbar = styled22(Toolbar)({
   onReloadStory,
   ...props
 }) => {
-  let [expanded, setExpanded] = useState13(isExpanded), [copied, setCopied] = useState13(null), [scale, setScale] = useState13(1), additionalActionItems = useMemo3(
+  let [expanded, setExpanded] = useState14(isExpanded), [copied, setCopied] = useState14(null), [scale, setScale] = useState14(1), additionalActionItems = useMemo3(
     () => additionalActions ? [...additionalActions] : [],
     [additionalActions]
-  ), sourceId = $bdb11010cef70236$export$f680877a34711e37(), previewClasses = [className].concat(["sbdocs", "sbdocs-preview", "sb-unstyled"]), context = useContext2(DocsContext), copyToClipboard = useCallback6(async (text) => {
+  ), sourceId = $bdb11010cef70236$export$f680877a34711e37(), previewClasses = [className].concat(["sbdocs", "sbdocs-preview", "sb-unstyled"]), context = useContext2(DocsContext), copyToClipboard = useCallback7(async (text) => {
     let { createCopyToClipboardFunction } = await import("storybook/internal/components");
     await createCopyToClipboardFunction()(text);
-  }, []), handleCopyCode = useCallback6(async () => {
+  }, []), handleCopyCode = useCallback7(async () => {
     try {
       await copyToClipboard(withSource?.code ?? ""), setCopied("Copied!");
     } catch (err) {
@@ -4914,7 +4925,7 @@ var ItemLabel = styled26.div(({ theme }) => ({
 }), IconItem = ({ name, children }) => React34.createElement(Item2, null, React34.createElement(ItemSpecimen, null, children), React34.createElement(ItemLabel, null, name)), IconGallery = ({ children, ...props }) => React34.createElement(ResetWrapper3, null, React34.createElement(List2, { ...props, className: "docblock-icongallery sb-unstyled" }, children));
 
 // src/blocks/components/TableOfContents.tsx
-import React35, { useEffect as useEffect10 } from "react";
+import React35, { useEffect as useEffect11 } from "react";
 import { NAVIGATE_URL } from "storybook/internal/core-events";
 import { styled as styled27 } from "storybook/theming";
 
@@ -5512,7 +5523,7 @@ var Aside = styled27.aside(() => ({
   channel,
   className
 }) => {
-  useEffect10(() => {
+  useEffect11(() => {
     if (disable)
       return () => {
       };
@@ -5547,10 +5558,110 @@ 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/use-service-docgen.ts
+import { getService } from "storybook/preview-api";
+
+// src/blocks/blocks/use-query-subscription.ts
+import { useCallback as useCallback8, useRef as useRef7 } from "react";
+import { seedQueryState } from "storybook/open-service";
+
+// src/blocks/blocks/useSyncExternalStoreShim.ts
+import { useEffect as useEffect12, useLayoutEffect, useState as useState15 } from "react";
+function useSyncExternalStoreShim(subscribe, getSnapshot) {
+  let value = getSnapshot(), [{ inst }, forceUpdate] = useState15({ inst: { value, getSnapshot } });
+  return useLayoutEffect(() => {
+    inst.value = value, inst.getSnapshot = getSnapshot, didSnapshotChange(inst) && forceUpdate({ inst });
+  }, [subscribe, value, getSnapshot]), useEffect12(() => (didSnapshotChange(inst) && forceUpdate({ inst }), subscribe(() => {
+    didSnapshotChange(inst) && forceUpdate({ inst });
+  })), [subscribe]), value;
+}
+function didSnapshotChange(inst) {
+  let latestGetSnapshot = inst.getSnapshot, prevValue = inst.value;
+  try {
+    let nextValue = latestGetSnapshot();
+    return !Object.is(prevValue, nextValue);
+  } catch {
+    return !0;
+  }
+}
+
+// src/blocks/blocks/use-query-subscription.ts
+function useQuerySubscription(cacheKey, query, input, selector) {
+  let cache = useRef7(void 0);
+  (cache.current?.key !== cacheKey || cache.current.selector !== selector) && (cache.current = {
+    key: cacheKey,
+    selector,
+    state: selector ? seedQueryState(query, input, selector) : seedQueryState(query, input)
+  });
+  let inputRef = useRef7(input);
+  inputRef.current = input;
+  let subscribe = useCallback8(
+    (listener) => {
+      let onQueryState = (state) => {
+        cache.current = { key: cacheKey, selector, state }, listener();
+      };
+      return selector ? query.subscribe(inputRef.current, selector, onQueryState) : query.subscribe(inputRef.current, onQueryState);
+    },
+    [query, cacheKey, selector]
+  ), getSnapshot = useCallback8(() => cache.current.state, []);
+  return useSyncExternalStoreShim(subscribe, getSnapshot);
+}
+
+// src/blocks/blocks/use-service-docgen.ts
+function useServiceDocgen(id) {
+  let service = getService("core/docgen");
+  return useQuerySubscription(id, service.queries.docgen, { id });
+}
+
+// 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 { data: servicePayload, isInitialLoading } = useServiceDocgen(componentId);
+  return servicePayload ? {
+    rows: {
+      serviceComponentName: servicePayload.name,
+      mainRows: mergeServiceArgTypes({
+        payload: servicePayload,
+        storyId: storyId ?? componentId,
+        parameters,
+        initialArgs,
+        customArgTypes
+      }),
+      subcomponentRows: getServiceSubcomponentArgTypes(servicePayload)
+    },
+    isInitialLoading
+  } : { rows: null, isInitialLoading };
+}
+
 // src/blocks/blocks/useOf.ts
 import { useContext as useContext3 } from "react";
 var useOf = (moduleExportOrType, validTypes) => useContext3(DocsContext).resolveOf(moduleExportOrType, validTypes);
@@ -5569,73 +5680,117 @@ 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), { rows: serviceRows, isInitialLoading } = useDocgenServiceRows({
+    componentId,
+    storyId,
+    parameters,
+    initialArgs,
+    customArgTypes: argTypes
+  });
+  return isInitialLoading ? React37.createElement(ArgsTable, { isLoading: !0 }) : 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 useCallback10, 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 useMemo4 } from "react";
 import { SourceType } from "storybook/internal/docs-tools";
 import { InvalidBlockOfPropError as InvalidBlockOfPropError3 } from "storybook/internal/preview-errors";
 
 // src/blocks/blocks/SourceContainer.tsx
-import React38, { createContext as createContext3, useEffect as useEffect11, useState as useState14 } from "react";
+import React38, { createContext as createContext3, useEffect as useEffect13, useState as useState16 } from "react";
 import { SNIPPET_RENDERED } from "storybook/internal/docs-tools";
 
 // ../../../node_modules/telejson/dist/chunk-EAFQLD22.mjs
@@ -5801,7 +5956,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;
@@ -5829,7 +5984,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({
@@ -6666,8 +6821,8 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
   children,
   channel
 }) => {
-  let [sources, setSources] = useState14({});
-  return useEffect11(() => {
+  let [sources, setSources] = useState16({});
+  return useEffect13(() => {
     let handleSnippetRendered = (idOrEvent, inputSource = null, inputFormat = !1) => {
       let {
         id,
@@ -6691,11 +6846,34 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
   }, []), React38.createElement(SourceContext.Provider, { value: { sources } }, children);
 };
 
+// src/blocks/blocks/use-service-story-docs.ts
+import { useCallback as useCallback9 } from "react";
+import { selectSnippetForStory, selectStoryDoc } from "storybook/open-service";
+import { getService as getService2 } from "storybook/preview-api";
+function useServiceStory(storyId, selector) {
+  let componentId = storyId.split("--")[0], service = getService2("core/story-docs"), boundSelector = useCallback9(
+    (payload) => selector(payload, storyId),
+    [selector, storyId]
+  );
+  return useQuerySubscription(
+    storyId,
+    service.queries.storyDocs,
+    { id: componentId },
+    boundSelector
+  );
+}
+function useServiceStoryDoc(storyId) {
+  return useServiceStory(storyId, selectStoryDoc);
+}
+function useServiceStorySnippet(storyId) {
+  return useServiceStory(storyId, selectSnippetForStory);
+}
+
 // src/blocks/blocks/useTransformCode.tsx
-import { useEffect as useEffect12, useState as useState15 } from "react";
+import { useEffect as useEffect14, useState as useState17 } from "react";
 function useTransformCode(source, transform, storyContext) {
-  let [transformedCode, setTransformedCode] = useState15("Transforming..."), transformed = transform ? transform?.(source, storyContext) : source;
-  return useEffect12(() => {
+  let [transformedCode, setTransformedCode] = useState17("Transforming..."), transformed = transform ? transform?.(source, storyContext) : source;
+  return useEffect14(() => {
     async function getTransformedCode() {
       let transformResult = await transformed;
       transformResult !== transformedCode && setTransformedCode(transformResult);
@@ -6710,14 +6888,15 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
   return sourceMap?.[argsHash(args)] || sourceMap?.[UNKNOWN_ARGS_HASH] || { code: "" };
 }, useCode = ({
   snippet,
+  serviceSnippet,
   storyContext,
   typeFromProps,
   transformFromProps
 }) => {
-  let parameters = storyContext.parameters ?? {}, { __isArgsStory: isArgsStory } = parameters, sourceParameters = parameters.docs?.source || {}, type = typeFromProps || sourceParameters.type || SourceType.AUTO, code = /* if user has explicitly set this as dynamic, use snippet */ type === SourceType.DYNAMIC || // if this is an args story and there's a snippet
-  type === SourceType.AUTO && snippet && isArgsStory ? snippet : sourceParameters.originalSource || "", transformer = transformFromProps ?? sourceParameters.transform, transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
+  let parameters = storyContext.parameters ?? {}, { __isArgsStory: isArgsStory } = parameters, sourceParameters = parameters.docs?.source || {}, type = typeFromProps || sourceParameters.type || SourceType.AUTO, staticSnippet = serviceSnippet || snippet, code = /* if user has explicitly set this as dynamic, use snippet */ type === SourceType.DYNAMIC || // if this is an args story and there's a snippet
+  type === SourceType.AUTO && staticSnippet && isArgsStory ? staticSnippet : 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) => {
+}, useSourceProps = (props, docsContext, sourceContext, serviceSnippet = "") => {
   let { of } = props, story = useMemo4(() => {
     if (of)
       return docsContext.resolveOf(of, ["story"]).story;
@@ -6727,6 +6906,7 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
     }
   }, [docsContext, of]), storyContext = story ? docsContext.getStoryContext(story) : {}, argsForSource = props.__forceInitialArgs ? storyContext.initialArgs : storyContext.unmappedArgs, source = story ? getStorySource(story.id, argsForSource, sourceContext) : null, transformedCode = useCode({
     snippet: source ? source.code : "",
+    serviceSnippet,
     storyContext: { ...storyContext, args: argsForSource },
     typeFromProps: props.type,
     transformFromProps: props.transform
@@ -6745,20 +6925,41 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
     language,
     dark
   });
+}, SourceWithStoryDocsSnippet = ({ storyId, docsContext, sourceContext, ...props }) => {
+  let serviceSnippet = useServiceStorySnippet(storyId).data ?? "", sourceProps = useSourceProps(props, docsContext, sourceContext, serviceSnippet);
+  return React39.createElement(Source, { ...sourceProps });
 }, SourceWithStorySnippet = (props) => {
-  let sourceContext = useContext4(SourceContext), docsContext = useContext4(DocsContext), sourceProps = useSourceProps(props, docsContext, sourceContext);
+  let { of } = props, sourceContext = useContext5(SourceContext), docsContext = useContext5(DocsContext), story = useMemo4(() => {
+    if (of)
+      return docsContext.resolveOf(of, ["story"]).story;
+    try {
+      return docsContext.storyById();
+    } catch {
+    }
+  }, [docsContext, of]);
+  if (globalThis.FEATURES?.experimentalDocgenServer && story?.id)
+    return React39.createElement(
+      SourceWithStoryDocsSnippet,
+      {
+        ...props,
+        docsContext,
+        sourceContext,
+        storyId: story.id
+      }
+    );
+  let 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 = useCallback10(() => {
     docsContext.channel.emit(FORCE_REMOUNT, { storyId: story.id });
   }, [docsContext.channel, story.id]);
   return React40.createElement(
@@ -6778,11 +6979,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 useCallback11, useEffect as useEffect15, useState as useState18 } from "react";
 import {
   RESET_STORY_ARGS,
   STORY_ARGS_UPDATED,
@@ -6794,17 +6995,17 @@ var useArgs = (story, context) => {
     throw new Error("No result when story was defined");
   return result;
 }, useArgsIfDefined = (story, context) => {
-  let storyContext = story ? context.getStoryContext(story) : { args: {} }, { id: storyId } = story || { id: "none" }, [args, setArgs] = useState16(storyContext.args);
-  useEffect13(() => {
+  let storyContext = story ? context.getStoryContext(story) : { args: {} }, { id: storyId } = story || { id: "none" }, [args, setArgs] = useState18(storyContext.args);
+  useEffect15(() => {
     let onArgsUpdated = (changed) => {
       changed.storyId === storyId && setArgs(changed.args);
     };
     return context.channel.on(STORY_ARGS_UPDATED, onArgsUpdated), () => context.channel.off(STORY_ARGS_UPDATED, onArgsUpdated);
   }, [storyId, context.channel]);
-  let updateArgs = useCallback8(
+  let updateArgs = useCallback11(
     (updatedArgs) => context.channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }),
     [storyId, context.channel]
-  ), resetArgs = useCallback8(
+  ), resetArgs = useCallback11(
     (argNames) => context.channel.emit(RESET_STORY_ARGS, { storyId, argNames }),
     [storyId, context.channel]
   );
@@ -6812,11 +7013,11 @@ var useArgs = (story, context) => {
 };
 
 // src/blocks/blocks/useGlobals.ts
-import { useEffect as useEffect14, useState as useState17 } from "react";
+import { useEffect as useEffect16, useState as useState19 } from "react";
 import { GLOBALS_UPDATED } from "storybook/internal/core-events";
 var useGlobals = (story, context) => {
-  let storyContext = context.getStoryContext(story), [globals, setGlobals] = useState17(storyContext.globals);
-  return useEffect14(() => {
+  let storyContext = context.getStoryContext(story), [globals, setGlobals] = useState19(storyContext.globals);
+  return useEffect16(() => {
     let onGlobalsUpdated = (changed) => {
       setGlobals(changed.globals);
     };
@@ -6825,32 +7026,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,
@@ -6858,17 +7075,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,
@@ -6879,14 +7096,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), { rows: serviceRows, isInitialLoading } = useDocgenServiceRows({
+    componentId: story.id.split("--")[0],
+    storyId: story.id,
+    parameters,
+    initialArgs: story.initialArgs,
+    customArgTypes: argTypes
+  });
+  return isInitialLoading ? React41.createElement(ArgsTable, { isLoading: !0 }) : 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
@@ -6894,7 +7149,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";
@@ -6928,7 +7183,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,
     {
@@ -6942,7 +7197,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,
     {
@@ -6999,7 +7254,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,
     {
@@ -7079,16 +7334,18 @@ 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, storyDocsDescription) => {
   switch (resolvedOf.type) {
-    case "story":
-      return resolvedOf.story.parameters.docs?.description?.story || null;
+    case "story": {
+      let storyDescription = resolvedOf.story.parameters.docs?.description?.story;
+      return storyDescription !== void 0 ? storyDescription : storyDocsDescription ?? null;
+    }
     case "meta": {
       let { parameters, component } = resolvedOf.preparedMeta, metaDescription = parameters.docs?.description?.component;
       return metaDescription || parameters.docs?.extractComponentDescription?.(component, {
         component,
         parameters
-      }) || null;
+      }) || serviceComponentDescription || null;
     }
     case "component": {
       let {
@@ -7098,26 +7355,54 @@ 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}`
       );
   }
+}, DescriptionBody = ({ resolvedOf, serviceComponentDescription, storyDocsDescription }) => {
+  let markdown = getDescriptionFromResolvedOf(
+    resolvedOf,
+    serviceComponentDescription,
+    storyDocsDescription
+  );
+  return markdown ? React44.createElement(Markdown, null, markdown) : null;
+}, DescriptionStoryWithServices = ({
+  resolvedOf
+}) => {
+  let storyDocsDescription = useServiceStoryDoc(resolvedOf.story.id).data?.description;
+  return React44.createElement(DescriptionBody, { resolvedOf, storyDocsDescription });
+}, DescriptionComponentWithServices = ({ resolvedOf, componentId }) => {
+  let serviceComponentDescription = useServiceDocgen(componentId).data?.description || void 0;
+  return React44.createElement(
+    DescriptionBody,
+    {
+      resolvedOf,
+      serviceComponentDescription
+    }
+  );
 }, DescriptionImpl = (props) => {
   let { of } = props;
   if ("of" in props && of === void 0)
     throw new InvalidBlockOfPropError5();
-  let resolvedOf = useOf(of || "meta"), markdown = getDescriptionFromResolvedOf(resolvedOf);
-  return markdown ? React44.createElement(Markdown, null, markdown) : null;
+  let resolvedOf = useOf(of || "meta"), context = useContext10(DocsContext);
+  if (globalThis.FEATURES?.experimentalDocgenServer) {
+    if (resolvedOf.type === "story")
+      return React44.createElement(DescriptionStoryWithServices, { resolvedOf });
+    let componentId = resolvedOf.type === "meta" ? resolvedOf.preparedMeta.componentId : context.getComponentId(resolvedOf.component);
+    if (componentId)
+      return React44.createElement(DescriptionComponentWithServices, { resolvedOf, componentId });
+  }
+  return React44.createElement(DescriptionBody, { resolvedOf });
 }, Description2 = withMdxComponentOverride("Description", DescriptionImpl);
 
 // src/blocks/blocks/Docs.tsx
 import React54 from "react";
 
 // src/blocks/blocks/DocsContainer.tsx
-import React45, { useEffect as useEffect15, useMemo as useMemo5 } from "react";
+import React45, { useEffect as useEffect17, useMemo as useMemo5 } from "react";
 import { ThemeProvider, ensure as ensureTheme } from "storybook/theming";
 
 // src/blocks/blocks/DocsSluggerContext.ts
@@ -7184,7 +7469,7 @@ var { document: document3, window: globalWindow3 } = globalThis, DocsContainer =
   } catch {
     toc = context?.projectAnnotations?.parameters?.docs?.toc;
   }
-  return useEffect15(() => {
+  return useEffect17(() => {
     let url;
     try {
       if (url = new URL(globalWindow3.parent.location.toString()), url.hash) {
@@ -7273,7 +7558,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 }) => ({
@@ -7290,7 +7575,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(), filter = projectAnnotations.parameters?.docs?.stories?.filter;
   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 })
   ));
@@ -7356,7 +7641,7 @@ function Docs({
 }
 
 // src/blocks/blocks/external/ExternalDocs.tsx
-import React55, { useRef as useRef6 } from "react";
+import React55, { useRef as useRef8 } from "react";
 import { deprecate as deprecate2 } from "storybook/internal/client-logger";
 import { composeConfigs as composeConfigs2 } from "storybook/preview-api";
 
@@ -7439,7 +7724,7 @@ var ConstantMap = class {
 
 // src/blocks/blocks/external/ExternalDocs.tsx
 function usePreview(projectAnnotations) {
-  let previewRef = useRef6();
+  let previewRef = useRef8();
   return previewRef.current || (previewRef.current = new ExternalPreview(projectAnnotations)), previewRef.current;
 }
 function ExternalDocs({
@@ -7461,9 +7746,9 @@ import { ThemeProvider as ThemeProvider2, ensure, themes } from "storybook/themi
 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();