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

package/dist/_browser-chunks/{chunk-SPXYZZB5.js → chunk-Q6BGOKFZ.js}

@@ -1,17 +1,41 @@
+// src/blocks/components/SnippetWarning.tsx
+import React from "react";
+import { Button } from "storybook/internal/components";
+import { AlertIcon } from "@storybook/icons";
+import { styled } from "storybook/theming";
+var SNIPPET_WARNING_LABEL = "Incomplete code snippet", WarningButton = styled(Button)(({ theme }) => ({
+  color: theme.fgColor.warning,
+  "&:hover, &:focus-visible": {
+    color: theme.fgColor.warning,
+    background: theme.bgColor.warning
+  }
+})), SnippetWarning = ({ warning, className }) => warning?.trim() ? React.createElement(
+  WarningButton,
+  {
+    className,
+    ariaLabel: SNIPPET_WARNING_LABEL,
+    tooltip: warning,
+    variant: "ghost",
+    size: "small",
+    padding: "small"
+  },
+  React.createElement(AlertIcon, null)
+) : null;
+
 // src/blocks/components/Source.tsx
-import React2 from "react";
+import React3 from "react";
 import { SyntaxHighlighter } from "storybook/internal/components";
 import {
   ThemeProvider,
   convert,
   ignoreSsrWarning,
-  styled as styled2,
+  styled as styled3,
   themes,
   useTheme
 } from "storybook/theming";
 
 // src/blocks/components/EmptyBlock.tsx
-import React from "react";
+import React2 from "react";
 import { withReset } from "storybook/internal/components";
 
 // ../../../node_modules/@babel/runtime/helpers/esm/extends.js
