bruce-cesium 7.5.7 → 7.5.9

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import * as Cesium from 'cesium';
-import { Cartographic, ShaderSource, Cartesian3, Math as Math$1, Ellipsoid, Transforms, Matrix4, Geometry, GeometryAttribute, ComponentDatatype, PrimitiveType, BoundingSphere, GeometryPipeline, Cartesian2, Cartesian4, sampleTerrain, Texture, PixelFormat, Sampler, TextureWrap, TextureMinificationFilter, TextureMagnificationFilter, VertexArray, BufferUsage, ShaderProgram, RenderState, BlendingState, DrawCommand, Pass, Entity, ConstantPositionProperty, HeightReference, Color, DistanceDisplayCondition, ColorMaterialProperty, JulianDate, Quaternion, HeadingPitchRoll, ClassificationType, ArcType, CornerType, ShadowMode, ConstantProperty, CallbackProperty, Primitive, Cesium3DTileFeature, HorizontalOrigin, VerticalOrigin, ImageMaterialProperty, SceneTransforms, PolygonHierarchy, PolylineGraphics, Rectangle, ColorBlendMode, Model, FeatureDetection, SceneMode, NearFarScalar, Matrix3, KmlDataSource, GeoJsonDataSource, Cesium3DTileStyle, HeadingPitchRange, Ion, IonResource, Cesium3DTileColorBlendMode, Cesium3DTileset, Intersect, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, IonImageryProvider, createWorldImagery, createWorldImageryAsync, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, CesiumTerrainProvider, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, PolygonPipeline, EllipsoidGeodesic, sampleTerrainMostDetailed, defined, CesiumInspector, ClockRange, DynamicEnvironmentMapManager, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, CustomDataSource, Fullscreen, CzmlDataSource } from 'cesium';
-import { Cartes, LRUCache, ProjectViewTile, ENVIRONMENT, Calculator, Carto, Entity as Entity$1, EntityTag, EntityType, Geometry as Geometry$1, ObjectUtils, Style, Api, ClientFile, ClientFileValueMap, Color as Color$1, MenuItem, ProjectView, ProjectViewBookmark, Tileset, ZoomControl, BruceEvent, EntityCoords, Bounds, EntityLod, UrlUtils, DataLab, AccountConcept, DelayQueue, BruceApi, EntityRelation, RecordChangeFeed, EntitySource, Camera, ProgramKey, ProjectViewLegacyTile, Account, AccountLimits, Session, ProjectViewBookmarkGroup, EntityAttachment, EntityAttachmentType, EntityAttribute, MathUtils, EntityRelationType, EntityHistoricData } from 'bruce-models';
+import { Cartographic, ShaderSource, Cartesian3, Math as Math$1, Ellipsoid, Transforms, Matrix4, Geometry, GeometryAttribute, ComponentDatatype, PrimitiveType, BoundingSphere, GeometryPipeline, Cartesian2, Cartesian4, sampleTerrain, Texture, PixelFormat, Sampler, TextureWrap, TextureMinificationFilter, TextureMagnificationFilter, PixelDatatype, VertexArray, BufferUsage, ShaderProgram, RenderState, BlendingState, DrawCommand, Pass, Entity, ConstantPositionProperty, HeightReference, Color, DistanceDisplayCondition, ColorMaterialProperty, JulianDate, Quaternion, HeadingPitchRoll, CallbackProperty, HorizontalOrigin, VerticalOrigin, ConstantProperty, ClassificationType, Primitive, Cesium3DTileFeature, ColorBlendMode, ShadowMode, Model, ArcType, CornerType, ImageMaterialProperty, PolygonHierarchy, PolylineGraphics, Rectangle, SceneMode, IntersectionTests, Ray, SceneTransforms, FeatureDetection, Matrix3, NearFarScalar, KmlDataSource, GeoJsonDataSource, Cesium3DTileStyle, HeadingPitchRange, Ion, Cesium3DTileColorBlendMode, IonResource, Cesium3DTileset, Intersect, EllipsoidTerrainProvider, IonImageryProvider, createWorldImagery, createWorldImageryAsync, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, CesiumTerrainProvider, OrthographicFrustum, EasingFunction, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, EllipsoidGeodesic, sampleTerrainMostDetailed, defined, PolygonPipeline, GeometryInstance, CesiumInspector, ClockRange, DynamicEnvironmentMapManager, CustomDataSource, ScreenSpaceEventHandler, ScreenSpaceEventType, Fullscreen, CzmlDataSource } from 'cesium';
+import { Cartes, LRUCache, ProjectViewTile, ENVIRONMENT, Api, Calculator, ClientFile, Entity as Entity$1, EntityTag, EntityType, ObjectUtils, Style, EntityLod, UrlUtils, Carto, Geometry as Geometry$1, MenuItem, ProjectView, ProjectViewBookmark, Tileset, ZoomControl, ClientFileValueMap, Color as Color$1, Bounds, BruceEvent, EntityCoords, DataLab, DelayQueue, AccountConcept, BruceApi, RecordChangeFeed, EntityRelation, EntitySource, ProgramKey, ProjectViewLegacyTile, Camera, Account, AccountLimits, Session, ProjectViewBookmarkGroup, EntityAttachment, EntityAttachmentType, EntityAttribute, MathUtils, EntityRelationType, EntityHistoricData } from 'bruce-models';
 
 /**
  * Ensures a number is returned from a given value.
@@ -5546,6 +5546,24 @@ var EntityLabel;
     const PHOTO_CACHE_LIMIT = 500;
     // Key where the viewer keeps its downsized photos.
     const PHOTO_CACHE_KEY = "_nextspaceLabelPhotos";
+    // Clearance around a model's box, as a share of its half-extent on each axis.
+    const MODEL_BOX_PADDING = 0.02;
+    // Share of each edge drawn out from its corners while the box is idle. Hovering draws the edges whole.
+    const MODEL_BOX_BRACKET = 0.2;
+    // Under this many pixels across, a box reads as a smudge and the ring takes over.
+    const MODEL_BOX_MIN_SIZE = 24;
+    // Stem length above the box outline when the options do not set one.
+    const MODEL_BOX_STEM = 32;
+    // Gap in pixels a waiting box needs from a drawn one before it shows, so neighbours never trade places.
+    const MODEL_BOX_CLEARANCE = 12;
+    // Longest a model's label stays hidden waiting to learn whether it has a box, before showing its ring anyway.
+    const MODEL_BOX_WAIT = 1500;
+    // Half the length of edge drawn either side of where a stem lands, when brackets would leave it bare.
+    const MODEL_BOX_LANDING = 10;
+    // Past this many touching boxes one box around them all stands in for tracing their union.
+    const MODEL_BOX_UNION_LIMIT = 24;
+    // Corner pairs of each box edge. Corner i sits on the +X side when bit 0 is set, +Y for bit 1, +Z for bit 2.
+    const MODEL_BOX_EDGES = [[0, 1], [2, 3], [4, 5], [6, 7], [0, 2], [1, 3], [4, 6], [5, 7], [0, 4], [1, 5], [2, 6], [3, 7]];
     // One per tinted icon, since an SVG mask is addressed by id across the whole document.
     let tintCounter = 0;
     // Key where the label instance is stored within the cesium entity.
@@ -5553,8 +5571,6 @@ var EntityLabel;
     EntityLabel.ATTACH_KEY = "nextspace-navigator-entity-label";
     // Image types a label draws, read from the file extension. Anything else stays text.
     const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "bmp", "svg", "webp"];
-    // Shortest side a thumbnail needs before it is preferred over the full file.
-    const IMAGE_THUMBNAIL_MIN = 64;
     // Size a found image is drawn at when the group names none, so a photo never lands at its natural size.
     const IMAGE_SIZE = 24;
     function isImageFile(name) {
@@ -5583,12 +5599,24 @@ var EntityLabel;
         return (url.protocol === "http:" || url.protocol === "https:") && isImageFile(url.pathname);
     }
     EntityLabel.IsImageUrl = IsImageUrl;
+    /*
+     * Device pixels across a photo needs to stay sharp at a chip size, at rest or grown on hover.
+     */
+    function photoPixels(size, hover) {
+        // The glyph plus the chip's padding of a third either side, enlarged for a photo.
+        const diameter = (size + 2 * (size / 3)) * PHOTO_SIZE_SCALE;
+        // Picking an image can run with no window, where a screen pixel is a CSS pixel.
+        const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+        return Math.ceil(diameter * (hover ? PHOTO_HOVER_SCALE : 1) * ratio);
+    }
     /*
      * The entity's default image as InfoView picks it: its first photo attachment by display order that is an image file.
-     * Reads attachments expanded onto the entity, and prefers the smallest thumbnail that still covers an icon.
+     *
+     * Reads attachments expanded onto the entity. Prefers the smallest thumbnail sharp at the hover size, then the
+     * largest still sharp at rest, so a low resolution thumbnail is never stretched while the full file is unread.
      */
     function GetDefaultImageUrl(entity, api) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const attachments = (_b = (_a = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _a === void 0 ? void 0 : _a.Attachment) !== null && _b !== void 0 ? _b : [];
         const photo = attachments
             .filter(x => (x === null || x === void 0 ? void 0 : x["EntityAttachmentType.ID"]) == EntityAttachmentType.EType.Photo && x.ClientFile)
@@ -5597,9 +5625,12 @@ var EntityLabel;
         if (!photo) {
             return null;
         }
-        const thumbnail = ((_c = photo.ClientFile.Thumbnails) !== null && _c !== void 0 ? _c : [])
-            .filter(x => Math.min(x.Width, x.Height) >= IMAGE_THUMBNAIL_MIN && (x.URL || x["ClientFile.ID"]))
-            .sort((a, b) => a.Width * a.Height - b.Width * b.Height)[0];
+        // How far across a thumbnail is shown: a circle crops to its shortest side, a rectangle keeps its longest.
+        const across = (x) => PhotoShape(x.Width, x.Height) === "circle" ? Math.min(x.Width, x.Height) : Math.max(x.Width, x.Height);
+        const thumbnails = ((_c = photo.ClientFile.Thumbnails) !== null && _c !== void 0 ? _c : [])
+            .filter(x => x.Width > 0 && x.Height > 0 && (x.URL || x["ClientFile.ID"]))
+            .sort((a, b) => a.Width * a.Height - b.Width * b.Height);
+        const thumbnail = (_d = thumbnails.find(x => across(x) >= photoPixels(IMAGE_SIZE, true))) !== null && _d !== void 0 ? _d : thumbnails.reverse().find(x => across(x) >= photoPixels(IMAGE_SIZE, false));
         if (thumbnail) {
             return thumbnail.URL || ClientFile.GetUrl({ fileId: thumbnail["ClientFile.ID"], api, viaCdn: true });
         }
@@ -6111,6 +6142,7 @@ var EntityLabel;
             // Participants whose failure has been logged, so a label that throws every frame logs once.
             this.failed = new WeakSet();
             this.placementMemory = new PlacementMemory();
+            this.modelBoxes = new ModelBoxes();
             this.forwardingWheel = false;
             this.pendingDrag = null;
             // Null outside a 3D view.
@@ -6349,6 +6381,12 @@ var EntityLabel;
                     x: (pointer.x - rect.left) * this.viewer.canvas.clientWidth / rect.width,
                     y: (pointer.y - rect.top) * this.viewer.canvas.clientHeight / rect.height
                 } : undefined;
+            try {
+                this.modelBoxes.Resolve(this.viewer, this.pointer);
+            }
+            catch (e) {
+                console.error("EntityLabel: model boxes failed to resolve.", e);
+            }
             // This runs inside Cesium's frame, where one throwing label would stop rendering for the whole scene.
             const projected = new Map();
             for (const participant of this.participants) {
@@ -6370,6 +6408,12 @@ var EntityLabel;
                     this.logFailure(participant, e);
                 }
             }
+            try {
+                this.modelBoxes.Draw(this.viewer, this.element, this.coordinates);
+            }
+            catch (e) {
+                console.error("EntityLabel: model boxes failed to draw.", e);
+            }
         }
         logFailure(participant, error) {
             if (this.failed.has(participant)) {
@@ -6380,6 +6424,728 @@ var EntityLabel;
         }
     }
     let nextLabelId = 0;
