# io.Connect Browser 4.6 Source: https://docs.interop.io/browser/getting-started/changelog/4-6/index.html ## io.Connect Browser 4.6 *Release date: 07.10.2026* Versions of all main and additional libraries of **io.Connect Browser** for the current release: | Library | Version | |---------|---------| | [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) | 4.6 | | [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) | 4.6 | | [`@interopio/browser-worker`](https://www.npmjs.com/package/@interopio/browser-worker) | 4.6 | | [`@interopio/cli`](https://www.npmjs.com/package/@interopio/cli) | 4.5 | | [`@interopio/fdc3`](https://www.npmjs.com/package/@interopio/fdc3) | 2.12 | | [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) | 5.0 | | [`@interopio/iframes-api`](https://www.npmjs.com/package/@interopio/iframes-api) | 1.1 | | [`@interopio/intent-resolver-ui`](https://www.npmjs.com/package/@interopio/intent-resolver-ui) | 5.0 | | [`@interopio/modals-api`](https://www.npmjs.com/package/@interopio/modals-api) | 5.0 | | [`@interopio/modals-ui`](https://www.npmjs.com/package/@interopio/modals-ui) | 5.0 | | [`@interopio/ng`](https://www.npmjs.com/package/@interopio/ng) | 6.3 | | [`@interopio/react-hooks`](https://www.npmjs.com/package/@interopio/react-hooks) | 5.0 | | [`@interopio/search-api`](https://www.npmjs.com/package/@interopio/search-api) | 3.6 | | [`@interopio/theme`](https://www.npmjs.com/package/@interopio/theme) | 5.0 | | [`@interopio/widget`](https://www.npmjs.com/package/@interopio/widget) | 3.6 | | [`@interopio/workspaces-api`](https://www.npmjs.com/package/@interopio/workspaces-api) | 4.6 | | [`@interopio/workspaces-ui-react`](https://www.npmjs.com/package/@interopio/workspaces-ui-react) | 5.0 | | [`@interopio/workspaces-ui-web-components`](https://www.npmjs.com/package/@interopio/workspaces-ui-web-components) | 5.0 | > ⚠️ *Note that in this release the major version of some of the libraries has been incremented only for release purposes and procedural consistency, not due to breaking changes in the respective libraries.* ## Breaking Changes > ⚠️ *Note that each breaking change is listed under all libraries it affects.* > ### @interopio/home-ui-react > > - The `getIcon()` function in the `config` object of the `
` component, used for creating [custom sections](https://docs.interop.io/browser/capabilities/home-app/library-features/index.md#using_the_components-launchpad-custom_sections), must now return `{ variant: IconVariant }` for predefined icons or `{ src: string }` for custom icons instead of a string. > ### @interopio/theme > > Due to redesign of the Layouts panel in the Launchpad and overall improvement of the platform styles, the following CSS variables have been removed or replaced: > > - Removed the CSS variables for the Layouts panel of the Launchpad: `--launchpad-layouts-check-icon-size`, `--launchpad-layouts-create-button-margin`, `--launchpad-layouts-header-height`, `--launchpad-layouts-header-padding`, `--launchpad-layouts-no-active-padding`, `--launchpad-layouts-separator-color`, `--launchpad-layouts-separator-margin`, `--launchpad-layouts-separator-size`, and `--launchpad-layouts-wrapper-margin`. Use the new [CSS variables for the Layouts footer](#new_features-interopiotheme-launchpad_layouts_footer) instead. > - Removed the `--launchpad-section-item-actions-desktop-gap`, `--launchpad-section-item-actions-margin`, and `--launchpad-section-item-actions-mobile-gap` CSS variables. > - Removed the `--workspace-popup-wsp-separator` CSS variable. > - Replaced the `--workspace-popup-app-padding`, `--workspace-popup-wsp-title-lh`, and `--workspace-popup-wsp-title-padding` CSS variables with new [CSS variables for the Workspace dialogs and popups](#new_features-interopiotheme-workspace_dialogs__popups). > - Replaced the `--workspace-settings-h-padding` and `--workspace-settings-v-padding` CSS variables with new [CSS variables for the Workspace Settings panel](#new_features-interopiotheme-workspace_settings_panel). ## New Features > ⚠️ *Note that each new feature is listed under all libraries it affects.* > ### @interopio/browser-platform > > #### Tab Overflow for Workspaces > > It's now possible to enable [tab overflow for Workspaces](https://docs.interop.io/browser/capabilities/windows/workspaces/enabling-workspaces/index.md#main_app-tab_overflow). When there isn't enough space to display all Workspace tabs in the Workspaces App header, the Workspace tabs shrink to a minimum width and then become scrollable. A "More Workspaces" button appears in the header, allowing users to select or close any of the Workspaces whose tabs are out of view to the left and to the right of the visible Workspace tabs. > > ![Tab Overflow for Workspaces](https://docs.interop.io/browser/images/workspaces/tab-overflow.png) > > By default, tab overflow for Workspaces is disabled. To enable it, set the `workspaceTabsOverflow` property of the `workspaces` object to `true` in the configuration object for initializing the [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) library: > > ```javascript > import IOBrowserPlatform from "@interopio/browser-platform"; > > const config = { > licenseKey: "my-license-key", > workspaces: { > src: "https://my-workspaces-app.com", > // Enabling tab overflow for Workspaces. > workspaceTabsOverflow: true > } > }; > > const { io } = await IOBrowserPlatform(config); > ``` > > > ℹ️ *For details on customizing the tab overflow for Workspaces, see the [Developers > Platform Styles > Workspaces > Tab Overflow](https://docs.interop.io/browser/developers/platform-styles/index.md#workspaces-tab_overflow) section.* > ### @interopio/home-ui-react > > #### Launchpad Redesign > > The [Launchpad](https://docs.interop.io/browser/capabilities/home-app/overview/index.md#using_the_home_app-launchpad_sections) has been redesigned - the Global Layouts are now listed in a Layouts section similarly to apps and Workspaces instead of in a separate panel in the Launchpad. The Layouts section is always rendered after all default and custom sections and can't be hidden or repositioned. The currently active Global Layout is displayed in a footer at the bottom of the Launchpad: > > ![Launchpad Sections](https://docs.interop.io/browser/images/home/launchpad-sections.png) > > Favorites are now added and removed via the context menu for each section item instead of via a dedicated button in the item list. Global Layouts can now also be added to the favorite items. > > The buttons for creating a new Workspace and a new Global Layout are now located in the headers of the Workspaces and Layouts sections respectively. > > > ℹ️ *For details on customizing the Launchpad sections and the Layouts footer, see the [Developers > Platform Styles > Launchpad > Sections](https://docs.interop.io/browser/developers/platform-styles/index.md#launchpad-sections) and [Developers > Platform Styles > Launchpad > Layouts Footer](https://docs.interop.io/browser/developers/platform-styles/index.md#launchpad-layouts_footer) sections respectively.* > > #### Library Features > > - Added `sectionIconSrc` to the [default section components](https://docs.interop.io/browser/capabilities/home-app/library-features/index.md#using_the_components-launchpad-default_sections): ``, ``, and ``. > - Extended the `config` object of the [`
`](https://docs.interop.io/browser/capabilities/home-app/library-features/index.md#using_the_components-launchpad-custom_sections) component with an optional `HeaderButton` property that accepts a custom section header action component. > - Added item-level `isSelected` and `statusPill` support for items rendered in the `
` component. > ### @interopio/theme > > Added CSS variables for [customizing the styles](https://docs.interop.io/browser/developers/platform-styles/index.md) of the following **io.Connect Browser** apps and UI components: > > #### Launchpad Sections > > Use the following CSS variables for customizing the styles of the [Launchpad](https://docs.interop.io/browser/developers/platform-styles/index.md#launchpad-sections) sections: > > | Variable | Description | > |----------|-------------| > | `--launchpad-section-header-min-height` | Minimum height for the headers of the Launchpad sections. | > | `--launchpad-section-header-padding` | Padding for the headers of the Launchpad sections. | > | `--launchpad-section-item-border-radius` | Border radius for the items in the Launchpad sections. | > | `--launchpad-section-item-margin` | Margin for the items in the Launchpad sections. | > | `--launchpad-section-item-padding` | Padding for the items in the Launchpad sections. | > > > ⚠️ *Note that some CSS variables for the Launchpad sections have been [deprecated](#breaking_changes-interopiotheme).* > > #### Launchpad Layouts Footer > > Use the following CSS variables for customizing the styles of the [Layouts footer](https://docs.interop.io/browser/developers/platform-styles/index.md#launchpad-layouts_footer) of the Launchpad: > > | Variable | Description | > |----------|-------------| > | `--launchpad-layouts-footer-active-layout-buttons-gap` | Gap between the action buttons for the active Layout in the Layouts footer. | > | `--launchpad-layouts-footer-active-layout-details-gap` | Gap between the details of the active Layout in the Layouts footer. | > | `--launchpad-layouts-footer-background-color` | Background color for the Layouts footer. | > | `--launchpad-layouts-footer-border-top` | Top border for the Layouts footer. | > | `--launchpad-layouts-footer-dot-separator-color` | Color for the dot separator in the Layouts footer. | > | `--launchpad-layouts-footer-heading-color` | Color for the heading of the Layouts footer. | > | `--launchpad-layouts-footer-heading-line-height` | Line height for the heading of the Layouts footer. | > | `--launchpad-layouts-footer-heading-size` | Font size for the heading of the Layouts footer. | > | `--launchpad-layouts-footer-heading-weight` | Font weight for the heading of the Layouts footer. | > | `--launchpad-layouts-footer-info-color` | Color for the info text in the Layouts footer. | > | `--launchpad-layouts-footer-info-font-size` | Font size for the info text in the Layouts footer. | > | `--launchpad-layouts-footer-info-line-height` | Line height for the info text in the Layouts footer. | > | `--launchpad-layouts-footer-padding` | Padding for the Layouts footer. | > | `--launchpad-layouts-footer-save-button-width` | Width for the "Save" button in the Layouts footer. | > > > ⚠️ *Note that some CSS variables for the Launchpad Layouts have been [deprecated](#breaking_changes-interopiotheme).* > > #### Workspace Tab > > Use the following CSS variables for customizing the styles of the [Workspace tabs](https://docs.interop.io/browser/developers/platform-styles/index.md#workspaces-workspace_tab): > > | Variable | Description | > |----------|-------------| > | `--workspace-tab-overflow-min-width` | Minimum width to which the Workspace tabs shrink before they become scrollable. Applies only when tab overflow for Workspaces is enabled. | > | `--workspace-tab-title-mask-image` | Mask image applied to the title of a Workspace tab, used for the text fade-out effect on text overflow. Set to `none` to disable the text mask. | > | `--workspace-tab-title-overflow` | Controls how the title of a Workspace tab is rendered when it overflows the available space. | > > The existing `--workspace-tab-text-mask` variable is no longer applied to the Workspace tab titles directly - it now only defines the fade-out gradient and is used as the default value of `--workspace-tab-title-mask-image`. Any custom gradient specified for `--workspace-tab-text-mask` will continue to be applied as before. > > ```css > #root { > /* The title will be truncated with an ellipsis instead of fading out. */ > --workspace-tab-title-mask-image: none; > --workspace-tab-title-overflow: ellipsis; > } > ``` > > #### Tab Overflow for Workspaces > > Use the following CSS variables for customizing the styles of the [tab overflow for Workspaces](https://docs.interop.io/browser/developers/platform-styles/index.md#workspaces-tab_overflow) elements: > > | Variable | Description | > |----------|-------------| > | `--workspace-tabs-overflow-button-margin` | Margin for the "More Workspaces" button. | > | `--workspace-tabs-overflow-panel-h-padding` | Horizontal padding for the "More Workspaces" panel. | > | `--workspace-tabs-overflow-panel-max-height` | Maximum height for the "More Workspaces" panel. | > | `--workspace-tabs-overflow-panel-v-padding` | Vertical padding for the "More Workspaces" panel. | > | `--workspace-tabs-overflow-scroll-axis` | Padding along the scrollbar for the Workspace tabs. | > | `--workspace-tabs-overflow-scroll-color` | Color for the scroll handle for the Workspace tabs. | > | `--workspace-tabs-overflow-scroll-color-active` | Color for the scroll handle for the Workspace tabs when active. | > | `--workspace-tabs-overflow-scroll-color-hover` | Color for the scroll handle for the Workspace tabs when hovered. | > | `--workspace-tabs-overflow-scroll-fade-size` | Width of the fade-out effect at the edges of the Workspace tabs area when there are Workspace tabs out of view. | > | `--workspace-tabs-overflow-scroll-perpendicular` | Padding across the scrollbar for the Workspace tabs. | > | `--workspace-tabs-overflow-scroll-size` | Size of the scroll handle for the Workspace tabs. | > > #### Workspace Dialogs & Popups > > Use the following CSS variables for customizing the styles of the [Workspace dialogs and popups](https://docs.interop.io/browser/developers/platform-styles/index.md#workspaces-dialogs__popups): > > | Variable | Description | > |----------|-------------| > | `--workspace-dialog-heading-color` | Color for the heading in the Workspace dialogs. | > | `--workspace-dialog-heading-font-size` | Font size for the heading in the Workspace dialogs. | > | `--workspace-dialog-heading-font-weight` | Font weight for the heading in the Workspace dialogs. | > | `--workspace-dialog-heading-lh` | Line height for the heading in the Workspace dialogs. | > | `--workspace-popup-add-workspace-button-padding` | Padding for the "Create New Workspace" button in the "Add Workspace" popup. | > | `--workspace-popup-add-workspace-title-lh` | Line height for the title of the "Add Workspace" popup. | > | `--workspace-popup-add-workspace-title-padding` | Padding for the title of the "Add Workspace" popup. | > | `--workspace-popup-app-button-width` | Width for the buttons in the "Add Apps" popup. | > | `--workspace-popup-app-padding-horizontal` | Horizontal padding for the "Add Apps" popup. | > | `--workspace-popup-app-padding-vertical` | Vertical padding for the "Add Apps" popup. | > | `--workspace-popup-border-radius` | Border radius for the Workspace popups. | > | `--workspace-popup-panel-horizontal-padding` | Horizontal padding for the Workspace popups. | > | `--workspace-popup-panel-vertical-padding` | Vertical padding for the Workspace popups. | > | `--workspace-popup-scroll-perpendicular` | Padding across the scrollbar in the Workspace popups. | > | `--workspace-popup-scroll-size` | Size of the scroll handle in the Workspace popups. | > | `--workspace-popup-title-color` | Color for the title in the Workspace tab menu. | > | `--workspace-popup-title-padding` | Padding for the title in the Workspace tab menu. | > > > ⚠️ *Note that some CSS variables for the Workspace dialogs and popups have been [deprecated](#breaking_changes-interopiotheme).* > > #### Workspace Settings Panel > > Use the following CSS variables for customizing the styles of the [Workspace Settings panel](https://docs.interop.io/browser/developers/platform-styles/index.md#workspaces-settings_panel): > > | Variable | Description | > |----------|-------------| > | `--workspace-settings-padding` | Padding for the Workspace Settings panel. | > | `--workspace-settings-title-padding` | Padding for the title of the Workspace Settings panel. | > > > ⚠️ *Note that some CSS variables for the Workspace Settings panel have been [deprecated](#breaking_changes-interopiotheme).* > ### @interopio/workspaces-ui-react > > #### Tab Overflow for Workspaces > > Added support for [tab overflow for Workspaces](https://docs.interop.io/browser/capabilities/windows/workspaces/enabling-workspaces/index.md#main_app-tab_overflow). > > The library provides a default Workspace Tabs Overflow component and a default "More Workspaces" button, which are available as the `` and `` components. You can reuse them in your [custom Workspaces App](https://docs.interop.io/browser/capabilities/windows/workspaces/workspaces-app/index.md), or replace the default Workspace Tabs Overflow component entirely. > > The "More Workspaces" button is part of the [System Buttons](https://docs.interop.io/browser/capabilities/windows/workspaces/workspaces-app/index.md#header_components-system_buttons) component. If you replace the System Buttons component, use the `` component and pass it the `workspaceTabsOverflow` prop of the System Buttons component in order to preserve the "More Workspaces" button: > > ```javascript > import Workspaces, { WorkspaceTabsOverflowButton } from "@interopio/workspaces-ui-react"; > import CustomButton from "./CustomButton"; > > const CustomSystemButtons = ({ workspaceTabsOverflow }) => { > return ( > <> > {/* Preserves the default "More Workspaces" button for tab overflow. */} > > > > ); > }; > > const App = () => { > return ( > components={{ > header: { > SystemButtonsComponent: CustomSystemButtons > } > }} > /> > ); > }; > > export default App; > ``` > > To replace the default Workspace Tabs Overflow component, use the `WorkspaceTabsOverflowComponent` property of the `popups` object within the `components` prop of the `` component. The [custom component](https://docs.interop.io/browser/capabilities/windows/workspaces/workspaces-app/index.md#custom_popups-replacing_the_system_popups) receives the lists of Workspaces whose tabs are out of view to the left and to the right of the visible tabs, as well as functions for selecting and closing a Workspace. > > The following example demonstrates a reference implementation of the Workspace Tabs Overflow component that lists all Workspaces whose tabs are out of view: > > ```javascript > const MyTabsOverflowPopup = ({ hiddenTabsToTheLeft, hiddenTabsToTheRight, onSelectWorkspace, onCloseWorkspace }) => { > const hiddenTabs = [...hiddenTabsToTheLeft, ...hiddenTabsToTheRight]; > > return ( >
    > {hiddenTabs.map(({ id, title }) => ( >
  • > onSelectWorkspace(id)}>{title} > >
    • > ))} >
> ); > }; > > export default MyTabsOverflowPopup; > ``` > > The following example demonstrates how to replace the default Workspace Tabs Overflow component with your custom component: > > ```javascript > import Workspaces from "@interopio/workspaces-ui-react"; > import MyTabsOverflowPopup from "./MyTabsOverflowPopup"; > > const App = () => { > return ( > components={{ > popups: { > WorkspaceTabsOverflowComponent: MyTabsOverflowPopup > } > }} > /> > ); > }; > > export default App; > ``` > > #### Workspace Tab Menu > > The Workspace tab menu has been redesigned and now displays the name of the Workspace Layout. The "Save" option now saves the Workspace in its current Layout, while the new "Save As" option saves it under a new name. The new "Rename" and "Delete" options allow users to rename and delete the Workspace Layout. The "Settings" option has been renamed to "Lock Settings". > > > ℹ️ *For details on customizing the Workspace tab menu, see the [Developers > Platform Styles > Workspaces > Dialogs & Popups > General](https://docs.interop.io/browser/developers/platform-styles/index.md#workspaces-dialogs__popups-general) section.* > > > ### @interopio/workspaces-ui-web-components > > - Added support for [tab overflow for Workspaces](https://docs.interop.io/browser/capabilities/windows/workspaces/enabling-workspaces/index.md#main_app-tab_overflow). > > - Added support for the redesigned Workspace tab menu. > > ## Improvements & Bug Fixes > ⚠️ *Note that each improvement or bug fix is listed under all libraries it affects.* > ### @interopio/browser-platform > > - Fixed an issue related to properly initializing apps using the `@interopio/browser-platform` library as Browser Clients when opened via the [IFrames API](https://docs.interop.io/browser/capabilities/windows/iframes/index.md). > ### @interopio/home-ui-react > > - Improved the Launchpad UI for handling secondary actions for search results when a main action hasn't been defined. Now, if a main action isn't available, the secondary actions will be accessible by clicking directly on the result row - a context menu with the available secondary actions will appear on click and the row won't contain a three-dot menu. > - Fixed an issue related to switching between views in the Launchpad. > ### @interopio/workspaces-ui-react > > - Added support for the `iframeSandbox` property of the `details` object in the app definition for configuring the `sandbox` attribute of the `