@storybook/react-native 7.0.0-alpha.5 → 7.0.0-alpha.6

package/dist/index.js

@@ -51,40 +51,33 @@ var require_dist = __commonJS({
     var src_exports2 = {};
     __export2(src_exports2, { Addon_TypesEnum: () => Addon_TypesEnum2 });
     module2.exports = __toCommonJS2(src_exports2);
-    var Addon_TypesEnum2 = ((Addon_TypesEnum22) => (Addon_TypesEnum22.TAB = "tab", Addon_TypesEnum22.PANEL = "panel", Addon_TypesEnum22.TOOL = "tool", Addon_TypesEnum22.TOOLEXTRA = "toolextra", Addon_TypesEnum22.PREVIEW = "preview", Addon_TypesEnum22.experimental_PAGE = "page", Addon_TypesEnum22.NOTES_ELEMENT = "notes-element", Addon_TypesEnum22))(Addon_TypesEnum2 || {});
+    var Addon_TypesEnum2 = ((Addon_TypesEnum22) => (Addon_TypesEnum22.TAB = "tab", Addon_TypesEnum22.PANEL = "panel", Addon_TypesEnum22.TOOL = "tool", Addon_TypesEnum22.TOOLEXTRA = "toolextra", Addon_TypesEnum22.PREVIEW = "preview", Addon_TypesEnum22.experimental_PAGE = "page", Addon_TypesEnum22.experimental_SIDEBAR_BOTTOM = "sidebar-bottom", Addon_TypesEnum22.experimental_SIDEBAR_TOP = "sidebar-top", Addon_TypesEnum22.NOTES_ELEMENT = "notes-element", Addon_TypesEnum22))(Addon_TypesEnum2 || {});
   }
 });
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  addArgTypesEnhancer: () => addArgTypesEnhancer,
-  addArgsEnhancer: () => addArgsEnhancer,
-  addDecorator: () => addDecorator,
-  addParameters: () => addParameters,
-  configure: () => configure,
   darkTheme: () => import_react_native_theming13.darkTheme,
-  getStorybookUI: () => getStorybookUI,
-  raw: () => raw,
-  storiesOf: () => storiesOf,
+  start: () => start,
   theme: () => import_react_native_theming13.theme
 });
 module.exports = __toCommonJS(src_exports);
+var import_react_native_theming13 = require("@storybook/react-native-theming");
 
-// src/preview/start.tsx
-var import_channels2 = require("@storybook/channels");
-var import_core_events3 = __toESM(require("@storybook/core-events"));
-var import_global2 = require("@storybook/global");
-var import_manager_api4 = require("@storybook/manager-api");
+// src/Start.tsx
+var import_csf2 = require("@storybook/csf");
 var import_preview_api = require("@storybook/preview-api");
-var import_preview_web = require("@storybook/preview-web");
+var import_manager_api3 = require("@storybook/manager-api");
+var import_preview_web = require("@storybook/preview-api/dist/preview-web");
+var import_channels = require("@storybook/channels");
 
