@promovaweb/specsfy 0.7.0 → 0.8.1

package/dist/tui.js

@@ -14,7 +14,7 @@ import { resolvePath } from "./filesystem.js";
 import { AUXILIARY_SKILLS, DOCUMENTATION_SKILLS, FRAMEWORK_SKILLS, SkillInstaller, } from "./installer.js";
 import { scanSpecs, specsFingerprint, summarizeSpecs, } from "./progress.js";
 import { runProjectTests } from "./project-testing.js";
-import { ensureSkillsLock, skillsLockFingerprint, } from "./skill-lock.js";
+import { ensureSkillsLock, skillsLockFingerprint } from "./skill-lock.js";
 import { VERSION } from "./version.js";
 marked.use(markedTerminal({
     reflowText: true,
@@ -87,6 +87,30 @@ export const TUI_TABS = [
     { id: "skills", label: "Skills", key: "C-k" },
     { id: "about", label: "Sobre", key: "C-o" },
 ];
+/**
+ * Paleta semântica da TUI, derivada dos tokens oficiais do dark mode.
+ *
+ * Os pares de texto, seleção e foco mantêm contraste mensurável sem depender
+ * das cores configuráveis de 16 posições do terminal da pessoa usuária.
+ */
+export const TUI_THEME = {
+    background: "#000A0E",
+    surface: "#001117",
+    surfaceRaised: "#03212A",
+    text: "#F2F8F9",
+    textMuted: "#B2C6CE",
+    border: "#5F7D8C",
+    accent: "#C4B5FD",
+    activeBackground: "#5EEDE1",
+    activeText: "#001117",
+    selectedBackground: "#6D28D9",
+    selectedText: "#F2F8F9",
+    primaryBackground: "#15626A",
+    primaryText: "#F2F8F9",
+    focusBackground: "#5EEDE1",
+    focusText: "#001117",
+    warning: "#FCD34D",
+};
 /** Dashboard terminal principal. */
 export class SpecsfyTui {
     project;
@@ -181,7 +205,11 @@ export class SpecsfyTui {
             height: 1,
             align: "center",
             content: "Specsfy — Dashboard de specs e skills",
-            style: { fg: "white", bg: "black", bold: true },
+            style: {
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.selectedBackground,
+                bold: true,
+            },
         });
         this.#projectInput = blessed.textbox({
             parent: screen,
@@ -195,10 +223,10 @@ export class SpecsfyTui {
             keys: true,
             mouse: true,
             style: {
-                fg: "white",
-                bg: "black",
-                border: { fg: "gray" },
-                focus: { border: { fg: "cyan" } },
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.surface,
+                border: { fg: TUI_THEME.border },
+                focus: { border: { fg: TUI_THEME.focusBackground } },
             },
         });
         this.#projectInput.on("submit", (value) => {
@@ -238,10 +266,14 @@ export class SpecsfyTui {
                 mouse: true,
                 keys: true,
                 style: {
-                    fg: "gray",
-                    bg: "black",
-                    focus: { fg: "white", bg: "blue", bold: true },
-                    hover: { fg: "white", bg: "blue" },
+                    fg: TUI_THEME.textMuted,
+                    bg: TUI_THEME.background,
+                    focus: {
+                        fg: TUI_THEME.focusText,
+                        bg: TUI_THEME.focusBackground,
+                        bold: true,
+                    },
+                    hover: { fg: TUI_THEME.focusText, bg: TUI_THEME.focusBackground },
                 },
             });
             button.on("press", () => this.showTab(id));
@@ -254,7 +286,7 @@ export class SpecsfyTui {
             left: 0,
             width: "100%",
             orientation: "horizontal",
-            style: { fg: "gray" },
+            style: { fg: TUI_THEME.border },
         });
         this.#body = blessed.box({
             parent: screen,
@@ -262,7 +294,7 @@ export class SpecsfyTui {
             left: 1,
             right: 1,
             bottom: 4,
-            style: { fg: "white", bg: "black" },
+            style: { fg: TUI_THEME.text, bg: TUI_THEME.background },
         });
         this.#status = blessed.box({
             parent: screen,
