@myrmidon/gve-snapshot-rendition 1.0.2 → 2.0.2

package/dist/index.js

@@ -71,12 +71,10 @@ const DEFAULT_SETTINGS = {
     `,
     },
     charAnimationId: undefined, // No character animation by default
-    spreadTime: 1500,
     backwardFadeOutTime: 300,
     prologDuration: 800,
     // Hints - empty by default, to be filled by consumer code
     hints: {},
-    hintMargin: 0,
     hintDesignWidth: 300,
     hintDesignHeight: 100,
     showHintHandles: false,
@@ -290,54 +288,6 @@ class AnimationEngine {
             this._logger.error("Animation execution error:", error);
         }
     }
-    /**
-     * Animate multiple elements with spreading transitions.
-     * All elements are animated in parallel with GSAP.
-     *
-     * @param shifts - Map of element IDs to their shift amounts {x, y}
-     * @param duration - Duration in milliseconds
-     * @param rootElement - The root SVG element containing all elements
-     * @returns Promise that resolves when all animations complete
-     */
-    async animateSpreading(shifts, duration, rootElement) {
-        if (shifts.size === 0) {
-            this._logger.debug("AnimationEngine", "No elements to spread");
-            return;
-        }
-        this._logger.debug("AnimationEngine", `Animating spreading for ${shifts.size} elements`);
-        this._logger.time("animateSpreading");
-        const timeline = this._gsap.timeline();
-        for (const [elementId, shift] of shifts.entries()) {
-            const element = rootElement.querySelector(`#${elementId}`);
-            if (!element) {
-                this._logger.warn(`Element ${elementId} not found for spreading animation`);
-                continue;
-            }
-            // Get current transform
-            const currentTransform = element.getAttribute("transform") || "";
-            const translateMatch = currentTransform.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-            let currentX = 0;
-            let currentY = 0;
-            if (translateMatch) {
-                currentX = parseFloat(translateMatch[1]);
-                currentY = parseFloat(translateMatch[2]);
-            }
-            const newX = currentX + shift.x;
-            const newY = currentY + shift.y;
-            // Add to timeline (animations run in parallel with position 0)
-            timeline.to(element, {
-                attr: { transform: `translate(${newX}, ${newY})` },
-                duration: duration / 1000, // Convert ms to seconds for GSAP
-                ease: "power2.inOut",
-            }, 0 // Start time: 0 means all animations start together
-            );
-        }
-        // Wait for timeline to complete
-        await new Promise((resolve) => {
-            timeline.eventCallback("onComplete", resolve);
-        });
-        this._logger.timeEnd("animateSpreading");
-    }
     /**
      * Fade in multiple elements (used for hilites).
      *
@@ -654,271 +604,6 @@ class BoundsCache {
     }
 }
 
-/**
- * Engine for calculating spreading (making room for new elements).
- * Implements the "stone in pond" ripple effect to preserve layout.
- */
-class SpreadingEngine {
-    constructor(boundsCache, logger) {
-        /**
-         * Map of element ID to array of spreading metadata (one per version).
-         * Each element can be shifted multiple times by different versions.
-         */
-        this._spreadingHistory = new Map();
-        this._boundsCache = boundsCache;
-        this._logger = logger;
-    }
-    /**
-     * Track spreading metadata for elements affected by a version.
-     * Called after spreading is applied to record what happened.
-     *
-     * @param versionIndex - Version index that caused the spreading
-     * @param horizontalShifts - Map of element IDs to horizontal shifts
-     * @param verticalShifts - Map of element IDs to vertical shifts
-     */
-    trackSpreading(versionIndex, horizontalShifts, verticalShifts) {
-        // Collect all affected element IDs
-        const affectedIds = new Set([
-            ...horizontalShifts.keys(),
-            ...verticalShifts.keys(),
-        ]);
-        for (const elementId of affectedIds) {
-            const hShift = horizontalShifts.get(elementId) || 0;
-            const vShift = verticalShifts.get(elementId) || 0;
-            const metadata = {
-                versionIndex,
-                horizontalShift: hShift,
-                verticalShift: vShift,
-            };
-            // Get or create history array for this element
-            let history = this._spreadingHistory.get(elementId);
-            if (!history) {
-                history = [];
-                this._spreadingHistory.set(elementId, history);
-            }
-            // Add to history
-            history.push(metadata);
-            this._logger.debug("Spreading", `Tracked spreading for ${elementId} at v${versionIndex}: h=${hShift}, v=${vShift}`);
-        }
-    }
-    /**
-     * Get spreading metadata for elements affected by a specific version.
-     * Used when reversing spreading during backward navigation.
-     *
-     * @param versionIndex - Version index to get spreading for
-     * @returns Map of element ID to spreading metadata
-     */
-    getSpreadingForVersion(versionIndex) {
-        const result = new Map();
-        for (const [elementId, history] of this._spreadingHistory.entries()) {
-            // Find spreading caused by this version
-            const metadata = history.find((m) => m.versionIndex === versionIndex);
-            if (metadata) {
-                result.set(elementId, metadata);
-            }
-        }
-        return result;
-    }
-    /**
-     * Remove spreading history for a specific version.
-     * Called after spreading is reversed during backward navigation.
-     *
-     * @param versionIndex - Version index to remove history for
-     */
-    clearSpreadingForVersion(versionIndex) {
-        for (const [elementId, history] of this._spreadingHistory.entries()) {
-            // Remove entries for this version
-            const filtered = history.filter((m) => m.versionIndex !== versionIndex);
-            if (filtered.length === 0) {
-                // No more history for this element
-                this._spreadingHistory.delete(elementId);
-            }
-            else {
-                this._spreadingHistory.set(elementId, filtered);
-            }
-        }
-        this._logger.debug("Spreading", `Cleared spreading history for v${versionIndex}`);
-    }
-    /**
-     * Calculate spreading required to make room for a new element.
-     *
-     * @param newElementBounds - Bounds of the element to be added
-     * @param excludeIds - Element IDs to exclude from shifting (e.g., the new element itself)
-     * @returns Spreading result with shift amounts for each affected element
-     */
-    calculateSpreading(newElementBounds, excludeIds = []) {
-        this._logger.time("calculateSpreading");
-        this._logger.debug("Spreading", "Calculating spreading for new element", newElementBounds);
-        const horizontalShifts = new Map();
-        const verticalShifts = new Map();
-        // Get all existing elements
-        const allIds = this._boundsCache
-            .getAllIds()
-            .filter((id) => !excludeIds.includes(id));
-        // Calculate horizontal spreading
-        const hShifts = this.calculateHorizontalSpreading(newElementBounds, allIds);
-        hShifts.forEach((shift, id) => horizontalShifts.set(id, shift));
-        // Calculate vertical spreading
-        const vShifts = this.calculateVerticalSpreading(newElementBounds, allIds);
-        vShifts.forEach((shift, id) => verticalShifts.set(id, shift));
-        const hasShifts = horizontalShifts.size > 0 || verticalShifts.size > 0;
-        this._logger.debug("Spreading", "Spreading calculation complete", {
-            horizontalShifts: horizontalShifts.size,
-            verticalShifts: verticalShifts.size,
-            hasShifts,
-        });
-        this._logger.timeEnd("calculateSpreading");
-        return { horizontalShifts, verticalShifts, hasShifts };
-    }
-    /**
-     * Calculate horizontal spreading.
-     * Elements overlapping on the left are shifted left, those on the right are shifted right.
-     */
-    calculateHorizontalSpreading(newBounds, elementIds) {
-        const shifts = new Map();
-        let maxLeftOverlap = 0;
-        let maxRightOverlap = 0;
-        // Find all overlaps
-        const leftElements = [];
-        const rightElements = [];
-        for (const id of elementIds) {
-            const bounds = this._boundsCache.get(id);
-            if (!bounds)
-                continue;
-            // Check for horizontal overlap
-            const horizontalOverlap = this.calculateHorizontalOverlap(newBounds, bounds);
-            if (horizontalOverlap > 0) {
-                // Determine which side this element is on
-                if (bounds.right > newBounds.x && bounds.x < newBounds.x) {
-                    // Element overlaps from the left
-                    leftElements.push(id);
-                    maxLeftOverlap = Math.max(maxLeftOverlap, horizontalOverlap);
-                }
-                else if (bounds.x < newBounds.right &&
-                    bounds.right > newBounds.right) {
-                    // Element overlaps from the right
-                    rightElements.push(id);
-                    maxRightOverlap = Math.max(maxRightOverlap, horizontalOverlap);
-                }
-            }
-        }
-        // Apply shifts
-        if (maxLeftOverlap > 0) {
-            for (const id of leftElements) {
-                shifts.set(id, -maxLeftOverlap); // Shift left (negative)
-                this._logger.debug("Spreading", `Element ${id} shifts left by ${maxLeftOverlap}px`);
-            }
-        }
-        if (maxRightOverlap > 0) {
-            for (const id of rightElements) {
-                shifts.set(id, maxRightOverlap); // Shift right (positive)
-                this._logger.debug("Spreading", `Element ${id} shifts right by ${maxRightOverlap}px`);
-            }
-        }
-        return shifts;
-    }
-    /**
-     * Calculate vertical spreading.
-     * Elements overlapping from above are shifted up, those from below are shifted down.
-     */
-    calculateVerticalSpreading(newBounds, elementIds) {
-        const shifts = new Map();
-        let maxTopOverlap = 0;
-        let maxBottomOverlap = 0;
-        // Find all overlaps
-        const topElements = [];
-        const bottomElements = [];
-        for (const id of elementIds) {
-            const bounds = this._boundsCache.get(id);
-            if (!bounds)
-                continue;
-            // Check for vertical overlap
-            const verticalOverlap = this.calculateVerticalOverlap(newBounds, bounds);
-            if (verticalOverlap > 0) {
-                // Determine which side this element is on
-                if (bounds.bottom > newBounds.y && bounds.y < newBounds.y) {
-                    // Element overlaps from above
-                    topElements.push(id);
-                    maxTopOverlap = Math.max(maxTopOverlap, verticalOverlap);
-                }
-                else if (bounds.y < newBounds.bottom &&
-                    bounds.bottom > newBounds.bottom) {
-                    // Element overlaps from below
-                    bottomElements.push(id);
-                    maxBottomOverlap = Math.max(maxBottomOverlap, verticalOverlap);
-                }
-            }
-        }
-        // Apply shifts
-        if (maxTopOverlap > 0) {
-            for (const id of topElements) {
-                shifts.set(id, -maxTopOverlap); // Shift up (negative)
-                this._logger.debug("Spreading", `Element ${id} shifts up by ${maxTopOverlap}px`);
-            }
-        }
-        if (maxBottomOverlap > 0) {
-            for (const id of bottomElements) {
-                shifts.set(id, maxBottomOverlap); // Shift down (positive)
-                this._logger.debug("Spreading", `Element ${id} shifts down by ${maxBottomOverlap}px`);
-            }
-        }
-        return shifts;
-    }
-    /**
-     * Calculate the horizontal overlap between two bounding rectangles.
-     * Returns 0 if there is no overlap.
-     */
-    calculateHorizontalOverlap(rect1, rect2) {
-        // Check if rectangles overlap horizontally
-        const overlapLeft = Math.max(rect1.x, rect2.x);
-        const overlapRight = Math.min(rect1.right, rect2.right);
-        if (overlapLeft < overlapRight) {
-            return overlapRight - overlapLeft;
-        }
-        return 0;
-    }
-    /**
-     * Calculate the vertical overlap between two bounding rectangles.
-     * Returns 0 if there is no overlap.
-     */
-    calculateVerticalOverlap(rect1, rect2) {
-        // Check if rectangles overlap vertically
-        const overlapTop = Math.max(rect1.y, rect2.y);
-        const overlapBottom = Math.min(rect1.bottom, rect2.bottom);
-        if (overlapTop < overlapBottom) {
-            return overlapBottom - overlapTop;
-        }
-        return 0;
-    }
-    /**
-     * Check if two bounding rectangles overlap.
-     */
-    checkOverlap(rect1, rect2) {
-        return !((rect1.right <= rect2.x || // rect1 is to the left of rect2
-            rect1.x >= rect2.right || // rect1 is to the right of rect2
-            rect1.bottom <= rect2.y || // rect1 is above rect2
-            rect1.y >= rect2.bottom) // rect1 is below rect2
-        );
-    }
-    /**
-     * Find all elements that overlap with given bounds.
-     */
-    findOverlappingElements(bounds, excludeIds = []) {
-        const overlapping = [];
-        for (const id of this._boundsCache.getAllIds()) {
-            if (excludeIds.includes(id))
-                continue;
-            const elementBounds = this._boundsCache.get(id);
-            if (!elementBounds)
-                continue;
-            if (this.checkOverlap(bounds, elementBounds)) {
-                overlapping.push(id);
-            }
-        }
-        return overlapping;
-    }
-}
-
 /**
  * Utility functions for working with character nodes.
  */
