@pipe0/react 0.0.2

package/dist/components/defaults/adapters/prompt-input.mjs

@@ -0,0 +1,208 @@
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Input } from "../../ui/input.mjs";
+import { IconCheck, IconPencil, IconPlus, IconTrash } from "../../internal/icons.mjs";
+import { useFieldError } from "../../../hooks/use-field-error.mjs";
+import { generateRandomString } from "../../../utils/generate-random-string.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.mjs";
+import { SchemaEditor } from "../../internal/schema-editor/SchemaEditor.mjs";
+import { LiquidEditor } from "../../internal/LiquidEditor/LiquidEditor.mjs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/prompt-input.tsx
+function ChangeSchemaNameForm({ defaultName, existingNames, onSubmit, onClose }) {
+	const [inputValue, setInputValue] = useState(defaultName);
+	const trimmed = inputValue.trim();
+	const isDuplicate = trimmed !== defaultName && existingNames.includes(trimmed);
+	const isInvalid = !trimmed || isDuplicate;
+	const handleSubmit = () => {
+		if (isInvalid) return;
+		if (defaultName !== trimmed) onSubmit(trimmed);
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:flex pz:flex-col pz:gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:items-center pz:gap-2",
+			children: [/* @__PURE__ */ jsx(Input, {
+				placeholder: "Change name…",
+				value: inputValue,
+				onChange: (e) => setInputValue(e.target.value),
+				minLength: 1,
+				"aria-invalid": isDuplicate,
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						handleSubmit();
+					}
+				}
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				onClick: handleSubmit,
+				disabled: isInvalid,
+				children: /* @__PURE__ */ jsx(IconCheck, {
+					width: 14,
+					height: 14
+				})
+			})]
+		}), isDuplicate && /* @__PURE__ */ jsx("span", {
+			className: "pz:text-destructive pz:text-xs pz:font-medium",
+			role: "alert",
+			children: "A schema with that name already exists."
+		})]
+	});
+}
+/**
+* Prompt editor with Tiptap rich text, @/​ autocomplete, and JSON schema management.
+* For a more customized editor, provide a custom adapter via FormProvider.
+*/
+const EMPTY_PROMPT = {
+	template: "",
+	json_schemas: {}
+};
+function PromptInputAdapter(field) {
+	const meta = field.meta;
+	const value = field.value ?? EMPTY_PROMPT;
+	const templateError = useFieldError(field.form, `${field.path}.template`);
+	const tableData = useMemo(() => Object.entries(value.json_schemas || {}), [value.json_schemas]);
+	const formRef = field.form;
+	const path = field.path;
+	const readCurrent = useCallback(() => formRef.getValues(path) ?? EMPTY_PROMPT, [formRef, path]);
+	const handleChange = useCallback((v) => field.setValue(v), [field]);
+	const handleAddSchema = useCallback((schemaName) => {
+		const current = readCurrent();
+		if (current.json_schemas?.[schemaName]) return;
+		handleChange({
+			...current,
+			json_schemas: {
+				...current.json_schemas,
+				[schemaName]: {
+					type: "object",
+					properties: {}
+				}
+			}
+		});
+	}, [handleChange, readCurrent]);
+	const handleChangeSchemaName = useCallback((oldName, newName) => {
+		const current = readCurrent();
+		const schemas = current.json_schemas ?? {};
+		if (!schemas[oldName] || oldName === newName || schemas[newName]) return;
+		const { [oldName]: oldSchema, ...rest } = schemas;
+		handleChange({
+			template: current.template,
+			json_schemas: {
+				...rest,
+				[newName]: oldSchema
+			}
+		});
+	}, [handleChange, readCurrent]);
+	const handleDeleteSchema = useCallback((schemaName) => {
+		const current = readCurrent();
+		if (!current.json_schemas?.[schemaName]) return;
+		const { [schemaName]: _removed, ...rest } = current.json_schemas;
+		handleChange({
+			template: current.template,
+			json_schemas: rest
+		});
+	}, [handleChange, readCurrent]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-invalid": !!templateError,
+				className: cn("pz:rounded-md pz:border pz:border-input pz:bg-transparent pz:shadow-xs", templateError && "pz:border-destructive"),
+				children: /* @__PURE__ */ jsx(LiquidEditor, {
+					value: value.template,
+					onChange: (v) => handleChange({
+						...value,
+						template: v
+					}),
+					inputFields: meta.inputFields ?? [],
+					searchSecrets: field.searchSecrets,
+					multiline: true,
+					autoGrow: true,
+					directives: (meta.supportedTags ?? ["input", "output"]).includes("output") ? ["output"] : []
+				})
+			}),
+			templateError && /* @__PURE__ */ jsx("span", {
+				className: "pz:text-destructive pz:text-xs pz:font-medium",
+				role: "alert",
+				children: templateError
+			}),
+			/* @__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__ */ jsx("span", {
+						className: "pz:text-sm pz:font-medium",
+						children: "JSON Schemas"
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						onClick: () => handleAddSchema(generateRandomString(5)),
+						children: [/* @__PURE__ */ jsx(IconPlus, {
+							width: 14,
+							height: 14
+						}), " Add"]
+					})]
+				}), tableData.length > 0 && /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableHead, { children: "Name" }), /* @__PURE__ */ jsx(TableHead, { children: "Schema" })] }) }), /* @__PURE__ */ jsx(TableBody, { children: tableData.map(([schemaName, schema]) => /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsxs(TableCell, {
+					className: "pz:flex pz:items-center pz:gap-1",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: schemaName }),
+						/* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							title: "Rename",
+							children: /* @__PURE__ */ jsx(IconPencil, {
+								width: 12,
+								height: 12
+							})
+						}) }), /* @__PURE__ */ jsx(PopoverContent, {
+							sideOffset: 4,
+							className: "pz:w-auto pz:p-2",
+							children: /* @__PURE__ */ jsx(ChangeSchemaNameForm, {
+								defaultName: schemaName,
+								existingNames: Object.keys(value.json_schemas || {}),
+								onSubmit: (newName) => handleChangeSchemaName(schemaName, newName),
+								onClose: () => {}
+							})
+						})] }),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							onClick: () => handleDeleteSchema(schemaName),
+							title: "Delete schema",
+							children: /* @__PURE__ */ jsx(IconTrash, {
+								width: 12,
+								height: 12
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(SchemaEditor, {
+					value: schema,
+					onChange: (newSchema) => {
+						handleChange({
+							...value,
+							json_schemas: {
+								...value.json_schemas,
+								[schemaName]: newSchema
+							}
+						});
+					}
+				}) })] }, schemaName)) })] })]
+			})
+		]
+	});
+}
+
+//#endregion
+export { PromptInputAdapter };
+//# sourceMappingURL=prompt-input.mjs.map

