hoi4-agent-tools 2.5.3 → 2.7.0

package/CHANGELOG.md

@@ -4,6 +4,19 @@
 
 No unreleased changes.
 
+## 2.7.0 - 2026-08-24
+
+- Made scripted-GUI layout follow Clausewitz orientation, element-origin, center-position, relative-dimension, local-scale, container-clipping, and fixed text-bound behavior.
+- Added deterministic nine-slice cornered tiles, filled/background progress bars, masked shields, and inline localisation GFX icons.
+- Resolved ordinary and inline GUI assets case-insensitively through mod, dependency, and installed-game layers so vanilla graphics remain visible in mod renders.
+- Removed synthetic state-color overlays from normal renders and retained actual sprite-frame evidence for the requested state.
+
+## 2.6.0 - 2026-08-22
+
+- Added a shared complete map catalog with resolved names, source locations, geometry, memberships, networks, positions, buildings, ports, adjacency, and localisation evidence.
+- Made map inspection return a full-map overview and a searchable, clickable HTML navigator with exact province hit testing and pixel/map coordinate lookup.
+- Added compact state and province creation defaults, rectangle province geometry, and one-call province, state, and strategic-region ID swapping with connected map-reference and standard localisation updates.
+
 ## 2.5.3 - 2026-08-22
 
 - Resolved and embedded technology icons through the complete mod, dependency, and installed-game load order, including vanilla sprites used by mod content.

package/README.md

@@ -6,7 +6,7 @@ HOI4 Agent Tools is an MCP server for coding agents to understand Hearts of Iron
 
 - Focus trees: inspect structure and references, render layouts, create trees, and reorganize existing branches.
 - Scripted GUIs: trace GUI, GFX, scripted-GUI, and localisation links; render value-driven variants, states, resolutions, hierarchy, and click regions; diagnose alignment, visibility, clipping, panel containment, and button-label centering; create or repair interface source.
-- Maps: inspect provinces, states, regions, adjacency, supply, and railways; render layers; create and repair exact map data.
+- Maps: navigate the complete rendered map by ID or localised name; inspect provinces, states, regions, adjacency, supply, railways, and positions; create states and provinces; change IDs; and repair connected map data.
 - Event chains: scan definitions and call sites, trace routes and state flow, lint references, render graphs, and compare revisions without editing event source.
 - Technology trees: reconstruct technology and doctrine paths, folder layouts, unlocks, bonuses, grants, metadata, assets, and structural changes.
 - AI and MTTH: evaluate weighted choices and timing across explicit scenarios, sweep uncertain inputs, simulate distributions, compare patches, and analyze declared stateful pools.
@@ -40,9 +40,9 @@ Paste the printed Codex or generic global-install entry into your MCP client, th
 | `hoi4.gui_inspect`          | Read a scripted GUI and its linked assets and logic.                                     |
 | `hoi4.gui_render`           | Render GUI scenario variants, states, resolutions, hierarchy, and layout diagnostics.    |
 | `hoi4.gui_rewrite`          | Create or update a GUI source package.                                                   |
-| `hoi4.map_inspect`          | Read map, state, province, region, supply, and railway data.                             |
-| `hoi4.map_render`           | Render map layers and overlays.                                                          |
-| `hoi4.map_rewrite`          | Create or update map data from an ordered list of exact changes.                         |
+| `hoi4.map_inspect`          | Search, click, navigate, and inspect the complete rendered map and its linked data.      |
+| `hoi4.map_render`           | Render full-map layers, overlays, names, IDs, coordinates, and source-linked catalogs.   |
+| `hoi4.map_rewrite`          | Create or update states, provinces, IDs, networks, positions, and connected map data.    |
 | `hoi4.event_inspect`        | Scan, trace, explain, lint, or assess event chains and their state flow.                 |
 | `hoi4.event_render`         | Render source-linked event routes, options, timing, state, scope, and unresolved edges.  |
 | `hoi4.event_compare`        | Compare event-chain topology and diagnostics between revisions.                          |
@@ -71,7 +71,7 @@ Ask your agent in normal task language. A typical workflow is inspect, render, r
 
 - Focus trees: "Create a complete national focus tree for this route specification," or "Compact this existing tree into a balanced, readable layout." Existing trees can use a plan-free compact reflow; new trees use a complete plan. See [Focus trees](docs/focus.md).
 - Scripted GUIs: "Create a scripted GUI for this mechanic," or "Render every value-driven version of this window and fix hidden controls, off-center button text, background alignment, clipping, and click-region conflicts." See [Scripted GUIs](docs/gui.md).
