@slexn/codecenter-ui 1.0.0

package/public/r/reasoning.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "reasoning",
+  "title": "Reasoning",
+  "description": "A standalone AI thought surface with a minimal header and collapsible reasoning content.",
+  "dependencies": [
+    "@lucide/vue",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/reasoning/Reasoning.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from \"vue\"\nimport type { Component } from \"vue\"\nimport {\n  BrainIcon,\n  ChevronDownIcon,\n  CircleAlertIcon,\n} from \"@lucide/vue\"\nimport { cn } from \"@/lib/utils\"\nimport type {\n  ReasoningDuration,\n  ReasoningProps,\n  ReasoningStatus,\n  ReasoningStepStatus,\n} from \"./types\"\n\nconst props = withDefaults(defineProps<ReasoningProps>(), {\n  ariaLive: \"polite\",\n  collapsible: true,\n  defaultOpen: true,\n  status: \"complete\",\n  title: \"Thought\",\n})\n\nconst emit = defineEmits<{\n  \"update:open\": [open: boolean]\n}>()\n\nconst slots = defineSlots<{\n  default?: () => unknown\n  footer?: () => unknown\n  summary?: (props: { duration?: ReasoningDuration; status: ReasoningStatus }) => unknown\n}>()\n\nconst contentId = `reasoning-content-${useId()}`\nconst uncontrolledOpen = ref(props.open ?? props.defaultOpen)\n\nwatch(\n  () => props.open,\n  (open) => {\n    if (open !== undefined) {\n      uncontrolledOpen.value = open\n    }\n  },\n)\n\nconst isOpen = computed({\n  get: () => props.open ?? uncontrolledOpen.value,\n  set: (open: boolean) => {\n    uncontrolledOpen.value = open\n    emit(\"update:open\", open)\n  },\n})\n\nconst statusIconByStatus: Record<ReasoningStatus, Component> = {\n  complete: BrainIcon,\n  error: CircleAlertIcon,\n  thinking: BrainIcon,\n}\n\nconst statusLabelByStatus: Record<ReasoningStatus, string> = {\n  complete: \"Thought\",\n  error: \"Reasoning failed\",\n  thinking: \"Thinking\",\n}\n\nconst headerIcon = computed(() => props.icon ?? statusIconByStatus[props.status])\nconst formattedDuration = computed(() => formatDuration(props.duration))\nconst headerText = computed(() =>\n  props.summary ?? (props.status === \"complete\" ? props.title : statusLabelByStatus[props.status]),\n)\nconst visibleSteps = computed(() => props.steps ?? [])\nconst hasBody = computed(() => Boolean(props.content || slots.default))\nconst hasContent = computed(() =>\n  hasBody.value || visibleSteps.value.length > 0 || Boolean(slots.footer),\n)\n\nfunction toggleOpen() {\n  if (!props.collapsible) return\n  isOpen.value = !isOpen.value\n}\n\nfunction formatDuration(duration: ReasoningProps[\"duration\"]) {\n  if (duration === undefined || duration === \"\") return undefined\n\n  if (typeof duration === \"number\") {\n    return formatDurationParts(duration)\n  }\n\n  const parsedDuration = parseDurationString(duration)\n  return parsedDuration === undefined ? duration : formatDurationParts(parsedDuration)\n}\n\nfunction parseDurationString(duration: string) {\n  const value = duration.trim().toLowerCase()\n\n  if (/^\\d+(?:\\.\\d+)?$/.test(value)) {\n    return Number(value)\n  }\n\n  const matches = [\n    ...value.matchAll(\n      /(\\d+(?:\\.\\d+)?)\\s*(hours?|hrs?|h|minutes?|mins?|m(?!s)|seconds?|secs?|s)\\b/g,\n    ),\n  ]\n\n  if (!matches.length) return undefined\n\n  return matches.reduce((totalSeconds, match) => {\n    const amount = Number(match[1])\n    const unit = match[2]\n\n    if (unit.startsWith(\"h\")) return totalSeconds + amount * 3600\n    if (unit.startsWith(\"min\") || unit === \"m\") return totalSeconds + amount * 60\n\n    return totalSeconds + amount\n  }, 0)\n}\n\nfunction formatDurationParts(duration: number) {\n  const totalSeconds = Math.max(0, Math.round(duration))\n  const hours = Math.floor(totalSeconds / 3600)\n  const minutes = Math.floor((totalSeconds % 3600) / 60)\n  const seconds = totalSeconds % 60\n  const parts: string[] = []\n\n  if (hours) parts.push(`${hours}h`)\n  if (minutes) parts.push(`${minutes}m`)\n  if (seconds || !parts.length) parts.push(`${seconds}s`)\n\n  return parts.join(\" \")\n}\n\nfunction getStepMarkerClass(status: ReasoningStepStatus = \"pending\") {\n  return cn(\n    \"mt-2 size-1.5 rounded-full\",\n    status === \"complete\" && \"bg-foreground/60\",\n    status === \"current\" && \"bg-foreground\",\n    status === \"error\" && \"bg-destructive\",\n    status === \"pending\" && \"bg-border\",\n  )\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"reasoning\"\n    :data-status=\"props.status\"\n    :data-open=\"isOpen ? 'true' : 'false'\"\n    :aria-live=\"props.ariaLive\"\n    :class=\"\n      cn(\n        'w-full text-muted-foreground',\n        props.class,\n      )\n    \"\n  >\n    <component\n      :is=\"props.collapsible ? 'button' : 'div'\"\n      data-slot=\"reasoning-header\"\n      :type=\"props.collapsible ? 'button' : undefined\"\n      :aria-controls=\"props.collapsible ? contentId : undefined\"\n      :aria-expanded=\"props.collapsible ? isOpen : undefined\"\n      :class=\"\n        cn(\n          'group inline-flex min-h-8 max-w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm text-muted-foreground',\n          props.collapsible &&\n            'cursor-pointer transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',\n          props.headerClass,\n        )\n      \"\n      @click=\"toggleOpen\"\n    >\n      <component\n        :is=\"headerIcon\"\n        data-slot=\"reasoning-icon\"\n        aria-hidden=\"true\"\n        :class=\"\n          cn(\n            'size-4 shrink-0',\n            props.status === 'error' && 'text-destructive',\n            props.status === 'thinking' && 'animate-pulse',\n            props.iconClass,\n          )\n        \"\n      />\n\n      <span\n        data-slot=\"reasoning-summary\"\n        class=\"flex min-w-0 items-center gap-1.5\"\n      >\n        <span\n          data-slot=\"reasoning-title\"\n          class=\"min-w-0 truncate font-medium leading-6 text-foreground/80\"\n        >\n          <slot\n            name=\"summary\"\n            :duration=\"formattedDuration\"\n            :status=\"props.status\"\n          >\n            {{ headerText }}\n          </slot>\n        </span>\n\n        <span\n          v-if=\"formattedDuration && !$slots.summary\"\n          data-slot=\"reasoning-duration\"\n          class=\"shrink-0 text-xs leading-5 text-muted-foreground\"\n        >\n          {{ formattedDuration }}\n        </span>\n      </span>\n\n      <ChevronDownIcon\n        v-if=\"props.collapsible\"\n        data-slot=\"reasoning-chevron\"\n        aria-hidden=\"true\"\n        :class=\"\n          cn(\n            'size-3.5 shrink-0 transition-transform group-hover:text-foreground',\n            isOpen && 'rotate-180',\n          )\n        \"\n      />\n    </component>\n\n    <div\n      v-show=\"!props.collapsible || isOpen\"\n      v-if=\"hasContent\"\n      :id=\"contentId\"\n      data-slot=\"reasoning-content\"\n      :class=\"cn('mt-3 border-l pl-5', props.contentClass)\"\n    >\n      <div\n        v-if=\"hasBody\"\n        data-slot=\"reasoning-body\"\n        class=\"whitespace-pre-wrap text-sm leading-7 text-muted-foreground\"\n      >\n        <slot>{{ props.content }}</slot>\n      </div>\n\n      <ol\n        v-if=\"visibleSteps.length\"\n        data-slot=\"reasoning-steps\"\n        :class=\"cn('grid gap-4 text-sm leading-7 text-muted-foreground', hasBody && 'mt-5')\"\n      >\n        <li\n          v-for=\"(step, index) in visibleSteps\"\n          :key=\"`${step.title}-${index}`\"\n          data-slot=\"reasoning-step\"\n          :data-status=\"step.status ?? 'pending'\"\n          class=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1\"\n        >\n          <span\n            data-slot=\"reasoning-step-marker\"\n            aria-hidden=\"true\"\n            :class=\"getStepMarkerClass(step.status)\"\n          />\n\n          <span data-slot=\"reasoning-step-title\" class=\"font-medium text-foreground/75\">\n            {{ step.title }}\n          </span>\n          <span\n            v-if=\"step.description\"\n            data-slot=\"reasoning-step-description\"\n            class=\"col-start-2\"\n          >\n            {{ step.description }}\n          </span>\n        </li>\n      </ol>\n\n      <div v-if=\"$slots.footer\" data-slot=\"reasoning-footer\" class=\"mt-4 text-sm\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n  </section>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/reasoning/Reasoning.vue"
+    },
+    {
+      "path": "src/components/ui/reasoning/types.ts",
+      "content": "import type { Component, HTMLAttributes } from \"vue\"\n\nexport type ReasoningStatus = \"complete\" | \"error\" | \"thinking\"\nexport type ReasoningStepStatus = \"complete\" | \"current\" | \"error\" | \"pending\"\nexport type ReasoningDuration = number | string\n\nexport interface ReasoningStep {\n  description?: string\n  status?: ReasoningStepStatus\n  title: string\n}\n\nexport interface ReasoningProps {\n  ariaLive?: \"assertive\" | \"off\" | \"polite\"\n  class?: HTMLAttributes[\"class\"]\n  collapsible?: boolean\n  content?: string\n  contentClass?: HTMLAttributes[\"class\"]\n  defaultOpen?: boolean\n  duration?: ReasoningDuration\n  headerClass?: HTMLAttributes[\"class\"]\n  icon?: Component\n  iconClass?: HTMLAttributes[\"class\"]\n  open?: boolean\n  steps?: ReasoningStep[]\n  status?: ReasoningStatus\n  summary?: string\n  title?: string\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/reasoning/types.ts"
+    },
+    {
+      "path": "src/components/ui/reasoning/index.ts",
+      "content": "export { default as Reasoning } from \"./Reasoning.vue\"\nexport type {\n  ReasoningDuration,\n  ReasoningProps,\n  ReasoningStatus,\n  ReasoningStep,\n  ReasoningStepStatus,\n} from \"./types\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/reasoning/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"
+}