@pipe0/react 0.0.5 → 0.0.6

package/dist/components/defaults/adapters/json-extraction-input.mjs

@@ -1,70 +1,169 @@
+import { cn } from "../../../lib/utils.mjs";
 import { Button } from "../../ui/button.mjs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.mjs";
 import { Input } from "../../ui/input.mjs";
-import { IconPlus, IconTrash } from "../../internal/icons.mjs";
+import { IconChevronDown, IconEye, IconEyeOff, IconPlus, IconRefresh, IconTrash } from "../../internal/icons.mjs";
 import { HoverInfo } from "../../hover-info.mjs";
-import { Badge } from "../../ui/badge.mjs";
 import { useFieldError } from "../../../hooks/use-field-error.mjs";
 import { Label } from "../../ui/label.mjs";
 import { useJsonataPreview } from "../../../hooks/use-jsonata-preview.mjs";
 import { generateRandomString } from "../../../utils/generate-random-string.mjs";
-import { ToggleAdvancedButton } from "../toggle-advanced-button.mjs";
 import { useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { RECORD_FIELD_TYPES, TYPES_TO_FORMATS } from "@pipe0/base";
-import { Collapsible } from "@base-ui/react/collapsible";
-import { Tabs } from "@base-ui/react/tabs";
 
 //#region src/components/defaults/adapters/json-extraction-input.tsx
+function inferPreviewType(value) {
+	if (value === null) return "null";
+	if (value === void 0) return "undefined";
+	if (Array.isArray(value)) return "array";
+	if (typeof value === "object") return "object";
+	return typeof value;
+}
+const TOKEN_REGEX = /("(?:\\.|[^"\\])*"\s*:)|("(?:\\.|[^"\\])*")|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(true|false)|(null)/g;
+/**
+* Renders pretty-printed JSON with inline syntax styling. Sans-serif on
+* purpose — this surface inherits the form's display font, so we set
+* `font-sans` to override the scoped preflight that defaults <pre> to mono.
+*/
+function JsonHighlight({ value }) {
+	const json = useMemo(() => {
+		try {
+			return JSON.stringify(value, null, 2) ?? String(value);
+		} catch {
+			return String(value);
+		}
+	}, [value]);
+	return /* @__PURE__ */ jsx("pre", {
+		className: "pz:m-0 pz:font-sans pz:whitespace-pre pz:tabular-nums pz:text-xs pz:leading-5 pz:text-foreground",
+		children: useMemo(() => {
+			const out = [];
+			let lastIndex = 0;
+			let key = 0;
+			TOKEN_REGEX.lastIndex = 0;
+			let match;
+			while ((match = TOKEN_REGEX.exec(json)) !== null) {
+				if (match.index > lastIndex) out.push(json.slice(lastIndex, match.index));
+				const [whole, propKey, str, num, bool, nul] = match;
+				if (propKey) out.push(/* @__PURE__ */ jsx("span", {
+					className: "pz:text-foreground/80",
+					children: propKey
+				}, key++));
+				else if (str) out.push(/* @__PURE__ */ jsx("span", {
+					className: "pz:text-emerald-700 pz:dark:text-emerald-400",
+					children: str
+				}, key++));
+				else if (num) out.push(/* @__PURE__ */ jsx("span", {
+					className: "pz:text-amber-700 pz:dark:text-amber-400",
+					children: num
+				}, key++));
+				else if (bool) out.push(/* @__PURE__ */ jsx("span", {
+					className: "pz:text-rose-700 pz:dark:text-rose-400",
+					children: bool
+				}, key++));
+				else if (nul) out.push(/* @__PURE__ */ jsx("span", {
+					className: "pz:text-muted-foreground pz:italic",
+					children: nul
+				}, key++));
+				else out.push(whole);
+				lastIndex = match.index + whole.length;
+			}
+			if (lastIndex < json.length) out.push(json.slice(lastIndex));
+			return out;
+		}, [json])
+	});
+}
+function PreviewStatusPill({ type, state }) {
+	const dotClass = {
+		resolved: "pz:bg-emerald-500",
+		loading: "pz:bg-amber-500 pz:animate-pulse",
+		error: "pz:bg-destructive"
+	}[state];
+	const label = state === "error" ? "Error" : state === "loading" ? "Resolving" : "Resolved";
+	return /* @__PURE__ */ jsxs("span", {
+		className: "pz:inline-flex pz:items-center pz:gap-1.5 pz:text-xs pz:text-muted-foreground pz:font-normal",
+		children: [
+			/* @__PURE__ */ jsx("span", { className: cn("pz:size-1.5 pz:rounded-full pz:shrink-0", dotClass) }),
+			label,
+			state !== "error" && type && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "pz:text-muted-foreground/60",
+				children: "·"
+			}), /* @__PURE__ */ jsx("span", { children: type })] })
+		]
+	});
+}
+function PreviewTab({ active, onClick, children }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick,
+		className: cn("pz:relative pz:px-0.5 pz:py-2 pz:text-xs pz:transition-colors pz:outline-none pz:focus-visible:text-foreground", active ? "pz:font-medium pz:text-foreground" : "pz:font-normal pz:text-muted-foreground pz:hover:text-foreground"),
+		children: [children, active && /* @__PURE__ */ jsx("span", { className: "pz:absolute pz:inset-x-0 pz:-bottom-px pz:h-0.5 pz:bg-foreground pz:rounded-full" })]
+	});
+}
 function ExtractionPreview({ exampleValue, extraction }) {
+	const [tab, setTab] = useState("extracted");
 	const { preview, error, isLoading } = useJsonataPreview(extraction.path, exampleValue);
-	return /* @__PURE__ */ jsxs(Tabs.Root, {
-		defaultValue: "extracted",
-		className: "pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-input pz:bg-muted/30",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "pz:flex pz:items-center pz:justify-between pz:px-2 pz:py-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "pz:text-xs pz:font-medium pz:text-muted-foreground",
-					children: "Preview"
-				}), /* @__PURE__ */ jsxs(Tabs.List, {
-					className: "pz:inline-flex pz:gap-1",
-					children: [
-						isLoading && /* @__PURE__ */ jsx("span", {
-							className: "pz:text-xs pz:text-muted-foreground",
-							children: "..."
-						}),
-						/* @__PURE__ */ jsx(Tabs.Tab, {
-							value: "extracted",
-							className: "pz:rounded-sm pz:px-2 pz:py-0.5 pz:text-xs pz:hover:bg-accent pz:data-[active]:bg-accent pz:data-[active]:text-accent-foreground",
-							children: "Extracted"
-						}),
-						/* @__PURE__ */ jsx(Tabs.Tab, {
-							value: "full",
-							className: "pz:rounded-sm pz:px-2 pz:py-0.5 pz:text-xs pz:hover:bg-accent pz:data-[active]:bg-accent pz:data-[active]:text-accent-foreground",
-							children: "Full value"
-						})
-					]
+	const state = error ? "error" : isLoading ? "loading" : "resolved";
+	const previewType = useMemo(() => inferPreviewType(preview), [preview]);
+	const valueToShow = tab === "extracted" ? preview : exampleValue;
+	const tintClass = state === "error" ? "pz:bg-rose-50/60 pz:dark:bg-rose-950/20" : "pz:bg-emerald-50/50 pz:dark:bg-emerald-950/15";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:flex pz:min-w-0 pz:flex-col pz:overflow-hidden pz:rounded-md pz:border pz:border-input",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:items-center pz:justify-between pz:gap-2 pz:px-3 pz:bg-background pz:border-b pz:border-input",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:items-center pz:gap-3",
+				children: [/* @__PURE__ */ jsx(PreviewTab, {
+					active: tab === "extracted",
+					onClick: () => setTab("extracted"),
+					children: "Extracted"
+				}), /* @__PURE__ */ jsx(PreviewTab, {
+					active: tab === "full",
+					onClick: () => setTab("full"),
+					children: "Full response"
 				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:items-center pz:gap-2 pz:py-1",
+				children: [/* @__PURE__ */ jsx(PreviewStatusPill, {
+					type: tab === "extracted" ? previewType : inferPreviewType(exampleValue),
+					state: tab === "extracted" ? state : "resolved"
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("pz:text-muted-foreground/60 pz:transition-opacity", isLoading && "pz:animate-spin pz:text-muted-foreground"),
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(IconRefresh, {
+						width: 12,
+						height: 12
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("pz:max-h-44 pz:max-w-full pz:overflow-auto pz:p-3 pz:relative", tab === "extracted" ? tintClass : "pz:bg-muted/20"),
+			children: tab === "extracted" && error ? /* @__PURE__ */ jsx("pre", {
+				className: "pz:m-0 pz:font-sans pz:whitespace-pre-wrap pz:break-words pz:text-xs pz:leading-5 pz:text-destructive",
+				children: error
+			}) : /* @__PURE__ */ jsx(JsonHighlight, { value: valueToShow })
+		})]
+	});
+}
+function FieldRow({ label, hint, error, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:flex pz:flex-col pz:gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs(Label, {
+				className: "pz:inline-flex pz:items-center pz:gap-1 pz:text-xs pz:font-medium pz:text-muted-foreground",
+				children: [label, hint && /* @__PURE__ */ jsx(HoverInfo, { children: hint })]
 			}),
-			/* @__PURE__ */ jsx(Tabs.Panel, {
-				value: "full",
-				children: /* @__PURE__ */ jsx("pre", {
-					className: "pz:m-0 pz:overflow-auto pz:rounded-b-md pz:bg-muted/30 pz:p-2 pz:text-xs pz:text-foreground",
-					children: JSON.stringify(exampleValue, null, 2)
-				})
-			}),
-			/* @__PURE__ */ jsx(Tabs.Panel, {
-				value: "extracted",
-				children: /* @__PURE__ */ jsx("pre", {
-					className: "pz:m-0 pz:overflow-auto pz:rounded-b-md pz:bg-muted/30 pz:p-2 pz:text-xs pz:text-foreground",
-					children: error ? error : JSON.stringify(preview, null, 2)
-				})
+			children,
+			error && /* @__PURE__ */ jsx("span", {
+				className: "pz:text-destructive pz:text-xs pz:font-medium",
+				role: "alert",
+				children: error
 			})
 		]
 	});
 }
-function ExtractionCard({ extraction, idx, isLast, option, form, basePath, onUpdate, onRemove, onAdd }) {
+function ExtractionCard({ extraction, idx, option, form, basePath, onUpdate, onRemove }) {
+	const [open, setOpen] = useState(true);
 	const [showPreview, setShowPreview] = useState(false);
 	const extractionPath = `${basePath}.extractions.${idx}`;
 	const pathError = useFieldError(form, `${extractionPath}.path`);
@@ -91,131 +190,122 @@ function ExtractionCard({ extraction, idx, isLast, option, form, basePath, onUpd
 			output_field: newOutputField
 		});
 	};
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-		className: "pz:flex pz:flex-col pz:gap-2 pz:border-t pz:border-b pz:border-input pz:p-3",
+	const canPreview = option.exampleValue != null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:flex pz:min-w-0 pz:flex-col pz:overflow-hidden pz:rounded-lg pz:border pz:border-input pz:bg-background",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "pz:flex pz:items-center pz:justify-between",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "pz:h-7 pz:px-2 pz:font-semibold pz:select-none pz:text-xs pz:rounded-sm pz:bg-accent pz:border pz:border-input pz:text-muted-foreground pz:grid pz:place-content-center",
-				children: [idx + 1, ". Extraction"]
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: "destructive",
-				size: "icon",
-				className: "pz:[&_svg]:size-3 pz:size-7 pz:rounded-sm",
-				onClick: () => onRemove(idx),
-				title: "Remove condition",
-				children: /* @__PURE__ */ jsx(IconTrash, {})
+			className: "pz:flex pz:items-center pz:justify-between pz:gap-2 pz:px-3 pz:py-1.5",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setOpen((v) => !v),
+				className: "pz:inline-flex pz:items-center pz:gap-1.5 pz:rounded-sm pz:py-1 pz:pr-1.5 pz:text-sm pz:font-medium pz:text-foreground pz:outline-none pz:focus-visible:ring-3 pz:focus-visible:ring-ring/50",
+				children: [
+					/* @__PURE__ */ jsx(IconChevronDown, {
+						width: 14,
+						height: 14,
+						className: "pz:text-muted-foreground pz:transition-transform",
+						style: { transform: open ? "rotate(0deg)" : "rotate(-90deg)" }
+					}),
+					"Extraction ",
+					idx + 1
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:items-center pz:gap-0.5",
+				children: [canPreview ? /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "xs",
+					onClick: () => {
+						if (!open) setOpen(true);
+						setShowPreview((v) => !v);
+					},
+					className: "pz:text-muted-foreground pz:hover:text-foreground pz:font-normal",
+					children: [showPreview ? /* @__PURE__ */ jsx(IconEyeOff, {}) : /* @__PURE__ */ jsx(IconEye, {}), showPreview ? "Hide preview" : "Preview"]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "pz:text-xs pz:text-muted-foreground pz:px-1.5",
+					children: "No preview"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: () => onRemove(idx),
+					title: "Remove extraction",
+					className: "pz:text-muted-foreground pz:hover:text-destructive pz:hover:bg-destructive/10",
+					children: /* @__PURE__ */ jsx(IconTrash, {})
+				})]
 			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "pz:flex pz:flex-col pz:gap-2",
+		}), open && /* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:min-w-0 pz:flex-col pz:gap-3 pz:px-3 pz:pt-1 pz:pb-3",
 			children: [
-				option.exampleValue && showPreview && /* @__PURE__ */ jsx(ExtractionPreview, {
+				showPreview && canPreview && /* @__PURE__ */ jsx(ExtractionPreview, {
 					exampleValue: option.exampleValue,
 					extraction
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "pz:flex pz:flex-col pz:gap-1",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "pz:flex pz:items-center pz:justify-between",
-							children: [/* @__PURE__ */ jsxs(Label, {
-								className: "pz:text-xs pz:text-muted-foreground pz:inline-flex pz:items-center pz:gap-1",
-								children: ["Path ", /* @__PURE__ */ jsx(HoverInfo, { children: "Use JSONata" })]
-							}), option.exampleValue ? /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "sm",
-								onClick: () => setShowPreview(!showPreview),
-								children: showPreview ? "Hide preview" : "Show preview"
-							}) : /* @__PURE__ */ jsx("span", {
-								className: "pz:text-xs pz:text-muted-foreground",
-								children: "No preview available"
-							})]
-						}),
-						/* @__PURE__ */ jsx(Input, {
-							value: extraction.path,
-							onChange: (e) => updatePath(e.target.value),
-							placeholder: "ex. emails[0].value",
-							"aria-invalid": !!pathError
-						}),
-						pathError && /* @__PURE__ */ jsx("span", {
-							className: "pz:text-destructive pz:text-xs pz:font-medium",
-							role: "alert",
-							children: pathError
-						})
-					]
+				/* @__PURE__ */ jsx(FieldRow, {
+					label: "Output field label",
+					hint: "The display name for this field.",
+					children: /* @__PURE__ */ jsx(Input, {
+						value: extraction.output_field.label ?? "",
+						onChange: (e) => updateOutputField("label", e.target.value),
+						placeholder: "e.g. Full name"
+					})
+				}),
+				/* @__PURE__ */ jsx(FieldRow, {
+					label: "Path",
+					hint: "JSONata expression. Use dot or bracket notation to reach nested values.",
+					error: pathError,
+					children: /* @__PURE__ */ jsx(Input, {
+						value: extraction.path,
+						onChange: (e) => updatePath(e.target.value),
+						placeholder: "e.g. emails[0].value",
+						"aria-invalid": !!pathError
+					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "pz:flex pz:items-end pz:gap-2",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "pz:flex pz:flex-col pz:gap-1 pz:flex-1",
-						children: [/* @__PURE__ */ jsx(Label, {
-							className: "pz:text-xs pz:text-muted-foreground",
-							children: "Output Type"
-						}), /* @__PURE__ */ jsxs(Select, {
+					className: "pz:grid pz:grid-cols-2 pz:gap-2",
+					children: [/* @__PURE__ */ jsx(FieldRow, {
+						label: "Output type",
+						children: /* @__PURE__ */ jsxs(Select, {
 							value: extraction.output_field.type,
 							onValueChange: (v) => updateOutputField("type", v),
-							children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsx(SelectContent, { children: RECORD_FIELD_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, {
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								className: "pz:w-full",
+								children: /* @__PURE__ */ jsx(SelectValue, {})
+							}), /* @__PURE__ */ jsx(SelectContent, { children: RECORD_FIELD_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, {
 								value: type,
 								children: type
 							}, type)) })]
-						})]
-					}), availableFormats.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "pz:flex pz:flex-col pz:gap-1 pz:flex-1",
-						children: [/* @__PURE__ */ jsx(Label, {
-							className: "pz:text-xs pz:text-muted-foreground",
-							children: "Format"
-						}), /* @__PURE__ */ jsxs(Select, {
+						})
+					}), /* @__PURE__ */ jsx(FieldRow, {
+						label: "Format",
+						children: /* @__PURE__ */ jsxs(Select, {
 							value: extraction.output_field.format || "",
 							onValueChange: (v) => updateOutputField("format", v),
-							children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select format" }) }), /* @__PURE__ */ jsx(SelectContent, { children: availableFormats.map((format) => /* @__PURE__ */ jsx(SelectItem, {
+							disabled: availableFormats.length === 0,
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								className: "pz:w-full",
+								children: /* @__PURE__ */ jsx(SelectValue, { placeholder: availableFormats.length === 0 ? "—" : "Select format" })
+							}), /* @__PURE__ */ jsx(SelectContent, { children: availableFormats.map((format) => /* @__PURE__ */ jsx(SelectItem, {
 								value: format,
 								children: format
 							}, format)) })]
-						})]
+						})
 					})]
 				}),
