hoi4-agent-tools 3.2.0 → 3.4.0

package/dist/hoi4_agent_tools/gui/layout.js

@@ -6,6 +6,9 @@ import { GuiAssetCatalog } from './assets.js';
 import { GUI_GRAPH_MAX_EDGES, GUI_GRAPH_MAX_ELEMENTS, GUI_GRAPH_MAX_NODES, GUI_SCENE_MAX_DEPTH, GUI_SCENE_MAX_ELEMENTS, GUI_SCENE_MAX_TEXT_CHARACTERS, GUI_SCENE_MAX_TEXT_LAYOUT_OPERATIONS, GUI_SCENE_MAX_WORK, GUI_TEXT_MAX_CHARACTERS, GUI_TEXT_MAX_MISSING_GLYPH_SAMPLES, } from './limits.js';
 import { guiElementAttributeFidelity } from './source-graph.js';
 import { emptyFidelityReport } from './types.js';
+import { ClausewitzEvaluationDefinitions } from '../core/clausewitz-evaluation.js';
+import { evaluateGuiCondition, guiConditionScenario } from './scenario-conditions.js';
+import { parseClausewitz } from '../core/source/index.js';
 const clickableTypes = /(?:button|checkbox|editbox|scrollbar|progressbar)/iu;
 const numericDynamicPlaceholder = '[X]';
 const textDynamicPlaceholder = '[dynamic_loc]';
@@ -25,6 +28,8 @@ function scalarString(value) {
     return undefined;
 }
 const defaultTextColour = '#f5f2e8';
