@myrmidon/gve-snapshot-rendition 0.0.2 → 0.0.4

package/dist/index.js

@@ -77,7 +77,7 @@ const DEFAULT_SETTINGS = {
     // Hints - empty by default, to be filled by consumer code
     hints: {},
     hintMargin: 0,
-    hintDesignWidth: 100,
+    hintDesignWidth: 300,
     hintDesignHeight: 100,
     showHintHandles: false,
     // Hilites
@@ -1545,6 +1545,9 @@ class FeatureResolver {
                         this._logger.warn(`Invalid r_t-displaced-span value: ${value}`);
                     }
                     break;
+                case "r_t-value":
+                    config.textValue = value;
+                    break;
                 case "r_hints":
                     config.hints = value.trim().split(/\s+/);
                     break;
@@ -1854,6 +1857,24 @@ class TextRenderer {
             this._logger.warn("No nodes to render");
             return;
         }
+        // Apply r_t-value override if specified
+        // This overrides the operation's value (the text being added) for display only
+        if (config.textValue) {
+            this._logger.debug("TextRenderer", `Applying r_t-value override: "${config.textValue}" (original text had ${nodes.length} characters)`);
+            // Replace node data with characters from r_t-value
+            // If r_t-value has fewer characters than nodes, we only override the first N nodes
+            // If r_t-value has more characters, we only use the first N characters
+            const overrideChars = config.textValue.split('');
+            const charsToOverride = Math.min(nodes.length, overrideChars.length);
+            for (let i = 0; i < charsToOverride; i++) {
+                nodes[i] = { ...nodes[i], data: overrideChars[i] };
+            }
+            // 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`);
+            }
+        }
         // 1. Calculate RBR (or use displaced span if specified)
         let rbrs;
         if (config.textDisplacedSpan) {
@@ -5109,7 +5130,6 @@ class Toolbar {
           <button id="prev-btn" class="toolbar-btn" title="Previous Version (←)">
             <i data-feather="chevron-left"></i>
           </button>
-          <div id="version-label" class="version-label">v0 (1/1)</div>
           <button id="next-btn" class="toolbar-btn" title="Next Version (→)">
             <i data-feather="chevron-right"></i>
           </button>
@@ -5157,8 +5177,14 @@ class Toolbar {
         <div id="custom-buttons-group" class="toolbar-group custom-buttons-group">
         </div>
 
-        <!-- Group Badge (at the end) -->
-        <div id="group-badge" class="version-group-badge" style="display: none; margin-left: auto;"></div>
+        <!-- Log Display (flexible space) -->
+        <div id="log-display" class="toolbar-log-display" style="flex: 1; display: none;"></div>
+
+        <!-- Version Label and Group Badge (at the right edge) -->
+        <div class="toolbar-group version-info-group" style="margin-left: auto;">
+          <div id="version-label" class="version-label">v0 (1/1)</div>
+          <div id="group-badge" class="version-group-badge" style="display: none;"></div>
+        </div>
       </div>
     `;
         // Get element references
@@ -5170,6 +5196,7 @@ class Toolbar {
         this.lastBtn = this.container.querySelector("#last-btn");
         this.versionLabel = this.container.querySelector("#version-label");
         this.groupBadge = this.container.querySelector("#group-badge");
+        this.logDisplay = this.container.querySelector("#log-display");
         this.slideshowStartBtn = this.container.querySelector("#slideshow-start-btn");
         this.slideshowStopBtn = this.container.querySelector("#slideshow-stop-btn");
         this.slideshowReverseBtn = this.container.querySelector("#slideshow-reverse-btn");
@@ -5294,6 +5321,7 @@ class Toolbar {
         if (!info) {
             this.versionLabel.innerHTML = "v0 (1/1)";
             this.groupBadge.style.display = "none";
+            this.logDisplay.style.display = "none";
             return;
         }
         let labelHtml = `<span class="version-tag">${info.tag}</span>`;
@@ -5310,6 +5338,40 @@ class Toolbar {
         else {
             this.groupBadge.style.display = "none";
         }
+        // Update log display
+        this.updateLogDisplay();
+    }
+    /**
+     * Update the log display with the current operation's log feature.
+     */
+    updateLogDisplay() {
+        if (!this._data || this._currentVersionIndex === 0) {
+            // v0 has no operation, hide log
+            this.logDisplay.style.display = "none";
+            this.logDisplay.textContent = "";
+            this.logDisplay.title = "";
+            return;
+        }
+        const stepIndex = this._currentVersionIndex - 1;
+        if (stepIndex < 0 || stepIndex >= (this._data.steps?.length || 0)) {
+            this.logDisplay.style.display = "none";
+            this.logDisplay.textContent = "";
+            this.logDisplay.title = "";
+            return;
+        }
+        const step = this._data.steps[stepIndex];
+        // Look for a global feature named "log"
+        const logFeature = step.operation?.features?.find((f) => f.name === "log" && f.isGlobal);
+        if (logFeature && logFeature.value) {
+            this.logDisplay.textContent = logFeature.value;
+            this.logDisplay.title = logFeature.value; // Add tooltip with full text
+            this.logDisplay.style.display = "block";
+        }
+        else {
+            this.logDisplay.style.display = "none";
+            this.logDisplay.textContent = "";
+            this.logDisplay.title = "";
+        }
     }
     /**
      * Get version information for current step.
@@ -7440,6 +7502,9 @@ class DetailsArea {
         this._showHiddenFeatures = false;
         this._data = null;
         this._currentVersionTag = "v0";
+        this._isResizing = false;
+        this._initialHeight = 0;
+        this._initialMouseY = 0;
         this._settings = settings;
         this._logger = logger;
         this._summaryService = new OperationSummaryService(logger);
@@ -7462,9 +7527,10 @@ class DetailsArea {
       </div>
       <div class="details-content">
         <div id="operation-section" class="details-operation-section"></div>
-        <div id="version-features-section" class="details-version-section"></div>
         <div id="hovered-elements-section" class="details-hovered-section"></div>
+        <div id="version-features-section" class="details-version-section"></div>
       </div>
+      <div class="details-resize-handle" id="details-resize-handle"></div>
     `;
         // Get element references
         this.operationSection = this.container.querySelector("#operation-section");
@@ -7472,6 +7538,7 @@ class DetailsArea {
         this.hoveredElementsSection = this.container.querySelector("#hovered-elements-section");
         this.hiddenFeaturesCheckbox = this.container.querySelector("#hidden-features-checkbox");
         this.collapseBtn = this.container.querySelector("#collapse-details-btn");
+        this.resizeHandle = this.container.querySelector("#details-resize-handle");
         this.attachEventListeners();
         // Replace feather icons - must be done after elements are in DOM
         this.replaceFeatherIcons();
@@ -7509,6 +7576,51 @@ class DetailsArea {
         this.collapseBtn.addEventListener("click", () => {
             this.toggleCollapse();
         });
+        // Resize handle
+        this.resizeHandle.addEventListener("mousedown", (e) => {
+            this.startResize(e);
+        });
+    }
+    /**
+     * Start resizing the details area.
+     */
+    startResize(e) {
+        e.preventDefault();
+        this._isResizing = true;
+        this._initialHeight = this.container.offsetHeight;
+        this._initialMouseY = e.clientY;
+        // Attach document-level listeners for smooth resizing
+        const onMouseMove = (e) => this.handleResize(e);
+        const onMouseUp = () => this.stopResize(onMouseMove, onMouseUp);
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        this._logger.debug("DetailsArea", "Started resizing");
+    }
+    /**
+     * Handle resize drag.
+     */
+    handleResize(e) {
+        if (!this._isResizing)
+            return;
+        // Calculate delta: dragging down increases height, dragging up decreases height
+        const deltaY = e.clientY - this._initialMouseY;
+        const newHeight = this._initialHeight + deltaY;
+        // Enforce minimum and maximum height
+        const minHeight = 100;
+        const maxHeight = 1200;
+        const clampedHeight = Math.max(minHeight, Math.min(maxHeight, newHeight));
+        this.container.style.height = `${clampedHeight}px`;
+        this.container.style.maxHeight = `${clampedHeight}px`;
+    }
+    /**
+     * Stop resizing the details area.
+     */
+    stopResize(onMouseMove, onMouseUp) {
+        this._isResizing = false;
+        // Remove document-level listeners
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        this._logger.debug("DetailsArea", `Stopped resizing (height: ${this.container.offsetHeight}px)`);
     }
     /**
      * Toggle collapse/expand state.
@@ -10725,7 +10837,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
 /*!
- * GSAP 3.13.0
+ * GSAP 3.14.2
  * https://gsap.com
  *
  * @license Copyright 2008-2025, GreenSock. All rights reserved.
@@ -10785,6 +10897,8 @@ var _config = {
     _isTypedArray = typeof ArrayBuffer === "function" && ArrayBuffer.isView || function () {},
     // note: IE10 has ArrayBuffer, but NOT ArrayBuffer.isView().
 _isArray = Array.isArray,
+    _randomExp = /random\([^)]+\)/g,
+    _commaDelimExp = /,\s*/g,
     _strictNumExp = /(?:-?\.?\d|\.)+/gi,
     //only numbers (including negatives and decimals) but NOT relative values.
 _numExp$1 = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,
@@ -11379,7 +11493,7 @@ clamp = function clamp(min, max, value) {
     return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);
   }) || accumulator;
 },
-    //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.
+    // takes any value and returns an Array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.
 toArray = function toArray(value, scope, leaveStrings) {
   return _context && !scope && _context.selector ? _context.selector(value) : _isString(value) && !leaveStrings && (_coreInitted$1 || !_wake()) ? _slice.call((scope || _doc$1).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];
 },
@@ -11396,7 +11510,7 @@ toArray = function toArray(value, scope, leaveStrings) {
   });
 },
     // alternative that's a bit faster and more reliably diverse but bigger:   for (let j, v, i = a.length; i; j = (Math.random() * i) | 0, v = a[--i], a[i] = a[j], a[j] = v); return a;
