herdr-remote 0.2.18 → 0.2.19

package/dist/tui/components/common.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Box, Text } from 'ink';
+import { useMouseTarget } from '../mouse/index.js';
+import { SELECTED_MARKER, STATUS_COLOR, STATUS_GLYPH, UNSELECTED_MARKER, theme, } from '../theme.js';
+export function StatusDot({ level }) {
+    return _jsx(Text, { color: STATUS_COLOR[level], children: STATUS_GLYPH[level] });
+}
+// Wide enough for the longest label in either language plus a separating
+// space. Too narrow and Ink wraps the label onto a second line or butts it
+// straight against its value.
+const LABEL_COLUMN_WIDTH = 20;
+/** A `label   value` row with the labels aligned into a column. */
+export function Row({ label, labelWidth = LABEL_COLUMN_WIDTH, children, }) {
+    return (_jsxs(Box, { children: [_jsx(Box, { width: labelWidth, flexShrink: 0, children: _jsx(Text, { color: theme.muted, wrap: "truncate-end", children: label }) }), _jsx(Box, { flexGrow: 1, children: children })] }));
+}
+/**
+ * One row of a list that responds to both the keyboard and the mouse.
+ *
+ * Each row is its own component because the mouse hooks bind to a ref: mapping
+ * over items in the parent and calling hooks inline would make the hook order
+ * depend on the list length.
+ *
+ * The row stretches to the full width of its container so the whole line is a
+ * click target, not just the few columns the label happens to occupy.
+ */
+export function Selectable({ selected, disabled = false, onSelect, onHover, children, }) {
+    const ref = useRef(null);
+    const hovered = useMouseTarget(ref, { disabled, onClick: onSelect });
+    useFollowPointer(hovered, onHover);
+    const active = selected || hovered;
+    const color = disabled ? theme.muted : active ? theme.accent : undefined;
+    return (_jsxs(Box, { ref: ref, children: [_jsxs(Text, { color: active ? theme.accent : undefined, children: [active ? SELECTED_MARKER : UNSELECTED_MARKER, ' '] }), _jsx(Text, { color: color, bold: active, dimColor: disabled, children: children })] }));
+}
+/**
+ * Move the keyboard cursor to whatever the pointer is over.
+ *
+ * Without this the two run independently and a list shows two markers at once —
+ * one where the keyboard is, one under the mouse — leaving it ambiguous which
+ * one Enter would activate.
+ */
+function useFollowPointer(hovered, onHover) {
+    const handler = useRef(onHover);
+    handler.current = onHover;
+    useEffect(() => {
+        if (hovered)
+            handler.current?.();
+    }, [hovered]);
+}
+/**
+ * Keyboard/mouse driven list. `onChange` moves the highlight, `onSelect`
+ * activates an entry.
+ */
+export function Menu({ items, selectedId, onChange, onSelect, }) {
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item) => (_jsx(Selectable, { selected: item.id === selectedId, disabled: item.disabled, onSelect: () => onSelect(item.id), onHover: () => onChange(item.id), children: item.label }, item.id))) }));
+}
+/**
+ * A `label  value` row that is clickable across its whole width.
+ *
+ * Used for settings: clicking anywhere on the line — label or value — starts
+ * editing it, which is what a pointer user expects.
+ */
+export function FieldRow({ label, selected, disabled = false, labelWidth = 22, onSelect, onHover, children, }) {
+    const ref = useRef(null);
+    const hovered = useMouseTarget(ref, { disabled, onClick: onSelect });
+    useFollowPointer(hovered, onHover);
+    const active = selected || hovered;
+    return (_jsxs(Box, { ref: ref, children: [_jsxs(Box, { width: labelWidth, flexShrink: 0, children: [_jsxs(Text, { color: active ? theme.accent : undefined, children: [active ? SELECTED_MARKER : UNSELECTED_MARKER, ' '] }), _jsx(Text, { color: active ? theme.accent : theme.muted, bold: active, wrap: "truncate-end", children: label })] }), _jsx(Box, { flexGrow: 1, children: children })] }));
+}
+/** A framed panel used for every screen body, so the layout stays predictable. */
+export function Panel({ title, children }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, flexGrow: 1, children: [title ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: title }) })) : null, children] }));
+}
+/** Feedback from the last action. Colour is the only signal, no icons. */
+export function Message({ text, level, }) {
+    if (!text)
+        return null;
+    const color = level === 'error' ? theme.bad : level === 'success' ? theme.ok : theme.muted;
+    return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: color, children: text }) }));
+}

