/* ============================================================
Tweaks panel for AI메이트
- Hero variant switcher (drives [data-hero] on )
- Primary accent color
- Section background tint
============================================================ */
const TWEAK_DEFAULTS = {
heroVariant: 'floating', // 'floating' | 'flow' | 'demo'
primaryColor: '#6C19FF',
tint: '#F5F3FF',
showTrustStrip: true,
};
function TweaksApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Hero variant → body[data-hero]
React.useEffect(() => {
document.body.setAttribute('data-hero', t.heroVariant || 'floating');
}, [t.heroVariant]);
// Primary accent → CSS var override
React.useEffect(() => {
const c = t.primaryColor || '#6C19FF';
document.documentElement.style.setProperty('--primary', c);
// derive deep + tint
const deep = shade(c, -0.28);
const soft = mix(c, '#FFFFFF', 0.55);
const tintC = mix(c, '#FFFFFF', 0.88);
document.documentElement.style.setProperty('--primary-deep', deep);
document.documentElement.style.setProperty('--primary-soft', soft);
document.documentElement.style.setProperty('--primary-tint', tintC);
document.documentElement.style.setProperty('--primary-glow',
hexToRgba(c, 0.18));
}, [t.primaryColor]);
React.useEffect(() => {
document.documentElement.style.setProperty('--bg-tint', t.tint);
}, [t.tint]);
React.useEffect(() => {
const strip = document.querySelector('.trust-strip');
if (strip) strip.style.display = t.showTrustStrip ? '' : 'none';
}, [t.showTrustStrip]);
return (
setTweak('heroVariant', v)}
/>
setTweak('primaryColor', v)}
/>
setTweak('tint', v)}
/>
setTweak('showTrustStrip', v)}
/>
);
}
/* ---------- Color helpers ---------- */
function hexToRgb(hex) {
const h = hex.replace('#', '');
const n = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
return {
r: parseInt(n.slice(0, 2), 16),
g: parseInt(n.slice(2, 4), 16),
b: parseInt(n.slice(4, 6), 16),
};
}
function rgbToHex(r, g, b) {
const h = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
return '#' + h(r) + h(g) + h(b);
}
function shade(hex, pct) {
const { r, g, b } = hexToRgb(hex);
const f = 1 + pct;
return rgbToHex(r * f, g * f, b * f);
}
function mix(a, b, t) {
const A = hexToRgb(a), B = hexToRgb(b);
return rgbToHex(A.r + (B.r - A.r) * t, A.g + (B.g - A.g) * t, A.b + (B.b - A.b) * t);
}
function hexToRgba(hex, a) {
const { r, g, b } = hexToRgb(hex);
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
/* ---------- Mount ---------- */
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();