@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/translations-csv.mjs

@@ -0,0 +1,132 @@
+import { pageWords } from '@fieldia/core';
+import { en } from './locales/en/index.mjs';
+import { languagesOf, languageTag, pageLanguage } from './translations.mjs';
+/**
+ * The page's words as CSV, for a translator's spreadsheet, and a CSV read
+ * back as translations. The first row names the languages by tag, the first
+ * column holds the page's words as written, and each other column a
+ * language's translations. What a spreadsheet copies — split by tabs — reads
+ * as well as CSV split by commas or by semicolons.
+ */
+/** The split a CSV uses, by its first row: the commas, tabs or semicolons outside quotes, whichever there are most of. */
+function splitOf(text) {
+    const counts = { ',': 0, '\t': 0, ';': 0 };
+    let quoted = false;
+    for (const char of text) {
+        if (char === '"')
+            quoted = !quoted;
+        else if (!quoted && (char === '\n' || char === '\r'))
+            break;
+        else if (!quoted && char in counts)
+            counts[char]++;
+    }
+    return Object.keys(counts).reduce((best, split) => (counts[split] > counts[best] ? split : best), ',');
+}
+/** Rows of fields, as RFC 4180 has them: fields in quotes may hold the split, line breaks and doubled quotes. Blank lines are skipped. */
+export function parseCsv(input) {
+    const text = input.replace(/^\uFEFF/, '');
+    const split = splitOf(text);
+    const rows = [];
+    let row = [];
+    let field = '';
+    let at = 0;
+    const endRow = () => {
+        row.push(field);
+        if (row.length > 1 || row[0] !== '')
+            rows.push(row);
+        row = [];
+        field = '';
+    };
+    while (at < text.length) {
+        const char = text[at];
+        if (char === '"' && field === '') {
+            // A quoted field: to the next quote not doubled, or to the end.
+            let end = at + 1;
+            for (;;) {
+                const quote = text.indexOf('"', end);
+                if (quote === -1) {
+                    field += text.slice(end);
+                    end = text.length;
+                    break;
+                }
+                field += text.slice(end, quote);
+                if (text[quote + 1] === '"') {
+                    field += '"';
+                    end = quote + 2;
+                }
+                else {
+                    end = quote + 1;
+                    break;
+                }
+            }
+            at = end;
+        }
+        else if (char === split) {
+            row.push(field);
+            field = '';
+            at++;
+        }
+        else if (char === '\n' || char === '\r') {
+            endRow();
+            // A Windows line end leaves a blank line between its two halves, and blank lines are skipped.
+            at++;
+        }
+        else {
+            field += char;
+            at++;
+        }
+    }
+    if (field !== '' || row.length)
+        endRow();
+    return rows;
+}
+/** Rows as CSV: a field with a comma, quote, tab, semicolon, line break or space at an end goes in quotes, its quotes doubled. */
+export function toCsv(rows) {
+    const field = (text) => (/[",;\t\r\n]|^\s|\s$/.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+    return rows.map((row) => row.map(field).join(',') + '\r\n').join('');
+}
+/** The page's words and their translations as CSV: the page's language, then each language it keeps. */
+export function translationsCsv(page) {
+    const languages = languagesOf(page);
+    return toCsv([[pageLanguage(page), ...languages], ...pageWords(page).map((word) => [word, ...languages.map((tag) => page.translations?.[tag]?.[word] ?? '')])]);
+}
+/**
+ * A CSV as translations to fill: each column after the first by the language
+ * its first row names, by tag or name; the page's own language and unnamed
+ * columns skipped. Words the page no longer has are left out, and counted.
+ */
+export function readTranslationsCsv(text, page, words = en) {
+    const w = words.translations;
+    const [head, ...rows] = parseCsv(text);
+    if (!head)
+        return { problem: w.nothingToRead };
+    const columns = [];
+    for (const [at, name] of head.entries()) {
+        if (at === 0 || !name.trim())
+            continue;
+        const tag = languageTag(name, words);
+        if (!tag)
+            return { problem: w.notALanguage(name.trim()) };
+        if (tag !== pageLanguage(page))
+            columns.push([at, tag]);
+    }
+    if (!columns.length)
+        return { problem: w.noLanguageColumn };
+    const shown = new Set(pageWords(page));
+    const found = {};
+    let notOnPage = 0;
+    for (const row of rows) {
+        const source = row[0] ?? '';
+        const given = columns.filter(([at]) => row[at]?.trim());
+        if (!given.length)
+            continue;
+        if (!shown.has(source)) {
+            notOnPage++;
+            continue;
+        }
+        for (const [at, tag] of given)
+            (found[tag] ??= {})[source] = row[at];
+    }
+    return { words: found, notOnPage };
+}
+//# sourceMappingURL=translations-csv.mjs.map

package/src/lib/translations-csv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations-csv.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/translations-csv.ts"],"names":[],"mappings":"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"}

package/src/lib/translations-grid.d.mts

@@ -0,0 +1,30 @@
+import { type Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+/**
+ * The grid of the Translations view: a row per word on the page, in reading
+ * order; the page's own words first, then a column per language, each cell
+ * typed in where it stands — right to left for a language written so — and
+ * each column saying how far it has got. Enter and the arrows move between
+ * cells as in a sheet. Under it, the translations of words no longer on the
+ * page, to let go of one by one or all at once.
+ */
+export interface WordsGridOptions {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+    /** A language's remove button was pressed: the view asks first. */
+    onRemove(tag: string): void;
+}
+export interface WordsGrid {
+    /** The grid, in a box of its own that scrolls both ways. */
+    element: HTMLElement;
+    /** The translations of words no longer on the page. */
+    stale: HTMLElement;
+    update(page: Page): void;
+    /** Only the words some language has not got — decided now, not as each word is typed, so a row stays while it is filled. */
+    setOnlyMissing(on: boolean): void;
+    /** The first cell of a language, to type in. */
+    focusLanguage(tag: string): void;
+}
+export declare function wordsGrid(options: WordsGridOptions): WordsGrid;

package/src/lib/translations-grid.d.ts

@@ -0,0 +1,30 @@
+import { type Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+/**
+ * The grid of the Translations view: a row per word on the page, in reading
+ * order; the page's own words first, then a column per language, each cell
+ * typed in where it stands — right to left for a language written so — and
+ * each column saying how far it has got. Enter and the arrows move between
+ * cells as in a sheet. Under it, the translations of words no longer on the
+ * page, to let go of one by one or all at once.
+ */
+export interface WordsGridOptions {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+    /** A language's remove button was pressed: the view asks first. */
+    onRemove(tag: string): void;
+}
+export interface WordsGrid {
+    /** The grid, in a box of its own that scrolls both ways. */
+    element: HTMLElement;
+    /** The translations of words no longer on the page. */
+    stale: HTMLElement;
+    update(page: Page): void;
+    /** Only the words some language has not got — decided now, not as each word is typed, so a row stays while it is filled. */
+    setOnlyMissing(on: boolean): void;
+    /** The first cell of a language, to type in. */
+    focusLanguage(tag: string): void;
+}
+export declare function wordsGrid(options: WordsGridOptions): WordsGrid;

package/src/lib/translations-grid.js

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wordsGrid = wordsGrid;
+const core_1 = require("@fieldia/core");
+const translations_1 = require("./translations");
+/** A language's own name for itself, such as العربية, when the browser knows it and it differs from the English. */
+function ownName(tag, words) {
+    try {
+        const name = new Intl.DisplayNames([tag], { type: 'language' }).of(tag);
+        return name && name !== tag && name !== (0, translations_1.languageName)(tag, words) ? name : null;
+    }
+    catch {
+        return null;
+    }
+}
+const direction = (tag) => ((0, core_1.isRightToLeft)(tag) ? 'rtl' : 'ltr');
+function wordsGrid(options) {
+    const { el, designer } = options;
+    const said = designer.words;
+    const w = said.translations;
+    const nameOf = (tag) => (0, translations_1.languageName)(tag, said);
+    /** Words in their language, running its way; the cell around them keeps the grid's direction, so its lines and its place hold. */
+    const inLanguage = (tag, text) => el('div', { class: 'fd-words-text', lang: tag, dir: direction(tag) }, text);
+    const head = el('thead');
+    const rows = el('tbody');
+    const none = el('p', { class: 'fd-words-none', hidden: '' }, w.allTranslated);
+    // A region the keyboard can scroll (WCAG 2.1.1): wide grids scroll sideways, and a grid of the page's words alone has nothing to focus.
+    const element = el('div', { class: 'fd-words-scroll', role: 'region', 'aria-label': w.grid, tabindex: '0' }, el('table', { class: 'fd-words-table fd-words-grid' }, head, rows), none);
+    const staleHead = el('thead');
+    const staleRows = el('tbody');
+    const removeAll = el('button', { type: 'button', class: 'fd-button' }, w.removeAll);
+    removeAll.addEventListener('click', () => designer.forgetWords((0, translations_1.staleWords)(designer.getPage())));
+    const stale = el('section', { class: 'fd-words-stale', 'aria-labelledby': 'fd-words-stale-title', hidden: '' }, el('div', { class: 'fd-words-stale-head' }, el('h3', { id: 'fd-words-stale-title', class: 'fd-words-stale-title' }, w.staleTitle), el('p', { class: 'fd-words-stale-note' }, w.staleNote), removeAll), el('div', { class: 'fd-words-scroll', role: 'region', 'aria-label': w.staleGrid, tabindex: '0' }, el('table', { class: 'fd-words-table fd-words-stale-grid' }, staleHead, staleRows)));
+    /** Cells by language and word, kept from one drawing to the next so the one typed in keeps its focus. */
+    const cells = new Map();
+    /** What each cell last kept, as typed: a cell being typed in shows its own words, unless they changed elsewhere, by an undo. */
+    const sent = new WeakMap();
+    const progress = new Map();
+    let shape = '';
+    let staleShape = '';
+    let onlyMissing = false;
+    function cellFor(tag, word) {
+        const key = `${tag}\n${word}`;
+        let cell = cells.get(key);
+        if (!cell) {
+            cell = el('textarea', { class: 'fd-words-cell', rows: '1', lang: tag, dir: direction(tag), 'data-lang': tag, 'data-word': word, 'aria-label': w.cell(nameOf(tag), word) });
+            const typed = cell;
+            typed.addEventListener('input', () => {
+                sent.set(typed, typed.value.trim() ? typed.value : '');
+                designer.setTranslation(tag, word, typed.value);
+            });
+            cells.set(key, cell);
+        }
+        return cell;
+    }
+    function drawHead(page, languages) {
+        const own = (0, translations_1.pageLanguage)(page);
+        progress.clear();
+        const columns = languages.map((tag) => {
+            const remove = el('button', { type: 'button', class: 'fd-icon-button fd-icon-danger fd-words-remove', 'aria-label': w.remove(nameOf(tag)), title: w.remove(nameOf(tag)) }, '×');
+            remove.addEventListener('click', () => options.onRemove(tag));
+            const native = ownName(tag, said);
+            const bar = el('span');
+            const count = el('span', { class: 'fd-words-count' });
+            const th = el('th', { scope: 'col' }, el('div', { class: 'fd-words-head' }, el('span', { class: 'fd-words-lang' }, nameOf(tag)), ...(native ? [el('span', { class: 'fd-words-native', lang: tag, dir: direction(tag) }, native)] : []), remove), el('div', { class: 'fd-words-progress' }, el('span', { class: 'fd-words-meter', 'aria-hidden': 'true' }, bar), count));
+            progress.set(tag, { th, bar, count });
+            return th;
+        });
+        const first = el('th', { scope: 'col', 'aria-label': w.ownWordsHead(nameOf(own)) }, el('div', { class: 'fd-words-head' }, el('span', { class: 'fd-words-lang' }, nameOf(own))), el('div', { class: 'fd-words-own' }, w.ownWords));
+        head.replaceChildren(el('tr', {}, first, ...columns));
+    }
+    function drawRows(page, words, languages) {
+        const own = (0, translations_1.pageLanguage)(page);
+        const live = new Set();
+        rows.replaceChildren(...words.map((word) => {
+            const tds = languages.map((tag, col) => {
+                live.add(`${tag}\n${word}`);
+                const cell = cellFor(tag, word);
+                cell.dataset['col'] = String(col);
+                return el('td', {}, cell);
+            });
+            return el('tr', { 'data-word': word }, el('th', { scope: 'row', class: 'fd-words-source' }, inLanguage(own, word)), ...tds);
+        }));
+        for (const key of [...cells.keys()])
+            if (!live.has(key))
+                cells.delete(key);
+    }
+    /** Rows every language has translated, out of sight while only the missing words show. */
+    function filter(page) {
+        const languages = (0, translations_1.languagesOf)(page);
+        let shown = 0;
+        for (const tr of rows.children) {
+            const word = tr.dataset['word'];
+            tr.hidden = onlyMissing && languages.length > 0 && languages.every((tag) => !!page.translations?.[tag]?.[word]);
+            if (!tr.hidden)
+                shown++;
+        }
+        none.hidden = shown > 0 || !rows.children.length;
+    }
+    function drawStale(page) {
+        const words = (0, translations_1.staleWords)(page);
+        const languages = (0, translations_1.languagesOf)(page).filter((tag) => words.some((word) => page.translations?.[tag]?.[word]));
+        const key = JSON.stringify(words.map((word) => [word, ...languages.map((tag) => page.translations?.[tag]?.[word] ?? '')]));
+        stale.hidden = !words.length;
+        if (key === staleShape)
+            return;
+        staleShape = key;
+        staleHead.replaceChildren(el('tr', {}, el('th', { scope: 'col' }, w.words), ...languages.map((tag) => el('th', { scope: 'col' }, nameOf(tag))), el('th', { scope: 'col', class: 'fd-words-gone-remove' }, el('span', { class: 'fd-sr-only' }, w.removeColumn))));
+        staleRows.replaceChildren(...words.map((word) => {
+            const remove = el('button', { type: 'button', class: 'fd-icon-button fd-icon-danger', 'aria-label': w.removeWord(word), title: w.removeItsTranslations }, '×');
+            remove.addEventListener('click', () => designer.forgetWords([word]));
+            return el('tr', {}, el('th', { scope: 'row', class: 'fd-words-source' }, inLanguage((0, translations_1.pageLanguage)(page), word)), ...languages.map((tag) => el('td', { class: 'fd-words-gone' }, inLanguage(tag, page.translations?.[tag]?.[word] ?? ''))), el('td', { class: 'fd-words-gone-remove' }, remove));
+        }));
+    }
+    // ---- like a sheet: Enter and the arrows move between cells ----------------
+    /** The cell `rowsBy` rows down and `colsBy` columns along, among the rows on show; the caret at the end of its words. */
+    function move(from, rowsBy, colsBy) {
+        const shown = [...rows.children].filter((tr) => !tr.hidden);
+        const at = shown.indexOf(from.closest('tr'));
+        const target = shown[at + rowsBy]?.querySelectorAll('textarea')[Number(from.dataset['col']) + colsBy];
+        if (!target)
+            return false;
+        target.focus();
+        target.setSelectionRange(target.value.length, target.value.length);
+        return true;
+    }
+    rows.addEventListener('keydown', (event) => {
+        const cell = event.target;
+        if (!cell.matches('textarea') || event.isComposing || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const { key } = event;
+        const caret = cell.selectionStart === cell.selectionEnd ? cell.selectionStart : -1;
+        const rtl = cell.getAttribute('dir') === 'rtl';
+        // The visual ends of the words: right to left, the end of the words is on the left.
+        const atLeft = caret === (rtl ? cell.value.length : 0);
+        const atRight = caret === (rtl ? 0 : cell.value.length);
+        let by = null;
+        if (key === 'Enter')
+            by = [event.shiftKey ? -1 : 1, 0];
+        else if (event.shiftKey)
+            return;
+        else if (key === 'ArrowDown' || key === 'ArrowUp')
+            by = [key === 'ArrowDown' ? 1 : -1, 0];
+        else if (key === 'ArrowLeft' && atLeft)
+            by = [0, -1];
+        else if (key === 'ArrowRight' && atRight)
+            by = [0, 1];
+        if (!by)
+            return;
+        // Enter never breaks a line, even in the last row.
+        if (move(cell, ...by) || key === 'Enter')
+            event.preventDefault();
+    });
+    return {
+        element,
+        stale,
+        update(page) {
+            const words = (0, translations_1.wordsOf)(page);
+            const languages = (0, translations_1.languagesOf)(page);
+            const next = JSON.stringify([(0, translations_1.pageLanguage)(page), words, languages]);
+            if (next !== shape) {
+                shape = next;
+                drawHead(page, languages);
+                drawRows(page, words, languages);
+                filter(page);
+            }
+            for (const [key, cell] of cells) {
+                const [tag, word] = key.split('\n');
+                const text = page.translations?.[tag]?.[word] ?? '';
+                // Written only when it changes: a grid of every word is brought up to date at each key typed in it.
+                if ((cell.ownerDocument.activeElement !== cell || text !== (sent.get(cell) ?? text)) && cell.value !== text)
+                    cell.value = text;
+                if (cell.hasAttribute('data-empty') !== !text)
+                    cell.toggleAttribute('data-empty', !text);
+            }
+            for (const [tag, { th, bar, count }] of progress) {
+                const { done, total } = (0, translations_1.translationProgress)(page, tag);
+                const label = w.progress(nameOf(tag), done, total);
+                if (th.getAttribute('aria-label') !== label)
+                    th.setAttribute('aria-label', label);
+                const short = w.progressCount(done, total);
+                if (count.textContent !== short)
+                    count.textContent = short;
+                bar.style.width = `${total ? (done / total) * 100 : 0}%`;
+            }
+            drawStale(page);
+        },
+        setOnlyMissing(on) {
+            onlyMissing = on;
+            filter(designer.getPage());
+        },
+        focusLanguage(tag) {
+            const first = rows.querySelector(`tr:not([hidden]) textarea[data-lang="${tag}"]`);
+            first?.focus();
+        },
+    };
+}
+//# sourceMappingURL=translations-grid.js.map

package/src/lib/translations-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations-grid.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/translations-grid.ts"],"names":[],"mappings":"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"}

package/src/lib/translations-grid.mjs

@@ -0,0 +1,195 @@
+import { isRightToLeft } from '@fieldia/core';
+import { languageName, languagesOf, pageLanguage, staleWords, translationProgress, wordsOf } from './translations.mjs';
+/** A language's own name for itself, such as العربية, when the browser knows it and it differs from the English. */
+function ownName(tag, words) {
+    try {
+        const name = new Intl.DisplayNames([tag], { type: 'language' }).of(tag);
+        return name && name !== tag && name !== languageName(tag, words) ? name : null;
+    }
+    catch {
+        return null;
+    }
+}
+const direction = (tag) => (isRightToLeft(tag) ? 'rtl' : 'ltr');
+export function wordsGrid(options) {
+    const { el, designer } = options;
+    const said = designer.words;
+    const w = said.translations;
+    const nameOf = (tag) => languageName(tag, said);
+    /** Words in their language, running its way; the cell around them keeps the grid's direction, so its lines and its place hold. */
+    const inLanguage = (tag, text) => el('div', { class: 'fd-words-text', lang: tag, dir: direction(tag) }, text);
+    const head = el('thead');
+    const rows = el('tbody');
+    const none = el('p', { class: 'fd-words-none', hidden: '' }, w.allTranslated);
+    // A region the keyboard can scroll (WCAG 2.1.1): wide grids scroll sideways, and a grid of the page's words alone has nothing to focus.
+    const element = el('div', { class: 'fd-words-scroll', role: 'region', 'aria-label': w.grid, tabindex: '0' }, el('table', { class: 'fd-words-table fd-words-grid' }, head, rows), none);
+    const staleHead = el('thead');
+    const staleRows = el('tbody');
+    const removeAll = el('button', { type: 'button', class: 'fd-button' }, w.removeAll);
+    removeAll.addEventListener('click', () => designer.forgetWords(staleWords(designer.getPage())));
+    const stale = el('section', { class: 'fd-words-stale', 'aria-labelledby': 'fd-words-stale-title', hidden: '' }, el('div', { class: 'fd-words-stale-head' }, el('h3', { id: 'fd-words-stale-title', class: 'fd-words-stale-title' }, w.staleTitle), el('p', { class: 'fd-words-stale-note' }, w.staleNote), removeAll), el('div', { class: 'fd-words-scroll', role: 'region', 'aria-label': w.staleGrid, tabindex: '0' }, el('table', { class: 'fd-words-table fd-words-stale-grid' }, staleHead, staleRows)));
+    /** Cells by language and word, kept from one drawing to the next so the one typed in keeps its focus. */
+    const cells = new Map();
+    /** What each cell last kept, as typed: a cell being typed in shows its own words, unless they changed elsewhere, by an undo. */
+    const sent = new WeakMap();
+    const progress = new Map();
+    let shape = '';
+    let staleShape = '';
+    let onlyMissing = false;
+    function cellFor(tag, word) {
+        const key = `${tag}\n${word}`;
+        let cell = cells.get(key);
+        if (!cell) {
+            cell = el('textarea', { class: 'fd-words-cell', rows: '1', lang: tag, dir: direction(tag), 'data-lang': tag, 'data-word': word, 'aria-label': w.cell(nameOf(tag), word) });
+            const typed = cell;
+            typed.addEventListener('input', () => {
+                sent.set(typed, typed.value.trim() ? typed.value : '');
+                designer.setTranslation(tag, word, typed.value);
+            });
+            cells.set(key, cell);
+        }
+        return cell;
+    }
+    function drawHead(page, languages) {
+        const own = pageLanguage(page);
+        progress.clear();
+        const columns = languages.map((tag) => {
+            const remove = el('button', { type: 'button', class: 'fd-icon-button fd-icon-danger fd-words-remove', 'aria-label': w.remove(nameOf(tag)), title: w.remove(nameOf(tag)) }, '×');
+            remove.addEventListener('click', () => options.onRemove(tag));
+            const native = ownName(tag, said);
+            const bar = el('span');
+            const count = el('span', { class: 'fd-words-count' });
+            const th = el('th', { scope: 'col' }, el('div', { class: 'fd-words-head' }, el('span', { class: 'fd-words-lang' }, nameOf(tag)), ...(native ? [el('span', { class: 'fd-words-native', lang: tag, dir: direction(tag) }, native)] : []), remove), el('div', { class: 'fd-words-progress' }, el('span', { class: 'fd-words-meter', 'aria-hidden': 'true' }, bar), count));
+            progress.set(tag, { th, bar, count });
+            return th;
+        });
+        const first = el('th', { scope: 'col', 'aria-label': w.ownWordsHead(nameOf(own)) }, el('div', { class: 'fd-words-head' }, el('span', { class: 'fd-words-lang' }, nameOf(own))), el('div', { class: 'fd-words-own' }, w.ownWords));
+        head.replaceChildren(el('tr', {}, first, ...columns));
+    }
+    function drawRows(page, words, languages) {
+        const own = pageLanguage(page);
+        const live = new Set();
+        rows.replaceChildren(...words.map((word) => {
+            const tds = languages.map((tag, col) => {
+                live.add(`${tag}\n${word}`);
+                const cell = cellFor(tag, word);
+                cell.dataset['col'] = String(col);
+                return el('td', {}, cell);
+            });
+            return el('tr', { 'data-word': word }, el('th', { scope: 'row', class: 'fd-words-source' }, inLanguage(own, word)), ...tds);
+        }));
+        for (const key of [...cells.keys()])
+            if (!live.has(key))
+                cells.delete(key);
+    }
+    /** Rows every language has translated, out of sight while only the missing words show. */
+    function filter(page) {
+        const languages = languagesOf(page);
+        let shown = 0;
+        for (const tr of rows.children) {
+            const word = tr.dataset['word'];
+            tr.hidden = onlyMissing && languages.length > 0 && languages.every((tag) => !!page.translations?.[tag]?.[word]);
+            if (!tr.hidden)
+                shown++;
+        }
+        none.hidden = shown > 0 || !rows.children.length;
+    }
+    function drawStale(page) {
+        const words = staleWords(page);
+        const languages = languagesOf(page).filter((tag) => words.some((word) => page.translations?.[tag]?.[word]));
+        const key = JSON.stringify(words.map((word) => [word, ...languages.map((tag) => page.translations?.[tag]?.[word] ?? '')]));
+        stale.hidden = !words.length;
+        if (key === staleShape)
+            return;
+        staleShape = key;
+        staleHead.replaceChildren(el('tr', {}, el('th', { scope: 'col' }, w.words), ...languages.map((tag) => el('th', { scope: 'col' }, nameOf(tag))), el('th', { scope: 'col', class: 'fd-words-gone-remove' }, el('span', { class: 'fd-sr-only' }, w.removeColumn))));
+        staleRows.replaceChildren(...words.map((word) => {
+            const remove = el('button', { type: 'button', class: 'fd-icon-button fd-icon-danger', 'aria-label': w.removeWord(word), title: w.removeItsTranslations }, '×');
+            remove.addEventListener('click', () => designer.forgetWords([word]));
+            return el('tr', {}, el('th', { scope: 'row', class: 'fd-words-source' }, inLanguage(pageLanguage(page), word)), ...languages.map((tag) => el('td', { class: 'fd-words-gone' }, inLanguage(tag, page.translations?.[tag]?.[word] ?? ''))), el('td', { class: 'fd-words-gone-remove' }, remove));
+        }));
+    }
+    // ---- like a sheet: Enter and the arrows move between cells ----------------
+    /** The cell `rowsBy` rows down and `colsBy` columns along, among the rows on show; the caret at the end of its words. */
+    function move(from, rowsBy, colsBy) {
+        const shown = [...rows.children].filter((tr) => !tr.hidden);
+        const at = shown.indexOf(from.closest('tr'));
+        const target = shown[at + rowsBy]?.querySelectorAll('textarea')[Number(from.dataset['col']) + colsBy];
+        if (!target)
+            return false;
+        target.focus();
+        target.setSelectionRange(target.value.length, target.value.length);
+        return true;
+    }
+    rows.addEventListener('keydown', (event) => {
+        const cell = event.target;
+        if (!cell.matches('textarea') || event.isComposing || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const { key } = event;
+        const caret = cell.selectionStart === cell.selectionEnd ? cell.selectionStart : -1;
+        const rtl = cell.getAttribute('dir') === 'rtl';
+        // The visual ends of the words: right to left, the end of the words is on the left.
+        const atLeft = caret === (rtl ? cell.value.length : 0);
+        const atRight = caret === (rtl ? 0 : cell.value.length);
+        let by = null;
+        if (key === 'Enter')
+            by = [event.shiftKey ? -1 : 1, 0];
+        else if (event.shiftKey)
+            return;
+        else if (key === 'ArrowDown' || key === 'ArrowUp')
+            by = [key === 'ArrowDown' ? 1 : -1, 0];
+        else if (key === 'ArrowLeft' && atLeft)
+            by = [0, -1];
+        else if (key === 'ArrowRight' && atRight)
+            by = [0, 1];
+        if (!by)
+            return;
+        // Enter never breaks a line, even in the last row.
+        if (move(cell, ...by) || key === 'Enter')
+            event.preventDefault();
+    });
+    return {
+        element,
+        stale,
+        update(page) {
+            const words = wordsOf(page);
+            const languages = languagesOf(page);
+            const next = JSON.stringify([pageLanguage(page), words, languages]);
+            if (next !== shape) {
+                shape = next;
+                drawHead(page, languages);
+                drawRows(page, words, languages);
+                filter(page);
+            }
+            for (const [key, cell] of cells) {
+                const [tag, word] = key.split('\n');
+                const text = page.translations?.[tag]?.[word] ?? '';
+                // Written only when it changes: a grid of every word is brought up to date at each key typed in it.
+                if ((cell.ownerDocument.activeElement !== cell || text !== (sent.get(cell) ?? text)) && cell.value !== text)
+                    cell.value = text;
+                if (cell.hasAttribute('data-empty') !== !text)
+                    cell.toggleAttribute('data-empty', !text);
+            }
+            for (const [tag, { th, bar, count }] of progress) {
+                const { done, total } = translationProgress(page, tag);
+                const label = w.progress(nameOf(tag), done, total);
+                if (th.getAttribute('aria-label') !== label)
+                    th.setAttribute('aria-label', label);
+                const short = w.progressCount(done, total);
+                if (count.textContent !== short)
+                    count.textContent = short;
+                bar.style.width = `${total ? (done / total) * 100 : 0}%`;
+            }
+            drawStale(page);
+        },
+        setOnlyMissing(on) {
+            onlyMissing = on;
+            filter(designer.getPage());
+        },
+        focusLanguage(tag) {
+            const first = rows.querySelector(`tr:not([hidden]) textarea[data-lang="${tag}"]`);
+            first?.focus();
+        },
+    };
+}
+//# sourceMappingURL=translations-grid.mjs.map