package/dist/tui/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink';
+import { App } from './App.js';
+import { MouseProvider, createMouseSource } from './mouse/index.js';
+import { enterFullScreen, restoreTerminal } from './terminal.js';
+import { configExists } from './api.js';
+export { App } from './App.js';
+export { Wizard } from './screens/Wizard.js';
+export async function startTui({ language = null } = {}) {
+    const needsWizard = !configExists();
+    const mouse = createMouseSource(process.stdin, process.stdout);
+    // Before render: Ink draws from wherever the cursor is, and the mouse hit
+    // test assumes the app starts at row 1.
+    enterFullScreen();
+    const instance = render(_jsx(MouseProvider, { source: mouse, children: _jsx(App, { initialLanguage: language, needsWizard: needsWizard }) }), { stdin: mouse.stdin, exitOnCtrlC: false });
+    const cleanup = () => {
+        mouse.dispose();
+        restoreTerminal();
+    };
+    const onSignal = () => {
+        instance.unmount();
+        cleanup();
+        process.exit(0);
+    };
+    process.once('SIGINT', onSignal);
+    process.once('SIGTERM', onSignal);
+    process.once('exit', cleanup);
+    try {
+        await instance.waitUntilExit();
+    }
+    finally {
+        cleanup();
+        process.off('SIGINT', onSignal);
+        process.off('SIGTERM', onSignal);
+    }
+}

