npm - @e-llm-studio/instant-learning - Versions diffs - 1.3.1 → 1.3.3 - Mend

@e-llm-studio/instant-learning 1.3.1 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1994) hide show

package/dist/features/IL-OTJ/_components/templates/TrafficManager/CreateRule.js CHANGED Viewed

@@ -1,2 +1,954 @@
-import{__assign as i}from"tslib";import{jsxs as n,jsx as t,Fragment as e}from"react/jsx-runtime";import o,{useState as l,useEffect as r,Suspense as a}from"react";import{InputDataReasoningCard as d}from"../../InputDataReasoningCard.js";import{ConditionSection as u}from"../../organisms/ConditionSection/ConditionSection.js";import{ConfigSection as c}from"../../organisms/ConfigSection/ConfigSection.js";import{ScopeSection as s}from"../../organisms/ScopeSection/ScopeSection.js";import{TextSection as p}from"../../organisms/TextSection/TextSection.js";import v from"../../AccordianSection.js";import{ButtonCognitiveIcon as f}from"../../_svg/ButtonCognitiveIcon.js";import{EditPencilIcon as g}from"../../_svg/EditPencilIcon.js";import{Loader2Icon as h,AlertTriangle as y,Pencil as m,Check as x}from"lucide-react";import{useLearningTemplateStore as T}from"../../../../LearningManagement/store/useLearningTemplateStore.js";import{useVariantEditSession as C,hasMeaningfulText as b}from"../../hooks/useVariantEditSession.js";var A=function(e){var l=e.children,r=e.onAddVariant,a=e.isDisabled,d=e.showAddVariantBtn,u=void 0===d||d,c=e.showConnectorLines,s=void 0===c||c,p=o.Children.toArray(l);return n("div",i({style:{display:"flex",flexDirection:"column",alignItems:"flex-start",width:"100%",minWidth:0,maxWidth:"100%",boxSizing:"border-box"}},{children:[p.map(function(i,e){var l=e===p.length-1,r=s&&(!l||u);return n(o.Fragment,{children:[i,r&&t("div",{style:{width:"2px",height:"20px",backgroundColor:"var(--il-border, #e2e8f0)",marginLeft:"30px"}})]},e)}),u&&t("div",i({onClick:a?void 0:r,style:{padding:"8px 16px",border:"1px solid var(--il-border, #E2E8F0)",borderRadius:"8px",color:a?"var(--il-disabled, #94A3B8)":"var(--il-secondary-fg, #475569)",fontSize:"14px",fontWeight:"500",cursor:a?"not-allowed":"pointer",backgroundColor:a?"var(--il-surface-alt, #f8fafc)":"var(--il-surface, #ffffff)",opacity:a?.7:1,userSelect:"none",transition:"all 0.2s ease"}},{children:"Add Variant"}))]}))},S=function(S){var D,E,w,I,O,V,B,R,P,N,W,_,k,z=S.state,L=S.handlers,j=S.uiState,M=T(function(i){return i.backwardCompatibility}),F=(null==j?void 0:j.highlights)||new Map,q=F.get("global_0")||{},J=l({}),H=J[0],K=J[1],$=l(null),U=$[0],Z=$[1],G=l(function(){var i,n,t;if((null==j?void 0:j.defaultTierOpen)>=0&&(null===(i=null==j?void 0:j.tierOptions)||void 0===i?void 0:i[j.defaultTierOpen]))return j.tierOptions[j.defaultTierOpen].toLowerCase().replace(/ /g,"_");var e=null===(t=null===(n=z.scopeData)||void 0===n?void 0:n.tiers)||void 0===t?void 0:t[0];return e?e.toLowerCase().replace(/ /g,"_"):null});G[0];var Q=G[1],X="rule-setup"===(null==j?void 0:j.activeEditId),Y=o.useRef(new Map),ii=C(j,function(n){var t,e;return{ruleDescription:(null==n?void 0:n.ruleDescription)||"",instructionPrompt:null!==(e=null!==(t=null==n?void 0:n.instructionPrompt)&&void 0!==t?t:null==j?void 0:j.instructionPrompt)&&void 0!==e?e:"",whenToApplyConditions:((null==n?void 0:n.whenToApplyConditions)||[]).map(function(n){return i({},n)}),whenNotToApplyConditions:((null==n?void 0:n.whenNotToApplyConditions)||[]).map(function(n){return i({},n)})}},function(i){var n;void 0!==i.instructionPrompt&&(null===(n=null==j?void 0:j.setInstructionPrompt)||void 0===n||n.call(j,i.instructionPrompt))}),ni=ii.variantEdit,ti=ii.pendingVariantId,ei=ii.handleStartVariantEdit,oi=ii.handleCancelVariantEdit,li=ii.patchVariantDraft,ri=ii.editDraftCondition,ai=ii.removeDraftCondition,di=ii.addDraftCondition,ui=ii.handleSaveVariantEdit,ci=l(null),si=ci[0],pi=ci[1],vi=l(null),fi=vi[0],gi=vi[1],hi=l(!1),yi=hi[0],mi=hi[1],xi=o.useRef(null==j?void 0:j.isAiStreaming);r(function(){xi.current&&!(null==j?void 0:j.isAiStreaming)&&yi&&mi(!1),xi.current=null==j?void 0:j.isAiStreaming},[null==j?void 0:j.isAiStreaming,yi]);var Ti=function(){var n,t;(null==j?void 0:j.activeEditId)&&"rule-setup"!==j.activeEditId||(null===(n=null==j?void 0:j.setActiveEditId)||void 0===n||n.call(j,"rule-setup"),pi(null!==(t=z.ruleTitle)&&void 0!==t?t:""),gi(z.scopeData?i({},z.scopeData):{}))},Ci=function(){var i;pi(null),gi(null),null===(i=null==j?void 0:j.setActiveEditId)||void 0===i||i.call(j,null)},bi=function(){var i,n,t=null!=si?si:z.ruleTitle,e=null!=fi?fi:z.scopeData,o=t!==z.ruleTitle,l=JSON.stringify(e)!==JSON.stringify(z.scopeData);if(!o&&!l)return pi(null),gi(null),void(null===(i=null==j?void 0:j.setActiveEditId)||void 0===i||i.call(j,null));if(null==j?void 0:j.setSendMessageInChat){var r="sk-".concat(Date.now(),"-").concat(Math.random().toString(36).slice(2,8)),a=[];if(o&&a.push((null==t?void 0:t.trim())?"with ".concat(t):"cleared"),l){var d=null==e?void 0:e.tiers,u=d&&d.length>0?"tiers: ".concat(d.join(", ")):"No Tier Selected";a.push(u)}var c=a.join(" and "),s=(null==j?void 0:j.ruleTitle)||"Rule Setup";j.setSendMessageInChat("__SKELETON__:".concat(r,":Update ").concat(s," ").concat(c))}mi(!0),pi(null),gi(null),null===(n=null==j?void 0:j.setActiveEditId)||void 0===n||n.call(j,null)},Ai=null!==si?null==si?void 0:si.trim():(z.ruleTitle||"").trim(),Si=null!=fi?fi:z.scopeData,Di=Ai!==(z.ruleTitle||"").trim(),Ei=JSON.stringify(Si)!==JSON.stringify(z.scopeData),wi=""===Ai,Ii=!Di&&!Ei||wi,Oi=o.useRef(null==j?void 0:j.defaultVariantOpen),Vi=o.useRef(null==j?void 0:j.activeVariantAccordionIndex),Bi=o.useRef(null==j?void 0:j.defaultTierOpen),Ri=o.useRef(null===(D=z.scopeData)||void 0===D?void 0:D.tiers),Pi=o.useRef(z.variantsByTier);o.useEffect(function(){var i,n,t,e,o,l,r=null,a=!1;Oi.current!==(null==j?void 0:j.defaultVariantOpen)&&(a=!0,Oi.current=null==j?void 0:j.defaultVariantOpen),Vi.current!==(null==j?void 0:j.activeVariantAccordionIndex)&&(a=!0,Vi.current=null==j?void 0:j.activeVariantAccordionIndex),Bi.current!==(null==j?void 0:j.defaultTierOpen)&&(a=!0,Bi.current=null==j?void 0:j.defaultTierOpen);var d=(null===(i=z.scopeData)||void 0===i?void 0:i.tiers)||[];JSON.stringify(Ri.current)!==JSON.stringify(d)&&(a=!0,Ri.current=d,d.length>0&&Q(d[0].toLowerCase().replace(/ /g,"_")));var u=(null===(n=null==j?void 0:j.tierOptions)||void 0===n?void 0:n.filter(function(i){var n,t;return null===(t=null===(n=z.scopeData)||void 0===n?void 0:n.tiers)||void 0===t?void 0:t.includes(i)}))||[],c=u.some(function(i){var n,t,e,o,l=i.toLowerCase().replace(/ /g,"_");return((null===(t=null===(n=Pi.current)||void 0===n?void 0:n[l])||void 0===t?void 0:t.length)||0)!==((null===(o=null===(e=z.variantsByTier)||void 0===e?void 0:e[l])||void 0===o?void 0:o.length)||0)});if(c&&(a=!0),a){var s=null!==(t=null==j?void 0:j.activeVariantAccordionIndex)&&void 0!==t?t:null==j?void 0:j.defaultVariantOpen;if(null==s||s<0)return Z(null),void(Pi.current=z.variantsByTier);u.forEach(function(i,n){var t;if(!((null==j?void 0:j.defaultTierOpen)>=0&&n!==j.defaultTierOpen)){var e=i.toLowerCase().replace(/ /g,"_"),o=(null===(t=z.variantsByTier)||void 0===t?void 0:t[e])||[];o[s]&&(r="".concat(e,"-variant-").concat(s)),null!=(null==j?void 0:j.autoScrollVariantIndex)&&o[j.autoScrollVariantIndex]&&(r="".concat(e,"-variant-").concat(j.autoScrollVariantIndex))}}),r&&Z(r)}if(null===U){var p=null!==(e=null==j?void 0:j.activeVariantAccordionIndex)&&void 0!==e?e:null==j?void 0:j.defaultVariantOpen;null!=p&&p>=0&&(null===(l=null===(o=null==j?void 0:j.tierOptions)||void 0===o?void 0:o.filter(function(i){var n,t;return null===(t=null===(n=z.scopeData)||void 0===n?void 0:n.tiers)||void 0===t?void 0:t.includes(i)}))||void 0===l||l.forEach(function(i,n){var t;if(!((null==j?void 0:j.defaultTierOpen)>=0&&n!==j.defaultTierOpen)){var e=i.toLowerCase().replace(/ /g,"_");((null===(t=z.variantsByTier)||void 0===t?void 0:t[e])||[])[p]&&Z("".concat(e,"-variant-").concat(p))}}))}Pi.current=z.variantsByTier},[z.variantsByTier,null==j?void 0:j.defaultVariantOpen,null==j?void 0:j.activeVariantAccordionIndex,null===(E=z.scopeData)||void 0===E?void 0:E.tiers,null==j?void 0:j.tierOptions,null==j?void 0:j.autoScrollVariantIndex,null==j?void 0:j.defaultTierOpen]);var Ni=function(n){K(function(t){var e;return i(i({},t),((e={})[n]=!t[n],e))})},Wi=function(i){var n,t,e,o=i.split("_"),l=o[o.length-1],r=/^\d+$/.test(l)?o.slice(0,-1).join("_"):i,a=null===(n=z.fieldCitations)||void 0===n?void 0:n[r];if(Array.isArray(a)&&a.length>0)return a;var d=null===(t=z.fieldCitations)||void 0===t?void 0:t[i];return Array.isArray(d)&&d.length>0?d:null!==(e=z.citations)&&void 0!==e?e:[]},_i={marginTop:"-17px",position:"relative",zIndex:1};r(function(){var i,n;null!=(null==j?void 0:j.autoScrollVariantIndex)&&b(z.ruleTitle)&&(null===(n=null===(i=null==j?void 0:j.tierOptions)||void 0===i?void 0:i.filter(function(i){var n,t;return null===(t=null===(n=z.scopeData)||void 0===n?void 0:n.tiers)||void 0===t?void 0:t.includes(i)}))||void 0===n||n.forEach(function(i){var n=i.toLowerCase().replace(/ /g,"_"),t="".concat(n,"-variant-").concat(j.autoScrollVariantIndex),e=Y.current.get(t);e&&requestAnimationFrame(function(){setTimeout(function(){e.scrollIntoView({behavior:"smooth",block:"center"})},300)})}))},[null==j?void 0:j.scrollTrigger,z.ruleTitle]),console.log("CreateRule state:",z),console.log("CreateRule uiState:",j);var ki=!!(null==j?void 0:j.activeEditId),zi=X&&null!==si?si:z.ruleTitle,Li=ki&&"rule-setup"!==(null==j?void 0:j.activeEditId);return n("div",i({className:"traffic-manager-template"},{children:[t("div",i({"data-edit-id":"rule-setup"},{children:t(v,i({title:{type:"other",label:(null==j?void 0:j.setupLabel)||"Rule Setup"},actionButtons:M?function(n,e){if(X)return null;var o=!!(null==j?void 0:j.activeEditId)&&"rule-setup"!==j.activeEditId;return t("div",i({style:{position:"relative",display:"flex",flexDirection:"column"}},{children:t("button",i({title:o?"Save active edits first":"Edit",onClick:function(i){i.stopPropagation(),o?(null==j?void 0:j.setPendingEditId)&&j.setPendingEditId(j.activeEditId||null):(Ti(),(null==j?void 0:j.setPendingEditId)&&j.setPendingEditId(null),n||e())},disabled:yi,style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",padding:"6px 8px",border:"1px solid var(--il-border, #e5e7eb)",borderRadius:"8px",cursor:yi?"not-allowed":"pointer",backgroundColor:"var(--il-surface, #ffffff)",color:"var(--il-muted, #64748B)",opacity:yi?.5:1}},{children:yi?"Validating...":M?t(m,{size:14}):t(g,{size:12})}))}))}:function(o,l){if(X){var r={display:"flex",alignItems:"center",gap:"6px",padding:"6px 10px",borderRadius:"6px",border:"1px solid var(--il-border, #CBD5E1)",color:"var(--il-primary, #2563EB)",fontSize:"13px",fontWeight:500};return n("div",i({style:{display:"flex",alignItems:"center",gap:"6px"}},{children:[t("button",i({onClick:function(i){i.stopPropagation(),bi()},disabled:Ii||yi,style:i(i({},r),{backgroundColor:yi?"var(--il-primary-subtle, #f5f3ff)":"var(--il-surface, #ffffff)",cursor:Ii||yi?"not-allowed":"pointer",opacity:Ii?.5:1,border:"1px solid var(--il-border, #CBD5E1)",color:"var(--il-primary, #2563EB)"})},{children:yi?"Validating...":"Save"})),!yi&&t("button",i({onClick:function(i){i.stopPropagation(),Ci()},style:i(i({},r),{backgroundColor:"var(--il-surface, #ffffff)",cursor:"pointer",border:"1px solid var(--il-border, #CBD5E1)",color:"var(--il-primary, #2563EB)"})},{children:"Cancel"}))]}))}return t("button",i({title:Li?"Save active edits first":wi?"Add":"Edit",onClick:function(i){i.stopPropagation(),Li?(null==j?void 0:j.setPendingEditId)&&j.setPendingEditId(j.activeEditId||null):(Ti(),(null==j?void 0:j.setPendingEditId)&&j.setPendingEditId(null),o||l())},disabled:yi,style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 10px ",border:"1px solid var(--il-border, #CBD5E1)",borderRadius:"6px",backgroundColor:"var(--il-surface, #ffffff)",color:yi&&(null==j?void 0:j.isAiStreaming)?"var(--il-primary, #2563EB)":"var(--il-muted, #64748B)",fontSize:"13px",fontWeight:500,cursor:yi?"not-allowed":"pointer",opacity:yi?.5:1}},{children:yi?"Validating...":n(e,{children:[t(g,{size:12}),wi?"Add":"Edit"]})}))},footerData:{ruleTitle:z.ruleTitle,stations:[z.scopeData.station],tiers:null===(w=z.scopeData)||void 0===w?void 0:w.tiers},defaultOpen:"Create"===(null==j?void 0:j.usedFor),readOnly:"Create"!==(null==j?void 0:j.usedFor),isAiStreaming:null==j?void 0:j.isAiStreaming,editFlow:M&&"Edit"===(null==j?void 0:j.usedFor),showAccentBorder:wi},{children:n("div",i({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[M&&yi&&(null==j?void 0:j.isAiStreaming)&&n("div",i({style:{display:"flex",alignItems:"center",color:"var(--il-foreground, #141414)",fontSize:"13px",fontWeight:500,fontStyle:"italic",marginBottom:"8px",paddingLeft:"4px"}},{children:[t(h,{size:16,style:{marginRight:8,animation:"spin 1s linear infinite"}},"loader"),"Checking the correctness of your Rule Setup..."]})),n(e,M?{children:[t(p,i({id:"rule-title",title:j.ruleTitle||"Rule Title",rows:1,placeholder:"Enter a short, descriptive title for the learning",required:!0,value:zi,onChange:function(i){return X?pi(i):L.setRuleTitle(i)},readOnly:(null==j?void 0:j.isAiStreaming)||!X,isOpen:H.ruleTitle,onToggle:function(){return Ni("ruleTitle")},isHighlighted:q.ruleTitle||!1,showCognitiveIcon:z.citation.ruleTitle,tooltipDescription:"Why this Title?",errorMessage:null===(I=j.validationErrors)||void 0===I?void 0:I.ruleTitle},j)),z.citation.ruleTitle&&t("div",i({style:_i},{children:t(d,{isVisible:H.ruleTitle,citation:z.citation.ruleTitle,citations:Wi("ruleTitle"),fieldName:"Rule Title",fieldValue:z.ruleTitle})}))]}:{children:[t(p,i({id:"rule-title",title:j.ruleTitle||"Rule Title",subtitle:null==j?void 0:j.ruleTitleInformation,rows:1,placeholder:"Enter a short, descriptive title for the learning",required:!0,value:zi,onChange:function(i){return X?pi(i):L.setRuleTitle(i)},readOnly:(null==j?void 0:j.isAiStreaming)||!X,isOpen:H.ruleTitle,onToggle:function(){return Ni("ruleTitle")},isHighlighted:q.ruleTitle||!1,showCognitiveIcon:z.citation.ruleTitle,tooltipDescription:"Why this Title?",errorMessage:null===(O=j.validationErrors)||void 0===O?void 0:O.ruleTitle},j)),z.citation.ruleTitle&&t("div",i({style:_i},{children:t(d,{isVisible:H.ruleTitle,citation:z.citation.ruleTitle,citations:Wi("ruleTitle"),fieldName:"Rule Title",fieldValue:z.ruleTitle})}))]}),(null===(V=null==j?void 0:j.tierOptions)||void 0===V?void 0:V.length)>1&&t(s,i({id:"scope",title:"",required:!1,scopeData:X&&null!==fi?fi:z.scopeData,onScopeChange:function(n,t){X?gi(function(e){var o;return i(i({},null!=e?e:z.scopeData),((o={})[n]=t,o))}):L.onScopeChange(n,t)},tierLabel:"Which tier are you configuring this learning for?",stationLabel:"Which scope should this learning belong to?",highlights:q,isOpen:H.scopeData,onToggle:function(){return Ni("scopeData")},showCognitiveIcon:z.citation.scopeData,cognitiveIcon:t(f,{}),tooltipDescription:"Why this Scope?",errorMessage:(null===(B=j.validationErrors)||void 0===B?void 0:B.station)||(null===(R=j.validationErrors)||void 0===R?void 0:R.tiers),stationErrorMessage:null===(P=j.validationErrors)||void 0===P?void 0:P.station,tierErrorMessage:null===(N=j.validationErrors)||void 0===N?void 0:N.tiers,readOnly:(null==j?void 0:j.isAiStreaming)||!X},j)),z.citation.scopeData&&t("div",i({style:_i},{children:t(d,{isVisible:H.scopeData,citation:z.citation.scopeData,citations:Wi("scopeData"),fieldName:"Scope",fieldValue:null===(_=null===(W=z.scopeData)||void 0===W?void 0:W.tiers)||void 0===_?void 0:_.join(", ")})})),X?n("div",i({style:{display:"flex",flexDirection:"column",alignItems:"flex-start"}},{children:[M&&n("div",i({style:{display:"flex",justifyContent:"flex-start",alignItems:"center",gap:"16px"}},{children:[t("button",i({onClick:Ci,style:{background:"none",border:"none",color:"var(--il-muted, #64748B)",fontSize:"14px",fontWeight:"500",cursor:"pointer",padding:"0"}},{children:"Discard Changes"})),n("button",i({onClick:bi,disabled:Ii,style:{display:"flex",alignItems:"center",gap:"8px",padding:"8px 16px",borderRadius:"12px",border:"none",backgroundColor:"var(--il-primary, #2563eb)",color:"var(--il-primary-fg, #ffffff)",fontSize:"14px",fontWeight:"500",cursor:Ii?"not-allowed":"pointer",boxShadow:"0 1px 2px rgba(0, 0, 0, 0.05)",opacity:Ii?.5:1}},{children:[t(x,{size:18,strokeWidth:2.5,color:"var(--il-primary-fg, #ffffff)"}),"Save Changes"]}))]})),"rule-setup"===(null==j?void 0:j.pendingEditId)&&n("div",i({style:{display:"flex",alignItems:"center",gap:"6px",marginTop:"10px"}},{children:[t(y,{size:14,style:{color:"var(--il-warning, #C2410C)"}}),t("div",i({style:{color:"var(--il-warning, #C2410C)",fontSize:"13px"}},{children:"Pending - Changes not applied yet. Apply or discard them to continue."}))]}))]})):null]}))}))})),(!(null==j?void 0:j.tierOptions)||0===j.tierOptions.length)&&n("div",i({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px",padding:"32px 16px",marginTop:"8px",backgroundColor:"var(--il-surface-alt, #f8fafc)",border:"1px dashed var(--il-border, #E2E8F0)",borderRadius:"12px",color:"var(--il-disabled, #94A3B8)"}},{children:[t(y,{size:20,style:{color:"var(--il-disabled, #94A3B8)"}}),t("span",i({style:{fontSize:"13px",fontWeight:500,color:"var(--il-muted, #64748B)"}},{children:"No tiers found"}))]})),null===(k=null==j?void 0:j.tierOptions)||void 0===k?void 0:k.map(function(e,l){var r,s,f,h,m,x,T,C=e.toLowerCase().replace(/ /g,"_"),S=(null===(r=z.variantsByTier)||void 0===r?void 0:r[C])||[],D=null===(f=null===(s=z.scopeData)||void 0===s?void 0:s.tiers)||void 0===f?void 0:f.includes(e),E=S.length,w=!1;if(1===E){var I=S[0],O=!(null===(h=null==I?void 0:I.ruleDescription)||void 0===h?void 0:h.trim()),V=(null===(m=null==I?void 0:I.whenToApplyConditions)||void 0===m?void 0:m.some(function(i){return(null==i?void 0:i.text)&&""!==i.text.trim()}))||!1,B=(null===(x=null==I?void 0:I.whenNotToApplyConditions)||void 0===x?void 0:x.some(function(i){return(null==i?void 0:i.text)&&""!==i.text.trim()}))||!1;!O||V||B||(w=!0)}var R=w?void 0:"".concat(E," ").concat(1===E?"variant":"variants"," configured for this tier"),P=t(A,i({onAddVariant:function(){var i;return null===(i=L.addNewVariant)||void 0===i?void 0:i.call(L,C)},isDisabled:!D||(null==j?void 0:j.isAiStreaming),showAddVariantBtn:M&&"Edit"!==(null==j?void 0:j.usedFor)},{children:S.map(function(e,o){var l,r,s,f,h,m,x,T,A,S,E,w=e.variantType||"default",I="".concat(C,"-variant-").concat(o),O=!0===e.is_variant,V="default"===w||"default_variant"===w,B="".concat(C,"_").concat(o),R=F.get(B)||{},P=(null===(r=null===(l=j.separationItemsByTier)||void 0===l?void 0:l[C])||void 0===r?void 0:r.get(o))||[],N=(null===(f=null===(s=j.togglesByTier)||void 0===s?void 0:s[C])||void 0===f?void 0:f.get(o))||[],W=null===(h=null==j?void 0:j.activeEditId)||void 0===h?void 0:h.startsWith("condition-wta-".concat(C,"-").concat(o)),_=null===(m=null==j?void 0:j.activeEditId)||void 0===m?void 0:m.startsWith("condition-wnta-".concat(C,"-").concat(o)),k=!D||e.isReadOnly||(null==j?void 0:j.isAiStreaming),q=V?function(i){return i?i.replace(/_/g," ").replace(/([a-zA-Z])(\d)/g,"$1 $2").replace(/\b\w/g,function(i){return i.toUpperCase()}):"Variant 1"}(w):"".concat((null==j?void 0:j.variantPillLabel)||"Variant"," ").concat(o+1),J="variant-".concat(C,"-").concat(o),K=!M&&(null==ni?void 0:ni.id)===J,$=ti===J,G=K?ni.draft:null,Q=k||$,X=G?G.ruleDescription:e.ruleDescription||"",ii=G?G.instructionPrompt:null!==(x=e.instructionPrompt)&&void 0!==x?x:j.instructionPrompt,ci=G?G.whenToApplyConditions:e.whenToApplyConditions||[],si=G?G.whenNotToApplyConditions:e.whenNotToApplyConditions||[],pi=!G||!b(G.ruleDescription)||!G.whenToApplyConditions.some(function(i){return b(i.text)});return t("div",i({ref:function(i){i?Y.current.set(I,i):Y.current.delete(I)},style:{width:"100%",opacity:D?1:.7},"data-edit-id":M?void 0:J},{children:t(v,i({title:{type:V?"default":"variant",label:q,number:o+1,isNewVariant:O,isDefault:e.isDefault,isModified:e.isModified},defaultOpen:!0,expanded:U===I,onToggle:function(){var i,n=U===I;Z(n?null:I),null===(i=null==j?void 0:j.setActiveVariantAccordionIndex)||void 0===i||i.call(j,n?null:o)},variant:"rule-behavior",footerData:{ruleTitle:w,description:e.ruleDescription||""},readOnly:k,actionButtons:M?void 0:function(l,r){if(M)return null;if(k&&!K&&!$)return null;if(K||$)return n("div",i({style:{display:"flex",alignItems:"center",gap:"6px"}},{children:[t("button",i({onClick:function(i){i.stopPropagation(),ui()},disabled:pi||$,style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 10.5px",borderRadius:"6px",border:"1px solid var(--il-primary, #D9D6FE)",backgroundColor:$?"var(--il-primary-subtle, #f5f3ff)":"var(--il-surface, #ffffff)",color:"var(--il-primary, #2563EB)",fontSize:"13px",fontWeight:500,cursor:pi||$?"not-allowed":"pointer",opacity:pi?.5:1}},{children:$?"Validating...":"Save"})),!$&&t("button",i({onClick:function(i){i.stopPropagation(),oi()},style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 10.5px",borderRadius:"6px",border:"1px solid var(--il-primary, #D9D6FE)",backgroundColor:"var(--il-surface, #ffffff)",color:"var(--il-primary, #2563EB)",fontSize:"13px",fontWeight:500,cursor:"pointer"}},{children:"Cancel"}))]}));var a=!(b(e.ruleDescription)||e.whenToApplyConditions&&e.whenToApplyConditions.some(function(i){return b(i.text)})||e.whenNotToApplyConditions&&e.whenNotToApplyConditions.some(function(i){return b(i.text)}));return n("button",i({title:Q?"Editing unavailable":a?"Add":"Edit",onClick:function(i){i.stopPropagation(),ei(e,C,o,q),l||r()},disabled:Q,style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"1px solid var(--il-border, #CBD5E1)",borderRadius:"6px",backgroundColor:"var(--il-surface, #ffffff)",color:"var(--il-muted, #64748B)",fontSize:"13px",fontWeight:500,cursor:Q?"not-allowed":"pointer",opacity:Q?.5:1,gap:"6px"}},{children:[t(g,{size:12})," ",a?"Add":"Edit"]}))},isAiStreaming:null==j?void 0:j.isAiStreaming,alwaysShowActions:!M,showAccentBorder:!wi},{children:n("div",i({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[t(p,i({id:"rule-description-".concat(C,"-").concat(o),title:j.ruleDescriptionTitle||"Rule Description",subtitle:null==j?void 0:j.ruleDescriptionInformation,rows:2,placeholder:"Explain the learning behaviour",required:!0,readOnly:M?k||ki&&(null==j?void 0:j.activeEditId)!=="rule-description-".concat(C,"-").concat(o):k||!K,value:X,onChange:function(i){return M?L.setRuleDescription(C,o,i):li({ruleDescription:i})},isOpen:H["ruleDescription-".concat(C)],onToggle:function(){return Ni("ruleDescription-".concat(C))},isHighlighted:R.ruleDescription||!1,showCognitiveIcon:null===(T=z.citation)||void 0===T?void 0:T["ruleDescription_".concat(C)],tooltipDescription:"Why this Description?",errorMessage:null===(A=j.validationErrors)||void 0===A?void 0:A["ruleDescription-".concat(C,"-").concat(o)],enableInlineEdit:M,setSendMessageInChat:null==j?void 0:j.setSendMessageInChat,isAiStreaming:null==j?void 0:j.isAiStreaming,fieldName:"Rule Description"},j)),(null===(S=z.citation)||void 0===S?void 0:S["ruleDescription_".concat(C)])&&t("div",i({style:_i},{children:t(d,{isVisible:H["ruleDescription-".concat(C)],citation:z.citation["ruleDescription_".concat(C)],citations:Wi("ruleDescription_".concat(C,"_").concat(o)),fieldName:"Rule Description",fieldValue:e.ruleDescription})})),t(u,i({id:"when-to-apply-".concat(C,"-").concat(o),idPrefix:"condition-wta",title:j.whenToApplyTitle||"When to apply",subtitle:null==j?void 0:j.wtaInformation,required:!0,dividerRequired:!0,readOnly:M?k||ki&&!W:k,hideEditControls:!M,parentEditing:K,conditions:ci,onAdd:function(){return M?L.addWhenToApply(C,o):di("whenToApplyConditions")},onRemove:function(i,n,t){return M?L.removeWhenToApply(i,n,t):ai("whenToApplyConditions",t)},onEdit:function(i,n,t,e){return M?L.editWhenToApply(i,n,t,e):ri("whenToApplyConditions",t,e)},index:o,tierKey:C,isHighlighted:R.wta||!1,highlightedIds:null==j?void 0:j.highlightedIds,tooltipDescription:"Why this Condition?",citations:Wi("whenToApply_".concat(C,"_").concat(o)),bordered:!0,addLabel:(null==j?void 0:j.addWhenToApplyBtnLabel)||"Add When to apply",isAiStreaming:j.isAiStreaming,errorMessage:(null===(E=j.validationErrors)||void 0===E?void 0:E["whenToApply-".concat(C,"-").concat(o)])||(null==j?void 0:j.conflictReason)},j)),t(u,i({id:"when-not-to-apply-".concat(C,"-").concat(o),idPrefix:"condition-wnta",title:j.whenNotToApplyTitle||"When NOT to apply",subtitle:null==j?void 0:j.wntaInformation,required:!1,dividerRequired:!0,readOnly:M?k||ki&&!_:k,hideEditControls:!M,parentEditing:K,conditions:si,onAdd:function(){return M?L.addWhenNotToApply(C,o):di("whenNotToApplyConditions")},onRemove:function(i,n,t){return M?L.removeWhenNotToApply(i,n,t):ai("whenNotToApplyConditions",t)},onEdit:function(i,n,t,e){return M?L.editWhenNotToApply(i,n,t,e):ri("whenNotToApplyConditions",t,e)},index:o,tierKey:C,isHighlighted:R.wnta||!1,highlightedIds:null==j?void 0:j.highlightedIds,tooltipDescription:"Why this Condition?",citations:Wi("whenNotToApply_".concat(C,"_").concat(o)),bordered:!0,addLabel:(null==j?void 0:j.addWhenNotToApplyBtnLabel)||"Add When NOT to apply",isAiStreaming:j.isAiStreaming},j)),(null==j?void 0:j.LazyPromptEditor)&&t(a,i({fallback:t("div",i({style:{padding:"12px",fontSize:"13px",color:"var(--il-muted, #64748B)"}},{children:"Loading editor..."}))},{children:t(j.LazyPromptEditor,{id:"instruction-prompt-".concat(C,"-").concat(o),title:j.instructionPromptTitle,description:null==j?void 0:j.promptDescriptionInformation,value:ii,onChange:function(i){var n;return M?null===(n=j.setInstructionPrompt)||void 0===n?void 0:n.call(j,i):li({instructionPrompt:i})},readOnly:M?k:k||!K,hideEditControls:!M,parentEditing:K,enableViewToggle:null==j?void 0:j.instructionPromptViewToggle,isAiStreaming:null==j?void 0:j.isAiStreaming,tierKey:C,variantIndex:o,uiState:j})})),(null==j?void 0:j.showConfiguration)&&t(c,i({id:"config-".concat(C,"-").concat(o),title:j.configTitle||"Configuration",required:!1,highlights:R,bordered:!0,readOnly:k||ki&&(null==j?void 0:j.activeEditId)!=="config-".concat(C,"-").concat(o),onConfigChange:function(i,n){return L.onConfigChange(C,o,i,n)},separationItems:P,toggles:N,index:o},j)),!M&&K&&(null==j?void 0:j.pendingEditId)===J&&n("div",i({style:{display:"flex",alignItems:"center",gap:"6px"}},{children:[t(y,{size:14,style:{color:"var(--il-warning, #C2410C)"}}),t("div",i({style:{color:"var(--il-warning, #C2410C)",fontSize:"13px"}},{children:"Pending - Changes not applied yet. Apply or discard them to continue."}))]}))]}))}),I)}),"".concat(C,"-variant-").concat(o))})}));return 1===(null===(T=null==j?void 0:j.tierOptions)||void 0===T?void 0:T.length)?t(o.Fragment,{children:P},"tier-".concat(l)):t(v,i({variant:"tier-header",title:{type:"other",label:e},subtitle:R,defaultOpen:!0,footerData:{description:"Variants for ".concat(e)}},{children:P}),"tier-".concat(l))})]}))};export{S as CreateRule,A as VariantListWrapper};
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useEffect, Suspense } from 'react';
+import { InputDataReasoningCard } from '../../InputDataReasoningCard.js';
+import AccordionSection from '../../AccordianSection.js';
+import { ButtonCognitiveIcon } from '../../_svg/ButtonCognitiveIcon.js';
+import { EditPencilIcon } from '../../_svg/EditPencilIcon.js';
+import { Loader2Icon, AlertTriangle, Pencil, Check } from 'lucide-react';
+import { useLearningTemplateStore } from '../../../../LearningManagement/store/useLearningTemplateStore.js';
+import { useVariantEditSession, hasMeaningfulText } from '../../hooks/useVariantEditSession.js';
+import { TextSection } from '../../organisms/TextSection/TextSection.js';
+import { ScopeSection } from '../../organisms/ScopeSection/ScopeSection.js';
+import { ConditionSection } from '../../organisms/ConditionSection/ConditionSection.js';
+import { ConfigSection } from '../../organisms/ConfigSection/ConfigSection.js';
+const VariantListWrapper = ({ children, onAddVariant, isDisabled, showAddVariantBtn = true, showConnectorLines = true }) => {
+  const childrenArray = React__default.Children.toArray(children);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%", minWidth: 0, maxWidth: "100%", boxSizing: "border-box" }, children: [
+    childrenArray.map((child, index) => {
+      const isLastChild = index === childrenArray.length - 1;
+      const showConnectorLine = showConnectorLines && (!isLastChild || showAddVariantBtn);
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        child,
+        showConnectorLine && /* @__PURE__ */ jsx("div", { style: {
+          width: "2px",
+          height: "20px",
+          backgroundColor: "var(--il-border, #e2e8f0)",
+          marginLeft: "30px"
+        } })
+      ] }, index);
+    }),
+    showAddVariantBtn && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: isDisabled ? void 0 : onAddVariant,
+        style: {
+          padding: "8px 16px",
+          border: "1px solid var(--il-border, #E2E8F0)",
+          borderRadius: "8px",
+          color: isDisabled ? "var(--il-disabled, #94A3B8)" : "var(--il-secondary-fg, #475569)",
+          fontSize: "14px",
+          fontWeight: "500",
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          backgroundColor: isDisabled ? "var(--il-surface-alt, #f8fafc)" : "var(--il-surface, #ffffff)",
+          opacity: isDisabled ? 0.7 : 1,
+          userSelect: "none",
+          transition: "all 0.2s ease"
+        },
+        children: "Add Variant"
+      }
+    )
+  ] });
+};
+const CreateRule = ({ state, handlers, uiState }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const backwardCompatibility = useLearningTemplateStore((s) => s.backwardCompatibility);
+  const highlights = (uiState == null ? void 0 : uiState.highlights) || /* @__PURE__ */ new Map();
+  const setupHighlights = highlights.get("global_0") || {};
+  const [activeReasoning, setActiveReasoning] = useState({});
+  const [openAccordionId, setOpenAccordionId] = useState(null);
+  const [openTierKey, setOpenTierKey] = useState(() => {
+    var _a2, _b2, _c2;
+    if ((uiState == null ? void 0 : uiState.defaultTierOpen) >= 0 && ((_a2 = uiState == null ? void 0 : uiState.tierOptions) == null ? void 0 : _a2[uiState.defaultTierOpen])) {
+      return uiState.tierOptions[uiState.defaultTierOpen].toLowerCase().replace(/ /g, "_");
+    }
+    const initialSelectedTier = (_c2 = (_b2 = state.scopeData) == null ? void 0 : _b2.tiers) == null ? void 0 : _c2[0];
+    return initialSelectedTier ? initialSelectedTier.toLowerCase().replace(/ /g, "_") : null;
+  });
+  const isEditingSetup = (uiState == null ? void 0 : uiState.activeEditId) === "rule-setup";
+  const variantRef = React__default.useRef(/* @__PURE__ */ new Map());
+  const buildVariantDraft = (item) => {
+    var _a2, _b2;
+    return {
+      ruleDescription: (item == null ? void 0 : item.ruleDescription) || "",
+      instructionPrompt: (_b2 = (_a2 = item == null ? void 0 : item.instructionPrompt) != null ? _a2 : uiState == null ? void 0 : uiState.instructionPrompt) != null ? _b2 : "",
+      whenToApplyConditions: ((item == null ? void 0 : item.whenToApplyConditions) || []).map((c) => ({ ...c })),
+      whenNotToApplyConditions: ((item == null ? void 0 : item.whenNotToApplyConditions) || []).map((c) => ({ ...c }))
+    };
+  };
+  const commitVariantEdit = (committed) => {
+    var _a2;
+    if (committed.instructionPrompt === void 0) return;
+    (_a2 = uiState == null ? void 0 : uiState.setInstructionPrompt) == null ? void 0 : _a2.call(uiState, committed.instructionPrompt);
+  };
+  const {
+    variantEdit,
+    pendingVariantId,
+    handleStartVariantEdit,
+    handleCancelVariantEdit,
+    patchVariantDraft,
+    editDraftCondition,
+    removeDraftCondition,
+    addDraftCondition,
+    handleSaveVariantEdit
+  } = useVariantEditSession(uiState, buildVariantDraft, commitVariantEdit);
+  const [draftTitle, setDraftTitle] = useState(null);
+  const [draftScope, setDraftScope] = useState(null);
+  const [isSetupPending, setIsSetupPending] = useState(false);
+  const prevStreamingSetup = React__default.useRef(uiState == null ? void 0 : uiState.isAiStreaming);
+  useEffect(() => {
+    const streamingFinished = prevStreamingSetup.current && !(uiState == null ? void 0 : uiState.isAiStreaming);
+    if (streamingFinished && isSetupPending) {
+      setIsSetupPending(false);
+    }
+    prevStreamingSetup.current = uiState == null ? void 0 : uiState.isAiStreaming;
+  }, [uiState == null ? void 0 : uiState.isAiStreaming, isSetupPending]);
+  const handleStartSetupEdit = () => {
+    var _a2, _b2;
+    if ((uiState == null ? void 0 : uiState.activeEditId) && uiState.activeEditId !== "rule-setup") return;
+    (_a2 = uiState == null ? void 0 : uiState.setActiveEditId) == null ? void 0 : _a2.call(uiState, "rule-setup");
+    setDraftTitle((_b2 = state.ruleTitle) != null ? _b2 : "");
+    setDraftScope(state.scopeData ? { ...state.scopeData } : {});
+  };
+  const handleCancelSetupEdit = () => {
+    var _a2;
+    setDraftTitle(null);
+    setDraftScope(null);
+    (_a2 = uiState == null ? void 0 : uiState.setActiveEditId) == null ? void 0 : _a2.call(uiState, null);
+  };
+  const handleSaveSetup = () => {
+    var _a2, _b2;
+    const currentDraftTitle2 = draftTitle != null ? draftTitle : state.ruleTitle;
+    const currentDraftScope2 = draftScope != null ? draftScope : state.scopeData;
+    const isTitleChanged2 = currentDraftTitle2 !== state.ruleTitle;
+    const isScopeChanged2 = JSON.stringify(currentDraftScope2) !== JSON.stringify(state.scopeData);
+    if (!isTitleChanged2 && !isScopeChanged2) {
+      setDraftTitle(null);
+      setDraftScope(null);
+      (_a2 = uiState == null ? void 0 : uiState.setActiveEditId) == null ? void 0 : _a2.call(uiState, null);
+      return;
+    }
+    if (uiState == null ? void 0 : uiState.setSendMessageInChat) {
+      const skId = `sk-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      let payloadParts = [];
+      if (isTitleChanged2) {
+        payloadParts.push((currentDraftTitle2 == null ? void 0 : currentDraftTitle2.trim()) ? `with ${currentDraftTitle2}` : `cleared`);
+      }
+      if (isScopeChanged2) {
+        const tiers = currentDraftScope2 == null ? void 0 : currentDraftScope2.tiers;
+        const scopeText = tiers && tiers.length > 0 ? `tiers: ${tiers.join(", ")}` : `No Tier Selected`;
+        payloadParts.push(scopeText);
+      }
+      const payload = payloadParts.join(" and ");
+      const setupSectionLabel = (uiState == null ? void 0 : uiState.ruleTitle) || "Rule Setup";
+      uiState.setSendMessageInChat(`__SKELETON__:${skId}:Update ${setupSectionLabel} ${payload}`);
+    }
+    setIsSetupPending(true);
+    setDraftTitle(null);
+    setDraftScope(null);
+    (_b2 = uiState == null ? void 0 : uiState.setActiveEditId) == null ? void 0 : _b2.call(uiState, null);
+  };
+  const currentDraftTitle = draftTitle !== null ? draftTitle == null ? void 0 : draftTitle.trim() : (state.ruleTitle || "").trim();
+  const currentDraftScope = draftScope != null ? draftScope : state.scopeData;
+  const isTitleChanged = currentDraftTitle !== (state.ruleTitle || "").trim();
+  const isScopeChanged = JSON.stringify(currentDraftScope) !== JSON.stringify(state.scopeData);
+  const isTitleEmpty = currentDraftTitle === "";
+  const isSaveChangesDisabled = !isTitleChanged && !isScopeChanged || isTitleEmpty;
+  const prevDefaultOpen = React__default.useRef(uiState == null ? void 0 : uiState.defaultVariantOpen);
+  const prevActiveVariantAccordionIndex = React__default.useRef(uiState == null ? void 0 : uiState.activeVariantAccordionIndex);
+  const prevDefaultTierOpen = React__default.useRef(uiState == null ? void 0 : uiState.defaultTierOpen);
+  const prevTiers = React__default.useRef((_a = state.scopeData) == null ? void 0 : _a.tiers);
+  const prevVariantsMap = React__default.useRef(state.variantsByTier);
+  React__default.useEffect(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    let targetId = null;
+    let shouldUpdate = false;
+    if (prevDefaultOpen.current !== (uiState == null ? void 0 : uiState.defaultVariantOpen)) {
+      shouldUpdate = true;
+      prevDefaultOpen.current = uiState == null ? void 0 : uiState.defaultVariantOpen;
+    }
+    if (prevActiveVariantAccordionIndex.current !== (uiState == null ? void 0 : uiState.activeVariantAccordionIndex)) {
+      shouldUpdate = true;
+      prevActiveVariantAccordionIndex.current = uiState == null ? void 0 : uiState.activeVariantAccordionIndex;
+    }
+    if (prevDefaultTierOpen.current !== (uiState == null ? void 0 : uiState.defaultTierOpen)) {
+      shouldUpdate = true;
+      prevDefaultTierOpen.current = uiState == null ? void 0 : uiState.defaultTierOpen;
+    }
+    const currentTiers = ((_a2 = state.scopeData) == null ? void 0 : _a2.tiers) || [];
+    if (JSON.stringify(prevTiers.current) !== JSON.stringify(currentTiers)) {
+      shouldUpdate = true;
+      prevTiers.current = currentTiers;
+      if (currentTiers.length > 0) {
+        setOpenTierKey(currentTiers[0].toLowerCase().replace(/ /g, "_"));
+      }
+    }
+    const selectedTiers = ((_b2 = uiState == null ? void 0 : uiState.tierOptions) == null ? void 0 : _b2.filter((tier) => {
+      var _a3, _b3;
+      return (_b3 = (_a3 = state.scopeData) == null ? void 0 : _a3.tiers) == null ? void 0 : _b3.includes(tier);
+    })) || [];
+    const hasVariantsChanged = selectedTiers.some((tier) => {
+      var _a3, _b3, _c3, _d3;
+      const tierKey = tier.toLowerCase().replace(/ /g, "_");
+      const prevLen = ((_b3 = (_a3 = prevVariantsMap.current) == null ? void 0 : _a3[tierKey]) == null ? void 0 : _b3.length) || 0;
+      const curLen = ((_d3 = (_c3 = state.variantsByTier) == null ? void 0 : _c3[tierKey]) == null ? void 0 : _d3.length) || 0;
+      return prevLen !== curLen;
+    });
+    if (hasVariantsChanged) {
+      shouldUpdate = true;
+    }
+    if (shouldUpdate) {
+      const targetIndex = (_c2 = uiState == null ? void 0 : uiState.activeVariantAccordionIndex) != null ? _c2 : uiState == null ? void 0 : uiState.defaultVariantOpen;
+      if (targetIndex == null || targetIndex < 0) {
+        setOpenAccordionId(null);
+        prevVariantsMap.current = state.variantsByTier;
+        return;
+      }
+      selectedTiers.forEach((tier, tierIndex) => {
+        var _a3;
+        if ((uiState == null ? void 0 : uiState.defaultTierOpen) >= 0 && tierIndex !== uiState.defaultTierOpen) {
+          return;
+        }
+        const tierKey = tier.toLowerCase().replace(/ /g, "_");
+        const variants = ((_a3 = state.variantsByTier) == null ? void 0 : _a3[tierKey]) || [];
+        if (variants[targetIndex]) {
+          targetId = `${tierKey}-variant-${targetIndex}`;
+        }
+        if ((uiState == null ? void 0 : uiState.autoScrollVariantIndex) != null && variants[uiState.autoScrollVariantIndex]) {
+          targetId = `${tierKey}-variant-${uiState.autoScrollVariantIndex}`;
+        }
+      });
+      if (targetId) setOpenAccordionId(targetId);
+    }
+    if (openAccordionId === null) {
+      const targetIndex = (_d2 = uiState == null ? void 0 : uiState.activeVariantAccordionIndex) != null ? _d2 : uiState == null ? void 0 : uiState.defaultVariantOpen;
+      if (targetIndex != null && targetIndex >= 0) {
+        (_f2 = (_e2 = uiState == null ? void 0 : uiState.tierOptions) == null ? void 0 : _e2.filter((tier) => {
+          var _a3, _b3;
+          return (_b3 = (_a3 = state.scopeData) == null ? void 0 : _a3.tiers) == null ? void 0 : _b3.includes(tier);
+        })) == null ? void 0 : _f2.forEach((tier, tierIndex) => {
+          var _a3;
+          if ((uiState == null ? void 0 : uiState.defaultTierOpen) >= 0 && tierIndex !== uiState.defaultTierOpen) return;
+          const tierKey = tier.toLowerCase().replace(/ /g, "_");
+          const variants = ((_a3 = state.variantsByTier) == null ? void 0 : _a3[tierKey]) || [];
+          if (variants[targetIndex]) {
+            setOpenAccordionId(`${tierKey}-variant-${targetIndex}`);
+          }
+        });
+      }
+    }
+    prevVariantsMap.current = state.variantsByTier;
+  }, [state.variantsByTier, uiState == null ? void 0 : uiState.defaultVariantOpen, uiState == null ? void 0 : uiState.activeVariantAccordionIndex, (_b = state.scopeData) == null ? void 0 : _b.tiers, uiState == null ? void 0 : uiState.tierOptions, uiState == null ? void 0 : uiState.autoScrollVariantIndex, uiState == null ? void 0 : uiState.defaultTierOpen]);
+  const toggleReasoning = (fieldId) => {
+    setActiveReasoning((prev) => ({ ...prev, [fieldId]: !prev[fieldId] }));
+  };
+  const getCitations = (fieldKey) => {
+    var _a2, _b2, _c2;
+    const parts = fieldKey.split("_");
+    const lastPart = parts[parts.length - 1];
+    const isIndexed = /^\d+$/.test(lastPart);
+    const tieredKey = isIndexed ? parts.slice(0, -1).join("_") : fieldKey;
+    const tieredMatch = (_a2 = state.fieldCitations) == null ? void 0 : _a2[tieredKey];
+    if (Array.isArray(tieredMatch) && tieredMatch.length > 0) return tieredMatch;
+    const exactMatch = (_b2 = state.fieldCitations) == null ? void 0 : _b2[fieldKey];
+    if (Array.isArray(exactMatch) && exactMatch.length > 0) return exactMatch;
+    return (_c2 = state.citations) != null ? _c2 : [];
+  };
+  const reasoningWrapperStyle = {
+    marginTop: "-17px",
+    position: "relative",
+    zIndex: 1
+  };
+  useEffect(() => {
+    var _a2, _b2;
+    if ((uiState == null ? void 0 : uiState.autoScrollVariantIndex) == null) return;
+    if (!hasMeaningfulText(state.ruleTitle)) return;
+    (_b2 = (_a2 = uiState == null ? void 0 : uiState.tierOptions) == null ? void 0 : _a2.filter((tier) => {
+      var _a3, _b3;
+      return (_b3 = (_a3 = state.scopeData) == null ? void 0 : _a3.tiers) == null ? void 0 : _b3.includes(tier);
+    })) == null ? void 0 : _b2.forEach((tier) => {
+      const tierKey = tier.toLowerCase().replace(/ /g, "_");
+      const uniqueId = `${tierKey}-variant-${uiState.autoScrollVariantIndex}`;
+      const node = variantRef.current.get(uniqueId);
+      if (node) {
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            node.scrollIntoView({ behavior: "smooth", block: "center" });
+          }, 300);
+        });
+      }
+    });
+  }, [uiState == null ? void 0 : uiState.scrollTrigger, state.ruleTitle]);
+  console.log("CreateRule state:", state);
+  console.log("CreateRule uiState:", uiState);
+  const formatVariantLabel = (variantType) => {
+    if (!variantType) return "Variant 1";
+    return variantType.replace(/_/g, " ").replace(/([a-zA-Z])(\d)/g, "$1 $2").replace(/\b\w/g, (char) => char.toUpperCase());
+  };
+  const renderHeaderActions = (isOpen, onToggle) => {
+    if (isEditingSetup) return null;
+    const isOtherFieldEditing = !!(uiState == null ? void 0 : uiState.activeEditId) && uiState.activeEditId !== "rule-setup";
+    return /* @__PURE__ */ jsx("div", { style: { position: "relative", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        title: isOtherFieldEditing ? "Save active edits first" : "Edit",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (isOtherFieldEditing) {
+            if (uiState == null ? void 0 : uiState.setPendingEditId) uiState.setPendingEditId(uiState.activeEditId || null);
+          } else {
+            handleStartSetupEdit();
+            if (uiState == null ? void 0 : uiState.setPendingEditId) uiState.setPendingEditId(null);
+            if (!isOpen) onToggle();
+          }
+        },
+        disabled: isSetupPending,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          padding: "6px 8px",
+          border: "1px solid var(--il-border, #e5e7eb)",
+          borderRadius: "8px",
+          cursor: isSetupPending ? "not-allowed" : "pointer",
+          backgroundColor: "var(--il-surface, #ffffff)",
+          color: "var(--il-muted, #64748B)",
+          opacity: isSetupPending ? 0.5 : 1
+        },
+        children: isSetupPending ? "Validating..." : backwardCompatibility ? /* @__PURE__ */ jsx(Pencil, { size: 14 }) : /* @__PURE__ */ jsx(EditPencilIcon, { size: 12 })
+      }
+    ) });
+  };
+  const renderFormActions = () => {
+    if (!isEditingSetup) return null;
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+      backwardCompatibility && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: "16px" }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCancelSetupEdit,
+            style: {
+              background: "none",
+              border: "none",
+              color: "var(--il-muted, #64748B)",
+              fontSize: "14px",
+              fontWeight: "500",
+              cursor: "pointer",
+              padding: "0"
+            },
+            children: "Discard Changes"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleSaveSetup,
+            disabled: isSaveChangesDisabled,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "8px 16px",
+              borderRadius: "12px",
+              border: "none",
+              backgroundColor: "var(--il-primary, #2563eb)",
+              color: "var(--il-primary-fg, #ffffff)",
+              fontSize: "14px",
+              fontWeight: "500",
+              cursor: isSaveChangesDisabled ? "not-allowed" : "pointer",
+              boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+              opacity: isSaveChangesDisabled ? 0.5 : 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(Check, { size: 18, strokeWidth: 2.5, color: "var(--il-primary-fg, #ffffff)" }),
+              "Save Changes"
+            ]
+          }
+        )
+      ] }),
+      (uiState == null ? void 0 : uiState.pendingEditId) === "rule-setup" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "10px" }, children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { size: 14, style: { color: "var(--il-warning, #C2410C)" } }),
+        /* @__PURE__ */ jsx("div", { style: { color: "var(--il-warning, #C2410C)", fontSize: "13px" }, children: "Pending - Changes not applied yet. Apply or discard them to continue." })
+      ] })
+    ] });
+  };
+  const isGlobalEditActive = !!(uiState == null ? void 0 : uiState.activeEditId);
+  const ruleTitleInformation = isEditingSetup && draftTitle !== null ? draftTitle : state.ruleTitle;
+  const isOtherFieldEditingSetup = isGlobalEditActive && (uiState == null ? void 0 : uiState.activeEditId) !== "rule-setup";
+  const renderGuidelineTitleHeaderActions = (isOpen, onToggle) => {
+    if (isEditingSetup) {
+      const ghostButtonStyle = {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "6px 10px",
+        borderRadius: "6px",
+        border: "1px solid var(--il-border, #CBD5E1)",
+        color: "var(--il-primary, #2563EB)",
+        fontSize: "13px",
+        fontWeight: 500
+      };
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              handleSaveSetup();
+            },
+            disabled: isSaveChangesDisabled || isSetupPending,
+            style: {
+              ...ghostButtonStyle,
+              backgroundColor: isSetupPending ? "var(--il-primary-subtle, #f5f3ff)" : "var(--il-surface, #ffffff)",
+              cursor: isSaveChangesDisabled || isSetupPending ? "not-allowed" : "pointer",
+              opacity: isSaveChangesDisabled ? 0.5 : 1,
+              border: "1px solid var(--il-border, #CBD5E1)",
+              color: "var(--il-primary, #2563EB)"
+            },
+            children: isSetupPending ? "Validating..." : "Save"
+          }
+        ),
+        !isSetupPending && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              handleCancelSetupEdit();
+            },
+            style: {
+              ...ghostButtonStyle,
+              backgroundColor: "var(--il-surface, #ffffff)",
+              cursor: "pointer",
+              border: "1px solid var(--il-border, #CBD5E1)",
+              color: "var(--il-primary, #2563EB)"
+            },
+            children: "Cancel"
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        title: isOtherFieldEditingSetup ? "Save active edits first" : isTitleEmpty ? "Add" : "Edit",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (isOtherFieldEditingSetup) {
+            if (uiState == null ? void 0 : uiState.setPendingEditId) uiState.setPendingEditId(uiState.activeEditId || null);
+          } else {
+            handleStartSetupEdit();
+            if (uiState == null ? void 0 : uiState.setPendingEditId) uiState.setPendingEditId(null);
+            if (!isOpen) onToggle();
+          }
+        },
+        disabled: isSetupPending,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "6px 10px ",
+          border: "1px solid var(--il-border, #CBD5E1)",
+          borderRadius: "6px",
+          backgroundColor: "var(--il-surface, #ffffff)",
+          color: isSetupPending && (uiState == null ? void 0 : uiState.isAiStreaming) ? "var(--il-primary, #2563EB)" : "var(--il-muted, #64748B)",
+          fontSize: "13px",
+          fontWeight: 500,
+          cursor: isSetupPending ? "not-allowed" : "pointer",
+          opacity: isSetupPending ? 0.5 : 1
+        },
+        children: isSetupPending ? "Validating..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EditPencilIcon, { size: 12 }),
+          isTitleEmpty ? "Add" : "Edit"
+        ] })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "traffic-manager-template", children: [
+    /* @__PURE__ */ jsx("div", { "data-edit-id": "rule-setup", children: /* @__PURE__ */ jsx(
+      AccordionSection,
+      {
+        title: backwardCompatibility ? { type: "other", label: (uiState == null ? void 0 : uiState.setupLabel) || "Rule Setup" } : { type: "other", label: (uiState == null ? void 0 : uiState.setupLabel) || "Rule Setup" },
+        actionButtons: backwardCompatibility ? renderHeaderActions : renderGuidelineTitleHeaderActions,
+        footerData: {
+          ruleTitle: state.ruleTitle,
+          stations: [state.scopeData.station],
+          tiers: (_c = state.scopeData) == null ? void 0 : _c.tiers
+        },
+        defaultOpen: (uiState == null ? void 0 : uiState.usedFor) === "Create",
+        readOnly: (uiState == null ? void 0 : uiState.usedFor) !== "Create",
+        isAiStreaming: uiState == null ? void 0 : uiState.isAiStreaming,
+        editFlow: backwardCompatibility && (uiState == null ? void 0 : uiState.usedFor) === "Edit",
+        showAccentBorder: isTitleEmpty,
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+          backwardCompatibility && isSetupPending && (uiState == null ? void 0 : uiState.isAiStreaming) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", color: "var(--il-foreground, #141414)", fontSize: "13px", fontWeight: 500, fontStyle: "italic", marginBottom: "8px", paddingLeft: "4px" }, children: [
+            /* @__PURE__ */ jsx(Loader2Icon, { size: 16, style: { marginRight: 8, animation: "spin 1s linear infinite" } }, "loader"),
+            "Checking the correctness of your Rule Setup..."
+          ] }),
+          backwardCompatibility ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              TextSection,
+              {
+                id: "rule-title",
+                title: uiState.ruleTitle || "Rule Title",
+                rows: 1,
+                placeholder: "Enter a short, descriptive title for the learning",
+                required: true,
+                value: ruleTitleInformation,
+                onChange: (v) => isEditingSetup ? setDraftTitle(v) : handlers.setRuleTitle(v),
+                readOnly: (uiState == null ? void 0 : uiState.isAiStreaming) || !isEditingSetup,
+                isOpen: activeReasoning["ruleTitle"],
+                onToggle: () => toggleReasoning("ruleTitle"),
+                isHighlighted: setupHighlights.ruleTitle || false,
+                showCognitiveIcon: state.citation.ruleTitle,
+                tooltipDescription: "Why this Title?",
+                errorMessage: (_d = uiState.validationErrors) == null ? void 0 : _d["ruleTitle"],
+                ...uiState
+              }
+            ),
+            state.citation.ruleTitle && /* @__PURE__ */ jsx("div", { style: reasoningWrapperStyle, children: /* @__PURE__ */ jsx(
+              InputDataReasoningCard,
+              {
+                isVisible: activeReasoning["ruleTitle"],
+                citation: state.citation.ruleTitle,
+                citations: getCitations("ruleTitle"),
+                fieldName: "Rule Title",
+                fieldValue: state.ruleTitle
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              TextSection,
+              {
+                id: "rule-title",
+                title: uiState.ruleTitle || "Rule Title",
+                subtitle: uiState == null ? void 0 : uiState.ruleTitleInformation,
+                rows: 1,
+                placeholder: "Enter a short, descriptive title for the learning",
+                required: true,
+                value: ruleTitleInformation,
+                onChange: (v) => isEditingSetup ? setDraftTitle(v) : handlers.setRuleTitle(v),
+                readOnly: (uiState == null ? void 0 : uiState.isAiStreaming) || !isEditingSetup,
+                isOpen: activeReasoning["ruleTitle"],
+                onToggle: () => toggleReasoning("ruleTitle"),
+                isHighlighted: setupHighlights.ruleTitle || false,
+                showCognitiveIcon: state.citation.ruleTitle,
+                tooltipDescription: "Why this Title?",
+                errorMessage: (_e = uiState.validationErrors) == null ? void 0 : _e["ruleTitle"],
+                ...uiState
+              }
+            ),
+            state.citation.ruleTitle && /* @__PURE__ */ jsx("div", { style: reasoningWrapperStyle, children: /* @__PURE__ */ jsx(
+              InputDataReasoningCard,
+              {
+                isVisible: activeReasoning["ruleTitle"],
+                citation: state.citation.ruleTitle,
+                citations: getCitations("ruleTitle"),
+                fieldName: "Rule Title",
+                fieldValue: state.ruleTitle
+              }
+            ) })
+          ] }),
+          ((_f = uiState == null ? void 0 : uiState.tierOptions) == null ? void 0 : _f.length) > 1 && /* @__PURE__ */ jsx(
+            ScopeSection,
+            {
+              id: "scope",
+              title: "",
+              required: false,
+              scopeData: isEditingSetup && draftScope !== null ? draftScope : state.scopeData,
+              onScopeChange: (field, val) => {
+                if (isEditingSetup) {
+                  setDraftScope((prev) => ({ ...prev != null ? prev : state.scopeData, [field]: val }));
+                } else {
+                  handlers.onScopeChange(field, val);
+                }
+              },
+              tierLabel: "Which tier are you configuring this learning for?",
+              stationLabel: "Which scope should this learning belong to?",
+              highlights: setupHighlights,
+              isOpen: activeReasoning["scopeData"],
+              onToggle: () => toggleReasoning("scopeData"),
+              showCognitiveIcon: state.citation.scopeData,
+              cognitiveIcon: /* @__PURE__ */ jsx(ButtonCognitiveIcon, {}),
+              tooltipDescription: "Why this Scope?",
+              errorMessage: ((_g = uiState.validationErrors) == null ? void 0 : _g["station"]) || ((_h = uiState.validationErrors) == null ? void 0 : _h["tiers"]),
+              stationErrorMessage: (_i = uiState.validationErrors) == null ? void 0 : _i["station"],
+              tierErrorMessage: (_j = uiState.validationErrors) == null ? void 0 : _j["tiers"],
+              readOnly: (uiState == null ? void 0 : uiState.isAiStreaming) || !isEditingSetup,
+              ...uiState
+            }
+          ),
+          state.citation.scopeData && /* @__PURE__ */ jsx("div", { style: reasoningWrapperStyle, children: /* @__PURE__ */ jsx(
+            InputDataReasoningCard,
+            {
+              isVisible: activeReasoning["scopeData"],
+              citation: state.citation.scopeData,
+              citations: getCitations("scopeData"),
+              fieldName: "Scope",
+              fieldValue: (_l = (_k = state.scopeData) == null ? void 0 : _k.tiers) == null ? void 0 : _l.join(", ")
+            }
+          ) }),
+          renderFormActions()
+        ] })
+      }
+    ) }),
+    (!(uiState == null ? void 0 : uiState.tierOptions) || uiState.tierOptions.length === 0) && /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "8px",
+      padding: "32px 16px",
+      marginTop: "8px",
+      backgroundColor: "var(--il-surface-alt, #f8fafc)",
+      border: "1px dashed var(--il-border, #E2E8F0)",
+      borderRadius: "12px",
+      color: "var(--il-disabled, #94A3B8)"
+    }, children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { size: 20, style: { color: "var(--il-disabled, #94A3B8)" } }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 500, color: "var(--il-muted, #64748B)" }, children: "No tiers found" })
+    ] }),
+    (_m = uiState == null ? void 0 : uiState.tierOptions) == null ? void 0 : _m.map((tier, tierIndex) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+      const tierKey = tier.toLowerCase().replace(/ /g, "_");
+      const variantsForTier = ((_a2 = state.variantsByTier) == null ? void 0 : _a2[tierKey]) || [];
+      const isTierSelected = (_c2 = (_b2 = state.scopeData) == null ? void 0 : _b2.tiers) == null ? void 0 : _c2.includes(tier);
+      const variantCount = variantsForTier.length;
+      const hasOnlyDefaultVariant = variantCount === 1;
+      let shouldHideSubtitle = false;
+      if (hasOnlyDefaultVariant) {
+        const defaultVariant = variantsForTier[0];
+        const isRuleDescriptionEmpty = !((_d2 = defaultVariant == null ? void 0 : defaultVariant.ruleDescription) == null ? void 0 : _d2.trim());
+        const hasValidWhenToApply = ((_e2 = defaultVariant == null ? void 0 : defaultVariant.whenToApplyConditions) == null ? void 0 : _e2.some(
+          (cond) => (cond == null ? void 0 : cond.text) && cond.text.trim() !== ""
+        )) || false;
+        const hasValidWhenNotToApply = ((_f2 = defaultVariant == null ? void 0 : defaultVariant.whenNotToApplyConditions) == null ? void 0 : _f2.some(
+          (cond) => (cond == null ? void 0 : cond.text) && cond.text.trim() !== ""
+        )) || false;
+        if (isRuleDescriptionEmpty && !hasValidWhenToApply && !hasValidWhenNotToApply) {
+          shouldHideSubtitle = true;
+        }
+      }
+      const subtitleText = !shouldHideSubtitle ? `${variantCount} ${variantCount === 1 ? "variant" : "variants"} configured for this tier` : void 0;
+      const variantListContent = /* @__PURE__ */ jsx(
+        VariantListWrapper,
+        {
+          onAddVariant: () => {
+            var _a3;
+            return (_a3 = handlers.addNewVariant) == null ? void 0 : _a3.call(handlers, tierKey);
+          },
+          isDisabled: !isTierSelected || (uiState == null ? void 0 : uiState.isAiStreaming),
+          showAddVariantBtn: backwardCompatibility && (uiState == null ? void 0 : uiState.usedFor) !== "Edit",
+          children: variantsForTier.map((item, variantIndex) => {
+            var _a3, _b3, _c3, _d3, _e3, _f3, _g3, _h2, _i2, _j2, _k2;
+            const variantType = item.variantType || "default";
+            const uniqueId = `${tierKey}-variant-${variantIndex}`;
+            const isNewVariant = item.is_variant === true;
+            const isDefaultVariant = variantType === "default" || variantType === "default_variant";
+            const compositeKey = `${tierKey}_${variantIndex}`;
+            const variantHighlights = highlights.get(compositeKey) || {};
+            const separationItems = ((_b3 = (_a3 = uiState.separationItemsByTier) == null ? void 0 : _a3[tierKey]) == null ? void 0 : _b3.get(variantIndex)) || [];
+            const toggles = ((_d3 = (_c3 = uiState.togglesByTier) == null ? void 0 : _c3[tierKey]) == null ? void 0 : _d3.get(variantIndex)) || [];
+            const isThisConditionEditingWta = (_e3 = uiState == null ? void 0 : uiState.activeEditId) == null ? void 0 : _e3.startsWith(`condition-wta-${tierKey}-${variantIndex}`);
+            const isThisConditionEditingWnta = (_f3 = uiState == null ? void 0 : uiState.activeEditId) == null ? void 0 : _f3.startsWith(`condition-wnta-${tierKey}-${variantIndex}`);
+            const isEffectivelyReadOnly = !isTierSelected || item.isReadOnly || (uiState == null ? void 0 : uiState.isAiStreaming);
+            const variantLabel = isDefaultVariant ? formatVariantLabel(variantType) : `${(uiState == null ? void 0 : uiState.variantPillLabel) || "Variant"} ${variantIndex + 1}`;
+            const variantEditId = `variant-${tierKey}-${variantIndex}`;
+            const isThisVariantEditing = !backwardCompatibility && (variantEdit == null ? void 0 : variantEdit.id) === variantEditId;
+            const isThisVariantPending = pendingVariantId === variantEditId;
+            const draft = isThisVariantEditing ? variantEdit.draft : null;
+            const isVariantEditDisabled = isEffectivelyReadOnly || isThisVariantPending;
+            const shownDescription = draft ? draft.ruleDescription : item.ruleDescription || "";
+            const shownPrompt = draft ? draft.instructionPrompt : (_g3 = item.instructionPrompt) != null ? _g3 : uiState.instructionPrompt;
+            const shownWta = draft ? draft.whenToApplyConditions : item.whenToApplyConditions || [];
+            const shownWnta = draft ? draft.whenNotToApplyConditions : item.whenNotToApplyConditions || [];
+            const isVariantSaveDisabled = !draft || !hasMeaningfulText(draft.ruleDescription) || !draft.whenToApplyConditions.some((c) => hasMeaningfulText(c.text));
+            const renderVariantHeaderActions = (isOpen, onToggle) => {
+              if (backwardCompatibility) return null;
+              if (isEffectivelyReadOnly && !isThisVariantEditing && !isThisVariantPending) return null;
+              if (isThisVariantEditing || isThisVariantPending) {
+                return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleSaveVariantEdit();
+                      },
+                      disabled: isVariantSaveDisabled || isThisVariantPending,
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        padding: "6px 10.5px",
+                        borderRadius: "6px",
+                        border: "1px solid var(--il-primary, #D9D6FE)",
+                        backgroundColor: isThisVariantPending ? "var(--il-primary-subtle, #f5f3ff)" : "var(--il-surface, #ffffff)",
+                        color: "var(--il-primary, #2563EB)",
+                        fontSize: "13px",
+                        fontWeight: 500,
+                        cursor: isVariantSaveDisabled || isThisVariantPending ? "not-allowed" : "pointer",
+                        opacity: isVariantSaveDisabled ? 0.5 : 1
+                      },
+                      children: isThisVariantPending ? "Validating..." : "Save"
+                    }
+                  ),
+                  !isThisVariantPending && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleCancelVariantEdit();
+                      },
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        padding: "6px 10.5px",
+                        borderRadius: "6px",
+                        border: "1px solid var(--il-primary, #D9D6FE)",
+                        backgroundColor: "var(--il-surface, #ffffff)",
+                        color: "var(--il-primary, #2563EB)",
+                        fontSize: "13px",
+                        fontWeight: 500,
+                        cursor: "pointer"
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] });
+              }
+              const isVariantEmpty = !hasMeaningfulText(item.ruleDescription) && !(item.whenToApplyConditions && item.whenToApplyConditions.some((c) => hasMeaningfulText(c.text))) && !(item.whenNotToApplyConditions && item.whenNotToApplyConditions.some((c) => hasMeaningfulText(c.text)));
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  title: isVariantEditDisabled ? "Editing unavailable" : isVariantEmpty ? "Add" : "Edit",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleStartVariantEdit(item, tierKey, variantIndex, variantLabel);
+                    if (!isOpen) onToggle();
+                  },
+                  disabled: isVariantEditDisabled,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "6px 8px",
+                    border: "1px solid var(--il-border, #CBD5E1)",
+                    borderRadius: "6px",
+                    backgroundColor: "var(--il-surface, #ffffff)",
+                    color: "var(--il-muted, #64748B)",
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    cursor: isVariantEditDisabled ? "not-allowed" : "pointer",
+                    opacity: isVariantEditDisabled ? 0.5 : 1,
+                    gap: "6px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(EditPencilIcon, { size: 12 }),
+                    " ",
+                    isVariantEmpty ? "Add" : "Edit"
+                  ]
+                }
+              );
+            };
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: (node) => {
+                  if (node) variantRef.current.set(uniqueId, node);
+                  else variantRef.current.delete(uniqueId);
+                },
+                style: { width: "100%", opacity: !isTierSelected ? 0.7 : 1 },
+                "data-edit-id": backwardCompatibility ? void 0 : variantEditId,
+                children: /* @__PURE__ */ jsx(
+                  AccordionSection,
+                  {
+                    title: {
+                      type: isDefaultVariant ? "default" : "variant",
+                      label: variantLabel,
+                      number: variantIndex + 1,
+                      isNewVariant,
+                      isDefault: item.isDefault,
+                      isModified: item.isModified
+                    },
+                    defaultOpen: true,
+                    expanded: openAccordionId === uniqueId,
+                    onToggle: () => {
+                      var _a4;
+                      const isClosing = openAccordionId === uniqueId;
+                      setOpenAccordionId(isClosing ? null : uniqueId);
+                      (_a4 = uiState == null ? void 0 : uiState.setActiveVariantAccordionIndex) == null ? void 0 : _a4.call(uiState, isClosing ? null : variantIndex);
+                    },
+                    variant: "rule-behavior",
+                    footerData: {
+                      ruleTitle: variantType,
+                      description: item.ruleDescription || ""
+                    },
+                    readOnly: isEffectivelyReadOnly,
+                    actionButtons: backwardCompatibility ? void 0 : renderVariantHeaderActions,
+                    isAiStreaming: uiState == null ? void 0 : uiState.isAiStreaming,
+                    alwaysShowActions: !backwardCompatibility,
+                    showAccentBorder: !isTitleEmpty,
+                    children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                      /* @__PURE__ */ jsx(
+                        TextSection,
+                        {
+                          id: `rule-description-${tierKey}-${variantIndex}`,
+                          title: uiState.ruleDescriptionTitle || "Rule Description",
+                          subtitle: uiState == null ? void 0 : uiState.ruleDescriptionInformation,
+                          rows: 2,
+                          placeholder: "Explain the learning behaviour",
+                          required: true,
+                          readOnly: backwardCompatibility ? isEffectivelyReadOnly || isGlobalEditActive && (uiState == null ? void 0 : uiState.activeEditId) !== `rule-description-${tierKey}-${variantIndex}` : isEffectivelyReadOnly || !isThisVariantEditing,
+                          value: shownDescription,
+                          onChange: (value) => backwardCompatibility ? handlers.setRuleDescription(tierKey, variantIndex, value) : patchVariantDraft({ ruleDescription: value }),
+                          isOpen: activeReasoning[`ruleDescription-${tierKey}`],
+                          onToggle: () => toggleReasoning(`ruleDescription-${tierKey}`),
+                          isHighlighted: variantHighlights.ruleDescription || false,
+                          showCognitiveIcon: (_h2 = state.citation) == null ? void 0 : _h2[`ruleDescription_${tierKey}`],
+                          tooltipDescription: "Why this Description?",
+                          errorMessage: (_i2 = uiState.validationErrors) == null ? void 0 : _i2[`ruleDescription-${tierKey}-${variantIndex}`],
+                          enableInlineEdit: backwardCompatibility,
+                          setSendMessageInChat: uiState == null ? void 0 : uiState.setSendMessageInChat,
+                          isAiStreaming: uiState == null ? void 0 : uiState.isAiStreaming,
+                          fieldName: "Rule Description",
+                          ...uiState
+                        }
+                      ),
+                      ((_j2 = state.citation) == null ? void 0 : _j2[`ruleDescription_${tierKey}`]) && /* @__PURE__ */ jsx("div", { style: reasoningWrapperStyle, children: /* @__PURE__ */ jsx(
+                        InputDataReasoningCard,
+                        {
+                          isVisible: activeReasoning[`ruleDescription-${tierKey}`],
+                          citation: state.citation[`ruleDescription_${tierKey}`],
+                          citations: getCitations(`ruleDescription_${tierKey}_${variantIndex}`),
+                          fieldName: "Rule Description",
+                          fieldValue: item.ruleDescription
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        ConditionSection,
+                        {
+                          id: `when-to-apply-${tierKey}-${variantIndex}`,
+                          idPrefix: "condition-wta",
+                          title: uiState.whenToApplyTitle || "When to apply",
+                          subtitle: uiState == null ? void 0 : uiState.wtaInformation,
+                          required: true,
+                          dividerRequired: true,
+                          readOnly: backwardCompatibility ? isEffectivelyReadOnly || isGlobalEditActive && !isThisConditionEditingWta : isEffectivelyReadOnly,
+                          hideEditControls: !backwardCompatibility,
+                          parentEditing: isThisVariantEditing,
+                          conditions: shownWta,
+                          onAdd: () => backwardCompatibility ? handlers.addWhenToApply(tierKey, variantIndex) : addDraftCondition("whenToApplyConditions"),
+                          onRemove: (tierKey2, variantIndex2, id) => backwardCompatibility ? handlers.removeWhenToApply(tierKey2, variantIndex2, id) : removeDraftCondition("whenToApplyConditions", id),
+                          onEdit: (tierKey2, variantIndex2, id, text) => backwardCompatibility ? handlers.editWhenToApply(tierKey2, variantIndex2, id, text) : editDraftCondition("whenToApplyConditions", id, text),
+                          index: variantIndex,
+                          tierKey,
+                          isHighlighted: variantHighlights.wta || false,
+                          highlightedIds: uiState == null ? void 0 : uiState.highlightedIds,
+                          tooltipDescription: "Why this Condition?",
+                          citations: getCitations(`whenToApply_${tierKey}_${variantIndex}`),
+                          bordered: true,
+                          addLabel: (uiState == null ? void 0 : uiState.addWhenToApplyBtnLabel) || "Add When to apply",
+                          isAiStreaming: uiState.isAiStreaming,
+                          errorMessage: ((_k2 = uiState.validationErrors) == null ? void 0 : _k2[`whenToApply-${tierKey}-${variantIndex}`]) || (uiState == null ? void 0 : uiState.conflictReason),
+                          ...uiState
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        ConditionSection,
+                        {
+                          id: `when-not-to-apply-${tierKey}-${variantIndex}`,
+                          idPrefix: "condition-wnta",
+                          title: uiState.whenNotToApplyTitle || "When NOT to apply",
+                          subtitle: uiState == null ? void 0 : uiState.wntaInformation,
+                          required: false,
+                          dividerRequired: true,
+                          readOnly: backwardCompatibility ? isEffectivelyReadOnly || isGlobalEditActive && !isThisConditionEditingWnta : isEffectivelyReadOnly,
+                          hideEditControls: !backwardCompatibility,
+                          parentEditing: isThisVariantEditing,
+                          conditions: shownWnta,
+                          onAdd: () => backwardCompatibility ? handlers.addWhenNotToApply(tierKey, variantIndex) : addDraftCondition("whenNotToApplyConditions"),
+                          onRemove: (tierKey2, variantIndex2, id) => backwardCompatibility ? handlers.removeWhenNotToApply(tierKey2, variantIndex2, id) : removeDraftCondition("whenNotToApplyConditions", id),
+                          onEdit: (tierKey2, variantIndex2, id, text) => backwardCompatibility ? handlers.editWhenNotToApply(tierKey2, variantIndex2, id, text) : editDraftCondition("whenNotToApplyConditions", id, text),
+                          index: variantIndex,
+                          tierKey,
+                          isHighlighted: variantHighlights.wnta || false,
+                          highlightedIds: uiState == null ? void 0 : uiState.highlightedIds,
+                          tooltipDescription: "Why this Condition?",
+                          citations: getCitations(`whenNotToApply_${tierKey}_${variantIndex}`),
+                          bordered: true,
+                          addLabel: (uiState == null ? void 0 : uiState.addWhenNotToApplyBtnLabel) || "Add When NOT to apply",
+                          isAiStreaming: uiState.isAiStreaming,
+                          ...uiState
+                        }
+                      ),
+                      (uiState == null ? void 0 : uiState.LazyPromptEditor) && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { style: { padding: "12px", fontSize: "13px", color: "var(--il-muted, #64748B)" }, children: "Loading editor..." }), children: /* @__PURE__ */ jsx(
+                        uiState.LazyPromptEditor,
+                        {
+                          id: `instruction-prompt-${tierKey}-${variantIndex}`,
+                          title: uiState.instructionPromptTitle,
+                          description: uiState == null ? void 0 : uiState.promptDescriptionInformation,
+                          value: shownPrompt,
+                          onChange: (v) => {
+                            var _a4;
+                            return backwardCompatibility ? (_a4 = uiState.setInstructionPrompt) == null ? void 0 : _a4.call(uiState, v) : patchVariantDraft({ instructionPrompt: v });
+                          },
+                          readOnly: backwardCompatibility ? isEffectivelyReadOnly : isEffectivelyReadOnly || !isThisVariantEditing,
+                          hideEditControls: !backwardCompatibility,
+                          parentEditing: isThisVariantEditing,
+                          enableViewToggle: uiState == null ? void 0 : uiState.instructionPromptViewToggle,
+                          isAiStreaming: uiState == null ? void 0 : uiState.isAiStreaming,
+                          tierKey,
+                          variantIndex,
+                          uiState
+                        }
+                      ) }),
+                      (uiState == null ? void 0 : uiState.showConfiguration) && /* @__PURE__ */ jsx(
+                        ConfigSection,
+                        {
+                          id: `config-${tierKey}-${variantIndex}`,
+                          title: uiState.configTitle || "Configuration",
+                          required: false,
+                          highlights: variantHighlights,
+                          bordered: true,
+                          readOnly: isEffectivelyReadOnly || isGlobalEditActive && (uiState == null ? void 0 : uiState.activeEditId) !== `config-${tierKey}-${variantIndex}`,
+                          onConfigChange: (key, value) => handlers.onConfigChange(tierKey, variantIndex, key, value),
+                          separationItems,
+                          toggles,
+                          index: variantIndex,
+                          ...uiState
+                        }
+                      ),
+                      !backwardCompatibility && isThisVariantEditing && (uiState == null ? void 0 : uiState.pendingEditId) === variantEditId && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                        /* @__PURE__ */ jsx(AlertTriangle, { size: 14, style: { color: "var(--il-warning, #C2410C)" } }),
+                        /* @__PURE__ */ jsx("div", { style: { color: "var(--il-warning, #C2410C)", fontSize: "13px" }, children: "Pending - Changes not applied yet. Apply or discard them to continue." })
+                      ] })
+                    ] })
+                  },
+                  uniqueId
+                )
+              },
+              `${tierKey}-variant-${variantIndex}`
+            );
+          })
+        }
+      );
+      return ((_g2 = uiState == null ? void 0 : uiState.tierOptions) == null ? void 0 : _g2.length) === 1 ? /* @__PURE__ */ jsx(React__default.Fragment, { children: variantListContent }, `tier-${tierIndex}`) : /* @__PURE__ */ jsx(
+        AccordionSection,
+        {
+          variant: "tier-header",
+          title: { type: "other", label: tier },
+          subtitle: subtitleText,
+          defaultOpen: true,
+          footerData: { description: `Variants for ${tier}` },
+          children: variantListContent
+        },
+        `tier-${tierIndex}`
+      );
+    })
+  ] });
+};
+export { CreateRule, VariantListWrapper };
 //# sourceMappingURL=CreateRule.js.map