// editor.jsx — edit view: the copy, the hanging card, and the settings tray
const EP_ICONS = {
linkedin: ,
instagram: ,
download: ,
video: ,
copy: ,
check: ,
};
// ---- Colour picker -------------------------------------------------------------------------
// iPhones and computers open a good colour picker of their own. Android's is a grid of eight
// fixed colours, so on Android the app shows its own: a colour square, a hue bar and a hex box.
const USE_OWN_PICKER = /Android/i.test(navigator.userAgent) || /[?&]picker=1/.test(location.search);
function hexToHsv(hex) {
const m = /^#?([0-9a-f]{6})$/i.exec(hex || '') ; const n = m ? parseInt(m[1], 16) : 0xff3d81;
const r = (n >> 16) / 255, g = ((n >> 8) & 255) / 255, b = (n & 255) / 255;
const max = Math.max(r, g, b), d = max - Math.min(r, g, b);
let h = 0;
if (d) { h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4; h = (h * 60 + 360) % 360; }
return { h, s: max ? d / max : 0, v: max };
}
function hsvToHex({ h, s, v }) {
const f = (n) => { const k = (n + h / 60) % 6; return v - v * s * Math.max(0, Math.min(k, 4 - k, 1)); };
return '#' + [f(5), f(3), f(1)].map(x => Math.round(x * 255).toString(16).padStart(2, '0')).join('');
}
function ColorSheet({ title, value, onChange, onClose }) {
const [hsv, setHsv] = React.useState(() => hexToHsv(value));
const [text, setText] = React.useState(value);
const apply = (next) => { setHsv(next); const hex = hsvToHex(next); setText(hex); onChange(hex); };
// drag inside a box: reports where the finger is, as 0..1 across and down
const drag = (fn) => (e) => {
const el = e.currentTarget, move = (ev) => {
const r = el.getBoundingClientRect();
fn(Math.max(0, Math.min(1, (ev.clientX - r.left) / r.width)), Math.max(0, Math.min(1, (ev.clientY - r.top) / r.height)));
};
el.setPointerCapture(e.pointerId); move(e);
const up = () => { el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', up); el.removeEventListener('pointercancel', up); };
el.addEventListener('pointermove', move); el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up);
};
const hex = hsvToHex(hsv);
return ReactDOM.createPortal(
e.stopPropagation()}>
Colours
apply({ ...hsv, s: x, v: 1 - y }))}>
apply({ ...hsv, h: x * 359.9 }))}>
{ const t = e.target.value.trim(); setText(t); const m = /^#?([0-9a-f]{6})$/i.exec(t); if (m) { const h = '#' + m[1].toLowerCase(); setHsv(hexToHsv(h)); onChange(h); } }}/>
, document.body);
}
// The "+" swatch's control: the phone or computer's own picker, or ours on Android.
function PickInput({ label, value, onStart, onChange }) {
const [open, setOpen] = React.useState(false);
if (!USE_OWN_PICKER) return onChange(e.target.value)}/>;
return (<>