@pipe0/react 0.0.2

package/dist/components/internal/LiquidEditor/ChipEditPopover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipEditPopover.mjs","names":[],"sources":["../../../../src/components/internal/LiquidEditor/ChipEditPopover.tsx"],"sourcesContent":["import { offset, shift } from \"@floating-ui/react\";\nimport type { Editor } from \"@tiptap/react\";\nimport { ExternalLink, Trash2 } from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { useFloatingElement } from \"../../../hooks/use-floating-element.js\";\nimport { Button } from \"../../ui/button.js\";\nimport { Input } from \"../../ui/input.js\";\nimport { Switch } from \"../../ui/switch.js\";\nimport type { ChipKind } from \"../tag-chip-decoration.js\";\n\nconst SIMPLE_FIELD_RE = /^\\{\\{\\s*([a-zA-Z_][a-zA-Z0-9_.]*)\\s*(\\|\\s*default:\\s*\"\")?\\s*\\}\\}$/;\nconst SECRET_RE = /^\\{\\{\\s*SECRETS\\.([A-Z][A-Z0-9_]*)\\s*\\}\\}$/;\n// Captures `name`, `type` (string|number|boolean|json|unknown), and `description`\n// from `{% output NAME, type: \"TYPE\", description: \"...\" %}` or with a `schema:`\n// arg between type and description for json. Tolerates whitespace and ordering.\nconst OUTPUT_BLOCK_RE =\n  /^\\{%\\s*output\\s+([A-Za-z_][A-Za-z0-9_]*)\\s*,\\s*type:\\s*\"(string|number|boolean|json|unknown)\"\\s*(?:,\\s*schema:\\s*\"([^\"]*)\")?\\s*(?:,\\s*description:\\s*\"((?:[^\"\\\\]|\\\\.)*)\")?\\s*%\\}$/;\n\nexport interface ChipEditTarget {\n  kind: ChipKind;\n  raw: string;\n  from: number;\n  to: number;\n  rect: DOMRect;\n}\n\n/**\n * Contextual popover anchored to a chip's DOM rect. Different content per\n * chip kind:\n *   - field: switch for `| default: \"\"` (simple cases only), remove.\n *   - secret: publicId header, manage/remove buttons. Power users still\n *     edit by hand.\n *   - block (output declaration): name / type / description editors.\n *\n * On any mutation, the popover dispatches a single replaceWith transaction\n * over the chip's range, then closes itself. The Liquid serialization\n * stays identical to what would have been authored by hand.\n */\nexport function ChipEditPopover({\n  editor,\n  target,\n  onClose,\n}: {\n  editor: Editor;\n  target: ChipEditTarget;\n  onClose: () => void;\n}) {\n  const { ref, style, isMounted, getFloatingProps } = useFloatingElement(true, target.rect, 1100, {\n    placement: \"bottom-start\",\n    middleware: [offset(6), shift()],\n    onOpenChange(open) {\n      if (!open) onClose();\n    },\n    dismissOptions: { outsidePress: true, outsidePressEvent: \"mousedown\" },\n  });\n\n  const popupRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    function onKey(e: KeyboardEvent) {\n      if (e.key === \"Escape\") onClose();\n    }\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [onClose]);\n\n  function replaceWith(next: string) {\n    editor.chain().focus().insertContentAt({ from: target.from, to: target.to }, next).run();\n    onClose();\n  }\n\n  function remove() {\n    editor.chain().focus().deleteRange({ from: target.from, to: target.to }).run();\n    onClose();\n  }\n\n  if (!isMounted) return null;\n\n  return (\n    <div\n      ref={(el) => {\n        popupRef.current = el;\n        ref(el);\n      }}\n      style={style}\n      {...getFloatingProps()}\n      onMouseDown={(e) => e.stopPropagation()}\n      className=\"pz:flex pz:flex-col pz:gap-2 pz:rounded-md pz:border pz:border-input pz:bg-popover pz:p-3 pz:text-popover-foreground pz:shadow-md pz:min-w-72\"\n      role=\"dialog\"\n      aria-label={`Edit ${target.kind} chip`}\n    >\n      {target.kind === \"field\" && (\n        <FieldChipBody raw={target.raw} replaceWith={replaceWith} remove={remove} />\n      )}\n      {target.kind === \"secret\" && <SecretChipBody raw={target.raw} remove={remove} />}\n      {target.kind === \"block\" && (\n        <BlockChipBody raw={target.raw} replaceWith={replaceWith} remove={remove} />\n      )}\n    </div>\n  );\n}\n\nfunction FieldChipBody({\n  raw,\n  replaceWith,\n  remove,\n}: {\n  raw: string;\n  replaceWith: (next: string) => void;\n  remove: () => void;\n}) {\n  const match = raw.match(SIMPLE_FIELD_RE);\n  const name = match?.[1];\n  const allowEmpty = !!match?.[2];\n  const isSimple = !!match;\n\n  if (!isSimple || !name) {\n    return (\n      <>\n        <header className=\"pz:text-xs pz:font-medium pz:text-muted-foreground\">\n          Field reference (advanced)\n        </header>\n        <p className=\"pz:text-xs pz:text-muted-foreground\">\n          This chip uses a custom Liquid filter chain. Edit the raw text in the editor to change it.\n        </p>\n        <pre className=\"pz:overflow-x-auto pz:rounded-sm pz:bg-muted pz:px-2 pz:py-1 pz:text-xs\">\n          {raw}\n        </pre>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n          <Trash2 className=\"pz:size-3.5 pz:mr-1\" />\n          Remove\n        </Button>\n      </>\n    );\n  }\n\n  function toggleAllowEmpty() {\n    replaceWith(allowEmpty ? `{{ ${name} }}` : `{{ ${name} | default: \"\" }}`);\n  }\n\n  return (\n    <>\n      <header className=\"pz:flex pz:items-center pz:justify-between pz:gap-2\">\n        <span className=\"pz:text-xs pz:font-medium pz:text-muted-foreground\">Field reference</span>\n        <code className=\"pz:text-xs pz:text-sky-700\">{name}</code>\n      </header>\n      <div className=\"pz:flex pz:items-center pz:justify-between pz:gap-3 pz:text-sm\">\n        <span className=\"pz:flex pz:flex-col\">\n          <span>Allow empty</span>\n          <span className=\"pz:text-xs pz:text-muted-foreground\">\n            Inserts <code>| default: \"\"</code> so missing values render as empty.\n          </span>\n        </span>\n        <Switch checked={allowEmpty} onCheckedChange={toggleAllowEmpty} />\n      </div>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n        <Trash2 className=\"pz:size-3.5 pz:mr-1\" />\n        Remove\n      </Button>\n    </>\n  );\n}\n\nfunction SecretChipBody({ raw, remove }: { raw: string; remove: () => void }) {\n  const publicId = raw.match(SECRET_RE)?.[1];\n\n  return (\n    <>\n      <header className=\"pz:flex pz:items-center pz:justify-between pz:gap-2\">\n        <span className=\"pz:text-xs pz:font-medium pz:text-muted-foreground\">Secret reference</span>\n        <code className=\"pz:text-xs pz:text-amber-700\">{publicId ?? \"(unknown)\"}</code>\n      </header>\n      <div className=\"pz:flex pz:items-center pz:gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => window.open(\"/secrets\", \"_blank\", \"noopener\")}\n        >\n          <ExternalLink className=\"pz:size-3.5 pz:mr-1\" />\n          Manage secrets\n        </Button>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n          <Trash2 className=\"pz:size-3.5 pz:mr-1\" />\n          Remove\n        </Button>\n      </div>\n    </>\n  );\n}\n\nfunction BlockChipBody({\n  raw,\n  replaceWith,\n  remove,\n}: {\n  raw: string;\n  replaceWith: (next: string) => void;\n  remove: () => void;\n}) {\n  const initial = useMemo(() => {\n    const m = raw.match(OUTPUT_BLOCK_RE);\n    if (!m) return null;\n    const [, name, type, schema, description] = m;\n    return {\n      name,\n      type: type as \"string\" | \"number\" | \"boolean\" | \"json\" | \"unknown\",\n      schema: schema ?? \"\",\n      description: description ? description.replace(/\\\\\"/g, '\"').replace(/\\\\\\\\/g, \"\\\\\") : \"\",\n    };\n  }, [raw]);\n\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [type, setType] = useState<\"string\" | \"number\" | \"boolean\" | \"json\" | \"unknown\">(\n    initial?.type ?? \"string\",\n  );\n  const [schema, setSchema] = useState(initial?.schema ?? \"\");\n  const [description, setDescription] = useState(initial?.description ?? \"\");\n  const idPrefix = useId();\n  const nameId = `${idPrefix}-name`;\n  const typeId = `${idPrefix}-type`;\n  const schemaId = `${idPrefix}-schema`;\n  const descId = `${idPrefix}-desc`;\n\n  if (!initial) {\n    return (\n      <>\n        <header className=\"pz:text-xs pz:font-medium pz:text-muted-foreground\">\n          Block (advanced)\n        </header>\n        <p className=\"pz:text-xs pz:text-muted-foreground\">\n          This block uses a non-standard form. Edit the raw text in the editor.\n        </p>\n        <pre className=\"pz:overflow-x-auto pz:rounded-sm pz:bg-muted pz:px-2 pz:py-1 pz:text-xs\">\n          {raw}\n        </pre>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n          <Trash2 className=\"pz:size-3.5 pz:mr-1\" />\n          Remove\n        </Button>\n      </>\n    );\n  }\n\n  function save() {\n    if (!name.trim()) return;\n    const escaped = description.replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, '\\\\\"');\n    const parts = [`{% output ${name.trim()}`, `type: \"${type}\"`];\n    if (type === \"json\" && schema.trim()) parts.push(`schema: \"${schema.trim()}\"`);\n    parts.push(`description: \"${escaped}\"`);\n    replaceWith(`${parts.join(\", \")} %}`);\n  }\n\n  return (\n    <>\n      <header className=\"pz:text-xs pz:font-medium pz:text-muted-foreground\">\n        Output declaration\n      </header>\n      <label htmlFor={nameId} className=\"pz:flex pz:flex-col pz:gap-1 pz:text-xs\">\n        <span>Name</span>\n        <Input\n          id={nameId}\n          value={name}\n          onChange={(e) => setName(e.target.value)}\n          placeholder=\"FIELD_NAME\"\n        />\n      </label>\n      <label htmlFor={typeId} className=\"pz:flex pz:flex-col pz:gap-1 pz:text-xs\">\n        <span>Type</span>\n        <select\n          id={typeId}\n          value={type}\n          onChange={(e) =>\n            setType(e.target.value as \"string\" | \"number\" | \"boolean\" | \"json\" | \"unknown\")\n          }\n          className=\"pz:rounded-sm pz:border pz:border-input pz:bg-transparent pz:px-2 pz:py-1 pz:text-sm\"\n        >\n          <option value=\"string\">string</option>\n          <option value=\"number\">number</option>\n          <option value=\"boolean\">boolean</option>\n          <option value=\"json\">json</option>\n          <option value=\"unknown\">unknown</option>\n        </select>\n      </label>\n      {type === \"json\" && (\n        <label htmlFor={schemaId} className=\"pz:flex pz:flex-col pz:gap-1 pz:text-xs\">\n          <span>Schema</span>\n          <Input\n            id={schemaId}\n            value={schema}\n            onChange={(e) => setSchema(e.target.value)}\n            placeholder=\"SCHEMA_NAME\"\n          />\n        </label>\n      )}\n      <label htmlFor={descId} className=\"pz:flex pz:flex-col pz:gap-1 pz:text-xs\">\n        <span>Description</span>\n        <Input id={descId} value={description} onChange={(e) => setDescription(e.target.value)} />\n      </label>\n      <div className=\"pz:flex pz:items-center pz:justify-between pz:gap-2 pz:pt-1\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={remove}>\n          <Trash2 className=\"pz:size-3.5 pz:mr-1\" />\n          Remove\n        </Button>\n        <Button type=\"button\" size=\"sm\" onClick={save}>\n          Save\n        </Button>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/internal/LiquidEditor/LiquidEditor.mjs

