From 5dfe24d7395939129a378dc070dc4cf13d44b590 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Wed, 12 Nov 2025 02:57:06 +0800
Subject: [PATCH 01/15] feat: add WebPreview component and related
 subcomponents for enhanced web preview functionality

---
 .../elements/src/web-preview/WebPreview.vue   | 58 ++++++++++++
 .../src/web-preview/WebPreviewBody.vue        | 34 +++++++
 .../src/web-preview/WebPreviewConsole.vue     | 92 +++++++++++++++++++
 .../src/web-preview/WebPreviewNavigation.vue  | 19 ++++
 .../WebPreviewNavigationButton.vue            | 42 +++++++++
 .../src/web-preview/WebPreviewUrl.vue         | 43 +++++++++
 packages/elements/src/web-preview/context.ts  | 25 +++++
 packages/elements/src/web-preview/index.ts    |  7 ++
 8 files changed, 320 insertions(+)
 create mode 100644 packages/elements/src/web-preview/WebPreview.vue
 create mode 100644 packages/elements/src/web-preview/WebPreviewBody.vue
 create mode 100644 packages/elements/src/web-preview/WebPreviewConsole.vue
 create mode 100644 packages/elements/src/web-preview/WebPreviewNavigation.vue
 create mode 100644 packages/elements/src/web-preview/WebPreviewNavigationButton.vue
 create mode 100644 packages/elements/src/web-preview/WebPreviewUrl.vue
 create mode 100644 packages/elements/src/web-preview/context.ts
 create mode 100644 packages/elements/src/web-preview/index.ts

diff --git a/packages/elements/src/web-preview/WebPreview.vue b/packages/elements/src/web-preview/WebPreview.vue
new file mode 100644
index 0000000..8f0c189
--- /dev/null
+++ b/packages/elements/src/web-preview/WebPreview.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, ref } from 'vue'
+import {
+  provideWebPreviewContext,
+} from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  defaultUrl?: string
+  url?: string
+  consoleOpen?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultUrl: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:url', value: string): void
+  (e: 'urlChange', value: string): void
+  (e: 'update:consoleOpen', value: boolean): void
+  (e: 'consoleOpenChange', value: boolean): void
+}>()
+
+const url = ref(props.defaultUrl)
+const consoleOpen = ref(props.consoleOpen ?? false)
+
+function setUrl(value: string) {
+  url.value = value
+  emit('update:url', value)
+  emit('urlChange', value)
+}
+
+function setConsoleOpen(value: boolean) {
+  consoleOpen.value = value
+  emit('update:consoleOpen', value)
+  emit('consoleOpenChange', value)
+}
+
+provideWebPreviewContext({
+  url,
+  setUrl,
+  consoleOpen,
+  setConsoleOpen,
+})
+
+const classes = computed(() =>
+  cn('flex size-full flex-col rounded-lg border bg-card', props.class),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/web-preview/WebPreviewBody.vue b/packages/elements/src/web-preview/WebPreviewBody.vue
new file mode 100644
index 0000000..74abb75
--- /dev/null
+++ b/packages/elements/src/web-preview/WebPreviewBody.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes, VNodeChild } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+import { useWebPreviewContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  src?: string
+  loading?: VNodeChild
+}
+
+const props = defineProps<Props>()
+const attrs = useAttrs()
+
+const { url } = useWebPreviewContext()
+
+const frameSrc = computed(() => (props.src ?? url.value) || undefined)
+</script>
+
+<template>
+  <div class="flex-1">
+    <iframe
+      :class="cn('size-full', props.class)"
+      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+      :src="frameSrc"
+      title="Preview"
+      v-bind="attrs"
+    />
+    <slot name="loading">
+      <component :is="props.loading" v-if="props.loading" />
+    </slot>
+  </div>
+</template>
diff --git a/packages/elements/src/web-preview/WebPreviewConsole.vue b/packages/elements/src/web-preview/WebPreviewConsole.vue
new file mode 100644
index 0000000..50dc9ae
--- /dev/null
+++ b/packages/elements/src/web-preview/WebPreviewConsole.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ChevronDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useWebPreviewContext } from './context'
+
+type LogLevel = 'log' | 'warn' | 'error'
+
+interface ConsoleLog {
+  level: LogLevel
+  message: string
+  timestamp: Date
+}
+
+interface Props {
+  class?: HTMLAttributes['class']
+  logs?: ConsoleLog[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  logs: () => [],
+})
+
+const context = useWebPreviewContext()
+
+const isConsoleOpen = computed(() => context.consoleOpen.value)
+
+function levelClass(level: LogLevel) {
+  if (level === 'error')
+    return 'text-destructive'
+  if (level === 'warn')
+    return 'text-yellow-600'
+  return 'text-foreground'
+}
+</script>
+
+<template>
+  <Collapsible
+    :class="cn('border-t bg-muted/50 font-mono text-sm', props.class)"
+    :open="isConsoleOpen"
+    v-bind="$attrs"
+    @update:open="context.setConsoleOpen"
+  >
+    <CollapsibleTrigger as-child>
+      <Button
+        class="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
+        type="button"
+        variant="ghost"
+      >
+        Console
+        <ChevronDownIcon
+          :class="
+            cn(
+              'h-4 w-4 transition-transform duration-200',
+              isConsoleOpen ? 'rotate-180' : 'rotate-0',
+            )
+          "
+        />
+      </Button>
+    </CollapsibleTrigger>
+    <CollapsibleContent
+      class="px-4 pb-4 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+    >
+      <div class="max-h-48 space-y-1 overflow-y-auto">
+        <p v-if="!props.logs.length" class="text-muted-foreground">
+          No console output
+        </p>
+        <template v-else>
+          <div
+            v-for="(log, index) in props.logs"
+            :key="`${log.timestamp.getTime?.() ?? index}-${index}`"
+            :class="cn('text-xs', levelClass(log.level))"
+          >
+            <span class="text-muted-foreground">
+              {{ log.timestamp.toLocaleTimeString() }}
+            </span>
+            {{ ' ' }}
+            {{ log.message }}
+          </div>
+        </template>
+        <slot />
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</template>
diff --git a/packages/elements/src/web-preview/WebPreviewNavigation.vue b/packages/elements/src/web-preview/WebPreviewNavigation.vue
new file mode 100644
index 0000000..4a88016
--- /dev/null
+++ b/packages/elements/src/web-preview/WebPreviewNavigation.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex items-center gap-1 border-b p-2', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/web-preview/WebPreviewNavigationButton.vue b/packages/elements/src/web-preview/WebPreviewNavigationButton.vue
new file mode 100644
index 0000000..7d722f2
--- /dev/null
+++ b/packages/elements/src/web-preview/WebPreviewNavigationButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@repo/shadcn-vue/components/ui/tooltip'
+
+const props = withDefaults(defineProps<HTMLAttributes & {
+  size?: ButtonVariants['size']
+  variant?: ButtonVariants['variant']
+  tooltip?: string
+  disabled?: boolean
+}>(), {
+  tooltip: '',
+  disabled: false,
+  size: 'sm',
+  variant: 'ghost',
+})
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          class="h-8 w-8 p-0 hover:text-foreground"
+          type="button"
+          v-bind="{ ...props, ...$attrs }"
+        >
+          <slot />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent v-if="props.tooltip">
+        <p>{{ props.tooltip }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
diff --git a/packages/elements/src/web-preview/WebPreviewUrl.vue b/packages/elements/src/web-preview/WebPreviewUrl.vue
new file mode 100644
index 0000000..39839a7
--- /dev/null
+++ b/packages/elements/src/web-preview/WebPreviewUrl.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Input } from '@repo/shadcn-vue/components/ui/input'
+import { ref, useAttrs, watch } from 'vue'
+import { useWebPreviewContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Enter URL...',
+})
+
+const attrs = useAttrs()
+const context = useWebPreviewContext()
+
+const inputValue = ref(context.url.value)
+
+watch(
+  () => context.url.value,
+  (value) => {
+    inputValue.value = value
+  },
+  { immediate: true },
+)
+
+function handleKeydown() {
+  context.setUrl(inputValue.value)
+}
+</script>
+
+<template>
+  <Input
+    v-model="inputValue"
+    data-testid="web-preview-url-input"
+    :class="props.class"
+    :placeholder="props.placeholder"
+    v-bind="attrs"
+    @keydown.enter="handleKeydown"
+  />
+</template>
diff --git a/packages/elements/src/web-preview/context.ts b/packages/elements/src/web-preview/context.ts
new file mode 100644
index 0000000..4976fdd
--- /dev/null
+++ b/packages/elements/src/web-preview/context.ts
@@ -0,0 +1,25 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide } from 'vue'
+
+export interface WebPreviewContextValue {
+  url: Ref<string>
+  setUrl: (url: string) => void
+  consoleOpen: Ref<boolean>
+  setConsoleOpen: (open: boolean) => void
+}
+
+const WebPreviewContextKey: InjectionKey<WebPreviewContextValue> = Symbol('WebPreviewContext')
+
+export function provideWebPreviewContext(value: WebPreviewContextValue) {
+  provide(WebPreviewContextKey, value)
+}
+
+export function useWebPreviewContext() {
+  const context = inject(WebPreviewContextKey, null)
+
+  if (!context) {
+    throw new Error('WebPreview components must be used within WebPreview')
+  }
+
+  return context
+}
diff --git a/packages/elements/src/web-preview/index.ts b/packages/elements/src/web-preview/index.ts
new file mode 100644
index 0000000..1e927e3
--- /dev/null
+++ b/packages/elements/src/web-preview/index.ts
@@ -0,0 +1,7 @@
+export { provideWebPreviewContext, useWebPreviewContext } from './context'
+export { default as WebPreview } from './WebPreview.vue'
+export { default as WebPreviewBody } from './WebPreviewBody.vue'
+export { default as WebPreviewConsole } from './WebPreviewConsole.vue'
+export { default as WebPreviewNavigation } from './WebPreviewNavigation.vue'
+export { default as WebPreviewNavigationButton } from './WebPreviewNavigationButton.vue'
+export { default as WebPreviewUrl } from './WebPreviewUrl.vue'

From 5b2e65abe44a6376410cfdc24389c309bd074d42 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Wed, 12 Nov 2025 03:11:25 +0800
Subject: [PATCH 02/15] refactor: update props definition to use TypeScript
 interface for improved type safety

---
 .../src/web-preview/WebPreviewNavigationButton.vue         | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/elements/src/web-preview/WebPreviewNavigationButton.vue b/packages/elements/src/web-preview/WebPreviewNavigationButton.vue
index 7d722f2..03da6e4 100644
--- a/packages/elements/src/web-preview/WebPreviewNavigationButton.vue
+++ b/packages/elements/src/web-preview/WebPreviewNavigationButton.vue
@@ -2,6 +2,7 @@
 import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
 import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
