@storybook/react-native 7.0.0-alpha.2 → 7.0.0-alpha.4

package/dist/index.js

@@ -4,6 +4,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -26,6 +29,32 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/@storybook/types/dist/index.js
+var require_dist = __commonJS({
+  "../../node_modules/@storybook/types/dist/index.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    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 || {});
+  }
+});
+
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
@@ -34,53 +63,712 @@ __export(src_exports, {
   addDecorator: () => addDecorator,
   addParameters: () => addParameters,
   configure: () => configure,
-  darkTheme: () => import_react_native_theming14.darkTheme,
+  darkTheme: () => import_react_native_theming13.darkTheme,
   getStorybookUI: () => getStorybookUI,
   raw: () => raw,
   storiesOf: () => storiesOf,
-  theme: () => import_react_native_theming14.theme
+  theme: () => import_react_native_theming13.theme
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/preview/start.tsx
-var import_addons4 = require("@storybook/addons");
-var import_channels2 = __toESM(require("@storybook/channels"));
+var import_channels2 = require("@storybook/channels");
 var import_core_events3 = __toESM(require("@storybook/core-events"));
-var import_global = require("@storybook/global");
+var import_global2 = require("@storybook/global");
+var import_manager_api4 = require("@storybook/manager-api");
 var import_preview_api = require("@storybook/preview-api");
 var import_preview_web = require("@storybook/preview-web");
 
 // src/preview/View.tsx
-var import_react14 = require("react");
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
-var import_addons3 = require("@storybook/addons");
+var import_manager_api3 = require("@storybook/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
+var import_react15 = require("react");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
 // src/hooks.tsx
-var import_react = __toESM(require("react"));
-var import_jotai = require("jotai");
-var storyContextAtom = (0, import_jotai.atom)(null);
+var import_react2 = __toESM(require("react"));
+
+// ../../node_modules/jotai/esm/vanilla.mjs
+var import_meta = {};
+var keyCount = 0;
+function atom(read, write) {
+  const key = `atom${++keyCount}`;
+  const config = {
+    toString: () => key
+  };
+  if (typeof read === "function") {
+    config.read = read;
+  } else {
+    config.init = read;
+    config.read = (get) => get(config);
+    config.write = (get, set, arg) => set(
+      config,
+      typeof arg === "function" ? arg(get(config)) : arg
+    );
+  }
+  if (write) {
+    config.write = write;
+  }
+  return config;
+}
+var hasInitialValue = (atom2) => "init" in atom2;
+var isActuallyWritableAtom = (atom2) => !!atom2.write;
+var cancelPromiseMap = /* @__PURE__ */ new WeakMap();
+var registerCancelPromise = (promise, cancel) => {
+  cancelPromiseMap.set(promise, cancel);
+  promise.catch(() => {
+  }).finally(() => cancelPromiseMap.delete(promise));
+};
+var cancelPromise = (promise, next) => {
+  const cancel = cancelPromiseMap.get(promise);
+  if (cancel) {
+    cancelPromiseMap.delete(promise);
+    cancel(next);
+  }
+};
+var resolvePromise = (promise, value) => {
+  promise.status = "fulfilled";
+  promise.value = value;
+};
+var rejectPromise = (promise, e) => {
+  promise.status = "rejected";
+  promise.reason = e;
+};
+var isPromiseLike = (x) => typeof (x == null ? void 0 : x.then) === "function";
+var isEqualAtomValue = (a, b) => "v" in a && "v" in b && Object.is(a.v, b.v);
+var isEqualAtomError = (a, b) => "e" in a && "e" in b && Object.is(a.e, b.e);
+var hasPromiseAtomValue = (a) => "v" in a && a.v instanceof Promise;
+var isEqualPromiseAtomValue = (a, b) => "v" in a && "v" in b && a.v.orig && a.v.orig === b.v.orig;
+var returnAtomValue = (atomState) => {
+  if ("e" in atomState) {
+    throw atomState.e;
+  }
+  return atomState.v;
+};
+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();
+  }
+  const getAtomState = (atom2) => atomStateMap.get(atom2);
+  const setAtomState = (atom2, atomState) => {
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      Object.freeze(atomState);
+    }
+    const prevAtomState = atomStateMap.get(atom2);
+    atomStateMap.set(atom2, atomState);
+    if (!pendingMap.has(atom2)) {
+      pendingMap.set(atom2, prevAtomState);
+    }
+    if (prevAtomState && hasPromiseAtomValue(prevAtomState)) {
+      const next = "v" in atomState ? atomState.v instanceof Promise ? atomState.v : Promise.resolve(atomState.v) : Promise.reject(atomState.e);
+      cancelPromise(prevAtomState.v, next);
+    }
+  };
+  const updateDependencies = (atom2, nextAtomState, nextDependencies) => {
+    const dependencies = /* @__PURE__ */ new Map();
+    let changed = false;
+    nextDependencies.forEach((aState, a) => {
+      if (!aState && a === atom2) {
+        aState = nextAtomState;
+      }
+      if (aState) {
+        dependencies.set(a, aState);
+        if (nextAtomState.d.get(a) !== aState) {
+          changed = true;
+        }
+      } else if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+        console.warn("[Bug] atom state not found");
+      }
+    });
+    if (changed || nextAtomState.d.size !== dependencies.size) {
+      nextAtomState.d = dependencies;
+    }
+  };
+  const setAtomValue = (atom2, value, nextDependencies) => {
+    const prevAtomState = getAtomState(atom2);
+    const nextAtomState = {
+      d: (prevAtomState == null ? void 0 : prevAtomState.d) || /* @__PURE__ */ new Map(),
+      v: value
+    };
+    if (nextDependencies) {
+      updateDependencies(atom2, nextAtomState, nextDependencies);
+    }
+    if (prevAtomState && isEqualAtomValue(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
+      return prevAtomState;
+    }
+    if (prevAtomState && hasPromiseAtomValue(prevAtomState) && hasPromiseAtomValue(nextAtomState) && isEqualPromiseAtomValue(prevAtomState, nextAtomState)) {
+      if (prevAtomState.d === nextAtomState.d) {
+        return prevAtomState;
+      } else {
+        nextAtomState.v = prevAtomState.v;
+      }
+    }
+    setAtomState(atom2, nextAtomState);
+    return nextAtomState;
+  };
+  const setAtomValueOrPromise = (atom2, valueOrPromise, nextDependencies, abortPromise) => {
+    if (isPromiseLike(valueOrPromise)) {
+      let continuePromise;
+      const promise = new Promise((resolve, reject) => {
+        let settled = false;
+        valueOrPromise.then(
+          (v) => {
+            if (!settled) {
+              settled = true;
+              const prevAtomState = getAtomState(atom2);
+              const nextAtomState = setAtomValue(
+                atom2,
+                promise,
+                nextDependencies
+              );
+              resolvePromise(promise, v);
+              resolve(v);
+              if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
+                mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
+              }
+            }
+          },
+          (e) => {
+            if (!settled) {
+              settled = true;
+              const prevAtomState = getAtomState(atom2);
+              const nextAtomState = setAtomValue(
+                atom2,
+                promise,
+                nextDependencies
+              );
+              rejectPromise(promise, e);
+              reject(e);
+              if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
+                mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
+              }
+            }
+          }
+        );
+        continuePromise = (next) => {
+          if (!settled) {
+            settled = true;
+            next.then(
+              (v) => resolvePromise(promise, v),
+              (e) => rejectPromise(promise, e)
+            );
+            resolve(next);
+          }
+        };
+      });
+      promise.orig = valueOrPromise;
+      promise.status = "pending";
+      registerCancelPromise(promise, (next) => {
+        if (next) {
+          continuePromise(next);
+        }
+        abortPromise == null ? void 0 : abortPromise();
+      });
+      return setAtomValue(atom2, promise, nextDependencies);
+    }
+    return setAtomValue(atom2, valueOrPromise, nextDependencies);
+  };
+  const setAtomError = (atom2, error, nextDependencies) => {
+    const prevAtomState = getAtomState(atom2);
+    const nextAtomState = {
+      d: (prevAtomState == null ? void 0 : prevAtomState.d) || /* @__PURE__ */ new Map(),
+      e: error
+    };
+    if (nextDependencies) {
+      updateDependencies(atom2, nextAtomState, nextDependencies);
+    }
+    if (prevAtomState && isEqualAtomError(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
+      return prevAtomState;
+    }
+    setAtomState(atom2, nextAtomState);
+    return nextAtomState;
+  };
+  const readAtomState = (atom2) => {
+    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);
+      })) {
+        return atomState;
+      }
+    }
+    const nextDependencies = /* @__PURE__ */ new Map();
+    let isSync = true;
+    const getter = (a) => {
+      if (a === atom2) {
+        const aState2 = getAtomState(a);
+        if (aState2) {
+          nextDependencies.set(a, aState2);
+          return returnAtomValue(aState2);
+        }
+        if (hasInitialValue(a)) {
+          nextDependencies.set(a, void 0);
+          return a.init;
+        }
+        throw new Error("no atom init");
+      }
+      const aState = readAtomState(a);
+      nextDependencies.set(a, aState);
+      return returnAtomValue(aState);
+    };
+    let controller;
+    let setSelf;
+    const options = {
+      get signal() {
+        if (!controller) {
+          controller = new AbortController();
+        }
+        return controller.signal;
+      },
+      get setSelf() {
+        if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && !isActuallyWritableAtom(atom2)) {
+          console.warn("setSelf function cannot be used with read-only atom");
+        }
+        if (!setSelf && isActuallyWritableAtom(atom2)) {
+          setSelf = (...args) => {
+            if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && isSync) {
+              console.warn("setSelf function cannot be called in sync");
+            }
+            if (!isSync) {
+              return writeAtom(atom2, ...args);
+            }
+          };
+        }
+        return setSelf;
+      }
+    };
+    try {
+      const valueOrPromise = atom2.read(getter, options);
+      return setAtomValueOrPromise(
+        atom2,
+        valueOrPromise,
+        nextDependencies,
+        () => controller == null ? void 0 : controller.abort()
+      );
+    } catch (error) {
+      return setAtomError(atom2, error, nextDependencies);
+    } finally {
+      isSync = false;
+    }
+  };
+  const readAtom = (atom2) => returnAtomValue(readAtomState(atom2));
+  const addAtom = (atom2) => {
+    let mounted = mountedMap.get(atom2);
+    if (!mounted) {
+      mounted = mountAtom(atom2);
+    }
+    return mounted;
+  };
+  const canUnmountAtom = (atom2, mounted) => !mounted.l.size && (!mounted.t.size || mounted.t.size === 1 && mounted.t.has(atom2));
+  const delAtom = (atom2) => {
+    const mounted = mountedMap.get(atom2);
+    if (mounted && canUnmountAtom(atom2, mounted)) {
+      unmountAtom(atom2);
+    }
+  };
+  const recomputeDependents = (atom2) => {
+    const dependencyMap = /* @__PURE__ */ new Map();
+    const dirtyMap = /* @__PURE__ */ new WeakMap();
+    const loop1 = (a) => {
+      const mounted = mountedMap.get(a);
+      mounted == null ? void 0 : mounted.t.forEach((dependent) => {
+        if (dependent !== a) {
+          dependencyMap.set(
+            dependent,
+            (dependencyMap.get(dependent) || /* @__PURE__ */ new Set()).add(a)
+          );
+          dirtyMap.set(dependent, (dirtyMap.get(dependent) || 0) + 1);
+          loop1(dependent);
+        }
+      });
+    };
+    loop1(atom2);
+    const loop2 = (a) => {
+      const mounted = mountedMap.get(a);
+      mounted == null ? void 0 : mounted.t.forEach((dependent) => {
+        var _a;
+        if (dependent !== a) {
+          let dirtyCount = dirtyMap.get(dependent);
+          if (dirtyCount) {
+            dirtyMap.set(dependent, --dirtyCount);
+          }
+          if (!dirtyCount) {
+            let isChanged = !!((_a = dependencyMap.get(dependent)) == null ? void 0 : _a.size);
+            if (isChanged) {
+              const prevAtomState = getAtomState(dependent);
+              const nextAtomState = readAtomState(dependent);
+              isChanged = !prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState);
+            }
+            if (!isChanged) {
+              dependencyMap.forEach((s) => s.delete(dependent));
+            }
+          }
+          loop2(dependent);
+        }
+      });
+    };
+    loop2(atom2);
+  };
+  const writeAtomState = (atom2, ...args) => {
+    let isSync = true;
+    const getter = (a) => returnAtomValue(readAtomState(a));
+    const setter = (a, ...args2) => {
+      let r;
+      if (a === atom2) {
+        if (!hasInitialValue(a)) {
+          throw new Error("atom not writable");
+        }
+        const prevAtomState = getAtomState(a);
+        const nextAtomState = setAtomValueOrPromise(a, args2[0]);
+        if (!prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState)) {
+          recomputeDependents(a);
+        }
+      } else {
+        r = writeAtomState(a, ...args2);
+      }
+      if (!isSync) {
+        const flushed = flushPending();
+        if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+          storeListenersRev2.forEach(
+            (l) => l({ type: "async-write", flushed })
+          );
+        }
+      }
+      return r;
+    };
+    const result = atom2.write(getter, setter, ...args);
+    isSync = false;
+    return result;
+  };
+  const writeAtom = (atom2, ...args) => {
+    const result = writeAtomState(atom2, ...args);
+    const flushed = flushPending();
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      storeListenersRev2.forEach(
+        (l) => l({ type: "write", flushed })
+      );
+    }
+    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) => {
+      const aMounted = mountedMap.get(a);
+      if (aMounted) {
+        aMounted.t.add(atom2);
+      } else {
+        if (a !== atom2) {
+          mountAtom(a, atom2);
+        }
+      }
+    });
+    readAtomState(atom2);
+    if (isActuallyWritableAtom(atom2) && atom2.onMount) {
+      const onUnmount = atom2.onMount((...args) => writeAtom(atom2, ...args));
+      if (onUnmount) {
+        mounted.u = onUnmount;
+      }
+    }
+    return mounted;
+  };
+  const unmountAtom = (atom2) => {
+    var _a;
+    const onUnmount = (_a = mountedMap.get(atom2)) == null ? void 0 : _a.u;
+    if (onUnmount) {
+      onUnmount();
+    }
+    mountedMap.delete(atom2);
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      mountedAtoms.delete(atom2);
+    }
+    const atomState = getAtomState(atom2);
+    if (atomState) {
+      if (hasPromiseAtomValue(atomState)) {
+        cancelPromise(atomState.v);
+      }
+      atomState.d.forEach((_, a) => {
+        if (a !== atom2) {
+          const mounted = mountedMap.get(a);
+          if (mounted) {
+            mounted.t.delete(atom2);
+            if (canUnmountAtom(a, mounted)) {
+              unmountAtom(a);
+            }
+          }
+        }
+      });
+    } else if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      console.warn("[Bug] could not find atom state to unmount", atom2);
+    }
+  };
+  const mountDependencies = (atom2, atomState, prevDependencies) => {
+    const depSet = new Set(atomState.d.keys());
+    prevDependencies == null ? void 0 : prevDependencies.forEach((_, a) => {
+      if (depSet.has(a)) {
+        depSet.delete(a);
+        return;
+      }
+      const mounted = mountedMap.get(a);
+      if (mounted) {
+        mounted.t.delete(atom2);
+        if (canUnmountAtom(a, mounted)) {
+          unmountAtom(a);
+        }
+      }
+    });
+    depSet.forEach((a) => {
+      const mounted = mountedMap.get(a);
+      if (mounted) {
+        mounted.t.add(atom2);
+      } else if (mountedMap.has(atom2)) {
+        mountAtom(a, atom2);
+      }
+    });
+  };
+  const flushPending = () => {
+    let flushed;
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      flushed = /* @__PURE__ */ new Set();
+    }
+    while (pendingMap.size) {
+      const pending = Array.from(pendingMap);
+      pendingMap.clear();
+      pending.forEach(([atom2, prevAtomState]) => {
+        const atomState = getAtomState(atom2);
+        if (atomState) {
+          if (atomState.d !== (prevAtomState == null ? void 0 : prevAtomState.d)) {
+            mountDependencies(atom2, atomState, prevAtomState == null ? void 0 : prevAtomState.d);
+          }
+          const mounted = mountedMap.get(atom2);
+          if (mounted && !// TODO This seems pretty hacky. Hope to fix it.
+          // Maybe we could `mountDependencies` in `setAtomState`?
+          (prevAtomState && !hasPromiseAtomValue(prevAtomState) && (isEqualAtomValue(prevAtomState, atomState) || isEqualAtomError(prevAtomState, atomState)))) {
+            mounted.l.forEach((listener) => listener());
+            if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+              flushed.add(atom2);
+            }
+          }
+        } else if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+          console.warn("[Bug] no atom state to flush");
+        }
+      });
+    }
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      storeListenersRev1.forEach((l) => l("state"));
+      return flushed;
+    }
+  };
+  const subscribeAtom = (atom2, listener) => {
+    const mounted = addAtom(atom2);
+    const flushed = flushPending();
+    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 })
+      );
+    }
+    return () => {
+      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" }));
+      }
+    };
+  };
+  if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+    return {
+      get: readAtom,
+      set: writeAtom,
+      sub: subscribeAtom,
+      // 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);
+          };
+        }
+        storeListenersRev2.add(l);
+        return () => {
+          storeListenersRev2.delete(l);
+        };
+      },
+      dev_get_mounted_atoms: () => mountedAtoms.values(),
+      dev_get_atom_state: (a) => atomStateMap.get(a),
+      dev_get_mounted: (a) => mountedMap.get(a),
+      dev_restore_atoms: (values) => {
+        for (const [atom2, valueOrPromise] of values) {
+          if (hasInitialValue(atom2)) {
+            setAtomValueOrPromise(atom2, valueOrPromise);
+            recomputeDependents(atom2);
+          }
+        }
+        const flushed = flushPending();
+        storeListenersRev2.forEach(
+          (l) => l({ type: "restore", flushed })
+        );
+      }
+    };
+  }
+  return {
+    get: readAtom,
+    set: writeAtom,
+    sub: subscribeAtom
+  };
+};
+var defaultStore;
+var getDefaultStore = () => {
+  if (!defaultStore) {
+    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);
+var import_meta2 = {};
+var StoreContext = (0, import_react.createContext)(void 0);
+var useStore = (options) => {
+  const store = (0, import_react.useContext)(StoreContext);
+  return (options == null ? void 0 : options.store) || store || getDefaultStore();
+};
+var isPromiseLike2 = (x) => typeof (x == null ? void 0 : x.then) === "function";
+var use = import_react.default.use || ((promise) => {
+  if (promise.status === "pending") {
+    throw promise;
+  } else if (promise.status === "fulfilled") {
+    return promise.value;
+  } else if (promise.status === "rejected") {
+    throw promise.reason;
+  } else {
+    promise.status = "pending";
+    promise.then(
+      (v) => {
+        promise.status = "fulfilled";
+        promise.value = v;
+      },
+      (e) => {
+        promise.status = "rejected";
+        promise.reason = e;
+      }
+    );
+    throw promise;
+  }
+});
+function useAtomValue(atom2, options) {
+  const store = useStore(options);
+  const [[valueFromReducer, storeFromReducer, atomFromReducer], rerender] = (0, import_react.useReducer)(
+    (prev) => {
+      const nextValue = store.get(atom2);
+      if (Object.is(prev[0], nextValue) && prev[1] === store && prev[2] === atom2) {
+        return prev;
+      }
+      return [nextValue, store, atom2];
+    },
+    void 0,
+    () => [store.get(atom2), store, atom2]
+  );
+  let value = valueFromReducer;
+  if (storeFromReducer !== store || atomFromReducer !== atom2) {
+    rerender();
+    value = store.get(atom2);
+  }
+  const delay = options == null ? void 0 : options.delay;
+  (0, import_react.useEffect)(() => {
+    const unsub = store.sub(atom2, () => {
+      if (typeof delay === "number") {
+        setTimeout(rerender, delay);
+        return;
+      }
+      rerender();
+    });
+    rerender();
+    return unsub;
+  }, [store, atom2, delay]);
+  (0, import_react.useDebugValue)(value);
+  return isPromiseLike2(value) ? use(value) : value;
+}
+function useSetAtom(atom2, options) {
+  const store = useStore(options);
+  const setAtom = (0, import_react.useCallback)(
+    (...args) => {
+      if ((import_meta2.env ? import_meta2.env.MODE : void 0) !== "production" && !("write" in atom2)) {
+        throw new Error("not writable atom");
+      }
+      return store.set(atom2, ...args);
+    },
+    [store, atom2]
+  );
+  return setAtom;
+}
+function useAtom(atom2, options) {
+  return [
+    useAtomValue(atom2, options),
+    // We do wrong type assertion here, which results in throwing an error.
+    useSetAtom(atom2, options)
+  ];
+}
+
+// src/hooks.tsx
+var storyContextAtom = atom(null);
 function useSetStoryContext() {
-  return (0, import_jotai.useSetAtom)(storyContextAtom);
+  return useSetAtom(storyContextAtom);
 }
 function useStoryContext() {
-  return (0, import_jotai.useAtomValue)(storyContextAtom);
+  return useAtomValue(storyContextAtom);
 }
 function useStoryContextParam(name, defaultValue) {
-  const paramAtom = (0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.parameters?.[name]), [name]);
-  return (0, import_jotai.useAtomValue)(paramAtom) ?? defaultValue;
+  const paramAtom = (0, import_react2.useMemo)(() => atom((get) => get(storyContextAtom)?.parameters?.[name]), [name]);
+  return useAtomValue(paramAtom) ?? defaultValue;
 }
 function useIsStorySelected(storyId) {
-  return (0, import_jotai.useAtomValue)(
-    (0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.id === storyId), [storyId])
+  return useAtomValue(
+    (0, import_react2.useMemo)(() => atom((get) => get(storyContextAtom)?.id === storyId), [storyId])
   );
 }
 function useIsStorySectionSelected(title) {
-  return (0, import_jotai.useAtomValue)(
-    (0, import_react.useMemo)(
-      () => (0, import_jotai.atom)((get) => {
+  return useAtomValue(
+    (0, import_react2.useMemo)(
+      () => atom((get) => {
         const contextTitle = get(storyContextAtom)?.title;
         return contextTitle === title || contextTitle?.startsWith(`${title}/`);
       }),
@@ -89,9 +777,9 @@ function useIsStorySectionSelected(title) {
   );
 }
 function useIsChildSelected(entries) {
-  return (0, import_jotai.useAtomValue)(
-    (0, import_react.useMemo)(
-      () => (0, import_jotai.atom)((get) => {
+  return useAtomValue(
+    (0, import_react2.useMemo)(
+      () => atom((get) => {
         const contextId = get(storyContextAtom)?.id;
         return !!entries.find(({ id }) => id === contextId);
       }),
@@ -100,10 +788,10 @@ function useIsChildSelected(entries) {
   );
 }
 function useUpdateOnStoryChanged() {
-  (0, import_jotai.useAtomValue)((0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.id), []));
+  useAtomValue((0, import_react2.useMemo)(() => atom((get) => get(storyContextAtom)?.id), []));
 }
 function atomWithToggle(initialValue) {
-  const anAtom = (0, import_jotai.atom)(initialValue, (get, set, nextValue) => {
+  const anAtom = atom(initialValue, (get, set, nextValue) => {
     const update = nextValue ?? !get(anAtom);
     set(anAtom, update);
   });
@@ -111,14 +799,14 @@ function atomWithToggle(initialValue) {
 }
 var isUIVisibleAtom = atomWithToggle(true);
 function useIsUIVisible() {
-  return (0, import_jotai.useAtom)(isUIVisibleAtom);
+  return useAtom(isUIVisibleAtom);
 }
 var isSplitPanelVisibleAtom = atomWithToggle(false);
 function useIsSplitPanelVisible() {
-  return (0, import_jotai.useAtom)(isSplitPanelVisibleAtom);
+  return useAtom(isSplitPanelVisibleAtom);
 }
 function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
-  const jotaiStore = (0, import_jotai.getDefaultStore)();
+  const jotaiStore = getDefaultStore();
   if (isUIVisible !== void 0) {
     jotaiStore.set(isUIVisibleAtom, isUIVisible);
   }
@@ -126,12 +814,12 @@ function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
     jotaiStore.set(isSplitPanelVisibleAtom, isSplitPanelVisible);
   }
 }
-var selectedAddonAtom = (0, import_jotai.atom)(void 0);
+var selectedAddonAtom = atom(void 0);
 function useSelectedAddon(initialValue) {
-  const result = (0, import_jotai.useAtom)(selectedAddonAtom);
+  const result = useAtom(selectedAddonAtom);
   const set = result[1];
-  import_react.default.useEffect(() => {
-    const jotaiStore = (0, import_jotai.getDefaultStore)();
+  import_react2.default.useEffect(() => {
+    const jotaiStore = getDefaultStore();
     if (jotaiStore.get(selectedAddonAtom) === void 0) {
       set(initialValue);
     }
@@ -141,17 +829,17 @@ function useSelectedAddon(initialValue) {
 
 // src/preview/components/OnDeviceUI/OnDeviceUI.tsx
 var import_react_native_theming10 = require("@storybook/react-native-theming");
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_react_native13 = require("react-native");
 
 // src/constants.ts
 var ANIMATION_DURATION_TRANSITION = 400;
 
 // src/preview/components/StoryListView/StoryListView.tsx
-var import_addons = require("@storybook/addons");
 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_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
 
 // src/preview/components/Shared/icons.tsx
@@ -359,7 +1047,7 @@ var HeaderContainer = import_react_native_theming.styled.TouchableOpacity(
     borderBottomRightRadius: selected && !childSelected ? theme3.storyList.sectionBorderRadius : void 0
   })
 );
-var SectionHeader = import_react2.default.memo(
+var SectionHeader = import_react3.default.memo(
   ({ name, onPress, isChildSelected, icon = "grid", expanded }) => {
     const selected = useIsStorySectionSelected(name) || isChildSelected;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -453,7 +1141,7 @@ var RenderItem = ({
   const isChildSelected = useIsChildSelected(item.stories);
   const firstChild = findFirstChildStory(item);
   const firstChildSelected = useIsStorySelected(firstChild?.id);
-  const [showChildren, setShowChildren] = (0, import_react2.useState)(false);
+  const [showChildren, setShowChildren] = (0, import_react3.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       SectionHeader,
@@ -490,8 +1178,8 @@ var RenderItem = ({
   ] });
 };
 var StoryListView = ({ storyIndex }) => {
-  const originalData = (0, import_react2.useMemo)(() => getNestedStories(storyIndex), [storyIndex]);
-  const [data, setData] = (0, import_react2.useState)(originalData);
+  const originalData = (0, import_react3.useMemo)(() => getNestedStories(storyIndex), [storyIndex]);
+  const [data, setData] = (0, import_react3.useState)(originalData);
   const theme3 = (0, import_react_native_theming.useTheme)();
   const handleChangeSearchText = (text) => {
     const query = text.trim();
@@ -502,10 +1190,10 @@ var StoryListView = ({ storyIndex }) => {
     setData(filterNestedStories(originalData, query));
   };
   const changeStory = (storyId) => {
-    const channel = import_addons.addons.getChannel();
+    const channel = import_manager_api.addons.getChannel();
     channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
   };
-  const renderItem = import_react2.default.useCallback(({ item }) => {
+  const renderItem = import_react3.default.useCallback(({ item }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
@@ -536,10 +1224,10 @@ var StoryListView = ({ storyIndex }) => {
     )
   ] });
 };
-var StoryListView_default = import_react2.default.memo(StoryListView);
+var StoryListView_default = import_react3.default.memo(StoryListView);
 
 // src/preview/components/StoryView/StoryView.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_react_native_theming2 = require("@storybook/react-native-theming");
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -566,10 +1254,10 @@ var StoryView = () => {
   }
   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." }) });
 };
-var StoryView_default = import_react3.default.memo(StoryView);
+var StoryView_default = import_react4.default.memo(StoryView);
 
 // src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var AbsolutePositionedKeyboardAwareView = ({
@@ -598,7 +1286,7 @@ var styles2 = import_react_native4.StyleSheet.create({
   absolute: { position: "absolute" },
   container: { flex: 1 }
 });
-var absolute_positioned_keyboard_aware_view_default = import_react4.default.memo(AbsolutePositionedKeyboardAwareView);
+var absolute_positioned_keyboard_aware_view_default = import_react5.default.memo(AbsolutePositionedKeyboardAwareView);
 
 // src/preview/components/OnDeviceUI/OnDeviceUI.tsx
 var import_react_native_theming11 = require("@storybook/react-native-theming");
@@ -606,7 +1294,7 @@ var import_react_native14 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
 // src/preview/components/OnDeviceUI/Panel.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
 var import_react_native_theming3 = require("@storybook/react-native-theming");
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -624,19 +1312,20 @@ var Panel = ({ edge, children, style }) => {
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { edge, style: containerStyle, children });
 };
-var Panel_default = import_react5.default.memo(Panel);
+var Panel_default = import_react6.default.memo(Panel);
 
 // src/preview/components/OnDeviceUI/addons/Addons.tsx
-var import_addons2 = require("@storybook/addons");
+var import_manager_api2 = require("@storybook/manager-api");
 var import_react_native_theming7 = require("@storybook/react-native-theming");
-var import_react9 = __toESM(require("react"));
+var import_types = __toESM(require_dist());
+var import_react10 = __toESM(require("react"));
 var import_react_native8 = require("react-native");
 
 // src/preview/components/OnDeviceUI/addons/List.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/preview/components/Shared/tabs.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
 var import_react_native_theming4 = require("@storybook/react-native-theming");
 var import_react_native_theming5 = require("@storybook/react-native-theming");
@@ -655,7 +1344,7 @@ var TabButtonTouchable = import_react_native_theming4.styled.TouchableOpacity(({
   borderRadius: theme3.tabs.borderRadius,
   backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tabs.inactiveBackgroundColor
 }));
-var TabButton = import_react6.default.memo(({ onPress, id, active, children, testID }) => {
+var TabButton = import_react7.default.memo(({ onPress, id, active, children, testID }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     TabButtonTouchable,
     {
@@ -668,7 +1357,7 @@ var TabButton = import_react6.default.memo(({ onPress, id, active, children, tes
     }
   );
 });
-var TabBar = import_react6.default.memo(({ scrollable = false, style, children }) => {
+var TabBar = import_react7.default.memo(({ scrollable = false, style, children }) => {
   const theme3 = (0, import_react_native_theming5.useTheme)();
   if (scrollable) {
     children = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -692,10 +1381,8 @@ var TabBarContainer = import_react_native_theming4.styled.View(() => ({
 // src/preview/components/OnDeviceUI/addons/List.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var AddonList = ({ panels, addonSelected, onPressAddon }) => {
-  const addonKeys = Object.keys(panels);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabBar, { scrollable: true, children: addonKeys.map((id) => {
-    const { title } = panels[id];
-    let resolvedTitle = typeof title === "function" ? title() : title;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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();
     }
@@ -711,11 +1398,11 @@ var AddonList = ({ panels, addonSelected, onPressAddon }) => {
     );
   }) });
 };
-var List_default = import_react7.default.memo(AddonList);
+var List_default = import_react8.default.memo(AddonList);
 
 // src/preview/components/OnDeviceUI/addons/Wrapper.tsx
 var import_react_native_theming6 = require("@storybook/react-native-theming");
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_native7 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Container2 = import_react_native_theming6.styled.View(({ selected }) => ({
@@ -732,7 +1419,7 @@ var Wrapper = ({ panels, addonSelected }) => {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: content });
 };
-var Wrapper_default = import_react8.default.memo(Wrapper);
+var Wrapper_default = import_react9.default.memo(Wrapper);
 
 // src/preview/components/OnDeviceUI/addons/Addons.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -740,7 +1427,7 @@ var Text3 = import_react_native_theming7.styled.Text(({ theme: theme3 }) => ({
   marginTop: theme3.tokens.spacing4
 }));
 var Addons = ({ active }) => {
-  const panels = import_addons2.addons.getElements("panel");
+  const panels = import_manager_api2.addons.getElements(import_types.Addon_TypesEnum.PANEL);
   const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
   const context = useStoryContext();
   const id = context?.id;
@@ -762,16 +1449,16 @@ var Addons = ({ active }) => {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper_default, { addonSelected: active ? addonSelected : null, panels })
   ] });
 };
-var Addons_default = import_react9.default.memo(Addons);
+var Addons_default = import_react10.default.memo(Addons);
 
 // src/preview/components/OnDeviceUI/addons/AddonsSkeleton.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __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_react10.default.memo(function AddonsSkeleton2({ visible }) {
-  const progress = import_react10.default.useRef(new import_react_native9.Animated.Value(visible ? 1 : 0));
-  import_react10.default.useEffect(() => {
+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, {
       toValue: visible ? 1 : 0,
       duration: ANIMATION_DURATION_TRANSITION,
@@ -938,13 +1625,13 @@ var getPreviewShadowStyle = (animatedValue) => ({
 });
 
 // src/preview/components/OnDeviceUI/navigation/Navigation.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_react_native12 = 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_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var NavigationTabBar = (0, import_react_native_theming9.styled)(TabBar)(({ theme: theme3 }) => ({
@@ -953,7 +1640,7 @@ var NavigationTabBar = (0, import_react_native_theming9.styled)(TabBar)(({ theme
   borderColor: theme3.navigation.borderColor,
   borderTopWidth: theme3.navigation.borderWidth
 }));
-var NavigationBar = import_react11.default.memo(({ index, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(NavigationTabBar, { style, children: [
+var NavigationBar = import_react12.default.memo(({ index, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(NavigationTabBar, { style, children: [
   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     TabButton,
     {
@@ -1048,7 +1735,7 @@ var Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
     ] })
   ] });
 };
-var Navigation_default = import_react12.default.memo(Navigation);
+var Navigation_default = import_react13.default.memo(Navigation);
 function NavigationShortcuts({ children }) {
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1100,16 +1787,16 @@ var OnDeviceUI = ({
   keyboardAvoidingViewVerticalOffset,
   tabOpen: initialTabOpen
 }) => {
-  const [tabOpen, setTabOpen] = (0, import_react13.useState)(initialTabOpen || CANVAS);
-  const lastTabOpen = import_react13.default.useRef(tabOpen);
-  const [previewDimensions, setPreviewDimensions] = (0, import_react13.useState)(() => ({
+  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 animatedValue = (0, import_react13.useRef)(new import_react_native13.Animated.Value(tabOpen));
+  const animatedValue = (0, import_react14.useRef)(new import_react_native13.Animated.Value(tabOpen));
   const wide = (0, import_react_native14.useWindowDimensions)().width >= BREAKPOINT;
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const handleToggleTab = import_react13.default.useCallback(
+  const handleToggleTab = import_react14.default.useCallback(
     (newTabOpen) => {
       if (newTabOpen === tabOpen) {
         return;
@@ -1141,8 +1828,8 @@ var OnDeviceUI = ({
     })
   ];
   const [isUIVisible] = useIsUIVisible();
-  const [navBarHeight, setNavBarHeight] = import_react13.default.useState(insets.bottom + 40);
-  const measureNavigation = import_react13.default.useCallback(
+  const [navBarHeight, setNavBarHeight] = import_react14.default.useState(insets.bottom + 40);
+  const measureNavigation = import_react14.default.useCallback(
     ({ nativeEvent }) => {
       const inset = insets.bottom;
       setNavBarHeight(isUIVisible ? nativeEvent.layout.height - inset : 0);
@@ -1221,11 +1908,14 @@ var OnDeviceUI = ({
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Navigation_default, { onLayout: measureNavigation, tabOpen, onChangeTab: handleToggleTab })
   ] }) });
 };
-var OnDeviceUI_default = import_react13.default.memo(OnDeviceUI);
+var OnDeviceUI_default = import_react14.default.memo(OnDeviceUI);
 
 // src/preview/View.tsx
-var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_channels = require("@storybook/channels");
+var import_core_events2 = __toESM(require("@storybook/core-events"));
+var import_global = require("@storybook/global");
+var import_deepmerge = __toESM(require("deepmerge"));
+var import_react_native15 = require("react-native");
 
 // src/preview/rn-host-detect.js
 function getByRemoteConfig(hostname) {
@@ -1273,9 +1963,6 @@ function getHost(hostname) {
 }
 
 // src/preview/View.tsx
-var import_core_events2 = __toESM(require("@storybook/core-events"));
-var import_react_native15 = require("react-native");
-var import_deepmerge = __toESM(require("deepmerge"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
 var View10 = class {
@@ -1336,13 +2023,13 @@ var View10 = class {
     const initialStory = this._getInitialStory(params);
     if (enableWebsockets) {
       const channel = this._getServerChannel(params);
-      import_addons3.addons.setChannel(channel);
+      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_addons3.addons.loadAddons({
+    import_manager_api3.addons.loadAddons({
       store: () => ({
         fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
         getSelection: () => {
@@ -1360,12 +2047,12 @@ var View10 = class {
     return () => {
       const setContext = useSetStoryContext();
       const colorScheme = (0, import_react_native15.useColorScheme)();
-      const [, forceUpdate] = (0, import_react14.useReducer)((x) => x + 1, 0);
-      const appliedTheme = (0, import_react14.useMemo)(
-        () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming13.darkTheme : import_react_native_theming13.theme, params.theme ?? {}),
+      const [, forceUpdate] = (0, import_react15.useReducer)((x) => x + 1, 0);
+      const appliedTheme = (0, import_react15.useMemo)(
+        () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming12.darkTheme : import_react_native_theming12.theme, params.theme ?? {}),
         [colorScheme]
       );
-      (0, import_react14.useEffect)(() => {
+      (0, import_react15.useEffect)(() => {
         self._setStory = (newStory) => {
           setContext(newStory);
           if (shouldPersistSelection) {
@@ -1379,6 +2066,13 @@ 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, ({ storyId }) => {
+          self._preview.selectSpecifiedStory();
+          const newStoryContext = this._preview.storyStore.getStoryContext(
+            this._preview.storyStore.fromId(storyId)
+          );
+          setContext(newStoryContext);
+        });
       }, []);
       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)(
@@ -1455,7 +2149,7 @@ function executeLoadableForChanges(loadable, m) {
 
 // src/preview/start.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-import_global.global.FEATURES = {
+import_global2.global.FEATURES = {
   storyStoreV7: false
 };
 var render = (args, context) => {
@@ -1468,42 +2162,32 @@ var render = (args, context) => {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component, { ...args });
 };
 function start() {
-  const channel = new import_channels2.default({ async: true });
-  import_addons4.addons.setChannel(channel);
+  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();
   const previewView = {
     prepareForStory: () => {
-      return {};
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
     },
-    showNoPreview: () => {
-    },
-    showPreparingStory: () => {
+    prepareForDocs: () => {
     },
-    applyLayout: () => {
+    showErrorDisplay: () => {
     },
-    showErrorDisplay: (e) => {
-      console.log(e);
-    },
-    showStoryDuringRender: () => {
+    showDocs: () => {
     },
     showMain: () => {
     },
-    checkIfLayoutExists: () => {
-    },
-    showStory: () => {
+    showNoPreview: () => {
     },
-    docsRoot: null,
-    prepareForDocs: () => null,
-    showDocs: () => {
+    showPreparingDocs: () => {
     },
-    preparingTimeout: setTimeout(() => {
-    }, 0),
-    showMode: () => {
+    showPreparingStory: () => {
     },
-    showPreparingDocs: () => {
+    showStory: () => {
     },
-    storyRoot: null,
-    testing: false
+    showStoryDuringRender: () => {
+    }
   };
   const urlStore = {
     selection: null,
@@ -1516,11 +2200,11 @@ function start() {
   };
   const preview = new import_preview_web.PreviewWithSelection(urlStore, previewView);
   clientApi2.storyStore = preview.storyStore;
-  if (import_global.global) {
-    import_global.global.__STORYBOOK_CLIENT_API__ = clientApi2;
-    import_global.global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-    import_global.global.__STORYBOOK_PREVIEW__ = preview;
-    import_global.global.__STORYBOOK_STORY_STORE__ = 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;
@@ -1576,7 +2260,7 @@ function start() {
 }
 
 // src/index.ts
-var import_react_native_theming14 = require("@storybook/react-native-theming");
+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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-alpha.4",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -33,7 +33,7 @@
   ],
   "scripts": {
     "dev": "ts-node ./buildscripts/gentsdev.ts && tsup --watch",
-    "prepare": "tsup",
+    "prepare": "rm -rf dist/ && tsup",
     "test": "jest"
   },
   "jest": {
@@ -51,22 +51,22 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/addons": "^7",
     "@storybook/channel-websocket": "^7",
     "@storybook/channels": "^7",
     "@storybook/client-logger": "^7",
     "@storybook/core-client": "^7",
+    "@storybook/core-common": "^7",
     "@storybook/core-events": "^7",
     "@storybook/csf": "^0.1.1",
     "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "^7",
     "@storybook/preview-api": "^7",
     "@storybook/preview-web": "^7",
-    "@storybook/react-native-theming": "^7.0.0-alpha.2",
+    "@storybook/react-native-theming": "^7.0.0-alpha.4",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
     "glob": "^7.1.7",
-    "jotai": "^2.0.2",
     "prettier": "^2.4.1",
     "react-native-swipe-gestures": "^1.0.5",
     "util": "^0.12.4"
@@ -77,6 +77,7 @@
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
+    "jotai": "^2.0.2",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.1",
     "tsup": "^7.2.0",
@@ -94,5 +95,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "284fd8ae2ea94588dfea0f216d34bf263b2c6139"
+  "gitHead": "eb7e4f2ad33a74b8c898c95cbdbbd5bec3c051db"
 }