@amboss/design-system 4.6.3 → 4.6.6-canary.0

package/build/cjs/components/Content/ContentTable/ContentTable.js

@@ -1 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentTable",{enumerable:!0,get:function(){return ContentTable}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_ContentTableContext=require("./ContentTableContext"),StyledTableWrapper=(0,_styled.default)("div",{target:"eauslwy0",label:"StyledTableWrapper"})(({theme})=>({marginTop:theme.variables.size.spacing.m,marginBottom:theme.variables.size.spacing.m,overflow:"auto"})),StyledTable=(0,_styled.default)("table",{target:"eauslwy1",label:"StyledTable"})(({theme})=>({margin:0,width:"100%",borderLeft:`1px solid ${theme.values.color.divider.primary}`,borderTop:`1px solid ${theme.values.color.divider.primary}`,borderRadius:theme.variables.size.borderRadius.xs,borderSpacing:0,textAlign:"left","th, td":{borderBottom:`1px solid ${theme.values.color.divider.primary}`,borderRight:`1px solid ${theme.values.color.divider.primary}`,padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.xs}`},th:{backgroundColor:theme.values.color.background.secondary.default},"thead tr:first-of-type":{"th:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs},"th:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs}},"tbody tr:last-of-type":{"td:first-of-type":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs},"td:last-of-type":{borderBottomRightRadius:theme.variables.size.borderRadius.xs}},"tbody tr:hover td":{backgroundColor:theme.values.color.content.table.row.hover}}));function ContentTable({"data-e2e-test-id":dataE2eTestId,wrapperClassName,...rest}){return _react.default.createElement(_ContentTableContext.ContentTableContext.Provider,{value:_ContentTableContext.contentTableContextValue},_react.default.createElement(StyledTableWrapper,{className:wrapperClassName},_react.default.createElement(StyledTable,{...rest,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"ContentTable"})))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentTable",{enumerable:!0,get:function(){return ContentTable}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_ContentTableContext=require("./ContentTableContext"),StyledTableWrapper=(0,_styled.default)("div",{target:"eqi5lqf0",label:"StyledTableWrapper"})(({theme})=>({marginTop:theme.variables.size.spacing.m,marginBottom:theme.variables.size.spacing.m,overflow:"auto"})),StyledTable=(0,_styled.default)("table",{target:"eqi5lqf1",label:"StyledTable"})(({theme})=>({margin:0,width:"100%",borderLeft:`1px solid ${theme.values.color.content.table.cell.border.default}`,borderTop:`1px solid ${theme.values.color.content.table.cell.border.default}`,borderRadius:theme.variables.size.borderRadius.xs,borderSpacing:0,textAlign:"left","th, td":{borderBottom:`1px solid ${theme.values.color.content.table.cell.border.default}`,borderRight:`1px solid ${theme.values.color.content.table.cell.border.default}`,padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.xs}`},"thead th":{backgroundColor:theme.values.color.content.table.col.header.background.default},"tbody th, thead th[scope='row']":{backgroundColor:theme.values.color.content.table.row.header.background.default},"thead tr:first-of-type":{"th:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs},"th:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs}},"tbody tr:last-of-type":{"td:first-child, th:first-child":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs},"td:last-child, th:last-child":{borderBottomRightRadius:theme.variables.size.borderRadius.xs}},"tbody tr:hover":{"td, th":{backgroundImage:`linear-gradient(
+        ${theme.values.color.content.table.row.background.hover},
+        ${theme.values.color.content.table.row.background.hover}
+      )`}}}));function ContentTable({"data-e2e-test-id":dataE2eTestId,wrapperClassName,...rest}){return _react.default.createElement(_ContentTableContext.ContentTableContext.Provider,{value:_ContentTableContext.contentTableContextValue},_react.default.createElement(StyledTableWrapper,{className:wrapperClassName},_react.default.createElement(StyledTable,{...rest,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"ContentTable"})))}

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

@@ -19,6 +19,9 @@ export type PanelHeaderProps = {
     title?: PanelHeaderTitle;
     /** 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. */
+    isContentFaded?: boolean;
     "data-e2e-test-id"?: string;
 };
 /**
@@ -28,4 +31,4 @@ export type PanelHeaderProps = {
  * carries the semantics (heading, buttons). Place it inside `Sandwich.Header`
  * to get the sticky positioning and scroll separator.
  */
-export declare function PanelHeader({ leftSlot, title, rightSlot, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;
+export declare function PanelHeader({ leftSlot, title, rightSlot, isContentFaded, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label))))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_mixins=require("../../../shared/mixins"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header"),StyledHeaderSurface=(0,_styled.default)("div",{target:"erbiwc20",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"erbiwc21",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"erbiwc22",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledTrailingGroup=(0,_styled.default)("div",{target:"erbiwc23",label:"StyledTrailingGroup"})({flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label)))))),_react.default.createElement(StyledTrailingGroup,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))))}

package/build/cjs/components/Internal/Sandwich/-types.d.ts

@@ -7,6 +7,11 @@ export type SandwichProps = {
     onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Forwarded to the scroll container element (e.g. for scroll restoration). */
     scrollRef?: React.Ref<HTMLDivElement>;
+    /** Hides the scroll region's scrollbar and stops it scrolling sideways. For
+     *  frames too narrow to spare a scrollbar's width - which are the frames
+     *  holding content wider than themselves, clipped at the edge. The region
+     *  still scrolls vertically by wheel and keyboard. */
+    hideScrollbar?: boolean;
 };
 /**
  * Separator visibility:

package/build/cjs/components/Internal/Sandwich/Sandwich.d.ts

@@ -12,7 +12,7 @@ import { SandwichFooter } from "./SandwichFooter";
  * content is scrolled under them; edge state is shared through context (see
  * `useSandwichContext.tsx`).
  */
-declare function SandwichRoot({ children, scrollRef, onScroll, }: SandwichProps): React.ReactElement;
+declare function SandwichRoot({ children, scrollRef, onScroll, hideScrollbar, }: SandwichProps): React.ReactElement;
 /**
  * Compound export: `Sandwich` with `.Header` / `.Footer` attached.
  * Object.assign keeps the static sub-components typed on the root

package/build/cjs/components/Internal/Sandwich/Sandwich.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"ejnp4220",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"ejnp4221",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"ejnp4222",label:"StyledScrollBody"})({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative"}),StyledScrollContent=(0,_styled.default)("div",{target:"ejnp4223",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"e13bq2vk0",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"e13bq2vk1",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"e13bq2vk2",label:"StyledScrollBody"})(({hideScrollbar})=>({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative",...hideScrollbar&&{scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},overflowX:"hidden"}})),StyledScrollContent=(0,_styled.default)("div",{target:"e13bq2vk3",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll,hideScrollbar=!1}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,hideScrollbar:hideScrollbar,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});

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

@@ -15,7 +15,9 @@ import type { SandwichSeparator } from "../Internal/Sandwich/-types";
 export type Size = number | string;
 /**
  * - `sidebar` - in-flow resizable panel.
- * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED - not implemented yet.**
+ * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED on the right panel -
+ *   not implemented there yet.** Implemented for the left panel, which declares
+ *   it through {@link LeftPanelVariant}.
  *   Currently treated like `sidebar` (renders in-flow); the overlay
  *   implementation lands in a later commit.
  * - `float` - detached floating window pinned to the bottom-right viewport
@@ -29,11 +31,15 @@ export type Variant = "sidebar" | "offcanvas" | "float";
 export type RightPanelVariant = Variant;
 /**
  * - `sidebar` - in-flow resizable column.
- * - `drawer` - modal overlay pinned to the left edge. Out of the resizable row,
- *   so it costs no docked column - the mobile presentation, and what a rule
- *   switches to when the budget has no column left.
+ * - `drawer` - modal overlay pinned to the left edge, with a backdrop and a
+ *   focus trap. Out of the resizable row, so it costs no docked column - the
+ *   mobile presentation.
+ * - `offcanvas` - the same overlay without the dialog: no backdrop, no focus
+ *   trap, the page behind stays live. Also out of the row, so it is what a rule
+ *   switches to when the docked budget has no column left but the panel should
+ *   stay reachable rather than be hidden.
  */
-export type LeftPanelVariant = "sidebar" | "drawer";
+export type LeftPanelVariant = "sidebar" | "drawer" | "offcanvas";
 export type { PanelKey, SidePanelKey, SlotKey };
 /** Everything both side panels hold. `variant` is declared per slot below, so
  *  each panel's state only admits the variants it can actually render. */
@@ -141,12 +147,6 @@ export type LayoutPanelsMode = boolean | "mobile";
 export type LayoutConfig = {
     /** See {@link LayoutPanelsMode}. Default `false`. */
     enablePanels?: LayoutPanelsMode;
-    /** Slots whose markers may mount later, counted as declared for the
-     *  solo-vs-resizable decision - so a marker nested inside another panel
-     *  (which must mount after its ancestor) doesn't flip the mode and remount
-     *  everything once it appears. Renders nothing itself; `splitview` never
-     *  needs it, since it shares `content`'s column rather than a row slot. */
-    reservedSlots?: SlotKey[];
     leftPanel?: LeftPanelConfig;
     rightPanel?: RightPanelConfig;
     content?: PanelConfig;
@@ -251,7 +251,8 @@ export type LeftPanelHandle = PanelHandleActions & {
     state: LeftPanelState & {
         variant: LeftPanelVariant;
     };
-    /** Switch render variant: an in-flow column, or the modal drawer. */
+    /** Switch render variant: an in-flow column, the modal drawer, or the
+     *  non-modal offcanvas overlay. */
     setVariant: (variant: LeftPanelVariant) => void;
 };
 export type RightPanelHandle = PanelHandleActions & {
@@ -308,7 +309,28 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
 };
-export type LeftPanelProps = SidePanelProps & {
+export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize"> & {
+    /** Pixels. Unlike the other panels the left panel takes no percentage: with a
+     *  left bar its content is pinned to this width and clipped as the column narrows,
+     *  and a percentage would resolve against the narrowing column instead of the
+     *  width it opens to - so the content would reflow mid-slide, which is the one
+     *  thing the pin exists to prevent.
+     *
+     *  Sets the column's starting width only: the docked panel keeps that width
+     *  when the window resizes, and `Layout.Content` grows and shrinks around it.
+     *  Drag-resizing is a separate story - see `resizable`. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** Props forwarded to the panel's internal parts. Required: the left bar
+     *  always carries the button that opens the panel, and it is icon-only, so its
+     *  accessible name can only come from here. Give it the action - the panel's
+     *  own `aria-label` already names the region it opens. */
+    slotProps: {
+        toggleButton: {
+            "aria-label": string;
+        };
+    };
     /** Accessible name for the panel. Used to label the modal drawer it renders
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
@@ -385,6 +407,18 @@ export type PanelSlotFooterProps = {
 };
 export type LeftPanelHeaderProps = PanelSlotHeaderProps;
 export type LeftPanelFooterProps = PanelSlotFooterProps;
+/**
+ * Left bar contents for a `Layout.LeftPanel` whose left bar differs from its panel.
+ * Holds the button that opens the panel, plus the consumer's own navigation.
+ */
+export type LeftNavBarProps = {
+    /** Content in source order; `Layout.LeftNavBarFooter` sticks to the bottom,
+     *  everything else scrolls. Optional - a left bar that carries nothing but the
+     *  button that opens the panel is a left bar too. */
+    children?: React.ReactNode;
+    "data-e2e-test-id"?: string;
+};
+export type LeftNavBarFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the right panel header, after `leftSlot`. Visual only — the
  * panel's accessible name comes from `Layout.RightPanel`'s `aria-label`.
@@ -447,12 +481,17 @@ export type PanelContainerProps = ForwardedScrollProps & {
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
+    /** DOM id of the container, so a control outside the panel can reference it. */
+    id?: string;
     /** Accessible name; when set, the container renders as a `region` landmark. */
     "aria-label"?: string;
     /** Draws a separator border on the panel's left edge. */
     showBorderLeft?: boolean;
     /** Draws a separator border on the panel's right edge. */
     showBorderRight?: boolean;
+    /** Hides the scroll region's scrollbar - for panels too narrow to spare its
+     *  width. */
+    hideScrollbar?: boolean;
     "data-e2e-test-id"?: string;
 };
 export type RightPanelProps = SidePanelProps & {

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

@@ -7,6 +7,8 @@ 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";
@@ -19,6 +21,8 @@ declare function LayoutBase({ children, persistenceKey, storage, rules, addition
 type LayoutComponent = typeof LayoutBase & {
     Provider: typeof LayoutProvider;
     LeftPanel: typeof LeftPanel;
+    LeftNavBar: typeof LeftNavBar;
+    LeftNavBarFooter: typeof LeftNavBarFooter;
     LeftPanelHeader: typeof LeftPanelHeader;
     LeftPanelFooter: typeof LeftPanelFooter;
     RightPanel: typeof RightPanel;

package/build/cjs/components/Layout/Layout.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_useFloatablePortalTargets=require("./useFloatablePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.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=(0,_styled.default)("div",{target:"ec2opau0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"ec2opau1",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"ec2opau2",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"ec2opau3",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"ec2opau4",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.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=(0,_react.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=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.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}=(0,_useFloatablePortalTargets.useFloatablePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=(0,_context.useLayoutReservedSlots)(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.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??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.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=(0,_styled.default)("div",{target:"e9afqos0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e9afqos1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e9afqos2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e9afqos3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e9afqos4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e9afqos5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===_constants.Slot.leftPanel&&hasOffcanvasLeftBar),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.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=(0,_react.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=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.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}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.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??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&dispatch({type:"resize",slot:id,size})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutProvider",{enumerable:!0,get:function(){return LayoutProvider}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_context=require("./context"),_LayoutCssVars=require("./LayoutCssVars"),_cssVarStore=require("./cssVarStore"),_reducer=require("./reducer"),_store=require("./store");function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=(0,_react.useRef)(null);null===storeRef.current&&(storeRef.current=store??(0,_store.createLayoutStore)((0,_reducer.createInitialState)(config)));let cssVarStoreRef=(0,_react.useRef)(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=(0,_cssVarStore.createLayoutCssVarStore)());let reservedSlotsRef=(0,_react.useRef)(null);null===reservedSlotsRef.current&&(reservedSlotsRef.current=config?.reservedSlots??[]);let persistence=(0,_react.useMemo)(()=>({persistenceKey,storage}),[persistenceKey,storage]);return _react.default.createElement(_context.LayoutStoreProvider,{value:storeRef.current},_react.default.createElement(_context.LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},_react.default.createElement(_context.LayoutReservedSlotsProvider,{value:reservedSlotsRef.current},_react.default.createElement(_context.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),children)))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutProvider",{enumerable:!0,get:function(){return LayoutProvider}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_context=require("./context"),_LayoutCssVars=require("./LayoutCssVars"),_cssVarStore=require("./cssVarStore"),_reducer=require("./reducer"),_store=require("./store");function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=(0,_react.useRef)(null);null===storeRef.current&&(storeRef.current=store??(0,_store.createLayoutStore)((0,_reducer.createInitialState)(config)));let cssVarStoreRef=(0,_react.useRef)(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=(0,_cssVarStore.createLayoutCssVarStore)());let persistence=(0,_react.useMemo)(()=>({persistenceKey,storage}),[persistenceKey,storage]);return _react.default.createElement(_context.LayoutStoreProvider,{value:storeRef.current},_react.default.createElement(_context.LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},_react.default.createElement(_context.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),children))))}

package/build/cjs/components/Layout/LeftNavBar/LeftNavBar.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { LeftNavBarProps } from "../-types";
+/**
+ * What `Layout.LeftPanel` shows in the left bar beneath the button that opens
+ * it, for panels whose left bar carries something other than the panel's own
+ * leading column - persistent destinations beside an article outline, say.
+ * Author it among the panel's children; it renders into the layer behind the
+ * panel, so opening widens that one column rather than adding a second box.
+ *
+ * Optional: the bar keeps its open button either way. This only fills the strip
+ * below it, on its own terms - scrolling, and sticking a
+ * `Layout.LeftNavBarFooter` to the bottom.
+ *
+ * Renders nothing where the panel has no left bar, so the mobile drawer shows
+ * the panel's own content alone even though the left bar is authored among it.
+ */
+export declare function LeftNavBar({ children, "data-e2e-test-id": dataE2eTestId, }: LeftNavBarProps): React.ReactElement | null;

package/build/cjs/components/Layout/LeftNavBar/LeftNavBar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftNavBar",{enumerable:!0,get:function(){return LeftNavBar}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_reactdom=require("react-dom"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftBarContext=require("../LeftPanel/useLeftBarContext"),StyledNavBarFrame=(0,_styled.default)("div",{target:"e1e9dsmx0",label:"StyledNavBarFrame"})({height:"100%"});function LeftNavBar({children,"data-e2e-test-id":dataE2eTestId}){let{slotNode}=(0,_useLeftBarContext.useLeftBarContext)();return slotNode?(0,_reactdom.createPortal)(_react.default.createElement(StyledNavBarFrame,{"data-ds-id":"LeftNavBar","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0},children)),slotNode):null}

package/build/cjs/components/Layout/LeftNavBar/LeftNavBarFooter.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { LeftNavBarFooterProps } from "../-types";
+/**
+ * Optional sticky footer for `Layout.LeftNavBar` - place it among the left bar's
+ * children; it sticks to the bottom while the rest of the content scrolls.
+ */
+export declare function LeftNavBarFooter({ children, "data-e2e-test-id": dataE2eTestId, }: LeftNavBarFooterProps): React.ReactElement;

package/build/cjs/components/Layout/LeftNavBar/LeftNavBarFooter.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftNavBarFooter",{enumerable:!0,get:function(){return LeftNavBarFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function LeftNavBarFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}

package/build/cjs/components/Layout/LeftPanel/LeftBarLayers.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import type { CSSObject, Theme } from "@emotion/react";
+import type { ForwardedScrollProps } from "../-types";
+/**
+ * The box the layers live in: one surface, one divider, and a clip. Shared by
+ * the two presentations that carry a left bar - the in-row column and the offcanvas
+ * overlay - which differ only in how they are positioned and sized.
+ *
+ * The surface is painted here, once and constantly, so nothing new appears
+ * mid-collapse: were each layer to paint its own, fading the panel's would only
+ * uncover the left bar's, identical and full-width, and the dissolve would reveal
+ * nothing.
+ *
+ * The divider is overlaid on the trailing edge rather than declared as a border,
+ * so it costs the box no width - the left bar's leading column and the header's
+ * trailing button are placed against the full width, and a border would put them
+ * half a pixel out.
+ */
+export declare const getLeftBarColumnStyles: (theme: Theme) => CSSObject;
+export type LeftBarLayersProps = ForwardedScrollProps & {
+    children: React.ReactNode;
+    isVisible: boolean;
+    /** Width the panel's content holds on to while the box is narrower. */
+    openWidth: string;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
+    "aria-label"?: string;
+};
+/**
+ * The left bar and the panel, stacked in one box. Whichever of the two is showing,
+ * the box's width alone does the animating: content and footer hold `openWidth`
+ * and are clipped as it narrows, so nothing in them moves, while the header is
+ * left to narrow with the box - which walks its trailing control down into the
+ * left bar.
+ */
+export declare const LeftBarLayers: React.FC<LeftBarLayersProps>;

package/build/cjs/components/Layout/LeftPanel/LeftBarLayers.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftBarLayers(){return LeftBarLayers},get getLeftBarColumnStyles(){return getLeftBarColumnStyles}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useDocument=require("../../../shared/useDocument"),_mixins=require("../../../shared/mixins"),_constants=require("../-constants"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelId=require("../useLeftPanelId"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),_useLeftBarContext=require("./useLeftBarContext"),_LeftBarToggle=require("./LeftBarToggle"),getLeftBarColumnStyles=theme=>({height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}}),StyledLeftBarLayer=(0,_styled.default)("div",{target:"e1niasex0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=(0,_styled.default)("div",{target:"e1niasex1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=(0,_styled.default)("div",{target:"e1niasex2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=(0,_styled.default)("div",{target:"e1niasex3",label:"StyledFadingContent"})(({theme,isFaded,pinnedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()},LeftBarLayers=({children,isVisible,openWidth,toggleButtonLabel,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)(),document=(0,_useDocument.useDocument)(),leftBarLayerRef=(0,_react.useRef)(null),panelLayerRef=(0,_react.useRef)(null),toggleRef=(0,_react.useRef)(null),[leftBarSlotNode,setLeftBarSlotNode]=(0,_react.useState)(null),leftBarSlot=(0,_react.useMemo)(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=(0,_react.useMemo)(()=>({isContentFaded,pinnedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=(0,_react.useRef)(isVisible);return(0,_react.useEffect)(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),_react.default.createElement(_useLeftBarContext.LeftBarProvider,{value:leftBarSlot},_react.default.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},_react.default.createElement(_LeftBarToggle.LeftBarToggle,{"aria-label":toggleButtonLabel,buttonRef:toggleRef}),_react.default.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),_react.default.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(_useLeftPanelCollapseContext.LeftPanelCollapseProvider,{value:collapseState},_react.default.createElement(StyledFadingContent,{isFaded:isContentFaded,pinnedContentWidth:openWidth},children)))))};

package/build/cjs/components/Layout/LeftPanel/LeftBarToggle.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export type LeftBarToggleProps = {
+    /** Accessible name for the button, which is icon-only. */
+    "aria-label"?: string;
+    /** Handed out so the layer above can put focus here when the panel closes -
+     *  this is the control that replaces the one the panel is taking away. */
+    buttonRef?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * The one control the left bar always carries: the button that opens the panel
+ * back up. It belongs to the bar rather than to `Layout.LeftNavBar` - which only
+ * adds content beneath it - because a panel that authored no nav bar would
+ * otherwise close to a strip with no way back out of it.
+ */
+export declare function LeftBarToggle({ "aria-label": ariaLabel, buttonRef, }: LeftBarToggleProps): React.ReactElement;

package/build/cjs/components/Layout/LeftPanel/LeftBarToggle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftBarToggle",{enumerable:!0,get:function(){return LeftBarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId");function LeftBarToggle({"aria-label":ariaLabel,buttonRef}){let{show,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}

package/build/cjs/components/Layout/LeftPanel/LeftPanel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),LeftPanel=({children,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)();(0,_registry.useVisibleChange)(isVisible,onVisibleChange);let isDrawer="drawer"===state.variant;return canRender?isDrawer?_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_useLeftPanelId=require("../useLeftPanelId"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),_LeftPanelOffcanvas=require("./LeftPanelOffcanvas"),pixelsOf=size=>"number"==typeof size?size:void 0,defaultSizeOf=({defaultSize,minSize,state})=>defaultSize??minSize??pixelsOf(state.size)??pixelsOf(state.minSize)??320,LeftPanel=({children,slotProps,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)(),leftPanelId=(0,_react.useId)(),resolvedDefaultSize=defaultSizeOf({defaultSize,minSize,state});if((0,_registry.useVisibleChange)(isVisible,onVisibleChange),!canRender)return null;let drawer=_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=_react.default.createElement(_LeftPanelOffcanvas.LeftPanelOffcanvas,{toggleButtonLabel:slotProps.toggleButton["aria-label"],isVisible:isVisible,hide:hide,openWidth:`${resolvedDefaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{toggleButtonLabel:slotProps.toggleButton["aria-label"],"aria-label":ariaLabel,defaultSize:resolvedDefaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children);return _react.default.createElement(_useLeftPanelId.LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant])};

package/build/cjs/components/Layout/LeftPanel/LeftPanelDocked.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
-import type { ForwardedScrollProps, Size } from "../-types";
+import type { ForwardedScrollProps } from "../-types";
 export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
     "aria-label"?: string;
-    defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
+    /** Pixel width the column widens to. Resolved by `LeftPanel` from its own
+     *  prop and the provider config, so it is always a width. */
+    defaultSize: number;
+    minSize?: number;
+    maxSize?: number;
     collapsible?: boolean;
     resizable?: boolean;
 };
@@ -13,9 +17,15 @@ export type LeftPanelDockedProps = ForwardedScrollProps & {
  * Docked (desktop) left panel. Declares the `leftPanel` slot and portals its
  * content into the Group's host - an in-flow, resizable column whose width
  * slides open/closed via {@link usePanelDockedSlide} (when collapsible). Content
- * lives in a {@link PanelContainer} so `Layout.LeftPanelHeader` /
+ * lives in {@link LeftBarLayers} so `Layout.LeftPanelHeader` /
  * `Layout.LeftPanelFooter` children stick to the edges. The mobile presentation
  * lives in {@link LeftPanelDrawer}; `LeftPanel` picks between the two by
  * breakpoint.
+ *
+ * The column never leaves the row: it rests at the left bar's width and widens
+ * to `defaultSize`. Content and footer hold the open width and are clipped, so
+ * nothing in them moves - the panel simply shows less of itself. The header is
+ * left to narrow with the column, which walks a control at its trailing edge
+ * down into the left bar.
  */
 export declare const LeftPanelDocked: React.FC<LeftPanelDockedProps>;

package/build/cjs/components/Layout/LeftPanel/LeftPanelDocked.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_PanelSlideBody=require("../PanelSlideBody"),_PanelContainer=require("../PanelContainer"),LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0});return(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,isMounted?_react.default.createElement(_PanelSlideBody.PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},_react.default.createElement(_PanelContainer.PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_LeftBarLayers=require("./LeftBarLayers"),_useLayout=require("../useLayout"),StyledLeftBarColumn=(0,_styled.default)("div",{target:"e1qhx45f0",label:"StyledLeftBarColumn"})(({theme})=>({position:"relative",...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)})),LeftPanelDocked=({children,toggleButtonLabel,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel];return(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)}),(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,_react.default.createElement(StyledLeftBarColumn,null,_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:`${defaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e1pciy730",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>_react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),_useLeftPanelId=require("../useLeftPanelId"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e158aetq0",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/cjs/components/Layout/LeftPanel/LeftPanelFooter.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_mixins=require("../../../shared/mixins"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),StyledFadingFooter=(0,_styled.default)("div",{target:"emmyo1o0",label:"StyledFadingFooter"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})}));function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)();return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(StyledFadingFooter,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}

package/build/cjs/components/Layout/LeftPanel/LeftPanelHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader");function LeftPanelHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext");function LeftPanelHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot,isContentFaded:(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)().isContentFaded}))}

package/build/cjs/components/Layout/LeftPanel/LeftPanelOffcanvas.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { ForwardedScrollProps } from "../-types";
+export type LeftPanelOffcanvasProps = ForwardedScrollProps & {
+    children: React.ReactNode;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
+    isVisible: boolean;
+    hide: () => void;
+    openWidth: string;
+    "aria-label"?: string;
+};
+/**
+ * Left panel as a non-modal overlay: a drawer without the dialog. Used when the
+ * docked budget has no column left but the panel should stay reachable - it
+ * opens over the row instead of taking a column from it, and instead of being
+ * hidden outright. The left bar stays on screen throughout; only the mobile drawer
+ * gives it up.
+ *
+ * Deliberately not a {@link Drawer}: a Drawer traps focus, claims `aria-modal`
+ * and covers the viewport with a click-catching layer. Here the page behind
+ * stays live and usable, so the panel is a plain `region` (named by
+ * `aria-label`) that happens to be layered - nothing about it is modal.
+ *
+ * It still dismisses like something laid over the page, because that is what it
+ * is: Escape and a click beyond its edge both close it back to its left bar. Only
+ * while it is open - closed, it is just the left bar, and the left bar is not something
+ * to dismiss.
+ */
+export declare const LeftPanelOffcanvas: React.FC<LeftPanelOffcanvasProps>;

package/build/cjs/components/Layout/LeftPanel/LeftPanelOffcanvas.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelOffcanvas",{enumerable:!0,get:function(){return LeftPanelOffcanvas}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=require("@emotion/react"),_LeftBarLayers=require("./LeftBarLayers"),_constants=require("../-constants"),_registry=require("../registry"),_useOnEscapePress=require("../../../shared/useOnEscapePress"),_useOutsideClick=require("../../../shared/useOutsideClick"),getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:0,zIndex:1,width:isVisible?openWidth:leftBarWidth,height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`}),StyledOffcanvasShadow=(0,_styled.default)("div",{target:"er6g9050",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:`width ${duration} ${timingFunction}, opacity ${duration} ${timingFunction}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=(0,_styled.default)("div",{target:"er6g9051",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:`width ${duration} ${timingFunction}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme),height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`}}),LeftPanelOffcanvas=({children,toggleButtonLabel,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)();(0,_registry.useDeclarePanel)(_constants.Slot.leftPanel,{});let columnRef=(0,_react.useRef)(null);(0,_useOnEscapePress.useOnEscapePress)(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),(0,_useOutsideClick.useOutsideClick)(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),_react.default.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -0,0 +1,11 @@
+export type LeftBarSlot = {
+    /** Static host the left bar's content portals into. Null until the layer
+     *  behind the panel has mounted, and never provided at all by the
+     *  presentations that carry no left bar - which is how `Layout.LeftNavBar`
+     *  knows to render nothing on mobile, where the drawer shows the panel's own
+     *  content alone. */
+    slotNode: HTMLElement | null;
+};
+export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
+/** The left bar slot behind the left panel, if this presentation has one. */
+export declare function useLeftBarContext(): LeftBarSlot;

package/build/cjs/components/Layout/LeftPanel/useLeftBarContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftBarProvider(){return LeftBarProvider},get useLeftBarContext(){return useLeftBarContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftBarContext=(0,_react.createContext)({slotNode:null}),LeftBarProvider=LeftBarContext.Provider;function useLeftBarContext(){return(0,_react.useContext)(LeftBarContext)}

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

@@ -0,0 +1,11 @@
+/** How the left panel's parts have to behave while its column narrows to a left bar. */
+export type LeftPanelCollapseState = {
+    /** The content is dissolving into the left bar beneath it. */
+    isContentFaded: boolean;
+    /** Width the content holds on to while the column narrows around it, clipped
+     *  at the column's edge so nothing inside reflows on the way down. */
+    pinnedContentWidth?: string;
+};
+export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
+/** How the left panel's parts have to behave while its column narrows. */
+export declare function useLeftPanelCollapseContext(): LeftPanelCollapseState;

package/build/cjs/components/Layout/LeftPanel/useLeftPanelCollapseContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftPanelCollapseProvider(){return LeftPanelCollapseProvider},get useLeftPanelCollapseContext(){return useLeftPanelCollapseContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftPanelCollapseContext=(0,_react.createContext)({isContentFaded:!1}),LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider;function useLeftPanelCollapseContext(){return(0,_react.useContext)(LeftPanelCollapseContext)}

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

@@ -1,4 +1,4 @@
-import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore, SlotKey } from "./-types";
+import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
 export declare const LayoutStoreProvider: React.Provider<LayoutStore>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
@@ -15,10 +15,6 @@ export declare function useLayoutPanelsEnabled(): LayoutPanelsMode;
  *  breakpoint (the overlay presentations - drawer/sheet - which never mount
  *  the resizable row); `false` never allows. */
 export declare function useCanRenderPanel(): boolean;
-export declare const LayoutReservedSlotsProvider: React.Provider<("content" | "leftPanel" | "splitview" | "rightPanel")[]>;
-/** Slots the nearest `Layout.Provider` reserved for markers that mount later.
- *  See `LayoutConfig.reservedSlots`. */
-export declare function useLayoutReservedSlots(): SlotKey[];
 /**
  * Persistence config for the layout namespace. Set on `Layout.Provider` (single
  * external surface) and read by the nested `<Layout>`. The Provider only

package/build/cjs/components/Layout/context.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPanelsEnabledProvider(){return LayoutPanelsEnabledProvider},get LayoutPersistenceProvider(){return LayoutPersistenceProvider},get LayoutReservedSlotsProvider(){return LayoutReservedSlotsProvider},get LayoutStoreProvider(){return LayoutStoreProvider},get useCanRenderPanel(){return useCanRenderPanel},get useLayoutPanelsEnabled(){return useLayoutPanelsEnabled},get useLayoutPersistence(){return useLayoutPersistence},get useLayoutReservedSlots(){return useLayoutReservedSlots},get useLayoutSelector(){return useLayoutSelector},get useLayoutStore(){return useLayoutStore}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),LayoutStoreContext=(0,_react.createContext)(null),LayoutStoreProvider=LayoutStoreContext.Provider;function useLayoutStore(){let store=(0,_react.useContext)(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}const LayoutPanelsEnabledContext=(0,_react.createContext)(!1),LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;function useLayoutPanelsEnabled(){return(0,_react.useContext)(LayoutPanelsEnabledContext)}function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=(0,_useBreakpoints.useBreakpoints)();return!0===mode||"mobile"===mode&&isMobile}const LayoutReservedSlotsContext=(0,_react.createContext)([]),LayoutReservedSlotsProvider=LayoutReservedSlotsContext.Provider;function useLayoutReservedSlots(){return(0,_react.useContext)(LayoutReservedSlotsContext)}const LayoutPersistenceContext=(0,_react.createContext)({}),LayoutPersistenceProvider=LayoutPersistenceContext.Provider;function useLayoutPersistence(){return(0,_react.useContext)(LayoutPersistenceContext)}function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return(0,_react.useSyncExternalStore)(store.subscribe,getSnapshot,getSnapshot)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPanelsEnabledProvider(){return LayoutPanelsEnabledProvider},get LayoutPersistenceProvider(){return LayoutPersistenceProvider},get LayoutStoreProvider(){return LayoutStoreProvider},get useCanRenderPanel(){return useCanRenderPanel},get useLayoutPanelsEnabled(){return useLayoutPanelsEnabled},get useLayoutPersistence(){return useLayoutPersistence},get useLayoutSelector(){return useLayoutSelector},get useLayoutStore(){return useLayoutStore}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),LayoutStoreContext=(0,_react.createContext)(null),LayoutStoreProvider=LayoutStoreContext.Provider;function useLayoutStore(){let store=(0,_react.useContext)(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}const LayoutPanelsEnabledContext=(0,_react.createContext)(!1),LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;function useLayoutPanelsEnabled(){return(0,_react.useContext)(LayoutPanelsEnabledContext)}function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=(0,_useBreakpoints.useBreakpoints)();return!0===mode||"mobile"===mode&&isMobile}const LayoutPersistenceContext=(0,_react.createContext)({}),LayoutPersistenceProvider=LayoutPersistenceContext.Provider;function useLayoutPersistence(){return(0,_react.useContext)(LayoutPersistenceContext)}function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return(0,_react.useSyncExternalStore)(store.subscribe,getSnapshot,getSnapshot)}