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:T7708,/** * Source: https://maru.audio/ui-kit/eurorack * 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. */ import { forwardRef, useId, useLayoutEffect, useRef } from "react" import type { ComponentProps, CSSProperties, HTMLAttributes, MouseEvent, PointerEvent as ReactPointerEvent, ReactNode, } from "react" import { audioModulePanelDimensions } from "maruaudio/ui/shared/maru/contracts" import type { AudioModuleFacePatchingSurface, AudioModuleFacePatchAnchor, AudioModulePanelPortAnchor, } from "maruaudio/ui/shared/maru/contracts" import { Knob, type KnobDesignState } from "@/components/ui/knob" import { KnobHeadlessReadout } from "maruaudio/ui/shared/knob-headless" import "@/components/ui/eurorack.css" export interface EurorackPanelProps extends HTMLAttributes { widthHp: number /** Display density, independent of physical screen DPI or browser CSS mm. */ pixelsPerMm?: number label: string /** Source-panel mounting centers in millimetres; omitted panels use corner mounts. */ mountingHoles?: readonly { x: number; y: number }[] children?: ReactNode } /** Portable 3U panel. The module owns controls; the host owns placement. */ export const EurorackPanel = forwardRef( function EurorackPanel( { widthHp, pixelsPerMm = 3, label, mountingHoles, children, className = "", style, ...props }, ref ) { const screwIdentity = useId() const dimensions = audioModulePanelDimensions({ format: "eurorack", units: "mm", widthHp, ports: [], }) if (!Number.isFinite(pixelsPerMm) || pixelsPerMm <= 0) throw new Error("Eurorack display density must be positive and finite.") if (mountingHoles?.some(({ x, y }) => !Number.isFinite(x) || !Number.isFinite(y))) throw new Error("Panel mounting centers must be finite.") return (

{(mountingHoles ?? [null, null, null, null]).map((mount, index) => { // Stable per mounted panel: no random render/hydration changes while editing. const seed = `${label}:${screwIdentity}:${index}` const hash = Array.from(seed).reduce((hash, character) => (hash * 31 + character.charCodeAt(0)) >>> 0, 17) const mixed = Math.imul(hash ^ (hash >>> 16), 0x45d9f3b) const angle = ((mixed ^ (mixed >>> 16)) >>> 0) % 180 return })} {children}

) } ) export interface MutableKnobCaptionSpec { label: ReactNode /** Caption center relative to the knob center, in panel millimetres. */ offsetMm: number widthMm: number tone?: "plain" | "pink" | "teal" /** Attenuverters replace their printed minus/plus marks with the value. */ bipolar?: boolean } /** Hardware paint and the existing headless caption; Knob owns every gesture. */ export function MutableKnobDesign({ value01, size, formattedValue, caption }: KnobDesignState & { caption?: MutableKnobCaptionSpec }) { return {caption && −+ : caption.label} value={formattedValue} showLabelOnHover valueReveal="hover-or-edit" labelStyle={{ font: "inherit", color: "inherit", whiteSpace: "pre" }} outputStyle={{ font: "inherit", color: "inherit", ...(caption.bipolar ? { background: "var(--uikit-surface, #efefeb)" } : {}), }} /> } } export interface EurorackPanelItemProps extends HTMLAttributes { /** Centre coordinates in millimetres, relative to the panel top-left. */ x: number y: number width?: number height?: number } /** Places existing controls/labels at authored physical panel coordinates. */ export const EurorackPanelItem = forwardRef( function EurorackPanelItem( { x, y, width, height, className = "", style, children, ...props }, ref ) { if (![x, y].every(Number.isFinite) || [width, height].some((value) => value !== undefined && (!Number.isFinite(value) || value <= 0))) throw new Error("Eurorack item geometry must be finite with positive dimensions.") return (

{children}

) } ) /** Shared knob gestures, formatting and accessibility with panel defaults. */ export function EurorackKnob(props: ComponentProps) { return } export interface PatchJackProps extends Omit, "children"> { portId: string direction: "input" | "output" label: string /** Display hint only; the host validates actual signal compatibility. */ kind?: string /** Panel artwork may already carry a visible label; the accessible name remains. */ hideLabel?: boolean connected?: boolean selected?: boolean onActivate?: (event: MouseEvent) => void } /** A host-controlled jack. Native button semantics provide keyboard activation. */ export const PatchJack = forwardRef( function PatchJack( { portId, direction, label, kind, hideLabel = false, connected = false, selected = false, onActivate, onClick, className = "", disabled, ...props }, ref ) { const metalId = `patch-jack-metal-${useId().replace(/:/g, "")}` return ( ) } ) export interface FacePatchZoneProps { patching: AudioModuleFacePatchingSurface | undefined /** Physical mm positions inside the surrounding EurorackPanel. */ layout?: readonly AudioModulePanelPortAnchor[] portIds?: readonly string[] /** Use the labels printed in authored panel artwork instead of duplicating them. */ hideLabels?: boolean className?: string style?: CSSProperties } /** Same jack projection in a source face and an isolated packaged face. */ export function FacePatchZone({ patching, layout, portIds, hideLabels = false, className = "", style, }: FacePatchZoneProps) { const root = useRef(null) const buttons = useRef(new Map()) const patchingRef = useRef(patching) const measureRef = useRef<(() => void) | undefined>(undefined) patchingRef.current = patching const ports = (patching?.ports ?? []).filter((port) => (!portIds || portIds.includes(port.portId)) && (!layout || layout.some((anchor) => anchor.portId === port.portId && anchor.direction === port.direction))) const endpoints = JSON.stringify(ports.map(({ portId, direction }) => [portId, direction])) const layoutKey = JSON.stringify(layout ?? null) const available = patching !== undefined useLayoutEffect(() => { const zone = root.current if (!available || !zone) return // Positioned zones pass through pointer input; the physical panel also // includes blank print and knobs outside the jack hit targets. const surface = zone.closest("[data-eurorack-panel]") ?? zone let hovered = false const enter = (event: PointerEvent) => { if (event.relatedTarget instanceof Node && surface.contains(event.relatedTarget)) return if (hovered) return hovered = true patchingRef.current?.reportHover?.(true) } const leave = (event: PointerEvent) => { if (event.relatedTarget instanceof Node && surface.contains(event.relatedTarget)) return if (!hovered) return hovered = false patchingRef.current?.reportHover?.(false) } surface.addEventListener("pointerover", enter) surface.addEventListener("pointerout", leave) return () => { surface.removeEventListener("pointerover", enter) surface.removeEventListener("pointerout", leave) patchingRef.current?.reportHover?.(false) } // The live callback is already read through patchingRef. Rebinding on its // identity would clear hover without a new pointer entry to restore it. }, [available]) useLayoutEffect(() => { if (!available || !root.current) return const mountedPatching = patchingRef.current let previous = "" let frame: number | undefined const measure = () => { frame = undefined const current = patchingRef.current if (!current) return const anchors: AudioModuleFacePatchAnchor[] = [] for (const port of current.ports) { const button = buttons.current.get(port.portId) if (!button) continue const rect = button.getBoundingClientRect() if (rect.width <= 0 || rect.height <= 0) continue anchors.push({ portId: port.portId, direction: port.direction, x: rect.left + rect.width / 2, y: rect.top + rect.height / 2, }) } const key = JSON.stringify(anchors) if (key !== previous) { previous = key current.reportAnchors(anchors) } } const schedule = () => { if (frame === undefined) frame = requestAnimationFrame(measure) } // Initial frame height can be smaller than the finished panel. Re-send on // viewport resize even if local coordinates stayed identical. const resize = () => { previous = ""; schedule() } measureRef.current = schedule const observer = new ResizeObserver(schedule) observer.observe(root.current) for (const button of buttons.current.values()) observer.observe(button) window.addEventListener("resize", resize) window.addEventListener("scroll", schedule, true) measure() return () => { observer.disconnect() window.removeEventListener("resize", resize) window.removeEventListener("scroll", schedule, true) if (frame !== undefined) cancelAnimationFrame(frame) measureRef.current = undefined mountedPatching?.reportAnchors([]) } }, [available, endpoints, layoutKey, patching?.reportAnchors]) useLayoutEffect(() => { measureRef.current?.() }) if (!patching) return null return (

{ports.map((port) => { const jack = { if (element) buttons.current.set(port.portId, element) else buttons.current.delete(port.portId) }} onActivate={() => patchingRef.current?.activate(port.portId, port.direction)} /> const anchor = layout?.find((item) => item.portId === port.portId && item.direction === port.direction) return anchor ? {jack} : {jack} })}

) } export interface PatchCablePoint { readonly x: number; readonly y: number } export interface PatchCable { readonly id: string readonly source: PatchCablePoint readonly target: PatchCablePoint readonly color?: string readonly selected?: boolean readonly highlighted?: boolean /** A drag preview participates in motion but never intercepts input. */ readonly interactive?: boolean /** Visual destination feedback; the host alone owns snap and drop validity. */ readonly snappedEnd?: PatchCableEnd /** Accessible connection name supplied from the host's declared endpoints. */ readonly label?: string } /** Hanging cable geometry in host-local pixels; no routing or hit testing. */ export function patchCablePath( source: PatchCablePoint, target: PatchCablePoint, bendOffset = 0 ): string | null { if (![source.x, source.y, target.x, target.y, bendOffset].every(Number.isFinite)) return null const dx = target.x - source.x const sag = Math.min(120, 28 + Math.hypot(dx, target.y - source.y) * 0.18) const controls = [source.x + dx * 0.2, source.y + sag + bendOffset, target.x - dx * 0.2, target.y + sag + bendOffset] if (!controls.every(Number.isFinite)) return null const n = (value: number) => Math.abs(value) > Number.MAX_SAFE_INTEGER / 1_000_000 ? value : Math.round(value * 1_000_000) / 1_000_000 return `M ${n(source.x)} ${n(source.y)} C ${n(controls[0]!)} ${n(controls[1]!)}, ${n(controls[2]!)} ${n(controls[3]!)}, ${n(target.x)} ${n(target.y)}` } export type PatchCableEnd = "source" | "target" export interface PatchCableLabel { readonly id: string readonly point: PatchCablePoint readonly label: string readonly color?: string } /** Keep temporary captions clear of sockets and of each other in dense panels. */ function cableLabelLayout(labels: readonly PatchCableLabel[], width: number) { const placed: { x: number; y: number; width: number; label: PatchCableLabel }[] = [] for (const label of [...labels].sort((a, b) => a.point.y - b.point.y || a.point.x - b.point.x)) { if (![label.point.x, label.point.y].every(Number.isFinite)) continue const size = Math.min(width - 8, Math.max(36, label.label.length * 6.5 + 16)) const x = Math.max(4, Math.min(width - size - 4, label.point.x - size / 2)) let y = label.point.y - 46 while (placed.some((box) => x < box.x + box.width + 4 && x + size + 4 > box.x && y < box.y + 24 && y + 24 > box.y) || labels.some(({ point }) => x < point.x + 22 && x + size > point.x - 22 && y < point.y + 22 && y + 22 > point.y - 22)) y -= 26 placed.push({ x, y, width: size, label }) } return placed } export interface PatchCableLayerProps { width: number height: number cables: readonly PatchCable[] /** Host-derived captions paint above every cable without intercepting gestures. */ labels?: readonly PatchCableLabel[] onCableHover?: (id: string | null) => void onCableSelect?: (id: string) => void onCableDoubleClick?: (id: string) => void onCableEndPointerDown?: ( id: string, end: PatchCableEnd, event: ReactPointerEvent ) => void /** Keyboard/click equivalent of picking up a selected cable end. */ onCableEndActivate?: (id: string, end: PatchCableEnd) => void className?: string style?: CSSProperties } /** Controlled overlay. Endpoint measurement and connection mutations belong to the host. */ export function PatchCableLayer({ width, height, cables, labels = [], onCableHover, onCableSelect, onCableDoubleClick, onCableEndPointerDown, onCableEndActivate, className = "", style, }: PatchCableLayerProps) { const layerId = useId().replace(/:/g, "") if (![width, height].every((value) => Number.isFinite(value) && value > 0)) return null const interactive = Boolean(onCableSelect || onCableDoubleClick || onCableEndPointerDown || onCableEndActivate) return ( ) } /** A spring only paints SVG geometry; graph state and socket positions stay fixed. */ function PatchCableGraphic({ cable, paintId, onCableHover, onCableSelect, onCableDoubleClick, onCableEndPointerDown, onCableEndActivate, }: Pick & { cable: PatchCable; paintId: string }) { const group = useRef(null) const clipId = useId().replace(/:/g, "") const current = useRef(cable) current.current = cable const spring = useRef({ offset: 0, velocity: 0, frame: undefined as number | undefined, lastTime: undefined as number | undefined, reduced: true }) const previous = useRef({ source: cable.source, target: cable.target }) const paint = () => { const path = patchCablePath(current.current.source, current.current.target, spring.current.offset) if (path !== null) group.current?.querySelectorAll("[data-patch-cable-path]").forEach((element) => element.setAttribute("d", path)) } const stop = () => { const motion = spring.current if (motion.frame !== undefined) cancelAnimationFrame(motion.frame) motion.frame = undefined motion.lastTime = undefined motion.offset = 0 motion.velocity = 0 paint() } const tick = (time: number) => { const motion = spring.current motion.frame = undefined if (motion.reduced) { stop(); return } const dt = motion.lastTime === undefined ? 1 / 60 : Math.min(0.032, Math.max(0, (time - motion.lastTime) / 1000)) motion.lastTime = time motion.velocity += (-100 * motion.offset - 10 * motion.velocity) * dt motion.offset = Math.max(-48, Math.min(48, motion.offset + motion.velocity * dt)) if (Math.abs(motion.offset) < 0.04 && Math.abs(motion.velocity) < 0.2) { stop() return } paint() motion.frame = requestAnimationFrame(tick) } const excite = (impulse: number) => { const motion = spring.current if (motion.reduced || !Number.isFinite(impulse) || patchCablePath(current.current.source, current.current.target) === null) return motion.velocity = Math.max(-600, Math.min(600, motion.velocity + impulse)) if (motion.frame === undefined) motion.frame = requestAnimationFrame(tick) } useLayoutEffect(() => { const media = window.matchMedia?.("(prefers-reduced-motion: reduce)") spring.current.reduced = media?.matches ?? false const change = () => { spring.current.reduced = media?.matches ?? false if (spring.current.reduced) stop() } media?.addEventListener("change", change) excite(110) return () => { media?.removeEventListener("change", change) stop() } }, []) useLayoutEffect(() => { const before = previous.current const dx = (cable.target.x - before.target.x) - (cable.source.x - before.source.x) const dy = (cable.target.y - before.target.y) - (cable.source.y - before.source.y) previous.current = { source: cable.source, target: cable.target } if (dx || dy) excite(Math.max(-280, Math.min(280, dy * 14 + dx * 7))) paint() }, [cable.source.x, cable.source.y, cable.target.x, cable.target.y]) const d = patchCablePath(cable.source, cable.target, spring.current.offset) if (d === null) return null const interactive = cable.interactive !== false const handles = interactive && cable.selected && (onCableEndPointerDown || onCableEndActivate) // Geometric holes, rather than a dashed stroke, keep the socket centers // available for fan-out while the full intervening cable remains clickable. const extent = Math.max(Math.abs(cable.source.x), Math.abs(cable.source.y), Math.abs(cable.target.x), Math.abs(cable.target.y)) + 300 const hole = ({ x, y }: PatchCablePoint) => `M ${x - 20} ${y} a 20 20 0 1 0 40 0 a 20 20 0 1 0 -40 0 Z` return ( onCableHover?.(cable.id) : undefined} onPointerLeave={interactive ? () => onCableHover?.(null) : undefined} onFocus={interactive ? () => onCableHover?.(cable.id) : undefined} onBlur={interactive ? () => onCableHover?.(null) : undefined} aria-hidden={!interactive || undefined} style={{ "--patch-cable-color": cable.color ?? "var(--uikit-accent, #c87039)" } as CSSProperties} > {(["source", "target"] as const).map((end) => ( ))} {interactive && (onCableSelect || onCableDoubleClick) ? ( {/* Hit-test the rest geometry: the spring repaints only the visible paths, so a still pointer never sees its target sway away. */} excite(100)} onClick={() => onCableSelect?.(cable.id)} onDoubleClick={() => onCableDoubleClick?.(cable.id)} onKeyDown={(event) => { if (onCableSelect && (event.key === "Enter" || event.key === " ")) { event.preventDefault() onCableSelect(cable.id) } }} /> ) : null} {cable.snappedEnd ? ( ) : null} {handles ? (["source", "target"] as const).map((end) => ( excite(80)} onPointerDown={(event) => onCableEndPointerDown?.(cable.id, end, event)} onClick={(event) => { event.stopPropagation(); onCableEndActivate?.(cable.id, end) }} onKeyDown={(event) => { if (onCableEndActivate && (event.key === "Enter" || event.key === " ")) { event.preventDefault() event.stopPropagation() onCableEndActivate(cable.id, end) } }} /> )) : null} ) } 65:T324a,/** * Source: https://maru.audio/ui-kit/eurorack * 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. */ .uikit-eurorack-panel { --uikit-surface: #dedfdb; --uikit-text: #252723; --uikit-text-muted: #4d534d; --uikit-cap: #272a28; --uikit-track: #a2a5a0; --uikit-border: #8d918b; --uikit-accent: #517b66; position: relative; flex: none; box-sizing: border-box; isolation: isolate; overflow: hidden; border: 1px solid var(--uikit-border); border-radius: 0; color: var(--uikit-text); background: repeating-linear-gradient(0deg, #ffffff12 0, #ffffff12 1px, transparent 1px, transparent 3px), linear-gradient(90deg, #0000000b, #ffffff20 14%, transparent 45%, #ffffff30 82%, #00000010), var(--uikit-surface); box-shadow: inset 1px 0 #ffffff80, inset -1px 0 #00000018; font-family: var(--uikit-font, ui-sans-serif, system-ui, sans-serif); } /* Mutable-style panel material shared by source-faithful module faces. */ .uikit-eurorack-panel[data-panel-theme="mutable"] { --uikit-surface: #efefeb; --uikit-text: #292929; --uikit-text-muted: #555a55; --uikit-cap: #c9ccc8; --uikit-track: #a9ada7; --uikit-border: #8c8b83; --uikit-accent: #555a55; --knob-arc: #555a55; --uikit-knob-cap: linear-gradient(145deg, #e5e7e2 0%, #c9ccc8 48%, #b7bbb6 100%); --uikit-knob-cap-border: #929790; --uikit-knob-pointer: #292929; --uikit-knob-shadow: inset 0 1px 1px #ffffffa0, 0 1px 2px #00000030; --patch-jack-size: calc(8 * var(--eurorack-mm)); /* Do not reset a module's artwork size/position/repeat with a shorthand. */ background-color: #efefeb; background-image: none; border-color: #9a9991; } .uikit-eurorack-panel[data-panel-theme="mutable"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23777777' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); box-shadow: inset 1px 0 #fff, inset -1px 0 #00000030; } /* This design is paint within Knob's fixed square: values never move the cap. */ .uikit-mutable-knob { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 38% 28%, #343633, #111210 70%); box-shadow: 0 1px 2px #00000070, 1px 3px 4px #00000048, 3px 6px 9px #00000032, 0 0 1px 1px #00000060; } .uikit-mutable-knob__skirt { position: absolute; inset: 2%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #131412 0deg 5deg, #383b36 7deg, #171916 11deg 15deg); box-shadow: inset 0 1px 1px #ffffff36, inset 0 -2px 2px #000000c0; } .uikit-mutable-knob__cap { position: absolute; inset: 19%; border-radius: 50%; background: var(--mutable-knob-cap, radial-gradient(circle at 35% 23%, #fffefa, #e9e9e1 72%, #babcb3)); border: 1px solid #080a08; box-shadow: 0 0 0 2px #090b08, inset 0 1px 1px #ffffff70, 0 1px 2px #000000a0; } .uikit-mutable-knob__index { position: absolute; inset: 0; transform: rotate(var(--mutable-knob-angle)); } .uikit-mutable-knob__index::after { content: ""; position: absolute; top: 2%; left: 46%; width: 8%; height: 31%; border-radius: 1px; background: var(--mutable-knob-index, linear-gradient(90deg, #bfc1b7, #fffef6 40% 75%, #d6d8ce)); box-shadow: 0 0 1px #00000080; } .uikit-mutable-knob[data-small] .uikit-mutable-knob__cap { inset: 10%; background: radial-gradient(ellipse at 34% 22%, #494b45, #242621 48%, #121410 85%); box-shadow: inset 0 1px 1px #ffffff25, 0 0 0 1px #0b0c09; } .uikit-mutable-knob[data-small] .uikit-mutable-knob__index::after { left: 45%; width: 10%; top: 7%; height: 39%; } .uikit-mutable-knob__caption { position: absolute; left: 50%; transform: translate(-50%, -50%); color: var(--uikit-text, #292929); font-family: var(--mutable-caption-font, "Arial Narrow", "Roboto Condensed", Arial, sans-serif); font-size: calc(2.65 * var(--eurorack-mm, 4px)); font-weight: 700; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; pointer-events: none; } .uikit-mutable-knob__caption[data-tone="pink"], .uikit-mutable-knob__caption[data-tone="teal"] { color: #fff; } .uikit-mutable-knob__caption[data-bipolar] { color: #686762; } .uikit-eurorack-panel[data-panel-theme="mutable"] [data-eurorack-panel-button] { width: calc(5.2 * var(--eurorack-mm)); height: calc(5.2 * var(--eurorack-mm)); min-width: calc(5.2 * var(--eurorack-mm)); min-height: calc(5.2 * var(--eurorack-mm)); max-width: calc(5.2 * var(--eurorack-mm)); max-height: calc(5.2 * var(--eurorack-mm)); aspect-ratio: 1; padding: 0; border-color: #6d706b; border-radius: 50%; background: radial-gradient(circle at 36% 25%, #4c4d48, #242621 70%); box-shadow: inset 0 1px 1px #ffffff40, 0 1px 2px #00000050; color: #242623; } .uikit-eurorack-panel[data-panel-theme="mutable"] [data-eurorack-panel-button="7.8"] { width: calc(7.8 * var(--eurorack-mm)); height: calc(7.8 * var(--eurorack-mm)); min-width: calc(7.8 * var(--eurorack-mm)); min-height: calc(7.8 * var(--eurorack-mm)); max-width: calc(7.8 * var(--eurorack-mm)); max-height: calc(7.8 * var(--eurorack-mm)); } .uikit-eurorack-panel[data-panel-theme="mutable"] .uikit-patch-jack:disabled { opacity: 1; } .uikit-eurorack-item { position: absolute; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); box-sizing: border-box; } .uikit-eurorack-screw { position: absolute; width: calc(2.8 * var(--eurorack-mm)); height: calc(2.8 * var(--eurorack-mm)); border: 1px solid #747874; border-radius: 50%; background: radial-gradient(ellipse at 33% 22%, #fafbf8 0 9%, #d9dcd6 32%, #b5bab3 65%, #777e76 100%); box-shadow: inset 0 0 0 1px #ffffff8a, 0 0 0 calc(.35 * var(--eurorack-mm)) #74797145, 0 1px 2px #00000050; pointer-events: none; } .uikit-eurorack-screw::after { content: ""; position: absolute; inset: 40% 12%; border-radius: 1px; transform: rotate(var(--eurorack-screw-angle, -32deg)); background: linear-gradient(#363c35, #646c61); box-shadow: 0 1px #ffffffb0, inset 0 1px 1px #00000060; } .uikit-eurorack-screw--tl { left: calc(2 * var(--eurorack-mm)); top: calc(2 * var(--eurorack-mm)); } .uikit-eurorack-screw--tr { right: calc(2 * var(--eurorack-mm)); top: calc(2 * var(--eurorack-mm)); } .uikit-eurorack-screw--bl { left: calc(2 * var(--eurorack-mm)); bottom: calc(2 * var(--eurorack-mm)); } .uikit-eurorack-screw--br { right: calc(2 * var(--eurorack-mm)); bottom: calc(2 * var(--eurorack-mm)); } .uikit-patch-jack { appearance: none; position: relative; display: inline-grid; place-items: center; width: max(36px, calc(var(--patch-jack-size, 24px) + 12px)); height: max(36px, calc(var(--patch-jack-size, 24px) + 12px)); min-width: 36px; min-height: 36px; box-sizing: border-box; padding: 6px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--uikit-text, #252723); font: inherit; touch-action: none; cursor: crosshair; } .uikit-patch-jack:disabled { cursor: default; opacity: 0.45; } .uikit-patch-jack:focus-visible { outline: 2px solid var(--uikit-accent, #517b66); outline-offset: 2px; } .uikit-patch-jack__hardware { position: relative; display: grid; place-items: center; width: var(--patch-jack-size, 24px); height: var(--patch-jack-size, 24px); flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 24%, #fffef4 0, #d6d1c4 29%, #a9a394 63%, #6e706a 88%, #d8d5ca 100%); box-shadow: inset 0 1px 1px #ffffffd9, inset 0 -1px 2px #3c3b344d, 0 0 0 1px #77766d, 0 1px 2px #00000055; } .uikit-patch-jack__metalwork { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .uikit-patch-jack__rim { stroke: #69675e; stroke-width: .7; } .uikit-patch-jack__step { stroke: #f8f3e5; stroke-width: .8; filter: drop-shadow(0 .6px .55px #3c393366); } .uikit-patch-jack__step-face { fill: #c8c2b3; stroke: #77756b; stroke-width: .65; } .uikit-patch-jack__bore-lip { stroke: #69675f; stroke-width: .6; filter: drop-shadow(0 -.45px .35px #ffffffa6); } .uikit-patch-jack__knurl-facet { stroke: #6a675e; stroke-width: .4; stroke-linejoin: bevel; } .uikit-patch-jack__tool-notch { fill: #55544d; stroke: #f1ecde; stroke-width: .6; stroke-linejoin: round; } .uikit-patch-jack__specular { fill: none; stroke: #ffffffd9; stroke-width: .75; stroke-linecap: round; filter: drop-shadow(0 .45px .45px #5d594d99); } .uikit-patch-jack__wear { fill: none; stroke: #f7f1e3a6; stroke-width: .55; stroke-linecap: round; } .uikit-patch-jack__socket { position: relative; width: calc(var(--patch-jack-size, 24px) * 0.56); height: calc(var(--patch-jack-size, 24px) * 0.56); border: 1px solid #6e6b60; box-sizing: border-box; border-radius: 50%; background: radial-gradient(ellipse at 34% 22%, #ffffff5e 0 3%, transparent 17%), radial-gradient(circle at 50% 50%, #030404 0 68%, #151716 77%, #393a35 87%, #928d80 96%, #f2eee1 100%); box-shadow: inset 0 1.5px 2px #000000e6, inset 0 -1px 1px #ffffff20, 0 0 0 1px #787468; } .uikit-patch-jack[data-patch-connected="true"] .uikit-patch-jack__socket { background: var(--patch-jack-color, var(--uikit-accent, #517b66)); box-shadow: inset 0 0 0 3px #00000045, 0 0 0 1px #d7dbd1; } .uikit-patch-jack[data-patch-selected="true"] .uikit-patch-jack__hardware { background: var(--uikit-accent, #517b66); } .uikit-patch-jack__label { position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 70px; font-size: 9px; line-height: 1.1; font-weight: 650; text-align: center; } .uikit-patch-jack[data-patch-port-direction="output"] .uikit-patch-jack__label { padding: 1px 3px; background: var(--uikit-text, #252723); color: var(--uikit-surface, #dedfdb); } .uikit-face-patch-zone { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; } .uikit-face-patch-zone--positioned { position: absolute; inset: 0; padding: 0; pointer-events: none; } .uikit-face-patch-zone--positioned .uikit-patch-jack { pointer-events: auto; } .uikit-patch-cables { position: absolute; inset: 0; overflow: visible; pointer-events: none; fill: none; } .uikit-patch-cables path { stroke-linecap: round; } .uikit-patch-cable__shadow { stroke: #00000038; stroke-width: 7; transform: translateY(2px); pointer-events: none; } .uikit-patch-cable__body { stroke: var(--patch-cable-color); stroke-width: 5; pointer-events: none; } .uikit-patch-cable__shine { stroke: #ffffff40; stroke-width: 1; transform: translateY(-1px); pointer-events: none; } .uikit-patch-cables .uikit-patch-cable__hit { stroke: transparent; stroke-width: 18; stroke-linecap: butt; pointer-events: stroke; cursor: pointer; } .uikit-patch-cable__hit:focus-visible { outline: none; stroke: #ffffff80; stroke-width: 9; } .uikit-patch-cables g[data-selected="true"] .uikit-patch-cable__body { stroke-width: 7; } .uikit-patch-cables g[data-highlighted="true"] .uikit-patch-cable__body { stroke-width: 7; } .uikit-patch-cable-foreground, .uikit-patch-cable-foreground use { pointer-events: none; } .uikit-patch-cable-labels { pointer-events: none; } .uikit-patch-cable-labels rect { fill: #efefeb; stroke: var(--patch-cable-color); stroke-width: 1; } .uikit-patch-cable-labels text { fill: #292929; font: 600 11px ui-sans-serif, system-ui, sans-serif; text-anchor: middle; } .uikit-patch-cable-label__guide { fill: none; stroke: var(--patch-cable-color); stroke-width: 1.5; } .uikit-patch-cable__end-ring { fill: var(--patch-cable-color); stroke: #f7f7f0; stroke-width: 2; pointer-events: none; } .uikit-patch-cable__end-hit { fill: transparent; stroke: none; pointer-events: all; cursor: grab; touch-action: none; } .uikit-patch-cable__end-hit:active { cursor: grabbing; } .uikit-patch-cable__end-hit:focus-visible { outline: none; stroke: #f7f7f0; stroke-width: 2; fill: #ffffff20; } @media (prefers-reduced-motion: reduce) { .uikit-patch-jack, .uikit-patch-cables { animation: none; transition: none; } } .uikit-patch-cable__snap-ring { fill: none; stroke: var(--patch-cable-color); stroke-width: 4; filter: drop-shadow(0 0 2px #fff); pointer-events: none; } 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":["https://pluginui.com/r/core-knob.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/ui/eurorack.tsx","content":"$64","type":"registry:component","target":"@ui/eurorack.tsx"},{"path":"components/ui/eurorack.css","content":"$65","type":"registry:style","target":"@ui/eurorack.css"}],"className":"h-[70svh] min-h-80"}]]}]