chiltepin-render 0.33.2 → 0.34.0

package/dist/index.js

@@ -74,11 +74,11 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
 .docskin .section{padding:0;margin-bottom:64px;}
 .docskin .section > *:last-child{margin-bottom:0;}
 .docskin .section-num{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--soft);font-weight:700;margin-bottom:8px;}
-.docskin .section-head{margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid var(--navy);}
+.docskin .section-head{margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--rule-solid);}
 .docskin .section-head.bare{border-bottom:0;padding-bottom:0;margin-bottom:14px;}
 .docskin .section-head.bare .section-num{margin-bottom:0;font-size:10px;opacity:.8;}
 .docskin .section-head .section-title{border-bottom:0;padding-bottom:0;margin-bottom:14px;}
-.docskin .section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--navy);margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--navy);}
+.docskin .section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--navy);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--rule-solid);}
 .docskin .section-lede{font-size:16px;color:var(--slate);line-height:1.6;max-width:860px;margin:0;}
 .docskin .section-block{margin-bottom:64px;scroll-margin-top:16px;}
 .docskin .section-block:last-child{margin-bottom:0;}
@@ -278,7 +278,15 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
 .docskin .callout-body p{margin:0 0 8px;}
 .docskin .callout-body p:last-child{margin-bottom:0;}
 /* prose */
-.docskin .prose h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.015em;color:var(--navy);margin:40px 0 14px;padding-bottom:12px;border-bottom:2px solid var(--navy);}
+/* Markdown pipe tables and links inside prose: the same frame, header, and
+   row rules as the table block, so a GFM table never renders bare. */
+.docskin .prose table{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0;font-size:13px;border:1px solid var(--rule-solid);border-radius:6px;overflow:hidden;}
+.docskin .prose thead th{background:var(--paper-2);color:var(--muted);text-align:left;padding:9px 12px;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;border-bottom:1px solid var(--rule-solid);}
+.docskin .prose td{padding:9px 12px;border-bottom:1px solid var(--rule-table);vertical-align:top;}
+.docskin .prose tbody tr:last-child td{border-bottom:none;}
+.docskin .prose tbody tr:nth-child(even){background:color-mix(in srgb,var(--paper-2) 50%,transparent);}
+.docskin .prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--link) 50%,transparent);}
+.docskin .prose h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.015em;color:var(--navy);margin:40px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--rule-solid);}
 .docskin .prose h2:first-child{margin-top:0;}
 .docskin .prose h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.005em;color:var(--navy);margin:36px 0 12px;}
 .docskin .prose h4{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;color:var(--muted);margin:22px 0 8px;}
@@ -371,7 +379,7 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
 .docskin .link-chip .lt{color:var(--gray);font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;}
 a.link-chip,a.st-link{text-decoration:none;color:inherit;}
 a.link-chip:hover,a.st-link:hover{text-decoration:underline;}