+    /*
+     * The record's oriented box in the same Z-up local space as GeometryPivot, or null when it has none.
+     */
+    function ReadOrientedBox(entity) {
+        var _a, _b;
+        const box = (_a = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _a === void 0 ? void 0 : _a.GeometryOrientedBox;
+        const vector = (value) => (value === null || value === void 0 ? void 0 : value.length) === 3 && value.every((item) => Number.isFinite(+item)) ? value.map(Number) : null;
+        const centre = vector(box === null || box === void 0 ? void 0 : box.Centre), half = vector(box === null || box === void 0 ? void 0 : box.HalfExtents);
+        const axes = ((_b = box === null || box === void 0 ? void 0 : box.Axes) === null || _b === void 0 ? void 0 : _b.length) === 3 ? box.Axes.map(vector) : null;
+        return centre && half && (axes === null || axes === void 0 ? void 0 : axes.every(Boolean)) ? { centre, axes, half } : null;
+    }
+    EntityLabel.ReadOrientedBox = ReadOrientedBox;
+    /*
+     * The eight padded world corners of an assembly Entity's geometry box, or null when the record cannot give one.
+     *
+     * GeometryPivotExtents are Z-up half-extents about GeometryPivot, and the placement is the one the API uses to put
+     * Bruce.Location at the pivot: ENU(root) * UCS translation * UCS rotation * AssemblyWorldPosition.
+     */
+    function GetModelBox(entity, shape) {
+        var _a, _b, _c;
+        const bruce = entity === null || entity === void 0 ? void 0 : entity.Bruce;
+        const half = (_b = (_a = bruce === null || bruce === void 0 ? void 0 : bruce.GeometryPivotExtents) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, Number);
+        const matrix = bruce === null || bruce === void 0 ? void 0 : bruce.AssemblyWorldPosition;
+        const root = bruce === null || bruce === void 0 ? void 0 : bruce.AssemblyRootLocation;
+        if ((half === null || half === void 0 ? void 0 : half.length) !== 3 || !half.every(value => Number.isFinite(value) && value >= 0) || Math.max(...half) < 0.01) {
+            return null;
+        }
+        if ((matrix === null || matrix === void 0 ? void 0 : matrix.length) !== 4 || !matrix.every(row => (row === null || row === void 0 ? void 0 : row.length) === 4) || !Number.isFinite(+(root === null || root === void 0 ? void 0 : root.latitude)) || !Number.isFinite(+(root === null || root === void 0 ? void 0 : root.longitude))) {
+            return null;
+        }
+        const pivot = ((_c = bruce.GeometryPivot) === null || _c === void 0 ? void 0 : _c.length) >= 3 ? bruce.GeometryPivot.slice(0, 3).map(Number) : [0, 0, 0];
+        // Without an oriented box the record's own extents are an axis-aligned box about the pivot.
+        const box = shape || { centre: pivot, axes: [[1, 0, 0], [0, 1, 0], [0, 0, 1]], half: half };
+        const transform = bruce.AssemblyWorldTransform;
+        const placement = Transforms.eastNorthUpToFixedFrame(Cartesian3.fromDegrees(+root.longitude, +root.latitude, EnsureNumber(root.altitude)));
+        Matrix4.multiply(placement, Matrix4.fromTranslation(new Cartesian3(EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.x), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.y), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.z))), placement);
+        Matrix4.multiply(placement, Matrix4.fromRotation(Matrix3.fromHeadingPitchRoll(HeadingPitchRoll.fromDegrees(EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.heading), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.pitch), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.roll)))), placement);
+        Matrix4.multiply(placement, new Matrix4(...matrix.flat().map(Number)), placement);
+        // Pad thin axes by a share of the longest one, so a flat part still gets a visible gap.
+        const longest = Math.max(...box.half);
+        const reach = box.half.map(value => value + Math.max(value, longest * 0.25) * MODEL_BOX_PADDING);
+        const corners = [];
+        for (let i = 0; i < 8; i++) {
+            const signs = [i & 1 ? 1 : -1, i & 2 ? 1 : -1, i & 4 ? 1 : -1];
+            const local = new Cartesian3(...[0, 1, 2].map(k => box.centre[k] +
+                signs[0] * reach[0] * box.axes[0][k] + signs[1] * reach[1] * box.axes[1][k] + signs[2] * reach[2] * box.axes[2][k]));
+            const corner = Matrix4.multiplyByPoint(placement, local, new Cartesian3());
+            if (![corner.x, corner.y, corner.z].every(Number.isFinite)) {
+                return null;
+            }
+            corners.push(corner);
+        }
+        return corners;
+    }
+    EntityLabel.GetModelBox = GetModelBox;
+    const vAdd = (a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+    const vSub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+    const vScale = (a, s) => [a[0] * s, a[1] * s, a[2] * s];
+    const vDot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+    const vCross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+    const vLength = (a) => Math.hypot(a[0], a[1], a[2]);
+    /*
+     * Reads a solid back from the eight corners GetModelBox gives, relative to the origin.
+     */
+    function ModelSolid(corners, origin) {
+        const local = corners.map((corner) => [corner.x - origin.x, corner.y - origin.y, corner.z - origin.z]);
+        const spans = [1, 2, 4].map(bit => vSub(local[bit], local[0]));
+        const half = spans.map(span => vLength(span) / 2);
+        return {
+            centre: vScale(vAdd(local[0], local[7]), 0.5),
+            axes: spans.map((span, k) => vScale(span, 0.5 / (half[k] || 1))),
+            half
+        };
+    }
+    EntityLabel.ModelSolid = ModelSolid;
+    function solidCorners(solid) {
+        const corners = [];
+        for (let i = 0; i < 8; i++) {
+            corners.push([0, 1, 2].reduce((point, k) => vAdd(point, vScale(solid.axes[k], solid.half[k] * (i & (1 << k) ? 1 : -1))), solid.centre));
+        }
+        return corners;
+    }
+    function solidContains(solid, point, inset = 0) {
+        const offset = vSub(point, solid.centre);
+        return solid.axes.every((axis, k) => Math.abs(vDot(offset, axis)) < solid.half[k] - inset);
+    }
+    /*
+     * Whether two solids overlap, by the separating axis test. Padding makes parts that sit against each other overlap.
+     */
+    function ModelSolidsTouch(a, b) {
+        const between = vSub(b.centre, a.centre);
+        const axes = [...a.axes, ...b.axes];
+        for (const first of a.axes) {
+            for (const second of b.axes) {
+                const axis = vCross(first, second);
+                const length = vLength(axis);
+                if (length > 1e-6)
+                    axes.push(vScale(axis, 1 / length));
+            }
+        }
+        const reach = (solid, axis) => solid.axes.reduce((sum, own, k) => sum + solid.half[k] * Math.abs(vDot(own, axis)), 0);
+        return axes.every(axis => Math.abs(vDot(between, axis)) <= reach(a, axis) + reach(b, axis));
+    }
+    EntityLabel.ModelSolidsTouch = ModelSolidsTouch;
+    /*
+     * One box around every solid, turned like the largest of them, for groups too big to trace.
+     */
+    function encloseSolids(solids) {
+        const largest = solids.reduce((best, solid) => solid.half[0] * solid.half[1] * solid.half[2] > best.half[0] * best.half[1] * best.half[2] ? solid : best);
+        const corners = solids.flatMap(solidCorners);
+        const ranges = largest.axes.map(axis => {
+            const values = corners.map(corner => vDot(corner, axis));
+            return [Math.min(...values), Math.max(...values)];
+        });
+        return {
+            centre: largest.axes.reduce((point, axis, k) => vAdd(point, vScale(axis, (ranges[k][0] + ranges[k][1]) / 2)), [0, 0, 0]),
+            axes: largest.axes,
+            half: ranges.map(([low, high]) => (high - low) / 2)
+        };
+    }
+    /*
+     * Narrows [low, high] to where a + b * t stays within -half..half.
+     */
+    function clipSlab(range, a, b, half) {
+        if (Math.abs(b) < 1e-12) {
+            if (Math.abs(a) > half)
+                range[1] = -Infinity;
+            return;
+        }
+        const first = (-half - a) / b, second = (half - a) / b;
+        range[0] = Math.max(range[0], Math.min(first, second));
+        range[1] = Math.min(range[1], Math.max(first, second));
+    }
+    /*
+     * The edges of the union of the solids: where its surface folds, leaving out seams across flat shared faces.
+     */
+    function ModelBoxOutline(solids) {
+        const span = Math.max(...solids.map(solid => vLength(solid.half)));
+        const thinnest = Math.min(...solids.flatMap(solid => solid.half));
+        const radius = Math.max(1e-6, Math.min(thinnest * 0.05, span * 1e-3));
+        const tolerance = Math.max(1, span) * 1e-6;
+        const candidates = [];
+        for (const solid of solids) {
+            const corners = solidCorners(solid);
+            for (const [a, b] of MODEL_BOX_EDGES)
+                candidates.push([corners[a], corners[b]]);
+        }
+        const faces = (solid) => [0, 1, 2].flatMap(k => [1, -1].map(sign => ({ solid, k, normal: vScale(solid.axes[k], sign) })));
+        for (let i = 0; i < solids.length; i++) {
+            for (let j = i + 1; j < solids.length; j++) {
+                if (!ModelSolidsTouch(solids[i], solids[j])) {
+                    continue;
+                }
+                for (const first of faces(solids[i])) {
+                    for (const second of faces(solids[j])) {
+                        const direction = vCross(first.normal, second.normal);
+                        const sine = vLength(direction);
+                        // Faces this close to parallel meet along edges the box edges already give.
+                        if (sine < 0.05) {
+                            continue;
+                        }
+                        const d1 = vDot(first.normal, first.solid.centre) + first.solid.half[first.k];
+                        const d2 = vDot(second.normal, second.solid.centre) + second.solid.half[second.k];
+                        const cosine = vDot(first.normal, second.normal);
+                        const base = vScale(vAdd(vScale(first.normal, d1 - d2 * cosine), vScale(second.normal, d2 - d1 * cosine)), 1 / (sine * sine));
+                        const unit = vScale(direction, 1 / sine);
+                        const range = [-Infinity, Infinity];
+                        for (const face of [first, second]) {
+                            const offset = vSub(base, face.solid.centre);
+                            for (let m = 0; m < 3; m++) {
+                                if (m !== face.k)
+                                    clipSlab(range, vDot(offset, face.solid.axes[m]), vDot(unit, face.solid.axes[m]), face.solid.half[m]);
+                            }
+                        }
+                        if (range[1] - range[0] > tolerance) {
+                            candidates.push([vAdd(base, vScale(unit, range[0])), vAdd(base, vScale(unit, range[1]))]);
+                        }
+                    }
+                }
+            }
+        }
+        const inside = (point) => solids.some(solid => solidContains(solid, point));
+        /*
+         * Whether the union folds along a direction at a point, from which way round it the inside lies.
+         */
+        const folds = (point, along) => {
+            const first = vCross(along, Math.abs(along[0]) < 0.9 ? [1, 0, 0] : [0, 1, 0]);
+            const e1 = vScale(first, 1 / vLength(first));
+            const e2 = vCross(along, e1);
+            const samples = [];
+            for (let i = 0; i < 16; i++) {
+                // Offset from the axes so no sample lands exactly on a face through the point.
+                const angle = (i + 0.37) * Math.PI / 8;
+                samples.push(inside(vAdd(point, vAdd(vScale(e1, Math.cos(angle) * radius), vScale(e2, Math.sin(angle) * radius)))));
+            }
+            const filled = samples.filter(Boolean).length;
+            const changes = samples.filter((sample, i) => sample !== samples[(i + 1) % 16]).length;
+            return filled > 0 && filled < 16 && !(filled === 8 && changes === 2);
+        };
+        const lines = [];
+        for (const [start, end] of candidates) {
+            const delta = vSub(end, start);
+            const length = vLength(delta);
+            if (length < tolerance) {
+                continue;
+            }
+            const along = vScale(delta, 1 / length);
+            const cuts = [0, 1];
+            for (const solid of solids) {
+                const offset = vSub(start, solid.centre);
+                solid.axes.forEach((axis, k) => {
+                    const rate = vDot(delta, axis);
+                    if (Math.abs(rate) < 1e-12)
+                        return;
+                    for (const bound of [-solid.half[k], solid.half[k]]) {
+                        const t = (bound - vDot(offset, axis)) / rate;
+                        if (t > 0 && t < 1)
+                            cuts.push(t);
+                    }
+                });
+            }
+            cuts.sort((a, b) => a - b);
+            for (let i = 0; i + 1 < cuts.length; i++) {
+                if ((cuts[i + 1] - cuts[i]) * length < tolerance || !folds(vAdd(start, vScale(delta, (cuts[i] + cuts[i + 1]) / 2)), along)) {
+                    continue;
+                }
+                // Merged by line, so a shared edge draws once and a run cut by other boxes is one stroke.
+                const from = vAdd(start, vScale(delta, cuts[i])), to = vAdd(start, vScale(delta, cuts[i + 1]));
+                let line = lines.find(item => vLength(vCross(item.direction, along)) < 1e-6 && vLength(vCross(vSub(from, item.origin), item.direction)) < tolerance);
+                if (!line) {
+                    line = { origin: from, direction: along, spans: [] };
+                    lines.push(line);
+                }
+                const a = vDot(vSub(from, line.origin), line.direction), b = vDot(vSub(to, line.origin), line.direction);
+                line.spans.push([Math.min(a, b), Math.max(a, b)]);
+            }
+        }
+        const outline = [];
+        for (const line of lines) {
+            line.spans.sort((a, b) => a[0] - b[0]);
+            let current = line.spans[0];
+            for (const next of [...line.spans.slice(1), null]) {
+                if (next && next[0] <= current[1] + tolerance) {
+                    current = [current[0], Math.max(current[1], next[1])];
+                    continue;
+                }
+                outline.push([vAdd(line.origin, vScale(line.direction, current[0])), vAdd(line.origin, vScale(line.direction, current[1]))]);
+                current = next;
+            }
+        }
+        return outline;
+    }
+    EntityLabel.ModelBoxOutline = ModelBoxOutline;
+    /*
+     * Whether the sight line from the eye to a point passes through any solid before reaching it.
+     */
+    function solidsHide(solids, eye, point, inset) {
+        const ray = vSub(point, eye);
+        const length = vLength(ray);
+        // Stop just short of the point so the face it lies on does not count against it.
+        const reach = Math.max(0, 1 - inset * 100 / (length || 1));
+        return solids.some(solid => {
+            const offset = vSub(eye, solid.centre);
+            const range = [0, reach];
+            solid.axes.forEach((axis, k) => clipSlab(range, vDot(offset, axis), vDot(ray, axis), solid.half[k] - inset));
+            return range[0] < range[1];
+        });
+    }
+    /*
+     * Window positions of a box's corners, or null when one is behind the camera and the box would draw inside out.
+     */
+    function projectCorners(viewer, corners) {
+        const camera = viewer.camera;
+        const cameraPosition = camera.positionWC || camera.position;
+        const direction = camera.directionWC || camera.direction;
+        const transforms = SceneTransforms;
+        const projectPosition = transforms.wgs84ToWindowCoordinates || transforms.worldToWindowCoordinates;
+        const points = [];
+        const relative = new Cartesian3();
+        for (const corner of corners) {
+            if (Cartesian3.dot(Cartesian3.subtract(corner, cameraPosition, relative), direction) <= 0) {
+                return null;
+            }
+            const point = projectPosition(viewer.scene, corner);
+            if (!Number.isFinite(point === null || point === void 0 ? void 0 : point.x) || !Number.isFinite(point === null || point === void 0 ? void 0 : point.y)) {
+                return null;
+            }
+            points.push({ x: point.x, y: point.y });
+        }
+        return points;
+    }
+    /*
+     * Whether two convex outlines come within a margin of each other, by the separating axis test.
+     */
+    function HullsNear(a, b, margin) {
+        for (const hull of [a, b]) {
+            for (let i = 0; i < hull.length; i++) {
+                const from = hull[i], to = hull[(i + 1) % hull.length];
+                const length = Math.hypot(to.x - from.x, to.y - from.y);
+                if (length < 1e-9) {
+                    continue;
+                }
+                const normal = { x: (from.y - to.y) / length, y: (to.x - from.x) / length };
+                const project = (points) => points.map(point => point.x * normal.x + point.y * normal.y);
+                const first = project(a), second = project(b);
+                if (Math.max(Math.min(...second) - Math.max(...first), Math.min(...first) - Math.max(...second)) >= margin) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    EntityLabel.HullsNear = HullsNear;
+    /*
+     * Decides which labels' model boxes are drawn and how, so a multi-selection does not stack box over box.
+     */
+    class ModelBoxes {
+        constructor() {
+            // Whether a box competes for space comes only from inputs (camera distance, hover, the pointer), never from
+            // how its label was laid out, so an animation moving a label cannot feed back into which boxes show.
+            this.entries = new Map();
+            this.groups = null;
+            // The hovered Entity. Its box is drawn on its own and whole, ahead of every other box.
+            this.hovered = null;
+            this.outlines = new Map();
+            this.hulls = new Map();
+            this.frames = new Map();
+            this.drawn = [];
+            // When each label's box started showing; the longer it has shown, the stronger its claim on the space.
+            this.since = new Map();
+            this.requests = new Map();
+            this.looks = new Map();
+            this.memberLooks = new Map();
+        }
+        Set(id, corners, entityId, inputs) {
+            const current = this.entries.get(id);
+            // A label rebuilt over the same box keeps its place and how far it has animated.
+            if (corners && (current === null || current === void 0 ? void 0 : current.corners) === corners && current.entityId === entityId) {
+                Object.assign(current, inputs);
+                return;
+            }
+            if (!corners && !current) {
+                return;
+            }
+            if (corners) {
+                this.entries.set(id, { ...inputs, corners, entityId, active: false, wanted: false });
+            }
+            else
+                this.entries.delete(id);
+            this.since.delete(id);
+            this.groups = null;
+            for (const [key, group] of this.outlines) {
+                if (group.members.includes(id))
+                    this.outlines.delete(key);
+            }
+        }
+        /*
+         * The box drawn for a label this frame, or undefined when it has none or lost its place.
+         */
+        Frame(id) {
+            return this.frames.get(id);
+        }
+        /*
+         * The label's own box on screen whether or not it is drawn, so hovering the model can ask for it.
+         */
+        Hull(id) {
+            return this.hulls.get(id);
+        }
+        Request(id, request) {
+            this.requests.set(id, request);
+        }
+        group() {
+            const ids = Array.from(this.entries.keys()).filter(id => this.entries.get(id).wanted).sort();
+            if (!ids.length) {
+                return [];
+            }
+            const origin = this.entries.get(ids[0]).corners[0];
+            const solids = new Map(ids.map(id => [id, ModelSolid(this.entries.get(id).corners, origin)]));
+            const parent = new Map(ids.map(id => [id, id]));
+            const root = (id) => parent.get(id) === id ? id : root(parent.get(id));
+            for (let i = 0; i < ids.length; i++) {
+                const a = solids.get(ids[i]);
+                for (let j = i + 1; j < ids.length; j++) {
+                    const b = solids.get(ids[j]);
+                    if ((this.entries.get(ids[i]).entityId === this.hovered) !== (this.entries.get(ids[j]).entityId === this.hovered)) {
+                        continue;
+                    }
+                    // Cheap sphere check first; most pairs in a scene are nowhere near each other.
+                    if (vLength(vSub(a.centre, b.centre)) > vLength(a.half) + vLength(b.half) || !ModelSolidsTouch(a, b)) {
+                        continue;
+                    }
+                    parent.set(root(ids[j]), root(ids[i]));
+                }
+            }
+            const members = new Map();
+            for (const id of ids) {
+                const key = root(id);
+                if (!members.has(key))
+                    members.set(key, []);
+                members.get(key).push(id);
+            }
+            const groups = Array.from(members.values()).map(list => {
+                const key = list.join("|");
+                let group = this.outlines.get(key);
+                if (!group) {
+                    const groupOrigin = this.entries.get(list[0]).corners[0];
+                    const parts = list.map(id => ModelSolid(this.entries.get(id).corners, groupOrigin));
+                    const solidsShown = parts.length > MODEL_BOX_UNION_LIMIT ? [encloseSolids(parts)] : parts;
+                    group = { key, members: list, hovered: false, origin: groupOrigin, solids: solidsShown, outline: ModelBoxOutline(solidsShown) };
+                }
+                group.hovered = this.entries.get(list[0]).entityId === this.hovered;
+                return group;
+            });
+            // Kept across hover changes, so pulling a part out and putting it back does not trace the union again.
+            const kept = Array.from(this.outlines.values()).filter(group => !groups.includes(group)).slice(-8);
+            this.outlines = new Map([...kept, ...groups].map(group => [group.key, group]));
+            return groups;
+        }
+        /*
+         * Projects every box for this frame and settles which outlines are drawn, before labels place their stems.
+         */
+        Resolve(viewer, pointer) {
+            var _a, _b, _c, _d;
+            this.frames.clear();
+            this.hulls.clear();
+            this.drawn = [];
+            const points = new Map();
+            for (const [id, entry] of this.entries) {
+                const projected = projectCorners(viewer, entry.corners);
+                if (projected) {
+                    points.set(id, projected);
+                    this.hulls.set(id, convexHull(projected));
+                }
+            }
+            // The application's hover, which is what its temporary label shows, decides first. Without one the
+            // pointer does: the part it is on holds until it leaves, else the smallest box under it wins.
+            const under = Array.from(this.hulls.entries()).filter(([, hull]) => pointer && hullContains(hull, pointer));
+            let hovered = (_b = (_a = Array.from(this.entries.values()).find(entry => { var _a; return (_a = entry.hovered) === null || _a === void 0 ? void 0 : _a.call(entry); })) === null || _a === void 0 ? void 0 : _a.entityId) !== null && _b !== void 0 ? _b : (under.some(([id]) => this.entries.get(id).entityId === this.hovered) ? this.hovered : null);
+            if (!hovered && under.length) {
+                hovered = this.entries.get(under.map(([id, hull]) => ({ id, area: hullArea(hull) })).sort((a, b) => a.area - b.area || a.id.localeCompare(b.id))[0].id).entityId;
+            }
+            if (hovered !== this.hovered) {
+                this.hovered = hovered;
+                this.groups = null;
+            }
+            for (const [id, entry] of this.entries) {
+                const hull = this.hulls.get(id);
+                entry.active = Boolean(((_c = entry.near) === null || _c === void 0 ? void 0 : _c.call(entry)) || entry.entityId === hovered || (pointer && hull && hullContains(hull, pointer)));
+                // A box keeps its place while it fades out, and leaves the competition once it has.
+                const wanted = entry.active || ((_d = this.memberLooks.get(id)) === null || _d === void 0 ? void 0 : _d.shown) > 0.01;
+                if (wanted !== entry.wanted) {
+                    entry.wanted = wanted;
+                    this.groups = null;
+                }
+            }
+            if (!this.groups) {
+                this.groups = this.group();
+            }
+            const canvas = viewer.canvas;
+            const candidates = [];
+            for (const group of this.groups) {
+                if (!group.members.every(id => points.has(id))) {
+                    continue;
+                }
+                const all = group.members.flatMap(id => points.get(id));
+                const xs = all.map(point => point.x), ys = all.map(point => point.y);
+                const width = Math.max(...xs) - Math.min(...xs), height = Math.max(...ys) - Math.min(...ys);
+                if (Math.max(width, height) < MODEL_BOX_MIN_SIZE || width > canvas.clientWidth * 2 || height > canvas.clientHeight * 2) {
+                    continue;
+                }
+                const since = Math.min(...group.members.map(id => { var _a; return (_a = this.since.get(id)) !== null && _a !== void 0 ? _a : Infinity; }));
+                const outline = convexHull(all);
+                candidates.push({ group, outline, selected: group.members.some(id => { var _a, _b; return (_b = (_a = this.entries.get(id)).selected) === null || _b === void 0 ? void 0 : _b.call(_a); }), since, area: hullArea(outline) });
+            }
+            // Between boxes appearing together the larger on screen goes first, as the one the view is about.
+            // What the user points at now outranks what they selected before it.
+            candidates.sort((a, b) => (Number(b.group.hovered) - Number(a.group.hovered) ||
+                Number(b.selected) - Number(a.selected) ||
+                a.since - b.since ||
+                b.area - a.area ||
+                a.group.key.localeCompare(b.group.key)));
+            const transforms = SceneTransforms;
+            const projectPosition = transforms.wgs84ToWindowCoordinates || transforms.worldToWindowCoordinates;
+            const scratch = new Cartesian3();
+            const now = Date.now();
+            const shown = new Set();
+            for (const candidate of candidates) {
+                // A showing box holds its place until truly overlapped; a waiting one needs clear space.
+                const margin = Number.isFinite(candidate.since) ? 0 : MODEL_BOX_CLEARANCE;
+                if (this.drawn.some(other => HullsNear(candidate.outline, other.outline, margin))) {
+                    continue;
+                }
+                const { origin } = candidate.group;
+                const toScreen = (point) => {
+                    const projected = projectPosition(viewer.scene, Cartesian3.fromElements(origin.x + point[0], origin.y + point[1], origin.z + point[2], scratch));
+                    return { x: projected.x, y: projected.y };
+                };
+                const edges = candidate.group.outline.map(([start, end]) => [toScreen(start), toScreen(end)]);
+                const drawn = { ...candidate, edges, landings: [] };
+                this.drawn.push(drawn);
+                for (const id of candidate.group.members) {
+                    shown.add(id);
+                    if (!this.since.has(id))
+                        this.since.set(id, now);
+                    const own = points.get(id);
+                    // The silhouette's top is the highest drawn edge at that x, so the stem always meets a line.
+                    const x = (Math.min(...own.map(point => point.x)) + Math.max(...own.map(point => point.x))) / 2;
+                    let anchor = null, edge = -1;
+                    edges.forEach(([a, b], i) => {
+                        if (x < Math.min(a.x, b.x) || x > Math.max(a.x, b.x) || Math.abs(b.x - a.x) < 1e-6) {
+                            return;
+                        }
+                        const y = a.y + (b.y - a.y) * (x - a.x) / (b.x - a.x);
+                        if (!anchor || y < anchor.y) {
+                            anchor = { x, y };
+                            edge = i;
+                        }
+                    });
+                    anchor = anchor || { x, y: hullTop(candidate.outline, x) };
+                    if (edge >= 0)
+                        drawn.landings.push({ edge, point: anchor });
+                    this.frames.set(id, { points: own, hull: this.hulls.get(id), outline: candidate.outline, anchor, group: candidate.group.key });
+                }
+            }
+            for (const id of Array.from(this.since.keys())) {
+                if (!shown.has(id))
+                    this.since.delete(id);
+            }
+            this.requests.clear();
+        }
+        /*
+         * Draws each settled outline as corner brackets that grow into whole edges, back edges dashed.
+         */
+        Draw(viewer, element, coordinates) {
+            var _a, _b, _c;
+            const now = Date.now();
+            const looks = new Map();
+            const memberLooks = new Map();
+            let animating = false;
+            for (const { group } of this.drawn) {
+                const requests = group.members.map(id => this.requests.get(id)).filter(Boolean);
+                if (!requests.length) {
+                    // Its labels are hidden this frame, perhaps off screen; it keeps its look so it does not regrow.
+                    const kept = this.looks.get(group.key);
+                    if (kept) {
+                        looks.set(group.key, kept);
+                        group.members.forEach(id => memberLooks.set(id, kept));
+                        if (kept.svg)
+                            kept.svg.style.display = "none";
+                    }
+                    continue;
+                }
+                // A group that gained or lost a member carries on from where its members' outline was.
+                const previous = group.members.map(id => this.memberLooks.get(id)).filter(Boolean);
+                const look = (_a = this.looks.get(group.key)) !== null && _a !== void 0 ? _a : {
+                    shown: Math.max(0, ...previous.map(item => item.shown)), whole: Math.max(0, ...previous.map(item => item.whole)),
+                    grow: Math.max(0, ...previous.map(item => item.grow)), time: now, svg: (_b = previous.find(item => item.svg)) === null || _b === void 0 ? void 0 : _b.svg
+                };
+                const elapsed = Math.min(32, Math.max(0, now - look.time));
+                const duration = Math.min(...requests.map(request => request.duration));
+                const blend = duration > 0 ? 1 - Math.exp(-elapsed / (duration / 3)) : 1;
+                const approach = (value, to) => Math.abs(value - to) < 0.001 ? to : value + (to - value) * blend;
+                const shownTarget = group.members.some(id => { var _a; return (_a = this.entries.get(id)) === null || _a === void 0 ? void 0 : _a.active; }) ? 1 : 0;
+                const wholeTarget = group.hovered || requests.some(request => request.whole) ? 1 : 0;
+                look.shown = approach(look.shown, shownTarget);
+                look.whole = approach(look.whole, wholeTarget);
+                look.grow = approach(look.grow, 1);
+                look.time = now;
+                animating = animating || look.shown !== shownTarget || look.whole !== wholeTarget || look.grow !== 1;
+                looks.set(group.key, look);
+                group.members.forEach(id => memberLooks.set(id, look));
+                if (look.svg && this.looks.get(group.key) !== look) {
+                    // Inherited from an earlier group; claim it so that group's cleanup leaves it alone.
+                    for (const [key, other] of this.looks) {
+                        if (other.svg === look.svg && key !== group.key)
+                            other.svg = undefined;
+                    }
+                }
+                this.drawGroup(viewer, element, coordinates, this.drawn.find(item => item.group === group), look, requests);
+            }
+            for (const [key, look] of this.looks) {
+                if (!looks.has(key))
+                    (_c = look.svg) === null || _c === void 0 ? void 0 : _c.remove();
+            }
+            this.looks = looks;
+            this.memberLooks = memberLooks;
+            if (animating) {
+                viewer.scene.requestRender();
+            }
+        }
+        drawGroup(viewer, element, coordinates, drawn, look, requests) {
+            const group = drawn.group;
+            let svg = look.svg;
+            if (!svg) {
+                const ns = "http://www.w3.org/2000/svg";
+                svg = document.createElementNS(ns, "svg");
+                svg.setAttribute("class", "entity-label-model-box");
+                svg.setAttribute("aria-hidden", "true");
+                svg.style.cssText = "position:absolute;width:1px;height:1px;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));";
+                for (const edges of ["back", "front"]) {
+                    const path = document.createElementNS(ns, "path");
+                    path.setAttribute("fill", "none");
+                    path.setAttribute("stroke-linecap", "round");
+                    path.dataset.edges = edges;
+                    svg.appendChild(path);
+                }
+                look.svg = svg;
+            }
+            if (svg.parentElement !== element) {
+                element.appendChild(svg);
+            }
+            svg.style.display = "";
+            const transforms = SceneTransforms;
+            const projectPosition = transforms.wgs84ToWindowCoordinates || transforms.worldToWindowCoordinates;
+            const origin = group.origin;
+            const scratch = new Cartesian3();
+            // A new box grows out of the ring it replaces.
+            const grown = look.grow * look.grow * (3 - 2 * look.grow);
+            const from = requests[0].from;
+            const at = (point) => `${(from.x + (point.x - from.x) * grown) * coordinates.scaleX} ${(from.y + (point.y - from.y) * grown) * coordinates.scaleY}`;
+            const toScreen = (point) => {
+                const projected = projectPosition(viewer.scene, Cartesian3.fromElements(origin.x + point[0], origin.y + point[1], origin.z + point[2], scratch));
+                return at(projected);
+            };
+            const camera = viewer.camera.positionWC || viewer.camera.position;
+            const eye = [camera.x - origin.x, camera.y - origin.y, camera.z - origin.z];
+            const span = Math.max(...group.solids.map(solid => vLength(solid.half)));
+            const inset = Math.max(1, span) * 1e-6;
+            const fraction = MODEL_BOX_BRACKET + (0.5 - MODEL_BOX_BRACKET) * look.whole;
+            const parts = fraction >= 0.499 ? [[0, 1]] : [[0, fraction], [1 - fraction, 1]];
+            const paths = { front: "", back: "" };
+            for (const [start, end] of group.outline) {
+                const delta = vSub(end, start);
+                // Sample visibility along the edge, since another member can hide part of it.
+                const steps = group.solids.length > 1 ? Math.min(24, Math.max(2, Math.ceil(vLength(delta) / span * 12))) : 1;
+                const visible = [];
+                for (let i = 0; i < steps; i++) {
+                    visible.push(!solidsHide(group.solids, eye, vAdd(start, vScale(delta, (i + 0.5) / steps)), inset));
+                }
+                for (const [from, to] of parts) {
+                    let runStart = from;
+                    for (let i = Math.floor(from * steps); i < steps && i / steps < to; i++) {
+                        const runEnd = Math.min(to, (i + 1) / steps);
+                        if (runEnd < to && visible[i + 1] === visible[i]) {
+                            continue;
+                        }
+                        paths[visible[i] ? "front" : "back"] += `M${toScreen(vAdd(start, vScale(delta, runStart)))}L${toScreen(vAdd(start, vScale(delta, runEnd)))}`;
+                        runStart = runEnd;
+                    }
+                }
+            }
+            // Each stem lands on an edge, which brackets may leave bare, so a short piece of it is drawn there.
+            if (fraction < 0.499) {
+                for (const { edge, point } of drawn.landings) {
+                    const [a, b] = drawn.edges[edge];
+                    const length = Math.hypot(b.x - a.x, b.y - a.y);
+                    const reach = Math.min(MODEL_BOX_LANDING, length / 2);
+                    const toward = (sign) => {
+                        const along = Math.max(0, Math.min(length, Math.hypot(point.x - a.x, point.y - a.y) + sign * reach));
+                        return { x: a.x + (b.x - a.x) * along / length, y: a.y + (b.y - a.y) * along / length };
+                    };
+                    paths.front += `M${at(toward(-1))}L${at(toward(1))}`;
+                }
+            }
+            svg.style.left = `${coordinates.x}px`;
+            svg.style.top = `${coordinates.y}px`;
+            svg.style.opacity = String(Math.max(...requests.map(request => request.opacity)) * look.shown * Math.min(1, look.grow * 2));
+            svg.style.zIndex = String(Math.max(...requests.map(request => request.zIndex)));
+            const color = requests[0].color;
+            for (const path of Array.from(svg.children)) {
+                const front = path.dataset.edges === "front";
+                path.setAttribute("d", paths[front ? "front" : "back"]);
+                path.setAttribute("stroke", color);
+                path.setAttribute("stroke-width", front ? "1.5" : "1");
+                path.setAttribute("stroke-opacity", front ? "1" : "0.35");
+                path.setAttribute("stroke-dasharray", front ? "" : "3 3");
+            }
+        }
+    }
+    EntityLabel.ModelBoxes = ModelBoxes;
+    /*
+     * Andrew's monotone chain, counter-clockwise in screen space.
+     */
+    function convexHull(points) {
+        const sorted = [...points].sort((a, b) => a.x - b.x || a.y - b.y);
+        const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+        const build = (list) => {
+            const chain = [];
+            for (const point of list) {
+                while (chain.length >= 2 && cross(chain[chain.length - 2], chain[chain.length - 1], point) <= 0)
+                    chain.pop();
+                chain.push(point);
+            }
+            chain.pop();
+            return chain;
+        };
+        return [...build(sorted), ...build(sorted.reverse())];
+    }
+    /*
+     * Where the top of a convex outline crosses a vertical line, so a stem leaves the box without jumping between corners.
+     */
+    function hullTop(hull, x) {
+        let top = Infinity;
+        for (let i = 0; i < hull.length; i++) {
+            const a = hull[i];
+            const b = hull[(i + 1) % hull.length];
+            if (x < Math.min(a.x, b.x) || x > Math.max(a.x, b.x)) {
+                continue;
+            }
+            top = Math.min(top, a.x === b.x ? Math.min(a.y, b.y) : a.y + (b.y - a.y) * (x - a.x) / (b.x - a.x));
+        }
+        return top;
+    }
+    function hullArea(hull) {
+        return Math.abs(hull.reduce((sum, point, i) => sum + point.x * hull[(i + 1) % hull.length].y - hull[(i + 1) % hull.length].x * point.y, 0)) / 2;
+    }
+    function hullContains(hull, point) {
+        return hull.length >= 3 && hull.every((a, i) => {
+            const b = hull[(i + 1) % hull.length];
+            return (b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x) >= 0;
+        });
+    }
     class Label {
         get HasText() { return this.options.presentation !== "icon"; }
         SetHoverVisible(visible) {
@@ -6434,6 +7200,11 @@ var EntityLabel;
             this.Transient = false;
             this.hoverFade = { from: 0, to: 1, start: Date.now() };
             this.cursorMotion = { amount: 0, from: 0, target: 0, start: 0, position: undefined };
+            // How far the stem is from the ring onto a model box, and the offset it eases out after changing outline.
+            // The record's box for the Entity this label is on: undefined corners while reading, null when it has none.
+            this.modelBox = null;
+            this.boxMorph = { value: 0, from: 0, target: 0, start: 0, anchor: undefined, group: undefined,
+                shift: { x: 0, y: 0, start: 0 } };
             // Counter to help differentiate between createLabel calls.
             this.counter = 0;
             // Whether this label has asked its group for a default image, which it does once on screen.
@@ -6519,11 +7290,13 @@ var EntityLabel;
          * Recalling will be ignored.
          */
         Dispose() {
+            var _a;
             if (this.disposed) {
                 return;
             }
             this.disposed = true;
             this.removeLabel();
+            (_a = layers.get(this.viewer)) === null || _a === void 0 ? void 0 : _a.modelBoxes.Set(this.id, null, null, null);
             clearTimeout(this.loadTimeout);
             this.loadTimeout = null;
         }
@@ -6538,14 +7311,15 @@ var EntityLabel;
             this.groupId = groupId;
             this.additionalTexts = this.options.text != null ? [] : null;
             this.photo = null;
-            this.createLabel();
+            // A label given its position keeps it, or the rebuild goes looking for the entity's own.
+            this.createLabel(this.prePositioned ? this._pos3d : undefined);
         }
         /**
          * Creates cesium entity for the label if one does not exist.
          * @param starterPos3d optional position to create label at. Ignored for billboard labels.
          */
         async createLabel(starterPos3d) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
             // The old label stays until its replacement is built, so a rebuild never blinks while a location loads.
             let pos3d = starterPos3d ? starterPos3d.clone() : null;
             const counter = ++this.counter;
@@ -6831,6 +7605,9 @@ var EntityLabel;
             if (this.disposed || this.counter != counter) {
                 return;
             }
+            // Leave the layer only once rejoined, so a rebuild never empties it and closes it along with its boxes.
+            const leaveLayer = this.renderRemoval;
+            this.renderRemoval = null;
             this.removeLabel();
             // A found photo draws as if configured, without changing the options clustering compares and measures.
             const photo = HasIcon(this.options) ? null : (_j = this.options.photo) !== null && _j !== void 0 ? _j : this.photo;
@@ -7127,9 +7904,65 @@ var EntityLabel;
                     radius: Math.max(width, height) / 2
                 };
             };
+            // Only CAD tilesets and model Entities are assembly parts with a geometry box; anything else stays a point.
+            const boxable = Boolean(normalLeader && ((_r = this.rego) === null || _r === void 0 ? void 0 : _r.entityId) && ((visual instanceof Cesium3DTileFeature && this.rego.tilesetType === Tileset.EType.Cad) ||
+                (visual instanceof Entity && Boolean(visual.model))));
+            if (!boxable || ((_s = this.modelBox) === null || _s === void 0 ? void 0 : _s.entityId) !== ((_t = this.rego) === null || _t === void 0 ? void 0 : _t.entityId)) {
+                layer.modelBoxes.Set(this.id, null, null, null);
+                this.modelBox = null;
+            }
+            // Read once per Entity, so a label rebuilt for its loaded text keeps its box instead of waiting again.
+            if (boxable && !this.modelBox) {
+                const box = { entityId: this.rego.entityId, corners: undefined, load: null };
+                box.load = this.loadModelBox().catch(() => null).then(corners => box.corners = corners || null);
+                this.modelBox = box;
+            }
+            // A model's label stays hidden until its box is known, so a ring never shows only to turn into a box.
+            const hydrated = (_y = (_x = (_u = this.visualRegister) === null || _u === void 0 ? void 0 : _u.GetLabelGroupFor((_v = this.rego) === null || _v === void 0 ? void 0 : _v.entityId, (_w = this.rego) === null || _w === void 0 ? void 0 : _w.menuItemId)) === null || _x === void 0 ? void 0 : _x.item) === null || _y === void 0 ? void 0 : _y.entity;
+            let boxPending = boxable && this.modelBox.corners === undefined && Boolean(((_z = hydrated === null || hydrated === void 0 ? void 0 : hydrated.Bruce) === null || _z === void 0 ? void 0 : _z.GeometryPivotExtents) || this.api);
+            const boxPendingUntil = Date.now() + MODEL_BOX_WAIT;
+            // Whether this label has been on screen yet; a box found before then is drawn in place, not eased into.
+            let shownOnce = false;
+            if (boxable) {
+                const found = this._pos3d;
+                const settle = () => {
+                    if (boxPending && !this.disposed && this.counter === counter) {
+                        boxPending = false;
+                        this.viewer.scene.requestRender();
+                    }
+                };
+                // Past the wait a slow record no longer holds the label back; a box that comes later eases in.
+                setTimeout(settle, MODEL_BOX_WAIT);
+                this.modelBox.load.then(corners => {
+                    if (!corners || this.disposed || this.counter !== counter) {
+                        return;
+                    }
+                    // A record that disagrees with where the model was found describes another placement, such as a moved tileset.
+                    const centre = Cartesian3.midpoint(corners[0], corners[7], new Cartesian3());
+                    if (Cartesian3.distance(centre, found) > Cartesian3.distance(corners[0], corners[7]) * 0.75 + 2) {
+                        return;
+                    }
+                    const rego = this.rego;
+                    // Let go a little further out than it is taken, so a camera resting at the limit does not flip it.
+                    let near = false;
+                    layer.modelBoxes.Set(this.id, corners, rego.entityId, {
+                        selected: () => { var _a, _b; return Boolean((_b = (_a = this.visualRegister) === null || _a === void 0 ? void 0 : _a.GetState({ entityId: rego.entityId, menuItemId: rego.menuItemId })) === null || _b === void 0 ? void 0 : _b.selected); },
+                        hovered: () => { var _a, _b; return Boolean((_b = (_a = this.visualRegister) === null || _a === void 0 ? void 0 : _a.IsLabelHovered) === null || _b === void 0 ? void 0 : _b.call(_a, rego.entityId, rego.menuItemId)); },
+                        near: () => {
+                            var _a, _b;
+                            const ring = this.options.anchorRing;
+                            const camera = this.viewer.camera.positionWC || this.viewer.camera.position;
+                            const limit = ((_a = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _a !== void 0 ? _a : 100) * (near ? 1.1 : 1);
+                            near = (ring === null || ring === void 0 ? void 0 : ring.enabled) !== false && Number.isFinite((_b = this._pos3d) === null || _b === void 0 ? void 0 : _b.x) && Cartesian3.distance(camera, this._pos3d) <= limit;
+                            return near || ((ring === null || ring === void 0 ? void 0 : ring.enabled) !== false && Boolean(this.cursorMotion.target));
+                        }
+                    });
+                    this.viewer.scene.requestRender();
+                }).finally(settle);
+            }
             let cursorMotion = this.cursorMotion;
             const project = () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
                 if (this.disposed || !this.viewer || this.viewer.isDestroyed() || ((_a = this.visible) === null || _a === void 0 ? void 0 : _a.call(this)) === false ||
                     (presentation === "icon" && this.options.iconScale === 0)) {
                     return null;
@@ -7167,18 +8000,29 @@ var EntityLabel;
                 if (!Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.x) || !Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.y)) {
                     return null;
                 }
+                const boxed = layer.modelBoxes.Frame(this.id);
+                const waiting = boxPending && Date.now() < boxPendingUntil;
+                const boxBlend = this.morphToBox(boxed, shownOnce ? (_f = (_e = this.options.anchorRing) === null || _e === void 0 ? void 0 : _e.transitionDuration) !== null && _f !== void 0 ? _f : 200 : 0);
+                // Eased between the ring and where the stem meets the box, so gaining or losing a box never jumps.
+                const boxTarget = this.boxMorph.anchor;
+                const ringPoint = { x: anchor.x + pixelOffset.x, y: anchor.y + pixelOffset.y };
+                const boxAnchor = boxBlend > 0 && boxTarget ? {
+                    x: ringPoint.x + (boxTarget.x - ringPoint.x) * boxBlend,
+                    y: ringPoint.y + (boxTarget.y - ringPoint.y) * boxBlend
+                } : undefined;
+                const start = boxAnchor || anchor;
                 const onScreen = anchor.x >= 0 && anchor.y >= 0 && anchor.x < this.viewer.canvas.clientWidth && anchor.y < this.viewer.canvas.clientHeight;
-                if (leader && !onScreen)
+                if (leader && (start.x < 0 || start.y < 0 || start.x >= this.viewer.canvas.clientWidth || start.y >= this.viewer.canvas.clientHeight))
                     return null;
                 if (onScreen && !this.imageAsked && this.groupId && !HasIcon(this.options) && !this.options.photo) {
                     this.imageAsked = true;
-                    (_e = this.visualRegister) === null || _e === void 0 ? void 0 : _e.RequestLabelImage((_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId);
+                    (_g = this.visualRegister) === null || _g === void 0 ? void 0 : _g.RequestLabelImage((_h = this.rego) === null || _h === void 0 ? void 0 : _h.entityId);
                 }
                 const transientPivot = (this.Transient && !this.Persistent ?
-                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_g = this.visualRegister) === null || _g === void 0 ? void 0 : _g.GetLabelHoverPosition((_h = this.rego) === null || _h === void 0 ? void 0 : _h.entityId, (_j = this.rego) === null || _j === void 0 ? void 0 : _j.menuItemId)) : undefined);
+                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_j = this.visualRegister) === null || _j === void 0 ? void 0 : _j.GetLabelHoverPosition((_k = this.rego) === null || _k === void 0 ? void 0 : _k.entityId, (_l = this.rego) === null || _l === void 0 ? void 0 : _l.menuItemId)) : undefined);
                 const hover = (presentation !== "icon" ?
                     (this.Transient && !this.Persistent && this.hoverFade.to === 0 ? this.retainedHoverPosition :
-                        (_k = this.visualRegister) === null || _k === void 0 ? void 0 : _k.GetLabelHoverPosition((_l = this.rego) === null || _l === void 0 ? void 0 : _l.entityId, (_m = this.rego) === null || _m === void 0 ? void 0 : _m.menuItemId)) : undefined);
+                        (_m = this.visualRegister) === null || _m === void 0 ? void 0 : _m.GetLabelHoverPosition((_o = this.rego) === null || _o === void 0 ? void 0 : _o.entityId, (_p = this.rego) === null || _p === void 0 ? void 0 : _p.menuItemId)) : undefined);
                 const reused = !this.Transient || this.Persistent;
                 const now = Date.now();
                 const animateCursor = () => {
@@ -7202,12 +8046,14 @@ var EntityLabel;
                 const cursorAmount = cursorMotion.amount;
                 leader = normalLeader || cursorAmount > 0;
                 // An icon keeps its callout centred on the glyph rather than following the cursor across it.
-                const icon = measureIcon();
+                const icon = boxAnchor ? null : measureIcon();
                 const iconRing = icon ? Math.max(ICON_RING_MIN, icon.radius + ICON_RING_PADDING) : 0;
-                const pivot = icon ? undefined : transientPivot;
-                let x = ((_o = pivot === null || pivot === void 0 ? void 0 : pivot.x) !== null && _o !== void 0 ? _o : anchor.x) + (icon || pixelOffset).x;
-                let y = ((_p = pivot === null || pivot === void 0 ? void 0 : pivot.y) !== null && _p !== void 0 ? _p : anchor.y) + (icon || pixelOffset).y;
-                if (cursorAmount > 0 && !icon) {
+                // A boxed model is pinned the same way, with its stem leaving the top of the box outline.
+                const pinned = Boolean(icon || boxAnchor);
+                const pivot = pinned ? undefined : transientPivot;
+                let x = boxAnchor ? boxAnchor.x : ((_q = pivot === null || pivot === void 0 ? void 0 : pivot.x) !== null && _q !== void 0 ? _q : anchor.x) + (icon || pixelOffset).x;
+                let y = boxAnchor ? boxAnchor.y : ((_r = pivot === null || pivot === void 0 ? void 0 : pivot.y) !== null && _r !== void 0 ? _r : anchor.y) + (icon || pixelOffset).y;
+                if (cursorAmount > 0 && !pinned) {
                     // A leader-less label starts centred on its anchor; preserve that box as it lifts away.
                     if (!normalLeader) {
                         x -= ele.offsetWidth / layer.coordinates.scaleX / 2;
@@ -7242,6 +8088,9 @@ var EntityLabel;
                         if (visual instanceof Entity && (visual.polygon || visual.polyline))
                             leaderLength /= 3;
                     }
+                    if (boxAnchor && this.options.leaderLength == null) {
+                        leaderLength += (MODEL_BOX_STEM - leaderLength) * boxBlend;
+                    }
                     if (cursorAmount > 0) {
                         leaderLength += (96 - leaderLength) * cursorAmount;
                     }
@@ -7249,7 +8098,7 @@ var EntityLabel;
                     leaderLength += iconRing;
                     y = anchorY - leaderLength;
                 }
-                else if (hover && !reused && !icon) {
+                else if (hover && !reused && !pinned) {
                     x = hover.x + pixelOffset.x;
                     y = hover.y + pixelOffset.y - 24;
                 }
@@ -7258,7 +8107,7 @@ var EntityLabel;
                 const width = ele.offsetWidth / coordinates.scaleX;
                 const height = ele.offsetHeight / coordinates.scaleY;
                 let clusterBounds;
-                if ((_q = this.options.cluster) === null || _q === void 0 ? void 0 : _q.enabled) {
+                if ((_s = this.options.cluster) === null || _s === void 0 ? void 0 : _s.enabled) {
                     const textWidth = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetWidth) || 0;
                     const textHeight = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetHeight) || 0;
                     // A photo is never part of the footprint, so its arrival cannot change which cluster a label joins.
@@ -7292,7 +8141,7 @@ var EntityLabel;
                 if (!leader && (bounds.x + bounds.width < 0 || bounds.y + bounds.height < 0 || bounds.x > this.viewer.canvas.clientWidth || bounds.y > this.viewer.canvas.clientHeight)) {
                     return null;
                 }
-                const state = (_r = this.visualRegister) === null || _r === void 0 ? void 0 : _r.GetState({ entityId: (_s = this.rego) === null || _s === void 0 ? void 0 : _s.entityId, menuItemId: (_t = this.rego) === null || _t === void 0 ? void 0 : _t.menuItemId });
+                const state = (_t = this.visualRegister) === null || _t === void 0 ? void 0 : _t.GetState({ entityId: (_u = this.rego) === null || _u === void 0 ? void 0 : _u.entityId, menuItemId: (_v = this.rego) === null || _v === void 0 ? void 0 : _v.menuItemId });
                 const opacity = this.prePositioned || hoverOnly || MAX_DISTANCE === Infinity ? 1 : 1 - distance / MAX_DISTANCE;
                 return {
                     canFlip: leader && presentation !== "icon", hasLeader: leader,
@@ -7300,24 +8149,25 @@ var EntityLabel;
                     transient: this.Transient || Boolean(hover) || cursorAmount > 0,
                     extendedGeometry: visual instanceof Entity && Boolean(visual.polygon || visual.polyline || visual.corridor),
                     viewportWidth: this.viewer.canvas.clientWidth,
-                    id: this.id, entityKey: ((_u = this.rego) === null || _u === void 0 ? void 0 : _u.entityId) ? JSON.stringify([this.rego.entityId, this.rego.menuItemId || "", this.Transient && !this.Persistent ? "hover" : ""]) : undefined,
-                    entityId: (_v = this.rego) === null || _v === void 0 ? void 0 : _v.entityId, group: this.groupId, x, y, width, height, anchorX, anchorY, depth, leaderLength, leaderRun, leaderSide, distance,
-                    iconRadius: icon === null || icon === void 0 ? void 0 : icon.radius,
+                    id: this.id, entityKey: ((_w = this.rego) === null || _w === void 0 ? void 0 : _w.entityId) ? JSON.stringify([this.rego.entityId, this.rego.menuItemId || "", this.Transient && !this.Persistent ? "hover" : ""]) : undefined,
+                    entityId: (_x = this.rego) === null || _x === void 0 ? void 0 : _x.entityId, group: this.groupId, x, y, width, height, anchorX, anchorY, depth, leaderLength, leaderRun, leaderSide, distance,
+                    iconRadius: icon === null || icon === void 0 ? void 0 : icon.radius, modelBox: boxed || undefined, boxBlend,
                     // Priority shows the hovered member individually without dragging its cluster along.
-                    opacity, priority: hover || cursorAmount > 0 || (state === null || state === void 0 ? void 0 : state.highlighted) ? 1 : 0, options: this.options, text: originalText, clusterBounds
+                    opacity: waiting ? 0 : opacity, priority: hover || cursorAmount > 0 || (state === null || state === void 0 ? void 0 : state.highlighted) ? 1 : 0, options: this.options, text: originalText, clusterBounds
                 };
             };
             let displacement = { x: 0, y: 0 };
             let nudge = { x: 0, y: 0, fromX: 0, fromY: 0, targetX: 0, targetY: 0, start: 0 };
             const apply = (placement) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
                 const show = (placement === null || placement === void 0 ? void 0 : placement.visible) && placement.opacity > 0;
+                shownOnce = shownOnce || Boolean(show);
                 clickEntityIds = show ? placement.entityIds : [];
                 ele.style.visibility = show ? "visible" : "hidden";
                 lineEle.style.display = show && leader ? "block" : "none";
                 if (runEle)
                     runEle.style.display = show && leader ? "block" : "none";
-                this.anchor.style.display = show && leader ? "block" : "none";
+                this.anchor.style.display = show && leader && !(((_a = placement.frame) === null || _a === void 0 ? void 0 : _a.boxBlend) >= 1) ? "block" : "none";
                 if (!show) {
                     displacement = { x: 0, y: 0 };
                     nudge = { x: 0, y: 0, fromX: 0, fromY: 0, targetX: 0, targetY: 0, start: 0 };
@@ -7329,7 +8179,7 @@ var EntityLabel;
                     return;
                 }
                 // A label standing for a cluster shows its summary only; its photo is put away and never fetched.
-                const solo = !((_a = placement.members) === null || _a === void 0 ? void 0 : _a.length);
+                const solo = !((_b = placement.members) === null || _b === void 0 ? void 0 : _b.length);
                 if (look.iconPhoto && iconElement && iconElement.dataset.failed !== "true") {
                     const display = solo ? "inline-flex" : "none";
                     if (iconElement.style.display !== display) {
@@ -7347,7 +8197,7 @@ var EntityLabel;
                         }
                     }, PHOTO_SHOW_DELAY);
                 }
