@marinoscar/platform-web 0.0.0-stage → 0.1.0-next.11

package/dist/shell/headless/theme.d.ts

@@ -0,0 +1,190 @@
+import type { Components, PaletteOptions, Theme } from '@mui/material/styles';
+/**
+ * The viewer's theme choice: `light`, `dark`, `system` (follows
+ * `prefers-color-scheme`), or the id of a theme the app registered with
+ * {@link registerThemeMode} or passed to the provider's `themes` (a
+ * `high-contrast` theme, a brand skin). The id is the same one the API accepts
+ * for the `theme` user setting when the app registered it there with
+ * `registerThemePreference`.
+ *
+ * @stability experimental
+ */
+export type ShellThemeMode = 'light' | 'dark' | 'system' | (string & {});
+/**
+ * The three modes the shell always has: `light`, `dark` and `system`. A theme
+ * registered under one of these ids is refused.
+ *
+ * @stability experimental
+ */
+export declare const BUILTIN_SHELL_THEME_MODES: readonly ["light", "dark", "system"];
+/**
+ * Whether `mode` is one of {@link BUILTIN_SHELL_THEME_MODES}.
+ *
+ * @param mode - a mode id.
+ * @returns whether it is built in.
+ *
+ * @stability experimental
+ */
+export declare function isBuiltinThemeMode(mode: string): mode is (typeof BUILTIN_SHELL_THEME_MODES)[number];
+/**
+ * One theme an app added to the shell's modes.
+ *
+ * @stability experimental
+ */
+export interface ShellThemeModeDefinition {
+    /** The mode id: lower-case, starting with a letter, 2 to 48 characters (the API's theme id pattern). */
+    id: string;
+    /** What a theme picker calls it. */
+    label: string;
+    /** The MUI theme shown while the mode is chosen. Its `palette.mode` decides whether the app counts as dark (the AppBar toggle's icon). */
+    theme: Theme;
+}
+/**
+ * Add a theme mode to the shell: after this, `setMode(id)` of the theme context
+ * chooses it, the stored choice is restored on the next visit, and
+ * `ShellThemeProvider` resolves it to `theme`. Register at module scope, before
+ * the first render, next to the app's own themes.
+ *
+ * To let a user pick it on the Appearance page, register the same id on the API
+ * with `registerThemePreference` (`@marinoscar/platform-api/settings`): the
+ * settings document then lists it in `themeOptions`, and the packaged settings
+ * hook hands a stored value to the host's `applyTheme` (the app's `setMode`).
+ *
+ * @param definition - the id, label and theme.
+ * @throws Error when the id is malformed, built in or already registered, the label is empty or the theme is missing.
+ *
+ * @example
+ * ```ts
+ * registerThemeMode({ id: 'high-contrast', label: 'High contrast', theme: highContrastTheme });
+ * ```
+ *
+ * @extensionPoint registry
+ * @stability experimental
+ */
+export declare function registerThemeMode(definition: ShellThemeModeDefinition): void;
+/**
+ * The theme modes registered with {@link registerThemeMode}, in registration order.
+ *
+ * @returns a fresh array.
+ *
+ * @stability experimental
+ */
+export declare function listThemeModes(): ShellThemeModeDefinition[];
+/**
+ * Forget every registered theme mode. For tests only.
+ *
+ * @internal
+ */
+export declare function resetThemeModesForTests(): void;
+/**
+ * The shell's palette for `mode`, with `overrides` merged one level deep into
+ * `primary`, `secondary`, `background` and `text` (so `{ primary: { main } }`
+ * keeps the hand-picked `light` and `dark` tints) and shallowly elsewhere.
+ *
+ * @param mode - `light` or `dark`.
+ * @param overrides - the app's palette changes (its brand colour).
+ * @returns the palette options.
+ *
+ * @stability experimental
+ */
+export declare function shellPalette(mode: 'light' | 'dark', overrides?: PaletteOptions): PaletteOptions;
+/**
+ * The shell's component overrides for `mode`: no-uppercase 500-weight
+ * buttons, a soft card shadow, and a flat AppBar with a 1px bottom border.
+ *
+ * @param mode - `light` or `dark`.
+ * @returns the MUI component overrides.
+ *
+ * @stability experimental
+ */
+export declare function shellComponentOverrides(mode: 'light' | 'dark'): Components<Theme>;
+/**
+ * Options of {@link createShellTheme}.
+ *
+ * @stability experimental
+ */
+export interface ShellThemeOptions {
+    /** Palette changes, merged by {@link shellPalette} (the app's brand colour). */
+    palette?: PaletteOptions;
+    /** Applied to the built theme last (e.g. the telemetry slice's `withTelemetryTokens`). */
+    extend?: (theme: Theme) => Theme;
+}
+/**
+ * Build the shell's MUI theme for `mode`.
+ *
+ * @param mode - `light` or `dark`.
+ * @param options - the app's palette changes and a final `extend` step.
+ * @returns the theme.
+ *
+ * @example
+ * ```ts
+ * export const lightTheme = createShellTheme('light', { palette: { primary: { main: THEME_COLOR } }, extend: withTelemetryTokens });
+ * export const darkTheme = createShellTheme('dark', { extend: withTelemetryTokens });
+ * ```
+ *
+ * @extensionPoint theme-token
+ * @stability experimental
+ */
+export declare function createShellTheme(mode: 'light' | 'dark', options?: ShellThemeOptions): Theme;
+/**
+ * One theme mode beyond light, dark and system, as a picker lists it.
+ *
+ * @stability experimental
+ */
+export interface ShellThemeModeOption {
+    /** The mode id, what `setMode` takes. */
+    id: string;
+    /** What a picker calls it. */
+    label: string;
+}
+/**
+ * What the shell's theme context holds.
+ *
+ * @stability experimental
+ */
+export interface ShellThemeContextValue {
+    /** The viewer's choice. */
+    mode: ShellThemeMode;
+    /** The resolved MUI theme. */
+    theme: Theme;
+    /**
+     * The themes beyond light, dark and system that can be chosen (the provider's
+     * extra `themes` and the registered ones), for a picker. Absent from a context
+     * value built by hand.
+     */
+    modes?: readonly ShellThemeModeOption[];
+    /**
+     * Choose a mode (persisted in this browser). An id that is neither built in
+     * nor a known theme is ignored.
+     */
+    setMode(mode: ShellThemeMode): void;
+    /** Flip between light and dark (from whatever is showing now). */
+    toggleMode(): void;
+    /** Whether the dark theme is showing. */
+    isDarkMode: boolean;
+}
+/**
+ * The context `ShellThemeProvider` (`@marinoscar/platform-web/shell/ui`) fills.
+ *
+ * @stability experimental
+ */
+export declare const ShellThemeContext: import("react").Context<ShellThemeContextValue | null>;
+/**
+ * The shell's theme context, or `null` outside a `ShellThemeProvider` (the
+ * AppBar then draws no theme toggle).
+ *
+ * @returns the context value, or `null`.
+ *
+ * @stability experimental
+ */
+export declare function useOptionalShellTheme(): ShellThemeContextValue | null;
+/**
+ * The shell's theme context: the mode, the resolved theme and the setters.
+ *
+ * @returns the context value.
+ * @throws Error outside a `ShellThemeProvider`.
+ *
+ * @stability experimental
+ */
+export declare function useShellTheme(): ShellThemeContextValue;
+//# sourceMappingURL=theme.d.ts.map