package/dist/components/defaults/adapters/prompt-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/prompt-input.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport { useFieldError } from \"../../../hooks/use-field-error.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport type { BaseFieldProps } from \"../../../types/field-props.js\";\nimport { generateRandomString } from \"../../../utils/generate-random-string.js\";\nimport { IconCheck, IconPencil, IconPlus, IconTrash } from \"../../internal/icons.js\";\nimport { LiquidEditor } from \"../../internal/LiquidEditor/LiquidEditor.js\";\nimport { SchemaEditor } from \"../../internal/schema-editor/SchemaEditor.js\";\nimport { Button } from \"../../ui/button.js\";\nimport { Input } from \"../../ui/input.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/popover.js\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../../ui/table.js\";\n\nfunction ChangeSchemaNameForm({\n  defaultName,\n  existingNames,\n  onSubmit,\n  onClose,\n}: {\n  defaultName: string;\n  existingNames: string[];\n  onSubmit: (newName: string) => void;\n  onClose: () => void;\n}) {\n  const [inputValue, setInputValue] = useState(defaultName);\n  const trimmed = inputValue.trim();\n  const isDuplicate = trimmed !== defaultName && existingNames.includes(trimmed);\n  const isInvalid = !trimmed || isDuplicate;\n\n  const handleSubmit = () => {\n    if (isInvalid) return;\n    if (defaultName !== trimmed) onSubmit(trimmed);\n    onClose();\n  };\n\n  return (\n    <div className=\"pz:flex pz:flex-col pz:gap-1\">\n      <div className=\"pz:flex pz:items-center pz:gap-2\">\n        <Input\n          placeholder=\"Change name…\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          minLength={1}\n          aria-invalid={isDuplicate}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              handleSubmit();\n            }\n          }}\n        />\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={handleSubmit}\n          disabled={isInvalid}\n        >\n          <IconCheck width={14} height={14} />\n        </Button>\n      </div>\n      {isDuplicate && (\n        <span className=\"pz:text-destructive pz:text-xs pz:font-medium\" role=\"alert\">\n          A schema with that name already exists.\n        </span>\n      )}\n    </div>\n  );\n}\n\ntype PromptValue = BaseFieldProps<\"prompt_input\">[\"value\"];\n\n/**\n * Prompt editor with Tiptap rich text, @/​ autocomplete, and JSON schema management.\n * For a more customized editor, provide a custom adapter via FormProvider.\n */\nconst EMPTY_PROMPT: PromptValue = { template: \"\", json_schemas: {} };\n\nexport function PromptInputAdapter(field: FieldHandle<\"prompt_input\">) {\n  const meta = field.meta;\n  const value = field.value ?? EMPTY_PROMPT;\n\n  const templateError = useFieldError(field.form, `${field.path}.template`);\n\n  const tableData = useMemo(() => Object.entries(value.json_schemas || {}), [value.json_schemas]);\n\n  // Mutation callbacks read the freshest value from RHF at call time instead\n  // of closing over `value` — so they depend only on stable identifiers\n  // (`field.form` and `field.path`) and don't re-create on every keystroke\n  // into the prompt template.\n  const formRef = field.form;\n  const path = field.path;\n\n  const readCurrent = useCallback(\n    (): PromptValue => (formRef.getValues(path as any) as PromptValue | undefined) ?? EMPTY_PROMPT,\n    [formRef, path],\n  );\n\n  const handleChange = useCallback((v: PromptValue) => field.setValue(v), [field]);\n\n  const handleAddSchema = useCallback(\n    (schemaName: string) => {\n      const current = readCurrent();\n      if (current.json_schemas?.[schemaName]) return;\n      handleChange({\n        ...current,\n        json_schemas: {\n          ...current.json_schemas,\n          [schemaName]: { type: \"object\", properties: {} },\n        },\n      });\n    },\n    [handleChange, readCurrent],\n  );\n\n  const handleChangeSchemaName = useCallback(\n    (oldName: string, newName: string) => {\n      const current = readCurrent();\n      const schemas = current.json_schemas ?? {};\n      if (!schemas[oldName] || oldName === newName || schemas[newName]) return;\n      const { [oldName]: oldSchema, ...rest } = schemas;\n      handleChange({ template: current.template, json_schemas: { ...rest, [newName]: oldSchema } });\n    },\n    [handleChange, readCurrent],\n  );\n\n  const handleDeleteSchema = useCallback(\n    (schemaName: string) => {\n      const current = readCurrent();\n      if (!current.json_schemas?.[schemaName]) return;\n      const { [schemaName]: _removed, ...rest } = current.json_schemas;\n      handleChange({ template: current.template, json_schemas: rest });\n    },\n    [handleChange, readCurrent],\n  );\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-3\">\n      <div\n        aria-invalid={!!templateError}\n        className={cn(\n          \"pz:rounded-md pz:border pz:border-input pz:bg-transparent pz:shadow-xs\",\n          templateError && \"pz:border-destructive\",\n        )}\n      >\n        <LiquidEditor\n          value={value.template}\n          onChange={(v) => handleChange({ ...value, template: v })}\n          inputFields={meta.inputFields ?? []}\n          searchSecrets={field.searchSecrets}\n          multiline\n          autoGrow\n          directives={\n            (meta.supportedTags ?? [\"input\", \"output\"]).includes(\"output\") ? [\"output\"] : []\n          }\n        />\n      </div>\n      {templateError && (\n        <span className=\"pz:text-destructive pz:text-xs pz:font-medium\" role=\"alert\">\n          {templateError}\n        </span>\n      )}\n\n      {/* JSON Schemas section */}\n      <div className=\"pz:flex pz:flex-col pz:gap-2\">\n        <div className=\"pz:flex pz:items-center pz:justify-between\">\n          <span className=\"pz:text-sm pz:font-medium\">JSON Schemas</span>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => handleAddSchema(generateRandomString(5))}\n          >\n            <IconPlus width={14} height={14} /> Add\n          </Button>\n        </div>\n        {tableData.length > 0 && (\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Name</TableHead>\n                <TableHead>Schema</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {tableData.map(([schemaName, schema]) => (\n                <TableRow key={schemaName}>\n                  <TableCell className=\"pz:flex pz:items-center pz:gap-1\">\n                    <span>{schemaName}</span>\n                    <Popover>\n                      <PopoverTrigger\n                        render={\n                          <Button type=\"button\" variant=\"ghost\" size=\"icon\" title=\"Rename\">\n                            <IconPencil width={12} height={12} />\n                          </Button>\n                        }\n                      />\n                      <PopoverContent sideOffset={4} className=\"pz:w-auto pz:p-2\">\n                        <ChangeSchemaNameForm\n                          defaultName={schemaName}\n                          existingNames={Object.keys(value.json_schemas || {})}\n                          onSubmit={(newName) => handleChangeSchemaName(schemaName, newName)}\n                          onClose={() => {}}\n                        />\n                      </PopoverContent>\n                    </Popover>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      onClick={() => handleDeleteSchema(schemaName)}\n                      title=\"Delete schema\"\n                    >\n                      <IconTrash width={12} height={12} />\n                    </Button>\n                  </TableCell>\n                  <TableCell>\n                    <SchemaEditor\n                      value={schema}\n                      onChange={(newSchema) => {\n                        handleChange({\n                          ...value,\n                          json_schemas: {\n                            ...value.json_schemas,\n                            [schemaName]: newSchema,\n                          },\n                        });\n                      }}\n                    />\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/defaults/adapters/providers-input.mjs

