sitevision-cli 1.0.0-beta.8 → 1.0.0

package/dist/shell/Frame.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { appTypeOf, getPackageJsonSyncChanges, localizedText, } from '../utils/project-detection.js';
+import { fuzzyMatch } from './actions.js';
+import { t } from '../utils/i18n.js';
+export const ACCENT = 'cyan';
+export const NARROW_BELOW = 100;
+/** Navigator width for a terminal: a quarter of the columns, within 32..48. */
+export function navWidth(columns) {
+    return Math.min(48, Math.max(32, Math.floor(columns / 4)));
+}
+export function TopBar({ context, domain, auth, version, environment, }) {
+    // Narrow terminals squeeze the domain first, then the context, then the
+    // login. `svc` and the environment badge never give way: the badge is the
+    // one thing that says a deploy goes to production.
+    return (_jsxs(Box, { paddingX: 1, height: 1, overflow: "hidden", children: [_jsxs(Box, { flexShrink: 0, children: [_jsx(Text, { bold: true, color: ACCENT, children: "svc" }), environment && (_jsxs(Text, { children: [' ', _jsx(Text, { backgroundColor: environment.color, color: "black", bold: true, children: ` ${environment.name.toUpperCase()} ` })] }))] }), _jsx(Box, { flexShrink: 2, flexGrow: 1, marginRight: 2, minWidth: 0, children: _jsxs(Text, { dimColor: true, wrap: "truncate", children: [' ', context] }) }), domain && (_jsx(Box, { flexShrink: 100, minWidth: 0, marginRight: 1, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: domain }) })), _jsx(Box, { flexShrink: 1, minWidth: 0, children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: auth.ready ? 'green' : 'yellow', children: auth.ready ? '●' : '○' }), _jsxs(Text, { children: [" ", auth.label] })] }) }), _jsx(Box, { flexShrink: 0, children: _jsxs(Text, { dimColor: true, children: [" v", version] }) })] }));
+}
+const TYPE_GLYPH = {
+    web: 'web',
+    widget: 'wgt',
+    rest: 'rst',
+    mcp: 'mcp',
+};
+/** Three-letter type marker; unknown manifest types show as "???". */
+export function typeGlyph(manifest) {
+    const type = appTypeOf(manifest);
+    return type ? TYPE_GLYPH[type] : '???';
+}
+export function appStatus(project) {
+    const sync = getPackageJsonSyncChanges(project.root).length;
+    return {
+        deps: project.hasNodeModules,
+        config: Boolean(project.devProperties),
+        sync,
+        signing: project.hasSigningProperties,
+        scriptsWarning: undefined,
+    };
+}
+function Dots({ project }) {
+    const s = appStatus(project);
+    const dot = (ok, warn = false) => (_jsx(Text, { color: ok ? 'green' : warn ? 'yellow' : 'red', children: "\u25CF" }));
+    return (_jsxs(Text, { children: [dot(s.deps), dot(s.config), dot(s.sync === 0, s.sync > 0), dot(s.signing, !s.signing)] }));
+}
+/** The name shown for an app in the navigator, and what the filter matches. */
+export function appLabel(app) {
+    return localizedText(app.manifest.name) || app.manifest.id;
+}
+/** Indices into `apps` whose label fuzzy-matches the filter. */
+export function navMatches(apps, filter) {
+    return apps
+        .map((_, index) => index)
+        .filter(index => fuzzyMatch(filter, appLabel(apps[index])));
+}
+/** Next selectable index when moving by `delta`, wrapping at both ends. */
+export function navMove(ring, selected, delta) {
+    if (ring.length === 0)
+        return selected;
+    const at = ring.indexOf(selected);
+    return ring[at === -1 ? 0 : (at + delta + ring.length) % ring.length];
+}
+export function Navigator({ apps, groupOf, selected, focused, tasks, height, single, settingsSelected = false, width, filter = '', }) {
+    // Row: marker(1) glyph(3) sp name sp version(6) sp dots(4) inside padding + border.
+    const rowWidth = width - 3;
+    const nameWidth = rowWidth - 17;
+    const running = tasks.filter(task => task.status === 'running');
+    // Every row is exactly one line; nothing may shrink or the rows overlap.
+    const rows = [];
+    const rowApp = [];
+    let lastGroup;
+    for (const [index, app] of apps.entries()) {
+        const group = groupOf(app);
+        if (!single && group !== lastGroup) {
+            rows.push(_jsx(Box, { height: 1, flexShrink: 0, children: _jsxs(Text, { dimColor: true, wrap: "truncate", children: ['  ', group] }) }, `g-${index}-${group}`));
+            rowApp.push(-1);
+            lastGroup = group;
+        }
+        rowApp.push(index);
+        const active = index === selected;
+        const busy = running.some(task => task.appRoot === app.root);
+        const name = appLabel(app);
+        rows.push(_jsxs(Box, { width: rowWidth, height: 1, flexShrink: 0, children: [_jsxs(Text, { backgroundColor: active && focused ? ACCENT : undefined, color: active && focused ? 'black' : undefined, bold: active, wrap: "truncate", children: [active ? '▎' : ' ', _jsx(Text, { dimColor: !active, children: typeGlyph(app.manifest) }), ' ', name.padEnd(nameWidth).slice(0, nameWidth), ' ', _jsx(Text, { dimColor: true, children: app.manifest.version.padStart(6).slice(0, 6) }), ' '] }), busy ? (_jsx(Text, { color: ACCENT, children: _jsx(Spinner, { type: "dots" }) })) : (_jsx(Dots, { project: app }))] }, app.root));
+    }
+    if (rows.length === 0) {
+        rows.push(_jsx(Box, { height: 1, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: '  ' + t('no matches') }) }, "none"));
+        rowApp.push(-1);
+    }
+    // Window the list so the selected app stays visible; the lines outside
+    // are summarised as "… n more".
+    // Top border, header and legend, then the settings row and running tasks.
+    const fixed = 3 + (single ? 0 : 2) + (running.length > 0 ? running.length + 2 : 0);
+    const avail = Math.max(3, height - fixed);
+    let shown = rows;
+    if (rows.length > avail) {
+        const target = settingsSelected
+            ? rows.length - 1
+            : rowApp.indexOf(selected);
+        const start = Math.max(0, Math.min(target - Math.floor(avail / 2), rows.length - avail));
+        const end = start + avail;
+        shown = rows.slice(start, end);
+        const more = (n, arrow) => (_jsx(Box, { height: 1, flexShrink: 0, children: _jsxs(Text, { dimColor: true, children: ['  ', t('{arrow} {n} more', { arrow, n })] }) }, `more-${arrow}`));
+        if (start > 0)
+            shown[0] = more(start, '↑');
+        if (end < rows.length)
+            shown[shown.length - 1] = more(rows.length - end, '↓');
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: "single", borderColor: focused ? ACCENT : undefined, borderDimColor: !focused, borderBottom: false, borderLeft: false, paddingX: 1, overflow: "hidden", children: [filter ? (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: ACCENT, children: "\u276F " }), filter, _jsx(Text, { inverse: true, children: " " }), _jsxs(Text, { dimColor: true, children: [' ', apps.length === 1
+                                ? t('1 match')
+                                : t('{n} matches', { n: apps.length })] })] })) : (_jsx(Text, { bold: true, color: focused ? ACCENT : undefined, dimColor: !focused, children: single
+                    ? t('APP')
+                    : apps.length === 1
+                        ? t('WORKSPACE 1 app')
+                        : t('WORKSPACE {n} apps', { n: apps.length }) })), shown, _jsx(Text, { dimColor: true, children: '  ' + t('deps·config·sync·signing') }), !single && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { backgroundColor: settingsSelected && focused ? ACCENT : undefined, color: settingsSelected && focused ? 'black' : undefined, bold: settingsSelected, children: [settingsSelected ? '▎' : ' ', "\u2699 ", t('Workspace settings')] }) })), running.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: t('TASKS') }), running.map(task => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: ACCENT, children: _jsx(Spinner, { type: "dots" }) }), ' ', task.label, " ", task.appName, " ", _jsx(Text, { dimColor: true, children: elapsed(task) })] }, task.id)))] }))] }));
+}
+export function NavigatorStrip({ apps, selected, focused, width, filter = '', }) {
+    const label = (app) => ` ${typeGlyph(app.manifest)} ${appLabel(app)} `;
+    // Scroll the strip so the selection stays on screen: walk left from it
+    // until the row is full.
+    const budget = width - 2 - (filter ? filter.length + 5 : 0);
+    const from = Math.min(Math.max(0, selected), apps.length - 1);
+    let start = from;
+    let used = 0;
+    for (let i = from; i >= 0; i--) {
+        used += label(apps[i]).length;
+        if (used > budget)
+            break;
+        start = i;
+    }
+    return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { wrap: "truncate", children: [filter && (_jsxs(Text, { children: [_jsx(Text, { color: ACCENT, children: "\u276F " }), filter, _jsx(Text, { dimColor: true, children: " \u00B7" })] })), apps.slice(start).map((app, index) => (_jsx(Text, { backgroundColor: index + start === selected && focused ? ACCENT : undefined, color: index + start === selected && focused ? 'black' : undefined, bold: index + start === selected, children: label(app) }, app.root)))] }) }));
+}
+export function elapsed(task) {
+    const ms = (task.endedAt ?? Date.now()) - task.startedAt;
+    const s = Math.round(ms / 1000);
+    return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+export function BottomBar({ hints, right }) {
+    return (_jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [_jsx(Text, { wrap: "truncate", children: hints.map(h => (_jsxs(Text, { children: [_jsx(Text, { bold: true, color: ACCENT, children: h.key }), _jsxs(Text, { dimColor: true, children: [" ", h.label, " "] })] }, h.key + h.label))) }), right] }));
+}