+// Native text-box default, independently visible in installed inlays without maxWidth.
+const nativeTextBoxWidth = 200;
 const hoi4TextColours = {
     C: '#23ceff',
     L: '#c3b091',
@@ -117,9 +122,9 @@ function scaledNumber(value, reference, scale) {
 function scalarBoolean(value) {
     if (typeof value === 'boolean')
         return value;
-    if (value === 'yes' || value === 'true')
+    if (value === 'yes' || value === 'true' || value === 1)
         return true;
-    if (value === 'no' || value === 'false')
+    if (value === 'no' || value === 'false' || value === 0)
         return false;
     return undefined;
 }
@@ -483,7 +488,7 @@ function colourRunsForLine(catalog, fontName, line, colours, fontSize, work, inl
     }
     return runs;
 }
-function frameFor(element, sprite, scenario, rowValues) {
+function frameFor(element, sprite, scenario, rowValues, effectiveState) {
     const frameCount = Math.max(1, sprite.frameCount);
     const selected = scenario.selectedFrames[element.name] ?? scenario.selectedFrames[sprite.name];
     if (selected !== undefined)
@@ -493,6 +498,11 @@ function frameFor(element, sprite, scenario, rowValues) {
         scenario.scriptedGui[`${element.name}.frame`];
     if (typeof scriptedFrame === 'number' && Number.isFinite(scriptedFrame))
         return Math.min(frameCount - 1, Math.max(0, Math.trunc(scriptedFrame > 0 ? scriptedFrame - 1 : scriptedFrame)));
+    const state = effectiveState ?? scenario.elementStates[element.name] ?? scenario.state;
+    const checked = rowValues?.[`${element.name}.checked`] ?? scenario.values[`${element.name}.checked`];
+    if (/checkbox/iu.test(element.elementType) &&
+        (typeof checked === 'boolean' || state === 'selected' || state === 'active'))
+        return Math.min(frameCount - 1, checked === false ? 0 : 1);
     const explicit = scalarNumber(property(element.attributes, 'frame'), frameCount);
     if (explicit !== undefined)
         return Math.min(frameCount - 1, Math.max(0, Math.trunc(explicit > 0 ? explicit - 1 : explicit)));
@@ -510,7 +520,10 @@ function frameFor(element, sprite, scenario, rowValues) {
             ? frameCount - 1
             : Math.min(frameCount - 1, Math.floor(phase * framesPerSecond));
     }
-    const state = scenario.elementStates[element.name] ?? scenario.state;
+    // Effects select a shader entry point, not an unrelated atlas frame.
+    // Explicit frames and frame animation above remain independent of button state.
+    if (sprite.effectFile !== undefined || /checkbox/iu.test(element.elementType))
+        return 0;
     const mapped = state === 'hover'
         ? 1
         : state === 'selected' || state === 'active'
@@ -525,7 +538,9 @@ function textIconSpriteCandidates(token) {
     return [normalized, `${normalized}_texticon`, `${normalized}_text_icon`];
 }
 function alignment(attributes, buttonText) {
-    const explicitFormat = scalarString(property(attributes, 'format'))?.toLowerCase();
+    const explicitFormat = scalarString(property(attributes, 'format'))
+        ?.toLowerCase()
+        .replaceAll('centre', 'center');
     const format = explicitFormat ?? '';
     const horizontalAlignment = format.includes('center')
         ? 'center'
@@ -534,13 +549,18 @@ function alignment(attributes, buttonText) {
             : buttonText && explicitFormat === undefined
                 ? 'center'
                 : 'left';
-    const verticalAlignment = format.includes('bottom')
-        ? 'bottom'
-        : format.includes('center')
-            ? 'center'
-            : buttonText && explicitFormat === undefined
+    const vertical = scalarString(property(attributes, 'vertical_alignment'))
+        ?.toLowerCase()
+        .replaceAll('centre', 'center');
+    const verticalAlignment = vertical === 'top'
+        ? 'top'
+        : vertical === 'bottom' || format.includes('bottom')
+            ? 'bottom'
+            : vertical === 'center'
                 ? 'center'
-                : 'top';
+                : buttonText && explicitFormat === undefined
+                    ? 'center'
+                    : 'top';
     return { horizontalAlignment, verticalAlignment };
 }
 function anchorAxes(value) {
@@ -570,10 +590,109 @@ function anchoredCoordinate(start, span, offset, anchor) {
             ? start + span / 2 + offset
             : start + offset;
 }
+function legacyRowSuffix(instanceSuffix) {
+    return instanceSuffix.replace(/#list-[^#]+/gu, '');
+}
+function explicitElementVisibility(definition, scenario, rowValues) {
+    const scripted = rowValues?.[`${definition.name}.visible`] ??
+        scenario.values[`${definition.name}.visible`] ??
+        scenario.scriptedGui[`${definition.name}.visible`];
+    return (scenario.visibility[definition.name] ??
+        scenario.visibility[definition.id] ??
+        (definition.sourceOwnerId === undefined
+            ? undefined
+            : scenario.visibility[definition.sourceOwnerId]) ??
+        (typeof scripted === 'boolean' ? scripted : undefined));
+}
+function clippedByChain(chain) {
+    let result;
+    for (const clip of chain)
+        result =
+            result === undefined
+                ? clip
+                : (rectIntersection(result, clip) ?? { ...clip, width: 0, height: 0 });
+    return result;
+}
+function refreshSceneClips(context) {
+    for (const element of context.output) {
+        const geometry = context.geometry.get(element.id);
+        context.work.spend('resolved scroll clipping', geometry.clipChain.length + 1);
+        const clip = clippedByChain(geometry.clipChain);
+        const intersection = clip === undefined ? element.unclippedRect : rectIntersection(element.unclippedRect, clip);
+        if (clip === undefined)
+            delete element.clipRect;
+        else
+            element.clipRect = { ...clip };
+        element.rect =
+            intersection === undefined
+                ? { ...element.unclippedRect, width: 0, height: 0 }
+                : { ...intersection };
+        element.clipped =
+            clip !== undefined &&
+                (intersection === undefined || !equalRect(element.unclippedRect, intersection));
+        element.visible = geometry.appearanceVisible && intersection !== undefined;
+        element.visibilityReason = element.visible
+            ? 'visible'
+            : geometry.appearanceVisible
+                ? 'outside_clip'
+                : (element.visibilityReason ?? 'visibility_false');
+        if (clickableTypes.test(element.elementType)) {
+            const reason = element.visible ? geometry.interactionBlock : 'hidden';
+            if (reason === undefined)
+                delete element.disabledReason;
+            else
+                element.disabledReason = reason;
+            element.clickable = reason === undefined;
+        }
+    }
+}
+function attachedScrollbars(definition, context) {
+    if (!/^(?:containerwindowtype|windowtype)$/iu.test(definition.elementType))
+        return [];
+    const result = [];
+    const add = (candidate, horizontal, reference) => {
+        if (candidate?.elementType.toLowerCase() !== 'extendedscrollbartype') {
+            context.diagnostics.push(diagnostic('GUI_SCROLLBAR_TEMPLATE_MISSING', 'warning', `Container ${definition.name} cannot resolve extended scrollbar ${reference}.`, definition));
+            addFidelity(context.fidelity, 'missing', 'attached_scrollbar', `Extended scrollbar ${reference} is missing.`, definition);
+            return;
+        }
+        if ((scalarBoolean(property(candidate.attributes, 'horizontal')) ?? false) !== horizontal) {
+            context.diagnostics.push(diagnostic('GUI_SCROLLBAR_AXIS_MISMATCH', 'warning', `Scrollbar ${reference} has the wrong axis for container ${definition.name}.`, definition));
+            addFidelity(context.fidelity, 'unsupported', 'attached_scrollbar', `Scrollbar ${reference} has the wrong axis.`, definition);
+            return;
+        }
+        if (result.some((entry) => entry.horizontal === horizontal)) {
+            context.diagnostics.push(diagnostic('GUI_SCROLLBAR_AXIS_DUPLICATE', 'warning', `Container ${definition.name} assigns more than one ${horizontal ? 'horizontal' : 'vertical'} scrollbar.`, definition));
+            addFidelity(context.fidelity, 'unsupported', 'attached_scrollbar', 'Multiple scrollbars target the same container axis.', definition);
+            return;
+        }
+        result.push({ definition: candidate, horizontal });
+    };
+    for (const horizontal of [false, true]) {
+        const name = scalarString(property(definition.attributes, horizontal ? 'horizontalScrollbar' : 'verticalScrollbar'));
+        if (name !== undefined) {
+            const candidate = context.elementsByName.get(name);
+            add(candidate?.parentId === undefined ? candidate : undefined, horizontal, name);
+        }
+    }
+    for (const id of definition.childIds) {
+        const child = context.elementsById.get(id);
+        if (child?.elementType.toLowerCase() === 'extendedscrollbartype')
+            add(child, scalarBoolean(property(child.attributes, 'horizontal')) ?? false, child.name);
+    }
+    return result;
+}
 function dynamicCountryFlag(elementName, expression, scenario, rowValues) {
-    if (typeof expression !== 'string')
+    const explicitTag = rowValues?.[`${elementName}.countryTag`] ??
+        scenario.values[`${elementName}.countryTag`] ??
+        scenario.scriptedGui[`${elementName}.countryTag`];
+    // Native engine-owned flag slots have no scripted GetFlag property. Require an
+    // explicit per-element binding; a generic country context must not replace every icon.
+    if (typeof expression !== 'string' && explicitTag === undefined)
         return undefined;
-    const match = /^\[\?([^\]|]+)(?:\|[^\]]+)?\]$|^\[([^\]]+)\]$/u.exec(expression);
+    const match = typeof expression === 'string'
+        ? /^\[\?([^\]|]+)(?:\|[^\]]+)?\]$|^\[([^\]]+)\]$/u.exec(expression)
+        : null;
     const token = match?.[1] ?? match?.[2];
     const shortToken = token?.slice(token.lastIndexOf('.') + 1);
     const tagCandidates = [
@@ -590,7 +709,9 @@ function dynamicCountryFlag(elementName, expression, scenario, rowValues) {
         scenario.country?.GetTag,
         scenario.country?.tag,
     ];
-    const rawTag = tagCandidates.find((candidate) => typeof candidate === 'string' && /^[A-Za-z0-9_]{2,64}$/u.test(candidate));
+    const rawTag = explicitTag === undefined
+        ? tagCandidates.find((candidate) => typeof candidate === 'string' && /^[A-Za-z0-9_]{2,64}$/u.test(candidate))
+        : String(explicitTag);
     if (rawTag === undefined)
         return undefined;
     const ideologyCandidates = [
@@ -652,10 +773,403 @@ class GuiSceneWorkBudget {
         this.textLayoutOperations += amount;
     }
 }
-async function layoutElement(definition, parentRect, inheritedClip, parentScale, depth, context, instanceSuffix = '', rowIndex, rowValues, parentInstanceId, inheritedOrientation = 'upper_left', inheritedVisible = true) {
+/** Native scrollbar children are role templates; their authored coordinates are not layout. */
+async function extendedScrollbarChildren(definition, children, rect, scale, context) {
+    const horizontal = scalarBoolean(property(definition.attributes, 'horizontal')) ?? false;
+    const roles = new Map();
+    for (const role of ['track', 'slider', 'decreaseButton', 'increaseButton']) {
+        const value = property(definition.attributes, role);
+        if (value === undefined)
+            continue;
+        const attributes = objectProperty(value);
+        if (attributes === undefined) {
+            addFidelity(context.fidelity, 'unsupported', 'extended_scrollbar_role', `${role} must be a single inline role definition.`, definition);
+            continue;
+        }
+        const child = {
+            ...definition,
+            id: `${definition.id}:role-${role}`,
+            sourceOwnerId: definition.sourceOwnerId ?? definition.id,
+            parentId: definition.id,
+            name: scalarString(property(attributes, 'name')) ?? `${definition.name}_${role}`,
+            elementType: role === 'track' ? 'iconType' : 'buttonType',
+            attributes,
+            childIds: [],
+            unsupportedAttributes: Object.keys(attributes).filter((key) => guiElementAttributeFidelity(key, 'buttonType') === 'unsupported'),
+        };
+        const spriteName = scalarString(property(attributes, 'spriteType', 'quadTextureSprite'));
+        const sprite = spriteName === undefined ? undefined : context.spritesByName.get(spriteName.toLowerCase());
+        const frame = sprite === undefined ? undefined : await context.catalog.loadSpriteFrame(sprite, 0);
+        const size = objectProperty(property(attributes, 'size'));
+        const position = objectProperty(property(attributes, 'position'));
+        const width = scaledNumber(size === undefined ? undefined : property(size, 'width', 'x'), rect.width, scale) ?? (frame?.width ?? 0) * scale;
+        const height = scaledNumber(size === undefined ? undefined : property(size, 'height', 'y'), rect.height, scale) ?? (frame?.height ?? 0) * scale;
+        roles.set(role, {
+            definition: child,
+            width,
+            height,
+            x: scaledNumber(position === undefined ? undefined : property(position, 'x'), rect.width, scale) ?? (role === 'increaseButton' ? -width : 0),
+            y: scaledNumber(position === undefined ? undefined : property(position, 'y'), rect.height, scale) ?? (role === 'increaseButton' ? -height : 0),
+        });
+    }
+    const length = horizontal ? rect.width : rect.height;
+    const decrease = roles.get('decreaseButton');
+    const increase = roles.get('increaseButton');
+    const start = Math.max(0, Math.min(length, decrease === undefined
+        ? 0
+        : horizontal
+            ? decrease.x + decrease.width
+            : decrease.y + decrease.height));
+    const end = Math.max(start, Math.min(length, increase === undefined ? length : length + (horizontal ? increase.x : increase.y)));
+    const minimum = scalarNumber(property(definition.attributes, 'minValue'), 1) ?? 0;
+    const maximum = scalarNumber(property(definition.attributes, 'maxValue'), 1) ?? 1;
+    const value = scalarNumber(property(definition.attributes, 'startValue'), 1) ?? minimum;
+    const ratio = maximum > minimum ? Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum))) : 0;
+    const track = roles.get('track');
+    const trackAxis = start + (track === undefined ? 0 : horizontal ? track.x : track.y);
+    const trackLength = Math.max(0, end - trackAxis);
+    const result = [];
+    for (const [role, part] of roles) {
+        let x = part.x;
+        let y = part.y;
+        let width = part.width;
+        let height = part.height;
+        if (role === 'increaseButton') {
+            x += rect.width;
+            y += rect.height;
+        }
+        else if (role === 'track') {
+            if (horizontal) {
+                x = trackAxis;
+                width = trackLength;
+            }
+            else {
+                y = trackAxis;
+                height = trackLength;
+            }
+        }
+        else if (role === 'slider') {
+            const axis = trackAxis + Math.max(0, trackLength - (horizontal ? width : height)) * ratio;
+            if (horizontal) {
+                x += axis;
+                y += track?.y ?? 0;
+            }
+            else {
+                x += track?.x ?? 0;
+                y += axis;
+            }
+        }
+        result.push({
+            ...part.definition,
+            attributes: {
+                ...part.definition.attributes,
+                position: { x: x / scale, y: y / scale },
+                size: { width: width / scale, height: height / scale },
+                orientation: 'upper_left',
+                origo: 'upper_left',
+                centerposition: false,
+                ...(maximum <= minimum ? { enabled: false } : {}),
+            },
+        });
+    }
+    addFidelity(context.fidelity, 'modelled', 'native_extended_scrollbar_roles', `Composed inline ${horizontal ? 'horizontal' : 'vertical'} scrollbar artwork with source role offsets and ${ratio} of its value range.`, definition);
+    return [...result, ...children];
+}
+async function scrollbarChildren(definition, children, rect, scale, context, rowValues) {
+    if (definition.elementType.toLowerCase() === 'extendedscrollbartype')
+        return extendedScrollbarChildren(definition, children, rect, scale, context);
+    if (definition.elementType.toLowerCase() !== 'scrollbartype')
+        return children;
+    const horizontal = scalarBoolean(property(definition.attributes, 'horizontal')) ?? false;
+    const length = horizontal ? rect.width : rect.height;
+    const crossLength = horizontal ? rect.height : rect.width;
+    const roles = new Map();
+    for (const role of ['track', 'leftbutton', 'rightbutton', 'slider']) {
+        const name = scalarString(property(definition.attributes, role));
+        if (name === undefined)
+            continue;
+        const child = children.find((candidate) => candidate.name === name);
+        if (child === undefined) {
+            context.diagnostics.push(diagnostic('GUI_SCROLLBAR_ROLE_MISSING', 'warning', `Scrollbar ${definition.name} cannot resolve ${role} template ${name}.`, definition));
+            addFidelity(context.fidelity, 'missing', 'scrollbar_role', `${role} template ${name} is missing.`, definition);
+            continue;
+        }
+        const spriteName = scalarString(property(child.attributes, 'spriteType', 'quadTextureSprite'));
+        const sprite = spriteName === undefined ? undefined : context.spritesByName.get(spriteName.toLowerCase());
+        const frame = sprite === undefined
+            ? undefined
+            : await context.catalog.loadSpriteFrame(sprite, frameFor(child, sprite, context.scenario, rowValues));
+        const size = objectProperty(property(child.attributes, 'size'));
+        roles.set(role, {
+            definition: child,
+            width: scaledNumber(size === undefined ? undefined : property(size, 'width', 'x'), rect.width, scale) ?? (frame?.width ?? 0) * scale,
+            height: scaledNumber(size === undefined ? undefined : property(size, 'height', 'y'), rect.height, scale) ?? (frame?.height ?? 0) * scale,
+        });
+    }
+    const border = objectProperty(property(definition.attributes, 'borderSize'));
+    const borderValue = scaledNumber(border === undefined
+        ? undefined
+        : property(border, horizontal ? 'x' : 'y', horizontal ? 'width' : 'height'), length, scale);
+    const extent = (role) => horizontal ? (roles.get(role)?.width ?? 0) : (roles.get(role)?.height ?? 0);
+    const start = Math.max(0, Math.min(length, borderValue ?? extent('leftbutton')));
+    const end = Math.max(0, Math.min(length - start, borderValue ?? extent('rightbutton')));
+    const trackLength = Math.max(0, length - start - end);
+    const minimum = scalarNumber(property(definition.attributes, 'minValue'), 1) ?? 0;
+    const maximum = scalarNumber(property(definition.attributes, 'maxValue'), 1) ?? 100;
+    const explicitValue = rowValues?.[`${definition.name}.value`] ??
+        rowValues?.[definition.name] ??
+        context.scenario.values[`${definition.name}.value`] ??
+        context.scenario.values[definition.name] ??
+        context.scenario.scriptedGui[definition.name];
+    const state = context.scenario.elementStates[definition.name] ?? context.scenario.state;
+    const value = state === 'minimum-value'
+        ? minimum
+        : state === 'maximum-value'
+            ? maximum
+            : typeof explicitValue === 'number'
+                ? explicitValue
+                : (scalarNumber(property(definition.attributes, 'startValue'), 1) ?? minimum);
+    const ratio = maximum > minimum ? Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum))) : 0;
+    const result = [];
+    const controlledIds = new Set();
+    for (const [role, part] of roles) {
+        controlledIds.add(part.definition.id);
+        const partLength = role === 'track' ? trackLength : Math.min(length, extent(role));
+        const crossSize = role === 'track' ? crossLength : horizontal ? part.height : part.width;
+        const axis = role === 'track'
+            ? start
+            : role === 'rightbutton'
+                ? length - partLength
+                : role === 'slider'
+                    ? start + Math.max(0, trackLength - partLength) * ratio
+                    : 0;
+        const cross = (crossLength - crossSize) / 2;
+        result.push({
+            ...part.definition,
+            attributes: {
+                ...part.definition.attributes,
+                position: {
+                    x: (horizontal ? axis : cross) / scale,
+                    y: (horizontal ? cross : axis) / scale,
+                },
+                size: {
+                    width: (horizontal ? partLength : crossSize) / scale,
+                    height: (horizontal ? crossSize : partLength) / scale,
+                },
+                orientation: 'upper_left',
+                origo: 'upper_left',
+                centerposition: false,
+                ...(maximum <= minimum ? { enabled: false } : {}),
+            },
+        });
+    }
+    addFidelity(context.fidelity, 'modelled', 'native_scrollbar_roles', `Composed ${horizontal ? 'horizontal' : 'vertical'} track, end buttons, and thumb at ${ratio} of its value range.`, definition);
+    return [...result, ...children.filter(({ id }) => !controlledIds.has(id))];
+}
+async function layoutAttachedScrollbars(definition, scrollbars, owner, childOutput, context, depth, scale, rowIndex, rowValues, instanceSuffix) {
+    const geometry = context.geometry.get(owner.id);
+    const viewport = geometry.contentRect;
+    const attachmentRect = owner.unclippedRect;
+    const attachmentWidth = viewport.width > 0 ? attachmentRect.width : 0;
+    const attachmentHeight = viewport.height > 0 ? attachmentRect.height : 0;
+    const directChildren = childOutput.filter((child) => child.parentId === owner.id);
+    const fixedChildren = new Set(directChildren
+        .filter((child) => {
+        const rect = child.unclippedRect;
+        const outer = rectIntersection(rect, owner.unclippedRect);
+        return (outer !== undefined &&
+            equalRect(rect, outer) &&
+            rectIntersection(rect, viewport) === undefined);
+    })
+        .map(({ id }) => id));
+    let right = viewport.x + viewport.width;
+    let bottom = viewport.y + viewport.height;
+    for (const child of directChildren) {
+        const childGeometry = context.geometry.get(child.id);
+        if (!childGeometry.appearanceVisible || fixedChildren.has(child.id))
+            continue;
+        const measured = childGeometry.measuredRect;
+        right = Math.max(right, measured.x + measured.width);
+        bottom = Math.max(bottom, measured.y + measured.height);
+    }
+    const maximumX = scrollbars.some(({ horizontal }) => horizontal)
+        ? Math.max(0, right - viewport.x - viewport.width)
+        : 0;
+    const maximumY = scrollbars.some(({ horizontal }) => !horizontal)
+        ? Math.max(0, bottom - viewport.y - viewport.height)
+        : 0;
+    const requestedOffset = (horizontal) => {
+        const requestedState = context.scenario.elementStates[definition.name] ?? context.scenario.state;
+        if (requestedState === 'minimum-value')
+            return 0;
+        if (requestedState === 'maximum-value')
+            return horizontal ? maximumX : maximumY;
+        const key = `${definition.name}.scroll${horizontal ? 'X' : 'Y'}`;
+        const explicit = rowValues?.[key] ?? context.scenario.values[key] ?? context.scenario.scriptedGui[key];
+        if (typeof explicit === 'number' && Number.isFinite(explicit))
+            return Math.max(0, explicit) * scale;
+        return horizontal
+            ? 0
+            : (context.scenario.scrollOffsets[`${definition.name}${instanceSuffix}`] ??
+                context.scenario.scrollOffsets[`${definition.name}${legacyRowSuffix(instanceSuffix)}`] ??
+                context.scenario.scrollOffsets[definition.name] ??
+                context.scenario.scrollOffsets[definition.id] ??
+                0) * scale;
+    };
+    const offsetX = Math.min(maximumX, requestedOffset(true));
+    const offsetY = Math.min(maximumY, requestedOffset(false));
+    owner.scroll = {
+        viewport,
+        contentWidth: right - viewport.x,
+        contentHeight: bottom - viewport.y,
+        offsetX,
+        offsetY,
+        maximumX,
+        maximumY,
+    };
+    let fixed = false;
+    for (const child of childOutput) {
+        context.work.spend('container scroll translation');
+        if (child.parentId === owner.id)
+            fixed = fixedChildren.has(child.id);
+        const childGeometry = context.geometry.get(child.id);
+        if (fixed) {
+            // A child wholly in the fixed margin keeps the outer window clip, not the scrolled inner clip.
+            childGeometry.clipChain = childGeometry.clipChain.map((clip) => clip === viewport ? owner.unclippedRect : clip);
+            continue;
+        }
+        for (const rect of new Set([
+            child.unclippedRect,
+            childGeometry.contentRect,
+            childGeometry.measuredRect,
+        ])) {
+            rect.x -= offsetX;
+            rect.y -= offsetY;
+        }
+    }
+    addFidelity(context.fidelity, 'modelled', 'native_container_scrolling', `Resolved content extents ${right - viewport.x} by ${bottom - viewport.y}; offsets ${offsetX},${offsetY} are clamped to ${maximumX},${maximumY}. Nested container bounds, not their overflowing descendants, contribute to the parent range.`, definition);
+    if (property(definition.attributes, 'margin') !== undefined)
+        addFidelity(context.fidelity, 'modelled', 'margin', 'Container margins preserve fixed border content and inset the scrolling clip without adding child-layout padding.', definition);
+    const autohide = scalarBoolean(property(definition.attributes, 'autohide_scrollbars')) ?? true;
+    const barLayouts = [];
+    for (const [index, attached] of scrollbars.entries()) {
+        const maximum = attached.horizontal ? maximumX : maximumY;
+        const offset = attached.horizontal ? offsetX : offsetY;
+        const size = objectProperty(property(attached.definition.attributes, 'size'));
+        const barScale = scale * (scalarNumber(property(attached.definition.attributes, 'scale'), 1) ?? 1);
+        if (!Number.isFinite(barScale) || barScale <= 0) {
+            addFidelity(context.fidelity, 'unsupported', 'attached_scrollbar_scale', 'Attached scrollbar scale must be positive and finite.', attached.definition);
+            continue;
+        }
+        const barWidth = attached.horizontal
+            ? attachmentWidth
+            : (scaledNumber(size === undefined ? undefined : property(size, 'width', 'x'), attachmentWidth, barScale) ?? 0);
+        const barHeight = attached.horizontal
+            ? (scaledNumber(size === undefined ? undefined : property(size, 'height', 'y'), attachmentHeight, barScale) ?? 0)
+            : attachmentHeight;
+        const position = objectProperty(property(attached.definition.attributes, 'position'));
+        const axis = anchorAxes(scalarString(property(attached.definition.attributes, 'orientation'))?.toLowerCase() ??
+            'upper_left');
+        const origin = scalarBoolean(property(attached.definition.attributes, 'centerposition')) === true
+            ? { horizontal: 'center', vertical: 'center' }
+            : anchorAxes(scalarString(property(attached.definition.attributes, 'origo'))?.toLowerCase() ??
+                'upper_left');
+        const coordinate = (horizontal) => {
+            const key = `${attached.definition.name}.${horizontal ? 'x' : 'y'}`;
+            const explicit = rowValues?.[key] ?? context.scenario.values[key] ?? context.scenario.scriptedGui[key];
+            const span = horizontal ? attachmentWidth : attachmentHeight;
+            const offset = typeof explicit === 'number' && Number.isFinite(explicit)
+                ? explicit * scale
+                : (scaledNumber(position === undefined ? undefined : property(position, horizontal ? 'x' : 'y'), span, scale) ?? 0);
+            const anchor = horizontal ? axis.horizontal : axis.vertical;
+            const origo = horizontal ? origin.horizontal : origin.vertical;
+            const length = horizontal ? barWidth : barHeight;
+            return (anchoredCoordinate(horizontal ? attachmentRect.x : attachmentRect.y, span, offset, anchor) -
+                (origo === 'center' ? length / 2 : origo === 'right' || origo === 'bottom' ? length : 0));
+        };
+        const bar = {
+            ...attached.definition,
+            id: `${attached.definition.id}:attached-${definition.id}-${index}`,
+            sourceOwnerId: attached.definition.id,
+            parentId: definition.id,
+            attributes: {
+                ...attached.definition.attributes,
+                size: {
+                    width: attached.horizontal
+                        ? attachmentWidth / barScale
+                        : ((size === undefined ? undefined : property(size, 'width', 'x')) ?? 0),
+                    height: attached.horizontal
+                        ? ((size === undefined ? undefined : property(size, 'height', 'y')) ?? 0)
+                        : attachmentHeight / barScale,
+                },
+                minValue: 0,
+                maxValue: maximum,
+                startValue: offset,
+                ...(maximum === 0 ? { enabled: false } : {}),
+            },
+        };
+        const sourceShown = scalarBoolean(property(bar.attributes, 'visible')) ??
+            !(scalarBoolean(property(bar.attributes, 'hide', 'hidden')) ?? false);
+        barLayouts.push({
+            definition: bar,
+            rect: { x: coordinate(true), y: coordinate(false), width: barWidth, height: barHeight },
+            scale: barScale,
+            horizontal: attached.horizontal,
+            shown: explicitElementVisibility(bar, context.scenario, rowValues) ??
+                (sourceShown && (!autohide || maximum > 0)),
+            index,
+        });
+    }
+    const horizontal = barLayouts.find((bar) => bar.horizontal && bar.shown);
+    const vertical = barLayouts.find((bar) => !bar.horizontal && bar.shown);
+    if (horizontal !== undefined &&
+        vertical !== undefined &&
+        rectIntersection(horizontal.rect, vertical.rect) !== undefined) {
+        const horizontalRect = { ...horizontal.rect };
+        const verticalRect = { ...vertical.rect };
+        // Each visible orthogonal scrollbar reserves its actual anchored gutter, including its inset.
+        if (verticalRect.x + verticalRect.width / 2 >=
+            owner.unclippedRect.x + owner.unclippedRect.width / 2)
+            horizontal.rect.width = Math.max(0, verticalRect.x - horizontalRect.x);
+        else {
+            horizontal.rect.x = Math.max(horizontalRect.x, verticalRect.x + verticalRect.width);
+            horizontal.rect.width = Math.max(0, horizontalRect.x + horizontalRect.width - horizontal.rect.x);
+        }
+        if (horizontalRect.y + horizontalRect.height / 2 >=
+            owner.unclippedRect.y + owner.unclippedRect.height / 2)
+            vertical.rect.height = Math.max(0, horizontalRect.y - verticalRect.y);
+        else {
+            vertical.rect.y = Math.max(verticalRect.y, horizontalRect.y + horizontalRect.height);
+            vertical.rect.height = Math.max(0, verticalRect.y + verticalRect.height - vertical.rect.y);
+        }
+        addFidelity(context.fidelity, 'modelled', 'orthogonal_scrollbar_gutters', 'Visible horizontal and vertical scrollbars reserve their anchored cross-axis gutters instead of drawing their end buttons over the same corner.', definition);
+    }
+    for (const bar of barLayouts) {
+        await layoutElement({
+            ...bar.definition,
+            attributes: {
+                ...bar.definition.attributes,
+                position: {
+                    x: (bar.rect.x - owner.unclippedRect.x) / scale,
+                    y: (bar.rect.y - owner.unclippedRect.y) / scale,
+                },
+                size: { width: bar.rect.width / bar.scale, height: bar.rect.height / bar.scale },
+                orientation: 'upper_left',
+                origo: 'upper_left',
+                centerposition: false,
+            },
+        }, owner.unclippedRect, clippedByChain(geometry.clipChain), scale, depth + 1, context, `${instanceSuffix}#scrollbar-${definition.id}-${bar.index}`, rowIndex, {
+            ...rowValues,
+            [`${bar.definition.name}.x`]: (bar.rect.x - owner.unclippedRect.x) / scale,
+            [`${bar.definition.name}.y`]: (bar.rect.y - owner.unclippedRect.y) / scale,
+        }, owner.id, 'upper_left', geometry.appearanceVisible && bar.shown, geometry.clipChain);
+    }
+}
+async function layoutElement(definition, parentRect, inheritedClip, parentScale, depth, context, instanceSuffix = '', rowIndex, rowValues, parentInstanceId, inheritedOrientation = 'upper_left', inheritedVisible = true, inheritedClipChain) {
     context.work.admitElement(depth);
     const { scenario, catalog, fidelity, diagnostics } = context;
     const instanceId = instanceSuffix.length === 0 ? definition.id : `${definition.id}${instanceSuffix}`;
+    const clipChain = inheritedClipChain ?? (inheritedClip === undefined ? [] : [inheritedClip]);
     const localScale = scalarNumber(property(definition.attributes, 'scale'), 1) ?? 1;
     const scale = parentScale * localScale;
     const position = objectProperty(property(definition.attributes, 'position'));
@@ -676,16 +1190,44 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
         : undefined) ??
         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 scriptedVisible = rowValues?.[`${definition.name}.visible`] ??
