@rse/gradia 1.2.4 → 1.3.0

package/README.md

@@ -327,13 +327,13 @@ color-group-border         #c0d0e0      hub-channel-width-max      340
 color-container-name       #666666      hub-channel-width-min      240
 color-container-box        #f6f6f6      hub-node-gap               20
 color-container-border     #a0a0a0      hub-node-degree-max        3
-color-edge-line            #999999      grid-columns-max           4
-color-edge-name            #333333      grid-columns-min           3
-color-edge-arity           #333333      grid-gap-horizontal        40
-color-edge-halo            #ffffff      grid-gap-vertical          20
-size-canvas-margin         40           grid-node-width-equal      true
-size-node-width-min        220          grid-node-height-equal     true
-size-node-width-max        0
+color-edge-line            #999999      hub-node-count-max         0
+color-edge-name            #333333      grid-columns-max           4
+color-edge-arity           #333333      grid-columns-min           3
+color-edge-halo            #ffffff      grid-gap-horizontal        40
+size-canvas-margin         40           grid-gap-vertical          20
+size-node-width-min        220          grid-node-width-equal      true
+size-node-width-max        0            grid-node-height-equal     true
 ```
 
 The `size-*`, `group-*`, `container-*`, `graph-*`, `hub-*`, and
@@ -376,6 +376,15 @@ unlabeled diagram can be spaced out, while the `-max` options cap it, so
 that neither many parallel edges nor a long label can push the nodes
 apart without bound.
 
+The `hub-node-count-max` option controls the wrapping of the input and
+output column of a `hub` diagram: given a positive value, a column of
+more nodes than this wraps into two staggered sub-columns, whose nodes
+alternate between the outer sub-column and the inner one, with every
+outer node vertically centered onto a gap between two inner nodes,
+through which its edges reach the primary node. This trades nearly
+half of the height of a large diagram for additional width. The value
+`0` disables the wrapping entirely.
+
 The `grid-columns-min` and `grid-columns-max` options control the column
 count of a `grid` diagram, which by default is derived from the node
 count as a roughly square grid: `grid-columns-min` raises the derived
@@ -404,6 +413,15 @@ hard-coded into the SVG instead. The resulting precedence is: first
 `#config`/`--config`, then the CSS custom property `--gradia-<option>`,
 and finally the built-in default.
 
+The styling is not repeated on every element of the generated SVG, but
+declared once as CSS classes in a `<style>` element, which the elements
+reference. A class is named `gradia-<digest>` after the digest of its
+own declarations, so equal declarations always yield the very same
+class. As the class names are global once multiple diagrams are embedded
+into the very same document, the embedding document can hence strip the
+`<style>` elements off the diagrams and declare the union of their
+rules (one per line) a single time on its own.
+
 The `font-family` option is either a built-in font family, a plain font
 family name, or the path to a WOFF2 file. The only built-in font family
 is `Source Sans 3`, shipped as a variable WOFF2 file by the NPM

package/dst/gradia-api-config.d.ts

