- {lang.isBeta && (
-
- Beta
-
- )}
- {features.map(f => {
- if (f.variant) {
- return (
-
- Translation: Target Only
-
- )
- }
- if (lang[f.key]) {
- return (
-
- {f.label}
-
- )
- }
- return null
+
+ ✓{beta && β}
+
+ )
+ }
+ const FeatureTick = ({ info, langBeta }) => {
+ if (!info || !info.has) {
+ return —
+ }
+ const beta = info.status !== 'stable' || langBeta
+ // Mask externally-provided or beta features when the matching
+ // "hide" toggle is on so the user can quickly see "what does
+ // DeepL itself support, with no external partner / no beta?".
+ if ((info.external && hideExternal) || (beta && hideBeta)) {
+ return —
+ }
+ const cls = info.external
+ ? 'text-amber-700 dark:text-amber-300'
+ : 'text-green-700 dark:text-green-400'
+ const titleParts = [info.external ? 'Provided by an external service partner' : 'Provided by DeepL']
+ if (beta) titleParts.push(info.status)
+ return (
+
+ {info.external ? '⎋' : '✓'}
+ {beta && β}
+
+ )
+ }
+
+ const activeResourceCount = Object.values(resourceFilters).filter(Boolean).length
+ const activeFeatureCount = Object.values(featureFilters).filter(Boolean).length
+ const activeFiltersCount = activeResourceCount + activeFeatureCount + (hideBeta ? 1 : 0) + (hideExternal ? 1 : 0)
+ const hasAnyFilter = activeFiltersCount > 0 || searchTerm.length > 0
+
+ // `label` is the long form used in the filter UI; `short` is what the
+ // table column header shows.
+ const RESOURCE_OPTIONS = [
+ { key: 'translate_text', label: 'Text translation', short: 'Text', link: '/api-reference/translate' },
+ { key: 'translate_document', label: 'Document translation', short: 'Documents', link: '/api-reference/document' },
+ { key: 'voice', label: 'Voice', short: 'Voice', link: '/api-reference/voice' },
+ { key: 'write', label: 'Text improvement (Write)', short: 'Write', link: '/api-reference/improve-text' },
+ ]
+ const CUSTOMIZATION_OPTIONS = [
+ { key: 'glossary', label: 'Glossaries', short: 'Glossaries', link: '/api-reference/multilingual-glossaries' },
+ { key: 'style_rules', label: 'Style rules', short: 'Style rules', link: '/api-reference/style-rules' },
+ { key: 'translation_memory', label: 'Translation memory', short: 'Translation memory', link: '/docs/learning-how-tos/examples-and-guides/how-to-use-translation-memories' },
+ { key: 'spoken_terms', label: 'Spoken terms', short: 'Spoken terms', link: 'api-reference/voice#customization' },
+ ]
+ // `glossary` and `style_rules` features are intentionally absent here
+ // because the matching customization columns already cover them.
+ const FEATURE_OPTIONS = [
+ { key: 'auto_detection', label: 'Auto-detection' },
+ { key: 'transcription', label: 'Transcription' },
+ { key: 'tag_handling', label: 'Tag handling', link: '/docs/xml-and-html-handling/xml' },
+ { key: 'translated_speech', label: 'Translated speech' },
+ { key: 'formality', label: 'Formality' },
+ { key: 'tone', label: 'Tone' },
+ { key: 'writing_style', label: 'Writing style' },
+ ]
+ // Which features each /v3/languages resource may report. Computed from
+ // the inlined RESOURCES so it stays accurate without a hand-maintained
+ // mapping; if the API adds a new feature to a resource the table picks
+ // it up on the next refresh.
+ const featuresByResource = useMemo(() => {
+ const out = {}
+ for (const [resource, entries] of Object.entries(RESOURCES)) {
+ const set = new Set()
+ for (const e of (entries || [])) {
+ for (const k of Object.keys(e.features || {})) set.add(k)
+ }
+ out[resource] = set
+ }
+ return out
+ }, [])
+
+ // Feature filters are only meaningful for an explicitly selected
+ // Resource is single-select; customization is multi-select. Both
+ // groups are independent — picking a customization does not clear
+ // the active resource and vice versa.
+ const selectedResource = RESOURCE_OPTIONS.find(o => resourceFilters[o.key]) || null
+ const selectedCustomizationKeys = CUSTOMIZATION_OPTIONS
+ .filter(o => resourceFilters[o.key])
+ .map(o => o.key)
+ const anyResourceSelected = !!selectedResource
+ // Which resources surface each customization. For glossary and
+ // style_rules this is derivable from /v3/languages (the feature key
+ // appears on the resource). translation_memory is not yet exposed as
+ // a feature, so its applicable resources are listed explicitly until
+ // the API catches up.
+ const CUSTOMIZATION_APPLIES_TO_OVERRIDE = {
+ translation_memory: new Set(['translate_text']),
+ }
+ const customizationResources = (key) => {
+ const explicit = CUSTOMIZATION_APPLIES_TO_OVERRIDE[key]
+ if (explicit) return explicit
+ const set = new Set()
+ for (const o of RESOURCE_OPTIONS) {
+ if (featuresByResource[o.key]?.has(key)) set.add(o.key)
+ }
+ return set
+ }
+ // A customization is "available" when no resource is selected (the
+ // table answers "what does each customization touch?") or when the
+ // selected resource lists it as a feature (the table answers "which
+ // langs work with this customization for this resource?").
+ const customizationAvailable = (key) => {
+ if (!selectedResource) return true
+ return customizationResources(key).has(selectedResource.key)
+ }
+ // Whether a language is touched by a customization. Most
+ // customizations are themselves /v3/languages resources, so we read
+ // `lang.resources[key]`. `spoken_terms` is currently only exposed as
+ // a feature on the voice resource, so we also check the feature map
+ // as a fallback. The two channels are mutually exclusive in practice.
+ const langHasCustomization = (lang, key) =>
+ Boolean(lang.resources[key]) || Boolean(lang.features[key]?.has)
+ // Feature filters are only meaningful when an actual product resource
+ // is selected (customizations have no feature object of their own).
+ const featureAvailable = (key) => {
+ if (!selectedResource) return false
+ return Boolean(featuresByResource[selectedResource.key]?.has(key))
+ }
+ // Voice ⇒ transcription is required, so the checkbox is forced on
+ // and not togglable. The filter logic still treats it as a normal
+ // feature filter; this only locks the UI control.
+ const featureLocked = (key) =>
+ selectedResource?.key === 'voice' && key === 'transcription'
+ // Features to display in the table's "Features" column for the
+ // currently-active resource. Empty when no resource is selected.
+ const visibleFeatureKeys = selectedResource
+ ? FEATURE_OPTIONS.filter(o => featureAvailable(o.key)).map(o => o.key)
+ : []
+ const showFeaturesColumn = !!selectedResource
+ // Selecting a resource collapses the resource columns to just the
+ // selected one; same for customization. The two groups are
+ // independent so picking a customization does not hide the resource
+ // columns and vice versa — except that picking only a customization
+ // (with no resource) hides the resource columns altogether, because
+ // the user has already narrowed the question to that customization.
+ const visibleResourceOptions = selectedResource
+ ? [selectedResource]
+ : (selectedCustomizationKeys.length > 0 ? [] : RESOURCE_OPTIONS)
+ const visibleCustomizationOptions = selectedCustomizationKeys.length > 0
+ ? CUSTOMIZATION_OPTIONS.filter(o => selectedCustomizationKeys.includes(o.key))
+ : (selectedResource
+ ? CUSTOMIZATION_OPTIONS.filter(o => customizationAvailable(o.key))
+ : CUSTOMIZATION_OPTIONS)
+
+ const renderResourceCellItems = (options) => (lang) => (
+