package/dist/shell/headless/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/shell/headless/theme.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAgB,MAAM,sBAAsB,CAAC;AAE5F;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,sCAAuC,CAAC;AAE9E;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAEnG;AAED;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,wGAAwG;IACxG,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,0IAA0I;IAC1I,KAAK,EAAE,KAAK,CAAC;CACd;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,wBAAwB,GAAG,IAAI,CAU5E;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,wBAAwB,EAAE,CAE3D;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,IAAI,CAE9C;AAkCD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,GAAE,cAAmB,GAAG,cAAc,CAUnG;AAED;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CA0BjF;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,gFAAgF;IAChF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC;CAClC;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,KAAK,CAU/F;AAED;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,IAAI,EAAE,cAAc,CAAC;IACrB,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,kEAAkE;IAClE,UAAU,IAAI,IAAI,CAAC;IACnB,yCAAyC;IACzC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,wDAAqD,CAAC;AAGpF;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,IAAI,sBAAsB,GAAG,IAAI,CAErE;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,IAAI,sBAAsB,CAQtD"}

package/dist/shell/headless/theme.js

@@ -0,0 +1,235 @@
+// =============================================================================
+// The shell's theme (issue #868; moved from the reference app's `theme/` and
+// `contexts/ThemeContext.tsx`)
+// =============================================================================
+//
+// Two MUI themes (light and dark) built from one base (Inter, 600-weight
+// headings, 8px radius, no-uppercase buttons, flat AppBar with a hairline),
+// plus the context the AppBar's toggle and the Appearance page read. The app
+// keeps its brand: `palette.primary.main` comes from its identity, and
+// `extend` lets it add token contracts (the telemetry slice's
+// `withTelemetryTokens`) without the shell depending on them.
+// =============================================================================
+import { THEME_PREFERENCE_ID_PATTERN } from '@marinoscar/platform-contract/settings';
+import { createContext, useContext } from 'react';
+import { createTheme } from '@mui/material/styles';
+/**
+ * The three modes the shell always has: `light`, `dark` and `system`. A theme
+ * registered under one of these ids is refused.
+ *
+ * @stability experimental
+ */
+export const BUILTIN_SHELL_THEME_MODES = ['light', 'dark', 'system'];
+/**
+ * Whether `mode` is one of {@link BUILTIN_SHELL_THEME_MODES}.
+ *
+ * @param mode - a mode id.
+ * @returns whether it is built in.
+ *
+ * @stability experimental
+ */
+export function isBuiltinThemeMode(mode) {
+    return BUILTIN_SHELL_THEME_MODES.includes(mode);
+}
+const themeModes = new Map();
+/**
+ * Add a theme mode to the shell: after this, `setMode(id)` of the theme context
+ * chooses it, the stored choice is restored on the next visit, and
+ * `ShellThemeProvider` resolves it to `theme`. Register at module scope, before
+ * the first render, next to the app's own themes.
+ *
+ * To let a user pick it on the Appearance page, register the same id on the API
+ * with `registerThemePreference` (`@marinoscar/platform-api/settings`): the
+ * settings document then lists it in `themeOptions`, and the packaged settings
+ * hook hands a stored value to the host's `applyTheme` (the app's `setMode`).
+ *
+ * @param definition - the id, label and theme.
+ * @throws Error when the id is malformed, built in or already registered, the label is empty or the theme is missing.
+ *
+ * @example
+ * ```ts
+ * registerThemeMode({ id: 'high-contrast', label: 'High contrast', theme: highContrastTheme });
+ * ```
+ *
+ * @extensionPoint registry
+ * @stability experimental
+ */
+export function registerThemeMode(definition) {
+    const { id, label, theme } = definition;
+    if (typeof id !== 'string' || !THEME_PREFERENCE_ID_PATTERN.test(id)) {
+        throw new Error(`registerThemeMode: "${String(id)}" is not a valid theme id (lower-case, starts with a letter, 2 to 48 characters of a-z, 0-9 and -)`);
+    }
+    if (isBuiltinThemeMode(id))
+        throw new Error(`registerThemeMode: "${id}" is a built-in mode`);
+    if (themeModes.has(id))
+        throw new Error(`registerThemeMode: a theme mode "${id}" is already registered`);
+    if (typeof label !== 'string' || label.trim() === '')
+        throw new Error(`registerThemeMode: the theme mode "${id}" needs a label`);
+    if (!theme || typeof theme !== 'object' || !theme.palette)
+        throw new Error(`registerThemeMode: the theme mode "${id}" needs a MUI theme`);
+    themeModes.set(id, { id, label: label.trim(), theme });
+}
+/**
+ * The theme modes registered with {@link registerThemeMode}, in registration order.
+ *
+ * @returns a fresh array.
+ *
+ * @stability experimental
+ */
+export function listThemeModes() {
+    return [...themeModes.values()];
+}
+/**
+ * Forget every registered theme mode. For tests only.
+ *
+ * @internal
+ */
+export function resetThemeModesForTests() {
+    themeModes.clear();
+}
+const LIGHT_PALETTE = {
+    primary: { main: '#1976d2', light: '#42a5f5', dark: '#1565c0' },
+    secondary: { main: '#9c27b0', light: '#ba68c8', dark: '#7b1fa2' },
+    background: { default: '#f5f5f5', paper: '#ffffff' },
+    text: { primary: 'rgba(0, 0, 0, 0.87)', secondary: 'rgba(0, 0, 0, 0.6)' },
+};
+const DARK_PALETTE = {
+    primary: { main: '#90caf9', light: '#e3f2fd', dark: '#42a5f5' },
+    secondary: { main: '#ce93d8', light: '#f3e5f5', dark: '#ab47bc' },
+    background: { default: '#121212', paper: '#1e1e1e' },
+    text: { primary: '#ffffff', secondary: 'rgba(255, 255, 255, 0.7)' },
+};
+const BASE_THEME = {
+    typography: {
+        fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+        h1: { fontWeight: 600 },
+        h2: { fontWeight: 600 },
+        h3: { fontWeight: 600 },
+        h4: { fontWeight: 600 },
+        h5: { fontWeight: 600 },
+        h6: { fontWeight: 600 },
+    },
+    shape: {
+        borderRadius: 8,
+    },
+};
+const MERGED_GROUPS = ['primary', 'secondary', 'background', 'text'];
+/**
+ * The shell's palette for `mode`, with `overrides` merged one level deep into
+ * `primary`, `secondary`, `background` and `text` (so `{ primary: { main } }`
+ * keeps the hand-picked `light` and `dark` tints) and shallowly elsewhere.
+ *
+ * @param mode - `light` or `dark`.
+ * @param overrides - the app's palette changes (its brand colour).
+ * @returns the palette options.
+ *
+ * @stability experimental
+ */
+export function shellPalette(mode, overrides = {}) {
+    const base = mode === 'light' ? LIGHT_PALETTE : DARK_PALETTE;
+    const merged = { ...base, ...overrides };
+    for (const group of MERGED_GROUPS) {
+        const override = overrides[group];
+        if (override !== undefined && typeof override === 'object') {
+            merged[group] = { ...base[group], ...override };
+        }
+    }
+    return merged;
+}
+/**
+ * The shell's component overrides for `mode`: no-uppercase 500-weight
+ * buttons, a soft card shadow, and a flat AppBar with a 1px bottom border.
+ *
+ * @param mode - `light` or `dark`.
+ * @returns the MUI component overrides.
+ *
+ * @stability experimental
+ */
+export function shellComponentOverrides(mode) {
+    return {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
+                    fontWeight: 500,
+                },
+            },
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    boxShadow: mode === 'light' ? '0 2px 8px rgba(0, 0, 0, 0.1)' : '0 2px 8px rgba(0, 0, 0, 0.3)',
+                },
+            },
+        },
+        MuiAppBar: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'none',
+                    borderBottom: `1px solid ${mode === 'light' ? '#e0e0e0' : '#333333'}`,
+                },
+            },
+        },
+    };
+}
+/**
+ * Build the shell's MUI theme for `mode`.
+ *
+ * @param mode - `light` or `dark`.
+ * @param options - the app's palette changes and a final `extend` step.
+ * @returns the theme.
+ *
+ * @example
+ * ```ts
+ * export const lightTheme = createShellTheme('light', { palette: { primary: { main: THEME_COLOR } }, extend: withTelemetryTokens });
+ * export const darkTheme = createShellTheme('dark', { extend: withTelemetryTokens });
+ * ```
+ *
+ * @extensionPoint theme-token
+ * @stability experimental
+ */
+export function createShellTheme(mode, options = {}) {
+    const theme = createTheme({
+        ...BASE_THEME,
+        palette: {
+            mode,
+            ...shellPalette(mode, options.palette),
+        },
+        components: shellComponentOverrides(mode),
+    });
+    return options.extend ? options.extend(theme) : theme;
+}
+/**
+ * The context `ShellThemeProvider` (`@marinoscar/platform-web/shell/ui`) fills.
+ *
+ * @stability experimental
+ */
+export const ShellThemeContext = createContext(null);
+ShellThemeContext.displayName = 'ShellThemeContext';
+/**
+ * The shell's theme context, or `null` outside a `ShellThemeProvider` (the
+ * AppBar then draws no theme toggle).
+ *
+ * @returns the context value, or `null`.
+ *
+ * @stability experimental
+ */
+export function useOptionalShellTheme() {
+    return useContext(ShellThemeContext);
+}
+/**
+ * The shell's theme context: the mode, the resolved theme and the setters.
+ *
+ * @returns the context value.
+ * @throws Error outside a `ShellThemeProvider`.
+ *
+ * @stability experimental
+ */
+export function useShellTheme() {
+    const context = useContext(ShellThemeContext);
+    if (!context) {
+        throw new Error('useShellTheme must be used within a ShellThemeProvider (@marinoscar/platform-web/shell/ui).');
+    }
+    return context;
+}
+//# sourceMappingURL=theme.js.map

