Need more samples to render an RD curve.
+ {/if}
+
diff --git a/web/src/lib/components/viewer/ToolsPanel.svelte b/web/src/lib/components/viewer/ToolsPanel.svelte
deleted file mode 100644
index d7f2df2..0000000
--- a/web/src/lib/components/viewer/ToolsPanel.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
Quality
+
Fidelity
- PSNR-based Quality
+ Block fidelity (from this block's PSNR)
clamp((10 log10(255²/MSE) − 20) / 30, 0, 1)
Maps the 20–50 dB PSNR range to 0–100%. MSE = 0 is treated as lossless.
@@ -166,7 +167,7 @@ export function renderGrid(
const row = Number.parseInt(cell.dataset.row || '0');
const col = Number.parseInt(cell.dataset.col || '0');
- // Edit mode: decoder-side coefficients toggle instead of animating.
+ // Edit mode: stored coefficients toggle instead of animating.
if (coeffEdit.editing && EDITABLE_GRID_IDS.includes(el.id)) {
coeffEdit.toggle(row * 8 + col);
return;
@@ -177,7 +178,7 @@ export function renderGrid(
detail: { row, col, targetGridId }
}));
showBannerForCell(row, col);
- if (el.id === 'gridDequantized') {
+ if (el.id === INSPECTOR_IDS.gridDequantized) {
applyPartialReconToGrid(row, col);
}
};
@@ -228,7 +229,7 @@ export function renderGrid(
if (e.key === 'Escape') {
// First Escape closes the popover; the next one reaches the
// inspector's own handler and exits.
- const popoverOpen = document.getElementById('basisPopover')?.classList.contains('visible');
+ const popoverOpen = document.getElementById(INSPECTOR_IDS.basisPopover)?.classList.contains('visible');
const tooltipOpen = document.querySelector('.grid-cell-tooltip.visible');
if (popoverOpen || tooltipOpen) {
e.stopPropagation();
@@ -402,7 +403,7 @@ function focusGridCell(grid: HTMLElement, idx: number): void {
}
export function renderZigzagArray(data: Float64Array): void {
- const el = document.getElementById('gridZigzag');
+ const el = document.getElementById(INSPECTOR_IDS.gridZigzag);
if (!el) return;
el.innerHTML = '';
@@ -535,7 +536,7 @@ export function startZigzagAnimation(): void {
highlightAcrossGrids(row, col);
// Scroll the active zz-cell or zz-run into view within the container
- const zzContainer = document.getElementById('gridZigzag');
+ const zzContainer = document.getElementById(INSPECTOR_IDS.gridZigzag);
if (zzContainer) {
const activeZz = (zzContainer.querySelector(`.zz-cell[data-idx="${idx}"]`) ||
zzContainer.querySelector(`.zz-run[data-indices~="${idx}"]`)) as HTMLElement | null;
@@ -581,7 +582,7 @@ function applyPartialReconToGrid(row: number, col: number): void {
}
if (zzPos < 0) return;
- const targetGrid = document.getElementById('gridReconstructed');
+ const targetGrid = document.getElementById(INSPECTOR_IDS.gridReconstructed);
if (!targetGrid) return;
const cells = Array.from(targetGrid.querySelectorAll('.grid-cell')) as HTMLElement[];
if (cells.length !== 64) return;
@@ -684,7 +685,7 @@ export function startReconstructionAnimation(): void {
const data = getCachedGridData();
if (!data || !data.dequantizedData) return;
- const targetGrid = document.getElementById('gridReconstructed');
+ const targetGrid = document.getElementById(INSPECTOR_IDS.gridReconstructed);
if (!targetGrid) return;
const cells = Array.from(targetGrid.querySelectorAll('.grid-cell')) as HTMLElement[];
@@ -795,7 +796,7 @@ function setReconstructionButtonIcon(playing: boolean): void {
}
function updateReconstructionProgress(index: number): void {
- const el = document.getElementById('reconstructionProgress');
+ const el = document.getElementById(INSPECTOR_IDS.reconstructionProgress);
if (!el) return;
if (index < 0) { el.style.display = 'none'; return; }
@@ -815,7 +816,7 @@ function updateReconstructionProgress(index: number): void {
}
function hideReconAnimBanner(): void {
- const banner = document.getElementById('reconAnimBanner');
+ const banner = document.getElementById(INSPECTOR_IDS.reconAnimBanner);
if (banner) banner.style.display = 'none';
}
@@ -857,23 +858,23 @@ function updateReconAnimBanner(
coeff: number,
basisPattern: Float64Array | null
): void {
- const banner = document.getElementById('reconAnimBanner');
+ const banner = document.getElementById(INSPECTOR_IDS.reconAnimBanner);
if (!banner) return;
if (processedCount >= 64) {
// Done state
- const stepEl = document.getElementById('reconBannerStep');
- const fillEl = document.getElementById('reconBannerFill') as HTMLElement | null;
- const freqEl = document.getElementById('reconBannerFreq');
- const coeffEl = document.getElementById('reconBannerCoeff');
- const descEl = document.getElementById('reconBannerDesc');
+ const stepEl = document.getElementById(INSPECTOR_IDS.reconBannerStep);
+ const fillEl = document.getElementById(INSPECTOR_IDS.reconBannerFill) as HTMLElement | null;
+ const freqEl = document.getElementById(INSPECTOR_IDS.reconBannerFreq);
+ const coeffEl = document.getElementById(INSPECTOR_IDS.reconBannerCoeff);
+ const descEl = document.getElementById(INSPECTOR_IDS.reconBannerDesc);
if (stepEl) stepEl.textContent = '64';
if (fillEl) fillEl.style.width = '100%';
if (freqEl) { freqEl.textContent = 'Complete'; freqEl.style.background = '#10b981'; freqEl.style.color = 'white'; }
if (coeffEl) { coeffEl.textContent = ''; coeffEl.style.color = ''; }
if (descEl) descEl.textContent = 'All 64 coefficients applied — reconstruction complete';
// Clear the canvas
- const canvas = document.getElementById('reconBasisCanvas') as HTMLCanvasElement | null;
+ const canvas = document.getElementById(INSPECTOR_IDS.reconBasisCanvas) as HTMLCanvasElement | null;
if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height); }
banner.style.display = '';
return;
@@ -886,11 +887,11 @@ function updateReconAnimBanner(
const label = getTransformFreqLabel(row, col);
const isZero = Math.abs(coeff) < 0.0001;
- const stepEl = document.getElementById('reconBannerStep');
- const fillEl = document.getElementById('reconBannerFill') as HTMLElement | null;
- const freqEl = document.getElementById('reconBannerFreq');
- const coeffEl = document.getElementById('reconBannerCoeff');
- const descEl = document.getElementById('reconBannerDesc');
+ const stepEl = document.getElementById(INSPECTOR_IDS.reconBannerStep);
+ const fillEl = document.getElementById(INSPECTOR_IDS.reconBannerFill) as HTMLElement | null;
+ const freqEl = document.getElementById(INSPECTOR_IDS.reconBannerFreq);
+ const coeffEl = document.getElementById(INSPECTOR_IDS.reconBannerCoeff);
+ const descEl = document.getElementById(INSPECTOR_IDS.reconBannerDesc);
if (stepEl) stepEl.textContent = String(processedCount);
if (fillEl) fillEl.style.width = `${(processedCount / 64) * 100}%`;
@@ -918,7 +919,7 @@ function updateReconAnimBanner(
: FREQ_DESCRIPTIONS[label] ?? '';
}
- const canvas = document.getElementById('reconBasisCanvas') as HTMLCanvasElement | null;
+ const canvas = document.getElementById(INSPECTOR_IDS.reconBasisCanvas) as HTMLCanvasElement | null;
if (canvas && basisPattern && !isZero) {
drawContributionOnCanvas(canvas, basisPattern, coeff);
} else if (canvas && isZero) {
@@ -978,7 +979,7 @@ if (typeof window !== 'undefined') {
}
export function renderEntropySummary(symbols: any[]): void {
- const container = document.getElementById('entropySummary');
+ const container = document.getElementById(INSPECTOR_IDS.entropySummary);
if (!container) return;
let dcBits = 0;
diff --git a/web/src/lib/hover-hint.ts b/web/src/lib/hover-hint.ts
new file mode 100644
index 0000000..dc1c84a
--- /dev/null
+++ b/web/src/lib/hover-hint.ts
@@ -0,0 +1,139 @@
+// Fast hover hints for every `title` in the app.
+//
+// The browser's native title tooltip waits about a second and can't be
+// sped up, so this shows the same text in a styled tooltip after a short
+// delay. Markup keeps using plain `title` attributes (and SVG
+// children); while a hint is showing, the native source is set aside so
+// both don't appear, and it is put back when the pointer leaves.
+
+const SHOW_DELAY_MS = 150;
+const GAP_PX = 8;
+/** Moving to another hint this soon after one was visible shows it at once. */
+const SWITCH_WINDOW_MS = 300;
+
+let tip: HTMLDivElement | null = null;
+let showTimer: ReturnType<typeof setTimeout> | null = null;
+let active: { el: Element; restore: () => void } | null = null;
+let lastVisibleAt = -Infinity;
+let installed = false;
+
+function ensureTip(): HTMLDivElement {
+ if (!tip) {
+ tip = document.createElement('div');
+ tip.className = 'hover-hint';
+ tip.setAttribute('role', 'tooltip');
+ tip.id = 'hover-hint';
+ document.body.appendChild(tip);
+ }
+ return tip;
+}
+
+/** The nearest element (from `start` up) that carries hint text, and that text. */
+function findHint(start: Element | null): { el: Element; text: string } | null {
+ for (let el = start; el && el !== document.body; el = el.parentElement) {
+ const title = el.getAttribute('title');
+ if (title) return { el, text: title };
+ // SVG elements describe themselves with a <title> child.
+ if (el instanceof SVGElement) {
+ const child = Array.from(el.children).find(c => c.tagName.toLowerCase() === 'title');
+ if (child?.textContent) return { el, text: child.textContent };
+ }
+ }
+ return null;
+}
+
+/** Hide the native tooltip source; returns a function that puts it back. */
+function suppressNative(el: Element): () => void {
+ const title = el.getAttribute('title');
+ if (title !== null) {
+ el.removeAttribute('title');
+ // Svelte may have set a new title meanwhile; only restore if none.
+ return () => { if (!el.hasAttribute('title')) el.setAttribute('title', title); };
+ }
+ const child = Array.from(el.children).find(c => c.tagName.toLowerCase() === 'title');
+ if (child) {
+ const next = child.nextSibling;
+ child.remove();
+ return () => { if (el.isConnected) el.insertBefore(child, next?.parentNode === el ? next : el.firstChild); };
+ }
+ return () => {};
+}
+
+function place(el: Element): void {
+ if (!tip) return;
+ const r = el.getBoundingClientRect();
+ const t = tip.getBoundingClientRect();
+ let top = r.top - t.height - GAP_PX;
+ if (top < 4) top = r.bottom + GAP_PX; // no room above: go below
+ const left = Math.max(4, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 4));
+ tip.style.top = `${top}px`;
+ tip.style.left = `${left}px`;
+}
+
+function hide(): void {
+ if (showTimer) clearTimeout(showTimer);
+ showTimer = null;
+ if (active) {
+ active.restore();
+ active.el.removeAttribute('aria-describedby');
+ active = null;
+ }
+ if (tip?.classList.contains('visible')) lastVisibleAt = Date.now();
+ tip?.classList.remove('visible');
+}
+
+function show(el: Element, text: string, immediate: boolean, suppress = true): void {
+ hide();
+ // Keyboard focus never shows the native tooltip, and the title may be
+ // the element's accessible name, so leave it in place then.
+ active = { el, restore: suppress ? suppressNative(el) : () => {} };
+ el.setAttribute('aria-describedby', 'hover-hint');
+ const reveal = () => {
+ showTimer = null;
+ const t = ensureTip();
+ t.textContent = text;
+ t.classList.add('visible');
+ place(el);
+ };
+ if (immediate) reveal();
+ else showTimer = setTimeout(reveal, SHOW_DELAY_MS);
+}
+
+export function installHoverHints(): void {
+ if (installed) return;
+ installed = true;
+ document.addEventListener('pointerover', (e) => {
+ if (e.pointerType === 'touch') return;
+ // Still inside the hinted element (its title is set aside meanwhile).
+ if (active && active.el.contains(e.target as Node)) return;
+ const found = findHint(e.target as Element);
+ if (!found) {
+ if (active) hide();
+ return;
+ }
+ // Moving between hinted elements: switch without waiting again.
+ const switching = !!tip?.classList.contains('visible') || Date.now() - lastVisibleAt < SWITCH_WINDOW_MS;
+ show(found.el, found.text, switching);
+ });
+
+ document.addEventListener('pointerout', (e) => {
+ if (!active) return;
+ const to = e.relatedTarget as Node | null;
+ if (to && active.el.contains(to)) return;
+ hide();
+ });
+
+ // Keyboard users get the same hint on focus.
+ document.addEventListener('focusin', (e) => {
+ const target = e.target as Element;
+ if (!(target instanceof HTMLElement) || !target.matches(':focus-visible')) return;
+ const found = findHint(target);
+ if (found && found.el === target) show(found.el, found.text, false, false);
+ });
+ document.addEventListener('focusout', hide);
+
+ // Clicks, scrolling and Escape all dismiss it.
+ document.addEventListener('pointerdown', hide);
+ document.addEventListener('keydown', (e) => { if (e.key === 'Escape') hide(); });
+ window.addEventListener('scroll', hide, true);
+}
diff --git a/web/src/lib/inspection.ts b/web/src/lib/inspection.ts
index cecec0e..678a3d4 100644
--- a/web/src/lib/inspection.ts
+++ b/web/src/lib/inspection.ts
@@ -5,10 +5,20 @@ import { renderGrid, renderLossMeter, renderZigzagArray, renderEntropySummary, s
import { estimateBlockBits, getEntropySymbols, reconstructBlock } from './dct-utils.js';
import { coeffEdit } from './coeff-edit.svelte.js';
import { untrack } from 'svelte';
+import { INSPECTOR_IDS } from './inspector-dom.js';
-// Index of the quantized grid within BlockDebugData (original, coefficients,
-// quantTable, quantized, reconstructed — 64 doubles each).
-const QUANTIZED_GRID = 3;
+/**
+ * Layout of the buffer inspect_block_data returns: ImageCodec::BlockDebugData
+ * (core/inc/ImageCodec.h), five 8×8 grids of doubles in this order. Must match
+ * the struct's field order; tests/unit/wasm-contracts.test.js checks it.
+ */
+export const BLOCK_GRID = {
+ original: 0,
+ coefficients: 1,
+ quantTable: 2,
+ quantized: 3,
+ reconstructed: 4
+} as const;
/**
* The block coded just before (blockX, blockY) in a non-interleaved raster
@@ -49,9 +59,8 @@ export function inspectBlock(blockX: number, blockY: number): void {
hideBasisPopover();
stopReconstructionAnimation();
- const coordsSpan = document.getElementById('blockCoords');
- const qTableType = document.getElementById('qTableType');
- const qTableType2 = document.getElementById('qTableType2');
+ const coordsSpan = document.getElementById(INSPECTOR_IDS.blockCoords);
+ const qTableType = document.getElementById(INSPECTOR_IDS.qTableType);
if (coordsSpan) coordsSpan.innerText = `${blockX * 8}, ${blockY * 8} (Block ${blockX},${blockY})`;
@@ -61,7 +70,6 @@ export function inspectBlock(blockX: number, blockY: number): void {
const tableLabel = (channelIndex === 0) ? 'Luma' : 'Chroma';
if (qTableType) qTableType.innerText = tableLabel;
- if (qTableType2) qTableType2.innerText = tableLabel;
// Read the previous block's quantized DC first: inspectBlockData returns a
// pointer to one shared buffer that the next call overwrites.
@@ -69,7 +77,7 @@ export function inspectBlock(blockX: number, blockY: number): void {
let prevDc = 0;
if (prev) {
const prevPtr = inspectBlockData(prev.x, prev.y, channelIndex, appState.quality);
- if (prevPtr) prevDc = new Float64Array(Module.HEAPU8.buffer, prevPtr + QUANTIZED_GRID * 64 * 8, 1)[0];
+ if (prevPtr) prevDc = new Float64Array(Module.HEAPU8.buffer, prevPtr + BLOCK_GRID.quantized * 64 * 8, 1)[0];
}
const ptr = inspectBlockData(blockX, blockY, channelIndex, appState.quality);
@@ -95,11 +103,11 @@ export function inspectBlock(blockX: number, blockY: number): void {
}
current = {
- original: readGrid(0),
- coefficients: readGrid(1),
- quantTable: readGrid(2),
- quantized: readGrid(QUANTIZED_GRID),
- reconstructed: readGrid(4),
+ original: readGrid(BLOCK_GRID.original),
+ coefficients: readGrid(BLOCK_GRID.coefficients),
+ quantTable: readGrid(BLOCK_GRID.quantTable),
+ quantized: readGrid(BLOCK_GRID.quantized),
+ reconstructed: readGrid(BLOCK_GRID.reconstructed),
prevDc,
originalRGB,
reconstructedRGB,
@@ -168,29 +176,28 @@ function renderNow(): void {
}
};
- setStatEl('statMSE', mse >= 100 ? mse.toFixed(0) : mse.toFixed(2), mseClass, mseClass);
- setStatEl('statPeakError', peakError >= 100 ? peakError.toFixed(0) : peakError.toFixed(1), peakClass, peakClass);
- setStatEl('statZeros', `${zeroCount}/64`, null, null);
- setStatEl('statCompression', `${zeroPercent}%`, compClass, compClass);
+ setStatEl(INSPECTOR_IDS.statMSE, mse >= 100 ? mse.toFixed(0) : mse.toFixed(2), mseClass, mseClass);
+ setStatEl(INSPECTOR_IDS.statPeakError, peakError >= 100 ? peakError.toFixed(0) : peakError.toFixed(1), peakClass, peakClass);
+ setStatEl(INSPECTOR_IDS.statZeros, `${zeroCount}/64`, null, null);
+ setStatEl(INSPECTOR_IDS.statCompression, `${zeroPercent}%`, compClass, compClass);
const estBits = estimateBlockBits(quantized, prevDc);
const bpp = estBits / 64;
// Good bpp is strictly less than 1.5, moderate is < 3.0, otherwise poor.
const bppClass = bpp < 1.5 ? 'good' : bpp < 3.0 ? 'moderate' : 'poor';
- setStatEl('statEstBits', `${estBits}`, null, null);
- setStatEl('statBpp', bpp.toFixed(2), bppClass, bppClass);
-
- renderGrid('gridOriginal', (isRGB ? originalRGB : null) ?? original, 'intensity', 'original', isRGB && !!originalRGB);
- renderGrid('gridDCT', coefficients, 'frequency', 'transform');
- renderGrid('gridQuantized', current.quantized, 'frequency', 'quantized');
- renderGrid('gridQuantized2', quantized, 'frequency', 'quantized');
- renderGrid('gridQuantizedAdvanced', quantized, 'frequency', 'quantized');
- renderGrid('gridDequantized', dequantized, 'frequency', 'dequantized');
- renderGrid('gridReconstructed', reconstructedRGB ?? reconstructed, 'intensity', 'reconstructed', !!reconstructedRGB);
- renderGrid('gridQuantTable', quantTable, 'qtable', 'qtable');
- renderGrid('gridError', Array.from(errorData), 'error', 'error');
- markDroppedCells(['gridQuantized2', 'gridDequantized']);
+ setStatEl(INSPECTOR_IDS.statEstBits, `${estBits}`, null, null);
+ setStatEl(INSPECTOR_IDS.statBpp, bpp.toFixed(2), bppClass, bppClass);
+
+ renderGrid(INSPECTOR_IDS.gridOriginal, (isRGB ? originalRGB : null) ?? original, 'intensity', 'original', isRGB && !!originalRGB);
+ renderGrid(INSPECTOR_IDS.gridDCT, coefficients, 'frequency', 'transform');
+ renderGrid(INSPECTOR_IDS.gridQuantized, quantized, 'frequency', 'quantized');
+ renderGrid(INSPECTOR_IDS.gridQuantizedAdvanced, quantized, 'frequency', 'quantized');
+ renderGrid(INSPECTOR_IDS.gridDequantized, dequantized, 'frequency', 'dequantized');
+ renderGrid(INSPECTOR_IDS.gridReconstructed, reconstructedRGB ?? reconstructed, 'intensity', 'reconstructed', !!reconstructedRGB);
+ renderGrid(INSPECTOR_IDS.gridQuantTable, quantTable, 'qtable', 'qtable');
+ renderGrid(INSPECTOR_IDS.gridError, Array.from(errorData), 'error', 'error');
+ markDroppedCells([INSPECTOR_IDS.gridQuantized, INSPECTOR_IDS.gridDequantized]);
renderLossMeter(mse, peakError);
renderZigzagArray(quantized);
diff --git a/web/src/lib/inspector-dom.ts b/web/src/lib/inspector-dom.ts
new file mode 100644
index 0000000..77bbef4
--- /dev/null
+++ b/web/src/lib/inspector-dom.ts
@@ -0,0 +1,63 @@
+// Element IDs that the Block Inspector's imperative code (inspection.ts,
+// grid-renderer.ts, basis-popover.ts) looks up in InspectorMode.svelte.
+//
+// Those lookups skip missing elements silently, so a renamed or removed
+// element would just stop updating with no error. Always refer to these IDs
+// through INSPECTOR_IDS (never a string literal): tests/unit/inspector-dom.test.js
+// checks that every one is rendered by a component, and that lib code doesn't
+// look up IDs that bypass this list.
+//
+// To add an element the TS code updates: give it an id in the markup and add
+// it here.
+
+export const INSPECTOR_IDS = {
+ // Top bar and block header
+ blockCoords: 'blockCoords',
+ qTableType: 'qTableType',
+
+ // Pipeline grids
+ gridOriginal: 'gridOriginal',
+ gridDCT: 'gridDCT',
+ gridQuantized: 'gridQuantized',
+ gridDequantized: 'gridDequantized',
+ gridReconstructed: 'gridReconstructed',
+ gridError: 'gridError',
+ gridQuantTable: 'gridQuantTable',
+
+ // Block statistics
+ statEstBits: 'statEstBits',
+ statBpp: 'statBpp',
+ statZeros: 'statZeros',
+ statCompression: 'statCompression',
+ statMSE: 'statMSE',
+ statPeakError: 'statPeakError',
+ lossMeterContainer: 'lossMeterContainer',
+
+ // Reconstruction animation
+ reconstructionProgress: 'reconstructionProgress',
+ reconAnimBanner: 'reconAnimBanner',
+ reconBasisCanvas: 'reconBasisCanvas',
+ reconBannerStep: 'reconBannerStep',
+ reconBannerFreq: 'reconBannerFreq',
+ reconBannerCoeff: 'reconBannerCoeff',
+ reconBannerDesc: 'reconBannerDesc',
+ reconBannerFill: 'reconBannerFill',
+
+ // Entropy encoding (advanced section)
+ gridQuantizedAdvanced: 'gridQuantizedAdvanced',
+ gridZigzag: 'gridZigzag',
+ entropySummary: 'entropySummary',
+
+ // Basis-function popover
+ basisPopover: 'basisPopover',
+ basisCoord: 'basisCoord',
+ basisFreqLabel: 'basisFreqLabel',
+ basisValue: 'basisValue',
+ basisValueLabel: 'basisValueLabel',
+ basisQuantized: 'basisQuantized',
+ basisDivisor: 'basisDivisor',
+ basisCanvas: 'basisCanvas',
+ contributionCanvas: 'contributionCanvas'
+} as const;
+
+export type InspectorId = typeof INSPECTOR_IDS[keyof typeof INSPECTOR_IDS];
diff --git a/web/src/lib/state.svelte.ts b/web/src/lib/state.svelte.ts
index 945e04b..aedd883 100644
--- a/web/src/lib/state.svelte.ts
+++ b/web/src/lib/state.svelte.ts
@@ -1,5 +1,7 @@
import { Transform, type TransformValue } from './transforms.js';
+// View modes understood by the WASM get_view_ptr. Mirrors the ViewMode enum in
+// web/cpp/codec_web.cpp; tests/unit/wasm-contracts.test.js checks they agree.
export const ViewMode = {
RGB: 0,
Artifacts: 1,
diff --git a/web/src/lib/transforms.ts b/web/src/lib/transforms.ts
index 8b437c3..1581a84 100644
--- a/web/src/lib/transforms.ts
+++ b/web/src/lib/transforms.ts
@@ -1,4 +1,6 @@
// Transform types understood by the WASM codec (`transform_mode` argument).
+// Mirrors map_transform_mode in web/cpp/codec_web.cpp (checked by
+// tests/unit/wasm-contracts.test.js).
export const Transform = {
DCT: 0,
Haar: 1,
diff --git a/web/src/lib/wasm-bridge.ts b/web/src/lib/wasm-bridge.ts
index bb7c7de..d954583 100644
--- a/web/src/lib/wasm-bridge.ts
+++ b/web/src/lib/wasm-bridge.ts
@@ -98,7 +98,7 @@ export function inspectBlockData(blockX: number, blockY: number, channelIndex: n
return Module._inspect_block_data(blockX, blockY, channelIndex, quality, appState.currentCsMode, t);
}
-// Must match ImageCodec::CoefficientStats::NUM_BINS.
+// Must match ImageCodec::CoefficientStats::NUM_BINS (checked by tests/unit/wasm-contracts.test.js).
export const COEFF_BINS = 12;
export interface CoeffStats {
diff --git a/web/src/main.ts b/web/src/main.ts
index 43332a7..d250c79 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,5 +1,7 @@
import { mount } from 'svelte';
import App from './App.svelte';
+import { installHoverHints } from './lib/hover-hint.js';
import './app.css';
mount(App, { target: document.body });
+installHoverHints();
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index 24c94a0..9cdc341 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -17,7 +17,6 @@ body {
code,
.stat-value,
-.file-size-values,
.stats {
font-family: var(--font-mono);
}
diff --git a/web/src/styles/components.css b/web/src/styles/components.css
index 0c88551..6e2df4f 100644
--- a/web/src/styles/components.css
+++ b/web/src/styles/components.css
@@ -10,63 +10,16 @@
border-radius: 12px;
background: var(--bg-secondary);
overflow: hidden;
- opacity: 0;
- transform: translateY(10px);
- animation: viewerSectionStaggerIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
- transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-}
-
-.controls .viewer-section:nth-child(2) {
- animation-delay: 0.08s;
-}
-
-.controls .viewer-section:nth-child(3) {
- animation-delay: 0.14s;
-}
-
-.controls .viewer-section:nth-child(4) {
- animation-delay: 0.2s;
-}
-
-.viewer-section:hover {
- transform: translateY(-1px);
- box-shadow: 0 10px 24px -18px var(--shadow-color);
- border-color: color-mix(in srgb, var(--primary) 25%, var(--border-subtle, var(--border)));
}
.viewer-section-title {
- list-style: none;
- cursor: pointer;
+ margin: 0;
padding: 12px 14px;
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
- display: flex;
- align-items: center;
- gap: 8px;
- user-select: none;
-}
-
-.viewer-section-title::-webkit-details-marker {
- display: none;
-}
-
-.viewer-section-title::after {
- content: '';
- margin-left: auto;
- width: 6px;
- height: 6px;
- border-right: 1.5px solid var(--text-muted);
- border-bottom: 1.5px solid var(--text-muted);
- transform: rotate(-45deg);
- transition: transform 0.2s ease;
- opacity: 0.7;
-}
-
-.viewer-section[open]>.viewer-section-title::after {
- transform: rotate(45deg);
}
.viewer-section-body {
@@ -75,19 +28,6 @@
display: flex;
flex-direction: column;
gap: 14px;
- animation: viewerSectionIn 0.2s ease;
-}
-
-@keyframes viewerSectionIn {
- from {
- opacity: 0;
- transform: translateY(-3px);
- }
-
- to {
- opacity: 1;
- transform: translateY(0);
- }
}
.control-group {
@@ -96,64 +36,6 @@
gap: 8px;
}
-.viewer-section .control-group {
- opacity: 0;
- transform: translateY(4px);
- animation: controlGroupIn 0.26s ease forwards;
-}
-
-.viewer-section[open] .control-group:nth-child(1) {
- animation-delay: 0.04s;
-}
-
-.viewer-section[open] .control-group:nth-child(2) {
- animation-delay: 0.09s;
-}
-
-.viewer-section[open] .control-group:nth-child(3) {
- animation-delay: 0.14s;
-}
-
-.viewer-section[open] .control-group:nth-child(4) {
- animation-delay: 0.19s;
-}
-
-@keyframes viewerSectionStaggerIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
-
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-@keyframes controlGroupIn {
- from {
- opacity: 0;
- transform: translateY(4px);
- }
-
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
-
- .viewer-section,
- .viewer-section .control-group,
- .viewer-section-body {
- animation: none;
- transition: none;
- opacity: 1;
- transform: none;
- }
-}
-
label {
font-weight: 600;
font-size: var(--text-md);
@@ -407,7 +289,6 @@ input[type="checkbox"] {
color: var(--color-poor);
}
-
.analysis-placeholder {
font-size: var(--text-base);
color: var(--text-muted);
@@ -417,12 +298,6 @@ input[type="checkbox"] {
text-align: center;
}
-.advanced-hint {
- margin: 0;
- font-size: var(--text-base);
- color: var(--text-muted);
-}
-
.control-hint {
margin: 6px 0 0;
font-size: var(--text-base-sm);
@@ -500,61 +375,6 @@ input[type="checkbox"] {
letter-spacing: 0.02em;
}
-/* File Size Estimation Bar */
-.file-size-bar-container {
- margin-top: 6px;
- padding: 14px;
- background: var(--bg-secondary);
- border: 1px solid var(--border);
- border-radius: var(--radius-xl);
- display: flex;
- flex-direction: column;
- gap: 10px;
- transition: all 0.2s ease;
-}
-
-.file-size-bar-container:hover {
- border-color: var(--primary-subtle);
- background: color-mix(in srgb, var(--primary) 3%, var(--bg-secondary));
-}
-
-.file-size-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.file-size-title {
- font-size: var(--text-xs);
- font-weight: 800;
- color: var(--text-muted);
- text-transform: uppercase;
- letter-spacing: 0.12em;
-}
-
-.reduction-badge {
- background: var(--color-good-bg);
- color: var(--color-good);
- border: 1px solid var(--color-good-border);
- font-size: var(--text-sm);
- font-weight: 800;
- padding: 3px 10px;
- border-radius: var(--radius-full);
-}
-
-.file-size-main {
- display: flex;
- flex-direction: column;
- padding: 2px 0;
-}
-
-.size-comparison-flow {
- display: flex;
- align-items: center;
- gap: 8px;
- font-family: var(--font-mono);
-}
-
.size-val {
font-weight: 700;
white-space: nowrap;
@@ -570,39 +390,10 @@ input[type="checkbox"] {
opacity: 0.7;
}
-.size-arrow {
- color: var(--text-muted);
- opacity: 0.5;
- font-size: 1.1rem;
- font-weight: 400;
-}
-
.size-val.highlight {
color: var(--primary);
}
-.file-size-track {
- width: 100%;
- height: 8px;
- background: var(--bg-tertiary);
- border-radius: var(--radius-full);
- overflow: hidden;
- margin: 2px 0;
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.file-size-fill {
- height: 100%;
- background: linear-gradient(90deg, var(--color-good), var(--primary));
- border-radius: var(--radius-full);
- transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.file-size-footer {
- display: flex;
- justify-content: center;
-}
-
.compression-ratio-label {
font-size: var(--text-sm);
font-weight: 700;
@@ -610,15 +401,6 @@ input[type="checkbox"] {
opacity: 0.9;
}
-.tint-toggle-group {
- margin-top: 6px;
-}
-
-.tint-toggle-group label {
- padding: 5px 4px;
- font-size: var(--text-base-sm);
-}
-
/* Beta Badge */
.beta-badge {
font-size: 0.6rem;
@@ -871,12 +653,4 @@ input[type="checkbox"] {
color: var(--text-muted);
text-align: center;
opacity: 0.7;
-}
-
-/* Specific button for RD/Histogram generation to ensure consistency */
-.rd-generate-btn {
- width: 120px !important;
- padding-left: 0 !important;
- padding-right: 0 !important;
- flex-shrink: 0;
}
\ No newline at end of file
diff --git a/web/src/styles/header.css b/web/src/styles/header.css
index 77d3b57..c485dc5 100644
--- a/web/src/styles/header.css
+++ b/web/src/styles/header.css
@@ -47,15 +47,12 @@ h1 {
header {
top: 8px;
padding: 10px 12px;
- flex-direction: column;
- align-items: flex-start;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.header-badges {
- width: 100%;
- justify-content: flex-start;
+ flex-wrap: nowrap;
}
h1 {
@@ -63,30 +60,25 @@ h1 {
}
}
-.privacy-badge {
+.privacy-note {
display: inline-flex;
align-items: center;
- gap: 8px;
- background-color: var(--success-bg);
- color: var(--success-text);
- padding: 6px 12px;
- border-radius: var(--radius-full);
- font-size: var(--text-base);
+ gap: 5px;
+ color: var(--text-muted);
+ font-size: var(--text-sm);
font-weight: 600;
- box-shadow: var(--shadow-sm);
+ cursor: help;
}
.github-link {
display: inline-flex;
align-items: center;
- gap: 8px;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border: 1px solid var(--border);
background-color: var(--bg-secondary);
- color: var(--text-muted);
- padding: 6px 12px;
border-radius: var(--radius-full);
- font-size: var(--text-base);
- font-weight: 600;
- text-decoration: none;
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
diff --git a/web/src/styles/inspector-layout.css b/web/src/styles/inspector-layout.css
index 9cd5784..e92ca5b 100644
--- a/web/src/styles/inspector-layout.css
+++ b/web/src/styles/inspector-layout.css
@@ -145,29 +145,21 @@
border-radius: 3px;
}
-/* ===== Context Crop ===== */
-.context-crop-container {
+/* ===== Block header: which block, and what the page follows ===== */
+.block-header {
display: flex;
- flex-direction: column;
align-items: center;
- gap: 6px;
+ gap: 16px;
margin-bottom: 20px;
- padding: 16px;
+ padding: 12px 16px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
-.context-crop-label {
- font-size: var(--text-sm);
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--text-muted);
-}
-
.context-crop-canvas-wrap {
+ flex-shrink: 0;
position: relative;
border: 2px solid var(--border);
border-radius: 6px;
@@ -177,17 +169,43 @@
.context-crop-canvas-wrap canvas {
display: block;
- width: 256px;
- height: 256px;
+ width: 112px;
+ height: 112px;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
-.context-crop-caption {
- font-size: 0.64rem;
+.block-header-text {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ min-width: 0;
+}
+
+.block-header-title {
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--text);
+}
+
+.block-header-title span {
+ margin-left: 6px;
+ font-size: 0.75rem;
+ font-weight: 500;
color: var(--text-muted);
- text-align: center;
- max-width: 280px;
+}
+
+.block-header-text p {
+ margin: 0;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ color: var(--text-muted);
+}
+
+.block-header-text kbd {
+ font-size: 0.65rem;
+ padding: 0 4px;
+ margin: 0 1px;
}
/* ===== Inspector Placeholder ===== */
diff --git a/web/src/styles/inspector-pipeline.css b/web/src/styles/inspector-pipeline.css
index 4536b61..2db1b36 100644
--- a/web/src/styles/inspector-pipeline.css
+++ b/web/src/styles/inspector-pipeline.css
@@ -20,37 +20,16 @@
opacity: 0.6;
padding-left: 4px;
display: flex;
- justify-content: space-between;
- align-items: center;
+ align-items: baseline;
+ gap: 8px;
}
-.nav-hint {
- display: flex;
- align-items: center;
- gap: 3px;
- font-size: 0.62rem;
- font-weight: 400;
+.pipeline-row-label .row-sub {
+ font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
-.nav-hint kbd {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 16px;
- height: 16px;
- padding: 0 3px;
- border: 1px solid var(--border);
- border-radius: 3px;
- background: var(--bg-secondary);
- font-family: var(--font-mono);
- font-size: 0.55rem;
- font-weight: 600;
- color: var(--text-muted);
- box-shadow: 0 1px 0 var(--border);
-}
-
.pipeline-row {
display: flex;
align-items: center;
@@ -344,6 +323,16 @@
gap: 12px;
}
+/* Stats take the room; the quant table stays the size of the pipeline grids. */
+.analysis-row-two {
+ grid-template-columns: 1fr clamp(140px, 18vw, 260px);
+}
+
+/* Cards in a pipeline row share a top edge even when their heights differ. */
+.pipeline-row > .pipeline-block {
+ align-self: stretch;
+}
+
/* Pipeline blocks in the analysis row fill their grid cell */
.analysis-row .pipeline-block {
width: 100%;
diff --git a/web/src/styles/inspector-responsive.css b/web/src/styles/inspector-responsive.css
index 50d31b4..d940d0c 100644
--- a/web/src/styles/inspector-responsive.css
+++ b/web/src/styles/inspector-responsive.css
@@ -98,13 +98,23 @@
transform: translateX(-50%) translateY(-4px);
}
- .analysis-row {
+ .analysis-row,
+ .analysis-row-two {
grid-template-columns: 1fr;
}
+ /* No arrow keys on phones. */
+ .block-header .kbd-only {
+ display: none;
+ }
+
+ .pipeline-row > .pipeline-block {
+ align-self: center;
+ }
+
.context-crop-canvas-wrap canvas {
- width: 200px;
- height: 200px;
+ width: 80px;
+ height: 80px;
}
.sidebar-shortcuts {
diff --git a/web/src/styles/layout.css b/web/src/styles/layout.css
index ae7ad4a..009baf1 100644
--- a/web/src/styles/layout.css
+++ b/web/src/styles/layout.css
@@ -39,70 +39,19 @@
}
}
-#viewerMode .main-column > .card,
-#viewerMode .container > .controls-card {
- opacity: 0;
- transform: translateY(14px);
- animation: viewerCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-#viewerMode .viewer-card {
- animation-delay: 0.05s;
-}
-
-#viewerMode .rd-card {
- animation-delay: 0.12s;
-}
-
-#viewerMode .hist-card {
- animation-delay: 0.19s;
-}
-
-#viewerMode .controls-card {
- animation-delay: 0.15s;
-}
-
-#viewerMode .main-column > .card:hover,
-#viewerMode .container > .controls-card:hover {
- transform: translateY(-2px);
- box-shadow: 0 12px 30px -14px var(--shadow-color), 0 5px 12px -6px var(--shadow-color);
- border-color: color-mix(in srgb, var(--primary) 22%, var(--border-subtle, var(--border)));
-}
-
-@keyframes viewerCardIn {
- from {
- opacity: 0;
- transform: translateY(14px) scale(0.995);
- }
-
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
- #viewerMode .main-column > .card,
- #viewerMode .container > .controls-card {
- opacity: 1;
- transform: none;
- animation: none;
- }
-
- #viewerMode .main-column > .card:hover,
- #viewerMode .container > .controls-card:hover {
- transform: none;
- }
-
- .card {
- transition: none;
- }
-}
-
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
+
+ /* Phones: image, then the controls that change it, then the charts. */
+ #viewerMode .main-column {
+ display: contents;
+ }
+
+ #viewerMode .viewer-card { order: 1; }
+ #viewerMode .controls-card { order: 2; }
+ #viewerMode .compare-card { order: 3; }
}
@media (max-width: 1024px) {
diff --git a/web/src/styles/onboarding.css b/web/src/styles/onboarding.css
deleted file mode 100644
index b86822e..0000000
--- a/web/src/styles/onboarding.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* ===== Onboarding / Drop Zone ===== */
-.drop-zone {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 16px;
- padding: 60px 32px;
- border: 2px dashed var(--border);
- border-radius: 16px;
- background: var(--bg-secondary);
- cursor: pointer;
- transition: all 0.3s ease;
- text-align: center;
- min-height: 280px;
-}
-
-.drop-zone:hover,
-.drop-zone.drag-over {
- border-color: var(--primary);
- background: var(--primary-subtle);
-}
-
-.drop-zone.drag-over {
- transform: scale(1.01);
- box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
-}
-
-.drop-zone-icon {
- width: 64px;
- height: 64px;
- color: var(--text-muted);
- opacity: 0.6;
- transition: all 0.3s ease;
-}
-
-.drop-zone:hover .drop-zone-icon,
-.drop-zone.drag-over .drop-zone-icon {
- color: var(--primary);
- opacity: 1;
- transform: translateY(-4px);
-}
-
-.drop-zone-text {
- font-size: 1rem;
- font-weight: 600;
- color: var(--text);
-}
-
-.drop-zone-hint {
- font-size: 0.8rem;
- color: var(--text-muted);
-}
-
-.drop-zone-hint .browse-link {
- color: var(--primary);
- font-weight: 600;
- text-decoration: underline;
- text-underline-offset: 2px;
-}
-
-.drop-zone input[type="file"] {
- display: none;
-}
\ No newline at end of file
diff --git a/web/src/styles/utilities.css b/web/src/styles/utilities.css
index 9783e40..5bf6729 100644
--- a/web/src/styles/utilities.css
+++ b/web/src/styles/utilities.css
@@ -69,4 +69,33 @@
.tooltip-content::after {
left: 90%;
}
-}
\ No newline at end of file
+}
+/* A label that explains itself on hover (via its title attribute). */
+.has-hint {
+ cursor: help;
+ text-decoration: underline dotted;
+ text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+ text-underline-offset: 3px;
+}
+
+/* Fast hover hints for title attributes (see lib/hover-hint.ts). */
+.hover-hint {
+ position: fixed;
+ z-index: 4000;
+ max-width: 280px;
+ padding: 7px 10px;
+ border-radius: 6px;
+ background: var(--tooltip-bg);
+ color: var(--tooltip-text);
+ font-size: 0.75rem;
+ font-weight: 500;
+ line-height: 1.4;
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.1s ease;
+}
+
+.hover-hint.visible {
+ opacity: 1;
+}
diff --git a/web/src/styles/viewer.css b/web/src/styles/viewer.css
index 230c69b..b91a106 100644
--- a/web/src/styles/viewer.css
+++ b/web/src/styles/viewer.css
@@ -54,7 +54,6 @@ canvas {
background: rgba(30, 41, 59, 0.9);
}
-
.comparison-viewer {
position: relative;
width: 100%;
@@ -98,43 +97,6 @@ canvas {
box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.35), 0 8px 24px rgba(5, 150, 105, 0.28);
}
-.inspector-active-banner {
- position: absolute;
- left: 12px;
- top: 12px;
- z-index: 4;
- display: inline-flex;
- align-items: center;
- gap: 7px;
- background: rgba(15, 23, 42, 0.82);
- border: 1px solid rgba(52, 211, 153, 0.45);
- color: rgba(241, 245, 249, 0.98);
- border-radius: 999px;
- font-size: 0.7rem;
- padding: 6px 10px;
- max-width: calc(100% - 24px);
- backdrop-filter: blur(8px);
- -webkit-backdrop-filter: blur(8px);
-}
-
-.inspector-active-banner strong {
- font-size: 0.72rem;
- white-space: nowrap;
-}
-
-.inspector-active-banner span:last-child {
- opacity: 0.9;
-}
-
-.banner-dot {
- width: 7px;
- height: 7px;
- border-radius: 999px;
- background: #34d399;
- box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
- flex-shrink: 0;
-}
-
.comparison-divider {
position: absolute;
top: 0;
@@ -182,7 +144,6 @@ canvas {
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
- .inspector-active-banner,
.comparison-handle {
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -213,33 +174,14 @@ canvas {
height: auto;
}
-
@media (max-width: 860px) {
.viewer-canvas-header {
padding: 0 4px 6px;
}
-
- .comparison-label {
- font-size: 0.65rem;
- }
-
- .inspector-active-banner span:last-child {
- display: none;
- }
-
- .inspector-quickstart {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .inspector-quickstart-btn {
- width: 100%;
- }
}
@media (max-width: 1024px) {
- .inspector-active-banner,
.comparison-handle {
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -247,57 +189,10 @@ canvas {
}
.viewer-canvas-header {
- display: grid;
- grid-template-columns: 1fr auto 1fr;
- align-items: center;
- padding: 0 4px 12px;
-}
-
-.canvas-header-left {
- display: flex;
- align-items: center;
-}
-
-.canvas-header-center {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.canvas-header-right {
display: flex;
align-items: center;
- justify-content: flex-end;
-}
-
-.img-dim-info {
- font-size: 0.72rem;
- font-weight: 600;
- color: var(--text-muted);
- background: rgba(255, 255, 255, 0.05);
- padding: 5px 10px;
- border-radius: 999px;
- display: inline-flex;
- align-items: center;
- gap: 3px;
- border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
-}
-
-.dim-sep {
- color: var(--text-muted);
- opacity: 0.4;
- font-size: 0.65rem;
- padding: 0 1px;
-}
-
-.dim-unit {
- font-size: 0.65rem;
- opacity: 0.6;
- margin-left: 1px;
-}
-
-.dim-val {
- font-variant-numeric: tabular-nums;
+ gap: 8px;
+ padding: 0 4px 12px;
}
/* View Mode Toggle (Segmented Control) within Viewer Card */
@@ -321,7 +216,7 @@ canvas {
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
- min-width: 90px;
+ min-width: 56px;
}
.view-mode-toggle button:hover {
@@ -335,16 +230,10 @@ canvas {
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
-/* Phones: dimensions + zoom share the first row, the view toggle spans the second. */
+/* Phones: the view toggle gets its own row above the zoom controls. */
@media (max-width: 600px) {
.viewer-canvas-header {
- grid-template-columns: 1fr auto;
- row-gap: 8px;
- }
-
- .canvas-header-center {
- grid-column: 1 / -1;
- grid-row: 2;
+ flex-wrap: wrap;
}
.view-mode-toggle {
@@ -359,6 +248,7 @@ canvas {
}
.viewer-zoom-controls {
+ margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
@@ -409,20 +299,6 @@ canvas {
letter-spacing: 0.02em;
}
-/* Old labels and mini info removed — moved to global header */
-
-
-.inspector-quickstart {
- border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.2));
- border-radius: 10px;
- padding: 10px 12px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
- background: rgba(15, 23, 42, 0.4);
-}
-
.rd-chart-panel {
padding: 4px;
display: flex;
@@ -452,13 +328,6 @@ canvas {
opacity: 0.85;
}
-.rd-chart-status {
- font-size: 0.72rem;
- font-weight: 700;
- color: var(--primary);
- white-space: nowrap;
-}
-
.rd-chart-svg-wrap {
width: 100%;
border: 1px solid var(--border-subtle, var(--border));
@@ -603,39 +472,83 @@ canvas {
min-width: 40%;
}
}
+.view-mode-toggle button:disabled,
+.zoom-ctrl-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Dropping an image file onto the viewer */
+.viewer-card.drag-over {
+ outline: 2px dashed var(--primary);
+ outline-offset: -6px;
+}
-.quickstart-copy {
+.split-labels {
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 4px 0;
+ font-size: 0.72rem;
+ font-weight: 600;
+ color: rgba(203, 213, 225, 0.8);
+}
+
+.viewer-note {
+ margin: 8px 4px 0;
+ font-size: 0.72rem;
+ line-height: 1.5;
+ color: rgba(203, 213, 225, 0.8);
+}
+
+/* Ways into the two deep-dive modes, under the image */
+.go-deeper {
+ display: flex;
+ gap: 10px;
+ margin-top: 12px;
+}
+
+.go-deeper-btn {
+ flex: 1;
display: flex;
flex-direction: column;
+ align-items: flex-start;
gap: 2px;
- min-width: 0;
+ text-align: left;
+ padding: 10px 12px;
+ border-radius: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ background: rgba(255, 255, 255, 0.04);
+ color: rgba(248, 250, 252, 0.98);
+ cursor: pointer;
+ transition: background-color 0.15s ease, border-color 0.15s ease;
}
-.quickstart-copy strong {
+.go-deeper-btn strong {
font-size: 0.8rem;
- color: rgba(248, 250, 252, 0.98);
- letter-spacing: 0.02em;
}
-.quickstart-copy span {
+.go-deeper-btn strong::after {
+ content: ' →';
+ color: var(--primary);
+}
+
+.go-deeper-btn span {
font-size: 0.72rem;
- color: rgba(203, 213, 225, 0.92);
+ color: rgba(203, 213, 225, 0.85);
}
-.inspector-quickstart-btn {
- flex-shrink: 0;
- border: none;
- background: var(--primary);
- color: white;
- border-radius: 8px;
- padding: 8px 10px;
- font-size: 0.74rem;
- font-weight: 700;
- cursor: pointer;
- transition: background-color 0.2s ease, transform 0.15s ease;
+.go-deeper-btn:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.08);
+ border-color: var(--primary);
}
-.inspector-quickstart-btn:hover {
- background: var(--primary-hover);
- transform: translateY(-1px);
-}
\ No newline at end of file
+.go-deeper-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+@media (max-width: 600px) {
+ .go-deeper {
+ flex-direction: column;
+ }
+}
diff --git a/web/src/types/wasm.d.ts b/web/src/types/wasm.d.ts
index d883c9b..2a3e064 100644
--- a/web/src/types/wasm.d.ts
+++ b/web/src/types/wasm.d.ts
@@ -1,3 +1,6 @@
+// The C functions the WASM build exports. Each must be listed in the Makefile's
+// WEB_EXPORTS or marked EMSCRIPTEN_KEEPALIVE in web/cpp/codec_web.cpp
+// (checked by tests/unit/wasm-exports.test.js).
declare global {
var Module: WasmModule;
}
diff --git a/web/tests/browser/inspection.browser.test.js b/web/tests/browser/inspection.browser.test.js
index 530fdc8..6ef7ed8 100644
--- a/web/tests/browser/inspection.browser.test.js
+++ b/web/tests/browser/inspection.browser.test.js
@@ -11,8 +11,8 @@ import { inspectBlock } from '../../src/lib/inspection.js';
const REQUIRED_DIVS = [
'blockCoords',
- 'qTableType', 'qTableType2',
- 'gridOriginal', 'gridDCT', 'gridQuantized', 'gridQuantized2',
+ 'qTableType',
+ 'gridOriginal', 'gridDCT', 'gridQuantized',
'gridDequantized', 'gridReconstructed', 'gridQuantTable', 'gridError',
'statMSE', 'statPeakError', 'statZeros', 'statCompression',
'lossMeterContainer', 'basisPopover',
@@ -143,7 +143,6 @@ describe('inspectBlock - qTableType label', () => {
appState.currentViewMode = ViewMode.Y; // channelIndex = 0
inspectBlock(0, 0);
expect(document.getElementById('qTableType').innerText).toBe('Luma');
- expect(document.getElementById('qTableType2').innerText).toBe('Luma');
});
it('shows "Chroma" when currentViewMode is Cr', () => {
diff --git a/web/tests/unit/hover-hint.test.js b/web/tests/unit/hover-hint.test.js
new file mode 100644
index 0000000..ae01bec
--- /dev/null
+++ b/web/tests/unit/hover-hint.test.js
@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } from 'vitest';
+import { installHoverHints } from '../../src/lib/hover-hint.js';
+
+function hover(el, related = null) {
+ el.dispatchEvent(new MouseEvent('pointerover', { bubbles: true, relatedTarget: related }));
+}
+
+function leave(el, to = document.body) {
+ el.dispatchEvent(new MouseEvent('pointerout', { bubbles: true, relatedTarget: to }));
+}
+
+const tip = () => document.querySelector('.hover-hint');
+
+describe('hover-hint', () => {
+ beforeAll(() => installHoverHints());
+
+ beforeEach(() => {
+ vi.useFakeTimers();
+ document.body.querySelectorAll(':not(.hover-hint)').forEach(n => n.remove());
+ });
+
+ afterEach(() => {
+ document.dispatchEvent(new MouseEvent('pointerdown'));
+ vi.advanceTimersByTime(1000); // let the quick-switch window lapse
+ vi.useRealTimers();
+ });
+
+ it('shows the title text after a short delay, not the native tooltip', () => {
+ document.body.insertAdjacentHTML('beforeend', '<button id="b" title="Explains b">b</button>');
+ const b = document.getElementById('b');
+
+ hover(b);
+ expect(b.hasAttribute('title')).toBe(false); // native tooltip suppressed
+ expect(tip()?.classList.contains('visible') ?? false).toBe(false);
+
+ vi.advanceTimersByTime(200);
+ expect(tip().classList.contains('visible')).toBe(true);
+ expect(tip().textContent).toBe('Explains b');
+ expect(b.getAttribute('aria-describedby')).toBe('hover-hint');
+ });
+
+ it('restores the title when the pointer leaves', () => {
+ document.body.insertAdjacentHTML('beforeend', '<span id="s" title="Explains s">s</span>');
+ const s = document.getElementById('s');
+
+ hover(s);
+ vi.advanceTimersByTime(200);
+ leave(s);
+
+ expect(s.getAttribute('title')).toBe('Explains s');
+ expect(s.hasAttribute('aria-describedby')).toBe(false);
+ expect(tip().classList.contains('visible')).toBe(false);
+ });
+
+ it('keeps the hint while moving over the element\'s children', () => {
+ document.body.insertAdjacentHTML('beforeend', '<div id="d" title="Explains d"><strong id="c">child</strong></div>');
+ const d = document.getElementById('d');
+ const c = document.getElementById('c');
+
+ hover(d);
+ vi.advanceTimersByTime(200);
+ leave(d, c);
+ hover(c);
+
+ expect(tip().classList.contains('visible')).toBe(true);
+ expect(tip().textContent).toBe('Explains d');
+ });
+
+ it('switches straight to the next hint without waiting again', () => {
+ document.body.insertAdjacentHTML('beforeend', '<i id="a" title="A">a</i><i id="z" title="Z">z</i>');
+ const a = document.getElementById('a');
+ const z = document.getElementById('z');
+
+ hover(a);
+ vi.advanceTimersByTime(200);
+ leave(a, z);
+ hover(z);
+
+ expect(tip().classList.contains('visible')).toBe(true);
+ expect(tip().textContent).toBe('Z');
+ expect(a.getAttribute('title')).toBe('A');
+ });
+
+ it('reads SVG <title> children and puts them back', () => {
+ document.body.insertAdjacentHTML('beforeend', '<svg><text id="t"><title>Axis hintAxis');
+ const t = document.getElementById('t');
+
+ hover(t);
+ vi.advanceTimersByTime(200);
+ expect(tip().textContent).toBe('Axis hint');
+ expect(t.querySelector('title')).toBeNull();
+
+ leave(t);
+ expect(t.querySelector('title')?.textContent).toBe('Axis hint');
+ });
+
+ it('ignores elements without hints', () => {
+ document.body.insertAdjacentHTML('beforeend', '
plain
');
+ hover(document.getElementById('p'));
+ vi.advanceTimersByTime(200);
+ expect(tip()?.classList.contains('visible') ?? false).toBe(false);
+ });
+});
diff --git a/web/tests/unit/inspection.test.js b/web/tests/unit/inspection.test.js
index ef67a2a..6bf380b 100644
--- a/web/tests/unit/inspection.test.js
+++ b/web/tests/unit/inspection.test.js
@@ -32,7 +32,6 @@ describe('inspection.js - inspectBlock', () => {
document.body.innerHTML = `
-
@@ -66,7 +65,6 @@ describe('inspection.js - inspectBlock', () => {
appState.currentViewMode = ViewMode.Y;
inspectBlock(0, 0);
expect(document.getElementById('qTableType').innerText).toBe('Luma');
- expect(document.getElementById('qTableType2').innerText).toBe('Luma');
});
it('sets Chroma label for Cb view mode', () => {
@@ -85,7 +83,7 @@ describe('inspection.js - inspectBlock', () => {
inspectBlock(0, 0);
expect(hideBasisPopover).toHaveBeenCalled();
expect(setCachedGridData).toHaveBeenCalled();
- expect(renderGrid).toHaveBeenCalledTimes(9); // 9 grids updated
+ expect(renderGrid).toHaveBeenCalledTimes(8); // 8 grids updated
expect(renderLossMeter).toHaveBeenCalled();
expect(renderZigzagArray).toHaveBeenCalled();
expect(renderEntropySummary).toHaveBeenCalled();
diff --git a/web/tests/unit/inspector-dom.test.js b/web/tests/unit/inspector-dom.test.js
new file mode 100644
index 0000000..2269db9
--- /dev/null
+++ b/web/tests/unit/inspector-dom.test.js
@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import { INSPECTOR_IDS } from '../../src/lib/inspector-dom.js';
+
+// The Block Inspector's imperative code finds its elements by ID and skips
+// missing ones silently, so a renamed element would just stop updating.
+// These checks turn that into a test failure (see src/lib/inspector-dom.ts).
+// Vitest runs from web/.
+const src = join(process.cwd(), 'src');
+
+function filesUnder(dir, ext) {
+ return readdirSync(dir).flatMap((name) => {
+ const path = join(dir, name);
+ if (statSync(path).isDirectory()) return filesUnder(path, ext);
+ return path.endsWith(ext) ? [path] : [];
+ });
+}
+
+const renderedIds = new Set(
+ filesUnder(src, '.svelte').flatMap((f) => [...readFileSync(f, 'utf8').matchAll(/\bid="([A-Za-z][\w-]*)"/g)].map((m) => m[1]))
+);
+
+const ids = Object.values(INSPECTOR_IDS);
+
+// IDs that lib code creates itself (in generated HTML) and then looks up.
+const CREATED_BY_LIB = ['expandAllCosts', 'collapseAllCosts'];
+
+const libSources = filesUnder(join(src, 'lib'), '.ts')
+ .filter((f) => !f.endsWith('inspector-dom.ts'))
+ .map((f) => ({ file: f.slice(src.length + 1), text: readFileSync(f, 'utf8') }));
+
+describe('inspector element IDs', () => {
+ it.each(ids)('#%s is rendered by a component', (id) => {
+ expect(renderedIds.has(id)).toBe(true);
+ });
+
+ it('lib code refers to inspector IDs only through INSPECTOR_IDS', () => {
+ const literals = libSources.flatMap(({ file, text }) =>
+ ids.filter((id) => new RegExp(`['"\`]${id}['"\`]`).test(text)).map((id) => `${file}: '${id}'`));
+ expect(literals).toEqual([]);
+ });
+
+ it('lib code looks up no element IDs outside INSPECTOR_IDS', () => {
+ const lookup = /getElementById\(\s*['"`]([^'"`]+)['"`]|querySelector(?:All)?\(\s*['"`]#([\w-]+)/g;
+ const strays = libSources.flatMap(({ file, text }) =>
+ [...text.matchAll(lookup)]
+ .map((m) => m[1] ?? m[2])
+ .filter((id) => !CREATED_BY_LIB.includes(id))
+ .map((id) => `${file}: #${id}`));
+ expect(strays).toEqual([]);
+ });
+});
diff --git a/web/tests/unit/wasm-contracts.test.js b/web/tests/unit/wasm-contracts.test.js
new file mode 100644
index 0000000..9f985a1
--- /dev/null
+++ b/web/tests/unit/wasm-contracts.test.js
@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { ViewMode } from '../../src/lib/state.svelte.js';
+import { Transform } from '../../src/lib/transforms.js';
+import { COEFF_BINS } from '../../src/lib/wasm-bridge.js';
+import { BLOCK_GRID } from '../../src/lib/inspection.js';
+
+// Numbers and memory layouts shared across the WASM boundary are defined
+// once in C++ and once in TypeScript. Nothing links them at compile time, so
+// these tests read the C++ sources and compare. (Exported function names are
+// checked in wasm-exports.test.js.) Vitest runs from web/.
+const root = resolve(process.cwd(), '..') + '/';
+const binding = readFileSync(root + 'web/cpp/codec_web.cpp', 'utf8');
+const codecHeader = readFileSync(root + 'core/inc/ImageCodec.h', 'utf8');
+
+describe('WASM contracts', () => {
+ it('view mode numbers match codec_web.cpp ViewMode', () => {
+ const body = binding.match(/enum ViewMode\s*\{([^}]*)\}/)[1];
+ const cpp = Object.fromEntries([...body.matchAll(/(\w+)\s*=\s*(\d+)/g)].map((m) => [m[1], Number(m[2])]));
+ expect(cpp).toEqual({ ...ViewMode });
+ });
+
+ it('transform numbers match codec_web.cpp map_transform_mode', () => {
+ const body = binding.match(/map_transform_mode\(int mode\)\s*\{([\s\S]*?)\n\}/)[1];
+ const cases = Object.fromEntries([...body.matchAll(/case (\d+):\s*return ImageCodec::TransformType::(\w+)/g)]
+ .map((m) => [m[2], Number(m[1])]));
+ expect(body).toMatch(/default:\s*return ImageCodec::TransformType::DCT/);
+ expect(cases).toEqual({ DWT_HAAR: Transform.Haar, DWT_97: Transform.CDF97 });
+ expect(Transform.DCT).toBe(0);
+ });
+
+ it('chroma subsampling modes map to the matching codec setting', () => {
+ const body = binding.match(/map_cs_mode\(int mode\)\s*\{([\s\S]*?)\n\}/)[1];
+ for (const [, mode, cs] of body.matchAll(/case (\d+):\s*return ImageCodec::ChromaSubsampling::CS_(\d+)/g)) {
+ expect(cs).toBe(mode);
+ }
+ expect(body).toMatch(/case 422:/);
+ expect(body).toMatch(/case 420:/);
+ });
+
+ it('COEFF_BINS matches CoefficientStats::NUM_BINS', () => {
+ expect(Number(codecHeader.match(/NUM_BINS\s*=\s*(\d+)/)[1])).toBe(COEFF_BINS);
+ });
+
+ it('BLOCK_GRID follows the field order of BlockDebugData', () => {
+ const body = codecHeader.match(/struct BlockDebugData\s*\{([^}]*)\}/)[1];
+ const fields = [...body.matchAll(/double\s+(\w+)\[8\]\[8\]/g)].map((m) => m[1]);
+ expect(fields).toEqual(Object.entries(BLOCK_GRID).sort((a, b) => a[1] - b[1]).map(([name]) => name));
+ });
+});