// Poster.jsx — renders a poster at exact mm dimensions, with layouts/patterns.
// Smart contrast: hero text recolors per-region where it overlaps a same-colored
// pattern shape, swapping to the OTHER pattern color (not changing the pattern itself).
const { useMemo } = React;
// --- Color helpers ----------------------------------------------------------
const _ctx = (() => {
if (typeof document === "undefined") return null;
const c = document.createElement("canvas");
c.width = c.height = 1;
return c.getContext("2d");
})();
function parseColor(c) {
if (!_ctx) return { r: 0, g: 0, b: 0 };
_ctx.clearRect(0, 0, 1, 1);
_ctx.fillStyle = "#000";
_ctx.fillStyle = c;
_ctx.fillRect(0, 0, 1, 1);
const d = _ctx.getImageData(0, 0, 1, 1).data;
return { r: d[0], g: d[1], b: d[2] };
}
function colorDistance(a, b) {
const ca = parseColor(a), cb = parseColor(b);
return Math.sqrt((ca.r - cb.r) ** 2 + (ca.g - cb.g) ** 2 + (ca.b - cb.b) ** 2);
}
function colorsMatch(a, b) {
return colorDistance(a, b) < 32;
}
// --- Pattern shape generators ------------------------------------------------
// Each returns { shapes: [{type, color, attrs}], cssNode? } in mm-space coords.
function arcShapes({ scale, density, palette, w, h, originX }) {
const s = Math.max(2, scale);
const d = Math.max(0, Math.min(100, density));
const ox = typeof originX === "number" ? originX : 50;
const cx = w * (ox / 100);
const cy = h * 1.05;
// Reach always covers the whole poster — density controls ring count.
const maxR = Math.hypot(w, h) * 1.3;
// Spacing between rings: low density = wide spacing (sparse), high density = tight spacing.
// At d=0 spacing = scale * 3, at d=100 spacing = scale * 0.5.
const ringSpacing = Math.max(2, s * (3 - (d / 100) * 2.5));
const ringCount = Math.max(2, Math.round(maxR / ringSpacing));
const colorA = palette.muted;
const colorB = palette.highlight || palette.muted;
const shapes = [];
for (let i = ringCount; i >= 1; i--) {
const r = (i / ringCount) * maxR;
const color = i % 2 === 0 ? colorA : colorB;
shapes.push({ type: "circle", color, attrs: { cx, cy, r } });
}
return { shapes, colors: [colorA, colorB] };
}
function rayShapes({ scale, density, palette, w, h, originX }) {
const s = Math.max(2, scale);
const d = Math.max(0, Math.min(100, density));
const ox = typeof originX === "number" ? originX : 50;
const cx = w * (ox / 100);
const cy = h;
// Density now controls wedge count (more density = more, narrower wedges).
// Scale still nudges the base wedge width.
const baseWedge = Math.max(4, Math.min(40, 90 - s * 0.6));
// Map density 0..100 → wedge angle multiplier from 2.5x (sparse) down to 0.5x (dense).
const wedgeAngle = baseWedge * (2.5 - (d / 100) * 2);
const count = Math.max(4, Math.round(180 / wedgeAngle));
// Reach always covers the whole poster.
const R = Math.hypot(w, h) * 1.4;
const colorA = palette.muted;
const colorB = palette.highlight || palette.muted;
const shapes = [];
for (let i = 0; i < count; i++) {
const a0 = (Math.PI * i) / count - Math.PI;
const a1 = (Math.PI * (i + 1)) / count - Math.PI;
const x0 = cx + R * Math.cos(a0);
const y0 = cy + R * Math.sin(a0);
const x1 = cx + R * Math.cos(a1);
const y1 = cy + R * Math.sin(a1);
const color = i % 2 === 0 ? colorA : colorB;
shapes.push({ type: "path", color, attrs: { d: `M ${cx} ${cy} L ${x0} ${y0} L ${x1} ${y1} Z` } });
}
return { shapes, colors: [colorA, colorB] };
}
// Horizontal bands — shape-based (smart contrast compatible), alternating muted/highlight
function bandShapes({ scale, density, palette, w, h }) {
const s = Math.max(2, scale);
const d = Math.max(0, Math.min(100, density));
// Low density = tall sparse bands, high density = tight bands (same logic as arcs)
const bandH = Math.max(2, s * (3 - (d / 100) * 2.5));
const count = Math.max(2, Math.ceil(h / bandH));
const colorA = palette.muted;
const colorB = palette.highlight || palette.muted;
const shapes = [];
for (let i = 0; i < count; i++) {
const y0 = i * bandH;
const y1 = Math.min(h, (i + 1) * bandH);
const color = i % 2 === 0 ? colorA : colorB;
shapes.push({ type: "path", color, attrs: { d: `M 0 ${y0} H ${w} V ${y1} H 0 Z` } });
}
return { shapes, colors: [colorA, colorB] };
}
// CSS-based patterns (no shape list — smartContrast won't activate for these)
function cssPatternNode(pattern, { scale, density, palette, w, h, thickness }) {
const s = Math.max(2, scale);
const d = Math.max(0, Math.min(100, density));
const fg = palette.muted;
const opacity = 0.5 + (d / 100) * 0.5;
const common = { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0 };
if (pattern === "stripes") {
const stripe = s / 2;
return
;
}
if (pattern === "dots") {
const dot = Math.max(0.5, (s * (20 + d * 0.6)) / 100);
return (
);
}
if (pattern === "grid") {
return
;
}
if (pattern === "checker") {
return
;
}
if (pattern === "halftone") {
// Dot grid where dot size shrinks from top to bottom
const rows = Math.max(3, Math.round(h / s));
const cols = Math.max(3, Math.round(w / s));
const maxR = (s / 2) * (0.35 + (d / 100) * 0.6);
const dots = [];
for (let r = 0; r < rows; r++) {
const frac = rows > 1 ? r / (rows - 1) : 0;
const radius = Math.max(0.2, maxR * (1 - frac * 0.85));
for (let c = 0; c <= cols; c++) {
const x = c * s + (r % 2 === 0 ? 0 : s / 2);
dots.push(
{dots}
);
}
if (pattern === "scales") {
// Overlapping fish-scale arcs
const sw = Math.max(0.2, 0.3 + (d / 100) * 1.4);
return (
);
}
if (pattern === "triangles") {
return (
);
}
if (pattern === "crosses") {
const t = 1.2 + (d / 100) * 1.6; // arm thickness in 0..10 tile space
const a = 5 - t / 2;
const b = 5 + t / 2;
const inset = 1.5;
return (
);
}
if (pattern === "aura") {
// Soft atmospheric two-glow gradient. Scale moves the glows, density sets strength.
const a = Math.round(0x28 + (d / 100) * 0x50).toString(16).padStart(2, "0"); // 28..78 alpha
const b = Math.round(0x18 + (d / 100) * 0x40).toString(16).padStart(2, "0");
const ox = 50 + Math.min(40, s - 30); // scale slider nudges glow position
return (
);
}
if (pattern === "wave") {
const amp = s * 0.6;
const period = s * 2;
const sw = typeof thickness === "number" ? thickness : 0.5;
const lines = Math.max(3, Math.round(h / s));
const paths = [];
for (let i = 0; i < lines; i++) {
const y = (i / lines) * h + s / 2;
let dStr = `M 0 ${y}`;
for (let x = 0; x <= w; x += period) dStr += ` q ${period / 2} ${-amp} ${period} 0`;
paths.push(
{paths}
);
}
return null;
}
// Build pattern data: { node, shapes, colors } — shapes only for shape-based patterns.
function buildPattern({ pattern, scale, density, palette, w, h, originX, thickness }) {
if (pattern === "none") return { node: null, shapes: null, colors: null };
if (pattern === "arcs") {
const { shapes, colors } = arcShapes({ scale, density, palette, w, h, originX });
const node = (
{shapes.map((sh, i) =>
);
return { node, shapes, colors };
}
if (pattern === "rays") {
const { shapes, colors } = rayShapes({ scale, density, palette, w, h, originX });
const node = (
{shapes.map((sh, i) =>
);
return { node, shapes, colors };
}
if (pattern === "bands") {
const { shapes, colors } = bandShapes({ scale, density, palette, w, h });
const node = (
{shapes.map((sh, i) =>
);
return { node, shapes, colors };
}
return { node: cssPatternNode(pattern, { scale, density, palette, w, h, thickness }), shapes: null, colors: null };
}
// --- Smart hero text wrapper -------------------------------------------------
// Strategy: render the hero TWICE as overlapping absolutely-positioned divs.
// - Base layer (heroColor): masked so it's HIDDEN where matching shapes are.
// - Top layer (contrastColor): masked so it's only VISIBLE where matching shapes are.
// Masks are inline SVG data URLs applied via CSS `mask-image`. Both layers
// occupy the same coordinate box (the poster), so the hero text stays in
// position and unbroken.
// Builds a luminance mask in SVG. Walks ALL pattern shapes in z-order (back to
// front), painting matching-color shapes as `fg` and non-matching shapes as `bg`.
// This way the mask reflects only the *visible* (top-most) matching regions —
// e.g. a large green arc that's partially covered by a smaller orange arc only
// contributes the visible green ring, not the whole disc.
function buildMaskDataUrl(allShapes, heroColor, vbX, vbY, vbW, vbH, mode) {
// mode: "hide-matching" → matching=black (hide base layer there), bg=white
// "show-matching" → matching=white (show top layer there), bg=black
const baseBg = mode === "hide-matching" ? "white" : "black";
const matchFill = mode === "hide-matching" ? "black" : "white";
const otherFill = baseBg; // overdraws to reveal the base again
const layers = allShapes.map((sh) => {
const isMatch = colorsMatch(sh.color, heroColor);
const fill = isMatch ? matchFill : otherFill;
return sh.type === "circle"
? `
{renderText({ color: heroColor })}
{renderText({ color: contrastColor })}
);
}
// --- Lyric block primitive ---------------------------------------------------
function LyricBlock({ text, color, font, size, lh = 1.2, align = "left", style = {} }) {
const lines = text.split("\n");
const selfMap = { left: "flex-start", center: "center", right: "flex-end" };
return (
{lines.map((l, i) =>
{l || "\u00a0"}
)}
{blocks.slice(0, Math.ceil(blocks.length / 2)).map((b, i) => (
{blocks.slice(Math.ceil(blocks.length / 2)).map((b, i) => (
{renderHero(heroEl)}
);
}
function LayoutBleed({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, renderHero, lyricAlign, flexAlign }) {
const heroEl = (color) => (
);
return (
<>
{blocks.map((b, i) => (
{renderHero(heroEl)}
);
}
function LayoutTower({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, renderHero, lyricAlign, flexAlign }) {
const word = hero;
const fontSize = w * 0.22 * (heroSize / 100);
const repeatCount = Math.max(2, Math.floor((h - padding * 2) / (fontSize * 0.95)));
const heroEl = (color) => (
{Array.from({ length: repeatCount }).map((_, i) => (
{word}
))}
);
return (
<>
{/* Spacer so the right column lines up with the tower */}
{Array.from({ length: repeatCount }).map((_, i) =>
{word}
)}
{blocks.map((b, i) => (
{renderHero(heroEl)}
);
}
function LayoutStamped({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, patternShapes, smartContrast, lyricAlign, flexAlign }) {
const chars = (hero || "").split("");
const n = Math.max(1, chars.length);
// Letters live in a left band (40% of poster width). Lyrics get the right 60%
// with proper padding — no overlap, predictable across any hero length.
const letterBandFrac = 0.4;
const letterBandW = w * letterBandFrac;
const lyricsLeft = letterBandW;
const lyricsW = w - letterBandW - padding;
// One letter per row, stacked vertically. Row height fills the poster.
const cellW = letterBandW;
const cellH = (h - padding * 2) / n;
const tints = [palette.muted, palette.ink, palette.highlight || palette.muted, palette.accent];
let maskCounter = 0;
const renderLetter = (ch, i) => {
const k = heroSize / 100;
const tint = tints[i % tints.length];
const cellX = 0;
const cellY = padding + i * cellH;
// Glyph fits inside cell with margin so it never bleeds into lyrics column
const fs = Math.min(cellH * 1.15, cellW * 1.1) * k;
const baselineY = cellY + cellH * 0.88;
// Anchor letters to the left edge of the band (with a small inset).
// This matches the reference "belter" stack where each letter starts at the same x.
const anchorX = cellX + padding * 0.5;
const textAnchor = "start";
const useMask = smartContrast && patternShapes && patternShapes.some((s) => colorsMatch(s.color, tint));
if (useMask) {
const candidates = [palette.accent, palette.ink, palette.highlight, palette.muted, palette.bg].filter(Boolean);
const contrast = candidates.find((c) => !colorsMatch(c, tint)) || palette.bg;
const maskId = `stamp-mask-${i}-${maskCounter++}`;
return (
{ch}
{ch}
);
}
return (
);
};
return (
<>
{chars.map((ch, i) => renderLetter(ch, i))}
{blocks.map((b, i) => {
const lyricTints = [palette.ink, palette.accent, palette.muted, palette.highlight || palette.ink];
return
);
}
function LayoutStack({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const chars = hero.split("");
const k = heroSize / 100;
return (
{chars.map((ch, i) => (
{ch}
))}
{blocks.map((b, i) =>
);
}
function LayoutRepeat({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign }) {
const wordSize = bodySize * 4.5 * (heroSize / 100);
const rows = Math.ceil(h / (wordSize * 1.05)) + 1;
const repeatedRow = " " + (hero + " ").repeat(20);
return (
<>
{Array.from({ length: rows }).map((_, i) =>
{repeatedRow}
)}
{blocks.map((b, i) => (
);
}
function LayoutSplit({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, smartContrast, lyricAlign, flexAlign }) {
const splitFrac = 0.55; // left bg-colored half spans 0..55% of width
const splitX = w * splitFrac;
// Fit the rotated hero within the poster height so it doesn't crop at the edges
const splitLen = Math.max(1, (hero || "").length);
const heightCap = (h * 0.92) / (splitLen * 0.55);
const heroSizeMm = Math.min(h * 0.42, heightCap) * (heroSize / 100);
// The hero is rendered in palette.bg (cream). Over the bg-colored left half it
// disappears — when smart contrast is on, swap to palette.accent there.
const heroEl = (color) => (
);
const maskId = `split-mask-${Math.random().toString(36).slice(2, 8)}`;
return (
<>
{smartContrast ? (
<>
{/* Base: bg-color (cream) — visible where it sits over the accent-color half */}
{/* Top: accent (dark) — visible only where it sits over the bg-color half */}
) : (
heroEl(palette.bg)
)}
{blocks.map((b, i) =>
);
}
function LayoutTape({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign, tapeCount = 1 }) {
const n = Math.max(1, Math.min(8, tapeCount));
// Tape height scales down as we add more bands so they don't all crash into each other.
const bandHeight = (h * 0.32 * (heroSize / 100)) / (1 + (n - 1) * 0.45);
const fontSize = bandHeight * 0.78;
const tokenWord = hero + " • ";
// Stagger: slice the repeated string so each band starts at a different
// character of the cycle. This is font-independent — no width approximation.
// Hand-picked offsets spread evenly around the token length.
const offsetTable = [0, 0.37, 0.71, 0.18, 0.55, 0.84, 0.28, 0.62];
// Vertical placement: spread bands evenly across the poster height, with margin top/bottom.
const margin = 0.18;
const tapeYs = n === 1
? [0.5]
: Array.from({ length: n }, (_, i) => margin + (i / (n - 1)) * (1 - margin * 2));
// Alternate rotation direction for visual rhythm when there's >1.
const rotForIndex = (i) => (n === 1 ? -6 : (i % 2 === 0 ? -6 : 6));
return (
<>
{tapeYs.map((y, i) => {
const rot = rotForIndex(i);
// Build a per-band repeated string, sliced to start at a different character.
const shift = Math.floor(offsetTable[i % offsetTable.length] * tokenWord.length);
const shifted = tokenWord.slice(shift) + tokenWord.slice(0, shift);
const repeated = shifted.repeat(20);
return (
);
})}
{blocks.slice(0, Math.ceil(blocks.length / 2)).map((b, i) => (
{blocks.slice(Math.ceil(blocks.length / 2)).map((b, i) => (
);
}
const LAYOUT_MAP = {
centered: LayoutCentered,
stamped: LayoutStamped,
stack: LayoutStack,
repeat: LayoutRepeat,
bleed: LayoutBleed,
split: LayoutSplit,
tower: LayoutTower,
tape: LayoutTape,
...(window.EXTRA_LAYOUTS || {}),
};
// Smart-hero capable layouts (have renderHero callback)
const SMART_LAYOUTS = new Set(["centered", "bleed", "tower"]);
function heroColorFor(layout, palette) {
switch (layout) {
case "split": return palette.bg;
case "tape": return palette.bg;
case "stamped": return palette.muted;
default: return palette.accent;
}
}
function Poster({ config, posterRef }) {
const { width, height, palette, heroFont, bodyFont, hero, blocks, layout, pattern, patternScale, patternDensity, patternOriginX, patternThickness, heroSize, bodySize, padding, smartContrast, lyricAlign, tapeCount, photo } = config;
const align = lyricAlign || "left";
const flexAlign = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
// Skip empty lyric blocks so they don't leave stray gaps on the poster
const visibleBlocks = (blocks || []).filter((b) => (b.text || "").trim().length > 0);
const Layout = LAYOUT_MAP[layout] || LayoutCentered;
const patternData = useMemo(
() => buildPattern({ pattern, scale: patternScale, density: patternDensity, palette, w: width, h: height, originX: patternOriginX, thickness: patternThickness }),
[pattern, patternScale, patternDensity, patternOriginX, patternThickness, palette, width, height]
);
const heroColor = heroColorFor(layout, palette);
// Pick the contrast color: the OTHER pattern color (not the one matching hero)
let contrastColor = heroColor;
if (patternData.colors && patternData.colors.length === 2) {
const [a, b] = patternData.colors;
if (colorsMatch(a, heroColor)) contrastColor = b;
else if (colorsMatch(b, heroColor)) contrastColor = a;
else contrastColor = heroColor; // no clash
}
const renderHero = (heroElFn) => {
const isSmart = smartContrast && SMART_LAYOUTS.has(layout) && patternData.shapes;
if (!isSmart) {
return heroElFn(heroColor);
}
return (
heroElFn(color)}
/>
);
};
return (
{patternData.node}
);
}
window.Poster = Poster;