@canonical/storybook-addon-msw 0.10.0-experimental.4 → 0.11.0

package/dist/esm/components/Panel.js

@@ -1,9 +1,9 @@
-import React, { memo } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
 import { AddonPanel, SyntaxHighlighter } from "storybook/internal/components";
-import { useParameter, useStorybookState, } from "storybook/internal/manager-api";
+import { useParameter } from "storybook/manager-api";
 import { PARAM_KEY } from "../constants.js";
-export const Panel = memo(function MswPanel({ api, active }) {
-    const state = useStorybookState();
+export const Panel = memo(function MswPanel({ active }) {
     const parameter = useParameter(PARAM_KEY);
     if (!active || !parameter?.handlers) {
         return null;
@@ -24,14 +24,6 @@ export const Panel = memo(function MswPanel({ api, active }) {
             description: `Handler ${index + 1}`,
         };
     });
-    return (React.createElement(AddonPanel, { active: active },
-        React.createElement("div", { style: { padding: "1rem" } },
-            React.createElement("h3", null, "Active MSW Handlers"),
-            React.createElement("p", { style: { marginBottom: "1rem", opacity: 0.7 } },
-                parameter.handlers.length,
-                " handler",
-                parameter.handlers.length !== 1 ? "s" : "",
-                " registered"),
-            React.createElement(SyntaxHighlighter, { language: "json" }, JSON.stringify(handlerInfo, null, 2)))));
+    return (_jsx(AddonPanel, { active: active, children: _jsxs("div", { style: { padding: "1rem" }, children: [_jsx("h3", { children: "Active MSW Handlers" }), _jsxs("p", { style: { marginBottom: "1rem", opacity: 0.7 }, children: [parameter.handlers.length, " handler", parameter.handlers.length !== 1 ? "s" : "", " registered"] }), _jsx(SyntaxHighlighter, { language: "json", children: JSON.stringify(handlerInfo, null, 2) })] }) }));
 });
 //# sourceMappingURL=Panel.js.map

package/dist/esm/components/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAEL,YAAY,EACZ,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,EAAc;IACrE,MAAM,KAAK,GAAG,iBAAiB,EAAE,CAAC;IAClC,MAAM,SAAS,GAAG,YAAY,CAAe,SAAS,CAAC,CAAC;IAExD,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0CAA0C;IAC1C,kFAAkF;IAClF,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAC5D,oDAAoD;QACpD,6CAA6C;QAC7C,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,wCAAwC;QACxC,+EAA+E;QAC/E,OAAO;YACL,KAAK;YACL,gFAAgF;YAChF,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB;YACvD,6EAA6E;YAC7E,WAAW,EAAE,WAAW,KAAK,GAAG,CAAC,EAAE;SACpC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,UAAU,IAAC,MAAM,EAAE,MAAM;QACxB,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC7B,sDAA4B;YAC5B,2BAAG,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;gBAC7C,SAAS,CAAC,QAAQ,CAAC,MAAM;;gBACzB,SAAS,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;8BACzC;YACJ,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,MAAM,IAC/B,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CACnB,CAChB,CACK,CACd,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/components/Panel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAY,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,QAAQ,CAAC,EAAE,MAAM,EAAc;IAChE,MAAM,SAAS,GAAG,YAAY,CAAe,SAAS,CAAC,CAAC;IAExD,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0CAA0C;IAC1C,kFAAkF;IAClF,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CACxC,CAAC,OAA4C,EAAE,KAAa,EAAE,EAAE;QAC9D,oDAAoD;QACpD,6CAA6C;QAC7C,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,wCAAwC;QACxC,+EAA+E;QAC/E,OAAO;YACL,KAAK;YACL,gFAAgF;YAChF,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB;YACvD,6EAA6E;YAC7E,WAAW,EAAE,WAAW,KAAK,GAAG,CAAC,EAAE;SACpC,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,YACxB,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAC7B,+CAA4B,EAC5B,aAAG,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,aAC7C,SAAS,CAAC,QAAQ,CAAC,MAAM,cACzB,SAAS,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,mBACzC,EACJ,KAAC,iBAAiB,IAAC,QAAQ,EAAC,MAAM,YAC/B,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,GACnB,IAChB,GACK,CACd,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esm/components/Tool.js

@@ -1,9 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { LightningIcon } from "@storybook/icons";
-import React, { memo, useCallback } from "react";
+import { memo, useCallback } from "react";
 import { IconButton } from "storybook/internal/components";
-import { useGlobals } from "storybook/internal/manager-api";
+import { useGlobals } from "storybook/manager-api";
 import { KEY, TOOL_ID } from "../constants.js";
-export const Tool = memo(function MyAddonSelector({ api }) {
+export const Tool = memo(function MyAddonSelector(_props) {
     const [globals, updateGlobals, storyGlobals] = useGlobals();
     const isLocked = KEY in storyGlobals;
     const isActive = !!globals[KEY];
@@ -22,7 +23,6 @@ export const Tool = memo(function MyAddonSelector({ api }) {
     //     action: toggle,
     //   });
     // }, [toggle, api]);
-    return (React.createElement(IconButton, { key: TOOL_ID, active: isActive, disabled: isLocked, title: isActive ? "MSW Active" : "MSW Inactive", onClick: toggle },
-        React.createElement(LightningIcon, null)));
+    return (_jsx(IconButton, { active: isActive, disabled: isLocked, title: isActive ? "MSW Active" : "MSW Inactive", onClick: toggle, children: _jsx(LightningIcon, {}) }, TOOL_ID));
 });
 //# sourceMappingURL=Tool.js.map

package/dist/esm/components/Tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../src/components/Tool.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAY,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,eAAe,CAAC,EAAE,GAAG,EAAgB;IACrE,MAAM,CAAC,OAAO,EAAE,aAAa,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,GAAG,IAAI,YAAY,CAAC;IACrC,MAAM,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEhC,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,aAAa,CAAC;YACZ,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ;SACjB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,6CAA6C;IAC7C,oBAAoB;IACpB,qCAAqC;IACrC,qCAAqC;IACrC,8BAA8B;IAC9B,8BAA8B;IAC9B,yBAAyB;IACzB,sBAAsB;IACtB,QAAQ;IACR,qBAAqB;IAErB,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC/C,OAAO,EAAE,MAAM;QAEf,oBAAC,aAAa,OAAG,CACN,CACd,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../src/components/Tool.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAY,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,eAAe,CAAC,MAAoB;IACpE,MAAM,CAAC,OAAO,EAAE,aAAa,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,GAAG,IAAI,YAAY,CAAC;IACrC,MAAM,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEhC,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,aAAa,CAAC;YACZ,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ;SACjB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,6CAA6C;IAC7C,oBAAoB;IACpB,qCAAqC;IACrC,qCAAqC;IACrC,8BAA8B;IAC9B,8BAA8B;IAC9B,yBAAyB;IACzB,sBAAsB;IACtB,QAAQ;IACR,qBAAqB;IAErB,OAAO,CACL,KAAC,UAAU,IAET,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC/C,OAAO,EAAE,MAAM,YAEf,KAAC,aAAa,KAAG,IANZ,OAAO,CAOD,CACd,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esm/manager.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { addons, types } from "storybook/internal/manager-api";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addons, types } from "storybook/manager-api";
 import { Panel } from "./components/Panel.js";
 import { Tool } from "./components/Tool.js";
 import { ADDON_ID, PANEL_ID, TOOL_ID } from "./constants.js";
@@ -9,15 +9,15 @@ addons.register(ADDON_ID, (api) => {
     addons.add(TOOL_ID, {
         type: types.TOOL,
         title: "Toggle MSW",
-        match: ({ viewMode, tabId }) => !!viewMode?.match(/^(story|docs)$/),
-        render: () => React.createElement(Tool, { api: api }),
+        match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
+        render: () => _jsx(Tool, { api: api }),
     });
     // Register a panel to show active handlers
     addons.add(PANEL_ID, {
         type: types.PANEL,
         title: "MSW",
         match: ({ viewMode }) => viewMode === "story",
-        render: ({ active }) => React.createElement(Panel, { api: api, active: active }),
+        render: ({ active }) => (_jsx(Panel, { api: api, active: active })),
     });
 });
 //# sourceMappingURL=manager.js.map

package/dist/esm/manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"manager.js","sourceRoot":"","sources":["../../src/manager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE7D,qBAAqB;AACrB,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE;IAChC,iCAAiC;IACjC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE;QAClB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACnE,MAAM,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,GAAI;KACjC,CAAC,CAAC;IAEH,2CAA2C;IAC3C,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE;QACnB,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,KAAK,OAAO;QAC7C,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAI;KAC5D,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"manager.js","sourceRoot":"","sources":["../../src/manager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,MAAM,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE7D,qBAAqB;AACrB,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAQ,EAAE,EAAE;IACrC,iCAAiC;IACjC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE;QAClB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAyC,EAAE,EAAE,CAC7D,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACrC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,GAAI;KACjC,CAAC,CAAC;IAEH,2CAA2C;IAC3C,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE;QACnB,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAyB,EAAE,EAAE,CAAC,QAAQ,KAAK,OAAO;QACpE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAwB,EAAE,EAAE,CAAC,CAC5C,KAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAI,CACpC;KACF,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/esm/preset.js

@@ -1,16 +1,10 @@
 // This entry is a node-specific file, contrary to the other files in this folder which are made to be loaded in the browser.
-// You can use presets to augment the Storybook configuration
-// You rarely want to do this in addons,
-// so often you want to delete this file and remove the reference to it in package.json#exports and package.json#bunder.nodeEntries
-// Read more about presets at https://storybook.js.org/docs/addons/writing-presets
-// biome-ignore lint: untouched boilerplate
-export const viteFinal = async (config) => {
-    console.log("This addon is augmenting the Vite config");
-    return config;
-};
-// biome-ignore lint: untouched boilerplate
-export const webpack = async (config) => {
-    console.log("This addon is augmenting the Webpack config");
-    return config;
-};
+// This preset automatically provides the mockServiceWorker.js to consuming packages.
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+// Automatically serve mockServiceWorker.js for packages that include this addon.
+// The public/ folder contains the MSW service worker generated via `npx msw init public/`.
+// This eliminates the need for each consuming package to have its own copy.
+export const staticDirs = [join(__dirname, "../../public")];
 //# sourceMappingURL=preset.js.map

package/dist/esm/preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"preset.js","sourceRoot":"","sources":["../../src/preset.ts"],"names":[],"mappings":"AAAA,6HAA6H;AAE7H,6DAA6D;AAC7D,wCAAwC;AACxC,mIAAmI;AACnI,kFAAkF;AAElF,2CAA2C;AAC3C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,EAAE,MAAW,EAAE,EAAE;IAC7C,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;IACxD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,2CAA2C;AAC3C,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,EAAE,MAAW,EAAE,EAAE;IAC3C,OAAO,CAAC,GAAG,CAAC,6CAA6C,CAAC,CAAC;IAC3D,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"preset.js","sourceRoot":"","sources":["../../src/preset.ts"],"names":[],"mappings":"AAAA,6HAA6H;AAC7H,qFAAqF;AAErF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAE1D,iFAAiF;AACjF,2FAA2F;AAC3F,4EAA4E;AAC5E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC"}

package/dist/esm/withMSW.js

@@ -1,7 +1,6 @@
 import { setupWorker } from "msw/browser";
-// src/withMSW.ts
 import React from "react";
-import { useEffect, useGlobals, useParameter, useState, } from "storybook/internal/preview-api";
+import { useEffect, useGlobals, useParameter, useRef, useState, } from "storybook/internal/preview-api";
 import { KEY, PARAM_KEY } from "./constants.js";
 // Singleton worker instance
 let worker = null;
@@ -13,7 +12,6 @@ const initializeWorker = async () => {
             serviceWorker: { url: "/mockServiceWorker.js" },
             onUnhandledRequest: "bypass",
         });
-        console.log("Worker initialized and started");
         workerPromise = Promise.resolve(worker);
     }
     return workerPromise;
@@ -25,38 +23,40 @@ export const withMSW = (StoryFn) => {
     const mswParameter = useParameter(PARAM_KEY);
     const isEnabled = mswGlobals?.enabled ?? true;
     const isDisabled = mswParameter?.disable ?? false;
-    const handlers = mswParameter?.handlers ?? [];
+    const handlers = mswParameter?.handlers;
+    // Store handlers in a ref to avoid re-running effect on every render
+    // The handlers array reference changes on each render even if contents are same
+    const handlersRef = useRef(handlers);
+    handlersRef.current = handlers;
     useEffect(() => {
-        console.log("useEffect running", { isEnabled, isDisabled, handlers });
         if (!isEnabled || isDisabled) {
-            setIsWorkerReady(true); // Skip MSW setup and render immediately
+            setIsWorkerReady(true);
             return;
         }
+        let cancelled = false;
         const setupHandlers = async () => {
-            console.log("Setting up handlers");
             const activeWorker = await initializeWorker();
-            if (activeWorker && handlers.length > 0) {
+            if (cancelled)
+                return;
+            const currentHandlers = handlersRef.current;
+            if (currentHandlers && currentHandlers.length > 0) {
                 activeWorker.resetHandlers();
-                activeWorker.use(...handlers);
-                console.log("Handlers applied", handlers);
+                activeWorker.use(...currentHandlers);
             }
-            else if (activeWorker) {
+            else {
                 activeWorker.resetHandlers();
-                console.log("Handlers reset");
             }
-            setIsWorkerReady(true); // Signal that setup is complete
+            setIsWorkerReady(true);
         };
         setupHandlers();
         return () => {
+            cancelled = true;
             if (worker) {
                 worker.resetHandlers();
-                console.log("Cleanup: handlers reset");
             }
         };
-    }, [isEnabled, isDisabled, handlers]);
-    // Delay rendering until the worker is ready
+    }, [isEnabled, isDisabled]);
     if (!isWorkerReady) {
-        console.log("Waiting for MSW worker...");
         return React.createElement("div", {}, "Loading MSW...");
     }
     return StoryFn();

package/dist/esm/withMSW.js.map

@@ -1 +1 @@
-{"version":3,"file":"withMSW.js","sourceRoot":"","sources":["../../src/withMSW.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"withMSW.js","sourceRoot":"","sources":["../../src/withMSW.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,WAAW,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,EACN,QAAQ,GACT,MAAM,gCAAgC,CAAC;AAKxC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,4BAA4B;AAC5B,IAAI,MAAM,GAAuB,IAAI,CAAC;AACtC,IAAI,aAAa,GAAgC,IAAI,CAAC;AAEtD,MAAM,gBAAgB,GAAG,KAAK,IAA0B,EAAE;IACxD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,GAAG,WAAW,EAAE,CAAC;QACvB,MAAM,MAAM,CAAC,KAAK,CAAC;YACjB,aAAa,EAAE,EAAE,GAAG,EAAE,uBAAuB,EAAE;YAC/C,kBAAkB,EAAE,QAAQ;SAC7B,CAAC,CAAC;QACH,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IACD,OAAO,aAAqC,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAgC,EAAE,EAAE;IAC1D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,OAAO,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAA2B,CAAC;IAC1D,MAAM,YAAY,GAAG,YAAY,CAAe,SAAS,CAAC,CAAC;IAE3D,MAAM,SAAS,GAAG,UAAU,EAAE,OAAO,IAAI,IAAI,CAAC;IAC9C,MAAM,UAAU,GAAG,YAAY,EAAE,OAAO,IAAI,KAAK,CAAC;IAClD,MAAM,QAAQ,GAAG,YAAY,EAAE,QAAQ,CAAC;IAExC,qEAAqE;IACrE,gFAAgF;IAChF,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE,CAAC;YAC7B,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,MAAM,aAAa,GAAG,KAAK,IAAI,EAAE;YAC/B,MAAM,YAAY,GAAG,MAAM,gBAAgB,EAAE,CAAC;YAC9C,IAAI,SAAS;gBAAE,OAAO;YAEtB,MAAM,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC;YAC5C,IAAI,eAAe,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAClD,YAAY,CAAC,aAAa,EAAE,CAAC;gBAC7B,YAAY,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,aAAa,EAAE,CAAC;YAC/B,CAAC;YACD,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF,aAAa,EAAE,CAAC;QAEhB,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;YACjB,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,aAAa,EAAE,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,EAAE,gBAAgB,CAAC,CAAC;IAC1D,CAAC;IAED,OAAO,OAAO,EAAE,CAAC;AACnB,CAAC,CAAC"}

package/dist/types/components/Panel.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
-import { type API } from "storybook/internal/manager-api";
+import { type API } from "storybook/manager-api";
 interface PanelProps {
     api: API;
     active?: boolean;
 }
-export declare const Panel: React.NamedExoticComponent<PanelProps>;
+export declare const Panel: import("react").NamedExoticComponent<PanelProps>;
 export {};
 //# sourceMappingURL=Panel.d.ts.map

package/dist/types/components/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EACL,KAAK,GAAG,EAGT,MAAM,gCAAgC,CAAC;AAIxC,UAAU,UAAU;IAClB,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,KAAK,wCAwChB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAgB,MAAM,uBAAuB,CAAC;AAI/D,UAAU,UAAU;IAClB,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,KAAK,kDAyChB,CAAC"}

package/dist/types/components/Tool.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
-import { type API } from "storybook/internal/manager-api";
-export declare const Tool: React.NamedExoticComponent<{
+import { type API } from "storybook/manager-api";
+export declare const Tool: import("react").NamedExoticComponent<{
     api: API;
 }>;
 //# sourceMappingURL=Tool.d.ts.map

package/dist/types/components/Tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.d.ts","sourceRoot":"","sources":["../../../src/components/Tool.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,gCAAgC,CAAC;AAGtE,eAAO,MAAM,IAAI;SAAiD,GAAG;EAkCnE,CAAC"}
+{"version":3,"file":"Tool.d.ts","sourceRoot":"","sources":["../../../src/components/Tool.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAG7D,eAAO,MAAM,IAAI;SAAgD,GAAG;EAkClE,CAAC"}

package/dist/types/preset.d.ts

@@ -1,3 +1,2 @@
-export declare const viteFinal: (config: any) => Promise<any>;
-export declare const webpack: (config: any) => Promise<any>;
+export declare const staticDirs: string[];
 //# sourceMappingURL=preset.d.ts.map

package/dist/types/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,GAAU,QAAQ,GAAG,iBAG1C,CAAC;AAGF,eAAO,MAAM,OAAO,GAAU,QAAQ,GAAG,iBAGxC,CAAC"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,UAAoC,CAAC"}

package/dist/types/withMSW.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withMSW.d.ts","sourceRoot":"","sources":["../../src/withMSW.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,IAAI,aAAa,EAChC,MAAM,0BAA0B,CAAC;AAqBlC,eAAO,MAAM,OAAO,GAAI,SAAS,aAAa,CAAC,QAAQ,CAAC,QA+CvD,CAAC"}
+{"version":3,"file":"withMSW.d.ts","sourceRoot":"","sources":["../../src/withMSW.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,IAAI,aAAa,EAChC,MAAM,0BAA0B,CAAC;AAoBlC,eAAO,MAAM,OAAO,GAAI,SAAS,aAAa,CAAC,QAAQ,CAAC,QAoDvD,CAAC"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@canonical/storybook-addon-msw",
-  "version": "0.10.0-experimental.4",
+  "version": "0.11.0",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "public"
   ],
   "types": "dist/types/index.d.ts",
   "author": {
@@ -43,26 +44,26 @@
     "check:ts": "tsc --noEmit"
   },
   "dependencies": {
-    "@canonical/styles-debug": "^0.10.0-experimental.4",
-    "@storybook/icons": "^1.2.10"
+    "@canonical/styles-debug": "^0.11.0",
+    "@storybook/icons": "^2.0.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.2.4",
-    "@canonical/biome-config": "^0.10.0-experimental.4",
-    "@canonical/typescript-config-react": "^0.10.0-experimental.4",
+    "@biomejs/biome": "2.3.11",
+    "@canonical/biome-config": "^0.11.0",
+    "@canonical/typescript-config-react": "^0.11.0",
     "@types/node": "^24.0.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^5.0.0",
-    "msw": "^2.10.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "storybook": "^9.0.8",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.0"
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "msw": "^2.12.7",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "storybook": "^10.1.11",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
   },
   "peerDependencies": {
-    "storybook": "^9.0.8"
+    "storybook": "^10.1.11"
   },
   "storybook": {
     "displayName": "DS Baseline Grid",
@@ -84,5 +85,5 @@
       "public"
     ]
   },
-  "gitHead": "2c35cfbe5527808f3d612a1c683da1b113861e3d"
+  "gitHead": "29125736059d1880b3d0fc277b218a63a2574f28"
 }

package/public/mockServiceWorker.js

@@ -0,0 +1,349 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.12.7'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}