package/dist/shell/headless/theme.js.map

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

package/dist/shell/internal/use-is-mounted.d.ts

@@ -0,0 +1,3 @@
+/** `() => boolean`: whether the component is still mounted (guards setState after an await). */
+export declare function useIsMounted(): () => boolean;
+//# sourceMappingURL=use-is-mounted.d.ts.map

package/dist/shell/internal/use-is-mounted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mounted.d.ts","sourceRoot":"","sources":["../../../src/shell/internal/use-is-mounted.ts"],"names":[],"mappings":"AAEA,gGAAgG;AAChG,wBAAgB,YAAY,IAAI,MAAM,OAAO,CAS5C"}

package/dist/shell/internal/use-is-mounted.js

@@ -0,0 +1,13 @@
+import { useCallback, useEffect, useRef } from 'react';
+/** `() => boolean`: whether the component is still mounted (guards setState after an await). */
+export function useIsMounted() {
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return useCallback(() => mounted.current, []);
+}
+//# sourceMappingURL=use-is-mounted.js.map

package/dist/shell/internal/use-is-mounted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mounted.js","sourceRoot":"","sources":["../../../src/shell/internal/use-is-mounted.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD,gGAAgG;AAChG,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAChD,CAAC"}

package/dist/shell/testing/index.d.ts

