@dynatrace/strato-components 3.8.0 → 3.9.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/shared/portal-slots.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport {\n  contentDefaults,\n  detailsDefaults,\n  sidebarDefaults,\n} from './slot-defaults.js';\nimport { useRegisteredSlot } from './useRegisteredSlot.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-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 * Returns a stable reference to `value` that only changes identity when one of\n * its own enumerable keys changes (shallow equality). Used to keep registry\n * entries from churning when callers spread anonymous objects (e.g. `domProps`)\n * into them on every render.\n */\nfunction useShallowStable<T extends Record<string, unknown>>(value: T): T {\n  const ref = useRef<T>(value);\n  const prev = ref.current;\n  const prevKeys = Object.keys(prev);\n  const nextKeys = Object.keys(value);\n  let equal = prevKeys.length === nextKeys.length;\n  if (equal) {\n    for (const key of nextKeys) {\n      if (!Object.is(prev[key], value[key])) {\n        equal = false;\n        break;\n      }\n    }\n  }\n  if (!equal) {\n    ref.current = value;\n  }\n  return ref.current;\n}\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 * @public\n */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nexport const PageLayoutHeader = forwardRef<HTMLDivElement, HeaderProps>(\n  function PageLayoutHeader(\n    { children, ...domProps }: HeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({ domProps: stableDomProps, ref: refValue }),\n      [stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('header', config);\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 = sidebarDefaults.defaultWidth,\n      minWidth = sidebarDefaults.minWidth,\n      maxWidth = sidebarDefaults.maxWidth,\n      resizable = sidebarDefaults.resizable,\n      collapsed,\n      defaultCollapsed = sidebarDefaults.defaultCollapsed,\n      onCollapsedChange,\n      breakpoint = sidebarDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          defaultWidth,\n          minWidth,\n          maxWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        defaultWidth,\n        minWidth,\n        maxWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('sidebar', config);\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<HTMLElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = contentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: { minWidth },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [minWidth, stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('content', config);\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 value\n * bridged through the slot registry. Without this, `DetailsControlBar` would\n * fall back to the context's default value because the portal originates\n * outside the provider placed by `DetailsLayoutInner`.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLDivElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = detailsDefaults.minWidth,\n      maxWidth = detailsDefaults.maxWidth,\n      defaultWidth = detailsDefaults.defaultWidth,\n      resizable = detailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = detailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\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: stableDomProps,\n        ref: refValue,\n      }),\n      [\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        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('details', config);\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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",
+  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport {\n  contentDefaults,\n  detailsDefaults,\n  sidebarDefaults,\n} from './slot-defaults.js';\nimport { useRegisteredSlot } from './useRegisteredSlot.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport { DetailsControlBar } from '../details-layout/DetailsControlBar.js';\nimport {\n  DetailsLayoutContext,\n  type DetailsLayoutContextValue,\n} 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\nconst noop = () => undefined;\n\n/**\n * Placeholder context used while the real `DetailsLayoutInner` value is still\n * being bridged through the slot registry (it is published one commit late via\n * a layout effect). Keeps `DetailsControlBar` from reading a null context on\n * first render when it is correctly placed inside the portaled details\n * children. Replaced by the live value on the next commit.\n */\nconst PENDING_DETAILS_CONTEXT: DetailsLayoutContextValue = {\n  collapsed: false,\n  setCollapsed: noop,\n  preferredLayout: 'split',\n  setPreferredLayout: noop,\n  mode: 'split',\n};\n\n/**\n * Returns a stable reference to `value` that only changes identity when one of\n * its own enumerable keys changes (shallow equality). Used to keep registry\n * entries from churning when callers spread anonymous objects (e.g. `domProps`)\n * into them on every render.\n */\nfunction useShallowStable<T extends Record<string, unknown>>(value: T): T {\n  const ref = useRef<T>(value);\n  const prev = ref.current;\n  const prevKeys = Object.keys(prev);\n  const nextKeys = Object.keys(value);\n  let equal = prevKeys.length === nextKeys.length;\n  if (equal) {\n    for (const key of nextKeys) {\n      if (!Object.is(prev[key], value[key])) {\n        equal = false;\n        break;\n      }\n    }\n  }\n  if (!equal) {\n    ref.current = value;\n  }\n  return ref.current;\n}\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 * @public\n */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nexport const PageLayoutHeader = forwardRef<HTMLDivElement, HeaderProps>(\n  function PageLayoutHeader(\n    { children, ...domProps }: HeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({ domProps: stableDomProps, ref: refValue }),\n      [stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('header', config);\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 = sidebarDefaults.defaultWidth,\n      minWidth = sidebarDefaults.minWidth,\n      maxWidth = sidebarDefaults.maxWidth,\n      resizable = sidebarDefaults.resizable,\n      collapsed,\n      defaultCollapsed = sidebarDefaults.defaultCollapsed,\n      onCollapsedChange,\n      onBreakpointTransition,\n      breakpoint = sidebarDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          defaultWidth,\n          minWidth,\n          maxWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          onBreakpointTransition,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        defaultWidth,\n        minWidth,\n        maxWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        onBreakpointTransition,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('sidebar', config);\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<HTMLElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = contentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: { minWidth },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [minWidth, stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('content', config);\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 value\n * bridged through the slot registry. Without this, `DetailsControlBar` would\n * fall back to the context's default value because the portal originates\n * outside the provider placed by `DetailsLayoutInner`.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLDivElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = detailsDefaults.minWidth,\n      maxWidth = detailsDefaults.maxWidth,\n      defaultWidth = detailsDefaults.defaultWidth,\n      resizable = detailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = detailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      onBreakpointTransition,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      width,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          onBreakpointTransition,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n          width,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        onBreakpointTransition,\n        layout,\n        defaultLayout,\n        onLayoutChange,\n        breakpoint,\n        onResize,\n        width,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('details', config);\n\n    const detailsLayoutContext = useSyncExternalStore(\n      registry.subscribe,\n      () => registry.getSnapshot().detailsLayoutContext,\n    );\n\n    // The bridged value is published one commit late (DetailsLayoutInner\n    // registers it in a layout effect). Until it arrives, provide a non-null\n    // pending value so the portaled ControlBar can read the context on first\n    // render instead of falling back to the provider default.\n    const providedContext = detailsLayoutContext ?? PENDING_DETAILS_CONTEXT;\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={providedContext}>\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": "AAuSM;AAvSN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AAE7B,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAMlC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AAIP,MAAM,QAAQ,CAAK,QAAyB,OAAO;AAEnD,MAAM,OAAO,MAAM;AASnB,MAAM,0BAAqD;AAAA,EACzD,WAAW;AAAA,EACX,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,MAAM;AACR;AAQA,SAAS,iBAAoD,OAAa;AACxE,QAAM,MAAM,OAAU,KAAK;AAC3B,QAAM,OAAO,IAAI;AACjB,QAAM,WAAW,OAAO,KAAK,IAAI;AACjC,QAAM,WAAW,OAAO,KAAK,KAAK;AAClC,MAAI,QAAQ,SAAS,WAAW,SAAS;AACzC,MAAI,OAAO;AACT,eAAW,OAAO,UAAU;AAC1B,UAAI,CAAC,OAAO,GAAG,KAAK,GAAG,GAAG,MAAM,GAAG,CAAC,GAAG;AACrC,gBAAQ;AACR;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,MAAI,CAAC,OAAO;AACV,QAAI,UAAU;AAAA,EAChB;AACA,SAAO,IAAI;AACb;AAeO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,UAAU,GAAG,SAAS,GACxB,KACA;AACA,UAAM,EAAE,MAAM,IAAI,2BAA2B;AAC7C,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO,EAAE,UAAU,gBAAgB,KAAK,SAAS;AAAA,MACjD,CAAC,gBAAgB,QAAQ;AAAA,IAC3B;AAEA,sBAAkB,UAAU,MAAM;AAElC,WAAO,aAAa,UAAU,MAAM,MAAM;AAAA,EAC5C;AACF;AAOO,MAAM,oBAAoB;AAAA,EAC/B,SAASC,mBACP;AAAA,IACE;AAAA,IACA,eAAe,gBAAgB;AAAA,IAC/B,WAAW,gBAAgB;AAAA,IAC3B,WAAW,gBAAgB;AAAA,IAC3B,YAAY,gBAAgB;AAAA,IAC5B;AAAA,IACA,mBAAmB,gBAAgB;AAAA,IACnC;AAAA,IACA;AAAA,IACA,aAAa,gBAAgB;AAAA,IAC7B;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,EAAE,MAAM,IAAI,2BAA2B;AAC7C,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU;AAAA,QACV,KAAK;AAAA,MACP;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,sBAAkB,WAAW,MAAM;AAEnC,WAAO,aAAa,UAAU,MAAM,OAAO;AAAA,EAC7C;AACF;AAOO,MAAM,oBAAoB;AAAA,EAC/B,SAASC,mBACP;AAAA,IACE;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,EAAE,MAAM,IAAI,2BAA2B;AAC7C,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,QAAQ,EAAE,SAAS;AAAA,QACnB,UAAU;AAAA,QACV,KAAK;AAAA,MACP;AAAA,MACA,CAAC,UAAU,gBAAgB,QAAQ;AAAA,IACrC;AAEA,sBAAkB,WAAW,MAAM;AAEnC,WAAO,aAAa,UAAU,MAAM,OAAO;AAAA,EAC7C;AACF;AAaO,MAAM,oBAAoB;AAAA,EAC/B,SAASC,mBACP;AAAA,IACE;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,WAAW,gBAAgB;AAAA,IAC3B,eAAe,gBAAgB;AAAA,IAC/B,YAAY,gBAAgB;AAAA,IAC5B;AAAA,IACA,mBAAmB,gBAAgB;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,gBAAgB;AAAA,IAChC;AAAA,IACA,aAAa,gBAAgB;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,EAAE,OAAO,SAAS,IAAI,2BAA2B;AACvD,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,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,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU;AAAA,QACV,KAAK;AAAA,MACP;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,sBAAkB,WAAW,MAAM;AAEnC,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,MAAM,SAAS,YAAY,EAAE;AAAA,IAC/B;AAMA,UAAM,kBAAkB,wBAAwB;AAEhD,WAAO;AAAA,MACL,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,iBACnC,UACH;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,kCAAkC,OAAO;AAAA,EACpD;AAAA,EACA,EAAE,YAAY,kBAAkB;AAClC;",
   "names": ["PageLayoutHeader", "PageLayoutSidebar", "PageLayoutContent", "PageLayoutDetails"]
 }

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