package/dist/tui/mouse/index.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+export { createMouseSource } from './source.js';
+export { splitMouseInput, createMouseSplitter } from './protocol.js';
+/**
+ * Absolute position of an element, in 1-based terminal coordinates.
+ *
+ * Yoga reports each node's offset relative to its parent, so the walk up the
+ * tree accumulates them. The +1 converts to terminal coordinates, which is only
+ * correct because the app owns the alternate screen and therefore starts at
+ * row 1 — rendering below a shell prompt would shift every row.
+ */
+export function measureElement(node) {
+    if (!node?.yogaNode)
+        return null;
+    const layout = node.yogaNode.getComputedLayout();
+    let left = 0;
+    let top = 0;
+    let current = node;
+    while (current?.yogaNode) {
+        const own = current.yogaNode.getComputedLayout();
+        left += own.left;
+        top += own.top;
+        current = current.parentNode ?? undefined;
+    }
+    return { left: left + 1, top: top + 1, width: layout.width, height: layout.height };
+}
+/**
+ * Half-open containment: a row-N item owns row N and nothing else.
+ *
+ * The inclusive test used by @ink-tools/ink-mouse (`y <= top + height`) makes
+ * every one-row item also claim the row below it, so two neighbours fire for a
+ * single click and the selection lands on the wrong one.
+ */
+export function rectContains(rect, x, y) {
+    return (x >= rect.left && x < rect.left + rect.width && y >= rect.top && y < rect.top + rect.height);
+}
+// Two contexts on purpose: the registry must stay referentially stable, or
+// every hover would re-run the registration effect of every target on screen.
+const MouseRegistryContext = createContext(null);
+const MouseStateContext = createContext(null);
+export function MouseProvider({ source, children, }) {
+    const targets = useRef(new Set());
+    const pressed = useRef(null);
+    const [hovered, setHovered] = useState(null);
+    const [enabled, setEnabled] = useState(false);
+    const register = useCallback((target) => {
+        targets.current.add(target);
+        return () => {
+            targets.current.delete(target);
+            if (pressed.current === target)
+                pressed.current = null;
+            setHovered((current) => (current === target ? null : current));
+        };
+    }, []);
+    /** The innermost registered element under the pointer. */
+    const hitTest = useCallback((x, y) => {
+        let best = null;
+        let bestArea = Number.POSITIVE_INFINITY;
+        for (const target of targets.current) {
+            const rect = measureElement(target.ref.current);
+            if (!rect || rect.width <= 0 || rect.height <= 0)
+                continue;
+            if (!rectContains(rect, x, y))
+                continue;
+            const area = rect.width * rect.height;
+            if (area < bestArea) {
+                best = target;
+                bestArea = area;
+            }
+        }
+        return best;
+    }, []);
+    useEffect(() => {
+        if (!source)
+            return undefined;
+        return source.subscribe((event) => {
+            if (event.type === 'wheel')
+                return;
+            const target = hitTest(event.x, event.y);
+            if (event.type === 'move') {
+                // Only re-render when the pointer actually crosses into a different
+                // element; any-motion tracking fires on every cell otherwise.
+                setHovered((current) => (current === target ? current : target));
+                return;
+            }
+            if (event.type === 'press') {
+                if (event.button !== 'left')
+                    return;
+                pressed.current = target;
+                setHovered(target);
+                return;
+            }
+            // Release: a click counts only when press and release share a target,
+            // so dragging off a row cancels it the way a button should.
+            if (pressed.current && pressed.current === target)
+                target?.onClick?.();
+            pressed.current = null;
+        });
+    }, [source, hitTest]);
+    useEffect(() => {
+        const previous = hovered;
+        previous?.onHover?.(true);
+        return () => previous?.onHover?.(false);
+    }, [hovered]);
+    const enable = useCallback(() => {
+        if (!source)
+            return;
+        source.enable();
+        setEnabled(source.isEnabled());
+    }, [source]);
+    const disable = useCallback(() => {
+        if (!source)
+            return;
+        source.disable();
+        setEnabled(source.isEnabled());
+    }, [source]);
+    const registry = useMemo(() => ({ register }), [register]);
+    const state = useMemo(() => ({
+        supported: Boolean(source?.supported),
+        enabled,
+        enable,
+        disable,
+    }), [source, enabled, enable, disable]);
+    return (_jsx(MouseRegistryContext.Provider, { value: registry, children: _jsx(MouseStateContext.Provider, { value: state, children: children }) }));
+}
+const KEYBOARD_ONLY = {
+    supported: false,
+    enabled: false,
+    enable: () => { },
+    disable: () => { },
+};
+export function useMouse() {
+    // Tests mount screens without a provider; degrade to keyboard only rather
+    // than crash the interface.
+    return useContext(MouseStateContext) ?? KEYBOARD_ONLY;
+}
+/**
+ * Make an element clickable and hoverable.
+ *
+ * Returns whether the pointer is currently over it, so callers can highlight
+ * without tracking mouse state themselves.
+ */
+export function useMouseTarget(ref, { onClick, disabled = false } = {}) {
+    const context = useContext(MouseRegistryContext);
+    const [hovered, setHovered] = useState(false);
+    const handler = useRef(onClick);
+    handler.current = onClick;
+    const target = useMemo(() => ({
+        ref,
+        onClick: () => handler.current?.(),
+        onHover: setHovered,
+    }), [ref]);
+    useEffect(() => {
+        if (!context || disabled)
+            return undefined;
+        return context.register(target);
+    }, [context, target, disabled]);
+    useEffect(() => {
+        if (disabled)
+            setHovered(false);
+    }, [disabled]);
+    return hovered && !disabled;
+}

package/dist/tui/mouse/protocol.js

