clay-server 4.8.2 → 5.0.0-beta.1

package/lib/public/modules/wireframe-chat.js

@@ -0,0 +1,52 @@
+import { sketchBrand, sketchCredit } from './wireframe-style.js';
+import { store } from './store.js';
+import { renderWireframe, wireframeSource, wireframeImage } from './wireframe-render.js';
+import { openWireframe } from './wireframe-workbench.js';
+import { mountWireframeViewport } from './wireframe-viewport.js';
+
+export function renderWireframeBlocks(root) {
+  if (store.get('replayingHistory')) return;
+  root.querySelectorAll('pre code.language-clay-sketch, pre code.language-plantuml, pre code.language-puml, pre code.language-salt').forEach(function (code) {
+    var pre = code.parentElement;
+    if (!pre || pre.dataset.wireframeProcessed) return;
+    var source = wireframeSource(code.textContent, code.classList.contains('language-salt') ? 'salt' : 'plantuml');
+    // Wait for a complete PlantUML body while assistant text is streaming.
+    if (!/^\s*@end(?:salt|uml)\b/im.test(source)) return;
+    pre.dataset.wireframeProcessed = 'true';
+    var card = document.createElement('section');
+    card.className = 'wireframe-card';
+    card.setAttribute('aria-label', 'clay-sketch preview');
+    var header = document.createElement('header');
+    var label = document.createElement('div'); label.className = 'sketch-brand'; label.innerHTML = sketchBrand(); header.appendChild(label);
+    var open = document.createElement('button'); open.type = 'button'; open.dataset.openSketch = ''; open.textContent = 'Open sketch';
+    open.addEventListener('click', function (event) { event.stopPropagation(); openWireframe({ source: source, title: 'Sketch viewer' }); });
+    header.appendChild(open); card.appendChild(header);
+    var canvas = document.createElement('div'); canvas.className = 'wireframe-canvas'; card.appendChild(canvas);
+    var status = document.createElement('p'); status.setAttribute('role', 'status'); status.textContent = 'Rendering sketch…'; canvas.appendChild(status);
+    var details = document.createElement('details');
+    var summary = document.createElement('summary'); summary.textContent = 'Sketch source'; details.appendChild(summary);
+    pre.replaceWith(card); details.appendChild(pre);
+    var footer = document.createElement('div'); footer.className = 'sketch-source-footer'; footer.appendChild(details);
+    var credit = document.createElement('div'); credit.innerHTML = sketchCredit(); footer.appendChild(credit); card.appendChild(footer);
+    function render(current) {
+      canvas.replaceChildren(status); status.textContent = 'Rendering sketch…';
+      return renderWireframe(current, canvas).then(function (svg) {
+        if (!card.isConnected) return;
+        var image = wireframeImage(svg, 'clay-sketch preview');
+        canvas.replaceChildren(image);
+        mountWireframeViewport(canvas, image);
+      }).catch(function (error) {
+        if (!card.isConnected) return;
+        status.textContent = error.name === 'AbortError' ? 'Rendering was interrupted. Try again.' : error.message;
+        var retry = document.createElement('button'); retry.type = 'button'; retry.textContent = 'Retry';
+        retry.onclick = function () {
+          retry.remove();
+          render(current).catch(function () {});
+        };
+        canvas.appendChild(retry);
+        throw error;
+      });
+    }
+    render(source).catch(function () {});
+  });
+}

package/lib/public/modules/wireframe-render.js

