;
/* Three moments' output pages call for a heat grid — Strategy Kickoff's
"attributes that stand out", Product Naming's and Marketing's "the call,
by market". V4z had no `heat`, so those pages rendered an empty box.
Built from v2-rank's label stub and v2-markets' cell so the three read as
one chart family. */
if (kind === "heat") return
;
return null;
}
/* draggable divider — lives inside the pane it resizes */
function Resz4({ side, min = 230 }) {
const h = r4(null);
const down = (e) => {
e.preventDefault();
const node = h.current && h.current.parentElement; if (!node) return;
const x0 = e.clientX, w0 = node.getBoundingClientRect().width;
const parent = node.parentElement;
const move = (ev) => {
const avail = parent ? parent.getBoundingClientRect().width : 1440;
const other = side === "left" ? 244 : 248;
const max = Math.max(w0, Math.min(560, avail - 420 - other));
const d = side === "left" ? ev.clientX - x0 : x0 - ev.clientX;
node.style.width = Math.max(min, Math.min(max, w0 + d)) + "px";
};
const up = () => {
window.removeEventListener("pointermove", move);
window.removeEventListener("pointerup", up);
document.body.style.cursor = ""; document.body.style.userSelect = "";
};
window.addEventListener("pointermove", move);
window.addEventListener("pointerup", up);
document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none";
};
const reset = () => { const n = h.current && h.current.parentElement; if (n) n.style.width = ""; };
return ;
}
function Chat4({ brief, manual, dc, onDC, moment }) {
const base = r4(null);
if (!base.current) base.current = window.AT_INTAKE_TURNS(brief, moment);
/* What the user has to answer sits in a fixed dock just above the composer,
where their hands already are, rather than scrolling away inside the log. */
const [pending, setPending] = s4(null);
/* Turns the user actually caused. Nothing lands here on its own: the scripted
region exchange is offered as a chip and runs only when it is picked, and a
typed message gets a reply that does not pretend to have understood
something specific. A transcript showing a question nobody asked is the
moment a room realises it is watching a recording. */
const [extra, setExtra] = s4([]);
/* The drafting was already watched on the loading screen, so it arrives
instantly. Anything the user asks for after that is new work, and gets the
working animation it deserves. */
const [live, setLive] = s4(false);
const [draft, setDraft] = s4("");
const send = (text) => {
const t = (text || "").trim();
if (!t) return;
const sug = (window.AT_SUGGESTIONS || []).find(x => x.label === t);
setDraft("");
setLive(true);
setExtra(xs => [...xs, sug ? sug.turn : window.AT_REPLY_TO(t)]);
};
/* Answering is the user doing something, so whatever the agent does next is
new work and gets watched. Everything before the first answer was already
watched once, on the loading screen. */
const answer = (patch) => { setLive(true); onDC(patch); };
const turns = base.current.concat(extra);
const sugs = (window.AT_SUGGESTIONS || []).filter(x => !extra.some(e => e.me === x.label));
return (
MakerChat
{manual ? (
Building manually — ask MakerChat to draft objectives or questions any time, or keep going below.
) : }
{!manual && }
{/* Suggested-prompt chips removed from the chat per feedback 2026-08-26.
`sugs` stays computed above so a typed match still gets the canned
scripted reply — only the clickable offer is hidden. */}
{manual &&
);
}
/* tab 1 — an objective, the page it produces, and one line to the questions */
function What4({ objTitles, onEditor }) {
const [open, setOpen] = s4(null);
return (
{D4.objectives.map(o => (
OBJECTIVE {o.n}
{(objTitles && objTitles[o.n - 1]) || o.label}
{o.page} · EXAMPLE
{o.chart}
{o.cuts.map(c => {c})}
{open === o.n && (
{o.qs.map(q =>
{q.t}{q.l}
)}
)}
))}
);
}
const OPTS = {
Scale: ["Definitely would not buy", "Probably would not buy", "Might buy", "Probably would buy", "Definitely would buy"],
Single: ["A department store", "A specialist retailer", "The brand's own store", "Online only"],
Multi: ["Shape", "Color", "Material", "Price", "Brand"],
Grid: ["Brand A", "Brand B", "Brand C", "None of these"],
"Open end": null
};
/* ============================================================
Questions tab — the live survey editor, fully editable:
question text, answer options, order (questions and answers),
Required / Randomized flags, and anchored options that stay
pinned to the bottom of the list. Objectives first, demographics last.
============================================================ */
const QMETA = {
Scale: { icon: "heart", label: "Sentiment score", ctl: "stars" },
Single: { icon: "circle-check", label: "Single select", ctl: "single" },
Multi: { icon: "checks", label: "Multi select", ctl: "multi" },
Grid: { icon: "layout-grid", label: "Grid", ctl: "multi" },
"Open end": { icon: "abc", label: "Long text", ctl: "text" }
};
const ANCHOR_OPTS = ["Other", "None of the above"];
let __qid = 0;
const qid = () => "q" + (++__qid);
const DEMO_QS = [
{ t: "Single", l: "What's your gender?", opts: ["Male", "Female", "Non-binary"], anchors: ["Prefer not to say"], req: true, rand: false, icon: "gender-bigender", label: "Gender" },
{ t: "Single", l: "How old are you?", opts: ["18–24", "25–34", "35–44", "45–54", "55+"], anchors: [], req: true, rand: false, icon: "cake", label: "Age" },
{ t: "Single", l: "Which country do you live in?", opts: ["United Kingdom", "France", "Germany"], anchors: ["None of the above"], req: true, rand: false, icon: "map-pin", label: "Country" }
];
function buildSections() {
const secs = D4.objectives.map(o => ({
id: "o" + o.n, n: o.n, title: "Objective " + o.n + " · " + o.page, icon: "layout-list",
// Sentiment score leads the survey unless someone reorders it by hand.
qs: [...o.qs].sort((a, b) => (b.t === "Scale") - (a.t === "Scale")).map(q => {
const m = QMETA[q.t] || QMETA.Single;
return { id: qid(), t: q.t, l: q.l, opts: (q.o || OPTS[q.t] || []).slice(), anchors: [], req: true,
rand: m.ctl === "single" || m.ctl === "multi",
cond: q.t === "Open end" ? { q: (D4.objectives[0].qs.find(x => x.t === "Scale") || D4.objectives[0].qs[0]).l, vals: ["Probably would buy", "Definitely would buy"] } : null };
})
}));
secs.push({ id: "demo", title: "Demographics", icon: "users",
qs: DEMO_QS.map(d => ({ id: qid(), ...d, cond: null })) });
return secs;
}
/* new-question templates, one per type the editor supports */
const QTYPES = [
{ t: "Scale", l: "How likely are you to buy this style?", opts: [], req: true, rand: false },
{ t: "Single", l: "New question", opts: ["Option 1", "Option 2", "Option 3"], req: true, rand: true },
{ t: "Multi", l: "Which of these apply? Select all that apply.", opts: ["Option 1", "Option 2", "Option 3"], req: true, rand: true },
{ t: "Grid", l: "How do you rate each of these?", opts: ["Brand A", "Brand B", "Brand C"], req: true, rand: true },
{ t: "Open end", l: "Tell us more about your choice.", opts: [], req: false, rand: false }
];
/* pick a question type — the popup behind every “Add a question” */
function TypeMenu({ label, onPick, wide, className }) {
const [open, setOpen] = s4(false);
const wrap = r4(null);
e4(() => {
if (!open) return;
const away = ev => { if (wrap.current && !wrap.current.contains(ev.target)) setOpen(false); };
document.addEventListener("mousedown", away);
return () => document.removeEventListener("mousedown", away);
}, [open]);
return (
{open && (
Question type
{QTYPES.map(x => {
const m = QMETA[x.t];
return ;
})}
)}
);
}
const reorder = (arr, from, to) => {
const out = arr.slice();
out.splice(to, 0, out.splice(from, 1)[0]);
return out;
};
function Ed({ value, onCommit, className, tag }) {
const T = tag || "div";
return onCommit(e.currentTarget.textContent.trim() || value)}
onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); e.currentTarget.blur(); } }}>{value};
}
function QCard({ q, api, drag, onGrab, onOver, anchorId }) {
const m = QMETA[q.t] || QMETA.Single;
const sel = m.ctl === "single" || m.ctl === "multi";
const [grab, setGrab] = s4(false);
const [oDrag, setODrag] = s4(null); // index of the option being dragged
const [oGrab, setOGrab] = s4(false);
return (
)}