// Controls.jsx — right-hand panel of inputs
const { useState } = React;
function Section({ title, children, defaultOpen = true }) {
const [open, setOpen] = useState(defaultOpen);
return (
{open &&
{children}
}
);
}
function Field({ label, children, hint }) {
return (
{label &&
{label}
}
{children}
{hint &&
{hint}
}
{options.map((opt) => {
const k = getKey(opt);
const active = k === value;
return (
);
})}
);
}
function Slider({ value, min, max, step = 1, onChange, suffix }) {
return (
);
}
function ColorRow({ label, value, onChange }) {
return (
{label}
onChange(e.target.value)}
style={{ ...inputStyle, width: 90, fontSize: 11, padding: "4px 6px", fontFamily: '"JetBrains Mono", monospace' }}
/>
onChange(e.target.value)}
style={{ width: 28, height: 28, padding: 0, border: "1px solid #d8d8d6", borderRadius: 4, background: "white", cursor: "pointer" }}
/>
);
}
// Read an image file → downscaled JPEG dataURL (keeps autosave under the
// localStorage quota while staying sharp enough for the Player art block).
function readPhotoAsDataURL(file, maxDim) {
return new Promise((resolve, reject) => {
const fr = new FileReader();
fr.onerror = reject;
fr.onload = () => {
const img = new Image();
img.onerror = reject;
img.onload = () => {
const scale = Math.min(1, maxDim / Math.max(img.width, img.height));
const canvas = document.createElement("canvas");
canvas.width = Math.round(img.width * scale);
canvas.height = Math.round(img.height * scale);
canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
resolve(canvas.toDataURL("image/jpeg", 0.88));
};
img.src = fr.result;
};
fr.readAsDataURL(file);
});
}
// Derive a 5-color palette from a single base color (hex)
function derivePalette(baseHex) {
// Convert hex -> hsl, then create variants
const hex = baseHex.replace("#", "");
const r = parseInt(hex.slice(0, 2), 16) / 255;
const g = parseInt(hex.slice(2, 4), 16) / 255;
const b = parseInt(hex.slice(4, 6), 16) / 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h = 0, s = 0;
const l = (max + min) / 2;
if (max !== min) {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)); break;
case g: h = ((b - r) / d + 2); break;
case b: h = ((r - g) / d + 4); break;
}
h /= 6;
}
function hsl(hh, ss, ll) {
return `hsl(${(hh * 360).toFixed(0)} ${(ss * 100).toFixed(0)}% ${(ll * 100).toFixed(0)}%)`;
}
return {
label: "Custom",
bg: hsl(h, Math.min(s * 0.3, 0.15), Math.min(0.96, l + 0.45)),
ink: hsl(h, Math.min(s * 0.6, 0.5), Math.max(0.12, l - 0.5)),
accent: baseHex,
muted: hsl(h, Math.min(s * 0.4, 0.2), Math.min(0.78, l + 0.25)),
highlight: hsl((h + 0.55) % 1, Math.min(s * 0.5, 0.4), Math.max(0.5, l)),
};
}
function Controls({ state, set, applyPreset }) {
const isCustomSize = state.sizeKey === "Custom";
return (
{/* Header */}
Lyrics Poster Studio
Compose your poster
{/* Size */}
{/* Layout */}
{/* Text */}