@@ -0,0 +1,69 @@
+import { store } from './store.js';
+
+export function wireframeSource(source, language) {
+  source = String(source || '');
+  if (language === 'salt' && !/@start\w+/i.test(source)) return '@startsalt\n' + source + '\n@endsalt';
+  return source;
+}
+
+export function wireframeImage(svg, title) {
+  if (svg.length > 8 * 1024 * 1024 || !/<svg[\s>]/i.test(svg)) throw new Error('The renderer returned an invalid diagram.');
+  var image = document.createElement('img');
+  image.alt = title || 'Wireframe';
+  image.draggable = false;
+  // SVG is displayed in an inert image context, never inserted as markup.
+  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+  return image;
+}
+
+function pump() {
+  if (store.get('wireframeRenderActive')) return;
+  var queue = (store.get('wireframeRenderQueue') || []).slice();
+  var job = queue.shift();
+  if (!job) return;
+  store.set({ wireframeRenderQueue: queue });
+  if (!job.target.isConnected) { job.reject(new Error('Preview closed.')); pump(); return; }
+  var controller = new AbortController();
+  store.set({ wireframeRenderActive: controller });
+  var timer = setTimeout(function () { controller.abort(); }, 20000);
+  fetch('api/wireframe/render', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ source: job.source }), signal: controller.signal, cache: 'no-store' }).then(function (response) {
+    return response.text().then(function (text) {
+      if (!response.ok) throw new Error(text || 'Unable to render this wireframe.');
+      return text;
+    });
+  }).then(function (svg) {
+    if (store.get('wireframeRenderActive') !== controller) throw new Error('Conversation changed.');
+    wireframeImage(svg);
+    if (svg.length < 500000) {
+      var cache = (store.get('wireframeRenderCache') || []).filter(function (entry) { return entry.source !== job.source; });
+      cache.push({ source: job.source, svg: svg });
+      store.set({ wireframeRenderCache: cache.slice(-12) });
+    }
+    job.resolve(svg);
+  }).catch(function (error) { job.reject(error); }).finally(function () {
+    clearTimeout(timer);
+    if (store.get('wireframeRenderActive') === controller) store.set({ wireframeRenderActive: null });
+    pump();
+  });
+}
+
+export function renderWireframe(source, target) {
+  if (!source.trim() || new TextEncoder().encode(source).length > 100000) return Promise.reject(new Error('Wireframes must contain between 1 byte and 100 KB of source.'));
+  var cache = store.get('wireframeRenderCache') || [];
+  var hit = cache.find(function (entry) { return entry.source === source; });
+  if (hit) return Promise.resolve(hit.svg);
+  return new Promise(function (resolve, reject) {
+    var queue = (store.get('wireframeRenderQueue') || []).slice();
+    queue.push({ source: source, target: target, resolve: resolve, reject: reject });
+    store.set({ wireframeRenderQueue: queue });
+    pump();
+  });
+}
+
+store.subscribe(function (state, previous) {
+  if (state.currentSlug === previous.currentSlug && state.activeSessionId === previous.activeSessionId && state.myUserId === previous.myUserId) return;
+  if (previous.wireframeRenderActive) previous.wireframeRenderActive.abort();
+  (previous.wireframeRenderQueue || []).forEach(function (job) { job.reject(new Error('Conversation changed.')); });
+  store.set({ wireframeRenderActive: null, wireframeRenderQueue: [], wireframeRenderCache: [] });
+});

package/lib/public/modules/wireframe-style.js

@@ -0,0 +1,6 @@
+export function sketchBrand() {
+  return '<span class="sketch-mark" aria-hidden="true">✎</span><span class="sketch-wordmark">clay<span>sketch</span></span>';
+}
+export function sketchCredit() {
+  return '<a class="sketch-credit" href="https://plantuml.com/salt" target="_blank" rel="noopener noreferrer">Built with PlantUML Salt <span aria-hidden="true">↗</span></a>';
+}

package/lib/public/modules/wireframe-viewport.js

@@ -0,0 +1,70 @@
+import { store } from './store.js';
+
+function entries() { return store.get('wireframeViewports') || new Map(); }
+function apply(entry) {
+  var image = entry.image;
+  if (!image.naturalWidth || !entry.viewport.isConnected || entries().get(entry.viewport) !== entry) return;
+  var style = getComputedStyle(entry.viewport);
+  var available = entry.viewport.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+  if (available <= 0) return;
+  var fitted = Math.min(1, available / image.naturalWidth);
+  if (entry.viewport.classList.contains('wireframe-workbench-canvas')) {
+    var height = entry.viewport.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+    if (height > 0) fitted = Math.min(fitted, height / image.naturalHeight);
+  }
+  // Default to the whole design at natural scale or smaller; zoom is explicit.
+  var scale = entry.mode === 'manual' ? entry.zoom : fitted;
+  image.style.width = image.naturalWidth * scale + 'px';
+  image.style.maxWidth = 'none';
+  image.style.height = 'auto';
+  image.style.margin = image.naturalWidth * scale > available ? '0' : '0 auto';
+  entry.scale = scale;
+  if (!entry.toolbar) return;
+  entry.toolbar.querySelector('[data-zoom-value]').textContent = Math.round(scale * 100) + '%';
+  entry.toolbar.querySelector('[data-zoom-fit]').setAttribute('aria-pressed', String(entry.mode === 'fit'));
+  entry.toolbar.querySelector('[data-zoom-out]').disabled = scale <= 0.25;
+  entry.toolbar.querySelector('[data-zoom-in]').disabled = scale >= 4;
+}
+function cleanup() {
+  var next = new Map(entries());
+  next.forEach(function (entry, viewport) {
+    if (viewport.isConnected && entry.image.isConnected) return;
+    entry.resize.disconnect(); next.delete(viewport);
+  });
+  if (next.size !== entries().size) store.set({ wireframeViewports: next });
+  if (!next.size) {
+    var observer = store.get('wireframeViewportCleanup');
+    if (observer) observer.disconnect();
+    store.set({ wireframeViewportCleanup: null });
+  }
+}
+export function mountWireframeViewport(viewport, image, toolbar) {
+  var previous = entries().get(viewport);
+  if (previous) previous.resize.disconnect();
+  var entry = { viewport: viewport, image: image, toolbar: toolbar, mode: previous ? previous.mode : 'auto', zoom: previous ? previous.zoom : 1, scale: 1 };
+  entry.resize = new ResizeObserver(function () { apply(entry); });
+  var next = new Map(entries()); next.set(viewport, entry);
+  store.set({ wireframeViewports: next });
+  if (toolbar) {
+    toolbar.classList.add('wireframe-zoom');
+    toolbar.setAttribute('role', 'group'); toolbar.setAttribute('aria-label', 'Sketch zoom');
+    toolbar.innerHTML = '<button type="button" data-zoom-out aria-label="Zoom out" title="Zoom out">−</button><button type="button" data-zoom-value aria-label="Reset zoom to 100%" title="Original size">100%</button><button type="button" data-zoom-in aria-label="Zoom in" title="Zoom in">+</button><button type="button" data-zoom-fit aria-pressed="true" title="Fit sketch to available width">Fit</button>';
+    function change(mode, zoom) {
+      entry.mode = mode; entry.zoom = zoom;
+      viewport.scrollLeft = 0; viewport.scrollTop = 0;
+      apply(entry);
+    }
+    toolbar.querySelector('[data-zoom-out]').onclick = function () { change('manual', Math.max(0.25, entry.scale / 1.25)); };
+    toolbar.querySelector('[data-zoom-in]').onclick = function () { change('manual', Math.min(4, Math.max(0.25, entry.scale * 1.25))); };
+    toolbar.querySelector('[data-zoom-value]').onclick = function () { change('manual', 1); };
+    toolbar.querySelector('[data-zoom-fit]').onclick = function () { change('fit', 1); };
+  }
+  image.addEventListener('load', function () { apply(entry); }, { once: true });
+  entry.resize.observe(viewport);
+  if (!store.get('wireframeViewportCleanup')) {
+    var observer = new MutationObserver(cleanup);
+    observer.observe(document.body, { childList: true, subtree: true });
+    store.set({ wireframeViewportCleanup: observer });
+  }
+  apply(entry);
+}

