@storybook/react-native 10.3.0-next.4 → 10.3.0-next.5

package/dist/metro/withStorybook.js

@@ -391,7 +391,10 @@ async function buildIndex({ configPath }) {
     const { meta, stories } = result;
     if (stories && stories.length > 0) {
       for (const story of stories) {
-        const id = (0, import_csf.toId)(meta.title, story.name);
+        const id = story.id ?? (0, import_csf.toId)(meta.title, story.name);
+        if (!id) {
+          throw new Error(`Failed to generate id for story ${story.name} in file ${fileName}`);
+        }
         index.entries[id] = {
           type: "story",
           subtype: "story",
@@ -569,7 +572,7 @@ var import_common3 = require("storybook/internal/common");
 var import_telemetry = require("storybook/internal/telemetry");
 
 // src/metro/channelServer.ts
-var import_ws = require("ws");
+var import_ws2 = require("ws");
 var import_node_http = require("http");
 init_buildIndex();
 
@@ -780,6 +783,168 @@ function createMcpHandler(configPath, wss) {
   return { handleMcpRequest, preInit };
 }
 
+// src/metro/selectStorySyncEndpoint.ts
+var import_ws = require("ws");
+var SELECT_STORY_SYNC_ROUTE = "/select-story-sync/";
+var SELECT_STORY_SYNC_TIMEOUT_MS = 1e3;
+var LAST_RENDERED_STORY_TIMEOUT_MS = 500;
+function getRenderedStoryId(event) {
+  if (!event || typeof event !== "object") {
+    return null;
+  }
+  const { type, args } = event;
+  if (type !== "storyRendered" || !Array.isArray(args) || args.length === 0) {
+    return null;
+  }
+  const [firstArg] = args;
+  if (typeof firstArg === "string") {
+    return firstArg;
+  }
+  if (firstArg && typeof firstArg === "object" && "storyId" in firstArg) {
+    const { storyId } = firstArg;
+    return typeof storyId === "string" ? storyId : null;
+  }
+  return null;
+}
+function parseStoryIdFromPath(pathname) {
+  const match = pathname.match(/^\/select-story-sync\/([^/]+)$/);
+  if (!match) {
+    return null;
+  }
+  try {
+    const storyId = decodeURIComponent(match[1]);
+    return storyId || null;
+  } catch {
+    return null;
+  }
+}
+function createSelectStorySyncEndpoint(wss) {
+  const pendingStorySelections = /* @__PURE__ */ new Map();
+  const lastRenderedStoryIdByClient = /* @__PURE__ */ new Map();
+  const waitForStoryRender = (storyId, timeoutMs) => {
+    let cancelSelection = () => {
+    };
+    let resolveWait = () => {
+    };
+    const promise = new Promise((resolve2, reject) => {
+      resolveWait = resolve2;
+      let selections = pendingStorySelections.get(storyId);
+      if (!selections) {
+        selections = /* @__PURE__ */ new Set();
+        pendingStorySelections.set(storyId, selections);
+      }
+      const cleanup = () => {
+        clearTimeout(selection.timeout);
+        selections.delete(selection);
+        if (selections.size === 0) {
+          pendingStorySelections.delete(storyId);
+        }
+      };
+      const selection = {
+        resolve: () => {
+          if (selection.settled) {
+            return;
+          }
+          selection.settled = true;
+          cleanup();
+          resolve2();
+        },
+        timeout: setTimeout(() => {
+          if (selection.settled) {
+            return;
+          }
+          selection.settled = true;
+          cleanup();
+          reject(new Error(`Story "${storyId}" did not render in time`));
+        }, timeoutMs),
+        settled: false
+      };
+      cancelSelection = () => {
+        if (selection.settled) {
+          return;
+        }
+        selection.settled = true;
+        cleanup();
+        resolveWait();
+      };
+      selections.add(selection);
+    });
+    return {
+      promise,
+      cancel: cancelSelection
+    };
+  };
+  const resolveStorySelection = (storyId) => {
+    const selections = pendingStorySelections.get(storyId);
+    if (!selections) {
+      return;
+    }
+    [...selections].forEach((selection) => selection.resolve());
+  };
+  const handleRequest = async (pathname, res) => {
+    const storyId = parseStoryIdFromPath(pathname);
+    if (!storyId) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: false, error: "Invalid story id" }));
+      return;
+    }
+    const waitForRender = waitForStoryRender(storyId, SELECT_STORY_SYNC_TIMEOUT_MS);
+    const message = JSON.stringify({
+      type: "setCurrentStory",
+      args: [{ viewMode: "story", storyId }]
+    });
+    wss.clients.forEach((wsClient) => {
+      if (wsClient.readyState === import_ws.WebSocket.OPEN) {
+        wsClient.send(message);
+      }
+    });
+    try {
+      const hasConnectedClientWithRenderedStory = [...wss.clients].some(
+        (client) => client.readyState === import_ws.WebSocket.OPEN && lastRenderedStoryIdByClient.get(client) === storyId
+      );
+      if (hasConnectedClientWithRenderedStory) {
+        const raceResult = await Promise.race([
+          waitForRender.promise.then(() => "rendered"),
+          new Promise((resolve2) => {
+            setTimeout(() => resolve2("alreadyRendered"), LAST_RENDERED_STORY_TIMEOUT_MS);
+          })
+        ]);
+        if (raceResult === "alreadyRendered") {
+          waitForRender.cancel();
+        }
+      } else {
+        await waitForRender.promise;
+      }
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: true, storyId }));
+    } catch (error) {
+      res.writeHead(408, { "Content-Type": "application/json" });
+      res.end(
+        JSON.stringify({
+          success: false,
+          storyId,
+          error: error instanceof Error ? error.message : String(error)
+        })
+      );
+    }
+  };
+  const onSocketMessage = (event, ws) => {
+    const renderedStoryId = getRenderedStoryId(event);
+    if (renderedStoryId) {
+      lastRenderedStoryIdByClient.set(ws, renderedStoryId);
+      resolveStorySelection(renderedStoryId);
+    }
+  };
+  const onSocketClose = (ws) => {
+    lastRenderedStoryIdByClient.delete(ws);
+  };
+  return {
+    handleRequest,
+    onSocketMessage,
+    onSocketClose
+  };
+}
+
 // src/metro/channelServer.ts
 function createChannelServer({
   port = 7007,
@@ -789,15 +954,17 @@ function createChannelServer({
   websockets = true
 }) {
   const httpServer = (0, import_node_http.createServer)();
-  const wss = websockets ? new import_ws.WebSocketServer({ server: httpServer }) : null;
+  const wss = websockets ? new import_ws2.WebSocketServer({ server: httpServer }) : null;
   const mcpServer = experimental_mcp ? createMcpHandler(configPath, wss ?? void 0) : null;
+  const selectStorySyncEndpoint = wss ? createSelectStorySyncEndpoint(wss) : null;
   httpServer.on("request", async (req, res) => {
+    const requestUrl = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
       return;
     }
-    if (req.method === "GET" && req.url === "/index.json") {
+    if (req.method === "GET" && requestUrl.pathname === "/index.json") {
       try {
         const index = await buildIndex({ configPath });
         res.writeHead(200, { "Content-Type": "application/json" });
@@ -809,7 +976,7 @@ function createChannelServer({
       }
       return;
     }
-    if (req.method === "POST" && req.url === "/send-event") {
+    if (req.method === "POST" && requestUrl.pathname === "/send-event") {
       if (!wss) {
         res.writeHead(503, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ success: false, error: "WebSockets are disabled" }));
@@ -833,7 +1000,16 @@ function createChannelServer({
       });
       return;
     }
-    if (mcpServer && req.url === "/mcp" && (req.method === "POST" || req.method === "GET")) {
+    if (req.method === "POST" && requestUrl.pathname.startsWith(SELECT_STORY_SYNC_ROUTE)) {
+      if (!selectStorySyncEndpoint) {
+        res.writeHead(503, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ success: false, error: "WebSockets are disabled" }));
+        return;
+      }
+      await selectStorySyncEndpoint.handleRequest(requestUrl.pathname, res);
+      return;
+    }
+    if (mcpServer && requestUrl.pathname === "/mcp" && (req.method === "POST" || req.method === "GET")) {
       await mcpServer.handleMcpRequest(req, res);
       return;
     }
@@ -843,22 +1019,24 @@ function createChannelServer({
   if (wss) {
     wss.on("error", () => {
     });
-    setInterval(function ping() {
+    const pingInterval = setInterval(function ping() {
       wss.clients.forEach(function each(client) {
-        if (client.readyState === import_ws.WebSocket.OPEN) {
+        if (client.readyState === import_ws2.WebSocket.OPEN) {
           client.send(JSON.stringify({ type: "ping", args: [] }));
         }
       });
     }, 1e4);
+    pingInterval.unref?.();
     wss.on("connection", function connection(ws) {
       console.log("WebSocket connection established");
       ws.on("error", console.error);
       ws.on("message", function message(data) {
         try {
           const json = JSON.parse(data.toString());
+          selectStorySyncEndpoint?.onSocketMessage(json, ws);
           const msg = JSON.stringify(json);
           wss.clients.forEach((wsClient) => {
-            if (wsClient !== ws && wsClient.readyState === import_ws.WebSocket.OPEN) {
+            if (wsClient !== ws && wsClient.readyState === import_ws2.WebSocket.OPEN) {
               wsClient.send(msg);
             }
           });
@@ -866,6 +1044,9 @@ function createChannelServer({
           console.error(error);
         }
       });
+      ws.on("close", () => {
+        selectStorySyncEndpoint?.onSocketClose(ws);
+      });
     });
   }
   httpServer.on("error", (error) => {

package/dist/node.d.ts

@@ -33,6 +33,7 @@ interface ChannelServerOptions {
  * The server provides both WebSocket and REST endpoints:
  * - WebSocket: broadcasts all received messages to all connected clients
  * - POST /send-event: sends an event to all WebSocket clients
+ * - POST /select-story-sync/{storyId}: sets the current story and waits for a storyRendered event
  * - GET /index.json: returns the story index built from story files
  * - POST /mcp: MCP endpoint for AI agent integration (when experimental_mcp option is enabled)
  *

package/dist/node.js

@@ -173,7 +173,10 @@ async function buildIndex({ configPath }) {
     const { meta, stories } = result;
     if (stories && stories.length > 0) {
       for (const story of stories) {
-        const id = (0, import_csf.toId)(meta.title, story.name);
+        const id = story.id ?? (0, import_csf.toId)(meta.title, story.name);
+        if (!id) {
+          throw new Error(`Failed to generate id for story ${story.name} in file ${fileName}`);
+        }
         index.entries[id] = {
           type: "story",
           subtype: "story",
@@ -348,7 +351,7 @@ __export(node_exports, {
 module.exports = __toCommonJS(node_exports);
 
 // src/metro/channelServer.ts
-var import_ws = require("ws");
+var import_ws2 = require("ws");
 var import_node_http = require("http");
 init_buildIndex();
 
@@ -559,6 +562,168 @@ function createMcpHandler(configPath, wss) {
   return { handleMcpRequest, preInit };
 }
 
+// src/metro/selectStorySyncEndpoint.ts
+var import_ws = require("ws");
+var SELECT_STORY_SYNC_ROUTE = "/select-story-sync/";
+var SELECT_STORY_SYNC_TIMEOUT_MS = 1e3;
+var LAST_RENDERED_STORY_TIMEOUT_MS = 500;
+function getRenderedStoryId(event) {
+  if (!event || typeof event !== "object") {
+    return null;
+  }
+  const { type, args } = event;
+  if (type !== "storyRendered" || !Array.isArray(args) || args.length === 0) {
+    return null;
+  }
+  const [firstArg] = args;
+  if (typeof firstArg === "string") {
+    return firstArg;
+  }
+  if (firstArg && typeof firstArg === "object" && "storyId" in firstArg) {
+    const { storyId } = firstArg;
+    return typeof storyId === "string" ? storyId : null;
+  }
+  return null;
+}
+function parseStoryIdFromPath(pathname) {
+  const match = pathname.match(/^\/select-story-sync\/([^/]+)$/);
+  if (!match) {
+    return null;
+  }
+  try {
+    const storyId = decodeURIComponent(match[1]);
+    return storyId || null;
+  } catch {
+    return null;
+  }
+}
+function createSelectStorySyncEndpoint(wss) {
+  const pendingStorySelections = /* @__PURE__ */ new Map();
+  const lastRenderedStoryIdByClient = /* @__PURE__ */ new Map();
+  const waitForStoryRender = (storyId, timeoutMs) => {
+    let cancelSelection = () => {
+    };
+    let resolveWait = () => {
+    };
+    const promise = new Promise((resolve, reject) => {
+      resolveWait = resolve;
+      let selections = pendingStorySelections.get(storyId);
+      if (!selections) {
+        selections = /* @__PURE__ */ new Set();
+        pendingStorySelections.set(storyId, selections);
+      }
+      const cleanup = () => {
+        clearTimeout(selection.timeout);
+        selections.delete(selection);
+        if (selections.size === 0) {
+          pendingStorySelections.delete(storyId);
+        }
+      };
+      const selection = {
+        resolve: () => {
+          if (selection.settled) {
+            return;
+          }
+          selection.settled = true;
+          cleanup();
+          resolve();
+        },
+        timeout: setTimeout(() => {
+          if (selection.settled) {
+            return;
+          }
+          selection.settled = true;
+          cleanup();
+          reject(new Error(`Story "${storyId}" did not render in time`));
+        }, timeoutMs),
+        settled: false
+      };
+      cancelSelection = () => {
+        if (selection.settled) {
+          return;
+        }
+        selection.settled = true;
+        cleanup();
+        resolveWait();
+      };
+      selections.add(selection);
+    });
+    return {
+      promise,
+      cancel: cancelSelection
+    };
+  };
+  const resolveStorySelection = (storyId) => {
+    const selections = pendingStorySelections.get(storyId);
+    if (!selections) {
+      return;
+    }
+    [...selections].forEach((selection) => selection.resolve());
+  };
+  const handleRequest = async (pathname, res) => {
+    const storyId = parseStoryIdFromPath(pathname);
+    if (!storyId) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: false, error: "Invalid story id" }));
+      return;
+    }
+    const waitForRender = waitForStoryRender(storyId, SELECT_STORY_SYNC_TIMEOUT_MS);
+    const message = JSON.stringify({
+      type: "setCurrentStory",
+      args: [{ viewMode: "story", storyId }]
+    });
+    wss.clients.forEach((wsClient) => {
+      if (wsClient.readyState === import_ws.WebSocket.OPEN) {
+        wsClient.send(message);
+      }
+    });
+    try {
+      const hasConnectedClientWithRenderedStory = [...wss.clients].some(
+        (client) => client.readyState === import_ws.WebSocket.OPEN && lastRenderedStoryIdByClient.get(client) === storyId
+      );
+      if (hasConnectedClientWithRenderedStory) {
+        const raceResult = await Promise.race([
+          waitForRender.promise.then(() => "rendered"),
+          new Promise((resolve) => {
+            setTimeout(() => resolve("alreadyRendered"), LAST_RENDERED_STORY_TIMEOUT_MS);
+          })
+        ]);
+        if (raceResult === "alreadyRendered") {
+          waitForRender.cancel();
+        }
+      } else {
+        await waitForRender.promise;
+      }
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: true, storyId }));
+    } catch (error) {
+      res.writeHead(408, { "Content-Type": "application/json" });
+      res.end(
+        JSON.stringify({
+          success: false,
+          storyId,
+          error: error instanceof Error ? error.message : String(error)
+        })
+      );
+    }
+  };
+  const onSocketMessage = (event, ws) => {
+    const renderedStoryId = getRenderedStoryId(event);
+    if (renderedStoryId) {
+      lastRenderedStoryIdByClient.set(ws, renderedStoryId);
+      resolveStorySelection(renderedStoryId);
+    }
+  };
+  const onSocketClose = (ws) => {
+    lastRenderedStoryIdByClient.delete(ws);
+  };
+  return {
+    handleRequest,
+    onSocketMessage,
+    onSocketClose
+  };
+}
+
 // src/metro/channelServer.ts
 function createChannelServer({
   port = 7007,
@@ -568,15 +733,17 @@ function createChannelServer({
   websockets = true
 }) {
   const httpServer = (0, import_node_http.createServer)();
-  const wss = websockets ? new import_ws.WebSocketServer({ server: httpServer }) : null;
+  const wss = websockets ? new import_ws2.WebSocketServer({ server: httpServer }) : null;
   const mcpServer = experimental_mcp ? createMcpHandler(configPath, wss ?? void 0) : null;
+  const selectStorySyncEndpoint = wss ? createSelectStorySyncEndpoint(wss) : null;
   httpServer.on("request", async (req, res) => {
+    const requestUrl = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
       return;
     }
-    if (req.method === "GET" && req.url === "/index.json") {
+    if (req.method === "GET" && requestUrl.pathname === "/index.json") {
       try {
         const index = await buildIndex({ configPath });
         res.writeHead(200, { "Content-Type": "application/json" });
@@ -588,7 +755,7 @@ function createChannelServer({
       }
       return;
     }
-    if (req.method === "POST" && req.url === "/send-event") {
+    if (req.method === "POST" && requestUrl.pathname === "/send-event") {
       if (!wss) {
         res.writeHead(503, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ success: false, error: "WebSockets are disabled" }));
@@ -612,7 +779,16 @@ function createChannelServer({
       });
       return;
     }
-    if (mcpServer && req.url === "/mcp" && (req.method === "POST" || req.method === "GET")) {
+    if (req.method === "POST" && requestUrl.pathname.startsWith(SELECT_STORY_SYNC_ROUTE)) {
+      if (!selectStorySyncEndpoint) {
+        res.writeHead(503, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ success: false, error: "WebSockets are disabled" }));
+        return;
+      }
+      await selectStorySyncEndpoint.handleRequest(requestUrl.pathname, res);
+      return;
+    }
+    if (mcpServer && requestUrl.pathname === "/mcp" && (req.method === "POST" || req.method === "GET")) {
       await mcpServer.handleMcpRequest(req, res);
       return;
     }
@@ -622,22 +798,24 @@ function createChannelServer({
   if (wss) {
     wss.on("error", () => {
     });
-    setInterval(function ping() {
+    const pingInterval = setInterval(function ping() {
       wss.clients.forEach(function each(client) {
-        if (client.readyState === import_ws.WebSocket.OPEN) {
+        if (client.readyState === import_ws2.WebSocket.OPEN) {
           client.send(JSON.stringify({ type: "ping", args: [] }));
         }
       });
     }, 1e4);
+    pingInterval.unref?.();
     wss.on("connection", function connection(ws) {
       console.log("WebSocket connection established");
       ws.on("error", console.error);
       ws.on("message", function message(data) {
         try {
           const json = JSON.parse(data.toString());
+          selectStorySyncEndpoint?.onSocketMessage(json, ws);
           const msg = JSON.stringify(json);
           wss.clients.forEach((wsClient) => {
-            if (wsClient !== ws && wsClient.readyState === import_ws.WebSocket.OPEN) {
+            if (wsClient !== ws && wsClient.readyState === import_ws2.WebSocket.OPEN) {
               wsClient.send(msg);
             }
           });
@@ -645,6 +823,9 @@ function createChannelServer({
           console.error(error);
         }
       });
+      ws.on("close", () => {
+        selectStorySyncEndpoint?.onSocketClose(ws);
+      });
     });
   }
   httpServer.on("error", (error) => {

package/dist/repack/withStorybook.js

@@ -391,7 +391,10 @@ async function buildIndex({ configPath }) {
     const { meta, stories } = result;
     if (stories && stories.length > 0) {
       for (const story of stories) {
-        const id = (0, import_csf.toId)(meta.title, story.name);
+        const id = story.id ?? (0, import_csf.toId)(meta.title, story.name);
+        if (!id) {
+          throw new Error(`Failed to generate id for story ${story.name} in file ${fileName}`);
+        }
         index.entries[id] = {
           type: "story",
           subtype: "story",
@@ -567,7 +570,7 @@ var path2 = __toESM(require("path"));
 var import_generate = __toESM(require_generate());
 
 // src/metro/channelServer.ts
-var import_ws = require("ws");
+var import_ws2 = require("ws");
 var import_node_http = require("http");
 init_buildIndex();
 
@@ -778,6 +781,168 @@ function createMcpHandler(configPath, wss) {
   return { handleMcpRequest, preInit };
 }
 
+// src/metro/selectStorySyncEndpoint.ts
+var import_ws = require("ws");
+var SELECT_STORY_SYNC_ROUTE = "/select-story-sync/";
+var SELECT_STORY_SYNC_TIMEOUT_MS = 1e3;
+var LAST_RENDERED_STORY_TIMEOUT_MS = 500;
+function getRenderedStoryId(event) {
+  if (!event || typeof event !== "object") {
+    return null;
+  }
+  const { type, args } = event;
+  if (type !== "storyRendered" || !Array.isArray(args) || args.length === 0) {
+    return null;
+  }
+  const [firstArg] = args;
+  if (typeof firstArg === "string") {
+    return firstArg;
+  }
+  if (firstArg && typeof firstArg === "object" && "storyId" in firstArg) {
+    const { storyId } = firstArg;
+    return typeof storyId === "string" ? storyId : null;
+  }
+  return null;
+}
+function parseStoryIdFromPath(pathname) {
+  const match = pathname.match(/^\/select-story-sync\/([^/]+)$/);
+  if (!match) {
+    return null;
+  }
+  try {
+    const storyId = decodeURIComponent(match[1]);
+    return storyId || null;
+  } catch {
+    return null;
+  }
+}
+function createSelectStorySyncEndpoint(wss) {
+  const pendingStorySelections = /* @__PURE__ */ new Map();
+  const lastRenderedStoryIdByClient = /* @__PURE__ */ new Map();
+  const waitForStoryRender = (storyId, timeoutMs) => {
+    let cancelSelection = () => {
+    };
+    let resolveWait = () => {
+    };
+    const promise = new Promise((resolve2, reject) => {
+      resolveWait = resolve2;
+      let selections = pendingStorySelections.get(storyId);
+      if (!selections) {
+        selections = /* @__PURE__ */ new Set();
+        pendingStorySelections.set(storyId, selections);
+      }
+      const cleanup = () => {
+        clearTimeout(selection.timeout);
+        selections.delete(selection);
+        if (selections.size === 0) {
+          pendingStorySelections.delete(storyId);
+        }
+      };
+      const selection = {
+        resolve: () => {
+          if (selection.settled) {
+            return;
+          }
+          selection.settled = true;
+          cleanup();
+          resolve2();
+        },
+        timeout: setTimeout(() => {
+          if (selection.settled) {
+            return;
+          }
+          selection.settled = true;
+          cleanup();
+          reject(new Error(`Story "${storyId}" did not render in time`));
+        }, timeoutMs),
+        settled: false
+      };
+      cancelSelection = () => {
+        if (selection.settled) {
+          return;
+        }
+        selection.settled = true;
+        cleanup();
+        resolveWait();
+      };
+      selections.add(selection);
+    });
+    return {
+      promise,
+      cancel: cancelSelection
+    };
+  };
+  const resolveStorySelection = (storyId) => {
+    const selections = pendingStorySelections.get(storyId);
+    if (!selections) {
+      return;
+    }
+    [...selections].forEach((selection) => selection.resolve());
+  };
+  const handleRequest = async (pathname, res) => {
+    const storyId = parseStoryIdFromPath(pathname);
+    if (!storyId) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: false, error: "Invalid story id" }));
+      return;
+    }
+    const waitForRender = waitForStoryRender(storyId, SELECT_STORY_SYNC_TIMEOUT_MS);
+    const message = JSON.stringify({
+      type: "setCurrentStory",
+      args: [{ viewMode: "story", storyId }]
+    });
+    wss.clients.forEach((wsClient) => {
+      if (wsClient.readyState === import_ws.WebSocket.OPEN) {
+        wsClient.send(message);
+      }
+    });
+    try {
+      const hasConnectedClientWithRenderedStory = [...wss.clients].some(
+        (client) => client.readyState === import_ws.WebSocket.OPEN && lastRenderedStoryIdByClient.get(client) === storyId
+      );
+      if (hasConnectedClientWithRenderedStory) {
+        const raceResult = await Promise.race([
+          waitForRender.promise.then(() => "rendered"),
+          new Promise((resolve2) => {
+            setTimeout(() => resolve2("alreadyRendered"), LAST_RENDERED_STORY_TIMEOUT_MS);
+          })
+        ]);
+        if (raceResult === "alreadyRendered") {
+          waitForRender.cancel();
+        }
+      } else {
+        await waitForRender.promise;
+      }
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: true, storyId }));
+    } catch (error) {
+      res.writeHead(408, { "Content-Type": "application/json" });
+      res.end(
+        JSON.stringify({
+          success: false,
+          storyId,
+          error: error instanceof Error ? error.message : String(error)
+        })
+      );
+    }
+  };
+  const onSocketMessage = (event, ws) => {
+    const renderedStoryId = getRenderedStoryId(event);
+    if (renderedStoryId) {
+      lastRenderedStoryIdByClient.set(ws, renderedStoryId);
+      resolveStorySelection(renderedStoryId);
+    }
+  };
+  const onSocketClose = (ws) => {
+    lastRenderedStoryIdByClient.delete(ws);
+  };
+  return {
+    handleRequest,
+    onSocketMessage,
+    onSocketClose
+  };
+}
+
 // src/metro/channelServer.ts
 function createChannelServer({
   port = 7007,
@@ -787,15 +952,17 @@ function createChannelServer({
   websockets = true
 }) {
   const httpServer = (0, import_node_http.createServer)();
-  const wss = websockets ? new import_ws.WebSocketServer({ server: httpServer }) : null;
+  const wss = websockets ? new import_ws2.WebSocketServer({ server: httpServer }) : null;
   const mcpServer = experimental_mcp ? createMcpHandler(configPath, wss ?? void 0) : null;
+  const selectStorySyncEndpoint = wss ? createSelectStorySyncEndpoint(wss) : null;
   httpServer.on("request", async (req, res) => {
+    const requestUrl = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
       return;
     }
-    if (req.method === "GET" && req.url === "/index.json") {
+    if (req.method === "GET" && requestUrl.pathname === "/index.json") {
       try {
         const index = await buildIndex({ configPath });
         res.writeHead(200, { "Content-Type": "application/json" });
@@ -807,7 +974,7 @@ function createChannelServer({
       }
       return;
     }
-    if (req.method === "POST" && req.url === "/send-event") {
+    if (req.method === "POST" && requestUrl.pathname === "/send-event") {
       if (!wss) {
         res.writeHead(503, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ success: false, error: "WebSockets are disabled" }));
@@ -831,7 +998,16 @@ function createChannelServer({
       });
       return;
     }
-    if (mcpServer && req.url === "/mcp" && (req.method === "POST" || req.method === "GET")) {
+    if (req.method === "POST" && requestUrl.pathname.startsWith(SELECT_STORY_SYNC_ROUTE)) {
+      if (!selectStorySyncEndpoint) {
+        res.writeHead(503, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ success: false, error: "WebSockets are disabled" }));
+        return;
+      }
+      await selectStorySyncEndpoint.handleRequest(requestUrl.pathname, res);
+      return;
+    }
+    if (mcpServer && requestUrl.pathname === "/mcp" && (req.method === "POST" || req.method === "GET")) {
       await mcpServer.handleMcpRequest(req, res);
       return;
     }
@@ -841,22 +1017,24 @@ function createChannelServer({
   if (wss) {
     wss.on("error", () => {
     });
-    setInterval(function ping() {
+    const pingInterval = setInterval(function ping() {
       wss.clients.forEach(function each(client) {
-        if (client.readyState === import_ws.WebSocket.OPEN) {
+        if (client.readyState === import_ws2.WebSocket.OPEN) {
           client.send(JSON.stringify({ type: "ping", args: [] }));
         }
       });
     }, 1e4);
+    pingInterval.unref?.();
     wss.on("connection", function connection(ws) {
       console.log("WebSocket connection established");
       ws.on("error", console.error);
       ws.on("message", function message(data) {
         try {
           const json = JSON.parse(data.toString());
+          selectStorySyncEndpoint?.onSocketMessage(json, ws);
           const msg = JSON.stringify(json);
           wss.clients.forEach((wsClient) => {
-            if (wsClient !== ws && wsClient.readyState === import_ws.WebSocket.OPEN) {
+            if (wsClient !== ws && wsClient.readyState === import_ws2.WebSocket.OPEN) {
               wsClient.send(msg);
             }
           });
@@ -864,6 +1042,9 @@ function createChannelServer({
           console.error(error);
         }
       });
+      ws.on("close", () => {
+        selectStorySyncEndpoint?.onSocketClose(ws);
+      });
     });
   }
   httpServer.on("error", (error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.3.0-next.4",
+  "version": "10.3.0-next.5",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -44,10 +44,10 @@
   ],
   "dependencies": {
     "@storybook/mcp": "^0.4.1",
-    "@storybook/react": "10.3.0-alpha.12",
-    "@storybook/react-native-theming": "^10.3.0-next.4",
-    "@storybook/react-native-ui": "^10.3.0-next.4",
-    "@storybook/react-native-ui-common": "^10.3.0-next.4",
+    "@storybook/react": "10.3.0-alpha.14",
+    "@storybook/react-native-theming": "^10.3.0-next.5",
+    "@storybook/react-native-ui": "^10.3.0-next.5",
+    "@storybook/react-native-ui-common": "^10.3.0-next.5",
     "@tmcp/adapter-valibot": "^0.1.4",
     "@tmcp/transport-http": "^0.8.0",
     "commander": "^14.0.2",
@@ -71,7 +71,7 @@
     "jotai": "^2.17.1",
     "react": "19.2.0",
     "react-native": "0.83.2",
-    "storybook": "10.3.0-alpha.12",
+    "storybook": "10.3.0-alpha.14",
     "test-renderer": "^0.14.0",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"

package/readme.md

@@ -574,6 +574,7 @@ This repo includes agent skills for setting up and working with Storybook for Re
 
 - **writing-react-native-storybook-stories** - Guides Claude on writing stories using Component Story Format (CSF), including controls, addons, decorators, parameters, and portable stories
 - **setup-react-native-storybook** - Guides Claude through adding Storybook to your project, covering Expo, Expo Router, React Native CLI, and Re.Pack setups
+- **upgrading-react-native-storybook** - Guides Claude through incremental React Native Storybook upgrades, split by supported migration paths from 5.3.x through 10.x, including converting remaining `storiesOf` stories to CSF during the 6.5.x to 7.6.x migration
 
 ### Installation