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

package/dist/blocks.js

@@ -14,7 +14,7 @@ import {
 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";
@@ -3442,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 || {})
@@ -3473,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(
@@ -3921,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";
@@ -4251,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);
@@ -4341,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";
 
@@ -4400,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 () => {
       };
@@ -4620,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) {
@@ -4918,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";
 
@@ -5516,7 +5523,7 @@ var Aside = styled27.aside(() => ({
   channel,
   className
 }) => {
-  useEffect10(() => {
+  useEffect11(() => {
     if (disable)
       return () => {
       };
@@ -5561,24 +5568,59 @@ import {
   mergeServiceArgTypes
 } from "storybook/internal/docs-tools";
 
-// src/blocks/blocks/useServiceDocgen.ts
-import { useCallback as useCallback7, useMemo as useMemo4, useRef as useRef6, useSyncExternalStore } from "react";
+// src/blocks/blocks/use-service-docgen.ts
 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();
-    }) : () => {
+
+// 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);
     },
-    [service, id]
-  );
-  return useSyncExternalStore(subscribe, getSnapshot);
+    [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
@@ -5603,18 +5645,21 @@ function useDocgenServiceRows({
   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)
-  };
+  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
@@ -5719,14 +5764,14 @@ var LegacyArgTypes = (props) => {
     ...filterProps
   }) : null;
 }, DocgenServiceArgTypes = (props) => {
-  let { argTypes, parameters, componentId, storyId, initialArgs, filterProps, component } = useResolveArgTypes(props), serviceRows = useDocgenServiceRows({
+  let { argTypes, parameters, componentId, storyId, initialArgs, filterProps, component } = useResolveArgTypes(props), { rows: serviceRows, isInitialLoading } = useDocgenServiceRows({
     componentId,
     storyId,
     parameters,
     initialArgs,
     customArgTypes: argTypes
   });
-  return serviceRows ? renderArgTypesTables({
+  return isInitialLoading ? React37.createElement(ArgsTable, { isLoading: !0 }) : serviceRows ? renderArgTypesTables({
     mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
     mainRows: serviceRows.mainRows,
     subcomponentRows: serviceRows.subcomponentRows,
@@ -5735,17 +5780,17 @@ var LegacyArgTypes = (props) => {
 }, 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 useCallback8, useContext as useContext6 } 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 useContext5, useMemo as useMemo5 } 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
@@ -6776,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,
@@ -6801,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);
@@ -6820,15 +6888,16 @@ 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) => {
-  let { of } = props, story = useMemo5(() => {
+}, useSourceProps = (props, docsContext, sourceContext, serviceSnippet = "") => {
+  let { of } = props, story = useMemo4(() => {
     if (of)
       return docsContext.resolveOf(of, ["story"]).story;
     try {
@@ -6837,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
@@ -6855,8 +6925,29 @@ 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 = useContext5(SourceContext), docsContext = useContext5(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 = useContext5(DocsContext), sourceProps = useSourceProps(props, docsContext, EMPTY_SOURCE_CONTEXT);
@@ -6868,7 +6959,7 @@ var CanvasImpl = (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 = useCallback8(() => {
+  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(
@@ -6892,7 +6983,7 @@ import React41, { useContext as useContext8 } from "react";
 import { filterArgTypes as filterArgTypes2 } from "storybook/preview-api";
 
 // src/blocks/blocks/useArgs.ts
-import { useCallback as useCallback9, 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,
@@ -6904,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 = useCallback9(
+  let updateArgs = useCallback11(
     (updatedArgs) => context.channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }),
     [storyId, context.channel]
-  ), resetArgs = useCallback9(
+  ), resetArgs = useCallback11(
     (argNames) => context.channel.emit(RESET_STORY_ARGS, { storyId, argNames }),
     [storyId, context.channel]
   );
@@ -6922,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);
     };
@@ -7023,14 +7114,14 @@ var ControlsTables = ({
     }
   ) : null;
 }, DocgenServiceControls = ({ story, context, ...props }) => {
-  let { parameters, argTypes, component } = story, filterProps = getControlsFilterProps(story, props), interactiveState = useControlsInteractiveState(story, context), serviceRows = useDocgenServiceRows({
+  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 serviceRows ? React41.createElement(
+  return isInitialLoading ? React41.createElement(ArgsTable, { isLoading: !0 }) : serviceRows ? React41.createElement(
     ControlsTables,
     {
       mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
@@ -7243,10 +7334,12 @@ 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, serviceComponentDescription) => {
+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, {
@@ -7269,22 +7362,47 @@ var DescriptionType = /* @__PURE__ */ ((DescriptionType2) => (DescriptionType2.I
         `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;
+}, 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"), serviceComponentDescription = useServiceComponentDescription(resolvedOf), markdown = getDescriptionFromResolvedOf(resolvedOf, serviceComponentDescription);
-  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 useMemo6 } 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
@@ -7345,13 +7463,13 @@ var { document: document3, window: globalWindow3 } = globalThis, DocsContainer =
   theme,
   children
 }) => {
-  let slugger = useMemo6(() => createDocsSlugger(), []), toc;
+  let slugger = useMemo5(() => createDocsSlugger(), []), toc;
   try {
     toc = context.resolveOf("meta", ["meta"]).preparedMeta.parameters?.docs?.toc;
   } catch {
     toc = context?.projectAnnotations?.parameters?.docs?.toc;
   }
-  return useEffect15(() => {
+  return useEffect17(() => {
     let url;
     try {
       if (url = new URL(globalWindow3.parent.location.toString()), url.hash) {
@@ -7457,7 +7575,7 @@ var StyledHeading = styled29(Heading2)(({ theme }) => ({
     marginTop: "56px"
   }
 })), StoriesImpl = ({ title = "Stories", includePrimary = !0 }) => {
-  let { componentStories, projectAnnotations, getStoryContext } = useContext11(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 })
   ));
@@ -7523,7 +7641,7 @@ function Docs({
 }
 
 // src/blocks/blocks/external/ExternalDocs.tsx
-import React55, { useRef as useRef7 } 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";
 
@@ -7606,7 +7724,7 @@ var ConstantMap = class {
 
 // src/blocks/blocks/external/ExternalDocs.tsx
 function usePreview(projectAnnotations) {
-  let previewRef = useRef7();
+  let previewRef = useRef8();
   return previewRef.current || (previewRef.current = new ExternalPreview(projectAnnotations)), previewRef.current;
 }
 function ExternalDocs({

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as storybook_internal_csf from 'storybook/internal/csf';
 import React$1, { ReactElement, ComponentType } from 'react';
-import { Renderer, DocsContextProps, ModuleExport, ModuleExports, DocsRenderFunction } from 'storybook/internal/types';
+import { Renderer, DocsContextProps, ModuleExport, ModuleExports, Args, PreparedStory, DocsRenderFunction } from 'storybook/internal/types';
 import { ThemeVars } from 'storybook/theming';
 
 interface TocbotOptions {
@@ -65,6 +65,12 @@ type StoryBlockParameters = {
      */
     of: ModuleExport;
 };
+type StoriesBlockParameters = {
+    /**
+     * Custom filter function for determining which stories to include in a <Stories> block
+     */
+    filter?: <TRenderer extends Renderer = Renderer, TArgs = Args>(Story: PreparedStory<TRenderer>, Context: ReturnType<DocsContextProps['getStoryContext']>) => boolean;
+};
 type ControlsBlockParameters = {
     /** Exclude specific properties from the Controls panel */
     exclude?: string[] | RegExp;
@@ -218,11 +224,17 @@ interface DocsParameters {
          */
         source?: Partial<SourceBlockParameters>;
         /**
-         * Story configuration
+         * Story block configuration
          *
          * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-story
          */
         story?: Partial<StoryBlockParameters>;
+        /**
+         * Stories block configuration
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-stories
+         */
+        stories?: Partial<StoriesBlockParameters>;
         /**
          * The subtitle displayed when shown in docs page
          *