"
+ ? "flow.tags." + (term.customTagKey || "")
+ : term.customCtx;
+ if (term.customOp === "exists") {
+ inner = `exists(${ctx})`;
+ } else if (term.customOp === "matches") {
+ inner = `matches(${ctx}, "${term.customValue || ""}")`;
+ } else {
+ inner = `${ctx} ${term.customOp} "${term.customValue || ""}"`;
+ }
+ break;
+ }
+ case "raw":
+ inner = unwrapExpr(term.raw);
+ break;
+ default:
+ inner = "";
+ }
+ if (inner === "") return "";
+ // NegateExpr wraps in parentheses regardless of precedence.
+ return term.negate ? `not (${inner})` : inner;
+ }
+
+ // serializeExpr combines a term list with a logical operator, wrapping the
+ // result in ${{ }} — matching CombineExprs + WrapExpr in the Go wizard.
+ function serializeExpr(expr) {
+ if (!expr) return "";
+ const inners = (expr.terms || []).map(termToInner).filter((s) => s !== "");
+ if (inners.length === 0) return "";
+ if (inners.length === 1) return "${{ " + inners[0] + " }}";
+ return "${{ " + inners.join(" " + (expr.combine || "and") + " ") + " }}";
+ }
+
+ // -------------------------------------------------------------------------
+ // State factories
+ // -------------------------------------------------------------------------
+
+ // uid hands out stable, monotonic ids for React keys on the dynamic term /
+ // exception / attestation lists. Index keys would let React reuse the wrong
+ // DOM node when an item is removed from the middle of a list. idBox lives in
+ // useState's lazy initializer (run once), so it persists across renders
+ // without a ref hook — only useState/useMemo exist in the Mintlify sandbox.
+ const idBox = useState(() => ({ n: 0 }))[0];
+ function uid() {
+ idBox.n += 1;
+ return idBox.n;
+ }
+
+ function newTerm() {
+ return {
+ id: uid(),
+ kind: "flow_name",
+ negate: false,
+ flowName: "",
+ tagKey: "",
+ tagOp: "==",
+ tagValue: "",
+ artifactRegex: "",
+ customCtx: "flow.name",
+ customTagKey: "",
+ customOp: "==",
+ customValue: "",
+ raw: "",
+ };
+ }
+
+ function newExpr() {
+ return { id: uid(), combine: "and", terms: [newTerm()] };
+ }
+
+ function newAttestation() {
+ return {
+ id: uid(),
+ type: "snyk",
+ customType: "",
+ name: "*",
+ condEnabled: false,
+ cond: newExpr(),
+ };
+ }
+
+ function attestationIsValid(a) {
+ const type = a.type === "custom" ? "custom:" + (a.customType || "") : a.type;
+ if (a.type === "custom" && !a.customType) return false;
+ if (type === "*" && (a.name || "*") === "*") return false;
+ return true;
+ }
+
+ // -------------------------------------------------------------------------
+ // Styles — theme-neutral inline styles so the component renders consistently
+ // regardless of the surrounding Mintlify CSS.
+ // -------------------------------------------------------------------------
+
+ const S = {
+ wrap: {
+ display: "grid",
+ gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.5fr)",
+ gap: "1.25rem",
+ alignItems: "start",
+ },
+ panel: {
+ border: "1px solid var(--gray-200, #e5e7eb)",
+ borderRadius: "0.5rem",
+ padding: "1rem",
+ },
+ section: { marginBottom: "1.25rem" },
+ legend: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "0.95rem" },
+ row: {
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ flexWrap: "wrap",
+ marginBottom: "0.5rem",
+ },
+ label: {
+ display: "inline-flex",
+ flexDirection: "row-reverse",
+ alignItems: "center",
+ gap: "0.4rem",
+ fontSize: "0.9rem",
+ },
+ input: {
+ padding: "0.35rem 0.5rem",
+ border: "1px solid var(--gray-300, #d1d5db)",
+ borderRadius: "0.375rem",
+ fontSize: "0.85rem",
+ background: "var(--background, transparent)",
+ color: "inherit",
+ },
+ select: {
+ padding: "0.35rem 0.5rem",
+ border: "1px solid var(--gray-300, #d1d5db)",
+ borderRadius: "0.375rem",
+ fontSize: "0.85rem",
+ background: "var(--background, transparent)",
+ color: "inherit",
+ },
+ btn: {
+ padding: "0.3rem 0.7rem",
+ border: "1px solid var(--gray-300, #d1d5db)",
+ borderRadius: "0.375rem",
+ fontSize: "0.8rem",
+ cursor: "pointer",
+ background: "transparent",
+ color: "inherit",
+ },
+ btnPrimary: {
+ padding: "0.3rem 0.7rem",
+ border: "none",
+ borderRadius: "0.375rem",
+ fontSize: "0.8rem",
+ cursor: "pointer",
+ background: "#2563eb",
+ color: "#fff",
+ },
+ card: {
+ border: "1px solid var(--gray-200, #e5e7eb)",
+ borderRadius: "0.375rem",
+ padding: "0.75rem",
+ marginBottom: "0.75rem",
+ },
+ pre: {
+ margin: 0,
+ padding: "1rem",
+ borderRadius: "0.5rem",
+ background: "#0d1117",
+ color: "#e6edf3",
+ fontFamily:
+ "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+ fontSize: "0.8rem",
+ lineHeight: 1.5,
+ overflowX: "auto",
+ whiteSpace: "pre",
+ },
+ warn: { color: "#b45309", fontSize: "0.8rem", margin: "0.25rem 0 0.5rem" },
+ muted: { fontSize: "0.8rem", opacity: 0.7 },
+ fieldLabel: { fontWeight: 600, fontSize: "0.85rem", minWidth: "3rem" },
+ fieldRow: {
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ flexWrap: "wrap",
+ marginBottom: "0.2rem",
+ },
+ };
+
+ // -------------------------------------------------------------------------
+ // Render helpers — plain functions returning JSX (see header note). Each
+ // function used inside a list sets `key` on its returned root element.
+ // -------------------------------------------------------------------------
+
+ function termEditor({ term, onChange, onRemove, removable, keyId }) {
+ const set = (patch) => onChange({ ...term, ...patch });
+ return (
+
+ );
+ }
+
+ function expressionEditor({ expr, onChange, keyId }) {
+ const setTerm = (i, term) => {
+ const terms = expr.terms.slice();
+ terms[i] = term;
+ onChange({ ...expr, terms });
+ };
+ const removeTerm = (i) => {
+ const terms = expr.terms.filter((_, idx) => idx !== i);
+ onChange({ ...expr, terms: terms.length ? terms : [newTerm()] });
+ };
+ const addTerm = () =>
+ onChange({ ...expr, terms: [...expr.terms, newTerm()] });
+
+ return (
+
+ {expr.terms.length > 1 && (
+
+ Combine terms with
+
+
+ )}
+ {expr.terms.map((term, i) =>
+ termEditor({
+ term,
+ keyId: term.id,
+ onChange: (t) => setTerm(i, t),
+ onRemove: () => removeTerm(i),
+ removable: expr.terms.length > 1,
+ })
+ )}
+
+
+ {exceptions.map((expr, i) => (
+
+
+
+ {label} exception {i + 1}
+
+
+
+ {expressionEditor({ expr, onChange: (e) => update(i, e) })}
+
+ ))}
+
+
+
+
+ Attestation {index + 1}
+
+
+
+
+ type
+
+
+ {att.type === "custom" && (
+
+ custom type
+ set({ customType: e.target.value })}
+ />
+
+ )}
+
+ name
+ set({ name: e.target.value })}
+ />
+
+ {!valid && (
+
+ {att.type === "custom" && !att.customType
+ ? "Enter a custom type name."
+ : "type and name cannot both be * — give the attestation a name."}
+
+ )}
+
+ {att.condEnabled && (
+
+ {expressionEditor({
+ expr: att.cond,
+ onChange: (cond) => set({ cond }),
+ })}
+
+ )}
+
+ {line}
+
+ );
+ }
+ const m = line.match(/^(\s*)(- )?([A-Za-z0-9_.-]+):( ?)(.*)$/);
+ let content;
+ if (!m) {
+ content = line === "" ? " " : line;
+ } else {
+ const indent = m[1];
+ const dash = m[2];
+ const key = m[3];
+ const space = m[4];
+ const value = m[5];
+ content = (
+ <>
+ {indent}
+ {dash ? {dash} : null}
+ {key}
+ :
+ {space}
+ {value !== "" ? highlightValue(value) : null}
+
+ );
+ }
+ return (
+
+ {content}
+
+ );
+ });
+ }
+
+ // -------------------------------------------------------------------------
+ // State + render
+ // -------------------------------------------------------------------------
+
+ const [provReq, setProvReq] = useState(false);
+ const [provExc, setProvExc] = useState([]);
+ const [trailReq, setTrailReq] = useState(false);
+ const [trailExc, setTrailExc] = useState([]);
+ const [atts, setAtts] = useState([]);
+ const [copied, setCopied] = useState(false);
+
+ const yaml = useMemo(
+ () => serializePolicy({ provReq, provExc, trailReq, trailExc, atts }),
+ [provReq, provExc, trailReq, trailExc, atts]
+ );
+
+ const invalidCount = atts.filter((a) => !attestationIsValid(a)).length;
+
+ const copy = () => {
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ navigator.clipboard.writeText(yaml).then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1500);
+ });
+ }
+ };
+
+ return (
+
+
+ {/* Provenance */}
+
+
Provenance
+
+ {provReq && (
+
+ {exceptionList({
+ exceptions: provExc,
+ onChange: setProvExc,
+ label: "provenance",
+ })}
+
+ )}
+
+
+ {/* Trail compliance */}
+
+
Trail compliance
+
+ {trailReq && (
+
+ {exceptionList({
+ exceptions: trailExc,
+ onChange: setTrailExc,
+ label: "trail-compliance",
+ })}
+
+ )}
+
+
+ {/* Attestations */}
+
+
Required attestations
+ {atts.map((att, i) =>
+ attestationRow({
+ att,
+ index: i,
+ onChange: (next) => {
+ const arr = atts.slice();
+ arr[i] = next;
+ setAtts(arr);
+ },
+ onRemove: () => setAtts(atts.filter((_, idx) => idx !== i)),
+ })
+ )}
+
+
+
+
+
+
+
+ policy.yaml
+
+
+
+ {invalidCount > 0 && (
+
+ {invalidCount} attestation rule{invalidCount > 1 ? "s are" : " is"}{" "}
+ incomplete and excluded from the output.
+
+ )}
+
{highlightYaml(yaml)}
+
+