storybook 10.2.0-beta.2 → 10.2.0-beta.4

package/dist/manager/runtime.js

@@ -1600,18 +1600,21 @@ var components_default = __STORYBOOK_COMPONENTS__, { A, AbstractToolbar, ActionB
 var defaultItemValues = {
   type: "item",
   value: ""
-}, normalizeArgType = (key, argType) => ({
-  ...argType,
-  name: argType.name || key,
-  description: argType.description || key,
-  toolbar: {
-    ...argType.toolbar,
-    items: argType.toolbar.items.map((_item) => {
-      let item = typeof _item == "string" ? { value: _item, title: _item } : _item;
-      return item.type === "reset" && argType.toolbar.icon && (item.icon = argType.toolbar.icon, item.hideIcon = !0, item.value = void 0), { ...defaultItemValues, ...item };
-    })
-  }
-});
+}, normalizeArgType = (key, argType) => {
+  let toolbar = argType.toolbar;
+  return toolbar ? {
+    ...argType,
+    name: argType.name || key,
+    description: argType.description || key,
+    toolbar: {
+      ...argType.toolbar,
+      items: toolbar.items.map((_item) => {
+        let item = typeof _item == "string" ? { value: _item, title: _item } : _item;
+        return item.type === "reset" && toolbar.icon && (item.icon = toolbar.icon, item.hideIcon = !0, item.value = void 0), { ...defaultItemValues, ...item };
+      })
+    }
+  } : null;
+};
 
 // src/toolbar/components/ToolbarMenuSelect.tsx
 init_react();
