@dynatrace/strato-components 3.2.1 → 3.3.1

package/esm/layouts/page-layout/details-layout/DetailsLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DetailsLayout.sty.js';\nimport { DetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Overlay, OVERLAY_HANDLE_WIDTH } from './Overlay.js';\nimport {\n  ContentSlot,\n  DetailsSlot,\n  extractSlotsProps,\n  type ExtractedContentSlot,\n  type ExtractedDetailsSlot,\n} from './slots.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { convertToPx } from '../../split-layout/width-utils.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\n/** @internal */\nexport interface RootProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\nfunction renderLayout({\n  details,\n  content,\n  layout,\n  persistedPanelWidth,\n  contentTeleport,\n  panelTeleport,\n  detailsAriaLabel,\n}: {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n  layout: ReturnType<typeof useLayoutState>;\n  persistedPanelWidth: MutableRefObject<number | undefined>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n  detailsAriaLabel: string;\n}) {\n  const contentNode = (\n    <div\n      ref={content.ref}\n      {...content.domProps}\n      className={clsx(styles.content, content.domProps.className)}\n    >\n      <contentTeleport.Slot />\n    </div>\n  );\n\n  if (!details) {\n    return contentNode;\n  }\n\n  switch (layout.mode) {\n    case 'collapsed': {\n      return contentNode;\n    }\n    case 'split': {\n      return (\n        <SplitLayout>\n          <SplitLayout.Content\n            {...content.domProps}\n            ref={content.ref}\n            minWidth={content.config.minWidth}\n            className={clsx(styles.content, content.domProps.className)}\n          >\n            <contentTeleport.Slot />\n          </SplitLayout.Content>\n          <SplitLayout.Panel\n            {...details.domProps}\n            ref={details.ref}\n            minWidth={details.config.minWidth}\n            maxWidth={details.config.maxWidth}\n            defaultWidth={\n              persistedPanelWidth.current ?? details.config.defaultWidth\n            }\n            onResize={(value) => {\n              persistedPanelWidth.current = value;\n              details.config.onResize?.(value);\n            }}\n            resizable={details.config.resizable}\n            position=\"end\"\n            className={clsx(styles.panel, details.domProps.className)}\n            aria-label={detailsAriaLabel}\n          >\n            <panelTeleport.Slot />\n          </SplitLayout.Panel>\n        </SplitLayout>\n      );\n    }\n    case 'overlay': {\n      // Defer mounting the Overlay until the container has been\n      // measured. Without this guard, convertToPx(\"25%\", 0) = 0 would\n      // be passed as defaultWidth and locked into Overlay's useState\n      // before the ResizeObserver fires with the real container width.\n      if (layout.containerWidth === 0) {\n        return contentNode;\n      }\n      return (\n        <>\n          {contentNode}\n          <Overlay\n            {...details.domProps}\n            ref={details.ref}\n            minWidth={convertToPx(\n              details.config.minWidth,\n              layout.containerWidth,\n            )}\n            maxWidth={\n              details.config.resizable\n                ? layout.containerWidth - OVERLAY_HANDLE_WIDTH\n                : layout.containerWidth\n            }\n            defaultWidth={\n              persistedPanelWidth.current ??\n              convertToPx(details.config.defaultWidth, layout.containerWidth)\n            }\n            resizable={details.config.resizable}\n            onResize={(value) => {\n              persistedPanelWidth.current = value;\n              // TODO: should we communicate which layout mode was updated?\n              details.config.onResize?.(value);\n            }}\n          >\n            <panelTeleport.Slot />\n          </Overlay>\n        </>\n      );\n    }\n    case 'drawer': {\n      return (\n        <>\n          {contentNode}\n          <Drawer\n            className={styles.drawer}\n            isDismissed={layout.collapsed}\n            onDismiss={(state) => layout.setCollapsed(state)}\n            placement=\"right\"\n            width=\"wide\"\n          >\n            <div\n              {...details.domProps}\n              ref={details.ref}\n              className={clsx(styles.drawerContent, details.domProps.className)}\n            >\n              <panelTeleport.Slot />\n            </div>\n          </Drawer>\n        </>\n      );\n    }\n  }\n}\n\nconst LayoutRootRef = forwardRef<HTMLDivElement, RootProps>((props, ref) => {\n  const { children, className: rootClassName, ...rootProps } = props;\n\n  const intl = useIntl();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { content, details } = extractSlotsProps(children);\n  const layout = useLayoutState({ details, containerRef });\n  const rootRef = useMergeRefs([ref, containerRef]);\n\n  const persistedPanelWidth = useRef<number>();\n\n  const contentTeleport = useTeleport();\n  const panelTeleport = useTeleport();\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: layout.collapsed,\n      setCollapsed: layout.setCollapsed,\n      preferredLayout: layout.preferredLayoutMode,\n      setPreferredLayout: layout.setPreferredLayoutMode,\n      mode: layout.mode,\n    }),\n    [\n      layout.collapsed,\n      layout.setCollapsed,\n      layout.preferredLayoutMode,\n      layout.setPreferredLayoutMode,\n      layout.mode,\n    ],\n  );\n\n  const detailsAriaLabel = intl.formatMessage({\n    defaultMessage: 'Details',\n    id: 'o3A99RFWS+N7bJe8',\n    description: 'Accessible label for the details panel.',\n  });\n\n  return (\n    <DetailsLayoutContext.Provider value={contextValue}>\n      <contentTeleport.Source>{content.children}</contentTeleport.Source>\n      {details && (\n        <panelTeleport.Source>{details.children}</panelTeleport.Source>\n      )}\n      <div\n        {...rootProps}\n        ref={rootRef}\n        className={clsx(styles.layoutRoot, rootClassName)}\n      >\n        {renderLayout({\n          details,\n          content,\n          layout,\n          persistedPanelWidth,\n          contentTeleport,\n          panelTeleport,\n          detailsAriaLabel,\n        })}\n      </div>\n    </DetailsLayoutContext.Provider>\n  );\n});\n(LayoutRootRef as typeof LayoutRootRef & { displayName: string }).displayName =\n  'ForwardRef (DetailsLayout.Root)';\nconst LayoutRoot = memo(LayoutRootRef);\n\n/** @internal */\nexport const DetailsLayout = Object.assign(LayoutRoot, {\n  Content: ContentSlot,\n  Details: DetailsSlot,\n});\n"],
-  "mappings": "AA2DM,SAsDE,UAtDF,KAcE,YAdF;AA3DN,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,SAAS,4BAA4B;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAS5B,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,cACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACZ,GAAG,QAAQ;AAAA,MACZ,WAAW,KAAK,OAAO,SAAS,QAAQ,SAAS,SAAS;AAAA,MAE1D,8BAAC,gBAAgB,MAAhB,EAAqB;AAAA;AAAA,EACxB;AAGF,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK,aAAa;AAChB,aAAO;AAAA,IACT;AAAA,IACA,KAAK,SAAS;AACZ,aACE,qBAAC,eACC;AAAA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACE,GAAG,QAAQ;AAAA,YACZ,KAAK,QAAQ;AAAA,YACb,UAAU,QAAQ,OAAO;AAAA,YACzB,WAAW,KAAK,OAAO,SAAS,QAAQ,SAAS,SAAS;AAAA,YAE1D,8BAAC,gBAAgB,MAAhB,EAAqB;AAAA;AAAA,QACxB;AAAA,QACA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACE,GAAG,QAAQ;AAAA,YACZ,KAAK,QAAQ;AAAA,YACb,UAAU,QAAQ,OAAO;AAAA,YACzB,UAAU,QAAQ,OAAO;AAAA,YACzB,cACE,oBAAoB,WAAW,QAAQ,OAAO;AAAA,YAEhD,UAAU,CAAC,UAAU;AACnB,kCAAoB,UAAU;AAC9B,sBAAQ,OAAO,WAAW,KAAK;AAAA,YACjC;AAAA,YACA,WAAW,QAAQ,OAAO;AAAA,YAC1B,UAAS;AAAA,YACT,WAAW,KAAK,OAAO,OAAO,QAAQ,SAAS,SAAS;AAAA,YACxD,cAAY;AAAA,YAEZ,8BAAC,cAAc,MAAd,EAAmB;AAAA;AAAA,QACtB;AAAA,SACF;AAAA,IAEJ;AAAA,IACA,KAAK,WAAW;AAKd,UAAI,OAAO,mBAAmB,GAAG;AAC/B,eAAO;AAAA,MACT;AACA,aACE,iCACG;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,QAAQ;AAAA,YACZ,KAAK,QAAQ;AAAA,YACb,UAAU;AAAA,cACR,QAAQ,OAAO;AAAA,cACf,OAAO;AAAA,YACT;AAAA,YACA,UACE,QAAQ,OAAO,YACX,OAAO,iBAAiB,uBACxB,OAAO;AAAA,YAEb,cACE,oBAAoB,WACpB,YAAY,QAAQ,OAAO,cAAc,OAAO,cAAc;AAAA,YAEhE,WAAW,QAAQ,OAAO;AAAA,YAC1B,UAAU,CAAC,UAAU;AACnB,kCAAoB,UAAU;AAE9B,sBAAQ,OAAO,WAAW,KAAK;AAAA,YACjC;AAAA,YAEA,8BAAC,cAAc,MAAd,EAAmB;AAAA;AAAA,QACtB;AAAA,SACF;AAAA,IAEJ;AAAA,IACA,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,aAAa,OAAO;AAAA,YACpB,WAAW,CAAC,UAAU,OAAO,aAAa,KAAK;AAAA,YAC/C,WAAU;AAAA,YACV,OAAM;AAAA,YAEN;AAAA,cAAC;AAAA;AAAA,gBACE,GAAG,QAAQ;AAAA,gBACZ,KAAK,QAAQ;AAAA,gBACb,WAAW,KAAK,OAAO,eAAe,QAAQ,SAAS,SAAS;AAAA,gBAEhE,8BAAC,cAAc,MAAd,EAAmB;AAAA;AAAA,YACtB;AAAA;AAAA,QACF;AAAA,SACF;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB,WAAsC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,WAAW,eAAe,GAAG,UAAU,IAAI;AAE7D,QAAM,OAAO,QAAQ;AACrB,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,EAAE,SAAS,QAAQ,IAAI,kBAAkB,QAAQ;AACvD,QAAM,SAAS,eAAe,EAAE,SAAS,aAAa,CAAC;AACvD,QAAM,UAAU,aAAa,CAAC,KAAK,YAAY,CAAC;AAEhD,QAAM,sBAAsB,OAAe;AAE3C,QAAM,kBAAkB,YAAY;AACpC,QAAM,gBAAgB,YAAY;AAElC,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,WAAW,OAAO;AAAA,MAClB,cAAc,OAAO;AAAA,MACrB,iBAAiB,OAAO;AAAA,MACxB,oBAAoB,OAAO;AAAA,MAC3B,MAAM,OAAO;AAAA,IACf;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,mBAAmB,KAAK,cAAc;AAAA,IAC1C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,cACpC;AAAA,wBAAC,gBAAgB,QAAhB,EAAwB,kBAAQ,UAAS;AAAA,IACzC,WACC,oBAAC,cAAc,QAAd,EAAsB,kBAAQ,UAAS;AAAA,IAE1C;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,YAAY,aAAa;AAAA,QAE/C,uBAAa;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;AACA,cAAiE,cAChE;AACF,MAAM,aAAa,KAAK,aAAa;AAG9B,MAAM,gBAAgB,OAAO,OAAO,YAAY;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useContext,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DetailsLayout.sty.js';\nimport { DetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Overlay, OVERLAY_HANDLE_WIDTH } from './Overlay.js';\nimport {\n  ContentSlot,\n  DetailsSlot,\n  extractSlotsProps,\n  type ExtractedContentSlot,\n  type ExtractedDetailsSlot,\n} from './slots.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useSafeLayoutEffect } from '../../../core/hooks/useSafeLayoutEffect.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { convertToPx } from '../../split-layout/width-utils.js';\nimport {\n  PageLayoutPortalContext,\n  type PageLayoutPortalContextValue,\n} from '../shared/PageLayoutPortalContext.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\n/** @internal */\nexport interface RootProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\nfunction renderLayout({\n  details,\n  content,\n  layout,\n  persistedPanelWidth,\n  contentTeleport,\n  panelTeleport,\n  detailsAriaLabel,\n}: {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n  layout: ReturnType<typeof useLayoutState>;\n  persistedPanelWidth: MutableRefObject<number | undefined>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n  detailsAriaLabel: string;\n}) {\n  const contentNode = (\n    <div\n      ref={content.ref}\n      {...content.domProps}\n      className={clsx(styles.content, content.domProps.className)}\n    >\n      <contentTeleport.Target />\n    </div>\n  );\n\n  if (!details) {\n    return contentNode;\n  }\n\n  switch (layout.mode) {\n    case 'collapsed': {\n      return contentNode;\n    }\n    case 'split': {\n      return (\n        <SplitLayout>\n          <SplitLayout.Content\n            {...content.domProps}\n            ref={content.ref}\n            minWidth={content.config.minWidth}\n            className={clsx(styles.content, content.domProps.className)}\n          >\n            <contentTeleport.Target />\n          </SplitLayout.Content>\n          <SplitLayout.Panel\n            {...details.domProps}\n            ref={details.ref}\n            minWidth={details.config.minWidth}\n            maxWidth={details.config.maxWidth}\n            defaultWidth={\n              persistedPanelWidth.current ?? details.config.defaultWidth\n            }\n            onResize={(value) => {\n              persistedPanelWidth.current = value;\n              details.config.onResize?.(value);\n            }}\n            resizable={details.config.resizable}\n            position=\"end\"\n            className={clsx(styles.panel, details.domProps.className)}\n            aria-label={detailsAriaLabel}\n          >\n            <panelTeleport.Target />\n          </SplitLayout.Panel>\n        </SplitLayout>\n      );\n    }\n    case 'overlay': {\n      // Defer mounting the Overlay until the container has been\n      // measured. Without this guard, convertToPx(\"25%\", 0) = 0 would\n      // be passed as defaultWidth and locked into Overlay's useState\n      // before the ResizeObserver fires with the real container width.\n      if (layout.containerWidth === 0) {\n        return contentNode;\n      }\n      return (\n        <>\n          {contentNode}\n          <Overlay\n            {...details.domProps}\n            ref={details.ref}\n            minWidth={convertToPx(\n              details.config.minWidth,\n              layout.containerWidth,\n            )}\n            maxWidth={\n              details.config.resizable\n                ? layout.containerWidth - OVERLAY_HANDLE_WIDTH\n                : layout.containerWidth\n            }\n            defaultWidth={\n              persistedPanelWidth.current ??\n              convertToPx(details.config.defaultWidth, layout.containerWidth)\n            }\n            resizable={details.config.resizable}\n            onResize={(value) => {\n              persistedPanelWidth.current = value;\n              // TODO: should we communicate which layout mode was updated?\n              details.config.onResize?.(value);\n            }}\n          >\n            <panelTeleport.Target />\n          </Overlay>\n        </>\n      );\n    }\n    case 'drawer': {\n      return (\n        <>\n          {contentNode}\n          <Drawer\n            className={styles.drawer}\n            isDismissed={layout.collapsed}\n            onDismiss={(state) => layout.setCollapsed(state)}\n            placement=\"right\"\n            width=\"wide\"\n          >\n            <div\n              {...details.domProps}\n              ref={details.ref}\n              className={clsx(styles.drawerContent, details.domProps.className)}\n            >\n              <panelTeleport.Target />\n            </div>\n          </Drawer>\n        </>\n      );\n    }\n  }\n}\n\nconst LayoutRootRef = forwardRef<HTMLDivElement, RootProps>((props, ref) => {\n  const { children, className: rootClassName, ...rootProps } = props;\n\n  const intl = useIntl();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { content, details } = useMemo(() => {\n    return extractSlotsProps(children);\n  }, [children]);\n  const layout = useLayoutState({ details, containerRef });\n  const rootRef = useMergeRefs([ref, containerRef]);\n\n  const persistedPanelWidth = useRef<number>();\n\n  const contentTeleport = useTeleport();\n  const panelTeleport = useTeleport();\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: layout.collapsed,\n      setCollapsed: layout.setCollapsed,\n      preferredLayout: layout.preferredLayoutMode,\n      setPreferredLayout: layout.setPreferredLayoutMode,\n      mode: layout.mode,\n    }),\n    [\n      layout.collapsed,\n      layout.setCollapsed,\n      layout.preferredLayoutMode,\n      layout.setPreferredLayoutMode,\n      layout.mode,\n    ],\n  );\n\n  // When DetailsLayout is used inside PageLayout, bridge the context value so\n  // PageLayoutDetails can re-provide it around its portal. Without this,\n  // components like DetailsControlBar that consume DetailsLayoutContext receive\n  // undefined because the portal originates outside DetailsLayoutContext.Provider.\n  const pageLayoutPortalContext =\n    useContext<PageLayoutPortalContextValue | null>(PageLayoutPortalContext);\n  useSafeLayoutEffect(() => {\n    if (!pageLayoutPortalContext) {\n      return;\n    }\n    pageLayoutPortalContext.registry.register(\n      'detailsLayoutContext',\n      contextValue,\n    );\n  }, [pageLayoutPortalContext, contextValue]);\n\n  const detailsAriaLabel = intl.formatMessage({\n    defaultMessage: 'Details',\n    id: 'o3A99RFWS+N7bJe8',\n    description: 'Accessible label for the details panel.',\n  });\n\n  return (\n    <DetailsLayoutContext.Provider value={contextValue}>\n      <contentTeleport.Source>{content.children}</contentTeleport.Source>\n      {details && (\n        <panelTeleport.Source>{details.children}</panelTeleport.Source>\n      )}\n      <div\n        {...rootProps}\n        ref={rootRef}\n        className={clsx(styles.layoutRoot, rootClassName)}\n      >\n        {renderLayout({\n          details,\n          content,\n          layout,\n          persistedPanelWidth,\n          contentTeleport,\n          panelTeleport,\n          detailsAriaLabel,\n        })}\n      </div>\n    </DetailsLayoutContext.Provider>\n  );\n});\nconst LayoutRoot = memo(LayoutRootRef);\nLayoutRoot.displayName = 'DetailsLayout.Root';\n\n/** @internal */\nexport const DetailsLayout = Object.assign(LayoutRoot, {\n  Content: ContentSlot,\n  Details: DetailsSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js

