@fluentui-react-native/storybook-desktop-runtime 0.2.1 → 0.3.1

package/lib/createDesktopStorybookApp.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyleSheet, View as NativeView } from 'react-native';
 import { DesktopDriverBridge } from './DesktopDriverBridge';
-import { DesktopStorybookConfigProvider, useDesktopStorybookTestID } from './DesktopStorybookConfig';
+import { DesktopStorybookConfigProvider } from './DesktopStorybookConfig';
 import { StorybookThemeHost } from './StorybookTheme';
-import { StorybookUIComponent } from './StorybookUI';
+import { ThemedStorybookUI } from './ThemedStorybookUI';
 export function createDesktopStorybookApp(view, { enableWebsockets = true, host = '127.0.0.1', port, testIDPrefix = 'storybook-desktop' } = {}) {
     const runtimeInstance = globalThis.__FURN_DESKTOP_STORYBOOK_INSTANCE__;
     const memoryStore = {};
@@ -17,22 +16,13 @@ export function createDesktopStorybookApp(view, { enableWebsockets = true, host
         enableWebsockets,
         host,
         port: port ?? runtimeInstance?.storybookPort ?? 7007,
-        CustomUIComponent: StorybookUIComponent,
+        CustomUIComponent: ThemedStorybookUI,
         storage,
     });
     function DesktopStorybookApp() {
         const resolvedTestIDPrefix = runtimeInstance?.testIDPrefix ?? testIDPrefix;
-        return (_jsx(DesktopStorybookConfigProvider, { runtimeInstance: runtimeInstance, testIDPrefix: resolvedTestIDPrefix, children: _jsxs(DesktopStorybookAppRoot, { children: [_jsx(DesktopDriverBridge, {}), _jsx(StorybookThemeHost, { children: _jsx(StorybookUI, {}) })] }) }));
+        return (_jsx(DesktopStorybookConfigProvider, { runtimeInstance: runtimeInstance, testIDPrefix: resolvedTestIDPrefix, children: _jsxs(StorybookThemeHost, { children: [_jsx(DesktopDriverBridge, {}), _jsx(StorybookUI, {})] }) }));
     }
     return DesktopStorybookApp;
 }
-function DesktopStorybookAppRoot({ children }) {
-    const testID = useDesktopStorybookTestID('app-root');
-    return (_jsx(NativeView, { style: styles.root, testID: testID, children: children }));
-}
-const styles = StyleSheet.create({
-    root: {
-        flex: 1,
-    },
-});
 //# sourceMappingURL=createDesktopStorybookApp.js.map

package/lib/createDesktopStorybookApp.js.map