@@ -46,6 +46,7 @@ export declare const configDefaults: {
     "hub-channel-width-min": number;
     "hub-node-gap": number;
     "hub-node-degree-max": number;
+    "hub-node-count-max": number;
     "grid-columns-max": number;
     "grid-columns-min": number;
     "grid-gap-horizontal": number;

package/dst/gradia-api-config.js

@@ -56,6 +56,7 @@ export const configDefaults = {
     "hub-channel-width-min": 240, /*  hub: min width of column channels      */
     "hub-node-gap": 20, /*  hub: vertical gap of stacked nodes     */
     "hub-node-degree-max": 3, /*  hub: max edges/side before growth      */
+    "hub-node-count-max": 0, /*  hub: max nodes/column before wrapping  */
     "grid-columns-max": 4, /*  grid: max side-by-side tiles           */
     "grid-columns-min": 3, /*  grid: min side-by-side tiles           */
     "grid-gap-horizontal": 40, /*  grid: horizontal gap between tiles     */

package/dst/gradia-api-render-svg.js

@@ -20,11 +20,13 @@ const escapeCSS = (text) => text.replace(/[\\"']/g, "\\$&").replace(/[\r\n\f]/g,
 const NS_GRADIA = new UUID(5, "ns:URL", "https://github.com/rse/gradia").format();
 /*  derive a per-document identifier prefix from a seed, as the SVG
     identifiers are DOM-global and would collide once multiple diagrams
-    are embedded into the very same document. The prefix is a UUID v5 of
-    the seed and hence stays stable across regenerations of an unchanged
-    diagram (the Base16 format keeps it alphanumeric and thus a valid XML
-    name and CSS/URL fragment)  */
-const idPrefix = (seed) => `gradia-${new UUID(5, NS_GRADIA, seed).format("b16").toLowerCase()}`;
+    are embedded into the very same document. The prefix is derived from
+    the UUID v5 of the seed and hence stays stable across regenerations
+    of an unchanged diagram (the Base16 format keeps it alphanumeric and
+    thus a valid XML name and CSS/URL fragment, and its leading 12 digits
+    keep the identifiers short, as every edge references one, while
+    still making a collision among the diagrams of a document unlikely)  */
+const idPrefix = (seed) => `gradia-${new UUID(5, NS_GRADIA, seed).format("b16").toLowerCase().slice(0, 12)}`;
 /*  the placement of a group tag in the top-left corner of its group box  */
 const TAG_DX = 18; /*  left offset of the group tag  */
 const TAG_DY = 12; /*  top offset of the group tag   */
@@ -83,7 +85,7 @@ const labelPlacer = (layout, hops, hopRadius) => {
 };
 /*  generate the SVG fragments for a single node box (a node with a
     "url" attribute becomes a hyperlink covering the whole box)  */
-const renderNode = (node, layout, style, font, color, config) => {
+const renderNode = (node, layout, style, styler, config) => {
     const { cx, cy, boxW, boxH, contentH } = layout;
     const w = boxW.get(node.id);
     const h = boxH.get(node.id);
@@ -93,7 +95,7 @@ const renderNode = (node, layout, style, font, color, config) => {
     const url = urlOf(node);
     const parts = [];
     parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="6" ` +
-        `style="fill: ${color(style.fill)}; stroke: ${color(style.stroke)}" stroke-width="4.0"` +
+        `class="${styler.box(style.fill, style.stroke, 4)}"` +
         `${style.dash !== undefined ? ` stroke-dasharray="${escapeXML(style.dash)}"` : ""}/>`);
     /*  vertically center the textual content block within the box, with
         the optional type lines shifting the name and attributes down and
@@ -105,20 +107,18 @@ const renderNode = (node, layout, style, font, color, config) => {
         ty + th + MIN_H / 2 + FS_NAME * 0.36 : cy(node.id) + th / 2 + FS_NAME * 0.36 - nh / 2;
     lines.type.forEach((line, k) => {
         parts.push(`<text x="${cx(node.id)}" ` +
-            `y="${nameY - TYPE_D - (lines.type.length - 1 - k) * TYPE_H}" text-anchor="middle" ` +
-            `font-size="${FS_TYPE}" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${escapeXML(line)}</text>`);
+            `y="${nameY - TYPE_D - (lines.type.length - 1 - k) * TYPE_H}" ` +
+            `class="${styler.text(style.text, FS_TYPE, { middle: true })}">${escapeXML(line)}</text>`);
     });
     lines.name.forEach((line, k) => {
-        parts.push(`<text x="${cx(node.id)}" y="${nameY + k * NAME_H}" text-anchor="middle" ` +
-            `font-size="${FS_NAME}" font-weight="600" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${escapeXML(line)}</text>`);
+        parts.push(`<text x="${cx(node.id)}" y="${nameY + k * NAME_H}" ` +
+            `class="${styler.text(style.text, FS_NAME, { bold: true, middle: true })}">` +
+            `${escapeXML(line)}</text>`);
     });
     lines.attrs.forEach((line, k) => {
         parts.push(`<text x="${cx(node.id)}" ` +
-            `y="${ty + th + nh + MIN_H + ATTR_P + k * ATTR_H}" text-anchor="middle" ` +
-            `font-size="${FS_ATTR}" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${escapeXML(line)}</text>`);
+            `y="${ty + th + nh + MIN_H + ATTR_P + k * ATTR_H}" ` +
+            `class="${styler.text(style.text, FS_ATTR, { middle: true })}">${escapeXML(line)}</text>`);
     });
     if (url === undefined)
         return parts;
@@ -157,11 +157,7 @@ const viewBoxOf = (layout, boxes, margin) => {
     optional name, placed near the middle of the route, and its optional
     arity, placed near the arrow head (both dodging into a collision-free
     position through the "claim" of the label placer)  */
-const renderEdgeLabels = (edge, poly, claim, font, color) => {
-    /*  the halo rendered behind the edge labels for readability
-        (its color is emitted into the style attribute below, as only
-        there the CSS custom property lookup can be resolved)  */
-    const halo = "stroke-width=\"4.5\" paint-order=\"stroke\" stroke-linejoin=\"round\"";
+const renderEdgeLabels = (edge, poly, claim, styler) => {
     const parts = [];
     if (edge.name !== undefined) {
         const w = textWidth(edge.name, FS_EDGE);
@@ -178,11 +174,9 @@ const renderEdgeLabels = (edge, poly, claim, font, color) => {
             }
         }
         const box = claim(candidates);
-        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" text-anchor="middle" ` +
-            `font-size="${FS_EDGE}" ` +
-            `style="font-family: ${font}; fill: ${color("color-edge-name")}; ` +
-            `stroke: ${color("color-edge-halo")}" ` +
-            `${halo}>${escapeXML(edge.name)}</text>`);
+        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
+            `class="${styler.text("color-edge-name", FS_EDGE, { middle: true, halo: true })}">` +
+            `${escapeXML(edge.name)}</text>`);
     }
     if (edge.arity !== undefined) {
         const w = textWidth(edge.arity, FS_ARITY);
@@ -211,43 +205,38 @@ const renderEdgeLabels = (edge, poly, claim, font, color) => {
             ];
         }
         const box = claim(candidates);
-        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" text-anchor="middle" ` +
-            `font-size="${FS_ARITY}" ` +
-            `style="font-family: ${font}; fill: ${color("color-edge-arity")}; ` +
-            `stroke: ${color("color-edge-halo")}" ` +
-            `${halo}>${escapeXML(edge.arity)}</text>`);
+        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
+            `class="${styler.text("color-edge-arity", FS_ARITY, { middle: true, halo: true })}">` +
+            `${escapeXML(edge.arity)}</text>`);
     }
     return parts;
 };
 /*  generate the SVG fragments for a single group box and its tag
     in the top-left corner  */