+
 import {
   Tooltip,
   TooltipContent,
@@ -9,12 +10,14 @@ import {
   TooltipTrigger,
 } from '@repo/shadcn-vue/components/ui/tooltip'
 
-const props = withDefaults(defineProps<HTMLAttributes & {
+interface Props extends /* @vue-ignore */ HTMLAttributes {
   size?: ButtonVariants['size']
   variant?: ButtonVariants['variant']
   tooltip?: string
   disabled?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props>(), {
   tooltip: '',
   disabled: false,
   size: 'sm',

From 375ade16ebf56ebfe350ef70ae93c7a06533e9be Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Wed, 12 Nov 2025 03:13:13 +0800
Subject: [PATCH 03/15] feat: integrate Vitest for testing and add web preview
 tests

- Added Vitest configuration for testing with Playwright support.
- Implemented test cases for WebPreview
- Enhanced TypeScript configuration for JSX support.
---
 .gitignore                                    |   4 +
 .../elements/__tests__/web-preview.spec.tsx   | 208 ++++++++
 packages/elements/package.json                |  12 +-
 packages/elements/tsconfig.json               |   9 +-
 packages/elements/vitest.config.ts            |  18 +
 pnpm-lock.yaml                                | 472 +++++++++++++++++-
 6 files changed, 713 insertions(+), 10 deletions(-)
 create mode 100644 packages/elements/__tests__/web-preview.spec.tsx
 create mode 100644 packages/elements/vitest.config.ts

diff --git a/.gitignore b/.gitignore
index 5d3b519..ce9027a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,7 @@ dist-ssr
 .env
 .env.*
 !.env.example
+
+# Testing
+coverage
+**/__screenshots__
diff --git a/packages/elements/__tests__/web-preview.spec.tsx b/packages/elements/__tests__/web-preview.spec.tsx
new file mode 100644
index 0000000..b6d4265
--- /dev/null
+++ b/packages/elements/__tests__/web-preview.spec.tsx
@@ -0,0 +1,208 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-vue'
+import { userEvent } from 'vitest/browser'
+import {
+  WebPreview,
+  WebPreviewBody,
+  WebPreviewConsole,
+  WebPreviewNavigation,
+  WebPreviewNavigationButton,
+  WebPreviewUrl,
+} from '../src/web-preview'
+
+describe('webPreview', () => {
+  it('renders children', () => {
+    const screen = render(<WebPreview>Content</WebPreview>)
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('uses default URL', () => {
+    const screen = render(
+      <WebPreview defaultUrl="https://example.com">
+        <WebPreviewUrl />
+      </WebPreview>,
+    )
+    const input = screen.getByTestId('web-preview-url-input')
+    expect(input).toHaveValue('https://example.com')
+  })
+
+  it('calls onUrlChange', async () => {
+    const onUrlChange = vi.fn()
+    const user = userEvent.setup()
+
+    const screen = render(
+      <WebPreview onUrlChange={onUrlChange}>
+        <WebPreviewUrl />
+      </WebPreview>,
+    )
+
+    const input = screen.getByTestId('web-preview-url-input')
+    await user.type(input, 'https://test.com{Enter}')
+
+    expect(onUrlChange).toHaveBeenCalled()
+  })
+
+  it('throws error when component used outside provider', () => {
+    // Suppress console.error for this test
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    expect(() => render(<WebPreviewUrl />)).toThrow(
+      'WebPreview components must be used within WebPreview',
+    )
+
+    spy.mockRestore()
+  })
+})
+
+describe('webPreviewNavigation', () => {
+  it('renders navigation', () => {
+    const screen = render(<WebPreviewNavigation>Nav content</WebPreviewNavigation>)
+    expect(screen.getByText('Nav content')).toBeInTheDocument()
+  })
+})
+
+describe('webPreviewNavigationButton', () => {
+  it('renders button with tooltip', () => {
+    const screen = render(
+      <WebPreviewNavigationButton tooltip="Back">
+        <span>←</span>
+      </WebPreviewNavigationButton>,
+    )
+    expect(screen.getByText('←')).toBeInTheDocument()
+  })
+
+  it('can be disabled', () => {
+    const screen = render(
+      <WebPreviewNavigationButton disabled tooltip="Forward">
+        →
+      </WebPreviewNavigationButton>,
+    )
+    expect(screen.getByRole('button')).toBeDisabled()
+  })
+
+  it('handles click', async () => {
+    const onClick = vi.fn()
+    const user = userEvent.setup()
+
+    const screen = render(
+      <WebPreviewNavigationButton onClick={onClick} tooltip="Refresh">
+        ↻
+      </WebPreviewNavigationButton>,
+    )
+
+    await user.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalled()
+  })
+})
+
+describe('webPreviewUrl', () => {
+  it('renders URL input', () => {
+    const screen = render(
+      <WebPreview>
+        <WebPreviewUrl />
+      </WebPreview>,
+    )
+    expect(screen.getByTestId('web-preview-url-input')).toBeInTheDocument()
+  })
+
+  it('updates URL on Enter key', async () => {
+    const user = userEvent.setup()
+
+    const screen = render(
+      <WebPreview>
+        <WebPreviewUrl />
+      </WebPreview>,
+    )
+
+    const input = screen.getByPlaceholder(
+      'Enter URL...',
+    ) as unknown as HTMLInputElement
+    await user.type(input, 'https://example.com{Enter}')
+
+    // Wait for the state to update
+    await vi.waitFor(() => {
+      expect(input).toHaveValue('https://example.com')
+    })
+  })
+})
+
+describe('webPreviewBody', () => {
+  it('renders iframe', () => {
+    const screen = render(
+      <WebPreview>
+        <WebPreviewBody src="https://example.com" />
+      </WebPreview>,
+    )
+    const iframe = screen.getByTitle('Preview')
+    expect(iframe).toBeInTheDocument()
+    expect(iframe).toHaveAttribute('src', 'https://example.com')
+  })
+
+  it('has sandbox attribute', () => {
+    const screen = render(
+      <WebPreview>
+        <WebPreviewBody />
+      </WebPreview>,
+    )
+    const iframe = screen.getByTitle('Preview')
+    expect(iframe).toHaveAttribute('sandbox')
+  })
+
+  it('renders loading component', () => {
+    const screen = render(
+      <WebPreview>
+        <WebPreviewBody loading={<div>Loading...</div>} />
+      </WebPreview>,
+    )
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+})
+
+describe('webPreviewConsole', () => {
+  it('renders console', () => {
+    const screen = render(
+      <WebPreview>
+        <WebPreviewConsole />
+      </WebPreview>,
+    )
+    expect(
+      screen.getByRole('button', { name: /console/i }),
+    ).toBeInTheDocument()
+  })
+
+  it('displays no output message', async () => {
+    const user = userEvent.setup()
+
+    const screen = render(
+      <WebPreview>
+        <WebPreviewConsole />
+      </WebPreview>,
+    )
+
+    await user.click(screen.getByRole('button', { name: /console/i }))
+    expect(screen.getByText('No console output')).toBeVisible()
+  })
+
+  it('displays logs', async () => {
+    const user = userEvent.setup()
+    const logs = [
+      { level: 'log' as const, message: 'Test log', timestamp: new Date() },
+      {
+        level: 'error' as const,
+        message: 'Error message',
+        timestamp: new Date(),
+      },
+    ]
+
+    const screen = render(
+      <WebPreview>
+        <WebPreviewConsole logs={logs} />
+      </WebPreview>,
+    )
+
+    await user.click(screen.getByRole('button', { name: /console/i }))
+
+    expect(screen.getByText('Test log')).toBeVisible()
+    expect(screen.getByText('Error message')).toBeVisible()
+  })
+})
diff --git a/packages/elements/package.json b/packages/elements/package.json
index c6efb76..bd2acdb 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -6,6 +6,9 @@
   "exports": {
     "./*": "./src/*/index.ts"
   },
+  "scripts": {
+    "test": "vitest run"
+  },
   "dependencies": {
     "@repo/shadcn-vue": "workspace:*",
     "@vue-flow/background": "^1.3.2",
@@ -24,6 +27,13 @@
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
-    "typescript": "^5.9.3"
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/ui": "4.0.8",
+    "@vue/test-utils": "^2.4.6",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.8",
+    "vitest-browser-vue": "^2.0.1"
   }
 }
diff --git a/packages/elements/tsconfig.json b/packages/elements/tsconfig.json
index bef4302..cb83322 100644
--- a/packages/elements/tsconfig.json
+++ b/packages/elements/tsconfig.json
@@ -1,14 +1,19 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "jsx": "preserve",
+    "jsxFactory": "h",
     "lib": ["ES2020", "DOM"],
     "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "paths": {
       "@repo/*": ["../*"],
       "@/components/*": ["../shadcn-vue/components/*"],
       "@/lib/*": ["../shadcn-vue/lib/*"]
-    }
+    },
+    "types": ["vue/jsx"]
   },
-  "include": ["**/*.ts", "**/*.vue"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.vue"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/elements/vitest.config.ts b/packages/elements/vitest.config.ts
new file mode 100644
index 0000000..8114df6
--- /dev/null
+++ b/packages/elements/vitest.config.ts
@@ -0,0 +1,18 @@
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { playwright } from '@vitest/browser-playwright'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [vue(), vueJsx({})],
+  test: {
+    browser: {
+      // headless: true,
+      enabled: true,
+      provider: playwright(),
+      instances: [
+        { browser: 'chromium' },
+      ],
+    },
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7ecaf46..45c8f97 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^5.4.1
-        version: 5.4.1(@vue/compiler-sfc@3.5.22)(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 5.4.1(@vue/compiler-sfc@3.5.22)(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.8)
       '@commitlint/cli':
         specifier: ^20.1.0
         version: 20.1.0(@types/node@24.6.2)(typescript@5.9.3)
@@ -141,9 +141,30 @@ importers:
       '@types/hast':
         specifier: ^3.0.4
         version: 3.0.4
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.1
+        version: 6.0.1(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^5.1.1
+        version: 5.1.1(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+      '@vitest/browser-playwright':
+        specifier: ^4.0.8
+        version: 4.0.8(playwright@1.56.1)(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.8)
+      '@vitest/ui':
+        specifier: 4.0.8
+        version: 4.0.8(vitest@4.0.8)
+      '@vue/test-utils':
+        specifier: ^2.4.6
+        version: 2.4.6
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
+      vitest:
+        specifier: ^4.0.8
+        version: 4.0.8(@types/debug@4.1.12)(@types/node@24.6.2)(@vitest/browser-playwright@4.0.8)(@vitest/ui@4.0.8)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
+      vitest-browser-vue:
+        specifier: ^2.0.1
+        version: 2.0.1(vitest@4.0.8)(vue@3.5.22(typescript@5.9.3))
 
   packages/examples:
     dependencies:
@@ -1178,8 +1199,13 @@ packages:
   '@nuxtjs/mdc@0.17.4':
     resolution: {integrity: sha512-I5ZYUWVlE2xZAkfBG6B0/l2uddDZlr8X2WPVMPYNY4zocobBjMgykj4aqYXHY+N35HRYsa+IpuUCf30bR8xCbA==}
 
+<<<<<<< HEAD
   '@nuxtjs/mdc@0.18.2':
     resolution: {integrity: sha512-pdeWd2/oOPriPVa1F6QNoK4fZCp/b4sxEVoouXJJCETCBIFSNS4OOtdRTY1ATLM1Gr+6ZvNyNPABvaaUEGC4Lw==}
+=======
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+>>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
 
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
@@ -2656,6 +2682,9 @@ packages:
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
@@ -2770,6 +2799,9 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -2998,6 +3030,17 @@ packages:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
       vue: ^3.2.25
 
+  '@vitest/browser-playwright@4.0.8':
+    resolution: {integrity: sha512-MUi0msIAPXcA2YAuVMcssrSYP/yylxLt347xyTC6+ODl0c4XQFs0d2AN3Pc3iTa0pxIGmogflUV6eogXpPbJeA==}
+    peerDependencies:
+      playwright: '*'
+      vitest: 4.0.8
+
+  '@vitest/browser@4.0.8':
+    resolution: {integrity: sha512-oG6QJAR0d7S5SDnIYZwjxCj/a5fhbp9ZE7GtMgZn+yCUf4CxtqbBV6aXyg0qmn8nbUWT+rGuXL2ZB6qDBUjv/A==}
+    peerDependencies:
+      vitest: 4.0.8
+
   '@vitest/eslint-plugin@1.3.16':
     resolution: {integrity: sha512-EvXGiZpz3L1G/pmebcmMe61UzqgR8LFwmm+QGgQEHcrTCFkMgl+c0mj2jneo38/CkHhofbK3zc3xafV6/SpzNw==}
     peerDependencies:
@@ -3010,6 +3053,40 @@ packages:
       vitest:
         optional: true
 
+  '@vitest/expect@4.0.8':
+    resolution: {integrity: sha512-Rv0eabdP/xjAHQGr8cjBm+NnLHNoL268lMDK85w2aAGLFoVKLd8QGnVon5lLtkXQCoYaNL0wg04EGnyKkkKhPA==}
+
+  '@vitest/mocker@4.0.8':
+    resolution: {integrity: sha512-9FRM3MZCedXH3+pIh+ME5Up2NBBHDq0wqwhOKkN4VnvCiKbVxddqH9mSGPZeawjd12pCOGnl+lo/ZGHt0/dQSg==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.0.8':
+    resolution: {integrity: sha512-qRrjdRkINi9DaZHAimV+8ia9Gq6LeGz2CgIEmMLz3sBDYV53EsnLZbJMR1q84z1HZCMsf7s0orDgZn7ScXsZKg==}
+
+  '@vitest/runner@4.0.8':
+    resolution: {integrity: sha512-mdY8Sf1gsM8hKJUQfiPT3pn1n8RF4QBcJYFslgWh41JTfrK1cbqY8whpGCFzBl45LN028g0njLCYm0d7XxSaQQ==}
+
+  '@vitest/snapshot@4.0.8':
+    resolution: {integrity: sha512-Nar9OTU03KGiubrIOFhcfHg8FYaRaNT+bh5VUlNz8stFhCZPNrJvmZkhsr1jtaYvuefYFwK2Hwrq026u4uPWCw==}
+
+  '@vitest/spy@4.0.8':
+    resolution: {integrity: sha512-nvGVqUunyCgZH7kmo+Ord4WgZ7lN0sOULYXUOYuHr55dvg9YvMz3izfB189Pgp28w0vWFbEEfNc/c3VTrqrXeA==}
+
+  '@vitest/ui@4.0.8':
+    resolution: {integrity: sha512-F9jI5rSstNknPlTlPN2gcc4gpbaagowuRzw/OJzl368dvPun668Q182S8Q8P9PITgGCl5LAKXpzuue106eM4wA==}
+    peerDependencies:
+      vitest: 4.0.8
+
+  '@vitest/utils@4.0.8':
+    resolution: {integrity: sha512-pdk2phO5NDvEFfUTxcTP8RFYjVj/kfLSPIN5ebP2Mu9kcIMeAQTbknqcFEyBcC4z2pJlJI9aS5UQjcYfhmKAow==}
+
   '@volar/language-core@2.4.23':
     resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
 
@@ -3150,6 +3227,9 @@ packages:
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
+  '@vue/test-utils@2.4.6':
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
@@ -3199,6 +3279,10 @@ packages:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -3294,6 +3378,17 @@ packages:
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
+<<<<<<< HEAD
+=======
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-kit@1.4.3:
+    resolution: {integrity: sha512-MdJqjpodkS5J149zN0Po+HPshkTdUyrvF7CKTafUgv69vBSPtncrj+3IiUgqdd7ElIEkbeXCsEouBUwLrw9Ilg==}
+    engines: {node: '>=16.14.0'}
+
+>>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
   ast-kit@2.1.2:
     resolution: {integrity: sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==}
     engines: {node: '>=20.18.0'}
@@ -3492,6 +3587,10 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
+  chai@6.2.1:
+    resolution: {integrity: sha512-p4Z49OGG5W/WBCPSS/dH3jQ73kD6tiMmUM+bckNK6Jr5JHMG3k9bg/BvKR8lKmtVBKmOiuVaV2ws8s9oSbwysg==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -3611,6 +3710,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
   commander@11.1.0:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
@@ -3656,6 +3759,9 @@ packages:
   confbox@0.2.2:
     resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
   consola@3.4.2:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -4167,6 +4273,11 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -4529,6 +4640,10 @@ packages:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
 
+  expect-type@1.2.2:
+    resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
+    engines: {node: '>=12.0.0'}
+
   exsolve@1.0.7:
     resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
@@ -4581,6 +4696,9 @@ packages:
   fflate@0.7.4:
     resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -4661,6 +4779,11 @@ packages:
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -5119,6 +5242,15 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -5648,6 +5780,10 @@ packages:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
 
+  minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -5784,6 +5920,11 @@ packages:
   node-releases@2.0.23:
     resolution: {integrity: sha512-cCmFDMSm26S6tQSDpBCg/NR8NENrVPhAJSf+XbxBG4rPFaaonlEoE9wHQmun+cls499TQGSb7ZyPBRlzgKfpeg==}
 
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   nopt@8.1.0:
     resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -6094,6 +6235,10 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  pixelmatch@7.1.0:
+    resolution: {integrity: sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==}
+    hasBin: true
+
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -6105,10 +6250,24 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  playwright-core@1.56.1:
+    resolution: {integrity: sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.56.1:
+    resolution: {integrity: sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
+
   pnpm-workspace-yaml@1.2.0:
     resolution: {integrity: sha512-4CnZHmLSaprRnIm2iQ27Zl1cWPRHdX7Ehw7ckRwujoPKCk2QAz4agsA2MbTodg4sgbqYfJ68ULT+Q5A8dU+Mow==}
 
@@ -6332,6 +6491,9 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
   protocol-buffers-schema@3.6.0:
     resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
 
@@ -6633,6 +6795,9 @@ packages:
   shiki@3.14.0:
     resolution: {integrity: sha512-J0yvpLI7LSig3Z3acIuDLouV5UCKQqu8qOArwMx+/yPVC3WRMgrP67beaG8F+j4xfEWE0eVC4GeBCIXeOPra1g==}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -6731,6 +6896,9 @@ packages:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
@@ -6938,6 +7106,12 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
@@ -6952,6 +7126,10 @@ packages:
   tinyqueue@2.0.3:
     resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
 
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+    engines: {node: '>=14.0.0'}
+
   to-px@1.1.0:
     resolution: {integrity: sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==}
 
@@ -7469,6 +7647,46 @@ packages:
       yaml:
         optional: true
 
+  vitest-browser-vue@2.0.1:
+    resolution: {integrity: sha512-IfTJY3Olr27AXCVAhOqx4g5iUgzdWLmYr40svg7rOrunjsqc9trrzi/eI3i11+UYddbKXu3HJl2bo8o8lqKm4A==}
+    peerDependencies:
+      vitest: ^4.0.0-0
+      vue: ^3.0.0
+
+  vitest@4.0.8:
+    resolution: {integrity: sha512-urzu3NCEV0Qa0Y2PwvBtRgmNtxhj5t5ULw7cuKhIHh3OrkKTLlut0lnBOv9qe5OvbkMH2g38G7KPDCTpIytBVg==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.0.8
+      '@vitest/browser-preview': 4.0.8
+      '@vitest/browser-webdriverio': 4.0.8
+      '@vitest/ui': 4.0.8
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   vscode-jsonrpc@8.2.0:
     resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
     engines: {node: '>=14.0.0'}
@@ -7501,6 +7719,9 @@ packages:
   vue-bundle-renderer@2.2.0:
     resolution: {integrity: sha512-sz/0WEdYH1KfaOm0XaBmRZOWgYTEvUDt6yPYaUzl4E52qzgWLlknaPPTTZmp6benaPTlQAI/hN1x3tAzZygycg==}
 
+  vue-component-type-helpers@2.2.12:
+    resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -7596,6 +7817,11 @@ packages:
     engines: {node: ^18.17.0 || >=20.5.0}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -7742,7 +7968,7 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
-  '@antfu/eslint-config@5.4.1(@vue/compiler-sfc@3.5.22)(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@antfu/eslint-config@5.4.1(@vue/compiler-sfc@3.5.22)(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.8)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
       '@clack/prompts': 0.11.0
@@ -7751,7 +7977,7 @@ snapshots:
       '@stylistic/eslint-plugin': 5.4.0(eslint@9.37.0(jiti@2.6.1))
       '@typescript-eslint/eslint-plugin': 8.45.0(@typescript-eslint/parser@8.45.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.45.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
-      '@vitest/eslint-plugin': 1.3.16(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@vitest/eslint-plugin': 1.3.16(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.8)
       ansis: 4.2.0
       cac: 6.7.14
       eslint: 9.37.0(jiti@2.6.1)
@@ -9358,6 +9584,7 @@ snapshots:
       - magicast
       - supports-color
 
+<<<<<<< HEAD
   '@nuxtjs/mdc@0.18.2(magicast@0.3.5)':
     dependencies:
       '@nuxt/kit': 4.2.1(magicast@0.3.5)
@@ -9406,6 +9633,9 @@ snapshots:
     transitivePeerDependencies:
       - magicast
       - supports-color
+=======
+  '@one-ini/wasm@0.1.1': {}
+>>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
 
   '@opentelemetry/api@1.9.0': {}
 
@@ -10342,6 +10572,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
       '@types/node': 24.6.2
@@ -10481,6 +10716,8 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree@1.0.8': {}
 
   '@types/geojson@7946.0.16': {}
@@ -10826,7 +11063,6 @@ snapshots:
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   '@vitejs/plugin-vue@6.0.1(vite@7.1.7(@types/node@24.6.2)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
@@ -10839,18 +11075,98 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.29
       vite: 7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
-    optional: true
 
-  '@vitest/eslint-plugin@1.3.16(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@vitest/browser-playwright@4.0.8(playwright@1.56.1)(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.8)':
+    dependencies:
+      '@vitest/browser': 4.0.8(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.8)
+      '@vitest/mocker': 4.0.8(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
+      playwright: 1.56.1
+      tinyrainbow: 3.0.3
+      vitest: 4.0.8(@types/debug@4.1.12)(@types/node@24.6.2)(@vitest/browser-playwright@4.0.8)(@vitest/ui@4.0.8)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser@4.0.8(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.8)':
+    dependencies:
+      '@vitest/mocker': 4.0.8(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/utils': 4.0.8
+      magic-string: 0.30.21
+      pixelmatch: 7.1.0
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.0.3
+      vitest: 4.0.8(@types/debug@4.1.12)(@types/node@24.6.2)(@vitest/browser-playwright@4.0.8)(@vitest/ui@4.0.8)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/eslint-plugin@1.3.16(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.8)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.45.0
       '@typescript-eslint/utils': 8.45.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.37.0(jiti@2.6.1)
     optionalDependencies:
       typescript: 5.9.3
+      vitest: 4.0.8(@types/debug@4.1.12)(@types/node@24.6.2)(@vitest/browser-playwright@4.0.8)(@vitest/ui@4.0.8)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/expect@4.0.8':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.0.8
+      '@vitest/utils': 4.0.8
+      chai: 6.2.1
+      tinyrainbow: 3.0.3
+
+  '@vitest/mocker@4.0.8(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 4.0.8
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
+
+  '@vitest/pretty-format@4.0.8':
+    dependencies:
+      tinyrainbow: 3.0.3
+
+  '@vitest/runner@4.0.8':
+    dependencies:
+      '@vitest/utils': 4.0.8
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.0.8':
+    dependencies:
+      '@vitest/pretty-format': 4.0.8
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.0.8': {}
+
+  '@vitest/ui@4.0.8(vitest@4.0.8)':
+    dependencies:
+      '@vitest/utils': 4.0.8
+      fflate: 0.8.2
+      flatted: 3.3.3
+      pathe: 2.0.3
+      sirv: 3.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vitest: 4.0.8(@types/debug@4.1.12)(@types/node@24.6.2)(@vitest/browser-playwright@4.0.8)(@vitest/ui@4.0.8)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
+
+  '@vitest/utils@4.0.8':
+    dependencies:
+      '@vitest/pretty-format': 4.0.8
+      tinyrainbow: 3.0.3
+
   '@volar/language-core@2.4.23':
     dependencies:
       '@volar/source-map': 2.4.23
@@ -10933,7 +11249,7 @@ snapshots:
       '@babel/types': 7.28.4
       '@vue/babel-helper-vue-transform-on': 1.5.0
       '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.4)
-      '@vue/shared': 3.5.21
+      '@vue/shared': 3.5.22
     optionalDependencies:
       '@babel/core': 7.28.4
     transitivePeerDependencies:
@@ -11076,6 +11392,11 @@ snapshots:
 
   '@vue/shared@3.5.22': {}
 
+  '@vue/test-utils@2.4.6':
+    dependencies:
+      js-beautify: 1.15.4
+      vue-component-type-helpers: 2.2.12
+
   '@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -11206,6 +11527,8 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
+  abbrev@2.0.0: {}
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -11303,6 +11626,16 @@ snapshots:
 
   array-ify@1.0.0: {}
 
+<<<<<<< HEAD
+=======
+  assertion-error@2.0.1: {}
+
+  ast-kit@1.4.3:
+    dependencies:
+      '@babel/parser': 7.28.4
+      pathe: 2.0.3
+
+>>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
   ast-kit@2.1.2:
     dependencies:
       '@babel/parser': 7.28.4
@@ -11532,6 +11865,8 @@ snapshots:
 
   ccount@2.0.1: {}
 
+  chai@6.2.1: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -11650,6 +11985,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@10.0.1: {}
+
   commander@11.1.0: {}
 
   commander@14.0.1: {}
@@ -11685,6 +12022,11 @@ snapshots:
 
   confbox@0.2.2: {}
 
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
   consola@3.4.2: {}
 
   conventional-changelog-angular@7.0.0:
@@ -12187,6 +12529,13 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  editorconfig@1.0.4:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.1
+      semver: 7.7.2
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.223: {}
@@ -12683,6 +13032,8 @@ snapshots:
   expand-template@2.0.3:
     optional: true
 
+  expect-type@1.2.2: {}
+
   exsolve@1.0.7: {}
 
   exsolve@1.0.8: {}
@@ -12730,6 +13081,8 @@ snapshots:
 
   fflate@0.7.4: {}
 
+  fflate@0.8.2: {}
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -12813,6 +13166,9 @@ snapshots:
   fs-constants@1.0.0:
     optional: true
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -13359,6 +13715,16 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.4
+      glob: 10.4.5
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
@@ -14101,6 +14467,10 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimatch@9.0.1:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
@@ -14304,6 +14674,10 @@ snapshots:
 
   node-releases@2.0.23: {}
 
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
   nopt@8.1.0:
     dependencies:
       abbrev: 3.0.1
@@ -14567,7 +14941,11 @@ snapshots:
       pkg-types: 2.3.0
       radix3: 1.1.2
       scule: 1.3.0
+<<<<<<< HEAD
       semver: 7.7.3
+=======
+      semver: 7.7.2
+>>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
       std-env: 3.10.0
       tinyglobby: 0.2.15
       ufo: 1.6.1
@@ -15027,6 +15405,10 @@ snapshots:
 
   pidtree@0.6.0: {}
 
+  pixelmatch@7.1.0:
+    dependencies:
+      pngjs: 7.0.0
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -15041,8 +15423,18 @@ snapshots:
 
   playwright-core@1.56.1: {}
 
+  playwright-core@1.56.1: {}
+
+  playwright@1.56.1:
+    dependencies:
+      playwright-core: 1.56.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   pluralize@8.0.0: {}
 
+  pngjs@7.0.0: {}
+
   pnpm-workspace-yaml@1.2.0:
     dependencies:
       yaml: 2.8.1
@@ -15260,6 +15652,8 @@ snapshots:
 
   property-information@7.1.0: {}
 
+  proto-list@1.2.4: {}
+
   protocol-buffers-schema@3.6.0: {}
 
   protocols@2.0.2: {}
@@ -15802,6 +16196,8 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  siginfo@2.0.0: {}
+
   signal-exit@4.1.0: {}
 
   simple-concat@1.0.1:
@@ -15903,6 +16299,8 @@ snapshots:
 
   split2@4.2.0: {}
 
+  stackback@0.0.2: {}
+
   standard-as-callback@2.1.0: {}
 
   statuses@2.0.1: {}
@@ -16144,6 +16542,10 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
   tinyexec@1.0.1: {}
 
   tinyglobby@0.2.14:
@@ -16158,6 +16560,8 @@ snapshots:
 
   tinyqueue@2.0.3: {}
 
+  tinyrainbow@3.0.3: {}
+
   to-px@1.1.0:
     dependencies:
       parse-unit: 1.0.1
@@ -16820,6 +17224,53 @@ snapshots:
       terser: 5.44.0
       yaml: 2.8.1
 
+  vitest-browser-vue@2.0.1(vitest@4.0.8)(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      '@vue/test-utils': 2.4.6
+      vitest: 4.0.8(@types/debug@4.1.12)(@types/node@24.6.2)(@vitest/browser-playwright@4.0.8)(@vitest/ui@4.0.8)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
+      vue: 3.5.22(typescript@5.9.3)
+
+  vitest@4.0.8(@types/debug@4.1.12)(@types/node@24.6.2)(@vitest/browser-playwright@4.0.8)(@vitest/ui@4.0.8)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1):
+    dependencies:
+      '@vitest/expect': 4.0.8
+      '@vitest/mocker': 4.0.8(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/pretty-format': 4.0.8
+      '@vitest/runner': 4.0.8
+      '@vitest/snapshot': 4.0.8
+      '@vitest/spy': 4.0.8
+      '@vitest/utils': 4.0.8
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      expect-type: 1.2.2
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/debug': 4.1.12
+      '@types/node': 24.6.2
+      '@vitest/browser-playwright': 4.0.8(playwright@1.56.1)(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.8)
+      '@vitest/ui': 4.0.8(vitest@4.0.8)
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vscode-jsonrpc@8.2.0: {}
 
   vscode-languageserver-protocol@3.17.5:
@@ -16854,6 +17305,8 @@ snapshots:
       ufo: 1.6.1
     optional: true
 
+  vue-component-type-helpers@2.2.12: {}
+
   vue-demi@0.14.10(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
@@ -16939,6 +17392,11 @@ snapshots:
     dependencies:
       isexe: 3.1.1
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0:

From b1da1f0679e12165b42b383570c5656870e23083 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Wed, 12 Nov 2025 03:13:32 +0800
Subject: [PATCH 04/15] feat: add web preview example component with navigation
 and console logs

---
 packages/examples/src/web-preview.vue | 91 +++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 packages/examples/src/web-preview.vue

diff --git a/packages/examples/src/web-preview.vue b/packages/examples/src/web-preview.vue
new file mode 100644
index 0000000..44a6139
--- /dev/null
+++ b/packages/examples/src/web-preview.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  WebPreview,
+  WebPreviewBody,
+  WebPreviewConsole,
+  WebPreviewNavigation,
+  WebPreviewNavigationButton,
+  WebPreviewUrl,
+} from '@repo/elements/web-preview'
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ExternalLinkIcon,
+  Maximize2Icon,
+  MousePointerClickIcon,
+  RefreshCcwIcon,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const exampleLogs = [
+  {
+    level: 'log' as const,
+    message: 'Page loaded successfully',
+    timestamp: new Date(Date.now() - 10_000),
+  },
+  {
+    level: 'warn' as const,
+    message: 'Deprecated API usage detected',
+    timestamp: new Date(Date.now() - 5000),
+  },
+  {
+    level: 'error' as const,
+    message: 'Failed to load resource',
+    timestamp: new Date(),
+  },
+]
+
+const fullscreen = ref(false)
+</script>
+
+<template>
+  <WebPreview
+    default-url="/"
+    :style="{ height: fullscreen ? '100%' : '400px' }"
+    @url-change="(url) => console.log('URL changed to:', url)"
+  >
+    <WebPreviewNavigation>
+      <WebPreviewNavigationButton
+        tooltip="Go back"
+        @click="() => console.log('Go back')"
+      >
+        <ArrowLeftIcon class="size-4" />
+      </WebPreviewNavigationButton>
+      <WebPreviewNavigationButton
+        tooltip="Go forward"
+        @click="() => console.log('Go forward')"
+      >
+        <ArrowRightIcon class="size-4" />
+      </WebPreviewNavigationButton>
+      <WebPreviewNavigationButton
+        tooltip="Reload"
+        @click="() => console.log('Reload')"
+      >
+        <RefreshCcwIcon class="size-4" />
+      </WebPreviewNavigationButton>
+      <WebPreviewUrl />
+      <WebPreviewNavigationButton
+        tooltip="Select"
+        @click="() => console.log('Select')"
+      >
+        <MousePointerClickIcon class="size-4" />
+      </WebPreviewNavigationButton>
+      <WebPreviewNavigationButton
+        tooltip="Open in new tab"
+        @click="() => console.log('Open in new tab')"
+      >
+        <ExternalLinkIcon class="size-4" />
+      </WebPreviewNavigationButton>
+      <WebPreviewNavigationButton
+        tooltip="Maximize"
+        @click="() => (fullscreen = !fullscreen)"
+      >
+        <Maximize2Icon class="size-4" />
+      </WebPreviewNavigationButton>
+    </WebPreviewNavigation>
+
+    <WebPreviewBody src="https://preview-v0me-kzml7zc6fkcvbyhzrf47.vusercontent.net/" />
+
+    <WebPreviewConsole :logs="exampleLogs" />
+  </WebPreview>
+</template>

From 8e5bcf93c65113fb6cc91f2065cb6268906db17e Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Wed, 12 Nov 2025 03:55:54 +0800
Subject: [PATCH 05/15] feat: add WebPreview documentation and installation
 instructions

---
 .../3.components/1.chatbot/web-preview.md     | 247 ++++++++++++++++++
 apps/www/plugins/ai-elements.ts               |   4 +-
 packages/elements/src/index.ts                |   1 +
 packages/examples/src/index.ts                |   3 +-
 4 files changed, 253 insertions(+), 2 deletions(-)
 create mode 100644 apps/www/content/3.components/1.chatbot/web-preview.md

diff --git a/apps/www/content/3.components/1.chatbot/web-preview.md b/apps/www/content/3.components/1.chatbot/web-preview.md
new file mode 100644
index 0000000..a8ece66
--- /dev/null
+++ b/apps/www/content/3.components/1.chatbot/web-preview.md
@@ -0,0 +1,247 @@
+---
+title: Web Preview
+description: A composable component for previewing the result of a generated UI, with support for live examples and code display.
+icon: lucide:globe
+---
+
+The `WebPreview` component provides a flexible way to showcase the result of a generated UI component, along with its source code. It is designed for documentation and demo purposes, allowing users to interact with live examples and view the underlying implementation.
+
+:::ComponentLoader{label="Web Preview" componentName="WebPreview"}
+:::
+
+## Install using CLI
+
+:::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add web-preview
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/web-preview.json
+  ```
+  ::
+:::
+
+## Install Manually
+<!-- TODO: Add code snippets for manual installation -->
+
+## Usage with AI SDK
+
+Build a simple v0 clone using the [v0 Platform API](https://v0.dev/docs/api/platform).
+
+Install the `v0-sdk` package:
+
+```package-install
+npm i v0-sdk
+```
+
+Add the following component to your frontend:
+<!-- TOOD: Using Vue 3 example -->
+```tsx title="app/page.tsx"
+'use client'
+
+import { useState } from 'react'
+import {
+  Input,
+  PromptInputSubmit,
+  PromptInputTextarea,
+} from '@/components/ai-elements/prompt-input'
+import {
+  WebPreview,
+  WebPreviewBody,
+  WebPreviewNavigation,
+  WebPreviewUrl,
+} from '@/components/ai-elements/web-preview'
+import { Loader } from '../ai-elements/loader'
+
+function WebPreviewDemo() {
+  const [previewUrl, setPreviewUrl] = useState('')
+  const [prompt, setPrompt] = useState('')
+  const [isGenerating, setIsGenerating] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!prompt.trim())
+      return
+    setPrompt('')
+
+    setIsGenerating(true)
+    try {
+      const response = await fetch('/api/v0', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt }),
+      })
+
+      const data = await response.json()
+      setPreviewUrl(data.demo || '/')
+      console.log('Generation finished:', data)
+    }
+    catch (error) {
+      console.error('Generation failed:', error)
+    }
+    finally {
+      setIsGenerating(false)
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <div className="flex-1 mb-4">
+          {isGenerating
+            ? (
+                <div className="flex flex-col items-center justify-center h-full">
+                  <Loader />
+                  <p className="mt-4 text-muted-foreground">
+                    Generating app, this may take a few seconds...
+                  </p>
+                </div>
+              )
+            : previewUrl
+              ? (
+                  <WebPreview defaultUrl={previewUrl}>
+                    <WebPreviewNavigation>
+                      <WebPreviewUrl />
+                    </WebPreviewNavigation>
+                    <WebPreviewBody src={previewUrl} />
+                  </WebPreview>
+                )
+              : (
+                  <div className="flex items-center justify-center h-full text-muted-foreground">
+                    Your generated app will appear here
+                  </div>
+                )}
+        </div>
+
+        <Input
+          onSubmit={handleSubmit}
+          className="w-full max-w-2xl mx-auto relative"
+        >
+          <PromptInputTextarea
+            value={prompt}
+            placeholder="Describe the app you want to build..."
+            onChange={e => setPrompt(e.currentTarget.value)}
+            className="pr-12 min-h-[60px]"
+          />
+          <PromptInputSubmit
+            status={isGenerating ? 'streaming' : 'ready'}
+            disabled={!prompt.trim()}
+            className="absolute bottom-1 right-1"
+          />
+        </Input>
+      </div>
+    </div>
+  )
+}
+
+export default WebPreviewDemo
+```
+
+Add the following route to your backend:
+
+<!-- TOOD: Using Nuxt example -->
+
+```ts title="app/api/v0/route.ts"
+import { v0 } from 'v0-sdk'
+
+export async function POST(req: Request) {
+  const { prompt }: { prompt: string } = await req.json()
+
+  const result = await v0.chats.create({
+    system: 'You are an expert coder',
+    message: prompt,
+    modelConfiguration: {
+      modelId: 'v0-1.5-sm',
+      imageGenerations: false,
+      thinking: false,
+    },
+  })
+
+  return Response.json({
+    demo: result.demo,
+    webUrl: result.webUrl,
+  })
+}
+```
+
+## Features
+
+- Live preview of UI components
+- Composable architecture with dedicated sub-components
+- Responsive design modes (Desktop, Tablet, Mobile)
+- Navigation controls with back/forward functionality
+- URL input and example selector
+- Full screen mode support
+- Console logging with timestamps
+- Context-based state management
+- Consistent styling with the design system
+- Easy integration into documentation pages
+
+## Props
+
+### `<WebPreview />`
+
+::::field-group
+  ::field{name="defaultUrl" type="string" defaultValue="''"}
+  The initial URL to load in the preview.
+  ::
+  ::field{name="onUrlChange" type="(url: string) => void"}
+  Callback fired when the URL changes.
+  ::
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the root div.
+  ::
+::::
+
+### `<WebPreviewNavigation />`
+
+::::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the navigation container.
+  ::
+::::
+
+### `<WebPreviewNavigationButton />`
+
+::::field-group
+  ::field{name="tooltip" type="string"}
+  Tooltip text to display on hover.
+  ::
+  ::field{name="...props" type="typeof Button"}
+  Any other props are spread to the underlying shadcn/ui Button component.
+  ::
+::::
+
+### `<WebPreviewUrl />`
+
+::::field-group
+  ::field{name="...props" type="typeof Input"}
+  Any other props are spread to the underlying shadcn/ui Input component.
+  ::
+::::
+
+### `<WebPreviewBody />`
+
+::::field-group
+  ::field{name="loading" type="React.ReactNode"}
+  Optional loading indicator to display over the preview.
+  ::
+  ::field{name="...props" type="IframeHTMLAttributes"}
+  Any other props are spread to the underlying iframe.
+  ::
+::::
+
+### `<WebPreviewConsole />`
+
+::::field-group
+  ::field{name="logs" type='Array<{ level: "log" | "warn" | "error"; message: string; timestamp: Date }>'}
+  Console log entries to display in the console panel.
+  ::
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the root div.
+  ::
+::::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index ecc51da..0243fdc 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -7,11 +7,11 @@ import {
   Checkpoint,
   CodeBlock,
   CodeBlockDark,
-  Context,
   Confirmation,
   ConfirmationAccepted,
   ConfirmationRejected,
   ConfirmationRequest,
+  Context,
   Conversation,
   Image,
   InlineCitation,
@@ -36,6 +36,7 @@ import {
   Suggestion,
   SuggestionAiInput,
   Task,
+  WebPreview,
   Workflow,
 } from '@repo/examples'
 
@@ -86,4 +87,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('ConfirmationAccepted', ConfirmationAccepted)
   vueApp.component('ConfirmationRejected', ConfirmationRejected)
   vueApp.component('ConfirmationRequest', ConfirmationRequest)
+  vueApp.component('WebPreview', WebPreview)
 })
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index a570bc5..67fb4ec 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -21,3 +21,4 @@ export * from './shimmer'
 export * from './sources'
 export * from './suggestion'
 export * from './task'
+export * from './web-preview'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 56e8c68..58fe77a 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -6,11 +6,11 @@ export { default as ChainOfThought } from './chain-of-thought.vue'
 export { default as Checkpoint } from './checkpoint.vue'
 export { default as CodeBlockDark } from './code-block-dark.vue'
 export { default as CodeBlock } from './code-block.vue'
-export { default as Context } from './context.vue'
 export { default as ConfirmationAccepted } from './confirmation-accepted.vue'
 export { default as ConfirmationRejected } from './confirmation-rejected.vue'
 export { default as ConfirmationRequest } from './confirmation-request.vue'
 export { default as Confirmation } from './confirmation.vue'
+export { default as Context } from './context.vue'
 export { default as Conversation } from './conversation.vue'
 export { default as Image } from './image.vue'
 export { default as InlineCitation } from './inline-citation.vue'
@@ -35,4 +35,5 @@ export { default as Sources } from './sources.vue'
 export { default as SuggestionAiInput } from './suggestion-ai-input.vue'
 export { default as Suggestion } from './suggestion.vue'
 export { default as Task } from './task.vue'
+export { default as WebPreview } from './web-preview.vue'
 export { default as Workflow } from './workflow.vue'

From 1c40055afe149e09a7e4af1ed37ed583d5825177 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Wed, 12 Nov 2025 12:16:47 +0800
Subject: [PATCH 06/15] feat: convert WebPreview component to Vue 3 and update
 backend route handling

---
 .../3.components/1.chatbot/web-preview.md     | 167 ++++++++----------
 1 file changed, 78 insertions(+), 89 deletions(-)

diff --git a/apps/www/content/3.components/1.chatbot/web-preview.md b/apps/www/content/3.components/1.chatbot/web-preview.md
index a8ece66..1ed11b9 100644
--- a/apps/www/content/3.components/1.chatbot/web-preview.md
+++ b/apps/www/content/3.components/1.chatbot/web-preview.md
@@ -40,10 +40,9 @@ npm i v0-sdk
 
 Add the following component to your frontend:
 <!-- TOOD: Using Vue 3 example -->
-```tsx title="app/page.tsx"
-'use client'
-
-import { useState } from 'react'
+```vue title="app.vue"
+<script setup lang="ts">
+import { Loader } from '@/components/ai-elements/loader'
 import {
   Input,
   PromptInputSubmit,
@@ -55,102 +54,92 @@ import {
   WebPreviewNavigation,
   WebPreviewUrl,
 } from '@/components/ai-elements/web-preview'
-import { Loader } from '../ai-elements/loader'
-
-function WebPreviewDemo() {
-  const [previewUrl, setPreviewUrl] = useState('')
-  const [prompt, setPrompt] = useState('')
-  const [isGenerating, setIsGenerating] = useState(false)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!prompt.trim())
-      return
-    setPrompt('')
-
-    setIsGenerating(true)
-    try {
-      const response = await fetch('/api/v0', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ prompt }),
-      })
-
-      const data = await response.json()
-      setPreviewUrl(data.demo || '/')
-      console.log('Generation finished:', data)
-    }
-    catch (error) {
-      console.error('Generation failed:', error)
-    }
-    finally {
-      setIsGenerating(false)
-    }
-  }
 
-  return (
-    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
-      <div className="flex flex-col h-full">
-        <div className="flex-1 mb-4">
-          {isGenerating
-            ? (
-                <div className="flex flex-col items-center justify-center h-full">
-                  <Loader />
-                  <p className="mt-4 text-muted-foreground">
-                    Generating app, this may take a few seconds...
-                  </p>
-                </div>
-              )
-            : previewUrl
-              ? (
-                  <WebPreview defaultUrl={previewUrl}>
-                    <WebPreviewNavigation>
-                      <WebPreviewUrl />
-                    </WebPreviewNavigation>
-                    <WebPreviewBody src={previewUrl} />
-                  </WebPreview>
-                )
-              : (
-                  <div className="flex items-center justify-center h-full text-muted-foreground">
-                    Your generated app will appear here
-                  </div>
-                )}
+const previewUrl = ref('')
+const prompt = ref('')
+const isGenerating = ref(false)
+
+async function handleSubmit(e: Event) {
+  e.preventDefault()
+  if (!prompt.value.trim())
+    return
+  prompt.value = ''
+
+  isGenerating.value = true
+  try {
+    const response = await fetch('/api/v0', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prompt: prompt.value }),
+    })
+
+    const data = await response.json()
+    previewUrl.value = data.demo || '/'
+    console.log('Generation finished:', data)
+  }
+  catch (error) {
+    console.error('Generation failed:', error)
+  }
+  finally {
+    isGenerating.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+    <div class="flex flex-col h-full">
+      <div class="flex-1 mb-4">
+        <div v-if="isGenerating" class="flex flex-col items-center justify-center h-full">
+          <Loader />
+          <p v-if="isGenerating" class="mt-4 text-muted-foreground">
+            Generating app, this may take a few seconds...
+          </p>
         </div>
+        <WebPreview v-else-if="previewUrl" :default-url="previewUrl">
+          <WebPreviewNavigation>
+            <WebPreviewUrl />
+          </WebPreviewNavigation>
+          <WebPreviewBody :src="previewUrl" />
+        </WebPreview>
+        <div v-else class="flex items-center justify-center h-full text-muted-foreground">
+          Your generated app will appear here
+        </div>
+      </div>
 
-        <Input
-          onSubmit={handleSubmit}
-          className="w-full max-w-2xl mx-auto relative"
+      <Input
+        class="w-full max-w-2xl mx-auto relative"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          :value="prompt"
+          placeholder="Describe the app you want to build..."
+          class="pr-12 min-h-[60px]"
+          @change="(e: any) => (prompt = e?.target?.value ?? '')"
         >
-          <PromptInputTextarea
-            value={prompt}
-            placeholder="Describe the app you want to build..."
-            onChange={e => setPrompt(e.currentTarget.value)}
-            className="pr-12 min-h-[60px]"
-          />
           <PromptInputSubmit
-            status={isGenerating ? 'streaming' : 'ready'}
-            disabled={!prompt.trim()}
-            className="absolute bottom-1 right-1"
+            :status="isGenerating ? 'streaming' : 'ready'"
+            :disabled="!prompt.trim()"
+            class="absolute bottom-1 right-1"
           />
-        </Input>
-      </div>
+        </PromptInputTextarea>
+      </Input>
     </div>
-  )
-}
-
-export default WebPreviewDemo
+  </div>
+</template>
 ```
 
 Add the following route to your backend:
 
 <!-- TOOD: Using Nuxt example -->
 
-```ts title="app/api/v0/route.ts"
+```ts title="server/api/v0.post.ts"
+import type { ChatsCreateResponse } from 'v0-sdk'
+import { defineEventHandler, readBody } from 'h3'
 import { v0 } from 'v0-sdk'
 
-export async function POST(req: Request) {
-  const { prompt }: { prompt: string } = await req.json()
-
+export default defineEventHandler(async (event) => {
+  const { prompt }: { prompt: string } = await readBody(event)
   const result = await v0.chats.create({
     system: 'You are an expert coder',
     message: prompt,
@@ -159,13 +148,13 @@ export async function POST(req: Request) {
       imageGenerations: false,
       thinking: false,
     },
-  })
+  }) as ChatsCreateResponse
 
-  return Response.json({
+  return {
     demo: result.demo,
     webUrl: result.webUrl,
-  })
-}
+  }
+})
 ```
 
 ## Features

From a9fc19504041eaf77620b3cfdff4e14585fa4878 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 15:30:31 +0800
Subject: [PATCH 07/15] feat: add GitHub Actions workflow for testing with
 Node.js

---
 .github/workflows/test.yml | 39 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000..d76e958
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,39 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    name: Run Tests (Node.js ${{ matrix.node-version }})
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20, 22, 24]
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Install Playwright Browsers
+        run: pnpm --filter @repo/elements exec playwright install --with-deps chromium
+
+      - name: Run Tests
+        run: pnpm test

From c48b5f7d30d6570e8d3ddb4cc7d0812c7ef97c5c Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 16:15:54 +0800
Subject: [PATCH 08/15] refactor: enhanced WebPreview loading slot
 functionality

---
 .../elements/__tests__/web-preview.spec.tsx    |  8 ++++++--
 .../elements/src/web-preview/WebPreview.vue    | 18 ++++++++++--------
 .../src/web-preview/WebPreviewBody.vue         | 17 +++++++++--------
 .../src/web-preview/WebPreviewNavigation.vue   |  2 +-
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/elements/__tests__/web-preview.spec.tsx b/packages/elements/__tests__/web-preview.spec.tsx
index b6d4265..8301cae 100644
--- a/packages/elements/__tests__/web-preview.spec.tsx
+++ b/packages/elements/__tests__/web-preview.spec.tsx
@@ -148,10 +148,14 @@ describe('webPreviewBody', () => {
     expect(iframe).toHaveAttribute('sandbox')
   })
 
-  it('renders loading component', () => {
+  it('renders loading slot', () => {
     const screen = render(
       <WebPreview>
-        <WebPreviewBody loading={<div>Loading...</div>} />
+        <WebPreviewBody>
+          {{
+            loading: () => <div>Loading...</div>,
+          }}
+        </WebPreviewBody>
       </WebPreview>,
     )
     expect(screen.getByText('Loading...')).toBeInTheDocument()
diff --git a/packages/elements/src/web-preview/WebPreview.vue b/packages/elements/src/web-preview/WebPreview.vue
index 8f0c189..d39bd78 100644
--- a/packages/elements/src/web-preview/WebPreview.vue
+++ b/packages/elements/src/web-preview/WebPreview.vue
@@ -6,11 +6,9 @@ import {
   provideWebPreviewContext,
 } from './context'
 
-interface Props {
+interface Props extends /* @vue-ignore */ HTMLAttributes {
   class?: HTMLAttributes['class']
   defaultUrl?: string
-  url?: string
-  consoleOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,7 +23,7 @@ const emit = defineEmits<{
 }>()
 
 const url = ref(props.defaultUrl)
-const consoleOpen = ref(props.consoleOpen ?? false)
+const consoleOpen = ref(false)
 
 function setUrl(value: string) {
   url.value = value
@@ -46,13 +44,17 @@ provideWebPreviewContext({
   setConsoleOpen,
 })
 
-const classes = computed(() =>
-  cn('flex size-full flex-col rounded-lg border bg-card', props.class),
-)
+const vBind = computed(() => {
+  const { class: _, ...rest } = props
+  return {
+    class: cn('flex size-full flex-col rounded-lg border bg-card', props.class),
+    ...rest,
+  }
+})
 </script>
 
 <template>
-  <div :class="classes" v-bind="$attrs">
+  <div v-bind="vBind">
     <slot />
   </div>
 </template>
diff --git a/packages/elements/src/web-preview/WebPreviewBody.vue b/packages/elements/src/web-preview/WebPreviewBody.vue
index 74abb75..9a8e7d2 100644
--- a/packages/elements/src/web-preview/WebPreviewBody.vue
+++ b/packages/elements/src/web-preview/WebPreviewBody.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes, VNodeChild } from 'vue'
+import type { IframeHTMLAttributes, VNodeChild } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed, useAttrs } from 'vue'
 import { useWebPreviewContext } from './context'
 
-interface Props {
-  class?: HTMLAttributes['class']
+interface Props extends /* @vue-ignore */ IframeHTMLAttributes {
+  class?: IframeHTMLAttributes['class']
   src?: string
-  loading?: VNodeChild
 }
 
 const props = defineProps<Props>()
-const attrs = useAttrs()
 
+defineSlots<{
+  loading: () => VNodeChild
+}>()
+
+const attrs = useAttrs()
 const { url } = useWebPreviewContext()
 
 const frameSrc = computed(() => (props.src ?? url.value) || undefined)
@@ -27,8 +30,6 @@ const frameSrc = computed(() => (props.src ?? url.value) || undefined)
       title="Preview"
       v-bind="attrs"
     />
-    <slot name="loading">
-      <component :is="props.loading" v-if="props.loading" />
-    </slot>
+    <slot name="loading" />
   </div>
 </template>
diff --git a/packages/elements/src/web-preview/WebPreviewNavigation.vue b/packages/elements/src/web-preview/WebPreviewNavigation.vue
index 4a88016..4768240 100644
--- a/packages/elements/src/web-preview/WebPreviewNavigation.vue
+++ b/packages/elements/src/web-preview/WebPreviewNavigation.vue
@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 
-interface Props {
+interface Props extends /* @vue-ignore */ HTMLAttributes {
   class?: HTMLAttributes['class']
 }
 

From 2bdf4966690d812cb5bd50358bdf10bc6c6523c4 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 16:26:23 +0800
Subject: [PATCH 09/15] feat: add script to generate .code-group.md files for
 components

---
 .gitignore                                    |   2 +
 .../3.components/1.chatbot/web-preview.md     | 387 +++++++++++++++++-
 packages/elements/package.json                |   1 +
 packages/elements/scripts/gen-code-group.ts   |  65 +++
 .../src/web-preview/WebPreviewNavigation.vue  |   6 +-
 5 files changed, 445 insertions(+), 16 deletions(-)
 create mode 100644 packages/elements/scripts/gen-code-group.ts

diff --git a/.gitignore b/.gitignore
index ce9027a..2ed5fee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,5 @@ dist-ssr
 # Testing
 coverage
 **/__screenshots__
+
+.code-group.md
\ No newline at end of file
diff --git a/apps/www/content/3.components/1.chatbot/web-preview.md b/apps/www/content/3.components/1.chatbot/web-preview.md
index 1ed11b9..ab951b7 100644
--- a/apps/www/content/3.components/1.chatbot/web-preview.md
+++ b/apps/www/content/3.components/1.chatbot/web-preview.md
@@ -26,7 +26,359 @@ The `WebPreview` component provides a flexible way to showcase the result of a g
 :::
 
 ## Install Manually
-<!-- TODO: Add code snippets for manual installation -->
+:::code-group
+```vue [WebPreview.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, ref } from 'vue'
+import {
+  provideWebPreviewContext,
+} from './context'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+  defaultUrl?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultUrl: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:url', value: string): void
+  (e: 'urlChange', value: string): void
+  (e: 'update:consoleOpen', value: boolean): void
+  (e: 'consoleOpenChange', value: boolean): void
+}>()
+
+const url = ref(props.defaultUrl)
+const consoleOpen = ref(false)
+
+function setUrl(value: string) {
+  url.value = value
+  emit('update:url', value)
+  emit('urlChange', value)
+}
+
+function setConsoleOpen(value: boolean) {
+  consoleOpen.value = value
+  emit('update:consoleOpen', value)
+  emit('consoleOpenChange', value)
+}
+
+provideWebPreviewContext({
+  url,
+  setUrl,
+  consoleOpen,
+  setConsoleOpen,
+})
+
+const vBind = computed(() => {
+  const { class: _, ...rest } = props
+  return {
+    class: cn('flex size-full flex-col rounded-lg border bg-card', props.class),
+    ...rest,
+  }
+})
+</script>
+
+<template>
+  <div v-bind="vBind">
+    <slot />
+  </div>
+</template>
+```
+
+```vue [WebPreviewBody.vue]
+<script setup lang="ts">
+import type { IframeHTMLAttributes, VNodeChild } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+import { useWebPreviewContext } from './context'
+
+interface Props extends /* @vue-ignore */ IframeHTMLAttributes {
+  class?: IframeHTMLAttributes['class']
+  src?: string
+}
+
+const props = defineProps<Props>()
+
+defineSlots<{
+  loading: () => VNodeChild
+}>()
+
+const attrs = useAttrs()
+const { url } = useWebPreviewContext()
+
+const frameSrc = computed(() => (props.src ?? url.value) || undefined)
+</script>
+
+<template>
+  <div class="flex-1">
+    <iframe
+      :class="cn('size-full', props.class)"
+      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+      :src="frameSrc"
+      title="Preview"
+      v-bind="attrs"
+    />
+    <slot name="loading" />
+  </div>
+</template>
+```
+
+```vue [WebPreviewConsole.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ChevronDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useWebPreviewContext } from './context'
+
+type LogLevel = 'log' | 'warn' | 'error'
+
+interface ConsoleLog {
+  level: LogLevel
+  message: string
+  timestamp: Date
+}
+
+interface Props {
+  class?: HTMLAttributes['class']
+  logs?: ConsoleLog[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  logs: () => [],
+})
+
+const context = useWebPreviewContext()
+
+const isConsoleOpen = computed(() => context.consoleOpen.value)
+
+function levelClass(level: LogLevel) {
+  if (level === 'error')
+    return 'text-destructive'
+  if (level === 'warn')
+    return 'text-yellow-600'
+  return 'text-foreground'
+}
+</script>
+
+<template>
+  <Collapsible
+    :class="cn('border-t bg-muted/50 font-mono text-sm', props.class)"
+    :open="isConsoleOpen"
+    v-bind="$attrs"
+    @update:open="context.setConsoleOpen"
+  >
+    <CollapsibleTrigger as-child>
+      <Button
+        class="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
+        type="button"
+        variant="ghost"
+      >
+        Console
+        <ChevronDownIcon
+          :class="
+            cn(
+              'h-4 w-4 transition-transform duration-200',
+              isConsoleOpen ? 'rotate-180' : 'rotate-0',
+            )
+          "
+        />
+      </Button>
+    </CollapsibleTrigger>
+    <CollapsibleContent
+      class="px-4 pb-4 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+    >
+      <div class="max-h-48 space-y-1 overflow-y-auto">
+        <p v-if="!props.logs.length" class="text-muted-foreground">
+          No console output
+        </p>
+        <template v-else>
+          <div
+            v-for="(log, index) in props.logs"
+            :key="`${log.timestamp.getTime?.() ?? index}-${index}`"
+            :class="cn('text-xs', levelClass(log.level))"
+          >
+            <span class="text-muted-foreground">
+              {{ log.timestamp.toLocaleTimeString() }}
+            </span>
+            {{ ' ' }}
+            {{ log.message }}
+          </div>
+        </template>
+        <slot />
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</template>
+```
+
+```vue [WebPreviewNavigation.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    v-bind="{
+      ...props,
+      class: cn('flex items-center gap-1 border-b p-2', props.class),
+    }"
+  >
+    <slot />
+  </div>
+</template>
+```
+
+```vue [WebPreviewNavigationButton.vue]
+<script setup lang="ts">
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@repo/shadcn-vue/components/ui/tooltip'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  size?: ButtonVariants['size']
+  variant?: ButtonVariants['variant']
+  tooltip?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tooltip: '',
+  disabled: false,
+  size: 'sm',
+  variant: 'ghost',
+})
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          class="h-8 w-8 p-0 hover:text-foreground"
+          type="button"
+          v-bind="{ ...props, ...$attrs }"
+        >
+          <slot />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent v-if="props.tooltip">
+        <p>{{ props.tooltip }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
+```
+
+```vue [WebPreviewUrl.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Input } from '@repo/shadcn-vue/components/ui/input'
+import { ref, useAttrs, watch } from 'vue'
+import { useWebPreviewContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Enter URL...',
+})
+
+const attrs = useAttrs()
+const context = useWebPreviewContext()
+
+const inputValue = ref(context.url.value)
+
+watch(
+  () => context.url.value,
+  (value) => {
+    inputValue.value = value
+  },
+  { immediate: true },
+)
+
+function handleKeydown() {
+  context.setUrl(inputValue.value)
+}
+</script>
+
+<template>
+  <Input
+    v-model="inputValue"
+    data-testid="web-preview-url-input"
+    :class="props.class"
+    :placeholder="props.placeholder"
+    v-bind="attrs"
+    @keydown.enter="handleKeydown"
+  />
+</template>
+```
+
+```ts [context.ts]
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide } from 'vue'
+
+export interface WebPreviewContextValue {
+  url: Ref<string>
+  setUrl: (url: string) => void
+  consoleOpen: Ref<boolean>
+  setConsoleOpen: (open: boolean) => void
+}
+
+const WebPreviewContextKey: InjectionKey<WebPreviewContextValue> = Symbol('WebPreviewContext')
+
+export function provideWebPreviewContext(value: WebPreviewContextValue) {
+  provide(WebPreviewContextKey, value)
+}
+
+export function useWebPreviewContext() {
+  const context = inject(WebPreviewContextKey, null)
+
+  if (!context) {
+    throw new Error('WebPreview components must be used within WebPreview')
+  }
+
+  return context
+}
+```
+
+```ts [index.ts]
+export { provideWebPreviewContext, useWebPreviewContext } from './context'
+export { default as WebPreview } from './WebPreview.vue'
+export { default as WebPreviewBody } from './WebPreviewBody.vue'
+export { default as WebPreviewConsole } from './WebPreviewConsole.vue'
+export { default as WebPreviewNavigation } from './WebPreviewNavigation.vue'
+export { default as WebPreviewNavigationButton } from './WebPreviewNavigationButton.vue'
+export { default as WebPreviewUrl } from './WebPreviewUrl.vue'
+```
+:::
 
 ## Usage with AI SDK
 
@@ -39,8 +391,7 @@ npm i v0-sdk
 ```
 
 Add the following component to your frontend:
-<!-- TOOD: Using Vue 3 example -->
-```vue title="app.vue"
+```vue [app.vue]
 <script setup lang="ts">
 import { Loader } from '@/components/ai-elements/loader'
 import {
@@ -131,9 +482,7 @@ async function handleSubmit(e: Event) {
 
 Add the following route to your backend:
 
-<!-- TOOD: Using Nuxt example -->
-
-```ts title="server/api/v0.post.ts"
+```ts [server/api/v0.post.ts]
 import type { ChatsCreateResponse } from 'v0-sdk'
 import { defineEventHandler, readBody } from 'h3'
 import { v0 } from 'v0-sdk'
@@ -173,12 +522,10 @@ export default defineEventHandler(async (event) => {
 ## Props
 
 ### `<WebPreview />`
-
 ::::field-group
   ::field{name="defaultUrl" type="string" defaultValue="''"}
   The initial URL to load in the preview.
-  ::
-  ::field{name="onUrlChange" type="(url: string) => void"}
+  ::field{name="@urlChange" type="(url: string) => void"}
   Callback fired when the URL changes.
   ::
   ::field{name="...props" type="HTMLAttributes"}
@@ -201,7 +548,7 @@ export default defineEventHandler(async (event) => {
   Tooltip text to display on hover.
   ::
   ::field{name="...props" type="typeof Button"}
-  Any other props are spread to the underlying shadcn/ui Button component.
+  Any other props are spread to the underlying [shadcn-vue/ui Button](https://www.shadcn-vue.com/docs/components/button.html) component.
   ::
 ::::
 
@@ -209,26 +556,38 @@ export default defineEventHandler(async (event) => {
 
 ::::field-group
   ::field{name="...props" type="typeof Input"}
-  Any other props are spread to the underlying shadcn/ui Input component.
+  Any other props are spread to the underlying [shadcn-vue/ui Input](https://www.shadcn-vue.com/docs/components/input.html) component.
   ::
 ::::
 
 ### `<WebPreviewBody />`
 
 ::::field-group
-  ::field{name="loading" type="React.ReactNode"}
+  ::field{name="loading" type="Slot"}
   Optional loading indicator to display over the preview.
   ::
   ::field{name="...props" type="IframeHTMLAttributes"}
-  Any other props are spread to the underlying iframe.
+  Any other props are spread to the underlying [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
   ::
 ::::
 
 ### `<WebPreviewConsole />`
 
 ::::field-group
-  ::field{name="logs" type='Array<{ level: "log" | "warn" | "error"; message: string; timestamp: Date }>'}
+  ::field{name="logs" type='Array<LogItem>'}
   Console log entries to display in the console panel.
+    ```ts [LogItem]
+    type LogItem = { level: "log" | "warn" | "error"; message: string; timestamp: Date }
+    ```
+    ```ts [Example]
+    [
+      {
+        "level": "log",
+        "message": "Page loaded successfully",
+        "timestamp": "2025-01-01T00:00:00.000Z"
+      }
+    ]
+    ```
   ::
   ::field{name="...props" type="HTMLAttributes"}
   Any other props are spread to the root div.
diff --git a/packages/elements/package.json b/packages/elements/package.json
index bd2acdb..c071e80 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -7,6 +7,7 @@
     "./*": "./src/*/index.ts"
   },
   "scripts": {
+    "gen-code-group": "pnpx tsx ./scripts/gen-code-group.ts",
     "test": "vitest run"
   },
   "dependencies": {
diff --git a/packages/elements/scripts/gen-code-group.ts b/packages/elements/scripts/gen-code-group.ts
new file mode 100644
index 0000000..058c17e
--- /dev/null
+++ b/packages/elements/scripts/gen-code-group.ts
@@ -0,0 +1,65 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const srcDir = path.join(__dirname, '..', 'src')
+const componentDirs = fs
+  .readdirSync(srcDir, { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name)
+
+// Read all component directories in the src directory
+// For each directory, read all files and generate a .code-group.md file
+
+for (const componentDir of componentDirs) {
+  const componentPath = path.join(srcDir, componentDir)
+  const files = fs
+    .readdirSync(componentPath)
+    .filter(
+      file =>
+        file !== '.code-group.md'
+        && fs.statSync(path.join(componentPath, file)).isFile(),
+    )
+    .sort()
+
+  if (files.length === 0) {
+    continue
+  }
+
+  // Generate code group content
+  const codeBlocks: string[] = []
+
+  for (const file of files) {
+    const filePath = path.join(componentPath, file)
+    const content = fs.readFileSync(filePath, 'utf-8')
+    const ext = path.extname(file).slice(1) // Remove the dot
+
+    // Determine language based on extension
+    let lang = ext
+    if (ext === 'vue') {
+      lang = 'vue'
+    }
+    else if (ext === 'ts' || ext === 'tsx') {
+      lang = 'ts'
+    }
+    else if (ext === 'js' || ext === 'jsx') {
+      lang = 'js'
+    }
+    else if (ext === 'md') {
+      lang = 'md'
+    }
+    else {
+      lang = ext
+    }
+
+    codeBlocks.push(`\`\`\`${lang} [${file}]\n${content}\n\`\`\``)
+  }
+
+  // Write .code-group.md file
+  const codeGroupContent = `:::code-group\n${codeBlocks.join('\n\n')}\n:::\n`
+  const codeGroupPath = path.join(componentPath, '.code-group.md')
+  fs.writeFileSync(codeGroupPath, codeGroupContent, 'utf-8')
+
+  console.log(`Generated ${codeGroupPath} for ${componentDir}`)
+}
+
+console.log('Done!')
diff --git a/packages/elements/src/web-preview/WebPreviewNavigation.vue b/packages/elements/src/web-preview/WebPreviewNavigation.vue
index 4768240..dd85848 100644
--- a/packages/elements/src/web-preview/WebPreviewNavigation.vue
+++ b/packages/elements/src/web-preview/WebPreviewNavigation.vue
@@ -11,8 +11,10 @@ const props = defineProps<Props>()
 
 <template>
   <div
-    :class="cn('flex items-center gap-1 border-b p-2', props.class)"
-    v-bind="$attrs"
+    v-bind="{
+      ...props,
+      class: cn('flex items-center gap-1 border-b p-2', props.class),
+    }"
   >
     <slot />
   </div>

From bf216fe60d961e4be6e3d16d1a1f85578cf21df4 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 16:34:16 +0800
Subject: [PATCH 10/15] chore: resolved conflicts and move web-preview into
 vibe-coding folder

---
 .../web-preview.md                            |   0
 pnpm-lock.yaml                                | 140 +++---------------
 2 files changed, 22 insertions(+), 118 deletions(-)
 rename apps/www/content/3.components/{1.chatbot => 3.vibe-coding}/web-preview.md (100%)

diff --git a/apps/www/content/3.components/1.chatbot/web-preview.md b/apps/www/content/3.components/3.vibe-coding/web-preview.md
similarity index 100%
rename from apps/www/content/3.components/1.chatbot/web-preview.md
rename to apps/www/content/3.components/3.vibe-coding/web-preview.md
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45c8f97..6a4756e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1199,13 +1199,11 @@ packages:
   '@nuxtjs/mdc@0.17.4':
     resolution: {integrity: sha512-I5ZYUWVlE2xZAkfBG6B0/l2uddDZlr8X2WPVMPYNY4zocobBjMgykj4aqYXHY+N35HRYsa+IpuUCf30bR8xCbA==}
 
-<<<<<<< HEAD
   '@nuxtjs/mdc@0.18.2':
     resolution: {integrity: sha512-pdeWd2/oOPriPVa1F6QNoK4fZCp/b4sxEVoouXJJCETCBIFSNS4OOtdRTY1ATLM1Gr+6ZvNyNPABvaaUEGC4Lw==}
-=======
+
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
->>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
 
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
@@ -1288,84 +1286,72 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-tf2Shom09AaSmu7U1hYYcEFF/cd+20HtmQ8eyGsRkqD5bqUj6lDu8TNSU9FWZ9tcZ83NzyFMwXZWHyeeIIbpxw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-musl@0.78.0':
     resolution: {integrity: sha512-q4x8hLW9JyHVS+AtKSt6Z4W+S+fXSCARBnizzW9mtND47atRiJzChOInlZUBgQhyDy3KQFt51aKIEDJpwysoEw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-pgWeYfSprtpnJVea9Q5eI6Eo80lDGlMw2JdcSMXmShtBjEhBl6bvDNHlV+6kNfh7iT65y/uC6FR8utFrRghu8A==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.78.0':
     resolution: {integrity: sha512-ajBxhoqW04KUI/fWewBf71WB2xdjce9VgF9rbLfQOBgCeCcyHMh+VKYjxBuWQamWrcABqt8Z5OIiRth9qt6CIg==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-O1QPczlT+lqNZVeKOdFxxL+s1RIlnixaJYFLrcqDcRyn82MGKLz7sAenBTFRQoIfLnSxtMGL6dqHOefYkQx7Cg==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-H6B+h4Q3w/AtAr7EWScvDevxPKQPlhijMmSiMYRMkbTYwJPlUsBXyVj39Atdd1BIjCx8rYGvGxl/PhxPkdCjXQ==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-tcwt3ZUWOKfNLXN2edxFVHMlIuPvbuyMaKmRopgljSCfFcNHWhfTNlxlvmECRNhuQ91EcGwte6F1dwoeMCNd7A==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-5vSPG67PVTwrzSPbXLofJtdSlb/lWyn36WElonLwecAtZX7v7KDhX0aUHqKSBsQ0qnJaYnhv5o0uUHudNZwq8g==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-Xf4AXF14KXUzSnfgTcFLFSM0TykJhFw14+xwNvlAb6WdqXAKlMrz9joIAezc8dkW1NNscCVTsqBUPJ4RhvCM1Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-musl@0.78.0':
     resolution: {integrity: sha512-Iq7eeZkGFUbyo7zRrAIP6rNAH+lIft9VJQUbDhhnTIMJWLUZx9JkSmM+0NBRfxPeurxbzO3EToDZ2cCYtVEU0Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-LIqvpx9UihEW4n9QbEljDnfUdAWqhr6dRqmzSFwVAeLZRUECluLCDdsdwemrC/aZkvnisA4w0LFcFr3HmeTLJg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-wasm32-wasi@0.78.0':
     resolution: {integrity: sha512-Bj2l/A6e32mZ2aPRDmlkDClMkbPe+dCWl4enPY+PCZNkhLLfLfcMFemCCWO44rdWCOCehWiP8Tr3QEe3yTR7kA==}
@@ -1550,21 +1536,18 @@ packages:
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-fcnnsfcyLamJOMVKq+BQ8dasb8gRnZtNpCUfZhaEFAdXQ7J2RmZreFzlygcn80iti0V7c5LejcjHbF4IdK3GAw==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.93.0':
     resolution: {integrity: sha512-NoB7BJmwVGrcS/J5XXn362lBsIyeTqZF70rCFij3/XwQ2kcELfGMALY9AUulFYauLTY2AG4vcmctJQxn9Lj85g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
     resolution: {integrity: sha512-0LzebARTU0ROfD6pDK4h1pFn+09meErCZ0MA2TaW08G72+GNneEsksPufOuI+9AxVSRa+jKE3fu0wavvhZgSkg==}
@@ -1577,21 +1560,18 @@ packages:
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-tBPkSPgRSSbmrje8CUovISi/Hj/tWjZJ3n/qnrjx2B+u86hWtwLsngtPDQa5d4seSyDaHSx6tNEUcH7+g5Ee0Q==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.93.0':
     resolution: {integrity: sha512-s+nraJJR9SuHsgsr42nbOBpAsaSAE6MhK7HGbz01svLJzDsk3Ylh9cbVUPLaS3gOlTq5WC6VjPBkQuInLo0hvQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.95.0':
     resolution: {integrity: sha512-Pvi1lGe/G+mJZ3hUojMP/aAHAzHA25AEtVr8/iuz7UV72t/15NOgJYr9kELMUMNjPqpr3vKUgXTFmTtAxp11Qw==}
@@ -1604,77 +1584,66 @@ packages:
     engines: {node: '>=20.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-z4UKGM4wv2wEAQAlx2pBq6+pDJw5J/5oDEXqW6yBSLbWLjLDo4oagmRSE3+giOWteUa+0FVJ+ypq4iYxBkYSWg==}
     engines: {node: '>=20.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.93.0':
     resolution: {integrity: sha512-oNIQb/7HGxVNeVgtkoqNcDS1hjfxArLDuMI72V+Slp67yfBdxgvfmM2JSWE7kGR5gyiZQeTjRbG89VrRwPDtww==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
     resolution: {integrity: sha512-pUEVHIOVNDfhk4sTlLhn6mrNENhE4/dAwemxIfqpcSyBlYG0xYZND1F3jjR2yWY6DakXZ6VSuDbtiv1LPNlOLw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-z3HVOr6F1PpKAxzwwG9NKfFmCCMMI8MbmxZ3l+UKKViFD9NlJYKx+Afye3SgHHTkYKEm3POgmmR4Aq3kKMP7sQ==}
     engines: {node: '>=20.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-6W1ENe/nZtr2TBnrEzmdGEraEAdZOiH3YoUNNeQWuqwLkmpoHTJJdclieToPe/l2IKJ4WL3FsSLSGHE8yt/OEg==}
     engines: {node: '>=20.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.93.0':
     resolution: {integrity: sha512-YyzhzAoq5WpRtAGOngpJUu+4jKagSbknORejmpeW48vu8/+XjrVZFc/1Qe4i72EsPzLorDwCxWVkU8VftpM4iA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
     resolution: {integrity: sha512-5+olaepHTE3J/+w7g0tr3nocvv5BKilAJnzj4L8tWBCLEZbL6olJcGVoldUO+3cgg1SO1xJywP5BuLhT0mDUDw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-qJULpZeRsN0mfxasPh8EzzE7lsEEMEEtcprgw8QetB5l1Urz4gzKyeKdqs1vuxBl9o0s+WHSiowH2YqFMALs/g==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-s3kB/Ii3X3IOZ27Iu7wx2zYkIcDO22Emu32SNC6kkUSy09dPBc1yaW14TnAkPMe/rvtuzR512JPWj3iGpl+Dng==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.93.0':
     resolution: {integrity: sha512-UMXsE6c0MIlvtqDe5t5K8qwC6HqNb3wmy8zKxONo42dIx0WAhVV9ydG2Xlznt1/RhD6nLLtHVaq4yWJXRjUxcg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.95.0':
     resolution: {integrity: sha512-8huzHlK/N98wrnYKxIcYsK8ZGBWomQchu/Mzi6m+CtbhjWOv9DmK0jQ2fUWImtluQVpTwS0uZT06d3g7XIkJrA==}
@@ -1687,14 +1656,12 @@ packages:
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-3+M9hfrZSDi4+Uy4Ll3rtOuVG3IHDQlj027jgtmAAHJK1eqp4CQfC7rrwE+LFUqUwX+KD2GwlxR+eHyyEf5Gbg==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.93.0':
     resolution: {integrity: sha512-0Vd0yFUq129VW+Cpcj/gJOqub4EMN5hUWnVk8UfAvUZ+lxZBFeXbYNI5483SLwzvw5umzlMmkKpYWw5OTwYFaA==}
@@ -1901,7 +1868,6 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-BxFkIcso2V1+FCDoU+KctxvJzSQVSnEZ5EEQ8O3Up9EoFVQRnZ8ktXvqYj2Oqvc4IYPskLPsKUgc9gdK8wGhUg==}
@@ -1920,7 +1886,6 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-MZ1/TNaebhXK73j1UDfwyBFnAy0tT3n6otOkhlt1vlJwqboUS/D7E/XrCZmAuHIfVPxAXRPovkl7kfxLB43SKw==}
@@ -1939,7 +1904,6 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-JCWE6n4Hicu0FVbvmLdH/dS8V6JykOUsbrbDYm6JwFlHr4eFTTlS2B+mh5KPOxcdeOlv/D/XRnvMJ6WGYs25EA==}
@@ -1958,7 +1922,6 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-n2NTgM+3PqFagJV9UXRDNOmYesF+TO9SF9FeHqwVmW893ayef9KK+vfWAAhvOYHXYaKWT5XoHd87ODD7nruyhw==}
@@ -1977,7 +1940,6 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-ZOKW3wx0bW2O7jGdOzr8DyLZqX2C36sXvJdsHj3IueZZ//d/NjLZqEiUKz+q0JlERHtCVKShQ5PLaCx7NpuqNg==}
@@ -1996,7 +1958,6 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-eIspx/JqkVMPK1CAYEOo2J8o49s4ZTf+32MSMUknIN2ZS1fvRmWS0D/xFFaLP/9UGhdrXRIPbn/iSYEA8JnV/g==}
@@ -2090,42 +2051,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-wasm@2.5.1':
     resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
@@ -2210,28 +2165,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@resvg/resvg-js-linux-arm64-musl@2.6.2':
     resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@resvg/resvg-js-linux-x64-gnu@2.6.2':
     resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@resvg/resvg-js-linux-x64-musl@2.6.2':
     resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@resvg/resvg-js-win32-arm64-msvc@2.6.2':
     resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==}
@@ -2380,67 +2331,56 @@ packages:
     resolution: {integrity: sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.4':
     resolution: {integrity: sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.4':
     resolution: {integrity: sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.4':
     resolution: {integrity: sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.4':
     resolution: {integrity: sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.4':
     resolution: {integrity: sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.4':
     resolution: {integrity: sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.4':
     resolution: {integrity: sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.4':
     resolution: {integrity: sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.4':
     resolution: {integrity: sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.4':
     resolution: {integrity: sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.4':
     resolution: {integrity: sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==}
@@ -2586,28 +2526,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
     resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
     resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.14':
     resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.14':
     resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
@@ -3378,17 +3314,10 @@ packages:
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
-<<<<<<< HEAD
-=======
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-kit@1.4.3:
-    resolution: {integrity: sha512-MdJqjpodkS5J149zN0Po+HPshkTdUyrvF7CKTafUgv69vBSPtncrj+3IiUgqdd7ElIEkbeXCsEouBUwLrw9Ilg==}
-    engines: {node: '>=16.14.0'}
-
->>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
   ast-kit@2.1.2:
     resolution: {integrity: sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==}
     engines: {node: '>=20.18.0'}
@@ -5408,28 +5337,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
@@ -6250,11 +6175,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright-core@1.56.1:
-    resolution: {integrity: sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   playwright@1.56.1:
     resolution: {integrity: sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==}
     engines: {node: '>=18'}
@@ -9069,7 +8989,7 @@ snapshots:
       h3: 1.15.4
       jiti: 2.6.1
       magic-regexp: 0.10.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       node-fetch-native: 1.6.7
       ohash: 2.0.11
       pathe: 2.0.3
@@ -9117,7 +9037,7 @@ snapshots:
       ohash: 2.0.11
       pathe: 2.0.3
       picomatch: 4.0.3
-      std-env: 3.9.0
+      std-env: 3.10.0
       tinyglobby: 0.2.15
     transitivePeerDependencies:
       - magicast
@@ -9135,7 +9055,7 @@ snapshots:
       knitwork: 1.2.0
       ohash: 2.0.11
       pathe: 2.0.3
-      std-env: 3.9.0
+      std-env: 3.10.0
       ufo: 1.6.1
     optionalDependencies:
       ipx: 2.1.1(db0@0.3.4)(ioredis@5.8.0)
@@ -9236,7 +9156,7 @@ snapshots:
       rc9: 2.1.2
       scule: 1.3.0
       semver: 7.7.2
-      std-env: 3.9.0
+      std-env: 3.10.0
       tinyglobby: 0.2.15
       ufo: 1.6.1
       unctx: 2.4.1
@@ -9298,7 +9218,7 @@ snapshots:
       consola: 3.4.2
       defu: 6.1.4
       h3: 1.15.4
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       ofetch: 1.4.1
       ohash: 2.0.11
       pathe: 2.0.3
@@ -9422,7 +9342,7 @@ snapshots:
       defu: 6.1.4
       esbuild: 0.25.10
       escape-string-regexp: 5.0.0
-      exsolve: 1.0.8
+      exsolve: 1.0.7
       get-port-please: 3.2.0
       h3: 1.15.4
       jiti: 2.6.1
@@ -9584,7 +9504,6 @@ snapshots:
       - magicast
       - supports-color
 
-<<<<<<< HEAD
   '@nuxtjs/mdc@0.18.2(magicast@0.3.5)':
     dependencies:
       '@nuxt/kit': 4.2.1(magicast@0.3.5)
@@ -9633,9 +9552,8 @@ snapshots:
     transitivePeerDependencies:
       - magicast
       - supports-color
-=======
+
   '@one-ini/wasm@0.1.1': {}
->>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
 
   '@opentelemetry/api@1.9.0': {}
 
@@ -9718,7 +9636,7 @@ snapshots:
 
   '@oxc-minify/binding-wasm32-wasi@0.87.0':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.7
+      '@napi-rs/wasm-runtime': 1.0.6
     optional: true
 
   '@oxc-minify/binding-win32-arm64-msvc@0.78.0':
@@ -9884,7 +9802,7 @@ snapshots:
 
   '@oxc-parser/binding-wasm32-wasi@0.87.0':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.7
+      '@napi-rs/wasm-runtime': 1.0.6
     optional: true
 
   '@oxc-parser/binding-wasm32-wasi@0.93.0':
@@ -10045,7 +9963,7 @@ snapshots:
 
   '@oxc-transform/binding-wasm32-wasi@0.87.0':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.7
+      '@napi-rs/wasm-runtime': 1.0.6
     optional: true
 
   '@oxc-transform/binding-wasm32-wasi@0.95.0':
@@ -11219,7 +11137,7 @@ snapshots:
   '@vue-macros/common@3.0.0-beta.16(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vue/compiler-sfc': 3.5.22
-      ast-kit: 2.2.0
+      ast-kit: 2.1.2
       local-pkg: 1.1.2
       magic-string-ast: 1.0.2
       unplugin-utils: 0.2.5
@@ -11626,16 +11544,8 @@ snapshots:
 
   array-ify@1.0.0: {}
 
-<<<<<<< HEAD
-=======
   assertion-error@2.0.1: {}
 
-  ast-kit@1.4.3:
-    dependencies:
-      '@babel/parser': 7.28.4
-      pathe: 2.0.3
-
->>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
   ast-kit@2.1.2:
     dependencies:
       '@babel/parser': 7.28.4
@@ -13127,7 +13037,7 @@ snapshots:
       '@capsizecss/unpack': 2.4.0
       css-tree: 3.1.0
       magic-regexp: 0.10.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       pathe: 2.0.3
       ufo: 1.6.1
       unplugin: 2.3.10
@@ -14715,7 +14625,7 @@ snapshots:
       defu: 6.1.4
       execa: 9.6.0
       image-size: 2.0.2
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       mocked-exports: 0.1.1
       nuxt-site-config: 3.2.9(h3@1.15.4)(magicast@0.3.5)(vue@3.5.22(typescript@5.9.3))
       nypm: 0.6.2
@@ -14903,7 +14813,7 @@ snapshots:
       '@nuxt/vite-builder': 4.1.2(@types/node@24.6.2)(eslint@9.37.0(jiti@2.6.1))(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.4)(terser@5.44.0)(typescript@5.9.3)(vue-tsc@3.1.0(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))(yaml@2.8.1)
       '@unhead/vue': 2.0.17(vue@3.5.22(typescript@5.9.3))
       '@vue/shared': 3.5.22
-      c12: 3.3.2(magicast@0.3.5)
+      c12: 3.3.0(magicast@0.3.5)
       chokidar: 4.0.3
       compatx: 0.2.0
       consola: 3.4.2
@@ -14915,7 +14825,7 @@ snapshots:
       esbuild: 0.25.10
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
-      exsolve: 1.0.8
+      exsolve: 1.0.7
       h3: 1.15.4
       hookable: 5.5.3
       ignore: 7.0.5
@@ -14941,11 +14851,7 @@ snapshots:
       pkg-types: 2.3.0
       radix3: 1.1.2
       scule: 1.3.0
-<<<<<<< HEAD
-      semver: 7.7.3
-=======
       semver: 7.7.2
->>>>>>> f785c2f (feat: integrate Vitest for testing and add web preview tests)
       std-env: 3.10.0
       tinyglobby: 0.2.15
       ufo: 1.6.1
@@ -14954,13 +14860,13 @@ snapshots:
       unctx: 2.4.1
       unimport: 5.4.1
       unplugin: 2.3.10
-      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.0)
       untyped: 2.0.0
       vue: 3.5.22(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
       vue-devtools-stub: 0.1.0
-      vue-router: 4.6.3(vue@3.5.22(typescript@5.9.3))
+      vue-router: 4.5.1(vue@3.5.22(typescript@5.9.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
       '@types/node': 24.6.2
@@ -15423,8 +15329,6 @@ snapshots:
 
   playwright-core@1.56.1: {}
 
-  playwright-core@1.56.1: {}
-
   playwright@1.56.1:
     dependencies:
       playwright-core: 1.56.1
@@ -16841,12 +16745,12 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@vue-macros/common': 3.0.0-beta.16(vue@3.5.22(typescript@5.9.3))
       '@vue/compiler-sfc': 3.5.22
-      '@vue/language-core': 3.1.3(typescript@5.9.3)
-      ast-walker-scope: 0.8.3
+      '@vue/language-core': 3.1.0(typescript@5.9.3)
+      ast-walker-scope: 0.8.2
       chokidar: 4.0.3
       json5: 2.2.3
       local-pkg: 1.1.2
@@ -16861,7 +16765,7 @@ snapshots:
       unplugin-utils: 0.2.5
       yaml: 2.8.1
     optionalDependencies:
-      vue-router: 4.6.3(vue@3.5.22(typescript@5.9.3))
+      vue-router: 4.5.1(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - typescript
       - vue

From 37dadba186bf077dd67a3d7e861b7c577046b8a8 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 16:39:11 +0800
Subject: [PATCH 11/15] chore: install Playwright 1.56.1 dependencie

---
 packages/elements/package.json |  1 +
 pnpm-lock.yaml                 | 31 +++++++++++++++++--------------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/elements/package.json b/packages/elements/package.json
index c071e80..2399608 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -33,6 +33,7 @@
     "@vitest/browser-playwright": "^4.0.8",
     "@vitest/ui": "4.0.8",
     "@vue/test-utils": "^2.4.6",
+    "playwright": "^1.56.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.8",
     "vitest-browser-vue": "^2.0.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a4756e..f98f6a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -156,6 +156,9 @@ importers:
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
+      playwright:
+        specifier: ^1.56.1
+        version: 1.56.1
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -9342,7 +9345,7 @@ snapshots:
       defu: 6.1.4
       esbuild: 0.25.10
       escape-string-regexp: 5.0.0
-      exsolve: 1.0.7
+      exsolve: 1.0.8
       get-port-please: 3.2.0
       h3: 1.15.4
       jiti: 2.6.1
@@ -9636,7 +9639,7 @@ snapshots:
 
   '@oxc-minify/binding-wasm32-wasi@0.87.0':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.6
+      '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
   '@oxc-minify/binding-win32-arm64-msvc@0.78.0':
@@ -9802,7 +9805,7 @@ snapshots:
 
   '@oxc-parser/binding-wasm32-wasi@0.87.0':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.6
+      '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
   '@oxc-parser/binding-wasm32-wasi@0.93.0':
@@ -9963,7 +9966,7 @@ snapshots:
 
   '@oxc-transform/binding-wasm32-wasi@0.87.0':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.6
+      '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
   '@oxc-transform/binding-wasm32-wasi@0.95.0':
@@ -11137,7 +11140,7 @@ snapshots:
   '@vue-macros/common@3.0.0-beta.16(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vue/compiler-sfc': 3.5.22
-      ast-kit: 2.1.2
+      ast-kit: 2.2.0
       local-pkg: 1.1.2
       magic-string-ast: 1.0.2
       unplugin-utils: 0.2.5
@@ -14813,7 +14816,7 @@ snapshots:
       '@nuxt/vite-builder': 4.1.2(@types/node@24.6.2)(eslint@9.37.0(jiti@2.6.1))(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.4)(terser@5.44.0)(typescript@5.9.3)(vue-tsc@3.1.0(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))(yaml@2.8.1)
       '@unhead/vue': 2.0.17(vue@3.5.22(typescript@5.9.3))
       '@vue/shared': 3.5.22
-      c12: 3.3.0(magicast@0.3.5)
+      c12: 3.3.2(magicast@0.3.5)
       chokidar: 4.0.3
       compatx: 0.2.0
       consola: 3.4.2
@@ -14825,7 +14828,7 @@ snapshots:
       esbuild: 0.25.10
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
-      exsolve: 1.0.7
+      exsolve: 1.0.8
       h3: 1.15.4
       hookable: 5.5.3
       ignore: 7.0.5
@@ -14851,7 +14854,7 @@ snapshots:
       pkg-types: 2.3.0
       radix3: 1.1.2
       scule: 1.3.0
-      semver: 7.7.2
+      semver: 7.7.3
       std-env: 3.10.0
       tinyglobby: 0.2.15
       ufo: 1.6.1
@@ -14860,13 +14863,13 @@ snapshots:
       unctx: 2.4.1
       unimport: 5.4.1
       unplugin: 2.3.10
-      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.0)
       untyped: 2.0.0
       vue: 3.5.22(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
       vue-devtools-stub: 0.1.0
-      vue-router: 4.5.1(vue@3.5.22(typescript@5.9.3))
+      vue-router: 4.6.3(vue@3.5.22(typescript@5.9.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
       '@types/node': 24.6.2
@@ -16745,12 +16748,12 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@vue-macros/common': 3.0.0-beta.16(vue@3.5.22(typescript@5.9.3))
       '@vue/compiler-sfc': 3.5.22
-      '@vue/language-core': 3.1.0(typescript@5.9.3)
-      ast-walker-scope: 0.8.2
+      '@vue/language-core': 3.1.3(typescript@5.9.3)
+      ast-walker-scope: 0.8.3
       chokidar: 4.0.3
       json5: 2.2.3
       local-pkg: 1.1.2
@@ -16765,7 +16768,7 @@ snapshots:
       unplugin-utils: 0.2.5
       yaml: 2.8.1
     optionalDependencies:
-      vue-router: 4.5.1(vue@3.5.22(typescript@5.9.3))
+      vue-router: 4.6.3(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - typescript
       - vue

From be03413d2e3fbba91151a93f030d06a42d9e6f8e Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 16:45:23 +0800
Subject: [PATCH 12/15] ci: make test github action work

---
 package.json                       |  1 +
 packages/elements/vitest.config.ts | 11 ++++++++++-
 turbo.json                         |  5 +++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5de8bcd..2c8620d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "scripts": {
     "build": "turbo run build",
+    "test": "turbo run test",
     "dev": "turbo run dev",
     "dev:www": "pnpm --filter www dev",
     "build:www": "pnpm --filter www build",
diff --git a/packages/elements/vitest.config.ts b/packages/elements/vitest.config.ts
index 8114df6..8324643 100644
--- a/packages/elements/vitest.config.ts
+++ b/packages/elements/vitest.config.ts
@@ -7,12 +7,21 @@ export default defineConfig({
   plugins: [vue(), vueJsx({})],
   test: {
     browser: {
-      // headless: true,
+      headless: true,
       enabled: true,
       provider: playwright(),
       instances: [
         { browser: 'chromium' },
       ],
     },
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        '__tests__/**',
+        '**/*.config.{ts,js,mts}',
+      ],
+    },
   },
 })
diff --git a/turbo.json b/turbo.json
index 5c2a3e2..59c2f68 100644
--- a/turbo.json
+++ b/turbo.json
@@ -13,6 +13,11 @@
     },
     "lint": {
       "cache": true
+    },
+    "test": {
+      "dependsOn": ["^test"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["coverage/**"]
     }
   }
 }

From b279b486ca635d0a0e8c9c6f3b12d74b830935be Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 16:55:27 +0800
Subject: [PATCH 13/15] chore: update Vitest configuration with path aliases
 for improved module resolution

---
 packages/elements/vitest.config.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/elements/vitest.config.ts b/packages/elements/vitest.config.ts
index 8324643..32b74f4 100644
--- a/packages/elements/vitest.config.ts
+++ b/packages/elements/vitest.config.ts
@@ -1,3 +1,4 @@
+import path from 'node:path'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { playwright } from '@vitest/browser-playwright'
@@ -24,4 +25,21 @@ export default defineConfig({
       ],
     },
   },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@repo/shadcn-ui/lib/utils': path.resolve(
+        __dirname,
+        '../shadcn-ui/lib/utils.ts',
+      ),
+      '@repo/shadcn-ui/components': path.resolve(
+        __dirname,
+        '../shadcn-ui/components',
+      ),
+      'katex/dist/katex.min.css': path.resolve(
+        __dirname,
+        './__tests__/styleMock.js',
+      ),
+    },
+  },
 })

From c75a388b1f888ecc03e69ebfca6d7cf812b5b6f3 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Thu, 13 Nov 2025 17:09:31 +0800
Subject: [PATCH 14/15] chore: update Vitest configuration to use shadcn-vue
 path aliases

---
 packages/elements/vitest.config.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/elements/vitest.config.ts b/packages/elements/vitest.config.ts
index 32b74f4..68bdd36 100644
--- a/packages/elements/vitest.config.ts
+++ b/packages/elements/vitest.config.ts
@@ -28,13 +28,13 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
-      '@repo/shadcn-ui/lib/utils': path.resolve(
+      '@repo/shadcn-vue/lib/utils': path.resolve(
         __dirname,
-        '../shadcn-ui/lib/utils.ts',
+        '../shadcn-vue/lib/utils.ts',
       ),
-      '@repo/shadcn-ui/components': path.resolve(
+      '@repo/shadcn-vue/components': path.resolve(
         __dirname,
-        '../shadcn-ui/components',
+        '../shadcn-vue/components',
       ),
       'katex/dist/katex.min.css': path.resolve(
         __dirname,

From 746a8dfb4e83ddcd760954ab4a2b15d3da04f592 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Sun, 16 Nov 2025 21:06:45 +0800
Subject: [PATCH 15/15] chore: removed irrelevant script code

---
 packages/elements/package.json              |  1 -
 packages/elements/scripts/gen-code-group.ts | 65 ---------------------
 2 files changed, 66 deletions(-)
 delete mode 100644 packages/elements/scripts/gen-code-group.ts

diff --git a/packages/elements/package.json b/packages/elements/package.json
index 2399608..5824b84 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -7,7 +7,6 @@
     "./*": "./src/*/index.ts"
   },
   "scripts": {
-    "gen-code-group": "pnpx tsx ./scripts/gen-code-group.ts",
     "test": "vitest run"
   },
   "dependencies": {
diff --git a/packages/elements/scripts/gen-code-group.ts b/packages/elements/scripts/gen-code-group.ts
deleted file mode 100644
index 058c17e..0000000
--- a/packages/elements/scripts/gen-code-group.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import fs from 'node:fs'
-import path from 'node:path'
-
-const srcDir = path.join(__dirname, '..', 'src')
-const componentDirs = fs
-  .readdirSync(srcDir, { withFileTypes: true })
-  .filter(dirent => dirent.isDirectory())
-  .map(dirent => dirent.name)
-
-// Read all component directories in the src directory
-// For each directory, read all files and generate a .code-group.md file
-
-for (const componentDir of componentDirs) {
-  const componentPath = path.join(srcDir, componentDir)
-  const files = fs
-    .readdirSync(componentPath)
-    .filter(
-      file =>
-        file !== '.code-group.md'
-        && fs.statSync(path.join(componentPath, file)).isFile(),
-    )
-    .sort()
-
-  if (files.length === 0) {
-    continue
-  }
-
-  // Generate code group content
-  const codeBlocks: string[] = []
-
-  for (const file of files) {
-    const filePath = path.join(componentPath, file)
-    const content = fs.readFileSync(filePath, 'utf-8')
-    const ext = path.extname(file).slice(1) // Remove the dot
-
-    // Determine language based on extension
-    let lang = ext
-    if (ext === 'vue') {
-      lang = 'vue'
-    }
-    else if (ext === 'ts' || ext === 'tsx') {
-      lang = 'ts'
-    }
-    else if (ext === 'js' || ext === 'jsx') {
-      lang = 'js'
-    }
-    else if (ext === 'md') {
-      lang = 'md'
-    }
-    else {
-      lang = ext
-    }
-
-    codeBlocks.push(`\`\`\`${lang} [${file}]\n${content}\n\`\`\``)
-  }
-
-  // Write .code-group.md file
-  const codeGroupContent = `:::code-group\n${codeBlocks.join('\n\n')}\n:::\n`
-  const codeGroupPath = path.join(componentPath, '.code-group.md')
-  fs.writeFileSync(codeGroupPath, codeGroupContent, 'utf-8')
-
-  console.log(`Generated ${codeGroupPath} for ${componentDir}`)
-}
-
-console.log('Done!')