Revamp Debug into OWD diagnostics and PrimeVue theme lab.

Replace the minimal state/config tabs with a sidebar shell for desktop
inspection, store snapshots, terminal commands, and kit-primevue component
showcases in a larger maximizable window.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: dxlliv

src/module.ts

@@ -18,6 +18,7 @@ export default defineNuxtModule({
 
       addComponentsDir({
         path: resolve('./runtime/components'),
+        pathPrefix: false,
       })
     }
 
@@ -32,7 +33,7 @@ export default defineNuxtModule({
 
       registerTailwindPath(
         nuxt,
-        resolve('./runtime/components/**/*.{vue,mjs,ts}'),
+        resolve('./runtime/**/*.{vue,mjs,ts}'),
       )
     }
   },

src/runtime/app.config.ts

@@ -8,9 +8,12 @@ export default {
     main: {
       component: () => import('./components/Window/WindowDebug.vue'),
       resizable: true,
+      maximizable: true,
       size: {
-        width: 400,
-        height: 500,
+        width: 960,
+        height: 720,
+        minWidth: 720,
+        minHeight: 480,
       },
     },
   },

src/runtime/components/Debug/DebugBlock.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+defineProps<{
+  id: string
+  title: string
+  subtitle?: string
+  category?: string
+  full?: boolean
+  footer?: string
+}>()
+</script>
+
+<template>
+  <section
+    :id="id"
+    class="debug-block"
+    :class="{ 'debug-block--full': full }"
+  >
+    <header class="debug-block__header">
+      <div class="debug-block__titles">
+        <h3 class="debug-block__title">{{ title }}</h3>
+        <p v-if="subtitle" class="debug-block__subtitle">{{ subtitle }}</p>
+      </div>
+      <Tag v-if="category" :value="category" severity="secondary" class="debug-block__badge" />
+    </header>
+
+    <div class="debug-block__body">
+      <slot />
+    </div>
+
+    <p v-if="footer" class="debug-block__footer">{{ footer }}</p>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.debug-block {
+  height: fit-content;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.18);
+  border: 1px solid var(--owd-surface-700, #1d293d);
+  border-radius: 8px;
+
+  &--full {
+    grid-column: 1 / -1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.875rem;
+    padding-bottom: 0.625rem;
+    border-bottom: 1px solid var(--owd-surface-700, #1d293d);
+  }
+
+  &__titles {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--owd-color, #e8eef6);
+  }
+
+  &__subtitle {
+    margin: 0;
+    font-size: 0.75rem;
+    color: rgba(200, 212, 228, 0.55);
+  }
+
+  &__badge {
+    flex-shrink: 0;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  &__footer {
+    margin: 0.75rem 0 0;
+    font-size: 0.75rem;
+    color: rgba(200, 212, 228, 0.45);
+    font-style: italic;
+  }
+}
+</style>

src/runtime/components/Debug/DebugCodeBlock.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { serializeForDebug } from './utils/utilSerialize'
+
+const props = defineProps<{
+  value: unknown
+  note?: string
+}>()
+
+const copied = ref(false)
+
+const text = computed(() => {
+  if (typeof props.value === 'string') {
+    return props.value
+  }
+  return serializeForDebug(props.value)
+})
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(text.value)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 1500)
+  } catch {
+    // clipboard unavailable
+  }
+}
+</script>
+
+<template>
+  <div class="debug-code-block">
+    <div class="debug-code-block__toolbar">
+      <span v-if="note" class="debug-code-block__note">{{ note }}</span>
+      <Button
+        type="button"
+        size="small"
+        severity="secondary"
+        variant="text"
+        :label="copied ? 'Copied' : 'Copy'"
+        @click="copy"
+      />
+    </div>
+    <pre class="debug-code-block__pre">{{ text }}</pre>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.debug-code-block {
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &__note {
+    font-size: 0.75rem;
+    color: rgba(200, 212, 228, 0.55);
+  }
+
+  &__pre {
+    margin: 0;
+    padding: 0.75rem;
+    max-height: 320px;
+    overflow: auto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.75rem;
+    line-height: 1.45;
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--owd-surface-700, #1d293d);
+    border-radius: 6px;
+    color: var(--owd-color, #e8eef6);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+}
+</style>