@@ -0,0 +1,23 @@
+import { SuggestCombobox } from "../../internal/combobox/suggest-combobox.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/providers-input.tsx
+function ProvidersInputAdapter(field) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-p0": "input",
+		children: /* @__PURE__ */ jsx(SuggestCombobox, {
+			value: (field.value ?? []).map((p) => p.provider),
+			onChange: (next) => field.setValue(next.map((provider) => ({ provider }))),
+			options: field.options,
+			maxItems: field.meta.maxItems,
+			ariaInvalid: !!field.error,
+			placeholder: "Select providers…",
+			emptyLabel: "No providers available",
+			reorderable: true
+		})
+	});
+}
+
+//#endregion
+export { ProvidersInputAdapter };
+//# sourceMappingURL=providers-input.mjs.map

package/dist/components/defaults/adapters/providers-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"providers-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/providers-input.tsx"],"sourcesContent":["import type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { SuggestCombobox } from \"../../internal/combobox/suggest-combobox.js\";\n\nexport function ProvidersInputAdapter(field: FieldHandle<\"providers_input\">) {\n  const selected = (field.value ?? []).map((p: { provider: string }) => p.provider);\n\n  return (\n    <div data-p0=\"input\">\n      <SuggestCombobox\n        value={selected}\n        onChange={(next) => field.setValue(next.map((provider) => ({ provider })))}\n        options={field.options}\n        maxItems={field.meta.maxItems}\n        ariaInvalid={!!field.error}\n        placeholder=\"Select providers…\"\n        emptyLabel=\"No providers available\"\n        reorderable\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAGA,SAAgB,sBAAsB,OAAuC;AAG3E,QACE,oBAAC,OAAD;EAAK,WAAQ;YACX,oBAAC,iBAAD;GACE,QALY,MAAM,SAAS,EAAE,EAAE,KAAK,MAA4B,EAAE,SAAS;GAM3E,WAAW,SAAS,MAAM,SAAS,KAAK,KAAK,cAAc,EAAE,UAAU,EAAE,CAAC;GAC1E,SAAS,MAAM;GACf,UAAU,MAAM,KAAK;GACrB,aAAa,CAAC,CAAC,MAAM;GACrB,aAAY;GACZ,YAAW;GACX;GACA;EACE"}

package/dist/components/defaults/adapters/range-input.mjs

@@ -0,0 +1,61 @@
+import { Input } from "../../ui/input.mjs";
+import { useFieldError } from "../../../hooks/use-field-error.mjs";
+import { Label } from "../../ui/label.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/range-input.tsx
+function RangeInputAdapter(field) {
+	const fromError = useFieldError(field.form, `${field.path}.from`);
+	const toError = useFieldError(field.form, `${field.path}.to`);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-1",
+		children: [/* @__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: "From"
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: field.from.value ?? "",
+						onChange: (e) => field.from.set(e.target.value === "" ? null : Number(e.target.value)),
+						min: field.meta.min,
+						max: field.meta.max,
+						placeholder: field.meta.unit ?? "",
+						"aria-invalid": !!fromError || !!field.error
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pz:pb-2 pz:text-muted-foreground",
+					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: "To"
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "number",
+						value: field.to.value ?? "",
+						onChange: (e) => field.to.set(e.target.value === "" ? null : Number(e.target.value)),
+						min: field.meta.min,
+						max: field.meta.max,
+						placeholder: field.meta.unit ?? "",
+						"aria-invalid": !!toError || !!field.error
+					})]
+				})
+			]
+		}), (fromError || toError) && /* @__PURE__ */ jsx("span", {
+			className: "pz:text-destructive pz:text-xs pz:font-medium",
+			role: "alert",
+			children: fromError ?? toError
+		})]
+	});
+}
+
+//#endregion
+export { RangeInputAdapter };
+//# sourceMappingURL=range-input.mjs.map