@@ -1560,273 +1245,16 @@ class TextLayout {
     }
 }
 
-/**
- * Feature resolver converts features into rendition configuration.
- * This handles all the r_* rendition features and applies them to create
- * a complete configuration for rendering.
- */
-class FeatureResolver {
-    constructor(logger) {
-        this._logger = logger;
-    }
-    /**
-     * Resolve rendition features into a complete configuration.
-     * Features override the base settings.
-     *
-     * @param baseSettings - The base settings from component
-     * @param features - Array of features to apply
-     * @param nodeFeatureContext - Optional context for extracting node features for placeholder resolution
-     * @returns Resolved rendition configuration
-     */
-    resolve(baseSettings, features, nodeFeatureContext) {
-        const config = {
-            fontSize: baseSettings.fontSize,
-            fontFamily: baseSettings.fontFamily,
-            foreColor: baseSettings.foreColor,
-            backColor: baseSettings.backColor,
-            italic: baseSettings.italic,
-            bold: baseSettings.bold,
-            underline: baseSettings.underline,
-            overline: baseSettings.overline,
-            strike: baseSettings.strike,
-            textOffsetX: 0,
-            textOffsetY: 0,
-        };
-        if (!features || features.length === 0) {
-            return config;
-        }
-        // Initialize hintVars map - will contain ALL feature values for placeholder
-        // replacement
-        config.hintVars = new Map();
-        // Initialize hintOverrides map for r_h-* features
-        config.hintOverrides = new Map();
-        // Extract ALL features from reference nodes for placeholder resolution.
-        // This includes features like "note", "group", etc. that don't have r_ prefix.
-        // Features are now stored per-node keyed by version tag.
-        if (nodeFeatureContext) {
-            const { refNodes, outputTag } = nodeFeatureContext;
-            for (const node of refNodes) {
-                const nodeFeaturesArray = node.features?.[outputTag];
-                if (!nodeFeaturesArray)
-                    continue;
-                for (const nodeFeature of nodeFeaturesArray) {
-                    if (nodeFeature.name.startsWith("$"))
-                        continue;
-                    if (!config.hintVars.has(nodeFeature.name)) {
-                        config.hintVars.set(nodeFeature.name, nodeFeature.value);
-                        this._logger.debug("FeatureResolver", `Added node feature to hintVars from node ${node.id} @ ${outputTag}: ${nodeFeature.name}=${nodeFeature.value}`);
-                    }
-                }
-            }
-        }
-        // Process each rendition feature from operation
-        for (const feature of features) {
-            if (!feature.name.startsWith("r_"))
-                continue;
-            const value = feature.value;
-            // Add ALL r_* features to hintVars for placeholder replacement
-            // This allows {{r_fore-color}}, {{r_font-size}}, etc. in hint SVG templates
-            // These override any node features with the same name
-            config.hintVars.set(feature.name, value);
-            switch (feature.name) {
-                case "r_font-size":
-                    config.fontSize = parseFloat(value);
-                    break;
-                case "r_font-family":
-                    config.fontFamily = value;
-                    break;
-                case "r_fore-color":
-                    config.foreColor = value;
-                    break;
-                case "r_back-color":
-                    config.backColor = value;
-                    break;
-                case "r_italic":
-                    config.italic = value === "true" || value === "1";
-                    break;
-                case "r_bold":
-                    config.bold = value === "true" || value === "1";
-                    break;
-                case "r_underline":
-                    config.underline = parseFloat(value);
-                    break;
-                case "r_overline":
-                    config.overline = parseFloat(value);
-                    break;
-                case "r_strike":
-                    config.strike = parseFloat(value);
-                    break;
-                case "r_text-line-style":
-                    config.textLineStyle = value;
-                    break;
-                case "r_text-line-color":
-                    config.textLineColor = value;
-                    break;
-                case "r_rotate":
-                    config.rotate = parseFloat(value);
-                    break;
-                // r_t-* features for added text
-                case "r_t-position":
-                    config.textPosition = value;
-                    break;
-                case "r_t-offset-x":
-                    // Store the value as-is (number or string). It will be parsed later
-                    // in renderAdditionalText when RBR bounds are available.
-                    config.textOffsetX = typeof value === "number" ? value : value;
-                    break;
-                case "r_t-offset-y":
-                    // Store the value as-is (number or string). It will be parsed later
-                    // in renderAdditionalText when RBR bounds are available.
-                    config.textOffsetY = typeof value === "number" ? value : value;
-                    break;
-                case "r_t-solid":
-                    config.textSolid = value === "1" || value === "true";
-                    break;
-                case "r_t-displaced-span":
-                    config.textDisplacedSpan = parseDisplacedSpan(value);
-                    if (!config.textDisplacedSpan) {
-                        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;
-                case "r_hint-vars":
-                    // Parse custom variables and merge with existing hintVars
-                    const customVars = parseHintVars(value);
-                    customVars.forEach((val, key) => {
-                        config.hintVars.set(key, val);
-                    });
-                    break;
-                // r_h-* features for hint property overrides
-                default:
-                    if (feature.name.startsWith("r_h-")) {
-                        this.parseHintOverride(feature.name, value, config);
-                    }
-                    break;
-            }
-        }
-        return config;
-    }
-    /**
-     * Extract character offsets from init features.
-     * This is used for base text layout adjustments.
-     *
-     * @param features - Features from the first annotate operation (init features)
-     * @returns Map of node IDs to their offsets (values may be numbers or "Ntw"/"Nth" strings)
-     */
-    extractCharOffsets(features) {
-        if (!features)
-            return new Map();
-        const charOffsetsValue = getFeatureValue(features, "r_char-offsets");
-        if (!charOffsetsValue)
-            return new Map();
-        return parseCharOffsets(charOffsetsValue);
-    }
-    /**
-     * Check if features contain a specific rendition feature.
-     */
-    hasRenditionFeature(features, featureName) {
-        if (!features)
-            return false;
-        return features.some((f) => f.name === featureName);
-    }
-    /**
-     * Get the value of a rendition feature.
-     */
-    getRenditionFeatureValue(features, featureName) {
-        return getFeatureValue(features, featureName);
-    }
-    /**
-     * Parse r_h-* hint override features.
-     * Format: "value" applies to all hints, or "@hintId1 hintId2:value" applies to specific hints.
-     *
-     * @param featureName - The feature name (e.g., "r_h-position")
-     * @param value - The feature value
-     * @param config - The rendition config to update
-     */
-    parseHintOverride(featureName, value, config) {
-        // Extract property name from feature name (r_h-position -> position)
-        const propertyName = featureName.substring(4); // Remove "r_h-"
-        // Parse value to check if it targets specific hints
-        let targetHints = null; // null = all hints
-        let actualValue = value;
-        if (value.startsWith("@")) {
-            // Format: "@hintId1 hintId2:value"
-            const colonIndex = value.indexOf(":");
-            if (colonIndex > 0) {
-                const hintIdsStr = value.substring(1, colonIndex); // Remove "@" and get up to ":"
-                targetHints = hintIdsStr.trim().split(/\s+/);
-                actualValue = value.substring(colonIndex + 1);
-            }
-            else {
-                this._logger.warn(`Invalid r_h-* format (missing colon): ${featureName}=${value}`);
-                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 ? config.hints : ["*"]);
-        for (const hintId of hints) {
-            // Get or create override object for this hint
-            let override = config.hintOverrides.get(hintId);
-            if (!override) {
-                override = {};
-                config.hintOverrides.set(hintId, override);
-            }
-            // Set the property value
-            switch (propertyName) {
-                case "position":
-                    override.position = actualValue;
-                    break;
-                case "offset-x":
-                    override.offsetX = actualValue;
-                    break;
-                case "offset-y":
-                    override.offsetY = actualValue;
-                    break;
-                case "scale-x":
-                    override.scaleX = actualValue;
-                    break;
-                case "scale-y":
-                    override.scaleY = actualValue;
-                    break;
-                case "rotation":
-                    override.rotation = actualValue;
-                    break;
-                case "solid":
-                    override.solid = actualValue === "1" || actualValue === "true";
-                    break;
-                case "displaced-span":
-                    override.displacedSpan = parseDisplacedSpan(actualValue);
-                    if (!override.displacedSpan) {
-                        this._logger.warn(`Invalid r_h-displaced-span value: ${actualValue}`);
-                    }
-                    break;
-                default:
-                    this._logger.warn(`Unknown hint override property: ${propertyName}`);
-                    break;
-            }
-            this._logger.debug("FeatureResolver", `Added hint override for ${hintId}: ${propertyName}=${actualValue}`);
-        }
-    }
-}
-
 /**
  * Text renderer handles rendering of base text and additional text.
  */
 class TextRenderer {
-    constructor(settings, logger, animationEngine, boundsCache, spreadingEngine) {
+    constructor(settings, logger, animationEngine, boundsCache) {
         this._settings = settings;
         this._logger = logger;
         this._animationEngine = animationEngine;
         this._boundsCache = boundsCache;
-        this._spreadingEngine = spreadingEngine;
         this._textLayout = new TextLayout(settings, logger);
-        this._featureResolver = new FeatureResolver(logger);
     }
     /**
      * Render base text (v0).
@@ -1957,7 +1385,7 @@ class TextRenderer {
         }
         // Apply r_t-value override if specified
         // This overrides the operation's value (the text being added) for display only
-        if (config.textValue) {
+        if (config.textValue !== null && config.textValue !== undefined) {
             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
@@ -1989,137 +1417,186 @@ class TextRenderer {
         // Use first RBR for positioning (additional text doesn't repeat per RBR)
         const rbr = rbrs[0];
         this._logger.debug("TextRenderer", `Using RBR for positioning`, rbr);
-        // 2. Calculate text position based on r_t-position + offsets
-        const position = config.textPosition || "o"; // Default to origin if not specified
-        const targetPos = this.calculateTargetPosition(position, rbr);
-        // Parse offsets using RBR bounds (offsets can be like "0.5th" = half of RBR height)
+        // 2. Calculate position and offsets
+        const position = config.textPosition || "o";
         const offsetX = parseOffset(config.textOffsetX || 0, rbr.height, rbr.width);
         const offsetY = parseOffset(config.textOffsetY || 0, rbr.height, rbr.width);
-        const baseX = targetPos.x + offsetX;
-        const baseY = targetPos.y + offsetY;
+        // 3. Render characters at preliminary positions (baseline y=0) into a hidden
+        //    temporary group so we can measure the actual visual EBR via getBBox().
+        //    This mirrors the hint renderer's approach: render → measure → reposition.
+        //    Using config font metrics here ensures correct character widths.
+        const initialPositions = this.calculateAdditionalTextPositions(nodes, 0, 0, config);
+        const tempGroup = createSVGElement("g");
+        tempGroup.setAttribute("visibility", "hidden");
+        rootSvg.appendChild(tempGroup);
+        const measuredElements = [];
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            const pos = initialPositions[i];
+            if (isLineBreak(node) || isSpace(node))
+                continue;
+            const textEl = createTextElement(node.data, {
+                id: `n_${node.id}`,
+                class: `node version-${versionTag}`,
+                x: pos.x,
+                y: pos.y,
+            });
+            applyTextStyle(textEl, {
+                fontFamily: config.fontFamily,
+                fontSize: config.fontSize,
+                foreColor: config.foreColor,
+                backColor: config.backColor,
+                italic: config.italic,
+                bold: config.bold,
+            });
+            tempGroup.appendChild(textEl);
+            measuredElements.push({ el: textEl, node, initX: pos.x, initY: pos.y });
+        }
+        // 4. Measure actual visual EBR from the temp group
+        const ebrBbox = getSafeBBox(tempGroup);
+        const ebr = {
+            x: ebrBbox.x,
+            y: ebrBbox.y,
+            width: ebrBbox.width,
+            height: ebrBbox.height,
+            right: ebrBbox.x + ebrBbox.width,
+            bottom: ebrBbox.y + ebrBbox.height,
+        };
+        // 5. Compute translation: align EBR with RBR using the same logic as hints
+        const rbrAlignPoint = this.calculateRBRAlignmentPoint(position, rbr);
+        const ebrAlignPoint = this.calculateEBRAlignmentPoint(position, ebr);
+        const dx = rbrAlignPoint.x - ebrAlignPoint.x + offsetX;
+        const dy = rbrAlignPoint.y - ebrAlignPoint.y + offsetY;
+        tempGroup.remove();
         this._logger.debug("TextRenderer", `Text position calculated`, {
             position,
-            targetPos,
+            rbr,
+            ebr,
+            rbrAlignPoint,
+            ebrAlignPoint,
             offsets: { x: offsetX, y: offsetY },
-            base: { x: baseX, y: baseY },
+            translation: { dx, dy },
         });
-        // 3. Calculate positions for each character
-        const positions = this.calculateAdditionalTextPositions(nodes, baseX, baseY);
-        // 4. Calculate bounding rectangle for the text (needed for spreading and prolog)
-        const textBounds = this.calculateTextBounds(nodes, positions);
-        // 5. Apply spreading if r_t-solid=1
-        // Check config.textSolid to determine if spreading should be applied
-        if (config.textSolid) {
-            if (textBounds) {
-                this._logger.debug("TextRenderer", `Applying spreading for solid additional text`, textBounds);
-                const spreading = this._spreadingEngine.calculateSpreading(textBounds, [
-                    `text-group-${versionTag}`,
-                ]);
-                if (spreading.hasShifts) {
-                    // Combine horizontal and vertical shifts
-                    const combinedShifts = new Map();
-                    const allIds = new Set([
-                        ...spreading.horizontalShifts.keys(),
-                        ...spreading.verticalShifts.keys(),
-                    ]);
-                    for (const id of allIds) {
-                        combinedShifts.set(id, {
-                            x: spreading.horizontalShifts.get(id) || 0,
-                            y: spreading.verticalShifts.get(id) || 0,
-                        });
-                    }
-                    // Animate spreading
-                    await this._animationEngine.animateSpreading(combinedShifts, this._settings.spreadTime, rootSvg);
-                    // Update cached bounds for shifted elements
-                    for (const id of allIds) {
-                        const element = rootSvg.querySelector(`#${id}`);
-                        if (element) {
-                            this._boundsCache.updateFromElement(element);
-                        }
-                    }
-                }
-            }
-        }
-        else {
-            this._logger.debug("TextRenderer", `Skipping spreading - additional text is not solid (r_t-solid not set)`);
-        }
-        // 6. Check if prolog panning is needed (element visibility check)
-        // This must happen AFTER positioning and spreading, but BEFORE rendering characters
+        // 6. Compute final textBounds for prolog check
+        const textBounds = {
+            x: ebr.x + dx,
+            y: ebr.y + dy,
+            width: ebr.width,
+            height: ebr.height,
+            right: ebr.right + dx,
+            bottom: ebr.bottom + dy,
+        };
+        // 7. Check if prolog panning is needed
         if (panZoomInstance &&
             viewportWidth &&
             viewportHeight &&
-            this._settings.prologDuration > 0 &&
-            textBounds) {
+            this._settings.prologDuration > 0) {
             const isVisible = this._animationEngine.isElementVisible(textBounds, panZoomInstance, viewportWidth, viewportHeight);
             if (!isVisible) {
                 this._logger.debug("TextRenderer", `Additional text for ${versionTag} would be outside viewport, executing prolog`);
                 await this._animationEngine.animateProlog(panZoomInstance, textBounds, viewportWidth, viewportHeight, this._settings.prologDuration);
             }
         }
-        // 7. Get animation function if specified
+        // 8. Get animation function if specified
         const animationFn = this._settings.charAnimationId
             ? this._animationEngine
                 .getFactory()
                 .resolveAnimation(`#${this._settings.charAnimationId}`, this._settings.animations, "char")
             : undefined;
-        // 8. Render each character with features
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
-            const pos = positions[i];
-            // Skip rendering for line breaks and spaces
-            if (isLineBreak(node) || isSpace(node)) {
-                continue;
+        // 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));
+            rootSvg.appendChild(el);
+            const bbox = getSafeBBox(el);
+            this._boundsCache.set(`n_${node.id}`, bbox);
+            if (animationFn) {
+                el.style.opacity = "0";
+                await this._animationEngine.animate(el, animationFn, rootSvg);
             }
-            await this.renderCharacter(node, pos, rootSvg, versionTag, animationFn, config);
         }
         this._logger.timeEnd(`renderAdditionalText-${versionTag}`);
     }
     /**
      * Calculate positions for additional text characters.
      * Additional text flows left to right from the base position.
+     * When config is provided its font metrics are used for character width
+     * measurement, matching what applyTextStyle will actually render.
      */
-    calculateAdditionalTextPositions(nodes, baseX, baseY) {
+    calculateAdditionalTextPositions(nodes, baseX, baseY, config) {
         const positions = [];
         let currentX = baseX;
         const currentY = baseY;
+        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;
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i];
             if (isLineBreak(node)) {
-                // Line breaks in additional text just get stored but don't render
-                positions.push({
-                    x: currentX,
-                    y: currentY,
-                    nodeId: node.id,
-                    lineNumber: 0,
-                });
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
             }
             else if (isSpace(node)) {
-                // Space: advance by space width
-                const spaceWidth = this._settings.fontSize * 0.33;
-                positions.push({
-                    x: currentX,
-                    y: currentY,
-                    nodeId: node.id,
-                    lineNumber: 0,
-                });
+                const spaceWidth = fontSize * 0.33;
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
                 currentX += spaceWidth + this._settings.charSpacing;
             }
             else {
-                // Regular character
-                positions.push({
-                    x: currentX,
-                    y: currentY,
-                    nodeId: node.id,
-                    lineNumber: 0,
-                });
-                // Calculate character width for next position
-                // Use measurement root for consistent font metrics with actual rendering
-                const charWidth = getTextWidth(node.data, this._settings.fontFamily, this._settings.fontSize, this._settings.bold, this._settings.italic, this._measurementRoot);
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
+                const charWidth = getTextWidth(node.data, fontFamily, fontSize, bold, italic, this._measurementRoot);
                 currentX += charWidth + this._settings.charSpacing;
             }
         }
         return positions;
     }
+    /**
+     * Calculate the RBR anchor point for a given position type.
+     * This is the point on the RBR where the corresponding EBR point will land.
+     */
+    calculateRBRAlignmentPoint(position, rbr) {
+        const centerX = rbr.x + rbr.width / 2;
+        const centerY = rbr.y + rbr.height / 2;
+        switch (position) {
+            case "n": return { x: centerX, y: rbr.y };
+            case "ne": return { x: rbr.right, y: rbr.y };
+            case "e": return { x: rbr.right, y: centerY };
+            case "se": return { x: rbr.right, y: rbr.bottom };
+            case "s": return { x: centerX, y: rbr.bottom };
+            case "sw": return { x: rbr.x, y: rbr.bottom };
+            case "w": return { x: rbr.x, y: centerY };
+            case "nw": return { x: rbr.x, y: rbr.y };
+            case "inw": return { x: rbr.x, y: rbr.y };
+            case "ine": return { x: rbr.right, y: rbr.y };
+            case "isw": return { x: rbr.x, y: rbr.bottom };
+            case "ise": return { x: rbr.right, y: rbr.bottom };
+            case "o":
+            default: return { x: centerX, y: centerY };
+        }
+    }
+    /**
+     * Calculate the EBR anchor point for a given position type.
+     * This is the point on the EBR that should coincide with the RBR anchor point.
+     */
+    calculateEBRAlignmentPoint(position, ebr) {
+        const centerX = ebr.x + ebr.width / 2;
+        const centerY = ebr.y + ebr.height / 2;
+        switch (position) {
+            case "n": return { x: centerX, y: ebr.bottom };
+            case "ne": return { x: ebr.x, y: ebr.bottom };
+            case "e": return { x: ebr.x, y: centerY };
+            case "se": return { x: ebr.x, y: ebr.y };
+            case "s": return { x: centerX, y: ebr.y };
+            case "sw": return { x: ebr.right, y: ebr.y };
+            case "w": return { x: ebr.right, y: centerY };
+            case "nw": return { x: ebr.right, y: ebr.bottom };
+            case "inw": return { x: ebr.x, y: ebr.y };
+            case "ine": return { x: ebr.right, y: ebr.y };
+            case "isw": return { x: ebr.x, y: ebr.bottom };
+            case "ise": return { x: ebr.right, y: ebr.bottom };
+            case "o":
+            default: return { x: centerX, y: centerY };
+        }
+    }
     /**
      * Calculate RBRs from reference nodes.
      * Nodes on different lines create separate RBRs.
@@ -2162,69 +1639,6 @@ class TextRenderer {
         }
         return rbrs;
     }
-    /**
-     * Calculate target position on the RBR based on position type.
-     */
-    calculateTargetPosition(position, rbr) {
-        const centerX = rbr.x + rbr.width / 2;
-        const centerY = rbr.y + rbr.height / 2;
-        switch (position) {
-            case "n": // North (top center)
-                return { x: centerX, y: rbr.y };
-            case "ne": // Northeast (top right)
-                return { x: rbr.right, y: rbr.y };
-            case "e": // East (middle right)
-                return { x: rbr.right, y: centerY };
-            case "se": // Southeast (bottom right)
-                return { x: rbr.right, y: rbr.bottom };
-            case "s": // South (bottom center)
-                return { x: centerX, y: rbr.bottom };
-            case "sw": // Southwest (bottom left)
-                return { x: rbr.x, y: rbr.bottom };
-            case "w": // West (middle left)
-                return { x: rbr.x, y: centerY };
-            case "nw": // Northwest (top left)
-                return { x: rbr.x, y: rbr.y };
-            case "o": // Origin (center)
-            default:
-                return { x: centerX, y: centerY };
-        }
-    }
-    /**
-     * Calculate bounding rectangle for a set of positioned characters.
-     */
-    calculateTextBounds(nodes, positions) {
-        if (nodes.length === 0)
-            return null;
-        // We need to estimate bounds before rendering
-        // Use approximate character dimensions based on settings
-        const charWidth = this._settings.fontSize * 0.6; // Approximate
-        const charHeight = this._settings.fontSize;
-        let minX = Infinity;
-        let minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
-        for (let i = 0; i < nodes.length; i++) {
-            const pos = positions[i];
-            const node = nodes[i];
-            if (isLineBreak(node) || isSpace(node))
-                continue;
-            minX = Math.min(minX, pos.x);
-            minY = Math.min(minY, pos.y - charHeight);
-            maxX = Math.max(maxX, pos.x + charWidth);
-            maxY = Math.max(maxY, pos.y);
-        }
-        if (!isFinite(minX))
-            return null;
-        return {
-            x: minX,
-            y: minY,
-            width: maxX - minX,
-            height: maxY - minY,
-            right: maxX,
-            bottom: maxY,
-        };
-    }
     /**
      * Update settings.
      */
@@ -2239,12 +1653,11 @@ class TextRenderer {
  * Hints are visual counterparts of editing operations.
  */
 class HintRenderer {
-    constructor(settings, logger, animationEngine, boundsCache, spreadingEngine) {
+    constructor(settings, logger, animationEngine, boundsCache) {
         this._settings = settings;
         this._logger = logger;
         this._animationEngine = animationEngine;
         this._boundsCache = boundsCache;
-        this._spreadingEngine = spreadingEngine;
     }
     /**
      * Render a hint for an operation.
@@ -2269,8 +1682,8 @@ class HintRenderer {
         this._logger.info(`Rendering hint: ${hintId} for operation ${operationId}`);
         try {
             // 1. Apply r_h-* overrides to hint properties
-            // Overrides can target this specific hint or all hints ("*")
-            const effectiveHint = this.applyHintOverrides(hint, hintId, hintOverrides, allBaseNodes);
+            // Overrides can target this specific hint (by key or ordinal) or all hints ("*")
+            const effectiveHint = this.applyHintOverrides(hint, hintId, hintOrdinal, hintOverrides, allBaseNodes);
             // 2. Resolve placeholders in SVG
             const resolvedSvg = resolvePlaceholders(effectiveHint.svg, variables);
             this._logger.debug("HintRenderer", `Placeholders resolved`, {
@@ -2302,6 +1715,12 @@ class HintRenderer {
             }
             // 5. Check if this is a placeholder hint
             const hasPlaceholder = hintGroup.querySelector("#placeholder") !== null;
+            // Default-mode placeholder: a placeholder element WITHOUT class="fit".
+            // Per documentation, in default mode the text keeps its natural size and the
+            // container (if any) scales to fit it — meaning no RBR-based scaling is applied.
+            // Fit-mode placeholders still scale the hint to the RBR normally.
+            const isDefaultPlaceholder = hasPlaceholder &&
+                !hintGroup.querySelector("#placeholder")?.classList.contains("fit");
             // 6. Render hint for each RBR (unless it's a placeholder hint and already rendered once)
             let placeholderRendered = false;
             for (let i = 0; i < rbrs.length; i++) {
@@ -2322,6 +1741,13 @@ class HintRenderer {
                 rootSvg.appendChild(currentHintGroup);
                 // 8. Get the scale factors needed to fit RBR
                 const scalingInfo = this.calculateScalingInfo(currentHintGroup, effectiveHint, rbr);
+                // For default-mode placeholder hints the text drives the size, not the RBR.
+                // Override any RBR-derived scale so the hint keeps its natural rendered size.
+                // The EBR (measured from the natural-size hint) is then used to center it.
+                if (isDefaultPlaceholder) {
+                    scalingInfo.scaleX = 1;
+                    scalingInfo.scaleY = 1;
+                }
                 // 9. Apply scale and rotation transforms to prepare the hint
                 await this.applyHintSizeTransforms(currentHintGroup, effectiveHint, scalingInfo);
                 // 10. Get EBR (Element Bounding Rectangle) AFTER transformations
@@ -2329,11 +1755,7 @@ class HintRenderer {
                 const ebrBounds = this.getEBRBounds(currentHintGroup);
                 // 11. Apply positioning transform - align EBR with RBR based on position
                 await this.applyHintPositionTransform(currentHintGroup, effectiveHint, rbr, ebrBounds, scalingInfo);
-                // 10. Handle spreading if solid
-                if (effectiveHint.solid) {
-                    await this.handleSpreading(currentHintGroup, rootSvg, versionTag);
-                }
-                // 11. Check if prolog panning is needed (element visibility check)
+                // 10. Check if prolog panning is needed (element visibility check)
                 // This must happen AFTER positioning and spreading, but BEFORE making visible
                 if (panZoomInstance && viewportWidth && viewportHeight && this._settings.prologDuration > 0) {
                     // IMPORTANT: Use getTransformedBBox() instead of getSafeBBox() here!
@@ -2473,12 +1895,6 @@ class HintRenderer {
                 scaledSize: { width, height },
             });
         }
-        // Apply hint margin
-        if (this._settings.hintMargin > 0) {
-            width += this._settings.hintMargin * 2;
-            height += this._settings.hintMargin * 2;
-            this._logger.debug("HintRenderer", `Applied hint margin: ${this._settings.hintMargin}px`);
-        }
         // Calculate scale factors based on current hint size
         const currentBBox = getSafeBBox(hintGroup);
         const scaleX = currentBBox.width > 0 ? width / currentBBox.width : 1;
@@ -2674,74 +2090,32 @@ class HintRenderer {
                 return { x: centerX, y: centerY };
         }
     }
-    /**
-     * Handle spreading for solid hints.
-     * @param versionTag - Version tag for tracking spreading history
-     */
-    async handleSpreading(hintGroup, rootSvg, versionTag) {
-        const hintBounds = getSafeBBox(hintGroup);
-        const hintId = hintGroup.getAttribute("id");
-        const spreading = this._spreadingEngine.calculateSpreading(hintBounds, [
-            hintId,
-        ]);
-        if (spreading.hasShifts) {
-            this._logger.debug("HintRenderer", `Spreading required for hint ${hintId}`, {
-                horizontalShifts: spreading.horizontalShifts.size,
-                verticalShifts: spreading.verticalShifts.size,
-            });
-            // Combine horizontal and vertical shifts
-            const combinedShifts = new Map();
-            const allIds = new Set([
-                ...spreading.horizontalShifts.keys(),
-                ...spreading.verticalShifts.keys(),
-            ]);
-            for (const id of allIds) {
-                combinedShifts.set(id, {
-                    x: spreading.horizontalShifts.get(id) || 0,
-                    y: spreading.verticalShifts.get(id) || 0,
-                });
-            }
-            // Animate spreading
-            await this._animationEngine.animateSpreading(combinedShifts, this._settings.spreadTime, rootSvg);
-            // Update cached bounds for shifted elements
-            for (const id of allIds) {
-                const element = rootSvg.querySelector(`#${id}`);
-                if (element) {
-                    this._boundsCache.updateFromElement(element);
-                }
-            }
-            // Track spreading metadata for backward navigation
-            // Extract version index from versionTag (e.g., "v2" → 2)
-            const versionMatch = versionTag.match(/v(\d+)/);
-            if (versionMatch) {
-                const versionIndex = parseInt(versionMatch[1]);
-                this._spreadingEngine.trackSpreading(versionIndex, spreading.horizontalShifts, spreading.verticalShifts);
-            }
-        }
-    }
     /**
      * Apply r_h-* overrides to hint properties.
-     * Overrides can target specific hints or all hints ("*").
+     * Priority (lowest to highest): wildcard ("*") < key-based < ordinal-based.
      *
      * @param hint - Original hint design
-     * @param hintId - ID of the hint being rendered
-     * @param hintOverrides - Map of overrides from r_h-* features
+     * @param hintId - ID (key) of the hint being rendered
+     * @param hintOrdinal - 1-based ordinal position of this hint within the operation
+     * @param hintOverrides - Map of overrides from r_h-* features (keyed by ID string or ordinal number)
      * @param allBaseNodes - All base nodes for displaced span resolution
      * @returns Modified hint with overrides applied
      */
-    applyHintOverrides(hint, hintId, hintOverrides, allBaseNodes) {
+    applyHintOverrides(hint, hintId, hintOrdinal, hintOverrides, allBaseNodes) {
         if (!hintOverrides || hintOverrides.size === 0) {
             return hint;
         }
         // Clone hint to avoid modifying original
         const effectiveHint = { ...hint };
-        // Check for overrides targeting this specific hint or all hints
-        const specificOverride = hintOverrides.get(hintId);
+        // Look up overrides by wildcard, key, and ordinal; merge in priority order
         const wildcardOverride = hintOverrides.get("*");
-        // Apply wildcard overrides first, then specific overrides (so specific wins)
+        const specificOverride = hintOverrides.get(hintId);
+        const ordinalOverride = hintOverrides.get(hintOrdinal);
+        // Ordinal (most specific) wins over key-specific, which wins over wildcard
         const override = {
             ...wildcardOverride,
             ...specificOverride,
+            ...ordinalOverride,
         };
         // Apply each override property
         if (override.position !== undefined) {
@@ -2768,10 +2142,6 @@ class HintRenderer {
             effectiveHint.rotation = parseFloat(override.rotation);
             this._logger.debug("HintRenderer", `Override rotation for ${hintId}: ${override.rotation}`);
         }
-        if (override.solid !== undefined) {
-            effectiveHint.solid = override.solid;
-            this._logger.debug("HintRenderer", `Override solid for ${hintId}: ${override.solid}`);
-        }
         if (override.displacedSpan !== undefined) {
             // Convert to displacedRefSpan format (e.g., "64x3")
             const { nodeId, count } = override.displacedSpan;
@@ -2788,6 +2158,262 @@ class HintRenderer {
     }
 }
 
+/**
+ * Feature resolver converts features into rendition configuration.
+ * This handles all the r_* rendition features and applies them to create
+ * a complete configuration for rendering.
+ */
+class FeatureResolver {
+    constructor(logger) {
+        this._logger = logger;
+    }
+    /**
+     * Resolve rendition features into a complete configuration.
+     * Features override the base settings.
+     *
+     * @param baseSettings - The base settings from component
+     * @param features - Array of features to apply
+     * @param nodeFeatureContext - Optional context for extracting node features for placeholder resolution
+     * @returns Resolved rendition configuration
+     */
+    resolve(baseSettings, features, nodeFeatureContext) {
+        const config = {
+            fontSize: baseSettings.fontSize,
+            fontFamily: baseSettings.fontFamily,
+            foreColor: baseSettings.foreColor,
+            backColor: baseSettings.backColor,
+            italic: baseSettings.italic,
+            bold: baseSettings.bold,
+            underline: baseSettings.underline,
+            overline: baseSettings.overline,
+            strike: baseSettings.strike,
+            textOffsetX: 0,
+            textOffsetY: 0,
+        };
+        if (!features || features.length === 0) {
+            return config;
+        }
+        // Initialize hintVars map - will contain ALL feature values for placeholder
+        // replacement
+        config.hintVars = new Map();
+        // Initialize hintOverrides map for r_h-* features
+        config.hintOverrides = new Map();
+        // Extract ALL features from reference nodes for placeholder resolution.
+        // This includes features like "note", "group", etc. that don't have r_ prefix.
+        // Features are now stored per-node keyed by version tag.
+        if (nodeFeatureContext) {
+            const { refNodes, outputTag } = nodeFeatureContext;
+            for (const node of refNodes) {
+                const nodeFeaturesArray = node.features?.[outputTag];
+                if (!nodeFeaturesArray)
+                    continue;
+                for (const nodeFeature of nodeFeaturesArray) {
+                    if (nodeFeature.name.startsWith("$"))
+                        continue;
+                    if (!config.hintVars.has(nodeFeature.name)) {
+                        config.hintVars.set(nodeFeature.name, nodeFeature.value);
+                        this._logger.debug("FeatureResolver", `Added node feature to hintVars from node ${node.id} @ ${outputTag}: ${nodeFeature.name}=${nodeFeature.value}`);
+                    }
+                }
+            }
+        }
+        // Process each rendition feature from operation
+        for (const feature of features) {
+            if (!feature.name.startsWith("r_"))
+                continue;
+            const value = feature.value;
+            // Add ALL r_* features to hintVars for placeholder replacement
+            // This allows {{r_fore-color}}, {{r_font-size}}, etc. in hint SVG templates
+            // These override any node features with the same name
+            config.hintVars.set(feature.name, value);
+            switch (feature.name) {
+                case "r_font-size":
+                    config.fontSize = parseFloat(value);
+                    break;
+                case "r_font-family":
+                    config.fontFamily = value;
+                    break;
+                case "r_fore-color":
+                    config.foreColor = value;
+                    break;
+                case "r_back-color":
+                    config.backColor = value;
+                    break;
+                case "r_italic":
+                    config.italic = value === "true" || value === "1";
+                    break;
+                case "r_bold":
+                    config.bold = value === "true" || value === "1";
+                    break;
+                case "r_underline":
+                    config.underline = parseFloat(value);
+                    break;
+                case "r_overline":
+                    config.overline = parseFloat(value);
+                    break;
+                case "r_strike":
+                    config.strike = parseFloat(value);
+                    break;
+                case "r_text-line-style":
+                    config.textLineStyle = value;
+                    break;
+                case "r_text-line-color":
+                    config.textLineColor = value;
+                    break;
+                case "r_rotate":
+                    config.rotate = parseFloat(value);
+                    break;
+                // r_t-* features for added text
+                case "r_t-position":
+                    config.textPosition = value;
+                    break;
+                case "r_t-offset-x":
+                    // Store the value as-is (number or string). It will be parsed later
+                    // in renderAdditionalText when RBR bounds are available.
+                    config.textOffsetX = typeof value === "number" ? value : value;
+                    break;
+                case "r_t-offset-y":
+                    // Store the value as-is (number or string). It will be parsed later
+                    // in renderAdditionalText when RBR bounds are available.
+                    config.textOffsetY = typeof value === "number" ? value : value;
+                    break;
+                case "r_t-displaced-span":
+                    config.textDisplacedSpan = parseDisplacedSpan(value);
+                    if (!config.textDisplacedSpan) {
+                        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;
+                case "r_hint-vars":
+                    // Parse custom variables and merge with existing hintVars
+                    const customVars = parseHintVars(value);
+                    customVars.forEach((val, key) => {
+                        config.hintVars.set(key, val);
+                    });
+                    break;
+                // r_h-* features for hint property overrides
+                default:
+                    if (feature.name.startsWith("r_h-")) {
+                        this.parseHintOverride(feature.name, value, config);
+                    }
+                    break;
+            }
+        }
+        return config;
+    }
+    /**
+     * Extract character offsets from init features.
+     * This is used for base text layout adjustments.
+     *
+     * @param features - Features from the first annotate operation (init features)
+     * @returns Map of node IDs to their offsets (values may be numbers or "Ntw"/"Nth" strings)
+     */
+    extractCharOffsets(features) {
+        if (!features)
+            return new Map();
+        const charOffsetsValue = getFeatureValue(features, "r_char-offsets");
+        if (!charOffsetsValue)
+            return new Map();
+        return parseCharOffsets(charOffsetsValue);
+    }
+    /**
+     * Check if features contain a specific rendition feature.
+     */
+    hasRenditionFeature(features, featureName) {
+        if (!features)
+            return false;
+        return features.some((f) => f.name === featureName);
+    }
+    /**
+     * Get the value of a rendition feature.
+     */
+    getRenditionFeatureValue(features, featureName) {
+        return getFeatureValue(features, featureName);
+    }
+    /**
+     * Parse r_h-* hint override features.
+     * Format: "value" applies to all hints, or "@target1 target2:value" applies to specific hints.
+     * Targets can be hint ID strings or 1-based ordinal integers (e.g., "@1 beta:e" targets
+     * the first hint by position and all hints with key "beta"). Numbers and keys can be mixed.
+     *
+     * @param featureName - The feature name (e.g., "r_h-position")
+     * @param value - The feature value
+     * @param config - The rendition config to update
+     */
+    parseHintOverride(featureName, value, config) {
+        // Extract property name from feature name (r_h-position -> position)
+        const propertyName = featureName.substring(4); // Remove "r_h-"
+        // Parse value to check if it targets specific hints
+        // null = all hints; otherwise an array of string keys and/or numeric ordinals
+        let targetHints = null;
+        let actualValue = value;
+        if (value.startsWith("@")) {
+            // Format: "@target1 target2:value" where targets are hint IDs or 1-based ordinals
+            const colonIndex = value.indexOf(":");
+            if (colonIndex > 0) {
+                const hintIdsStr = value.substring(1, colonIndex); // Remove "@" and get up to ":"
+                targetHints = hintIdsStr.trim().split(/\s+/).map((token) => {
+                    const n = parseInt(token, 10);
+                    // Use numeric key for pure integer tokens (ordinal-based targeting)
+                    return !isNaN(n) && String(n) === token ? n : token;
+                });
+                actualValue = value.substring(colonIndex + 1);
+            }
+            else {
+                this._logger.warn(`Invalid r_h-* format (missing colon): ${featureName}=${value}`);
+                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 ?? ["*"]);
+        for (const hintKey of hints) {
+            // Get or create override object for this hint key / ordinal
+            let override = config.hintOverrides.get(hintKey);
+            if (!override) {
+                override = {};
+                config.hintOverrides.set(hintKey, override);
+            }
+            // Set the property value
+            switch (propertyName) {
+                case "position":
+                    override.position = actualValue;
+                    break;
+                case "offset-x":
+                    override.offsetX = actualValue;
+                    break;
+                case "offset-y":
+                    override.offsetY = actualValue;
+                    break;
+                case "scale-x":
+                    override.scaleX = actualValue;
+                    break;
+                case "scale-y":
+                    override.scaleY = actualValue;
+                    break;
+                case "rotation":
+                    override.rotation = actualValue;
+                    break;
+                case "displaced-span":
+                    override.displacedSpan = parseDisplacedSpan(actualValue);
+                    if (!override.displacedSpan) {
+                        this._logger.warn(`Invalid r_h-displaced-span value: ${actualValue}`);
+                    }
+                    break;
+                default:
+                    this._logger.warn(`Unknown hint override property: ${propertyName}`);
+                    break;
+            }
+            this._logger.debug("FeatureResolver", `Added hint override for ${hintKey}: ${propertyName}=${actualValue}`);
+        }
+    }
+}
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -26291,7 +25917,7 @@ class GveSnapshotRendition extends HTMLElement {
      * of the web component is loaded.
      */
     static get version() {
-        return "1.0.2";
+        return "2.0.2";
     }
     constructor() {
         super();
@@ -26308,9 +25934,7 @@ class GveSnapshotRendition extends HTMLElement {
         this._autoForwardEnabled = this._settings.autoForwardOnGroup;
         // Create logger
         this._logger = new Logger("GVE-Rendition", this._settings.debug);
-        // Create bounds cache and spreading engine
         this._boundsCache = new BoundsCache(this._logger);
-        this._spreadingEngine = new SpreadingEngine(this._boundsCache, this._logger);
         // Create feature resolver
         this._featureResolver = new FeatureResolver(this._logger);
         // Create shadow DOM
@@ -26422,8 +26046,8 @@ class GveSnapshotRendition extends HTMLElement {
         const gsap = window.gsap;
         if (gsap) {
             this._animationEngine = new AnimationEngine(gsap, this._logger);
-            this._textRenderer = new TextRenderer(this._settings, this._logger, this._animationEngine, this._boundsCache, this._spreadingEngine);
-            this._hintRenderer = new HintRenderer(this._settings, this._logger, this._animationEngine, this._boundsCache, this._spreadingEngine);
+            this._textRenderer = new TextRenderer(this._settings, this._logger, this._animationEngine, this._boundsCache);
+            this._hintRenderer = new HintRenderer(this._settings, this._logger, this._animationEngine, this._boundsCache);
             this._logger.info("GSAP initialized");
             this.renderContent();
         }
@@ -27176,39 +26800,7 @@ class GveSnapshotRendition extends HTMLElement {
             return;
         }
         this._logger.info(`Removing ${elements.length} elements from v${versionIndex}`);
-        // Step 1: Reverse spreading animation if spreadTime > 0
-        // This must happen BEFORE removing elements and BEFORE fadeout
-        if (this._settings.spreadTime > 0 &&
-            this._spreadingEngine &&
-            this._animationEngine) {
-            const spreadingMetadata = this._spreadingEngine.getSpreadingForVersion(versionIndex);
-            if (spreadingMetadata.size > 0) {
-                this._logger.debug("Navigation", `Reversing spreading for ${spreadingMetadata.size} elements from v${versionIndex}`);
-                // Build combined shifts (negative of original shifts to reverse)
-                const reverseShifts = new Map();
-                for (const [elementId, metadata] of spreadingMetadata.entries()) {
-                    reverseShifts.set(elementId, {
-                        x: -metadata.horizontalShift, // Negative to reverse
-                        y: -metadata.verticalShift, // Negative to reverse
-                    });
-                }
-                // Animate spreading reversal
-                await this._animationEngine.animateSpreading(reverseShifts, this._settings.spreadTime, container // Use container for animation context
-                );
-                // Update cached bounds for shifted elements
-                if (this._boundsCache) {
-                    for (const elementId of reverseShifts.keys()) {
-                        const element = container.querySelector(`#${elementId}`);
-                        if (element) {
-                            this._boundsCache.updateFromElement(element);
-                        }
-                    }
-                }
-                // Clear spreading history for this version
-                this._spreadingEngine.clearSpreadingForVersion(versionIndex);
-            }
-        }
-        // Step 2: If backwardFadeOutTime > 0, animate fadeout
+        // Step 1: If backwardFadeOutTime > 0, animate fadeout
         if (this._settings.backwardFadeOutTime > 0) {
             const fadeOutPromises = [];
             elements.forEach((el) => {
@@ -27220,7 +26812,7 @@ class GveSnapshotRendition extends HTMLElement {
             });
             await Promise.all(fadeOutPromises);
         }
-        // Step 3: Remove elements from DOM
+        // Step 2: Remove elements from DOM
         elements.forEach((el) => el.remove());
     }
     /**
@@ -41212,7 +40804,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__ 1.0.2',
+	      + '__thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ 2.0.2',
 	    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 '
@@ -91176,10 +90768,6 @@ class GveHintDesigner extends HTMLElement {
         // Rotation
         this._rotationInput = this.createInput("number", "0");
         form.appendChild(this.createFormRow("Rotation:", this._rotationInput));
-        // Solid
-        this._solidCheckbox = document.createElement("input");
-        this._solidCheckbox.type = "checkbox";
-        form.appendChild(this.createFormRow("Solid:", this._solidCheckbox));
         // Displaced Ref Span
         this._displacedRefSpanInput = this.createInput("text", "");
         form.appendChild(this.createFormRow("Displaced Ref Span:", this._displacedRefSpanInput));
@@ -91665,8 +91253,6 @@ class GveHintDesigner extends HTMLElement {
             this._scaleYInput.value = hint.scaleY?.toString() || "1";
         if (this._rotationInput)
             this._rotationInput.value = hint.rotation?.toString() || "0";
-        if (this._solidCheckbox)
-            this._solidCheckbox.checked = hint.solid || false;
         if (this._displacedRefSpanInput)
             this._displacedRefSpanInput.value = hint.displacedRefSpan || "";
         if (this._svgTextarea) {
@@ -91732,8 +91318,6 @@ class GveHintDesigner extends HTMLElement {
             this._scaleYInput.value = "1";
         if (this._rotationInput)
             this._rotationInput.value = "0";
-        if (this._solidCheckbox)
-            this._solidCheckbox.checked = false;
         if (this._displacedRefSpanInput)
             this._displacedRefSpanInput.value = "";
         if (this._svgTextarea)
@@ -91806,7 +91390,6 @@ class GveHintDesigner extends HTMLElement {
             scaleX: 1,
             scaleY: 1,
             rotation: 0,
-            solid: false,
             animation: "",
         };
         this._data.hints[hintId] = newHint;
@@ -91851,7 +91434,6 @@ class GveHintDesigner extends HTMLElement {
             scaleX: parseFloat(this._scaleXInput?.value || "1"),
             scaleY: parseFloat(this._scaleYInput?.value || "1"),
             rotation: parseFloat(this._rotationInput?.value || "0"),
-            solid: this._solidCheckbox?.checked || false,
             displacedRefSpan: this._displacedRefSpanInput?.value || undefined,
         };
         // Handle animation based on "embedded JS" option