@@ -1,9 +1,9 @@
 import "./DetailsLayout.css";
-var content = "_1377n3n2-3-2-1";
-var drawer = "_1377n3n3-3-2-1";
-var drawerContent = "_1377n3n4-3-2-1";
-var layoutRoot = "_1377n3n0-3-2-1";
-var panel = "_1377n3n1-3-2-1";
+var content = "_1377n3n2-3-3-1";
+var drawer = "_1377n3n3-3-3-1";
+var drawerContent = "_1377n3n4-3-3-1";
+var layoutRoot = "_1377n3n0-3-3-1";
+var panel = "_1377n3n1-3-3-1";
 export {
   content,
   drawer,

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.css.ts"],
-  "sourcesContent": ["import './DetailsLayout.css';\nexport var content = '_1377n3n2-3-2-1';\nexport var drawer = '_1377n3n3-3-2-1';\nexport var drawerContent = '_1377n3n4-3-2-1';\nexport var layoutRoot = '_1377n3n0-3-2-1';\nexport var panel = '_1377n3n1-3-2-1';"],
+  "sourcesContent": ["import './DetailsLayout.css';\nexport var content = '_1377n3n2-3-3-1';\nexport var drawer = '_1377n3n3-3-3-1';\nexport var drawerContent = '_1377n3n4-3-3-1';\nexport var layoutRoot = '_1377n3n0-3-3-1';\nexport var panel = '_1377n3n1-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,QAAQ;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsLayoutContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayoutContext.ts"],
-  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\n/**\n * Determines how the details panel is rendered relative to the content.\n * @internal\n */\nexport type LayoutMode = 'split' | 'overlay';\n\ntype RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport interface DetailsLayoutContextValue {\n  collapsed: boolean;\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  preferredLayout: LayoutMode;\n  setPreferredLayout: Dispatch<SetStateAction<LayoutMode>>;\n  mode: RenderedLayout;\n}\n\n/** @internal */\nexport const DetailsLayoutContext =\n  createContext<DetailsLayoutContextValue | null>(null);\n\n/** @internal */\nexport function useDetailsLayoutContext() {\n  return useContext(DetailsLayoutContext);\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAoBA,MAAM,uBACX,cAAgD,IAAI;AAG/C,SAAS,0BAA0B;AACxC,SAAO,WAAW,oBAAoB;AACxC;",
+  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\n/**\n * Determines how the details panel is rendered relative to the content.\n * @internal\n */\nexport type LayoutMode = 'split' | 'overlay';\n\n/** @internal */\nexport type RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport interface DetailsLayoutContextValue {\n  collapsed: boolean;\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  preferredLayout: LayoutMode;\n  setPreferredLayout: Dispatch<SetStateAction<LayoutMode>>;\n  mode: RenderedLayout;\n}\n\n/** @internal */\nexport const DetailsLayoutContext =\n  createContext<DetailsLayoutContextValue | null>(null);\n\n/** @internal */\nexport function useDetailsLayoutContext() {\n  return useContext(DetailsLayoutContext);\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAqBA,MAAM,uBACX,cAAgD,IAAI;AAG/C,SAAS,0BAA0B;AACxC,SAAO,WAAW,oBAAoB;AACxC;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/Overlay.css

@@ -1,4 +1,4 @@
-._15qr1eq0-3-2-1 {
+._15qr1eq0-3-3-1 {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -12,14 +12,14 @@
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   display: flex;
 }
-._15qr1eq1-3-2-1 {
+._15qr1eq1-3-3-1 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-2-1 {
+._15qr1eq2-3-3-1 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -28,7 +28,7 @@
   display: flex;
   justify-content: center;
 }
-._15qr1eq3-3-2-1 {
+._15qr1eq3-3-3-1 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -41,17 +41,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._15qr1eq3-3-2-1:focus-visible {
+._15qr1eq3-3-3-1:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-2-1:hover._15qr1eq3-3-2-1:focus-visible {
+._15qr1eq3-3-3-1:hover._15qr1eq3-3-3-1:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-2-1:focus-visible, ._15qr1eq3-3-2-1:hover {
+._15qr1eq3-3-3-1:focus-visible, ._15qr1eq3-3-3-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-2-1:after {
+._15qr1eq3-3-3-1:after {
   content: "";
   display: block;
   height: 100%;

package/esm/layouts/page-layout/details-layout/Overlay.js

@@ -28,8 +28,7 @@ const Overlay = memo(
     const handleRef = useRef(null);
     const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });
     const dragStartWidth = useRef(null);
-    const maxContentWidth = maxWidth;
-    const clampContentWidth = (width) => clamp(minWidth, width, maxContentWidth);
+    const clampContentWidth = (width) => clamp(minWidth, width, maxWidth);
     const clampedDefaultWidth = clampContentWidth(defaultWidth);
     const [resizedWidth, setResizedWidth] = useState(null);
     const contentWidth = resizedWidth === null ? clampedDefaultWidth : clampContentWidth(resizedWidth);
@@ -49,7 +48,7 @@ const Overlay = memo(
           const nextWidth = clamp(
             minWidth,
             dragStartWidth.current + state.movement[0] * -1,
-            maxContentWidth
+            maxWidth
           );
           setResizedWidth(nextWidth);
           onResize?.(nextWidth);
@@ -60,6 +59,7 @@ const Overlay = memo(
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        role: "dialog",
         className: styles.overlay,
         style: { ...style, width: overlayWidth },
         ref: containerRef,

package/esm/layouts/page-layout/details-layout/Overlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type PropsWithChildren,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useRef,\n  useState,\n  memo,\n} from 'react';\n\nimport * as styles from './Overlay.sty.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { clamp } from '../../split-layout/width-utils.js';\n\nexport const OVERLAY_HANDLE_WIDTH = 8;\n\n/** @internal */\nexport interface OverlayProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {\n  resizable?: boolean;\n  onResize?: (width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n  defaultWidth?: number;\n}\n\n/** @internal */\nexport const Overlay = memo(\n  forwardRef<HTMLDivElement, OverlayProps>((props, forwardedRef) => {\n    const {\n      children,\n      className,\n      style,\n      minWidth = 200,\n      maxWidth = Infinity,\n      defaultWidth = 300,\n      resizable = true,\n      onResize,\n      ...restProps\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useRef<HTMLDivElement>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const maxContentWidth = maxWidth;\n    const clampContentWidth = (width: number) =>\n      clamp(minWidth, width, maxContentWidth);\n    const clampedDefaultWidth = clampContentWidth(defaultWidth);\n    const [resizedWidth, setResizedWidth] = useState<number | null>(null);\n\n    const contentWidth =\n      resizedWidth === null\n        ? clampedDefaultWidth\n        : clampContentWidth(resizedWidth);\n\n    const overlayWidth = resizable\n      ? contentWidth + OVERLAY_HANDLE_WIDTH\n      : contentWidth;\n\n    useGesture(\n      {\n        onDragStart: () => {\n          dragStartWidth.current = clampContentWidth(contentWidth);\n        },\n        onDragEnd: () => {\n          dragStartWidth.current = null;\n        },\n        onDrag: (state) => {\n          if (dragStartWidth.current === null) {\n            return;\n          }\n\n          const nextWidth = clamp(\n            minWidth,\n            dragStartWidth.current + state.movement[0] * -1,\n            maxContentWidth,\n          );\n          setResizedWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\n        className={styles.overlay}\n        style={{ ...style, width: overlayWidth }}\n        ref={containerRef}\n      >\n        {resizable ? (\n          <div className={styles.handleContainer}>\n            <div\n              {...focusProps}\n              role=\"separator\"\n              ref={handleRef}\n              className={clsx(styles.handle, focusClassName)}\n              tabIndex={0}\n            />\n          </div>\n        ) : null}\n        <div\n          {...restProps}\n          ref={forwardedRef}\n          className={clsx(styles.overlayContent, className)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n);\nOverlay.displayName = 'Overlay';\n"],
-  "mappings": "AA0FM,SAOM,KAPN;AA1FN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,uBAAuB;AAc7B,MAAM,UAAU;AAAA,EACrB,WAAyC,CAAC,OAAO,iBAAiB;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,OAAuB,IAAI;AAE7C,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,aAAa,KAAK,CAAC;AAEzE,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,kBAAkB;AACxB,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,eAAe;AACxC,UAAM,sBAAsB,kBAAkB,YAAY;AAC1D,UAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAEpE,UAAM,eACJ,iBAAiB,OACb,sBACA,kBAAkB,YAAY;AAEpC,UAAM,eAAe,YACjB,eAAe,uBACf;AAEJ;AAAA,MACE;AAAA,QACE,aAAa,MAAM;AACjB,yBAAe,UAAU,kBAAkB,YAAY;AAAA,QACzD;AAAA,QACA,WAAW,MAAM;AACf,yBAAe,UAAU;AAAA,QAC3B;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,cAAI,eAAe,YAAY,MAAM;AACnC;AAAA,UACF;AAEA,gBAAM,YAAY;AAAA,YAChB;AAAA,YACA,eAAe,UAAU,MAAM,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,UACF;AACA,0BAAgB,SAAS;AACzB,qBAAW,SAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,UAAU;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,GAAG,OAAO,OAAO,aAAa;AAAA,QACvC,KAAK;AAAA,QAEJ;AAAA,sBACC,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,MAAK;AAAA,cACL,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,QAAQ,cAAc;AAAA,cAC7C,UAAU;AAAA;AAAA,UACZ,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,cAE/C;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,QAAQ,cAAc;",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type PropsWithChildren,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useRef,\n  useState,\n  memo,\n} from 'react';\n\nimport * as styles from './Overlay.sty.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { clamp } from '../../split-layout/width-utils.js';\n\nexport const OVERLAY_HANDLE_WIDTH = 8;\n\n/** @internal */\nexport interface OverlayProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {\n  resizable?: boolean;\n  onResize?: (width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n  defaultWidth?: number;\n}\n\n/** @internal */\nexport const Overlay = memo(\n  forwardRef<HTMLDivElement, OverlayProps>((props, forwardedRef) => {\n    const {\n      children,\n      className,\n      style,\n      minWidth = 200,\n      maxWidth = Infinity,\n      defaultWidth = 300,\n      resizable = true,\n      onResize,\n      ...restProps\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useRef<HTMLDivElement>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const clampContentWidth = (width: number) =>\n      clamp(minWidth, width, maxWidth);\n    const clampedDefaultWidth = clampContentWidth(defaultWidth);\n    const [resizedWidth, setResizedWidth] = useState<number | null>(null);\n\n    const contentWidth =\n      resizedWidth === null\n        ? clampedDefaultWidth\n        : clampContentWidth(resizedWidth);\n\n    const overlayWidth = resizable\n      ? contentWidth + OVERLAY_HANDLE_WIDTH\n      : contentWidth;\n\n    useGesture(\n      {\n        onDragStart: () => {\n          dragStartWidth.current = clampContentWidth(contentWidth);\n        },\n        onDragEnd: () => {\n          dragStartWidth.current = null;\n        },\n        onDrag: (state) => {\n          if (dragStartWidth.current === null) {\n            return;\n          }\n\n          const nextWidth = clamp(\n            minWidth,\n            dragStartWidth.current + state.movement[0] * -1,\n            maxWidth,\n          );\n          setResizedWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\n        role=\"dialog\"\n        className={styles.overlay}\n        style={{ ...style, width: overlayWidth }}\n        ref={containerRef}\n      >\n        {resizable ? (\n          <div className={styles.handleContainer}>\n            <div\n              {...focusProps}\n              role=\"separator\"\n              ref={handleRef}\n              className={clsx(styles.handle, focusClassName)}\n              tabIndex={0}\n            />\n          </div>\n        ) : null}\n        <div\n          {...restProps}\n          ref={forwardedRef}\n          className={clsx(styles.overlayContent, className)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n);\nOverlay.displayName = 'Overlay';\n"],
+  "mappings": "AAyFM,SAQM,KARN;AAzFN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,uBAAuB;AAc7B,MAAM,UAAU;AAAA,EACrB,WAAyC,CAAC,OAAO,iBAAiB;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,OAAuB,IAAI;AAE7C,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,aAAa,KAAK,CAAC;AAEzE,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,QAAQ;AACjC,UAAM,sBAAsB,kBAAkB,YAAY;AAC1D,UAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAEpE,UAAM,eACJ,iBAAiB,OACb,sBACA,kBAAkB,YAAY;AAEpC,UAAM,eAAe,YACjB,eAAe,uBACf;AAEJ;AAAA,MACE;AAAA,QACE,aAAa,MAAM;AACjB,yBAAe,UAAU,kBAAkB,YAAY;AAAA,QACzD;AAAA,QACA,WAAW,MAAM;AACf,yBAAe,UAAU;AAAA,QAC3B;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,cAAI,eAAe,YAAY,MAAM;AACnC;AAAA,UACF;AAEA,gBAAM,YAAY;AAAA,YAChB;AAAA,YACA,eAAe,UAAU,MAAM,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,UACF;AACA,0BAAgB,SAAS;AACzB,qBAAW,SAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,UAAU;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,GAAG,OAAO,OAAO,aAAa;AAAA,QACvC,KAAK;AAAA,QAEJ;AAAA,sBACC,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,MAAK;AAAA,cACL,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,QAAQ,cAAc;AAAA,cAC7C,UAAU;AAAA;AAAA,UACZ,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,cAE/C;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,QAAQ,cAAc;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/Overlay.sty.js

@@ -1,8 +1,8 @@
 import "./Overlay.css";
-var handle = "_15qr1eq3-3-2-1";
-var handleContainer = "_15qr1eq2-3-2-1";
-var overlay = "_15qr1eq0-3-2-1";
-var overlayContent = "_15qr1eq1-3-2-1";
+var handle = "_15qr1eq3-3-3-1";
+var handleContainer = "_15qr1eq2-3-3-1";
+var overlay = "_15qr1eq0-3-3-1";
+var overlayContent = "_15qr1eq1-3-3-1";
 export {
   handle,
   handleContainer,

package/esm/layouts/page-layout/details-layout/Overlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.css.ts"],
-  "sourcesContent": ["import './Overlay.css';\nexport var handle = '_15qr1eq3-3-2-1';\nexport var handleContainer = '_15qr1eq2-3-2-1';\nexport var overlay = '_15qr1eq0-3-2-1';\nexport var overlayContent = '_15qr1eq1-3-2-1';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var handle = '_15qr1eq3-3-3-1';\nexport var handleContainer = '_15qr1eq2-3-3-1';\nexport var overlay = '_15qr1eq0-3-3-1';\nexport var overlayContent = '_15qr1eq1-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/slots.js

@@ -7,6 +7,10 @@ import {
 import {
   DetailsControlBar
 } from "./DetailsControlBar.js";
+import {
+  pageLayoutContentDefaults,
+  pageLayoutDetailsDefaults
+} from "../shared/slot-defaults.js";
 const DetailsSlotBase = memo(
   forwardRef((_props, _ref) => null)
 );
@@ -35,17 +39,17 @@ function extractSlotsProps(children) {
       }
       const {
         children: detailsChildren,
-        minWidth = 320,
-        maxWidth = "50%",
-        defaultWidth = "25%",
-        resizable = true,
+        minWidth = pageLayoutDetailsDefaults.minWidth,
+        maxWidth = pageLayoutDetailsDefaults.maxWidth,
+        defaultWidth = pageLayoutDetailsDefaults.defaultWidth,
+        resizable = pageLayoutDetailsDefaults.resizable,
         collapsed,
-        defaultCollapsed = false,
+        defaultCollapsed = pageLayoutDetailsDefaults.defaultCollapsed,
         onCollapsedChange,
         layout,
-        defaultLayout = "split",
+        defaultLayout = pageLayoutDetailsDefaults.defaultLayout,
         onLayoutChange,
-        breakpoint = 600,
+        breakpoint = pageLayoutDetailsDefaults.breakpoint,
         onResize,
         ...domProps
       } = child.props;
@@ -76,7 +80,7 @@ function extractSlotsProps(children) {
       }
       const {
         children: contentChildren,
-        minWidth = 0,
+        minWidth = pageLayoutContentDefaults.minWidth,
         ...domProps
       } = child.props;
       content = {

package/esm/layouts/page-layout/details-layout/slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/slots.ts"],
-  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  memo,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport {\n  DetailsControlBar,\n  type DetailsControlBarProps,\n} from './DetailsControlBar.js';\nimport type { LayoutMode } from './DetailsLayoutContext.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type {\n  PanelProps as SplitPanelProps,\n  ContentProps as SplitContentProps,\n} from '../../split-layout/SplitLayout.js';\nimport type { PanelWidth } from '../../split-layout/width-utils.js';\n\n/** @internal */\nexport interface DetailsProps extends SplitPanelProps, MaskingProps {\n  /** Whether the details panel is collapsed (controlled). */\n  collapsed?: boolean;\n  /**\n   * Default value for the collapsed state (uncontrolled).\n   * @defaultValue false\n   */\n  defaultCollapsed?: boolean;\n  /** Fired when the collapsed state changes or should change. */\n  onCollapsedChange?: (value: boolean) => void;\n  /** The current layout mode of the details panel (controlled). */\n  layout?: LayoutMode;\n  /**\n   * Default layout mode of the details panel (uncontrolled).\n   * @defaultValue 'split'\n   */\n  defaultLayout?: LayoutMode;\n  /** Fired when the layout mode changes or should change. */\n  onLayoutChange?: (value: LayoutMode) => void;\n  /**\n   * Container width in pixels below which the details panel renders as an overlay instead of a split layout.\n   * @defaultValue 600\n   */\n  breakpoint?: number;\n}\nconst DetailsSlotBase = memo(\n  forwardRef<HTMLDivElement, DetailsProps>((_props, _ref) => null),\n);\n\n/** @internal */\nexport const DetailsSlot = Object.assign(DetailsSlotBase, {\n  ControlBar: DetailsControlBar,\n});\n\nexport type { DetailsControlBarProps };\n\n/** @internal */\nexport type ContentProps = SplitContentProps;\n/** @internal */\nexport const ContentSlot = memo(\n  forwardRef<HTMLDivElement, ContentProps>((_props, _ref) => null),\n);\n\nfunction isDetailsSlot(\n  element: ReactElement,\n): element is ReactElement<DetailsProps> {\n  return element.type === DetailsSlot;\n}\n\nfunction isContentSlot(\n  element: ReactElement,\n): element is ReactElement<ContentProps> {\n  return element.type === ContentSlot;\n}\n\n/** @internal */\nexport interface ExtractedDetailsSlot {\n  children?: ReactNode;\n  config: {\n    minWidth: PanelWidth;\n    maxWidth: PanelWidth;\n    defaultWidth: PanelWidth;\n    resizable: boolean;\n    collapsed?: boolean;\n    defaultCollapsed: boolean;\n    onCollapsedChange?: (value: boolean) => void;\n    layout?: LayoutMode;\n    defaultLayout: LayoutMode;\n    onLayoutChange?: (value: LayoutMode) => void;\n    breakpoint: number;\n    onResize?: (value: number) => void;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport interface ExtractedContentSlot {\n  children?: ReactNode;\n  config: { minWidth: PanelWidth };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport function extractSlotsProps(children: ReactNode): {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n} {\n  let details: ExtractedDetailsSlot | null = null;\n  let content: ExtractedContentSlot | null = null;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isDetailsSlot(child)) {\n      if (details) {\n        throw new Error('DetailsLayout: only one Details slot is allowed');\n      }\n\n      const {\n        children: detailsChildren,\n        minWidth = 320,\n        maxWidth = '50%',\n        defaultWidth = '25%',\n        resizable = true,\n        collapsed,\n        defaultCollapsed = false,\n        onCollapsedChange,\n        layout,\n        defaultLayout = 'split',\n        onLayoutChange,\n        breakpoint = 600,\n        onResize,\n        ...domProps\n      } = child.props;\n\n      details = {\n        children: detailsChildren,\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n        },\n        domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isContentSlot(child)) {\n      if (content) {\n        throw new Error('DetailsLayout: only one Content slot is allowed');\n      }\n\n      const {\n        children: contentChildren,\n        minWidth = 0,\n        ...domProps\n      } = child.props;\n\n      content = {\n        children: contentChildren,\n        config: { minWidth },\n        domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n  });\n\n  if (!content) {\n    throw new Error('DetailsLayout: Content slot is required');\n  }\n\n  return { details, content };\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP;AAAA,EACE;AAAA,OAEK;AAmCP,MAAM,kBAAkB;AAAA,EACtB,WAAyC,CAAC,QAAQ,SAAS,IAAI;AACjE;AAGO,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,YAAY;AACd,CAAC;AAOM,MAAM,cAAc;AAAA,EACzB,WAAyC,CAAC,QAAQ,SAAS,IAAI;AACjE;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAgCO,SAAS,kBAAkB,UAGhC;AACA,MAAI,UAAuC;AAC3C,MAAI,UAAuC;AAE3C,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,YAAY;AAAA,QACZ;AAAA,QACA,mBAAmB;AAAA,QACnB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS;AAAA,QACnB;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC3D;AAEA,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  memo,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport {\n  DetailsControlBar,\n  type DetailsControlBarProps,\n} from './DetailsControlBar.js';\nimport type { LayoutMode } from './DetailsLayoutContext.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type {\n  PanelProps as SplitPanelProps,\n  ContentProps as SplitContentProps,\n} from '../../split-layout/SplitLayout.js';\nimport type { PanelWidth } from '../../split-layout/width-utils.js';\nimport {\n  pageLayoutContentDefaults,\n  pageLayoutDetailsDefaults,\n} from '../shared/slot-defaults.js';\n\n/** @internal */\nexport interface DetailsProps extends SplitPanelProps, MaskingProps {\n  /** Whether the details panel is collapsed (controlled). */\n  collapsed?: boolean;\n  /**\n   * Default value for the collapsed state (uncontrolled).\n   * @defaultValue false\n   */\n  defaultCollapsed?: boolean;\n  /** Fired when the collapsed state changes or should change. */\n  onCollapsedChange?: (value: boolean) => void;\n  /** The current layout mode of the details panel (controlled). */\n  layout?: LayoutMode;\n  /**\n   * Default layout mode of the details panel (uncontrolled).\n   * @defaultValue 'split'\n   */\n  defaultLayout?: LayoutMode;\n  /** Fired when the layout mode changes or should change. */\n  onLayoutChange?: (value: LayoutMode) => void;\n  /**\n   * Container width in pixels below which the details panel renders as an overlay instead of a split layout.\n   * @defaultValue 600\n   */\n  breakpoint?: number;\n}\nconst DetailsSlotBase = memo(\n  forwardRef<HTMLDivElement, DetailsProps>((_props, _ref) => null),\n);\n\n/** @internal */\nexport const DetailsSlot = Object.assign(DetailsSlotBase, {\n  ControlBar: DetailsControlBar,\n});\n\nexport type { DetailsControlBarProps };\n\n/** @internal */\nexport type ContentProps = SplitContentProps;\n/** @internal */\nexport const ContentSlot = memo(\n  forwardRef<HTMLDivElement, ContentProps>((_props, _ref) => null),\n);\n\nfunction isDetailsSlot(\n  element: ReactElement,\n): element is ReactElement<DetailsProps> {\n  return element.type === DetailsSlot;\n}\n\nfunction isContentSlot(\n  element: ReactElement,\n): element is ReactElement<ContentProps> {\n  return element.type === ContentSlot;\n}\n\n/** @internal */\nexport interface ExtractedDetailsSlot {\n  children?: ReactNode;\n  config: {\n    minWidth: PanelWidth;\n    maxWidth: PanelWidth;\n    defaultWidth: PanelWidth;\n    resizable: boolean;\n    collapsed?: boolean;\n    defaultCollapsed: boolean;\n    onCollapsedChange?: (value: boolean) => void;\n    layout?: LayoutMode;\n    defaultLayout: LayoutMode;\n    onLayoutChange?: (value: LayoutMode) => void;\n    breakpoint: number;\n    onResize?: (value: number) => void;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport interface ExtractedContentSlot {\n  children?: ReactNode;\n  config: { minWidth: PanelWidth };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport function extractSlotsProps(children: ReactNode): {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n} {\n  let details: ExtractedDetailsSlot | null = null;\n  let content: ExtractedContentSlot | null = null;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isDetailsSlot(child)) {\n      if (details) {\n        throw new Error('DetailsLayout: only one Details slot is allowed');\n      }\n\n      const {\n        children: detailsChildren,\n        minWidth = pageLayoutDetailsDefaults.minWidth,\n        maxWidth = pageLayoutDetailsDefaults.maxWidth,\n        defaultWidth = pageLayoutDetailsDefaults.defaultWidth,\n        resizable = pageLayoutDetailsDefaults.resizable,\n        collapsed,\n        defaultCollapsed = pageLayoutDetailsDefaults.defaultCollapsed,\n        onCollapsedChange,\n        layout,\n        defaultLayout = pageLayoutDetailsDefaults.defaultLayout,\n        onLayoutChange,\n        breakpoint = pageLayoutDetailsDefaults.breakpoint,\n        onResize,\n        ...domProps\n      } = child.props;\n\n      details = {\n        children: detailsChildren,\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n        },\n        domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isContentSlot(child)) {\n      if (content) {\n        throw new Error('DetailsLayout: only one Content slot is allowed');\n      }\n\n      const {\n        children: contentChildren,\n        minWidth = pageLayoutContentDefaults.minWidth,\n        ...domProps\n      } = child.props;\n\n      content = {\n        children: contentChildren,\n        config: { minWidth },\n        domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n  });\n\n  if (!content) {\n    throw new Error('DetailsLayout: Content slot is required');\n  }\n\n  return { details, content };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP;AAAA,EACE;AAAA,OAEK;AAQP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA4BP,MAAM,kBAAkB;AAAA,EACtB,WAAyC,CAAC,QAAQ,SAAS,IAAI;AACjE;AAGO,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,YAAY;AACd,CAAC;AAOM,MAAM,cAAc;AAAA,EACzB,WAAyC,CAAC,QAAQ,SAAS,IAAI;AACjE;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAgCO,SAAS,kBAAkB,UAGhC;AACA,MAAI,UAAuC;AAC3C,MAAI,UAAuC;AAE3C,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,WAAW,0BAA0B;AAAA,QACrC,WAAW,0BAA0B;AAAA,QACrC,eAAe,0BAA0B;AAAA,QACzC,YAAY,0BAA0B;AAAA,QACtC;AAAA,QACA,mBAAmB,0BAA0B;AAAA,QAC7C;AAAA,QACA;AAAA,QACA,gBAAgB,0BAA0B;AAAA,QAC1C;AAAA,QACA,aAAa,0BAA0B;AAAA,QACvC;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,WAAW,0BAA0B;AAAA,QACrC,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS;AAAA,QACnB;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC3D;AAEA,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/useLayoutState.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useResizeObserver from "use-resize-observer";
 import { useControllableState } from "../../../core/hooks/useControllableState.js";
 function useLayoutState({
@@ -16,14 +16,31 @@ function useLayoutState({
     defaultValue: details?.config.defaultCollapsed ?? false,
     onChange: details?.config.onCollapsedChange
   });
+  const hadConfigOnMount = useRef(details !== null);
+  const hasSyncedConfig = useRef(false);
+  useEffect(() => {
+    if (hadConfigOnMount.current || !details || hasSyncedConfig.current) {
+      return;
+    }
+    hasSyncedConfig.current = true;
+    if (details.config.layout === void 0 && details.config.defaultLayout) {
+      setPreferredLayoutMode(details.config.defaultLayout);
+    }
+    if (details.config.collapsed === void 0 && details.config.defaultCollapsed) {
+      setCollapsed(details.config.defaultCollapsed);
+    }
+  }, [details, setPreferredLayoutMode, setCollapsed]);
   const prevBelowBreakpointRef = useRef(null);
   useResizeObserver({
     ref: containerRef,
     onResize: (size) => {
-      if (!size.width || !details) {
+      if (!size.width) {
         return;
       }
       setContainerWidth(size.width);
+      if (!details) {
+        return;
+      }
       const isBelowBreakpoint2 = size.width < details.config.breakpoint;
       const prevBelowBreakpoint = prevBelowBreakpointRef.current;
       prevBelowBreakpointRef.current = isBelowBreakpoint2;

package/esm/layouts/page-layout/details-layout/useLayoutState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/useLayoutState.ts"],
-  "sourcesContent": ["import { useRef, useState, type RefObject } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { ExtractedDetailsSlot } from './slots.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\n\ntype RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport function useLayoutState({\n  details,\n  containerRef,\n}: {\n  details: ExtractedDetailsSlot | null;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [preferredLayoutMode, setPreferredLayoutMode] = useControllableState({\n    value: details?.config.layout,\n    defaultValue: details?.config.defaultLayout,\n    onChange: details?.config.onLayoutChange,\n  });\n\n  const [collapsed, setCollapsed] = useControllableState({\n    value: details?.config.collapsed,\n    defaultValue: details?.config.defaultCollapsed ?? false,\n    onChange: details?.config.onCollapsedChange,\n  });\n\n  /**\n   * Tracks whether the container was below the breakpoint on the previous\n   * resize event. `null` means no measurement has been taken yet.\n   *\n   * We only force-collapse/expand when the container *crosses* the\n   * breakpoint threshold. Without this guard, any resize event while the\n   * container stays on the same side of the breakpoint (e.g. a re-measure\n   * triggered by a DOM layout change after a mode switch) would call\n   * `setCollapsed(false)` and silently undo a user-initiated collapse.\n   */\n  const prevBelowBreakpointRef = useRef<boolean | null>(null);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: (size) => {\n      if (!size.width || !details) {\n        return;\n      }\n\n      setContainerWidth(size.width);\n\n      const isBelowBreakpoint = size.width < details.config.breakpoint;\n      const prevBelowBreakpoint = prevBelowBreakpointRef.current;\n      prevBelowBreakpointRef.current = isBelowBreakpoint;\n\n      if (prevBelowBreakpoint === isBelowBreakpoint) {\n        return;\n      }\n\n      setCollapsed(isBelowBreakpoint);\n    },\n  });\n\n  let isBelowBreakpoint = false;\n  if (\n    details &&\n    containerWidth !== 0 &&\n    containerWidth < details.config.breakpoint\n  ) {\n    isBelowBreakpoint = true;\n  }\n\n  let mode: RenderedLayout = !details\n    ? 'collapsed'\n    : preferredLayoutMode ?? 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    containerWidth,\n    collapsed,\n    setCollapsed,\n    preferredLayoutMode,\n    setPreferredLayoutMode,\n    mode,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,QAAQ,gBAAgC;AACjD,OAAO,uBAAuB;AAG9B,SAAS,4BAA4B;AAK9B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,qBAAqB;AAAA,IACzE,OAAO,SAAS,OAAO;AAAA,IACvB,cAAc,SAAS,OAAO;AAAA,IAC9B,UAAU,SAAS,OAAO;AAAA,EAC5B,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,OAAO,SAAS,OAAO;AAAA,IACvB,cAAc,SAAS,OAAO,oBAAoB;AAAA,IAClD,UAAU,SAAS,OAAO;AAAA,EAC5B,CAAC;AAYD,QAAM,yBAAyB,OAAuB,IAAI;AAE1D,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS;AAClB,UAAI,CAAC,KAAK,SAAS,CAAC,SAAS;AAC3B;AAAA,MACF;AAEA,wBAAkB,KAAK,KAAK;AAE5B,YAAMA,qBAAoB,KAAK,QAAQ,QAAQ,OAAO;AACtD,YAAM,sBAAsB,uBAAuB;AACnD,6BAAuB,UAAUA;AAEjC,UAAI,wBAAwBA,oBAAmB;AAC7C;AAAA,MACF;AAEA,mBAAaA,kBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AAED,MAAI,oBAAoB;AACxB,MACE,WACA,mBAAmB,KACnB,iBAAiB,QAAQ,OAAO,YAChC;AACA,wBAAoB;AAAA,EACtB;AAEA,MAAI,OAAuB,CAAC,UACxB,cACA,uBAAuB;AAC3B,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,MAAI,mBAAmB;AACrB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useEffect, useRef, useState, type RefObject } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { RenderedLayout } from './DetailsLayoutContext.js';\nimport type { ExtractedDetailsSlot } from './slots.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\n\n/** @internal */\nexport function useLayoutState({\n  details,\n  containerRef,\n}: {\n  details: ExtractedDetailsSlot | null;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [preferredLayoutMode, setPreferredLayoutMode] = useControllableState({\n    value: details?.config.layout,\n    defaultValue: details?.config.defaultLayout,\n    onChange: details?.config.onLayoutChange,\n  });\n\n  const [collapsed, setCollapsed] = useControllableState({\n    value: details?.config.collapsed,\n    defaultValue: details?.config.defaultCollapsed ?? false,\n    onChange: details?.config.onCollapsedChange,\n  });\n\n  // In PageLayout, DetailsLayout renders before PageLayout.Details registers\n  // its slot config via the registry, so `details` is initially null.\n  // useControllableState initializes useState once on mount -- if the\n  // defaultValue is undefined at that point, it stays undefined forever.\n  // When config first arrives (null -> non-null) we sync the uncontrolled\n  // defaults so the state matches what the consumer actually specified.\n  const hadConfigOnMount = useRef(details !== null);\n  const hasSyncedConfig = useRef(false);\n  useEffect(() => {\n    if (hadConfigOnMount.current || !details || hasSyncedConfig.current) {\n      return;\n    }\n    hasSyncedConfig.current = true;\n\n    if (details.config.layout === undefined && details.config.defaultLayout) {\n      setPreferredLayoutMode(details.config.defaultLayout);\n    }\n\n    if (\n      details.config.collapsed === undefined &&\n      details.config.defaultCollapsed\n    ) {\n      setCollapsed(details.config.defaultCollapsed);\n    }\n  }, [details, setPreferredLayoutMode, setCollapsed]);\n\n  /**\n   * Tracks whether the container was below the breakpoint on the previous\n   * resize event. `null` means no measurement has been taken yet.\n   *\n   * We only force-collapse/expand when the container *crosses* the\n   * breakpoint threshold. Without this guard, any resize event while the\n   * container stays on the same side of the breakpoint (e.g. a re-measure\n   * triggered by a DOM layout change after a mode switch) would call\n   * `setCollapsed(false)` and silently undo a user-initiated collapse.\n   */\n  const prevBelowBreakpointRef = useRef<boolean | null>(null);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: (size) => {\n      if (!size.width) {\n        return;\n      }\n\n      setContainerWidth(size.width);\n\n      if (!details) {\n        return;\n      }\n\n      const isBelowBreakpoint = size.width < details.config.breakpoint;\n      const prevBelowBreakpoint = prevBelowBreakpointRef.current;\n      prevBelowBreakpointRef.current = isBelowBreakpoint;\n\n      if (prevBelowBreakpoint === isBelowBreakpoint) {\n        return;\n      }\n\n      setCollapsed(isBelowBreakpoint);\n    },\n  });\n\n  let isBelowBreakpoint = false;\n  if (\n    details &&\n    containerWidth !== 0 &&\n    containerWidth < details.config.breakpoint\n  ) {\n    isBelowBreakpoint = true;\n  }\n\n  let mode: RenderedLayout = !details\n    ? 'collapsed'\n    : preferredLayoutMode ?? 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    containerWidth,\n    collapsed,\n    setCollapsed,\n    preferredLayoutMode,\n    setPreferredLayoutMode,\n    mode,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,WAAW,QAAQ,gBAAgC;AAC5D,OAAO,uBAAuB;AAI9B,SAAS,4BAA4B;AAG9B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,qBAAqB;AAAA,IACzE,OAAO,SAAS,OAAO;AAAA,IACvB,cAAc,SAAS,OAAO;AAAA,IAC9B,UAAU,SAAS,OAAO;AAAA,EAC5B,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,OAAO,SAAS,OAAO;AAAA,IACvB,cAAc,SAAS,OAAO,oBAAoB;AAAA,IAClD,UAAU,SAAS,OAAO;AAAA,EAC5B,CAAC;AAQD,QAAM,mBAAmB,OAAO,YAAY,IAAI;AAChD,QAAM,kBAAkB,OAAO,KAAK;AACpC,YAAU,MAAM;AACd,QAAI,iBAAiB,WAAW,CAAC,WAAW,gBAAgB,SAAS;AACnE;AAAA,IACF;AACA,oBAAgB,UAAU;AAE1B,QAAI,QAAQ,OAAO,WAAW,UAAa,QAAQ,OAAO,eAAe;AACvE,6BAAuB,QAAQ,OAAO,aAAa;AAAA,IACrD;AAEA,QACE,QAAQ,OAAO,cAAc,UAC7B,QAAQ,OAAO,kBACf;AACA,mBAAa,QAAQ,OAAO,gBAAgB;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,SAAS,wBAAwB,YAAY,CAAC;AAYlD,QAAM,yBAAyB,OAAuB,IAAI;AAE1D,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS;AAClB,UAAI,CAAC,KAAK,OAAO;AACf;AAAA,MACF;AAEA,wBAAkB,KAAK,KAAK;AAE5B,UAAI,CAAC,SAAS;AACZ;AAAA,MACF;AAEA,YAAMA,qBAAoB,KAAK,QAAQ,QAAQ,OAAO;AACtD,YAAM,sBAAsB,uBAAuB;AACnD,6BAAuB,UAAUA;AAEjC,UAAI,wBAAwBA,oBAAmB;AAC7C;AAAA,MACF;AAEA,mBAAaA,kBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AAED,MAAI,oBAAoB;AACxB,MACE,WACA,mBAAmB,KACnB,iBAAiB,QAAQ,OAAO,YAChC;AACA,wBAAoB;AAAA,EACtB;AAEA,MAAI,OAAuB,CAAC,UACxB,cACA,uBAAuB;AAC3B,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,MAAI,mBAAmB;AACrB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["isBelowBreakpoint"]
 }

package/esm/layouts/page-layout/shared/PageLayoutPortalContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+const PageLayoutPortalContext = createContext(null);
+function usePageLayoutPortalContext() {
+  const ctx = useContext(PageLayoutPortalContext);
+  if (ctx === null) {
+    throw new Error(
+      "PageLayout slot components (Header, Sidebar, Content, Details) must be rendered inside a <PageLayout>."
+    );
+  }
+  return ctx;
+}
+export {
+  PageLayoutPortalContext,
+  usePageLayoutPortalContext
+};
+//# sourceMappingURL=PageLayoutPortalContext.js.map

package/esm/layouts/page-layout/shared/PageLayoutPortalContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/shared/PageLayoutPortalContext.ts"],
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport type { SlotRegistry } from './slot-registry.js';\nexport type {\n  ContentSlotConfig,\n  DetailsSlotConfig,\n  HeaderSlotConfig,\n  SidebarSlotConfig,\n} from './slot-config.js';\n\n/** @internal */\nexport interface PageLayoutPortalContextValue {\n  hosts: {\n    header: HTMLDivElement;\n    sidebar: HTMLDivElement;\n    content: HTMLDivElement;\n    details: HTMLDivElement;\n  };\n  registry: SlotRegistry;\n}\n\n/** @internal */\nexport const PageLayoutPortalContext =\n  createContext<PageLayoutPortalContextValue | null>(null);\n\n/** @internal */\nexport function usePageLayoutPortalContext(): PageLayoutPortalContextValue {\n  const ctx = useContext(PageLayoutPortalContext);\n  if (ctx === null) {\n    throw new Error(\n      'PageLayout slot components (Header, Sidebar, Content, Details) must be rendered inside a <PageLayout>.',\n    );\n  }\n  return ctx;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAsBnC,MAAM,0BACX,cAAmD,IAAI;AAGlD,SAAS,6BAA2D;AACzE,QAAM,MAAM,WAAW,uBAAuB;AAC9C,MAAI,QAAQ,MAAM;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/esm/layouts/page-layout/shared/TeleportTarget.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+function TeleportTarget({ host }) {
+  const containerRef = useRef(null);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (container && host.parentNode !== container) {
+      container.appendChild(host);
+    }
+  });
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { display: "contents" } });
+}
+export {
+  TeleportTarget
+};
+//# sourceMappingURL=TeleportTarget.js.map

package/esm/layouts/page-layout/shared/TeleportTarget.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/shared/TeleportTarget.tsx"],
+  "sourcesContent": ["import { useLayoutEffect, useRef } from 'react';\n\n/**\n * Places a stable host node into the DOM at this component's mount point.\n * Uses `appendChild` in a `useLayoutEffect` so the host node is moved\n * (not cloned) when `TeleportTarget` remounts in a different position,\n * preserving the React subtree portaled into the host.\n *\n * `useTeleport().Target` uses this component internally. `TeleportTarget`\n * exists as the direct component form for call sites that manage their own\n * host node (e.g. `PageLayout`, which holds hosts in context).\n *\n * @internal\n */\nexport function TeleportTarget({ host }: { host: HTMLDivElement }) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (container && host.parentNode !== container) {\n      container.appendChild(host);\n    }\n  });\n\n  return <div ref={containerRef} style={{ display: 'contents' }} />;\n}\n"],
+  "mappings": "AAwBS;AAxBT,SAAS,iBAAiB,cAAc;AAcjC,SAAS,eAAe,EAAE,KAAK,GAA6B;AACjE,QAAM,eAAe,OAAuB,IAAI;AAEhD,kBAAgB,MAAM;AACpB,UAAM,YAAY,aAAa;AAC/B,QAAI,aAAa,KAAK,eAAe,WAAW;AAC9C,gBAAU,YAAY,IAAI;AAAA,IAC5B;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,SAAI,KAAK,cAAc,OAAO,EAAE,SAAS,WAAW,GAAG;AACjE;",
+  "names": []
+}

package/esm/layouts/page-layout/shared/portal-slots.js

@@ -0,0 +1,144 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useSyncExternalStore
+} from "react";
+import { createPortal } from "react-dom";
+import { usePageLayoutPortalContext } from "./PageLayoutPortalContext.js";
+import {
+  pageLayoutContentDefaults,
+  pageLayoutDetailsDefaults,
+  pageLayoutSidebarDefaults
+} from "./slot-defaults.js";
+import { useSafeLayoutEffect } from "../../../core/hooks/useSafeLayoutEffect.js";
+import { DetailsControlBar } from "../details-layout/DetailsControlBar.js";
+import { DetailsLayoutContext } from "../details-layout/DetailsLayoutContext.js";
+const toRef = (ref) => ref ?? void 0;
+const PageLayoutHeader = forwardRef(
+  function PageLayoutHeader2({ children, ...domProps }, ref) {
+    const { hosts, registry } = usePageLayoutPortalContext();
+    useSafeLayoutEffect(() => {
+      registry.register("header", { domProps, ref: toRef(ref) });
+      return () => registry.unregister("header");
+    });
+    return createPortal(children, hosts.header);
+  }
+);
+const PageLayoutSidebar = forwardRef(
+  function PageLayoutSidebar2({
+    children,
+    defaultWidth = pageLayoutSidebarDefaults.defaultWidth,
+    minWidth = pageLayoutSidebarDefaults.minWidth,
+    maxWidth = pageLayoutSidebarDefaults.maxWidth,
+    resizable = pageLayoutSidebarDefaults.resizable,
+    collapsed,
+    defaultCollapsed = pageLayoutSidebarDefaults.defaultCollapsed,
+    onCollapsedChange,
+    integratedControls = pageLayoutSidebarDefaults.integratedControls,
+    breakpoint = pageLayoutSidebarDefaults.breakpoint,
+    onResize,
+    id: _id,
+    ...domProps
+  }, ref) {
+    const { hosts, registry } = usePageLayoutPortalContext();
+    useSafeLayoutEffect(() => {
+      registry.register("sidebar", {
+        config: {
+          defaultWidth,
+          minWidth,
+          maxWidth,
+          resizable,
+          collapsed,
+          defaultCollapsed,
+          onCollapsedChange,
+          integratedControls,
+          breakpoint,
+          onResize
+        },
+        domProps,
+        ref: toRef(ref)
+      });
+      return () => registry.unregister("sidebar");
+    });
+    return createPortal(children, hosts.sidebar);
+  }
+);
+const PageLayoutContent = forwardRef(
+  function PageLayoutContent2({
+    children,
+    minWidth = pageLayoutContentDefaults.minWidth,
+    ...domProps
+  }, ref) {
+    const { hosts, registry } = usePageLayoutPortalContext();
+    useSafeLayoutEffect(() => {
+      registry.register("content", {
+        config: { minWidth },
+        domProps,
+        ref: toRef(ref)
+      });
+      return () => registry.unregister("content");
+    });
+    return createPortal(children, hosts.content);
+  }
+);
+const PageLayoutDetails = forwardRef(
+  function PageLayoutDetails2({
+    children,
+    minWidth = pageLayoutDetailsDefaults.minWidth,
+    maxWidth = pageLayoutDetailsDefaults.maxWidth,
+    defaultWidth = pageLayoutDetailsDefaults.defaultWidth,
+    resizable = pageLayoutDetailsDefaults.resizable,
+    collapsed,
+    defaultCollapsed = pageLayoutDetailsDefaults.defaultCollapsed,
+    onCollapsedChange,
+    layout,
+    defaultLayout = pageLayoutDetailsDefaults.defaultLayout,
+    onLayoutChange,
+    breakpoint = pageLayoutDetailsDefaults.breakpoint,
+    onResize,
+    ...domProps
+  }, ref) {
+    const { hosts, registry } = usePageLayoutPortalContext();
+    useSafeLayoutEffect(() => {
+      registry.register("details", {
+        config: {
+          minWidth,
+          maxWidth,
+          defaultWidth,
+          resizable,
+          collapsed,
+          defaultCollapsed,
+          onCollapsedChange,
+          layout,
+          defaultLayout,
+          onLayoutChange,
+          breakpoint,
+          onResize
+        },
+        domProps,
+        ref: toRef(ref)
+      });
+      return () => registry.unregister("details");
+    });
+    const detailsLayoutContext = useSyncExternalStore(
+      registry.subscribe,
+      () => registry.getSnapshot().detailsLayoutContext
+    );
+    return createPortal(
+      /* @__PURE__ */ jsx(DetailsLayoutContext.Provider, { value: detailsLayoutContext, children }),
+      hosts.details
+    );
+  }
+);
+const PageLayoutDetailsWithControlBar = Object.assign(
+  PageLayoutDetails,
+  { ControlBar: DetailsControlBar }
+);
+export {
+  PageLayoutContent,
+  PageLayoutDetails,
+  PageLayoutDetailsWithControlBar,
+  PageLayoutHeader,
+  PageLayoutSidebar
+};
+//# sourceMappingURL=portal-slots.js.map

package/esm/layouts/page-layout/shared/portal-slots.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/shared/portal-slots.tsx"],
+  "sourcesContent": ["import {\n  forwardRef,\n  useSyncExternalStore,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport {\n  pageLayoutContentDefaults,\n  pageLayoutDetailsDefaults,\n  pageLayoutSidebarDefaults,\n} from './slot-defaults.js';\nimport { useSafeLayoutEffect } from '../../../core/hooks/useSafeLayoutEffect.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport { DetailsControlBar } from '../details-layout/DetailsControlBar.js';\nimport { DetailsLayoutContext } from '../details-layout/DetailsLayoutContext.js';\nimport type { DetailsProps, ContentProps } from '../details-layout/slots.js';\nimport type { SidebarProps } from '../sidebar-layout/slots.js';\n\nconst toRef = <T,>(ref: ForwardedRef<T>) => ref ?? undefined;\n\n/**\n * PageLayout.Header - portals children into the header host node and\n * registers layout config via the slot registry in a layout effect.\n * @internal\n */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    MaskingProps,\n    ComponentPropsWithoutRef<'div'> {}\n\nexport const PageLayoutHeader = forwardRef<HTMLDivElement, HeaderProps>(\n  function PageLayoutHeader(\n    { children, ...domProps }: HeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n\n    useSafeLayoutEffect(() => {\n      registry.register('header', { domProps, ref: toRef(ref) });\n      return () => registry.unregister('header');\n    });\n\n    return createPortal(children, hosts.header);\n  },\n);\n\n/**\n * PageLayout.Sidebar - portals children into the sidebar host node and\n * registers sidebar config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutSidebar = forwardRef<HTMLDivElement, SidebarProps>(\n  function PageLayoutSidebar(\n    {\n      children,\n      defaultWidth = pageLayoutSidebarDefaults.defaultWidth,\n      minWidth = pageLayoutSidebarDefaults.minWidth,\n      maxWidth = pageLayoutSidebarDefaults.maxWidth,\n      resizable = pageLayoutSidebarDefaults.resizable,\n      collapsed,\n      defaultCollapsed = pageLayoutSidebarDefaults.defaultCollapsed,\n      onCollapsedChange,\n      integratedControls = pageLayoutSidebarDefaults.integratedControls,\n      breakpoint = pageLayoutSidebarDefaults.breakpoint,\n      onResize,\n      id: _id,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n\n    useSafeLayoutEffect(() => {\n      registry.register('sidebar', {\n        config: {\n          defaultWidth,\n          minWidth,\n          maxWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          integratedControls,\n          breakpoint,\n          onResize,\n        },\n        domProps,\n        ref: toRef(ref),\n      });\n      return () => registry.unregister('sidebar');\n    });\n\n    return createPortal(children, hosts.sidebar);\n  },\n);\n\n/**\n * PageLayout.Content - portals children into the content host node and\n * registers content config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutContent = forwardRef<HTMLDivElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = pageLayoutContentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n\n    useSafeLayoutEffect(() => {\n      registry.register('content', {\n        config: { minWidth },\n        domProps,\n        ref: toRef(ref),\n      });\n      return () => registry.unregister('content');\n    });\n\n    return createPortal(children, hosts.content);\n  },\n);\n\n/**\n * PageLayout.Details - portals children into the details host node and\n * registers details config via the slot registry in a layout effect.\n *\n * Children are wrapped in `DetailsLayoutContext.Provider` using the bridged\n * context value from the registry. Without this, components like\n * `DetailsControlBar` would receive `undefined` from `useDetailsLayoutContext`\n * because the portal originates outside `DetailsLayoutContext.Provider`.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLDivElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = pageLayoutDetailsDefaults.minWidth,\n      maxWidth = pageLayoutDetailsDefaults.maxWidth,\n      defaultWidth = pageLayoutDetailsDefaults.defaultWidth,\n      resizable = pageLayoutDetailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = pageLayoutDetailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      layout,\n      defaultLayout = pageLayoutDetailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = pageLayoutDetailsDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n\n    useSafeLayoutEffect(() => {\n      registry.register('details', {\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n        },\n        domProps,\n        ref: toRef(ref),\n      });\n      return () => registry.unregister('details');\n    });\n\n    const detailsLayoutContext = useSyncExternalStore(\n      registry.subscribe,\n      () => registry.getSnapshot().detailsLayoutContext,\n    );\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={detailsLayoutContext}>\n        {children}\n      </DetailsLayoutContext.Provider>,\n      hosts.details,\n    );\n  },\n);\n\nexport const PageLayoutDetailsWithControlBar = Object.assign(\n  PageLayoutDetails,\n  { ControlBar: DetailsControlBar },\n);\n"],
+  "mappings": "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",
+  "names": ["PageLayoutHeader", "PageLayoutSidebar", "PageLayoutContent", "PageLayoutDetails"]
+}

package/esm/layouts/page-layout/shared/slot-config.js

@@ -0,0 +1 @@
+//# sourceMappingURL=slot-config.js.map