package/lib/public/modules/wireframe-workbench.js

@@ -0,0 +1,116 @@
+import { sketchBrand, sketchCredit } from './wireframe-style.js';
+import { store } from './store.js';
+import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { renderWireframe, wireframeSource, wireframeImage } from './wireframe-render.js';
+import { refreshIcons } from './icons.js';
+import { mountWireframeViewport } from './wireframe-viewport.js';
+
+function panel() { return document.getElementById('wireframe-panel'); }
+export function closeWireframe() {
+  releaseRightWorkbench('wireframe');
+  if (panel()) panel().remove();
+  store.set({ wireframeDraft: null });
+}
+
+function download() {
+  var draft = store.get('wireframeDraft');
+  if (!draft) return;
+  var link = document.createElement('a');
+  link.href = URL.createObjectURL(new Blob([draft.source], { type: 'text/plain;charset=utf-8' }));
+  link.download = (draft.id || 'wireframe') + '.puml';
+  link.click();
+  setTimeout(function () { URL.revokeObjectURL(link.href); }, 1000);
+}
+
+function save(event) {
+  event.preventDefault();
+  var el = panel();
+  var draft = store.get('wireframeDraft');
+  var form = el.querySelector('form');
+  var button = form.querySelector('[type="submit"]');
+  var status = el.querySelector('.wireframe-save-status');
+  var requested = form.elements.path.value.trim();
+  button.disabled = true; status.textContent = 'Saving…';
+  fetch('api/wireframe/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: requested, source: draft.source }) }).then(function (response) {
+    if (!response.ok) return response.text().then(function (text) { throw new Error(text); });
+    return response.json();
+  }).then(function (result) {
+    if (store.get('wireframeDraft') !== draft) return;
+    status.textContent = 'Saved to ' + result.path;
+    form.hidden = true;
+  }).catch(function (error) {
+    if (store.get('wireframeDraft') === draft) status.textContent = error.message || 'Unable to save the wireframe.';
+  }).finally(function () { button.disabled = false; });
+}
+
+function createPanel() {
+  var host = document.getElementById('main-panels');
+  if (!host) return null;
+  var el = document.createElement('section'); el.id = 'wireframe-panel';
+  el.setAttribute('aria-label', 'clay-sketch viewer');
+  el.innerHTML = '<header class="wireframe-topbar"><div class="sketch-brand">' + sketchBrand() + '</div><strong class="sketch-title">Sketch viewer</strong><div class="wireframe-window-actions"><button type="button" data-wide title="Widen panel" aria-label="Widen panel" aria-pressed="false"><i data-lucide="chevrons-left-right"></i></button><button type="button" data-full title="Toggle fullscreen" aria-label="Toggle fullscreen" aria-pressed="false"><i data-lucide="maximize-2"></i></button><button type="button" data-close title="Close clay-sketch" aria-label="Close clay-sketch"><i data-lucide="x"></i></button></div></header><div class="wireframe-toolbar"><div class="wireframe-zoom"></div><button type="button" data-save>Save to project</button><button type="button" data-download title="Download sketch source" aria-label="Download sketch source"><i data-lucide="download"></i></button></div><form hidden class="wireframe-save-form"><label>Project file path<input name="path" aria-label="Project file path" required pattern=".*\\.puml" placeholder="wireframe.puml"></label><button type="submit">Save</button><button type="button" data-cancel>Cancel</button></form><p class="wireframe-save-status" role="status"></p><div class="wireframe-workbench-canvas"></div><footer class="sketch-footer">' + sketchCredit() + '<span>Revise through conversation</span></footer>';
+  host.appendChild(el);
+  el.querySelector('[data-close]').onclick = closeWireframe;
+  el.querySelector('[data-download]').onclick = download;
+  el.querySelector('[data-save]').onclick = function () {
+    var form = el.querySelector('form'); form.hidden = false;
+    var draft = store.get('wireframeDraft');
+    form.elements.path.value = (draft.id || 'wireframe') + '.puml';
+    form.elements.path.focus();
+  };
+  el.querySelector('[data-cancel]').onclick = function () { el.querySelector('form').hidden = true; el.querySelector('[data-save]').focus(); };
+  el.querySelector('form').onsubmit = save;
+  el.addEventListener('keydown', function (event) {
+    if (event.key !== 'Escape') return;
+    event.stopPropagation();
+    if (!el.querySelector('form').hidden) el.querySelector('[data-cancel]').click();
+    else closeWireframe();
+  });
+  ['wide', 'full'].forEach(function (action) {
+    el.querySelector('[data-' + action + ']').onclick = function () {
+      var active = el.classList.toggle(action === 'wide' ? 'wireframe-wide' : 'panel-fullscreen');
+      this.setAttribute('aria-pressed', String(active));
+    };
+  });
+  refreshIcons();
+  return el;
+}
+
+export function openWireframe(message) {
+  if (!message || typeof message.source !== 'string' || new TextEncoder().encode(message.source).length > 100000) return;
+  if (store.get('paneMode') && window.parent !== window) {
+    window.parent.postMessage({ type: 'clay-pane-present-wireframe', message: message, projectSlug: store.get('currentSlug'), sessionId: store.get('activeSessionId') }, window.location.origin);
+    return;
+  }
+  claimRightWorkbench('wireframe');
+  var el = panel() || createPanel();
+  if (!el) return;
+  var draft = { source: wireframeSource(message.source, message.language), title: String(message.title || 'clay-sketch').slice(0, 100),
+    id: /^[a-zA-Z0-9_-]{1,80}$/.test(message.id || '') ? message.id : 'wireframe' };
+  store.set({ wireframeDraft: draft });
+  el.querySelector('header strong').textContent = draft.title;
+  el.querySelector('.wireframe-save-status').textContent = '';
+  el.querySelector('form').hidden = true;
+  draw(draft, el).catch(function () {});
+}
+function draw(draft, el) {
+  var canvas = el.querySelector('.wireframe-workbench-canvas');
+  var active = store.get('wireframeDraft');
+  var status = document.createElement('p'); status.setAttribute('role', 'status'); status.textContent = 'Rendering sketch…';
+  canvas.replaceChildren(status);
+  return renderWireframe(draft.source, canvas).then(function (svg) {
+    if (store.get('wireframeDraft') !== active || !canvas.isConnected) throw new DOMException('Sketch changed.', 'AbortError');
+    var image = wireframeImage(svg, draft.title);
+    canvas.replaceChildren(image);
+    mountWireframeViewport(canvas, image, el.querySelector('.wireframe-zoom'));
+  }).catch(function (error) {
+    if (store.get('wireframeDraft') !== active) throw error;
+    status.textContent = error.name === 'AbortError' ? 'Rendering was interrupted. Reopen the wireframe to retry.' : error.message;
+    throw error;
+  });
+}
+registerRightWorkbench('wireframe', closeWireframe);
+store.subscribe(function (state, previous) {
+  if (state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.myUserId !== previous.myUserId) closeWireframe();
+});

