/* Full character detail view — every field editable.
Server persistence: named columns (name/archetype/motivation/vulnerability/voice/
appearance/voice_asset_id/lip_sync_target) plus an extras JSON column that
captures the design's rich fields (dialect, costume, quirks, catchphrases,
props, signature_moves, continuity_notes, forbidden_changes, negative_prompt,
role/age/pronouns/summary/flaw/backstory/arc, etc.). */
const CharacterDetail = ({ char, refAsset, clonedVoiceId, onClose, onBack }) => {
const [tab, setTab] = React.useState("identity");
const [local, setLocal] = React.useState(char);
const [currentRef, setCurrentRef] = React.useState(refAsset || null);
const [voiceId, setVoiceId] = React.useState(clonedVoiceId || null);
const [regenerating, setRegenerating] = React.useState(false);
const [cloning, setCloning] = React.useState(false);
const [voiceErr, setVoiceErr] = React.useState(null);
const fileInputRef = React.useRef(null);
React.useEffect(() => { setLocal(char); setCurrentRef(refAsset || null); setVoiceId(clonedVoiceId || null); }, [char.id, refAsset, clonedVoiceId]);
const isLive = Boolean(window.CinematonAPI && window.CinematonAPI.live);
const regenReference = async () => {
if (!isLive) return;
setRegenerating(true);
try {
const asset = await window.CinematonAPI.regenCharacterReference(char.id);
setCurrentRef(asset);
window.dispatchEvent(new CustomEvent('cinematon:refresh-run'));
} catch (err) { console.error('regen reference failed', err); }
finally { setRegenerating(false); }
};
const cloneVoice = async (event) => {
const files = Array.from(event.target.files || []);
if (!files.length || !isLive) return;
setCloning(true); setVoiceErr(null);
try {
const result = await window.CinematonAPI.cloneCharacterVoice(char.id, files);
setVoiceId(result.voice_id);
window.dispatchEvent(new CustomEvent('cinematon:refresh-run'));
} catch (err) { setVoiceErr(err); console.error('voice clone failed', err); }
finally { setCloning(false); event.target.value = ''; }
};
// patch(field, value) updates local state immediately and PATCHes the server
// in live mode. Supports nested dot-paths (e.g., "appearance.height").
const patch = (field, value) => {
setLocal((cur) => setDeep({ ...cur }, field, value));
if (isLive && local && local.id) {
const body = setDeep({}, field, value);
window.CinematonAPI.patchCharacter(local.id, body)
.catch((err) => console.error(`character ${field} patch failed`, err));
}
};
const c = local;
return (
{(c.role || "supporting").toUpperCase()} · {(c.archetype || "").replace(/_/g, " ").toUpperCase()}
patch("name", v)}/>
{c.id} · age {c.age || "?"} · {c.pronouns || "?"}
{tab === "identity" && }
{tab === "voice" && }
{tab === "appearance" && }
{tab === "behavior" && }
{tab === "relationships" && }
{tab === "continuity" && }
);
};
/* ====== Editable field primitives ====== */
const CDField = ({ label, hint, value, multiline, onSave, mono, serif, placeholder }) => (
{label}
{hint && {hint}}
{onSave
?
: (value ?? "")}
);
const CDPair = ({ label, value, mono, onSave }) => (
{label}
);
// CDList — editable list of strings (one item per line, save on blur).
const CDList = ({ label, hint, items, onSave }) => {
const text = (items || []).join("\n");
return (
{label}
{hint && {hint}}
onSave(v.split("\n").map((s) => s.trim()).filter(Boolean))}
/>
);
};
/* ====== Tab bodies ====== */
const CharIdentity = ({ c, patch }) => (
patch("role", v)}/>
patch("archetype", v)}/>
patch("age", Number(v) || v)}/>
patch("pronouns", v)}/>
patch("summary", v)}/>
patch("motivation", v)}/>
patch("flaw", v)}/>
patch("vulnerability", v)}/>
patch("arc", v)}/>
patch("backstory", v)}/>
);
const CharVoice = ({ c, patch }) => (
patch("voice", v)}/>
patch("dialect", v)}/>
patch("speech_pace", v)}/>
patch("vocabulary", v)}/>
patch("quirks", v)}/>
patch("catchphrases", v)}/>
patch("voice_reference", v)}/>
);
const CharAppearance = ({ c, patch }) => {
const a = c.appearance && typeof c.appearance === "object" ? c.appearance : {};
const cos = c.costume && typeof c.costume === "object" ? c.costume : {};
// appearance can be either a string (server-named column) OR a rich object (extras).
// Support both: if object, render fields; if string, render single editable.
const isObject = c.appearance && typeof c.appearance === "object";
return (
{isObject ? (
patch("appearance.height", v)}/>
patch("appearance.build", v)}/>
patch("appearance.hair", v)}/>
patch("appearance.eyes", v)}/>
patch("appearance.skin", v)}/>
patch("appearance.identifying_marks", v)}/>
) : (
patch("appearance", v)}/>
)}
patch(isObject ? "costume.primary" : "costume_primary", v)}/>
patch(isObject ? "costume.cold_weather" : "costume_cold", v)}/>
patch(isObject ? "costume.signature_item" : "costume_signature", v)}/>
patch("props", v)}/>
patch("signature_moves", v)}/>
);
const CharRelationships = ({ c, patch }) => {
const rels = c.relationships || [];
const updateRel = (idx, patchObj) => {
const next = rels.map((r, i) => i === idx ? { ...r, ...patchObj } : r);
patch("relationships", next);
};
const removeRel = (idx) => {
const next = rels.filter((_, i) => i !== idx);
patch("relationships", next);
};
const addRel = () => {
patch("relationships", [...rels, { with: "char_other", role: "ally", note: "" }]);
};
return (
{rels.map((r, i) => (
updateRel(i, { with: v })}/>
updateRel(i, { role: v })}/>
updateRel(i, { note: v })}/>
))}
);
};
const CharContinuity = ({ c, patch }) => (
patch("continuity_notes", v)}/>
patch("forbidden_changes", v)}/>
patch("negative_prompt", v)}/>
patch("reference_image_id", v)}/>
);
// ---- helpers ----
function setDeep(obj, path, value) {
const parts = path.split(".");
let cur = obj;
for (let i = 0; i < parts.length - 1; i++) {
const k = parts[i];
if (cur[k] == null || typeof cur[k] !== "object") cur[k] = {};
else cur[k] = { ...cur[k] };
cur = cur[k];
}
cur[parts[parts.length - 1]] = value;
return obj;
}
window.CharacterDetail = CharacterDetail;