@storybook/react-native 10.3.0-next.6 → 10.3.1

package/dist/index-6iAzVvXp.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Options for configuring WebSockets used for syncing storybook instances or sending events to storybook.
+ */
+interface WebsocketsOptions {
+    /**
+     * The port WebSocket server will listen on. Defaults to 7007.
+     */
+    port?: number;
+    /**
+     * The host WebSocket server will bind to. Defaults to 'localhost'.
+     */
+    host?: string;
+    /**
+     * Whether to use WSS/HTTPS for the channel server.
+     */
+    secured?: boolean;
+    /**
+     * TLS private key used when `secured` is true.
+     */
+    key?: string | Buffer;
+    /**
+     * TLS certificate used when `secured` is true.
+     */
+    cert?: string | Buffer;
+    /**
+     * Optional certificate authority chain used when `secured` is true.
+     */
+    ca?: string | Buffer | Array<string | Buffer>;
+    /**
+     * Optional TLS passphrase used when `secured` is true.
+     */
+    passphrase?: string;
+}
+
+export type { WebsocketsOptions as W };

package/dist/index.d.ts

@@ -78,6 +78,7 @@ declare class View {
     }>;
     _getHost: (params?: Partial<Params>) => any;
     __getPort: (params?: Partial<Params>) => any;
+    _isSecureConnection: (params?: Partial<Params>) => any;
     _getServerChannel: (params?: Partial<Params>) => Channel;
     createPreparedStoryMapping: () => Promise<void>;
     getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -471,6 +471,7 @@ var BUILDING_BLOCK_recomputeInvalidatedAtoms = (store2) => {
       }
     }
     if (hasChangedDeps) {
+      invalidatedAtoms.set(a, aState.n);
       readAtomState(store2, a);
       mountDependencies(store2, a);
     }
@@ -494,9 +495,19 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
   const mountDependencies = buildingBlocks[17];
   const setAtomStateValueOrPromise = buildingBlocks[20];
   const registerAbortHandler = buildingBlocks[26];
+  const storeEpochHolder = buildingBlocks[28];
   const atomState = ensureAtomState(store2, atom2);
+  const storeEpochNumber = storeEpochHolder[0];
   if (isAtomStateInitialized(atomState)) {
-    if (mountedMap.has(atom2) && invalidatedAtoms.get(atom2) !== atomState.n) {
+    if (
+      // If the atom is mounted, we can use cached atom state,
+      // because it should have been updated by dependencies.
+      // We can't use the cache if the atom is invalidated.
+      mountedMap.has(atom2) && invalidatedAtoms.get(atom2) !== atomState.n || // If atom is not mounted, we can use cached atom state,
+      // only if store hasn't been mutated.
+      atomState.m === storeEpochNumber
+    ) {
+      atomState.m = storeEpochNumber;
       return atomState;
     }
     let hasChangedDeps = false;
@@ -507,6 +518,7 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
       }
     }
     if (!hasChangedDeps) {
+      atomState.m = storeEpochNumber;
       return atomState;
     }
   }
@@ -597,6 +609,7 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
     }
   };
   const prevEpochNumber = atomState.n;