-        scenario.values[`${definition.name}.visible`] ??
-        scenario.scriptedGui[`${definition.name}.visible`];
-    const explicitlyVisible = scenario.visibility[definition.name] ??
-        scenario.visibility[definition.id] ??
-        (typeof scriptedVisible === 'boolean' ? scriptedVisible : undefined);
-    const resolveVisibleAppearance = inheritedVisible && explicitlyVisible !== false;
-    const background = objectProperty(property(definition.attributes, 'background'));
+    const orientation = scalarString(property(definition.attributes, 'orientation'))?.toLowerCase() ??
+        inheritedOrientation;
+    const origo = scalarString(property(definition.attributes, 'origo'))?.toLowerCase() ?? 'upper_left';
+    const orientationAxes = anchorAxes(orientation);
+    const anchorX = anchoredCoordinate(parentRect.x, parentRect.width, localX, orientationAxes.horizontal);
+    const anchorY = anchoredCoordinate(parentRect.y, parentRect.height, localY, orientationAxes.vertical);
+    const widthValue = size === undefined ? undefined : property(size, 'width', 'x');
+    const heightValue = size === undefined ? undefined : property(size, 'height', 'y');
+    let width = scaledNumber(widthValue, parentRect.width, scale) ?? 0;
+    let height = scaledNumber(heightValue, parentRect.height, scale) ?? 0;
+    // A doubled percent names a far-edge coordinate in the parent, whereas a single
+    // percent is a proportional extent. Resolve the anchor first, including screen-centred roots.
+    if (typeof widthValue === 'string' && widthValue.endsWith('%%'))
+        width = Math.max(0, width - (anchorX - parentRect.x));
+    if (typeof heightValue === 'string' && heightValue.endsWith('%%'))
+        height = Math.max(0, height - (anchorY - parentRect.y));
+    const inferWidth = !(typeof widthValue === 'string' && widthValue.endsWith('%%'));
+    const inferHeight = !(typeof heightValue === 'string' && heightValue.endsWith('%%'));
+    // Native negative extents specify an inset from the parent's far edge.
+    if (width < 0)
+        width = Math.max(0, parentRect.width - localX + width);
+    if (height < 0)
+        height = Math.max(0, parentRect.height - localY + height);
+    const explicitlyVisible = explicitElementVisibility(definition, scenario, rowValues);
+    const declaredHidden = scalarBoolean(property(definition.attributes, 'hide', 'hidden')) ?? false;
+    const sourceVisible = scalarBoolean(property(definition.attributes, 'visible')) ?? !declaredHidden;
+    const resolveVisibleAppearance = inheritedVisible && (explicitlyVisible ?? sourceVisible);
+    const scriptedEnabled = rowValues?.[`${definition.name}.enabled`] ??
+        scenario.values[`${definition.name}.enabled`] ??
+        scenario.scriptedGui[`${definition.name}.enabled`] ??
+        context.constantElementEnabled[definition.name] ??
+        scalarBoolean(property(definition.attributes, 'enabled'));
+    const requestedState = scenario.elementStates[definition.name] ?? scenario.state;
+    const state = scriptedEnabled === false ? 'disabled' : requestedState;
+    const backgroundValue = property(definition.attributes, 'background');
+    const backgrounds = (Array.isArray(backgroundValue) ? backgroundValue : [backgroundValue])
+        .map(objectProperty)
+        .filter((value) => value !== undefined);
     const scriptedImage = rowValues?.[`${definition.name}.image`] ??
         rowValues?.[definition.name] ??
         scenario.values[`${definition.name}.image`] ??
