@nowline/renderer 0.2.0

package/dist/svg/xml.js

@@ -0,0 +1,54 @@
+// Minimal, dependency-free XML string helpers. Every output SVG string runs
+// through here; characters are escaped consistently so identical inputs
+// produce identical bytes.
+const AMP = /&/g;
+const LT = /</g;
+const GT = />/g;
+const QUOTE = /"/g;
+const APOS = /'/g;
+export function escText(value) {
+    return value.replace(AMP, '&amp;').replace(LT, '&lt;').replace(GT, '&gt;');
+}
+export function escAttr(value) {
+    return value
+        .replace(AMP, '&amp;')
+        .replace(LT, '&lt;')
+        .replace(GT, '&gt;')
+        .replace(QUOTE, '&quot;')
+        .replace(APOS, '&#39;');
+}
+export function attrs(values) {
+    const keys = Object.keys(values).sort();
+    const parts = [];
+    for (const key of keys) {
+        const v = values[key];
+        if (v === null || v === undefined || v === false)
+            continue;
+        if (v === true) {
+            parts.push(key);
+        }
+        else {
+            parts.push(`${key}="${escAttr(String(v))}"`);
+        }
+    }
+    return parts.length ? ` ${parts.join(' ')}` : '';
+}
+export function tag(name, attributes, inner) {
+    if (inner === undefined || inner === '') {
+        return `<${name}${attrs(attributes)}/>`;
+    }
+    return `<${name}${attrs(attributes)}>${inner}</${name}>`;
+}
+export function textTag(attributes, content) {
+    return `<text${attrs(attributes)}>${escText(content)}</text>`;
+}
+// Fixed-precision number formatter — avoids locale-dependent toFixed quirks
+// and guarantees deterministic output across Node versions.
+export function num(n) {
+    if (!Number.isFinite(n))
+        return '0';
+    if (Number.isInteger(n))
+        return n.toString();
+    return (Math.round(n * 100) / 100).toString();
+}
+//# sourceMappingURL=xml.js.map

package/dist/svg/xml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xml.js","sourceRoot":"","sources":["../../src/svg/xml.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,wEAAwE;AACxE,2BAA2B;AAE3B,MAAM,GAAG,GAAG,IAAI,CAAC;AACjB,MAAM,EAAE,GAAG,IAAI,CAAC;AAChB,MAAM,EAAE,GAAG,IAAI,CAAC;AAChB,MAAM,KAAK,GAAG,IAAI,CAAC;AACnB,MAAM,IAAI,GAAG,IAAI,CAAC;AAElB,MAAM,UAAU,OAAO,CAAC,KAAa;IACjC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;AAC/E,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,KAAa;IACjC,OAAO,KAAK;SACP,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC;SACrB,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC;SACnB,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC;SACnB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC;SACxB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC;AAID,MAAM,UAAU,KAAK,CAAC,MAAiC;IACnD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC;IACxC,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,KAAK;YAAE,SAAS;QAC3D,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;YACb,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;aAAM,CAAC;YACJ,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QACjD,CAAC;IACL,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,UAAqC,EAAE,KAAc;IACnF,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QACtC,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAC5C,CAAC;IACD,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,KAAK,IAAI,GAAG,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,UAAqC,EAAE,OAAe;IAC1E,OAAO,QAAQ,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;AAClE,CAAC;AAED,4EAA4E;AAC5E,4DAA4D;AAC5D,MAAM,UAAU,GAAG,CAAC,CAAS;IACzB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QAAE,OAAO,GAAG,CAAC;IACpC,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;QAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC7C,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC;AAClD,CAAC"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@nowline/renderer",
+  "version": "0.2.0",
+  "description": "Nowline SVG renderer — positioned model → SVG string",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "dependencies": {
+    "@nowline/layout": "0.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "langium": "~4.2.2",
+    "typescript": "~5.7.0",
+    "vitest": "^3.1.0",
+    "@nowline/core": "0.2.0"
+  },
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "watch": "tsc -b tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export type {
+    AssetBytes,
+    AssetResolver,
+    RenderOptions,
+} from './svg/render.js';
+export { renderSvg } from './svg/render.js';
+export { sanitizeSvg } from './svg/sanitize.js';

package/src/svg/icons.ts

