storybook 10.1.0-beta.2 → 10.1.0-beta.4

package/dist/manager/runtime.js

@@ -293,9 +293,9 @@ var require_memoizerific = __commonJS({
         module3.exports = function(limit) {
           var cache = new MapOrSimilar(!1), lru = [];
           return function(fn) {
-            var memoizerific2 = function() {
+            var memoizerific3 = function() {
               var currentCache = cache, newMap, fnResult, argsLengthMinusOne = arguments.length - 1, lruPath = Array(argsLengthMinusOne + 1), isMemoized = !0, i2;
-              if ((memoizerific2.numArgs || memoizerific2.numArgs === 0) && memoizerific2.numArgs !== argsLengthMinusOne + 1)
+              if ((memoizerific3.numArgs || memoizerific3.numArgs === 0) && memoizerific3.numArgs !== argsLengthMinusOne + 1)
                 throw new Error("Memoizerific functions should always be called with the same number of arguments");
               for (i2 = 0; i2 < argsLengthMinusOne; i2++) {
                 if (lruPath[i2] = {
@@ -310,9 +310,9 @@ var require_memoizerific = __commonJS({
               return isMemoized && (currentCache.has(arguments[argsLengthMinusOne]) ? fnResult = currentCache.get(arguments[argsLengthMinusOne]) : isMemoized = !1), isMemoized || (fnResult = fn.apply(null, arguments), currentCache.set(arguments[argsLengthMinusOne], fnResult)), limit > 0 && (lruPath[argsLengthMinusOne] = {
                 cacheItem: currentCache,
                 arg: arguments[argsLengthMinusOne]
-              }, isMemoized ? moveToMostRecentLru(lru, lruPath) : lru.push(lruPath), lru.length > limit && removeCachedResult(lru.shift())), memoizerific2.wasMemoized = isMemoized, memoizerific2.numArgs = argsLengthMinusOne + 1, fnResult;
+              }, isMemoized ? moveToMostRecentLru(lru, lruPath) : lru.push(lruPath), lru.length > limit && removeCachedResult(lru.shift())), memoizerific3.wasMemoized = isMemoized, memoizerific3.numArgs = argsLengthMinusOne + 1, fnResult;
             };
-            return memoizerific2.limit = limit, memoizerific2.wasMemoized = !1, memoizerific2.cache = cache, memoizerific2.lru = lru, memoizerific2;
+            return memoizerific3.limit = limit, memoizerific3.wasMemoized = !1, memoizerific3.cache = cache, memoizerific3.lru = lru, memoizerific3;
           };
         };
         function moveToMostRecentLru(lru, lruPath) {
@@ -2259,7 +2259,7 @@ var icons_default = __STORYBOOK_ICONS__, { AccessibilityAltIcon, AccessibilityIc
 var manager_api_default = __STORYBOOK_API__, { ActiveTabs, Consumer, ManagerContext, Provider, RequestResponseError, addons, combineParameters, controlOrMetaKey, controlOrMetaSymbol, eventMatchesShortcut, eventToShortcut, experimental_MockUniversalStore, experimental_UniversalStore, experimental_getStatusStore, experimental_getTestProviderStore, experimental_requestResponse, experimental_useStatusStore, experimental_useTestProviderStore, experimental_useUniversalStore, internal_checklistStore, internal_fullStatusStore, internal_fullTestProviderStore, internal_universalChecklistStore, internal_universalStatusStore, internal_universalTestProviderStore, isMacLike, isShortcutTaken, keyToSymbol, merge, mockChannel, optionOrAltSymbol, shortcutMatchesShortcut, shortcutToAriaKeyshortcuts, shortcutToHumanString, types, useAddonState, useArgTypes, useArgs, useChannel, useGlobalTypes, useGlobals, useParameter, useSharedState, useStoryPrepared, useStorybookApi, useStorybookState } = __STORYBOOK_API__;
 
 // global-externals:storybook/theming
-var theming_default = __STORYBOOK_THEMING__, { CacheProvider, ClassNames, Global, ThemeProvider, background, color, convert, create, createCache, createGlobal, createReset, css, darken, ensure, getPreferredColorScheme, ignoreSsrWarning, isPropValid, jsx, keyframes, lighten, styled, themes, typography, useTheme, withTheme } = __STORYBOOK_THEMING__;
+var theming_default = __STORYBOOK_THEMING__, { CacheProvider, ClassNames, Global, ThemeProvider, background, color, convert, create, createCache, createGlobal, createReset, css, darken, ensure, getPreferredColorScheme, ignoreSsrWarning, isPropValid, jsx, keyframes, lighten, styled, themes, tokens, typography, useTheme, withTheme } = __STORYBOOK_THEMING__;
 
 // global-externals:storybook/internal/components
 var components_default = __STORYBOOK_COMPONENTS__, { A, AbstractToolbar, ActionBar, AddonPanel, Badge, Bar, Blockquote, Button, Card, ClipboardCode, Code, Collapsible, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link, ListItem, Listbox, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, PopoverProvider, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, StatelessTabPanel, StatelessTabsView, StorybookIcon: StorybookIcon2, StorybookLogo, SyntaxHighlighter, TT, TabBar, TabButton, TabList, TabPanel, TabWrapper, Table, Tabs, TabsState, TabsView, ToggleButton, Toolbar, Tooltip, TooltipLinkList, TooltipMessage, TooltipNote, TooltipProvider, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset } = __STORYBOOK_COMPONENTS__;
@@ -6537,6 +6537,19 @@ var storeOptions = {
 };
 var STORE_CHANNEL_EVENT_NAME = `UNIVERSAL_STORE:${storeOptions.id}`;
 
+// src/cli/AddonVitestService.constants.ts
+var SUPPORTED_FRAMEWORKS = [
+  "html-vite" /* HTML_VITE */,
+  "nextjs-vite" /* NEXTJS_VITE */,
+  "preact-vite" /* PREACT_VITE */,
+  "react-native-web-vite" /* REACT_NATIVE_WEB_VITE */,
+  "react-vite" /* REACT_VITE */,
+  "svelte-vite" /* SVELTE_VITE */,
+  "sveltekit" /* SVELTEKIT */,
+  "vue3-vite" /* VUE3_VITE */,
+  "web-components-vite" /* WEB_COMPONENTS_VITE */
+];
+
 // src/docs-tools/shared.ts
 var ADDON_ID5 = "storybook/docs", PANEL_ID3 = `${ADDON_ID5}/panel`;
 var SNIPPET_RENDERED = `${ADDON_ID5}/snippet-rendered`;
@@ -10652,8 +10665,13 @@ var CodeWrapper = styled.div(({ theme }) => ({
   ".linenumber": {
     opacity: 0.5
   }
-})), CodeSnippet = (props) => react_default.createElement(ThemeProvider, { theme: convert(themes.dark) }, react_default.createElement(CodeWrapper, null, react_default.createElement(SyntaxHighlighter, { ...props }))), subscribeToIndex = (condition) => ({ api, done }) => {
-  let check = () => condition(api.getIndex()?.entries || {});
+})), CodeSnippet = (props) => react_default.createElement(ThemeProvider, { theme: convert(themes.dark) }, react_default.createElement(CodeWrapper, null, react_default.createElement(SyntaxHighlighter, { ...props }))), isExample = (id) => id.startsWith("example-") || id.startsWith("configure-your-project--"), subscribeToIndex = (condition) => ({ api, done }) => {
+  let check = () => condition(
+    Object.entries(api.getIndex()?.entries || {}).reduce(
+      (acc, [id, entry]) => isExample(entry.id) ? acc : Object.assign(acc, { [id]: entry }),
+      {}
+    )
+  );
   if (check())
     done();
   else
@@ -10699,7 +10717,10 @@ var CodeWrapper = styled.div(({ theme }) => ({
           id: "renderComponent",
           label: "Render a component",
           criteria: "A story finished rendering successfully",
-          subscribe: ({ api, done }) => api.on(STORY_FINISHED, ({ status }) => status === "success" && done()),
+          subscribe: ({ api, done }) => api.on(
+            STORY_FINISHED,
+            ({ storyId, status }) => status === "success" && !isExample(storyId) && done()
+          ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook renders your components in isolation, using stories. That allows you to work on the bit of UI you need, without worrying about the rest of the app."), react_default.createElement("p", null, "Rendering your components can often require", " ", react_default.createElement(
             Link,
             {
@@ -10786,7 +10807,7 @@ export const Primary: Story = {
           criteria: "At least 5 components exist in the index",
           subscribe: subscribeToIndex((entries) => {
             let stories = Object.values(entries).filter(
-              (entry) => entry.type === "story" && !entry.id.startsWith("example-")
+              (entry) => entry.type === "story"
             );
             return new Set(stories.map(({ title: title2 }) => title2)).size >= 5;
           })
@@ -10819,7 +10840,7 @@ export const Primary: Story = {
           ))),
           criteria: "At least 20 stories exist in the index",
           subscribe: subscribeToIndex((entries) => Object.values(entries).filter(
-            (entry) => entry.type === "story" && !entry.id.startsWith("example-")
+            (entry) => entry.type === "story"
           ).length >= 20)
         },
         {
@@ -10943,8 +10964,7 @@ export default {
           id: "installVitest",
           label: "Install Vitest addon",
           afterCompletion: "unavailable",
-          available: () => !0,
-          // TODO check for compatibility with the project
+          available: () => !!globalThis.STORYBOOK_FRAMEWORK && SUPPORTED_FRAMEWORKS.includes(globalThis.STORYBOOK_FRAMEWORK),
           criteria: "@storybook/addon-vitest registered in .storybook/main.js|ts",
           subscribe: ({ done }) => {
             addons.experimental_getRegisteredAddons().includes(ADDON_ID4) && done();
@@ -11047,7 +11067,7 @@ export default {
           criteria: "At least one story with a play or test function",
           subscribe: subscribeToIndex(
             (entries) => Object.values(entries).some(
-              ({ id, tags }) => !id.startsWith("example-") && (tags?.includes("play-fn") || tags?.includes("test-fn"))
+              (entry) => entry.tags?.includes("play-fn") || entry.tags?.includes("test-fn")
             )
           ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "When you need to test non-visual or particularly complex behavior of a component, add a play function."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
@@ -11319,16 +11339,16 @@ export const Disabled: Story = {
           label: "Automatically document your components",
           criteria: "At least one component with the autodocs tag applied",
           subscribe: subscribeToIndex(
-            (entries) => Object.values(entries).some(
-              ({ id, tags }) => !id.startsWith("example-") && tags?.includes("autodocs")
-            )
+            (entries) => Object.values(entries).some((entry) => entry.tags?.includes("autodocs"))
           ),
-          content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Add the autodocs tag to a component's meta to automatically generate documentation for that component, complete with examples, source code, an API table, and a description."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
+          content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Add the autodocs tag to a component's meta to automatically generate documentation for that component, complete with examples, source code, an API table, and a description."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.js
 
-export default {
+const meta = {
   component: Button,
   tags: ['autodocs'], // \u{1F448} Add this tag
-}`), react_default.createElement("p", null, "That tag can also be applied in ", react_default.createElement("code", null, ".storybook/preview.ts"), ", to generate documentation for ", react_default.createElement("em", null, "all"), " components."), react_default.createElement(
+}
+  
+export default meta;`), react_default.createElement("p", null, "That tag can also be applied in ", react_default.createElement("code", null, ".storybook/preview.ts"), ", to generate documentation for ", react_default.createElement("em", null, "all"), " components."), react_default.createElement(
             "img",
             {
               src: api.getDocsUrl({
@@ -11356,9 +11376,7 @@ export default {
           label: "Custom content with MDX",
           criteria: "At least one MDX page",
           subscribe: subscribeToIndex(
-            (entries) => Object.values(entries).some(
-              ({ id, type }) => type === "docs" && !id.startsWith("example-")
-            )
+            (entries) => Object.values(entries).some((entry) => entry.type === "docs")
           ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "You can use MDX (markdown + React components) to provide an introduction to your project, document things like design tokens, or go beyond the automatic documentation for your components."), react_default.createElement("p", null, "For a start, create an ", react_default.createElement("code", null, "introduction.mdx"), " file and (using markdown and Storybook's", " ", react_default.createElement(
             Link,
@@ -13919,6 +13937,9 @@ var { document: document4, window: globalWindow3 } = scope, IndicatorPlacement =
   return react_default.createElement(Message, { href: "https://storybook.js.org/docs/sharing/storybook-composition?ref=ui" }, react_default.createElement(LightningIcon, { color: theme.color.gold }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Reduce lag"), react_default.createElement("div", null, "Learn how to speed up Composition performance.")));
 };
 
+// src/manager/utils/status.tsx
+var import_memoizerific3 = __toESM(require_memoizerific(), 1);
+
 // src/manager/components/sidebar/IconSymbols.tsx
 var Svg2 = styled.svg`
   position: absolute;
@@ -14015,7 +14036,7 @@ var SmallIcons = styled(CircleIcon)({
   "status-value:success",
   "status-value:warning",
   "status-value:error"
-], statusMapping = {
+], getStatus = (0, import_memoizerific3.default)(5)((theme, status) => ({
   "status-value:unknown": [null, null],
   "status-value:pending": [react_default.createElement(LoadingIcons, { key: "icon" }), "currentColor"],
   "status-value:success": [
@@ -14024,13 +14045,13 @@ var SmallIcons = styled(CircleIcon)({
   ],
   "status-value:warning": [
     react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "warning" })),
-    "#A15C20"
+    theme.fgColor.warning
   ],
   "status-value:error": [
     react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "error" })),
-    "#D43900"
+    theme.fgColor.negative
   ]
-}, getMostCriticalStatusValue = (statusValues) => statusPriority.reduce(
+})[status]), getMostCriticalStatusValue = (statusValues) => statusPriority.reduce(
   (acc, value) => statusValues.includes(value) ? value : acc,
   "status-value:unknown"
 );
@@ -14101,6 +14122,9 @@ var withStatusColor = ({ theme, status }) => {
 ), StatusButton = forwardRef((props, ref) => react_default.createElement(StyledButton, { variant: "ghost", padding: "small", ...props, ref }));
 StatusButton.displayName = "StatusButton";
 
+// src/manager/components/sidebar/StatusContext.tsx
+var StatusContext = createContext({});
+
 // src/manager/components/sidebar/ContextMenu.tsx
 var empty = {
   onMouseEnter: () => {
@@ -14116,7 +14140,7 @@ var empty = {
     outlineOffset: -2
   }
 }), useContextMenu = (context, links, api) => {
-  let [hoverCount, setHoverCount] = useState(0), [isOpen, setIsOpen] = useState(!1), [copyText, setCopyText] = react_default.useState("Copy story name"), shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, topLinks = useMemo(() => {
+  let [hoverCount, setHoverCount] = useState(0), [isOpen, setIsOpen] = useState(!1), [copyText, setCopyText] = react_default.useState("Copy story name"), { allStatuses, groupStatus } = useContext(StatusContext), shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, topLinks = useMemo(() => {
     let defaultLinks = [];
     return context && "importPath" in context && defaultLinks.push({
       id: "open-in-editor",
@@ -14143,7 +14167,7 @@ var empty = {
         }, 2e3);
       }
     }), defaultLinks;
-  }, [context, copyText, enableShortcuts, shortcutKeys]), handlers = useMemo(() => ({
+  }, [api, context, copyText, enableShortcuts, shortcutKeys]), handlers = useMemo(() => ({
     onMouseEnter: () => {
       setHoverCount((c2) => c2 + 1);
     },
@@ -14156,7 +14180,20 @@ var empty = {
   }), []), providerLinks = useMemo(() => {
     let registeredTestProviders = api.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER);
     return hoverCount ? generateTestProviderLinks(registeredTestProviders, context) : [];
-  }, [api, context, hoverCount]), shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0);
+  }, [api, context, hoverCount]), shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0), isLeafNode = context.type === "story" || context.type === "docs", itemStatus = useMemo(() => {
+    let status = "status-value:unknown";
+    if (!context)
+      return status;
+    if (isLeafNode) {
+      let values = Object.values(allStatuses?.[context.id] || {}).map((s2) => s2.value);
+      status = getMostCriticalStatusValue(values);
+    }
+    if (!isLeafNode) {
+      let groupValue = groupStatus && groupStatus[context.id];
+      status = groupValue === "status-value:success" || groupValue === void 0 ? "status-value:unknown" : groupValue;
+    }
+    return status;
+  }, [allStatuses, groupStatus, context, isLeafNode]), MenuIcon2 = useMemo(() => context.type !== "story" && context.type !== "docs" ? itemStatus !== "status-value:success" && itemStatus !== "status-value:unknown" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6" }, react_default.createElement(UseSymbol, { type: "dot" })) : react_default.createElement(EllipsisIcon, null) : itemStatus === "status-value:error" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "error" })) : itemStatus === "status-value:warning" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "warning" })) : itemStatus === "status-value:success" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "success" })) : react_default.createElement(EllipsisIcon, null), [itemStatus, context.type]);
   return useMemo(() => globalThis.CONFIG_TYPE !== "DEVELOPMENT" ? empty : {
     onMouseEnter: handlers.onMouseEnter,
     node: shouldRender ? react_default.createElement(
@@ -14177,13 +14214,13 @@ var empty = {
           "data-testid": "context-menu",
           ariaLabel: "Open context menu",
           type: "button",
-          status: "status-value:pending",
+          status: itemStatus,
           onClick: handlers.onOpen
         },
-        react_default.createElement(EllipsisIcon, null)
+        MenuIcon2
       )
     ) : null
-  }, [context, handlers, isOpen, shouldRender, links, topLinks]);
+  }, [context, handlers, isOpen, shouldRender, links, topLinks, itemStatus, MenuIcon2]);
 }, LiveContextMenu = ({
   context,
   links,
@@ -14206,33 +14243,6 @@ function generateTestProviderLinks(registeredTestProviders, context) {
   }).filter(Boolean);
 }
 
-// src/manager/components/sidebar/StatusContext.tsx
-var StatusContext = createContext({}), useStatusSummary = (item) => {
-  let { data, allStatuses, groupStatus } = useContext(StatusContext), summary = {
-    counts: {
-      "status-value:pending": 0,
-      "status-value:success": 0,
-      "status-value:error": 0,
-      "status-value:warning": 0,
-      "status-value:unknown": 0
-    },
-    statusesByValue: {
-      "status-value:pending": {},
-      "status-value:success": {},
-      "status-value:error": {},
-      "status-value:warning": {},
-      "status-value:unknown": {}
-    }
-  };
-  if (data && allStatuses && groupStatus && ["status-value:pending", "status-value:warning", "status-value:error"].includes(
-    groupStatus[item.id]
-  ))
-    for (let storyId of getDescendantIds(data, item.id, !1))
-      for (let status of Object.values(allStatuses[storyId] ?? {}))
-        summary.counts[status.value]++, summary.statusesByValue[status.value][storyId] ??= [], summary.statusesByValue[status.value][storyId].push(status);
-  return summary;
-};
-
 // src/manager/components/sidebar/components/CollapseIcon.tsx
 var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
   width: 8,
@@ -14575,48 +14585,66 @@ var statusOrder = [
     setExpanded,
     onSelectStoryId,
     api
-  } = props, { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout(), { counts, statusesByValue } = useStatusSummary(item);
+  } = props, theme = useTheme(), { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout();
   if (!isDisplayed)
     return null;
-  let statusLinks = useMemo(() => {
-    if (item.type === "story" || item.type === "docs")
-      return Object.entries(statuses).filter(([, status]) => status.sidebarContextMenu !== !1).sort((a2, b2) => statusOrder.indexOf(a2[1].value) - statusOrder.indexOf(b2[1].value)).map(([typeId, status]) => ({
-        id: typeId,
-        title: status.title,
-        description: status.description,
-        "aria-label": `Test status for ${status.title}: ${status.value}`,
-        icon: StatusIconMap[status.value],
-        onClick: () => {
-          onSelectStoryId(item.id), internal_fullStatusStore.selectStatuses([status]);
-        }
-      }));
-    if (item.type === "component" || item.type === "group") {
-      let links = [], errorCount = counts["status-value:error"], warningCount = counts["status-value:warning"];
-      return errorCount && links.push({
-        id: "errors",
-        icon: StatusIconMap["status-value:error"],
-        title: `${errorCount} ${errorCount === 1 ? "story" : "stories"} with errors`,
-        onClick: () => {
-          let [firstStoryId] = Object.entries(statusesByValue["status-value:error"])[0];
-          onSelectStoryId(firstStoryId);
-          let errorStatuses = Object.values(statusesByValue["status-value:error"]).flat();
-          internal_fullStatusStore.selectStatuses(errorStatuses);
-        }
-      }), warningCount && links.push({
-        id: "warnings",
-        icon: StatusIconMap["status-value:warning"],
-        title: `${warningCount} ${warningCount === 1 ? "story" : "stories"} with warnings`,
-        onClick: () => {
-          let [firstStoryId] = Object.entries(statusesByValue["status-value:warning"])[0];
-          onSelectStoryId(firstStoryId);
-          let warningStatuses = Object.values(statusesByValue["status-value:warning"]).flat();
-          internal_fullStatusStore.selectStatuses(warningStatuses);
-        }
-      }), links;
+  let statusLinks = useMemo(() => item.type === "story" || item.type === "docs" ? Object.entries(statuses).filter(([, status]) => status.sidebarContextMenu !== !1).sort((a2, b2) => statusOrder.indexOf(a2[1].value) - statusOrder.indexOf(b2[1].value)).map(([typeId, status]) => ({
+    id: typeId,
+    title: status.title,
+    description: status.description,
+    "aria-label": `Test status for ${status.title}: ${status.value}`,
+    icon: StatusIconMap[status.value],
+    onClick: () => {
+      onSelectStoryId(item.id), internal_fullStatusStore.selectStatuses([status]);
     }
-    return [];
-  }, [counts, item.id, item.type, onSelectStoryId, statuses, statusesByValue]), id = createId(item.id, refId), contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: () => {
+  })) : [], [item.id, item.type, onSelectStoryId, statuses]), id = createId(item.id, refId), contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: () => {
   } };
+  if (item.type === "story" && !("children" in item && item.children) && (!("subtype" in item) || item.subtype !== "test") || item.type === "docs") {
+    let LeafNode3 = item.type === "docs" ? DocumentNode : StoryNode, statusValue = getMostCriticalStatusValue(
+      Object.values(statuses || {}).map((s2) => s2.value)
+    ), [icon, textColor] = getStatus(theme, statusValue);
+    return react_default.createElement(
+      LeafNodeStyleWrapper,
+      {
+        key: id,
+        className: "sidebar-item",
+        "data-selected": isSelected,
+        "data-ref-id": refId,
+        "data-item-id": item.id,
+        "data-parent-id": item.parent,
+        "data-nodetype": item.type === "docs" ? "document" : "story",
+        "data-highlightable": isDisplayed,
+        onMouseEnter: contextMenu.onMouseEnter
+      },
+      react_default.createElement(
+        LeafNode3,
+        {
+          style: isSelected ? {} : { color: textColor },
+          href: getLink(item, refId),
+          id,
+          depth: isOrphan ? item.depth : item.depth - 1,
+          onClick: (event) => {
+            event.preventDefault(), onSelectStoryId(item.id), isMobile2 && setMobileMenuOpen(!1);
+          },
+          ...item.type === "docs" && { docsMode }
+        },
+        item.renderLabel?.(item, api) || item.name
+      ),
+      isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
+      contextMenu.node,
+      icon ? react_default.createElement(
+        StatusButton,
+        {
+          ariaLabel: `Test status: ${statusValue.replace("status-value:", "")}`,
+          "data-testid": "tree-status-button",
+          type: "button",
+          status: statusValue,
+          selectedItem: isSelected
+        },
+        icon
+      ) : null
+    );
+  }
   if (item.type === "root")
     return react_default.createElement(
       RootNode,
@@ -14658,7 +14686,7 @@ var statusOrder = [
         isFullyExpanded ? react_default.createElement(CollapseIcon, null) : react_default.createElement(ExpandAltIcon, null)
       )
     );
-  let itemStatus = getMostCriticalStatusValue(Object.values(statuses || {}).map((s2) => s2.value)), [itemIcon, itemColor] = statusMapping[itemStatus], itemStatusButton = itemIcon ? react_default.createElement(
+  let itemStatus = getMostCriticalStatusValue(Object.values(statuses || {}).map((s2) => s2.value)), [itemIcon, itemColor] = getStatus(theme, itemStatus), itemStatusButton = itemIcon ? react_default.createElement(
     StatusButton,
     {
       ariaLabel: `Test status: ${itemStatus.replace("status-value:", "")}`,
@@ -14671,7 +14699,7 @@ var statusOrder = [
     itemIcon
   ) : null;
   if (item.type === "component" || item.type === "group" || item.type === "story" && "children" in item && item.children) {
-    let { children = [] } = item, BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryNode }[item.type], status = getMostCriticalStatusValue([itemStatus, groupStatus?.[item.id]]), color2 = status ? statusMapping[status][1] : null, showBranchStatus = status === "status-value:error" || status === "status-value:warning";
+    let { children = [] } = item, BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryNode }[item.type], status = getMostCriticalStatusValue([itemStatus, groupStatus?.[item.id]]), color2 = status ? getStatus(theme, status)[1] : null, showBranchStatus = status === "status-value:error" || status === "status-value:warning";
     return react_default.createElement(
       LeafNodeStyleWrapper,
       {
@@ -14745,8 +14773,7 @@ var statusOrder = [
         depth: isOrphan ? item.depth : item.depth - 1,
         onClick: (event) => {
           event.preventDefault(), onSelectStoryId(item.id), isMobile2 && setMobileMenuOpen(!1);
-        },
-        ...item.type === "docs" && { docsMode }
+        }
       },
       item.renderLabel?.(item, api) || item.name
     ),
@@ -17581,13 +17608,13 @@ var { document: document7 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
         openMenu,
         closeMenu,
         inputValue,
-        clearSelection,
         getInputProps,
         getItemProps,
         getLabelProps,
         getMenuProps,
         getRootProps,
-        highlightedIndex
+        highlightedIndex,
+        reset
       }) => {
         let input = inputValue ? inputValue.trim() : "", results = input ? getResults(input) : [], lastViewed = !input && getLastViewed();
         lastViewed && lastViewed.length && (results = lastViewed.reduce((acc, { storyId, refId }) => {
@@ -17630,7 +17657,9 @@ var { document: document7 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
               padding: "small",
               variant: "ghost",
               ariaLabel: "Clear search",
-              onClick: () => clearSelection()
+              onClick: () => {
+                reset({ inputValue: "" }), closeMenu();
+              }
             },
             react_default.createElement(CloseIcon, null)
           ), searchFieldContent)
@@ -17745,7 +17774,7 @@ var { document: document8 } = scope, ResultsList = styled.ol({
     }
   }
 })), Result = react_default.memo(function({ item, matches, onClick, ...props }) {
-  let click = useCallback(
+  let theme = useTheme(), click = useCallback(
     (event) => {
       event.preventDefault(), onClick?.(event);
     },
@@ -17753,8 +17782,8 @@ var { document: document8 } = scope, ResultsList = styled.ol({
   ), api = useStorybookApi();
   useEffect(() => {
     api && props.isHighlighted && item.type === "component" && api.emit(PRELOAD_ENTRIES, { ids: [item.children[0]] }, { options: { target: item.refId } });
-  }, [props.isHighlighted, item]);
-  let nameMatch = matches.find((match) => match.key === "name"), pathMatches = matches.filter((match) => match.key === "path"), [icon] = item.status ? statusMapping[item.status] : [];
+  }, [api, props.isHighlighted, item]);
+  let nameMatch = matches.find((match) => match.key === "name"), pathMatches = matches.filter((match) => match.key === "path"), [icon] = item.status ? getStatus(theme, item.status) : [];
   return react_default.createElement(ResultRow, { ...props, onClick: click }, react_default.createElement(IconWrapper2, null, item.type === "component" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "component" }, react_default.createElement(UseSymbol, { type: "component" })), item.type === "story" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: item.subtype }, react_default.createElement(UseSymbol, { type: item.subtype })), !(item.type === "component" || item.type === "story") && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), react_default.createElement(ResultRowContent, { className: "search-result-item--label" }, react_default.createElement(Title, null, react_default.createElement(Highlight, { match: nameMatch }, item.name)), react_default.createElement(Path, null, item.path.map((group, index) => react_default.createElement("span", { key: index }, react_default.createElement(Highlight, { match: pathMatches.find((match) => match.arrayIndex === index) }, group))))), item.status ? react_default.createElement(StatusLabel, { status: item.status }, icon) : null);
 }), SearchResults = react_default.memo(function({
   query,
@@ -19069,14 +19098,9 @@ var Sections = styled.ol(({ theme }) => ({
       return { id, title: title2, items, progress };
     }),
     [itemsById, sectionsById]
-  ), next = useMemo(
-    () => Object.values(sections).findIndex(
-      ({ items }) => items.some((item) => item.isOpen && item.isAvailable)
-    ),
-    [sections]
   );
-  return react_default.createElement(Sections, null, sections.map(({ id, title: title2, items, progress }, index) => {
-    let collapsed = !items.some((item) => item.id === locationHash) && (progress === 0 || progress === 100) && next !== index;
+  return react_default.createElement(Sections, null, sections.map(({ id, title: title2, items, progress }) => {
+    let collapsed = progress === 100 && items.every((item) => item.id !== locationHash);
     return react_default.createElement("li", { key: id }, react_default.createElement(Focus.Proxy, { targetId: `toggle-${id}` }, react_default.createElement(
       Collapsible,
       {
@@ -19114,7 +19138,7 @@ var Sections = styled.ol(({ theme }) => ({
           isSkipped,
           ...item
         }) => {
-          let isChecked = isAccepted || isDone, isCollapsed = isChecked && item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
+          let isChecked = isAccepted || isDone, isCollapsed = item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
           return react_default.createElement(Listbox.Item, { as: "li", key: item.id }, react_default.createElement(
             Focus.Target,
             {

package/dist/manager-api/index.js

@@ -2329,7 +2329,7 @@ import { global as global8 } from "@storybook/global";
 import semver from "semver";
 
 // src/manager-api/version.ts
-var version = "10.1.0-beta.2";
+var version = "10.1.0-beta.4";
 
 // src/manager-api/modules/versions.ts
 var { VERSIONCHECK } = global8, getVersionCheckData = (0, import_memoizerific2.default)(1)(() => {

package/dist/mocking-utils/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_hgecnnw0nrt from 'node:url';
-import CJS_COMPAT_NODE_PATH_hgecnnw0nrt from 'node:path';
-import CJS_COMPAT_NODE_MODULE_hgecnnw0nrt from "node:module";
+import CJS_COMPAT_NODE_URL_a6gceaz3qeh from 'node:url';
+import CJS_COMPAT_NODE_PATH_a6gceaz3qeh from 'node:path';
+import CJS_COMPAT_NODE_MODULE_a6gceaz3qeh from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_hgecnnw0nrt.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_hgecnnw0nrt.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_hgecnnw0nrt.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_a6gceaz3qeh.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_a6gceaz3qeh.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_a6gceaz3qeh.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -16,8 +16,8 @@ import {
   join,
   normalize,
   resolve
-} from "../_node-chunks/chunk-PQF6TGKN.js";
-import "../_node-chunks/chunk-3FVKDIQ7.js";
+} from "../_node-chunks/chunk-TBYOSPAV.js";
+import "../_node-chunks/chunk-VW25O2YM.js";
 
 // ../node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.mjs
 var comma = 44, semicolon = 59, chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", intToChar = new Uint8Array(64), charToInt = new Uint8Array(128);

package/dist/node-logger/index.d.ts

@@ -8,6 +8,7 @@ interface CommonOptions {
     input?: Readable;
     output?: Writable;
     signal?: AbortSignal;
+    withGuide?: boolean;
 }
 
 type BoxAlignment = 'left' | 'center' | 'right';
@@ -18,7 +19,6 @@ interface BoxOptions extends CommonOptions {
     titlePadding?: number;
     contentPadding?: number;
     rounded?: boolean;
-    includePrefix?: boolean;
     formatBorder?: (text: string) => string;
 }
 
@@ -160,6 +160,8 @@ interface PromptOptions {
 interface SpinnerInstance {
     start: (message?: string) => void;
     stop: (message?: string) => void;
+    cancel: (message?: string) => void;
+    error: (message?: string) => void;
     message: (text: string) => void;
 }
 interface TaskLogInstance {

package/dist/node-logger/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_hgecnnw0nrt from 'node:url';
-import CJS_COMPAT_NODE_PATH_hgecnnw0nrt from 'node:path';
-import CJS_COMPAT_NODE_MODULE_hgecnnw0nrt from "node:module";
+import CJS_COMPAT_NODE_URL_a6gceaz3qeh from 'node:url';
+import CJS_COMPAT_NODE_PATH_a6gceaz3qeh from 'node:path';
+import CJS_COMPAT_NODE_MODULE_a6gceaz3qeh from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_hgecnnw0nrt.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_hgecnnw0nrt.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_hgecnnw0nrt.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_a6gceaz3qeh.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_a6gceaz3qeh.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_a6gceaz3qeh.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -22,9 +22,9 @@ import {
   once,
   prompt,
   protectUrls
-} from "../_node-chunks/chunk-4CHMPSHM.js";
-import "../_node-chunks/chunk-43AQPYQJ.js";
-import "../_node-chunks/chunk-3FVKDIQ7.js";
+} from "../_node-chunks/chunk-WGBDDI6W.js";
+import "../_node-chunks/chunk-TCLOOFNE.js";
+import "../_node-chunks/chunk-VW25O2YM.js";
 var export_instance = import_npmlog.default;
 export {
   CLI_COLORS,