// Fluentra Editor — property panels & no-code components
// Loads AFTER editor-utils.jsx and editor-shapes.jsx
const FE = window.FE;
const {
DARK_SEL, CfgHead, AdvancedToggle,
OP_GROUPS, ALL_OPERATORS, VALUE_TYPE_OPTS,
discoverDiagramVariables,
exprToValue, valueToExpr,
buildComparisonExpr, parseCompoundExpr, parseComparisonExpr,
parsePayloadExpr, buildPayloadExpr,
exprToTemplate, templateToExpr,
renderSegmentsToDom, htmlToSegments, templateToSegments, segmentsToTemplate,
NODE_COLORS, kindToType
} = FE;
/* ── VariablePicker v2 (searchable dropdown + free text) ───── */
function VariablePicker({ value, onChange, style, extraVars, sourceFilter }) {
let [src, key] = (value || '').split('.');
if (!src) src = 'event';
const [open, setOpen] = React.useState(false);
const [filter, setFilter] = React.useState('');
const wrapRef = React.useRef(null);
React.useEffect(() => {
const fn = e => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', fn);
return () => document.removeEventListener('mousedown', fn);
}, []);
const sources = sourceFilter ? [sourceFilter] : ['event','variables'];
const baseFields = React.useMemo(() => {
const raw = src === 'variables'
? [...(extraVars || []), ...FE.COMMON_VARIABLE_FIELDS]
: FE.COMMON_EVENT_FIELDS;
return Array.from(new Set(raw.map(f => f.trim().toLowerCase()))).sort();
}, [src, extraVars]);
const allFields = React.useMemo(() =>
baseFields.filter(f => f.includes(filter.toLowerCase())),
[baseFields, filter]);
return (
setOpen(!open)}
style={{display:'flex',alignItems:'center',gap:4,cursor:'pointer',
padding:'5px 8px',background:'#0d0f1c',border:'1px solid rgba(255,255,255,.12)',
borderRadius:6,fontSize:11,fontFamily:'Geist Mono,monospace',color:'#EDEFF7',
minHeight:28}}>
{value && key ? (
{src}.{key}
) : (
Select variable…
)}
▼
{open && (
{sources.map(s => (
))}
setFilter(e.target.value)}
placeholder="Search or type field…"
style={{width:'100%',padding:'6px 10px',fontSize:11,background:'transparent',
border:'none',borderBottom:'1px solid rgba(255,255,255,.08)',color:'#EDEFF7',
fontFamily:'Geist Mono,monospace',outline:'none'}}/>
{allFields.map(f => (
{onChange(src + '.' + f); setOpen(false); setFilter('');}}
style={{padding:'5px 10px',fontSize:11,fontFamily:'Geist Mono,monospace',
color:'#EDEFF7',cursor:'pointer',whiteSpace:'nowrap',
borderBottom:'1px solid rgba(255,255,255,.04)'}}
onMouseEnter={e=>e.currentTarget.style.background='rgba(99,102,241,.10)'}
onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
{f}
))}
{filter && !allFields.includes(filter) && (
{onChange(src + '.' + filter); setOpen(false); setFilter('');}}
style={{padding:'5px 10px',fontSize:11,fontFamily:'Geist Mono,monospace',
color:'#34D399',cursor:'pointer',borderTop:'1px dashed rgba(255,255,255,.08)'}}>
Use “{filter}”
)}
)}
);
}
/* ── ValueInput v4 (text / number / bool / variable / math / counter / expression) ───── */
function ValueInput({ type, value, op, amount, onChange, placeholder, style, extraVars }) {
const t = type || 'text';
return (
{t === 'bool' ? (
) : t === 'variable' ? (
onChange({type,value:v})} extraVars={extraVars} />
) : t === 'math' ? (
<>
onChange({type,value:v,op,amount})} extraVars={extraVars} />
onChange({type,value,op,amount:e.target.value})}
placeholder="5" style={{flex:'0 0 60px',fontSize:10.5,padding:'4px 7px'}}/>
) : t === 'counter' ? (
<>
onChange({type,value:v,op,amount})} extraVars={extraVars} />
by
onChange({type,value,op,amount:e.target.value})}
placeholder="1" style={{flex:'0 0 50px',fontSize:10.5,padding:'4px 7px'}}/>
) : t === 'expression' ? (
onChange({type,value:e.target.value})}
placeholder="Python expression" style={{flex:1,fontSize:10.5,padding:'4px 7px'}}/>
) : t === 'number' ? (
onChange({type,value:e.target.value})}
placeholder="42" style={{flex:1,fontSize:10.5,padding:'4px 7px'}}/>
) : (
onChange({type,value:e.target.value})}
placeholder={placeholder || 'value'} style={{flex:1,fontSize:10.5,padding:'4px 7px'}}/>
)}
);
}
/* ── ComparisonRule v3 (all operators shown, disabled with tooltip) ─ */
function ComparisonRule({ rule, onChange, extraVars }) {
const { variable, operator, valueType, value } = rule;
const needsValue = operator !== 'is_empty' && operator !== 'is_not_empty';
return (
onChange({variable:v})} style={{flex:1}} extraVars={extraVars} />
{needsValue && (
onChange({valueType:type,value,op,amount})} extraVars={extraVars} />
)}
);
}
/* ═════════════════════════════════════════════════════════════════
CONDITION NODE CONFIG — visual rule builder v2
═════════════════════════════════════════════════════════════ */
function ConditionEditor({ raw, selEdges, nodes, onChangeRaw }) {
const expr = raw?.expression || 'True';
const parsed = parseCompoundExpr(expr);
const canBuilder = parsed !== null;
const extraVars = React.useMemo(() => discoverDiagramVariables(nodes), [nodes]);
const [showAdvanced, setShowAdvanced] = React.useState(false);
const [rules, setRules] = React.useState(canBuilder ? parsed.rules : [{variable:'event.type', operator:'==', valueType:'text', value:''}]);
const [joiners, setJoiners] = React.useState(canBuilder ? parsed.joiners : []);
const [exprVal, setExprVal] = React.useState(expr);
React.useEffect(() => {
const p = parseCompoundExpr(expr);
setRules(p ? p.rules : [{variable:'event.type', operator:'==', valueType:'text', value:''}]);
setJoiners(p ? p.joiners : []);
setExprVal(expr);
setShowAdvanced(false);
}, [expr]);
const updateRule = (i, patch) => setRules(rs => rs.map((r, j) => j === i ? { ...r, ...patch } : r));
const addRule = () => {
setRules(rs => [...rs, {variable:'event.type', operator:'==', valueType:'text', value:''}]);
setJoiners(js => [...js, 'and']);
};
const removeRule = i => {
setRules(rs => rs.filter((_, j) => j !== i));
setJoiners(js => js.filter((_, j) => j !== i - 1));
};
const buildExpr = () => {
if (rules.length === 0) return 'True';
return rules.map(buildComparisonExpr).reduce((expr, r, i) => {
if (i === 0) return r;
return expr + ' ' + (joiners[i-1] || 'and') + ' ' + r;
}, '');
};
const apply = () => {
const built = buildExpr();
onChangeRaw({...(raw||{}), expression: showAdvanced ? exprVal : built});
};
const trueEdge = selEdges.find(e=>e.fromPort==='true' || e.color==='#34D399');
const falseEdge = selEdges.find(e=>e.fromPort==='false' || e.color==='#F87171');
return (
{showAdvanced ? 'Advanced Python' : 'If…'}
setShowAdvanced(!showAdvanced)} color="#FBBF24"/>
{!canBuilder && !showAdvanced && (
This condition uses advanced Python. Open Advanced to edit it, or rebuild it here with simple rules.
)}
{showAdvanced ? (
<>