@adecore/diagram 0.0.1 → 0.17.0-beta.1

package/dist/route.js

@@ -0,0 +1,206 @@
+export const TRACK_GAP = 12;
+/* Space between the lane of labels and the first track. */
+const LANE_GAP = 12;
+/* Space between two labels side by side in a lane. */
+const LABEL_GAP = 8;
+/* How far a label keeps from the line it belongs to. */
+const LABEL_OFFSET = 4;
+export const MIN_CHANNEL = 64;
+/* Two horizontal lines closer than this read as one. */
+const COLLINEAR = 4;
+/* Two vertical ranges closer than this need tracks of their own. */
+const RANGE_CLEARANCE = 8;
+function overlaps(left, right) {
+    return left.x < right.x + right.w && right.x < left.x + left.w && left.y < right.y + right.h && right.y < left.y + left.h;
+}
+function inflate(rect, by) {
+    return { x: rect.x - by, y: rect.y - by, w: rect.w + by * 2, h: rect.h + by * 2 };
+}
+/*
+ * How badly two orthogonal polylines get in each other's way: a crossing counts once, a stretch where
+ * they run on top of each other counts four times, since that is the one a reader cannot follow.
+ */
+export function conflictsOf(left, right) {
+    let total = 0;
+    for (let i = 1; i < left.length; i++) {
+        const a0 = left[i - 1];
+        const a1 = left[i];
+        for (let j = 1; j < right.length; j++) {
+            const b0 = right[j - 1];
+            const b1 = right[j];
+            const aFlat = a0.y === a1.y;
+            const bFlat = b0.y === b1.y;
+            if (aFlat !== bFlat) {
+                const [h0, h1, v0, v1] = aFlat ? [a0, a1, b0, b1] : [b0, b1, a0, a1];
+                if (v0.x > Math.min(h0.x, h1.x) && v0.x < Math.max(h0.x, h1.x) && h0.y > Math.min(v0.y, v1.y) && h0.y < Math.max(v0.y, v1.y)) {
+                    total += 1;
+                }
+                continue;
+            }
+            const [along0, along1, other0, other1, gap] = aFlat
+                ? [Math.min(a0.x, a1.x), Math.max(a0.x, a1.x), Math.min(b0.x, b1.x), Math.max(b0.x, b1.x), Math.abs(a0.y - b0.y)]
+                : [Math.min(a0.y, a1.y), Math.max(a0.y, a1.y), Math.min(b0.y, b1.y), Math.max(b0.y, b1.y), Math.abs(a0.x - b0.x)];
+            if (gap < COLLINEAR && Math.min(along1, other1) > Math.max(along0, other0)) {
+                total += 4;
+            }
+        }
+    }
+    return total;
+}
+/* A hop drawn on a track in a channel of unit tracks, only to compare two orders of the tracks. */
+function sketchOf(hop, track) {
+    return [
+        { x: 0, y: hop.ya },
+        { x: track * TRACK_GAP, y: hop.ya },
+        { x: track * TRACK_GAP, y: hop.yb },
+        { x: TRACK_GAP * 3, y: hop.yb }
+    ];
+}
+/*
+ * The inside of one channel between two layers. Every hop that changes place across the flow gets a
+ * vertical track of its own where its range meets another's, in the order that crosses the fewest
+ * lines; labels go in a lane before the tracks, beside the line their hop leaves on, and the lane
+ * grows a column where two labels would otherwise cover each other.
+ */
+export function routeChannel(input) {
+    const vertical = input.hops.filter((hop) => hop.ya !== hop.yb);
+    const count = vertical.length;
+    const near = (left, right) => Math.min(Math.max(left.ya, left.yb), Math.max(right.ya, right.yb)) + RANGE_CLEARANCE >
+        Math.max(Math.min(left.ya, left.yb), Math.min(right.ya, right.yb));
+    // cost[i * count + j]: how much i and j conflict when i's track is left of j's.
+    const cost = new Array(count * count).fill(0);
+    for (let i = 0; i < count; i++) {
+        for (let j = 0; j < count; j++) {
+            if (i !== j && near(vertical[i], vertical[j])) {
+                cost[i * count + j] = conflictsOf(sketchOf(vertical[i], 1), sketchOf(vertical[j], 2));
+            }
+        }
+    }
+    const score = vertical.map((_, i) => {
+        let sum = 0;
+        for (let j = 0; j < count; j++) {
+            sum += cost[i * count + j] - cost[j * count + i];
+        }
+        return sum;
+    });
+    const order = vertical.map((_, i) => i).sort((left, right) => score[left] - score[right] || left - right);
+    for (let pass = 0; pass < count; pass++) {
+        let swapped = false;
+        for (let p = 0; p + 1 < count; p++) {
+            const left = order[p];
+            const right = order[p + 1];
+            if (cost[right * count + left] < cost[left * count + right]) {
+                order[p] = right;
+                order[p + 1] = left;
+                swapped = true;
+            }
+        }
+        if (!swapped) {
+            break;
+        }
+    }
+    const track = new Array(count).fill(0);
+    let tracks = 0;
+    order.forEach((index, p) => {
+        let at = 0;
+        for (let q = 0; q < p; q++) {
+            const other = order[q];
+            if (near(vertical[other], vertical[index])) {
+                at = Math.max(at, track[other] + 1);
+            }
+        }
+        track[index] = at;
+        tracks = Math.max(tracks, at + 1);
+    });
+    // Labels are placed in two frames before the width is known: the lane before the tracks, and the tracks with the lane after them.
+    const slotAlong = input.labels.reduce((widest, label) => Math.max(widest, label.along), 0);
+    const slotStep = slotAlong + LABEL_GAP;
+    const tracksSpan = Math.max(0, tracks - 1) * TRACK_GAP;
+    const afterStart = tracks > 0 ? tracksSpan + LANE_GAP : 0;
+    const trackOf = new Map();
+    vertical.forEach((hop, index) => trackOf.set(hop.hop, track[index] * TRACK_GAP));
+    const placed = [];
+    const chosen = new Map();
+    let slotsBefore = input.labels.length > 0 ? 1 : 0;
+    let slotsAfter = 0;
+    const touches = (x0, x1, y0, y1, rect) => x1 >= rect.x - 3 && x0 <= rect.x + rect.w + 3 && y1 >= rect.y - 3 && y0 <= rect.y + rect.h + 3;
+    const blocked = (zone, rect) => placed.some((other) => other.zone === zone && overlaps(inflate(other.rect, 4), rect)) ||
+        input.obstacles.some((obstacle) => obstacle.y < rect.y + rect.h && rect.y < obstacle.y + obstacle.h);
+    const onLine = (zone, rect, label) => input.hops.some((hop) => {
+        if (zone === 'before') {
+            return hop.hop !== label.hop && hop.ya > rect.y - 3 && hop.ya < rect.y + rect.h + 3;
+        }
+        const own = hop.hop === label.hop;
+        const at = trackOf.get(hop.hop);
+        if (at === undefined) {
+            return !own && touches(-Infinity, Infinity, hop.ya, hop.ya, rect);
+        }
+        return ((!own && touches(-Infinity, at, hop.ya, hop.ya, rect)) ||
+            (!own && touches(at, at, Math.min(hop.ya, hop.yb), Math.max(hop.ya, hop.yb), rect)) ||
+            touches(at, Infinity, hop.yb, hop.yb, rect));
+    });
+    const inLane = (label, x, y, above) => ({
+        x: x + Math.floor((slotAlong - label.along) / 2),
+        y: above ? y - LABEL_OFFSET - label.across : y + LABEL_OFFSET,
+        w: label.along,
+        h: label.across
+    });
+    for (const label of input.labels) {
+        const hop = input.hops.find((candidate) => candidate.hop === label.hop);
+        const before = (slot) => [true, false].map((above) => ({ zone: 'before', rect: inLane(label, slot * slotStep, label.y, above) }));
+        const after = (slot) => hop ? [true, false].map((above) => ({ zone: 'middle', rect: inLane(label, afterStart + slot * slotStep, hop.yb, above) })) : [];
+        const at = trackOf.get(label.hop);
+        const beside = hop && at !== undefined
+            ? [
+                {
+                    zone: 'middle',
+                    rect: { x: at + LABEL_OFFSET, y: Math.round((hop.ya + hop.yb) / 2 - label.across / 2), w: label.along, h: label.across }
+                }
+            ]
+            : [];
+        const existing = [
+            ...Array.from({ length: slotsBefore }, (_, slot) => before(slot)).flat(),
+            ...beside,
+            ...Array.from({ length: slotsAfter }, (_, slot) => after(slot)).flat()
+        ];
+        const clear = (candidate) => !blocked(candidate.zone, candidate.rect) && !onLine(candidate.zone, candidate.rect, label);
+        let choice = existing.find(clear);
+        if (!choice) {
+            choice = before(slotsBefore).find(clear);
+            if (choice) {
+                slotsBefore += 1;
+            }
+        }
+        if (!choice) {
+            choice = after(slotsAfter).find(clear);
+            if (choice) {
+                slotsAfter += 1;
+            }
+        }
+        // A place beside no line may not exist, since every line in a lane runs its whole width; a free place is enough.
+        choice ??= existing.find((candidate) => !blocked(candidate.zone, candidate.rect));
+        if (!choice) {
+            choice = before(slotsBefore)[0];
+            slotsBefore += 1;
+        }
+        placed.push(choice);
+        chosen.set(label.edge, choice);
+    }
+    // Only what was put in it: a channel whose labels all found room beside their tracks keeps no lane.
+    const laneWidth = Math.max(0, ...placed.filter((entry) => entry.zone === 'before').map((entry) => entry.rect.x + entry.rect.w));
+    const middleLabels = placed.filter((entry) => entry.zone === 'middle');
+    const hasMiddle = tracks > 0 || middleLabels.length > 0;
+    const middleWidth = Math.max(tracksSpan, slotsAfter > 0 ? afterStart + slotsAfter * slotStep - LABEL_GAP : 0, ...middleLabels.map((entry) => entry.rect.x + entry.rect.w));
+    const laneGap = laneWidth > 0 && hasMiddle ? LANE_GAP : 0;
+    const needed = input.clearBefore + laneWidth + laneGap + (hasMiddle ? middleWidth : 0) + input.clearAfter;
+    const width = Math.max(MIN_CHANNEL, needed);
+    const laneStart = input.start + input.clearBefore;
+    const middleStart = laneStart + laneWidth + laneGap + Math.floor((width - needed) / 2);
+    const trackX = new Map();
+    trackOf.forEach((x, hop) => trackX.set(hop, middleStart + x));
+    const labels = new Map();
+    chosen.forEach((entry, edge) => {
+        labels.set(edge, { ...entry.rect, x: entry.rect.x + (entry.zone === 'before' ? laneStart : middleStart) });
+    });
+    return { width, trackX, labels };
+}

