@linagora/twake-mui 10.3.0 → 10.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @linagora/twake-mui [10.4.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.4.0...@linagora/twake-mui@10.4.1) (2026-10-07)
+
+
+### Bug Fixes
+
+* **twake-mui:** Follow the color scheme in overrides and SearchBar ([#142](https://github.com/linagora/twake-ui/issues/142)) ([1c2efac](https://github.com/linagora/twake-ui/commit/1c2efacba0a3e140384775e9a4f8e76416409b7a))
+
+# @linagora/twake-mui [10.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.3.0...@linagora/twake-mui@10.4.0) (2026-10-07)
+
+
+### Features
+
+* **twake-mui:** Add the TwakeSpace overlay for embedded apps ([97a8b50](https://github.com/linagora/twake-ui/commit/97a8b506c0c485fffaa71805e4c32c77bd6ff30d))
+
 # @linagora/twake-mui [10.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.2.0...@linagora/twake-mui@10.3.0) (2026-10-06)
 
 

package/README.md

@@ -54,6 +54,61 @@ function MyComponent() {
 }
 ```
 
+### Apps embedded in TwakeSpace
+
+TwakeSpace shows an app of a space's tab in a frame named `twake-embed-<app>`.
+Next to it, it puts an overlay over its whole page: a second frame, named
+`twake-embed-<app>:overlay`, on `<app origin>/embed/overlay.html`. The app
+renders its dialogs, drawers and docked windows into the overlay, so they sit
+on TwakeSpace's page instead of inside the app's frame, with no change to its
+`Dialog` or `Drawer` calls.
+
+The contract:
+
+- The app serves `/embed/overlay.html`: an empty page, no script, with
+  `html, body { background: transparent; color-scheme: normal }`.
+- The app reports the region it draws in with `overlayRegionMessage(region)`,
+  posted to TwakeSpace: `'full'` while something blocks the page (a dialog, a
+  menu), else the boxes it draws. TwakeSpace shows that region only, and the
+  rest of its page keeps its clicks.
+
+In the app:
+
+```tsx
+import {
+  connectSpaceOverlay,
+  overlayRegionMessage,
+  overlayThemeOptions,
+  OverlayPortal,
+  SpaceOverlayProvider,
+  TwakeMuiThemeProvider
+} from '@linagora/twake-mui'
+
+// Null outside TwakeSpace: everything renders in place
+const overlay = connectSpaceOverlay(region => {
+  window.parent.postMessage(overlayRegionMessage(region), SPACE_ORIGIN)
+})
+const themeOptions = overlay ? overlayThemeOptions(overlay) : {}
+
+function App() {
+  return (
+    <TwakeMuiThemeProvider themeOptions={themeOptions}>
+      <SpaceOverlayProvider overlay={overlay}>
+        {/* Dialogs and drawers go to the overlay through the theme */}
+        <OverlayPortal>{/* a docked window, such as a composer */}</OverlayPortal>
+      </SpaceOverlayProvider>
+    </TwakeMuiThemeProvider>
+  )
+}
+```
+
+What renders on the overlay lives in another document: use `ownerDocument`
+rather than `document`, and `nodeType` rather than `instanceof`.
+
+In TwakeSpace, `OverlayFrame` is the overlay: it takes the region from
+`parseOverlayRegionMessage`, checked to come from the app's frame, through
+`overlayClipPath`.
+
 ## Features
 
 - **Palette System**: Techno-independent color definitions

package/dist/components/ContactPopover/AttendeeInfo.js

@@ -1,6 +1,6 @@
 import { Icon } from '@linagora/twake-icons';
 import { Copy } from '@linagora/twake-icons';
-import { Box, IconButton, Typography, useTheme, alpha } from '@mui/material';
+import { Box, IconButton, Typography, useTheme } from '@mui/material';
 import React, { useState } from 'react';
 import { useI18n } from 'twake-i18n';
 import { Avatar } from '../Avatar';
@@ -28,8 +28,8 @@ export const AttendeeInfo = ({ name, email, onEmailCopy }) => {
             name && name !== email ? (React.createElement(Typography, { variant: "body1", sx: { fontWeight: 500, wordBreak: 'break-word' } }, name)) : null,
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
                 React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { wordBreak: 'break-word' } }, email),
-                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: alpha(theme.palette.grey[900], 0.9) }, title: showCopied
+                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: 'text.primary' }, title: showCopied
                         ? t('ContactPopover.copiedTooltip')
                         : t('ContactPopover.copyTooltip') },
-                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.palette.text.icon }))))));
+                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.vars.palette.text.icon }))))));
 };

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverCalendarAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverChatAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

@@ -6,7 +6,7 @@ export const ContactPopoverEmailAction = ({ url, disabled = false }) => {
     const { t } = useI18n();
     return (React.createElement(Button, { href: url, target: "_blank", rel: "noopener noreferrer", variant: "outlined", size: "small", disabled: disabled, sx: {
             justifyContent: 'center',
-            color: theme.palette.text.primary,
-            borderColor: theme.palette.divider
+            color: theme.vars.palette.text.primary,
+            borderColor: theme.vars.palette.divider
         } }, t('ContactPopover.emailButton')));
 };

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverVideoAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: Camera, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: Camera, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/SearchBar/DisableHighlight.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
 import { Highlight } from './Highlight';
 export const DisableHighlight = styled(Highlight)(({ theme }) => ({
-    backgroundColor: theme.palette.action.disabled
+    backgroundColor: theme.vars.palette.action.disabled
 }));

package/dist/components/SearchBar/FocusHighlight.js

@@ -2,5 +2,5 @@ import { styled } from '@mui/material';
 import { Highlight } from './Highlight';
 export const FocusHighlight = styled(Highlight)(({ theme }) => ({
     pointerEvents: 'none',
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: theme.vars.palette.action.hover
 }));

package/dist/components/SearchBar/SearchBarIconWrapper.js

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 export const SearchBarIconWrapper = styled('div')(({ theme }) => ({
-    color: theme.palette.text.secondary,
+    color: theme.vars.palette.text.secondary,
     padding: '0 1rem',
     display: 'flex'
 }));

package/dist/components/SearchBar/SearchBarRoot.js

@@ -15,10 +15,10 @@ export const SearchBarRoot = styled(Paper, {
         borderStyle: 'solid',
         borderWidth: 1,
         paddingRight: '0.5rem',
-        borderColor: isFocused ? theme.palette.primary.main : 'transparent',
+        borderColor: isFocused ? theme.vars.palette.primary.main : 'transparent',
         backgroundColor: isFocused
-            ? theme.palette.background.paper
-            : theme.palette.background.default,
+            ? theme.vars.palette.background.paper
+            : theme.vars.palette.background.default,
         transition: theme.transitions.create(['border-color', 'background-color']),
         '&:hover': {
             '&:not(.Mui-disabled):not(.SearchBar-focused)': {
@@ -29,7 +29,7 @@ export const SearchBarRoot = styled(Paper, {
         },
         '&.Mui-disabled': {
             '& .SearchBar-icon': {
-                color: theme.palette.text.disabled
+                color: theme.vars.palette.text.disabled
             },
             '& .SearchBar-disableHighlight': {
                 opacity: 1

package/dist/components/SpaceOverlay/OverlayFrame.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+export interface OverlayFrameProps {
+    /** `<name of the app's frame>:overlay`, the name the app looks for */
+    name: string;
+    /** `/embed/overlay.html` on the app's origin */
+    src: string;
+    title: string;
+    /** The same as the app's frame */
+    sandbox: string;
+    allow: string;
+    /** From `overlayClipPath` */
+    clipPath: string;
+}
+export declare const OverlayFrame: FC<OverlayFrameProps>;

package/dist/components/SpaceOverlay/OverlayFrame.js

@@ -0,0 +1,20 @@
+import { Box, Portal } from '@mui/material';
+import React from 'react';
+export const OverlayFrame = ({ name, src, title, sandbox, allow, clipPath }) => {
+    const empty = clipPath.startsWith('inset(');
+    return (React.createElement(Portal, null,
+        React.createElement(Box, { component: "iframe", name: name, src: src, title: title, sandbox: sandbox, allow: allow, "aria-hidden": empty || undefined, tabIndex: empty ? -1 : undefined, 
+            // Inline: it changes with every move of a menu, a class per value
+            // would pile up
+            style: { clipPath }, sx: {
+                position: 'fixed',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                border: 0,
+                background: 'transparent',
+                // A frame whose colour scheme differs from the page is painted opaque
+                colorScheme: 'normal',
+                zIndex: theme => theme.zIndex.modal - 1
+            } })));
+};

package/dist/components/SpaceOverlay/SpaceOverlay.d.ts

@@ -0,0 +1,28 @@
+import type { ThemeOptions } from '@mui/material/styles';
+import { type FC, type ReactNode } from 'react';
+import type { SpaceOverlay } from './spaceOverlay';
+export interface SpaceOverlayProviderProps {
+    /** From `connectSpaceOverlay`, null outside TwakeSpace */
+    overlay: SpaceOverlay | null;
+    children?: ReactNode;
+}
+export declare const SpaceOverlayProvider: FC<SpaceOverlayProviderProps>;
+/**
+ * The window of the overlay of TwakeSpace once connected, else null: what
+ * renders there is laid out on its size, not on this frame's
+ */
+export declare function useOverlayWindow(): Window | null;
+/**
+ * Renders its children on the overlay of TwakeSpace when the app is framed
+ * there, in place otherwise. Menus and tooltips opened inside follow: MUI
+ * portals them into the document of their anchor.
+ */
+export declare const OverlayPortal: FC<{
+    children?: ReactNode;
+}>;
+/**
+ * Theme options sending every dialog and temporary drawer to the overlay, so
+ * they are centred on the window of TwakeSpace and dim all of it. Built once:
+ * the theme provider rebuilds the theme when they change.
+ */
+export declare function overlayThemeOptions(overlay: SpaceOverlay): ThemeOptions;

package/dist/components/SpaceOverlay/SpaceOverlay.js

@@ -0,0 +1,57 @@
+import { Portal } from '@mui/material';
+import React, { createContext, useContext, useSyncExternalStore } from 'react';
+const SpaceOverlayContext = createContext(null);
+export const SpaceOverlayProvider = ({ overlay, children }) => (React.createElement(SpaceOverlayContext.Provider, { value: overlay }, children));
+const NO_OVERLAY = () => () => undefined;
+function useOverlayStatus() {
+    const overlay = useContext(SpaceOverlayContext);
+    return useSyncExternalStore(overlay?.subscribe ?? NO_OVERLAY, () => overlay?.getStatus() ?? null);
+}
+/**
+ * The window of the overlay of TwakeSpace once connected, else null: what
+ * renders there is laid out on its size, not on this frame's
+ */
+export function useOverlayWindow() {
+    const overlay = useContext(SpaceOverlayContext);
+    const status = useOverlayStatus();
+    return status === 'connected'
+        ? (overlay?.getBody()?.ownerDocument.defaultView ?? null)
+        : null;
+}
+/**
+ * Renders its children on the overlay of TwakeSpace when the app is framed
+ * there, in place otherwise. Menus and tooltips opened inside follow: MUI
+ * portals them into the document of their anchor.
+ */
+export const OverlayPortal = ({ children }) => {
+    const overlay = useContext(SpaceOverlayContext);
+    const status = useOverlayStatus();
+    // Shown in place first, then moved, it would mount twice: a window being
+    // written in would lose what it holds
+    if (status === 'connecting')
+        return null;
+    const body = status === 'connected' ? (overlay?.getBody() ?? null) : null;
+    return (React.createElement(Portal, { container: body, disablePortal: body === null }, children));
+};
+/**
+ * Theme options sending every dialog and temporary drawer to the overlay, so
+ * they are centred on the window of TwakeSpace and dim all of it. Built once:
+ * the theme provider rebuilds the theme when they change.
+ */
+export function overlayThemeOptions(overlay) {
+    // Null before TwakeSpace answers: MUI then portals into the app's own body
+    const container = () => overlay.getBody();
+    return {
+        components: {
+            MuiDialog: { defaultProps: { container } },
+            // Its backdrop dims all of TwakeSpace: shown at once with its panel,
+            // not faded in over the whole page
+            MuiDrawer: {
+                defaultProps: {
+                    container,
+                    slotProps: { backdrop: { transitionDuration: 0 } }
+                }
+            }
+        }
+    };
+}

package/dist/components/SpaceOverlay/region.d.ts

@@ -0,0 +1,25 @@
+/** A box the app draws on the overlay, in CSS px of the window */
+export interface OverlayBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * The part of the overlay TwakeSpace shows: `'full'` while something there
+ * blocks the page (a dialog, a menu, a fullscreen window), otherwise the
+ * boxes the app draws
+ */
+export type OverlayRegion = 'full' | readonly OverlayBox[];
+declare const OVERLAY_REGION = "twake-embed:overlay-region";
+export declare function parseOverlayRegion(value: unknown): OverlayRegion | null;
+/** The message an app posts to TwakeSpace with the region of its overlay */
+export declare function overlayRegionMessage(region: OverlayRegion): {
+    type: typeof OVERLAY_REGION;
+    region: OverlayRegion;
+};
+/** The region an app reports, from `overlayRegionMessage` */
+export declare function parseOverlayRegionMessage(data: unknown): OverlayRegion | null;
+/** The clip path of the overlay: nothing until the app says what it draws */
+export declare function overlayClipPath(region: OverlayRegion | null): string;
+export {};

package/dist/components/SpaceOverlay/region.js

@@ -0,0 +1,63 @@
+// The region of the overlay an embedded app draws on, over the whole page of
+// TwakeSpace. It is a frame on the app's origin: the app renders its docked
+// windows and dialogs into it, and TwakeSpace only shows the region the app
+// says it draws in (`twake-embed:overlay-region`), so the rest of the page
+// keeps its clicks.
+const OVERLAY_REGION = 'twake-embed:overlay-region';
+const MAX_BOXES = 32;
+const MAX_SIZE = 100000;
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function isCoordinate(value) {
+    return (typeof value === 'number' &&
+        Number.isFinite(value) &&
+        Math.abs(value) <= MAX_SIZE);
+}
+function toBox(value) {
+    if (!isRecord(value))
+        return null;
+    const { x, y, width, height } = value;
+    if (!isCoordinate(x) ||
+        !isCoordinate(y) ||
+        !isCoordinate(width) ||
+        !isCoordinate(height)) {
+        return null;
+    }
+    if (width < 0 || height < 0)
+        return null;
+    return { x, y, width, height };
+}
+export function parseOverlayRegion(value) {
+    if (value === 'full')
+        return 'full';
+    if (!Array.isArray(value) || value.length > MAX_BOXES)
+        return null;
+    const boxes = [];
+    for (const item of value) {
+        const box = toBox(item);
+        if (box === null)
+            return null;
+        boxes.push(box);
+    }
+    return boxes;
+}
+/** The message an app posts to TwakeSpace with the region of its overlay */
+export function overlayRegionMessage(region) {
+    return { type: OVERLAY_REGION, region };
+}
+/** The region an app reports, from `overlayRegionMessage` */
+export function parseOverlayRegionMessage(data) {
+    if (!isRecord(data) || data.type !== OVERLAY_REGION)
+        return null;
+    return parseOverlayRegion(data.region);
+}
+/** The clip path of the overlay: nothing until the app says what it draws */
+export function overlayClipPath(region) {
+    if (region === 'full')
+        return 'none';
+    if (region === null || region.length === 0)
+        return 'inset(0 0 100% 0)';
+    const boxes = region.map(({ x, y, width, height }) => ['M', x, ' ', y, 'h', width, 'v', height, 'h', -width, 'Z'].join(''));
+    return `path('${boxes.join(' ')}')`;
+}

package/dist/components/SpaceOverlay/spaceOverlay.d.ts

@@ -0,0 +1,42 @@
+import type { OverlayRegion } from './region';
+/**
+ * Where the overlay stands: looked for (render nothing yet, so that what
+ * would render in place does not mount twice), there, or not coming (render
+ * in place)
+ */
+export type SpaceOverlayStatus = 'connecting' | 'connected' | 'unavailable';
+/**
+ * The overlay TwakeSpace frames over its whole window, on this app's origin:
+ * docked windows and dialogs render into its body with portals, so they sit
+ * on the page of TwakeSpace instead of inside the app's frame
+ */
+export interface SpaceOverlay {
+    getStatus: () => SpaceOverlayStatus;
+    /** The body to render into, null unless connected */
+    getBody: () => HTMLElement | null;
+    /** Called when the status changes */
+    subscribe: (listener: () => void) => () => void;
+}
+/**
+ * The overlay of this frame, found by name: TwakeSpace names it after the
+ * frame (`<frame name>:overlay`). Null outside a frame or in a frame without
+ * a name, where windows and dialogs stay in the app. `reportRegion` tells
+ * TwakeSpace the region of the overlay to show.
+ *
+ * Connected once per window: the app's styles are copied by wrapping the
+ * stylesheet methods of its window, so a later call returns the first
+ * connection, and its `reportRegion` is ignored.
+ */
+export declare function connectSpaceOverlay(reportRegion: (region: OverlayRegion) => void): SpaceOverlay | null;
+/**
+ * Copies every CSS rule of the app into the overlay, and again whenever the
+ * app adds some: Emotion and its global styles insert rules one by one
+ * (`insertRule`), other styles arrive as elements of the head
+ */
+export declare function mirrorStyles(source: Document, target: Document): void;
+/**
+ * What the overlay shows: everything while a modal (dialog, menu) or a
+ * backdrop is open, otherwise the boxes that paint something. A box that
+ * neither takes clicks nor paints (the dock line) is looked through.
+ */
+export declare function computeOverlayRegion(doc: Document): OverlayRegion;

package/dist/components/SpaceOverlay/spaceOverlay.js

@@ -0,0 +1,312 @@
+// The overlay TwakeSpace puts over its page for an embedded app (ADR 010 of
+// twake-space-architecture), from the side of the app.
+/** Room left around each box for its shadow, in px */
+const SHADOW_MARGIN = 16;
+/**
+ * How long a frame named by TwakeSpace waits for its overlay before showing
+ * its windows in place: the overlay loads in well under a second, and a
+ * TwakeSpace without overlay should not hold a composer back longer
+ */
+const CONNECT_TIMEOUT_MS = 5000;
+/** How often the overlay is looked for while TwakeSpace loads it */
+const LOOKUP_INTERVAL_MS = 100;
+/** Changes of the overlay sent together, about one frame */
+const REGION_DELAY_MS = 16;
+const FOCUS_RETRY_MS = 50;
+/** The overlay of this window, once looked for */
+let connection = null;
+/**
+ * The overlay of this frame, found by name: TwakeSpace names it after the
+ * frame (`<frame name>:overlay`). Null outside a frame or in a frame without
+ * a name, where windows and dialogs stay in the app. `reportRegion` tells
+ * TwakeSpace the region of the overlay to show.
+ *
+ * Connected once per window: the app's styles are copied by wrapping the
+ * stylesheet methods of its window, so a later call returns the first
+ * connection, and its `reportRegion` is ignored.
+ */
+export function connectSpaceOverlay(reportRegion) {
+    connection ?? (connection = { overlay: connect(reportRegion) });
+    return connection.overlay;
+}
+function connect(reportRegion) {
+    if (window.parent === window || window.name === '')
+        return null;
+    const name = `${window.name}:overlay`;
+    const listeners = new Set();
+    let status = 'connecting';
+    let body = null;
+    const settle = (next) => {
+        if (status !== 'connecting')
+            return;
+        status = next;
+        listeners.forEach(listener => {
+            listener();
+        });
+    };
+    const attach = (doc) => {
+        mirrorStyles(document, doc);
+        followRegion(doc, reportRegion, followFocus(document));
+        body = doc.body;
+        settle('connected');
+    };
+    const giveUp = setTimeout(() => {
+        settle('unavailable');
+    }, CONNECT_TIMEOUT_MS);
+    const find = () => {
+        if (status !== 'connecting')
+            return;
+        const overlay = findOverlay(name);
+        if (overlay !== null) {
+            clearTimeout(giveUp);
+            attach(overlay);
+            return;
+        }
+        setTimeout(find, LOOKUP_INTERVAL_MS);
+    };
+    find();
+    return {
+        getStatus: () => status,
+        getBody: () => body,
+        subscribe: listener => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        }
+    };
+}
+/**
+ * The element of the app that last had the focus: a dialog opened from it
+ * shows on the overlay, and closing it cannot give the focus back across
+ * frames (the focus event carries no `relatedTarget` there)
+ */
+function followFocus(app) {
+    let last = null;
+    app.addEventListener('focusin', event => {
+        if (event.target !== app.body)
+            last = event.target;
+    });
+    return () => (last?.isConnected ? last : null);
+}
+/**
+ * The document of the overlay once loaded: until then the frame holds the
+ * blank page of TwakeSpace, of another origin
+ */
+function findOverlay(name) {
+    const frames = Array.from({ length: window.parent.length }, (_, index) => window.parent[index]);
+    for (const frame of frames) {
+        try {
+            if (frame?.name === name &&
+                frame.location.href !== 'about:blank' &&
+                frame.document.readyState === 'complete') {
+                return frame.document;
+            }
+        }
+        catch {
+            // Another origin
+        }
+    }
+    return null;
+}
+/**
+ * Copies every CSS rule of the app into the overlay, and again whenever the
+ * app adds some: Emotion and its global styles insert rules one by one
+ * (`insertRule`), other styles arrive as elements of the head
+ */
+export function mirrorStyles(source, target) {
+    const sourceWindow = source.defaultView;
+    if (sourceWindow === null)
+        return;
+    const mirror = target.createElement('style');
+    mirror.dataset.mirror = '';
+    target.head.appendChild(mirror);
+    const linked = new Set();
+    const copy = () => {
+        const css = [];
+        for (const sheet of Array.from(source.styleSheets)) {
+            // A stylesheet file is loaded again: its relative URLs (fonts) resolve
+            // against it, and the rules of another origin cannot be read
+            if (sheet.href !== null) {
+                if (!linked.has(sheet.href)) {
+                    linked.add(sheet.href);
+                    const link = target.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = sheet.href;
+                    target.head.insertBefore(link, mirror);
+                }
+                continue;
+            }
+            try {
+                for (const rule of Array.from(sheet.cssRules))
+                    css.push(rule.cssText);
+            }
+            catch {
+                // Unreadable: nothing to copy
+            }
+        }
+        mirror.textContent = css.join('\n');
+        copyRootAttributes(source.documentElement, target.documentElement);
+    };
+    let scheduled = false;
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        sourceWindow.requestAnimationFrame(() => {
+            scheduled = false;
+            copy();
+        });
+    };
+    // A rule inserted in the app is in the overlay at once, before what it
+    // styles is laid out: a popover measures its paper as it mounts, and a
+    // paper without its rules spans the whole window. The copy that follows
+    // puts the rule back in its place.
+    const copyRule = (sheet, rule) => {
+        const copied = mirror.sheet;
+        // A stylesheet file is loaded again instead
+        if (Boolean(sheet.href) || copied === null || sheet === copied)
+            return;
+        try {
+            copied.insertRule(rule, copied.cssRules.length);
+        }
+        catch {
+            // Not allowed at the end of a sheet (`@import`): left to the copy
+        }
+    };
+    // Emotion inserts rules without touching the DOM: watch the CSSOM itself
+    const prototype = sourceWindow.CSSStyleSheet.prototype;
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- wrapped, called with its sheet
+    const insertRule = prototype.insertRule;
+    prototype.insertRule = function (...args) {
+        const index = insertRule.apply(this, args);
+        copyRule(this, args[0]);
+        schedule();
+        return index;
+    };
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- wrapped, called with its sheet
+    const deleteRule = prototype.deleteRule;
+    prototype.deleteRule = function (...args) {
+        schedule();
+        deleteRule.apply(this, args);
+    };
+    new MutationObserver(schedule).observe(source.head, {
+        childList: true,
+        subtree: true,
+        characterData: true
+    });
+    // The colour scheme and the language live on <html>
+    new MutationObserver(schedule).observe(source.documentElement, {
+        attributes: true
+    });
+    copy();
+}
+function copyRootAttributes(source, target) {
+    for (const { name, value } of Array.from(source.attributes)) {
+        if (name !== 'style' && target.getAttribute(name) !== value) {
+            target.setAttribute(name, value);
+        }
+    }
+}
+/**
+ * Gives the focus back to an element of the app, again for a moment: while
+ * the dialog was open TwakeSpace made its page inert, the app's frame
+ * included, and takes that back only once it reads the new region
+ */
+function restoreFocus(target, attempts = 10) {
+    target.focus();
+    if (target.ownerDocument.activeElement === target && document.hasFocus()) {
+        return;
+    }
+    if (attempts > 1) {
+        setTimeout(() => {
+            restoreFocus(target, attempts - 1);
+        }, FOCUS_RETRY_MS);
+    }
+}
+/**
+ * Sends TwakeSpace the region of the overlay to show, each time it changes.
+ * When a dialog closes and leaves the focus nowhere on the overlay, it goes
+ * back to the element of the app that had it.
+ */
+function followRegion(doc, reportRegion, lastAppFocus) {
+    const view = doc.defaultView;
+    if (view === null)
+        return;
+    let last = '';
+    let scheduled = false;
+    const send = () => {
+        scheduled = false;
+        const region = computeOverlayRegion(doc);
+        const key = JSON.stringify(region);
+        if (key === last)
+            return;
+        const wasBlocking = last === '"full"';
+        last = key;
+        reportRegion(region);
+        if (wasBlocking && region !== 'full' && doc.activeElement === doc.body) {
+            const target = lastAppFocus();
+            if (target !== null)
+                restoreFocus(target);
+        }
+    };
+    // Not the overlay's animation frames: the browser does not run them while
+    // the overlay shows nothing, which it does until it reports a region
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        setTimeout(send, REGION_DELAY_MS);
+    };
+    new MutationObserver(schedule).observe(doc.body, {
+        childList: true,
+        subtree: true,
+        attributes: true
+    });
+    for (const type of ['transitionend', 'transitioncancel', 'animationend']) {
+        doc.addEventListener(type, schedule, true);
+    }
+    view.addEventListener('resize', schedule);
+    schedule();
+}
+/**
+ * What the overlay shows: everything while a modal (dialog, menu) or a
+ * backdrop is open, otherwise the boxes that paint something. A box that
+ * neither takes clicks nor paints (the dock line) is looked through.
+ */
+export function computeOverlayRegion(doc) {
+    const view = doc.defaultView;
+    if (view === null)
+        return [];
+    const blocking = Array.from(doc.body.querySelectorAll('.MuiModal-root, .MuiBackdrop-root')).some(element => element.closest('.MuiModal-hidden') === null &&
+        view.getComputedStyle(element).visibility !== 'hidden');
+    if (blocking)
+        return 'full';
+    const boxes = [];
+    const visit = (element) => {
+        const style = view.getComputedStyle(element);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return;
+        if (style.pointerEvents === 'none' && !paints(style)) {
+            Array.from(element.children).forEach(visit);
+            return;
+        }
+        const box = element.getBoundingClientRect();
+        if (box.width > 0 && box.height > 0) {
+            boxes.push({
+                x: Math.floor(box.left - SHADOW_MARGIN),
+                y: Math.floor(box.top - SHADOW_MARGIN),
+                width: Math.ceil(box.width + 2 * SHADOW_MARGIN),
+                height: Math.ceil(box.height + 2 * SHADOW_MARGIN)
+            });
+        }
+    };
+    Array.from(doc.body.children).forEach(visit);
+    return boxes;
+}
+function paints(style) {
+    const transparent = (color) => color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
+    return (!transparent(style.backgroundColor) ||
+        (style.boxShadow !== 'none' && style.boxShadow !== '') ||
+        (style.borderStyle !== 'none' &&
+            style.borderStyle !== '' &&
+            parseFloat(style.borderWidth) > 0));
+}

