@amboss/design-system 4.9.4 → 4.11.0

package/build/esm/components/Internal/PanelHeader/PanelHeader.d.ts

@@ -22,7 +22,7 @@ export type PanelHeaderProps = {
     leftSlot?: React.ReactNode;
     /** Title block (icon + heading), rendered after `leftSlot`. */
     title?: PanelHeaderTitle;
-    /** Rendered at the header end, aligned to the top of multi-line content. */
+    /** Rendered at the header end, vertically centered. */
     rightSlot?: React.ReactNode;
     /** Fade the leading group out. `rightSlot` is left solid: it is the control
      *  that travels down onto the left bar's own and has to survive the dissolve. */

package/build/esm/components/Internal/PanelHeader/PanelHeader.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{TextClamped}from"../../../components/Typography/TextClamped/TextClamped";import{LEFT_BAR_BUTTON_INSET}from"../../Layout/-constants";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";let StyledHeaderSurface=styled("div",{target:"e13e79rk0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=styled("div",{target:"e13e79rk1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=styled("div",{target:"e13e79rk2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...getLeftPanelFadeStyles({theme,isFaded:isContentFaded})})),StyledSlotContent=styled("div",{target:"e13e79rk3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=styled("div",{target:"e13e79rk4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=styled("div",{target:"e13e79rk5",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});export function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return React.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},React.createElement(Box,{vSpace:LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:LEFT_BAR_BUTTON_INSET.hSpace},React.createElement(StyledHeaderRow,null,React.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},React.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&React.createElement(StyledSlotContent,null,leftSlot),hasTitle&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(TextClamped,{as:"span"},React.createElement(H5,{as:title.as,color:colorTitleItems},title.label)))))),React.createElement(StyledTrailingGroup,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))))}
+import React from"react";import styled from"@emotion/styled";import{TextClamped}from"../../../components/Typography/TextClamped/TextClamped";import{LEFT_BAR_BUTTON_INSET}from"../../Layout/-constants";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";let StyledHeaderSurface=styled("div",{target:"e1fxsx1e0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=styled("div",{target:"e1fxsx1e1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=styled("div",{target:"e1fxsx1e2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...getLeftPanelFadeStyles({theme,isFaded:isContentFaded})})),StyledSlotContent=styled("div",{target:"e1fxsx1e3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=styled("div",{target:"e1fxsx1e4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=styled("div",{target:"e1fxsx1e5",label:"StyledTrailingGroup"})({flexShrink:0});export function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return React.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},React.createElement(Box,{vSpace:LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:LEFT_BAR_BUTTON_INSET.hSpace},React.createElement(StyledHeaderRow,null,React.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},React.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&React.createElement(StyledSlotContent,null,leftSlot),hasTitle&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(TextClamped,{as:"span"},React.createElement(H5,{as:title.as,color:colorTitleItems},title.label)))))),React.createElement(StyledTrailingGroup,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))))}

package/build/esm/components/Internal/Sandwich/useSandwichContext.d.ts

@@ -16,6 +16,6 @@ export type SandwichContextValue = SandwichEdges & {
     /** Static host below the scroll body - `Sandwich.Footer` portals into it. */
     footerSlotNode: HTMLElement | null;
 };
-export declare const SandwichProvider: React.Provider<SandwichContextValue | null>;
+export declare const SandwichProvider: import("react").Provider<SandwichContextValue | null>;
 /** Read the Sandwich context, or throw if used outside `<Sandwich>`. */
 export declare function useSandwichContext(): SandwichContextValue;

package/build/esm/components/Layout/-constants.d.ts

@@ -82,6 +82,16 @@ export declare const RIGHT_PANEL_BOTTOM_BAR_INSET: string;
 export declare const PANEL_WIDTH_VAR: {
     readonly leftPanel: "--ds-layout-leftPanel-width";
     readonly content: "--ds-layout-content-width";
+    readonly splitview: "--ds-layout-splitview-width";
     readonly rightPanel: "--ds-layout-rightPanel-width";
 };
+/** Live start of each column relative to the Layout root. */
+export declare const PANEL_START_VAR: {
+    readonly leftPanel: "--ds-layout-leftPanel-start";
+    readonly content: "--ds-layout-content-start";
+    readonly splitview: "--ds-layout-splitview-start";
+    readonly rightPanel: "--ds-layout-rightPanel-start";
+};
+/** Set once column geometry is available to align the bottom bar. */
+export declare const LAYOUT_REGIONS_READY_VAR: "--ds-layout-regions-ready";
 export {};

package/build/esm/components/Layout/-constants.js