package/dist/shapes.d.ts

@@ -0,0 +1,20 @@
+import type { DiagramEdgeStyle, DiagramShape } from './protocol.ts';
+import { type EdgeLabelBox, type NodeBox, type Point, type Rect } from './layout.ts';
+export interface ShapePaths {
+    body: string;
+    detail: string | null;
+}
+export declare function shapePaths(shape: DiagramShape | undefined, box: Rect): ShapePaths;
+export interface TextLine {
+    text: string;
+    x: number;
+    y: number;
+    size: number;
+    bold: boolean;
+    muted: boolean;
+}
+export declare function textLinesOf(box: Pick<NodeBox, 'x' | 'y' | 'w' | 'h' | 'label' | 'sub'>, shape?: DiagramShape): TextLine[];
+export declare function edgeLabelLinesOf(label: EdgeLabelBox): TextLine[];
+export declare function edgePath(points: readonly Point[]): string;
+export declare function arrowHeadPath(points: readonly Point[]): string;
+export declare function dashOf(style: DiagramEdgeStyle | undefined): string | null;

package/dist/shapes.js

@@ -0,0 +1,95 @@
+import { CYLINDER_LID, EDGE_LABEL_PADDING } from './layout.js';
+import { LABEL_LINE, LABEL_SIZE, SUB_LINE, SUB_SIZE } from './text.js';
+const ROUND_RADIUS = 10;
+/* How deep the lid of a cylinder is, as a share of its height. */
+const LID_RATIO = 0.18;
+const HEAD_LENGTH = 10;
+const HEAD_WIDTH = 6;
+function roundedRect(box, radius) {
+    const r = Math.round(Math.min(radius, box.w / 2, box.h / 2));
+    const right = box.x + box.w;
+    const bottom = box.y + box.h;
+    return [
+        `M${box.x + r} ${box.y}`,
+        `H${right - r}`,
+        `A${r} ${r} 0 0 1 ${right} ${box.y + r}`,
+        `V${bottom - r}`,
+        `A${r} ${r} 0 0 1 ${right - r} ${bottom}`,
+        `H${box.x + r}`,
+        `A${r} ${r} 0 0 1 ${box.x} ${bottom - r}`,
+        `V${box.y + r}`,
+        `A${r} ${r} 0 0 1 ${box.x + r} ${box.y}`,
+        'Z'
+    ].join(' ');
+}
+export function shapePaths(shape, box) {
+    const right = box.x + box.w;
+    const bottom = box.y + box.h;
+    const middleX = Math.round(box.x + box.w / 2);
+    const middleY = Math.round(box.y + box.h / 2);
+    switch (shape ?? 'rect') {
+        case 'round':
+            return { body: roundedRect(box, ROUND_RADIUS), detail: null };
+        case 'pill':
+            return { body: roundedRect(box, box.h / 2), detail: null };
+        case 'diamond':
+            return { body: `M${middleX} ${box.y} L${right} ${middleY} L${middleX} ${bottom} L${box.x} ${middleY} Z`, detail: null };
+        case 'cylinder': {
+            const lid = Math.round(box.h * LID_RATIO);
+            const rx = Math.round(box.w / 2);
+            const ry = Math.round(lid / 2);
+            const top = box.y + ry;
+            const base = bottom - ry;
+            return {
+                body: `M${box.x} ${top} A${rx} ${ry} 0 0 1 ${right} ${top} V${base} A${rx} ${ry} 0 0 1 ${box.x} ${base} Z`,
+                detail: `M${box.x} ${top} A${rx} ${ry} 0 0 0 ${right} ${top}`
+            };
+        }
+        default:
+            return { body: `M${box.x} ${box.y} H${right} V${bottom} H${box.x} Z`, detail: null };
+    }
+}
+export function textLinesOf(box, shape) {
+    const x = Math.round(box.x + box.w / 2);
+    const height = box.label.length * LABEL_LINE + box.sub.length * SUB_LINE;
+    // The lid of a cylinder takes the top of the box, so its text sits below it.
+    const top = Math.round(box.y + (box.h - height) / 2) + (shape === 'cylinder' ? CYLINDER_LID / 2 : 0);
+    const label = box.label.map((text, index) => ({ text, x, y: top + index * LABEL_LINE + 14, size: LABEL_SIZE, bold: true, muted: false }));
+    const subTop = top + box.label.length * LABEL_LINE;
+    const sub = box.sub.map((text, index) => ({ text, x, y: subTop + index * SUB_LINE + 12, size: SUB_SIZE, bold: false, muted: true }));
+    return [...label, ...sub];
+}
+export function edgeLabelLinesOf(label) {
+    const x = Math.round(label.x + label.w / 2);
+    return label.lines.map((text, index) => ({
+        text,
+        x,
+        y: label.y + EDGE_LABEL_PADDING.y + index * SUB_LINE + 12,
+        size: SUB_SIZE,
+        bold: false,
+        muted: false
+    }));
+}
+export function edgePath(points) {
+    return points.map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x} ${point.y}`).join(' ');
+}
+export function arrowHeadPath(points) {
+    const tip = points.at(-1);
+    const before = points.at(-2) ?? tip;
+    const length = Math.hypot(tip.x - before.x, tip.y - before.y) || 1;
+    const ux = (tip.x - before.x) / length;
+    const uy = (tip.y - before.y) / length;
+    const baseX = tip.x - ux * HEAD_LENGTH;
+    const baseY = tip.y - uy * HEAD_LENGTH;
+    const round = Math.round;
+    return `M${tip.x} ${tip.y} L${round(baseX - uy * HEAD_WIDTH)} ${round(baseY + ux * HEAD_WIDTH)} L${round(baseX + uy * HEAD_WIDTH)} ${round(baseY - ux * HEAD_WIDTH)} Z`;
+}
+export function dashOf(style) {
+    if (style === 'dashed') {
+        return '8 6';
+    }
+    if (style === 'dotted') {
+        return '2 5';
+    }
+    return null;
+}

package/dist/svg.d.ts

@@ -0,0 +1,16 @@
+import type { DrawingColor } from '@adecore/drawing/protocol';
+import type { DiagramDocument } from './protocol.ts';
+import { type DiagramLayout } from './layout.ts';
+export interface DiagramSvgOptions {
+    palette?: Record<DrawingColor, string>;
+    paper?: Record<DrawingColor, string>;
+    background?: string | null;
+    margin?: number;
+    font?: string;
+    layout?: DiagramLayout;
+}
+export declare const DEFAULT_DIAGRAM_MARGIN = 32;
+export declare const DEFAULT_NODE_TONE: DrawingColor;
+export declare const DEFAULT_GROUP_TONE: DrawingColor;
+export declare const DEFAULT_EDGE_TONE: DrawingColor;
+export declare function toSvg(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups' | 'edges'>, options?: DiagramSvgOptions): string;

package/dist/svg.js

@@ -0,0 +1,67 @@
+import { DEFAULT_FONT_STACKS, DEFAULT_PALETTE, DEFAULT_PAPER } from '@adecore/drawing';
+import { GROUP_LABEL_BAND, layoutOf } from './layout.js';
+import { arrowHeadPath, dashOf, edgeLabelLinesOf, edgePath, shapePaths, textLinesOf } from './shapes.js';
+import { SUB_SIZE } from './text.js';
+export const DEFAULT_DIAGRAM_MARGIN = 32;
+/* What a node, a group and an edge wear when the file names no tone. */
+export const DEFAULT_NODE_TONE = 'ink';
+export const DEFAULT_GROUP_TONE = 'muted';
+export const DEFAULT_EDGE_TONE = 'muted';
+// XML has no way to write a control character other than tab and the line breaks, not even escaped.
+// oxlint-disable-next-line no-control-regex
+const NOT_XML = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uFFFE\uFFFF]/g;
+function escapeXml(value) {
+    return value.replace(NOT_XML, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
+}
+/*
+ * The whole diagram as one SVG string, for an export and for what the daemon hands an agent. The
+ * view in the app draws the same layout and the same paths as elements of its own, so the two only
+ * differ in where the colors come from.
+ */
+export function toSvg(document, options = {}) {
+    const palette = options.palette ?? DEFAULT_PALETTE;
+    const paper = options.paper ?? DEFAULT_PAPER;
+    const margin = options.margin ?? DEFAULT_DIAGRAM_MARGIN;
+    const font = escapeXml(options.font ?? DEFAULT_FONT_STACKS.sans);
+    const layout = options.layout ?? layoutOf(document);
+    const nodes = new Map(document.nodes.map((node) => [node.id, node]));
+    const groups = new Map(document.groups.map((group) => [group.id, group]));
+    const x = layout.bounds.x - margin;
+    const y = layout.bounds.y - margin;
+    const w = layout.bounds.w + margin * 2;
+    const h = layout.bounds.h + margin * 2;
+    const parts = [];
+    if (options.background) {
+        parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${options.background}"/>`);
+    }
+    for (const box of layout.groups) {
+        const group = groups.get(box.id);
+        const tone = palette[group.tone ?? DEFAULT_GROUP_TONE];
+        parts.push(`<rect x="${box.x}" y="${box.y}" width="${box.w}" height="${box.h}" rx="12" fill="none" stroke="${tone}" stroke-width="1" stroke-dasharray="6 4"/>`, `<text x="${box.labelBox.x}" y="${box.y + Math.round(GROUP_LABEL_BAND * 0.7)}" font-size="${SUB_SIZE}" font-weight="600" fill="${tone}">${escapeXml(group.label)}</text>`);
+    }
+    for (const route of layout.edges) {
+        const edge = document.edges[route.index];
+        const tone = palette[edge.tone ?? DEFAULT_EDGE_TONE];
+        const dash = dashOf(edge.style);
+        parts.push(`<path d="${edgePath(route.points)}" fill="none" stroke="${tone}" stroke-width="2" stroke-linejoin="round"${dash ? ` stroke-dasharray="${dash}"` : ''}/>`, `<path d="${arrowHeadPath(route.points)}" fill="${tone}"/>`);
+        if (route.label) {
+            const halo = options.background ? ` stroke="${options.background}" stroke-width="4" paint-order="stroke"` : '';
+            for (const line of edgeLabelLinesOf(route.label)) {
+                parts.push(`<text x="${line.x}" y="${line.y}" font-size="${line.size}" text-anchor="middle" fill="${tone}"${halo}>${escapeXml(line.text)}</text>`);
+            }
+        }
+    }
+    for (const box of layout.nodes) {
+        const node = nodes.get(box.id);
+        const tone = node.tone ?? DEFAULT_NODE_TONE;
+        const paths = shapePaths(node.shape, box);
+        parts.push(`<path d="${paths.body}" fill="${paper[tone]}" stroke="${palette[tone]}" stroke-width="2"/>`);
+        if (paths.detail) {
+            parts.push(`<path d="${paths.detail}" fill="none" stroke="${palette[tone]}" stroke-width="2"/>`);
+        }
+        for (const line of textLinesOf(box, node.shape)) {
+            parts.push(`<text x="${line.x}" y="${line.y}" font-size="${line.size}"${line.bold ? ' font-weight="600"' : ''} text-anchor="middle" fill="${line.muted ? palette.muted : palette.ink}">${escapeXml(line.text)}</text>`);
+        }
+    }
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="${x} ${y} ${w} ${h}" font-family="${font}">${parts.join('')}</svg>`;
+}

package/dist/text.d.ts

@@ -0,0 +1,7 @@
+export declare const LABEL_SIZE = 14;
+export declare const SUB_SIZE = 12;
+export declare const LABEL_LINE = 18;
+export declare const SUB_LINE = 16;
+export declare function estimateTextWidth(text: string, size: number, bold?: boolean): number;
+export declare function wrapText(text: string, size: number, bold: boolean, maxWidth: number): string[];
+export declare function widestLine(lines: readonly string[], size: number, bold: boolean): number;

package/dist/text.js

@@ -0,0 +1,86 @@
+export const LABEL_SIZE = 14;
+export const SUB_SIZE = 12;
+export const LABEL_LINE = 18;
+export const SUB_LINE = 16;
+const NARROW = new Set([..."ijl.,:;!|'"]);
+const SEMI = new Set([...' ftrI-()[]{}/\\`"*']);
+const WIDE_LOWER = new Set([...'mw']);
+const WIDE = new Set([...'MW@%&']);
+/*
+ * The width of a glyph as a share of the font size, per class of character. Measured in Chromium
+ * for the system face (SF on macOS) and Helvetica as a stand-in for Inter and Segoe UI, taking the
+ * wider of the two at weight 600, so an estimate errs towards a box that is a little too wide.
+ */
+function ratioOf(char) {
+    if (NARROW.has(char)) {
+        return 0.3;
+    }
+    if (SEMI.has(char)) {
+        return 0.4;
+    }
+    if (WIDE_LOWER.has(char)) {
+        return 0.86;
+    }
+    if (WIDE.has(char)) {
+        return 1;
+    }
+    if (char >= 'a' && char <= 'z') {
+        return 0.6;
+    }
+    if (char >= 'A' && char <= 'Z') {
+        return 0.74;
+    }
+    if (char >= '0' && char <= '9') {
+        return 0.64;
+    }
+    // CJK and everything after it is set on a full em; any other letter is taken as a wide Latin one.
+    return char.codePointAt(0) >= 0x2e80 ? 1 : 0.64;
+}
+const REGULAR = 0.94;
+/* No DOM in this package, so text is estimated rather than measured, the same way on every machine. */
+export function estimateTextWidth(text, size, bold = false) {
+    let units = 0;
+    for (const char of text) {
+        units += ratioOf(char);
+    }
+    return Math.ceil(units * size * (bold ? 1 : REGULAR));
+}
+function breakWord(word, size, bold, maxWidth) {
+    const pieces = [];
+    let piece = '';
+    for (const char of word) {
+        if (piece !== '' && estimateTextWidth(piece + char, size, bold) > maxWidth) {
+            pieces.push(piece);
+            piece = '';
+        }
+        piece += char;
+    }
+    pieces.push(piece);
+    return pieces;
+}
+export function wrapText(text, size, bold, maxWidth) {
+    const words = text
+        .trim()
+        .split(/\s+/)
+        .filter((word) => word !== '');
+    const lines = [];
+    let line = '';
+    for (const word of words) {
+        const pieces = estimateTextWidth(word, size, bold) > maxWidth ? breakWord(word, size, bold, maxWidth) : [word];
+        for (const piece of pieces) {
+            const joined = line === '' ? piece : `${line} ${piece}`;
+            if (line !== '' && estimateTextWidth(joined, size, bold) > maxWidth) {
+                lines.push(line);
+                line = piece;
+            }
+            else {
+                line = joined;
+            }
+        }
+    }
+    lines.push(line);
+    return lines;
+}
+export function widestLine(lines, size, bold) {
+    return lines.reduce((widest, line) => Math.max(widest, estimateTextWidth(line, size, bold)), 0);
+}

package/package.json

@@ -1,11 +1,50 @@
 {
   "name": "@adecore/diagram",
-  "version": "0.0.1",
-  "description": "Placeholder for the first release.",
+  "version": "0.17.0-beta.1",
+  "description": "Directed graph schemas, layered layout, SVG export and reading order.",
   "license": "FSL-1.1-MIT",
+  "author": "Bas Milius",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/basmilius/adecore.git",
     "directory": "packages/diagram"
+  },
+  "bugs": {
+    "url": "https://github.com/basmilius/adecore/issues"
+  },
+  "homepage": "https://adecore.dev/diagram/",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/fixtures"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./protocol": {
+      "source": "./src/protocol.ts",
+      "types": "./dist/protocol.d.ts",
+      "default": "./dist/protocol.js"
+    }
+  },
+  "scripts": {
+    "build": "bun scripts/build.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test --conditions=source"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.4.2",
+    "@types/node": "^24.13.6",
+    "typescript": "^7.0.2"
+  },
+  "dependencies": {
+    "zod": "^4.6.5",
+    "@adecore/drawing": "0.17.0-beta.1"
   }
 }