/* global React, window */
// ─────────────────────────────────────────────────────────────
// ActionsRow
// Lifted from ref/mastermind-v2/components/response-ui.jsx:415–454
//
// Footer action bar for a Mastermind turn: Copy · Regenerate · Branch · Speak · Pin · Share.
//
// Departures from v2 source:
// • `variant`: "bar" (default, top-border separator) | "floating" (pill cluster)
// | "minimal" (icons only, no labels)
// • `actions`: array of string IDs to control which show & order them.
// e.g. ["copy", "regen", "branch"]. Missing handlers just skip.
// • `extra`: slot for custom trailing actions (e.g. "Promote to plan").
// • active-state for toggles (Pin after pin click).
// • Copy button does the clipboard write internally when `copyText` is passed
// (with "Copied" confirmation state).
// ─────────────────────────────────────────────────────────────
const AR_FONT = '"Inter", -apple-system, BlinkMacSystemFont, sans-serif';
const ARIcon = {
copy: () => ,
check: () => ,
regen: () => ,
branch: () => ,
pin: () => ,
pinFill: () => ,
share: () => ,
speak: () => ,
};
const ACTION_DEFAULTS = {
copy: { label: 'Copy', icon: 'copy' },
regen: { label: 'Regenerate', icon: 'regen' },
branch: { label: 'Branch', icon: 'branch' },
speak: { label: 'Speak', icon: 'speak' },
pin: { label: 'Pin', icon: 'pin' },
share: { label: 'Share', icon: 'share' },
};
function ActionsRow({
actions = ['copy', 'regen', 'branch', 'speak', 'pin', 'share'],
onCopy, onRegenerate, onBranch, onSpeak, onPin, onShare,
copyText,
pinned = false,
variant = 'bar',
extra,
style,
}) {
const [hover, setHover] = React.useState(null);
const [copied, setCopied] = React.useState(false);
const handlers = {
copy: () => {
if (copyText && navigator.clipboard?.writeText) {
navigator.clipboard.writeText(copyText).catch(() => {});
setCopied(true);
setTimeout(() => setCopied(false), 1200);
}
onCopy && onCopy();
},
regen: onRegenerate,
branch: onBranch,
speak: onSpeak,
pin: onPin,
share: onShare,
};
const items = actions
.filter(id => ACTION_DEFAULTS[id])
.map(id => {
const cfg = ACTION_DEFAULTS[id];
const isCopy = id === 'copy' && copied;
const isPinActive = id === 'pin' && pinned;
return {
id,
label: isCopy ? 'Copied' : cfg.label,
iconKey: isCopy ? 'check' : (isPinActive ? 'pinFill' : cfg.icon),
active: isCopy || isPinActive,
on: handlers[id],
};
});
// shared button style
const btnStyle = (it, isHover) => {
const minimal = variant === 'minimal';
const floating = variant === 'floating';
return {
display: 'inline-flex', alignItems: 'center', gap: minimal ? 0 : 5,
padding: minimal ? '6px 7px' : '5px 9px',
border: 'none',
borderRadius: floating ? 999 : 6,
cursor: 'pointer',
background: it.active ? 'rgba(255, 45, 180, 0.10)'
: isHover ? 'rgba(0,0,0,0.05)' : 'transparent',
color: it.active ? '#C01A7E'
: isHover ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.55)',
fontFamily: AR_FONT, fontSize: 11.5, fontWeight: 500,
transition: 'background 120ms, color 120ms',
};
};
const rowStyle = {
bar: {
display: 'flex', alignItems: 'center', gap: 2, marginTop: 10,
padding: '4px 0', borderTop: '1px solid rgba(0,0,0,0.05)',
},
floating: {
display: 'inline-flex', alignItems: 'center', gap: 2,
padding: 4, borderRadius: 999,
background: 'rgba(255,255,255,0.9)',
boxShadow: '0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)',
border: '1px solid rgba(0,0,0,0.05)',
backdropFilter: 'blur(8px)',
},
minimal: {
display: 'inline-flex', alignItems: 'center', gap: 0,
},
};
return (
{items.map(it => (
))}
{variant === 'bar' && }
{extra}
);
}
Object.assign(window, { ActionsRow });