sitevision-cli 1.0.0-beta.18 → 1.0.0-beta.19

package/dist/cli.js

@@ -30,11 +30,13 @@ const cli = meow(`
 	  info          Show project information
 
 	Options
+	  --minimal     Shell: compact layout for small terminals
 	  --help        Show this help message
 	  --version     Show version number
 
 	Examples
 	  $ svc                     # Shell: run inside an app, or at the repo root
+	  $ svc --minimal           # Shell without the sidebar, for a small pane
 	  $ svc dev
 	  $ svc dev --signed
 	  $ svc watch
@@ -66,6 +68,10 @@ const cli = meow(`
         cookie: {
             type: 'string',
         },
+        minimal: {
+            type: 'boolean',
+            default: false,
+        },
     },
 });
 const [commandName, ...args] = cli.input;
@@ -125,14 +131,14 @@ async function playIntro(art) {
 async function runShell(apps, workspaceRoot) {
     process.stdout.write('\x1b[?1049h\x1b[H');
     try {
-        const art = process.stdin.isTTY && settings.introAnimation
+        const art = process.stdin.isTTY && settings.introAnimation && !cli.flags.minimal
             ? pickIntroArt(process.stdout.columns ?? 0)
             : undefined;
         if (art) {
             await playIntro(art);
             process.stdout.write('\x1b[2J\x1b[H');
         }
-        const app = render(_jsx(Shell, { apps: apps, workspaceRoot: workspaceRoot, version: pkg.version }));
+        const app = render(_jsx(Shell, { apps: apps, workspaceRoot: workspaceRoot, version: pkg.version, minimal: cli.flags.minimal }));
         await app.waitUntilExit();
     }
     finally {

package/dist/shell/ConfigForm.js

@@ -453,7 +453,7 @@ export function ConfigForm({ project, active, width, height, pickAddon, onSaved,
     let lastSection;
     for (const f of fields) {
         if (f.section && f.section !== lastSection) {
-            rows.push(_jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, dimColor: true, children: t(f.section) }) }, `s-${f.section}`));
+            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;
@@ -487,11 +487,11 @@ export function ConfigForm({ project, active, width, height, pickAddon, onSaved,
             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, 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));
+        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: [_jsxs(Text, { dimColor: true, children: [('  ' + t('FIELD')).padEnd(24), t('VALUE').padEnd(valueWidth), t('SOURCE')] }), rows, project.workspace && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t("Shared by every app below {root}. An app's own value wins.", {
+    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", children: [_jsxs(Text, { bold: true, dimColor: true, children: [t('PACKAGE.JSON SYNC'), ' ', _jsx(Text, { color: changes.length > 0 ? 'yellow' : 'green', children: changes.length === 0
+                    }) }) })), !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')

package/dist/shell/Frame.d.ts

@@ -47,7 +47,7 @@ export interface NavigatorProps {
     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, }: Pick<NavigatorProps, 'apps' | 'selected' | 'focused'>): 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;

package/dist/shell/Frame.js

@@ -109,8 +109,21 @@ export function Navigator({ apps, groupOf, selected, focused, tasks, height, sin
                         ? 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, }) {
-    return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { wrap: "truncate", children: apps.map((app, index) => (_jsxs(Text, { backgroundColor: index === selected && focused ? ACCENT : undefined, color: index === selected && focused ? 'black' : undefined, bold: index === selected, children: [' ', typeGlyph(app.manifest), " ", appLabel(app), ' '] }, app.root))) }) }));
+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;

package/dist/shell/Shell.d.ts

@@ -3,6 +3,7 @@ interface Props {
     apps: ProjectInfo[];
     workspaceRoot?: string;
     version: string;
+    minimal?: boolean;
 }
-export declare function Shell({ apps: initialApps, workspaceRoot, version }: Props): import("react").JSX.Element;
+export declare function Shell({ apps: initialApps, workspaceRoot, version, minimal, }: Props): import("react").JSX.Element;
 export {};

package/dist/shell/Shell.js

@@ -32,7 +32,7 @@ function useSize() {
     }, [stdout]);
     return size;
 }
-export function Shell({ apps: initialApps, workspaceRoot, version }) {
+export function Shell({ apps: initialApps, workspaceRoot, version, minimal = false, }) {
     const { exit } = useApp();
     const { columns, rows } = useSize();
     const tasks = useTasks();
@@ -77,7 +77,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
     // Re-read after any reload so saved values show up.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [workspaceRoot, apps, env]);
-    const narrow = columns < NARROW_BELOW;
+    const narrow = minimal || columns < NARROW_BELOW;
     const sidebar = navWidth(columns);
     // The navigator shows the fuzzy matches; `selected` stays an index into
     // `apps` (with `apps.length` meaning the workspace settings row).
@@ -363,7 +363,9 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
             run(action);
     }, { isActive: overlay === null && !editing });
     // Frame geometry: one row for Ink's trailing newline, top bar, bottom bar.
