@fecommunity/reactpress 4.0.0-beta.1 → 4.0.0-beta.11

package/out/shell/components/command-palette.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaletteFocusTarget = exports.getQuickPickEntries = exports.buildPaletteRows = exports.filterCommandItems = exports.QUICK_PICK_VALUES = void 0;
+exports.CommandPalette = CommandPalette;
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const ink_1 = require("ink");
+const design_tokens_1 = require("../../lib/design-tokens");
+const ink_theme_1 = require("./ink-theme");
+const shell_layout_1 = require("../lib/shell-layout");
+const command_palette_1 = require("../../lib/command-palette");
+const { t } = require('../../lib/i18n');
+function SlashLabel({ value, active }) {
+    return (react_1.default.createElement(ink_1.Text, { color: active ? design_tokens_1.palette.accent : design_tokens_1.palette.dim, bold: active }, `/${value}`));
+}
+function PickRow({ entry, focused, index, contentWidth }) {
+    const line = (0, shell_layout_1.truncatePickLine)(entry, contentWidth - 6);
+    const shortcut = index != null ? (react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.border }, `${index + 1} `)) : null;
+    if (focused) {
+        return (react_1.default.createElement(ink_1.Box, { width: contentWidth },
+            react_1.default.createElement(ink_1.Text, { backgroundColor: design_tokens_1.palette.surfaceRaised },
+                shortcut,
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.accent, bold: true },
+                    "\u25B8",
+                    ' '),
+                react_1.default.createElement(SlashLabel, { value: entry.value, active: true }),
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.accent, bold: true }, line.label),
+                line.hint ? (react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim },
+                    " \u00B7 ",
+                    line.hint)) : null)));
+    }
+    return (react_1.default.createElement(ink_1.Box, { width: contentWidth },
+        react_1.default.createElement(ink_1.Text, null,
+            shortcut,
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.border }, "  "),
+            react_1.default.createElement(SlashLabel, { value: entry.value, active: false }),
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim },
+                " ",
+                line.label),
+            line.hint ? (react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.border },
+                " \u00B7 ",
+                line.hint)) : null)));
+}
+function CommandPalette({ items, paletteOpen, query, focusIndex, quickPicks, contentWidth, }) {
+    const filtered = paletteOpen ? (0, command_palette_1.filterCommandItems)(items, query) : [];
+    const rows = paletteOpen ? (0, command_palette_1.buildPaletteRows)(items, filtered) : [];
+    const visibleRows = paletteOpen ? rows.slice(0, 12) : [];
+    const adjustedFocus = Math.min(focusIndex, Math.max(0, visibleRows.length - 1));
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", width: contentWidth },
+        react_1.default.createElement(ink_theme_1.InlinePrompt, { width: contentWidth, paletteOpen: paletteOpen, query: query, placeholder: t('shell.promptIdle') }),
+        !paletteOpen ? (react_1.default.createElement(ink_1.Box, { flexDirection: "column", marginTop: 1 },
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim, bold: true }, t('shell.quickPicks')),
+            quickPicks.map((entry, i) => (react_1.default.createElement(PickRow, { key: entry.value, entry: entry, focused: i === focusIndex, index: i, contentWidth: contentWidth }))))) : null,
+        paletteOpen ? (react_1.default.createElement(ink_1.Box, { flexDirection: "column", marginTop: 1 },
+            visibleRows.length === 0 ? (react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.amber }, t('shell.paletteEmpty'))) : (visibleRows.map((entry, i) => {
+                const focused = i === adjustedFocus;
+                const showSection = entry.sectionTitle &&
+                    (i === 0 || visibleRows[i - 1].sectionTitle !== entry.sectionTitle);
+                return (react_1.default.createElement(react_1.default.Fragment, { key: entry.value },
+                    showSection ? (react_1.default.createElement(ink_1.Box, { marginTop: i === 0 ? 0 : 1 },
+                        react_1.default.createElement(ink_1.Text, { bold: true, color: design_tokens_1.palette.primary }, entry.sectionTitle))) : null,
+                    react_1.default.createElement(PickRow, { entry: entry, focused: focused, contentWidth: contentWidth })));
+            })),
+            rows.length > visibleRows.length ? (react_1.default.createElement(ink_1.Box, { marginTop: 1 },
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, t('shell.paletteMore', { count: rows.length - visibleRows.length })))) : null)) : null,
+        react_1.default.createElement(ink_theme_1.KeyHint, { width: contentWidth }, paletteOpen ? t('shell.paletteHint') : t('shell.menuHint'))));
+}
+var command_palette_2 = require("../../lib/command-palette");
+Object.defineProperty(exports, "QUICK_PICK_VALUES", { enumerable: true, get: function () { return command_palette_2.QUICK_PICK_VALUES; } });
+Object.defineProperty(exports, "filterCommandItems", { enumerable: true, get: function () { return command_palette_2.filterCommandItems; } });
+Object.defineProperty(exports, "buildPaletteRows", { enumerable: true, get: function () { return command_palette_2.buildPaletteRows; } });
+Object.defineProperty(exports, "getQuickPickEntries", { enumerable: true, get: function () { return command_palette_2.getQuickPickEntries; } });
+Object.defineProperty(exports, "getPaletteFocusTarget", { enumerable: true, get: function () { return command_palette_2.getPaletteFocusTarget; } });
+//# sourceMappingURL=command-palette.js.map

