// App principal + Tweaks
const DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "editorial",
"primaryHue": 210,
"showAnnouncement": true,
"forceSpecial": "auto",
"specialPosition": "above"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(DEFAULTS);
useReveal();
return (
);
}
function AppShell({ t, setTweak }) {
const auth = useAuth();
const [apiSpecial, setApiSpecial] = useState(null);
const [configLoaded, setConfigLoaded] = useState(false);
const [siteConfig, setSiteConfig] = useState(() => window.SITE_CONFIG || {
visible_categories: ['Brincos', 'Colares', 'Pulseiras', 'Chokers'],
affiliates_enabled: true,
testimonials: null,
});
useEffect(() => {
// Importante: TODOS os setState têm que rodar no mesmo microtask
// pra React 18 batchar e gerar um único render. setConfigLoaded em
// .finally vira microtask separado → 2 renders → flash do padrão.
fetch('/api/config')
.then(r => r.ok ? r.json() : null)
.then(data => {
if (data?.banner_configs) window.CAPAS_CONFIG = data.banner_configs;
if (data?.active_special) setApiSpecial(data.active_special);
if (data) {
const cfg = {
visible_categories: Array.isArray(data.visible_categories) && data.visible_categories.length
? data.visible_categories
: ['Brincos', 'Colares', 'Pulseiras', 'Chokers'],
affiliates_enabled: data.affiliates_enabled !== false,
testimonials: Array.isArray(data.testimonials) ? data.testimonials : null,
hero: data.hero || null,
promo: data.promo || null,
};
window.SITE_CONFIG = cfg;
setSiteConfig(cfg);
window.dispatchEvent(new CustomEvent('site-config-loaded', { detail: cfg }));
}
setConfigLoaded(true);
})
.catch(() => setConfigLoaded(true));
}, []);
// Resolve tema ativo: forceSpecial (dev) > apiSpecial (DB) > 'padrao' (default).
// Importante: só renderiza banner depois que config carregou — evita flash do
// tema padrão piscando antes do tema correto entrar em cena.
const special = !configLoaded && t.forceSpecial === 'auto'
? null
: (t.forceSpecial === 'auto'
? (apiSpecial || 'padrao')
: (t.forceSpecial === 'none' ? null : t.forceSpecial));
const capaTheme = special ? window.CAPAS?.[special] : null;
const SpecialBanner = capaTheme?.Banner || null;
const specialAccent = capaTheme?.accent;
const specialGridLabel = capaTheme?.gridLabel;
const specialGridTitle = capaTheme?.gridTitle;
return (
);
}
function ResponsiveCSS() {
// injetar CSS responsivo via style — funciona melhor que media queries inline
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();
// ---- Theme toggle FAB ----
function ThemeToggleFab() {
const [theme, setTheme] = useState(() => {
try { return localStorage.getItem('lua_theme') || 'light'; } catch(e) { return 'light'; }
});
useEffect(() => {
document.documentElement.dataset.theme = theme;
try { localStorage.setItem('lua_theme', theme); } catch(e){}
}, [theme]);
return (
);
}