@@ -693,22 +1235,22 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
         scenario.scriptedGui[`${definition.name}.image`] ??
         scenario.scriptedGui[definition.name];
     const spriteName = (typeof scriptedImage === 'string' && scriptedImage.length > 0 ? scriptedImage : undefined) ??
-        scalarString(property(definition.attributes, 'spriteType', 'quadTextureSprite')) ??
-        scalarString(background === undefined
-            ? undefined
-            : property(background, 'spriteType', 'quadTextureSprite'));
+        scalarString(property(definition.attributes, 'spriteType', 'quadTextureSprite'));
     const spriteDefinition = spriteName === undefined ? undefined : context.spritesByName.get(spriteName.toLowerCase());
     let sprite;
     let secondarySprite;
     let spriteRenderMode;
+    let spriteShader;
+    let progressShader;
+    let progressColours;
     const countryFlag = dynamicCountryFlag(definition.name, context.countryFlagProperties.get(definition.name), scenario, rowValues);
     if (countryFlag !== undefined && resolveVisibleAppearance) {
         sprite = await catalog.loadCountryFlag(countryFlag.tag, spriteDefinition, countryFlag.ideology, spriteName);
         spriteRenderMode = 'stretch';
         if (sprite.supported) {
-            if (width === 0)
+            if (width === 0 && inferWidth)
                 width = sprite.width * scale;
-            if (height === 0)
+            if (height === 0 && inferHeight)
                 height = sprite.height * scale;
             addFidelity(fidelity, 'modelled', 'dynamic_country_flag', `${definition.name} resolved the ${countryFlag.tag} flag from scenario country context.`, definition);
         }
@@ -738,25 +1280,78 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
                     : 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);