package/lib/public/style.css

@@ -1,3 +1,5 @@
+@import url("css/wireframe.css");
+@import url("css/mcp-connections.css");
 @import url("css/session-github.css");
 @import url("css/vendor-login-browser.css");
 @import url("css/issues.css");
@@ -68,5 +70,6 @@
 @import url("./css/shared-browser.css");
 
 @import url("./css/mcp-skills-workbench.css");
+@import url("css/skills-workbench.css");
 
 @import url("css/right-workbench.css");

package/lib/salt-chrome.js

@@ -0,0 +1,36 @@
+// Diagram decoration geometry adapted from PlantUML 1.2026.8 (GPL-3.0-or-later).
+var text = require('./salt-text');
+function decorate(root, draw, shapes) {
+  var options = root.options || {};
+  var block = { width: root.width, height: root.height, draw: draw };
+  function add(name, top) {
+    if (!options[name]) return;
+    var small = name === 'header' || name === 'footer';
+    var padding = name === 'title' || name === 'legend' ? 5 : 0;
+    var margin = name === 'legend' ? 12 : name === 'title' ? 5 : name === 'caption' ? 1 : 0;
+    var labels = options.labels[name].map(function (parsed) {
+      parsed.runs.forEach(function (run) { run.size = small ? 10 : 14; run.bold = name === 'title' || run.bold; run.color = small ? '#888' : run.color; });
+      return text.measureLabel(parsed);
+    });
+    var textWidth = Math.max.apply(null, labels.map(function (label) { return label.width; }));
+    var textHeight = labels.reduce(function (sum, label) { return sum + label.height; }, 0);
+    var width = textWidth + 2 * (padding + margin) + 1;
+    var height = textHeight + 2 * (padding + margin) + 1;
+    var previous = block;
+    block = { width: Math.max(previous.width, width), height: previous.height + height, draw: function (x, y) {
+      var bx = x + (name === 'header' ? blockWidth - width : (blockWidth - width) / 2);
+      var by = y + (top ? 0 : previous.height);
+      previous.draw(x + (blockWidth - previous.width) / 2, y + (top ? height : 0));
+      if (name === 'legend') shapes.rect(bx + margin, by + margin, textWidth + 2 * padding, textHeight + 2 * padding, '#DDD', '#000', 7.5);
+      var yy = by + padding + margin;
+      labels.forEach(function (label) {
+        var offset = name === 'legend' ? 0 : name === 'header' ? textWidth - label.width : (textWidth - label.width) / 2;
+        shapes.label(label, bx + margin + padding + offset, yy); yy += label.height;
+      });
+    } };
+    var blockWidth = block.width;
+  }
+  add('legend', false); add('title', true); add('caption', false); add('header', true); add('footer', false);
+  return block;
+}
+module.exports = { decorate: decorate };

