storybook 10.0.0-beta.5 → 10.0.0-beta.6

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;
 }
@@ -6936,6 +6937,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 +6998,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 +7277,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 +7493,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,
@@ -7828,8 +7709,23 @@ function filterTabs(panels, parameters) {
 }
 __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 menuMapper3 = /* @__PURE__ */ __name(({ api, state }) => ({
+var menuMapper2 = /* @__PURE__ */ __name(({ api, state }) => ({
   isVisible: api.getIsNavShown(),
   singleStory: state.singleStory,
   toggle: /* @__PURE__ */ __name(() => api.toggleNav(), "toggle")
@@ -7838,15 +7734,1559 @@ 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: 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")
+  // @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,
+  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 +9301,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 +9310,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 +9344,7 @@ var mapper2 = /* @__PURE__ */ __name(({
     viewMode,
     refs,
     storyId,
-    baseUrl: PREVIEW_URL3 || "iframe.html",
+    baseUrl: PREVIEW_URL2 || "iframe.html",
     queryParams: customQueryParams,
     tools,
     toolsExtra,
@@ -7922,7 +9362,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;
 
@@ -10365,6 +11805,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 +11878,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 +11940,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 +11961,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 +11977,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");
@@ -11988,8 +13472,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 +16772,7 @@ var FocusKey = styled.code(({ theme }) => ({
   margin: 5,
   marginTop: 6,
   height: 16,
+  fontFamily: theme.typography.fonts.base,
   lineHeight: "16px",
   textAlign: "center",
   fontSize: "11px",
@@ -17322,11 +18807,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 +18870,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 +19636,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 +20838,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 +21015,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");
 
@@ -23639,241 +25124,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 +25167,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 +25398,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 +25425,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) => () => {