package/dist/shell/Help.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Box, Text, measureElement, useInput } from 'ink';
+import { t } from '../utils/i18n.js';
+import { ACCENT } from './Frame.js';
+import { actions } from './actions.js';
+import { GROUPS } from './CommandPalette.js';
+// What the pane you are in does, beyond the key list. One entry per paragraph.
+const GUIDE = {
+    nav: {
+        title: 'Navigator',
+        text: [
+            'Typing filters the app list. ↑↓ move, Enter selects the app and moves focus to the content pane. Action keys such as d or p only work there; in the navigator they search.',
+            'The last row is Workspace settings: the shared root config that every app inherits.',
+        ],
+    },
+    workspace: {
+        title: 'Workspace settings',
+        text: [
+            "The root .dev_properties.json shared by every app, with the root package.json defaults underneath. Fill in site, auth and environments once; an app's own config overrides only what differs.",
+            'Same keys as the Config tab: Enter edits and saves, Esc cancels, ←→ or space cycles choices.',
+        ],
+    },
+    overview: {
+        title: 'Overview',
+        text: [
+            'Each status line names the key that fixes it: i installs dependencies, e opens Config, y syncs package.json, / sets up signing.',
+            'The badge in the top bar is the active environment: green for the base, yellow for others, red for production. v cycles it.',
+        ],
+    },
+    config: {
+        title: 'Config',
+        text: [
+            'Values come in layers and the source is shown next to each: your local .dev_properties.json wins, shared package.json values sit underneath, and in a workspace the root config underneath that. Environments add on top of the base and override only what differs.',
+            'Enter edits and saves a field, Esc cancels, ←→ or space cycles choices, Ctrl+O lists the addons on the site. y copies shared values into package.json for the team.',
+            'Passwords and secrets go to the OS keychain, never to a file. Leave them empty to be asked on each run.',
+        ],
+    },
+    versions: {
+        title: 'Versions',
+        text: [
+            "The versions uploaded to the addon on the active environment's site, the domain in the top bar. v switches environment.",
+            '↑↓ select, a activates the selected version, r refreshes. Production deploys activate on their own.',
+        ],
+    },
+    log: {
+        title: 'Log',
+        text: [
+            'Output from build, sign, deploy, dev and watch for the selected app. Dev and watch keep running while you switch apps; K stops them.',
+            '↑↓ scroll, PgUp/PgDn page, f jumps to the end, x toggles line wrap.',
+        ],
+    },
+};
+const MOVE = [
+    ['Tab', 'switch pane'],
+    ['1–4', 'tabs'],
+    ['←→', 'tabs'],
+    ['/', 'commands'],
+    ['?', 'help'],
+    ['Esc', 'back'],
+];
+function Row({ keys, label }) {
+    return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { bold: true, color: ACCENT, children: keys.padEnd(6) }), label] }));
+}
+export function HelpPanel({ here, where, height, onClose, }) {
+    const inner = useRef(null);
+    const [top, setTop] = useState(0);
+    const [total, setTotal] = useState(0);
+    // The text depends on the pane and the language, both fixed while this is open.
+    useEffect(() => {
+        if (inner.current)
+            setTotal(measureElement(inner.current).height);
+    }, [here, where, height]);
+    const visible = Math.max(1, height - 1);
+    const max = Math.max(0, total - visible);
+    useInput((input, key) => {
+        if (key.escape || key.return || input === '?' || input === 'q')
+            onClose();
+        else if (key.upArrow)
+            setTop(n => Math.max(0, n - 1));
+        else if (key.downArrow)
+            setTop(n => Math.min(max, n + 1));
+        else if (key.pageUp)
+            setTop(n => Math.max(0, n - visible));
+        else if (key.pageDown)
+            setTop(n => Math.min(max, n + visible));
+    });
+    // Only keys not already listed elsewhere, e.g. f and x on the Log tab.
+    const local = here.filter(hint => actions.every(action => action.key !== hint.key) &&
+        MOVE.every(([keys]) => keys !== hint.key));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: height, overflow: "hidden", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: t(GUIDE[where].title) }), _jsxs(Text, { dimColor: true, children: [' · ', max > 0 ? t('↑↓ scroll · Esc close') : t('Esc close')] })] }), _jsx(Box, { flexDirection: "column", overflow: "hidden", height: visible, children: _jsxs(Box, { ref: inner, flexDirection: "column", flexShrink: 0, marginTop: -top, children: [GUIDE[where].text.map(line => (_jsx(Text, { wrap: "wrap", children: t(line) }, line))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, children: t('Keys') }) }), _jsxs(Box, { flexWrap: "wrap", columnGap: 4, children: [_jsx(Box, { flexDirection: "column", children: GROUPS.map(group => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: t(group.label) }), actions.flatMap(action => action.group === group.id && action.key
+                                                ? [
+                                                    _jsx(Row, { keys: action.key, label: t(action.label) }, action.id),
+                                                ]
+                                                : [])] }, group.id))) }), _jsxs(Box, { flexDirection: "column", children: [local.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: t('Here') }), local.map(hint => (_jsx(Row, { keys: hint.key, label: hint.label }, hint.key + hint.label)))] })), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: t('Move around') }), MOVE.map(([keys, label]) => (_jsx(Row, { keys: keys, label: t(label) }, keys + label)))] })] })] })] }) })] }));
+}

