feat(layer): add custom content components and UI primitives for extending apps

apps/docs/app/components/content/ColorModeSwitch.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+
+const colorMode = useColorMode()
+
+const isLight = computed(() => colorMode.value === 'light')
+
+function toggleColorMode(checked: boolean) {
+  colorMode.preference = checked ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <div class="flex-1 flex items-center justify-center">
+      <SwitchRoot
+        :checked="isLight"
+        aria-label="Toggle color mode"
+        class="relative w-[140px] h-[280px] rounded-lg bg-muted cursor-pointer transition-colors"
+        @update:checked="toggleColorMode"
+      >
+        <SwitchThumb
+          class="absolute top-[2px] left-[2px] flex items-center justify-center rounded-lg bg-background shadow-lg transition-all duration-300 ease-in-out size-[136px] data-[state=checked]:translate-y-[140px]"
+        >
+          <Icon
+            :name="isLight ? 'lucide:sun' : 'lucide:moon'"
+            class="size-16 text-foreground"
+          />
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <template #fallback>
+      <div class="flex-1 flex items-center justify-center">
+        <div class="w-[140px] h-[280px] rounded-lg bg-muted" />
+      </div>
+    </template>
+  </ClientOnly>
+</template>

apps/docs/content/index.md

@@ -129,20 +129,86 @@ Ship fast, flexible, and SEO-optimized documentation with beautiful design out o
     ```
     ::::
 
-    ::::u-page-card{class="col-span-1"}
+    ::::u-page-card
+    ---
+    spotlight: true
+    class: col-span-1 min-h-[450px]
+    ---
+      :::::color-mode-switch
+      :::::
+
     #title
-    [Dark Mode]{.text-primary} built-in
+    [Color Mode]{.text-primary} built-in
 
     #description
-    Built-in dark/light mode support with smooth transitions and system preference detection. No configuration required.
+    Built-in dark mode provided, no configuration required.
     ::::
 
-    ::::u-page-card{class="col-span-1 lg:col-span-2"}
+    ::::u-page-card
+    ---
+    spotlight: true
+    class: col-span-2
+    ---
+      :::::u-color-mode-image
+      ---
+      height: 554
+      width: 859
+      alt: Built-in navigation and full-text search
+      class: rounded-lg
+      dark: /landing/dark/command-menu.png
+      format: webp
+      light: /landing/light/command-menu.png
+      loading: lazy
+      ---
+      :::::
+
     #title
     Built-in navigation and [full-text search]{.text-primary}
 
     #description
     Only focus on ordering your content. Auto-generated side navigation and full-text search are built-in to help users find what they need.
     ::::
+
+    ::::u-page-card
+    ---
+    spotlight: true
+    class: col-span-2
+    target: _blank
+    ---
+      :::::browser-frame
+      :video{class="rounded-md" controls loop playsinline src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
+      :::::
+
+    #title
+    Collaborate on [Nuxt Studio]{.text-primary}
+
+    #description
+    Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills.
+    ::::
+
+    ::::u-page-card
+    ---
+    spotlight: true
+    class: col-span-2 lg:col-span-1
+    target: _blank
+    to: https://image.nuxt.com/
+    ---
+      :::::div{class="flex-1 flex items-center justify-center"}
+        ::::::u-color-mode-image
+        ---
+        alt: Nuxt Image visual
+        class: w-[30%] lg:w-[70%] my-12 lg:my-0
+        dark: /landing/dark/nuxt-image.svg
+        light: /landing/light/nuxt-image.svg
+        ---
+        ::::::
+      :::::
+
+    #title
+    [Nuxt Image]{.text-primary} optimization
+
+    #description
+    Automatically converts Markdown images to use `<NuxtImg>` for optimized loading.
+    ::::
   :::
 ::

packages/layer/app/components/content/BrowserFrame.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="w-fit rounded-xl border border-border bg-muted shadow-md overflow-hidden px-2 pb-2">
+    <div class="flex justify-between items-center px-2 py-2 bg-muted border-border border-b">
+      <div class="flex items-center gap-2">
+        <span class="w-3 h-3 bg-red-500 rounded-full" />
+        <span class="w-3 h-3 bg-yellow-500 rounded-full" />
+        <span class="w-3 h-3 bg-green-500 rounded-full" />
+      </div>
+      <div class="text-muted-foreground text-sm">
+        {{ title }}
+      </div>
+    </div>
+    <slot mdc-unwrap="p" />
+  </div>
+</template>

packages/layer/app/components/content/Callout.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes, Component } from 'vue'
 import type { AlertVariants } from '~/components/ui/alert'
-import type { Component } from 'vue'
 import {
   CircleAlertIcon,
   CircleCheckIcon,
@@ -63,9 +62,14 @@ const resolvedIcon = computed(() => {
     )"
     :variant="resolvedVariant"
   >
-    <component :is="resolvedIcon" v-if="resolvedIcon" />
+    <component
+      :is="resolvedIcon"
+      v-if="resolvedIcon"
+    />
     <AlertTitle v-if="title || $slots.title">
-      <slot name="title">{{ title }}</slot>
+      <slot name="title">
+        {{ title }}
+      </slot>
     </AlertTitle>
     <AlertDescription>
       <slot name="description">

packages/layer/app/components/content/Caution.vue

@@ -9,8 +9,15 @@ defineProps<{
 </script>
 
 <template>
-  <Callout type="caution" :title :class>
-    <template v-if="$slots.title" #title>
+  <Callout
+    type="caution"
+    :title
+    :class
+  >
+    <template
+      v-if="$slots.title"
+      #title
+    >
       <slot name="title" />
     </template>
     <slot />

packages/layer/app/components/content/Note.vue

@@ -9,8 +9,15 @@ defineProps<{
 </script>
 
 <template>
-  <Callout type="note" :title :class>
-    <template v-if="$slots.title" #title>
+  <Callout
+    type="note"
+    :title
+    :class
+  >
+    <template
+      v-if="$slots.title"
+      #title
+    >
       <slot name="title" />
     </template>
     <slot />