clay-server 4.8.2 → 5.0.0-beta.1

package/lib/salt-parser.js

@@ -0,0 +1,153 @@
+// Clay's bounded parser for Salt wireframes; no PlantUML preprocessor execution.
+function fail(message) { throw Object.assign(new Error(message), { status: 422 }); }
+function tokenize(body) {
+  var tokens = [];
+  var text = '';
+  var quoted = false;
+  function flush() { if (text.trim()) tokens.push({ type: 'text', text: text.trim() }); text = ''; }
+  for (var i = 0; i < body.length; i++) {
+    var c = body[i];
+    if (c === '"') quoted = !quoted;
+    if (!quoted && (c === '{' || c === '}' || c === '|' || c === '\n')) {
+      flush();
+      var token = { type: c };
+      if (c === '{') {
+        token.style = '';
+        if (/[#!+\-^/*ST]/.test(body[i + 1] || ' ')) token.style = body[++i];
+        if (token.style === 'S' && /[I-]/.test(body[i + 1] || ' ')) token.style += body[++i];
+        if (token.style === 'T' && /[!+#-]/.test(body[i + 1] || ' ')) token.style += body[++i];
+        if (token.style === '^') {
+          var title = /^[ \t]*"([^"\n]*)"/.exec(body.slice(i + 1));
+          if (title) { token.title = title[1]; i += title[0].length; }
+          else { var unquoted = /^[^\n|{}]*/.exec(body.slice(i + 1))[0]; token.title = unquoted.trim(); i += unquoted.length; }
+        }
+        if (body[i + 1] && !/[\s{}|]/.test(body[i + 1]) && !token.style) {
+          fail('Unsupported Salt container. Use {, {+, {#, {!, {-, {^, {/, or {*.');
+        }
+      }
+      tokens.push(token);
+    } else text += c;
+  }
+  if (quoted) fail('Unclosed quoted text field.');
+  flush();
+  return tokens;
+}
+
+function label(text) {
+  return require('./salt-text').parseLabel(text);
+}
+function widget(text) {
+  var result = { type: 'label' };
+  var match;
+  if (text === '*') return { type: 'span' };
+  if (/^[.!]?$/.test(text)) result.type = 'space';
+  else if (/^(\.\.|==|~~|--).*\1$/.test(text) || /^(\.\.|==|~~|--)$/.test(text)) { result.type = 'separator'; result.style = text.slice(0, 2); text = ''; }
+  else if ((match = /^\[([ X]?)\]\s*(.*)$/.exec(text))) { result.type = 'checkbox'; result.checked = /x/i.test(match[1]); text = match[2]; }
+  else if ((match = /^\(([ X]?)\)\s*(.*)$/.exec(text))) { result.type = 'radio'; result.checked = /x/i.test(match[1]); text = match[2]; }
+  else if ((match = /^\[([^\]]+)\]$/.exec(text))) { result.type = 'button'; text = match[1]; }
+  else if ((match = /^"([^"\n]*)"$/.exec(text))) { result.type = 'input'; text = match[1]; }
+  else if (/^\^.*\^$/.test(text)) {
+    var choices = text.slice(1, -1).split('^').filter(Boolean);
+    result.type = 'select'; result.options = choices.slice(1).map(label); text = choices[0] || '';
+  }
+  else if (!/^\[x\]/.test(text) && /^[\["^]|^\*/.test(text) && !/^\*\*[^*]+\*\*$/.test(text) && !/^\*+\s+/.test(text)) fail('Unsupported or incomplete control: ' + text.slice(0, 60));
+  if (text === '*') return { type: 'span' };
+  result.charLength = text.replace(/<&[-\w]+>/g, '00').replace(/<\/?(?:b|i|s|u|w|color|back|font|size)(?::[^>]+)?>/gi, '').length;
+  return Object.assign(result, label(/^(button|input|select)$/.test(result.type) ? text.trim() : text));
+}
+
+function parseSalt(source) {
+  var screen = require('./salt-screen').parse(source);
+  if (/[\u0000-\u0008\u000b\u000c\u000e-\u001f]/.test(source)) fail("Wireframe source contains unsupported control characters.");
+  var body;
+  var match = /^\s*@startsalt(?:[ \t]+[\w-]+)?[ \t]*\r?\n([\s\S]*?)\r?\n\s*@endsalt\s*$/i.exec(source);
+  if (match) body = match[1];
+  else {
+    match = /^\s*@startuml(?:[ \t]+[\w-]+)?[ \t]*\r?\n\s*salt\s*\r?\n([\s\S]*?)\r?\n\s*@enduml\s*$/i.exec(source);
+    if (match) body = match[1];
+  }
+  if (body === undefined) fail('The built-in viewer supports Salt wireframes. Use @startsalt / @endsalt around a layout. Other PlantUML diagram types are not supported.');
+  body = body.replace(/^[ \t]*'[^\n]*$/gm, '').replace(/\r/g, '');
+  var settings = require('./salt-options').parse(body);
+  body = settings.body;
+  if (/^[ \t]*(?:!|skinparam\b|scale\b|sprite\b)|%[a-z_]+\s*\(/im.test(body)) fail('PlantUML preprocessing, includes, macros, and unrecognized directives are not supported in built-in wireframes.');
+  var sprites = Object.create(null);
+  var spriteCount = 0;
+  body = body.replace(/<<([\w]*)\s*\n([.X\s]+?)\n\s*>>/g, function (_, name, pixels) {
+    var rows = pixels.trim().split(/\n/).map(function (line) { return line.trim(); });
+    if (!rows.length || rows.some(function (line) { return !/^[.X]+$/.test(line) || line.length !== rows[0].length; })) fail('Sprite rows must have equal widths and contain only . or X.');
+    var id = '__clay_sprite_' + spriteCount++ + '__';
+    sprites[id] = { type: 'sprite', pixels: rows, width: rows[0].length, height: rows.length };
+    if (name) sprites['<<' + name + '>>'] = sprites[id];
+    return id;
+  });
+  var tokens = tokenize(body);
+  var index = 0;
+  var count = 0;
+  function skipNewlines() { while (tokens[index] && tokens[index].type === '\n') index++; }
+  function container(depth) {
+    if (depth > 24) fail('Wireframe nesting is too deep (24 levels maximum).');
+    var start = tokens[index++];
+    var node = { type: 'container', style: start.style, title: start.title || '', titleData: start.title ? label(start.title) : null, rows: [] };
+    if (start.style[0] === 'S') { node.scroll = start.style; node.style = '+'; }
+    var row = [];
+    var expectsCell = false;
+    function cell(value) {
+      if (++count > 2000) fail('Wireframe has too many cells (2000 maximum).');
+      if (row.length >= 64) fail('Wireframe has too many columns (64 maximum).');
+      row.push(value); expectsCell = false;
+    }
+    function endRow() { if (expectsCell) cell(widget('.')); if (row.length) node.rows.push(row); row = []; }
+    while (index < tokens.length) {
+      var token = tokens[index];
+      if (token.type === '}') {
+        index++; endRow();
+        if (node.style === '*') {
+          node.popups = node.rows.slice(1); node.rows = node.rows.slice(0, 1);
+          node.popups.forEach(function (items) {
+            if (!node.rows[0].some(function (entry) { return entry.text === items[0].text; })) fail('Open menu must name an existing menu entry.');
+          });
+        }
+        return node;
+      }
+      if (token.type === '\n') {
+        if (node.style === '/' && row.length && !expectsCell) node.verticalTabs = true;
+        index++;
+        // A newline before/after a column separator is only formatting.
+        skipNewlines();
+        if (!expectsCell && (!tokens[index] || tokens[index].type !== '|')) endRow();
+      } else if (token.type === '|') {
+        if (!row.length || expectsCell) cell(widget('.'));
+        expectsCell = true; index++;
+      } else if (token.type === '{' || token.type === 'text') {
+        if (row.length && !expectsCell) fail('Separate cells with | or a newline.');
+        var value;
+        if (token.type === '{') value = container(depth + 1);
+        else { index++; value = sprites[token.text] ? Object.assign({}, sprites[token.text]) : widget(token.text); }
+        if (node.style[0] === 'T' && !row.length && value.type === 'label') {
+          var level = /^\+*/.exec(value.text)[0].length;
+          value = Object.assign({ type: 'label', level: level }, label(value.text.slice(level).trim()));
+        }
+        if (value.type === 'span') {
+          var previous = row[row.length - 1];
+          while (previous && previous.type === 'span') previous = previous.owner;
+          if (!previous) fail('A spanning cell needs a cell to its left.');
+          previous.span = (previous.span || 1) + 1; value.owner = previous;
+        }
+        cell(value);
+      } else fail('Unexpected Salt syntax.');
+    }
+    fail('Unclosed layout container. Add a closing }.');
+  }
+  skipNewlines();
+  if (!tokens[index] || tokens[index].type !== '{') fail('A Salt layout must start with {.');
+  var root = container(0);
+  skipNewlines();
+  if (index !== tokens.length) fail('Unexpected content after the layout. Use one outer container.');
+  root.options = settings.options;
+  if (screen) root.options.screen = screen;
+  root.options.labels = {};
+  ['title', 'header', 'footer', 'caption', 'legend'].forEach(function (name) { if (settings.options[name]) root.options.labels[name] = settings.options[name].split('\n').map(label); });
+  return root;
+}
+module.exports = { parseSalt: parseSalt };

package/lib/salt-screen.js

@@ -0,0 +1,111 @@
+// Optional Clay screen geometry. Plain Salt keeps its reference layout.
+function fail(message) { throw Object.assign(new Error('Clay screen layout: ' + message), { status: 422 }); }
+function parse(source) {
+  var screen = null;
+  var rules = Object.create(null);
+  source.replace(/^[ \t]*'[ \t]*@clay-(canvas|layout)[ \t]+([^\r\n]*)/gm, function (_, kind, value) {
+    if (kind === 'canvas') {
+      if (screen) fail('use one canvas declaration.');
+      var dimensions = /^(\d+)\s+(\d+)\s*$/.exec(value);
+      if (!dimensions) fail('canvas requires width and height in pixels.');
+      screen = { width: Number(dimensions[1]), height: Number(dimensions[2]), rules: rules };
+      if (screen.width < 240 || screen.height < 240 || screen.width > 4096 || screen.height > 4096) fail('canvas dimensions must be 240–4096 pixels.');
+    } else {
+      var parts = value.trim().split(/\s+/);
+      var key = parts.shift();
+      if (!/^root(?:\.\d+\.\d+)*$/.test(key) || rules[key]) fail('layout paths must be unique, such as root.1.0.');
+      var rule = {};
+      parts.forEach(function (part) {
+        var pair = /^(padding|gap|columns|rows)=(.+)$/.exec(part);
+        if (!pair || rule[pair[1]] !== undefined) fail('use padding, gap, columns or rows once per layout.');
+        if (/padding|gap/.test(pair[1])) {
+          if (!/^\d+$/.test(pair[2]) || Number(pair[2]) > 128) fail('padding and gap must be 0–128 pixels.');
+          rule[pair[1]] = Number(pair[2]);
+        } else {
+          var tracks = pair[2].split(',');
+          if (tracks.length > 64 || tracks.some(function (track) { return !/^(auto|\*|\d+)$/.test(track) || (/^\d+$/.test(track) && (Number(track) < 1 || Number(track) > 4096)); })) fail('tracks must be auto, *, or 1–4096 pixels.');
+          rule[pair[1]] = tracks;
+        }
+      });
+      rules[key] = rule;
+    }
+    return '';
+  });
+  if (!screen && Object.keys(rules).length) fail('layout rules require a canvas declaration.');
+  return screen;
+}
+function normal(node) { return node.type === 'container' && !/^[T/*]/.test(node.style) && !node.scroll; }
+function tracks(spec, minimum, total, gap, name) {
+  if (spec && spec.length !== minimum.length) fail(name + ' track count does not match its layout.');
+  var sizes = minimum.map(function (min, i) {
+    var track = spec ? spec[i] : 'auto';
+    if (/^\d+$/.test(track) && Number(track) + .01 < min) fail(name + ' track ' + (i + 1) + ' needs at least ' + Math.ceil(min) + ' pixels.');
+    return /^\d+$/.test(track) ? Number(track) : min;
+  });
+  if (total !== undefined) {
+    var remaining = total - sizes.reduce(function (a, b) { return a + b; }, 0) - gap * (sizes.length - 1);
+    if (remaining < -.01) fail(name + ' overflows by ' + Math.ceil(-remaining) + ' pixels. Increase the canvas/track or simplify its contents.');
+    var flexible = sizes.map(function (_, i) { return spec && spec[i] === '*' ? i : -1; }).filter(function (i) { return i >= 0; });
+    flexible.forEach(function (i) { sizes[i] += remaining / flexible.length; });
+  }
+  return sizes;
+}
+function prepare(node, screen, key, used) {
+  if (!normal(node)) { if (screen.rules[key]) fail(key + ' must target a regular layout container.'); return; }
+  var rule = screen.rules[key] || {};
+  used.add(key);
+  var padding = rule.padding === undefined ? 16 : rule.padding;
+  var gap = rule.gap === undefined ? 12 : rule.gap;
+  var columns = Array(node.columns.length).fill(0), rows = Array(node.rows.length).fill(0);
+  node.rows.forEach(function (row, r) { row.forEach(function (child, c) {
+    if (child.type === 'span') return;
+    prepare(child, screen, key + '.' + r + '.' + c, used);
+    if (!child.span) columns[c] = Math.max(columns[c], child.width);
+    rows[r] = Math.max(rows[r], child.height);
+  }); });
+  node.rows.forEach(function (row) { row.forEach(function (child, c) {
+    if (!child.span || child.type === 'span') return;
+    var available = columns.slice(c, c + child.span).reduce(function (a, b) { return a + b; }, 0) + gap * (child.span - 1);
+    columns[c + child.span - 1] += Math.max(0, child.width - available);
+  }); });
+  columns = tracks(rule.columns, columns, undefined, gap, key + ' columns');
+  rows = tracks(rule.rows, rows, undefined, gap, key + ' rows');
+  node.screen = { key: key, padding: padding, gap: gap, rule: rule, columns: columns, rows: rows };
+  node.width = columns.reduce(function (a, b) { return a + b; }, 0) + gap * (columns.length - 1) + padding * 2;
+  node.height = rows.reduce(function (a, b) { return a + b; }, 0) + gap * (rows.length - 1) + padding * 2 + node.titleLabel.height;
+}
+function place(node, width, height) {
+  if (!node.screen) return;
+  var box = node.screen, p = box.padding, gap = box.gap;
+  node.width = width; node.height = height;
+  var cols = tracks(box.rule.columns, box.columns, width - p * 2, gap, box.key + ' columns');
+  var rows = tracks(box.rule.rows, box.rows, height - p * 2 - node.titleLabel.height, gap, box.key + ' rows');
+  var y = p + node.titleLabel.height;
+  box.cells = []; box.vertical = []; box.horizontal = [];
+  node.rows.forEach(function (row, r) {
+    var x = p;
+    row.forEach(function (child, c) {
+      if (child.type !== 'span') {
+        var w = cols.slice(c, c + (child.span || 1)).reduce(function (a, b) { return a + b; }, 0) + gap * ((child.span || 1) - 1);
+        var yy = child.type === 'container' ? y : y + Math.max(0, (rows[r] - child.height) / 2);
+        if (child.type === 'input') child.width = w;
+        box.cells.push({ node: child, x: x, y: yy, width: w, height: rows[r] });
+        place(child, w, rows[r]);
+        if (c > 0) box.vertical.push({ x: x - gap / 2, y: y - gap / 2, height: rows[r] + gap });
+      }
+      x += cols[c] + gap;
+    });
+    if (r > 0) box.horizontal.push(y - gap / 2);
+    y += rows[r] + gap;
+  });
+}
+function apply(root) {
+  var screen = root.options.screen;
+  if (!screen) return;
+  if (!normal(root)) fail('the canvas needs a regular outer container.');
+  if (root.options.scale !== 1 || ['title', 'header', 'footer', 'caption', 'legend'].some(function (key) { return root.options[key]; })) fail('put headings inside the canvas; scale and outside annotations are not supported in screen mode.');
+  var used = new Set(); prepare(root, screen, 'root', used);
+  Object.keys(screen.rules).forEach(function (key) { if (!used.has(key)) fail('no container at ' + key + '.'); });
+  place(root, screen.width - 2, screen.height - 2);
+}
+module.exports = { parse: parse, apply: apply };

package/lib/salt-svg-shapes.js

@@ -0,0 +1,80 @@
+// Reference SVG primitives; text is escaped and images contain resolved PNG bytes.
+function escape(value) { return String(value).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' }[c]; }); }
+function createShapes(out, scale, handwritten) {
+  scale = scale || 1;
+  function number(value) { return String(Math.round(value * scale * 1000) / 1000); }
+  var ink = '#000';
+  var bounds = { x: 0, y: 0 };
+  var filters = Object.create(null);
+  function include(x, y) { bounds.x = Math.max(bounds.x, x); bounds.y = Math.max(bounds.y, y); }
+  function rect(x, y, w, h, fill, stroke, radius, thickness) {
+    include(x + w, y + h);
+    if (handwritten) {
+      var points = require('./salt-hand').rect(w, h, radius).map(function (p) { return [p[0] + x, p[1] + y]; });
+      out.push('<polygon points="' + points.map(function (p) { return p.map(number).join(','); }).join(' ') + '" fill="' + (fill || 'none') + '" stroke="' + (stroke || '#000') + '" stroke-width="' + number(thickness || 1) + '" stroke-linejoin="miter" stroke-miterlimit="10"/>'); return;
+    }
+    out.push('<rect x="' + number(x) + '" y="' + number(y) + '" width="' + number(w) + '" height="' + number(h) + '" fill="' + (fill || 'none') + '" stroke="' + (stroke || '#000') + '" stroke-width="' + number(thickness || 1) + '"' + (radius ? ' rx="' + number(radius) + '" ry="' + number(radius) + '"' : '') + '/>');
+  }
+  function line(x, y, xx, yy, stroke, thickness, dash) {
+    include(x, y); include(xx, yy);
+    if (handwritten) {
+      var points = require('./salt-hand').line(xx - x, yy - y);
+      out.push('<path d="' + points.map(function (p, i) { return (i ? 'L' : 'M') + number(p[0] + x) + ',' + number(p[1] + y); }).join(' ') + '" fill="none" stroke="' + (stroke || '#000') + '" stroke-width="' + number(thickness || 1) + '"/>'); return;
+    }
+    out.push('<line x1="' + number(x) + '" y1="' + number(y) + '" x2="' + number(xx) + '" y2="' + number(yy) + '" stroke="' + (stroke || '#000') + '" stroke-width="' + number(thickness || 1) + '"' + (dash ? ' stroke-dasharray="' + dash + '"' : '') + '/>');
+  }
+  function ellipse(x, y, w, h, fill) {
+    include(x + w, y + h);
+    out.push('<ellipse cx="' + number(x + w / 2) + '" cy="' + number(y + h / 2) + '" rx="' + number(w / 2) + '" ry="' + number(h / 2) + '" fill="' + (fill || 'none') + '" stroke="#000" stroke-width="' + number(1.5) + '"/>');
+  }
+  function polygon(points, thickness) {
+    points.forEach(function (p) { include(p[0], p[1]); });
+    out.push('<polygon points="' + points.map(function (p) { return p.map(number).join(','); }).join(' ') + '" fill="#000" stroke="#000" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="' + number(thickness || 1) + '"/>');
+  }
+  function path(d, fill, stroke, maxX, maxY) {
+    include(maxX, maxY);
+    out.push('<path d="' + d.replace(/-?\d+(?:\.\d+)?/g, function (n) { return number(Number(n)); }) + '" fill="' + fill + '"' + (stroke ? ' stroke="' + stroke + '" stroke-width="' + number(1) + '"' : '') + '/>');
+  }
+  function label(label, x, y) {
+    include(x + label.width, y + label.height - Math.min(...label.runs.map(function (r) { return r.descent || 0; })));
+    if (label.list) {
+      var level = label.list.level;
+      if (label.list.type === 'number') {
+        var prefix = require('./salt-text').measureLabel(require('./salt-text').parseLabel('1. '));
+        var start = x + label.indent - prefix.width;
+        labelText(prefix.runs[0], start, y + label.height - prefix.runs[0].descent);
+      } else if (level === 1) out.push('<ellipse cx="' + number(x + 5.5) + '" cy="' + number(y + label.height - 7.5) + '" rx="' + number(2.5) + '" ry="' + number(2.5) + '" fill="#000"/>');
+      else out.push('<rect x="' + number(x + level * 8 - 7) + '" y="' + number(y + label.height - 10) + '" width="' + number(3.5) + '" height="' + number(3.5) + '" fill="#000"/>');
+      x += label.indent;
+    }
+    label.runs.forEach(function (run) {
+      ink = run.color || '#000';
+      if (run.icon) {
+        var iy = y + Math.max(0, label.height - 11);
+        require('./salt-text').icons[run.icon].forEach(function (d) {
+          var axis = 0;
+          var moved = d.replace(/-?\d+(?:\.\d+)?/g, function (n) { return number(Number(n) + (axis++ % 2 ? iy - 6 : x - 6)); });
+          out.push('<path d="' + moved + '" fill="' + (run.color || '#000') + '"/>');
+        });
+      }
+      if (run.image) out.push('<image x="' + number(x) + '" y="' + number(y + label.height - run.height) + '" width="' + number(run.width) + '" height="' + number(run.height) + '" href="' + run.image.data + '"/>');
+      if (run.displayText) labelText(run, x, y + label.height - run.descent);
+      x += run.width;
+    });
+  }
+  function labelText(run, x, baseline) {
+    var decoration = run.wave ? 'wavy underline' : run.underline && !run.underlineColor ? 'underline' : run.strike && !run.strikeColor ? 'line-through' : '';
+    var filter = '';
+    if (run.background) {
+      var id = filters[run.background];
+      if (!id) { id = 'salt-back-' + Object.keys(filters).length; filters[run.background] = id; out.push('<defs><filter id="' + id + '" x="0" y="0" width="1" height="1"><feFlood flood-color="' + run.background + '" result="flood"/><feComposite in="SourceGraphic" in2="flood" operator="over"/></filter></defs>'); }
+      filter = ' filter="url(#' + id + ')"';
+    }
+    out.push('<text x="' + number(x + run.leadingWidth) + '" y="' + number(baseline) + '" fill="' + (run.color || '#000') + '" font-size="' + number(run.size || 12) + '"' + (run.displayText.length > 1 ? ' textLength="' + number(run.displayWidth) + '"' : '') + (run.bold ? ' font-weight="700"' : '') + (run.italic ? ' font-style="italic"' : '') + (run.mono ? ' font-family="monospace"' : '') + (decoration ? ' text-decoration="' + decoration + '"' : '') + filter + '>' + escape(run.displayText) + '</text>');
+    var size = run.size || 12;
+    if (run.strike && run.strikeColor) line(x + run.leadingWidth, baseline - size / 4, x + run.leadingWidth + run.displayWidth, baseline - size / 4, run.strikeColor, size / 28);
+    if (run.underline && run.underlineColor) line(x + run.leadingWidth, baseline + size / 14, x + run.leadingWidth + run.displayWidth, baseline + size / 14, run.underlineColor, size / 28);
+  }
+  return { lastInk: function () { return ink; }, path: path, bounds: bounds, rect: rect, line: line, ellipse: ellipse, polygon: polygon, label: label };
+}
+module.exports = { createShapes: createShapes };

package/lib/salt-svg.js

@@ -0,0 +1,164 @@
+// Geometry adapted from PlantUML 1.2026.8 Salt, (c) Arnaud Roques, GPL-3.0-or-later.
+// See LICENSES/plantuml-salt.txt. Rendering is local and bounded; image bytes are pre-resolved.
+var layout = require('./salt-layout');
+var shapes = require('./salt-svg-shapes');
+var overlays = require('./salt-overlays');
+function renderSaltSvg(root) {
+  layout.measure(root);
+  require('./salt-screen').apply(root);
+  var out = [];
+  var scale = (root.options || {}).scale || 1;
+  var s = shapes.createShapes(out, scale, (root.options || {}).handwritten);
+  var front = [];
+  function grid(node, x, y) {
+    var horizontal = new Set();
+    var vertical = new Set();
+    var rows = node.heights.length;
+    var cols = node.columns.length;
+    var style = node.style;
+    if (/[+#^]/.test(style)) {
+      for (var c = 0; c < cols; c++) { horizontal.add('0,' + c); horizontal.add(rows + ',' + c); }
+      for (var r = 0; r < rows; r++) { vertical.add(r + ',0'); vertical.add(r + ',' + cols); }
+    }
+    node.rows.forEach(function (row, r) {
+      row.forEach(function (child, c) {
+        if (child.type === 'span') return;
+        var end = c + (child.span || 1);
+        if (/[#-]/.test(style)) for (var cc = c; cc < end; cc++) { horizontal.add(r + ',' + cc); horizontal.add((r + 1) + ',' + cc); }
+        if (/[#!]/.test(style)) { vertical.add(r + ',' + c); vertical.add(r + ',' + end); }
+      });
+    });
+    function referenceOrder(set) {
+      var capacity = 16;
+      while (set.size > capacity * 0.75) capacity *= 2;
+      function bucket(key) {
+        var p = key.split(',').map(Number);
+        var hash = p[0] * 47 + p[1];
+        return (hash ^ (hash >>> 16)) & (capacity - 1);
+      }
+      return Array.from(set).sort(function (a, b) { return bucket(a) - bucket(b); });
+    }
+    referenceOrder(horizontal).forEach(function (key) {
+      var p = key.split(',').map(Number);
+      s.line(x + node.xs[p[1]], y + node.ys[p[0]], x + node.xs[p[1] + 1], y + node.ys[p[0]]);
+    });
+    referenceOrder(vertical).forEach(function (key) {
+      var p = key.split(',').map(Number);
+      s.line(x + node.xs[p[1]], y + node.ys[p[0]], x + node.xs[p[1]], y + node.ys[p[0] + 1]);
+    });
+    if (node.title) {
+      s.rect(x + 6, y, node.titleLabel.width, node.titleLabel.height, '#FFF', '#FFF');
+      s.label(node.titleLabel, x + 6, y);
+    }
+  }
+  function tabs(node, x, y) {
+    var offset = 0;
+    node.items.forEach(function (child) {
+      var w = child.width;
+      var h = child.height;
+      if (node.vertical) {
+        s.label(child.label, x, y + offset + 2);
+        s.line(x, y + offset, x + node.width, y + offset);
+        s.line(x, y + offset, x, y + offset + h + 5);
+        s.line(x, y + offset + h + 5, x + node.width, y + offset + h + 5);
+        s.line(x + node.width, y + offset + h + 5, x + node.width, y + offset + h + 15);
+        offset += h + 15;
+      } else {
+        s.label(child.label, x + offset + 2, y);
+        s.line(x + offset, y, x + offset, y + h);
+        s.line(x + offset, y, x + offset + w + 5, y);
+        s.line(x + offset + w + 5, y, x + offset + w + 5, y + h);
+        s.line(x + offset + w + 5, y + h, x + offset + w + 15, y + h);
+        offset += w + 15;
+      }
+    });
+  }
+  function draw(node, x, y, w, h) {
+    if (node.screen) {
+      if (/[+#^]/.test(node.style)) s.rect(x, y, w, h);
+      if (node.title) s.label(node.titleLabel, x + node.screen.padding, y + 2);
+      if (/[#-]/.test(node.style)) node.screen.horizontal.forEach(function (yy) { s.line(x, y + yy, x + w, y + yy, '#AAA'); });
+      if (/[#!]/.test(node.style)) node.screen.vertical.forEach(function (line) { s.line(x + line.x, y + line.y, x + line.x, y + line.y + line.height, '#AAA'); });
+      node.screen.cells.forEach(function (cell) { draw(cell.node, x + cell.x, y + cell.y, cell.width, cell.height); });
+      return;
+    }
+    if (node.type === 'container') {
+      if (node.style[0] === 'T') return require('./salt-tree').draw(node, x, y, s, draw);
+      if (node.style === '/') return tabs(node, x, y);
+      if (node.style === '*') {
+        s.rect(x, y, w, h, '#DDD');
+        var mx = x;
+        node.items.forEach(function (child) { s.label(child.label, mx, y); mx += child.width + 10; });
+        front.push(function () { overlays.menu(node, x, y, s); });
+        return;
+      }
+      node.rows.forEach(function (row, r) {
+        row.forEach(function (child, c) {
+          if (child.type === 'span') return;
+          draw(child, x + node.xs[c] + 1, y + node.ys[r] + 1 + (r === 0 ? node.titleLabel.height / 2 : 0), node.xs[c + (child.span || 1)] - node.xs[c] - 1, node.heights[r] - 1);
+        });
+      });
+      grid(node, x, y);
+      if (node.scroll) { overlays.scroll(node, x, y, s); front.push(function () { overlays.scroll(node, x, y, s); }); }
+      return;
+    }
+    if (node.type === 'space') return;
+    if (node.type === 'sprite') {
+      for (var xx = 0; xx < node.width; xx++) for (var yy = 0; yy < node.height; yy++) {
+        if (node.pixels[yy][xx] === 'X') s.rect(x + xx, y + yy, 0.5, 0.5, s.lastInk() || '#000', '#000', 0, 0.5);
+      }
+      return;
+    }
+    if (node.type === 'separator') {
+      var yy = y + h / 2 - (node.style === '==' ? 1 : 0);
+      s.line(x, yy, x + w, yy, '#AAA', node.style === '~~' ? 1.5 : 1, node.style === '..' ? '1,2' : null);
+      if (node.style === '==') s.line(x, yy + 2, x + w, yy + 2, '#AAA');
+      return;
+    }
+    var label = node.label;
+    if (node.type === 'button') {
+      s.rect(x + 2.5, y + 2.5, node.width - 5, node.height - 5, '#EEE', '#000', 5, 2.5);
+      s.label(label, x + (node.width - label.width) / 2, y + 4.5);
+    } else if (node.type === 'input') {
+      s.label(label, x + 3, y);
+      s.line(x + 1, y + label.height, x + node.width - 2, y + label.height);
+      s.line(x + 1, y + label.height - 3, x + 1, y + label.height - 1);
+      s.line(x + node.width - 2, y + label.height - 3, x + node.width - 2, y + label.height - 1);
+    } else if (node.type === 'select') {
+      s.rect(x, y, node.width - 1, node.height - 1, '#EEE');
+      s.label(label, x + 2, y + 2);
+      var xx = x + node.width - 12;
+      s.line(xx, y, xx, y + node.height - 1);
+      s.polygon([[xx + 3, y + 6], [xx + 9, y + 6], [xx + 6, y + label.height - 2]]);
+      overlays.dropdown(node, x, y, s);
+      front.push(function () { overlays.dropdown(node, x, y, s); });
+    } else if (node.type === 'checkbox' || node.type === 'radio') {
+      s.label(label, x + 20, y);
+      if (node.type === 'radio') {
+        s.ellipse(x + 2, y + (node.height - 10) / 2, 10, 10);
+        if (node.checked) s.ellipse(x + 5, y + (node.height - 4) / 2, 4, 4, '#000');
+      } else {
+        s.rect(x + 2, y + (node.height - 10) / 2, 10, 10, 'none', '#000', 0, 1.5);
+        if (node.checked) s.polygon([[x + 3, y + 6], [x + 6, y + 9], [x + 13, y], [x + 6, y + 7]], 1.5);
+      }
+    } else s.label(label, x, y);
+  }
+  var decorated = require('./salt-chrome').decorate(root, function (x, y) { draw(root, x, y, root.width, root.height); }, s);
+  decorated.draw(root.options.screen ? 1 : 5, root.options.screen ? 1 : 5);
+  front.forEach(function (drawOverlay) { drawOverlay(); });
+  var margin = out.length ? 1 : 0;
+  var width = Math.floor(Math.max(decorated.width + 10, s.bounds.x) + margin);
+  var height = Math.floor(Math.max(decorated.height + 10, s.bounds.y) + margin);
+  if (root.options.screen) {
+    width = root.options.screen.width; height = root.options.screen.height;
+    if (s.bounds.x > width || s.bounds.y > height) throw Object.assign(new Error('Clay screen layout: drawing extends outside the canvas. Increase its dimensions or simplify the contents.'), { status: 422 });
+  }
+  width = Math.round(width * scale * 1000) / 1000; height = Math.round(height * scale * 1000) / 1000;
+  if (width > 8192 || height > 8192) throw Object.assign(new Error('Wireframe exceeds the 8192-pixel canvas limit.'), { status: 413 });
+  var background = (root.options || {}).background || '#FFFFFF';
+  if (background !== '#FFFFFF') out.unshift('<rect x="0" y="0" width="' + width + '" height="' + height + '" fill="' + background + '" stroke="none"/>');
+  out.unshift('<svg xmlns="http://www.w3.org/2000/svg"' + (root.options.screen ? ' data-clay-screen="true"' : '') + ' width="' + width + '" height="' + height + '" viewBox="0 0 ' + Math.floor(width) + ' ' + Math.floor(height) + '" preserveAspectRatio="none" style="width:' + Math.floor(width) + 'px;height:' + Math.floor(height) + 'px;background:' + ((root.options || {}).background || '#FFFFFF') + '" role="img" aria-label="Wireframe"><g font-family="sans-serif" lengthAdjust="spacing">');
+  out.push('</g></svg>');
+  return out.join('');
+}
+module.exports = { renderSaltSvg: renderSaltSvg };

package/lib/salt-text.js

@@ -0,0 +1,112 @@
+// Salt text layout uses the pinned reference metrics, without fonts or Java at runtime.
+var fs = require('node:fs');
+var path = require('node:path');
+var zlib = require('node:zlib');
+var profiles = {};
+var colors = require('./assets/salt-colors.json');
+var icons = require('./assets/salt-icons.json');
+function color(value) {
+  var hex = colors[value.toLowerCase()] || value.toUpperCase();
+  if (!/^#(?:[A-F0-9]{3}|[A-F0-9]{6})$/.test(hex)) fail('Unsupported color: ' + value);
+  return hex.replace(/^#(.)\1(.)\2(.)\3$/, '#$1$2$3');
+}
+function fail(message) { throw Object.assign(new Error(message), { status: 422 }); }
+function parseLabel(value) {
+  var heading = /^(={1,6})\s*(.*)$/.exec(value);
+  var order = heading ? heading[1].length - 1 - (/^</.test(heading[2]) ? 1 : 0) : -1;
+  var size = heading ? order <= 0 ? 16 : order === 1 ? 14 : order === 2 ? 13 : 12 : 12;
+  if (heading) value = heading[2];
+  var list = /^(\*+|#+)\s+(\S.*)$/.exec(value);
+  if (list) value = list[2];
+  value = value.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
+  value = value.replace(/<U\+([0-9a-f]{4,6})>/gi, function (_, cp) {
+    var code = parseInt(cp, 16); if (code > 0x10ffff || code >= 0xd800 && code <= 0xdfff) fail('Invalid Unicode code point.');
+    return String.fromCodePoint(code);
+  });
+  var state = { color: '#000', bold: !!heading && order < 3, italic: !!heading && order >= 3, size: size };
+  var runs = [];
+  var formats = { '**': 'bold', '//': 'italic', '""': 'mono', '--': 'strike', '__': 'underline', '~~': 'wave' };
+  var parts = value.split(/(<[^>]+>|\*\*|\/\/|""|--|__|~~)/g);
+  parts.forEach(function (part, index) {
+    if (!part) return;
+    if (formats[part]) {
+      var format = formats[part];
+      var closing = parts.indexOf(part, index + 1);
+      if (state[format] || closing > index && parts.slice(index + 1, closing).some(Boolean)) { state[format] = !state[format]; return; }
+    }
+    if (/^<&/.test(part)) {
+      var icon = part.slice(2, -1); if (!icons[icon]) fail('Unknown built-in icon: ' + icon);
+      runs.push(Object.assign({}, state, { text: '', icon: icon })); return;
+    }
+    if (/^<img:/i.test(part)) {
+      var url = part.slice(5, -1);
+      if (!/^https:\/\//i.test(url)) fail('Wireframe images require a public HTTPS URL.');
+      runs.push(Object.assign({}, state, { text: '', imageUrl: url })); return;
+    }
+    var tag = /^<(\/?)(b|i|s|u|w|color|back|font|size)(?::([^>]+))?>$/i.exec(part);
+    if (tag) {
+      var name = tag[2].toLowerCase(); var end = !!tag[1];
+      var key = { b: 'bold', i: 'italic', s: 'strike', u: 'underline', w: 'wave' }[name];
+      if (key) { state[key] = !end; state[key + 'Color'] = !end && tag[3] ? color(tag[3]) : null; }
+      else if (name === 'color') state.color = end ? '#000' : color(tag[3] || 'black');
+      else if (name === 'back') state.background = end ? null : color(tag[3] || 'white');
+      else if (name === 'font') { if (!end && !/^(monospaced?|sansserif|sans-serif)$/i.test(tag[3] || '')) fail('Unsupported font family.'); state.mono = !end && /^mono/i.test(tag[3]); }
+      else if (name === 'size') { state.size = end ? size : Number(tag[3]); if ([10, 12, 13, 14, 16, 18, 20].indexOf(state.size) === -1) fail('Supported font sizes are 10, 12, 13, 14, 16, 18, and 20.'); }
+      return;
+    }
+    if (/<\/?[a-z][^>]*>|<\$|\[\[/i.test(part)) fail('Unsupported embedded markup in wireframe text.');
+    var previous = runs[runs.length - 1];
+    if (previous && !previous.icon && !previous.imageUrl && JSON.stringify(Object.assign({}, previous, { text: '' })) === JSON.stringify(Object.assign({}, state, { text: '' }))) previous.text += part;
+    else runs.push(Object.assign({}, state, { text: part }));
+  });
+  return { text: runs.map(function (r) { return r.text || r.icon || ''; }).join(''), runs: runs,
+    list: list ? { type: list[1][0] === '*' ? 'bullet' : 'number', level: list[1].length } : null,
+    bold: runs.some(function (r) { return r.bold; }), italic: runs.some(function (r) { return r.italic; }) };
+}
+function measureRun(run) {
+  if (run.icon) return Object.assign({}, run, { width: 10, height: 8, descent: 0 });
+  if (run.imageUrl) {
+    if (!run.image) fail('Wireframe image was not resolved.');
+    return Object.assign({}, run, { width: run.image.width, height: run.image.height, descent: 0 });
+  }
+  var profile = run.mono ? 'monospace' + (run.size && run.size !== 12 ? '-' + run.size : '') : !run.size || run.size === 12 ? 'metrics' : String(run.size);
+  if (!profiles[profile]) profiles[profile] = zlib.gunzipSync(fs.readFileSync(path.join(__dirname, 'assets/salt-font-' + profile + '.bin.gz')));
+  var metrics = profiles[profile];
+  var style = (run.bold ? 1 : 0) + (run.italic ? 2 : 0);
+  var width = 0;
+  var height = 0;
+  var descent = 0;
+  for (var c of run.text) {
+    var cp = c.codePointAt(0);
+    // Supplementary characters use the reference missing-glyph advance.
+    if (cp > 65535) cp = 0xfffd;
+    var offset = (style * 65536 + cp) * 12;
+    width += metrics.readFloatBE(offset);
+    height = Math.max(height, metrics.readFloatBE(offset + 4));
+    descent = Math.max(descent, metrics.readFloatBE(offset + 8));
+  }
+  return Object.assign({}, run, { width: width, height: height, descent: descent });
+}
+function measureLabel(node, trim) {
+  var runs = (node.runs || parseLabel(node.text || '').runs).map(function (r) { return Object.assign({}, r); });
+  if (trim && runs.length) {
+    runs[0].text = runs[0].text.trimStart();
+    runs[runs.length - 1].text = runs[runs.length - 1].text.trimEnd();
+  }
+  runs = runs.filter(function (r) { return r.text || r.icon || r.imageUrl; });
+  if (!runs.length) runs.push({ text: '\u00a0', bold: false, italic: false });
+  runs = runs.filter(function (r) { return r.text || r.icon || r.imageUrl; }).map(function (r) {
+    var measured = measureRun(r);
+    var leading = /^ */.exec(r.text)[0];
+    if (r.icon || r.imageUrl) return measured;
+    measured.displayText = r.text.trim() || '\u00a0';
+    measured.displayWidth = measureRun(Object.assign({}, r, { text: measured.displayText })).width;
+    measured.leadingWidth = r.text.trim() ? measureRun(Object.assign({}, r, { text: leading })).width : 0;
+    return measured;
+  });
+  var list = node.list;
+  var indent = list ? list.type === 'number' ? measureRun({ text: '1. ', size: 12 }).width * list.level : list.level === 1 ? 12 : list.level * 8 : 0;
+  return { runs: runs, list: list, indent: indent, width: indent + runs.reduce(function (sum, r) { return sum + r.width; }, 0),
+    height: Math.max(0, runs.reduce(function (h, r) { return Math.max(h, r.height); }, 0)) };
+}
+module.exports = { color: color, icons: icons, parseLabel: parseLabel, measureLabel: measureLabel };