package/lib/salt-hand.js

@@ -0,0 +1,37 @@
+// Adapted from PlantUML HandJiggle/URectangleHand by Adrian Vogt, GPL-3.0-or-later.
+// See LICENSES/plantuml-salt.txt. Each translated reference graphic resets its seed.
+function jiggle(x, y, variation) {
+  var seed = (424242n ^ 25214903917n) & ((1n << 48n) - 1n);
+  function bits(n) { seed = (seed * 25214903917n + 11n) & ((1n << 48n) - 1n); return Number(seed >> BigInt(48 - n)); }
+  function random() { return (bits(26) * 134217728 + bits(27)) / 9007199254740992; }
+  var points = [[x, y]];
+  function lineTo(xx, yy) {
+    var dx = Math.abs(xx - x); var dy = Math.abs(yy - y); var distance = Math.hypot(dx, dy);
+    if (distance < 0.001) return;
+    var segments = Math.round(distance / 10); var amount = variation;
+    if (segments < 5) { segments = 5; amount /= 3; }
+    for (var i = 0; i < segments; i++) {
+      var offset = (random() - 0.5) * amount;
+      points.push([x + (xx - x) / segments * i - offset * dy / distance, y + (yy - y) / segments * i - offset * dx / distance]);
+    }
+    points.push([xx, yy]); x = xx; y = yy;
+  }
+  function arc(a, b, cx, cy, rx, ry) {
+    [(a + b) / 2, b].forEach(function (angle) { lineTo(cx + Math.cos(angle) * rx, cy + Math.sin(angle) * ry); });
+  }
+  return { points: points, lineTo: lineTo, arc: arc };
+}
+function line(dx, dy) { var j = jiggle(0, 0, 2); j.lineTo(dx, dy); return j.points; }
+function rect(w, h, radius) {
+  var rx = Math.min(radius || 0, w / 2); var ry = Math.min(radius || 0, h / 2);
+  var j = jiggle(rx, 0, 1.5);
+  if (!radius) { j.lineTo(w, 0); j.lineTo(w, h); j.lineTo(0, h); j.lineTo(0, 0); }
+  else {
+    j.lineTo(w - rx, 0); j.arc(-Math.PI / 2, 0, w - rx, ry, rx, ry);
+    j.lineTo(w, h - ry); j.arc(0, Math.PI / 2, w - rx, h - ry, rx, ry);
+    j.lineTo(rx, h); j.arc(Math.PI / 2, Math.PI, rx, h - ry, rx, ry);
+    j.lineTo(0, ry); j.arc(Math.PI, Math.PI * 1.5, rx, ry, rx, ry);
+  }
+  return j.points;
+}
+module.exports = { line: line, rect: rect };

package/lib/salt-images.js

