{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "core-pitch-class-histogram",
  "type": "registry:ui",
  "title": "Pitch Class Histogram",
  "description": "Shared editable pitch, chord character and chord size histograms, with a matching read-only pitch display. Used by Harmonizer and Hand Chord.",
  "dependencies": [
    "@base-ui/react",
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/core-weight-bars.json"
  ],
  "files": [
    {
      "path": "components/ui/pitch-class-histogram.tsx",
      "content": "/**\n * Source: https://maruaudio.com/ui-kit/pitch-class-histogram\n * Copyright © [Maru](https://maruaudio.com)\n *\n * Maru UI Kit — https://maruaudio.com/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\n/** Canonical histogram presentation shared by Harmonizer and Hand Chord. */\nimport {\n  WeightBars,\n  type WeightBarsProps,\n} from \"@/components/ui/weight-bars\"\n\nexport type HistogramEditorProps = WeightBarsProps\nconst formatWeight = (weight: number) => `${Math.round(weight * 100)}% weight`\nexport const PITCH_CLASS_HISTOGRAM_LABELS = [\n  \"C\",\n  \"C♯\",\n  \"D\",\n  \"D♯\",\n  \"E\",\n  \"F\",\n  \"F♯\",\n  \"G\",\n  \"G♯\",\n  \"A\",\n  \"A♯\",\n  \"B\",\n] as const\n\nexport function HistogramEditor(props: HistogramEditorProps) {\n  return (\n    <WeightBars\n      max={1}\n      step={0.01}\n      height={78}\n      gap={6}\n      showValues={false}\n      formatValue={formatWeight}\n      {...props}\n    />\n  )\n}\nexport function PitchClassHistogramEditor(props: HistogramEditorProps) {\n  return (\n    <HistogramEditor\n      largeStep={0.1}\n      gap={5}\n      keyboard\n      labels={PITCH_CLASS_HISTOGRAM_LABELS}\n      color=\"#a99bc5\"\n      aria-label=\"Pitch class histogram\"\n      {...props}\n    />\n  )\n}\nexport function ComplexityHistogramEditor(props: HistogramEditorProps) {\n  return (\n    <HistogramEditor\n      labels={[\"Simple\", \"Color\", \"Tense\"]}\n      color=\"#b3bd9f\"\n      aria-label=\"Complexity histogram\"\n      {...props}\n    />\n  )\n}\nexport interface ChordSizeHistogramEditorProps extends HistogramEditorProps {\n  auto?: boolean\n}\nexport function ChordSizeHistogramEditor({\n  auto = false,\n  ...props\n}: ChordSizeHistogramEditorProps) {\n  return (\n    <HistogramEditor\n      labels={[\"2\", \"3\", \"4\"]}\n      color=\"#c9b48f\"\n      max={auto ? Math.max(...props.values, 0.01) : 1}\n      disabled={auto}\n      aria-label={\n        auto\n          ? `Auto chord size mix: ${props.values.map((w, i) => `${Math.round(w * 100)}% ${i + 2} tones`).join(\", \")}`\n          : \"Chord size mix: two, three and four tones\"\n      }\n      {...props}\n    />\n  )\n}\n/** Uses the same renderer without allowing edits. */\nexport function PitchClassHistogramDisplay(props: HistogramEditorProps) {\n  return (\n    <PitchClassHistogramEditor\n      {...props}\n      onValuesChange={undefined}\n      onValuesCommitted={undefined}\n      disabled\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/pitch-class-histogram.tsx"
    }
  ]
}