-            partialAppearance.push(detail);
+        const colourProgress = spriteRenderMode === 'progressbar' &&
+            spriteDefinition.texturePath === undefined &&
+            spriteDefinition.texturePath2 === undefined &&
+            spriteDefinition.primaryColour !== undefined &&
+            spriteDefinition.secondaryColour !== undefined;
+        if (colourProgress) {
+            progressColours = {
+                first: spriteDefinition.primaryColour,
+                second: spriteDefinition.secondaryColour,
+            };
+            if (width === 0 && inferWidth)
+                width = (spriteDefinition.declaredSize?.width ?? 0) * scale;
+            if (height === 0 && inferHeight)
+                height = (spriteDefinition.declaredSize?.height ?? 0) * scale;
+        }
+        if (spriteDefinition.effectFile !== undefined && spriteRenderMode === 'progressbar') {
+            const shader = catalog.progressShader(spriteDefinition, colourProgress ? 'Color' : 'Texture');
+            if (shader.supported) {
+                progressShader = shader.shader;
+                addFidelity(fidelity, 'modelled', 'progress_shader_threshold', `${progressShader.sourcePath} :: ${progressShader.entryPoint} selects one of two ${colourProgress ? 'colours' : 'textures'} at the supplied progress.`, definition);
+            }
+            else {
+                const detail = `Effect ${spriteDefinition.effectFile}: ${shader.reason}`;
+                addFidelity(fidelity, 'unsupported', 'effectFile', detail, definition);
+                partialAppearance.push(detail);
+            }
+        }
+        else if (spriteDefinition.effectFile !== undefined) {
+            const pressed = rowValues?.[`${definition.name}.pressed`] ?? scenario.values[`${definition.name}.pressed`];
+            const effect = state === 'disabled' || state === 'locked'
+                ? 'Disable'
+                : pressed === true
+                    ? 'Down'
+                    : state === 'hover'
+                        ? 'Over'
+                        : 'Up';
+            const elapsed = rowValues?.[`${definition.name}.stateTimeSeconds`] ??
+                scenario.values[`${definition.name}.stateTimeSeconds`] ??
+                scenario.animationTimeSeconds;
+            const shader = catalog.spriteShader(spriteDefinition, effect, {
+                time: typeof elapsed === 'number'
+                    ? Math.max(0, Math.min(86_400, elapsed))
+                    : scenario.animationTimeSeconds,
+                animationTime: 0,
+            });
+            if (shader.supported) {
+                spriteShader = shader.shader;
+                addFidelity(fidelity, 'modelled', 'sprite_shader_colour', `${spriteShader.sourcePath} :: ${spriteShader.entryPoint} supplies the ${effect} colour transform.`, definition);
+            }
+            else {
+                const detail = `Effect ${spriteDefinition.effectFile}: ${shader.reason}`;
+                addFidelity(fidelity, 'unsupported', 'effectFile', detail, definition);
+                partialAppearance.push(detail);
+            }
         }
         if (partialAppearance.length > 0)
             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, rowValues);
+        const frame = frameFor(definition, spriteDefinition, scenario, rowValues, state);
         sprite = await catalog.loadSpriteFrame(spriteDefinition, frame);
         if (spriteDefinition.texturePath2 !== undefined)
             secondarySprite = await catalog.loadSecondarySpriteFrame(spriteDefinition, frame);
-        if (!sprite?.supported) {
+        if (colourProgress) {
+            addFidelity(fidelity, partialAppearance.length === 0 ? 'modelled' : 'approximated', 'progressbar_composition', `Progress bar ${spriteDefinition.name} uses its declared primary and secondary colours without a texture.`, definition);
+        }
+        else 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));
         }
         else {
-            if (width === 0)
+            if (width === 0 && inferWidth)
                 width = sprite.width * scale;
-            if (height === 0)
+            if (height === 0 && inferHeight)
                 height = sprite.height * scale;
             addFidelity(fidelity, partialAppearance.length === 0 ? 'modelled' : 'approximated', 'sprite_frame', partialAppearance.length === 0
                 ? `${spriteDefinition.name} frame ${sprite.frame + 1}/${sprite.frameCount}`
@@ -794,11 +1389,18 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
     if (typeof scriptedX === 'number' || typeof scriptedY === 'number')
         addFidelity(fidelity, 'modelled', 'scripted_gui_position', `Scenario properties positioned ${definition.name} at ${localX},${localY} before anchoring.`, definition);
     const rawButtonText = scalarString(property(definition.attributes, 'buttonText'));
-    const rawText = scalarString(property(definition.attributes, 'text')) ?? rawButtonText;
+    const overrideText = rowValues?.[`${definition.name}.text`] ??
+        scenario.values[`${definition.name}.text`] ??
+        scenario.scriptedGui[`${definition.name}.text`];
+    const rawText = (typeof overrideText === 'string' || typeof overrideText === 'number'
+        ? String(overrideText)
+        : undefined) ??
+        scalarString(property(definition.attributes, 'text', 'context_aware_text')) ??
+        rawButtonText;
     const embeddedButtonText = rawText !== undefined &&
         (rawButtonText !== undefined || definition.elementType.toLowerCase().includes('button'));
     let text;
-    if (rawText !== undefined && resolveVisibleAppearance) {
+    if (rawText !== undefined && rawText.length > 0 && resolveVisibleAppearance) {
         const resolved = resolveTokenText(rawText, scenario, context.localisation, rowValues);
         let displayText = resolved.text;
         const state = scenario.elementStates[definition.name] ?? scenario.state;
@@ -849,9 +1451,11 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
         }
         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)
+        if (width === 0 && inferWidth && declaredMaxWidth !== undefined)
             width = declaredMaxWidth;
-        if (height === 0 && declaredMaxHeight !== undefined)
+        if (width === 0 && inferWidth && /textbox/iu.test(definition.elementType))
+            width = nativeTextBoxWidth * scale;
+        if (height === 0 && inferHeight && declaredMaxHeight !== undefined)
             height = declaredMaxHeight;
         const maxWidth = declaredMaxWidth ?? width;
         const wrapped = wrapText(catalog, fontName, displayText, visibleText.colours, fontSize * scale, maxWidth, context.work, resolvedInlineIcons);
@@ -866,9 +1470,9 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             ? wrapped.lines.map((line, index) => colourRunsForLine(catalog, fontName, line, wrapped.colourLines[index] ?? [], fontSize * scale, context.work, resolvedInlineIcons, fontDefinition?.colour ?? defaultTextColour))
             : undefined;
         const maximumLineWidth = wrapped.widths.reduce((maximum, value) => Math.max(maximum, value), 0);
-        if (width === 0)
+        if (width === 0 && inferWidth)
             width = maximumLineWidth;
-        if (height === 0)
+        if (height === 0 && inferHeight)
             height = wrapped.lines.length * wrapped.lineHeight;
         const measuredWidth = maximumLineWidth;
         const measuredHeight = wrapped.lines.length * wrapped.lineHeight;
@@ -914,17 +1518,13 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             : 'Deterministic project font paths substitute for unavailable workspace glyph data.', definition);
         if (resolvedFontMetrics.source === 'bmfont')
             addFidelity(fidelity, resolvedFontMetrics.baselineModelled ? 'modelled' : 'approximated', 'font_native_metrics', `BMFont native size ${resolvedFontMetrics.nativeSize}, line height ${resolvedFontMetrics.nativeLineHeight}, and baseline ${resolvedFontMetrics.nativeBaseline}${explicitFontSize === undefined ? ' determine this element layout' : ' are scaled to the element fontSize'}.`, definition);
-        if (resolved.missingLocalisation)
+        if (resolved.missingLocalisation && overrideText === undefined)
             addFidelity(fidelity, 'missing', 'localisation', `No ${scenario.language} localisation for ${rawText}.`, definition);
         if (resolved.unresolved.length > 0)
             addFidelity(fidelity, 'unresolved', 'dynamic_text', `Unresolved tokens: ${resolved.unresolved.join(', ')}.`, definition);
     }
-    const orientation = scalarString(property(definition.attributes, 'orientation'))?.toLowerCase() ??
-        inheritedOrientation;
-    const origo = scalarString(property(definition.attributes, 'origo'))?.toLowerCase() ?? 'upper_left';
-    const orientationAxes = anchorAxes(orientation);
-    let x = anchoredCoordinate(parentRect.x, parentRect.width, localX, orientationAxes.horizontal);
-    let y = anchoredCoordinate(parentRect.y, parentRect.height, localY, orientationAxes.vertical);
+    let x = anchorX;
+    let y = anchorY;
     const centerPosition = scalarBoolean(property(definition.attributes, 'centerposition')) ?? false;
     const origoAxes = centerPosition
         ? { horizontal: 'center', vertical: 'center' }
@@ -938,26 +1538,60 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
         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')) ??