package/dist/index.d.ts

@@ -41,6 +41,10 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
+export { connectSpaceOverlay, computeOverlayRegion } from './components/SpaceOverlay/spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './components/SpaceOverlay/SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './components/SpaceOverlay/region';
+export { OverlayFrame } from './components/SpaceOverlay/OverlayFrame';
 export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
 export type { AvatarProps } from './components/Avatar';
@@ -53,6 +57,10 @@ export type { ContactPopoverVideoActionProps } from './components/ContactPopover
 export type { ContactPopoverCalendarActionProps } from './components/ContactPopover/ContactPopoverCalendarAction';
 export type { ContactPopoverEmailActionProps } from './components/ContactPopover/ContactPopoverEmailAction';
 export type { ChipProps } from './components/Chip';
+export type { SpaceOverlay, SpaceOverlayStatus } from './components/SpaceOverlay/spaceOverlay';
+export type { SpaceOverlayProviderProps } from './components/SpaceOverlay/SpaceOverlay';
+export type { OverlayBox, OverlayRegion } from './components/SpaceOverlay/region';
+export type { OverlayFrameProps } from './components/SpaceOverlay/OverlayFrame';
 export type { DialogProps, DialogSize } from './components/Dialog';
 export type { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
 export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';

package/dist/index.js

@@ -44,4 +44,8 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
+export { connectSpaceOverlay, computeOverlayRegion } from './components/SpaceOverlay/spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './components/SpaceOverlay/SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './components/SpaceOverlay/region';
+export { OverlayFrame } from './components/SpaceOverlay/OverlayFrame';
 export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';

package/dist/lib/overrides.js

@@ -16,7 +16,7 @@ import { selectClasses } from '@mui/material/Select';
 import { switchClasses } from '@mui/material/Switch';
 import { tabClasses } from '@mui/material/Tab';
 import { tabsClasses } from '@mui/material/Tabs';
-import { alpha, darken } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 import React from 'react';
 import { radius } from './radius';
 import AccordionExpandIcon from '../components/AccordionExpandIcon';
@@ -45,10 +45,7 @@ const alertSeverityVariants = alertSeverities.flatMap(severity => [
                 backgroundColor: theme.alpha(theme.vars.palette[severity].main, 0.24)
             }),
             [`& .${alertClasses.icon}`]: { color: alertIconColor(severity, theme) },
-            // Alert renders its close button, titled with the translated
-            // `closeText`, as the only child of the action slot and only when no
-            // custom `action` is given: matching that structure, not the title,
-            // keeps the style in every language.
+            // targets close button
             [`& .${alertClasses.action} > .${iconButtonClasses.root}:only-child`]: {
                 color: theme.vars.palette.text.secondary
             }
@@ -523,7 +520,7 @@ export const overrides = {
                 height: 14,
                 minWidth: 14,
                 padding: 0,
-                border: `2px solid ${theme.palette.background.paper}`,
+                border: `2px solid ${theme.vars.palette.background.paper}`,
                 borderRadius: '100%',
                 fontSize: theme.typography.pxToRem(10)
             }),
