storybook 10.0.0-beta.5 → 10.0.0-beta.7

package/dist/manager/runtime.js

@@ -1589,7 +1589,7 @@ var require_copy_to_clipboard = __commonJS({
       return message.replace(/#{\s*key\s*}/g, copyKey);
     }
     __name(format, "format");
-    function copy2(text, options2) {
+    function copy3(text, options2) {
       var debug, message, reselectPrevious, range3, selection, mark, success = false;
       if (!options2) {
         options2 = {};
@@ -1667,8 +1667,8 @@ var require_copy_to_clipboard = __commonJS({
       }
       return success;
     }
-    __name(copy2, "copy");
-    module.exports = copy2;
+    __name(copy3, "copy");
+    module.exports = copy3;
   }
 });
 
@@ -2455,7 +2455,7 @@ var { Channel, HEARTBEAT_INTERVAL, HEARTBEAT_MAX_LATENCY, PostMessageTransport,
 
 // global-externals:storybook/internal/core-events
 var core_events_default = __STORYBOOK_CORE_EVENTS__;
-var { ARGTYPES_INFO_REQUEST, ARGTYPES_INFO_RESPONSE, CHANNEL_CREATED, CHANNEL_WS_DISCONNECT, CONFIG_ERROR, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, CURRENT_STORY_WAS_SET, DOCS_PREPARED, DOCS_RENDERED, FILE_COMPONENT_SEARCH_REQUEST, FILE_COMPONENT_SEARCH_RESPONSE, FORCE_REMOUNT, FORCE_RE_RENDER, GLOBALS_UPDATED, NAVIGATE_URL, PLAY_FUNCTION_THREW_EXCEPTION, PRELOAD_ENTRIES, PREVIEW_BUILDER_PROGRESS, PREVIEW_KEYDOWN, REGISTER_SUBSCRIPTION, REQUEST_WHATS_NEW_DATA, RESET_STORY_ARGS, RESULT_WHATS_NEW_DATA, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, SELECT_STORY, SET_CONFIG, SET_CURRENT_STORY, SET_FILTER, SET_GLOBALS, SET_INDEX, SET_STORIES, SET_WHATS_NEW_CACHE, SHARED_STATE_CHANGED, SHARED_STATE_SET, STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL, STORY_ARGS_UPDATED, STORY_CHANGED, STORY_ERRORED, STORY_FINISHED, STORY_HOT_UPDATED, STORY_INDEX_INVALIDATED, STORY_MISSING, STORY_PREPARED, STORY_RENDERED, STORY_RENDER_PHASE_CHANGED, STORY_SPECIFIED, STORY_THREW_EXCEPTION, STORY_UNCHANGED, TELEMETRY_ERROR, TOGGLE_WHATS_NEW_NOTIFICATIONS, UNHANDLED_ERRORS_WHILE_PLAYING, UPDATE_GLOBALS, UPDATE_QUERY_PARAMS, UPDATE_STORY_ARGS } = __STORYBOOK_CORE_EVENTS__;
+var { ARGTYPES_INFO_REQUEST, ARGTYPES_INFO_RESPONSE, CHANNEL_CREATED, CHANNEL_WS_DISCONNECT, CONFIG_ERROR, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, CURRENT_STORY_WAS_SET, DOCS_PREPARED, DOCS_RENDERED, FILE_COMPONENT_SEARCH_REQUEST, FILE_COMPONENT_SEARCH_RESPONSE, FORCE_REMOUNT, FORCE_RE_RENDER, GLOBALS_UPDATED, NAVIGATE_URL, OPEN_IN_EDITOR_REQUEST, OPEN_IN_EDITOR_RESPONSE, PLAY_FUNCTION_THREW_EXCEPTION, PRELOAD_ENTRIES, PREVIEW_BUILDER_PROGRESS, PREVIEW_KEYDOWN, REGISTER_SUBSCRIPTION, REQUEST_WHATS_NEW_DATA, RESET_STORY_ARGS, RESULT_WHATS_NEW_DATA, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, SELECT_STORY, SET_CONFIG, SET_CURRENT_STORY, SET_FILTER, SET_GLOBALS, SET_INDEX, SET_STORIES, SET_WHATS_NEW_CACHE, SHARED_STATE_CHANGED, SHARED_STATE_SET, STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL, STORY_ARGS_UPDATED, STORY_CHANGED, STORY_ERRORED, STORY_FINISHED, STORY_HOT_UPDATED, STORY_INDEX_INVALIDATED, STORY_MISSING, STORY_PREPARED, STORY_RENDERED, STORY_RENDER_PHASE_CHANGED, STORY_SPECIFIED, STORY_THREW_EXCEPTION, STORY_UNCHANGED, TELEMETRY_ERROR, TOGGLE_WHATS_NEW_NOTIFICATIONS, UNHANDLED_ERRORS_WHILE_PLAYING, UPDATE_GLOBALS, UPDATE_QUERY_PARAMS, UPDATE_STORY_ARGS } = __STORYBOOK_CORE_EVENTS__;
 
 // ../node_modules/@storybook/global/dist/index.mjs
 var scope = (() => {
@@ -2572,6 +2572,7 @@ __export(icons_exports, {
   DownloadIcon: () => DownloadIcon,
   DragIcon: () => DragIcon,
   EditIcon: () => EditIcon,
+  EditorIcon: () => EditorIcon,
   EllipsisIcon: () => EllipsisIcon,
   EmailIcon: () => EmailIcon,
   ExpandAltIcon: () => ExpandAltIcon,
@@ -2731,7 +2732,7 @@ __export(icons_exports, {
   iconList: () => iconList
 });
 var icons_default = __STORYBOOK_ICONS__;
-var { AccessibilityAltIcon, AccessibilityIcon, AccessibilityIgnoredIcon, AddIcon, AdminIcon, AlertAltIcon, AlertIcon, AlignLeftIcon, AlignRightIcon, AppleIcon, ArrowBottomLeftIcon, ArrowBottomRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowSolidDownIcon, ArrowSolidLeftIcon, ArrowSolidRightIcon, ArrowSolidUpIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowUpIcon, AzureDevOpsIcon, BackIcon, BasketIcon, BatchAcceptIcon, BatchDenyIcon, BeakerIcon, BellIcon, BitbucketIcon, BoldIcon, BookIcon, BookmarkHollowIcon, BookmarkIcon, BottomBarIcon, BottomBarToggleIcon, BoxIcon, BranchIcon, BrowserIcon, BugIcon, ButtonIcon, CPUIcon, CalendarIcon, CameraIcon, CameraStabilizeIcon, CategoryIcon, CertificateIcon, ChangedIcon, ChatIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronSmallDownIcon, ChevronSmallLeftIcon, ChevronSmallRightIcon, ChevronSmallUpIcon, ChevronUpIcon, ChromaticIcon, ChromeIcon, CircleHollowIcon, CircleIcon, ClearIcon, CloseAltIcon, CloseIcon, CloudHollowIcon, CloudIcon, CogIcon, CollapseIcon, CommandIcon, CommentAddIcon, CommentIcon, CommentsIcon, CommitIcon, CompassIcon, ComponentDrivenIcon, ComponentIcon, ContrastIcon, ContrastIgnoredIcon, ControlsIcon, CopyIcon, CreditIcon, CrossIcon, DashboardIcon, DatabaseIcon, DeleteIcon, DiamondIcon, DirectionIcon, DiscordIcon, DocChartIcon, DocListIcon, DocumentIcon, DownloadIcon, DragIcon, EditIcon, EllipsisIcon, EmailIcon, ExpandAltIcon, ExpandIcon, EyeCloseIcon, EyeIcon, FaceHappyIcon, FaceNeutralIcon, FaceSadIcon, FacebookIcon, FailedIcon, FastForwardIcon, FigmaIcon, FilterIcon, FlagIcon, FolderIcon, FormIcon, GDriveIcon, GiftIcon, GithubIcon, GitlabIcon, GlobeIcon, GoogleIcon, GraphBarIcon, GraphLineIcon, GraphqlIcon, GridAltIcon, GridIcon, GrowIcon, HeartHollowIcon, HeartIcon, HomeIcon, HourglassIcon, InfoIcon, ItalicIcon, JumpToIcon, KeyIcon, LightningIcon, LightningOffIcon, LinkBrokenIcon, LinkIcon, LinkedinIcon, LinuxIcon, ListOrderedIcon, ListUnorderedIcon, LocationIcon, LockIcon, MarkdownIcon, MarkupIcon, MediumIcon, MemoryIcon, MenuIcon, MergeIcon, MirrorIcon, MobileIcon, MoonIcon, NutIcon, OutboxIcon, OutlineIcon, PaintBrushAltIcon, PaintBrushIcon, PaperClipIcon, ParagraphIcon, PassedIcon, PhoneIcon, PhotoDragIcon, PhotoIcon, PhotoStabilizeIcon, PinAltIcon, PinIcon, PlayAllHollowIcon, PlayBackIcon, PlayHollowIcon, PlayIcon, PlayNextIcon, PlusIcon, PointerDefaultIcon, PointerHandIcon, PowerIcon, PrintIcon, ProceedIcon, ProfileIcon, PullRequestIcon, QuestionIcon, RSSIcon, RedirectIcon, ReduxIcon, RefreshIcon, ReplyIcon, RepoIcon, RequestChangeIcon, RewindIcon, RulerIcon, SaveIcon, SearchIcon, ShareAltIcon, ShareIcon, ShieldIcon, SideBySideIcon, SidebarAltIcon, SidebarAltToggleIcon, SidebarIcon, SidebarToggleIcon, SortDownIcon, SortUpIcon, SpeakerIcon, StackedIcon, StarHollowIcon, StarIcon, StatusFailIcon, StatusIcon, StatusPassIcon, StatusWarnIcon, StickerIcon, StopAltHollowIcon, StopAltIcon, StopIcon, StorybookIcon, StructureIcon, SubtractIcon, SunIcon, SupportIcon, SweepIcon, SwitchAltIcon, SyncIcon, TabletIcon, ThumbsUpIcon, TimeIcon, TimerIcon, TransferIcon, TrashIcon, TwitterIcon, TypeIcon, UbuntuIcon, UndoIcon, UnfoldIcon, UnlockIcon, UnpinIcon, UploadIcon, UserAddIcon, UserAltIcon, UserIcon, UsersIcon, VSCodeIcon, VerifiedIcon, VideoIcon, WandIcon, WatchIcon, WindowsIcon, WrenchIcon, XIcon, YoutubeIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon, iconList } = __STORYBOOK_ICONS__;
+var { AccessibilityAltIcon, AccessibilityIcon, AccessibilityIgnoredIcon, AddIcon, AdminIcon, AlertAltIcon, AlertIcon, AlignLeftIcon, AlignRightIcon, AppleIcon, ArrowBottomLeftIcon, ArrowBottomRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowSolidDownIcon, ArrowSolidLeftIcon, ArrowSolidRightIcon, ArrowSolidUpIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowUpIcon, AzureDevOpsIcon, BackIcon, BasketIcon, BatchAcceptIcon, BatchDenyIcon, BeakerIcon, BellIcon, BitbucketIcon, BoldIcon, BookIcon, BookmarkHollowIcon, BookmarkIcon, BottomBarIcon, BottomBarToggleIcon, BoxIcon, BranchIcon, BrowserIcon, BugIcon, ButtonIcon, CPUIcon, CalendarIcon, CameraIcon, CameraStabilizeIcon, CategoryIcon, CertificateIcon, ChangedIcon, ChatIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronSmallDownIcon, ChevronSmallLeftIcon, ChevronSmallRightIcon, ChevronSmallUpIcon, ChevronUpIcon, ChromaticIcon, ChromeIcon, CircleHollowIcon, CircleIcon, ClearIcon, CloseAltIcon, CloseIcon, CloudHollowIcon, CloudIcon, CogIcon, CollapseIcon, CommandIcon, CommentAddIcon, CommentIcon, CommentsIcon, CommitIcon, CompassIcon, ComponentDrivenIcon, ComponentIcon, ContrastIcon, ContrastIgnoredIcon, ControlsIcon, CopyIcon, CreditIcon, CrossIcon, DashboardIcon, DatabaseIcon, DeleteIcon, DiamondIcon, DirectionIcon, DiscordIcon, DocChartIcon, DocListIcon, DocumentIcon, DownloadIcon, DragIcon, EditIcon, EditorIcon, EllipsisIcon, EmailIcon, ExpandAltIcon, ExpandIcon, EyeCloseIcon, EyeIcon, FaceHappyIcon, FaceNeutralIcon, FaceSadIcon, FacebookIcon, FailedIcon, FastForwardIcon, FigmaIcon, FilterIcon, FlagIcon, FolderIcon, FormIcon, GDriveIcon, GiftIcon, GithubIcon, GitlabIcon, GlobeIcon, GoogleIcon, GraphBarIcon, GraphLineIcon, GraphqlIcon, GridAltIcon, GridIcon, GrowIcon, HeartHollowIcon, HeartIcon, HomeIcon, HourglassIcon, InfoIcon, ItalicIcon, JumpToIcon, KeyIcon, LightningIcon, LightningOffIcon, LinkBrokenIcon, LinkIcon, LinkedinIcon, LinuxIcon, ListOrderedIcon, ListUnorderedIcon, LocationIcon, LockIcon, MarkdownIcon, MarkupIcon, MediumIcon, MemoryIcon, MenuIcon, MergeIcon, MirrorIcon, MobileIcon, MoonIcon, NutIcon, OutboxIcon, OutlineIcon, PaintBrushAltIcon, PaintBrushIcon, PaperClipIcon, ParagraphIcon, PassedIcon, PhoneIcon, PhotoDragIcon, PhotoIcon, PhotoStabilizeIcon, PinAltIcon, PinIcon, PlayAllHollowIcon, PlayBackIcon, PlayHollowIcon, PlayIcon, PlayNextIcon, PlusIcon, PointerDefaultIcon, PointerHandIcon, PowerIcon, PrintIcon, ProceedIcon, ProfileIcon, PullRequestIcon, QuestionIcon, RSSIcon, RedirectIcon, ReduxIcon, RefreshIcon, ReplyIcon, RepoIcon, RequestChangeIcon, RewindIcon, RulerIcon, SaveIcon, SearchIcon, ShareAltIcon, ShareIcon, ShieldIcon, SideBySideIcon, SidebarAltIcon, SidebarAltToggleIcon, SidebarIcon, SidebarToggleIcon, SortDownIcon, SortUpIcon, SpeakerIcon, StackedIcon, StarHollowIcon, StarIcon, StatusFailIcon, StatusIcon, StatusPassIcon, StatusWarnIcon, StickerIcon, StopAltHollowIcon, StopAltIcon, StopIcon, StorybookIcon, StructureIcon, SubtractIcon, SunIcon, SupportIcon, SweepIcon, SwitchAltIcon, SyncIcon, TabletIcon, ThumbsUpIcon, TimeIcon, TimerIcon, TransferIcon, TrashIcon, TwitterIcon, TypeIcon, UbuntuIcon, UndoIcon, UnfoldIcon, UnlockIcon, UnpinIcon, UploadIcon, UserAddIcon, UserAltIcon, UserIcon, UsersIcon, VSCodeIcon, VerifiedIcon, VideoIcon, WandIcon, WatchIcon, WindowsIcon, WrenchIcon, XIcon, YoutubeIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon, iconList } = __STORYBOOK_ICONS__;
 
 // global-externals:storybook/manager-api
 var manager_api_default = __STORYBOOK_API__;
@@ -5473,14 +5474,14 @@ var import_prop_types5 = __toESM(require_prop_types());
 
 // ../node_modules/react-transition-group/esm/utils/ChildMapping.js
 function getChildMapping(children2, mapFn) {
-  var mapper3 = /* @__PURE__ */ __name(function mapper4(child) {
+  var mapper5 = /* @__PURE__ */ __name(function mapper6(child) {
     return mapFn && isValidElement(child) ? mapFn(child) : child;
   }, "mapper");
   var result2 = /* @__PURE__ */ Object.create(null);
   if (children2) Children.map(children2, function(c2) {
     return c2;
   }).forEach(function(child) {
-    result2[child.key] = mapper3(child);
+    result2[child.key] = mapper5(child);
   });
   return result2;
 }
@@ -6695,6 +6696,7 @@ var useLayoutSyncingState = /* @__PURE__ */ __name(({
   });
   const { navSize, rightPanelWidth, bottomPanelHeight } = internalDraggingSizeState.isDragging ? internalDraggingSizeState : managerLayoutState;
   const customisedNavSize = api.getNavSizeWithCustomisations?.(navSize) ?? navSize;
+  const customisedShowPanel = api.getShowPanelWithCustomisations?.(isPanelShown) ?? isPanelShown;
   return {
     navSize: customisedNavSize,
     rightPanelWidth,
@@ -6703,7 +6705,7 @@ var useLayoutSyncingState = /* @__PURE__ */ __name(({
     panelResizerRef,
     sidebarResizerRef,
     showPages: isPagesShown,
-    showPanel: isPanelShown,
+    showPanel: customisedShowPanel,
     isDragging: internalDraggingSizeState.isDragging
   };
 }, "useLayoutSyncingState");
@@ -6773,7 +6775,7 @@ var LayoutContainer = styled.div(
         gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`,
         gridTemplateRows: `1fr minmax(0, ${bottomPanelHeight}px)`,
         gridTemplateAreas: (() => {
-          if (viewMode === "docs" || !showPanel) {
+          if (!showPanel) {
             return `"sidebar content content"
                   "sidebar content content"`;
           }
@@ -6936,6 +6938,8 @@ var events = /* @__PURE__ */ ((events2) => {
   events2["ARGTYPES_INFO_RESPONSE"] = "argtypesInfoResponse";
   events2["CREATE_NEW_STORYFILE_REQUEST"] = "createNewStoryfileRequest";
   events2["CREATE_NEW_STORYFILE_RESPONSE"] = "createNewStoryfileResponse";
+  events2["OPEN_IN_EDITOR_REQUEST"] = "openInEditorRequest";
+  events2["OPEN_IN_EDITOR_RESPONSE"] = "openInEditorResponse";
   return events2;
 })(events || {});
 var {
@@ -6995,7 +6999,9 @@ var {
   SAVE_STORY_REQUEST: SAVE_STORY_REQUEST2,
   SAVE_STORY_RESPONSE: SAVE_STORY_RESPONSE2,
   ARGTYPES_INFO_REQUEST: ARGTYPES_INFO_REQUEST2,
-  ARGTYPES_INFO_RESPONSE: ARGTYPES_INFO_RESPONSE2
+  ARGTYPES_INFO_RESPONSE: ARGTYPES_INFO_RESPONSE2,
+  OPEN_IN_EDITOR_REQUEST: OPEN_IN_EDITOR_REQUEST2,
+  OPEN_IN_EDITOR_RESPONSE: OPEN_IN_EDITOR_RESPONSE2
 } = events;
 
 // src/manager/components/panel/Panel.tsx
@@ -7272,194 +7278,6 @@ var FramesRenderer = /* @__PURE__ */ __name(({
   }));
 }, "FramesRenderer");
 
-// src/manager/components/preview/tools/addons.tsx
-var menuMapper = /* @__PURE__ */ __name(({ api, state }) => ({
-  isVisible: api.getIsPanelShown(),
-  singleStory: state.singleStory,
-  panelPosition: state.layout.panelPosition,
-  toggle: /* @__PURE__ */ __name(() => api.togglePanel(), "toggle")
-}), "menuMapper");
-var addonsTool = {
-  title: "addons",
-  id: "addons",
-  type: types.TOOL,
-  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: menuMapper }, ({ isVisible, toggle, singleStory, panelPosition }) => !singleStory && !isVisible && react_default.createElement(react_default.Fragment, null, react_default.createElement(IconButton, { "aria-label": "Show addons", key: "addons", onClick: toggle, title: "Show addons" }, panelPosition === "bottom" ? react_default.createElement(BottomBarIcon, null) : react_default.createElement(SidebarAltIcon, null)))), "render")
-};
-
-// src/manager/components/preview/tools/copy.tsx
-var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
-var { PREVIEW_URL, document: document2 } = scope;
-var copyMapper = /* @__PURE__ */ __name(({ state }) => {
-  const { storyId, refId, refs } = state;
-  const { location } = document2;
-  const ref = refs[refId];
-  let baseUrl = `${location.origin}${location.pathname}`;
-  if (!baseUrl.endsWith("/")) {
-    baseUrl += "/";
-  }
-  return {
-    refId,
-    baseUrl: ref ? `${ref.url}/iframe.html` : PREVIEW_URL || `${baseUrl}iframe.html`,
-    storyId,
-    queryParams: state.customQueryParams
-  };
-}, "copyMapper");
-var copyTool = {
-  title: "copy",
-  id: "copy",
-  type: types.TOOL,
-  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: copyMapper }, ({ baseUrl, storyId, queryParams }) => storyId ? react_default.createElement(
-    IconButton,
-    {
-      key: "copy",
-      onClick: () => (0, import_copy_to_clipboard.default)(getStoryHref(baseUrl, storyId, queryParams)),
-      title: "Copy canvas link"
-    },
-    react_default.createElement(LinkIcon, null)
-  ) : null), "render")
-};
-
-// src/manager/components/preview/tools/eject.tsx
-var { PREVIEW_URL: PREVIEW_URL2 } = scope;
-var ejectMapper = /* @__PURE__ */ __name(({ state }) => {
-  const { storyId, refId, refs } = state;
-  const ref = refs[refId];
-  return {
-    refId,
-    baseUrl: ref ? `${ref.url}/iframe.html` : PREVIEW_URL2 || "iframe.html",
-    storyId,
-    queryParams: state.customQueryParams
-  };
-}, "ejectMapper");
-var ejectTool = {
-  title: "eject",
-  id: "eject",
-  type: types.TOOL,
-  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: ejectMapper }, ({ baseUrl, storyId, queryParams }) => storyId ? react_default.createElement(IconButton, { key: "opener", asChild: true }, react_default.createElement(
-    "a",
-    {
-      href: getStoryHref(baseUrl, storyId, queryParams),
-      target: "_blank",
-      rel: "noopener noreferrer",
-      title: "Open canvas in new tab"
-    },
-    react_default.createElement(ShareAltIcon, null)
-  )) : null), "render")
-};
-
-// src/manager/components/preview/tools/remount.tsx
-var StyledAnimatedIconButton = styled(IconButton)(({ theme, animating, disabled }) => ({
-  opacity: disabled ? 0.5 : 1,
-  svg: {
-    animation: animating ? `${theme.animation.rotate360} 1000ms ease-out` : void 0
-  }
-}));
-var menuMapper2 = /* @__PURE__ */ __name(({ api, state }) => {
-  const { storyId } = state;
-  return {
-    storyId,
-    remount: /* @__PURE__ */ __name(() => api.emit(FORCE_REMOUNT, { storyId: state.storyId }), "remount"),
-    api
-  };
-}, "menuMapper");
-var remountTool = {
-  title: "remount",
-  id: "remount",
-  type: types.TOOL,
-  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: menuMapper2 }, ({ remount, storyId, api }) => {
-    const [isAnimating, setIsAnimating] = useState(false);
-    const remountComponent = /* @__PURE__ */ __name(() => {
-      if (!storyId) {
-        return;
-      }
-      remount();
-    }, "remountComponent");
-    api.on(FORCE_REMOUNT, () => {
-      setIsAnimating(true);
-    });
-    return react_default.createElement(
-      StyledAnimatedIconButton,
-      {
-        key: "remount",
-        title: "Remount component",
-        onClick: remountComponent,
-        onAnimationEnd: () => setIsAnimating(false),
-        animating: isAnimating,
-        disabled: !storyId
-      },
-      react_default.createElement(SyncIcon, null)
-    );
-  }), "render")
-};
-
-// src/manager/components/preview/tools/zoom.tsx
-var initialZoom = 1;
-var Context = createContext({ value: initialZoom, set: /* @__PURE__ */ __name((v2) => {
-}, "set") });
-var _ZoomProvider = class _ZoomProvider extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      value: initialZoom
-    };
-    this.set = /* @__PURE__ */ __name((value) => this.setState({ value }), "set");
-  }
-  render() {
-    const { children: children2, shouldScale } = this.props;
-    const { set: set2 } = this;
-    const { value } = this.state;
-    return react_default.createElement(Context.Provider, { value: { value: shouldScale ? value : initialZoom, set: set2 } }, children2);
-  }
-};
-__name(_ZoomProvider, "ZoomProvider");
-var ZoomProvider = _ZoomProvider;
-var { Consumer: ZoomConsumer } = Context;
-var Zoom2 = memo(/* @__PURE__ */ __name(function Zoom3({ zoomIn, zoomOut, reset }) {
-  return react_default.createElement(react_default.Fragment, null, react_default.createElement(IconButton, { key: "zoomin", onClick: zoomIn, title: "Zoom in" }, react_default.createElement(ZoomIcon, null)), react_default.createElement(IconButton, { key: "zoomout", onClick: zoomOut, title: "Zoom out" }, react_default.createElement(ZoomOutIcon, null)), react_default.createElement(IconButton, { key: "zoomreset", onClick: reset, title: "Reset zoom" }, react_default.createElement(ZoomResetIcon, null)));
-}, "Zoom"));
-var ZoomWrapper = memo(/* @__PURE__ */ __name(function ZoomWrapper2({
-  set: set2,
-  value
-}) {
-  const zoomIn = useCallback(
-    (e2) => {
-      e2.preventDefault();
-      set2(0.8 * value);
-    },
-    [set2, value]
-  );
-  const zoomOut = useCallback(
-    (e2) => {
-      e2.preventDefault();
-      set2(1.25 * value);
-    },
-    [set2, value]
-  );
-  const reset = useCallback(
-    (e2) => {
-      e2.preventDefault();
-      set2(initialZoom);
-    },
-    [set2, initialZoom]
-  );
-  return react_default.createElement(Zoom2, { key: "zoom", ...{ zoomIn, zoomOut, reset } });
-}, "ZoomWrapper"));
-function ZoomToolRenderer() {
-  return react_default.createElement(react_default.Fragment, null, react_default.createElement(ZoomConsumer, null, ({ set: set2, value }) => react_default.createElement(ZoomWrapper, { ...{ set: set2, value } })), react_default.createElement(Separator, null));
-}
-__name(ZoomToolRenderer, "ZoomToolRenderer");
-var zoomTool = {
-  title: "zoom",
-  id: "zoom",
-  type: types.TOOL,
-  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-  render: ZoomToolRenderer
-};
-
 // src/manager/components/preview/Toolbar.tsx
 var fullScreenMapper = /* @__PURE__ */ __name(({ api, state }) => {
   return {
@@ -7676,6 +7494,70 @@ var defaultWrappers = [
   }
 ];
 
+// src/manager/components/preview/tools/zoom.tsx
+var initialZoom = 1;
+var Context = createContext({ value: initialZoom, set: /* @__PURE__ */ __name((v2) => {
+}, "set") });
+var _ZoomProvider = class _ZoomProvider extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      value: initialZoom
+    };
+    this.set = /* @__PURE__ */ __name((value) => this.setState({ value }), "set");
+  }
+  render() {
+    const { children: children2, shouldScale } = this.props;
+    const { set: set2 } = this;
+    const { value } = this.state;
+    return react_default.createElement(Context.Provider, { value: { value: shouldScale ? value : initialZoom, set: set2 } }, children2);
+  }
+};
+__name(_ZoomProvider, "ZoomProvider");
+var ZoomProvider = _ZoomProvider;
+var { Consumer: ZoomConsumer } = Context;
+var Zoom2 = memo(/* @__PURE__ */ __name(function Zoom3({ zoomIn, zoomOut, reset }) {
+  return react_default.createElement(react_default.Fragment, null, react_default.createElement(IconButton, { key: "zoomin", onClick: zoomIn, title: "Zoom in" }, react_default.createElement(ZoomIcon, null)), react_default.createElement(IconButton, { key: "zoomout", onClick: zoomOut, title: "Zoom out" }, react_default.createElement(ZoomOutIcon, null)), react_default.createElement(IconButton, { key: "zoomreset", onClick: reset, title: "Reset zoom" }, react_default.createElement(ZoomResetIcon, null)));
+}, "Zoom"));
+var ZoomWrapper = memo(/* @__PURE__ */ __name(function ZoomWrapper2({
+  set: set2,
+  value
+}) {
+  const zoomIn = useCallback(
+    (e2) => {
+      e2.preventDefault();
+      set2(0.8 * value);
+    },
+    [set2, value]
+  );
+  const zoomOut = useCallback(
+    (e2) => {
+      e2.preventDefault();
+      set2(1.25 * value);
+    },
+    [set2, value]
+  );
+  const reset = useCallback(
+    (e2) => {
+      e2.preventDefault();
+      set2(initialZoom);
+    },
+    [set2, initialZoom]
+  );
+  return react_default.createElement(Zoom2, { key: "zoom", ...{ zoomIn, zoomOut, reset } });
+}, "ZoomWrapper"));
+function ZoomToolRenderer() {
+  return react_default.createElement(react_default.Fragment, null, react_default.createElement(ZoomConsumer, null, ({ set: set2, value }) => react_default.createElement(ZoomWrapper, { ...{ set: set2, value } })), react_default.createElement(Separator, null));
+}
+__name(ZoomToolRenderer, "ZoomToolRenderer");
+var zoomTool = {
+  title: "zoom",
+  id: "zoom",
+  type: types.TOOL,
+  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
+  render: ZoomToolRenderer
+};
+
 // src/manager/components/preview/Preview.tsx
 var canvasMapper = /* @__PURE__ */ __name(({ state, api }) => ({
   storyId: state.storyId,
@@ -7821,32 +7703,1591 @@ function filterTabs(panels, parameters) {
           hidden: t2.hidden
         };
       }
-      return panel;
-    });
-  }
-  return panels;
-}
-__name(filterTabs, "filterTabs");
-
-// src/manager/components/preview/tools/menu.tsx
-var menuMapper3 = /* @__PURE__ */ __name(({ api, state }) => ({
-  isVisible: api.getIsNavShown(),
-  singleStory: state.singleStory,
-  toggle: /* @__PURE__ */ __name(() => api.toggleNav(), "toggle")
-}), "menuMapper");
-var menuTool = {
-  title: "menu",
-  id: "menu",
+      return panel;
+    });
+  }
+  return panels;
+}
+__name(filterTabs, "filterTabs");
+
+// src/manager/components/preview/tools/addons.tsx
+var menuMapper = /* @__PURE__ */ __name(({ api, state }) => ({
+  isVisible: api.getIsPanelShown(),
+  singleStory: state.singleStory,
+  panelPosition: state.layout.panelPosition,
+  toggle: /* @__PURE__ */ __name(() => api.togglePanel(), "toggle")
+}), "menuMapper");
+var addonsTool = {
+  title: "addons",
+  id: "addons",
+  type: types.TOOL,
+  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
+  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: menuMapper }, ({ isVisible, toggle, singleStory, panelPosition }) => !singleStory && !isVisible && react_default.createElement(react_default.Fragment, null, react_default.createElement(IconButton, { "aria-label": "Show addons", key: "addons", onClick: toggle, title: "Show addons" }, panelPosition === "bottom" ? react_default.createElement(BottomBarIcon, null) : react_default.createElement(SidebarAltIcon, null)))), "render")
+};
+
+// src/manager/components/preview/tools/menu.tsx
+var menuMapper2 = /* @__PURE__ */ __name(({ api, state }) => ({
+  isVisible: api.getIsNavShown(),
+  singleStory: state.singleStory,
+  toggle: /* @__PURE__ */ __name(() => api.toggleNav(), "toggle")
+}), "menuMapper");
+var menuTool = {
+  title: "menu",
+  id: "menu",
+  type: types.TOOL,
+  // @ts-expect-error (non strict)
+  match: /* @__PURE__ */ __name(({ viewMode }) => ["story", "docs"].includes(viewMode), "match"),
+  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: menuMapper2 }, ({ isVisible, toggle, singleStory }) => !singleStory && !isVisible && react_default.createElement(react_default.Fragment, null, react_default.createElement(IconButton, { "aria-label": "Show sidebar", key: "menu", onClick: toggle, title: "Show sidebar" }, react_default.createElement(MenuIcon, null)), react_default.createElement(Separator, null))), "render")
+};
+
+// src/manager/components/preview/tools/open-in-editor.tsx
+var mapper2 = /* @__PURE__ */ __name(({ state, api }) => {
+  const { storyId, refId } = state;
+  const entry = api.getData(storyId, refId);
+  const isCompositionStory = !!refId;
+  return {
+    storyId,
+    isCompositionStory,
+    importPath: entry?.importPath
+  };
+}, "mapper");
+var openInEditorTool = {
+  title: "open-in-editor",
+  id: "open-in-editor",
+  type: types.TOOL,
+  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => scope.CONFIG_TYPE === "DEVELOPMENT" && (viewMode === "story" || viewMode === "docs") && !tabId, "match"),
+  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: mapper2 }, ({ importPath, isCompositionStory }) => {
+    const api = useStorybookApi();
+    if (isCompositionStory || !importPath) {
+      return null;
+    }
+    return react_default.createElement(
+      IconButton,
+      {
+        key: "open-in-editor",
+        onClick: () => api.openInEditor({
+          file: importPath
+        }),
+        title: "Open in editor",
+        "aria-label": "Open in editor"
+      },
+      react_default.createElement(EditorIcon, null)
+    );
+  }), "render")
+};
+
+// src/manager/components/preview/tools/remount.tsx
+var StyledAnimatedIconButton = styled(IconButton)(({ theme, animating, disabled }) => ({
+  opacity: disabled ? 0.5 : 1,
+  svg: {
+    animation: animating ? `${theme.animation.rotate360} 1000ms ease-out` : void 0
+  }
+}));
+var menuMapper3 = /* @__PURE__ */ __name(({ api, state }) => {
+  const { storyId } = state;
+  return {
+    storyId,
+    remount: /* @__PURE__ */ __name(() => api.emit(FORCE_REMOUNT, { storyId: state.storyId }), "remount"),
+    api
+  };
+}, "menuMapper");
+var remountTool = {
+  title: "remount",
+  id: "remount",
+  type: types.TOOL,
+  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
+  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: menuMapper3 }, ({ remount, storyId, api }) => {
+    const [isAnimating, setIsAnimating] = useState(false);
+    const remountComponent = /* @__PURE__ */ __name(() => {
+      if (!storyId) {
+        return;
+      }
+      remount();
+    }, "remountComponent");
+    api.on(FORCE_REMOUNT, () => {
+      setIsAnimating(true);
+    });
+    return react_default.createElement(
+      StyledAnimatedIconButton,
+      {
+        key: "remount",
+        title: "Remount component",
+        onClick: remountComponent,
+        onAnimationEnd: () => setIsAnimating(false),
+        animating: isAnimating,
+        disabled: !storyId
+      },
+      react_default.createElement(SyncIcon, null)
+    );
+  }), "render")
+};
+
+// src/manager/components/preview/tools/share.tsx
+var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
+
+// ../node_modules/qrcode.react/lib/esm/index.js
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value, "__defNormalProp");
+var __spreadValues = /* @__PURE__ */ __name((a2, b2) => {
+  for (var prop in b2 || (b2 = {}))
+    if (__hasOwnProp2.call(b2, prop))
+      __defNormalProp(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b2)) {
+      if (__propIsEnum.call(b2, prop))
+        __defNormalProp(a2, prop, b2[prop]);
+    }
+  return a2;
+}, "__spreadValues");
+var __objRest = /* @__PURE__ */ __name((source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+}, "__objRest");
+var qrcodegen;
+((qrcodegen2) => {
+  var _a, _b;
+  const _QrCode = (_a = class {
+    /*-- Constructor (low level) and fields --*/
+    // Creates a new QR Code with the given version number,
+    // error correction level, data codeword bytes, and mask number.
+    // This is a low-level API that most users should not use directly.
+    // A mid-level API is the encodeSegments() function.
+    constructor(version3, errorCorrectionLevel, dataCodewords, msk) {
+      this.version = version3;
+      this.errorCorrectionLevel = errorCorrectionLevel;
+      this.modules = [];
+      this.isFunction = [];
+      if (version3 < _a.MIN_VERSION || version3 > _a.MAX_VERSION)
+        throw new RangeError("Version value out of range");
+      if (msk < -1 || msk > 7)
+        throw new RangeError("Mask value out of range");
+      this.size = version3 * 4 + 17;
+      let row = [];
+      for (let i2 = 0; i2 < this.size; i2++)
+        row.push(false);
+      for (let i2 = 0; i2 < this.size; i2++) {
+        this.modules.push(row.slice());
+        this.isFunction.push(row.slice());
+      }
+      this.drawFunctionPatterns();
+      const allCodewords = this.addEccAndInterleave(dataCodewords);
+      this.drawCodewords(allCodewords);
+      if (msk == -1) {
+        let minPenalty = 1e9;
+        for (let i2 = 0; i2 < 8; i2++) {
+          this.applyMask(i2);
+          this.drawFormatBits(i2);
+          const penalty = this.getPenaltyScore();
+          if (penalty < minPenalty) {
+            msk = i2;
+            minPenalty = penalty;
+          }
+          this.applyMask(i2);
+        }
+      }
+      assert(0 <= msk && msk <= 7);
+      this.mask = msk;
+      this.applyMask(msk);
+      this.drawFormatBits(msk);
+      this.isFunction = [];
+    }
+    /*-- Static factory functions (high level) --*/
+    // Returns a QR Code representing the given Unicode text string at the given error correction level.
+    // As a conservative upper bound, this function is guaranteed to succeed for strings that have 738 or fewer
+    // Unicode code points (not UTF-16 code units) if the low error correction level is used. The smallest possible
+    // QR Code version is automatically chosen for the output. The ECC level of the result may be higher than the
+    // ecl argument if it can be done without increasing the version.
+    static encodeText(text, ecl) {
+      const segs = qrcodegen2.QrSegment.makeSegments(text);
+      return _a.encodeSegments(segs, ecl);
+    }
+    // Returns a QR Code representing the given binary data at the given error correction level.
+    // This function always encodes using the binary segment mode, not any text mode. The maximum number of
+    // bytes allowed is 2953. The smallest possible QR Code version is automatically chosen for the output.
+    // The ECC level of the result may be higher than the ecl argument if it can be done without increasing the version.
+    static encodeBinary(data, ecl) {
+      const seg = qrcodegen2.QrSegment.makeBytes(data);
+      return _a.encodeSegments([seg], ecl);
+    }
+    /*-- Static factory functions (mid level) --*/
+    // Returns a QR Code representing the given segments with the given encoding parameters.
+    // The smallest possible QR Code version within the given range is automatically
+    // chosen for the output. Iff boostEcl is true, then the ECC level of the result
+    // may be higher than the ecl argument if it can be done without increasing the
+    // version. The mask number is either between 0 to 7 (inclusive) to force that
+    // mask, or -1 to automatically choose an appropriate mask (which may be slow).
+    // This function allows the user to create a custom sequence of segments that switches
+    // between modes (such as alphanumeric and byte) to encode text in less space.
+    // This is a mid-level API; the high-level API is encodeText() and encodeBinary().
+    static encodeSegments(segs, ecl, minVersion = 1, maxVersion = 40, mask = -1, boostEcl = true) {
+      if (!(_a.MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= _a.MAX_VERSION) || mask < -1 || mask > 7)
+        throw new RangeError("Invalid value");
+      let version3;
+      let dataUsedBits;
+      for (version3 = minVersion; ; version3++) {
+        const dataCapacityBits2 = _a.getNumDataCodewords(version3, ecl) * 8;
+        const usedBits = QrSegment.getTotalBits(segs, version3);
+        if (usedBits <= dataCapacityBits2) {
+          dataUsedBits = usedBits;
+          break;
+        }
+        if (version3 >= maxVersion)
+          throw new RangeError("Data too long");
+      }
+      for (const newEcl of [_a.Ecc.MEDIUM, _a.Ecc.QUARTILE, _a.Ecc.HIGH]) {
+        if (boostEcl && dataUsedBits <= _a.getNumDataCodewords(version3, newEcl) * 8)
+          ecl = newEcl;
+      }
+      let bb = [];
+      for (const seg of segs) {
+        appendBits(seg.mode.modeBits, 4, bb);
+        appendBits(seg.numChars, seg.mode.numCharCountBits(version3), bb);
+        for (const b2 of seg.getData())
+          bb.push(b2);
+      }
+      assert(bb.length == dataUsedBits);
+      const dataCapacityBits = _a.getNumDataCodewords(version3, ecl) * 8;
+      assert(bb.length <= dataCapacityBits);
+      appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
+      appendBits(0, (8 - bb.length % 8) % 8, bb);
+      assert(bb.length % 8 == 0);
+      for (let padByte = 236; bb.length < dataCapacityBits; padByte ^= 236 ^ 17)
+        appendBits(padByte, 8, bb);
+      let dataCodewords = [];
+      while (dataCodewords.length * 8 < bb.length)
+        dataCodewords.push(0);
+      bb.forEach((b2, i2) => dataCodewords[i2 >>> 3] |= b2 << 7 - (i2 & 7));
+      return new _a(version3, ecl, dataCodewords, mask);
+    }
+    /*-- Accessor methods --*/
+    // Returns the color of the module (pixel) at the given coordinates, which is false
+    // for light or true for dark. The top left corner has the coordinates (x=0, y=0).
+    // If the given coordinates are out of bounds, then false (light) is returned.
+    getModule(x2, y2) {
+      return 0 <= x2 && x2 < this.size && 0 <= y2 && y2 < this.size && this.modules[y2][x2];
+    }
+    // Modified to expose modules for easy access
+    getModules() {
+      return this.modules;
+    }
+    /*-- Private helper methods for constructor: Drawing function modules --*/
+    // Reads this object's version field, and draws and marks all function modules.
+    drawFunctionPatterns() {
+      for (let i2 = 0; i2 < this.size; i2++) {
+        this.setFunctionModule(6, i2, i2 % 2 == 0);
+        this.setFunctionModule(i2, 6, i2 % 2 == 0);
+      }
+      this.drawFinderPattern(3, 3);
+      this.drawFinderPattern(this.size - 4, 3);
+      this.drawFinderPattern(3, this.size - 4);
+      const alignPatPos = this.getAlignmentPatternPositions();
+      const numAlign = alignPatPos.length;
+      for (let i2 = 0; i2 < numAlign; i2++) {
+        for (let j2 = 0; j2 < numAlign; j2++) {
+          if (!(i2 == 0 && j2 == 0 || i2 == 0 && j2 == numAlign - 1 || i2 == numAlign - 1 && j2 == 0))
+            this.drawAlignmentPattern(alignPatPos[i2], alignPatPos[j2]);
+        }
+      }
+      this.drawFormatBits(0);
+      this.drawVersion();
+    }
+    // Draws two copies of the format bits (with its own error correction code)
+    // based on the given mask and this object's error correction level field.
+    drawFormatBits(mask) {
+      const data = this.errorCorrectionLevel.formatBits << 3 | mask;
+      let rem2 = data;
+      for (let i2 = 0; i2 < 10; i2++)
+        rem2 = rem2 << 1 ^ (rem2 >>> 9) * 1335;
+      const bits = (data << 10 | rem2) ^ 21522;
+      assert(bits >>> 15 == 0);
+      for (let i2 = 0; i2 <= 5; i2++)
+        this.setFunctionModule(8, i2, getBit(bits, i2));
+      this.setFunctionModule(8, 7, getBit(bits, 6));
+      this.setFunctionModule(8, 8, getBit(bits, 7));
+      this.setFunctionModule(7, 8, getBit(bits, 8));
+      for (let i2 = 9; i2 < 15; i2++)
+        this.setFunctionModule(14 - i2, 8, getBit(bits, i2));
+      for (let i2 = 0; i2 < 8; i2++)
+        this.setFunctionModule(this.size - 1 - i2, 8, getBit(bits, i2));
+      for (let i2 = 8; i2 < 15; i2++)
+        this.setFunctionModule(8, this.size - 15 + i2, getBit(bits, i2));
+      this.setFunctionModule(8, this.size - 8, true);
+    }
+    // Draws two copies of the version bits (with its own error correction code),
+    // based on this object's version field, iff 7 <= version <= 40.
+    drawVersion() {
+      if (this.version < 7)
+        return;
+      let rem2 = this.version;
+      for (let i2 = 0; i2 < 12; i2++)
+        rem2 = rem2 << 1 ^ (rem2 >>> 11) * 7973;
+      const bits = this.version << 12 | rem2;
+      assert(bits >>> 18 == 0);
+      for (let i2 = 0; i2 < 18; i2++) {
+        const color2 = getBit(bits, i2);
+        const a2 = this.size - 11 + i2 % 3;
+        const b2 = Math.floor(i2 / 3);
+        this.setFunctionModule(a2, b2, color2);
+        this.setFunctionModule(b2, a2, color2);
+      }
+    }
+    // Draws a 9*9 finder pattern including the border separator,
+    // with the center module at (x, y). Modules can be out of bounds.
+    drawFinderPattern(x2, y2) {
+      for (let dy = -4; dy <= 4; dy++) {
+        for (let dx = -4; dx <= 4; dx++) {
+          const dist = Math.max(Math.abs(dx), Math.abs(dy));
+          const xx = x2 + dx;
+          const yy = y2 + dy;
+          if (0 <= xx && xx < this.size && 0 <= yy && yy < this.size)
+            this.setFunctionModule(xx, yy, dist != 2 && dist != 4);
+        }
+      }
+    }
+    // Draws a 5*5 alignment pattern, with the center module
+    // at (x, y). All modules must be in bounds.
+    drawAlignmentPattern(x2, y2) {
+      for (let dy = -2; dy <= 2; dy++) {
+        for (let dx = -2; dx <= 2; dx++)
+          this.setFunctionModule(x2 + dx, y2 + dy, Math.max(Math.abs(dx), Math.abs(dy)) != 1);
+      }
+    }
+    // Sets the color of a module and marks it as a function module.
+    // Only used by the constructor. Coordinates must be in bounds.
+    setFunctionModule(x2, y2, isDark) {
+      this.modules[y2][x2] = isDark;
+      this.isFunction[y2][x2] = true;
+    }
+    /*-- Private helper methods for constructor: Codewords and masking --*/
+    // Returns a new byte string representing the given data with the appropriate error correction
+    // codewords appended to it, based on this object's version and error correction level.
+    addEccAndInterleave(data) {
+      const ver = this.version;
+      const ecl = this.errorCorrectionLevel;
+      if (data.length != _a.getNumDataCodewords(ver, ecl))
+        throw new RangeError("Invalid argument");
+      const numBlocks = _a.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
+      const blockEccLen = _a.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver];
+      const rawCodewords = Math.floor(_a.getNumRawDataModules(ver) / 8);
+      const numShortBlocks = numBlocks - rawCodewords % numBlocks;
+      const shortBlockLen = Math.floor(rawCodewords / numBlocks);
+      let blocks = [];
+      const rsDiv = _a.reedSolomonComputeDivisor(blockEccLen);
+      for (let i2 = 0, k2 = 0; i2 < numBlocks; i2++) {
+        let dat = data.slice(k2, k2 + shortBlockLen - blockEccLen + (i2 < numShortBlocks ? 0 : 1));
+        k2 += dat.length;
+        const ecc = _a.reedSolomonComputeRemainder(dat, rsDiv);
+        if (i2 < numShortBlocks)
+          dat.push(0);
+        blocks.push(dat.concat(ecc));
+      }
+      let result2 = [];
+      for (let i2 = 0; i2 < blocks[0].length; i2++) {
+        blocks.forEach((block, j2) => {
+          if (i2 != shortBlockLen - blockEccLen || j2 >= numShortBlocks)
+            result2.push(block[i2]);
+        });
+      }
+      assert(result2.length == rawCodewords);
+      return result2;
+    }
+    // Draws the given sequence of 8-bit codewords (data and error correction) onto the entire
+    // data area of this QR Code. Function modules need to be marked off before this is called.
+    drawCodewords(data) {
+      if (data.length != Math.floor(_a.getNumRawDataModules(this.version) / 8))
+        throw new RangeError("Invalid argument");
+      let i2 = 0;
+      for (let right = this.size - 1; right >= 1; right -= 2) {
+        if (right == 6)
+          right = 5;
+        for (let vert = 0; vert < this.size; vert++) {
+          for (let j2 = 0; j2 < 2; j2++) {
+            const x2 = right - j2;
+            const upward = (right + 1 & 2) == 0;
+            const y2 = upward ? this.size - 1 - vert : vert;
+            if (!this.isFunction[y2][x2] && i2 < data.length * 8) {
+              this.modules[y2][x2] = getBit(data[i2 >>> 3], 7 - (i2 & 7));
+              i2++;
+            }
+          }
+        }
+      }
+      assert(i2 == data.length * 8);
+    }
+    // XORs the codeword modules in this QR Code with the given mask pattern.
+    // The function modules must be marked and the codeword bits must be drawn
+    // before masking. Due to the arithmetic of XOR, calling applyMask() with
+    // the same mask value a second time will undo the mask. A final well-formed
+    // QR Code needs exactly one (not zero, two, etc.) mask applied.
+    applyMask(mask) {
+      if (mask < 0 || mask > 7)
+        throw new RangeError("Mask value out of range");
+      for (let y2 = 0; y2 < this.size; y2++) {
+        for (let x2 = 0; x2 < this.size; x2++) {
+          let invert3;
+          switch (mask) {
+            case 0:
+              invert3 = (x2 + y2) % 2 == 0;
+              break;
+            case 1:
+              invert3 = y2 % 2 == 0;
+              break;
+            case 2:
+              invert3 = x2 % 3 == 0;
+              break;
+            case 3:
+              invert3 = (x2 + y2) % 3 == 0;
+              break;
+            case 4:
+              invert3 = (Math.floor(x2 / 3) + Math.floor(y2 / 2)) % 2 == 0;
+              break;
+            case 5:
+              invert3 = x2 * y2 % 2 + x2 * y2 % 3 == 0;
+              break;
+            case 6:
+              invert3 = (x2 * y2 % 2 + x2 * y2 % 3) % 2 == 0;
+              break;
+            case 7:
+              invert3 = ((x2 + y2) % 2 + x2 * y2 % 3) % 2 == 0;
+              break;
+            default:
+              throw new Error("Unreachable");
+          }
+          if (!this.isFunction[y2][x2] && invert3)
+            this.modules[y2][x2] = !this.modules[y2][x2];
+        }
+      }
+    }
+    // Calculates and returns the penalty score based on state of this QR Code's current modules.
+    // This is used by the automatic mask choice algorithm to find the mask pattern that yields the lowest score.
+    getPenaltyScore() {
+      let result2 = 0;
+      for (let y2 = 0; y2 < this.size; y2++) {
+        let runColor = false;
+        let runX = 0;
+        let runHistory = [0, 0, 0, 0, 0, 0, 0];
+        for (let x2 = 0; x2 < this.size; x2++) {
+          if (this.modules[y2][x2] == runColor) {
+            runX++;
+            if (runX == 5)
+              result2 += _a.PENALTY_N1;
+            else if (runX > 5)
+              result2++;
+          } else {
+            this.finderPenaltyAddHistory(runX, runHistory);
+            if (!runColor)
+              result2 += this.finderPenaltyCountPatterns(runHistory) * _a.PENALTY_N3;
+            runColor = this.modules[y2][x2];
+            runX = 1;
+          }
+        }
+        result2 += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * _a.PENALTY_N3;
+      }
+      for (let x2 = 0; x2 < this.size; x2++) {
+        let runColor = false;
+        let runY = 0;
+        let runHistory = [0, 0, 0, 0, 0, 0, 0];
+        for (let y2 = 0; y2 < this.size; y2++) {
+          if (this.modules[y2][x2] == runColor) {
+            runY++;
+            if (runY == 5)
+              result2 += _a.PENALTY_N1;
+            else if (runY > 5)
+              result2++;
+          } else {
+            this.finderPenaltyAddHistory(runY, runHistory);
+            if (!runColor)
+              result2 += this.finderPenaltyCountPatterns(runHistory) * _a.PENALTY_N3;
+            runColor = this.modules[y2][x2];
+            runY = 1;
+          }
+        }
+        result2 += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * _a.PENALTY_N3;
+      }
+      for (let y2 = 0; y2 < this.size - 1; y2++) {
+        for (let x2 = 0; x2 < this.size - 1; x2++) {
+          const color2 = this.modules[y2][x2];
+          if (color2 == this.modules[y2][x2 + 1] && color2 == this.modules[y2 + 1][x2] && color2 == this.modules[y2 + 1][x2 + 1])
+            result2 += _a.PENALTY_N2;
+        }
+      }
+      let dark = 0;
+      for (const row of this.modules)
+        dark = row.reduce((sum3, color2) => sum3 + (color2 ? 1 : 0), dark);
+      const total = this.size * this.size;
+      const k2 = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
+      assert(0 <= k2 && k2 <= 9);
+      result2 += k2 * _a.PENALTY_N4;
+      assert(0 <= result2 && result2 <= 2568888);
+      return result2;
+    }
+    /*-- Private helper functions --*/
+    // Returns an ascending list of positions of alignment patterns for this version number.
+    // Each position is in the range [0,177), and are used on both the x and y axes.
+    // This could be implemented as lookup table of 40 variable-length lists of integers.
+    getAlignmentPatternPositions() {
+      if (this.version == 1)
+        return [];
+      else {
+        const numAlign = Math.floor(this.version / 7) + 2;
+        const step = this.version == 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
+        let result2 = [6];
+        for (let pos = this.size - 7; result2.length < numAlign; pos -= step)
+          result2.splice(1, 0, pos);
+        return result2;
+      }
+    }
+    // Returns the number of data bits that can be stored in a QR Code of the given version number, after
+    // all function modules are excluded. This includes remainder bits, so it might not be a multiple of 8.
+    // The result is in the range [208, 29648]. This could be implemented as a 40-entry lookup table.
+    static getNumRawDataModules(ver) {
+      if (ver < _a.MIN_VERSION || ver > _a.MAX_VERSION)
+        throw new RangeError("Version number out of range");
+      let result2 = (16 * ver + 128) * ver + 64;
+      if (ver >= 2) {
+        const numAlign = Math.floor(ver / 7) + 2;
+        result2 -= (25 * numAlign - 10) * numAlign - 55;
+        if (ver >= 7)
+          result2 -= 36;
+      }
+      assert(208 <= result2 && result2 <= 29648);
+      return result2;
+    }
+    // Returns the number of 8-bit data (i.e. not error correction) codewords contained in any
+    // QR Code of the given version number and error correction level, with remainder bits discarded.
+    // This stateless pure function could be implemented as a (40*4)-cell lookup table.
+    static getNumDataCodewords(ver, ecl) {
+      return Math.floor(_a.getNumRawDataModules(ver) / 8) - _a.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] * _a.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
+    }
+    // Returns a Reed-Solomon ECC generator polynomial for the given degree. This could be
+    // implemented as a lookup table over all possible parameter values, instead of as an algorithm.
+    static reedSolomonComputeDivisor(degree) {
+      if (degree < 1 || degree > 255)
+        throw new RangeError("Degree out of range");
+      let result2 = [];
+      for (let i2 = 0; i2 < degree - 1; i2++)
+        result2.push(0);
+      result2.push(1);
+      let root = 1;
+      for (let i2 = 0; i2 < degree; i2++) {
+        for (let j2 = 0; j2 < result2.length; j2++) {
+          result2[j2] = _a.reedSolomonMultiply(result2[j2], root);
+          if (j2 + 1 < result2.length)
+            result2[j2] ^= result2[j2 + 1];
+        }
+        root = _a.reedSolomonMultiply(root, 2);
+      }
+      return result2;
+    }
+    // Returns the Reed-Solomon error correction codeword for the given data and divisor polynomials.
+    static reedSolomonComputeRemainder(data, divisor) {
+      let result2 = divisor.map((_2) => 0);
+      for (const b2 of data) {
+        const factor = b2 ^ result2.shift();
+        result2.push(0);
+        divisor.forEach((coef, i2) => result2[i2] ^= _a.reedSolomonMultiply(coef, factor));
+      }
+      return result2;
+    }
+    // Returns the product of the two given field elements modulo GF(2^8/0x11D). The arguments and result
+    // are unsigned 8-bit integers. This could be implemented as a lookup table of 256*256 entries of uint8.
+    static reedSolomonMultiply(x2, y2) {
+      if (x2 >>> 8 != 0 || y2 >>> 8 != 0)
+        throw new RangeError("Byte out of range");
+      let z2 = 0;
+      for (let i2 = 7; i2 >= 0; i2--) {
+        z2 = z2 << 1 ^ (z2 >>> 7) * 285;
+        z2 ^= (y2 >>> i2 & 1) * x2;
+      }
+      assert(z2 >>> 8 == 0);
+      return z2;
+    }
+    // Can only be called immediately after a light run is added, and
+    // returns either 0, 1, or 2. A helper function for getPenaltyScore().
+    finderPenaltyCountPatterns(runHistory) {
+      const n3 = runHistory[1];
+      assert(n3 <= this.size * 3);
+      const core = n3 > 0 && runHistory[2] == n3 && runHistory[3] == n3 * 3 && runHistory[4] == n3 && runHistory[5] == n3;
+      return (core && runHistory[0] >= n3 * 4 && runHistory[6] >= n3 ? 1 : 0) + (core && runHistory[6] >= n3 * 4 && runHistory[0] >= n3 ? 1 : 0);
+    }
+    // Must be called at the end of a line (row or column) of modules. A helper function for getPenaltyScore().
+    finderPenaltyTerminateAndCount(currentRunColor, currentRunLength, runHistory) {
+      if (currentRunColor) {
+        this.finderPenaltyAddHistory(currentRunLength, runHistory);
+        currentRunLength = 0;
+      }
+      currentRunLength += this.size;
+      this.finderPenaltyAddHistory(currentRunLength, runHistory);
+      return this.finderPenaltyCountPatterns(runHistory);
+    }
+    // Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
+    finderPenaltyAddHistory(currentRunLength, runHistory) {
+      if (runHistory[0] == 0)
+        currentRunLength += this.size;
+      runHistory.pop();
+      runHistory.unshift(currentRunLength);
+    }
+  }, __name(_a, "_QrCode"), _a);
+  _QrCode.MIN_VERSION = 1;
+  _QrCode.MAX_VERSION = 40;
+  _QrCode.PENALTY_N1 = 3;
+  _QrCode.PENALTY_N2 = 3;
+  _QrCode.PENALTY_N3 = 40;
+  _QrCode.PENALTY_N4 = 10;
+  _QrCode.ECC_CODEWORDS_PER_BLOCK = [
+    // Version: (note that index 0 is for padding, and is set to an illegal value)
+    //0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+    [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    // Low
+    [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+    // Medium
+    [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    // Quartile
+    [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
+    // High
+  ];
+  _QrCode.NUM_ERROR_CORRECTION_BLOCKS = [
+    // Version: (note that index 0 is for padding, and is set to an illegal value)
+    //0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+    [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+    // Low
+    [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+    // Medium
+    [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+    // Quartile
+    [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81]
+    // High
+  ];
+  let QrCode = _QrCode;
+  qrcodegen2.QrCode = _QrCode;
+  function appendBits(val, len, bb) {
+    if (len < 0 || len > 31 || val >>> len != 0)
+      throw new RangeError("Value out of range");
+    for (let i2 = len - 1; i2 >= 0; i2--)
+      bb.push(val >>> i2 & 1);
+  }
+  __name(appendBits, "appendBits");
+  function getBit(x2, i2) {
+    return (x2 >>> i2 & 1) != 0;
+  }
+  __name(getBit, "getBit");
+  function assert(cond2) {
+    if (!cond2)
+      throw new Error("Assertion error");
+  }
+  __name(assert, "assert");
+  const _QrSegment = (_b = class {
+    /*-- Constructor (low level) and fields --*/
+    // Creates a new QR Code segment with the given attributes and data.
+    // The character count (numChars) must agree with the mode and the bit buffer length,
+    // but the constraint isn't checked. The given bit buffer is cloned and stored.
+    constructor(mode, numChars, bitData) {
+      this.mode = mode;
+      this.numChars = numChars;
+      this.bitData = bitData;
+      if (numChars < 0)
+        throw new RangeError("Invalid argument");
+      this.bitData = bitData.slice();
+    }
+    /*-- Static factory functions (mid level) --*/
+    // Returns a segment representing the given binary data encoded in
+    // byte mode. All input byte arrays are acceptable. Any text string
+    // can be converted to UTF-8 bytes and encoded as a byte mode segment.
+    static makeBytes(data) {
+      let bb = [];
+      for (const b2 of data)
+        appendBits(b2, 8, bb);
+      return new _b(_b.Mode.BYTE, data.length, bb);
+    }
+    // Returns a segment representing the given string of decimal digits encoded in numeric mode.
+    static makeNumeric(digits) {
+      if (!_b.isNumeric(digits))
+        throw new RangeError("String contains non-numeric characters");
+      let bb = [];
+      for (let i2 = 0; i2 < digits.length; ) {
+        const n3 = Math.min(digits.length - i2, 3);
+        appendBits(parseInt(digits.substring(i2, i2 + n3), 10), n3 * 3 + 1, bb);
+        i2 += n3;
+      }
+      return new _b(_b.Mode.NUMERIC, digits.length, bb);
+    }
+    // Returns a segment representing the given text string encoded in alphanumeric mode.
+    // The characters allowed are: 0 to 9, A to Z (uppercase only), space,
+    // dollar, percent, asterisk, plus, hyphen, period, slash, colon.
+    static makeAlphanumeric(text) {
+      if (!_b.isAlphanumeric(text))
+        throw new RangeError("String contains unencodable characters in alphanumeric mode");
+      let bb = [];
+      let i2;
+      for (i2 = 0; i2 + 2 <= text.length; i2 += 2) {
+        let temp = _b.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i2)) * 45;
+        temp += _b.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i2 + 1));
+        appendBits(temp, 11, bb);
+      }
+      if (i2 < text.length)
+        appendBits(_b.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i2)), 6, bb);
+      return new _b(_b.Mode.ALPHANUMERIC, text.length, bb);
+    }
+    // Returns a new mutable list of zero or more segments to represent the given Unicode text string.
+    // The result may use various segment modes and switch modes to optimize the length of the bit stream.
+    static makeSegments(text) {
+      if (text == "")
+        return [];
+      else if (_b.isNumeric(text))
+        return [_b.makeNumeric(text)];
+      else if (_b.isAlphanumeric(text))
+        return [_b.makeAlphanumeric(text)];
+      else
+        return [_b.makeBytes(_b.toUtf8ByteArray(text))];
+    }
+    // Returns a segment representing an Extended Channel Interpretation
+    // (ECI) designator with the given assignment value.
+    static makeEci(assignVal) {
+      let bb = [];
+      if (assignVal < 0)
+        throw new RangeError("ECI assignment value out of range");
+      else if (assignVal < 1 << 7)
+        appendBits(assignVal, 8, bb);
+      else if (assignVal < 1 << 14) {
+        appendBits(2, 2, bb);
+        appendBits(assignVal, 14, bb);
+      } else if (assignVal < 1e6) {
+        appendBits(6, 3, bb);
+        appendBits(assignVal, 21, bb);
+      } else
+        throw new RangeError("ECI assignment value out of range");
+      return new _b(_b.Mode.ECI, 0, bb);
+    }
+    // Tests whether the given string can be encoded as a segment in numeric mode.
+    // A string is encodable iff each character is in the range 0 to 9.
+    static isNumeric(text) {
+      return _b.NUMERIC_REGEX.test(text);
+    }
+    // Tests whether the given string can be encoded as a segment in alphanumeric mode.
+    // A string is encodable iff each character is in the following set: 0 to 9, A to Z
+    // (uppercase only), space, dollar, percent, asterisk, plus, hyphen, period, slash, colon.
+    static isAlphanumeric(text) {
+      return _b.ALPHANUMERIC_REGEX.test(text);
+    }
+    /*-- Methods --*/
+    // Returns a new copy of the data bits of this segment.
+    getData() {
+      return this.bitData.slice();
+    }
+    // (Package-private) Calculates and returns the number of bits needed to encode the given segments at
+    // the given version. The result is infinity if a segment has too many characters to fit its length field.
+    static getTotalBits(segs, version3) {
+      let result2 = 0;
+      for (const seg of segs) {
+        const ccbits = seg.mode.numCharCountBits(version3);
+        if (seg.numChars >= 1 << ccbits)
+          return Infinity;
+        result2 += 4 + ccbits + seg.bitData.length;
+      }
+      return result2;
+    }
+    // Returns a new array of bytes representing the given string encoded in UTF-8.
+    static toUtf8ByteArray(str) {
+      str = encodeURI(str);
+      let result2 = [];
+      for (let i2 = 0; i2 < str.length; i2++) {
+        if (str.charAt(i2) != "%")
+          result2.push(str.charCodeAt(i2));
+        else {
+          result2.push(parseInt(str.substring(i2 + 1, i2 + 3), 16));
+          i2 += 2;
+        }
+      }
+      return result2;
+    }
+  }, __name(_b, "_QrSegment"), _b);
+  _QrSegment.NUMERIC_REGEX = /^[0-9]*$/;
+  _QrSegment.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/;
+  _QrSegment.ALPHANUMERIC_CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
+  let QrSegment = _QrSegment;
+  qrcodegen2.QrSegment = _QrSegment;
+})(qrcodegen || (qrcodegen = {}));
+((qrcodegen2) => {
+  let QrCode;
+  ((QrCode2) => {
+    var _a;
+    const _Ecc = (_a = class {
+      // The QR Code can tolerate about 30% erroneous codewords
+      /*-- Constructor and fields --*/
+      constructor(ordinal, formatBits) {
+        this.ordinal = ordinal;
+        this.formatBits = formatBits;
+      }
+    }, __name(_a, "_Ecc"), _a);
+    _Ecc.LOW = new _Ecc(0, 1);
+    _Ecc.MEDIUM = new _Ecc(1, 0);
+    _Ecc.QUARTILE = new _Ecc(2, 3);
+    _Ecc.HIGH = new _Ecc(3, 2);
+    let Ecc = _Ecc;
+    QrCode2.Ecc = _Ecc;
+  })(QrCode = qrcodegen2.QrCode || (qrcodegen2.QrCode = {}));
+})(qrcodegen || (qrcodegen = {}));
+((qrcodegen2) => {
+  let QrSegment;
+  ((QrSegment2) => {
+    var _a;
+    const _Mode = (_a = class {
+      /*-- Constructor and fields --*/
+      constructor(modeBits, numBitsCharCount) {
+        this.modeBits = modeBits;
+        this.numBitsCharCount = numBitsCharCount;
+      }
+      /*-- Method --*/
+      // (Package-private) Returns the bit width of the character count field for a segment in
+      // this mode in a QR Code at the given version number. The result is in the range [0, 16].
+      numCharCountBits(ver) {
+        return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
+      }
+    }, __name(_a, "_Mode"), _a);
+    _Mode.NUMERIC = new _Mode(1, [10, 12, 14]);
+    _Mode.ALPHANUMERIC = new _Mode(2, [9, 11, 13]);
+    _Mode.BYTE = new _Mode(4, [8, 16, 16]);
+    _Mode.KANJI = new _Mode(8, [8, 10, 12]);
+    _Mode.ECI = new _Mode(7, [0, 0, 0]);
+    let Mode = _Mode;
+    QrSegment2.Mode = _Mode;
+  })(QrSegment = qrcodegen2.QrSegment || (qrcodegen2.QrSegment = {}));
+})(qrcodegen || (qrcodegen = {}));
+var qrcodegen_default = qrcodegen;
+var ERROR_LEVEL_MAP = {
+  L: qrcodegen_default.QrCode.Ecc.LOW,
+  M: qrcodegen_default.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen_default.QrCode.Ecc.QUARTILE,
+  H: qrcodegen_default.QrCode.Ecc.HIGH
+};
+var DEFAULT_SIZE = 128;
+var DEFAULT_LEVEL = "L";
+var DEFAULT_BGCOLOR = "#FFFFFF";
+var DEFAULT_FGCOLOR = "#000000";
+var DEFAULT_INCLUDEMARGIN = false;
+var DEFAULT_MINVERSION = 1;
+var SPEC_MARGIN_SIZE = 4;
+var DEFAULT_MARGIN_SIZE = 0;
+var DEFAULT_IMG_SCALE = 0.1;
+function generatePath(modules, margin = 0) {
+  const ops = [];
+  modules.forEach(function(row, y2) {
+    let start = null;
+    row.forEach(function(cell, x2) {
+      if (!cell && start !== null) {
+        ops.push(
+          `M${start + margin} ${y2 + margin}h${x2 - start}v1H${start + margin}z`
+        );
+        start = null;
+        return;
+      }
+      if (x2 === row.length - 1) {
+        if (!cell) {
+          return;
+        }
+        if (start === null) {
+          ops.push(`M${x2 + margin},${y2 + margin} h1v1H${x2 + margin}z`);
+        } else {
+          ops.push(
+            `M${start + margin},${y2 + margin} h${x2 + 1 - start}v1H${start + margin}z`
+          );
+        }
+        return;
+      }
+      if (cell && start === null) {
+        start = x2;
+      }
+    });
+  });
+  return ops.join("");
+}
+__name(generatePath, "generatePath");
+function excavateModules(modules, excavation) {
+  return modules.slice().map((row, y2) => {
+    if (y2 < excavation.y || y2 >= excavation.y + excavation.h) {
+      return row;
+    }
+    return row.map((cell, x2) => {
+      if (x2 < excavation.x || x2 >= excavation.x + excavation.w) {
+        return cell;
+      }
+      return false;
+    });
+  });
+}
+__name(excavateModules, "excavateModules");
+function getImageSettings(cells, size2, margin, imageSettings) {
+  if (imageSettings == null) {
+    return null;
+  }
+  const numCells = cells.length + margin * 2;
+  const defaultSize = Math.floor(size2 * DEFAULT_IMG_SCALE);
+  const scale = numCells / size2;
+  const w2 = (imageSettings.width || defaultSize) * scale;
+  const h2 = (imageSettings.height || defaultSize) * scale;
+  const x2 = imageSettings.x == null ? cells.length / 2 - w2 / 2 : imageSettings.x * scale;
+  const y2 = imageSettings.y == null ? cells.length / 2 - h2 / 2 : imageSettings.y * scale;
+  const opacity = imageSettings.opacity == null ? 1 : imageSettings.opacity;
+  let excavation = null;
+  if (imageSettings.excavate) {
+    let floorX = Math.floor(x2);
+    let floorY = Math.floor(y2);
+    let ceilW = Math.ceil(w2 + x2 - floorX);
+    let ceilH = Math.ceil(h2 + y2 - floorY);
+    excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
+  }
+  const crossOrigin = imageSettings.crossOrigin;
+  return { x: x2, y: y2, h: h2, w: w2, excavation, opacity, crossOrigin };
+}
+__name(getImageSettings, "getImageSettings");
+function getMarginSize(includeMargin, marginSize) {
+  if (marginSize != null) {
+    return Math.max(Math.floor(marginSize), 0);
+  }
+  return includeMargin ? SPEC_MARGIN_SIZE : DEFAULT_MARGIN_SIZE;
+}
+__name(getMarginSize, "getMarginSize");
+function useQRCode({
+  value,
+  level,
+  minVersion,
+  includeMargin,
+  marginSize,
+  imageSettings,
+  size: size2,
+  boostLevel
+}) {
+  let qrcode = react_default.useMemo(() => {
+    const values3 = Array.isArray(value) ? value : [value];
+    const segments = values3.reduce((accum, v2) => {
+      accum.push(...qrcodegen_default.QrSegment.makeSegments(v2));
+      return accum;
+    }, []);
+    return qrcodegen_default.QrCode.encodeSegments(
+      segments,
+      ERROR_LEVEL_MAP[level],
+      minVersion,
+      void 0,
+      void 0,
+      boostLevel
+    );
+  }, [value, level, minVersion, boostLevel]);
+  const { cells, margin, numCells, calculatedImageSettings } = react_default.useMemo(() => {
+    let cells2 = qrcode.getModules();
+    const margin2 = getMarginSize(includeMargin, marginSize);
+    const numCells2 = cells2.length + margin2 * 2;
+    const calculatedImageSettings2 = getImageSettings(
+      cells2,
+      size2,
+      margin2,
+      imageSettings
+    );
+    return {
+      cells: cells2,
+      margin: margin2,
+      numCells: numCells2,
+      calculatedImageSettings: calculatedImageSettings2
+    };
+  }, [qrcode, size2, imageSettings, includeMargin, marginSize]);
+  return {
+    qrcode,
+    margin,
+    cells,
+    numCells,
+    calculatedImageSettings
+  };
+}
+__name(useQRCode, "useQRCode");
+var SUPPORTS_PATH2D = function() {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e2) {
+    return false;
+  }
+  return true;
+}();
+var QRCodeCanvas = react_default.forwardRef(
+  /* @__PURE__ */ __name(function QRCodeCanvas2(props, forwardedRef) {
+    const _a = props, {
+      value,
+      size: size2 = DEFAULT_SIZE,
+      level = DEFAULT_LEVEL,
+      bgColor = DEFAULT_BGCOLOR,
+      fgColor = DEFAULT_FGCOLOR,
+      includeMargin = DEFAULT_INCLUDEMARGIN,
+      minVersion = DEFAULT_MINVERSION,
+      boostLevel,
+      marginSize,
+      imageSettings
+    } = _a, extraProps = __objRest(_a, [
+      "value",
+      "size",
+      "level",
+      "bgColor",
+      "fgColor",
+      "includeMargin",
+      "minVersion",
+      "boostLevel",
+      "marginSize",
+      "imageSettings"
+    ]);
+    const _b = extraProps, { style } = _b, otherProps = __objRest(_b, ["style"]);
+    const imgSrc = imageSettings == null ? void 0 : imageSettings.src;
+    const _canvas = react_default.useRef(null);
+    const _image = react_default.useRef(null);
+    const setCanvasRef = react_default.useCallback(
+      (node) => {
+        _canvas.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    const [isImgLoaded, setIsImageLoaded] = react_default.useState(false);
+    const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
+      value,
+      level,
+      minVersion,
+      boostLevel,
+      includeMargin,
+      marginSize,
+      imageSettings,
+      size: size2
+    });
+    react_default.useEffect(() => {
+      if (_canvas.current != null) {
+        const canvas = _canvas.current;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          return;
+        }
+        let cellsToDraw = cells;
+        const image = _image.current;
+        const haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
+        if (haveImageToRender) {
+          if (calculatedImageSettings.excavation != null) {
+            cellsToDraw = excavateModules(
+              cells,
+              calculatedImageSettings.excavation
+            );
+          }
+        }
+        const pixelRatio = window.devicePixelRatio || 1;
+        canvas.height = canvas.width = size2 * pixelRatio;
+        const scale = size2 / numCells * pixelRatio;
+        ctx.scale(scale, scale);
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, numCells, numCells);
+        ctx.fillStyle = fgColor;
+        if (SUPPORTS_PATH2D) {
+          ctx.fill(new Path2D(generatePath(cellsToDraw, margin)));
+        } else {
+          cells.forEach(function(row, rdx) {
+            row.forEach(function(cell, cdx) {
+              if (cell) {
+                ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+              }
+            });
+          });
+        }
+        if (calculatedImageSettings) {
+          ctx.globalAlpha = calculatedImageSettings.opacity;
+        }
+        if (haveImageToRender) {
+          ctx.drawImage(
+            image,
+            calculatedImageSettings.x + margin,
+            calculatedImageSettings.y + margin,
+            calculatedImageSettings.w,
+            calculatedImageSettings.h
+          );
+        }
+      }
+    });
+    react_default.useEffect(() => {
+      setIsImageLoaded(false);
+    }, [imgSrc]);
+    const canvasStyle = __spreadValues({ height: size2, width: size2 }, style);
+    let img = null;
+    if (imgSrc != null) {
+      img = react_default.createElement(
+        "img",
+        {
+          src: imgSrc,
+          key: imgSrc,
+          style: { display: "none" },
+          onLoad: /* @__PURE__ */ __name(() => {
+            setIsImageLoaded(true);
+          }, "onLoad"),
+          ref: _image,
+          crossOrigin: calculatedImageSettings == null ? void 0 : calculatedImageSettings.crossOrigin
+        }
+      );
+    }
+    return react_default.createElement(react_default.Fragment, null, react_default.createElement(
+      "canvas",
+      __spreadValues({
+        style: canvasStyle,
+        height: size2,
+        width: size2,
+        ref: setCanvasRef,
+        role: "img"
+      }, otherProps)
+    ), img);
+  }, "QRCodeCanvas2")
+);
+QRCodeCanvas.displayName = "QRCodeCanvas";
+var QRCodeSVG = react_default.forwardRef(
+  /* @__PURE__ */ __name(function QRCodeSVG2(props, forwardedRef) {
+    const _a = props, {
+      value,
+      size: size2 = DEFAULT_SIZE,
+      level = DEFAULT_LEVEL,
+      bgColor = DEFAULT_BGCOLOR,
+      fgColor = DEFAULT_FGCOLOR,
+      includeMargin = DEFAULT_INCLUDEMARGIN,
+      minVersion = DEFAULT_MINVERSION,
+      boostLevel,
+      title,
+      marginSize,
+      imageSettings
+    } = _a, otherProps = __objRest(_a, [
+      "value",
+      "size",
+      "level",
+      "bgColor",
+      "fgColor",
+      "includeMargin",
+      "minVersion",
+      "boostLevel",
+      "title",
+      "marginSize",
+      "imageSettings"
+    ]);
+    const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
+      value,
+      level,
+      minVersion,
+      boostLevel,
+      includeMargin,
+      marginSize,
+      imageSettings,
+      size: size2
+    });
+    let cellsToDraw = cells;
+    let image = null;
+    if (imageSettings != null && calculatedImageSettings != null) {
+      if (calculatedImageSettings.excavation != null) {
+        cellsToDraw = excavateModules(
+          cells,
+          calculatedImageSettings.excavation
+        );
+      }
+      image = react_default.createElement(
+        "image",
+        {
+          href: imageSettings.src,
+          height: calculatedImageSettings.h,
+          width: calculatedImageSettings.w,
+          x: calculatedImageSettings.x + margin,
+          y: calculatedImageSettings.y + margin,
+          preserveAspectRatio: "none",
+          opacity: calculatedImageSettings.opacity,
+          crossOrigin: calculatedImageSettings.crossOrigin
+        }
+      );
+    }
+    const fgPath = generatePath(cellsToDraw, margin);
+    return react_default.createElement(
+      "svg",
+      __spreadValues({
+        height: size2,
+        width: size2,
+        viewBox: `0 0 ${numCells} ${numCells}`,
+        ref: forwardedRef,
+        role: "img"
+      }, otherProps),
+      !!title && react_default.createElement("title", null, title),
+      react_default.createElement(
+        "path",
+        {
+          fill: bgColor,
+          d: `M0,0 h${numCells}v${numCells}H0z`,
+          shapeRendering: "crispEdges"
+        }
+      ),
+      react_default.createElement("path", { fill: fgColor, d: fgPath, shapeRendering: "crispEdges" }),
+      image
+    );
+  }, "QRCodeSVG2")
+);
+QRCodeSVG.displayName = "QRCodeSVG";
+
+// src/manager/container/Menu.tsx
+var focusableUIElements = {
+  storySearchField: "storybook-explorer-searchfield",
+  storyListMenu: "storybook-explorer-menu",
+  storyPanelRoot: "storybook-panel-root"
+};
+var Key = styled.span(({ theme }) => ({
+  display: "inline-block",
+  height: 16,
+  lineHeight: "16px",
+  textAlign: "center",
+  fontSize: "11px",
+  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 6px"
+}));
+var KeyChild = styled.code(({ theme }) => ({
+  padding: 0,
+  fontFamily: theme.typography.fonts.base,
+  verticalAlign: "middle",
+  "& + &": {
+    marginLeft: 6
+  }
+}));
+var Shortcut = /* @__PURE__ */ __name(({ keys: keys2 }) => react_default.createElement(Key, null, keys2.map((key) => react_default.createElement(KeyChild, { key }, shortcutToHumanString([key])))), "Shortcut");
+var useMenu = /* @__PURE__ */ __name((state, api, showToolbar, isFullscreen, isPanelShown, isNavShown, enableShortcuts) => {
+  const shortcutKeys = api.getShortcutKeys();
+  const about = useMemo(
+    () => ({
+      id: "about",
+      title: "About your Storybook",
+      onClick: /* @__PURE__ */ __name(() => api.changeSettingsTab("about"), "onClick"),
+      icon: react_default.createElement(InfoIcon, null)
+    }),
+    [api]
+  );
+  const documentation = useMemo(() => {
+    const docsUrl = api.getDocsUrl({ versioned: true, renderer: true });
+    return {
+      id: "documentation",
+      title: "Documentation",
+      href: docsUrl,
+      icon: react_default.createElement(ShareAltIcon, null)
+    };
+  }, [api]);
+  const whatsNewNotificationsEnabled = state.whatsNewData?.status === "SUCCESS" && !state.disableWhatsNewNotifications;
+  const isWhatsNewUnread = api.isWhatsNewUnread();
+  const whatsNew = useMemo(
+    () => ({
+      id: "whats-new",
+      title: "What's new?",
+      onClick: /* @__PURE__ */ __name(() => api.changeSettingsTab("whats-new"), "onClick"),
+      right: whatsNewNotificationsEnabled && isWhatsNewUnread && react_default.createElement(Badge, { status: "positive" }, "Check it out"),
+      icon: react_default.createElement(WandIcon, null)
+    }),
+    [api, whatsNewNotificationsEnabled, isWhatsNewUnread]
+  );
+  const shortcuts = useMemo(
+    () => ({
+      id: "shortcuts",
+      title: "Keyboard shortcuts",
+      onClick: /* @__PURE__ */ __name(() => api.changeSettingsTab("shortcuts"), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.shortcutsPage }) : null,
+      icon: react_default.createElement(CommandIcon, null)
+    }),
+    [api, enableShortcuts, shortcutKeys.shortcutsPage]
+  );
+  const sidebarToggle = useMemo(
+    () => ({
+      id: "S",
+      title: "Show sidebar",
+      onClick: /* @__PURE__ */ __name(() => api.toggleNav(), "onClick"),
+      active: isNavShown,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toggleNav }) : null,
+      icon: isNavShown ? react_default.createElement(CheckIcon, null) : null
+    }),
+    [api, enableShortcuts, shortcutKeys, isNavShown]
+  );
+  const toolbarToogle = useMemo(
+    () => ({
+      id: "T",
+      title: "Show toolbar",
+      onClick: /* @__PURE__ */ __name(() => api.toggleToolbar(), "onClick"),
+      active: showToolbar,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toolbar }) : null,
+      icon: showToolbar ? react_default.createElement(CheckIcon, null) : null
+    }),
+    [api, enableShortcuts, shortcutKeys, showToolbar]
+  );
+  const addonsToggle = useMemo(
+    () => ({
+      id: "A",
+      title: "Show addons panel",
+      onClick: /* @__PURE__ */ __name(() => api.togglePanel(), "onClick"),
+      active: isPanelShown,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.togglePanel }) : null,
+      icon: isPanelShown ? react_default.createElement(CheckIcon, null) : null
+    }),
+    [api, enableShortcuts, shortcutKeys, isPanelShown]
+  );
+  const addonsOrientationToggle = useMemo(
+    () => ({
+      id: "D",
+      title: "Change addons orientation",
+      onClick: /* @__PURE__ */ __name(() => api.togglePanelPosition(), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.panelPosition }) : null
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  );
+  const fullscreenToggle = useMemo(
+    () => ({
+      id: "F",
+      title: "Go full screen",
+      onClick: /* @__PURE__ */ __name(() => api.toggleFullscreen(), "onClick"),
+      active: isFullscreen,
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.fullScreen }) : null,
+      icon: isFullscreen ? react_default.createElement(CheckIcon, null) : null
+    }),
+    [api, enableShortcuts, shortcutKeys, isFullscreen]
+  );
+  const searchToggle = useMemo(
+    () => ({
+      id: "/",
+      title: "Search",
+      onClick: /* @__PURE__ */ __name(() => api.focusOnUIElement(focusableUIElements.storySearchField), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.search }) : null
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  );
+  const up = useMemo(
+    () => ({
+      id: "up",
+      title: "Previous component",
+      onClick: /* @__PURE__ */ __name(() => api.jumpToComponent(-1), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevComponent }) : null
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  );
+  const down = useMemo(
+    () => ({
+      id: "down",
+      title: "Next component",
+      onClick: /* @__PURE__ */ __name(() => api.jumpToComponent(1), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextComponent }) : null
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  );
+  const prev = useMemo(
+    () => ({
+      id: "prev",
+      title: "Previous story",
+      onClick: /* @__PURE__ */ __name(() => api.jumpToStory(-1), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevStory }) : null
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  );
+  const next = useMemo(
+    () => ({
+      id: "next",
+      title: "Next story",
+      onClick: /* @__PURE__ */ __name(() => api.jumpToStory(1), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextStory }) : null
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  );
+  const collapse = useMemo(
+    () => ({
+      id: "collapse",
+      title: "Collapse all",
+      onClick: /* @__PURE__ */ __name(() => api.emit(STORIES_COLLAPSE_ALL), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.collapseAll }) : null
+    }),
+    [api, enableShortcuts, shortcutKeys]
+  );
+  const getAddonsShortcuts = useCallback(() => {
+    const addonsShortcuts = api.getAddonsShortcuts();
+    const keys2 = shortcutKeys;
+    return Object.entries(addonsShortcuts).filter(([_2, { showInMenu }]) => showInMenu).map(([actionName, { label, action }]) => ({
+      id: actionName,
+      title: label,
+      onClick: /* @__PURE__ */ __name(() => action(), "onClick"),
+      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: keys2[actionName] }) : null
+    }));
+  }, [api, enableShortcuts, shortcutKeys]);
+  return useMemo(
+    () => [
+      [
+        about,
+        ...state.whatsNewData?.status === "SUCCESS" ? [whatsNew] : [],
+        documentation,
+        ...enableShortcuts ? [shortcuts] : []
+      ],
+      [
+        sidebarToggle,
+        toolbarToogle,
+        addonsToggle,
+        addonsOrientationToggle,
+        fullscreenToggle,
+        searchToggle,
+        up,
+        down,
+        prev,
+        next,
+        collapse
+      ],
+      getAddonsShortcuts()
+    ],
+    [
+      about,
+      state,
+      whatsNew,
+      documentation,
+      shortcuts,
+      sidebarToggle,
+      toolbarToogle,
+      addonsToggle,
+      addonsOrientationToggle,
+      fullscreenToggle,
+      searchToggle,
+      up,
+      down,
+      prev,
+      next,
+      collapse,
+      getAddonsShortcuts,
+      enableShortcuts
+    ]
+  );
+}, "useMenu");
+
+// src/manager/components/preview/tools/share.tsx
+var { PREVIEW_URL, document: document2 } = scope;
+var mapper3 = /* @__PURE__ */ __name(({ state }) => {
+  const { storyId, refId, refs } = state;
+  const { location } = document2;
+  const ref = refs[refId];
+  let baseUrl = `${location.origin}${location.pathname}`;
+  if (!baseUrl.endsWith("/")) {
+    baseUrl += "/";
+  }
+  return {
+    refId,
+    baseUrl: ref ? `${ref.url}/iframe.html` : PREVIEW_URL || `${baseUrl}iframe.html`,
+    storyId,
+    queryParams: state.customQueryParams
+  };
+}, "mapper");
+var QRContainer = styled.div(() => ({
+  display: "flex",
+  alignItems: "center",
+  padding: 8,
+  maxWidth: 200
+}));
+var QRImageContainer = styled.div(() => ({
+  width: 64,
+  height: 64,
+  marginRight: 12,
+  backgroundColor: "white",
+  padding: 2
+}));
+var QRImage = /* @__PURE__ */ __name(({ value }) => {
+  const theme = useTheme();
+  return react_default.createElement(QRImageContainer, null, react_default.createElement(QRCodeSVG, { value, marginSize: 0, size: 60, fgColor: theme.color.darkest }));
+}, "QRImage");
+var QRContent = styled.div(() => ({}));
+var QRTitle = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.bold,
+  fontSize: theme.typography.size.s1,
+  marginBottom: 4
+}));
+var QRDescription = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.textMutedColor
+}));
+function ShareMenu({
+  baseUrl,
+  storyId,
+  queryParams,
+  qrUrl
+}) {
+  const api = useStorybookApi();
+  const shortcutKeys = api.getShortcutKeys();
+  const enableShortcuts = !!shortcutKeys;
+  const [copied, setCopied] = useState(false);
+  const copyStoryLink = shortcutKeys?.copyStoryLink;
+  const links = useMemo(() => {
+    const copyTitle = copied ? "Copied!" : "Copy story link";
+    const baseLinks = [
+      [
+        {
+          id: "copy-link",
+          title: copyTitle,
+          icon: react_default.createElement(LinkIcon, null),
+          right: enableShortcuts ? react_default.createElement(Shortcut, { keys: copyStoryLink }) : null,
+          onClick: /* @__PURE__ */ __name(() => {
+            (0, import_copy_to_clipboard.default)(window.location.href);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2e3);
+          }, "onClick")
+        },
+        {
+          id: "open-new-tab",
+          title: "Open in isolation mode",
+          icon: react_default.createElement(BugIcon, null),
+          onClick: /* @__PURE__ */ __name(() => {
+            const href = getStoryHref(baseUrl, storyId, queryParams);
+            window.open(href, "_blank", "noopener,noreferrer");
+          }, "onClick")
+        }
+      ]
+    ];
+    baseLinks.push([
+      {
+        id: "qr-section",
+        // @ts-expect-error (non strict)
+        content: react_default.createElement(QRContainer, null, react_default.createElement(QRImage, { value: qrUrl }), react_default.createElement(QRContent, null, react_default.createElement(QRTitle, null, "Scan me"), react_default.createElement(QRDescription, null, "Must be on the same network as this device.")))
+      }
+    ]);
+    return baseLinks;
+  }, [baseUrl, storyId, queryParams, copied, qrUrl, enableShortcuts, copyStoryLink]);
+  return react_default.createElement(TooltipLinkList, { links });
+}
+__name(ShareMenu, "ShareMenu");
+var shareTool = {
+  title: "share",
+  id: "share",
   type: types.TOOL,
-  // @ts-expect-error (non strict)
-  match: /* @__PURE__ */ __name(({ viewMode }) => ["story", "docs"].includes(viewMode), "match"),
-  render: /* @__PURE__ */ __name(() => react_default.createElement(Consumer, { filter: menuMapper3 }, ({ isVisible, toggle, singleStory }) => !singleStory && !isVisible && react_default.createElement(react_default.Fragment, null, react_default.createElement(IconButton, { "aria-label": "Show sidebar", key: "menu", onClick: toggle, title: "Show sidebar" }, react_default.createElement(MenuIcon, null)), react_default.createElement(Separator, null))), "render")
+  match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
+  render: /* @__PURE__ */ __name(() => {
+    return react_default.createElement(Consumer, { filter: mapper3 }, ({ baseUrl, storyId, queryParams }) => {
+      const storyUrl = scope.STORYBOOK_NETWORK_ADDRESS ? `${scope.STORYBOOK_NETWORK_ADDRESS}${window.location.search}` : window.location.href;
+      return storyId ? react_default.createElement(
+        WithTooltip,
+        {
+          hasChrome: true,
+          placement: "bottom",
+          tooltip: react_default.createElement(ShareMenu, { ...{ baseUrl, storyId, queryParams, qrUrl: storyUrl } })
+        },
+        react_default.createElement(IconButton, { title: "Share" }, react_default.createElement(ShareIcon, null))
+      ) : null;
+    });
+  }, "render")
 };
 
 // src/manager/container/Preview.tsx
 var defaultTabs = [createCanvasTab()];
 var defaultTools = [menuTool, remountTool, zoomTool];
-var defaultToolsExtra = [addonsTool, fullScreenTool, ejectTool, copyTool];
+var defaultToolsExtra = [addonsTool, fullScreenTool, shareTool, openInEditorTool];
 var emptyTabsList = [];
 var memoizedTabs = (0, import_memoizerific.default)(1)(
   (_2, tabElements, parameters, showTabs) => showTabs ? filterTabs([...defaultTabs, ...Object.values(tabElements)], parameters) : emptyTabsList
@@ -7861,7 +9302,7 @@ var memoizedWrapper = (0, import_memoizerific.default)(1)((_2, previewElements)
   ...defaultWrappers,
   ...Object.values(previewElements)
 ]);
-var { PREVIEW_URL: PREVIEW_URL3 } = scope;
+var { PREVIEW_URL: PREVIEW_URL2 } = scope;
 var splitTitleAddExtraSpace = /* @__PURE__ */ __name((input) => input.split("/").join(" / ").replace(/\s\s/, " "), "splitTitleAddExtraSpace");
 var getDescription = /* @__PURE__ */ __name((item) => {
   if (item?.type === "story" || item?.type === "docs") {
@@ -7870,7 +9311,7 @@ var getDescription = /* @__PURE__ */ __name((item) => {
   }
   return item?.name ? `${item.name} \u22C5 Storybook` : "Storybook";
 }, "getDescription");
-var mapper2 = /* @__PURE__ */ __name(({
+var mapper4 = /* @__PURE__ */ __name(({
   api,
   state
   // @ts-expect-error (non strict)
@@ -7904,7 +9345,7 @@ var mapper2 = /* @__PURE__ */ __name(({
     viewMode,
     refs,
     storyId,
-    baseUrl: PREVIEW_URL3 || "iframe.html",
+    baseUrl: PREVIEW_URL2 || "iframe.html",
     queryParams: customQueryParams,
     tools,
     toolsExtra,
@@ -7922,7 +9363,7 @@ var mapper2 = /* @__PURE__ */ __name(({
   };
 }, "mapper");
 var PreviewConnected = react_default.memo(/* @__PURE__ */ __name(function PreviewConnected2(props) {
-  return react_default.createElement(Consumer, { filter: mapper2 }, (fromState) => react_default.createElement(Preview, { ...props, ...fromState }));
+  return react_default.createElement(Consumer, { filter: mapper4 }, (fromState) => react_default.createElement(Preview, { ...props, ...fromState }));
 }, "PreviewConnected"));
 var Preview_default = PreviewConnected;
 
@@ -9780,7 +11221,7 @@ var HighlightStyles = /* @__PURE__ */ __name(({ refId, itemId }) => react_defaul
             background: background2,
             "&:hover, &:focus": { background: background2 }
           },
-          [`&[data-nodetype="story"], &[data-nodetype="document"]`]: {
+          [`&[data-nodetype="story"], &[data-nodetype="document"], &[data-nodetype="test"]`]: {
             color: color2.defaultText,
             background: background2,
             "&:hover, &:focus": { background: background2 }
@@ -9812,7 +11253,7 @@ var getAncestorIds = (0, import_memoizerific2.default)(1e3)(
 );
 var getDescendantIds = (0, import_memoizerific2.default)(1e3)((data, id, skipLeafs) => {
   const entry = data[id];
-  if (!entry || entry.type === "story" || entry.type === "docs" || !entry.children) {
+  if (!entry || !("children" in entry) || !entry.children) {
     return [];
   }
   return entry.children.reduce((acc, childId) => {
@@ -10209,6 +11650,7 @@ var GROUP_ID = "icon--group";
 var COMPONENT_ID = "icon--component";
 var DOCUMENT_ID = "icon--document";
 var STORY_ID = "icon--story";
+var TEST_ID = "icon--test";
 var SUCCESS_ID = "icon--success";
 var ERROR_ID = "icon--error";
 var WARNING_ID = "icon--warning";
@@ -10252,6 +11694,14 @@ var IconSymbols = /* @__PURE__ */ __name(() => {
       d: "M3.5 0h7a.5.5 0 01.5.5v13a.5.5 0 01-.454.498.462.462 0 01-.371-.118L7 11.159l-3.175 2.72a.46.46 0 01-.379.118A.5.5 0 013 13.5V.5a.5.5 0 01.5-.5zM4 12.413l2.664-2.284a.454.454 0 01.377-.128.498.498 0 01.284.12L10 12.412V1H4v11.413z",
       fill: "currentColor"
     }
+  )), react_default.createElement("symbol", { id: TEST_ID }, react_default.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.5 2h.75v3.866l-3.034 5.26A1.25 1.25 0 003.299 13H10.7a1.25 1.25 0 001.083-1.875L8.75 5.866V2h.75a.5.5 0 100-1h-5a.5.5 0 000 1zm1.75 4V2h1.5v4.134l.067.116L8.827 8H5.173l1.01-1.75.067-.116V6zM4.597 9l-1.515 2.625A.25.25 0 003.3 12H10.7a.25.25 0 00.217-.375L9.404 9H4.597z",
+      fill: "currentColor"
+    }
   )), react_default.createElement("symbol", { id: SUCCESS_ID }, react_default.createElement(
     "path",
     {
@@ -10291,6 +11741,9 @@ var UseSymbol = /* @__PURE__ */ __name(({ type }) => {
   if (type === "story") {
     return react_default.createElement("use", { xlinkHref: `#${STORY_ID}` });
   }
+  if (type === "test") {
+    return react_default.createElement("use", { xlinkHref: `#${TEST_ID}` });
+  }
   if (type === "success") {
     return react_default.createElement("use", { xlinkHref: `#${SUCCESS_ID}` });
   }
@@ -10350,7 +11803,7 @@ var getMostCriticalStatusValue = /* @__PURE__ */ __name((statusValues) => {
 }, "getMostCriticalStatusValue");
 function getGroupStatus(collapsedData, allStatuses) {
   return Object.values(collapsedData).reduce((acc, item) => {
-    if (item.type === "group" || item.type === "component") {
+    if (item.type === "group" || item.type === "component" || item.type === "story") {
       const leafs = getDescendantIds(collapsedData, item.id, false).map((id) => collapsedData[id]).filter((i2) => i2.type === "story");
       const combinedStatus = getMostCriticalStatusValue(
         // @ts-expect-error (non strict)
@@ -10365,6 +11818,9 @@ function getGroupStatus(collapsedData, allStatuses) {
 }
 __name(getGroupStatus, "getGroupStatus");
 
+// src/manager/components/sidebar/ContextMenu.tsx
+var import_copy_to_clipboard2 = __toESM(require_copy_to_clipboard(), 1);
+
 // src/manager/components/sidebar/StatusButton.tsx
 var withStatusColor = /* @__PURE__ */ __name(({ theme, status }) => {
   const defaultColor = theme.base === "light" ? curriedTransparentize$1(0.3, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText);
@@ -10435,6 +11891,47 @@ var FloatingStatusButton = styled(StatusButton)({
 var useContextMenu = /* @__PURE__ */ __name((context, links, api) => {
   const [hoverCount, setHoverCount] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
+  const [copyText, setCopyText] = react_default.useState("Copy story name");
+  const shortcutKeys = api.getShortcutKeys();
+  const enableShortcuts = !!shortcutKeys;
+  const topLinks = useMemo(() => {
+    const defaultLinks = [];
+    if (context && "importPath" in context) {
+      defaultLinks.push({
+        id: "open-in-editor",
+        title: "Open in editor",
+        icon: react_default.createElement(EditorIcon, null),
+        right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.openInEditor }) : null,
+        onClick: /* @__PURE__ */ __name((e2) => {
+          e2.preventDefault();
+          api.openInEditor({
+            file: context.importPath
+          });
+        }, "onClick")
+      });
+    }
+    if (context.type === "story") {
+      defaultLinks.push({
+        id: "copy-story-name",
+        title: copyText,
+        icon: react_default.createElement(CopyIcon, null),
+        // TODO: bring this back once we want to add shortcuts for this
+        // right:
+        //   enableShortcuts && shortcutKeys.copyStoryName ? (
+        //     <Shortcut keys={shortcutKeys.copyStoryName} />
+        //   ) : null,
+        onClick: /* @__PURE__ */ __name((e2) => {
+          e2.preventDefault();
+          (0, import_copy_to_clipboard2.default)(context.exportName);
+          setCopyText("Copied!");
+          setTimeout(() => {
+            setCopyText("Copy story name");
+          }, 2e3);
+        }, "onClick")
+      });
+    }
+    return defaultLinks;
+  }, [context, copyText, enableShortcuts, shortcutKeys]);
   const handlers = useMemo(() => {
     return {
       onMouseEnter: /* @__PURE__ */ __name(() => {
@@ -10456,14 +11953,14 @@ var useContextMenu = /* @__PURE__ */ __name((context, links, api) => {
     }
     return [];
   }, [api, context, hoverCount]);
-  const isRendered = providerLinks.length > 0 || links.length > 0;
+  const shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0);
   return useMemo(() => {
     if (globalThis.CONFIG_TYPE !== "DEVELOPMENT") {
       return empty;
     }
     return {
       onMouseEnter: handlers.onMouseEnter,
-      node: isRendered ? react_default.createElement(
+      node: shouldRender ? react_default.createElement(
         PositionedWithTooltip,
         {
           "data-displayed": isOpen ? "on" : "off",
@@ -10477,12 +11974,12 @@ var useContextMenu = /* @__PURE__ */ __name((context, links, api) => {
               setIsOpen(true);
             }
           },
-          tooltip: react_default.createElement(LiveContextMenu, { context, links })
+          tooltip: react_default.createElement(LiveContextMenu, { context, links: [...topLinks, ...links] })
         },
         react_default.createElement(FloatingStatusButton, { type: "button", status: "status-value:pending" }, react_default.createElement(EllipsisIcon, null))
       ) : null
     };
-  }, [context, handlers, isOpen, isRendered, links]);
+  }, [context, handlers, isOpen, shouldRender, links, topLinks]);
 }, "useContextMenu");
 var LiveContextMenu = /* @__PURE__ */ __name(({
   context,
@@ -10493,7 +11990,7 @@ var LiveContextMenu = /* @__PURE__ */ __name(({
     Addon_TypesEnum.experimental_TEST_PROVIDER
   );
   const providerLinks = generateTestProviderLinks(registeredTestProviders, context);
-  const groups = Array.isArray(links[0]) ? links : [links];
+  const groups = Array.isArray(links[0]) || links.length === 0 ? links : [links];
   const all = groups.concat([providerLinks]);
   return react_default.createElement(TooltipLinkList, { ...rest3, links: all });
 }, "LiveContextMenu");
@@ -10549,23 +12046,22 @@ var useStatusSummary = /* @__PURE__ */ __name((item) => {
 }, "useStatusSummary");
 
 // src/manager/components/sidebar/components/CollapseIcon.tsx
-var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
+var CollapseIconWrapper = styled.div(({ isExpanded }) => ({
   width: 8,
   height: 8,
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  color: curriedTransparentize$1(0.4, theme.textMutedColor),
   transform: isExpanded ? "rotateZ(90deg)" : "none",
   transition: "transform .1s ease-out"
 }));
-var CollapseIcon2 = /* @__PURE__ */ __name(({ isExpanded }) => react_default.createElement(CollapseIconWrapper, { isExpanded }, react_default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", fill: "none" }, react_default.createElement(
+var CollapseIcon2 = /* @__PURE__ */ __name((props) => react_default.createElement(CollapseIconWrapper, { ...props }, react_default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", fill: "none" }, react_default.createElement(
   "path",
   {
-    fill: "#73828C",
+    fill: "currentColor",
     fillRule: "evenodd",
-    d: "M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z",
-    clipRule: "evenodd"
+    clipRule: "evenodd",
+    d: "M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z"
   }
 ))), "CollapseIcon");
 
@@ -10588,44 +12084,42 @@ var TypeIcon2 = styled.svg(
       if (type === "story") {
         return theme.color.seafoam;
       }
+      if (type === "test") {
+        return theme.color.green;
+      }
       return "currentColor";
     })()
   })
 );
-var BranchNode = styled.button(({ theme, depth = 0, isExpandable = false }) => ({
+var commonNodeStyles = /* @__PURE__ */ __name(({
+  theme,
+  depth = 0,
+  isExpandable = false
+}) => ({
+  flex: 1,
   width: "100%",
-  border: "none",
   cursor: "pointer",
   display: "flex",
   alignItems: "start",
   textAlign: "left",
-  paddingLeft: `${(isExpandable ? 8 : 22) + depth * 18}px`,
+  textDecoration: "none",
+  border: "none",
   color: "inherit",
   fontSize: `${theme.typography.size.s2}px`,
+  fontWeight: "inherit",
   background: "transparent",
   minHeight: 28,
   borderRadius: 4,
   gap: 6,
-  paddingTop: 5,
-  paddingBottom: 4
-}));
-var LeafNode = styled.a(({ theme, depth = 0 }) => ({
-  width: "100%",
-  cursor: "pointer",
-  color: "inherit",
-  display: "flex",
-  gap: 6,
-  flex: 1,
-  alignItems: "start",
-  paddingLeft: `${22 + depth * 18}px`,
+  paddingLeft: `${(isExpandable ? 8 : 22) + depth * 18}px`,
   paddingTop: 5,
   paddingBottom: 4,
-  fontSize: `${theme.typography.size.s2}px`,
-  textDecoration: "none",
   overflowWrap: "break-word",
   wordWrap: "break-word",
   wordBreak: "break-word"
-}));
+}), "commonNodeStyles");
+var BranchNode = styled.button(commonNodeStyles);
+var LeafNode = styled.a(commonNodeStyles);
 var RootNode = styled.div(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -10655,22 +12149,37 @@ var GroupNode = react_default.memo(/* @__PURE__ */ __name(function GroupNode2({
   return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "group" }, react_default.createElement(UseSymbol, { type: "group" }))), children2);
 }, "GroupNode"));
 var ComponentNode = react_default.memo(
-  /* @__PURE__ */ __name(function ComponentNode2({ theme, children: children2, isExpanded, isExpandable, isSelected, ...props }) {
+  /* @__PURE__ */ __name(function ComponentNode2({
+    theme,
+    children: children2,
+    isExpanded = false,
+    isExpandable = false,
+    isSelected,
+    ...props
+  }) {
     return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "component" }, react_default.createElement(UseSymbol, { type: "component" }))), children2);
   }, "ComponentNode")
 );
-var DocumentNode = react_default.memo(
-  /* @__PURE__ */ __name(function DocumentNode2({ theme, children: children2, docsMode, ...props }) {
-    return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), children2);
-  }, "DocumentNode")
-);
+var DocumentNode = react_default.memo(/* @__PURE__ */ __name(function DocumentNode2({ theme, children: children2, docsMode, ...props }) {
+  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), children2);
+}, "DocumentNode"));
 var StoryNode = react_default.memo(/* @__PURE__ */ __name(function StoryNode2({
   theme,
   children: children2,
+  isExpandable = false,
+  isExpanded = false,
+  isSelected,
   ...props
 }) {
-  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "story" }, react_default.createElement(UseSymbol, { type: "story" }))), children2);
+  return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "story" }, react_default.createElement(UseSymbol, { type: "story" }))), children2);
 }, "StoryNode"));
+var TestNode = react_default.memo(/* @__PURE__ */ __name(function TestNode2({
+  theme,
+  children: children2,
+  ...props
+}) {
+  return react_default.createElement(LeafNode, { tabIndex: -1, ...props }, react_default.createElement(Wrapper, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "test" }, react_default.createElement(UseSymbol, { type: "test" }))), children2);
+}, "TestNode"));
 
 // ../node_modules/es-toolkit/dist/function/after.mjs
 function after(n3, func) {
@@ -11036,7 +12545,7 @@ var useExpanded = /* @__PURE__ */ __name(({
         target.blur();
       }
       const type = highlightedElement.getAttribute("data-nodetype");
-      if ((isEnter || isSpace) && ["component", "story", "document"].includes(type)) {
+      if (type && (isEnter || isSpace) && ["component", "story", "document", "test"].includes(type)) {
         onSelectStoryId(highlightedItemId);
       }
       const isExpanded = highlightedElement.getAttribute("aria-expanded");
@@ -11081,7 +12590,7 @@ var Container6 = styled.div((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
 }));
-var CollapseButton = styled.button(({ theme }) => ({
+var CollapseButton = styled.button({
   all: "unset",
   display: "flex",
   padding: "0px 8px",
@@ -11095,7 +12604,7 @@ var CollapseButton = styled.button(({ theme }) => ({
     outline: "none",
     background: "var(--tree-node-background-hover)"
   }
-}));
+});
 var LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   position: "relative",
   display: "flex",
@@ -11189,22 +12698,23 @@ var statusOrder = [
   "status-value:pending",
   "status-value:unknown"
 ];
-var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
-  item,
-  statuses,
-  groupStatus,
-  refId,
-  docsMode,
-  isOrphan,
-  isDisplayed,
-  isSelected,
-  isFullyExpanded,
-  setFullyExpanded,
-  isExpanded,
-  setExpanded,
-  onSelectStoryId,
-  api
-}) {
+var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3(props) {
+  const {
+    item,
+    statuses,
+    groupStatus,
+    refId,
+    docsMode,
+    isOrphan,
+    isDisplayed,
+    isSelected,
+    isFullyExpanded,
+    setFullyExpanded,
+    isExpanded,
+    setExpanded,
+    onSelectStoryId,
+    api
+  } = props;
   const { isDesktop, isMobile, setMobileMenuOpen } = useLayout();
   const { counts, statusesByValue } = useStatusSummary(item);
   if (!isDisplayed) {
@@ -11261,58 +12771,6 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
   const id = createId(item.id, refId);
   const contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: /* @__PURE__ */ __name(() => {
   }, "onMouseEnter") };
-  if (item.type === "story" || item.type === "docs") {
-    const LeafNode2 = item.type === "docs" ? DocumentNode : StoryNode;
-    const statusValue = getMostCriticalStatusValue(
-      Object.values(statuses || {}).map((s2) => s2.value)
-    );
-    const [icon, textColor] = statusMapping[statusValue];
-    return react_default.createElement(
-      LeafNodeStyleWrapper,
-      {
-        key: id,
-        className: "sidebar-item",
-        "data-selected": isSelected,
-        "data-ref-id": refId,
-        "data-item-id": item.id,
-        "data-parent-id": item.parent,
-        "data-nodetype": item.type === "docs" ? "document" : "story",
-        "data-highlightable": isDisplayed,
-        onMouseEnter: contextMenu.onMouseEnter
-      },
-      react_default.createElement(
-        LeafNode2,
-        {
-          style: isSelected ? {} : { color: textColor },
-          href: getLink(item, refId),
-          id,
-          depth: isOrphan ? item.depth : item.depth - 1,
-          onClick: (event) => {
-            event.preventDefault();
-            onSelectStoryId(item.id);
-            if (isMobile) {
-              setMobileMenuOpen(false);
-            }
-          },
-          ...item.type === "docs" && { docsMode }
-        },
-        item.renderLabel?.(item, api) || item.name
-      ),
-      isSelected && react_default.createElement(SkipToContentLink, { asChild: true }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
-      contextMenu.node,
-      icon ? react_default.createElement(
-        StatusButton,
-        {
-          "aria-label": `Test status: ${statusValue.replace("status-value:", "")}`,
-          role: "status",
-          type: "button",
-          status: statusValue,
-          selectedItem: isSelected
-        },
-        icon
-      ) : null
-    );
-  }
   if (item.type === "root") {
     return react_default.createElement(
       RootNode,
@@ -11354,15 +12812,31 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
       )
     );
   }
-  if (item.type === "component" || item.type === "group") {
-    const itemStatus = groupStatus?.[item.id];
-    const color2 = itemStatus ? statusMapping[itemStatus][1] : null;
-    const BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
+  const itemStatus = getMostCriticalStatusValue(Object.values(statuses || {}).map((s2) => s2.value));
+  const [itemIcon, itemColor] = statusMapping[itemStatus];
+  const itemStatusButton = itemIcon ? react_default.createElement(
+    StatusButton,
+    {
+      "aria-label": `Test status: ${itemStatus.replace("status-value:", "")}`,
+      role: "status",
+      type: "button",
+      status: itemStatus,
+      selectedItem: isSelected
+    },
+    itemIcon
+  ) : null;
+  if (item.type === "component" || item.type === "group" || item.type === "story" && "children" in item && item.children) {
+    const { children: children2 = [] } = item;
+    const BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryNode }[item.type];
+    const status = getMostCriticalStatusValue([itemStatus, groupStatus?.[item.id]]);
+    const color2 = status ? statusMapping[status][1] : null;
+    const showBranchStatus = status === "status-value:error" || status === "status-value:warning";
     return react_default.createElement(
       LeafNodeStyleWrapper,
       {
         key: id,
         className: "sidebar-item",
+        "data-selected": isSelected,
         "data-ref-id": refId,
         "data-item-id": item.id,
         "data-parent-id": item.parent,
@@ -11374,24 +12848,32 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
         BranchNode2,
         {
           id,
-          style: color2 ? { color: color2 } : {},
-          "aria-controls": item.children && item.children.join(" "),
+          style: color2 && !isSelected ? { color: color2 } : {},
+          "aria-controls": children2.join(" "),
           "aria-expanded": isExpanded,
           depth: isOrphan ? item.depth : item.depth - 1,
-          isComponent: item.type === "component",
-          isExpandable: item.children && item.children.length > 0,
+          isExpandable: children2.length > 0,
           isExpanded,
           onClick: (event) => {
             event.preventDefault();
-            setExpanded({ ids: [item.id], value: !isExpanded });
-            if (item.type === "component" && !isExpanded && isDesktop) {
+            if (item.type === "story") {
               onSelectStoryId(item.id);
+              if (!isExpanded || isSelected) {
+                setExpanded({ ids: [item.id], value: !isExpanded });
+              }
+            } else if (item.type === "component") {
+              if (!isExpanded && isDesktop) {
+                onSelectStoryId(item.id);
+              }
+              setExpanded({ ids: [item.id], value: !isExpanded });
+            } else {
+              setExpanded({ ids: [item.id], value: !isExpanded });
             }
           },
           onMouseEnter: () => {
-            if (item.type === "component") {
+            if (item.type === "component" || item.type === "story") {
               api.emit(PRELOAD_ENTRIES, {
-                ids: [item.children[0]],
+                ids: [children2[0]],
                 options: { target: refId }
               });
             }
@@ -11399,11 +12881,49 @@ var Node2 = react_default.memo(/* @__PURE__ */ __name(function Node3({
         },
         item.renderLabel?.(item, api) || item.name
       ),
+      isSelected && react_default.createElement(SkipToContentLink, { asChild: true }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
       contextMenu.node,
-      ["status-value:error", "status-value:warning"].includes(itemStatus) && react_default.createElement(StatusButton, { type: "button", status: itemStatus }, react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6", type: "dot" }, react_default.createElement(UseSymbol, { type: "dot" })))
+      showBranchStatus ? react_default.createElement(StatusButton, { type: "button", status, selectedItem: isSelected }, react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6", type: "dot" }, react_default.createElement(UseSymbol, { type: "dot" }))) : itemStatusButton
     );
   }
-  return null;
+  const isTest = item.type === "story" && item.subtype === "test";
+  const LeafNode2 = isTest ? TestNode : { docs: DocumentNode, story: StoryNode }[item.type];
+  const nodeType = isTest ? "test" : { docs: "document", story: "story" }[item.type];
+  return react_default.createElement(
+    LeafNodeStyleWrapper,
+    {
+      key: id,
+      className: "sidebar-item",
+      "data-selected": isSelected,
+      "data-ref-id": refId,
+      "data-item-id": item.id,
+      "data-parent-id": item.parent,
+      "data-nodetype": nodeType,
+      "data-highlightable": isDisplayed,
+      onMouseEnter: contextMenu.onMouseEnter
+    },
+    react_default.createElement(
+      LeafNode2,
+      {
+        style: itemColor && !isSelected ? { color: itemColor } : {},
+        href: getLink(item, refId),
+        id,
+        depth: isOrphan ? item.depth : item.depth - 1,
+        onClick: (event) => {
+          event.preventDefault();
+          onSelectStoryId(item.id);
+          if (isMobile) {
+            setMobileMenuOpen(false);
+          }
+        },
+        ...item.type === "docs" && { docsMode }
+      },
+      item.renderLabel?.(item, api) || item.name
+    ),
+    isSelected && react_default.createElement(SkipToContentLink, { asChild: true }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
+    contextMenu.node,
+    itemStatusButton
+  );
 }, "Node"));
 var Root = react_default.memo(/* @__PURE__ */ __name(function Root2({
   setExpanded,
@@ -11482,7 +13002,7 @@ var Tree = react_default.memo(/* @__PURE__ */ __name(function Tree2({
       if (onlyChild.type === "docs") {
         return true;
       }
-      if (onlyChild.type === "story") {
+      if (onlyChild.type === "story" && onlyChild.subtype === "story") {
         return isStoryHoistable(onlyChild.name, name);
       }
       return false;
@@ -11490,7 +13010,7 @@ var Tree = react_default.memo(/* @__PURE__ */ __name(function Tree2({
   }, [data]);
   const collapsedItems = useMemo(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
-    [singleStoryComponentIds]
+    [data, singleStoryComponentIds]
   );
   const collapsedData = useMemo(() => {
     return singleStoryComponentIds.reduce(
@@ -11512,7 +13032,7 @@ var Tree = react_default.memo(/* @__PURE__ */ __name(function Tree2({
       },
       { ...data }
     );
-  }, [data]);
+  }, [data, singleStoryComponentIds]);
   const ancestry = useMemo(() => {
     return collapsedItems.reduce(
       (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
@@ -11689,11 +13209,10 @@ var Ref = react_default.memo(/* @__PURE__ */ __name(function Ref2(props) {
   const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
   const setHighlightedItemId = useCallback(
     (itemId) => setHighlighted({ itemId, refId }),
-    [setHighlighted]
+    [setHighlighted, refId]
   );
   const onSelectStoryId = useCallback(
-    // @ts-expect-error (non strict)
-    (storyId) => api && api.selectStory(storyId, void 0, { ref: !isMain && refId }),
+    (storyId) => api?.selectStory(storyId, void 0, { ref: isMain ? void 0 : refId }),
     [api, isMain, refId]
   );
   return react_default.createElement(react_default.Fragment, null, isMain || react_default.createElement(
@@ -11809,9 +13328,8 @@ var useHighlighted = /* @__PURE__ */ __name(({
         if (highlightable[nextIndex].getAttribute("data-nodetype") === "component") {
           const { itemId, refId } = highlightedRef.current;
           const item = api.resolveStory(itemId, refId === "storybook_internal" ? void 0 : refId);
-          if (item.type === "component") {
+          if (item?.type === "component") {
             api.emit(PRELOAD_ENTRIES, {
-              // @ts-expect-error (non strict)
               ids: [item.children[0]],
               options: { target: refId }
             });
@@ -11821,7 +13339,7 @@ var useHighlighted = /* @__PURE__ */ __name(({
     }, "navigateTree");
     document6.addEventListener("keydown", navigateTree);
     return () => document6.removeEventListener("keydown", navigateTree);
-  }, [isLoading, isBrowsing, highlightedRef, highlightElement]);
+  }, [api, containerRef, isLoading, isBrowsing, highlightedRef, highlightElement]);
   return [highlighted, updateHighlighted, highlightedRef];
 }, "useHighlighted");
 
@@ -11988,8 +13506,8 @@ var SidebarMenu = /* @__PURE__ */ __name(({ menu, isHighlighted, onClick }) => {
     react_default.createElement(
       SidebarIconButton,
       {
-        title: "Shortcuts",
-        "aria-label": "Shortcuts",
+        title: "Settings",
+        "aria-label": "Settings",
         highlighted: !!isHighlighted,
         active: isTooltipVisible,
         size: "medium",
@@ -15288,6 +16806,7 @@ var FocusKey = styled.code(({ theme }) => ({
   margin: 5,
   marginTop: 6,
   height: 16,
+  fontFamily: theme.typography.fonts.base,
   lineHeight: "16px",
   textAlign: "center",
   fontSize: "11px",
@@ -15659,7 +17178,7 @@ var Result = react_default.memo(/* @__PURE__ */ __name(function Result2({ item,
   const nameMatch = matches2.find((match) => match.key === "name");
   const pathMatches = matches2.filter((match) => match.key === "path");
   const [icon] = item.status ? statusMapping[item.status] : [];
-  return react_default.createElement(ResultRow, { ...props, onClick: click }, react_default.createElement(IconWrapper2, null, item.type === "component" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "component" }, react_default.createElement(UseSymbol, { type: "component" })), item.type === "story" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "story" }, react_default.createElement(UseSymbol, { type: "story" })), !(item.type === "component" || item.type === "story") && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), react_default.createElement(ResultRowContent, { className: "search-result-item--label" }, react_default.createElement(Title, null, react_default.createElement(Highlight, { match: nameMatch }, item.name)), react_default.createElement(Path, null, item.path.map((group, index) => react_default.createElement("span", { key: index }, react_default.createElement(Highlight, { match: pathMatches.find((match) => match.arrayIndex === index) }, group))))), item.status ? react_default.createElement(StatusLabel, { status: item.status }, icon) : null);
+  return react_default.createElement(ResultRow, { ...props, onClick: click }, react_default.createElement(IconWrapper2, null, item.type === "component" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "component" }, react_default.createElement(UseSymbol, { type: "component" })), item.type === "story" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: item.subtype }, react_default.createElement(UseSymbol, { type: item.subtype })), !(item.type === "component" || item.type === "story") && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), react_default.createElement(ResultRowContent, { className: "search-result-item--label" }, react_default.createElement(Title, null, react_default.createElement(Highlight, { match: nameMatch }, item.name)), react_default.createElement(Path, null, item.path.map((group, index) => react_default.createElement("span", { key: index }, react_default.createElement(Highlight, { match: pathMatches.find((match) => match.arrayIndex === index) }, group))))), item.status ? react_default.createElement(StatusLabel, { status: item.status }, icon) : null);
 }, "Result"));
 var SearchResults = react_default.memo(/* @__PURE__ */ __name(function SearchResults2({
   query,
@@ -16306,19 +17825,14 @@ var SidebarBottom = /* @__PURE__ */ __name(({ isDevelopment }) => {
 }, "SidebarBottom");
 
 // src/manager/components/sidebar/TagsFilterPanel.tsx
-var BUILT_IN_TAGS = /* @__PURE__ */ new Set([
-  "dev",
-  "test",
-  "autodocs",
-  "attached-mdx",
-  "unattached-mdx",
-  "play-fn",
-  "test-fn",
-  "vitest",
-  "svelte-csf",
-  "svelte-csf-v4",
-  "svelte-csf-v5"
-]);
+var groupByType = /* @__PURE__ */ __name((filters) => filters.reduce(
+  (acc, filter2) => {
+    acc[filter2.type] = acc[filter2.type] || [];
+    acc[filter2.type].push(filter2);
+    return acc;
+  },
+  {}
+), "groupByType");
 var Wrapper3 = styled.div({
   minWidth: 240,
   maxWidth: 300
@@ -16330,79 +17844,183 @@ var Actions3 = styled.div(({ theme }) => ({
   padding: 4,
   borderBottom: `1px solid ${theme.appBorderColor}`
 }));
+var TagRow = styled.div({
+  display: "flex",
+  "& button": {
+    width: 64,
+    maxWidth: 64,
+    marginLeft: 4,
+    paddingLeft: 0,
+    paddingRight: 0,
+    fontWeight: "normal",
+    transition: "all 150ms"
+  },
+  "&:not(:hover)": {
+    "& button": {
+      marginLeft: 0,
+      maxWidth: 0,
+      opacity: 0
+    },
+    "& svg + input": {
+      display: "none"
+    }
+  }
+});
+var Label = styled.div({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var MutedText = styled.span(({ theme }) => ({
+  color: theme.textMutedColor
+}));
 var TagsFilterPanel = /* @__PURE__ */ __name(({
   api,
-  allTags,
-  selectedTags,
-  toggleTag,
-  setAllTags,
-  inverted,
-  setInverted,
-  isDevelopment
+  filtersById,
+  includedFilters,
+  excludedFilters,
+  toggleFilter,
+  setAllFilters,
+  resetFilters,
+  isDevelopment,
+  isDefaultSelection,
+  hasDefaultSelection
 }) => {
-  const [builtInEntries, userEntries] = Array.from(allTags.entries()).reduce(
-    (acc, [tag, count]) => {
-      acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]);
-      return acc;
-    },
-    [[], []]
+  const ref = useRef(null);
+  const renderLink = /* @__PURE__ */ __name(({
+    id,
+    type,
+    title,
+    icon,
+    count
+  }) => {
+    const onToggle = /* @__PURE__ */ __name((selected, excluded) => toggleFilter(id, selected, excluded), "onToggle");
+    const isIncluded = includedFilters.has(id);
+    const isExcluded = excludedFilters.has(id);
+    const isChecked = isIncluded || isExcluded;
+    const toggleTagLabel = `${isChecked ? "Remove" : "Add"} ${type} filter: ${title}`;
+    const invertButtonLabel = `${isExcluded ? "Include" : "Exclude"} ${type}: ${title}`;
+    if (count === 0 && type === "built-in") {
+      return void 0;
+    }
+    return {
+      id: `filter-${type}-${id}`,
+      content: react_default.createElement(TagRow, null, react_default.createElement(
+        WithTooltip,
+        {
+          delayShow: 1e3,
+          hasChrome: false,
+          style: { minWidth: 0, flex: 1 },
+          tooltip: react_default.createElement(TooltipNote, { note: toggleTagLabel }),
+          trigger: "hover"
+        },
+        react_default.createElement(
+          ListItem,
+          {
+            as: "label",
+            icon: react_default.createElement(react_default.Fragment, null, isExcluded ? react_default.createElement(DeleteIcon, null) : isIncluded ? null : icon, react_default.createElement(
+              Form.Checkbox,
+              {
+                checked: isChecked,
+                onChange: () => onToggle(!isChecked),
+                "data-tag": title
+              }
+            )),
+            "aria-label": toggleTagLabel,
+            title: react_default.createElement(Label, null, title, isExcluded && react_default.createElement(MutedText, null, " (excluded)")),
+            right: isExcluded ? react_default.createElement("s", null, count) : react_default.createElement("span", null, count)
+          }
+        )
+      ), react_default.createElement(
+        WithTooltip,
+        {
+          delayShow: 1e3,
+          hasChrome: false,
+          tooltip: react_default.createElement(TooltipNote, { note: invertButtonLabel }),
+          trigger: "hover"
+        },
+        react_default.createElement(
+          Button,
+          {
+            variant: "ghost",
+            size: "medium",
+            onClick: () => onToggle(true, !isExcluded),
+            "aria-label": invertButtonLabel
+          },
+          isExcluded ? "Include" : "Exclude"
+        )
+      ))
+    };
+  }, "renderLink");
+  const groups = groupByType(Object.values(filtersById));
+  const links = Object.values(groups).map(
+    (group) => group.sort((a2, b2) => a2.id.localeCompare(b2.id)).map((filter2) => renderLink(filter2)).filter(Boolean)
   );
-  const docsUrl = api.getDocsUrl({ subpath: "writing-stories/tags#filtering-by-custom-tags" });
-  const noTags = {
-    id: "no-tags",
-    title: "There are no tags. Use tags to organize and filter your Storybook.",
-    isIndented: false
-  };
-  const groups = [
-    allTags.size === 0 ? [noTags] : [],
-    userEntries.sort((a2, b2) => a2[0].localeCompare(b2[0])).map(([tag, count]) => {
-      const checked = selectedTags.includes(tag);
-      const id = `tag-${tag}`;
-      return {
-        id,
-        title: tag,
-        right: count,
-        input: react_default.createElement(Form.Checkbox, { checked, onChange: () => toggleTag(tag) })
-      };
-    }),
-    builtInEntries.sort((a2, b2) => a2[0].localeCompare(b2[0])).map(([tag, count]) => {
-      const checked = selectedTags.includes(tag);
-      const id = `tag-${tag}`;
-      return {
-        id,
-        title: tag,
-        right: count,
-        input: react_default.createElement(Form.Checkbox, { checked, onChange: () => toggleTag(tag) })
-      };
-    })
-  ];
-  if (userEntries.length === 0 && isDevelopment) {
-    groups.push([
+  if (!groups.tag?.length && isDevelopment) {
+    links.push([
       {
         id: "tags-docs",
         title: "Learn how to add tags",
         icon: react_default.createElement(DocumentIcon, null),
         right: react_default.createElement(ShareAltIcon, null),
-        href: docsUrl
+        href: api.getDocsUrl({ subpath: "writing-stories/tags#filtering-by-custom-tags" })
       }
     ]);
   }
-  return react_default.createElement(Wrapper3, null, allTags.size > 0 && react_default.createElement(Actions3, null, selectedTags.length ? react_default.createElement(IconButton, { id: "unselect-all", onClick: () => setAllTags(false) }, react_default.createElement(CloseIcon, null), "Clear filters") : react_default.createElement(IconButton, { id: "select-all", onClick: () => setAllTags(true) }, react_default.createElement(BatchAcceptIcon, null), "Select all"), react_default.createElement(
+  const filtersLabel = includedFilters.size === 0 && excludedFilters.size === 0 ? "Select all" : "Clear filters";
+  return react_default.createElement(Wrapper3, { ref }, Object.keys(filtersById).length > 0 && react_default.createElement(Actions3, null, includedFilters.size === 0 && excludedFilters.size === 0 ? react_default.createElement(
     IconButton,
     {
-      id: "invert-selection",
-      disabled: selectedTags.length === 0,
-      onClick: () => setInverted(!inverted),
-      active: inverted
+      id: "select-all",
+      "aria-label": filtersLabel,
+      key: "select-all",
+      onClick: () => setAllFilters(true)
+    },
+    react_default.createElement(BatchAcceptIcon, null),
+    filtersLabel
+  ) : react_default.createElement(
+    IconButton,
+    {
+      id: "deselect-all",
+      "aria-label": filtersLabel,
+      key: "deselect-all",
+      onClick: () => setAllFilters(false)
+    },
+    react_default.createElement(SweepIcon, null),
+    filtersLabel
+  ), hasDefaultSelection && react_default.createElement(
+    WithTooltip,
+    {
+      delayShow: 1e3,
+      hasChrome: false,
+      tooltip: react_default.createElement(TooltipNote, { note: "Reset to default selection" }),
+      trigger: "hover"
     },
-    inverted ? react_default.createElement(EyeCloseIcon, null) : react_default.createElement(EyeIcon, null),
-    "Invert"
-  )), react_default.createElement(TooltipLinkList, { links: groups }));
+    react_default.createElement(
+      IconButton,
+      {
+        id: "reset-filters",
+        key: "reset-filters",
+        onClick: resetFilters,
+        "aria-label": "Reset filters",
+        disabled: isDefaultSelection
+      },
+      react_default.createElement(UndoIcon, null)
+    )
+  )), react_default.createElement(TooltipLinkList, { links }));
 }, "TagsFilterPanel");
 
 // src/manager/components/sidebar/TagsFilter.tsx
 var TAGS_FILTER = "tags-filter";
-var BUILT_IN_TAGS_HIDE = /* @__PURE__ */ new Set(["dev", "autodocs", "test", "attached-mdx", "unattached-mdx"]);
+var BUILT_IN_TAGS = /* @__PURE__ */ new Set([
+  "dev",
+  "test",
+  "autodocs",
+  "attached-mdx",
+  "unattached-mdx",
+  "play-fn",
+  "test-fn"
+]);
 var Wrapper4 = styled.div({
   position: "relative"
 });
@@ -16423,53 +18041,119 @@ var TagSelected = styled(Badge)(({ theme }) => ({
   background: theme.color.secondary,
   color: theme.color.lightest
 }));
-var TagsFilter = /* @__PURE__ */ __name(({
-  api,
-  indexJson,
-  initialSelectedTags = [],
-  isDevelopment
-}) => {
-  const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
+var TagsFilter = /* @__PURE__ */ __name(({ api, indexJson, isDevelopment, tagPresets }) => {
+  const filtersById = useMemo(() => {
+    const userTagsCounts = Object.values(indexJson.entries).reduce((acc, entry) => {
+      entry.tags?.forEach((tag) => {
+        if (!BUILT_IN_TAGS.has(tag)) {
+          acc.set(tag, (acc.get(tag) || 0) + 1);
+        }
+      });
+      return acc;
+    }, /* @__PURE__ */ new Map());
+    const userFilters = Object.fromEntries(
+      userTagsCounts.entries().map(([tag, count]) => {
+        const filterFn = /* @__PURE__ */ __name((entry, excluded) => excluded ? !entry.tags?.includes(tag) : !!entry.tags?.includes(tag), "filterFn");
+        return [tag, { id: tag, type: "tag", title: tag, count, filterFn }];
+      })
+    );
+    const withCount = /* @__PURE__ */ __name((filterFn) => ({
+      count: Object.values(indexJson.entries).filter((entry) => filterFn(entry)).length,
+      filterFn
+    }), "withCount");
+    const builtInFilters = {
+      _docs: {
+        id: "_docs",
+        type: "built-in",
+        title: "Documentation",
+        icon: react_default.createElement(DocumentIcon, { color: color.gold }),
+        ...withCount(
+          (entry, excluded) => excluded ? entry.type !== "docs" : entry.type === "docs"
+        )
+      },
+      _play: {
+        id: "_play",
+        type: "built-in",
+        title: "Play",
+        icon: react_default.createElement(PlayHollowIcon, { color: color.seafoam }),
+        ...withCount(
+          (entry, excluded) => excluded ? entry.type !== "story" || !entry.tags?.includes("play-fn") : entry.type === "story" && !!entry.tags?.includes("play-fn")
+        )
+      },
+      _test: {
+        id: "_test",
+        type: "built-in",
+        title: "Testing",
+        icon: react_default.createElement(BeakerIcon, { color: color.green }),
+        ...withCount(
+          (entry, excluded) => excluded ? entry.type !== "story" || entry.subtype !== "test" : entry.type === "story" && entry.subtype === "test"
+        )
+      }
+    };
+    return { ...userFilters, ...builtInFilters };
+  }, [indexJson.entries]);
+  const { defaultIncluded, defaultExcluded } = useMemo(() => {
+    return Object.entries(tagPresets).reduce(
+      (acc, [tag, { defaultFilterSelection }]) => {
+        if (defaultFilterSelection === "include") {
+          acc.defaultIncluded.add(tag);
+        } else if (defaultFilterSelection === "exclude") {
+          acc.defaultExcluded.add(tag);
+        }
+        return acc;
+      },
+      { defaultIncluded: /* @__PURE__ */ new Set(), defaultExcluded: /* @__PURE__ */ new Set() }
+    );
+  }, [tagPresets]);
+  const [includedFilters, setIncludedFilters] = useState(new Set(defaultIncluded));
+  const [excludedFilters, setExcludedFilters] = useState(new Set(defaultExcluded));
   const [expanded, setExpanded] = useState(false);
-  const [inverted, setInverted] = useState(false);
-  const tagsActive = selectedTags.length > 0;
+  const tagsActive = includedFilters.size > 0 || excludedFilters.size > 0;
+  const resetFilters = useCallback(() => {
+    setIncludedFilters(new Set(defaultIncluded));
+    setExcludedFilters(new Set(defaultExcluded));
+  }, [defaultIncluded, defaultExcluded]);
+  useEffect(resetFilters, [resetFilters]);
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
-      if (selectedTags.length === 0) {
-        return true;
-      }
-      const match = selectedTags.some((tag) => item.tags?.includes(tag));
-      return inverted ? !match : match;
-    });
-  }, [api, selectedTags, inverted]);
-  const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
-    entry.tags?.forEach((tag) => {
-      if (!BUILT_IN_TAGS_HIDE.has(tag)) {
-        acc.set(tag, (acc.get(tag) || 0) + 1);
-      }
+      const included = Object.values(
+        groupByType(Array.from(includedFilters).map((id) => filtersById[id]))
+      );
+      const excluded = Object.values(
+        groupByType(Array.from(excludedFilters).map((id) => filtersById[id]))
+      );
+      return (!included.length || included.every((group) => group.some(({ filterFn }) => filterFn(item, false)))) && (!excluded.length || excluded.every((group) => group.every(({ filterFn }) => filterFn(item, true))));
     });
-    return acc;
-  }, /* @__PURE__ */ new Map());
-  const toggleTag = useCallback(
-    (tag) => {
-      if (selectedTags.includes(tag)) {
-        setSelectedTags(selectedTags.filter((t2) => t2 !== tag));
+  }, [api, includedFilters, excludedFilters, filtersById]);
+  const toggleFilter = useCallback(
+    (id, selected, excluded) => {
+      const set2 = /* @__PURE__ */ new Set([id]);
+      if (excluded === true) {
+        setExcludedFilters(excludedFilters.union(set2));
+        setIncludedFilters(includedFilters.difference(set2));
+      } else if (excluded === false) {
+        setIncludedFilters(includedFilters.union(set2));
+        setExcludedFilters(excludedFilters.difference(set2));
+      } else if (selected) {
+        setIncludedFilters(includedFilters.union(set2));
+        setExcludedFilters(excludedFilters.difference(set2));
       } else {
-        setSelectedTags([...selectedTags, tag]);
+        setIncludedFilters(includedFilters.difference(set2));
+        setExcludedFilters(excludedFilters.difference(set2));
       }
     },
-    [selectedTags, setSelectedTags]
+    [includedFilters, excludedFilters]
   );
-  const setAllTags = useCallback(
+  const setAllFilters = useCallback(
     (selected) => {
       if (selected) {
-        setSelectedTags(Array.from(allTags.keys()));
+        setIncludedFilters(new Set(Object.keys(filtersById)));
       } else {
-        setSelectedTags([]);
-        setInverted(false);
+        setIncludedFilters(/* @__PURE__ */ new Set());
       }
+      setExcludedFilters(/* @__PURE__ */ new Set());
     },
-    [allTags, setSelectedTags]
+    [filtersById]
   );
   const handleToggleExpand = useCallback(
     (event) => {
@@ -16478,7 +18162,7 @@ var TagsFilter = /* @__PURE__ */ __name(({
     },
     [expanded, setExpanded]
   );
-  if (allTags.size === 0 && !isDevelopment) {
+  if (Object.keys(filtersById).length === 0 && !isDevelopment) {
     return null;
   }
   return react_default.createElement(
@@ -16492,18 +18176,20 @@ var TagsFilter = /* @__PURE__ */ __name(({
         TagsFilterPanel,
         {
           api,
-          allTags,
-          selectedTags,
-          toggleTag,
-          setAllTags,
-          inverted,
-          setInverted,
-          isDevelopment
+          filtersById,
+          includedFilters,
+          excludedFilters,
+          toggleFilter,
+          setAllFilters,
+          resetFilters,
+          isDevelopment,
+          isDefaultSelection: includedFilters.symmetricDifference(defaultIncluded).size === 0 && excludedFilters.symmetricDifference(defaultExcluded).size === 0,
+          hasDefaultSelection: defaultIncluded.size > 0 || defaultExcluded.size > 0
         }
       ),
       closeOnOutsideClick: true
     },
-    react_default.createElement(Wrapper4, null, react_default.createElement(IconButton, { key: "tags", title: "Tag filters", active: tagsActive, onClick: handleToggleExpand }, react_default.createElement(FilterIcon, null)), selectedTags.length > 0 && react_default.createElement(TagSelected, null))
+    react_default.createElement(Wrapper4, null, react_default.createElement(IconButton, { key: "tags", title: "Tag filters", active: tagsActive, onClick: handleToggleExpand }, react_default.createElement(FilterIcon, null)), includedFilters.size + excludedFilters.size > 0 && react_default.createElement(TagSelected, null))
   );
 }, "TagsFilter");
 
@@ -17322,11 +19008,11 @@ function countBy(collection, iteratee$1) {
     return {};
   }
   const array = isArrayLike(collection) ? Array.from(collection) : Object.values(collection);
-  const mapper3 = iteratee(iteratee$1 ?? void 0);
+  const mapper5 = iteratee(iteratee$1 ?? void 0);
   const result2 = /* @__PURE__ */ Object.create(null);
   for (let i2 = 0; i2 < array.length; i2++) {
     const item = array[i2];
-    const key = mapper3(item);
+    const key = mapper5(item);
     result2[key] = (result2[key] ?? 0) + 1;
   }
   return result2;
@@ -17385,10 +19071,10 @@ function last2(array) {
 __name(last2, "last");
 
 // ../node_modules/es-toolkit/dist/array/differenceBy.mjs
-function differenceBy(firstArr, secondArr, mapper3) {
-  const mappedSecondSet = new Set(secondArr.map((item) => mapper3(item)));
+function differenceBy(firstArr, secondArr, mapper5) {
+  const mappedSecondSet = new Set(secondArr.map((item) => mapper5(item)));
   return firstArr.filter((item) => {
-    return !mappedSecondSet.has(mapper3(item));
+    return !mappedSecondSet.has(mapper5(item));
   });
 }
 __name(differenceBy, "differenceBy");
@@ -18151,9 +19837,9 @@ function intersection2(...arrays) {
 __name(intersection2, "intersection");
 
 // ../node_modules/es-toolkit/dist/array/intersectionBy.mjs
-function intersectionBy(firstArr, secondArr, mapper3) {
-  const mappedSecondSet = new Set(secondArr.map(mapper3));
-  return firstArr.filter((item) => mappedSecondSet.has(mapper3(item)));
+function intersectionBy(firstArr, secondArr, mapper5) {
+  const mappedSecondSet = new Set(secondArr.map(mapper5));
+  return firstArr.filter((item) => mappedSecondSet.has(mapper5(item)));
 }
 __name(intersectionBy, "intersectionBy");
 
@@ -19353,11 +21039,11 @@ function union(...arrays) {
 __name(union, "union");
 
 // ../node_modules/es-toolkit/dist/array/uniqBy.mjs
-function uniqBy(arr, mapper3) {
+function uniqBy(arr, mapper5) {
   const map2 = /* @__PURE__ */ new Map();
   for (let i2 = 0; i2 < arr.length; i2++) {
     const item = arr[i2];
-    const key = mapper3(item);
+    const key = mapper5(item);
     if (!map2.has(key)) {
       map2.set(key, item);
     }
@@ -19530,15 +21216,15 @@ __name(windowed, "windowed");
 // ../node_modules/es-toolkit/dist/compat/array/xorBy.mjs
 function xorBy(...values3) {
   const lastValue = last2(values3);
-  let mapper3 = identity;
+  let mapper5 = identity;
   if (!isArrayLikeObject(lastValue) && lastValue != null) {
-    mapper3 = iteratee(lastValue);
+    mapper5 = iteratee(lastValue);
     values3 = values3.slice(0, -1);
   }
   const arrays = values3.filter(isArrayLikeObject);
-  const union2 = unionBy(...arrays, mapper3);
-  const intersections = windowed(arrays, 2).map(([arr1, arr2]) => intersectionBy2(arr1, arr2, mapper3));
-  return differenceBy2(union2, unionBy(...intersections, mapper3), mapper3);
+  const union2 = unionBy(...arrays, mapper5);
+  const intersections = windowed(arrays, 2).map(([arr1, arr2]) => intersectionBy2(arr1, arr2, mapper5));
+  return differenceBy2(union2, unionBy(...intersections, mapper5), mapper5);
 }
 __name(xorBy, "xorBy");
 
@@ -23562,6 +25248,14 @@ var Sidebar = react_default.memo(/* @__PURE__ */ __name(function Sidebar2({
   const lastViewedProps = useLastViewed(selected);
   const { isMobile } = useLayout();
   const api = useStorybookApi();
+  const tagPresets = useMemo(
+    () => Object.entries(scope.TAGS_OPTIONS ?? {}).reduce((acc, entry) => {
+      const [tag, option] = entry;
+      acc[tag] = option;
+      return acc;
+    }, {}),
+    []
+  );
   return react_default.createElement(Container7, { className: "container sidebar-container", "aria-label": "Global" }, react_default.createElement(ScrollArea, { vertical: true, offset: 3, scrollbarSize: 6 }, react_default.createElement(Top, { row: 1.6 }, react_default.createElement(
     Heading,
     {
@@ -23603,7 +25297,15 @@ var Sidebar = react_default.memo(/* @__PURE__ */ __name(function Sidebar2({
           onOpenChange: setIsFileSearchModalOpen
         }
       )),
-      searchFieldContent: indexJson && react_default.createElement(TagsFilter, { api, indexJson, isDevelopment }),
+      searchFieldContent: indexJson && react_default.createElement(
+        TagsFilter,
+        {
+          api,
+          indexJson,
+          isDevelopment,
+          tagPresets
+        }
+      ),
       ...lastViewedProps
     },
     ({
@@ -23639,241 +25341,9 @@ var Sidebar = react_default.memo(/* @__PURE__ */ __name(function Sidebar2({
   )), isMobile || isLoading ? null : react_default.createElement(SidebarBottom, { isDevelopment })));
 }, "Sidebar"));
 
-// src/manager/container/Menu.tsx
-var focusableUIElements = {
-  storySearchField: "storybook-explorer-searchfield",
-  storyListMenu: "storybook-explorer-menu",
-  storyPanelRoot: "storybook-panel-root"
-};
-var Key = styled.span(({ theme }) => ({
-  display: "inline-block",
-  height: 16,
-  lineHeight: "16px",
-  textAlign: "center",
-  fontSize: "11px",
-  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 6px"
-}));
-var KeyChild = styled.code({
-  padding: 0,
-  verticalAlign: "middle",
-  "& + &": {
-    marginLeft: 6
-  }
-});
-var Shortcut = /* @__PURE__ */ __name(({ keys: keys2 }) => react_default.createElement(Key, null, keys2.map((key) => react_default.createElement(KeyChild, { key }, shortcutToHumanString([key])))), "Shortcut");
-var useMenu = /* @__PURE__ */ __name((state, api, showToolbar, isFullscreen, isPanelShown, isNavShown, enableShortcuts) => {
-  const shortcutKeys = api.getShortcutKeys();
-  const about = useMemo(
-    () => ({
-      id: "about",
-      title: "About your Storybook",
-      onClick: /* @__PURE__ */ __name(() => api.changeSettingsTab("about"), "onClick"),
-      icon: react_default.createElement(InfoIcon, null)
-    }),
-    [api]
-  );
-  const documentation = useMemo(() => {
-    const docsUrl = api.getDocsUrl({ versioned: true, renderer: true });
-    return {
-      id: "documentation",
-      title: "Documentation",
-      href: docsUrl,
-      icon: react_default.createElement(ShareAltIcon, null)
-    };
-  }, [api]);
-  const whatsNewNotificationsEnabled = state.whatsNewData?.status === "SUCCESS" && !state.disableWhatsNewNotifications;
-  const isWhatsNewUnread = api.isWhatsNewUnread();
-  const whatsNew = useMemo(
-    () => ({
-      id: "whats-new",
-      title: "What's new?",
-      onClick: /* @__PURE__ */ __name(() => api.changeSettingsTab("whats-new"), "onClick"),
-      right: whatsNewNotificationsEnabled && isWhatsNewUnread && react_default.createElement(Badge, { status: "positive" }, "Check it out"),
-      icon: react_default.createElement(WandIcon, null)
-    }),
-    [api, whatsNewNotificationsEnabled, isWhatsNewUnread]
-  );
-  const shortcuts = useMemo(
-    () => ({
-      id: "shortcuts",
-      title: "Keyboard shortcuts",
-      onClick: /* @__PURE__ */ __name(() => api.changeSettingsTab("shortcuts"), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.shortcutsPage }) : null,
-      icon: react_default.createElement(CommandIcon, null)
-    }),
-    [api, enableShortcuts, shortcutKeys.shortcutsPage]
-  );
-  const sidebarToggle = useMemo(
-    () => ({
-      id: "S",
-      title: "Show sidebar",
-      onClick: /* @__PURE__ */ __name(() => api.toggleNav(), "onClick"),
-      active: isNavShown,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toggleNav }) : null,
-      icon: isNavShown ? react_default.createElement(CheckIcon, null) : null
-    }),
-    [api, enableShortcuts, shortcutKeys, isNavShown]
-  );
-  const toolbarToogle = useMemo(
-    () => ({
-      id: "T",
-      title: "Show toolbar",
-      onClick: /* @__PURE__ */ __name(() => api.toggleToolbar(), "onClick"),
-      active: showToolbar,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toolbar }) : null,
-      icon: showToolbar ? react_default.createElement(CheckIcon, null) : null
-    }),
-    [api, enableShortcuts, shortcutKeys, showToolbar]
-  );
-  const addonsToggle = useMemo(
-    () => ({
-      id: "A",
-      title: "Show addons panel",
-      onClick: /* @__PURE__ */ __name(() => api.togglePanel(), "onClick"),
-      active: isPanelShown,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.togglePanel }) : null,
-      icon: isPanelShown ? react_default.createElement(CheckIcon, null) : null
-    }),
-    [api, enableShortcuts, shortcutKeys, isPanelShown]
-  );
-  const addonsOrientationToggle = useMemo(
-    () => ({
-      id: "D",
-      title: "Change addons orientation",
-      onClick: /* @__PURE__ */ __name(() => api.togglePanelPosition(), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.panelPosition }) : null
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  );
-  const fullscreenToggle = useMemo(
-    () => ({
-      id: "F",
-      title: "Go full screen",
-      onClick: /* @__PURE__ */ __name(() => api.toggleFullscreen(), "onClick"),
-      active: isFullscreen,
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.fullScreen }) : null,
-      icon: isFullscreen ? react_default.createElement(CheckIcon, null) : null
-    }),
-    [api, enableShortcuts, shortcutKeys, isFullscreen]
-  );
-  const searchToggle = useMemo(
-    () => ({
-      id: "/",
-      title: "Search",
-      onClick: /* @__PURE__ */ __name(() => api.focusOnUIElement(focusableUIElements.storySearchField), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.search }) : null
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  );
-  const up = useMemo(
-    () => ({
-      id: "up",
-      title: "Previous component",
-      onClick: /* @__PURE__ */ __name(() => api.jumpToComponent(-1), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevComponent }) : null
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  );
-  const down = useMemo(
-    () => ({
-      id: "down",
-      title: "Next component",
-      onClick: /* @__PURE__ */ __name(() => api.jumpToComponent(1), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextComponent }) : null
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  );
-  const prev = useMemo(
-    () => ({
-      id: "prev",
-      title: "Previous story",
-      onClick: /* @__PURE__ */ __name(() => api.jumpToStory(-1), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevStory }) : null
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  );
-  const next = useMemo(
-    () => ({
-      id: "next",
-      title: "Next story",
-      onClick: /* @__PURE__ */ __name(() => api.jumpToStory(1), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextStory }) : null
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  );
-  const collapse = useMemo(
-    () => ({
-      id: "collapse",
-      title: "Collapse all",
-      onClick: /* @__PURE__ */ __name(() => api.emit(STORIES_COLLAPSE_ALL), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.collapseAll }) : null
-    }),
-    [api, enableShortcuts, shortcutKeys]
-  );
-  const getAddonsShortcuts = useCallback(() => {
-    const addonsShortcuts = api.getAddonsShortcuts();
-    const keys2 = shortcutKeys;
-    return Object.entries(addonsShortcuts).filter(([_2, { showInMenu }]) => showInMenu).map(([actionName, { label, action }]) => ({
-      id: actionName,
-      title: label,
-      onClick: /* @__PURE__ */ __name(() => action(), "onClick"),
-      right: enableShortcuts ? react_default.createElement(Shortcut, { keys: keys2[actionName] }) : null
-    }));
-  }, [api, enableShortcuts, shortcutKeys]);
-  return useMemo(
-    () => [
-      [
-        about,
-        ...state.whatsNewData?.status === "SUCCESS" ? [whatsNew] : [],
-        documentation,
-        ...enableShortcuts ? [shortcuts] : []
-      ],
-      [
-        sidebarToggle,
-        toolbarToogle,
-        addonsToggle,
-        addonsOrientationToggle,
-        fullscreenToggle,
-        searchToggle,
-        up,
-        down,
-        prev,
-        next,
-        collapse
-      ],
-      getAddonsShortcuts()
-    ],
-    [
-      about,
-      state,
-      whatsNew,
-      documentation,
-      shortcuts,
-      sidebarToggle,
-      toolbarToogle,
-      addonsToggle,
-      addonsOrientationToggle,
-      fullscreenToggle,
-      searchToggle,
-      up,
-      down,
-      prev,
-      next,
-      collapse,
-      getAddonsShortcuts,
-      enableShortcuts
-    ]
-  );
-}, "useMenu");
-
 // src/manager/container/Sidebar.tsx
 var Sidebar3 = react_default.memo(/* @__PURE__ */ __name(function Sideber({ onMenuClick }) {
-  const mapper3 = /* @__PURE__ */ __name(({ state, api }) => {
+  const mapper5 = /* @__PURE__ */ __name(({ state, api }) => {
     const {
       ui: { name, url, enableShortcuts },
       viewMode,
@@ -23914,7 +25384,7 @@ var Sidebar3 = react_default.memo(/* @__PURE__ */ __name(function Sideber({ onMe
       enableShortcuts
     };
   }, "mapper");
-  return react_default.createElement(Consumer, { filter: mapper3 }, (fromState) => {
+  return react_default.createElement(Consumer, { filter: mapper5 }, (fromState) => {
     const allStatuses = experimental_useStatusStore();
     return react_default.createElement(Sidebar, { ...fromState, allStatuses, onMenuClick });
   });
@@ -24145,7 +25615,11 @@ var shortcutLabels = {
   aboutPage: "Go to about page",
   collapseAll: "Collapse all items on sidebar",
   expandAll: "Expand all items on sidebar",
-  remount: "Remount component"
+  remount: "Remount component",
+  openInEditor: "Open story in editor",
+  copyStoryLink: "Copy story link to clipboard"
+  // TODO: bring this back once we want to add shortcuts for this
+  // copyStoryName: 'Copy story name to clipboard',
 };
 var fixedShortcuts = ["escape"];
 function toShortcutState(shortcutKeys) {
@@ -24168,11 +25642,14 @@ var _ShortcutsScreen = class _ShortcutsScreen extends Component {
       if (!shortcut) {
         return false;
       }
+      const normalizedShortcut = shortcut.map(
+        (key) => Array.isArray(key) ? key.at(-1) : key
+      );
       const error = !!Object.entries(shortcutKeys).find(
-        ([feature, { shortcut: existingShortcut }]) => feature !== activeFeature && existingShortcut && shortcutMatchesShortcut(shortcut, existingShortcut)
+        ([feature, { shortcut: existingShortcut }]) => feature !== activeFeature && existingShortcut && shortcutMatchesShortcut(normalizedShortcut, existingShortcut)
       );
       return this.setState({
-        shortcutKeys: { ...shortcutKeys, [activeFeature]: { shortcut, error } }
+        shortcutKeys: { ...shortcutKeys, [activeFeature]: { shortcut: normalizedShortcut, error } }
       });
     }, "onKeyDown");
     this.onFocus = /* @__PURE__ */ __name((focusedInput) => () => {