/* global React, ReactDOM, Lenis, docData */
const { useState: useStateA, useEffect: useEffectA } = React;
// Smooth scrolling hook
const useLenis = () => {
useEffectA(() => {
if (typeof Lenis === 'undefined') return;
const lenis = new Lenis({
duration: 1.05,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
smoothWheel: true,
wheelMultiplier: 1.0,
touchMultiplier: 1.2,
});
let raf;
const tick = (time) => {
lenis.raf(time);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => {
cancelAnimationFrame(raf);
lenis.destroy();
};
}, []);
};
// Mouse tracking glow hook
const useMouseGlow = () => {
useEffectA(() => {
const onMove = (e) => {
document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);
};
window.addEventListener('pointermove', onMove);
return () => window.removeEventListener('pointermove', onMove);
}, []);
};
// Top Header Bar
const TopHeader = () => {
const activeLang = (window.VirtueI18n && window.VirtueI18n.getLanguage) ? window.VirtueI18n.getLanguage() : 'en';
return (
);
};
// Left Sidebar Icon Navigation
const LeftSidebar = () => {
const items = [
{ href: '../#', label: 'Home', icon:
);
const DemoIcon = () => (
);
const ReviewIcon = () => (
);
const CompareIcon = () => (
);
const BentoIcon = () => (
);
const StepsIcon = () => (
);
const KeyIcon = () => (
);
const PricingIcon = () => (
);
const FAQIcon = () => (
);
// Interactive walkthrough component for settings panels
const SectionMedia = ({ sectionId }) => {
const [activeOs, setActiveOs] = useStateA('set-lic');
if (sectionId === 'getting-started') {
const tabs = [
{ id: 'set-lic', label: 'License', img: '../VFxM_008.png', caption: 'License management and machine activation limits' },
{ id: 'set-lang', label: 'Language', img: '../VFxM_009.png', caption: 'Interface language options (11 languages supported)' },
{ id: 'set-int', label: 'Interface', img: '../VFxM_010.png', caption: 'Adjusting UI font size, mouse-over tooltips, and idle timeout auto-deselect' },
{ id: 'set-ins', label: 'Insert Behavior', img: '../VFxM_011.png', caption: 'Configure FX window closing rules and mouse-click hijacking actions' },
{ id: 'set-brow', label: 'Browser', img: '../VFxM_012.png', caption: 'Dynamic list color settings and plugin format (AU, VST3, CLAP) show/hide filters' },
{ id: 'set-theme', label: 'Theme', img: '../VFxM_013.png', caption: 'Custom window, background, and accent color palette editors' },
{ id: 'set-files', label: 'Files & Paths', img: '../VFxM_014.png', caption: 'Custom local user database folders and thumbnail file cache location settings' }
];
const currentTab = tabs.find(t => t.id === activeOs) || tabs[0];
return (
Settings Panel Walkthrough
{tabs.map(t => (
setActiveOs(t.id)}
className={`os-tab-btn ${activeOs === t.id ? 'active' : ''}`}
style={{ flex: 'none', padding: '0.75rem 1rem', fontSize: '0.82rem' }}
>
{t.label}
))}
{currentTab.caption}
);
}
if (sectionId === 'visual-thumbnails') {
return (
<>
Virtue FX Manager Main Browser Interface (Grid View)
Grid View with Big Thumbnails enabled
Main interface with visual search cards in the grid and details list view
Filtering the plugin list dynamically using the autocomplete Developer dropdown filter
When performing an automated batch scan to generate thumbnails, the scanner must sequentially load each plugin. Please be aware of the following:
Server Connections: Some plugins (like those requiring license verification or iLok) might prompt for a server connection or display a pop-up dialog. The scan will pause until you manually click "OK" or "Allow" on these prompts.Volume Warning: Because the plugins are fully loaded into the session, some virtual instruments might emit a default sound or sine wave upon initialization. Please turn down your speakers or headphones during the scan to protect your ears and equipment.
);
}
if (sectionId === 'track-insertion') {
return (
Fast session building via drag and drop track insertion
);
}
if (sectionId === 'status-circles') {
return (
Status circles showing active (listed) and inactive (hidden) plugins
);
}
if (sectionId === 'color-codes') {
return (
Plugin lists colored dynamically by category
);
}
if (sectionId === 'favorites-organization') {
return (
<>
Favorites tabs and FX presets
Organizing tabs and editing settings inside Virtue FX Manager
);
}
if (sectionId === 'scanner-stability') {
return (
<>
Plugin Manager - Re-scan, deduplicate, and stability settings
Thumbnail Scanner - Batch scan missing thumbnails or regenerate all
Stability & Blocklist - View and clear blocked plugins that caused crashes during scans
);
}
return null;
};
// Interactive category list preview
const ColorListDemo = () => {
const [enabled, setEnabled] = useStateA(false);
const plugins = [
{ name: 'FabFilter Pro-Q 3', dev: 'FabFilter', cat: 'EQ & Filters', color: '#33b8ff' },
{ name: 'Decapitator', dev: 'Soundtoys', cat: 'Distortion & Saturation', color: '#ff473d' },
{ name: 'Valhalla VintageVerb', dev: 'Valhalla DSP', cat: 'Reverb & Space', color: '#b27aff' },
{ name: 'Serum', dev: 'Xfer Records', cat: 'Instruments & Synths', color: '#ff6cbe' }
];
return (
Interactive Demo: Color List by Category
Enable "Color list by category" settings option
Plugin Name
Developer
Category
{plugins.map((p, i) => (
))}
);
};
const Docs = () => {
useLenis();
useMouseGlow();
const activeLang = (window.VirtueI18n && window.VirtueI18n.getLanguage) ? window.VirtueI18n.getLanguage() : 'en';
const data = docData[activeLang] || docData.en;
const [activeSection, setActiveSection] = useStateA(data.sections[0]?.id || '');
const [searchQuery, setSearchQuery] = useStateA('');
// Synchronize active section with URL hash
useEffectA(() => {
const handleHashChange = () => {
const hash = window.location.hash.substring(1);
if (hash) {
// Confirm hash matches a valid section
const match = data.sections.find(sec => sec.id === hash);
if (match) {
setActiveSection(hash);
}
}
};
handleHashChange();
window.addEventListener('hashchange', handleHashChange);
return () => window.removeEventListener('hashchange', handleHashChange);
}, [data]);
// OS Tab switching delegation for dangerouslySetInnerHTML content
useEffectA(() => {
const container = document.getElementById('docs-sections-container');
if (!container) return;
const handleClick = (e) => {
const tabBtn = e.target.closest('.os-tab-btn');
if (!tabBtn) return;
const tabContainer = tabBtn.closest('.os-tab-container');
if (!tabContainer) return;
const os = tabBtn.dataset.os;
if (!os) return;
// Deactivate all buttons and content in this container
tabContainer.querySelectorAll('.os-tab-btn').forEach(btn => btn.classList.remove('active'));
tabContainer.querySelectorAll('.os-tab-content').forEach(content => content.classList.remove('active'));
// Activate current button and content
tabBtn.classList.add('active');
const targetContent = tabContainer.querySelector(`.os-tab-content[data-os="${os}"]`);
if (targetContent) targetContent.classList.add('active');
};
container.addEventListener('click', handleClick);
return () => container.removeEventListener('click', handleClick);
}, [activeSection]);
// Hydrate ColorListDemo placeholders in dangerouslySetInnerHTML content
useEffectA(() => {
const placeholders = document.querySelectorAll('.color-list-demo-placeholder');
placeholders.forEach(placeholder => {
if (placeholder.dataset.hydrated) return;
placeholder.dataset.hydrated = 'true';
placeholder.innerHTML = `
Interactive Demo: Color List by Category
Enable "Color list by category" settings option
Plugin Name
Developer
Category
FabFilter Pro-Q 3
FabFilter
EQ & Filters
Decapitator
Soundtoys
Distortion & Saturation
Valhalla VintageVerb
Valhalla DSP
Reverb & Space
Serum
Xfer Records
Instruments & Synths
`;
const checkbox = placeholder.querySelector('#demo-color-checkbox-inline');
if (checkbox) {
checkbox.addEventListener('change', () => {
const isChecked = checkbox.checked;
placeholder.querySelectorAll('.demo-plugin-row').forEach(row => {
const color = row.dataset.color;
const nameDiv = row.querySelector('.plugin-name');
if (nameDiv) nameDiv.style.color = isChecked ? color : 'var(--t)';
});
});
}
});
}, [activeSection]);
// Strip HTML utility for snippets
const getSnippet = (htmlContent, query) => {
const cleanText = htmlContent.replace(/<[^>]*>/g, ' ');
const qIdx = cleanText.toLowerCase().indexOf(query.toLowerCase());
if (qIdx !== -1) {
const start = Math.max(0, qIdx - 60);
const end = Math.min(cleanText.length, qIdx + query.length + 100);
return (start > 0 ? '...' : '') + cleanText.substring(start, end) + (end < cleanText.length ? '...' : '');
}
return cleanText.substring(0, 160) + (cleanText.length > 160 ? '...' : '');
};
// Text highlighting utility
const highlightText = (text, query) => {
if (!query) return text;
const parts = text.split(new RegExp(`(${query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')})`, 'gi'));
return parts.map((part, i) =>
part.toLowerCase() === query.toLowerCase()
? {part}
: part
);
};
// Filter sections matching search criteria
const matchingSections = searchQuery.trim()
? data.sections.filter(sec =>
sec.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
sec.content.toLowerCase().includes(searchQuery.toLowerCase())
)
: [];
return (
<>
{data.breadcrumbsHome}
{data.title}
{data.subtitle}
{/* Docs Table of Contents Sidebar */}
{/* Docs Main Content Column */}
{/* Main Tabbed Sections */}
{data.sections.map(sec => (
{sec.title}
{sec.id === 'color-codes' &&
))}
{matchingSections.length > 0 ? (
matchingSections.map(sec => (
{highlightText(getSnippet(sec.content, searchQuery), searchQuery)}
))
) : (
No results found for "{searchQuery}"
Try searching for other terms like 'install', 'favorite', or 'shortcut'.
)}
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( 