@@ -0,0 +1,107 @@
+// Built-in link icon paths. All drawn to a 16x16 box; renderer positions them.
+
+export const LINK_ICON_PATHS: Record<string, string> = {
+    // Generic link/chain icon.
+    generic:
+        'M7 3h2a4 4 0 0 1 0 8H7a4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4h2a2 2 0 1 0 0-4H7Zm6 0h2a4 4 0 0 1 0 8h-2a4 4 0 0 1 0-8Z',
+    // Abstract Linear triangle.
+    linear: 'M2 8l6-6 6 6-6 6Z',
+    // GitHub octocat silhouette (simplified).
+    github: 'M8 1C4.14 1 1 4.14 1 8c0 3.1 2 5.7 4.8 6.6.35.07.48-.15.48-.34v-1.2c-1.95.43-2.36-.83-2.36-.83-.32-.82-.78-1.04-.78-1.04-.63-.43.05-.42.05-.42.71.05 1.08.73 1.08.73.62 1.06 1.63.75 2.03.57.06-.45.24-.75.44-.92-1.56-.18-3.2-.78-3.2-3.48 0-.77.27-1.4.72-1.9-.07-.18-.31-.9.07-1.88 0 0 .59-.19 1.93.72.56-.16 1.16-.24 1.76-.24.6 0 1.2.08 1.76.24 1.34-.9 1.93-.72 1.93-.72.38.98.14 1.7.07 1.88.45.5.72 1.13.72 1.9 0 2.7-1.65 3.3-3.22 3.48.25.21.47.63.47 1.27v1.88c0 .19.13.41.49.34C13 13.7 15 11.1 15 8c0-3.86-3.14-7-7-7Z',
+    // Jira-ish blue diamond.
+    jira: 'M8 1 1 8l7 7 7-7Zm0 3.5L11.5 8 8 11.5 4.5 8Z',
+};
+
+// --- Capacity-icon library ---
+//
+// Built-in named glyphs for the `capacity-icon:` style property and (where
+// reused) the `icon:` style property. Each glyph is a small inline SVG fragment
+// drawn on a 24x24 viewBox using `currentColor` so the renderer can paint it in
+// the resolved entity text color and at any pixel size by setting the wrapping
+// `<svg>` element's `width` / `height`.
+//
+// Adapted from Lucide (https://lucide.dev) under the ISC License — paths are
+// transcribed verbatim; only the wrapping `<svg>` element differs (we set
+// width / height at render time and bind colors to currentColor).
+//
+// Why a curated SVG library instead of Unicode glyphs? Per spec, built-in
+// capacity-icon names render identically across every output platform (web,
+// CLI export, embedded SVG, etc.). Unicode emoji (`👤`, `⏱`) render in
+// platform-specific fonts (Apple, Google, Microsoft, Linux), so the same DSL
+// would produce visually inconsistent output. SVG paths are pixel-deterministic.
+// Authors who *want* the host-platform emoji can use an inline literal
+// (`capacity-icon:"👤"`) or declare a custom symbol via the `symbol` keyword.
+//
+// `multiplier` is intentionally absent from this map: U+00D7 MULTIPLICATION
+// SIGN is a stable typographic operator with consistent rendering across every
+// system font, so it renders as a `<text>` element instead of an SVG path.
+export interface CapacityIconSvg {
+    /** SVG viewBox attribute. All glyphs are normalized to a 24x24 box. */
+    viewBox: string;
+    /**
+     * Inline SVG fragment — paths/circles/lines using `currentColor` for stroke
+     * and `none` (or `currentColor`) for fill. The renderer wraps this in an
+     * `<svg>` element whose `width`/`height` set the rendered size and whose
+     * `color` (or an enclosing `text`/`g` color) drives the glyph color.
+     */
+    body: string;
+    /** Visible 1-3 ASCII character fallback used when SVG output is constrained
+     * to ASCII (e.g. terminal text-mode export). Must match the `Built-in glyph
+     * table` in specs/rendering.md. */
+    ascii: string;
+}
+
+export const CAPACITY_ICON_SVG: Record<string, CapacityIconSvg> = {
+    // Lucide `user` — a single figure (head + shoulders).
+    person: {
+        viewBox: '0 0 24 24',
+        body:
+            '<circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+            '<path d="M4 21a8 8 0 0 1 16 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+        ascii: 'p',
+    },
+    // Lucide `users` — paired figures (foreground + smaller silhouette behind).
+    people: {
+        viewBox: '0 0 24 24',
+        body:
+            '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+            '<circle cx="9" cy="7" r="4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+            '<path d="M22 21v-2a4 4 0 0 0-3-3.87" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+            '<path d="M16 3.13a4 4 0 0 1 0 7.75" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+        ascii: 'P',
+    },
+    // Lucide `star` — five-pointed star, filled with currentColor for visual weight.
+    points: {
+        viewBox: '0 0 24 24',
+        body: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>',
+        ascii: '*',
+    },
+    // Lucide `timer` — stopwatch silhouette (face circle, top crown line, hand).
+    time: {
+        viewBox: '0 0 24 24',
+        body:
+            '<line x1="10" x2="14" y1="2" y2="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+            '<line x1="12" x2="15" y1="14" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+            '<circle cx="12" cy="14" r="8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+        ascii: 't',
+    },
+};
+
+/** Returns true when `name` is a renderer-curated capacity glyph. Useful for
+ * differentiating built-ins from custom glyph declarations and inline literals
+ * in the upcoming layout/render passes (m6/m7). */
+export function hasCapacityIconSvg(name: string): boolean {
+    return Object.hasOwn(CAPACITY_ICON_SVG, name);
+}
+
+/** ASCII fallbacks for every built-in capacity-icon name, including the ones
+ * that render as text (`multiplier`) or render nothing (`none`). The spec's
+ * `Built-in glyph table` is the source of truth — keep these in sync. */
+export const CAPACITY_ICON_ASCII: Record<string, string> = {
+    none: '',
+    multiplier: 'x',
+    person: CAPACITY_ICON_SVG.person.ascii,
+    people: CAPACITY_ICON_SVG.people.ascii,
+    points: CAPACITY_ICON_SVG.points.ascii,
+    time: CAPACITY_ICON_SVG.time.ascii,
+};

package/src/svg/ids.ts

@@ -0,0 +1,12 @@
+// Deterministic id generator. A single counter per renderSvg() call yields
+// ids like `nl-0`, `nl-1`, ... so identical inputs emit identical SVGs.
+// Never uses Math.random, Date.now, or ambient state.
+
+export class IdGenerator {
+    private counter = 0;
+    constructor(private readonly prefix: string = 'nl') {}
+    next(label?: string): string {
+        const id = `${this.prefix}-${this.counter++}`;
+        return label ? `${id}-${label}` : id;
+    }
+}