-//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+// for distributing values across an Array. Can accept a number, a function or (most commonly) an object which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array.
 distribute = function distribute(v) {
   if (_isFunction(v)) {
     return v;
@@ -11583,24 +11697,13 @@ distribute = function distribute(v) {
     return min + (value > range ? total - value : value);
   });
 },
-    _replaceRandom = function _replaceRandom(value) {
-  //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])
-  var prev = 0,
-      s = "",
-      i,
-      nums,
-      end,
-      isArray;
-
-  while (~(i = value.indexOf("random(", prev))) {
-    end = value.indexOf(")", i);
-    isArray = value.charAt(i + 7) === "[";
-    nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);
-    s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], isArray ? 0 : +nums[1], +nums[2] || 1e-5);
-    prev = end + 1;
-  }
-
-  return s + value.substr(prev, value.length - prev);
+    _replaceRandom = function _replaceRandom(s) {
+  return s.replace(_randomExp, function (match) {
+    //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])
+    var arIndex = match.indexOf("[") + 1,
+        values = match.substring(arIndex || 7, arIndex ? match.indexOf("]") : match.length - 1).split(_commaDelimExp);
+    return random(arIndex ? values : +values[0], arIndex ? 0 : +values[1], +values[2] || 1e-5);
+  });
 },
     mapRange = function mapRange(inMin, inMax, outMin, outMax, value) {
   var inRange = inMax - inMin,
@@ -12436,7 +12539,7 @@ var Animation = /*#__PURE__*/function () {
       }
     }
 