-        (background !== undefined && /(?:containerwindow|windowtype)/iu.test(definition.elementType));
+        (backgrounds.length > 0 && /(?:containerwindow|windowtype)/iu.test(definition.elementType));
+    let scrollbars = attachedScrollbars(definition, context);
+    if (scrollbars.length > 0 && (!ownClipping || backgrounds.length === 0)) {
+        diagnostics.push(diagnostic('GUI_SCROLLBAR_CONTAINER_BOUNDARY_MISSING', 'warning', `Container ${definition.name} needs a background and clipping for attached scrolling.`, definition));
+        addFidelity(fidelity, 'unsupported', 'attached_scrollbar', 'The container has no active clipped background boundary.', definition);
+        scrollbars = [];
+    }
+    const margin = scrollbars.length === 0 ? undefined : objectProperty(property(definition.attributes, 'margin'));
+    const inset = (name, reference) => Math.max(0, Math.min(reference, scaledNumber(margin === undefined ? undefined : property(margin, name), reference, scale) ??
+        0));
+    const left = inset('left', unclippedRect.width);
+    const top = inset('top', unclippedRect.height);
+    const contentRect = {
+        x: x + left,
+        y: y + top,
+        width: Math.max(0, unclippedRect.width - left - inset('right', unclippedRect.width)),
+        height: Math.max(0, unclippedRect.height - top - inset('bottom', unclippedRect.height)),
+    };
+    const scrollOffset = scrollbars.length > 0
+        ? 0
+        : (scenario.scrollOffsets[`${definition.name}${instanceSuffix}`] ??
+            scenario.scrollOffsets[`${definition.name}${legacyRowSuffix(instanceSuffix)}`] ??
+            scenario.scrollOffsets[definition.name] ??
+            scenario.scrollOffsets[definition.id] ??
+            0) * scale;
     const availableClip = inheritedClip === undefined ? unclippedRect : rectIntersection(inheritedClip, unclippedRect);
     const clipRect = inheritedClip;
     const clipped = clipRect !== undefined &&
         (availableClip === undefined || !equalRect(unclippedRect, availableClip));
-    const visible = inheritedVisible &&
-        (explicitlyVisible ?? (availableClip !== undefined || inheritedClip === undefined));
+    const visible = resolveVisibleAppearance && (availableClip !== undefined || inheritedClip === undefined);
     const clickThrough = scalarBoolean(property(definition.attributes, 'clickThrough', 'alwaystransparent', 'allwaystransparent')) ?? false;
-    const scriptedEnabled = rowValues?.[`${definition.name}.enabled`] ??
-        scenario.values[`${definition.name}.enabled`] ??
-        scenario.scriptedGui[`${definition.name}.enabled`] ??
-        context.constantElementEnabled[definition.name];
-    const clickable = clickableTypes.test(definition.elementType) && !clickThrough && scriptedEnabled !== false;
-    const state = scenario.elementStates[definition.name] ?? scenario.state;
-    const zPriority = scalarNumber(property(definition.attributes, 'priority'), 0) ?? 0;
+    const interactive = clickableTypes.test(definition.elementType);
+    const interactionBlock = !interactive
+        ? undefined
+        : clickThrough
+            ? 'click_through'
+            : scriptedEnabled === false
+                ? 'scripted_enabled_false'
+                : requestedState === 'disabled' || requestedState === 'locked'
+                    ? 'scenario_state'
+                    : undefined;
+    const disabledReason = interactive && !visible ? 'hidden' : interactionBlock;
+    const clickable = interactive && disabledReason === undefined;
+    const visibilityReason = visible
+        ? 'visible'
+        : !inheritedVisible
+            ? 'parent_hidden'
+            : explicitlyVisible === false
+                ? 'visibility_false'
+                : 'outside_clip';
     let progressRatio;
-    if (/progressbar/iu.test(definition.elementType)) {
+    if (/progressbar/iu.test(definition.elementType) || spriteRenderMode === 'progressbar') {
         const minimum = scalarNumber(property(definition.attributes, 'minValue'), 1) ?? 0;
         const maximum = scalarNumber(property(definition.attributes, 'maxValue'), 1) ?? 100;
         const startValueToken = scalarString(property(definition.attributes, 'startValue'));
@@ -978,10 +1612,15 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
             value = maximum;
         progressRatio =
             maximum === minimum ? 0 : Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum)));
+        const explicitProgress = rowValues?.[`${definition.name}.progress`] ??
+            scenario.values[`${definition.name}.progress`] ??
+            scenario.scriptedGui[`${definition.name}.progress`];
+        if (typeof explicitProgress === 'number')
+            progressRatio = Math.max(0, Math.min(1, explicitProgress));
     }
     const sceneElement = {
         id: instanceId,
-        sourceId: definition.id,
+        sourceId: definition.sourceOwnerId ?? definition.id,
         name: definition.name,
         elementType: definition.elementType,
         ...(parentInstanceId === undefined
@@ -994,9 +1633,11 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
                 }
             : { parentId: parentInstanceId }),
         depth,
-        zIndex: Math.trunc(zPriority * 1_000_000 + definition.definitionOrder),
+        zIndex: context.output.length,
         visible,
+        visibilityReason,
         clickable,
+        ...(disabledReason === undefined ? {} : { disabledReason }),
         clickThrough,
         rect: availableClip ?? { x: unclippedRect.x, y: unclippedRect.y, width: 0, height: 0 },
         unclippedRect,
@@ -1008,6 +1649,9 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
         ...(sprite === undefined ? {} : { sprite }),
         ...(secondarySprite === undefined ? {} : { secondarySprite }),
         ...(spriteRenderMode === undefined ? {} : { spriteRenderMode }),
+        ...(spriteShader === undefined ? {} : { spriteShader }),
+        ...(progressShader === undefined ? {} : { progressShader }),
+        ...(progressColours === undefined ? {} : { progressColours }),
         ...(spriteDefinition?.borderSize === undefined
             ? {}
             : { spriteBorderSize: spriteDefinition.borderSize }),
@@ -1025,9 +1669,44 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
     };
     context.output.push(sceneElement);
     context.instancesById.set(instanceId, sceneElement);