@@ -851,8 +875,8 @@ function transparentize(amount, color) {
 var curriedTransparentize = curry(transparentize), curriedTransparentize$1 = curriedTransparentize;
 
 // src/blocks/components/EmptyBlock.tsx
-import { styled } from "storybook/theming";
-var Wrapper = styled.div(withReset, ({ theme }) => ({
+import { styled as styled2 } from "storybook/theming";
+var Wrapper = styled2.div(withReset, ({ theme }) => ({
   backgroundColor: theme.base === "light" ? "rgba(0,0,0,.01)" : "rgba(255,255,255,.01)",
   borderRadius: theme.appBorderRadius,
   border: `1px dashed ${theme.appBorderColor}`,
@@ -863,10 +887,10 @@ var Wrapper = styled.div(withReset, ({ theme }) => ({
   margin: "25px 0 40px",
   color: curriedTransparentize$1(0.3, theme.color.defaultText),
   fontSize: theme.typography.size.s2
-})), EmptyBlock = (props) => React.createElement(Wrapper, { ...props, className: "docblock-emptyblock sb-unstyled" });
+})), EmptyBlock = (props) => React2.createElement(Wrapper, { ...props, className: "docblock-emptyblock sb-unstyled" });
 
 // src/blocks/components/Source.tsx
-var StyledSyntaxHighlighter = styled2(
+var StyledSyntaxHighlighter = styled3(
   SyntaxHighlighter
 )(({ theme }) => ({
   // DocBlocks-specific styling and overrides
@@ -880,14 +904,21 @@ var StyledSyntaxHighlighter = styled2(
     background: "inherit"
   }
 }));
-var SourceSkeletonWrapper = styled2.div(({ theme }) => ({
+var PositionedSnippetWarning = styled3(SnippetWarning)({
+  position: "absolute",
+  top: 4,
+  right: 4,
+  zIndex: 1
+}), SourceWrapper = styled3.div({
+  position: "relative"
+}), SourceSkeletonWrapper = styled3.div(({ theme }) => ({
   background: theme.background.content,
   borderRadius: theme.appBorderRadius,
   border: `1px solid ${theme.appBorderColor}`,
   boxShadow: theme.base === "light" ? "rgba(0, 0, 0, 0.10) 0 1px 3px 0" : "rgba(0, 0, 0, 0.20) 0 2px 5px 0",
   margin: "25px 0 40px",
   padding: "20px 20px 20px 22px"
-})), SourceSkeletonPlaceholder = styled2.div(({ theme }) => ({
+})), SourceSkeletonPlaceholder = styled3.div(({ theme }) => ({
   animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
   background: theme.appBorderColor,
   height: 17,
@@ -896,7 +927,7 @@ var SourceSkeletonWrapper = styled2.div(({ theme }) => ({
   [`&:first-child${ignoreSsrWarning}`]: {
     margin: 0
   }
-})), SourceSkeleton = () => React2.createElement(SourceSkeletonWrapper, null, React2.createElement(SourceSkeletonPlaceholder, null), React2.createElement(SourceSkeletonPlaceholder, { style: { width: "80%" } }), React2.createElement(SourceSkeletonPlaceholder, { style: { width: "30%" } }), React2.createElement(SourceSkeletonPlaceholder, { style: { width: "80%" } })), Source = ({
+})), SourceSkeleton = () => React3.createElement(SourceSkeletonWrapper, null, React3.createElement(SourceSkeletonPlaceholder, null), React3.createElement(SourceSkeletonPlaceholder, { style: { width: "80%" } }), React3.createElement(SourceSkeletonPlaceholder, { style: { width: "30%" } }), React3.createElement(SourceSkeletonPlaceholder, { style: { width: "80%" } })), Source = ({
   isLoading,
   error,
   language,
@@ -904,14 +935,15 @@ var SourceSkeletonWrapper = styled2.div(({ theme }) => ({
   dark,
   format: format2 = !0,
   copyable = !0,
+  warning,
   ...rest
 }) => {
   let { typography } = useTheme();
   if (isLoading)
-    return React2.createElement(SourceSkeleton, null);
+    return React3.createElement(SourceSkeleton, null);
   if (error)
-    return React2.createElement(EmptyBlock, null, error);
-  let syntaxHighlighter = React2.createElement(
+    return React3.createElement(EmptyBlock, null, error);
+  let highlighter = React3.createElement(
     StyledSyntaxHighlighter,
     {
       bordered: !0,
@@ -922,11 +954,11 @@ var SourceSkeletonWrapper = styled2.div(({ theme }) => ({
       ...rest
     },
     code
-  );
+  ), syntaxHighlighter = warning ? React3.createElement(SourceWrapper, null, highlighter, React3.createElement(PositionedSnippetWarning, { warning })) : highlighter;
   if (typeof dark > "u")
     return syntaxHighlighter;
   let overrideTheme = dark ? themes.dark : themes.light;
-  return React2.createElement(
+  return React3.createElement(
     ThemeProvider,
     {
       theme: convert({
@@ -940,6 +972,7 @@ var SourceSkeletonWrapper = styled2.div(({ theme }) => ({
 };
 
 export {
+  SnippetWarning,
   rgba,
   curriedDarken$1,
   curriedLighten$1,

package/dist/_node-chunks/{chunk-NVMIFCHL.js → chunk-6WL4S62N.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/_node-chunks/{chunk-U2YGHAXE.js → chunk-BNKEYVDY.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/_node-chunks/{chunk-S7QDD6WA.js → chunk-PAAB5ORS.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -12,17 +12,17 @@ var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url)
 import {
   esm_default,
   stringify
-} from "./chunk-5C7V4PBI.js";
+} from "./chunk-REBXNTVL.js";
 import {
   visit
-} from "./chunk-NVMIFCHL.js";
+} from "./chunk-6WL4S62N.js";
 import {
   __commonJS,
   __esm,
   __export,
   __toCommonJS,
   __toESM
-} from "./chunk-U2YGHAXE.js";
+} from "./chunk-BNKEYVDY.js";
 
 // ../../../node_modules/acorn-jsx/xhtml.js
 var require_xhtml = __commonJS({

package/dist/_node-chunks/{chunk-5C7V4PBI.js → chunk-REBXNTVL.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/_node-chunks/{mdx-plugin-3DFPEYTF.js → mdx-plugin-KTB3ISIL.js}

@@ -1,23 +1,23 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   compile
-} from "./chunk-S7QDD6WA.js";
-import "./chunk-5C7V4PBI.js";
-import "./chunk-NVMIFCHL.js";
+} from "./chunk-PAAB5ORS.js";
+import "./chunk-REBXNTVL.js";
+import "./chunk-6WL4S62N.js";
 import {
   __commonJS,
   __toESM
-} from "./chunk-U2YGHAXE.js";
+} from "./chunk-BNKEYVDY.js";
 
 // ../../../node_modules/@rollup/pluginutils/node_modules/picomatch/lib/constants.js
 var require_constants = __commonJS({
@@ -1153,7 +1153,7 @@ var hasStringIsWellFormed = "isWellFormed" in String.prototype;
 
 // src/mdx-plugin.ts
 async function mdxPlugin(options) {
-  let include = /\.mdx$/, filter = createFilter(include), { presets } = options, mdxPluginOptions = (await presets.apply("options", {}))?.mdxPluginOptions, rehypeSlug = (await import("./rehype-slug-IRO4RPTE.js")).default, rehypeExternalLinks = (await import("./rehype-external-links-TBQC6AKY.js")).default;
+  let include = /\.mdx$/, filter = createFilter(include), { presets } = options, mdxPluginOptions = (await presets.apply("options", {}))?.mdxPluginOptions, rehypeSlug = (await import("./rehype-slug-UL2737TS.js")).default, rehypeExternalLinks = (await import("./rehype-external-links-KAD54GUY.js")).default;
   return {
     name: "storybook:mdx-plugin",
     enforce: "pre",

package/dist/_node-chunks/{rehype-external-links-TBQC6AKY.js → rehype-external-links-KAD54GUY.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -12,11 +12,11 @@ var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url)
 import {
   esm_default,
   parse
-} from "./chunk-5C7V4PBI.js";
+} from "./chunk-REBXNTVL.js";
 import {
   visit
-} from "./chunk-NVMIFCHL.js";
-import "./chunk-U2YGHAXE.js";
+} from "./chunk-6WL4S62N.js";
+import "./chunk-BNKEYVDY.js";
 
 // ../../../node_modules/hast-util-is-element/lib/index.js
 var convertElement = (

package/dist/_node-chunks/{rehype-slug-IRO4RPTE.js → rehype-slug-UL2737TS.js}

@@ -1,18 +1,18 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   visit
-} from "./chunk-NVMIFCHL.js";
-import "./chunk-U2YGHAXE.js";
+} from "./chunk-6WL4S62N.js";
+import "./chunk-BNKEYVDY.js";
 
 // ../../../node_modules/github-slugger/regex.js
 var regex = /[\0-\x1F!-,\.\/:-@\[-\^`\{-\xA9\xAB-\xB4\xB6-\xB9\xBB-\xBF\xD7\xF7\u02C2-\u02C5\u02D2-\u02DF\u02E5-\u02EB\u02ED\u02EF-\u02FF\u0375\u0378\u0379\u037E\u0380-\u0385\u0387\u038B\u038D\u03A2\u03F6\u0482\u0530\u0557\u0558\u055A-\u055F\u0589-\u0590\u05BE\u05C0\u05C3\u05C6\u05C8-\u05CF\u05EB-\u05EE\u05F3-\u060F\u061B-\u061F\u066A-\u066D\u06D4\u06DD\u06DE\u06E9\u06FD\u06FE\u0700-\u070F\u074B\u074C\u07B2-\u07BF\u07F6-\u07F9\u07FB\u07FC\u07FE\u07FF\u082E-\u083F\u085C-\u085F\u086B-\u089F\u08B5\u08C8-\u08D2\u08E2\u0964\u0965\u0970\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09F2-\u09FB\u09FD\u09FF\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF0-\u0AF8\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B54\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B70\u0B72-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BF0-\u0BFF\u0C0D\u0C11\u0C29\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5B-\u0C5F\u0C64\u0C65\u0C70-\u0C7F\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0CFF\u0D0D\u0D11\u0D45\u0D49\u0D4F-\u0D53\u0D58-\u0D5E\u0D64\u0D65\u0D70-\u0D79\u0D80\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DE5\u0DF0\u0DF1\u0DF4-\u0E00\u0E3B-\u0E3F\u0E4F\u0E5A-\u0E80\u0E83\u0E85\u0E8B\u0EA4\u0EA6\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F01-\u0F17\u0F1A-\u0F1F\u0F2A-\u0F34\u0F36\u0F38\u0F3A-\u0F3D\u0F48\u0F6D-\u0F70\u0F85\u0F98\u0FBD-\u0FC5\u0FC7-\u0FFF\u104A-\u104F\u109E\u109F\u10C6\u10C8-\u10CC\u10CE\u10CF\u10FB\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u1360-\u137F\u1390-\u139F\u13F6\u13F7\u13FE-\u1400\u166D\u166E\u1680\u169B-\u169F\u16EB-\u16ED\u16F9-\u16FF\u170D\u1715-\u171F\u1735-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17D4-\u17D6\u17D8-\u17DB\u17DE\u17DF\u17EA-\u180A\u180E\u180F\u181A-\u181F\u1879-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191F\u192C-\u192F\u193C-\u1945\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DA-\u19FF\u1A1C-\u1A1F\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1AA6\u1AA8-\u1AAF\u1AC1-\u1AFF\u1B4C-\u1B4F\u1B5A-\u1B6A\u1B74-\u1B7F\u1BF4-\u1BFF\u1C38-\u1C3F\u1C4A-\u1C4C\u1C7E\u1C7F\u1C89-\u1C8F\u1CBB\u1CBC\u1CC0-\u1CCF\u1CD3\u1CFB-\u1CFF\u1DFA\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FBD\u1FBF-\u1FC1\u1FC5\u1FCD-\u1FCF\u1FD4\u1FD5\u1FDC-\u1FDF\u1FED-\u1FF1\u1FF5\u1FFD-\u203E\u2041-\u2053\u2055-\u2070\u2072-\u207E\u2080-\u208F\u209D-\u20CF\u20F1-\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A\u213B\u2140-\u2144\u214A-\u214D\u214F-\u215F\u2189-\u24B5\u24EA-\u2BFF\u2C2F\u2C5F\u2CE5-\u2CEA\u2CF4-\u2CFF\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D70-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E00-\u2E2E\u2E30-\u3004\u3008-\u3020\u3030\u3036\u3037\u303D-\u3040\u3097\u3098\u309B\u309C\u30A0\u30FB\u3100-\u3104\u3130\u318F-\u319F\u31C0-\u31EF\u3200-\u33FF\u4DC0-\u4DFF\u9FFD-\u9FFF\uA48D-\uA4CF\uA4FE\uA4FF\uA60D-\uA60F\uA62C-\uA63F\uA673\uA67E\uA6F2-\uA716\uA720\uA721\uA789\uA78A\uA7C0\uA7C1\uA7CB-\uA7F4\uA828-\uA82B\uA82D-\uA83F\uA874-\uA87F\uA8C6-\uA8CF\uA8DA-\uA8DF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA954-\uA95F\uA97D-\uA97F\uA9C1-\uA9CE\uA9DA-\uA9DF\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A-\uAA5F\uAA77-\uAA79\uAAC3-\uAADA\uAADE\uAADF\uAAF0\uAAF1\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F\uAB5B\uAB6A-\uAB6F\uABEB\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uD7FF\uE000-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB29\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBB2-\uFBD2\uFD3E-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFC-\uFDFF\uFE10-\uFE1F\uFE30-\uFE32\uFE35-\uFE4C\uFE50-\uFE6F\uFE75\uFEFD-\uFF0F\uFF1A-\uFF20\uFF3B-\uFF3E\uFF40\uFF5B-\uFF65\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFFF]|\uD800[\uDC0C\uDC27\uDC3B\uDC3E\uDC4E\uDC4F\uDC5E-\uDC7F\uDCFB-\uDD3F\uDD75-\uDDFC\uDDFE-\uDE7F\uDE9D-\uDE9F\uDED1-\uDEDF\uDEE1-\uDEFF\uDF20-\uDF2C\uDF4B-\uDF4F\uDF7B-\uDF7F\uDF9E\uDF9F\uDFC4-\uDFC7\uDFD0\uDFD6-\uDFFF]|\uD801[\uDC9E\uDC9F\uDCAA-\uDCAF\uDCD4-\uDCD7\uDCFC-\uDCFF\uDD28-\uDD2F\uDD64-\uDDFF\uDF37-\uDF3F\uDF56-\uDF5F\uDF68-\uDFFF]|\uD802[\uDC06\uDC07\uDC09\uDC36\uDC39-\uDC3B\uDC3D\uDC3E\uDC56-\uDC5F\uDC77-\uDC7F\uDC9F-\uDCDF\uDCF3\uDCF6-\uDCFF\uDD16-\uDD1F\uDD3A-\uDD7F\uDDB8-\uDDBD\uDDC0-\uDDFF\uDE04\uDE07-\uDE0B\uDE14\uDE18\uDE36\uDE37\uDE3B-\uDE3E\uDE40-\uDE5F\uDE7D-\uDE7F\uDE9D-\uDEBF\uDEC8\uDEE7-\uDEFF\uDF36-\uDF3F\uDF56-\uDF5F\uDF73-\uDF7F\uDF92-\uDFFF]|\uD803[\uDC49-\uDC7F\uDCB3-\uDCBF\uDCF3-\uDCFF\uDD28-\uDD2F\uDD3A-\uDE7F\uDEAA\uDEAD-\uDEAF\uDEB2-\uDEFF\uDF1D-\uDF26\uDF28-\uDF2F\uDF51-\uDFAF\uDFC5-\uDFDF\uDFF7-\uDFFF]|\uD804[\uDC47-\uDC65\uDC70-\uDC7E\uDCBB-\uDCCF\uDCE9-\uDCEF\uDCFA-\uDCFF\uDD35\uDD40-\uDD43\uDD48-\uDD4F\uDD74\uDD75\uDD77-\uDD7F\uDDC5-\uDDC8\uDDCD\uDDDB\uDDDD-\uDDFF\uDE12\uDE38-\uDE3D\uDE3F-\uDE7F\uDE87\uDE89\uDE8E\uDE9E\uDEA9-\uDEAF\uDEEB-\uDEEF\uDEFA-\uDEFF\uDF04\uDF0D\uDF0E\uDF11\uDF12\uDF29\uDF31\uDF34\uDF3A\uDF45\uDF46\uDF49\uDF4A\uDF4E\uDF4F\uDF51-\uDF56\uDF58-\uDF5C\uDF64\uDF65\uDF6D-\uDF6F\uDF75-\uDFFF]|\uD805[\uDC4B-\uDC4F\uDC5A-\uDC5D\uDC62-\uDC7F\uDCC6\uDCC8-\uDCCF\uDCDA-\uDD7F\uDDB6\uDDB7\uDDC1-\uDDD7\uDDDE-\uDDFF\uDE41-\uDE43\uDE45-\uDE4F\uDE5A-\uDE7F\uDEB9-\uDEBF\uDECA-\uDEFF\uDF1B\uDF1C\uDF2C-\uDF2F\uDF3A-\uDFFF]|\uD806[\uDC3B-\uDC9F\uDCEA-\uDCFE\uDD07\uDD08\uDD0A\uDD0B\uDD14\uDD17\uDD36\uDD39\uDD3A\uDD44-\uDD4F\uDD5A-\uDD9F\uDDA8\uDDA9\uDDD8\uDDD9\uDDE2\uDDE5-\uDDFF\uDE3F-\uDE46\uDE48-\uDE4F\uDE9A-\uDE9C\uDE9E-\uDEBF\uDEF9-\uDFFF]|\uD807[\uDC09\uDC37\uDC41-\uDC4F\uDC5A-\uDC71\uDC90\uDC91\uDCA8\uDCB7-\uDCFF\uDD07\uDD0A\uDD37-\uDD39\uDD3B\uDD3E\uDD48-\uDD4F\uDD5A-\uDD5F\uDD66\uDD69\uDD8F\uDD92\uDD99-\uDD9F\uDDAA-\uDEDF\uDEF7-\uDFAF\uDFB1-\uDFFF]|\uD808[\uDF9A-\uDFFF]|\uD809[\uDC6F-\uDC7F\uDD44-\uDFFF]|[\uD80A\uD80B\uD80E-\uD810\uD812-\uD819\uD824-\uD82B\uD82D\uD82E\uD830-\uD833\uD837\uD839\uD83D\uD83F\uD87B-\uD87D\uD87F\uD885-\uDB3F\uDB41-\uDBFF][\uDC00-\uDFFF]|\uD80D[\uDC2F-\uDFFF]|\uD811[\uDE47-\uDFFF]|\uD81A[\uDE39-\uDE3F\uDE5F\uDE6A-\uDECF\uDEEE\uDEEF\uDEF5-\uDEFF\uDF37-\uDF3F\uDF44-\uDF4F\uDF5A-\uDF62\uDF78-\uDF7C\uDF90-\uDFFF]|\uD81B[\uDC00-\uDE3F\uDE80-\uDEFF\uDF4B-\uDF4E\uDF88-\uDF8E\uDFA0-\uDFDF\uDFE2\uDFE5-\uDFEF\uDFF2-\uDFFF]|\uD821[\uDFF8-\uDFFF]|\uD823[\uDCD6-\uDCFF\uDD09-\uDFFF]|\uD82C[\uDD1F-\uDD4F\uDD53-\uDD63\uDD68-\uDD6F\uDEFC-\uDFFF]|\uD82F[\uDC6B-\uDC6F\uDC7D-\uDC7F\uDC89-\uDC8F\uDC9A-\uDC9C\uDC9F-\uDFFF]|\uD834[\uDC00-\uDD64\uDD6A-\uDD6C\uDD73-\uDD7A\uDD83\uDD84\uDD8C-\uDDA9\uDDAE-\uDE41\uDE45-\uDFFF]|\uD835[\uDC55\uDC9D\uDCA0\uDCA1\uDCA3\uDCA4\uDCA7\uDCA8\uDCAD\uDCBA\uDCBC\uDCC4\uDD06\uDD0B\uDD0C\uDD15\uDD1D\uDD3A\uDD3F\uDD45\uDD47-\uDD49\uDD51\uDEA6\uDEA7\uDEC1\uDEDB\uDEFB\uDF15\uDF35\uDF4F\uDF6F\uDF89\uDFA9\uDFC3\uDFCC\uDFCD]|\uD836[\uDC00-\uDDFF\uDE37-\uDE3A\uDE6D-\uDE74\uDE76-\uDE83\uDE85-\uDE9A\uDEA0\uDEB0-\uDFFF]|\uD838[\uDC07\uDC19\uDC1A\uDC22\uDC25\uDC2B-\uDCFF\uDD2D-\uDD2F\uDD3E\uDD3F\uDD4A-\uDD4D\uDD4F-\uDEBF\uDEFA-\uDFFF]|\uD83A[\uDCC5-\uDCCF\uDCD7-\uDCFF\uDD4C-\uDD4F\uDD5A-\uDFFF]|\uD83B[\uDC00-\uDDFF\uDE04\uDE20\uDE23\uDE25\uDE26\uDE28\uDE33\uDE38\uDE3A\uDE3C-\uDE41\uDE43-\uDE46\uDE48\uDE4A\uDE4C\uDE50\uDE53\uDE55\uDE56\uDE58\uDE5A\uDE5C\uDE5E\uDE60\uDE63\uDE65\uDE66\uDE6B\uDE73\uDE78\uDE7D\uDE7F\uDE8A\uDE9C-\uDEA0\uDEA4\uDEAA\uDEBC-\uDFFF]|\uD83C[\uDC00-\uDD2F\uDD4A-\uDD4F\uDD6A-\uDD6F\uDD8A-\uDFFF]|\uD83E[\uDC00-\uDFEF\uDFFA-\uDFFF]|\uD869[\uDEDE-\uDEFF]|\uD86D[\uDF35-\uDF3F]|\uD86E[\uDC1E\uDC1F]|\uD873[\uDEA2-\uDEAF]|\uD87A[\uDFE1-\uDFFF]|\uD87E[\uDE1E-\uDFFF]|\uD884[\uDF4B-\uDFFF]|\uDB40[\uDC00-\uDCFF\uDDF0-\uDFFF]/g;

package/dist/angular/index.d.ts

@@ -1,4 +1,5 @@
 //#region code/addons/docs/.dts-emit/code/addons/docs/src/angular/index.d.ts
+/** Hand Compodoc's `documentation.json` to the Angular preview so Controls and Docs can read it. */
 declare const setCompodocJson: (compodocJson: any) => void;
 //#endregion
 export { setCompodocJson };

package/dist/angular/index.js

@@ -1,7 +1,14 @@
 import "../_browser-chunks/chunk-UAWMPV5J.js";
 
 // src/angular/index.ts
-var setCompodocJson = (compodocJson) => {
+import { logger } from "storybook/internal/client-logger";
+var warnedRedundant = !1, setCompodocJson = (compodocJson) => {
+  if (globalThis.FEATURES?.experimentalDocgenServer) {
+    warnedRedundant || (warnedRedundant = !0, logger.warn(
+      "setCompodocJson() had no effect: with the experimentalDocgenServer feature enabled, Storybook extracts Angular metadata on the server and never reads Compodoc output. You can delete the setCompodocJson call and the documentation.json import from your preview config."
+    ));
+    return;
+  }
   globalThis.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };
 export {

package/dist/blocks.d.ts

@@ -3,9 +3,9 @@ import * as React$1 from "react";
 import React, { ComponentProps, Context, FC, FunctionComponent, PropsWithChildren, ReactElement, ReactNode } from "react";
 import { Args, BaseAnnotations, ComponentTitle, Conditional, DocsContextProps as DocsContextProps$1, ModuleExport, ModuleExports, Parameters as Parameters$1, PreparedStory, ProjectAnnotations, Renderer, ResolvedModuleExportFromType, ResolvedModuleExportType, StoryId } from "storybook/internal/types";
 import { ActionItem, SupportedLanguage, SyntaxHighlighter, SyntaxHighlighterFormatTypes } from "storybook/internal/components";
+import { SourceType, anchorBlockIdFromId } from "storybook/internal/docs-tools";
 import { Renderer as Renderer$1 } from "storybook/internal/csf";
 import { PropDescriptor } from "storybook/preview-api";
-import { SourceType } from "storybook/internal/docs-tools";
 
 //#region code/addons/docs/.dts-emit/code/addons/docs/src/blocks/components/Source.d.ts
 declare enum SourceError {
@@ -27,6 +27,8 @@ interface SourceCodeProps {
 interface SourceProps$1 extends SourceCodeProps {
   isLoading?: boolean;
   error?: SourceError;
+  /** Why the snippet is an incomplete example, when it is one; see `StoryDoc.warning`. */
+  warning?: string;
 }
 /** Syntax-highlighted source code for a component (or anything!) */
 declare const Source$1: FunctionComponent<SourceProps$1>;
@@ -83,7 +85,8 @@ type Globals = {
 //#region code/addons/docs/.dts-emit/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.d.ts
 declare enum ArgsTableError {
   NO_COMPONENT = "No component found.",
-  ARGS_UNSUPPORTED = "Args unsupported. See Args documentation for your framework."
+  ARGS_UNSUPPORTED = "Args unsupported. See Args documentation for your framework.",
+  NOT_A_STORY_COMPONENT = "No docs found for this component on this page. Import the story file whose meta.component is this component, or pass `of={ComponentStories}`."
 }
 type SortType = 'alpha' | 'requiredFirst' | 'none';
 interface ArgsTableOptionProps {
@@ -188,7 +191,6 @@ interface IconGalleryProps {
 declare const IconGallery: FunctionComponent<IconGalleryProps>;
 //#endregion
 //#region code/addons/docs/.dts-emit/code/addons/docs/src/blocks/blocks/Anchor.d.ts
-declare const anchorBlockIdFromId: (storyId: string) => string;
 interface AnchorProps {
   storyId: string;
 }
@@ -211,6 +213,8 @@ declare function argsHash(args: Args): ArgsHash;
 interface SourceItem {
   code: string;
   format?: SyntaxHighlighterFormatTypes;
+  /** Why `code` is an incomplete example, when it is one; see `StoryDoc.warning`. */
+  warning?: string;
 }
 type StorySources = Record<StoryId, Record<ArgsHash, SourceItem>>;
 interface SourceContextProps {
@@ -244,7 +248,7 @@ type SourceProps = SourceParameters & {
   __forceInitialArgs?: boolean;
 };
 type PureSourceProps = ComponentProps<typeof Source$1>;
-declare const useSourceProps: (props: SourceProps, docsContext: DocsContextProps, sourceContext: SourceContextProps, serviceSnippet?: string) => PureSourceProps;
+declare const useSourceProps: (props: SourceProps, docsContext: DocsContextProps, sourceContext: SourceContextProps, serviceSnippet?: string, serviceWarning?: string) => PureSourceProps;
 declare const Source: React.ComponentType<SourceProps>;
 //#endregion
 //#region code/addons/docs/.dts-emit/code/addons/docs/src/blocks/blocks/Story.d.ts

package/dist/blocks.js

@@ -4,13 +4,14 @@ import {
 } from "./_browser-chunks/chunk-QQBDHPVZ.js";
 import {
   EmptyBlock,
+  SnippetWarning,
   Source,
   curriedDarken$1,
   curriedLighten$1,
   curriedOpacify$1,
   curriedTransparentize$1,
   rgba
-} from "./_browser-chunks/chunk-SPXYZZB5.js";
+} from "./_browser-chunks/chunk-Q6BGOKFZ.js";
 import "./_browser-chunks/chunk-UAWMPV5J.js";
 
 // src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -4518,7 +4519,7 @@ import React29 from "react";
 import { Button as Button6, Toolbar as SharedToolbar } from "storybook/internal/components";
 import { ShareAltIcon, SyncIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon } from "@storybook/icons";
 import { styled as styled21 } from "storybook/theming";
-var AbsoluteBar = styled21(SharedToolbar)({
+var TRAILING_INSET = 10, AbsoluteBar = styled21(SharedToolbar)({
   position: "absolute",
   left: 0,
   right: 0,
@@ -4547,7 +4548,12 @@ var AbsoluteBar = styled21(SharedToolbar)({
 }) => React29.createElement(
   AbsoluteBar,
   {
-    innerStyle: { gap: 4, paddingInline: 7, justifyContent: "space-between" },
+    innerStyle: {
+      gap: 4,
+      paddingInline: 7,
+      paddingInlineEnd: TRAILING_INSET - 1,
+      justifyContent: "space-between"
+    },
     lang: "en",
     ...rest
   },
@@ -4645,6 +4651,9 @@ var ChildrenContainer = styled22.div(
 ), ActionBar = styled22(Bar)({
   marginTop: -40,
   marginBottom: 40
+}), TrailingSnippetWarning = styled22(SnippetWarning)({
+  marginInlineStart: "auto",
+  marginInlineEnd: TRAILING_INSET
 }), StyledSource = styled22(Source)(({ theme }) => ({
   margin: 0,
   borderTopLeftRadius: 0,
@@ -4711,7 +4720,7 @@ var PositionedToolbar = styled22(Toolbar)({
       logger4.error(err), setCopied("Copy error!");
     }
     globalThis.window.setTimeout(() => setCopied(null), COPIED_LABEL_ANIMATION_DURATION);
-  }, [copyToClipboard, withSource?.code]), childProps = getChildProps(children), hasSourceError = !!(withSource && withSource.error), hasValidSource = !!(withSource && !withSource.error);
+  }, [copyToClipboard, withSource?.code]), childProps = getChildProps(children), { warning: sourceWarning, ...sourceProps } = withSource ?? {}, hasSourceError = !!(withSource && withSource.error), hasValidSource = !!(withSource && !withSource.error);
   return React30.createElement(React30.Fragment, null, React30.createElement(
     PreviewContainer,
     {
@@ -4742,7 +4751,7 @@ var PositionedToolbar = styled22(Toolbar)({
       },
       React30.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React30.createElement("div", { key: i2 }, child)) : React30.createElement("div", null, children))
     )),
-    hasValidSource && expanded && React30.createElement("div", { id: sourceId }, React30.createElement(StyledSource, { ...withSource, dark: !0, copyable: !1 }))
+    hasValidSource && expanded && React30.createElement("div", { id: sourceId }, React30.createElement(StyledSource, { ...sourceProps, dark: !0, copyable: !1 }))
   ), (withSource || additionalActionItems.length > 0) && React30.createElement(ActionBar, { className: "sbdocs sbdocs-preview-actions", innerStyle: { paddingInline: 0 } }, hasSourceError && React30.createElement(
     Button7,
     {
@@ -4782,7 +4791,7 @@ var PositionedToolbar = styled22(Toolbar)({
       },
       title
     )
-  )));
+  ), hasValidSource && React30.createElement(TrailingSnippetWarning, { warning: sourceWarning })));
 }, StyledPreview = styled22(Preview)(() => ({
   ".docs-story": {
     paddingTop: 32,
@@ -5637,7 +5646,8 @@ var Aside = styled27.aside(() => ({
 
 // src/blocks/blocks/Anchor.tsx
 import React36 from "react";
-var anchorBlockIdFromId = (storyId) => `anchor--${storyId}`, Anchor = ({ storyId, children }) => React36.createElement("div", { id: anchorBlockIdFromId(storyId), className: "sb-anchor" }, children);
+import { anchorBlockIdFromId } from "storybook/internal/docs-tools";
+var Anchor = ({ storyId, children }) => React36.createElement("div", { id: anchorBlockIdFromId(storyId), className: "sb-anchor" }, children);
 
 // src/blocks/blocks/ArgTypes.tsx
 import React37, { useContext as useContext4 } from "react";
@@ -5775,7 +5785,7 @@ function useResolveArgTypes(props) {
     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.
+      // component id, recovered by searching only the CSF files this docs page imports.
       componentId: context.getComponentId(component),
       argTypes: extractComponentArgTypes(component, parameters),
       component
@@ -5848,7 +5858,18 @@ var LegacyArgTypes = (props) => {
     ...filterProps
   }) : null;
 }, DocgenServiceArgTypes = (props) => {
-  let { argTypes, parameters, componentId, storyId, initialArgs, filterProps, component } = useResolveArgTypes(props), { rows: serviceRows, isInitialLoading } = useDocgenServiceRows({
+  let resolved = useResolveArgTypes(props);
+  return resolved.componentId === void 0 ? React37.createElement(ArgsTable, { error: "No docs found for this component on this page. Import the story file whose meta.component is this component, or pass `of={ComponentStories}`." /* NOT_A_STORY_COMPONENT */ }) : React37.createElement(DocgenServiceArgTypesRows, { ...resolved, componentId: resolved.componentId });
+}, DocgenServiceArgTypesRows = ({
+  argTypes,
+  parameters,
+  componentId,
+  storyId,
+  initialArgs,
+  filterProps,
+  component
+}) => {
+  let { rows: serviceRows, isInitialLoading } = useDocgenServiceRows({
     componentId,
     storyId,
     parameters,
@@ -6913,7 +6934,8 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
         id,
         args = void 0,
         source,
-        format: format2
+        format: format2,
+        warning = void 0
       } = typeof idOrEvent == "string" ? {
         id: idOrEvent,
         source: inputSource,
@@ -6923,7 +6945,7 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
         ...current,
         [id]: {
           ...current[id],
-          [hash]: { code: source || "", format: format2 }
+          [hash]: { code: source || "", format: format2, warning }
         }
       }));
     };
@@ -6933,7 +6955,11 @@ var SourceContext = createContext3({ sources: {} }), UNKNOWN_ARGS_HASH = "--unkn
 
 // src/blocks/blocks/use-service-story-docs.ts
 import { useCallback as useCallback9 } from "react";
-import { selectSnippetForStory, selectStoryDoc } from "storybook/open-service";
+import {
+  selectSnippetForStory,
+  selectStoryDoc,
+  selectWarningForStory
+} 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", { internal: !0 }), boundSelector = useCallback9(
@@ -6953,6 +6979,9 @@ function useServiceStoryDoc(storyId) {
 function useServiceStorySnippet(storyId) {
   return useServiceStory(storyId, selectSnippetForStory);
 }
+function useServiceStoryWarning(storyId) {
+  return useServiceStory(storyId, selectWarningForStory);
+}
 
 // src/blocks/blocks/useTransformCode.tsx
 import { useEffect as useEffect14, useState as useState16 } from "react";
@@ -6981,7 +7010,7 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
   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, serviceSnippet = "") => {
+}, useSourceProps = (props, docsContext, sourceContext, serviceSnippet = "", serviceWarning) => {
   let { of } = props, story = useMemo4(() => {
     if (of)
       return docsContext.resolveOf(of, ["story"]).story;
@@ -6999,19 +7028,32 @@ var EMPTY_SOURCE_CONTEXT = { sources: {} }, getStorySource = (storyId, args, sou
   if ("of" in props && of === void 0)
     throw new InvalidBlockOfPropError3();
   let sourceParameters = story?.parameters?.docs?.source || {}, format2 = props.format, language = props.language ?? sourceParameters.language ?? "jsx", dark = props.dark ?? sourceParameters.dark ?? !1;
-  return props.code === void 0 && !story ? { error: "Oh no! The source is not available." /* SOURCE_UNAVAILABLE */ } : props.code !== void 0 ? {
-    code: props.code,
-    format: format2,
-    language,
-    dark
-  } : (format2 = source?.format ?? !0, {
+  if (props.code === void 0 && !story)
+    return { error: "Oh no! The source is not available." /* SOURCE_UNAVAILABLE */ };
+  if (props.code !== void 0)
+    return {
+      code: props.code,
+      format: format2,
+      language,
+      dark
+    };
+  format2 = source?.format ?? !0;
+  let warning;
+  return transformedCode === serviceSnippet ? warning = serviceWarning : transformedCode === source?.code && (warning = source.warning), {
     code: transformedCode,
     format: format2,
     language,
-    dark
-  });
+    dark,
+    warning
+  };
 }, SourceWithStoryDocsSnippet = ({ storyId, docsContext, sourceContext, ...props }) => {
-  let serviceSnippet = useServiceStorySnippet(storyId).data ?? "", sourceProps = useSourceProps(props, docsContext, sourceContext, serviceSnippet);
+  let serviceSnippet = useServiceStorySnippet(storyId).data ?? "", serviceWarning = useServiceStoryWarning(storyId).data, sourceProps = useSourceProps(
+    props,
+    docsContext,
+    sourceContext,
+    serviceSnippet,
+    serviceWarning
+  );
   return React39.createElement(Source, { ...sourceProps });
 }, SourceWithStorySnippet = (props) => {
   let { of } = props, sourceContext = useContext5(SourceContext), docsContext = useContext5(DocsContext), story = useMemo4(() => {

package/dist/csf-plugin/webpack-loader.js

@@ -1,15 +1,15 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-import "../_node-chunks/chunk-U2YGHAXE.js";
+import "../_node-chunks/chunk-BNKEYVDY.js";
 
 // src/csf-plugin/webpack-loader.ts
 import { readFile } from "node:fs/promises";

package/dist/manager.js

@@ -1,6 +1,7 @@
 import {
+  SnippetWarning,
   Source
-} from "./_browser-chunks/chunk-SPXYZZB5.js";
+} from "./_browser-chunks/chunk-Q6BGOKFZ.js";
 import "./_browser-chunks/chunk-UAWMPV5J.js";
 
 // src/manager.tsx
@@ -24,7 +25,8 @@ var CodePanel = ({
 }) => {
   let lastEventMatchesCurrentStory = lastEvent?.id === currentStoryId, [codeSnippet, setSourceCode] = useState({
     source: lastEventMatchesCurrentStory ? lastEvent?.source : void 0,
-    format: lastEventMatchesCurrentStory ? lastEvent?.format ?? void 0 : void 0
+    format: lastEventMatchesCurrentStory ? lastEvent?.format ?? void 0 : void 0,
+    warning: lastEventMatchesCurrentStory ? lastEvent?.warning : void 0
   }), parameter = useParameter(PARAM_KEY, {
     source: { code: "" },
     theme: "dark"
@@ -32,18 +34,19 @@ var CodePanel = ({
   useEffect(() => {
     setSourceCode({
       source: void 0,
-      format: void 0
+      format: void 0,
+      warning: void 0
     });
   }, [currentStoryId]), useChannel(
     {
-      [SNIPPET_RENDERED]: ({ id, source, format }) => {
-        id !== void 0 && id !== currentStoryId || setSourceCode({ source, format });
+      [SNIPPET_RENDERED]: ({ id, source, format, warning: warning2 }) => {
+        id !== void 0 && id !== currentStoryId || setSourceCode({ source, format, warning: warning2 });
       }
     },
     [currentStoryId]
   );
-  let isDark = useTheme().base !== "light", awaitingServiceSnippet = shouldWaitForServiceSnippet(storyParameters, storyPrepared), code = parameter.source?.code || codeSnippet.source || (awaitingServiceSnippet ? "" : parameter.source?.originalSource);
-  return React.createElement(AddonPanel, { active: !!active }, React.createElement(SourceStyles, null, React.createElement(Source, { ...parameter.source, code, format: codeSnippet.format, dark: isDark })));
+  let isDark = useTheme().base !== "light", awaitingServiceSnippet = shouldWaitForServiceSnippet(storyParameters, storyPrepared), code = parameter.source?.code || codeSnippet.source || (awaitingServiceSnippet ? "" : parameter.source?.originalSource), warning = parameter.source?.code ? void 0 : codeSnippet.warning;
+  return React.createElement(AddonPanel, { active: !!active }, React.createElement(SourceStyles, null, React.createElement(Source, { ...parameter.source, code, format: codeSnippet.format, dark: isDark }), React.createElement(PositionedSnippetWarning, { warning })));
 };
 addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
@@ -80,11 +83,16 @@ addons.register(ADDON_ID, (api) => {
     }
   });
 });
-var SourceStyles = styled.div(() => ({
+var SourceStyles = styled.div({
   height: "100%",
+  position: "relative",
   [`> :first-child${ignoreSsrWarning}`]: {
     margin: 0,
     height: "100%",
     boxShadow: "none"
   }
-}));
+}), PositionedSnippetWarning = styled(SnippetWarning)({
+  position: "absolute",
+  top: 8,
+  right: 10
+});

package/dist/mdx-loader.js

@@ -1,20 +1,20 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   compile
-} from "./_node-chunks/chunk-S7QDD6WA.js";
-import "./_node-chunks/chunk-5C7V4PBI.js";
-import "./_node-chunks/chunk-NVMIFCHL.js";
-import "./_node-chunks/chunk-U2YGHAXE.js";
+} from "./_node-chunks/chunk-PAAB5ORS.js";
+import "./_node-chunks/chunk-REBXNTVL.js";
+import "./_node-chunks/chunk-6WL4S62N.js";
+import "./_node-chunks/chunk-BNKEYVDY.js";
 
 // src/mdx-loader.ts
 var DEFAULT_RENDERER = `

package/dist/preset.js

@@ -1,15 +1,15 @@
-import CJS_COMPAT_NODE_URL_0xz6foulbll8 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0xz6foulbll8 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0xz6foulbll8 from "node:module";
+import CJS_COMPAT_NODE_URL_dgqus2stgw from 'node:url';
+import CJS_COMPAT_NODE_PATH_dgqus2stgw from 'node:path';
+import CJS_COMPAT_NODE_MODULE_dgqus2stgw from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0xz6foulbll8.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0xz6foulbll8.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0xz6foulbll8.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_dgqus2stgw.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_dgqus2stgw.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_dgqus2stgw.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-import "./_node-chunks/chunk-U2YGHAXE.js";
+import "./_node-chunks/chunk-BNKEYVDY.js";
 
 // src/preset.ts
 import { isAbsolute as isAbsolute2 } from "node:path";
@@ -807,7 +807,7 @@ var getResolvedReact = async (options) => {
   };
 };
 async function webpack2(webpackConfig = {}, options) {
-  let { module = {} } = webpackConfig, { csfPluginOptions = {}, mdxPluginOptions = {} } = options, enrichCsf2 = await options.presets.apply("experimental_enrichCsf"), rehypeSlug = (await import("./_node-chunks/rehype-slug-IRO4RPTE.js")).default, rehypeExternalLinks = (await import("./_node-chunks/rehype-external-links-TBQC6AKY.js")).default, mdxLoaderOptions = await options.presets.apply("mdxLoaderOptions", {
+  let { module = {} } = webpackConfig, { csfPluginOptions = {}, mdxPluginOptions = {} } = options, enrichCsf2 = await options.presets.apply("experimental_enrichCsf"), rehypeSlug = (await import("./_node-chunks/rehype-slug-UL2737TS.js")).default, rehypeExternalLinks = (await import("./_node-chunks/rehype-external-links-KAD54GUY.js")).default, mdxLoaderOptions = await options.presets.apply("mdxLoaderOptions", {
     ...mdxPluginOptions,
     mdxCompileOptions: {
       providerImportSource: fileURLToPath3(
@@ -885,7 +885,7 @@ var docs = (input = {}, options) => {
 }, addons = [
   import.meta.resolve("@storybook/react-dom-shim/preset")
 ], viteFinal = async (config, options) => {
-  let { plugins = [] } = config, { csfPluginOptions = {} } = options, { mdxPlugin } = await import("./_node-chunks/mdx-plugin-3DFPEYTF.js"), enrichCsf2 = await options.presets.apply("experimental_enrichCsf"), { react, reactDom, mdx } = await getResolvedReact(options), packageDeduplicationPlugin = {
+  let { plugins = [] } = config, { csfPluginOptions = {} } = options, { mdxPlugin } = await import("./_node-chunks/mdx-plugin-KTB3ISIL.js"), enrichCsf2 = await options.presets.apply("experimental_enrichCsf"), { react, reactDom, mdx } = await getResolvedReact(options), packageDeduplicationPlugin = {
     name: "storybook:package-deduplication",
     enforce: "pre",
     config: () => ({
@@ -915,12 +915,9 @@ var docs = (input = {}, options) => {
   mdx: existing?.mdx ?? fileURLToPath3(import.meta.resolve("@mdx-js/react"))
 }), services = async (_value, options) => {
   let features = await options.presets.apply("features");
-  if (features?.experimentalDocgenServer && features?.componentsManifest && !options.ignorePreview) {
-    let generator = await options.presets.apply("storyIndexGenerator");
-    registerMdxService({
-      getIndex: () => generator.getIndex()
-    });
-  }
+  features?.experimentalDocgenServer && features?.componentsManifest && !options.ignorePreview && registerMdxService({
+    getIndex: () => options.presets.apply("storyIndexGenerator").then((generator) => generator.getIndex())
+  });
 }, optimizeViteDeps = [
   "@storybook/addon-docs",
   "@storybook/addon-docs/blocks",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "10.6.0-alpha.6",
+  "version": "10.6.0-alpha.8",
   "description": "Storybook Docs: Document UI components automatically with stories and MDX",
   "keywords": [
     "docs",
@@ -88,7 +88,7 @@
   "dependencies": {
     "@mdx-js/react": "^3.0.0",
     "@storybook/icons": "^2.0.2",
-    "@storybook/react-dom-shim": "10.6.0-alpha.6",
+    "@storybook/react-dom-shim": "10.6.0-alpha.8",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "ts-dedent": "^2.0.0",
@@ -117,7 +117,7 @@
   },
   "peerDependencies": {
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "storybook": "^10.6.0-alpha.6"
+    "storybook": "^10.6.0-alpha.8"
   },
   "peerDependenciesMeta": {
     "@types/react": {