storybook 10.2.0-alpha.8 → 10.2.0-beta.0

package/dist/core-server/presets/common-manager.js

@@ -8,8 +8,9 @@ import {
 } from "../../_browser-chunks/chunk-UAYGIC3L.js";
 import "../../_browser-chunks/chunk-242VQQM5.js";
 import {
-  dequal
-} from "../../_browser-chunks/chunk-54PNNATT.js";
+  dequal,
+  uniq
+} from "../../_browser-chunks/chunk-NQJGOFZV.js";
 import {
   ADDON_ID as ADDON_ID3,
   ADDON_ID2 as ADDON_ID4,
@@ -37,12 +38,9 @@ import {
 } from "../../_browser-chunks/chunk-V2VKKSMQ.js";
 import {
   cloneDeep,
-  pickBy,
-  uniq
-} from "../../_browser-chunks/chunk-CLSHX4VX.js";
-import "../../_browser-chunks/chunk-HPYUT3WS.js";
-import "../../_browser-chunks/chunk-2NDLAB5X.js";
-import "../../_browser-chunks/chunk-NZMVUW5T.js";
+  pickBy
+} from "../../_browser-chunks/chunk-YK43Z22A.js";
+import "../../_browser-chunks/chunk-LCHBOIHN.js";
 import {
   ADDON_ID,
   CLEAR_ID,
@@ -51,9 +49,8 @@ import {
   PARAM_KEY
 } from "../../_browser-chunks/chunk-6XWLIJQL.js";
 import {
-  MINIMAL_VIEWPORTS,
-  responsiveViewport
-} from "../../_browser-chunks/chunk-3PJE6VLG.js";
+  MINIMAL_VIEWPORTS
+} from "../../_browser-chunks/chunk-ASKQZAOS.js";
 import {
   ADDON_ID as ADDON_ID2,
   PARAM_KEY as PARAM_KEY2,
@@ -65,7 +62,7 @@ import {
 
 // src/core-server/presets/common-manager.ts
 import { global as global3 } from "@storybook/global";
-import { addons as addons8 } from "storybook/manager-api";
+import { addons as addons8, Tag } from "storybook/manager-api";
 
 // src/controls/manager.tsx
 import React28 from "react";
@@ -77,7 +74,6 @@ import { color } from "storybook/theming";
 
 // src/controls/components/ControlsPanel.tsx
 import React26, { useEffect as useEffect8, useMemo as useMemo3, useState as useState11 } from "react";
-import { ScrollArea } from "storybook/internal/components";
 import { global } from "@storybook/global";
 import {
   useArgTypes,
@@ -2768,7 +2764,7 @@ var FilesControl = ({
 };
 
 // ../addons/docs/src/blocks/controls/index.tsx
-var LazyColorControl = lazy(() => import("../../_browser-chunks/Color-E5XDEOX4.js")), ColorControl = (props) => React16.createElement(Suspense, { fallback: React16.createElement("div", null) }, React16.createElement(LazyColorControl, { ...props }));
+var LazyColorControl = lazy(() => import("../../_browser-chunks/Color-XESOIGZP.js")), ColorControl = (props) => React16.createElement(Suspense, { fallback: React16.createElement("div", null) }, React16.createElement(LazyColorControl, { ...props }));
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
 var Controls2 = {
@@ -3242,7 +3238,7 @@ var TableWrapper2 = styled19.table(({ theme: theme3, compact, inAddonPanel, inTa
     },
     // End Resets
     fontSize: theme3.typography.size.s2 - 1,
-    lineHeight: "20px",
+    lineHeight: "19px",
     textAlign: "left",
     width: "100%",
     // Margin collapse
@@ -3503,8 +3499,9 @@ var slideIn = keyframes({
   to: {}
 }), Container2 = styled20.div({
   containerType: "size",
-  position: "sticky",
+  position: "absolute",
   bottom: 0,
+  width: "100%",
   height: 41,
   overflow: "hidden",
   zIndex: 1
@@ -3523,6 +3520,7 @@ var slideIn = keyframes({
   display: "flex",
   flex: "99 0 auto",
   alignItems: "center",
+  marginInlineStart: 7,
   marginInlineEnd: 10,
   gap: 6
 }), Actions = styled20.div(({ theme: theme3 }) => ({
@@ -3607,11 +3605,14 @@ var slideIn = keyframes({
 var clean = (obj) => Object.entries(obj).reduce(
   (acc, [key, value2]) => value2 !== void 0 ? Object.assign(acc, { [key]: value2 }) : acc,
   {}
-), AddonWrapper = styled21.div(({ showSaveFromUI }) => ({
-  display: "grid",
-  gridTemplateRows: showSaveFromUI ? "1fr 41px" : "1fr",
+), AddonWrapper = styled21.div(({ showSaveFromUI, theme: theme3 }) => ({
   height: "100%",
-  maxHeight: "100vh"
+  maxHeight: "100vh",
+  paddingBottom: showSaveFromUI ? 41 : 0,
+  backgroundColor: theme3.background.content,
+  table: {
+    backgroundColor: theme3.background.app
+  }
 })), ControlsPanel = ({ saveStory, createStory }) => {
   let api = useStorybookApi(), [isLoading, setIsLoading] = useState11(!0), [args, updateArgs, resetArgs, initialArgs] = useArgs(), [globals] = useGlobals(), rows = useArgTypes(), {
     expanded,
@@ -3629,7 +3630,7 @@ var clean = (obj) => Object.entries(obj).reduce(
     () => !!args && !!initialArgs && !dequal(clean(args), clean(initialArgs)),
     [args, initialArgs]
   ), showSaveFromUI = hasControls && storyData.type === "story" && storyData.subtype !== "test" && hasUpdatedArgs && global.CONFIG_TYPE === "DEVELOPMENT" && disableSaveFromUI !== !0;
-  return React26.createElement(AddonWrapper, { showSaveFromUI }, React26.createElement(ScrollArea, { vertical: !0 }, React26.createElement(
+  return React26.createElement(AddonWrapper, { showSaveFromUI }, React26.createElement(
     ArgsTable,
     {
       key: path,
@@ -3643,7 +3644,7 @@ var clean = (obj) => Object.entries(obj).reduce(
       sort,
       isLoading
     }
-  )), showSaveFromUI && React26.createElement(SaveStory, { resetArgs, saveStory, createStory }));
+  ), showSaveFromUI && React26.createElement(SaveStory, { resetArgs, saveStory, createStory }));
 };
 
 // src/controls/components/Title.tsx
@@ -3723,7 +3724,7 @@ var manager_default = addons.register(ADDON_ID6, (api) => {
       title: Title,
       type: types.PANEL,
       paramKey: PARAM_KEY5,
-      render: ({ active }) => !active || !api.getCurrentStoryData() ? null : React28.createElement(AddonPanel, { active, hasScrollbar: !1 }, React28.createElement(ControlsPanel, { saveStory, createStory }))
+      render: ({ active }) => !active || !api.getCurrentStoryData() ? null : React28.createElement(AddonPanel, { active }, React28.createElement(ControlsPanel, { saveStory, createStory }))
     }), channel.on(SAVE_STORY_RESPONSE, (data) => {
       if (!data.success)
         return;
@@ -3765,7 +3766,7 @@ import { STORY_CHANGED as STORY_CHANGED2 } from "storybook/internal/core-events"
 
 // src/actions/components/ActionLogger/index.tsx
 import React31, { Fragment, forwardRef, useEffect as useEffect9, useRef as useRef5 } from "react";
-import { ActionBar, ScrollArea as ScrollArea2 } from "storybook/internal/components";
+import { ActionBar, ScrollArea } from "storybook/internal/components";
 
 // ../../node_modules/react-inspector/dist/index.mjs
 import React92 from "react";
@@ -4768,7 +4769,7 @@ var Action = styled22.div({
 
 // src/actions/components/ActionLogger/index.tsx
 var UnstyledWrapped = forwardRef(
-  ({ children, className }, ref) => React31.createElement(ScrollArea2, { ref, horizontal: !0, vertical: !0, className }, children)
+  ({ children, className }, ref) => React31.createElement(ScrollArea, { ref, horizontal: !0, vertical: !0, className }, children)
 );
 UnstyledWrapped.displayName = "UnstyledWrapped";
 var Wrapper8 = styled23(UnstyledWrapped)({
@@ -4869,7 +4870,7 @@ import {
 } from "storybook/manager-api";
 
 // src/component-testing/constants.ts
-var ADDON_ID7 = "storybook/interactions", PANEL_ID2 = `${ADDON_ID7}/panel`, DOCUMENTATION_LINK = "writing-tests/integrations/vitest-addon", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`, DOCUMENTATION_PLAY_FUNCTION_LINK = "writing-stories/play-function#writing-stories-with-the-play-function", INTERNAL_RENDER_CALL_ID = "internal_render_call";
+var ADDON_ID7 = "storybook/interactions", PANEL_ID2 = `${ADDON_ID7}/panel`, PARAM_KEY6 = "interactions", DOCUMENTATION_LINK = "writing-tests/integrations/vitest-addon", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`, DOCUMENTATION_PLAY_FUNCTION_LINK = "writing-stories/play-function#writing-stories-with-the-play-function", INTERNAL_RENDER_CALL_ID = "internal_render_call";
 
 // ../addons/a11y/src/constants.ts
 var ADDON_ID8 = "storybook/a11y", PANEL_ID3 = `${ADDON_ID8}/panel`;
@@ -4943,6 +4944,9 @@ function stripAnsi(string) {
 }
 
 // src/component-testing/utils.ts
+function isInteractionsDisabled(parameters) {
+  return !!parameters?.[PARAM_KEY6]?.disable;
+}
 function isTestAssertionError(error) {
   return isChaiError(error) || isJestError(error);
 }
@@ -6540,7 +6544,7 @@ var INITIAL_CONTROL_STATES = {
         { root: global2.document.querySelector('#storybook-panel-root [role="tabpanel"]') }
       ), endRef.current && observer.observe(endRef.current)), () => observer?.disconnect();
     }, []);
-    let lastStoryId = useRef6(void 0), lastRenderId = useRef6(0), emit = useChannel2(
+    let lastStoryId = useRef6(void 0), latestRenderId = useRef6(0), emit = useChannel2(
       {
         [EVENTS.CALL]: setCall,
         [EVENTS.SYNC]: (payload) => {
@@ -6552,7 +6556,7 @@ var INITIAL_CONTROL_STATES = {
           );
         },
         [STORY_RENDER_PHASE_CHANGED]: (event) => {
-          lastStoryId.current === event.storyId && ["preparing", "loading"].includes(event.newPhase) || (lastStoryId.current = event.storyId, lastRenderId.current = Math.max(lastRenderId.current, event.renderId || 0), lastRenderId.current === event.renderId && (event.newPhase === "rendering" ? (log.current = [getInternalRenderLogItem("active" /* ACTIVE */)], calls.current.set(INTERNAL_RENDER_CALL_ID, getInternalRenderCall(storyId)), set({
+          lastStoryId.current === event.storyId && ["preparing", "loading"].includes(event.newPhase) || (lastStoryId.current === event.storyId ? latestRenderId.current = Math.max(latestRenderId.current, event.renderId || 0) : (latestRenderId.current = event.renderId || 0, lastStoryId.current = event.storyId), latestRenderId.current === event.renderId && (event.newPhase === "rendering" ? (log.current = [getInternalRenderLogItem("active" /* ACTIVE */)], calls.current.set(INTERNAL_RENDER_CALL_ID, getInternalRenderCall(storyId)), set({
             status: "rendering",
             controlStates: INITIAL_CONTROL_STATES,
             pausedAt: void 0,
@@ -6680,6 +6684,7 @@ var manager_default3 = addons3.register(ADDON_ID7, () => {
       type: types3.PANEL,
       title: () => React57.createElement(PanelTitle, null),
       match: ({ viewMode }) => viewMode === "story",
+      disabled: isInteractionsDisabled,
       render: ({ active }) => React57.createElement(AddonPanel2, { active: !!active }, React57.createElement(Consumer, { filter }, (props) => React57.createElement(Panel, { ...props })))
     });
   }
@@ -6876,164 +6881,207 @@ import * as React67 from "react";
 import { addons as addons7, types as types7 } from "storybook/manager-api";
 
 // src/viewport/components/Tool.tsx
-import React66, { Fragment as Fragment6, useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo6 } from "react";
-import { Button as Button9, Select as Select2 } from "storybook/internal/components";
-import { GrowIcon, TransferIcon } from "@storybook/icons";
-import { useGlobals as useGlobals5, useParameter as useParameter4 } from "storybook/manager-api";
-import { Global, styled as styled34 } from "storybook/theming";
-
-// src/viewport/shortcuts.ts
-var getCurrentViewportIndex = (viewportsKeys, current) => viewportsKeys.indexOf(current), getNextViewport = (viewportsKeys, current) => {
-  let currentViewportIndex = getCurrentViewportIndex(viewportsKeys, current);
-  return currentViewportIndex === viewportsKeys.length - 1 ? viewportsKeys[0] : viewportsKeys[currentViewportIndex + 1];
-}, getPreviousViewport = (viewportsKeys, current) => {
-  let currentViewportIndex = getCurrentViewportIndex(viewportsKeys, current);
-  return currentViewportIndex < 1 ? viewportsKeys[viewportsKeys.length - 1] : viewportsKeys[currentViewportIndex - 1];
-}, registerShortcuts = async (api, viewport, updateGlobals, viewportsKeys) => {
-  await api.setAddonShortcut(ADDON_ID2, {
-    label: "Previous viewport",
-    defaultShortcut: ["alt", "shift", "V"],
-    actionName: "previous",
-    action: () => {
-      updateGlobals({
-        viewport: getPreviousViewport(viewportsKeys, viewport)
-      });
-    }
-  }), await api.setAddonShortcut(ADDON_ID2, {
-    label: "Next viewport",
-    defaultShortcut: ["alt", "V"],
-    actionName: "next",
-    action: () => {
-      updateGlobals({
-        viewport: getNextViewport(viewportsKeys, viewport)
-      });
-    }
-  }), await api.setAddonShortcut(ADDON_ID2, {
-    label: "Reset viewport",
-    defaultShortcut: ["alt", "control", "V"],
-    actionName: "reset",
-    action: () => {
-      updateGlobals({
-        viewport: { value: void 0, isRotated: !1 }
-      });
-    }
-  });
+import React66, { useMemo as useMemo7 } from "react";
+import { Select as Select2 } from "storybook/internal/components";
+import { GrowIcon } from "@storybook/icons";
+import { styled as styled33 } from "storybook/theming";
+
+// src/viewport/useViewport.ts
+import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo6, useRef as useRef7 } from "react";
+import { useGlobals as useGlobals5, useParameter as useParameter4, useStorybookApi as useStorybookApi10 } from "storybook/manager-api";
+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 = (value2, defaultIsRotated) => typeof value2 == "string" ? { value: value2, isRotated: defaultIsRotated } : { value: value2?.value, isRotated: value2?.isRotated ?? defaultIsRotated }, parseGlobals = (globals, storyGlobals, userGlobals, options, 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 global4 = normalizeGlobal(globals?.[PARAM_KEY2]), userGlobal = normalizeGlobal(userGlobals?.[PARAM_KEY2]), storyGlobal = normalizeGlobal(storyGlobals?.[PARAM_KEY2]), value2 = userGlobal?.value ?? storyGlobal?.value ?? global4?.value, isRotated = userGlobal?.isRotated ?? storyGlobal?.isRotated ?? global4?.isRotated ?? !1, keys = Object.keys(options), isLocked = disable || PARAM_KEY2 in storyGlobals || !keys.length, [match, vx, ux, vy, uy] = value2?.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 ? options[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 (value2 && keys.length) {
+    let { name, styles, type = "other" } = options[value2] ?? options[keys[0]];
+    return {
+      name,
+      type,
+      width: isRotated ? styles.height : styles.width,
+      height: isRotated ? styles.width : styles.height,
+      value: value2,
+      option: value2,
+      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 = useStorybookApi10(), { viewMode } = api.getUrlState(), lastSelectedOption = useRef7(), parameter = useParameter4(PARAM_KEY2), [globals, updateGlobals, storyGlobals, userGlobals] = useGlobals5(), { options = MINIMAL_VIEWPORTS, disable = !1 } = parameter || {}, { name, type, width, height, value: value2, option, isCustom, isDefault, isLocked, isRotated } = parseGlobals(
+    globals,
+    storyGlobals,
+    userGlobals,
+    options,
+    lastSelectedOption.current,
+    disable,
+    viewMode
+  ), update = useCallback10(
+    (input) => updateGlobals({ [PARAM_KEY2]: input }),
+    [updateGlobals]
+  ), resize = useCallback10(
+    (width2, height2) => {
+      let w2 = width2.replace(/px$/, "").replace(/%$/, "pct"), h2 = height2.replace(/px$/, "").replace(/%$/, "pct"), value3 = isRotated ? `${h2}-${w2}` : `${w2}-${h2}`, [match, vx, ux, vy, uy] = value3.match(URL_VALUE_PATTERN) || [];
+      match && (ux || Number(vx) >= 40) && (uy || Number(vy) >= 40) && update({ value: match, isRotated });
+    },
+    [update, isRotated]
+  );
+  return useEffect18(() => {
+    PARAM_KEY2 in storyGlobals && (update(normalizeGlobal(storyGlobals?.[PARAM_KEY2], !1)), lastSelectedOption.current = void 0);
+  }, [storyGlobals, update]), useEffect18(() => {
+    option && (Object.hasOwn(options, option) ? lastSelectedOption.current = option : (lastSelectedOption.current = void 0, update(normalizeGlobal(storyGlobals?.[PARAM_KEY2], !1))));
+  }, [storyGlobals, options, option, update]), useEffect18(() => {
+    api.setAddonShortcut(ADDON_ID2, {
+      label: "Next viewport",
+      defaultShortcut: ["alt", "V"],
+      actionName: "next",
+      action: () => update({ value: cycle(options, lastSelectedOption.current), isRotated })
+    }), api.setAddonShortcut(ADDON_ID2, {
+      label: "Previous viewport",
+      defaultShortcut: ["alt", "shift", "V"],
+      actionName: "previous",
+      action: () => update({ value: cycle(options, lastSelectedOption.current, -1), isRotated })
+    }), api.setAddonShortcut(ADDON_ID2, {
+      label: "Reset viewport",
+      defaultShortcut: ["alt", "control", "V"],
+      actionName: "reset",
+      action: () => update({ value: void 0, isRotated: !1 })
+    });
+  }, [api, update, options, isRotated]), useMemo6(
+    () => ({
+      name,
+      type,
+      width,
+      height,
+      value: value2,
+      option,
+      isCustom,
+      isDefault,
+      isLocked,
+      isRotated,
+      options,
+      lastSelectedOption: lastSelectedOption.current,
+      resize,
+      reset: () => update({ value: void 0, isRotated: !1 }),
+      rotate: () => update({ value: value2, isRotated: !isRotated }),
+      select: (value3) => update({ value: value3, isRotated })
+    }),
+    [
+      name,
+      type,
+      width,
+      height,
+      value2,
+      option,
+      isCustom,
+      isDefault,
+      isRotated,
+      isLocked,
+      options,
+      resize,
+      update
+    ]
+  );
 };
 
-// src/viewport/utils.tsx
-import React65, { Fragment as Fragment5 } from "react";
-import { BrowserIcon, MobileIcon, TabletIcon } from "@storybook/icons";
-import { styled as styled33 } from "storybook/theming";
-var ActiveViewportSize = styled33.div({
-  display: "inline-flex",
-  alignItems: "center"
-}), ActiveViewportLabel = styled33.div(({ theme: theme3 }) => ({
-  display: "inline-block",
-  textDecoration: "none",
-  padding: 10,
-  fontWeight: theme3.typography.weight.bold,
-  fontSize: theme3.typography.size.s2 - 1,
-  lineHeight: "1",
-  height: 40,
-  border: "none",
-  borderTop: "3px solid transparent",
-  borderBottom: "3px solid transparent",
-  background: "transparent"
-})), iconsMap = {
+// src/viewport/viewportIcons.tsx
+import React65 from "react";
+import { BrowserIcon, DiamondIcon, MobileIcon, TabletIcon, WatchIcon } from "@storybook/icons";
+var iconsMap = {
   desktop: React65.createElement(BrowserIcon, null),
   mobile: React65.createElement(MobileIcon, null),
   tablet: React65.createElement(TabletIcon, null),
-  other: React65.createElement(Fragment5, null)
+  watch: React65.createElement(WatchIcon, null),
+  other: React65.createElement(DiamondIcon, null)
 };
 
 // src/viewport/components/Tool.tsx
-var ViewportTool = ({ api }) => {
-  let config = useParameter4(PARAM_KEY2), [globals, updateGlobals, storyGlobals] = useGlobals5(), { options = MINIMAL_VIEWPORTS, disable } = config || {}, data = globals?.[PARAM_KEY2] || {}, viewportName = typeof data == "string" ? data : data.value, isRotated = typeof data == "string" ? !1 : !!data.isRotated, item = options[viewportName] || responsiveViewport, isLocked = PARAM_KEY2 in storyGlobals, length = Object.keys(options).length;
-  if (useEffect18(() => {
-    registerShortcuts(api, viewportName, updateGlobals, Object.keys(options));
-  }, [options, viewportName, updateGlobals, api]), item.styles === null || !options || length < 1)
-    return null;
-  if (typeof item.styles == "function")
-    return console.warn(
-      "Addon Viewport no longer supports dynamic styles using a function, use css calc() instead"
-    ), null;
-  let width = isRotated ? item.styles.height : item.styles.width, height = isRotated ? item.styles.width : item.styles.height;
-  return disable ? null : React66.createElement(
-    Pure2,
-    {
-      item,
-      updateGlobals,
-      viewportMap: options,
-      viewportName,
-      isRotated,
-      isLocked,
-      width,
-      height
-    }
-  );
-}, FirstDimension = styled34(ActiveViewportLabel)({
-  order: 1
-}), DimensionSeparator = styled34.div({
-  order: 2
-}), LastDimension = styled34(ActiveViewportLabel)({
-  order: 3
-}), Pure2 = React66.memo(function(props) {
-  let { item, viewportMap, viewportName, isRotated, updateGlobals, isLocked, width, height } = props, update = useCallback10(
-    (input) => updateGlobals({ [PARAM_KEY2]: input }),
-    [updateGlobals]
-  ), options = useMemo6(
-    () => Object.entries(viewportMap).map(([k2, value2]) => ({
+var Dimensions = styled33.div(({ theme: theme3 }) => ({
+  display: "flex",
+  gap: 2,
+  marginLeft: 20,
+  fontFamily: theme3.typography.fonts.mono,
+  fontSize: theme3.typography.size.s1 - 1,
+  fontWeight: theme3.typography.weight.regular,
+  color: theme3.textMutedColor
+})), ViewportTool = () => {
+  let { name, value: value2, isDefault, isLocked, options: viewportMap, reset, select } = useViewport(), options = useMemo7(
+    () => Object.entries(viewportMap).map(([k2, value3]) => ({
       value: k2,
-      title: value2.name,
-      icon: iconsMap[value2.type]
+      title: value3.name,
+      icon: iconsMap[value3.type],
+      right: React66.createElement(Dimensions, null, React66.createElement("span", null, value3.styles.width.replace("px", "")), React66.createElement("span", null, "\xD7"), React66.createElement("span", null, value3.styles.height.replace("px", "")))
     })),
     [viewportMap]
   );
-  return React66.createElement(Fragment6, null, React66.createElement(
+  return React66.createElement(
     Select2,
     {
       resetLabel: "Reset viewport",
-      onReset: () => update({ value: void 0, isRotated: !1 }),
+      onReset: reset,
       key: "viewport",
       disabled: isLocked,
       ariaLabel: isLocked ? "Viewport size set by story parameters" : "Viewport size",
-      ariaDescription: "Select a viewport size among predefined options for the preview area, or reset to the default size.",
-      tooltip: isLocked ? "Viewport size set by story parameters" : "Resize viewport",
-      defaultOptions: viewportName,
+      ariaDescription: "Select a viewport among predefined options for the preview area, or reset to the default viewport.",
+      tooltip: isLocked ? "Viewport set by story parameters" : "Change viewport",
+      defaultOptions: value2,
       options,
-      onSelect: (selected) => update({ value: selected, isRotated: !1 }),
+      onSelect: (selected) => select(selected),
       icon: React66.createElement(GrowIcon, null)
     },
-    item !== responsiveViewport ? React66.createElement(React66.Fragment, null, item.name, " ", isRotated ? "(L)" : "(P)") : null
-  ), React66.createElement(
-    Global,
-    {
-      styles: {
-        'iframe[data-is-storybook="true"]': { width, height }
-      }
-    }
-  ), item !== responsiveViewport ? React66.createElement(ActiveViewportSize, null, React66.createElement(FirstDimension, { title: "Viewport width" }, React66.createElement("span", { className: "sb-sr-only" }, "Viewport width: "), width.replace("px", "")), isLocked && React66.createElement(DimensionSeparator, null, "/"), React66.createElement(LastDimension, { title: "Viewport height" }, React66.createElement("span", { className: "sb-sr-only" }, "Viewport height: "), height.replace("px", "")), !isLocked && React66.createElement(DimensionSeparator, null, React66.createElement(
-    Button9,
-    {
-      key: "viewport-rotate",
-      padding: "small",
-      variant: "ghost",
-      ariaLabel: "Rotate viewport",
-      onClick: () => {
-        update({ value: viewportName, isRotated: !isRotated });
-      }
-    },
-    React66.createElement(TransferIcon, null)
-  ))) : null);
-});
+    isDefault ? null : name
+  );
+};
 
 // src/viewport/manager.tsx
-var manager_default7 = addons7.register(ADDON_ID2, (api) => {
+var manager_default7 = addons7.register(ADDON_ID2, () => {
   globalThis?.FEATURES?.viewport && addons7.add(TOOL_ID, {
     title: "viewport / media-queries",
     type: types7.TOOL,
     match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
-    render: () => React67.createElement(ViewportTool, { api })
+    render: () => React67.createElement(ViewportTool, null)
   });
 });
 
@@ -7050,7 +7098,7 @@ var TAG_FILTERS = "tag-filters", STATIC_FILTER = "static-filter", tagFiltersMana
     let tags = item.tags ?? [];
     return (
       // we can filter out the primary story, but we still want to show autodocs
-      (tags.includes("dev") || item.type === "docs") && tags.filter((tag) => staticExcludeTags[tag]).length === 0
+      (tags.includes(Tag.DEV) || item.type === "docs") && tags.filter((tag) => staticExcludeTags[tag]).length === 0
     );
   });
 }), common_manager_default = [

package/dist/core-server/presets/common-override-preset.js

@@ -1,21 +1,21 @@
-import CJS_COMPAT_NODE_URL_3bfbtrdgjix from 'node:url';
-import CJS_COMPAT_NODE_PATH_3bfbtrdgjix from 'node:path';
-import CJS_COMPAT_NODE_MODULE_3bfbtrdgjix from "node:module";
+import CJS_COMPAT_NODE_URL_phceqgr585q from 'node:url';
+import CJS_COMPAT_NODE_PATH_phceqgr585q from 'node:path';
+import CJS_COMPAT_NODE_MODULE_phceqgr585q from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_3bfbtrdgjix.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_3bfbtrdgjix.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_3bfbtrdgjix.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_phceqgr585q.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_phceqgr585q.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_phceqgr585q.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-import {
-  glob
-} from "../../_node-chunks/chunk-3K6P75SS.js";
 import {
   slash
-} from "../../_node-chunks/chunk-LOXLI4XT.js";
-import "../../_node-chunks/chunk-5WQXPM6D.js";
+} from "../../_node-chunks/chunk-B422K4XV.js";
+import {
+  glob
+} from "../../_node-chunks/chunk-BJOXVTWM.js";
+import "../../_node-chunks/chunk-AXDM43NU.js";
 
 // src/core-server/utils/remove-mdx-entries.ts
 import { isAbsolute, join, relative } from "node:path";