@@ -2,12 +2,15 @@ import {
   useRef,
   useState
 } from "react";
-import useResizeObserver from "use-resize-observer";
+import { useCallbackRef } from "../../../core/hooks/useCallbackRef.js";
 import { useControllableState } from "../../../core/hooks/useControllableState.js";
+import { useResizeObserver } from "../../../core/hooks/useResizeObserver.js";
 function useBreakpointCollapse({
   collapsed: collapsedProps,
   breakpoint,
-  containerRef
+  containerRef,
+  onBreakpointTransition,
+  autoCollapse
 }) {
   const [containerWidth, setContainerWidth] = useState(0);
   const [collapsed, setCollapsed] = useControllableState({
@@ -15,6 +18,8 @@ function useBreakpointCollapse({
     defaultValue: collapsedProps.defaultValue,
     onChange: collapsedProps.onChange
   });
+  const isControlled = collapsedProps.value !== void 0;
+  const emitBreakpointTransition = useCallbackRef(onBreakpointTransition);
   const prevBelowBreakpointRef = useRef(null);
   useResizeObserver({
     ref: containerRef,
@@ -29,10 +34,17 @@ function useBreakpointCollapse({
       if (prevBelowBreakpoint === isBelowBreakpoint2) {
         return;
       }
-      if (prevBelowBreakpoint === null && !(isBelowBreakpoint2 && !collapsed)) {
+      const shouldAutoCollapse = autoCollapse && !isControlled;
+      emitBreakpointTransition(isBelowBreakpoint2);
+      if (prevBelowBreakpoint === null) {
+        if (shouldAutoCollapse && isBelowBreakpoint2 && !collapsed) {
+          setCollapsed(true);
+        }
         return;
       }
-      setCollapsed(isBelowBreakpoint2);
+      if (shouldAutoCollapse) {
+        setCollapsed(isBelowBreakpoint2);
+      }
     }
   });
   const isBelowBreakpoint = containerWidth !== 0 && containerWidth < breakpoint;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/shared/useBreakpointCollapse.ts"],
-  "sourcesContent": ["import {\n  useRef,\n  useState,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\n\ninterface UseBreakpointCollapseArgs {\n  /** Controlled / uncontrolled props for the collapsed state. */\n  collapsed: {\n    value: boolean | undefined;\n    defaultValue: boolean;\n    onChange: ((value: boolean) => void) | undefined;\n  };\n  /** Container width below which the panel auto-collapses. */\n  breakpoint: number;\n  /** Container element observed for size changes. */\n  containerRef: RefObject<HTMLDivElement>;\n}\n\ninterface UseBreakpointCollapseResult {\n  /** Most recent measured container width (`0` until first measurement). */\n  containerWidth: number;\n  /** Current collapsed state (controlled value if provided). */\n  collapsed: boolean;\n  /** Setter for the collapsed state. */\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  /** True once measured and the container is narrower than `breakpoint`. */\n  isBelowBreakpoint: boolean;\n}\n\n/**\n * Tracks the container width and collapses the panel when the container\n * crosses the configured breakpoint. Shared between the details-layout and\n * sidebar-layout `useLayoutState` hooks; both wrap this and add their own\n * mode-resolution logic on top.\n *\n * Only emits `onCollapsedChange` when the container *crosses* the threshold\n * (not on every resize while it stays on the same side). On the first\n * measurement, only auto-collapses the panel; never auto-expands, so an\n * explicit `collapsed`/`defaultCollapsed` of `true` is respected when the\n * container starts above the breakpoint.\n *\n * @internal\n */\nexport function useBreakpointCollapse({\n  collapsed: collapsedProps,\n  breakpoint,\n  containerRef,\n}: UseBreakpointCollapseArgs): UseBreakpointCollapseResult {\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [collapsed, setCollapsed] = useControllableState({\n    value: collapsedProps.value,\n    defaultValue: collapsedProps.defaultValue,\n    onChange: collapsedProps.onChange,\n  });\n\n  // Tracks which side of the breakpoint the container was on at the previous\n  // measurement. `null` until the first measurement so we can distinguish\n  // \"first ever measurement\" from \"stayed on the same side\".\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      const isBelowBreakpoint = size.width < breakpoint;\n      const prevBelowBreakpoint = prevBelowBreakpointRef.current;\n      prevBelowBreakpointRef.current = isBelowBreakpoint;\n\n      // Only act when the container crosses the threshold. Without this,\n      // any resize while the container stays on the same side would call\n      // `setCollapsed` and silently undo a user-initiated collapse/expand.\n      if (prevBelowBreakpoint === isBelowBreakpoint) {\n        return;\n      }\n\n      // On the first ever measurement, only auto-collapse a panel whose\n      // container starts below the breakpoint; never auto-expand. This\n      // respects an explicit `collapsed`/`defaultCollapsed` of `true` when the\n      // container starts above the breakpoint (the consumer's intent wins),\n      // while still closing the drawer when the container starts narrow.\n      if (prevBelowBreakpoint === null && !(isBelowBreakpoint && !collapsed)) {\n        return;\n      }\n\n      setCollapsed(isBelowBreakpoint);\n    },\n  });\n\n  const isBelowBreakpoint = containerWidth !== 0 && containerWidth < breakpoint;\n\n  return { containerWidth, collapsed, setCollapsed, isBelowBreakpoint };\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,OAAO,uBAAuB;AAE9B,SAAS,4BAA4B;AAwC9B,SAAS,sBAAsB;AAAA,EACpC,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAA2D;AACzD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,OAAO,eAAe;AAAA,IACtB,cAAc,eAAe;AAAA,IAC7B,UAAU,eAAe;AAAA,EAC3B,CAAC;AAKD,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,YAAMA,qBAAoB,KAAK,QAAQ;AACvC,YAAM,sBAAsB,uBAAuB;AACnD,6BAAuB,UAAUA;AAKjC,UAAI,wBAAwBA,oBAAmB;AAC7C;AAAA,MACF;AAOA,UAAI,wBAAwB,QAAQ,EAAEA,sBAAqB,CAAC,YAAY;AACtE;AAAA,MACF;AAEA,mBAAaA,kBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AAED,QAAM,oBAAoB,mBAAmB,KAAK,iBAAiB;AAEnE,SAAO,EAAE,gBAAgB,WAAW,cAAc,kBAAkB;AACtE;",
+  "sourcesContent": ["import {\n  useRef,\n  useState,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n} from 'react';\n\nimport { useCallbackRef } from '../../../core/hooks/useCallbackRef.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport { useResizeObserver } from '../../../core/hooks/useResizeObserver.js';\n\ninterface UseBreakpointCollapseArgs {\n  /** Controlled / uncontrolled props for the collapsed state. */\n  collapsed: {\n    value: boolean | undefined;\n    defaultValue: boolean;\n    onChange: ((value: boolean) => void) | undefined;\n  };\n  /** Container width below which the panel renders as a drawer. */\n  breakpoint: number;\n  /** Container element observed for size changes. */\n  containerRef: RefObject<HTMLDivElement>;\n  /** Fired on the first measurement and whenever the container crosses `breakpoint`. */\n  onBreakpointTransition?: (belowBreakpoint: boolean) => void;\n  /**\n   * When `true`, an *uncontrolled* panel auto-collapses below the breakpoint\n   * and reopens above it (the Sidebar's responsive default). Details passes\n   * `false`: it never auto-collapses and honors `defaultCollapsed` everywhere.\n   */\n  autoCollapse: boolean;\n}\n\ninterface UseBreakpointCollapseResult {\n  /** Most recent measured container width (`0` until first measurement). */\n  containerWidth: number;\n  /** Current collapsed state (controlled value if provided). */\n  collapsed: boolean;\n  /** Setter for the collapsed state. */\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  /** True once measured and the container is narrower than `breakpoint`. */\n  isBelowBreakpoint: boolean;\n}\n\n/**\n * Tracks the container width and fires `onBreakpointTransition` on the first\n * measurement and on every subsequent crossing. Shared by the sidebar and\n * details `useLayoutState` hooks. A crossing never touches a controlled\n * `collapsed`; with `autoCollapse` (the Sidebar) an uncontrolled panel\n * additionally auto-collapses below the breakpoint and reopens above it.\n *\n * @internal\n */\nexport function useBreakpointCollapse({\n  collapsed: collapsedProps,\n  breakpoint,\n  containerRef,\n  onBreakpointTransition,\n  autoCollapse,\n}: UseBreakpointCollapseArgs): UseBreakpointCollapseResult {\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [collapsed, setCollapsed] = useControllableState({\n    value: collapsedProps.value,\n    defaultValue: collapsedProps.defaultValue,\n    onChange: collapsedProps.onChange,\n  });\n\n  const isControlled = collapsedProps.value !== undefined;\n  const emitBreakpointTransition = useCallbackRef(onBreakpointTransition);\n\n  // Tracks which side of the breakpoint the container was on at the previous\n  // measurement. `null` until the first measurement so we can distinguish\n  // \"first ever measurement\" from \"stayed on the same side\".\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      const isBelowBreakpoint = size.width < breakpoint;\n      const prevBelowBreakpoint = prevBelowBreakpointRef.current;\n      prevBelowBreakpointRef.current = isBelowBreakpoint;\n\n      // Same side as the last measurement: no crossing, nothing to do.\n      if (prevBelowBreakpoint === isBelowBreakpoint) {\n        return;\n      }\n\n      const shouldAutoCollapse = autoCollapse && !isControlled;\n\n      emitBreakpointTransition(isBelowBreakpoint);\n\n      if (prevBelowBreakpoint === null) {\n        // First measurement: auto-collapse an uncontrolled Sidebar starting\n        // narrow so the nav never covers the content.\n        if (shouldAutoCollapse && isBelowBreakpoint && !collapsed) {\n          setCollapsed(true);\n        }\n        return;\n      }\n\n      // Only an uncontrolled Sidebar auto-adjusts `collapsed` on crossings;\n      // controlled panels and Details are left to the consumer.\n      if (shouldAutoCollapse) {\n        setCollapsed(isBelowBreakpoint);\n      }\n    },\n  });\n\n  const isBelowBreakpoint = containerWidth !== 0 && containerWidth < breakpoint;\n\n  return { containerWidth, collapsed, setCollapsed, isBelowBreakpoint };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AA2C3B,SAAS,sBAAsB;AAAA,EACpC,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2D;AACzD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,OAAO,eAAe;AAAA,IACtB,cAAc,eAAe;AAAA,IAC7B,UAAU,eAAe;AAAA,EAC3B,CAAC;AAED,QAAM,eAAe,eAAe,UAAU;AAC9C,QAAM,2BAA2B,eAAe,sBAAsB;AAKtE,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,YAAMA,qBAAoB,KAAK,QAAQ;AACvC,YAAM,sBAAsB,uBAAuB;AACnD,6BAAuB,UAAUA;AAGjC,UAAI,wBAAwBA,oBAAmB;AAC7C;AAAA,MACF;AAEA,YAAM,qBAAqB,gBAAgB,CAAC;AAE5C,+BAAyBA,kBAAiB;AAE1C,UAAI,wBAAwB,MAAM;AAGhC,YAAI,sBAAsBA,sBAAqB,CAAC,WAAW;AACzD,uBAAa,IAAI;AAAA,QACnB;AACA;AAAA,MACF;AAIA,UAAI,oBAAoB;AACtB,qBAAaA,kBAAiB;AAAA,MAChC;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,oBAAoB,mBAAmB,KAAK,iBAAiB;AAEnE,SAAO,EAAE,gBAAgB,WAAW,cAAc,kBAAkB;AACtE;",
   "names": ["isBelowBreakpoint"]
 }

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.css

@@ -1,14 +1,14 @@
-._1mr4xg70-3-8-0 {
+._1mr4xg70-3-9-1 {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-._1mr4xg71-3-8-0 {
+._1mr4xg71-3-9-1 {
   display: flex;
   height: 100%;
   width: 100%;
 }
-._1mr4xg72-3-8-0 {
+._1mr4xg72-3-9-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -16,37 +16,37 @@
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-8-0 ._1mr4xg72-3-8-0 {
+._1jgl8s50-3-9-1 ._1mr4xg72-3-9-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg73-3-8-0 {
+._1mr4xg73-3-9-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   flex-grow: 1;
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg74-3-8-0 {
+._1mr4xg74-3-9-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg75-3-8-0 {
+._1mr4xg75-3-9-1 {
   position: relative;
   width: var(--dt-spacings-size-16, 16px);
   height: 100%;
   flex-shrink: 0;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0 {
+._1jgl8s50-3-9-1 ._1mr4xg75-3-9-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
 }
-._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0:hover {
+._1jgl8s50-3-9-1 ._1mr4xg75-3-9-1:hover {
   border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0:active {
+._1jgl8s50-3-9-1 ._1mr4xg75-3-9-1:active {
   border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1mr4xg76-3-8-0 {
+._1mr4xg76-3-9-1 {
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -61,54 +61,54 @@
   translate: calc(0px - var(--dt-spacings-size-16, 16px) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1mr4xg76-3-8-0:hover, ._1mr4xg76-3-8-0:focus, ._1mr4xg75-3-8-0:hover ._1mr4xg76-3-8-0 {
+._1mr4xg76-3-9-1:hover, ._1mr4xg76-3-9-1:focus, ._1mr4xg75-3-9-1:hover ._1mr4xg76-3-9-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   translate: calc(0px - var(--dt-spacings-size-16, 16px) / 2);
 }
-._1jgl8s50-3-8-0 ._1mr4xg76-3-8-0, ._1jgl8s50-3-8-0 ._1mr4xg76-3-8-0:hover, ._1jgl8s50-3-8-0 ._1mr4xg76-3-8-0:focus, ._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0:hover ._1mr4xg76-3-8-0 {
+._1jgl8s50-3-9-1 ._1mr4xg76-3-9-1, ._1jgl8s50-3-9-1 ._1mr4xg76-3-9-1:hover, ._1jgl8s50-3-9-1 ._1mr4xg76-3-9-1:focus, ._1jgl8s50-3-9-1 ._1mr4xg75-3-9-1:hover ._1mr4xg76-3-9-1 {
   border-top-right-radius: 0;
   translate: 0;
   box-shadow: none;
 }
-._1mr4xg77-3-8-0 {
+._1mr4xg77-3-9-1 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._1mr4xg78-3-8-0 {
+._1mr4xg78-3-9-1 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-._1mr4xg79-3-8-0 {
+._1mr4xg79-3-9-1 {
   box-sizing: border-box;
   flex-grow: 1;
 }
-._1mr4xg7a-3-8-0 {
+._1mr4xg7a-3-9-1 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1mr4xg7c-3-8-0 {
-  --_1mr4xg7b-3-8-0: 24px;
+._1mr4xg7c-3-9-1 {
+  --_1mr4xg7b-3-9-1: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: -2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7d-3-8-0 {
-  --_1mr4xg7b-3-8-0: 24px;
+._1mr4xg7d-3-9-1 {
+  --_1mr4xg7b-3-9-1: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: 2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7e-3-8-0 {
-  width: var(--_1mr4xg7b-3-8-0);
-  height: var(--_1mr4xg7b-3-8-0);
+._1mr4xg7e-3-9-1 {
+  width: var(--_1mr4xg7b-3-9-1);
+  height: var(--_1mr4xg7b-3-9-1);
   box-sizing: border-box;
 }
-._1mr4xg7f-3-8-0 {
+._1mr4xg7f-3-9-1 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -116,52 +116,52 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1mr4xg7f-3-8-0:hover {
+._1mr4xg7f-3-9-1:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1mr4xg7f-3-8-0:focus-visible {
+._1mr4xg7f-3-9-1:focus-visible {
   opacity: 1;
 }
-._1mr4xg72-3-8-0:hover ~ ._1mr4xg74-3-8-0 ._1mr4xg7f-3-8-0, ._1mr4xg74-3-8-0:hover ._1mr4xg7f-3-8-0 {
+._1mr4xg72-3-9-1:hover ~ ._1mr4xg74-3-9-1 ._1mr4xg7f-3-9-1, ._1mr4xg74-3-9-1:hover ._1mr4xg7f-3-9-1 {
   opacity: 1;
 }
-._1jgl8s50-3-8-0 ._1mr4xg72-3-8-0:hover ~ ._1mr4xg74-3-8-0 ._1mr4xg7f-3-8-0, ._1jgl8s50-3-8-0 ._1mr4xg74-3-8-0:hover ._1mr4xg7f-3-8-0 {
+._1jgl8s50-3-9-1 ._1mr4xg72-3-9-1:hover ~ ._1mr4xg74-3-9-1 ._1mr4xg7f-3-9-1, ._1jgl8s50-3-9-1 ._1mr4xg74-3-9-1:hover ._1mr4xg7f-3-9-1 {
   opacity: 1;
   box-shadow: none;
 }
-._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0 {
+._1jgl8s50-3-9-1 ._1mr4xg7f-3-9-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   left: calc(-1 * var(--dt-spacings-size-6, 6px));
   opacity: 0;
 }
-._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0:hover {
+._1jgl8s50-3-9-1 ._1mr4xg7f-3-9-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   opacity: 1;
 }
-._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0:active {
+._1jgl8s50-3-9-1 ._1mr4xg7f-3-9-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0:focus-visible {
+._1jgl8s50-3-9-1 ._1mr4xg7f-3-9-1:focus-visible {
   opacity: 1;
 }
-._1mr4xg7g-3-8-0 {
+._1mr4xg7g-3-9-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg7g-3-8-0:hover {
+._1mr4xg7g-3-9-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-8-0 ._1mr4xg7g-3-8-0 {
+._1jgl8s50-3-9-1 ._1mr4xg7g-3-9-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   left: var(--dt-spacings-size-2, 2px);
 }
-._1jgl8s50-3-8-0 ._1mr4xg7g-3-8-0:hover {
+._1jgl8s50-3-9-1 ._1mr4xg7g-3-9-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: none;
 }
-._1jgl8s50-3-8-0 ._1mr4xg7g-3-8-0:active {
+._1jgl8s50-3-9-1 ._1mr4xg7g-3-9-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js

@@ -1,21 +1,21 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "../../../core/styles/focusRingStatic.css";
 import "./SidebarLayout.css";
-var collapseButton = "_1mr4xg7f-3-8-0 _1mr4xg7e-3-8-0";
-var collapseButtonContainer = "_1mr4xg7c-3-8-0";
-var collapsedSidebar = "_1mr4xg75-3-8-0";
-var collapsedSidebarWrapper = "_1mr4xg71-3-8-0";
-var content = "_1mr4xg73-3-8-0";
-var drawer = "_1mr4xg77-3-8-0";
-var drawerContent = "_1mr4xg79-3-8-0";
-var drawerContentContainer = "_1mr4xg78-3-8-0";
-var drawerHeader = "_1mr4xg7a-3-8-0";
-var expandButton = "_1mr4xg7g-3-8-0 _1mr4xg7e-3-8-0";
-var expandButtonContainer = "_1mr4xg7d-3-8-0";
-var hint = "_1mr4xg76-3-8-0 _z0fq9b4-3-8-0 _z0fq9bd-3-8-0 _z0fq9b6-3-8-0 _z0fq9bc-3-8-0";
-var layoutRoot = "_1mr4xg70-3-8-0";
-var panel = "_1mr4xg72-3-8-0";
-var resizeHandle = "_1mr4xg74-3-8-0";
+var collapseButton = "_1mr4xg7f-3-9-1 _1mr4xg7e-3-9-1";
+var collapseButtonContainer = "_1mr4xg7c-3-9-1";
+var collapsedSidebar = "_1mr4xg75-3-9-1";
+var collapsedSidebarWrapper = "_1mr4xg71-3-9-1";
+var content = "_1mr4xg73-3-9-1";
+var drawer = "_1mr4xg77-3-9-1";
+var drawerContent = "_1mr4xg79-3-9-1";
+var drawerContentContainer = "_1mr4xg78-3-9-1";
+var drawerHeader = "_1mr4xg7a-3-9-1";
+var expandButton = "_1mr4xg7g-3-9-1 _1mr4xg7e-3-9-1";
+var expandButtonContainer = "_1mr4xg7d-3-9-1";
+var hint = "_1mr4xg76-3-9-1 _z0fq9b4-3-9-1 _z0fq9bd-3-9-1 _z0fq9b6-3-9-1 _z0fq9bc-3-9-1";
+var layoutRoot = "_1mr4xg70-3-9-1";
+var panel = "_1mr4xg72-3-9-1";
+var resizeHandle = "_1mr4xg74-3-9-1";
 export {
   collapseButton,
   collapseButtonContainer,

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7f-3-8-0 _1mr4xg7e-3-8-0';\nexport var collapseButtonContainer = '_1mr4xg7c-3-8-0';\nexport var collapsedSidebar = '_1mr4xg75-3-8-0';\nexport var collapsedSidebarWrapper = '_1mr4xg71-3-8-0';\nexport var content = '_1mr4xg73-3-8-0';\nexport var drawer = '_1mr4xg77-3-8-0';\nexport var drawerContent = '_1mr4xg79-3-8-0';\nexport var drawerContentContainer = '_1mr4xg78-3-8-0';\nexport var drawerHeader = '_1mr4xg7a-3-8-0';\nexport var expandButton = '_1mr4xg7g-3-8-0 _1mr4xg7e-3-8-0';\nexport var expandButtonContainer = '_1mr4xg7d-3-8-0';\nexport var hint = '_1mr4xg76-3-8-0 _z0fq9b4-3-8-0 _z0fq9bd-3-8-0 _z0fq9b6-3-8-0 _z0fq9bc-3-8-0';\nexport var layoutRoot = '_1mr4xg70-3-8-0';\nexport var panel = '_1mr4xg72-3-8-0';\nexport var resizeHandle = '_1mr4xg74-3-8-0';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7f-3-9-1 _1mr4xg7e-3-9-1';\nexport var collapseButtonContainer = '_1mr4xg7c-3-9-1';\nexport var collapsedSidebar = '_1mr4xg75-3-9-1';\nexport var collapsedSidebarWrapper = '_1mr4xg71-3-9-1';\nexport var content = '_1mr4xg73-3-9-1';\nexport var drawer = '_1mr4xg77-3-9-1';\nexport var drawerContent = '_1mr4xg79-3-9-1';\nexport var drawerContentContainer = '_1mr4xg78-3-9-1';\nexport var drawerHeader = '_1mr4xg7a-3-9-1';\nexport var expandButton = '_1mr4xg7g-3-9-1 _1mr4xg7e-3-9-1';\nexport var expandButtonContainer = '_1mr4xg7d-3-9-1';\nexport var hint = '_1mr4xg76-3-9-1 _z0fq9b4-3-9-1 _z0fq9bd-3-9-1 _z0fq9b6-3-9-1 _z0fq9bc-3-9-1';\nexport var layoutRoot = '_1mr4xg70-3-9-1';\nexport var panel = '_1mr4xg72-3-9-1';\nexport var resizeHandle = '_1mr4xg74-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,0BAA0B;AAC9B,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,yBAAyB;AAC7B,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,eAAe;",
   "names": []
 }

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

@@ -10,7 +10,9 @@ function useLayoutState({
       onChange: sidebar.config.onCollapsedChange
     },
     breakpoint: sidebar.config.breakpoint,
-    containerRef
+    containerRef,
+    onBreakpointTransition: sidebar.config.onBreakpointTransition,
+    autoCollapse: true
   });
   let mode = "split";
   if (collapsed) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/useLayoutState.ts"],
-  "sourcesContent": ["import { type RefObject } from 'react';\n\nimport type { ExtractedSidebarSlot } from './slots.js';\nimport { useBreakpointCollapse } from '../shared/useBreakpointCollapse.js';\n\ntype RenderedLayout = 'split' | 'collapsed' | 'drawer';\n\nexport function useLayoutState({\n  sidebar,\n  containerRef,\n}: {\n  sidebar: ExtractedSidebarSlot;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const { containerWidth, collapsed, setCollapsed, isBelowBreakpoint } =\n    useBreakpointCollapse({\n      collapsed: {\n        value: sidebar.config.collapsed,\n        defaultValue: sidebar.config.defaultCollapsed ?? false,\n        onChange: sidebar.config.onCollapsedChange,\n      },\n      breakpoint: sidebar.config.breakpoint,\n      containerRef,\n    });\n\n  let mode: RenderedLayout = 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    collapsed,\n    containerWidth,\n    isBelowBreakpoint,\n    mode,\n    setCollapsed,\n  };\n}\n"],
-  "mappings": "AAGA,SAAS,6BAA6B;AAI/B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,gBAAgB,WAAW,cAAc,kBAAkB,IACjE,sBAAsB;AAAA,IACpB,WAAW;AAAA,MACT,OAAO,QAAQ,OAAO;AAAA,MACtB,cAAc,QAAQ,OAAO,oBAAoB;AAAA,MACjD,UAAU,QAAQ,OAAO;AAAA,IAC3B;AAAA,IACA,YAAY,QAAQ,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AAEH,MAAI,OAAuB;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,EACF;AACF;",
+  "sourcesContent": ["import { type RefObject } from 'react';\n\nimport type { ExtractedSidebarSlot } from './slots.js';\nimport { useBreakpointCollapse } from '../shared/useBreakpointCollapse.js';\n\ntype RenderedLayout = 'split' | 'collapsed' | 'drawer';\n\nexport function useLayoutState({\n  sidebar,\n  containerRef,\n}: {\n  sidebar: ExtractedSidebarSlot;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const { containerWidth, collapsed, setCollapsed, isBelowBreakpoint } =\n    useBreakpointCollapse({\n      collapsed: {\n        value: sidebar.config.collapsed,\n        defaultValue: sidebar.config.defaultCollapsed ?? false,\n        onChange: sidebar.config.onCollapsedChange,\n      },\n      breakpoint: sidebar.config.breakpoint,\n      containerRef,\n      onBreakpointTransition: sidebar.config.onBreakpointTransition,\n      autoCollapse: true,\n    });\n\n  let mode: RenderedLayout = 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    collapsed,\n    containerWidth,\n    isBelowBreakpoint,\n    mode,\n    setCollapsed,\n  };\n}\n"],
+  "mappings": "AAGA,SAAS,6BAA6B;AAI/B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,gBAAgB,WAAW,cAAc,kBAAkB,IACjE,sBAAsB;AAAA,IACpB,WAAW;AAAA,MACT,OAAO,QAAQ,OAAO;AAAA,MACtB,cAAc,QAAQ,OAAO,oBAAoB;AAAA,MACjD,UAAU,QAAQ,OAAO;AAAA,IAC3B;AAAA,IACA,YAAY,QAAQ,OAAO;AAAA,IAC3B;AAAA,IACA,wBAAwB,QAAQ,OAAO;AAAA,IACvC,cAAc;AAAA,EAChB,CAAC;AAEH,MAAI,OAAuB;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,EACF;AACF;",
   "names": []
 }

package/esm/layouts/split-layout/SplitLayout.css

@@ -1,11 +1,11 @@
-._6q8dk20-3-8-0 {
+._6q8dk20-3-9-1 {
   height: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
   position: relative;
 }
-._6q8dk21-3-8-0 {
+._6q8dk21-3-9-1 {
   box-sizing: border-box;
   height: 100%;
   top: 0;
@@ -13,21 +13,21 @@
   flex-shrink: 0;
   overflow-y: auto;
 }
-._6q8dk22-3-8-0 {
+._6q8dk22-3-9-1 {
   flex: 0 0 auto;
 }
-._6q8dk23-3-8-0 {
+._6q8dk23-3-9-1 {
   flex: 1 1 0;
   contain: layout paint;
 }
-._6q8dk24-3-8-0 {
+._6q8dk24-3-9-1 {
   width: var(--dt-spacings-size-8, 8px);
   align-items: center;
   display: flex;
   justify-content: center;
   overflow-y: visible;
 }
-._1jgl8s50-3-8-0 ._6q8dk24-3-8-0 {
+._1jgl8s50-3-9-1 ._6q8dk24-3-9-1 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -37,7 +37,7 @@
   margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
   z-index: 1;
 }
-._1jgl8s50-3-8-0 ._6q8dk24-3-8-0::before {
+._1jgl8s50-3-9-1 ._6q8dk24-3-9-1::before {
   content: "";
   position: absolute;
   top: 0;
@@ -48,23 +48,23 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-8-0 ._6q8dk24-3-8-0:hover::before {
+._1jgl8s50-3-9-1 ._6q8dk24-3-9-1:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-8-0 ._6q8dk24-3-8-0:active::before {
+._1jgl8s50-3-9-1 ._6q8dk24-3-9-1:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._6q8dk25-3-8-0 {
+._6q8dk25-3-9-1 {
   inset: 0;
   overflow: visible;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
-._6q8dk25-3-8-0 > * {
+._6q8dk25-3-9-1 > * {
   pointer-events: auto;
 }
-._6q8dk26-3-8-0 {
+._6q8dk26-3-9-1 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -77,17 +77,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;
 }
-._6q8dk26-3-8-0:focus-visible {
+._6q8dk26-3-9-1:focus-visible {
   width: 100%;
 }
-._6q8dk26-3-8-0:hover._6q8dk26-3-8-0:focus-visible {
+._6q8dk26-3-9-1:hover._6q8dk26-3-9-1:focus-visible {
   width: 2px;
 }
-._6q8dk26-3-8-0:focus-visible, ._6q8dk26-3-8-0:hover {
+._6q8dk26-3-9-1:focus-visible, ._6q8dk26-3-9-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._6q8dk26-3-8-0:after {
+._6q8dk26-3-9-1:after {
   content: "";
   display: block;
   height: 100%;
@@ -98,11 +98,14 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-8-0 ._6q8dk26-3-8-0 {
+._1jgl8s50-3-9-1 ._6q8dk26-3-9-1 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-8-0 ._6q8dk24-3-8-0:has(._6q8dk26-3-8-0:focus-visible)::before {
+._1jgl8s50-3-9-1 ._6q8dk24-3-9-1:has(._6q8dk26-3-9-1:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
+}
+:root._1jgl8s50-3-9-1 {
+  --_dt-split-handle-ew: 0;
 }

package/esm/layouts/split-layout/SplitLayout.js

@@ -120,7 +120,8 @@ const SplitLayoutRoot = memo(
         default: slots.panel.config.defaultWidth,
         position: slots.panel.config.position,
         resizable: slots.panel.config.resizable,
-        onResize: slots.panel.config.onResize
+        onResize: slots.panel.config.onResize,
+        width: slots.panel.config.width
       },
       content: {
         min: slots.content?.config.minWidth ?? 0

package/esm/layouts/split-layout/SplitLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/SplitLayout.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n} from 'react';\n\nimport {\n  ContentSlot,\n  extractSlotsProps,\n  PanelSlot,\n  ResizeHandleSlot,\n} from './slots.js';\nimport * as styles from './SplitLayout.sty.js';\nimport { useSplitSizing } from './useSplitSizing.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\n/** shell component for referencial stability - must not use any context or props */\nconst PanelShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ContentShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ResizeHandleShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\ninterface PanelColumnProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst PanelColumn = forwardRef<HTMLDivElement, PanelColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\ninterface ContentColumnProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst ContentColumn = forwardRef<HTMLDivElement, ContentColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nconst ResizeHandle = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>((props, forwardedRef) => {\n  const { onDrag, onDragStart, onDragEnd, panelId, ariaLabel, ariaLabelledBy } =\n    useContext(ActionsContext);\n  const ref = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs([ref, forwardedRef]);\n\n  const { focusProps, focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n  });\n\n  useGesture(\n    {\n      onDragStart,\n      onDragEnd,\n      onDrag: (state) => {\n        onDrag(state.movement[0]);\n      },\n    },\n    { target: ref },\n  );\n\n  return (\n    <div\n      {...props}\n      {...focusProps}\n      role=\"separator\"\n      ref={mergedRefs}\n      className={clsx(styles.resizeHandle, focusClassName)}\n      tabIndex={0}\n      aria-controls={panelId}\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    />\n  );\n});\n\nconst ActionsContext = createContext<{\n  onDragStart: () => void;\n  onDrag: (v: number) => void;\n  onDragEnd: () => void;\n  panelId: string;\n  ariaLabel: string | undefined;\n  ariaLabelledBy: string | undefined;\n}>({\n  onDragStart: () => undefined,\n  onDrag: () => undefined,\n  onDragEnd: () => undefined,\n  panelId: '',\n  ariaLabel: undefined,\n  ariaLabelledBy: undefined,\n});\n\n/** @internal */\nexport interface SplitLayoutProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst SplitLayoutRoot = memo(\n  forwardRef<HTMLDivElement, SplitLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassname, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const slots = extractSlotsProps(children);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const rootMergedRef = useMergeRefs([forwardedRef, rootRef]);\n\n    const generatedPanelId = useId();\n    const panelId = slots.panel.domProps.id ?? generatedPanelId;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const panelMergedRef = useMergeRefs([panelRef, slots.panel.ref]);\n    const contentMergedRef = useMergeRefs([contentRef, slots.content?.ref]);\n\n    const sizing = useSplitSizing({\n      panel: {\n        min: slots.panel.config.minWidth,\n        max: slots.panel.config.maxWidth,\n        default: slots.panel.config.defaultWidth,\n        position: slots.panel.config.position,\n        resizable: slots.panel.config.resizable,\n        onResize: slots.panel.config.onResize,\n      },\n      content: {\n        min: slots.content?.config.minWidth ?? 0,\n      },\n      refs: {\n        root: rootRef,\n        panel: panelRef,\n        content: contentRef,\n      },\n    });\n\n    const isDefaultPosition = slots.panel.config.position === 'start';\n    const activeSizing = isDefaultPosition ? sizing.panel : sizing.content;\n\n    const panelColumn = (\n      <PanelColumn\n        {...slots.panel.domProps}\n        id={panelId}\n        style={{ ...slots.panel.domProps.style, width: sizing.panel.widthCss }}\n        ref={panelMergedRef}\n      >\n        <PanelShell>{slots.panel.children}</PanelShell>\n      </PanelColumn>\n    );\n\n    const contentColumn = slots.content ? (\n      <ContentColumn\n        {...slots.content.domProps}\n        style={{\n          ...slots.content.domProps.style,\n          width: sizing.content.widthCss,\n          // content needs an explicit minWidth when it is the leading column\n          // (end position) to prevent it from collapsing before the resize handle\n          minWidth: isDefaultPosition\n            ? undefined\n            : slots.content.config.minWidth,\n        }}\n        ref={contentMergedRef}\n      >\n        <ContentShell>{slots.content.children}</ContentShell>\n      </ContentColumn>\n    ) : null;\n\n    const resizeHandleDecorations = slots.resizeHandle?.children ? (\n      <div className={styles.handleDecorations}>\n        <ResizeHandleShell>{slots.resizeHandle.children}</ResizeHandleShell>\n      </div>\n    ) : null;\n\n    const resizeHandle = slots.panel.config.resizable ? (\n      <div\n        {...slots.resizeHandle?.domProps}\n        className={clsx(\n          styles.handleColumn,\n          slots.resizeHandle?.domProps?.className,\n        )}\n        ref={slots.resizeHandle?.ref}\n      >\n        <ResizeHandle\n          aria-valuemin={activeSizing.minPx}\n          aria-valuemax={\n            isFinite(activeSizing.maxPx) ? activeSizing.maxPx : undefined\n          }\n          aria-valuenow={activeSizing.width}\n          aria-valuetext={`${activeSizing.width}px`}\n          aria-orientation=\"vertical\"\n        />\n        {resizeHandleDecorations}\n      </div>\n    ) : null;\n\n    return (\n      <div\n        {...restRootProps}\n        {...behavioralTrackingProps}\n        className={clsx(styles.layout, rootClassname)}\n        ref={rootMergedRef}\n      >\n        <ActionsContext.Provider\n          value={{\n            ...sizing.dragActions,\n            panelId,\n            ariaLabel:\n              slots.resizeHandle?.domProps['aria-label'] ??\n              slots.panel.config.label,\n            ariaLabelledBy: slots.resizeHandle?.domProps['aria-labelledby'],\n          }}\n        >\n          {isDefaultPosition ? panelColumn : contentColumn}\n          {resizeHandle}\n          {isDefaultPosition ? contentColumn : panelColumn}\n        </ActionsContext.Provider>\n      </div>\n    );\n  }),\n);\nSplitLayoutRoot.displayName = 'SplitLayout.Root';\n\n/**\n * Internal: The accessibility approach to SplitLayout is inspired by the Window Splitter ARIA pattern.\n * While we dont follow it 100%, most aria attributes and intraction should adhere to this pattern.\n * https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\n */\n\n/** @internal */\nexport const SplitLayout = Object.assign(SplitLayoutRoot, {\n  Panel: PanelSlot,\n  Content: ContentSlot,\n  ResizeHandle: ResizeHandleSlot,\n});\n"],
-  "mappings": "AAsDM,cAgLA,YAhLA;AAtDN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,YAAY;AACxB,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAQ7B,MAAM,aAAa,KAAK,CAAC,EAAE,SAAS,MAAyB;AAC3D,SAAO;AACT,CAAC;AAGD,MAAM,eAAe,KAAK,CAAC,EAAE,SAAS,MAAyB;AAC7D,SAAO;AACT,CAAC;AAGD,MAAM,oBAAoB,KAAK,CAAC,EAAE,SAAS,MAAyB;AAClE,SAAO;AACT,CAAC;AAMD,MAAM,cAAc;AAAA,EAClB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,UAAU,WAAW,OAAO,GAAG,KAAK,IAAI;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,QAAQ,SAAS;AAAA,QACxC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMA,MAAM,gBAAgB;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,UAAU,WAAW,OAAO,GAAG,KAAK,IAAI;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,QAAQ,SAAS;AAAA,QACxC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,MAAM,eAAe,WAGnB,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,QAAQ,aAAa,WAAW,SAAS,WAAW,eAAe,IACzE,WAAW,cAAc;AAC3B,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,aAAa,aAAa,CAAC,KAAK,YAAY,CAAC;AAEnD,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,aAAa;AAAA,IACb,gBAAgB;AAAA,EAClB,CAAC;AAED;AAAA,IACE;AAAA,MACE;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,UAAU;AACjB,eAAO,MAAM,SAAS,CAAC,CAAC;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,EAAE,QAAQ,IAAI;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,cAAc,cAAc;AAAA,MACnD,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,cAAY,iBAAiB,SAAY;AAAA,MACzC,mBAAiB;AAAA;AAAA,EACnB;AAEJ,CAAC;AAED,MAAM,iBAAiB,cAOpB;AAAA,EACD,aAAa,MAAM;AAAA,EACnB,QAAQ,MAAM;AAAA,EACd,WAAW,MAAM;AAAA,EACjB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAClB,CAAC;AAWD,MAAM,kBAAkB;AAAA,EACtB,WAA6C,CAAC,OAAO,iBAAiB;AACpE,UAAM,EAAE,UAAU,WAAW,eAAe,GAAG,UAAU,IAAI;AAE7D,UAAM,CAAC,yBAAyB,aAAa,IAC3C,2BAA2B,SAAS;AAEtC,UAAM,QAAQ,kBAAkB,QAAQ;AAExC,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,gBAAgB,aAAa,CAAC,cAAc,OAAO,CAAC;AAE1D,UAAM,mBAAmB,MAAM;AAC/B,UAAM,UAAU,MAAM,MAAM,SAAS,MAAM;AAE3C,UAAM,WAAW,OAAuB,IAAI;AAC5C,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,iBAAiB,aAAa,CAAC,UAAU,MAAM,MAAM,GAAG,CAAC;AAC/D,UAAM,mBAAmB,aAAa,CAAC,YAAY,MAAM,SAAS,GAAG,CAAC;AAEtE,UAAM,SAAS,eAAe;AAAA,MAC5B,OAAO;AAAA,QACL,KAAK,MAAM,MAAM,OAAO;AAAA,QACxB,KAAK,MAAM,MAAM,OAAO;AAAA,QACxB,SAAS,MAAM,MAAM,OAAO;AAAA,QAC5B,UAAU,MAAM,MAAM,OAAO;AAAA,QAC7B,WAAW,MAAM,MAAM,OAAO;AAAA,QAC9B,UAAU,MAAM,MAAM,OAAO;AAAA,MAC/B;AAAA,MACA,SAAS;AAAA,QACP,KAAK,MAAM,SAAS,OAAO,YAAY;AAAA,MACzC;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AAED,UAAM,oBAAoB,MAAM,MAAM,OAAO,aAAa;AAC1D,UAAM,eAAe,oBAAoB,OAAO,QAAQ,OAAO;AAE/D,UAAM,cACJ;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,MAAM,MAAM;AAAA,QAChB,IAAI;AAAA,QACJ,OAAO,EAAE,GAAG,MAAM,MAAM,SAAS,OAAO,OAAO,OAAO,MAAM,SAAS;AAAA,QACrE,KAAK;AAAA,QAEL,8BAAC,cAAY,gBAAM,MAAM,UAAS;AAAA;AAAA,IACpC;AAGF,UAAM,gBAAgB,MAAM,UAC1B;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,MAAM,QAAQ;AAAA,QAClB,OAAO;AAAA,UACL,GAAG,MAAM,QAAQ,SAAS;AAAA,UAC1B,OAAO,OAAO,QAAQ;AAAA;AAAA;AAAA,UAGtB,UAAU,oBACN,SACA,MAAM,QAAQ,OAAO;AAAA,QAC3B;AAAA,QACA,KAAK;AAAA,QAEL,8BAAC,gBAAc,gBAAM,QAAQ,UAAS;AAAA;AAAA,IACxC,IACE;AAEJ,UAAM,0BAA0B,MAAM,cAAc,WAClD,oBAAC,SAAI,WAAW,OAAO,mBACrB,8BAAC,qBAAmB,gBAAM,aAAa,UAAS,GAClD,IACE;AAEJ,UAAM,eAAe,MAAM,MAAM,OAAO,YACtC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,MAAM,cAAc;AAAA,QACxB,WAAW;AAAA,UACT,OAAO;AAAA,UACP,MAAM,cAAc,UAAU;AAAA,QAChC;AAAA,QACA,KAAK,MAAM,cAAc;AAAA,QAEzB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,iBAAe,aAAa;AAAA,cAC5B,iBACE,SAAS,aAAa,KAAK,IAAI,aAAa,QAAQ;AAAA,cAEtD,iBAAe,aAAa;AAAA,cAC5B,kBAAgB,GAAG,aAAa,KAAK;AAAA,cACrC,oBAAiB;AAAA;AAAA,UACnB;AAAA,UACC;AAAA;AAAA;AAAA,IACH,IACE;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,QAAQ,aAAa;AAAA,QAC5C,KAAK;AAAA,QAEL;AAAA,UAAC,eAAe;AAAA,UAAf;AAAA,YACC,OAAO;AAAA,cACL,GAAG,OAAO;AAAA,cACV;AAAA,cACA,WACE,MAAM,cAAc,SAAS,YAAY,KACzC,MAAM,MAAM,OAAO;AAAA,cACrB,gBAAgB,MAAM,cAAc,SAAS,iBAAiB;AAAA,YAChE;AAAA,YAEC;AAAA,kCAAoB,cAAc;AAAA,cAClC;AAAA,cACA,oBAAoB,gBAAgB;AAAA;AAAA;AAAA,QACvC;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,gBAAgB,cAAc;AASvB,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAChB,CAAC;",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n} from 'react';\n\nimport {\n  ContentSlot,\n  extractSlotsProps,\n  PanelSlot,\n  ResizeHandleSlot,\n} from './slots.js';\nimport * as styles from './SplitLayout.sty.js';\nimport { useSplitSizing } from './useSplitSizing.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\n/** shell component for referencial stability - must not use any context or props */\nconst PanelShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ContentShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ResizeHandleShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\ninterface PanelColumnProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst PanelColumn = forwardRef<HTMLDivElement, PanelColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\ninterface ContentColumnProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst ContentColumn = forwardRef<HTMLDivElement, ContentColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nconst ResizeHandle = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>((props, forwardedRef) => {\n  const { onDrag, onDragStart, onDragEnd, panelId, ariaLabel, ariaLabelledBy } =\n    useContext(ActionsContext);\n  const ref = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs([ref, forwardedRef]);\n\n  const { focusProps, focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n  });\n\n  useGesture(\n    {\n      onDragStart,\n      onDragEnd,\n      onDrag: (state) => {\n        onDrag(state.movement[0]);\n      },\n    },\n    { target: ref },\n  );\n\n  return (\n    <div\n      {...props}\n      {...focusProps}\n      role=\"separator\"\n      ref={mergedRefs}\n      className={clsx(styles.resizeHandle, focusClassName)}\n      tabIndex={0}\n      aria-controls={panelId}\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    />\n  );\n});\n\nconst ActionsContext = createContext<{\n  onDragStart: () => void;\n  onDrag: (v: number) => void;\n  onDragEnd: () => void;\n  panelId: string;\n  ariaLabel: string | undefined;\n  ariaLabelledBy: string | undefined;\n}>({\n  onDragStart: () => undefined,\n  onDrag: () => undefined,\n  onDragEnd: () => undefined,\n  panelId: '',\n  ariaLabel: undefined,\n  ariaLabelledBy: undefined,\n});\n\n/** @internal */\nexport interface SplitLayoutProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst SplitLayoutRoot = memo(\n  forwardRef<HTMLDivElement, SplitLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassname, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const slots = extractSlotsProps(children);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const rootMergedRef = useMergeRefs([forwardedRef, rootRef]);\n\n    const generatedPanelId = useId();\n    const panelId = slots.panel.domProps.id ?? generatedPanelId;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const panelMergedRef = useMergeRefs([panelRef, slots.panel.ref]);\n    const contentMergedRef = useMergeRefs([contentRef, slots.content?.ref]);\n\n    const sizing = useSplitSizing({\n      panel: {\n        min: slots.panel.config.minWidth,\n        max: slots.panel.config.maxWidth,\n        default: slots.panel.config.defaultWidth,\n        position: slots.panel.config.position,\n        resizable: slots.panel.config.resizable,\n        onResize: slots.panel.config.onResize,\n        width: slots.panel.config.width,\n      },\n      content: {\n        min: slots.content?.config.minWidth ?? 0,\n      },\n      refs: {\n        root: rootRef,\n        panel: panelRef,\n        content: contentRef,\n      },\n    });\n\n    const isDefaultPosition = slots.panel.config.position === 'start';\n    const activeSizing = isDefaultPosition ? sizing.panel : sizing.content;\n\n    const panelColumn = (\n      <PanelColumn\n        {...slots.panel.domProps}\n        id={panelId}\n        style={{ ...slots.panel.domProps.style, width: sizing.panel.widthCss }}\n        ref={panelMergedRef}\n      >\n        <PanelShell>{slots.panel.children}</PanelShell>\n      </PanelColumn>\n    );\n\n    const contentColumn = slots.content ? (\n      <ContentColumn\n        {...slots.content.domProps}\n        style={{\n          ...slots.content.domProps.style,\n          width: sizing.content.widthCss,\n          // content needs an explicit minWidth when it is the leading column\n          // (end position) to prevent it from collapsing before the resize handle\n          minWidth: isDefaultPosition\n            ? undefined\n            : slots.content.config.minWidth,\n        }}\n        ref={contentMergedRef}\n      >\n        <ContentShell>{slots.content.children}</ContentShell>\n      </ContentColumn>\n    ) : null;\n\n    const resizeHandleDecorations = slots.resizeHandle?.children ? (\n      <div className={styles.handleDecorations}>\n        <ResizeHandleShell>{slots.resizeHandle.children}</ResizeHandleShell>\n      </div>\n    ) : null;\n\n    const resizeHandle = slots.panel.config.resizable ? (\n      <div\n        {...slots.resizeHandle?.domProps}\n        className={clsx(\n          styles.handleColumn,\n          slots.resizeHandle?.domProps?.className,\n        )}\n        ref={slots.resizeHandle?.ref}\n      >\n        <ResizeHandle\n          aria-valuemin={activeSizing.minPx}\n          aria-valuemax={\n            isFinite(activeSizing.maxPx) ? activeSizing.maxPx : undefined\n          }\n          aria-valuenow={activeSizing.width}\n          aria-valuetext={`${activeSizing.width}px`}\n          aria-orientation=\"vertical\"\n        />\n        {resizeHandleDecorations}\n      </div>\n    ) : null;\n\n    return (\n      <div\n        {...restRootProps}\n        {...behavioralTrackingProps}\n        className={clsx(styles.layout, rootClassname)}\n        ref={rootMergedRef}\n      >\n        <ActionsContext.Provider\n          value={{\n            ...sizing.dragActions,\n            panelId,\n            ariaLabel:\n              slots.resizeHandle?.domProps['aria-label'] ??\n              slots.panel.config.label,\n            ariaLabelledBy: slots.resizeHandle?.domProps['aria-labelledby'],\n          }}\n        >\n          {isDefaultPosition ? panelColumn : contentColumn}\n          {resizeHandle}\n          {isDefaultPosition ? contentColumn : panelColumn}\n        </ActionsContext.Provider>\n      </div>\n    );\n  }),\n);\nSplitLayoutRoot.displayName = 'SplitLayout.Root';\n\n/**\n * Internal: The accessibility approach to SplitLayout is inspired by the Window Splitter ARIA pattern.\n * While we dont follow it 100%, most aria attributes and intraction should adhere to this pattern.\n * https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\n */\n\n/** @internal */\nexport const SplitLayout = Object.assign(SplitLayoutRoot, {\n  Panel: PanelSlot,\n  Content: ContentSlot,\n  ResizeHandle: ResizeHandleSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }