);
};
// Composed thumbnail preview for REAL Luma-generated thumbnails: image + N
// text overlays (each with its own x/y/align/color) + optional subject layer
// on top. Used by editor (interactive), gallery cards, and result hero.
const DEFAULT_OVERLAY = {
hl_color: "#FBBF24", behind_subject: false, font_scale: 1,
};
const DEFAULT_TEXT = {
pre: "", hl: "", post: "",
x: 6, y: 80, align: "left", hl_color: "#FBBF24", font_scale: 1, behind_subject: false,
};
// Wrap at the canvas edges, not at the anchor's distance from edge. A long
// centered text positioned near a side should still wrap at the side, even if
// that means overflowing the anchor — the user moves the text after editing.
const TEXT_MAX_WIDTH_PCT = 99;
const TextOverlay = ({ text, scale, draggable, selected, onPointerDown, onClick }) => {
const t = { ...DEFAULT_TEXT, ...(text || {}) };
const empty = !t.pre && !t.hl && !t.post;
if (empty) return null;
const align = t.align || "left";
const transformX = align === "center" ? "-50%" : align === "right" ? "-100%" : "0";
return (
);
};
const DEFAULT_AVATAR_OVERLAY = { x: 70, y: 50, scale: 1 };
const ComposedThumb = ({
imageUrl, imageUrlFull,
subjectUrl, subjectUrlFull,
// Real photo of the user (bg-removed). When present, it's the source of
// truth for the face — composited on top of the AI scene. Replaces the
// legacy generated-subject layer for scene_only thumbs.
avatarSubjectUrl, avatarSubjectUrlFull,
avatarOverlay,
texts, overlay,
selectedTextId,
onTextPointerDown, onTextClick,
onAvatarPointerDown,
draggable = false, scale = 1,
}) => {
const avO = { ...DEFAULT_AVATAR_OVERLAY, ...(avatarOverlay || {}) };
const list = Array.isArray(texts) ? texts : [];
// While editing, lift the selected text above the subject layer so the user
// can drag it even when it's marked as "behind". On deselect it falls back
// to its real layer. (Clicks on a behind-text in the canvas don't reach it
// through the subject anyway — selection happens via the side-panel list.)
const isLifted = (t) => draggable && selectedTextId === t.id;
const behindTexts = list.filter((t) => t.behind_subject && !isLifted(t));
const frontTexts = list.filter((t) => !t.behind_subject || isLifted(t));
// Choose which subject layer to render: real avatar wins over legacy generated.
// Real avatar is always rendered (it IS the face). Legacy generated only when
// some text wants to sit behind it (its old behavior).
const useAvatarSubject = !!(avatarSubjectUrl || avatarSubjectUrlFull);
const useLegacySubject = !useAvatarSubject && behindTexts.length > 0 && (subjectUrl || subjectUrlFull);
const [imgSrc, setImgSrc] = React.useState(imageUrl || null);
const [imgLoaded, setImgLoaded] = React.useState(false);
React.useEffect(() => {
setImgSrc(imageUrl || null);
setImgLoaded(false);
}, [imageUrl]);
const [subSrc, setSubSrc] = React.useState(subjectUrl || null);
React.useEffect(() => { setSubSrc(subjectUrl || null); }, [subjectUrl]);
const [avSubSrc, setAvSubSrc] = React.useState(avatarSubjectUrl || null);
React.useEffect(() => { setAvSubSrc(avatarSubjectUrl || null); }, [avatarSubjectUrl]);
const onMainError = () => {
if (imageUrlFull && imgSrc !== imageUrlFull) setImgSrc(imageUrlFull);
};
const onSubError = () => {
if (subjectUrlFull && subSrc !== subjectUrlFull) setSubSrc(subjectUrlFull);
};
const onAvSubError = () => {
if (avatarSubjectUrlFull && avSubSrc !== avatarSubjectUrlFull) setAvSubSrc(avatarSubjectUrlFull);
};
const renderTextLayer = (t, z) => (
// Wrapper is pointer-events:none so multiple text layers don't block each
// other — only the actual text's bounding box catches clicks. Without this
// the last-rendered wrapper at the same z-index would intercept clicks to
// every text below it in DOM order, even on full-canvas-empty areas.
);
// Overlays render once the image is ready OR if there's no image yet (the
// editor is opened during a pending generation — user can still compose text).
const showOverlays = !imageUrl || imgLoaded;
const showSkeleton = !imageUrl || !imgLoaded;
return (