zds-pickers 4.0.12 → 4.0.13

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e={noteOff:8,noteOn:9,aftertouch:10,controlChange:11,programChange:12,channelPressure:13,pitchWheel:14},l=15,n=240,s=[{value:e.noteOn,label:"Note On"},{value:e.noteOff,label:"Note Stack"},{value:e.controlChange,label:"Control Change"},{value:e.programChange,label:"Program Change"},{value:e.aftertouch,label:"Aftertouch"},{value:e.channelPressure,label:"Channel Pressure"},{value:e.pitchWheel,label:"Pitch Wheel"}],E=t=>{var a;return((a=s.filter(({value:o})=>o===t)[0])==null?void 0:a.label)||"???"},S=(t,a)=>t|a<<4,u=t=>({status:(t&n)>>4|8,channel:t&l}),c="__react_svg_text_measurement_id",r=0,_=1,i=2,h=3,v=4,C=5,b=6,R=7,N=[{value:R,label:"Always maxed out."},{value:b,label:"Most sensitive."},{value:C,label:"Moderately sensitive."},{value:v,label:"A little sensitive."},{value:r,label:"Linear, no change."},{value:_,label:"A little less sensitive."},{value:i,label:"Even less sensitive."},{value:h,label:"Least sensitive."}];exports.MASK_CHANNEL=l;exports.MASK_STATUS=n;exports.MEASUREMENT_ELEMENT_ID=c;exports.RESPONSE_CURVES=N;exports.Statuses=e;exports.combineStatusWithChannel=S;exports.extractStatusAndChannel=u;exports.getStatusLabel=E;exports.statusOptions=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e={noteOff:8,noteOn:9,aftertouch:10,controlChange:11,programChange:12,channelPressure:13,pitchWheel:14},l=15,n=240,s=[{value:e.noteOn,label:"Note On"},{value:e.noteOff,label:"Note Stack"},{value:e.controlChange,label:"Control Change"},{value:e.programChange,label:"Program Change"},{value:e.aftertouch,label:"Aftertouch"},{value:e.channelPressure,label:"Channel Pressure"},{value:e.pitchWheel,label:"Pitch Wheel"}],u=t=>{var a;return((a=s.filter(({value:o})=>o===t)[0])==null?void 0:a.label)||"???"},E=(t,a)=>t|a<<4,c=t=>({status:(t&n)>>4|8,channel:t&l}),r=0,S=1,i=2,_=3,h=4,v=5,C=6,b=7,N=[{value:b,label:"Always maxed out."},{value:C,label:"Most sensitive."},{value:v,label:"Moderately sensitive."},{value:h,label:"A little sensitive."},{value:r,label:"Linear, no change."},{value:S,label:"A little less sensitive."},{value:i,label:"Even less sensitive."},{value:_,label:"Least sensitive."}],R="__react_svg_text_measurement_id";exports.MASK_CHANNEL=l;exports.MASK_STATUS=n;exports.MEASUREMENT_ELEMENT_ID=R;exports.Statuses=e;exports.combineStatusWithChannel=E;exports.extractStatusAndChannel=c;exports.getStatusLabel=u;exports.responseCurves=N;exports.statusOptions=s;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../lib/midi/export.ts","../lib/other/SVGText.tsx","../lib/pickers/ResponseCurve.tsx"],"sourcesContent":["import type { Option } from 'lib/pickers/Select'\n\nconst Statuses = {\n  noteOff: 8, // 1000\n  noteOn: 9, // 1001\n  aftertouch: 10, // 1010\n  controlChange: 11, // 1011\n  programChange: 12, // 1100\n  channelPressure: 13, // 1101\n  pitchWheel: 14, // 1110\n} as const\n\ntype Status = (typeof Statuses)[keyof typeof Statuses]\n\nconst MASK_CHANNEL = 15 // 00001111\nconst MASK_STATUS = 240 // 01110000\n\nconst statusOptions: Option<Status>[] = [\n  { value: Statuses.noteOn, label: 'Note On' },\n  { value: Statuses.noteOff, label: 'Note Stack' },\n  { value: Statuses.controlChange, label: 'Control Change' },\n  { value: Statuses.programChange, label: 'Program Change' },\n  { value: Statuses.aftertouch, label: 'Aftertouch' },\n  { value: Statuses.channelPressure, label: 'Channel Pressure' },\n  { value: Statuses.pitchWheel, label: 'Pitch Wheel' },\n]\n\nconst getStatusLabel = (val: Status) =>\n  statusOptions.filter(({ value }) => value === val)[0]?.label || '???'\n\nconst combineStatusWithChannel = (channel: number, status: Status) =>\n  channel | (status << 4)\n\nconst extractStatusAndChannel = (\n  status: number,\n): {\n  status: Status\n  channel: number\n} => ({\n  status: (((status & MASK_STATUS) >> 4) | 8) as Status,\n  channel: status & MASK_CHANNEL,\n})\n\nexport {\n  combineStatusWithChannel,\n  extractStatusAndChannel,\n  getStatusLabel,\n  MASK_CHANNEL,\n  MASK_STATUS,\n  statusOptions,\n  Statuses,\n  type Status,\n}\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nconst MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id'\n\ntype WordsByLine = {\n  words: string[]\n  width: number\n  showLine: boolean\n}\n\nconst calculateWordsByLines = (\n  text: string,\n  wordWidths: WordWidths,\n  maxWidth: number,\n  maxHeight: number,\n) => {\n  const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths\n\n  return text.split(/\\s+/).reduce((result: WordsByLine[], word) => {\n    const wordWidth = wordsWithComputedWidth[word]\n    const currentLine = result[result.length - 1]\n    if (currentLine && currentLine.width + wordWidth + spaceWidth < maxWidth) {\n      // Word can be added to an existing line\n      currentLine.words.push(word)\n      currentLine.width += wordWidth + spaceWidth\n    } else {\n      // Add first word to line or word is too long to scaleToFit on existing line\n      const newLine: WordsByLine = {\n        words: [word],\n        width: wordWidth,\n        showLine: maxHeight\n          ? lineHeight * (result.length + 1) < maxHeight\n          : true,\n      }\n      result.push(newLine)\n    }\n    return result\n  }, [])\n}\n\ntype WordWidths = {\n  wordsWithComputedWidth: Record<string, number>\n  spaceWidth: number\n  lineHeight: number\n}\n\nconst calculateWordWidths = (\n  style?: CSSStyleDeclaration,\n  textNode?: SVGGraphicsElement | null,\n  text?: string,\n): WordWidths | undefined => {\n  if (style && textNode) {\n    // biome-ignore lint/complexity/noForEach: <explanation>\n    Array.from(style).forEach(key =>\n      textNode.style.setProperty(\n        key,\n        style.getPropertyValue(key),\n        style.getPropertyPriority(key),\n      ),\n    )\n    const wordArray = [...new Set(String(text).split(/\\s+/))]\n    const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {\n      textNode.textContent = word\n      // biome-ignore lint/performance/noAccumulatingSpread: <explanation>\n      return { ...wordMap, [word]: textNode.getBBox().width }\n    }, {})\n\n    textNode.textContent = '\\u00A0'\n\n    const spaceWidth =\n      (textNode as SVGTextContentElement)?.getComputedTextLength?.() || 8\n    const lineHeight = textNode.getBBox().height\n\n    textNode.setAttribute('style', '')\n    return { wordsWithComputedWidth, spaceWidth, lineHeight }\n  }\n  return undefined\n}\n\ntype TextProps = Partial<HTMLOrSVGElement> & {\n  className?: string\n  dx?: number\n  dy?: number\n  maxHeight?: number\n  maxWidth?: number\n  transform?: string\n  text: string\n  textAnchor?: React.CSSProperties['textAnchor']\n  verticalAnchor?: 'start' | 'middle' | 'end'\n  x?: number\n  y?: number\n}\n\nconst Text = (props: TextProps) => {\n  const {\n    className = '',\n    dx = 0,\n    dy = 0,\n    maxHeight = 1000,\n    maxWidth = 1000,\n    // textAnchor = 'start',\n    text = '',\n    verticalAnchor = 'start',\n    x = 0,\n    y = 0,\n    transform = '',\n    ...rest\n  } = props\n  const [wordWidths, setWordWidths] = useState<WordWidths>()\n  const [textLines, setTextLines] = useState<WordsByLine[]>([])\n  const [style, setComputedStyle] = useState<CSSStyleDeclaration>()\n  const measureRef = useRef<SVGSVGElement | HTMLElement>({} as HTMLElement)\n\n  const displayedLines: WordsByLine[] = useMemo(() => {\n    const result = textLines.filter(({ showLine }) => showLine)\n    return result.length\n      ? result\n      : text\n          .split(/\\n/)\n          .map(line => ({ words: [line], width: 0, showLine: true }))\n  }, [textLines, text])\n\n  const ref: React.LegacyRef<SVGTextElement> = useCallback(\n    (node: SVGTextElement | null) => {\n      setComputedStyle(\n        node !== null ? window.getComputedStyle(node) : undefined,\n      )\n    },\n    [],\n  )\n\n  useEffect(() => {\n    const el = document.getElementById(MEASUREMENT_ELEMENT_ID)\n    if (el === null) {\n      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n      svg.setAttribute('id', MEASUREMENT_ELEMENT_ID)\n      document.body.appendChild(svg)\n      svg.appendChild(\n        document.createElementNS('http://www.w3.org/2000/svg', 'text'),\n      )\n      measureRef.current = svg\n      return () => {\n        document.body.removeChild(svg)\n      }\n    }\n    measureRef.current = el\n  }, [])\n\n  useEffect(() => {\n    const wordWithWidths = calculateWordWidths(\n      style,\n      measureRef.current as SVGGraphicsElement | null,\n      text,\n    )\n\n    setWordWidths(wordWithWidths)\n  }, [text, style])\n\n  useEffect(() => {\n    if (maxWidth && wordWidths) {\n      const lines = text\n        .split(/\\n/)\n        .flatMap(line =>\n          calculateWordsByLines(line, wordWidths, maxWidth, maxHeight),\n        )\n\n      setTextLines(lines)\n    }\n  }, [maxHeight, maxWidth, wordWidths, text])\n\n  const startDy = useMemo(() => {\n    if (wordWidths?.lineHeight) {\n      switch (verticalAnchor) {\n        case 'start':\n          return wordWidths.lineHeight\n\n        case 'middle':\n          return -(((displayedLines.length - 1) * wordWidths.lineHeight) / 2)\n\n        default:\n          return -(displayedLines.length - 1) * wordWidths.lineHeight\n      }\n    }\n    return 0\n  }, [displayedLines.length, verticalAnchor, wordWidths?.lineHeight])\n\n  return (\n    <text\n      className={className}\n      ref={ref}\n      dx={dx}\n      dy={dy}\n      x={x}\n      y={y}\n      // textAnchor={textAnchor}\n      transform={transform}\n      {...rest}>\n      <>\n        {displayedLines.map((line, idx) => (\n          <tspan\n            dx={x + dx}\n            dy={idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0}\n            key={idx}\n            x={0}>\n            {line.words.join(' ')}\n          </tspan>\n        ))}\n        {textLines.length && displayedLines.length !== textLines.length && (\n          <>\n            <tspan>...</tspan>\n            <title>{text}</title>\n          </>\n        )}\n      </>\n    </text>\n  )\n}\n\nexport default Text\n\nexport { MEASUREMENT_ELEMENT_ID }\n\nexport type { TextProps, WordWidths, WordsByLine }\n","import { useRef } from 'react'\nimport useComponentSize from '../hooks/useComponentSize'\nimport DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'\nimport SVGText from '../other/SVGText'\nimport type { Option } from './Select'\n\nconst RESPONSE_CURVE_0 = 0\nconst RESPONSE_CURVE_1 = 1\nconst RESPONSE_CURVE_2 = 2\nconst RESPONSE_CURVE_3 = 3\nconst RESPONSE_CURVE_4 = 4\nconst RESPONSE_CURVE_5 = 5\nconst RESPONSE_CURVE_6 = 6\nconst RESPONSE_CURVE_7 = 7\n\ntype Curve =\n  | typeof RESPONSE_CURVE_0\n  | typeof RESPONSE_CURVE_1\n  | typeof RESPONSE_CURVE_2\n  | typeof RESPONSE_CURVE_3\n  | typeof RESPONSE_CURVE_4\n  | typeof RESPONSE_CURVE_5\n  | typeof RESPONSE_CURVE_6\n  | typeof RESPONSE_CURVE_7\n\ntype ResponseCurve = {\n  value: Curve\n  label: React.ReactNode\n  c1: number\n  c2: number\n  x1: number\n  y1: number\n  x2: number\n  y2: number\n  labelX: number\n  labelY: number\n}\n\nconst RESPONSE_CURVES: Option<Curve>[] = [\n  {\n    value: RESPONSE_CURVE_7,\n    label: 'Always maxed out.',\n  },\n  {\n    value: RESPONSE_CURVE_6,\n    label: 'Most sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_5,\n    label: 'Moderately sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_4,\n    label: 'A little sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_0,\n    label: 'Linear, no change.',\n  },\n  {\n    value: RESPONSE_CURVE_1,\n    label: 'A little less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_2,\n    label: 'Even less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_3,\n    label: 'Least sensitive.',\n  },\n]\n\n// const width = 218\n// const height = 150\nconst axisOffset = 20\nconst buttonSize = 15\n\nconst axisX1 = axisOffset\nconst axisY1 = axisOffset\n\ntype ResponseCurveProps = {\n  autosize: boolean\n  disabled?: boolean\n  inverted: boolean\n  onChange: (event: { target: { value: Curve } }) => void\n  Tooltip: React.FC<TooltipProps>\n  value: Curve\n}\n\nconst ResponseCurve = (props: ResponseCurveProps) => {\n  const {\n    Tooltip = DefaultTooltip,\n    autosize,\n    disabled,\n    inverted,\n    onChange,\n    value: responseCurve,\n  } = props\n\n  const ref = useRef(null)\n  const svgRef = useRef(null)\n  const { height: ourHeight, width: ourWidth } = useComponentSize(ref)\n\n  const width = autosize ? ourWidth || 218 : 218\n  const height = autosize ? ourHeight || 150 : 150\n\n  const axisX2 = width - axisOffset\n  const axisY2 = height - axisOffset\n\n  const xMid = width / 2\n  const yMid = height / 2\n\n  const svgProps = { ref: svgRef }\n\n  const responseCurves = RESPONSE_CURVES.map(\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>\n    ({ value, label }): ResponseCurve => {\n      let c1 = 0\n      let c2 = 0\n      let x1 = axisX1\n      let y1 = inverted ? axisY1 : axisY2\n      let x2 = axisX2\n      let y2 = inverted ? axisY2 : axisY1\n      let labelX = xMid\n      let labelY = yMid\n      switch (value) {\n        case RESPONSE_CURVE_0:\n          c1 = xMid\n          c2 = yMid\n          labelY += 3\n\n          break\n        case RESPONSE_CURVE_1:\n          c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13\n          c2 = yMid - height * 0.13\n          labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1\n          labelY = yMid - height * 0.09\n          break\n\n        case RESPONSE_CURVE_2:\n          c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25\n          c2 = yMid - height * 0.25\n          labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2\n          labelY = yMid - height * 0.17\n          break\n\n        case RESPONSE_CURVE_3:\n          c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35\n          c2 = yMid - height * 0.35\n          labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28\n          labelY = yMid - height * 0.25\n          break\n\n        case RESPONSE_CURVE_4:\n          c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13\n          c2 = yMid + height * 0.13\n          labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1\n          labelY = yMid + height * 0.1\n          break\n\n        case RESPONSE_CURVE_5:\n          c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25\n          c2 = yMid + height * 0.25\n          labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2\n          labelY = yMid + height * 0.18\n          break\n\n        case RESPONSE_CURVE_6:\n          c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35\n          c2 = yMid + height * 0.35\n          labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28\n          labelY = yMid + height * 0.25\n          break\n\n        case RESPONSE_CURVE_7:\n          x1 = inverted ? axisX1 : axisX2\n          y1 = axisY1\n          x2 = x1\n          y2 = axisY2\n          c1 = x1\n          c2 = yMid\n          labelX = x1 - 5\n          labelY = height - 30\n          break\n\n        default:\n          break\n      }\n      return {\n        value,\n        label,\n        c1,\n        c2,\n        x1,\n        y1,\n        x2,\n        y2,\n        labelX,\n        labelY,\n      }\n    },\n  )\n\n  return (\n    <div\n      className=\"response-curve-picker\"\n      ref={ref}>\n      <svg {...svgProps}>\n        <rect\n          className=\"container\"\n          height={height}\n          rx={3}\n          ry={3}\n          width={width}\n          x={0}\n          y={0}\n        />\n\n        <SVGText\n          className=\"axis\"\n          textAnchor=\"middle\"\n          transform={`translate(${axisX1 - 14} ${height / 2}) rotate(90)`}\n          x={0}\n          y={0}\n          text=\"Applied force\"\n        />\n\n        <SVGText\n          className=\"axis\"\n          textAnchor=\"middle\"\n          transform={`translate(${width / 2} ${axisY2 + 13})`}\n          x={0}\n          y={0}\n          text=\"Output (velocity)\"\n        />\n\n        <line\n          className=\"axis\"\n          x1={axisX1}\n          x2={axisX1}\n          y1={axisY1}\n          y2={axisY2}\n        />\n        <line\n          className=\"axis\"\n          x1={axisX1}\n          x2={axisX2}\n          y1={axisY2}\n          y2={axisY2}\n        />\n\n        {responseCurves.map(\n          ({ value, label, x1, y1, x2, y2, c1, c2, labelX, labelY }) => (\n            <g key={value}>\n              <path\n                className={value === responseCurve ? 'curve-selected' : 'curve'}\n                d={`M${x1} ${y1} C ${c1} ${c2}, ${c1} ${c2}, ${x2} ${y2}`}\n              />\n\n              <Tooltip\n                placement=\"left\"\n                title={label}>\n                <rect\n                  className={\n                    value === responseCurve ? 'button-selected' : 'button'\n                  }\n                  height={buttonSize}\n                  onClick={\n                    disabled\n                      ? f => f\n                      : () =>\n                          onChange({\n                            target: {\n                              value: Number.parseInt(String(value)) as Curve,\n                            },\n                          })\n                  }\n                  transform={`translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`}\n                  width={buttonSize}\n                />\n              </Tooltip>\n\n              <text\n                className={\n                  value === responseCurve ? 'button-selected' : 'button'\n                }\n                transform={`translate(${labelX} ${labelY})`}>\n                {value}\n                <title>{label}</title>\n              </text>\n            </g>\n          ),\n        )}\n      </svg>\n    </div>\n  )\n}\n\nexport default ResponseCurve\n\nexport { RESPONSE_CURVES }\n\nexport type { Curve, ResponseCurve, ResponseCurveProps }\n"],"names":["Statuses","MASK_CHANNEL","MASK_STATUS","statusOptions","getStatusLabel","val","_a","value","combineStatusWithChannel","channel","status","extractStatusAndChannel","MEASUREMENT_ELEMENT_ID","RESPONSE_CURVE_0","RESPONSE_CURVE_1","RESPONSE_CURVE_2","RESPONSE_CURVE_3","RESPONSE_CURVE_4","RESPONSE_CURVE_5","RESPONSE_CURVE_6","RESPONSE_CURVE_7","RESPONSE_CURVES"],"mappings":"8HAEA,MAAMA,EAAW,CACf,QAAS,EACT,OAAQ,EACR,WAAY,GACZ,cAAe,GACf,cAAe,GACf,gBAAiB,GACjB,WAAY,EACd,EAIMC,EAAe,GACfC,EAAc,IAEdC,EAAkC,CACtC,CAAE,MAAOH,EAAS,OAAQ,MAAO,SAAU,EAC3C,CAAE,MAAOA,EAAS,QAAS,MAAO,YAAa,EAC/C,CAAE,MAAOA,EAAS,cAAe,MAAO,gBAAiB,EACzD,CAAE,MAAOA,EAAS,cAAe,MAAO,gBAAiB,EACzD,CAAE,MAAOA,EAAS,WAAY,MAAO,YAAa,EAClD,CAAE,MAAOA,EAAS,gBAAiB,MAAO,kBAAmB,EAC7D,CAAE,MAAOA,EAAS,WAAY,MAAO,aAAc,CACrD,EAEMI,EAAkBC,UACtB,QAAAC,EAAAH,EAAc,OAAO,CAAC,CAAE,MAAAI,CAAM,IAAMA,IAAUF,CAAG,EAAE,CAAC,IAApD,YAAAC,EAAuD,QAAS,OAE5DE,EAA2B,CAACC,EAAiBC,IACjDD,EAAWC,GAAU,EAEjBC,EACJD,IAII,CACJ,QAAWA,EAASR,IAAgB,EAAK,EACzC,QAASQ,EAAST,CACpB,GCvCMW,EAAyB,kCCIzBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EAyBnBC,EAAmC,CACvC,CACE,MAAOD,EACP,MAAO,mBACT,EACA,CACE,MAAOD,EACP,MAAO,iBACT,EACA,CACE,MAAOD,EACP,MAAO,uBACT,EACA,CACE,MAAOD,EACP,MAAO,qBACT,EACA,CACE,MAAOJ,EACP,MAAO,oBACT,EACA,CACE,MAAOC,EACP,MAAO,0BACT,EACA,CACE,MAAOC,EACP,MAAO,sBACT,EACA,CACE,MAAOC,EACP,MAAO,kBAAA,CAEX"}
+{"version":3,"file":"index.cjs.js","sources":["../lib/midi/export.ts","../lib/other/SVGText.tsx"],"sourcesContent":["import type { Option } from 'lib/pickers/Select'\n\nconst Statuses = {\n  noteOff: 8, // 1000\n  noteOn: 9, // 1001\n  aftertouch: 10, // 1010\n  controlChange: 11, // 1011\n  programChange: 12, // 1100\n  channelPressure: 13, // 1101\n  pitchWheel: 14, // 1110\n} as const\n\ntype Status = (typeof Statuses)[keyof typeof Statuses]\n\nconst MASK_CHANNEL = 15 // 00001111\nconst MASK_STATUS = 240 // 01110000\n\nconst statusOptions: Option<Status>[] = [\n  { value: Statuses.noteOn, label: 'Note On' },\n  { value: Statuses.noteOff, label: 'Note Stack' },\n  { value: Statuses.controlChange, label: 'Control Change' },\n  { value: Statuses.programChange, label: 'Program Change' },\n  { value: Statuses.aftertouch, label: 'Aftertouch' },\n  { value: Statuses.channelPressure, label: 'Channel Pressure' },\n  { value: Statuses.pitchWheel, label: 'Pitch Wheel' },\n]\n\nconst getStatusLabel = (val: Status) =>\n  statusOptions.filter(({ value }) => value === val)[0]?.label || '???'\n\nconst combineStatusWithChannel = (channel: number, status: Status) =>\n  channel | (status << 4)\n\nconst extractStatusAndChannel = (\n  status: number,\n): {\n  status: Status\n  channel: number\n} => ({\n  status: (((status & MASK_STATUS) >> 4) | 8) as Status,\n  channel: status & MASK_CHANNEL,\n})\n\nconst RESPONSE_CURVE_0 = 0\nconst RESPONSE_CURVE_1 = 1\nconst RESPONSE_CURVE_2 = 2\nconst RESPONSE_CURVE_3 = 3\nconst RESPONSE_CURVE_4 = 4\nconst RESPONSE_CURVE_5 = 5\nconst RESPONSE_CURVE_6 = 6\nconst RESPONSE_CURVE_7 = 7\n\ntype Curve =\n  | typeof RESPONSE_CURVE_0\n  | typeof RESPONSE_CURVE_1\n  | typeof RESPONSE_CURVE_2\n  | typeof RESPONSE_CURVE_3\n  | typeof RESPONSE_CURVE_4\n  | typeof RESPONSE_CURVE_5\n  | typeof RESPONSE_CURVE_6\n  | typeof RESPONSE_CURVE_7\n\nconst responseCurves: Option<Curve>[] = [\n  {\n    value: RESPONSE_CURVE_7,\n    label: 'Always maxed out.',\n  },\n  {\n    value: RESPONSE_CURVE_6,\n    label: 'Most sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_5,\n    label: 'Moderately sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_4,\n    label: 'A little sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_0,\n    label: 'Linear, no change.',\n  },\n  {\n    value: RESPONSE_CURVE_1,\n    label: 'A little less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_2,\n    label: 'Even less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_3,\n    label: 'Least sensitive.',\n  },\n]\n\nexport {\n  combineStatusWithChannel,\n  extractStatusAndChannel,\n  getStatusLabel,\n  MASK_CHANNEL,\n  MASK_STATUS,\n  responseCurves,\n  Statuses,\n  statusOptions,\n}\n\nexport type { Curve, Status }\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nconst MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id'\n\ntype WordsByLine = {\n  words: string[]\n  width: number\n  showLine: boolean\n}\n\nconst calculateWordsByLines = (\n  text: string,\n  wordWidths: WordWidths,\n  maxWidth: number,\n  maxHeight: number,\n) => {\n  const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths\n\n  return text.split(/\\s+/).reduce((result: WordsByLine[], word) => {\n    const wordWidth = wordsWithComputedWidth[word]\n    const currentLine = result[result.length - 1]\n    if (currentLine && currentLine.width + wordWidth + spaceWidth < maxWidth) {\n      // Word can be added to an existing line\n      currentLine.words.push(word)\n      currentLine.width += wordWidth + spaceWidth\n    } else {\n      // Add first word to line or word is too long to scaleToFit on existing line\n      const newLine: WordsByLine = {\n        words: [word],\n        width: wordWidth,\n        showLine: maxHeight\n          ? lineHeight * (result.length + 1) < maxHeight\n          : true,\n      }\n      result.push(newLine)\n    }\n    return result\n  }, [])\n}\n\ntype WordWidths = {\n  wordsWithComputedWidth: Record<string, number>\n  spaceWidth: number\n  lineHeight: number\n}\n\nconst calculateWordWidths = (\n  style?: CSSStyleDeclaration,\n  textNode?: SVGGraphicsElement | null,\n  text?: string,\n): WordWidths | undefined => {\n  if (style && textNode) {\n    // biome-ignore lint/complexity/noForEach: <explanation>\n    Array.from(style).forEach(key =>\n      textNode.style.setProperty(\n        key,\n        style.getPropertyValue(key),\n        style.getPropertyPriority(key),\n      ),\n    )\n    const wordArray = [...new Set(String(text).split(/\\s+/))]\n    const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {\n      textNode.textContent = word\n      // biome-ignore lint/performance/noAccumulatingSpread: <explanation>\n      return { ...wordMap, [word]: textNode.getBBox().width }\n    }, {})\n\n    textNode.textContent = '\\u00A0'\n\n    const spaceWidth =\n      (textNode as SVGTextContentElement)?.getComputedTextLength?.() || 8\n    const lineHeight = textNode.getBBox().height\n\n    textNode.setAttribute('style', '')\n    return { wordsWithComputedWidth, spaceWidth, lineHeight }\n  }\n  return undefined\n}\n\ntype TextProps = Partial<HTMLOrSVGElement> & {\n  className?: string\n  dx?: number\n  dy?: number\n  maxHeight?: number\n  maxWidth?: number\n  transform?: string\n  text: string\n  textAnchor?: React.CSSProperties['textAnchor']\n  verticalAnchor?: 'start' | 'middle' | 'end'\n  x?: number\n  y?: number\n}\n\nconst Text = (props: TextProps) => {\n  const {\n    className = '',\n    dx = 0,\n    dy = 0,\n    maxHeight = 1000,\n    maxWidth = 1000,\n    // textAnchor = 'start',\n    text = '',\n    verticalAnchor = 'start',\n    x = 0,\n    y = 0,\n    transform = '',\n    ...rest\n  } = props\n  const [wordWidths, setWordWidths] = useState<WordWidths>()\n  const [textLines, setTextLines] = useState<WordsByLine[]>([])\n  const [style, setComputedStyle] = useState<CSSStyleDeclaration>()\n  const measureRef = useRef<SVGSVGElement | HTMLElement>({} as HTMLElement)\n\n  const displayedLines: WordsByLine[] = useMemo(() => {\n    const result = textLines.filter(({ showLine }) => showLine)\n    return result.length\n      ? result\n      : text\n          .split(/\\n/)\n          .map(line => ({ words: [line], width: 0, showLine: true }))\n  }, [textLines, text])\n\n  const ref: React.LegacyRef<SVGTextElement> = useCallback(\n    (node: SVGTextElement | null) => {\n      setComputedStyle(\n        node !== null ? window.getComputedStyle(node) : undefined,\n      )\n    },\n    [],\n  )\n\n  useEffect(() => {\n    const el = document.getElementById(MEASUREMENT_ELEMENT_ID)\n    if (el === null) {\n      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n      svg.setAttribute('id', MEASUREMENT_ELEMENT_ID)\n      document.body.appendChild(svg)\n      svg.appendChild(\n        document.createElementNS('http://www.w3.org/2000/svg', 'text'),\n      )\n      measureRef.current = svg\n      return () => {\n        document.body.removeChild(svg)\n      }\n    }\n    measureRef.current = el\n  }, [])\n\n  useEffect(() => {\n    const wordWithWidths = calculateWordWidths(\n      style,\n      measureRef.current as SVGGraphicsElement | null,\n      text,\n    )\n\n    setWordWidths(wordWithWidths)\n  }, [text, style])\n\n  useEffect(() => {\n    if (maxWidth && wordWidths) {\n      const lines = text\n        .split(/\\n/)\n        .flatMap(line =>\n          calculateWordsByLines(line, wordWidths, maxWidth, maxHeight),\n        )\n\n      setTextLines(lines)\n    }\n  }, [maxHeight, maxWidth, wordWidths, text])\n\n  const startDy = useMemo(() => {\n    if (wordWidths?.lineHeight) {\n      switch (verticalAnchor) {\n        case 'start':\n          return wordWidths.lineHeight\n\n        case 'middle':\n          return -(((displayedLines.length - 1) * wordWidths.lineHeight) / 2)\n\n        default:\n          return -(displayedLines.length - 1) * wordWidths.lineHeight\n      }\n    }\n    return 0\n  }, [displayedLines.length, verticalAnchor, wordWidths?.lineHeight])\n\n  return (\n    <text\n      className={className}\n      ref={ref}\n      dx={dx}\n      dy={dy}\n      x={x}\n      y={y}\n      // textAnchor={textAnchor}\n      transform={transform}\n      {...rest}>\n      <>\n        {displayedLines.map((line, idx) => (\n          <tspan\n            dx={x + dx}\n            dy={idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0}\n            key={idx}\n            x={0}>\n            {line.words.join(' ')}\n          </tspan>\n        ))}\n        {textLines.length && displayedLines.length !== textLines.length && (\n          <>\n            <tspan>...</tspan>\n            <title>{text}</title>\n          </>\n        )}\n      </>\n    </text>\n  )\n}\n\nexport default Text\n\nexport { MEASUREMENT_ELEMENT_ID }\n\nexport type { TextProps, WordWidths, WordsByLine }\n"],"names":["Statuses","MASK_CHANNEL","MASK_STATUS","statusOptions","getStatusLabel","val","_a","value","combineStatusWithChannel","channel","status","extractStatusAndChannel","RESPONSE_CURVE_0","RESPONSE_CURVE_1","RESPONSE_CURVE_2","RESPONSE_CURVE_3","RESPONSE_CURVE_4","RESPONSE_CURVE_5","RESPONSE_CURVE_6","RESPONSE_CURVE_7","responseCurves","MEASUREMENT_ELEMENT_ID"],"mappings":"8HAEA,MAAMA,EAAW,CACf,QAAS,EACT,OAAQ,EACR,WAAY,GACZ,cAAe,GACf,cAAe,GACf,gBAAiB,GACjB,WAAY,EACd,EAIMC,EAAe,GACfC,EAAc,IAEdC,EAAkC,CACtC,CAAE,MAAOH,EAAS,OAAQ,MAAO,SAAU,EAC3C,CAAE,MAAOA,EAAS,QAAS,MAAO,YAAa,EAC/C,CAAE,MAAOA,EAAS,cAAe,MAAO,gBAAiB,EACzD,CAAE,MAAOA,EAAS,cAAe,MAAO,gBAAiB,EACzD,CAAE,MAAOA,EAAS,WAAY,MAAO,YAAa,EAClD,CAAE,MAAOA,EAAS,gBAAiB,MAAO,kBAAmB,EAC7D,CAAE,MAAOA,EAAS,WAAY,MAAO,aAAc,CACrD,EAEMI,EAAkBC,UACtB,QAAAC,EAAAH,EAAc,OAAO,CAAC,CAAE,MAAAI,CAAM,IAAMA,IAAUF,CAAG,EAAE,CAAC,IAApD,YAAAC,EAAuD,QAAS,OAE5DE,EAA2B,CAACC,EAAiBC,IACjDD,EAAWC,GAAU,EAEjBC,EACJD,IAII,CACJ,QAAWA,EAASR,IAAgB,EAAK,EACzC,QAASQ,EAAST,CACpB,GAEMW,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EACnBC,EAAmB,EAYnBC,EAAkC,CACtC,CACE,MAAOD,EACP,MAAO,mBACT,EACA,CACE,MAAOD,EACP,MAAO,iBACT,EACA,CACE,MAAOD,EACP,MAAO,uBACT,EACA,CACE,MAAOD,EACP,MAAO,qBACT,EACA,CACE,MAAOJ,EACP,MAAO,oBACT,EACA,CACE,MAAOC,EACP,MAAO,0BACT,EACA,CACE,MAAOC,EACP,MAAO,sBACT,EACA,CACE,MAAOC,EACP,MAAO,kBAAA,CAEX,EC7FMM,EAAyB"}

package/dist/index.es.js

@@ -23,15 +23,15 @@ const e = {
   { value: e.aftertouch, label: "Aftertouch" },
   { value: e.channelPressure, label: "Channel Pressure" },
   { value: e.pitchWheel, label: "Pitch Wheel" }
-], R = (t) => {
+], b = (t) => {
   var l;
   return ((l = o.filter(({ value: a }) => a === t)[0]) == null ? void 0 : l.label) || "???";
-}, b = (t, l) => t | l << 4, N = (t) => ({
+}, R = (t, l) => t | l << 4, N = (t) => ({
   status: (t & s) >> 4 | 8,
   channel: t & n
-}), O = "__react_svg_text_measurement_id", E = 0, c = 1, S = 2, u = 3, r = 4, _ = 5, i = 6, h = 7, P = [
+}), c = 0, E = 1, r = 2, u = 3, S = 4, _ = 5, i = 6, v = 7, O = [
   {
-    value: h,
+    value: v,
     label: "Always maxed out."
   },
   {
@@ -43,35 +43,35 @@ const e = {
     label: "Moderately sensitive."
   },
   {
-    value: r,
+    value: S,
     label: "A little sensitive."
   },
   {
-    value: E,
+    value: c,
     label: "Linear, no change."
   },
   {
-    value: c,
+    value: E,
     label: "A little less sensitive."
   },
   {
-    value: S,
+    value: r,
     label: "Even less sensitive."
   },
   {
     value: u,
     label: "Least sensitive."
   }
-];
+], P = "__react_svg_text_measurement_id";
 export {
   n as MASK_CHANNEL,
   s as MASK_STATUS,
-  O as MEASUREMENT_ELEMENT_ID,
-  P as RESPONSE_CURVES,
+  P as MEASUREMENT_ELEMENT_ID,
   e as Statuses,
-  b as combineStatusWithChannel,
+  R as combineStatusWithChannel,
   N as extractStatusAndChannel,
-  R as getStatusLabel,
+  b as getStatusLabel,
+  O as responseCurves,
   o as statusOptions
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../lib/midi/export.ts","../lib/other/SVGText.tsx","../lib/pickers/ResponseCurve.tsx"],"sourcesContent":["import type { Option } from 'lib/pickers/Select'\n\nconst Statuses = {\n  noteOff: 8, // 1000\n  noteOn: 9, // 1001\n  aftertouch: 10, // 1010\n  controlChange: 11, // 1011\n  programChange: 12, // 1100\n  channelPressure: 13, // 1101\n  pitchWheel: 14, // 1110\n} as const\n\ntype Status = (typeof Statuses)[keyof typeof Statuses]\n\nconst MASK_CHANNEL = 15 // 00001111\nconst MASK_STATUS = 240 // 01110000\n\nconst statusOptions: Option<Status>[] = [\n  { value: Statuses.noteOn, label: 'Note On' },\n  { value: Statuses.noteOff, label: 'Note Stack' },\n  { value: Statuses.controlChange, label: 'Control Change' },\n  { value: Statuses.programChange, label: 'Program Change' },\n  { value: Statuses.aftertouch, label: 'Aftertouch' },\n  { value: Statuses.channelPressure, label: 'Channel Pressure' },\n  { value: Statuses.pitchWheel, label: 'Pitch Wheel' },\n]\n\nconst getStatusLabel = (val: Status) =>\n  statusOptions.filter(({ value }) => value === val)[0]?.label || '???'\n\nconst combineStatusWithChannel = (channel: number, status: Status) =>\n  channel | (status << 4)\n\nconst extractStatusAndChannel = (\n  status: number,\n): {\n  status: Status\n  channel: number\n} => ({\n  status: (((status & MASK_STATUS) >> 4) | 8) as Status,\n  channel: status & MASK_CHANNEL,\n})\n\nexport {\n  combineStatusWithChannel,\n  extractStatusAndChannel,\n  getStatusLabel,\n  MASK_CHANNEL,\n  MASK_STATUS,\n  statusOptions,\n  Statuses,\n  type Status,\n}\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nconst MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id'\n\ntype WordsByLine = {\n  words: string[]\n  width: number\n  showLine: boolean\n}\n\nconst calculateWordsByLines = (\n  text: string,\n  wordWidths: WordWidths,\n  maxWidth: number,\n  maxHeight: number,\n) => {\n  const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths\n\n  return text.split(/\\s+/).reduce((result: WordsByLine[], word) => {\n    const wordWidth = wordsWithComputedWidth[word]\n    const currentLine = result[result.length - 1]\n    if (currentLine && currentLine.width + wordWidth + spaceWidth < maxWidth) {\n      // Word can be added to an existing line\n      currentLine.words.push(word)\n      currentLine.width += wordWidth + spaceWidth\n    } else {\n      // Add first word to line or word is too long to scaleToFit on existing line\n      const newLine: WordsByLine = {\n        words: [word],\n        width: wordWidth,\n        showLine: maxHeight\n          ? lineHeight * (result.length + 1) < maxHeight\n          : true,\n      }\n      result.push(newLine)\n    }\n    return result\n  }, [])\n}\n\ntype WordWidths = {\n  wordsWithComputedWidth: Record<string, number>\n  spaceWidth: number\n  lineHeight: number\n}\n\nconst calculateWordWidths = (\n  style?: CSSStyleDeclaration,\n  textNode?: SVGGraphicsElement | null,\n  text?: string,\n): WordWidths | undefined => {\n  if (style && textNode) {\n    // biome-ignore lint/complexity/noForEach: <explanation>\n    Array.from(style).forEach(key =>\n      textNode.style.setProperty(\n        key,\n        style.getPropertyValue(key),\n        style.getPropertyPriority(key),\n      ),\n    )\n    const wordArray = [...new Set(String(text).split(/\\s+/))]\n    const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {\n      textNode.textContent = word\n      // biome-ignore lint/performance/noAccumulatingSpread: <explanation>\n      return { ...wordMap, [word]: textNode.getBBox().width }\n    }, {})\n\n    textNode.textContent = '\\u00A0'\n\n    const spaceWidth =\n      (textNode as SVGTextContentElement)?.getComputedTextLength?.() || 8\n    const lineHeight = textNode.getBBox().height\n\n    textNode.setAttribute('style', '')\n    return { wordsWithComputedWidth, spaceWidth, lineHeight }\n  }\n  return undefined\n}\n\ntype TextProps = Partial<HTMLOrSVGElement> & {\n  className?: string\n  dx?: number\n  dy?: number\n  maxHeight?: number\n  maxWidth?: number\n  transform?: string\n  text: string\n  textAnchor?: React.CSSProperties['textAnchor']\n  verticalAnchor?: 'start' | 'middle' | 'end'\n  x?: number\n  y?: number\n}\n\nconst Text = (props: TextProps) => {\n  const {\n    className = '',\n    dx = 0,\n    dy = 0,\n    maxHeight = 1000,\n    maxWidth = 1000,\n    // textAnchor = 'start',\n    text = '',\n    verticalAnchor = 'start',\n    x = 0,\n    y = 0,\n    transform = '',\n    ...rest\n  } = props\n  const [wordWidths, setWordWidths] = useState<WordWidths>()\n  const [textLines, setTextLines] = useState<WordsByLine[]>([])\n  const [style, setComputedStyle] = useState<CSSStyleDeclaration>()\n  const measureRef = useRef<SVGSVGElement | HTMLElement>({} as HTMLElement)\n\n  const displayedLines: WordsByLine[] = useMemo(() => {\n    const result = textLines.filter(({ showLine }) => showLine)\n    return result.length\n      ? result\n      : text\n          .split(/\\n/)\n          .map(line => ({ words: [line], width: 0, showLine: true }))\n  }, [textLines, text])\n\n  const ref: React.LegacyRef<SVGTextElement> = useCallback(\n    (node: SVGTextElement | null) => {\n      setComputedStyle(\n        node !== null ? window.getComputedStyle(node) : undefined,\n      )\n    },\n    [],\n  )\n\n  useEffect(() => {\n    const el = document.getElementById(MEASUREMENT_ELEMENT_ID)\n    if (el === null) {\n      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n      svg.setAttribute('id', MEASUREMENT_ELEMENT_ID)\n      document.body.appendChild(svg)\n      svg.appendChild(\n        document.createElementNS('http://www.w3.org/2000/svg', 'text'),\n      )\n      measureRef.current = svg\n      return () => {\n        document.body.removeChild(svg)\n      }\n    }\n    measureRef.current = el\n  }, [])\n\n  useEffect(() => {\n    const wordWithWidths = calculateWordWidths(\n      style,\n      measureRef.current as SVGGraphicsElement | null,\n      text,\n    )\n\n    setWordWidths(wordWithWidths)\n  }, [text, style])\n\n  useEffect(() => {\n    if (maxWidth && wordWidths) {\n      const lines = text\n        .split(/\\n/)\n        .flatMap(line =>\n          calculateWordsByLines(line, wordWidths, maxWidth, maxHeight),\n        )\n\n      setTextLines(lines)\n    }\n  }, [maxHeight, maxWidth, wordWidths, text])\n\n  const startDy = useMemo(() => {\n    if (wordWidths?.lineHeight) {\n      switch (verticalAnchor) {\n        case 'start':\n          return wordWidths.lineHeight\n\n        case 'middle':\n          return -(((displayedLines.length - 1) * wordWidths.lineHeight) / 2)\n\n        default:\n          return -(displayedLines.length - 1) * wordWidths.lineHeight\n      }\n    }\n    return 0\n  }, [displayedLines.length, verticalAnchor, wordWidths?.lineHeight])\n\n  return (\n    <text\n      className={className}\n      ref={ref}\n      dx={dx}\n      dy={dy}\n      x={x}\n      y={y}\n      // textAnchor={textAnchor}\n      transform={transform}\n      {...rest}>\n      <>\n        {displayedLines.map((line, idx) => (\n          <tspan\n            dx={x + dx}\n            dy={idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0}\n            key={idx}\n            x={0}>\n            {line.words.join(' ')}\n          </tspan>\n        ))}\n        {textLines.length && displayedLines.length !== textLines.length && (\n          <>\n            <tspan>...</tspan>\n            <title>{text}</title>\n          </>\n        )}\n      </>\n    </text>\n  )\n}\n\nexport default Text\n\nexport { MEASUREMENT_ELEMENT_ID }\n\nexport type { TextProps, WordWidths, WordsByLine }\n","import { useRef } from 'react'\nimport useComponentSize from '../hooks/useComponentSize'\nimport DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'\nimport SVGText from '../other/SVGText'\nimport type { Option } from './Select'\n\nconst RESPONSE_CURVE_0 = 0\nconst RESPONSE_CURVE_1 = 1\nconst RESPONSE_CURVE_2 = 2\nconst RESPONSE_CURVE_3 = 3\nconst RESPONSE_CURVE_4 = 4\nconst RESPONSE_CURVE_5 = 5\nconst RESPONSE_CURVE_6 = 6\nconst RESPONSE_CURVE_7 = 7\n\ntype Curve =\n  | typeof RESPONSE_CURVE_0\n  | typeof RESPONSE_CURVE_1\n  | typeof RESPONSE_CURVE_2\n  | typeof RESPONSE_CURVE_3\n  | typeof RESPONSE_CURVE_4\n  | typeof RESPONSE_CURVE_5\n  | typeof RESPONSE_CURVE_6\n  | typeof RESPONSE_CURVE_7\n\ntype ResponseCurve = {\n  value: Curve\n  label: React.ReactNode\n  c1: number\n  c2: number\n  x1: number\n  y1: number\n  x2: number\n  y2: number\n  labelX: number\n  labelY: number\n}\n\nconst RESPONSE_CURVES: Option<Curve>[] = [\n  {\n    value: RESPONSE_CURVE_7,\n    label: 'Always maxed out.',\n  },\n  {\n    value: RESPONSE_CURVE_6,\n    label: 'Most sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_5,\n    label: 'Moderately sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_4,\n    label: 'A little sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_0,\n    label: 'Linear, no change.',\n  },\n  {\n    value: RESPONSE_CURVE_1,\n    label: 'A little less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_2,\n    label: 'Even less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_3,\n    label: 'Least sensitive.',\n  },\n]\n\n// const width = 218\n// const height = 150\nconst axisOffset = 20\nconst buttonSize = 15\n\nconst axisX1 = axisOffset\nconst axisY1 = axisOffset\n\ntype ResponseCurveProps = {\n  autosize: boolean\n  disabled?: boolean\n  inverted: boolean\n  onChange: (event: { target: { value: Curve } }) => void\n  Tooltip: React.FC<TooltipProps>\n  value: Curve\n}\n\nconst ResponseCurve = (props: ResponseCurveProps) => {\n  const {\n    Tooltip = DefaultTooltip,\n    autosize,\n    disabled,\n    inverted,\n    onChange,\n    value: responseCurve,\n  } = props\n\n  const ref = useRef(null)\n  const svgRef = useRef(null)\n  const { height: ourHeight, width: ourWidth } = useComponentSize(ref)\n\n  const width = autosize ? ourWidth || 218 : 218\n  const height = autosize ? ourHeight || 150 : 150\n\n  const axisX2 = width - axisOffset\n  const axisY2 = height - axisOffset\n\n  const xMid = width / 2\n  const yMid = height / 2\n\n  const svgProps = { ref: svgRef }\n\n  const responseCurves = RESPONSE_CURVES.map(\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>\n    ({ value, label }): ResponseCurve => {\n      let c1 = 0\n      let c2 = 0\n      let x1 = axisX1\n      let y1 = inverted ? axisY1 : axisY2\n      let x2 = axisX2\n      let y2 = inverted ? axisY2 : axisY1\n      let labelX = xMid\n      let labelY = yMid\n      switch (value) {\n        case RESPONSE_CURVE_0:\n          c1 = xMid\n          c2 = yMid\n          labelY += 3\n\n          break\n        case RESPONSE_CURVE_1:\n          c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13\n          c2 = yMid - height * 0.13\n          labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1\n          labelY = yMid - height * 0.09\n          break\n\n        case RESPONSE_CURVE_2:\n          c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25\n          c2 = yMid - height * 0.25\n          labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2\n          labelY = yMid - height * 0.17\n          break\n\n        case RESPONSE_CURVE_3:\n          c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35\n          c2 = yMid - height * 0.35\n          labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28\n          labelY = yMid - height * 0.25\n          break\n\n        case RESPONSE_CURVE_4:\n          c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13\n          c2 = yMid + height * 0.13\n          labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1\n          labelY = yMid + height * 0.1\n          break\n\n        case RESPONSE_CURVE_5:\n          c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25\n          c2 = yMid + height * 0.25\n          labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2\n          labelY = yMid + height * 0.18\n          break\n\n        case RESPONSE_CURVE_6:\n          c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35\n          c2 = yMid + height * 0.35\n          labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28\n          labelY = yMid + height * 0.25\n          break\n\n        case RESPONSE_CURVE_7:\n          x1 = inverted ? axisX1 : axisX2\n          y1 = axisY1\n          x2 = x1\n          y2 = axisY2\n          c1 = x1\n          c2 = yMid\n          labelX = x1 - 5\n          labelY = height - 30\n          break\n\n        default:\n          break\n      }\n      return {\n        value,\n        label,\n        c1,\n        c2,\n        x1,\n        y1,\n        x2,\n        y2,\n        labelX,\n        labelY,\n      }\n    },\n  )\n\n  return (\n    <div\n      className=\"response-curve-picker\"\n      ref={ref}>\n      <svg {...svgProps}>\n        <rect\n          className=\"container\"\n          height={height}\n          rx={3}\n          ry={3}\n          width={width}\n          x={0}\n          y={0}\n        />\n\n        <SVGText\n          className=\"axis\"\n          textAnchor=\"middle\"\n          transform={`translate(${axisX1 - 14} ${height / 2}) rotate(90)`}\n          x={0}\n          y={0}\n          text=\"Applied force\"\n        />\n\n        <SVGText\n          className=\"axis\"\n          textAnchor=\"middle\"\n          transform={`translate(${width / 2} ${axisY2 + 13})`}\n          x={0}\n          y={0}\n          text=\"Output (velocity)\"\n        />\n\n        <line\n          className=\"axis\"\n          x1={axisX1}\n          x2={axisX1}\n          y1={axisY1}\n          y2={axisY2}\n        />\n        <line\n          className=\"axis\"\n          x1={axisX1}\n          x2={axisX2}\n          y1={axisY2}\n          y2={axisY2}\n        />\n\n        {responseCurves.map(\n          ({ value, label, x1, y1, x2, y2, c1, c2, labelX, labelY }) => (\n            <g key={value}>\n              <path\n                className={value === responseCurve ? 'curve-selected' : 'curve'}\n                d={`M${x1} ${y1} C ${c1} ${c2}, ${c1} ${c2}, ${x2} ${y2}`}\n              />\n\n              <Tooltip\n                placement=\"left\"\n                title={label}>\n                <rect\n                  className={\n                    value === responseCurve ? 'button-selected' : 'button'\n                  }\n                  height={buttonSize}\n                  onClick={\n                    disabled\n                      ? f => f\n                      : () =>\n                          onChange({\n                            target: {\n                              value: Number.parseInt(String(value)) as Curve,\n                            },\n                          })\n                  }\n                  transform={`translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`}\n                  width={buttonSize}\n                />\n              </Tooltip>\n\n              <text\n                className={\n                  value === responseCurve ? 'button-selected' : 'button'\n                }\n                transform={`translate(${labelX} ${labelY})`}>\n                {value}\n                <title>{label}</title>\n              </text>\n            </g>\n          ),\n        )}\n      </svg>\n    </div>\n  )\n}\n\nexport default ResponseCurve\n\nexport { RESPONSE_CURVES }\n\nexport type { Curve, ResponseCurve, ResponseCurveProps }\n"],"names":["Statuses","MASK_CHANNEL","MASK_STATUS","statusOptions","getStatusLabel","val","_a","value","combineStatusWithChannel","channel","status","extractStatusAndChannel","MEASUREMENT_ELEMENT_ID","RESPONSE_CURVE_0","RESPONSE_CURVE_1","RESPONSE_CURVE_2","RESPONSE_CURVE_3","RESPONSE_CURVE_4","RESPONSE_CURVE_5","RESPONSE_CURVE_6","RESPONSE_CURVE_7","RESPONSE_CURVES"],"mappings":";;AAEA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA;AAAA,EACT,QAAQ;AAAA;AAAA,EACR,YAAY;AAAA;AAAA,EACZ,eAAe;AAAA;AAAA,EACf,eAAe;AAAA;AAAA,EACf,iBAAiB;AAAA;AAAA,EACjB,YAAY;AAAA;AACd,GAIMC,IAAe,IACfC,IAAc,KAEdC,IAAkC;AAAA,EACtC,EAAE,OAAOH,EAAS,QAAQ,OAAO,UAAU;AAAA,EAC3C,EAAE,OAAOA,EAAS,SAAS,OAAO,aAAa;AAAA,EAC/C,EAAE,OAAOA,EAAS,eAAe,OAAO,iBAAiB;AAAA,EACzD,EAAE,OAAOA,EAAS,eAAe,OAAO,iBAAiB;AAAA,EACzD,EAAE,OAAOA,EAAS,YAAY,OAAO,aAAa;AAAA,EAClD,EAAE,OAAOA,EAAS,iBAAiB,OAAO,mBAAmB;AAAA,EAC7D,EAAE,OAAOA,EAAS,YAAY,OAAO,cAAc;AACrD,GAEMI,IAAiB,CAACC;;AACtB,WAAAC,IAAAH,EAAc,OAAO,CAAC,EAAE,OAAAI,EAAM,MAAMA,MAAUF,CAAG,EAAE,CAAC,MAApD,gBAAAC,EAAuD,UAAS;AAAA,GAE5DE,IAA2B,CAACC,GAAiBC,MACjDD,IAAWC,KAAU,GAEjBC,IAA0B,CAC9BD,OAII;AAAA,EACJ,SAAWA,IAASR,MAAgB,IAAK;AAAA,EACzC,SAASQ,IAAST;AACpB,ICvCMW,IAAyB,mCCIzBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GAyBnBC,IAAmC;AAAA,EACvC;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOJ;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOC;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOC;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOC;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"index.es.js","sources":["../lib/midi/export.ts","../lib/other/SVGText.tsx"],"sourcesContent":["import type { Option } from 'lib/pickers/Select'\n\nconst Statuses = {\n  noteOff: 8, // 1000\n  noteOn: 9, // 1001\n  aftertouch: 10, // 1010\n  controlChange: 11, // 1011\n  programChange: 12, // 1100\n  channelPressure: 13, // 1101\n  pitchWheel: 14, // 1110\n} as const\n\ntype Status = (typeof Statuses)[keyof typeof Statuses]\n\nconst MASK_CHANNEL = 15 // 00001111\nconst MASK_STATUS = 240 // 01110000\n\nconst statusOptions: Option<Status>[] = [\n  { value: Statuses.noteOn, label: 'Note On' },\n  { value: Statuses.noteOff, label: 'Note Stack' },\n  { value: Statuses.controlChange, label: 'Control Change' },\n  { value: Statuses.programChange, label: 'Program Change' },\n  { value: Statuses.aftertouch, label: 'Aftertouch' },\n  { value: Statuses.channelPressure, label: 'Channel Pressure' },\n  { value: Statuses.pitchWheel, label: 'Pitch Wheel' },\n]\n\nconst getStatusLabel = (val: Status) =>\n  statusOptions.filter(({ value }) => value === val)[0]?.label || '???'\n\nconst combineStatusWithChannel = (channel: number, status: Status) =>\n  channel | (status << 4)\n\nconst extractStatusAndChannel = (\n  status: number,\n): {\n  status: Status\n  channel: number\n} => ({\n  status: (((status & MASK_STATUS) >> 4) | 8) as Status,\n  channel: status & MASK_CHANNEL,\n})\n\nconst RESPONSE_CURVE_0 = 0\nconst RESPONSE_CURVE_1 = 1\nconst RESPONSE_CURVE_2 = 2\nconst RESPONSE_CURVE_3 = 3\nconst RESPONSE_CURVE_4 = 4\nconst RESPONSE_CURVE_5 = 5\nconst RESPONSE_CURVE_6 = 6\nconst RESPONSE_CURVE_7 = 7\n\ntype Curve =\n  | typeof RESPONSE_CURVE_0\n  | typeof RESPONSE_CURVE_1\n  | typeof RESPONSE_CURVE_2\n  | typeof RESPONSE_CURVE_3\n  | typeof RESPONSE_CURVE_4\n  | typeof RESPONSE_CURVE_5\n  | typeof RESPONSE_CURVE_6\n  | typeof RESPONSE_CURVE_7\n\nconst responseCurves: Option<Curve>[] = [\n  {\n    value: RESPONSE_CURVE_7,\n    label: 'Always maxed out.',\n  },\n  {\n    value: RESPONSE_CURVE_6,\n    label: 'Most sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_5,\n    label: 'Moderately sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_4,\n    label: 'A little sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_0,\n    label: 'Linear, no change.',\n  },\n  {\n    value: RESPONSE_CURVE_1,\n    label: 'A little less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_2,\n    label: 'Even less sensitive.',\n  },\n  {\n    value: RESPONSE_CURVE_3,\n    label: 'Least sensitive.',\n  },\n]\n\nexport {\n  combineStatusWithChannel,\n  extractStatusAndChannel,\n  getStatusLabel,\n  MASK_CHANNEL,\n  MASK_STATUS,\n  responseCurves,\n  Statuses,\n  statusOptions,\n}\n\nexport type { Curve, Status }\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nconst MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id'\n\ntype WordsByLine = {\n  words: string[]\n  width: number\n  showLine: boolean\n}\n\nconst calculateWordsByLines = (\n  text: string,\n  wordWidths: WordWidths,\n  maxWidth: number,\n  maxHeight: number,\n) => {\n  const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths\n\n  return text.split(/\\s+/).reduce((result: WordsByLine[], word) => {\n    const wordWidth = wordsWithComputedWidth[word]\n    const currentLine = result[result.length - 1]\n    if (currentLine && currentLine.width + wordWidth + spaceWidth < maxWidth) {\n      // Word can be added to an existing line\n      currentLine.words.push(word)\n      currentLine.width += wordWidth + spaceWidth\n    } else {\n      // Add first word to line or word is too long to scaleToFit on existing line\n      const newLine: WordsByLine = {\n        words: [word],\n        width: wordWidth,\n        showLine: maxHeight\n          ? lineHeight * (result.length + 1) < maxHeight\n          : true,\n      }\n      result.push(newLine)\n    }\n    return result\n  }, [])\n}\n\ntype WordWidths = {\n  wordsWithComputedWidth: Record<string, number>\n  spaceWidth: number\n  lineHeight: number\n}\n\nconst calculateWordWidths = (\n  style?: CSSStyleDeclaration,\n  textNode?: SVGGraphicsElement | null,\n  text?: string,\n): WordWidths | undefined => {\n  if (style && textNode) {\n    // biome-ignore lint/complexity/noForEach: <explanation>\n    Array.from(style).forEach(key =>\n      textNode.style.setProperty(\n        key,\n        style.getPropertyValue(key),\n        style.getPropertyPriority(key),\n      ),\n    )\n    const wordArray = [...new Set(String(text).split(/\\s+/))]\n    const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {\n      textNode.textContent = word\n      // biome-ignore lint/performance/noAccumulatingSpread: <explanation>\n      return { ...wordMap, [word]: textNode.getBBox().width }\n    }, {})\n\n    textNode.textContent = '\\u00A0'\n\n    const spaceWidth =\n      (textNode as SVGTextContentElement)?.getComputedTextLength?.() || 8\n    const lineHeight = textNode.getBBox().height\n\n    textNode.setAttribute('style', '')\n    return { wordsWithComputedWidth, spaceWidth, lineHeight }\n  }\n  return undefined\n}\n\ntype TextProps = Partial<HTMLOrSVGElement> & {\n  className?: string\n  dx?: number\n  dy?: number\n  maxHeight?: number\n  maxWidth?: number\n  transform?: string\n  text: string\n  textAnchor?: React.CSSProperties['textAnchor']\n  verticalAnchor?: 'start' | 'middle' | 'end'\n  x?: number\n  y?: number\n}\n\nconst Text = (props: TextProps) => {\n  const {\n    className = '',\n    dx = 0,\n    dy = 0,\n    maxHeight = 1000,\n    maxWidth = 1000,\n    // textAnchor = 'start',\n    text = '',\n    verticalAnchor = 'start',\n    x = 0,\n    y = 0,\n    transform = '',\n    ...rest\n  } = props\n  const [wordWidths, setWordWidths] = useState<WordWidths>()\n  const [textLines, setTextLines] = useState<WordsByLine[]>([])\n  const [style, setComputedStyle] = useState<CSSStyleDeclaration>()\n  const measureRef = useRef<SVGSVGElement | HTMLElement>({} as HTMLElement)\n\n  const displayedLines: WordsByLine[] = useMemo(() => {\n    const result = textLines.filter(({ showLine }) => showLine)\n    return result.length\n      ? result\n      : text\n          .split(/\\n/)\n          .map(line => ({ words: [line], width: 0, showLine: true }))\n  }, [textLines, text])\n\n  const ref: React.LegacyRef<SVGTextElement> = useCallback(\n    (node: SVGTextElement | null) => {\n      setComputedStyle(\n        node !== null ? window.getComputedStyle(node) : undefined,\n      )\n    },\n    [],\n  )\n\n  useEffect(() => {\n    const el = document.getElementById(MEASUREMENT_ELEMENT_ID)\n    if (el === null) {\n      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n      svg.setAttribute('id', MEASUREMENT_ELEMENT_ID)\n      document.body.appendChild(svg)\n      svg.appendChild(\n        document.createElementNS('http://www.w3.org/2000/svg', 'text'),\n      )\n      measureRef.current = svg\n      return () => {\n        document.body.removeChild(svg)\n      }\n    }\n    measureRef.current = el\n  }, [])\n\n  useEffect(() => {\n    const wordWithWidths = calculateWordWidths(\n      style,\n      measureRef.current as SVGGraphicsElement | null,\n      text,\n    )\n\n    setWordWidths(wordWithWidths)\n  }, [text, style])\n\n  useEffect(() => {\n    if (maxWidth && wordWidths) {\n      const lines = text\n        .split(/\\n/)\n        .flatMap(line =>\n          calculateWordsByLines(line, wordWidths, maxWidth, maxHeight),\n        )\n\n      setTextLines(lines)\n    }\n  }, [maxHeight, maxWidth, wordWidths, text])\n\n  const startDy = useMemo(() => {\n    if (wordWidths?.lineHeight) {\n      switch (verticalAnchor) {\n        case 'start':\n          return wordWidths.lineHeight\n\n        case 'middle':\n          return -(((displayedLines.length - 1) * wordWidths.lineHeight) / 2)\n\n        default:\n          return -(displayedLines.length - 1) * wordWidths.lineHeight\n      }\n    }\n    return 0\n  }, [displayedLines.length, verticalAnchor, wordWidths?.lineHeight])\n\n  return (\n    <text\n      className={className}\n      ref={ref}\n      dx={dx}\n      dy={dy}\n      x={x}\n      y={y}\n      // textAnchor={textAnchor}\n      transform={transform}\n      {...rest}>\n      <>\n        {displayedLines.map((line, idx) => (\n          <tspan\n            dx={x + dx}\n            dy={idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0}\n            key={idx}\n            x={0}>\n            {line.words.join(' ')}\n          </tspan>\n        ))}\n        {textLines.length && displayedLines.length !== textLines.length && (\n          <>\n            <tspan>...</tspan>\n            <title>{text}</title>\n          </>\n        )}\n      </>\n    </text>\n  )\n}\n\nexport default Text\n\nexport { MEASUREMENT_ELEMENT_ID }\n\nexport type { TextProps, WordWidths, WordsByLine }\n"],"names":["Statuses","MASK_CHANNEL","MASK_STATUS","statusOptions","getStatusLabel","val","_a","value","combineStatusWithChannel","channel","status","extractStatusAndChannel","RESPONSE_CURVE_0","RESPONSE_CURVE_1","RESPONSE_CURVE_2","RESPONSE_CURVE_3","RESPONSE_CURVE_4","RESPONSE_CURVE_5","RESPONSE_CURVE_6","RESPONSE_CURVE_7","responseCurves","MEASUREMENT_ELEMENT_ID"],"mappings":";;AAEA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA;AAAA,EACT,QAAQ;AAAA;AAAA,EACR,YAAY;AAAA;AAAA,EACZ,eAAe;AAAA;AAAA,EACf,eAAe;AAAA;AAAA,EACf,iBAAiB;AAAA;AAAA,EACjB,YAAY;AAAA;AACd,GAIMC,IAAe,IACfC,IAAc,KAEdC,IAAkC;AAAA,EACtC,EAAE,OAAOH,EAAS,QAAQ,OAAO,UAAU;AAAA,EAC3C,EAAE,OAAOA,EAAS,SAAS,OAAO,aAAa;AAAA,EAC/C,EAAE,OAAOA,EAAS,eAAe,OAAO,iBAAiB;AAAA,EACzD,EAAE,OAAOA,EAAS,eAAe,OAAO,iBAAiB;AAAA,EACzD,EAAE,OAAOA,EAAS,YAAY,OAAO,aAAa;AAAA,EAClD,EAAE,OAAOA,EAAS,iBAAiB,OAAO,mBAAmB;AAAA,EAC7D,EAAE,OAAOA,EAAS,YAAY,OAAO,cAAc;AACrD,GAEMI,IAAiB,CAACC;;AACtB,WAAAC,IAAAH,EAAc,OAAO,CAAC,EAAE,OAAAI,EAAM,MAAMA,MAAUF,CAAG,EAAE,CAAC,MAApD,gBAAAC,EAAuD,UAAS;AAAA,GAE5DE,IAA2B,CAACC,GAAiBC,MACjDD,IAAWC,KAAU,GAEjBC,IAA0B,CAC9BD,OAII;AAAA,EACJ,SAAWA,IAASR,MAAgB,IAAK;AAAA,EACzC,SAASQ,IAAST;AACpB,IAEMW,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GACnBC,IAAmB,GAYnBC,IAAkC;AAAA,EACtC;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOD;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOJ;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOC;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOC;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAOC;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,GC7FMM,IAAyB;"}

package/dist/midi/export.js

@@ -24,4 +24,46 @@ const extractStatusAndChannel = (status) => ({
     status: (((status & MASK_STATUS) >> 4) | 8),
     channel: status & MASK_CHANNEL,
 });
-export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, statusOptions, Statuses, };
+const RESPONSE_CURVE_0 = 0;
+const RESPONSE_CURVE_1 = 1;
+const RESPONSE_CURVE_2 = 2;
+const RESPONSE_CURVE_3 = 3;
+const RESPONSE_CURVE_4 = 4;
+const RESPONSE_CURVE_5 = 5;
+const RESPONSE_CURVE_6 = 6;
+const RESPONSE_CURVE_7 = 7;
+const responseCurves = [
+    {
+        value: RESPONSE_CURVE_7,
+        label: 'Always maxed out.',
+    },
+    {
+        value: RESPONSE_CURVE_6,
+        label: 'Most sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_5,
+        label: 'Moderately sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_4,
+        label: 'A little sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_0,
+        label: 'Linear, no change.',
+    },
+    {
+        value: RESPONSE_CURVE_1,
+        label: 'A little less sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_2,
+        label: 'Even less sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_3,
+        label: 'Least sensitive.',
+    },
+];
+export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, responseCurves, Statuses, statusOptions, };

package/dist/pickers/ResponseCurve.js

@@ -1,50 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import useComponentSize from '../hooks/useComponentSize';
+import { responseCurves as origResponseCurves, } from '../midi/export';
 import DefaultTooltip from '../other/DefaultTooltip';
 import SVGText from '../other/SVGText';
-const RESPONSE_CURVE_0 = 0;
-const RESPONSE_CURVE_1 = 1;
-const RESPONSE_CURVE_2 = 2;
-const RESPONSE_CURVE_3 = 3;
-const RESPONSE_CURVE_4 = 4;
-const RESPONSE_CURVE_5 = 5;
-const RESPONSE_CURVE_6 = 6;
-const RESPONSE_CURVE_7 = 7;
-const RESPONSE_CURVES = [
-    {
-        value: RESPONSE_CURVE_7,
-        label: 'Always maxed out.',
-    },
-    {
-        value: RESPONSE_CURVE_6,
-        label: 'Most sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_5,
-        label: 'Moderately sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_4,
-        label: 'A little sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_0,
-        label: 'Linear, no change.',
-    },
-    {
-        value: RESPONSE_CURVE_1,
-        label: 'A little less sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_2,
-        label: 'Even less sensitive.',
-    },
-    {
-        value: RESPONSE_CURVE_3,
-        label: 'Least sensitive.',
-    },
-];
 // const width = 218
 // const height = 150
 const axisOffset = 20;
@@ -63,7 +22,7 @@ const ResponseCurve = (props) => {
     const xMid = width / 2;
     const yMid = height / 2;
     const svgProps = { ref: svgRef };
-    const responseCurves = RESPONSE_CURVES.map(
+    const responseCurves = origResponseCurves.map(
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
     ({ value, label }) => {
         let c1 = 0;
@@ -75,48 +34,48 @@ const ResponseCurve = (props) => {
         let labelX = xMid;
         let labelY = yMid;
         switch (value) {
-            case RESPONSE_CURVE_0:
+            case responseCurves[0].value:
                 c1 = xMid;
                 c2 = yMid;
                 labelY += 3;
                 break;
-            case RESPONSE_CURVE_1:
+            case responseCurves[1].value:
                 c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13;
                 c2 = yMid - height * 0.13;
                 labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1;
                 labelY = yMid - height * 0.09;
                 break;
-            case RESPONSE_CURVE_2:
+            case responseCurves[2].value:
                 c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25;
                 c2 = yMid - height * 0.25;
                 labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2;
                 labelY = yMid - height * 0.17;
                 break;
-            case RESPONSE_CURVE_3:
+            case responseCurves[3].value:
                 c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35;
                 c2 = yMid - height * 0.35;
                 labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28;
                 labelY = yMid - height * 0.25;
                 break;
-            case RESPONSE_CURVE_4:
+            case responseCurves[4].value:
                 c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13;
                 c2 = yMid + height * 0.13;
                 labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1;
                 labelY = yMid + height * 0.1;
                 break;
-            case RESPONSE_CURVE_5:
+            case responseCurves[5].value:
                 c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25;
                 c2 = yMid + height * 0.25;
                 labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2;
                 labelY = yMid + height * 0.18;
                 break;
-            case RESPONSE_CURVE_6:
+            case responseCurves[6].value:
                 c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35;
                 c2 = yMid + height * 0.35;
                 labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28;
                 labelY = yMid + height * 0.25;
                 break;
-            case RESPONSE_CURVE_7:
+            case responseCurves[7].value:
                 x1 = inverted ? axisX1 : axisX2;
                 y1 = axisY1;
                 x2 = x1;
@@ -151,4 +110,3 @@ const ResponseCurve = (props) => {
                                     }), transform: `translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`, width: buttonSize }) }), _jsxs("text", { className: value === responseCurve ? 'button-selected' : 'button', transform: `translate(${labelX} ${labelY})`, children: [value, _jsx("title", { children: label })] })] }, value)))] }) }));
 };
 export default ResponseCurve;
