@cornerstonejs/core 5.0.0-beta.1 → 5.0.1

package/dist/esm/RenderingEngine/helpers/planarImageRendering.d.ts

@@ -0,0 +1,51 @@
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import type vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import type vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import { InterpolationType } from '../../enums';
+import type { ColormapPublic, IImage, Point3, VOIRange } from '../../types';
+export interface PlanarCameraState {
+    focalPoint: Point3;
+    parallelScale: number;
+    position: Point3;
+    viewPlaneNormal: Point3;
+    viewUp: Point3;
+}
+export interface PlanarImagePresentation {
+    visible?: boolean;
+    opacity?: number;
+    interpolationType?: InterpolationType;
+    colormap?: ColormapPublic;
+    voiRange?: VOIRange;
+    invert?: boolean;
+}
+export interface PlanarImageViewState {
+    zoom?: number;
+    pan?: [number, number];
+}
+export declare function createEmptyVTKImageData(args: {
+    dimensions: Point3;
+    direction: number[] | ArrayLike<number>;
+    numberOfComponents: number;
+    origin: Point3;
+    pixelArray: ArrayLike<number>;
+    spacing: Point3;
+}): vtkImageData;
+export declare function createVTKImageDataFromImage(image: IImage): vtkImageData;
+export declare function getDefaultImageVOIRange(image: IImage): VOIRange | undefined;
+export declare function getPlanarCameraState(renderer: vtkRenderer): PlanarCameraState;
+export declare function applyPlanarImagePresentation(args: {
+    actor: vtkImageSlice;
+    defaultVOIRange?: VOIRange;
+    props?: PlanarImagePresentation;
+}): void;
+export declare function createPlanarRGBTransferFunction(args: {
+    colormap?: ColormapPublic;
+    invert?: boolean;
+    voiRange: VOIRange;
+}): vtkColorTransferFunction;
+export declare function applyPlanarCameraViewState(args: {
+    initialCamera: PlanarCameraState;
+    renderer: vtkRenderer;
+    viewState?: PlanarImageViewState;
+}): void;

package/dist/esm/RenderingEngine/helpers/planarImageRendering.js

