62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T2a4f,/** * Source: https://maru.audio/ui-kit/circle-of-fifths * Copyright © [Maru](https://maru.audio) * * Maru UI Kit — https://maru.audio/ui-kit * * Installed from the Maru UI registry. This file is yours now: edit it * freely, it will not be overwritten unless you re-run the add command. * * Keep this item’s companion files and CSS imports together. Dependencies * declared by the registry are installed with the source. */ /** * Circle of Fifths — a pitch-class histogram plotted on the wheel, with an * optional tonal-centre needle. * * The circle of fifths is the layout that makes tonality visible. Neighbouring * slots are a fifth apart, so the seven notes of any key form one unbroken arc * and a modulation is a short slide round the rim — where a chromatic keyboard * scatters the same information all over the octave. Feed it what the music * actually played and the shape of the key falls out of the geometry. * * Each pitch class becomes a radial bar at its circle-of-fifths angle, its * length proportional to how much that note sounded. The needle, when supplied, * points at the tonal centre: its length and opacity both scale with strength, * so an ambiguous or chromatic passage gets a short faint needle rather than a * confident lie. Compute one with `tonalCenter` from `lib/tonal-center` — this * component deliberately does not, so that a caller with a precomputed centre * (a snapshot, a server analysis, a smoothed running estimate) renders through * the same wheel as one analysing live. * * `weights` is CHROMATIC-indexed — index 0 is C, 11 is B — and PEAK-NORMALISED * internally, so its units are yours: note counts, seconds held, velocity sums. * The component places each into its fifths slot; you never reorder anything. * * Ported from codex-music-mono's `CircleOfFifthsWheel.vue`. The geometry is * carried over exactly — same radius, same inner/outer bar span, same opacity * ramps — so the two render identically. Deliberate deviations: * * - The bar geometry is an exported pure function (`cofBarGeometry`) rather * than a Vue `computed`, so it is testable in Node and reusable by anything * that needs the same layout. * - Colours come from the kit's `token()` rather than `currentColor` plus a * bare `--accent`, so it sits correctly on a dark instrument face and on a * light docs page without the host setting anything up. * - `highlightPcs` is new: a ring-mark on the pitch classes sounding right * now, which is what lets the wheel double as a live chord readout rather * than only a summary of the past. * * SSR-safe: pure SVG computed from props, no measurement, no effects. * * Styling comes from CSS custom properties — see `lib/control-theme/theme.ts`. */ import type { CSSProperties } from "react" import { pitchClassName } from "maruaudio/ui/shared/music-theory-pitch-class" import { token } from "maruaudio/ui/shared/theme" const TWO_PI = Math.PI * 2 /** One bar's endpoints, plus the slot it belongs to. */ export interface CofBar { /** Circle-of-fifths slot, 0..11 — 0 is C at the top, going clockwise. */ cof: number /** The pitch class this slot holds: `(cof * 7) % 12`. */ pc: number /** Peak-normalised weight for that pitch class, 0..1. */ weight: number /** Angle of the slot in radians, 0 at twelve o'clock, clockwise. */ angle: number x1: number y1: number x2: number y2: number /** Suggested stroke opacity, ramped so even a silent slot stays faintly visible. */ opacity: number } /** The wheel's geometry: everything derived from `size` alone. */ export interface CofGeometry { size: number cx: number cy: number /** Ring radius. The 28px inset leaves room for the rim labels. */ r: number } /** Wheel geometry for a given size. */ export function cofGeometry(size: number): CofGeometry { return { size, cx: size / 2, cy: size / 2, r: size / 2 - 28 } } /** * The twelve radial bars for a pitch-class histogram, in circle-of-fifths order. * * Pure: no DOM, no React. `weights` is chromatic-indexed (0 = C) and is * peak-normalised here — the largest weight reaches full length whatever its * units, and an all-zero histogram yields twelve stubs rather than a division by * zero. Bars run from `r * 0.16` out to `+ r * 0.8 * weight`, leaving the hub * clear for the needle. * * Returned in slot order (index 0 = C at the top), each carrying the pitch class * it represents, so a caller can label or recolour without redoing the mapping. */ /** Six decimals, so server rendering and browser hydration agree despite platform trigonometry rounding. */ const six = (value: number) => Number(value.toFixed(6)) export function cofBarGeometry(weights: ReadonlyArray, size: number): CofBar[] { const { cx, cy, r } = cofGeometry(size) // Peak-normalise. The epsilon floor is what keeps an empty histogram finite. let max = 1e-9 for (let i = 0; i < 12; i += 1) { const v = weights?.[i] if (typeof v === "number" && Number.isFinite(v) && v > max) max = v } return Array.from({ length: 12 }, (_, cof) => { const pc = (cof * 7) % 12 const raw = weights?.[pc] const value = typeof raw === "number" && Number.isFinite(raw) ? raw : 0 const weight = Math.max(0, value / max) const angle = (cof / 12) * TWO_PI const inner = r * 0.16 const outer = inner + r * 0.8 * weight // Screen mapping: sine on x, minus cosine on y — angle 0 at twelve // o'clock, increasing clockwise. const sin = Math.sin(angle) const cos = Math.cos(angle) return { cof, pc, weight, angle, x1: six(cx + sin * inner), y1: six(cy - cos * inner), x2: six(cx + sin * outer), y2: six(cy - cos * outer), opacity: 0.35 + 0.55 * weight, } }) } /** A tonal centre to point at: a continuous angle plus a 0..1 confidence. */ export interface CofNeedle { /** Angle in radians, 0 = C at the top, clockwise. */ angleRad: number /** Confidence 0..1 — drives both the needle's length and its opacity. */ strength: number } export interface CircleOfFifthsProps { /** * Length-12 pitch-class weights in CHROMATIC order (0 = C … 11 = B), * peak-normalised internally. Units are arbitrary. */ weights: ReadonlyArray /** Bar and needle colour. Defaults to the accent token. */ color?: string /** Overall square size in pixels. */ size?: number /** * The tonal centre to point at, e.g. from `tonalCenter(weights)`. Pass null * or omit for no needle. */ needle?: CofNeedle | null /** Draw the pitch-class names around the rim. */ showLabels?: boolean /** * Pitch classes to ring-mark — typically the chord sounding right now. Given * chromatically; reduced mod 12, so raw MIDI note numbers work too. */ highlightPcs?: ReadonlyArray className?: string style?: CSSProperties "aria-label"?: string } export function CircleOfFifths({ weights, color, size = 240, needle = null, showLabels = true, highlightPcs, className, style, "aria-label": ariaLabel, }: CircleOfFifthsProps) { const { cx, cy, r } = cofGeometry(size) const bars = cofBarGeometry(weights, size) const stroke = color ?? token.accent const lit = new Set((highlightPcs ?? []).map((n) => ((n % 12) + 12) % 12)) // The needle, if there is one. Length and opacity both track strength, so a // weak centre reads as weak instead of merely pointing somewhere else. const strength = needle ? Math.min(1, Math.max(0, needle.strength)) : 0 const needleLength = r * (0.25 + 0.7 * strength) const needleX = needle ? cx + Math.sin(needle.angleRad) * needleLength : 0 const needleY = needle ? cy - Math.cos(needle.angleRad) * needleLength : 0 const needleOpacity = 0.35 + 0.65 * strength return ( ) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","maruaudio@>=0.0.3 <0.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/maruaudio","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"maruaudio@>=0.0.3 <0.1.0"}]]}]}]]}],["$","$L62",null,{"namespace":"@pluginui","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/ui/circle-of-fifths.tsx","content":"$64","type":"registry:component","target":"@ui/circle-of-fifths.tsx"}],"className":"h-[70svh] min-h-80"}]]}]