sfn-diagram 1.0.0 → 1.1.1

package/dist/cli.js

@@ -1346,6 +1346,53 @@ var DagreLayout = class {
 	}
 };
 //#endregion
+//#region src/utils/textMeasure.ts
+/**
+* Per-character text width estimation for proportional fonts.
+*
+* Tuned for Arial / Helvetica / system sans-serif — the default font
+* family used by both built-in themes. Characters are bucketed into
+* width classes based on measured glyph advance widths in Arial.
+* Unknown characters fall through to the NORMAL class (0.55).
+*/
+/** Narrow glyphs: i, l, 1, punctuation */
+const NARROW = .3;
+/** Medium-narrow glyphs: f, j, t, r, brackets */
+const MEDIUM_NARROW = .4;
+/** Most lowercase letters and digits */
+const NORMAL = .55;
+/** Most uppercase letters */
+const WIDE = .65;
+/** Extra-wide glyphs: M, W, m, w, @ */
+const EXTRA_WIDE = .78;
+/** Space character */
+const SPACE = .28;
+/** Lookup table: character → width multiplier relative to fontSize. */
+const CHAR_WIDTHS = {};
+for (const ch of "iIl1|!.:;,'\"") CHAR_WIDTHS[ch] = NARROW;
+for (const ch of "fjtr()[]{}/-") CHAR_WIDTHS[ch] = MEDIUM_NARROW;
+for (const ch of "mwMW@%") CHAR_WIDTHS[ch] = EXTRA_WIDE;
+for (let code = 65; code <= 90; code++) {
+	const ch = String.fromCharCode(code);
+	if (!(ch in CHAR_WIDTHS)) CHAR_WIDTHS[ch] = WIDE;
+}
+CHAR_WIDTHS[" "] = SPACE;
+/**
+* Estimate the rendered width of a string using per-character width classes.
+* More accurate than a flat per-character average because it accounts for the
+* significant width variance between narrow (i, l) and wide (M, W) glyphs
+* in proportional fonts.
+*
+* @param text - The string to measure
+* @param fontSize - Font size in pixels
+* @returns Estimated width in pixels
+*/
+function estimateTextWidth(text, fontSize) {
+	let width = 0;
+	for (let i = 0; i < text.length; i++) width += (CHAR_WIDTHS[text[i]] ?? NORMAL) * fontSize;
+	return width;
+}
+//#endregion
 //#region src/renderers/svgBuilder.ts
 /**
 * Escape a string for use as a double-quoted HTML attribute value.
@@ -1734,10 +1781,9 @@ var SvgRenderer = class {
 	*/
 	calculateLabelDimensions(label) {
 		const fontSize = this.theme.fontSize - 2;
-		const avgCharWidth = fontSize * .6;
 		const padding = 8;
 		const verticalPadding = 4;
-		const width = label.length * avgCharWidth + padding * 2;
+		const width = estimateTextWidth(label, fontSize) + padding * 2;
 		return {
 			height: fontSize + verticalPadding * 2,
 			width

package/dist/index.cjs

@@ -1161,6 +1161,53 @@ var DagreLayout = class {
 	}
 };
 //#endregion
+//#region src/utils/textMeasure.ts
+/**
+* Per-character text width estimation for proportional fonts.
+*
+* Tuned for Arial / Helvetica / system sans-serif — the default font
+* family used by both built-in themes. Characters are bucketed into
+* width classes based on measured glyph advance widths in Arial.
+* Unknown characters fall through to the NORMAL class (0.55).
+*/
+/** Narrow glyphs: i, l, 1, punctuation */
+const NARROW = .3;
+/** Medium-narrow glyphs: f, j, t, r, brackets */
+const MEDIUM_NARROW = .4;
+/** Most lowercase letters and digits */
+const NORMAL = .55;
+/** Most uppercase letters */
+const WIDE = .65;
+/** Extra-wide glyphs: M, W, m, w, @ */
+const EXTRA_WIDE = .78;
+/** Space character */
+const SPACE = .28;
+/** Lookup table: character → width multiplier relative to fontSize. */
+const CHAR_WIDTHS = {};
+for (const ch of "iIl1|!.:;,'\"") CHAR_WIDTHS[ch] = NARROW;
+for (const ch of "fjtr()[]{}/-") CHAR_WIDTHS[ch] = MEDIUM_NARROW;
+for (const ch of "mwMW@%") CHAR_WIDTHS[ch] = EXTRA_WIDE;
+for (let code = 65; code <= 90; code++) {
+	const ch = String.fromCharCode(code);
+	if (!(ch in CHAR_WIDTHS)) CHAR_WIDTHS[ch] = WIDE;
+}
+CHAR_WIDTHS[" "] = SPACE;
+/**
+* Estimate the rendered width of a string using per-character width classes.
+* More accurate than a flat per-character average because it accounts for the
+* significant width variance between narrow (i, l) and wide (M, W) glyphs
+* in proportional fonts.
+*
+* @param text - The string to measure
+* @param fontSize - Font size in pixels
+* @returns Estimated width in pixels
+*/
+function estimateTextWidth(text, fontSize) {
+	let width = 0;
+	for (let i = 0; i < text.length; i++) width += (CHAR_WIDTHS[text[i]] ?? NORMAL) * fontSize;
+	return width;
+}
+//#endregion
 //#region src/renderers/svgBuilder.ts
 /**
 * Escape a string for use as a double-quoted HTML attribute value.
@@ -1549,10 +1596,9 @@ var SvgRenderer = class {
 	*/
 	calculateLabelDimensions(label) {
 		const fontSize = this.theme.fontSize - 2;
-		const avgCharWidth = fontSize * .6;
 		const padding = 8;
 		const verticalPadding = 4;
-		const width = label.length * avgCharWidth + padding * 2;
+		const width = estimateTextWidth(label, fontSize) + padding * 2;
 		return {
 			height: fontSize + verticalPadding * 2,
 			width

package/dist/index.js

@@ -1137,6 +1137,53 @@ var DagreLayout = class {
 	}
 };
 //#endregion
+//#region src/utils/textMeasure.ts
+/**
+* Per-character text width estimation for proportional fonts.
+*
+* Tuned for Arial / Helvetica / system sans-serif — the default font
+* family used by both built-in themes. Characters are bucketed into
+* width classes based on measured glyph advance widths in Arial.
+* Unknown characters fall through to the NORMAL class (0.55).
+*/
+/** Narrow glyphs: i, l, 1, punctuation */
+const NARROW = .3;
+/** Medium-narrow glyphs: f, j, t, r, brackets */
+const MEDIUM_NARROW = .4;
+/** Most lowercase letters and digits */
+const NORMAL = .55;
+/** Most uppercase letters */
+const WIDE = .65;
+/** Extra-wide glyphs: M, W, m, w, @ */
+const EXTRA_WIDE = .78;
+/** Space character */
+const SPACE = .28;
+/** Lookup table: character → width multiplier relative to fontSize. */
+const CHAR_WIDTHS = {};
+for (const ch of "iIl1|!.:;,'\"") CHAR_WIDTHS[ch] = NARROW;
+for (const ch of "fjtr()[]{}/-") CHAR_WIDTHS[ch] = MEDIUM_NARROW;
+for (const ch of "mwMW@%") CHAR_WIDTHS[ch] = EXTRA_WIDE;
+for (let code = 65; code <= 90; code++) {
+	const ch = String.fromCharCode(code);
+	if (!(ch in CHAR_WIDTHS)) CHAR_WIDTHS[ch] = WIDE;
+}
+CHAR_WIDTHS[" "] = SPACE;
+/**
+* Estimate the rendered width of a string using per-character width classes.
+* More accurate than a flat per-character average because it accounts for the
+* significant width variance between narrow (i, l) and wide (M, W) glyphs
+* in proportional fonts.
+*
+* @param text - The string to measure
+* @param fontSize - Font size in pixels
+* @returns Estimated width in pixels
+*/
+function estimateTextWidth(text, fontSize) {
+	let width = 0;
+	for (let i = 0; i < text.length; i++) width += (CHAR_WIDTHS[text[i]] ?? NORMAL) * fontSize;
+	return width;
+}
+//#endregion
 //#region src/renderers/svgBuilder.ts
 /**
 * Escape a string for use as a double-quoted HTML attribute value.
@@ -1525,10 +1572,9 @@ var SvgRenderer = class {
 	*/
 	calculateLabelDimensions(label) {
 		const fontSize = this.theme.fontSize - 2;
-		const avgCharWidth = fontSize * .6;
 		const padding = 8;
 		const verticalPadding = 4;
-		const width = label.length * avgCharWidth + padding * 2;
+		const width = estimateTextWidth(label, fontSize) + padding * 2;
 		return {
 			height: fontSize + verticalPadding * 2,
 			width

package/dist/png.cjs

@@ -1161,6 +1161,53 @@ var DagreLayout = class {
 	}
 };
 //#endregion
+//#region src/utils/textMeasure.ts
+/**
+* Per-character text width estimation for proportional fonts.
+*
+* Tuned for Arial / Helvetica / system sans-serif — the default font
+* family used by both built-in themes. Characters are bucketed into
+* width classes based on measured glyph advance widths in Arial.
+* Unknown characters fall through to the NORMAL class (0.55).
+*/
+/** Narrow glyphs: i, l, 1, punctuation */
+const NARROW = .3;
+/** Medium-narrow glyphs: f, j, t, r, brackets */
+const MEDIUM_NARROW = .4;
+/** Most lowercase letters and digits */
+const NORMAL = .55;
+/** Most uppercase letters */
+const WIDE = .65;
+/** Extra-wide glyphs: M, W, m, w, @ */
+const EXTRA_WIDE = .78;
+/** Space character */
+const SPACE = .28;
+/** Lookup table: character → width multiplier relative to fontSize. */
+const CHAR_WIDTHS = {};
+for (const ch of "iIl1|!.:;,'\"") CHAR_WIDTHS[ch] = NARROW;
+for (const ch of "fjtr()[]{}/-") CHAR_WIDTHS[ch] = MEDIUM_NARROW;
+for (const ch of "mwMW@%") CHAR_WIDTHS[ch] = EXTRA_WIDE;
+for (let code = 65; code <= 90; code++) {
+	const ch = String.fromCharCode(code);
+	if (!(ch in CHAR_WIDTHS)) CHAR_WIDTHS[ch] = WIDE;
+}
+CHAR_WIDTHS[" "] = SPACE;
+/**
+* Estimate the rendered width of a string using per-character width classes.
+* More accurate than a flat per-character average because it accounts for the
+* significant width variance between narrow (i, l) and wide (M, W) glyphs
+* in proportional fonts.
+*
+* @param text - The string to measure
+* @param fontSize - Font size in pixels
+* @returns Estimated width in pixels
+*/
+function estimateTextWidth(text, fontSize) {
+	let width = 0;
+	for (let i = 0; i < text.length; i++) width += (CHAR_WIDTHS[text[i]] ?? NORMAL) * fontSize;
+	return width;
+}
+//#endregion
 //#region src/renderers/svgBuilder.ts
 /**
 * Escape a string for use as a double-quoted HTML attribute value.
@@ -1549,10 +1596,9 @@ var SvgRenderer = class {
 	*/
 	calculateLabelDimensions(label) {
 		const fontSize = this.theme.fontSize - 2;
-		const avgCharWidth = fontSize * .6;
 		const padding = 8;
 		const verticalPadding = 4;
-		const width = label.length * avgCharWidth + padding * 2;
+		const width = estimateTextWidth(label, fontSize) + padding * 2;
 		return {
 			height: fontSize + verticalPadding * 2,
 			width

package/dist/png.js

@@ -1137,6 +1137,53 @@ var DagreLayout = class {
 	}
 };
 //#endregion
+//#region src/utils/textMeasure.ts
+/**
+* Per-character text width estimation for proportional fonts.
+*
+* Tuned for Arial / Helvetica / system sans-serif — the default font
+* family used by both built-in themes. Characters are bucketed into
+* width classes based on measured glyph advance widths in Arial.
+* Unknown characters fall through to the NORMAL class (0.55).
+*/
+/** Narrow glyphs: i, l, 1, punctuation */
+const NARROW = .3;
+/** Medium-narrow glyphs: f, j, t, r, brackets */
+const MEDIUM_NARROW = .4;
+/** Most lowercase letters and digits */
+const NORMAL = .55;
+/** Most uppercase letters */
+const WIDE = .65;
+/** Extra-wide glyphs: M, W, m, w, @ */
+const EXTRA_WIDE = .78;
+/** Space character */
+const SPACE = .28;
+/** Lookup table: character → width multiplier relative to fontSize. */
+const CHAR_WIDTHS = {};
+for (const ch of "iIl1|!.:;,'\"") CHAR_WIDTHS[ch] = NARROW;
+for (const ch of "fjtr()[]{}/-") CHAR_WIDTHS[ch] = MEDIUM_NARROW;
+for (const ch of "mwMW@%") CHAR_WIDTHS[ch] = EXTRA_WIDE;
+for (let code = 65; code <= 90; code++) {
+	const ch = String.fromCharCode(code);
+	if (!(ch in CHAR_WIDTHS)) CHAR_WIDTHS[ch] = WIDE;
+}
+CHAR_WIDTHS[" "] = SPACE;
+/**
+* Estimate the rendered width of a string using per-character width classes.
+* More accurate than a flat per-character average because it accounts for the
+* significant width variance between narrow (i, l) and wide (M, W) glyphs
+* in proportional fonts.
+*
+* @param text - The string to measure
+* @param fontSize - Font size in pixels
+* @returns Estimated width in pixels
+*/
+function estimateTextWidth(text, fontSize) {
+	let width = 0;
+	for (let i = 0; i < text.length; i++) width += (CHAR_WIDTHS[text[i]] ?? NORMAL) * fontSize;
+	return width;
+}
+//#endregion
 //#region src/renderers/svgBuilder.ts
 /**
 * Escape a string for use as a double-quoted HTML attribute value.
@@ -1525,10 +1572,9 @@ var SvgRenderer = class {
 	*/
 	calculateLabelDimensions(label) {
 		const fontSize = this.theme.fontSize - 2;
-		const avgCharWidth = fontSize * .6;
 		const padding = 8;
 		const verticalPadding = 4;
-		const width = label.length * avgCharWidth + padding * 2;
+		const width = estimateTextWidth(label, fontSize) + padding * 2;
 		return {
 			height: fontSize + verticalPadding * 2,
 			width

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfn-diagram",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Generate SVG, Mermaid, HTML, and PNG diagrams from AWS Step Functions ASL definitions, CloudFormation/CDK templates, or live AWS state machines",
   "type": "module",
   "packageManager": "pnpm@9.15.9",
@@ -153,20 +153,22 @@
   "pnpm": {
     "overrides": {
       "basic-ftp": ">=5.3.1",
-      "brace-expansion": ">=2.0.3",
+      "brace-expansion": ">=5.0.7",
       "defu": ">=6.1.5",
-      "dompurify": ">=3.4.0",
+      "dompurify": ">=3.4.12",
       "esbuild": ">=0.28.1",
+      "fast-uri": ">=3.1.3 <4.0.0",
       "fast-xml-builder": ">=1.1.7",
       "fast-xml-parser": ">=5.7.0",
       "flatted": ">=3.4.2",
       "handlebars": ">=4.7.9",
       "ip-address": ">=10.1.1",
-      "js-yaml": ">=4.2.0 <5.0.0",
+      "js-yaml": ">=4.3.0 <5.0.0",
+      "linkify-it": ">=5.0.2 <6.0.0",
       "lodash-es": ">=4.18.0",
       "minimatch": ">=9.0.7",
       "picomatch": ">=4.0.4",
-      "postcss": ">=8.5.10",
+      "postcss": ">=8.5.18 <9.0.0",
       "rollup": ">=4.59.0",
       "undici": ">=6.27.0",
       "vite": ">=8.0.16",