package/dist/components/defaults/adapters/range-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/range-input.tsx"],"sourcesContent":["import { useFieldError } from \"../../../hooks/use-field-error.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { Input } from \"../../ui/input.js\";\nimport { Label } from \"../../ui/label.js\";\n\nexport function RangeInputAdapter(field: FieldHandle<\"range_input\">) {\n  const fromError = useFieldError(field.form, `${field.path}.from`);\n  const toError = useFieldError(field.form, `${field.path}.to`);\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <div className=\"pz:flex pz:items-end pz:gap-2\">\n        <div className=\"pz:flex pz:flex-col pz:gap-1 pz:flex-1\">\n          <Label className=\"pz:text-xs pz:text-muted-foreground\">From</Label>\n          <Input\n            type=\"number\"\n            value={field.from.value ?? \"\"}\n            onChange={(e) => field.from.set(e.target.value === \"\" ? null : Number(e.target.value))}\n            min={field.meta.min}\n            max={field.meta.max}\n            placeholder={field.meta.unit ?? \"\"}\n            aria-invalid={!!fromError || !!field.error}\n          />\n        </div>\n        <span className=\"pz:pb-2 pz:text-muted-foreground\">–</span>\n        <div className=\"pz:flex pz:flex-col pz:gap-1 pz:flex-1\">\n          <Label className=\"pz:text-xs pz:text-muted-foreground\">To</Label>\n          <Input\n            type=\"number\"\n            value={field.to.value ?? \"\"}\n            onChange={(e) => field.to.set(e.target.value === \"\" ? null : Number(e.target.value))}\n            min={field.meta.min}\n            max={field.meta.max}\n            placeholder={field.meta.unit ?? \"\"}\n            aria-invalid={!!toError || !!field.error}\n          />\n        </div>\n      </div>\n      {(fromError || toError) && (\n        <span className=\"pz:text-destructive pz:text-xs pz:font-medium\" role=\"alert\">\n          {fromError ?? toError}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,SAAgB,kBAAkB,OAAmC;CACnE,MAAM,YAAY,cAAc,MAAM,MAAM,GAAG,MAAM,KAAK,OAAO;CACjE,MAAM,UAAU,cAAc,MAAM,MAAM,GAAG,MAAM,KAAK,KAAK;AAE7D,QACE,qBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAA/B,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAO,WAAU;gBAAsC;MAAY,GACnE,oBAAC,OAAD;MACE,MAAK;MACL,OAAO,MAAM,KAAK,SAAS;MAC3B,WAAW,MAAM,MAAM,KAAK,IAAI,EAAE,OAAO,UAAU,KAAK,OAAO,OAAO,EAAE,OAAO,MAAM,CAAC;MACtF,KAAK,MAAM,KAAK;MAChB,KAAK,MAAM,KAAK;MAChB,aAAa,MAAM,KAAK,QAAQ;MAChC,gBAAc,CAAC,CAAC,aAAa,CAAC,CAAC,MAAM;MACrC,EACE;;IACN,oBAAC,QAAD;KAAM,WAAU;eAAmC;KAAQ;IAC3D,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAO,WAAU;gBAAsC;MAAU,GACjE,oBAAC,OAAD;MACE,MAAK;MACL,OAAO,MAAM,GAAG,SAAS;MACzB,WAAW,MAAM,MAAM,GAAG,IAAI,EAAE,OAAO,UAAU,KAAK,OAAO,OAAO,EAAE,OAAO,MAAM,CAAC;MACpF,KAAK,MAAM,KAAK;MAChB,KAAK,MAAM,KAAK;MAChB,aAAa,MAAM,KAAK,QAAQ;MAChC,gBAAc,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM;MACnC,EACE;;IACF;OACJ,aAAa,YACb,oBAAC,QAAD;GAAM,WAAU;GAAgD,MAAK;aAClE,aAAa;GACT,EAEL"}

package/dist/components/defaults/adapters/select-input.mjs

@@ -0,0 +1,54 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.mjs";
+import { WidgetStrip } from "../../../widgets/widget-strip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/select-input.tsx
+function OptionContent({ label, widgets }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "pz:flex pz:items-center pz:gap-2",
+		children: [/* @__PURE__ */ jsx(WidgetStrip, { widgets }), /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+function SelectInputAdapter(field) {
+	const placeholder = field.meta.placeholder ?? "— Select —";
+	const selectedOption = field.options.find((o) => o.value === field.selectedValue);
+	const hasOptions = field.options.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-1",
+		children: [/* @__PURE__ */ jsxs(Select, {
+			value: field.selectedValue || void 0,
+			onValueChange: (v) => {
+				if (v === null) return;
+				field.onSelect(v);
+			},
+			name: field.path,
+			disabled: !hasOptions,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id: field.id,
+				"aria-invalid": !!field.error,
+				className: "pz:w-full",
+				children: /* @__PURE__ */ jsx(SelectValue, {
+					placeholder,
+					children: selectedOption ? /* @__PURE__ */ jsx(OptionContent, {
+						label: selectedOption.label,
+						widgets: selectedOption.widgets
+					}) : void 0
+				})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: field.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
+				value: opt.value,
+				children: /* @__PURE__ */ jsx(OptionContent, {
+					label: opt.label,
+					widgets: opt.widgets
+				})
+			}, opt.value)) }) })]
+		}), !hasOptions && /* @__PURE__ */ jsx("span", {
+			className: "pz:text-xs pz:text-muted-foreground",
+			children: "No options available"
+		})]
+	});
+}
+
+//#endregion
+export { SelectInputAdapter };
+//# sourceMappingURL=select-input.mjs.map