-// src/preview/View.tsx
+// src/View.tsx
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
-var import_manager_api3 = require("@storybook/manager-api");
+var import_manager_api2 = require("@storybook/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
 // src/hooks.tsx
@@ -151,11 +144,9 @@ var createStore = () => {
   const atomStateMap = /* @__PURE__ */ new WeakMap();
   const mountedMap = /* @__PURE__ */ new WeakMap();
   const pendingMap = /* @__PURE__ */ new Map();
-  let storeListenersRev1;
   let storeListenersRev2;
   let mountedAtoms;
   if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
-    storeListenersRev1 = /* @__PURE__ */ new Set();
     storeListenersRev2 = /* @__PURE__ */ new Set();
     mountedAtoms = /* @__PURE__ */ new Set();
   }
@@ -293,19 +284,15 @@ var createStore = () => {
     setAtomState(atom2, nextAtomState);
     return nextAtomState;
   };
-  const readAtomState = (atom2) => {
+  const readAtomState = (atom2, force) => {
     const atomState = getAtomState(atom2);
-    if (atomState) {
-      atomState.d.forEach((_, a) => {
-        if (a !== atom2 && !mountedMap.has(a)) {
-          readAtomState(a);
-        }
-      });
-      if (Array.from(atomState.d).every(([a, s]) => {
-        const aState = getAtomState(a);
-        return a === atom2 || aState === s || // TODO This is a hack, we should find a better solution.
-        aState && !hasPromiseAtomValue(aState) && isEqualAtomValue(aState, s);
-      })) {
+    if (!force && atomState) {
+      if (mountedMap.has(atom2)) {
+        return atomState;
+      }
+      if (Array.from(atomState.d).every(
+        ([a, s]) => a === atom2 || readAtomState(a) === s
+      )) {
         return atomState;
       }
     }
@@ -413,7 +400,7 @@ var createStore = () => {
             let isChanged = !!((_a = dependencyMap.get(dependent)) == null ? void 0 : _a.size);
             if (isChanged) {
               const prevAtomState = getAtomState(dependent);
-              const nextAtomState = readAtomState(dependent);
+              const nextAtomState = readAtomState(dependent, true);
               isChanged = !prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState);
             }
             if (!isChanged) {
@@ -468,15 +455,8 @@ var createStore = () => {
     return result;
   };
   const mountAtom = (atom2, initialDependent) => {
-    const mounted = {
-      t: new Set(initialDependent && [initialDependent]),
-      l: /* @__PURE__ */ new Set()
-    };
-    mountedMap.set(atom2, mounted);
-    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
-      mountedAtoms.add(atom2);
-    }
-    readAtomState(atom2).d.forEach((_, a) => {
+    var _a;
+    (_a = getAtomState(atom2)) == null ? void 0 : _a.d.forEach((_, a) => {
       const aMounted = mountedMap.get(a);
       if (aMounted) {
         aMounted.t.add(atom2);
@@ -487,6 +467,14 @@ var createStore = () => {
       }
     });
     readAtomState(atom2);
+    const mounted = {
+      t: new Set(initialDependent && [initialDependent]),
+      l: /* @__PURE__ */ new Set()
+    };
+    mountedMap.set(atom2, mounted);
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      mountedAtoms.add(atom2);
+    }
     if (isActuallyWritableAtom(atom2) && atom2.onMount) {
       const onUnmount = atom2.onMount((...args) => writeAtom(atom2, ...args));
       if (onUnmount) {
@@ -578,7 +566,6 @@ var createStore = () => {
       });
     }
     if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
-      storeListenersRev1.forEach((l) => l("state"));
       return flushed;
     }
   };
@@ -588,7 +575,6 @@ var createStore = () => {
     const listeners = mounted.l;
     listeners.add(listener);
     if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
-      storeListenersRev1.forEach((l) => l("sub"));
       storeListenersRev2.forEach(
         (l) => l({ type: "sub", flushed })
       );
@@ -597,7 +583,6 @@ var createStore = () => {
       listeners.delete(listener);
       delAtom(atom2);
       if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
-        storeListenersRev1.forEach((l) => l("unsub"));
         storeListenersRev2.forEach((l) => l({ type: "unsub" }));
       }
     };
@@ -610,13 +595,7 @@ var createStore = () => {
       // store dev methods (these are tentative and subject to change without notice)
       dev_subscribe_store: (l, rev) => {
         if (rev !== 2) {
-          console.warn(
-            "The current StoreListener revision is 2. The older ones are deprecated."
-          );
-          storeListenersRev1.add(l);
-          return () => {
-            storeListenersRev1.delete(l);
-          };
+          throw new Error("The current StoreListener revision is 2.");
         }
         storeListenersRev2.add(l);
         return () => {
@@ -647,21 +626,24 @@ var createStore = () => {
   };
 };
 var defaultStore;
+if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+  if (typeof globalThis.__NUMBER_OF_JOTAI_INSTANCES__ === "number") {
+    ++globalThis.__NUMBER_OF_JOTAI_INSTANCES__;
+  } else {
+    globalThis.__NUMBER_OF_JOTAI_INSTANCES__ = 1;
+  }
+}
 var getDefaultStore = () => {
   if (!defaultStore) {
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && globalThis.__NUMBER_OF_JOTAI_INSTANCES__ !== 1) {
+      console.warn(
+        "Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044"
+      );
+    }
     defaultStore = createStore();
   }
   return defaultStore;
 };
-if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
-  if (globalThis.__JOTAI_PACKAGE_IS_LOADED__) {
-    console.warn(
-      "Detected multiple Jotai instances. It may cause unexpected behavior. https://github.com/pmndrs/jotai/discussions/2044"
-    );
-  } else {
-    globalThis.__JOTAI_PACKAGE_IS_LOADED__ = true;
-  }
-}
 
 // ../../node_modules/jotai/esm/react.mjs
 var import_react = __toESM(require("react"), 1);
@@ -827,22 +809,21 @@ function useSelectedAddon(initialValue) {
   return result;
 }
 
-// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
+// src/components/OnDeviceUI/OnDeviceUI.tsx
 var import_react_native_theming10 = require("@storybook/react-native-theming");
-var import_react14 = __toESM(require("react"));
-var import_react_native13 = require("react-native");
+var import_react15 = __toESM(require("react"));
+var import_react_native14 = require("react-native");
 
 // src/constants.ts
 var ANIMATION_DURATION_TRANSITION = 400;
 
-// src/preview/components/StoryListView/StoryListView.tsx
+// src/components/StoryListView/StoryListView.tsx
 var import_core_events = __toESM(require("@storybook/core-events"));
-var import_manager_api = require("@storybook/manager-api");
 var import_react_native_theming = require("@storybook/react-native-theming");
 var import_react3 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
 
-// src/preview/components/Shared/icons.tsx
+// src/components/Shared/icons.tsx
 var import_react_native = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
 var iconSources = {
@@ -901,7 +882,7 @@ function BackgroundIcon({ name, ...props }) {
   );
 }
 
-// src/preview/components/StoryListView/getNestedStories.ts
+// src/components/StoryListView/getNestedStories.ts
 function getNestedStories(storyIndex) {
   const stories = Object.values(storyIndex?.entries ?? {});
   const group = [];
@@ -975,7 +956,7 @@ var findFirstChildStory = (story) => {
   }
 };
 
-// src/preview/components/StoryListView/StoryListView.tsx
+// src/components/StoryListView/StoryListView.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
   fontSize: theme3.storyList.fontSize,
@@ -1190,8 +1171,7 @@ var StoryListView = ({ storyIndex }) => {
     setData(filterNestedStories(originalData, query));
   };
   const changeStory = (storyId) => {
-    const channel = import_manager_api.addons.getChannel();
-    channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+    global.__STORYBOOK_ADDONS_CHANNEL__.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
   };
   const renderItem = import_react3.default.useCallback(({ item }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
@@ -1226,13 +1206,38 @@ var StoryListView = ({ storyIndex }) => {
 };
 var StoryListView_default = import_react3.default.memo(StoryListView);
 
-// src/preview/components/StoryView/StoryView.tsx
-var import_react4 = __toESM(require("react"));
+// src/components/StoryView/StoryView.tsx
+var import_react5 = __toESM(require("react"));
 var import_react_native_theming2 = require("@storybook/react-native-theming");
+var import_react_native4 = require("react-native");
+
+// src/components/StoryView/ErrorBoundary.tsx
+var import_react4 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react4.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.warn(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Something went wrong rendering your story" });
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/StoryView/StoryView.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function dismissOnStartResponder() {
-  import_react_native3.Keyboard.dismiss();
+  import_react_native4.Keyboard.dismiss();
   return false;
 }
 var StoryView = () => {
@@ -1241,25 +1246,25 @@ var StoryView = () => {
   const { backgroundColor } = (0, import_react_native_theming2.useTheme)();
   if (context && context.unboundStoryFn) {
     const { unboundStoryFn: StoryComponent } = context;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native3.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native4.View,
       {
         style: { flex: 1, backgroundColor },
         testID: id,
         onStartShouldSetResponder: dismissOnStartResponder,
-        children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryComponent, { ...context })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StoryComponent, { ...context }) })
       },
       id
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { flex: 1, padding: 16, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Please open the sidebar and select a story to preview." }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: { flex: 1, padding: 16, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { children: "Please open the sidebar and select a story to preview." }) });
 };
-var StoryView_default = import_react4.default.memo(StoryView);
+var StoryView_default = import_react5.default.memo(StoryView);
 
-// src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
-var import_react5 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+// src/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
+var import_react6 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var AbsolutePositionedKeyboardAwareView = ({
   onLayout,
   previewDimensions: { width, height },
@@ -1274,31 +1279,31 @@ var AbsolutePositionedKeyboardAwareView = ({
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles2.container, onLayout: onLayoutHandler, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_react_native4.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: styles2.container, onLayout: onLayoutHandler, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_native5.View,
     {
       style: width === 0 ? styles2.container : [styles2.absolute, { position: "absolute", width, height }],
       children
     }
   ) });
 };
-var styles2 = import_react_native4.StyleSheet.create({
+var styles2 = import_react_native5.StyleSheet.create({
   absolute: { position: "absolute" },
   container: { flex: 1 }
 });
-var absolute_positioned_keyboard_aware_view_default = import_react5.default.memo(AbsolutePositionedKeyboardAwareView);
+var absolute_positioned_keyboard_aware_view_default = import_react6.default.memo(AbsolutePositionedKeyboardAwareView);
 
-// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
+// src/components/OnDeviceUI/OnDeviceUI.tsx
 var import_react_native_theming11 = require("@storybook/react-native-theming");
-var import_react_native14 = require("react-native");
+var import_react_native15 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
-// src/preview/components/OnDeviceUI/Panel.tsx
-var import_react6 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+// src/components/OnDeviceUI/Panel.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_native6 = require("react-native");
 var import_react_native_theming3 = require("@storybook/react-native-theming");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Container = (0, import_react_native_theming3.styled)(import_react_native5.Animated.View)(({ theme: theme3, edge }) => ({
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Container = (0, import_react_native_theming3.styled)(import_react_native6.Animated.View)(({ theme: theme3, edge }) => ({
   backgroundColor: theme3.panel.backgroundColor,
   borderTopWidth: edge === "top" ? theme3.panel.borderWidth : void 0,
   borderStartWidth: edge === "left" ? theme3.panel.borderWidth : void 0,
@@ -1306,30 +1311,30 @@ var Container = (0, import_react_native_theming3.styled)(import_react_native5.An
   borderColor: theme3.panel.borderColor
 }));
 var Panel = ({ edge, children, style }) => {
-  const containerStyle = import_react_native5.StyleSheet.flatten([
-    edge === "top" ? void 0 : import_react_native5.StyleSheet.absoluteFillObject,
+  const containerStyle = import_react_native6.StyleSheet.flatten([
+    edge === "top" ? void 0 : import_react_native6.StyleSheet.absoluteFillObject,
     style
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { edge, style: containerStyle, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { edge, style: containerStyle, children });
 };
-var Panel_default = import_react6.default.memo(Panel);
+var Panel_default = import_react7.default.memo(Panel);
 
-// src/preview/components/OnDeviceUI/addons/Addons.tsx
-var import_manager_api2 = require("@storybook/manager-api");
+// src/components/OnDeviceUI/addons/Addons.tsx
+var import_manager_api = require("@storybook/manager-api");
 var import_react_native_theming7 = require("@storybook/react-native-theming");
 var import_types = __toESM(require_dist());
-var import_react10 = __toESM(require("react"));
-var import_react_native8 = require("react-native");
+var import_react11 = __toESM(require("react"));
+var import_react_native9 = require("react-native");
 
-// src/preview/components/OnDeviceUI/addons/List.tsx
-var import_react8 = __toESM(require("react"));
+// src/components/OnDeviceUI/addons/List.tsx
+var import_react9 = __toESM(require("react"));
 
-// src/preview/components/Shared/tabs.tsx
-var import_react7 = __toESM(require("react"));
-var import_react_native6 = require("react-native");
+// src/components/Shared/tabs.tsx
+var import_react8 = __toESM(require("react"));
+var import_react_native7 = require("react-native");
 var import_react_native_theming4 = require("@storybook/react-native-theming");
 var import_react_native_theming5 = require("@storybook/react-native-theming");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var TabButtonText = import_react_native_theming4.styled.Text(({ theme: theme3, active }) => ({
   color: active ? theme3.tabs.activeTextColor : theme3.tabs.inactiveTextColor,
   paddingVertical: theme3.tabs.paddingVertical,
@@ -1344,8 +1349,8 @@ var TabButtonTouchable = import_react_native_theming4.styled.TouchableOpacity(({
   borderRadius: theme3.tabs.borderRadius,
   backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tabs.inactiveBackgroundColor
 }));
-var TabButton = import_react7.default.memo(({ onPress, id, active, children, testID }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TabButton = import_react8.default.memo(({ onPress, id, active, children, testID }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     TabButtonTouchable,
     {
       active,
@@ -1353,15 +1358,15 @@ var TabButton = import_react7.default.memo(({ onPress, id, active, children, tes
       onPress: () => onPress(id),
       activeOpacity: 0.8,
       hitSlop,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TabButtonText, { active, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabButtonText, { active, children })
     }
   );
 });
-var TabBar = import_react7.default.memo(({ scrollable = false, style, children }) => {
+var TabBar = import_react8.default.memo(({ scrollable = false, style, children }) => {
   const theme3 = (0, import_react_native_theming5.useTheme)();
   if (scrollable) {
-    children = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native6.ScrollView,
+    children = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native7.ScrollView,
       {
         showsHorizontalScrollIndicator: false,
         horizontal: true,
@@ -1370,7 +1375,7 @@ var TabBar = import_react7.default.memo(({ scrollable = false, style, children }
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TabBarContainer, { children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabBarContainer, { children }) });
 });
 var TabBarContainer = import_react_native_theming4.styled.View(() => ({
   flexDirection: "row",
@@ -1378,15 +1383,15 @@ var TabBarContainer = import_react_native_theming4.styled.View(() => ({
   justifyItems: "center"
 }));
 
-// src/preview/components/OnDeviceUI/addons/List.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+// src/components/OnDeviceUI/addons/List.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var AddonList = ({ panels, addonSelected, onPressAddon }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabBar, { scrollable: true, children: Object.values(panels).map(({ id, title }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TabBar, { scrollable: true, children: Object.values(panels).map(({ id, title }) => {
     let resolvedTitle = typeof title === "function" ? title({}) : title;
     if (typeof resolvedTitle === "string") {
       resolvedTitle = resolvedTitle.toUpperCase();
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       TabButton,
       {
         active: id === addonSelected,
@@ -1398,13 +1403,13 @@ var AddonList = ({ panels, addonSelected, onPressAddon }) => {
     );
   }) });
 };
-var List_default = import_react8.default.memo(AddonList);
+var List_default = import_react9.default.memo(AddonList);
 
-// src/preview/components/OnDeviceUI/addons/Wrapper.tsx
+// src/components/OnDeviceUI/addons/Wrapper.tsx
 var import_react_native_theming6 = require("@storybook/react-native-theming");
-var import_react9 = __toESM(require("react"));
-var import_react_native7 = require("react-native");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react10 = __toESM(require("react"));
+var import_react_native8 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Container2 = import_react_native_theming6.styled.View(({ selected }) => ({
   display: selected ? "flex" : "none",
   flex: 1
@@ -1415,30 +1420,30 @@ var Wrapper = ({ panels, addonSelected }) => {
   const addonKeys = Object.keys(panels);
   const content = addonKeys.map((id) => {
     const selected = addonSelected === id;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Container2, { selected, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.ScrollView, { contentContainerStyle: { padding: theme3.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container2, { selected, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.ScrollView, { contentContainerStyle: { padding: theme3.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: content });
 };
-var Wrapper_default = import_react9.default.memo(Wrapper);
+var Wrapper_default = import_react10.default.memo(Wrapper);
 
-// src/preview/components/OnDeviceUI/addons/Addons.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Text3 = import_react_native_theming7.styled.Text(({ theme: theme3 }) => ({
+// src/components/OnDeviceUI/addons/Addons.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Text4 = import_react_native_theming7.styled.Text(({ theme: theme3 }) => ({
   marginTop: theme3.tokens.spacing4
 }));
 var Addons = ({ active }) => {
-  const panels = import_manager_api2.addons.getElements(import_types.Addon_TypesEnum.PANEL);
+  const panels = import_manager_api.addons.getElements(import_types.Addon_TypesEnum.PANEL);
   const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
   const context = useStoryContext();
   const id = context?.id;
   if (!id) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text3, { children: "No Story Selected" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text4, { children: "No Story Selected" }) });
   }
   if (Object.keys(panels).length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text3, { children: "No addons loaded." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text4, { children: "No addons loaded." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       List_default,
       {
         onPressAddon: setAddonSelected,
@@ -1446,29 +1451,29 @@ var Addons = ({ active }) => {
         addonSelected: active ? addonSelected : null
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper_default, { addonSelected: active ? addonSelected : null, panels })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Wrapper_default, { addonSelected: active ? addonSelected : null, panels })
   ] });
 };
-var Addons_default = import_react10.default.memo(Addons);
+var Addons_default = import_react11.default.memo(Addons);
 
-// src/preview/components/OnDeviceUI/addons/AddonsSkeleton.tsx
-var import_react11 = __toESM(require("react"));
+// src/components/OnDeviceUI/addons/AddonsSkeleton.tsx
+var import_react12 = __toESM(require("react"));
 var import_react_native_theming8 = require("@storybook/react-native-theming");
-var import_react_native9 = require("react-native");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var AddonsSkeleton = import_react11.default.memo(function AddonsSkeleton2({ visible }) {
-  const progress = import_react11.default.useRef(new import_react_native9.Animated.Value(visible ? 1 : 0));
-  import_react11.default.useEffect(() => {
-    import_react_native9.Animated.timing(progress.current, {
+var import_react_native10 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var AddonsSkeleton = import_react12.default.memo(function AddonsSkeleton2({ visible }) {
+  const progress = import_react12.default.useRef(new import_react_native10.Animated.Value(visible ? 1 : 0));
+  import_react12.default.useEffect(() => {
+    import_react_native10.Animated.timing(progress.current, {
       toValue: visible ? 1 : 0,
       duration: ANIMATION_DURATION_TRANSITION,
       useNativeDriver: true,
-      easing: import_react_native9.Easing.inOut(import_react_native9.Easing.cubic)
+      easing: import_react_native10.Easing.inOut(import_react_native10.Easing.cubic)
     }).start();
   }, [visible]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(AddonsSkeletonContainer, { pointerEvents: "none", style: { opacity: progress.current }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabsSkeleton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsContentSkeleton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(AddonsSkeletonContainer, { pointerEvents: "none", style: { opacity: progress.current }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabsSkeleton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AddonsContentSkeleton, {})
   ] });
 });
 var TabSkeleton = import_react_native_theming8.styled.View(({ theme: theme3, active }) => ({
@@ -1489,29 +1494,29 @@ var BoxSkeleton = import_react_native_theming8.styled.View(
   })
 );
 function AddonsFieldSkeleton({ long = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: { marginBottom: 32 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BoxSkeleton, { width: long ? 200 : 120, height: 15 })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: { marginBottom: 32 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BoxSkeleton, { width: long ? 200 : 120, height: 15 })
   ] });
 }
 function AddonsContentSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, { long: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, { long: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AddonsFieldSkeleton, { long: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AddonsFieldSkeleton, { long: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AddonsFieldSkeleton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AddonsFieldSkeleton, {})
   ] });
 }
 function TabsSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: { flexDirection: "row", marginBottom: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabSkeleton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabSkeleton, { active: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabSkeleton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: { flexDirection: "row", marginBottom: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabSkeleton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabSkeleton, { active: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabSkeleton, {})
   ] });
 }
-var AddonsSkeletonContainer = (0, import_react_native_theming8.styled)(import_react_native9.Animated.View)(
+var AddonsSkeletonContainer = (0, import_react_native_theming8.styled)(import_react_native10.Animated.View)(
   ({ theme: theme3 }) => ({
-    ...import_react_native9.StyleSheet.absoluteFillObject,
+    ...import_react_native10.StyleSheet.absoluteFillObject,
     flex: 1,
     backgroundColor: theme3.panel.backgroundColor,
     borderTopWidth: theme3.panel.borderWidth,
@@ -1521,16 +1526,16 @@ var AddonsSkeletonContainer = (0, import_react_native_theming8.styled)(import_re
   })
 );
 
-// src/preview/components/OnDeviceUI/animation.ts
-var import_react_native10 = require("react-native");
+// src/components/OnDeviceUI/animation.ts
+var import_react_native11 = require("react-native");
 
-// src/preview/components/OnDeviceUI/navigation/constants.ts
+// src/components/OnDeviceUI/navigation/constants.ts
 var SIDEBAR = -1;
 var CANVAS = 0;
 var ADDONS = 1;
 
-// src/preview/components/OnDeviceUI/animation.ts
-var RTL_SCALE = import_react_native10.I18nManager.isRTL ? -1 : 1;
+// src/components/OnDeviceUI/animation.ts
+var RTL_SCALE = import_react_native11.I18nManager.isRTL ? -1 : 1;
 var PREVIEW_SCALE = 0.3;
 var PREVIEW_SCALE_WIDE = 0.7;
 var PREVIEW_SCALE_SHRINK = 0.9;
@@ -1624,24 +1629,24 @@ var getPreviewShadowStyle = (animatedValue) => ({
   overflow: "visible"
 });
 
-// src/preview/components/OnDeviceUI/navigation/Navigation.tsx
-var import_react13 = __toESM(require("react"));
-var import_react_native12 = require("react-native");
+// src/components/OnDeviceUI/navigation/Navigation.tsx
+var import_react14 = __toESM(require("react"));
+var import_react_native13 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_react_native_swipe_gestures = __toESM(require("react-native-swipe-gestures"));
 
-// src/preview/components/OnDeviceUI/navigation/NavigationBar.tsx
-var import_react12 = __toESM(require("react"));
+// src/components/OnDeviceUI/navigation/NavigationBar.tsx
+var import_react13 = __toESM(require("react"));
 var import_react_native_theming9 = require("@storybook/react-native-theming");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var NavigationTabBar = (0, import_react_native_theming9.styled)(TabBar)(({ theme: theme3 }) => ({
   paddingHorizontal: theme3.tokens.spacing2,
   backgroundColor: theme3.navigation.backgroundColor,
   borderColor: theme3.navigation.borderColor,
   borderTopWidth: theme3.navigation.borderWidth
 }));
-var NavigationBar = import_react12.default.memo(({ index, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(NavigationTabBar, { style, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var NavigationBar = import_react13.default.memo(({ index, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(NavigationTabBar, { style, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     TabButton,
     {
       onPress,
@@ -1651,20 +1656,20 @@ var NavigationBar = import_react12.default.memo(({ index, onPress, style }) => /
       children: "SIDEBAR"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabButton, { onPress, testID: "BottomMenu.Canvas", id: CANVAS, active: index === CANVAS, children: "CANVAS" }),
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabButton, { onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS, children: "ADDONS" })
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TabButton, { onPress, testID: "BottomMenu.Canvas", id: CANVAS, active: index === CANVAS, children: "CANVAS" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TabButton, { onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS, children: "ADDONS" })
 ] }));
 
-// src/preview/components/OnDeviceUI/navigation/NavigationButton.tsx
-var import_react_native11 = require("react-native");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+// src/components/OnDeviceUI/navigation/NavigationButton.tsx
+var import_react_native12 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var hitSlop2 = { top: 5, left: 5, right: 5, bottom: 5 };
 function NavigationButton({ iconName, inverseIconName, active, toggle }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: { marginHorizontal: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BackgroundIcon, { style: { flex: 1, opacity: 0.8 }, name: inverseIconName, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: iconName, style: { opacity: active ? 0.6 : 0.25 } }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: { marginHorizontal: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BackgroundIcon, { style: { flex: 1, opacity: 0.8 }, name: inverseIconName, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: iconName, style: { opacity: active ? 0.6 : 0.25 } }) }) }) });
 }
 function VisibilityButton() {
   const [active, toggle] = useIsUIVisible();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     NavigationButton,
     {
       iconName: "layout-bottom",
@@ -1676,7 +1681,7 @@ function VisibilityButton() {
 }
 function AddonsSplitButton() {
   const [active, toggle] = useIsSplitPanelVisible();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     NavigationButton,
     {
       iconName: "layout-split",
@@ -1687,8 +1692,8 @@ function AddonsSplitButton() {
   );
 }
 
-// src/preview/components/OnDeviceUI/navigation/Navigation.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+// src/components/OnDeviceUI/navigation/Navigation.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SWIPE_CONFIG = {
   velocityThreshold: 0.2,
   directionalOffsetThreshold: 80
@@ -1712,14 +1717,14 @@ var Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
     }
   };
   const [isUIVisible] = useIsUIVisible();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native12.View, { style: navStyle, onLayout, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { children: isUIVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native13.View, { style: navStyle, onLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { children: isUIVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react_native_swipe_gestures.default,
       {
         onSwipeLeft: handleSwipeLeft,
         onSwipeRight: handleSwipeRight,
         config: SWIPE_CONFIG,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           NavigationBar,
           {
             index: tabOpen,
@@ -1729,17 +1734,17 @@ var Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(NavigationShortcuts, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VisibilityButton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsSplitButton, {})
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(NavigationShortcuts, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VisibilityButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsSplitButton, {})
     ] })
   ] });
 };
-var Navigation_default = import_react13.default.memo(Navigation);
+var Navigation_default = import_react14.default.memo(Navigation);
 function NavigationShortcuts({ children }) {
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native12.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_native13.View,
     {
       style: {
         zIndex: 100,
@@ -1756,12 +1761,12 @@ function NavigationShortcuts({ children }) {
   );
 }
 
-// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var IS_IOS = import_react_native13.Platform.OS === "ios";
+// src/components/OnDeviceUI/OnDeviceUI.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var IS_IOS = import_react_native14.Platform.OS === "ios";
 var getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
 var IS_EXPO = getExpoRoot() !== void 0;
-var IS_ANDROID = import_react_native13.Platform.OS === "android";
+var IS_ANDROID = import_react_native14.Platform.OS === "android";
 var BREAKPOINT = 1024;
 var flex = { flex: 1 };
 function Preview({ animatedValue, style, children }) {
@@ -1770,16 +1775,16 @@ function Preview({ animatedValue, style, children }) {
     backgroundColor: theme3.preview.backgroundColor,
     ...getPreviewShadowStyle(animatedValue)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Animated.View, { style: [flex, containerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [flex, style], children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.Animated.View, { style: [flex, containerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.View, { style: [flex, style], children }) });
 }
-var styles3 = import_react_native13.StyleSheet.create({
-  expoAndroidContainer: { paddingTop: import_react_native13.StatusBar.currentHeight }
+var styles3 = import_react_native14.StyleSheet.create({
+  expoAndroidContainer: { paddingTop: import_react_native14.StatusBar.currentHeight }
 });
 var Container3 = import_react_native_theming10.styled.View(({ theme: theme3 }) => ({
   flex: 1,
   backgroundColor: theme3.preview.containerBackgroundColor,
   ...IS_ANDROID && IS_EXPO ? styles3.expoAndroidContainer : void 0,
-  ...import_react_native13.Platform.select({ web: { overflow: "hidden" } })
+  ...import_react_native14.Platform.select({ web: { overflow: "hidden" } })
 }));
 var OnDeviceUI = ({
   storyIndex,
@@ -1787,30 +1792,30 @@ var OnDeviceUI = ({
   keyboardAvoidingViewVerticalOffset,
   tabOpen: initialTabOpen
 }) => {
-  const [tabOpen, setTabOpen] = (0, import_react14.useState)(initialTabOpen || CANVAS);
-  const lastTabOpen = import_react14.default.useRef(tabOpen);
-  const [previewDimensions, setPreviewDimensions] = (0, import_react14.useState)(() => ({
-    width: import_react_native13.Dimensions.get("window").width,
-    height: import_react_native13.Dimensions.get("window").height
+  const [tabOpen, setTabOpen] = (0, import_react15.useState)(initialTabOpen || CANVAS);
+  const lastTabOpen = import_react15.default.useRef(tabOpen);
+  const [previewDimensions, setPreviewDimensions] = (0, import_react15.useState)(() => ({
+    width: import_react_native14.Dimensions.get("window").width,
+    height: import_react_native14.Dimensions.get("window").height
   }));
-  const animatedValue = (0, import_react14.useRef)(new import_react_native13.Animated.Value(tabOpen));
-  const wide = (0, import_react_native14.useWindowDimensions)().width >= BREAKPOINT;
+  const animatedValue = (0, import_react15.useRef)(new import_react_native14.Animated.Value(tabOpen));
+  const wide = (0, import_react_native15.useWindowDimensions)().width >= BREAKPOINT;
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const handleToggleTab = import_react14.default.useCallback(
+  const handleToggleTab = import_react15.default.useCallback(
     (newTabOpen) => {
       if (newTabOpen === tabOpen) {
         return;
       }
       lastTabOpen.current = tabOpen;
-      import_react_native13.Animated.timing(animatedValue.current, {
+      import_react_native14.Animated.timing(animatedValue.current, {
         toValue: newTabOpen,
         duration: ANIMATION_DURATION_TRANSITION,
-        easing: import_react_native13.Easing.inOut(import_react_native13.Easing.cubic),
+        easing: import_react_native14.Easing.inOut(import_react_native14.Easing.cubic),
         useNativeDriver: true
       }).start();
       setTabOpen(newTabOpen);
       if (newTabOpen === CANVAS) {
-        import_react_native13.Keyboard.dismiss();
+        import_react_native14.Keyboard.dismiss();
       }
     },
     [tabOpen]
@@ -1828,8 +1833,8 @@ var OnDeviceUI = ({
     })
   ];
   const [isUIVisible] = useIsUIVisible();
-  const [navBarHeight, setNavBarHeight] = import_react14.default.useState(insets.bottom + 40);
-  const measureNavigation = import_react14.default.useCallback(
+  const [navBarHeight, setNavBarHeight] = import_react15.default.useState(insets.bottom + 40);
+  const measureNavigation = import_react15.default.useCallback(
     ({ nativeEvent }) => {
       const inset = insets.bottom;
       setNavBarHeight(isUIVisible ? nativeEvent.layout.height - inset : 0);
@@ -1848,37 +1853,37 @@ var OnDeviceUI = ({
   const keyboardVerticalOffset = -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset ?? 0);
   const [isSplitPanelVisible] = useIsSplitPanelVisible();
   const isPreviewInactive = tabOpen !== CANVAS;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Container3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react_native13.KeyboardAvoidingView,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Container3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native14.KeyboardAvoidingView,
       {
         enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive,
         behavior: IS_IOS ? "padding" : null,
         keyboardVerticalOffset,
         style: flex,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           absolute_positioned_keyboard_aware_view_default,
           {
             onLayout: setPreviewDimensions,
             previewDimensions,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native13.Animated.View, { style: previewWrapperStyles, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StoryView_default, {}),
-                  isSplitPanelVisible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Panel_default, { edge: "top", style: { flex: 1 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Addons_default, { active: true }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsSkeleton, { visible: isPreviewInactive })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native14.Animated.View, { style: previewWrapperStyles, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StoryView_default, {}),
+                  isSplitPanelVisible ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Panel_default, { edge: "top", style: { flex: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Addons_default, { active: true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AddonsSkeleton, { visible: isPreviewInactive })
                   ] }) : null
                 ] }),
-                isPreviewInactive ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_react_native13.TouchableOpacity,
+                isPreviewInactive ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  import_react_native14.TouchableOpacity,
                   {
-                    style: import_react_native13.StyleSheet.absoluteFillObject,
+                    style: import_react_native14.StyleSheet.absoluteFillObject,
                     onPress: () => handleToggleTab(CANVAS)
                   }
                 ) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Panel_default,
                 {
                   edge: "right",
@@ -1886,10 +1891,10 @@ var OnDeviceUI = ({
                     getSidebarPanelPosition(animatedValue.current, previewDimensions.width, wide),
                     panelSafeAreaMargins
                   ],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StoryListView_default, { storyIndex })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StoryListView_default, { storyIndex })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Panel_default,
                 {
                   edge: "left",
@@ -1897,7 +1902,7 @@ var OnDeviceUI = ({
                     getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
                     panelSafeAreaMargins
                   ],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Addons_default, { active: tabOpen === ADDONS })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Addons_default, { active: tabOpen === ADDONS })
                 }
               )
             ]
@@ -1905,65 +1910,15 @@ var OnDeviceUI = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Navigation_default, { onLayout: measureNavigation, tabOpen, onChangeTab: handleToggleTab })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Navigation_default, { onLayout: measureNavigation, tabOpen, onChangeTab: handleToggleTab })
   ] }) });
 };
-var OnDeviceUI_default = import_react14.default.memo(OnDeviceUI);
+var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 
-// src/preview/View.tsx
-var import_channels = require("@storybook/channels");
-var import_core_events2 = __toESM(require("@storybook/core-events"));
-var import_global = require("@storybook/global");
+// src/View.tsx
 var import_deepmerge = __toESM(require("deepmerge"));
-var import_react_native15 = require("react-native");
-
-// src/preview/rn-host-detect.js
-function getByRemoteConfig(hostname) {
-  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
-  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
-    return { hostname, passed: false };
-  }
-  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
-  if (constants) {
-    var serverHost = constants.ServerHost || hostname;
-    return { hostname: serverHost.split(":")[0], passed: true };
-  }
-  return { hostname, passed: false };
-}
-function getConstants(config) {
-  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
-}
-function getByRNRequirePolyfill(hostname) {
-  var NativeModules;
-  var PlatformConstants;
-  var AndroidConstants;
-  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
-  // TODO: Get NativeModules for RN >= 0.56
-  window.require.name === "metroRequire") {
-    return hostname;
-  }
-  NativeModules = window.require("NativeModules");
-  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
-    return hostname;
-  }
-  PlatformConstants = NativeModules.PlatformConstants;
-  AndroidConstants = NativeModules.AndroidConstants;
-  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
-  return serverHost.split(":")[0];
-}
-function getHost(hostname) {
-  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
-    return hostname;
-  }
-  var result = getByRemoteConfig(hostname);
-  if (result.passed) {
-    return result.hostname;
-  }
-  return getByRNRequirePolyfill(hostname);
-}
-
-// src/preview/View.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react_native16 = require("react-native");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
 var View10 = class {
   _storyIndex;
@@ -1974,8 +1929,10 @@ var View10 = class {
   _preview;
   _asyncStorageStoryId;
   _webUrl;
-  constructor(preview) {
+  _channel;
+  constructor(preview, channel) {
     this._preview = preview;
+    this._channel = channel;
   }
   _getInitialStory = async ({
     initialSelection,
@@ -2005,38 +1962,35 @@ var View10 = class {
     }
     return { storySpecifier: "*", viewMode: "story" };
   };
-  _getServerChannel = (params = {}) => {
-    const host = getHost(params.host || "localhost");
-    const port = `:${params.port || 7007}`;
-    const query = params.query || "";
-    const websocketType = params.secured ? "wss" : "ws";
-    const url = `${websocketType}://${host}${port}/${query}`;
-    return (0, import_channels.createWebSocketChannel)({
-      url,
-      async: true,
-      onError: async () => {
-      }
-    });
-  };
+  // _getServerChannel = (params: Partial<Params> = {}) => {
+  //   const host = getHost(params.host || 'localhost');
+  //   const port = `:${params.port || 7007}`;
+  //   const query = params.query || '';
+  //   const websocketType = params.secured ? 'wss' : 'ws';
+  //   const url = `${websocketType}://${host}${port}/${query}`;
+  //   return createWebSocketChannel({
+  //     url,
+  //     async: true,
+  //     onError: async () => {},
+  //   });
+  // };
   getStorybookUI = (params = {}) => {
-    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
+    const {
+      shouldPersistSelection = true,
+      onDeviceUI = true
+      /* enableWebsockets = false  */
+    } = params;
     const initialStory = this._getInitialStory(params);
-    if (enableWebsockets) {
-      const channel = this._getServerChannel(params);
-      import_manager_api3.addons.setChannel(channel);
-      this._preview.channel = channel;
-      this._preview.setupListeners();
-      channel.emit(import_core_events2.default.CHANNEL_CREATED);
-      this._preview.initializeWithStoryIndex(this._storyIndex);
-    }
-    import_manager_api3.addons.loadAddons({
+    import_manager_api2.addons.loadAddons({
       store: () => ({
         fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
         getSelection: () => {
           return this._preview.currentSelection;
         },
         // @ts-ignore :) FIXME
-        _channel: this._preview.channel
+        // _channel: this._preview.channel,
+        // global.__STORYBOOK_ADDONS_CHANNEL__,
+        _channel: this._channel
       })
     });
     const self = this;
@@ -2046,13 +2000,13 @@ var View10 = class {
     });
     return () => {
       const setContext = useSetStoryContext();
-      const colorScheme = (0, import_react_native15.useColorScheme)();
-      const [, forceUpdate] = (0, import_react15.useReducer)((x) => x + 1, 0);
-      const appliedTheme = (0, import_react15.useMemo)(
+      const colorScheme = (0, import_react_native16.useColorScheme)();
+      const [, forceUpdate] = (0, import_react16.useReducer)((x) => x + 1, 0);
+      const appliedTheme = (0, import_react16.useMemo)(
         () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming12.darkTheme : import_react_native_theming12.theme, params.theme ?? {}),
         [colorScheme]
       );
-      (0, import_react15.useEffect)(() => {
+      (0, import_react16.useEffect)(() => {
         self._setStory = (newStory) => {
           setContext(newStory);
           if (shouldPersistSelection) {
@@ -2066,20 +2020,9 @@ var View10 = class {
           self._preview.selectionStore.selectionSpecifier = story;
           self._preview.selectSpecifiedStory();
         });
-        import_global.global.__STORYBOOK_ADDONS_CHANNEL__.on(import_core_events2.default.SET_CURRENT_STORY, async ({ storyId }) => {
-          self._preview.selectionStore.selectionSpecifier = {
-            storySpecifier: storyId,
-            viewMode: "story"
-          };
-          this._preview.selectionStore.selection = {
-            storyId,
-            viewMode: "story"
-          };
-          await self._preview.selectSpecifiedStory();
-        });
       }, []);
       if (onDeviceUI) {
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_theming12.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_theming12.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           OnDeviceUI_default,
           {
             storyIndex: self._storyIndex,
@@ -2089,94 +2032,94 @@ var View10 = class {
           }
         ) }) });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StoryView_default, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StoryView_default, {});
       }
     };
   };
 };
 
-// src/preview/executeLoadable.ts
-var import_client_logger = require("@storybook/client-logger");
-function executeLoadable(loadable) {
-  let reqs = null;
-  if (Array.isArray(loadable)) {
-    reqs = loadable;
-  } else if (loadable.keys) {
-    reqs = [loadable];
-  }
-  let exportsMap = /* @__PURE__ */ new Map();
-  if (reqs) {
-    reqs.forEach((req) => {
-      req.keys().forEach((filename) => {
-        try {
-          const fileExports = req(filename);
-          if (fileExports.default) {
-            exportsMap.set(
-              // NOTE context.resolve is not yet implemented for metro
-              // typeof req.resolve === 'function' ? req.resolve(filename) : filename,
-              filename,
-              fileExports
-            );
+// src/Start.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function prepareStories({
+  storyEntries
+}) {
+  let index = {
+    v: 4,
+    entries: {}
+  };
+  let importMap = {};
+  const makeTitle = (fileName, userTitle) => {
+    const title = (0, import_preview_api.userOrAutoTitle)(fileName, storyEntries, userTitle);
+    if (title) {
+      return title.replace("./", "");
+    } else {
+      console.log({
+        fileName,
+        userTitle,
+        storyEntries: storyEntries.map((entry) => {
+          return { ...entry, importPathMatcher: entry.importPathMatcher.source };
+        }),
+        title: title ?? ""
+      });
+      throw new Error("Could not generate title");
+    }
+  };
+  storyEntries.forEach(({ req, directory: root }) => {
+    req.keys().forEach((filename) => {
+      try {
+        const fileExports = req(filename);
+        if (!fileExports.default)
+          return;
+        const meta = fileExports.default;
+        Object.keys(fileExports).forEach((key) => {
+          if (key === "default")
+            return;
+          const exportValue = fileExports[key];
+          if (!exportValue)
+            return;
+          const name = (0, import_csf2.storyNameFromExport)(key);
+          const title = makeTitle(filename, meta.title);
+          if (title) {
+            const id = (0, import_csf2.toId)(title, name);
+            index.entries[id] = {
+              type: "story",
+              id,
+              name,
+              title,
+              importPath: `${root}/${filename.substring(2)}`,
+              // FIXME: use normalize function here
+              tags: ["story"]
+            };
+            importMap[`${root}/${filename.substring(2)}`] = req(filename);
+          } else {
+            console.log(`Unexpected error while loading ${filename}: could not find title`);
           }
-        } catch (error) {
-          const errorString = error.message && error.stack ? `${error.message}
+        });
+      } catch (error) {
+        const errorString = error.message && error.stack ? `${error.message}
  ${error.stack}` : error.toString();
-          import_client_logger.logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
-        }
-      });
+        console.error(`Unexpected error while loading ${filename}: ${errorString}`);
+      }
     });
-  } else {
-    const exported = loadable();
-    if (typeof exported === "object") {
-      const csfExports = Object.entries(exported).filter(
-        ([_key, value]) => value.default != null
-      );
-      exportsMap = new Map(csfExports.map(([filePath, fileExports]) => [filePath, fileExports]));
-    }
-  }
-  return exportsMap;
-}
-global.lastExportsMap = /* @__PURE__ */ new Map();
-function executeLoadableForChanges(loadable, m) {
-  if (m?.hot?.accept) {
-    m.hot.accept();
-  }
-  const lastExportsMap = global.lastExportsMap;
-  const exportsMap = executeLoadable(loadable);
-  const added = /* @__PURE__ */ new Map();
-  Array.from(exportsMap.entries()).filter(([, fileExports]) => !!fileExports.default).filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports).forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
-  const removed = /* @__PURE__ */ new Map();
-  Array.from(lastExportsMap.keys()).filter((fileName) => !exportsMap.has(fileName)).forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
-  global.lastExportsMap = exportsMap;
-  return { added, removed };
+  });
+  return { index, importMap };
 }
-
-// src/preview/start.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-import_global2.global.FEATURES = {
-  storyStoreV7: false
-};
-var render = (args, context) => {
-  const { id, component: Component } = context;
-  if (!Component) {
-    throw new Error(
-      `Unable to render story ${id} as the component annotation is missing from the default export`
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component, { ...args });
-};
-function start() {
-  const channel = new import_channels2.Channel({ async: true });
-  import_manager_api4.addons.setChannel(channel);
-  channel.emit(import_core_events3.default.CHANNEL_CREATED);
-  const clientApi2 = new import_preview_api.ClientApi();
+function start({
+  annotations,
+  storyEntries
+}) {
+  const { index, importMap } = prepareStories({ storyEntries });
+  const channel = (0, import_channels.createBrowserChannel)({ page: "preview" });
+  import_manager_api3.addons.setChannel(channel);
+  import_preview_api.addons.setChannel(channel);
   const previewView = {
     prepareForStory: () => {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
     },
     prepareForDocs: () => {
     },
-    showErrorDisplay: () => {
+    showErrorDisplay: (e) => {
+      console.log(e);
     },
     showDocs: () => {
     },
@@ -2203,94 +2146,40 @@ function start() {
     }
   };
   const preview = new import_preview_web.PreviewWithSelection(urlStore, previewView);
-  clientApi2.storyStore = preview.storyStore;
-  if (import_global2.global) {
-    import_global2.global.__STORYBOOK_CLIENT_API__ = clientApi2;
-    import_global2.global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-    import_global2.global.__STORYBOOK_PREVIEW__ = preview;
-    import_global2.global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-  }
-  (0, import_preview_api.setGlobalRender)(render);
-  let initialized = false;
-  function onStoriesChanged() {
-    const storyIndex = clientApi2.getStoryIndex();
-    preview.onStoriesChanged({ storyIndex });
-    view2._storyIndex = storyIndex;
+  const view = new View10(preview, channel);
+  if (global) {
+    global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+    global.__STORYBOOK_PREVIEW__ = preview;
+    global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
   }
-  const view2 = new View10(preview);
-  return {
-    view: view2,
-    forceReRender: () => channel.emit(import_core_events3.default.FORCE_RE_RENDER),
-    clientApi: clientApi2,
-    preview,
-    // This gets called each time the user calls configure (i.e. once per HMR)
-    // The first time, it constructs thecurrentSelection preview, subsequently it updates it
-    configure(loadable, m) {
-      clientApi2.addParameters({ renderer: "react-native" });
-      const getProjectAnnotations = () => {
-        const { added, removed } = executeLoadableForChanges(loadable, m);
-        clientApi2._loadAddedExports();
-        Array.from(added.entries()).forEach(
-          ([fileName, fileExports]) => clientApi2.facade.addStoriesFromExports(fileName, fileExports)
-        );
-        Array.from(removed.entries()).forEach(
-          ([fileName]) => clientApi2.facade.clearFilenameExports(fileName)
-        );
-        return {
-          ...clientApi2.facade.projectAnnotations,
-          renderToCanvas: (context) => {
-            view2._setStory(context.storyContext);
-          }
-        };
-      };
-      const importFn = (path) => clientApi2.importFn(path);
-      if (!initialized) {
-        preview.initialize({
-          getStoryIndex: () => {
-            const index = clientApi2.getStoryIndex();
-            view2._storyIndex = index;
-            return index;
-          },
-          importFn,
-          getProjectAnnotations
-        });
-        initialized = true;
-      } else {
-        getProjectAnnotations();
-        onStoriesChanged();
+  const getProjectAnnotations = async () => (0, import_preview_api.composeConfigs)([
+    {
+      renderToCanvas: (context) => {
+        view._setStory(context.storyContext);
+      },
+      render: (args, context) => {
+        const { id, component: Component } = context;
+        if (!Component) {
+          throw new Error(
+            `Unable to render story ${id} as the component annotation is missing from the default export`
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, { ...args });
       }
-    }
-  };
-}
-
-// src/index.ts
-var import_react_native_theming13 = require("@storybook/react-native-theming");
-var { clientApi, configure, view } = start();
-var rawStoriesOf = clientApi.storiesOf.bind(clientApi);
-var addDecorator = clientApi.addDecorator.bind(clientApi);
-var addParameters = clientApi.addParameters.bind(clientApi);
-var addArgsEnhancer = clientApi.addArgsEnhancer.bind(clientApi);
-var addArgTypesEnhancer = clientApi.addArgTypesEnhancer.bind(clientApi);
-var raw = clientApi.raw.bind(clientApi);
-var storiesOf = (kind, m) => {
-  return rawStoriesOf(kind, m).addParameters({
-    renderer: "react-native"
+    },
+    ...annotations
+  ]);
+  preview.initialize({
+    importFn: async (importPath) => importMap[importPath],
+    getProjectAnnotations,
+    getStoryIndex: () => index
   });
-};
-var getStorybookUI = view.getStorybookUI;
-global.__STORYBOOK_STORY_STORE__ = {
-  initializationPromise: clientApi.storyStore?.initializationPromise
-};
+  view._storyIndex = index;
+  return view;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  addArgTypesEnhancer,
-  addArgsEnhancer,
-  addDecorator,
-  addParameters,
-  configure,
   darkTheme,
-  getStorybookUI,
-  raw,
-  storiesOf,
+  start,
   theme
 });