@@ -1 +1 @@
-import{LAYOUT_VARS}from"../../web-tokens/layout-vars";export const Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"};export const SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel];export const PANELS=[Slot.content,Slot.splitview];export const PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel];export const DEFAULT_LEFT_PANEL_VARIANT="sidebar";export const LEFT_BAR_BUTTON_INSET={hSpace:"s",vSpace:"xs"};export const TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content);export const SUBNAV_OFFSET_VAR=LAYOUT_VARS.subnavOffset;export const SPLIT_MAX_WIDTH_VAR=LAYOUT_VARS.splitMaxWidth;export const BOTTOM_BAR_HEIGHT_VAR=LAYOUT_VARS.bottomBarHeight;export const RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=LAYOUT_VARS.rightPanelBottomBarHeight;export const PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`;export const RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`;export const PANEL_WIDTH_VAR={leftPanel:LAYOUT_VARS.leftPanelWidth,content:LAYOUT_VARS.contentWidth,rightPanel:LAYOUT_VARS.rightPanelWidth};
+import{LAYOUT_VARS}from"../../web-tokens/layout-vars";export const Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"};export const SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel];export const PANELS=[Slot.content,Slot.splitview];export const PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel];export const DEFAULT_LEFT_PANEL_VARIANT="sidebar";export const LEFT_BAR_BUTTON_INSET={hSpace:"s",vSpace:"xs"};export const TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content);export const SUBNAV_OFFSET_VAR=LAYOUT_VARS.subnavOffset;export const SPLIT_MAX_WIDTH_VAR=LAYOUT_VARS.splitMaxWidth;export const BOTTOM_BAR_HEIGHT_VAR=LAYOUT_VARS.bottomBarHeight;export const RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=LAYOUT_VARS.rightPanelBottomBarHeight;export const PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`;export const RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`;export const PANEL_WIDTH_VAR={leftPanel:LAYOUT_VARS.leftPanelWidth,content:LAYOUT_VARS.contentWidth,splitview:LAYOUT_VARS.splitviewWidth,rightPanel:LAYOUT_VARS.rightPanelWidth};export const PANEL_START_VAR={leftPanel:LAYOUT_VARS.leftPanelStart,content:LAYOUT_VARS.contentStart,splitview:LAYOUT_VARS.splitviewStart,rightPanel:LAYOUT_VARS.rightPanelStart};export const LAYOUT_REGIONS_READY_VAR=LAYOUT_VARS.regionsReady;

package/build/esm/components/Layout/-types.d.ts

@@ -1,4 +1,5 @@
 import type React from "react";
+import type { ConditionalAccessibleName } from "../../types/a11y";
 import type { PanelKey, SidePanelKey, SlotKey } from "./-constants";
 import type { PanelHeaderTitle } from "../Internal/PanelHeader/PanelHeader";
 import type { SandwichSeparator } from "../Internal/Sandwich/-types";
@@ -69,10 +70,21 @@ export type RightPanelState = SidePanelStateBase & {
 };
 /** Either side panel, for code that handles both. */
 export type SidePanelState = LeftPanelState | RightPanelState;
