{opts.map((o) => ( ))}

); } function TweakSelect({ label, value, options, onChange }) { return ( ); } function TweakText({ label, value, placeholder, onChange }) { return ( onChange(e.target.value)} /> ); } function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) { const clamp = (n) => { if (min != null && n < min) return min; if (max != null && n > max) return max; return n; }; const startRef = React.useRef({ x: 0, val: 0 }); const onScrubStart = (e) => { e.preventDefault(); startRef.current = { x: e.clientX, val: value }; const decimals = (String(step).split('.')[1] || '').length; const move = (ev) => { const dx = ev.clientX - startRef.current.x; const raw = startRef.current.val + dx * step; const snapped = Math.round(raw / step) * step; onChange(clamp(Number(snapped.toFixed(decimals)))); }; const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }; return (

{label} onChange(clamp(Number(e.target.value)))} /> {unit && {unit}}

); } function __twkIsLight(hex) { const h = String(hex).replace('#', ''); const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, '0'); const n = parseInt(x.slice(0, 6), 16); if (Number.isNaN(n)) return true; const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255; return r * 299 + g * 587 + b * 114 > 148000; } const __TwkCheck = ({ light }) => ( ); function TweakColor({ label, value, options, onChange }) { if (!options || !options.length) { return (

{label}

onChange(e.target.value)} />

); } const key = (o) => String(JSON.stringify(o)).toLowerCase(); const cur = key(value); return (

{options.map((o, i) => { const colors = Array.isArray(o) ? o : [o]; const [hero, ...rest] = colors; const sup = rest.slice(0, 4); const on = key(o) === cur; return ( ); })}

); } function TweakButton({ label, onClick, secondary = false }) { return ( ); } Object.assign(window, { useTweaks, TweaksPanel, TweakSection, TweakRow, TweakSlider, TweakToggle, TweakRadio, TweakSelect, TweakText, TweakNumber, TweakColor, TweakButton, }); (function () { const s = document.createElement('style'); s.textContent = ` @keyframes twk-blink{50%{opacity:0}} @keyframes twk-fadein{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:none}} .twk-sugg{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px; background:rgba(0,0,0,.04);border:.5px solid rgba(0,0,0,.06);transition:all .15s} .twk-sugg:focus-within{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12)} .twk-sugg-field{position:relative;flex:1;min-width:0} .twk-sugg-field input{width:100%;height:20px;border:0;background:transparent; font:inherit;outline:none;color:inherit} .twk-sugg-ghost{position:absolute;inset:0;display:flex;align-items:center; color:rgba(41,38,27,.42);pointer-events:none;white-space:nowrap;overflow:hidden} .twk-sugg-ghost.hint{color:rgba(41,38,27,.28)} .twk-sugg-caret{display:inline-block;width:1px;height:13px;margin-left:1px; border-right:1.5px solid currentColor;opacity:.5;animation:twk-blink 1s step-end infinite} .twk-sugg-ideas{appearance:none;border:0;background:transparent;font:inherit; font-size:10.5px;font-weight:600;color:rgba(41,38,27,.6);cursor:default;padding:0 2px; white-space:nowrap;animation:twk-fadein .25s ease} .twk-sugg-ideas:hover{color:rgba(41,38,27,.85)} .twk-sugg-ideas svg{color:#7A5AE0} .twk-sugg-send{appearance:none;border:0;height:20px;padding:0 8px;border-radius:5px; background:#29261b;color:#fff;font:inherit;font-size:10px;font-weight:600;cursor:default} `; document.head.appendChild(s); })(); const __twkSendChat = (text) => window.parent.postMessage({ type: '__edit_mode_chat', text }, '*'); const __TWK_SPARK_STAR = 'M14.8299 10.378C15.1555 10.499 15.1827 10.9337 14.8747 11.0918L11.401 12.8747C11.3125 12.9202 11.2445 12.9955 11.2099 13.0864L9.95228 16.3963C9.82177 16.7397 9.31884 16.7397 9.18834 16.3963L7.93069 13.0864C7.89616 12.9955 7.82814 12.9202 7.73965 12.8747L4.2659 11.0918C3.95787 10.9337 3.98513 10.499 4.31067 10.378L7.69556 9.11947C7.81035 9.0768 7.89899 8.98625 7.93669 8.87317L9.18301 5.13503C9.30417 4.77165 9.83645 4.77165 9.9576 5.13503L11.2039 8.87317C11.2416 8.98626 11.3303 9.0768 11.4451 9.11947L14.8299 10.378Z'; const __TWK_SPARK_DOT = 'M6.0114 3.58637C6.35897 3.71564 6.35897 4.19061 6.0114 4.31988L4.98024 4.70337C4.86547 4.74605 4.77685 4.83659 4.73915 4.94965L4.33943 6.14853C4.21828 6.51191 3.686 6.51191 3.56485 6.14853L3.16513 4.94965C3.12743 4.83659 3.03881 4.74605 2.92404 4.70337L1.89288 4.31988C1.54531 4.19061 1.54531 3.71564 1.89288 3.58637L2.92404 3.20288C3.03881 3.1602 3.12743 3.06966 3.16513 2.9566L3.56485 1.75772C3.686 1.39434 4.21828 1.39434 4.33943 1.75772L4.73915 2.9566C4.77685 3.06966 4.86547 3.1602 4.98024 3.20288L6.0114 3.58637Z'; function __TwkSpark({ size = 12 }) { return ( ); } function TweakSuggestionBar({ suggestions = [], placeholder = 'Describe a tweak…', ideasPrompt = 'Suggest three more tweak ideas for this design and update the suggestions on TweakSuggestionBar.', }) { const [val, setVal] = React.useState(''); const [ghost, setGhost] = React.useState(''); const [focused, setFocused] = React.useState(false); const inputRef = React.useRef(null); const tw = useTwkTypewriter(suggestions, { placeholder, enabled: !val && !ghost && !focused }); const freeze = () => { tw.markPlayed(); if (val || ghost) return; const target = !tw.done ? suggestions[tw.idx] : ''; if (target) setGhost(target); inputRef.current?.focus(); }; const submit = () => { const v = (val || ghost).trim(); if (!v) return; __twkSendChat(v); setVal(''); setGhost(''); }; const onKeyDown = (e) => { if (e.key === 'Tab' && ghost && !val) { e.preventDefault(); setVal(ghost); setGhost(''); } else if (e.key === 'Enter') { e.preventDefault(); submit(); } else if (e.key === 'Escape') { setGhost(''); } }; const requestIdeas = () => __twkSendChat(ideasPrompt); const showAnim = !val && !ghost && !focused && !tw.done; const showStatic = !val && !ghost && !focused && tw.done; return (

{ setVal(e.target.value); setGhost(''); }} onFocus={() => { setFocused(true); tw.markPlayed(); }} onBlur={() => { setFocused(false); if (!val) setGhost(''); }} onKeyDown={onKeyDown} /> {showAnim && (
{tw.text}
)} {showStatic && (
{tw.tail}{tw.tail.length < placeholder.length && }
)} {ghost && !val && (
{ghost}
)}
{val || ghost ? ( ) : tw.done && !focused ? ( ) : null}
); } function useTwkTypewriter(items, { placeholder, typeMs = 35, eraseMs = 22, pauseMs = 1800, enabled = true } = {}) { const key = React.useMemo(() => '__twk_played:' + JSON.stringify(items), [JSON.stringify(items)]); const played = () => { try { return sessionStorage.getItem(key) === '1'; } catch { return false; } }; const [text, setText] = React.useState(''); const [tail, setTail] = React.useState(() => (items.length === 0 || played() ? placeholder : '')); const [idx, setIdx] = React.useState(0); const [done, setDone] = React.useState(() => items.length === 0 || played()); const phase = React.useRef('type'); const n = React.useRef(0); const markPlayed = React.useCallback(() => { try { sessionStorage.setItem(key, '1'); } catch {} setDone(true); }, [key]); React.useEffect(() => { const skip = items.length === 0 || played(); setText(''); setIdx(0); setDone(skip); setTail(skip ? placeholder : ''); phase.current = 'type'; n.current = 0; }, [key]); React.useEffect(() => { if (done || !enabled) return; const item = items[idx] ?? ''; let t; const tick = () => { if (phase.current === 'type') { n.current++; setText(item.slice(0, n.current)); if (n.current >= item.length) { phase.current = 'pause'; t = setTimeout(tick, pauseMs); } else t = setTimeout(tick, typeMs + Math.random() * 20); } else if (phase.current === 'pause') { phase.current = 'erase'; t = setTimeout(tick, eraseMs); } else { n.current--; setText(item.slice(0, n.current)); if (n.current <= 0) { if (idx === items.length - 1) { markPlayed(); return; } phase.current = 'type'; setIdx((i) => i + 1); } else t = setTimeout(tick, eraseMs); } }; phase.current = 'type'; n.current = 0; setText(''); t = setTimeout(tick, 400); return () => clearTimeout(t); }, [idx, done, key, enabled, typeMs, eraseMs, pauseMs]); React.useEffect(() => { if (!done || tail === placeholder) return; let i = 0; const t = setInterval(() => { i++; setTail(placeholder.slice(0, i)); if (i >= placeholder.length) clearInterval(t); }, 28); return () => clearInterval(t); }, [done, placeholder]); return { text, tail, idx, done, markPlayed }; } Object.assign(window, { TweakSuggestionBar });