package/dist/components/defaults/adapters/select-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/select-input.tsx"],"sourcesContent":["import type { WidgetsByKind } from \"@pipe0/base\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { WidgetStrip } from \"../../../widgets/widget-strip.js\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../../ui/select.js\";\n\nfunction OptionContent({ label, widgets }: { label: string; widgets?: WidgetsByKind }) {\n  return (\n    <span className=\"pz:flex pz:items-center pz:gap-2\">\n      <WidgetStrip widgets={widgets} />\n      <span>{label}</span>\n    </span>\n  );\n}\n\nexport function SelectInputAdapter(field: FieldHandle<\"select_input\">) {\n  const placeholder = field.meta.placeholder ?? \"— Select —\";\n  const selectedOption = field.options.find((o) => o.value === field.selectedValue);\n  const hasOptions = field.options.length > 0;\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <Select\n        value={field.selectedValue || undefined}\n        onValueChange={(v) => {\n          if (v === null) return;\n          field.onSelect(v);\n        }}\n        name={field.path}\n        disabled={!hasOptions}\n      >\n        <SelectTrigger id={field.id} aria-invalid={!!field.error} className=\"pz:w-full\">\n          <SelectValue placeholder={placeholder}>\n            {selectedOption ? (\n              <OptionContent label={selectedOption.label} widgets={selectedOption.widgets} />\n            ) : undefined}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {field.options.map((opt) => (\n              <SelectItem key={opt.value} value={opt.value}>\n                <OptionContent label={opt.label} widgets={opt.widgets} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      {!hasOptions && (\n        <span className=\"pz:text-xs pz:text-muted-foreground\">No options available</span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAS,cAAc,EAAE,OAAO,WAAuD;AACrF,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,aAAD,EAAsB,SAAW,GACjC,oBAAC,QAAD,YAAO,OAAa,EACf;;;AAIX,SAAgB,mBAAmB,OAAoC;CACrE,MAAM,cAAc,MAAM,KAAK,eAAe;CAC9C,MAAM,iBAAiB,MAAM,QAAQ,MAAM,MAAM,EAAE,UAAU,MAAM,cAAc;CACjF,MAAM,aAAa,MAAM,QAAQ,SAAS;AAE1C,QACE,qBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAA/B,CACE,qBAAC,QAAD;GACE,OAAO,MAAM,iBAAiB;GAC9B,gBAAgB,MAAM;AACpB,QAAI,MAAM,KAAM;AAChB,UAAM,SAAS,EAAE;;GAEnB,MAAM,MAAM;GACZ,UAAU,CAAC;aAPb,CASE,oBAAC,eAAD;IAAe,IAAI,MAAM;IAAI,gBAAc,CAAC,CAAC,MAAM;IAAO,WAAU;cAClE,oBAAC,aAAD;KAA0B;eACvB,iBACC,oBAAC,eAAD;MAAe,OAAO,eAAe;MAAO,SAAS,eAAe;MAAW,IAC7E;KACQ;IACA,GAChB,oBAAC,eAAD,YACE,oBAAC,aAAD,YACG,MAAM,QAAQ,KAAK,QAClB,oBAAC,YAAD;IAA4B,OAAO,IAAI;cACrC,oBAAC,eAAD;KAAe,OAAO,IAAI;KAAO,SAAS,IAAI;KAAW;IAC9C,EAFI,IAAI,MAER,CACb,EACU,GACA,EACT;MACR,CAAC,cACA,oBAAC,QAAD;GAAM,WAAU;aAAsC;GAA2B,EAE/E"}

package/dist/components/defaults/adapters/tagged-text-input.mjs

