Translation key

A React block (a whole screen) in Beamline's CMS & media app.

A translation key, defined and given context. General: the name (one already in the project refused, or a name per platform), the base text, the platforms it exports with and the file on each (none chosen said), and keep this open to add another after creating. Advanced: plural forms (each language's forms listed) and a character limit that cuts nothing but lists translations over it. Screenshots: linked ones with how many keys each serves, unlinked only after asking (the picture stays in the project); existing ones searched by name or tag and linked several at once; an upload looks for the key's text and marks it, or asks for the place to be marked by dragging (arrows move the mark). Read only says so.

Use it for

Defining a string key with where it exports, its plurals and limit, and screenshots for translators.
Any content key editor where context pictures help others translate or review.

Not for

Translating the key's text (translation-workbench, segment-editor).
Tagging pictures in general (image-tagger).

Anatomy

header: the product's mark, the title and key, General, Advanced or Screenshots
general: name, per-platform names, base text, platforms with their files
advanced: plural forms per language, character limit, translations over it
screenshots: linked (picture with the marked place, key count, unlink with a question), link existing (search, choose several, link), upload (found and marked, or mark by hand)
footer: what was done, keep open for the next, Create or Save

States

name taken (refused), no platform (amber), created, created and ready for the next (green)
plurals on; translations over the limit (amber)
no screenshots (amber), unlink asked, linked (green), uploading, looking for the text, found (green), mark by hand (amber)
read only (blue note, nothing editable)
phone: one column
right to left: the page mirrors; pictures keep their coordinates

Keyboard

Tab through every field; Space ticks platforms and screenshots; on the picture, arrows move the mark (Shift for larger steps)

Motion

Nothing moves; changes appear on input.

Props

Prop	Type	Default	Description
`baseLanguage` (required)	`string`	—
`platforms` (required)	`KeyPlatform[]`	—
`existing`	`string[]`	—	Key names already in the project.
`languages`	`{ name: string; forms: string[]; }[]`	—	Languages and the plural forms each needs.
`translations`	`Record<string, string>`	—	This key's current translations, for the limit.
`defaultValue`	`Partial<KeyDraft>`	—	Initial selection when uncontrolled; omitted by default.
`editing`	`boolean`	—	Editing an existing key rather than creating one.
`readOnly`	`boolean`	—
`defaultTab`	`"advanced" \| "general" \| "screenshots"`	—
`library`	`Screenshot[]`	—
`defaultLinked`	`string[]`	—
`onUpload`	`(() => Promise<{ shot: Screenshot; found: string \| null; }>)`	—	Uploads a picture and looks for the key's text; `found` is null when it isn't found.
`onSave`	`((draft: KeyDraft, linked: string[]) => void)`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { TranslationKey } from "@beamline/translation-key";

Get it

Translation key is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent