@the-forge-flow/visual-explainer-pi 0.1.1

package/dist/templates/architecture.js

@@ -0,0 +1,292 @@
+/**
+ * Architecture template - CSS Grid card layout for text-heavy system overviews
+ * Based on nicobailon/visual-explainer architecture.html
+ */
+import { FONT_PAIRINGS, PALETTES, SHARED_CSS, escapeHtml, generateCSSVariables, generateHtmlShell, } from "./shared.js";
+export function generateArchitectureTemplate(title, content, aesthetic, isDark) {
+    const palette = isDark ? PALETTES[aesthetic].dark : PALETTES[aesthetic].light;
+    const fonts = FONT_PAIRINGS[aesthetic];
+    const cssVars = generateCSSVariables(palette, fonts, isDark);
+    const bodyContent = generateBody(title, content, palette);
+    return generateHtmlShell(title, bodyContent, aesthetic, cssVars, getExtraCSS());
+}
+function generateBody(title, content, palette) {
+    let html = `
+<div class="diagram">
+  <h1>${escapeHtml(title)}</h1>
+  <p class="subtitle">Architecture Overview</p>
+`;
+    let index = 0;
+    // Render sections with flow arrows
+    for (const section of content.sections) {
+        const colorClass = section.labelColor ? `section--${section.labelColor}` : "";
+        const depthClass = section.isHero
+            ? "section--hero"
+            : section.isRecessed
+                ? "section--recessed"
+                : "";
+        const dotColor = section.labelColor ? `var(--${section.labelColor})` : "var(--text-dim)";
+        html += `
+  <div class="section ${colorClass} ${depthClass}" style="--i:${index++}">
+    <div class="section-label"><span class="dot" style="background:${dotColor}"></span> ${escapeHtml(section.label)}</div>
+    ${section.content}
+  </div>
+`;
+        // Add flow arrow if specified
+        const arrow = content.flowArrows?.[index - 1];
+        if (arrow) {
+            html += `
+  <div class="flow-arrow" style="--i:${index++}">
+    <svg viewBox="0 0 20 20"><path d="M10 4 L10 16 M6 12 L10 16 L14 12"/></svg>
+    ${escapeHtml(arrow.label)}
+  </div>
+`;
+        }
+    }
+    // Three column row if specified
+    if (content.threeColumn && content.threeColumn.length > 0) {
+        html += `  <div class="three-col">\n`;
+        for (const col of content.threeColumn) {
+            const colorClass = col.labelColor ? `section--${col.labelColor}` : "";
+            const dotColor = col.labelColor ? `var(--${col.labelColor})` : "var(--text-dim)";
+            html += `
+    <div class="section ${colorClass}" style="--i:${index++}">
+      <div class="section-label"><span class="dot" style="background:${dotColor}"></span> ${escapeHtml(col.label)}</div>
+      ${col.content}
+    </div>
+`;
+        }
+        html += "  </div>\n";
+    }
+    html += "</div>";
+    return html;
+}
+function getExtraCSS() {
+    return `
+${SHARED_CSS}
+
+body {
+  background: var(--bg);
+  background-image:
+    radial-gradient(ellipse at 20% 0%, var(--accent-dim) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 100%, var(--green-dim) 0%, transparent 40%);
+  color: var(--text);
+  font-family: var(--font-body);
+  padding: 40px;
+}
+
+h1 {
+  font-size: 38px;
+  font-weight: 700;
+  letter-spacing: -1px;
+  margin-bottom: 6px;
+  text-wrap: balance;
+}
+
+.subtitle {
+  color: var(--text-dim);
+  font-size: 14px;
+  margin-bottom: 40px;
+  font-family: var(--font-mono);
+}
+
+.diagram {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+/* Color variants */
+.section--accent { border-color: var(--accent-dim); }
+.section--accent .section-label { color: var(--accent); }
+.section--accent .section-label .dot { background: var(--accent) !important; }
+
+.section--green { border-color: var(--green-dim); }
+.section--green .section-label { color: var(--green); }
+.section--green .section-label .dot { background: var(--green) !important; }
+
+.section--orange { border-color: var(--orange-dim); }
+.section--orange .section-label { color: var(--orange); }
+.section--orange .section-label .dot { background: var(--orange) !important; }
+
+.section--teal { border-color: var(--teal-dim); }
+.section--teal .section-label { color: var(--teal); }
+.section--teal .section-label .dot { background: var(--teal) !important; }
+
+.section--plum { border-color: var(--plum-dim); }
+.section--plum .section-label { color: var(--plum); }
+.section--plum .section-label .dot { background: var(--plum) !important; }
+
+/* Inner grid for sub-cards */
+.inner-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.inner-card {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.inner-card .title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.inner-card .desc {
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* Three column layout */
+.three-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+}
+
+/* Node lists */
+.node-list {
+  list-style: none;
+  font-size: 12px;
+  line-height: 1.8;
+}
+
+.node-list li {
+  padding-left: 14px;
+  position: relative;
+}
+
+.node-list li::before {
+  content: '›';
+  color: var(--text-dim);
+  font-weight: 600;
+  position: absolute;
+  left: 0;
+}
+
+/* Pipeline */
+.pipeline {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.pipeline-step {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  min-width: 120px;
+  flex-shrink: 0;
+  text-align: center;
+}
+
+.pipeline-step .step-num {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.pipeline-step .step-name {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 3px;
+}
+
+.pipeline-step .step-detail {
+  font-size: 10px;
+  color: var(--text-dim);
+  line-height: 1.4;
+}
+
+.pipeline-arrow {
+  display: flex;
+  align-items: center;
+  padding: 0 2px;
+  color: var(--border-bright);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+/* Legend */
+.legend {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.legend-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+
+/* Sources */
+.sources {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.source {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 18px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: border-color 0.2s;
+}
+
+.source:hover { border-color: var(--border-bright); }
+
+/* Callout */
+.callout {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 8px 8px 0;
+  padding: 14px 18px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+
+.callout strong { color: var(--text); font-weight: 600; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  body { padding: 20px; }
+  .inner-grid { grid-template-columns: 1fr; }
+  .three-col { grid-template-columns: 1fr; }
+  .pipeline { flex-wrap: wrap; gap: 6px; }
+  .pipeline-arrow { display: none; }
+}
+`;
+}