package/dist/shell/Popover.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ACCENT } from './Frame.js';
+/**
+ * A bordered box floating centred over the frame. Render it as the last child
+ * of the root so it draws on top; Ink paints in tree order.
+ */
+export function Popover({ columns, rows, width, height, children, }) {
+    const w = Math.max(20, Math.min(width, columns - 4));
+    const h = Math.max(6, Math.min(height, rows - 2));
+    // Ink only overwrites cells it writes to, so blank the interior first or the
+    // content underneath shows through around shorter lines.
+    const blank = ' '.repeat(w - 2);
+    return (_jsxs(Box, { position: "absolute", top: Math.floor((rows - h) / 2), left: Math.floor((columns - w) / 2), width: w, height: h, flexDirection: "column", borderStyle: "round", borderColor: ACCENT, children: [_jsx(Box, { position: "absolute", flexDirection: "column", children: Array.from({ length: h - 2 }, (_, i) => (_jsx(Text, { children: blank }, i))) }), _jsx(Box, { flexDirection: "column", height: h - 2, overflow: "hidden", children: children })] }));
+}

package/dist/shell/Settings.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { configProblem, getGlobalSigning, getSettings, setGlobalSigning, setSettings, settingsFile, } from '../utils/config.js';
+import { LANGUAGES, LANGUAGE_NAMES, setLanguage, t, } from '../utils/i18n.js';
+import { ACCENT } from './Frame.js';
+const ROWS = [
+    {
+        key: 'language',
+        label: 'Language',
+        help: 'The language svc itself speaks.',
+        options: LANGUAGES,
+        display: value => LANGUAGE_NAMES[value],
+    },
+    {
+        key: 'introAnimation',
+        label: 'Intro animation',
+        help: 'Play the logo animation when the shell starts.',
+        options: ['on', 'off'],
+        display: value => t(value),
+    },
+    {
+        key: 'updateCheck',
+        label: 'Update check',
+        help: 'Look for a newer svc on npm at start.',
+        options: ['on', 'off'],
+        display: value => t(value),
+    },
+    {
+        key: 'addonNameDriftWarning',
+        label: 'Addon name warning',
+        help: 'Mark the addon name with ≠ manifest when it is none of the names in manifest.json.',
+        options: ['on', 'off'],
+        display: value => t(value),
+    },
+    {
+        key: 'signingUsername',
+        label: 'Default signing user',
+        help: 'The developer.sitevision.se account that signs in every project without a signing user of its own.',
+        options: [],
+        display: value => value,
+    },
+    {
+        key: 'certificateName',
+        label: 'Default certificate',
+        help: 'Which certificate signs when the account has several. Empty = the account default.',
+        options: [],
+        display: value => value,
+    },
+];
+/** Global preferences, saved per field like the Config tab. */
+export function SettingsScreen({ onChanged, onClose, onOpenWorkspace, }) {
+    const [values, setValues] = useState(() => {
+        const s = getSettings();
+        const signing = getGlobalSigning();
+        return {
+            language: s.language,
+            introAnimation: s.introAnimation ? 'on' : 'off',
+            updateCheck: s.updateCheck ? 'on' : 'off',
+            addonNameDriftWarning: s.addonNameDriftWarning ? 'on' : 'off',
+            signingUsername: signing.signingUsername ?? '',
+            certificateName: signing.certificateName ?? '',
+        };
+    });
+    const [cursor, setCursor] = useState(0);
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState('');
+    const [note, setNote] = useState(() => configProblem()
+        ? t('The settings file does not parse and is ignored until it is fixed.')
+        : '');
+    const rowCount = ROWS.length + (onOpenWorkspace ? 1 : 0);
+    const onWorkspaceRow = cursor === ROWS.length;
+    const current = ROWS[Math.min(cursor, ROWS.length - 1)];
+    const commit = (value) => {
+        const next = { ...values, [current.key]: value };
+        setValues(next);
+        if (current.key === 'language')
+            setLanguage(value);
+        setSettings({
+            language: next.language,
+            introAnimation: next.introAnimation === 'on',
+            updateCheck: next.updateCheck === 'on',
+            addonNameDriftWarning: next.addonNameDriftWarning === 'on',
+        });
+        setGlobalSigning({
+            signingUsername: next.signingUsername.trim() || undefined,
+            certificateName: next.certificateName.trim() || undefined,
+        });
+        setNote(configProblem()
+            ? t('Not saved: the settings file does not parse.')
+            : t('Saved.'));
+        onChanged();
+    };
+    useInput((input, key) => {
+        if (editing) {
+            if (key.escape) {
+                setEditing(false);
+            }
+            else if (key.return) {
+                setEditing(false);
+                if (draft !== values[current.key])
+                    commit(draft);
+            }
+            else if (current.options.length === 0) {
+                if (key.backspace || key.delete)
+                    setDraft(d => d.slice(0, -1));
+                else if (input && !key.ctrl && !key.meta)
+                    setDraft(d => d + input);
+            }
+            else {
+                const step = key.leftArrow || key.upArrow
+                    ? -1
+                    : key.rightArrow || key.downArrow || input === ' '
+                        ? 1
+                        : 0;
+                if (step !== 0) {
+                    const i = current.options.indexOf(draft);
+                    const n = current.options.length;
+                    setDraft(current.options[(i + step + n) % n]);
+                }
+            }
+            return;
+        }
+        if (key.escape)
+            onClose();
+        else if (key.downArrow || key.tab)
+            setCursor(c => (c + 1) % rowCount);
+        else if (key.upArrow)
+            setCursor(c => (c - 1 + rowCount) % rowCount);
+        else if (key.return) {
+            if (onWorkspaceRow) {
+                onOpenWorkspace?.();
+                return;
+            }
+            setDraft(values[current.key]);
+            setEditing(true);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: t('Settings') }), _jsxs(Text, { dimColor: true, children: [" \u00B7 ", t('stored in {file}', { file: settingsFile() })] })] }), ROWS.map((row, i) => {
+                const focused = i === cursor && !onWorkspaceRow;
+                const typing = focused && editing;
+                const chosen = typing ? draft : values[row.key];
+                return (_jsxs(Box, { height: 1, children: [_jsx(Text, { color: focused ? ACCENT : undefined, bold: focused, dimColor: !focused, children: (focused ? '▸ ' : '  ') + t(row.label).padEnd(24) }), row.options.length === 0 && (_jsxs(Text, { dimColor: !typing && !chosen, children: [chosen || (typing ? '' : t('not set')), typing && _jsx(Text, { inverse: true, children: " " })] })), _jsx(Text, { children: row.options.map((option, j) => (_jsxs(Text, { children: [_jsx(Text, { bold: option === chosen, color: option === chosen ? ACCENT : undefined, inverse: typing && option === chosen, dimColor: option !== chosen, children: row.display(option) }), j < row.options.length - 1 && _jsx(Text, { dimColor: true, children: " \u00B7 " })] }, option))) })] }, row.key));
+            }), onOpenWorkspace && (_jsxs(Box, { height: 1, children: [_jsx(Text, { color: onWorkspaceRow ? ACCENT : undefined, bold: onWorkspaceRow, dimColor: !onWorkspaceRow, children: (onWorkspaceRow ? '▸ ' : '  ') + t('Workspace config').padEnd(24) }), _jsx(Text, { dimColor: true, children: t('shared auth and site config for every app') })] })), _jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsx(Text, { dimColor: true, italic: true, children: onWorkspaceRow ? ' ' : t(current.help) }) }), _jsx(Text, { color: "yellow", children: note }), _jsx(Text, { dimColor: true, children: editing
+                    ? current.options.length === 0
+                        ? t('Enter confirm · Esc cancel')
+                        : t('←→ choose · Enter confirm · Esc cancel')
+                    : t('↑↓ setting · Enter edit · Esc close') })] }));
+}