import { Dt as e, J as t, K as n, Tt as r, W as i } from "../dist-DgSmYkuV.js";
import { YamlEditor as a } from "../editors/yaml-editor.js";
import { t as o } from "../utils-B7XIe3qq.js";
import * as s from "react";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region src/primitives/yaml-override-editor.tsx
var u = n.baseTheme({ ".cmm-yaml-placeholder": {
	backgroundColor: "hsl(var(--info, 189 94% 33%) / 0.15)",
	color: "hsl(var(--info, 189 94% 33%))",
	borderRadius: "3px",
	padding: "0 2px",
	fontWeight: "600"
} });
function d(e) {
	return t.fromClass(class {
		decorations;
		constructor(e) {
			this.decorations = this.compute(e);
		}
		update(e) {
			(e.docChanged || e.viewportChanged) && (this.decorations = this.compute(e.view));
		}
		compute(t) {
			let n = e();
			if (n.length === 0) return i.none;
			let a = n.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")), o = RegExp(`(${a.join("|")})`, "g"), s = new r();
			for (let { from: e, to: n } of t.visibleRanges) {
				let r = t.state.doc.sliceString(e, n), a;
				for (o.lastIndex = 0; (a = o.exec(r)) !== null;) {
					let t = e + a.index, n = t + a[0].length;
					s.add(t, n, i.mark({ class: "cmm-yaml-placeholder" }));
				}
			}
			return s.finish();
		}
	}, { decorations: (e) => e.decorations });
}
function f({ value: t, onChange: n, placeholders: r, readOnly: i, height: f = 260, className: p }) {
	let m = s.useRef(null), h = s.useRef(null), g = s.useRef(r ?? {}), _ = s.useRef(n);
	s.useEffect(() => {
		g.current = r ?? {};
	}, [r]), s.useEffect(() => {
		_.current = n;
	}, [n]), s.useEffect(() => {
		let n = m.current;
		if (!n) return;
		let r = d(() => Object.keys(g.current)), o = new a({
			container: n,
			value: t,
			readOnly: i === !0,
			onChange: (e) => {
				_.current(e);
			}
		});
		return o.getView().dispatch({ effects: e.appendConfig.of([r, u]) }), h.current = o, () => {
			o.destroy(), h.current = null;
		};
	}, []), s.useEffect(() => {
		let e = h.current;
		e && e.getValue() !== t && e.setValue(t);
	}, [t]), s.useEffect(() => {
		h.current?.setReadOnly(i === !0);
	}, [i]);
	let v = typeof f == "number" ? `${String(f)}px` : f, y = Object.entries(r ?? {});
	return /* @__PURE__ */ l("div", {
		"data-slot": "yaml-override-editor",
		className: o("flex flex-col gap-2", p),
		children: [/* @__PURE__ */ c("div", {
			ref: m,
			"data-slot": "yaml-override-editor-host",
			className: "overflow-hidden rounded-md border border-border bg-muted/40",
			style: { height: v }
		}), y.length > 0 && /* @__PURE__ */ c("div", {
			"data-slot": "yaml-override-editor-legend",
			className: "flex flex-wrap gap-1.5",
			"aria-label": "Placeholders",
			children: y.map(([e, t]) => /* @__PURE__ */ l("span", {
				title: t.description,
				className: "inline-flex items-center gap-1 rounded-md border border-info/30 bg-info/10 px-2 py-0.5 text-[11px] font-medium text-info",
				children: [/* @__PURE__ */ c("code", {
					className: "font-mono text-[11px]",
					children: e
				}), /* @__PURE__ */ c("span", {
					className: "text-foreground/80",
					children: t.label
				})]
			}, e))
		})]
	});
}
//#endregion
export { f as YamlOverrideEditor };

//# sourceMappingURL=yaml-override-editor.js.map