-                const displayText = (_b = placement.text) !== null && _b !== void 0 ? _b : originalText;
+                const displayText = (_c = placement.text) !== null && _c !== void 0 ? _c : originalText;
                 if (textElement && textElement.textContent !== displayText) {
                     textElement.textContent = displayText;
                     // Measure the summary's footprint next frame without replacing each member's source text.
@@ -7371,9 +8221,9 @@ var EntityLabel;
                 const stack = JSON.stringify(placement.icons || []);
                 if (iconStack && stack !== displayedStack) {
                     displayedStack = stack;
-                    const looks = ((_c = placement.icons) === null || _c === void 0 ? void 0 : _c.length) ? [iconLook(this.options), ...placement.icons] : [];
+                    const looks = ((_d = placement.icons) === null || _d === void 0 ? void 0 : _d.length) ? [iconLook(this.options), ...placement.icons] : [];
                     // One small size for all, so no icon in the arrangement reads as more important than another.
-                    const size = (this.options.iconSize || 24) * ((_d = this.options.iconScale) !== null && _d !== void 0 ? _d : 1) * ICON_STACK_SCALE;
+                    const size = (this.options.iconSize || 24) * ((_e = this.options.iconScale) !== null && _e !== void 0 ? _e : 1) * ICON_STACK_SCALE;
                     const built = looks.map(look => this.buildIcon({ ...look, iconSize: size }, counter));
                     // A stack is on show already, so its photos load straight away.
                     built.forEach(({ start }) => start === null || start === void 0 ? void 0 : start());
@@ -7408,9 +8258,11 @@ var EntityLabel;
                 // Summary and badge changes must fit on their first visible frame, including after resize.
                 const ring = this.options.anchorRing;
                 const pointer = (layer.pointer || (cursorMotion.target ? cursorMotion.position : undefined) || (this.Transient && !this.Persistent ?
-                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_e = this.visualRegister) === null || _e === void 0 ? void 0 : _e.GetLabelHoverPosition((_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId, (_g = this.rego) === null || _g === void 0 ? void 0 : _g.menuItemId)) : undefined));
+                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_f = this.visualRegister) === null || _f === void 0 ? void 0 : _f.GetLabelHoverPosition((_g = this.rego) === null || _g === void 0 ? void 0 : _g.entityId, (_h = this.rego) === null || _h === void 0 ? void 0 : _h.menuItemId)) : undefined));
                 const iconRing = frame.iconRadius ? Math.max(ICON_RING_MIN, frame.iconRadius + ICON_RING_PADDING) : 0;