package/out/shell/components/dev-stepper.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevStepper = DevStepper;
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const ink_1 = require("ink");
+const design_tokens_1 = require("../../lib/design-tokens");
+const { t } = require('../../lib/i18n');
+const SERVICE_LABELS = {
+    api: 'API',
+    admin: 'Admin',
+    theme: 'Theme',
+};
+function serviceColor(state) {
+    if (state === 'ready')
+        return design_tokens_1.palette.green;
+    if (state === 'starting')
+        return design_tokens_1.palette.amber;
+    if (state === 'error')
+        return design_tokens_1.palette.red;
+    return design_tokens_1.palette.gray;
+}
+function DevStepper({ phases, currentStep, services, readyPayload, statusLines, }) {
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: design_tokens_1.palette.border, paddingX: 1, paddingY: 1 },
+        react_1.default.createElement(ink_1.Box, { flexDirection: "column" }, phases.map((phase) => {
+            const done = phase.step < currentStep;
+            const active = phase.step === currentStep;
+            const mark = done ? '✓' : active ? '●' : '○';
+            const color = done ? design_tokens_1.palette.green : active ? design_tokens_1.palette.accent : design_tokens_1.palette.gray;
+            return (react_1.default.createElement(ink_1.Text, { key: phase.step, color: color },
+                "[",
+                mark,
+                "] ",
+                t(phase.key)));
+        })),
+        services.length > 0 ? (react_1.default.createElement(ink_1.Box, { marginTop: 1, flexDirection: "column" }, services.map((svc) => (react_1.default.createElement(ink_1.Text, { key: svc.name, color: serviceColor(svc.state) },
+            SERVICE_LABELS[svc.name] || svc.name,
+            ": ",
+            svc.state,
+            svc.url ? ` — ${svc.url}` : ''))))) : null,
+        statusLines.slice(-4).map((line, i) => (react_1.default.createElement(ink_1.Text, { key: i, color: design_tokens_1.palette.dim }, line))),
+        readyPayload ? (react_1.default.createElement(ink_1.Box, { marginTop: 1, flexDirection: "column", borderStyle: "single", borderColor: design_tokens_1.palette.primary },
+            react_1.default.createElement(ink_1.Text, { bold: true, color: design_tokens_1.palette.green }, t(readyPayload.readyKey)),
+            readyPayload.displayUrls.map((row) => (react_1.default.createElement(ink_1.Text, { key: row.key },
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, t(row.key)),
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.accent },
+                    "  ",
+                    row.url)))),
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, t('shell.devReadyHint')))) : null));
+}
+//# sourceMappingURL=dev-stepper.js.map

