/* PluginModes.jsx — Tour and Listen overlays on top of PluginShell.
- Tour: scrim + spotlight + explainer card for each element.
- Listen: faders locked, only preset/bypass/AB interactive. */
const { useState: _pm_us, useEffect: _pm_ue, useRef: _pm_ur, useMemo: _pm_um } = React;
// ─── TOUR STEPS ──────────────────────────────────────────────────────
// Each step targets a DOM selector inside the plugin shell (relative).
// text: body copy; title: short label; action: hint of what to try.
// watchKeys: fader keys in pluginState to monitor; the step completes when any
// of them change from the snapshot taken at step entry. Steps without watchKeys
// are purely informational and can be advanced manually.
const TOUR_STEPS = [
{
sel: '.mv-header',
title: 'Header',
body: 'Top strip of the plugin. Current preset name, nudge arrows between presets, Save / Delete, and the global Bypass — everything you reach before touching a fader.',
action: 'Click the arrows or the preset name.',
},
{
sel: '.mv-zone:nth-child(1)',
title: 'Zone 1 — Start Here',
body: 'Voice type (Off / Male / Female), input meter with rotary input gain, and POWER — the master drive that gives the whole chain its character.',
action: 'Drag the POWER fader. Alt / Opt + click to reset.',
watchKeys: ['power'],
},
{
sel: '.mv-zone:nth-child(2)',
title: 'Zone 2 — Creative',
body: 'The five creative effects: FOCUS cuts the mud and pushes presence; FAT adds body; DOUBLER widens; REVERB creates depth; DELAY puts space between words.',
action: 'Drag any fader. Alt / Opt + click to reset.',
watchKeys: ['focus', 'fat', 'doubler', 'reverb', 'delay'],
},
{
sel: '.mv-zone:nth-child(3)',
title: 'Zone 3 — Clean Up',
body: 'CLARITY adds air without the harshness; DE-ESS tames the sibilants. They work together: the more air you push, the more the de-esser earns its keep.',
action: 'Drag Clarity or De-Ess. Alt / Opt + click to reset.',
watchKeys: ['clarity', 'deess'],
},
{
sel: '.mv-zone:nth-child(4)',
title: 'Zone 4 — End Here',
body: 'Output meter and final rotary gain. This is where you check you\u2019re not clipping on the way out of the plugin.',
action: 'Drag the output fader. Alt / Opt + click to reset.',
watchKeys: ['output'],
},
{
sel: '.mv-auto-toggle',
title: 'Auto Gain',
body: 'The AUTO pill keeps your processed level matched to the dry signal, so EQ and compression moves are heard as shape, not as level. Saves you from second-guessing every fader.',
action: 'Click AUTO to toggle.',
watchKeys: ['autoGain'],
},
{
sel: '.mv-zone:nth-child(2) .mv-control-icon--top',
title: 'Bypass per effect',
body: 'Every effect icon is a button. Tap it once to bypass that single FX, tap again to bring it back. Lets you A/B one element of the chain without unraveling the preset.',
action: 'Click any effect icon.',
},
{
sel: '.mv-zone:nth-child(2) .mv-zone-head',
title: 'Bypass a whole zone',
body: 'Tap a zone label — 1 Start Here, 2 Creative, or 3 Clean Up — to bypass everything inside it in one click. Tap again to bring the whole group back. Fastest way to A/B "with vs without the creative chain."',
action: 'Click 2 Creative.',
},
{
sel: '.mv-preset-big',
title: 'Preset Selector',
body: '58 factory presets across 7 genre categories with mood-tag filtering, favorites, and recent. Each loads a complete configuration you can refine from there.',
action: 'Click to open the preset browser.',
},
];
// ─── Hook: measure & track selector rect ─────────────────────────────
const useSelectorRect = (rootRef, sel, enabled) => {
const [rect, setRect] = _pm_us(null);
_pm_ue(() => {
if (!enabled) { setRect(null); return; }
const tick = () => {
if (!rootRef.current || !sel) return;
const root = rootRef.current;
const target = root.querySelector(sel);
const rr = root.getBoundingClientRect();
if (!target) { setRect(null); return; }
const tr = target.getBoundingClientRect();
setRect({
x: tr.left - rr.left,
y: tr.top - rr.top,
w: tr.width,
h: tr.height,
});
};
tick();
const id = setInterval(tick, 120);
window.addEventListener('resize', tick);
return () => { clearInterval(id); window.removeEventListener('resize', tick); };
}, [rootRef, sel, enabled]);
return rect;
};
// ─── Mode toggle buttons (above the plugin) ──────────────────────────
const ModeButtons = ({ mode, setMode }) => (
);
// ─── Tour overlay: scrim + cut-out + "?" markers + explainer card ────
const TOUR_ACCENT = '#a7a5ff';
const TourOverlay = ({ rootRef, pluginState, onClose }) => {
const [stepIdx, setStepIdx] = _pm_us(0);
const [actionDone, setActionDone] = _pm_us(false);
const [snapshot, setSnapshot] = _pm_us(null);
const step = TOUR_STEPS[stepIdx];
const rect = useSelectorRect(rootRef, step.sel, true);
// Take a snapshot of watched keys whenever the step changes.
_pm_ue(() => {
setActionDone(false);
if (step.watchKeys && pluginState) {
const snap = {};
step.watchKeys.forEach(k => { snap[k] = pluginState[k]; });
setSnapshot(snap);
} else {
setSnapshot(null);
}
}, [stepIdx]);
// Detect if user has acted (changed any watched fader from snapshot).
_pm_ue(() => {
if (!snapshot || !pluginState || actionDone) return;
const changed = Object.keys(snapshot).some(k =>
Math.abs((pluginState[k] ?? 0) - (snapshot[k] ?? 0)) > 0.001);
if (changed) setActionDone(true);
}, [pluginState, snapshot, actionDone]);
const waiting = !!(step.watchKeys && !actionDone);
const [rootSize, setRootSize] = _pm_us({ w: 1000, h: 660 });
_pm_ue(() => {
if (!rootRef.current) return;
const el = rootRef.current;
const upd = () => setRootSize({ w: el.offsetWidth, h: el.offsetHeight });
upd();
const ro = new ResizeObserver(upd);
ro.observe(el);
return () => ro.disconnect();
}, [rootRef]);
if (!rect) return null;
const pad = 4;
// Clamp highlight rect so its stroke stays inside the plugin canvas.
const hx = Math.max(pad, rect.x - pad);
const hy = Math.max(pad, rect.y - pad);
const hw = Math.min(rootSize.w - hx - pad, rect.w + pad * 2);
const hh = Math.min(rootSize.h - hy - pad, rect.h + pad * 2);
const cx = hx + hw / 2;
const cy = hy + hh / 2;
// "?" marker: nudged inside so it never clips on the plugin edge.
const qSize = 32;
const qX = Math.min(rootSize.w - qSize - 4, Math.max(4, rect.x + rect.w - qSize / 2));
const qY = Math.min(rootSize.h - qSize - 4, Math.max(4, rect.y - qSize / 2));
// Card position: right of rect if space, otherwise left; clamp to root.
const cardW = 320;
let cardX = rect.x + rect.w + 16;
if (cardX + cardW > rootSize.w - 8) cardX = rect.x - cardW - 16;
if (cardX < 8) cardX = 8;
let cardY = Math.max(8, cy - 60);
const cardH = 260;
if (cardY + cardH > rootSize.h - 8) cardY = rootSize.h - cardH - 8;
// Four backdrop-blur strips around the highlight (aperture-blur effect).
// They cover everything OUTSIDE the highlight rect — no corner gaps.
const stripStyle = {
position: 'absolute', pointerEvents: 'auto',
background: 'rgba(3,3,10,.78)',
backdropFilter: 'blur(6px) saturate(80%)',
WebkitBackdropFilter: 'blur(6px) saturate(80%)',
};
const goNext = () => {
if (stepIdx === TOUR_STEPS.length - 1) onClose();
else setStepIdx(stepIdx + 1);
};
const goPrev = () => setStepIdx((stepIdx - 1 + TOUR_STEPS.length) % TOUR_STEPS.length);
return (
{/* Aperture blur scrim — four strips around the spotlight rect */}
{/* Highlight stroke — drawn as a div with INSET box-shadow so it never
spills outside the plugin edge even when the target hugs the border. */}
{/* "?" marker — clamped inside the plugin bounds */}