docs(playground): add airbnb demo

docs/app/components/Playground.vue

@@ -8,11 +8,17 @@ import mermaid from '@comark/nuxt/plugins/mermaid'
 import jsonRender from '@comark/nuxt/plugins/json-render'
 import footnotes from '@comark/nuxt/plugins/footnotes'
 import punctuation from '@comark/nuxt/plugins/punctuation'
-import breaks from '@comark/vue/plugins/breaks'
+import breaks from '@comark/nuxt/plugins/breaks'
 
 import { renderMarkdown } from 'comark/render'
 import { Splitpanes, Pane } from 'splitpanes'
-import { defaultMarkdown } from '~/constants'
+import { airbnbMarkdown, playgroundExamples } from '~/constants'
+import PropertyGallery from '~/components/playground/PropertyGallery.vue'
+import RatingBar from '~/components/playground/RatingBar.vue'
+import HostInfo from '~/components/playground/HostInfo.vue'
+import Facility from '~/components/playground/Facility.vue'
+import TwoColumn from '~/components/playground/TwoColumn.vue'
+import BookingCard from '~/components/playground/BookingCard.vue'
 import { useLocalStorage, watchDebounced } from '@vueuse/core'
 import type { ComarkTree, ComarkPlugin } from 'comark'
 import VueJsonPretty from 'vue-json-pretty'
@@ -21,7 +27,12 @@ const props = defineProps<{
   compact?: boolean
 }>()
 
-const markdown = ref<string>(defaultMarkdown.trim())
+const selectedExample = ref('airbnb')
+const currentExample = computed(() =>
+  playgroundExamples.find(e => e.value === selectedExample.value) ?? playgroundExamples[0]!,
+)
+
+const markdown = ref<string>(airbnbMarkdown.trim())
 const tree = ref<ComarkTree | null>(null)
 const parseTime = ref<number>(0)
 const nodeCount = ref<number>(0)