@@ -0,0 +1,154 @@
+import { cn } from "../../../lib/utils.mjs";
+import { WidgetStrip } from "../../../widgets/widget-strip.mjs";
+import { LiquidEditor } from "../../internal/LiquidEditor/LiquidEditor.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useInteractions, useTransitionStyles } from "@floating-ui/react";
+
+//#region src/components/defaults/adapters/tagged-text-input.tsx
+/**
+* Adapter for `pipesTaggedTextInput`. Renders a tiptap-backed editor that
+* supports `/` to open a unified reference picker (input fields filtered
+* by `expectedTagType`, secrets, constants).
+*
+* When `meta.optionsDef` is present, the input also gains a value-suggestions
+* popover (e.g. listing the user's existing pipe0 sheets). The popover opens
+* on focus, hides automatically when the user is composing a `{{ tag }}`,
+* and is gated by `meta.optionsDef.enabledIf` (sub-feature gate — the input
+* itself stays editable in every state). Picking an option REPLACES the
+* input value with the option's value.
+*/
+function TaggedTextInputAdapter(field) {
+	const meta = field.meta;
+	const hasError = !!field.error;
+	const hasSuggestions = !!meta.optionsDef;
+	const [open, setOpen] = useState(false);
+	const valueIsTag = useMemo(() => /\{\{[^}]*\}?\}?/.test(field.value ?? ""), [field.value]);
+	const hasQuery = (field.value ?? "").trim().length > 0;
+	const { refs, floatingStyles, context } = useFloating({
+		open: hasSuggestions && open && !valueIsTag,
+		onOpenChange: (next) => {
+			if (!next) setOpen(false);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(4),
+			flip({
+				mainAxis: true,
+				crossAxis: false
+			}),
+			shift(),
+			size({ apply({ elements, rects }) {
+				elements.floating.style.minWidth = `${rects.reference.width}px`;
+				elements.floating.style.maxWidth = "32rem";
+			} })
+		]
+	});
+	const { isMounted, styles: transitionStyles } = useTransitionStyles(context);
+	const { getFloatingProps } = useInteractions([useDismiss(context, {
+		outsidePress: true,
+		outsidePressEvent: "mousedown"
+	})]);
+	const visibleOptions = useMemo(() => {
+		const q = (field.value ?? "").trim().toLowerCase();
+		if (!q) return field.options;
+		return field.options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+	}, [field.options, field.value]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: refs.setReference,
+			className: cn("pz:flex pz:rounded-lg pz:border pz:border-input pz:bg-transparent", meta.multiline ? "pz:items-start" : "pz:items-center", hasError && "pz:border-destructive/60"),
+			"aria-invalid": hasError || void 0,
+			onFocusCapture: () => {
+				if (hasSuggestions) setOpen(true);
+			},
+			onBlurCapture: (e) => {
+				const next = e.relatedTarget;
+				if (next && e.currentTarget.contains(next)) return;
+				if (next && document.querySelector("[data-p0='tagged-suggestions']")?.contains(next)) return;
+				setOpen(false);
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "pz:flex-1 pz:min-w-0",
+				children: /* @__PURE__ */ jsx(LiquidEditor, {
+					value: field.value ?? "",
+					onChange: (v) => field.setValue(v),
+					inputFields: meta.inputFields ?? [],
+					searchSecrets: field.searchSecrets,
+					placeholder: meta.placeholder,
+					multiline: meta.multiline,
+					expectedFieldType: meta.expectedTagType,
+					directives: []
+				})
+			}), hasSuggestions && /* @__PURE__ */ jsx("div", {
+				className: cn("pz:flex pz:items-center pz:gap-1 pz:pr-2 pz:text-muted-foreground", meta.multiline && "pz:pt-1"),
+				children: /* @__PURE__ */ jsx(ChevronDown, {
+					className: "pz:size-4 pz:pointer-events-none",
+					"aria-hidden": "true"
+				})
+			})]
+		}), hasSuggestions && isMounted && /* @__PURE__ */ jsxs("div", {
+			ref: refs.setFloating,
+			"data-p0": "tagged-suggestions",
+			style: {
+				...floatingStyles,
+				...transitionStyles,
+				zIndex: 50
+			},
+			...getFloatingProps({ onMouseDown: (e) => e.preventDefault() }),
+			className: "pz:relative pz:rounded-lg pz:border pz:border-input pz:bg-popover pz:text-popover-foreground pz:shadow-md pz:overflow-hidden",
+			children: [field.pending && visibleOptions.length > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-label": "Loading",
+				className: "pz:absolute pz:right-2 pz:top-2 pz:z-10 pz:inline-block pz:h-3 pz:w-3 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground"
+			}), /* @__PURE__ */ jsx(SuggestionsBody, {
+				suggestionsDisabled: field.suggestionsDisabled,
+				reason: field.suggestionsDisabledReason,
+				pending: field.pending,
+				options: visibleOptions,
+				hasQuery,
+				onPick: (value) => {
+					field.setValue(value);
+					setOpen(false);
+				}
+			})]
+		})]
+	});
+}
+function SuggestionsBody({ suggestionsDisabled, reason, pending, options, hasQuery, onPick }) {
+	if (suggestionsDisabled) return /* @__PURE__ */ jsx("div", {
+		className: "pz:px-3 pz:py-2 pz:text-xs pz:text-muted-foreground",
+		children: reason ?? "Suggestions unavailable."
+	});
+	if (pending && options.length === 0) return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": "Loading",
+		className: "pz:flex pz:items-center pz:justify-center pz:py-6",
+		children: /* @__PURE__ */ jsx("span", { className: "pz:inline-block pz:h-5 pz:w-5 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground" })
+	});
+	if (options.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "pz:px-3 pz:py-2 pz:text-xs pz:text-muted-foreground",
+		children: hasQuery ? "No matches" : "No options available"
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		className: "pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:transition-opacity",
+		style: pending ? {
+			opacity: .5,
+			pointerEvents: "none"
+		} : void 0,
+		children: options.map((opt) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "option",
+			className: "pz:flex pz:w-full pz:items-center pz:gap-2 pz:rounded-sm pz:px-2 pz:py-1.5 pz:text-sm pz:text-left pz:cursor-pointer pz:hover:bg-accent pz:hover:text-accent-foreground",
+			onClick: () => onPick(opt.value),
+			children: [/* @__PURE__ */ jsx(WidgetStrip, { widgets: opt.widgets }), /* @__PURE__ */ jsx("span", { children: opt.label })]
+		}) }, opt.value))
+	});
+}
+
+//#endregion
+export { TaggedTextInputAdapter };
+//# sourceMappingURL=tagged-text-input.mjs.map