@@ -0,0 +1,208 @@
+import { cn } from "../../../lib/utils.mjs";
+import { FieldLegend } from "../field-legend.mjs";
+import { SuggestionMenu } from "../suggestion-menu/suggestion-menu.mjs";
+import { TagChipDecoration } from "../tag-chip-decoration.mjs";
+import { ChipEditPopover } from "./ChipEditPopover.mjs";
+import { UnifiedReferencePicker, buildReferenceItems } from "./UnifiedReferencePicker.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RECORD_FIELD_TYPES } from "@pipe0/base";
+import { EditorContent, EditorContext, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+//#region src/components/internal/LiquidEditor/LiquidEditor.tsx
+const SECRET_SEARCH_DEBOUNCE_MS = 150;
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+* Reconciles single- and multi-line text into Tiptap-friendly HTML.
+*  - Single-line: collapses whitespace runs containing newlines into a
+*    single space and renders as one paragraph.
+*  - Multi-line: paragraphs separated by blank lines (`\n\n+`); soft
+*    breaks within a paragraph render as `<br>`. Leading spaces on each
+*    line are preserved with `&nbsp;` so JSON-shaped payloads round-trip
+*    through the editor.
+*/
+function textToTiptapHTML(text, multiline) {
+	if (!multiline) return `<p>${escapeHtml(text.replace(/\s*\n+\s*/g, " "))}</p>`;
+	return escapeHtml(text).split(/\n\n+/).map((block) => {
+		return `<p>${block.split(/\n/).map((line) => line.replace(/^ +/, (spaces) => "&nbsp;".repeat(spaces.length))).join("<br>")}</p>`;
+	}).join("");
+}
+const OUTPUT_TEMPLATE = (fieldType) => {
+	if (fieldType === "json") return `{% output FIELD_NAME, type: "json", schema: "SCHEMA_NAME", description: "" %}`;
+	return `{% output FIELD_NAME, type: "${fieldType}", description: "" %}`;
+};
+/**
+* Single editor surface for every form field that accepts Liquid tags.
+* Two triggers, two cognitive categories:
+*
+*   - `/` opens a unified reference picker (Fields, Secrets, Constants).
+*     Prefix syntax `/f/`, `/s/`, `/c/` filters to one source. Picking
+*     emits the corresponding `{{ … }}` Liquid Output.
+*
+*   - `@` opens a directives picker (only when `directives.length > 0`).
+*     Today the only directive is `output`, which inserts a templated
+*     `{% output FIELD_NAME, type: "...", description: "" %}` block.
+*
+* Chips render via the `TagChipDecoration` extension. Click or
+* Enter/Space on a chip mounts the contextual `ChipEditPopover`.
+*
+* Backwards compat: the persisted value is plain Liquid text,
+* byte-identical to what the legacy `TagEditor` / `TextPromptEditor`
+* produced. No engine, analyzer, or metadata changes.
+*/
+function LiquidEditor({ value, onChange, inputFields, searchSecrets, constantSuggestions, multiline = false, autoGrow = true, directives = [], expectedFieldType, placeholder, className, editorProps, hideLegend = false }) {
+	const blockSeparator = multiline ? "\n" : "";
+	const visibleConstants = constantSuggestions ?? [];
+	const supportsOutput = directives.includes("output");
+	const hasSecretsResolver = !!searchSecrets;
+	const [chipTarget, setChipTarget] = useState(null);
+	const tagChipExtension = useMemo(() => TagChipDecoration.configure({ onChipClick: (hit, el) => {
+		setChipTarget({
+			kind: hit.kind,
+			raw: hit.raw,
+			from: hit.from,
+			to: hit.to,
+			rect: el.getBoundingClientRect()
+		});
+	} }), []);
+	const editor = useEditor({
+		extensions: [StarterKit.configure({ hardBreak: !multiline ? false : void 0 }), tagChipExtension],
+		parseOptions: { preserveWhitespace: "full" },
+		editorProps: {
+			...editorProps,
+			attributes: {
+				class: cn("pz:px-2.5 pz:py-1 pz:text-sm pz:outline-none pz:break-words", multiline ? autoGrow ? "pz:min-h-24 pz:max-h-96 pz:overflow-auto pz:whitespace-pre-wrap" : "pz:overflow-auto pz:whitespace-pre-wrap" : "pz:min-h-8", className),
+				...placeholder ? { "data-placeholder": placeholder } : {},
+				...editorProps?.attributes
+			},
+			handleKeyDown(view, event) {
+				if (editorProps?.handleKeyDown?.(view, event)) return true;
+				if (!multiline && event.key === "Enter") return true;
+				return false;
+			}
+		},
+		content: textToTiptapHTML(value || "", multiline),
+		onUpdate({ editor }) {
+			onChange(editor.getText({ blockSeparator }));
+		}
+	});
+	useEffect(() => {
+		if (!editor) return;
+		if (editor.getText({ blockSeparator }) === (value ?? "")) return;
+		editor.commands.setContent(textToTiptapHTML(value ?? "", multiline), false);
+	}, [
+		editor,
+		value,
+		multiline,
+		blockSeparator
+	]);
+	const insertField = useCallback((name) => `{{ ${name} }}`, []);
+	const lastSecretsRef = useRef([]);
+	const latestQueryRef = useRef("");
+	const referenceItems = useCallback(({ query }) => {
+		latestQueryRef.current = query;
+		const myQuery = query;
+		const buildWith = (secrets) => buildReferenceItems(myQuery, {
+			inputFields,
+			secretSuggestions: secrets,
+			constantSuggestions: visibleConstants
+		}, expectedFieldType, insertField);
+		if (!searchSecrets) return Promise.resolve(buildWith([]));
+		return new Promise((resolve) => {
+			setTimeout(async () => {
+				if (latestQueryRef.current !== myQuery) {
+					resolve(buildWith(lastSecretsRef.current));
+					return;
+				}
+				try {
+					const secrets = await searchSecrets(myQuery);
+					if (latestQueryRef.current !== myQuery) {
+						resolve(buildWith(lastSecretsRef.current));
+						return;
+					}
+					lastSecretsRef.current = secrets;
+					resolve(buildWith(secrets));
+				} catch {
+					resolve(buildWith(lastSecretsRef.current));
+				}
+			}, SECRET_SEARCH_DEBOUNCE_MS);
+		});
+	}, [
+		searchSecrets,
+		inputFields,
+		visibleConstants,
+		expectedFieldType,
+		insertField
+	]);
+	const directiveItems = useCallback(() => RECORD_FIELD_TYPES.map((fieldType) => ({
+		title: `output: ${fieldType}`,
+		keywords: [fieldType, "output"],
+		onSelect: ({ editor: ed, range }) => {
+			ed.chain().focus().insertContentAt(range, OUTPUT_TEMPLATE(fieldType)).run();
+		}
+	})), []);
+	const legendEntries = [];
+	legendEntries.push({
+		key: "/",
+		label: "to insert a reference"
+	});
+	if (supportsOutput) legendEntries.push({
+		key: "@",
+		label: "to insert a directive"
+	});
+	return /* @__PURE__ */ jsxs(EditorContext.Provider, {
+		value: { editor },
+		children: [
+			/* @__PURE__ */ jsx(EditorContent, { editor }),
+			!hideLegend && /* @__PURE__ */ jsx(FieldLegend, { entries: legendEntries }),
+			/* @__PURE__ */ jsx(SuggestionMenu, {
+				editor,
+				char: "/",
+				pluginKey: "liquidEditorReferencePicker",
+				items: referenceItems,
+				children: (props) => /* @__PURE__ */ jsx(UnifiedReferencePicker, {
+					items: props.items,
+					selectedIndex: props.selectedIndex,
+					onSelect: props.onSelect,
+					query: props.query,
+					hasSecretsResolver,
+					inputFieldsCount: inputFields.length,
+					constantsCount: visibleConstants.length
+				})
+			}),
+			supportsOutput && /* @__PURE__ */ jsx(SuggestionMenu, {
+				editor,
+				char: "@",
+				pluginKey: "liquidEditorDirectivePicker",
+				items: directiveItems,
+				children: ({ items, selectedIndex, onSelect }) => /* @__PURE__ */ jsxs("div", {
+					className: "pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-56",
+					role: "listbox",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "pz:px-2 pz:pt-1 pz:pb-0.5 pz:text-[10px] pz:font-medium pz:uppercase pz:tracking-wide pz:text-muted-foreground",
+						children: "Add output declaration"
+					}), items.map((item, index) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": selectedIndex === index,
+						onClick: () => onSelect(item),
+						className: cn("pz:flex pz:w-full pz:items-center pz:rounded-sm pz:px-2 pz:py-1.5 pz:text-sm pz:text-left pz:cursor-pointer", selectedIndex === index ? "pz:bg-accent pz:text-accent-foreground" : "pz:hover:bg-accent pz:hover:text-accent-foreground"),
+						children: item.title
+					}, item.title))]
+				})
+			}),
+			chipTarget && editor && /* @__PURE__ */ jsx(ChipEditPopover, {
+				editor,
+				target: chipTarget,
+				onClose: () => setChipTarget(null)
+			})
+		]
+	});
+}
+
+//#endregion
+export { LiquidEditor };
+//# sourceMappingURL=LiquidEditor.mjs.map

