@formfeed/engine 0.3.6 → 0.3.8

package/index.cjs

@@ -1556,6 +1556,7 @@ function scanBlocks(source, spec) {
           severity: "error",
           code: "unexpected-end-tag",
           message: `Unexpected {% ${keyword} %} without an open block`,
+          args: { keyword },
           range
         });
       } else if (top.keyword !== expected) {
@@ -1563,6 +1564,7 @@ function scanBlocks(source, spec) {
           severity: "error",
           code: "mismatched-end-tag",
           message: `Expected {% end${top.keyword} %} to close the {% ${top.keyword} %} at line ${top.block.open.start.line}, found {% ${keyword} %}`,
+          args: { open: top.keyword, line: top.block.open.start.line, found: keyword },
           range
         });
         const idx = stack.map((s) => s.keyword).lastIndexOf(expected);
@@ -1579,6 +1581,7 @@ function scanBlocks(source, spec) {
         severity: "error",
         code: "unexpected-tag",
         message: `{% ${keyword} %} outside of a block`,
+        args: { keyword },
         range
       });
     }
@@ -1588,6 +1591,7 @@ function scanBlocks(source, spec) {
       severity: "error",
       code: "unclosed-block",
       message: `{% ${open.keyword} %} is never closed; add {% end${open.keyword} %}`,
+      args: { keyword: open.keyword },
       range: open.block.open
     });
   }
@@ -1642,6 +1646,7 @@ function missingPathDiagnostics(variables, sampleData, loopSources, builtinRoots
         severity: "warning",
         code: "unknown-variable",
         message: `"${v.path.join(".")}" is not present in the sample data`,
+        args: { name: v.path.join(".") },
         range: v.range
       });
     }
@@ -1892,6 +1897,7 @@ function analyzeHandlebars(source, opts = {}) {
         severity: "warning",
         code: "deprecated-filter",
         message: `"${f.name}" is a compatibility alias; use "${preferred}"`,
+        args: { name: f.name, preferred },
         range: f.range,
         fix: { title: `Rename to ${preferred}`, replacement: preferred }
       });
@@ -1907,6 +1913,7 @@ function analyzeHandlebars(source, opts = {}) {
         severity: "error",
         code: "unknown-filter",
         message: `Unknown helper "${f.name}"`,
+        args: { name: f.name, kind: "helper" },
         range: f.range
       });
     }
@@ -2701,6 +2708,7 @@ function analyzeJinja2(source, opts = {}) {
         severity: "warning",
         code: "deprecated-filter",
         message: `"${f.name}" is an apitemplate.io compatibility alias; use "${preferred}"`,
+        args: { name: f.name, preferred },
         range: f.range,
         fix: { title: `Rename to ${preferred}`, replacement: preferred }
       });
@@ -2716,6 +2724,7 @@ function analyzeJinja2(source, opts = {}) {
         severity: "error",
         code: "unknown-filter",
         message: `Unknown filter or helper "${f.name}"`,
+        args: { name: f.name, kind: "filter-or-helper" },
         range: f.range
       });
     }
@@ -3116,6 +3125,7 @@ function analyzeLiquid(source, opts = {}) {
         severity: "warning",
         code: "deprecated-filter",
         message: `"${f.name}" is a compatibility alias; use "${preferred}"`,
+        args: { name: f.name, preferred },
         range: f.range,
         fix: { title: `Rename to ${preferred}`, replacement: preferred }
       });
@@ -3131,6 +3141,7 @@ function analyzeLiquid(source, opts = {}) {
         severity: "error",
         code: "unknown-filter",
         message: `Unknown filter "${f.name}"`,
+        args: { name: f.name, kind: "filter" },
         range: f.range
       });
     }
@@ -5663,6 +5674,58 @@ var pageNavScript = `<script>
   }, { passive: true });
 })();
 </script>`;
