feat: add plan component

apps/test/app/examples/index.ts

@@ -8,6 +8,7 @@ export { default as Loader } from './loader.vue'
 export { default as MessageMarkdown } from './message-markdown.vue'
 export { default as Message } from './message.vue'
 export { default as OpenInChat } from './open-in-chat.vue'
+export { default as Plan } from './plan.vue'
 export { default as PromptInput } from './prompt-input.vue'
 export { default as Response } from './response.vue'
 export { default as Shimmer } from './shimmer.vue'

apps/test/app/examples/plan.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {
+  Plan,
+  PlanAction,
+  PlanContent,
+  PlanDescription,
+  PlanFooter,
+  PlanHeader,
+  PlanTitle,
+  PlanTrigger,
+} from '@repo/elements/plan'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { Kbd, KbdGroup } from '@repo/shadcn-vue/components/ui/kbd'
+import { FileText } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Plan :default-open="false">
+    <PlanHeader>
+      <div>
+        <div class="mb-4 flex items-center gap-2">
+          <FileText class="size-4" />
+          <PlanTitle>Rewrite AI Elements to VueJS</PlanTitle>
+        </div>
+        <PlanDescription>
+          Rewrite the AI Elements component library from React to VueJS while
+          maintaining compatibility with existing React-based shadcn/ui
+          components using vue-js/compat, updating all 29 components and their
+          test suite.
+        </PlanDescription>
+      </div>
+      <PlanTrigger />
+    </PlanHeader>
+    <PlanContent>
+      <div class="space-y-4 text-sm">
+        <div>
+          <h3 class="mb-2 font-semibold">
+            Overview
+          </h3>
+          <p>
+            This plan outlines the migration strategy for converting the AI
+            Elements library from React to VueJS, ensuring compatibility and
+            maintaining existing functionality.
+          </p>
+        </div>
+        <div>
+          <h3 class="mb-2 font-semibold">
+            Key Steps
+          </h3>
+          <ul class="list-inside list-disc space-y-1">
+            <li>Set up VueJS project structure</li>
+            <li>Install vue-js/compat for React compatibility</li>
+            <li>Migrate components one by one</li>
+            <li>Update test suite for each component</li>
+            <li>Verify compatibility with shadcn/ui</li>
+          </ul>
+        </div>
+      </div>
+    </PlanContent>
+    <PlanFooter class="justify-end">
+      <PlanAction>
+        <Button size="sm">
+          Build
+          <KbdGroup class="gap-0">
+            <Kbd class="bg-transparent text-inherit">⌘</Kbd>
+            <Kbd class="translate-y-px bg-transparent text-inherit">↩</Kbd>
+          </KbdGroup>
+        </Button>
+      </PlanAction>
+    </PlanFooter>
+  </Plan>
+</template>

apps/test/app/pages/index.vue

@@ -10,6 +10,7 @@ import Loader from '~/examples/loader.vue'
 import MessageMarkdown from '~/examples/message-markdown.vue'
 import Message from '~/examples/message.vue'
 import OpenInChat from '~/examples/open-in-chat.vue'
+import Plan from '~/examples/plan.vue'
 import PromptInput from '~/examples/prompt-input.vue'
 import Response from '~/examples/response.vue'
 import Shimmer from '~/examples/shimmer.vue'
@@ -34,6 +35,7 @@ const components = [
   { name: 'OpenInChat', Component: OpenInChat },
   { name: 'Loader', Component: Loader },
   { name: 'Sources', Component: Sources },
+  { name: 'Plan', Component: Plan },
 ]
 </script>