package/dist/templates/data-table.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Data table template for structured data display
+ * Based on nicobailon/visual-explainer data-table.html
+ */
+import type { Aesthetic } from "../types.js";
+export interface TableColumn {
+    key: string;
+    header: string;
+    width?: string;
+    align?: "left" | "center" | "right";
+}
+export interface TableRow {
+    [key: string]: string | {
+        value: string;
+        status?: "success" | "warning" | "error" | "neutral";
+    };
+}
+export interface TableContent {
+    columns: TableColumn[];
+    rows: TableRow[];
+    caption?: string;
+    stickyHeader?: boolean;
+}
+export declare function generateTableTemplate(title: string, content: TableContent, aesthetic: Aesthetic, isDark: boolean): string;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/templates/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/templates/data-table.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAS7C,MAAM,WAAW,WAAW;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,QAAQ;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;KAAE,CAAC;CAChG;AAED,MAAM,WAAW,YAAY;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,OAAO,GACb,MAAM,CAQR"}

package/dist/templates/data-table.js

@@ -0,0 +1,255 @@
+/**
+ * Data table template for structured data display
+ * Based on nicobailon/visual-explainer data-table.html
+ */
+import { FONT_PAIRINGS, PALETTES, escapeHtml, generateCSSVariables, generateHtmlShell, } from "./shared.js";
+export function generateTableTemplate(title, content, aesthetic, isDark) {
+    const palette = isDark ? PALETTES[aesthetic].dark : PALETTES[aesthetic].light;
+    const fonts = FONT_PAIRINGS[aesthetic];
+    const cssVars = generateCSSVariables(palette, fonts, isDark);
+    const bodyContent = generateBody(title, content);
+    return generateHtmlShell(title, bodyContent, aesthetic, cssVars, getExtraCSS());
+}
+function generateBody(title, content) {
+    const colgroup = content.columns
+        .map((col) => `<col${col.width ? ` style="width:${col.width}"` : ""}>`)
+        .join("");
+    const thead = content.columns
+        .map((col) => {
+        const align = col.align ? ` align="${col.align}"` : "";
+        return `<th${align}>${escapeHtml(col.header)}</th>`;
+    })
+        .join("");
+    const tbody = content.rows
+        .map((row, i) => {
+        const cells = content.columns
+            .map((col) => {
+            const cellData = row[col.key];
+            let value;
+            let statusClass = "";
+            if (typeof cellData === "object" && cellData !== null) {
+                value = cellData.value;
+                if (cellData.status) {
+                    statusClass = ` status-${cellData.status}`;
+                }
+            }
+            else {
+                value = String(cellData ?? "");
+            }
+            const align = col.align ? ` align="${col.align}"` : "";
+            return `<td class="cell${statusClass}"${align}>${formatCellValue(value)}</td>`;
+        })
+            .join("");
+        return `<tr style="--i:${i}">${cells}</tr>`;
+    })
+        .join("");
+    const captionHtml = content.caption
+        ? `<p class="caption">${escapeHtml(content.caption)}</p>`
+        : "";
+    return `
+<div class="container">
+  <h1>${escapeHtml(title)}</h1>
+  <div class="table-wrap" style="--i:0">
+    <table${content.stickyHeader ? ' class="sticky-header"' : ""}>
+      <colgroup>${colgroup}</colgroup>
+      <thead>
+        <tr>${thead}</tr>
+      </thead>
+      <tbody>
+        ${tbody}
+      </tbody>
+    </table>
+  </div>
+  ${captionHtml}
+</div>
+`;
+}
+function formatCellValue(value) {
+    // Check if value contains code-like content (backticks)
+    if (value.includes("`")) {
+        return value.replace(/`([^`]+)`/g, "<code>$1</code>");
+    }
+    return escapeHtml(value);
+}
+function getExtraCSS() {
+    return `
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  padding: 40px;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  margin-bottom: 24px;
+  text-wrap: balance;
+}
+
+.caption {
+  color: var(--text-dim);
+  font-size: 14px;
+  margin-top: 16px;
+  text-align: center;
+}
+
+.table-wrap {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow-x: auto;
+  animation: fadeUp 0.4s ease-out both;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+/* Header */
+thead {
+  background: var(--surface2);
+}
+
+th {
+  padding: 14px 16px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+th[align="center"] { text-align: center; }
+th[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* Body */
+tbody tr {
+  animation: fadeUp 0.4s ease-out both;
+  animation-delay: calc(var(--i, 0) * 0.04s);
+}
+
+tbody tr:nth-child(even) {
+  background: var(--surface2);
+}
+
+tbody tr:hover {
+  background: var(--surface-elevated);
+}
+
+td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+td[align="center"] { text-align: center; }
+td[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* Cell content */
+.cell {
+  line-height: 1.5;
+}
+
+.cell code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  background: var(--accent-dim);
+  color: var(--accent);
+  padding: 2px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+/* Status indicators */
+.status-success {
+  color: var(--green);
+  font-weight: 500;
+}
+
+.status-success::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--green);
+  margin-right: 6px;
+}
+
+.status-warning {
+  color: var(--orange);
+  font-weight: 500;
+}
+
+.status-warning::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--orange);
+  margin-right: 6px;
+}
+
+.status-error {
+  color: var(--plum);
+  font-weight: 500;
+}
+
+.status-error::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--plum);
+  margin-right: 6px;
+}
+
+.status-neutral {
+  color: var(--text-dim);
+}
+
+/* Sticky header */
+table.sticky-header thead {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+/* Animation */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  body { padding: 20px; }
+  h1 { font-size: 24px; }
+  th, td { padding: 10px 12px; font-size: 13px; }
+}
+`;
+}

package/dist/templates/mermaid.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Mermaid template for flowcharts, sequence diagrams, ER diagrams, etc.
+ * Based on nicobailon/visual-explainer mermaid-flowchart.html
+ */
+import type { Aesthetic } from "../types.js";
+export interface MermaidContent {
+    mermaidSyntax: string;
+    caption?: string;
+}
+export declare function generateMermaidTemplate(title: string, content: MermaidContent, aesthetic: Aesthetic, isDark: boolean): string;
+//# sourceMappingURL=mermaid.d.ts.map

package/dist/templates/mermaid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid.d.ts","sourceRoot":"","sources":["../../src/templates/mermaid.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAW7C,MAAM,WAAW,cAAc;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,uBAAuB,CACtC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,OAAO,GACb,MAAM,CAgBR"}