@avodado/render 0.2.3 → 0.2.5

package/dist/index.js

@@ -3624,7 +3624,7 @@ function umlRel(kind) {
 function renderUml(data) {
   const classes = data.classes ?? [];
   const rels = data.rels ?? [];
-  const colW = 152;
+  const colW = 144;
   const rowH = 14;
   const headH = (c) => 22 + (c.stereotype !== void 0 ? 10 : 0);
   const compH = (list) => (list !== void 0 && list.length > 0 ? list.length * rowH : 6) + 8;
@@ -3645,7 +3645,7 @@ function renderUml(data) {
     const n = g.node(c.id);
     if (n !== void 0) at2.set(c.id, { x: n.x - colW / 2, y: n.y - clsH(c) / 2 });
   }
-  let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>UML class diagram</title><defs><marker id="umlTri" viewBox="0 0 14 14" refX="13" refY="7" markerWidth="15" markerHeight="15" orient="auto-start-reverse"><path d="M1,1 L13,7 L1,13 z" fill="var(--white)" stroke="var(--charcoal)" stroke-width="1.2"/></marker><marker id="umlDiaF" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="var(--charcoal)"/></marker><marker id="umlDiaH" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="var(--white)" stroke="var(--charcoal)" stroke-width="1.2"/></marker><marker id="umlOpen" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M1,1 L11,6 L1,11" fill="none" stroke="var(--charcoal)" stroke-width="1.3"/></marker></defs>`;
+  let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>UML class diagram</title><defs><marker id="umlTri" viewBox="0 0 14 14" refX="13" refY="7" markerWidth="13" markerHeight="13" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M1,1 L13,7 L1,13 z" fill="var(--white)" stroke="var(--charcoal)" stroke-width="1.2"/></marker><marker id="umlDiaF" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="11" markerHeight="7" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="var(--charcoal)"/></marker><marker id="umlDiaH" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="11" markerHeight="7" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="var(--white)" stroke="var(--charcoal)" stroke-width="1.2"/></marker><marker id="umlOpen" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M1,1 L11,6 L1,11" fill="none" stroke="var(--charcoal)" stroke-width="1.3"/></marker></defs>`;
   const labels = [];
   validRels.forEach((rl, i) => {
     const e = g.edge(rl.from, rl.to, `e${i}`);
@@ -3758,7 +3758,8 @@ function renderMece(data) {
     const y = yOf(n.id);
     const st2 = meceStyle(depth.get(n.id) ?? 0);
     const stroke = st2.solid === true ? "none" : st2.accent;
-    const stripe = st2.solid === true ? "" : `<rect x="${x2}" y="${y}" width="5" height="${nodeH}" rx="2" fill="${st2.accent}"/>`;
+    const stripe = st2.solid === true ? "" : `<rect x="${x2}" y="${y}" width="5" height="${nodeH}" fill="${st2.accent}"/>`;
+    const card = st2.solid === true ? `<rect x="${x2}" y="${y}" width="${nodeW}" height="${nodeH}" rx="6" fill="${st2.fill}" stroke="${stroke}" stroke-width="1.3"/>` : `<path d="${rectRoundRight(x2, y, nodeW, nodeH, 6)}" fill="${st2.fill}" stroke="${stroke}" stroke-width="1.3"/>`;
     const labelX = x2 + (st2.solid === true ? nodeW / 2 : 14);
     const anchor = st2.solid === true ? "middle" : "start";
     const lines = wrapText(n.label, st2.solid === true ? 22 : 20, n.note !== void 0 ? 1 : 2);
@@ -3767,7 +3768,7 @@ function renderMece(data) {
       (ln2, j2) => `<text x="${labelX}" y="${startY + j2 * 14}" class="blk-name" fill="${st2.text}" text-anchor="${anchor}">${escapeHtml(ln2)}</text>`
     ).join("");
     const note = n.note !== void 0 ? `<text x="${labelX}" y="${y + 38}" class="ft-note" fill="${st2.solid === true ? "#cfe0f3" : st2.accent}" text-anchor="${anchor}">${escapeHtml(n.note)}</text>` : "";
-    s += `<g filter="url(#gshadow)"><rect x="${x2}" y="${y}" width="${nodeW}" height="${nodeH}" rx="6" fill="${st2.fill}" stroke="${stroke}" stroke-width="1.3"/>` + stripe + labelTexts + note + `</g>`;
+    s += `<g filter="url(#gshadow)">` + card + stripe + labelTexts + note + `</g>`;
   }
   s += `</svg>`;
   return diagramFrame(
@@ -3869,7 +3870,8 @@ function renderFrontend(data) {
     const y = yOf(n.id);
     const st2 = ftStyle(n.kind);
     const stroke = st2.solid === true ? "none" : st2.accent;
-    const stripe = st2.solid === true ? "" : `<rect x="${x2}" y="${y}" width="5" height="${nodeH}" rx="2" fill="${st2.accent}"/>`;
+    const stripe = st2.solid === true ? "" : `<rect x="${x2}" y="${y}" width="5" height="${nodeH}" fill="${st2.accent}"/>`;
+    const card = st2.solid === true ? `<rect x="${x2}" y="${y}" width="${nodeW}" height="${nodeH}" rx="8" fill="${st2.fill}" stroke="${stroke}" stroke-width="1.2"/>` : `<path d="${rectRoundRight(x2, y, nodeW, nodeH, 8)}" fill="${st2.fill}" stroke="${stroke}" stroke-width="1.2"/>`;
     const labelX = x2 + (st2.solid === true ? nodeW / 2 : 14);
     const anchor = st2.solid === true ? "middle" : "start";
     const lines = wrapText(n.name, st2.solid === true ? 20 : 18, n.note !== void 0 ? 1 : 2);
@@ -3878,7 +3880,7 @@ function renderFrontend(data) {
       (ln2, j2) => `<text x="${labelX}" y="${startY + j2 * 14}" class="blk-name" fill="${st2.text}" text-anchor="${anchor}">${escapeHtml(ln2)}</text>`
     ).join("");
     const note = n.note !== void 0 ? `<text x="${labelX}" y="${y + 41}" class="ft-note" fill="${st2.solid === true ? "#cfe0f3" : st2.accent}" text-anchor="${anchor}">${escapeHtml(n.note)}</text>` : "";
-    s += `<g filter="url(#gshadow)"><rect x="${x2}" y="${y}" width="${nodeW}" height="${nodeH}" rx="8" fill="${st2.fill}" stroke="${stroke}" stroke-width="1.2"/>` + stripe + labelTexts + note + `</g>`;
+    s += `<g filter="url(#gshadow)">` + card + stripe + labelTexts + note + `</g>`;
   }
   s += `</svg>`;
   return diagramFrame(
@@ -3944,7 +3946,7 @@ function renderCluster(data) {
   let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>Cluster diagram</title>`;
   for (const cb of clusterBoxes) {
     const kindLabel = cb.c.kind !== void 0 ? `<text x="${cb.x + cb.w - 14}" y="${cb.y + 21}" class="cl-kind">${escapeHtml(cb.c.kind)}</text>` : "";
-    s += `<g><rect x="${cb.x}" y="${cb.y}" width="${cb.w}" height="${cb.h}" rx="12" fill="#0e54a1" fill-opacity="0.035" stroke="#0e54a1" stroke-width="1.4" stroke-dasharray="8 5"/><rect x="${cb.x}" y="${cb.y}" width="${cb.w}" height="${cHeader}" rx="12" fill="#0e54a1"/><rect x="${cb.x}" y="${cb.y + cHeader - 12}" width="${cb.w}" height="12" fill="#0e54a1"/><text x="${cb.x + 16}" y="${cb.y + 21}" class="cl-head">${escapeHtml(cb.c.label)}</text>` + kindLabel + `</g>`;
+    s += `<g><rect x="${cb.x}" y="${cb.y}" width="${cb.w}" height="${cb.h}" rx="12" fill="var(--navy)" fill-opacity="0.035" stroke="var(--navy)" stroke-width="1.4" stroke-dasharray="8 5"/><rect x="${cb.x}" y="${cb.y}" width="${cb.w}" height="${cHeader}" rx="12" fill="var(--navy)"/><rect x="${cb.x}" y="${cb.y + cHeader - 12}" width="${cb.w}" height="12" fill="#0e54a1"/><text x="${cb.x + 16}" y="${cb.y + 21}" class="cl-head">${escapeHtml(cb.c.label)}</text>` + kindLabel + `</g>`;
   }
   for (const e of edges) {
     const A2 = rects.get(e.from);
@@ -3976,7 +3978,7 @@ function renderCluster(data) {
       }
       return `<g>` + bars + `<text x="${r.x + 12 + shown * 8 + 4}" y="${r.y + r.h - 7}" class="blk-tech" fill="${st2.accent}">\xD7${reps}</text></g>`;
     })() : "";
-    s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="8" fill="${st2.fill}" stroke="${st2.accent}" stroke-width="1.2"/><rect x="${r.x}" y="${r.y}" width="5" height="${r.h}" rx="2" fill="${st2.accent}"/>` + gl + `<text x="${nx}" y="${r.y + (sv.tech !== void 0 ? 26 : 30)}" class="blk-name" fill="${st2.text}" style="font-size:12px">${escapeHtml(sv.label)}</text>` + techLine + repIndicator + `</g>`;
+    s += `<g filter="url(#gshadow)"><path d="${rectRoundRight(r.x, r.y, r.w, r.h, 8)}" fill="${st2.fill}" stroke="${st2.accent}" stroke-width="1.2"/><rect x="${r.x}" y="${r.y}" width="5" height="${r.h}" fill="${st2.accent}"/>` + gl + `<text x="${nx}" y="${r.y + (sv.tech !== void 0 ? 26 : 30)}" class="blk-name" fill="${st2.text}" style="font-size:12px">${escapeHtml(sv.label)}</text>` + techLine + repIndicator + `</g>`;
   }
   s += `</svg>`;
   return diagramFrame(
@@ -4028,10 +4030,10 @@ function renderGrid(data) {
     h: cellH
   });
   const groupRect = (g) => ({
-    x: xOf(g.col) - 16,
-    y: yOf(g.row) - 22,
-    w: (g.cols ?? 1) * cellW + ((g.cols ?? 1) - 1) * gapX + 32,
-    h: (g.rows ?? 1) * cellH + ((g.rows ?? 1) - 1) * gapY + 38
+    x: xOf(g.col) - 22,
+    y: yOf(g.row) - 30,
+    w: (g.cols ?? 1) * cellW + ((g.cols ?? 1) - 1) * gapX + 44,
+    h: (g.rows ?? 1) * cellH + ((g.rows ?? 1) - 1) * gapY + 54
   });
   const byId = new Map(nodes.map((n) => [n.id, n]));
   const width = padX * 2 + cols * cellW + (cols - 1) * gapX;
@@ -4062,14 +4064,11 @@ function renderGrid(data) {
   for (const n of nodes) {
     const r = rectFor2(n);
     const st2 = blockStyle(n.kind);
-    const badge = 38;
-    const bx = r.x + 13;
-    const by = r.y + (r.h - badge) / 2;
-    const glyph = nodeGlyph(n.kind, bx + 11, by + 11, "var(--white)");
-    const badgeInner = glyph.length > 0 ? glyph : `<text x="${bx + badge / 2}" y="${by + badge / 2 + 5}" text-anchor="middle" font-family="var(--font-display)" font-size="16" font-weight="700" fill="var(--white)">${escapeHtml((n.name ?? "?").slice(0, 1).toUpperCase())}</text>`;
-    const tx = bx + badge + 13;
-    const hasTech = n.tech !== void 0;
-    s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="12" fill="var(--white)" stroke="var(--rule)" stroke-width="1"/><rect x="${bx}" y="${by}" width="${badge}" height="${badge}" rx="10" fill="${st2.accent}"/>` + badgeInner + `<text x="${tx}" y="${r.y + r.h / 2 + (hasTech ? -3 : 5)}" class="blk-name" fill="var(--charcoal)">${escapeHtml(n.name)}</text>` + (hasTech ? `<text x="${tx}" y="${r.y + r.h / 2 + 14}" class="blk-tech" fill="${st2.accent}">${escapeHtml(n.tech)}</text>` : "") + `</g>`;
+    const gl = nodeGlyph(n.kind, r.x + 16, r.y + 16, st2.accent);
+    const nx = gl.length > 0 ? r.x + 42 : r.x + 16;
+    const chip = gl.length === 0 && n.kind !== void 0 ? `<text x="${r.x + 16}" y="${r.y + 22}" class="blk-chip" fill="${st2.accent}">${escapeHtml(n.kind)}</text>` : "";
+    const tech = n.tech !== void 0 ? `<text x="${nx}" y="${r.y + (gl.length > 0 ? 50 : 60)}" class="blk-tech" fill="${st2.accent}">${escapeHtml(n.tech)}</text>` : "";
+    s += `<g filter="url(#gshadow)"><path d="${rectRoundRight(r.x, r.y, r.w, r.h, 9)}" fill="${st2.fill}" stroke="${st2.accent}" stroke-width="1.2"/><rect x="${r.x}" y="${r.y}" width="5" height="${r.h}" fill="${st2.accent}"/>` + gl + chip + `<text x="${nx}" y="${r.y + (gl.length > 0 ? 34 : 44)}" class="blk-name" fill="${st2.text}">${escapeHtml(n.name)}</text>` + tech + `</g>`;
   }
   s += labels.join("");
   s += `</svg>`;