+function overflowScript(mode) {
+  return `<script>
+(function () {
+  var clipped = function (el, stop) {
+    for (var p = el.parentElement; p && p !== stop; p = p.parentElement)
+      if (getComputedStyle(p).overflowX !== 'visible') return true;
+    return false;
+  };
+  var measure = function () {
+    try {
+      var boxes = ${mode === "paged" ? "document.querySelectorAll('.pagedjs_page_content')" : "[document.body]"};
+      var worst = null;
+      for (var i = 0; i < boxes.length; i++) {
+        var box = boxes[i], rect = box.getBoundingClientRect(), style = getComputedStyle(box);
+        var left = rect.left + parseFloat(style.paddingLeft || '0') + parseFloat(style.borderLeftWidth || '0');
+        var right = rect.right - parseFloat(style.paddingRight || '0') - parseFloat(style.borderRightWidth || '0');
+        if (right - left <= 0) continue;
+        var all = box.querySelectorAll('*');
+        for (var j = 0; j < all.length; j++) {
+          var el = all[j];
+          // Paged.js wraps each page's content in a div of its own that spans its layout columns
+          if (${mode === "paged"} && el.parentElement === box && !el.className) continue;
+          if (el.closest('.formfeed-chrome, .ff-running-header, .ff-running-footer, script, style, head')) continue;
+          var over = el.getBoundingClientRect().right - right;
+          if (over <= 1 || (worst && over <= worst.over)) continue;
+          if (getComputedStyle(el).position === 'fixed' || clipped(el, box)) continue;
+          worst = { over: over, width: right - left, el: el };
+        }
+      }
+      var overflow = null;
+      if (worst) {
+        var ref = document.createElement('div');
+        ref.style.cssText = 'position:absolute;visibility:hidden;width:100mm;height:0';
+        document.body.appendChild(ref);
+        var pxPerMm = ref.getBoundingClientRect().width / 100 || 1;
+        ref.remove();
+        var annotated = worst.el.closest('[data-ff-src]');
+        overflow = {
+          overflowMm: Math.round((worst.over / pxPerMm) * 10) / 10,
+          scale: Math.round((worst.width / (worst.width + worst.over)) * 1000) / 1000,
+          tag: worst.el.tagName.toLowerCase(),
+          src: annotated ? annotated.getAttribute('data-ff-src') : null,
+        };
+      }
+      parent.postMessage({ type: 'formfeed:overflow', overflow: overflow }, '*');
+    } catch (e) {}
+  };
+  window.formfeedCheckOverflow = measure;
+  ${mode === "flow" ? "window.addEventListener('load', function () { (document.fonts ? document.fonts.ready : Promise.resolve()).then(measure); });" : ""}
+})();
+</script>`;
+}
 var zoomGestureScript = `<script>
 (function () {
   var say = function (message) { try { parent.postMessage(message, '*'); } catch (e) {} };
@@ -5709,7 +5772,7 @@ body.formfeed-preview { position: relative; box-sizing: border-box; width: ${pap
 </style>` : `<style data-formfeed="preview">html { background: #e5e7eb; } body.formfeed-preview { margin: 24px auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }</style>`;
   const header = headerHtml ? `<div class="formfeed-chrome" style="${pdf ? flowChromeStyle(settings, "header") : `${chromeBoxStyle(settings, "header")}margin-bottom:8px`}">${headerHtml}</div>` : "";
   const footer = footerHtml ? `<div class="formfeed-chrome" style="${pdf ? flowChromeStyle(settings, "footer") : `${chromeBoxStyle(settings, "footer")}margin-top:8px`}">${pageNumberSpans(footerHtml, "1", "1")}</div>` : "";
