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

package/dist/templates/mermaid.js

@@ -0,0 +1,149 @@
+/**
+ * Mermaid template for flowcharts, sequence diagrams, ER diagrams, etc.
+ * Based on nicobailon/visual-explainer mermaid-flowchart.html
+ */
+import { FONT_PAIRINGS, MERMAID_SHELL_CSS, MERMAID_SHELL_JS, PALETTES, escapeHtml, generateCSSVariables, generateHtmlShell, } from "./shared.js";
+export function generateMermaidTemplate(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 mermaidTheme = generateMermaidThemeVariables(palette);
+    const bodyContent = generateBody(title, content);
+    return generateHtmlShell(title, bodyContent, aesthetic, cssVars, `${MERMAID_SHELL_CSS}${getExtraCSS()}`, getMermaidScript(mermaidTheme, content.mermaidSyntax));
+}
+function generateMermaidThemeVariables(palette) {
+    // Convert palette to Mermaid themeVariables format
+    return `
+    theme: 'base',
+    themeVariables: {
+      primaryColor: '${palette.surface}',
+      primaryTextColor: '${palette.text}',
+      primaryBorderColor: '${palette.accent}',
+      lineColor: '${palette.textDim}',
+      secondaryColor: '${palette.surface2}',
+      tertiaryColor: '${palette.surfaceElevated}',
+      fontFamily: 'var(--font-mono)',
+      fontSize: '14px'
+    },
+    flowchart: {
+      useMaxWidth: true,
+      htmlLabels: true,
+      curve: 'basis'
+    },
+    sequence: {
+      useMaxWidth: true,
+      diagramMarginX: 50,
+      diagramMarginY: 10
+    }
+  `;
+}
+function generateBody(title, content) {
+    const captionHtml = content.caption
+        ? `<p class="caption">${escapeHtml(content.caption)}</p>`
+        : "";
+    return `
+<div class="container">
+  <h1>${escapeHtml(title)}</h1>
+  <div class="diagram-shell" style="--i:0">
+    <div class="mermaid-wrap">
+      <div class="zoom-controls">
+        <button class="zoom-btn" data-zoom="in" title="Zoom in">+</button>
+        <button class="zoom-btn" data-zoom="out" title="Zoom out">−</button>
+        <button class="zoom-btn" data-zoom="reset" title="Reset">⟲</button>
+        <button class="zoom-btn" data-zoom="expand" title="Open in new tab">⛶</button>
+      </div>
+      <div class="mermaid-viewport">
+        <div class="mermaid-canvas">
+          <pre class="mermaid">${content.mermaidSyntax}</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+  ${captionHtml}
+</div>
+`;
+}
+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;
+}
+
+/* Mermaid overrides for theming */
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon {
+  fill: var(--surface) !important;
+  stroke: var(--accent) !important;
+  stroke-width: 2px !important;
+}
+
+.mermaid .node .label {
+  color: var(--text) !important;
+  font-family: var(--font-mono) !important;
+}
+
+.mermaid .edgePath .path {
+  stroke: var(--text-dim) !important;
+  stroke-width: 2px !important;
+}
+
+.mermaid .edgeLabel {
+  background: var(--surface) !important;
+  color: var(--text) !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  body { padding: 20px; }
+  h1 { font-size: 24px; }
+}
+`;
+}
+function getMermaidScript(themeConfig, mermaidSyntax) {
+    return `
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  
+  mermaid.initialize({
+    startOnLoad: true,
+    securityLevel: 'loose',
+    ${themeConfig}
+  });
+
+  ${MERMAID_SHELL_JS}
+
+  // Initialize controls after Mermaid renders
+  setTimeout(() => {
+    document.querySelectorAll('.mermaid-wrap').forEach(wrap => {
+      initMermaidControls(wrap);
+    });
+  }, 500);
+</script>
+`;
+}

package/dist/templates/shared.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared CSS variables, animations, and utilities for all templates
+ * Based on nicobailon/visual-explainer design system
+ */
+import type { Aesthetic, FontPairing, Palette } from "../types.js";
+export declare const FONT_PAIRINGS: Record<Aesthetic, FontPairing>;
+export declare const PALETTES: Record<Aesthetic, {
+    light: Palette;
+    dark: Palette;
+}>;
+export declare const SHARED_CSS = "\n/* Reset */\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\n/* Animation keyframes */\n@keyframes fadeUp {\n  from { opacity: 0; transform: translateY(12px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes fadeScale {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-delay: 0ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Base styles */\nbody {\n  min-height: 100vh;\n  line-height: 1.6;\n}\n\n/* Section card base */\n.section {\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  padding: 20px 24px;\n  animation: fadeUp 0.4s ease-out both;\n  animation-delay: calc(var(--i, 0) * 0.06s);\n}\n\n.section--hero {\n  background: var(--surface-elevated);\n  border-color: color-mix(in srgb, var(--border) 50%, var(--accent) 50%);\n  box-shadow: 0 4px 20px rgba(0,0,0,0.06);\n  padding: 28px 32px;\n}\n\n.section--recessed {\n  background: var(--surface2);\n  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);\n}\n\n/* Section labels with dot indicators */\n.section-label {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-label .dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n/* Flow arrows */\n.flow-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  color: var(--text-dim);\n  font-family: var(--font-mono);\n  font-size: 12px;\n  padding: 4px 0;\n  animation: fadeUp 0.4s ease-out both;\n  animation-delay: calc(var(--i, 0) * 0.06s);\n}\n\n.flow-arrow svg {\n  width: 20px;\n  height: 20px;\n  fill: none;\n  stroke: var(--border-bright);\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n/* Code styling */\ncode {\n  font-family: var(--font-mono);\n  font-size: 0.9em;\n  background: var(--accent-dim);\n  color: var(--accent);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  body { padding: 20px; }\n  .section { padding: 16px 20px; }\n  .section--hero { padding: 20px 24px; }\n}\n";
+export declare const MERMAID_SHELL_CSS = "\n.diagram-shell {\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.mermaid-wrap {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mermaid-viewport {\n  overflow: hidden;\n  cursor: grab;\n}\n\n.mermaid-viewport:active {\n  cursor: grabbing;\n}\n\n.mermaid-canvas {\n  transform-origin: center center;\n  transition: transform 0.1s ease-out;\n}\n\n.zoom-controls {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 6px;\n  z-index: 10;\n}\n\n.zoom-btn {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--text);\n  font-size: 16px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n\n.zoom-btn:hover {\n  background: var(--surface2);\n  border-color: var(--border-bright);\n}\n";
+export declare const MERMAID_SHELL_JS = "\nfunction initMermaidControls(wrap) {\n  const viewport = wrap.querySelector('.mermaid-viewport');\n  const canvas = wrap.querySelector('.mermaid-canvas');\n  let scale = 1;\n  let isDragging = false;\n  let startX, startY, translateX = 0, translateY = 0;\n\n  function updateTransform() {\n    canvas.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;\n  }\n\n  wrap.querySelector('[data-zoom=\"in\"]').onclick = () => { scale *= 1.2; updateTransform(); };\n  wrap.querySelector('[data-zoom=\"out\"]').onclick = () => { scale /= 1.2; updateTransform(); };\n  wrap.querySelector('[data-zoom=\"reset\"]').onclick = () => { scale = 1; translateX = 0; translateY = 0; updateTransform(); };\n  wrap.querySelector('[data-zoom=\"expand\"]').onclick = () => openMermaidInNewTab(wrap);\n\n  viewport.addEventListener('mousedown', (e) => {\n    isDragging = true;\n    startX = e.clientX - translateX;\n    startY = e.clientY - translateY;\n    viewport.style.cursor = 'grabbing';\n  });\n\n  window.addEventListener('mousemove', (e) => {\n    if (!isDragging) return;\n    translateX = e.clientX - startX;\n    translateY = e.clientY - startY;\n    updateTransform();\n  });\n\n  window.addEventListener('mouseup', () => {\n    isDragging = false;\n    viewport.style.cursor = 'grab';\n  });\n\n  viewport.addEventListener('wheel', (e) => {\n    if (e.ctrlKey || e.metaKey) {\n      e.preventDefault();\n      scale *= e.deltaY > 0 ? 0.9 : 1.1;\n      updateTransform();\n    }\n  }, { passive: false });\n}\n\nfunction openMermaidInNewTab(wrap) {\n  const svg = wrap.querySelector('svg');\n  if (!svg) return;\n  const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });\n  const url = URL.createObjectURL(blob);\n  window.open(url, '_blank');\n}\n";
+export declare function generateCSSVariables(palette: Palette, fonts: FontPairing, isDark: boolean): string;
+export declare function generateHtmlShell(title: string, bodyContent: string, aesthetic: string, cssVariables: string, extraHead?: string, extraScripts?: string): string;
+export declare function escapeHtml(str: string): string;
+//# sourceMappingURL=shared.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/templates/shared.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGnE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAiCxD,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAiVzE,CAAC;AAGF,eAAO,MAAM,UAAU,63EAgHtB,CAAC;AAGF,eAAO,MAAM,iBAAiB,w9BAyD7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,0vDAoD5B,CAAC;AAGF,wBAAgB,oBAAoB,CACnC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,OAAO,GACb,MAAM,CA0BR;AAGD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,SAAS,SAAK,EACd,YAAY,SAAK,GACf,MAAM,CAqBR;AAGD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C"}