@persona/design-system 0.8.0 → 0.8.1

package/dist/components/SmartTextInput/index.mjs

@@ -0,0 +1,2035 @@
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { i as Paragraph } from "../../Text-BdluS7Fy.mjs";
+import { rotate } from "../../variables/keyframes.mjs";
+import { JsonSchemaStringifiableTypes, getNonNullableRefSchema, getNonNullableType, isFunctionSchema, isJsonSchemaArray, isSchemaTypeAllowed } from "../../lib/jsonSchema.mjs";
+import { isCreatableReceiverSchema, isNoArgCodeChainFunction } from "../../lib/customFunctionSchema.mjs";
+import { isASTCustomFunctionNode, isAnyASTFunctionNode, isRealASTFunctionParamType } from "./parser/method-chain/types.mjs";
+import { _ as methodChainToString, l as isEmpty, n as MethodChainNodeTypes, w as assertNever } from "../../methodChain-L_h8Z8Bx.mjs";
+import { normalizeChain, normalizeFunctionParam } from "../../lib/methodChainNormalize.mjs";
+import { getFunctionSchemaForNode, getSchemaForFieldPath } from "../../lib/schemaOptions.mjs";
+import { n as useChain, r as useChainSchema } from "../../useChain-CKqYGdx4.mjs";
+import { Z_INDICES } from "../../lib/zindex.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
+import "../../variables/effect.mjs";
+import { n as Stack, t as HStack } from "../../Stack-CEPzs4Pb.mjs";
+import { n as Button } from "../../IconButton-BHFCjvzs.mjs";
+import { n as useFormField } from "../../useFormField-BAmkdxtA.mjs";
+import Input_default from "../Input/index.mjs";
+import { n as ErrorText } from "../../FormControl-bDxFF0hl.mjs";
+import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-DbcqNcx2.mjs";
+import PillType from "./PillType.mjs";
+import { ErrorMessageByKind, NodeType, isASTChainNode, isASTContainerNode, isMethodChainNode } from "./parser/smart-text/types.mjs";
+import { parse as peg$parse } from "./parser/smart-text/parser.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { LoaderIcon } from "@persona/icons";
+import { ArrowLeftIcon as ArrowLeftIcon$1 } from "@persona/icons/12px";
+import { FocusScope, mergeProps, useComboBox, useDialog, useFocusManager, useInteractOutside, useListBox, useOption, usePopover } from "react-aria";
+import { Item, useComboBoxState } from "react-stately";
+import { createPortal } from "react-dom";
+//#region components/SmartTextInput/parser/tree.ts
+function getChildren(node) {
+	return node.children ?? [];
+}
+function findAll(node, type, acc = []) {
+	if (node.type === type) acc.push(node);
+	getChildren(node).forEach((c) => findAll(c, type, acc));
+	return acc;
+}
+function resolve(node, charIdx) {
+	if (charIdx < node.start || charIdx >= Math.max(node.end, node.start + 1)) return null;
+	const children = getChildren(node);
+	for (let i = 0; i < children.length; i++) {
+		const hit = resolve(children[i], charIdx);
+		if (hit) return hit;
+	}
+	return node;
+}
+function findAncestor(root, target, pred) {
+	function walk(n, ancestors) {
+		if (n === target) {
+			for (let i = ancestors.length - 1; i >= 0; i--) if (pred(ancestors[i])) return [true, ancestors[i]];
+			return [true, null];
+		}
+		const children = getChildren(n);
+		for (let j = 0; j < children.length; j++) {
+			const [found, result] = walk(children[j], ancestors.concat([n]));
+			if (found) return [true, result];
+		}
+		return [false, null];
+	}
+	const [, result] = walk(root, []);
+	return result;
+}
+function enclosingExpr(root, node) {
+	return findAncestor(root, node, (a) => a.type === NodeType.Handlebars || a.type === NodeType.Code);
+}
+//#endregion
+//#region components/SmartTextInput/HighlightedText.tsx
+const LoadingIndicator = styled(LoaderIcon)`
+  color: ${Color.BorderIconSecondary};
+  animation: ${rotate} linear 1s infinite;
+`;
+const LoadingContainer = styled.div`
+  z-index: 4;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  padding: ${Spacing[2]} ${Spacing[3]};
+  background: linear-gradient(to right, ${Color.BackgroundPrimary}00, ${Color.BackgroundSecondary}FF);
+`;
+const OverlayContainer = styled.div`
+  position: relative;
+  background: ${Color.BackgroundPrimary};
+  overflow: hidden;
+  width: 100%;
+
+  border-radius: ${BorderRadius.Md};
+
+  &:focus-within,
+  &[data-input-is-focused='true'] {
+    ${focusStyle}
+  }
+
+  ${({ $variant }) => $variant === "table-cell" && css`
+      background: transparent;
+      outline: none !important;
+      border-radius: 0;
+    `};
+`;
+const Overlay = styled.div`
+  ${Typography.TextMono}
+
+  line-height: 1;
+
+  position: absolute;
+  inset: 0;
+  /* 8px + 12px with 1px buffer to account for underlying input border. Needs to be margin in X
+     seemingly for overflow to work correctly. */
+  margin: 0 13px;
+  padding: 9px 0;
+  pointer-events: none;
+  white-space: pre;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  ${({ $size }) => $size === "sm" && css`
+      font-size: 12px;
+      margin: 0 9px;
+    `};
+  ${({ $variant }) => $variant === "table-cell" && css`
+      margin: 0;
+      padding: 0;
+    `};
+`;
+const MonoSpan = styled.span`
+  color: ${({ $style }) => {
+	switch ($style) {
+		case "schemaError":
+		case "syntaxError": return Color.TextDanger;
+		case "token":
+		case "hoverableToken": return Color.TextActive;
+	}
+}};
+
+  border-radius: 0;
+  text-decoration: ${({ $style }) => $style === "syntaxError" ? `underline wavy ${Color.TextDanger}` : "none"};
+  text-decoration-skip-ink: none;
+
+  ${({ $style, $interactive }) => {
+	if (!$interactive) return;
+	switch ($style) {
+		case "schemaError": return css`
+          position: relative;
+          pointer-events: auto;
+          cursor: pointer;
+
+          &::after {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            background-color: ${Color.CoreRed600};
+            opacity: 0.1;
+            pointer-events: none;
+          }
+          &:hover::after {
+            opacity: 0.2;
+          }
+        `;
+		case "hoverable":
+		case "hoverableToken": return css`
+          position: relative;
+          pointer-events: auto;
+          cursor: pointer;
+
+          &:hover::after {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            background-color: ${Color.CoreBlue600};
+            opacity: 0.1;
+            pointer-events: none;
+          }
+        `;
+	}
+}};
+`;
+/**
+* Returns {str, style} segments covering the entire value, based on AST node boundaries.
+* - 'token': delimiter nodes ({{, }}, ${, }), dot nodes
+* - 'hoverableToken': first link of any chain (single-link or multi-segment)
+* - 'hoverable': non-first links of multi-segment chains
+* - 'schemaError': first invalid link in each chain, shown when unfocused
+* - 'syntaxError': error nodes with actual content
+* - 'none': everything else
+*/
+function buildHighlights(tree, value, focused, schemaValidator) {
+	const len = value.length;
+	const spanMap = /* @__PURE__ */ new Map();
+	function setSpan(start, end, style) {
+		if (start < end) spanMap.set(start, {
+			start,
+			end,
+			style
+		});
+	}
+	for (const type of [
+		NodeType.HBOpen,
+		NodeType.HBClose,
+		NodeType.CodeOpen,
+		NodeType.CodeClose,
+		"dot"
+	]) findAll(tree, type).forEach((n) => setSpan(n.start, n.end, "token"));
+	findAll(tree, NodeType.Error).forEach((e) => {
+		const node = e;
+		if (e.start >= e.end && !node.wip) return;
+		if (node.wip) {
+			if (!focused) setSpan(e.end - 1, e.end, "syntaxError");
+		} else setSpan(e.start, e.end, "syntaxError");
+	});
+	const paramChainStarts = /* @__PURE__ */ new Set();
+	findAll(tree, NodeType.Chain).forEach((chain) => {
+		if (!isASTChainNode(chain)) return;
+		for (const link of chain.children) if (link.type === NodeType.Function || link.type === NodeType.CustomFunction) {
+			for (const child of link.children) if (child.type === NodeType.Chain) paramChainStarts.add(child.start);
+		}
+	});
+	findAll(tree, NodeType.Chain).forEach((chain) => {
+		if (!isASTChainNode(chain)) return;
+		if (paramChainStarts.has(chain.start)) return;
+		if (!chain.children.some((l) => l.type === NodeType.Dot)) {
+			if (chain.children.some((l) => l.type === NodeType.Error && !l.wip)) return;
+		}
+		chain.children.forEach((link, idx) => {
+			if (link.type === NodeType.Identifier || link.type === NodeType.Function || link.type === NodeType.CustomFunction) {
+				const style = idx === 0 ? "hoverableToken" : "hoverable";
+				if (link.type === NodeType.Function || link.type === NodeType.CustomFunction) {
+					const nameEnd = link.type === NodeType.CustomFunction ? link.start + 1 + link.name.length : link.start + link.name.length;
+					setSpan(link.start, nameEnd, style);
+					if (link.children.some((child) => child.type === NodeType.ParenClose)) {
+						for (const child of link.children) if (child.type !== NodeType.Error && child.type !== NodeType.ParenOpen && child.type !== NodeType.ParenClose) setSpan(child.start, child.end, style);
+					}
+				} else setSpan(link.start, link.end, style);
+			}
+		});
+	});
+	if (!focused) findAll(tree, NodeType.Handlebars).forEach((node) => {
+		const children = node.children ?? [];
+		const closeNode = children.find((c) => c.type === NodeType.HBClose);
+		const hasChain = children.some((c) => c.type === NodeType.Chain);
+		if (closeNode && !hasChain) setSpan(closeNode.start, closeNode.end, "syntaxError");
+	});
+	if (!focused) {
+		const topLevelChains = findAll(tree, NodeType.Chain).filter(isASTChainNode).filter((c) => !paramChainStarts.has(c.start));
+		for (const chain of topLevelChains) {
+			const enclosingNode = enclosingExpr(tree, chain);
+			const chainError = schemaValidator(enclosingNode?.type === NodeType.Handlebars && !enclosingNode.children?.some((c) => c.type === NodeType.Error && c.kind === "unclosedHandlebars") ? {
+				type: NodeType.Handlebars,
+				start: chain.start,
+				end: chain.end,
+				children: [chain]
+			} : chain);
+			if (chainError != null) setSpan(chainError.start, chainError.end, "schemaError");
+		}
+	}
+	const sorted = Array.from(spanMap.values()).sort((a, b) => a.start - b.start);
+	const result = [];
+	let pos = 0;
+	for (const span of sorted) {
+		if (span.start < pos) continue;
+		if (pos < span.start) result.push({
+			str: value.slice(pos, span.start),
+			style: "none"
+		});
+		result.push({
+			str: value.slice(span.start, span.end),
+			style: span.style
+		});
+		pos = span.end;
+	}
+	if (pos < len) result.push({
+		str: value.slice(pos, len),
+		style: "none"
+	});
+	return result.filter((r) => r.str.length > 0);
+}
+const HighlightedTextOverlay = forwardRef(function HighlightedTextOverlay({ children, onWheel, onMouseMove, highlightedText, overlayRef, inputIsFocused, mode, size, variant, valueType, isLoading }, ref) {
+	return /* @__PURE__ */ jsxs(OverlayContainer, {
+		ref,
+		onWheel,
+		onMouseMove,
+		$variant: variant,
+		"data-input-is-focused": inputIsFocused,
+		"data-test": "smart-text-input",
+		"data-mode": mode,
+		"data-value-type": valueType,
+		children: [
+			/* @__PURE__ */ jsx(Overlay, {
+				ref: overlayRef,
+				"data-test": "smart-text-input__highlight",
+				"aria-hidden": true,
+				style: { zIndex: 3 },
+				$size: size,
+				$variant: variant,
+				children: highlightedText
+			}),
+			isLoading && /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(LoadingIndicator, {
+				"aria-label": "Loading schema…",
+				role: "status"
+			}) }),
+			children
+		]
+	});
+});
+/**
+* Render the value with syntax highlighting and clickable link spans using the parsed AST.
+*/
+const HighlightedText = ({ value, tree, focused, interactive, schemaValidator, onLinkMouseDown, dontHighlightErrors = false, cursorIdx }) => {
+	const runs = buildHighlights(tree, value, focused, schemaValidator);
+	const linkMap = /* @__PURE__ */ new Map();
+	findAll(tree, NodeType.Chain).forEach((chainNode) => {
+		if (!isASTChainNode(chainNode)) return;
+		chainNode.children.forEach((link) => {
+			if (link.type === NodeType.Identifier || link.type === NodeType.Function || link.type === NodeType.CustomFunction) {
+				linkMap.set(link.start, {
+					start: link.start,
+					end: link.end
+				});
+				if (link.type === NodeType.Function || link.type === NodeType.CustomFunction) {
+					if (link.children.some((child) => child.type === NodeType.ParenClose)) {
+						for (const child of link.children) if (child.type !== NodeType.Error && child.type !== NodeType.ParenOpen && child.type !== NodeType.ParenClose) linkMap.set(child.start, {
+							start: child.start,
+							end: child.start
+						});
+					}
+				}
+			}
+		});
+	});
+	let pos = 0;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: runs.map((r) => {
+		const start = pos;
+		pos += r.str.length;
+		const linkInfo = linkMap.get(start);
+		const isLinkSpan = linkInfo != null;
+		const isHidingErrorSpan = dontHighlightErrors && (r.style === "schemaError" || r.style === "syntaxError");
+		const cursorWithinSpan = focused && isLinkSpan && cursorIdx != null && cursorIdx >= start && cursorIdx <= start + r.str.length;
+		return /* @__PURE__ */ jsx(MonoSpan, {
+			"data-style": r.style,
+			$style: isHidingErrorSpan ? "none" : r.style,
+			$interactive: interactive && isLinkSpan && !cursorWithinSpan,
+			onMouseDown: isLinkSpan && interactive && onLinkMouseDown ? (e) => {
+				e.preventDefault();
+				onLinkMouseDown(linkInfo.start, linkInfo.end, e);
+			} : void 0,
+			children: r.str.replace(/ /g, "\xA0")
+		}, start);
+	}) });
+};
+//#endregion
+//#region components/SmartTextInput/types.ts
+/**
+* The mode of the SmartTextInput. Determined by the position of the cursor in the input and the
+* result of the parser.
+*
+* Mode determines behavior of the input.
+*/
+let Mode = /* @__PURE__ */ function(Mode) {
+	Mode["MethodChain"] = "method-chain";
+	Mode["Code"] = "code";
+	Mode["Text"] = "text";
+	return Mode;
+}({});
+/**
+* The value type of the SmartTextInput. Value type indicates the semantic meaning of the input's
+* raw string value.
+*/
+let ValueType = /* @__PURE__ */ function(ValueType) {
+	ValueType["Interpolation"] = "interpolation";
+	ValueType["MethodChain"] = "method-chain";
+	return ValueType;
+}({});
+//#endregion
+//#region components/SmartTextInput/parser/safe-parse.ts
+/**
+* Parses the input string into an ASTNode tree.
+*/
+function safeParse(input, options) {
+	try {
+		return peg$parse(input, {
+			startRule: "Root",
+			strict: false,
+			...options
+		});
+	} catch {
+		return {
+			type: NodeType.Root,
+			start: 0,
+			end: input.length,
+			children: [{
+				type: NodeType.Error,
+				start: 0,
+				end: input.length
+			}]
+		};
+	}
+}
+//#endregion
+//#region components/SmartTextInput/utils.ts
+const createMeasureCanvas = () => {
+	const canvas = document.createElement("canvas");
+	return [canvas, () => {
+		canvas.width = 0;
+		canvas.height = 0;
+		canvas.remove();
+	}];
+};
+const safeCursorIdx = (cursorIdx, ast) => {
+	const idx = cursorIdx ?? ast.end;
+	return Math.max(Math.min(idx, ast.end), 0);
+};
+/**
+* Returns true if the input is allowed to transition to the given value type based on allowed type.
+* When allowedValueType is set, transitions to a different type are prohibited.
+*/
+function canTransitionToValueType(valueType, allowedValueType) {
+	if (!allowedValueType) return true;
+	return allowedValueType === valueType;
+}
+/**
+* Returns true if the given interpolation mode (handlebars or code) is allowed.
+* When allowedValueType is 'method-chain', interpolation modes are never allowed.
+*/
+function isInterpolationModeAllowed(mode, allowedValueType, allowedInterpolationModes) {
+	if (allowedValueType === "method-chain") return false;
+	if (!allowedInterpolationModes) return true;
+	return allowedInterpolationModes.includes(mode);
+}
+/**
+* Returns true if the input can exit method-chain value type back to interpolation.
+* Requires an empty value and that the allowed value type is interpolation.
+*/
+function canExitToInterpolation(value, allowedValueType) {
+	return value === "" && canTransitionToValueType("interpolation", allowedValueType);
+}
+/**
+* Apply from element scrollLeft to the to element scrollLeft
+*/
+const syncScroll = (from, to) => {
+	if (from.current && to.current) to.current.scrollLeft = from.current.scrollLeft;
+};
+const [globalMeasureCanvas] = createMeasureCanvas();
+/**
+* Scroll the input so the cursor at cursorIdx is visible, then sync the overlay.
+*
+* overflow:hidden on the StyledInput prevents the browser from auto-scrolling to
+* the cursor when setSelectionRange is called programmatically. We replicate the
+* same manual scrollLeft update that handleWheel uses.
+*/
+const scrollInputToCursor = (inputRef, cursorIdx) => {
+	const input = inputRef.current;
+	if (!input) return;
+	const ctx = globalMeasureCanvas.getContext("2d");
+	if (!ctx) return;
+	const style = window.getComputedStyle(input);
+	ctx.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+	const cursorPx = ctx.measureText(input.value.slice(0, cursorIdx)).width;
+	const lookaheadPx = ctx.measureText(input.value.slice(0, cursorIdx + 1)).width;
+	const paddingLeft = parseFloat(style.paddingLeft) || 0;
+	const paddingRight = parseFloat(style.paddingRight) || 0;
+	const contentWidth = input.clientWidth - paddingLeft - paddingRight;
+	const margin = 4;
+	if (cursorPx < input.scrollLeft) input.scrollLeft = Math.max(0, cursorPx - margin);
+	else if (lookaheadPx > input.scrollLeft + contentWidth) input.scrollLeft = lookaheadPx - contentWidth + margin;
+};
+/**
+* Returns true if the value is a valid method chain where the root is valid given the passed
+* accepted chain roots.
+*/
+const isChainWithValidRoot = (value, chainRoots, { onlyAllowSingleLink = false } = {}) => {
+	const firstChild = (safeParse(value, { startRule: "ChainRoot" }).children ?? [])[0];
+	return firstChild != null && firstChild.type === NodeType.Chain && isASTChainNode(firstChild) && chainRoots.some((r) => {
+		const firstLink = firstChild.children[0];
+		return firstLink != null && isMethodChainNode(firstLink) && r.label === firstLink.name;
+	}) && (!onlyAllowSingleLink || firstChild.children.length === 1);
+};
+/**
+* Returns the ASTChain node that contains the cursor, or undefined if none.
+*/
+function findChainAtCursor(tree, cursorIdx, valueType) {
+	const idx = cursorIdx ?? 0;
+	if (valueType === "method-chain") {
+		const chainNode = findAll(tree, NodeType.Chain)[0];
+		return chainNode && isASTChainNode(chainNode) ? chainNode : void 0;
+	}
+	const node = resolve(tree, idx > 0 ? idx - 1 : 0);
+	if (node && (node.type === NodeType.HBOpen || node.type === NodeType.HBClose || node.type === NodeType.CodeOpen || node.type === NodeType.CodeClose) && idx > node.start && idx < node.end) return;
+	if (node) {
+		const expr = enclosingExpr(tree, node);
+		if (expr && isASTContainerNode(expr) && idx > expr.start) {
+			const chainChild = (expr.children ?? []).find((c) => isASTChainNode(c));
+			if (chainChild && isASTChainNode(chainChild)) return chainChild;
+		}
+	}
+	const fallback = findAll(tree, NodeType.Chain).find((c) => c.start <= idx && idx <= c.end);
+	return fallback && isASTChainNode(fallback) ? fallback : void 0;
+}
+/**
+* Replace the chain string at the cursor position.
+*
+* - ValueType.MethodChain: replaces the entire value.
+* - ValueType.Interpolation: replaces the chain inside the {{...}} or ${...}
+*   expression the cursor is currently in.
+*
+* Returns the new value string and the new cursor position (end of inserted chain).
+*/
+const replaceChainAtCursor = (value, valueType, cursorIdx, tree, newChainString) => {
+	if (valueType === "method-chain") return {
+		newValue: newChainString,
+		newCursorIdx: newChainString.length
+	};
+	const nodeAtCursor = resolve(tree, cursorIdx != null && cursorIdx > 0 ? cursorIdx - 1 : 0);
+	if (!nodeAtCursor) return {
+		newValue: value,
+		newCursorIdx: cursorIdx ?? value.length
+	};
+	let expr = enclosingExpr(tree, nodeAtCursor);
+	if (!expr && (nodeAtCursor.type === NodeType.Handlebars || nodeAtCursor.type === NodeType.Code)) expr = nodeAtCursor;
+	if (!expr || !isASTContainerNode(expr)) return {
+		newValue: value,
+		newCursorIdx: cursorIdx ?? value.length
+	};
+	const children = expr.children ?? [];
+	const openNode = children.find((c) => c.type === NodeType.HBOpen || c.type === NodeType.CodeOpen);
+	const closeNode = children.find((c) => c.type === NodeType.HBClose || c.type === NodeType.CodeClose);
+	if (!openNode) return {
+		newValue: value,
+		newCursorIdx: cursorIdx ?? value.length
+	};
+	const before = value.slice(0, openNode.end);
+	const after = closeNode ? value.slice(closeNode.start) : "";
+	return {
+		newValue: before + newChainString + after,
+		newCursorIdx: before.length + newChainString.length
+	};
+};
+/**
+* Returns context about a method chain function whenever the cursor falls anywhere within
+* the function node's span (name, parens, or params).
+*/
+function getFunctionAtCursor(tree, cursorIdx, valueType) {
+	const idx = cursorIdx ?? 0;
+	const chainNode = findChainAtCursor(tree, cursorIdx, valueType);
+	if (!chainNode) return null;
+	for (const link of chainNode.children) {
+		if (!isAnyASTFunctionNode(link)) continue;
+		if (idx < link.start || idx >= link.end) continue;
+		const parenOpenNode = link.children.find((c) => c.type === NodeType.ParenOpen);
+		const parenCloseNode = link.children.find((c) => c.type === NodeType.ParenClose);
+		const cursorInParens = parenOpenNode != null && parenCloseNode != null && idx > parenOpenNode.start && idx < parenCloseNode.end;
+		const existingParams = link.children.filter(isRealASTFunctionParamType).map(normalizeFunctionParam);
+		return {
+			functionName: isASTCustomFunctionNode(link) ? `@${link.name}` : link.name,
+			existingParams,
+			start: link.start,
+			end: link.end,
+			cursorInParens,
+			custom: isASTCustomFunctionNode(link)
+		};
+	}
+	return null;
+}
+/**
+* Returns true if there is a CustomFunction node that starts at the given position.
+* Used to detect clicks on custom code function spans.
+*/
+function isCustomFunctionAtStart(tree, position) {
+	return findAll(tree, NodeType.CustomFunction).some((n) => n.start === position);
+}
+/**
+* Returns true when the cursor sits immediately after a function call's closing paren
+* (e.g. cursor at the `|` in `accounts.filter(x)|`). Used to derive assumeOnNextLink
+* from cursor position rather than relying solely on state.
+*/
+function isCursorAfterFunctionClose(tree, cursorIdx, valueType) {
+	const idx = cursorIdx ?? 0;
+	const chainNode = findChainAtCursor(tree, cursorIdx, valueType);
+	if (!chainNode) return false;
+	for (const link of chainNode.children) {
+		if (!isAnyASTFunctionNode(link)) continue;
+		const parenCloseNode = link.children.find((c) => c.type === NodeType.ParenClose);
+		if (parenCloseNode && idx === parenCloseNode.end) return true;
+	}
+	return false;
+}
+/**
+* Return the current Mode of the input. The mode determines what is valid syntax.
+*/
+const getMode = (tree, valueType, cursorIdx) => {
+	cursorIdx = cursorIdx ?? 0;
+	if (valueType === "method-chain") return "method-chain";
+	const n = resolve(tree, cursorIdx > 0 ? cursorIdx - 1 : 0);
+	if (!n) return "text";
+	const expr = enclosingExpr(tree, n);
+	if (!expr) {
+		if (n.type === NodeType.Handlebars || n.type === NodeType.Code) return "method-chain";
+		return "text";
+	}
+	const exprChildren = isASTContainerNode(expr) ? expr.children ?? [] : [];
+	const openNode = exprChildren.find((c) => c.type === NodeType.HBOpen || c.type === NodeType.CodeOpen);
+	const closeNode = exprChildren.find((c) => c.type === NodeType.HBClose || c.type === NodeType.CodeClose);
+	if (closeNode && cursorIdx > closeNode.start) return "text";
+	if (openNode && cursorIdx < openNode.end) return "text";
+	if (expr.type === NodeType.Handlebars) return "method-chain";
+	if (expr.type === NodeType.Code) return "code";
+	return "text";
+};
+/**
+* Determine if the cursor is strictly between chars of a delimiter token (like `{{`). In this
+* state we want to hide the popover.
+*/
+const isCursorInExpressionToken = (tree, cursorIdx, valueType) => {
+	if (valueType === "method-chain") return false;
+	const idx = safeCursorIdx(cursorIdx, tree);
+	if (idx === 0) return false;
+	const n = resolve(tree, idx - 1);
+	if (!n || n.type !== NodeType.HBOpen && n.type !== NodeType.HBClose && n.type !== NodeType.CodeOpen && n.type !== NodeType.CodeClose) return false;
+	return idx > n.start && idx < n.end;
+};
+/**
+* When the user selects a chain option that already exists at the cursor position
+* (e.g. confirming "page_number" while the value is "accounts.page_number(#1)", or
+* confirming "accounts" while the cursor is inside "accounts.id"), returns the cursor
+* position to move to rather than replacing the value via appendChain (which would
+* discard existing parameters or suffixes after the link).
+*
+* Returns null when the link is not already present — caller should appendChain instead.
+*
+* Note: options always carry Identifier chain nodes (appendedMethodChain uses strings),
+* so `isFunction` is derived from the schema rather than chain.type.
+*/
+const getConfirmLinkCursorPos = (tree, valueType, currentChain, chain, schema, cursorIdx) => {
+	const astChain = findChainAtCursor(tree, cursorIdx, valueType);
+	if (!astChain) return null;
+	const isFunction = isFunctionSchema(schema ?? {});
+	const targetLink = astChain.children.filter(isMethodChainNode)[currentChain.links.length];
+	if (!targetLink || targetLink.name !== chain.name) return null;
+	if (isFunction && (targetLink.type === NodeType.Function || targetLink.type === NodeType.CustomFunction)) {
+		const parenOpen = targetLink.children.find((c) => c.type === NodeType.ParenOpen);
+		return parenOpen ? parenOpen.end : targetLink.end;
+	}
+	const linkIdxInChain = astChain.children.indexOf(targetLink);
+	const dotAfter = astChain.children[linkIdxInChain + 1];
+	return dotAfter?.type === NodeType.Dot ? dotAfter.end : targetLink.end;
+};
+/**
+* Matching function for filtering chain options given a partially typed option name.
+*
+* TODO: Add more sophistication here (e.g. fuzzy matching, etc.)
+*/
+const isQueryMatch = (query, chain) => {
+	const prop = chain.property.toLowerCase();
+	if (query.startsWith("@")) return prop.startsWith(query);
+	return (prop.startsWith("@") ? prop.slice(1) : prop).startsWith(query);
+};
+//#endregion
+//#region components/SmartTextInput/listbox-options.ts
+const CONTEXT_MENU_OPTIONS = {
+	enterMethodChainMode: {
+		label: "trigger.id",
+		returnType: "Data path",
+		ariaLabel: "Enter data path",
+		interactive: true,
+		description: void 0
+	},
+	insertCustomCode: {
+		label: "${...}",
+		returnType: "Code expression",
+		ariaLabel: "Insert code expression",
+		interactive: true,
+		description: void 0
+	},
+	insertMethodChainHandlebars: {
+		label: "Hello, {{...}}",
+		returnType: "Data expression",
+		ariaLabel: "Insert data expression",
+		interactive: true,
+		description: void 0
+	}
+};
+const EXIT_METHOD_CHAIN_VALUE_TYPE_OPTION = {
+	type: "method-chain-option",
+	id: "exitMethodChainValueType",
+	ariaLabel: "Exit data path",
+	label: "Data path",
+	returnType: void 0,
+	description: void 0,
+	disabled: false,
+	interactive: true
+};
+const isContextMenuOption = (item) => {
+	return item.type === "context-menu-option";
+};
+const CONTEXT_MENU_EXAMPLE_KEY = {
+	insertCustomCode: "code",
+	insertMethodChainHandlebars: "handlebars",
+	enterMethodChainMode: "methodChain"
+};
+const getContextMenuOptions = (valueIsEmpty, allowedValueType, allowedInterpolationModes, examples) => {
+	return Object.entries(CONTEXT_MENU_OPTIONS).filter(([key]) => {
+		if (key === "insertCustomCode") return isInterpolationModeAllowed("code", allowedValueType, allowedInterpolationModes);
+		if (key === "insertMethodChainHandlebars") return isInterpolationModeAllowed("method-chain", allowedValueType, allowedInterpolationModes);
+		if (key === "enterMethodChainMode") return canTransitionToValueType("method-chain", allowedValueType) && valueIsEmpty;
+		return true;
+	}).map(([key, value]) => ({
+		type: "context-menu-option",
+		id: key,
+		...value,
+		label: examples?.[CONTEXT_MENU_EXAMPLE_KEY[key]] ?? value.label,
+		disabled: false
+	}));
+};
+const getMethodChainOptions = (options) => {
+	return options.map((option) => ({
+		type: "method-chain-option",
+		id: option.value,
+		disabled: false,
+		ariaLabel: `Select ${option.label}`,
+		label: option.label,
+		returnType: option.returnType,
+		description: option.schema.description,
+		interactive: true
+	}));
+};
+//#endregion
+//#region components/SmartTextInput/SmartTextInputFunctionDialog.tsx
+const StyledDialog = styled(Stack)`
+  height: 100%;
+  gap: 0;
+  overflow: hidden;
+`;
+const DialogHeading = styled.div`
+  ${Typography.TextMono};
+  padding: ${Spacing[3]} ${Spacing[2]};
+  border-bottom: 1px solid ${Color.BorderDivider};
+`;
+const DialogContent$1 = styled(Stack)`
+  gap: 0;
+  overflow: hidden;
+`;
+const FormContent = styled.div`
+  padding: ${Spacing[3]};
+  overflow-y: auto;
+`;
+const SmartTextInputFunctionDialog = ({ id, inputRef, functionAtCursor, nextPossibleChains, chainRoots, onConfirm, onCancel, renderFunctionForm, renderCustomFunctionDetail, openCodeChainFunctionPanel }) => {
+	const ref = useRef(null);
+	const { dialogProps } = useDialog({
+		role: "dialog",
+		"aria-label": `Edit ${functionAtCursor.functionName} parameters`,
+		id
+	}, ref);
+	const { tabIndex: _tabIndex, ...restDialogProps } = dialogProps;
+	useInteractOutside({
+		ref,
+		onInteractOutside: (e) => {
+			if (inputRef.current?.contains(e.target)) return;
+			if (e.target?.closest("#combobox-dropdown-portal-wrapper")) return;
+			onCancel();
+		}
+	});
+	const functionSchema = useMemo(() => {
+		for (const opt of nextPossibleChains) if (opt.property === functionAtCursor.functionName && isFunctionSchema(opt.schema)) {
+			const ccfToken = "codeChainFunctionToken" in opt.schema ? opt.schema.codeChainFunctionToken : void 0;
+			return {
+				schema: opt.schema,
+				parentSchema: isJsonSchemaArray(opt.parentSchema) ? opt.parentSchema.items : opt.parentSchema,
+				ccfToken
+			};
+		}
+	}, [functionAtCursor, nextPossibleChains]);
+	return /* @__PURE__ */ jsxs(StyledDialog, {
+		ref,
+		...restDialogProps,
+		children: [/* @__PURE__ */ jsx(DialogHeading, { children: functionAtCursor.functionName }), /* @__PURE__ */ jsx(DialogContent$1, { children: functionSchema != null ? functionAtCursor.custom && functionSchema.ccfToken != null ? renderCustomFunctionDetail?.({
+			token: functionSchema.ccfToken,
+			name: functionAtCursor.functionName,
+			onCancel,
+			onEdit: openCodeChainFunctionPanel
+		}) : renderFunctionForm?.({
+			baseId: id,
+			functionName: functionAtCursor.functionName,
+			schema: functionSchema.schema,
+			parentItemSchema: functionSchema.parentSchema,
+			receiverSchema: functionSchema.parentSchema,
+			defaultParameters: functionAtCursor.existingParams,
+			chainRoots,
+			onComplete: onConfirm,
+			onCancel
+		}) : /* @__PURE__ */ jsx(FormContent, { children: /* @__PURE__ */ jsxs(Paragraph, {
+			size: "sm",
+			children: [
+				"Could not find a valid schema for the function ",
+				functionAtCursor.functionName,
+				"."
+			]
+		}) }) })]
+	});
+};
+//#endregion
+//#region components/SmartTextInput/SmartTextInputCodeDialog.tsx
+const DialogContent = styled.div`
+  padding: ${Spacing[3]};
+  overflow-y: auto;
+  flex: 1;
+  ${Typography.TextMono};
+  color: ${Color.TextSecondary};
+`;
+const DialogFooter = styled.div`
+  padding: ${Spacing[2]};
+  border-top: 1px solid ${Color.BorderDivider};
+`;
+const SmartTextInputCodeDialog = ({ id, inputRef, onConfirm, onCancel }) => {
+	const ref = useRef(null);
+	const { dialogProps } = useDialog({
+		role: "dialog",
+		"aria-label": "Edit code expression",
+		id
+	}, ref);
+	const { tabIndex: _tabIndex, ...restDialogProps } = dialogProps;
+	useInteractOutside({
+		ref,
+		onInteractOutside: (e) => {
+			if (inputRef.current?.contains(e.target)) return;
+			onCancel();
+		}
+	});
+	return /* @__PURE__ */ jsxs(StyledDialog, {
+		ref,
+		...restDialogProps,
+		children: [
+			/* @__PURE__ */ jsx(DialogHeading, { children: "Code" }),
+			/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx("div", {
+				style: {
+					minHeight: "100px",
+					width: "100%",
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center"
+				},
+				children: "--Code editor goes here--"
+			}) }),
+			/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs(HStack, {
+				justify: "flex-end",
+				spacing: Spacing[1],
+				children: [/* @__PURE__ */ jsx(Button, {
+					onClick: onCancel,
+					width: "auto",
+					size: "sm",
+					variant: "basic",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: onConfirm,
+					width: "auto",
+					size: "sm",
+					variant: "primary",
+					children: "Confirm"
+				})]
+			}) })
+		]
+	});
+};
+//#endregion
+//#region components/SmartTextInput/SmartTextInputPopover.tsx
+const PopoverContainer = styled.div`
+  ${({ $isDialog }) => $isDialog ? css`
+          min-width: 340px;
+          max-width: 400px;
+        ` : css`
+          min-width: 320px;
+          max-width: 380px;
+        `}
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: ${({ $position = "absolute" }) => $position};
+  border-radius: 4px;
+  border: 1px solid ${Color.BorderDivider};
+  box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
+  background: ${Color.BackgroundPrimary};
+  font-size: ${Typography.TextMono.fontSize};
+  font-family: ${Typography.TextMono.fontFamily};
+`;
+const DialogFocusHandle = forwardRef(function DialogFocusHandle(_props, ref) {
+	const focusManager = useFocusManager();
+	useImperativeHandle(ref, () => ({ focusFirst: () => {
+		focusManager?.focusFirst({ tabbable: true });
+	} }), [focusManager]);
+	return null;
+});
+const FooterContainer = styled.div`
+  border-top: 1px solid ${Color.BorderDivider};
+  padding: ${Spacing[1]};
+`;
+const SmartTextInputPopover = ({ id, children, comboboxState, inputRef, popoverRef, variant, portalContainerRef, dialogFocusRef, isDialog, onDialogClose, footer }) => {
+	const { popoverProps } = usePopover({
+		triggerRef: inputRef,
+		popoverRef,
+		placement: "bottom start",
+		offset: variant === "table-cell" ? 1 : 4,
+		isNonModal: true,
+		maxHeight: isDialog ? 375 : 295,
+		shouldCloseOnInteractOutside: (element) => !element.closest("#combobox-dropdown-portal-wrapper")
+	}, {
+		...comboboxState,
+		close: () => {
+			onDialogClose();
+		}
+	});
+	const [popoverWidth, setPopoverWidth] = useState(void 0);
+	useLayoutEffect(() => {
+		if (comboboxState.isOpen) setPopoverWidth(inputRef.current?.scrollWidth);
+	}, [comboboxState.isOpen, inputRef]);
+	if (!comboboxState.isOpen) return null;
+	const render = () => {
+		return /* @__PURE__ */ jsx(PopoverContainer, {
+			...popoverProps,
+			ref: popoverRef,
+			$isDialog: isDialog,
+			id,
+			style: {
+				zIndex: Z_INDICES.modalDropdown,
+				width: popoverWidth
+			},
+			children: /* @__PURE__ */ jsxs(FocusScope, {
+				contain: isDialog,
+				children: [
+					dialogFocusRef && /* @__PURE__ */ jsx(DialogFocusHandle, { ref: dialogFocusRef }),
+					children,
+					!isDialog && footer != null && /* @__PURE__ */ jsx(FooterContainer, { children: footer })
+				]
+			})
+		});
+	};
+	if (portalContainerRef === null) return render();
+	else return createPortal(render(), portalContainerRef ?? document.body);
+};
+//#endregion
+//#region components/SmartTextInput/SmartTextInputListbox.tsx
+const EmptyOptionList = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${Typography.TextMono};
+  color: ${Color.TextSecondary};
+  padding: ${Spacing[4]} ${Spacing[5]};
+`;
+const StyledArrowLeftIcon = styled(ArrowLeftIcon$1)`
+  border-radius: 3px;
+`;
+const StyledListBox = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+`;
+const OptionDescription = styled.div`
+  ${Typography.TextSmall};
+  color: ${Color.TextSecondary};
+  padding: 2px 0; // Added to containers/gap 4px padding to equal 6px
+`;
+const OptionLabel = styled.div`
+  ${Typography.TextMono};
+  font-size: 12px;
+  line-height: 16px;
+
+  color: ${({ $heading }) => $heading ? Color.TextSecondary : Color.TextPrimary};
+`;
+const StyledListboxOption = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing[1]};
+  padding: ${Spacing[1]} ${Spacing[2]};
+  border-bottom: ${({ $bottomBorder }) => $bottomBorder ? `1px solid ${Color.BorderDivider}` : "none"};
+
+  ${OptionDescription} {
+    display: none;
+  }
+
+
+  ${({ $interactive, $iconFocus }) => $interactive && css`
+      &:not([aria-disabled='true']) {
+        cursor: pointer;
+      }
+
+      &[aria-disabled='true'] ${OptionLabel} {
+        color: ${Color.TextDisabled};
+      }
+
+      &[data-focused='true'] {
+        ${$iconFocus ? css`
+              ${StyledArrowLeftIcon} {
+                background-color: ${Color.CoreSlate100};
+              }
+              ` : css`
+              background-color: ${Color.BackgroundSecondary};
+              `}
+
+        ${OptionDescription} {
+          display: block;
+        }
+      }
+    `}
+`;
+const buildTextModeHeading = (nodes) => {
+	const parts = [];
+	for (const node of nodes) if (node.value?.id === "insertCustomCode") parts.push("Code expression");
+	else if (node.value?.id === "insertMethodChainHandlebars") parts.push("Data expression");
+	else if (node.value?.id === "enterMethodChainMode") parts.push("Data path");
+	parts.push("String");
+	return parts.join(", ");
+};
+const ListboxOption = ({ item, state }) => {
+	const ref = useRef(null);
+	const { optionProps, isFocused } = useOption({ key: item.id }, state, ref);
+	if (isContextMenuOption(item)) return /* @__PURE__ */ jsxs(StyledListboxOption, {
+		$interactive: item.interactive,
+		ref,
+		...optionProps,
+		"aria-label": item.ariaLabel,
+		"aria-disabled": item.disabled || !item.interactive ? "true" : "false",
+		"data-focused": isFocused ? "true" : "false",
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			justify: "space-between",
+			children: [/* @__PURE__ */ jsx(OptionLabel, { children: item.disabled ? /* @__PURE__ */ jsx("span", { children: item.label }) : /* @__PURE__ */ jsx(HighlightedText, {
+				value: item.label,
+				tree: safeParse(item.label, {
+					startRule: item.id === "enterMethodChainMode" ? "ChainRoot" : "Root",
+					allowHandlebars: true,
+					allowCode: true
+				}),
+				focused: false,
+				interactive: false,
+				schemaValidator: () => null,
+				onLinkMouseDown: () => {},
+				dontHighlightErrors: true
+			}) }), /* @__PURE__ */ jsx(PillType, { children: item.returnType })]
+		}), item.description && /* @__PURE__ */ jsx(OptionDescription, { children: item.description })]
+	});
+	else {
+		const isExitMethodChainOption = item.id === EXIT_METHOD_CHAIN_VALUE_TYPE_OPTION.id;
+		return /* @__PURE__ */ jsxs(StyledListboxOption, {
+			$interactive: true,
+			$bottomBorder: isExitMethodChainOption,
+			$iconFocus: isExitMethodChainOption,
+			ref,
+			...optionProps,
+			"aria-label": item.ariaLabel,
+			"data-focused": isFocused ? "true" : "false",
+			children: [/* @__PURE__ */ jsxs(HStack, {
+				justify: "space-between",
+				children: [isExitMethodChainOption ? /* @__PURE__ */ jsx(OptionLabel, {
+					$heading: true,
+					children: /* @__PURE__ */ jsxs(HStack, {
+						align: "center",
+						justify: "center",
+						children: [/* @__PURE__ */ jsx(StyledArrowLeftIcon, {}), item.label]
+					})
+				}) : /* @__PURE__ */ jsx(OptionLabel, { children: item.label }), item.returnType && /* @__PURE__ */ jsx(PillType, { children: item.returnType })]
+			}), item.description && /* @__PURE__ */ jsx(OptionDescription, { children: item.description })]
+		});
+	}
+};
+const SmartTextInputListbox = ({ comboboxState, listBoxRef, listBoxProps, mode, isLoading, openCodeChainFunctionPanel }) => {
+	const listBox = useListBox({
+		...listBoxProps,
+		"aria-label": mode === "text" ? "Context menu" : "Data path options"
+	}, comboboxState, listBoxRef);
+	const nodes = [...comboboxState.collection];
+	return /* @__PURE__ */ jsxs(StyledListBox, {
+		ref: listBoxRef,
+		...listBox.listBoxProps,
+		children: [
+			mode === "method-chain" && nodes[0]?.value?.id !== "exitMethodChainValueType" && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(StyledListboxOption, {
+				$bottomBorder: true,
+				children: /* @__PURE__ */ jsx(OptionLabel, {
+					$heading: true,
+					children: "Data path"
+				})
+			}) }),
+			mode === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StyledListboxOption, {
+				$bottomBorder: true,
+				children: /* @__PURE__ */ jsx(OptionLabel, {
+					$heading: true,
+					children: buildTextModeHeading(nodes)
+				})
+			}), /* @__PURE__ */ jsx(StyledListboxOption, { children: /* @__PURE__ */ jsx(OptionLabel, {
+				$heading: true,
+				children: "Modes"
+			}) })] }),
+			nodes.length === 0 || mode !== "text" && isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EmptyOptionList, { children: "No options available" }), openCodeChainFunctionPanel && /* @__PURE__ */ jsx(FooterContainer, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "basic",
+				size: "sm",
+				onClick: openCodeChainFunctionPanel,
+				children: "Create custom chain"
+			}) })] }) : nodes.map((node) => node.value ? /* @__PURE__ */ jsx(ListboxOption, {
+				item: node.value,
+				state: comboboxState
+			}, node.key) : null)
+		]
+	});
+};
+//#endregion
+//#region components/SmartTextInput/useChainAtCursor.ts
+/**
+* Extracts the chain context at the cursor position in a single pass.
+*
+* Returns:
+*   - `chainString`: dot-joined names of all identifier links that end strictly
+*     before the cursor. The link at or containing the cursor is excluded so
+*     that `useChain` resolves the PARENT's options.
+*     When `assumeOnNextLink` is true, the link at the cursor IS included so
+*     that `useChain` resolves that link's children instead.
+*   - `partialQuery`: partial text typed for the link at the cursor, used to
+*     filter the dropdown. Always '' when `assumeOnNextLink` is true.
+*
+* Examples (cursor position denoted by |, normal mode):
+*   `trigger.|`      → { chainString: "trigger",      partialQuery: "" }
+*   `trigger.case.|` → { chainString: "trigger.case", partialQuery: "" }
+*   `trigger.cas|e`  → { chainString: "trigger",      partialQuery: "cas" }
+*   `trigger.case|`  → { chainString: "trigger",      partialQuery: "case" }
+*   `trigger|`       → { chainString: "",             partialQuery: "trigger" }
+*   `tri|gger`       → { chainString: "",             partialQuery: "tri" }
+*/
+function extractChainContextAtCursor(tree, cursorIdx, valueType, assumeOnNextLink) {
+	const chainNode = findChainAtCursor(tree, cursorIdx, valueType);
+	if (!chainNode) return {
+		chainString: "",
+		partialQuery: ""
+	};
+	const idx = cursorIdx ?? 0;
+	let cutoffIdx = chainNode.children.length;
+	let partialQuery = "";
+	for (let i = 0; i < chainNode.children.length; i++) {
+		const link = chainNode.children[i];
+		if (link.type === NodeType.Error && link.kind === "trailingAtSign") {
+			if (!assumeOnNextLink) {
+				partialQuery = "@";
+				cutoffIdx = i;
+			}
+			break;
+		}
+		if (link.type !== NodeType.Identifier && link.type !== NodeType.Function && link.type !== NodeType.CustomFunction) continue;
+		let shouldInclude = assumeOnNextLink ? link.end <= idx : link.end < idx;
+		if (shouldInclude && (link.type === NodeType.Function || link.type === NodeType.CustomFunction)) {
+			const fn = link;
+			const parenOpen = fn.children.find((c) => c.type === NodeType.ParenOpen);
+			const hasParenClose = fn.children.some((c) => c.type === NodeType.ParenClose);
+			if (parenOpen && !hasParenClose && parenOpen.end <= idx) shouldInclude = false;
+		}
+		if (!shouldInclude) {
+			cutoffIdx = i;
+			if (!assumeOnNextLink && link.start < idx) partialQuery = link.name.slice(0, Math.min(idx - link.start, link.name.length));
+			break;
+		}
+	}
+	return {
+		chainString: methodChainToString(normalizeChain({
+			...chainNode,
+			children: chainNode.children.slice(0, cutoffIdx)
+		})),
+		partialQuery
+	};
+}
+/**
+* Resolves schema-driven method chain options for the current cursor
+* position in a SmartTextInput.
+*
+* Wraps `useChain` with cursor-aware chain extraction: it reads the AST to
+* determine which chain context the cursor is in (inside `{{...}}`, inside
+* `${...}`, or a bare top-level chain), derives the partial chain string
+* representing all links before the cursor, and returns the next possible
+* options from the schema.
+*
+* When `chainConfig` is absent, returns an empty options list.
+*/
+const useChainAtCursor = ({ value, onUpdateChain, tree, cursorIdx, valueType, assumeOnNextLink = false, useChainRootDescriptions, chainRoots, primitivesSchema, platformObjectJsonSchema, defaultPrimitiveUtilities, codeChainFunctionSchema, getSchemaOptionsOverride, sortOptionsBy }) => {
+	const { chainString, partialQuery } = extractChainContextAtCursor(tree, cursorIdx, valueType, assumeOnNextLink);
+	const [currentChain, { appendChain, commitChain, nextPossibleChains, resolveSchema, currentSchema }] = useChain({
+		chainString,
+		chainRoots,
+		primitivesSchema,
+		platformObjectJsonSchema,
+		defaultPrimitiveUtilities,
+		codeChainFunctionSchema,
+		useChainRootDescriptions,
+		getSchemaOptionsOverride,
+		onUpdateChain: (newChainString, meta) => {
+			if (meta.isFunction) newChainString = newChainString + "()";
+			const { newValue, newCursorIdx: rawCursorIdx } = replaceChainAtCursor(value, valueType, cursorIdx, tree, newChainString);
+			onUpdateChain(newValue, meta.isFunction ? rawCursorIdx - 1 : rawCursorIdx);
+		}
+	});
+	const nextPossibleChainsSorted = useMemo(() => {
+		let chains = nextPossibleChains;
+		if (partialQuery) {
+			const query = partialQuery.toLowerCase();
+			chains = chains.filter((item) => isQueryMatch(query, item));
+		}
+		if (!sortOptionsBy) return chains;
+		return [...chains].sort((a, b) => sortOptionsBy(a) - sortOptionsBy(b));
+	}, [
+		nextPossibleChains,
+		partialQuery,
+		sortOptionsBy
+	]);
+	const insertChainAtCursor = (nodes) => {
+		const fullChainNode = findChainAtCursor(tree, cursorIdx, valueType);
+		if (fullChainNode == null) {
+			appendChain(nodes);
+			return;
+		}
+		const suffix = normalizeChain(fullChainNode).links.slice(currentChain.links.length + nodes.length);
+		commitChain(methodChainToString({
+			type: NodeType.Chain,
+			links: [
+				...currentChain.links,
+				...nodes,
+				...suffix
+			]
+		}));
+	};
+	return [currentChain, {
+		appendChain,
+		insertChainAtCursor,
+		nextPossibleChains: nextPossibleChainsSorted,
+		resolveSchema,
+		currentSchema,
+		query: partialQuery
+	}];
+};
+//#endregion
+//#region components/SmartTextInput/useCodeChainFunctionPanel.tsx
+/**
+* Manages opening and rendering the CCF editing panel.
+*/
+const useCodeChainFunctionPanel = ({ enabled, canCreate, renderPanel: renderPanelContent, onOpen, onSaveNew }) => {
+	const [panelProps, setPanelProps] = useState(null);
+	const closePanel = useCallback(({ savedName } = {}) => {
+		setPanelProps(null);
+		if (savedName) onSaveNew(savedName);
+	}, [onSaveNew]);
+	const renderPanel = useCallback(() => {
+		return panelProps != null && renderPanelContent != null ? renderPanelContent({
+			...panelProps,
+			onClose: closePanel
+		}) : null;
+	}, [
+		panelProps,
+		closePanel,
+		renderPanelContent
+	]);
+	const openPanel = useCallback((panelProps) => {
+		setPanelProps(panelProps);
+		onOpen();
+	}, [onOpen]);
+	return {
+		renderPanel,
+		openPanel: enabled && canCreate && renderPanelContent != null ? openPanel : void 0
+	};
+};
+//#endregion
+//#region components/SmartTextInput/validation.tsx
+const SchemaErrorMessage = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+`;
+function validateFunctionParams(link, parentSchema, platformObjectJsonSchema, primitiveUtilities) {
+	if (!link.children.some((c) => c.type === NodeType.ParenClose)) return null;
+	const funcSchema = getFunctionSchemaForNode({
+		parentSchema,
+		functionName: link.type === NodeType.CustomFunction ? `@${link.name}` : link.name,
+		isCustomFunction: link.type === NodeType.CustomFunction,
+		platformObjectJsonSchema: platformObjectJsonSchema ?? {},
+		primitiveUtilities: primitiveUtilities ?? {}
+	});
+	if (funcSchema == null) return {
+		start: link.start,
+		end: link.end,
+		name: link.name
+	};
+	const expectedParamCount = Object.keys(funcSchema.properties.parameterTypes.properties).length;
+	const actualParamCount = link.children.filter((c) => c.type === NodeType.Chain || c.type === NodeType.String || c.type === NodeType.Number || c.type === NodeType.Array).length;
+	if (expectedParamCount !== actualParamCount) return {
+		start: link.start,
+		end: link.end,
+		name: link.name,
+		message: `has ${expectedParamCount} parameter, but ${actualParamCount} were provided.`
+	};
+	return null;
+}
+/**
+* Returns the first chain identifier span that fails schema validation, walking
+* all chains left-to-right. Once the first invalid link is found, subsequent
+* links are meaningless and validation stops.
+*/
+function findSchemaErrors(tree, rootSchema, platformObjectJsonSchema, primitiveUtilities) {
+	const nodes = findAll(tree, NodeType.Chain).filter(isASTChainNode);
+	for (const chainNode of nodes) {
+		const identifierLinks = chainNode.children.filter(isMethodChainNode);
+		let prevSchema = rootSchema;
+		for (const [linkIndex, link] of identifierLinks.entries()) {
+			const { schema } = getSchemaForFieldPath({
+				path: methodChainToString(normalizeChain({
+					...chainNode,
+					children: identifierLinks.slice(0, linkIndex + 1)
+				})).replace(/^\./, ""),
+				initialSchema: rootSchema,
+				platformObjectJsonSchema,
+				primitiveUtilities
+			});
+			if (schema == null) {
+				if (link.type === NodeType.CustomFunction && (getNonNullableRefSchema(prevSchema) != null || getNonNullableType(prevSchema) != null)) {
+					const fn = getFunctionSchemaForNode({
+						parentSchema: prevSchema,
+						functionName: `@${link.name}`,
+						isCustomFunction: true,
+						platformObjectJsonSchema: platformObjectJsonSchema ?? {},
+						primitiveUtilities: primitiveUtilities ?? {}
+					});
+					if (fn != null && fn.acceptsNullReceiver !== true) return {
+						start: link.start,
+						end: link.end,
+						name: link.name,
+						message: "does not accept a possibly null value."
+					};
+				}
+				return {
+					start: link.start,
+					end: link.end,
+					name: link.name
+				};
+			}
+			if (isAnyASTFunctionNode(link)) {
+				const paramError = validateFunctionParams(link, prevSchema, platformObjectJsonSchema, primitiveUtilities);
+				if (paramError != null) return paramError;
+			}
+			prevSchema = schema;
+		}
+		const hasIncomplete = findAll(chainNode, NodeType.Error).some((c) => c.wip);
+		const enclosing = enclosingExpr(tree, chainNode);
+		const inClosedHandlebars = enclosing?.type === NodeType.Handlebars && !enclosing.children?.some((c) => c.type === NodeType.Error && c.kind === "unclosedHandlebars");
+		if (!hasIncomplete && identifierLinks.length > 0 && inClosedHandlebars) {
+			if (!isSchemaTypeAllowed(prevSchema, JsonSchemaStringifiableTypes)) {
+				const lastLink = identifierLinks[identifierLinks.length - 1];
+				return {
+					start: lastLink.start,
+					end: lastLink.end,
+					name: lastLink.name,
+					message: "is not a string value."
+				};
+			}
+		}
+	}
+	return null;
+}
+const useSchemaValidator = ({ chainRoots, primitivesSchema, platformObjectJsonSchema, defaultPrimitiveUtilities, codeChainFunctionSchema, isLoading }) => {
+	const { platformObjectJsonSchema: resolvedPlatformSchema, primitiveUtilities } = useChainSchema({
+		primitivesSchema,
+		platformObjectJsonSchema,
+		defaultPrimitiveUtilities,
+		codeChainFunctionSchema
+	});
+	const rootSchema = useMemo(() => ({
+		type: "object",
+		properties: Object.fromEntries(chainRoots.map((r) => [methodChainToString(r.chain), r.schema]))
+	}), [chainRoots]);
+	return useCallback((tree) => isLoading ? null : findSchemaErrors(tree, rootSchema, resolvedPlatformSchema, primitiveUtilities), [
+		rootSchema,
+		resolvedPlatformSchema,
+		primitiveUtilities,
+		isLoading
+	]);
+};
+function getError(leftmostSyntaxError, leftmostIncompleteError, leftmostSchemaError, focused, valueIsEmpty) {
+	if (leftmostSyntaxError != null) return {
+		errorKey: `syntax:${leftmostSyntaxError.kind}`,
+		errorText: leftmostSyntaxError.kind && ErrorMessageByKind[leftmostSyntaxError.kind] || "Syntax error"
+	};
+	else if (leftmostSchemaError != null && !focused) return {
+		errorKey: `schema:${leftmostSchemaError.name}:${leftmostSchemaError.message ?? ""}`,
+		errorText: /* @__PURE__ */ jsxs(SchemaErrorMessage, { children: [
+			/* @__PURE__ */ jsx(PillType, {
+				as: "span",
+				error: true,
+				children: leftmostSchemaError.name
+			}),
+			" ",
+			leftmostSchemaError.message ?? "does not exist."
+		] })
+	};
+	else if (leftmostIncompleteError != null && !focused && !valueIsEmpty) return {
+		errorKey: `incomplete:${leftmostIncompleteError.kind}`,
+		errorText: leftmostIncompleteError.kind && ErrorMessageByKind[leftmostIncompleteError.kind] || "Expression is incomplete"
+	};
+	else return {
+		errorKey: null,
+		errorText: null
+	};
+}
+/**
+* Calls the onValidationChange callback when the input's value is invalid in some manner based
+* on syntax or schema.
+*/
+const useInternalValidation = ({ tree, valueIsEmpty, focused, schemaValidator, onValidationChange, value, valueType }) => {
+	const errorNodes = findAll(tree, NodeType.Error);
+	let leftmostSyntaxError = errorNodes.find((e) => e.start < e.end && !e.wip);
+	const leftmostIncompleteError = errorNodes.find((e) => e.start === e.end);
+	const leftmostSchemaError = useMemo(() => schemaValidator(tree), [tree, schemaValidator]);
+	if (leftmostSyntaxError != null && valueType === "method-chain" && (value.includes("{{") || value.includes("${"))) leftmostSyntaxError = {
+		...leftmostSyntaxError,
+		kind: "interpolationInDataPath"
+	};
+	const { errorKey, errorText } = getError(leftmostSyntaxError, leftmostIncompleteError, leftmostSchemaError ?? void 0, focused, valueIsEmpty);
+	useEffect(() => {
+		onValidationChange?.(errorText);
+	}, [errorKey, onValidationChange]);
+};
+//#endregion
+//#region components/SmartTextInput/SmartTextInput.tsx
+const StyledInput = styled(Input_default)`
+  ${Typography.TextMono}
+  position: relative;
+  z-index: 2;
+  color: transparent;
+  background: transparent;
+  caret-color: ${Color.TextPrimary};
+  white-space: pre;
+  overflow: hidden;
+
+  ${({ size }) => size === "sm" && css`
+      font-size: 12px;
+    `}
+  ${({ $variant }) => $variant === "table-cell" && css`
+      border: none;
+      padding: 0;
+      height: 18px;
+      border-radius: 0;
+    `}
+`;
+const withClosingToken = (key) => {
+	switch (key) {
+		case "{": return "{}";
+		case "(": return "()";
+		case "[": return "[]";
+		case "'": return "''";
+		default: assertNever(key);
+	}
+};
+const spliceAtCursor = (value, insert, cursorIdx) => value.slice(0, cursorIdx) + insert + value.slice(cursorIdx);
+const getInitialValueType = (chainRoots, initialValue, allowedValueType) => {
+	if (allowedValueType != null) return allowedValueType;
+	return initialValue && isChainWithValidRoot(initialValue, chainRoots) ? "method-chain" : "interpolation";
+};
+/**
+* Smart text input for configuring access to data, interpolated strings, or inline code.
+*/
+const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueType, allowedInterpolationModes, chainRoots, platformObjectJsonSchema, defaultPrimitiveUtilities, codeChainFunctionSchema, useChainRootDescriptions = false, primitivesSchema = "default", isLoading = false, portalContainerRef, getSchemaOptionsOverride, creatable = false, renderFunctionForm, renderCustomFunctionDetail, renderCodeChainFunctionPanel, canCreateCodeChainFunction = false, sortOptionsBy, onValidationChange, contextMenuExamples, popoverFooter, id, placeholder = "Select or type", disabled = false, size = "md", variant = "default", ...props }) => {
+	const lastNotifiedValueRef = useRef(passedValue ?? "");
+	const [value, setValue] = useState(passedValue ?? "");
+	useEffect(() => {
+		if (passedValue !== void 0 && passedValue !== lastNotifiedValueRef.current) {
+			setValue(passedValue);
+			lastNotifiedValueRef.current = passedValue;
+		}
+	}, [passedValue]);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	const [cursorIdx, setCursor] = useState(null);
+	const [valueType, setValueType] = useState(getInitialValueType(chainRoots, passedValue, allowedValueType));
+	const [assumeOnNextLinkState, setAssumeOnNextLink] = useState(false);
+	const [forceFunctionDialog, setForceFunctionDialog] = useState(false);
+	const inputRef = useRef(null);
+	const overlayRef = useRef(null);
+	const listBoxRef = useRef(null);
+	const popoverRef = useRef(null);
+	const dialogFocusRef = useRef(null);
+	const nextRenderRef = useRef({});
+	const blockEscapePropagationRef = useRef(false);
+	const tree = safeParse(value, {
+		startRule: valueType === "method-chain" ? "ChainRoot" : "Root",
+		allowHandlebars: isInterpolationModeAllowed("method-chain", allowedValueType, allowedInterpolationModes),
+		allowCode: isInterpolationModeAllowed("code", allowedValueType, allowedInterpolationModes)
+	});
+	const mode = getMode(tree, valueType, cursorIdx);
+	const suppressPopover = isCursorInExpressionToken(tree, cursorIdx, valueType);
+	const assumeOnNextLink = assumeOnNextLinkState || isCursorAfterFunctionClose(tree, cursorIdx, valueType);
+	useEffect(() => {
+		if (!inputRef.current) return;
+		const input = inputRef.current;
+		const listener = () => {
+			setCursor(input.selectionStart);
+			syncScroll(inputRef, overlayRef);
+		};
+		input.addEventListener("selectionchange", listener);
+		return () => {
+			input.removeEventListener("selectionchange", listener);
+		};
+	}, []);
+	const [currentChain, { appendChain, insertChainAtCursor, nextPossibleChains, resolveSchema, currentSchema, query }] = useChainAtCursor({
+		value,
+		tree,
+		cursorIdx,
+		valueType,
+		chainRoots,
+		primitivesSchema,
+		platformObjectJsonSchema,
+		defaultPrimitiveUtilities,
+		codeChainFunctionSchema,
+		getSchemaOptionsOverride,
+		useChainRootDescriptions,
+		sortOptionsBy,
+		assumeOnNextLink,
+		onUpdateChain: (newValue, newCursorIdx) => {
+			setValue(newValue);
+			nextRenderRef.current.cursor = {
+				start: newCursorIdx,
+				end: newCursorIdx
+			};
+		}
+	});
+	useEffect(() => {
+		if (value === lastNotifiedValueRef.current) return;
+		lastNotifiedValueRef.current = value;
+		onChangeRef.current?.(value, {
+			valueType,
+			schema: resolveSchema(value),
+			ast: tree
+		});
+	}, [value]);
+	const functionAtCursor = getFunctionAtCursor(tree, cursorIdx, valueType);
+	const popupMode = functionAtCursor != null && (functionAtCursor.cursorInParens || forceFunctionDialog) ? "function-dialog" : mode === "code" ? "code-dialog" : "listbox";
+	const comboboxItems = useMemo(() => {
+		if (suppressPopover) return [];
+		if (popupMode === "function-dialog" || popupMode === "code-dialog") return [];
+		else if (mode === "text") return getContextMenuOptions(value === "", allowedValueType, allowedInterpolationModes, contextMenuExamples);
+		else if (mode === "method-chain") {
+			const items = getMethodChainOptions(nextPossibleChains);
+			if (valueType === "method-chain" && canExitToInterpolation(value, allowedValueType)) items.unshift(EXIT_METHOD_CHAIN_VALUE_TYPE_OPTION);
+			return items;
+		} else return [];
+	}, [
+		valueType,
+		allowedValueType,
+		allowedInterpolationModes,
+		contextMenuExamples,
+		suppressPopover,
+		popupMode,
+		mode,
+		value,
+		nextPossibleChains
+	]);
+	const comboboxState = useComboBoxState({
+		items: comboboxItems,
+		children: (item) => /* @__PURE__ */ jsx(Item, { children: item.label }, item.id),
+		allowsCustomValue: true,
+		allowsEmptyCollection: true,
+		disabledKeys: comboboxItems.filter((item) => item.disabled || !item.interactive).map((item) => item.id),
+		menuTrigger: "focus",
+		onOpenChange: (open, trigger) => {
+			if (open && trigger === "input") comboboxState.setOpen(false);
+		},
+		selectedKey: null,
+		onSelectionChange: (key) => {
+			switch (mode) {
+				case "text":
+					switch (key) {
+						case "insertCustomCode": {
+							const idx = safeCursorIdx(cursorIdx, tree);
+							setValue(spliceAtCursor(value, "${}", idx));
+							nextRenderRef.current.cursor = {
+								start: idx + 2,
+								end: idx + 2
+							};
+							break;
+						}
+						case "insertMethodChainHandlebars": {
+							const idx = safeCursorIdx(cursorIdx, tree);
+							setValue(spliceAtCursor(value, "{{}}", idx));
+							nextRenderRef.current.cursor = {
+								start: idx + 2,
+								end: idx + 2
+							};
+							break;
+						}
+						case "enterMethodChainMode":
+							setValueType("method-chain");
+							setValue("");
+							nextRenderRef.current.focusedKey = "__secondKey";
+							break;
+					}
+					break;
+				case "method-chain": {
+					if (key === "exitMethodChainValueType") {
+						setValueType("interpolation");
+						setValue("");
+						nextRenderRef.current.focusedKey = "enterMethodChainMode";
+						break;
+					}
+					const option = nextPossibleChains.find((n) => n.value === key);
+					const chain = option?.methodChain?.links?.[0];
+					if (chain) {
+						const schema = option?.schema;
+						const isNoArgCCF = schema != null && isFunctionSchema(schema) && isNoArgCodeChainFunction(schema);
+						const confirmCursorPos = getConfirmLinkCursorPos(tree, valueType, currentChain, chain, schema, cursorIdx);
+						if (confirmCursorPos != null) {
+							setCursor(confirmCursorPos);
+							nextRenderRef.current.cursor = {
+								start: confirmCursorPos,
+								end: confirmCursorPos
+							};
+						} else appendChain([chain], { isFunction: isFunctionSchema(schema) && !isNoArgCCF });
+						if (chain.type !== NodeType.Function && (chain.type !== NodeType.CustomFunction || isNoArgCCF)) setAssumeOnNextLink(true);
+					}
+					break;
+				}
+				case "code": break;
+			}
+		}
+	});
+	const combobox = useComboBox({
+		id,
+		inputRef,
+		listBoxRef,
+		popoverRef,
+		shouldFocusWrap: true,
+		...props
+	}, comboboxState);
+	useEffect(() => {
+		if (nextRenderRef.current.focusInput === true) {
+			nextRenderRef.current.focusInput = void 0;
+			inputRef.current?.focus();
+		}
+		if (nextRenderRef.current.cursor) {
+			const { start, end } = nextRenderRef.current.cursor;
+			nextRenderRef.current.cursor = void 0;
+			inputRef.current?.setSelectionRange(start, end);
+			if (start === value.length) {
+				const startCapture = start;
+				Promise.resolve().then(() => setCursor(startCapture));
+			}
+			scrollInputToCursor(inputRef, end);
+			syncScroll(inputRef, overlayRef);
+		}
+		if (nextRenderRef.current.focusedKey) {
+			let key = nextRenderRef.current.focusedKey;
+			nextRenderRef.current.focusedKey = void 0;
+			switch (key) {
+				case "__firstKey":
+					key = comboboxState.collection.getFirstKey();
+					break;
+				case "__secondKey":
+					key = comboboxState.collection.getFirstKey();
+					if (key != null) key = comboboxState.collection.getKeyAfter(key);
+					break;
+			}
+			comboboxState.selectionManager.setFocusedKey(key);
+		}
+		if (nextRenderRef.current.openPopover === true) {
+			nextRenderRef.current.openPopover = void 0;
+			comboboxState.setOpen(true);
+		}
+	});
+	useEffect(() => {
+		if (mode === "method-chain" && comboboxState.isFocused) comboboxState.open("first", "manual");
+	}, [mode]);
+	/**
+	* Effect to select the first key in the popover consistently
+	* - When the popover is opened.
+	* - When popover options change.
+	*/
+	useEffect(() => {
+		if (comboboxState.isOpen && comboboxState.selectionManager.focusedKey == null) {
+			let key = comboboxState.collection.getFirstKey();
+			if (key != null) {
+				if (key === "exitMethodChainValueType") key = comboboxState.collection.getKeyAfter(key);
+				comboboxState.selectionManager.setFocusedKey(key);
+			}
+		}
+	}, [
+		comboboxState.isOpen,
+		comboboxState.selectionManager.focusedKey,
+		comboboxState.collection,
+		comboboxState.selectionManager,
+		comboboxItems
+	]);
+	const handleWheel = useCallback(function(e) {
+		const input = inputRef.current;
+		if (!input) return;
+		e.preventDefault();
+		input.scrollLeft += e.deltaX || e.deltaY;
+		syncScroll(inputRef, overlayRef);
+	}, []);
+	const handleMouseMove = useCallback(function() {
+		syncScroll(inputRef, overlayRef);
+	}, []);
+	/**
+	* Handle clicks on links in a method chain to automatically text select the link.
+	*/
+	const handleLinkMouseDown = useCallback(function(linkStart, linkEnd, _e) {
+		setAssumeOnNextLink(false);
+		if (isCustomFunctionAtStart(tree, linkStart)) setForceFunctionDialog(true);
+		const el = inputRef.current;
+		if (el) {
+			el.focus();
+			el.setSelectionRange(linkStart, linkEnd);
+			comboboxState.setOpen(true);
+		}
+	}, [comboboxState, tree]);
+	const handleFunctionConfirm = useCallback((nodes) => {
+		insertChainAtCursor(nodes);
+		comboboxState.setOpen(false);
+		setAssumeOnNextLink(true);
+		setForceFunctionDialog(false);
+		nextRenderRef.current.focusInput = true;
+		nextRenderRef.current.openPopover = true;
+		if (functionAtCursor != null) {
+			const newFnStr = methodChainToString({
+				type: NodeType.Chain,
+				links: nodes
+			});
+			const newCursorIdx = functionAtCursor.start + newFnStr.length - 1;
+			setCursor(newCursorIdx);
+			nextRenderRef.current.cursor = {
+				start: newCursorIdx,
+				end: newCursorIdx
+			};
+		}
+	}, [
+		insertChainAtCursor,
+		functionAtCursor,
+		setAssumeOnNextLink,
+		nextRenderRef,
+		comboboxState,
+		setCursor
+	]);
+	const handleCodeConfirm = useCallback(() => {
+		comboboxState.setOpen(false);
+		nextRenderRef.current.focusInput = true;
+	}, [comboboxState]);
+	const handleDialogCancel = useCallback(() => {
+		nextRenderRef.current.focusInput = true;
+		setForceFunctionDialog(false);
+		if (functionAtCursor != null && functionAtCursor.custom && forceFunctionDialog) return;
+		else comboboxState.setOpen(false);
+	}, [
+		comboboxState,
+		functionAtCursor,
+		forceFunctionDialog
+	]);
+	const schemaValidator = useSchemaValidator({
+		chainRoots,
+		primitivesSchema,
+		isLoading,
+		platformObjectJsonSchema,
+		defaultPrimitiveUtilities,
+		codeChainFunctionSchema
+	});
+	useInternalValidation({
+		tree,
+		valueIsEmpty: value === "",
+		focused: comboboxState.isFocused,
+		schemaValidator,
+		onValidationChange,
+		value,
+		valueType
+	});
+	const { renderPanel: renderCcfPanel, openPanel: openCcfPanel } = useCodeChainFunctionPanel({
+		enabled: creatable && !isEmpty(currentChain) && isCreatableReceiverSchema(currentSchema),
+		canCreate: canCreateCodeChainFunction,
+		renderPanel: renderCodeChainFunctionPanel,
+		onOpen: () => {
+			comboboxState.setOpen(false);
+		},
+		onSaveNew: (savedName) => {
+			appendChain([{
+				type: MethodChainNodeTypes.CustomFunction,
+				name: savedName,
+				params: []
+			}]);
+			setAssumeOnNextLink(true);
+			setForceFunctionDialog(false);
+			nextRenderRef.current.focusInput = true;
+			comboboxState.setOpen(true);
+		}
+	});
+	const showFunctionDialog = popupMode === "function-dialog" && comboboxState.isOpen;
+	const showCodeDialog = popupMode === "code-dialog" && comboboxState.isOpen;
+	const popoverFooterRendered = useMemo(() => {
+		return popoverFooter == null ? void 0 : popoverFooter({ closePopover() {
+			comboboxState.setOpen(false);
+			if (inputRef.current) inputRef.current.scrollLeft = 0;
+		} });
+	}, [popoverFooter, comboboxState]);
+	const { "aria-errormessage": _ariaErrormessage, "aria-invalid": _ariaInvalid, ...inputProps } = combobox.inputProps;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(FocusScope, {
+		contain: showFunctionDialog || showCodeDialog,
+		children: [/* @__PURE__ */ jsx(HighlightedTextOverlay, {
+			onWheel: handleWheel,
+			onMouseMove: handleMouseMove,
+			overlayRef,
+			inputIsFocused: comboboxState.isFocused,
+			mode,
+			size,
+			variant,
+			valueType,
+			isLoading,
+			highlightedText: value ? /* @__PURE__ */ jsx(HighlightedText, {
+				value,
+				tree,
+				focused: comboboxState.isFocused,
+				interactive: !disabled,
+				schemaValidator,
+				onLinkMouseDown: handleLinkMouseDown,
+				cursorIdx
+			}) : null,
+			children: /* @__PURE__ */ jsx(StyledInput, {
+				...mergeProps({
+					...inputProps,
+					onKeyDown: (e) => {
+						if (e.key === "Tab" && (showFunctionDialog || showCodeDialog)) {
+							e.preventDefault();
+							e.stopPropagation();
+							dialogFocusRef.current?.focusFirst();
+							return;
+						}
+						inputProps.onKeyDown?.(e);
+					}
+				}, {
+					onPaste: (e) => {
+						if (value === "" && canTransitionToValueType("method-chain", allowedValueType) && isChainWithValidRoot(e.clipboardData.getData("text"), chainRoots)) setValueType("method-chain");
+					},
+					onKeyDownCapture: (e) => {
+						if (e.key === "Tab" && comboboxState.isOpen && !showFunctionDialog && !showCodeDialog) comboboxState.setOpen(false);
+						if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault();
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Backspace" && valueType === "method-chain" && value === "" && canTransitionToValueType("interpolation", allowedValueType)) {
+							setValueType("interpolation");
+							setValue("");
+							nextRenderRef.current.focusedKey = "enterMethodChainMode";
+							return;
+						}
+						if (e.key === "Backspace" && valueType === "method-chain" && inputRef.current?.selectionStart === 0 && inputRef.current?.selectionEnd === value.length && canTransitionToValueType("interpolation", allowedValueType)) {
+							setValueType("interpolation");
+							setValue("");
+							return;
+						}
+						if (e.key === "." && valueType === "interpolation" && canTransitionToValueType("method-chain", allowedValueType)) {
+							if (value === "") {
+								setValueType("method-chain");
+								setValue("");
+								nextRenderRef.current.focusedKey = "__secondKey";
+								e.preventDefault();
+								return;
+							} else if (isChainWithValidRoot(value, chainRoots, { onlyAllowSingleLink: true })) {
+								setValueType("method-chain");
+								return;
+							}
+						}
+						if (assumeOnNextLink && /^[a-zA-Z0-9]$/.test(e.key)) {
+							const idx = safeCursorIdx(cursorIdx, tree);
+							setValue(spliceAtCursor(value, ".", idx));
+							nextRenderRef.current.cursor = {
+								start: idx + 1,
+								end: idx + 1
+							};
+							setAssumeOnNextLink(false);
+							return;
+						}
+						if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Escape") {
+							setAssumeOnNextLink(false);
+							setForceFunctionDialog(false);
+						}
+						if (e.key === "Backspace") {
+							setCursor(safeCursorIdx(cursorIdx, tree));
+							return;
+						}
+						if (e.key === "{" || e.key === "(") {
+							const idx = safeCursorIdx(cursorIdx, tree);
+							setValue(spliceAtCursor(value, withClosingToken(e.key), idx));
+							nextRenderRef.current.cursor = {
+								start: idx + 1,
+								end: idx + 1
+							};
+							e.preventDefault();
+							return;
+						}
+						if ((e.key === "'" || e.key === "[") && mode === "method-chain") {
+							const idx = safeCursorIdx(cursorIdx, tree);
+							setValue(spliceAtCursor(value, withClosingToken(e.key), idx));
+							nextRenderRef.current.cursor = {
+								start: idx + 1,
+								end: idx + 1
+							};
+							e.preventDefault();
+							return;
+						}
+						if (e.key === "Escape" && comboboxState.isOpen) {
+							blockEscapePropagationRef.current = true;
+							e.stopPropagation();
+						}
+					},
+					onKeyUp: (e) => {
+						if (e.key === "Escape" && blockEscapePropagationRef.current) {
+							blockEscapePropagationRef.current = false;
+							e.stopPropagation();
+						}
+					},
+					onMouseDown: () => {
+						setAssumeOnNextLink(false);
+						setForceFunctionDialog(false);
+					},
+					onClick: () => {
+						const clickCursorPos = inputRef.current?.selectionStart ?? null;
+						if (clickCursorPos != null) setCursor(clickCursorPos);
+						if (clickCursorPos != null && clickCursorPos === inputRef.current?.selectionEnd) {
+							const chainNode = findChainAtCursor(tree, clickCursorPos, valueType);
+							if (chainNode && clickCursorPos === chainNode.end) setAssumeOnNextLink(true);
+						}
+					},
+					onBlur: () => {
+						setAssumeOnNextLink(false);
+					},
+					onChange: (e) => {
+						setAssumeOnNextLink(false);
+						setForceFunctionDialog(false);
+						setValue(e.target.value);
+						syncScroll(inputRef, overlayRef);
+						if (comboboxState.isOpen && mode === "text") comboboxState.setOpen(false);
+					}
+				}),
+				"data-smart-text-input": "true",
+				ref: inputRef,
+				value,
+				placeholder,
+				disabled,
+				size,
+				$variant: variant,
+				"aria-haspopup": popupMode === "function-dialog" || popupMode === "code-dialog" ? "dialog" : inputProps["aria-haspopup"],
+				...suppressPopover ? { "aria-expanded": false } : {}
+			})
+		}), !suppressPopover && /* @__PURE__ */ jsx(SmartTextInputPopover, {
+			id: `${id}__popover`,
+			comboboxState,
+			popoverRef,
+			inputRef,
+			variant,
+			isDialog: showFunctionDialog || showCodeDialog,
+			onDialogClose: handleDialogCancel,
+			dialogFocusRef,
+			portalContainerRef,
+			footer: popoverFooterRendered,
+			children: showFunctionDialog && functionAtCursor != null ? /* @__PURE__ */ jsx(SmartTextInputFunctionDialog, {
+				id: combobox.listBoxProps.id,
+				inputRef,
+				functionAtCursor,
+				nextPossibleChains,
+				chainRoots,
+				onConfirm: handleFunctionConfirm,
+				onCancel: handleDialogCancel,
+				renderFunctionForm,
+				renderCustomFunctionDetail,
+				openCodeChainFunctionPanel: openCcfPanel
+			}) : showCodeDialog ? /* @__PURE__ */ jsx(SmartTextInputCodeDialog, {
+				id: combobox.listBoxProps.id,
+				inputRef,
+				onConfirm: handleCodeConfirm,
+				onCancel: handleDialogCancel
+			}) : /* @__PURE__ */ jsx(SmartTextInputListbox, {
+				comboboxState,
+				listBoxRef,
+				listBoxProps: combobox.listBoxProps,
+				mode,
+				isLoading,
+				openCodeChainFunctionPanel: openCcfPanel ? () => {
+					openCcfPanel({
+						initialName: query,
+						inputSchema: currentSchema
+					});
+				} : void 0
+			})
+		})]
+	}), renderCcfPanel()] });
+};
+//#endregion
+//#region components/SmartTextInput/SmartTextInputField.tsx
+const SmartTextInputForField = (props) => {
+	const field = useFormField({ inputId: props.id });
+	return /* @__PURE__ */ jsx(SmartTextInput, {
+		...props,
+		id: field.inputId,
+		"aria-labelledby": field.labelId
+	});
+};
+/**
+* FormField wrapper for SmartTextInput so callers can use shared
+* helper/warning/error text plumbing without duplicating wrappers.
+*/
+const SmartTextInputField = (props) => {
+	const [fromInputErrorText, setErrorText] = useState(null);
+	const { formFieldProps, inputProps } = splitOutFormFieldProps(props);
+	const { formFieldStyle, hasError, asTableBoxCell, tableBoxCellProps, ...rest } = inputProps;
+	const errorText = formFieldProps.errorText ?? fromInputErrorText;
+	if (asTableBoxCell) return /* @__PURE__ */ jsx(TableBoxField.Cell, {
+		...tableBoxCellProps,
+		children: /* @__PURE__ */ jsx(SmartTextInputForField, {
+			onValidationChange: setErrorText,
+			variant: "table-cell",
+			size: "sm",
+			...rest
+		})
+	});
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		inputId: formFieldProps.inputId ?? rest.id,
+		errorText,
+		hasError: hasError || !!errorText,
+		style: formFieldStyle,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			spacing: Spacing[1],
+			fullWidth: true,
+			children: [/* @__PURE__ */ jsx(SmartTextInputForField, {
+				onValidationChange: setErrorText,
+				...rest
+			}), errorText && formFieldProps.configField && /* @__PURE__ */ jsx(ErrorText, { children: errorText })]
+		})
+	});
+};
+//#endregion
+export { Mode, SmartTextInputField, ValueType, SmartTextInput as default };
+
+//# sourceMappingURL=index.mjs.map