@@ -0,0 +1,87 @@
+// Resolve explicit raster images only. SVG output contains embedded bytes, never remote URLs.
+var https = require('node:https');
+var dns = require('node:dns').promises;
+var net = require('node:net');
+var MAX_BYTES = 1024 * 1024;
+function failure(message) { return Object.assign(new Error(message), { status: 422 }); }
+function bounded(promise, signal) {
+  return new Promise(function (resolve, reject) {
+    function aborted() { reject(failure('Wireframe image loading cancelled or timed out.')); }
+    if (signal.aborted) { aborted(); return; }
+    signal.addEventListener('abort', aborted, { once: true });
+    promise.then(resolve, reject).finally(function () { signal.removeEventListener('abort', aborted); });
+  });
+}
+function publicAddress(address) {
+  if (net.isIP(address) !== 4) return false;
+  var p = address.split('.').map(Number);
+  return !(p[0] === 0 || p[0] === 10 || p[0] === 127 || p[0] >= 224 ||
+    p[0] === 100 && p[1] >= 64 && p[1] <= 127 || p[0] === 169 && p[1] === 254 ||
+    p[0] === 172 && p[1] >= 16 && p[1] <= 31 || p[0] === 192 && (p[1] === 168 || p[1] === 0 || p[1] === 2) ||
+    p[0] === 198 && (p[1] === 18 || p[1] === 19 || p[1] === 51 && p[2] === 100) || p[0] === 203 && p[1] === 0 && p[2] === 113);
+}
+function decode(bytes) {
+  if (!Buffer.isBuffer(bytes) || bytes.length > MAX_BYTES || bytes.length < 33 ||
+    bytes.subarray(0, 8).toString('hex') !== '89504e470d0a1a0a' || bytes.toString('ascii', 12, 16) !== 'IHDR') throw failure('Wireframe images must be PNG files of at most 1 MB.');
+  var width = bytes.readUInt32BE(16); var height = bytes.readUInt32BE(20);
+  if (!width || !height || width > 2048 || height > 2048) throw failure('Wireframe images must be at most 2048 by 2048 pixels.');
+  return { width: width, height: height, data: 'data:image/png;base64,' + bytes.toString('base64') };
+}
+async function download(value, signal) {
+  var url;
+  try { url = new URL(value); } catch (e) { throw failure('Invalid wireframe image URL.'); }
+  if (url.protocol !== 'https:' || url.username || url.password || url.port && url.port !== '443') throw failure('Wireframe images require a public HTTPS URL on port 443.');
+  var addresses = await bounded(dns.lookup(url.hostname, { all: true, family: 4 }), signal);
+  if (!addresses.length || addresses.some(function (entry) { return !publicAddress(entry.address); })) throw failure('Wireframe images cannot access private or reserved network addresses.');
+  if (signal.aborted) throw failure('Wireframe image loading cancelled or timed out.');
+  return new Promise(function (resolve, reject) {
+    var request = https.get(url, { signal: signal, agent: false, headers: { Accept: 'image/png' },
+      lookup: function (_, options, callback) { callback(null, options.all ? [addresses[0]] : addresses[0].address, 4); }
+    }, function (response) {
+      if (response.statusCode !== 200) { response.resume(); reject(failure('Wireframe image server returned HTTP ' + response.statusCode + '. Redirects are not followed.')); return; }
+      var chunks = []; var size = 0;
+      response.on('data', function (chunk) {
+        size += chunk.length;
+        if (size > MAX_BYTES) { var error = failure('Wireframe image exceeds 1 MB.'); reject(error); request.destroy(error); }
+        else chunks.push(chunk);
+      });
+      response.on('error', reject);
+      response.on('end', function () { try { resolve(decode(Buffer.concat(chunks))); } catch (e) { reject(e); } });
+    });
+    request.on('error', function (error) { reject(failure('Unable to load wireframe image: ' + error.message)); });
+  });
+}
+async function resolveImages(root, options) {
+  var runs = [];
+  function label(node) { if (node) (node.runs || []).forEach(function (run) { if (run.imageUrl) runs.push(run); }); }
+  function visit(node) {
+    label(node); label(node.titleData);
+    (node.options || []).forEach(label);
+    (node.rows || []).forEach(function (row) { row.forEach(visit); });
+    (node.popups || []).forEach(function (row) { row.forEach(visit); });
+  }
+  // The root's display options differ from a dropdown's option labels.
+  (root.rows || []).forEach(function (row) { row.forEach(visit); }); label(root.titleData);
+  (root.popups || []).forEach(function (row) { row.forEach(visit); });
+  Object.values(root.options.labels).forEach(function (labels) { labels.forEach(label); });
+  var urls = Array.from(new Set(runs.map(function (run) { return run.imageUrl; })));
+  if (urls.length > 4) throw failure('Wireframes support at most four distinct images.');
+  if (!urls.length) return;
+  var controller = new AbortController();
+  var signal = controller.signal;
+  function cancel() { controller.abort(); }
+  if (options.signal) {
+    if (options.signal.aborted) cancel();
+    else options.signal.addEventListener('abort', cancel, { once: true });
+  }
+  var timer = setTimeout(cancel, 10000);
+  var embeddedBytes = 0;
+  try { for (var url of urls) {
+    var resource;
+    try { resource = options.imageLoader ? decode(await bounded(Promise.resolve(options.imageLoader(url, signal)), signal)) : await download(url, signal); }
+    catch (error) { throw Object.assign(failure(error.message), { status: options.signal && options.signal.aborted ? 499 : 422 }); }
+    runs.forEach(function (run) { if (run.imageUrl === url) { run.image = resource; embeddedBytes += resource.data.length; } });
+    if (embeddedBytes > 6 * 1024 * 1024) throw failure('Embedded wireframe images exceed the 6 MB output budget.');
+  } } finally { clearTimeout(timer); if (options.signal) options.signal.removeEventListener('abort', cancel); }
+}
+module.exports = { resolveImages: resolveImages, publicAddress: publicAddress, decode: decode };

