storybook 10.0.0-beta.6 → 10.0.0-beta.7

package/dist/manager/runtime.js

@@ -6696,6 +6696,7 @@ var useLayoutSyncingState = /* @__PURE__ */ __name(({
   });
   const { navSize, rightPanelWidth, bottomPanelHeight } = internalDraggingSizeState.isDragging ? internalDraggingSizeState : managerLayoutState;
   const customisedNavSize = api.getNavSizeWithCustomisations?.(navSize) ?? navSize;
+  const customisedShowPanel = api.getShowPanelWithCustomisations?.(isPanelShown) ?? isPanelShown;
   return {
     navSize: customisedNavSize,
     rightPanelWidth,
@@ -6704,7 +6705,7 @@ var useLayoutSyncingState = /* @__PURE__ */ __name(({
     panelResizerRef,
     sidebarResizerRef,
     showPages: isPagesShown,
-    showPanel: isPanelShown,
+    showPanel: customisedShowPanel,
     isDragging: internalDraggingSizeState.isDragging
   };
 }, "useLayoutSyncingState");
@@ -6774,7 +6775,7 @@ var LayoutContainer = styled.div(
         gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`,
         gridTemplateRows: `1fr minmax(0, ${bottomPanelHeight}px)`,
         gridTemplateAreas: (() => {
-          if (viewMode === "docs" || !showPanel) {
+          if (!showPanel) {
             return `"sidebar content content"
                   "sidebar content content"`;
           }
@@ -11220,7 +11221,7 @@ var HighlightStyles = /* @__PURE__ */ __name(({ refId, itemId }) => react_defaul
             background: background2,
             "&:hover, &:focus": { background: background2 }
           },
-          [`&[data-nodetype="story"], &[data-nodetype="document"]`]: {
+          [`&[data-nodetype="story"], &[data-nodetype="document"], &[data-nodetype="test"]`]: {
             color: color2.defaultText,
             background: background2,
             "&:hover, &:focus": { background: background2 }
@@ -11252,7 +11253,7 @@ var getAncestorIds = (0, import_memoizerific2.default)(1e3)(
 );
 var getDescendantIds = (0, import_memoizerific2.default)(1e3)((data, id, skipLeafs) => {
   const entry = data[id];
-  if (!entry || entry.type === "story" || entry.type === "docs" || !entry.children) {
+  if (!entry || !("children" in entry) || !entry.children) {
     return [];
   }
   return entry.children.reduce((acc, childId) => {
@@ -11649,6 +11650,7 @@ var GROUP_ID = "icon--group";
 var COMPONENT_ID = "icon--component";
 var DOCUMENT_ID = "icon--document";
 var STORY_ID = "icon--story";
+var TEST_ID = "icon--test";
 var SUCCESS_ID = "icon--success";
 var ERROR_ID = "icon--error";
 var WARNING_ID = "icon--warning";
@@ -11692,6 +11694,14 @@ var IconSymbols = /* @__PURE__ */ __name(() => {
       d: "M3.5 0h7a.5.5 0 01.5.5v13a.5.5 0 01-.454.498.462.462 0 01-.371-.118L7 11.159l-3.175 2.72a.46.46 0 01-.379.118A.5.5 0 013 13.5V.5a.5.5 0 01.5-.5zM4 12.413l2.664-2.284a.454.454 0 01.377-.128.498.498 0 01.284.12L10 12.412V1H4v11.413z",
       fill: "currentColor"
     }
+  )), react_default.createElement("symbol", { id: TEST_ID }, react_default.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.5 2h.75v3.866l-3.034 5.26A1.25 1.25 0 003.299 13H10.7a1.25 1.25 0 001.083-1.875L8.75 5.866V2h.75a.5.5 0 100-1h-5a.5.5 0 000 1zm1.75 4V2h1.5v4.134l.067.116L8.827 8H5.173l1.01-1.75.067-.116V6zM4.597 9l-1.515 2.625A.25.25 0 003.3 12H10.7a.25.25 0 00.217-.375L9.404 9H4.597z",
+      fill: "currentColor"
+    }
   )), react_default.createElement("symbol", { id: SUCCESS_ID }, react_default.createElement(
     "path",
     {
@@ -11731,6 +11741,9 @@ var UseSymbol = /* @__PURE__ */ __name(({ type }) => {
   if (type === "story") {
     return react_default.createElement("use", { xlinkHref: `#${STORY_ID}` });
   }
+  if (type === "test") {
+    return react_default.createElement("use", { xlinkHref: `#${TEST_ID}` });
+  }
   if (type === "success") {
     return react_default.createElement("use", { xlinkHref: `#${SUCCESS_ID}` });
   }
@@ -11790,7 +11803,7 @@ var getMostCriticalStatusValue = /* @__PURE__ */ __name((statusValues) => {
 }, "getMostCriticalStatusValue");
 function getGroupStatus(collapsedData, allStatuses) {
   return Object.values(collapsedData).reduce((acc, item) => {
-    if (item.type === "group" || item.type === "component") {
+    if (item.type === "group" || item.type === "component" || item.type === "story") {
       const leafs = getDescendantIds(collapsedData, item.id, false).map((id) => collapsedData[id]).filter((i2) => i2.type === "story");
       const combinedStatus = getMostCriticalStatusValue(
         // @ts-expect-error (non strict)
@@ -12033,23 +12046,22 @@ var useStatusSummary = /* @__PURE__ */ __name((item) => {
 }, "useStatusSummary");
 
 // src/manager/components/sidebar/components/CollapseIcon.tsx
-var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
+var CollapseIconWrapper = styled.div(({ isExpanded }) => ({
   width: 8,
   height: 8,
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  color: curriedTransparentize$1(0.4, theme.textMutedColor),
   transform: isExpanded ? "rotateZ(90deg)" : "none",
   transition: "transform .1s ease-out"
 }));
-var CollapseIcon2 = /* @__PURE__ */ __name(({ isExpanded }) => react_default.createElement(CollapseIconWrapper, { isExpanded }, react_default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", fill: "none" }, react_default.createElement(
+var CollapseIcon2 = /* @__PURE__ */ __name((props) => react_default.createElement(CollapseIconWrapper, { ...props }, react_default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", fill: "none" }, react_default.createElement(
   "path",
   {
-    fill: "#73828C",
+    fill: "currentColor",
     fillRule: "evenodd",
-    d: "M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z",
-    clipRule: "evenodd"
+    clipRule: "evenodd",
+    d: "M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z"
   }
 ))), "CollapseIcon");
 
@@ -12072,44 +12084,42 @@ var TypeIcon2 = styled.svg(
       if (type === "story") {
         return theme.color.seafoam;
       }
+      if (type === "test") {
+        return theme.color.green;
+      }
       return "currentColor";
     })()
   })
 );
-var BranchNode = styled.button(({ theme, depth = 0, isExpandable = false }) => ({
+var commonNodeStyles = /* @__PURE__ */ __name(({
+  theme,
+  depth = 0,
+  isExpandable = false
+}) => ({
+  flex: 1,
   width: "100%",
-  border: "none",
   cursor: "pointer",
   display: "flex",
   alignItems: "start",
   textAlign: "left",
-  paddingLeft: `${(isExpandable ? 8 : 22) + depth * 18}px`,
+  textDecoration: "none",
+  border: "none",
   color: "inherit",
   fontSize: `${theme.typography.size.s2}px`,
+  fontWeight: "inherit",
   background: "transparent",
   minHeight: 28,
   borderRadius: 4,
   gap: 6,
-  paddingTop: 5,
-  paddingBottom: 4
-}));
-var LeafNode = styled.a(({ theme, depth = 0 }) => ({
-  width: "100%",
-  cursor: "pointer",
-  color: "inherit",
-  display: "flex",
-  gap: 6,
-  flex: 1,
-  alignItems: "start",
-  paddingLeft: `${22 + depth * 18}px`,
+  paddingLeft: `${(isExpandable ? 8 : 22) + depth * 18}px`,
   paddingTop: 5,
   paddingBottom: 4,
-  fontSize: `${theme.typography.size.s2}px`,
-  textDecoration: "none",
   overflowWrap: "break-word",
   wordWrap: "break-word",
   wordBreak: "break-word"
-}));
+}), "commonNodeStyles");
+var BranchNode = styled.button(commonNodeStyles);
+var LeafNode = styled.a(commonNodeStyles);
 var RootNode = styled.div(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -12139,22 +12149,37 @@ var GroupNode = react_default.memo(/* @__PURE__ */ __name(function GroupNode2({
   return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "group" }, react_default.createElement(UseSymbol, { type: "group" }))), children2);
 }, "GroupNode"));
 var ComponentNode = react_default.memo(
-  /* @__PURE__ */ __name(function ComponentNode2({ theme, children: children2, isExpanded, isExpandable, isSelected, ...props }) {
+  /* @__PURE__ */ __name(function ComponentNode2({
+    theme,
+    children: children2,
+    isExpanded = false,
+    isExpandable = false,
+    isSelected,
+    ...props
+  }) {
     return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "component" }, react_default.createElement(UseSymbol, { type: "component" }))), children2);
   }, "ComponentNode")
 );
