@bikdotai/bik-component-library 0.0.821-beta.6 → 0.0.821-beta.8

package/dist/esm/components/agent-builder/AgentBuilder.styled.js

@@ -110,7 +110,7 @@ const s = e.div.attrs({ className: "bik-builder-root" })`
 		border-left: 1px dashed #e0e0e0;
 		pointer-events: none;
 	}
-`, h = e.div.attrs({ className: "bik-step-badge" })`
+`, k = e.div.attrs({ className: "bik-step-badge" })`
 	width: 20px;
 	height: 20px;
 	flex-shrink: 0;
@@ -123,7 +123,7 @@ const s = e.div.attrs({ className: "bik-builder-root" })`
 	font-weight: 600;
 	background: ${(a) => a.state === "complete" ? t.content.brand : a.state === "active" ? t.background.brandTint : "#F0F0F0"};
 	color: ${(a) => a.state === "complete" ? t.content.primaryInverse : a.state === "active" ? t.content.brand : t.content.placeholder};
-`, k = e.div.attrs({
+`, h = e.div.attrs({
   className: "bik-section-header-wrap"
 })`
 	display: flex;
@@ -141,7 +141,7 @@ const s = e.div.attrs({ className: "bik-builder-root" })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-`, N = e.div.attrs({
+`, w = e.div.attrs({
   className: "bik-ai-text-area-shell"
 })`
 	display: flex;
@@ -153,7 +153,7 @@ const s = e.div.attrs({ className: "bik-builder-root" })`
 	gap: 8px;
 	min-height: ${(a) => a.minHeight ?? "120px"};
 	background: ${t.surface.standard};
-`, w = e.textarea.attrs({
+`, N = e.textarea.attrs({
   className: "bik-ai-text-area-input"
 })`
 	flex: 1;
@@ -198,7 +198,7 @@ const s = e.div.attrs({ className: "bik-builder-root" })`
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
-`, j = e.div.attrs({ className: "bik-intent-chip" })`
+`, R = e.div.attrs({ className: "bik-intent-chip" })`
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -206,7 +206,7 @@ const s = e.div.attrs({ className: "bik-builder-root" })`
 	border: 1px solid ${t.stroke.primary};
 	border-radius: 4px;
 	background: ${t.surface.standard};
-`, C = e.button.attrs({
+`, j = e.button.attrs({
   className: "bik-chip-close-button"
 })`
 	display: flex;
@@ -216,7 +216,7 @@ const s = e.div.attrs({ className: "bik-builder-root" })`
 	background: transparent;
 	padding: 0;
 	cursor: pointer;
-`, R = e.button.attrs({
+`, C = e.button.attrs({
   className: "bik-add-chip-button"
 })`
 	display: inline-flex;
@@ -293,7 +293,19 @@ e.button.attrs({
 	padding: 0;
 	cursor: pointer;
 `;
-const O = e.button.attrs({
+const D = e.div.attrs({ className: "bik-row-actions" })`
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+`, O = e.span.attrs({
+  className: "bik-row-action-divider"
+})`
+	width: 1px;
+	align-self: stretch;
+	margin: 4px 0;
+	background: ${t.stroke.primary};
+`, W = e.button.attrs({
   className: "bik-row-menu-button"
 })`
 	display: flex;
@@ -310,32 +322,32 @@ const O = e.button.attrs({
 	&:hover {
 		background: ${t.surface.subdued};
 	}
-`, W = e.div.attrs({ className: "bik-modal-body" })`
+`, G = e.div.attrs({ className: "bik-modal-body" })`
 	padding: 24px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 16px;
 	text-align: center;
-`, D = e.div.attrs({ className: "bik-modal-icon" })`
+`, q = e.div.attrs({ className: "bik-modal-icon" })`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-bottom: 4px;
-`, G = e.div.attrs({
+`, E = e.div.attrs({
   className: "bik-modal-actions"
 })`
 	display: flex;
 	gap: 12px;
 	width: 100%;
-`, q = e.div.attrs({
+`, J = e.div.attrs({
   className: "bik-subagent-scrim"
 })`
 	position: fixed;
 	inset: 0;
 	background: rgba(0, 0, 0, 0.32);
 	z-index: 1000;
-`, E = e.div.attrs({
+`, K = e.div.attrs({
   className: "bik-subagent-panel"
 })`
 	position: fixed;
@@ -350,7 +362,7 @@ const O = e.button.attrs({
 	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
 	z-index: 1001;
 	box-sizing: border-box;
-`, J = e.div.attrs({
+`, Q = e.div.attrs({
   className: "bik-subagent-panel-header"
 })`
 	display: flex;
@@ -360,14 +372,14 @@ const O = e.button.attrs({
 	padding: 16px;
 	border-bottom: 1px solid ${t.stroke.primary};
 	flex-shrink: 0;
-`, K = e.div.attrs({
+`, U = e.div.attrs({
   className: "bik-subagent-panel-header-text"
 })`
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 0;
-`, Q = e.div.attrs({
+`, V = e.div.attrs({
   className: "bik-subagent-panel-body"
 })`
 	flex: 1;
@@ -377,7 +389,7 @@ const O = e.button.attrs({
 	display: flex;
 	flex-direction: column;
 	gap: 20px;
-`, U = e.div.attrs({
+`, X = e.div.attrs({
   className: "bik-subagent-panel-footer"
 })`
 	display: flex;
@@ -387,7 +399,7 @@ const O = e.button.attrs({
 	min-height: 48px;
 	border-top: 1px solid ${t.stroke.primary};
 	flex-shrink: 0;
-`, V = e.button.attrs({
+`, Y = e.button.attrs({
   className: "bik-subagent-close"
 })`
 	display: flex;
@@ -414,14 +426,14 @@ e.div.attrs({
 	gap: 8px;
 `;
 export {
-  R as AddChipButton,
+  C as AddChipButton,
   M as AddIconButton,
-  w as AiTextAreaInput,
-  N as AiTextAreaShell,
+  N as AiTextAreaInput,
+  w as AiTextAreaShell,
   d as BackButton,
   s as BuilderRoot,
   $ as CardRow,
-  C as ChipCloseButton,
+  j as ChipCloseButton,
   B as ChipWrap,
   p as Content,
   x as ContentCard,
@@ -430,33 +442,35 @@ export {
   b as Footer,
   m as FooterActions,
   g as FooterHint,
-  j as IntentChip,
+  R as IntentChip,
   l as Main,
-  G as ModalActions,
-  W as ModalBody,
-  D as ModalIcon,
+  E as ModalActions,
+  G as ModalBody,
+  q as ModalIcon,
   S as RadioCard,
   A as RadioCardText,
   c as Rail,
   f as RailItem,
   u as RailList,
-  O as RowMenuButton,
+  O as RowActionDivider,
+  D as RowActions,
+  W as RowMenuButton,
   L as RowText,
-  k as SectionHeaderWrap,
+  h as SectionHeaderWrap,
   P as SelectableRow,
   z as SideSection,
   H as SideSectionHeader,
   F as Step3Grid,
   I as Step3Main,
   T as Step3Side,
-  h as StepBadge,
-  V as SubAgentCloseButton,
-  E as SubAgentPanel,
-  Q as SubAgentPanelBody,
-  U as SubAgentPanelFooter,
-  J as SubAgentPanelHeader,
-  K as SubAgentPanelHeaderText,
-  q as SubAgentScrim,
+  k as StepBadge,
+  Y as SubAgentCloseButton,
+  K as SubAgentPanel,
+  V as SubAgentPanelBody,
+  X as SubAgentPanelFooter,
+  Q as SubAgentPanelHeader,
+  U as SubAgentPanelHeaderText,
+  J as SubAgentScrim,
   r as TopBar,
   o as TopBarSide
 };

package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tpadding: 24px;\n\tmin-height: 100%;\n\tbox-sizing: border-box;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.brand\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandTint\n\t\t\t: '#F0F0F0'};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.primaryInverse\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.content.brand\n\t\t\t: COLORS.content.placeholder};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmargin-bottom: 20px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmargin-bottom: 20px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n\tmargin-bottom: 16px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const IntentChip = styled.div.attrs({ className: 'bik-intent-chip' })`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ChipCloseButton = styled.button.attrs({\n\tclassName: 'bik-chip-close-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 300px;\n\tgap: 24px;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n`;\n\nexport const Step3Main = styled.div.attrs({ className: 'bik-step3-main' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const Step3Side = styled.div.attrs({ className: 'bik-step3-side' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 24px;\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Row kebab (⋮) trigger — popover/menu come from the shared DropdownPopover ──\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-bottom: 4px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n`;\n\n// ── Create sub-agent drawer ─────────────────────────────────────────────────\n\nexport const SubAgentScrim = styled.div.attrs({\n\tclassName: 'bik-subagent-scrim',\n})`\n\tposition: fixed;\n\tinset: 0;\n\tbackground: rgba(0, 0, 0, 0.32);\n\tz-index: 1000;\n`;\n\nexport const SubAgentPanel = styled.div.attrs({\n\tclassName: 'bik-subagent-panel',\n})`\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\theight: 100%;\n\twidth: 421px;\n\tmax-width: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: ${COLORS.surface.standard};\n\tbox-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);\n\tz-index: 1001;\n\tbox-sizing: border-box;\n`;\n\nexport const SubAgentPanelHeader = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header',\n})`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentPanelHeaderText = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n\nexport const SubAgentPanelBody = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-body',\n})`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n`;\n\nexport const SubAgentPanelFooter = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-footer',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tmin-height: 48px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentCloseButton = styled.button.attrs({\n\tclassName: 'bik-subagent-close',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\tflex-shrink: 0;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["BuilderRoot","styled","COLORS","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","RadioCardText","ChipWrap","IntentChip","ChipCloseButton","AddChipButton","Step3Grid","Step3Main","Step3Side","SideSection","SideSectionHeader","AddIconButton","SelectableRow","RowText","RowMenuButton","ModalBody","ModalIcon","ModalActions","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","SubAgentPanelBody","SubAgentPanelFooter","SubAgentCloseButton"],"mappings":"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"}
+{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tpadding: 24px;\n\tmin-height: 100%;\n\tbox-sizing: border-box;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.brand\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandTint\n\t\t\t: '#F0F0F0'};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.primaryInverse\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.content.brand\n\t\t\t: COLORS.content.placeholder};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmargin-bottom: 20px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmargin-bottom: 20px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n\tmargin-bottom: 16px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const IntentChip = styled.div.attrs({ className: 'bik-intent-chip' })`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ChipCloseButton = styled.button.attrs({\n\tclassName: 'bik-chip-close-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 300px;\n\tgap: 24px;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n`;\n\nexport const Step3Main = styled.div.attrs({ className: 'bik-step3-main' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const Step3Side = styled.div.attrs({ className: 'bik-step3-side' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 24px;\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-bottom: 4px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n`;\n\n// ── Create sub-agent drawer ─────────────────────────────────────────────────\n\nexport const SubAgentScrim = styled.div.attrs({\n\tclassName: 'bik-subagent-scrim',\n})`\n\tposition: fixed;\n\tinset: 0;\n\tbackground: rgba(0, 0, 0, 0.32);\n\tz-index: 1000;\n`;\n\nexport const SubAgentPanel = styled.div.attrs({\n\tclassName: 'bik-subagent-panel',\n})`\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\theight: 100%;\n\twidth: 421px;\n\tmax-width: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: ${COLORS.surface.standard};\n\tbox-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);\n\tz-index: 1001;\n\tbox-sizing: border-box;\n`;\n\nexport const SubAgentPanelHeader = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header',\n})`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentPanelHeaderText = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n\nexport const SubAgentPanelBody = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-body',\n})`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n`;\n\nexport const SubAgentPanelFooter = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-footer',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tmin-height: 48px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentCloseButton = styled.button.attrs({\n\tclassName: 'bik-subagent-close',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\tflex-shrink: 0;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["BuilderRoot","styled","COLORS","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","RadioCardText","ChipWrap","IntentChip","ChipCloseButton","AddChipButton","Step3Grid","Step3Main","Step3Side","SideSection","SideSectionHeader","AddIconButton","SelectableRow","RowText","RowActions","RowActionDivider","RowMenuButton","ModalBody","ModalIcon","ModalActions","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","SubAgentPanelBody","SubAgentPanelFooter","SubAgentCloseButton"],"mappings":";;AAGO,MAAMA,IAAcC,EAAO,IAAI,MAAM,EAAE,WAAW,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAM9DC,EAAO,QAAQ,QAAQ;AAAA,GAGzBC,IAASF,EAAO,IAAI,MAAM,EAAE,WAAW,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMvCC,EAAO,OAAO,OAAO;AAAA;AAAA,GAIpCE,IAAaH,EAAO,IAAI,MAAM,EAAE,WAAW,oBAAoB;AAAA;AAAA;AAAA;AAAA,GAM/DI,IAAaJ,EAAO,OAAO,MAAM,EAAE,WAAW,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAa9DC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIzBI,IAAOL,EAAO,IAAI,MAAM,EAAE,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA,GAMjDM,IAAON,EAAO,IAAI,MAAM,EAAE,WAAW,YAAY;AAAA;AAAA;AAAA,2BAGnCC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA,eAGjCA,EAAO,QAAQ,QAAQ;AAAA,GAGzBM,IAAUP,EAAO,IAAI,MAAM,EAAE,WAAW,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,eAKrDC,EAAO,QAAQ,QAAQ;AAAA,GAGzBO,IAAcR,EAAO,IAAI,MAAM,EAAE,WAAW,oBAAoB;AAAA,qBACxDC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO7BQ,IAAST,EAAO,IAAI,MAAM,EAAE,WAAW,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMzCC,EAAO,OAAO,OAAO;AAAA;AAAA,GAIjCS,IAAaV,EAAO,IAAI,MAAM,EAAE,WAAW,mBAAmB;AAAA;AAAA;AAAA;AAAA,GAM9DW,IAAgBX,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,GAQYY,IAAWZ,EAAO,IAAI,MAAM,EAAE,WAAW,iBAAiB;AAAA;AAAA;AAAA,GAK1Da,IAAWb,EAAO,OAAO,MAAM,EAAE,WAAW,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkC7Dc,IAAYd,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAa1D,CAACe,MACdA,EAAE,UAAU,aACTd,EAAO,QAAQ,QACfc,EAAE,UAAU,WACZd,EAAO,WAAW,YAClB,SAAS;AAAA,UACJ,CAACc,MACTA,EAAE,UAAU,aACTd,EAAO,QAAQ,iBACfc,EAAE,UAAU,WACZd,EAAO,QAAQ,QACfA,EAAO,QAAQ,WAAW;AAAA,GAKlBe,IAAoBhB,EAAO,IAAI,MAAM;AAAA,EACjD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,GAOYiB,IAAajB,EAAO,IAAI,MAAM,EAAE,WAAW,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9DkB,IAAgBlB,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,GAQYmB,IAAkBnB,EAAO,IAAI,MAAM;AAAA,EAC/C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,IAOG,CAACe,MAAOA,EAAE,UAAUd,EAAO,OAAO,QAAQA,EAAO,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA,eAIrD,CAACc,MAAMA,EAAE,aAAa,OAAO;AAAA,eAC7Bd,EAAO,QAAQ,QAAQ;AAAA,GAGzBmB,IAAkBpB,EAAO,SAAS,MAAM;AAAA,EACpD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQSC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKrBA,EAAO,QAAQ,WAAW;AAAA;AAAA,GAMxBoB,IAAUrB,EAAO,IAAI,MAAM,EAAE,WAAW,gBAAgB;AAAA;AAAA;AAAA;AAAA,GAMxDsB,IAAYtB,EAAO,OAAO,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASxE,CAACe,MAAOA,EAAE,WAAWd,EAAO,OAAO,QAAQA,EAAO,OAAO,OAAQ;AAAA,eACtD,CAACc,MACdA,EAAE,WAAWd,EAAO,WAAW,aAAaA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOxDsB,IAAgBvB,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,GAQYwB,IAAWxB,EAAO,IAAI,MAAM,EAAE,WAAW,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1DyB,IAAazB,EAAO,IAAI,MAAM,EAAE,WAAW,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKtDC,EAAO,OAAO,OAAO;AAAA;AAAA,eAE3BA,EAAO,QAAQ,QAAQ;AAAA,GAGzByB,IAAkB1B,EAAO,OAAO,MAAM;AAAA,EAClD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUY2B,IAAgB3B,EAAO,OAAO,MAAM;AAAA,EAChD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKqBC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAQ9B2B,IAAY5B,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU5D6B,IAAY7B,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA,GAK5D8B,IAAY9B,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA,GAM5D+B,IAAc/B,EAAO,IAAI,MAAM,EAAE,WAAW,oBAAoB;AAAA;AAAA;AAAA;AAAA,GAMhEgC,IAAoBhC,EAAO,IAAI,MAAM;AAAA,EACjD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,GAMYiC,IAAgBjC,EAAO,OAAO,MAAM;AAAA,EAChD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAaeC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIzBiC,IAAgBlC,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKoBC,EAAO,OAAO,OAAO;AAAA;AAAA,GAI7BkC,IAAUnC,EAAO,IAAI,MAAM,EAAE,WAAW,gBAAgB;AAAA;AAAA;AAAA;AAKtCA,EAAO,OAAO,MAAM;AAAA,EAClD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYM,MAAMoC,IAAapC,EAAO,IAAI,MAAM,EAAE,WAAW,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ9DqC,IAAmBrC,EAAO,KAAK,MAAM;AAAA,EACjD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,eAIcC,EAAO,OAAO,OAAO;AAAA,GAGvBqC,IAAgBtC,EAAO,OAAO,MAAM;AAAA,EAChD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAaeC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAMzBsC,IAAYvC,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS5DwC,IAAYxC,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5DyC,IAAezC,EAAO,IAAI,MAAM;AAAA,EAC5C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,GAQY0C,IAAgB1C,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,GAOY2C,IAAgB3C,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAScC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,GAMzB2C,IAAsB5C,EAAO,IAAI,MAAM;AAAA,EACnD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAM2BC,EAAO,OAAO,OAAO;AAAA;AAAA,GAIpC4C,IAA0B7C,EAAO,IAAI,MAAM;AAAA,EACvD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,GAOY8C,IAAoB9C,EAAO,IAAI,MAAM;AAAA,EACjD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUY+C,IAAsB/C,EAAO,IAAI,MAAM;AAAA,EACnD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMwBC,EAAO,OAAO,OAAO;AAAA;AAAA,GAIjC+C,IAAsBhD,EAAO,OAAO,MAAM;AAAA,EACtD,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAceC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAKRD,EAAO,IAAI,MAAM;AAAA,EAC9C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/agent-builder/components/SelectableListSection.js

@@ -1,131 +1,117 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import L from "../../../assets/icons/delete.svg.js";
-import R from "../../../assets/icons/plus.svg.js";
-import k from "../../../assets/icons/vertical_dots.svg.js";
-import { useState as B } from "react";
-import { DropdownPopover as I } from "../../dropdown/DropdownPopover/index.js";
-import { Dropdown as O } from "../../dropdown/Dropdown.js";
-import { BodySecondary as g, TitleSmall as U, BodyCaption as w } from "../../TypographyStyle.js";
-import { COLORS as n } from "../../../constants/Theme.js";
-import { SideSection as V, SideSectionHeader as W, AddIconButton as j, SelectableRow as x, RowText as z, RowMenuButton as f } from "../AgentBuilder.styled.js";
-const y = "__bik_create_new__", A = "__bik_configure__", v = "__bik_delete__", X = ({
-  title: i,
-  helper: h,
-  items: m,
-  addableOptions: d,
-  onAdd: $,
-  onRemove: _,
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import A from "../../../assets/icons/delete.svg.js";
+import v from "../../../assets/icons/edit.svg.js";
+import _ from "../../../assets/icons/plus.svg.js";
+import { useState as R } from "react";
+import { TitleSmall as C, BodyCaption as b, BodySecondary as B } from "../../TypographyStyle.js";
+import { COLORS as l } from "../../../constants/Theme.js";
+import { SideSection as E, SideSectionHeader as L, AddIconButton as k, SelectableRow as D, RowText as I, RowActions as j, RowMenuButton as g, RowActionDivider as z } from "../AgentBuilder.styled.js";
+import { Dropdown as H } from "../../dropdown/Dropdown.js";
+const y = "__bik_create_new__", J = ({
+  title: d,
+  helper: s,
+  items: h,
+  addableOptions: c,
+  onAdd: p,
+  onRemove: u,
   dataTestPrefix: t,
-  emptyText: E,
-  createOption: l,
-  onConfigure: a
+  emptyText: $,
+  createOption: n,
+  onConfigure: i
 }) => {
-  const [b, S] = B(!1), C = d.length > 0 || !!l, p = l ? [
-    ...d,
+  const [S, m] = R(!1), f = c.length > 0 || !!n, w = n ? [
+    ...c,
     {
-      label: l.label,
+      label: n.label,
       value: y,
-      searchKey: l.label,
+      searchKey: n.label,
       customComponent: /* @__PURE__ */ o(
         "div",
         {
           style: {
             width: "100%",
             textAlign: "center",
-            color: n.content.brand,
+            color: l.content.brand,
             fontFamily: "Inter",
             fontSize: 14,
             fontWeight: 600
           },
-          children: l.label
+          children: n.label
         }
       )
     }
-  ] : d, D = [
-    ...a ? [{ label: "Configure", value: A }] : [],
-    {
-      label: "Delete",
-      value: v,
-      customComponent: /* @__PURE__ */ o(g, { color: n.content.negative, children: "Delete" })
-    }
-  ];
-  return /* @__PURE__ */ s(V, { children: [
-    /* @__PURE__ */ s(W, { children: [
-      /* @__PURE__ */ o(U, { color: n.content.primary, children: i }),
-      C && /* @__PURE__ */ o(
-        j,
+  ] : c;
+  return /* @__PURE__ */ r(E, { children: [
+    /* @__PURE__ */ r(L, { children: [
+      /* @__PURE__ */ o(C, { color: l.content.primary, children: d }),
+      f && /* @__PURE__ */ o(
+        k,
         {
           "data-test": `${t}-add`,
-          onClick: () => S((e) => !e),
-          "aria-label": `Add ${i}`,
-          children: /* @__PURE__ */ o(R, { width: 20, height: 20, color: n.content.brand })
+          onClick: () => m((e) => !e),
+          "aria-label": `Add ${d}`,
+          children: /* @__PURE__ */ o(_, { width: 20, height: 20, color: l.content.brand })
         }
       )
     ] }),
-    h && /* @__PURE__ */ o(w, { color: n.content.secondary, children: h }),
-    b && p.length > 0 && /* @__PURE__ */ o(
-      O,
+    s && /* @__PURE__ */ o(b, { color: l.content.secondary, children: s }),
+    S && w.length > 0 && /* @__PURE__ */ o(
+      H,
       {
         "data-test": `${t}-dropdown`,
         size: "small",
         width: "100%",
         isSearchable: !0,
-        placeHolder: `Select ${i.toLowerCase()}`,
-        options: p,
+        placeHolder: `Select ${d.toLowerCase()}`,
+        options: w,
         onSelect: (e) => {
-          const c = (Array.isArray(e) ? e[0] : e)?.value;
-          S(!1), c && (c === y ? l?.onSelect() : $(c));
+          const a = (Array.isArray(e) ? e[0] : e)?.value;
+          m(!1), a && (a === y ? n?.onSelect() : p(a));
         }
       }
     ),
-    m.length === 0 && !b ? /* @__PURE__ */ o(w, { color: n.content.placeholder, children: E }) : m.map((e) => /* @__PURE__ */ s(
-      x,
+    h.length === 0 && !S ? /* @__PURE__ */ o(b, { color: l.content.placeholder, children: $ }) : h.map((e) => /* @__PURE__ */ r(
+      D,
       {
         "data-test": `${t}-row-${e.id}`,
         children: [
-          /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(g, { numberOfLines: 1, color: n.content.primary, children: e.label }) }),
-          a ? (
-            // Multiple actions (Configure + Delete) → kebab menu.
+          /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(B, { numberOfLines: 1, color: l.content.primary, children: e.label }) }),
+          /* @__PURE__ */ r(j, { children: [
+            i && // Configurable rows (sub-agents) get an always-visible edit icon.
             /* @__PURE__ */ o(
-              I,
+              g,
               {
-                placement: "bottom-end",
-                options: D,
-                width: "150px",
-                "data-test": `${t}-menu-${e.id}`,
-                onSelect: (r) => {
-                  const u = (Array.isArray(r) ? r[0] : r)?.value;
-                  u === A ? a?.(e.id) : u === v && _(e.id);
-                },
-                children: /* @__PURE__ */ o(f, { "aria-label": `Options for ${e.label}`, children: /* @__PURE__ */ o(
-                  k,
+                "data-test": `${t}-edit-${e.id}`,
+                "aria-label": `Edit ${e.label}`,
+                onClick: () => i(e.id),
+                children: /* @__PURE__ */ o(
+                  v,
                   {
                     width: 16,
                     height: 16,
-                    color: n.content.secondary
+                    color: l.content.secondary
                   }
-                ) })
+                )
               }
-            )
-          ) : (
-            // Delete-only → direct delete icon, no kebab/popover.
+            ),
+            i && /* @__PURE__ */ o(z, { "aria-hidden": !0 }),
             /* @__PURE__ */ o(
-              f,
+              g,
               {
                 "data-test": `${t}-delete-${e.id}`,
                 "aria-label": `Delete ${e.label}`,
-                onClick: () => _(e.id),
+                onClick: () => u(e.id),
                 children: /* @__PURE__ */ o(
-                  L,
+                  A,
                   {
                     width: 16,
                     height: 16,
-                    color: n.content.secondary
+                    color: l.content.secondary
                   }
                 )
               }
             )
-          )
+          ] })
         ]
       },
       e.id
@@ -133,6 +119,6 @@ const y = "__bik_create_new__", A = "__bik_configure__", v = "__bik_delete__", X
   ] });
 };
 export {
-  X as SelectableListSection
+  J as SelectableListSection
 };
 //# sourceMappingURL=SelectableListSection.js.map

package/dist/esm/components/agent-builder/components/SelectableListSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport VerticalDotsIcon from '@src/assets/icons/vertical_dots.svg';\nimport React, { useState } from 'react';\nimport { Dropdown, DropdownPopover } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n} from '../AgentBuilder.styled';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n/** Sentinels for the per-row kebab menu actions. */\nconst ROW_CONFIGURE_VALUE = '__bik_configure__';\nconst ROW_DELETE_VALUE = '__bik_delete__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row's kebab menu gains a \"Configure\" action (above\n\t * \"Delete\"). Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\tconst showAddButton = addableOptions.length > 0 || !!createOption;\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\t// Per-row kebab menu: Delete (red) always; Configure above it when allowed.\n\tconst rowMenuOptions: SingleOption[] = [\n\t\t...(onConfigure\n\t\t\t? [{ label: 'Configure', value: ROW_CONFIGURE_VALUE }]\n\t\t\t: []),\n\t\t{\n\t\t\tlabel: 'Delete',\n\t\t\tvalue: ROW_DELETE_VALUE,\n\t\t\tcustomComponent: (\n\t\t\t\t<BodySecondary color={COLORS.content.negative}>Delete</BodySecondary>\n\t\t\t),\n\t\t},\n\t];\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\tonClick={() => setAdding((v) => !v)}\n\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t</AddIconButton>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{adding && dropdownOptions.length > 0 && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tisSearchable\n\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t{emptyText}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\titems.map((item) => (\n\t\t\t\t\t<SelectableRow\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RowText>\n\t\t\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</RowText>\n\t\t\t\t\t\t{onConfigure ? (\n\t\t\t\t\t\t\t// Multiple actions (Configure + Delete) → kebab menu.\n\t\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\t\toptions={rowMenuOptions}\n\t\t\t\t\t\t\t\twidth=\"150px\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-menu-${item.id}`}\n\t\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\t\t\t\tif (v === ROW_CONFIGURE_VALUE) {\n\t\t\t\t\t\t\t\t\t\tonConfigure?.(item.id);\n\t\t\t\t\t\t\t\t\t} else if (v === ROW_DELETE_VALUE) {\n\t\t\t\t\t\t\t\t\t\tonRemove(item.id);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<RowMenuButton aria-label={`Options for ${item.label}`}>\n\t\t\t\t\t\t\t\t\t<VerticalDotsIcon\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t// Delete-only → direct delete icon, no kebab/popover.\n\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SelectableRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n"],"names":["CREATE_OPTION_VALUE","ROW_CONFIGURE_VALUE","ROW_DELETE_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","adding","setAdding","useState","showAddButton","dropdownOptions","jsx","COLORS","rowMenuOptions","BodySecondary","SideSection","jsxs","SideSectionHeader","TitleSmall","AddIconButton","v","PlusIcon","BodyCaption","Dropdown","opt","item","SelectableRow","RowText","DropdownPopover","RowMenuButton","VerticalDotsIcon","DeleteIcon"],"mappings":"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"}
+{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport React, { useState } from 'react';\nimport { Dropdown } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n} from '../AgentBuilder.styled';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row's kebab menu gains a \"Configure\" action (above\n\t * \"Delete\"). Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\tconst showAddButton = addableOptions.length > 0 || !!createOption;\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\tonClick={() => setAdding((v) => !v)}\n\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t</AddIconButton>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{adding && dropdownOptions.length > 0 && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tisSearchable\n\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t{emptyText}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\titems.map((item) => (\n\t\t\t\t\t<SelectableRow\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RowText>\n\t\t\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</RowText>\n\t\t\t\t\t\t<RowActions>\n\t\t\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t</RowActions>\n\t\t\t\t\t</SelectableRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","adding","setAdding","useState","showAddButton","dropdownOptions","jsx","COLORS","SideSection","jsxs","SideSectionHeader","TitleSmall","AddIconButton","v","PlusIcon","BodyCaption","Dropdown","opt","item","SelectableRow","RowText","BodySecondary","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon"],"mappings":";;;;;;;;;AA6BA,MAAMA,IAAsB,sBA4BfC,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAgBV,EAAe,SAAS,KAAK,CAAC,CAACK,GAG/CM,IAAkCN,IACrC;AAAA,IACA,GAAGL;AAAA,IACH;AAAA,MACC,OAAOK,EAAa;AAAA,MACpB,OAAOV;AAAA,MACP,WAAWU,EAAa;AAAA,MACxB,iBACC,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,WAAW;AAAA,YACX,OAAOC,EAAO,QAAQ;AAAA,YACtB,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,YAAY;AAAA,UAAA;AAAA,UAGZ,UAAAR,EAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAEF,IAEAL;AAEH,2BACEc,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAJ,EAACK,GAAA,EAAW,OAAOJ,EAAO,QAAQ,SAAU,UAAAhB,GAAM;AAAA,MACjDa,KACA,gBAAAE;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,aAAW,GAAGf,CAAc;AAAA,UAC5B,SAAS,MAAMK,EAAU,CAACW,MAAM,CAACA,CAAC;AAAA,UAClC,cAAY,OAAOtB,CAAK;AAAA,UAExB,UAAA,gBAAAe,EAACQ,KAAS,OAAO,IAAI,QAAQ,IAAI,OAAOP,EAAO,QAAQ,MAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/D,GAEF;AAAA,IAECf,KACA,gBAAAc,EAACS,GAAA,EAAY,OAAOR,EAAO,QAAQ,WAAY,UAAAf,GAAO;AAAA,IAGtDS,KAAUI,EAAgB,SAAS,KACnC,gBAAAC;AAAA,MAACU;AAAA,MAAA;AAAA,QACA,aAAW,GAAGnB,CAAc;AAAA,QAC5B,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAY;AAAA,QACZ,aAAa,UAAUN,EAAM,YAAA,CAAa;AAAA,QAC1C,SAASc;AAAA,QACT,UAAU,CAACY,MAAQ;AAElB,gBAAMJ,KADS,MAAM,QAAQI,CAAG,IAAIA,EAAI,CAAC,IAAIA,IACT;AAEpC,UADAf,EAAU,EAAK,GACVW,MAGDA,MAAMxB,IACTU,GAAc,SAAA,IAEdJ,EAAMkB,CAAC;AAAA,QAET;AAAA,MAAA;AAAA,IAAA;AAAA,IAIDpB,EAAM,WAAW,KAAK,CAACQ,sBACtBc,GAAA,EAAY,OAAOR,EAAO,QAAQ,aACjC,UAAAT,EAAA,CACF,IAEAL,EAAM,IAAI,CAACyB,MACV,gBAAAT;AAAA,MAACU;AAAA,MAAA;AAAA,QAEA,aAAW,GAAGtB,CAAc,QAAQqB,EAAK,EAAE;AAAA,QAE3C,UAAA;AAAA,UAAA,gBAAAZ,EAACc,GAAA,EACA,UAAA,gBAAAd,EAACe,GAAA,EAAc,eAAe,GAAG,OAAOd,EAAO,QAAQ,SACrD,UAAAW,EAAK,MAAA,CACP,GACD;AAAA,4BACCI,GAAA,EACC,UAAA;AAAA,YAAAtB;AAAA,YAEA,gBAAAM;AAAA,cAACiB;AAAA,cAAA;AAAA,gBACA,aAAW,GAAG1B,CAAc,SAASqB,EAAK,EAAE;AAAA,gBAC5C,cAAY,QAAQA,EAAK,KAAK;AAAA,gBAC9B,SAAS,MAAMlB,EAAYkB,EAAK,EAAE;AAAA,gBAElC,UAAA,gBAAAZ;AAAA,kBAACkB;AAAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,OAAOjB,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACvB;AAAA,YAAA;AAAA,YAGDP,KAAe,gBAAAM,EAACmB,GAAA,EAAiB,eAAW,GAAA,CAAC;AAAA,YAC9C,gBAAAnB;AAAA,cAACiB;AAAA,cAAA;AAAA,gBACA,aAAW,GAAG1B,CAAc,WAAWqB,EAAK,EAAE;AAAA,gBAC9C,cAAY,UAAUA,EAAK,KAAK;AAAA,gBAChC,SAAS,MAAMtB,EAASsB,EAAK,EAAE;AAAA,gBAE/B,UAAA,gBAAAZ;AAAA,kBAACoB;AAAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,OAAOnB,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACvB;AAAA,YAAA;AAAA,UACD,EAAA,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,MAnCKW,EAAK;AAAA,IAAA,CAqCX;AAAA,EAAA,GAEH;AAEF;"}