@@ -0,0 +1,2 @@
+export { shellLocalHostSuite } from './shell-local-host.suite.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/shell/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shell/testing/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/shell/testing/index.js

@@ -0,0 +1,6 @@
+// `@marinoscar/platform-web/shell/testing`: the shell slice's conformance
+// suite. Importing this entry registers `shell-local-host` with
+// `runPlatformWebConformance`. Test-only: never import it from production code.
+// Needs `@testing-library/react`. Documented in ../README.md.
+export { shellLocalHostSuite } from './shell-local-host.suite.js';
+//# sourceMappingURL=index.js.map

package/dist/shell/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/shell/testing/index.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,gEAAgE;AAChE,gFAAgF;AAChF,8DAA8D;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/shell/testing/shell-local-host.suite.d.ts

@@ -0,0 +1,11 @@
+import type { WebConformanceSuite } from '../../testing/index.js';
+/**
+ * The suite behind `runPlatformWebConformance`: the packaged shell (AppBar,
+ * rail, bottom bar, user menu) renders under `LocalIdentityProvider` and a
+ * `ShellPreferencesProvider` and never calls the host's API.
+ *
+ * @extensionPoint registry
+ * @stability experimental
+ */
+export declare const shellLocalHostSuite: WebConformanceSuite;
+//# sourceMappingURL=shell-local-host.suite.d.ts.map

