@fluentui/react-storybook-addon 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-storybook-addon
 
-This log was last generated on Fri, 31 Oct 2025 16:17:32 GMT and should not be manually modified.
+This log was last generated on Tue, 03 Mar 2026 13:15:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.6.0)
+
+Tue, 03 Mar 2026 13:15:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.5.1..@fluentui/react-storybook-addon_v0.6.0)
+
+### Minor changes
+
+- feat: upgrade to storybook 9 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by dmytrokirpa@microsoft.com)
+- BREAKING: upgrade storybook to v8 ([PR #35279](https://github.com/microsoft/fluentui/pull/35279) by dmytrokirpa@microsoft.com)
+
+### Patches
+
+- chore: migrate source to react 19 ([PR #35434](https://github.com/microsoft/fluentui/pull/35434) by martinhochel@microsoft.com)
+- chore: bump storybook to mitigate CVE ([PR #35748](https://github.com/microsoft/fluentui/pull/35748) by martinhochel@microsoft.com)
+- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
+
+## [0.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.5.1)
+
+Tue, 04 Nov 2025 14:47:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.5.0..@fluentui/react-storybook-addon_v0.5.1)
+
+### Patches
+
+- fix: force release ([PR #35445](https://github.com/microsoft/fluentui/pull/35445) by dmytrokirpa@microsoft.com)
+
 ## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.5.0)
 
-Fri, 31 Oct 2025 16:17:32 GMT 
+Fri, 31 Oct 2025 16:22:00 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.4.6..@fluentui/react-storybook-addon_v0.5.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -0,0 +1,100 @@
+import { Args } from '@storybook/react-webpack5';
+import type { JSXElement } from '@fluentui/react-utilities';
+import { Parameters as Parameters_2 } from '@storybook/react-webpack5';
+import * as React_2 from 'react';
+import { StoryContext } from '@storybook/react-webpack5';
+
+export declare const DIR_ID: "storybook_fluentui-react-addon_dir";
+
+/**
+ * Canvas component to wrap stories in a styled container.
+ * Provides a similar experience to Storybook's v7 `Canvas` component.
+ */
+export declare const FluentCanvas: (props: React_2.ComponentProps<"div">) => JSXElement;
+
+/**
+ * Configuration for docs components
+ */
+declare type FluentDocsConfig = boolean | {
+    tableOfContents?: boolean;
+    dirSwitcher?: boolean;
+    themePicker?: boolean;
+    copyAsMarkdown?: boolean;
+    argTable?: boolean | {
+        slotsApi?: boolean;
+        nativePropsApi?: boolean;
+    };
+};
+
+/**
+ * Extends the storybook globals object to include fluent specific properties
+ */
+export declare interface FluentGlobals extends Args {
+    [DIR_ID]?: 'ltr' | 'rtl';
+    [THEME_ID]?: ThemeIds;
+    [STRICT_MODE_ID]?: boolean;
+}
+
+/**
+ * Extends the storybook parameters object to include fluent specific properties
+ */
+export declare interface FluentParameters extends Parameters_2 {
+    dir?: 'ltr' | 'rtl';
+    fluentTheme?: ThemeIds;
+    mode?: 'default' | 'vr-test';
+    reactStorybookAddon?: {
+        disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];
+        docs?: FluentDocsConfig;
+    };
+}
+
+/**
+ * Story component to render stories in an iframe.
+ * Provides a similar experience to Storybook's v7 `Story` component.
+ */
+export declare const FluentStory: ({ id, height }: FluentStoryProps) => JSXElement;
+
+export declare interface FluentStoryContext extends StoryContext {
+    globals: FluentGlobals;
+    parameters: FluentParameters;
+}
+
+declare type FluentStoryProps = {
+    /** The unique identifier for the story */
+    id: string;
+    /** The height of the iframe */
+    height?: string | number;
+};
+
+export declare function parameters(options?: FluentParameters): FluentParameters;
+
+declare const STRICT_MODE_ID: "storybook_fluentui-react-addon_strict-mode";
+
+export declare const THEME_ID: "storybook_fluentui-react-addon_theme";
+
+export declare type ThemeIds = (typeof themes)[number]['id'];
+
+export declare const themes: readonly [{
+    readonly id: "web-light";
+    readonly label: "Web Light";
+}, {
+    readonly id: "web-dark";
+    readonly label: "Web Dark";
+}, {
+    readonly id: "teams-light";
+    readonly label: "Teams Light";
+}, {
+    readonly id: "teams-dark";
+    readonly label: "Teams Dark";
+}, {
+    readonly id: "teams-light-v21";
+    readonly label: "Teams Light V2.1";
+}, {
+    readonly id: "teams-dark-v21";
+    readonly label: "Teams Dark V2.1";
+}, {
+    readonly id: "teams-high-contrast";
+    readonly label: "Teams High Contrast";
+}];
+
+export { }

package/lib/components/DirectionSwitch.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconButton } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
+import { DIR_ID } from '../constants';
+import { useGlobals } from '../hooks';
+const Monospace = styled.span({
+    fontFamily: "'Cascadia Code', Menlo, 'Courier New', Courier, monospace",
+    letterSpacing: '-0.05em'
+});
+export const DirectionSwitch = ()=>{
+    const [globals, updateGlobals] = useGlobals();
+    var _globals_DIR_ID;
+    const direction = (_globals_DIR_ID = globals[DIR_ID]) !== null && _globals_DIR_ID !== void 0 ? _globals_DIR_ID : 'ltr';
+    const isLTR = direction === 'ltr';
+    const toggleDirection = React.useCallback(()=>updateGlobals({
+            [DIR_ID]: isLTR ? 'rtl' : 'ltr'
+        }), [
+        isLTR,
+        updateGlobals
+    ]);
+    return /*#__PURE__*/ React.createElement(IconButton, {
+        key: DIR_ID,
+        title: "Change Direction",
+        onClick: toggleDirection
+    }, /*#__PURE__*/ React.createElement("div", null, "Direction: ", /*#__PURE__*/ React.createElement(Monospace, null, direction.toUpperCase())));
+};

package/lib/components/DirectionSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DirectionSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from 'storybook/internal/components';\nimport { styled } from 'storybook/theming';\n\nimport { JSXElement } from '@fluentui/react-utilities';\nimport { DIR_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nconst Monospace = styled.span({\n  fontFamily: \"'Cascadia Code', Menlo, 'Courier New', Courier, monospace\",\n  letterSpacing: '-0.05em',\n});\n\nexport const DirectionSwitch = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const direction = globals[DIR_ID] ?? 'ltr';\n  const isLTR = direction === 'ltr';\n\n  const toggleDirection = React.useCallback(\n    () =>\n      updateGlobals({\n        [DIR_ID]: isLTR ? 'rtl' : 'ltr',\n      }),\n    [isLTR, updateGlobals],\n  );\n\n  return (\n    <IconButton key={DIR_ID} title=\"Change Direction\" onClick={toggleDirection}>\n      <div>\n        Direction: <Monospace>{direction.toUpperCase()}</Monospace>\n      </div>\n    </IconButton>\n  );\n};\n"],"names":["React","IconButton","styled","DIR_ID","useGlobals","Monospace","span","fontFamily","letterSpacing","DirectionSwitch","globals","updateGlobals","direction","isLTR","toggleDirection","useCallback","key","title","onClick","div","toUpperCase"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,MAAM,QAAQ,oBAAoB;AAG3C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,UAAU,QAAQ,WAAW;AAEtC,MAAMC,YAAYH,OAAOI,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEA,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGP;QAEfM;IAAlB,MAAME,YAAYF,CAAAA,kBAAAA,OAAO,CAACP,OAAO,cAAfO,6BAAAA,kBAAmB;IACrC,MAAMG,QAAQD,cAAc;IAE5B,MAAME,kBAAkBd,MAAMe,WAAW,CACvC,IACEJ,cAAc;YACZ,CAACR,OAAO,EAAEU,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOF;KAAc;IAGxB,qBACE,oBAACV;QAAWe,KAAKb;QAAQc,OAAM;QAAmBC,SAASJ;qBACzD,oBAACK,aAAI,6BACQ,oBAACd,iBAAWO,UAAUQ,WAAW;AAIpD,EAAE"}

package/lib/components/ReactStrictMode.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { IconButton } from 'storybook/internal/components';
+import { LockIcon } from '@storybook/icons';
+import { STRICT_MODE_ID } from '../constants';
+import { useGlobals } from '../hooks';
+export const ReactStrictMode = ()=>{
+    const [globals, updateGlobals] = useGlobals();
+    var _globals_STRICT_MODE_ID;
+    const isActive = (_globals_STRICT_MODE_ID = globals[STRICT_MODE_ID]) !== null && _globals_STRICT_MODE_ID !== void 0 ? _globals_STRICT_MODE_ID : false;
+    const toggleStrictMode = React.useCallback(()=>updateGlobals({
+            [STRICT_MODE_ID]: !isActive
+        }), [
+        isActive,
+        updateGlobals
+    ]);
+    return /*#__PURE__*/ React.createElement(IconButton, {
+        key: STRICT_MODE_ID,
+        active: isActive,
+        title: "Toggle React Strict mode",
+        onClick: toggleStrictMode
+    }, /*#__PURE__*/ React.createElement(LockIcon, null));
+};

package/lib/components/ReactStrictMode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from 'storybook/internal/components';\nimport { LockIcon } from '@storybook/icons';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { STRICT_MODE_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nexport const ReactStrictMode = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const isActive = globals[STRICT_MODE_ID] ?? false;\n\n  const toggleStrictMode = React.useCallback(\n    () =>\n      updateGlobals({\n        [STRICT_MODE_ID]: !isActive,\n      }),\n    [isActive, updateGlobals],\n  );\n\n  return (\n    <IconButton key={STRICT_MODE_ID} active={isActive} title=\"Toggle React Strict mode\" onClick={toggleStrictMode}>\n      <LockIcon />\n    </IconButton>\n  );\n};\n"],"names":["React","IconButton","LockIcon","STRICT_MODE_ID","useGlobals","ReactStrictMode","globals","updateGlobals","isActive","toggleStrictMode","useCallback","key","active","title","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,QAAQ,QAAQ,mBAAmB;AAG5C,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,WAAW;AAEtC,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGH;QAEhBE;IAAjB,MAAME,WAAWF,CAAAA,0BAAAA,OAAO,CAACH,eAAe,cAAvBG,qCAAAA,0BAA2B;IAE5C,MAAMG,mBAAmBT,MAAMU,WAAW,CACxC,IACEH,cAAc;YACZ,CAACJ,eAAe,EAAE,CAACK;QACrB,IACF;QAACA;QAAUD;KAAc;IAG3B,qBACE,oBAACN;QAAWU,KAAKR;QAAgBS,QAAQJ;QAAUK,OAAM;QAA2BC,SAASL;qBAC3F,oBAACP;AAGP,EAAE"}

package/lib/components/ThemePicker.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
+import { ArrowDownIcon } from '@storybook/icons';
+import { useParameter } from 'storybook/manager-api';
+import { themes, defaultTheme } from '../theme';
+import { THEME_ID } from '../constants';
+import { useGlobals } from '../hooks';
+function createThemeItems(value, changeTheme, getCurrentTheme) {
+    return value.map((item)=>{
+        return {
+            id: item.id,
+            title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,
+            onClick: ()=>{
+                changeTheme(item.id);
+            },
+            value: item.id,
+            active: getCurrentTheme() === item.id
+        };
+    });
+}
+export const ThemePicker = ()=>{
+    const [globals, updateGlobals] = useGlobals();
+    const fluentTheme = useParameter('fluentTheme');
+    var _globals_THEME_ID;
+    const selectedThemeId = fluentTheme ? fluentTheme : (_globals_THEME_ID = globals[THEME_ID]) !== null && _globals_THEME_ID !== void 0 ? _globals_THEME_ID : defaultTheme.id;
+    const selectedTheme = themes.find((entry)=>entry.id === selectedThemeId);
+    const isActive = selectedThemeId !== defaultTheme.id;
+    const setTheme = React.useCallback((id)=>{
+        updateGlobals({
+            [THEME_ID]: id
+        });
+    }, [
+        updateGlobals
+    ]);
+    const renderTooltip = React.useCallback((props)=>{
+        return /*#__PURE__*/ React.createElement(TooltipLinkList, {
+            links: createThemeItems(themes, (id)=>{
+                setTheme(id);
+                props.onHide();
+            }, ()=>selectedThemeId)
+        });
+    }, [
+        selectedThemeId,
+        setTheme
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(WithTooltip, {
+        placement: "top",
+        trigger: "click",
+        closeOnOutsideClick: true,
+        tooltip: renderTooltip
+    }, /*#__PURE__*/ React.createElement(IconButton, {
+        key: THEME_ID,
+        title: "Change Fluent theme",
+        active: isActive
+    }, /*#__PURE__*/ React.createElement(ArrowDownIcon, null), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            marginLeft: 5
+        }
+    }, "Theme: ", selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.label))));
+};

package/lib/components/ThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';\nimport { ArrowDownIcon } from '@storybook/icons';\nimport { useParameter } from 'storybook/manager-api';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ThemeIds, themes, defaultTheme } from '../theme';\nimport { THEME_ID } from '../constants';\nimport { useGlobals, FluentParameters } from '../hooks';\n\nexport interface ThemeSelectorItem {\n  id: string;\n  title: string;\n  onClick: () => void;\n  value: string;\n  active: boolean;\n}\n\nfunction createThemeItems(\n  value: typeof themes,\n  changeTheme: (id: ThemeIds) => void,\n  getCurrentTheme: () => ThemeIds,\n): ThemeSelectorItem[] {\n  return value.map(item => {\n    return {\n      id: item.id,\n      title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,\n      onClick: () => {\n        changeTheme(item.id);\n      },\n      value: item.id,\n      active: getCurrentTheme() === item.id,\n    };\n  });\n}\n\nexport const ThemePicker = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n  const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');\n\n  const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;\n  const selectedTheme = themes.find(entry => entry.id === selectedThemeId);\n\n  const isActive = selectedThemeId !== defaultTheme.id;\n\n  const setTheme = React.useCallback(\n    (id: ThemeIds) => {\n      updateGlobals({ [THEME_ID]: id });\n    },\n    [updateGlobals],\n  );\n\n  const renderTooltip = React.useCallback(\n    (props: { onHide: () => void }) => {\n      return (\n        <TooltipLinkList\n          links={createThemeItems(\n            themes,\n            id => {\n              setTheme(id);\n              props.onHide();\n            },\n            () => selectedThemeId,\n          )}\n        />\n      );\n    },\n    [selectedThemeId, setTheme],\n  );\n\n  return (\n    <>\n      <WithTooltip placement=\"top\" trigger=\"click\" closeOnOutsideClick tooltip={renderTooltip}>\n        <IconButton key={THEME_ID} title=\"Change Fluent theme\" active={isActive}>\n          <ArrowDownIcon />\n          <span style={{ marginLeft: 5 }}>Theme: {selectedTheme?.label}</span>\n        </IconButton>\n      </WithTooltip>\n    </>\n  );\n};\n"],"names":["React","IconButton","TooltipLinkList","WithTooltip","ArrowDownIcon","useParameter","themes","defaultTheme","THEME_ID","useGlobals","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","label","onClick","active","ThemePicker","globals","updateGlobals","fluentTheme","selectedThemeId","selectedTheme","find","entry","isActive","setTheme","useCallback","renderTooltip","props","links","onHide","placement","trigger","closeOnOutsideClick","tooltip","key","span","style","marginLeft"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,eAAe,EAAEC,WAAW,QAAQ,gCAAgC;AACzF,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,wBAAwB;AAGrD,SAAmBC,MAAM,EAAEC,YAAY,QAAQ,WAAW;AAC1D,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,UAAU,QAA0B,WAAW;AAUxD,SAASC,iBACPC,KAAoB,EACpBC,WAAmC,EACnCC,eAA+B;IAE/B,OAAOF,MAAMG,GAAG,CAACC,CAAAA;QACf,OAAO;YACLC,IAAID,KAAKC,EAAE;YACXC,OAAOF,KAAKC,EAAE,KAAKT,aAAaS,EAAE,GAAG,GAAGD,KAAKG,KAAK,CAAC,UAAU,CAAC,GAAGH,KAAKG,KAAK;YAC3EC,SAAS;gBACPP,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdI,QAAQP,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEA,OAAO,MAAMK,cAAc;IACzB,MAAM,CAACC,SAASC,cAAc,GAAGd;IACjC,MAAMe,cAA+CnB,aAAa;QAEdiB;IAApD,MAAMG,kBAAkBD,cAAcA,cAAcF,CAAAA,oBAAAA,OAAO,CAACd,SAAS,cAAjBc,+BAAAA,oBAAqBf,aAAaS,EAAE;IACxF,MAAMU,gBAAgBpB,OAAOqB,IAAI,CAACC,CAAAA,QAASA,MAAMZ,EAAE,KAAKS;IAExD,MAAMI,WAAWJ,oBAAoBlB,aAAaS,EAAE;IAEpD,MAAMc,WAAW9B,MAAM+B,WAAW,CAChC,CAACf;QACCO,cAAc;YAAE,CAACf,SAAS,EAAEQ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMS,gBAAgBhC,MAAM+B,WAAW,CACrC,CAACE;QACC,qBACE,oBAAC/B;YACCgC,OAAOxB,iBACLJ,QACAU,CAAAA;gBACEc,SAASd;gBACTiB,MAAME,MAAM;YACd,GACA,IAAMV;;IAId,GACA;QAACA;QAAiBK;KAAS;IAG7B,qBACE,wDACE,oBAAC3B;QAAYiC,WAAU;QAAMC,SAAQ;QAAQC,qBAAAA;QAAoBC,SAASP;qBACxE,oBAAC/B;QAAWuC,KAAKhC;QAAUS,OAAM;QAAsBG,QAAQS;qBAC7D,oBAACzB,oCACD,oBAACqC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQjB,0BAAAA,oCAAAA,cAAeR,KAAK;AAKtE,EAAE"}

package/lib/constants.js

@@ -0,0 +1,4 @@
+export const ADDON_ID = 'storybook_fluentui-react-addon';
+export const DIR_ID = `${ADDON_ID}_dir`;
+export const STRICT_MODE_ID = `${ADDON_ID}_strict-mode`;
+export const THEME_ID = `${ADDON_ID}_theme`;

package/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const ADDON_ID = 'storybook_fluentui-react-addon';\n\nexport const DIR_ID = `${ADDON_ID}_dir` as const;\nexport const STRICT_MODE_ID = `${ADDON_ID}_strict-mode` as const;\nexport const THEME_ID = `${ADDON_ID}_theme` as const;\n"],"names":["ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID"],"mappings":"AAAA,OAAO,MAAMA,WAAW,iCAAiC;AAEzD,OAAO,MAAMC,SAAS,GAAGD,SAAS,IAAI,CAAC,CAAU;AACjD,OAAO,MAAME,iBAAiB,GAAGF,SAAS,YAAY,CAAC,CAAU;AACjE,OAAO,MAAMG,WAAW,GAAGH,SAAS,MAAM,CAAC,CAAU"}

package/lib/decorators/withAriaLive.js

@@ -0,0 +1,18 @@
+import { AriaLiveAnnouncer } from '@fluentui/react-aria';
+import * as React from 'react';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+export const withAriaLive = (Story, context)=>{
+    if (isDecoratorDisabled(context, 'AriaLive')) {
+        return Story();
+    }
+    return /*#__PURE__*/ React.createElement(AriaLiveWrapper, null, /*#__PURE__*/ React.createElement(Story, null));
+};
+const AriaLiveWrapper = (props)=>{
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(()=>{
+        // The AriaLiveAnnouncer appends an element to DOM in an effect
+        // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so
+        setMounted(true);
+    }, []);
+    return /*#__PURE__*/ React.createElement(AriaLiveAnnouncer, null, mounted && props.children);
+};

package/lib/decorators/withAriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withAriaLive.tsx"],"sourcesContent":["import { AriaLiveAnnouncer } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport type { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport const withAriaLive = (Story: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  if (isDecoratorDisabled(context, 'AriaLive')) {\n    return Story();\n  }\n\n  return (\n    <AriaLiveWrapper>\n      <Story />\n    </AriaLiveWrapper>\n  );\n};\n\nconst AriaLiveWrapper: React.FC<{ children: React.ReactNode }> = props => {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    // The AriaLiveAnnouncer appends an element to DOM in an effect\n    // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so\n    setMounted(true);\n  }, []);\n\n  return <AriaLiveAnnouncer>{mounted && props.children}</AriaLiveAnnouncer>;\n};\n"],"names":["AriaLiveAnnouncer","React","isDecoratorDisabled","withAriaLive","Story","context","AriaLiveWrapper","props","mounted","setMounted","useState","useEffect","children"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,uBAAuB;AACzD,YAAYC,WAAW,QAAQ;AAG/B,SAASC,mBAAmB,QAAQ,+BAA+B;AAGnE,OAAO,MAAMC,eAAe,CAACC,OAAyBC;IACpD,IAAIH,oBAAoBG,SAAS,aAAa;QAC5C,OAAOD;IACT;IAEA,qBACE,oBAACE,qCACC,oBAACF;AAGP,EAAE;AAEF,MAAME,kBAA2DC,CAAAA;IAC/D,MAAM,CAACC,SAASC,WAAW,GAAGR,MAAMS,QAAQ,CAAC;IAE7CT,MAAMU,SAAS,CAAC;QACd,+DAA+D;QAC/D,oGAAoG;QACpGF,WAAW;IACb,GAAG,EAAE;IAEL,qBAAO,oBAACT,yBAAmBQ,WAAWD,MAAMK,QAAQ;AACtD"}

package/lib/decorators/withFluentProvider.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { teamsDarkTheme, teamsDarkV21Theme, teamsHighContrastTheme, teamsLightTheme, teamsLightV21Theme, webDarkTheme, webLightTheme } from '@fluentui/react-theme';
+import { defaultTheme } from '../theme';
+import { DIR_ID, THEME_ID } from '../constants';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+const themes = {
+    'web-light': webLightTheme,
+    'web-dark': webDarkTheme,
+    'teams-light': teamsLightTheme,
+    'teams-dark': teamsDarkTheme,
+    'teams-high-contrast': teamsHighContrastTheme,
+    'teams-light-v21': teamsLightV21Theme,
+    'teams-dark-v21': teamsDarkV21Theme
+};
+const findTheme = (themeId)=>{
+    return themeId ? themes[themeId] : null;
+};
+export const withFluentProvider = (StoryFn, context)=>{
+    const { globals, parameters } = context;
+    const { mode } = parameters;
+    if (isDecoratorDisabled(context, 'FluentProvider')) {
+        return StoryFn();
+    }
+    const isVrTest = mode === 'vr-test';
+    var _parameters_dir, _ref;
+    const dir = (_ref = (_parameters_dir = parameters.dir) !== null && _parameters_dir !== void 0 ? _parameters_dir : globals[DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
+    const globalTheme = findTheme(globals[THEME_ID]);
+    const paramTheme = findTheme(parameters.fluentTheme);
+    var _ref1;
+    const theme = (_ref1 = paramTheme !== null && paramTheme !== void 0 ? paramTheme : globalTheme) !== null && _ref1 !== void 0 ? _ref1 : themes[defaultTheme.id];
+    return /*#__PURE__*/ React.createElement(FluentProvider, {
+        theme: theme,
+        dir: dir
+    }, isVrTest ? StoryFn() : /*#__PURE__*/ React.createElement(FluentExampleContainer, {
+        theme: theme
+    }, StoryFn()));
+};
+const FluentExampleContainer = (props)=>{
+    const { theme } = props;
+    const backgroundColor = theme.colorNeutralBackground2;
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            padding: '48px 24px',
+            backgroundColor
+        }
+    }, props.children);
+};

package/lib/decorators/withFluentProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { FluentProvider } from '@fluentui/react-provider';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport {\n  Theme,\n  teamsDarkTheme,\n  teamsDarkV21Theme,\n  teamsHighContrastTheme,\n  teamsLightTheme,\n  teamsLightV21Theme,\n  webDarkTheme,\n  webLightTheme,\n} from '@fluentui/react-theme';\nimport { defaultTheme, ThemeIds } from '../theme';\nimport { DIR_ID, THEME_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nconst themes: Record<ThemeIds, Theme> = {\n  'web-light': webLightTheme,\n  'web-dark': webDarkTheme,\n  'teams-light': teamsLightTheme,\n  'teams-dark': teamsDarkTheme,\n  'teams-high-contrast': teamsHighContrastTheme,\n  'teams-light-v21': teamsLightV21Theme,\n  'teams-dark-v21': teamsDarkV21Theme,\n} as const;\n\nconst findTheme = (themeId?: ThemeIds) => {\n  return themeId ? themes[themeId] : null;\n};\n\nexport const withFluentProvider = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  const { globals, parameters } = context;\n  const { mode } = parameters;\n\n  if (isDecoratorDisabled(context, 'FluentProvider')) {\n    return StoryFn();\n  }\n\n  const isVrTest = mode === 'vr-test';\n  const dir = parameters.dir ?? globals[DIR_ID] ?? 'ltr';\n  const globalTheme = findTheme(globals[THEME_ID]);\n  const paramTheme = findTheme(parameters.fluentTheme);\n  const theme = paramTheme ?? globalTheme ?? themes[defaultTheme.id];\n\n  return (\n    <FluentProvider theme={theme} dir={dir}>\n      {isVrTest ? StoryFn() : <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>}\n    </FluentProvider>\n  );\n};\n\nconst FluentExampleContainer: React.FC<{ children: React.ReactNode; theme: Theme }> = props => {\n  const { theme } = props;\n\n  const backgroundColor = theme.colorNeutralBackground2;\n  return <div style={{ padding: '48px 24px', backgroundColor }}>{props.children}</div>;\n};\n"],"names":["React","FluentProvider","teamsDarkTheme","teamsDarkV21Theme","teamsHighContrastTheme","teamsLightTheme","teamsLightV21Theme","webDarkTheme","webLightTheme","defaultTheme","DIR_ID","THEME_ID","isDecoratorDisabled","themes","findTheme","themeId","withFluentProvider","StoryFn","context","globals","parameters","mode","isVrTest","dir","globalTheme","paramTheme","fluentTheme","theme","id","FluentExampleContainer","props","backgroundColor","colorNeutralBackground2","div","style","padding","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAEEC,cAAc,EACdC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACZC,aAAa,QACR,wBAAwB;AAC/B,SAASC,YAAY,QAAkB,WAAW;AAClD,SAASC,MAAM,EAAEC,QAAQ,QAAQ,eAAe;AAEhD,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,MAAMC,SAAkC;IACtC,aAAaL;IACb,YAAYD;IACZ,eAAeF;IACf,cAAcH;IACd,uBAAuBE;IACvB,mBAAmBE;IACnB,kBAAkBH;AACpB;AAEA,MAAMW,YAAY,CAACC;IACjB,OAAOA,UAAUF,MAAM,CAACE,QAAQ,GAAG;AACrC;AAEA,OAAO,MAAMC,qBAAqB,CAACC,SAA2BC;IAC5D,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGF;IAChC,MAAM,EAAEG,IAAI,EAAE,GAAGD;IAEjB,IAAIR,oBAAoBM,SAAS,mBAAmB;QAClD,OAAOD;IACT;IAEA,MAAMK,WAAWD,SAAS;QACdD,iBAAAA;IAAZ,MAAMG,MAAMH,CAAAA,OAAAA,CAAAA,kBAAAA,WAAWG,GAAG,cAAdH,6BAAAA,kBAAkBD,OAAO,CAACT,OAAO,cAAjCU,kBAAAA,OAAqC;IACjD,MAAMI,cAAcV,UAAUK,OAAO,CAACR,SAAS;IAC/C,MAAMc,aAAaX,UAAUM,WAAWM,WAAW;QACrCD;IAAd,MAAME,QAAQF,CAAAA,QAAAA,uBAAAA,wBAAAA,aAAcD,yBAAdC,mBAAAA,QAA6BZ,MAAM,CAACJ,aAAamB,EAAE,CAAC;IAElE,qBACE,oBAAC3B;QAAe0B,OAAOA;QAAOJ,KAAKA;OAChCD,WAAWL,0BAAY,oBAACY;QAAuBF,OAAOA;OAAQV;AAGrE,EAAE;AAEF,MAAMY,yBAAgFC,CAAAA;IACpF,MAAM,EAAEH,KAAK,EAAE,GAAGG;IAElB,MAAMC,kBAAkBJ,MAAMK,uBAAuB;IACrD,qBAAO,oBAACC;QAAIC,OAAO;YAAEC,SAAS;YAAaJ;QAAgB;OAAID,MAAMM,QAAQ;AAC/E"}

package/lib/decorators/withReactStrictMode.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { STRICT_MODE_ID } from '../constants';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+export const withReactStrictMode = (StoryFn, context)=>{
+    if (isDecoratorDisabled(context, 'ReactStrictMode')) {
+        return StoryFn();
+    }
+    var _context_globals_STRICT_MODE_ID;
+    const isActive = (_context_globals_STRICT_MODE_ID = context.globals[STRICT_MODE_ID]) !== null && _context_globals_STRICT_MODE_ID !== void 0 ? _context_globals_STRICT_MODE_ID : false;
+    return /*#__PURE__*/ React.createElement(StrictModeWrapper, {
+        strictMode: isActive
+    }, StoryFn());
+};
+const StrictModeWrapper = (props)=>{
+    return props.strictMode ? /*#__PURE__*/ React.createElement(React.StrictMode, null, props.children) : props.children;
+};

package/lib/decorators/withReactStrictMode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { STRICT_MODE_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nexport const withReactStrictMode = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  if (isDecoratorDisabled(context, 'ReactStrictMode')) {\n    return StoryFn();\n  }\n\n  const isActive = context.globals[STRICT_MODE_ID] ?? false;\n\n  return <StrictModeWrapper strictMode={isActive}>{StoryFn()}</StrictModeWrapper>;\n};\n\nconst StrictModeWrapper = (props: { strictMode: boolean; children: React.ReactElement }) => {\n  return props.strictMode ? <React.StrictMode>{props.children}</React.StrictMode> : props.children;\n};\n"],"names":["React","STRICT_MODE_ID","isDecoratorDisabled","withReactStrictMode","StoryFn","context","isActive","globals","StrictModeWrapper","strictMode","props","StrictMode","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,cAAc,QAAQ,eAAe;AAE9C,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,OAAO,MAAMC,sBAAsB,CAACC,SAA2BC;IAC7D,IAAIH,oBAAoBG,SAAS,oBAAoB;QACnD,OAAOD;IACT;QAEiBC;IAAjB,MAAMC,WAAWD,CAAAA,kCAAAA,QAAQE,OAAO,CAACN,eAAe,cAA/BI,6CAAAA,kCAAmC;IAEpD,qBAAO,oBAACG;QAAkBC,YAAYH;OAAWF;AACnD,EAAE;AAEF,MAAMI,oBAAoB,CAACE;IACzB,OAAOA,MAAMD,UAAU,iBAAG,oBAACT,MAAMW,UAAU,QAAED,MAAME,QAAQ,IAAuBF,MAAME,QAAQ;AAClG"}

package/lib/docs/CopyAsMarkdownButton.js

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { SplitButton } from '@fluentui/react-button';
+import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
+import { Spinner } from '@fluentui/react-spinner';
+import { Toast, Toaster, ToastTitle, useToastController } from '@fluentui/react-toast';
+import { useId } from '@fluentui/react-utilities';
+import { makeStyles } from '@griffel/react';
+import { bundleIcon, MarkdownFilled, MarkdownRegular } from '@fluentui/react-icons';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const MarkdownIcon = bundleIcon(MarkdownFilled, MarkdownRegular);
+const useStyles = makeStyles({
+    button: {
+        marginInlineStart: 'auto'
+    }
+});
+/**
+ * A button that allows users to copy the current page as markdown to their clipboard or view it in a new tab.
+ * The markdown content is fetched from the Storybook API and cached for subsequent requests.
+ */ export const CopyAsMarkdownButton = ({ storyId = '' })=>{
+    const { targetDocument } = useFluent();
+    const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const styles = useStyles();
+    const toastId = useId('copy-toast');
+    const toasterId = useId('toaster');
+    const { dispatchToast, updateToast } = useToastController(toasterId);
+    // Cache for the fetched markdown content to avoid redundant network requests
+    const markdownContentCache = React.useRef(null);
+    // AbortController to track and cancel fetch requests
+    const abortControllerRef = React.useRef(null);
+    // Full URL to the markdown endpoint for this story
+    const markdownUrl = React.useMemo(()=>{
+        return targetWindow ? convertStoryIdToMarkdownUrl(targetWindow, storyId) : '';
+    }, [
+        storyId,
+        targetWindow
+    ]);
+    // Cleanup: abort pending requests on unmount
+    React.useEffect(()=>{
+        return ()=>{
+            var _abortControllerRef_current;
+            (_abortControllerRef_current = abortControllerRef.current) === null || _abortControllerRef_current === void 0 ? void 0 : _abortControllerRef_current.abort();
+        };
+    }, []);
+    /**
+   * Fetches the markdown content (with caching) and copies it to the clipboard.
+   * Shows a toast notification with loading, success, or error states.
+   * Skips the request if one is already in progress.
+   */ const copyPageContentToClipboard = React.useCallback(async ()=>{
+        // Skip if a request is already in progress (abort controller exists and not aborted)
+        if (abortControllerRef.current && !abortControllerRef.current.signal.aborted) {
+            return;
+        }
+        // Ensure we have a window context to use for clipboard and fetch
+        if (!targetWindow) {
+            return;
+        }
+        // Create new AbortController for this request
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        // Show loading toast that persists until updated
+        dispatchToast(/*#__PURE__*/ React.createElement(Toast, null, /*#__PURE__*/ React.createElement(ToastTitle, {
+            media: /*#__PURE__*/ React.createElement(Spinner, null)
+        }, "Copying page content...")), {
+            toastId,
+            intent: 'info',
+            timeout: -1
+        });
+        try {
+            // Use cached content if available, otherwise fetch from API
+            if (!markdownContentCache.current) {
+                markdownContentCache.current = await fetchMarkdownContent(targetWindow, markdownUrl, abortController.signal);
+            }
+            // Copy to clipboard
+            await (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.navigator.clipboard.writeText(markdownContentCache.current));
+            // Update toast to success
+            updateToast({
+                content: /*#__PURE__*/ React.createElement(Toast, null, /*#__PURE__*/ React.createElement(ToastTitle, null, "Page content copied to clipboard!")),
+                intent: 'success',
+                toastId,
+                timeout: 3000
+            });
+        } catch (error) {
+            // Don't show error if request was aborted
+            if (abortController.signal.aborted) {
+                return;
+            }
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            // Update toast to error
+            updateToast({
+                content: /*#__PURE__*/ React.createElement(Toast, null, /*#__PURE__*/ React.createElement(ToastTitle, null, "Failed to copy page content: ", errorMessage)),
+                intent: 'error',
+                toastId,
+                timeout: 3000
+            });
+        } finally{
+            // Clear the abort controller ref to allow new requests
+            abortControllerRef.current = null;
+        }
+    }, [
+        dispatchToast,
+        updateToast,
+        toastId,
+        markdownUrl,
+        targetWindow
+    ]);
+    /** Opens the markdown content in a new browser tab */ const openInNewTab = React.useCallback(()=>{
+        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.open(markdownUrl, '_blank');
+    }, [
+        markdownUrl,
+        targetWindow
+    ]);
+    if (!storyId) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Menu, {
+        positioning: "below-end"
+    }, /*#__PURE__*/ React.createElement(MenuTrigger, {
+        disableButtonEnhancement: true
+    }, (triggerProps)=>/*#__PURE__*/ React.createElement(SplitButton, {
+            className: styles.button,
+            menuButton: triggerProps,
+            primaryActionButton: {
+                appearance: 'secondary',
+                icon: /*#__PURE__*/ React.createElement(MarkdownIcon, null),
+                onClick: copyPageContentToClipboard,
+                'aria-label': 'Copy page content as markdown to clipboard'
+            },
+            "aria-label": "Copy page as markdown"
+        }, "Copy Page")), /*#__PURE__*/ React.createElement(MenuPopover, null, /*#__PURE__*/ React.createElement(MenuList, null, /*#__PURE__*/ React.createElement(MenuItem, {
+        icon: /*#__PURE__*/ React.createElement(MarkdownIcon, null),
+        onClick: openInNewTab
+    }, "View as Markdown")))), /*#__PURE__*/ React.createElement(Toaster, {
+        toasterId: toasterId
+    }));
+};
+/**
+ * Regex pattern to remove the story variant suffix from Storybook story IDs.
+ * @example "button--primary" -> "button"
+ */ const STORYBOOK_VARIANT_SUFFIX_PATTERN = /--\w+$/g;
+/**
+ * Gets the base URL for fetching markdown content from the Storybook LLM endpoint.
+ * Each story's markdown is available at: {BASE_URL}/{storyId}.txt
+ * @param targetWindow - The window object to use for location access
+ * @returns The base URL constructed from current location origin and pathname
+ */ function getStorybookMarkdownApiBaseUrl(targetWindow) {
+    // Remove the [page].html file from pathname and append /llms/
+    const basePath = targetWindow.location.pathname.replace(/\/[^/]*\.html$/, '');
+    return `${targetWindow.location.origin}${basePath}/llms/`;
+}
+/**
+ * Converts a Storybook story ID to a markdown URL.
+ * @param targetWindow - The window object to use for location access
+ * @param storyId - The Storybook story ID
+ * @returns The full URL to the markdown endpoint for the story
+ * @example "button--primary" -> "https://storybooks.fluentui.dev/llms/button.txt"
+ */ function convertStoryIdToMarkdownUrl(targetWindow, storyId) {
+    return `${getStorybookMarkdownApiBaseUrl(targetWindow)}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;
+}
+/**
+ * Fetches markdown content from the Storybook API.
+ * @param targetWindow - The window object to use for fetch access
+ * @param url - The URL to fetch markdown content from
+ * @param signal - Optional AbortSignal to cancel the request
+ * @returns Promise resolving to the markdown text content
+ * @throws Error if the fetch request fails or is aborted
+ */ async function fetchMarkdownContent(targetWindow, url, signal) {
+    const response = await targetWindow.fetch(url, {
+        headers: {
+            'Content-Type': 'text/plain'
+        },
+        signal
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);
+    }
+    return response.text();
+}

package/lib/docs/CopyAsMarkdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/CopyAsMarkdownButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SplitButton, type MenuButtonProps } from '@fluentui/react-button';\nimport { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';\nimport { Spinner } from '@fluentui/react-spinner';\nimport { Toast, Toaster, ToastTitle, useToastController } from '@fluentui/react-toast';\nimport { useId } from '@fluentui/react-utilities';\nimport { makeStyles } from '@griffel/react';\nimport { bundleIcon, MarkdownFilled, MarkdownRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst MarkdownIcon = bundleIcon(MarkdownFilled, MarkdownRegular);\n\nconst useStyles = makeStyles({\n  button: {\n    marginInlineStart: 'auto',\n  },\n});\n\nexport interface CopyAsMarkdownProps {\n  /** The Storybook story ID used to generate the markdown URL */\n  storyId?: string;\n}\n\n/**\n * A button that allows users to copy the current page as markdown to their clipboard or view it in a new tab.\n * The markdown content is fetched from the Storybook API and cached for subsequent requests.\n */\nexport const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId = '' }) => {\n  const { targetDocument } = useFluent();\n  const targetWindow = targetDocument?.defaultView;\n  const styles = useStyles();\n  const toastId = useId('copy-toast');\n  const toasterId = useId('toaster');\n  const { dispatchToast, updateToast } = useToastController(toasterId);\n\n  // Cache for the fetched markdown content to avoid redundant network requests\n  const markdownContentCache = React.useRef<string | null>(null);\n\n  // AbortController to track and cancel fetch requests\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n\n  // Full URL to the markdown endpoint for this story\n  const markdownUrl = React.useMemo(() => {\n    return targetWindow ? convertStoryIdToMarkdownUrl(targetWindow, storyId) : '';\n  }, [storyId, targetWindow]);\n\n  // Cleanup: abort pending requests on unmount\n  React.useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  /**\n   * Fetches the markdown content (with caching) and copies it to the clipboard.\n   * Shows a toast notification with loading, success, or error states.\n   * Skips the request if one is already in progress.\n   */\n  const copyPageContentToClipboard = React.useCallback(async () => {\n    // Skip if a request is already in progress (abort controller exists and not aborted)\n    if (abortControllerRef.current && !abortControllerRef.current.signal.aborted) {\n      return;\n    }\n\n    // Ensure we have a window context to use for clipboard and fetch\n    if (!targetWindow) {\n      return;\n    }\n\n    // Create new AbortController for this request\n    const abortController = new AbortController();\n    abortControllerRef.current = abortController;\n\n    // Show loading toast that persists until updated\n    dispatchToast(\n      <Toast>\n        <ToastTitle media={<Spinner />}>Copying page content...</ToastTitle>\n      </Toast>,\n      {\n        toastId,\n        intent: 'info',\n        timeout: -1, // Never auto-dismiss\n      },\n    );\n\n    try {\n      // Use cached content if available, otherwise fetch from API\n      if (!markdownContentCache.current) {\n        markdownContentCache.current = await fetchMarkdownContent(targetWindow, markdownUrl, abortController.signal);\n      }\n\n      // Copy to clipboard\n      await targetWindow?.navigator.clipboard.writeText(markdownContentCache.current);\n\n      // Update toast to success\n      updateToast({\n        content: (\n          <Toast>\n            <ToastTitle>Page content copied to clipboard!</ToastTitle>\n          </Toast>\n        ),\n        intent: 'success',\n        toastId,\n        timeout: 3000,\n      });\n    } catch (error) {\n      // Don't show error if request was aborted\n      if (abortController.signal.aborted) {\n        return;\n      }\n\n      const errorMessage = error instanceof Error ? error.message : String(error);\n\n      // Update toast to error\n      updateToast({\n        content: (\n          <Toast>\n            <ToastTitle>Failed to copy page content: {errorMessage}</ToastTitle>\n          </Toast>\n        ),\n        intent: 'error',\n        toastId,\n        timeout: 3000,\n      });\n    } finally {\n      // Clear the abort controller ref to allow new requests\n      abortControllerRef.current = null;\n    }\n  }, [dispatchToast, updateToast, toastId, markdownUrl, targetWindow]);\n\n  /** Opens the markdown content in a new browser tab */\n  const openInNewTab = React.useCallback(() => {\n    targetWindow?.open(markdownUrl, '_blank');\n  }, [markdownUrl, targetWindow]);\n\n  if (!storyId) {\n    return null;\n  }\n\n  return (\n    <>\n      <Menu positioning=\"below-end\">\n        <MenuTrigger disableButtonEnhancement>\n          {(triggerProps: MenuButtonProps) => (\n            <SplitButton\n              className={styles.button}\n              menuButton={triggerProps}\n              primaryActionButton={{\n                appearance: 'secondary',\n                icon: <MarkdownIcon />,\n                onClick: copyPageContentToClipboard,\n                'aria-label': 'Copy page content as markdown to clipboard',\n              }}\n              aria-label=\"Copy page as markdown\"\n            >\n              Copy Page\n            </SplitButton>\n          )}\n        </MenuTrigger>\n\n        <MenuPopover>\n          <MenuList>\n            <MenuItem icon={<MarkdownIcon />} onClick={openInNewTab}>\n              View as Markdown\n            </MenuItem>\n          </MenuList>\n        </MenuPopover>\n      </Menu>\n      <Toaster toasterId={toasterId} />\n    </>\n  );\n};\n\n/**\n * Regex pattern to remove the story variant suffix from Storybook story IDs.\n * @example \"button--primary\" -> \"button\"\n */\nconst STORYBOOK_VARIANT_SUFFIX_PATTERN = /--\\w+$/g;\n\n/**\n * Gets the base URL for fetching markdown content from the Storybook LLM endpoint.\n * Each story's markdown is available at: {BASE_URL}/{storyId}.txt\n * @param targetWindow - The window object to use for location access\n * @returns The base URL constructed from current location origin and pathname\n */\nfunction getStorybookMarkdownApiBaseUrl(targetWindow: Window): string {\n  // Remove the [page].html file from pathname and append /llms/\n  const basePath = targetWindow.location.pathname.replace(/\\/[^/]*\\.html$/, '');\n  return `${targetWindow.location.origin}${basePath}/llms/`;\n}\n\n/**\n * Converts a Storybook story ID to a markdown URL.\n * @param targetWindow - The window object to use for location access\n * @param storyId - The Storybook story ID\n * @returns The full URL to the markdown endpoint for the story\n * @example \"button--primary\" -> \"https://storybooks.fluentui.dev/llms/button.txt\"\n */\nfunction convertStoryIdToMarkdownUrl(targetWindow: Window, storyId: string): string {\n  return `${getStorybookMarkdownApiBaseUrl(targetWindow)}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;\n}\n\n/**\n * Fetches markdown content from the Storybook API.\n * @param targetWindow - The window object to use for fetch access\n * @param url - The URL to fetch markdown content from\n * @param signal - Optional AbortSignal to cancel the request\n * @returns Promise resolving to the markdown text content\n * @throws Error if the fetch request fails or is aborted\n */\nasync function fetchMarkdownContent(\n  targetWindow: Window,\n  url: string,\n  signal: AbortSignal | undefined,\n): Promise<string> {\n  const response = await targetWindow.fetch(url, {\n    headers: {\n      'Content-Type': 'text/plain',\n    },\n    signal,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);\n  }\n\n  return response.text();\n}\n"],"names":["React","SplitButton","Menu","MenuItem","MenuList","MenuPopover","MenuTrigger","Spinner","Toast","Toaster","ToastTitle","useToastController","useId","makeStyles","bundleIcon","MarkdownFilled","MarkdownRegular","useFluent_unstable","useFluent","MarkdownIcon","useStyles","button","marginInlineStart","CopyAsMarkdownButton","storyId","targetDocument","targetWindow","defaultView","styles","toastId","toasterId","dispatchToast","updateToast","markdownContentCache","useRef","abortControllerRef","markdownUrl","useMemo","convertStoryIdToMarkdownUrl","useEffect","current","abort","copyPageContentToClipboard","useCallback","signal","aborted","abortController","AbortController","media","intent","timeout","fetchMarkdownContent","navigator","clipboard","writeText","content","error","errorMessage","Error","message","String","openInNewTab","open","positioning","disableButtonEnhancement","triggerProps","className","menuButton","primaryActionButton","appearance","icon","onClick","aria-label","STORYBOOK_VARIANT_SUFFIX_PATTERN","getStorybookMarkdownApiBaseUrl","basePath","location","pathname","replace","origin","url","response","fetch","headers","ok","status","statusText","text"],"mappings":"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"}