@@ -1 +1 @@
-{"version":3,"file":"createDesktopStorybookApp.js","sourceRoot":"","sources":["../src/createDesktopStorybookApp.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAG9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,8BAA8B,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAErG,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AASrD,MAAM,UAAU,yBAAyB,CACvC,IAAkC,EAClC,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,GAAG,WAAW,EAAE,IAAI,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAA4B,EAAE;IAEvH,MAAM,eAAe,GACnB,UAGD,CAAC,mCAAmC,CAAC;IACtC,MAAM,WAAW,GAA2B,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG;QACd,OAAO,EAAE,KAAK,EAAE,GAAW,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9E,OAAO,EAAE,KAAK,EAAE,GAAW,EAAE,KAAa,EAAE,EAAE;YAC5C,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QAC3B,CAAC;KACF,CAAC;IACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;QACtC,gBAAgB;QAChB,IAAI;QACJ,IAAI,EAAE,IAAI,IAAI,eAAe,EAAE,aAAa,IAAI,IAAI;QACpD,iBAAiB,EAAE,oBAAoB;QACvC,OAAO;KACR,CAAC,CAAC;IAEH,SAAS,mBAAmB;QAC1B,MAAM,oBAAoB,GAAG,eAAe,EAAE,YAAY,IAAI,YAAY,CAAC;QAC3E,OAAO,CACL,KAAC,8BAA8B,IAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,oBAAoB,YAClG,MAAC,uBAAuB,eACtB,KAAC,mBAAmB,KAAG,EACvB,KAAC,kBAAkB,cACjB,KAAC,WAAW,KAAG,GACI,IACG,GACK,CAClC,CAAC;IACJ,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAED,SAAS,uBAAuB,CAAC,EAAE,QAAQ,EAA2B;IACpE,MAAM,MAAM,GAAG,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACrD,OAAO,CACL,KAAC,UAAU,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,YAC3C,QAAQ,GACE,CACd,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAC"}
+{"version":3,"file":"createDesktopStorybookApp.js","sourceRoot":"","sources":["../src/createDesktopStorybookApp.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAE1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AASxD,MAAM,UAAU,yBAAyB,CACvC,IAAkC,EAClC,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,GAAG,WAAW,EAAE,IAAI,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAA4B,EAAE;IAEvH,MAAM,eAAe,GACnB,UAGD,CAAC,mCAAmC,CAAC;IACtC,MAAM,WAAW,GAA2B,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG;QACd,OAAO,EAAE,KAAK,EAAE,GAAW,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9E,OAAO,EAAE,KAAK,EAAE,GAAW,EAAE,KAAa,EAAE,EAAE;YAC5C,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QAC3B,CAAC;KACF,CAAC;IACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;QACtC,gBAAgB;QAChB,IAAI;QACJ,IAAI,EAAE,IAAI,IAAI,eAAe,EAAE,aAAa,IAAI,IAAI;QACpD,iBAAiB,EAAE,iBAAiB;QACpC,OAAO;KACR,CAAC,CAAC;IAEH,SAAS,mBAAmB;QAC1B,MAAM,oBAAoB,GAAG,eAAe,EAAE,YAAY,IAAI,YAAY,CAAC;QAC3E,OAAO,CACL,KAAC,8BAA8B,IAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,oBAAoB,YAClG,MAAC,kBAAkB,eACjB,KAAC,mBAAmB,KAAG,EACvB,KAAC,WAAW,KAAG,IACI,GACU,CAClC,CAAC;IACJ,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC"}

package/lib/createDesktopStorybookPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDesktopStorybookPreview.d.ts","sourceRoot":"","sources":["../src/createDesktopStorybookPreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAKvD,wBAAgB,6BAA6B,IAAI,OAAO,CAevD"}
+{"version":3,"file":"createDesktopStorybookPreview.d.ts","sourceRoot":"","sources":["../src/createDesktopStorybookPreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIvD,wBAAgB,6BAA6B,IAAI,OAAO,CAavD"}

package/lib/createDesktopStorybookPreview.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, View } from 'react-native';
 import { DesktopStoryRoot } from './DesktopStoryRoot';
-import { StorybookThemeProvider } from './StorybookTheme';
 export function createDesktopStorybookPreview() {
     return {
         decorators: [
-            (Story, context) => (_jsx(StorybookThemeProvider, { children: _jsx(DesktopStoryRoot, { storyId: context.id, children: _jsx(View, { style: styles.story, children: _jsx(Story, {}) }) }) })),
+            (Story, context) => (_jsx(DesktopStoryRoot, { storyId: context.id, children: _jsx(View, { style: styles.story, children: _jsx(Story, {}) }) })),
         ],
         parameters: {},
     };

package/lib/createDesktopStorybookPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"createDesktopStorybookPreview.js","sourceRoot":"","sources":["../src/createDesktopStorybookPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,MAAM,UAAU,6BAA6B;IAC3C,OAAO;QACL,UAAU,EAAE;YACV,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAClB,KAAC,sBAAsB,cACrB,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,CAAC,EAAE,YACnC,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YACvB,KAAC,KAAK,KAAG,GACJ,GACU,GACI,CAC1B;SACF;QACD,UAAU,EAAE,EAAE;KACf,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,UAAU,EAAE,QAAQ;QACpB,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,OAAO,EAAE,EAAE;KACZ;CACF,CAAC,CAAC"}
+{"version":3,"file":"createDesktopStorybookPreview.js","sourceRoot":"","sources":["../src/createDesktopStorybookPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,UAAU,6BAA6B;IAC3C,OAAO;QACL,UAAU,EAAE;YACV,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAClB,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,CAAC,EAAE,YACnC,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YACvB,KAAC,KAAK,KAAG,GACJ,GACU,CACpB;SACF;QACD,UAAU,EAAE,EAAE;KACf,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,UAAU,EAAE,QAAQ;QACpB,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,OAAO,EAAE,EAAE;KACZ;CACF,CAAC,CAAC"}

package/lib/useStorybookTheme.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from '@storybook/react-native-theming';
+export declare function useStorybookTheme(): Theme;
+//# sourceMappingURL=useStorybookTheme.d.ts.map

package/lib/useStorybookTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.d.ts","sourceRoot":"","sources":["../src/useStorybookTheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AAE7D,wBAAgB,iBAAiB,IAAI,KAAK,CAWzC"}

package/lib/useStorybookTheme.js

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useThemeState } from '@fluentui-react-native/design';
+import { darkTheme, theme as lightTheme } from '@storybook/react-native-theming';
+export function useStorybookTheme() {
+    const state = useThemeState();
+    const { theme, nativeColors } = React.useMemo(() => storybookThemeFromThemeState(state), [state]);
+    React.useEffect(() => {
+        if (nativeColors.length > 0) {
+            console.warn(`Storybook chrome cannot resolve native system colors; using fixed contrasting theme colors for: ${nativeColors.join(', ')}.`);
+        }
+    }, [nativeColors]);
+    return theme;
+}
+function storybookThemeFromThemeState({ appearance, highContrast, tokens }) {
+    const base = highContrast || appearance.colorScheme === 'dark' ? darkTheme : lightTheme;
+    const foreground = base.base === 'dark' ? 'fixedWhite' : 'fixedBlack';
+    const background = base.base === 'dark' ? 'fixedBlack' : 'fixedWhite';
+    const nativeColors = new Set();
+    const color = (name, role = 'foreground') => {
+        const value = tokens.color[name];
+        // Storybook also passes these colors to JS color utilities, not just native styles.
+        if (typeof value === 'string') {
+            return value;
+        }
+        nativeColors.add(name);
+        const fallbackName = role === 'foreground' ? foreground : background;
+        const fallback = tokens.color[fallbackName];
+        if (typeof fallback !== 'string') {
+            throw new Error(`Storybook chrome requires a literal "${fallbackName}" fallback for the "${name}" theme token.`);
+        }
+        return fallback;
+    };
+    const theme = {
+        ...base,
+        color: {
+            ...base.color,
+            primary: color('foregroundBrandPrimary'),
+            secondary: color('backgroundBrandHeavy'),
+            secondaryLighter: color('backgroundBrandSoft', 'background'),
+            tertiary: color('foregroundSuccessPrimary'),
+            ancillary: color('foregroundBrandPrimary'),
+            orange: color('foregroundWarningPrimary'),
+            gold: color('foregroundWarningPrimary'),
+            green: color('foregroundSuccessPrimary'),
+            seafoam: color('foregroundSuccessPrimary'),
+            purple: color('foregroundBrandPrimary'),
+            ultraviolet: color('foregroundBrandPrimary'),
+            lightest: color('foregroundBrandOnloud', 'background'),
+            lighter: color('surfaceNeutralNear', 'background'),
+            light: color('backgroundNeutralSubtle', 'background'),
+            mediumlight: color('strokeNeutralSubtle'),
+            medium: color('strokeNeutralSoft'),
+            mediumdark: color('foregroundNeutralSecondary'),
+            dark: color('foregroundNeutralPrimary'),
+            darker: color('foregroundNeutralPrimary'),
+            darkest: color('foregroundNeutralPrimary'),
+            border: color('strokeNeutralSoft'),
+            positive: color('foregroundSuccessPrimary'),
+            negative: color('foregroundDangerPrimary'),
+            warning: color('foregroundWarningPrimary'),
+            critical: color('foregroundDangerPrimary'),
+            defaultText: color('foregroundNeutralPrimary'),
+            inverseText: color('foregroundNeutralOnloud', 'background'),
+            positiveText: color('foregroundSuccessPrimary'),
+            negativeText: color('foregroundDangerPrimary'),
+            warningText: color('foregroundWarningPrimary'),
+        },
+        background: {
+            ...base.background,
+            app: color('surfaceNeutralFar', 'background'),
+            bar: color('backgroundNeutralSubtle', 'background'),
+            // LiteUI and StoryView paint the canvas with content rather than preview.
+            content: color('surfaceNeutralFar', 'background'),
+            preview: color('surfaceNeutralFar', 'background'),
+            hoverable: color('backgroundNeutralSoft', 'background'),
+            positive: color('backgroundSuccessSubtle', 'background'),
+            negative: color('backgroundDangerSubtle', 'background'),
+            warning: color('backgroundWarningSubtle', 'background'),
+            critical: color('backgroundDangerSubtle', 'background'),
+        },
+        textMutedColor: color('foregroundNeutralTertiary'),
+        input: {
+            ...base.input,
+            border: color('strokeNeutralSoft'),
+            background: color('backgroundNeutralLoud', 'background'),
+            color: color('foregroundNeutralPrimary'),
+        },
+        button: {
+            ...base.button,
+            background: color('backgroundNeutralLoud', 'background'),
+            border: color('strokeNeutralSoft'),
+        },
+        boolean: {
+            ...base.boolean,
+            background: color('backgroundNeutralSoft', 'background'),
+            selectedBackground: color('backgroundBrandHeavy'),
+        },
+        appBorderColor: color('strokeNeutralSubtle'),
+        barTextColor: color('foregroundNeutralPrimary'),
+        barHoverColor: color('foregroundBrandPrimary'),
+        barSelectedColor: color('foregroundBrandPrimary'),
+        barBg: color('backgroundNeutralSubtle', 'background'),
+    };
+    return { theme, nativeColors: [...nativeColors] };
+}
+//# sourceMappingURL=useStorybookTheme.js.map

package/lib/useStorybookTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.js","sourceRoot":"","sources":["../src/useStorybookTheme.ts"],"names":[],"mappings":"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"}

package/lib/useStorybookTheme.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useStorybookTheme.test.d.ts.map

package/lib/useStorybookTheme.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.test.d.ts","sourceRoot":"","sources":["../src/useStorybookTheme.test.tsx"],"names":[],"mappings":""}

package/lib/useStorybookTheme.test.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PlatformColor } from 'react-native';
+import { act, render } from '@testing-library/react-native';
+import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design';
+import { useStorybookTheme } from './useStorybookTheme';
+function Probe({ themes, states }) {
+    themes.push(useStorybookTheme());
+    const state = useThemeState();
+    states?.push(state);
+    return null;
+}
+describe('Storybook theme palette', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it('derives colors from the current tokens and updates after source invalidation', async () => {
+        const themes = [];
+        const states = [];
+        const source = new FlexThemeReference({
+            base: { color: { surfaceNeutralFar: '#123456', foregroundNeutralPrimary: '#abcdef' } },
+        });
+        const scene = await render(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
+        expect(themes[0].background.app).toBe('#123456');
+        expect(themes[0].background.content).toBe('#123456');
+        expect(themes[0].background.preview).toBe('#123456');
+        expect(themes[0].color.defaultText).toBe('#abcdef');
+        await scene.rerender(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
+        expect(themes[themes.length - 1]).toBe(themes[0]);
+        await act(() => source.update({ color: { surfaceNeutralFar: '#654321' } }));
+        expect(themes[themes.length - 1].background.app).toBe('#654321');
+        expect(themes[themes.length - 1].background.content).toBe('#654321');
+        expect(themes[themes.length - 1].background.preview).toBe('#654321');
+        expect(themes[themes.length - 1]).not.toBe(themes[0]);
+        expect(themes[themes.length - 1].appBorderColor).toBe(states[states.length - 1].tokens.color.strokeNeutralSubtle);
+    });
+    it('warns and substitutes a contrasting theme color for native opaque colors', async () => {
+        const warn = jest.spyOn(console, 'warn').mockImplementation();
+        const themes = [];
+        const states = [];
+        const source = new FlexThemeReference({ base: { color: { foregroundBrandPrimary: PlatformColor('labelColor') } } });
+        await render(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
+        expect(themes[0].color.primary).toBe(states[0].tokens.color.fixedBlack);
+        expect(warn).toHaveBeenCalledTimes(1);
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining('foregroundBrandPrimary'));
+    });
+    it.each([
+        ['light', 'standard', 'fixedWhite'],
+        ['dark', 'standard', 'fixedBlack'],
+        ['light', 'highContrast', 'fixedBlack'],
+        ['dark', 'highContrast', 'fixedBlack'],
+    ])('retains the native canvas fallback for %s/%s', async (colorScheme, contrast, fallback) => {
+        const warn = jest.spyOn(console, 'warn').mockImplementation();
+        const themes = [];
+        const states = [];
+        const source = new FlexThemeReference({
+            appearance: { colorScheme, contrast },
+            base: { color: { surfaceNeutralFar: PlatformColor('windowBackgroundColor') } },
+        });
+        await render(_jsx(ThemedRoot, { theme: source, children: _jsx(Probe, { themes: themes, states: states }) }));
+        expect(themes[0].background.content).toBe(states[0].tokens.color[fallback]);
+        expect(themes[0].background.preview).toBe(states[0].tokens.color[fallback]);
+        expect(warn).toHaveBeenCalledTimes(1);
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining('surfaceNeutralFar'));
+    });
+});
+//# sourceMappingURL=useStorybookTheme.test.js.map

package/lib/useStorybookTheme.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorybookTheme.test.js","sourceRoot":"","sources":["../src/useStorybookTheme.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/storybook-desktop-runtime",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "React Native runtime and Metro services for desktop Storybook applications",
   "license": "MIT",
   "author": "",
@@ -27,12 +27,13 @@
     "build": "tsc -b",
     "clean": "fluentui-scripts clean",
     "format": "fluentui-scripts format",
-    "lint": "fluentui-scripts lint"
+    "lint": "fluentui-scripts lint",
+    "test": "fluentui-scripts jest"
   },
   "dependencies": {
-    "@fluentui-react-native/callout": "0.29.4",
-    "@fluentui-react-native/default-theme": "0.27.12",
-    "@fluentui-react-native/design": "0.4.1",
+    "@fluentui-react-native/callout": "0.29.6",
+    "@fluentui-react-native/default-theme": "0.27.14",
+    "@fluentui-react-native/design": "0.5.1",
     "@rnx-kit/metro-config": "^2.2.4",
     "@rnx-kit/metro-resolver-symlinks": "^0.3.1",
     "@storybook/react-native": "^10.4.7",
@@ -46,12 +47,17 @@
     "@babel/core": "^7.20.0",
     "@fluentui-react-native/scripts": "0.1.0",
     "@office-iss/react-native-win32": "^0.81.0",
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
     "@react-native/babel-preset": "^0.81.0",
+    "@testing-library/react-native": "^14.0.1",
     "@types/react": "~19.1.4",
     "react": "19.1.4",
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
-    "react-native-windows": "^0.81.0"
+    "react-native-windows": "^0.81.0",
+    "test-renderer": "1.1.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.81.0",
@@ -76,6 +82,7 @@
     }
   },
   "furn": {
+    "jestPlatform": "macos",
     "knip": {
       "ignoreDependencies": [
         "@fluentui-react-native/callout"

package/src/DesktopStoryRoot.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { addons } from 'storybook/preview-api';
 
 import { desktopStoryErrorEvent, desktopStoryReadyEvent } from './DesktopDriverBridge';
@@ -13,6 +13,7 @@ type DesktopStoryRootProps = {
 export function DesktopStoryRoot({ children, storyId }: DesktopStoryRootProps) {
   const { runtimeInstance, selection } = useDesktopStorybookConfig();
   const testID = useDesktopStorybookTestID('story-root');
+  const exposeNativeMarker = Platform.OS === 'macos' || Platform.OS === 'windows' || Platform.OS === ('win32' as any);
   const activeSelection = selection?.storyId === storyId ? selection : undefined;
 
   React.useEffect(() => {
@@ -49,7 +50,7 @@ export function DesktopStoryRoot({ children, storyId }: DesktopStoryRootProps) {
         }
       }}
     >
-      <View accessibilityLabel={marker} style={styles.root} testID={testID}>
+      <View accessibilityLabel={marker} accessible={exposeNativeMarker || undefined} style={styles.root} testID={testID}>
         {children}
       </View>
     </StoryRenderErrorBoundary>

package/src/StorybookTheme.test.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+import { useRootSettings, useThemeState } from '@fluentui-react-native/design';
+import type { RootSettings, ThemeState } from '@fluentui-react-native/design';
+import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
+import type { View as StorybookView } from '@storybook/react-native';
+import { theme as lightTheme } from '@storybook/react-native-theming';
+
+import { createDesktopStorybookApp } from './createDesktopStorybookApp';
+import { DesktopDriverBridge } from './DesktopDriverBridge';
+import { StorybookUIComponent } from './StorybookUI';
+
+jest.mock('./DesktopDriverBridge', () => ({ DesktopDriverBridge: jest.fn(() => null) }));
+jest.mock('./StorybookUI', () => ({ StorybookUIComponent: jest.fn(() => null) }));
+
+function createTestApp(storyBackgroundColor?: string) {
+  const roots: RootSettings[] = [];
+  const bridgeRoots: RootSettings[] = [];
+  const themes: ThemeState[] = [];
+  const mounted = jest.fn();
+  const unmounted = jest.fn();
+
+  function Story() {
+    roots.push(useRootSettings());
+    themes.push(useThemeState());
+    React.useEffect(() => {
+      mounted();
+      return unmounted;
+    }, []);
+    return <Text testID="selected-story">Selected story</Text>;
+  }
+
+  jest.mocked(DesktopDriverBridge).mockImplementation(() => {
+    bridgeRoots.push(useRootSettings());
+    return null;
+  });
+  jest.mocked(StorybookUIComponent).mockImplementation(({ children }) => <>{children}</>);
+
+  const getStorybookUI = jest.fn<ReturnType<StorybookView['getStorybookUI']>, Parameters<StorybookView['getStorybookUI']>>((params) => {
+    const UI = params?.CustomUIComponent;
+    if (!UI) {
+      throw new Error('Expected the app factory to configure the themed UI.');
+    }
+    return () => (
+      <UI
+        storyBackgroundColor={storyBackgroundColor}
+        storyHash={{}}
+        setStory={jest.fn()}
+        storage={{ getItem: () => null, setItem: () => undefined }}
+        theme={lightTheme}
+      >
+        <Story />
+      </UI>
+    );
+  });
+  const App = createDesktopStorybookApp({ getStorybookUI }, { enableWebsockets: false, testIDPrefix: 'test' });
+  return { App, roots, bridgeRoots, themes, mounted, unmounted, getStorybookUI };
+}
+
+afterEach(() => {
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+});
+
+describe('Storybook app theme root', () => {
+  it('places the toolbar, UI, story, and runtime bridge in the same default Flex scene', async () => {
+    const { App, roots, bridgeRoots, themes } = createTestApp();
+    const scene = await render(<App />);
+
+    expect(scene.getByTestId('test-app-root')).toBeOnTheScreen();
+    expect(scene.getByTestId('test-theme-toolbar')).toBeOnTheScreen();
+    expect(scene.getByTestId('selected-story')).toBeOnTheScreen();
+    expect(scene.getByRole('button', { name: 'Default Flex' })).toBeOnTheScreen();
+    expect(themes[0].tokens).toEqual(defaultFlexTokens);
+    expect(bridgeRoots.every((root) => root === roots[0])).toBe(true);
+    expect(roots[0].inputModality).toBe('pointer');
+  });
+
+  it('observes app-root input without rerendering the story', async () => {
+    const { App, roots, bridgeRoots } = createTestApp();
+    const scene = await render(<App />);
+    const renderCount = roots.length;
+    const root = scene.getByTestId('test-app-root');
+
+    await fireEvent(root, 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+    expect(roots[0].inputModality).toBe('keyboard');
+    expect(bridgeRoots[0].inputModality).toBe('keyboard');
+    await fireEvent(root, 'pointerDownCapture', {});
+    expect(roots[0].inputModality).toBe('pointer');
+    await fireEvent(root, 'keyDownCapture', { nativeEvent: { key: 'ArrowRight' } });
+    await fireEvent(root, 'startShouldSetResponderCapture', {});
+    expect(roots[0].inputModality).toBe('pointer');
+    expect(roots).toHaveLength(renderCount);
+  });
+
+  it.each(['none', 'light', 'dark'])('keeps the %s canvas distinct from the Secondary Button fill', async (choice) => {
+    const { App, themes } = createTestApp();
+    const scene = await render(<App />);
+
+    await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
+
+    const state = themes[themes.length - 1];
+    const calls = jest.mocked(StorybookUIComponent).mock.calls;
+    const theme = calls[calls.length - 1][0].theme;
+    expect(theme.background.content).toBe(state.tokens.color.surfaceNeutralFar);
+    expect(theme.background.content).toBe(theme.background.preview);
+    expect(theme.background.content).not.toBe(state.tokens.color.backgroundNeutralSubtle);
+  });
+
+  it.each(['#ffeedd', 'transparent'])('preserves the explicit %s story background across theme changes', async (storyBackgroundColor) => {
+    const { App } = createTestApp(storyBackgroundColor);
+    const scene = await render(<App />);
+
+    for (const choice of ['none', 'dark', 'light']) {
+      await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
+      const calls = jest.mocked(StorybookUIComponent).mock.calls;
+      expect(calls[calls.length - 1][0].storyBackgroundColor).toBe(storyBackgroundColor);
+    }
+  });
+
+  it('switches chrome and story colors together without recreating Storybook or resetting the scene', async () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation();
+    const { App, roots, themes, mounted, unmounted, getStorybookUI } = createTestApp();
+    const scene = await render(<App />);
+    const root = roots[0];
+    const defaultBackground = themes[0].tokens.color.surfaceNeutralFar;
+    const backgrounds: Record<string, unknown> = {};
+    await fireEvent(scene.getByTestId('test-app-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+
+    for (const choice of ['dark', 'highContrast', 'light', 'none']) {
+      await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
+      const state = themes[themes.length - 1];
+      const calls = jest.mocked(StorybookUIComponent).mock.calls;
+      const theme = calls[calls.length - 1][0].theme;
+      backgrounds[choice] = theme.background.app;
+
+      expect(scene.getByTestId(`test-theme-${choice}`).props.accessibilityState.selected).toBe(true);
+      expect(StyleSheet.flatten(scene.getByTestId('test-theme-toolbar').props.style).backgroundColor).toBe(
+        state.tokens.color.backgroundNeutralSubtle,
+      );
+      expect(StyleSheet.flatten(scene.getByText('Theme').props.style).color).toBe(state.tokens.color.foregroundNeutralPrimary);
+      const foreground = theme.base === 'dark' ? state.tokens.color.fixedWhite : state.tokens.color.fixedBlack;
+      const background = theme.base === 'dark' ? state.tokens.color.fixedBlack : state.tokens.color.fixedWhite;
+      const literal = (value: unknown, fallback: unknown) => (typeof value === 'string' ? value : fallback);
+      expect(theme.background.app).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
+      expect(theme.background.content).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
+      expect(theme.background.preview).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
+      expect(theme.color.defaultText).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
+      expect(theme.input.color).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
+      expect(theme.button.background).toBe(literal(state.tokens.color.backgroundNeutralLoud, background));
+      expect(root.inputModality).toBe('keyboard');
+      expect(roots.every((settings) => settings === root)).toBe(true);
+    }
+
+    expect(backgrounds.dark).not.toBe(backgrounds.light);
+    expect(backgrounds.none).toBe(defaultBackground);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('Storybook chrome cannot resolve native system colors'));
+    expect(getStorybookUI).toHaveBeenCalledTimes(1);
+    expect(mounted).toHaveBeenCalledTimes(1);
+    expect(unmounted).not.toHaveBeenCalled();
+  });
+});