sitevision-cli 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/shell/ConfigForm.js

@@ -0,0 +1,499 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getPackageJsonSyncChanges, normalizeDomain, readInheritedDevProperties, writeDevProperties, } from '../utils/project-detection.js';
+import { setDeployPassword, deleteDeployPassword, getOAuth2ClientSecret, setOAuth2ClientSecret, deleteOAuth2ClientSecret, getSigningPassword, setSigningPassword, deleteSigningPassword, } from '../utils/keychain.js';
+import { DEFAULT_SCOPES, discoverOAuth2Config } from '../utils/oauth2-auth.js';
+import { ACCENT } from './Frame.js';
+import { baseEnvironment, withEnvironmentOverride, } from '../utils/environments.js';
+import { t } from '../utils/i18n.js';
+const METHODS = ['basic', 'oauth2', 'cookie'];
+const FIELDS = [
+    {
+        key: 'domain',
+        help: "Domain of this environment's site (USE or TSE) without https://, e.g. myorg-use.sitevision-cloud.se. Deploys and version lookups go here.",
+        label: 'Domain',
+        required: true,
+    },
+    {
+        key: 'siteName',
+        help: "Name of the site's root node in Sitevision, exactly as shown in the site tree. It becomes part of the REST API path.",
+        label: 'Site name',
+        required: true,
+    },
+    {
+        key: 'addonName',
+        help: "Name of the addon (custom module) in the site's Addon Repository that this app is uploaded into. Ctrl+O lists the existing ones.",
+        label: 'Addon name',
+        required: true,
+        hint: '^O pick from repo',
+        perApp: true,
+    },
+    {
+        key: 'username',
+        help: 'Sitevision account used for deploys, usually your Sitevision Cloud e-mail. It needs DEVELOPER or MANAGE_ADDONS permission on the site. Required for basic auth; with oauth2 or cookie it only labels the stored credential.',
+        label: 'Username',
+        required: 'basic',
+    },
+    {
+        key: 'authMethod',
+        help: "How deploys authenticate: basic = username and password; oauth2 = bearer token from the site's OAuth2 provider (PKCE, opens a browser); cookie = reuse a browser SSO/SAML session.",
+        label: 'Auth method',
+        kind: 'method',
+    },
+    {
+        key: 'password',
+        help: 'Deploy password for the account above. Stored in the OS keychain, never in a file. Leave empty to be asked on each run.',
+        label: 'Password',
+        kind: 'secret',
+        when: 'basic',
+    },
+    {
+        key: 'clientId',
+        help: 'Client id of the OAuth2 client registered on the site. Its redirect URI must be http://127.0.0.1:8137/callback.',
+        label: 'OAuth2 client id',
+        required: true,
+        when: 'oauth2',
+    },
+    {
+        key: 'authorizationEndpoint',
+        help: "The provider's authorization URL. Filled in from the site's OpenID configuration when it can be discovered.",
+        label: 'Authorization endpoint',
+        required: true,
+        when: 'oauth2',
+    },
+    {
+        key: 'tokenEndpoint',
+        help: "The provider's token URL. Filled in from the site's OpenID configuration when it can be discovered.",
+        label: 'Token endpoint',
+        required: true,
+        when: 'oauth2',
+    },
+    {
+        key: 'scopes',
+        help: 'Space-separated scopes to request. ALL grants the Sitevision API and offline_access adds a refresh token so later runs log in silently. Match the casing your client expects.',
+        label: 'Scopes',
+        when: 'oauth2',
+        hint: 'ALL offline_access',
+    },
+    {
+        key: 'clientSecret',
+        help: 'Secret of a confidential OAuth2 client, stored in the OS keychain. Leave empty for a public client.',
+        label: 'Client secret',
+        kind: 'secret',
+        when: 'oauth2',
+    },
+    {
+        key: 'sessionLoginUrl',
+        help: 'Page opened in the browser for the SSO login. Leave empty to use the site root.',
+        label: 'Login URL',
+        when: 'cookie',
+        hint: 'blank = site root',
+    },
+    {
+        key: 'useHTTPForDevDeploy',
+        help: 'Use plain HTTP instead of HTTPS for deploys. Only for local or test servers without TLS.',
+        label: 'Use HTTP',
+        kind: 'bool',
+    },
+    {
+        key: 'baseEnvironment',
+        label: 'Environment name',
+        section: 'ENVIRONMENT',
+        hint: 'dev',
+        help: 'What this base configuration is: dev, test, prod… Other environments are added on top of it with E or the palette and override only what differs.',
+    },
+    {
+        key: 'production',
+        label: 'Production',
+        kind: 'bool',
+        section: 'ENVIRONMENT',
+        help: 'Treat deploys to this base environment as production: signed zip, confirmation, activation, and no dev loop. Off by default even when the name says prod, so a repo with only a production site still gets a dev loop.',
+    },
+    {
+        key: 'signingUsername',
+        help: 'Your developer.sitevision.se account. Production deploys need the app signed by it.',
+        label: 'Signing user',
+        section: 'SIGNING',
+        hint: 'required for signed deploys',
+    },
+    {
+        key: 'certificateName',
+        help: 'Which certificate to sign with when your developer account has several. Leave empty for the default.',
+        label: 'Certificate',
+        section: 'SIGNING',
+    },
+    {
+        key: 'signingPassword',
+        help: 'Password for the signing account, stored in the OS keychain. Leave empty to be asked on each run.',
+        label: 'Signing password',
+        kind: 'secret',
+        section: 'SIGNING',
+        hint: 'blank = prompt each run',
+    },
+];
+const ENV_KEYS = new Set([
+    'domain',
+    'siteName',
+    'addonName',
+    'username',
+    'authMethod',
+    'useHTTPForDevDeploy',
+    'clientId',
+    'authorizationEndpoint',
+    'tokenEndpoint',
+    'scopes',
+    'clientSecret',
+    'sessionLoginUrl',
+    'password',
+]);
+// Wide enough for the longest source text ("^O pick from repo").
+const SOURCE_WIDTH = 18;
+function fromProject(project) {
+    const dev = project.devProperties ?? {};
+    return {
+        domain: dev.domain ?? '',
+        siteName: dev.siteName ?? '',
+        addonName: dev.addonName ?? '',
+        username: dev.username ?? '',
+        authMethod: dev.authMethod ?? 'basic',
+        password: '',
+        clientId: dev.oauth2?.clientId ?? '',
+        authorizationEndpoint: dev.oauth2?.authorizationEndpoint ?? '',
+        tokenEndpoint: dev.oauth2?.tokenEndpoint ?? '',
+        scopes: (dev.oauth2?.scopes ?? DEFAULT_SCOPES).join(' '),
+        clientSecret: '',
+        sessionLoginUrl: dev.sessionLoginUrl ?? '',
+        useHTTPForDevDeploy: dev.useHTTPForDevDeploy ? 'yes' : 'no',
+        baseEnvironment: dev.baseEnvironment ?? '',
+        production: dev.production ? 'yes' : 'no',
+        signingUsername: dev.signingUsername ?? '',
+        certificateName: dev.certificateName ?? '',
+        signingPassword: '',
+    };
+}
+function storedSecret(project, key) {
+    const dev = project.devProperties;
+    if (!dev)
+        return false;
+    if (key === 'password')
+        return Boolean(dev.password);
+    if (key === 'clientSecret') {
+        return Boolean(dev.domain &&
+            dev.oauth2?.clientId &&
+            getOAuth2ClientSecret(dev.domain, dev.oauth2.clientId));
+    }
+    return Boolean(dev.signingUsername && getSigningPassword(dev.signingUsername));
+}
+/** Apply the form to disk and the keychain. Exported for the test. */
+export function saveConfig(project, values, edited) {
+    const method = values['authMethod'];
+    const next = {
+        domain: values['domain'],
+        siteName: values['siteName'],
+        addonName: values['addonName'],
+        username: values['username'],
+        authMethod: method,
+        useHTTPForDevDeploy: values['useHTTPForDevDeploy'] === 'yes',
+    };
+    if (values['baseEnvironment'])
+        next.baseEnvironment = values['baseEnvironment'].trim().toLowerCase();
+    if (values['production'] === 'yes')
+        next.production = true;
+    if (values['signingUsername'])
+        next.signingUsername = values['signingUsername'];
+    if (values['certificateName'])
+        next.certificateName = values['certificateName'];
+    if (method === 'oauth2') {
+        const scopes = values['scopes'].split(/[\s,]+/).filter(Boolean);
+        next.oauth2 = {
+            authorizationEndpoint: values['authorizationEndpoint'],
+            tokenEndpoint: values['tokenEndpoint'],
+            clientId: values['clientId'],
+            ...(scopes.length > 0 && { scopes }),
+            ...(project.devProperties?.oauth2?.redirectPort && {
+                redirectPort: project.devProperties.oauth2.redirectPort,
+            }),
+        };
+    }
+    else if (method === 'cookie' && values['sessionLoginUrl']) {
+        next.sessionLoginUrl = values['sessionLoginUrl'];
+    }
+    const env = project.environment;
+    if (env && env !== baseEnvironment(project.base) && project.base) {
+        // Non-dev environment: site/auth fields become an override, signing
+        // fields still live on the base.
+        const base = { ...project.base };
+        base.signingUsername = next.signingUsername;
+        base.certificateName = next.certificateName;
+        base.baseEnvironment = next.baseEnvironment;
+        base.production = next.production;
+        writeDevProperties(project.root, withEnvironmentOverride(base, env, {
+            domain: next.domain,
+            siteName: next.siteName,
+            addonName: next.addonName,
+            username: next.username,
+            authMethod: next.authMethod,
+            useHTTPForDevDeploy: next.useHTTPForDevDeploy,
+            oauth2: next.oauth2,
+            sessionLoginUrl: next.sessionLoginUrl,
+        }));
+    }
+    else {
+        writeDevProperties(project.root, {
+            ...next,
+            environments: project.base?.environments ?? project.devProperties?.environments,
+        });
+    }
+    const secret = (key, set, del) => {
+        if (!edited.has(key))
+            return;
+        const value = values[key] ?? '';
+        if (value)
+            set(value);
+        else
+            del();
+    };
+    secret('password', v => setDeployPassword(next.domain, next.username, v), () => deleteDeployPassword(next.domain, next.username));
+    if (next.oauth2) {
+        const { clientId } = next.oauth2;
+        secret('clientSecret', v => setOAuth2ClientSecret(next.domain, clientId, v), () => deleteOAuth2ClientSecret(next.domain, clientId));
+    }
+    if (next.signingUsername) {
+        const user = next.signingUsername;
+        secret('signingPassword', v => setSigningPassword(user, v), () => deleteSigningPassword(user));
+    }
+}
+export function visibleFields(method, workspace = false, envMode = false) {
+    return FIELDS.filter(f => (!f.when || f.when === method) &&
+        !(workspace && f.perApp) &&
+        !(envMode && (f.section === 'SIGNING' || f.section === 'ENVIRONMENT')));
+}
+export function ConfigForm({ project, active, width, height, pickAddon, onSaved, onEditingChange, }) {
+    const [values, setValues] = useState(() => fromProject(project));
+    const [cursor, setCursor] = useState(0);
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState('');
+    const [caret, setCaret] = useState(0);
+    const [note, setNote] = useState('');
+    // Values always mirror the project; edits are committed field by field.
+    useEffect(() => {
+        setValues(fromProject(project));
+    }, [project]);
+    useEffect(() => {
+        onEditingChange(editing);
+        return () => {
+            onEditingChange(false);
+        };
+    }, [editing, onEditingChange]);
+    const method = values['authMethod'];
+    const envMode = Boolean(project.environment &&
+        project.environment !==
+            baseEnvironment(project.base ?? project.devProperties));
+    const fields = visibleFields(method, project.workspace, envMode);
+    const current = fields[Math.min(cursor, fields.length - 1)];
+    const inherited = readInheritedDevProperties(project.root);
+    const changes = project.devProperties && !project.workspace
+        ? getPackageJsonSyncChanges(project.root, project.devProperties)
+        : [];
+    // Write one field to disk (and the keychain for secrets) right away.
+    const commit = (key, value, label = current.label) => {
+        const clean = key === 'domain' ? normalizeDomain(value) : value;
+        const next = { ...values, [key]: clean };
+        setValues(next);
+        saveConfig(project, next, new Set([key]));
+        setNote(clean === value
+            ? t('Saved {label}.', { label: t(label) })
+            : t('Saved {label} as {value} — a domain is a host only.', {
+                label: t(label),
+                value: clean,
+            }));
+        onSaved();
+    };
+    // Auto-fill OAuth2 endpoints from the site's OpenID configuration.
+    useEffect(() => {
+        if (method !== 'oauth2' || !values['domain'])
+            return;
+        if (values['authorizationEndpoint'] && values['tokenEndpoint'])
+            return;
+        let cancelled = false;
+        setNote(t('Looking up OAuth2 endpoints…'));
+        void discoverOAuth2Config(values['domain'], values['useHTTPForDevDeploy'] === 'yes').then(found => {
+            if (cancelled)
+                return;
+            if (found) {
+                const next = {
+                    ...values,
+                    authorizationEndpoint: values['authorizationEndpoint'] || found.authorizationEndpoint,
+                    tokenEndpoint: values['tokenEndpoint'] || found.tokenEndpoint,
+                };
+                setValues(next);
+                saveConfig(project, next, new Set());
+                onSaved();
+                setNote(t('Endpoints filled from the site OpenID config.'));
+            }
+            else {
+                setNote(t('Could not discover OAuth2 endpoints; enter them by hand.'));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [method, values['domain']]);
+    // Options for a choice row; the draft holds the highlighted one while editing.
+    const options = (f) => f.kind === 'method' ? METHODS : f.kind === 'bool' ? ['yes', 'no'] : [];
+    const openPicker = () => {
+        void pickAddon().then(name => {
+            if (name) {
+                setEditing(false);
+                commit('addonName', name, 'Addon name');
+            }
+        });
+    };
+    useInput((input, key) => {
+        if (editing) {
+            const choices = options(current);
+            if (key.escape) {
+                setEditing(false);
+            }
+            else if (key.return) {
+                setEditing(false);
+                if (draft !== values[current.key])
+                    commit(current.key, draft);
+            }
+            else if (choices.length > 0) {
+                const step = key.leftArrow || key.upArrow
+                    ? -1
+                    : key.rightArrow || key.downArrow || input === ' '
+                        ? 1
+                        : 0;
+                if (step !== 0) {
+                    const i = choices.indexOf(draft);
+                    setDraft(choices[(i + step + choices.length) % choices.length]);
+                }
+            }
+            else if (key.ctrl && input === 'o' && current.key === 'addonName') {
+                openPicker();
+            }
+            else if (key.leftArrow) {
+                setCaret(Math.max(0, caret - 1));
+            }
+            else if (key.rightArrow) {
+                setCaret(Math.min(draft.length, caret + 1));
+            }
+            else if (key.backspace || key.delete) {
+                if (caret > 0) {
+                    setDraft(draft.slice(0, caret - 1) + draft.slice(caret));
+                    setCaret(caret - 1);
+                }
+            }
+            else if (input && !key.ctrl && !key.meta) {
+                setDraft(draft.slice(0, caret) + input + draft.slice(caret));
+                setCaret(caret + input.length);
+            }
+            return;
+        }
+        if ((key.tab && !key.shift) || key.downArrow) {
+            setCursor(c => (c + 1) % fields.length);
+        }
+        else if ((key.tab && key.shift) || key.upArrow) {
+            setCursor(c => (c - 1 + fields.length) % fields.length);
+        }
+        else if (key.ctrl && input === 'o' && current.key === 'addonName') {
+            openPicker();
+        }
+        else if (key.return) {
+            const start = current.kind === 'secret' ? '' : (values[current.key] ?? '');
+            setDraft(start);
+            setCaret(start.length);
+            setEditing(true);
+        }
+    }, { isActive: active });
+    const source = (f) => {
+        const required = f.required === true || f.required === method;
+        if (required && !(values[f.key] ?? ''))
+            return { text: t('✗ required'), color: 'red' };
+        if (f.kind === 'secret') {
+            return { text: storedSecret(project, f.key) ? t('keychain') : '—' };
+        }
+        const value = f.kind === 'bool' ? values[f.key] === 'yes' : values[f.key];
+        if (envMode && ENV_KEYS.has(f.key)) {
+            const override = project.base?.environments?.[project.environment];
+            const overridden = override &&
+                ([
+                    'clientId',
+                    'authorizationEndpoint',
+                    'tokenEndpoint',
+                    'scopes',
+                ].includes(f.key)
+                    ? Object.hasOwn(override, 'oauth2')
+                    : Object.hasOwn(override, f.key));
+            return {
+                text: overridden ? project.environment : t('↑ dev'),
+                color: overridden ? 'yellow' : undefined,
+            };
+        }
+        const inheritedValue = [
+            'clientId',
+            'authorizationEndpoint',
+            'tokenEndpoint',
+        ].includes(f.key)
+            ? inherited['oauth2']?.[f.key]
+            : inherited[f.key];
+        if (inheritedValue !== undefined &&
+            JSON.stringify(inheritedValue) === JSON.stringify(value)) {
+            return { text: t('↑ root') };
+        }
+        return { text: (values[f.key] ?? '') ? t('local') : '' };
+    };
+    // label column (24) + source column + paddings; never below 20.
+    const valueWidth = Math.max(20, width - 24 - SOURCE_WIDTH - 2);
+    const rows = [];
+    let lastSection;
+    for (const f of fields) {
+        if (f.section && f.section !== lastSection) {
+            rows.push(_jsx(Box, { marginTop: 1, flexShrink: 0, children: _jsx(Text, { bold: true, dimColor: true, children: t(f.section) }) }, `s-${f.section}`));
+            lastSection = f.section;
+        }
+        const focused = active && f === current;
+        const typing = focused && editing;
+        // A value being typed into, scrolled so the caret stays in view and drawn
+        // with the caret as an inverted cell.
+        const withCaret = (text) => {
+            const max = Math.max(1, valueWidth - 1);
+            const start = text.length > max
+                ? Math.min(Math.max(0, caret - max + 1), text.length - max)
+                : 0;
+            const shown = text.slice(start, start + max);
+            const at = caret - start;
+            return (_jsxs(Text, { children: [shown.slice(0, at), _jsx(Text, { inverse: true, children: shown[at] ?? ' ' }), shown.slice(at + 1)] }));
+        };
+        let display;
+        if (f.kind === 'method' || f.kind === 'bool') {
+            const choices = options(f);
+            const chosen = typing ? draft : values[f.key];
+            display = choices.map((m, i) => (_jsxs(Text, { children: [_jsx(Text, { bold: m === chosen, color: m === chosen ? ACCENT : undefined, inverse: typing && m === chosen, dimColor: m !== chosen, children: f.kind === 'bool' ? t(m) : m }), i < choices.length - 1 && _jsx(Text, { dimColor: true, children: " \u00B7 " })] }, m)));
+        }
+        else if (f.kind === 'secret') {
+            display = typing ? (withCaret('•'.repeat(draft.length))) : (_jsx(Text, { dimColor: true, children: storedSecret(project, f.key)
+                    ? t('•••••••• keychain')
+                    : f.hint
+                        ? t(f.hint)
+                        : '' }));
+        }
+        else {
+            const value = values[f.key];
+            display = typing ? (withCaret(draft)) : value ? (_jsx(Text, { children: value })) : (_jsx(Text, { dimColor: true, children: f.hint ? t(f.hint) : '—' }));
+        }
+        const src = source(f);
+        rows.push(_jsxs(Box, { height: 1, flexShrink: 0, children: [_jsx(Text, { color: focused ? ACCENT : undefined, bold: focused, dimColor: !focused, children: (focused ? '▸ ' : '  ') + t(f.label).padEnd(22) }), _jsx(Box, { width: valueWidth, flexShrink: 0, children: _jsx(Text, { wrap: "truncate", children: display }) }), _jsx(Box, { width: SOURCE_WIDTH, flexShrink: 0, children: _jsx(Text, { dimColor: !src.color, color: src.color, wrap: "truncate", children: focused && f.hint && f.key === 'addonName' ? t(f.hint) : src.text }) })] }, f.key));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, overflow: "hidden", height: height, children: [_jsx(Box, { height: 1, flexShrink: 0, children: _jsxs(Text, { dimColor: true, wrap: "truncate", children: [('  ' + t('FIELD')).padEnd(24), t('VALUE').padEnd(valueWidth), t('SOURCE')] }) }), rows, project.workspace && (_jsx(Box, { marginTop: 1, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: t("Shared by every app below {root}. An app's own value wins.", {
+                        root: project.root,
+                    }) }) })), !project.workspace && (_jsxs(Box, { marginTop: 1, flexDirection: "column", flexShrink: 0, children: [_jsxs(Text, { bold: true, dimColor: true, children: [t('PACKAGE.JSON SYNC'), ' ', _jsx(Text, { color: changes.length > 0 ? 'yellow' : 'green', children: changes.length === 0
+                                    ? t('in sync')
+                                    : changes.length === 1
+                                        ? t('1 diff · y to apply')
+                                        : t('{n} diffs · y to apply', { n: changes.length }) })] }), changes.map(c => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: c.from === undefined ? 'green' : 'yellow', children: c.from === undefined ? '+ ' : '~ ' }), c.key, ":", ' ', c.from !== undefined && _jsxs(Text, { dimColor: true, children: [c.from, " \u2192 "] }), c.to] }, c.key)))] })), _jsx(Box, { flexGrow: 1 }), _jsx(Box, { flexDirection: "column", borderStyle: "single", borderDimColor: true, borderLeft: false, borderRight: false, borderBottom: false, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { bold: true, color: ACCENT, children: t(current.label) }), _jsxs(Text, { dimColor: true, children: [" \u00B7 ", t(current.help)] })] }) }), _jsx(Text, { color: "yellow", children: note })] }));
+}

