@stelnyx/report-theme
v0.1.4
Published
Unified theme + template helpers for Stelnyx CLI reports (LuxScope, LuxFaber, SecGate).
Downloads
463
Readme
@stelnyx/report-theme
Shared CSS theme + HTML template helpers for Stelnyx CLI reports.
Used by LuxScope, LuxFaber, and SecGate so every report — codebase intel, agent readiness, security gate — renders in the same shell, with the same palette, sidebar, score hero, KPI grid, and findings table.
One source of truth for the report look. Change a color here, every product picks it up on next build.
What's in the box
| Export | Purpose |
|---|---|
| css | The full theme CSS, inlined into a string. Drop into a <style> tag (shell() does it for you). |
| shell({...}) | Full HTML document: sidebar with product/target/score/nav, main content slot, footer. The skeleton every Stelnyx report wears. |
| scoreHero({...}) | Big circular gauge + score label + optional description. The top-of-report hero block. |
| kpiGrid([...]) | Compact label / value grid with tone variants (crit / high / med / low / neutral). |
| bars([...]) | Horizontal score bars per category — name · score · fill · weight. |
| scannerList([...]) | Per-scanner status rows (SecGate uses this for Semgrep / Gitleaks / etc). |
| findingsTable({columns, rows}) | Sortable-looking table for issue lists with severity pills. |
| docGrid([...]) | Card grid for handoff docs / artifacts (Ready / Missing). |
All helpers return raw HTML strings. No DOM, no framework, no client JS (unless you pass bodyJs). Output is a self-contained static file.
Install
npm i @stelnyx/report-theme
# or, as a workspace dep:
pnpm add @stelnyx/report-themeNode 20+. ESM only.
Usage
import { shell, scoreHero, bars, findingsTable } from "@stelnyx/report-theme";
const html = shell({
brand: "Stelnyx",
product: "LuxFaber",
target: "https://example.com",
targetHref: "https://example.com",
tier: { label: "RECON", tone: "neutral" },
score: {
num: 73,
denom: "/ 100",
badge: { label: "GOOD", tone: "good" },
},
reportType: "Agent-readiness report",
reportTypeFooter: "LuxFaber",
reportVersion: "v1",
generatedAt: "2026-05-19",
nav: [
{ id: "summary", label: "Summary", active: true },
{ id: "findings", label: "Findings", count: 12 },
{ id: "categories", label: "Categories" },
],
bodyHtml: `
<section id="summary">
${scoreHero({
label: "Overall",
num: 73,
sub: "rule v1 · static",
fillPct: 73,
fillColor: "warn",
desc: "Site is crawlable but missing structured data signals.",
})}
${bars([
{ name: "Crawl", score: "84", pct: 84, weight: "25%" },
{ name: "Structured", score: "61", pct: 61, weight: "22%", tone: "warn" },
{ name: "Semantic", score: "92", pct: 92, weight: "18%" },
])}
</section>
<section id="findings">
${findingsTable({
columns: ["Rule", "Evidence", "Fix"],
rows: [
{ severity: { label: "MED", tone: "med" }, cells: ["crawl.llms-txt.present", "Not found at /llms.txt", "Publish /llms.txt"] },
],
})}
</section>
`,
});The returned html is a complete <!doctype html> document. Write it to disk, serve it, or pipe it through Playwright to render a PDF.
Brand-overridable surface
shell() accepts these per-report knobs without touching the theme:
| Option | Notes |
|---|---|
| logoUrl | Embedded above the product name in the sidebar (clients' logos for enterprise reports). |
| clientLabel | Prepared for <strong>{label}</strong> line. |
| reportPill | The colored pill at the top of the sidebar (e.g. STELNYX REPORT). |
| favicon | Override the default Stelnyx S favicon. |
| extraCss | Per-report CSS appended after the theme. Brand color overrides go here. |
| bodyJs | Optional inline <script> (scroll-spy, copy-to-clipboard, etc). |
| skipInterFont | Set when you're embedding fonts yourself (offline / locked-down clients). |
The base theme stays Stelnyx (charcoal + pink accent). For tenant-branded reports, pass a brand color via extraCss:
extraCss: `:root { --pink: ${brandHex}; --color-pink: ${brandHex}; }`,How the CSS gets in
The build is a tiny script (scripts/build.mjs). It reads src/theme.css, escapes it, inlines it into the css export in src/index.ts, and writes dist/index.js. No bundler, no TS compiler — src/index.ts ships its types from dist/index.d.ts (hand-written).
npm run buildResulting dist/ is what npm publishes. The raw CSS is also exported under @stelnyx/report-theme/theme.css for consumers that want to extend it directly:
@import "@stelnyx/report-theme/theme.css";
.my-extra-section { color: var(--pink); }CSS variable surface
Anything you'd want to override lives in :root at the top of src/theme.css. The full list:
--bg, --surface, --surface-2, --border, --border-bright,
--text, --muted, --faint,
--success, --warn, --error, --med-sev, --accent, --pink,
--sidebar-w, --content-max, --max-w, --radius,
--font, --mono,
--header-bg, --score-glowThe --color-* aliases mirror the LuxFaber convention so consumers using either prefix work without code change.
Consumers
- LuxScope — codebase intelligence reports (architecture, risk, dependencies).
- LuxFaber — agent-readiness reports (crawl, structured data, semantic HTML, content clarity, determinism).
- SecGate — security gate reports (Semgrep + Gitleaks + osv-scanner + Trivy + npm audit).
Each project shares the same shell, gauge, bars, and findings table — so a team that's read one report can read all three.
Versioning
Pinned major across all three consumers. Breaking the visual layout = major bump. Adding helpers or CSS variables = minor. Bug fixes = patch.
The theme is the brand surface for every CLI we ship. Treat it accordingly.