import { SIGN_PAPERS, type SavedSign } from "@album/contracts";
import { brandPalette } from "@album/contracts";
export { SIGN_PAPERS };
export type SignPaper = keyof typeof SIGN_PAPERS | "custom";
export type SignDesign = SavedSign & {
fontData?: string; interFontData?: string; geologicaFontData?: string;
};
export type SignQr = { path: string; size: number };
export function guestQrSvg(qr: SignQr) {
const size = qr.size + 8;
return ``;
}
export function signPaper(design: Pick) {
if (design.paper !== "custom") return SIGN_PAPERS[design.paper];
const unit = design.unit === "mm" ? "mm" : "in";
const width = design.customWidth ?? 8.5, height = design.customHeight ?? 11;
const inches = unit === "mm" ? 25.4 : 1;
if (![width, height].every(n => Number.isFinite(n) && n / inches >= 3 && n / inches <= 48)) throw new Error("Choose dimensions between 3 and 48 inches (76.2–1219.2 mm).");
if (Math.max(width / height, height / width) > 2.5) throw new Error("Keep the long edge within 2.5 times the short edge so the sign stays readable.");
return { label: "Custom", width: `${width}${unit}`, height: `${height}${unit}`, viewHeight: 850 * height / width };
}
export function escapeXml(value: string) {
return value.replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[c]!);
}
export function signPrintMetrics(design: SignDesign) {
const paper = signPaper(design);
const landscape = paper.viewHeight < 850;
const scale = Math.min(850 / (landscape ? 1200 : 850), paper.viewHeight / (landscape ? 800 : 1100));
const widthInches = parseFloat(paper.width) / (paper.width.endsWith("mm") ? 25.4 : 1);
const qrUnits = design.layout === "compact" ? 320 : design.layout === "photo" ? 240 : design.layout === "typography" ? 340 : 370;
return { qrInches: widthInches / 850 * scale * qrUnits };
}
// Hard-wrap even unbroken names/URLs; no user input becomes SVG markup.
export function signLines(value: string, limit: number) {
const words = value.trim().split(/\s+/).flatMap(word => word.match(new RegExp(`.{1,${limit}}`, "gu")) ?? []);
const lines: string[] = [];
for (const word of words) {
const last = lines.length - 1;
if (last >= 0 && `${lines[last]} ${word}`.length <= limit) lines[last] += ` ${word}`;
else lines.push(word);
}
return lines;
}
export function guestSignSvg(design: SignDesign, guestUrl: string, qr: SignQr) {
const paper = signPaper(design);
const color = (value: string | undefined, fallback: string) => /^#[\da-f]{6}$/i.test(value ?? "") ? value! : fallback;
const ink = color(design.accent, design.ink === "black" ? brandPalette.ink : brandPalette.primary);
const luminance = (hex: string) => {
const channels = [1, 3, 5].map(index => parseInt(hex.slice(index, index + 2), 16) / 255).map(c => c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4);
return channels[0]! * .2126 + channels[1]! * .7152 + channels[2]! * .0722;
};
const background = color(design.background, brandPalette.background);
const raster = (value?: string) => /^data:image\/(png|jpeg|webp);base64,[A-Za-z0-9+/=]+$/.test(value ?? "") ? value : undefined;
const photo = raster(design.backgroundImage), logo = raster(design.logoImage);
const surfaceLuminance = luminance(background);
const bodyInk = photo || surfaceLuminance < .18 ? "#ffffff" : brandPalette.ink;
const accentContrast = (Math.max(luminance(ink), surfaceLuminance) + .05) / (Math.min(luminance(ink), surfaceLuminance) + .05);
const headingInk = !photo && accentContrast >= 4.5 ? ink : bodyInk;
const landscape = paper.viewHeight < 850;
const w = landscape ? 1200 : 850, h = landscape ? 800 : 1100;
const scale = Math.min(850 / w, paper.viewHeight / h);
const cx = landscape ? 328 : 425;
const text = (value: string, y: number, size: number, limit: number, weight = 400, x = cx) => signLines(value, limit).map((line, i) =>
`${escapeXml(line)}`).join("");
const headingFont = design.font === "geologica" ? "SignGeologica, sans-serif" : design.font === "inter" ? "SignInter, sans-serif" : "SignFunnel, sans-serif";
const fontFaces = [["SignFunnel", design.fontData], ["SignInter", design.interFontData], ["SignGeologica", design.geologicaFontData]]
.filter(([, data]) => /^data:font\/woff2;base64,[A-Za-z0-9+/=]+$/.test(data ?? ""))
.map(([family, data]) => `@font-face{font-family:${family};src:url('${data}') format('woff2');font-weight:100 900;font-style:normal}`).join("");
const qx = landscape ? 710 : 240, qy = landscape ? 235 : 420;
// Keep text inside its own region; changing type never moves or shrinks the QR.
const sizedText = (value: string, x: number, y: number, base: number, percent: number, width: number, height: number, weight = 400, centered = false) => {
let size = base * Math.min(150, Math.max(75, Number.isFinite(percent) ? percent : 100)) / 100;
let wrapped = signLines(value, Math.max(1, Math.floor(width / (size * .65))));
while (wrapped.length * size * 1.25 > height && size > 8) {
size -= .5;
wrapped = signLines(value, Math.max(1, Math.floor(width / (size * .65))));
}
return wrapped.map((line, index) => `${escapeXml(line)}`).join("");
};
if (design.layout) {
const compact = design.layout === "compact";
const photoLed = design.layout === "photo";
const foreground = surfaceLuminance < .18 ? "#ffffff" : brandPalette.ink;
const headingColor = accentContrast >= 4.5 ? ink : foreground;
const left = landscape && photoLed ? 650 : 70;
const top = photoLed ? (landscape ? 80 : 600) : 85;
const column = photoLed ? (landscape ? 480 : 410) : (landscape ? 600 : 710);
const fontSize = compact ? 58 : photoLed ? 46 : (landscape ? 80 : 88);
const headlineLines = signLines(design.headline, compact ? 20 : photoLed ? 18 : 16);
const headlineSize = Math.min(fontSize, (photoLed ? 170 : 350) / (headlineLines.length * 1.1));
const lines = (value: string, x: number, y: number, size: number, limit: number, weight = 400) =>
signLines(value, limit).map((line, index) => `${escapeXml(line)}`).join("");
const qrSize = compact ? 320 : photoLed ? 240 : 340;
const qrX = landscape ? (photoLed ? 870 : 790) : (photoLed ? 540 : 440);
const qrY = compact ? (landscape ? 260 : 530) : landscape ? (photoLed ? 415 : 235) : (photoLed ? 755 : 605);
const messageY = top + (compact ? 310 : photoLed ? 250 : 445);
const brandMarkup = logo ? `` : design.showBrand !== false ? `Manyangles` : "";
if (!photoLed) {
const textX = landscape ? 100 : 85;
const textWidth = landscape ? 530 : 680;
const codeX = landscape ? 760 : (w - qrSize) / 2;
const codeY = landscape ? 210 : 475;
const footerY = landscape ? 655 : 955;
return ``;
}
return ``;
}
return ``;
}
export function signPrintHtml(svg: string, paper: SignPaper | SignDesign) {
const size = signPaper(typeof paper === "string" ? { paper } : paper);
return `Manyangles guest sign${svg}`;
}