package/out/shell/components/ink-theme.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GradientText = GradientText;
+exports.Rule = Rule;
+exports.InlinePrompt = InlinePrompt;
+exports.KeyHint = KeyHint;
+exports.ScreenTitle = ScreenTitle;
+exports.StatusDot = StatusDot;
+exports.ShellRoot = ShellRoot;
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const ink_1 = require("ink");
+const design_tokens_1 = require("../../lib/design-tokens");
+function hexToRgb(hex) {
+    const h = hex.replace('#', '');
+    return [
+        parseInt(h.slice(0, 2), 16),
+        parseInt(h.slice(2, 4), 16),
+        parseInt(h.slice(4, 6), 16),
+    ];
+}
+function rgbToHex(r, g, b) {
+    const clamp = (v) => Math.max(0, Math.min(255, Math.round(v)));
+    return `#${[clamp(r), clamp(g), clamp(b)]
+        .map((v) => v.toString(16).padStart(2, '0'))
+        .join('')}`;
+}
+function lerpColor(from, to, ratio) {
+    const [r1, g1, b1] = hexToRgb(from);
+    const [r2, g2, b2] = hexToRgb(to);
+    return rgbToHex(r1 + (r2 - r1) * ratio, g1 + (g2 - g1) * ratio, b1 + (b2 - b1) * ratio);
+}
+function GradientText({ text, from, to, bold = false }) {
+    const len = text.length;
+    if (len === 0)
+        return null;
+    const steps = Math.min(len, 16);
+    const stepSize = Math.ceil(len / steps);
+    const parts = [];
+    for (let i = 0; i < steps; i += 1) {
+        const start = i * stepSize;
+        const end = Math.min(start + stepSize, len);
+        const ratio = steps <= 1 ? 0 : i / (steps - 1);
+        parts.push(react_1.default.createElement(ink_1.Text, { key: i, color: lerpColor(from, to, ratio), bold: bold }, text.slice(start, end)));
+    }
+    return react_1.default.createElement(ink_1.Text, null, parts);
+}
+function Rule({ width }) {
+    const w = Math.max(8, width);
+    return (react_1.default.createElement(ink_1.Box, { width: width, marginY: 1 },
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.border }, '─'.repeat(w))));
+}
+/** Minimal inline prompt — no heavy box border. */
+function InlinePrompt({ width, paletteOpen, query, placeholder }) {
+    return (react_1.default.createElement(ink_1.Box, { width: width },
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.primary, bold: true },
+            "\u203A",
+            ' '),
+        paletteOpen ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.accent }, query || '/'),
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.primary }, "\u258C"))) : (react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, placeholder))));
+}
+function KeyHint({ children, width }) {
+    return (react_1.default.createElement(ink_1.Box, { width: width, marginTop: 1 },
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, children)));
+}
+function ScreenTitle({ title, width }) {
+    return (react_1.default.createElement(ink_1.Box, { width: width, marginBottom: 1 },
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, "\u203A "),
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.primary, bold: true }, title)));
+}
+function StatusDot({ ok, loading }) {
+    if (loading)
+        return react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.amber }, "\u25CC");
+    if (ok)
+        return react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.green }, "\u25CF");
+    return react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.gray }, "\u25CB");
+}
+function ShellRoot({ offsetX, contentWidth, children }) {
+    return (react_1.default.createElement(ink_1.Box, { paddingLeft: 1 + offsetX, paddingRight: 1, flexDirection: "column" },
+        react_1.default.createElement(ink_1.Box, { width: contentWidth, flexDirection: "column" }, children)));
+}
+//# sourceMappingURL=ink-theme.js.map

package/out/shell/components/menu-list.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuList = MenuList;
+exports.getMenuItemEntries = getMenuItemEntries;
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const ink_1 = require("ink");
+const design_tokens_1 = require("../../lib/design-tokens");
+function MenuList({ items, focusIndex, hint }) {
+    let itemIndex = -1;
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column" },
+        items.map((entry, i) => {
+            if (entry.type === 'section') {
+                if (!entry.title)
+                    return null;
+                return (react_1.default.createElement(ink_1.Box, { key: `section-${i}`, marginTop: 1, marginBottom: 0 },
+                    react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.border }, "\u250C "),
+                    react_1.default.createElement(ink_1.Text, { bold: true, color: design_tokens_1.palette.primary }, entry.title)));
+            }
+            itemIndex += 1;
+            const focused = itemIndex === focusIndex;
+            const shortcut = entry.shortcut ? `[${entry.shortcut}]` : '   ';
+            return (react_1.default.createElement(ink_1.Box, { key: entry.value, marginLeft: 1 }, focused ? (react_1.default.createElement(ink_1.Text, { backgroundColor: design_tokens_1.palette.surfaceRaised },
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.accent, bold: true }, ' ▸ '),
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.primary, bold: true },
+                    shortcut,
+                    ' '),
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.primary, bold: true }, entry.label),
+                entry.hint ? (react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim },
+                    "  \u00B7  ",
+                    entry.hint)) : null,
+                react_1.default.createElement(ink_1.Text, null, '  '))) : (react_1.default.createElement(ink_1.Text, null,
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.border }, "   "),
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim },
+                    shortcut,
+                    " "),
+                react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, entry.label)))));
+        }),
+        hint ? (react_1.default.createElement(ink_1.Box, { marginTop: 1 },
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.border }, "\u2514 "),
+            react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, hint))) : null));
+}
+function getMenuItemEntries(items) {
+    return items.filter((e) => e.type === 'item');
+}
+//# sourceMappingURL=menu-list.js.map