+  const prevInvalidated = invalidatedAtoms.get(atom2) === prevEpochNumber;
   try {
     if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
       storeMutationSet.delete(store2);
@@ -619,15 +632,17 @@ var BUILDING_BLOCK_readAtomState = (store2, atom2) => {
       pruneDependencies();
     }
     (_a = storeHooks.r) == null ? void 0 : _a.call(storeHooks, atom2);
+    atomState.m = storeEpochNumber;
     return atomState;
   } catch (error) {
     delete atomState.v;
     atomState.e = error;
     ++atomState.n;
+    atomState.m = storeEpochNumber;
     return atomState;
   } finally {
     isSync = false;
-    if (prevEpochNumber !== atomState.n && invalidatedAtoms.get(atom2) === prevEpochNumber) {
+    if (atomState.n !== prevEpochNumber && prevInvalidated) {
       invalidatedAtoms.set(atom2, atomState.n);
       changedAtoms.add(atom2);
       (_b = storeHooks.c) == null ? void 0 : _b.call(storeHooks, atom2);
@@ -665,6 +680,7 @@ var BUILDING_BLOCK_writeAtomState = (store2, atom2, ...args) => {
   const writeAtomState = buildingBlocks[16];
   const mountDependencies = buildingBlocks[17];
   const setAtomStateValueOrPromise = buildingBlocks[20];
+  const storeEpochHolder = buildingBlocks[28];
   let isSync = true;
   const getter = (a) => returnAtomValue(readAtomState(store2, a));
   const setter = (a, ...args2) => {
@@ -683,6 +699,7 @@ var BUILDING_BLOCK_writeAtomState = (store2, atom2, ...args) => {
         setAtomStateValueOrPromise(store2, a, v);
         mountDependencies(store2, a);
         if (prevEpochNumber !== aState.n) {
+          ++storeEpochHolder[0];
           changedAtoms.add(a);
           invalidateDependents(store2, a);
           (_a = storeHooks.c) == null ? void 0 : _a.call(storeHooks, a);
@@ -867,14 +884,18 @@ var BUILDING_BLOCK_storeGet = (store2, atom2) => {
 };
 var BUILDING_BLOCK_storeSet = (store2, atom2, ...args) => {
   const buildingBlocks = getInternalBuildingBlocks(store2);
+  const changedAtoms = buildingBlocks[3];
   const flushCallbacks = buildingBlocks[12];
   const recomputeInvalidatedAtoms = buildingBlocks[13];
   const writeAtomState = buildingBlocks[16];
+  const prevChangedAtomsSize = changedAtoms.size;
   try {
     return writeAtomState(store2, atom2, ...args);
   } finally {
-    recomputeInvalidatedAtoms(store2);
-    flushCallbacks(store2);
+    if (changedAtoms.size !== prevChangedAtomsSize) {
+      recomputeInvalidatedAtoms(store2);
+      flushCallbacks(store2);
+    }
   }
 };
 var BUILDING_BLOCK_storeSub = (store2, atom2, listener) => {
@@ -983,7 +1004,9 @@ function buildStore(...buildArgs) {
     /* @__PURE__ */ new WeakMap(),
     // abortHandlersMap
     BUILDING_BLOCK_registerAbortHandler,
-    BUILDING_BLOCK_abortPromise
+    BUILDING_BLOCK_abortPromise,
+    // store epoch
+    [0]
   ].map((fn, i) => buildArgs[i] || fn);
   buildingBlockMap.set(store2, Object.freeze(buildingBlocks));
   return store2;
@@ -1155,6 +1178,28 @@ function useAtomValue(atom2, options) {
         }
       }
       if (typeof delay === "number") {
+        console.warn(`[DEPRECATED] delay option is deprecated and will be removed in v3.
+
+Migration guide:
+
+Create a custom hook like the following.
+
+function useAtomValueWithDelay<Value>(
+  atom: Atom<Value>,
+  options: { delay: number },
+): Value {
+  const { delay } = options
+  const store = useStore(options)
+  const [value, setValue] = useState(() => store.get(atom))
+  useEffect(() => {
+    const unsub = store.sub(atom, () => {
+      setTimeout(() => setValue(store.get(atom)), delay)
+    })
+    return unsub
+  }, [store, atom, delay])
+  return value
+}
+`);
         setTimeout(rerender, delay);
         return;
       }
@@ -1389,11 +1434,17 @@ var View3 = class {
     }
     return 7007;
   };
+  _isSecureConnection = (params = {}) => {
+    if (typeof params.secured === "boolean") {
+      return params.secured;
+    }
+    return globalThis.STORYBOOK_WEBSOCKET?.secured ?? false;
+  };
   _getServerChannel = (params = {}) => {
     const host = this._getHost(params);
     const port = `:${this.__getPort(params)}`;
     const query = params.query || "";
-    const websocketType = params.secured ? "wss" : "ws";
+    const websocketType = this._isSecureConnection(params) ? "wss" : "ws";
     const url = `${websocketType}://${host}${port}/${query}`;
     const channel = new import_channels.Channel({
       async: true,

package/dist/metro/withStorybook.d.ts

@@ -1,18 +1,6 @@
 import { MetroConfig } from 'metro-config';
+import { W as WebsocketsOptions } from '../index-6iAzVvXp.js';
 
-/**
- * Options for configuring WebSockets used for syncing storybook instances or sending events to storybook.
- */
-interface WebsocketsOptions {
-    /**
-     * The port WebSocket server will listen on. Defaults to 7007.
-     */
-    port?: number;
-    /**
-     * The host WebSocket server will bind to. Defaults to 'localhost'.
-     */
-    host?: string;
-}
 /**
  * Options for configuring Storybook with React Native.
  */
@@ -64,6 +52,9 @@ interface WithStorybookOptions {
  *                            When provided, creates a WebSocket server for real-time communication.
  * @param options.websockets.port - The port WebSocket server will listen on. Defaults to 7007.
  * @param options.websockets.host - The host WebSocket server will bind to. Defaults to 'localhost'.
+ * @param options.websockets.secured - Whether to use WSS/HTTPS for the channel server.
+ * @param options.websockets.key - TLS private key used when `secured` is true.
+ * @param options.websockets.cert - TLS certificate used when `secured` is true.
  * @param options.useJs - Whether to use JavaScript files for Storybook configuration instead of TypeScript.
  *                       When true, generates storybook.requires.js instead of storybook.requires.ts.
  *                       Defaults to false.

package/dist/metro/withStorybook.js

@@ -201,7 +201,8 @@ var require_generate = __commonJS({
       useJs = false,
       docTools = true,
       host = void 0,
-      port = 7007
+      port = void 0,
+      secured = false
     }) {
       const channelHost = host === "auto" ? getLocalIPAddress() : host;
       const storybookRequiresLocation = path3.resolve(
@@ -284,11 +285,22 @@ var require_generate = __commonJS({
       const annotations = `[
   ${enhancers.join(",\n  ")}
 ]`;
+      const hasWebsocketConfig = host !== void 0 || port !== void 0 || secured;
+      const websocketAssignmentLines = [];
+      if (channelHost) {
+        websocketAssignmentLines.push(`host: '${channelHost}',`);
+      }
+      if (hasWebsocketConfig) {
+        websocketAssignmentLines.push(`port: ${port ?? 7007},`);
+        websocketAssignmentLines.push(`secured: ${Boolean(secured)},`);
+      }
       const globalTypes = `
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
-  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
   var FEATURES: Features;
 }
 `;
@@ -306,7 +318,9 @@ ${useJs ? "" : globalTypes}
 const annotations = ${annotations};
 
 globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ""}
+${hasWebsocketConfig ? `globalThis.STORYBOOK_WEBSOCKET = {
+  ${websocketAssignmentLines.join("\n  ")}
+};` : ""}
 
 module?.hot?.accept?.();
 ${featuresAssignment ? `
@@ -574,6 +588,7 @@ var import_telemetry = require("storybook/internal/telemetry");
 // src/metro/channelServer.ts
 var import_ws2 = require("ws");
 var import_node_http = require("http");
+var import_node_https = require("https");
 init_buildIndex();
 
 // src/metro/mcpServer.ts
@@ -632,11 +647,7 @@ function createMcpHandler(configPath, wss) {
           { McpServer },
           { ValibotJsonSchemaAdapter },
           { HttpTransport },
-          {
-            addListAllDocumentationTool,
-            addGetDocumentationTool,
-            addGetComponentStoryDocumentationTool
-          },
+          { addListAllDocumentationTool, addGetDocumentationTool, addGetStoryDocumentationTool },
           { storyInstructions: storyInstructions2 },
           { buildIndex: buildIndex2 },
           valibot,
@@ -675,7 +686,7 @@ function createMcpHandler(configPath, wss) {
         ).withContext();
         addListAllDocumentationTool(server);
         addGetDocumentationTool(server);
-        addGetComponentStoryDocumentationTool(server);
+        addGetStoryDocumentationTool(server);
         server.tool(
           {
             name: "get-storybook-story-instructions",
@@ -951,14 +962,20 @@ function createChannelServer({
   host = void 0,
   configPath,
   experimental_mcp = false,
-  websockets = true
+  websockets = true,
+  secured = false,
+  ssl
 }) {
-  const httpServer = (0, import_node_http.createServer)();
+  if (secured && (!ssl?.key || !ssl?.cert)) {
+    throw new Error("[Storybook] Secure channel server requires both `ssl.key` and `ssl.cert`.");
+  }
+  const httpServer = secured ? (0, import_node_https.createServer)(ssl) : (0, import_node_http.createServer)();
   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"}`);
+    const protocol = "encrypted" in req.socket && req.socket.encrypted ? "https" : "http";
+    const requestUrl = new URL(req.url ?? "/", `${protocol}://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
@@ -1059,7 +1076,7 @@ function createChannelServer({
     }
   });
   httpServer.listen(port, host, () => {
-    const protocol = wss ? "WebSocket" : "HTTP";
+    const protocol = wss ? secured ? "WSS" : "WebSocket" : secured ? "HTTPS" : "HTTP";
     console.log(`${protocol} server listening on ${host ?? "localhost"}:${port}`);
   });
   mcpServer?.preInit();
@@ -1125,12 +1142,20 @@ function withStorybook(config, options = {
   if (websockets || experimental_mcp) {
     const port = websockets === "auto" ? 7007 : websockets?.port ?? 7007;
     const host = websockets === "auto" ? "auto" : websockets?.host;
+    const secured = Boolean(websockets && websockets !== "auto" && websockets.secured);
     createChannelServer({
       port,
       host: host === "auto" ? void 0 : host,
       configPath,
       experimental_mcp,
-      websockets: Boolean(websockets)
+      websockets: Boolean(websockets),
+      secured,
+      ssl: websockets && websockets !== "auto" ? {
+        key: websockets.key,
+        cert: websockets.cert,
+        ca: websockets.ca,
+        passphrase: websockets.passphrase
+      } : void 0
     });
     if (websockets) {
       (0, import_generate.generate)({
@@ -1138,7 +1163,8 @@ function withStorybook(config, options = {
         useJs,
         docTools,
         host,
-        port
+        port,
+        secured
       });
     } else {
       (0, import_generate.generate)({

package/dist/node.d.ts

@@ -1,6 +1,12 @@
 import { WebSocketServer } from 'ws';
 import { StoryIndex } from 'storybook/internal/types';
 
+interface ChannelServerSecureOptions {
+    ca?: string | Buffer | Array<string | Buffer>;
+    cert?: string | Buffer | Array<string | Buffer>;
+    key?: string | Buffer | Array<string | Buffer>;
+    passphrase?: string;
+}
 /**
  * Options for creating a channel server.
  */
@@ -27,6 +33,15 @@ interface ChannelServerOptions {
      * When false, starts only the HTTP server endpoints.
      */
     websockets?: boolean;
+    /**
+     * Whether to use HTTPS/WSS for the channel server.
+     * When true, valid TLS credentials must be provided via `ssl`.
+     */
+    secured?: boolean;
+    /**
+     * TLS credentials used when `secured` is true.
+     */
+    ssl?: ChannelServerSecureOptions;
 }
 /**
  * Creates a channel server for syncing storybook instances and sending events.
@@ -43,9 +58,11 @@ interface ChannelServerOptions {
  * @param options.configPath - The path to the Storybook config folder.
  * @param options.experimental_mcp - Whether to enable MCP server support.
  * @param options.websockets - Whether to enable WebSocket server support.
+ * @param options.secured - Whether to use HTTPS/WSS for the channel server.
+ * @param options.ssl - TLS credentials used when `secured` is true.
  * @returns The created WebSocketServer instance, or null when websockets are disabled.
  */
-declare function createChannelServer({ port, host, configPath, experimental_mcp, websockets, }: ChannelServerOptions): WebSocketServer | null;
+declare function createChannelServer({ port, host, configPath, experimental_mcp, websockets, secured, ssl, }: ChannelServerOptions): WebSocketServer | null;
 
 declare function buildIndex({ configPath }: {
     configPath: string;

package/dist/node.js

@@ -353,6 +353,7 @@ module.exports = __toCommonJS(node_exports);
 // src/metro/channelServer.ts
 var import_ws2 = require("ws");
 var import_node_http = require("http");
+var import_node_https = require("https");
 init_buildIndex();
 
 // src/metro/mcpServer.ts
@@ -411,11 +412,7 @@ function createMcpHandler(configPath, wss) {
           { McpServer },
           { ValibotJsonSchemaAdapter },
           { HttpTransport },
-          {
-            addListAllDocumentationTool,
-            addGetDocumentationTool,
-            addGetComponentStoryDocumentationTool
-          },
+          { addListAllDocumentationTool, addGetDocumentationTool, addGetStoryDocumentationTool },
           { storyInstructions: storyInstructions2 },
           { buildIndex: buildIndex2 },
           valibot,
@@ -454,7 +451,7 @@ function createMcpHandler(configPath, wss) {
         ).withContext();
         addListAllDocumentationTool(server);
         addGetDocumentationTool(server);
-        addGetComponentStoryDocumentationTool(server);
+        addGetStoryDocumentationTool(server);
         server.tool(
           {
             name: "get-storybook-story-instructions",
@@ -730,14 +727,20 @@ function createChannelServer({
   host = void 0,
   configPath,
   experimental_mcp = false,
-  websockets = true
+  websockets = true,
+  secured = false,
+  ssl
 }) {
-  const httpServer = (0, import_node_http.createServer)();
+  if (secured && (!ssl?.key || !ssl?.cert)) {
+    throw new Error("[Storybook] Secure channel server requires both `ssl.key` and `ssl.cert`.");
+  }
+  const httpServer = secured ? (0, import_node_https.createServer)(ssl) : (0, import_node_http.createServer)();
   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"}`);
+    const protocol = "encrypted" in req.socket && req.socket.encrypted ? "https" : "http";
+    const requestUrl = new URL(req.url ?? "/", `${protocol}://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
@@ -838,7 +841,7 @@ function createChannelServer({
     }
   });
   httpServer.listen(port, host, () => {
-    const protocol = wss ? "WebSocket" : "HTTP";
+    const protocol = wss ? secured ? "WSS" : "WebSocket" : secured ? "HTTPS" : "HTTP";
     console.log(`${protocol} server listening on ${host ?? "localhost"}:${port}`);
   });
   mcpServer?.preInit();

package/dist/repack/withStorybook.d.ts

@@ -1,3 +1,5 @@
+import { W as WebsocketsOptions } from '../index-6iAzVvXp.js';
+
 /**
  * Minimal compiler types for webpack/rspack compatibility.
  * We define these inline to avoid requiring @rspack/core or webpack as dependencies.
@@ -21,19 +23,6 @@ interface Compiler {
         };
     };
 }
-/**
- * Options for configuring WebSockets used for syncing storybook instances or sending events to storybook.
- */
-interface WebsocketsOptions {
-    /**
-     * The port WebSocket server will listen on. Defaults to 7007.
-     */
-    port?: number;
-    /**
-     * The host WebSocket server will bind to. Defaults to 'localhost'.
-     */
-    host?: string;
-}
 /**
  * Options for configuring the Storybook Repack plugin.
  */

package/dist/repack/withStorybook.js

@@ -201,7 +201,8 @@ var require_generate = __commonJS({
       useJs = false,
       docTools = true,
       host = void 0,
-      port = 7007
+      port = void 0,
+      secured = false
     }) {
       const channelHost = host === "auto" ? getLocalIPAddress() : host;
       const storybookRequiresLocation = path3.resolve(
@@ -284,11 +285,22 @@ var require_generate = __commonJS({
       const annotations = `[
   ${enhancers.join(",\n  ")}
 ]`;
+      const hasWebsocketConfig = host !== void 0 || port !== void 0 || secured;
+      const websocketAssignmentLines = [];
+      if (channelHost) {
+        websocketAssignmentLines.push(`host: '${channelHost}',`);
+      }
+      if (hasWebsocketConfig) {
+        websocketAssignmentLines.push(`port: ${port ?? 7007},`);
+        websocketAssignmentLines.push(`secured: ${Boolean(secured)},`);
+      }
       const globalTypes = `
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
-  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
   var FEATURES: Features;
 }
 `;
@@ -306,7 +318,9 @@ ${useJs ? "" : globalTypes}
 const annotations = ${annotations};
 
 globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ""}
+${hasWebsocketConfig ? `globalThis.STORYBOOK_WEBSOCKET = {
+  ${websocketAssignmentLines.join("\n  ")}
+};` : ""}
 
 module?.hot?.accept?.();
 ${featuresAssignment ? `
@@ -572,6 +586,7 @@ var import_generate = __toESM(require_generate());
 // src/metro/channelServer.ts
 var import_ws2 = require("ws");
 var import_node_http = require("http");
+var import_node_https = require("https");
 init_buildIndex();
 
 // src/metro/mcpServer.ts
@@ -630,11 +645,7 @@ function createMcpHandler(configPath, wss) {
           { McpServer },
           { ValibotJsonSchemaAdapter },
           { HttpTransport },
-          {
-            addListAllDocumentationTool,
-            addGetDocumentationTool,
-            addGetComponentStoryDocumentationTool
-          },
+          { addListAllDocumentationTool, addGetDocumentationTool, addGetStoryDocumentationTool },
           { storyInstructions: storyInstructions2 },
           { buildIndex: buildIndex2 },
           valibot,
@@ -673,7 +684,7 @@ function createMcpHandler(configPath, wss) {
         ).withContext();
         addListAllDocumentationTool(server);
         addGetDocumentationTool(server);
-        addGetComponentStoryDocumentationTool(server);
+        addGetStoryDocumentationTool(server);
         server.tool(
           {
             name: "get-storybook-story-instructions",
@@ -949,14 +960,20 @@ function createChannelServer({
   host = void 0,
   configPath,
   experimental_mcp = false,
-  websockets = true
+  websockets = true,
+  secured = false,
+  ssl
 }) {
-  const httpServer = (0, import_node_http.createServer)();
+  if (secured && (!ssl?.key || !ssl?.cert)) {
+    throw new Error("[Storybook] Secure channel server requires both `ssl.key` and `ssl.cert`.");
+  }
+  const httpServer = secured ? (0, import_node_https.createServer)(ssl) : (0, import_node_http.createServer)();
   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"}`);
+    const protocol = "encrypted" in req.socket && req.socket.encrypted ? "https" : "http";
+    const requestUrl = new URL(req.url ?? "/", `${protocol}://${req.headers.host ?? "localhost"}`);
     if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
@@ -1057,7 +1074,7 @@ function createChannelServer({
     }
   });
   httpServer.listen(port, host, () => {
-    const protocol = wss ? "WebSocket" : "HTTP";
+    const protocol = wss ? secured ? "WSS" : "WebSocket" : secured ? "HTTPS" : "HTTP";
     console.log(`${protocol} server listening on ${host ?? "localhost"}:${port}`);
   });
   mcpServer?.preInit();
@@ -1109,6 +1126,7 @@ var StorybookPlugin = class {
   }) {
     const port = websockets === "auto" ? 7007 : websockets?.port ?? 7007;
     const host = websockets === "auto" ? "auto" : websockets?.host;
+    const secured = Boolean(websockets && websockets !== "auto" && websockets.secured);
     if ((websockets || experimental_mcp) && !this.serverStarted) {
       this.serverStarted = true;
       createChannelServer({
@@ -1116,7 +1134,14 @@ var StorybookPlugin = class {
         host: host === "auto" ? void 0 : host,
         configPath,
         experimental_mcp,
-        websockets: Boolean(websockets)
+        websockets: Boolean(websockets),
+        secured,
+        ssl: websockets && websockets !== "auto" ? {
+          key: websockets.key,
+          cert: websockets.cert,
+          ca: websockets.ca,
+          passphrase: websockets.passphrase
+        } : void 0
       });
     }
     compiler.hooks.beforeCompile.tapPromise("StorybookPlugin", async () => {
@@ -1126,7 +1151,7 @@ var StorybookPlugin = class {
         configPath,
         useJs,
         docTools,
-        ...websockets ? { host, port } : {}
+        ...websockets ? { host, port, secured } : {}
       });
       console.log("[StorybookPlugin] Generated storybook.requires");
     });
@@ -1141,7 +1166,10 @@ var StorybookPlugin = class {
    * and replace the config folder index with a stub component.
    */
   applyDisabled(compiler, configPath) {
-    const stubPath = require.resolve("@storybook/react-native/stub");
+    const stubPath = path2.resolve(
+      __dirname,
+      __dirname.includes(`${path2.sep}src${path2.sep}`) ? "../stub.tsx" : "../stub.js"
+    );
     const normalizedConfigPath = path2.resolve(configPath);
     new compiler.webpack.NormalModuleReplacementPlugin(/./, (resource) => {
       const request = resource.request;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.3.0-next.6",
+  "version": "10.3.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -43,36 +43,36 @@
     "metro/**/*"
   ],
   "dependencies": {
-    "@storybook/mcp": "^0.4.1",
-    "@storybook/react": "10.3.0-alpha.14",
-    "@storybook/react-native-theming": "^10.3.0-next.6",
-    "@storybook/react-native-ui": "^10.3.0-next.6",
-    "@storybook/react-native-ui-common": "^10.3.0-next.6",
+    "@storybook/mcp": "^0.6.1",
+    "@storybook/react": "^10.3.1",
+    "@storybook/react-native-theming": "^10.3.1",
+    "@storybook/react-native-ui": "^10.3.1",
+    "@storybook/react-native-ui-common": "^10.3.1",
     "@tmcp/adapter-valibot": "^0.1.4",
-    "@tmcp/transport-http": "^0.8.0",
+    "@tmcp/transport-http": "^0.8.5",
     "commander": "^14.0.2",
-    "dedent": "^1.7.0",
+    "dedent": "^1.7.2",
     "deepmerge": "^4.3.1",
     "esbuild-register": "^3.6.0",
     "glob": "^13.0.0",
     "react-native-url-polyfill": "^3.0.0",
     "setimmediate": "^1.0.5",
-    "tmcp": "^1.16.0",
-    "valibot": "^1.2.0",
-    "ws": "^8.18.3"
+    "tmcp": "^1.19.3",
+    "valibot": "^1.3.1",
+    "ws": "^8.20.0"
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
     "@types/react": "~19.2.14",
     "babel-jest": "^29.7.0",
-    "babel-preset-expo": "^54.0.6",
+    "babel-preset-expo": "^55.0.13",
     "jest": "^29.7.0",
-    "jest-expo": "~55.0.9",
-    "jotai": "^2.17.1",
+    "jest-expo": "~55.0.11",
+    "jotai": "^2.19.0",
     "react": "19.2.0",
-    "react-native": "0.83.2",
-    "storybook": "10.3.0-alpha.14",
-    "test-renderer": "^0.14.0",
+    "react-native": "0.83.4",
+    "storybook": "^10.3.1",
+    "test-renderer": "^0.15.0",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"
   },

package/readme.md

@@ -461,7 +461,7 @@ You can enable MCP with or without websockets:
 
 ### websockets
 
-Type: `'auto' | { host: string?, port: number? }`, default: `undefined`
+Type: `'auto' | { host?: string, port?: number, secured?: boolean, key?: string | Buffer, cert?: string | Buffer, ca?: string | Buffer | Array<string | Buffer>, passphrase?: string }`, 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.
 
@@ -479,6 +479,18 @@ Type: `number`, default: `7007`
 
 The port on which to run the WebSocket, if specified.
 
+### websockets.secured
+
+Type: `boolean`, default: `false`
+
+When `true`, the channel server starts on `https` and upgrades WebSocket clients over `wss`.
+
+### websockets.key / websockets.cert
+
+Type: `string | Buffer`, default: `undefined`
+
+TLS private key and certificate used when `secured` is `true`.
+
 ## getStorybookUI options
 
 You can pass these parameters to getStorybookUI call in your storybook entry point:

package/scripts/generate.js

@@ -55,7 +55,8 @@ async function generate({
   useJs = false,
   docTools = true,
   host = undefined,
-  port = 7007,
+  port = undefined,
+  secured = false,
 }) {
   // here we want to get the ip address and pass it to rn storybook so that devices can connect over lan easily
   const channelHost = host === 'auto' ? getLocalIPAddress() : host;
@@ -165,11 +166,25 @@ async function generate({
   ${enhancers.join(',\n  ')}
 ]`;
 
+  const hasWebsocketConfig = host !== undefined || port !== undefined || secured;
+  const websocketAssignmentLines = [];
+
+  if (channelHost) {
+    websocketAssignmentLines.push(`host: '${channelHost}',`);
+  }
+
+  if (hasWebsocketConfig) {
+    websocketAssignmentLines.push(`port: ${port ?? 7007},`);
+    websocketAssignmentLines.push(`secured: ${Boolean(secured)},`);
+  }
+
   const globalTypes = `
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
-  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
   var FEATURES: Features;
 }
 `;
@@ -188,7 +203,13 @@ ${useJs ? '' : globalTypes}
 const annotations = ${annotations};
 
 globalThis.STORIES = normalizedStories;
-${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ''}
+${
+  hasWebsocketConfig
+    ? `globalThis.STORYBOOK_WEBSOCKET = {
+  ${websocketAssignmentLines.join('\n  ')}
+};`
+    : ''
+}
 
 module?.hot?.accept?.();
 ${featuresAssignment ? `\n${featuresAssignment}\n` : ''}