+    context.geometry.set(instanceId, {
+        appearanceVisible: resolveVisibleAppearance,
+        ...(interactionBlock === undefined ? {} : { interactionBlock }),
+        clipChain,
+        contentRect,
+        measuredRect: unclippedRect,
+    });
+    for (const [index, attributes] of backgrounds.entries()) {
+        const backgroundSprite = scalarString(property(attributes, 'spriteType', 'quadTextureSprite'));
+        const nativeSprite = backgroundSprite === undefined
+            ? undefined
+            : context.spritesByName.get(backgroundSprite.toLowerCase());
+        const tiled = nativeSprite?.spriteType.toLowerCase() === 'corneredtilespritetype';
+        const backgroundDefinition = {
+            ...definition,
+            id: `${definition.id}:background-${index}`,
+            sourceOwnerId: definition.sourceOwnerId ?? definition.id,
+            name: scalarString(property(attributes, 'name')) ?? `${definition.name}_background_${index}`,
+            elementType: 'background',
+            parentId: definition.id,
+            childIds: [],
+            attributes: {
+                ...attributes,
+                ...(tiled && property(attributes, 'size') === undefined
+                    ? { size: { width: width / scale, height: height / scale } }
+                    : {}),
+                alwaystransparent: true,
+            },
+            unsupportedAttributes: Object.keys(attributes).filter((key) => guiElementAttributeFidelity(key) === 'unsupported'),
+        };
+        await layoutElement(backgroundDefinition, unclippedRect, inheritedClip, scale, depth + 1, context, instanceSuffix, rowIndex, rowValues, instanceId, 'upper_left', resolveVisibleAppearance, clipChain);
+        addFidelity(fidelity, 'modelled', 'native_background', tiled
+            ? 'Cornered background fills its container; fixed source borders retain their native size.'
+            : 'Fixed background retains its native texture size and local position independently of the container bounds.', definition);
+    }
     addFidelity(fidelity, 'modelled', 'nested_offset', `Positioned ${definition.name} at ${x},${y} with scale ${scale}.`, definition);
     for (const attribute of Object.keys(definition.attributes).sort((left, right) => compareCodeUnits(left, right))) {
-        const classification = guiElementAttributeFidelity(attribute);
+        const classification = guiElementAttributeFidelity(attribute, definition.elementType);
         if (classification === 'structural' || classification === 'unsupported')
             continue;
         addFidelity(fidelity, classification, attribute, classification === 'modelled'
@@ -1041,29 +1720,73 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
     const childParentRect = { ...unclippedRect, y: unclippedRect.y - scrollOffset };
     const childClip = ownClipping
         ? inheritedClip === undefined
-            ? unclippedRect
-            : rectIntersection(inheritedClip, unclippedRect)
+            ? contentRect
+            : (rectIntersection(inheritedClip, contentRect) ?? {
+                ...contentRect,
+                width: 0,
+                height: 0,
+            })
         : inheritedClip;
-    const childDefinitions = definition.childIds
+    const childClipChain = ownClipping ? [...clipChain, contentRect] : clipChain;
+    const childDefinitions = await scrollbarChildren(definition, definition.childIds
         .map((id) => context.elementsById.get(id))
-        .filter((element) => element !== undefined);
-    let rows = scenario.lists[definition.name] ?? scenario.lists[definition.id];
+        .filter((element) => element !== undefined)
+        .filter((element) => !/^(?:containerwindowtype|windowtype)$/iu.test(definition.elementType) ||
+        element.elementType.toLowerCase() !== 'extendedscrollbartype')
+        .sort((left, right) => (scalarNumber(property(left.attributes, 'priority'), 0) ?? 0) -
+        (scalarNumber(property(right.attributes, 'priority'), 0) ?? 0) ||
+        left.definitionOrder - right.definitionOrder), unclippedRect, scale, context, rowValues);
+    const rowList = rowValues?.[`${definition.name}.list`];
+    let rows = (typeof rowList === 'string' ? scenario.lists[rowList] : undefined) ??
+        scenario.lists[`${definition.name}${instanceSuffix}`] ??
+        scenario.lists[`${definition.name}${legacyRowSuffix(instanceSuffix)}`] ??
+        scenario.lists[definition.name] ??
+        scenario.lists[definition.id];
     if (state === 'empty-list')
         rows = [];
     if (state === 'full-list' && rows === undefined)
         rows = Array.from({ length: 12 }, (_unused, index) => ({ index }));
     const dynamicList = context.dynamicListsByName.get(definition.name);
-    const listElement = /(?:grid|listbox|scroll)/iu.test(definition.elementType);
+    const listElement = /(?:grid|listbox|overlappingelements)/iu.test(definition.elementType);
     const slotSize = objectProperty(property(definition.attributes, 'slotsize'));
     const slotHeight = scaledNumber(slotSize === undefined ? undefined : property(slotSize, 'height', 'y'), height, scale);
+    const slotWidth = scaledNumber(slotSize === undefined ? undefined : property(slotSize, 'width', 'x'), width, scale);
+    const spacingValue = objectProperty(property(definition.attributes, 'spacing'));
+    const spacingY = (scalarNumber(spacingValue === undefined
+        ? property(definition.attributes, 'spacing')
+        : property(spacingValue, 'y'), height) ?? 0) * scale;
+    const spacingX = (scalarNumber(spacingValue === undefined
+        ? property(definition.attributes, 'spacing')
+        : property(spacingValue, 'x'), width) ?? 0) * scale;
+    const maxHorizontal = scalarNumber(property(definition.attributes, 'max_slots_horizontal'), 1);
+    const maxVertical = scalarNumber(property(definition.attributes, 'max_slots_vertical'), 1);
+    const grid = /grid/iu.test(definition.elementType);
+    const rowPosition = (index, fallbackY) => {
+        if (!grid || slotWidth === undefined || slotHeight === undefined)
+            return { x: 0, y: fallbackY };
+        if (maxVertical !== undefined && maxVertical > 0) {
+            const rowsPerColumn = Math.max(1, Math.trunc(maxVertical));
+            return {
+                x: Math.floor(index / rowsPerColumn) * (slotWidth + spacingX),
+                y: (index % rowsPerColumn) * (slotHeight + spacingY),
+            };
+        }
+        const fit = Math.max(1, Math.floor((width + spacingX) / Math.max(1, slotWidth + spacingX)));
+        const columns = maxHorizontal === undefined || maxHorizontal <= 0
+            ? fit
+            : Math.max(1, Math.min(fit, Math.trunc(maxHorizontal)));
+        return {
+            x: (index % columns) * (slotWidth + spacingX),
+            y: Math.floor(index / columns) * (slotHeight + spacingY),
+        };
+    };
+    const firstChildOutput = context.output.length;
+    const rowSuffix = (index) => `${instanceSuffix}#list-${definition.id}#row-${index}`;
     if (rows !== undefined && childDefinitions.length > 0 && listElement) {
-        const spacingValue = objectProperty(property(definition.attributes, 'spacing'));
-        const spacingY = scalarNumber(spacingValue === undefined
-            ? property(definition.attributes, 'spacing')
-            : property(spacingValue, 'y'), height) ?? 0;
         let rowY = 0;
         for (const [index, row] of rows.entries()) {
             context.work.spend('scenario list row expansion');
+            const offset = rowPosition(index, rowY);
             let rowHeight = 0;
             for (const child of childDefinitions) {
                 context.work.spend('scenario list child expansion');
@@ -1071,17 +1794,23 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
                 const originalY = scalarNumber(childPosition === undefined ? undefined : property(childPosition, 'y'), height) ?? 0;
                 const shiftedParent = {
                     ...childParentRect,
-                    y: childParentRect.y + rowY - originalY * scale,
+                    x: childParentRect.x + offset.x,
+                    y: childParentRect.y + offset.y - originalY * scale,
+                    ...(slotWidth === undefined ? {} : { width: slotWidth }),
+                    ...(slotHeight === undefined ? {} : { height: slotHeight }),
                 };
-                await layoutElement(child, shiftedParent, childClip, scale, depth + 1, context, `${instanceSuffix}#row-${index}`, index, row, instanceId, origo, visible);
-                const rendered = context.instancesById.get(`${child.id}${instanceSuffix}#row-${index}`);
+                await layoutElement(child, shiftedParent, childClip, scale, depth + 1, context, rowSuffix(index), index, row, instanceId, origo, resolveVisibleAppearance, childClipChain);
+                const rendered = context.instancesById.get(`${child.id}${rowSuffix(index)}`);
                 rowHeight = Math.max(rowHeight, rendered?.unclippedRect.height ?? 0);
             }
-            rowY += (slotHeight ?? rowHeight) + spacingY * scale;
+            rowY += (slotHeight ?? rowHeight) + spacingY;
         }
         addFidelity(fidelity, 'modelled', 'scroll_rows', `Expanded ${rows.length} scenario rows for ${definition.name}.`, definition);
     }
-    else if (rows !== undefined && dynamicList !== undefined && listElement) {
+    else if (rows !== undefined &&
+        listElement &&
+        (dynamicList !== undefined ||
+            rows.some(({ entryContainer }) => typeof entryContainer === 'string'))) {
         let rowY = 0;
         let renderedRows = 0;
         for (const [index, row] of rows.entries()) {
@@ -1091,8 +1820,8 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
                 ? explicitTemplate
                 : undefined) ??
                 (row.countryScope === true
-                    ? (dynamicList.countryScopeEntryContainer ?? dynamicList.entryContainer)
-                    : (dynamicList.entryContainer ?? dynamicList.countryScopeEntryContainer));
+                    ? (dynamicList?.countryScopeEntryContainer ?? dynamicList?.entryContainer)
+                    : (dynamicList?.entryContainer ?? dynamicList?.countryScopeEntryContainer));
             const template = templateName === undefined ? undefined : context.elementsByName.get(templateName);
             if (template === undefined) {
                 diagnostics.push(diagnostic('GUI_DYNAMIC_LIST_TEMPLATE_MISSING', 'error', templateName === undefined
@@ -1101,24 +1830,41 @@ async function layoutElement(definition, parentRect, inheritedClip, parentScale,
                 continue;
             }
             const templatePosition = objectProperty(property(template.attributes, 'position'));
+            const offset = rowPosition(index, rowY);
+            const originalX = scalarNumber(templatePosition === undefined ? undefined : property(templatePosition, 'x'), width) ?? 0;
             const originalY = scalarNumber(templatePosition === undefined ? undefined : property(templatePosition, 'y'), height) ?? 0;
             const shiftedParent = {
                 ...childParentRect,
-                y: childParentRect.y + rowY - originalY * scale,
+                x: childParentRect.x + offset.x - originalX * scale,
+                y: childParentRect.y + offset.y - originalY * scale,
+                ...(slotWidth === undefined ? {} : { width: slotWidth }),
+                ...(slotHeight === undefined ? {} : { height: slotHeight }),
             };
-            await layoutElement(template, shiftedParent, childClip, scale, depth + 1, context, `${instanceSuffix}#row-${index}`, index, row, instanceId, origo, visible);
-            const rendered = context.instancesById.get(`${template.id}${instanceSuffix}#row-${index}`);
-            rowY += slotHeight ?? rendered?.unclippedRect.height ?? 0;
+            await layoutElement(template, shiftedParent, childClip, scale, depth + 1, context, rowSuffix(index), index, row, instanceId, origo, resolveVisibleAppearance, childClipChain);
+            const rendered = context.instancesById.get(`${template.id}${rowSuffix(index)}`);
+            rowY += (slotHeight ?? rendered?.unclippedRect.height ?? 0) + spacingY;
             renderedRows += 1;
         }
-        addFidelity(fidelity, renderedRows === rows.length ? 'modelled' : 'missing', 'scripted_gui_dynamic_list', `Expanded ${renderedRows}/${rows.length} scenario rows for ${definition.name} through its scripted-GUI entry containers.`, definition);
+        addFidelity(fidelity, renderedRows === rows.length ? 'modelled' : 'missing', dynamicList === undefined ? 'native_dynamic_list' : 'scripted_gui_dynamic_list', `Expanded ${renderedRows}/${rows.length} scenario rows for ${definition.name} through ${dynamicList === undefined ? 'explicit native' : 'scripted-GUI'} entry containers.`, definition);
     }
     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, origo, visible);
+            await layoutElement(child, childParentRect, childClip, scale, depth + 1, context, instanceSuffix, rowIndex, rowValues, instanceId, origo, resolveVisibleAppearance, childClipChain);
         }
     }
+    const childOutput = context.output.slice(firstChildOutput);
+    context.work.spend('child content measurement', childOutput.length);
+    const directChildren = childOutput.filter((child) => child.parentId === instanceId && context.geometry.get(child.id).appearanceVisible);
+    if (listElement && rows !== undefined) {
+        // Declared list bounds remain a minimum even when its runtime row collection is short.
+        context.geometry.get(instanceId).measuredRect = unionRects([
+            unclippedRect,
+            ...directChildren.map((child) => child.unclippedRect),
+        ]);
+    }
+    if (scrollbars.length > 0)
+        await layoutAttachedScrollbars(definition, scrollbars, sceneElement, childOutput, context, depth, scale, rowIndex, rowValues, instanceSuffix);
 }
 /** Build a deterministic GUI scene from the connected source graph and scenario. */
 export async function buildGuiScene(graph, scannedFiles, windowName, scenario, catalog = new GuiAssetCatalog(graph, scannedFiles)) {
@@ -1141,9 +1887,8 @@ export async function buildGuiScene(graph, scannedFiles, windowName, scenario, c
     const candidates = graph.elements.filter((element) => element.name === windowName);
     const root = candidates.toSorted((left, right) => compareCodeUnits(right.sourcePath, left.sourcePath) ||
         right.definitionOrder - left.definitionOrder)[0];
-    const baseScale = Math.min(scenario.resolution.width / 1920, scenario.resolution.height / 1080) *
-        scenario.uiScale;
-    addFidelity(fidelity, 'approximated', 'resolution_scale', `Coordinates use a 1920x1080 reference with UI scale ${scenario.uiScale}.`);
+    const baseScale = scenario.uiScale;
+    addFidelity(fidelity, 'modelled', 'resolution_scale', `Pixel dimensions use UI scale ${scenario.uiScale}; resolution changes the viewport and anchors, not the pixel scale.`);
     if (root === undefined) {
         diagnostics.push({
             code: 'GUI_WINDOW_MISSING',
@@ -1194,13 +1939,47 @@ export async function buildGuiScene(graph, scannedFiles, windowName, scenario, c
     const resolvedScriptedProperties = {};
     const dynamicListsByName = new Map();
     const countryFlagProperties = new Map();
+    const conditionDefinitions = relevantScriptedGuiNames.size === 0
+        ? undefined
+        : ClausewitzEvaluationDefinitions.build({ files: [...scannedFiles] });
+    const conditionScenario = guiConditionScenario(scenario);
     for (const scripted of graph.scriptedGuis.filter(({ name }) => relevantScriptedGuiNames.has(name))) {
+        const source = scannedFiles.find(({ displayPath }) => displayPath === scripted.sourcePath);
+        const subject = {
+            id: scripted.id,
+            provenance: [],
+            ...(source === undefined
+                ? {}
+                : { document: parseClausewitz(source.bytes, source.displayPath) }),
+        };
+        for (const image of scripted.imageDefinitions ?? []) {
+            let selected;
+            let unresolved = false;
+            for (const choice of image.choices) {
+                const result = evaluateGuiCondition(choice.conditionExpression, conditionScenario, subject, conditionDefinitions);
+                if (result.state === 'unresolved') {
+                    unresolved = true;
+                    addFidelity(fidelity, 'unresolved', 'focus_inlay_image', `${scripted.name}.${image.elementName} requires more scenario facts before selecting a sprite.`);
+                    break;
+                }
+                if (result.state === 'true') {
+                    selected = choice.spriteName;
+                    break;
+                }
+            }
+            if (unresolved)
+                continue;
+            constantElementVisibility[image.elementName] = selected !== undefined;
+            if (selected !== undefined)
+                resolvedScriptedProperties[`${image.elementName}.image`] = selected;
+            addFidelity(fidelity, 'modelled', 'focus_inlay_image', `${scripted.name}.${image.elementName} ${selected === undefined ? 'has no matching sprite and is hidden' : `selects ${selected}`}.`);
+        }
         for (const dynamicList of scripted.dynamicListDefinitions)
             dynamicListsByName.set(dynamicList.name, dynamicList);
         for (const propertyDefinition of scripted.propertyDefinitions) {
             for (const [attribute, expression] of Object.entries(propertyDefinition.attributes)) {
                 const suffix = attribute.toLowerCase();
-                if (!['image', 'frame', 'x', 'y', 'visible', 'enabled'].includes(suffix))
+                if (!['image', 'frame', 'x', 'y', 'visible', 'enabled', 'progress'].includes(suffix))
                     continue;
                 const countryFlagExpression = suffix === 'image' &&
                     typeof expression === 'string' &&
@@ -1209,7 +1988,10 @@ export async function buildGuiScene(graph, scannedFiles, windowName, scenario, c
                     countryFlagProperties.set(propertyDefinition.elementName, expression);
                 if (countryFlagExpression)
                     continue;
-                const resolved = scenarioExpressionValue(expression, scenario.values);
+                const resolved = scenarioExpressionValue(expression, {
+                    ...scenario.variables,
+                    ...scenario.values,
+                });
                 if (resolved === undefined)
                     continue;
                 const key = `${propertyDefinition.elementName}.${suffix}`;
@@ -1219,28 +2001,44 @@ export async function buildGuiScene(graph, scannedFiles, windowName, scenario, c
             }
         }
         for (const trigger of scripted.triggerDefinitions) {
-            if (trigger.constantResult === undefined)
+            const evaluated = trigger.conditionExpression === undefined
+                ? undefined
+                : evaluateGuiCondition(trigger.conditionExpression, conditionScenario, subject, conditionDefinitions);
+            const result = evaluated === undefined
+                ? trigger.constantResult
+                : evaluated.state === 'unresolved'
+                    ? undefined
+                    : evaluated.state === 'true';
+            if (result === undefined) {
+                addFidelity(fidelity, 'unresolved', 'scripted_gui_trigger', `${trigger.name} requires more scenario facts.`);
                 continue;
+            }
             if (trigger.name.endsWith('_visible'))
-                constantElementVisibility[trigger.elementName] = trigger.constantResult;
+                constantElementVisibility[trigger.elementName] = result;
             if (trigger.name.endsWith('_click_enabled'))
-                constantElementEnabled[trigger.elementName] = trigger.constantResult;
-            addFidelity(fidelity, 'modelled', 'scripted_gui_constant_trigger', `${trigger.name} resolves to ${trigger.constantResult ? 'yes' : 'no'}.`);
+                constantElementEnabled[trigger.elementName] = result;
+            addFidelity(fidelity, 'modelled', trigger.constantResult === undefined
+                ? 'scripted_gui_trigger'
+                : 'scripted_gui_constant_trigger', `${trigger.name} resolves to ${result ? 'yes' : 'no'}.`);
         }
         addFidelity(fidelity, 'modelled', 'scripted_gui_context', `${scripted.name} uses ${scripted.contextType ?? '<unspecified>'} context.`);
         if (scripted.visibleExpression === undefined)
             continue;
+        const evaluatedVisibility = evaluateGuiCondition(scripted.visibleExpression, conditionScenario, subject, conditionDefinitions);
         const mockedVisibility = scenario.visibility[scripted.name] ??
             scenario.values[`${scripted.name}.visible`] ??
-            scenario.scriptedGui[`${scripted.name}.visible`];
+            scenario.scriptedGui[`${scripted.name}.visible`] ??
+            (evaluatedVisibility.state === 'unresolved'
+                ? undefined
+                : evaluatedVisibility.state === 'true');
         if (typeof mockedVisibility === 'boolean') {
             if (scripted.windowName !== undefined)
                 scriptedWindowVisibility[scripted.windowName] =
                     (scriptedWindowVisibility[scripted.windowName] ?? true) && mockedVisibility;
-            addFidelity(fidelity, 'modelled', 'scripted_gui_visibility', `${scripted.name}.visible was supplied by the preview scenario.`);
+            addFidelity(fidelity, 'modelled', 'scripted_gui_visibility', `${scripted.name}.visible resolves to ${mockedVisibility}.`);
         }
         else {
-            addFidelity(fidelity, 'unresolved', 'scripted_gui_visibility', `${scripted.name}.visible requires an explicit scenario mock; the offline renderer leaves it visible.`);
+            addFidelity(fidelity, 'unresolved', 'scripted_gui_visibility', `${scripted.name}.visible requires more scenario facts; its source visibility remains unresolved.`);
         }
     }
     const layoutScenario = {
@@ -1276,6 +2074,7 @@ export async function buildGuiScene(graph, scannedFiles, windowName, scenario, c
         localisation,
         output,
         instancesById: new Map(),
+        geometry: new Map(),
         work: new GuiSceneWorkBudget(),
         baseScale,
     };
@@ -1308,7 +2107,7 @@ export async function buildGuiScene(graph, scannedFiles, windowName, scenario, c
             if (parentScene === undefined || attachedDefinition === undefined)
                 continue;
             if (!context.instancesById.has(attachedDefinition.id)) {
-                await layoutElement(attachedDefinition, parentScene.unclippedRect, parentScene.unclippedRect, parentScene.scale, parentScene.depth + 1, context, '', undefined, undefined, parentScene.id, 'upper_left', parentScene.visible);
+                await layoutElement(attachedDefinition, parentScene.unclippedRect, parentScene.unclippedRect, parentScene.scale, parentScene.depth + 1, context, '', undefined, undefined, parentScene.id, 'upper_left', context.geometry.get(parentScene.id).appearanceVisible, [...context.geometry.get(parentScene.id).clipChain, parentScene.unclippedRect]);
                 addFidelity(fidelity, 'modelled', 'parent_scripted_gui_attachment', `${scripted.windowName} is attached to ${parentWindowName} through ${scripted.parentScriptedGui}.`, attachedDefinition);
             }
             pendingAttached.splice(index, 1);
@@ -1324,8 +2123,40 @@ export async function buildGuiScene(graph, scannedFiles, windowName, scenario, c
             ...(scripted.location === undefined ? {} : { location: scripted.location }),
         });
     }
+    refreshSceneClips(context);
     output.sort((left, right) => left.zIndex - right.zIndex || compareCodeUnits(left.id, right.id));
-    const bounds = unionRects(output.filter(({ visible }) => visible).map(({ unclippedRect }) => unclippedRect));
+    const bounds = unionRects(output.flatMap((element) => {
+        if (!element.visible)
+            return [];
+        const painted = element.sprite === undefined && element.progressColours === undefined ? [] : [element.rect];
+        const text = element.text;
+        if (text !== undefined && text.text.length > 0) {
+            const rect = element.unclippedRect;
+            let textRect = {
+                x: rect.x +
+                    (text.horizontalAlignment === 'center'
+                        ? (rect.width - text.measuredWidth) / 2
+                        : text.horizontalAlignment === 'right'
+                            ? rect.width - text.measuredWidth
+                            : 0),
+                y: rect.y +
+                    (text.verticalAlignment === 'center'
+                        ? (rect.height - text.measuredHeight) / 2
+                        : text.verticalAlignment === 'bottom'
+                            ? rect.height - text.measuredHeight
+                            : 0),
+                width: text.measuredWidth,
+                height: text.measuredHeight,
+            };
+            if (text.fixedSize)
+                textRect = rectIntersection(textRect, rect);
+            if (textRect !== undefined && element.clipRect !== undefined)
+                textRect = rectIntersection(textRect, element.clipRect);
+            if (textRect !== undefined)
+                painted.push(textRect);
+        }
+        return painted;
+    }));
     return {
         windowName,
         scenario,