package/dist/components/defaults/adapters/tagged-text-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagged-text-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/tagged-text-input.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  size,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { StoreOption, TaggedTextMeta } from \"@pipe0/base\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { WidgetStrip } from \"../../../widgets/widget-strip.js\";\nimport { LiquidEditor } from \"../../internal/LiquidEditor/LiquidEditor.js\";\n\n/**\n * Adapter for `pipesTaggedTextInput`. Renders a tiptap-backed editor that\n * supports `/` to open a unified reference picker (input fields filtered\n * by `expectedTagType`, secrets, constants).\n *\n * When `meta.optionsDef` is present, the input also gains a value-suggestions\n * popover (e.g. listing the user's existing pipe0 sheets). The popover opens\n * on focus, hides automatically when the user is composing a `{{ tag }}`,\n * and is gated by `meta.optionsDef.enabledIf` (sub-feature gate — the input\n * itself stays editable in every state). Picking an option REPLACES the\n * input value with the option's value.\n */\nexport function TaggedTextInputAdapter(field: FieldHandle<\"tagged_text_input\">) {\n  const meta = field.meta as TaggedTextMeta;\n  const hasError = !!field.error;\n  const hasSuggestions = !!meta.optionsDef;\n\n  const [open, setOpen] = useState(false);\n\n  // Hide the popover whenever the user is composing a `{{ tag }}` — the\n  // LiquidEditor SuggestionMenu owns that interaction.\n  const valueIsTag = useMemo(() => /\\{\\{[^}]*\\}?\\}?/.test(field.value ?? \"\"), [field.value]);\n\n  const hasQuery = (field.value ?? \"\").trim().length > 0;\n\n  const popoverShow = hasSuggestions && open && !valueIsTag;\n\n  // Floating UI reads positioning straight from the wrapper element via\n  // `refs.setReference`; `whileElementsMounted: autoUpdate` subscribes to the\n  // ancestor scroll/resize that actually matters (no global window listener,\n  // no React state for the rect).\n  const { refs, floatingStyles, context } = useFloating({\n    open: popoverShow,\n    onOpenChange: (next) => {\n      if (!next) setOpen(false);\n    },\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(4),\n      flip({ mainAxis: true, crossAxis: false }),\n      shift(),\n      size({\n        apply({ elements, rects }) {\n          elements.floating.style.minWidth = `${rects.reference.width}px`;\n          elements.floating.style.maxWidth = \"32rem\";\n        },\n      }),\n    ],\n  });\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context);\n  const dismiss = useDismiss(context, {\n    outsidePress: true,\n    outsidePressEvent: \"mousedown\",\n  });\n  const { getFloatingProps } = useInteractions([dismiss]);\n\n  // Filter options client-side by current input text. Empty input → all options.\n  const visibleOptions = useMemo(() => {\n    const q = (field.value ?? \"\").trim().toLowerCase();\n    if (!q) return field.options;\n    return field.options.filter(\n      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),\n    );\n  }, [field.options, field.value]);\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <div\n        ref={refs.setReference}\n        className={cn(\n          \"pz:flex pz:rounded-lg pz:border pz:border-input pz:bg-transparent\",\n          meta.multiline ? \"pz:items-start\" : \"pz:items-center\",\n          hasError && \"pz:border-destructive/60\",\n        )}\n        aria-invalid={hasError || undefined}\n        onFocusCapture={() => {\n          if (hasSuggestions) setOpen(true);\n        }}\n        onBlurCapture={(e) => {\n          // Only close when focus leaves both the wrapper AND the popover.\n          const next = e.relatedTarget as Node | null;\n          if (next && e.currentTarget.contains(next)) return;\n          if (next && document.querySelector(\"[data-p0='tagged-suggestions']\")?.contains(next)) {\n            return;\n          }\n          setOpen(false);\n        }}\n      >\n        <div className=\"pz:flex-1 pz:min-w-0\">\n          <LiquidEditor\n            value={field.value ?? \"\"}\n            onChange={(v) => field.setValue(v)}\n            inputFields={meta.inputFields ?? []}\n            searchSecrets={field.searchSecrets}\n            placeholder={meta.placeholder}\n            multiline={meta.multiline}\n            expectedFieldType={meta.expectedTagType}\n            directives={[]}\n          />\n        </div>\n        {hasSuggestions && (\n          <div\n            className={cn(\n              \"pz:flex pz:items-center pz:gap-1 pz:pr-2 pz:text-muted-foreground\",\n              meta.multiline && \"pz:pt-1\",\n            )}\n          >\n            <ChevronDown className=\"pz:size-4 pz:pointer-events-none\" aria-hidden=\"true\" />\n          </div>\n        )}\n      </div>\n\n      {hasSuggestions && isMounted && (\n        <div\n          ref={refs.setFloating}\n          data-p0=\"tagged-suggestions\"\n          style={{ ...floatingStyles, ...transitionStyles, zIndex: 50 }}\n          {...getFloatingProps({\n            // Prevent stealing focus from the editor when the user clicks an option.\n            onMouseDown: (e) => e.preventDefault(),\n          })}\n          className=\"pz:relative pz:rounded-lg pz:border pz:border-input pz:bg-popover pz:text-popover-foreground pz:shadow-md pz:overflow-hidden\"\n        >\n          {field.pending && visibleOptions.length > 0 && (\n            // biome-ignore lint/a11y/useAriaPropsSupportedByRole: not relevant\n            <span\n              aria-label=\"Loading\"\n              className=\"pz:absolute pz:right-2 pz:top-2 pz:z-10 pz:inline-block pz:h-3 pz:w-3 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground\"\n            />\n          )}\n          <SuggestionsBody\n            suggestionsDisabled={field.suggestionsDisabled}\n            reason={field.suggestionsDisabledReason}\n            pending={field.pending}\n            options={visibleOptions}\n            hasQuery={hasQuery}\n            onPick={(value) => {\n              field.setValue(value);\n              setOpen(false);\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SuggestionsBody({\n  suggestionsDisabled,\n  reason,\n  pending,\n  options,\n  hasQuery,\n  onPick,\n}: {\n  suggestionsDisabled: boolean;\n  reason?: string;\n  pending: boolean;\n  options: StoreOption[];\n  hasQuery: boolean;\n  onPick: (value: string) => void;\n}) {\n  if (suggestionsDisabled) {\n    return (\n      <div className=\"pz:px-3 pz:py-2 pz:text-xs pz:text-muted-foreground\">\n        {reason ?? \"Suggestions unavailable.\"}\n      </div>\n    );\n  }\n  if (pending && options.length === 0) {\n    // Initial load — render a visible spinner so the popover has feedback.\n    return (\n      <div\n        role=\"status\"\n        aria-label=\"Loading\"\n        className=\"pz:flex pz:items-center pz:justify-center pz:py-6\"\n      >\n        <span className=\"pz:inline-block pz:h-5 pz:w-5 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground\" />\n      </div>\n    );\n  }\n  if (options.length === 0) {\n    return (\n      <div className=\"pz:px-3 pz:py-2 pz:text-xs pz:text-muted-foreground\">\n        {hasQuery ? \"No matches\" : \"No options available\"}\n      </div>\n    );\n  }\n  return (\n    <ul\n      className=\"pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:transition-opacity\"\n      style={pending ? { opacity: 0.5, pointerEvents: \"none\" } : undefined}\n    >\n      {options.map((opt) => (\n        <li key={opt.value}>\n          <button\n            type=\"button\"\n            role=\"option\"\n            className=\"pz:flex pz:w-full pz:items-center pz:gap-2 pz:rounded-sm pz:px-2 pz:py-1.5 pz:text-sm pz:text-left pz:cursor-pointer pz:hover:bg-accent pz:hover:text-accent-foreground\"\n            onClick={() => onPick(opt.value)}\n          >\n            <WidgetStrip widgets={opt.widgets} />\n            <span>{opt.label}</span>\n          </button>\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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"}

