mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Refresh the Impeccable product experience
Rework the landing page proof, steering demo, feature grid, slop catalog, detector coverage, theming, Live workflow, and responsive behavior.\n\nAI-assisted implementation by OpenAI Codex.
This commit is contained in:
Paul Bakaus
+120
-1
@@ -246,14 +246,26 @@ function initHeroProof() {
|
||||
const tabs = Array.from(root.querySelectorAll("[data-proof-tab]"));
|
||||
const panels = Array.from(root.querySelectorAll("[data-proof-panel]"));
|
||||
const result = root.querySelector("[data-hero-proof-result]");
|
||||
const positionUpdates = new Map();
|
||||
if (!tabs.length || !panels.length) return;
|
||||
|
||||
panels.forEach((panel) => {
|
||||
const range = panel.querySelector("[data-proof-range]");
|
||||
if (!range) return;
|
||||
const updatePosition = () => {
|
||||
panel.style.setProperty("--proof-position", `${range.value}%`);
|
||||
const position = Number(range.value);
|
||||
panel.style.setProperty("--proof-position", `${position}%`);
|
||||
if (panel.hidden) return;
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
const seamX = panelRect.left + panelRect.width * position / 100;
|
||||
panel.querySelectorAll(".hero-proof-layer--before .proof-annotation").forEach((annotation) => {
|
||||
const target = annotation.parentElement;
|
||||
const targetX = target?.getBoundingClientRect().left ?? panelRect.left;
|
||||
annotation.classList.toggle("is-concealed", position <= 0 || targetX >= seamX);
|
||||
});
|
||||
};
|
||||
positionUpdates.set(panel, updatePosition);
|
||||
range.addEventListener("input", updatePosition);
|
||||
updatePosition();
|
||||
});
|
||||
@@ -274,10 +286,16 @@ function initHeroProof() {
|
||||
panel.classList.toggle("is-active", active);
|
||||
panel.hidden = !active;
|
||||
});
|
||||
positionUpdates.get(nextPanel)?.();
|
||||
if (result) result.textContent = nextPanel.dataset.summary || "Example updated";
|
||||
if (moveFocus) nextTab.focus();
|
||||
};
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
const activePanel = panels.find((panel) => !panel.hidden);
|
||||
if (activePanel) positionUpdates.get(activePanel)?.();
|
||||
}, { passive: true });
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener("click", () => activate(index));
|
||||
tab.addEventListener("keydown", (event) => {
|
||||
@@ -306,6 +324,7 @@ function init() {
|
||||
initSectionNav();
|
||||
initWhyTabs();
|
||||
initLanguageTabs();
|
||||
initSteeringDesktop();
|
||||
initLiveDemo();
|
||||
initGbarPageChat();
|
||||
loadContent();
|
||||
@@ -313,6 +332,106 @@ function init() {
|
||||
document.body.classList.add("loaded");
|
||||
}
|
||||
|
||||
function initSteeringDesktop() {
|
||||
const desktop = document.querySelector('[data-steering-desktop]');
|
||||
if (!desktop) return;
|
||||
|
||||
const mobileTabs = Array.from(desktop.querySelectorAll('[data-steering-mobile-tab]'));
|
||||
const commandButtons = Array.from(desktop.querySelectorAll('[data-steering-command]'));
|
||||
const activeCommands = Array.from(desktop.querySelectorAll('[data-steering-active-command]'));
|
||||
const agentCopy = desktop.querySelector('[data-steering-agent-copy]');
|
||||
const agentThread = desktop.querySelector('[data-steering-thread]');
|
||||
const agentPane = desktop.querySelector('[data-steering-pane="agent"]');
|
||||
const browserPane = desktop.querySelector('[data-steering-pane="browser"]');
|
||||
const liveDemo = desktop.querySelector('.language-live-demo');
|
||||
const polishScene = desktop.querySelector('[data-steering-thread-scene="polish"]');
|
||||
const liveScene = desktop.querySelector('[data-steering-thread-scene="live"]');
|
||||
const composerCommand = desktop.querySelector('[data-steering-composer-command]');
|
||||
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const mobileLayout = window.matchMedia('(max-width: 760px)');
|
||||
|
||||
const selectedCommand = () => commandButtons.find((button) => button.classList.contains('is-active'))?.dataset.steeringCommand || 'polish';
|
||||
const setBrowserUiQuiet = (quiet) => {
|
||||
desktop.dataset.steeringBrowserUi = quiet ? 'quiet' : 'live';
|
||||
if (!liveDemo) return;
|
||||
liveDemo.toggleAttribute('inert', quiet);
|
||||
if (quiet) liveDemo.setAttribute('aria-hidden', 'true');
|
||||
else liveDemo.removeAttribute('aria-hidden');
|
||||
liveDemo.dispatchEvent(new CustomEvent('steering-demo-quiet', { detail: { quiet } }));
|
||||
};
|
||||
const showThreadScene = (scene) => {
|
||||
if (!agentThread || !polishScene || !liveScene) return;
|
||||
const target = scene === 'live' ? liveScene : polishScene;
|
||||
agentThread.scrollTo({
|
||||
top: Math.max(0, target.offsetTop - polishScene.offsetTop),
|
||||
behavior: reducedMotion.matches ? 'auto' : 'smooth',
|
||||
});
|
||||
if (composerCommand) composerCommand.textContent = scene === 'live' ? 'live' : selectedCommand();
|
||||
};
|
||||
|
||||
mobileTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
const pane = tab.dataset.steeringMobileTab;
|
||||
desktop.dataset.mobilePane = pane;
|
||||
showThreadScene(pane === 'browser' ? 'live' : 'polish');
|
||||
setBrowserUiQuiet(pane === 'agent');
|
||||
mobileTabs.forEach((item) => {
|
||||
const selected = item === tab;
|
||||
item.classList.toggle('is-active', selected);
|
||||
item.setAttribute('aria-selected', selected ? 'true' : 'false');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (agentPane) {
|
||||
agentPane.addEventListener('pointerenter', () => {
|
||||
if (!mobileLayout.matches) setBrowserUiQuiet(true);
|
||||
});
|
||||
agentPane.addEventListener('pointerleave', () => {
|
||||
if (!mobileLayout.matches) setBrowserUiQuiet(false);
|
||||
});
|
||||
agentPane.addEventListener('focusin', () => setBrowserUiQuiet(true));
|
||||
agentPane.addEventListener('focusout', (event) => {
|
||||
if (!agentPane.contains(event.relatedTarget)) setBrowserUiQuiet(false);
|
||||
});
|
||||
}
|
||||
|
||||
if (browserPane) {
|
||||
browserPane.addEventListener('pointerenter', () => {
|
||||
if (mobileLayout.matches) return;
|
||||
setBrowserUiQuiet(false);
|
||||
showThreadScene('live');
|
||||
});
|
||||
browserPane.addEventListener('pointerleave', () => {
|
||||
if (!mobileLayout.matches) showThreadScene('polish');
|
||||
});
|
||||
browserPane.addEventListener('focusin', () => {
|
||||
setBrowserUiQuiet(false);
|
||||
showThreadScene('live');
|
||||
});
|
||||
browserPane.addEventListener('focusout', (event) => {
|
||||
if (!browserPane.contains(event.relatedTarget)) showThreadScene('polish');
|
||||
});
|
||||
}
|
||||
|
||||
if (mobileLayout.matches && desktop.dataset.mobilePane === 'agent') {
|
||||
setBrowserUiQuiet(true);
|
||||
}
|
||||
|
||||
commandButtons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const command = button.dataset.steeringCommand;
|
||||
commandButtons.forEach((item) => {
|
||||
const selected = item === button;
|
||||
item.classList.toggle('is-active', selected);
|
||||
item.setAttribute('aria-pressed', selected ? 'true' : 'false');
|
||||
});
|
||||
activeCommands.forEach((item) => { item.textContent = command; });
|
||||
if (agentCopy && button.dataset.agentCopy) agentCopy.textContent = button.dataset.agentCopy;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initLanguageTabs() {
|
||||
const toggle = document.querySelector('.language-view-toggle');
|
||||
if (!toggle) return;
|
||||
|
||||
@@ -182,12 +182,13 @@ export function initLiveDemo() {
|
||||
if (text && captionLabel) captionLabel.textContent = text;
|
||||
};
|
||||
|
||||
const typeInto = (el, text, duration) => new Promise((resolve) => {
|
||||
const typeInto = (el, text, duration, token) => new Promise((resolve) => {
|
||||
if (!el) return resolve();
|
||||
el.textContent = '';
|
||||
const per = Math.max(30, Math.floor(duration / text.length));
|
||||
let i = 0;
|
||||
const tick = () => {
|
||||
if (token !== cancelToken) return resolve();
|
||||
if (i >= text.length) return resolve();
|
||||
el.textContent += text[i++];
|
||||
setTimeout(tick, per);
|
||||
@@ -195,7 +196,7 @@ export function initLiveDemo() {
|
||||
tick();
|
||||
});
|
||||
|
||||
const step = async (s) => {
|
||||
const step = async (s, token) => {
|
||||
switch (s.action) {
|
||||
case 'cursor-show':
|
||||
moveCursor(target, -120, 40);
|
||||
@@ -255,7 +256,7 @@ export function initLiveDemo() {
|
||||
break;
|
||||
case 'type-note':
|
||||
annotations.classList.add('is-note-visible');
|
||||
await typeInto(noteText, s.text, 800);
|
||||
await typeInto(noteText, s.text, 800, token);
|
||||
break;
|
||||
case 'hold':
|
||||
break;
|
||||
@@ -290,19 +291,27 @@ export function initLiveDemo() {
|
||||
|
||||
let running = false;
|
||||
let cancelToken = 0;
|
||||
let timelineIndex = 0;
|
||||
let hasStarted = false;
|
||||
let inView = false;
|
||||
let quiet = root.closest('[data-steering-desktop]')?.dataset.steeringBrowserUi === 'quiet';
|
||||
const sleep = (ms, token) => new Promise((resolve) => setTimeout(() => resolve(token === cancelToken), ms));
|
||||
|
||||
const run = async () => {
|
||||
if (running) return;
|
||||
if (running || quiet || !inView) return;
|
||||
running = true;
|
||||
const myToken = ++cancelToken;
|
||||
while (running && myToken === cancelToken) {
|
||||
if (!hasStarted) {
|
||||
reset();
|
||||
for (const s of timeline) {
|
||||
const stillMe = await sleep(s.dt, myToken);
|
||||
if (!stillMe || !running) return;
|
||||
await step(s);
|
||||
}
|
||||
hasStarted = true;
|
||||
}
|
||||
while (running && myToken === cancelToken) {
|
||||
const s = timeline[timelineIndex];
|
||||
const stillMe = await sleep(s.dt, myToken);
|
||||
if (!stillMe || !running) return;
|
||||
await step(s, myToken);
|
||||
if (myToken !== cancelToken || !running) return;
|
||||
timelineIndex = (timelineIndex + 1) % timeline.length;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -322,9 +331,16 @@ export function initLiveDemo() {
|
||||
return;
|
||||
}
|
||||
|
||||
root.addEventListener('steering-demo-quiet', (event) => {
|
||||
quiet = event.detail?.quiet === true;
|
||||
if (quiet) stop();
|
||||
else if (inView) run();
|
||||
});
|
||||
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach((e) => {
|
||||
if (e.isIntersecting) run();
|
||||
inView = e.isIntersecting;
|
||||
if (inView && !quiet) run();
|
||||
else stop();
|
||||
});
|
||||
}, { threshold: 0.35 });
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
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();
|
||||
}
|
||||
|
||||
@@ -1,520 +0,0 @@
|
||||
/*
|
||||
* Dev-only Impeccable Live state gallery.
|
||||
*
|
||||
* This is a static state harness, not a second implementation of Live. It
|
||||
* mirrors the exact chrome vocabulary and state wording from:
|
||||
* skill/scripts/live-browser.js
|
||||
* skill/scripts/live/ui-core.mjs
|
||||
* Command labels/icons are injected by LiveUiGallery.astro from the canonical
|
||||
* skill/scripts/live/vocabulary.mjs export.
|
||||
*/
|
||||
|
||||
const ICONS = Object.freeze({
|
||||
pick: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>',
|
||||
insert: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg>',
|
||||
detect: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
|
||||
chat: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
|
||||
voice: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>',
|
||||
submit: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
|
||||
tune: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><line x1="4" y1="8" x2="20" y2="8"/><circle cx="14" cy="8" r="2.4" fill="currentColor" stroke="none"/><line x1="4" y1="16" x2="20" y2="16"/><circle cx="10" cy="16" r="2.4" fill="currentColor" stroke="none"/></svg>',
|
||||
edit: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>',
|
||||
trash: '<svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h8"/><path d="M5 4V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1"/><path d="M4 4l.5 7a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1L10 4"/></svg>',
|
||||
exit: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="3" x2="11" y2="11"/><line x1="11" y1="3" x2="3" y2="11"/></svg>',
|
||||
});
|
||||
|
||||
function parseJson(root, selector, fallback = []) {
|
||||
try {
|
||||
return JSON.parse(root.querySelector(selector)?.textContent || '[]');
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
function brandMark() {
|
||||
return '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/><path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/></svg>';
|
||||
}
|
||||
|
||||
function designMark() {
|
||||
return '<span class="lvg-design-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>';
|
||||
}
|
||||
|
||||
function hostPage({ edited = false, insert = false } = {}) {
|
||||
return `
|
||||
<div class="lvg-host-page${insert ? ' has-insert' : ''}">
|
||||
<p class="lvg-host-kicker">Northstar field journal · Edition 08</p>
|
||||
<article class="lvg-host-target"${edited ? ' data-edited="true"' : ''}>
|
||||
<h4>${edited ? 'Useful observations, refined.' : 'Useful observations from the long way around.'}</h4>
|
||||
<p>Four routes, annotated maps, and practical details for unhurried weekends.</p>
|
||||
</article>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function selectionOutline() {
|
||||
return '<div class="lvg-selection-outline" aria-hidden="true"></div>';
|
||||
}
|
||||
|
||||
function dots({ arrived = 0, visible = 0, expected = 3, clickable = false } = {}) {
|
||||
let html = '<span class="lvg-dots" aria-label="Variant progress">';
|
||||
for (let index = 1; index <= expected; index += 1) {
|
||||
const active = index === visible;
|
||||
const pending = index > arrived;
|
||||
const className = `lvg-dot${active ? ' is-active' : ''}${pending ? ' is-pending' : ''}`;
|
||||
if (clickable && !pending) {
|
||||
const target = index === 1 ? 'cycling-progressive' : 'cycling-second';
|
||||
html += `<button type="button" class="${className}" data-gallery-go="${target}" aria-label="Show variant ${index}"${active ? ' aria-current="true"' : ''}></button>`;
|
||||
} else {
|
||||
html += `<i class="${className}" aria-hidden="true"></i>`;
|
||||
}
|
||||
}
|
||||
return html + '</span>';
|
||||
}
|
||||
|
||||
function configureBar({ actionLabel, count, listening = false, locked = false, insert = false, picker = '' } = {}) {
|
||||
const inputValue = insert
|
||||
? 'Add a compact proof strip'
|
||||
: listening
|
||||
? 'Tighten the hierarchy'
|
||||
: locked
|
||||
? ''
|
||||
: 'Make this feel more confident';
|
||||
const actionControl = insert ? '' : `
|
||||
<button type="button" class="lvg-configure-modifier" data-gallery-go="action-picker" aria-haspopup="listbox" aria-expanded="${picker ? 'true' : 'false'}">
|
||||
${escapeHtml(actionLabel)} <span aria-hidden="true">▾</span>
|
||||
</button>`;
|
||||
return `
|
||||
<div class="lvg-live-context is-configure${picker ? ' has-picker' : ''}"${locked ? ' data-locked="true"' : ''}>
|
||||
<div class="lvg-configure-row">
|
||||
<div class="lvg-configure-input-shell">
|
||||
<button type="button" class="lvg-selection-pill" data-gallery-go="global-ready" aria-label="Clear selection">${insert ? 'slot' : 'article'}</button>
|
||||
<input class="lvg-configure-input" aria-label="${insert ? 'Describe the new element' : 'Describe the change'}" value="${escapeHtml(inputValue)}"${locked ? ' placeholder="apply is running..." disabled' : ''} />
|
||||
</div>
|
||||
<div class="lvg-configure-trailing">
|
||||
<div class="lvg-configure-modifiers">
|
||||
${actionControl}
|
||||
<button type="button" class="lvg-configure-modifier is-count" data-gallery-count aria-label="Change variant count">×${count}</button>
|
||||
</div>
|
||||
<button type="button" class="lvg-configure-voice" data-gallery-go="${listening ? 'configure-replace' : 'configure-listening'}" aria-label="${listening ? 'Stop voice input' : 'Voice input'}" aria-pressed="${listening}">${ICONS.voice}</button>
|
||||
<button type="button" class="lvg-configure-submit" data-gallery-go="generating" aria-label="${insert ? 'Create variants' : 'Generate variants'}">${ICONS.submit}</button>
|
||||
</div>
|
||||
</div>
|
||||
${picker}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function actionPicker(commands, selectedAction) {
|
||||
return `
|
||||
<div class="lvg-action-picker" role="listbox" aria-label="Design action">
|
||||
<div class="lvg-action-grid">
|
||||
${commands.map((command) => `
|
||||
<button type="button" class="lvg-action-chip" role="option" data-gallery-action="${escapeHtml(command.value)}" aria-pressed="${command.value === selectedAction}">
|
||||
<span>${command.icon}</span><span>${escapeHtml(command.label)}</span>
|
||||
</button>`).join('')}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function generatingBar(recovery = false, actionLabel = 'Freeform') {
|
||||
return `
|
||||
<div class="lvg-live-context">
|
||||
<div class="lvg-generation-row">
|
||||
<span class="lvg-generation-label">${escapeHtml(actionLabel)}</span>
|
||||
${dots({ expected: 3 })}
|
||||
<span class="lvg-generation-status">${recovery ? 'Variants ready. Reveal the selected element to resume.' : 'Source ready. Generating...'}</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function tuneButton(open) {
|
||||
return `
|
||||
<button type="button" class="lvg-tune-button" data-gallery-go="${open ? 'cycling-second' : 'tune-open'}" aria-expanded="${open}">
|
||||
${ICONS.tune}<span>Tune</span><span class="lvg-tune-badge">3</span>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
function cyclingBar({ arrived = 1, visible = 1, tune = false } = {}) {
|
||||
const remaining = 3 - arrived;
|
||||
return `
|
||||
<div class="lvg-live-context${tune ? ' has-tune' : ''}">
|
||||
<div class="lvg-cycling-row">
|
||||
<button type="button" class="lvg-nav-button" data-gallery-go="cycling-progressive" aria-label="Previous variant"${visible <= 1 ? ' disabled' : ''}>←</button>
|
||||
${dots({ arrived, visible, expected: 3, clickable: true })}
|
||||
<span class="lvg-variant-counter">${visible}/3</span>
|
||||
<button type="button" class="lvg-nav-button" data-gallery-go="cycling-second" aria-label="Next variant"${visible >= arrived ? ' disabled' : ''}>→</button>
|
||||
${tuneButton(tune)}
|
||||
<span class="lvg-cycling-spacer"></span>
|
||||
${remaining > 0 ? `<span class="lvg-arrival-progress">${remaining} more arriving...</span>` : ''}
|
||||
<button type="button" class="lvg-accept" data-gallery-go="applying">✓ Accept</button>
|
||||
<button type="button" class="lvg-discard" data-gallery-go="global-ready" aria-label="Discard all variants" title="Discard all variants">✕</button>
|
||||
</div>
|
||||
${tune ? tunePanel() : ''}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function tunePanel() {
|
||||
return `
|
||||
<div class="lvg-tune-panel">
|
||||
<div class="lvg-tune-grid">
|
||||
<div class="lvg-param">
|
||||
<div class="lvg-param-header"><strong>Color amount</strong><output data-gallery-range-output>0.60</output></div>
|
||||
<input type="range" min="0" max="1" step="0.05" value="0.6" data-gallery-range aria-label="Color amount" />
|
||||
</div>
|
||||
<div class="lvg-param">
|
||||
<div class="lvg-param-header"><strong>Density</strong><output data-gallery-density-output>Snug</output></div>
|
||||
<div class="lvg-param-steps" role="group" aria-label="Density">
|
||||
<button type="button" data-gallery-density="Airy" aria-pressed="false">Airy</button>
|
||||
<button type="button" data-gallery-density="Snug" aria-pressed="true">Snug</button>
|
||||
<button type="button" data-gallery-density="Packed" aria-pressed="false">Packed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lvg-param">
|
||||
<div class="lvg-param-header"><strong>Motion</strong><output data-gallery-toggle-output>Off</output></div>
|
||||
<button type="button" class="lvg-param-toggle" data-gallery-param-toggle aria-label="Motion" aria-pressed="false"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function statusBar(kind) {
|
||||
if (kind === 'confirmed') {
|
||||
return '<div class="lvg-live-context is-confirmed"><div class="lvg-status-row"><span aria-hidden="true">✓</span><span>Variant applied</span></div></div>';
|
||||
}
|
||||
return '<div class="lvg-live-context"><div class="lvg-status-row"><i class="lvg-spinner" aria-hidden="true"></i><span>Applying variant...</span></div></div>';
|
||||
}
|
||||
|
||||
function editBadge(editing = false) {
|
||||
if (!editing) {
|
||||
return `<div class="lvg-edit-badge"><button type="button" class="is-icon" data-gallery-go="edit-copy" aria-label="Edit copy" title="Edit copy">${ICONS.edit}</button></div>`;
|
||||
}
|
||||
return '<div class="lvg-edit-badge"><button type="button" data-gallery-go="configure-replace">Cancel</button><button type="button" class="is-primary" data-gallery-go="copy-pending">Save</button></div>';
|
||||
}
|
||||
|
||||
function annotationLayer() {
|
||||
return `
|
||||
<div class="lvg-annotation-layer">
|
||||
<svg viewBox="0 0 404 150" aria-hidden="true"><path d="M44 106 C82 74, 136 83, 175 105 S267 135, 322 90"/></svg>
|
||||
<button type="button" class="lvg-annotation-clear" data-gallery-go="configure-replace">Clear</button>
|
||||
<div class="lvg-annotation-pin"><span>Keep this line on one row</span></div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function pendingDock(kind) {
|
||||
if (kind === 'attention') {
|
||||
return `
|
||||
<div class="lvg-pending-dock">
|
||||
<button type="button" class="lvg-pending-pill" disabled>Apply needs attention</button>
|
||||
<button type="button" class="lvg-pending-decision is-primary" data-gallery-go="copy-applying">Keep fixing</button>
|
||||
<button type="button" class="lvg-pending-decision" data-gallery-go="copy-pending">Rollback</button>
|
||||
</div>`;
|
||||
}
|
||||
const applying = kind === 'applying';
|
||||
return `
|
||||
<div class="lvg-pending-dock">
|
||||
<button type="button" class="lvg-pending-pill" data-gallery-go="${applying ? 'copy-attention' : 'copy-applying'}" aria-busy="${applying}"${applying ? ' disabled' : ''}>
|
||||
${applying ? '<i class="lvg-pending-spinner" aria-hidden="true"></i><span>Applying 3 copy edits</span>' : '<span>Apply copy edits</span><span class="lvg-pending-count">3</span>'}
|
||||
</button>
|
||||
<button type="button" class="lvg-pending-trash" data-gallery-go="global-ready" aria-label="Discard copy edits on this page">${ICONS.trash}</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function designPanel(tab = 'visual') {
|
||||
const raw = tab === 'raw';
|
||||
return `
|
||||
<aside class="lvg-design-panel" aria-label="DESIGN.md panel">
|
||||
<header class="lvg-design-header">
|
||||
<span class="lvg-design-title">DESIGN.md</span>
|
||||
<div class="lvg-design-tabs" role="tablist" aria-label="Design system view">
|
||||
<button type="button" role="tab" data-gallery-design-tab="visual" aria-selected="${!raw}">Visual</button>
|
||||
<button type="button" role="tab" data-gallery-design-tab="raw" aria-selected="${raw}">Raw</button>
|
||||
</div>
|
||||
<button type="button" class="lvg-design-close" data-gallery-go="global-tools" aria-label="Close panel">✕</button>
|
||||
</header>
|
||||
<div class="lvg-design-body">
|
||||
${raw ? `
|
||||
<div class="lvg-design-tile">
|
||||
<div class="lvg-design-meta"><strong>Neo Kinpaku</strong><span>Raw</span></div>
|
||||
<p class="lvg-design-copy"># Design System: Impeccable<br><br>Dark lacquer, kinpaku gold, and precise technical geometry.</p>
|
||||
</div>` : `
|
||||
<div class="lvg-design-tile">
|
||||
<div class="lvg-design-meta"><strong>Kinpaku Gold</strong><span>Primary</span></div>
|
||||
<div class="lvg-design-swatch"></div>
|
||||
<p class="lvg-design-copy">Primary accent for commitment, active controls, and the Impeccable mark.</p>
|
||||
</div>
|
||||
<div class="lvg-design-tile">
|
||||
<div class="lvg-design-meta"><strong>Display</strong><span>Typography</span></div>
|
||||
<p class="lvg-design-type">Useful observations</p>
|
||||
<p class="lvg-design-copy">Alumni Sans · precise, light, and deliberately geometric.</p>
|
||||
</div>`}
|
||||
</div>
|
||||
</aside>`;
|
||||
}
|
||||
|
||||
function globalBar({ connected = true, workerFallback = false, active = 'pick', steer = 'collapsed', detectCount = 0, designActive = false } = {}) {
|
||||
const modeButton = (key, icon, label, target, extra = '') => {
|
||||
const isActive = active === key || (key === 'design' && designActive);
|
||||
return `<button type="button" class="lvg-global-mode" data-active="${isActive}" data-gallery-go="${target}" aria-label="${escapeHtml(label)}">${icon}${isActive ? `<span>${escapeHtml(label)}</span>` : ''}${extra}</button>`;
|
||||
};
|
||||
const steerHtml = steer === 'processing'
|
||||
? `<div class="lvg-steer" data-expanded="true" data-processing="true" aria-busy="true" aria-label="Processing steer request"><span class="lvg-steer-icon">${ICONS.chat}</span><span class="lvg-steer-dots" aria-hidden="true"><i></i><i></i><i></i></span></div>`
|
||||
: steer === 'expanded'
|
||||
? `<div class="lvg-steer" data-expanded="true"><span class="lvg-steer-icon">${ICONS.chat}</span><input type="text" value="Make the page hierarchy more decisive" data-gallery-steer-input aria-label="Steer the page"/><button type="button" class="lvg-steer-voice" aria-label="Voice input">${ICONS.voice}</button></div>`
|
||||
: `<button type="button" class="lvg-steer" data-gallery-go="steer-expanded" aria-label="Steer the page"><span class="lvg-steer-icon">${ICONS.chat}</span><span class="lvg-steer-hint">Steer</span><span class="lvg-steer-voice">${ICONS.voice}</span></button>`;
|
||||
|
||||
return `
|
||||
<div class="lvg-live-global">
|
||||
<span class="lvg-live-brand" data-connected="${connected}" data-worker-fallback="${workerFallback}" role="img" aria-label="Impeccable live mode${!connected ? ' - agent not polling' : workerFallback ? ' - using foreground generation' : ''}">
|
||||
${brandMark()}${connected && !workerFallback ? '' : '<i class="lvg-agent-dot" aria-hidden="true"></i>'}
|
||||
</span>
|
||||
<div class="lvg-global-inner">
|
||||
${modeButton('pick', ICONS.pick, 'Pick', 'configure-replace')}
|
||||
${modeButton('insert', ICONS.insert, 'Insert', 'insert-placeholder')}
|
||||
${modeButton('detect', ICONS.detect, 'Detect', 'global-tools', detectCount ? `<span class="lvg-detect-badge">${detectCount}</span>` : '')}
|
||||
${modeButton('design', designMark(), 'DESIGN.md', 'design-panel')}
|
||||
${steerHtml}
|
||||
<span class="lvg-global-divider" aria-hidden="true"></span>
|
||||
<button type="button" class="lvg-global-exit" data-gallery-go="global-ready" aria-label="Exit live mode" title="Exit live mode">${ICONS.exit}</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function sceneFor(state, context) {
|
||||
const actionLabel = context.commands.find((command) => command.value === context.selectedAction)?.label || 'Freeform';
|
||||
const commonGlobal = (opts = {}) => globalBar({ active: 'pick', ...opts });
|
||||
switch (state) {
|
||||
case 'global-disconnected':
|
||||
return hostPage() + '<div class="lvg-agent-tooltip" role="tooltip">Agent disconnected - run live-poll.mjs to connect</div>' + commonGlobal({ connected: false });
|
||||
case 'global-foreground':
|
||||
return hostPage()
|
||||
+ '<div class="lvg-live-toast" role="status">Codex CLI is unavailable. Live is using the main agent, so generation may take longer. Install the CLI, run codex login, then restart Live.</div>'
|
||||
+ commonGlobal({ workerFallback: true });
|
||||
case 'global-tools':
|
||||
return hostPage() + commonGlobal({ active: 'detect', detectCount: 7, designActive: true });
|
||||
case 'steer-expanded':
|
||||
return hostPage() + commonGlobal({ steer: 'expanded' });
|
||||
case 'steer-processing':
|
||||
return hostPage() + commonGlobal({ steer: 'processing' });
|
||||
case 'configure-replace':
|
||||
return hostPage() + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count }) + commonGlobal();
|
||||
case 'action-picker':
|
||||
return hostPage() + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count, picker: actionPicker(context.commands, context.selectedAction) }) + commonGlobal();
|
||||
case 'configure-listening':
|
||||
return hostPage() + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count, listening: true }) + commonGlobal();
|
||||
case 'configure-locked':
|
||||
return hostPage({ edited: true }) + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count, locked: true }) + pendingDock('applying') + commonGlobal();
|
||||
case 'annotation':
|
||||
return hostPage() + selectionOutline() + annotationLayer() + configureBar({ actionLabel, count: context.count }) + commonGlobal();
|
||||
case 'insert-placeholder':
|
||||
return hostPage({ insert: true }) + '<div class="lvg-insert-placeholder" aria-label="Insert placeholder"></div>' + configureBar({ count: context.count, insert: true }) + globalBar({ active: 'insert' });
|
||||
case 'generating':
|
||||
return hostPage() + selectionOutline() + generatingBar(false, actionLabel) + commonGlobal();
|
||||
case 'generation-recovery':
|
||||
return hostPage() + generatingBar(true, actionLabel) + commonGlobal();
|
||||
case 'cycling-progressive':
|
||||
return hostPage() + selectionOutline() + cyclingBar({ arrived: 1, visible: 1 }) + commonGlobal();
|
||||
case 'cycling-second':
|
||||
return hostPage() + selectionOutline() + cyclingBar({ arrived: 2, visible: 2 }) + commonGlobal();
|
||||
case 'tune-open':
|
||||
return hostPage() + selectionOutline() + cyclingBar({ arrived: 3, visible: 2, tune: true }) + commonGlobal();
|
||||
case 'applying':
|
||||
return hostPage() + selectionOutline() + statusBar('applying') + commonGlobal();
|
||||
case 'confirmed':
|
||||
return hostPage({ edited: true }) + statusBar('confirmed') + commonGlobal();
|
||||
case 'edit-copy':
|
||||
return hostPage({ edited: true }) + selectionOutline() + editBadge(true) + configureBar({ actionLabel, count: context.count }) + commonGlobal();
|
||||
case 'copy-pending':
|
||||
return hostPage({ edited: true }) + pendingDock('pending') + commonGlobal();
|
||||
case 'copy-applying':
|
||||
return hostPage({ edited: true }) + pendingDock('applying') + commonGlobal();
|
||||
case 'copy-attention':
|
||||
return hostPage({ edited: true }) + pendingDock('attention') + commonGlobal();
|
||||
case 'design-panel':
|
||||
return hostPage() + designPanel(context.designTab) + globalBar({ active: 'design', designActive: true });
|
||||
case 'toast-error':
|
||||
return hostPage() + '<div class="lvg-live-toast" role="alert">No variants were mounted. Please try again.</div>' + commonGlobal();
|
||||
case 'global-ready':
|
||||
default:
|
||||
return hostPage() + commonGlobal();
|
||||
}
|
||||
}
|
||||
|
||||
function initLiveUiGallery(root) {
|
||||
if (!root || root.dataset.galleryReady === 'true') return;
|
||||
root.dataset.galleryReady = 'true';
|
||||
|
||||
const states = parseJson(root, '[data-live-gallery-states]');
|
||||
const commands = parseJson(root, '[data-live-gallery-vocabulary]');
|
||||
if (states.length === 0 || commands.length === 0) return;
|
||||
|
||||
const select = root.querySelector('[data-gallery-state]');
|
||||
const groupReadout = root.querySelector('[data-gallery-state-group]');
|
||||
const labelReadout = root.querySelector('[data-gallery-state-label]');
|
||||
const quickNav = root.querySelector('.live-ui-gallery__quick-nav');
|
||||
const previews = [...root.querySelectorAll('[data-live-gallery-preview]')];
|
||||
let selectedAction = 'impeccable';
|
||||
let count = 3;
|
||||
let designTab = 'visual';
|
||||
|
||||
const stateIndex = (key) => Math.max(0, states.findIndex((state) => state.key === key));
|
||||
const currentState = () => select?.value || states[0].key;
|
||||
|
||||
function render(nextState = currentState(), { focusSelect = false } = {}) {
|
||||
const state = states[stateIndex(nextState)] || states[0];
|
||||
if (select) select.value = state.key;
|
||||
if (groupReadout) groupReadout.textContent = state.group;
|
||||
if (labelReadout) labelReadout.textContent = state.label;
|
||||
|
||||
let activeStateButton = null;
|
||||
root.querySelectorAll('[data-gallery-state-button]').forEach((button) => {
|
||||
const active = button.dataset.galleryStateButton === state.key;
|
||||
button.setAttribute('aria-current', active ? 'true' : 'false');
|
||||
if (active) activeStateButton = button;
|
||||
});
|
||||
|
||||
for (const preview of previews) {
|
||||
preview.dataset.galleryState = state.key;
|
||||
preview.setAttribute('aria-label', `${preview.dataset.liveGalleryPreview} host — ${state.label}`);
|
||||
preview.innerHTML = sceneFor(state.key, { commands, selectedAction, count, designTab });
|
||||
}
|
||||
|
||||
if (quickNav && activeStateButton) {
|
||||
requestAnimationFrame(() => {
|
||||
const navRect = quickNav.getBoundingClientRect();
|
||||
const buttonRect = activeStateButton.getBoundingClientRect();
|
||||
if (buttonRect.left < navRect.left) quickNav.scrollLeft -= navRect.left - buttonRect.left + 8;
|
||||
if (buttonRect.right > navRect.right) quickNav.scrollLeft += buttonRect.right - navRect.right + 8;
|
||||
});
|
||||
}
|
||||
if (focusSelect) select?.focus();
|
||||
}
|
||||
|
||||
function step(delta) {
|
||||
const next = (stateIndex(currentState()) + delta + states.length) % states.length;
|
||||
render(states[next].key, { focusSelect: true });
|
||||
}
|
||||
|
||||
select?.addEventListener('change', () => render(select.value));
|
||||
|
||||
root.addEventListener('click', (event) => {
|
||||
const stepButton = event.target.closest('[data-gallery-step]');
|
||||
if (stepButton) {
|
||||
step(Number(stepButton.dataset.galleryStep) || 1);
|
||||
return;
|
||||
}
|
||||
|
||||
const stateButton = event.target.closest('[data-gallery-state-button]');
|
||||
if (stateButton) {
|
||||
render(stateButton.dataset.galleryStateButton);
|
||||
return;
|
||||
}
|
||||
|
||||
const actionButton = event.target.closest('[data-gallery-action]');
|
||||
if (actionButton) {
|
||||
selectedAction = actionButton.dataset.galleryAction || 'impeccable';
|
||||
render('configure-replace');
|
||||
return;
|
||||
}
|
||||
|
||||
const countButton = event.target.closest('[data-gallery-count]');
|
||||
if (countButton) {
|
||||
count = count >= 4 ? 1 : count + 1;
|
||||
render(currentState());
|
||||
return;
|
||||
}
|
||||
|
||||
const densityButton = event.target.closest('[data-gallery-density]');
|
||||
if (densityButton) {
|
||||
const value = densityButton.dataset.galleryDensity;
|
||||
root.querySelectorAll('[data-gallery-density]').forEach((button) => {
|
||||
button.setAttribute('aria-pressed', button.dataset.galleryDensity === value ? 'true' : 'false');
|
||||
});
|
||||
root.querySelectorAll('[data-gallery-density-output]').forEach((output) => { output.textContent = value; });
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleButton = event.target.closest('[data-gallery-param-toggle]');
|
||||
if (toggleButton) {
|
||||
const next = toggleButton.getAttribute('aria-pressed') !== 'true';
|
||||
root.querySelectorAll('[data-gallery-param-toggle]').forEach((button) => button.setAttribute('aria-pressed', String(next)));
|
||||
root.querySelectorAll('[data-gallery-toggle-output]').forEach((output) => { output.textContent = next ? 'On' : 'Off'; });
|
||||
return;
|
||||
}
|
||||
|
||||
const designTabButton = event.target.closest('[data-gallery-design-tab]');
|
||||
if (designTabButton) {
|
||||
designTab = designTabButton.dataset.galleryDesignTab === 'raw' ? 'raw' : 'visual';
|
||||
render('design-panel');
|
||||
return;
|
||||
}
|
||||
|
||||
const trigger = event.target.closest('[data-gallery-go]');
|
||||
if (trigger && !trigger.disabled) render(trigger.dataset.galleryGo);
|
||||
});
|
||||
|
||||
root.addEventListener('input', (event) => {
|
||||
const range = event.target.closest('[data-gallery-range]');
|
||||
if (!range) return;
|
||||
const value = Number(range.value).toFixed(2);
|
||||
root.querySelectorAll('[data-gallery-range]').forEach((input) => { if (input !== range) input.value = range.value; });
|
||||
root.querySelectorAll('[data-gallery-range-output]').forEach((output) => { output.textContent = value; });
|
||||
});
|
||||
|
||||
root.addEventListener('keydown', (event) => {
|
||||
if (event.target.matches('[data-gallery-steer-input]') && event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
render('steer-processing');
|
||||
return;
|
||||
}
|
||||
|
||||
const stateButton = event.target.closest('[data-gallery-state-button]');
|
||||
if (stateButton && ['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
const current = stateIndex(stateButton.dataset.galleryStateButton);
|
||||
const next = event.key === 'Home'
|
||||
? 0
|
||||
: event.key === 'End'
|
||||
? states.length - 1
|
||||
: (current + (event.key === 'ArrowLeft' ? -1 : 1) + states.length) % states.length;
|
||||
render(states[next].key);
|
||||
root.querySelector(`[data-gallery-state-button="${states[next].key}"]`)?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const panel = event.target.closest('.live-ui-gallery__control-panel');
|
||||
if (!panel || event.target.matches('input')) return;
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
step(-1);
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
step(1);
|
||||
} else if (event.key === 'Home') {
|
||||
event.preventDefault();
|
||||
render(states[0].key, { focusSelect: true });
|
||||
} else if (event.key === 'End') {
|
||||
event.preventDefault();
|
||||
render(states[states.length - 1].key, { focusSelect: true });
|
||||
}
|
||||
});
|
||||
|
||||
render(states[0].key);
|
||||
}
|
||||
|
||||
function initLiveUiGalleries() {
|
||||
document.querySelectorAll('[data-live-ui-gallery]').forEach(initLiveUiGallery);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initLiveUiGalleries, { once: true });
|
||||
} else {
|
||||
initLiveUiGalleries();
|
||||
}
|
||||
|
||||
document.addEventListener('astro:page-load', initLiveUiGalleries);
|
||||
+10
-11
@@ -1,17 +1,16 @@
|
||||
// Theme switcher — three-way: auto / light / dark with localStorage persistence.
|
||||
// "auto" (the default) inherits from the OS via prefers-color-scheme and is only
|
||||
// overridden once the user clicks the toggle. Clicking cycles auto → light → dark → auto.
|
||||
// Theme switcher — three-way: dark / light / auto with localStorage persistence.
|
||||
// Dark is the first-visit default. Auto remains an explicit choice and follows
|
||||
// the OS via prefers-color-scheme. Clicking cycles dark → light → auto → dark.
|
||||
|
||||
const STORAGE_KEY = 'impeccable-theme';
|
||||
|
||||
export function getStoredPref() {
|
||||
const v = localStorage.getItem(STORAGE_KEY);
|
||||
return v === 'light' || v === 'dark' ? v : 'auto';
|
||||
return v === 'light' || v === 'dark' || v === 'auto' ? v : 'dark';
|
||||
}
|
||||
|
||||
export function setStoredPref(pref) {
|
||||
if (pref === 'auto') localStorage.removeItem(STORAGE_KEY);
|
||||
else localStorage.setItem(STORAGE_KEY, pref);
|
||||
localStorage.setItem(STORAGE_KEY, pref);
|
||||
}
|
||||
|
||||
function systemTheme() {
|
||||
@@ -25,9 +24,9 @@ export function resolveTheme(pref) {
|
||||
}
|
||||
|
||||
const LABELS = {
|
||||
auto: 'Theme: auto, matching your system. Click to switch to light mode.',
|
||||
light: 'Theme: light. Click to switch to dark mode.',
|
||||
dark: 'Theme: dark. Click to switch back to auto.',
|
||||
dark: 'Theme: dark. Click to switch to light mode.',
|
||||
light: 'Theme: light. Click to switch to auto mode.',
|
||||
auto: 'Theme: auto, matching your system. Click to switch to dark mode.',
|
||||
};
|
||||
|
||||
const TITLES = {
|
||||
@@ -55,8 +54,8 @@ export function applyTheme(pref) {
|
||||
});
|
||||
}
|
||||
|
||||
function nextPref(pref) {
|
||||
return pref === 'auto' ? 'light' : pref === 'light' ? 'dark' : 'auto';
|
||||
export function nextPref(pref) {
|
||||
return pref === 'dark' ? 'light' : pref === 'light' ? 'auto' : 'dark';
|
||||
}
|
||||
|
||||
export function initThemeToggle() {
|
||||
|
||||
Reference in New Issue
Block a user