-				/* @__PURE__ */ jsxs(Collapsible.Root, { children: [/* @__PURE__ */ jsx(Collapsible.Trigger, { render: /* @__PURE__ */ jsx(ToggleAdvancedButton, { children: "Open advanced" }) }), /* @__PURE__ */ jsxs(Collapsible.Panel, {
-					className: "pz:flex pz:flex-col pz:gap-2 pz:pt-2",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "pz:flex pz:flex-col pz:gap-1",
-						children: [
-							/* @__PURE__ */ jsx(Label, {
-								className: "pz:text-xs pz:text-muted-foreground",
-								children: "Outpue field name"
-							}),
-							/* @__PURE__ */ jsx(Input, {
-								value: extraction.output_field.name,
-								onChange: (e) => updateOutputField("name", e.target.value),
-								"aria-invalid": !!nameError
-							}),
-							nameError && /* @__PURE__ */ jsx("span", {
-								className: "pz:text-destructive pz:text-xs pz:font-medium",
-								role: "alert",
-								children: nameError
-							})
-						]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "pz:flex pz:flex-col pz:gap-1",
-						children: [/* @__PURE__ */ jsx(Label, {
-							className: "pz:text-xs pz:text-muted-foreground",
-							children: "Output field label"
-						}), /* @__PURE__ */ jsx(Input, {
-							value: extraction.output_field.label,
-							onChange: (e) => updateOutputField("label", e.target.value),
-							placeholder: "Describe your new field"
-						})]
-					})]
-				})] })
+				/* @__PURE__ */ jsx(FieldRow, {
+					label: "Output field name",
+					hint: "The internal identifier for this field. Must be unique.",
+					error: nameError,
+					children: /* @__PURE__ */ jsx(Input, {
+						value: extraction.output_field.name,
+						onChange: (e) => updateOutputField("name", e.target.value),
+						placeholder: "extract_full_name",
+						"aria-invalid": !!nameError
+					})
+				})
 			]
 		})]