package/lib/salt-layout.js

@@ -0,0 +1,60 @@
+// Geometry adapted from PlantUML 1.2026.8 Salt, (c) Arnaud Roques, GPL-3.0-or-later.
+// See LICENSES/plantuml-salt.txt. All distances retain reference fractional precision.
+var text = require('./salt-text');
+function measure(node) {
+  measureNode(node);
+  if (node.width > 8192 || node.height > 8192) throw Object.assign(new Error('Wireframe exceeds the 8192-pixel layout limit. Split it into smaller views.'), { status: 413 });
+}
+function measureNode(node) {
+  if (node.type === 'sprite') return;
+  if (node.type === 'span') { node.width = 0; node.height = 0; return; }
+  if (node.type !== 'container') {
+    var managed = /^(button|input|select)$/.test(node.type);
+    node.label = text.measureLabel(node, managed);
+    node.width = managed ? Math.max(node.label.width, node.charLength * 8) : node.label.width;
+    node.height = node.label.height;
+    if (node.type === 'button') { node.width += 9; node.height += 9; }
+    if (node.type === 'input') { node.width += 6; node.height += 2; }
+    if (node.type === 'select') { node.width += 16; node.height += 4; node.optionLabels = (node.options || []).map(function (option) { return text.measureLabel(option); }); }
+    if (/^(radio|checkbox)$/.test(node.type)) node.width += 20;
+    if (node.type === 'separator') { node.width = 10; node.height = 6; }
+    return;
+  }
+  node.rows.forEach(function (row) { row.forEach(measure); });
+  if (node.style[0] === 'T') return require('./salt-tree').measure(node);
+  if (node.style === '/' || node.style === '*') {
+    node.items = node.rows.flat();
+    (node.popups || []).forEach(function (items) { items.slice(1).forEach(function (item) { measure(item); if (item.text === '-') { item.width = 10; item.height = 5; } }); });
+    node.vertical = node.style === '/' && (node.verticalTabs || node.rows.length > 1);
+    var gap = node.style === '/' ? 15 : 10;
+    node.width = node.vertical ? Math.max(0, ...node.items.map(function (c) { return c.width; })) : node.items.reduce(function (sum, c) { return sum + c.width + gap; }, 0);
+    node.height = node.vertical ? node.items.reduce(function (sum, c) { return sum + c.height + gap; }, 0) : Math.max(0, ...node.items.map(function (c) { return c.height; }));
+    return;
+  }
+  node.titleLabel = node.title ? text.measureLabel(node.titleData || text.parseLabel(node.title)) : { width: 0, height: 0, runs: [] };
+  var titleHeight = node.titleLabel.height;
+  var cols = Math.max(1, ...node.rows.map(function (r) { return r.length; }));
+  node.columns = Array(cols).fill(0);
+  node.heights = Array(Math.max(1, node.rows.length)).fill(0);
+  node.rows.forEach(function (row, r) {
+    row.forEach(function (child, c) {
+      if (child.type === 'span') return;
+      if (!child.span) node.columns[c] = Math.max(node.columns[c], child.width + 2);
+      node.heights[r] = Math.max(node.heights[r], child.height + 2 + (r === 0 ? titleHeight / 2 : 0));
+    });
+  });
+  node.rows.forEach(function (row) { row.forEach(function (child, c) {
+    if (!child.span) return;
+    var available = node.columns.slice(c, c + child.span).reduce(function (a, b) { return a + b; }, 0);
+    node.columns[c + child.span - 1] += Math.max(0, child.width + 2 - available);
+  }); });
+  node.xs = [0]; node.ys = [titleHeight / 2];
+  node.columns.forEach(function (w) { node.xs.push(node.xs[node.xs.length - 1] + w); });
+  node.heights.forEach(function (h) { node.ys.push(node.ys[node.ys.length - 1] + h); });
+  node.width = node.xs[node.xs.length - 1];
+  node.height = node.ys[node.ys.length - 1] + titleHeight;
+  node.contentWidth = node.width; node.contentHeight = node.height;
+  if (node.scroll && node.scroll !== 'S-') node.width += 30;
+  if (node.scroll && node.scroll !== 'SI') node.height += 30;
+}
+module.exports = { measure: measure };

package/lib/salt-options.js