-                const hovered = pointer && Math.hypot(pointer.x - frame.anchorX, pointer.y - frame.anchorY) <= Math.max((_h = ring === null || ring === void 0 ? void 0 : ring.hoverDistance) !== null && _h !== void 0 ? _h : 24, iconRing);
+                const boxed = leader ? frame.modelBox : undefined;
+                const hovered = pointer && (boxed ? hullContains(boxed.hull, pointer) :
+                    Math.hypot(pointer.x - frame.anchorX, pointer.y - frame.anchorY) <= Math.max((_j = ring === null || ring === void 0 ? void 0 : ring.hoverDistance) !== null && _j !== void 0 ? _j : 24, iconRing));
                 if (look.iconPhoto && growPhoto) {
                     // A rectangle leans on the leader's side of the label.
                     if (photoShape === "rect") {
@@ -7421,15 +8273,15 @@ var EntityLabel;
                     }
                     // Grown in layout rather than scaled, so the border keeps its width, and the label, whose bottom
                     // sits on the leader, grows up and sideways without changing the leader's length.
-                    growPhoto(Boolean(hovered) && !((_j = placement.members) === null || _j === void 0 ? void 0 : _j.length));
+                    growPhoto(Boolean(hovered) && !((_k = placement.members) === null || _k === void 0 ? void 0 : _k.length));
                 }
