@storybook/react-native 10.3.0-next.1 → 10.3.0-next.3

package/dist/index.d.ts

@@ -103,6 +103,7 @@ declare function prepareStories({ storyEntries, options, storySort, }: {
     };
     importMap: Record<string, any>;
 };
+
 declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<storybook_internal_types.NormalizedProjectAnnotations<ReactRenderer>>;
 declare function start({ annotations, storyEntries, options, }: {
     storyEntries: (NormalizedStoriesSpecifier & {

package/dist/index.js

@@ -98,10 +98,10 @@ var init_constants = __esm({
 });
 
 // src/backgrounds/BackgroundPanel.tsx
-var import_react_native4, import_react5, import_core_events2, import_react_native_theming4, import_jsx_runtime5, codeSample, ThemedText, TitleText, ParagraphText, LockedText, Instructions, BackgroundPanel, BackgroundPanel_default;
+var import_react_native5, import_react5, import_core_events2, import_react_native_theming4, import_jsx_runtime5, codeSample, ThemedText, TitleText, ParagraphText, LockedText, Instructions, BackgroundPanel, BackgroundPanel_default;
 var init_BackgroundPanel = __esm({
   "src/backgrounds/BackgroundPanel.tsx"() {
-    import_react_native4 = require("react-native");
+    import_react_native5 = require("react-native");
     import_react5 = require("react");
     import_core_events2 = require("storybook/internal/core-events");
     import_react_native_theming4 = require("@storybook/react-native-theming");
@@ -147,7 +147,7 @@ export default preview;
       fontStyle: "italic",
       opacity: 0.7
     }));
-    Instructions = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { children: [
+    Instructions = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleText, { children: "Setup Instructions" }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParagraphText, { children: "Add background options to your preview parameters. Each option should include a name and the corresponding color value." }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParagraphText, { children: "Below is an example of how to configure backgrounds in your preview config. Long press the example to copy it." }),
@@ -155,8 +155,8 @@ export default preview;
     ] });
     BackgroundPanel = ({ active, api, channel }) => {
       const store2 = api.store();
-      const storyId = store2.getSelection().storyId;
-      const story = store2.fromId(storyId);
+      const storyId = store2.getSelection()?.storyId;
+      const story = storyId ? store2.fromId(storyId) : null;
       const isLocked = !!story?.storyGlobals?.[PARAM_KEY];
       const setBackground = (0, import_react5.useCallback)(
         (name) => {
@@ -164,15 +164,12 @@ export default preview;
         },
         [channel]
       );
-      if (!active) {
-        return null;
-      }
-      const bgParams = story.parameters[PARAM_KEY];
+      const bgParams = story?.parameters?.[PARAM_KEY];
       const options = bgParams?.options;
       if (options && Object.keys(options).length > 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: { padding: 10 }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: { padding: 10 }, children: [
           isLocked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LockedText, { children: "Background is set at the story level" }),
-          Object.entries(options).map(([key, { name, value }]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Object.entries(options).map(([key, { name, value }]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Swatch_default,
             {
               value,
@@ -183,7 +180,7 @@ export default preview;
           ) }, `${key} ${value}`))
         ] });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: { padding: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Instructions, {}) });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: { padding: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Instructions, {}) });
     };
     BackgroundPanel_default = BackgroundPanel;
   }
@@ -231,24 +228,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_react_native_theming5 = require("@storybook/react-native-theming");
 
-// ../../node_modules/react-native-web/dist/exports/Platform/index.js
-var Platform = {
-  OS: "web",
-  select: (obj) => "web" in obj ? obj.web : obj.default,
-  get isTesting() {
-    if (process.env.NODE_ENV === "test") {
-      return true;
-    }
-    return false;
-  },
-  get Version() {
-    return "0.0.0";
-  }
-};
-var Platform_default = Platform;
-
 // src/polyfill.ts
