storybook 10.2.0-alpha.13 → 10.2.0-alpha.15

package/dist/manager/runtime.js

@@ -2226,62 +2226,6 @@ var F = ["children"], G = ["children"], W = (function(e2) {
 })(Component);
 W.propTypes = { base: import_prop_types.default.object, bodyAttributes: import_prop_types.default.object, children: import_prop_types.default.oneOfType([import_prop_types.default.arrayOf(import_prop_types.default.node), import_prop_types.default.node]), defaultTitle: import_prop_types.default.string, defer: import_prop_types.default.bool, encodeSpecialCharacters: import_prop_types.default.bool, htmlAttributes: import_prop_types.default.object, link: import_prop_types.default.arrayOf(import_prop_types.default.object), meta: import_prop_types.default.arrayOf(import_prop_types.default.object), noscript: import_prop_types.default.arrayOf(import_prop_types.default.object), onChangeClientState: import_prop_types.default.func, script: import_prop_types.default.arrayOf(import_prop_types.default.object), style: import_prop_types.default.arrayOf(import_prop_types.default.object), title: import_prop_types.default.string, titleAttributes: import_prop_types.default.object, titleTemplate: import_prop_types.default.string, prioritizeSeoTags: import_prop_types.default.bool, helmetData: import_prop_types.default.object }, W.defaultProps = { defer: !0, encodeSpecialCharacters: !0, prioritizeSeoTags: !1 }, W.displayName = "Helmet";
 
-// src/manager/constants.ts
-var MEDIA_DESKTOP_BREAKPOINT = "@media (min-width: 600px)";
-
-// src/manager/hooks/useMedia.tsx
-function useMediaQuery(query) {
-  let getMatches = (queryMatch) => typeof window < "u" ? window.matchMedia(queryMatch).matches : !1, [matches, setMatches] = useState(getMatches(query));
-  function handleChange() {
-    setMatches(getMatches(query));
-  }
-  return useEffect(() => {
-    let matchMedia = window.matchMedia(query);
-    return handleChange(), matchMedia.addEventListener("change", handleChange), () => {
-      matchMedia.removeEventListener("change", handleChange);
-    };
-  }, [query]), matches;
-}
-
-// src/manager/components/layout/LayoutProvider.tsx
-var LayoutContext = createContext({
-  isMobileMenuOpen: !1,
-  setMobileMenuOpen: () => {
-  },
-  isMobileAboutOpen: !1,
-  setMobileAboutOpen: () => {
-  },
-  isMobilePanelOpen: !1,
-  setMobilePanelOpen: () => {
-  },
-  isDesktop: !1,
-  isMobile: !1
-}), LayoutProvider = ({ children, forceDesktop }) => {
-  let [isMobileMenuOpen, setMobileMenuOpen] = useState(!1), [isMobileAboutOpen, setMobileAboutOpen] = useState(!1), [isMobilePanelOpen, setMobilePanelOpen] = useState(!1), isDesktop = forceDesktop ?? useMediaQuery(`(min-width: ${600}px)`), isMobile2 = !isDesktop, contextValue = useMemo(
-    () => ({
-      isMobileMenuOpen,
-      setMobileMenuOpen,
-      isMobileAboutOpen,
-      setMobileAboutOpen,
-      isMobilePanelOpen,
-      setMobilePanelOpen,
-      isDesktop,
-      isMobile: isMobile2
-    }),
-    [
-      isMobileMenuOpen,
-      setMobileMenuOpen,
-      isMobileAboutOpen,
-      setMobileAboutOpen,
-      isMobilePanelOpen,
-      setMobilePanelOpen,
-      isDesktop,
-      isMobile2
-    ]
-  );
-  return react_default.createElement(LayoutContext.Provider, { value: contextValue }, children);
-}, useLayout = () => useContext(LayoutContext);
-
 // ../../node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n3) {
@@ -2356,19 +2300,19 @@ function _wrapNativeSuper(t2) {
     if (typeof t3 != "function") throw new TypeError("Super expression must either be null or a function");
     if (r3 !== void 0) {
       if (r3.has(t3)) return r3.get(t3);
-      r3.set(t3, Wrapper6);
+      r3.set(t3, Wrapper8);
     }
-    function Wrapper6() {
+    function Wrapper8() {
       return _construct(t3, arguments, _getPrototypeOf(this).constructor);
     }
-    return Wrapper6.prototype = Object.create(t3.prototype, {
+    return Wrapper8.prototype = Object.create(t3.prototype, {
       constructor: {
-        value: Wrapper6,
+        value: Wrapper8,
         enumerable: !1,
         writable: !0,
         configurable: !0
       }
-    }), _setPrototypeOf(Wrapper6, t3);
+    }), _setPrototypeOf(Wrapper8, t3);
   }, _wrapNativeSuper(t2);
 }
 
@@ -2878,6 +2822,180 @@ function transparentize(amount, color2) {
 }
 var curriedTransparentize = curry(transparentize), curriedTransparentize$1 = curriedTransparentize;
 