package/dist/components/internal/LiquidEditor/LiquidEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidEditor.mjs","names":[],"sources":["../../../../src/components/internal/LiquidEditor/LiquidEditor.tsx"],"sourcesContent":["import {\n  type PipesFieldDefinitionWithName,\n  RECORD_FIELD_TYPES,\n  type RecordFieldType,\n} from \"@pipe0/base\";\nimport type { EditorProps } from \"@tiptap/pm/view\";\nimport { EditorContent, EditorContext, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { ConstantSuggestion, SecretSuggestion } from \"../../../types/field-props.js\";\nimport { FieldLegend, type LegendEntry } from \"../field-legend.js\";\nimport { SuggestionMenu } from \"../suggestion-menu/suggestion-menu.js\";\nimport type { SuggestionItem } from \"../suggestion-menu/suggestion-menu-types.js\";\nimport { type ChipHit, TagChipDecoration } from \"../tag-chip-decoration.js\";\nimport { ChipEditPopover, type ChipEditTarget } from \"./ChipEditPopover.js\";\nimport {\n  buildReferenceItems,\n  type ReferenceContext,\n  UnifiedReferencePicker,\n} from \"./UnifiedReferencePicker.js\";\n\nexport type DirectiveKind = \"output\";\n\nconst SECRET_SEARCH_DEBOUNCE_MS = 150;\n\nexport interface LiquidEditorProps {\n  value: string;\n  onChange: (v: string) => void;\n  inputFields: PipesFieldDefinitionWithName[];\n  /**\n   * Per-keystroke async searcher for secrets. Called from the `/` reference\n   * picker as the user types. Calls are debounced and race-guarded — only\n   * the response for the latest query is rendered.\n   */\n  searchSecrets?: (query: string) => Promise<SecretSuggestion[]>;\n  constantSuggestions?: ConstantSuggestion[];\n  multiline?: boolean;\n  /**\n   * When true, the editor renders within `min-h`/`max-h` bounds. When\n   * false, callers control the height via `className`. Default: true.\n   */\n  autoGrow?: boolean;\n  directives?: DirectiveKind[];\n  expectedFieldType?: RecordFieldType;\n  placeholder?: string;\n  className?: string;\n  editorProps?: EditorProps;\n  /**\n   * Suppress the per-editor legend. Used by `key_value_list_input` which\n   * renders a single legend below the entire list rather than per-cell.\n   */\n  hideLegend?: boolean;\n}\n\nfunction escapeHtml(s: string): string {\n  return s.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\n/**\n * Reconciles single- and multi-line text into Tiptap-friendly HTML.\n *  - Single-line: collapses whitespace runs containing newlines into a\n *    single space and renders as one paragraph.\n *  - Multi-line: paragraphs separated by blank lines (`\\n\\n+`); soft\n *    breaks within a paragraph render as `<br>`. Leading spaces on each\n *    line are preserved with `&nbsp;` so JSON-shaped payloads round-trip\n *    through the editor.\n */\nfunction textToTiptapHTML(text: string, multiline: boolean): string {\n  if (!multiline) {\n    return `<p>${escapeHtml(text.replace(/\\s*\\n+\\s*/g, \" \"))}</p>`;\n  }\n  return escapeHtml(text)\n    .split(/\\n\\n+/)\n    .map((block) => {\n      const lines = block.split(/\\n/);\n      const htmlLines = lines\n        .map((line) => line.replace(/^ +/, (spaces) => \"&nbsp;\".repeat(spaces.length)))\n        .join(\"<br>\");\n      return `<p>${htmlLines}</p>`;\n    })\n    .join(\"\");\n}\n\nconst OUTPUT_TEMPLATE = (fieldType: RecordFieldType): string => {\n  if (fieldType === \"json\") {\n    return `{% output FIELD_NAME, type: \"json\", schema: \"SCHEMA_NAME\", description: \"\" %}`;\n  }\n  return `{% output FIELD_NAME, type: \"${fieldType}\", description: \"\" %}`;\n};\n\n/**\n * Single editor surface for every form field that accepts Liquid tags.\n * Two triggers, two cognitive categories:\n *\n *   - `/` opens a unified reference picker (Fields, Secrets, Constants).\n *     Prefix syntax `/f/`, `/s/`, `/c/` filters to one source. Picking\n *     emits the corresponding `{{ … }}` Liquid Output.\n *\n *   - `@` opens a directives picker (only when `directives.length > 0`).\n *     Today the only directive is `output`, which inserts a templated\n *     `{% output FIELD_NAME, type: \"...\", description: \"\" %}` block.\n *\n * Chips render via the `TagChipDecoration` extension. Click or\n * Enter/Space on a chip mounts the contextual `ChipEditPopover`.\n *\n * Backwards compat: the persisted value is plain Liquid text,\n * byte-identical to what the legacy `TagEditor` / `TextPromptEditor`\n * produced. No engine, analyzer, or metadata changes.\n */\nexport function LiquidEditor({\n  value,\n  onChange,\n  inputFields,\n  searchSecrets,\n  constantSuggestions,\n  multiline = false,\n  autoGrow = true,\n  directives = [],\n  expectedFieldType,\n  placeholder,\n  className,\n  editorProps,\n  hideLegend = false,\n}: LiquidEditorProps) {\n  const blockSeparator = multiline ? \"\\n\" : \"\";\n  const visibleConstants = constantSuggestions ?? [];\n  const supportsOutput = directives.includes(\"output\");\n  const hasSecretsResolver = !!searchSecrets;\n\n  const [chipTarget, setChipTarget] = useState<ChipEditTarget | null>(null);\n\n  const tagChipExtension = useMemo(\n    () =>\n      TagChipDecoration.configure({\n        onChipClick: (hit: ChipHit, el: HTMLElement) => {\n          setChipTarget({\n            kind: hit.kind,\n            raw: hit.raw,\n            from: hit.from,\n            to: hit.to,\n            rect: el.getBoundingClientRect(),\n          });\n        },\n      }),\n    [],\n  );\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({ hardBreak: !multiline ? false : undefined }),\n      tagChipExtension,\n    ],\n    parseOptions: { preserveWhitespace: \"full\" },\n    editorProps: {\n      ...editorProps,\n      attributes: {\n        class: cn(\n          \"pz:px-2.5 pz:py-1 pz:text-sm pz:outline-none pz:break-words\",\n          multiline\n            ? autoGrow\n              ? \"pz:min-h-24 pz:max-h-96 pz:overflow-auto pz:whitespace-pre-wrap\"\n              : \"pz:overflow-auto pz:whitespace-pre-wrap\"\n            : \"pz:min-h-8\",\n          className,\n        ),\n        ...(placeholder ? { \"data-placeholder\": placeholder } : {}),\n        ...editorProps?.attributes,\n      },\n      handleKeyDown(view, event) {\n        if (editorProps?.handleKeyDown?.(view, event)) return true;\n        // Single-line: Enter must not split the document. Multi-line: let\n        // StarterKit handle Enter so paragraphs and blocks behave normally.\n        if (!multiline && event.key === \"Enter\") return true;\n        return false;\n      },\n    },\n    content: textToTiptapHTML(value || \"\", multiline),\n    onUpdate({ editor }) {\n      onChange(editor.getText({ blockSeparator }));\n    },\n  });\n\n  // Sync the editor's document when `value` changes from outside (e.g.\n  // form reset, programmatic setValue). `useEditor` only reads `content`\n  // at mount; without this hook the visible UI drifts from form state.\n  // The early-return short-circuits the loop that the editor's own\n  // `onUpdate` would otherwise create.\n  useEffect(() => {\n    if (!editor) return;\n    const current = editor.getText({ blockSeparator });\n    if (current === (value ?? \"\")) return;\n    editor.commands.setContent(textToTiptapHTML(value ?? \"\", multiline), false);\n  }, [editor, value, multiline, blockSeparator]);\n\n  const insertField = useCallback((name: string) => `{{ ${name} }}`, []);\n\n  // Live-query state for secrets. The picker calls `referenceItems(query)` on\n  // every keystroke; we debounce the underlying fetch and race-guard via\n  // `latestQueryRef` so only the response for the most recent query lands.\n  // `lastSecretsRef` carries the previous fetch's results forward so stale\n  // calls render something sensible instead of an empty list.\n  const lastSecretsRef = useRef<SecretSuggestion[]>([]);\n  const latestQueryRef = useRef(\"\");\n\n  const referenceItems = useCallback(\n    ({ query }: { query: string }): Promise<SuggestionItem<ReferenceContext>[]> => {\n      latestQueryRef.current = query;\n      const myQuery = query;\n\n      const buildWith = (secrets: SecretSuggestion[]) =>\n        buildReferenceItems(\n          myQuery,\n          {\n            inputFields,\n            secretSuggestions: secrets,\n            constantSuggestions: visibleConstants,\n          },\n          expectedFieldType,\n          insertField,\n        );\n\n      if (!searchSecrets) {\n        return Promise.resolve(buildWith([]));\n      }\n\n      return new Promise<SuggestionItem<ReferenceContext>[]>((resolve) => {\n        setTimeout(async () => {\n          if (latestQueryRef.current !== myQuery) {\n            resolve(buildWith(lastSecretsRef.current));\n            return;\n          }\n          try {\n            const secrets = await searchSecrets(myQuery);\n            if (latestQueryRef.current !== myQuery) {\n              resolve(buildWith(lastSecretsRef.current));\n              return;\n            }\n            lastSecretsRef.current = secrets;\n            resolve(buildWith(secrets));\n          } catch {\n            resolve(buildWith(lastSecretsRef.current));\n          }\n        }, SECRET_SEARCH_DEBOUNCE_MS);\n      });\n    },\n    [searchSecrets, inputFields, visibleConstants, expectedFieldType, insertField],\n  );\n\n  const directiveItems = useCallback(\n    () =>\n      RECORD_FIELD_TYPES.map<SuggestionItem>((fieldType) => ({\n        title: `output: ${fieldType}`,\n        keywords: [fieldType, \"output\"],\n        onSelect: ({ editor: ed, range }) => {\n          ed.chain().focus().insertContentAt(range, OUTPUT_TEMPLATE(fieldType)).run();\n        },\n      })),\n    [],\n  );\n\n  const legendEntries: LegendEntry[] = [];\n  legendEntries.push({ key: \"/\", label: \"to insert a reference\" });\n  if (supportsOutput) legendEntries.push({ key: \"@\", label: \"to insert a directive\" });\n\n  return (\n    <EditorContext.Provider value={{ editor }}>\n      <EditorContent editor={editor} />\n\n      {!hideLegend && <FieldLegend entries={legendEntries} />}\n\n      <SuggestionMenu\n        editor={editor}\n        char=\"/\"\n        pluginKey=\"liquidEditorReferencePicker\"\n        items={referenceItems}\n      >\n        {(props) => (\n          <UnifiedReferencePicker\n            items={props.items as SuggestionItem<ReferenceContext>[]}\n            selectedIndex={props.selectedIndex}\n            onSelect={props.onSelect as (item: SuggestionItem<ReferenceContext>) => void}\n            query={props.query}\n            hasSecretsResolver={hasSecretsResolver}\n            inputFieldsCount={inputFields.length}\n            constantsCount={visibleConstants.length}\n          />\n        )}\n      </SuggestionMenu>\n\n      {supportsOutput && (\n        <SuggestionMenu\n          editor={editor}\n          char=\"@\"\n          pluginKey=\"liquidEditorDirectivePicker\"\n          items={directiveItems}\n        >\n          {({ items, selectedIndex, onSelect }) => (\n            <div className=\"pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-56\" role=\"listbox\">\n              <div className=\"pz:px-2 pz:pt-1 pz:pb-0.5 pz:text-[10px] pz:font-medium pz:uppercase pz:tracking-wide pz:text-muted-foreground\">\n                Add output declaration\n              </div>\n              {items.map((item, index) => (\n                <button\n                  key={item.title}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={selectedIndex === index}\n                  onClick={() => onSelect(item)}\n                  className={cn(\n                    \"pz:flex pz:w-full pz:items-center pz:rounded-sm pz:px-2 pz:py-1.5 pz:text-sm pz:text-left pz:cursor-pointer\",\n                    selectedIndex === index\n                      ? \"pz:bg-accent pz:text-accent-foreground\"\n                      : \"pz:hover:bg-accent pz:hover:text-accent-foreground\",\n                  )}\n                >\n                  {item.title}\n                </button>\n              ))}\n            </div>\n          )}\n        </SuggestionMenu>\n      )}\n\n      {chipTarget && editor && (\n        <ChipEditPopover\n          editor={editor}\n          target={chipTarget}\n          onClose={() => setChipTarget(null)}\n        />\n      )}\n    </EditorContext.Provider>\n  );\n}\n"],"mappings":"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"}

