// ── Color utils ─────────────────────────────────────────────────
function hexToRgb(hex) {
const h = (hex || '').replace('#', '');
const v = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
return {
r: parseInt(v.slice(0, 2), 16) || 0,
g: parseInt(v.slice(2, 4), 16) || 0,
b: parseInt(v.slice(4, 6), 16) || 0,
};
}
function rgba(hex, a) {
const {r, g, b} = hexToRgb(hex);
return `rgba(${r},${g},${b},${a})`;
}
function shade(hex, pct) {
const {r, g, b} = hexToRgb(hex);
const k = pct < 0 ? 0 : 255;
const t = Math.abs(pct);
const ch = (c) => Math.round((k - c) * t + c);
const toHex = (x) => x.toString(16).padStart(2, '0');
return `#${toHex(ch(r))}${toHex(ch(g))}${toHex(ch(b))}`;
}
function contrastText(hex) {
const {r, g, b} = hexToRgb(hex);
// Relative luminance per WCAG
const lum = 0.2126 * (r/255) + 0.7152 * (g/255) + 0.0722 * (b/255);
return lum > 0.55 ? '#111111' : '#FFFFFF';
}
window.hexToRgb = hexToRgb;
window.rgba = rgba;
window.shade = shade;
window.contrastText = contrastText;
// ── QRCode ──────────────────────────────────────────────────────
function QRCode({ value, size = 200, fg = '#000', bg = '#FFF' }) {
const ref = React.useRef(null);
React.useEffect(() => {
if (!ref.current) return;
try {
const qr = qrcode(0, 'M');
qr.addData(value || 'https://flip.com');
qr.make();
// Build SVG manually so we can control colors
const cells = qr.getModuleCount();
const cellSize = size / cells;
let path = '';
for (let r = 0; r < cells; r++) {
for (let c = 0; c < cells; c++) {
if (qr.isDark(r, c)) {
path += `M${c * cellSize},${r * cellSize}h${cellSize}v${cellSize}h-${cellSize}z`;
}
}
}
ref.current.innerHTML =
``;
} catch (e) {
ref.current.innerHTML = '';
}
}, [value, size, fg, bg]);
return ;
}
window.QRCode = QRCode;
// ── ClientMark — logo if uploaded, else initials in a tile ──────
function ClientMark({ logoUrl, name, color = '#FFFFFF', size = 80, shape = 'tile' }) {
const inner = logoUrl
?
:
{(name || '?').slice(0, 2).toUpperCase()}
;
return (
{inner}
);
}
window.ClientMark = ClientMark;
// ── FlipWordmark — official Flip logo (swirl + flip) ────────────
function FlipWordmark({ height = 22, color = '#2151F5' }) {
const aspect = 2190 / 919;
return (
);
}
window.FlipWordmark = FlipWordmark;
// ── FlipSwirl — JUST the f-swirl mark (no wordmark). Use as the
// app-icon glyph inside a card / button / lockup.
//
// Paths are the canonical Flip swirl, lifted from the wordmark in
// assets/logo/flip-wordmark.svg (the two left-most strokes on a
// 500×800 viewBox). The swirl is taller than wide (aspect ~0.625);
// `size` is the WIDTH and the height is computed.
function FlipSwirl({ size = 100, color = '#2151F5' }) {
return (
);
}
window.FlipSwirl = FlipSwirl;
// ── PhoneMock — generic phone frame with optional screenshot ────
// `tilt` rotates the device for editorial layouts; `screenImg` is a
// data URL or path to the screen content. If absent, renders a faux
// brand-tinted screen with a small Flip swirl glow.
function PhoneMock({ width, height, tilt = 0, screenImg, accent = '#2151F5' }) {
const r = Math.min(width, height) * 0.10; // device corner radius
const sr = r * 0.85; // screen corner radius
const bezel = Math.min(width, height) * 0.025;
const sw = width - bezel * 2;
const sh = height - bezel * 2;
const id = React.useMemo(() => Math.random().toString(36).slice(2, 9), []);
const glowA = rgba(accent, 0.55);
const glowB = rgba(shade(accent, 0.4), 0.65);
return (
{/* drop shadow underneath */}
{/* device body */}
{/* screen */}
{screenImg ? (
) : (
{/* feathered diamond glow as a subtle backdrop */}
{/* faux app shell */}
) : (