@esneiderbravo/speclaw 2.0.5 → 2.0.6

package/README.md

@@ -4,12 +4,12 @@
 
 <br/>
 
-<a href="https://www.npmjs.com/package/@esneiderbravo/speclaw"><img src="https://img.shields.io/npm/v/@esneiderbravo/speclaw?color=0E8E8E&labelColor=0B0F10&style=flat-square&label=npm" alt="npm"></a>
-&nbsp;<a href="https://github.com/esneiderbravo/speclaw/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/esneiderbravo/speclaw/ci.yml?branch=main&label=CI&labelColor=0B0F10&style=flat-square&color=0E8E8E" alt="CI"></a>
-&nbsp;<a href="https://www.npmjs.com/package/@esneiderbravo/speclaw?activeTab=versions"><img src="https://img.shields.io/badge/provenance-SLSA-0E8E8E?labelColor=0B0F10&style=flat-square" alt="npm provenance"></a>
-&nbsp;<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-0E8E8E?labelColor=0B0F10&style=flat-square" alt="MIT"></a>
-&nbsp;<img src="https://img.shields.io/badge/node-%E2%89%A522.16-0E8E8E?labelColor=0B0F10&style=flat-square" alt="Node >= 22.16">
-&nbsp;<img src="https://img.shields.io/badge/v2.0-0E8E8E?labelColor=0B0F10&style=flat-square" alt="v2.0">
+<a href="https://www.npmjs.com/package/@esneiderbravo/speclaw"><img src="https://img.shields.io/npm/v/@esneiderbravo/speclaw?color=00707f&labelColor=131313&style=flat-square&label=npm" alt="npm"></a>
+&nbsp;<a href="https://github.com/esneiderbravo/speclaw/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/esneiderbravo/speclaw/ci.yml?branch=main&label=CI&labelColor=131313&style=flat-square&color=00707f" alt="CI"></a>
+&nbsp;<a href="https://www.npmjs.com/package/@esneiderbravo/speclaw?activeTab=versions"><img src="https://img.shields.io/badge/provenance-SLSA-00707f?labelColor=131313&style=flat-square" alt="npm provenance"></a>
+&nbsp;<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-00707f?labelColor=131313&style=flat-square" alt="MIT"></a>
+&nbsp;<img src="https://img.shields.io/badge/node-%E2%89%A522.16-00707f?labelColor=131313&style=flat-square" alt="Node >= 22.16">
+&nbsp;<img src="https://img.shields.io/badge/v2.0-00707f?labelColor=131313&style=flat-square" alt="v2.0">
 
 <br/><br/>
 
@@ -24,12 +24,12 @@ those laws hold in the editor, in CI, and in the PR.
 One command. No cloud, no LLM, no API keys — <b>everything runs on your machine.</b>
 </p>
 
-<img src="https://img.shields.io/badge/100%25_local-0E8E8E?labelColor=0B0F10&style=flat-square" alt="100% local">
-&nbsp;<img src="https://img.shields.io/badge/no_LLM_·_no_cloud-0E8E8E?labelColor=0B0F10&style=flat-square" alt="no LLM">
-&nbsp;<img src="https://img.shields.io/badge/CLI_+_MCP-0E8E8E?labelColor=0B0F10&style=flat-square" alt="CLI + MCP">
-&nbsp;<img src="https://img.shields.io/badge/9_canonical_tools-0E8E8E?labelColor=0B0F10&style=flat-square" alt="9 tools">
-&nbsp;<img src="https://img.shields.io/badge/Cortex-One_brain._Many_agents.-0E8E8E?labelColor=0B0F10&style=flat-square" alt="Cortex">
-&nbsp;<img src="https://img.shields.io/badge/any_agent-0E8E8E?labelColor=0B0F10&style=flat-square" alt="any agent">
+<img src="https://img.shields.io/badge/100%25_local-00707f?labelColor=131313&style=flat-square" alt="100% local">
+&nbsp;<img src="https://img.shields.io/badge/no_LLM_·_no_cloud-00707f?labelColor=131313&style=flat-square" alt="no LLM">
+&nbsp;<img src="https://img.shields.io/badge/CLI_+_MCP-00707f?labelColor=131313&style=flat-square" alt="CLI + MCP">
+&nbsp;<img src="https://img.shields.io/badge/9_canonical_tools-00707f?labelColor=131313&style=flat-square" alt="9 tools">
+&nbsp;<img src="https://img.shields.io/badge/Cortex-One_brain._Many_agents.-00707f?labelColor=131313&style=flat-square" alt="Cortex">
+&nbsp;<img src="https://img.shields.io/badge/any_agent-00707f?labelColor=131313&style=flat-square" alt="any agent">
 
 </div>
 