+// src/manager/components/error-boundary/ManagerErrorBoundary.tsx
+var Container = styled.div(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: theme.background.app,
+  color: theme.color.defaultText,
+  fontFamily: theme.typography.fonts.base
+})), Content = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  width: "80%",
+  height: "80%",
+  padding: 20,
+  gap: 20,
+  backgroundColor: theme.background.content,
+  borderRadius: theme.appBorderRadius,
+  border: `1px solid ${theme.color.negative}`,
+  boxShadow: "0 0 64px rgba(0, 0, 0, 0.1)",
+  overflow: "auto"
+})), Info = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "start",
+  gap: 15
+})), Heading = styled.h1(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  margin: 0,
+  gap: 10,
+  fontSize: theme.typography.size.s2,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.color.defaultText
+})), SubHeading = styled.p(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.textMutedColor,
+  margin: 0,
+  lineHeight: 1.4,
+  textWrap: "balance"
+})), ErrorWrapper = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column-reverse",
+  width: "100%",
+  flex: "0 0 auto",
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: theme.appBorderRadius,
+  pre: {
+    borderRadius: 0
+  }
+})), CollapseToggle = styled.div(({ theme }) => ({
+  flex: "0 0 auto",
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  height: 40,
+  width: "100%",
+  padding: "0 10px",
+  cursor: "pointer",
+  fontSize: theme.typography.size.s2,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.color.defaultText,
+  userSelect: "none",
+  "&:hover": {
+    backgroundColor: theme.base === "light" ? "rgba(0, 0, 0, 0.02)" : "rgba(255, 255, 255, 0.03)"
+  },
+  svg: {
+    color: theme.textMutedColor
+  }
+})), ErrorMessage = styled.pre(({ theme }) => ({
+  order: 1,
+  padding: "11px 15px",
+  margin: 0,
+  fontSize: theme.typography.size.s1,
+  color: theme.color.negativeText,
+  backgroundColor: curriedTransparentize$1(theme.base === "light" ? 0.95 : 0.9, theme.color.negative),
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  fontFamily: theme.typography.fonts.mono,
+  lineHeight: "18px"
+})), ErrorStack = styled.pre(({ theme }) => ({
+  padding: 15,
+  margin: 0,
+  fontSize: theme.typography.size.s1,
+  color: theme.textMutedColor,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  borderRadius: 0,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  fontFamily: theme.typography.fonts.mono
+})), ErrorFallback = ({ error, errorInfo }) => react_default.createElement(Container, { "data-testid": "manager-error-boundary" }, react_default.createElement(Content, null, react_default.createElement(Info, null, react_default.createElement(Heading, null, react_default.createElement(Badge, { status: "negative" }, "Error"), react_default.createElement("span", null, "Something went wrong")), react_default.createElement(SubHeading, null, "The Storybook Manager UI encountered an error. This is usually caused by custom addon code or configuration. Please check your browser console for more details. Try clearing browser storage if the issue persists."), react_default.createElement(Button, { asChild: !0, size: "medium" }, react_default.createElement("a", { href: window.location.origin + window.location.pathname.replace("iframe.html", "") }, react_default.createElement(SyncIcon, { size: 14 }), "Reload Storybook"))), react_default.createElement(ErrorWrapper, null, react_default.createElement(ErrorMessage, null, error.message || "Unknown error"), react_default.createElement(
+  Collapsible,
+  {
+    collapsed: !0,
+    summary: ({ isCollapsed, toggleCollapsed }) => react_default.createElement(CollapseToggle, { onClick: toggleCollapsed }, react_default.createElement(UnfoldIcon, null), isCollapsed ? "Expand error" : "Collapse error")
+  },
+  (error.stack || errorInfo?.componentStack) && react_default.createElement(ErrorStack, null, error.stack, errorInfo?.componentStack && `
+
+Component Stack:${errorInfo.componentStack}`)
+)))), ManagerErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props), this.state = { hasError: !1, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: !0, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Storybook Manager UI Error:", error), console.error("Component Stack:", errorInfo.componentStack), this.setState({ errorInfo });
+  }
+  render() {
+    let { hasError, error, errorInfo } = this.state, { children } = this.props;
+    return hasError && error ? react_default.createElement(ErrorFallback, { error, errorInfo }) : children;
+  }
+};
+
+// src/manager/constants.ts
+var MEDIA_DESKTOP_BREAKPOINT = "@media (min-width: 600px)";
+
+// src/manager/hooks/useMedia.tsx
+function useMediaQuery(query) {
+  let getMatches = (queryMatch) => typeof window < "u" ? window.matchMedia(queryMatch).matches : !1, [matches, setMatches] = useState(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  return useEffect(() => {
+    let matchMedia = window.matchMedia(query);
+    return handleChange(), matchMedia.addEventListener("change", handleChange), () => {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]), matches;
+}
+
+// src/manager/components/layout/LayoutProvider.tsx
+var LayoutContext = createContext({
+  isMobileMenuOpen: !1,
+  setMobileMenuOpen: () => {
+  },
+  isMobileAboutOpen: !1,
+  setMobileAboutOpen: () => {
+  },
+  isMobilePanelOpen: !1,
+  setMobilePanelOpen: () => {
+  },
+  isDesktop: !1,
+  isMobile: !1
+}), LayoutProvider = ({ children, forceDesktop }) => {
+  let [isMobileMenuOpen, setMobileMenuOpen] = useState(!1), [isMobileAboutOpen, setMobileAboutOpen] = useState(!1), [isMobilePanelOpen, setMobilePanelOpen] = useState(!1), isDesktop = forceDesktop ?? useMediaQuery(`(min-width: ${600}px)`), isMobile2 = !isDesktop, contextValue = useMemo(
+    () => ({
+      isMobileMenuOpen,
+      setMobileMenuOpen,
+      isMobileAboutOpen,
+      setMobileAboutOpen,
+      isMobilePanelOpen,
+      setMobilePanelOpen,
+      isDesktop,
+      isMobile: isMobile2
+    }),
+    [
+      isMobileMenuOpen,
+      setMobileMenuOpen,
+      isMobileAboutOpen,
+      setMobileAboutOpen,
+      isMobilePanelOpen,
+      setMobilePanelOpen,
+      isDesktop,
+      isMobile2
+    ]
+  );
+  return react_default.createElement(LayoutContext.Provider, { value: contextValue }, children);
+}, useLayout = () => useContext(LayoutContext);
+
 // src/manager/components/notifications/NotificationItem.tsx
 var slideIn = keyframes({
   "0%": {
@@ -3310,17 +3428,13 @@ $b4b717babfbb907b$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):no
 var $b4b717babfbb907b$var$TABBABLE_ELEMENT_SELECTOR = $b4b717babfbb907b$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 
 // src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx
-var StyledModal = styled(Modal)(({ theme }) => ({
-  background: theme.background.content,
-  borderRadius: "10px 10px 0 0",
-  border: "none"
-})), MobileAddonsDrawer = ({
+var MobileAddonsDrawer = ({
   children,
   id,
   isOpen,
   onOpenChange
 }) => react_default.createElement(
-  StyledModal,
+  Modal,
   {
     ariaLabel: "Addon panel",
     transitionDuration: 300,
@@ -3466,8 +3580,8 @@ var updateState2 = (key, status, setStateMap, latestStateMap, timeoutId, onChang
 // src/manager/components/upgrade/UpgradeBlock.tsx
 var UpgradeBlock = ({ onNavigateToWhatsNew }) => {
   let api = useStorybookApi(), [activeTab, setActiveTab] = useState("npm");
-  return react_default.createElement(Container, null, react_default.createElement("strong", null, "You are on Storybook ", api.getCurrentVersion().version), react_default.createElement("p", null, "Run the following script to check for updates and upgrade to the latest version."), react_default.createElement(Tabs2, null, react_default.createElement(ButtonTab, { active: activeTab === "npm", onClick: () => setActiveTab("npm") }, "npm"), react_default.createElement(ButtonTab, { active: activeTab === "yarn", onClick: () => setActiveTab("yarn") }, "yarn"), react_default.createElement(ButtonTab, { active: activeTab === "pnpm", onClick: () => setActiveTab("pnpm") }, "pnpm")), react_default.createElement(Code2, null, activeTab === "npm" ? "npx storybook@latest upgrade" : `${activeTab} dlx storybook@latest upgrade`), onNavigateToWhatsNew && react_default.createElement(Link, { onClick: onNavigateToWhatsNew }, "See what's new in Storybook"));
-}, Container = styled.div(({ theme }) => ({
+  return react_default.createElement(Container2, null, react_default.createElement("strong", null, "You are on Storybook ", api.getCurrentVersion().version), react_default.createElement("p", null, "Run the following script to check for updates and upgrade to the latest version."), react_default.createElement(Tabs2, null, react_default.createElement(ButtonTab, { active: activeTab === "npm", onClick: () => setActiveTab("npm") }, "npm"), react_default.createElement(ButtonTab, { active: activeTab === "yarn", onClick: () => setActiveTab("yarn") }, "yarn"), react_default.createElement(ButtonTab, { active: activeTab === "pnpm", onClick: () => setActiveTab("pnpm") }, "pnpm")), react_default.createElement(Code2, null, activeTab === "npm" ? "npx storybook@latest upgrade" : `${activeTab} dlx storybook@latest upgrade`), onNavigateToWhatsNew && react_default.createElement(Link, { onClick: onNavigateToWhatsNew }, "See what's new in Storybook"));
+}, Container2 = styled.div(({ theme }) => ({
   border: "1px solid",
   borderRadius: 5,
   padding: 20,
@@ -3508,7 +3622,7 @@ var MobileAbout = () => {
   return useEffect(() => {
     toggle(isMobileAboutOpen);
   }, [isMobileAboutOpen, toggle]), state.isMounted ? react_default.createElement(
-    Container2,
+    Container3,
     {
       ref: aboutRef,
       $status: state.status,
@@ -3569,11 +3683,12 @@ var MobileAbout = () => {
     opacity: 0,
     transform: "translate(20px, 0)"
   }
-}), Container2 = styled.div(
+}), Container3 = styled.div(
   ({ theme, $status, $transitionDuration }) => ({
     position: "absolute",
     width: "100%",
     height: "100%",
+    borderRadius: "10px 10px 0 0",
     top: 0,
     left: 0,
     zIndex: 11,
@@ -3613,17 +3728,13 @@ var MobileAbout = () => {
 });
 
 // src/manager/components/mobile/navigation/MobileMenuDrawer.tsx
-var StyledModal2 = styled(Modal)(({ theme }) => ({
-  background: theme.background.content,
-  borderRadius: "10px 10px 0 0",
-  border: "none"
-})), MobileMenuDrawer = ({
+var MobileMenuDrawer = ({
   children,
   id,
   isOpen,
   onOpenChange
 }) => react_default.createElement(
-  StyledModal2,
+  Modal,
   {
     ariaLabel: "Menu",
     transitionDuration: 300,
@@ -3659,7 +3770,7 @@ var useFullStoryName = () => {
   ...props
 }) => {
   let { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(), fullStoryName = useFullStoryName(), headingId = $bdb11010cef70236$export$f680877a34711e37();
-  return react_default.createElement(Container3, { ...props }, react_default.createElement(
+  return react_default.createElement(Container4, { ...props }, react_default.createElement(
     MobileMenuDrawer,
     {
       id: "storybook-mobile-menu",
@@ -3699,7 +3810,7 @@ var useFullStoryName = () => {
     },
     react_default.createElement(BottomBarToggleIcon, null)
   )));
-}, Container3 = styled.div(({ theme }) => ({
+}, Container4 = styled.div(({ theme }) => ({
   bottom: 0,
   left: 0,
   width: "100%",
@@ -3753,7 +3864,7 @@ function useDragging({
 }) {
   let panelResizerRef = useRef(null), sidebarResizerRef = useRef(null);
   return useEffect(() => {
-    let panelResizer = panelResizerRef.current, sidebarResizer = sidebarResizerRef.current, previewIframe = document.querySelector("#storybook-preview-wrapper"), draggedElement = null, onDragStart = (e2) => {
+    let panelResizer = panelResizerRef.current, sidebarResizer = sidebarResizerRef.current, previewIframe = document.querySelector("#storybook-preview-iframe"), draggedElement = null, onDragStart = (e2) => {
       e2.preventDefault(), setState((state) => ({
         ...state,
         isDragging: !0
@@ -4233,6 +4344,183 @@ var Panel = (props) => {
 // src/manager/container/Preview.tsx
 var import_memoizerific = __toESM(require_memoizerific(), 1);
 
+// src/viewport/constants.ts
+var ADDON_ID = "storybook/viewport", PARAM_KEY = "viewport", PANEL_ID = `${ADDON_ID}/panel`, TOOL_ID = `${ADDON_ID}/tool`;
+
+// src/viewport/defaults.ts
+var MINIMAL_VIEWPORTS = {
+  mobile1: {
+    name: "Small mobile",
+    styles: {
+      height: "568px",
+      width: "320px"
+    },
+    type: "mobile"
+  },
+  mobile2: {
+    name: "Large mobile",
+    styles: {
+      height: "896px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  tablet: {
+    name: "Tablet",
+    styles: {
+      height: "1112px",
+      width: "834px"
+    },
+    type: "tablet"
+  },
+  desktop: {
+    name: "Desktop",
+    styles: {
+      height: "1024px",
+      width: "1280px"
+    },
+    type: "desktop"
+  }
+};
+
+// src/viewport/useViewport.ts
+var URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/, VIEWPORT_MIN_WIDTH = 40, VIEWPORT_MIN_HEIGHT = 40, cycle = (viewports, current, direction = 1) => {
+  let keys = Object.keys(viewports), nextIndex = (current ? keys.indexOf(current) : -1) + direction;
+  return nextIndex < 0 ? keys[keys.length - 1] : nextIndex >= keys.length ? keys[0] : keys[nextIndex];
+}, normalizeGlobal = (value, defaultIsRotated) => typeof value == "string" ? { value, isRotated: defaultIsRotated } : { value: value?.value, isRotated: value?.isRotated ?? defaultIsRotated }, parseGlobals = (globals, storyGlobals, userGlobals, options2, lastSelectedOption, disable, viewMode) => {
+  if (viewMode !== "story")
+    return {
+      name: "Responsive",
+      type: "desktop",
+      width: "100%",
+      height: "100%",
+      value: "100pct-100pct",
+      option: void 0,
+      isCustom: !1,
+      isDefault: !0,
+      isLocked: !0,
+      isRotated: !1
+    };
+  let global2 = normalizeGlobal(globals?.[PARAM_KEY]), userGlobal = normalizeGlobal(userGlobals?.[PARAM_KEY]), storyGlobal = normalizeGlobal(storyGlobals?.[PARAM_KEY]), value = userGlobal?.value ?? storyGlobal?.value ?? global2?.value, isRotated = userGlobal?.isRotated ?? storyGlobal?.isRotated ?? global2?.isRotated ?? !1, keys = Object.keys(options2), isLocked = disable || PARAM_KEY in storyGlobals || !keys.length, [match, vx, ux, vy, uy] = value?.match(URL_VALUE_PATTERN) || [];
+  if (match) {
+    let x2 = ux && ux !== "px" ? vx : Math.max(Number(vx), VIEWPORT_MIN_WIDTH), y2 = uy && uy !== "px" ? vy : Math.max(Number(vy), VIEWPORT_MIN_HEIGHT), width = `${x2}${ux === "pct" ? "%" : ux || "px"}`, height = `${y2}${uy === "pct" ? "%" : uy || "px"}`, selection = lastSelectedOption ? options2[lastSelectedOption] : void 0;
+    return {
+      name: selection?.name ?? "Custom",
+      type: selection?.type ?? "other",
+      width: isRotated ? height : width,
+      height: isRotated ? width : height,
+      value: match,
+      option: void 0,
+      isCustom: !0,
+      isDefault: !1,
+      isLocked,
+      isRotated
+    };
+  }
+  if (value && keys.length) {
+    let { name, styles: styles2, type = "other" } = options2[value] ?? options2[keys[0]];
+    return {
+      name,
+      type,
+      width: isRotated ? styles2.height : styles2.width,
+      height: isRotated ? styles2.width : styles2.height,
+      value,
+      option: value,
+      isCustom: !1,
+      isDefault: !1,
+      isLocked,
+      isRotated
+    };
+  }
+  return {
+    name: "Responsive",
+    type: "desktop",
+    width: "100%",
+    height: "100%",
+    value: "100pct-100pct",
+    option: void 0,
+    isCustom: !1,
+    isDefault: !0,
+    isLocked,
+    isRotated: !1
+  };
+}, useViewport = () => {
+  let api = useStorybookApi(), { viewMode } = api.getUrlState(), lastSelectedOption = useRef(), parameter = useParameter(PARAM_KEY), [globals, updateGlobals, storyGlobals, userGlobals] = useGlobals(), { options: options2 = MINIMAL_VIEWPORTS, disable = !1 } = parameter || {}, { name, type, width, height, value, option, isCustom, isDefault, isLocked, isRotated } = parseGlobals(
+    globals,
+    storyGlobals,
+    userGlobals,
+    options2,
+    lastSelectedOption.current,
+    disable,
+    viewMode
+  ), update2 = useCallback(
+    (input) => updateGlobals({ [PARAM_KEY]: input }),
+    [updateGlobals]
+  ), resize = useCallback(
+    (width2, height2) => {
+      let w2 = width2.replace(/px$/, "").replace(/%$/, "pct"), h2 = height2.replace(/px$/, "").replace(/%$/, "pct"), value2 = isRotated ? `${h2}-${w2}` : `${w2}-${h2}`, [match, vx, ux, vy, uy] = value2.match(URL_VALUE_PATTERN) || [];
+      match && (ux || Number(vx) >= 40) && (uy || Number(vy) >= 40) && update2({ value: match, isRotated });
+    },
+    [update2, isRotated]
+  );
+  return useEffect(() => {
+    PARAM_KEY in storyGlobals && (update2(normalizeGlobal(storyGlobals?.[PARAM_KEY], !1)), lastSelectedOption.current = void 0);
+  }, [storyGlobals, update2]), useEffect(() => {
+    option && (Object.hasOwn(options2, option) ? lastSelectedOption.current = option : (lastSelectedOption.current = void 0, update2(normalizeGlobal(storyGlobals?.[PARAM_KEY], !1))));
+  }, [storyGlobals, options2, option, update2]), useEffect(() => {
+    api.setAddonShortcut(ADDON_ID, {
+      label: "Next viewport",
+      defaultShortcut: ["alt", "V"],
+      actionName: "next",
+      action: () => update2({ value: cycle(options2, lastSelectedOption.current), isRotated })
+    }), api.setAddonShortcut(ADDON_ID, {
+      label: "Previous viewport",
+      defaultShortcut: ["alt", "shift", "V"],
+      actionName: "previous",
+      action: () => update2({ value: cycle(options2, lastSelectedOption.current, -1), isRotated })
+    }), api.setAddonShortcut(ADDON_ID, {
+      label: "Reset viewport",
+      defaultShortcut: ["alt", "control", "V"],
+      actionName: "reset",
+      action: () => update2({ value: void 0, isRotated: !1 })
+    });
+  }, [api, update2, options2, isRotated]), useMemo(
+    () => ({
+      name,
+      type,
+      width,
+      height,
+      value,
+      option,
+      isCustom,
+      isDefault,
+      isLocked,
+      isRotated,
+      options: options2,
+      lastSelectedOption: lastSelectedOption.current,
+      resize,
+      reset: () => update2({ value: void 0, isRotated: !1 }),
+      rotate: () => update2({ value, isRotated: !isRotated }),
+      select: (value2) => update2({ value: value2, isRotated })
+    }),
+    [
+      name,
+      type,
+      width,
+      height,
+      value,
+      option,
+      isCustom,
+      isDefault,
+      isRotated,
+      isLocked,
+      options2,
+      resize,
+      update2
+    ]
+  );
+};
+
 // src/manager/components/preview/Iframe.tsx
 var StyledIframe = styled.iframe(({ theme }) => ({
   backgroundColor: theme.background.preview,
@@ -4240,11 +4528,10 @@ var StyledIframe = styled.iframe(({ theme }) => ({
   boxSizing: "content-box",
   height: "100%",
   width: "100%",
-  border: "0 none",
+  border: "none",
   transition: "background-position 0s, visibility 0s",
   backgroundPosition: "-1px -1px, -1px -1px, -1px -1px, -1px -1px",
-  margin: "auto",
-  boxShadow: "0 0 100px 100vw rgba(0,0,0,0.5)"
+  margin: "auto"
 }));
 function IFrame(props) {
   let { active, id, title: title2, src, allowFullScreen, scale, ...rest2 } = props, iFrameRef = react_default.useRef(null);
@@ -4264,38 +4551,422 @@ function IFrame(props) {
   ));
 }
 
-// src/manager/components/preview/FramesRenderer.tsx
-var getActive = (refId, refs) => refId && refs[refId] ? `storybook-ref-${refId}` : "storybook-preview-iframe", SkipToSidebarLink = styled(Button)(({ theme }) => ({
-  display: "none",
-  "@media (min-width: 600px)": {
-    position: "absolute",
-    display: "block",
-    top: 10,
-    right: 15,
-    padding: "10px 15px",
+// src/manager/components/preview/NumericInput.tsx
+var Wrapper = styled.div(
+  ({ after: after2, before: before2, theme }) => ({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: 32,
+    paddingInline: 9,
     fontSize: theme.typography.size.s1,
-    transform: "translateY(-100px)",
-    "&:focus": {
-      transform: "translateY(0)",
-      zIndex: 1
-    }
-  }
-})), whenSidebarIsVisible = ({ api, state }) => ({
-  isFullscreen: api.getIsFullscreen(),
-  isNavShown: api.getIsNavShown(),
-  selectedStoryId: state.storyId
-}), styles = {
-  '#root [data-is-storybook="false"]': {
-    display: "none"
-  },
-  '#root [data-is-storybook="true"]': {
-    display: "block"
-  }
-}, FramesRenderer = ({
-  api,
-  refs,
-  scale,
-  viewMode = "story",
+    color: theme.textMutedColor,
+    background: theme.input.background,
+    boxShadow: `${theme.input.border} 0 0 0 1px inset`,
+    borderRadius: theme.input.borderRadius,
+    svg: {
+      display: "block"
+    },
+    input: {
+      width: "100%",
+      height: "100%",
+      minHeight: "100%",
+      flex: "1 1 auto",
+      paddingInline: 0,
+      fontSize: "inherit",
+      background: "transparent",
+      border: "none",
+      boxShadow: "none",
+      color: theme.input.color,
+      "&:focus, &:focus-visible": {
+        boxShadow: "none",
+        outline: "none"
+      }
+    },
+    "&:has(input:focus-visible)": {
+      outline: `2px solid ${theme.color.secondary}`,
+      outlineOffset: -2
+    },
+    ...after2 && { paddingRight: 2 },
+    ...before2 && { paddingLeft: 2 }
+  })
+), NumericInput = forwardRef(function({
+  label,
+  before: before2,
+  after: after2,
+  value,
+  setValue,
+  minValue = -1 / 0,
+  maxValue = 1 / 0,
+  unit,
+  baseUnit,
+  className,
+  style,
+  ...props
+}, forwardedRef) {
+  let baseUnitRegex = useMemo(() => baseUnit && new RegExp(`${baseUnit}$`), [baseUnit]), inputId = $bdb11010cef70236$export$f680877a34711e37(), inputRef = useRef(null), [inputValue, setInputValue] = useState(
+    baseUnitRegex ? value.replace(baseUnitRegex, "") : value
+  ), id = props.id || inputId;
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  let parseValue = useCallback(
+    (value2) => {
+      let [, inputValue2, inputUnit = unit || baseUnit || ""] = value2.match(/(-?\d+(?:\.\d+)?)(\%|[a-z]{0,4})?$/) || [];
+      return { number: Math.max(minValue, Math.min(parseFloat(inputValue2), maxValue)), unit: inputUnit };
+    },
+    [minValue, maxValue, unit, baseUnit]
+  ), updateValue = useCallback(
+    (value2) => {
+      let { number, unit: unit2 } = parseValue(value2);
+      Number.isNaN(number) ? setInputValue(value2) : (setInputValue(`${number}${unit2 === baseUnit ? "" : unit2}`), setValue(`${number}${unit2}`));
+    },
+    [parseValue, setValue, baseUnit]
+  ), onChange = useCallback(
+    (e2) => updateValue(e2.target.value),
+    [updateValue]
+  ), setInputSelection = useCallback(() => {
+    requestAnimationFrame(() => {
+      let input = inputRef.current, index = input?.value.search(/[^-\d.]/) ?? -1;
+      input && index >= 0 && input.setSelectionRange(index, index);
+    });
+  }, []), updateInputValue = useCallback(
+    () => setInputValue(baseUnitRegex ? value.replace(baseUnitRegex, "") : value),
+    [value, baseUnitRegex]
+  );
+  return useEffect(() => {
+    inputRef.current !== document.activeElement && updateInputValue();
+  }, [updateInputValue]), useEffect(() => {
+    let handleKeyDown = (e2) => {
+      if (e2.key !== "ArrowUp" && e2.key !== "ArrowDown")
+        return;
+      e2.preventDefault();
+      let { number, unit: unit2 } = parseValue(inputValue);
+      Number.isNaN(number) || (updateValue(`${e2.key === "ArrowUp" ? number + 1 : number - 1}${unit2}`), setInputSelection());
+    }, input = inputRef.current;
+    if (input)
+      return input.addEventListener("keydown", handleKeyDown), () => input.removeEventListener("keydown", handleKeyDown);
+  }, [inputValue, parseValue, updateValue, setInputSelection]), react_default.createElement(Wrapper, { after: after2, before: before2, className, style }, before2 && react_default.createElement("div", null, before2), label && react_default.createElement("label", { htmlFor: id, className: "sb-sr-only" }, label), react_default.createElement(
+    Form.Input,
+    {
+      ...props,
+      id,
+      ref: inputRef,
+      value: inputValue,
+      onChange,
+      onFocus: setInputSelection,
+      onBlur: updateInputValue
+    }
+  ), after2 && react_default.createElement("div", null, after2));
+});
+
+// src/manager/components/preview/Viewport.tsx
+var ViewportWrapper = styled.div(({ active, isDefault, theme }) => ({
+  gridArea: "1 / 1",
+  alignSelf: "start",
+  justifySelf: "start",
+  display: active ? "inline-flex" : "none",
+  flexDirection: "column",
+  gap: 6,
+  width: "100%",
+  height: "100%",
+  paddingTop: isDefault ? 0 : 6,
+  paddingBottom: isDefault ? 0 : 40,
+  paddingInline: isDefault ? 0 : 40,
+  '&:has([data-size-input="width"]:focus-visible)': {
+    "[data-dragging]": {
+      borderRightColor: theme.color.secondary,
+      boxShadow: `4px 0 5px -2px ${theme.background.hoverable}`
+    }
+  },
+  '&:has([data-size-input="height"]:focus-visible)': {
+    "[data-dragging]": {
+      borderBottomColor: theme.color.secondary,
+      boxShadow: `0 4px 5px -2px ${theme.background.hoverable}`
+    }
+  }
+})), ViewportControls = styled.div({
+  display: "flex",
+  gap: 6
+}), ViewportDimensions = styled.div({
+  display: "flex",
+  gap: 2
+}), FrameWrapper = styled.div(({ isDefault, "data-dragging": dragging, theme }) => ({
+  position: "relative",
+  minWidth: VIEWPORT_MIN_WIDTH,
+  minHeight: VIEWPORT_MIN_HEIGHT,
+  boxSizing: "content-box",
+  // we're sizing the contents, not the box itself
+  border: `1px solid ${theme.button.border}`,
+  borderWidth: isDefault ? 0 : 1,
+  borderRadius: isDefault ? 0 : 4,
+  transition: "border-color 0.2s, box-shadow 0.2s",
+  '&:has([data-side="right"]:hover), &[data-dragging="right"]': {
+    borderRightColor: theme.color.secondary,
+    boxShadow: `4px 0 5px -2px ${theme.background.hoverable}`,
+    '[data-side="right"]::after': {
+      opacity: 1
+    }
+  },
+  '&:has([data-side="bottom"]:hover), &[data-dragging="bottom"]': {
+    borderBottomColor: theme.color.secondary,
+    boxShadow: `0 4px 5px -2px ${theme.background.hoverable}`,
+    '[data-side="bottom"]::after': {
+      opacity: 1
+    }
+  },
+  '&:has([data-side="both"]:hover), &[data-dragging="both"]': {
+    boxShadow: `3px 3px 5px -2px ${theme.background.hoverable}`,
+    "&::after, [data-side]::after": {
+      opacity: 1
+    }
+  },
+  "&::after": {
+    content: '""',
+    display: "block",
+    position: "absolute",
+    pointerEvents: "none",
+    bottom: 1,
+    right: 1,
+    width: 12,
+    height: 12,
+    opacity: 0,
+    transition: "opacity 0.2s",
+    background: `linear-gradient(to top left,
+      rgba(0,0,0,0) 0%,
+      rgba(0,0,0,0) calc(25% - 1px),
+      ${theme.color.secondary} 25%,
+      rgba(0,0,0,0) calc(25% + 1px),
+      rgba(0,0,0,0) calc(45% - 1px),
+      ${theme.color.secondary} 45%,
+      rgba(0,0,0,0) calc(45% + 1px),
+      rgba(0,0,0,0) 100%)`
+  },
+  iframe: {
+    pointerEvents: dragging === "none" ? "auto" : "none"
+  }
+})), DragHandle = styled.div(
+  { display: "none" },
+  ({ theme, isDefault }) => !isDefault && {
+    display: "block",
+    position: "absolute",
+    fontSize: 10,
+    '&[data-side="both"]': {
+      right: -12,
+      bottom: -12,
+      width: 25,
+      height: 25,
+      cursor: "nwse-resize"
+    },
+    '&[data-side="bottom"]': {
+      left: 0,
+      right: 13,
+      bottom: -12,
+      height: 20,
+      cursor: "row-resize",
+      "&::after": {
+        content: "attr(data-value)",
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        borderRadius: 4,
+        backgroundColor: theme.background.hoverable,
+        padding: "2px 4px",
+        opacity: 0,
+        transition: "opacity 0.2s"
+      }
+    },
+    '&[data-side="right"]': {
+      top: 0,
+      right: -12,
+      bottom: 13,
+      width: 20,
+      cursor: "col-resize",
+      "&::after": {
+        content: "attr(data-value)",
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        borderRadius: 4,
+        backgroundColor: theme.background.hoverable,
+        padding: "2px 4px",
+        opacity: 0,
+        transition: "opacity 0.2s"
+      }
+    }
+  }
+), ScrollEdge = styled.div({
+  position: "absolute",
+  pointerEvents: "none",
+  width: 0,
+  height: 0,
+  '&[data-edge="right"]': {
+    right: -40,
+    height: "100%"
+  },
+  '&[data-edge="bottom"]': {
+    bottom: -40,
+    width: "100%"
+  },
+  '&[data-edge="both"]': {
+    right: -40,
+    bottom: -40
+  }
+}), SizeInput = styled(NumericInput)({
+  width: 85,
+  height: 28,
+  minHeight: 28
+}), parseNumber = (value) => {
+  let [match, number, unit] = value.match(/^(\d+(?:\.\d+)?)(\%|[a-z]{0,4})?$/) || [];
+  return match ? { number: Number(number), unit } : void 0;
+}, Viewport = ({
+  active,
+  id,
+  src,
+  scale
+}) => {
+  let { width, height, isCustom, isDefault, lastSelectedOption, resize, rotate, select } = useViewport(), [dragging, setDragging] = useState("none"), targetRef = useRef(null), dragRefX = useRef(null), dragRefY = useRef(null), dragRefXY = useRef(null), dragSide = useRef("none"), dragStart = useRef();
+  useEffect(() => {
+    let scrollRight = targetRef.current?.querySelector('[data-edge="right"]'), scrollBottom = targetRef.current?.querySelector('[data-edge="bottom"]'), scrollBoth = targetRef.current?.querySelector('[data-edge="both"]'), onDrag = (e2) => {
+      (dragSide.current === "both" || dragSide.current === "right") && (targetRef.current.style.width = `${dragStart.current[0] + e2.clientX}px`, dragRefX.current.dataset.value = `${dragStart.current[0] + e2.clientX}`), (dragSide.current === "both" || dragSide.current === "bottom") && (targetRef.current.style.height = `${dragStart.current[1] + e2.clientY}px`, dragRefY.current.dataset.value = `${dragStart.current[1] + e2.clientY}`), dragSide.current === "both" && scrollBoth?.scrollIntoView({ block: "center", inline: "center" }), dragSide.current === "right" && scrollRight?.scrollIntoView({ block: "center", inline: "center" }), dragSide.current === "bottom" && scrollBottom?.scrollIntoView({ block: "center", inline: "center" });
+    }, onEnd = () => {
+      window.removeEventListener("mouseup", onEnd), window.removeEventListener("mousemove", onDrag), setDragging("none");
+      let { clientWidth, clientHeight } = targetRef.current, scale2 = Number(targetRef.current.dataset.scale) || 1;
+      resize(`${Math.round(clientWidth / scale2)}px`, `${Math.round(clientHeight / scale2)}px`), dragStart.current = void 0;
+    }, onStart = (e2) => {
+      e2.preventDefault(), window.addEventListener("mouseup", onEnd), window.addEventListener("mousemove", onDrag), dragSide.current = e2.currentTarget.dataset.side, dragStart.current = [
+        (targetRef.current?.clientWidth ?? 0) - e2.clientX,
+        (targetRef.current?.clientHeight ?? 0) - e2.clientY
+      ], setDragging(dragSide.current);
+    }, handles = [dragRefX.current, dragRefY.current, dragRefXY.current];
+    return handles.forEach((el) => el?.addEventListener("mousedown", onStart)), () => handles.forEach((el) => el?.removeEventListener("mousedown", onStart));
+  }, [resize]);
+  let frameStyles = useMemo(() => {
+    let { number: nx, unit: ux = "px" } = parseNumber(width) ?? { number: 0, unit: "px" }, { number: ny, unit: uy = "px" } = parseNumber(height) ?? { number: 0, unit: "px" };
+    return {
+      width: `${nx * scale}${ux}`,
+      height: `${ny * scale}${uy}`
+    };
+  }, [width, height, scale]);
+  return react_default.createElement(ViewportWrapper, { key: id, active, isDefault }, !isDefault && react_default.createElement(ViewportControls, null, react_default.createElement(ViewportDimensions, null, react_default.createElement(
+    SizeInput,
+    {
+      "aria-label": "Viewport width",
+      "data-size-input": "width",
+      label: "Viewport width",
+      before: react_default.createElement(ActionList.Action, { size: "small", readOnly: !0, "aria-hidden": !0 }, "W"),
+      value: width,
+      minValue: 0,
+      setValue: (value) => resize(value, height)
+    }
+  ), react_default.createElement(
+    ActionList.Button,
+    {
+      key: "viewport-rotate",
+      size: "small",
+      padding: "small",
+      ariaLabel: "Rotate viewport",
+      onClick: rotate
+    },
+    react_default.createElement(TransferIcon, null)
+  ), react_default.createElement(
+    SizeInput,
+    {
+      "aria-label": "Viewport height",
+      "data-size-input": "height",
+      label: "Viewport height",
+      before: react_default.createElement(ActionList.Action, { size: "small", readOnly: !0, "aria-hidden": !0 }, "H"),
+      value: height,
+      minValue: 0,
+      setValue: (value) => resize(width, value)
+    }
+  ), isCustom && lastSelectedOption && react_default.createElement(
+    ActionList.Button,
+    {
+      key: "viewport-restore",
+      size: "small",
+      padding: "small",
+      ariaLabel: "Restore viewport",
+      onClick: () => select(lastSelectedOption)
+    },
+    react_default.createElement(UndoIcon, null)
+  ))), react_default.createElement(
+    FrameWrapper,
+    {
+      isDefault,
+      "data-dragging": dragging,
+      "data-scale": scale,
+      style: isDefault ? { height: "100%", width: "100%" } : frameStyles,
+      ref: targetRef
+    },
+    react_default.createElement(
+      "div",
+      {
+        style: {
+          height: `${1 / scale * 100}%`,
+          width: `${1 / scale * 100}%`,
+          transform: `scale(${scale})`,
+          transformOrigin: "top left"
+        }
+      },
+      react_default.createElement(IFrame, { allowFullScreen: !0, active, key: id, id, title: id, src, scale: 1 }),
+      !isDefault && react_default.createElement(react_default.Fragment, null, react_default.createElement(ScrollEdge, { "data-edge": "right" }), react_default.createElement(ScrollEdge, { "data-edge": "bottom" }), react_default.createElement(ScrollEdge, { "data-edge": "both" }))
+    ),
+    react_default.createElement(
+      DragHandle,
+      {
+        ref: dragRefX,
+        isDefault,
+        "data-side": "right",
+        "data-value": width.replace("px", "")
+      }
+    ),
+    react_default.createElement(
+      DragHandle,
+      {
+        ref: dragRefY,
+        isDefault,
+        "data-side": "bottom",
+        "data-value": height.replace("px", "")
+      }
+    ),
+    react_default.createElement(DragHandle, { ref: dragRefXY, isDefault, "data-side": "both" })
+  ));
+};
+
+// src/manager/components/preview/FramesRenderer.tsx
+var getActive = (refId, refs) => refId && refs[refId] ? `storybook-ref-${refId}` : "storybook-preview-iframe", SkipToSidebarLink = styled(Button)(({ theme }) => ({
+  display: "none",
+  "@media (min-width: 600px)": {
+    position: "absolute",
+    display: "block",
+    top: 10,
+    right: 15,
+    padding: "10px 15px",
+    fontSize: theme.typography.size.s1,
+    transform: "translateY(-100px)",
+    "&:focus": {
+      transform: "translateY(0)",
+      zIndex: 1
+    }
+  }
+})), whenSidebarIsVisible = ({ api, state }) => ({
+  isFullscreen: api.getIsFullscreen(),
+  isNavShown: api.getIsNavShown(),
+  selectedStoryId: state.storyId
+}), styles = {
+  '#root [data-is-storybook="false"]': {
+    display: "none"
+  },
+  '#root [data-is-storybook="true"]': {
+    display: "block"
+  }
+}, FramesRenderer = ({
+  api,
+  refs,
+  scale,
+  viewMode = "story",
   refId,
   queryParams = {},
   storyId = "*"
@@ -4312,18 +4983,7 @@ var getActive = (refId, refs) => refId && refs[refId] ? `storybook-ref-${refId}`
       refId: ref.id,
       viewMode
     }).previewHref);
-  }), react_default.createElement(Fragment, null, react_default.createElement(Global, { styles }), react_default.createElement(Consumer, { filter: whenSidebarIsVisible }, ({ isFullscreen, isNavShown, selectedStoryId }) => isFullscreen || !isNavShown || !selectedStoryId ? null : react_default.createElement(SkipToSidebarLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: `#${selectedStoryId}`, tabIndex: 0, title: "Skip to sidebar" }, "Skip to sidebar"))), Object.entries(frames).map(([id, src]) => react_default.createElement(Fragment, { key: id }, react_default.createElement(
-    IFrame,
-    {
-      active: id === active,
-      key: id,
-      id,
-      title: id,
-      src,
-      allowFullScreen: !0,
-      scale
-    }
-  ))));
+  }), react_default.createElement(Fragment, null, react_default.createElement(Global, { styles }), react_default.createElement(Consumer, { filter: whenSidebarIsVisible }, ({ isFullscreen, isNavShown, selectedStoryId }) => isFullscreen || !isNavShown || !selectedStoryId ? null : react_default.createElement(SkipToSidebarLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: `#${selectedStoryId}`, tabIndex: 0, title: "Skip to sidebar" }, "Skip to sidebar"))), Object.entries(frames).map(([id, src]) => react_default.createElement(Viewport, { key: id, id, src, active: id === active, scale })));
 };
 
 // src/manager/components/preview/Toolbar.tsx
@@ -4451,8 +5111,8 @@ var PreviewContainer = styled.main({
     gridTemplateColumns: "100%",
     gridTemplateRows: "100%",
     position: "relative",
-    width: "100%",
-    height: "100%"
+    minWidth: "100%",
+    minHeight: "100%"
   },
   ({ show }) => ({ display: show ? "grid" : "none" })
 ), UnstyledLink = styled(Link2)({
@@ -4503,64 +5163,153 @@ var ApplyWrappers = ({
   }
 ];
 
+// src/manager/components/Shortcut.tsx
+var Wrapper2 = styled.span(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: 16,
+  fontSize: "11px",
+  fontWeight: theme.typography.weight.regular,
+  background: theme.base === "light" ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
+  color: theme.base === "light" ? theme.color.dark : theme.textMutedColor,
+  borderRadius: 2,
+  userSelect: "none",
+  pointerEvents: "none",
+  padding: "0 4px"
+})), Key = styled.kbd(({ theme }) => ({
+  padding: 0,
+  fontFamily: theme.typography.fonts.base,
+  verticalAlign: "middle",
+  "& + &": {
+    marginLeft: 6
+  }
+})), Shortcut = ({ keys }) => react_default.createElement(Wrapper2, null, keys.map((key) => react_default.createElement(Key, { key }, shortcutToHumanString([key]))));
+
 // src/manager/components/preview/tools/zoom.tsx
-var initialZoom = 1, Context = createContext({ value: initialZoom, set: (v2) => {
-} }), ZoomProvider = class extends Component {
+var ZOOM_LEVELS = [0.25, 0.5, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 2, 3, 4], INITIAL_ZOOM_LEVEL = 1, ZoomButton = styled(Button)({
+  minWidth: 48
+}), Context = createContext({ value: INITIAL_ZOOM_LEVEL, set: (v2) => {
+} }), ZoomInput = styled(NumericInput)({
+  input: {
+    width: 100
+  }
+}), ZoomConsumer = Context.Consumer, ZoomProvider = class extends Component {
   constructor() {
     super(...arguments);
     this.state = {
-      value: initialZoom
+      value: INITIAL_ZOOM_LEVEL
     };
     this.set = (value) => this.setState({ value });
   }
   render() {
     let { children, shouldScale } = this.props, { set } = this, { value } = this.state;
-    return react_default.createElement(Context.Provider, { value: { value: shouldScale ? value : initialZoom, set } }, children);
+    return react_default.createElement(Context.Provider, { value: { value: shouldScale ? value : INITIAL_ZOOM_LEVEL, set } }, children);
   }
-}, { Consumer: ZoomConsumer } = Context, Zoom2 = memo(function({ zoomIn, zoomOut, reset }) {
-  return react_default.createElement(react_default.Fragment, null, react_default.createElement(Button, { key: "zoomin", padding: "small", variant: "ghost", onClick: zoomIn, ariaLabel: "Zoom in" }, react_default.createElement(ZoomIcon, null)), react_default.createElement(Button, { key: "zoomout", padding: "small", variant: "ghost", onClick: zoomOut, ariaLabel: "Zoom out" }, react_default.createElement(ZoomOutIcon, null)), react_default.createElement(
-    Button,
+}, Zoom2 = memo(function({ value, zoomIn, zoomOut, zoomTo }) {
+  let inputRef = useRef(null);
+  return react_default.createElement(
+    PopoverProvider,
     {
-      key: "zoomreset",
-      padding: "small",
-      variant: "ghost",
-      onClick: reset,
-      ariaLabel: "Reset zoom"
-    },
-    react_default.createElement(ZoomResetIcon, null)
-  ));
-});
-var ZoomWrapper = memo(function({
-  set,
-  value
-}) {
-  let zoomIn = useCallback(
-    (e2) => {
-      e2.preventDefault(), set(0.8 * value);
-    },
-    [set, value]
-  ), zoomOut = useCallback(
-    (e2) => {
-      e2.preventDefault(), set(1.25 * value);
+      padding: "none",
+      onVisibleChange: (isVisible) => {
+        isVisible && requestAnimationFrame(() => inputRef.current?.select());
+      },
+      popover: react_default.createElement(react_default.Fragment, null, react_default.createElement(ActionList, null, react_default.createElement(ActionList.Item, null, react_default.createElement(
+        ZoomInput,
+        {
+          "aria-label": "Zoom percentage",
+          ref: inputRef,
+          unit: "%",
+          before: react_default.createElement(ActionList.Button, { size: "small", padding: "small", readOnly: !0, "aria-hidden": !0 }, react_default.createElement(ZoomIcon, null)),
+          after: react_default.createElement(
+            ActionList.Button,
+            {
+              size: "small",
+              padding: "small",
+              disabled: value === INITIAL_ZOOM_LEVEL,
+              onClick: () => zoomTo(INITIAL_ZOOM_LEVEL),
+              ariaLabel: "Reset zoom"
+            },
+            react_default.createElement(UndoIcon, null)
+          ),
+          value: `${Math.round(value * 100)}%`,
+          minValue: 1,
+          maxValue: 1e3,
+          setValue: (value2) => {
+            let zoomLevel = parseInt(value2, 10) / 100;
+            Number.isNaN(zoomLevel) || zoomTo(zoomLevel);
+          }
+        }
+      ))), react_default.createElement(ActionList, null, react_default.createElement(ActionList.Item, null, react_default.createElement(
+        ActionList.Action,
+        {
+          onClick: zoomIn,
+          ariaLabel: "Zoom in",
+          disabled: value >= ZOOM_LEVELS.at(-1)
+        },
+        react_default.createElement(ActionList.Text, null, "Zoom in"),
+        react_default.createElement(Shortcut, { keys: ["alt", "+"] })
+      )), react_default.createElement(ActionList.Item, null, react_default.createElement(
+        ActionList.Action,
+        {
+          onClick: zoomOut,
+          ariaLabel: "Zoom out",
+          disabled: value <= ZOOM_LEVELS.at(0)
+        },
+        react_default.createElement(ActionList.Text, null, "Zoom out"),
+        react_default.createElement(Shortcut, { keys: ["alt", "-"] })
+      )), react_default.createElement(ActionList.Item, { active: value === 0.5 }, react_default.createElement(ActionList.Action, { onClick: () => zoomTo(0.5), ariaLabel: "Zoom to 50%" }, react_default.createElement(ActionList.Text, null, "50%"))), react_default.createElement(ActionList.Item, { active: value === 1 }, react_default.createElement(ActionList.Action, { onClick: () => zoomTo(1), ariaLabel: "Zoom to 100%" }, react_default.createElement(ActionList.Text, null, "100%"), react_default.createElement(Shortcut, { keys: ["alt", "0"] }))), react_default.createElement(ActionList.Item, { active: value === 2 }, react_default.createElement(ActionList.Action, { onClick: () => zoomTo(2), ariaLabel: "Zoom to 200%" }, "200%"))))
     },
-    [set, value]
-  ), reset = useCallback(
-    (e2) => {
-      e2.preventDefault(), set(initialZoom);
+    react_default.createElement(
+      ZoomButton,
+      {
+        padding: "small",
+        variant: "ghost",
+        ariaLabel: "Change zoom level",
+        active: value !== INITIAL_ZOOM_LEVEL
+      },
+      Math.round(value * 100),
+      "%"
+    )
+  );
+}), ZoomWrapper = memo(function({ set, value }) {
+  let api = useStorybookApi(), zoomIn = useCallback(() => {
+    let higherZoomLevel = ZOOM_LEVELS.find((level) => level > value);
+    higherZoomLevel && set(higherZoomLevel);
+  }, [set, value]), zoomOut = useCallback(() => {
+    let lowerZoomLevel = ZOOM_LEVELS.findLast((level) => level < value);
+    lowerZoomLevel && set(lowerZoomLevel);
+  }, [set, value]), zoomTo = useCallback(
+    (value2) => {
+      set(value2);
     },
-    [set, initialZoom]
+    [set]
   );
-  return react_default.createElement(Zoom2, { key: "zoom", zoomIn, zoomOut, reset });
-});
-function ZoomToolRenderer() {
-  return react_default.createElement(react_default.Fragment, null, react_default.createElement(ZoomConsumer, null, ({ set, value }) => react_default.createElement(ZoomWrapper, { set, value })), react_default.createElement(Separator, null));
-}
-var zoomTool = {
+  return useEffect(() => {
+    api.setAddonShortcut("zoom", {
+      label: "Zoom to 100%",
+      defaultShortcut: ["alt", "0"],
+      actionName: "zoomReset",
+      action: () => zoomTo(1)
+    }), api.setAddonShortcut("zoom", {
+      label: "Zoom in",
+      defaultShortcut: ["alt", "="],
+      actionName: "zoomIn",
+      action: zoomIn
+    }), api.setAddonShortcut("zoom", {
+      label: "Zoom out",
+      defaultShortcut: ["alt", "-"],
+      actionName: "zoomOut",
+      action: zoomOut
+    });
+  }, [api, zoomIn, zoomOut, zoomTo]), react_default.createElement(Zoom2, { key: "zoom", value, zoomIn, zoomOut, zoomTo });
+}), zoomTool = {
   title: "zoom",
   id: "zoom",
   type: types.TOOL,
   match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
-  render: ZoomToolRenderer
+  render: () => react_default.createElement(ZoomConsumer, null, (zoomContext) => react_default.createElement(ZoomWrapper, { ...zoomContext }))
 };
 
 // src/manager/components/preview/Preview.tsx
@@ -5647,229 +6396,532 @@ var QRCodeSVG = react_default.forwardRef(
 );
 QRCodeSVG.displayName = "QRCodeSVG";
 
-// ../../node_modules/es-toolkit/dist/function/debounce.mjs
-function debounce(func, debounceMs, { signal, edges } = {}) {
-  let pendingThis, pendingArgs = null, leading = edges != null && edges.includes("leading"), trailing = edges == null || edges.includes("trailing"), invoke = () => {
-    pendingArgs !== null && (func.apply(pendingThis, pendingArgs), pendingThis = void 0, pendingArgs = null);
-  }, onTimerEnd = () => {
-    trailing && invoke(), cancel();
-  }, timeoutId = null, schedule = () => {
-    timeoutId != null && clearTimeout(timeoutId), timeoutId = setTimeout(() => {
-      timeoutId = null, onTimerEnd();
-    }, debounceMs);
-  }, cancelTimer = () => {
-    timeoutId !== null && (clearTimeout(timeoutId), timeoutId = null);
-  }, cancel = () => {
-    cancelTimer(), pendingThis = void 0, pendingArgs = null;
-  }, flush = () => {
-    invoke();
-  }, debounced = function(...args) {
-    if (signal?.aborted)
-      return;
-    pendingThis = this, pendingArgs = args;
-    let isFirstCall = timeoutId == null;
-    schedule(), leading && isFirstCall && invoke();
-  };
-  return debounced.schedule = schedule, debounced.cancel = cancel, debounced.flush = flush, signal?.addEventListener("abort", cancel, { once: !0 }), debounced;
-}
-
-// ../../node_modules/es-toolkit/dist/function/partial.mjs
-function partial(func, ...partialArgs) {
-  return partialImpl(func, placeholderSymbol, ...partialArgs);
-}
-function partialImpl(func, placeholder, ...partialArgs) {
-  let partialed = function(...providedArgs) {
-    let providedArgsIndex = 0, substitutedArgs = partialArgs.slice().map((arg) => arg === placeholder ? providedArgs[providedArgsIndex++] : arg), remainingArgs = providedArgs.slice(providedArgsIndex);
-    return func.apply(this, substitutedArgs.concat(remainingArgs));
-  };
-  return func.prototype && (partialed.prototype = Object.create(func.prototype)), partialed;
-}
-var placeholderSymbol = Symbol("partial.placeholder");
-partial.placeholder = placeholderSymbol;
-
-// ../../node_modules/es-toolkit/dist/function/partialRight.mjs
-function partialRight(func, ...partialArgs) {
-  return partialRightImpl(func, placeholderSymbol2, ...partialArgs);
-}
-function partialRightImpl(func, placeholder, ...partialArgs) {
-  let partialedRight = function(...providedArgs) {
-    let placeholderLength = partialArgs.filter((arg) => arg === placeholder).length, rangeLength = Math.max(providedArgs.length - placeholderLength, 0), remainingArgs = providedArgs.slice(0, rangeLength), providedArgsIndex = rangeLength, substitutedArgs = partialArgs.slice().map((arg) => arg === placeholder ? providedArgs[providedArgsIndex++] : arg);
-    return func.apply(this, remainingArgs.concat(substitutedArgs));
-  };
-  return func.prototype && (partialedRight.prototype = Object.create(func.prototype)), partialedRight;
-}
-var placeholderSymbol2 = Symbol("partialRight.placeholder");
-partialRight.placeholder = placeholderSymbol2;
-
-// ../../node_modules/es-toolkit/dist/function/retry.mjs
-var DEFAULT_RETRIES = Number.POSITIVE_INFINITY;
+// src/manager/components/preview/tools/share.tsx
+var mapper3 = ({ api, state }) => {
+  let { storyId, refId } = state;
+  return { api, refId, storyId };
+}, QRContainer = styled.div(() => ({
+  display: "flex",
+  alignItems: "center",
+  padding: 8,
+  maxWidth: 200
+})), QRImageContainer = styled.div(() => ({
+  width: 64,
+  height: 64,
+  marginRight: 12,
+  backgroundColor: "white",
+  padding: 2
+})), QRImage = ({ value }) => {
+  let theme = useTheme();
+  return react_default.createElement(QRImageContainer, null, react_default.createElement(QRCodeSVG, { value, marginSize: 0, size: 60, fgColor: theme.color.darkest }));
+}, QRContent = styled.div(() => ({})), QRTitle = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.bold,
+  fontSize: theme.typography.size.s1,
+  marginBottom: 4
+})), QRDescription = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.textMutedColor
+})), ShareMenu = react_default.memo(function({
+  api,
+  storyId,
+  refId
+}) {
+  let shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, [copied, setCopied] = useState(!1), copyStoryLink = shortcutKeys?.copyStoryLink, openInIsolation = shortcutKeys?.openInIsolation, links = useMemo(() => {
+    let copyTitle = copied ? "Copied!" : "Copy story link", originHrefs = api.getStoryHrefs(storyId, { base: "origin", refId }), networkHrefs = api.getStoryHrefs(storyId, { base: "network", refId });
+    return [
+      [
+        {
+          id: "copy-link",
+          title: copyTitle,
+          icon: react_default.createElement(LinkIcon, null),
+          right: enableShortcuts ? react_default.createElement(Shortcut, { keys: copyStoryLink }) : null,
+          onClick: () => {
+            (0, import_copy_to_clipboard.default)(originHrefs.managerHref), setCopied(!0), setTimeout(() => setCopied(!1), 2e3);
+          }
+        },
+        {
+          id: "open-new-tab",
+          title: "Open in isolation mode",
+          icon: react_default.createElement(ShareAltIcon, null),
+          right: enableShortcuts ? react_default.createElement(Shortcut, { keys: openInIsolation }) : null,
+          href: originHrefs.previewHref,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }
+      ],
+      [
+        {
+          id: "qr-section",
+          content: react_default.createElement(QRContainer, null, react_default.createElement(QRImage, { value: networkHrefs.managerHref }), react_default.createElement(QRContent, null, react_default.createElement(QRTitle, null, "Scan to open"), react_default.createElement(QRDescription, null, scope.CONFIG_TYPE === "DEVELOPMENT" ? "Device must be on the same network." : "View story on another device.")))
+        }
+      ]
+    ];
+  }, [api, storyId, refId, copied, enableShortcuts, copyStoryLink, openInIsolation]);
+  return react_default.createElement(TooltipLinkList, { links, style: { width: 240 } });
+}), shareTool = {
+  title: "share",
+  id: "share",
+  type: types.TOOL,
+  match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
+  render: () => react_default.createElement(Consumer, { filter: mapper3 }, ({ api, storyId, refId }) => storyId ? react_default.createElement(
+    PopoverProvider,
+    {
+      hasChrome: !0,
+      placement: "bottom",
+      padding: 0,
+      popover: react_default.createElement(ShareMenu, { api, storyId, refId })
+    },
+    react_default.createElement(Button, { padding: "small", variant: "ghost", ariaLabel: "Share", tooltip: "Share..." }, react_default.createElement(ShareIcon, null))
+  ) : null)
+};
 
-// ../../node_modules/es-toolkit/dist/function/throttle.mjs
-function throttle(func, throttleMs, { signal, edges = ["leading", "trailing"] } = {}) {
-  let pendingAt = null, debounced = debounce(function(...args) {
-    pendingAt = Date.now(), func.apply(this, args);
-  }, throttleMs, { signal, edges }), throttled = function(...args) {
-    if (pendingAt == null && (pendingAt = Date.now()), Date.now() - pendingAt >= throttleMs) {
-      pendingAt = Date.now(), func.apply(this, args), debounced.cancel(), debounced.schedule();
-      return;
-    }
-    debounced.apply(this, args);
+// src/manager/container/Preview.tsx
+var defaultTabs = [createCanvasTab()], defaultTools = [menuTool, remountTool], defaultToolsExtra = [zoomTool, addonsTool, fullScreenTool, shareTool, openInEditorTool], emptyTabsList = [], memoizedTabs = (0, import_memoizerific.default)(1)(
+  (_2, tabElements, parameters, showTabs) => showTabs ? filterTabs([...defaultTabs, ...Object.values(tabElements)], parameters) : emptyTabsList
+), memoizedTools = (0, import_memoizerific.default)(1)(
+  (_2, toolElements, filterProps) => filterToolsSide([...defaultTools, ...Object.values(toolElements)], ...filterProps)
+), memoizedExtra = (0, import_memoizerific.default)(1)(
+  (_2, extraElements, filterProps) => filterToolsSide([...defaultToolsExtra, ...Object.values(extraElements)], ...filterProps)
+), memoizedWrapper = (0, import_memoizerific.default)(1)((_2, previewElements) => [
+  ...defaultWrappers,
+  ...Object.values(previewElements)
+]), { PREVIEW_URL } = scope, splitTitleAddExtraSpace = (input) => input.split("/").join(" / ").replace(/\s\s/, " "), getDescription = (item) => {
+  if (item?.type === "story" || item?.type === "docs") {
+    let { title: title2, name } = item;
+    return title2 && name ? splitTitleAddExtraSpace(`${title2} - ${name} \u22C5 Storybook`) : "Storybook";
+  }
+  return item?.name ? `${item.name} \u22C5 Storybook` : "Storybook";
+}, mapper4 = ({
+  api,
+  state
+  // @ts-expect-error (non strict)
+}) => {
+  let { layout, location: location2, customQueryParams, storyId, refs, viewMode, path, refId } = state, entry = api.getData(storyId, refId), tabsList = Object.values(api.getElements(Addon_TypesEnum.TAB)), wrapperList = Object.values(api.getElements(Addon_TypesEnum.PREVIEW)), toolsList = Object.values(api.getElements(Addon_TypesEnum.TOOL)), toolsExtraList = Object.values(api.getElements(Addon_TypesEnum.TOOLEXTRA)), tabId = api.getQueryParam("tab"), tools = memoizedTools(toolsList.length, api.getElements(Addon_TypesEnum.TOOL), [
+    entry,
+    viewMode,
+    location2,
+    path,
+    // @ts-expect-error (non strict)
+    tabId
+  ]), toolsExtra = memoizedExtra(
+    toolsExtraList.length,
+    api.getElements(Addon_TypesEnum.TOOLEXTRA),
+    // @ts-expect-error (non strict)
+    [entry, viewMode, location2, path, tabId]
+  );
+  return {
+    api,
+    entry,
+    options: layout,
+    description: getDescription(entry),
+    viewMode,
+    refs,
+    storyId,
+    baseUrl: PREVIEW_URL || "iframe.html",
+    queryParams: customQueryParams,
+    tools,
+    toolsExtra,
+    tabs: memoizedTabs(
+      tabsList.length,
+      api.getElements(Addon_TypesEnum.TAB),
+      entry ? entry.parameters : void 0,
+      layout.showTabs
+    ),
+    wrappers: memoizedWrapper(
+      wrapperList.length,
+      api.getElements(Addon_TypesEnum.PREVIEW)
+    ),
+    tabId
   };
-  return throttled.cancel = debounced.cancel, throttled.flush = debounced.flush, throttled;
-}
-
-// ../addons/a11y/src/constants.ts
-var ADDON_ID = "storybook/a11y", PANEL_ID = `${ADDON_ID}/panel`;
-var UI_STATE_ID = `${ADDON_ID}/ui`, RESULT = `${ADDON_ID}/result`, REQUEST = `${ADDON_ID}/request`, RUNNING = `${ADDON_ID}/running`, ERROR = `${ADDON_ID}/error`, MANUAL = `${ADDON_ID}/manual`, SELECT = `${ADDON_ID}/select`, DOCUMENTATION_LINK = "writing-tests/accessibility-testing", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
-
-// ../addons/onboarding/src/constants.ts
-var ADDON_ID2 = "storybook/onboarding", ADDON_ONBOARDING_CHANNEL = `${ADDON_ID2}/channel`;
-
-// src/component-testing/constants.ts
-var ADDON_ID3 = "storybook/interactions", PANEL_ID2 = `${ADDON_ID3}/panel`;
-var DOCUMENTATION_LINK2 = "writing-tests/integrations/vitest-addon", DOCUMENTATION_DISCREPANCY_LINK2 = `${DOCUMENTATION_LINK2}#what-happens-when-there-are-different-test-results-in-multiple-environments`;
+}, PreviewConnected = react_default.memo(function(props) {
+  return react_default.createElement(Consumer, { filter: mapper4 }, (fromState) => react_default.createElement(Preview, { ...props, ...fromState }));
+}), Preview_default = PreviewConnected;
 
-// ../addons/vitest/src/constants.ts
-var ADDON_ID4 = "storybook/test", TEST_PROVIDER_ID = `${ADDON_ID4}/test-provider`, STORYBOOK_ADDON_TEST_CHANNEL = `${ADDON_ID4}/channel`;
-var DOCUMENTATION_LINK3 = "writing-tests/integrations/vitest-addon", DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK3}#what-happens-if-vitest-itself-has-an-error`;
-var storeOptions = {
-  id: ADDON_ID4,
-  initialState: {
-    config: {
-      coverage: !1,
-      a11y: !1
-    },
-    watching: !1,
-    cancelling: !1,
-    fatalError: void 0,
-    indexUrl: void 0,
-    previewAnnotations: [],
-    currentRun: {
-      triggeredBy: void 0,
-      config: {
-        coverage: !1,
-        a11y: !1
-      },
-      componentTestCount: {
-        success: 0,
-        error: 0
-      },
-      a11yCount: {
-        success: 0,
-        warning: 0,
-        error: 0
-      },
-      storyIds: void 0,
-      totalTestCount: void 0,
-      startedAt: void 0,
-      finishedAt: void 0,
-      unhandledErrors: [],
-      coverageSummary: void 0
+// src/manager/components/Optional/Optional.tsx
+var Wrapper3 = styled.div({
+  display: "inline-grid",
+  gridTemplateColumns: "max-content",
+  overflow: "hidden"
+}), Content2 = styled.div(({ isHidden }) => ({
+  display: "inline-block",
+  gridArea: "1/1",
+  opacity: isHidden === null ? 0 : 1,
+  visibility: isHidden ? "hidden" : "visible"
+})), Optional = ({
+  content,
+  fallback
+}) => {
+  let contentRef = useRef(null), wrapperRef = useRef(null), [hidden, setHidden] = useState(null), contentWidth = useRef(contentRef.current?.offsetWidth ?? 0), wrapperWidth = useRef(wrapperRef.current?.offsetWidth ?? 0);
+  return useEffect(() => {
+    if (contentRef.current && wrapperRef.current) {
+      let resizeObserver = new ResizeObserver(() => {
+        wrapperWidth.current = wrapperRef.current?.offsetWidth || wrapperWidth.current, contentWidth.current = contentRef.current?.offsetWidth || contentWidth.current, setHidden(contentWidth.current > wrapperWidth.current);
+      });
+      return resizeObserver.observe(wrapperRef.current), () => resizeObserver.disconnect();
     }
-  }
+  }, []), react_default.createElement(Wrapper3, { ref: wrapperRef }, react_default.createElement(Content2, { isHidden: hidden, ref: contentRef }, content), fallback && react_default.createElement(Content2, { isHidden: !hidden }, fallback));
 };
-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 */,
-  "solid" /* SOLID */,
-  "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`;
-
-// ../../node_modules/@gilbarbara/deep-equal/dist/index.mjs
-function isOfType(type) {
-  return (value) => typeof value === type;
-}
-var isFunction = isOfType("function"), isNull = (value) => value === null, isRegex = (value) => Object.prototype.toString.call(value).slice(8, -1) === "RegExp", isObject = (value) => !isUndefined(value) && !isNull(value) && (isFunction(value) || typeof value == "object"), isUndefined = isOfType("undefined");
-function equalArray(left, right) {
-  let { length } = left;
-  if (length !== right.length)
-    return !1;
-  for (let index = length; index-- !== 0; )
-    if (!equal(left[index], right[index]))
-      return !1;
-  return !0;
-}
-function equalArrayBuffer(left, right) {
-  if (left.byteLength !== right.byteLength)
-    return !1;
-  let view1 = new DataView(left.buffer), view2 = new DataView(right.buffer), index = left.byteLength;
-  for (; index--; )
-    if (view1.getUint8(index) !== view2.getUint8(index))
-      return !1;
-  return !0;
+// src/manager/components/Particles/Particles.tsx
+var Shape = styled.svg(({ color: color2 }) => ({
+  fill: color2,
+  position: "absolute",
+  inset: "0",
+  margin: "auto",
+  width: "12px",
+  height: "12px",
+  pointerEvents: "none"
+})), Donut = (props) => react_default.createElement(Shape, { viewBox: "0 0 90 90", xmlns: "http://www.w3.org/2000/svg", color: "red", ...props }, react_default.createElement("path", { d: "M45 0c24.853 0 45 20.147 45 45S69.853 90 45 90 0 69.853 0 45 20.147 0 45 0zm.5 27C35.283 27 27 35.283 27 45.5S35.283 64 45.5 64 64 55.717 64 45.5 55.717 27 45.5 27z" })), L2 = (props) => react_default.createElement(Shape, { viewBox: "0 0 55 89", xmlns: "http://www.w3.org/2000/svg", color: "#66BF3C", ...props }, react_default.createElement("path", { d: "M55 3v83a3 3 0 01-3 3H3a3 3 0 01-3-3V64a3 3 0 013-3h21a3 3 0 003-3V3a3 3 0 013-3h22a3 3 0 013 3z" })), Slice = (props) => react_default.createElement(Shape, { viewBox: "0 0 92 92", xmlns: "http://www.w3.org/2000/svg", color: "#FF4785", ...props }, react_default.createElement("path", { d: "M92 89V3c0-3-2.056-3-3-3C39.294 0 0 39.294 0 89c0 0 0 3 3 3h86a3 3 0 003-3z" })), Square = ({ style, ...props }) => react_default.createElement(
+  Shape,
+  {
+    viewBox: "0 0 90 90",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: "#1EA7FD",
+    ...props,
+    style: { borderRadius: 5, ...style }
+  },
+  react_default.createElement("path", { d: "M0 0h90v90H0z" })
+), Triangle = (props) => react_default.createElement(Shape, { viewBox: "0 0 96 88", xmlns: "http://www.w3.org/2000/svg", color: "#FFAE00", ...props }, react_default.createElement("path", { d: "M50.63 1.785l44.928 81.77A3 3 0 0192.928 88H3.072a3 3 0 01-2.629-4.445l44.929-81.77a3 3 0 015.258 0z" })), T2 = (props) => react_default.createElement(Shape, { viewBox: "0 0 92 62", xmlns: "http://www.w3.org/2000/svg", color: "#FC521F", ...props }, react_default.createElement("path", { d: "M63 3v25a3 3 0 003 3h23a3 3 0 013 3v25a3 3 0 01-3 3H3a3 3 0 01-3-3V34a3 3 0 013-3h24a3 3 0 003-3V3a3 3 0 013-3h27a3 3 0 013 3z" })), Z = (props) => react_default.createElement(Shape, { viewBox: "0 0 56 90", xmlns: "http://www.w3.org/2000/svg", color: "#6F2CAC", ...props }, react_default.createElement("path", { d: "M28 3v25a3 3 0 003 3h22a3 3 0 013 3v53a3 3 0 01-3 3H31a3 3 0 01-3-3V62a3 3 0 00-3-3H3a3 3 0 01-3-3V3a3 3 0 013-3h22a3 3 0 013 3z" })), fadeToTransparent = keyframes`
+  to {
+    opacity: 0;
+  }
+`, disperse = keyframes`
+  to {
+    transform: translate(
+      calc(cos(var(--angle)) * var(--distance)),
+      calc(sin(var(--angle)) * var(--distance))
+    ) rotate(var(--rotation));
+  }
+`, slideDown = keyframes`
+  to {
+    transform: translateY(50px);
+  }
+`, Container5 = styled.div({
+  position: "absolute",
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  gap: 10,
+  "--particle-curve": "cubic-bezier(0.2, 0.56, 0, 1)",
+  animation: `${slideDown} 1000ms forwards cubic-bezier(0.587, -0.381, 0.583, 0.599)`,
+  animationDelay: "150ms",
+  zIndex: 999,
+  svg: {
+    width: 15,
+    height: 15,
+    animation: `${fadeToTransparent} var(--fade-duration) forwards, ${disperse} 1000ms forwards var(--particle-curve)`
+  }
+}), FADE_DURATION = 1200, NUM_OF_PARTICLES = 8, JITTER = 15, random = (min, max) => Math.random() * (max - min) + min, sortRandomly = (array) => array.sort(() => Math.random() - 0.5), Particles = memo(function({
+  anchor: Anchor
+}) {
+  let anchorRef = useRef(null), [left, setLeft] = useState(0), [top, setTop] = useState(0), shapes = sortRandomly([Donut, L2, Slice, Square, Triangle, T2, Z]), colors = sortRandomly([
+    "#FF0000",
+    "#FF4787",
+    "#66BF3C",
+    "#1EA7FD",
+    "#FC521F",
+    "#6F2CAC",
+    "#FFAE00"
+  ]);
+  return useLayoutEffect(() => {
+    let rect = anchorRef.current?.getBoundingClientRect();
+    rect && (setLeft(rect.left + rect.width / 2), setTop(rect.top + rect.height / 2));
+  }, []), react_default.createElement("div", { ref: anchorRef }, react_default.createElement(Anchor, null), createPortal(
+    react_default.createElement(Container5, { style: { top: top + "px", left: left + "px" } }, shapes.map((Particle, index) => {
+      let angle = 360 / NUM_OF_PARTICLES * index + random(-JITTER, JITTER), distance = random(50, 80), rotation = random(-360, 360), style = {
+        "--angle": angle + "deg",
+        "--distance": distance + "px",
+        "--rotation": rotation + "deg",
+        "--fade-duration": FADE_DURATION + "ms"
+      };
+      return react_default.createElement(Particle, { key: Particle.name, style, color: colors[index] });
+    })),
+    document.getElementById("root") ?? document.body
+  ));
+});
+
+// src/manager/components/TextFlip.tsx
+var slideIn2 = keyframes({
+  from: {
+    transform: "translateY(var(--slide-in-from))",
+    opacity: 0
+  }
+}), slideOut = keyframes({
+  to: {
+    transform: "translateY(var(--slide-out-to))",
+    opacity: 0
+  }
+}), Container6 = styled.div({
+  display: "inline-grid",
+  gridTemplateColumns: "1fr",
+  justifyContent: "center",
+  alignItems: "center"
+}), Placeholder2 = styled.div({
+  gridArea: "1 / 1",
+  userSelect: "none",
+  visibility: "hidden"
+}), Text2 = styled.span(({ duration, isExiting, isEntering, reverse }) => {
+  let animation;
+  return isExiting ? animation = `${slideOut} ${duration}ms forwards` : isEntering && (animation = `${slideIn2} ${duration}ms forwards`), {
+    gridArea: "1 / 1",
+    animation,
+    pointerEvents: isExiting ? "none" : "auto",
+    userSelect: isExiting ? "none" : "text",
+    "--slide-in-from": reverse ? "-100%" : "100%",
+    "--slide-out-to": reverse ? "100%" : "-100%",
+    "@media (prefers-reduced-motion: reduce)": {
+      animation: "none",
+      opacity: isExiting ? 0 : 1,
+      transform: "translateY(0)"
+    }
+  };
+}), TextFlip = ({
+  text,
+  duration = 250,
+  placeholder,
+  ...props
+}) => {
+  let textRef = useRef(text), [staleValue, setStaleValue] = useState(text), isAnimating = text !== staleValue, reverse = isAnimating && numericCompare(staleValue, text);
+  return textRef.current = text, react_default.createElement(Container6, { ...props }, isAnimating && react_default.createElement(
+    Text2,
+    {
+      "aria-hidden": !0,
+      duration,
+      reverse,
+      isExiting: !0,
+      onAnimationEnd: () => setStaleValue(textRef.current)
+    },
+    staleValue
+  ), react_default.createElement(Text2, { duration, reverse, isEntering: isAnimating }, text), placeholder && react_default.createElement(Placeholder2, { "aria-hidden": !0 }, placeholder));
+};
+function numericCompare(a2, b2) {
+  let na = Number(a2), nb = Number(b2);
+  return Number.isNaN(na) || Number.isNaN(nb) ? a2.localeCompare(b2, void 0, { numeric: !0 }) > 0 : na > nb;
 }
-function equalMap(left, right) {
-  if (left.size !== right.size)
-    return !1;
-  for (let index of left.entries())
-    if (!right.has(index[0]))
-      return !1;
-  for (let index of left.entries())
-    if (!equal(index[1], right.get(index[0])))
-      return !1;
-  return !0;
+
+// ../../node_modules/es-toolkit/dist/function/debounce.mjs
+function debounce(func, debounceMs, { signal, edges } = {}) {
+  let pendingThis, pendingArgs = null, leading = edges != null && edges.includes("leading"), trailing = edges == null || edges.includes("trailing"), invoke = () => {
+    pendingArgs !== null && (func.apply(pendingThis, pendingArgs), pendingThis = void 0, pendingArgs = null);
+  }, onTimerEnd = () => {
+    trailing && invoke(), cancel();
+  }, timeoutId = null, schedule = () => {
+    timeoutId != null && clearTimeout(timeoutId), timeoutId = setTimeout(() => {
+      timeoutId = null, onTimerEnd();
+    }, debounceMs);
+  }, cancelTimer = () => {
+    timeoutId !== null && (clearTimeout(timeoutId), timeoutId = null);
+  }, cancel = () => {
+    cancelTimer(), pendingThis = void 0, pendingArgs = null;
+  }, flush = () => {
+    invoke();
+  }, debounced = function(...args) {
+    if (signal?.aborted)
+      return;
+    pendingThis = this, pendingArgs = args;
+    let isFirstCall = timeoutId == null;
+    schedule(), leading && isFirstCall && invoke();
+  };
+  return debounced.schedule = schedule, debounced.cancel = cancel, debounced.flush = flush, signal?.addEventListener("abort", cancel, { once: !0 }), debounced;
 }
-function equalSet(left, right) {
-  if (left.size !== right.size)
-    return !1;
-  for (let index of left.entries())
-    if (!right.has(index[0]))
-      return !1;
-  return !0;
+
+// ../../node_modules/es-toolkit/dist/function/partial.mjs
+function partial(func, ...partialArgs) {
+  return partialImpl(func, placeholderSymbol, ...partialArgs);
 }
-function equal(left, right) {
-  if (left === right)
-    return !0;
-  if (left && isObject(left) && right && isObject(right)) {
-    if (left.constructor !== right.constructor)
-      return !1;
-    if (Array.isArray(left) && Array.isArray(right))
-      return equalArray(left, right);
-    if (left instanceof Map && right instanceof Map)
-      return equalMap(left, right);
-    if (left instanceof Set && right instanceof Set)
-      return equalSet(left, right);
-    if (ArrayBuffer.isView(left) && ArrayBuffer.isView(right))
-      return equalArrayBuffer(left, right);
-    if (isRegex(left) && isRegex(right))
-      return left.source === right.source && left.flags === right.flags;
-    if (left.valueOf !== Object.prototype.valueOf)
-      return left.valueOf() === right.valueOf();
-    if (left.toString !== Object.prototype.toString)
-      return left.toString() === right.toString();
-    let leftKeys = Object.keys(left), rightKeys = Object.keys(right);
-    if (leftKeys.length !== rightKeys.length)
-      return !1;
-    for (let index = leftKeys.length; index-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(right, leftKeys[index]))
-        return !1;
-    for (let index = leftKeys.length; index-- !== 0; ) {
-      let key = leftKeys[index];
-      if (!(key === "_owner" && left.$$typeof) && !equal(left[key], right[key]))
-        return !1;
+function partialImpl(func, placeholder, ...partialArgs) {
+  let partialed = function(...providedArgs) {
+    let providedArgsIndex = 0, substitutedArgs = partialArgs.slice().map((arg) => arg === placeholder ? providedArgs[providedArgsIndex++] : arg), remainingArgs = providedArgs.slice(providedArgsIndex);
+    return func.apply(this, substitutedArgs.concat(remainingArgs));
+  };
+  return func.prototype && (partialed.prototype = Object.create(func.prototype)), partialed;
+}
+var placeholderSymbol = Symbol("partial.placeholder");
+partial.placeholder = placeholderSymbol;
+
+// ../../node_modules/es-toolkit/dist/function/partialRight.mjs
+function partialRight(func, ...partialArgs) {
+  return partialRightImpl(func, placeholderSymbol2, ...partialArgs);
+}
+function partialRightImpl(func, placeholder, ...partialArgs) {
+  let partialedRight = function(...providedArgs) {
+    let placeholderLength = partialArgs.filter((arg) => arg === placeholder).length, rangeLength = Math.max(providedArgs.length - placeholderLength, 0), remainingArgs = providedArgs.slice(0, rangeLength), providedArgsIndex = rangeLength, substitutedArgs = partialArgs.slice().map((arg) => arg === placeholder ? providedArgs[providedArgsIndex++] : arg);
+    return func.apply(this, remainingArgs.concat(substitutedArgs));
+  };
+  return func.prototype && (partialedRight.prototype = Object.create(func.prototype)), partialedRight;
+}
+var placeholderSymbol2 = Symbol("partialRight.placeholder");
+partialRight.placeholder = placeholderSymbol2;
+
+// ../../node_modules/es-toolkit/dist/function/retry.mjs
+var DEFAULT_RETRIES = Number.POSITIVE_INFINITY;
+
+// ../../node_modules/es-toolkit/dist/function/throttle.mjs
+function throttle(func, throttleMs, { signal, edges = ["leading", "trailing"] } = {}) {
+  let pendingAt = null, debounced = debounce(function(...args) {
+    pendingAt = Date.now(), func.apply(this, args);
+  }, throttleMs, { signal, edges }), throttled = function(...args) {
+    if (pendingAt == null && (pendingAt = Date.now()), Date.now() - pendingAt >= throttleMs) {
+      pendingAt = Date.now(), func.apply(this, args), debounced.cancel(), debounced.schedule();
+      return;
     }
-    return !0;
-  }
-  return Number.isNaN(left) && Number.isNaN(right) ? !0 : left === right;
+    debounced.apply(this, args);
+  };
+  return throttled.cancel = debounced.cancel, throttled.flush = debounced.flush, throttled;
 }
 
-// ../../node_modules/is-lite/dist/index.mjs
-var objectTypes = [
-  "Array",
-  "ArrayBuffer",
+// ../addons/a11y/src/constants.ts
+var ADDON_ID2 = "storybook/a11y", PANEL_ID2 = `${ADDON_ID2}/panel`;
+var UI_STATE_ID = `${ADDON_ID2}/ui`, RESULT = `${ADDON_ID2}/result`, REQUEST = `${ADDON_ID2}/request`, RUNNING = `${ADDON_ID2}/running`, ERROR = `${ADDON_ID2}/error`, MANUAL = `${ADDON_ID2}/manual`, SELECT = `${ADDON_ID2}/select`, DOCUMENTATION_LINK = "writing-tests/accessibility-testing", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
+
+// ../addons/onboarding/src/constants.ts
+var ADDON_ID3 = "storybook/onboarding", ADDON_ONBOARDING_CHANNEL = `${ADDON_ID3}/channel`;
+
+// src/component-testing/constants.ts
+var ADDON_ID4 = "storybook/interactions", PANEL_ID3 = `${ADDON_ID4}/panel`;
+var DOCUMENTATION_LINK2 = "writing-tests/integrations/vitest-addon", DOCUMENTATION_DISCREPANCY_LINK2 = `${DOCUMENTATION_LINK2}#what-happens-when-there-are-different-test-results-in-multiple-environments`;
+
+// ../addons/vitest/src/constants.ts
+var ADDON_ID5 = "storybook/test", TEST_PROVIDER_ID = `${ADDON_ID5}/test-provider`, STORYBOOK_ADDON_TEST_CHANNEL = `${ADDON_ID5}/channel`;
+var DOCUMENTATION_LINK3 = "writing-tests/integrations/vitest-addon", DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK3}#what-happens-if-vitest-itself-has-an-error`;
+var storeOptions = {
+  id: ADDON_ID5,
+  initialState: {
+    config: {
+      coverage: !1,
+      a11y: !1
+    },
+    watching: !1,
+    cancelling: !1,
+    fatalError: void 0,
+    indexUrl: void 0,
+    previewAnnotations: [],
+    currentRun: {
+      triggeredBy: void 0,
+      config: {
+        coverage: !1,
+        a11y: !1
+      },
+      componentTestCount: {
+        success: 0,
+        error: 0
+      },
+      a11yCount: {
+        success: 0,
+        warning: 0,
+        error: 0
+      },
+      storyIds: void 0,
+      totalTestCount: void 0,
+      startedAt: void 0,
+      finishedAt: void 0,
+      unhandledErrors: [],
+      coverageSummary: void 0
+    }
+  }
+};
+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 */,
+  "solid" /* SOLID */,
+  "svelte-vite" /* SVELTE_VITE */,
+  "sveltekit" /* SVELTEKIT */,
+  "vue3-vite" /* VUE3_VITE */,
+  "web-components-vite" /* WEB_COMPONENTS_VITE */
+];
+
+// src/docs-tools/shared.ts
+var ADDON_ID6 = "storybook/docs", PANEL_ID4 = `${ADDON_ID6}/panel`;
+var SNIPPET_RENDERED = `${ADDON_ID6}/snippet-rendered`;
+
+// ../../node_modules/@gilbarbara/deep-equal/dist/index.mjs
+function isOfType(type) {
+  return (value) => typeof value === type;
+}
+var isFunction = isOfType("function"), isNull = (value) => value === null, isRegex = (value) => Object.prototype.toString.call(value).slice(8, -1) === "RegExp", isObject = (value) => !isUndefined(value) && !isNull(value) && (isFunction(value) || typeof value == "object"), isUndefined = isOfType("undefined");
+function equalArray(left, right) {
+  let { length } = left;
+  if (length !== right.length)
+    return !1;
+  for (let index = length; index-- !== 0; )
+    if (!equal(left[index], right[index]))
+      return !1;
+  return !0;
+}
+function equalArrayBuffer(left, right) {
+  if (left.byteLength !== right.byteLength)
+    return !1;
+  let view1 = new DataView(left.buffer), view2 = new DataView(right.buffer), index = left.byteLength;
+  for (; index--; )
+    if (view1.getUint8(index) !== view2.getUint8(index))
+      return !1;
+  return !0;
+}
+function equalMap(left, right) {
+  if (left.size !== right.size)
+    return !1;
+  for (let index of left.entries())
+    if (!right.has(index[0]))
+      return !1;
+  for (let index of left.entries())
+    if (!equal(index[1], right.get(index[0])))
+      return !1;
+  return !0;
+}
+function equalSet(left, right) {
+  if (left.size !== right.size)
+    return !1;
+  for (let index of left.entries())
+    if (!right.has(index[0]))
+      return !1;
+  return !0;
+}
+function equal(left, right) {
+  if (left === right)
+    return !0;
+  if (left && isObject(left) && right && isObject(right)) {
+    if (left.constructor !== right.constructor)
+      return !1;
+    if (Array.isArray(left) && Array.isArray(right))
+      return equalArray(left, right);
+    if (left instanceof Map && right instanceof Map)
+      return equalMap(left, right);
+    if (left instanceof Set && right instanceof Set)
+      return equalSet(left, right);
+    if (ArrayBuffer.isView(left) && ArrayBuffer.isView(right))
+      return equalArrayBuffer(left, right);
+    if (isRegex(left) && isRegex(right))
+      return left.source === right.source && left.flags === right.flags;
+    if (left.valueOf !== Object.prototype.valueOf)
+      return left.valueOf() === right.valueOf();
+    if (left.toString !== Object.prototype.toString)
+      return left.toString() === right.toString();
+    let leftKeys = Object.keys(left), rightKeys = Object.keys(right);
+    if (leftKeys.length !== rightKeys.length)
+      return !1;
+    for (let index = leftKeys.length; index-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(right, leftKeys[index]))
+        return !1;
+    for (let index = leftKeys.length; index-- !== 0; ) {
+      let key = leftKeys[index];
+      if (!(key === "_owner" && left.$$typeof) && !equal(left[key], right[key]))
+        return !1;
+    }
+    return !0;
+  }
+  return Number.isNaN(left) && Number.isNaN(right) ? !0 : left === right;
+}
+
+// ../../node_modules/is-lite/dist/index.mjs
+var objectTypes = [
+  "Array",
+  "ArrayBuffer",
   "AsyncFunction",
   "AsyncGenerator",
   "AsyncGeneratorFunction",
@@ -9714,7 +10766,7 @@ function HighlightElement({
 var ONBOARDING_ARROW_STYLE_ID = "storybook-onboarding-arrow-style", TooltipBody = styled.div`
   padding: 15px;
   border-radius: 5px;
-`, Wrapper = styled.div`
+`, Wrapper4 = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -9778,7 +10830,7 @@ var ONBOARDING_ARROW_STYLE_ID = "storybook-onboarding-arrow-style", TooltipBody
         .__floater__arrow span { flex-direction: column; }
       }
     `, document.head.appendChild(style), () => document.getElementById(ONBOARDING_ARROW_STYLE_ID)?.remove();
-}, []), react_default.createElement(TooltipBody, { ...tooltipProps, style: step.styles?.tooltip }, react_default.createElement(Wrapper, null, react_default.createElement(TooltipHeader, null, step.title && react_default.createElement(TooltipTitle, null, step.title), react_default.createElement(
+}, []), react_default.createElement(TooltipBody, { ...tooltipProps, style: step.styles?.tooltip }, react_default.createElement(Wrapper4, null, react_default.createElement(TooltipHeader, null, step.title && react_default.createElement(TooltipTitle, null, step.title), react_default.createElement(
   Button,
   {
     ...closeProps,
@@ -9943,7 +10995,7 @@ var CodeWrapper = styled.div(({ theme }) => ({
         {
           id: "guidedTour",
           label: "Take the guided tour",
-          available: ({ index }) => !!index && "example-button--primary" in index && !!globalThis?.FEATURES?.controls && addons.experimental_getRegisteredAddons().includes(ADDON_ID2),
+          available: ({ index }) => !!index && "example-button--primary" in index && !!globalThis?.FEATURES?.controls && addons.experimental_getRegisteredAddons().includes(ADDON_ID3),
           criteria: "Guided tour is completed",
           subscribe: ({ api, accept }) => api.on(ADDON_ONBOARDING_CHANNEL, ({ step, type }) => {
             type !== "dismiss" && ["6:IntentSurvey", "7:FinishedOnboarding"].includes(step) && accept();
@@ -9959,7 +11011,7 @@ var CodeWrapper = styled.div(({ theme }) => ({
         {
           id: "onboardingSurvey",
           label: "Complete the onboarding survey",
-          available: () => addons.experimental_getRegisteredAddons().includes(ADDON_ID2),
+          available: () => addons.experimental_getRegisteredAddons().includes(ADDON_ID3),
           afterCompletion: "immutable",
           criteria: "Onboarding survey is completed",
           subscribe: ({ api, accept }) => api.on(ADDON_ONBOARDING_CHANNEL, ({ type }) => type === "survey" && accept()),
@@ -10219,7 +11271,7 @@ export default {
           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();
+            addons.experimental_getRegisteredAddons().includes(ADDON_ID5) && done();
           },
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Run this command to install the Vitest addon, enabling you to run component tests on your stories inside Storybook\u2019s UI:"), react_default.createElement(CodeSnippet, { language: "bash" }, "npx storybook add @storybook/addon-vitest"), react_default.createElement("p", null, react_default.createElement("em", null, "Restart your Storybook after installing the addon.")), react_default.createElement(
             "img",
@@ -10382,7 +11434,7 @@ export const Disabled: Story = {
           afterCompletion: "unavailable",
           criteria: "@storybook/addon-a11y registered in .storybook/main.js|ts",
           subscribe: ({ done }) => {
-            addons.experimental_getRegisteredAddons().includes(ADDON_ID) && done();
+            addons.experimental_getRegisteredAddons().includes(ADDON_ID2) && done();
           },
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Accessibility tests help ensure your UI is usable by everyone, no matter their ability."), react_default.createElement("p", null, "If you are not yet using the accessibility addon, run this command to install and set it up, enabling you to run accessibility checks alongside your component tests:"), react_default.createElement(CodeSnippet, { language: "bash" }, "npx storybook add @storybook/addon-a11y"), react_default.createElement("p", null, react_default.createElement("em", null, "Restart your Storybook after installing the addon.")), react_default.createElement("p", null, react_default.createElement(
             Link,
@@ -10568,7 +11620,7 @@ export const Disabled: Story = {
           afterCompletion: "unavailable",
           criteria: "@storybook/addon-docs registered in .storybook/main.js|ts",
           subscribe: ({ done }) => {
-            addons.experimental_getRegisteredAddons().includes(ADDON_ID5) && done();
+            addons.experimental_getRegisteredAddons().includes(ADDON_ID6) && done();
           },
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook Docs transforms your Storybook stories into component documentation. Add the Docs addon to your Storybook project to get started:"), react_default.createElement(CodeSnippet, { language: "bash" }, "npx storybook add @storybook/addon-docs"), react_default.createElement("p", null, react_default.createElement("em", null, "Restart your Storybook after installing the addon.")), react_default.createElement("p", null, react_default.createElement(
             Link,
@@ -10749,529 +11801,45 @@ var subscriptions = /* @__PURE__ */ new Map(), useStoryIndex = () => {
     let availableItems = allItems.filter((item) => item.isAvailable), openItems = availableItems.filter((item) => item.isOpen), readyItems = openItems.filter((item) => item.isReady), nextItems = Object.values(
       readyItems.reduce((acc, item) => (acc[item.sectionId] ??= [], acc[item.sectionId].push({ ...item, itemIndex: acc[item.sectionId].length }), acc), {})
     ).flat().sort((a2, b2) => a2.itemIndex - b2.itemIndex).slice(0, 3).sort((a2, b2) => a2.sectionIndex - b2.sectionIndex), progress = availableItems.length ? Math.round((availableItems.length - openItems.length) / availableItems.length * 100) : 100;
-    return { availableItems, openItems, readyItems, nextItems, progress };
-  }, [allItems]);
-  return useEffect(() => {
-    if (!(!loaded || status !== experimental_UniversalStore.Status.READY))
-      for (let item of allItems) {
-        if (!item.subscribe)
-          continue;
-        let subscribed = subscriptions.has(item.id);
-        if (item.isOpen && item.isAvailable && !subscribed)
-          subscriptions.set(
-            item.id,
-            item.subscribe({
-              api,
-              item,
-              accept: () => internal_checklistStore.accept(item.id),
-              done: () => internal_checklistStore.done(item.id),
-              skip: () => internal_checklistStore.skip(item.id)
-            })
-          );
-        else if (subscribed && !(item.isOpen && item.isAvailable)) {
-          let unsubscribe = subscriptions.get(item.id);
-          subscriptions.delete(item.id), typeof unsubscribe == "function" && unsubscribe();
-        }
-      }
-  }, [api, loaded, status, allItems]), useEffect(() => {
-    let initialize = () => setInitialized(!0), timeout = setTimeout(initialize, 1e3);
-    return api.once(PREVIEW_INITIALIZED, initialize), () => {
-      clearTimeout(timeout), api.off(PREVIEW_INITIALIZED, initialize);
-    };
-  }, [api]), useEffect(() => {
-    initialized && items && status === experimental_UniversalStore.Status.READY && debounceReady();
-  }, [initialized, items, status, debounceReady]), {
-    ready,
-    allItems,
-    ...itemCollections,
-    ...internal_checklistStore,
-    ...checklistState
-  };
-};
-
-// src/manager/container/Menu.tsx
-var Key = styled.span(({ theme }) => ({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: 16,
-  fontSize: "11px",
-  fontWeight: theme.typography.weight.regular,
-  background: theme.base === "light" ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
-  color: theme.base === "light" ? theme.color.dark : theme.textMutedColor,
-  borderRadius: 2,
-  userSelect: "none",
-  pointerEvents: "none",
-  padding: "0 4px"
-})), KeyChild = styled.code(({ theme }) => ({
-  padding: 0,
-  fontFamily: theme.typography.fonts.base,
-  verticalAlign: "middle",
-  "& + &": {
-    marginLeft: 6
-  }
-})), ProgressCircle = styled(ProgressSpinner)(({ theme }) => ({
-  color: theme.color.secondary
-})), Shortcut = ({ keys }) => react_default.createElement(Key, null, keys.map((key) => react_default.createElement(KeyChild, { key }, shortcutToHumanString([key])))), useMenu = ({
-  api,
-  showToolbar,
-  isPanelShown,
-  isNavShown,
-  enableShortcuts
-}) => {
-  let shortcutKeys = api.getShortcutKeys(), { progress } = useChecklist(), about = useMemo(
-    () => ({
-      id: "about",
-      title: "About your Storybook",
-      onClick: () => api.changeSettingsTab("about"),
-      closeOnClick: !0,
-      icon: react_default.createElement(InfoIcon, null)
-    }),
-    [api]
-  ), guide = useMemo(
-    () => ({
-      id: "guide",
-      title: "Onboarding guide",
-      onClick: () => api.changeSettingsTab("guide"),
-      closeOnClick: !0,
-      icon: react_default.createElement(ListUnorderedIcon, null),
-      right: progress < 100 && react_default.createElement(ActionList.Button, { as: "div", readOnly: !0, padding: "none", ariaLabel: `${progress}% completed` }, react_default.createElement(ProgressCircle, { percentage: progress, running: !1, size: 16, width: 1.5 }), progress, "%")
-    }),
-    [api, progress]
-  ), shortcuts = useMemo(
-    () => ({
-      id: "shortcuts",
-      title: "Keyboard shortcuts",
-      onClick: () => api.changeSettingsTab("shortcuts"),
-      closeOnClick: !0,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.shortcutsPage }) : null,
-      icon: react_default.createElement(CommandIcon, null)
-    }),
-    [api, enableShortcuts, shortcutKeys.shortcutsPage]
-  ), sidebarToggle = useMemo(
-    () => ({
-      id: "S",
-      title: "Show sidebar",
-      onClick: () => api.toggleNav(),
-      closeOnClick: !0,
-      active: isNavShown,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toggleNav }) : null,
-      icon: isNavShown ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys, isNavShown]
-  ), toolbarToogle = useMemo(
-    () => ({
-      id: "T",
-      title: "Show toolbar",
-      onClick: () => api.toggleToolbar(),
-      active: showToolbar,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toolbar }) : null,
-      icon: showToolbar ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys, showToolbar]
-  ), addonsToggle = useMemo(
-    () => ({
-      id: "A",
-      title: "Show addons panel",
-      onClick: () => api.togglePanel(),
-      active: isPanelShown,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.togglePanel }) : null,
-      icon: isPanelShown ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys, isPanelShown]
-  ), up = useMemo(
-    () => ({
-      id: "up",
-      title: "Previous component",
-      onClick: () => api.jumpToComponent(-1),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevComponent }) : null,
-      icon: react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  ), down = useMemo(
-    () => ({
-      id: "down",
-      title: "Next component",
-      onClick: () => api.jumpToComponent(1),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextComponent }) : null,
-      icon: react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  ), prev = useMemo(
-    () => ({
-      id: "prev",
-      title: "Previous story",
-      onClick: () => api.jumpToStory(-1),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevStory }) : null,
-      icon: react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  ), next = useMemo(
-    () => ({
-      id: "next",
-      title: "Next story",
-      onClick: () => api.jumpToStory(1),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextStory }) : null,
-      icon: react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  ), collapse = useMemo(
-    () => ({
-      id: "collapse",
-      title: "Collapse all",
-      onClick: () => api.emit(STORIES_COLLAPSE_ALL),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.collapseAll }) : null,
-      icon: react_default.createElement(react_default.Fragment, null)
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  ), documentation = useMemo(() => ({
-    id: "documentation",
-    title: "Documentation",
-    closeOnClick: !0,
-    href: api.getDocsUrl({ versioned: !0, renderer: !0 }),
-    right: react_default.createElement(ActionList.Icon, null, react_default.createElement(ShareAltIcon, null)),
-    icon: react_default.createElement(DocumentIcon, null)
-  }), [api]), getAddonsShortcuts = useCallback(() => {
-    let addonsShortcuts = api.getAddonsShortcuts(), keys = shortcutKeys;
-    return Object.entries(addonsShortcuts).filter(([_2, { showInMenu }]) => showInMenu).map(([actionName, { label, action }]) => ({
-      id: actionName,
-      title: label,
-      onClick: () => action(),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: keys[actionName] }) : null
-    }));
-  }, [api, enableShortcuts, shortcutKeys]);
-  return useMemo(
-    () => [
-      [
-        about,
-        ...scope.CONFIG_TYPE === "DEVELOPMENT" ? [guide] : [],
-        ...enableShortcuts ? [shortcuts] : []
-      ],
-      [sidebarToggle, toolbarToogle, addonsToggle, up, down, prev, next, collapse],
-      getAddonsShortcuts(),
-      [documentation]
-    ],
-    [
-      about,
-      guide,
-      documentation,
-      shortcuts,
-      sidebarToggle,
-      toolbarToogle,
-      addonsToggle,
-      up,
-      down,
-      prev,
-      next,
-      collapse,
-      getAddonsShortcuts,
-      enableShortcuts
-    ]
-  );
-};
-
-// src/manager/components/preview/tools/share.tsx
-var mapper3 = ({ api, state }) => {
-  let { storyId, refId } = state;
-  return { api, refId, storyId };
-}, QRContainer = styled.div(() => ({
-  display: "flex",
-  alignItems: "center",
-  padding: 8,
-  maxWidth: 200
-})), QRImageContainer = styled.div(() => ({
-  width: 64,
-  height: 64,
-  marginRight: 12,
-  backgroundColor: "white",
-  padding: 2
-})), QRImage = ({ value }) => {
-  let theme = useTheme();
-  return react_default.createElement(QRImageContainer, null, react_default.createElement(QRCodeSVG, { value, marginSize: 0, size: 60, fgColor: theme.color.darkest }));
-}, QRContent = styled.div(() => ({})), QRTitle = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s1,
-  marginBottom: 4
-})), QRDescription = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s1,
-  color: theme.textMutedColor
-})), ShareMenu = react_default.memo(function({
-  api,
-  storyId,
-  refId
-}) {
-  let shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, [copied, setCopied] = useState(!1), copyStoryLink = shortcutKeys?.copyStoryLink, openInIsolation = shortcutKeys?.openInIsolation, links = useMemo(() => {
-    let copyTitle = copied ? "Copied!" : "Copy story link", originHrefs = api.getStoryHrefs(storyId, { base: "origin", refId }), networkHrefs = api.getStoryHrefs(storyId, { base: "network", refId });
-    return [
-      [
-        {
-          id: "copy-link",
-          title: copyTitle,
-          icon: react_default.createElement(LinkIcon, null),
-          right: enableShortcuts ? react_default.createElement(Shortcut, { keys: copyStoryLink }) : null,
-          onClick: () => {
-            (0, import_copy_to_clipboard.default)(originHrefs.managerHref), setCopied(!0), setTimeout(() => setCopied(!1), 2e3);
-          }
-        },
-        {
-          id: "open-new-tab",
-          title: "Open in isolation mode",
-          icon: react_default.createElement(ShareAltIcon, null),
-          right: enableShortcuts ? react_default.createElement(Shortcut, { keys: openInIsolation }) : null,
-          href: originHrefs.previewHref,
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }
-      ],
-      [
-        {
-          id: "qr-section",
-          content: react_default.createElement(QRContainer, null, react_default.createElement(QRImage, { value: networkHrefs.managerHref }), react_default.createElement(QRContent, null, react_default.createElement(QRTitle, null, "Scan to open"), react_default.createElement(QRDescription, null, scope.CONFIG_TYPE === "DEVELOPMENT" ? "Device must be on the same network." : "View story on another device.")))
-        }
-      ]
-    ];
-  }, [api, storyId, refId, copied, enableShortcuts, copyStoryLink, openInIsolation]);
-  return react_default.createElement(TooltipLinkList, { links, style: { width: 240 } });
-}), shareTool = {
-  title: "share",
-  id: "share",
-  type: types.TOOL,
-  match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
-  render: () => react_default.createElement(Consumer, { filter: mapper3 }, ({ api, storyId, refId }) => storyId ? react_default.createElement(
-    PopoverProvider,
-    {
-      hasChrome: !0,
-      placement: "bottom",
-      padding: 0,
-      popover: react_default.createElement(ShareMenu, { api, storyId, refId })
-    },
-    react_default.createElement(Button, { padding: "small", variant: "ghost", ariaLabel: "Share", tooltip: "Share..." }, react_default.createElement(ShareIcon, null))
-  ) : null)
-};
-
-// src/manager/container/Preview.tsx
-var defaultTabs = [createCanvasTab()], defaultTools = [menuTool, remountTool, zoomTool], defaultToolsExtra = [addonsTool, fullScreenTool, shareTool, openInEditorTool], emptyTabsList = [], memoizedTabs = (0, import_memoizerific.default)(1)(
-  (_2, tabElements, parameters, showTabs) => showTabs ? filterTabs([...defaultTabs, ...Object.values(tabElements)], parameters) : emptyTabsList
-), memoizedTools = (0, import_memoizerific.default)(1)(
-  (_2, toolElements, filterProps) => filterToolsSide([...defaultTools, ...Object.values(toolElements)], ...filterProps)
-), memoizedExtra = (0, import_memoizerific.default)(1)(
-  (_2, extraElements, filterProps) => filterToolsSide([...defaultToolsExtra, ...Object.values(extraElements)], ...filterProps)
-), memoizedWrapper = (0, import_memoizerific.default)(1)((_2, previewElements) => [
-  ...defaultWrappers,
-  ...Object.values(previewElements)
-]), { PREVIEW_URL } = scope, splitTitleAddExtraSpace = (input) => input.split("/").join(" / ").replace(/\s\s/, " "), getDescription = (item) => {
-  if (item?.type === "story" || item?.type === "docs") {
-    let { title: title2, name } = item;
-    return title2 && name ? splitTitleAddExtraSpace(`${title2} - ${name} \u22C5 Storybook`) : "Storybook";
-  }
-  return item?.name ? `${item.name} \u22C5 Storybook` : "Storybook";
-}, mapper4 = ({
-  api,
-  state
-  // @ts-expect-error (non strict)
-}) => {
-  let { layout, location: location2, customQueryParams, storyId, refs, viewMode, path, refId } = state, entry = api.getData(storyId, refId), tabsList = Object.values(api.getElements(Addon_TypesEnum.TAB)), wrapperList = Object.values(api.getElements(Addon_TypesEnum.PREVIEW)), toolsList = Object.values(api.getElements(Addon_TypesEnum.TOOL)), toolsExtraList = Object.values(api.getElements(Addon_TypesEnum.TOOLEXTRA)), tabId = api.getQueryParam("tab"), tools = memoizedTools(toolsList.length, api.getElements(Addon_TypesEnum.TOOL), [
-    entry,
-    viewMode,
-    location2,
-    path,
-    // @ts-expect-error (non strict)
-    tabId
-  ]), toolsExtra = memoizedExtra(
-    toolsExtraList.length,
-    api.getElements(Addon_TypesEnum.TOOLEXTRA),
-    // @ts-expect-error (non strict)
-    [entry, viewMode, location2, path, tabId]
-  );
-  return {
-    api,
-    entry,
-    options: layout,
-    description: getDescription(entry),
-    viewMode,
-    refs,
-    storyId,
-    baseUrl: PREVIEW_URL || "iframe.html",
-    queryParams: customQueryParams,
-    tools,
-    toolsExtra,
-    tabs: memoizedTabs(
-      tabsList.length,
-      api.getElements(Addon_TypesEnum.TAB),
-      entry ? entry.parameters : void 0,
-      layout.showTabs
-    ),
-    wrappers: memoizedWrapper(
-      wrapperList.length,
-      api.getElements(Addon_TypesEnum.PREVIEW)
-    ),
-    tabId
-  };
-}, PreviewConnected = react_default.memo(function(props) {
-  return react_default.createElement(Consumer, { filter: mapper4 }, (fromState) => react_default.createElement(Preview, { ...props, ...fromState }));
-}), Preview_default = PreviewConnected;
-
-// src/manager/components/Optional/Optional.tsx
-var Wrapper2 = styled.div({
-  display: "inline-grid",
-  gridTemplateColumns: "max-content",
-  overflow: "hidden"
-}), Content = styled.div(({ isHidden }) => ({
-  display: "inline-block",
-  gridArea: "1/1",
-  opacity: isHidden === null ? 0 : 1,
-  visibility: isHidden ? "hidden" : "visible"
-})), Optional = ({
-  content,
-  fallback
-}) => {
-  let contentRef = useRef(null), wrapperRef = useRef(null), [hidden, setHidden] = useState(null), contentWidth = useRef(contentRef.current?.offsetWidth ?? 0), wrapperWidth = useRef(wrapperRef.current?.offsetWidth ?? 0);
-  return useEffect(() => {
-    if (contentRef.current && wrapperRef.current) {
-      let resizeObserver = new ResizeObserver(() => {
-        wrapperWidth.current = wrapperRef.current?.offsetWidth || wrapperWidth.current, contentWidth.current = contentRef.current?.offsetWidth || contentWidth.current, setHidden(contentWidth.current > wrapperWidth.current);
-      });
-      return resizeObserver.observe(wrapperRef.current), () => resizeObserver.disconnect();
-    }
-  }, []), react_default.createElement(Wrapper2, { ref: wrapperRef }, react_default.createElement(Content, { isHidden: hidden, ref: contentRef }, content), fallback && react_default.createElement(Content, { isHidden: !hidden }, fallback));
-};
-
-// src/manager/components/Particles/Particles.tsx
-var Shape = styled.svg(({ color: color2 }) => ({
-  fill: color2,
-  position: "absolute",
-  inset: "0",
-  margin: "auto",
-  width: "12px",
-  height: "12px",
-  pointerEvents: "none"
-})), Donut = (props) => react_default.createElement(Shape, { viewBox: "0 0 90 90", xmlns: "http://www.w3.org/2000/svg", color: "red", ...props }, react_default.createElement("path", { d: "M45 0c24.853 0 45 20.147 45 45S69.853 90 45 90 0 69.853 0 45 20.147 0 45 0zm.5 27C35.283 27 27 35.283 27 45.5S35.283 64 45.5 64 64 55.717 64 45.5 55.717 27 45.5 27z" })), L2 = (props) => react_default.createElement(Shape, { viewBox: "0 0 55 89", xmlns: "http://www.w3.org/2000/svg", color: "#66BF3C", ...props }, react_default.createElement("path", { d: "M55 3v83a3 3 0 01-3 3H3a3 3 0 01-3-3V64a3 3 0 013-3h21a3 3 0 003-3V3a3 3 0 013-3h22a3 3 0 013 3z" })), Slice = (props) => react_default.createElement(Shape, { viewBox: "0 0 92 92", xmlns: "http://www.w3.org/2000/svg", color: "#FF4785", ...props }, react_default.createElement("path", { d: "M92 89V3c0-3-2.056-3-3-3C39.294 0 0 39.294 0 89c0 0 0 3 3 3h86a3 3 0 003-3z" })), Square = ({ style, ...props }) => react_default.createElement(
-  Shape,
-  {
-    viewBox: "0 0 90 90",
-    xmlns: "http://www.w3.org/2000/svg",
-    color: "#1EA7FD",
-    ...props,
-    style: { borderRadius: 5, ...style }
-  },
-  react_default.createElement("path", { d: "M0 0h90v90H0z" })
-), Triangle = (props) => react_default.createElement(Shape, { viewBox: "0 0 96 88", xmlns: "http://www.w3.org/2000/svg", color: "#FFAE00", ...props }, react_default.createElement("path", { d: "M50.63 1.785l44.928 81.77A3 3 0 0192.928 88H3.072a3 3 0 01-2.629-4.445l44.929-81.77a3 3 0 015.258 0z" })), T2 = (props) => react_default.createElement(Shape, { viewBox: "0 0 92 62", xmlns: "http://www.w3.org/2000/svg", color: "#FC521F", ...props }, react_default.createElement("path", { d: "M63 3v25a3 3 0 003 3h23a3 3 0 013 3v25a3 3 0 01-3 3H3a3 3 0 01-3-3V34a3 3 0 013-3h24a3 3 0 003-3V3a3 3 0 013-3h27a3 3 0 013 3z" })), Z = (props) => react_default.createElement(Shape, { viewBox: "0 0 56 90", xmlns: "http://www.w3.org/2000/svg", color: "#6F2CAC", ...props }, react_default.createElement("path", { d: "M28 3v25a3 3 0 003 3h22a3 3 0 013 3v53a3 3 0 01-3 3H31a3 3 0 01-3-3V62a3 3 0 00-3-3H3a3 3 0 01-3-3V3a3 3 0 013-3h22a3 3 0 013 3z" })), fadeToTransparent = keyframes`
-  to {
-    opacity: 0;
-  }
-`, disperse = keyframes`
-  to {
-    transform: translate(
-      calc(cos(var(--angle)) * var(--distance)),
-      calc(sin(var(--angle)) * var(--distance))
-    ) rotate(var(--rotation));
-  }
-`, slideDown = keyframes`
-  to {
-    transform: translateY(50px);
-  }
-`, Container4 = styled.div({
-  position: "absolute",
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  gap: 10,
-  "--particle-curve": "cubic-bezier(0.2, 0.56, 0, 1)",
-  animation: `${slideDown} 1000ms forwards cubic-bezier(0.587, -0.381, 0.583, 0.599)`,
-  animationDelay: "150ms",
-  zIndex: 999,
-  svg: {
-    width: 15,
-    height: 15,
-    animation: `${fadeToTransparent} var(--fade-duration) forwards, ${disperse} 1000ms forwards var(--particle-curve)`
-  }
-}), FADE_DURATION = 1200, NUM_OF_PARTICLES = 8, JITTER = 15, random = (min, max) => Math.random() * (max - min) + min, sortRandomly = (array) => array.sort(() => Math.random() - 0.5), Particles = memo(function({
-  anchor: Anchor
-}) {
-  let anchorRef = useRef(null), [left, setLeft] = useState(0), [top, setTop] = useState(0), shapes = sortRandomly([Donut, L2, Slice, Square, Triangle, T2, Z]), colors = sortRandomly([
-    "#FF0000",
-    "#FF4787",
-    "#66BF3C",
-    "#1EA7FD",
-    "#FC521F",
-    "#6F2CAC",
-    "#FFAE00"
-  ]);
-  return useLayoutEffect(() => {
-    let rect = anchorRef.current?.getBoundingClientRect();
-    rect && (setLeft(rect.left + rect.width / 2), setTop(rect.top + rect.height / 2));
-  }, []), react_default.createElement("div", { ref: anchorRef }, react_default.createElement(Anchor, null), createPortal(
-    react_default.createElement(Container4, { style: { top: top + "px", left: left + "px" } }, shapes.map((Particle, index) => {
-      let angle = 360 / NUM_OF_PARTICLES * index + random(-JITTER, JITTER), distance = random(50, 80), rotation = random(-360, 360), style = {
-        "--angle": angle + "deg",
-        "--distance": distance + "px",
-        "--rotation": rotation + "deg",
-        "--fade-duration": FADE_DURATION + "ms"
-      };
-      return react_default.createElement(Particle, { key: Particle.name, style, color: colors[index] });
-    })),
-    document.getElementById("root") ?? document.body
-  ));
-});
-
-// src/manager/components/TextFlip.tsx
-var slideIn2 = keyframes({
-  from: {
-    transform: "translateY(var(--slide-in-from))",
-    opacity: 0
-  }
-}), slideOut = keyframes({
-  to: {
-    transform: "translateY(var(--slide-out-to))",
-    opacity: 0
-  }
-}), Container5 = styled.div({
-  display: "inline-grid",
-  gridTemplateColumns: "1fr",
-  justifyContent: "center",
-  alignItems: "center"
-}), Placeholder2 = styled.div({
-  gridArea: "1 / 1",
-  userSelect: "none",
-  visibility: "hidden"
-}), Text2 = styled.span(({ duration, isExiting, isEntering, reverse }) => {
-  let animation;
-  return isExiting ? animation = `${slideOut} ${duration}ms forwards` : isEntering && (animation = `${slideIn2} ${duration}ms forwards`), {
-    gridArea: "1 / 1",
-    animation,
-    pointerEvents: isExiting ? "none" : "auto",
-    userSelect: isExiting ? "none" : "text",
-    "--slide-in-from": reverse ? "-100%" : "100%",
-    "--slide-out-to": reverse ? "100%" : "-100%",
-    "@media (prefers-reduced-motion: reduce)": {
-      animation: "none",
-      opacity: isExiting ? 0 : 1,
-      transform: "translateY(0)"
-    }
+    return { availableItems, openItems, readyItems, nextItems, progress };
+  }, [allItems]);
+  return useEffect(() => {
+    if (!(!loaded || status !== experimental_UniversalStore.Status.READY))
+      for (let item of allItems) {
+        if (!item.subscribe)
+          continue;
+        let subscribed = subscriptions.has(item.id);
+        if (item.isOpen && item.isAvailable && !subscribed)
+          subscriptions.set(
+            item.id,
+            item.subscribe({
+              api,
+              item,
+              accept: () => internal_checklistStore.accept(item.id),
+              done: () => internal_checklistStore.done(item.id),
+              skip: () => internal_checklistStore.skip(item.id)
+            })
+          );
+        else if (subscribed && !(item.isOpen && item.isAvailable)) {
+          let unsubscribe = subscriptions.get(item.id);
+          subscriptions.delete(item.id), typeof unsubscribe == "function" && unsubscribe();
+        }
+      }
+  }, [api, loaded, status, allItems]), useEffect(() => {
+    let initialize = () => setInitialized(!0), timeout = setTimeout(initialize, 1e3);
+    return api.once(PREVIEW_INITIALIZED, initialize), () => {
+      clearTimeout(timeout), api.off(PREVIEW_INITIALIZED, initialize);
+    };
+  }, [api]), useEffect(() => {
+    initialized && items && status === experimental_UniversalStore.Status.READY && debounceReady();
+  }, [initialized, items, status, debounceReady]), {
+    ready,
+    allItems,
+    ...itemCollections,
+    ...internal_checklistStore,
+    ...checklistState
   };
-}), TextFlip = ({
-  text,
-  duration = 250,
-  placeholder,
-  ...props
-}) => {
-  let textRef = useRef(text), [staleValue, setStaleValue] = useState(text), isAnimating = text !== staleValue, reverse = isAnimating && numericCompare(staleValue, text);
-  return textRef.current = text, react_default.createElement(Container5, { ...props }, isAnimating && react_default.createElement(
-    Text2,
-    {
-      "aria-hidden": !0,
-      duration,
-      reverse,
-      isExiting: !0,
-      onAnimationEnd: () => setStaleValue(textRef.current)
-    },
-    staleValue
-  ), react_default.createElement(Text2, { duration, reverse, isEntering: isAnimating }, text), placeholder && react_default.createElement(Placeholder2, { "aria-hidden": !0 }, placeholder));
 };
-function numericCompare(a2, b2) {
-  let na = Number(a2), nb = Number(b2);
-  return Number.isNaN(na) || Number.isNaN(nb) ? a2.localeCompare(b2, void 0, { numeric: !0 }) > 0 : na > nb;
-}
 
 // src/manager/components/sidebar/ChecklistWidget.tsx
 var fadeScaleIn = keyframes`
@@ -11313,13 +11881,13 @@ var fadeScaleIn = keyframes`
   "&:hover #checklist-module-collapse-toggle": {
     opacity: 1
   }
-}), CollapseToggle = styled(ActionList.Button)({
+}), CollapseToggle2 = styled(ActionList.Button)({
   opacity: 0,
   transition: "opacity var(--transition-duration, 0.2s)",
   "&:focus, &:hover": {
     opacity: 1
   }
-}), ProgressCircle2 = styled(ProgressSpinner)(({ theme }) => ({
+}), ProgressCircle = styled(ProgressSpinner)(({ theme }) => ({
   color: theme.color.secondary
 })), Checked = styled(StatusPassIcon)(({ theme }) => ({
   padding: 1,
@@ -11336,6 +11904,7 @@ var fadeScaleIn = keyframes`
     transition: "color 500ms"
   }),
   ({ theme, isSkipped }) => isSkipped && {
+    alignSelf: "flex-start",
     "&:after": {
       content: '""',
       position: "absolute",
@@ -11412,7 +11981,7 @@ var fadeScaleIn = keyframes`
           fallback: react_default.createElement(OpenGuideButton, null)
         }
       )), react_default.createElement(ActionList.Item, { as: "div" }, react_default.createElement(
-        CollapseToggle,
+        CollapseToggle2,
         {
           ...toggleProps,
           id: "checklist-module-collapse-toggle",
@@ -11451,7 +12020,7 @@ var fadeScaleIn = keyframes`
             onClick: (e2) => e2.stopPropagation()
           },
           react_default.createElement(
-            ProgressCircle2,
+            ProgressCircle,
             {
               percentage: progress,
               running: !1,
@@ -12879,7 +13448,7 @@ function getPath(item, ref) {
   return parent ? [...getPath(parent, ref), parent.name] : ref.id === DEFAULT_REF_ID ? [] : [ref.title || ref.id];
 }
 var searchItem = (item, ref) => ({ ...item, refId: ref.id, path: getPath(item, ref) });
-function cycle(array, index, delta) {
+function cycle2(array, index, delta) {
   let next = index + delta % array.length;
   return next < 0 && (next = array.length + next), next >= array.length && (next -= array.length), next;
 }
@@ -13554,7 +14123,7 @@ var TypeIcon2 = styled.svg(
   "&:first-of-type": {
     marginTop: 0
   }
-}), Wrapper3 = styled.div({
+}), Wrapper5 = styled.div({
   display: "flex",
   alignItems: "center",
   gap: 6,
@@ -13565,7 +14134,7 @@ var TypeIcon2 = styled.svg(
   isExpandable = !1,
   ...props
 }) {
-  return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper3, 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" }))), children);
+  return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper5, 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" }))), children);
 }), ComponentNode = react_default.memo(
   function({
     theme,
@@ -13575,25 +14144,33 @@ var TypeIcon2 = styled.svg(
     isSelected,
     ...props
   }) {
-    return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper3, 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" }))), children);
+    return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper5, 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" }))), children);
   }
 ), DocumentNode = react_default.memo(function({ theme, children, docsMode, ...props }) {
-  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper3, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), children);
-}), StoryNode = react_default.memo(function({
+  return react_default.createElement(LeafNode, { tabIndex: -1, rel: "canonical", ...props }, react_default.createElement(Wrapper5, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), children);
+}), StoryBranchNode = react_default.memo(
+  function({
+    theme,
+    children,
+    isExpandable = !1,
+    isExpanded = !1,
+    isSelected,
+    ...props
+  }) {
+    return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper5, 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" }))), children);
+  }
+), StoryLeafNode = react_default.memo(function({
   theme,
   children,
-  isExpandable = !1,
-  isExpanded = !1,
-  isSelected,
   ...props
 }) {
-  return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper3, 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" }))), children);
+  return react_default.createElement(LeafNode, { tabIndex: -1, rel: "canonical", ...props }, react_default.createElement(Wrapper5, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "story" }, react_default.createElement(UseSymbol, { type: "story" }))), children);
 }), TestNode = react_default.memo(function({
   theme,
   children,
   ...props
 }) {
-  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper3, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "test" }, react_default.createElement(UseSymbol, { type: "test" }))), children);
+  return react_default.createElement(LeafNode, { tabIndex: -1, rel: "canonical", ...props }, react_default.createElement(Wrapper5, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "test" }, react_default.createElement(UseSymbol, { type: "test" }))), children);
 });
 
 // src/manager/keybinding.ts
@@ -13848,7 +14425,7 @@ var statusOrder = [
   })) : [], [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(
+    let LeafNode3 = item.type === "docs" ? DocumentNode : StoryLeafNode, statusValue = getMostCriticalStatusValue(
       Object.values(statuses || {}).map((s2) => s2.value)
     ), [icon, textColor] = getStatus(theme, statusValue);
     return react_default.createElement(
@@ -13947,7 +14524,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 ? getStatus(theme, status)[1] : null, showBranchStatus = status === "status-value:error" || status === "status-value:warning";
+    let { children = [] } = item, BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryBranchNode }[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,
       {
@@ -13998,7 +14575,7 @@ var statusOrder = [
       ) : itemStatusButton
     );
   }
-  let isTest = item.type === "story" && item.subtype === "test", LeafNode2 = isTest ? TestNode : { docs: DocumentNode, story: StoryNode }[item.type], nodeType = isTest ? "test" : { docs: "document", story: "story" }[item.type];
+  let isTest = item.type === "story" && item.subtype === "test", LeafNode2 = isTest ? TestNode : { docs: DocumentNode, story: StoryLeafNode }[item.type], nodeType = isTest ? "test" : { docs: "document", story: "story" }[item.type];
   return react_default.createElement(
     LeafNodeStyleWrapper,
     {
@@ -14184,7 +14761,7 @@ var statusOrder = [
 });
 
 // src/manager/components/sidebar/Refs.tsx
-var Wrapper4 = styled.div(({ isMain }) => ({
+var Wrapper6 = styled.div(({ isMain }) => ({
   position: "relative",
   marginTop: isMain ? void 0 : 0
 })), RefHead = styled.div(({ theme }) => ({
@@ -14259,7 +14836,7 @@ var Wrapper4 = styled.div(({ isMain }) => ({
     },
     react_default.createElement(CollapseButton2, { "data-action": "collapse-ref", onClick: handleClick }, react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(RefTitle, { title: title2 }, title2)),
     react_default.createElement(RefIndicator, { ...props, state, ref: indicatorRef })
-  ), isExpanded && react_default.createElement(Wrapper4, { "data-title": title2, isMain }, state === "auth" && react_default.createElement(AuthBlock, { id: refId, loginUrl }), state === "error" && react_default.createElement(ErrorBlock, { error: indexError }), state === "loading" && react_default.createElement(LoaderBlock, { isMain }), state === "empty" && react_default.createElement(EmptyBlock, { isMain, hasEntries }), state === "ready" && react_default.createElement(
+  ), isExpanded && react_default.createElement(Wrapper6, { "data-title": title2, isMain }, state === "auth" && react_default.createElement(AuthBlock, { id: refId, loginUrl }), state === "error" && react_default.createElement(ErrorBlock, { error: indexError }), state === "loading" && react_default.createElement(LoaderBlock, { isMain }), state === "empty" && react_default.createElement(EmptyBlock, { isMain, hasEntries }), state === "ready" && react_default.createElement(
     Tree,
     {
       allStatuses,
@@ -14321,7 +14898,7 @@ var { document: document5, window: globalWindow4 } = scope, fromSelection = (sel
           containerRef.current?.querySelectorAll("[data-highlightable=true]") || []
         ), currentIndex = highlightable.findIndex(
           (el) => el.getAttribute("data-item-id") === highlightedRef.current?.itemId && el.getAttribute("data-ref-id") === highlightedRef.current?.refId
-        ), nextIndex = cycle(highlightable, currentIndex, isArrowUp ? -1 : 1), didRunAround = isArrowUp ? nextIndex === highlightable.length - 1 : nextIndex === 0;
+        ), nextIndex = cycle2(highlightable, currentIndex, isArrowUp ? -1 : 1), didRunAround = isArrowUp ? nextIndex === highlightable.length - 1 : nextIndex === 0;
         if (highlightElement(highlightable[nextIndex], didRunAround), highlightable[nextIndex].getAttribute("data-nodetype") === "component") {
           let { itemId, refId } = highlightedRef.current, item = api.resolveStory(itemId, refId === "storybook_internal" ? void 0 : refId);
           item?.type === "component" && api.emit(PRELOAD_ENTRIES, {
@@ -14445,36 +15022,45 @@ var buttonStyleAdditions = ({
       box-shadow: 0 0 0 2px ${curriedTransparentize$1(0.88, theme.color.secondary)};
     }
   `}
-`, Container6 = styled.div({
+`, Container7 = styled.div({
   minWidth: 250
 }), SidebarButton = styled(Button)(buttonStyleAdditions), SidebarToggleButton = styled(ToggleButton)(buttonStyleAdditions), MenuButtonGroup = styled.div({
   display: "flex",
   gap: 6
-}), SidebarMenuList = ({ menu, onHide }) => react_default.createElement(Container6, null, menu.filter((links) => links.length).flatMap((links) => react_default.createElement(ActionList, { key: links.map((link) => link.id).join("_") }, links.map((link) => react_default.createElement(ActionList.Item, { key: link.id, active: link.active }, react_default.createElement(
-  ActionList.Action,
-  {
-    ...link.href && { as: "a", href: link.href, target: "_blank" },
-    ariaLabel: !1,
-    id: `list-item-${link.id}`,
-    disabled: link.disabled,
-    onClick: (e2) => {
-      if (link.disabled) {
-        e2.preventDefault();
-        return;
+}), SidebarMenuList = ({ menu, onHide }) => react_default.createElement(Container7, null, menu.filter((links) => links.length).flatMap((links) => react_default.createElement(ActionList, { key: links.map((link) => link.id).join("_") }, links.map((link) => {
+  let linkContent = react_default.createElement(react_default.Fragment, null, (link.icon || link.input) && react_default.createElement(ActionList.Icon, null, link.icon || link.input), (link.title || link.center) && react_default.createElement(ActionList.Text, null, link.title || link.center), link.right);
+  return react_default.createElement(ActionList.Item, { key: link.id, active: link.active }, react_default.createElement(
+    ActionList.Action,
+    {
+      asChild: !!link.href,
+      ariaLabel: !1,
+      id: `list-item-${link.id}`,
+      disabled: link.disabled,
+      onClick: (e2) => {
+        if (link.disabled) {
+          e2.preventDefault();
+          return;
+        }
+        link.href && link.internal && e2.preventDefault(), link.onClick?.(e2, {
+          id: link.id,
+          active: link.active,
+          disabled: link.disabled,
+          title: link.title,
+          href: link.href
+        }), link.closeOnClick && onHide();
       }
-      link.onClick?.(e2, {
-        id: link.id,
-        active: link.active,
-        disabled: link.disabled,
-        title: link.title,
-        href: link.href
-      }), link.closeOnClick && onHide();
-    }
-  },
-  (link.icon || link.input) && react_default.createElement(ActionList.Icon, null, link.icon || link.input),
-  (link.title || link.center) && react_default.createElement(ActionList.Text, null, link.title || link.center),
-  link.right
-)))))), SidebarMenu = ({ menu, isHighlighted, onClick }) => {
+    },
+    link.href ? react_default.createElement(
+      "a",
+      {
+        href: link.href,
+        target: link.internal ? void 0 : "_blank",
+        rel: link.internal ? "canonical" : "noreferrer"
+      },
+      linkContent
+    ) : linkContent
+  ));
+})))), SidebarMenu = ({ menu, isHighlighted, onClick }) => {
   let [isTooltipVisible, setIsTooltipVisible] = useState(!1), { isMobile: isMobile2, setMobileMenuOpen } = useLayout();
   return isMobile2 ? react_default.createElement(MenuButtonGroup, null, react_default.createElement(
     SidebarButton,
@@ -14483,10 +15069,13 @@ var buttonStyleAdditions = ({
       variant: "ghost",
       ariaLabel: "About Storybook",
       highlighted: !!isHighlighted,
-      onClick,
-      isMobile: !0
+      onClick: (e2) => {
+        onClick?.(e2), e2.preventDefault();
+      },
+      isMobile: !0,
+      asChild: !0
     },
-    react_default.createElement(CogIcon, null)
+    react_default.createElement("a", { href: "./?path=/settings/about", rel: "canonical" }, react_default.createElement(CogIcon, null))
   ), react_default.createElement(
     SidebarButton,
     {
@@ -14576,7 +15165,7 @@ var BrandArea = styled.div(({ theme }) => ({
       zIndex: 3
     }
   }
-})), Heading = ({
+})), Heading2 = ({
   menuHighlighted = !1,
   menu,
   skipLinkHref,
@@ -16960,7 +17549,11 @@ var { document: document7 } = scope, ResultsList = styled.ol({
   flexDirection: "column"
 }), Mark = styled.mark(({ theme }) => ({
   background: "transparent",
-  color: theme.color.secondary
+  color: theme.color.secondary,
+  "@media (forced-colors: active)": {
+    color: "HighlightText",
+    background: "Highlight"
+  }
 })), MoreWrapper = styled.div({
   marginTop: 8
 }), RecentlyOpenedTitle = styled.div(({ theme }) => ({
@@ -17135,7 +17728,7 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
 }), Collapsible2 = styled.div(({ theme }) => ({
   overflow: "hidden",
   boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`
-})), Content2 = styled.div({
+})), Content3 = styled.div({
   display: "flex",
   flexDirection: "column"
 }), Bar2 = styled.div(({ onClick }) => ({
@@ -17156,7 +17749,7 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
   display: "flex",
   justifyContent: "flex-end",
   gap: 4
-}), CollapseToggle2 = styled(ActionList.Button)({
+}), CollapseToggle3 = styled(ActionList.Button)({
   opacity: 0,
   transition: "opacity 250ms",
   "&:focus, &:hover": {
@@ -17272,7 +17865,7 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
         fallback: react_default.createElement(RunButton, { isRunning, onRunAll })
       }
     )), react_default.createElement(Filters, null, hasTestProviders && react_default.createElement(
-      CollapseToggle2,
+      CollapseToggle3,
       {
         onClick: (e2) => toggleCollapsed(e2),
         id: "testing-module-collapse-toggle",
@@ -17342,7 +17935,7 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
           maxHeight: isCollapsed ? 0 : maxHeight
         }
       },
-      react_default.createElement(Content2, { ref: contentRef }, Object.values(registeredTestProviders).map((registeredTestProvider) => {
+      react_default.createElement(Content3, { ref: contentRef }, Object.values(registeredTestProviders).map((registeredTestProvider) => {
         let { render: Render, id } = registeredTestProvider;
         return Render ? react_default.createElement(TestProvider, { key: id, "data-module-id": id }, react_default.createElement(Render, null)) : (once.warn(
           `No render function found for test provider with id '${id}', skipping...`
@@ -17357,7 +17950,7 @@ var SIDEBAR_BOTTOM_SPACER_ID = "sidebar-bottom-spacer", SIDEBAR_BOTTOM_WRAPPER_I
   ({ value }) => ["status-value:warning", "status-value:error"].includes(value)
 ), getFilter = (warningsActive = !1, errorsActive = !1) => warningsActive && errorsActive ? filterBoth : warningsActive ? filterWarn : errorsActive ? filterError : filterNone, Spacer = styled.div({
   pointerEvents: "none"
-}), Content3 = styled.div(({ theme }) => ({
+}), Content4 = styled.div(({ theme }) => ({
   position: "absolute",
   zIndex: 1,
   bottom: 0,
@@ -17401,7 +17994,7 @@ var SIDEBAR_BOTTOM_SPACER_ID = "sidebar-bottom-spacer", SIDEBAR_BOTTOM_WRAPPER_I
   }, []), useEffect(() => {
     let filter = getFilter(warningCount > 0 && warningsActive, errorCount > 0 && errorsActive);
     api.experimental_setFilter("sidebar-bottom-filter", filter);
-  }, [api, warningCount, errorCount, warningsActive, errorsActive]), !warningCount && !errorCount && Object.values(registeredTestProviders).length === 0 && notifications.length === 0 ? null : react_default.createElement(Fragment, null, react_default.createElement(Spacer, { id: SIDEBAR_BOTTOM_SPACER_ID, ref: spacerRef }), react_default.createElement(Content3, { id: SIDEBAR_BOTTOM_WRAPPER_ID, ref: wrapperRef }, react_default.createElement(NotificationList, { notifications, clearNotification: api.clearNotification }), isDevelopment && react_default.createElement(
+  }, [api, warningCount, errorCount, warningsActive, errorsActive]), !warningCount && !errorCount && Object.values(registeredTestProviders).length === 0 && notifications.length === 0 ? null : react_default.createElement(Fragment, null, react_default.createElement(Spacer, { id: SIDEBAR_BOTTOM_SPACER_ID, ref: spacerRef }), react_default.createElement(Content4, { id: SIDEBAR_BOTTOM_WRAPPER_ID, ref: wrapperRef }, react_default.createElement(NotificationList, { notifications, clearNotification: api.clearNotification }), isDevelopment && react_default.createElement(
     TestingWidget,
     {
       registeredTestProviders,
@@ -17452,7 +18045,7 @@ var SIDEBAR_BOTTOM_SPACER_ID = "sidebar-bottom-spacer", SIDEBAR_BOTTOM_WRAPPER_I
 var groupByType = (filters) => filters.reduce(
   (acc, filter) => (acc[filter.type] = acc[filter.type] || [], acc[filter.type].push(filter), acc),
   {}
-), Wrapper5 = styled.div({
+), Wrapper7 = styled.div({
   minWidth: 240,
   maxWidth: 300,
   maxHeight: 15.5 * 32 + 8,
@@ -17505,7 +18098,7 @@ var groupByType = (filters) => filters.reduce(
   }, groups = groupByType(Object.values(filtersById)), links = Object.values(groups).map(
     (group) => group.sort((a2, b2) => a2.id.localeCompare(b2.id)).map((filter) => renderLink(filter)).filter((value) => !!value)
   ).filter((value) => value.length > 0), hasItems = links.length > 0, hasUserTags = Object.values(filtersById).some(({ type }) => type === "tag"), isNothingSelectedYet = includedFilters.size === 0 && excludedFilters.size === 0;
-  return react_default.createElement(Wrapper5, { ref }, hasItems && react_default.createElement(ActionList, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div" }, isNothingSelectedYet ? react_default.createElement(
+  return react_default.createElement(Wrapper7, { ref }, hasItems && react_default.createElement(ActionList, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div" }, isNothingSelectedYet ? react_default.createElement(
     ActionList.Button,
     {
       ariaLabel: !1,
@@ -17719,7 +18312,7 @@ var import_store2 = __toESM(require_store2(), 1), save = debounce((value) => imp
 };
 
 // src/manager/components/sidebar/Sidebar.tsx
-var DEFAULT_REF_ID = "storybook_internal", Container7 = styled.nav(({ theme }) => ({
+var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) => ({
   position: "absolute",
   zIndex: 1,
   left: 0,
@@ -17792,8 +18385,8 @@ var DEFAULT_REF_ID = "storybook_internal", Container7 = styled.nav(({ theme }) =
     }, {}),
     []
   );
-  return react_default.createElement(Container7, { className: "container sidebar-container", "aria-label": "Global" }, react_default.createElement(ScrollArea, { vertical: !0, offset: 3, scrollbarSize: 6, scrollPadding: "4rem" }, react_default.createElement(Stack, null, react_default.createElement("div", null, react_default.createElement(
-    Heading,
+  return react_default.createElement(Container8, { className: "container sidebar-container", "aria-label": "Global" }, react_default.createElement(ScrollArea, { vertical: !0, offset: 3, scrollbarSize: 6, scrollPadding: "4rem" }, react_default.createElement(Stack, null, react_default.createElement("div", null, react_default.createElement(
+    Heading2,
     {
       className: "sidebar-header",
       menuHighlighted,
@@ -17802,7 +18395,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container7 = styled.nav(({ theme }) =
       isLoading,
       onMenuClick
     }
-  ), !isLoading && scope.CONFIG_TYPE === "DEVELOPMENT" && react_default.createElement(ChecklistWidget, null)), react_default.createElement(
+  ), !isLoading && scope.CONFIG_TYPE === "DEVELOPMENT" && scope.FEATURES?.sidebarOnboardingChecklist !== !1 && react_default.createElement(ChecklistWidget, null)), react_default.createElement(
     Search,
     {
       dataset,
@@ -17863,6 +18456,173 @@ var DEFAULT_REF_ID = "storybook_internal", Container7 = styled.nav(({ theme }) =
   )), isMobile2 || isLoading ? null : react_default.createElement(SidebarBottom, { isDevelopment })));
 });
 
+// src/manager/container/Menu.tsx
+var ProgressCircle2 = styled(ProgressSpinner)(({ theme }) => ({
+  color: theme.color.secondary
+})), useMenu = ({
+  api,
+  showToolbar,
+  isPanelShown,
+  isNavShown,
+  enableShortcuts
+}) => {
+  let shortcutKeys = api.getShortcutKeys(), { progress } = useChecklist(), about = useMemo(
+    () => ({
+      id: "about",
+      title: "About your Storybook",
+      onClick: () => api.changeSettingsTab("about"),
+      href: "./?path=/settings/about",
+      internal: !0,
+      closeOnClick: !0,
+      icon: react_default.createElement(InfoIcon, null)
+    }),
+    [api]
+  ), guide = useMemo(
+    () => ({
+      id: "guide",
+      title: "Onboarding guide",
+      onClick: () => api.changeSettingsTab("guide"),
+      href: "./?path=/settings/guide",
+      internal: !0,
+      closeOnClick: !0,
+      icon: react_default.createElement(ListUnorderedIcon, null),
+      right: progress < 100 && react_default.createElement(ActionList.Button, { as: "div", readOnly: !0, padding: "none", ariaLabel: `${progress}% completed` }, react_default.createElement(ProgressCircle2, { percentage: progress, running: !1, size: 16, width: 1.5 }), progress, "%")
+    }),
+    [api, progress]
+  ), shortcuts = useMemo(
+    () => ({
+      id: "shortcuts",
+      title: "Keyboard shortcuts",
+      onClick: () => api.changeSettingsTab("shortcuts"),
+      href: "./?path=/settings/shortcuts",
+      internal: !0,
+      closeOnClick: !0,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.shortcutsPage }) : null,
+      icon: react_default.createElement(CommandIcon, null)
+    }),
+    [api, enableShortcuts, shortcutKeys.shortcutsPage]
+  ), sidebarToggle = useMemo(
+    () => ({
+      id: "S",
+      title: "Show sidebar",
+      onClick: () => api.toggleNav(),
+      closeOnClick: !0,
+      active: isNavShown,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toggleNav }) : null,
+      icon: isNavShown ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys, isNavShown]
+  ), toolbarToogle = useMemo(
+    () => ({
+      id: "T",
+      title: "Show toolbar",
+      onClick: () => api.toggleToolbar(),
+      active: showToolbar,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toolbar }) : null,
+      icon: showToolbar ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys, showToolbar]
+  ), addonsToggle = useMemo(
+    () => ({
+      id: "A",
+      title: "Show addons panel",
+      onClick: () => api.togglePanel(),
+      active: isPanelShown,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.togglePanel }) : null,
+      icon: isPanelShown ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys, isPanelShown]
+  ), up = useMemo(
+    () => ({
+      id: "up",
+      title: "Previous component",
+      onClick: () => api.jumpToComponent(-1),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevComponent }) : null,
+      icon: react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  ), down = useMemo(
+    () => ({
+      id: "down",
+      title: "Next component",
+      onClick: () => api.jumpToComponent(1),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextComponent }) : null,
+      icon: react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  ), prev = useMemo(
+    () => ({
+      id: "prev",
+      title: "Previous story",
+      onClick: () => api.jumpToStory(-1),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevStory }) : null,
+      icon: react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  ), next = useMemo(
+    () => ({
+      id: "next",
+      title: "Next story",
+      onClick: () => api.jumpToStory(1),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextStory }) : null,
+      icon: react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  ), collapse = useMemo(
+    () => ({
+      id: "collapse",
+      title: "Collapse all",
+      onClick: () => api.emit(STORIES_COLLAPSE_ALL),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.collapseAll }) : null,
+      icon: react_default.createElement(react_default.Fragment, null)
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  ), documentation = useMemo(() => ({
+    id: "documentation",
+    title: "Documentation",
+    closeOnClick: !0,
+    href: api.getDocsUrl({ versioned: !0, renderer: !0 }),
+    right: react_default.createElement(ActionList.Icon, null, react_default.createElement(ShareAltIcon, null)),
+    icon: react_default.createElement(DocumentIcon, null)
+  }), [api]), getAddonsShortcuts = useCallback(() => {
+    let addonsShortcuts = api.getAddonsShortcuts(), keys = shortcutKeys;
+    return Object.entries(addonsShortcuts).filter(([_2, { showInMenu }]) => showInMenu).map(([actionName, { label, action }]) => ({
+      id: actionName,
+      title: label,
+      onClick: () => action(),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: keys[actionName] }) : null
+    }));
+  }, [api, enableShortcuts, shortcutKeys]);
+  return useMemo(
+    () => [
+      [
+        about,
+        ...scope.CONFIG_TYPE === "DEVELOPMENT" ? [guide] : [],
+        ...enableShortcuts ? [shortcuts] : []
+      ],
+      [sidebarToggle, toolbarToogle, addonsToggle, up, down, prev, next, collapse],
+      getAddonsShortcuts(),
+      [documentation]
+    ],
+    [
+      about,
+      guide,
+      documentation,
+      shortcuts,
+      sidebarToggle,
+      toolbarToogle,
+      addonsToggle,
+      up,
+      down,
+      prev,
+      next,
+      collapse,
+      getAddonsShortcuts,
+      enableShortcuts
+    ]
+  );
+};
+
 // src/manager/container/Sidebar.tsx
 var Sidebar3 = react_default.memo(function({ onMenuClick }) {
   return react_default.createElement(Consumer, { filter: ({ state, api }) => {
@@ -17930,7 +18690,7 @@ var App = ({ managerLayoutState, setManagerLayoutState, pages, hasTab }) => {
       attributes: !0,
       attributeFilter: ["inert"]
     }), () => observer.disconnect();
-  }, []), react_default.createElement(react_default.Fragment, null, react_default.createElement(Global, { styles: createGlobal }), react_default.createElement(
+  }, []), react_default.createElement(react_default.Fragment, null, react_default.createElement(Global, { styles: createGlobal }), react_default.createElement(ManagerErrorBoundary, null, react_default.createElement(
     Layout,
     {
       hasTab,
@@ -17939,9 +18699,9 @@ var App = ({ managerLayoutState, setManagerLayoutState, pages, hasTab }) => {
       slotMain: react_default.createElement(Preview_default, { id: "main", withLoader: !0 }),
       slotSidebar: react_default.createElement(Sidebar_default, { onMenuClick: () => setMobileAboutOpen((state) => !state) }),
       slotPanel: react_default.createElement(Panel_default, null),
-      slotPages: pages.map(({ id, render: Content5 }) => react_default.createElement(Content5, { key: id }))
+      slotPages: pages.map(({ id, render: Content6 }) => react_default.createElement(Content6, { key: id }))
     }
-  ));
+  )));
 };
 
 // src/manager/provider.ts
@@ -17958,7 +18718,7 @@ var Provider2 = class {
 };
 
 // src/manager/settings/About.tsx
-var Container8 = styled.div({
+var Container9 = styled.div({
   display: "flex",
   alignItems: "center",
   flexDirection: "column",
@@ -17995,7 +18755,7 @@ var Container8 = styled.div({
   "&:hover": {
     color: theme.base === "light" ? theme.color.darkest : theme.color.lightest
   }
-})), AboutScreen = ({ onNavigateToWhatsNew }) => react_default.createElement(Container8, null, react_default.createElement(Header, null, react_default.createElement(StorybookLogo, { alt: "Storybook" })), react_default.createElement(UpgradeBlock, { onNavigateToWhatsNew }), react_default.createElement(Footer, null, react_default.createElement(Actions2, null, react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://github.com/storybookjs/storybook" }, react_default.createElement(GithubIcon, null), "GitHub")), react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://storybook.js.org/docs?ref=ui" }, react_default.createElement(DocumentIcon, { style: { display: "inline", marginRight: 5 } }), "Documentation"))), react_default.createElement("div", null, "Open source software maintained by", " ", react_default.createElement(StyledLink, { href: "https://www.chromatic.com/" }, "Chromatic"), " and the", " ", react_default.createElement(StyledLink, { href: "https://github.com/storybookjs/storybook/graphs/contributors" }, "Storybook Community"))));
+})), AboutScreen = ({ onNavigateToWhatsNew }) => react_default.createElement(Container9, null, react_default.createElement(Header, null, react_default.createElement(StorybookLogo, { alt: "Storybook" })), react_default.createElement(UpgradeBlock, { onNavigateToWhatsNew }), react_default.createElement(Footer, null, react_default.createElement(Actions2, null, react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://github.com/storybookjs/storybook" }, react_default.createElement(GithubIcon, null), "GitHub")), react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://storybook.js.org/docs?ref=ui" }, react_default.createElement(DocumentIcon, { style: { display: "inline", marginRight: 5 } }), "Documentation"))), react_default.createElement("div", null, "Open source software maintained by", " ", react_default.createElement(StyledLink, { href: "https://www.chromatic.com/" }, "Chromatic"), " and the", " ", react_default.createElement(StyledLink, { href: "https://github.com/storybookjs/storybook/graphs/contributors" }, "Storybook Community"))));
 
 // src/manager/settings/AboutPage.tsx
 var NotificationClearer = class extends Component {
@@ -18404,7 +19164,7 @@ var Sections = styled.ol(({ theme }) => ({
 };
 
 // src/manager/settings/GuidePage.tsx
-var Container9 = styled.div(({ theme }) => ({
+var Container10 = styled.div(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   maxWidth: 600,
@@ -18427,7 +19187,7 @@ var Container9 = styled.div(({ theme }) => ({
   }
 })), GuidePage = () => {
   let checklist = useChecklist();
-  return react_default.createElement(Container9, null, react_default.createElement(Intro, null, react_default.createElement("h1", null, "Guide"), react_default.createElement("p", null, "Whether you're just getting started or looking for ways to level up, this checklist will help you make the most of your Storybook.")), react_default.createElement(Checklist, { ...checklist }), checklist.openItems.length === 0 ? react_default.createElement("center", null, "Your work here is done!") : checklist.widget.disable || checklist.openItems.every((item) => item.isMuted) ? react_default.createElement("center", null, "Want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.disable(!1) }, "Show in sidebar")) : react_default.createElement("center", null, "Don't want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.mute(checklist.allItems.map(({ id }) => id)) }, "Remove from sidebar")));
+  return react_default.createElement(Container10, null, react_default.createElement(Intro, null, react_default.createElement("h1", null, "Guide"), react_default.createElement("p", null, "Whether you're just getting started or looking for ways to level up, this checklist will help you make the most of your Storybook.")), react_default.createElement(Checklist, { ...checklist }), scope.FEATURES?.sidebarOnboardingChecklist !== !1 && react_default.createElement(react_default.Fragment, null, checklist.openItems.length === 0 ? react_default.createElement("center", null, "Your work here is done!") : checklist.widget.disable || checklist.openItems.every((item) => item.isMuted) ? react_default.createElement("center", null, "Want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.disable(!1) }, "Show in sidebar")) : react_default.createElement("center", null, "Don't want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.mute(checklist.allItems.map(({ id }) => id)) }, "Remove from sidebar"))));
 };
 
 // src/manager/settings/SettingsFooter.tsx
@@ -18512,7 +19272,7 @@ var Header2 = styled.header(({ theme }) => ({
     height: 14,
     width: 14
   }
-), Container10 = styled.div(({ theme }) => ({
+), Container11 = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2,
   padding: "3rem 20px",
   maxWidth: 600,
@@ -18646,7 +19406,7 @@ var ShortcutsScreen = class extends Component {
   }
   render() {
     let layout = this.renderKeyForm();
-    return react_default.createElement(Container10, null, react_default.createElement(Header2, null, "Keyboard shortcuts"), layout, react_default.createElement(
+    return react_default.createElement(Container11, null, react_default.createElement(Header2, null, "Keyboard shortcuts"), layout, react_default.createElement(
       Button,
       {
         ariaLabel: !1,
@@ -18697,7 +19457,7 @@ var Centered = styled.div({
   margin: "0 auto",
   fontSize: `${theme.typography.size.s1}px`,
   lineHeight: "16px"
-})), Container11 = styled.div(({ theme }) => ({
+})), Container12 = styled.div(({ theme }) => ({
   position: "absolute",
   width: "100%",
   height: 40,
@@ -18717,7 +19477,7 @@ var Centered = styled.div({
   let theme = useTheme(), [copyText, setCopyText] = useState("Copy Link"), copyLink = () => {
     onCopyLink(), setCopyText("Copied!"), setTimeout(() => setCopyText("Copy Link"), 4e3);
   };
-  return react_default.createElement(Container11, null, react_default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, react_default.createElement(HeartIcon, { color: theme.color.mediumdark }), react_default.createElement("div", null, "Share this with your team."), react_default.createElement(Button, { ariaLabel: !1, onClick: copyLink, size: "small", variant: "ghost" }, copyText)), isNotificationsEnabled ? react_default.createElement(Button, { ariaLabel: !1, size: "small", variant: "ghost", onClick: onToggleNotifications }, react_default.createElement(EyeCloseIcon, null), "Hide notifications") : react_default.createElement(Button, { ariaLabel: !1, size: "small", variant: "ghost", onClick: onToggleNotifications }, react_default.createElement(EyeIcon, null), "Show notifications"));
+  return react_default.createElement(Container12, null, react_default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, react_default.createElement(HeartIcon, { color: theme.color.mediumdark }), react_default.createElement("div", null, "Share this with your team."), react_default.createElement(Button, { ariaLabel: !1, onClick: copyLink, size: "small", variant: "ghost" }, copyText)), isNotificationsEnabled ? react_default.createElement(Button, { ariaLabel: !1, size: "small", variant: "ghost", onClick: onToggleNotifications }, react_default.createElement(EyeCloseIcon, null), "Hide notifications") : react_default.createElement(Button, { ariaLabel: !1, size: "small", variant: "ghost", onClick: onToggleNotifications }, react_default.createElement(EyeIcon, null), "Show notifications"));
 }, Iframe = styled.iframe(
   {
     position: "absolute",
@@ -18785,9 +19545,19 @@ var Centered = styled.div({
 var WhatsNewPage = () => react_default.createElement(WhatsNewScreen, null);
 
 // src/manager/settings/index.tsx
-var { document: document8 } = scope, Content4 = styled(ScrollArea)(({ theme }) => ({
+var { document: document8 } = scope, Content5 = styled(ScrollArea)(({ theme }) => ({
   background: theme.background.content
-})), RouteWrapper = ({ children, path }) => react_default.createElement(Content4, { vertical: !0, horizontal: !1 }, react_default.createElement(Route, { path }, children)), Pages = ({ changeTab, onClose, enableShortcuts = !0, enableWhatsNew }) => {
+})), SidebarToggle = styled.div({
+  // Extra specificity is necessary here
+  "&&:has(*)": {
+    order: 0,
+    display: "flex",
+    alignItems: "center",
+    marginLeft: 10,
+    marginRight: 6,
+    gap: 6
+  }
+}), RouteWrapper = ({ children, path }) => react_default.createElement(Content5, { vertical: !0, horizontal: !1 }, react_default.createElement(Route, { path }, children)), Pages = ({ changeTab, onClose, enableShortcuts = !0, enableWhatsNew }) => {
   react_default.useEffect(() => {
     let handleEscape = (event) => {
       !enableShortcuts || event.repeat || matchesModifiers(!1, event) && matchesKeyCode("Escape", event) && (event.preventDefault(), onClose());
@@ -18822,7 +19592,7 @@ var { document: document8 } = scope, Content4 = styled(ScrollArea)(({ theme }) =
       TabsView,
       {
         tabs,
-        tools: react_default.createElement(
+        tools: react_default.createElement(react_default.Fragment, null, react_default.createElement(SidebarToggle, null, menuTool.render({})), react_default.createElement(
           Button,
           {
             padding: "small",
@@ -18831,7 +19601,7 @@ var { document: document8 } = scope, Content4 = styled(ScrollArea)(({ theme }) =
             ariaLabel: "Close settings page"
           },
           react_default.createElement(CloseIcon, null)
-        ),
+        )),
         selected,
         onSelectionChange: changeTab
       }