-    if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum || !_totalTime && !this._initted && (this.add || this._ptLookup)) {
+    if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum || !this._initted && this._dur && _totalTime || !_totalTime && !this._initted && (this.add || this._ptLookup)) {
       // check for _ptLookup on a Tween instance to ensure it has actually finished being instantiated, otherwise if this.reverse() gets called in the Animation constructor, it could trigger a render() here even though the _targets weren't populated, thus when _init() is called there won't be any PropTweens (it'll act like the tween is non-functional)
       this._ts || (this._pTime = _totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause
       //if (!this._lock) { // avoid endless recursion (not sure we need this yet or if it's worth the performance hit)
@@ -12531,9 +12634,9 @@ var Animation = /*#__PURE__*/function () {
 
   _proto.startTime = function startTime(value) {
     if (arguments.length) {
-      this._start = value;
+      this._start = _roundPrecise(value);
       var parent = this.parent || this._dp;
-      parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);
+      parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, this._start - this._delay);
       return this;
     }
 
@@ -12683,13 +12786,15 @@ var Animation = /*#__PURE__*/function () {
   };
 
   _proto.then = function then(onFulfilled) {
-    var self = this;
+    var self = this,
+        prevProm = self._prom;
     return new Promise(function (resolve) {
       var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,
           _resolve = function _resolve() {
         var _then = self.then;
         self.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)
 
+        prevProm && prevProm();
         _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);
         resolve(f);
         self.then = _then;
@@ -12910,7 +13015,11 @@ var Timeline = /*#__PURE__*/function (_Animation) {
           this._tTime = tTime; // if a user gets the iteration() inside the onRepeat, for example, it should be accurate.
 
           !suppressEvents && this.parent && _callback(this, "onRepeat");
-          this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);
+
+          if (this.vars.repeatRefresh && !isYoyo) {
+            this.invalidate()._lock = 1;
+            prevIteration = iteration; // otherwise, the onStart() may fire on the 2nd iteration.
+          }
 
           if (prevTime && prevTime !== this._time || prevPaused !== !this._ts || this.vars.onRepeat && !this.parent && !this._act) {
             // if prevTime is 0 and we render at the very end, _time will be the end, thus won't match. So in this edge case, prevTime won't match _time but that's okay. If it gets killed in the onRepeat, eject as well.
@@ -12958,7 +13067,7 @@ var Timeline = /*#__PURE__*/function (_Animation) {
         prevTime = 0; // upon init, the playhead should always go forward; someone could invalidate() a completed timeline and then if they restart(), that would make child tweens render in reverse order which could lock in the wrong starting values if they build on each other, like tl.to(obj, {x: 100}).to(obj, {x: 0}).
       }
 
-      if (!prevTime && tTime && !suppressEvents && !prevIteration) {
+      if (!prevTime && tTime && dur && !suppressEvents && !prevIteration) {
         _callback(this, "onStart");
 
         if (this._tTime !== tTime) {
@@ -13305,6 +13414,7 @@ var Timeline = /*#__PURE__*/function (_Animation) {
     var child = this._first,
         labels = this.labels,
         p;
+    amount = _roundPrecise(amount);
 
     while (child) {
       if (child._start >= ignoreBeforeTime) {
@@ -13394,7 +13504,7 @@ var Timeline = /*#__PURE__*/function (_Animation) {
           max -= start;
 
           if (!parent && !self._dp || parent && parent.smoothChildTiming) {
-            self._start += start / self._ts;
+            self._start += _roundPrecise(start / self._ts);
             self._time -= start;
             self._tTime -= start;
           }
@@ -15194,7 +15304,7 @@ var gsap$1 = _gsap.registerPlugin({
   }
 }, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.
 
-Tween.version = Timeline.version = gsap$1.version = "3.13.0";
+Tween.version = Timeline.version = gsap$1.version = "3.14.2";
 _coreReady = 1;
 _windowExists$2() && _wake();
 _easeMap.Power0;
@@ -15217,7 +15327,7 @@ _easeMap.Power0;
     _easeMap.Circ;
 
 /*!
- * CSSPlugin 3.13.0
+ * CSSPlugin 3.14.2
  * https://gsap.com
  *
  * Copyright 2008-2025, GreenSock. All rights reserved.
@@ -15259,6 +15369,10 @@ var _win$1,
   return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);
 },
     //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)
+_renderCSSPropWithBeginningAndEnd = function _renderCSSPropWithBeginningAndEnd(ratio, data) {
+  return data.set(data.t, data.p, ratio === 1 ? data.e : ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);
+},
+    //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)
 _renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) {
   var value = data.s + data.c * ratio;
   data.set(data.t, data.p, ~~(value + (value < 0 ? -0.5 : .5)) + data.u, data);
@@ -16558,7 +16672,8 @@ var CSSPlugin = {
         cache,
         smooth,
         hasPriority,
-        inlineProps;
+        inlineProps,
+        finalTransformValue;
     _pluginInitted || _initCore$1(); // we may call init() multiple times on the same plugin instance, like when adding special properties, so make sure we don't overwrite the revert data or inlineProps
 
     this.styles = this.styles || _getStyleSaver$1(target);
@@ -16601,9 +16716,9 @@ var CSSPlugin = {
           // colors don't have units
           startUnit = getUnit(startValue);
           endUnit = getUnit(endValue);
+          endUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit);
         }
 
-        endUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit);
         this.add(style, "setProperty", startValue, endValue, index, targets, 0, 0, p);
         props.push(p);
         inlineProps.push(p, 0, style[p]);
@@ -16647,9 +16762,18 @@ var CSSPlugin = {
 
         if (isTransformRelated) {
           this.styles.save(p);
+          finalTransformValue = endValue; // this is always the same as endValue except when it's a var(--) value, in which case we need to calculate the end value.
 
           if (type === "string" && endValue.substring(0, 6) === "var(--") {
             endValue = _getComputedProperty(target, endValue.substring(4, endValue.indexOf(")")));
+
+            if (endValue.substring(0, 5) === "calc(") {
+              var origPerspective = target.style.perspective;
+              target.style.perspective = endValue;
+              endValue = _getComputedProperty(target, "perspective");
+              origPerspective ? target.style.perspective = origPerspective : _removeProperty(target, "perspective");
+            }
+
             endNum = parseFloat(endValue);
           }
 
@@ -16716,7 +16840,11 @@ var CSSPlugin = {
           this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, (relative ? _parseRelative(startNum, relative + endNum) : endNum) - startNum, !isTransformRelated && (endUnit === "px" || p === "zIndex") && vars.autoRound !== false ? _renderRoundedCSSProp : _renderCSSProp);
           this._pt.u = endUnit || 0;
 
-          if (startUnit !== endUnit && endUnit !== "%") {
+          if (isTransformRelated && finalTransformValue !== endValue) {
+            this._pt.b = startValue;
+            this._pt.e = finalTransformValue;
+            this._pt.r = _renderCSSPropWithBeginningAndEnd;
+          } else if (startUnit !== endUnit && endUnit !== "%") {
             //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a "b" (beginning) property and point to a render method that handles that. (performance optimization)
             this._pt.b = startValue;
             this._pt.r = _renderCSSPropWithBeginning;
@@ -18255,6 +18383,23 @@ class GveSnapshotRendition extends HTMLElement {
         background: #f5f5f5;
       }
 
+      .toolbar-log-display {
+        padding: 0.5rem 1rem;
+        font-size: 13px;
+        color: var(--gve-text-color, #333);
+        font-style: italic;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: center;
+        max-width: 800px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 1.4;
+        max-height: calc(1.4em * 2);
+        cursor: help;
+      }
+
       .version-label {
         font-family: monospace;
         font-size: 16px;
@@ -18646,6 +18791,26 @@ class GveSnapshotRendition extends HTMLElement {
         overflow: hidden;
       }
 
+      .details-area.collapsed .details-resize-handle {
+        display: none;
+      }
+
+      .details-resize-handle {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 6px;
+        cursor: ns-resize;
+        background: transparent;
+        transition: background-color 0.2s ease;
+        z-index: 10;
+      }
+
+      .details-resize-handle:hover {
+        background-color: var(--gve-border-color, #ddd);
+      }
+
       .details-header {
         display: flex;
         justify-content: space-between;
@@ -80731,7 +80896,7 @@ var libExports = /*@__PURE__*/ requireLib();
 var HighlightJS = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
 /*!
- * DrawSVGPlugin 3.13.0
+ * DrawSVGPlugin 3.14.2
  * https://gsap.com
  *
  * @license Copyright 2008-2025, GreenSock. All rights reserved.
@@ -80930,7 +81095,7 @@ _parse = function _parse(value, length, defaultStart) {
 };
 
 var DrawSVGPlugin = {
-  version: "3.13.0",
+  version: "3.14.2",
   name: "drawSVG",
   register: function register(core) {
     gsap = core;
@@ -81058,7 +81223,9 @@ class GveHintDesigner extends HTMLElement {
         super();
         // Properties
         this._data = { hints: {}, animations: {} };
-        this._settings = { ...DEFAULT_HINT_DESIGNER_SETTINGS };
+        this._settings = {
+            ...DEFAULT_HINT_DESIGNER_SETTINGS,
+        };
         this._hintVariables = [];
         // Custom zoom/pan state
         this._zoomLevel = 1;
@@ -81141,9 +81308,18 @@ class GveHintDesigner extends HTMLElement {
         return this._hintVariables;
     }
     set hintVariables(value) {
-        this._hintVariables = value || [];
+        // Ensure value is an array
+        if (!Array.isArray(value)) {
+            this._logger.warn("Component", "hintVariables setter received non-array value, converting to array", value);
+            this._hintVariables = [];
+        }
+        else {
+            this._hintVariables = value || [];
+        }
         this.refreshVariablesTable();
-        this.fireEvent("hintVariablesChange", { hintVariables: this._hintVariables });
+        this.fireEvent("hintVariablesChange", {
+            hintVariables: this._hintVariables,
+        });
     }
     // ==================== RENDERING ====================
     /**
@@ -81202,7 +81378,8 @@ class GveHintDesigner extends HTMLElement {
         // Hints dropdown
         this._hintsDropdown = document.createElement("select");
         this._hintsDropdown.className = "hints-dropdown";
-        this._hintsDropdown.innerHTML = '<option value="">-- Select Hint --</option>';
+        this._hintsDropdown.innerHTML =
+            '<option value="">-- Select Hint --</option>';
         toolbar.appendChild(this._hintsDropdown);
         // Save button (accent)
         const saveBtn = this.createButton("save-hint", "save", "Save hint");
@@ -81260,7 +81437,6 @@ class GveHintDesigner extends HTMLElement {
         const width = this._settings.hintDesignWidth;
         const height = this._settings.hintDesignHeight;
         const gridSize = 10; // Grid cell size in pixels
-        const rulerSize = 20; // Ruler width/height in pixels
         // Create defs section for the grid pattern
         const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
         // Define grid pattern
@@ -81273,7 +81449,7 @@ class GveHintDesigner extends HTMLElement {
         const gridPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
         gridPath.setAttribute("d", `M ${gridSize} 0 L 0 0 0 ${gridSize}`);
         gridPath.setAttribute("fill", "none");
-        gridPath.setAttribute("stroke", "#e0e0e0");
+        gridPath.setAttribute("stroke", "#999999");
         gridPath.setAttribute("stroke-width", "0.5");
         pattern.appendChild(gridPath);
         defs.appendChild(pattern);
@@ -81281,62 +81457,32 @@ class GveHintDesigner extends HTMLElement {
         // Create main group for grid and rulers (will be behind hint content)
         const backgroundGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
         backgroundGroup.setAttribute("id", "grid-and-rulers");
-        // Add grid background rectangle
+        // Add grid background rectangle - now starting at (0,0)
         const gridRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        gridRect.setAttribute("x", rulerSize.toString());
-        gridRect.setAttribute("y", rulerSize.toString());
-        gridRect.setAttribute("width", (width - rulerSize).toString());
-        gridRect.setAttribute("height", (height - rulerSize).toString());
+        gridRect.setAttribute("x", "0");
+        gridRect.setAttribute("y", "0");
+        gridRect.setAttribute("width", width.toString());
+        gridRect.setAttribute("height", height.toString());
         gridRect.setAttribute("fill", "url(#grid)");
         backgroundGroup.appendChild(gridRect);
-        // Add horizontal ruler (top)
-        const hRuler = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        hRuler.setAttribute("x", rulerSize.toString());
-        hRuler.setAttribute("y", "0");
-        hRuler.setAttribute("width", (width - rulerSize).toString());
-        hRuler.setAttribute("height", rulerSize.toString());
-        hRuler.setAttribute("fill", "#f5f5f5");
-        hRuler.setAttribute("stroke", "#ccc");
-        hRuler.setAttribute("stroke-width", "1");
-        backgroundGroup.appendChild(hRuler);
-        // Add vertical ruler (left)
-        const vRuler = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        vRuler.setAttribute("x", "0");
-        vRuler.setAttribute("y", rulerSize.toString());
-        vRuler.setAttribute("width", rulerSize.toString());
-        vRuler.setAttribute("height", (height - rulerSize).toString());
-        vRuler.setAttribute("fill", "#f5f5f5");
-        vRuler.setAttribute("stroke", "#ccc");
-        vRuler.setAttribute("stroke-width", "1");
-        backgroundGroup.appendChild(vRuler);
-        // Add corner square
-        const corner = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        corner.setAttribute("x", "0");
-        corner.setAttribute("y", "0");
-        corner.setAttribute("width", rulerSize.toString());
-        corner.setAttribute("height", rulerSize.toString());
-        corner.setAttribute("fill", "#e8e8e8");
-        corner.setAttribute("stroke", "#ccc");
-        corner.setAttribute("stroke-width", "1");
-        backgroundGroup.appendChild(corner);
         // Add ruler tick marks and labels (horizontal)
         const tickInterval = 50; // Major tick every 50 pixels
         const minorTickInterval = 10; // Minor tick every 10 pixels
-        for (let x = 0; x <= width - rulerSize; x += minorTickInterval) {
+        for (let x = 0; x <= width; x += minorTickInterval) {
             const isMajorTick = x % tickInterval === 0;
             const tickHeight = isMajorTick ? 8 : 4;
             const tick = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            tick.setAttribute("x1", (rulerSize + x).toString());
-            tick.setAttribute("y1", (rulerSize - tickHeight).toString());
-            tick.setAttribute("x2", (rulerSize + x).toString());
-            tick.setAttribute("y2", rulerSize.toString());
+            tick.setAttribute("x1", x.toString());
+            tick.setAttribute("y1", "0");
+            tick.setAttribute("x2", x.toString());
+            tick.setAttribute("y2", tickHeight.toString());
             tick.setAttribute("stroke", "#666");
             tick.setAttribute("stroke-width", "1");
             backgroundGroup.appendChild(tick);
-            // Add label for major ticks
+            // Add label for major ticks - positioned inside the grid, below the top edge
             if (isMajorTick && x > 0) {
                 const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
-                label.setAttribute("x", (rulerSize + x).toString());
+                label.setAttribute("x", x.toString());
                 label.setAttribute("y", "12");
                 label.setAttribute("font-size", "9");
                 label.setAttribute("font-family", "Arial, sans-serif");
@@ -81347,26 +81493,26 @@ class GveHintDesigner extends HTMLElement {
             }
         }
         // Add ruler tick marks and labels (vertical)
-        for (let y = 0; y <= height - rulerSize; y += minorTickInterval) {
+        for (let y = 0; y <= height; y += minorTickInterval) {
             const isMajorTick = y % tickInterval === 0;
             const tickWidth = isMajorTick ? 8 : 4;
             const tick = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            tick.setAttribute("x1", (rulerSize - tickWidth).toString());
-            tick.setAttribute("y1", (rulerSize + y).toString());
-            tick.setAttribute("x2", rulerSize.toString());
-            tick.setAttribute("y2", (rulerSize + y).toString());
+            tick.setAttribute("x1", "0");
+            tick.setAttribute("y1", y.toString());
+            tick.setAttribute("x2", tickWidth.toString());
+            tick.setAttribute("y2", y.toString());
             tick.setAttribute("stroke", "#666");
             tick.setAttribute("stroke-width", "1");
             backgroundGroup.appendChild(tick);
-            // Add label for major ticks
+            // Add label for major ticks - positioned inside the grid, to the right of the left edge
             if (isMajorTick && y > 0) {
                 const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
                 label.setAttribute("x", "10");
-                label.setAttribute("y", (rulerSize + y + 3).toString());
+                label.setAttribute("y", (y + 3).toString());
                 label.setAttribute("font-size", "9");
                 label.setAttribute("font-family", "Arial, sans-serif");
                 label.setAttribute("fill", "#333");
-                label.setAttribute("text-anchor", "middle");
+                label.setAttribute("text-anchor", "start");
                 label.textContent = y.toString();
                 backgroundGroup.appendChild(label);
             }
@@ -81514,7 +81660,8 @@ class GveHintDesigner extends HTMLElement {
         // Animation dropdown
         this._animationsDropdown = document.createElement("select");
         this._animationsDropdown.className = "animations-dropdown";
-        this._animationsDropdown.innerHTML = '<option value="">-- Select Animation --</option>';
+        this._animationsDropdown.innerHTML =
+            '<option value="">-- Select Animation --</option>';
         animControls.appendChild(this._animationsDropdown);
         // Load button
         const loadAnimBtn = this.createButton("load-animation", "download-cloud", "Load animation code");
@@ -81542,10 +81689,14 @@ class GveHintDesigner extends HTMLElement {
     createHintVariablesList() {
         const panel = document.createElement("div");
         panel.className = "variables-panel resizable-panel";
-        // Header
+        // Header with warning icon placeholder
         const header = document.createElement("div");
         header.className = "panel-header";
-        header.textContent = "Hint Variables";
+        const headerText = document.createElement("span");
+        headerText.textContent = "Hint Variables";
+        header.appendChild(headerText);
+        // Store reference to header for adding warning icon
+        this._variablesPanelHeader = header;
         panel.appendChild(header);
         // Toolbar
         const toolbar = document.createElement("div");
@@ -81553,10 +81704,18 @@ class GveHintDesigner extends HTMLElement {
         const addVarBtn = this.createButton("add-variable", "plus-circle", "Add new variable");
         addVarBtn.classList.add("btn-primary");
         toolbar.appendChild(addVarBtn);
+        const populateBtn = this.createButton("populate-from-hints", "download-cloud", "Populate from all hints");
+        populateBtn.classList.add("btn-accent");
+        toolbar.appendChild(populateBtn);
         const deleteAllBtn = this.createButton("delete-all-vars", "trash-2", "Delete all variables");
         deleteAllBtn.classList.add("btn-danger");
         toolbar.appendChild(deleteAllBtn);
         panel.appendChild(toolbar);
+        // Validation message (initially hidden)
+        this._variablesValidationMsg = document.createElement("div");
+        this._variablesValidationMsg.className = "validation-message";
+        this._variablesValidationMsg.style.display = "none";
+        panel.appendChild(this._variablesValidationMsg);
         // Content
         const content = document.createElement("div");
         content.className = "panel-content";
@@ -81579,7 +81738,12 @@ class GveHintDesigner extends HTMLElement {
         // Use feather.icons to get the SVG directly (for Shadow DOM compatibility)
         const icon = featherExports.icons[iconName];
         if (icon) {
-            btn.innerHTML = icon.toSvg({ class: 'feather-icon', width: 16, height: 16, 'stroke-width': 2 });
+            btn.innerHTML = icon.toSvg({
+                class: "feather-icon",
+                width: 16,
+                height: 16,
+                "stroke-width": 2,
+            });
         }
         else {
             this._logger.warn("Feather icon not found:", iconName);
@@ -81649,14 +81813,14 @@ class GveHintDesigner extends HTMLElement {
         splitter.addEventListener("pointerdown", (e) => {
             const startY = e.clientY;
             const startHeightAbove = panelAbove.offsetHeight;
-            const container = this._shadow.querySelector('.hint-designer-container');
+            const container = this._shadow.querySelector(".hint-designer-container");
             if (!container)
                 return;
             const onMove = (moveEvent) => {
                 const delta = moveEvent.clientY - startY;
                 const newHeightAbove = Math.max(300, startHeightAbove + delta);
                 // Determine which splitter this is based on the panel above
-                const isTopSplitter = panelAbove.classList.contains('top-panels-wrapper');
+                const isTopSplitter = panelAbove.classList.contains("top-panels-wrapper");
                 if (isTopSplitter) {
                     // Splitter 1: between top and properties
                     // Set top height, let properties and variables share remaining space
@@ -81665,7 +81829,7 @@ class GveHintDesigner extends HTMLElement {
                 else {
                     // Splitter 2: between properties and variables
                     // Get top panel height and keep it fixed
-                    const topPanel = this._shadow.querySelector('.top-panels-wrapper');
+                    const topPanel = this._shadow.querySelector(".top-panels-wrapper");
                     const topHeight = topPanel ? topPanel.offsetHeight : 300;
                     // Set top and properties heights, let variables fill remaining
                     container.style.gridTemplateRows = `${topHeight}px 6px ${newHeightAbove}px 6px minmax(200px, 1fr)`;
@@ -81723,6 +81887,7 @@ class GveHintDesigner extends HTMLElement {
         // Variables panel
         this.addClickListener("delete-all-vars", () => this.deleteAllVariables());
         this.addClickListener("add-variable", () => this.addVariable());
+        this.addClickListener("populate-from-hints", () => this.populateVariablesFromHints());
         // Word wrap toggles
         this.addClickListener("toggle-svg-wrap", () => this.toggleSvgWordWrap());
         this.addClickListener("toggle-js-wrap", () => this.toggleJsWordWrap());
@@ -81745,17 +81910,17 @@ class GveHintDesigner extends HTMLElement {
      * Initialize panning with mouse drag.
      */
     initializePanning() {
-        const panel = this._shadow.querySelector('.svg-display-panel');
+        const panel = this._shadow.querySelector(".svg-display-panel");
         if (!panel)
             return;
-        panel.addEventListener('mousedown', (e) => {
+        panel.addEventListener("mousedown", (e) => {
             const mouseEvent = e;
             this._isPanning = true;
             this._lastPanX = mouseEvent.clientX;
             this._lastPanY = mouseEvent.clientY;
-            panel.style.cursor = 'grabbing';
+            panel.style.cursor = "grabbing";
         });
-        document.addEventListener('mousemove', (e) => {
+        document.addEventListener("mousemove", (e) => {
             if (!this._isPanning)
                 return;
             const deltaX = e.clientX - this._lastPanX;
@@ -81766,24 +81931,24 @@ class GveHintDesigner extends HTMLElement {
             this._lastPanY = e.clientY;
             this.updateSvgTransform();
         });
-        document.addEventListener('mouseup', () => {
+        document.addEventListener("mouseup", () => {
             if (this._isPanning) {
                 this._isPanning = false;
                 const panelEl = panel;
-                panelEl.style.cursor = 'grab';
+                panelEl.style.cursor = "grab";
             }
         });
         // Set initial cursor
-        panel.style.cursor = 'grab';
+        panel.style.cursor = "grab";
     }
     /**
      * Initialize zooming with mouse wheel.
      */
     initializeWheelZoom() {
-        const panel = this._shadow.querySelector('.svg-display-panel');
+        const panel = this._shadow.querySelector(".svg-display-panel");
         if (!panel)
             return;
-        panel.addEventListener('wheel', (e) => {
+        panel.addEventListener("wheel", (e) => {
             const wheelEvent = e;
             wheelEvent.preventDefault();
             // Determine zoom direction based on wheel delta
@@ -81838,7 +82003,8 @@ class GveHintDesigner extends HTMLElement {
         if (!this._hintsDropdown)
             return;
         const currentValue = this._hintsDropdown.value;
-        this._hintsDropdown.innerHTML = '<option value="">-- Select Hint --</option>';
+        this._hintsDropdown.innerHTML =
+            '<option value="">-- Select Hint --</option>';
         const hintIds = Object.keys(this._data.hints);
         hintIds.forEach((hintId) => {
             const option = document.createElement("option");
@@ -81860,7 +82026,8 @@ class GveHintDesigner extends HTMLElement {
         if (!this._animationsDropdown)
             return;
         const currentValue = this._animationsDropdown.value;
-        this._animationsDropdown.innerHTML = '<option value="">-- Select Animation --</option>';
+        this._animationsDropdown.innerHTML =
+            '<option value="">-- Select Animation --</option>';
         Object.keys(this._data.animations).forEach((animId) => {
             const option = document.createElement("option");
             option.value = animId;
@@ -81931,7 +82098,8 @@ class GveHintDesigner extends HTMLElement {
                 if (this._jsTextarea) {
                     // If the ID is not found, use the template; otherwise use empty string
                     const animCode = this._data.animations[animId];
-                    this._jsTextarea.value = animCode !== undefined ? animCode : NEW_ANIMATION_TEMPLATE;
+                    this._jsTextarea.value =
+                        animCode !== undefined ? animCode : NEW_ANIMATION_TEMPLATE;
                     this.highlightJs();
                 }
             }
@@ -81988,6 +82156,49 @@ class GveHintDesigner extends HTMLElement {
         if (this._embeddedJsCheckbox)
             this._embeddedJsCheckbox.checked = false;
     }
+    /**
+     * Validate SVG code for well-formedness and structure.
+     * Returns an error message if validation fails, or null if valid.
+     */
+    validateSvgCode(svgCode) {
+        // Check if SVG code is empty
+        if (!svgCode || !svgCode.trim()) {
+            return "SVG code cannot be empty";
+        }
+        const trimmedCode = svgCode.trim();
+        // Check that it starts with <g and ends with </g>
+        if (!trimmedCode.startsWith("<g")) {
+            return "SVG must start with a <g> element (e.g., <g> or <g ...>)";
+        }
+        if (!trimmedCode.endsWith("</g>")) {
+            return "SVG must end with </g> (closing tag for the root <g> element)";
+        }
+        // Use DOMParser to validate XML well-formedness
+        const parser = new DOMParser();
+        const wrappedSvg = `<svg xmlns="http://www.w3.org/2000/svg">${svgCode}</svg>`;
+        const doc = parser.parseFromString(wrappedSvg, "image/svg+xml");
+        // Check for parsing errors
+        const errorNode = doc.querySelector("parsererror");
+        if (errorNode) {
+            const errorText = errorNode.textContent || "Unknown XML parsing error";
+            return `XML is not well-formed: ${errorText}`;
+        }
+        // Verify there is exactly one root <g> element
+        const svgElement = doc.documentElement;
+        const rootChildren = Array.from(svgElement.children);
+        if (rootChildren.length === 0) {
+            return "SVG must contain a <g> element";
+        }
+        if (rootChildren.length > 1) {
+            return `SVG must have exactly one root <g> element, but found ${rootChildren.length} root elements. Wrap all content in a single <g> element.`;
+        }
+        const rootElement = rootChildren[0];
+        if (rootElement.tagName.toLowerCase() !== "g") {
+            return `Root element must be <g>, but found <${rootElement.tagName}>`;
+        }
+        // All validations passed
+        return null;
+    }
     /**
      * Add a new hint.
      */
@@ -82027,19 +82238,21 @@ class GveHintDesigner extends HTMLElement {
         // Validate SVG and JS
         const svgCode = this._svgTextarea?.value || "";
         const animationValue = this._jsTextarea?.value || "";
+        // Validate SVG code for well-formedness and structure
+        const svgValidationError = this.validateSvgCode(svgCode);
+        if (svgValidationError) {
+            this.showMessage(`SVG validation error: ${svgValidationError}`, "error");
+            return; // Prevent saving on error
+        }
+        // Validate JS syntax if present
         try {
-            // Validate SVG (basic check)
-            if (svgCode && !svgCode.trim().startsWith("<g")) {
-                throw new Error("SVG must start with <g> element");
-            }
-            // Validate JS syntax if present (we'll do more specific validation below)
             if (animationValue && !animationValue.trim().startsWith("#")) {
                 // Try to create a function to validate syntax
                 new Function("gsap", "targetEl", "rootEl", animationValue);
             }
         }
         catch (err) {
-            this.showMessage(`Validation error: ${err}`, "error");
+            this.showMessage(`JS validation error: ${err}`, "error");
             return; // Prevent saving on error
         }
         // Build hint object
@@ -82178,23 +82391,33 @@ class GveHintDesigner extends HTMLElement {
             if (node.nodeType === Node.ELEMENT_NODE) {
                 const element = node;
                 const tagName = element.tagName.toLowerCase();
-                const id = element.getAttribute('id');
+                const id = element.getAttribute("id");
                 // Keep defs and grid-and-rulers, remove everything else
-                if (tagName !== 'defs' && id !== 'grid-and-rulers') {
+                if (tagName !== "defs" && id !== "grid-and-rulers") {
                     nodesToRemove.push(node);
                 }
             }
         }
-        nodesToRemove.forEach(node => this._svgDisplay.removeChild(node));
+        nodesToRemove.forEach((node) => this._svgDisplay.removeChild(node));
         // If grid and rulers don't exist yet, add them
-        if (!this._svgDisplay.querySelector('#grid-and-rulers')) {
+        if (!this._svgDisplay.querySelector("#grid-and-rulers")) {
             this.addGridAndRulers(this._svgDisplay);
         }
-        if (!this._hintId || !this._data.hints[this._hintId]) {
+        if (!this._hintId) {
             return;
         }
-        const hint = this._data.hints[this._hintId];
-        let svgCode = hint.svg;
+        // Get SVG code from textarea if it exists, otherwise from saved data
+        let svgCode = this._svgTextarea?.value || "";
+        // Fallback to saved data if textarea is empty and we have saved data
+        if (!svgCode && this._data.hints[this._hintId]) {
+            svgCode = this._data.hints[this._hintId].svg;
+        }
+        // If still no SVG code, return early
+        if (!svgCode) {
+            return;
+        }
+        // Validate variables before resolving them
+        this.validateSvgVariables(svgCode);
         // Resolve variables
         svgCode = this.resolveVariables(svgCode);
         try {
@@ -82244,13 +82467,103 @@ class GveHintDesigner extends HTMLElement {
         });
         return resolved;
     }
+    /**
+     * Extract variable names from SVG code (variables in {{...}} placeholders).
+     */
+    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);
+            }
+        }
+        return variables;
+    }
+    /**
+     * Validate SVG variables and update validation message.
+     * Shows a warning if any variables used in SVG are not defined in hint variables.
+     */
+    validateSvgVariables(svgCode) {
+        if (!this._variablesValidationMsg || !this._variablesPanelHeader) {
+            return;
+        }
+        // Extract variables from SVG
+        const usedVariables = this.extractVariablesFromSvg(svgCode);
+        if (usedVariables.length === 0) {
+            // No variables used - hide validation message and warning icon
+            this._variablesValidationMsg.style.display = "none";
+            this.updateVariablesHeaderWarning(false);
+            return;
+        }
+        // Get defined variable names
+        const definedVariables = this._hintVariables.map((v) => v.name);
+        // Find undefined variables
+        const undefinedVariables = usedVariables.filter((v) => !definedVariables.includes(v));
+        if (undefinedVariables.length === 0) {
+            // All variables are defined - hide validation message and warning icon
+            this._variablesValidationMsg.style.display = "none";
+            this.updateVariablesHeaderWarning(false);
+            return;
+        }
+        // Show validation message with list of undefined variables
+        this._variablesValidationMsg.style.display = "block";
+        this._variablesValidationMsg.innerHTML = `
+      <strong>⚠️ Undefined Variables:</strong>
+      <div style="margin-top: 0.5rem;">
+        The following variables are used in the SVG code but not defined in Hint Variables:
+        <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
+          ${undefinedVariables
+            .map((v) => `<li><code>{{${v}}}</code></li>`)
+            .join("")}
+        </ul>
+        <em>Add these variables to the list below to ensure the hint displays correctly.</em>
+      </div>
+    `;
+        // Show warning icon in header
+        this.updateVariablesHeaderWarning(true);
+    }
+    /**
+     * Update warning icon in variables panel header.
+     */
+    updateVariablesHeaderWarning(showWarning) {
+        if (!this._variablesPanelHeader)
+            return;
+        // Remove existing warning icon if present
+        const existingWarning = this._variablesPanelHeader.querySelector(".warning-icon");
+        if (existingWarning) {
+            existingWarning.remove();
+        }
+        if (showWarning) {
+            // Add warning icon
+            const warningIcon = document.createElement("span");
+            warningIcon.className = "warning-icon";
+            warningIcon.title = "Some variables used in SVG are not defined";
+            const icon = featherExports.icons["alert-triangle"];
+            if (icon) {
+                warningIcon.innerHTML = icon.toSvg({
+                    class: "feather-icon",
+                    width: 16,
+                    height: 16,
+                    "stroke-width": 2,
+                    color: "#ff9800",
+                });
+            }
+            else {
+                warningIcon.textContent = "⚠️";
+            }
+            this._variablesPanelHeader.appendChild(warningIcon);
+        }
+    }
     /**
      * Play animation.
      */
     playAnimation() {
         this._logger.debug("Animation", "playAnimation called", {
             hasTimeline: !!this._currentTimeline,
-            isPlaying: this._isPlaying
+            isPlaying: this._isPlaying,
         });
         if (this._currentTimeline) {
             // If timeline exists, just play it
@@ -82288,7 +82601,7 @@ class GveHintDesigner extends HTMLElement {
     createTimeline() {
         this._logger.debug("Animation", "createTimeline called", {
             hasSvgDisplay: !!this._svgDisplay,
-            hintId: this._hintId
+            hintId: this._hintId,
         });
         if (!this._svgDisplay || !this._hintId || !this._data.hints[this._hintId]) {
             this.showMessage("No hint to animate!", "error");
@@ -82302,11 +82615,16 @@ class GveHintDesigner extends HTMLElement {
             if (hint.animation.startsWith("#")) {
                 const animId = hint.animation.substring(1);
                 jsCode = this._data.animations[animId] || "";
-                this._logger.debug("Animation", "Using referenced animation", { animId, hasCode: !!jsCode });
+                this._logger.debug("Animation", "Using referenced animation", {
+                    animId,
+                    hasCode: !!jsCode,
+                });
             }
             else {
                 jsCode = hint.animation;
-                this._logger.debug("Animation", "Using embedded animation", { codeLength: jsCode.length });
+                this._logger.debug("Animation", "Using embedded animation", {
+                    codeLength: jsCode.length,
+                });
             }
         }
         if (!jsCode) {
@@ -82323,7 +82641,10 @@ class GveHintDesigner extends HTMLElement {
             if (!hintEl) {
                 throw new Error("No hint <g> element found in SVG");
             }
-            this._logger.debug("Animation", "Found hint element", { tagName: hintEl.tagName, id: hintEl.getAttribute('id') });
+            this._logger.debug("Animation", "Found hint element", {
+                tagName: hintEl.tagName,
+                id: hintEl.getAttribute("id"),
+            });
             // Set initial opacity to 0 (on style attribute)
             hintEl.style.opacity = "0";
             // Check if GSAP is available
@@ -82369,12 +82690,12 @@ class GveHintDesigner extends HTMLElement {
             }
             this._logger.debug("Animation", "Animation function executed", {
                 resultType: typeof result,
-                isPromise: result && typeof result.then === 'function',
-                isTimeline: result && typeof result.progress === 'function',
-                capturedTweensCount: capturedTweens.length
+                isPromise: result && typeof result.then === "function",
+                isTimeline: result && typeof result.progress === "function",
+                capturedTweensCount: capturedTweens.length,
             });
             // Check what was returned
-            if (result && typeof result.progress === 'function') {
+            if (result && typeof result.progress === "function") {
                 // Direct timeline/tween return
                 this._currentTimeline = result;
                 this._currentTimeline.pause();
@@ -82384,7 +82705,7 @@ class GveHintDesigner extends HTMLElement {
                 // Animation called gsap methods - create timeline with captured tweens
                 this._logger.debug("Animation", "Creating timeline from captured tweens", {
                     tweenCount: capturedTweens.length,
-                    tweenDurations: capturedTweens.map(t => t.duration())
+                    tweenDurations: capturedTweens.map((t) => t.duration()),
                 });
                 // The tweens have already started playing, so we need to:
                 // 1. Kill them to stop auto-playing
@@ -82399,14 +82720,14 @@ class GveHintDesigner extends HTMLElement {
                         duration: duration,
                         totalDuration: totalDuration,
                         targets: tween.targets(),
-                        vars: tween.vars
+                        vars: tween.vars,
                     });
                     // Get the animation method that was used (to, from, fromTo)
                     const targets = tween.targets();
                     const vars = { ...tween.vars };
                     // Get the initial values if this was a fromTo or from tween
                     const isFromTo = tween._from !== undefined;
-                    const isFrom = !isFromTo && tween.vars.hasOwnProperty('startAt');
+                    const isFrom = !isFromTo && tween.vars.hasOwnProperty("startAt");
                     // Kill the original tween to stop it from playing
                     tween.kill();
                     // Recreate the tween in our timeline using the appropriate method
@@ -82425,7 +82746,7 @@ class GveHintDesigner extends HTMLElement {
                     }
                 });
                 this._logger.debug("Animation", "Timeline built from tweens", {
-                    timelineDuration: this._currentTimeline.duration()
+                    timelineDuration: this._currentTimeline.duration(),
                 });
             }
             else {
@@ -82436,7 +82757,7 @@ class GveHintDesigner extends HTMLElement {
             this._logger.debug("Animation", "Timeline created", {
                 duration: this._currentTimeline.duration(),
                 progress: this._currentTimeline.progress(),
-                paused: this._currentTimeline.paused()
+                paused: this._currentTimeline.paused(),
             });
             // Check if timeline has duration
             if (this._currentTimeline.duration() === 0) {
@@ -82448,7 +82769,7 @@ class GveHintDesigner extends HTMLElement {
                 this._logger.debug("Animation", "Animation completed callback", {
                     finalProgress: this._currentTimeline.progress(),
                     finalTime: this._currentTimeline.time(),
-                    duration: this._currentTimeline.duration()
+                    duration: this._currentTimeline.duration(),
                 });
                 this._isPlaying = false;
                 if (this._playButton)
@@ -82464,7 +82785,7 @@ class GveHintDesigner extends HTMLElement {
             });
             this.showMessage("", "");
             this._logger.info("Animation", "Timeline created successfully", {
-                duration: this._currentTimeline.duration()
+                duration: this._currentTimeline.duration(),
             });
         }
         catch (err) {
@@ -82483,7 +82804,7 @@ class GveHintDesigner extends HTMLElement {
     pauseAnimation() {
         this._logger.debug("Animation", "pauseAnimation called", {
             hasTimeline: !!this._currentTimeline,
-            isPlaying: this._isPlaying
+            isPlaying: this._isPlaying,
         });
         if (this._currentTimeline) {
             this._currentTimeline.pause();
@@ -82494,7 +82815,7 @@ class GveHintDesigner extends HTMLElement {
                 this._pauseButton.disabled = true;
             this.stopProgressUpdate();
             this._logger.debug("Animation", "Animation paused", {
-                progress: this._currentTimeline.progress()
+                progress: this._currentTimeline.progress(),
             });
         }
     }
@@ -82504,7 +82825,7 @@ class GveHintDesigner extends HTMLElement {
     restartAnimation() {
         this._logger.debug("Animation", "restartAnimation called", {
             hasTimeline: !!this._currentTimeline,
-            isPlaying: this._isPlaying
+            isPlaying: this._isPlaying,
         });
         if (this._currentTimeline) {
             this._logger.debug("Animation", "Restarting existing timeline");
@@ -82529,7 +82850,7 @@ class GveHintDesigner extends HTMLElement {
         this._logger.debug("Animation", "seekAnimation called", {
             hasProgressBar: !!this._progressBar,
             hasTimeline: !!this._currentTimeline,
-            progressBarValue: this._progressBar?.value
+            progressBarValue: this._progressBar?.value,
         });
         if (!this._progressBar)
             return;
@@ -82547,7 +82868,7 @@ class GveHintDesigner extends HTMLElement {
             progressBarValue: this._progressBar.value,
             calculatedProgress: progress,
             wasPlaying: this._isPlaying,
-            timelineDuration: this._currentTimeline.duration()
+            timelineDuration: this._currentTimeline.duration(),
         });
         // Pause the timeline to prevent it from continuing to play
         this._isPlaying;
@@ -82556,7 +82877,7 @@ class GveHintDesigner extends HTMLElement {
         this._currentTimeline.progress(progress);
         this._logger.debug("Animation", "Seek completed", {
             newProgress: this._currentTimeline.progress(),
-            timelinePaused: this._currentTimeline.paused()
+            timelinePaused: this._currentTimeline.paused(),
         });
         // Update playing state
         this._isPlaying = false;
@@ -82580,7 +82901,7 @@ class GveHintDesigner extends HTMLElement {
             }
         }, 50); // Update every 50ms
         this._logger.debug("Animation", "Progress update started", {
-            intervalId: this._progressUpdateInterval
+            intervalId: this._progressUpdateInterval,
         });
     }
     /**
@@ -82589,7 +82910,7 @@ class GveHintDesigner extends HTMLElement {
     stopProgressUpdate() {
         if (this._progressUpdateInterval) {
             this._logger.debug("Animation", "Stopping progress update", {
-                intervalId: this._progressUpdateInterval
+                intervalId: this._progressUpdateInterval,
             });
             clearInterval(this._progressUpdateInterval);
             this._progressUpdateInterval = undefined;
@@ -82616,7 +82937,7 @@ class GveHintDesigner extends HTMLElement {
         if (!this._svgDisplay)
             return;
         // Get panel size to center the SVG
-        const panel = this._shadow.querySelector('.svg-display-panel');
+        const panel = this._shadow.querySelector(".svg-display-panel");
         if (panel) {
             const panelWidth = panel.clientWidth;
             const panelHeight = panel.clientHeight;
@@ -82647,8 +82968,8 @@ class GveHintDesigner extends HTMLElement {
             panY: this._panY,
             zoomLevel: this._zoomLevel,
             transformString,
-            svgWidth: this._svgDisplay.getAttribute('width'),
-            svgHeight: this._svgDisplay.getAttribute('height'),
+            svgWidth: this._svgDisplay.getAttribute("width"),
+            svgHeight: this._svgDisplay.getAttribute("height"),
             svgBBox: this._svgDisplay.getBBox(),
             svgBoundingClientRect: {
                 x: svgBoundingRect.x,
@@ -82658,18 +82979,18 @@ class GveHintDesigner extends HTMLElement {
                 top: svgBoundingRect.top,
                 left: svgBoundingRect.left,
                 right: svgBoundingRect.right,
-                bottom: svgBoundingRect.bottom
-            }
+                bottom: svgBoundingRect.bottom,
+            },
         });
         // Apply transform: translate first, then scale from the SVG's own center
         this._svgDisplay.style.transform = transformString;
-        this._svgDisplay.style.transformOrigin = '0 0';
+        this._svgDisplay.style.transformOrigin = "0 0";
         // Only apply transition during zoom, not during pan (to avoid sluggishness)
         if (!this._isPanning) {
-            this._svgDisplay.style.transition = 'transform 0.15s ease-out';
+            this._svgDisplay.style.transition = "transform 0.15s ease-out";
         }
         else {
-            this._svgDisplay.style.transition = 'none';
+            this._svgDisplay.style.transition = "none";
         }
     }
     /**
@@ -82689,7 +83010,7 @@ class GveHintDesigner extends HTMLElement {
             // Get the bounding box of the hint content
             const bbox = hintContent.getBBox();
             // Get the SVG display panel size
-            const panel = this._shadow.querySelector('.svg-display-panel');
+            const panel = this._shadow.querySelector(".svg-display-panel");
             if (!panel)
                 return;
             const panelWidth = panel.clientWidth;
@@ -82710,8 +83031,8 @@ class GveHintDesigner extends HTMLElement {
             // We want this to be at the center of the panel: (panelWidth/2, panelHeight/2)
             // So: panX + (bboxCenterX * scale) = panelWidth / 2
             //     panY + (bboxCenterY * scale) = panelHeight / 2
-            const panX = (panelWidth / 2) - (bboxCenterX * scale);
-            const panY = (panelHeight / 2) - (bboxCenterY * scale);
+            const panX = panelWidth / 2 - bboxCenterX * scale;
+            const panY = panelHeight / 2 - bboxCenterY * scale;
             this._zoomLevel = scale;
             this._panX = panX;
             this._panY = panY;
@@ -82724,7 +83045,7 @@ class GveHintDesigner extends HTMLElement {
                 bboxCenterX,
                 bboxCenterY,
                 panelWidth,
-                panelHeight
+                panelHeight,
             });
         }
         catch (err) {
@@ -82737,13 +83058,13 @@ class GveHintDesigner extends HTMLElement {
      */
     toggleSvgWordWrap() {
         this._svgWordWrapEnabled = !this._svgWordWrapEnabled;
-        const wrapper = this._shadow.getElementById('svg-wrapper');
+        const wrapper = this._shadow.getElementById("svg-wrapper");
         if (wrapper) {
             if (this._svgWordWrapEnabled) {
-                wrapper.classList.add('word-wrap-enabled');
+                wrapper.classList.add("word-wrap-enabled");
             }
             else {
-                wrapper.classList.remove('word-wrap-enabled');
+                wrapper.classList.remove("word-wrap-enabled");
             }
         }
         this._logger.debug("Component", "SVG word wrap toggled", this._svgWordWrapEnabled);
@@ -82753,13 +83074,13 @@ class GveHintDesigner extends HTMLElement {
      */
     toggleJsWordWrap() {
         this._jsWordWrapEnabled = !this._jsWordWrapEnabled;
-        const wrapper = this._shadow.getElementById('js-wrapper');
+        const wrapper = this._shadow.getElementById("js-wrapper");
         if (wrapper) {
             if (this._jsWordWrapEnabled) {
-                wrapper.classList.add('word-wrap-enabled');
+                wrapper.classList.add("word-wrap-enabled");
             }
             else {
-                wrapper.classList.remove('word-wrap-enabled');
+                wrapper.classList.remove("word-wrap-enabled");
             }
         }
         this._logger.debug("Component", "JS word wrap toggled", this._jsWordWrapEnabled);
@@ -82855,7 +83176,9 @@ class GveHintDesigner extends HTMLElement {
         }
         this._hintVariables.push({ name, value: "" });
         this.refreshVariablesTable();
-        this.fireEvent("hintVariablesChange", { hintVariables: this._hintVariables });
+        this.fireEvent("hintVariablesChange", {
+            hintVariables: this._hintVariables,
+        });
     }
     /**
      * Delete a variable.
@@ -82863,7 +83186,9 @@ class GveHintDesigner extends HTMLElement {
     deleteVariable(index) {
         this._hintVariables.splice(index, 1);
         this.refreshVariablesTable();
-        this.fireEvent("hintVariablesChange", { hintVariables: this._hintVariables });
+        this.fireEvent("hintVariablesChange", {
+            hintVariables: this._hintVariables,
+        });
     }
     /**
      * Edit a variable.
@@ -82874,7 +83199,9 @@ class GveHintDesigner extends HTMLElement {
         if (newValue !== null) {
             variable.value = newValue;
             this.refreshVariablesTable();
-            this.fireEvent("hintVariablesChange", { hintVariables: this._hintVariables });
+            this.fireEvent("hintVariablesChange", {
+                hintVariables: this._hintVariables,
+            });
         }
     }
     /**
@@ -82886,7 +83213,61 @@ class GveHintDesigner extends HTMLElement {
             return;
         this._hintVariables = [];
         this.refreshVariablesTable();
-        this.fireEvent("hintVariablesChange", { hintVariables: this._hintVariables });
+        this.fireEvent("hintVariablesChange", {
+            hintVariables: this._hintVariables,
+        });
+    }
+    /**
+     * Extract all variable names from all hints in data.
+     * Returns a sorted array of unique variable names.
+     */
+    extractAllVariablesFromHints() {
+        const allVariables = new Set();
+        // Iterate through all hints in data
+        Object.values(this._data.hints).forEach((hint) => {
+            if (hint.svg) {
+                // Extract variables from this hint's SVG
+                const variables = this.extractVariablesFromSvg(hint.svg);
+                variables.forEach((varName) => allVariables.add(varName));
+            }
+        });
+        // Convert to array and sort alphabetically
+        return Array.from(allVariables).sort();
+    }
+    /**
+     * Populate hint variables from all hints.
+     * Extracts all variables from all hints' SVG code and merges them into hintVariables.
+     * Only adds variables that don't already exist.
+     */
+    populateVariablesFromHints() {
+        // Extract all variables from hints
+        const extractedVariables = this.extractAllVariablesFromHints();
+        if (extractedVariables.length === 0) {
+            this.showMessage("No variables found in hints", "info");
+            return;
+        }
+        // Get existing variable names for quick lookup
+        const existingNames = new Set(this._hintVariables.map((v) => v.name));
+        // Add new variables (those not already in hintVariables)
+        let addedCount = 0;
+        extractedVariables.forEach((varName) => {
+            if (!existingNames.has(varName)) {
+                this._hintVariables.push({ name: varName, value: "" });
+                addedCount++;
+            }
+        });
+        // Refresh UI and notify
+        this.refreshVariablesTable();
+        this.fireEvent("hintVariablesChange", {
+            hintVariables: this._hintVariables,
+        });
+        // Show feedback message
+        if (addedCount === 0) {
+            this.showMessage(`All ${extractedVariables.length} variable(s) already defined`, "info");
+        }
+        else {
+            this.showMessage(`Added ${addedCount} new variable(s) from hints (${extractedVariables.length} total found)`, "success");
+        }
     }
     /**
      * Refresh the variables table.
@@ -82895,6 +83276,11 @@ class GveHintDesigner extends HTMLElement {
         if (!this._variablesTable)
             return;
         this._variablesTable.innerHTML = "";
+        // Ensure _hintVariables is an array
+        if (!Array.isArray(this._hintVariables)) {
+            this._logger.warn("Component", "hintVariables is not an array, resetting to empty array", this._hintVariables);
+            this._hintVariables = [];
+        }
         if (this._hintVariables.length === 0) {
             const row = this._variablesTable.insertRow();
             const cell = row.insertCell();
@@ -82902,6 +83288,11 @@ class GveHintDesigner extends HTMLElement {
             cell.textContent = "No variables defined";
             cell.style.fontStyle = "italic";
             cell.style.color = "#999";
+            // Re-validate SVG variables after clearing variables
+            const svgCode = this._svgTextarea?.value || "";
+            if (svgCode) {
+                this.validateSvgVariables(svgCode);
+            }
             return;
         }
         this._hintVariables.forEach((variable, index) => {
@@ -82922,6 +83313,11 @@ class GveHintDesigner extends HTMLElement {
             const valueCell = row.insertCell();
             valueCell.textContent = variable.value;
         });
+        // Re-validate SVG variables after updating the variables table
+        const svgCode = this._svgTextarea?.value || "";
+        if (svgCode) {
+            this.validateSvgVariables(svgCode);
+        }
     }
     /**
      * Show a message in the message panel.
@@ -82942,16 +83338,18 @@ class GveHintDesigner extends HTMLElement {
         if (!this._svgTextarea || !this._svgHighlightContainer) {
             this._logger.debug("Component", "Cannot highlight SVG - missing elements", {
                 hasTextarea: !!this._svgTextarea,
-                hasContainer: !!this._svgHighlightContainer
+                hasContainer: !!this._svgHighlightContainer,
             });
             return;
         }
         const code = this._svgTextarea.value;
-        this._logger.debug("Component", "Highlighting SVG", { codeLength: code.length });
+        this._logger.debug("Component", "Highlighting SVG", {
+            codeLength: code.length,
+        });
         try {
             // Highlight as XML
-            const highlighted = HighlightJS.highlight(code, { language: 'xml' }).value;
-            this._svgHighlightContainer.innerHTML = highlighted + '\n';
+            const highlighted = HighlightJS.highlight(code, { language: "xml" }).value;
+            this._svgHighlightContainer.innerHTML = highlighted + "\n";
             this._logger.debug("Component", "SVG highlighted successfully");
         }
         catch (err) {
@@ -82969,16 +83367,20 @@ class GveHintDesigner extends HTMLElement {
         if (!this._jsTextarea || !this._jsHighlightContainer) {
             this._logger.debug("Component", "Cannot highlight JS - missing elements", {
                 hasTextarea: !!this._jsTextarea,
-                hasContainer: !!this._jsHighlightContainer
+                hasContainer: !!this._jsHighlightContainer,
             });
             return;
         }
         const code = this._jsTextarea.value;
-        this._logger.debug("Component", "Highlighting JS", { codeLength: code.length });
+        this._logger.debug("Component", "Highlighting JS", {
+            codeLength: code.length,
+        });
         try {
             // Highlight as JavaScript
-            const highlighted = HighlightJS.highlight(code, { language: 'javascript' }).value;
-            this._jsHighlightContainer.innerHTML = highlighted + '\n';
+            const highlighted = HighlightJS.highlight(code, {
+                language: "javascript",
+            }).value;
+            this._jsHighlightContainer.innerHTML = highlighted + "\n";
             this._logger.debug("Component", "JS highlighted successfully");
         }
         catch (err) {
@@ -83576,6 +83978,60 @@ class GveHintDesigner extends HTMLElement {
         background: #ffcdd2;
       }
 
+      /* Validation Message */
+      .validation-message {
+        padding: 0.75rem;
+        margin: 0.5rem;
+        background: #fff3cd;
+        border: 1px solid #ffc107;
+        border-radius: 4px;
+        color: #856404;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      .validation-message strong {
+        display: block;
+        margin-bottom: 0.5rem;
+        color: #ff9800;
+      }
+
+      .validation-message code {
+        background: #fff;
+        padding: 0.2rem 0.4rem;
+        border-radius: 3px;
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 12px;
+        border: 1px solid #e0e0e0;
+      }
+
+      .validation-message ul {
+        margin: 0.5rem 0;
+      }
+
+      .validation-message li {
+        margin: 0.25rem 0;
+      }
+
+      .validation-message em {
+        display: block;
+        margin-top: 0.5rem;
+        font-size: 12px;
+        color: #666;
+      }
+
+      /* Warning Icon in Panel Header */
+      .warning-icon {
+        display: inline-flex;
+        align-items: center;
+        margin-left: 0.5rem;
+        color: #ff9800;
+      }
+
+      .warning-icon .feather-icon {
+        display: block;
+      }
+
       /* Responsive layout - use nested grids for each column */
       @media (min-width: 900px) {
         .properties-panel .panel-content {