-const renderGroup = (group, font, color) => [
+const renderGroup = (group, styler) => [
     `<rect x="${group.x}" y="${group.y}" width="${group.w}" height="${group.h}" rx="12" ` +
-        `style="fill: ${color("color-group-box")}; ` +
-        `stroke: ${color("color-group-border")}" stroke-width="3.0"/>`,
+        `class="${styler.box("color-group-box", "color-group-border", 3)}"/>`,
     `<text x="${group.x + TAG_DX}" y="${group.y + TAG_DY + FS_GROUP}" ` +
-        `font-size="${FS_GROUP}" font-weight="600" ` +
-        `style="font-family: ${font}; fill: ${color("color-group-name")}">${escapeXML(group.name)}</text>`
+        `class="${styler.text("color-group-name", FS_GROUP, { bold: true })}">${escapeXML(group.name)}</text>`
 ];
 /*  generate the SVG fragments for a single container box and its tag
     in the top-left corner, with the optional type line above the name
     (a container with a "url" attribute becomes a hyperlink covering
     the whole box)  */
-const renderContainer = (c, font, color) => {
+const renderContainer = (c, styler) => {
     const type = typeOf(c.node);
     const url = urlOf(c.node);
     const parts = [
         `<rect x="${c.x}" y="${c.y}" width="${c.w}" height="${c.h}" rx="12" ` +
-            `style="fill: ${color("color-container-box")}; ` +
-            `stroke: ${color("color-container-border")}" stroke-width="3.0" stroke-dasharray="10 6"/>`,
+            `class="${styler.box("color-container-box", "color-container-border", 3)}" ` +
+            "stroke-dasharray=\"10 6\"/>",
         ...(type !== undefined ? [
             `<text x="${c.x + TAG_DX}" y="${c.y + TAG_DY + FS_TYPE}" ` +
-                `font-size="${FS_TYPE}" ` +
-                `style="font-family: ${font}; fill: ${color("color-container-name")}">${escapeXML(type)}</text>`
+                `class="${styler.text("color-container-name", FS_TYPE)}">${escapeXML(type)}</text>`
         ] : []),
         `<text x="${c.x + TAG_DX}" y="${c.y + containerHead(c.node) - HEAD_H + TAG_DY + FS_GROUP}" ` +
-            `font-size="${FS_GROUP}" font-weight="600" ` +
-            `style="font-family: ${font}; fill: ${color("color-container-name")}">${escapeXML(c.node.name)}</text>`
+            `class="${styler.text("color-container-name", FS_GROUP, { bold: true })}">` +
+            `${escapeXML(c.node.name)}</text>`
     ];
     if (url === undefined)
         return parts;
@@ -264,7 +253,7 @@ export const renderSVG = (layout, config, explicit, seed) => {
         values: explicitly configured values are hard-coded, while all
         others are fetched at display time from the "--gradia-<option>"
         CSS custom properties, falling back to the built-in defaults  */
-    const color = (key) => escapeXML(cssValueOf(explicit, key));
+    const color = (key) => cssValueOf(explicit, key);
     /*  derive the collision-free identifiers of this SVG document  */
     const prefix = idPrefix(seed);
     const idArrow = `${prefix}-arrow`;
@@ -273,7 +262,29 @@ export const renderSVG = (layout, config, explicit, seed) => {
     const stack = Object.hasOwn(explicit, "font-family") ?
         `'${escapeCSS(family)}'` :
         `var(--gradia-font-family, '${escapeCSS(family)}')`;
-    const font = escapeXML(`${stack}, ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif`);
+    const font = `${stack}, ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif`;
+    /*  collect the CSS classes the rendered elements reference (the
+        halo behind an edge label keeps it readable on top of a line)  */
+    const rules = new Map();
+    const classOf = (decls) => {
+        let name = rules.get(decls);
+        if (name === undefined) {
+            name = `gradia-${new UUID(5, NS_GRADIA, decls).format("b16").toLowerCase().slice(0, 8)}`;
+            rules.set(decls, name);
+        }
+        return name;
+    };
+    const styler = {
+        text: (fill, size, options = {}) => classOf(`font-family: ${font}; font-size: ${size}px; ` +
+            (options.bold ? "font-weight: 600; " : "") +
+            (options.middle ? "text-anchor: middle; " : "") +
+            `fill: ${color(fill)}` +
+            (options.halo ? `; stroke: ${color("color-edge-halo")}; stroke-width: 4.5; ` +
+                "paint-order: stroke; stroke-linejoin: round" : "")),
+        box: (fill, stroke, width) => classOf(`fill: ${color(fill)}; stroke: ${color(stroke)}; stroke-width: ${width}`)
+    };
+    const classEdge = classOf(`fill: none; stroke: ${color("color-edge-line")}; stroke-width: 3`);
+    const classArrow = classOf(`fill: ${color("color-edge-line")}`);
     /*  detect the edge crossings requiring rendered hops  */
     const hops = computeHops(polys);
     /*  prepare the collision-free placement of the edge labels  */
@@ -282,38 +293,39 @@ export const renderSVG = (layout, config, explicit, seed) => {
     const svgEdges = [];
     const svgLabels = [];
     edges.forEach((edge, i) => {
-        svgEdges.push(`<path d="${pathOf(polys[i], hops[i], config["size-edge-corner-radius"], config["size-edge-hop-radius"])}" fill="none" ` +
-            `style="stroke: ${color("color-edge-line")}" stroke-width="3.0" marker-end="url(#${idArrow})"/>`);
-        svgLabels.push(...renderEdgeLabels(edge, polys[i], claim, font, color));
+        svgEdges.push(`<path d="${pathOf(polys[i], hops[i], config["size-edge-corner-radius"], config["size-edge-hop-radius"])}" ` +
+            `class="${classEdge}" marker-end="url(#${idArrow})"/>`);
+        svgLabels.push(...renderEdgeLabels(edge, polys[i], claim, styler));
     });
     /*  generate the SVG fragments for the node boxes  */
-    const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), font, color, config));
+    const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), styler, config));
     /*  generate the SVG fragments for the group boxes (drawn below
         everything else) and the container boxes (drawn below the edges
         and nodes, an outer box before its nested ones)  */