-                const normalRadius = (!leader || (ring === null || ring === void 0 ? void 0 : ring.enabled) === false ? 0 : Math.max(frame.distance <= ((_k = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _k !== void 0 ? _k : 100) ? ((_l = ring === null || ring === void 0 ? void 0 : ring.nearRadius) !== null && _l !== void 0 ? _l : 10) : 0, hovered ? ((_m = ring === null || ring === void 0 ? void 0 : ring.hoverRadius) !== null && _m !== void 0 ? _m : (this.Transient && !this.Persistent ? 15.4 : 22)) : 0));
+                const normalRadius = (!leader || (ring === null || ring === void 0 ? void 0 : ring.enabled) === false ? 0 : Math.max(frame.distance <= ((_l = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _l !== void 0 ? _l : 100) ? ((_m = ring === null || ring === void 0 ? void 0 : ring.nearRadius) !== null && _m !== void 0 ? _m : 10) : 0, hovered ? ((_o = ring === null || ring === void 0 ? void 0 : ring.hoverRadius) !== null && _o !== void 0 ? _o : (this.Transient && !this.Persistent ? 15.4 : 22)) : 0));
                 const targetRadius = normalRadius + (15.4 - normalRadius) * cursorMotion.amount;
                 // Around a glyph the ring keeps the glyph's size and only fades its stroke in, so it never covers the icon.
                 const targetOuter = iconRing || targetRadius || 2.5;
                 const targetInner = iconRing ? (targetRadius > 0 ? iconRing - 2 : iconRing) : Math.max(0, targetRadius - 2);
                 const now = Date.now();
-                const duration = (_o = ring === null || ring === void 0 ? void 0 : ring.transitionDuration) !== null && _o !== void 0 ? _o : 200;
+                const duration = (_p = ring === null || ring === void 0 ? void 0 : ring.transitionDuration) !== null && _p !== void 0 ? _p : 200;
                 const sharedRing = this.Transient && !this.Persistent && this.hoverFade.to === 1 ? this.hoverRingState : undefined;
                 let ringAnimation = sharedRing ? sharedRing.animation : this.ringAnimation;
                 if (!ringAnimation) {
@@ -7463,7 +8315,8 @@ var EntityLabel;
                 if (sharedRing) {
                     sharedRing.animation = ringAnimation;
                 }
-                const radius = ringAnimation.inner > 0 ? ringAnimation.outer : 0;
+                const ringShare = 1 - (frame.boxBlend || 0);
+                const radius = ringShare > 0 && ringAnimation.inner > 0 ? ringAnimation.outer * ringShare : 0;
                 const stem = (leader ? (angled ? fitAngledLeader : fitLeader)(frame.anchorX, frame.anchorY, Math.max(frame.leaderLength, radius ? radius + 4 : 0), ele.offsetWidth / coordinates.scaleX, ele.offsetHeight / coordinates.scaleY, radius) : undefined);
                 const position = { x: (stem || frame).x, y: (stem || frame).y };
                 const width = ele.offsetWidth / coordinates.scaleX;
@@ -7471,19 +8324,19 @@ var EntityLabel;
                 if (leader && angled) {
                     // The declutter owns the side; the fit only says which one had the room to begin with.
                     const run = Math.max(ANGLED_LEADER_RUN, radius + 4);
-                    const side = (_q = (_p = placement.textSide) !== null && _p !== void 0 ? _p : frame.leaderSide) !== null && _q !== void 0 ? _q : "right";
+                    const side = (_r = (_q = placement.textSide) !== null && _q !== void 0 ? _q : frame.leaderSide) !== null && _r !== void 0 ? _r : "right";
                     const beside = side === "left" ? frame.anchorX - run - width : frame.anchorX + run;
                     position.x = Math.max(0, Math.min(beside, this.viewer.canvas.clientWidth - width));
                 }
                 else if (leader && placement.textSide === "left") {
                     position.x = Math.max(0, Math.min(frame.anchorX - width, this.viewer.canvas.clientWidth - width));
                 }
-                const gap = (_s = (_r = this.options.pointerAvoidance) === null || _r === void 0 ? void 0 : _r.gap) !== null && _s !== void 0 ? _s : 12;
+                const gap = (_t = (_s = this.options.pointerAvoidance) === null || _s === void 0 ? void 0 : _s.gap) !== null && _t !== void 0 ? _t : 12;
                 const containsPointer = (x, y, margin) => {
                     return pointer && pointer.x >= x - margin && pointer.x <= x + width + margin && pointer.y >= y - margin && pointer.y <= y + height + margin;
                 };
                 const passive = !selectOnClick || !this.visualRegister;
-                if (passive && ((_t = this.options.pointerAvoidance) === null || _t === void 0 ? void 0 : _t.enabled) !== false && pointer &&
+                if (passive && ((_u = this.options.pointerAvoidance) === null || _u === void 0 ? void 0 : _u.enabled) !== false && pointer &&
                     (containsPointer(position.x, position.y, gap) || containsPointer(position.x + displacement.x, position.y + displacement.y, gap))) {
                     if (containsPointer(position.x + displacement.x, position.y + displacement.y, 0)) {
                         // Choose against the original box and retain the offset until the pointer leaves both boxes.
@@ -7501,7 +8354,7 @@ var EntityLabel;
                 else {
                     displacement = { x: 0, y: 0 };
                 }
-                const nudgeDuration = (_v = (_u = this.options.pointerAvoidance) === null || _u === void 0 ? void 0 : _u.transitionDuration) !== null && _v !== void 0 ? _v : 200;
+                const nudgeDuration = (_w = (_v = this.options.pointerAvoidance) === null || _v === void 0 ? void 0 : _v.transitionDuration) !== null && _w !== void 0 ? _w : 200;
                 const animateNudge = () => {
                     const progress = now < nudge.start ? 0 : nudgeDuration > 0 ? Math.min(1, (now - nudge.start) / nudgeDuration) : 1;
                     const eased = progress * progress * (3 - 2 * progress);
@@ -7517,7 +8370,7 @@ var EntityLabel;
                         fromY: nudge.y,
                         targetX: displacement.x,
                         targetY: displacement.y,
-                        start: now + ((_x = (_w = this.options.pointerAvoidance) === null || _w === void 0 ? void 0 : _w.delay) !== null && _x !== void 0 ? _x : 180)
+                        start: now + ((_y = (_x = this.options.pointerAvoidance) === null || _x === void 0 ? void 0 : _x.delay) !== null && _y !== void 0 ? _y : 180)
                     };
                 }
                 if (animateNudge() < 1 && (nudge.fromX !== nudge.targetX || nudge.fromY !== nudge.targetY)) {
@@ -7528,10 +8381,10 @@ var EntityLabel;
                 ele.style.left = `${coordinates.x + position.x * coordinates.scaleX}px`;
                 ele.style.top = `${coordinates.y + position.y * coordinates.scaleY}px`;
                 for (const clickTarget of Array.from(content.querySelectorAll('[role="button"]'))) {
-                    clickTarget.setAttribute("aria-label", placement.members.length ? `Select ${placement.entityIds.length} entities` : `Select ${(_z = (_y = this.options.text) !== null && _y !== void 0 ? _y : text) !== null && _z !== void 0 ? _z : (_0 = this.rego) === null || _0 === void 0 ? void 0 : _0.entityId}`);
+                    clickTarget.setAttribute("aria-label", placement.members.length ? `Select ${placement.entityIds.length} entities` : `Select ${(_0 = (_z = this.options.text) !== null && _z !== void 0 ? _z : text) !== null && _0 !== void 0 ? _0 : (_1 = this.rego) === null || _1 === void 0 ? void 0 : _1.entityId}`);
                 }
                 if (leader) {
-                    const nodeRadius = ringAnimation.outer;
+                    const nodeRadius = ringAnimation.outer * (1 - (frame.boxBlend || 0));
                     const anchor = this.anchor;
                     anchor.style.left = `${coordinates.x + (frame.anchorX - nodeRadius) * coordinates.scaleX}px`;
                     anchor.style.top = `${coordinates.y + (frame.anchorY - nodeRadius) * coordinates.scaleY}px`;
@@ -7544,11 +8397,12 @@ var EntityLabel;
                     const circle = svg.firstElementChild;
                     circle.setAttribute("cx", String(nodeRadius));
                     circle.setAttribute("cy", String(nodeRadius));
-                    circle.setAttribute("r", String((nodeRadius + ringAnimation.inner) / 2));
+                    const innerRadius = ringAnimation.inner * (1 - (frame.boxBlend || 0));
+                    circle.setAttribute("r", String((nodeRadius + innerRadius) / 2));
                     circle.setAttribute("stroke", this.options.leaderColor || "rgba(255, 255, 255, 0.8)");
-                    circle.setAttribute("stroke-width", String(nodeRadius - ringAnimation.inner));
+                    circle.setAttribute("stroke-width", String(nodeRadius - innerRadius));
                     anchor.style.boxShadow = radius ? "none" : "0 0 5px rgba(0, 0, 0, 0.3)";
-                    anchor.style.opacity = String(opacity * (normalLeader ? 1 : cursorMotion.amount));
+                    anchor.style.opacity = String(opacity * (normalLeader ? 1 : cursorMotion.amount) * (1 - (frame.boxBlend || 0)));
                     anchor.style.zIndex = String(placement.zIndex);
                     // The stem starts at the rim, never across the transparent centre, even after passive displacement.
                     const straightX = Math.max(position.x, Math.min(frame.anchorX, position.x + width));
@@ -7568,13 +8422,13 @@ var EntityLabel;
                     // Keep the stem inside the 126-degree arc, away from antialiased endpoints.
                     const arcFraction = 0.35;
                     const rotationLimit = Math.PI * arcFraction - Math.PI / 30;
-                    const targetOffset = hovered ? Math.max(-rotationLimit, Math.min(rotationLimit, wrappedAngle)) : ((_1 = ringAnimation.arcOffset) !== null && _1 !== void 0 ? _1 : 0);
+                    const targetOffset = hovered ? Math.max(-rotationLimit, Math.min(rotationLimit, wrappedAngle)) : ((_2 = ringAnimation.arcOffset) !== null && _2 !== void 0 ? _2 : 0);
                     const targetOpen = cursorMotion.target || (hovered && (ring === null || ring === void 0 ? void 0 : ring.enabled) !== false && targetRadius > 0) ? 1 : 0;
-                    const elapsed = Math.min(32, Math.max(0, now - ((_2 = ringAnimation.arcTime) !== null && _2 !== void 0 ? _2 : now)));
+                    const elapsed = Math.min(32, Math.max(0, now - ((_3 = ringAnimation.arcTime) !== null && _3 !== void 0 ? _3 : now)));
                     const blend = duration > 0 ? 1 - Math.exp(-elapsed / (duration / 3)) : 1;
                     const approach = (value, target) => Math.abs(value - target) < 0.001 ? target : value + (target - value) * blend;
-                    ringAnimation.arcOffset = approach((_3 = ringAnimation.arcOffset) !== null && _3 !== void 0 ? _3 : 0, targetOffset);
-                    ringAnimation.arcOpen = approach((_4 = ringAnimation.arcOpen) !== null && _4 !== void 0 ? _4 : 0, targetOpen);
+                    ringAnimation.arcOffset = approach((_4 = ringAnimation.arcOffset) !== null && _4 !== void 0 ? _4 : 0, targetOffset);
+                    ringAnimation.arcOpen = approach((_5 = ringAnimation.arcOpen) !== null && _5 !== void 0 ? _5 : 0, targetOpen);
                     ringAnimation.arcTime = now;
                     if (ringAnimation.arcOffset !== targetOffset || ringAnimation.arcOpen !== targetOpen) {
                         this.viewer.scene.requestRender();
@@ -7600,6 +8454,12 @@ var EntityLabel;
                         element.style.zIndex = String(placement.zIndex);
                     };
                     draw(lineEle, startX, startY, endX, endY);
+                    if (layer.modelBoxes.Hull(this.id)) {
+                        layer.modelBoxes.Request(this.id, {
+                            whole: Boolean(cursorMotion.target), from: { x: frame.anchorX, y: frame.anchorY },
+                            opacity, zIndex: placement.zIndex, color: this.options.leaderColor || "rgba(255, 255, 255, 0.8)", duration
+                        });
+                    }
                     if (runEle) {
                         // Overlap the corner by the stem's own width so the elbow has no notch in it.
                         const overlap = frame.anchorX < runToX ? -1 : 1;
@@ -7612,6 +8472,7 @@ var EntityLabel;
             ele.style.display = "flex";
             ele.style.visibility = "hidden";
             this.renderRemoval = layer.Add({ project, apply });
+            leaveLayer === null || leaveLayer === void 0 ? void 0 : leaveLayer();
             // If terrain changes then we'll re-call createLabel as the position may have changed.
             let terrTimeout = null;
             this.terrChangedRemoval = this.viewer.scene.terrainProviderChanged.addEventListener(() => {
@@ -7757,7 +8618,7 @@ var EntityLabel;
             // The glyph plus the chip's padding of a third either side, enlarged for a photo.
             const diameter = (size + 2 * (size / 3)) * PHOTO_SIZE_SCALE;
             // Enough pixels to stay sharp at the hover size.
-            const pixels = Math.ceil(diameter * PHOTO_HOVER_SCALE * (window.devicePixelRatio || 1));
+            const pixels = photoPixels(size, true);
             const canvas = document.createElement("canvas");
             canvas.className = "entity-label-photo";
             canvas.style.cssText = "display:block;box-sizing:border-box;border:2px solid rgba(255,255,255,0.9);box-shadow:0 1px 3px rgba(0,0,0,0.35);";
@@ -7768,13 +8629,15 @@ var EntityLabel;
             // Resting size, set once the photo's shape is known.
             let width = 0;
             let height = 0;
+            // How far hovering grows it, which a small image limits.
+            let hoverScale = PHOTO_HOVER_SCALE;
             let grown = false;
             const grow = (on) => {
                 if (on === grown || !width) {
                     return;
                 }
                 grown = on;
-                const scale = on ? PHOTO_HOVER_SCALE : 1;
+                const scale = on ? hoverScale : 1;
                 canvas.style.width = `${width * scale}px`;
                 canvas.style.height = `${height * scale}px`;
                 this.renderFor(PHOTO_TRANSITION);
@@ -7792,11 +8655,15 @@ var EntityLabel;
                 (_a = canvas.getContext("2d")) === null || _a === void 0 ? void 0 : _a.drawImage(photo.source, 0, 0);
                 const longest = Math.max(photo.width, photo.height);
                 const circle = PhotoShape(photo.width, photo.height) === "circle";
-                width = circle ? diameter : diameter * photo.width / longest;
-                height = circle ? diameter : diameter * photo.height / longest;
+                // Shown no larger than the image has pixels for, one to a CSS pixel, and never smaller than the icon.
+                const native = circle ? Math.min(photo.width, photo.height) : longest;
+                const across = Math.min(diameter, Math.max(size, native));
+                hoverScale = Math.max(1, Math.min(PHOTO_HOVER_SCALE, native / across));
+                width = circle ? across : across * photo.width / longest;
+                height = circle ? across : across * photo.height / longest;
                 canvas.style.width = `${width}px`;
                 canvas.style.height = `${height}px`;
-                canvas.style.borderRadius = circle ? "50%" : `${diameter * PHOTO_CORNER}px`;
+                canvas.style.borderRadius = circle ? "50%" : `${across * PHOTO_CORNER}px`;
                 canvas.style.opacity = "1";
                 placePhoto === null || placePhoto === void 0 ? void 0 : placePhoto(circle ? "circle" : "rect", grow);
                 return true;
@@ -7843,6 +8710,57 @@ var EntityLabel;
             };
             step();
         }
+        /*
+         * Reads the record's geometry box, preferring an entity a label group already hydrated.
+         */
+        async loadModelBox() {
+            var _a, _b, _c, _d;
+            const known = (_c = (_b = (_a = this.visualRegister) === null || _a === void 0 ? void 0 : _a.GetLabelGroupFor(this.rego.entityId, this.rego.menuItemId)) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.entity;
+            let entity = ((_d = known === null || known === void 0 ? void 0 : known.Bruce) === null || _d === void 0 ? void 0 : _d.GeometryPivotExtents) ? known : null;
+            if (!entity && this.api) {
+                try {
+                    entity = (await Entity$1.Get({ api: this.api, entityId: this.rego.entityId, expandLocation: true, migrated: true })).entity;
+                }
+                // Expanding location fails for entities outside an assembly, which have no box to give.
+                catch {
+                    return null;
+                }
+            }
+            // A file uploaded before the API stored oriented boxes has only the record's axis-aligned extents.
+            return GetModelBox(entity, ReadOrientedBox(entity));
+        }
+        /*
+         * Eases the stem between the ring and the model box, returning how far onto the box it is this frame.
+         */
+        morphToBox(boxed, duration) {
+            const morph = this.boxMorph;
+            const now = Date.now();
+            const ease = (progress) => progress * progress * (3 - 2 * progress);
+            const progress = (start) => duration > 0 ? Math.min(1, Math.max(0, (now - start) / duration)) : 1;
+            const hadBox = morph.target === 1;
+            const target = boxed ? 1 : 0;
+            if (morph.target !== target) {
+                Object.assign(morph, { from: morph.value, target, start: now });
+            }
+            morph.value = morph.from + (morph.target - morph.from) * ease(progress(morph.start));
+            // Settled, so a later frame with a longer duration does not replay the ease.
+            if (morph.value === morph.target) {
+                morph.from = morph.target;
+            }
+            if (boxed) {
+                // Moving to another outline, such as a hovered part pulled out of its group, eases the stem across.
+                if (hadBox && morph.anchor && morph.group !== boxed.group) {
+                    morph.shift = { x: morph.anchor.x - boxed.anchor.x, y: morph.anchor.y - boxed.anchor.y, start: now };
+                }
+                morph.group = boxed.group;
+                const remaining = 1 - ease(progress(morph.shift.start));
+                morph.anchor = { x: boxed.anchor.x + morph.shift.x * remaining, y: boxed.anchor.y + morph.shift.y * remaining };
+            }
+            if (morph.value !== morph.target || (boxed && progress(morph.shift.start) < 1)) {
+                this.viewer.scene.requestRender();
+            }
+            return morph.value;
+        }
         /**
          * Removes label from the viewer and unsubscribes from events.
          */
@@ -12894,7 +13812,9 @@ var VisualsRegister;
                 entityId: params.entityId,
                 menuItemId: params.menuItemId,
                 position: params.position ? { ...params.position } : undefined,
-                createIfMissing: params.createIfMissing !== false
+                createIfMissing: params.createIfMissing !== false,
+                text: params.text,
+                pos3d: params.pos3d ? Cartesian3.clone(params.pos3d) : undefined
             };
             const doc = this.viewer.container.ownerDocument;
             // Only a label following the cursor should go when the cursor leaves the canvas.
@@ -12910,12 +13830,26 @@ var VisualsRegister;
             this.SyncLabelHover();
             this.viewer.scene.requestRender();
         }
+        /*
+         * Which Entity holds the label hover, if any, so a caller can leave another's hover alone.
+         */
+        GetLabelHoverTarget() {
+            const hover = this.labelHover;
+            return hover ? { entityId: hover.entityId, menuItemId: hover.menuItemId } : undefined;
+        }
+        /*
+         * Whether the label hover is on this Entity, with or without a cursor position.
+         */
+        IsLabelHovered(entityId, menuItemId) {
+            const hover = this.labelHover;
+            return Boolean(entityId) && (hover === null || hover === void 0 ? void 0 : hover.entityId) === entityId && (hover.menuItemId == null || hover.menuItemId === menuItemId);
+        }
         GetLabelHoverPosition(entityId, menuItemId) {
             const hover = this.labelHover;
             return (hover === null || hover === void 0 ? void 0 : hover.entityId) === entityId && (hover.menuItemId == null || hover.menuItemId === menuItemId) ? hover.position : undefined;
         }
         SyncLabelHover() {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const hover = this.labelHover;
             if (!hover || this.disposed) {
                 return;
@@ -12947,12 +13881,24 @@ var VisualsRegister;
                 this.ReleaseHoverLabel(true);
                 return;
             }
+            const hoverOptions = {
+                presentation: "text",
+                text: (_b = hover.text) !== null && _b !== void 0 ? _b : group === null || group === void 0 ? void 0 : group.options.text,
+                selectOnClick: false
+            };
             if (this.hoverLabel && !this.hoverLabel.Disposed) {
+                // Rebuilds only when the text changed, as it does when the pointer crosses a cell.
+                if (hover.pos3d && !Cartesian3.equals(hover.pos3d, this.hoverLabel.pos3d)) {
+                    this.hoverLabel.pos3d = hover.pos3d;
+                }
+                if (hover.text != null) {
+                    this.hoverLabel.Configure(hoverOptions);
+                }
                 this.hoverLabel.SetHoverVisible(true);
                 return;
             }
             // Query-only icon groups have coordinates but no registered scene visual to attach to.
-            if (!rego && group && [group.item.longitude, group.item.latitude, (_b = group.item.altitude) !== null && _b !== void 0 ? _b : 0].every(Number.isFinite)) {
+            if (!rego && group && [group.item.longitude, group.item.latitude, (_c = group.item.altitude) !== null && _c !== void 0 ? _c : 0].every(Number.isFinite)) {
                 rego = {
                     entityId: hover.entityId,
                     menuItemId: hover.menuItemId,
@@ -12974,15 +13920,12 @@ var VisualsRegister;
                 rego,
                 viewer: this.viewer,
                 visualRegister: this,
-                api: (_c = this.ApiGetters) === null || _c === void 0 ? void 0 : _c.GetBruceApi(),
+                api: (_d = this.ApiGetters) === null || _d === void 0 ? void 0 : _d.GetBruceApi(),
                 persistent: false,
                 transient: true,
                 hoverRingState: this.hoverRingState,
-                options: {
-                    presentation: "text",
-                    text: group === null || group === void 0 ? void 0 : group.options.text,
-                    selectOnClick: false
-                },
+                pos3d: hover.pos3d,
+                options: hoverOptions,
                 visible: () => {
                     var _a;
                     const current = this.GetState(hover);
@@ -45899,6 +46842,10 @@ var TextureFrameSeriesAnimator;
     TextureFrameSeriesAnimator.AppearanceSignature = AppearanceSignature;
     const MAX_COMPOSITE_TEXELS = 2048;
     const VALUE_DILATE_PASSES = 2;
+    // Decoded frame bytes kept at once. A 2048 square composite is 16 MB, so a long series cannot all stay.
+    const MAX_CACHED_FRAME_BYTES = 256 * 1024 * 1024;
+    // Fetched bytes kept for decoding again, a small fraction of what they decode to.
+    const MAX_RAW_FRAME_BYTES = 96 * 1024 * 1024;
     /*
      * Rewrites a packed 16 bit value as the 8 bit grey the colour ramps index on.
      *
@@ -45919,19 +46866,33 @@ var TextureFrameSeriesAnimator;
     /*
      * Bleeds covered values outward into uncovered texels, leaving alpha untouched.
      */
-    function dilateValues(value, width, height, passes, packed) {
+    function DilateValues(value, width, height, passes, packed) {
         const texels = width * height;
-        const filled = new Uint8Array(texels);
+        // 255 for a texel that had data to begin with, otherwise the 1 based pass that filled it, so a pass
+        // reads only texels filled before it and can work in place.
+        const stamp = new Uint8Array(texels);
         for (let p = 0; p < texels; p++) {
-            filled[p] = value[p * 4 + 3] !== 0 ? 1 : 0;
+            stamp[p] = value[p * 4 + 3] !== 0 ? 255 : 0;
         }
+        // Whether a texel or a horizontal neighbour had data, so empty space is skipped in three reads.
+        const across = new Uint8Array(texels);
         for (let pass = 0; pass < passes; pass++) {
-            const source = value.slice();
-            const wasFilled = filled.slice();
+            const current = pass + 1;
+            const had = (p) => stamp[p] !== 0 && stamp[p] !== current;
+            for (let y = 0; y < height; y++) {
+                const row = y * width;
+                for (let x = 0; x < width; x++) {
+                    const p = row + x;
+                    across[p] = (had(p) || (x > 0 && had(p - 1)) || (x + 1 < width && had(p + 1))) ? 1 : 0;
+                }
+            }
             for (let y = 0; y < height; y++) {
                 for (let x = 0; x < width; x++) {
                     const p = y * width + x;
-                    if (wasFilled[p]) {
+                    if (stamp[p] !== 0) {
+                        continue;
+                    }
+                    if (!across[p] && !(y > 0 && across[p - width]) && !(y + 1 < height && across[p + width])) {
                         continue;
                     }
                     let sum = 0;
@@ -45940,13 +46901,13 @@ var TextureFrameSeriesAnimator;
                         for (let dx = -1; dx <= 1; dx++) {
                             const nx = x + dx;
                             const ny = y + dy;
-                            if (nx < 0 || ny < 0 || nx >= width || ny >= height || !wasFilled[ny * width + nx]) {
+                            if (nx < 0 || ny < 0 || nx >= width || ny >= height || !had(ny * width + nx)) {
                                 continue;
                             }
                             const at = (ny * width + nx) * 4;
                             // Averaged as a value rather than per byte: averaging a packed low byte
                             // on its own wraps at every 256th step and speckles the bled edge.
-                            sum += packed ? source[at] * 256 + source[at + 1] : source[at];
+                            sum += packed ? value[at] * 256 + value[at + 1] : value[at];
                             hits++;
                         }
                     }
@@ -45962,18 +46923,25 @@ var TextureFrameSeriesAnimator;
                             value[p * 4 + 1] = v;
                             value[p * 4 + 2] = v;
                         }
-                        filled[p] = 1;
+                        stamp[p] = current;
                     }
                 }
             }
         }
     }
+    TextureFrameSeriesAnimator.DilateValues = DilateValues;
+    /*
+     * Bytes one cached frame holds, counting a buffer shared between colour and value once.
+     */
+    function frameBytes(pixels, value) {
+        return (pixels ? pixels.byteLength : 0) + (value && value !== pixels ? value.byteLength : 0);
+    }
     const DEFAULT_CROSSFADE_MS = 900;
     const DEFAULT_LOW_COLOR = { red: 255, green: 255, blue: 255, alpha: 0.12 };
     const DEFAULT_HIGH_COLOR = { red: 21, green: 96, blue: 196, alpha: 0.92 };
     class Animator {
         constructor(options) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             this.removeOnTick = null;
             this.removeCrossfadeTick = null;
             this.disposed = false;
@@ -46004,6 +46972,15 @@ var TextureFrameSeriesAnimator;
             this.extremesLoad = null;
             this.floorPixels = null;
             this.ceilingPixels = null;
+            // How far through the fade from the previous value frame to the presented one, 1 when settled.
+            this.fadeMix = 1;
+            // Where the current fade started from, above zero when it took over from one still running.
+            this.fadeMixStart = 0;
+            // Version the value canvas was last written at, since in value only mode it is written on demand.
+            this.valueCanvasVersion = -1;
+            this.rawBytes = 0;
+            this.cachedBytes = 0;
+            this.lastFrameBytes = 0;
             if (!options.entity.polygon) {
                 throw new Error("TextureFrameSeriesAnimator requires an entity with polygon graphics.");
             }
@@ -46051,6 +47028,9 @@ var TextureFrameSeriesAnimator;
             this.maskBaseline = (_c = options.maskBaseline) !== null && _c !== void 0 ? _c : this.tiles.some((tile) => Boolean(tile.BaselineMask));
             this.valueCanvas = this.produceValueCanvas ? document.createElement("canvas") : null;
             this.driveMaterial = options.driveMaterial !== false;
+            this.valueOnly = this.produceValueCanvas && !this.driveMaterial;
+            this.rawCache = new Array(this.frames.length).fill(null);
+            this.cacheBudget = (_d = options.cacheBytes) !== null && _d !== void 0 ? _d : MAX_CACHED_FRAME_BYTES;
             this.originalMaterial = options.entity.polygon.material;
             this.imageProperty = new CallbackProperty(() => this.pool[this.poolIdx], false);
             if (this.driveMaterial) {
@@ -46116,7 +47096,40 @@ var TextureFrameSeriesAnimator;
          * or null unless the instance was constructed with produceValueCanvas.
          */
         GetValueCanvas() {
-            return this.valueDims ? this.valueCanvas : null;
+            if (!this.valueDims) {
+                return null;
+            }
+            if (this.valueOnly && this.valueCanvasVersion !== this.presentVersion && this.displayedValuePixels) {
+                this.writeInto(this.valueCanvas, this.displayedValuePixels, this.valueDims);
+                this.valueCanvasVersion = this.presentVersion;
+            }
+            return this.valueCanvas;
+        }
+        /**
+         * The presented frame's value pixels, or null before one. Shares the cached array, so never write to it.
+         */
+        GetValueRaster() {
+            if (!this.valueDims || !this.displayedValuePixels) {
+                return null;
+            }
+            return { data: this.displayedValuePixels, width: this.valueDims.width, height: this.valueDims.height };
+        }
+        /**
+         * The two value frames being faded between and the mix, or null unless the material is not driven.
+         */
+        GetValueFade() {
+            if (!this.valueOnly || !this.valueDims || !this.displayedValuePixels) {
+                return null;
+            }
+            const previous = this.fadeFromValuePixels;
+            const from = previous && previous.length === this.displayedValuePixels.length ? previous : null;
+            return {
+                from,
+                to: this.displayedValuePixels,
+                width: this.valueDims.width,
+                height: this.valueDims.height,
+                mix: from ? this.fadeMix : 1
+            };
         }
         /**
          * Increments every time a frame is presented, so a consumer holding the value canvas can tell
@@ -46183,7 +47196,11 @@ var TextureFrameSeriesAnimator;
             if (this.currentFrameIndex < 0) {
                 return this.frameCache[0] ? -1 : 0;
             }
-            for (let d = 0; d < n; d++) {
+            // Full once another frame will not fit, so a prefetch only displaces a frame further from the
+            // playhead than itself and never trades the two ends of the window back and forth.
+            const full = this.cachedBytes + this.lastFrameBytes > this.cacheBudget;
+            const reach = full ? this.farthestCachedDistance() : n;
+            for (let d = 0; d < Math.min(n, reach); d++) {
                 const forward = this.currentFrameIndex + d;
                 if (forward < n && !this.frameCache[forward]) {
                     return forward;
@@ -46195,6 +47212,68 @@ var TextureFrameSeriesAnimator;
             }
             return -1;
         }
+        farthestCachedDistance() {
+            let farthest = 0;
+            for (let i = 0; i < this.frameCache.length; i++) {
+                if (this.frameCache[i]) {
+                    farthest = Math.max(farthest, Math.abs(i - this.currentFrameIndex));
+                }
+            }
+            return farthest;
+        }
+        /*
+         * Drops decoded frames furthest from the playhead until the cache fits its budget again.
+         */
+        evictDecoded(keep) {
+            // A tinted fade reads its target from the cache each tick, where a value fade holds the arrays.
+            const fading = !this.valueOnly && this.fadeStartMs !== null ? this.fadeToIndex : -1;
+            while (this.cachedBytes > this.cacheBudget) {
+                let victim = -1;
+                let distance = -1;
+                for (let i = 0; i < this.frameCache.length; i++) {
+                    if (!this.frameCache[i] || i === keep || i === this.currentFrameIndex || i === fading) {
+                        continue;
+                    }
+                    const d = Math.abs(i - this.currentFrameIndex);
+                    if (d > distance) {
+                        distance = d;
+                        victim = i;
+                    }
+                }
+                if (victim < 0) {
+                    return;
+                }
+                this.cachedBytes -= frameBytes(this.frameCache[victim], this.valueCache[victim]);
+                this.frameCache[victim] = null;
+                this.valueCache[victim] = null;
+            }
+        }
+        /*
+         * Keeps a frame's fetched bytes unless they are large, as a tile major archive's are.
+         */
+        keepRaw(idx, buffer, base) {
+            if (buffer.byteLength > MAX_RAW_FRAME_BYTES / 16) {
+                return;
+            }
+            this.rawCache[idx] = { buffer, base };
+            this.rawBytes += buffer.byteLength;
+            while (this.rawBytes > MAX_RAW_FRAME_BYTES) {
+                let victim = -1;
+                let distance = -1;
+                for (let i = 0; i < this.rawCache.length; i++) {
+                    const d = Math.abs(i - this.currentFrameIndex);
+                    if (this.rawCache[i] && i !== idx && d > distance) {
+                        distance = d;
+                        victim = i;
+                    }
+                }
+                if (victim < 0) {
+                    return;
+                }
+                this.rawBytes -= this.rawCache[victim].buffer.byteLength;
+                this.rawCache[victim] = null;
+            }
+        }
         pumpFetchQueue() {
             if (this.disposed || this.inFlightIndex !== -1) {
                 return;
@@ -46238,10 +47317,18 @@ var TextureFrameSeriesAnimator;
                 lo = Math.min(lo, at.ByteOffset);
                 hi = Math.max(hi, at.ByteOffset + at.ByteLength);
             }
-            const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
-            const buffer = await response.arrayBuffer();
-            if (this.disposed) {
-                return;
+            let buffer;
+            const raw = this.rawCache[idx];
+            if (raw && raw.base === lo) {
+                buffer = raw.buffer;
+            }
+            else {
+                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
+                buffer = await response.arrayBuffer();
+                if (this.disposed) {
+                    return;
+                }
+                this.keepRaw(idx, buffer, lo);
             }
             // Awaited before decoding rather than applied later, so no frame is ever cached unmasked and
             // then corrected once the mask lands.
@@ -46253,9 +47340,15 @@ var TextureFrameSeriesAnimator;
             if (this.disposed) {
                 return;
             }
+            if (this.frameCache[idx]) {
+                this.cachedBytes -= frameBytes(this.frameCache[idx], this.valueCache[idx]);
+            }
             this.frameCache[idx] = decoded.pixels;
             this.frameDims[idx] = { width: decoded.width, height: decoded.height };
             this.valueCache[idx] = decoded.valuePixels || null;
+            this.lastFrameBytes = frameBytes(decoded.pixels, decoded.valuePixels || null);
+            this.cachedBytes += this.lastFrameBytes;
+            this.evictDecoded(idx);
             if (this.shouldPresent(idx, isTarget)) {
                 this.beginCrossfadeTo(idx);
             }
@@ -46325,6 +47418,13 @@ var TextureFrameSeriesAnimator;
          */
         tint(imageData) {
             const canvas = { width: imageData.width, height: imageData.height };
+            if (this.valueOnly) {
+                // One array serves as both, since nothing will ever display the colour.
+                const values = imageData.data;
+                this.applyBaselineMask(values, undefined, canvas.width, canvas.height);
+                DilateValues(values, canvas.width, canvas.height, VALUE_DILATE_PASSES, IsPackedValue(this.metadata));
+                return { pixels: values, width: canvas.width, height: canvas.height, valuePixels: values };
+            }
             // Copied before tinting: the ramp is a lerp between two colours, so the value cannot be
             // recovered from the tinted pixels afterwards.
             const valuePixels = this.produceValueCanvas ? new Uint8ClampedArray(imageData.data) : undefined;
@@ -46345,7 +47445,7 @@ var TextureFrameSeriesAnimator;
             }
             this.applyBaselineMask(imageData.data, valuePixels, canvas.width, canvas.height);
             if (valuePixels) {
-                dilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES, IsPackedValue(this.metadata));
+                DilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES, IsPackedValue(this.metadata));
             }
             return { pixels: imageData.data, width: canvas.width, height: canvas.height, valuePixels };
         }
@@ -46603,6 +47703,10 @@ var TextureFrameSeriesAnimator;
             }
         }
         beginCrossfadeTo(idx) {
+            if (this.valueOnly) {
+                this.beginValueFadeTo(idx);
+                return;
+            }
             const to = this.frameCache[idx];
             this.fadeFromValuePixels = this.displayedValuePixels === null && this.valueCache[idx]
                 ? new Uint8ClampedArray(this.valueCache[idx].length)
@@ -46612,12 +47716,53 @@ var TextureFrameSeriesAnimator;
             this.fadeToDims = this.frameDims[idx];
             this.fadeStartMs = Now();
         }
+        /*
+         * Presents a value frame at once and leaves the fade to the consumer, which blends on the GPU.
+         */
+        beginValueFadeTo(idx) {
+            const to = this.valueCache[idx];
+            if (!to || to === this.displayedValuePixels) {
+                return;
+            }
+            // A new target mid fade keeps whichever frame is mostly on screen and carries on from the current
+            // mix, so frames landing in quick succession do not jump the sheet back.
+            const midFade = this.fadeStartMs !== null && Boolean(this.fadeFromValuePixels);
+            if (midFade && this.fadeMix < 0.5) {
+                this.fadeMixStart = this.fadeMix;
+            }
+            else {
+                this.fadeFromValuePixels = this.displayedValuePixels;
+                this.fadeMixStart = 0;
+            }
+            this.displayedValuePixels = to;
+            this.valueDims = this.frameDims[idx];
+            this.fadeToIndex = idx;
+            this.fadeMix = this.fadeFromValuePixels ? this.fadeMixStart : 1;
+            this.fadeStartMs = this.fadeFromValuePixels ? Now() : null;
+            this.presentVersion++;
+            this.requestRender();
+        }
+        requestRender() {
+            if (this.viewer && this.viewer.scene && this.viewer.scene.requestRenderMode) {
+                this.viewer.scene.requestRender();
+            }
+        }
         tickCrossfade() {
             if (this.disposed || this.fadeStartMs === null) {
                 return;
             }
             const t = Math.min(1, (Now() - this.fadeStartMs) / this.crossfadeMs);
             const eased = easeInOutQuad(t);
+            if (this.valueOnly) {
+                this.fadeMix = this.fadeMixStart + (1 - this.fadeMixStart) * eased;
+                if (t >= 1) {
+                    this.fadeStartMs = null;
+                    this.fadeFromValuePixels = null;
+                    this.fadeMix = 1;
+                }
+                this.requestRender();
+                return;
+            }
             const from = this.fadeFromPixels;
             const to = this.frameCache[this.fadeToIndex];
             const n = Math.min(from.length, to.length);
@@ -46657,9 +47802,7 @@ var TextureFrameSeriesAnimator;
                 this.valueDims = dims;
             }
             this.presentVersion++;
-            if (this.viewer && this.viewer.scene && this.viewer.scene.requestRenderMode) {
-                this.viewer.scene.requestRender();
-            }
+            this.requestRender();
         }
     }
     TextureFrameSeriesAnimator.Animator = Animator;
@@ -46682,13 +47825,15 @@ var TextureValueLabels;
     const MIN_VISIBLE_PIXELS = 60;
     const MAX_STRIDE = 512;
     const STRIDE_HYSTERESIS = 1.4;
-    const DEFAULT_MIN_SPACING_PIXELS = 78;
-    const DEFAULT_MAX_LABELS = 240;
-    const LABEL_RADIUS = 4;
-    const LABEL_FONT = "600 11px ui-monospace, SFMono-Regular, Menlo, monospace";
-    // Clear space either side of a label box, so neighbours read as separate.
-    const LABEL_GAP_PIXELS = 16;
-    const LABEL_ANCHOR_COLOR = "rgba(255,255,255,0.85)";
+    // Scene labels carry a leader and are wider than a value, so they want room and not many of them.
+    const DEFAULT_MIN_SPACING_PIXELS = 140;
+    const DEFAULT_MAX_LABELS = 60;
+    // How far past the edge of the view an anchor may sit before its label is dropped.
+    const LABEL_EDGE_MARGIN_PIXELS = 120;
+    // Distance discount for a label already up when the cap forces a choice.
+    const LABEL_KEEP_BIAS = 0.6;
+    // How long a label outlives its cell leaving the wanted set, so one back a frame later does not blink.
+    const LABEL_LINGER_MS = 300;
     // 8 rather than 5: below this a cell reads as texture rather than as a boundary, and it also
     // bounds the worst case, since a full screen of 8 px cells fits inside MAX_GRID_CELLS.
     const DEFAULT_MIN_GRID_CELL_PIXELS = 8;
@@ -46702,7 +47847,8 @@ var TextureValueLabels;
     const TILE_OUTLINE_ALPHA = 0.45;
     // Cells per grid square at the coarsest. Beyond this a tile is outlined instead.
     const MAX_GRID_STRIDE = 256;
-    const LINE_HEIGHT = 13;
+    // Times the pointer's ground hit is moved onto the sheet's own height before reading a cell.
+    const HOVER_REFINE_STEPS = 3;
     /**
      * A clip outline from a projected ring, or null when the ring cannot be drawn.
      * @param projected one entry per ring vertex, null where the vertex has no window coordinate
@@ -46796,11 +47942,25 @@ var TextureValueLabels;
             this.sourceMap = null;
             this.source = null;
             this.painted = null;
+            this.paintedRamp = null;
             this.floor = null;
             this.ceiling = null;
             this.disposed = false;
-            this.drawn = 0;
             this.stride = 0;
+            this.cellLabels = new Map();
+            this.lingerTimer = null;
+            // What the last draw was made from, so a frame that changes none of it draws nothing.
+            this.drawnView = null;
+            this.drawnInputs = [];
+            this.scratchWorld = new Cartesian3();
+            this.scratchWindow = new Cartesian2();
+            this.scratchClip = new Cartesian4();
+            // The camera's view and projection as one matrix, rebuilt per draw, or null outside 3D.
+            this.viewProjection = null;
+            this.viewProjectionScratch = new Matrix4();
+            this.hovering = false;
+            this.hoverFrame = 0;
+            this.hoverAt = null;
             this.viewer = options.viewer;
             this.extent = options.extent;
             this.settings = options.settings || {};
@@ -46810,6 +47970,9 @@ var TextureValueLabels;
             this.sourceMap = TextureFrameSeriesAnimator.SourceMap(options.metadata);
             this.tiles = options.tiles;
             this.clipRing = options.clipRing;
+            this.heightAt = options.heightAt;
+            this.heightKey = options.heightKey;
+            this.hover = options.hover;
             this.canvas = document.createElement("canvas");
             this.canvas.style.position = "absolute";
             this.canvas.style.inset = "0";
@@ -46819,12 +47982,31 @@ var TextureValueLabels;
                 parent.appendChild(this.canvas);
             }
             this.ctx = this.canvas.getContext("2d");
+            this.onPointerMove = (event) => {
+                const bounds = this.viewer.canvas.getBoundingClientRect();
+                this.hoverAt = { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
+                // At most once a frame, since a pointer reports far faster than anything is drawn.
+                if (!this.hoverFrame) {
+                    this.hoverFrame = requestAnimationFrame(() => {
+                        this.hoverFrame = 0;
+                        this.updateHover();
+                    });
+                }
+            };
+            this.onPointerLeave = () => {
+                this.hoverAt = null;
+                this.releaseHover();
+            };
+            if (this.hover && this.hover.register) {
+                this.viewer.canvas.addEventListener("pointermove", this.onPointerMove, { passive: true });
+                this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
+            }
         }
         SetExtent(extent) {
             this.extent = extent;
         }
         /**
-         * The current frame's decoded values, as the animator's value canvas already provides them.
+         * The current frame's decoded values.
          * @param source value pixels, one texel per cell
          */
         SetSource(source) {
@@ -46832,11 +48014,17 @@ var TextureValueLabels;
         }
         /**
          * The tinted pixels of the same frame, so the grid can skip cells the ramp painted nothing in.
-         * @param painted RGBA of the presented frame, or null to fall back to coverage alone
+         * @param painted RGBA of the presented frame, or null to fall back to the ramp or coverage alone
          */
         SetPainted(painted) {
             this.painted = painted;
         }
+        /**
+         * The surface's 256 step RGBA ramp, for telling whether a cell was painted without a tinted frame.
+         */
+        SetPaintedRamp(ramp) {
+            this.paintedRamp = ramp;
+        }
         /**
          * The archive's per-cell extremes, when it publishes them. Without these a label can still
          * print the current reading, just not the range behind it.
@@ -46846,21 +48034,28 @@ var TextureValueLabels;
             this.ceiling = ceiling;
         }
         GetDrawnCount() {
-            return this.drawn;
+            return this.cellLabels.size;
         }
         Clear() {
             this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-            this.drawn = 0;
+            this.drawnView = null;
         }
         Dispose() {
             this.disposed = true;
+            this.clearCellLabels();
+            this.releaseHover();
+            if (this.hoverFrame) {
+                cancelAnimationFrame(this.hoverFrame);
+                this.hoverFrame = 0;
+            }
+            this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
+            this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
             if (this.canvas.parentElement) {
                 this.canvas.parentElement.removeChild(this.canvas);
             }
         }
         /**
-         * Redraws every visible label. Cheap enough to call per rendered frame, because the cell
-         * count it considers is bounded by the view rather than by the texture.
+         * Redraws the grid and syncs the value labels, when anything they are drawn from has changed.
          */
         Render() {
             var _a, _b, _c;
@@ -46868,67 +48063,296 @@ var TextureValueLabels;
                 return;
             }
             const view = this.viewer.canvas;
+            const inputs = [this.source, this.painted, this.paintedRamp, this.floor, this.ceiling,
+                view.clientWidth, view.clientHeight, this.heightKey ? this.heightKey() : null];
+            const camera = this.viewer.camera.viewMatrix;
+            if (this.drawnView &&
+                Matrix4.equals(this.drawnView, camera) &&
+                inputs.every((input, i) => input === this.drawnInputs[i])) {
+                return;
+            }
             if (this.canvas.width !== view.clientWidth || this.canvas.height !== view.clientHeight) {
                 this.canvas.width = view.clientWidth;
                 this.canvas.height = view.clientHeight;
             }
             this.Clear();
+            this.drawnView = Matrix4.clone(camera, this.drawnView || undefined);
+            this.drawnInputs = inputs;
+            const projection = this.viewer.camera.frustum.projectionMatrix;
+            this.viewProjection = this.viewer.scene.mode === SceneMode.SCENE3D
+                ? Matrix4.multiply(projection, camera, this.viewProjectionScratch)
+                : null;
             const cols = this.source.width;
             const rows = this.source.height;
             const window = this.visibleTexels(cols, rows);
             if (!window) {
+                this.syncCellLabels([]);
                 return;
             }
-            const midCol = (window.col0 + window.col1) / 2;
-            const midRow = (window.row0 + window.row1) / 2;
-            const a = this.project(this.lonAt(midCol, cols), this.latAt(midRow, rows));
-            const b = this.project(this.lonAt(midCol + 1, cols), this.latAt(midRow + 1, rows));
+            // Measured where the view is looking, since in an oblique view up close the middle of the visible
+            // texels sits out toward the horizon, where cells are a fraction of the size.
+            const focus = this.groundAtScreenCentre();
+            const at = focus ? this.texelAt(focus.lon, focus.lat) : null;
+            const focused = (Boolean(at) &&
+                at.col >= window.col0 &&
+                at.col <= window.col1 &&
+                at.row >= window.row0 &&
+                at.row <= window.row1);
+            const midCol = focused ? at.col : (window.col0 + window.col1) / 2;
+            const midRow = focused ? at.row : (window.row0 + window.row1) / 2;
+            const a = this.projectCell(midCol, midRow, cols, rows);
+            const b = this.projectCell(midCol + 1, midRow + 1, cols, rows);
             if (!a || !b) {
+                // Left as they are, since one frame where the focus will not project is not the data leaving.
                 return;
             }
             const cellPixels = Math.min(Math.abs(b.x - a.x), Math.abs(b.y - a.y));
             // Ahead of the label threshold on purpose: a grid still reads at a cell size where a
             // number no longer fits.
             this.drawGrid(window, cols, rows, cellPixels);
-            if (cellPixels < ((_a = this.settings.minCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_CELL_PIXELS)) {
-                return;
-            }
-            const visibleWidth = cellPixels * (window.col1 - window.col0 + 1);
-            const visibleHeight = cellPixels * (window.row1 - window.row0 + 1);
-            if (Math.max(visibleWidth, visibleHeight) < MIN_VISIBLE_PIXELS) {
+            // By area rather than the shorter side, which an oblique view foreshortens to a fraction of the other.
+            const across = this.projectCell(midCol + 1, midRow, cols, rows);
+            const down = this.projectCell(midCol, midRow + 1, cols, rows);
+            const cellSize = across && down
+                ? Math.sqrt(Math.abs((across.x - a.x) * (down.y - a.y) - (across.y - a.y) * (down.x - a.x)))
+                : cellPixels;
+            const visibleWidth = cellSize * (window.col1 - window.col0 + 1);
+            const visibleHeight = cellSize * (window.row1 - window.row0 + 1);
+            if (cellSize < ((_a = this.settings.minCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_CELL_PIXELS) ||
+                Math.max(visibleWidth, visibleHeight) < MIN_VISIBLE_PIXELS) {
+                this.syncCellLabels([]);
                 return;
             }
-            const parts = this.settings.parts || ["value", "floor", "ceiling"];
-            this.ctx.font = LABEL_FONT;
-            this.ctx.textAlign = "center";
             const maxLabels = (_b = this.settings.maxLabels) !== null && _b !== void 0 ? _b : DEFAULT_MAX_LABELS;
             this.stride = ChooseLabelStride({
-                cellPixels,
+                cellPixels: cellSize,
                 visibleCols: window.col1 - window.col0 + 1,
                 visibleRows: window.row1 - window.row0 + 1,
                 maxLabels,
-                // Measured, not assumed: the spacing that keeps labels apart is whatever the widest
-                // one is, so changing what a label says cannot quietly start overlapping them.
-                minSpacingPixels: Math.max((_c = this.settings.minSpacingPixels) !== null && _c !== void 0 ? _c : DEFAULT_MIN_SPACING_PIXELS, this.widestLabel(parts)),
+                minSpacingPixels: (_c = this.settings.minSpacingPixels) !== null && _c !== void 0 ? _c : DEFAULT_MIN_SPACING_PIXELS,
                 held: this.stride
             });
-            const stride = this.stride;
+            const parts = this.settings.parts || ["value", "floor", "ceiling"];
+            this.syncCellLabels(this.labelCells(window, cols, rows, this.stride, maxLabels, parts));
+        }
+        /*
+         * One labelled cell per lattice block, keyed by the block's origin so it survives frame and stride changes.
+         */
+        labelCells(window, cols, rows, stride, max, parts) {
+            const width = this.canvas.width;
+            const height = this.canvas.height;
             const firstRow = Math.floor(window.row0 / stride) * stride;
             const firstCol = Math.floor(window.col0 / stride) * stride;
-            for (let row = firstRow; row <= window.row1 && this.drawn < maxLabels; row += stride) {
-                for (let col = firstCol; col <= window.col1 && this.drawn < maxLabels; col += stride) {
+            const candidates = [];
+            for (let row = firstRow; row <= window.row1; row += stride) {
+                for (let col = firstCol; col <= window.col1; col += stride) {
                     const found = this.readNear(col, row, cols, rows, stride);
                     if (!found) {
                         continue;
                     }
-                    const point = this.project(this.lonAt(found.col, cols), this.latAt(found.row, rows));
-                    if (!point || point.x < 0 || point.y < 0
-                        || point.x > this.canvas.width || point.y > this.canvas.height) {
+                    const point = this.projectCell(found.col, found.row, cols, rows);
+                    // A margin past the edge, so a label does not drop the moment its anchor does.
+                    const margin = LABEL_EDGE_MARGIN_PIXELS;
+                    if (!point ||
+                        point.x < -margin ||
+                        point.y < -margin ||
+                        point.x > width + margin ||
+                        point.y > height + margin) {
                         continue;
                     }
-                    this.drawLabel(point, found.reading, parts, this.cellOutline(found.col, found.row, cols, rows));
+                    const text = this.labelLines(found.reading, parts).join("\n");
+                    if (!text) {
+                        continue;
+                    }
+                    const key = col + "," + row;
+                    const distance = Math.hypot(point.x - width / 2, point.y - height / 2);
+                    candidates.push({
+                        key,
+                        lon: this.lonAt(found.col, cols),
+                        lat: this.latAt(found.row, rows),
+                        text,
+                        // Labels already up outrank new ones, so the capped set does not shuffle as the view pans.
+                        rank: this.cellLabels.has(key) ? distance * LABEL_KEEP_BIAS : distance
+                    });
+                }
+            }
+            if (candidates.length > max) {
+                candidates.sort((x, y) => x.rank - y.rank);
+                candidates.length = max;
+            }
+            return candidates;
+        }
+        /*
+         * Keeps one scene label per wanted cell, reusing those that are still wanted.
+         */
+        syncCellLabels(wanted) {
+            var _a;
+            const keep = new Set(wanted.map((w) => w.key));
+            const now = Date.now();
+            let lingering = false;
+            for (const [key, entry] of this.cellLabels) {
+                if (keep.has(key)) {
+                    entry.missingSince = undefined;
+                    continue;
+                }
+                entry.missingSince = (_a = entry.missingSince) !== null && _a !== void 0 ? _a : now;
+                if (now - entry.missingSince >= LABEL_LINGER_MS) {
+                    entry.label.Dispose();
+                    this.cellLabels.delete(key);
+                }
+                else {
+                    lingering = true;
+                }
+            }
+            // A still camera draws nothing more, so a lingering label is given its own later look.
+            if (lingering && !this.lingerTimer) {
+                this.lingerTimer = setTimeout(() => {
+                    this.lingerTimer = null;
+                    if (!this.disposed) {
+                        this.drawnView = null;
+                        this.viewer.scene.requestRender();
+                    }
+                }, LABEL_LINGER_MS);
+            }
+            for (const want of wanted) {
+                const pos3d = Cartesian3.fromDegrees(want.lon, want.lat, this.surfaceHeight(want.lon, want.lat));
+                const options = {
+                    presentation: "text",
+                    text: want.text,
+                    leader: true,
+                    selectOnClick: false
+                };
+                const existing = this.cellLabels.get(want.key);
+                if (existing) {
+                    if (!Cartesian3.equalsEpsilon(existing.label.pos3d, pos3d, 0, 0.01)) {
+                        existing.label.pos3d = pos3d;
+                    }
+                    if (existing.text !== want.text) {
+                        existing.label.Configure(options);
+                        existing.text = want.text;
+                    }
+                    continue;
+                }
+                const id = (this.hover ? this.hover.entityId : "texture-value") + "#cell:" + want.key;
+                const label = new EntityLabel.Label({
+                    rego: {
+                        entityId: id,
+                        menuItemId: this.hover ? this.hover.menuItemId : undefined,
+                        name: want.text,
+                        priority: 0,
+                        // No graphic, since a point or billboard visual pulls a label back to itself on rebuild.
+                        visual: new Entity({ position: pos3d })
+                    },
+                    viewer: this.viewer,
+                    pos3d,
+                    options,
+                    persistent: true,
+                    visible: () => !this.disposed
+                });
+                this.cellLabels.set(want.key, { label, text: want.text });
+            }
+        }
+        clearCellLabels() {
+            if (this.lingerTimer) {
+                clearTimeout(this.lingerTimer);
+                this.lingerTimer = null;
+            }
+            for (const entry of this.cellLabels.values()) {
+                entry.label.Dispose();
+            }
+            this.cellLabels.clear();
+        }
+        /*
+         * Shows the cell under the pointer through the register's hover label, unless something else holds it.
+         */
+        updateHover() {
+            const hover = this.hover;
+            if (this.disposed || !hover || !hover.register || !this.source || !this.hoverAt) {
+                return;
+            }
+            const register = hover.register;
+            const target = register.GetLabelHoverTarget();
+            const ours = Boolean(target) && register.IsLabelHovered(hover.entityId, hover.menuItemId);
+            if (target && !ours) {
+                this.hovering = false;
+                return;
+            }
+            const under = this.readingUnder(this.hoverAt.x, this.hoverAt.y);
+            if (!under) {
+                this.releaseHover();
+                return;
+            }
+            register.SetLabelHover({
+                entityId: hover.entityId,
+                menuItemId: hover.menuItemId,
+                position: { x: this.hoverAt.x, y: this.hoverAt.y },
+                text: under.text,
+                pos3d: under.pos3d
+            });
+            this.hovering = true;
+        }
+        releaseHover() {
+            const hover = this.hover;
+            if (!this.hovering || !hover || !hover.register) {
+                return;
+            }
+            this.hovering = false;
+            if (hover.register.IsLabelHovered(hover.entityId, hover.menuItemId)) {
+                hover.register.ClearLabelHover();
+            }
+        }
+        /*
+         * The text for the painted cell under a window position and its centre on the sheet, or null.
+         */
+        readingUnder(x, y) {
+            const at = this.cellUnder(x, y);
+            if (!at) {
+                return null;
+            }
+            const cols = this.source.width;
+            const found = this.readAt(at.col, at.row, cols);
+            if (!found || !this.paintedAt(at.col, at.row, cols)) {
+                return null;
+            }
+            const text = this.labelLines(found, this.settings.parts || ["value", "floor", "ceiling"]).join("\n");
+            if (!text) {
+                return null;
+            }
+            const lon = this.lonAt(at.col, cols);
+            const lat = this.latAt(at.row, this.source.height);
+            return { text, pos3d: Cartesian3.fromDegrees(lon, lat, this.surfaceHeight(lon, lat)) };
+        }
+        /*
+         * The cell under a window position, found on the sheet rather than on the ground beneath it.
+         */
+        cellUnder(x, y) {
+            const scene = this.viewer.scene;
+            const camera = this.viewer.camera;
+            const screen = new Cartesian2(x, y);
+            const ray = camera.getPickRay(screen);
+            if (!ray) {
+                return null;
+            }
+            let hit = (scene.globe && scene.globe.pick(ray, scene)) || camera.pickEllipsoid(screen);
+            if (!hit) {
+                return null;
+            }
+            const radii = Ellipsoid.WGS84.radii;
+            for (let i = 0; i < HOVER_REFINE_STEPS && this.heightAt; i++) {
+                const carto = Cartographic.fromCartesian(hit);
+                const height = this.heightAt(Math$1.toDegrees(carto.longitude), Math$1.toDegrees(carto.latitude));
+                if (height == null) {
+                    break;
+                }
+                const inflated = new Ellipsoid(radii.x + height, radii.y + height, radii.z + height);
+                const interval = IntersectionTests.rayEllipsoid(ray, inflated);
+                if (!interval) {
+                    break;
                 }
+                hit = Ray.getPoint(ray, interval.start);
             }
+            const carto = Cartographic.fromCartesian(hit);
+            return this.texelAt(Math$1.toDegrees(carto.longitude), Math$1.toDegrees(carto.latitude));
         }
         /*
          * Outlines each covered cell, from a projected lattice of its corners.
@@ -46956,44 +48380,25 @@ var TextureValueLabels;
             if (wide * high > MAX_GRID_CELLS) {
                 return;
             }
-            const lattice = new Array((wide + 1) * (high + 1));
-            for (let r = 0; r <= high; r++) {
-                for (let c = 0; c <= wide; c++) {
-                    // Corners sit half a texel out from the centres lonAt/latAt return.
-                    const lon = this.lonAt(window.col0 + c - 0.5, cols);
-                    const lat = this.latAt(window.row0 + r - 0.5, rows);
-                    lattice[r * (wide + 1) + c] = this.project(lon, lat);
-                }
-            }
-            const path = new Path2D();
-            let drew = false;
+            const lattice = new Lattice(wide + 1, high + 1, (c, r) => {
+                // Corners sit half a texel out from the centres lonAt/latAt return.
+                const lon = this.lonAt(window.col0 + c - 0.5, cols);
+                const lat = this.latAt(window.row0 + r - 0.5, rows);
+                return this.projectInto(lon, lat);
+            });
+            const covered = new Uint8Array(wide * high);
             for (let r = 0; r < high; r++) {
                 for (let c = 0; c < wide; c++) {
-                    if (!this.isCovered(window.col0 + c, window.row0 + r, cols)) {
-                        continue;
-                    }
-                    const tl = lattice[r * (wide + 1) + c];
-                    const tr = lattice[r * (wide + 1) + c + 1];
-                    const bl = lattice[(r + 1) * (wide + 1) + c];
-                    const br = lattice[(r + 1) * (wide + 1) + c + 1];
-                    if (!tl || !tr || !bl || !br) {
-                        continue;
-                    }
-                    path.moveTo(tl.x, tl.y);
-                    path.lineTo(tr.x, tr.y);
-                    path.lineTo(br.x, br.y);
-                    path.lineTo(bl.x, bl.y);
-                    path.closePath();
-                    drew = true;
+                    covered[r * wide + c] = this.isCovered(window.col0 + c, window.row0 + r, cols) ? 1 : 0;
                 }
             }
-            if (!drew) {
+            const path = new Path2D();
+            if (!lattice.Trace(path, covered, wide, high)) {
                 return;
             }
             this.ctx.strokeStyle = color;
             this.ctx.lineWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
             this.ctx.stroke(path);
-            +" alpha" + this.ctx.globalAlpha;
         }
         /*
          * Restricts drawing to the polygon, so nothing is ruled over ground it does not cover.
@@ -47015,33 +48420,11 @@ var TextureValueLabels;
             path.closePath();
             this.ctx.clip(path);
         }
-        /*
-         * The cell of whichever tile covers a point, as screen corners.
-         */
-        tileCellOutline(lon, lat) {
-            for (const tile of this.tiles) {
-                if (lon < tile.West || lon > tile.East || lat < tile.South || lat > tile.North) {
-                    continue;
-                }
-                const c = (Math.min(tile.ResolutionX - 1, Math.max(0, Math.floor((lon - tile.West) / (tile.East - tile.West) * tile.ResolutionX))));
-                const r = (Math.min(tile.ResolutionY - 1, Math.max(0, Math.floor((tile.North - lat) / (tile.North - tile.South) * tile.ResolutionY))));
-                const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
-                const w1 = tile.West + ((c + 1) / tile.ResolutionX) * (tile.East - tile.West);
-                const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
-                const n1 = tile.North - ((r + 1) / tile.ResolutionY) * (tile.North - tile.South);
-                const corners = [
-                    this.project(w0, n0), this.project(w1, n0),
-                    this.project(w1, n1), this.project(w0, n1)
-                ];
-                return corners.every((q) => q) ? corners : null;
-            }
-            return null;
-        }
         /*
          * Outlines each tile's own cells, so cell size still shows where the mesh is refined.
          */
         drawTileGrid(color) {
-            var _a, _b, _c;
+            var _a, _b;
             const view = this.viewer.camera.computeViewRectangle(Ellipsoid.WGS84);
             if (!view) {
                 return;
@@ -47070,7 +48453,7 @@ var TextureValueLabels;
                 coarse.lineTo(tr.x, tr.y);
                 coarse.lineTo(br.x, br.y);
                 coarse.lineTo(bl.x, bl.y);
-                coarse.closePath();
+                coarse.lineTo(tl.x, tl.y);
                 drewCoarse = true;
             };
             // Planned for every visible tile BEFORE any is drawn.
@@ -47131,31 +48514,29 @@ var TextureValueLabels;
                 // moves, and so each step up is a subset of the one below it.
                 const firstR = Math.floor(r0 / step) * step;
                 const firstC = Math.floor(c0 / step) * step;
-                for (let r = firstR; r < r1; r += step) {
-                    const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
-                    const n1 = tile.North
-                        - (Math.min(r + step, tile.ResolutionY) / tile.ResolutionY) * (tile.North - tile.South);
-                    for (let c = firstC; c < c1; c += step) {
-                        const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
-                        const w1 = tile.West
-                            + (Math.min(c + step, tile.ResolutionX) / tile.ResolutionX) * (tile.East - tile.West);
-                        if (!this.coveredAt((w0 + w1) / 2, (n0 + n1) / 2)) {
-                            continue;
-                        }
-                        const tl = this.project(w0, n0);
-                        const tr = this.project(w1, n0);
-                        const br = this.project(w1, n1);
-                        const bl = this.project(w0, n1);
-                        if (!tl || !tr || !br || !bl) {
-                            continue;
-                        }
-                        path.moveTo(tl.x, tl.y);
-                        path.lineTo(tr.x, tr.y);
-                        path.lineTo(br.x, br.y);
-                        path.lineTo(bl.x, bl.y);
-                        path.closePath();
-                        drew = true;
-                    }
+                const wide = Math.ceil((c1 - firstC) / step);
+                const high = Math.ceil((r1 - firstR) / step);
+                const lonOf = (c) => tile.West
+                    + (Math.min(firstC + c * step, tile.ResolutionX) / tile.ResolutionX) * (tile.East - tile.West);
+                const latOf = (r) => tile.North
+                    - (Math.min(firstR + r * step, tile.ResolutionY) / tile.ResolutionY) * (tile.North - tile.South);
+                const covered = new Uint8Array(wide * high);
+                let any = false;
+                for (let r = 0; r < high; r++) {
+                    for (let c = 0; c < wide; c++) {
+                        if (this.coveredAt((lonOf(c) + lonOf(c + 1)) / 2, (latOf(r) + latOf(r + 1)) / 2)) {
+                            covered[r * wide + c] = 1;
+                            any = true;
+                        }
+                    }
+                }
+                if (!any) {
+                    continue;
+                }
+                // Projected on demand, since a sparse raster leaves most corners belonging to no cell.
+                const lattice = new Lattice(wide + 1, high + 1, (c, r) => this.projectInto(lonOf(c), latOf(r)));
+                if (lattice.Trace(path, covered, wide, high)) {
+                    drew = true;
                 }
             }
             const gridWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
@@ -47173,7 +48554,7 @@ var TextureValueLabels;
                 return;
             }
             this.ctx.strokeStyle = color;
-            this.ctx.lineWidth = (_c = this.settings.gridWidthPixels) !== null && _c !== void 0 ? _c : DEFAULT_GRID_WIDTH_PIXELS;
+            this.ctx.lineWidth = gridWidth;
             this.ctx.stroke(path);
         }
         /*
@@ -47193,7 +48574,7 @@ var TextureValueLabels;
             };
         }
         /*
-         * Whether the composited raster holds data at a lon/lat.
+         * Whether the composited raster holds painted data at a lon/lat.
          */
         coveredAt(lon, lat) {
             if (!this.source) {
@@ -47206,60 +48587,20 @@ var TextureValueLabels;
             if (col < 0 || row < 0 || col >= cols || row >= rows) {
                 return false;
             }
-            const at = (row * cols + col) * 4 + 3;
             // Painted, not merely covered: a dry cell holds a reading the ramp deliberately hides, and
             // ruling a grid over it draws detail where the picture shows none.
-            if (this.painted && this.painted.length === cols * rows * 4) {
-                return this.painted[at] > 0;
+            if (this.painted || this.paintedRamp) {
+                return this.paintedAt(col, row, cols);
             }
-            return this.source.data[at] >= 128;
+            return this.source.data[(row * cols + col) * 4 + 3] >= 128;
         }
         isCovered(col, row, cols) {
             return Boolean(this.source && this.source.data[(row * cols + col) * 4 + 3] >= 128);
         }
         /*
-         * Width of the widest label this overlay could draw, in pixels.
+         * What a label says about one reading, a line at a time.
          */
-        widestLabel(parts) {
-            const sample = [];
-            if (parts.indexOf("value") >= 0) {
-                sample.push(valueLine("-000.00", LabelUnits(this.metadata)));
-            }
-            const range = [];
-            const showsRange = !TextureFrameSeriesAnimator.IsTransformed(this.metadata);
-            if (showsRange && parts.indexOf("floor") >= 0) {
-                range.push("min: -000.00");
-            }
-            if (showsRange && parts.indexOf("ceiling") >= 0) {
-                range.push("max: -000.00");
-            }
-            if (range.length) {
-                sample.push(range.join(" - "));
-            }
-            if (!sample.length) {
-                return 0;
-            }
-            const widest = Math.max(...sample.map((line) => this.ctx.measureText(line).width));
-            return widest + LABEL_GAP_PIXELS;
-        }
-        /*
-         * The four screen corners of one cell, or null if any of them will not project.
-         */
-        cellOutline(col, row, cols, rows) {
-            // On a pyramid the composited texel is not a cell. Outlining it would draw a second,
-            // uniform lattice over the tile grid, misaligned with it everywhere.
-            if (this.tiles && this.tiles.length) {
-                return this.tileCellOutline(this.lonAt(col, cols), this.latAt(row, rows));
-            }
-            const corners = [
-                this.project(this.lonAt(col - 0.5, cols), this.latAt(row - 0.5, rows)),
-                this.project(this.lonAt(col + 0.5, cols), this.latAt(row - 0.5, rows)),
-                this.project(this.lonAt(col + 0.5, cols), this.latAt(row + 0.5, rows)),
-                this.project(this.lonAt(col - 0.5, cols), this.latAt(row + 0.5, rows))
-            ];
-            return corners.every((c) => c) ? corners : null;
-        }
-        drawLabel(point, reading, parts, outline) {
+        labelLines(reading, parts) {
             var _a;
             const dp = (_a = this.settings.decimals) !== null && _a !== void 0 ? _a : (Math.abs(reading.value) < 10 ? 2 : 1);
             const lines = [];
@@ -47278,32 +48619,7 @@ var TextureValueLabels;
             if (range.length) {
                 lines.push(range.join(" - "));
             }
-            if (!lines.length) {
-                return;
-            }
-            if (outline) {
-                this.ctx.strokeStyle = LABEL_ANCHOR_COLOR;
-                this.ctx.lineWidth = 1.5;
-                this.ctx.beginPath();
-                this.ctx.moveTo(outline[0].x, outline[0].y);
-                for (let i = 1; i < outline.length; i++) {
-                    this.ctx.lineTo(outline[i].x, outline[i].y);
-                }
-                this.ctx.closePath();
-                this.ctx.stroke();
-            }
-            const width = Math.max(...lines.map((l) => this.ctx.measureText(l).width)) + 10;
-            const height = lines.length * LINE_HEIGHT + 6;
-            const top = point.y - height / 2;
-            this.ctx.fillStyle = "rgba(16,16,14,0.72)";
-            this.ctx.beginPath();
-            this.ctx.roundRect(point.x - width / 2, top, width, height, LABEL_RADIUS);
-            this.ctx.fill();
-            lines.forEach((line, i) => {
-                this.ctx.fillStyle = i === 0 ? "#ffffff" : "#a8a89f";
-                this.ctx.fillText(line, point.x, top + LINE_HEIGHT * (i + 1) - 1);
-            });
-            this.drawn++;
+            return lines;
         }
         /*
          * The first cell with a reading at or near a lattice point, searched within its own block.
@@ -47330,11 +48646,24 @@ var TextureValueLabels;
             return null;
         }
         paintedAt(col, row, cols) {
-            if (!this.painted) {
-                return true;
+            const at = (row * cols + col) * 4;
+            if (this.painted && this.painted.length === this.source.data.length) {
+                return this.painted[at + 3] > 0;
             }
-            const at = (row * cols + col) * 4 + 3;
-            return this.painted[at] > 0;
+            if (this.paintedRamp) {
+                const data = this.source.data;
+                if (data[at + 3] === 0) {
+                    return false;
+                }
+                // The 8 bit grey the ramp is indexed on, which is what a tinted frame would have used.
+                const grey = TextureFrameSeriesAnimator.IsPackedValue(this.metadata)
+                    ? Math.round((data[at] * 256 + data[at + 1]) / 65535 * 255)
+                    : data[at];
+                const steps = this.paintedRamp.length / 4;
+                const index = Math.min(steps - 1, Math.round(grey / 255 * (steps - 1)));
+                return this.paintedRamp[index * 4 + 3] > 0;
+            }
+            return true;
         }
         // Decodes one cell, skipping anything the texture marks as having no data.
         readAt(col, row, cols) {
@@ -47350,6 +48679,16 @@ var TextureValueLabels;
                 sourceMap: this.sourceMap
             });
         }
+        /*
+         * The texel holding a lon/lat, or null outside the raster.
+         */
+        texelAt(lon, lat) {
+            const cols = this.source.width;
+            const rows = this.source.height;
+            const col = Math.floor((lon - this.extent.West) / (this.extent.East - this.extent.West) * cols);
+            const row = Math.floor((this.extent.North - lat) / (this.extent.North - this.extent.South) * rows);
+            return col < 0 || row < 0 || col >= cols || row >= rows ? null : { col, row };
+        }
         lonAt(col, cols) {
             return this.extent.West + ((col + 0.5) / cols) * (this.extent.East - this.extent.West);
         }
@@ -47378,15 +48717,102 @@ var TextureValueLabels;
                 row1: Math.min(rows - 1, Math.ceil((this.extent.North - south) / spanLat * rows) + 1)
             };
         }
+        // Metres the sheet sits at over a point, or the ellipsoid when nothing says otherwise.
+        surfaceHeight(lon, lat) {
+            const height = this.heightAt ? this.heightAt(lon, lat) : null;
+            return height == null || !isFinite(height) ? 0 : height;
+        }
+        projectCell(col, row, cols, rows) {
+            return this.project(this.lonAt(col, cols), this.latAt(row, rows));
+        }
+        // Projected at the sheet's own height, since up close the ellipsoid is metres from where it is drawn.
         project(lon, lat) {
-            const world = Cartesian3.fromDegrees(lon, lat, 0);
+            return this.projectInto(lon, lat) ? { x: this.scratchWindow.x, y: this.scratchWindow.y } : null;
+        }
+        /*
+         * Projects into the shared scratch window position, returning whether it landed anywhere.
+         */
+        projectInto(lon, lat) {
+            const world = Cartesian3.fromDegrees(lon, lat, this.surfaceHeight(lon, lat), Ellipsoid.WGS84, this.scratchWorld);
+            // One matrix multiply in 3D, where the general path rederives the viewport and frustum per point.
+            if (this.viewProjection) {
+                const clip = Matrix4.multiplyByVector(this.viewProjection, Cartesian4.fromElements(world.x, world.y, world.z, 1, this.scratchClip), this.scratchClip);
+                if (!(clip.w > 0)) {
+                    return null;
+                }
+                const view = this.viewer.canvas;
+                this.scratchWindow.x = (clip.x / clip.w * 0.5 + 0.5) * view.clientWidth;
+                this.scratchWindow.y = (0.5 - clip.y / clip.w * 0.5) * view.clientHeight;
+                return this.scratchWindow;
+            }
             const transforms = SceneTransforms;
             // Renamed in newer Cesium, and this library runs on whatever the host app supplies.
             const fn = transforms.worldToWindowCoordinates || transforms.wgs84ToWindowCoordinates;
-            return fn ? fn.call(transforms, this.viewer.scene, world) : null;
+            return fn ? fn.call(transforms, this.viewer.scene, world, this.scratchWindow) || null : null;
         }
     }
     TextureValueLabels.Labels = Labels;
+    /*
+     * A grid of window positions projected at most once each, and the cell edges traced through them.
+     */
+    class Lattice {
+        constructor(wide, high, projectAt) {
+            this.wide = wide;
+            this.projectAt = projectAt;
+            this.xs = new Float64Array(wide * high);
+            this.ys = new Float64Array(wide * high);
+            this.state = new Uint8Array(wide * high);
+        }
+        at(c, r) {
+            const i = r * this.wide + c;
+            if (this.state[i] === 0) {
+                const p = this.projectAt(c, r);
+                if (p) {
+                    this.xs[i] = p.x;
+                    this.ys[i] = p.y;
+                    this.state[i] = 1;
+                }
+                else {
+                    this.state[i] = 2;
+                }
+            }
+            return this.state[i] === 1 ? i : -1;
+        }
+        edge(path, a, b) {
+            if (a < 0 || b < 0) {
+                return false;
+            }
+            path.moveTo(this.xs[a], this.ys[a]);
+            path.lineTo(this.xs[b], this.ys[b]);
+            return true;
+        }
+        /*
+         * Adds each covered cell's edges to a path, a shared edge once, and says whether any were added.
+         */
+        Trace(path, covered, cellsWide, cellsHigh) {
+            let drew = false;
+            for (let r = 0; r < cellsHigh; r++) {
+                for (let c = 0; c < cellsWide; c++) {
+                    if (!covered[r * cellsWide + c]) {
+                        continue;
+                    }
+                    const tl = this.at(c, r);
+                    const tr = this.at(c + 1, r);
+                    const bl = this.at(c, r + 1);
+                    if (!(r > 0 && covered[(r - 1) * cellsWide + c])) {
+                        drew = this.edge(path, tl, tr) || drew;
+                    }
+                    if (!(c > 0 && covered[r * cellsWide + c - 1])) {
+                        drew = this.edge(path, tl, bl) || drew;
+                    }
+                    const br = this.at(c + 1, r + 1);
+                    drew = this.edge(path, tr, br) || drew;
+                    drew = this.edge(path, bl, br) || drew;
+                }
+            }
+            return drew;
+        }
+    }
     /*
      * The value line. Units go on it alone: repeating them on the range underneath doubles the widest
      * label to say nothing, and the two lines are plainly the same quantity.
@@ -47487,6 +48913,9 @@ in vec2 st;
 in float skirt;
 
 uniform sampler2D u_valueTexture;
+// The frame being faded away from, and how far the fade has got. The same texture at 1 when settled.
+uniform sampler2D u_valueTextureFrom;
+uniform float u_valueFade;
 uniform sampler2D u_groundTexture;
 uniform float u_valuePacked;
 uniform float u_valueMin;
@@ -47607,18 +49036,22 @@ float decodeValue(vec4 texel) {
 }
 
 void main() {
-    vec4 texel = texture(u_valueTexture, st);
+    vec4 texelTo = texture(u_valueTexture, st);
+    vec4 texelFrom = texture(u_valueTextureFrom, st);
     v_st = st;
+    // Decoded before mixing, since blending a packed pair byte by byte reads as some other value
+    // halfway through the fade.
+    float raw = mix(decodeValue(texelFrom), decodeValue(texelTo), u_valueFade);
+    float alpha = mix(texelFrom.a, texelTo.a, u_valueFade);
 
     // Inside a region the scene knows is water, a texel with no value still has to paint, or the
     // hole the region exists to close is still a hole.
     // The value it paints is the shallowest the ramp is not transparent at.
     float inMask = u_maskWeight * texture(u_maskTexture, st).a;
-    float hasData = step(u_coverageCutoffVertex, texel.a);
-    float raw = decodeValue(texel);
+    float hasData = step(u_coverageCutoffVertex, alpha);
     float filled = mix(u_maskFillValue, max(raw, u_maskFillValue), hasData);
     v_value = mix(raw, filled, inMask * u_maskFill);
-    v_coverage = max(texel.a, inMask * u_maskFill);
+    v_coverage = max(alpha, inMask * u_maskFill);
 
     // Exaggeration stretches the span above the archive's minimum rather than the height itself. On an
     // elevation the height is measured from the ellipsoid, tens of metres from any of the data, so
@@ -47661,6 +49094,8 @@ void main() {
 `;
     const FRAGMENT_SHADER_GLSL300 = `
 uniform sampler2D u_valueTexture;
+uniform sampler2D u_valueTextureFrom;
+uniform float u_valueFade;
 uniform sampler2D u_rampTexture;
 uniform float u_coverageCutoff;
 uniform vec2 u_texelSize;
@@ -47697,12 +49132,15 @@ in vec2 v_waveMetres;
  * Scaled per channel for the same reason the vertex shader's decode is: reassembling the pair reaches
  * 65535, which mediump does not have to represent, and this is the shader that may not get highp.
  */
-float valueAt(vec2 uv) {
-    vec4 texel = texture(u_valueTexture, uv);
+float decodeValue(vec4 texel) {
     float packed16 = texel.r * (255.0 * 256.0 / 65535.0) + texel.g * (255.0 / 65535.0);
     return mix(texel.r, packed16, u_valuePacked);
 }
 
+float valueAt(vec2 uv) {
+    return mix(decodeValue(texture(u_valueTextureFrom, uv)), decodeValue(texture(u_valueTexture, uv)), u_valueFade);
+}
+
 //#water
 /*
  * Slope of the ripple field at a point, in metres of rise per metre travelled.
@@ -48149,6 +49587,13 @@ void main() {
             this.rampTexture = null;
             this.texture = null;
             this.textureDirty = true;
+            // Fed from a fading source: the frame being left, and which pixels each texture holds.
+            this.fade = null;
+            this.textureFrom = null;
+            this.uploadedTo = null;
+            this.uploadedFrom = null;
+            // Size of whichever value raster is bound, canvas or pixels.
+            this.sourceDims = null;
             this.shaderProgram = null;
             this.shaderProgramWater = false;
             this.renderState = null;
@@ -48319,6 +49764,65 @@ void main() {
                 this.maskGroundTexture = null;
             }
         }
+        /**
+         * Metres above the ellipsoid the sheet sits at over a point, or null unless a fading source is bound.
+         */
+        HeightAt(lon, lat) {
+            const pixels = this.fade ? this.fade.to : null;
+            const dims = this.sourceDims;
+            if (!pixels || !dims) {
+                return null;
+            }
+            const fx = (lon - this.extent.West) / (this.extent.East - this.extent.West);
+            const fy = (this.extent.North - lat) / (this.extent.North - this.extent.South);
+            if (!(fx >= 0 && fx <= 1 && fy >= 0 && fy <= 1)) {
+                return null;
+            }
+            const col = Math.min(dims.width - 1, Math.floor(fx * dims.width));
+            const row = Math.min(dims.height - 1, Math.floor(fy * dims.height));
+            const at = (row * dims.width + col) * 4;
+            const coverage = pixels[at + 3] / 255;
+            const normalised = this.packedValue
+                ? (pixels[at] * 256 + pixels[at + 1]) / 65535
+                : pixels[at] / 255;
+            const metres = this.valueMin + normalised * (this.valueMax - this.valueMin) * this.exaggeration;
+            const following = this.followGround && Boolean(this.groundPixels);
+            const ground = following ? this.groundAt(fx, fy) : 0;
+            return this.baseHeight + ground + metres * (following ? coverage : 1);
+        }
+        /**
+         * Changes whenever HeightAt would answer differently for the same frame.
+         */
+        GetPlacementKey() {
+            return [this.groundPixels ? 1 : 0, this.baseHeight, this.exaggeration, this.followGround ? 1 : 0].join("|");
+        }
+        /**
+         * The ramp the sheet is painted with, as 256 RGBA steps across the value range.
+         */
+        GetRampPixels() {
+            return this.rampPixels;
+        }
+        /*
+         * The packed ground raster read the way sampleGround reads it, bilinear between texel centres.
+         */
+        groundAt(u, v) {
+            const size = GROUND_SAMPLES_PER_SIDE;
+            const pixels = this.groundPixels;
+            const read = (x, y) => {
+                const i = (Math.min(size - 1, Math.max(0, y)) * size + Math.min(size - 1, Math.max(0, x))) * 4;
+                const packed = (pixels[i] << 16) + (pixels[i + 1] << 8) + pixels[i + 2];
+                return GROUND_MIN_METRES + (packed / 16777215) * (GROUND_MAX_METRES - GROUND_MIN_METRES);
+            };
+            const x = u * size - 0.5;
+            const y = v * size - 0.5;
+            const x0 = Math.floor(x);
+            const y0 = Math.floor(y);
+            const fx = x - x0;
+            const fy = y - y0;
+            const top = read(x0, y0) + (read(x0 + 1, y0) - read(x0, y0)) * fx;
+            const bottom = read(x0, y0 + 1) + (read(x0 + 1, y0 + 1) - read(x0, y0 + 1)) * fx;
+            return top + (bottom - top) * fy;
+        }
         /**
          * Feeds the surface from an animated frame series.
          * Height and colour advance with the clock without the caller having to push each frame in.
@@ -48337,23 +49841,39 @@ void main() {
                 return;
             }
             const context = frameState.context;
-            if (this.valueSource) {
-                const canvas = this.valueSource.GetValueCanvas();
-                if (!canvas) {
-                    // No frame decoded yet, so there is nothing to displace against.
-                    return;
-                }
-                const version = this.valueSource.GetPresentVersion();
-                if (canvas !== this.source || version !== this.lastPresentVersion) {
-                    this.source = canvas;
-                    this.lastPresentVersion = version;
-                    this.textureDirty = true;
+            const fade = this.valueSource && this.valueSource.GetValueFade
+                ? this.valueSource.GetValueFade()
+                : null;
+            if (fade) {
+                this.fade = fade;
+                this.sourceDims = { width: fade.width, height: fade.height };
+            }
+            else {
+                this.fade = null;
+                if (this.valueSource) {
+                    const canvas = this.valueSource.GetValueCanvas();
+                    if (!canvas) {
+                        // No frame decoded yet, so there is nothing to displace against.
+                        return;
+                    }
+                    const version = this.valueSource.GetPresentVersion();
+                    if (canvas !== this.source || version !== this.lastPresentVersion) {
+                        this.source = canvas;
+                        this.lastPresentVersion = version;
+                        this.textureDirty = true;
+                    }
                 }
+                this.sourceDims = this.source ? { width: this.source.width, height: this.source.height } : null;
             }
-            if (!this.source || !this.source.width || !this.source.height) {
+            if (!this.sourceDims || !this.sourceDims.width || !this.sourceDims.height) {
                 return;
             }
-            this.syncTexture(context);
+            if (this.fade) {
+                this.syncFadeTextures(context);
+            }
+            else {
+                this.syncTexture(context);
+            }
             this.syncRampTexture(context);
             this.requestGround();
             this.syncGroundTexture(context);
@@ -48401,6 +49921,10 @@ void main() {
                 this.texture.destroy();
                 this.texture = null;
             }
+            if (this.textureFrom) {
+                this.textureFrom.destroy();
+                this.textureFrom = null;
+            }
             if (this.rampTexture) {
                 this.rampTexture.destroy();
                 this.rampTexture = null;
@@ -48668,7 +50192,7 @@ void main() {
             const southWest = Cartesian3.fromDegrees(this.extent.West, this.extent.South, 0);
             const southEast = Cartesian3.fromDegrees(this.extent.East, this.extent.South, 0);
             const width = Cartesian3.distance(southWest, southEast);
-            return Math.max(1, width / Math.max(1, this.source ? this.source.width : 1));
+            return Math.max(1, width / Math.max(1, this.sourceDims ? this.sourceDims.width : 1));
         }
         syncRampTexture(context) {
             if (this.rampTexture) {
@@ -48689,6 +50213,67 @@ void main() {
                 })
             });
         }
+        valueSampler() {
+            // Nearest for a packed value, because filtering would blend the two bytes of the
+            // packing rather than the values they encode, the same trap sampleGround avoids.
+            const minification = this.packedValue
+                ? TextureMinificationFilter.NEAREST
+                : TextureMinificationFilter.LINEAR;
+            const magnification = this.packedValue
+                ? TextureMagnificationFilter.NEAREST
+                : TextureMagnificationFilter.LINEAR;
+            return new Sampler({
+                wrapS: TextureWrap.CLAMP_TO_EDGE,
+                wrapT: TextureWrap.CLAMP_TO_EDGE,
+                minificationFilter: minification,
+                magnificationFilter: magnification
+            });
+        }
+        /*
+         * Uploads value pixels into a texture, reusing it when the size still fits.
+         */
+        uploadPixels(context, texture, pixels, width, height) {
+            const view = new Uint8Array(pixels.buffer, pixels.byteOffset, pixels.byteLength);
+            const source = { width, height, arrayBufferView: view };
+            if (texture && texture.width === width && texture.height === height) {
+                texture.copyFrom({ source });
+                return texture;
+            }
+            if (texture) {
+                texture.destroy();
+            }
+            return new Texture({
+                context,
+                width,
+                height,
+                pixelFormat: PixelFormat.RGBA,
+                pixelDatatype: PixelDatatype.UNSIGNED_BYTE,
+                source,
+                // Row 0 is the archive's north edge, and has to stay at the top, as the canvas path does.
+                flipY: false,
+                sampler: this.valueSampler()
+            });
+        }
+        /*
+         * Keeps a texture each side of the fade, swapping them on a new frame so only that one is uploaded.
+         */
+        syncFadeTextures(context) {
+            const fade = this.fade;
+            if (fade.to !== this.uploadedTo) {
+                if (fade.from && fade.from === this.uploadedTo && this.texture) {
+                    const previous = this.textureFrom;
+                    this.textureFrom = this.texture;
+                    this.uploadedFrom = this.uploadedTo;
+                    this.texture = previous;
+                }
+                this.texture = this.uploadPixels(context, this.texture, fade.to, fade.width, fade.height);
+                this.uploadedTo = fade.to;
+            }
+            if (fade.from && fade.from !== this.uploadedFrom) {
+                this.textureFrom = this.uploadPixels(context, this.textureFrom, fade.from, fade.width, fade.height);
+                this.uploadedFrom = fade.from;
+            }
+        }
         syncTexture(context) {
             const sizeChanged = this.texture
                 && (this.texture.width !== this.source.width || this.texture.height !== this.source.height);
@@ -48696,27 +50281,15 @@ void main() {
                 if (this.texture) {
                     this.texture.destroy();
                 }
-                // Nearest for a packed value, because filtering would blend the two bytes of the
-                // packing rather than the values they encode, the same trap sampleGround avoids.
-                const minification = this.packedValue
-                    ? TextureMinificationFilter.NEAREST
-                    : TextureMinificationFilter.LINEAR;
-                const magnification = this.packedValue
-                    ? TextureMagnificationFilter.NEAREST
-                    : TextureMagnificationFilter.LINEAR;
                 this.texture = new Texture({
                     context,
                     source: this.source,
                     // Cesium flips canvas rows on upload by default, which would put the archive's
                     // row 0 (its north edge) at the south edge and mirror the whole surface.
                     flipY: false,
-                    sampler: new Sampler({
-                        wrapS: TextureWrap.CLAMP_TO_EDGE,
-                        wrapT: TextureWrap.CLAMP_TO_EDGE,
-                        minificationFilter: minification,
-                        magnificationFilter: magnification
-                    })
+                    sampler: this.valueSampler()
                 });
+                this.uploadedTo = null;
                 this.textureDirty = false;
                 return;
             }
@@ -48779,7 +50352,7 @@ void main() {
          * carry, so the ladder is capped one step above the texel count rather than run to its top.
          */
         tierCeiling() {
-            const source = this.source;
+            const source = this.sourceDims;
             if (!source || !source.width || !source.height) {
                 return TIERS[TIERS.length - 1];
             }
@@ -48857,6 +50430,10 @@ void main() {
                     owner: this,
                     uniformMap: {
                         u_valueTexture: () => self.texture,
+                        u_valueTextureFrom: () => (self.fade && self.fade.from && self.textureFrom
+                            ? self.textureFrom
+                            : self.texture),
+                        u_valueFade: () => (self.fade && self.fade.from ? self.fade.mix : 1),
                         u_groundTexture: () => self.groundTexture,
                         u_valuePacked: () => (self.packedValue ? 1 : 0),
                         u_groundWeight: () => (self.followGround && self.groundPixels ? 1 : 0),
@@ -48894,7 +50471,7 @@ void main() {
                             : 0,
                         u_coverageCutoff: () => COVERAGE_CUTOFF,
                         u_rampTexture: () => self.rampTexture,
-                        u_texelSize: () => new Cartesian2(1 / self.source.width, 1 / self.source.height),
+                        u_texelSize: () => new Cartesian2(1 / self.sourceDims.width, 1 / self.sourceDims.height),
                         u_waterOn: () => (self.water ? 1 : 0),
                         u_waterWavelength: () => (self.water && self.water.wavelength)
                             || DEFAULT_WATER_WAVELENGTH_METRES,
@@ -49266,6 +50843,10 @@ var EntityRenderEnginePolygon;
         syncTextureValueLabels({
             cEntity,
             viewer: params.viewer,
+            surface: drawsDisplacedSurface ? cEntity[DISPLACED_SURFACE_KEY] : null,
+            hover: params.visualRegister
+                ? { register: params.visualRegister, entityId: String(entity.Bruce.ID), menuItemId: params.menuItemId }
+                : undefined,
             settings: overlaySettings(style, entity, params.tags),
             extent: labelArchive
                 ? (drawsDisplacedSurface ? archiveExtent(labelArchive.metadata, posses) : drapeExtent)
@@ -49572,6 +51153,7 @@ var EntityRenderEnginePolygon;
                     // rendered: null
                     rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c.get(entity.Bruce.ID),
                     menuItemId: params.menuItemId,
+                    visualRegister: params.visualRegister,
                     onSeriesDiscovered: params.onSeriesDiscovered
                 });
             }
@@ -50009,8 +51591,8 @@ function wantsLabels(style) {
  */
 const LABEL_GRID_COLOR = "rgba(255,255,255,0.55)";
 const LABEL_GRID_WIDTH_PIXELS = 1;
-const LABEL_MIN_SPACING_PIXELS = 78;
-const LABEL_MAX_LABELS = 240;
+const LABEL_MIN_SPACING_PIXELS = 140;
+const LABEL_MAX_LABELS = 60;
 function overlaySettings(style, entity, tags) {
     if (!wantsLabels(style)) {
         return undefined;
@@ -50030,6 +51612,7 @@ function overlaySettings(style, entity, tags) {
  */
 function syncTextureValueLabels(params) {
     const { cEntity, viewer, settings, extent, animator, metadata } = params;
+    const surface = params.surface && !params.surface.isDestroyed() ? params.surface : null;
     const existing = cEntity[TEXTURE_VALUE_LABELS_KEY];
     // Offline has no extent to rebuild the overlay from, so an existing one is left running.
     if (params.offline && existing) {
@@ -50048,8 +51631,13 @@ function syncTextureValueLabels(params) {
             West: tile.West, East: tile.East, South: tile.South, North: tile.North,
             ResolutionX: tile.ResolutionX, ResolutionY: tile.ResolutionY
         })),
-        clipRing: params.clipRing
+        clipRing: params.clipRing,
+        heightAt: surface ? (lon, lat) => surface.HeightAt(lon, lat) : undefined,
+        heightKey: surface ? () => surface.GetPlacementKey() : undefined,
+        hover: params.hover
     });
+    // A surface keeps no tinted frame, so whether a cell was painted is read off its ramp.
+    labels.SetPaintedRamp(surface ? surface.GetRampPixels() : null);
     let lastVersion = -1;
     let appliedFloor = null;
     let appliedCeiling = null;
@@ -50061,15 +51649,15 @@ function syncTextureValueLabels(params) {
         if (animator.IsDisposed()) {
             return;
         }
-        const canvas = animator.GetValueCanvas();
-        if (!canvas) {
-            return;
-        }
         const version = animator.GetPresentVersion();
         if (version !== lastVersion) {
+            // Read from the frame cache, since reading the value canvas back copies a whole frame.
+            const raster = animator.GetValueRaster();
+            if (!raster) {
+                return;
+            }
             lastVersion = version;
-            const ctx = canvas.getContext("2d");
-            labels.SetSource(ctx.getImageData(0, 0, canvas.width, canvas.height));
+            labels.SetSource(raster);
             labels.SetPainted(animator.GetDisplayedPixels());
         }
         // Tracked by reference rather than latched on the first one to arrive: a tiled archive
@@ -51808,7 +53396,7 @@ var StyleUtils;
     StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
 })(StyleUtils || (StyleUtils = {}));
 
-const VERSION = "7.5.7";
+const VERSION = "7.5.9";
 /**
  * Updates the environment instance used by bruce-cesium to one specified.
  * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.