-if (Platform_default.OS !== "web") {
+var import_react_native = require("react-native");
+if (import_react_native.Platform.OS !== "web") {
   try {
     let params = new URLSearchParams({ test: "1" });
     params.get("test");
@@ -257,12 +239,14 @@ if (Platform_default.OS !== "web") {
     setupURLPolyfill();
   }
 }
+if (import_react_native.Platform.OS === "web" && typeof globalThis.setImmediate === "undefined") {
+  require("setimmediate");
+}
 
 // src/Start.tsx
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_manager_api3 = require("storybook/manager-api");
-var import_preview_api2 = require("storybook/internal/preview-api");
-var import_csf2 = require("storybook/internal/csf");
+var import_preview_api3 = require("storybook/internal/preview-api");
 var import_channels2 = require("storybook/internal/channels");
 
 // src/View.tsx
@@ -274,14 +258,63 @@ var import_core_events = require("storybook/internal/core-events");
 var import_manager_api = require("storybook/manager-api");
 var import_preview_api = require("storybook/internal/preview-api");
 var import_dedent = __toESM(require("dedent"));
+
+// src/patchChannelForRN.ts
+function snapshotValue(value, depth = 0) {
+  if (depth > 3) return "[...]";
+  if (value === null || value === void 0) return value;
+  if (typeof value === "function") return void 0;
+  if (typeof value !== "object") return value;
+  if (Array.isArray(value)) {
+    return value.map((item) => snapshotValue(item, depth + 1));
+  }
+  const result = {};
+  for (const key of Object.keys(value)) {
+    try {
+      result[key] = snapshotValue(value[key], depth + 1);
+    } catch {
+      result[key] = "[Error]";
+    }
+  }
+  return result;
+}
+function isSyntheticEvent(value) {
+  return value !== null && typeof value === "object" && typeof value.persist === "function" && "nativeEvent" in value;
+}
+function sanitizeActionArgs(value) {
+  if (isSyntheticEvent(value)) {
+    return snapshotValue(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(sanitizeActionArgs);
+  }
+  return value;
+}
+function patchChannelForRN(channel) {
+  globalThis.CHANNEL_OPTIONS = {
+    maxDepth: 5
+  };
+  const originalEmit = channel.emit.bind(channel);
+  channel.emit = (eventName, ...args) => {
+    if (eventName === "storybook/actions/action-event") {
+      const actionDisplay = args[0];
+      if (actionDisplay?.data?.args != null) {
+        actionDisplay.data.args = sanitizeActionArgs(actionDisplay.data.args);
+      }
+    }
+    return originalEmit(eventName, ...args);
+  };
+}
+
+// src/View.tsx
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react4 = require("react");
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 
 // src/components/StoryView/StoryView.tsx
 var import_react_native_theming = require("@storybook/react-native-theming");
 var import_react3 = __toESM(require("react"));
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 
 // ../../node_modules/jotai/esm/vanilla/internals.mjs
 var import_meta = {};
@@ -303,30 +336,6 @@ function returnAtomValue(atomState) {
   }
   return atomState.v;
 }
-var promiseStateMap = /* @__PURE__ */ new WeakMap();
-function isPendingPromise(value) {
-  var _a;
-  return isPromiseLike(value) && !!((_a = promiseStateMap.get(value)) == null ? void 0 : _a[0]);
-}
-function abortPromise(promise) {
-  const promiseState = promiseStateMap.get(promise);
-  if (promiseState == null ? void 0 : promiseState[0]) {
-    promiseState[0] = false;
-    promiseState[1].forEach((fn) => fn());
-  }
-}
-function registerAbortHandler(promise, abortHandler) {
-  let promiseState = promiseStateMap.get(promise);
-  if (!promiseState) {
-    promiseState = [true, /* @__PURE__ */ new Set()];
-    promiseStateMap.set(promise, promiseState);
-    const settle = () => {
-      promiseState[0] = false;
-    };
-    promise.then(settle, settle);
-  }
-  promiseState[1].add(abortHandler);
-}
 function isPromiseLike(p) {
   return typeof (p == null ? void 0 : p.then) === "function";
 }
@@ -484,6 +493,7 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
   const writeAtomState = buildingBlocks[16];
   const mountDependencies = buildingBlocks[17];
   const setAtomStateValueOrPromise = buildingBlocks[20];
+  const registerAbortHandler = buildingBlocks[26];
   const atomState = ensureAtomState(store2, atom2);
   if (isAtomStateInitialized(atomState)) {
     if (mountedMap.has(atom2) && invalidatedAtoms.get(atom2) !== atomState.n) {
@@ -500,16 +510,27 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
       return atomState;
     }
   }
-  atomState.d.clear();
   let isSync = true;
-  function mountDependenciesIfAsync() {
+  const prevDeps = new Set(atomState.d.keys());
+  const nextDeps = /* @__PURE__ */ new Map();
+  const pruneDependencies = () => {
+    for (const a of prevDeps) {
+      if (!nextDeps.has(a)) {
+        atomState.d.delete(a);
+      }
+    }
+  };
+  const mountDependenciesIfAsync = () => {
     if (mountedMap.has(atom2)) {
+      const shouldRecompute = !changedAtoms.size;
       mountDependencies(store2, atom2);
-      recomputeInvalidatedAtoms(store2);
-      flushCallbacks(store2);
+      if (shouldRecompute) {
+        recomputeInvalidatedAtoms(store2);
+        flushCallbacks(store2);
+      }
     }
-  }
-  function getter(a) {
+  };
+  const getter = (a) => {
     var _a2;
     if (a === atom2) {
       const aState2 = ensureAtomState(store2, a);
@@ -526,8 +547,9 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
     try {
       return returnAtomValue(aState);
     } finally {
+      nextDeps.set(a, aState.n);
       atomState.d.set(a, aState.n);
-      if (isPendingPromise(atomState.v)) {
+      if (isPromiseLike(atomState.v)) {
         addPendingPromiseToDependency(atom2, atomState.v, aState);
       }
       if (mountedMap.has(atom2)) {
@@ -537,7 +559,7 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
         mountDependenciesIfAsync();
       }
     }
-  }
+  };
   let controller;
   let setSelf;
   const options = {
@@ -587,8 +609,14 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
     }
     setAtomStateValueOrPromise(store2, atom2, valueOrPromise);
     if (isPromiseLike(valueOrPromise)) {
-      registerAbortHandler(valueOrPromise, () => controller == null ? void 0 : controller.abort());
-      valueOrPromise.then(mountDependenciesIfAsync, mountDependenciesIfAsync);
+      registerAbortHandler(store2, valueOrPromise, () => controller == null ? void 0 : controller.abort());
+      const settle = () => {
+        pruneDependencies();
+        mountDependenciesIfAsync();
+      };
+      valueOrPromise.then(settle, settle);
+    } else {
+      pruneDependencies();
     }
     (_a = storeHooks.r) == null ? void 0 : _a.call(storeHooks, atom2);
     return atomState;
@@ -617,8 +645,10 @@ var BUILDING_BLOCK_invalidateDependents = (store2, atom2) => {
     const aState = ensureAtomState(store2, a);
     for (const d of getMountedOrPendingDependents(a, aState, mountedMap)) {
       const dState = ensureAtomState(store2, d);
-      invalidatedAtoms.set(d, dState.n);
-      stack.push(d);
+      if (invalidatedAtoms.get(d) !== dState.n) {
+        invalidatedAtoms.set(d, dState.n);
+        stack.push(d);
+      }
     }
   }
 };
@@ -686,7 +716,7 @@ var BUILDING_BLOCK_mountDependencies = (store2, atom2) => {
   const unmountAtom = buildingBlocks[19];
   const atomState = ensureAtomState(store2, atom2);
   const mounted = mountedMap.get(atom2);
-  if (mounted && !isPendingPromise(atomState.v)) {
+  if (mounted) {
     for (const [a, n] of atomState.d) {
       if (!mounted.d.has(a)) {
         const aState = ensureAtomState(store2, a);
@@ -807,7 +837,9 @@ var BUILDING_BLOCK_unmountAtom = (store2, atom2) => {
   return mounted;
 };
 var BUILDING_BLOCK_setAtomStateValueOrPromise = (store2, atom2, valueOrPromise) => {
-  const ensureAtomState = getInternalBuildingBlocks(store2)[11];
+  const buildingBlocks = getInternalBuildingBlocks(store2);
+  const ensureAtomState = buildingBlocks[11];
+  const abortPromise = buildingBlocks[27];
   const atomState = ensureAtomState(store2, atom2);
   const hasPrevValue = "v" in atomState;
   const prevValue = atomState.v;
@@ -825,7 +857,7 @@ var BUILDING_BLOCK_setAtomStateValueOrPromise = (store2, atom2, valueOrPromise)
   if (!hasPrevValue || !Object.is(prevValue, atomState.v)) {
     ++atomState.n;
     if (isPromiseLike(prevValue)) {
-      abortPromise(prevValue);
+      abortPromise(store2, prevValue);
     }
   }
 };
@@ -860,6 +892,24 @@ var BUILDING_BLOCK_storeSub = (store2, atom2, listener) => {
     flushCallbacks(store2);
   };
 };
+var BUILDING_BLOCK_registerAbortHandler = (store2, promise, abortHandler) => {
+  const buildingBlocks = getInternalBuildingBlocks(store2);
+  const abortHandlersMap = buildingBlocks[25];
+  let abortHandlers = abortHandlersMap.get(promise);
+  if (!abortHandlers) {
+    abortHandlers = /* @__PURE__ */ new Set();
+    abortHandlersMap.set(promise, abortHandlers);
+    const cleanup = () => abortHandlersMap.delete(promise);
+    promise.then(cleanup, cleanup);
+  }
+  abortHandlers.add(abortHandler);
+};
+var BUILDING_BLOCK_abortPromise = (store2, promise) => {
+  const buildingBlocks = getInternalBuildingBlocks(store2);
+  const abortHandlersMap = buildingBlocks[25];
+  const abortHandlers = abortHandlersMap.get(promise);
+  abortHandlers == null ? void 0 : abortHandlers.forEach((fn) => fn());
+};
 var buildingBlockMap = /* @__PURE__ */ new WeakMap();
 var getInternalBuildingBlocks = (store2) => {
   const buildingBlocks = buildingBlockMap.get(store2);
@@ -870,6 +920,14 @@ var getInternalBuildingBlocks = (store2) => {
   }
   return buildingBlocks;
 };
+function getBuildingBlocks(store2) {
+  const buildingBlocks = getInternalBuildingBlocks(store2);
+  const enhanceBuildingBlocks = buildingBlocks[24];
+  if (enhanceBuildingBlocks) {
+    return enhanceBuildingBlocks(buildingBlocks);
+  }
+  return buildingBlocks;
+}
 function buildStore(...buildArgs) {
   const store2 = {
     get(atom2) {
@@ -920,7 +978,12 @@ function buildStore(...buildArgs) {
     BUILDING_BLOCK_storeGet,
     BUILDING_BLOCK_storeSet,
     BUILDING_BLOCK_storeSub,
-    void 0
+    void 0,
+    // abortable promise support
+    /* @__PURE__ */ new WeakMap(),
+    // abortHandlersMap
+    BUILDING_BLOCK_registerAbortHandler,
+    BUILDING_BLOCK_abortPromise
   ].map((fn, i) => buildArgs[i] || fn);
   buildingBlockMap.set(store2, Object.freeze(buildingBlocks));
   return store2;
@@ -1020,7 +1083,9 @@ var use = import_react.default.use || // A shim for older React versions
   }
 });
 var continuablePromiseMap = /* @__PURE__ */ new WeakMap();
-var createContinuablePromise = (promise, getValue) => {
+var createContinuablePromise = (store2, promise, getValue) => {
+  const buildingBlocks = getBuildingBlocks(store2);
+  const registerAbortHandler = buildingBlocks[26];
   let continuablePromise = continuablePromiseMap.get(promise);
   if (!continuablePromise) {
     continuablePromise = new Promise((resolve, reject) => {
@@ -1042,7 +1107,7 @@ var createContinuablePromise = (promise, getValue) => {
             continuablePromiseMap.set(nextValue, continuablePromise);
             curr = nextValue;
             nextValue.then(onFulfilled(nextValue), onRejected(nextValue));
-            registerAbortHandler(nextValue, onAbort);
+            registerAbortHandler(store2, nextValue, onAbort);
           } else {
             resolve(nextValue);
           }
@@ -1051,7 +1116,7 @@ var createContinuablePromise = (promise, getValue) => {
         }
       };
       promise.then(onFulfilled(promise), onRejected(promise));
-      registerAbortHandler(promise, onAbort);
+      registerAbortHandler(store2, promise, onAbort);
     });
     continuablePromiseMap.set(promise, continuablePromise);
   }
@@ -1083,7 +1148,7 @@ function useAtomValue(atom2, options) {
           const value2 = store2.get(atom2);
           if (isPromiseLike2(value2)) {
             attachPromiseStatus(
-              createContinuablePromise(value2, () => store2.get(atom2))
+              createContinuablePromise(store2, value2, () => store2.get(atom2))
             );
           }
         } catch (e) {
@@ -1100,7 +1165,11 @@ function useAtomValue(atom2, options) {
   }, [store2, atom2, delay, promiseStatus]);
   (0, import_react.useDebugValue)(value);
   if (isPromiseLike2(value)) {
-    const promise = createContinuablePromise(value, () => store2.get(atom2));
+    const promise = createContinuablePromise(
+      store2,
+      value,
+      () => store2.get(atom2)
+    );
     if (promiseStatus) {
       attachPromiseStatus(promise);
     }
@@ -1134,7 +1203,7 @@ function useStoryContext() {
 
 // src/components/StoryView/ErrorBoundary.tsx
 var import_react2 = __toESM(require("react"));
-var import_react_native = require("react-native");
+var import_react_native2 = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ErrorBoundary = class extends import_react2.default.Component {
   constructor(props) {
@@ -1150,7 +1219,7 @@ var ErrorBoundary = class extends import_react2.default.Component {
   render() {
     if (this.state.hasError) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native.View,
+        import_react_native2.View,
         {
           style: {
             margin: 16,
@@ -1161,7 +1230,7 @@ var ErrorBoundary = class extends import_react2.default.Component {
             justifyContent: "center",
             borderRadius: 4
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { fontWeight: "bold" }, children: "Something went wrong rendering your story" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { fontWeight: "bold" }, children: "Something went wrong rendering your story" })
         }
       );
     }
@@ -1172,7 +1241,7 @@ var ErrorBoundary = class extends import_react2.default.Component {
 // src/components/StoryView/StoryView.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function dismissOnStartResponder() {
-  import_react_native2.Keyboard.dismiss();
+  import_react_native3.Keyboard.dismiss();
   return false;
 }
 var Text2 = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
@@ -1213,7 +1282,7 @@ var StoryView = ({
     const { unboundStoryFn: StoryComponent } = context;
     if (useWrapper) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native2.View,
+        import_react_native3.View,
         {
           style: containerStyle,
           testID: id,
@@ -1227,7 +1296,7 @@ var StoryView = ({
     }
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorBoundary, { onError, children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryComponent, { ...context }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: errorContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { children: "Please select a story to preview." }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: errorContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { children: "Please select a story to preview." }) });
 };
 var StoryView_default = import_react3.default.memo(StoryView);
 
@@ -1309,7 +1378,7 @@ var View3 = class {
     if (globalThis.STORYBOOK_WEBSOCKET?.host) {
       return globalThis.STORYBOOK_WEBSOCKET.host;
     }
-    return import_react_native3.Platform.OS === "android" ? "10.0.2.2" : "localhost";
+    return import_react_native4.Platform.OS === "android" ? "10.0.2.2" : "localhost";
   };
   __getPort = (params = {}) => {
     if (params.port) {
@@ -1327,14 +1396,15 @@ var View3 = class {
     const websocketType = params.secured ? "wss" : "ws";
     const url = `${websocketType}://${host}${port}/${query}`;
     const channel = new import_channels.Channel({
+      async: true,
       transport: new import_channels.WebsocketTransport({
         url,
         onError: (e) => {
           console.log(`WebsocketTransport error ${JSON.stringify(e)}`);
         }
-      }),
-      async: true
+      })
     });
+    patchChannelForRN(channel);
     return channel;
   };
   createPreparedStoryMapping = async () => {
@@ -1401,7 +1471,7 @@ var View3 = class {
     return () => {
       const setContext = useSetStoryContext();
       const story = useStoryContext();
-      const colorScheme = (0, import_react_native3.useColorScheme)();
+      const colorScheme = (0, import_react_native4.useColorScheme)();
       const [update, forceUpdate] = (0, import_react4.useReducer)((x) => x + 1, 0);
       const [ready, setReady] = (0, import_react4.useState)(false);
       const appliedTheme = (0, import_react4.useMemo)(
@@ -1409,7 +1479,7 @@ var View3 = class {
         [colorScheme]
       );
       (0, import_react4.useEffect)(() => {
-        const listener = import_react_native3.Linking.addEventListener("url", ({ url }) => {
+        const listener = import_react_native4.Linking.addEventListener("url", ({ url }) => {
           if (typeof url === "string") {
             const urlObj = new URL(url);
             const storyId = urlObj.searchParams.get(STORYBOOK_STORY_ID_PARAM);
@@ -1434,7 +1504,7 @@ var View3 = class {
         self.createPreparedStoryMapping().then(() => {
           self._ready = true;
           setReady(true);
-          return import_react_native3.Linking.getInitialURL().then((url) => {
+          return import_react_native4.Linking.getInitialURL().then((url) => {
             if (url && typeof url === "string") {
               const urlObj = new URL(url);
               const storyId = urlObj.searchParams.get(STORYBOOK_STORY_ID_PARAM);
@@ -1503,14 +1573,14 @@ var View3 = class {
       }, [ready, update]);
       if (!ready) {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react_native3.View,
+          import_react_native4.View,
           {
             style: {
-              ...import_react_native3.StyleSheet.absoluteFillObject,
+              ...import_react_native4.StyleSheet.absoluteFillObject,
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.ActivityIndicator, { animating: true, size: "large" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.ActivityIndicator, { animating: true, size: "large" })
           }
         );
       }
@@ -1555,19 +1625,9 @@ var View3 = class {
   };
 };
 
-// src/Start.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-globalThis.FEATURES = {
-  measure: false,
-  outline: false,
-  interactions: false,
-  viewport: false,
-  highlight: false,
-  backgrounds: false
-};
-if (import_react_native5.Platform.OS === "web" && typeof globalThis.setImmediate === "undefined") {
-  require("setimmediate");
-}
+// src/prepareStories.ts
+var import_preview_api2 = require("storybook/internal/preview-api");
+var import_csf2 = require("storybook/internal/csf");
 function prepareStories({
   storyEntries,
   options,
@@ -1666,7 +1726,21 @@ function prepareStories({
   );
   return { index: { v: 5, entries: sorted }, importMap };
 }
-var getProjectAnnotations = (view, annotations) => async () => (0, import_preview_api2.composeConfigs)([
+
+// src/Start.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+globalThis.FEATURES = {
+  measure: false,
+  outline: false,
+  interactions: false,
+  viewport: false,
+  highlight: false,
+  backgrounds: false
+};
+if (import_react_native6.Platform.OS === "web" && typeof globalThis.setImmediate === "undefined") {
+  require("setimmediate");
+}
+var getProjectAnnotations = (view, annotations) => async () => (0, import_preview_api3.composeConfigs)([
   {
     renderToCanvas: (context) => {
       view._setStory(context.storyContext);
@@ -1688,7 +1762,7 @@ function start({
   storyEntries,
   options
 }) {
-  const composedAnnotations = (0, import_preview_api2.composeConfigs)(annotations);
+  const composedAnnotations = (0, import_preview_api3.composeConfigs)(annotations);
   const { index, importMap } = prepareStories({
     storyEntries,
     options,
@@ -1696,7 +1770,7 @@ function start({
   });
   const channel = new import_channels2.Channel({});
   import_manager_api3.addons.setChannel(channel);
-  import_preview_api2.addons.setChannel(channel);
+  import_preview_api3.addons.setChannel(channel);
   if (globalThis.FEATURES?.ondeviceBackgrounds) {
     const { registerBackgroundsAddon: registerBackgroundsAddon2 } = (init_register(), __toCommonJS(register_exports));
     registerBackgroundsAddon2();
@@ -1740,7 +1814,7 @@ function start({
       preview.selectionStore.selection = selection;
     }
   };
-  const getProjectAnnotationsInitial = async () => (0, import_preview_api2.composeConfigs)([
+  const getProjectAnnotationsInitial = async () => (0, import_preview_api3.composeConfigs)([
     {
       renderToCanvas: (context) => {
         view._setStory(context.storyContext);
@@ -1757,7 +1831,7 @@ function start({
     },
     ...annotations
   ]);
-  const preview = new import_preview_api2.PreviewWithSelection(
+  const preview = new import_preview_api3.PreviewWithSelection(
     async (importPath) => importMap[importPath],
     getProjectAnnotationsInitial,
     selectionStore,
@@ -1773,7 +1847,7 @@ function start({
   return view;
 }
 function updateView(viewInstance, annotations, normalizedStories, options) {
-  const composedAnnotations = (0, import_preview_api2.composeConfigs)(annotations);
+  const composedAnnotations = (0, import_preview_api3.composeConfigs)(annotations);
   const storySort = composedAnnotations.parameters?.options?.storySort;
   const { importMap, index } = prepareStories({
     storyEntries: normalizedStories,

package/dist/metro/withStorybook.js

@@ -856,7 +856,12 @@ function createChannelServer({
       ws.on("message", function message(data) {
         try {
           const json = JSON.parse(data.toString());
-          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+          const msg = JSON.stringify(json);
+          wss.clients.forEach((wsClient) => {
+            if (wsClient !== ws && wsClient.readyState === import_ws.WebSocket.OPEN) {
+              wsClient.send(msg);
+            }
+          });
         } catch (error) {
           console.error(error);
         }

package/dist/node.js

@@ -635,7 +635,12 @@ function createChannelServer({
       ws.on("message", function message(data) {
         try {
           const json = JSON.parse(data.toString());
-          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+          const msg = JSON.stringify(json);
+          wss.clients.forEach((wsClient) => {
+            if (wsClient !== ws && wsClient.readyState === import_ws.WebSocket.OPEN) {
+              wsClient.send(msg);
+            }
+          });
         } catch (error) {
           console.error(error);
         }

package/dist/preview.js

@@ -22,7 +22,12 @@ __export(preview_exports, {
   default: () => preview_default
 });
 module.exports = __toCommonJS(preview_exports);
+var import_react_native = require("react-native");
 var import_entry_preview_docs = require("@storybook/react/entry-preview-docs");
+if (import_react_native.Platform.OS === "web") {
+  globalThis.ProgressTransitionRegister = {};
+  globalThis.UpdatePropsManager = {};
+}
 var preview = {
   argTypesEnhancers: import_entry_preview_docs.argTypesEnhancers,
   parameters: {

package/dist/repack/withStorybook.js

@@ -854,7 +854,12 @@ function createChannelServer({
       ws.on("message", function message(data) {
         try {
           const json = JSON.parse(data.toString());
-          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+          const msg = JSON.stringify(json);
+          wss.clients.forEach((wsClient) => {
+            if (wsClient !== ws && wsClient.readyState === import_ws.WebSocket.OPEN) {
+              wsClient.send(msg);
+            }
+          });
         } catch (error) {
           console.error(error);
         }

package/jest-sucrase-transformer.js

@@ -0,0 +1,12 @@
+const { transform } = require('sucrase');
+
+module.exports = {
+  process(src, filename) {
+    const result = transform(src, {
+      transforms: ['imports'],
+      filePath: filename,
+      sourceMapOptions: { compiledFilename: filename },
+    });
+    return { code: result.code, map: result.sourceMap };
+  },
+};

package/jest.config.js

@@ -2,9 +2,15 @@
 const config = {
   preset: 'jest-expo',
   setupFiles: ['<rootDir>/setup.js'],
+  ...(process.env.JEST_CACHE_DIRECTORY && { cacheDirectory: process.env.JEST_CACHE_DIRECTORY }),
+
+  transform: {
+    'node_modules/(storybook|@storybook/react)/.+\\.[jt]sx?$':
+      '<rootDir>/jest-sucrase-transformer.js',
+  },
 
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|storybook/.*|@storybook/.*|uuid)',
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|jest-expo|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|storybook|@storybook/react|uuid|@react-native/.*)',
   ],
   testPathIgnorePatterns: ['/node_modules/', '/scripts/generate\\.test\\.js$'],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.3.0-next.1",
+  "version": "10.3.0-next.3",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -43,10 +43,13 @@
     "metro/**/*"
   ],
   "dependencies": {
-    "@storybook/react": "10.3.0-alpha.9",
-    "@storybook/react-native-theming": "^10.3.0-next.1",
-    "@storybook/react-native-ui": "^10.3.0-next.1",
-    "@storybook/react-native-ui-common": "^10.3.0-next.1",
+    "@storybook/mcp": "^0.4.1",
+    "@storybook/react": "10.3.0-alpha.12",
+    "@storybook/react-native-theming": "^10.3.0-next.3",
+    "@storybook/react-native-ui": "^10.3.0-next.3",
+    "@storybook/react-native-ui-common": "^10.3.0-next.3",
+    "@tmcp/adapter-valibot": "^0.1.4",
+    "@tmcp/transport-http": "^0.8.0",
     "commander": "^14.0.2",
     "dedent": "^1.7.0",
     "deepmerge": "^4.3.1",
@@ -54,24 +57,21 @@
     "glob": "^13.0.0",
     "react-native-url-polyfill": "^3.0.0",
     "setimmediate": "^1.0.5",
-    "ws": "^8.18.3",
-    "@storybook/mcp": "^0.4.1",
     "tmcp": "^1.16.0",
-    "@tmcp/adapter-valibot": "^0.1.4",
-    "@tmcp/transport-http": "^0.8.0",
-    "valibot": "^1.2.0"
+    "valibot": "^1.2.0",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~19.1.10",
+    "@types/react": "~19.2.14",
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^54.0.6",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.17",
+    "jest-expo": "~55.0.9",
     "jotai": "^2.17.1",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
-    "storybook": "10.3.0-alpha.9",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "storybook": "10.3.0-alpha.12",
     "test-renderer": "^0.14.0",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"

package/readme.md

@@ -448,12 +448,25 @@ Type: `boolean`, default: `false`
 
 Whether to use lite mode for Storybook. In lite mode, the default Storybook UI is mocked out so you don't need to install all its dependencies like react-native-reanimated. This is useful for reducing bundle size and dependencies. Use this when using @storybook/react-native-ui-lite instead of @storybook/react-native-ui.
 
+#### experimental_mcp
+
+Type: `boolean`, default: `false`
+
+Enables an experimental MCP (Model Context Protocol) endpoint at `/mcp` on the Storybook channel server. This can be used by AI tooling to query Storybook documentation and component/story metadata. Available from v10.3 onwards.
+
+You can enable MCP with or without websockets:
+
+- `experimental_mcp: true` starts the HTTP MCP endpoint
+- adding `websockets` also enables story selection tools over the same channel server
+
 ### websockets
 
-Type: `{ host: string?, port: number? }`, default: `undefined`
+Type: `'auto' | { host: string?, port: number? }`, default: `undefined`
 
 If specified, create a WebSocket server on startup. This allows you to sync up multiple devices to show the same story and [arg](https://storybook.js.org/docs/writing-stories/args) values connected to the story in the UI.
 
+Use `'auto'` to automatically detect your LAN IP and inject host/port into the generated `storybook.requires` file.
+
 ### websockets.host
 
 Type: `string`, default: `'localhost'`