mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
71 lines
2.7 KiB
JavaScript
71 lines
2.7 KiB
JavaScript
const VIEW_COPY = {
|
|
overview: {
|
|
title: 'Performance',
|
|
summary: 'Where Live spends time before the first usable variant.',
|
|
},
|
|
providers: {
|
|
title: 'Providers',
|
|
summary: 'Compare generation speed, reliability, and delivery strategy.',
|
|
},
|
|
harness: {
|
|
title: 'Harnesses',
|
|
summary: 'Review worker architecture and the optimizations that survived testing.',
|
|
},
|
|
ui: {
|
|
title: 'UI states',
|
|
summary: 'Inspect every Live state on light and dark hosts.',
|
|
},
|
|
};
|
|
|
|
export function initLiveLabWorkbench(root = document) {
|
|
const workbench = root.querySelector('[data-live-lab-workbench]');
|
|
if (!workbench || workbench.dataset.initialized === 'true') return;
|
|
workbench.dataset.initialized = 'true';
|
|
|
|
const buttons = [...workbench.querySelectorAll('[data-lab-view]')];
|
|
const panels = [...workbench.querySelectorAll('[data-lab-panel]')];
|
|
const contexts = [...workbench.querySelectorAll('[data-lab-context]')];
|
|
const actions = [...workbench.querySelectorAll('[data-lab-view-action]')];
|
|
const title = workbench.querySelector('[data-lab-view-title]');
|
|
const summary = workbench.querySelector('[data-lab-view-summary]');
|
|
const scroller = workbench.querySelector('.live-lab-workspace-scroll');
|
|
|
|
const setView = (requested, { updateHash = true } = {}) => {
|
|
const view = VIEW_COPY[requested] ? requested : 'overview';
|
|
for (const button of buttons) {
|
|
button.setAttribute('aria-pressed', String(button.dataset.labView === view));
|
|
}
|
|
for (const panel of panels) {
|
|
panel.hidden = panel.dataset.labPanel !== view;
|
|
}
|
|
for (const context of contexts) {
|
|
context.hidden = context.dataset.labContext !== view;
|
|
}
|
|
for (const action of actions) {
|
|
action.hidden = action.dataset.labViewAction !== view;
|
|
}
|
|
workbench.dataset.activeView = view;
|
|
if (title) title.textContent = VIEW_COPY[view].title;
|
|
if (summary) summary.textContent = VIEW_COPY[view].summary;
|
|
if (scroller) scroller.scrollTop = 0;
|
|
if (updateHash && window.location.hash !== `#${view}`) {
|
|
window.history.replaceState(null, '', `#${view}`);
|
|
}
|
|
};
|
|
|
|
for (const button of buttons) {
|
|
button.addEventListener('click', () => setView(button.dataset.labView));
|
|
}
|
|
|
|
workbench.querySelector('[data-lab-reset]')?.addEventListener('click', () => {
|
|
const slider = workbench.querySelector('[data-model-latency]');
|
|
if (!(slider instanceof HTMLInputElement)) return;
|
|
slider.value = '15000';
|
|
slider.dispatchEvent(new Event('input', { bubbles: true }));
|
|
setView('overview');
|
|
});
|
|
|
|
window.addEventListener('hashchange', () => setView(window.location.hash.slice(1), { updateHash: false }));
|
|
setView(window.location.hash.slice(1) || 'overview', { updateHash: false });
|
|
}
|