// Layouts2.jsx — second-generation layouts: Marquee, Outline Echo, Spine, Ransom,
// Ticket, Tracklist, Swiss, Contour, Wave Text.
// Loaded BEFORE Poster.jsx; Poster merges window.EXTRA_LAYOUTS into its layout map.
// Local copy of the lyric block primitive (Babel scripts don't share scope)
function LyricBlock2({ 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, half).map((b, i) => (
))}
{blocks.slice(half).map((b, i) => (
))}
);
}
// --- Outline Echo: stacked hero words, one solid, rest outlined --------------
function LayoutEcho({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const count = 5;
const solidIdx = 2;
const fs = Math.min((h * 0.6) / (count * 0.92), (w * 0.86) / (len * 0.52)) * k;
const strokeW = Math.max(0.3, fs * 0.014);
return (
<>
{Array.from({ length: count }).map((_, i) => (
{hero}
))}
{blocks.map((b, i) => (
))}
);
}
// --- Spine: thin full-height vertical hero on the left edge ------------------
function LayoutSpine({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const fs = Math.min(w * 0.14, (h * 0.88) / (len * 0.55)) * k;
const spineW = padding * 0.6 + fs * 1.15;
return (
<>
{blocks.map((b, i) => (
))}
);
}
// --- Ransom: each hero letter on its own tinted chip in a different font -----
function LayoutRansom({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const chars = (hero || "").split("");
const len = Math.max(1, chars.length);
const fonts = ((window.FONTS || []).map((f) => f.css));
const rots = [-5, 3, -2, 6, -4, 2, 5, -3];
// chip background → text color pairs, picked for contrast within the palette
const chipPairs = [
{ bg: palette.accent, fg: palette.bg },
{ bg: palette.ink, fg: palette.bg },
{ bg: palette.highlight || palette.muted, fg: palette.ink },
{ bg: palette.bg, fg: palette.ink },
];
const fs = Math.min(w * 0.15, (w * 0.82) / (len * 0.75)) * k;
return (
<>
{chars.map((ch, i) => {
if (ch === " ") return
;
const pair = chipPairs[i % chipPairs.length];
return (
{ch}
);
})}
{blocks.map((b, i) => (
))}
);
}
// --- Ticket: ruled double frame, hero as the event, perforated divider -------
function LayoutTicket({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const inset = padding * 0.7;
const fs = Math.min((w * 0.72) / (len * 0.68), h * 0.16) * k;
const notchR = Math.min(w, h) * 0.025;
const dividerY = 0.36; // fraction of frame height
return (
{/* Hero area */}
{/* Perforated divider with edge notches */}
{/* Fine print lyrics */}
{blocks.map((b, i) => (
))}
);
}
// --- Tracklist: album-sleeve back — numbered blocks with rules ---------------
function LayoutTracklist({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const fs = Math.min((w * 0.88) / (len * 0.55), h * 0.14) * k;
return (
{hero}
{blocks.map((b, i) => (
{String(i + 1).padStart(2, "0")}
))}
);
}
// --- Swiss: modernist grid — hero bottom-left, lyric columns top-right -------
function LayoutSwiss({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const fs = Math.min((w * 0.9) / (len * 0.5), h * 0.28) * k;
return (
<>
{blocks.map((b, i) => (
))}
);
}
// --- Contour: lyrics inside a big circle, hero above --------------------------
function LayoutContour({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const fs = Math.min((w * 0.8) / (len * 0.55), h * 0.1) * k;
const d = Math.min(w, h) * 0.8;
return (
<>
{blocks.map((b, i) => (
))}
);
}
// --- Wave Text: every lyric line rides its own sine-curve baseline -----------
function LayoutWavy({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, flexAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const heroFs = ((w * 1.05) / (len * 0.52)) * k;
const allLines = blocks.flatMap((b) => b.text.split("\n")).filter((l) => l.trim().length > 0);
const usable = h - padding * 2;
const lineGap = usable / Math.max(1, allLines.length);
const fs = Math.min(bodySize * 1.3, lineGap * 0.62);
const amp = Math.min(lineGap * 0.28, h * 0.02);
const period = w / 2.2;
const segs = Math.ceil(w / period) + 1;
return (
<>
{/* Subdued hero behind the waves — accent at low opacity so it reads over patterns */}
);
}
// Deterministic pseudo-random from a string — keeps soundwave bars / barcodes
// stable across re-renders and exports.
function seedFrom(str) {
let h = 2166136261;
for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); }
return (i) => {
const x = Math.sin((h % 100000) + i * 12.9898) * 43758.5453;
return x - Math.floor(x);
};
}
// --- Player: album-art block, title, progress bar, transport controls --------
// Generic music-player look — deliberately NOT any one brand's trade dress.
function LayoutPlayer({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, photo }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const titleFs = Math.min((w * 0.82) / (len * 0.55), h * 0.055) * k;
const iconH = w * 0.052;
const progress = 0.38;
const knobR = w * 0.011;
const barY = w * 0.004;
return (
{/* Album-art block: customer photo when provided, hero word cover otherwise */}
{photo ? (
) : (
{hero}
)}
{/* Title + caption */}
{/* Progress bar */}
1:17-2:26
{/* Transport controls */}
{/* Lyrics fill the remainder — side by side so they fit under the player chrome */}
{blocks.map((b, i) => (
))}
{blocks.slice(0, 2).map((b, i) => (
))}
);
}
// --- Receipt: till-receipt itemisation of the lyric lines --------------------
function LayoutReceipt({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const mono = '"JetBrains Mono", monospace';
const lines = blocks.flatMap((b) => b.text.split("\n")).filter((l) => l.trim().length > 0);
const dur = (s) => { const t = 63 + (s.length * 17) % 187; return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`; };
const total = lines.reduce((a, l) => a + 63 + (l.length * 17) % 187, 0);
const totalStr = `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
const rnd = seedFrom(hero + lines.join(""));
const rowFs = Math.min(bodySize, ((h - padding * 2) * 0.5) / Math.max(1, lines.length) / 1.9);
const barcode = [];
{ let x = 0; let i = 0;
while (x < w * 0.5) { const bw = (0.4 + rnd(i) * 1.6); if (i % 2 === 0) barcode.push({ x, bw }); x += bw + 0.5; i++; } }
const rule = (style) => ;
return (
{hero}
* * * OFFICIAL RECEIPT * * *
ORDER #0001 · 33⅓ RPM · SIDE A
{rule("dashed")}
{lines.map((l, i) => (
{l.toUpperCase()}
{dur(l)}
))}
{rule("dashed")}
TOTAL{totalStr}
PAID IN FULLON REPEAT
{rule("solid")}
THANK YOU FOR LISTENING
);
}
// --- Vinyl: lyric lines ride circular grooves inside a record ----------------
function LayoutVinyl({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding, lyricAlign, photo }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const cx = w / 2;
const R = Math.min(w * 0.44, h * 0.3);
const cy = padding + R + h * 0.02;
const lines = blocks.flatMap((b) => b.text.split("\n")).filter((l) => l.trim().length > 0);
const ringCount = Math.min(7, lines.length);
const labelR = R * 0.3;
const ringSpan = R * 0.9 - labelR - R * 0.12;
const ringFs = Math.min(bodySize * 0.95, (ringSpan / Math.max(1, ringCount)) * 0.6);
const circlePath = (r) => `M ${cx - r} ${cy} a ${r} ${r} 0 1 1 ${r * 2} 0 a ${r} ${r} 0 1 1 ${-r * 2} 0`;
const titleFs = Math.min((w * 0.86) / (len * 0.55), h * 0.11) * k;
return (
<>
);
}
// --- Lineup: festival-bill tiers — the hero headlines, lyric lines are acts --
function LayoutLineup({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const fs = Math.min((w * 0.9) / (len * 0.55), h * 0.13) * k;
const mono = '"JetBrains Mono", monospace';
const lines = blocks.flatMap((b) => b.text.split("\n")).map((l) => l.trim()).filter(Boolean);
const tiers = [lines.slice(0, 2), lines.slice(2, 6), lines.slice(6)];
const tierFs = [bodySize * 2.0, bodySize * 1.4, bodySize * 1.0];
const tierOp = [1, 0.85, 0.62];
const rule = (key) => ;
return (
LIVE · ONE NIGHT ONLY
{hero}
{rule("r1")}
{tiers.map((tier, i) => tier.length > 0 && (
{tier.join(" · ")}
))}
{rule("r2")}
FROM THE FIRST LISTEN TO THE LAST ENCORE
);
}
// --- Typewriter: hand-typed keepsake — mono text, generous whitespace --------
function LayoutTypewriter({ hero, blocks, palette, w, h, heroSize, bodySize, padding }) {
const mono = '"JetBrains Mono", monospace';
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const titleFs = Math.min(bodySize * 1.7 * k, (w * 0.58) / (len * 0.62));
return (
{hero}
{blocks.map((b, i) => (
))}
· · ·
);
}
// --- Neon Sign: glowing hero in a framed sign, lyrics beneath ----------------
// Best on dark palettes (Glow, Neon, Midnight); glow colour = accent.
function LayoutNeon({ hero, blocks, palette, heroFont, bodyFont, w, h, heroSize, bodySize, padding }) {
const k = heroSize / 100;
const len = Math.max(1, (hero || "").length);
const fs = Math.min((w * 0.78) / (len * 0.55), h * 0.12) * k;
const glow = palette.accent;
const glow2 = palette.highlight || palette.accent;
return (
{hero}
{blocks.slice(0, 2).map((b, i) => (
))}
);
}
window.EXTRA_LAYOUTS = {
marquee: LayoutMarquee,
echo: LayoutEcho,
spine: LayoutSpine,
ransom: LayoutRansom,
ticket: LayoutTicket,
tracklist: LayoutTracklist,
swiss: LayoutSwiss,
contour: LayoutContour,
wavy: LayoutWavy,
player: LayoutPlayer,
soundwave: LayoutSoundwave,
receipt: LayoutReceipt,
vinyl: LayoutVinyl,
lineup: LayoutLineup,
typewriter: LayoutTypewriter,
neon: LayoutNeon,
};