@slexn/codecenter-ui 1.0.0

package/public/r/stepper.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "stepper",
+  "title": "Stepper",
+  "description": "A multi-step progress control for onboarding, setup, and wizard flows.",
+  "dependencies": [
+    "@lucide/vue",
+    "@vueuse/core",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/stepper/Stepper.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { StepperRootEmits, StepperRootProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { StepperRoot as StepperPrimitiveRoot, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperPrimitiveRoot\n    v-slot=\"slotProps\"\n    data-slot=\"stepper\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex w-full items-start gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n        props.class,\n      )\n    \"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperPrimitiveRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/Stepper.vue"
+    },
+    {
+      "path": "src/components/ui/stepper/StepperItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { StepperItemProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { StepperItem as StepperPrimitiveItem, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperPrimitiveItem\n    v-slot=\"slotProps\"\n    data-slot=\"stepper-item\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group relative flex min-w-0 flex-1 flex-col items-center text-center data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start data-[orientation=vertical]:text-left',\n        props.class,\n      )\n    \"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperPrimitiveItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/StepperItem.vue"
+    },
+    {
+      "path": "src/components/ui/stepper/StepperTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { StepperTriggerProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { StepperTrigger as StepperPrimitiveTrigger, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperPrimitiveTrigger\n    data-slot=\"stepper-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'focus-visible:border-ring focus-visible:ring-ring/50 relative z-10 inline-flex min-w-0 items-center gap-3 rounded-md text-left outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </StepperPrimitiveTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/StepperTrigger.vue"
+    },
+    {
+      "path": "src/components/ui/stepper/StepperIndicator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { StepperIndicatorProps } from \"reka-ui\"\nimport { computed } from \"vue\"\nimport { Check } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  injectStepperItemContext,\n  StepperIndicator as StepperPrimitiveIndicator,\n  useForwardProps,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes[\"class\"] }>()\n\ndefineSlots<{\n  default?: (props: { state: \"active\" | \"completed\" | \"inactive\"; step: number }) => unknown\n}>()\n\nconst itemContext = injectStepperItemContext()\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\nconst step = computed(() => itemContext.step.value)\nconst state = computed(() => itemContext.state.value)\n</script>\n\n<template>\n  <StepperPrimitiveIndicator\n    data-slot=\"stepper-indicator\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'border-input bg-background text-muted-foreground relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium transition-[background-color,border-color,color,box-shadow] group-data-[state=active]:border-primary group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground group-data-[state=completed]:border-primary group-data-[state=completed]:bg-primary group-data-[state=completed]:text-primary-foreground group-data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <slot\n      :state=\"state\"\n      :step=\"step\"\n    >\n      <Check\n        v-if=\"state === 'completed'\"\n        aria-hidden=\"true\"\n        class=\"size-4\"\n      />\n      <span v-else>{{ step }}</span>\n    </slot>\n  </StepperPrimitiveIndicator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/StepperIndicator.vue"
+    },
+    {
+      "path": "src/components/ui/stepper/StepperTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { StepperTitleProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { StepperTitle as StepperPrimitiveTitle, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperPrimitiveTitle\n    data-slot=\"stepper-title\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none text-foreground transition-colors group-data-[state=inactive]:text-muted-foreground group-data-[disabled]:text-muted-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </StepperPrimitiveTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/StepperTitle.vue"
+    },
+    {
+      "path": "src/components/ui/stepper/StepperDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { StepperDescriptionProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  StepperDescription as StepperPrimitiveDescription,\n  useForwardProps,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperPrimitiveDescription\n    data-slot=\"stepper-description\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-xs leading-relaxed text-muted-foreground transition-colors group-data-[state=active]:text-foreground group-data-[disabled]:text-muted-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </StepperPrimitiveDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/StepperDescription.vue"
+    },
+    {
+      "path": "src/components/ui/stepper/StepperSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { StepperSeparatorProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { StepperSeparator as StepperPrimitiveSeparator, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperPrimitiveSeparator\n    data-slot=\"stepper-separator\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'bg-muted pointer-events-none z-0 transition-colors data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:flex-1 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:self-stretch group-data-[state=completed]:bg-primary',\n        props.class,\n      )\n    \"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/StepperSeparator.vue"
+    },
+    {
+      "path": "src/components/ui/stepper/index.ts",
+      "content": "export { default as Stepper } from \"./Stepper.vue\"\nexport { default as StepperDescription } from \"./StepperDescription.vue\"\nexport { default as StepperIndicator } from \"./StepperIndicator.vue\"\nexport { default as StepperItem } from \"./StepperItem.vue\"\nexport { default as StepperSeparator } from \"./StepperSeparator.vue\"\nexport { default as StepperTitle } from \"./StepperTitle.vue\"\nexport { default as StepperTrigger } from \"./StepperTrigger.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/stepper/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/switch.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "switch",
+  "title": "Switch",
+  "description": "A toggle control for checked, unchecked, disabled, and invalid states.",
+  "dependencies": [
+    "@vueuse/core",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/switch/Switch.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { SwitchRootEmits, SwitchRootProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SwitchRoot, SwitchThumb, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<\n  SwitchRootProps & {\n    class?: HTMLAttributes[\"class\"]\n    thumbClass?: HTMLAttributes[\"class\"]\n  }\n>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"thumbClass\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    data-slot=\"switch\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-[background-color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <SwitchThumb\n      data-slot=\"switch-thumb\"\n      :class=\"\n        cn(\n          'bg-background pointer-events-none block size-4 rounded-full shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n          props.thumbClass,\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/switch/Switch.vue"
+    },
+    {
+      "path": "src/components/ui/switch/index.ts",
+      "content": "export { default as Switch } from \"./Switch.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/switch/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/table.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "table",
+  "title": "Table",
+  "description": "Composable table primitives for structured data, captions, footers, empty states, and horizontal overflow.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/table/Table.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  containerClass?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"table-container\"\n    :class=\"cn('relative w-full min-w-0 overflow-auto', props.containerClass)\"\n  >\n    <table\n      data-slot=\"table\"\n      :class=\"cn('w-full caption-bottom text-sm', props.class)\"\n    >\n      <slot />\n    </table>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/Table.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <thead\n    data-slot=\"table-header\"\n    :class=\"cn('[&_tr]:border-b', props.class)\"\n  >\n    <slot />\n  </thead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableHeader.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableBody.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <tbody\n    data-slot=\"table-body\"\n    :class=\"cn('[&_tr:last-child]:border-0', props.class)\"\n  >\n    <slot />\n  </tbody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableBody.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <tfoot\n    data-slot=\"table-footer\"\n    :class=\"cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)\"\n  >\n    <slot />\n  </tfoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableFooter.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableRow.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <tr\n    data-slot=\"table-row\"\n    :class=\"\n      cn(\n        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </tr>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableRow.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableHead.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <th\n    data-slot=\"table-head\"\n    :class=\"\n      cn(\n        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </th>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableHead.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableCell.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  colspan?: number | string\n}>()\n</script>\n\n<template>\n  <td\n    data-slot=\"table-cell\"\n    :colspan=\"props.colspan\"\n    :class=\"\n      cn(\n        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableCell.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableCaption.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <caption\n    data-slot=\"table-caption\"\n    :class=\"cn('text-muted-foreground mt-4 text-sm', props.class)\"\n  >\n    <slot />\n  </caption>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableCaption.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport TableCell from \"./TableCell.vue\"\nimport TableRow from \"./TableRow.vue\"\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  colspan?: number | string\n}>(), {\n  colspan: 1,\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :colspan=\"props.colspan\"\n      :class=\"\n        cn(\n          'p-4 text-sm text-foreground',\n          props.class,\n        )\n      \"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableEmpty.vue"
+    },
+    {
+      "path": "src/components/ui/table/index.ts",
+      "content": "export { default as Table } from \"./Table.vue\"\nexport { default as TableBody } from \"./TableBody.vue\"\nexport { default as TableCaption } from \"./TableCaption.vue\"\nexport { default as TableCell } from \"./TableCell.vue\"\nexport { default as TableEmpty } from \"./TableEmpty.vue\"\nexport { default as TableFooter } from \"./TableFooter.vue\"\nexport { default as TableHead } from \"./TableHead.vue\"\nexport { default as TableHeader } from \"./TableHeader.vue\"\nexport { default as TableRow } from \"./TableRow.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/tabs.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "tabs",
+  "title": "Tabs",
+  "description": "A layered content control that displays one panel at a time.",
+  "dependencies": [
+    "@vueuse/core",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/tabs/Tabs.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { TabsRootEmits, TabsRootProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { TabsRoot as TabsPrimitiveRoot, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<TabsRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TabsPrimitiveRoot\n    v-slot=\"slotProps\"\n    data-slot=\"tabs\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex flex-col', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </TabsPrimitiveRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tabs/Tabs.vue"
+    },
+    {
+      "path": "src/components/ui/tabs/TabsList.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { TabsListProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { TabsList as TabsPrimitiveList, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsPrimitiveList\n    data-slot=\"tabs-list\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'border-border text-muted-foreground inline-flex h-10 w-full max-w-full items-center justify-start gap-5 overflow-x-auto border-b',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsPrimitiveList>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tabs/TabsList.vue"
+    },
+    {
+      "path": "src/components/ui/tabs/TabsTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { TabsTriggerProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { TabsTrigger as TabsPrimitiveTrigger, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsPrimitiveTrigger\n    data-slot=\"tabs-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'focus-visible:border-ring focus-visible:ring-ring/50 data-[state=active]:border-foreground data-[state=active]:text-foreground relative -mb-px inline-flex h-10 flex-none items-center justify-center gap-1.5 border-b-2 border-transparent px-0 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-[border-color,color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsPrimitiveTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tabs/TabsTrigger.vue"
+    },
+    {
+      "path": "src/components/ui/tabs/TabsContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { TabsContentProps } from \"reka-ui\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { TabsContent as TabsPrimitiveContent, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsPrimitiveContent\n    data-slot=\"tabs-content\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex-1 outline-none', props.class)\"\n  >\n    <slot />\n  </TabsPrimitiveContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tabs/TabsContent.vue"
+    },
+    {
+      "path": "src/components/ui/tabs/index.ts",
+      "content": "export { default as Tabs } from \"./Tabs.vue\"\nexport { default as TabsContent } from \"./TabsContent.vue\"\nexport { default as TabsList } from \"./TabsList.vue\"\nexport { default as TabsTrigger } from \"./TabsTrigger.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/tabs/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/tag.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "tag",
+  "title": "Tag",
+  "description": "A compact label for status, metadata, filters, and removable tokens.",
+  "dependencies": [
+    "@lucide/vue",
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/tag/Tag.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Component, HTMLAttributes } from \"vue\"\nimport { XIcon } from \"@lucide/vue\"\nimport { cn } from \"@/lib/utils\"\nimport { tagVariants, type TagVariants } from \"./variants\"\n\ninterface TagProps {\n  class?: HTMLAttributes[\"class\"]\n  icon?: Component\n  iconClass?: HTMLAttributes[\"class\"]\n  labelClass?: HTMLAttributes[\"class\"]\n  removable?: boolean\n  removeLabel?: string\n  size?: TagVariants[\"size\"]\n  variant?: TagVariants[\"variant\"]\n}\n\nconst props = withDefaults(defineProps<TagProps>(), {\n  removeLabel: \"Remove tag\",\n})\n\nconst emit = defineEmits<{\n  (event: \"remove\"): void\n}>()\n</script>\n\n<template>\n  <span\n    data-slot=\"tag\"\n    :class=\"cn(tagVariants({ size: props.size, variant: props.variant }), props.class)\"\n  >\n    <component\n      :is=\"props.icon\"\n      v-if=\"props.icon\"\n      data-slot=\"tag-icon\"\n      aria-hidden=\"true\"\n      :class=\"props.iconClass\"\n    />\n\n    <span data-slot=\"tag-label\" :class=\"cn('min-w-0 truncate', props.labelClass)\">\n      <slot />\n    </span>\n\n    <button\n      v-if=\"props.removable\"\n      data-slot=\"tag-remove\"\n      type=\"button\"\n      :aria-label=\"props.removeLabel\"\n      class=\"-mr-1 inline-flex shrink-0 items-center justify-center rounded-full p-0.5 text-current opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50\"\n      @click.stop=\"emit('remove')\"\n    >\n      <XIcon data-slot=\"tag-remove-icon\" aria-hidden=\"true\" />\n    </button>\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tag/Tag.vue"
+    },
+    {
+      "path": "src/components/ui/tag/variants.ts",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const tagVariants = cva(\n  \"inline-flex max-w-full shrink-0 items-center gap-1 rounded-full border font-medium whitespace-nowrap outline-none transition-[background-color,border-color,color,box-shadow] focus-within:ring-[3px] focus-within:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground focus-within:ring-destructive/30\",\n        muted: \"border-transparent bg-muted text-muted-foreground\",\n        outline: \"border-border bg-background text-foreground\",\n        secondary: \"border-transparent bg-secondary text-secondary-foreground\",\n      },\n      size: {\n        default:\n          \"h-7 px-2.5 text-xs [&_[data-slot=tag-icon]]:size-3.5 [&_[data-slot=tag-remove-icon]]:size-3.5\",\n        lg: \"h-8 px-3 text-sm [&_[data-slot=tag-icon]]:size-4 [&_[data-slot=tag-remove-icon]]:size-4\",\n        sm: \"h-6 px-2 text-xs [&_[data-slot=tag-icon]]:size-3 [&_[data-slot=tag-remove-icon]]:size-3\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n  },\n)\n\nexport type TagVariants = VariantProps<typeof tagVariants>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tag/variants.ts"
+    },
+    {
+      "path": "src/components/ui/tag/index.ts",
+      "content": "export { default as Tag } from \"./Tag.vue\"\nexport { tagVariants, type TagVariants } from \"./variants\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/tag/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/textarea.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "textarea",
+  "title": "Textarea",
+  "description": "A textarea control with plain, field, field group, disabled, resize, validation, and icon states.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/textarea/Textarea.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, useAttrs, useId } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport TextareaControl from \"./TextareaControl.vue\"\nimport type { TextareaModelValue, TextareaProps } from \"./types\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n  iconPosition: \"start\",\n  resize: \"vertical\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: TextareaModelValue]\n  input: [event: Event]\n  change: [event: Event]\n}>()\n\nconst attrs = useAttrs()\nconst generatedId = useId()\n\nconst controlId = computed(() => props.id ?? generatedId)\nconst hasMessage = computed(() => Boolean(props.message || props.error))\nconst hasError = computed(() => Boolean(props.error))\nconst shouldRenderField = computed(() =>\n  Boolean(\n    props.field\n      || props.fieldGroup\n      || props.label\n      || props.description\n      || hasMessage.value,\n  ),\n)\nconst descriptionId = computed(() =>\n  props.description ? `${controlId.value}-description` : undefined,\n)\nconst messageId = computed(() =>\n  hasMessage.value ? `${controlId.value}-message` : undefined,\n)\nconst describedBy = computed(() => {\n  const value = [\n    attrs[\"aria-describedby\"],\n    descriptionId.value,\n    messageId.value,\n  ].filter(Boolean).join(\" \")\n\n  return value || undefined\n})\nconst resolvedMessage = computed(() =>\n  typeof props.error === \"string\" ? props.error : props.message,\n)\n\nfunction handleUpdate(value: TextareaModelValue) {\n  emit(\"update:modelValue\", value)\n}\n</script>\n\n<template>\n  <TextareaControl\n    v-if=\"!shouldRenderField\"\n    v-bind=\"attrs\"\n    :id=\"controlId\"\n    :class=\"props.class\"\n    :default-value=\"props.defaultValue\"\n    :disabled=\"props.disabled\"\n    :icon=\"props.icon\"\n    :icon-class=\"props.iconClass\"\n    :icon-position=\"props.iconPosition\"\n    :invalid=\"props.invalid || hasError\"\n    :model-value=\"props.modelValue\"\n    :placeholder=\"props.placeholder\"\n    :readonly=\"props.readonly\"\n    :resize=\"props.resize\"\n    :textarea-class=\"props.textareaClass\"\n    @change=\"emit('change', $event)\"\n    @input=\"emit('input', $event)\"\n    @update:model-value=\"handleUpdate\"\n  />\n\n  <div\n    v-else\n    :data-slot=\"props.fieldGroup ? 'textarea-field-group' : 'textarea-field'\"\n    :class=\"\n      cn(\n        props.fieldGroup ? 'grid gap-4' : 'grid gap-2',\n        props.groupClass,\n      )\n    \"\n  >\n    <div\n      data-slot=\"textarea-field\"\n      :data-disabled=\"props.disabled ? '' : undefined\"\n      :data-invalid=\"hasError ? '' : undefined\"\n      :class=\"cn('grid gap-2', props.fieldClass)\"\n    >\n      <label\n        v-if=\"props.label\"\n        data-slot=\"textarea-label\"\n        :for=\"controlId\"\n        :class=\"\n          cn(\n            'text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-[disabled=true]:opacity-50',\n            props.labelClass,\n          )\n        \"\n      >\n        {{ props.label }}\n      </label>\n\n      <TextareaControl\n        v-bind=\"attrs\"\n        :id=\"controlId\"\n        :aria-describedby=\"describedBy\"\n        :class=\"props.class\"\n        :default-value=\"props.defaultValue\"\n        :disabled=\"props.disabled\"\n        :icon=\"props.icon\"\n        :icon-class=\"props.iconClass\"\n        :icon-position=\"props.iconPosition\"\n        :invalid=\"props.invalid || hasError\"\n        :model-value=\"props.modelValue\"\n        :placeholder=\"props.placeholder\"\n        :readonly=\"props.readonly\"\n        :resize=\"props.resize\"\n        :textarea-class=\"props.textareaClass\"\n        @change=\"emit('change', $event)\"\n        @input=\"emit('input', $event)\"\n        @update:model-value=\"handleUpdate\"\n      />\n\n      <p\n        v-if=\"props.description\"\n        :id=\"descriptionId\"\n        data-slot=\"textarea-description\"\n        :class=\"cn('text-xs leading-relaxed text-muted-foreground', props.descriptionClass)\"\n      >\n        {{ props.description }}\n      </p>\n\n      <p\n        v-if=\"resolvedMessage\"\n        :id=\"messageId\"\n        data-slot=\"textarea-message\"\n        :class=\"\n          cn(\n            'text-xs font-medium leading-relaxed',\n            hasError ? 'text-destructive' : 'text-muted-foreground',\n            props.messageClass,\n          )\n        \"\n      >\n        {{ resolvedMessage }}\n      </p>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/textarea/Textarea.vue"
+    },
+    {
+      "path": "src/components/ui/textarea/TextareaControl.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport type { TextareaControlProps, TextareaModelValue } from \"./types\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TextareaControlProps>(), {\n  iconPosition: \"start\",\n  resize: \"vertical\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: TextareaModelValue]\n  input: [event: Event]\n  change: [event: Event]\n}>()\n\nconst attrs = useAttrs()\n\nconst hasIcon = computed(() => Boolean(props.icon))\nconst textareaValue = computed(() => props.modelValue ?? props.defaultValue ?? \"\")\nconst controlAttrs = computed(() => ({\n  ...attrs,\n  value: textareaValue.value,\n}))\nconst resizeClass = computed(() => {\n  if (props.resize === \"none\") return \"resize-none\"\n  if (props.resize === \"horizontal\") return \"resize-x\"\n  if (props.resize === \"both\") return \"resize\"\n\n  return \"resize-y\"\n})\n\nconst textareaClasses = computed(() =>\n  cn(\n    \"border-input bg-background text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-h-20 w-full min-w-0 rounded-md border px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20\",\n    resizeClass.value,\n    hasIcon.value\n      && \"min-h-16 border-0 bg-transparent px-0 py-0 shadow-none focus-visible:border-transparent focus-visible:ring-0\",\n    props.textareaClass,\n    !hasIcon.value && props.class,\n  ),\n)\n\nconst wrapperClasses = computed(() =>\n  cn(\n    \"border-input bg-background text-foreground focus-within:border-ring focus-within:ring-ring/50 flex min-h-20 w-full min-w-0 items-start gap-2 rounded-md border px-3 py-2 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20\",\n    props.class,\n  ),\n)\n\nfunction getTextareaModelValue(target: HTMLTextAreaElement) {\n  return target.value\n}\n\nfunction handleInput(event: Event) {\n  const target = event.target as HTMLTextAreaElement\n\n  emit(\"update:modelValue\", getTextareaModelValue(target))\n  emit(\"input\", event)\n}\n\nfunction handleChange(event: Event) {\n  emit(\"change\", event)\n}\n</script>\n\n<template>\n  <div\n    v-if=\"hasIcon\"\n    data-slot=\"textarea-wrapper\"\n    :class=\"wrapperClasses\"\n  >\n    <component\n      :is=\"props.icon\"\n      v-if=\"props.iconPosition === 'start'\"\n      aria-hidden=\"true\"\n      data-slot=\"textarea-icon\"\n      :class=\"cn('mt-0.5 size-4 shrink-0 text-muted-foreground', props.iconClass)\"\n    />\n\n    <textarea\n      v-bind=\"controlAttrs\"\n      :id=\"props.id\"\n      data-slot=\"textarea\"\n      :aria-invalid=\"props.invalid ? true : undefined\"\n      :class=\"textareaClasses\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder\"\n      :readonly=\"props.readonly\"\n      @change=\"handleChange\"\n      @input=\"handleInput\"\n    />\n\n    <component\n      :is=\"props.icon\"\n      v-if=\"props.iconPosition === 'end'\"\n      aria-hidden=\"true\"\n      data-slot=\"textarea-icon\"\n      :class=\"cn('mt-0.5 size-4 shrink-0 text-muted-foreground', props.iconClass)\"\n    />\n  </div>\n\n  <textarea\n    v-else\n    v-bind=\"controlAttrs\"\n    :id=\"props.id\"\n    data-slot=\"textarea\"\n    :aria-invalid=\"props.invalid ? true : undefined\"\n    :class=\"textareaClasses\"\n    :disabled=\"props.disabled\"\n    :placeholder=\"props.placeholder\"\n    :readonly=\"props.readonly\"\n    @change=\"handleChange\"\n    @input=\"handleInput\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/textarea/TextareaControl.vue"
+    },
+    {
+      "path": "src/components/ui/textarea/TextareaFieldGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div data-slot=\"textarea-field-group\" :class=\"cn('grid gap-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/textarea/TextareaFieldGroup.vue"
+    },
+    {
+      "path": "src/components/ui/textarea/types.ts",
+      "content": "import type { Component, HTMLAttributes } from \"vue\"\n\nexport type TextareaModelValue = string | number\nexport type TextareaIconPosition = \"start\" | \"end\"\nexport type TextareaResize = \"none\" | \"vertical\" | \"horizontal\" | \"both\"\n\nexport interface TextareaControlProps {\n  class?: HTMLAttributes[\"class\"]\n  defaultValue?: TextareaModelValue\n  disabled?: boolean\n  icon?: Component\n  iconClass?: HTMLAttributes[\"class\"]\n  iconPosition?: TextareaIconPosition\n  id?: string\n  invalid?: boolean\n  modelValue?: TextareaModelValue\n  placeholder?: string\n  readonly?: boolean\n  resize?: TextareaResize\n  textareaClass?: HTMLAttributes[\"class\"]\n}\n\nexport interface TextareaProps extends TextareaControlProps {\n  description?: string\n  descriptionClass?: HTMLAttributes[\"class\"]\n  error?: string | boolean\n  field?: boolean\n  fieldClass?: HTMLAttributes[\"class\"]\n  fieldGroup?: boolean\n  groupClass?: HTMLAttributes[\"class\"]\n  label?: string\n  labelClass?: HTMLAttributes[\"class\"]\n  message?: string\n  messageClass?: HTMLAttributes[\"class\"]\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/textarea/types.ts"
+    },
+    {
+      "path": "src/components/ui/textarea/index.ts",
+      "content": "export { default as Textarea } from \"./Textarea.vue\"\nexport { default as TextareaControl } from \"./TextareaControl.vue\"\nexport { default as TextareaFieldGroup } from \"./TextareaFieldGroup.vue\"\nexport type {\n  TextareaControlProps,\n  TextareaIconPosition,\n  TextareaModelValue,\n  TextareaProps,\n  TextareaResize,\n} from \"./types\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/textarea/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/tool.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "tool",
+  "title": "Tool",
+  "description": "A collapsible tool execution card with status badge and parameters panel.",
+  "dependencies": [
+    "@lucide/vue",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/tool/Tool.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\"\nimport type { HTMLAttributes } from \"vue\"\nimport {\n  ChevronDownIcon,\n  CircleCheckIcon,\n  CircleXIcon,\n  ClockIcon,\n  LoaderCircleIcon,\n  WrenchIcon,\n} from \"@lucide/vue\"\nimport { createCodeLines } from \"@/lib/code-highlight\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ToolSize = \"sm\" | \"default\" | \"lg\"\nexport type ToolStatus =\n  | \"pending\"\n  | \"awaiting-approval\"\n  | \"responded\"\n  | \"running\"\n  | \"completed\"\n  | \"error\"\n  | \"denied\"\n\nexport type ToolParameters =\n  | string\n  | number\n  | boolean\n  | Record<string, unknown>\n  | unknown[]\n  | null\n\nexport interface ToolTogglePayload {\n  open: boolean\n}\n\ninterface ToolProps {\n  class?: HTMLAttributes[\"class\"]\n  collapsible?: boolean\n  defaultOpen?: boolean\n  highlight?: boolean\n  name?: string\n  open?: boolean\n  parameters?: ToolParameters\n  parametersLabel?: string\n  parametersLanguage?: string\n  showParameters?: boolean\n  showToggle?: boolean\n  size?: ToolSize\n  status?: ToolStatus\n  statusLabel?: string\n}\n\nconst props = withDefaults(defineProps<ToolProps>(), {\n  collapsible: true,\n  defaultOpen: true,\n  highlight: true,\n  name: \"tool\",\n  parametersLabel: \"Parameters\",\n  parametersLanguage: \"json\",\n  showParameters: true,\n  showToggle: true,\n  size: \"default\",\n  status: \"pending\",\n})\n\nconst emit = defineEmits<{\n  \"toggle\": [payload: ToolTogglePayload]\n  \"update:open\": [value: boolean]\n}>()\n\nconst localOpen = ref(props.defaultOpen)\nconst isOpen = computed(() => {\n  if (!props.collapsible) return true\n\n  return props.open ?? localOpen.value\n})\nconst statusLabel = computed(() => props.statusLabel ?? defaultStatusLabel(props.status))\nconst statusIcon = computed(() => {\n  if (props.status === \"pending\") return LoaderCircleIcon\n  if (props.status === \"awaiting-approval\") return ClockIcon\n  if (props.status === \"responded\") return CircleCheckIcon\n  if (props.status === \"running\") return ClockIcon\n  if (props.status === \"completed\") return CircleCheckIcon\n\n  return CircleXIcon\n})\nconst parameterText = computed(() => formatParameters(props.parameters))\nconst parameterLines = computed(() => createCodeLines(\n  parameterText.value,\n  props.parametersLanguage,\n  props.highlight,\n))\nconst sizeClasses = computed(() => {\n  if (props.size === \"sm\") {\n    return {\n      badge: \"h-5 gap-1.5 px-2 text-xs\",\n      badgeIcon: \"size-3\",\n      content: \"px-3 pb-3 pt-2.5\",\n      header: \"gap-2.5 px-3 py-2.5\",\n      icon: \"size-3.5\",\n      innerGap: \"gap-2.5\",\n      label: \"text-xs\",\n      name: \"text-xs\",\n      panel: \"mt-2 min-h-12 rounded-lg px-3 py-2 text-xs leading-5\",\n      toggleButton: \"size-7\",\n      toggleIcon: \"size-3.5\",\n    }\n  }\n\n  if (props.size === \"lg\") {\n    return {\n      badge: \"h-7 gap-2 px-3 text-sm\",\n      badgeIcon: \"size-4\",\n      content: \"px-5 pb-5 pt-4\",\n      header: \"gap-3 px-5 py-4\",\n      icon: \"size-5\",\n      innerGap: \"gap-3\",\n      label: \"text-xs\",\n      name: \"text-sm\",\n      panel: \"mt-3 min-h-20 rounded-xl px-4 py-3 text-xs leading-6\",\n      toggleButton: \"size-9\",\n      toggleIcon: \"size-4\",\n    }\n  }\n\n  return {\n    badge: \"h-6 gap-1.5 px-2.5 text-xs\",\n    badgeIcon: \"size-3.5\",\n    content: \"px-4 pb-4 pt-3\",\n    header: \"gap-2.5 px-4 py-3\",\n    icon: \"size-4\",\n    innerGap: \"gap-2.5\",\n    label: \"text-xs\",\n    name: \"text-[13px]\",\n    panel: \"mt-3 min-h-16 rounded-xl px-4 py-3 text-xs leading-6\",\n    toggleButton: \"size-8\",\n    toggleIcon: \"size-4\",\n  }\n})\n\nfunction defaultStatusLabel(status: ToolStatus) {\n  if (status === \"awaiting-approval\") return \"Awaiting Approval\"\n  if (status === \"responded\") return \"Responded\"\n  if (status === \"running\") return \"Running\"\n  if (status === \"completed\") return \"Completed\"\n  if (status === \"error\") return \"Error\"\n  if (status === \"denied\") return \"Denied\"\n\n  return \"Pending\"\n}\n\nfunction statusClass(status: ToolStatus) {\n  if (status === \"pending\") return \"text-foreground\"\n  if (status === \"awaiting-approval\") return \"text-amber-600\"\n  if (status === \"responded\") return \"text-blue-600\"\n  if (status === \"completed\") return \"text-emerald-600\"\n  if (status === \"error\") return \"text-destructive\"\n  if (status === \"denied\") return \"text-orange-600\"\n\n  return \"text-muted-foreground\"\n}\n\nfunction formatParameters(value?: ToolParameters) {\n  if (value === undefined || value === null) return \"{}\"\n  if (typeof value === \"string\") return value\n\n  try {\n    return JSON.stringify(value, null, 2)\n  } catch {\n    return String(value)\n  }\n}\n\nfunction setOpen(nextOpen: boolean) {\n  if (!props.collapsible) return\n\n  const previousOpen = isOpen.value\n\n  if (props.open === undefined) {\n    localOpen.value = nextOpen\n  }\n\n  emit(\"update:open\", nextOpen)\n\n  if (previousOpen !== nextOpen) {\n    emit(\"toggle\", { open: nextOpen })\n  }\n}\n\nfunction toggleOpen() {\n  setOpen(!isOpen.value)\n}\n</script>\n\n<template>\n  <article\n    data-slot=\"tool\"\n    :data-open=\"isOpen\"\n    :data-size=\"props.size\"\n    :data-status=\"props.status\"\n    :class=\"cn('overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs', props.class)\"\n  >\n    <header\n      data-slot=\"tool-header\"\n      :class=\"cn('flex items-center transition-colors', sizeClasses.header)\"\n    >\n      <component\n        :is=\"props.collapsible ? 'button' : 'div'\"\n        data-slot=\"tool-toggle\"\n        :type=\"props.collapsible ? 'button' : undefined\"\n        :aria-expanded=\"props.collapsible ? isOpen : undefined\"\n        :class=\"cn('flex min-w-0 flex-1 items-center text-left outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50', sizeClasses.innerGap)\"\n        @click=\"toggleOpen\"\n      >\n        <WrenchIcon\n          data-slot=\"tool-icon\"\n          aria-hidden=\"true\"\n          :class=\"cn('shrink-0 text-muted-foreground', sizeClasses.icon)\"\n        />\n\n        <span\n          data-slot=\"tool-name\"\n          :class=\"cn('min-w-0 truncate font-semibold leading-tight tracking-normal', sizeClasses.name)\"\n        >\n          {{ props.name }}\n        </span>\n\n        <span\n          data-slot=\"tool-status\"\n          :class=\"cn('inline-flex shrink-0 items-center rounded-full bg-muted font-medium leading-none text-foreground', sizeClasses.badge)\"\n        >\n          <component\n            :is=\"statusIcon\"\n            data-slot=\"tool-status-icon\"\n            aria-hidden=\"true\"\n            :class=\"cn(sizeClasses.badgeIcon, statusClass(props.status), props.status === 'pending' && 'animate-spin')\"\n          />\n          <span>{{ statusLabel }}</span>\n        </span>\n      </component>\n\n      <button\n        v-if=\"props.collapsible && props.showToggle\"\n        data-slot=\"tool-toggle-icon\"\n        type=\"button\"\n        :aria-label=\"isOpen ? 'Collapse tool' : 'Expand tool'\"\n        :aria-expanded=\"isOpen\"\n        :class=\"\n          cn(\n            'inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',\n            sizeClasses.toggleButton,\n          )\n        \"\n        @click=\"toggleOpen\"\n      >\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          :class=\"cn('transition-transform', sizeClasses.toggleIcon, isOpen && 'rotate-180')\"\n        />\n      </button>\n    </header>\n\n    <section\n      v-if=\"isOpen && props.showParameters\"\n      data-slot=\"tool-content\"\n      :class=\"sizeClasses.content\"\n    >\n      <div\n        data-slot=\"tool-parameters-label\"\n        :class=\"cn('font-semibold uppercase leading-none text-muted-foreground', sizeClasses.label)\"\n      >\n        {{ props.parametersLabel }}\n      </div>\n\n      <pre\n        data-slot=\"tool-parameters\"\n        :class=\"cn('overflow-auto border bg-background font-mono text-foreground whitespace-pre-wrap break-words', sizeClasses.panel)\"\n      ><slot\n        name=\"parameters\"\n        :parameters=\"props.parameters\"\n        :text=\"parameterText\"\n        :lines=\"parameterLines\"\n      ><code\n        data-slot=\"tool-parameters-code\"\n        :data-language=\"props.parametersLanguage\"\n        class=\"block min-w-0 whitespace-pre-wrap break-words\"\n      ><span\n        v-for=\"line in parameterLines\"\n        :key=\"line.number\"\n        data-slot=\"tool-parameters-line\"\n        :data-line=\"line.number\"\n        class=\"block min-h-[1lh]\"\n      ><span\n        v-if=\"line.isEmpty\"\n        aria-hidden=\"true\"\n      >&nbsp;</span><span\n        v-else\n        data-slot=\"tool-parameters-token\"\n        v-html=\"line.html\"\n      /></span></code></slot></pre>\n    </section>\n  </article>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tool/Tool.vue"
+    },
+    {
+      "path": "src/components/ui/tool/index.ts",
+      "content": "export { default as Tool } from \"./Tool.vue\"\nexport type {\n  ToolParameters,\n  ToolSize,\n  ToolStatus,\n  ToolTogglePayload,\n} from \"./Tool.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/tool/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/tooltip.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "tooltip",
+  "title": "Tooltip",
+  "description": "A small contextual overlay for explaining controls and compact UI elements.",
+  "dependencies": [
+    "@vueuse/core",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/tooltip/Tooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipRootEmits, TooltipRootProps } from \"reka-ui\"\nimport { TooltipRoot, useForwardPropsEmits } from \"reka-ui\"\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot\n    v-slot=\"slotProps\"\n    data-slot=\"tooltip\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </TooltipRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/Tooltip.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/TooltipTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipTriggerProps } from \"reka-ui\"\nimport { TooltipTrigger } from \"reka-ui\"\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger\n    data-slot=\"tooltip-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/TooltipTrigger.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/TooltipContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipContentEmits, TooltipContentProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<TooltipContentProps & {\n    arrow?: boolean\n    class?: HTMLAttributes[\"class\"]\n  }>(),\n  {\n    arrow: true,\n    sideOffset: 4,\n  },\n)\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"arrow\", \"class\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent\n      data-slot=\"tooltip-content\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)\"\n    >\n      <slot />\n\n      <TooltipArrow\n        v-if=\"props.arrow\"\n        class=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\"\n      />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/TooltipContent.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/TooltipProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipProviderProps } from \"reka-ui\"\nimport { TooltipProvider } from \"reka-ui\"\n\nconst props = withDefaults(defineProps<TooltipProviderProps>(), {\n  delayDuration: 0,\n})\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/TooltipProvider.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/index.ts",
+      "content": "export { default as Tooltip } from \"./Tooltip.vue\"\nexport { default as TooltipContent } from \"./TooltipContent.vue\"\nexport { default as TooltipProvider } from \"./TooltipProvider.vue\"\nexport { default as TooltipTrigger } from \"./TooltipTrigger.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}