@@ -271,7 +303,7 @@ export class SpecsfyTui {
             width: "100%",
             height: 1,
             padding: { left: 1 },
-            style: { fg: "gray", bg: "black" },
+            style: { fg: TUI_THEME.textMuted, bg: TUI_THEME.surface },
         });
         blessed.box({
             parent: screen,
@@ -281,7 +313,7 @@ export class SpecsfyTui {
             height: 1,
             content: " ^ = Ctrl  ·  Tab/Shift+Tab: foco  ·  Setas: navegar  ·  " +
                 "Espaço: abrir spec/alternar skill  ·  Esc: voltar  ·  Mouse: disponível",
-            style: { fg: "cyan", bg: "black" },
+            style: { fg: TUI_THEME.accent, bg: TUI_THEME.background },
         });
         blessed.box({
             parent: screen,
@@ -290,7 +322,7 @@ export class SpecsfyTui {
             width: "100%",
             height: 1,
             content: " ^Q Sair    Esc Voltar",
-            style: { fg: "white", bg: "black", bold: true },
+            style: { fg: TUI_THEME.text, bg: TUI_THEME.surface, bold: true },
         });
     }
     bindKeys(screen) {
@@ -339,8 +371,9 @@ export class SpecsfyTui {
         if (!body || !this.#screen)
             return;
         for (const [id, button] of this.#tabButtons) {
-            button.style.bg = id === tab ? "cyan" : "black";
-            button.style.fg = id === tab ? "black" : "gray";
+            button.style.bg =
+                id === tab ? TUI_THEME.activeBackground : TUI_THEME.background;
+            button.style.fg = id === tab ? TUI_THEME.activeText : TUI_THEME.textMuted;
             button.style.bold = id === tab;
         }
         for (const child of [...body.children])
@@ -387,24 +420,24 @@ export class SpecsfyTui {
     renderHome(body) {
         const summary = summarizeSpecs(this.#specs);
         const cards = [
-            ["Specs", String(summary.total_specs), "#173e67", "#2f81f7"],
+            ["Specs", String(summary.total_specs), "#021C26", "#5EEDE1"],
             [
                 `Tarefas · ${summary.pending_tasks} pendentes`,
                 `${summary.completed_tasks}/${summary.total_tasks}`,
-                "#3f2d63",
-                "#a371f7",
+                "#2E1065",
+                "#C4B5FD",
             ],
             [
                 `Itens · ${summary.pending_items} pendentes`,
                 `${summary.completed_items}/${summary.total_items}`,
-                "#174b43",
-                "#2ea043",
+                "#03212A",
+                "#37E1D0",
             ],
             [
                 "",
                 `${summary.percent}%\n${progressBar(summary.percent, 16)}`,
-                "#4a381c",
-                "#d29922",
+                "#001117",
+                TUI_THEME.warning,
             ],
         ];
         cards.forEach(([label, value, background, border], index) => {
@@ -419,7 +452,7 @@ export class SpecsfyTui {
                 valign: "middle",
                 content: `{bold}${value}{/bold}${label ? `\n${label}` : ""}`,
                 tags: true,
-                style: { fg: "white", bg: background, border: { fg: border } },
+                style: { fg: TUI_THEME.text, bg: background, border: { fg: border } },
             });
         });
         blessed.box({
@@ -433,7 +466,11 @@ export class SpecsfyTui {
             valign: "middle",
             content: "Visão consolidada do andamento das especificações. " +
                 "Os números são recalculados quando os arquivos mudam.",
-            style: { fg: "white", border: { fg: "gray" } },
+            style: {
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.surface,
+                border: { fg: TUI_THEME.border },
+            },
         });
     }
     renderBacklogs(body) {
@@ -451,8 +488,8 @@ export class SpecsfyTui {
             keys: true,
             vi: true,
             mouse: true,
-            scrollbar: { ch: " ", track: { bg: "gray" }, style: { bg: "cyan" } },
-            style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+            scrollbar: terminalScrollbar(),
+            style: focusablePanelStyle(),
         });
         const list = blessed.list({
             parent: body,
@@ -468,17 +505,21 @@ export class SpecsfyTui {
             mouse: true,
             tags: false,
             style: {
-                selected: { fg: "white", bg: "blue", bold: true },
-                item: { fg: "white" },
-                border: { fg: "gray" },
-                focus: { border: { fg: "yellow" } },
+                ...focusablePanelStyle(),
+                selected: {
+                    fg: TUI_THEME.selectedText,
+                    bg: TUI_THEME.selectedBackground,
+                    bold: true,
+                },
+                item: { fg: TUI_THEME.text, bg: TUI_THEME.background },
             },
         });
         const updatePreview = () => {
             const item = this.#backlogs[selectedIndex(list)];
             preview.setLabel(item ? ` ${item.identifier} · ${item.status} ` : " Nenhum backlog ");
-            preview.setContent(item ? renderMarkdown(formatBacklogPreview(item.content)) :
-                "Crie arquivos em specs/backlog/<NNNN>-<slug>.md para visualizá-los aqui.");
+            preview.setContent(item
+                ? renderMarkdown(formatBacklogPreview(item.content))
+                : "Crie arquivos em specs/backlog/<NNNN>-<slug>.md para visualizá-los aqui.");
             this.#screen?.render();
         };
         list.on("select item", updatePreview);
@@ -495,7 +536,7 @@ export class SpecsfyTui {
             width: "100%",
             height: "100%",
             border: "line",
-            style: { border: { fg: "gray" } },
+            style: { border: { fg: TUI_THEME.border } },
         });
         blessed.box({
             parent: panel,
@@ -504,7 +545,11 @@ export class SpecsfyTui {
             width: "100%-2",
             height: 1,
             content: heading,
-            style: { fg: "white", bg: "cyan", bold: true },
+            style: {
+                fg: TUI_THEME.activeText,
+                bg: TUI_THEME.activeBackground,
+                bold: true,
+            },
         });
         const list = blessed.list({
             parent: panel,
@@ -522,8 +567,12 @@ export class SpecsfyTui {
             vi: true,
             mouse: true,
             style: {
-                selected: { fg: "white", bg: "blue", bold: true },
-                item: { fg: "white" },
+                selected: {
+                    fg: TUI_THEME.selectedText,
+                    bg: TUI_THEME.selectedBackground,
+                    bold: true,
+                },
+                item: { fg: TUI_THEME.text, bg: TUI_THEME.background },
             },
         });
         const open = () => {
@@ -558,8 +607,12 @@ export class SpecsfyTui {
             vi: true,
             mouse: true,
             padding: { left: 1, right: 1 },
-            scrollbar: { ch: " ", track: { bg: "gray" }, style: { bg: "cyan" } },
-            style: { fg: "white", bg: "black", border: { fg: "cyan" } },
+            scrollbar: terminalScrollbar(),
+            style: {
+                fg: TUI_THEME.text,
+                bg: TUI_THEME.background,
+                border: { fg: TUI_THEME.focusBackground },
+            },
         });
         this.#modal = modal;
         modal.focus();
@@ -576,12 +629,7 @@ export class SpecsfyTui {
             align: "center",
             mouse: true,
             keys: true,
-            style: {
-                fg: "white",
-                bg: "blue",
-                focus: { bg: "cyan", fg: "black" },
-                hover: { bg: "cyan", fg: "black" },
-            },
+            style: buttonStyle(true),
         });
         button.on("press", () => void this.runTests());
         blessed.box({
@@ -643,7 +691,7 @@ export class SpecsfyTui {
                 vi: true,
                 mouse: true,
                 scrollable: true,
-                style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+                style: focusablePanelStyle(),
             });
         }
         else {
@@ -666,7 +714,7 @@ export class SpecsfyTui {
                 alwaysScroll: true,
                 tags: false,
                 content: this.#testOutput.join("\n"),
-                style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+                style: focusablePanelStyle(),
             });
         }
         button.focus();
@@ -716,8 +764,10 @@ export class SpecsfyTui {
             height: 1,
             content: `${this.project}/skills-lock.json · ` +
                 `${this.#installed.size} skill(s) Specsfy instalada(s)` +
-                (this.#catalogError ? ` · catálogo indisponível: ${this.#catalogError}` : ""),
-            style: { fg: "gray" },
+                (this.#catalogError
+                    ? ` · catálogo indisponível: ${this.#catalogError}`
+                    : ""),
+            style: { fg: TUI_THEME.textMuted },
         });
         const search = blessed.textbox({
             parent: body,
@@ -731,7 +781,7 @@ export class SpecsfyTui {
             inputOnFocus: false,
             keys: true,
             mouse: true,
-            style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+            style: focusablePanelStyle(),
         });
         search.on("submit", (value) => {
             this.#skillQuery = String(value ?? "");
@@ -787,7 +837,7 @@ export class SpecsfyTui {
             height: 1,
             content: `${this.#selected.size} selecionada(s) · ${visible.length} visível(is) · ` +
                 `${toInstall} para instalar · ${toRemove} para remover`,
-            style: { fg: "white", bold: true },
+            style: { fg: TUI_THEME.text, bold: true },
         });
         const catalog = blessed.box({
             parent: body,
@@ -811,10 +861,13 @@ export class SpecsfyTui {
             vi: true,
             mouse: true,
             style: {
-                selected: { fg: "white", bg: "blue", bold: true },
-                item: { fg: "white" },
-                border: { fg: "gray" },
-                focus: { border: { fg: "yellow" } },
+                ...focusablePanelStyle(),
+                selected: {
+                    fg: TUI_THEME.selectedText,
+                    bg: TUI_THEME.selectedBackground,
+                    bold: true,
+                },
+                item: { fg: TUI_THEME.text, bg: TUI_THEME.background },
             },
         });
         const detail = blessed.box({
@@ -830,7 +883,7 @@ export class SpecsfyTui {
             keys: true,
             vi: true,
             mouse: true,
-            style: { border: { fg: "gray" }, focus: { border: { fg: "yellow" } } },
+            style: focusablePanelStyle(),
         });
         blessed.box({
             parent: catalog,
@@ -839,7 +892,11 @@ export class SpecsfyTui {
             width: "64%",
             height: 1,
             content: " PLANO    SKILL                        CATEGORIA          ESTADO ",
-            style: { fg: "black", bg: "white", bold: true },
+            style: {
+                fg: TUI_THEME.activeText,
+                bg: TUI_THEME.activeBackground,
+                bold: true,
+            },
         });
         const updateDetail = () => {
             const option = visible[selectedIndex(list)];
@@ -929,7 +986,9 @@ export class SpecsfyTui {
             const summary = summarizeSpecs(specs);
             this.showStatus(`${this.project} · ${summary.completed_specs}/${summary.total_specs} specs completas · ` +
                 "atualização automática ativa" +
-                (this.#catalogError ? ` · catálogo indisponível: ${this.#catalogError}` : ""));
+                (this.#catalogError
+                    ? ` · catálogo indisponível: ${this.#catalogError}`
+                    : ""));
             this.showTab(this.#activeTab);
         }
         catch (error) {
@@ -1066,7 +1125,8 @@ export function buildSkillOptions(catalogEntries, installed) {
     const options = FRAMEWORK_SKILLS.map((name) => ({
         name,
         description: BASE_DESCRIPTIONS[name] ?? "Skill do framework Specsfy.",
-        kind: AUXILIARY_SKILLS.includes(name) || name === "specsfy-setup"
+        kind: AUXILIARY_SKILLS.includes(name) ||
+            name === "specsfy-setup"
             ? "auxiliary"
             : DOCUMENTATION_SKILLS.includes(name)
                 ? "documentation"
@@ -1152,9 +1212,7 @@ function friendlySkillName(name) {
     };
     if (baseNames[name])
         return baseNames[name];
-    return titleCase(name
-        .replace(/^specsfy-(?:aux|specialist)-/u, "")
-        .replaceAll("-", " "));
+    return titleCase(name.replace(/^specsfy-(?:aux|specialist)-/u, "").replaceAll("-", " "));
 }
 function isSpecsfySkill(name) {
     return (FRAMEWORK_SKILLS.includes(name) ||
@@ -1200,20 +1258,45 @@ function renderMarkdown(content) {
 }
 function buttonStyle(primary = false) {
     return {
-        fg: "white",
-        bg: primary ? "blue" : "black",
-        border: { fg: primary ? "cyan" : "gray" },
-        focus: { fg: "white", bg: "blue", border: { fg: "cyan" } },
-        hover: { fg: "white", bg: "blue", border: { fg: "cyan" } },
+        fg: primary ? TUI_THEME.primaryText : TUI_THEME.text,
+        bg: primary ? TUI_THEME.primaryBackground : TUI_THEME.surface,
+        border: { fg: primary ? TUI_THEME.focusBackground : TUI_THEME.border },
+        focus: {
+            fg: TUI_THEME.focusText,
+            bg: TUI_THEME.focusBackground,
+            border: { fg: TUI_THEME.focusBackground },
+        },
+        hover: {
+            fg: TUI_THEME.focusText,
+            bg: TUI_THEME.focusBackground,
+            border: { fg: TUI_THEME.focusBackground },
+        },
     };
 }
 function tabStyle(active) {
     return {
-        fg: active ? "black" : "gray",
-        bg: active ? "cyan" : "black",
+        fg: active ? TUI_THEME.activeText : TUI_THEME.textMuted,
+        bg: active ? TUI_THEME.activeBackground : TUI_THEME.background,
         bold: active,
-        focus: { fg: "white", bg: "blue" },
-        hover: { fg: "white", bg: "blue" },
+        focus: { fg: TUI_THEME.focusText, bg: TUI_THEME.focusBackground },
+        hover: { fg: TUI_THEME.focusText, bg: TUI_THEME.focusBackground },
+    };
+}
+/** Mantém borda e foco legíveis em painéis, inputs e regiões roláveis. */
+function focusablePanelStyle() {
+    return {
+        fg: TUI_THEME.text,
+        bg: TUI_THEME.background,
+        border: { fg: TUI_THEME.border },
+        focus: { border: { fg: TUI_THEME.focusBackground } },
+    };
+}
+/** Usa trilho discreto e indicador turquesa na rolagem dos painéis. */
+function terminalScrollbar() {
+    return {
+        ch: " ",
+        track: { bg: TUI_THEME.surfaceRaised },
+        style: { bg: TUI_THEME.focusBackground },
     };
 }
 //# sourceMappingURL=tui.js.map