-	}), isLast && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Button, {
-		type: "button",
-		variant: "link",
-		size: "xs",
-		onClick: onAdd,
-		children: [/* @__PURE__ */ jsx(IconPlus, {}), "Add path"]
-	}) })] });
+	});
 }
 function JsonExtractionInputAdapter(field) {
 	const meta = field.meta;
@@ -245,12 +335,6 @@ function JsonExtractionInputAdapter(field) {
 		});
 		else field.setValue(newValue);
 	};
-	const removeAllExtractions = () => {
-		field.form.resetField(field.path, { defaultValue: {
-			field_name: "",
-			extractions: []
-		} });
-	};
 	const updateExtraction = (idx, ext) => {
 		const newExtractions = [...value.extractions];
 		newExtractions[idx] = ext;
@@ -272,60 +356,68 @@ function JsonExtractionInputAdapter(field) {
 		});
 	};
 	const option = useMemo(() => meta.fields.find((e) => e.fieldName === value.field_name), [value.field_name, meta.fields]);
-	return /* @__PURE__ */ jsx("div", {
+	if (value.field_name && value.extractions.length > 0 && option) return /* @__PURE__ */ jsxs("div", {
 		"data-p0": "input",
-		className: "pz:flex pz:flex-col pz:gap-3",
-		children: value.field_name && value.extractions.length > 0 && option ? /* @__PURE__ */ jsxs("div", {
-			className: "pz:flex pz:flex-col pz:gap-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "pz:flex pz:items-center pz:justify-between",
-				children: [/* @__PURE__ */ jsxs(Badge, {
-					variant: "secondary",
-					className: "pz:h-7 pz:bg-accent pz:border-input pz:border pz:text-accent-foreground pz:font-normal",
-					children: ["Field: ", /* @__PURE__ */ jsx("b", { children: option.fieldLabel || option.fieldName })]
-				}), /* @__PURE__ */ jsxs(Button, {
-					type: "button",
-					variant: "destructive",
-					size: "xs",
-					className: "pz:font-normal pz:h-7",
-					onClick: removeAllExtractions,
-					children: ["Reset ", /* @__PURE__ */ jsx(IconTrash, {})]
+		className: "pz:flex pz:min-w-0 pz:flex-col pz:gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "pz:flex pz:min-w-0 pz:items-center pz:gap-1.5 pz:text-xs pz:text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { children: "Extracting from" }), /* @__PURE__ */ jsx("span", {
+					className: "pz:truncate pz:font-medium pz:text-foreground",
+					children: option.fieldLabel || option.fieldName
 				})]
-			}), value.extractions.map((extraction, idx) => /* @__PURE__ */ jsx(ExtractionCard, {
+			}),
+			value.extractions.map((extraction, idx) => /* @__PURE__ */ jsx(ExtractionCard, {
 				extraction,
 				idx,
-				isLast: idx === value.extractions.length - 1,
 				option,
 				form: field.form,
 				basePath: field.path,
 				onUpdate: updateExtraction,
-				onRemove: removeExtraction,
-				onAdd: () => addExtraction()
-			}, idx))]
-		}) : meta.fields.length > 0 ? /* @__PURE__ */ jsx("div", {
-			className: "pz:flex pz:flex-col pz:gap-2 pz:rounded-md pz:border-input",
-			children: /* @__PURE__ */ jsxs(Select, {
-				value: "",
-				onValueChange: (v) => {
-					if (v) addExtraction(v);
-				},
-				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select field" }) }), /* @__PURE__ */ jsx(SelectContent, { children: meta.fields.map((f) => /* @__PURE__ */ jsxs(SelectItem, {
-					value: f.fieldName,
-					children: [
-						f.fieldLabel,
-						" - ",
-						f.fieldName
-					]
-				}, f.fieldName)) })]
+				onRemove: removeExtraction
+			}, idx)),
+			/* @__PURE__ */ jsx("div", {
+				className: "pz:flex pz:items-center pz:justify-between pz:pt-0.5",
+				children: /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "link",
+					size: "xs",
+					onClick: () => addExtraction(),
+					className: "pz:px-0",
+					children: [/* @__PURE__ */ jsx(IconPlus, {}), "Add extraction"]
+				})
 			})