@@ -0,0 +1,116 @@
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import { InterpolationType } from '../../enums';
+import createLinearRGBTransferFunction from '../../utilities/createLinearRGBTransferFunction';
+import getVOIRangeFromWindowLevel from '../../utilities/getVOIRangeFromWindowLevel';
+import { getImageDataMetadata } from '../../utilities/getImageDataMetadata';
+import invertRgbTransferFunction from '../../utilities/invertRgbTransferFunction';
+import { resolveColormap } from '../../utilities/colormap';
+import { updateVTKImageDataWithCornerstoneImage } from '../../utilities/updateVTKImageDataWithCornerstoneImage';
+export function createEmptyVTKImageData(args) {
+    const { dimensions, direction, numberOfComponents, origin, pixelArray, spacing, } = args;
+    const values = ArrayBuffer.isView(pixelArray) && !(pixelArray instanceof DataView)
+        ? pixelArray
+        : Array.from(pixelArray);
+    const dataType = ArrayBuffer.isView(values) && !(values instanceof DataView)
+        ? vtkDataArray.getDataType(values)
+        : undefined;
+    const scalarArray = vtkDataArray.newInstance({
+        ...(dataType ? { dataType } : {}),
+        name: 'Pixels',
+        numberOfComponents,
+        values,
+    });
+    const imageData = vtkImageData.newInstance();
+    imageData.setDimensions(dimensions);
+    imageData.setSpacing(spacing);
+    imageData.setDirection(new Float32Array(Array.from(direction)));
+    imageData.setOrigin(origin);
+    imageData.getPointData().setScalars(scalarArray);
+    return imageData;
+}
+export function createVTKImageDataFromImage(image) {
+    const { dimensions, direction, numberOfComponents, origin, spacing } = getImageDataMetadata(image);
+    const pixelArray = image.voxelManager.getScalarData();
+    const imageData = createEmptyVTKImageData({
+        dimensions,
+        direction: Array.from(direction),
+        numberOfComponents,
+        origin,
+        pixelArray,
+        spacing,
+    });
+    updateVTKImageDataWithCornerstoneImage(imageData, image);
+    return imageData;
+}
+export function getDefaultImageVOIRange(image) {
+    return getVOIRangeFromWindowLevel(image.windowWidth, image.windowCenter, image.voiLUTFunction);
+}
+export function getPlanarCameraState(renderer) {
+    const camera = renderer.getActiveCamera();
+    return {
+        focalPoint: [...camera.getFocalPoint()],
+        parallelScale: camera.getParallelScale(),
+        position: [...camera.getPosition()],
+        viewPlaneNormal: [...camera.getViewPlaneNormal()],
+        viewUp: [...camera.getViewUp()],
+    };
+}
+export function applyPlanarImagePresentation(args) {
+    const { actor, defaultVOIRange, props } = args;
+    const property = actor.getProperty();
+    const voiRange = props?.voiRange ?? defaultVOIRange;
+    if (props?.visible !== undefined) {
+        actor.setVisibility(props.visible);
+    }
+    if (props?.opacity !== undefined) {
+        property.setOpacity(props.opacity);
+    }
+    if (props?.interpolationType !== undefined) {
+        property.setInterpolationType(props.interpolationType);
+    }
+    if (!voiRange) {
+        return;
+    }
+    const transferFunction = createPlanarRGBTransferFunction({
+        colormap: props?.colormap,
+        invert: props?.invert,
+        voiRange,
+    });
+    property.setUseLookupTableScalarRange(true);
+    property.setRGBTransferFunction(0, transferFunction);
+}
+export function createPlanarRGBTransferFunction(args) {
+    const { colormap, invert, voiRange } = args;
+    const transferFunction = colormap?.name !== undefined
+        ? createColormapTransferFunction(colormap, voiRange)
+        : createLinearRGBTransferFunction(voiRange);
+    if (invert) {
+        invertRgbTransferFunction(transferFunction);
+    }
+    return transferFunction;
+}
+function createColormapTransferFunction(colormap, voiRange) {
+    const colormapName = colormap.name;
+    const colormapDefinition = colormapName
+        ? resolveColormap(colormapName)
+        : undefined;
+    if (!colormapDefinition) {
+        throw new Error(`Colormap ${colormapName} not found`);
+    }
+    const transferFunction = vtkColorTransferFunction.newInstance();
+    transferFunction.applyColorMap(colormapDefinition);
+    transferFunction.setMappingRange(voiRange.lower, voiRange.upper);
+    return transferFunction;
+}
+export function applyPlanarCameraViewState(args) {
+    const { initialCamera, renderer, viewState } = args;
+    const camera = renderer.getActiveCamera();
+    const zoom = Math.max(viewState?.zoom ?? 1, 0.001);
+    const [panX, panY] = viewState?.pan ?? [0, 0];
+    camera.setParallelProjection(true);
+    camera.setParallelScale(initialCamera.parallelScale / zoom);
+    camera.setFocalPoint(initialCamera.focalPoint[0] + panX, initialCamera.focalPoint[1] + panY, initialCamera.focalPoint[2]);
+    camera.setPosition(initialCamera.position[0] + panX, initialCamera.position[1] + panY, initialCamera.position[2]);
+}

package/dist/esm/RenderingEngine/helpers/planarVolumeRendering.d.ts

@@ -0,0 +1,22 @@
+import type vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
+import type { ICamera, IImageVolume, Point3 } from '../../types';
+import getSliceRange from '../../utilities/getSliceRange';
+export interface PlanarVolumeSliceNavigationState {
+    currentSliceIndex: number;
+    sliceRange: ReturnType<typeof getSliceRange>;
+    spacingInNormalDirection: number;
+}
+export declare function getPlanarVolumeSliceNavigationState(args: {
+    actor: vtkVolume;
+    camera: Pick<ICamera, 'focalPoint' | 'position' | 'viewPlaneNormal'>;
+    imageVolume: IImageVolume;
+}): PlanarVolumeSliceNavigationState;
+export declare function getPlanarVolumeSlicePoint(args: {
+    camera: Pick<ICamera, 'focalPoint' | 'position' | 'viewPlaneNormal'>;
+    delta: number;
+    sliceRange: ReturnType<typeof getSliceRange>;
+    spacingInNormalDirection: number;
+}): {
+    newFocalPoint: Point3;
+    newPosition: Point3;
+};

