{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "word-cloud-chart",
  "title": "Word Cloud Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/word-cloud-chart/WordCloudChart.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface WordDatum {\n    name: string\n    value: number\n  }\n\n  export interface WordCloudChartProps extends HTMLAttributes<HTMLDivElement> {\n    data: WordDatum[]\n    height?: number | string\n    /** Optional palette override. Defaults to chart-1..5 tokens. */\n    colors?: string[]\n    /** Accessible name announced for the chart image. */\n    ariaLabel?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    data,\n    height = 280,\n    colors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'],\n    class: className,\n    ariaLabel,\n    ...restProps\n  }: WordCloudChartProps = $props()\n\n  const heightStyle = $derived(/^\\d+$/.test(String(height)) ? `${height}px` : String(height))\n\n  const words = $derived.by(() => {\n    if (!data.length) return []\n    const vals = 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 [...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: colors[i % 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<div\n  data-slot=\"word-cloud-chart\"\n  role=\"img\"\n  tabindex=\"0\"\n  aria-label={ariaLabel || 'Chart'}\n  style:height={heightStyle}\n  class={cn('focus-visible:ring-ring w-full overflow-hidden focus-visible:ring-2 focus-visible:outline-none', className)}\n  {...restProps}\n>\n  <div class=\"flex h-full w-full flex-wrap items-center justify-center gap-x-4 gap-y-1 p-4\">\n    {#each words as w (w.name)}\n      <span\n        title={`${w.name}: ${w.value}`}\n        style:font-size={`${Math.round(w.size)}px`}\n        style:color={w.color}\n        style:font-weight={w.weight}\n        style:opacity={w.opacity}\n        style:line-height={1.15}\n        class=\"cursor-default transition-transform duration-150 hover:scale-110\"\n      >\n        {w.name}\n      </span>\n    {/each}\n  </div>\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/word-cloud-chart/WordCloudChart.svelte"
    },
    {
      "path": "packages/registry-svelte/components/word-cloud-chart/index.ts",
      "content": "export { default as WordCloudChart, type WordCloudChartProps, type WordDatum } from './WordCloudChart.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/word-cloud-chart/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Word cloud as dependency-free markup. Frequency-sized words coloured from the chart palette with hover emphasis. No extra npm packages.",
  "categories": [
    "chart"
  ]
}