{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "core-ring-roll",
"type": "registry:ui",
"title": "Ring Roll",
"description": "A progression on the seven lanes of a ring, one per ring position from the cut: each chord a run of cells, filled for the ring's notes, ticked where a note is bent, dashed across a gap and hollow for a foreign chord. Common tones between neighbours are bridged into connected bands, the hinge lane is tinted, runs that straddle the cut are split with tie marks and a re-cut phrase gets its own lane labels. One column per chord or width by beats; columns are clickable.",
"dependencies": [
"maruaudio@>=0.0.3 <0.1.0"
],
"registryDependencies": [],
"files": [
{
"path": "components/ui/ring-roll.tsx",
"content": "/**\n * Source: https://maru.audio/ui-kit/ring-roll\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/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/**\n * Ring Roll — a progression drawn on the seven lanes of a ring, one per ring\n * position, bottom up from the cut.\n *\n * Two layouts of the same model: `column` (one column per chord, columns\n * touching) and `roll` (width by beats). A chord is a run of cells: filled for\n * the ring's note, ticked and labelled (♭/♯) where a note is bent, dashed where\n * the run has a gap, hollow for a foreign chord (with its ring notation above).\n * A band — a pitch class two neighbours share on the same lane — bridges the\n * gap between their cells, so common tones read as connected rectangles. The\n * hinge lane is tinted; a run that straddles the cut is drawn in two pieces\n * with a tie mark at each edge; a re-cut phrase gets its own lane labels after\n * a dashed boundary.\n *\n * View-only and structural: `roll` is a `RingRollModel` (see\n * `ring-geometry.ts`) whose labels, icons and notation are already chosen. A\n * theory library's roll object can be passed directly when its fields match.\n * Pure SVG from props; columns are keyboard-focusable buttons.\n */\n\nimport type { KeyboardEvent } from \"react\"\nimport {\n RING_ROLL,\n ringRollCellStyle,\n ringRollLaneY,\n ringRollPlacement,\n ringRound,\n type RingRollLayout,\n type RingRollModel,\n} from \"maruaudio/ui/shared/ring-geometry\"\n\nexport interface RingRollProps {\n readonly roll: RingRollModel\n readonly layout: RingRollLayout\n /** Column index drawn highlighted, or null. */\n readonly active: number | null\n readonly onPick: (index: number) => void\n /** Fill behind a re-cut phrase's lane labels; defaults to the page background. */\n readonly ground?: string\n}\n\nexport function RingRoll({ roll, layout, active, onPick, ground = \"var(--background, #fff)\" }: RingRollProps) {\n const { lane: LANE, gutter: GUTTER, top: TOP, gap: GAP, lanes: LANES } = RING_ROLL\n const r6 = ringRound\n const { placed, boundaries, width, height } = ringRollPlacement(roll, layout)\n const yOf = ringRollLaneY\n const home = roll.phrases[0]\n const pick = (i: number) => (e: KeyboardEvent) => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); onPick(i) } }\n const bottom = TOP + LANES * LANE\n\n const labels = (phraseIndex: number, x0: number) => roll.phrases[phraseIndex]!.labels.map((l) => (\n \n {l.hinge ? \"◆ \" : \"\"}{l.label}\n \n ))\n\n return (\n \n )\n}\n",
"type": "registry:component",
"target": "@ui/ring-roll.tsx"
}
]
}