package/dist/components/defaults/adapters/template-input.mjs

@@ -0,0 +1,34 @@
+import { cn } from "../../../lib/utils.mjs";
+import { LiquidEditor } from "../../internal/LiquidEditor/LiquidEditor.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/template-input.tsx
+/**
+* Template editor with Liquid syntax support — `/` opens a unified
+* reference picker (input fields, secrets, constants). Templates cannot
+* declare outputs, so the directive picker is disabled.
+*/
+function TemplateInputAdapter(field) {
+	const meta = field.meta;
+	const hasError = !!field.error;
+	return /* @__PURE__ */ jsx("div", {
+		"data-p0": "input",
+		className: "pz:flex pz:flex-col pz:gap-1",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pz:rounded-md pz:border pz:border-input pz:bg-transparent pz:shadow-xs", hasError && "pz:border-destructive/60"),
+			"aria-invalid": hasError || void 0,
+			children: /* @__PURE__ */ jsx(LiquidEditor, {
+				value: field.value ?? "",
+				onChange: (v) => field.setValue(v),
+				inputFields: meta.inputFields ?? [],
+				searchSecrets: field.searchSecrets,
+				multiline: true,
+				directives: []
+			})
+		})
+	});
+}
+
+//#endregion
+export { TemplateInputAdapter };
+//# sourceMappingURL=template-input.mjs.map

package/dist/components/defaults/adapters/template-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/template-input.tsx"],"sourcesContent":["import type { TemplateInputMeta } from \"@pipe0/base\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { LiquidEditor } from \"../../internal/LiquidEditor/LiquidEditor.js\";\n\n/**\n * Template editor with Liquid syntax support — `/` opens a unified\n * reference picker (input fields, secrets, constants). Templates cannot\n * declare outputs, so the directive picker is disabled.\n */\nexport function TemplateInputAdapter(field: FieldHandle<\"template_input\">) {\n  const meta = field.meta as TemplateInputMeta;\n  const hasError = !!field.error;\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <div\n        className={cn(\n          \"pz:rounded-md pz:border pz:border-input pz:bg-transparent pz:shadow-xs\",\n          hasError && \"pz:border-destructive/60\",\n        )}\n        aria-invalid={hasError || undefined}\n      >\n        <LiquidEditor\n          value={field.value ?? \"\"}\n          onChange={(v) => field.setValue(v)}\n          inputFields={meta.inputFields ?? []}\n          searchSecrets={field.searchSecrets}\n          multiline\n          directives={[]}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,qBAAqB,OAAsC;CACzE,MAAM,OAAO,MAAM;CACnB,MAAM,WAAW,CAAC,CAAC,MAAM;AAEzB,QACE,oBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAC7B,oBAAC,OAAD;GACE,WAAW,GACT,0EACA,YAAY,2BACb;GACD,gBAAc,YAAY;aAE1B,oBAAC,cAAD;IACE,OAAO,MAAM,SAAS;IACtB,WAAW,MAAM,MAAM,SAAS,EAAE;IAClC,aAAa,KAAK,eAAe,EAAE;IACnC,eAAe,MAAM;IACrB;IACA,YAAY,EAAE;IACd;GACE;EACF"}

package/dist/components/defaults/adapters/text-input.mjs

@@ -0,0 +1,18 @@
+import { Input } from "../../ui/input.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/defaults/adapters/text-input.tsx
+function TextInputAdapter(field) {
+	return /* @__PURE__ */ jsx(Input, {
+		...field.inputProps,
+		"data-p0": "input",
+		"aria-invalid": !!field.error,
+		maxLength: field.meta.maxLength,
+		minLength: field.meta.minLength,
+		pattern: field.meta.pattern
+	});
+}
+
+//#endregion
+export { TextInputAdapter };
+//# sourceMappingURL=text-input.mjs.map

package/dist/components/defaults/adapters/text-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/text-input.tsx"],"sourcesContent":["import type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { Input } from \"../../ui/input.js\";\n\nexport function TextInputAdapter(field: FieldHandle<\"text_input\">) {\n  return (\n    <Input\n      {...field.inputProps}\n      data-p0=\"input\"\n      aria-invalid={!!field.error}\n      maxLength={field.meta.maxLength}\n      minLength={field.meta.minLength}\n      pattern={field.meta.pattern}\n    />\n  );\n}\n"],"mappings":";;;;AAGA,SAAgB,iBAAiB,OAAkC;AACjE,QACE,oBAAC,OAAD;EACE,GAAI,MAAM;EACV,WAAQ;EACR,gBAAc,CAAC,CAAC,MAAM;EACtB,WAAW,MAAM,KAAK;EACtB,WAAW,MAAM,KAAK;EACtB,SAAS,MAAM,KAAK;EACpB"}