package/dist/esm/RenderingEngine/helpers/planarVolumeRendering.js

@@ -0,0 +1,28 @@
+import getSliceRange from '../../utilities/getSliceRange';
+import getSpacingInNormalDirection from '../../utilities/getSpacingInNormalDirection';
+import snapFocalPointToSlice from '../../utilities/snapFocalPointToSlice';
+export function getPlanarVolumeSliceNavigationState(args) {
+    const { actor, camera, imageVolume } = args;
+    const { focalPoint, viewPlaneNormal } = camera;
+    const sliceRange = getSliceRange(actor, viewPlaneNormal, focalPoint);
+    const spacingInNormalDirection = getSpacingInNormalDirection(imageVolume, viewPlaneNormal);
+    const steps = Math.round((sliceRange.max - sliceRange.min) / spacingInNormalDirection);
+    const range = sliceRange.max - sliceRange.min;
+    if (steps <= 0 || range === 0) {
+        return {
+            currentSliceIndex: 0,
+            sliceRange,
+            spacingInNormalDirection,
+        };
+    }
+    const fraction = (sliceRange.current - sliceRange.min) / range;
+    return {
+        currentSliceIndex: Math.round(fraction * steps),
+        sliceRange,
+        spacingInNormalDirection,
+    };
+}
+export function getPlanarVolumeSlicePoint(args) {
+    const { camera, delta, sliceRange, spacingInNormalDirection } = args;
+    return snapFocalPointToSlice(camera.focalPoint, camera.position, sliceRange, camera.viewPlaneNormal, spacingInNormalDirection, delta);
+}

package/dist/esm/RenderingEngine/helpers/resolveViewportVolumeId.d.ts

@@ -0,0 +1 @@
+export default function resolveViewportVolumeId(volumeId: string): string;

package/dist/esm/RenderingEngine/helpers/resolveViewportVolumeId.js

@@ -0,0 +1,19 @@
+import cache from '../../cache/cache';
+const STREAMING_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
+export default function resolveViewportVolumeId(volumeId) {
+    const cachedVolume = cache.getVolume(volumeId);
+    if (cachedVolume) {
+        return volumeId;
+    }
+    const cachedLoadObject = cache.getVolumeLoadObject(volumeId);
+    if (cachedLoadObject) {
+        return volumeId;
+    }
+    if (volumeId.startsWith(`${STREAMING_VOLUME_LOADER_SCHEME}:`)) {
+        return volumeId;
+    }
+    if (volumeId.includes(':')) {
+        return volumeId;
+    }
+    return `${STREAMING_VOLUME_LOADER_SCHEME}:${volumeId}`;
+}

package/dist/esm/RenderingEngine/helpers/setDefaultVolumeVOI.d.ts

@@ -1,3 +1,4 @@
-import type { VolumeActor, IImageVolume } from '../../types';
-declare function setDefaultVolumeVOI(volumeActor: VolumeActor, imageVolume: IImageVolume): Promise<void>;
+import type { ImageActor, VolumeActor, IImageVolume, VOIRange } from '../../types';
+declare function setDefaultVolumeVOI(volumeActor: VolumeActor | ImageActor, imageVolume: IImageVolume): Promise<void>;
+export declare function getDefaultVolumeVOIRange(imageVolume: IImageVolume): Promise<VOIRange | undefined>;
 export default setDefaultVolumeVOI;

package/dist/esm/RenderingEngine/helpers/setDefaultVolumeVOI.js

@@ -1,31 +1,62 @@
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import { loadAndCacheImage } from '../../loaders/imageLoader';
 import * as metaData from '../../metaData';
 import * as windowLevel from '../../utilities/windowLevel';
