chore(playground): fix splitter panel ordering and collapse after mobile transitions

- Keep SplitterPanel always mounted to preserve registration order
  with the SplitterRoot (unmount/remount via v-if inverts panel index,
  breaking drag direction and distribute calls)
- Dynamic min-size (0 when closed or mobile, 30 when open on desktop)
- Distribute [0, 100] on mobile to collapse the always-mounted panel
- Watch left+isMobile with flush:post + nextTick to distribute after
  Splitter internals settle
- Skip persisting collapsed distributions to preserve user's split

Author: johnleider

apps/playground/src/components/playground/app/PlaygroundAppContent.vue

@@ -1,22 +1,47 @@
 <script setup lang="ts">
   // Framework
-  import { SplitterRoot, useStorage } from '@vuetify/v0'
+  import { SplitterRoot, useBreakpoints, useStorage } from '@vuetify/v0'
+
+  // Components
+  import { usePlayground } from './PlaygroundApp.vue'
 
   // Utilities
-  import { onMounted, useTemplateRef } from 'vue'
+  import { nextTick, onMounted, useTemplateRef, watch } from 'vue'
 
+  const playground = usePlayground()
+  const { isMobile } = useBreakpoints()
   const storage = useStorage()
   const sizes = storage.get<number[]>('playground-h-sizes', [])
 
   function onLayout (values: number[]) {
-    sizes.value = values
+    // Don't persist collapsed distributions — preserve the user's
+    // preferred split so it can be restored when the panel reopens.
+    if (values[0]! > 0) sizes.value = values
   }
 
   const root = useTemplateRef<{ distribute: (sizes: number[]) => void }>('root')
 
-  onMounted(() => {
-    if (sizes.value.length > 0) root.value?.distribute(sizes.value)
-  })
+  function distribute () {
+    // On mobile or when left panel is closed, collapse to zero.
+    // The SplitterPanel stays mounted to preserve registration order,
+    // so its flex must be explicitly zeroed.
+    if (isMobile.value || !playground.left.value) {
+      root.value?.distribute([0, 100])
+    } else if (sizes.value.length > 0) {
+      root.value?.distribute(sizes.value)
+    }
+  }
+
+  onMounted(distribute)
+
+  // Re-distribute when left panel toggles or viewport changes.
+  // flush: 'post' + nextTick ensures this runs after the Splitter's
+  // own auto-redistribute watcher has settled.
+  watch(
+    () => [playground.left.value, isMobile.value] as const,
+    () => nextTick(distribute),
+    { flush: 'post' },
+  )
 </script>
 
 <template>

apps/playground/src/components/playground/app/PlaygroundAppLeft.vue

@@ -25,22 +25,27 @@
 </script>
 
 <template>
-  <!-- Desktop: only render SplitterPanel when open. When closed, the panel
-       is removed entirely so PlaygroundAppRight takes full width naturally.
-       No collapse timing issues — the Splitter never needs to redistribute. -->
-  <template v-if="!isMobile && open">
-    <SplitterPanel
-      :default-size="30"
-      :max-size="45"
-      :min-size="30"
+  <!-- Desktop: SplitterPanel is ALWAYS mounted to preserve registration order
+       with the SplitterRoot. Unmounting on mobile would cause it to re-register
+       at the end, inverting panel order and breaking drag direction. -->
+  <SplitterPanel
+    :default-size="30"
+    :max-size="45"
+    :min-size="open && !isMobile ? 30 : 0"
+  >
+    <div
+      v-if="!isMobile && open"
+      class="bg-surface h-full min-w-0 flex flex-col overflow-hidden"
     >
-      <div class="bg-surface h-full min-w-0 flex flex-col overflow-hidden">
-        <slot />
-      </div>
-    </SplitterPanel>
-
-    <PlaygroundSplitterHandle direction="horizontal" />
-  </template>
+      <slot />
+    </div>
+  </SplitterPanel>
+
+  <PlaygroundSplitterHandle
+    v-if="!isMobile"
+    direction="horizontal"
+    :hidden="!open"
+  />
 
   <!-- Mobile: fixed drawer -->
   <div