sitevision-cli 1.0.0-beta.30 → 1.0.0-beta.31

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.0-beta.31
+
+- The help panel (`?`) now starts with a short guide to the pane you are in:
+  what it shows, how the values relate, and which keys apply. The Config guide
+  explains how local, shared and workspace settings layer on top of each
+  other. The panel scrolls when it does not fit.
+- Updated dependencies.
+
 ## 1.0.0-beta.30
 
 - Dev and watch no longer rebuild on file events that change nothing, such as

package/dist/shell/Help.d.ts

@@ -1,6 +1,9 @@
 import { type Hint } from './Frame.js';
-export declare function HelpPanel({ here, height, onClose, }: {
+import type { Tab } from './actions.js';
+export type Where = Tab | 'nav' | 'workspace';
+export declare function HelpPanel({ here, where, height, onClose, }: {
     here: Hint[];
+    where: Where;
     height: number;
     onClose: () => void;
 }): import("react").JSX.Element;

package/dist/shell/Help.js

@@ -1,9 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useInput } from 'ink';
+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'],
@@ -15,17 +62,34 @@ const MOVE = [
 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, height, onClose, }) {
+export function HelpPanel({ here, where, height, onClose, }) {
+    const inner = useRef(null);
+    const [top, setTop] = useState(0);
+    const [total, setTotal] = useState(0);
+    useEffect(() => {
+        if (inner.current)
+            setTotal(measureElement(inner.current).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('Keys') }), _jsxs(Text, { dimColor: true, children: [" \u00B7 ", t('Esc close')] })] }), _jsxs(Box, { flexWrap: "wrap", columnGap: 4, children: [_jsx(Box, { flexDirection: "column", marginTop: 1, 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", marginTop: 1, 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)))] })] })] })] }));
+    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/Shell.js

@@ -432,6 +432,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version, minimal = fal
             ['/', 'commands'],
             ['q', 'quit'],
         ]);
+    const where = focus === 'nav' && !settings ? 'nav' : settings ? 'workspace' : tab;
     const hereHints = focus === 'nav' && !settings
         ? navHints
         : settings
@@ -507,6 +508,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version, minimal = fal
         renderOverlay(overlay, {
             project,
             here: hereHints,
+            where,
             closeOverlay,
             run,
             notify,
@@ -542,7 +544,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version, minimal = fal
                                             : 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 }), popover && (_jsx(Popover, { columns: columns, rows: frameRows, width: popoverWidth, height: popoverHeight, children: popover }))] }));
 }
 function renderOverlay(overlay, env) {
-    const { project, here, closeOverlay, run, notify, loadAddons, height, rerender, openWorkspace, } = env;
+    const { project, here, where, closeOverlay, run, notify, loadAddons, height, rerender, openWorkspace, } = env;
     switch (overlay.kind) {
         case 'palette':
             return (_jsx(CommandPalette, { project: project, onRun: run, onClose: closeOverlay, height: height }));
@@ -580,7 +582,7 @@ function renderOverlay(overlay, env) {
                     overlay.resolve(null);
                 } }));
         case 'help':
-            return _jsx(HelpPanel, { here: here, height: height, onClose: closeOverlay });
+            return (_jsx(HelpPanel, { here: here, where: where, height: height, onClose: closeOverlay }));
         case 'changelog':
             return (_jsx(ChangelogPanel, { since: overlay.since, height: height, onClose: closeOverlay }));
         case 'settings':

package/dist/utils/i18n.js

@@ -103,6 +103,20 @@ const sv = {
     'switch pane': 'byt panel',
     tabs: 'flikar',
     help: 'hjälp',
+    // Help guide
+    '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.': 'Skriv för att filtrera applistan. ↑↓ flyttar, Enter väljer appen och flyttar fokus till innehållspanelen. Åtgärdstangenter som d eller p fungerar bara där; i navigatorn söker de.',
+    'The last row is Workspace settings: the shared root config that every app inherits.': 'Sista raden är Arbetsytans inställningar: den delade rotkonfigurationen som alla appar ärver.',
+    "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.": 'Rotens .dev_properties.json som delas av alla appar, med rotens package.json som standardvärden under. Fyll i webbplats, autentisering och miljöer en gång; en apps egen konfig skriver bara över det som skiljer.',
+    'Same keys as the Config tab: Enter edits and saves, Esc cancels, ←→ or space cycles choices.': 'Samma tangenter som Konfig-fliken: Enter redigerar och sparar, Esc avbryter, ←→ eller mellanslag bläddrar bland val.',
+    'Each status line names the key that fixes it: i installs dependencies, e opens Config, y syncs package.json, / sets up signing.': 'Varje statusrad anger tangenten som åtgärdar den: i installerar beroenden, e öppnar Konfig, y synkar package.json, / sätter upp signering.',
+    'The badge in the top bar is the active environment: green for the base, yellow for others, red for production. v cycles it.': 'Märket i toppraden är den aktiva miljön: grönt för basen, gult för övriga, rött för produktion. v växlar.',
+    '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.': 'Värden kommer i lager och källan visas bredvid varje: din lokala .dev_properties.json vinner, delade värden i package.json ligger under, och i en arbetsyta rotkonfigurationen under det. Miljöer läggs ovanpå basen och skriver bara över det som skiljer.',
+    '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.': 'Enter redigerar och sparar ett fält, Esc avbryter, ←→ eller mellanslag bläddrar bland val, Ctrl+O listar webbplatsens tillägg. y kopierar delade värden till package.json för teamet.',
+    'Passwords and secrets go to the OS keychain, never to a file. Leave them empty to be asked on each run.': 'Lösenord och hemligheter sparas i nyckelringen, aldrig i en fil. Lämna dem tomma för att bli tillfrågad varje gång.',
+    "The versions uploaded to the addon on the active environment's site, the domain in the top bar. v switches environment.": 'Versionerna som laddats upp till tillägget på den aktiva miljöns webbplats, domänen i toppraden. v byter miljö.',
+    '↑↓ select, a activates the selected version, r refreshes. Production deploys activate on their own.': '↑↓ väljer, a aktiverar vald version, r uppdaterar. Produktionsdriftsättningar aktiverar själva.',
+    'Output from build, sign, deploy, dev and watch for the selected app. Dev and watch keep running while you switch apps; K stops them.': 'Utdata från build, sign, deploy, dev och watch för vald app. Dev och watch fortsätter köra medan du byter app; K stoppar dem.',
+    '↑↓ scroll, PgUp/PgDn page, f jumps to the end, x toggles line wrap.': '↑↓ scrollar, PgUp/PgDn bläddrar sida, f hoppar till slutet, x växlar radbrytning.',
     "What's new": 'Nyheter',
     'changelog for every release': 'ändringslogg för varje version',
     Changelog: 'Ändringslogg',

package/package.json

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