+ {/* Font Family */}
+
+
+
+ {t('terminalFonts.fontConfig.fontFamilyDescription', {
+ defaultValue: 'Primary monospace font for terminal text',
+ })}
+
+
+
+
+ {/* Current font chain display */}
+
+ {t('terminalFonts.fontConfig.fontChain', { defaultValue: 'Font chain:' })}{' '}
+
+ {settings.fontFamily.join(', ')}
+
+
+
+
+ {/* Font Size */}
+
+
+
+
+
+ {settings.fontSize}px
+
+
+
+
+
+
+
+
+ {t('terminalFonts.fontConfig.fontSizeDescription', {
+ defaultValue: 'Base font size in pixels (10-24px)',
+ })}
+
+
handleFontSizeChange(parseInt(e.target.value, 10))}
+ aria-label={t('terminalFonts.fontConfig.fontSize', { defaultValue: 'Font Size' })}
+ aria-valuemin={FONT_SIZE_MIN}
+ aria-valuemax={FONT_SIZE_MAX}
+ aria-valuenow={settings.fontSize}
+ aria-valuetext={`${settings.fontSize} ${t('terminalFonts.fontConfig.pixels', { defaultValue: 'pixels' })}`}
+ className={cn(...SLIDER_INPUT_CLASSES)}
+ />
+
+ {FONT_SIZE_MIN}px
+ {FONT_SIZE_MAX}px
+
+
+
+ {/* Font Weight */}
+
+
+
+ {t('terminalFonts.fontConfig.fontWeightDescription', {
+ defaultValue: 'Font weight from 100 (thin) to 900 (black), in steps of 100',
+ })}
+
+
+
handleFontWeightChange(e.target.value)}
+ className={cn(
+ 'w-24 h-10 px-3 rounded-lg',
+ 'border border-border bg-card',
+ 'text-sm text-foreground',
+ 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary',
+ 'disabled:cursor-not-allowed disabled:opacity-50',
+ 'transition-colors duration-200'
+ )}
+ />
+
+
+
+
+
+
+ {t('terminalFonts.fontConfig.commonWeights', {
+ defaultValue: 'Common: 400 (normal), 600 (semi-bold), 700 (bold)',
+ })}
+
+
+
+ {/* Line Height */}
+
+
+
+
+ {numberFormatter.format(settings.lineHeight)}
+
+
+
+ {t('terminalFonts.fontConfig.lineHeightDescription', {
+ defaultValue: 'Line height as a multiple of font size (1.0-2.0)',
+ })}
+
+
handleLineHeightChange(parseFloat(e.target.value))}
+ aria-label={t('terminalFonts.fontConfig.lineHeight', { defaultValue: 'Line Height' })}
+ aria-valuemin={LINE_HEIGHT_MIN}
+ aria-valuemax={LINE_HEIGHT_MAX}
+ aria-valuenow={settings.lineHeight}
+ aria-valuetext={numberFormatter.format(settings.lineHeight)}
+ className={cn(...SLIDER_INPUT_CLASSES)}
+ />
+
+ {LINE_HEIGHT_MIN.toFixed(1)}
+ {LINE_HEIGHT_MAX.toFixed(1)}
+
+
+
+ {/* Letter Spacing */}
+
+
+
+
+ {settings.letterSpacing > 0 ? `+${numberFormatter.format(settings.letterSpacing)}` : numberFormatter.format(settings.letterSpacing)}px
+
+
+
+ {t('terminalFonts.fontConfig.letterSpacingDescription', {
+ defaultValue: 'Horizontal spacing between characters (-2 to 5px)',
+ })}
+
+
handleLetterSpacingChange(parseFloat(e.target.value))}
+ aria-label={t('terminalFonts.fontConfig.letterSpacing', { defaultValue: 'Letter Spacing' })}
+ aria-valuemin={LETTER_SPACING_MIN}
+ aria-valuemax={LETTER_SPACING_MAX}
+ aria-valuenow={settings.letterSpacing}
+ aria-valuetext={`${settings.letterSpacing > 0 ? '+' : ''}${numberFormatter.format(settings.letterSpacing)} ${t('terminalFonts.fontConfig.pixels', { defaultValue: 'pixels' })}`}
+ className={cn(...SLIDER_INPUT_CLASSES)}
+ />
+
+ {LETTER_SPACING_MIN}px
+ +{LETTER_SPACING_MAX}px
+
+
+