+export type RegionPresentation = "column" | "overlay" | "hidden";
+export type PanelAnimation = Readonly<{
+    property: "flex-grow";
+    /** Applied transition duration in milliseconds. */
+    duration: number;
+    easing: string;
+}>;
 /** Actions every slot handle exposes, whatever its state shape. No `resize`:
  *  sizes are declarative (`defaultSize` on the panel, then drag), and the
  *  content/split pair is CSS-split, so an imperative size wouldn't hold. */
 export type PanelHandleActions = {
+    /** Whether the region occupies a footer-aligned column, an overlay, or neither. */
+    readonly presentation: RegionPresentation;
+    /** Parameters of the width transition currently applied by Layout. */
+    readonly animation: PanelAnimation | null;
     /** Whether the slot is currently shown. */
     isVisible: boolean;
     /** Show the slot. */
@@ -265,18 +277,15 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Accessible name; when set, the panel renders as a `region` landmark. */
     "aria-label"?: string;
     collapsible?: boolean;
-    /** Number = pixels, unitless string = percent (e.g. `"30%"`).
-     *
-     *  Either unit sets the column's starting width only: a docked side panel
-     *  then keeps that width when the window resizes, and `Layout.Content` grows
-     *  and shrinks around it. Drag-resizing is a separate story - see
-     *  `resizable`. */
+    /** Number or `"320px"` = pixels; `"30%"` or `"30"` = percentage.
+     *  Pixel sizes keep their width when the container resizes. Percentage sizes
+     *  follow the container, subject to the panel's min/max constraints.
+     *  Independent of whether the user may resize the panel. */
     defaultSize?: Size;
-    /** Desktop only: allow drag-resizing the panel's column. Overrides the
-     *  provider config's `resizable`. When `false`, the column is fixed at
-     *  `defaultSize` - neighbours can't resize it either, though they stay
-     *  resizable against each other. Showing and hiding the panel still works. No
-     *  effect on the mobile drawer/sheet. */
+    /** Desktop only: allow the user to resize the column by pointer or keyboard.
+     *  Overrides the provider config's `resizable`. When `false`, dragging a
+     *  neighbour cannot resize this panel either. Percentage widths still follow
+     *  the container; showing and hiding still works. No effect on mobile. */
     resizable?: boolean;
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
@@ -310,6 +319,9 @@ export type ContentProps = {
  * (default: the `xxl` breakpoint) and centred once past it.
  */
 export type SplitProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary.
+     *  TODO: Move background ownership to the client-rendered content. */
+    background?: "primary" | "transparent";
     /** Panel content in source order. `<Layout.SplitHeader />` /
      *  `<Layout.SplitFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -321,6 +333,8 @@ export type SplitProps = ForwardedScrollProps & {
 };
 /** Props of the internal mobile presentation of `Layout.Split`. */
 export type MobileSplitViewProps = ForwardedScrollProps & {
+    /** Surface forwarded from Layout.Split. */
+    background?: SplitProps["background"];
     children: React.ReactNode;
     /** Accessible name; when set, the view renders as a `region` landmark. */
     "aria-label"?: string;
@@ -452,6 +466,8 @@ export type SplitHeaderProps = PanelSlotHeaderProps & {
 };
 export type SplitFooterProps = PanelSlotFooterProps;
 export type PanelContainerProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary. */
+    background?: SplitProps["background"];
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
@@ -481,3 +497,11 @@ export type RightPanelProps = SidePanelProps & {
      *  floating panel isn't part of the resizable row. */
     collapsible?: boolean;
 };
+export type LayoutBottomBarProps = ConditionalAccessibleName & {
+    /** Layout.BottomBarItem declarations for the page's actions. */
+    children: React.ReactNode;
+    /** Background of each section; gaps stay transparent. Defaults to transparent. */
+    background?: "primary" | "secondary" | "transparent";
+    /** Identifier applied to the action group. */
+    "data-e2e-test-id"?: string;
+};

package/build/esm/components/Layout/BottomBar/BottomBarItem/LayoutBottomBarItem.d.ts

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from "react";
+import type { SlotKey } from "../../-types";
+export type LayoutBottomBarFallback = "hide" | "remaining" | "full";
+export type LayoutBottomBarItemProps = {
+    /** Layout region whose column the item follows. */
+    region: SlotKey;
+    /** Bounds for column actions. Defaults to panel. Available lets content and
+     *  split actions occupy their outer margins up to the side panels, keeping gaps.
+     *  The child controls whether it fills these bounds; fallback is unchanged. */
+    boundary?: "panel" | "available";
+    /** Placement when the region has no column. Defaults to hiding the item. */
+    fallback?: LayoutBottomBarFallback;
+    /** Actions supplied and styled by the consumer. */
+    children: ReactNode;
+    /** Identifier applied to the item's action container. */
+    "data-e2e-test-id"?: string;
+};
+export declare const LayoutBottomBarItem: FC<LayoutBottomBarItemProps>;

package/build/esm/components/Layout/BottomBar/BottomBarItem/LayoutBottomBarItem.js

@@ -0,0 +1 @@
+export const LayoutBottomBarItem=()=>null;

package/build/esm/components/Layout/BottomBar/LayoutBottomBar.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from "react";
+import type { LayoutBottomBarProps } from "../-types";
+export declare function LayoutBottomBar({ children, background, "data-e2e-test-id": dataE2eTestId, ...accessibleName }: LayoutBottomBarProps): ReactElement | null;

package/build/esm/components/Layout/BottomBar/LayoutBottomBar.js

@@ -0,0 +1 @@
+import React,{useLayoutEffect}from"react";import{useTheme}from"@emotion/react";import{LayoutPortal}from"../LayoutPortal";import{useLayoutVar}from"../LayoutCssVars";import{BOTTOM_BAR_HEIGHT_VAR,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}from"../-constants";import{useLayout}from"../useLayout";import{getBottomBarLayout}from"./getBottomBarLayout";import{StyledLayoutBottomBar}from"./StyledLayoutBottomBar";import{StyledLayoutBottomBarSection}from"./StyledLayoutBottomBarSection";let useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=useTheme().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=useLayoutVar(BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=useLayoutVar(RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);useLayoutEffect(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};export function LayoutBottomBar({children,background="transparent","data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=useLayout(),{sections,cells,rowCount,hasRightPanel}=getBottomBarLayout({children,layout:{leftPanel,content,splitview,rightPanel}});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?React.createElement(LayoutPortal,null,React.createElement(StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasFullWidthSection:sections.some(({placement})=>"full"===placement),"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>React.createElement(StyledLayoutBottomBarSection,{key:section.region,"data-ds-id":"LayoutBottomBarSection",background:background,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement,hasPanelDivider:"leftPanel"===section.region},section.children)))):null}

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBar.d.ts

@@ -0,0 +1,11 @@
+import type { BottomBarCell } from "./getBottomBarLayout";
+type StyledLayoutBottomBarProps = {
+    hasRightPanel: boolean;
+    hasFullWidthSection: boolean;
+    cells: BottomBarCell[];
+};
+export declare const StyledLayoutBottomBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledLayoutBottomBarProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBar.js

@@ -0,0 +1 @@
+import styled from"@emotion/styled";import{LAYOUT_REGIONS_READY_VAR,PAGE_BOTTOM_BAR_INSET,PANEL_WIDTH_VAR,PANEL_START_VAR}from"../-constants";let getRegionStart=region=>`var(${PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${PANEL_WIDTH_VAR[region]}, 0px)`,getPanelBounds=region=>({start:getRegionStart(region),end:`calc(${getRegionStart(region)} + ${getRegionWidth(region)})`}),getBottomBarBounds=({cells,contentAreaEnd})=>{let bounds={leftPanel:getPanelBounds("leftPanel"),content:getPanelBounds("content"),splitview:getPanelBounds("splitview"),rightPanel:getPanelBounds("rightPanel")};return cells.forEach(cell=>{"section"===cell.kind&&"column"===cell.section.placement&&"available"===cell.section.boundary&&("content"===cell.section.region&&(bounds.content.start=`min(${bounds.content.start}, ${bounds.leftPanel.end})`),"splitview"===cell.section.region&&(bounds.splitview.end=`max(${bounds.splitview.end}, ${contentAreaEnd})`))}),bounds},getBottomBarCellWidth=(cell,bounds)=>{switch(cell.kind){case"leading-gap":return bounds[cell.region].start;case"trailing-gap":return`max(0px, calc(100% - ${bounds[cell.region].end}))`;case"column-gap":return`max(0px, calc(${bounds[cell.region].start} - ${bounds[cell.previousRegion].end}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=`max(0px, calc(${bounds[region].end} - ${bounds[region].start}))`;return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}};export const StyledLayoutBottomBar=styled("div",{target:"eo8tbnx0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,hasFullWidthSection,cells})=>{let rightPanelInset=`calc(${getRegionWidth("rightPanel")} + min(${getRegionWidth("rightPanel")}, ${theme.variables.size.spacing.xxs}))`,bounds=getBottomBarBounds({cells,contentAreaEnd:hasRightPanel?`calc(100% - ${rightPanelInset})`:"100%"}),sectionColumns=cells.flatMap((cell,index)=>"section"===cell.kind?[index+1]:[]),shadowColumns=hasFullWidthSection?"1 / -1":`${sectionColumns[0]} / ${sectionColumns[sectionColumns.length-1]+1}`;return{display:"grid",gridTemplateColumns:cells.map(cell=>getBottomBarCellWidth(cell,bounds)).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxSizing:"border-box",height:PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:rightPanelInset,zIndex:theme.variables.zIndex.tooltip,"&::before":{content:'""',position:"absolute",inset:0,gridColumn:shadowColumns,boxShadow:theme.values.elevation[2],pointerEvents:"none"}}});

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.d.ts

@@ -0,0 +1,13 @@
+import type { LayoutBottomBarProps } from "../-types";
+type StyledLayoutBottomBarSectionProps = {
+    background: NonNullable<LayoutBottomBarProps["background"]>;
+    columnIndex?: number;
+    rowIndex: number;
+    fullWidth: boolean;
+    hasPanelDivider: boolean;
+};
+export declare const StyledLayoutBottomBarSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledLayoutBottomBarSectionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.js

@@ -0,0 +1 @@
+import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";export const StyledLayoutBottomBarSection=styled("div",{shouldForwardProp:prop=>"background"!==prop&&isPropValid(prop),target:"e1dq38by0",label:"StyledLayoutBottomBarSection"})(({theme,background,columnIndex,rowIndex,fullWidth,hasPanelDivider})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",backgroundColor:"transparent"===background?"transparent":theme.values.color.background[background].default,display:"flex",minWidth:0,whiteSpace:"nowrap",...hasPanelDivider&&{position:"relative","&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default,pointerEvents:"none"}}}));

package/build/esm/components/Layout/BottomBar/getBottomBarLayout.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import type { LayoutValue, SlotKey } from "../-types";
+import { type LayoutBottomBarItemProps, type LayoutBottomBarFallback } from "./BottomBarItem/LayoutBottomBarItem";
+type BottomBarLayout = Pick<LayoutValue, SlotKey>;
+type BottomBarItemMode = "column" | LayoutBottomBarFallback;
+type VisibleSection = LayoutBottomBarItemProps & {
+    placement: Exclude<BottomBarItemMode, "hide">;
+    fallback: LayoutBottomBarFallback;
+};
+type SharedSection = VisibleSection & {
+    placement: "column" | "remaining";
+};
+type ArrangedSection = VisibleSection & {
+    columnIndex?: number;
+    rowIndex: number;
+};
+export type BottomBarCell = {
+    kind: "section";
+    section: SharedSection;
+    flexible: boolean;
+} | {
+    kind: "leading-gap" | "trailing-gap";
+    region: SlotKey;
+} | {
+    kind: "column-gap";
+    region: SlotKey;
+    previousRegion: SlotKey;
+} | {
+    kind: "flexible-gap";
+};
+type BottomBarArrangement = {
+    cells: BottomBarCell[];
+    sections: ArrangedSection[];
+    rowCount: number;
+    hasRightPanel: boolean;
+};
+type BottomBarLayoutOptions = {
+    children: ReactNode;
+    layout: BottomBarLayout;
+};
+export declare const getBottomBarLayout: ({ children, layout, }: BottomBarLayoutOptions) => BottomBarArrangement;
+export {};

package/build/esm/components/Layout/BottomBar/getBottomBarLayout.js

@@ -0,0 +1 @@
+import{Children,isValidElement}from"react";import{PANEL_ORDER}from"../-constants";import{LayoutBottomBarItem}from"./BottomBarItem/LayoutBottomBarItem";let getBottomBarItemMode=({region,fallback,layout})=>{let handle=layout[region];return"column"===handle.presentation?"column":("leftPanel"!==region||"sidebar"!==layout.leftPanel.state.variant)&&("rightPanel"!==region||"sidebar"!==layout.rightPanel.state.variant)||handle.isVisible||null===handle.animation?fallback:"column"},getVisibleSections=(children,layout)=>Children.toArray(children).flatMap(child=>{if(!isValidElement(child)||child.type!==LayoutBottomBarItem||null==child.props.children||!1===child.props.children)return[];let{region,fallback="hide"}=child.props,placement=getBottomBarItemMode({region,fallback,layout});return"hide"===placement?[]:[{...child.props,placement,fallback}]}),shouldPreserveSplitColumnWidth=sections=>{let hasLeftFallback=sections.some(({region,fallback})=>"leftPanel"===region&&"remaining"===fallback),hasContentColumn=sections.some(({region,placement})=>"content"===region&&"column"===placement),hasSplitColumn=sections.some(({region,placement})=>"splitview"===region&&"column"===placement),hasRightFallback=sections.some(({region,fallback})=>"rightPanel"===region&&"remaining"===fallback);return hasLeftFallback&&hasContentColumn&&hasSplitColumn&&!hasRightFallback},getSharedRowCells=sections=>{if(!sections.length)return[];let firstSection=sections[0],lastSection=sections[sections.length-1],hasRemainingActions=sections.some(({fallback})=>"remaining"===fallback),preserveSplitColumn=shouldPreserveSplitColumnWidth(sections),flexibleColumns={leftPanel:!1,content:hasRemainingActions,splitview:hasRemainingActions&&!preserveSplitColumn,rightPanel:!1},hasFlexibleColumn=sections.some(({region,placement})=>"column"===placement&&flexibleColumns[region]),needsFlexibleGap=hasRemainingActions&&!hasFlexibleColumn,rightActions=sections.find(({region})=>"rightPanel"===region);return[..."column"===firstSection.placement?[{kind:"leading-gap",region:firstSection.region}]:[],...sections.flatMap((section,index)=>{let previousSection=sections[index-1];return[..."column"===section.placement&&previousSection?.placement==="column"?[{kind:"column-gap",region:section.region,previousRegion:previousSection.region}]:[],...needsFlexibleGap&&section===rightActions?[{kind:"flexible-gap"}]:[],{kind:"section",section,flexible:flexibleColumns[section.region]}]}),...!hasRemainingActions||preserveSplitColumn?[{kind:"trailing-gap",region:lastSection.region}]:[],...needsFlexibleGap&&!rightActions?[{kind:"flexible-gap"}]:[]]};export const getBottomBarLayout=({children,layout})=>{let sections=getVisibleSections(children,layout),sharedSections=PANEL_ORDER.flatMap(region=>sections.filter(section=>section.region===region&&"full"!==section.placement)),fullWidthSections=sections.filter(({placement})=>"full"===placement),sharedRowCount=+!!sharedSections.length,cells=getSharedRowCells(sharedSections);return{cells,sections:[...cells.flatMap((cell,column)=>"section"===cell.kind?[{...cell.section,columnIndex:column,rowIndex:0}]:[]),...fullWidthSections.map((section,row)=>({...section,rowIndex:sharedRowCount+row}))],rowCount:sharedRowCount+fullWidthSections.length,hasRightPanel:sections.some(({region})=>"rightPanel"===region)}};

package/build/esm/components/Layout/Layout.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 import { LayoutProvider } from "./LayoutProvider";
+import { LayoutBottomBar } from "./BottomBar/LayoutBottomBar";
+import { LayoutBottomBarItem } from "./BottomBar/BottomBarItem/LayoutBottomBarItem";
 import { Content } from "./Content/Content";
 import { RightPanel } from "./RightPanel/RightPanel";
 import { RightPanelHeader } from "./RightPanel/RightPanelHeader";
@@ -20,6 +22,8 @@ export declare const PANEL_HOST_DS_ID = "PanelHost";
 declare function LayoutBase({ children, persistenceKey, storage, rules, additionalRulesData, }: LayoutProps): React.ReactElement;
 type LayoutComponent = typeof LayoutBase & {
     Provider: typeof LayoutProvider;
+    BottomBar: typeof LayoutBottomBar;
+    BottomBarItem: typeof LayoutBottomBarItem;
     LeftPanel: typeof LeftPanel;
     LeftNavBar: typeof LeftNavBar;
     LeftNavBarFooter: typeof LeftNavBarFooter;

package/build/esm/components/Layout/Layout.js

@@ -1 +1 @@
-import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"e1izvg960",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1izvg961",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1izvg962",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1izvg963",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e1izvg964",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1izvg965",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===Slot.leftPanel&&hasOffcanvasLeftBar),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&declared[id]?.resizable!==!1&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;
+import React,{useCallback,useLayoutEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/BottomBarItem/LayoutBottomBarItem";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=({slotHosts,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content||slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e101g12t0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e101g12t1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e101g12t2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e101g12t3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e101g12t4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e101g12t5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,gapBefore:slot===Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&declared[id]?.resizable!==!1&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;

package/build/esm/components/Layout/LayoutCssVars.d.ts

@@ -8,7 +8,7 @@ export type LayoutVarHandle = {
 };
 /**
  * Register one layout CSS var; returns a stable imperative handle. The var is
- * removed on unmount, so it only exists while its producer is mounted. Call
+ * removed on unmount only if this producer still owns the latest write. Call
  * `.set()` from wherever the value is known — an effect (state-driven vars like
  * the subnav offset) or a ResizeObserver (measured vars) — so updates publish
  * straight to the single `<LayoutCssVars>` sink and never re-render the producer.

package/build/esm/components/Layout/LayoutCssVars.js

@@ -1 +1 @@
-import React,{createContext,useContext,useEffect,useMemo,useSyncExternalStore}from"react";import{Global}from"@emotion/react";let LayoutCssVarStoreContext=createContext(null);export const LayoutCssVarStoreProvider=LayoutCssVarStoreContext.Provider;let EMPTY_VARS={},NOOP_SUBSCRIBE=()=>()=>{};export const useLayoutVar=name=>{let store=useContext(LayoutCssVarStoreContext);return useEffect(()=>()=>store?.remove(name),[store,name]),useMemo(()=>({set:value=>""===value?store?.remove(name):store?.set(name,value),remove:()=>store?.remove(name)}),[store,name])};export function LayoutCssVars(){let store=useContext(LayoutCssVarStoreContext),vars=useSyncExternalStore(store?.subscribe??NOOP_SUBSCRIBE,store?store.getSnapshot:()=>EMPTY_VARS,()=>EMPTY_VARS);return React.createElement(Global,{styles:[{":root":vars}]})}
+import React,{createContext,useContext,useEffect,useMemo,useSyncExternalStore}from"react";import{Global}from"@emotion/react";let LayoutCssVarStoreContext=createContext(null);export const LayoutCssVarStoreProvider=LayoutCssVarStoreContext.Provider;let EMPTY_VARS={},NOOP_SUBSCRIBE=()=>()=>{};export const useLayoutVar=name=>{let store=useContext(LayoutCssVarStoreContext),handle=useMemo(()=>{let owner=Symbol(name);return{set:value=>""===value?store?.remove(name,owner):store?.set({name,value,owner}),remove:()=>store?.remove(name,owner)}},[store,name]);return useEffect(()=>handle.remove,[handle]),handle};export function LayoutCssVars(){let store=useContext(LayoutCssVarStoreContext),vars=useSyncExternalStore(store?.subscribe??NOOP_SUBSCRIBE,store?store.getSnapshot:()=>EMPTY_VARS,()=>EMPTY_VARS);return React.createElement(Global,{styles:[{":root":vars}]})}

package/build/esm/components/Layout/LayoutPortal.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+type LayoutPortalProps = {
+    /** Content rendered at the nearest Layout root. */
+    children: ReactNode;
+};
+export declare function LayoutPortal({ children }: LayoutPortalProps): ReactNode;
+export {};

package/build/esm/components/Layout/LayoutPortal.js

@@ -0,0 +1 @@
+import{useLayoutPortal}from"./registry";export function LayoutPortal({children}){return useLayoutPortal("root",children)}

package/build/esm/components/Layout/LayoutProvider.js

@@ -1 +1 @@
-import React,{useMemo,useRef}from"react";import{LayoutPersistenceProvider,LayoutStoreProvider}from"./context";import{LayoutCssVars,LayoutCssVarStoreProvider}from"./LayoutCssVars";import{createLayoutCssVarStore}from"./cssVarStore";import{createInitialState}from"./reducer";import{createLayoutStore}from"./store";export function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=useRef(null);null===storeRef.current&&(storeRef.current=store??createLayoutStore(createInitialState(config)));let cssVarStoreRef=useRef(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=createLayoutCssVarStore());let persistence=useMemo(()=>({persistenceKey,storage}),[persistenceKey,storage]);return React.createElement(LayoutStoreProvider,{value:storeRef.current},React.createElement(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),children)))}
+import React,{useMemo,useRef}from"react";import{LayoutPersistenceProvider,LayoutStoreProvider}from"./context";import{LayoutCssVars,LayoutCssVarStoreProvider}from"./LayoutCssVars";import{createLayoutCssVarStore}from"./cssVarStore";import{createPanelAnimationsStore,PanelAnimationsProvider}from"./usePanelAnimations";import{createInitialState}from"./reducer";import{createLayoutStore}from"./store";export function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=useRef(null);null===storeRef.current&&(storeRef.current=store??createLayoutStore(createInitialState(config)));let cssVarStoreRef=useRef(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=createLayoutCssVarStore());let animations=useMemo(createPanelAnimationsStore,[]),persistence=useMemo(()=>({persistenceKey,storage}),[persistenceKey,storage]);return React.createElement(LayoutStoreProvider,{value:storeRef.current},React.createElement(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),React.createElement(PanelAnimationsProvider,{value:animations},children))))}

package/build/esm/components/Layout/LeftPanel/LeftPanelDrawer.d.ts

@@ -8,9 +8,8 @@ export type LeftPanelDrawerProps = ForwardedScrollProps & {
 };
 /**
  * Mobile left panel. Renders its content as a modal {@link Drawer} pinned to the
- * left edge instead of an in-flow column - so it does NOT declare a resizable
- * slot. Visibility is the shared `leftPanel` layout state, so `useLayout()`
- * drives it identically to the docked desktop panel; outside-click / Escape
- * routes back through `hide`.
+ * left edge. Registers the region so `useLayout()` reports an open drawer as
+ * `overlay`; Layout excludes it from the resizable row. Visibility is the shared
+ * `leftPanel` state; outside-click / Escape routes back through `hide`.
  */
 export declare const LeftPanelDrawer: React.FC<LeftPanelDrawerProps>;

package/build/esm/components/Layout/LeftPanel/LeftPanelDrawer.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";import{useLeftPanelId}from"../useLeftPanelId";let StyledLeftPanelBody=styled("div",{target:"e1gnrffs0",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId();return React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};
+import React from"react";import styled from"@emotion/styled";import{Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";import{useLeftPanelId}from"../useLeftPanelId";let StyledLeftPanelBody=styled("div",{target:"e1q5nxh70",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId();return useDeclarePanel(Slot.leftPanel,{}),React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/esm/components/Layout/LeftPanel/useLeftBarContext.d.ts

@@ -6,6 +6,6 @@ export type LeftBarSlot = {
      *  content alone. */
     slotNode: HTMLElement | null;
 };
-export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
+export declare const LeftBarProvider: import("react").Provider<LeftBarSlot>;
 /** The left bar slot behind the left panel, if this presentation has one. */
 export declare const useLeftBarContext: () => LeftBarSlot;

package/build/esm/components/Layout/LeftPanel/useLeftPanelCollapseContext.d.ts

@@ -6,6 +6,6 @@ export type LeftPanelCollapseState = {
      *  at the column's edge so nothing inside reflows on the way down. */
     fixedContentWidth?: string;
 };
-export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
+export declare const LeftPanelCollapseProvider: import("react").Provider<LeftPanelCollapseState>;
 /** How the left panel's parts have to behave while its column narrows. */
 export declare const useLeftPanelCollapseContext: () => LeftPanelCollapseState;

package/build/esm/components/Layout/PanelContainer.d.ts

@@ -6,4 +6,4 @@ import type { PanelContainerProps } from "./-types";
  * (`Layout.LeftPanelHeader` etc.) render anywhere among `children` and stick
  * to the edges; everything else scrolls.
  */
-export declare function PanelContainer({ children, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;
+export declare function PanelContainer({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;

package/build/esm/components/Layout/PanelContainer.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../Internal/Sandwich/Sandwich";import{Container}from"../Container/Container";let CustomContainer=styled(Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop,target:"e1ypgo8f0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight})=>({height:"100%",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));export function PanelContainer({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return React.createElement(CustomContainer,{elevation:0,squareCorners:!0,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}
+import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../Internal/Sandwich/Sandwich";import{Container}from"../Container/Container";let CustomContainer=styled(Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop&&"background"!==prop,target:"eetiugt0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));export function PanelContainer({children,background="primary","aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return React.createElement(CustomContainer,{elevation:0,squareCorners:!0,background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}

package/build/esm/components/Layout/RightPanel/RightPanel.js

@@ -1 +1 @@
-import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize=378,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),{minWidth,maxWidth}=useTheme().variables.layout.rightPanel;useDeclarePanel(Slot.rightPanel,{defaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:!0,variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};
+import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),{width,minWidth,maxWidth}=useTheme().variables.layout.rightPanel,resolvedDefaultSize=defaultSize??width.open;useDeclarePanel(Slot.rightPanel,{defaultSize:resolvedDefaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:"number"==typeof resolvedDefaultSize||resolvedDefaultSize.trim().endsWith("px"),variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};

package/build/esm/components/Layout/RightPanel/RightPanelDocked.d.ts

@@ -3,7 +3,7 @@ import type { ForwardedScrollProps, RightPanelVariant } from "../-types";
 export type RightPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
-    /** Docked column vs. minimized floating window - only the border differs here. */
+    /** Docked column vs. floating window, without page insets or the left border. */
     variant: RightPanelVariant;
     "aria-label": string;
 };

package/build/esm/components/Layout/RightPanel/RightPanelDocked.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{RIGHT_PANEL_BOTTOM_BAR_INSET,Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"e1usejnr0",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:RIGHT_PANEL_BOTTOM_BAR_INSET,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);
+import React from"react";import styled from"@emotion/styled";import{RIGHT_PANEL_BOTTOM_BAR_INSET,Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"e1qlsvva0",label:"StyledRightPanelSlot"})(({theme,isFloating})=>({position:"absolute",left:0,right:0,bottom:isFloating?0:RIGHT_PANEL_BOTTOM_BAR_INSET,top:isFloating?0:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:isFloating?"none":`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,{isFloating:"float"===variant},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);

package/build/esm/components/Layout/Split/MobileSplitView/MobileSplitView.js

@@ -1 +1 @@
-import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();if(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=splitViewOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};
+import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();if(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=splitViewOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};

package/build/esm/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.d.ts

@@ -18,5 +18,5 @@ export declare const StyledMobileSplitSlideLayer: import("@emotion/styled").Styl
 } & {
     offset: MobileSplitViewOffset;
     layer: MobileSplitLayer;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/esm/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.js

@@ -1 +1 @@
-import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"et3u54n0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});
+import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e99d5g40",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});

package/build/esm/components/Layout/Split/MobileSplitView/useMobileSplitStack.d.ts

@@ -16,5 +16,5 @@ export type MobileSplitStackValue = {
  * front isn't stored here - it derives from the `splitview` slot's visibility
  * (see {@link useMobileSplitView}).
  */
-export declare const MobileSplitStackContext: React.Context<MobileSplitStackValue | null>;
+export declare const MobileSplitStackContext: import("react").Context<MobileSplitStackValue | null>;
 export declare const useMobileSplitStack: () => MobileSplitStackValue;

package/build/esm/components/Layout/Split/Split.js

@@ -1 +1 @@
-import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,"aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=useBreakpoints(),{isVisible}=useLayout()[Slot.splitview];return useVisibleChange(isVisible,onVisibleChange),isMobile?React.createElement(MobileSplitView,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):React.createElement(SplitDocked,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};
+import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,background="primary","aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=useBreakpoints(),{isVisible}=useLayout()[Slot.splitview];return useVisibleChange(isVisible,onVisibleChange),isMobile?React.createElement(MobileSplitView,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):React.createElement(SplitDocked,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};

package/build/esm/components/Layout/Split/SplitDocked.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};

package/build/esm/components/Layout/context.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutState, LayoutStorage, LayoutStore } from "./-types";
-export declare const LayoutStoreProvider: React.Provider<LayoutStore | null>;
+export declare const LayoutStoreProvider: import("react").Provider<LayoutStore | null>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
 /**
@@ -11,7 +11,7 @@ export type LayoutPersistence = {
     persistenceKey?: string;
     storage?: LayoutStorage;
 };
-export declare const LayoutPersistenceProvider: React.Provider<LayoutPersistence>;
+export declare const LayoutPersistenceProvider: import("react").Provider<LayoutPersistence>;
 /** Persistence config from the nearest `Layout.Provider` (empty if none). */
 export declare function useLayoutPersistence(): LayoutPersistence;
 /**

package/build/esm/components/Layout/cssVarStore.d.ts

@@ -1,3 +1,8 @@
+type LayoutCssVarWrite = {
+    name: string;
+    value: string;
+    owner: symbol;
+};
 /**
  * Tiny pub/sub registry for the layout's CSS custom properties. Producers
  * publish a value by name (the component that owns the *why* — e.g. the NavBar
@@ -6,12 +11,14 @@
  * via the same `useSyncExternalStore` pattern.
  *
  * One name = one producer. The registry is keyed by name, so a second writer to
- * the same name last-wins; don't share a name across unrelated producers.
+ * the same name last-wins. Only that writer may remove it, so an old instance's
+ * delayed unmount cleanup cannot erase a replacement's value.
  */
 export type LayoutCssVarStore = {
     getSnapshot: () => Record<string, string>;
-    set: (name: string, value: string) => void;
-    remove: (name: string) => void;
+    set: (entry: LayoutCssVarWrite) => void;
+    remove: (name: string, owner: symbol) => void;
     subscribe: (listener: () => void) => () => void;
 };
 export declare function createLayoutCssVarStore(): LayoutCssVarStore;
+export {};

package/build/esm/components/Layout/cssVarStore.js

@@ -1 +1 @@
-export function createLayoutCssVarStore(){let vars={},listeners=new Set,notify=()=>listeners.forEach(listener=>listener());return{getSnapshot:()=>vars,set:(name,value)=>{vars[name]!==value&&(vars={...vars,[name]:value},notify())},remove:name=>{if(!(name in vars))return;let next={...vars};delete next[name],vars=next,notify()},subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)})}}
+export function createLayoutCssVarStore(){let vars={},owners=new Map,listeners=new Set,notify=()=>listeners.forEach(listener=>listener());return{getSnapshot:()=>vars,set:({name,value,owner})=>{owners.set(name,owner),vars[name]!==value&&(vars={...vars,[name]:value},notify())},remove:(name,owner)=>{if(owners.get(name)!==owner)return;owners.delete(name);let next={...vars};delete next[name],vars=next,notify()},subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)})}}