Revert "fix: SSG playground page with client-only editor loading"

This reverts commit 461d95e.

Author: johnleider

apps/docs/src/components.d.ts

@@ -144,10 +144,14 @@ declare module 'vue' {
     PlaygroundEditorBreadcrumbs: typeof import('./components/playground/editor/PlaygroundEditorBreadcrumbs.vue')['default']
     PlaygroundEditorFileTree: typeof import('./components/playground/editor/PlaygroundEditorFileTree.vue')['default']
     PlaygroundEditorPreview: typeof import('./components/playground/editor/PlaygroundEditorPreview.vue')['default']
+    PlaygroundEditorTab: typeof import('./components/playground/editor/PlaygroundEditorTab.vue')['default']
     PlaygroundEditorTabs: typeof import('./components/playground/editor/PlaygroundEditorTabs.vue')['default']
+    PlaygroundLeft: typeof import('./components/playground/PlaygroundLeft.vue')['default']
     PlaygroundMarkdown: typeof import('./components/playground/markdown/PlaygroundMarkdown.vue')['default']
     PlaygroundMarkdownFooter: typeof import('./components/playground/markdown/PlaygroundMarkdownFooter.vue')['default']
     PlaygroundMarkdownHeader: typeof import('./components/playground/markdown/PlaygroundMarkdownHeader.vue')['default']
+    PlaygroundResizeBar: typeof import('./components/playground/PlaygroundResizeBar.vue')['default']
+    PlaygroundRight: typeof import('./components/playground/PlaygroundRight.vue')['default']
     PlaygroundWorkspace: typeof import('./components/playground/workspace/PlaygroundWorkspace.vue')['default']
     PlaygroundWorkspaceBottom: typeof import('./components/playground/workspace/PlaygroundWorkspaceBottom.vue')['default']
     PlaygroundWorkspaceLeft: typeof import('./components/playground/workspace/PlaygroundWorkspaceLeft.vue')['default']

apps/docs/src/components/playground/PlaygroundContent.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-  import { IN_BROWSER } from '#v0/constants/globals'
   import { useHead } from '@unhead/vue'
-  import { defineAsyncComponent, shallowRef } from 'vue'
 
-  const isLoaded = shallowRef(false)
-
-  const PlaygroundContent = IN_BROWSER
-    ? defineAsyncComponent({
-      loader: () => import('@/components/playground/PlaygroundContent.vue'),
-      onError: () => {},
-    })
-    : undefined
+  // Content
+  import IntroPanel from '@/skillz/intro.md'
 
   definePage({
     meta: {
@@ -30,25 +22,43 @@
 </script>
 
 <template>
-  <div class="h-screen flex flex-col bg-surface">
-    <!-- SSG/loading skeleton: shown until async component mounts -->
-    <template v-if="!PlaygroundContent">
-      <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface">
-        <div class="flex items-center gap-3">
-          <div class="w-8 h-8" />
-
-          <img
-            alt="Vuetify Play"
-            class="h-7"
-            src="https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-dark.svg"
-          >
-        </div>
-      </header>
-
-      <div class="flex-1" />
-    </template>
-
-    <!-- Client-only: full playground -->
-    <component :is="PlaygroundContent" v-if="PlaygroundContent" />
-  </div>
+  <PlaygroundApp>
+    <PlaygroundAppBar />
+
+    <PlaygroundAppContent>
+      <PlaygroundAppLeft>
+        <PlaygroundMarkdownHeader>
+          Introduction
+        </PlaygroundMarkdownHeader>
+
+        <PlaygroundMarkdown :component="IntroPanel" />
+      </PlaygroundAppLeft>
+
+      <PlaygroundAppRight>
+        <PlaygroundWorkspace>
+          <PlaygroundWorkspaceTop>
+            <PlaygroundWorkspaceLeft>
+              <PlaygroundEditorFileTree />
+            </PlaygroundWorkspaceLeft>
+
+            <PlaygroundWorkspaceRight>
+              <PlaygroundEditorTabs />
+
+              <PlaygroundEditorBreadcrumbs />
+
+              <PlaygroundEditor />
+            </PlaygroundWorkspaceRight>
+
+            <PlaygroundWorkspaceSide>
+              <PlaygroundEditorPreview />
+            </PlaygroundWorkspaceSide>
+          </PlaygroundWorkspaceTop>
+
+          <PlaygroundWorkspaceBottom>
+            <PlaygroundEditorPreview />
+          </PlaygroundWorkspaceBottom>
+        </PlaygroundWorkspace>
+      </PlaygroundAppRight>
+    </PlaygroundAppContent>
+  </PlaygroundApp>
 </template>

apps/docs/src/pages/playground.vue

@@ -49,7 +49,7 @@ export default defineConfig({
       ])
       const apiRoutes = apiSlugs.map(slug => `/api/${slug}`)
       const skillzRoutes = skillzSlugs.map(slug => `/skillz/${slug}`)
-      return [...paths, ...apiRoutes, ...skillzRoutes]
+      return [...paths, ...apiRoutes, ...skillzRoutes].filter(p => p !== '/playground')
     },
     onFinished () {
       generateSitemap({
@@ -104,7 +104,7 @@ export default defineConfig({
         // Exclude large on-demand chunks from precache
         // - Mermaid/Cytoscape: diagram tools, loaded only when docs use them
         // - vue.worker/playground/jsx: Monaco editor assets, only needed in the playground
-        globIgnores: ['**/*Diagram-*.js', '**/mermaid*.js', '**/cytoscape*.js', '**/vue.worker*.js', '**/playground-*.js', '**/Playground*-*.js', '**/jsx-*.js'],
+        globIgnores: ['**/*Diagram-*.js', '**/mermaid*.js', '**/cytoscape*.js', '**/vue.worker*.js', '**/playground-*.js', '**/jsx-*.js'],
         navigateFallback: null,
       },
     }),