@myrmidon/gve-snapshot-rendition 2.0.7 → 2.0.10

package/dist/index.js

@@ -12,6 +12,8 @@ const DEFAULT_SETTINGS = {
     underline: undefined,
     overline: undefined,
     strike: undefined,
+    textLineStyle: undefined,
+    textLineColor: undefined,
     // Spacing settings
     spaceWidthFraction: 0.33,
     charSpacing: 2,
@@ -695,9 +697,13 @@ function applyTextStyle(element, style) {
         attrs["font-style"] = "italic";
     if (style.bold)
         attrs["font-weight"] = "bold";
-    if (style.rotate)
-        attrs["transform"] = `rotate(${style.rotate})`;
-    // Text decorations
+    setAttributes(element, attrs);
+    // Text decorations. Applied via inline CSS longhands (not the SVG
+    // text-decoration attribute) so that thickness, line style and color are
+    // honored by the text layout engine and follow the glyphs when the
+    // character is rotated. NOTE: per-character rotation is NOT handled here,
+    // because a plain rotate() would spin the glyph around the SVG origin;
+    // renderers apply rotate(deg, x, y) around each character's own anchor.
     const decorations = [];
     if (style.underline)
         decorations.push("underline");
@@ -706,9 +712,20 @@ function applyTextStyle(element, style) {
     if (style.strike)
         decorations.push("line-through");
     if (decorations.length > 0) {
-        attrs["text-decoration"] = decorations.join(" ");
+        element.style.textDecorationLine = decorations.join(" ");
+        // CSS has a single thickness for all decoration lines of an element:
+        // use the first non-zero one (they are rarely combined).
+        const thickness = style.underline || style.overline || style.strike;
+        if (thickness && thickness > 0) {
+            element.style.textDecorationThickness = `${thickness}px`;
+        }
+        if (style.textLineStyle) {
+            element.style.textDecorationStyle = style.textLineStyle;
+        }
+        if (style.textLineColor) {
+            element.style.textDecorationColor = style.textLineColor;
+        }
     }
-    setAttributes(element, attrs);
 }
 /**
  * Parse SVG from string and return the root element.
@@ -803,6 +820,32 @@ function getTransformedBBox(element) {
         return new DOMRect(0, 0, 0, 0);
     }
 }
+/**
+ * Compute the axis-aligned bounding box of a rectangle rotated around a
+ * point, using SVG rotation direction (positive = clockwise, y-axis down).
+ *
+ * Used to cache correct bounds for per-character rotated text: getBBox()
+ * returns LOCAL coordinates which ignore the rotate(deg, x, y) transform
+ * applied to the element, while getTransformedBBox() would also bake in
+ * ancestor transforms (e.g. the pan/zoom viewport), which must stay out
+ * of the bounds cache.
+ */
+function rotateRectAroundPoint(rect, degrees, cx, cy) {
+    const rad = (degrees * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const corners = [
+        [rect.x, rect.y],
+        [rect.x + rect.width, rect.y],
+        [rect.x, rect.y + rect.height],
+        [rect.x + rect.width, rect.y + rect.height],
+    ];
+    const xs = corners.map(([x, y]) => cx + (x - cx) * cos - (y - cy) * sin);
+    const ys = corners.map(([x, y]) => cy + (x - cx) * sin + (y - cy) * cos);
+    const minX = Math.min(...xs);
+    const minY = Math.min(...ys);
+    return new DOMRect(minX, minY, Math.max(...xs) - minX, Math.max(...ys) - minY);
+}
 /**
  * Get computed text width for a given text and style.
  * Creates a temporary SVG element to measure.
@@ -921,16 +964,30 @@ function parseOffset(value, textHeight, textWidth) {
 }
 /**
  * Replace placeholders in SVG content.
- * Placeholders are in the format {{featureName}}.
+ * Placeholders are in the format {{featureName}}, or a fallback chain
+ * {{name ?? other ?? ...}}: names are tried left to right and the first one
+ * having a variable wins. There is no limit to the number of fallbacks.
+ * For instance {{r_fore-color ?? r_color}} resolves to the value of
+ * r_fore-color when defined, otherwise to the value of r_color.
  *
  * @param svgContent - The SVG content with placeholders
  * @param variables - Map of variable names to values
  * @returns SVG content with placeholders replaced
  */
 function resolvePlaceholders(svgContent, variables) {
-    // Match {{placeholder}} where placeholder can contain letters, numbers, hyphens, and underscores
-    return svgContent.replace(/\{\{([\w\-]+)\}\}/g, (match, name) => {
-        return variables.get(name) || match; // Keep placeholder if not found
+    // Match {{name}} or {{name ?? name ?? ...}} where each name can contain
+    // letters, numbers, hyphens, and underscores
+    return svgContent.replace(/\{\{\s*([\w\-]+(?:\s*\?\?\s*[\w\-]+)*)\s*\}\}/g, (match, chain) => {
+        const names = chain.split("??").map((n) => n.trim());
+        for (const name of names) {
+            const value = variables.get(name);
+            // An empty string is a defined value; only a missing variable
+            // falls through to the next name in the chain
+            if (value !== undefined) {
+                return value;
+            }
+        }
+        return match; // Keep placeholder if no name in the chain resolves
     });
 }
 
@@ -1028,12 +1085,17 @@ function parseDisplacedSpan(value) {
  */
 function parseHintVars(value) {
     const result = new Map();
-    // Match pattern name=value
+    // Match pattern name=value, splitting at the first "=" only so that
+    // values containing "=" (e.g. URLs with query strings) survive intact
     const pairs = value.trim().split(/\s+/);
     for (const pair of pairs) {
-        const [name, val] = pair.split("=");
+        const sepIndex = pair.indexOf("=");
+        if (sepIndex <= 0)
+            continue;
+        const name = pair.substring(0, sepIndex).trim();
+        const val = pair.substring(sepIndex + 1).trim();
         if (name && val) {
-            result.set(name.trim(), val.trim());
+            result.set(name, val);
         }
     }
     return result;
@@ -1300,9 +1362,11 @@ class TextRenderer {
             const node = nodes[i];
             const pos = positions[i];
             // Cache bounds for spaces even though they're not rendered
-            // This is needed for RBR calculations that include spaces
+            // This is needed for RBR calculations that include spaces.
+            // Use the layout's space width (reference char width × fraction) so the
+            // cached bounds match the horizontal advance actually applied.
             if (isSpace(node)) {
-                const spaceWidth = this._settings.fontSize * this._settings.spaceWidthFraction;
+                const spaceWidth = this._textLayout.getSpaceWidth();
                 const spaceY = pos.y - this._settings.fontSize; // Approximate top of character
                 // Create a DOMRect-like object for the space bounds
                 const spaceBounds = {
@@ -1352,6 +1416,11 @@ class TextRenderer {
                 backColor: config.backColor,
                 italic: config.italic,
                 bold: config.bold,
+                underline: config.underline,
+                overline: config.overline,
+                strike: config.strike,
+                textLineStyle: config.textLineStyle,
+                textLineColor: config.textLineColor,
             });
         }
         else {
@@ -1362,12 +1431,24 @@ class TextRenderer {
                 backColor: this._settings.backColor,
                 italic: this._settings.italic,
                 bold: this._settings.bold,
+                underline: this._settings.underline,
+                overline: this._settings.overline,
+                strike: this._settings.strike,
+                textLineStyle: this._settings.textLineStyle,
+                textLineColor: this._settings.textLineColor,
             });
         }
+        // Per-character rotation (r_rotate): rotate each glyph around its own
+        // anchor point (the character's baseline position), not the SVG origin.
+        const rotate = config?.rotate;
+        if (rotate) {
+            textEl.setAttribute("transform", `rotate(${rotate}, ${position.x}, ${position.y})`);
+        }
         rootSvg.appendChild(textEl);
-        // Cache bounds
+        // Cache bounds. getBBox() ignores the element's own transform, so for
+        // rotated characters the cached rect is recomputed around the anchor.
         const bbox = getSafeBBox(textEl);
-        this._boundsCache.set(`n_${node.id}`, bbox);
+        this._boundsCache.set(`n_${node.id}`, rotate ? rotateRectAroundPoint(bbox, rotate, position.x, position.y) : bbox);
         // Animate if function provided
         if (animationFn) {
             // Set initial opacity to 0 for animation via CSS style (GSAP animates CSS)
@@ -1394,6 +1475,7 @@ class TextRenderer {
         this._logger.info(`Rendering ${nodes.length} additional text characters for ${versionTag}`);
         if (nodes.length === 0) {
             this._logger.warn("No nodes to render");
+            this._logger.timeEnd(`renderAdditionalText-${versionTag}`);
             return;
         }
         // Apply r_t-value override if specified
@@ -1410,8 +1492,8 @@ class TextRenderer {
             }
             // If r_t-value has fewer characters, we need to only render those nodes
             if (overrideChars.length < nodes.length) {
-                nodes = nodes.slice(0, overrideChars.length);
                 this._logger.debug("TextRenderer", `r_t-value has fewer characters (${overrideChars.length}) than nodes (${nodes.length}), only rendering first ${overrideChars.length} characters`);
+                nodes = nodes.slice(0, overrideChars.length);
             }
         }
         // 1. Calculate RBR (or use displaced span if specified)
@@ -1425,6 +1507,7 @@ class TextRenderer {
         }
         if (rbrs.length === 0) {
             this._logger.warn("No RBRs calculated for additional text, skipping");
+            this._logger.timeEnd(`renderAdditionalText-${versionTag}`);
             return;
         }
         // Use first RBR for positioning (additional text doesn't repeat per RBR)
@@ -1465,7 +1548,17 @@ class TextRenderer {
                 backColor: config.backColor,
                 italic: config.italic,
                 bold: config.bold,
+                underline: config.underline,
+                overline: config.overline,
+                strike: config.strike,
+                textLineStyle: config.textLineStyle,
+                textLineColor: config.textLineColor,
             });
+            // Per-character rotation (r_rotate) is a size transform: apply it
+            // before measuring so the EBR accounts for the rotated glyphs.
+            if (config.rotate) {
+                textEl.setAttribute("transform", `rotate(${config.rotate}, ${pos.x}, ${pos.y})`);
+            }
             tempGroup.appendChild(textEl);
             measuredElements.push({ el: textEl, node, initX: pos.x, initY: pos.y });
         }
@@ -1522,11 +1615,22 @@ class TextRenderer {
             : undefined;
         // 9. Move each element to its final position and add to the SVG
         for (const { el, node, initX, initY } of measuredElements) {
-            el.setAttribute("x", String(initX + dx));
-            el.setAttribute("y", String(initY + dy));
+            const finalX = initX + dx;
+            const finalY = initY + dy;
+            el.setAttribute("x", String(finalX));
+            el.setAttribute("y", String(finalY));
+            // Re-anchor the per-character rotation to the moved position, or the
+            // glyph would rotate around the pre-translation measuring anchor.
+            if (config.rotate) {
+                el.setAttribute("transform", `rotate(${config.rotate}, ${finalX}, ${finalY})`);
+            }
             rootSvg.appendChild(el);
+            // getBBox() ignores the element's own transform, so for rotated
+            // characters the cached rect is recomputed around the anchor.
             const bbox = getSafeBBox(el);
-            this._boundsCache.set(`n_${node.id}`, bbox);
+            this._boundsCache.set(`n_${node.id}`, config.rotate
+                ? rotateRectAroundPoint(bbox, config.rotate, finalX, finalY)
+                : bbox);
             if (animationFn) {
                 el.style.opacity = "0";
                 await this._animationEngine.animate(el, animationFn, rootSvg);
@@ -1543,23 +1647,34 @@ class TextRenderer {
     calculateAdditionalTextPositions(nodes, baseX, baseY, config) {
         const positions = [];
         let currentX = baseX;
-        const currentY = baseY;
+        let currentY = baseY;
+        let lineNumber = 0;
         const fontSize = config?.fontSize ?? this._settings.fontSize;
         const fontFamily = config?.fontFamily ?? this._settings.fontFamily;
         const bold = config?.bold ?? this._settings.bold;
         const italic = config?.italic ?? this._settings.italic;
+        // Space width follows the same rule as base text: a fraction
+        // (spaceWidthFraction) of the reference character's width in the
+        // effective font, not of the font size.
+        const spaceWidth = getAverageCharWidth(fontFamily, fontSize, bold, italic, this._measurementRoot) *
+            this._settings.spaceWidthFraction;
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i];
             if (isLineBreak(node)) {
-                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
+                // Line break: start a new line, mirroring base text layout. Uses the
+                // effective font size so smaller/larger added text wraps accordingly.
+                currentX = baseX;
+                currentY +=
+                    fontSize * this._settings.lineHeight + this._settings.lineSpacing;
+                lineNumber++;
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber });
             }
             else if (isSpace(node)) {
-                const spaceWidth = fontSize * 0.33;
-                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber });
                 currentX += spaceWidth + this._settings.charSpacing;
             }
             else {
-                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber });
                 const charWidth = getTextWidth(node.data, fontFamily, fontSize, bold, italic, this._measurementRoot);
                 currentX += charWidth + this._settings.charSpacing;
             }
@@ -1625,8 +1740,15 @@ class TextRenderer {
         if (nodes.length === 0)
             return [];
         const rbrs = [];
-        const nodeElementIds = nodes.map((n) => `n_${n.id}`);
         // Group nodes by line by checking their Y coordinates.
+        // IMPORTANT: spaces and line breaks are skipped, exactly as in
+        // HintRenderer.calculateRBRs. They have no SVG element, so the baseline
+        // read below would fall back to their cached synthetic bounds top
+        // (baseline - fontSize), which differs from neighboring characters'
+        // baseline by ~fontSize — far beyond the 5px tolerance — falsely
+        // splitting a single line into one group per word. Interior spaces
+        // don't affect the union bounds anyway, since the flanking characters
+        // cover their x-range.
         // IMPORTANT: this compares the character's laid-out baseline Y (the `y`
         // attribute TextLayout assigned when positioning it), NOT its cached
         // getBBox().y. The tight ink bbox top varies per glyph shape (ascenders,
@@ -1636,7 +1758,11 @@ class TextRenderer {
         const lineGroups = [];
         let currentLineGroup = [];
         let lastBaselineY = null;
-        for (const elementId of nodeElementIds) {
+        for (const node of nodes) {
+            if (isSpace(node) || isLineBreak(node)) {
+                continue;
+            }
+            const elementId = `n_${node.id}`;
             const bounds = this._boundsCache.get(elementId);
             if (!bounds) {
                 this._logger.warn(`Bounds not found for node element ${elementId}`);
@@ -1659,6 +1785,17 @@ class TextRenderer {
         if (currentLineGroup.length > 0) {
             lineGroups.push(currentLineGroup);
         }
+        // Fallback: if every reference node is invisible (e.g. the operation's
+        // reference span is a lone space), use the cached synthetic bounds of
+        // all nodes as a single group so the added text still gets an RBR.
+        if (lineGroups.length === 0) {
+            const cachedIds = nodes
+                .map((n) => `n_${n.id}`)
+                .filter((id) => this._boundsCache.get(id) !== undefined);
+            if (cachedIds.length > 0) {
+                lineGroups.push(cachedIds);
+            }
+        }
         // Calculate RBR for each line group
         for (const group of lineGroups) {
             const rbr = this._boundsCache.getUnionBounds(group);
@@ -2241,6 +2378,8 @@ class FeatureResolver {
             underline: baseSettings.underline,
             overline: baseSettings.overline,
             strike: baseSettings.strike,
+            textLineStyle: baseSettings.textLineStyle,
+            textLineColor: baseSettings.textLineColor,
             textOffsetX: 0,
             textOffsetY: 0,
         };
@@ -2423,9 +2562,13 @@ class FeatureResolver {
                 return;
             }
         }
-        // If no hints defined yet in config, we'll still store the override.
-        // It will be applied when hints are processed.
-        const hints = targetHints ?? (config.hints ?? ["*"]);
+        // Untargeted overrides (no "@" prefix) are always stored under the "*"
+        // wildcard key. Storing them under the hint keys from config.hints would
+        // (a) depend on whether r_hints was parsed before this feature, and
+        // (b) give them key-level priority, letting them overwrite an explicit
+        // "@key:" override for the same property — the documented precedence is
+        // ordinal > key > wildcard (see applyHintOverrides in HintRenderer).
+        const hints = targetHints ?? ["*"];
         for (const hintKey of hints) {
             // Get or create override object for this hint key / ordinal
             let override = config.hintOverrides.get(hintKey);
@@ -25588,375 +25731,375 @@ class GoldenLayout extends VirtualLayout {
  * Source: golden-layout@2.6.0 dist/css/goldenlayout-base.css + adapted light theme.
  * Update this file when upgrading golden-layout.
  */
-const GOLDEN_LAYOUT_CSS = `
-/* ── Golden Layout base ──────────────────────────────────────────────── */
-.lm_root {
-  position: relative;
-}
-.lm_row > .lm_item {
-  float: left;
-}
-.lm_content {
-  overflow: hidden;
-  position: relative;
-}
-.lm_dragging,
-.lm_dragging * {
-  cursor: move !important;
-  user-select: none;
-}
-.lm_maximised {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 40;
-}
-.lm_maximise_placeholder {
-  display: none;
-}
-.lm_splitter {
-  position: relative;
-  z-index: 2;
-  touch-action: none;
-}
-.lm_splitter.lm_vertical .lm_drag_handle {
-  width: 100%;
-  position: absolute;
-  cursor: ns-resize;
-  touch-action: none;
-  user-select: none;
-}
-.lm_splitter.lm_horizontal {
-  float: left;
-  height: 100%;
-}
-.lm_splitter.lm_horizontal .lm_drag_handle {
-  height: 100%;
-  position: absolute;
-  cursor: ew-resize;
-  touch-action: none;
-  user-select: none;
-}
-.lm_header {
-  overflow: visible;
-  position: relative;
-  z-index: 1;
-  user-select: none;
-}
-.lm_header [class^=lm_] {
-  box-sizing: content-box !important;
-}
-.lm_header .lm_controls {
-  position: absolute;
-  right: 3px;
-  display: flex;
-}
-.lm_header .lm_controls > * {
-  cursor: pointer;
-  float: left;
-  width: 18px;
-  height: 18px;
-  text-align: center;
-}
-.lm_header .lm_tabs {
-  position: absolute;
-  display: flex;
-}
-.lm_header .lm_tab {
-  cursor: pointer;
-  float: left;
-  height: 14px;
-  margin-top: 1px;
-  padding: 0px 10px 5px;
-  padding-right: 25px;
-  position: relative;
-  touch-action: none;
-}
-.lm_header .lm_tab i {
-  width: 2px;
-  height: 19px;
-  position: absolute;
-}
-.lm_header .lm_tab i.lm_left {
-  top: 0;
-  left: -2px;
-}
-.lm_header .lm_tab i.lm_right {
-  top: 0;
-  right: -2px;
-}
-.lm_header .lm_tab .lm_title {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.lm_header .lm_tab .lm_close_tab {
-  width: 14px;
-  height: 14px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  text-align: center;
-}
-.lm_stack {
-  position: relative;
-}
-.lm_stack > .lm_items {
-  overflow: hidden;
-}
-.lm_stack.lm_left > .lm_items {
-  position: absolute;
-  left: 20px;
-  top: 0;
-}
-.lm_stack.lm_right > .lm_items {
-  position: absolute;
-  right: 20px;
-  top: 0;
-}
-.lm_stack.lm_right > .lm_header {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.lm_stack.lm_bottom > .lm_items {
-  position: absolute;
-  bottom: 20px;
-}
-.lm_stack.lm_bottom > .lm_header {
-  position: absolute;
-  bottom: 0;
-}
-.lm_left.lm_stack .lm_header,
-.lm_right.lm_stack .lm_header {
-  height: 100%;
-}
-.lm_left.lm_dragProxy .lm_header,
-.lm_right.lm_dragProxy .lm_header,
-.lm_left.lm_dragProxy .lm_items,
-.lm_right.lm_dragProxy .lm_items {
-  float: left;
-}
-.lm_left.lm_dragProxy .lm_header,
-.lm_right.lm_dragProxy .lm_header,
-.lm_left.lm_stack .lm_header,
-.lm_right.lm_stack .lm_header {
-  width: 20px;
-  vertical-align: top;
-}
-.lm_left.lm_dragProxy .lm_header .lm_tabs,
-.lm_right.lm_dragProxy .lm_header .lm_tabs,
-.lm_left.lm_stack .lm_header .lm_tabs,
-.lm_right.lm_stack .lm_header .lm_tabs {
-  transform-origin: left top;
-  top: 0;
-  width: 1000px;
-}
-.lm_left.lm_dragProxy .lm_header .lm_controls,
-.lm_right.lm_dragProxy .lm_header .lm_controls,
-.lm_left.lm_stack .lm_header .lm_controls,
-.lm_right.lm_stack .lm_header .lm_controls {
-  bottom: 0;
-  flex-flow: column;
-}
-.lm_dragProxy.lm_left .lm_header .lm_tabs,
-.lm_stack.lm_left .lm_header .lm_tabs {
-  transform: rotate(-90deg) scaleX(-1);
-  left: 0;
-}
-.lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,
-.lm_stack.lm_left .lm_header .lm_tabs .lm_tab {
-  transform: scaleX(-1);
-  margin-top: 1px;
-}
-.lm_dragProxy.lm_right .lm_content {
-  float: left;
-}
-.lm_dragProxy.lm_right .lm_header .lm_tabs,
-.lm_stack.lm_right .lm_header .lm_tabs {
-  transform: rotate(90deg) scaleX(1);
-  left: 100%;
-  margin-left: 0;
-}
-.lm_dragProxy.lm_right .lm_header .lm_controls,
-.lm_stack.lm_right .lm_header .lm_controls {
-  left: 3px;
-}
-.lm_dragProxy.lm_bottom .lm_header,
-.lm_stack.lm_bottom .lm_header {
-  width: 100%;
-}
-.lm_dragProxy.lm_bottom .lm_header .lm_tab,
-.lm_stack.lm_bottom .lm_header .lm_tab {
-  margin-top: 0;
-  border-top: none;
-}
-.lm_dragProxy.lm_bottom .lm_header .lm_controls,
-.lm_stack.lm_bottom .lm_header .lm_controls {
-  top: 3px;
-}
-.lm_drop_tab_placeholder {
-  float: left;
-  width: 100px;
-  visibility: hidden;
-}
-.lm_header .lm_controls .lm_tabdropdown:before {
-  content: '';
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  display: inline-block;
-  border-top: 5px dashed;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  color: white;
-}
-.lm_header .lm_tabdropdown_list {
-  position: absolute;
-  top: 20px;
-  right: 0;
-  z-index: 5;
-  overflow: hidden;
-}
-.lm_header .lm_tabdropdown_list .lm_tab {
-  clear: both;
-  padding-right: 10px;
-  margin: 0;
-}
-.lm_header .lm_tabdropdown_list .lm_tab .lm_title {
-  width: 100px;
-}
-.lm_header .lm_tabdropdown_list .lm_close_tab {
-  display: none !important;
-}
-.lm_dragProxy {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 30;
-}
-.lm_dragProxy .lm_header {
-  background: transparent;
-}
-.lm_dragProxy .lm_content {
-  border-top: none;
-  overflow: hidden;
-}
-.lm_dropTargetIndicator {
-  display: none;
-  position: absolute;
-  z-index: 35;
-  transition: all 200ms ease;
-}
-.lm_dropTargetIndicator .lm_inner {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  top: 0;
-  left: 0;
-}
-.lm_transition_indicator {
-  display: none;
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 20;
-}
-.lm_popin {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  z-index: 9999;
-}
-.lm_popin > * {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.lm_popin > .lm_bg {
-  z-index: 10;
-}
-.lm_popin > .lm_icon {
-  z-index: 20;
-}
-
-/* ── Adapted theme (using --gve- CSS variables) ──────────────────────── */
-.lm_goldenlayout {
-  background: transparent;
-}
-.lm_content {
-  background: var(--gve-bg-color, #fafafa);
-  border: none;
-}
-.lm_dragProxy .lm_content {
-  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
-}
-.lm_dropTargetIndicator {
-  box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
-  outline: 1px dashed var(--gve-border-color, #ccc);
-}
-.lm_dropTargetIndicator .lm_inner {
-  background: #000;
-  opacity: 0.08;
-}
-.lm_splitter {
-  background: var(--gve-border-color, #ccc);
-  opacity: 0.4;
-  transition: opacity 200ms ease;
-}
-.lm_splitter:hover,
-.lm_splitter.lm_dragging {
-  background: var(--gve-border-color, #aaa);
-  opacity: 1;
-}
-.lm_header {
-  height: 26px;
-  background: var(--gve-toolbar-bg, #f5f5f5);
-  border-bottom: 1px solid var(--gve-border-color, #ddd);
-}
-.lm_header .lm_tab {
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--gve-text-secondary, #777);
-  background: transparent;
-  margin-right: 2px;
-  padding: 5px 10px 4px;
-  padding-right: 14px;
-  border: none;
-}
-.lm_header .lm_tab .lm_title {
-  padding-top: 1px;
-}
-.lm_header .lm_tab.lm_active {
-  background: var(--gve-bg-color, #fff);
-  color: var(--gve-text-color, #333);
-  border-bottom: 2px solid var(--gve-primary-color, #007bff);
-  padding-bottom: 3px;
-}
-.lm_header .lm_tab:hover {
-  color: var(--gve-text-color, #333);
-}
-.lm_header .lm_controls .lm_tabdropdown:before {
-  color: var(--gve-text-color, #333);
-}
-.lm_transition_indicator {
-  background: #000;
-  border: 1px dashed #555;
-}
-.lm_popin {
-  cursor: pointer;
-}
-.lm_popin .lm_bg {
-  background: #000;
-  opacity: 0.7;
-}
+const GOLDEN_LAYOUT_CSS = `
+/* ── Golden Layout base ──────────────────────────────────────────────── */
+.lm_root {
+  position: relative;
+}
+.lm_row > .lm_item {
+  float: left;
+}
+.lm_content {
+  overflow: hidden;
+  position: relative;
+}
+.lm_dragging,
+.lm_dragging * {
+  cursor: move !important;
+  user-select: none;
+}
+.lm_maximised {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 40;
+}
+.lm_maximise_placeholder {
+  display: none;
+}
+.lm_splitter {
+  position: relative;
+  z-index: 2;
+  touch-action: none;
+}
+.lm_splitter.lm_vertical .lm_drag_handle {
+  width: 100%;
+  position: absolute;
+  cursor: ns-resize;
+  touch-action: none;
+  user-select: none;
+}
+.lm_splitter.lm_horizontal {
+  float: left;
+  height: 100%;
+}
+.lm_splitter.lm_horizontal .lm_drag_handle {
+  height: 100%;
+  position: absolute;
+  cursor: ew-resize;
+  touch-action: none;
+  user-select: none;
+}
+.lm_header {
+  overflow: visible;
+  position: relative;
+  z-index: 1;
+  user-select: none;
+}
+.lm_header [class^=lm_] {
+  box-sizing: content-box !important;
+}
+.lm_header .lm_controls {
+  position: absolute;
+  right: 3px;
+  display: flex;
+}
+.lm_header .lm_controls > * {
+  cursor: pointer;
+  float: left;
+  width: 18px;
+  height: 18px;
+  text-align: center;
+}
+.lm_header .lm_tabs {
+  position: absolute;
+  display: flex;
+}
+.lm_header .lm_tab {
+  cursor: pointer;
+  float: left;
+  height: 14px;
+  margin-top: 1px;
+  padding: 0px 10px 5px;
+  padding-right: 25px;
+  position: relative;
+  touch-action: none;
+}
+.lm_header .lm_tab i {
+  width: 2px;
+  height: 19px;
+  position: absolute;
+}
+.lm_header .lm_tab i.lm_left {
+  top: 0;
+  left: -2px;
+}
+.lm_header .lm_tab i.lm_right {
+  top: 0;
+  right: -2px;
+}
+.lm_header .lm_tab .lm_title {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lm_header .lm_tab .lm_close_tab {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: center;
+}
+.lm_stack {
+  position: relative;
+}
+.lm_stack > .lm_items {
+  overflow: hidden;
+}
+.lm_stack.lm_left > .lm_items {
+  position: absolute;
+  left: 20px;
+  top: 0;
+}
+.lm_stack.lm_right > .lm_items {
+  position: absolute;
+  right: 20px;
+  top: 0;
+}
+.lm_stack.lm_right > .lm_header {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.lm_stack.lm_bottom > .lm_items {
+  position: absolute;
+  bottom: 20px;
+}
+.lm_stack.lm_bottom > .lm_header {
+  position: absolute;
+  bottom: 0;
+}
+.lm_left.lm_stack .lm_header,
+.lm_right.lm_stack .lm_header {
+  height: 100%;
+}
+.lm_left.lm_dragProxy .lm_header,
+.lm_right.lm_dragProxy .lm_header,
+.lm_left.lm_dragProxy .lm_items,
+.lm_right.lm_dragProxy .lm_items {
+  float: left;
+}
+.lm_left.lm_dragProxy .lm_header,
+.lm_right.lm_dragProxy .lm_header,
+.lm_left.lm_stack .lm_header,
+.lm_right.lm_stack .lm_header {
+  width: 20px;
+  vertical-align: top;
+}
+.lm_left.lm_dragProxy .lm_header .lm_tabs,
+.lm_right.lm_dragProxy .lm_header .lm_tabs,
+.lm_left.lm_stack .lm_header .lm_tabs,
+.lm_right.lm_stack .lm_header .lm_tabs {
+  transform-origin: left top;
+  top: 0;
+  width: 1000px;
+}
+.lm_left.lm_dragProxy .lm_header .lm_controls,
+.lm_right.lm_dragProxy .lm_header .lm_controls,
+.lm_left.lm_stack .lm_header .lm_controls,
+.lm_right.lm_stack .lm_header .lm_controls {
+  bottom: 0;
+  flex-flow: column;
+}
+.lm_dragProxy.lm_left .lm_header .lm_tabs,
+.lm_stack.lm_left .lm_header .lm_tabs {
+  transform: rotate(-90deg) scaleX(-1);
+  left: 0;
+}
+.lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,
+.lm_stack.lm_left .lm_header .lm_tabs .lm_tab {
+  transform: scaleX(-1);
+  margin-top: 1px;
+}
+.lm_dragProxy.lm_right .lm_content {
+  float: left;
+}
+.lm_dragProxy.lm_right .lm_header .lm_tabs,
+.lm_stack.lm_right .lm_header .lm_tabs {
+  transform: rotate(90deg) scaleX(1);
+  left: 100%;
+  margin-left: 0;
+}
+.lm_dragProxy.lm_right .lm_header .lm_controls,
+.lm_stack.lm_right .lm_header .lm_controls {
+  left: 3px;
+}
+.lm_dragProxy.lm_bottom .lm_header,
+.lm_stack.lm_bottom .lm_header {
+  width: 100%;
+}
+.lm_dragProxy.lm_bottom .lm_header .lm_tab,
+.lm_stack.lm_bottom .lm_header .lm_tab {
+  margin-top: 0;
+  border-top: none;
+}
+.lm_dragProxy.lm_bottom .lm_header .lm_controls,
+.lm_stack.lm_bottom .lm_header .lm_controls {
+  top: 3px;
+}
+.lm_drop_tab_placeholder {
+  float: left;
+  width: 100px;
+  visibility: hidden;
+}
+.lm_header .lm_controls .lm_tabdropdown:before {
+  content: '';
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  display: inline-block;
+  border-top: 5px dashed;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  color: white;
+}
+.lm_header .lm_tabdropdown_list {
+  position: absolute;
+  top: 20px;
+  right: 0;
+  z-index: 5;
+  overflow: hidden;
+}
+.lm_header .lm_tabdropdown_list .lm_tab {
+  clear: both;
+  padding-right: 10px;
+  margin: 0;
+}
+.lm_header .lm_tabdropdown_list .lm_tab .lm_title {
+  width: 100px;
+}
+.lm_header .lm_tabdropdown_list .lm_close_tab {
+  display: none !important;
+}
+.lm_dragProxy {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+}
+.lm_dragProxy .lm_header {
+  background: transparent;
+}
+.lm_dragProxy .lm_content {
+  border-top: none;
+  overflow: hidden;
+}
+.lm_dropTargetIndicator {
+  display: none;
+  position: absolute;
+  z-index: 35;
+  transition: all 200ms ease;
+}
+.lm_dropTargetIndicator .lm_inner {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+.lm_transition_indicator {
+  display: none;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+}
+.lm_popin {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 9999;
+}
+.lm_popin > * {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.lm_popin > .lm_bg {
+  z-index: 10;
+}
+.lm_popin > .lm_icon {
+  z-index: 20;
+}
+
+/* ── Adapted theme (using --gve- CSS variables) ──────────────────────── */
+.lm_goldenlayout {
+  background: transparent;
+}
+.lm_content {
+  background: var(--gve-bg-color, #fafafa);
+  border: none;
+}
+.lm_dragProxy .lm_content {
+  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
+  outline: 1px dashed var(--gve-border-color, #ccc);
+}
+.lm_dropTargetIndicator .lm_inner {
+  background: #000;
+  opacity: 0.08;
+}
+.lm_splitter {
+  background: var(--gve-border-color, #ccc);
+  opacity: 0.4;
+  transition: opacity 200ms ease;
+}
+.lm_splitter:hover,
+.lm_splitter.lm_dragging {
+  background: var(--gve-border-color, #aaa);
+  opacity: 1;
+}
+.lm_header {
+  height: 26px;
+  background: var(--gve-toolbar-bg, #f5f5f5);
+  border-bottom: 1px solid var(--gve-border-color, #ddd);
+}
+.lm_header .lm_tab {
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--gve-text-secondary, #777);
+  background: transparent;
+  margin-right: 2px;
+  padding: 5px 10px 4px;
+  padding-right: 14px;
+  border: none;
+}
+.lm_header .lm_tab .lm_title {
+  padding-top: 1px;
+}
+.lm_header .lm_tab.lm_active {
+  background: var(--gve-bg-color, #fff);
+  color: var(--gve-text-color, #333);
+  border-bottom: 2px solid var(--gve-primary-color, #007bff);
+  padding-bottom: 3px;
+}
+.lm_header .lm_tab:hover {
+  color: var(--gve-text-color, #333);
+}
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: var(--gve-text-color, #333);
+}
+.lm_transition_indicator {
+  background: #000;
+  border: 1px dashed #555;
+}
+.lm_popin {
+  cursor: pointer;
+}
+.lm_popin .lm_bg {
+  background: #000;
+  opacity: 0.7;
+}
 `;
 
 /**
@@ -25971,7 +26114,7 @@ class GveSnapshotRendition extends HTMLElement {
      * of the web component is loaded.
      */
     static get version() {
-        return "2.0.7";
+        return "2.0.10";
     }
     constructor() {
         super();
@@ -26297,6 +26440,20 @@ class GveSnapshotRendition extends HTMLElement {
      * The SVG rendition panel has no header and acts as the fixed background.
      */
     initializeGoldenLayout() {
+        // Guard against stale rAF callbacks: render() can run more than once
+        // before the first scheduled callback fires (e.g. a consumer sets
+        // settings/data before the element is connected, then connectedCallback
+        // renders again). Without these checks two GoldenLayout instances would
+        // be created on the same container, duplicating panels and leaking the
+        // first instance's ResizeObserver.
+        if (!this.isConnected) {
+            this._logger.debug("GL", "Skipping GL init - component not connected");
+            return;
+        }
+        if (this._goldenLayout) {
+            this._goldenLayout.destroy();
+            this._goldenLayout = undefined;
+        }
         const glContainer = this._shadow.getElementById("gl-container");
         if (!glContainer) {
             this._logger.error("GL", "gl-container not found in Shadow DOM");
@@ -26368,6 +26525,18 @@ class GveSnapshotRendition extends HTMLElement {
                 showPopoutIcon: false,
                 showMaximiseIcon: false,
                 showCloseIcon: false,
+                // Tab dragging/docking is disabled: the four panels are fixed
+                // functional areas, and users only need the splitters to
+                // redistribute space. This prevents dragging a panel into another
+                // stack (or into limbo) and losing the intended layout. The
+                // "reset layout" toolbar button remains the escape hatch.
+                reorderEnabled: false,
+            },
+            dimensions: {
+                // Prevent panels from being collapsed to zero size via the
+                // splitters, which would make them hard to grab back.
+                defaultMinItemWidth: "80px",
+                defaultMinItemHeight: "60px",
             },
             root: {
                 type: "column",
@@ -26569,12 +26738,13 @@ class GveSnapshotRendition extends HTMLElement {
         if (refNodes.length === 0) {
             this._logger.warn(`No reference nodes found for operation ${operation.id}`);
             // Still fire event even if no reference nodes
+            const previousVersion = this._currentVersion;
             this._currentVersion = versionTag;
             // Extract version index from tag (e.g., "v2" → 2)
             const versionMatch = versionTag.match(/v(\d+)/);
             this._currentVersionIndex = versionMatch ? parseInt(versionMatch[1]) : 0;
             this.dispatchEvent(new CustomEvent("versionTagChange", {
-                detail: { from: this._currentVersion, to: versionTag },
+                detail: { from: previousVersion, to: versionTag },
             }));
             return;
         }
@@ -40952,7 +41122,7 @@ function requireD () {
 	      + 'pragma private protected public pure ref return scope shared static struct '
 	      + 'super switch synchronized template this throw try typedef typeid typeof union '
 	      + 'unittest version void volatile while with __FILE__ __LINE__ __gshared|10 '
-	      + '__thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ 2.0.7',
+	      + '__thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ 2.0.10',
 	    built_in:
 	      'bool cdouble cent cfloat char creal dchar delegate double dstring float function '
 	      + 'idouble ifloat ireal long real short string ubyte ucent uint ulong ushort wchar '
@@ -90566,23 +90736,36 @@ class GveHintDesigner extends HTMLElement {
         this._isPlaying = false;
         // Create logger
         this._logger = new Logger("GVE-HintDesigner", this._settings.debug);
-        // Register GSAP plugins
+        this.registerGsapPlugins();
+        // Create shadow DOM
+        this._shadow = this.attachShadow({ mode: "open" });
+        this._logger.info("GveHintDesigner component created");
+    }
+    /**
+     * Register GSAP plugins when GSAP is available. Retried in
+     * connectedCallback because GSAP may be loaded after the component
+     * class is constructed.
+     */
+    registerGsapPlugins() {
         const gsap = window.gsap;
-        if (gsap) {
+        if (gsap && !gsap.plugins?.drawSVG) {
             gsap.registerPlugin(DrawSVGPlugin);
             this._logger.debug("Component", "DrawSVG plugin registered:", gsap.plugins.drawSVG !== undefined);
         }
-        // Create shadow DOM
-        this._shadow = this.attachShadow({ mode: "open" });
-        this._logger.info("GveHintDesigner component created");
     }
     /**
      * Called when component is added to the DOM.
      */
     connectedCallback() {
         this._logger.info("Component connected to DOM");
+        this.registerGsapPlugins();
         this.render();
         this.initializeEventListeners();
+        // Reflect any state assigned before the element was connected (a common
+        // pattern in vanilla consumers: set data/settings/hintId first, append
+        // later). render() builds empty dropdowns/tables, so populate them now.
+        this.refreshUI();
+        this.refreshVariablesTable();
     }
     /**
      * Called when component is removed from the DOM.
@@ -90644,9 +90827,10 @@ class GveHintDesigner extends HTMLElement {
             this._hintVariables = value || [];
         }
         this.refreshVariablesTable();
-        this.fireEvent("hintVariablesChange", {
-            hintVariables: this._hintVariables,
-        });
+        // NOTE: no hintVariablesChange event here. Change events represent USER
+        // edits (add/edit/delete/populate, which fire it themselves); firing from
+        // the setter would echo programmatic assignments back to the consumer,
+        // which can loop forever with two-way bindings that clone the array.
     }
     // ==================== RENDERING ====================
     /**
@@ -91261,7 +91445,11 @@ class GveHintDesigner extends HTMLElement {
             this._lastPanY = mouseEvent.clientY;
             panel.style.cursor = "grabbing";
         });
-        document.addEventListener("mousemove", (e) => {
+        // Remove any handlers from a previous connect cycle before adding new
+        // ones: connectedCallback re-runs initializeEventListeners each time the
+        // element is (re)attached, and document-level listeners would accumulate.
+        this.removeDocumentPanListeners();
+        this._panMoveHandler = (e) => {
             if (!this._isPanning)
                 return;
             const deltaX = e.clientX - this._lastPanX;
@@ -91271,17 +91459,34 @@ class GveHintDesigner extends HTMLElement {
             this._lastPanX = e.clientX;
             this._lastPanY = e.clientY;
             this.updateSvgTransform();
-        });
-        document.addEventListener("mouseup", () => {
+        };
+        document.addEventListener("mousemove", this._panMoveHandler);
+        this._panUpHandler = () => {
             if (this._isPanning) {
                 this._isPanning = false;
-                const panelEl = panel;
-                panelEl.style.cursor = "grab";
+                const panelEl = this._shadow.querySelector(".svg-display-panel");
+                if (panelEl) {
+                    panelEl.style.cursor = "grab";
+                }
             }
-        });
+        };
+        document.addEventListener("mouseup", this._panUpHandler);
         // Set initial cursor
         panel.style.cursor = "grab";
     }
+    /**
+     * Remove the document-level pan listeners, if any.
+     */
+    removeDocumentPanListeners() {
+        if (this._panMoveHandler) {
+            document.removeEventListener("mousemove", this._panMoveHandler);
+            this._panMoveHandler = undefined;
+        }
+        if (this._panUpHandler) {
+            document.removeEventListener("mouseup", this._panUpHandler);
+            this._panUpHandler = undefined;
+        }
+    }
     /**
      * Initialize zooming with mouse wheel.
      */
@@ -91325,6 +91530,8 @@ class GveHintDesigner extends HTMLElement {
             clearInterval(this._progressUpdateInterval);
             this._progressUpdateInterval = undefined;
         }
+        this.removeDocumentPanListeners();
+        this._isPanning = false;
     }
     // ==================== UI ACTIONS ====================
     /**
@@ -91693,13 +91900,14 @@ class GveHintDesigner extends HTMLElement {
         const confirm = window.confirm(`Delete hint "${this._hintId}"?`);
         if (!confirm)
             return;
-        delete this._data.hints[this._hintId];
+        const deletedId = this._hintId;
+        delete this._data.hints[deletedId];
         this.hintId = undefined;
         this.refreshHintsDropdown();
         this.clearHintForm();
         this.showMessage("Hint deleted", "success");
         this.fireEvent("dataChange", { data: this._data });
-        this._logger.info("Deleted hint", this._hintId);
+        this._logger.info("Deleted hint", deletedId);
     }
     /**
      * Parse offset value (number or string with suffix).
@@ -91795,26 +92003,29 @@ class GveHintDesigner extends HTMLElement {
     }
     /**
      * Resolve variables in SVG code.
+     * Delegates to the same resolver used by the renderer (shared semantics:
+     * literal names — no regex injection — and "??" fallback chains like
+     * {{r_fore-color ?? r_color}}).
      */
     resolveVariables(svgCode) {
-        let resolved = svgCode;
-        this._hintVariables.forEach((variable) => {
-            const placeholder = `{{${variable.name}}}`;
-            resolved = resolved.replace(new RegExp(placeholder, "g"), variable.value);
-        });
-        return resolved;
+        const variables = new Map(this._hintVariables.map((v) => [v.name, v.value]));
+        return resolvePlaceholders(svgCode, variables);
     }
     /**
      * Extract variable names from SVG code (variables in {{...}} placeholders).
+     * Placeholders may contain "??" fallback chains: each name in a chain is
+     * reported as a separate variable.
      */
     extractVariablesFromSvg(svgCode) {
         const variablePattern = /\{\{([^}]+)\}\}/g;
         const variables = [];
         let match;
         while ((match = variablePattern.exec(svgCode)) !== null) {
-            const varName = match[1].trim();
-            if (varName && !variables.includes(varName)) {
-                variables.push(varName);
+            for (const name of match[1].split("??")) {
+                const varName = name.trim();
+                if (varName && !variables.includes(varName)) {
+                    variables.push(varName);
+                }
             }
         }
         return variables;
@@ -92828,9 +93039,8 @@ class GveHintDesigner extends HTMLElement {
     syncSvgScroll() {
         if (!this._svgTextarea || !this._svgHighlightContainer)
             return;
-        const scrollTop = this._svgTextarea.scrollTop;
-        const scrollLeft = this._svgTextarea.scrollLeft;
-        this._svgHighlightContainer.style.transform = `translate(-${scrollLeft}px, -${scrollTop}px)`;
+        this._svgHighlightContainer.scrollTop = this._svgTextarea.scrollTop;
+        this._svgHighlightContainer.scrollLeft = this._svgTextarea.scrollLeft;
     }
     /**
      * Sync scroll position for JS textarea and highlight container.
@@ -92838,9 +93048,8 @@ class GveHintDesigner extends HTMLElement {
     syncJsScroll() {
         if (!this._jsTextarea || !this._jsHighlightContainer)
             return;
-        const scrollTop = this._jsTextarea.scrollTop;
-        const scrollLeft = this._jsTextarea.scrollLeft;
-        this._jsHighlightContainer.style.transform = `translate(-${scrollLeft}px, -${scrollTop}px)`;
+        this._jsHighlightContainer.scrollTop = this._jsTextarea.scrollTop;
+        this._jsHighlightContainer.scrollLeft = this._jsTextarea.scrollLeft;
     }
     /**
      * Fire a custom event.