61: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"] 62: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"] 63:T2b82,/** * Source: https://maru.audio/ui-kit/chord-graph * 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. */ /** * Chord Graph — how the chords in a progression connect, drawn as a network of * shared notes. * * A chord chart tells you the order chords arrive in. It does not tell you why * one leads to another comfortably and another lands with a jolt. That is * largely about SHARED PITCH CLASSES: C and Am hold two notes in common and * slide into each other almost imperceptibly, C and F♯ share nothing and feel * like a cut. This draws that relation directly — an edge between every pair of * chords that shares at least one note, weighted by how many. * * The result is a map of a progression's internal gravity. A tightly-connected * cluster is a set of chords that will interchange freely; an isolated node is a * chord that will always sound like an arrival or a departure. Reading it tells * you which substitutions are available before you try them. * * Two layouts, answering different questions. "ring" spaces the chords evenly in * the order you gave them, so the progression's own sequence is the geometry and * edge lengths mean nothing — best for seeing which non-adjacent chords are * secretly related. "fifths" places each chord at the circle-of-fifths angle of * its ROOT (`pcs[0]`), so distance on screen becomes harmonic distance and a * diatonic progression collapses into a tight arc; chords sharing a root get * pushed to different radii so they stay individually clickable. * * No Vue original — written for this kit. `chordGraphLayout` is the pure core: * nodes, edges and shared-note counts with no DOM, so the graph can be computed * headlessly, tested, or fed to a different renderer. * * 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 { token } from "maruaudio/ui/shared/theme" const TWO_PI = Math.PI * 2 /** One chord to place on the graph. */ export interface ChordGraphChord { /** What to write on the node, e.g. `"Am7"`. */ label: string /** * The chord's pitch classes. `pcs[0]` is treated as the ROOT, which is what * the "fifths" layout positions by, so pass them root-first. Reduced mod 12. */ pcs: ReadonlyArray /** Per-chord colour override. Falls back to the component's `color`. */ color?: string } /** Where the chords go. */ export type ChordGraphLayoutMode = "ring" | "fifths" /** A placed chord. */ export interface ChordGraphNode { /** Index into the input array — edges refer to chords by this. */ index: number label: string /** The chord's unique pitch classes, sorted. */ pcs: number[] /** The root pitch class (`pcs[0]` as given, reduced), or null for an empty chord. */ rootPc: number | null color?: string x: number y: number } /** A shared-note relation between two chords. */ export interface ChordGraphEdge { /** Index of the earlier chord. */ from: number /** Index of the later chord. Always greater than `from` — each pair appears once. */ to: number /** How many pitch classes the two share. Always at least 1. */ shared: number /** The shared pitch classes themselves, sorted. */ sharedPcs: number[] /** `shared` scaled into 0..1 against the strongest edge in the graph — drives stroke weight. */ strength: number } /** The computed graph. */ export interface ChordGraphData { nodes: ChordGraphNode[] /** Every pair sharing at least one pitch class, `from` < `to`. */ edges: ChordGraphEdge[] cx: number cy: number /** The radius nodes are placed at (the outer ring, for the "fifths" layout). */ radius: number } /** Positive modulo, so negative pitch classes wrap forward. */ function mod(n: number, m: number): number { return ((n % m) + m) % m } /** Node circle radius — also the inset that keeps nodes inside the box. */ const NODE_RADIUS = 18 /** * Lay out a chord network: positions, and an edge for every pair of chords * sharing at least one pitch class. * * Pure: no DOM, no React. Pitch classes are reduced mod 12 and deduped, so raw * MIDI note numbers work and an octave doubling never counts as a second shared * note. * * In "ring" the chords are spaced evenly in input order starting at twelve * o'clock. In "fifths" each sits at the circle-of-fifths angle of its root, and * chords sharing a root are pulled inward in turn so they do not stack — the * first stays on the rim, the next sits a step in, and so on. */ export function chordGraphLayout( chords: ReadonlyArray, size = 280, layout: ChordGraphLayoutMode = "ring", ): ChordGraphData { const cx = size / 2 const cy = size / 2 const radius = Math.max(0, size / 2 - NODE_RADIUS - 10) const list = chords ?? [] // How far each successive same-angle chord is pulled in, in the fifths // layout. A third of the radius keeps three collisions legible before they // start crowding the hub. const RADIAL_STEP = radius * 0.28 // Tracks how many chords have already claimed each fifths slot, so the next // one can be offset inward instead of landing on top of it. const slotUsage = new Map() const nodes: ChordGraphNode[] = list.map((chord, index) => { const unique = [...new Set((chord.pcs ?? []).map((pc) => mod(pc, 12)))].sort((a, b) => a - b) const rawRoot = chord.pcs?.[0] const rootPc = typeof rawRoot === "number" && Number.isFinite(rawRoot) ? mod(rawRoot, 12) : null let angle: number let r: number if (layout === "fifths" && rootPc !== null) { // Circle-of-fifths angle: multiply by seven to turn a chromatic pitch // class into a fifths slot. const slot = mod(rootPc * 7, 12) angle = (slot / 12) * TWO_PI const used = slotUsage.get(slot) ?? 0 slotUsage.set(slot, used + 1) r = Math.max(NODE_RADIUS, radius - used * RADIAL_STEP) } else { // Ring: evenly spaced in the order given. angle = list.length > 0 ? (index / list.length) * TWO_PI : 0 r = radius } return { index, label: chord.label, pcs: unique, rootPc, color: chord.color, // Screen mapping: sine on x, minus cosine on y — angle 0 at twelve // o'clock, winding clockwise, matching the circle-of-fifths wheel. x: cx + Math.sin(angle) * r, y: cy - Math.cos(angle) * r, } }) // Every unordered pair, once, keeping only those that actually share a note. const edges: ChordGraphEdge[] = [] let maxShared = 0 for (let i = 0; i < nodes.length; i += 1) { for (let j = i + 1; j < nodes.length; j += 1) { const a = new Set(nodes[i].pcs) const sharedPcs = nodes[j].pcs.filter((pc) => a.has(pc)) if (sharedPcs.length === 0) continue if (sharedPcs.length > maxShared) maxShared = sharedPcs.length edges.push({ from: i, to: j, shared: sharedPcs.length, sharedPcs, strength: 0 }) } } // Normalise against the strongest edge present, so the contrast between a // one-note and a three-note link is visible whatever the chords' size. for (const edge of edges) { edge.strength = maxShared > 0 ? edge.shared / maxShared : 0 } return { nodes, edges, cx, cy, radius } } export interface ChordGraphProps { /** The chords to plot. Give each one's pitch classes ROOT FIRST. */ chords: ReadonlyArray /** Emphasise this chord and the edges touching it. Null or omitted for none. */ activeIndex?: number | null /** Overall square size in pixels. */ size?: number /** Even spacing in input order, or placement by root on the circle of fifths. */ layout?: ChordGraphLayoutMode /** Default node and edge colour. Individual chords can override it. */ color?: string className?: string style?: CSSProperties "aria-label"?: string } export function ChordGraph({ chords, activeIndex = null, size = 280, layout = "ring", color, className, style, "aria-label": ariaLabel, }: ChordGraphProps) { const { nodes, edges, cx, cy } = chordGraphLayout(chords, size, layout) const accent = color ?? token.accent const active = activeIndex ?? null return ( ) } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@pluginui","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/chord-graph.tsx","content":"$63","type":"registry:component","target":"@ui/chord-graph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]