@@ -590,12 +587,12 @@ export const overrides = {
     MuiToggleButtonGroup: {
         styleOverrides: {
             root: ({ theme }) => ({
-                borderColor: theme.palette.secondary.dark,
+                borderColor: theme.vars.palette.secondary.dark,
                 '& .MuiToggleButton-root:not(.Mui-selected)': {
-                    color: theme.palette.text.secondary,
-                    backgroundColor: alpha(theme.palette.text.secondary, 0.08),
+                    color: theme.vars.palette.text.secondary,
+                    backgroundColor: theme.alpha(theme.vars.palette.text.secondary, 0.08),
                     '& svg, & .MuiSvgIcon-root': {
-                        color: theme.palette.text.secondary
+                        color: theme.vars.palette.text.secondary
                     }
                 }
             })
@@ -604,15 +601,15 @@ export const overrides = {
     MuiToggleButton: {
         styleOverrides: {
             root: ({ theme }) => ({
-                color: theme.palette.text.primary,
+                color: theme.vars.palette.text.primary,
                 '&.Mui-selected': {
-                    color: theme.palette.text.primary,
+                    color: theme.vars.palette.text.primary,
                     backgroundColor: 'transparent',
                     '&:hover': {
                         backgroundColor: 'transparent'
                     },
                     '& svg, & .MuiSvgIcon-root': {
-                        color: theme.palette.primary.main
+                        color: theme.vars.palette.primary.main
                     }
                 },
                 variants: [
@@ -634,7 +631,7 @@ export const overrides = {
                     {
                         props: { color: 'default' },
                         style: {
-                            color: theme.palette.text.secondary
+                            color: theme.vars.palette.text.secondary
                         }
                     },
                     {
@@ -958,7 +955,9 @@ export const overrides = {
                 marginLeft: 5,
                 marginRight: -12,
                 transform: 'rotate(-90deg)',
-                [`&.${accordionSummaryClasses.expanded}`]: { transform: 'rotate(0deg)' }
+                [`&.${accordionSummaryClasses.expanded}`]: {
+                    transform: 'rotate(0deg)'
+                }
             }),
             content: {
                 paddingLeft: 8,
@@ -984,23 +983,23 @@ export const overrides = {
                 borderRadius: 28,
                 width: 96,
                 height: 96,
-                color: theme.palette.text.primary,
-                backgroundColor: theme.palette.background.paper,
+                color: theme.vars.palette.text.primary,
+                backgroundColor: theme.vars.palette.background.paper,
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.background.paper, 0.05)
+                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper}, #000 5%)`
                 },
                 '@media (hover: none)': {
-                    backgroundColor: theme.palette.background.paper
+                    backgroundColor: theme.vars.palette.background.paper
                 }
             }),
             primary: ({ theme }) => ({
-                color: theme.palette.primary.dark,
-                backgroundColor: theme.palette.primary.light,
+                color: theme.vars.palette.primary.dark,
+                backgroundColor: theme.vars.palette.primary.light,
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.primary.light, 0.05)
+                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.light}, #000 5%)`
                 },
                 '@media (hover: none)': {
-                    backgroundColor: theme.palette.primary.light
+                    backgroundColor: theme.vars.palette.primary.light
                 }
             }),
             extended: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "10.3.0",
+  "version": "10.4.1",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -78,6 +78,7 @@
     "@storybook/builder-vite": "10.3.5",
     "@storybook/react": "10.3.5",
     "@storybook/react-vite": "10.3.5",
+    "@testing-library/react": "^16.3.3",
     "@types/classnames": "^2.3.1",
     "@types/lodash": "4.17.24",
     "@types/react": "19.3.0",
@@ -87,6 +88,7 @@
     "eslint": "10.2.1",
     "eslint-config-cozy-app": "7.0.0",
     "eslint-plugin-storybook": "10.3.5",
+    "jsdom": "^30.1.2",
     "lodash": "4.18.1",
     "playwright": "1.60.0",
     "react": "^19.3.0",