-import { RequestType } from '../../enums';
+import { MetadataModules, RequestType } from '../../enums';
 import cache from '../../cache/cache';
 const PRIORITY = 0;
 const REQUEST_TYPE = RequestType.Prefetch;
 async function setDefaultVolumeVOI(volumeActor, imageVolume) {
+    const voi = await getDefaultVolumeVOIRange(imageVolume);
+    if (!voi ||
+        (voi.lower === 0 && voi.upper === 0) ||
+        voi.lower === undefined ||
+        voi.upper === undefined) {
+        return;
+    }
+    ensureRGBTransferFunction(volumeActor).setMappingRange(voi.lower, voi.upper);
+}
+function ensureRGBTransferFunction(volumeActor) {
+    const property = volumeActor.getProperty();
+    let transferFunction = property.getRGBTransferFunction(0);
+    if (transferFunction) {
+        return transferFunction;
+    }
+    transferFunction = vtkColorTransferFunction.newInstance();
+    transferFunction.addRGBPoint(0, 0, 0, 0);
+    transferFunction.addRGBPoint(1, 1, 1, 1);
+    property.setRGBTransferFunction(0, transferFunction);
+    if ('setUseLookupTableScalarRange' in property) {
+        property.setUseLookupTableScalarRange?.(true);
+    }
+    return transferFunction;
+}
+export async function getDefaultVolumeVOIRange(imageVolume) {
     let voi = getVOIFromMetadata(imageVolume);
-    if (!voi && imageVolume.imageIds.length) {
+    if (!voi &&
+        imageVolume.imageIds.length &&
+        shouldUseImageIdsForVOI(imageVolume)) {
         voi = await getVOIFromMiddleSliceMinMax(imageVolume);
         voi = handlePreScaledVolume(imageVolume, voi);
     }
-    if ((voi.lower === 0 && voi.upper === 0) ||
-        voi.lower === undefined ||
-        voi.upper === undefined) {
-        return;
+    return voi;
+}
+function shouldUseImageIdsForVOI(imageVolume) {
+    const { imageIds, referencedImageIds } = imageVolume;
+    if (referencedImageIds?.length) {
+        return true;
+    }
+    const imageId = imageIds[Math.floor(imageIds.length / 2)];
+    if (!imageId || imageId.startsWith('derived:')) {
+        return false;
     }
-    volumeActor
-        .getProperty()
-        .getRGBTransferFunction(0)
-        .setMappingRange(voi.lower, voi.upper);
+    return imageId.includes(':');
 }
 function handlePreScaledVolume(imageVolume, voi) {
     const imageIds = imageVolume.imageIds;
     const imageIdIndex = Math.floor(imageIds.length / 2);
     const imageId = imageIds[imageIdIndex];
-    const generalSeriesModule = metaData.get('generalSeriesModule', imageId) || {};
+    const generalSeriesModule = metaData.get(MetadataModules.GENERAL_SERIES, imageId) || {};
     if (_isCurrentImagePTPrescaled(generalSeriesModule.modality, imageVolume)) {
         return {
             lower: 0,
@@ -40,7 +71,7 @@ function getVOIFromMetadata(imageVolume) {
     if (imageIds?.length) {
         const imageIdIndex = Math.floor(imageIds.length / 2);
         const imageId = imageIds[imageIdIndex];
-        const voiLutModule = metaData.get('voiLutModule', imageId);
+        const voiLutModule = metaData.get(MetadataModules.VOI_LUT, imageId);
         if (voiLutModule && voiLutModule.windowWidth && voiLutModule.windowCenter) {
             if (voiLutModule?.voiLUTFunction) {
                 voi = {};
@@ -72,9 +103,9 @@ async function getVOIFromMiddleSliceMinMax(imageVolume) {
     const { imageIds } = imageVolume;
     const imageIdIndex = Math.floor(imageIds.length / 2);
     const imageId = imageVolume.imageIds[imageIdIndex];
-    const generalSeriesModule = metaData.get('generalSeriesModule', imageId) || {};
+    const generalSeriesModule = metaData.get(MetadataModules.GENERAL_SERIES, imageId) || {};
     const { modality } = generalSeriesModule;
-    const modalityLutModule = metaData.get('modalityLutModule', imageId) || {};
+    const modalityLutModule = metaData.get(MetadataModules.MODALITY_LUT, imageId) || {};
     const scalingParameters = {
         rescaleSlope: modalityLutModule.rescaleSlope,
         rescaleIntercept: modalityLutModule.rescaleIntercept,
@@ -82,7 +113,7 @@ async function getVOIFromMiddleSliceMinMax(imageVolume) {
     };
     let scalingParametersToUse;
     if (modality === 'PT') {
-        const suvFactor = metaData.get('scalingModule', imageId);
+        const suvFactor = metaData.get(MetadataModules.SCALING, imageId);
         if (suvFactor) {
             scalingParametersToUse = {
                 ...scalingParameters,

package/dist/esm/RenderingEngine/helpers/setVolumesForViewports.js

@@ -1,19 +1,16 @@
-import BaseVolumeViewport from '../BaseVolumeViewport';
+import isVolumeCompatible from './supportsVolumeCompatibilityApi';
 async function setVolumesForViewports(renderingEngine, volumeInputs, viewportIds, immediateRender = false, suppressEvents = false) {
-    viewportIds.forEach((viewportId) => {
+    const compatibleViewports = viewportIds.map((viewportId) => {
         const viewport = renderingEngine.getViewport(viewportId);
         if (!viewport) {
             throw new Error(`Viewport with Id ${viewportId} does not exist`);
         }
-        if (!(viewport instanceof BaseVolumeViewport)) {
-            throw new Error('setVolumesForViewports only supports VolumeViewport and VolumeViewport3D');
+        if (!isVolumeCompatible(viewport)) {
+            throw new Error('setVolumesForViewports only supports viewports that implement setVolumes');
         }
+        return viewport;
     });
-    const setVolumePromises = viewportIds.map(async (viewportId) => {
-        const viewport = renderingEngine.getViewport(viewportId);
-        await viewport.setVolumes(volumeInputs, immediateRender, suppressEvents);
-    });
-    await Promise.all(setVolumePromises);
+    await Promise.all(compatibleViewports.map((viewport) => viewport.setVolumes(volumeInputs, immediateRender, suppressEvents)));
     return;
 }
 export default setVolumesForViewports;

package/dist/esm/RenderingEngine/helpers/stats/RenderModesPanel.d.ts

@@ -0,0 +1,19 @@
+import type { Panel } from './types';
+export declare class RenderModesPanel implements Panel {
+    dom: HTMLDivElement;
+    private readonly list;
+    constructor();
+    update(): void;
+    setContent(entries: Array<{
+        renderingEngineId: string;
+        viewportId: string;
+        bindings: RenderModePanelBinding[];
+    }>): void;
+}
+export type RenderModePanelBinding = {
+    actorUID?: string;
+    dataId: string;
+    referencedId?: string;
+    renderMode: string;
+    role: 'source' | 'overlay' | 'data';
+};

package/dist/esm/RenderingEngine/helpers/stats/RenderModesPanel.js

@@ -0,0 +1,228 @@
+import { PANEL_CONFIG, PANEL_CONFIGS } from './constants';
+import { PanelType } from './enums';
+export class RenderModesPanel {
+    constructor() {
+        const config = PANEL_CONFIGS[PanelType.RENDER_MODES];
+        this.dom = document.createElement('div');
+        this.dom.style.cssText = `
+      width:min(720px, max(${PANEL_CONFIG.WIDE_WIDTH}px, calc(100vw - ${PANEL_CONFIG.WIDTH + 24}px)));
+      min-width:0;
+      min-height:${PANEL_CONFIG.HEIGHT}px;
+      background:${config.backgroundColor};
+      color:${config.foregroundColor};
+      font:${PANEL_CONFIG.FONT_SIZE + 2}px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      padding:8px;
+      box-sizing:border-box;
+      max-height:min(520px, calc(100vh - 16px));
+      overflow:auto;
+      border:1px solid rgba(255, 204, 0, 0.35);
+      border-radius:4px;
+      box-shadow:0 8px 28px rgba(0, 0, 0, 0.35);
+    `;
+        const title = document.createElement('div');
+        title.textContent = config.name;
+        title.style.cssText = `
+      margin-bottom:8px;
+      font-weight:700;
+      letter-spacing:0.08em;
+      text-transform:uppercase;
+    `;
+        this.dom.appendChild(title);
+        this.list = document.createElement('div');
+        this.list.style.cssText = `
+      display:flex;
+      flex-direction:column;
+      gap:8px;
+      line-height:1.35;
+      font-weight:normal;
+      color:#fff3bf;
+    `;
+        this.dom.appendChild(this.list);
+    }
+    update() {
+    }
+    setContent(entries) {
+        this.list.replaceChildren();
+        if (!entries.length) {
+            this.list.appendChild(createEmptyState('(no viewports)'));
+            return;
+        }
+        for (const entry of entries) {
+            const bindings = orderBindings(entry.bindings);
+            const section = document.createElement('div');
+            section.style.cssText = `
+        padding:7px;
+        background:rgba(0, 0, 0, 0.18);
+        border:1px solid rgba(255, 204, 0, 0.18);
+        border-radius:4px;
+      `;
+            const viewportId = `${entry.renderingEngineId}/${entry.viewportId}`;
+            const heading = document.createElement('div');
+            heading.title = viewportId;
+            heading.style.cssText = `
+        display:flex;
+        justify-content:space-between;
+        gap:8px;
+        margin-bottom:6px;
+        color:#ffd84d;
+        font-weight:700;
+      `;
+            const name = document.createElement('span');
+            name.textContent = truncate(viewportId, 72);
+            name.style.cssText = `
+        min-width:0;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+      `;
+            heading.appendChild(name);
+            const count = document.createElement('span');
+            count.textContent = `${bindings.length} binding${bindings.length === 1 ? '' : 's'}`;
+            count.style.cssText = `
+        flex:0 0 auto;
+        color:#c9b05a;
+        font-size:${PANEL_CONFIG.FONT_SIZE}px;
+        font-weight:600;
+      `;
+            heading.appendChild(count);
+            section.appendChild(heading);
+            if (!bindings.length) {
+                section.appendChild(createEmptyState('(no bindings)'));
+                this.list.appendChild(section);
+                continue;
+            }
+            for (const binding of bindings) {
+                section.appendChild(createBindingRow(binding));
+            }
+            this.list.appendChild(section);
+        }
+    }
+}
+function orderBindings(bindings) {
+    const rank = {
+        source: 0,
+        overlay: 1,
+        data: 2,
+    };
+    return [...bindings].sort((a, b) => {
+        const roleDelta = rank[a.role] - rank[b.role];
+        if (roleDelta !== 0) {
+            return roleDelta;
+        }
+        return a.dataId.localeCompare(b.dataId);
+    });
+}
+function truncate(value, max) {
+    if (value.length <= max) {
+        return value;
+    }
+    const head = Math.ceil((max - 1) / 2);
+    const tail = Math.floor((max - 1) / 2);
+    return `${value.slice(0, head)}...${value.slice(-tail)}`;
+}
+const ROLE_STYLES = {
+    source: {
+        background: 'rgba(0, 104, 126, 0.34)',
+        border: 'rgba(92, 225, 255, 0.4)',
+        color: '#9decff',
+        label: 'SOURCE',
+    },
+    overlay: {
+        background: 'rgba(165, 102, 0, 0.3)',
+        border: 'rgba(255, 205, 83, 0.45)',
+        color: '#ffd76d',
+        label: 'OVERLAY',
+    },
+    data: {
+        background: 'rgba(96, 101, 116, 0.28)',
+        border: 'rgba(187, 195, 214, 0.32)',
+        color: '#dce5ff',
+        label: 'DATA',
+    },
+};
+function createBindingRow(binding) {
+    const row = document.createElement('div');
+    row.style.cssText = `
+    display:grid;
+    grid-template-columns:74px minmax(0, 1fr);
+    gap:8px;
+    padding:6px;
+    margin-top:4px;
+    background:rgba(255, 255, 255, 0.045);
+    border-radius:4px;
+  `;
+    const roleStyle = ROLE_STYLES[binding.role];
+    const role = document.createElement('div');
+    role.textContent = roleStyle.label;
+    role.style.cssText = `
+    align-self:start;
+    padding:3px 5px;
+    background:${roleStyle.background};
+    border:1px solid ${roleStyle.border};
+    border-radius:3px;
+    color:${roleStyle.color};
+    font-size:${PANEL_CONFIG.FONT_SIZE}px;
+    font-weight:800;
+    letter-spacing:0.04em;
+    text-align:center;
+  `;
+    row.appendChild(role);
+    const fields = document.createElement('div');
+    fields.style.cssText = `
+    display:flex;
+    flex-direction:column;
+    gap:3px;
+    min-width:0;
+  `;
+    appendField(fields, 'mode', binding.renderMode, 48);
+    appendField(fields, 'data', binding.dataId, 76);
+    if (binding.actorUID && binding.actorUID !== binding.dataId) {
+        appendField(fields, 'actor', binding.actorUID, 76);
+    }
+    if (binding.referencedId &&
+        binding.referencedId !== binding.dataId &&
+        binding.referencedId !== binding.actorUID) {
+        appendField(fields, 'ref', binding.referencedId, 76);
+    }
+    row.appendChild(fields);
+    return row;
+}
+function appendField(parent, label, value, maxLength) {
+    const field = document.createElement('div');
+    field.style.cssText = `
+    display:grid;
+    grid-template-columns:42px minmax(0, 1fr);
+    gap:6px;
+    min-width:0;
+  `;
+    const labelNode = document.createElement('span');
+    labelNode.textContent = label;
+    labelNode.style.cssText = `
+    color:#a9954c;
+    font-size:${PANEL_CONFIG.FONT_SIZE}px;
+    font-weight:700;
+    text-transform:uppercase;
+  `;
+    field.appendChild(labelNode);
+    const valueNode = document.createElement('span');
+    valueNode.textContent = truncate(value, maxLength);
+    valueNode.title = value;
+    valueNode.style.cssText = `
+    min-width:0;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    color:#fff7d6;
+  `;
+    field.appendChild(valueNode);
+    parent.appendChild(field);
+}
+function createEmptyState(message) {
+    const empty = document.createElement('div');
+    empty.textContent = message;
+    empty.style.cssText = `
+    color:#b7a865;
+    font-style:italic;
+  `;
+    return empty;
+}

package/dist/esm/RenderingEngine/helpers/stats/StatsOverlay.d.ts

@@ -2,27 +2,46 @@ import type { StatsInstance } from './types';
 export declare class StatsOverlay implements StatsInstance {
     private static instance;
     dom: HTMLDivElement | null;
-    private currentMode;
     private startTime;
     private lastUpdateTime;
     private frameCount;
     private panels;
+    private metricsColumn;
+    private bindingsColumn;
     private animationFrameId;
     private isSetup;
+    private dragPointerId;
+    private dragOffsetX;
+    private dragOffsetY;
+    private readonly handlePointerDown;
+    private readonly handlePointerMove;
+    private readonly handlePointerUp;
     private constructor();
     static getInstance(): StatsOverlay;
     setup(): void;
     cleanup(): void;
-    showPanel(panelType: number): void;
+    showPanel(_panelType: number): void;
     update(): void;
     private createOverlayElement;
     private applyOverlayStyles;
-    private handleClick;
     private initializePanels;
+    private initializePanelColumns;
     private isMemoryAvailable;
     private addPanel;
     private startLoop;
     private stopLoop;
     private updateStats;
+    private updateRenderModesPanel;
+    private getViewportBindingDebugEntries;
     private updateMemoryPanel;
+    private attachDragHandlers;
+    private detachDragHandlers;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private setPosition;
+    private clampToViewport;
+    private restorePosition;
+    private readSavedPosition;
+    private savePosition;
 }