@@ -107,7 +107,7 @@ gh attestation verify <tarball> --owner esneiderbravo
   <img src="https://raw.githubusercontent.com/esneiderbravo/speclaw/main/brand/terminal-init.png" width="800" alt="speclaw init — terminal output">
 </p>
 
-<p align="center"><i>Teal steps, green checks, a live progress bar — themed with the speclaw palette.</i></p>
+<p align="center"><i>Cyan steps, green checks, a live progress bar — themed with the speclaw palette.</i></p>
 
 <br/>
 

package/dist/cli/lib/ui.js

@@ -1,17 +1,21 @@
-// Brand-themed terminal UI. Colors come from the speclaw palette (cyan #2EE6E6
-// = the "law", cream text, muted gray, green/amber for status) rendered as
-// 24-bit truecolor ANSI — no dependency needed. Colors auto-disable when the
-// output is not a TTY or NO_COLOR is set.
+// Brand-themed terminal UI. Colors come from the speclaw site's ink theme
+// (`app/tokens.css` in speclaw-site): signal cyan #00E3FD = the "law" accent,
+// ink #F4F4F3 primary text, ink-faint #999EA3 secondary text, deny #FF5C47 for
+// errors, and green/amber re-tuned for success/warning. Every color holds at
+// least 4.5:1 (WCAG 2.x) against the ink paper #131313. They render as 24-bit
+// truecolor ANSI — no dependency needed — and auto-disable when the output is
+// not a TTY or NO_COLOR is set.
 import { pkgVersion } from "../../shared/version.js";
-const PALETTE = {
-    cyan: [46, 230, 230], // #2EE6E6 — the accent / "law"
-    cyanDim: [23, 193, 193], // #17C1C1
-    cream: [244, 241, 234], // #F4F1EA — primary text
-    muted: [110, 123, 128], // #6E7B80 — secondary text
-    green: [63, 185, 80], // #3FB950 — success
-    amber: [227, 179, 65], // #E3B341 — warning
-    red: [235, 90, 90],
-};
+// Covers: req~brand-terminal-palette~1
+export const PALETTE = Object.freeze({
+    cyan: [0, 227, 253], // #00E3FD — signal: the accent / "law"
+    cyanDim: [0, 227, 253], // #00E3FD — signal (the site has no mid cyan for text)
+    cream: [244, 244, 243], // #F4F4F3 — ink: primary text
+    muted: [153, 158, 163], // #999EA3 — ink-faint: secondary text
+    green: [62, 207, 122], // #3ECF7A — success (re-tuned)
+    amber: [245, 183, 61], // #F5B73D — warning (re-tuned)
+    red: [255, 92, 71], // #FF5C47 — deny: errors
+});
 const colorOn = (Boolean(process.stdout.isTTY) || process.env.FORCE_COLOR === "1") && !process.env.NO_COLOR;
 // Whether the terminal reliably renders the unicode box/block glyphs the brand
 // output uses. Non-Windows terminals are assumed capable; a Windows console is

package/dist/modules/compass/visualize.js