-.docskin .footer{margin-top:8px;padding:18px 32px 28px;border-top:2px solid var(--navy);font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;font-weight:700;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
+.docskin .footer{margin-top:8px;padding:18px 32px 28px;border-top:1px solid var(--rule-solid);font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;font-weight:700;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
 .docskin .footer .accent{color:var(--highlight);}
 .docskin .layer-label{font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
 .docskin .uml-sep{stroke:var(--rule);stroke-width:1;}
@@ -5700,6 +5708,13 @@ function autoGrid(ids, edges, rankdir) {
 }
 
 // src/blocks/flow.ts
+var AI_CHIP = {
+  agent: "AGENT",
+  llm: "LLM",
+  tool: "TOOL",
+  human: "HUMAN",
+  memory: "MEMORY"
+};
 function flowRevealOrder(nodes, edges) {
   const ids = new Set(nodes.map((n) => n.id));
   const indeg = /* @__PURE__ */ new Map();
@@ -5828,16 +5843,22 @@ function renderFlowSvg(data) {
     const cx = r5.x + r5.w / 2;
     const cy = r5.y + r5.h / 2;
     const accent = accentIds.has(n.id);
-    const stroke = accent ? "var(--accent)" : kind === "start" ? "var(--rule-solid)" : "var(--ink)";
-    const sw = accent ? 1.5 : kind === "start" ? 1 : 1.5;
-    const fill = accent ? "var(--accent-tint)" : kind === "start" ? "var(--paper-2)" : "var(--paper)";
+    const chip3 = AI_CHIP[kind];
+    const secondary2 = kind === "start" || kind === "memory";
+    const stroke = accent ? "var(--accent)" : secondary2 ? "var(--rule-solid)" : "var(--ink)";
+    const sw = accent ? 1.5 : secondary2 ? 1 : 1.5;
+    const fill = accent ? "var(--accent-tint)" : secondary2 ? "var(--paper-2)" : "var(--paper)";
+    const dash = kind === "human" ? ' stroke-dasharray="4 3"' : "";
     let shape;
     if (kind === "decision") {
       shape = `<polygon points="${cx},${r5.y} ${r5.x + r5.w},${cy} ${cx},${r5.y + r5.h} ${r5.x},${cy}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
     } else if (kind === "start" || kind === "end") {
       shape = `<rect x="${r5.x}" y="${r5.y}" width="${r5.w}" height="${r5.h}" rx="${r5.h / 2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"/>`;
     } else {
-      shape = `<rect x="${r5.x}" y="${r5.y}" width="${r5.w}" height="${r5.h}" rx="4" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"/>`;
+      shape = `<rect x="${r5.x}" y="${r5.y}" width="${r5.w}" height="${r5.h}" rx="4" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dash}/>`;
+    }
+    if (chip3 !== void 0) {
+      shape += `<text x="${r5.x + 8}" y="${r5.y + 11}" class="blk-chip t-sub">${chip3}</text>`;
     }
     const nl = n.label.indexOf("\n");
     const name = nl >= 0 ? n.label.slice(0, nl) : n.label;
@@ -5845,12 +5866,13 @@ function renderFlowSvg(data) {
     const maxChars = kind === "decision" ? 18 : 20;
     const lines = sub.length > 0 ? wrapText(name, maxChars, 1) : wrapText(name, maxChars, 2);
     const tone = accent ? " c-accent" : "";
+    const dy = chip3 !== void 0 ? 4 : 0;
     let texts = "";
     if (sub.length > 0) {
-      texts = `<text x="${cx}" y="${cy - 1}" class="fc-label t-name${tone}">${escapeHtml(lines[0] ?? name)}</text><text x="${cx}" y="${cy + 12}" class="fc-sub t-sub" text-anchor="middle">${escapeHtml(sub)}</text>`;
+      texts = `<text x="${cx}" y="${cy - 1 + dy}" class="fc-label t-name${tone}">${escapeHtml(lines[0] ?? name)}</text><text x="${cx}" y="${cy + 12 + dy}" class="fc-sub t-sub" text-anchor="middle">${escapeHtml(sub)}</text>`;
     } else {
       texts = lines.map(
-        (ln2, j2) => `<text x="${cx}" y="${cy + 4.5 - (lines.length - 1) * 7.5 + j2 * 15}" class="fc-label t-name${tone}">${escapeHtml(ln2)}</text>`
+        (ln2, j2) => `<text x="${cx}" y="${cy + 4.5 + dy - (lines.length - 1) * 7.5 + j2 * 15}" class="fc-label t-name${tone}">${escapeHtml(ln2)}</text>`
       ).join("");
     }
     s += `<g${bp(`nodes.${ni}`)}${nodeCellAttrs(n.col, n.row, n.w ?? 1)}${revealAttr(stepOf(n.id))}>${shape}${texts}</g>`;
@@ -5863,6 +5885,11 @@ function renderFlowSvg(data) {
   if (kindsUsed.has("start")) items.push({ swatch: "node-fill2", label: "start" });
   if (kindsUsed.has("process")) items.push({ swatch: "node", label: "step" });
   if (kindsUsed.has("decision")) items.push({ swatch: "node", label: "decision (diamond)" });
+  if (kindsUsed.has("agent")) items.push({ swatch: "node", label: "AGENT \xB7 autonomous step" });
+  if (kindsUsed.has("llm")) items.push({ swatch: "node", label: "LLM \xB7 model call" });
+  if (kindsUsed.has("tool")) items.push({ swatch: "node", label: "TOOL \xB7 retrieval / API / code" });
+  if (kindsUsed.has("human")) items.push({ swatch: "node-dashed", label: "HUMAN \xB7 review gate" });
+  if (kindsUsed.has("memory")) items.push({ swatch: "node-fill2", label: "MEMORY \xB7 store" });
   if (kindsUsed.has("end") && [...accentIds].length < nodes.filter((n) => n.kind === "end").length) {
     items.push({ swatch: "node", label: "exit" });
   }