package/dist/shell/testing/shell-local-host.suite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-local-host.suite.d.ts","sourceRoot":"","sources":["../../../src/shell/testing/shell-local-host.suite.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,mBAAmB,EAAyB,MAAM,wBAAwB,CAAC;AAiJzF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,EAAE,mBAMjC,CAAC"}

package/dist/shell/testing/shell-local-host.suite.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// =============================================================================
+// Suite: the shell runs in a local host (no API)
+// =============================================================================
+//
+// A host with no API session (a desktop shell) mounts the shell under
+// `LocalIdentityProvider` and a `ShellPreferencesProvider`. This suite renders
+// the packaged chrome that way, at a wide and a narrow window, and asserts that
+// it draws and that the host's API stub is never called: the chrome must not
+// need the network. It builds its own tree, so it takes no options and reads
+// nothing from the app's data.
+// =============================================================================
+import { ThemeProvider, createTheme } from '@mui/material';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { PlatformHostProvider } from '../../core/index.js';
+import { LocalIdentityProvider } from '../../identity/index.js';
+import { webConformanceSuites } from '../../testing/index.js';
+import { ShellPreferencesProvider, createLocalStorageShellPreferencesPort } from '../headless/index.js';
+import { ShellLayout, ShellRoot } from '../ui/index.js';
+const WIDE = 1400;
+const NARROW = 400;
+const Icon = (props) => createElement('span', { 'data-icon': props.fontSize ?? 'medium' });
+const NAVIGATION = {
+    destinations: [
+        { key: 'home', label: 'Home', compactLabel: 'Home', Icon, path: '/' },
+        { key: 'notes', label: 'Notes', compactLabel: 'Notes', Icon, path: '/notes', permission: 'notes:read' },
+        { key: 'secret', label: 'Secret', compactLabel: 'Secret', Icon, path: '/secret', permission: 'secret:read' },
+        { key: 'tools', label: 'Tools', compactLabel: 'Tools', Icon, path: '/tools', pinned: true },
+    ],
+};
+/** A `window.matchMedia` that answers min/max-width queries against `width`. */
+function installMatchMedia(width) {
+    const original = Object.getOwnPropertyDescriptor(window, 'matchMedia');
+    const evaluate = (query) => {
+        const mins = [...query.matchAll(/\(min-width:\s*([\d.]+)px\)/g)].map((m) => parseFloat(m[1] ?? '0'));
+        const maxs = [...query.matchAll(/\(max-width:\s*([\d.]+)px\)/g)].map((m) => parseFloat(m[1] ?? '0'));
+        if (mins.length === 0 && maxs.length === 0)
+            return false;
+        return mins.every((min) => width >= min) && maxs.every((max) => width <= max);
+    };
+    Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        writable: true,
+        value: (query) => ({
+            matches: evaluate(query),
+            media: query,
+            onchange: null,
+            addEventListener: () => undefined,
+            removeEventListener: () => undefined,
+            addListener: () => undefined,
+            removeListener: () => undefined,
+            dispatchEvent: () => false,
+        }),
+    });
+    return () => {
+        if (original)
+            Object.defineProperty(window, 'matchMedia', original);
+        else
+            delete window.matchMedia;
+    };
+}
+/** A transport that records every call and rejects it. */
+function createSpyApi() {
+    const calls = [];
+    const reject = (verb) => (path) => {
+        calls.push(`${verb} ${path}`);
+        return Promise.reject(new Error(`shell-local-host: the shell called the API (${verb} ${path})`));
+    };
+    const api = {
+        get: reject('GET'),
+        post: reject('POST'),
+        put: reject('PUT'),
+        patch: reject('PATCH'),
+        delete: reject('DELETE'),
+    };
+    return { api, calls };
+}
+function mountShell(width) {
+    const restore = installMatchMedia(width);
+    const { api, calls } = createSpyApi();
+    const host = {
+        api,
+        viewer: { userId: 'local', hasPermission: () => false, isFeatureEnabled: () => false },
+    };
+    const theme = createTheme();
+    const port = createLocalStorageShellPreferencesPort('shell-local-host-suite');
+    render(_jsx(ShellRoot, { themes: { light: theme, dark: createTheme({ palette: { mode: 'dark' } }) }, storageKey: "shell-local-host-suite-theme", children: _jsx(ThemeProvider, { theme: theme, children: _jsx(PlatformHostProvider, { host: host, children: _jsx(LocalIdentityProvider, { userId: "local", displayName: "Ada Lovelace", permissions: ['notes:read'], children: _jsx(ShellPreferencesProvider, { port: port, children: _jsx(MemoryRouter, { initialEntries: ['/'], children: _jsx(ShellLayout, { navigation: NAVIGATION, brand: "Local", children: _jsx("div", { children: "page body" }) }) }) }) }) }) }) }));
+    return { calls, restore };
+}
+function register(api) {
+    const { describe, it, expect } = api;
+    describe('shell in a local host', () => {
+        it('draws the rail, filters destinations by the local permissions and never calls the API (wide window)', async () => {
+            const { calls, restore } = mountShell(WIDE);
+            try {
+                expect(screen.queryAllByRole('navigation', { name: 'Main navigation' }).length >= 1).toBe(true);
+                expect(screen.queryAllByText('Notes').length >= 1).toBe(true);
+                expect(screen.queryAllByText('Secret')).toHaveLength(0);
+                // The collapse toggle writes through the preferences port, not /user-settings.
+                const toggle = screen.queryByLabelText('Collapse navigation');
+                if (toggle)
+                    fireEvent.click(toggle);
+                // The user menu: initials from the display name, no sign-out in local mode.
+                fireEvent.click(screen.getByText('AL'));
+                expect(screen.queryAllByText('Ada Lovelace').length >= 1).toBe(true);
+                expect(screen.queryAllByText('Logout')).toHaveLength(0);
+                await Promise.resolve();
+                expect(calls).toEqual([]);
+            }
+            finally {
+                restore();
+            }
+        });
+        it('draws the bottom bar with the pinned destination last and never calls the API (narrow window)', async () => {
+            const { calls, restore } = mountShell(NARROW);
+            try {
+                expect(screen.queryAllByText('Notes').length >= 1).toBe(true);
+                expect(screen.queryAllByText('Tools').length >= 1).toBe(true);
+                expect(screen.queryAllByText('Secret')).toHaveLength(0);
+                const tools = screen.getAllByText('Tools')[0];
+                const notes = screen.getAllByText('Notes')[0];
+                // Pinned goes at the END of the bar: Notes precedes Tools in document order.
+                expect(tools !== undefined &&
+                    notes !== undefined &&
+                    (notes.compareDocumentPosition(tools) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(true);
+                await Promise.resolve();
+                expect(calls).toEqual([]);
+            }
+            finally {
+                restore();
+            }
+        });
+    });
+}
+/**
+ * The suite behind `runPlatformWebConformance`: the packaged shell (AppBar,
+ * rail, bottom bar, user menu) renders under `LocalIdentityProvider` and a
+ * `ShellPreferencesProvider` and never calls the host's API.
+ *
+ * @extensionPoint registry
+ * @stability experimental
+ */
+export const shellLocalHostSuite = {
+    id: 'shell-local-host',
+    title: 'Shell in a local host: the chrome renders and never calls the API',
+    description: 'The AppBar, rail, bottom bar and user menu render under LocalIdentityProvider and a ShellPreferencesProvider, filter destinations by the local permissions, and make no API call.',
+    register,
+};
+webConformanceSuites.register(shellLocalHostSuite);
+//# sourceMappingURL=shell-local-host.suite.js.map