-var DocumentNode = react_default.memo(
-  /* @__PURE__ */ __name(function DocumentNode2({ theme, children: children2, docsMode, ...props }) {
-    return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), children2);
-  }, "DocumentNode")
-);
+var DocumentNode = react_default.memo(/* @__PURE__ */ __name(function DocumentNode2({ theme, children: children2, docsMode, ...props }) {
+  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), children2);
+}, "DocumentNode"));
 var StoryNode = react_default.memo(/* @__PURE__ */ __name(function StoryNode2({
   theme,
   children: children2,
+  isExpandable = false,
+  isExpanded = false,
+  isSelected,
   ...props
 }) {
-  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "story" }, react_default.createElement(UseSymbol, { type: "story" }))), children2);
+  return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "story" }, react_default.createElement(UseSymbol, { type: "story" }))), children2);
 }, "StoryNode"));
+var TestNode = react_default.memo(/* @__PURE__ */ __name(function TestNode2({
+  theme,
+  children: children2,
+  ...props
+}) {
+  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "test" }, react_default.createElement(UseSymbol, { type: "test" }))), children2);
+}, "TestNode"));
 
 // ../node_modules/es-toolkit/dist/function/after.mjs
 function after(n3, func) {
@@ -12520,7 +12545,7 @@ var useExpanded = /* @__PURE__ */ __name(({
         target.blur();
       }
       const type = highlightedElement.getAttribute("data-nodetype");
-      if ((isEnter || isSpace) && ["component", "story", "document"].includes(type)) {
+      if (type && (isEnter || isSpace) && ["component", "story", "document", "test"].includes(type)) {
         onSelectStoryId(highlightedItemId);
       }
       const isExpanded = highlightedElement.getAttribute("aria-expanded");
@@ -12565,7 +12590,7 @@ var Container6 = styled.div((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
 }));
-var CollapseButton = styled.button(({ theme }) => ({
+var CollapseButton = styled.button({
   all: "unset",
   display: "flex",
   padding: "0px 8px",
@@ -12579,7 +12604,7 @@ var CollapseButton = styled.button(({ theme }) => ({
     outline: "none",
     background: "var(--tree-node-background-hover)"
   }
-}));
+});
 var LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   position: "relative",
   display: "flex",
@@ -12673,22 +12698,23 @@ var statusOrder = [
   "status-value:pending",
   "status-value:unknown"
 ];
-var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
-  item,
-  statuses,
-  groupStatus,
-  refId,
-  docsMode,
-  isOrphan,
-  isDisplayed,
-  isSelected,
-  isFullyExpanded,
-  setFullyExpanded,
-  isExpanded,
-  setExpanded,
-  onSelectStoryId,
-  api
-}) {
+var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3(props) {
+  const {
+    item,
+    statuses,
+    groupStatus,
+    refId,
+    docsMode,
+    isOrphan,
+    isDisplayed,
+    isSelected,
+    isFullyExpanded,
+    setFullyExpanded,
+    isExpanded,
+    setExpanded,
+    onSelectStoryId,
+    api
+  } = props;
   const { isDesktop, isMobile, setMobileMenuOpen } = useLayout();
   const { counts, statusesByValue } = useStatusSummary(item);
   if (!isDisplayed) {
@@ -12745,58 +12771,6 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
   const id = createId(item.id, refId);
   const contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: /* @__PURE__ */ __name(() => {
   }, "onMouseEnter") };
-  if (item.type === "story" || item.type === "docs") {
-    const LeafNode2 = item.type === "docs" ? DocumentNode : StoryNode;
-    const statusValue = getMostCriticalStatusValue(
-      Object.values(statuses || {}).map((s2) => s2.value)
-    );
-    const [icon, textColor] = statusMapping[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(
-        LeafNode2,
-        {
-          style: isSelected ? {} : { color: textColor },
-          href: getLink(item, refId),
-          id,
-          depth: isOrphan ? item.depth : item.depth - 1,
-          onClick: (event) => {
-            event.preventDefault();
-            onSelectStoryId(item.id);
-            if (isMobile) {
-              setMobileMenuOpen(false);
-            }
-          },
-          ...item.type === "docs" && { docsMode }
-        },
-        item.renderLabel?.(item, api) || item.name
-      ),
-      isSelected && react_default.createElement(SkipToContentLink, { asChild: true }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
-      contextMenu.node,
-      icon ? react_default.createElement(
-        StatusButton,
-        {
-          "aria-label": `Test status: ${statusValue.replace("status-value:", "")}`,
-          role: "status",
-          type: "button",
-          status: statusValue,
-          selectedItem: isSelected
-        },
-        icon
-      ) : null
-    );
-  }
   if (item.type === "root") {
     return react_default.createElement(
       RootNode,
@@ -12838,15 +12812,31 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
       )
     );
   }
-  if (item.type === "component" || item.type === "group") {
-    const itemStatus = groupStatus?.[item.id];
-    const color2 = itemStatus ? statusMapping[itemStatus][1] : null;
-    const BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
+  const itemStatus = getMostCriticalStatusValue(Object.values(statuses || {}).map((s2) => s2.value));
+  const [itemIcon, itemColor] = statusMapping[itemStatus];
+  const itemStatusButton = itemIcon ? react_default.createElement(
+    StatusButton,
+    {
+      "aria-label": `Test status: ${itemStatus.replace("status-value:", "")}`,
+      role: "status",
+      type: "button",
+      status: itemStatus,
+      selectedItem: isSelected
+    },
+    itemIcon
+  ) : null;
+  if (item.type === "component" || item.type === "group" || item.type === "story" && "children" in item && item.children) {
+    const { children: children2 = [] } = item;
+    const BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryNode }[item.type];
+    const status = getMostCriticalStatusValue([itemStatus, groupStatus?.[item.id]]);
+    const color2 = status ? statusMapping[status][1] : null;
+    const showBranchStatus = status === "status-value:error" || status === "status-value:warning";
     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,
@@ -12858,24 +12848,32 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
         BranchNode2,
         {
           id,
-          style: color2 ? { color: color2 } : {},
-          "aria-controls": item.children && item.children.join(" "),
+          style: color2 && !isSelected ? { color: color2 } : {},
+          "aria-controls": children2.join(" "),
           "aria-expanded": isExpanded,
           depth: isOrphan ? item.depth : item.depth - 1,
-          isComponent: item.type === "component",
-          isExpandable: item.children && item.children.length > 0,
+          isExpandable: children2.length > 0,
           isExpanded,
           onClick: (event) => {
             event.preventDefault();
-            setExpanded({ ids: [item.id], value: !isExpanded });
-            if (item.type === "component" && !isExpanded && isDesktop) {
+            if (item.type === "story") {
               onSelectStoryId(item.id);
+              if (!isExpanded || isSelected) {
+                setExpanded({ ids: [item.id], value: !isExpanded });
+              }
+            } else if (item.type === "component") {
+              if (!isExpanded && isDesktop) {
+                onSelectStoryId(item.id);
+              }
+              setExpanded({ ids: [item.id], value: !isExpanded });
+            } else {
+              setExpanded({ ids: [item.id], value: !isExpanded });
             }
           },
           onMouseEnter: () => {
-            if (item.type === "component") {
+            if (item.type === "component" || item.type === "story") {
               api.emit(PRELOAD_ENTRIES, {
-                ids: [item.children[0]],
+                ids: [children2[0]],
                 options: { target: refId }
               });
             }
@@ -12883,11 +12881,49 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
         },
         item.renderLabel?.(item, api) || item.name
       ),
+      isSelected && react_default.createElement(SkipToContentLink, { asChild: true }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
       contextMenu.node,
-      ["status-value:error", "status-value:warning"].includes(itemStatus) && react_default.createElement(StatusButton, { type: "button", status: itemStatus }, react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6", type: "dot" }, react_default.createElement(UseSymbol, { type: "dot" })))
+      showBranchStatus ? react_default.createElement(StatusButton, { type: "button", status, selectedItem: isSelected }, react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6", type: "dot" }, react_default.createElement(UseSymbol, { type: "dot" }))) : itemStatusButton
     );
   }
-  return null;
+  const isTest = item.type === "story" && item.subtype === "test";
+  const LeafNode2 = isTest ? TestNode : { docs: DocumentNode, story: StoryNode }[item.type];
+  const nodeType = isTest ? "test" : { docs: "document", story: "story" }[item.type];
+  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": nodeType,
+      "data-highlightable": isDisplayed,
+      onMouseEnter: contextMenu.onMouseEnter
+    },
+    react_default.createElement(
+      LeafNode2,
+      {
+        style: itemColor && !isSelected ? { color: itemColor } : {},
+        href: getLink(item, refId),
+        id,
+        depth: isOrphan ? item.depth : item.depth - 1,
+        onClick: (event) => {
+          event.preventDefault();
+          onSelectStoryId(item.id);
+          if (isMobile) {
+            setMobileMenuOpen(false);
+          }
+        },
+        ...item.type === "docs" && { docsMode }
+      },
+      item.renderLabel?.(item, api) || item.name
+    ),
+    isSelected && react_default.createElement(SkipToContentLink, { asChild: true }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
+    contextMenu.node,
+    itemStatusButton
+  );
 }, "Node"));
 var Root = react_default.memo(/* @__PURE__ */ __name(function Root2({
   setExpanded,
@@ -12966,7 +13002,7 @@ var Tree = react_default.memo(/* @__PURE__ */ __name(function Tree2({
       if (onlyChild.type === "docs") {
         return true;
       }
-      if (onlyChild.type === "story") {
+      if (onlyChild.type === "story" && onlyChild.subtype === "story") {
         return isStoryHoistable(onlyChild.name, name);
       }
       return false;
@@ -12974,7 +13010,7 @@ var Tree = react_default.memo(/* @__PURE__ */ __name(function Tree2({
   }, [data]);
   const collapsedItems = useMemo(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
-    [singleStoryComponentIds]
+    [data, singleStoryComponentIds]
   );
   const collapsedData = useMemo(() => {
     return singleStoryComponentIds.reduce(
@@ -12996,7 +13032,7 @@ var Tree = react_default.memo(/* @__PURE__ */ __name(function Tree2({
       },
       { ...data }
     );
-  }, [data]);
+  }, [data, singleStoryComponentIds]);
   const ancestry = useMemo(() => {
     return collapsedItems.reduce(
       (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
@@ -13173,11 +13209,10 @@ var Ref = react_default.memo(/* @__PURE__ */ __name(function Ref2(props) {
   const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
   const setHighlightedItemId = useCallback(
     (itemId) => setHighlighted({ itemId, refId }),
-    [setHighlighted]
+    [setHighlighted, refId]
   );
   const onSelectStoryId = useCallback(
-    // @ts-expect-error (non strict)
-    (storyId) => api && api.selectStory(storyId, void 0, { ref: !isMain && refId }),
+    (storyId) => api?.selectStory(storyId, void 0, { ref: isMain ? void 0 : refId }),
     [api, isMain, refId]
   );
   return react_default.createElement(react_default.Fragment, null, isMain || react_default.createElement(
@@ -13293,9 +13328,8 @@ var useHighlighted = /* @__PURE__ */ __name(({
         if (highlightable[nextIndex].getAttribute("data-nodetype") === "component") {
           const { itemId, refId } = highlightedRef.current;
           const item = api.resolveStory(itemId, refId === "storybook_internal" ? void 0 : refId);
-          if (item.type === "component") {
+          if (item?.type === "component") {
             api.emit(PRELOAD_ENTRIES, {
-              // @ts-expect-error (non strict)
               ids: [item.children[0]],
               options: { target: refId }
             });
@@ -13305,7 +13339,7 @@ var useHighlighted = /* @__PURE__ */ __name(({
     }, "navigateTree");
     document6.addEventListener("keydown", navigateTree);
     return () => document6.removeEventListener("keydown", navigateTree);
-  }, [isLoading, isBrowsing, highlightedRef, highlightElement]);
+  }, [api, containerRef, isLoading, isBrowsing, highlightedRef, highlightElement]);
   return [highlighted, updateHighlighted, highlightedRef];
 }, "useHighlighted");
 
@@ -17144,7 +17178,7 @@ var Result = react_default.memo(/* @__PURE__ */ __name(function Result2({ item,
   const nameMatch = matches2.find((match) => match.key === "name");
   const pathMatches = matches2.filter((match) => match.key === "path");
   const [icon] = item.status ? statusMapping[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: "story" }, react_default.createElement(UseSymbol, { type: "story" })), !(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);
+  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);
 }, "Result"));
 var SearchResults = react_default.memo(/* @__PURE__ */ __name(function SearchResults2({
   query,
@@ -17791,19 +17825,14 @@ var SidebarBottom = /* @__PURE__ */ __name(({ isDevelopment }) => {
 }, "SidebarBottom");
 
 // src/manager/components/sidebar/TagsFilterPanel.tsx
-var BUILT_IN_TAGS = /* @__PURE__ */ new Set([
-  "dev",
-  "test",
-  "autodocs",
-  "attached-mdx",
-  "unattached-mdx",
-  "play-fn",
-  "test-fn",
-  "vitest",
-  "svelte-csf",
-  "svelte-csf-v4",
-  "svelte-csf-v5"
-]);
+var groupByType = /* @__PURE__ */ __name((filters) => filters.reduce(
+  (acc, filter2) => {
+    acc[filter2.type] = acc[filter2.type] || [];
+    acc[filter2.type].push(filter2);
+    return acc;
+  },
+  {}
+), "groupByType");
 var Wrapper3 = styled.div({
   minWidth: 240,
   maxWidth: 300
@@ -17815,79 +17844,183 @@ var Actions3 = styled.div(({ theme }) => ({
   padding: 4,
   borderBottom: `1px solid ${theme.appBorderColor}`
 }));
+var TagRow = styled.div({
+  display: "flex",
+  "& button": {
+    width: 64,
+    maxWidth: 64,
+    marginLeft: 4,
+    paddingLeft: 0,
+    paddingRight: 0,
+    fontWeight: "normal",
+    transition: "all 150ms"
+  },
+  "&:not(:hover)": {
+    "& button": {
+      marginLeft: 0,
+      maxWidth: 0,
+      opacity: 0
+    },
+    "& svg + input": {
+      display: "none"
+    }
+  }
+});
+var Label = styled.div({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var MutedText = styled.span(({ theme }) => ({
+  color: theme.textMutedColor
+}));
 var TagsFilterPanel = /* @__PURE__ */ __name(({
   api,
-  allTags,
-  selectedTags,
-  toggleTag,
-  setAllTags,
-  inverted,
-  setInverted,
-  isDevelopment
+  filtersById,
+  includedFilters,
+  excludedFilters,
+  toggleFilter,
+  setAllFilters,
+  resetFilters,
+  isDevelopment,
+  isDefaultSelection,
+  hasDefaultSelection
 }) => {
-  const [builtInEntries, userEntries] = Array.from(allTags.entries()).reduce(
-    (acc, [tag, count]) => {
-      acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]);
-      return acc;
-    },
-    [[], []]
+  const ref = useRef(null);
+  const renderLink = /* @__PURE__ */ __name(({
+    id,
+    type,
+    title,
+    icon,
+    count
+  }) => {
+    const onToggle = /* @__PURE__ */ __name((selected, excluded) => toggleFilter(id, selected, excluded), "onToggle");
+    const isIncluded = includedFilters.has(id);
+    const isExcluded = excludedFilters.has(id);
+    const isChecked = isIncluded || isExcluded;
+    const toggleTagLabel = `${isChecked ? "Remove" : "Add"} ${type} filter: ${title}`;
+    const invertButtonLabel = `${isExcluded ? "Include" : "Exclude"} ${type}: ${title}`;
+    if (count === 0 && type === "built-in") {
+      return void 0;
+    }
+    return {
+      id: `filter-${type}-${id}`,
+      content: react_default.createElement(TagRow, null, react_default.createElement(
+        WithTooltip,
+        {
+          delayShow: 1e3,
+          hasChrome: false,
+          style: { minWidth: 0, flex: 1 },
+          tooltip: react_default.createElement(TooltipNote, { note: toggleTagLabel }),
+          trigger: "hover"
+        },
+        react_default.createElement(
+          ListItem,
+          {
+            as: "label",
+            icon: react_default.createElement(react_default.Fragment, null, isExcluded ? react_default.createElement(DeleteIcon, null) : isIncluded ? null : icon, react_default.createElement(
+              Form.Checkbox,
+              {
+                checked: isChecked,
+                onChange: () => onToggle(!isChecked),
+                "data-tag": title
+              }
+            )),
+            "aria-label": toggleTagLabel,
+            title: react_default.createElement(Label, null, title, isExcluded && react_default.createElement(MutedText, null, " (excluded)")),
+            right: isExcluded ? react_default.createElement("s", null, count) : react_default.createElement("span", null, count)
+          }
+        )
+      ), react_default.createElement(
+        WithTooltip,
+        {
+          delayShow: 1e3,
+          hasChrome: false,
+          tooltip: react_default.createElement(TooltipNote, { note: invertButtonLabel }),
+          trigger: "hover"
+        },
+        react_default.createElement(
+          Button,
+          {
+            variant: "ghost",
+            size: "medium",
+            onClick: () => onToggle(true, !isExcluded),
+            "aria-label": invertButtonLabel
+          },
+          isExcluded ? "Include" : "Exclude"
+        )
+      ))
+    };
+  }, "renderLink");
+  const groups = groupByType(Object.values(filtersById));
+  const links = Object.values(groups).map(
+    (group) => group.sort((a2, b2) => a2.id.localeCompare(b2.id)).map((filter2) => renderLink(filter2)).filter(Boolean)
   );
-  const docsUrl = api.getDocsUrl({ subpath: "writing-stories/tags#filtering-by-custom-tags" });
-  const noTags = {
-    id: "no-tags",
-    title: "There are no tags. Use tags to organize and filter your Storybook.",
-    isIndented: false
-  };
-  const groups = [
-    allTags.size === 0 ? [noTags] : [],
-    userEntries.sort((a2, b2) => a2[0].localeCompare(b2[0])).map(([tag, count]) => {
-      const checked = selectedTags.includes(tag);
-      const id = `tag-${tag}`;
-      return {
-        id,
-        title: tag,
-        right: count,
-        input: react_default.createElement(Form.Checkbox, { checked, onChange: () => toggleTag(tag) })
-      };
-    }),
-    builtInEntries.sort((a2, b2) => a2[0].localeCompare(b2[0])).map(([tag, count]) => {
-      const checked = selectedTags.includes(tag);
-      const id = `tag-${tag}`;
-      return {
-        id,
-        title: tag,
-        right: count,
-        input: react_default.createElement(Form.Checkbox, { checked, onChange: () => toggleTag(tag) })
-      };
-    })
-  ];
-  if (userEntries.length === 0 && isDevelopment) {
-    groups.push([
+  if (!groups.tag?.length && isDevelopment) {
+    links.push([
       {
         id: "tags-docs",
         title: "Learn how to add tags",
         icon: react_default.createElement(DocumentIcon, null),
         right: react_default.createElement(ShareAltIcon, null),
-        href: docsUrl
+        href: api.getDocsUrl({ subpath: "writing-stories/tags#filtering-by-custom-tags" })
       }
     ]);
   }
-  return react_default.createElement(Wrapper3, null, allTags.size > 0 && react_default.createElement(Actions3, null, selectedTags.length ? react_default.createElement(IconButton, { id: "unselect-all", onClick: () => setAllTags(false) }, react_default.createElement(CloseIcon, null), "Clear filters") : react_default.createElement(IconButton, { id: "select-all", onClick: () => setAllTags(true) }, react_default.createElement(BatchAcceptIcon, null), "Select all"), react_default.createElement(
+  const filtersLabel = includedFilters.size === 0 && excludedFilters.size === 0 ? "Select all" : "Clear filters";
+  return react_default.createElement(Wrapper3, { ref }, Object.keys(filtersById).length > 0 && react_default.createElement(Actions3, null, includedFilters.size === 0 && excludedFilters.size === 0 ? react_default.createElement(
+    IconButton,
+    {
+      id: "select-all",
+      "aria-label": filtersLabel,
+      key: "select-all",
+      onClick: () => setAllFilters(true)
+    },
+    react_default.createElement(BatchAcceptIcon, null),
+    filtersLabel
+  ) : react_default.createElement(
     IconButton,
     {
-      id: "invert-selection",
-      disabled: selectedTags.length === 0,
-      onClick: () => setInverted(!inverted),
-      active: inverted
+      id: "deselect-all",
+      "aria-label": filtersLabel,
+      key: "deselect-all",
+      onClick: () => setAllFilters(false)
     },
-    inverted ? react_default.createElement(EyeCloseIcon, null) : react_default.createElement(EyeIcon, null),
-    "Invert"
-  )), react_default.createElement(TooltipLinkList, { links: groups }));
+    react_default.createElement(SweepIcon, null),
+    filtersLabel
+  ), hasDefaultSelection && react_default.createElement(
+    WithTooltip,
+    {
+      delayShow: 1e3,
+      hasChrome: false,
+      tooltip: react_default.createElement(TooltipNote, { note: "Reset to default selection" }),
+      trigger: "hover"
+    },
+    react_default.createElement(
+      IconButton,
+      {
+        id: "reset-filters",
+        key: "reset-filters",
+        onClick: resetFilters,
+        "aria-label": "Reset filters",
+        disabled: isDefaultSelection
+      },
+      react_default.createElement(UndoIcon, null)
+    )
+  )), react_default.createElement(TooltipLinkList, { links }));
 }, "TagsFilterPanel");
 
 // src/manager/components/sidebar/TagsFilter.tsx
 var TAGS_FILTER = "tags-filter";
-var BUILT_IN_TAGS_HIDE = /* @__PURE__ */ new Set(["dev", "autodocs", "test", "attached-mdx", "unattached-mdx"]);
+var BUILT_IN_TAGS = /* @__PURE__ */ new Set([
+  "dev",
+  "test",
+  "autodocs",
+  "attached-mdx",
+  "unattached-mdx",
+  "play-fn",
+  "test-fn"
+]);
 var Wrapper4 = styled.div({
   position: "relative"
 });
@@ -17908,53 +18041,119 @@ var TagSelected = styled(Badge)(({ theme }) => ({
   background: theme.color.secondary,
   color: theme.color.lightest
 }));
-var TagsFilter = /* @__PURE__ */ __name(({
-  api,
-  indexJson,
-  initialSelectedTags = [],
-  isDevelopment
-}) => {
-  const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
+var TagsFilter = /* @__PURE__ */ __name(({ api, indexJson, isDevelopment, tagPresets }) => {
+  const filtersById = useMemo(() => {
+    const userTagsCounts = Object.values(indexJson.entries).reduce((acc, entry) => {
+      entry.tags?.forEach((tag) => {
+        if (!BUILT_IN_TAGS.has(tag)) {
+          acc.set(tag, (acc.get(tag) || 0) + 1);
+        }
+      });
+      return acc;
+    }, /* @__PURE__ */ new Map());
+    const userFilters = Object.fromEntries(
+      userTagsCounts.entries().map(([tag, count]) => {
+        const filterFn = /* @__PURE__ */ __name((entry, excluded) => excluded ? !entry.tags?.includes(tag) : !!entry.tags?.includes(tag), "filterFn");
+        return [tag, { id: tag, type: "tag", title: tag, count, filterFn }];
+      })
+    );
+    const withCount = /* @__PURE__ */ __name((filterFn) => ({
+      count: Object.values(indexJson.entries).filter((entry) => filterFn(entry)).length,
+      filterFn
+    }), "withCount");
+    const builtInFilters = {
+      _docs: {
+        id: "_docs",
+        type: "built-in",
+        title: "Documentation",
+        icon: react_default.createElement(DocumentIcon, { color: color.gold }),
+        ...withCount(
+          (entry, excluded) => excluded ? entry.type !== "docs" : entry.type === "docs"
+        )
+      },
+      _play: {
+        id: "_play",
+        type: "built-in",
+        title: "Play",
+        icon: react_default.createElement(PlayHollowIcon, { color: color.seafoam }),
+        ...withCount(
+          (entry, excluded) => excluded ? entry.type !== "story" || !entry.tags?.includes("play-fn") : entry.type === "story" && !!entry.tags?.includes("play-fn")
+        )
+      },
+      _test: {
+        id: "_test",
+        type: "built-in",
+        title: "Testing",
+        icon: react_default.createElement(BeakerIcon, { color: color.green }),
+        ...withCount(
+          (entry, excluded) => excluded ? entry.type !== "story" || entry.subtype !== "test" : entry.type === "story" && entry.subtype === "test"
+        )
+      }
+    };
+    return { ...userFilters, ...builtInFilters };
+  }, [indexJson.entries]);
+  const { defaultIncluded, defaultExcluded } = useMemo(() => {
+    return Object.entries(tagPresets).reduce(
+      (acc, [tag, { defaultFilterSelection }]) => {
+        if (defaultFilterSelection === "include") {
+          acc.defaultIncluded.add(tag);
+        } else if (defaultFilterSelection === "exclude") {
+          acc.defaultExcluded.add(tag);
+        }
+        return acc;
+      },
+      { defaultIncluded: /* @__PURE__ */ new Set(), defaultExcluded: /* @__PURE__ */ new Set() }
+    );
+  }, [tagPresets]);
+  const [includedFilters, setIncludedFilters] = useState(new Set(defaultIncluded));
+  const [excludedFilters, setExcludedFilters] = useState(new Set(defaultExcluded));
   const [expanded, setExpanded] = useState(false);
-  const [inverted, setInverted] = useState(false);
-  const tagsActive = selectedTags.length > 0;
+  const tagsActive = includedFilters.size > 0 || excludedFilters.size > 0;
+  const resetFilters = useCallback(() => {
+    setIncludedFilters(new Set(defaultIncluded));
+    setExcludedFilters(new Set(defaultExcluded));
+  }, [defaultIncluded, defaultExcluded]);
+  useEffect(resetFilters, [resetFilters]);
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
-      if (selectedTags.length === 0) {
-        return true;
-      }
-      const match = selectedTags.some((tag) => item.tags?.includes(tag));
-      return inverted ? !match : match;
-    });
-  }, [api, selectedTags, inverted]);
-  const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
-    entry.tags?.forEach((tag) => {
-      if (!BUILT_IN_TAGS_HIDE.has(tag)) {
-        acc.set(tag, (acc.get(tag) || 0) + 1);
-      }
+      const included = Object.values(
+        groupByType(Array.from(includedFilters).map((id) => filtersById[id]))
+      );
+      const excluded = Object.values(
+        groupByType(Array.from(excludedFilters).map((id) => filtersById[id]))
+      );
+      return (!included.length || included.every((group) => group.some(({ filterFn }) => filterFn(item, false)))) && (!excluded.length || excluded.every((group) => group.every(({ filterFn }) => filterFn(item, true))));
     });
-    return acc;
-  }, /* @__PURE__ */ new Map());
-  const toggleTag = useCallback(
-    (tag) => {
-      if (selectedTags.includes(tag)) {
-        setSelectedTags(selectedTags.filter((t2) => t2 !== tag));
+  }, [api, includedFilters, excludedFilters, filtersById]);
+  const toggleFilter = useCallback(
+    (id, selected, excluded) => {
+      const set2 = /* @__PURE__ */ new Set([id]);
+      if (excluded === true) {
+        setExcludedFilters(excludedFilters.union(set2));
+        setIncludedFilters(includedFilters.difference(set2));
+      } else if (excluded === false) {
+        setIncludedFilters(includedFilters.union(set2));
+        setExcludedFilters(excludedFilters.difference(set2));
+      } else if (selected) {
+        setIncludedFilters(includedFilters.union(set2));
+        setExcludedFilters(excludedFilters.difference(set2));
       } else {
-        setSelectedTags([...selectedTags, tag]);
+        setIncludedFilters(includedFilters.difference(set2));
+        setExcludedFilters(excludedFilters.difference(set2));
       }
     },
-    [selectedTags, setSelectedTags]
+    [includedFilters, excludedFilters]
   );
-  const setAllTags = useCallback(
+  const setAllFilters = useCallback(
     (selected) => {
       if (selected) {
-        setSelectedTags(Array.from(allTags.keys()));
+        setIncludedFilters(new Set(Object.keys(filtersById)));
       } else {
-        setSelectedTags([]);
-        setInverted(false);
+        setIncludedFilters(/* @__PURE__ */ new Set());
       }
+      setExcludedFilters(/* @__PURE__ */ new Set());
     },
-    [allTags, setSelectedTags]
+    [filtersById]
   );
   const handleToggleExpand = useCallback(
     (event) => {
@@ -17963,7 +18162,7 @@ var TagsFilter = /* @__PURE__ */ __name(({
     },
     [expanded, setExpanded]
   );
-  if (allTags.size === 0 && !isDevelopment) {
+  if (Object.keys(filtersById).length === 0 && !isDevelopment) {
     return null;
   }
   return react_default.createElement(
@@ -17977,18 +18176,20 @@ var TagsFilter = /* @__PURE__ */ __name(({
         TagsFilterPanel,
         {
           api,
-          allTags,
-          selectedTags,
-          toggleTag,
-          setAllTags,
-          inverted,
-          setInverted,
-          isDevelopment
+          filtersById,
+          includedFilters,
+          excludedFilters,
+          toggleFilter,
+          setAllFilters,
+          resetFilters,
+          isDevelopment,
+          isDefaultSelection: includedFilters.symmetricDifference(defaultIncluded).size === 0 && excludedFilters.symmetricDifference(defaultExcluded).size === 0,
+          hasDefaultSelection: defaultIncluded.size > 0 || defaultExcluded.size > 0
         }
       ),
       closeOnOutsideClick: true
     },
-    react_default.createElement(Wrapper4, null, react_default.createElement(IconButton, { key: "tags", title: "Tag filters", active: tagsActive, onClick: handleToggleExpand }, react_default.createElement(FilterIcon, null)), selectedTags.length > 0 && react_default.createElement(TagSelected, null))
+    react_default.createElement(Wrapper4, null, react_default.createElement(IconButton, { key: "tags", title: "Tag filters", active: tagsActive, onClick: handleToggleExpand }, react_default.createElement(FilterIcon, null)), includedFilters.size + excludedFilters.size > 0 && react_default.createElement(TagSelected, null))
   );
 }, "TagsFilter");
 
@@ -25047,6 +25248,14 @@ var Sidebar = react_default.memo(/* @__PURE__ */ __name(function Sidebar2({
   const lastViewedProps = useLastViewed(selected);
   const { isMobile } = useLayout();
   const api = useStorybookApi();
+  const tagPresets = useMemo(
+    () => Object.entries(scope.TAGS_OPTIONS ?? {}).reduce((acc, entry) => {
+      const [tag, option] = entry;
+      acc[tag] = option;
+      return acc;
+    }, {}),
+    []
+  );
   return react_default.createElement(Container7, { className: "container sidebar-container", "aria-label": "Global" }, react_default.createElement(ScrollArea, { vertical: true, offset: 3, scrollbarSize: 6 }, react_default.createElement(Top, { row: 1.6 }, react_default.createElement(
     Heading,
     {
@@ -25088,7 +25297,15 @@ var Sidebar = react_default.memo(/* @__PURE__ */ __name(function Sidebar2({
           onOpenChange: setIsFileSearchModalOpen
         }
       )),
-      searchFieldContent: indexJson && react_default.createElement(TagsFilter, { api, indexJson, isDevelopment }),
+      searchFieldContent: indexJson && react_default.createElement(
+        TagsFilter,
+        {
+          api,
+          indexJson,
+          isDevelopment,
+          tagPresets
+        }
+      ),
       ...lastViewedProps
     },
     ({