-    const svgGroups = groups.flatMap((group) => renderGroup(group, font, color));
-    const svgContainers = containers.flatMap((c) => renderContainer(c, font, color));
+    const svgGroups = groups.flatMap((group) => renderGroup(group, styler));
+    const svgContainers = containers.flatMap((c) => renderContainer(c, styler));
     /*  determine the overall bounding box of all rendered elements  */
     const groupBoxes = groups.map((group) => [group.x, group.y, group.x + group.w, group.y + group.h]);
     const containerBoxes = containers.map((c) => [c.x, c.y, c.x + c.w, c.y + c.h]);
     const vb = viewBoxOf(layout, [...occupied, ...groupBoxes, ...containerBoxes], config["size-canvas-margin"]);
-    /*  assemble the final SVG document  */
+    /*  assemble the final SVG document (with one CSS rule per line)  */
     return [
         "<?xml version=\"1.0\" encoding=\"UTF-8\"?>",
         "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" " +
             `viewBox="${vb.x} ${vb.y} ${vb.w} ${vb.h}" width="${vb.w}" height="${vb.h}">`,
         "<defs>",
+        "<style>",
         ...(embed !== undefined ? [
-            "<style>",
             `@font-face { font-family: "${escapeXML(escapeCSS(family))}"; ` +
                 (weight !== undefined ? `font-weight: ${escapeXML(escapeCSS(weight))}; ` : "") +
-                `src: url(data:font/woff2;base64,${embed}) format("woff2"); }`,
-            "</style>"
+                `src: url(data:font/woff2;base64,${embed}) format("woff2"); }`
         ] : []),
+        ...Array.from(rules, ([decls, name]) => `.${name} { ${escapeXML(decls)} }`),
+        "</style>",
         `<marker id="${idArrow}" viewBox="0 0 10 10" refX="9" refY="5" ` +
             "markerWidth=\"21\" markerHeight=\"21\" markerUnits=\"userSpaceOnUse\" " +
             "orient=\"auto-start-reverse\">",
-        `<path d="M 0 1 L 9 5 L 0 9 z" style="fill: ${color("color-edge-line")}"/>`,
+        `<path d="M 0 1 L 9 5 L 0 9 z" class="${classArrow}"/>`,
         "</marker>",
         "</defs>",
         ...svgGroups,

package/dst/gradia-api-type-hub.js

@@ -3,6 +3,7 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
+import { FS_ARITY, ARITY_OFF, textWidth } from "./gradia-api-render-base.js";
 import { isPrimary, measureNodes, defaultStyleOf } from "./gradia-api-render-node.js";
 import { simplifyPoly, assignPorts, assignTracks } from "./gradia-api-render-edge.js";
 /*  the separator between a node id and its placement suffix,
@@ -10,8 +11,11 @@ import { simplifyPoly, assignPorts, assignTracks } from "./gradia-api-render-edg
     output clone of a self-referencing primary node  */
 const CLONE = "\u0000";
 /*  rendering geometry constants  */
-const CHAN_W1 = 28; /*  width of a one-edge inter-column channel  */
-const CHAN_PAD = 16; /*  cross-axis padding inside a channel       */
+const CHAN_W1 = 28; /*  width of a one-edge inter-column channel    */
+const CHAN_PAD = 16; /*  cross-axis padding inside a channel         */
+const WRAP_GAP = 40; /*  min horizontal gap between two sub-columns  */
+const WRAP_PAD = 8; /*  padding of an arity inside that gap         */
+const LANE_PAD = 12; /*  clearance of an edge lane to a node box     */
 /*  validate the constrained input topology and classify the declared
     nodes: exactly one node is annotated with "primary: true" and every
     edge connects the primary with another node. Each other node is
@@ -122,30 +126,71 @@ export const render = async (graph, config, level = {}) => {
             boxH.set(node.id, boxH.get(node.id) +
                 (cnt - config["hub-node-degree-max"]) * config["size-edge-port-gap"]);
     }
+    /*  a stack of more nodes than the configured maximum wraps into two
+        staggered sub-columns: its nodes alternate between the outer
+        sub-column and the inner one (adjacent to the channel), and
+        every outer node is vertically centered onto a gap between two
+        inner nodes, through which its edges reach the channel on their
+        straight horizontal lanes (so the edge routing is unaffected)  */
+    const countMax = config["hub-node-count-max"];
+    const outerSet = new Set();
+    for (const list of [inputs, outputs])
+        if (countMax > 0 && list.length > countMax)
+            list.filter((_, k) => k % 2 === 0).forEach((node) => outerSet.add(node.id));
+    /*  the vertical half extent of the lane the edges of an outer node
+        occupy around its center: its ports at their maximum separation
+        plus the clearance to the inner node boxes (a fixed-size box
+        carries its ports at fixed positions anywhere along its side,
+        so its lane spans its entire height)  */
+    const laneOf = (id) => {
+        const cnt = Math.max(portCnt.get(`w:${id}`) ?? 0, portCnt.get(`e:${id}`) ?? 0);
+        return level.fixedSize?.has(id) ? boxH.get(id) / 2 :
+            Math.min(boxH.get(id) / 2, (cnt - 1) * config["size-edge-port-gap"] / 2 + LANE_PAD);
+    };
     /*  fixed three-column layout: stack the input nodes in the first
         column and the output nodes in the third column (each stack
         vertically centered), and place the center node in the second
-        column at the vertical center of the canvas  */
-    const stackH = (list) => list.reduce((a, node) => a + boxH.get(node.id), 0) + Math.max(list.length - 1, 0) * gap;
-    const totalH = Math.max(stackH(inputs), boxH.get(center.id), stackH(outputs));
-    const nodeCY = new Map();
+        column at the vertical center of the canvas, where an outer node
+        keeps its lane clear of the inner nodes above and below it  */
+    const stackY = new Map();
     const stack = (list) => {
-        let y = margin + (totalH - stackH(list)) / 2;
+        let [innerB, outerB, laneB, bottom] = [-Infinity, -Infinity, -Infinity, 0];
         for (const node of list) {
-            nodeCY.set(node.id, y + boxH.get(node.id) / 2);
-            y += boxH.get(node.id) + gap;
+            const h = boxH.get(node.id);
+            let y = h / 2;
+            if (outerSet.has(node.id)) {
+                y = Math.max(y, outerB + gap + h / 2, innerB + laneOf(node.id));
+                outerB = y + h / 2;
+                laneB = y + laneOf(node.id);
+            }
+            else {
+                y = Math.max(y, innerB + gap + h / 2, laneB + h / 2);
+                innerB = y + h / 2;
+            }
+            stackY.set(node.id, y);
+            bottom = Math.max(bottom, y + h / 2);
         }
+        return bottom;
     };
-    stack(inputs);
-    stack(outputs);
+    const stackH = [stack(inputs), stack(outputs)];
+    const totalH = Math.max(stackH[0], boxH.get(center.id), stackH[1]);
+    const nodeCY = new Map();
+    for (const [c, list] of [inputs, outputs].entries())
+        for (const node of list)
+            nodeCY.set(node.id, margin + (totalH - stackH[c]) / 2 + stackY.get(node.id));
     nodeCY.set(center.id, margin + totalH / 2);
     /*  determine column widths and left edge positions, with the two
-        inter-column channel widths sized by actual edge usage  */
-    const colWidth = [
-        inputs.reduce((a, node) => Math.max(a, boxW.get(node.id)), 0),
-        boxW.get(center.id),
-        outputs.reduce((a, node) => Math.max(a, boxW.get(node.id)), 0)
-    ];
+        inter-column channel widths sized by actual edge usage (a
+        wrapped column spans its two sub-columns and their gap, which
+        holds the arities set back from the arrow heads at its outer
+        nodes, as the lanes between the inner nodes have no room)  */
+    const subWidth = (list, outer) => list.filter((node) => outerSet.has(node.id) === outer)
+        .reduce((a, node) => Math.max(a, boxW.get(node.id)), 0);
+    const outerW = [subWidth(inputs, true), subWidth(outputs, true)];
+    const wrapGap = edges.reduce((a, edge) => outerSet.has(edge.target) && edge.arity !== undefined ?
+        Math.max(a, ARITY_OFF + textWidth(edge.arity, FS_ARITY) + WRAP_PAD) : a, WRAP_GAP);
+    const sideW = (list, c) => subWidth(list, false) + (outerW[c] > 0 ? (c === 1 ? wrapGap : WRAP_GAP) + outerW[c] : 0);
+    const colWidth = [sideW(inputs, 0), boxW.get(center.id), sideW(outputs, 1)];
     const chanOf = (edge) => Math.min(colOf(edge.source), colOf(edge.target));
     const chanCnt = [
         edges.filter((edge) => chanOf(edge) === 0).length,
@@ -158,14 +203,15 @@ export const render = async (graph, config, level = {}) => {
         colLX.push(x);
         x += colWidth[c] + (c < 2 ? chanW[c] : 0);
     }
-    /*  place the nodes within their column: input nodes right-aligned,
-        output nodes left-aligned, and the center node centered  */
+    /*  place the nodes within their (sub-)column: input nodes
+        right-aligned, output nodes left-aligned, and the center node
+        centered  */
     const cx = (id) => {
         const c = colOf(id);
         if (c === 0)
-            return colLX[0] + colWidth[0] - boxW.get(id) / 2;
+            return colLX[0] + (outerSet.has(id) ? outerW[0] : colWidth[0]) - boxW.get(id) / 2;
         else if (c === 2)
-            return colLX[2] + boxW.get(id) / 2;
+            return colLX[2] + (outerSet.has(id) ? colWidth[2] - outerW[1] : 0) + boxW.get(id) / 2;
         else
             return colLX[1] + colWidth[1] / 2;
     };