Function AlgorithmPanel

src/components/panels/AlgorithmPanel.tsx:19–103

({ pattern, setPattern, threshold, setThreshold, invert, setInvert, asciiRamp, setAsciiRamp })

}

const AlgorithmPanel: React.FC<AlgorithmPanelProps> = ({ pattern, setPattern, threshold, setThreshold, invert, setInvert, asciiRamp, setAsciiRamp }) => {
  const { t } = useTranslation();
  const algoObj = algorithms.find(a=>a.id===pattern);
  const isAscii = pattern === 25 || algoObj?.name.toLowerCase().includes('ascii');
  const normalizedRamp = useMemo(()=>{
    if (!asciiRamp) return DEFAULT_ASCII_RAMP; return Array.from(new Set(asciiRamp.split('').filter(ch=>ch !== '\n' && ch!=='\r'))).join('').slice(0,128);
  },[asciiRamp]);
  
  return (
    <CollapsiblePanel 
      title={t(isAscii ? 'tool.algorithmPanel.titleAscii' : 'tool.algorithmPanel.title')}
      subtitle={`#${pattern}`}
      defaultOpen={true}
    >
      <div className="space-y-3">
        <div>
            <label htmlFor="algo-select" className="sr-only">{t('tool.algorithmPanel.title')}</label>
            <select id="algo-select" className="clean-input" value={pattern} onChange={(e) => setPattern(Number(e.target.value))}>
              {(() => {
                const groups = getAlgorithmsByCategory();
                const order: ("Error Diffusion"|"Ordered"|"Other")[] = ["Error Diffusion","Ordered","Other"];
                return order.map(cat => {
                  const list = groups[cat]; if (!list) return null;
                  const labelKey = cat === 'Error Diffusion' ? 'tool.algorithmPanel.errorDiffusion' : cat === 'Ordered' ? 'tool.algorithmPanel.ordered' : 'tool.algorithmPanel.other';
                  return <optgroup key={cat} label={t(labelKey)}>{list.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}</optgroup>;
                });
              })()}
            </select>
          </div>
          {algorithms.find(a=>a.id===pattern)?.supportsThreshold && (
            <div className="space-y-1">
              <div className="flex items-center justify-between"><span className="font-mono text-[10px] tracking-wide text-gray-400">{t('tool.algorithmPanel.luminanceThreshold')}</span><span className="text-[10px] text-gray-500">{threshold}</span></div>
              <input type="range" min={0} max={255} value={threshold} className="clean-range" onChange={(e) => setThreshold(Number(e.target.value))} aria-label={t('tool.algorithmPanel.luminanceThreshold')} />
            </div>
          )}
          <div className="grid grid-cols-1 gap-2">
            <button
              type="button"
              onClick={() => setInvert(v => !v)}
              className={`clean-btn justify-center text-[10px] ${invert ? 'border-blue-600 text-blue-400' : ''}`}
            >{t('tool.algorithmPanel.invert')}</button>
          </div>
          {isAscii && setAsciiRamp && (
            <div className="space-y-2" data-section="ascii-ramp">
              <div className="flex items-center justify-between">
                <span className="font-mono text-[10px] tracking-wide text-gray-400">{t('tool.algorithmPanel.asciiRamp')}</span>
                <span className="text-[9px] text-gray-500">{normalizedRamp.length} {t('tool.algorithmPanel.chars')}</span>
              </div>
              <textarea
                value={asciiRamp || DEFAULT_ASCII_RAMP}
                onChange={(e)=> {
                  const raw = e.target.value.replace(/\s+/g,' '); // collapse whitespace
                  const uniq = Array.from(new Set(raw.split(''))).join('');
                  setAsciiRamp(uniq.slice(0,128));
                }}
                rows={2}
                className="clean-input !px-2 !py-1 font-mono text-[11px] resize-none"
                aria-label={t('tool.algorithmPanel.asciiRamp')}