@xenterprises/nuxt-x-marketing 1.0.3 → 1.1.0

package/.playground/app.vue

@@ -1,269 +0,0 @@
-<template>
-  <UApp>
-  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-    <!-- Sidebar Navigation -->
-    <aside class="fixed top-0 left-0 w-64 h-screen bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 overflow-y-auto z-50">
-      <!-- Header -->
-      <div class="p-6 border-b border-neutral-200 dark:border-neutral-800">
-        <NuxtLink to="/" class="block">
-          <h1 class="text-lg font-bold text-neutral-900 dark:text-white">nuxt-x-marketing</h1>
-          <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Component Playground</p>
-        </NuxtLink>
-      </div>
-
-      <!-- Dark Mode Toggle -->
-      <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
-        <button
-          @click="toggleDarkMode"
-          class="flex items-center gap-2 px-3 py-2 w-full rounded-lg text-sm text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
-        >
-          <ClientOnly>
-            <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
-            <template #fallback>
-              <UIcon name="i-lucide-moon" class="w-4 h-4" />
-            </template>
-          </ClientOnly>
-          <ClientOnly>
-            <span>{{ isDark ? 'Light Mode' : 'Dark Mode' }}</span>
-            <template #fallback><span>Dark Mode</span></template>
-          </ClientOnly>
-        </button>
-      </div>
-
-      <!-- Navigation -->
-      <nav class="p-4 space-y-6">
-        <!-- Getting Started -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Getting Started</h3>
-          <ul class="space-y-1">
-            <li>
-              <NuxtLink
-                to="/"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors"
-                :class="isActive('/') ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <UIcon name="i-lucide-home" class="w-4 h-4" />
-                <span>Kitchen Sink</span>
-              </NuxtLink>
-            </li>
-            <li>
-              <NuxtLink
-                to="/config"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors"
-                :class="isActive('/config') ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <UIcon name="i-lucide-settings" class="w-4 h-4" />
-                <span>App Config</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Layout -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Layout</h3>
-          <ul class="space-y-1">
-            <li v-for="item in navItems.layout" :key="item.to">
-              <NuxtLink
-                :to="item.to"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>{{ item.label }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Hero -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Hero</h3>
-          <ul class="space-y-1">
-            <li>
-              <NuxtLink
-                to="/hero"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive('/hero') ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>Hero</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Content -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Content</h3>
-          <ul class="space-y-1">
-            <li v-for="item in navItems.content" :key="item.to">
-              <NuxtLink
-                :to="item.to"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>{{ item.label }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Blog -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Blog</h3>
-          <ul class="space-y-1">
-            <li v-for="item in navItems.blog" :key="item.to">
-              <NuxtLink
-                :to="item.to"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>{{ item.label }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- UI Elements -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">UI Elements</h3>
-          <ul class="space-y-1">
-            <li v-for="item in navItems.ui" :key="item.to">
-              <NuxtLink
-                :to="item.to"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>{{ item.label }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Modals -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Modals</h3>
-          <ul class="space-y-1">
-            <li v-for="item in navItems.modals" :key="item.to">
-              <NuxtLink
-                :to="item.to"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>{{ item.label }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Notifications -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Notifications</h3>
-          <ul class="space-y-1">
-            <li v-for="item in navItems.notifications" :key="item.to">
-              <NuxtLink
-                :to="item.to"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>{{ item.label }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Utilities -->
-        <div>
-          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Utilities</h3>
-          <ul class="space-y-1">
-            <li v-for="item in navItems.utilities" :key="item.to">
-              <NuxtLink
-                :to="item.to"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
-                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
-              >
-                <span>{{ item.label }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-      </nav>
-
-      <!-- Footer -->
-      <div class="p-4 border-t border-neutral-200 dark:border-neutral-800 mt-auto">
-        <p class="text-xs text-neutral-400 dark:text-neutral-500 text-center">33 Components</p>
-      </div>
-    </aside>
-
-    <!-- Main Content -->
-    <main class="ml-64">
-      <NuxtPage />
-    </main>
-  </div>
-  </UApp>
-</template>
-
-<script setup>
-const colorMode = useColorMode()
-const route = useRoute()
-
-const isDark = computed(() => colorMode.value === 'dark')
-
-function toggleDarkMode() {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-}
-
-function isActive(path) {
-  return route.path === path
-}
-
-const navItems = {
-  layout: [
-    { label: 'Navbar', to: '/layout/navbar' },
-    { label: 'Section', to: '/layout/section' },
-    { label: 'Footer', to: '/layout/footer' },
-    { label: 'Legal Footer', to: '/layout/legal-footer' },
-    { label: 'X Legal Footer', to: '/layout/x-legal' }
-  ],
-  content: [
-    { label: 'Features', to: '/content/features' },
-    { label: 'Testimonials', to: '/content/testimonials' },
-    { label: 'Pricing', to: '/content/pricing' },
-    { label: 'Comparison', to: '/content/comparison' },
-    { label: 'Newsletter', to: '/content/newsletter' },
-    { label: 'CTA', to: '/content/cta' }
-  ],
-  blog: [
-    { label: 'Card', to: '/blog/card' },
-    { label: 'List', to: '/blog/list' },
-    { label: 'Detail', to: '/blog/detail' },
-    { label: 'Sidebar', to: '/blog/sidebar' },
-    { label: 'Author', to: '/blog/author' },
-    { label: 'Navigation', to: '/blog/navigation' },
-    { label: 'Newsletter CTA', to: '/blog/cta' }
-  ],
-  ui: [
-    { label: 'Badge', to: '/ui/badge' },
-    { label: 'Glass Card', to: '/ui/glass-card' },
-    { label: 'Promo Card', to: '/ui/promo-card' },
-    { label: 'Glow Divider', to: '/ui/glow-divider' },
-    { label: 'Bg Pattern', to: '/ui/bg-pattern' },
-    { label: 'Section Stitch', to: '/ui/section-stitch' }
-  ],
-  modals: [
-    { label: 'Video Modal', to: '/modals/video-modal' },
-    { label: 'Image Lightbox', to: '/modals/image-lightbox' },
-    { label: 'Feature Modal', to: '/modals/feature-modal' }
-  ],
-  notifications: [
-    { label: 'Announcement Bar', to: '/notifications/announcement-bar' },
-    { label: 'Cookie Banner', to: '/notifications/cookie-banner' },
-    { label: 'Cookie Toast', to: '/notifications/cookie-toast' },
-    { label: 'GDPR', to: '/notifications/gdpr' },
-    { label: 'Social Proof Toast', to: '/notifications/social-proof-toast' }
-  ],
-  utilities: [
-    { label: 'Back to Top', to: '/utilities/back-to-top' },
-    { label: 'Popup Chat', to: '/utilities/popup-chat' }
-  ]
-}
-</script>

package/.playground/components/AppFooter.vue

@@ -1,103 +0,0 @@
-<template>
-	<footer class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
-		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-			<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-				<!-- About -->
-				<div>
-					<h3 class="font-semibold text-gray-900 dark:text-white mb-4">
-						X Marketing Components
-					</h3>
-					<p class="text-sm text-gray-600 dark:text-gray-400">
-						A comprehensive collection of 60+ production-ready marketing components built with Nuxt UI v4.
-					</p>
-				</div>
-
-				<!-- Documentation -->
-				<div>
-					<h4 class="font-semibold text-gray-900 dark:text-white mb-4">Documentation</h4>
-					<ul class="space-y-2">
-						<li>
-							<NuxtLink
-								to="/docs"
-								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-							>
-								Getting Started
-							</NuxtLink>
-						</li>
-						<li>
-							<NuxtLink
-								to="/docs/quick-start"
-								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-							>
-								Quick Start
-							</NuxtLink>
-						</li>
-						<li>
-							<NuxtLink
-								to="/docs/components"
-								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-							>
-								All Components
-							</NuxtLink>
-						</li>
-					</ul>
-				</div>
-
-				<!-- Resources -->
-				<div>
-					<h4 class="font-semibold text-gray-900 dark:text-white mb-4">Resources</h4>
-					<ul class="space-y-2">
-						<li>
-							<a
-								href="https://ui.nuxt.com"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-							>
-								Nuxt UI Docs
-							</a>
-						</li>
-						<li>
-							<a
-								href="https://nuxt.com"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-							>
-								Nuxt Docs
-							</a>
-						</li>
-						<li>
-							<a
-								href="https://tailwindcss.com"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-							>
-								Tailwind CSS
-							</a>
-						</li>
-					</ul>
-				</div>
-			</div>
-
-			<!-- Bottom -->
-			<div class="border-t border-gray-200 dark:border-gray-800 pt-8 flex justify-between items-center">
-				<p class="text-sm text-gray-600 dark:text-gray-400">
-					© 2025 X Marketing. Built with Nuxt UI v4.
-				</p>
-				<div class="flex items-center gap-4">
-					<a
-						href="https://github.com"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-					>
-						<UIcon name="i-lucide-github" class="w-5 h-5" />
-					</a>
-				</div>
-			</div>
-		</div>
-	</footer>
-</template>
-

package/.playground/components/AppHeader.vue

@@ -1,41 +0,0 @@
-<template>
-	<header class="sticky top-0 z-40 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
-		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-			<div class="flex justify-between items-center h-16">
-				<!-- Logo -->
-				<NuxtLink to="/" class="flex items-center gap-2 font-semibold text-lg">
-					<UIcon name="i-lucide-layers" class="w-6 h-6 text-primary" />
-					<span>X Marketing</span>
-				</NuxtLink>
-
-				<!-- Navigation -->
-				<nav class="hidden md:flex items-center gap-8">
-					<NuxtLink
-						to="/"
-						class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-					>
-						Demo
-					</NuxtLink>
-					<NuxtLink
-						to="/docs"
-						class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-					>
-						Documentation
-					</NuxtLink>
-				</nav>
-
-				<!-- Right Actions -->
-				<div class="flex items-center gap-4">
-					<UButton
-						to="/docs/quick-start"
-						variant="soft"
-						size="sm"
-						label="Get Started"
-					/>
-					<UColorModeButton />
-				</div>
-			</div>
-		</div>
-	</header>
-</template>
-

package/.playground/components/CodeExample.vue

@@ -1,70 +0,0 @@
-<template>
-	<div
-		class="border border-default rounded-lg overflow-hidden bg-white dark:bg-slate-950 shadow-sm"
-	>
-		<div
-			class="flex items-center justify-between bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 py-3 border-b border-default"
-		>
-			<div class="flex items-center gap-2">
-				<div class="w-2 h-2 rounded-full bg-blue-500"></div>
-				<span
-					class="text-sm font-semibold text-slate-700 dark:text-slate-300"
-					>{{ title }}</span
-				>
-			</div>
-			<div class="flex items-center gap-2">
-				<span
-					v-if="copied"
-					class="text-xs text-green-600 dark:text-green-400 font-medium flex items-center gap-1"
-				>
-					<i class="i-lucide-check w-3 h-3" />
-					Copied!
-				</span>
-				<UButton
-					:icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
-					:color="copied ? 'green' : 'gray'"
-					variant="ghost"
-					size="xs"
-					@click="copyCode"
-					:disabled="copied"
-					class="transition-all"
-				>
-					{{ copied ? "Copied" : "Copy" }}
-				</UButton>
-			</div>
-		</div>
-		<div class="overflow-x-auto bg-white dark:bg-slate-950">
-			<pre
-				class="p-4 text-sm leading-relaxed text-slate-800 dark:text-slate-200 font-mono whitespace-pre-wrap break-words"
-			><code>{{ code }}</code></pre>
-		</div>
-	</div>
-</template>
-
-<script setup>
-const props = defineProps({
-	title: {
-		type: String,
-		default: "Code Example",
-	},
-	code: {
-		type: String,
-		required: true,
-	},
-});
-
-const copied = ref(false);
-
-const copyCode = async () => {
-	try {
-		await navigator.clipboard.writeText(props.code);
-		copied.value = true;
-		setTimeout(() => {
-			copied.value = false;
-		}, 2000);
-	} catch (err) {
-		console.error("Failed to copy:", err);
-	}
-};
-</script>
-

package/.playground/components/ComponentPlayground.vue

@@ -1,117 +0,0 @@
-<template>
-	<div class="space-y-6">
-		<!-- Props Editor -->
-		<div class="border border-default rounded-lg overflow-hidden">
-			<div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 border-b border-default">
-				<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">
-					Customize Props
-				</h3>
-			</div>
-			<div class="p-4 space-y-4">
-				<div v-for="(value, key) in editableProps" :key="key" class="space-y-2">
-					<label class="text-sm font-medium text-slate-700 dark:text-slate-300">
-						{{ key }}
-					</label>
-					<div v-if="typeof value === 'boolean'" class="flex items-center gap-2">
-						<UToggle v-model="editableProps[key]" />
-						<span class="text-xs text-slate-500">{{ value ? 'true' : 'false' }}</span>
-					</div>
-					<UInput
-						v-else-if="typeof value === 'string'"
-						v-model="editableProps[key]"
-						:placeholder="`Enter ${key}`"
-						size="sm"
-					/>
-					<UInput
-						v-else-if="typeof value === 'number'"
-						v-model.number="editableProps[key]"
-						type="number"
-						:placeholder="`Enter ${key}`"
-						size="sm"
-					/>
-					<div v-else class="text-xs text-slate-500">
-						{{ typeof value }} (not editable)
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Live Preview -->
-		<div class="border border-default rounded-lg overflow-hidden">
-			<div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 border-b border-default">
-				<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">
-					Live Preview
-				</h3>
-			</div>
-			<div class="p-6 bg-white dark:bg-slate-950">
-				<slot :props="editableProps" />
-			</div>
-		</div>
-
-		<!-- Generated Code -->
-		<div class="border border-default rounded-lg overflow-hidden">
-			<div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 border-b border-default flex items-center justify-between">
-				<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">
-					Generated Code
-				</h3>
-				<UButton
-					icon="i-lucide-copy"
-					variant="ghost"
-					size="xs"
-					@click="copyGeneratedCode"
-				>
-					{{ codeCopied ? 'Copied!' : 'Copy' }}
-				</UButton>
-			</div>
-			<div class="overflow-x-auto bg-white dark:bg-slate-950">
-				<pre class="p-4 text-sm leading-relaxed text-slate-800 dark:text-slate-200 font-mono"><code>{{ generatedCode }}</code></pre>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup>
-const props = defineProps({
-	componentName: {
-		type: String,
-		required: true,
-	},
-	initialProps: {
-		type: Object,
-		default: () => ({}),
-	},
-});
-
-const editableProps = ref({ ...props.initialProps });
-const codeCopied = ref(false);
-
-const generatedCode = computed(() => {
-	const propsStr = Object.entries(editableProps.value)
-		.map(([key, value]) => {
-			if (typeof value === 'string') {
-				return `  ${key}="${value}"`;
-			} else if (typeof value === 'boolean') {
-				return value ? `  :${key}="true"` : `  :${key}="false"`;
-			} else if (typeof value === 'number') {
-				return `  :${key}="${value}"`;
-			}
-			return `  :${key}="${JSON.stringify(value)}"`;
-		})
-		.join('\n');
-
-	return `<${props.componentName}\n${propsStr}\n/>`;
-});
-
-const copyGeneratedCode = async () => {
-	try {
-		await navigator.clipboard.writeText(generatedCode.value);
-		codeCopied.value = true;
-		setTimeout(() => {
-			codeCopied.value = false;
-		}, 2000);
-	} catch (err) {
-		console.error('Failed to copy:', err);
-	}
-};
-</script>
-

package/.playground/components/DocsHeader.vue

@@ -1,19 +0,0 @@
-<template>
-	<header class="sticky top-0 z-40 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
-		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-			<div class="flex justify-between items-center h-14">
-				<!-- Logo -->
-				<NuxtLink to="/" class="flex items-center gap-2 font-semibold text-base">
-					<UIcon name="i-lucide-layers" class="w-5 h-5 text-primary" />
-					<span>X Marketing</span>
-					<span class="text-xs text-gray-500 dark:text-gray-400 font-normal ml-1">/ Docs</span>
-				</NuxtLink>
-
-				<!-- Right Actions -->
-				<div class="flex items-center gap-3">
-					<UColorModeButton />
-				</div>
-			</div>
-		</div>
-	</header>
-</template>

package/.playground/layouts/default.vue

@@ -1,15 +0,0 @@
-<template>
-	<UApp>
-		<NuxtLoadingIndicator />
-
-		<AppHeader />
-
-		<UMain>
-			<slot />
-		</UMain>
-
-		<AppFooter />
-	</UApp>
-</template>
-
-<script setup></script>