{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "word-cloud-chart",
  "title": "Word Cloud Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/charts/word-cloud-chart/WordCloudChart.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nexport interface WordDatum {\n  name: string\n  value: number\n}\n\ninterface Props {\n  data: WordDatum[]\n  height?: number | string\n  /** Optional palette override. Defaults to chart-1..5 tokens. */\n  colors?: string[]\n  class?: HTMLAttributes['class']\n  /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  height: 280,\n  colors: () => ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'],\n})\n\nconst heightStyle = computed(() => (/^\\d+$/.test(String(props.height)) ? `${props.height}px` : String(props.height)))\n\nconst words = computed(() => {\n  if (!props.data.length) return []\n  const vals = props.data.map((d) => d.value)\n  const min = Math.min(...vals)\n  const max = Math.max(...vals)\n  const span = Math.max(1, max - min)\n  return [...props.data]\n    .sort((a, b) => b.value - a.value)\n    .map((d, i) => ({\n      ...d,\n      size: 14 + ((d.value - min) / span) * 30,\n      color: props.colors[i % props.colors.length]!,\n      weight: d.value === max ? 700 : d.value >= min + span * 0.66 ? 600 : 500,\n      opacity: 0.55 + ((d.value - min) / span) * 0.45,\n    }))\n})\n</script>\n\n<template>\n  <div\n    data-slot=\"word-cloud-chart\"\n    role=\"img\"\n    tabindex=\"0\"\n    :aria-label=\"ariaLabel || 'Chart'\"\n    :style=\"{ height: heightStyle }\"\n    :class=\"\n      cn('focus-visible:ring-ring w-full overflow-hidden focus-visible:ring-2 focus-visible:outline-none', props.class)\n    \"\n  >\n    <div class=\"flex h-full w-full flex-wrap items-center justify-center gap-x-4 gap-y-1 p-4\">\n      <span\n        v-for=\"w in words\"\n        :key=\"w.name\"\n        :title=\"`${w.name}: ${w.value}`\"\n        :style=\"{\n          fontSize: `${Math.round(w.size)}px`,\n          color: w.color,\n          fontWeight: w.weight,\n          opacity: w.opacity,\n          lineHeight: 1.15,\n        }\"\n        class=\"cursor-default transition-transform duration-150 hover:scale-110\"\n      >\n        {{ w.name }}\n      </span>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/word-cloud-chart/WordCloudChart.vue"
    },
    {
      "path": "packages/registry-vue/components/charts/word-cloud-chart/index.ts",
      "content": "export { default as WordCloudChart } from './WordCloudChart.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/word-cloud-chart/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Word cloud as dependency-free SVG-friendly markup. Frequency-sized words coloured from the chart palette with hover emphasis. No extra npm packages.",
  "categories": [
    "chart"
  ]
}