/* Adapted for in-browser Babel mock: IIFE + window export
(source: repetir_next/src/components/Style.jsx). */
(function () {
// ======================================================================
// STYLE — Stylé, the premium Repetir mascot, unlocked by tiers.
// A prestige writing tool with FOUR finishes that climb in luxury:
// bronze → hex wooden pencil, bronze trim + star
// argent → silver mechanical pencil (clip, knurled grip, crown)
// or → thick gold-trimmed pencil, full crown, gold-dipped tip
// cristal → holographic crystal-gem stylus (ultimate)
// All four share the same neutral face + arms + pose system.
// ======================================================================
// Usage:
// Tiers: bronze | argent | or | cristal
// Poses: hello | write | cheer | sleep | thumbs | sad | levelup | wave
// ======================================================================
const NAVY = ["#3a3d6e", "#23244a", "#14152e"];
const TIERS = {
bronze: { met: ["#f3cd9e", "#cf8a45", "#8f561d"], mid: "#cf8a45", deep: "#8f561d", glow: "#d99a5a", glowOp: 0.26, spark: "#f3cd9e", sparks: 1, arm: [78, 122] },
argent: { met: ["#f4f7fb", "#c2ccd9", "#8b97a8"], mid: "#aab4c2", deep: "#8b97a8", glow: "#cfd8e6", glowOp: 0.36, spark: "#eef3f9", sparks: 2, arm: [84, 116] },
or: { met: ["#fff0b8", "#ffce5a", "#d99812"], mid: "#ffce5a", deep: "#b9810c", glow: "#ffd56b", glowOp: 0.5, spark: "#ffe9a8", sparks: 3, arm: [76, 124] },
cristal: { met: ["#d6f4ff", "#7fd0ff", "#4b8fe0"], mid: "#bfe8ff", deep: "#4b8fe0", glow: "#b97fe8", glowOp: 0.5, spark: "#ffffff", sparks: 3, arm: [82, 118] },
};
const STP = { white: "#fff", eye: "#2d2d2d", arm: "#2a2c52" };
const STCONFIGS = {
hello: { tilt: -8, bounceDur: "2.4s", eye: "open", mouth: "smile", leftArm: "wave", rightArm: "down", extras: null },
write: { tilt: 18, bounceDur: "1.6s", eye: "focused", mouth: "concentrate", leftArm: "down", rightArm: "holding", extras: "line" },
cheer: { tilt: 0, bounceDur: "0.6s", eye: "happy", mouth: "openBig", leftArm: "up", rightArm: "up", extras: "confetti" },
sleep: { tilt: 12, bounceDur: "4s", eye: "closed", mouth: "zzz", leftArm: "down", rightArm: "down", extras: "zzz" },
thumbs: { tilt: -4, bounceDur: "2s", eye: "wink", mouth: "smirk", leftArm: "down", rightArm: "thumbs", extras: null },
sad: { tilt: 6, bounceDur: "3s", eye: "sad", mouth: "frown", leftArm: "down", rightArm: "down", extras: "tear" },
levelup: { tilt: 0, bounceDur: "0.9s", eye: "star", mouth: "openBig", leftArm: "up", rightArm: "up", extras: "stars" },
wave: { tilt: -12, bounceDur: "1.6s", eye: "open", mouth: "smile", leftArm: "waveBig", rightArm: "down", extras: null },
};
function StyleEye({ cx, cy, variant, T }) {
if (variant === "closed" || variant === "zzz" || (variant === "wink" && cx > 100))
return ;
if (variant === "happy")
return ;
if (variant === "star")
return ;
if (variant === "sad")
return ;
if (variant === "focused")
return ;
return ;
}
function StyleBrow({ cx, variant, T }) {
const inner = cx < 100 ? 1 : -1;
let y = 126, rot = 0;
if (variant === "happy" || variant === "star") y = 121;
if (variant === "focused") { y = 129; rot = inner * 13; }
if (variant === "sad") { y = 123; rot = -inner * 15; }
return ;
}
function StyleMouth({ variant, T }) {
const cx = 100, cy = 154, col = T.mid;
if (variant === "smile") return ;
if (variant === "smirk") return ;
if (variant === "concentrate") return ;
if (variant === "openBig") return ;
if (variant === "frown") return ;
if (variant === "zzz") return ;
return null;
}
function StyleArm({ side, variant, arm }) {
const x0 = side === "left" ? arm[0] : arm[1];
const sign = side === "left" ? -1 : 1;
const paths = {
down: { d: `M ${x0} 150 Q ${x0 + sign * 8} 164, ${x0 + sign * 12} 182`, hand: [x0 + sign * 12, 182] },
up: { d: `M ${x0} 150 Q ${x0 + sign * 18} 128, ${x0 + sign * 26} 110`, hand: [x0 + sign * 26, 110] },
wave: { d: `M ${x0} 150 Q ${x0 + sign * 18} 132, ${x0 + sign * 27} 120`, hand: [x0 + sign * 27, 120] },
waveBig: { d: `M ${x0} 150 Q ${x0 + sign * 24} 120, ${x0 + sign * 34} 104`, hand: [x0 + sign * 34, 104] },
thumbs: { d: `M ${x0} 150 Q ${x0 + sign * 14} 142, ${x0 + sign * 21} 132`, hand: [x0 + sign * 21, 132], thumb: true },
holding: { d: `M ${x0} 150 Q ${x0 + sign * 16} 162, ${x0 + sign * 28} 176`, hand: [x0 + sign * 28, 176] },
};
const p = paths[variant] ?? paths.down;
return (
{p.thumb && }
);
}
function StyleExtras({ kind, T }) {
if (kind === "line") {
return (
);
}
if (kind === "confetti") {
return (
);
}
if (kind === "zzz") {
return (
z
z
Z
);
}
if (kind === "tear") return ;
if (kind === "stars") {
return (
);
}
return null;
}
function StyleBody({ tier, navy, met, gem }) {
if (tier === "bronze") {
return (
);
}
if (tier === "argent") {
return (
);
}
if (tier === "cristal") {
return (
);
}
// or
return (
);
}
/**
* @param {object} props
* @param {"bronze"|"argent"|"or"|"cristal"} [props.tier]
* @param {"hello"|"write"|"cheer"|"sleep"|"thumbs"|"sad"|"levelup"|"wave"} [props.pose]
* @param {number} [props.size]
* @param {React.CSSProperties} [props.style]
* @param {string} [props.speaking]
*/
function Style({ tier = "or", pose = "hello", size = 200, style, speaking }) {
const s = size;
const T = TIERS[tier] ?? TIERS.or;
const c = STCONFIGS[pose] ?? STCONFIGS.hello;
const animId = `style-${tier}-${pose}`;
const sparkPts = [
"M44 78 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 l6 -2 z",
"M164 104 l1.6 5 l5 1.6 l-5 1.6 l-1.6 5 l-1.6 -5 l-5 -1.6 l5 -1.6 z",
"M156 196 l1.4 4 l4 1.4 l-4 1.4 l-1.4 4 l-1.4 -4 l-4 -1.4 l4 -1.4 z",
].slice(0, T.sparks);
return (
);
}
window.Style = Style;
})();