@bikdotai/bik-component-library 0.0.841-beta.0 → 0.0.841-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor } from '@src/editor';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\n\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. */\n\tonSave: (config: RestApiToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: RestApiToolConfig;\n\t/** Optional \"Improve with AI\" for the instructions field. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n/**\n * Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [url, setUrl] = useState(initial?.url ?? '');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () =>\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\tconst removeHeader = (i: number) =>\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\n\tconst canSave = name.trim().length > 0 && url.trim().length > 0;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() || h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Configure the request, then test it with a sample response.\"\n\t\t\t\t/>\n\t\t\t}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'restapi-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'restapi-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\tlabelText=\"Request URL\"\n\t\t\t\t\tlabelTextBold\n\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\ttype=\"url\"\n\t\t\t\t\tvalue={url}\n\t\t\t\t\tonChangeText={setUrl}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t<HeaderRow key={i} data-test={`restapi-header-${i}`}>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Accept\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Value\"\n\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\nconst HeaderRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","name","setName","useState","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","patchHeader","i","patch","prev","h","idx","addHeader","removeHeader","_","canSave","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","config","result","Input","ToolInstructionsField","FieldBlock","TitleSmall","COLORS","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}
+{"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor } from '@src/editor';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\n\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. */\n\tonSave: (config: RestApiToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: RestApiToolConfig;\n\t/** Optional \"Improve with AI\" for the instructions field. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n\t/** Names of the OTHER tools — a new tool can't reuse one of these. */\n\texistingNames?: string[];\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n/**\n * Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n\texistingNames = [],\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\t// New tools start with the scheme pre-filled so the user only types the host.\n\tconst [url, setUrl] = useState(initial?.url ?? 'https://');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () =>\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\tconst removeHeader = (i: number) =>\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two tools can't share a name (the LLM references them by it).\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 && url.trim().length > 0 && !isDuplicateName;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() || h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Define the request and a sample response for the agent to reference.\"\n\t\t\t\t/>\n\t\t\t}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'restapi-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'restapi-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter action name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\terrorMessage={\n\t\t\t\t\tisDuplicateName ? 'A tool with this name already exists' : undefined\n\t\t\t\t}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\tlabelText=\"Request URL\"\n\t\t\t\t\tlabelTextBold\n\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\ttype=\"url\"\n\t\t\t\t\tvalue={url}\n\t\t\t\t\tonChangeText={setUrl}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tdropdownWidth=\"399px\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t<HeaderRow key={i} data-test={`restapi-header-${i}`}>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter value\"\n\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\nconst HeaderRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","existingNames","name","setName","useState","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","patchHeader","i","patch","prev","h","idx","addHeader","removeHeader","_","nameTrimmed","isDuplicateName","n","canSave","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","config","result","Input","ToolInstructionsField","FieldBlock","TitleSmall","COLORS","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}

package/dist/esm/components/agent-builder/components/SelectableListSection.d.ts

@@ -8,12 +8,19 @@ export interface SelectableItem {
     label: string;
     /** Leading brand glyph (e.g. a tool's source icon). */
     icon?: SourceIcon;
+    /**
+     * True when the tool touches customer-private data and the agent must verify
+     * the customer first (backend `auth_required`). Shows a shield glyph on the row.
+     */
+    authRequired?: boolean;
     /**
      * When set, this row shows an edit (Configure) icon that calls this instead of
      * the section-level `onConfigure`. Use for rows that open their own drawer
-     * (e.g. a configured Rest API / email-handover tool).
+     * (e.g. a configured Rest API / email-handover tool). A pending promise
+     * disables the row's edit button until it settles (e.g. while the consumer
+     * fetches the sub-agent's data before opening its drawer).
      */
-    onConfigure?: () => void;
+    onConfigure?: () => void | Promise<void>;
 }
 /** A tool source for the empty-state picker (Tools): a button → its searchable list. */
 export interface SourceGroup {
@@ -53,9 +60,10 @@ interface SelectableListSectionProps {
     };
     /**
      * When provided, each row shows an edit (Configure) icon next to Delete.
-     * Omit for tools (Delete only).
+     * Omit for tools (Delete only). A pending promise disables the edit buttons
+     * until it settles.
      */
-    onConfigure?: (id: string) => void;
+    onConfigure?: (id: string) => void | Promise<void>;
     /**
      * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a
      * button per source; clicking one reveals a searchable dropdown of just that
@@ -89,6 +97,12 @@ interface SelectableListSectionProps {
         noun: string;
         zIndex?: number;
     };
+    /**
+     * Open the `@` picker popover above the trigger instead of below. Use inside
+     * a drawer where the section sits near the bottom — opening downward
+     * stretches the drawer and leaves a gap.
+     */
+    pickerOpensUp?: boolean;
 }
 export declare const SelectableListSection: React.FC<SelectableListSectionProps>;
 export {};

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

@@ -1,82 +1,101 @@
-import { jsx as n, jsxs as d, Fragment as W } from "react/jsx-runtime";
-import oe from "../../../assets/icons/delete.svg.js";
-import te from "../../../assets/icons/edit.svg.js";
-import F from "../../../assets/icons/plus.svg.js";
-import { useState as b, useRef as K, useEffect as le } from "react";
-import E from "styled-components";
-import { TitleSmall as re, BodyCaption as U, BodySecondary as m } from "../../TypographyStyle.js";
+import { jsx as n, jsxs as d, Fragment as U } from "react/jsx-runtime";
+import ie from "../../../assets/icons/delete.svg.js";
+import de from "../../../assets/icons/edit.svg.js";
+import J from "../../../assets/icons/plus.svg.js";
+import { useState as m, useRef as Q, useEffect as se } from "react";
+import I from "styled-components";
+import { TitleSmall as ae, BodyCaption as $, BodySecondary as A } from "../../TypographyStyle.js";
 import { COLORS as i } from "../../../constants/Theme.js";
-import { SideSection as ce, SideSectionHeader as ie, AddIconButton as de, SourceButtonRow as se, SourceButton as V, SelectableRow as ae, RowText as ue, RowActions as he, RowMenuButton as q, RowActionDivider as fe } from "../AgentBuilder.styled.js";
-import { renderSourceIcon as A, SOURCE_ICONS as me } from "../utils/sourceIcons.js";
-import { MentionPicker as Se } from "./MentionPicker.js";
-import { Dropdown as J } from "../../dropdown/Dropdown.js";
+import { SideSection as ue, SideSectionHeader as he, AddIconButton as fe, SourceButtonRow as pe, SourceButton as X, SelectableRow as me, RowText as Se, RowActions as ye, RowMenuButton as Y, RowActionDivider as be } from "../AgentBuilder.styled.js";
+import { renderSourceIcon as R, SOURCE_ICONS as ve } from "../utils/sourceIcons.js";
+import { MentionPicker as $e } from "./MentionPicker.js";
+import { Dropdown as Z } from "../../dropdown/Dropdown.js";
 import { unwrapDropdownValue as P } from "../../dropdown/utils.js";
-import { Button as pe } from "../../button/Button.js";
+import { Button as ge } from "../../button/Button.js";
 import { DeleteConfirmationModal as we } from "../../states-modal/DeleteConfirmationModal.js";
-const Q = "__bik_create_new__", He = ({
-  title: h,
+import { Tooltip as g } from "../../tooltips/Tooltip.js";
+import Ce from "../../../icons/Informational/Common UI/Shield.js";
+const G = "__bik_create_new__", Ve = ({
+  title: s,
   helper: _,
-  items: s,
+  items: u,
   addableOptions: S,
-  onAdd: C,
-  onRemove: R,
-  dataTestPrefix: l,
-  emptyText: Y,
-  createOption: t,
-  onConfigure: D,
-  sourceGroups: a,
-  mentionItems: I,
-  actionSources: p,
-  confirmDelete: f
+  onAdd: w,
+  onRemove: D,
+  dataTestPrefix: t,
+  emptyText: O,
+  createOption: l,
+  onConfigure: B,
+  sourceGroups: h,
+  mentionItems: L,
+  actionSources: y,
+  confirmDelete: p,
+  pickerOpensUp: z
 }) => {
-  const [u, r] = b(!1), [B, $] = b(null), [Z, g] = b(null), w = !!a && a.length > 0, y = a?.find((e) => e.source === Z), c = I !== void 0, L = K(null), z = K(null), [v, x] = b(null);
-  le(() => {
-    if (!c || !u)
+  const [f, r] = m(!1), [x, C] = m(null), [H, M] = m(null), [ee, k] = m(null), b = !!h && h.length > 0, E = h?.find((e) => e.source === ee), c = L !== void 0, j = Q(null), q = Q(null), [v, N] = m(null);
+  se(() => {
+    if (!c || !f)
       return;
-    const e = (k) => {
-      const N = k.target;
-      !L.current?.contains(N) && !z.current?.contains(N) && r(!1);
-    }, o = (k) => {
-      k.key === "Escape" && r(!1);
+    const e = (a) => {
+      const V = a.target;
+      !j.current?.contains(V) && !q.current?.contains(V) && r(!1);
+    }, o = (a) => {
+      a.key === "Escape" && r(!1);
     };
     return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
       document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
     };
-  }, [c, u]);
-  const G = w ? c || s.length > 0 : c || S.length > 0 || !!t && s.length > 0, T = s.length === 0 && !!t && !w && !c, H = !!p && p.length > 0, O = (w || H) && s.length === 0, ee = () => {
+  }, [c, f]);
+  const ne = b ? c || u.length > 0 : c || S.length > 0 || !!l && u.length > 0, oe = u.length === 0 && !!l && !b && !c, W = !!y && y.length > 0, te = (b || W) && u.length === 0, le = () => {
     if (c) {
-      x(null), r((e) => !e);
+      N(null), r((e) => !e);
       return;
     }
-    if (w) {
-      g(null), r((e) => !e);
+    if (b) {
+      k(null), r((e) => !e);
       return;
     }
-    if (S.length === 0 && t) {
-      t.onSelect();
+    if (S.length === 0 && l) {
+      l.onSelect();
       return;
     }
     r((e) => !e);
-  }, ne = () => s.map((e) => {
-    const o = e.onConfigure ?? (D ? () => D(e.id) : void 0);
+  }, re = (e, o) => {
+    if (H)
+      return;
+    const a = o();
+    a && typeof a.then == "function" && (M(e), a.finally(() => M(null)));
+  }, ce = () => u.map((e) => {
+    const o = e.onConfigure ?? (B ? () => B(e.id) : void 0);
     return /* @__PURE__ */ d(
-      ae,
+      me,
       {
-        "data-test": `${l}-row-${e.id}`,
+        "data-test": `${t}-row-${e.id}`,
         children: [
-          A(e.icon),
-          /* @__PURE__ */ n(ue, { children: /* @__PURE__ */ n(m, { numberOfLines: 1, color: i.content.primary, children: e.label }) }),
-          /* @__PURE__ */ d(he, { children: [
+          R(e.icon),
+          e.authRequired && // Order tools touch customer-private data — the shield flags that
+          // this agent must verify the customer before the tool can run.
+          /* @__PURE__ */ n(g, { body: "Requires customer verification", placement: "top", children: /* @__PURE__ */ n(
+            "span",
+            {
+              "data-test": `${t}-auth-${e.id}`,
+              style: { display: "inline-flex", flexShrink: 0 },
+              children: /* @__PURE__ */ n(Ce, { size: 16, color: i.content.secondary })
+            }
+          ) }),
+          /* @__PURE__ */ n(g, { body: e.label, placement: "top", children: /* @__PURE__ */ n(Se, { children: /* @__PURE__ */ n(A, { numberOfLines: 1, color: i.content.primary, children: e.label }) }) }),
+          /* @__PURE__ */ d(ye, { children: [
             o && // Configurable rows (sub-agents, Rest API / email tools) get an
             // always-visible edit icon.
-            /* @__PURE__ */ n(
-              q,
+            /* @__PURE__ */ n(g, { body: "Edit", placement: "top", children: /* @__PURE__ */ n(
+              Y,
               {
-                "data-test": `${l}-edit-${e.id}`,
+                "data-test": `${t}-edit-${e.id}`,
                 "aria-label": `Edit ${e.label}`,
-                onClick: o,
+                disabled: H !== null,
+                onClick: () => re(e.id, o),
                 children: /* @__PURE__ */ n(
-                  te,
+                  de,
                   {
                     width: 16,
                     height: 16,
@@ -84,16 +103,16 @@ const Q = "__bik_create_new__", He = ({
                   }
                 )
               }
-            ),
-            o && /* @__PURE__ */ n(fe, { "aria-hidden": !0 }),
-            /* @__PURE__ */ n(
-              q,
+            ) }),
+            o && /* @__PURE__ */ n(be, { "aria-hidden": !0 }),
+            /* @__PURE__ */ n(g, { body: "Delete", placement: "top", children: /* @__PURE__ */ n(
+              Y,
               {
-                "data-test": `${l}-delete-${e.id}`,
+                "data-test": `${t}-delete-${e.id}`,
                 "aria-label": `Delete ${e.label}`,
-                onClick: () => f ? $(e.id) : R(e.id),
+                onClick: () => p ? C(e.id) : D(e.id),
                 children: /* @__PURE__ */ n(
-                  oe,
+                  ie,
                   {
                     width: 16,
                     height: 16,
@@ -101,18 +120,18 @@ const Q = "__bik_create_new__", He = ({
                   }
                 )
               }
-            )
+            ) })
           ] })
         ]
       },
       e.id
     );
-  }), M = t ? [
+  }), F = l ? [
     ...S,
     {
-      label: t.label,
-      value: Q,
-      searchKey: t.label,
+      label: l.label,
+      value: G,
+      searchKey: l.label,
       customComponent: /* @__PURE__ */ n(
         "div",
         {
@@ -124,179 +143,196 @@ const Q = "__bik_create_new__", He = ({
             fontSize: 14,
             fontWeight: 600
           },
-          children: t.label
+          children: l.label
         }
       )
     }
-  ] : S, j = c ? /* @__PURE__ */ n(
-    Se,
+  ] : S, K = c ? /* @__PURE__ */ n(
+    $e,
     {
-      items: I ?? [],
+      items: L ?? [],
       query: "",
       activeIndex: 0,
       initialSource: v ?? void 0,
       onSelect: (e) => {
-        r(!1), C(String(e.id));
+        r(!1), w(String(e.id));
       },
       onClose: () => r(!1),
-      onCreateSubAgent: t ? () => {
-        r(!1), t.onSelect();
+      onCreateSubAgent: l ? () => {
+        r(!1), l.onSelect();
       } : void 0,
-      toolActions: H ? p?.map((e) => ({
+      toolActions: W ? y?.map((e) => ({
         ...e,
         onSelect: () => {
           r(!1), e.onSelect();
         }
       })) : void 0,
       integrationStatus: Object.fromEntries(
-        (a ?? []).filter((e) => e.connected !== void 0).map((e) => [e.source, e.connected])
+        (h ?? []).filter((e) => e.connected !== void 0).map((e) => [e.source, e.connected])
       ),
       onConnectIntegration: (e) => {
-        r(!1), a?.find((o) => o.source === e)?.onConnect?.();
+        r(!1), h?.find((o) => o.source === e)?.onConnect?.();
       }
     },
     v ?? "__root__"
   ) : null;
-  return /* @__PURE__ */ d(ce, { children: [
-    /* @__PURE__ */ d(ie, { children: [
-      /* @__PURE__ */ n(re, { color: i.content.primary, children: h }),
-      G && /* @__PURE__ */ d(ve, { ref: L, children: [
+  return /* @__PURE__ */ d(ue, { children: [
+    /* @__PURE__ */ d(he, { children: [
+      /* @__PURE__ */ n(ae, { color: i.content.primary, children: s }),
+      ne && /* @__PURE__ */ d(ke, { ref: j, children: [
         /* @__PURE__ */ n(
-          de,
+          fe,
           {
-            "data-test": `${l}-add`,
-            onClick: ee,
-            "aria-label": `Add ${h}`,
-            children: /* @__PURE__ */ n(F, { width: 20, height: 20, color: i.content.brand })
+            "data-test": `${t}-add`,
+            onClick: le,
+            "aria-label": `Add ${s}`,
+            children: /* @__PURE__ */ n(J, { width: 16, height: 16, color: i.content.primary })
           }
         ),
-        c && u && v === null && /* @__PURE__ */ n(X, { "data-test": `${l}-picker`, children: j })
+        c && f && v === null && /* @__PURE__ */ n(
+          T,
+          {
+            $up: z,
+            "data-test": `${t}-picker`,
+            children: K
+          }
+        )
       ] })
     ] }),
-    _ && /* @__PURE__ */ n(U, { color: i.content.secondary, children: _ }),
-    O ? /* @__PURE__ */ d(be, { ref: c ? z : void 0, children: [
-      /* @__PURE__ */ d(se, { "data-test": `${l}-sources`, children: [
-        a?.map((e) => /* @__PURE__ */ d(
-          V,
+    _ && /* @__PURE__ */ n($, { color: i.content.secondary, children: _ }),
+    te ? /* @__PURE__ */ d(Ee, { ref: c ? q : void 0, children: [
+      /* @__PURE__ */ d(pe, { "data-test": `${t}-sources`, children: [
+        h?.map((e) => /* @__PURE__ */ d(
+          X,
           {
             type: "button",
-            "data-test": `${l}-source-${e.source}`,
+            "data-test": `${t}-source-${e.source}`,
             onClick: () => {
               if (e.connected === !1) {
                 e.onConnect?.();
                 return;
               }
               if (c) {
-                x(e.source), r(!0);
+                N(e.source), r(!0);
                 return;
               }
-              g(e.source);
+              k(e.source);
             },
             children: [
-              A(me[e.source], -4),
-              /* @__PURE__ */ n(m, { color: i.content.primary, children: e.label }),
+              R(ve[e.source], -4),
+              /* @__PURE__ */ n($, { color: i.content.primary, children: e.label }),
               e.connected === !1 && // Not connected → show "Connect" upfront (consistent with
               // the `@` picker); clicking runs the connect flow.
-              /* @__PURE__ */ n(m, { color: i.content.brand, children: "Connect" })
+              /* @__PURE__ */ n(A, { color: i.content.brand, children: "Connect" })
             ]
           },
           e.source
         )),
-        p?.map((e) => /* @__PURE__ */ d(
-          V,
+        y?.map((e) => /* @__PURE__ */ d(
+          X,
           {
             type: "button",
-            "data-test": `${l}-action-${e.source}`,
-            onClick: e.connected === !1 ? () => e.onConnect?.() : e.onSelect,
+            "data-test": `${t}-action-${e.source}`,
+            onClick: e.connected === !1 ? () => e.onConnect?.() : () => {
+              r(!1), e.onSelect();
+            },
             children: [
-              A(e.icon, -4),
-              /* @__PURE__ */ n(m, { color: i.content.primary, children: e.label }),
+              R(e.icon, -4),
+              /* @__PURE__ */ n($, { color: i.content.primary, children: e.label }),
               e.connected === !1 && // Not connected → "Connect" upfront (consistent with the
               // source buttons and the `@` picker).
-              /* @__PURE__ */ n(m, { color: i.content.brand, children: "Connect" })
+              /* @__PURE__ */ n(A, { color: i.content.brand, children: "Connect" })
             ]
           },
           e.source
         ))
       ] }),
-      c && u && v !== null && /* @__PURE__ */ n(X, { $align: "left", "data-test": `${l}-picker`, children: j }),
-      !c && y && /* @__PURE__ */ n(
-        J,
+      c && f && v !== null && /* @__PURE__ */ n(
+        T,
+        {
+          $align: "left",
+          $up: z,
+          "data-test": `${t}-picker`,
+          children: K
+        }
+      ),
+      !c && E && /* @__PURE__ */ n(
+        Z,
         {
-          "data-test": `${l}-dropdown`,
+          "data-test": `${t}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Search ${y.label} tools`,
-          options: y.options,
+          placeHolder: `Search ${E.label} tools`,
+          options: E.options,
           onSelect: (e) => {
             const o = P(e);
-            g(null), r(!1), o && C(o);
+            k(null), r(!1), o && w(o);
           }
         }
       )
-    ] }) : /* @__PURE__ */ d(W, { children: [
-      !c && u && M.length > 0 && /* @__PURE__ */ n(
-        J,
+    ] }) : /* @__PURE__ */ d(U, { children: [
+      !c && f && F.length > 0 && /* @__PURE__ */ n(
+        Z,
         {
-          "data-test": `${l}-dropdown`,
+          "data-test": `${t}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Select ${h.toLowerCase()}`,
-          options: M,
+          placeHolder: `Select ${s.toLowerCase()}`,
+          options: F,
           onSelect: (e) => {
             const o = P(e);
-            r(!1), o && (o === Q ? t?.onSelect() : C(o));
+            r(!1), o && (o === G ? l?.onSelect() : w(o));
           }
         }
       ),
-      s.length === 0 && !u ? /* @__PURE__ */ d(W, { children: [
-        /* @__PURE__ */ n(U, { color: i.content.placeholder, children: Y }),
-        T && t && /* @__PURE__ */ n(
-          pe,
+      u.length === 0 && !f ? /* @__PURE__ */ d(U, { children: [
+        /* @__PURE__ */ n($, { color: i.content.placeholder, children: O }),
+        oe && l && /* @__PURE__ */ n(
+          ge,
           {
-            "data-test": `${l}-create`,
+            "data-test": `${t}-create`,
             buttonType: "secondary",
             size: "small",
             matchParentWidth: !0,
-            LeadingIcon: F,
-            buttonText: t.label,
-            onClick: t.onSelect
+            LeadingIcon: J,
+            buttonText: l.label,
+            onClick: l.onSelect
           }
         )
-      ] }) : ne()
+      ] }) : ce()
     ] }),
-    f && B && /* @__PURE__ */ n(
+    p && x && /* @__PURE__ */ n(
       we,
       {
-        "data-test": `${l}-delete-confirm`,
-        header: `Delete this ${f.noun}?`,
-        subHeader: `Deleting this ${f.noun} will also remove it from your instructions, wherever it's referenced.`,
+        "data-test": `${t}-delete-confirm`,
+        header: `Delete this ${p.noun}?`,
+        subHeader: `Deleting this ${p.noun} will also remove it from your instructions, wherever it's referenced.`,
         confirmationText: "Delete",
-        zIndex: f.zIndex,
+        zIndex: p.zIndex,
         onDeleteConfirmed: () => {
-          R(B), $(null);
+          D(x), C(null);
         },
-        onCancelClicked: () => $(null)
+        onCancelClicked: () => C(null)
       }
     )
   ] });
-}, ve = E.div`
+}, ke = I.div`
 	position: relative;
 	display: flex;
-`, be = E.div`
+`, Ee = I.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, X = E.div`
+`, T = I.div`
 	position: absolute;
-	top: calc(100% + 4px);
-	${(h) => h.$align === "left" ? "left: 0;" : "right: 0;"}
+	${(s) => s.$up ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
+	${(s) => s.$align === "left" ? "left: 0;" : "right: 0;"}
 	z-index: 30;
 `;
 export {
-  He as SelectableListSection
+  Ve as SelectableListSection
 };
 //# sourceMappingURL=SelectableListSection.js.map