@@ -1865,28 +1868,25 @@ var NEW_ICON_MAP = icons_exports, Svg = styled.svg`
   vscode: "VSCodeIcon"
 };
 
-// src/toolbar/hoc/withKeyboardCycle.tsx
-init_react();
-
-// src/toolbar/utils/create-cycle-value-array.ts
-var disallowedCycleableItemTypes = ["reset"], createCycleValueArray = (items) => items.filter((item) => !disallowedCycleableItemTypes.includes(item.type)).map((item) => item.value);
+// src/toolbar/utils/get-selected.ts
+var getSelectedItem = ({ currentValue, items }) => items.find((item) => item.value === currentValue && item.type !== "reset");
 
 // src/toolbar/constants.ts
 var TOOLBAR_ID = "toolbar";
 
 // src/toolbar/utils/register-shortcuts.ts
 var registerShortcuts = async (api, id, shortcuts) => {
-  shortcuts && shortcuts.next && await api.setAddonShortcut(TOOLBAR_ID, {
+  shortcuts.next && await api.setAddonShortcut(TOOLBAR_ID, {
     label: shortcuts.next.label,
     defaultShortcut: shortcuts.next.keys,
     actionName: `${id}:next`,
     action: shortcuts.next.action
-  }), shortcuts && shortcuts.previous && await api.setAddonShortcut(TOOLBAR_ID, {
+  }), shortcuts.previous && await api.setAddonShortcut(TOOLBAR_ID, {
     label: shortcuts.previous.label,
     defaultShortcut: shortcuts.previous.keys,
     actionName: `${id}:previous`,
     action: shortcuts.previous.action
-  }), shortcuts && shortcuts.reset && await api.setAddonShortcut(TOOLBAR_ID, {
+  }), shortcuts.reset && await api.setAddonShortcut(TOOLBAR_ID, {
     label: shortcuts.reset.label,
     defaultShortcut: shortcuts.reset.keys,
     actionName: `${id}:reset`,
@@ -1894,42 +1894,6 @@ var registerShortcuts = async (api, id, shortcuts) => {
   });
 };
 
-// src/toolbar/hoc/withKeyboardCycle.tsx
-var withKeyboardCycle = (Component2) => (props) => {
-  let {
-    id,
-    toolbar: { items, shortcuts }
-  } = props, api = useStorybookApi(), [globals, updateGlobals] = useGlobals(), cycleValues = useRef([]), currentValue = globals[id], reset = useCallback(() => {
-    updateGlobals({ [id]: "" });
-  }, [updateGlobals]), setNext = useCallback(() => {
-    let values = cycleValues.current, currentIndex = values.indexOf(currentValue), newCurrentIndex = currentIndex === values.length - 1 ? 0 : currentIndex + 1, newCurrent = cycleValues.current[newCurrentIndex];
-    updateGlobals({ [id]: newCurrent });
-  }, [cycleValues, currentValue, updateGlobals]), setPrevious = useCallback(() => {
-    let values = cycleValues.current, indexOf = values.indexOf(currentValue), currentIndex = indexOf > -1 ? indexOf : 0, newCurrentIndex = currentIndex === 0 ? values.length - 1 : currentIndex - 1, newCurrent = cycleValues.current[newCurrentIndex];
-    updateGlobals({ [id]: newCurrent });
-  }, [cycleValues, currentValue, updateGlobals]);
-  return useEffect(() => {
-    shortcuts && registerShortcuts(api, id, {
-      next: { ...shortcuts.next, action: setNext },
-      previous: { ...shortcuts.previous, action: setPrevious },
-      reset: { ...shortcuts.reset, action: reset }
-    });
-  }, [api, id, shortcuts, setNext, setPrevious, reset]), useEffect(() => {
-    cycleValues.current = createCycleValueArray(items);
-  }, []), react_default.createElement(Component2, { cycleValues: cycleValues.current, ...props });
-};
-
-// src/toolbar/utils/get-selected.ts
-var getSelectedItem = ({ currentValue, items }) => currentValue != null && items.find((item) => item.value === currentValue && item.type !== "reset"), getSelectedIcon = ({ currentValue, items }) => {
-  let selectedItem = getSelectedItem({ currentValue, items });
-  if (selectedItem)
-    return selectedItem.icon;
-}, getSelectedTitle = ({ currentValue, items }) => {
-  let selectedItem = getSelectedItem({ currentValue, items });
-  if (selectedItem)
-    return selectedItem.title;
-};
-
 // src/toolbar/components/ToolbarMenuSelect.tsx
 var ToolbarMenuItemContainer = styled("div")({
   width: "100%",
@@ -1938,16 +1902,16 @@ var ToolbarMenuItemContainer = styled("div")({
   gap: 8
 }), ToolbarMenuItemMiddle = styled("div")({
   flex: 1
-}), ToolbarMenuSelect = withKeyboardCycle(
-  ({
-    id,
-    name,
-    description,
-    toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle }
-  }) => {
-    let [globals, updateGlobals, storyGlobals] = useGlobals(), currentValue = globals[id], isOverridden = id in storyGlobals, icon = _icon, title2 = _title;
-    preventDynamicIcon || (icon = getSelectedIcon({ currentValue, items }) || icon), dynamicTitle && (title2 = getSelectedTitle({ currentValue, items }) || title2), !title2 && !icon && console.warn(`Toolbar '${name}' has no title or icon`);
-    let resetItem = items.find((item) => item.type === "reset"), resetLabel = resetItem?.title, options2 = items.filter((item) => item.type === "item").map((item) => {
+}), ToolbarMenuSelect = ({
+  id,
+  name,
+  description,
+  toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle, shortcuts }
+}) => {
+  let api = useStorybookApi(), [globals, updateGlobals, storyGlobals] = useGlobals(), currentValue = globals[id], isOverridden = id in storyGlobals, icon = _icon, title2 = _title;
+  preventDynamicIcon || (icon = getSelectedItem({ currentValue, items })?.icon || icon), dynamicTitle && (title2 = getSelectedItem({ currentValue, items })?.title || title2), !title2 && !icon && console.warn(`Toolbar '${name}' has no title or icon`);
+  let resetItem = items.find((item) => item.type === "reset"), resetLabel = resetItem?.title, options2 = react_default.useMemo(
+    () => items.filter((item) => item.type === "item").map((item) => {
       let itemTitle = item.title ?? item.value ?? "Untitled", iconComponent = !item.hideIcon && item.icon ? react_default.createElement(Icons, { icon: item.icon, __suppressDeprecationWarning: !0 }) : void 0;
       return item.right ? {
         title: itemTitle,
@@ -1958,31 +1922,60 @@ var ToolbarMenuItemContainer = styled("div")({
         value: item.value,
         icon: iconComponent
       };
-    }), ariaLabel = description || title2 || name || id;
-    return react_default.createElement(
-      Select,
-      {
-        defaultOptions: [currentValue],
-        options: options2,
-        disabled: isOverridden,
-        ariaLabel,
-        tooltip: ariaLabel,
-        resetLabel,
-        onReset: resetItem ? () => updateGlobals({ [id]: resetItem?.value }) : void 0,
-        onSelect: (selected) => updateGlobals({ [id]: selected }),
-        icon: icon && react_default.createElement(Icons, { icon, __suppressDeprecationWarning: !0 })
-      },
-      title2
-    );
-  }
-);
+    }),
+    [items]
+  );
+  react_default.useEffect(() => {
+    if (shortcuts) {
+      let length = options2.length;
+      registerShortcuts(api, id, {
+        next: {
+          ...shortcuts.next,
+          action: () => {
+            let idx = options2.findIndex((i2) => i2.value === globals[id]), nextIdx = idx < 0 ? 0 : (idx + 1) % length;
+            updateGlobals({ [id]: options2[nextIdx].value });
+          }
+        },
+        previous: {
+          ...shortcuts.previous,
+          action: () => {
+            let idx = options2.findIndex((i2) => i2.value === globals[id]), previousIdx = idx < 0 ? length - 1 : (idx + length - 1) % length;
+            updateGlobals({ [id]: options2[previousIdx].value });
+          }
+        },
+        reset: {
+          ...shortcuts.reset,
+          action: () => {
+            updateGlobals({ [id]: void 0 });
+          }
+        }
+      });
+    }
+  }, [api, id, shortcuts, globals, options2, updateGlobals]);
+  let ariaLabel = description || title2 || name || id;
+  return react_default.createElement(
+    Select,
+    {
+      defaultOptions: [currentValue],
+      options: options2,
+      disabled: isOverridden,
+      ariaLabel,
+      tooltip: ariaLabel,
+      resetLabel,
+      onReset: resetItem ? () => updateGlobals({ [id]: resetItem?.value }) : void 0,
+      onSelect: (selected) => updateGlobals({ [id]: selected }),
+      icon: icon && react_default.createElement(Icons, { icon, __suppressDeprecationWarning: !0 })
+    },
+    title2
+  );
+};
 
 // src/toolbar/components/ToolbarManager.tsx
 var ToolbarManager = () => {
-  let globalTypes = useGlobalTypes(), globalIds = Object.keys(globalTypes).filter((id) => !!globalTypes[id].toolbar);
-  return globalIds.length ? react_default.createElement(react_default.Fragment, null, react_default.createElement(Separator, null), globalIds.map((id) => {
+  let globalTypes = useGlobalTypes();
+  return Object.keys(globalTypes).some((id) => !!globalTypes[id].toolbar) ? react_default.createElement(react_default.Fragment, null, react_default.createElement(Separator, null), Object.keys(globalTypes).map((id) => {
     let normalizedArgType = normalizeArgType(id, globalTypes[id]);
-    return react_default.createElement(ToolbarMenuSelect, { key: id, id, ...normalizedArgType });
+    return normalizedArgType && react_default.createElement(ToolbarMenuSelect, { key: id, id, ...normalizedArgType });
   })) : null;
 };
 
@@ -4537,13 +4530,13 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
   return useLandmarkIndicator(), react_default.createElement(
     LayoutContainer,
     {
-      navSize,
-      rightPanelWidth,
-      bottomPanelHeight,
       panelPosition: managerLayoutState.panelPosition,
-      isDragging,
-      viewMode: managerLayoutState.viewMode,
-      showPanel
+      showPanel,
+      style: {
+        "--nav-width": `${navSize}px`,
+        "--right-panel-width": `${rightPanelWidth}px`,
+        "--bottom-panel-height": `${bottomPanelHeight}px`
+      }
     },
     showPages && react_default.createElement(PagesContainer, null, slots.slotPages),
     react_default.createElement(react_default.Fragment, null, isDesktop && react_default.createElement(SidebarContainer, null, react_default.createElement(Drag, { ref: sidebarResizerRef }), slots.slotSidebar), isMobile2 && react_default.createElement(
@@ -4557,32 +4550,31 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
       Drag,
       {
         orientation: panelPosition === "bottom" ? "horizontal" : "vertical",
+        overlapping: panelPosition === "bottom" ? !!bottomPanelHeight : !!rightPanelWidth,
         position: panelPosition === "bottom" ? "left" : "right",
         ref: panelResizerRef
       }
     ), slots.slotPanel), isMobile2 && react_default.createElement(Notifications, null))
   );
-}, LayoutContainer = styled.div(
-  ({ navSize, rightPanelWidth, bottomPanelHeight, viewMode, panelPosition, showPanel }) => ({
-    width: "100%",
-    height: ["100vh", "100dvh"],
-    // This array is a special Emotion syntax to set a fallback if 100dvh is not supported
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-    colorScheme: "light dark",
-    [MEDIA_DESKTOP_BREAKPOINT]: {
-      display: "grid",
-      gap: 0,
-      gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`,
-      gridTemplateRows: `1fr minmax(0, ${bottomPanelHeight}px)`,
-      gridTemplateAreas: showPanel ? panelPosition === "right" ? `"sidebar content panel"
+}, LayoutContainer = styled.div(({ panelPosition, showPanel }) => ({
+  width: "100%",
+  height: ["100vh", "100dvh"],
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+  colorScheme: "light dark",
+  [MEDIA_DESKTOP_BREAKPOINT]: {
+    display: "grid",
+    gap: 0,
+    // This uses CSS variables to prevent Emotion from generating a new CSS className for every possible value
+    gridTemplateColumns: `minmax(0, var(--nav-width)) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, var(--right-panel-width))`,
+    gridTemplateRows: "1fr minmax(0, var(--bottom-panel-height))",
+    gridTemplateAreas: showPanel ? panelPosition === "right" ? `"sidebar content panel"
                   "sidebar content panel"` : `"sidebar content content"
                 "sidebar panel   panel"` : `"sidebar content content"
                   "sidebar content content"`
-    }
-  })
-), SidebarContainer = styled.div(({ theme }) => ({
+  }
+})), SidebarContainer = styled.div(({ theme }) => ({
   backgroundColor: theme.appBg,
   gridArea: "sidebar",
   position: "relative",
@@ -4613,7 +4605,10 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
     position: "relative",
     backgroundColor: theme.appContentBg,
     borderTop: position === "bottom" ? `1px solid ${theme.appBorderColor}` : void 0,
-    borderLeft: position === "right" ? `1px solid ${theme.appBorderColor}` : void 0
+    borderLeft: position === "right" ? `1px solid ${theme.appBorderColor}` : void 0,
+    "& > aside": {
+      overflow: "hidden"
+    }
   })
 ), Drag = styled.div(
   ({ theme }) => ({
@@ -4630,12 +4625,12 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
       opacity: 1
     }
   }),
-  ({ orientation = "vertical", position = "left" }) => orientation === "vertical" ? {
-    width: position === "left" ? 10 : 13,
+  ({ orientation = "vertical", overlapping = !0, position = "left" }) => orientation === "vertical" ? {
+    width: overlapping ? position === "left" ? 10 : 13 : 7,
     height: "100%",
     top: 0,
-    right: position === "left" ? "-7px" : void 0,
-    left: position === "right" ? "-7px" : void 0,
+    right: position === "left" ? -7 : void 0,
+    left: position === "right" ? -7 : void 0,
     "&:after": {
       width: 1,
       height: "100%",
@@ -4646,8 +4641,8 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
     }
   } : {
     width: "100%",
-    height: "13px",
-    top: "-7px",
+    height: overlapping ? 13 : 7,
+    top: -7,
     left: 0,
     "&:after": {
       width: "100%",
@@ -5134,6 +5129,10 @@ var Wrapper = styled.div(
         outline: "none"
       }
     },
+    "input + div": {
+      paddingInline: 0,
+      fontSize: "inherit"
+    },
     "&:has(input:focus-visible)": {
       outline: `2px solid ${theme.color.secondary}`,
       outlineOffset: -2
@@ -5149,8 +5148,8 @@ var Wrapper = styled.div(
   setValue,
   minValue = -1 / 0,
   maxValue = 1 / 0,
-  unit,
-  baseUnit,
+  unit: fixedUnit,
+  baseUnit = fixedUnit,
   className,
   style,
   ...props
@@ -5161,14 +5160,14 @@ var Wrapper = styled.div(
   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 };
+      let [, inputValue2, unit = fixedUnit || baseUnit || ""] = value2.match(/(-?\d+(?:\.\d+)?)(\%|[a-z]{1,4})?$/) || [];
+      return { number: Math.max(minValue, Math.min(parseFloat(inputValue2), maxValue)), unit };
     },
-    [minValue, maxValue, unit, baseUnit]
+    [minValue, maxValue, fixedUnit, baseUnit]
   ), updateValue = useCallback(
     (value2) => {
-      let { number, unit: unit2 } = parseValue(value2);
-      Number.isNaN(number) ? setInputValue(value2) : (setInputValue(`${number}${unit2 === baseUnit ? "" : unit2}`), setValue(`${number}${unit2}`));
+      let { number, unit } = parseValue(value2);
+      Number.isNaN(number) ? setInputValue(value2) : (setInputValue(`${number}${unit === baseUnit ? "" : unit}`), setValue(`${number}${unit}`));
     },
     [parseValue, setValue, baseUnit]
   ), onChange = useCallback(
@@ -5190,8 +5189,8 @@ var Wrapper = styled.div(
       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());
+      let { number, unit } = parseValue(inputValue);
+      Number.isNaN(number) || (updateValue(`${e2.key === "ArrowUp" ? number + 1 : number - 1}${unit}`), setInputSelection());
     }, input = inputRef.current;
     if (input)
       return input.addEventListener("keydown", handleKeyDown), () => input.removeEventListener("keydown", handleKeyDown);
@@ -5202,6 +5201,7 @@ var Wrapper = styled.div(
       id,
       ref: inputRef,
       value: inputValue,
+      suffix: fixedUnit || inputValue && baseUnit,
       onChange,
       onFocus: setInputSelection,
       onBlur: updateInputValue
@@ -5376,27 +5376,46 @@ var ViewportWrapper = styled.div(({ active, isDefault, theme }) => ({
   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();
+  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(), dragScrollTarget = useRef(null);
   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" });
+    let onDrag = (e2) => {
+      if (!(!targetRef.current || !dragStart.current)) {
+        if (dragRefX.current && (dragSide.current === "both" || dragSide.current === "right")) {
+          let newWidth = Math.max(VIEWPORT_MIN_WIDTH, dragStart.current[0] + e2.clientX);
+          targetRef.current.style.width = `${newWidth}px`, dragRefX.current.dataset.value = `${Math.round(newWidth / scale)}`;
+        }
+        if (dragRefY.current && (dragSide.current === "both" || dragSide.current === "bottom")) {
+          let newHeight = Math.max(VIEWPORT_MIN_HEIGHT, dragStart.current[1] + e2.clientY);
+          targetRef.current.style.height = `${newHeight}px`, dragRefY.current.dataset.value = `${Math.round(newHeight / scale)}`;
+        }
+        dragScrollTarget.current && dragScrollTarget.current.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;
+      if (window.removeEventListener("mouseup", onEnd), window.removeEventListener("mousemove", onDrag), setDragging("none"), dragStart.current = void 0, targetRef.current) {
+        let { clientWidth, clientHeight, dataset } = targetRef.current, scale2 = Number(dataset.scale) || 1;
+        resize(`${Math.round(clientWidth / scale2)}px`, `${Math.round(clientHeight / scale2)}px`);
+      }
     }, 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);
+      ], dragScrollTarget.current = targetRef.current?.querySelector(
+        `[data-edge="${dragSide.current}"]`
+      ), 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" };
+  }, [resize, scale]);
+  let dimensions = useMemo(() => {
+    let { number: nx, unit: ux = "px" } = parseNumber(width) ?? { number: 0, unit: "px" }, { number: ny, unit: uy = "px" } = parseNumber(height) ?? { number: 0, unit: "px" }, frameWidth = Math.max(VIEWPORT_MIN_WIDTH, nx * scale), frameHeight = Math.max(VIEWPORT_MIN_HEIGHT, ny * scale);
     return {
-      width: `${nx * scale}${ux}`,
-      height: `${ny * scale}${uy}`
+      frame: {
+        width: `${frameWidth}${ux}`,
+        height: `${frameHeight}${uy}`
+      },
+      display: {
+        width: `${nx}${ux === "px" ? "" : ux}`,
+        height: `${ny}${uy === "px" ? "" : 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(
@@ -5447,7 +5466,7 @@ var ViewportWrapper = styled.div(({ active, isDefault, theme }) => ({
       isDefault,
       "data-dragging": dragging,
       "data-scale": scale,
-      style: isDefault ? { height: "100%", width: "100%" } : frameStyles,
+      style: isDefault ? { height: "100%", width: "100%" } : dimensions.frame,
       ref: targetRef
     },
     react_default.createElement(
@@ -5469,7 +5488,7 @@ var ViewportWrapper = styled.div(({ active, isDefault, theme }) => ({
         ref: dragRefX,
         isDefault,
         "data-side": "right",
-        "data-value": width.replace("px", "")
+        "data-value": dimensions.display.width
       }
     ),
     react_default.createElement(
@@ -5478,7 +5497,7 @@ var ViewportWrapper = styled.div(({ active, isDefault, theme }) => ({
         ref: dragRefY,
         isDefault,
         "data-side": "bottom",
-        "data-value": height.replace("px", "")
+        "data-value": dimensions.display.height
       }
     ),
     react_default.createElement(DragHandle, { ref: dragRefXY, isDefault, "data-side": "both" })
@@ -11540,7 +11559,7 @@ var TourGuide = ({
 TourGuide.render = (props) => {
   let container = document.getElementById("storybook-tour");
   container || (container = document.createElement("div"), container.id = "storybook-tour", document.body.appendChild(container)), root = root ?? createRoot(container), root.render(
-    react_default.createElement(ThemeProvider, { theme: convert(themes.light) }, react_default.createElement(
+    props ? react_default.createElement(ThemeProvider, { theme: convert(themes.light) }, react_default.createElement(
       TourGuide,
       {
         ...props,
@@ -11551,7 +11570,7 @@ TourGuide.render = (props) => {
           props.onDismiss?.(), root?.render(null), root = null;
         }
       }
-    ))
+    )) : null
   );
 };
 
@@ -11918,9 +11937,9 @@ export default {
           after: ["installVitest"],
           label: "Test your components",
           criteria: "Component tests are run from the test widget in the sidebar",
-          subscribe: ({ done }) => internal_universalTestProviderStore.onStateChange(
-            (state) => state["storybook/test"] === "test-provider-state:succeeded" && done()
-          ),
+          subscribe: ({ done }) => internal_universalTestProviderStore.onStateChange((state) => {
+            state["storybook/test"] === "test-provider-state:running" && (TourGuide.render(null), done());
+          }),
           action: {
             label: "Start",
             onClick: ({ api }) => {
@@ -18104,7 +18123,7 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
           query: input,
           results,
           isNavVisible: !isOpen && document6.activeElement !== inputRef.current,
-          isNavReachable: input.length === 0,
+          isNavReachable: !isOpen || input.length === 0,
           isSearchResultRendered: isOpen,
           closeMenu,
           getMenuProps,

package/dist/manager-api/index.d.ts

@@ -952,7 +952,7 @@ declare function useGlobals(): [
     storyGlobals: Globals,
     userGlobals: Globals
 ];
-declare function useGlobalTypes(): ArgTypes;
+declare function useGlobalTypes(): GlobalTypes;
 declare function useArgTypes(): ArgTypes;
 
 declare const typesX: typeof Addon_TypesEnum;
@@ -3267,11 +3267,11 @@ declare const userSettingSchema: ZodObject<{
                 mutedAt?: number | undefined;
             }>>;
         }, "strip", ZodTypeAny, {
-            autodocs?: {
+            controls?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
-            controls?: {
+            autodocs?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
@@ -3356,11 +3356,11 @@ declare const userSettingSchema: ZodObject<{
                 mutedAt?: number | undefined;
             } | undefined;
         }, {
-            autodocs?: {
+            controls?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
-            controls?: {
+            autodocs?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
@@ -3454,11 +3454,11 @@ declare const userSettingSchema: ZodObject<{
         }>>;
     }, "strip", ZodTypeAny, {
         items?: {
-            autodocs?: {
+            controls?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
-            controls?: {
+            autodocs?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
@@ -3548,11 +3548,11 @@ declare const userSettingSchema: ZodObject<{
         } | undefined;
     }, {
         items?: {
-            autodocs?: {
+            controls?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
-            controls?: {
+            autodocs?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
@@ -3649,11 +3649,11 @@ declare const userSettingSchema: ZodObject<{
     userSince?: number | undefined;
     checklist?: {
         items?: {
-            autodocs?: {
+            controls?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
-            controls?: {
+            autodocs?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
@@ -3750,11 +3750,11 @@ declare const userSettingSchema: ZodObject<{
     userSince?: number | undefined;
     checklist?: {
         items?: {
-            autodocs?: {
+            controls?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;
-            controls?: {
+            autodocs?: {
                 status?: "done" | "open" | "accepted" | "skipped" | undefined;
                 mutedAt?: number | undefined;
             } | undefined;

package/dist/manager-api/index.js

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

package/dist/mocking-utils/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_dxneh53ovgi from 'node:url';
-import CJS_COMPAT_NODE_PATH_dxneh53ovgi from 'node:path';
-import CJS_COMPAT_NODE_MODULE_dxneh53ovgi from "node:module";
+import CJS_COMPAT_NODE_URL_96u9uvlttj6 from 'node:url';
+import CJS_COMPAT_NODE_PATH_96u9uvlttj6 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_96u9uvlttj6 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_dxneh53ovgi.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_dxneh53ovgi.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_dxneh53ovgi.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_96u9uvlttj6.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_96u9uvlttj6.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_96u9uvlttj6.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -16,8 +16,8 @@ import {
   join,
   normalize,
   resolve
-} from "../_node-chunks/chunk-HODKH6S2.js";
-import "../_node-chunks/chunk-ZYMMEEUR.js";
+} from "../_node-chunks/chunk-2MIIBCWO.js";
+import "../_node-chunks/chunk-5BZY2EBX.js";
 
 // ../../node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.mjs
 var comma = 44, semicolon = 59, chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", intToChar = new Uint8Array(64), charToInt = new Uint8Array(128);