Plan

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { CardHeader } from '@repo/shadcn-vue/components/ui/card'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <CardHeader
    :class="cn('flex flex-row items-start justify-between', props.class)"
    data-slot="plan-header"
  >
    <slot />
  </CardHeader>
</template>

<script setup lang="ts">
import { CardTitle } from '@repo/shadcn-vue/components/ui/card'
import { Shimmer } from '../shimmer'
import { usePlan } from './context'

const { isStreaming } = usePlan()
</script>

<template>
  <CardTitle data-slot="plan-title" v-bind="$attrs">
    <Shimmer v-if="isStreaming">
      <slot />
    </Shimmer>
    <slot v-else />
  </CardTitle>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { CardDescription } from '@repo/shadcn-vue/components/ui/card'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { Shimmer } from '../shimmer'
import { usePlan } from './context'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const { isStreaming } = usePlan()
</script>

<template>
  <CardDescription
    :class="cn('text-balance', props.class)"
    data-slot="plan-description"
  >
    <Shimmer v-if="isStreaming">
      <slot />
    </Shimmer>
    <slot v-else />
  </CardDescription>
</template>

<script setup lang="ts">
import { CardAction } from '@repo/shadcn-vue/components/ui/card'
</script>

<template>
  <CardAction data-slot="plan-action">
    <slot />
  </CardAction>
</template>

<script setup lang="ts">
import { CardContent } from '@repo/shadcn-vue/components/ui/card'
import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
</script>

<template>
  <CollapsibleContent as-child>
    <CardContent data-slot="plan-content">
      <slot />
    </CardContent>
  </CollapsibleContent>
</template>

<script setup lang="ts">
import { CardFooter } from '@repo/shadcn-vue/components/ui/card'
</script>

<template>
  <CardFooter data-slot="plan-footer">
    <slot />
  </CardFooter>
</template>

<script setup lang="ts">
import { Button } from '@repo/shadcn-vue/components/ui/button'
import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { ChevronsUpDownIcon } from 'lucide-vue-next'

const props = defineProps<{
  class?: string
}>()
</script>

<template>
  <CollapsibleTrigger as-child>
    <Button
      :class="cn('size-8', props.class)"
      data-slot="plan-trigger"
      size="icon"
      variant="ghost"
    >
      <ChevronsUpDownIcon class="size-4" />
      <span class="sr-only">Toggle plan</span>
    </Button>
  </CollapsibleTrigger>
</template>

import type { ComputedRef, InjectionKey } from 'vue'
import { inject, provide } from 'vue'

export interface PlanContextValue {
  isStreaming: ComputedRef<boolean>
}

export const PlanKey: InjectionKey<PlanContextValue> = Symbol('PlanContext')

export function providePlan(value: PlanContextValue) {
  provide(PlanKey, value)
}

export function usePlan() {
  const context = inject(PlanKey)
  if (!context) {
    throw new Error('Plan components must be used within a Plan component')
  }
  return context
}

export { default as Plan } from './Plan.vue'
export { default as PlanAction } from './PlanAction.vue'
export { default as PlanContent } from './PlanContent.vue'
export { default as PlanDescription } from './PlanDescription.vue'
export { default as PlanFooter } from './PlanFooter.vue'
export { default as PlanHeader } from './PlanHeader.vue'
export { default as PlanTitle } from './PlanTitle.vue'
export { default as PlanTrigger } from './PlanTrigger.vue'