mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandClaude Fable 5
bf2dd7ec13
Field report: impeccable SaaS-ified a developer docs page; the Opus galleries showed the same on an album page. Root cause: two registers force every surface into persuade-or-operate grammar. The register section now names the visitor's mode first (Persuade / Operate / Read / Experience) with mode-borrowing called out as the canonical failure, and PRODUCT.md's register field maps as family (brand = Persuade + Experience, product = Operate + Read) for compatibility. Read mode: comprehension deliverable, navigable structure, chrome out of the way. Experience mode: the artifact leads at every screen size. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
export function initLivePerformance() {
|
|
const root = document.querySelector('[data-live-performance]');
|
|
if (!root) return;
|
|
|
|
const slider = root.querySelector('[data-model-latency]');
|
|
const modelValue = root.querySelector('[data-model-value]');
|
|
const currentValue = root.querySelector('[data-current-total]');
|
|
const overlapValue = root.querySelector('[data-overlap-total]');
|
|
if (!slider || !modelValue || !currentValue || !overlapValue) return;
|
|
|
|
const protocolFloor = Number(root.dataset.protocolFloor || 0);
|
|
const overlapFloor = Number(root.dataset.overlapFloor || 0);
|
|
const formatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
|
|
|
|
const display = (milliseconds) => {
|
|
if (milliseconds >= 1000) return `${formatter.format(milliseconds / 1000)} s`;
|
|
return `${Math.round(milliseconds)} ms`;
|
|
};
|
|
|
|
const render = () => {
|
|
const modelMs = Number(slider.value);
|
|
modelValue.textContent = display(modelMs);
|
|
currentValue.textContent = display(modelMs + protocolFloor);
|
|
overlapValue.textContent = display(modelMs + overlapFloor);
|
|
slider.setAttribute('aria-valuetext', display(modelMs));
|
|
};
|
|
|
|
slider.addEventListener('input', render);
|
|
render();
|
|
}
|
|
|