package/dist/shell/Frame.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+import type { ProjectInfo } from '../types/index.js';
+import { type Task } from '../utils/tasks.js';
+export declare const ACCENT = "cyan";
+export declare const NARROW_BELOW = 100;
+/** Navigator width for a terminal: a quarter of the columns, within 32..48. */
+export declare function navWidth(columns: number): number;
+export interface TopBarProps {
+    context: string;
+    domain?: string;
+    auth: {
+        ready: boolean;
+        label: string;
+    };
+    version: string;
+    environment?: {
+        name: string;
+        color: 'green' | 'yellow' | 'red';
+    };
+}
+export declare function TopBar({ context, domain, auth, version, environment, }: TopBarProps): import("react").JSX.Element;
+/** Three-letter type marker; unknown manifest types show as "???". */
+export declare function typeGlyph(manifest: ProjectInfo['manifest']): string;
+export declare function appStatus(project: ProjectInfo): {
+    deps: boolean;
+    config: boolean;
+    sync: number;
+    signing: boolean;
+    scriptsWarning: string | undefined;
+};
+/** The name shown for an app in the navigator, and what the filter matches. */
+export declare function appLabel(app: ProjectInfo): string;
+/** Indices into `apps` whose label fuzzy-matches the filter. */
+export declare function navMatches(apps: ProjectInfo[], filter: string): number[];
+/** Next selectable index when moving by `delta`, wrapping at both ends. */
+export declare function navMove(ring: number[], selected: number, delta: number): number;
+export interface NavigatorProps {
+    apps: ProjectInfo[];
+    groupOf: (app: ProjectInfo) => string;
+    selected: number;
+    focused: boolean;
+    tasks: Task[];
+    height: number;
+    single: boolean;
+    settingsSelected?: boolean;
+    width: number;
+    filter?: string;
+}
+export declare function Navigator({ apps, groupOf, selected, focused, tasks, height, single, settingsSelected, width, filter, }: NavigatorProps): import("react").JSX.Element;
+export declare function NavigatorStrip({ apps, selected, focused, width, filter, }: Pick<NavigatorProps, 'apps' | 'selected' | 'focused' | 'width' | 'filter'>): import("react").JSX.Element;
+export declare function elapsed(task: Task): string;
+export interface Hint {
+    key: string;
+    label: string;
+}
+export declare function BottomBar({ hints, right }: {
+    hints: Hint[];
+    right: ReactNode;
+}): import("react").JSX.Element;