-export { RESPONSE_CURVES };

package/dist/pickers/ResponseCurvePicker.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
+import { responseCurves } from '../midi/export';
 import DefaultTooltip from '../other/DefaultTooltip';
 import { findObj } from '../utils';
-import ResponseCurve, { RESPONSE_CURVES } from './ResponseCurve';
+import ResponseCurve from './ResponseCurve';
 import Select from './Select';
 const ResponseCurvePicker = forwardRef((props, ref) => {
     const { Tooltip = DefaultTooltip, inverted = false, onChange, value, ...rest } = props;
-    const Placeholder = useCallback(() => (_jsx("div", { className: "singleValue", children: findObj('value', value)(RESPONSE_CURVES)?.label })), [value]);
+    const Placeholder = useCallback(() => (_jsx("div", { className: "singleValue", children: findObj('value', value)(responseCurves)?.label })), [value]);
     const MenuList = useCallback(({ setValue }) => (_jsx(ResponseCurve, { autosize: true, inverted: inverted, onChange: ({ target: { value: v } }) => {
             setValue(v);
             onChange(v);

package/dist/types/midi/export.d.ts

@@ -18,4 +18,15 @@ declare const extractStatusAndChannel: (status: number) => {
     status: Status;
     channel: number;
 };
-export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, statusOptions, Statuses, type Status, };
+declare const RESPONSE_CURVE_0 = 0;
+declare const RESPONSE_CURVE_1 = 1;
+declare const RESPONSE_CURVE_2 = 2;
+declare const RESPONSE_CURVE_3 = 3;
+declare const RESPONSE_CURVE_4 = 4;
+declare const RESPONSE_CURVE_5 = 5;
+declare const RESPONSE_CURVE_6 = 6;
+declare const RESPONSE_CURVE_7 = 7;
+type Curve = typeof RESPONSE_CURVE_0 | typeof RESPONSE_CURVE_1 | typeof RESPONSE_CURVE_2 | typeof RESPONSE_CURVE_3 | typeof RESPONSE_CURVE_4 | typeof RESPONSE_CURVE_5 | typeof RESPONSE_CURVE_6 | typeof RESPONSE_CURVE_7;
+declare const responseCurves: Option<Curve>[];
+export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, responseCurves, Statuses, statusOptions, };
+export type { Curve, Status };

package/dist/types/pickers/ResponseCurve.d.ts

@@ -1,14 +1,5 @@
+import { type Curve } from '../midi/export';
 import { type TooltipProps } from '../other/DefaultTooltip';
-import type { Option } from './Select';
-declare const RESPONSE_CURVE_0 = 0;
-declare const RESPONSE_CURVE_1 = 1;
-declare const RESPONSE_CURVE_2 = 2;
-declare const RESPONSE_CURVE_3 = 3;
-declare const RESPONSE_CURVE_4 = 4;
-declare const RESPONSE_CURVE_5 = 5;
-declare const RESPONSE_CURVE_6 = 6;
-declare const RESPONSE_CURVE_7 = 7;
-type Curve = typeof RESPONSE_CURVE_0 | typeof RESPONSE_CURVE_1 | typeof RESPONSE_CURVE_2 | typeof RESPONSE_CURVE_3 | typeof RESPONSE_CURVE_4 | typeof RESPONSE_CURVE_5 | typeof RESPONSE_CURVE_6 | typeof RESPONSE_CURVE_7;
 type ResponseCurve = {
     value: Curve;
     label: React.ReactNode;
@@ -21,7 +12,6 @@ type ResponseCurve = {
     labelX: number;
     labelY: number;
 };
-declare const RESPONSE_CURVES: Option<Curve>[];
 type ResponseCurveProps = {
     autosize: boolean;
     disabled?: boolean;
@@ -36,5 +26,4 @@ type ResponseCurveProps = {
 };
 declare const ResponseCurve: (props: ResponseCurveProps) => import("react/jsx-runtime").JSX.Element;
 export default ResponseCurve;
-export { RESPONSE_CURVES };
-export type { Curve, ResponseCurve, ResponseCurveProps };
+export type { ResponseCurve, ResponseCurveProps };

package/dist/types/pickers/ResponseCurvePicker.d.ts

@@ -1,6 +1,6 @@
 import type { GroupBase, SelectInstance } from 'react-select';
+import { type Curve } from '../midi/export';
 import { type TooltipProps } from '../other/DefaultTooltip';
-import { type Curve } from './ResponseCurve';
 import type { Option, SelectProps } from './Select';
 type ResponseCurvePickerProps = SelectProps<Curve> & {
     inverted?: boolean;

package/lib/midi/export.ts

@@ -41,13 +41,69 @@ const extractStatusAndChannel = (
   channel: status & MASK_CHANNEL,
 })
 
+const RESPONSE_CURVE_0 = 0
+const RESPONSE_CURVE_1 = 1
+const RESPONSE_CURVE_2 = 2
+const RESPONSE_CURVE_3 = 3
+const RESPONSE_CURVE_4 = 4
+const RESPONSE_CURVE_5 = 5
+const RESPONSE_CURVE_6 = 6
+const RESPONSE_CURVE_7 = 7
+
+type Curve =
+  | typeof RESPONSE_CURVE_0
+  | typeof RESPONSE_CURVE_1
+  | typeof RESPONSE_CURVE_2
+  | typeof RESPONSE_CURVE_3
+  | typeof RESPONSE_CURVE_4
+  | typeof RESPONSE_CURVE_5
+  | typeof RESPONSE_CURVE_6
+  | typeof RESPONSE_CURVE_7
+
+const responseCurves: Option<Curve>[] = [
+  {
+    value: RESPONSE_CURVE_7,
+    label: 'Always maxed out.',
+  },
+  {
+    value: RESPONSE_CURVE_6,
+    label: 'Most sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_5,
+    label: 'Moderately sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_4,
+    label: 'A little sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_0,
+    label: 'Linear, no change.',
+  },
+  {
+    value: RESPONSE_CURVE_1,
+    label: 'A little less sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_2,
+    label: 'Even less sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_3,
+    label: 'Least sensitive.',
+  },
+]
+
 export {
   combineStatusWithChannel,
   extractStatusAndChannel,
   getStatusLabel,
   MASK_CHANNEL,
   MASK_STATUS,
-  statusOptions,
+  responseCurves,
   Statuses,
-  type Status,
+  statusOptions,
 }
+
+export type { Curve, Status }

package/lib/pickers/ResponseCurve.tsx

@@ -1,27 +1,11 @@
 import { useRef } from 'react'
 import useComponentSize from '../hooks/useComponentSize'
+import {
+  type Curve,
+  responseCurves as origResponseCurves,
+} from '../midi/export'
 import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
 import SVGText from '../other/SVGText'
-import type { Option } from './Select'
-
-const RESPONSE_CURVE_0 = 0
-const RESPONSE_CURVE_1 = 1
-const RESPONSE_CURVE_2 = 2
-const RESPONSE_CURVE_3 = 3
-const RESPONSE_CURVE_4 = 4
-const RESPONSE_CURVE_5 = 5
-const RESPONSE_CURVE_6 = 6
-const RESPONSE_CURVE_7 = 7
-
-type Curve =
-  | typeof RESPONSE_CURVE_0
-  | typeof RESPONSE_CURVE_1
-  | typeof RESPONSE_CURVE_2
-  | typeof RESPONSE_CURVE_3
-  | typeof RESPONSE_CURVE_4
-  | typeof RESPONSE_CURVE_5
-  | typeof RESPONSE_CURVE_6
-  | typeof RESPONSE_CURVE_7
 
 type ResponseCurve = {
   value: Curve
@@ -36,41 +20,6 @@ type ResponseCurve = {
   labelY: number
 }
 
-const RESPONSE_CURVES: Option<Curve>[] = [
-  {
-    value: RESPONSE_CURVE_7,
-    label: 'Always maxed out.',
-  },
-  {
-    value: RESPONSE_CURVE_6,
-    label: 'Most sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_5,
-    label: 'Moderately sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_4,
-    label: 'A little sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_0,
-    label: 'Linear, no change.',
-  },
-  {
-    value: RESPONSE_CURVE_1,
-    label: 'A little less sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_2,
-    label: 'Even less sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_3,
-    label: 'Least sensitive.',
-  },
-]
-
 // const width = 218
 // const height = 150
 const axisOffset = 20
@@ -113,7 +62,7 @@ const ResponseCurve = (props: ResponseCurveProps) => {
 
   const svgProps = { ref: svgRef }
 
-  const responseCurves = RESPONSE_CURVES.map(
+  const responseCurves = origResponseCurves.map(
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
     ({ value, label }): ResponseCurve => {
       let c1 = 0
@@ -125,55 +74,55 @@ const ResponseCurve = (props: ResponseCurveProps) => {
       let labelX = xMid
       let labelY = yMid
       switch (value) {
-        case RESPONSE_CURVE_0:
+        case responseCurves[0].value:
           c1 = xMid
           c2 = yMid
           labelY += 3
 
           break
-        case RESPONSE_CURVE_1:
+        case responseCurves[1].value:
           c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13
           c2 = yMid - height * 0.13
           labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1
           labelY = yMid - height * 0.09
           break
 
-        case RESPONSE_CURVE_2:
+        case responseCurves[2].value:
           c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25
           c2 = yMid - height * 0.25
           labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2
           labelY = yMid - height * 0.17
           break
 
-        case RESPONSE_CURVE_3:
+        case responseCurves[3].value:
           c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35
           c2 = yMid - height * 0.35
           labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28
           labelY = yMid - height * 0.25
           break
 
-        case RESPONSE_CURVE_4:
+        case responseCurves[4].value:
           c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13
           c2 = yMid + height * 0.13
           labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1
           labelY = yMid + height * 0.1
           break
 
-        case RESPONSE_CURVE_5:
+        case responseCurves[5].value:
           c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25
           c2 = yMid + height * 0.25
           labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2
           labelY = yMid + height * 0.18
           break
 
-        case RESPONSE_CURVE_6:
+        case responseCurves[6].value:
           c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35
           c2 = yMid + height * 0.35
           labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28
           labelY = yMid + height * 0.25
           break
 
-        case RESPONSE_CURVE_7:
+        case responseCurves[7].value:
           x1 = inverted ? axisX1 : axisX2
           y1 = axisY1
           x2 = x1
@@ -299,6 +248,4 @@ const ResponseCurve = (props: ResponseCurveProps) => {
 
 export default ResponseCurve
 
-export { RESPONSE_CURVES }
-
-export type { Curve, ResponseCurve, ResponseCurveProps }
+export type { ResponseCurve, ResponseCurveProps }

package/lib/pickers/ResponseCurvePicker.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, useCallback } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
+import { type Curve, responseCurves } from '../midi/export'
 import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
 import { findObj } from '../utils'
-import ResponseCurve, { type Curve, RESPONSE_CURVES } from './ResponseCurve'
+import ResponseCurve from './ResponseCurve'
 import Select from './Select'
 import type { Option, SelectProps } from './Select'
 
@@ -32,7 +33,7 @@ const ResponseCurvePicker = forwardRef<
   const Placeholder = useCallback(
     () => (
       <div className="singleValue">
-        {(findObj('value', value)(RESPONSE_CURVES) as Option<Curve>)?.label}
+        {(findObj('value', value)(responseCurves) as Option<Curve>)?.label}
       </div>
     ),
     [value],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",