-    const frameRows = Math.max(10, rows - 1);
+    // The sidebar layout needs 10 rows to stack its own fixed rows without
+    // overflowing; the compact one has no sidebar and fits in 6.
+    const frameRows = Math.max(narrow ? 6 : 10, rows - 1);
     const mainHeight = frameRows - 2;
     const contentHeight = mainHeight - 1 - (narrow ? 1 : 0);
     const groupOf = (app) => workspaceRoot ? appGroup(workspaceRoot, app.root) : '.';
@@ -495,9 +497,9 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
     return (_jsxs(Box, { flexDirection: "column", width: columns, height: frameRows, children: [_jsx(TopBar, { context: contextLabel, domain: project.devProperties?.domain, auth: authState(project), environment: {
                     name: env,
                     color: environmentColor(env, rawProject.devProperties),
-                }, version: version }), _jsxs(Box, { flexGrow: 1, height: mainHeight, borderStyle: "single", borderDimColor: true, borderLeft: false, borderRight: false, borderBottom: false, children: [!narrow && (_jsx(Navigator, { apps: matches.map(i => apps[i]), groupOf: groupOf, selected: matches.indexOf(selected), focused: focus === 'nav', tasks: tasks, height: mainHeight - 1, single: single, settingsSelected: settings, width: sidebar, filter: filter })), _jsxs(Box, { flexDirection: "column", width: narrow ? columns : columns - sidebar, overflow: "hidden", children: [narrow && !single && (_jsx(NavigatorStrip, { apps: matches.map(i => apps[i]), selected: matches.indexOf(selected), focused: focus === 'nav' })), settings ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: ACCENT, children: t('Workspace settings') }), _jsx(Text, { dimColor: true, children: onboard && configIncomplete(workspaceTarget?.base)
+                }, version: version }), _jsxs(Box, { flexGrow: 1, height: mainHeight, borderStyle: "single", borderDimColor: true, borderLeft: false, borderRight: false, borderBottom: false, children: [!narrow && (_jsx(Navigator, { apps: matches.map(i => apps[i]), groupOf: groupOf, selected: matches.indexOf(selected), focused: focus === 'nav', tasks: tasks, height: mainHeight - 1, single: single, settingsSelected: settings, width: sidebar, filter: filter })), _jsxs(Box, { flexDirection: "column", width: narrow ? columns : columns - sidebar, overflow: "hidden", children: [narrow && !single && (_jsx(NavigatorStrip, { apps: matches.map(i => apps[i]), selected: matches.indexOf(selected), focused: focus === 'nav', width: columns, filter: filter })), settings ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: ACCENT, children: t('Workspace settings') }), _jsx(Text, { dimColor: true, children: onboard && configIncomplete(workspaceTarget?.base)
                                             ? t(' · new workspace: fill in once, every app inherits · Esc skips')
-                                            : t(' · shared .dev_properties.json at the root') })] })) : (_jsx(TabBar, { tab: tab, narrow: narrow, focused: focus === 'content' })), _jsx(Box, { height: contentHeight, overflow: "hidden", alignItems: "flex-start", children: content })] })] }), _jsx(BottomBar, { hints: hints, right: right })] }));
+                                            : t(' · shared .dev_properties.json at the root') })] })) : (_jsx(TabBar, { tab: tab, narrow: narrow, focused: focus === 'content' })), _jsx(Box, { flexDirection: "column", height: contentHeight, overflow: "hidden", alignItems: "flex-start", children: content })] })] }), _jsx(BottomBar, { hints: hints, right: right })] }));
 }
 function renderOverlay(overlay, env) {
     const { project, closeOverlay, run, notify, loadAddons, height, rerender, openWorkspace, } = env;

package/dist/shell/Tabs.js

@@ -15,7 +15,7 @@ export function TabBar({ tab, narrow, focused, }) {
     return (_jsx(Box, { paddingX: 1, children: TABS.map((entry, i) => (_jsxs(Text, { children: [_jsxs(Text, { bold: entry.id === tab, color: entry.id === tab ? ACCENT : undefined, dimColor: entry.id !== tab, underline: entry.id === tab && focused, children: [i + 1, " ", t(narrow ? entry.short : entry.label)] }), ' '.repeat(3)] }, entry.id))) }));
 }
 function Row({ label, value, dim, }) {
-    return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { dimColor: true, children: label.padEnd(14) }), value, dim && _jsxs(Text, { dimColor: true, children: [" ", dim] })] }));
+    return (_jsx(Box, { height: 1, flexShrink: 0, children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { dimColor: true, children: label.padEnd(14) }), value, dim && _jsxs(Text, { dimColor: true, children: [" ", dim] })] }) }));
 }
 const LEVEL_COLOR = {
     info: undefined,
@@ -48,7 +48,7 @@ export function Overview({ project, tasks, height, }) {
         .slice(-Math.max(1, height - 18))
         .toReversed();
     const status = (ok, okText, badText, warn = false) => (_jsxs(Text, { children: [_jsx(Text, { color: ok ? 'green' : warn ? 'yellow' : 'red', children: ok ? '✓' : warn ? '~' : '✗' }), ' ', ok ? okText : badText] }));
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsxs(Text, { bold: true, children: [localizedText(project.manifest.name) || project.manifest.id, ' ', _jsxs(Text, { dimColor: true, children: [project.manifest.type, project.manifest.bundled ? t(' · bundled') : ''] })] }), _jsx(Row, { label: t('id'), value: project.manifest.id }), _jsx(Row, { label: t('version'), value: project.manifest.version }), _jsx(Row, { label: t('type'), value: `${project.manifest.type} (${appTypeOf(project.manifest) ?? '?'})` }), _jsx(Row, { label: t('addon'), value: dev?.addonName ?? notSet, dim: src('addonName') }), _jsx(Row, { label: t('site'), value: dev?.siteName ?? notSet, dim: src('siteName') }), _jsx(Row, { label: t('environment'), value: dev?.environmentName ?? 'dev', dim: dev?.productionEnvironment ? t('production') : undefined }), _jsx(Row, { label: t('domain'), value: dev?.domain ?? notSet, dim: src('domain') }), _jsx(Row, { label: t('auth'), value: dev?.authMethod ?? (dev ? 'basic' : notSet), dim: src('authMethod') }), _jsx(Row, { label: t('signing user'), value: dev?.signingUsername ?? notSet, dim: src('signingUsername') }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [t('deps').padEnd(10), status(project.hasNodeModules, 'node_modules', t('missing · i to install'))] }), _jsxs(Text, { dimColor: true, children: [t('config').padEnd(10), status(Boolean(dev), t('dev properties'), t('missing · e to edit'))] }), _jsxs(Text, { dimColor: true, children: [t('sync').padEnd(10), status(sync === 0, 'package.json', sync === 1
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsx(Box, { height: 1, flexShrink: 0, children: _jsxs(Text, { bold: true, wrap: "truncate", children: [localizedText(project.manifest.name) || project.manifest.id, ' ', _jsxs(Text, { dimColor: true, children: [project.manifest.type, project.manifest.bundled ? t(' · bundled') : ''] })] }) }), _jsx(Row, { label: t('id'), value: project.manifest.id }), _jsx(Row, { label: t('version'), value: project.manifest.version }), _jsx(Row, { label: t('type'), value: `${project.manifest.type} (${appTypeOf(project.manifest) ?? '?'})` }), _jsx(Row, { label: t('addon'), value: dev?.addonName ?? notSet, dim: src('addonName') }), _jsx(Row, { label: t('site'), value: dev?.siteName ?? notSet, dim: src('siteName') }), _jsx(Row, { label: t('environment'), value: dev?.environmentName ?? 'dev', dim: dev?.productionEnvironment ? t('production') : undefined }), _jsx(Row, { label: t('domain'), value: dev?.domain ?? notSet, dim: src('domain') }), _jsx(Row, { label: t('auth'), value: dev?.authMethod ?? (dev ? 'basic' : notSet), dim: src('authMethod') }), _jsx(Row, { label: t('signing user'), value: dev?.signingUsername ?? notSet, dim: src('signingUsername') }), _jsxs(Box, { marginTop: 1, flexDirection: "column", flexShrink: 0, children: [_jsxs(Text, { dimColor: true, children: [t('deps').padEnd(10), status(project.hasNodeModules, 'node_modules', t('missing · i to install'))] }), _jsxs(Text, { dimColor: true, children: [t('config').padEnd(10), status(Boolean(dev), t('dev properties'), t('missing · e to edit'))] }), _jsxs(Text, { dimColor: true, children: [t('sync').padEnd(10), status(sync === 0, 'package.json', sync === 1
                                 ? t('1 diff · y to apply')
                                 : t('{n} diffs · y to apply', { n: sync }), true)] }), _jsxs(Text, { dimColor: true, children: [t('signing').padEnd(10), status(project.hasSigningProperties, dev?.signingUsername ?? '', t('missing · / set up signing'))] }), _jsxs(Text, { dimColor: true, children: [t('scripts').padEnd(10), status(scripts.status === 'ok', scripts.installed ?? '', scripts.installed
                                 ? `${scripts.installed} · ${scripts.status}`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sitevision-cli",
-	"version": "1.0.0-beta.18",
+	"version": "1.0.0-beta.19",
 	"license": "MIT",
 	"bin": {
 		"svc": "dist/cli.js"