package/dist/components/internal/LiquidEditor/UnifiedReferencePicker.mjs

@@ -0,0 +1,240 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Hash, Key } from "lucide-react";
+
+//#region src/components/internal/LiquidEditor/UnifiedReferencePicker.tsx
+const PREFIX_RE = /^([fsc])\/(.*)$/;
+/**
+* Parses a typed query into `(prefix, residual)`. Lets users filter
+* directly to a single source: `f/email`, `s/STRIPE`, `c/REGION`.
+* Without a prefix, all sources are searched.
+*/
+function parseQuery(query) {
+	const m = query.match(PREFIX_RE);
+	if (!m) return {
+		prefix: null,
+		residual: query
+	};
+	return {
+		prefix: {
+			f: "field",
+			s: "secret",
+			c: "constant"
+		}[m[1]],
+		residual: m[2]
+	};
+}
+function score(haystack, needle) {
+	if (!needle) return 1;
+	const h = haystack.toLowerCase();
+	const n = needle.toLowerCase();
+	if (h === n) return 100;
+	if (h.startsWith(n)) return 50;
+	if (h.includes(n)) return 10;
+	return 0;
+}
+function buildFieldItem(f, insertField) {
+	return {
+		title: f.resolvedName,
+		subtext: f.type,
+		keywords: [f.type],
+		context: { kind: "field" },
+		onSelect: ({ editor, range }) => {
+			editor.chain().focus().insertContentAt(range, insertField(f.resolvedName)).run();
+		}
+	};
+}
+function buildSecretItem(s) {
+	return {
+		title: s.label,
+		subtext: `${s.mask} · ${s.ownershipLevel}${s.providerHint ? ` · ${s.providerHint}` : ""}`,
+		keywords: [s.publicId, s.providerHint ?? ""],
+		context: { kind: "secret" },
+		onSelect: ({ editor, range }) => {
+			editor.chain().focus().insertContentAt(range, `{{ SECRETS.${s.publicId} }}`).run();
+		}
+	};
+}
+function buildConstantItem(c) {
+	return {
+		title: c.label,
+		subtext: c.ownershipLevel,
+		keywords: [c.publicId],
+		context: { kind: "constant" },
+		onSelect: ({ editor, range }) => {
+			editor.chain().focus().insertContentAt(range, `{{ CONSTANTS.${c.publicId} }}`).run();
+		}
+	};
+}
+/**
+* Builds the suggestion list for a given query against the three sources.
+* Behavior:
+*   - empty query → returns all items in source order (Fields, then
+*     Secrets, then Constants). Header rows are rendered separately by
+*     the picker UI — this function returns a flat list of items only.
+*   - non-empty query → ranks across all sources with a simple
+*     starts-with > includes scoring. Items with a zero score are
+*     dropped.
+*   - prefix syntax `f/`, `s/`, `c/` filters to a single source before
+*     scoring with the residual.
+*/
+function buildReferenceItems(query, sources, expectedFieldType, insertField) {
+	const { prefix, residual } = parseQuery(query);
+	const fieldItems = (expectedFieldType ? sources.inputFields.filter((f) => f.type === expectedFieldType) : sources.inputFields).map((f) => buildFieldItem(f, insertField));
+	const secretItems = sources.secretSuggestions.map(buildSecretItem);
+	const constantItems = sources.constantSuggestions.map(buildConstantItem);
+	const pool = prefix === "field" ? fieldItems : prefix === "secret" ? secretItems : prefix === "constant" ? constantItems : [
+		...fieldItems,
+		...secretItems,
+		...constantItems
+	];
+	if (!residual.trim()) return pool;
+	return pool.map((item) => {
+		const titleScore = score(item.title, residual);
+		const keywordScore = (item.keywords ?? []).reduce((best, kw) => Math.max(best, score(kw, residual)), 0);
+		const subtextScore = item.subtext ? score(item.subtext, residual) * .5 : 0;
+		return {
+			item,
+			total: Math.max(titleScore, keywordScore, subtextScore)
+		};
+	}).filter(({ total }) => total > 0).sort((a, b) => b.total - a.total).map(({ item }) => item);
+}
+function KindIcon({ kind }) {
+	if (kind === "field") return null;
+	if (kind === "secret") return /* @__PURE__ */ jsx(Key, {
+		className: "pz:size-3.5 pz:text-amber-700",
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ jsx(Hash, {
+		className: "pz:size-3.5 pz:text-violet-700",
+		"aria-hidden": true
+	});
+}
+function SectionHeader({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "pz:px-2 pz:pt-1.5 pz:pb-0.5 pz:text-[10px] pz:font-medium pz:uppercase pz:tracking-wide pz:text-muted-foreground",
+		children
+	});
+}
+function ItemRow({ item, active, onSelect }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "option",
+		"aria-selected": active,
+		onClick: () => onSelect(item),
+		className: ["pz:flex pz:w-full pz:items-center pz:gap-2 pz:rounded-sm pz:px-2 pz:py-1 pz:text-sm pz:text-left pz:cursor-pointer", active ? "pz:bg-accent pz:text-accent-foreground" : "pz:hover:bg-accent pz:hover:text-accent-foreground"].join(" "),
+		children: [
+			/* @__PURE__ */ jsx(KindIcon, { kind: item.context?.kind ?? "field" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "pz:truncate",
+				children: item.title
+			}),
+			item.subtext && /* @__PURE__ */ jsx("span", {
+				className: "pz:ml-auto pz:shrink-0 pz:truncate pz:text-xs pz:text-muted-foreground",
+				children: item.subtext
+			})
+		]
+	});
+}
+/**
+* Picker UI rendered inside the SuggestionMenu's children render-prop.
+*
+* - Empty query → sectioned view (Fields, Secrets, Constants).
+* - Non-empty query → flat ranked list.
+*
+* The selected-index pointer from `SuggestionMenuRenderProps` always maps
+* to the flat `items` order. Sectioned mode uses the same flat order but
+* inserts headers between the boundaries, so highlight tracking still
+* works without bespoke navigation.
+*/
+function UnifiedReferencePicker({ items, selectedIndex, onSelect, query, hasSecretsResolver, inputFieldsCount, constantsCount }) {
+	const { prefix, residual } = parseQuery(query);
+	if (!!residual.trim() || prefix !== null) {
+		if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-72",
+			role: "listbox",
+			children: [prefix && /* @__PURE__ */ jsx(SectionHeader, { children: prefix === "field" ? "Fields" : prefix === "secret" ? "Secrets" : "Constants" }), /* @__PURE__ */ jsx("div", {
+				className: "pz:px-2 pz:py-1.5 pz:text-sm pz:text-muted-foreground",
+				children: describeEmpty(prefix)
+			})]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-72",
+			role: "listbox",
+			children: [prefix && /* @__PURE__ */ jsx(SectionHeader, { children: prefix === "field" ? "Fields" : prefix === "secret" ? "Secrets" : "Constants" }), items.map((item, index) => /* @__PURE__ */ jsx(ItemRow, {
+				item,
+				active: selectedIndex === index,
+				onSelect
+			}, `${item.context?.kind}-${item.title}`))]
+		});
+	}
+	const fieldItems = items.filter((it) => it.context?.kind === "field");
+	const secretItems = items.filter((it) => it.context?.kind === "secret");
+	const constantItems = items.filter((it) => it.context?.kind === "constant");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-72",
+		role: "listbox",
+		children: [
+			/* @__PURE__ */ jsx(Section, {
+				label: "Fields",
+				kind: "field",
+				items: fieldItems,
+				startIndex: 0,
+				selectedIndex,
+				onSelect,
+				emptyHint: inputFieldsCount === 0 ? "No input fields available." : "No matching input fields."
+			}),
+			hasSecretsResolver && /* @__PURE__ */ jsx(Section, {
+				label: "Secrets",
+				kind: "secret",
+				items: secretItems,
+				startIndex: fieldItems.length,
+				selectedIndex,
+				onSelect,
+				emptyHint: "No matching secrets.",
+				helperHint: "Type /s/ to filter to secrets only."
+			}),
+			constantsCount > 0 && /* @__PURE__ */ jsx(Section, {
+				label: "Constants",
+				kind: "constant",
+				items: constantItems,
+				startIndex: fieldItems.length + secretItems.length,
+				selectedIndex,
+				onSelect,
+				emptyHint: "No matching constants."
+			})
+		]
+	});
+}
+function Section({ label, kind, items, startIndex, selectedIndex, onSelect, emptyHint, helperHint }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:flex pz:flex-col",
+		children: [/* @__PURE__ */ jsxs(SectionHeader, { children: [label, items.length > 0 && /* @__PURE__ */ jsxs("span", {
+			className: "pz:ml-1 pz:normal-case pz:tracking-normal",
+			children: [
+				"(",
+				items.length,
+				")"
+			]
+		})] }), items.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "pz:px-2 pz:py-1 pz:text-xs pz:text-muted-foreground",
+			children: [emptyHint, helperHint && /* @__PURE__ */ jsx("span", {
+				className: "pz:block pz:opacity-70",
+				children: helperHint
+			})]
+		}) : items.map((item, i) => /* @__PURE__ */ jsx(ItemRow, {
+			item,
+			active: selectedIndex === startIndex + i,
+			onSelect
+		}, `${kind}-${item.title}`))]
+	});
+}
+function describeEmpty(prefix) {
+	if (prefix === "secret") return "No matching secrets.";
+	if (prefix === "constant") return "No matching constants.";
+	if (prefix === "field") return "No matching fields.";
+	return "No matches.";
+}
+
+//#endregion
+export { UnifiedReferencePicker, buildReferenceItems };
+//# sourceMappingURL=UnifiedReferencePicker.mjs.map