package/out/shell/components/pulse-bar.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedPulseBar = AnimatedPulseBar;
+// @ts-nocheck
+const react_1 = __importStar(require("react"));
+const ink_1 = require("ink");
+const design_tokens_1 = require("../../lib/design-tokens");
+function AnimatedPulseBar({ width = 24, ratio = 0.7, animate = true }) {
+    const [tick, setTick] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!animate)
+            return undefined;
+        const id = setInterval(() => setTick((v) => v + 1), design_tokens_1.motion.pulsePeriodMs);
+        return () => clearInterval(id);
+    }, [animate]);
+    const wave = animate ? (Math.sin(tick * 0.8) + 1) / 2 : 0;
+    const filled = Math.max(1, Math.min(width, Math.round(width * (ratio * 0.6 + wave * 0.4))));
+    return (react_1.default.createElement(ink_1.Text, null,
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.primary }, '▰'.repeat(filled)),
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.gray }, '▱'.repeat(Math.max(0, width - filled)))));
+}
+//# sourceMappingURL=pulse-bar.js.map

package/out/shell/components/status-rack.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextStatusBar = ContextStatusBar;
+exports.ShellStatusFooter = ShellStatusFooter;
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const ink_1 = require("ink");
+const design_tokens_1 = require("../../lib/design-tokens");
+const ink_theme_1 = require("./ink-theme");
+const shell_layout_1 = require("../lib/shell-layout");
+const { t } = require('../../lib/i18n');
+function statusGlyph(ok) {
+    return ok ? '●' : '○';
+}
+function ContextStatusBar({ projectPath, projectType, loading, contentWidth, stackRows, }) {
+    const modeLabel = projectType === 'monorepo'
+        ? t('banner.mode.monorepo')
+        : projectType === 'standalone'
+            ? t('banner.mode.standalone')
+            : t('banner.mode.uninitialized');
+    const leftText = loading ? t('menu.statusChecking') : projectPath;
+    const rightText = `[${modeLabel}]`;
+    const row = (0, shell_layout_1.splitRowText)(contentWidth, leftText, rightText, stackRows);
+    const left = (react_1.default.createElement(ink_1.Text, { color: loading ? design_tokens_1.palette.amber : design_tokens_1.palette.dim }, row.left));
+    const right = (react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.accent }, row.right));
+    return (react_1.default.createElement(ink_theme_1.SplitRow, { width: contentWidth, left: left, right: right, stack: row.stack, marginBottom: 0 }));
+}
+function ShellStatusFooter({ apiOk, dbOk, dockerOk, loading, contentWidth, stackRows, }) {
+    const leftText = loading
+        ? t('shell.footer.checking')
+        : t('shell.footer.status', {
+            api: statusGlyph(apiOk),
+            db: statusGlyph(dbOk),
+            docker: statusGlyph(dockerOk),
+        });
+    const rightText = t('banner.subtitle');
+    const row = (0, shell_layout_1.splitRowText)(contentWidth, leftText, rightText, stackRows);
+    const left = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.accent }, "\u25CF "),
+        react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, row.left)));
+    const right = react_1.default.createElement(ink_1.Text, { color: design_tokens_1.palette.dim }, row.right);
+    return (react_1.default.createElement(ink_theme_1.StatusFooter, { left: left, right: right, width: contentWidth, stack: row.stack }));
+}
+//# sourceMappingURL=status-rack.js.map

package/out/shell/hooks/use-terminal-size.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTerminalSize = useTerminalSize;
+// @ts-nocheck
+const react_1 = require("react");
+const ink_1 = require("ink");
+function useTerminalSize() {
+    const { stdout } = (0, ink_1.useStdout)();
+    const [size, setSize] = (0, react_1.useState)(() => ({
+        columns: stdout?.columns || 80,
+        rows: stdout?.rows || 24,
+    }));
+    (0, react_1.useEffect)(() => {
+        if (!stdout)
+            return undefined;
+        const onResize = () => {
+            setSize({
+                columns: stdout.columns || 80,
+                rows: stdout.rows || 24,
+            });
+        };
+        stdout.on('resize', onResize);
+        return () => stdout.off('resize', onResize);
+    }, [stdout]);
+    return size;
+}
+//# sourceMappingURL=use-terminal-size.js.map