-- Maps: "Create a state from these exact provinces," or "Inspect this state and split these provinces while keeping supply and railway references valid." See [Maps](docs/map.md).
+- Maps: "Render the whole map and find this state by name," "Create a state from these provinces," "Create a province inside this exact rectangle," or "Swap these state IDs and update connected references." See [Maps](docs/map.md).
 - Event chains: "Trace every route from this event and explain where its flags and variables change," or "Compare the workspace event graph with its previous revision and render the affected routes." See [Event chains](docs/events.md).
 - Technology trees: "Explain everything this technology requires and unlocks," or "Compare this technology patch and render every affected folder and doctrine branch." See [Technology trees](docs/technology.md).
 - AI and MTTH: "Compare these focus weights across peace, defensive-war, and low-stability scenarios," or "Show when this MTTH event becomes likely and which unknown inputs control the result." See [AI and MTTH analysis](docs/probability.md).

package/dist/hoi4_agent_tools/gui/assets.js

@@ -12,6 +12,7 @@ function normalizeAssetPath(value) {
     return value
         .replaceAll('\\', '/')
         .replace(/^\/+|^\.\//u, '')
+        .replace(/\/+/gu, '/')
         .toLowerCase();
 }
 function parseFields(line) {
@@ -214,7 +215,12 @@ export class GuiAssetCatalog {
         return promise;
     }
     loadSpriteFrame(sprite, requestedFrame) {
-        const texturePath = sprite.texturePath;
+        return this.loadSpriteTextureFrame(sprite, sprite.texturePath, requestedFrame, 'primary');
+    }
+    loadSecondarySpriteFrame(sprite, requestedFrame) {
+        return this.loadSpriteTextureFrame(sprite, sprite.texturePath2, requestedFrame, 'secondary');
+    }
+    loadSpriteTextureFrame(sprite, texturePath, requestedFrame, layer) {
         if (texturePath === undefined)
             return Promise.resolve(undefined);
         const frameCount = Math.max(1, sprite.frameCount);
@@ -226,13 +232,19 @@ export class GuiAssetCatalog {
         const textureIdentity = textureFile === undefined
             ? `${sprite.sourcePath}:${texturePath}`
             : `${textureFile.displayPath}:${textureFile.sha256}`;
-        const key = `${textureIdentity}:${frameCount}:${frame}`;
+        const key = `${textureIdentity}:${frameCount}:${frame}:${layer}`;
         let promise = this.frames.get(key);
         if (promise === undefined) {
             promise = this.decodeSpriteFrame(sprite, texturePath, frameCount, frame, key);
             this.frames.set(key, promise);
         }
-        return promise.then((decoded) => decoded === undefined ? undefined : { ...decoded, spriteName: sprite.name });
+        return promise.then((decoded) => decoded === undefined
+            ? undefined
+            : {
+                ...decoded,
+                spriteName: layer === 'primary' ? sprite.name : `${sprite.name}#secondary`,
+                texturePath,
+            });
     }
     async decodeSpriteFrame(sprite, texturePath, frameCount, frame, operationKey) {
         const raster = await this.loadRaster(texturePath, sprite.sourcePath);

package/dist/hoi4_agent_tools/gui/layout.js

@@ -9,24 +9,6 @@ import { emptyFidelityReport } from './types.js';
 const clickableTypes = /(?:button|checkbox|editbox|scrollbar|progressbar)/iu;
 const numericDynamicPlaceholder = '[X]';
 const textDynamicPlaceholder = '[dynamic_loc]';
-const partialSpriteSemantics = {
-    textSpriteType: {
-        field: 'text_sprite_semantics',
-        detail: 'Engine text-sprite generation is not modelled; only the resolved primary texture is shown.',
-    },
-    corneredTileSpriteType: {
-        field: 'cornered_tile_semantics',
-        detail: 'Corner and edge tiling is not modelled; the primary texture is stretched as one frame.',
-    },
-    progressbarType: {
-        field: 'progressbar_sprite_semantics',
-        detail: 'Progressbar sprite composition is not modelled; only the resolved primary texture is shown.',
-    },
-    maskedShieldType: {
-        field: 'masked_shield_semantics',
-        detail: 'Mask, shield, and secondary-texture composition is not modelled; only the resolved primary texture is shown.',
-    },
-};
 function property(attributes, ...names) {
     const lowered = new Set(names.map((name) => name.toLowerCase()));
     const entry = Object.entries(attributes).find(([name]) => lowered.has(name.toLowerCase()));
@@ -58,9 +40,12 @@ const hoi4TextColours = {
     b: '#4aa3df',
     g: '#87939e',
 };
+const inlineIconMarkerStart = 0xe000;
+const inlineIconMarkerEnd = 0xf8ff;
 function visibleHoiText(value) {
     const characters = [];
     const colours = [];
+    const inlineIcons = [];
     let colour;
     let hasColourMarkup = false;
     for (let index = 0; index < value.length; index += 1) {
@@ -76,8 +61,18 @@ function visibleHoiText(value) {
             let cursor = index + 1;
             while (cursor < value.length && !/[\s\u00a3]/u.test(value[cursor] ?? ''))
                 cursor += 1;
-            characters.push('\u25c6');
-            colours.push(colour);
+            const token = value.slice(index + 1, cursor);
+            const markerCodePoint = inlineIconMarkerStart + inlineIcons.length;
+            if (token.length === 0 || markerCodePoint > inlineIconMarkerEnd) {
+                characters.push('\u25c6');
+                colours.push(colour);
+            }
+            else {
+                const marker = String.fromCodePoint(markerCodePoint);
+                inlineIcons.push({ marker, token });
+                characters.push(marker);
+                colours.push(colour);
+            }
             index = cursor - 1;
             continue;
         }
@@ -90,20 +85,26 @@ function visibleHoiText(value) {
         characters.push(character);
         colours.push(colour);
     }
-    return { text: characters.join(''), colours, hasColourMarkup };
+    return { text: characters.join(''), colours, hasColourMarkup, inlineIcons };
 }
 function scalarNumber(value, reference) {
     if (typeof value === 'number')
         return value;
     if (typeof value !== 'string')
         return undefined;
-    if (value.endsWith('%')) {
-        const percent = Number(value.slice(0, -1));
+    if (/%%?$/u.test(value)) {
+        const percent = Number(value.replace(/%%?$/u, ''));
         return Number.isFinite(percent) ? (reference * percent) / 100 : undefined;
     }
     const parsed = Number(value);
     return Number.isFinite(parsed) ? parsed : undefined;
 }
+function scaledNumber(value, reference, scale) {
+    const resolved = scalarNumber(value, reference);
+    if (resolved === undefined)
+        return undefined;
+    return typeof value === 'string' && /%%?$/u.test(value) ? resolved : resolved * scale;
+}
 function scalarBoolean(value) {
     if (typeof value === 'boolean')
         return value;
@@ -240,7 +241,100 @@ function resolveTokenText(value, scenario, localisation, rowValues) {
     }, 'GUI scope substitution');
     return { text, unresolved: [...new Set(unresolved)].sort(), missingLocalisation };
 }
-function wrapText(catalog, fontName, text, colours, fontSize, maximumWidth, work) {
+function measureTextWithInlineIcons(catalog, fontName, text, fontSize, inlineIcons) {
+    if (inlineIcons.size === 0 || ![...inlineIcons.keys()].some((marker) => text.includes(marker)))
+        return catalog.measureText(fontName, text, fontSize);
+    let width = 0;
+    let lineHeight = fontSize * 1.2;
+    let source = 'approximation';
+    const missingGlyphs = new Set();
+    let segment = '';
+    const commit = () => {
+        if (segment.length === 0)
+            return;
+        const measured = catalog.measureText(fontName, segment, fontSize);
+        width += measured.width;
+        lineHeight = Math.max(lineHeight, measured.lineHeight);
+        source = measured.source;
+        for (const codePoint of measured.missingGlyphs)
+            missingGlyphs.add(codePoint);
+        segment = '';
+    };
+    for (const character of text) {
+        const icon = inlineIcons.get(character);
+        if (icon === undefined)
+            segment += character;
+        else {
+            commit();
+            width += icon.width;
+            lineHeight = Math.max(lineHeight, icon.height);
+        }
+    }
+    commit();
+    return { width, lineHeight, source, missingGlyphs: [...missingGlyphs] };
+}
+async function shapeTextWithInlineIcons(catalog, fontName, text, fontSize, lineIndex, inlineIcons) {
+    if (inlineIcons.size === 0 || ![...inlineIcons.keys()].some((marker) => text.includes(marker)))
+        return { glyphLine: await catalog.shapeText(fontName, text, fontSize), icons: [] };
+    const base = await catalog.shapeText(fontName, Array.from(text)
+        .filter((character) => !inlineIcons.has(character))
+        .join(''), fontSize);
+    const glyphs = [];
+    const missingGlyphs = new Set();
+    const sourceHashes = new Set([base.sourceHash]);
+    const sources = new Set([base.source]);
+    let baseline = base.baseline;
+    let baselineModelled = base.baselineModelled;
+    let penX = 0;
+    let segment = '';
+    const icons = [];
+    const commit = async () => {
+        if (segment.length === 0)
+            return;
+        const shaped = await catalog.shapeText(fontName, segment, fontSize);
+        sourceHashes.add(shaped.sourceHash);
+        sources.add(shaped.source);
+        baseline = Math.max(baseline, shaped.baseline);
+        baselineModelled &&= shaped.baselineModelled;
+        for (const codePoint of shaped.missingGlyphs)
+            missingGlyphs.add(codePoint);
+        glyphs.push(...shaped.glyphs.map((glyph) => ({ ...glyph, x: glyph.x + penX })));
+        penX += shaped.width;
+        segment = '';
+    };
+    for (const character of text) {
+        const icon = inlineIcons.get(character);
+        if (icon === undefined)
+            segment += character;
+        else {
+            await commit();
+            icons.push({
+                token: icon.token,
+                spriteName: icon.spriteName,
+                lineIndex,
+                offsetX: penX,
+                width: icon.width,
+                height: icon.height,
+                ...(icon.sprite === undefined ? {} : { sprite: icon.sprite }),
+            });
+            penX += icon.width;
+        }
+    }
+    await commit();
+    return {
+        glyphLine: {
+            source: sources.size === 1 ? [...sources][0] : 'deterministic-fallback',
+            sourceHash: sourceHashes.size === 1 ? [...sourceHashes][0] : hashCanonical([...sourceHashes].sort()),
+            width: penX,
+            baseline,
+            baselineModelled,
+            glyphs,
+            missingGlyphs: [...missingGlyphs].sort((left, right) => left - right),
+        },
+        icons,
+    };
+}
+function wrapText(catalog, fontName, text, colours, fontSize, maximumWidth, work, inlineIcons = new Map()) {
     const lines = [];
     const widths = [];
     const colourLines = [];
@@ -267,7 +361,7 @@ function wrapText(catalog, fontName, text, colours, fontSize, maximumWidth, work
         }
         const committedText = characters.join('');
         work.spendTextLayout('committed text line measurement');
-        const committed = catalog.measureText(fontName, committedText, fontSize);
+        const committed = measureTextWithInlineIcons(catalog, fontName, committedText, fontSize, inlineIcons);
         lines.push(committedText);
         widths.push(committed.width);
         colourLines.push(lineColours);
@@ -300,12 +394,12 @@ function wrapText(catalog, fontName, text, colours, fontSize, maximumWidth, work
         let previousWordWidth = 0;
         for (const word of words) {
             work.spendTextLayout('text word measurement');
-            const measuredWord = catalog.measureText(fontName, word.text, fontSize);
+            const measuredWord = measureTextWithInlineIcons(catalog, fontName, word.text, fontSize, inlineIcons);
             retainMissingGlyphs(measuredWord.missingGlyphs);
             let candidateWidth = measuredWord.width;
             if (previousWord !== undefined) {
                 work.spendTextLayout('text word-boundary measurement');
-                const boundary = catalog.measureText(fontName, `${previousWord} ${word.text}`, fontSize);
+                const boundary = measureTextWithInlineIcons(catalog, fontName, `${previousWord} ${word.text}`, fontSize, inlineIcons);
                 retainMissingGlyphs(boundary.missingGlyphs);
                 candidateWidth = currentWidth + boundary.width - previousWordWidth;
             }
@@ -332,20 +426,28 @@ function wrapText(catalog, fontName, text, colours, fontSize, maximumWidth, work
         missingGlyphs: [...missingGlyphs].sort((a, b) => a - b),
     };
 }
-function colourRunsForLine(catalog, fontName, line, colours, fontSize, work) {
+function colourRunsForLine(catalog, fontName, line, colours, fontSize, work, inlineIcons = new Map()) {
     if (!colours.some((colour) => colour !== undefined) || line.length === 0)
         return [];
     const runs = [];
     let start = 0;
     let offsetX = 0;
     while (start < line.length) {
+        const inlineIcon = inlineIcons.get(line[start] ?? '');
+        if (inlineIcon !== undefined) {
+            offsetX += inlineIcon.width;
+            start += 1;
+            continue;
+        }
         const colour = colours[start] ?? defaultTextColour;
         let end = start + 1;
-        while (end < line.length && (colours[end] ?? defaultTextColour) === colour)
+        while (end < line.length &&
+            !inlineIcons.has(line[end] ?? '') &&
+            (colours[end] ?? defaultTextColour) === colour)
             end += 1;
         const text = line.slice(start, end);
         work.spendTextLayout('localisation colour-run measurement');
-        const width = catalog.measureText(fontName, text, fontSize).width;
+        const width = measureTextWithInlineIcons(catalog, fontName, text, fontSize, inlineIcons).width;
         runs.push({ text, colour, offsetX, width });
         offsetX += width;
         start = end;
@@ -384,6 +486,10 @@ function frameFor(element, sprite, scenario) {
                 : 0;
     return Math.min(frameCount - 1, mapped);
 }
+function textIconSpriteCandidates(token) {
+    const normalized = token.startsWith('GFX_') ? token : `GFX_${token}`;
+    return [normalized, `${normalized}_texticon`, `${normalized}_text_icon`];
+}
 function alignment(attributes, buttonText) {
     const explicitFormat = scalarString(property(attributes, 'format'))?.toLowerCase();
     const format = explicitFormat ?? '';
@@ -403,6 +509,33 @@ function alignment(attributes, buttonText) {
                 : 'top';
     return { horizontalAlignment, verticalAlignment };
 }
+function anchorAxes(value) {
+    const normalized = value.toLowerCase().replaceAll('-', '_');
+    if (normalized === 'center_left')
+        return { horizontal: 'left', vertical: 'center' };
+    if (normalized === 'center_right')
+        return { horizontal: 'right', vertical: 'center' };
+    if (normalized === 'center_up' || normalized === 'center_upper')
+        return { horizontal: 'center', vertical: 'top' };
+    if (normalized === 'center_down' || normalized === 'center_lower')
+        return { horizontal: 'center', vertical: 'bottom' };
+    if (normalized === 'upper_right')
+        return { horizontal: 'right', vertical: 'top' };
+    if (normalized === 'lower_left')
+        return { horizontal: 'left', vertical: 'bottom' };
+    if (normalized === 'lower_right')
+        return { horizontal: 'right', vertical: 'bottom' };
+    if (normalized === 'center')
+        return { horizontal: 'center', vertical: 'center' };
+    return { horizontal: 'left', vertical: 'top' };
+}
+function anchoredCoordinate(start, span, offset, anchor) {
+    return anchor === 'right' || anchor === 'bottom'
+        ? start + span + offset
+        : anchor === 'center'
+            ? start + span / 2 + offset
+            : start + offset;
+}
 class GuiSceneWorkBudget {
     work = 0;
     elements = 0;
@@ -450,7 +583,7 @@ class GuiSceneWorkBudget {
         this.textLayoutOperations += amount;
     }
 }
-async function layoutElement(definition, parentRect, inheritedClip, parentScale, depth, context, instanceSuffix = '', rowIndex, rowValues, parentInstanceId) {
+async function layoutElement(definition, parentRect, inheritedClip, parentScale, depth, context, instanceSuffix = '', rowIndex, rowValues, parentInstanceId, inheritedOrientation = 'upper_left') {
     context.work.admitElement(depth);
     const { scenario, catalog, fidelity, diagnostics } = context;
     const instanceId = instanceSuffix.length === 0 ? definition.id : `${definition.id}${instanceSuffix}`;
@@ -458,12 +591,10 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
     const scale = parentScale * localScale;
     const position = objectProperty(property(definition.attributes, 'position'));
     const size = objectProperty(property(definition.attributes, 'size'));
-    const localX = scalarNumber(position === undefined ? undefined : property(position, 'x'), parentRect.width) ??
-        0;
-    const localY = scalarNumber(position === undefined ? undefined : property(position, 'y'), parentRect.height) ??
-        0;
-    let width = (scalarNumber(size === undefined ? undefined : property(size, 'width', 'x'), parentRect.width) ?? 0) * scale;
-    let height = (scalarNumber(size === undefined ? undefined : property(size, 'height', 'y'), parentRect.height) ?? 0) * scale;
+    const localX = scaledNumber(position === undefined ? undefined : property(position, 'x'), parentRect.width, parentScale) ?? 0;
+    const localY = scaledNumber(position === undefined ? undefined : property(position, 'y'), parentRect.height, parentScale) ?? 0;
+    let width = scaledNumber(size === undefined ? undefined : property(size, 'width', 'x'), parentRect.width, scale) ?? 0;
+    let height = scaledNumber(size === undefined ? undefined : property(size, 'height', 'y'), parentRect.height, scale) ?? 0;
     const background = objectProperty(property(definition.attributes, 'background'));
     const spriteName = scalarString(property(definition.attributes, 'spriteType', 'quadTextureSprite')) ??
         scalarString(background === undefined
@@ -471,6 +602,8 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             : property(background, 'spriteType', 'quadTextureSprite'));
     const spriteDefinition = spriteName === undefined ? undefined : context.spritesByName.get(spriteName.toLowerCase());
     let sprite;
+    let secondarySprite;
+    let spriteRenderMode;
     if (spriteName !== undefined && spriteDefinition === undefined) {
         const partialInventory = context.graph.edges.some((edge) => edge.kind === 'uses_sprite' &&
             edge.from === definition.id &&
@@ -483,16 +616,15 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
     }
     else if (spriteDefinition !== undefined) {
         const partialAppearance = [];
-        const specialSemantics = partialSpriteSemantics[spriteDefinition.spriteType];
-        if (specialSemantics !== undefined) {
-            addFidelity(fidelity, 'unsupported', specialSemantics.field, specialSemantics.detail, definition);
-            partialAppearance.push(specialSemantics.detail);
-        }
-        if (spriteDefinition.texturePath2 !== undefined) {
-            const detail = `Secondary texture ${spriteDefinition.texturePath2} is retained in the source graph but is not composited.`;
-            addFidelity(fidelity, 'unsupported', 'textureFile2', detail, definition);
-            partialAppearance.push(detail);
-        }
+        const spriteType = spriteDefinition.spriteType.toLowerCase();
+        spriteRenderMode =
+            spriteType === 'corneredtilespritetype'
+                ? 'cornered-tile'
+                : spriteType === 'progressbartype'
+                    ? 'progressbar'
+                    : spriteType === 'maskedshieldtype'
+                        ? 'masked-shield'
+                        : 'stretch';
         if (spriteDefinition.effectFile !== undefined) {
             const detail = `Effect ${spriteDefinition.effectFile} is retained in the source graph but is not executed by the offline renderer.`;
             addFidelity(fidelity, 'unsupported', 'effectFile', detail, definition);
@@ -502,6 +634,8 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             diagnostics.push(diagnostic('GUI_SPRITE_RENDER_PARTIAL', 'warning', `Element ${definition.name} has a partial sprite appearance: ${partialAppearance.join(' ')}`, definition));
         const frame = frameFor(definition, spriteDefinition, scenario);
         sprite = await catalog.loadSpriteFrame(spriteDefinition, frame);
+        if (spriteDefinition.texturePath2 !== undefined)
+            secondarySprite = await catalog.loadSecondarySpriteFrame(spriteDefinition, frame);
         if (!sprite?.supported) {
             addFidelity(fidelity, 'unsupported', 'texture', sprite?.reason ?? `Sprite ${spriteDefinition.name} has no texture.`, definition);
             diagnostics.push(diagnostic('GUI_TEXTURE_UNSUPPORTED', 'warning', sprite?.reason ?? `Sprite ${spriteDefinition.name} has no texture.`, definition));
@@ -514,6 +648,20 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             addFidelity(fidelity, partialAppearance.length === 0 ? 'modelled' : 'approximated', 'sprite_frame', partialAppearance.length === 0
                 ? `${spriteDefinition.name} frame ${sprite.frame + 1}/${sprite.frameCount}`
                 : `${spriteDefinition.name} frame ${sprite.frame + 1}/${sprite.frameCount} shows only the primary resolved texture; additional sprite semantics are omitted.`, definition);
+            if (spriteRenderMode === 'cornered-tile')
+                addFidelity(fidelity, spriteDefinition.borderSize === undefined ? 'approximated' : 'modelled', 'cornered_tile_composition', spriteDefinition.borderSize === undefined
+                    ? `${spriteDefinition.name} has no borderSize, so the full texture fills the element.`
+                    : `${spriteDefinition.name} uses fixed corners and edges with a ${spriteDefinition.borderSize.width}x${spriteDefinition.borderSize.height} source border${spriteDefinition.tilingCenter === true ? ' and a tiled center' : ''}.`, definition);
+            if (spriteRenderMode === 'progressbar' || spriteRenderMode === 'masked-shield') {
+                const detail = secondarySprite?.supported === true
+                    ? `Primary and secondary textures for ${spriteDefinition.name} are composited.`
+                    : `Secondary texture for ${spriteDefinition.name} could not be rendered.`;
+                addFidelity(fidelity, secondarySprite?.supported === true ? 'modelled' : 'missing', spriteRenderMode === 'progressbar'
+                    ? 'progressbar_composition'
+                    : 'masked_shield_composition', detail, definition);
+                if (secondarySprite !== undefined && !secondarySprite.supported)
+                    diagnostics.push(diagnostic('GUI_SECONDARY_TEXTURE_UNSUPPORTED', 'warning', secondarySprite.reason ?? detail, definition));
+            }
             if (spriteDefinition.frameAnimated) {
                 addFidelity(fidelity, spriteDefinition.looping === undefined ? 'approximated' : 'modelled', 'animation_looping', spriteDefinition.looping === false
                     ? 'Animation stops on its final frame.'
@@ -549,14 +697,50 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             resolvedFontMetrics.nativeSize ??
             context.catalog.fontDefinition(fontName ?? '')?.size ??
             16;
-        const maxWidth = (scalarNumber(property(definition.attributes, 'maxWidth'), width / scale) ?? width / scale) *
-            scale;
-        const wrapped = wrapText(catalog, fontName, displayText, visibleText.colours, fontSize * scale, maxWidth, context.work);
+        const resolvedInlineIcons = new Map();
+        for (const inlineIcon of visibleText.inlineIcons) {
+            const candidates = textIconSpriteCandidates(inlineIcon.token);
+            const iconDefinition = candidates
+                .map((candidate) => context.spritesByName.get(candidate.toLowerCase()))
+                .find((candidate) => candidate !== undefined);
+            const iconHeight = fontSize * scale;
+            const iconSprite = iconDefinition === undefined ? undefined : await catalog.loadSpriteFrame(iconDefinition, 0);
+            const iconWidth = iconSprite?.supported === true && iconSprite.height > 0
+                ? iconHeight * (iconSprite.width / iconSprite.height)
+                : iconHeight;
+            const spriteName = iconDefinition?.name ?? candidates[0];
+            resolvedInlineIcons.set(inlineIcon.marker, {
+                marker: inlineIcon.marker,
+                token: inlineIcon.token,
+                spriteName,
+                width: iconWidth,
+                height: iconHeight,
+                ...(iconSprite === undefined ? {} : { sprite: iconSprite }),
+            });
+            if (iconSprite?.supported === true)
+                addFidelity(fidelity, 'modelled', 'inline_text_icon', `Localisation icon £${inlineIcon.token} uses ${spriteName}.`, definition);
+            else {
+                addFidelity(fidelity, 'missing', 'inline_text_icon', iconSprite?.reason ?? `No sprite resolves localisation icon £${inlineIcon.token}.`, definition);
+                diagnostics.push(diagnostic('GUI_TEXT_ICON_MISSING', 'warning', iconSprite?.reason ?? `No sprite resolves localisation icon £${inlineIcon.token}.`, definition));
+            }
+        }
+        const declaredMaxWidth = scaledNumber(property(definition.attributes, 'maxWidth'), parentRect.width, scale);
+        const declaredMaxHeight = scaledNumber(property(definition.attributes, 'maxHeight'), parentRect.height, scale);
+        if (width === 0 && declaredMaxWidth !== undefined)
+            width = declaredMaxWidth;
+        if (height === 0 && declaredMaxHeight !== undefined)
+            height = declaredMaxHeight;
+        const maxWidth = declaredMaxWidth ?? width;
+        const wrapped = wrapText(catalog, fontName, displayText, visibleText.colours, fontSize * scale, maxWidth, context.work, resolvedInlineIcons);
         const glyphLines = [];
-        for (const line of wrapped.lines)
-            glyphLines.push(await catalog.shapeText(fontName, line, fontSize * scale));
+        const inlineIcons = [];
+        for (const [lineIndex, line] of wrapped.lines.entries()) {
+            const shaped = await shapeTextWithInlineIcons(catalog, fontName, line, fontSize * scale, lineIndex, resolvedInlineIcons);
+            glyphLines.push(shaped.glyphLine);
+            inlineIcons.push(...shaped.icons);
+        }
         const colourRuns = visibleText.hasColourMarkup
-            ? wrapped.lines.map((line, index) => colourRunsForLine(catalog, fontName, line, wrapped.colourLines[index] ?? [], fontSize * scale, context.work))
+            ? wrapped.lines.map((line, index) => colourRunsForLine(catalog, fontName, line, wrapped.colourLines[index] ?? [], fontSize * scale, context.work, resolvedInlineIcons))
             : undefined;
         const maximumLineWidth = wrapped.widths.reduce((maximum, value) => Math.max(maximum, value), 0);
         if (width === 0)
@@ -579,8 +763,10 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             glyphLines,
             overflowX: width > 0 && measuredWidth > width + 0.01,
             overflowY: height > 0 && measuredHeight > height + 0.01,
+            fixedSize: scalarBoolean(property(definition.attributes, 'fixedsize')) ?? false,
             unresolvedTokens: resolved.unresolved,
             ...(colourRuns === undefined ? {} : { colourRuns }),
+            ...(inlineIcons.length === 0 ? {} : { inlineIcons }),
         };
         if (wrapped.metricSource === 'approximation')
             addFidelity(fidelity, 'approximated', 'font_metrics', `No supplied font metrics for ${fontName ?? '<default>'}.`, definition);
@@ -604,31 +790,29 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
         if (resolved.unresolved.length > 0)
             addFidelity(fidelity, 'unresolved', 'dynamic_text', `Unresolved tokens: ${resolved.unresolved.join(', ')}.`, definition);
     }
-    const orientation = scalarString(property(definition.attributes, 'orientation'))?.toLowerCase() ?? 'upper_left';
+    const orientation = scalarString(property(definition.attributes, 'orientation'))?.toLowerCase() ??
+        inheritedOrientation;
     const origo = scalarString(property(definition.attributes, 'origo'))?.toLowerCase() ?? 'upper_left';
-    let x = parentRect.x + localX * scale;
-    let y = parentRect.y + localY * scale;
-    if (orientation.includes('right'))
-        x = parentRect.x + parentRect.width - localX * scale - width;
-    else if (orientation.includes('center'))
-        x = parentRect.x + parentRect.width / 2 + localX * scale;
-    if (orientation.includes('lower') || orientation.includes('bottom'))
-        y = parentRect.y + parentRect.height - localY * scale - height;
-    else if (orientation.includes('center'))
-        y = parentRect.y + parentRect.height / 2 + localY * scale;
-    if (origo.includes('center')) {
+    const orientationAxes = anchorAxes(orientation);
+    let x = anchoredCoordinate(parentRect.x, parentRect.width, localX, orientationAxes.horizontal);
+    let y = anchoredCoordinate(parentRect.y, parentRect.height, localY, orientationAxes.vertical);
+    const centerPosition = scalarBoolean(property(definition.attributes, 'centerposition')) ?? false;
+    const origoAxes = centerPosition
+        ? { horizontal: 'center', vertical: 'center' }
+        : anchorAxes(origo);
+    if (origoAxes.horizontal === 'center') {
         x -= width / 2;
-        y -= height / 2;
-    }
-    else {
-        if (origo.includes('right'))
-            x -= width;
-        if (origo.includes('lower') || origo.includes('bottom'))
-            y -= height;
     }
+    else if (origoAxes.horizontal === 'right')
+        x -= width;
+    if (origoAxes.vertical === 'center')
+        y -= height / 2;
+    else if (origoAxes.vertical === 'bottom')
+        y -= height;
     const scrollOffset = (scenario.scrollOffsets[definition.name] ?? scenario.scrollOffsets[definition.id] ?? 0) * scale;
     const unclippedRect = { x, y, width: Math.max(0, width), height: Math.max(0, height) };
-    const ownClipping = scalarBoolean(property(definition.attributes, 'clipping')) ?? false;
+    const ownClipping = scalarBoolean(property(definition.attributes, 'clipping')) ??
+        (background !== undefined && /(?:containerwindow|windowtype)/iu.test(definition.elementType));
     const availableClip = inheritedClip === undefined ? unclippedRect : rectIntersection(inheritedClip, unclippedRect);
     const clipRect = inheritedClip;
     const clipped = clipRect !== undefined &&
@@ -681,6 +865,17 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
         state,
         ...(progressRatio === undefined ? {} : { progressRatio }),
         ...(sprite === undefined ? {} : { sprite }),
+        ...(secondarySprite === undefined ? {} : { secondarySprite }),
+        ...(spriteRenderMode === undefined ? {} : { spriteRenderMode }),
+        ...(spriteDefinition?.borderSize === undefined
+            ? {}
+            : { spriteBorderSize: spriteDefinition.borderSize }),
+        ...(spriteDefinition?.tilingCenter === undefined
+            ? {}
+            : { spriteTilingCenter: spriteDefinition.tilingCenter }),
+        ...(spriteDefinition === undefined
+            ? {}
+            : { progressHorizontal: spriteDefinition.horizontal ?? true }),
         ...(text === undefined ? {} : { text }),
         sourcePath: definition.sourcePath,
         ...(definition.location === undefined ? {} : { location: definition.location }),
@@ -735,7 +930,7 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
                     ...childParentRect,
                     y: childParentRect.y + rowY - originalY * scale,
                 };
-                await layoutElement(child, shiftedParent, childClip, scale, depth + 1, context, `${instanceSuffix}#row-${index}`, index, row, instanceId);
+                await layoutElement(child, shiftedParent, childClip, scale, depth + 1, context, `${instanceSuffix}#row-${index}`, index, row, instanceId, origo);
                 const rendered = context.instancesById.get(`${child.id}${instanceSuffix}#row-${index}`);
                 rowHeight = Math.max(rowHeight, rendered?.unclippedRect.height ?? 0);
             }
@@ -746,7 +941,7 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
     else {
         for (const child of childDefinitions) {
             context.work.spend('nested child expansion');
-            await layoutElement(child, childParentRect, childClip, scale, depth + 1, context, instanceSuffix, rowIndex, rowValues, instanceId);
+            await layoutElement(child, childParentRect, childClip, scale, depth + 1, context, instanceSuffix, rowIndex, rowValues, instanceId, origo);
         }
     }
 }