-		}) : /* @__PURE__ */ jsxs("div", {
-			className: "pz:flex pz:items-center pz:gap-1.5 pz:rounded-md pz:px-1",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "pz:text-xs pz:font-normal",
-				children: "No JSON field available"
-			}), /* @__PURE__ */ jsx(HoverInfo, { children: "A JSON field is required for this pipe. Add a json field to your pipeline." })]
+		]
+	});
+	if (meta.fields.length > 0) return /* @__PURE__ */ jsx("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-2",
+		children: /* @__PURE__ */ jsxs(Select, {
+			value: "",
+			onValueChange: (v) => {
+				if (v) addExtraction(v);
+			},
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "pz:w-full",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a JSON field to extract from" })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: meta.fields.map((f) => /* @__PURE__ */ jsxs(SelectItem, {
+				value: f.fieldName,
+				children: [
+					f.fieldLabel,
+					" - ",
+					f.fieldName
+				]
+			}, f.fieldName)) })]
 		})
 	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:items-center pz:gap-1.5 pz:rounded-md pz:px-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pz:text-xs pz:font-normal",
+			children: "No JSON field available"
+		}), /* @__PURE__ */ jsx(HoverInfo, { children: "A JSON field is required for this pipe. Add a json field to your pipeline." })]
+	});
 }
 
 //#endregion