/* ============================================================
bloomind.dev — Tweaks app (panel-only React mount)
No reescribe la página: aplica cambios vía atributos data-*
en y variables CSS en :root. Recolorea la marca viva.
============================================================ */
const { useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"surface": "white",
"accent": "#4b34c4",
"speed": 1,
"intensity": "Media",
"mesh": true,
"corners": "round",
"mono": false
}/*EDITMODE-END*/;
/* etiqueta visible -> valor del atributo data-surface */
const SURFACE_MAP = { "Blanco": "white", "Papel": "paper", "Niebla": "fog", "Carbón": "charcoal" };
const SURFACE_LABEL = { white: "Blanco", paper: "Papel", fog: "Niebla", charcoal: "Carbón" };
/* acento -> tinta fuerte + fondo tenue derivados */
const ACCENTS = {
"#4b34c4": { ink: "#4b34c4", soft: "#ece7fb" }, // Violeta bloom (marca)
"#4f46e5": { ink: "#3a32c9", soft: "#ececfd" }, // Índigo eléctrico
"#0ea5b7": { ink: "#0b7e8c", soft: "#e1f6f8" }, // Cian técnico
"#e08316": { ink: "#b5650a", soft: "#fbeede" } // Ámbar cálido
};
const INTENSITY = { "Sutil": 0.7, "Media": 1.0, "Viva": 1.3 };
function cssVar(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
}
function applyTweaks(t) {
const root = document.documentElement;
const surface = SURFACE_MAP[t.surface] || "white";
root.setAttribute("data-surface", surface);
root.setAttribute("data-corners", t.corners === "Recto" ? "sharp" : "round");
/* acento + marca viva */
if (t.mono) {
const ink = cssVar("--ink") || "#0a0a0a";
root.style.setProperty("--mark-color", ink);
root.style.setProperty("--violet-ink", ink);
root.style.setProperty("--violet-soft", cssVar("--paper-2") || "#f1efe9");
} else {
const accent = ACCENTS[t.accent] ? t.accent : "#4b34c4";
const a = ACCENTS[accent];
root.style.setProperty("--mark-color", accent);
root.style.setProperty("--violet-ink", a.ink);
root.style.setProperty("--violet-soft", a.soft);
}
/* motion de la marca viva */
window.__motionSpeed = t.speed;
window.__bloomIntensity = INTENSITY[t.intensity] != null ? INTENSITY[t.intensity] : 1;
window.__meshOff = !t.mesh;
/* logo: versión blanca sobre fondo oscuro */
const dark = surface === "charcoal";
document.querySelectorAll(".brand img, .footer-brand img").forEach(function (img) {
img.src = dark
? "assets/bloomind-horizontal-dark.svg"
: "assets/bloomind-horizontal-light.svg";
});
/* meta theme-color */
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute("content", cssVar("--paper") || "#ffffff");
/* recolorea + redibuja la marca viva */
if (window.__bloom && window.__bloom.refresh) window.__bloom.refresh();
}
function TweaksApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useEffect(function () { applyTweaks(t); }, [t]);
return (
setTweak("surface", v)}
/>
setTweak({ accent: v, mono: false })}
/>
setTweak("mono", v)}
/>
setTweak("speed", v)}
/>
setTweak("intensity", v)}
/>
setTweak("mesh", v)}
/>
setTweak("corners", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();