@@ -88,11 +88,14 @@ export function visualize(projectPath, opts = {}) {
 /**
  * Render the graph as a self-contained, offline HTML page: the data is embedded
  * as JSON and drawn by an inline canvas force-directed renderer (no CDN, no
- * dependencies).
+ * dependencies). Colors are the site's ink tokens (`app/tokens.css` in
+ * speclaw-site): paper #131313, sheet #1f2022, rule #303236, ink #f4f4f3,
+ * ink-faint #999ea3, signal #00e3fd. No retired-palette color may return here.
  *
  * @param data - The nodes/links/totals to embed.
  * @returns A complete HTML document as a string.
  */
+// Covers: req~brand-viewer-palette~1
 export function renderHtml(data) {
     const payload = JSON.stringify(data);
     return `<!doctype html>
@@ -100,20 +103,20 @@ export function renderHtml(data) {
 <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
 <title>speclaw · Compass graph</title>
 <style>
-  :root { --cy:#17C1C1; --cr:#F4F1EA; --mu:#6E7B80; --bg:#0B0F10; }
+  :root { --cy:#00e3fd; --cr:#f4f4f3; --mu:#999ea3; --bg:#131313; --sh:#1f2022; --ru:#303236; }
   * { box-sizing:border-box; }
   html,body { margin:0; height:100%; background:var(--bg); color:var(--cr);
-    font-family:'SF Mono','JetBrains Mono',Menlo,Consolas,monospace; overflow:hidden; }
+    font-family:'Chivo Mono','SFMono-Regular',Menlo,monospace; overflow:hidden; }
   canvas { display:block; cursor:grab; }
   canvas:active { cursor:grabbing; }
   .panel { position:fixed; top:16px; left:16px; padding:12px 14px; border-radius:10px;
-    background:rgba(12,17,19,.82); border:1px solid #232A2D; font-size:12px; line-height:1.5; }
+    background:rgba(31,32,34,.82); border:1px solid var(--ru); font-size:12px; line-height:1.5; }
   .panel b { color:var(--cr); } .panel .sub { color:var(--mu); }
   .legend { position:fixed; bottom:16px; left:16px; font-size:11px; color:var(--mu);
-    background:rgba(12,17,19,.82); border:1px solid #232A2D; border-radius:10px; padding:10px 12px; }
+    background:rgba(31,32,34,.82); border:1px solid var(--ru); border-radius:10px; padding:10px 12px; }
   .legend span { display:inline-flex; align-items:center; margin-right:12px; }
   .legend i { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; }
-  .tip { position:fixed; padding:6px 9px; border-radius:7px; background:#0E1517; border:1px solid #17C1C1;
+  .tip { position:fixed; padding:6px 9px; border-radius:7px; background:var(--sh); border:1px solid var(--cy);
     color:var(--cr); font-size:12px; pointer-events:none; opacity:0; transition:opacity .1s; white-space:nowrap; }
   .brand { color:var(--cy); font-weight:700; }
 </style></head><body>
@@ -127,9 +130,9 @@ export function renderHtml(data) {
 <div class="tip" id="tip"></div>
 <script>
 const DATA = ${payload};
-const KIND_COLORS = { function:'#17C1C1', method:'#3FB950', class:'#E3B341',
-  interface:'#8B989E', type:'#8B989E', enum:'#8B989E' };
-const colorOf = k => KIND_COLORS[k] || '#6E7B80';
+const KIND_COLORS = { function:'#00e3fd', method:'#3ecf7a', class:'#f5b73d',
+  interface:'#babdc1', type:'#babdc1', enum:'#babdc1' };
+const colorOf = k => KIND_COLORS[k] || '#7c8083';
 
 const cv = document.getElementById('c'), ctx = cv.getContext('2d');
 const tip = document.getElementById('tip');
@@ -179,7 +182,7 @@ function draw(){
   ctx.lineWidth = 1;
   for(const l of L){ const a=toScreen(N[l.s]), b=toScreen(N[l.t]);
     const on = hover>=0 && (l.s===hover||l.t===hover);
-    ctx.strokeStyle = on ? 'rgba(23,193,193,.7)' : 'rgba(110,123,128,.16)';
+    ctx.strokeStyle = on ? 'rgba(0,227,253,.7)' : 'rgba(124,128,131,.16)';
     ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
   }
   for(let i=0;i<N.length;i++){ const n=N[i], p=toScreen(n);
@@ -187,7 +190,7 @@ function draw(){
     ctx.globalAlpha = dim ? 0.28 : 1;
     ctx.beginPath(); ctx.arc(p.x,p.y,n.r*Math.sqrt(scale),0,7); ctx.fillStyle=colorOf(n.kind); ctx.fill();
     if((n.r>7 || i===hover || (hoverSet&&hoverSet.has(i))) && scale>0.5){
-      ctx.globalAlpha = dim?0.4:0.9; ctx.fillStyle='#F4F1EA'; ctx.font='11px monospace';
+      ctx.globalAlpha = dim?0.4:0.9; ctx.fillStyle='#f4f4f3'; ctx.font="11px 'Chivo Mono','SFMono-Regular',Menlo,monospace";
       ctx.fillText(n.name, p.x+n.r+3, p.y+3);
     }
   }
@@ -208,7 +211,7 @@ addEventListener('mousemove', e=>{
   lastX=e.clientX; lastY=e.clientY;
   const i=pick(e.clientX,e.clientY); hover=i;
   if(i>=0){ const n=N[i]; tip.style.opacity=1; tip.style.left=(e.clientX+12)+'px'; tip.style.top=(e.clientY+12)+'px';
-    tip.innerHTML='<b>'+n.name+'</b> <span style="color:#6E7B80">'+n.kind+' · '+n.file+':'+n.line+'</span>'; }
+    tip.innerHTML='<b>'+n.name+'</b> <span style="color:#999ea3">'+n.kind+' · '+n.file+':'+n.line+'</span>'; }
   else tip.style.opacity=0;
 });
 addEventListener('mouseup', ()=>{ dragging=null; panning=false; });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esneiderbravo/speclaw",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "publishConfig": {
     "access": "public"
   },
@@ -59,6 +59,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@fontsource/chivo": "^5.3.0",
+    "@fontsource/chivo-mono": "^5.3.0",
     "@resvg/resvg-js": "^2.6.2",
     "@types/node": "^22.0.0",
     "eslint": "^10.8.0",
@@ -67,6 +69,7 @@
     "globals": "^17.9.0",
     "prettier": "^3.9.6",
     "typescript": "^5.6.0",
-    "typescript-eslint": "^8.65.0"
+    "typescript-eslint": "^8.65.0",
+    "wawoff2": "^2.0.1"
   }
 }