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

package/dist/shell/Frame.js

@@ -0,0 +1,134 @@
+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, }) {
+    return (_jsxs(Box, { paddingX: 1, justifyContent: "space-between", height: 1, children: [_jsx(Box, { flexShrink: 1, marginRight: 2, children: _jsxs(Text, { wrap: "truncate", 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()} ` })] })), _jsxs(Text, { dimColor: true, children: [" ", context] })] }) }), _jsx(Box, { flexShrink: 0, children: _jsxs(Text, { wrap: "truncate", children: [domain && _jsxs(Text, { dimColor: true, children: [domain, " "] }), _jsx(Text, { color: auth.ready ? 'green' : 'yellow', children: auth.ready ? '●' : '○' }), _jsxs(Text, { children: [" ", auth.label, " "] }), _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".
+    const fixed = 1 + 1 + (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", borderDimColor: true, borderTop: false, 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, dimColor: true, 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/Settings.d.ts

@@ -0,0 +1,6 @@
+/** Global preferences, saved per field like the Config tab. */
+export declare function SettingsScreen({ onChanged, onClose, onOpenWorkspace, }: {
+    onChanged: () => void;
+    onClose: () => void;
+    onOpenWorkspace?: () => void;
+}): import("react").JSX.Element;

package/dist/shell/Settings.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getSettings, 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',
+        options: LANGUAGES,
+        display: value => LANGUAGE_NAMES[value],
+    },
+    {
+        key: 'introAnimation',
+        label: 'Intro animation',
+        options: ['on', 'off'],
+        display: value => t(value),
+    },
+];
+/** Global preferences, saved per field like the Config tab. */
+export function SettingsScreen({ onChanged, onClose, onOpenWorkspace, }) {
+    const [values, setValues] = useState(() => {
+        const s = getSettings();
+        return {
+            language: s.language,
+            introAnimation: s.introAnimation ? 'on' : 'off',
+        };
+    });
+    const [cursor, setCursor] = useState(0);
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState('');
+    const [note, setNote] = useState('');
+    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',
+        });
+        setNote(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 {
+                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", borderStyle: "round", borderColor: ACCENT, paddingX: 1, width: 64, 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(18) }), _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(18) }), _jsx(Text, { dimColor: true, children: t('shared auth and site config for every app') })] })), _jsx(Text, { color: "yellow", children: note }), _jsx(Text, { dimColor: true, children: editing
+                    ? t('←→ choose · Enter confirm · Esc cancel')
+                    : t('↑↓ setting · Enter edit · Esc close') })] }));
+}

package/dist/shell/Shell.d.ts

@@ -0,0 +1,9 @@
+import type { ProjectInfo } from '../types/index.js';
+interface Props {
+    apps: ProjectInfo[];
+    workspaceRoot?: string;
+    version: string;
+    minimal?: boolean;
+}
+export declare function Shell({ apps: initialApps, workspaceRoot, version, minimal, }: Props): import("react").JSX.Element;
+export {};