4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T9df,export const KNOB_SWEEP = 270; export const KNOB_START_ANGLE = -135; export const KNOB_DRAG_TRAVEL = 150; const clamp01 = (n: number) => (n < 0 ? 0 : n > 1 ? 1 : n); const clamp = (n: number, min: number, max: number) => n < min ? min : n > max ? max : n; export function valueToTurn(value: number, min: number, max: number): number { if (max === min) return 0; return clamp01((value - min) / (max - min)); } export function turnToValue(turn: number, min: number, max: number): number { return min + clamp01(turn) * (max - min); } export function turnToAngle(turn: number): number { return KNOB_START_ANGLE + clamp01(turn) * KNOB_SWEEP; } export function arcLength(radius: number): number { return (2 * Math.PI * radius * KNOB_SWEEP) / 360; } export function dashForTurn(turn: number, radius: number): string { const length = arcLength(radius); return `${length * clamp01(turn)} ${length}`; } export function arcPath(radius: number, center: number): string { const at = (angle: number) => { const rad = (angle * Math.PI) / 180; return { x: center + radius * Math.sin(rad), y: center - radius * Math.cos(rad), }; }; const round = (n: number) => Math.round(n * 1000) / 1000; const start = at(KNOB_START_ANGLE); const end = at(KNOB_START_ANGLE + KNOB_SWEEP); const largeArc = KNOB_SWEEP > 180 ? 1 : 0; return `M ${round(start.x)} ${round(start.y)} A ${radius} ${radius} 0 ${largeArc} 1 ${round(end.x)} ${round(end.y)}`; } const decimalsOf = (step: number): number => { const text = String(step); if (text.includes("e")) return 12; const dot = text.indexOf("."); return dot === -1 ? 0 : text.length - dot - 1; }; export function snapToStep( value: number, min: number, max: number, step: number, ): number { const bounded = clamp(value, min, max); if (!(step > 0)) return bounded; const snapped = min + Math.round((bounded - min) / step) * step; return clamp( Number(snapped.toFixed(Math.min(decimalsOf(step), 12))), min, max, ); } export function stepValue( value: number, delta: number, min: number, max: number, step: number, ): number { return snapToStep(value + delta * step, min, max, step); } export function dragValue( startValue: number, dx: number, dy: number, min: number, max: number, step: number, fine = false, ): number { const travel = dx - dy; const moved = (travel / KNOB_DRAG_TRAVEL) * (max - min) * (fine ? 0.25 : 1); return snapToStep(startValue + moved, min, max, step); } 52:Td48,"use client"; import * as React from "react"; import { dragValue, snapToStep, stepValue } from "./knob-geometry"; export interface UseKnobValueOptions { value?: number; defaultValue?: number; min: number; max: number; step: number; disabled?: boolean; onValueChange?: (value: number) => void; onValueCommitted?: (value: number) => void; } interface KeyIntent { min: number; max: number; step: number; shiftKey: boolean; } function nextForKey( key: string, value: number, { min, max, step, shiftKey }: KeyIntent, ): number | null { const move = shiftKey ? step / 10 : step; switch (key) { case "ArrowUp": case "ArrowRight": return stepValue(value, 1, min, max, move); case "ArrowDown": case "ArrowLeft": return stepValue(value, -1, min, max, move); case "PageUp": return stepValue(value, 10, min, max, move); case "PageDown": return stepValue(value, -10, min, max, move); case "Home": return min; case "End": return max; default: return null; } } export function useKnobValue({ value, defaultValue, min, max, step, disabled, onValueChange, onValueCommitted, }: UseKnobValueOptions) { const [uncontrolled, setUncontrolled] = React.useState(() => snapToStep(defaultValue ?? min, min, max, step), ); const [dragging, setDragging] = React.useState(false); const isControlled = value !== undefined; const current = isControlled ? snapToStep(value, min, max, step) : uncontrolled; const pendingRef = React.useRef(false); const dragRef = React.useRef({ x: 0, y: 0, value: 0 }); const change = (next: number) => { if (next === current) return; if (!isControlled) setUncontrolled(next); onValueChange?.(next); }; const onPointerDown = (event: React.PointerEvent) => { if (disabled || event.button !== 0) return; event.preventDefault(); event.currentTarget.setPointerCapture?.(event.pointerId); dragRef.current = { x: event.clientX, y: event.clientY, value: current }; setDragging(true); }; const onPointerMove = (event: React.PointerEvent) => { if (!dragging) return; const start = dragRef.current; change( dragValue( start.value, event.clientX - start.x, event.clientY - start.y, min, max, step, event.shiftKey, ), ); }; const endDrag = (event: React.PointerEvent) => { if (!dragging) return; if (event.currentTarget.hasPointerCapture?.(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } setDragging(false); onValueCommitted?.(current); }; const onKeyDown = (event: React.KeyboardEvent) => { if (disabled) return; const next = nextForKey(event.key, current, { min, max, step, shiftKey: event.shiftKey, }); if (next === null) return; event.preventDefault(); pendingRef.current = true; change(next); }; const onKeyUp = () => { if (!pendingRef.current) return; pendingRef.current = false; onValueCommitted?.(current); }; return { value: current, dragging, handlers: { onPointerDown, onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown, onKeyUp, }, }; } 53:T18f6,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { cn } from "@/lib/utils"; import { arcPath, dashForTurn, turnToAngle, valueToTurn, } from "./knob-geometry"; import { useKnobValue } from "./use-knob-value"; const SIZES = { sm: { box: 44, stroke: 3, tick: 7, thickness: 2 }, md: { box: 64, stroke: 4, tick: 10, thickness: 2.5 }, lg: { box: 96, stroke: 6, tick: 14, thickness: 3 }, } as const; const controlVariants = cva( cn( "group relative touch-none select-none rounded-full outline-none", "cursor-grab data-[dragging]:cursor-grabbing", "focus-visible:ring-focus", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "after:absolute after:inset-0 after:content-['']", ), { variants: { size: { sm: "", md: "", lg: "" } }, defaultVariants: { size: "md" }, }, ); export interface KnobProps extends Omit< React.HTMLAttributes, "defaultValue" | "onChange" | "children" >, VariantProps { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; onValueCommitted?: (value: number) => void; min?: number; max?: number; step?: number; label?: React.ReactNode; showValue?: boolean; formatValue?: (value: number) => string; disabled?: boolean; } export const Knob = React.forwardRef( ( { className, size, value, defaultValue, onValueChange, onValueCommitted, min = 0, max = 100, step = 1, label, showValue, formatValue, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref, ) => { const labelId = React.useId(); const metrics = SIZES[size ?? "md"]; const { value: current, dragging, handlers, } = useKnobValue({ value, defaultValue, min, max, step, disabled, onValueChange, onValueCommitted, }); const center = metrics.box / 2; const ringRadius = center - metrics.stroke / 2; const bodyRadius = ringRadius - metrics.stroke * 1.5; const anchorRadius = bodyRadius - metrics.tick; const head = metrics.stroke * 1.5; const thumbLength = dragging ? ringRadius + metrics.stroke * 0.75 - anchorRadius : metrics.tick; const turn = valueToTurn(current, min, max); const path = arcPath(ringRadius, center); const formatted = formatValue ? formatValue(current) : String(current); return (

{label ? ( {label} ) : null}

{showValue ? ( {formatted} ) : null}

); }, ); Knob.displayName = "Knob"; 4e:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4f",null,{"namespace":"@usva","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"knob-geometry.ts","content":"$51","type":"registry:ui","target":"components/ui/knob-geometry.ts"},{"path":"use-knob-value.ts","content":"$52","type":"registry:ui","target":"components/ui/use-knob-value.ts"},{"path":"knob.tsx","content":"$53","type":"registry:ui","target":"components/ui/knob.tsx"}],"className":"h-[70svh] min-h-80"}]]}]