@@ -0,0 +1,96 @@
+// SGR mouse reporting: parsing and the escape sequences that turn it on.
+//
+// Written here rather than taken from a library because the available ones get
+// the hit test wrong: `@ink-tools/ink-mouse` compares a click against inclusive
+// bounds (`y >= top && y <= bottom`) while its rectangles are half-open, so a
+// one-row item at row N also swallows clicks on row N+1 and two neighbouring
+// rows both fire. In a vertical menu that reads as "the mouse selects the wrong
+// entry".
+const ESC = String.fromCharCode(27);
+/** Any-motion tracking (1003) so hover works without a button held, plus SGR
+ * coordinates (1006) so columns past 223 still report correctly. */
+export const ENABLE_MOUSE = `${ESC}[?1000h${ESC}[?1002h${ESC}[?1003h${ESC}[?1006h`;
+export const DISABLE_MOUSE = `${ESC}[?1006l${ESC}[?1003l${ESC}[?1002l${ESC}[?1000l`;
+// ESC [ < button ; column ; row (M|m)
+const SGR_PATTERN = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])/;
+// The longest incomplete prefix worth holding on to; beyond this the input is
+// not a mouse report and must be passed through rather than swallowed.
+const MAX_PENDING = 32;
+function decodeButton(code, isRelease) {
+    if (code & 64)
+        return (code & 3) === 1 ? 'wheel-down' : 'wheel-up';
+    if (isRelease)
+        return 'none';
+    switch (code & 3) {
+        case 0:
+            return 'left';
+        case 1:
+            return 'middle';
+        case 2:
+            return 'right';
+        default:
+            return 'none';
+    }
+}
+function couldBeMousePrefix(value) {
+    // Partial forms of "\x1b[<…" that may complete on the next chunk.
+    return (`${ESC}[<`.startsWith(value.slice(0, 3)) &&
+        value.length <= MAX_PENDING &&
+        /^\x1b(\[(<[\d;]*)?)?$/.test(value));
+}
+/**
+ * Separate mouse reports from ordinary key input.
+ *
+ * Ink's key parser knows nothing about mouse reports, so an unfiltered click
+ * would reach `useInput` as a stray Escape and cancel whatever the user was
+ * editing. Everything that is not a mouse report is passed through untouched.
+ */
+export function splitMouseInput(buffer) {
+    const events = [];
+    let passthrough = '';
+    let index = 0;
+    while (index < buffer.length) {
+        const escapeAt = buffer.indexOf(ESC, index);
+        if (escapeAt === -1) {
+            passthrough += buffer.slice(index);
+            return { events, passthrough, pending: '' };
+        }
+        passthrough += buffer.slice(index, escapeAt);
+        const rest = buffer.slice(escapeAt);
+        const match = SGR_PATTERN.exec(rest);
+        if (match) {
+            const code = Number(match[1]);
+            const isRelease = match[4] === 'm';
+            const isMotion = (code & 32) !== 0;
+            const isWheel = (code & 64) !== 0;
+            events.push({
+                type: isWheel ? 'wheel' : isMotion ? 'move' : isRelease ? 'release' : 'press',
+                button: decodeButton(code, isRelease),
+                x: Number(match[2]),
+                y: Number(match[3]),
+                shift: (code & 4) !== 0,
+                alt: (code & 8) !== 0,
+                ctrl: (code & 16) !== 0,
+            });
+            index = escapeAt + match[0].length;
+            continue;
+        }
+        if (couldBeMousePrefix(rest)) {
+            // Hold the fragment back; the rest of the report is in the next chunk.
+            return { events, passthrough, pending: rest };
+        }
+        // A real escape sequence (arrow key, etc.) — hand it to the key parser.
+        passthrough += ESC;
+        index = escapeAt + 1;
+    }
+    return { events, passthrough, pending: '' };
+}
+/** Stateful wrapper that carries a partial sequence across chunk boundaries. */
+export function createMouseSplitter() {
+    let pending = '';
+    return (chunk) => {
+        const result = splitMouseInput(pending + chunk);
+        pending = result.pending;
+        return { events: result.events, passthrough: result.passthrough };
+    };
+}

package/dist/tui/mouse/source.js

@@ -0,0 +1,74 @@
+import { PassThrough } from 'node:stream';
+import { createMouseSplitter, DISABLE_MOUSE, ENABLE_MOUSE } from './protocol.js';
+/**
+ * Read the real stdin, peel off mouse reports, and forward the rest to Ink.
+ *
+ * Ink and the mouse layer cannot both own stdin: whoever reads it first
+ * consumes the bytes. So this reads it once, routes mouse reports to
+ * subscribers, and republishes the remaining keystrokes on a stream that looks
+ * enough like a TTY for Ink to drive.
+ */
+export function createMouseSource(input = process.stdin, output = process.stdout) {
+    const supported = Boolean(input.isTTY && output.isTTY);
+    const listeners = new Set();
+    const split = createMouseSplitter();
+    const forwarded = new PassThrough();
+    const onData = (chunk) => {
+        const text = typeof chunk === 'string' ? chunk : chunk.toString('utf8');
+        const { events, passthrough } = split(text);
+        for (const event of events) {
+            for (const listener of listeners)
+                listener(event);
+        }
+        if (passthrough.length > 0)
+            forwarded.write(passthrough);
+    };
+    if (supported)
+        input.on('data', onData);
+    // Ink expects a TTY: it checks isTTY and drives raw mode itself. Delegate
+    // those to the real stdin while it reads from our filtered copy.
+    const stdin = forwarded;
+    stdin.isTTY = input.isTTY;
+    stdin.setRawMode = ((mode) => {
+        input.setRawMode?.(mode);
+        return stdin;
+    });
+    stdin.ref = (() => {
+        input.ref?.();
+        return stdin;
+    });
+    stdin.unref = (() => {
+        input.unref?.();
+        return stdin;
+    });
+    let enabled = false;
+    const enable = () => {
+        if (!supported || enabled)
+            return;
+        output.write(ENABLE_MOUSE);
+        enabled = true;
+    };
+    const disable = () => {
+        if (!enabled)
+            return;
+        output.write(DISABLE_MOUSE);
+        enabled = false;
+    };
+    return {
+        stdin,
+        supported,
+        isEnabled: () => enabled,
+        enable,
+        disable,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        dispose() {
+            disable();
+            listeners.clear();
+            if (supported)
+                input.off('data', onData);
+        },
+    };
+}

package/dist/tui/screens/About.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { theme } from '../theme.js';
+import { Message, Panel, Row, Selectable } from '../components/common.js';
+import { canSelfUpdate, checkForUpdate, configPath, currentVersion, detectLocale, installKind, performUpdate, saveDraft, setField, stateDir, } from '../api.js';
+/** `https://registry.npmmirror.com` → `registry.npmmirror.com`, for one line of text. */
+const registryHost = (registry) => registry.replace(/^https?:\/\//, '');
+export function About({ ctx }) {
+    const { t, draft } = ctx;
+    const [selected, setSelected] = useState('auto');
+    const [update, setUpdate] = useState({ phase: 'idle' });
+    /** Why the install will come from somewhere other than npm's own registry. */
+    const [sourceNote, setSourceNote] = useState(null);
+    const checkRef = useState(() => ({ current: { registry: '', sources: [] } }))[0];
+    const detected = detectLocale({ preference: 'auto' });
+    const languageOptions = [
+        { id: 'auto', label: t('about.languageAuto', { detected }) },
+        { id: 'zh', label: t('about.languageZh') },
+        { id: 'en', label: t('about.languageEn') },
+    ];
+    // The update row is a selectable option alongside the languages, so one set
+    // of arrow keys drives the whole screen.
+    const updatable = canSelfUpdate();
+    const updateLabel = (() => {
+        switch (update.phase) {
+            case 'checking':
+                return t('update.checking');
+            case 'current':
+                return t('update.upToDate', { version: update.latest });
+            case 'available':
+                return t('update.available', { version: update.latest });
+            case 'updating':
+                return update.attempt > 1
+                    ? t('update.updatingRetry', { version: update.latest, attempt: update.attempt })
+                    : t('update.updating', { version: update.latest });
+            case 'done':
+                return t('update.done', { version: update.latest });
+            case 'error':
+                return t(update.messageKey, update.params);
+            default:
+                return t('update.check');
+        }
+    })();
+    const options = [...languageOptions, { id: 'update', label: updateLabel }];
+    /** Show a check's answer, whether this screen asked or the TUI did on opening. */
+    const applyCheck = (result) => {
+        checkRef.current = { registry: result.registry ?? '', sources: result.sources ?? [] };
+        // A mirror that has not synced the release yet used to be the whole
+        // answer. It is still asked, and said to be behind.
+        const behind = result.behind ?? [];
+        setSourceNote(result.updateAvailable && behind.length > 0 && result.registry
+            ? t('update.mirrorBehind', {
+                registries: behind
+                    .map((entry) => `${registryHost(entry.registry)} ${entry.version ?? ''}`.trim())
+                    .join(', '),
+                source: registryHost(result.registry),
+            })
+            : null);
+        setUpdate(result.updateAvailable
+            ? { phase: 'available', latest: result.latest }
+            : { phase: 'current', latest: result.latest });
+    };
+    // The TUI already asked when it opened; start from that answer.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only a new answer from the opening check matters, not each render's applyCheck or phase
+    useEffect(() => {
+        if (ctx.updateCheck?.ok && update.phase === 'idle')
+            applyCheck(ctx.updateCheck);
+    }, [ctx.updateCheck]);
+    const runCheck = async () => {
+        setUpdate({ phase: 'checking' });
+        setSourceNote(null);
+        const result = await checkForUpdate();
+        if (!result.ok) {
+            setUpdate({ phase: 'error', messageKey: result.errorKey ?? 'update.errorNetwork' });
+            // Which registries were tried, and what each of them said. Without this
+            // the row reads "could not reach npm registry" on a machine where
+            // `npm install` works perfectly, and there is nothing to act on.
+            if (result.message)
+                ctx.notify(t('update.errorNetworkDetail', { message: result.message }), 'error');
+            return;
+        }
+        ctx.setUpdateCheck(result);
+        applyCheck(result);
+    };
+    const runUpdate = async (latest) => {
+        setUpdate({ phase: 'updating', latest, attempt: 1 });
+        const result = await performUpdate({
+            registry: checkRef.current.registry,
+            sources: checkRef.current.sources,
+            version: latest,
+            onAttempt: ({ attempt }) => setUpdate({ phase: 'updating', latest, attempt }),
+        });
+        if (!result.ok) {
+            const params = { version: latest, installed: result.installed ?? '' };
+            setUpdate({ phase: 'error', messageKey: result.errorKey ?? 'update.errorFailed', params });
+            // npm's own words: "update failed" alone is what left this unfixable.
+            ctx.notify(result.summary
+                ? t('update.errorFailedDetail', { message: result.summary })
+                : t(result.errorKey ?? 'update.errorFailed', params), 'error');
+            return;
+        }
+        setUpdate({ phase: 'done', latest });
+        setSourceNote(null);
+        // Installed: the line under the title has nothing left to announce.
+        ctx.setUpdateCheck(null);
+        ctx.notify(t('update.restartHint'), 'success');
+    };
+    /**
+     * One row, two meanings: check first, then install what the check found.
+     * Refusing to self-update is reported rather than hidden, so a checkout does
+     * not look like a silently broken button.
+     */
+    const activateUpdate = () => {
+        if (update.phase === 'checking' || update.phase === 'updating')
+            return;
+        if (update.phase === 'available') {
+            if (!updatable) {
+                setUpdate({ phase: 'error', messageKey: `update.cannot.${installKind()}` });
+                return;
+            }
+            void runUpdate(update.latest);
+            return;
+        }
+        void runCheck();
+    };
+    const choose = (language) => {
+        const result = setField(draft, 'language', language);
+        if (result.errorKey) {
+            ctx.notify(t(result.errorKey), 'error');
+            return;
+        }
+        ctx.updateDraft(result.draft);
+        try {
+            saveDraft(result.draft);
+            ctx.reloadConfig();
+            ctx.notify(t('common.saved', { path: configPath() }), 'success');
+        }
+        catch (error) {
+            ctx.notify(t('error.saveFailed', { message: error.message }), 'error');
+        }
+    };
+    const activate = (id) => {
+        if (id === 'update') {
+            activateUpdate();
+            return;
+        }
+        choose(id);
+    };
+    useInput((_input, key) => {
+        const index = options.findIndex((option) => option.id === selected);
+        if (key.upArrow)
+            setSelected(options[(index - 1 + options.length) % options.length].id);
+        else if (key.downArrow)
+            setSelected(options[(index + 1) % options.length].id);
+        else if (key.return)
+            activate(selected);
+    }, { isActive: ctx.editingId === null });
+    return (_jsxs(Panel, { title: t('about.title'), children: [_jsx(Text, { color: theme.muted, children: t('about.language') }), _jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: languageOptions.map((option) => (_jsx(Selectable, { selected: selected === option.id, onSelect: () => {
+                        setSelected(option.id);
+                        choose(option.id);
+                    }, onHover: () => setSelected(option.id), children: `${option.label}${draft.ui.language === option.id ? '  ✓' : ''}` }, option.id))) }), _jsx(Text, { color: theme.muted, children: t('update.title') }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [_jsx(Selectable, { selected: selected === 'update', onSelect: () => {
+                            setSelected('update');
+                            activateUpdate();
+                        }, onHover: () => setSelected('update'), children: updateLabel }), sourceNote ? _jsx(Text, { color: theme.muted, children: `  ${sourceNote}` }) : null] }), _jsx(Row, { label: t('about.version'), children: _jsx(Text, { color: theme.muted, children: currentVersion() }) }), _jsx(Row, { label: t('about.configPath'), children: _jsx(Text, { color: theme.muted, children: configPath() }) }), _jsx(Row, { label: t('about.statePath'), children: _jsx(Text, { color: theme.muted, children: stateDir() }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('about.docs') }) }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}