# ExtendedPaneScaffoldPaneScope

Artifact: [androidx.compose.material3.adaptive:adaptive-layout](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/adaptive/layout/PaneScaffold.kt+class:androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.1.0) Common/All
- Cmn

  ```
  @ExperimentalMaterial3AdaptiveApi
  sealed interface ExtendedPaneScaffoldPaneScope<Role : PaneScaffoldRole, ScaffoldValue : PaneScaffoldValue<Role>> : ExtendedPaneScaffoldScope<Role, ScaffoldValue>, PaneScaffoldPaneScope<Role>
  ```
Known direct subclasses [ThreePaneScaffoldPaneScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ThreePaneScaffoldPaneScope)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ThreePaneScaffoldPaneScope` | Scope for the panes of `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/package-summary#ThreePaneScaffold(androidx.compose.ui.Modifier,androidx.compose.material3.adaptive.layout.PaneScaffoldDirective,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldValue,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldHorizontalOrder,kotlin.Function1,kotlin.Function1,androidx.compose.material3.adaptive.layout.PaneExpansionState,kotlin.Function2,kotlin.Function1)`. |

*** ** * ** ***

Extended scope for the panes of pane scaffolds. All pane scaffolds will implement this interface to provide necessary info for panes to correctly render their content, motion, etc.

| Parameters |
|---|---|
| `<Role : https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldRole>` | The type of roles that denotes panes in the associated pane scaffold. |
| `<ScaffoldValue : https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldValue<Role>>` | The type of scaffold values that denotes the `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneAdaptedValue`s in the associated pane scaffold. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ThreePaneScaffoldPaneScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldTransitionScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldPaneScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope` |   |

## Summary

| ### Extension functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/ExperimentalMaterial3AdaptiveApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable <RoleT : https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldRole, ScaffoldValueT : https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldValue<RoleT>> https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldPaneScope<RoleT, ScaffoldValueT>.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldPaneScope#(androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope).AnimatedPane(androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,androidx.compose.ui.graphics.Shape,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enterTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exitTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, boundsAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntRect>, dragToResizeHandle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/DragToResizeState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` The root composable of pane contents in a `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/package-summary#ThreePaneScaffold(androidx.compose.ui.Modifier,androidx.compose.material3.adaptive.layout.PaneScaffoldDirective,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldValue,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldHorizontalOrder,kotlin.Function1,kotlin.Function1,androidx.compose.material3.adaptive.layout.PaneExpansionState,kotlin.Function2,kotlin.Function1)` that supports default motions during pane switching. | Cmn |

### Inherited functions

From [androidx.compose.ui.layout.LookaheadScope](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope) `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset` `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates.https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).localLookaheadPositionOf(androidx.compose.ui.layout.LayoutCoordinates,androidx.compose.ui.geometry.Offset,kotlin.Boolean)(
sourceCoordinates: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates,
relativeToSource: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset,
includeMotionFrameOfReference: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html
)`

Converts `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).localLookaheadPositionOf(androidx.compose.ui.layout.LayoutCoordinates,androidx.compose.ui.geometry.Offset,kotlin.Boolean)` in `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).localLookaheadPositionOf(androidx.compose.ui.layout.LayoutCoordinates,androidx.compose.ui.geometry.Offset,kotlin.Boolean)`'s lookahead coordinate space into local lookahead coordinates.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates.https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).toLookaheadCoordinates()()`

Converts a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` into a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` in the Lookahead coordinate space.
Cmn From [androidx.compose.material3.adaptive.layout.PaneScaffoldScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope) `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).paneExpansionDraggable(androidx.compose.material3.adaptive.layout.PaneExpansionState,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)(
state: https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneExpansionState,
minTouchTargetSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp,
interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource,
semanticsProperties: (https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?
)`

The modifier that should be applied on a drag handle composable so the drag handle can be dragged and operate on the provided `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneExpansionState` properly.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `@https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/ExperimentalMaterial3AdaptiveApi
@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable
https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).paneMargins(kotlin.Array)(vararg insets: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers)`

This modifier specifies the associated pane's margins according to the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` as insets.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `@https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/ExperimentalMaterial3AdaptiveApi
@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable
https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).paneMargins(androidx.compose.foundation.layout.PaddingValues,kotlin.Array)(
fixedMargins: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues,
vararg insets: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers
)`

This modifier specifies the associated pane's margins according to specified fixed margins and the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` as insets, if any.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredHeight(androidx.compose.ui.unit.Dp)(height: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)`

This modifier specifies the preferred height for a pane in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`s, and the pane scaffold implementation will try its best to respect this height when the associated pane is rendered as a reflowed or a levitated pane.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredHeight(kotlin.Float)(
proportion: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html
)`

This modifier specifies the preferred height for a pane as a proportion of the overall scaffold height.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredWidth(kotlin.Float)(proportion: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)`

This modifier specifies the preferred width for a pane as a proportion of the overall scaffold width.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredWidth(androidx.compose.ui.unit.Dp)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)`

This modifier specifies the preferred width for a pane in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`s, and the pane scaffold implementation will try its best to respect this width when the associated pane is rendered as a fixed pane, i.e., a pane that are not stretching to fill the remaining spaces.
Cmn

### Inherited properties