package/dist/components/internal/LiquidEditor/UnifiedReferencePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnifiedReferencePicker.mjs","names":[],"sources":["../../../../src/components/internal/LiquidEditor/UnifiedReferencePicker.tsx"],"sourcesContent":["import type { PipesFieldDefinitionWithName } from \"@pipe0/base\";\nimport { Hash, Key } from \"lucide-react\";\nimport type { ConstantSuggestion, SecretSuggestion } from \"../../../types/field-props.js\";\nimport type {\n  SuggestionItem,\n  SuggestionMenuRenderProps,\n} from \"../suggestion-menu/suggestion-menu-types.js\";\n\nexport type ReferenceKind = \"field\" | \"secret\" | \"constant\";\n\nexport interface ReferenceContext {\n  kind: ReferenceKind;\n}\n\nexport interface ReferenceSources {\n  inputFields: PipesFieldDefinitionWithName[];\n  secretSuggestions: SecretSuggestion[];\n  constantSuggestions: ConstantSuggestion[];\n}\n\nconst PREFIX_RE = /^([fsc])\\/(.*)$/;\n\n/**\n * Parses a typed query into `(prefix, residual)`. Lets users filter\n * directly to a single source: `f/email`, `s/STRIPE`, `c/REGION`.\n * Without a prefix, all sources are searched.\n */\nexport function parseQuery(query: string): {\n  prefix: ReferenceKind | null;\n  residual: string;\n} {\n  const m = query.match(PREFIX_RE);\n  if (!m) return { prefix: null, residual: query };\n  const map = { f: \"field\", s: \"secret\", c: \"constant\" } as const;\n  return { prefix: map[m[1] as \"f\" | \"s\" | \"c\"], residual: m[2] };\n}\n\nfunction score(haystack: string, needle: string): number {\n  if (!needle) return 1;\n  const h = haystack.toLowerCase();\n  const n = needle.toLowerCase();\n  if (h === n) return 100;\n  if (h.startsWith(n)) return 50;\n  if (h.includes(n)) return 10;\n  return 0;\n}\n\nfunction buildFieldItem(\n  f: PipesFieldDefinitionWithName,\n  insertField: (name: string) => string,\n): SuggestionItem<ReferenceContext> {\n  return {\n    title: f.resolvedName,\n    subtext: f.type,\n    keywords: [f.type],\n    context: { kind: \"field\" },\n    onSelect: ({ editor, range }) => {\n      editor.chain().focus().insertContentAt(range, insertField(f.resolvedName)).run();\n    },\n  };\n}\n\nfunction buildSecretItem(s: SecretSuggestion): SuggestionItem<ReferenceContext> {\n  return {\n    title: s.label,\n    subtext: `${s.mask} · ${s.ownershipLevel}${s.providerHint ? ` · ${s.providerHint}` : \"\"}`,\n    keywords: [s.publicId, s.providerHint ?? \"\"],\n    context: { kind: \"secret\" },\n    onSelect: ({ editor, range }) => {\n      editor.chain().focus().insertContentAt(range, `{{ SECRETS.${s.publicId} }}`).run();\n    },\n  };\n}\n\nfunction buildConstantItem(c: ConstantSuggestion): SuggestionItem<ReferenceContext> {\n  return {\n    title: c.label,\n    subtext: c.ownershipLevel,\n    keywords: [c.publicId],\n    context: { kind: \"constant\" },\n    onSelect: ({ editor, range }) => {\n      editor.chain().focus().insertContentAt(range, `{{ CONSTANTS.${c.publicId} }}`).run();\n    },\n  };\n}\n\n/**\n * Builds the suggestion list for a given query against the three sources.\n * Behavior:\n *   - empty query → returns all items in source order (Fields, then\n *     Secrets, then Constants). Header rows are rendered separately by\n *     the picker UI — this function returns a flat list of items only.\n *   - non-empty query → ranks across all sources with a simple\n *     starts-with > includes scoring. Items with a zero score are\n *     dropped.\n *   - prefix syntax `f/`, `s/`, `c/` filters to a single source before\n *     scoring with the residual.\n */\nexport function buildReferenceItems(\n  query: string,\n  sources: ReferenceSources,\n  expectedFieldType: string | undefined,\n  insertField: (name: string) => string,\n): SuggestionItem<ReferenceContext>[] {\n  const { prefix, residual } = parseQuery(query);\n\n  const fieldsAll = expectedFieldType\n    ? sources.inputFields.filter((f) => f.type === expectedFieldType)\n    : sources.inputFields;\n\n  const fieldItems = fieldsAll.map((f) => buildFieldItem(f, insertField));\n  const secretItems = sources.secretSuggestions.map(buildSecretItem);\n  const constantItems = sources.constantSuggestions.map(buildConstantItem);\n\n  const pool: SuggestionItem<ReferenceContext>[] =\n    prefix === \"field\"\n      ? fieldItems\n      : prefix === \"secret\"\n        ? secretItems\n        : prefix === \"constant\"\n          ? constantItems\n          : [...fieldItems, ...secretItems, ...constantItems];\n\n  if (!residual.trim()) return pool;\n\n  return pool\n    .map((item) => {\n      const titleScore = score(item.title, residual);\n      const keywordScore = (item.keywords ?? []).reduce(\n        (best, kw) => Math.max(best, score(kw, residual)),\n        0,\n      );\n      const subtextScore = item.subtext ? score(item.subtext, residual) * 0.5 : 0;\n      const total = Math.max(titleScore, keywordScore, subtextScore);\n      return { item, total };\n    })\n    .filter(({ total }) => total > 0)\n    .sort((a, b) => b.total - a.total)\n    .map(({ item }) => item);\n}\n\nfunction KindIcon({ kind }: { kind: ReferenceKind }) {\n  // Fields are the default category and don't need a marker — the section\n  // header and the type column on the right convey the kind.\n  if (kind === \"field\") return null;\n  if (kind === \"secret\") return <Key className=\"pz:size-3.5 pz:text-amber-700\" aria-hidden />;\n  return <Hash className=\"pz:size-3.5 pz:text-violet-700\" aria-hidden />;\n}\n\nfunction SectionHeader({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"pz:px-2 pz:pt-1.5 pz:pb-0.5 pz:text-[10px] pz:font-medium pz:uppercase pz:tracking-wide pz:text-muted-foreground\">\n      {children}\n    </div>\n  );\n}\n\nfunction ItemRow({\n  item,\n  active,\n  onSelect,\n}: {\n  item: SuggestionItem<ReferenceContext>;\n  active: boolean;\n  onSelect: (item: SuggestionItem<ReferenceContext>) => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      aria-selected={active}\n      onClick={() => onSelect(item)}\n      className={[\n        \"pz:flex pz:w-full pz:items-center pz:gap-2 pz:rounded-sm pz:px-2 pz:py-1 pz:text-sm pz:text-left pz:cursor-pointer\",\n        active\n          ? \"pz:bg-accent pz:text-accent-foreground\"\n          : \"pz:hover:bg-accent pz:hover:text-accent-foreground\",\n      ].join(\" \")}\n    >\n      <KindIcon kind={item.context?.kind ?? \"field\"} />\n      <span className=\"pz:truncate\">{item.title}</span>\n      {item.subtext && (\n        <span className=\"pz:ml-auto pz:shrink-0 pz:truncate pz:text-xs pz:text-muted-foreground\">\n          {item.subtext}\n        </span>\n      )}\n    </button>\n  );\n}\n\n/**\n * Picker UI rendered inside the SuggestionMenu's children render-prop.\n *\n * - Empty query → sectioned view (Fields, Secrets, Constants).\n * - Non-empty query → flat ranked list.\n *\n * The selected-index pointer from `SuggestionMenuRenderProps` always maps\n * to the flat `items` order. Sectioned mode uses the same flat order but\n * inserts headers between the boundaries, so highlight tracking still\n * works without bespoke navigation.\n */\nexport function UnifiedReferencePicker({\n  items,\n  selectedIndex,\n  onSelect,\n  query,\n  hasSecretsResolver,\n  inputFieldsCount,\n  constantsCount,\n}: SuggestionMenuRenderProps<ReferenceContext> & {\n  query: string;\n  hasSecretsResolver: boolean;\n  inputFieldsCount: number;\n  constantsCount: number;\n}) {\n  const { prefix, residual } = parseQuery(query);\n  const isFlat = !!residual.trim() || prefix !== null;\n\n  if (isFlat) {\n    if (items.length === 0) {\n      return (\n        <div className=\"pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-72\" role=\"listbox\">\n          {prefix && (\n            <SectionHeader>\n              {prefix === \"field\" ? \"Fields\" : prefix === \"secret\" ? \"Secrets\" : \"Constants\"}\n            </SectionHeader>\n          )}\n          <div className=\"pz:px-2 pz:py-1.5 pz:text-sm pz:text-muted-foreground\">\n            {describeEmpty(prefix)}\n          </div>\n        </div>\n      );\n    }\n    return (\n      <div className=\"pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-72\" role=\"listbox\">\n        {prefix && (\n          <SectionHeader>\n            {prefix === \"field\" ? \"Fields\" : prefix === \"secret\" ? \"Secrets\" : \"Constants\"}\n          </SectionHeader>\n        )}\n        {items.map((item, index) => (\n          <ItemRow\n            key={`${item.context?.kind}-${item.title}`}\n            item={item}\n            active={selectedIndex === index}\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  // Sectioned view — always render Fields and Secrets headers in fixed\n  // order, with empty-state hints when a section has no items. Constants\n  // only appear when there are any to show.\n  //\n  // The selectedIndex still maps to the flat `items` order returned by\n  // `buildReferenceItems` (Fields → Secrets → Constants).\n  const fieldItems = items.filter((it) => it.context?.kind === \"field\");\n  const secretItems = items.filter((it) => it.context?.kind === \"secret\");\n  const constantItems = items.filter((it) => it.context?.kind === \"constant\");\n\n  return (\n    <div className=\"pz:flex pz:flex-col pz:gap-0.5 pz:p-1 pz:min-w-72\" role=\"listbox\">\n      <Section\n        label=\"Fields\"\n        kind=\"field\"\n        items={fieldItems}\n        startIndex={0}\n        selectedIndex={selectedIndex}\n        onSelect={onSelect}\n        emptyHint={\n          inputFieldsCount === 0\n            ? \"No input fields available.\"\n            : \"No matching input fields.\"\n        }\n      />\n      {hasSecretsResolver && (\n        <Section\n          label=\"Secrets\"\n          kind=\"secret\"\n          items={secretItems}\n          startIndex={fieldItems.length}\n          selectedIndex={selectedIndex}\n          onSelect={onSelect}\n          emptyHint=\"No matching secrets.\"\n          helperHint=\"Type /s/ to filter to secrets only.\"\n        />\n      )}\n      {constantsCount > 0 && (\n        <Section\n          label=\"Constants\"\n          kind=\"constant\"\n          items={constantItems}\n          startIndex={fieldItems.length + secretItems.length}\n          selectedIndex={selectedIndex}\n          onSelect={onSelect}\n          emptyHint=\"No matching constants.\"\n        />\n      )}\n    </div>\n  );\n}\n\nfunction Section({\n  label,\n  kind,\n  items,\n  startIndex,\n  selectedIndex,\n  onSelect,\n  emptyHint,\n  helperHint,\n}: {\n  label: string;\n  kind: ReferenceKind;\n  items: SuggestionItem<ReferenceContext>[];\n  startIndex: number;\n  selectedIndex?: number;\n  onSelect: (item: SuggestionItem<ReferenceContext>) => void;\n  emptyHint: string;\n  helperHint?: string;\n}) {\n  return (\n    <div className=\"pz:flex pz:flex-col\">\n      <SectionHeader>\n        {label}\n        {items.length > 0 && (\n          <span className=\"pz:ml-1 pz:normal-case pz:tracking-normal\">({items.length})</span>\n        )}\n      </SectionHeader>\n      {items.length === 0 ? (\n        <div className=\"pz:px-2 pz:py-1 pz:text-xs pz:text-muted-foreground\">\n          {emptyHint}\n          {helperHint && <span className=\"pz:block pz:opacity-70\">{helperHint}</span>}\n        </div>\n      ) : (\n        items.map((item, i) => (\n          <ItemRow\n            key={`${kind}-${item.title}`}\n            item={item}\n            active={selectedIndex === startIndex + i}\n            onSelect={onSelect}\n          />\n        ))\n      )}\n    </div>\n  );\n}\n\nfunction describeEmpty(prefix: ReferenceKind | null): string {\n  if (prefix === \"secret\") return \"No matching secrets.\";\n  if (prefix === \"constant\") return \"No matching constants.\";\n  if (prefix === \"field\") return \"No matching fields.\";\n  return \"No matches.\";\n}\n"],"mappings":"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"}