@@ -0,0 +1,23 @@
+// Read only bounded display directives; never evaluate PlantUML preprocessing.
+var color = require('./salt-text').color;
+function parse(body) {
+  var options = { scale: 1, background: '#FFFFFF' };
+  body = body.replace(/^[ \t]*legend[ \t]*\n([\s\S]*?)^[ \t]*end[ \t]*legend[ \t]*$/gim, function (_, value) { options.legend = value.trim(); return ''; });
+  body = body.replace(/^[ \t]*(title|header|footer|caption)[ \t]+([^\n]+)$/gim, function (_, name, value) { options[name.toLowerCase()] = value.trim(); return ''; });
+  body = body.replace(/^\s*!option handwritten (true|false)[ \t]*$/gim, function (_, value) { options.handwritten = value === 'true'; return ''; });
+  body = body.replace(/<style>\s*saltDiagram\s*\{([^}]*)\}\s*<\/style>/gi, function (_, contents) {
+    contents.trim().split(/\n/).forEach(function (line) { setting(line.trim()); }); return '';
+  });
+  function setting(line) {
+    var m = /^(BackgroundColor|dpi|defaultFontName|Fontname|FontSize|FontStyle|LineThickness|LineColor)\s+(\S+)$/i.exec(line);
+    if (!m) throw new Error('Unsupported Salt display setting: ' + line);
+    if (/^BackgroundColor$/i.test(m[1])) options.background = color(m[2]);
+    if (/^dpi$/i.test(m[1])) options.scale = Number(m[2]) / 96;
+    // The reference Salt renderer ignores these font and stroke style settings.
+  }
+  body = body.replace(/^\s*skinparam[ \t]+([^\n]+)$/gim, function (_, value) { setting(value.trim()); return ''; });
+  body = body.replace(/^\s*scale[ \t]+([\d.]+)[ \t]*$/gim, function (_, value) { options.scale = Number(value); return ''; });
+  if (!Number.isFinite(options.scale) || options.scale <= 0 || options.scale > 8) throw new Error('Salt scale must be greater than zero and at most 8.');
+  return { body: body, options: options };
+}
+module.exports = { parse: parse };

package/lib/salt-overlays.js

@@ -0,0 +1,45 @@
+// Adapted from PlantUML Salt controls, GPL-3.0-or-later; see LICENSES/plantuml-salt.txt.
+function dropdown(node, x, y, s) {
+  var labels = node.optionLabels || [];
+  if (!labels.length) return;
+  var width = Math.max(node.width - 1, ...labels.map(function (l) { return l.width; }));
+  var height = labels.reduce(function (a, l) { return a + l.height; }, 0);
+  y += node.height - 1;
+  s.rect(x, y, width - 1, height - 1, '#EEE');
+  labels.forEach(function (label) { s.label(label, x, y); y += label.height; });
+}
+function menu(node, x, y, s) {
+  (node.popups || []).forEach(function (items) {
+    var offset = 0;
+    for (var entry of node.items) { if (entry.text === items[0].text) break; offset += entry.width + 10; }
+    var children = items.slice(1);
+    var width = Math.max(0, ...children.map(function (item) { return item.width; }));
+    var height = children.reduce(function (a, item) { return a + item.height; }, 0);
+    var cy = y + node.height;
+    s.rect(x + offset, cy, width, height, '#DDD');
+    children.forEach(function (item) {
+      if (item.text === '-') s.line(x + offset, cy + item.height / 2, x + offset + width, cy + item.height / 2);
+      else s.label(item.label, x + offset, cy);
+      cy += item.height;
+    });
+  });
+}
+function scroll(node, x, y, s) {
+  var w = node.contentWidth; var h = node.contentHeight;
+  function triangle(xx, yy, points) { s.path(points.map(function (p, i) { return (i ? 'L' : 'M') + (xx + p[0]) + ',' + (yy + p[1]); }).join(' ') + '', '#000', null, xx + 6, yy + 6); }
+  if (node.scroll !== 'S-') {
+    var vx = x + w + 4;
+    s.rect(vx, y, 15, h);
+    s.line(vx, y + 12, vx + 15, y + 12); s.line(vx, y + h - 12, vx + 15, y + h - 12);
+    triangle(vx + 4, y + 4, [[3,0],[6,5],[0,5],[3,0]]);
+    triangle(vx + 4, y + h - 8, [[3,5],[6,0],[0,0],[3,5]]);
+  }
+  if (node.scroll !== 'SI') {
+    var hy = y + h + 4;
+    s.rect(x, hy, w, 15);
+    s.line(x + 12, hy, x + 12, hy + 15); s.line(x + w - 12, hy, x + w - 12, hy + 15);
+    triangle(x + 4, hy + 4, [[0,3],[5,6],[5,0],[0,3]]);
+    triangle(x + w - 8, hy + 4, [[5,3],[0,6],[0,0],[5,3]]);
+  }
+}
+module.exports = { dropdown: dropdown, menu: menu, scroll: scroll };