-  return intoHead(draft.document, `${chrome}${inspectScript}${zoomGestureScript}`).replace(/(<body[^>]*>)/, `$1${header}`).replace("</body>", `${footer}</body>`);
+  return intoHead(draft.document, `${chrome}${inspectScript}${zoomGestureScript}${pdf ? overflowScript("flow") : ""}`).replace(/(<body[^>]*>)/, `$1${header}`).replace("</body>", `${footer}</body>`);
 }
 function pagedDocument(draft, options) {
   const { headerHtml, footerHtml, settings } = draft;
@@ -5731,13 +5794,13 @@ html { background: #e5e7eb; }
 `;
   const selectorGuard = `<script>(function(){var q=DocumentFragment.prototype.querySelectorAll;DocumentFragment.prototype.querySelectorAll=function(s){try{return q.call(this,s);}catch(e){console.warn('formfeed paged preview: skipped a selector Paged.js could not use:',s);return q.call(this,':not(*)');}};})();</script>`;
   const boxSizingGuard = `<script>(function(){var rule='.pagedjs_pagebox *';var o=new MutationObserver(function(ms){ms.forEach(function(m){m.addedNodes.forEach(function(n){if(n.nodeName==='STYLE'&&n.textContent&&n.textContent.indexOf(rule)>=0){n.textContent=n.textContent.split(rule).join('.pagedjs_pagebox [class*="pagedjs_"]');o.disconnect();}});});});o.observe(document.documentElement,{childList:true,subtree:true});})();</script>`;
-  const config = `<script>window.PagedConfig = { auto: true, after: function (flow) { try { if (window.formfeedDrawCharts) window.formfeedDrawCharts(); } catch (e) {} try { parent.postMessage({ type: 'formfeed:pages', pages: flow.total }, '*'); } catch (e) {} } };</script>`;
+  const config = `<script>window.PagedConfig = { auto: true, after: function (flow) { try { if (window.formfeedDrawCharts) window.formfeedDrawCharts(); } catch (e) {} try { parent.postMessage({ type: 'formfeed:pages', pages: flow.total }, '*'); } catch (e) {} if (window.formfeedCheckOverflow) window.formfeedCheckOverflow(); } };</script>`;
   const script = `<script src="${options.pagedScriptUrl}"></script>`;
   const header = headerHtml ? `<div class="ff-running-header">${pageNumberSpans(headerHtml, '<span class="ff-page-no"></span>', '<span class="ff-page-total"></span>')}</div>` : "";
   const footer = footerHtml ? `<div class="ff-running-footer">${pageNumberSpans(footerHtml, '<span class="ff-page-no"></span>', '<span class="ff-page-total"></span>')}</div>` : "";
   return intoHead(
     draft.document,
-    `<style data-formfeed="paged">${runningCss}</style>${selectorGuard}${boxSizingGuard}${config}${script}${inspectScript}${pageNavScript}${zoomGestureScript}`
+    `<style data-formfeed="paged">${runningCss}</style>${selectorGuard}${boxSizingGuard}${overflowScript("paged")}${config}${script}${inspectScript}${pageNavScript}${zoomGestureScript}`
   ).replace(/(<body[^>]*>)/, `$1${header}${footer}`);
 }
 

package/index.js

@@ -1421,6 +1421,7 @@ function scanBlocks(source, spec) {
           severity: "error",
           code: "unexpected-end-tag",
           message: `Unexpected {% ${keyword} %} without an open block`,
+          args: { keyword },
           range
         });
       } else if (top.keyword !== expected) {
@@ -1428,6 +1429,7 @@ function scanBlocks(source, spec) {
           severity: "error",
           code: "mismatched-end-tag",
           message: `Expected {% end${top.keyword} %} to close the {% ${top.keyword} %} at line ${top.block.open.start.line}, found {% ${keyword} %}`,
+          args: { open: top.keyword, line: top.block.open.start.line, found: keyword },
           range
         });
         const idx = stack.map((s) => s.keyword).lastIndexOf(expected);
@@ -1444,6 +1446,7 @@ function scanBlocks(source, spec) {
         severity: "error",
         code: "unexpected-tag",
         message: `{% ${keyword} %} outside of a block`,
+        args: { keyword },
         range
       });
     }
@@ -1453,6 +1456,7 @@ function scanBlocks(source, spec) {
       severity: "error",
       code: "unclosed-block",
       message: `{% ${open.keyword} %} is never closed; add {% end${open.keyword} %}`,
+      args: { keyword: open.keyword },
       range: open.block.open
     });
   }
@@ -1507,6 +1511,7 @@ function missingPathDiagnostics(variables, sampleData, loopSources, builtinRoots
         severity: "warning",
         code: "unknown-variable",
         message: `"${v.path.join(".")}" is not present in the sample data`,
+        args: { name: v.path.join(".") },
         range: v.range
       });
     }
@@ -1757,6 +1762,7 @@ function analyzeHandlebars(source, opts = {}) {
         severity: "warning",
         code: "deprecated-filter",
         message: `"${f.name}" is a compatibility alias; use "${preferred}"`,
+        args: { name: f.name, preferred },
         range: f.range,
         fix: { title: `Rename to ${preferred}`, replacement: preferred }
       });
@@ -1772,6 +1778,7 @@ function analyzeHandlebars(source, opts = {}) {
         severity: "error",
         code: "unknown-filter",
         message: `Unknown helper "${f.name}"`,
+        args: { name: f.name, kind: "helper" },
         range: f.range
       });
     }
@@ -2566,6 +2573,7 @@ function analyzeJinja2(source, opts = {}) {
         severity: "warning",
         code: "deprecated-filter",
         message: `"${f.name}" is an apitemplate.io compatibility alias; use "${preferred}"`,
+        args: { name: f.name, preferred },
         range: f.range,
         fix: { title: `Rename to ${preferred}`, replacement: preferred }
       });
@@ -2581,6 +2589,7 @@ function analyzeJinja2(source, opts = {}) {
         severity: "error",
         code: "unknown-filter",
         message: `Unknown filter or helper "${f.name}"`,
+        args: { name: f.name, kind: "filter-or-helper" },
         range: f.range
       });
     }
@@ -2981,6 +2990,7 @@ function analyzeLiquid(source, opts = {}) {
         severity: "warning",
         code: "deprecated-filter",
         message: `"${f.name}" is a compatibility alias; use "${preferred}"`,
+        args: { name: f.name, preferred },
         range: f.range,
         fix: { title: `Rename to ${preferred}`, replacement: preferred }
       });
@@ -2996,6 +3006,7 @@ function analyzeLiquid(source, opts = {}) {
         severity: "error",
         code: "unknown-filter",
         message: `Unknown filter "${f.name}"`,
+        args: { name: f.name, kind: "filter" },
         range: f.range
       });
     }
@@ -5528,6 +5539,58 @@ var pageNavScript = `<script>
   }, { passive: true });
 })();
 </script>`;
+function overflowScript(mode) {
+  return `<script>
+(function () {
+  var clipped = function (el, stop) {
+    for (var p = el.parentElement; p && p !== stop; p = p.parentElement)
+      if (getComputedStyle(p).overflowX !== 'visible') return true;
+    return false;
+  };
+  var measure = function () {
+    try {
+      var boxes = ${mode === "paged" ? "document.querySelectorAll('.pagedjs_page_content')" : "[document.body]"};
+      var worst = null;
+      for (var i = 0; i < boxes.length; i++) {
+        var box = boxes[i], rect = box.getBoundingClientRect(), style = getComputedStyle(box);
+        var left = rect.left + parseFloat(style.paddingLeft || '0') + parseFloat(style.borderLeftWidth || '0');
+        var right = rect.right - parseFloat(style.paddingRight || '0') - parseFloat(style.borderRightWidth || '0');
+        if (right - left <= 0) continue;
+        var all = box.querySelectorAll('*');
+        for (var j = 0; j < all.length; j++) {
+          var el = all[j];
+          // Paged.js wraps each page's content in a div of its own that spans its layout columns
+          if (${mode === "paged"} && el.parentElement === box && !el.className) continue;
+          if (el.closest('.formfeed-chrome, .ff-running-header, .ff-running-footer, script, style, head')) continue;
+          var over = el.getBoundingClientRect().right - right;
+          if (over <= 1 || (worst && over <= worst.over)) continue;
+          if (getComputedStyle(el).position === 'fixed' || clipped(el, box)) continue;
+          worst = { over: over, width: right - left, el: el };
+        }
+      }
+      var overflow = null;
+      if (worst) {
+        var ref = document.createElement('div');
+        ref.style.cssText = 'position:absolute;visibility:hidden;width:100mm;height:0';
+        document.body.appendChild(ref);
+        var pxPerMm = ref.getBoundingClientRect().width / 100 || 1;
+        ref.remove();
+        var annotated = worst.el.closest('[data-ff-src]');
+        overflow = {
+          overflowMm: Math.round((worst.over / pxPerMm) * 10) / 10,
+          scale: Math.round((worst.width / (worst.width + worst.over)) * 1000) / 1000,
+          tag: worst.el.tagName.toLowerCase(),
+          src: annotated ? annotated.getAttribute('data-ff-src') : null,
+        };
+      }
+      parent.postMessage({ type: 'formfeed:overflow', overflow: overflow }, '*');
+    } catch (e) {}
+  };
+  window.formfeedCheckOverflow = measure;
+  ${mode === "flow" ? "window.addEventListener('load', function () { (document.fonts ? document.fonts.ready : Promise.resolve()).then(measure); });" : ""}
+})();
+</script>`;
+}
 var zoomGestureScript = `<script>
 (function () {
   var say = function (message) { try { parent.postMessage(message, '*'); } catch (e) {} };
@@ -5574,7 +5637,7 @@ body.formfeed-preview { position: relative; box-sizing: border-box; width: ${pap
 </style>` : `<style data-formfeed="preview">html { background: #e5e7eb; } body.formfeed-preview { margin: 24px auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }</style>`;
   const header = headerHtml ? `<div class="formfeed-chrome" style="${pdf ? flowChromeStyle(settings, "header") : `${chromeBoxStyle(settings, "header")}margin-bottom:8px`}">${headerHtml}</div>` : "";
   const footer = footerHtml ? `<div class="formfeed-chrome" style="${pdf ? flowChromeStyle(settings, "footer") : `${chromeBoxStyle(settings, "footer")}margin-top:8px`}">${pageNumberSpans(footerHtml, "1", "1")}</div>` : "";
-  return intoHead(draft.document, `${chrome}${inspectScript}${zoomGestureScript}`).replace(/(<body[^>]*>)/, `$1${header}`).replace("</body>", `${footer}</body>`);
+  return intoHead(draft.document, `${chrome}${inspectScript}${zoomGestureScript}${pdf ? overflowScript("flow") : ""}`).replace(/(<body[^>]*>)/, `$1${header}`).replace("</body>", `${footer}</body>`);
 }
 function pagedDocument(draft, options) {
   const { headerHtml, footerHtml, settings } = draft;
@@ -5596,13 +5659,13 @@ html { background: #e5e7eb; }
 `;
   const selectorGuard = `<script>(function(){var q=DocumentFragment.prototype.querySelectorAll;DocumentFragment.prototype.querySelectorAll=function(s){try{return q.call(this,s);}catch(e){console.warn('formfeed paged preview: skipped a selector Paged.js could not use:',s);return q.call(this,':not(*)');}};})();</script>`;
   const boxSizingGuard = `<script>(function(){var rule='.pagedjs_pagebox *';var o=new MutationObserver(function(ms){ms.forEach(function(m){m.addedNodes.forEach(function(n){if(n.nodeName==='STYLE'&&n.textContent&&n.textContent.indexOf(rule)>=0){n.textContent=n.textContent.split(rule).join('.pagedjs_pagebox [class*="pagedjs_"]');o.disconnect();}});});});o.observe(document.documentElement,{childList:true,subtree:true});})();</script>`;
-  const config = `<script>window.PagedConfig = { auto: true, after: function (flow) { try { if (window.formfeedDrawCharts) window.formfeedDrawCharts(); } catch (e) {} try { parent.postMessage({ type: 'formfeed:pages', pages: flow.total }, '*'); } catch (e) {} } };</script>`;
+  const config = `<script>window.PagedConfig = { auto: true, after: function (flow) { try { if (window.formfeedDrawCharts) window.formfeedDrawCharts(); } catch (e) {} try { parent.postMessage({ type: 'formfeed:pages', pages: flow.total }, '*'); } catch (e) {} if (window.formfeedCheckOverflow) window.formfeedCheckOverflow(); } };</script>`;
   const script = `<script src="${options.pagedScriptUrl}"></script>`;
   const header = headerHtml ? `<div class="ff-running-header">${pageNumberSpans(headerHtml, '<span class="ff-page-no"></span>', '<span class="ff-page-total"></span>')}</div>` : "";
   const footer = footerHtml ? `<div class="ff-running-footer">${pageNumberSpans(footerHtml, '<span class="ff-page-no"></span>', '<span class="ff-page-total"></span>')}</div>` : "";
   return intoHead(
     draft.document,
-    `<style data-formfeed="paged">${runningCss}</style>${selectorGuard}${boxSizingGuard}${config}${script}${inspectScript}${pageNavScript}${zoomGestureScript}`
+    `<style data-formfeed="paged">${runningCss}</style>${selectorGuard}${boxSizingGuard}${overflowScript("paged")}${config}${script}${inspectScript}${pageNavScript}${zoomGestureScript}`
   ).replace(/(<body[^>]*>)/, `$1${header}${footer}`);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formfeed/engine",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "The Formfeed template engine (Jinja2, Liquid, Handlebars) for the browser and Node.",
   "license": "MIT",
   "type": "module",

package/types/index.d.cts

@@ -22,7 +22,7 @@ export type { JsonSchema, SchemaChange, SchemaChangeKind, SchemaDiff } from './l
 export { DEFAULT_CHROME_PADDING, assembleDocument, chartInitScript, defaultSettings, fontFaceCss, mergeSettings, pageSize, printReset, renderVersion, } from './lib/assemble.cjs';
 export type { ChartSpec, ImageOptions } from './lib/helpers/index.cjs';
 export { flowDocument, pagedDocument, pageNumberSpans, paperOf, zoomGestureScript } from './lib/preview.cjs';
-export type { PagedOptions, RenderedDraft } from './lib/preview.cjs';
+export type { PagedOptions, PreviewOverflow, RenderedDraft } from './lib/preview.cjs';
 export { annotateSourcePositions, parseSourceAttribute, sourceAttribute, } from './lib/source-positions.cjs';
 export type { SourceFile, SourceLocation } from './lib/source-positions.cjs';
 export type { AssembleExtras, AssembleInput, AssembleVendor, FontFace, HeaderFooterSettings, RenderedDocument, TemplateKind, TemplateSettings, VersionSource, } from './lib/assemble.cjs';

package/types/index.d.ts

@@ -22,7 +22,7 @@ export type { JsonSchema, SchemaChange, SchemaChangeKind, SchemaDiff } from './l
 export { DEFAULT_CHROME_PADDING, assembleDocument, chartInitScript, defaultSettings, fontFaceCss, mergeSettings, pageSize, printReset, renderVersion, } from './lib/assemble.js';
 export type { ChartSpec, ImageOptions } from './lib/helpers/index.js';
 export { flowDocument, pagedDocument, pageNumberSpans, paperOf, zoomGestureScript } from './lib/preview.js';
-export type { PagedOptions, RenderedDraft } from './lib/preview.js';
+export type { PagedOptions, PreviewOverflow, RenderedDraft } from './lib/preview.js';
 export { annotateSourcePositions, parseSourceAttribute, sourceAttribute, } from './lib/source-positions.js';
 export type { SourceFile, SourceLocation } from './lib/source-positions.js';
 export type { AssembleExtras, AssembleInput, AssembleVendor, FontFace, HeaderFooterSettings, RenderedDocument, TemplateKind, TemplateSettings, VersionSource, } from './lib/assemble.js';

package/types/lib/preview.d.cts

@@ -22,6 +22,19 @@ export declare function paperOf(settings: TemplateSettings): {
  * the element stays so its styling applies.
  */
 export declare const pageNumberSpans: (html: string, page: string, total: string) => string;
+/** What the preview frame reports about content wider than the page, or `null` when nothing is. */
+export interface PreviewOverflow {
+    /** How far the widest element reaches past the right edge of the page's content area. */
+    overflowMm: number;
+    /**
+     * The factor Chromium shrinks every page of the PDF by to fit that element: the content width
+     * divided by the width the element needs.
+     */
+    scale: number;
+    tag: string;
+    /** `data-ff-src` of the element or its nearest annotated ancestor, as click-to-source reports it. */
+    src: string | null;
+}
 /**
  * Zoom gestures inside a preview frame: Ctrl+wheel (a touchpad pinch arrives as one too) and
  * Ctrl+plus/minus/0 would zoom the whole app, and the sandboxed frame's events never reach the app,

package/types/lib/preview.d.ts

@@ -22,6 +22,19 @@ export declare function paperOf(settings: TemplateSettings): {
  * the element stays so its styling applies.
  */
 export declare const pageNumberSpans: (html: string, page: string, total: string) => string;
+/** What the preview frame reports about content wider than the page, or `null` when nothing is. */
+export interface PreviewOverflow {
+    /** How far the widest element reaches past the right edge of the page's content area. */
+    overflowMm: number;
+    /**
+     * The factor Chromium shrinks every page of the PDF by to fit that element: the content width
+     * divided by the width the element needs.
+     */
+    scale: number;
+    tag: string;
+    /** `data-ff-src` of the element or its nearest annotated ancestor, as click-to-source reports it. */
+    src: string | null;
+}
 /**
  * Zoom gestures inside a preview frame: Ctrl+wheel (a touchpad pinch arrives as one too) and
  * Ctrl+plus/minus/0 would zoom the whole app, and the sandboxed frame's events never reach the app,

package/types/lib/types.d.cts

@@ -25,6 +25,11 @@ export interface Diagnostic {
         title: string;
         replacement: string;
     };
+    /**
+     * The values `message` was built from (a variable path, a helper name, a block keyword), so the
+     * editor can say the same in the reader's language; `message` stays the English text.
+     */
+    args?: Record<string, string | number>;
 }
 export interface VariableRef {
     path: string[];

package/types/lib/types.d.ts

@@ -25,6 +25,11 @@ export interface Diagnostic {
         title: string;
         replacement: string;
     };
+    /**
+     * The values `message` was built from (a variable path, a helper name, a block keyword), so the
+     * editor can say the same in the reader's language; `message` stays the English text.
+     */
+    args?: Record<string, string | number>;
 }
 export interface VariableRef {
     path: string[];