From [androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldScope) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-map/index.html<Role, https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester>` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldScope#focusRequesters()` Cmn From [androidx.compose.ui.layout.LookaheadScope](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope) `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Placeable.PlacementScope.https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.Placeable.PlacementScope).lookaheadScopeCoordinates()`

Returns the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope`.
Cmn From [androidx.compose.material3.adaptive.layout.PaneScaffoldPaneScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldPaneScope) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldPaneScope#isInteractable()`

Indicates if the pane should be interactable, i.e. focusable, clickable, etc.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneMotion` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldPaneScope#paneMotion()`

The specified pane motion of the current pane in the scope.
Cmn `Role` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldPaneScope#paneRole()`

The role of the current pane in the scope.
Cmn From [androidx.compose.material3.adaptive.layout.PaneScaffoldScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope) `https://developer.android.com/reference/kotlin/androidx/compose/runtime/saveable/SaveableStateHolder` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#saveableStateHolder()`

The saveable state holder to save pane states across their visibility life-cycles.
Cmn From [androidx.compose.material3.adaptive.layout.PaneScaffoldTransitionScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldTransitionScope) `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldMotionDataProvider<Role>` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldTransitionScope#motionDataProvider()`

Provides measurement and other data required in motion calculation like the size and offset of each pane before and after the motion.
Cmn `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldTransitionScope#motionProgress()`

The current motion progress.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition<ScaffoldValue>` `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldTransitionScope#scaffoldStateTransition()`

The current scaffold state transition between `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldValue`s.
Cmn

## Extension functions

### ExtendedPaneScaffoldPaneScope.AnimatedPane

Cmn Artifact: [androidx.compose.material3.adaptive:adaptive-layout](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/adaptive/layout/Pane.kt+function:AnimatedPane)

```
@ExperimentalMaterial3AdaptiveApi
@Composable
fun <RoleT : PaneScaffoldRole, ScaffoldValueT : PaneScaffoldValue<RoleT>> ExtendedPaneScaffoldPaneScope<RoleT, ScaffoldValueT>.AnimatedPane(
    modifier: Modifier = Modifier,
    enterTransition: EnterTransition = motionDataProvider.calculateDefaultEnterTransition(paneRole),
    exitTransition: ExitTransition = motionDataProvider.calculateDefaultExitTransition(paneRole),
    boundsAnimationSpec: FiniteAnimationSpec<IntRect> = PaneMotionDefaults.AnimationSpec,
    dragToResizeHandle: (@Composable (DragToResizeState) -> Unit)? = null,
    shape: Shape = RectangleShape,
    content: @Composable AnimatedPaneScope.() -> Unit
): Unit
```

The root composable of pane contents in a `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/package-summary#ThreePaneScaffold(androidx.compose.ui.Modifier,androidx.compose.material3.adaptive.layout.PaneScaffoldDirective,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldValue,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldHorizontalOrder,kotlin.Function1,kotlin.Function1,androidx.compose.material3.adaptive.layout.PaneExpansionState,kotlin.Function2,kotlin.Function1)` that supports default motions during pane switching. It's recommended to use this composable to wrap your own contents when passing them into pane parameters of the scaffold functions, therefore your panes can have a nice default animation for free.

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
)
```

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val extraItems = listOf("Extra 1", "Extra 2", "Extra 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    extraPane = {
        AnimatedPane {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
            initialAnchoredIndex = 1,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

```kotlin
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsDialogSample<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val extraItems = listOf("Extra 1", "Extra 2", "Extra 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    extraPane = {
        AnimatedPane(shape = RoundedCornerShape(16.dp)) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
            initialAnchoredIndex = 1,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator<NavItemData>()
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        AnimatedPane {
            MainPaneContent(
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
    },
    extraPane = {
        AnimatedPane {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsBottomSheetSample<NavItemData>()
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        AnimatedPane {
            MainPaneContent(
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
    },
    extraPane = {
        AnimatedPane(
            modifier =
                Modifier.preferredWidth(1f)
                    .preferredHeight(0.5f)
                    .background(MaterialTheme.colorScheme.surface),
            dragToResizeHandle = { BottomSheetDefaults.DragHandle() },
        ) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier applied to the `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPane.composable#(androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope).AnimatedPane(androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,androidx.compose.ui.graphics.Shape,kotlin.Function1)`. |
| `enterTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = motionDataProvider.calculateDefaultEnterTransition(paneRole)` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` used to animate the pane in. |
| `exitTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = motionDataProvider.calculateDefaultExitTransition(paneRole)` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` used to animate the pane out. |
| `boundsAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntRect> = PaneMotionDefaults.AnimationSpec` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` used to animate the bounds of the pane when the pane is keeping showing but changing its size and/or position. |
| `dragToResizeHandle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/DragToResizeState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional handle which will be shown when the pane is levitated and drag-to-resizable; the handle will be draggable and clickable to resize the pane freely or among collapsed, partially expanded, and expanded states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/rememberDragToResizeState.composable#rememberDragToResizeState(androidx.compose.material3.adaptive.layout.DockedEdge,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for more details about how to implement the drag-to-resize behavior. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | The shape of the pane, which will also be applied to the shadow when the pane is levitated. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPane.composable#(androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope).AnimatedPane(androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,androidx.compose.ui.graphics.Shape,kotlin.Function1)`. Also see `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope`. See usage samples at: |