Refactor the Main Layout.

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/CampaignScreen.kt

@@ -2,6 +2,7 @@ package com.pixelized.desktop.lwa.ui.screen.campaign
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -106,7 +107,7 @@ fun CampaignScreen(
                 },
                 chat = {
                     CampaignChat(
-                        modifier = Modifier.padding(all = 8.dp),
+                        modifier = Modifier.padding(vertical = MaterialTheme.lwa.dimen.paddingValue),
                         chatViewModel = campaignChatViewModel,
                     )
                 },
@@ -116,7 +117,7 @@ fun CampaignScreen(
                         contentAlignment = Alignment.Center,
                     ) {
                         PortraitOverlay(
-                            modifier = Modifier.padding(all = 8.dp),
+                            modifier = Modifier.padding(paddingValues = MaterialTheme.lwa.dimen.paddingValues),
                         )
                     }
                 },
@@ -175,9 +176,9 @@ fun CampaignScreen(
                 leftOverlay = {
                     CharacterDetailPanel(
                         modifier = Modifier
-                            .padding(all = 8.dp)
+                            .padding(paddingValues = MaterialTheme.lwa.dimen.paddingValues)
-                            .padding(start = MaterialTheme.lwa.size.portrait.minimized.width + 8.dp)
+                            .padding(start = MaterialTheme.lwa.dimen.portrait.minimized.width + MaterialTheme.lwa.dimen.paddingValue)
-                            .width(width = 128.dp * 4)
+                            .width(width = MaterialTheme.lwa.dimen.layout.detailWidth)
                             .fillMaxHeight(),
                         transitionSpec = rememberTransitionAnimation(direction = LayoutDirection.Ltr),
                         detailPanelViewModel = playerDetailViewModel,
@@ -192,9 +193,9 @@ fun CampaignScreen(
                 rightOverlay = {
                     CharacterDetailPanel(
                         modifier = Modifier
-                            .padding(all = 8.dp)
+                            .padding(paddingValues = MaterialTheme.lwa.dimen.paddingValues)
-                            .padding(end = MaterialTheme.lwa.size.portrait.minimized.width + 8.dp)
+                            .padding(end = MaterialTheme.lwa.dimen.portrait.minimized.width + MaterialTheme.lwa.dimen.paddingValue)
-                            .width(width = 128.dp * 4)
+                            .width(width = MaterialTheme.lwa.dimen.layout.detailWidth)
                             .fillMaxHeight(),
                         transitionSpec = rememberTransitionAnimation(direction = LayoutDirection.Rtl),
                         detailPanelViewModel = npcDetailViewModel,
@@ -342,40 +343,39 @@ private fun CampaignLayout(
             modifier = modifier,
         ) {
             top()
+
             Box(
-                modifier = Modifier.weight(weight = 1f, fill = true),
+                modifier = Modifier
+                    .weight(weight = 1f, fill = true)
+                    .onSizeChanged { mainState.value = it.toDp(density) },
             ) {
-                Box(
+                main()
-                    modifier = Modifier
+
-                        .onSizeChanged { mainState.value = it.toDp(density) }
+                Row {
-                        .matchParentSize(),
+                    Box(
-                ) {
+                        modifier = Modifier
-                    main()
+                            .width(width = MaterialTheme.lwa.dimen.layout.panelWidth)
-                }
+                            .fillMaxHeight()
-                Box(
+                            .onSizeChanged { leftPanelState.value = it.toDp(density) },
-                    modifier = Modifier
+                    ) {
-                        .align(alignment = Alignment.BottomStart)
+                        leftPanel()
-                        .padding(
+                    }
-                            start = MaterialTheme.lwa.size.portrait.minimized.width * 2 + 20.dp,
+                    Box(
-                            end = MaterialTheme.lwa.size.portrait.minimized.width * 2 + 20.dp + 56.dp,
+                        modifier = Modifier
-                        )
+                            .align(alignment = Alignment.Bottom)
-                        .onSizeChanged { chatOverlayState.value = it.toDp(density) },
+                            .weight(weight = 1f, fill = true)
-                ) {
+                            .onSizeChanged { chatOverlayState.value = it.toDp(density) },
-                    chat()
+                    ) {
-                }
+                        chat()
-                Box(
+                    }
-                    modifier = Modifier
+                    Box(
-                        .align(alignment = Alignment.CenterStart)
+                        modifier = Modifier
-                        .onSizeChanged { leftPanelState.value = it.toDp(density) },
+                            .width(width = MaterialTheme.lwa.dimen.layout.panelWidth)
-                ) {
+                            .fillMaxHeight()
-                    leftPanel()
+                            .onSizeChanged { rightPanelState.value = it.toDp(density) },
-                }
+                    ) {
-                Box(
+                        rightPanel()
-                    modifier = Modifier
+                    }
-                        .align(alignment = Alignment.CenterEnd)
-                        .onSizeChanged { rightPanelState.value = it.toDp(density) },
-                ) {
-                    rightPanel()
                 }
                 Box(
                     modifier = Modifier

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/header/CharacterDetailHeader.kt

@@ -108,7 +108,7 @@ object CharacterDetailHeaderDefault {
 fun CharacterDetailHeader(
     modifier: Modifier = Modifier,
     paddings: PaddingValues = CharacterDetailHeaderDefault.paddings,
-    iconSize: Dp = MaterialTheme.lwa.size.sheet.subCategory,
+    iconSize: Dp = MaterialTheme.lwa.dimen.sheet.subCategory,
     header: State<CharacterDetailHeaderUio?>,
     onDismissRequest: () -> Unit,
     onLevelUp: () -> Unit,

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/sheet/CharacterDetailSheet.kt

@@ -70,7 +70,7 @@ fun CharacterDetailSheet(
         ) {
             sheet.value?.characteristics?.forEach {
                 CharacterDetailSheetCharacteristic(
-                    modifier = Modifier.size(size = MaterialTheme.lwa.size.sheet.characteristic),
+                    modifier = Modifier.size(size = MaterialTheme.lwa.dimen.sheet.characteristic),
                     characteristic = it,
                     onClick = { onCharacteristic(it) },
                 )

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbon.kt

@@ -1,29 +1,35 @@
 package com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon
 
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.PointerMatcher
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.onClick
+import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.PointerButton
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
+import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonAlteration
 import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonPortrait
 import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonRoll
-import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonAlteration
+import com.pixelized.desktop.lwa.ui.theme.lwa
+import com.pixelized.desktop.lwa.utils.extention.invert
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun CharacterRibbon(
     modifier: Modifier = Modifier,
     layoutDirection: LayoutDirection,
     viewModel: CharacterRibbonViewModel,
-    padding: PaddingValues = PaddingValues(all = 8.dp),
+    padding: PaddingValues = MaterialTheme.lwa.dimen.paddingValues,
     onCharacterLeftClick: (characterSheetId: String) -> Unit,
     onCharacterRightClick: (characterSheetId: String) -> Unit,
     onLevelUp: (characterSheetId: String) -> Unit,
@@ -36,32 +42,42 @@ fun CharacterRibbon(
         LazyColumn(
             modifier = modifier,
             contentPadding = padding,
-            verticalArrangement = Arrangement.spacedBy(space = 8.dp)
+            verticalArrangement = Arrangement.spacedBy(
+                space = MaterialTheme.lwa.dimen.paddingValue,
+            ),
         ) {
             items(
                 items = characters.value,
                 key = { it.characterSheetId },
             ) {
-                Row(
+                Box(
                     modifier = Modifier
                         .animateItem()
-                        .graphicsLayer { if (it.hideOverruled) this.alpha = 0.3f },
+                        .graphicsLayer { if (it.hideOverruled) this.alpha = 0.3f }
-                    horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
+                        .onClick(
-                ) {
+                            matcher = PointerMatcher.mouse(PointerButton.Primary),
-                    Box {
+                            enabled = it.enableDetail,
-                        CharacterRibbonPortrait(
+                            onClick = { onCharacterLeftClick(it.characterSheetId) },
-                            character = it.portrait,
-                            onCharacterLeftClick = { onCharacterLeftClick(it.characterSheetId) },
-                            onCharacterRightClick = { onCharacterRightClick(it.characterSheetId) },
-                            onLevelUp = { onLevelUp(it.characterSheetId) },
                         )
-                        CharacterRibbonRoll(
+                        .onClick(
-                            value = viewModel.roll(characterSheetId = it.characterSheetId).value,
+                            matcher = PointerMatcher.mouse(PointerButton.Secondary),
+                            enabled = it.enableDetail,
+                            onClick = { onCharacterRightClick(it.characterSheetId) },
+                        ),
+                ) {
+                    CharacterRibbonPortrait(
+                        character = it.portrait,
+                        onLevelUp = { onLevelUp(it.characterSheetId) },
+                    )
+                    CompositionLocalProvider(
+                        LocalLayoutDirection provides layoutDirection.invert
+                    ) {
+                        CharacterRibbonAlteration(
+                            status = it.status,
                         )
                     }
-                    CharacterRibbonAlteration(
+                    CharacterRibbonRoll(
-                        status = it.status,
+                        value = viewModel.roll(characterSheetId = it.characterSheetId).value,
-                        direction = LayoutDirection.Ltr,
                     )
                 }
             }

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbonFactory.kt

@@ -34,11 +34,11 @@ class CharacterRibbonFactory(
         return CharacterRibbonUio(
             characterSheetId = characterSheet.id,
             hideOverruled = hideOverruled,
+            enableDetail = enableCharacterSheet,
             portrait = CharacterRibbonPortraitUio(
                 portrait = alteredCharacterSheet.thumbnail,
                 name = alteredCharacterSheet.name,
                 levelUp = alteredCharacterSheet.shouldLevelUp,
-                enableDetail = enableCharacterSheet,
                 stats = takeIf { enableCharacterStats }?.let {
                     CharacterRibbonPortraitUio.StatsDetail(
                         hp = alteredCharacterSheet.maxHp - alteredCharacterSheet.damage,
@@ -58,7 +58,7 @@ class CharacterRibbonFactory(
                         ),
                     )
                 }.foldInto(
-                    size = 5,
+                    size = 4,
                 )
             } ?: emptyList(),
         )

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonAlteration.kt

@@ -11,15 +11,16 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.FilterQuality
 import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
@@ -41,16 +42,14 @@ data class CharacterRibbonAlterationUio(
 @Composable
 fun CharacterRibbonAlteration(
     modifier: Modifier = Modifier,
-    size: DpSize = MaterialTheme.lwa.size.portrait.minimized,
+    width: Dp = MaterialTheme.lwa.dimen.portrait.minimized.width,
-    direction: LayoutDirection,
     status: List<List<CharacterRibbonAlterationUio>>,
 ) {
-    val currentDirection = LocalLayoutDirection.current
+    val direction = LocalLayoutDirection.current
-
     Row(
         modifier = Modifier
             .animateContentSize()
-            .size(size = size)
+            .width(width = width)
             .then(other = modifier),
         horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
     ) {
@@ -59,43 +58,39 @@ fun CharacterRibbonAlteration(
                 modifier = Modifier.animateContentSize(),
                 verticalArrangement = Arrangement.spacedBy(space = 2.dp),
             ) {
-                CompositionLocalProvider(
+                columns.forEach {
-                    LocalLayoutDirection provides LayoutDirection.Ltr
+                    BasicTooltipLayout(
-                ) {
+                        delayMillis = 0,
-                    columns.forEach {
+                        tooltip = it.tooltips,
-                        BasicTooltipLayout(
+                        tooltipPlacement = remember(direction) {
-                            delayMillis = 0,
+                            TooltipPlacement.ComponentRect(
-                            tooltip = it.tooltips,
+                                anchor = when (direction) {
-                            tooltipPlacement = remember(currentDirection) {
+                                    LayoutDirection.Ltr -> Alignment.CenterEnd
-                                TooltipPlacement.ComponentRect(
+                                    LayoutDirection.Rtl -> Alignment.CenterStart
-                                    anchor = when (direction) {
+                                },
-                                        LayoutDirection.Ltr -> Alignment.CenterEnd
+                                alignment = when (direction) {
-                                        LayoutDirection.Rtl -> Alignment.CenterStart
+                                    LayoutDirection.Ltr -> Alignment.CenterEnd
-                                    },
+                                    LayoutDirection.Rtl -> Alignment.CenterStart
-                                    alignment = when (direction) {
+                                },
-                                        LayoutDirection.Ltr -> Alignment.CenterEnd
+                            )
-                                        LayoutDirection.Rtl -> Alignment.CenterStart
+                        },
-                                    },
+                        content = {
+                            AnimatedContent(
+                                targetState = it.icon,
+                                transitionSpec = { fadeIn() togetherWith fadeOut() },
+                            ) { icon ->
+                                AsyncImage(
+                                    modifier = Modifier.size(24.dp),
+                                    model = ImageRequest.Builder(context = PlatformContext.INSTANCE)
+                                        .data(data = icon)
+                                        .size(size = 48)
+                                        .build(),
+                                    filterQuality = FilterQuality.High,
+                                    contentDescription = null,
                                 )
-                            },
-                            content = {
-                                AnimatedContent(
-                                    targetState = it.icon,
-                                    transitionSpec = { fadeIn() togetherWith fadeOut() },
-                                ) { icon ->
-                                    AsyncImage(
-                                        modifier = Modifier.size(24.dp),
-                                        model = ImageRequest.Builder(context = PlatformContext.INSTANCE)
-                                            .data(data = icon)
-                                            .size(size = 48)
-                                            .build(),
-                                        filterQuality = FilterQuality.High,
-                                        contentDescription = null,
-                                    )
-                                }
                             }
-                        )
+                        }
-                    }
+                    )
                 }
             }
         }

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonPortrait.kt

@@ -48,7 +48,6 @@ data class CharacterRibbonPortraitUio(
     val portrait: String?,
     val name: String,
     val levelUp: Boolean,
-    val enableDetail: Boolean,
     val stats: StatsDetail?,
 ) {
     @Stable
@@ -64,11 +63,9 @@ data class CharacterRibbonPortraitUio(
 @Composable
 fun CharacterRibbonPortrait(
     modifier: Modifier = Modifier,
-    size: DpSize = MaterialTheme.lwa.size.portrait.minimized,
+    size: DpSize = MaterialTheme.lwa.dimen.portrait.minimized,
     levelUpOffset: Dp = 9.dp,
     character: CharacterRibbonPortraitUio,
-    onCharacterLeftClick: () -> Unit,
-    onCharacterRightClick: () -> Unit,
     onLevelUp: () -> Unit,
 ) {
     val colorScheme = MaterialTheme.lwa.colorScheme
@@ -78,16 +75,6 @@ fun CharacterRibbonPortrait(
             .size(size = size)
             .clip(shape = MaterialTheme.lwa.shapes.portrait)
             .background(color = colorScheme.elevated.base1dp)
-            .onClick(
-                matcher = PointerMatcher.mouse(PointerButton.Primary),
-                enabled = character.enableDetail,
-                onClick = onCharacterLeftClick,
-            )
-            .onClick(
-                matcher = PointerMatcher.mouse(PointerButton.Secondary),
-                enabled = character.enableDetail,
-                onClick = onCharacterRightClick,
-            ),
     ) {
         AnimatedContent(
             targetState = character.portrait,

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonRoll.kt

@@ -86,7 +86,7 @@ class CharacterRibbonRollAnimation(
 @Composable
 fun CharacterRibbonRoll(
     modifier: Modifier = Modifier,
-    size: DpSize = MaterialTheme.lwa.size.portrait.minimized,
+    size: DpSize = MaterialTheme.lwa.dimen.portrait.minimized,
     value: CharacterRibbonRollUio?,
 ) {
     AnimatedContent(

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonUio.kt

@@ -6,6 +6,7 @@ import androidx.compose.runtime.Stable
 class CharacterRibbonUio(
     val characterSheetId: String,
     val hideOverruled: Boolean,
+    val enableDetail: Boolean,
     val portrait: CharacterRibbonPortraitUio,
     val status: List<List<CharacterRibbonAlterationUio>>,
 )

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt

@@ -20,7 +20,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
@@ -80,7 +79,6 @@ fun CampaignChat(
     modifier: Modifier = Modifier,
     chatViewModel: CampaignChatViewModel = koinViewModel(),
 ) {
-
     val lazyState = rememberLazyListState()
     val campaignLayoutScope = LocalCampaignLayoutScope.current
     val colorScheme = MaterialTheme.lwa.colorScheme
@@ -95,8 +93,8 @@ fun CampaignChat(
 
     Row(
         modifier = modifier.background(
-            shape = remember { RoundedCornerShape(8.dp) },
+            shape = MaterialTheme.lwa.shapes.chat,
-            color = remember { colorScheme.elevated.base1dp.copy(alpha = 0.5f) },
+            color = remember { colorScheme.elevated.base4dp.copy(alpha = 0.5f) },
         ),
     ) {
         AnimatedVisibility(
@@ -106,8 +104,17 @@ fun CampaignChat(
         ) {
             LazyColumn(
                 modifier = Modifier
-                    .width(width = campaignLayoutScope.chatOverlay.value.width - (32.dp + 8.dp))
+                    .width(
-                    .heightIn(min = MaterialTheme.lwa.size.portrait.minimized.height * 2 + 8.dp),
+                        // 32.dp + 8.dp for the button and the space
+                        width = min(
+                            campaignLayoutScope.chatOverlay.value.width - 40.dp,
+                            MaterialTheme.lwa.dimen.layout.chatMaxWidth
+                        ),
+                    )
+                    .heightIn(
+                        min = MaterialTheme.lwa.dimen.portrait.minimized.height,
+                        max = MaterialTheme.lwa.dimen.portrait.minimized.height * 2 + MaterialTheme.lwa.dimen.paddingValue,
+                    ),
                 state = lazyState,
                 verticalArrangement = Arrangement.spacedBy(
                     space = 4.dp,

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/LevelScreen.kt

@@ -292,7 +292,7 @@ private fun LevelUpContent(
                             key = { it.characteristicId }
                         ) {
                             LevelUpCharacteristic(
-                                modifier = Modifier.size(size = MaterialTheme.lwa.size.sheet.characteristic),
+                                modifier = Modifier.size(size = MaterialTheme.lwa.dimen.sheet.characteristic),
                                 characteristic = it,
                                 onClick = { onCharacteristic(it) },
                             )

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/items/LevelUpSubCharacteristic.kt

@@ -56,7 +56,7 @@ fun LevelUpSubCharacteristic(
                 Icon(
                     modifier = Modifier
                         .padding(bottom = 4.dp, end = 2.dp)
-                        .size(size = MaterialTheme.lwa.size.sheet.subCategory),
+                        .size(size = MaterialTheme.lwa.dimen.sheet.subCategory),
                     painter = painterResource(characteristic.icon),
                     contentDescription = null
                 )
@@ -64,7 +64,7 @@ fun LevelUpSubCharacteristic(
                 Box(
                     modifier = Modifier
                         .padding(bottom = 4.dp, end = 2.dp)
-                        .size(size = MaterialTheme.lwa.size.sheet.subCategory),
+                        .size(size = MaterialTheme.lwa.dimen.sheet.subCategory),
                 )
             }
             Text(

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/LwaTheme.kt

@@ -9,10 +9,10 @@ import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.remember
 import com.pixelized.desktop.lwa.ui.theme.color.LwaColors
 import com.pixelized.desktop.lwa.ui.theme.color.darkLwaColorTheme
+import com.pixelized.desktop.lwa.ui.theme.dimen.LwaDimen
+import com.pixelized.desktop.lwa.ui.theme.dimen.lwaDimen
 import com.pixelized.desktop.lwa.ui.theme.shapes.LwaShapes
 import com.pixelized.desktop.lwa.ui.theme.shapes.lwaShapes
-import com.pixelized.desktop.lwa.ui.theme.size.LwaSize
-import com.pixelized.desktop.lwa.ui.theme.size.lwaSize
 import com.pixelized.desktop.lwa.ui.theme.typography.LwaTypography
 import com.pixelized.desktop.lwa.ui.theme.typography.lwaTypography
 
@@ -31,7 +31,7 @@ data class LwaTheme(
     val colorScheme: LwaColors,
     val typography: LwaTypography,
     val shapes: LwaShapes,
-    val size: LwaSize,
+    val dimen: LwaDimen,
 )
 
 @Composable
@@ -41,14 +41,14 @@ fun LwaTheme(
     val lwaColors = darkLwaColorTheme()
     val lwaTypography = lwaTypography(colors = lwaColors)
     val lwaShapes = lwaShapes()
-    val lwaSize = lwaSize()
+    val lwaDimen = lwaDimen()
 
-    val theme = remember {
+    val theme = remember(lwaColors, lwaTypography, lwaShapes, lwaDimen) {
         LwaTheme(
             colorScheme = lwaColors,
             typography = lwaTypography,
             shapes = lwaShapes,
-            size = lwaSize,
+            dimen = lwaDimen,
         )
     }
 

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/dimen/LwaDimen.kt

@@ -0,0 +1,65 @@
+package com.pixelized.desktop.lwa.ui.theme.dimen
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+
+@Stable
+data class LwaDimen(
+    val paddingValue: Dp,
+    val paddingValues: PaddingValues,
+    val layout: Layout,
+    val portrait: Portrait,
+    val sheet: Sheet,
+) {
+    @Stable
+    data class Layout(
+        val panelWidth: Dp,
+        val detailWidth: Dp,
+        val chatMaxWidth: Dp,
+    )
+
+    @Stable
+    data class Portrait(
+        val minimized: DpSize,
+    )
+
+    @Stable
+    data class Sheet(
+        val subCategory: Dp,
+        val characteristic: DpSize,
+    )
+}
+
+@Composable
+@Stable
+fun lwaDimen(
+    paddingValue: Dp = 8.dp,
+    paddingValues: PaddingValues = PaddingValues(all = paddingValue),
+    portrait: LwaDimen.Portrait = LwaDimen.Portrait(
+        minimized = DpSize(width = 96.dp, height = 128.dp) * 1.14f,
+    ),
+    sheet: LwaDimen.Sheet = LwaDimen.Sheet(
+        subCategory = 14.dp,
+        characteristic = DpSize(width = 96.dp, height = 128.dp),
+    ),
+    layout: LwaDimen.Layout = LwaDimen.Layout(
+        panelWidth = portrait.minimized.width + paddingValue * 2,
+        detailWidth = 128.dp * 4,
+        chatMaxWidth = 600.dp,
+    ),
+): LwaDimen {
+    return remember {
+        LwaDimen(
+            paddingValue = paddingValue,
+            paddingValues = paddingValues,
+            portrait = portrait,
+            sheet = sheet,
+            layout = layout,
+        )
+    }
+}

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/shapes/LwaShapes.kt

@@ -12,6 +12,7 @@ import androidx.compose.ui.unit.dp
 data class LwaShapes(
     val base: Shapes,
     val portrait: Shape,
+    val chat: Shape,
     val item: Shape,
     val panel: Shape,
     val settings: Shape,
@@ -23,16 +24,20 @@ data class LwaShapes(
 fun lwaShapes(
     base: Shapes = Shapes(
         small = RoundedCornerShape(4.dp),
+        medium = RoundedCornerShape(8.dp),
+        large = RoundedCornerShape(16.dp),
     ),
-    portrait: Shape = RoundedCornerShape(8.dp),
+    portrait: Shape = base.medium,
-    item: Shape = RoundedCornerShape(8.dp),
+    chat: Shape = base.medium,
-    panel: Shape = RoundedCornerShape(8.dp),
+    item: Shape = base.medium,
-    settings: Shape = RoundedCornerShape(8.dp),
+    panel: Shape = base.medium,
-    gameMaster: Shape = RoundedCornerShape(8.dp),
+    settings: Shape = base.medium,
+    gameMaster: Shape = base.medium,
 ): LwaShapes = remember {
     LwaShapes(
         base = base,
         portrait = portrait,
+        chat = chat,
         item = item,
         panel = panel,
         settings = settings,

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/size/LwaSize.kt

@@ -1,42 +0,0 @@
-package com.pixelized.desktop.lwa.ui.theme.size
-
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Stable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.DpSize
-import androidx.compose.ui.unit.dp
-
-@Stable
-data class LwaSize(
-    val portrait: Portrait,
-    val sheet: Sheet,
-) {
-    @Stable
-    data class Portrait(
-        val minimized: DpSize,
-    )
-
-    @Stable
-    data class Sheet(
-        val subCategory: Dp,
-        val characteristic: DpSize,
-    )
-}
-
-@Composable
-@Stable
-fun lwaSize(
-    portrait: LwaSize.Portrait = LwaSize.Portrait(
-        minimized = DpSize(width = 96.dp, height = 128.dp),
-    ),
-    sheet: LwaSize.Sheet = LwaSize.Sheet(
-        subCategory = 14.dp,
-        characteristic = DpSize(width = 96.dp, height = 128.dp),
-    ),
-) = remember {
-    LwaSize(
-        portrait = portrait,
-        sheet = sheet,
-    )
-}

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/utils/extention/LayoutDirection+Invert.kt

@@ -0,0 +1,9 @@
+package com.pixelized.desktop.lwa.utils.extention
+
+import androidx.compose.ui.unit.LayoutDirection
+
+val LayoutDirection.invert: LayoutDirection
+    get() = when (this) {
+        LayoutDirection.Ltr -> LayoutDirection.Rtl
+        LayoutDirection.Rtl -> LayoutDirection.Ltr
+    }