@@ -125,7 +136,7 @@ const parseOptionDefs = [
 
 const activePlugins = computed<ComarkPlugin[]>(() =>
   pluginDefs
-    .filter(p => pluginToggles.value[p.key])
+    .filter(p => pluginToggles.value[p.key as keyof typeof pluginToggles.value])
     .map(p => p.factory()),
 )
 
@@ -195,15 +206,19 @@ onMounted(() => {
   nextTick(() => parseMarkdown())
 })
 
+watch(selectedExample, () => {
+  markdown.value = currentExample.value.content.trim()
+})
+
 function resetComark(): void {
-  markdown.value = defaultMarkdown.trim()
+  markdown.value = currentExample.value.content.trim()
 }
 
 const formattedOutput = ref<string>('')
 
-watch(tree, async (t: ComarkTree | null) => {
-  formattedOutput.value = t ? await renderMarkdown(t) : ''
-}, { immediate: true })
+watchEffect(async () => {
+  formattedOutput.value = tree.value ? await renderMarkdown(tree.value as any) : ''
+})
 
 const formattedOutputModel = computed({
   get: () => formattedOutput.value,
@@ -228,12 +243,20 @@ const isMatch = computed(() =>
       >
         <div class="h-full flex flex-col">
           <div class="shrink-0 flex items-center gap-2 px-3 h-9 border-b border-default bg-default">
+            <USelect
+              v-if="!compact"
+              v-model="selectedExample"
+              :items="playgroundExamples"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              class="w-32"
+            />
             <UTooltip
-              v-if="markdown !== defaultMarkdown.trim()"
-              text="Reset to default content"
+              v-if="markdown !== currentExample.content.trim()"
+              text="Reset to example"
             >
               <UButton
-                :disabled="markdown === defaultMarkdown.trim()"
                 size="xs"
                 color="neutral"
                 variant="ghost"
@@ -279,7 +302,7 @@ const isMatch = computed(() =>
                       v-for="plugin in pluginDefs"
                       :key="plugin.key"
                       class="flex items-center gap-2.5 w-full px-2 py-1.5 rounded-md text-sm hover:bg-elevated transition-colors"
-                      @click="pluginToggles[plugin.key] = !pluginToggles[plugin.key] as any"
+                      @click="pluginToggles[plugin.key] = !pluginToggles[plugin.key]"
                     >
                       <UIcon
                         :name="plugin.icon"
@@ -432,7 +455,7 @@ const isMatch = computed(() =>
               >
                 <ComarkDocsRenderer
                   :tree="tree"
-                  :components="{ Binding }"
+                  :components="{ Binding, PropertyGallery, RatingBar, HostInfo, Facility, TwoColumn, BookingCard }"
                 />
               </div>
             </UScrollArea>

docs/app/components/playground/BookingCard.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  cta: string
+}>()
+</script>
+
+<template>
+  <div class="not-prose rounded-xl border border-muted p-5 shadow-lg">
+    <p class="mb-4 text-base font-semibold text-highlighted">
+      {{ title }}
+    </p>
+
+    <div class="mb-3 overflow-hidden rounded-lg border border-muted">
+      <div class="grid grid-cols-2 divide-x divide-muted">
+        <div class="p-3">
+          <p class="text-[10px] font-semibold uppercase tracking-wider text-muted">
+            Check-in
+          </p>
+          <p class="text-sm text-dimmed">
+            Add date
+          </p>
+        </div>
+        <div class="p-3">
+          <p class="text-[10px] font-semibold uppercase tracking-wider text-muted">
+            Checkout
+          </p>
+          <p class="text-sm text-dimmed">
+            Add date
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center justify-between border-t border-muted p-3">
+        <div>
+          <p class="text-[10px] font-semibold uppercase tracking-wider text-muted">
+            Guests
+          </p>
+          <p class="text-sm text-highlighted">
+            1 guest
+          </p>
+        </div>
+        <UIcon
+          name="i-lucide-chevron-down"
+          class="size-4 text-muted"
+        />
+      </div>
+    </div>
+
+    <UButton
+      block
+      color="primary"
+      :label="cta"
+    />
+
+    <p class="mt-3 text-center text-xs text-muted">
+      You won't be charged yet
+    </p>
+  </div>
+</template>

docs/app/components/playground/Facility.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string
+}>()
+</script>
+
+<template>
+  <div class="not-prose flex items-start gap-4 py-3">
+    <UIcon
+      :name="icon"
+      class="mt-0.5 size-6 shrink-0 text-highlighted"
+    />
+    <div>
+      <div class="text-sm font-medium text-highlighted [&>p]:m-0">
+        <slot name="title" />
+      </div>
+      <div class="text-sm text-muted [&>p]:m-0">
+        <slot name="description" />
+      </div>
+    </div>
+  </div>
+</template>

docs/app/components/playground/HostInfo.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  badge?: string
+  duration?: string
+}>()
+</script>
+
+<template>
+  <div class="not-prose flex items-center gap-3 py-5">
+    <div class="flex size-11 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary-200 to-primary-400 text-sm font-semibold text-white dark:from-primary-700 dark:to-primary-500">
+      {{ name[0] }}
+    </div>
+    <div>
+      <p class="text-sm font-semibold text-highlighted">
+        Hosted by {{ name }}
+      </p>
+      <p class="text-xs text-muted">
+        <span v-if="badge">{{ badge }}</span>
+        <span
+          v-if="badge && duration"
+          class="mx-1"
+        >·</span>
+        <span v-if="duration">{{ duration }}</span>
+      </p>
+    </div>
+  </div>
+</template>

docs/app/components/playground/PropertyGallery.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="not-prose relative my-6 grid h-72 grid-cols-[2fr_1fr_1fr] grid-rows-2 gap-2 overflow-hidden rounded-xl">
+    <div class="row-span-2 overflow-hidden [&_img]:block [&_img]:size-full [&_img]:object-cover">
+      <slot name="main" />
+    </div>
+    <div class="col-span-2 row-span-2 grid grid-cols-2 grid-rows-2 gap-2 *:overflow-hidden [&>p]:m-0 [&_img]:block [&_img]:size-full [&_img]:object-cover">
+      <slot name="thumbnails" />
+    </div>
+    <button class="absolute bottom-3 right-3 z-10 flex items-center gap-1.5 rounded-lg border border-neutral-300 bg-white px-2.5 py-1.5 text-xs font-medium shadow-sm dark:border-neutral-600 dark:bg-neutral-800">
+      <UIcon
+        name="i-lucide-grid-2x2"
+        class="size-3"
+      />
+      Show all photos
+    </button>
+  </div>
+</template>

docs/app/components/playground/RatingBar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+defineProps<{
+  rating: string
+  reviews: string | number
+}>()
+</script>
+
+<template>
+  <div class="not-prose my-4 flex items-center gap-5 rounded-xl border border-muted px-5 py-4">
+    <div class="flex min-w-0 flex-1 items-start gap-3">
+      <div class="flex shrink-0 -space-x-2">
+        <div class="flex size-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">
+          <UIcon
+            name="i-lucide-user"
+            class="size-4 text-primary"
+          />
+        </div>
+        <div class="flex size-8 items-center justify-center rounded-full border-2 border-white bg-primary-100 dark:border-neutral-900 dark:bg-primary-900">
+          <UIcon
+            name="i-lucide-user"
+            class="size-4 text-primary"
+          />
+        </div>
+      </div>
+      <div class="min-w-0">
+        <p class="text-sm font-semibold text-highlighted">
+          Guest favorite
+        </p>
+        <p class="text-xs leading-snug text-muted">
+          One of the most loved homes on Airbnb, according to guests
+        </p>
+      </div>
+    </div>
+
+    <div class="h-10 w-px shrink-0 bg-muted" />
+
+    <div class="shrink-0 text-center">
+      <p class="text-xl font-bold text-highlighted">
+        {{ rating }}
+      </p>
+      <div class="mt-0.5 flex justify-center gap-0.5">
+        <UIcon
+          v-for="i in 5"
+          :key="i"
+          name="i-lucide-star"
+          class="size-3 text-primary"
+        />
+      </div>
+    </div>
+
+    <div class="h-10 w-px shrink-0 bg-muted" />
+
+    <div class="shrink-0 text-center">
+      <p class="text-xl font-bold text-highlighted">
+        {{ reviews }}
+      </p>
+      <p class="text-xs text-muted">
+        Reviews
+      </p>
+    </div>
+  </div>
+</template>

docs/app/components/playground/TwoColumn.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="not-prose mt-6 grid grid-cols-1 gap-8 lg:grid-cols-[1fr_320px]">
+    <div class="prose prose-sm max-w-none dark:prose-invert prose-headings:no-underline">
+      <slot name="left" />
+    </div>
+    <div class="self-start lg:sticky lg:top-4">
+      <slot name="right" />
+    </div>
+  </div>
+</template>