@pipe0/react 0.0.2

package/dist/components/internal/schema-editor/schema-utils.mjs

@@ -0,0 +1,249 @@
+import { getByPath, setByPath, setWithObjects, unsetByPath } from "../../../utils/object-path.mjs";
+
+//#region src/components/internal/schema-editor/schema-utils.ts
+const schemaInputRegex = {
+	parameterName: {
+		expression: /^[a-zA-Z0-9_\-$()]+$/,
+		message: "Parameter names cannot contain special characters or spaces"
+	},
+	propertyName: {
+		expression: /^[a-zA-Z0-9_-]+$/,
+		message: "Property names cannot contain special characters or spaces"
+	},
+	genericUrl: {
+		expression: /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/,
+		message: "Enter a valid url like: https://api.example.com/v1."
+	},
+	urlPath: {
+		expression: /^(?=.+)(\/([a-z0-9_.-]+|(\{[a-zA-Z0-9_.-]+\})))*\/?$/,
+		message: "Invalid url path. Example: /{variable}/foo. Special characters are not allowed. URL path must be lower case."
+	},
+	modelName: {
+		expression: /^[a-zA-Z0-9]+$/,
+		message: "Schema names cannot contain spaces or special characters."
+	}
+};
+const EDITOR_PLACEHOLDER_TOKEN = "%%%";
+function generatePlaceholderId() {
+	return `${"%%%"}${crypto.randomUUID().substring(0, 4)}`;
+}
+function typedIncludes(coll, el) {
+	return coll.includes(el);
+}
+function findComposedKey(schema) {
+	if (schema.oneOf) return "oneOf";
+	if (schema.anyOf) return "anyOf";
+	return "allOf";
+}
+function isArraySchema(schema) {
+	return schema.type === "array";
+}
+function isSimpleSchema(schema) {
+	return typedIncludes(simplePropertyTypes, schema.type);
+}
+function isObjectSchema(schema) {
+	if (Array.isArray(schema.type)) return false;
+	if (schema.type && schema.type === "object") return true;
+	return !!schema.properties;
+}
+function isComposedSchema(schema) {
+	return Boolean(schema.allOf || schema.oneOf || schema.anyOf);
+}
+const simplePropertyTypes = [
+	"integer",
+	"number",
+	"string",
+	"boolean",
+	"null"
+];
+const propertyTypes = [
+	...simplePropertyTypes,
+	"array",
+	"object"
+];
+const composedPropertyTypes = [
+	"allOf",
+	"anyOf",
+	"oneOf"
+];
+const allPropertyTypes = [...propertyTypes, ...composedPropertyTypes];
+function moveUpLevel(path) {
+	const match = path.match(/^(.*)(\.[\w\d_%&-]+|\[\d+\])$/);
+	return match ? match[1] : "";
+}
+function removePathFromSchema(schema, path) {
+	const cp = structuredClone(schema);
+	const parentPath = moveUpLevel(path);
+	const parentProperty = getByPath(cp, parentPath);
+	if (Array.isArray(parentProperty)) {
+		const match = path.match(/.*\[(\d+)\]$/);
+		if (match == null || !match[1]) throw new Error("Could not find index to splice");
+		parentProperty.splice(Number(match[1]), 1);
+		setByPath(cp, parentPath, parentProperty);
+	} else unsetByPath(cp, path);
+	return cp;
+}
+function getPathProperty(schema, path) {
+	if (path === "") return schema;
+	const currentProperty = getByPath(schema, path);
+	if (!currentProperty) throw new Error("No current property");
+	return currentProperty;
+}
+function getLastPathSegment(path) {
+	const split = path.split(".");
+	return split[split.length - 1] || "";
+}
+function findNearestObject(schema, path) {
+	let currentPath = path;
+	while (currentPath) {
+		currentPath = moveUpLevel(currentPath);
+		const currentProperty = getPathProperty(schema, currentPath);
+		if ("properties" in currentProperty && currentProperty.type === "object") return currentProperty;
+	}
+}
+function doesPathEndOnPropertyName(path) {
+	return /properties\.[^.]+$/.test(path);
+}
+function removeRequiredForProperty(schema, path) {
+	const cp = structuredClone(schema);
+	if (doesPathEndOnPropertyName(path) === false) return cp;
+	const nearestObject = findNearestObject(cp, path);
+	if (!nearestObject) return cp;
+	if (!Array.isArray(nearestObject.required)) return cp;
+	const propertyName = getLastPathSegment(path);
+	nearestObject.required = nearestObject.required.filter((e) => e !== propertyName);
+	return cp;
+}
+function addRequiredToProperty(rootSchema, path) {
+	const cp = structuredClone(rootSchema);
+	if (doesPathEndOnPropertyName(path) === false) throw new Error("Can only toggle required for object");
+	const nearestObject = findNearestObject(cp, path);
+	if (!nearestObject) throw new Error("Unable to find wrapping object");
+	const requiredArr = nearestObject.required || [];
+	const propertyName = getLastPathSegment(path);
+	if (propertyName) {
+		if (requiredArr.some((e) => e === propertyName)) throw new Error("Property is already required");
+		else requiredArr.push(propertyName);
+		nearestObject.required = requiredArr;
+	}
+	return cp;
+}
+function insertAtPath(schema, path, newSchema) {
+	if (path === "") return structuredClone(newSchema);
+	const cp = structuredClone(schema);
+	setByPath(cp, path, newSchema);
+	return cp;
+}
+function getPristineType(type) {
+	switch (type) {
+		case "boolean":
+		case "integer":
+		case "number":
+		case "string": return { type };
+		case "array": return {
+			type: "array",
+			items: { type: "string" }
+		};
+		case "object": return { type: "object" };
+		case "null": return { type: "null" };
+		case "oneOf": return { oneOf: [{
+			type: "object",
+			properties: {}
+		}] };
+		case "anyOf": return { anyOf: [{
+			type: "object",
+			properties: {}
+		}] };
+		case "allOf": return { allOf: [{
+			type: "object",
+			properties: {}
+		}] };
+		default: throw new Error("Trying to change to unknown type");
+	}
+}
+function changeType(schema, path, newType) {
+	const placeholderSchema = getPristineType(newType) || getPristineType("object");
+	if (path === "") return placeholderSchema;
+	return insertAtPath(schema, path, placeholderSchema);
+}
+function isDirectAncestorOfComposedProperty(rootSchema, path) {
+	const parentProperty = getByPath(rootSchema, moveUpLevel(path));
+	return Array.isArray(parentProperty);
+}
+/**
+* Rules for available types.
+*
+* TOP LEVEL REFERENCES
+* dtos + schemas: Schemas and DTOs cannot have top-level references
+*
+* DIRECT ANCESTOR OF COMPOSED TYPE
+* schemaTypes: cannot be composes types as well: allof.allof is forbidden
+*/
+function getTypeOptions({ schema, rootSchema, path }) {
+	let propertyTypes = [...allPropertyTypes];
+	const isComposed = isDirectAncestorOfComposedProperty(rootSchema, path);
+	const isArraySchema = schema.type === "array";
+	if (isComposed) propertyTypes = [...propertyTypes];
+	const innerArrayTypeOptions = isArraySchema ? { propertyTypes: [...allPropertyTypes] } : void 0;
+	return {
+		propertyTypes,
+		innerArrayTypeOptions
+	};
+}
+function isNonArraySchemaObject(schema) {
+	if (schema.type === "array" || Array.isArray(schema.type)) return false;
+	return true;
+}
+function addPlaceholderToPath(rootSchema, path) {
+	const property = getPathProperty(rootSchema, path);
+	const cp = structuredClone(property);
+	if (Array.isArray(cp)) throw new Error("Can't add placeholder to array");
+	if ("$ref" in cp) throw new Error("Can't add placeholder to ref schema");
+	if ((cp.oneOf || cp.allOf || cp.anyOf) && isNonArraySchemaObject(cp)) {
+		cp[findComposedKey(cp)]?.push({
+			type: "object",
+			properties: {}
+		});
+		return [insertAtPath(rootSchema, path, cp), void 0];
+	}
+	if ("type" in cp && cp.type === "object") {
+		const placeholderId = generatePlaceholderId();
+		if (!cp.properties) cp.properties = {};
+		return [insertAtPath(rootSchema, `${path}${path === "" ? "properties" : ".properties"}`, {
+			...cp.properties,
+			[placeholderId]: { type: "string" }
+		}), placeholderId];
+	}
+	throw new Error("Can't add placeholder to invalid type");
+}
+function changePropertyName(schema, path, newPropertyName) {
+	if (doesPathEndOnPropertyName(path) === false) throw new Error("Path must end on property name");
+	let cp = structuredClone(schema);
+	const oldPropertyName = getLastPathSegment(path);
+	const parentPath = moveUpLevel(path);
+	const nearestObject = findNearestObject(cp, path);
+	const newPath = `${parentPath}.${newPropertyName}`;
+	const property = getPathProperty(cp, path);
+	const isRequired = (nearestObject?.required || []).some((e) => e === oldPropertyName);
+	if (isRequired) cp = removeRequiredForProperty(cp, path);
+	unsetByPath(cp, path);
+	setWithObjects(cp, newPath, property);
+	if (isRequired) cp = addRequiredToProperty(cp, newPath);
+	return cp;
+}
+const addPlaceholderToSchema = ({ schema, path }) => {
+	let newSchema = structuredClone(schema);
+	const property = getPathProperty(schema, path);
+	if (!isNonArraySchemaObject(property)) throw new Error("Schema is not of type NonArray");
+	if (Object.keys(property.properties || {}).some((k) => k.startsWith("%%%"))) throw new Error("There is an existing placeholder");
+	const placeholderValues = addPlaceholderToPath(newSchema, path);
+	newSchema = placeholderValues[0];
+	return {
+		schema: newSchema,
+		placeholderId: placeholderValues[1]
+	};
+};
+
+//#endregion
+export { addPlaceholderToPath, addPlaceholderToSchema, addRequiredToProperty, changePropertyName, changeType, findComposedKey, getPathProperty, getTypeOptions, isArraySchema, isComposedSchema, isNonArraySchemaObject, isObjectSchema, isSimpleSchema, moveUpLevel, removePathFromSchema, removeRequiredForProperty, schemaInputRegex, simplePropertyTypes };
+//# sourceMappingURL=schema-utils.mjs.map

package/dist/components/internal/schema-editor/schema-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-utils.mjs","names":[],"sources":["../../../../src/components/internal/schema-editor/schema-utils.ts"],"sourcesContent":["import type { JSONSchema } from \"zod/v4/core\";\nimport { getByPath, setByPath, setWithObjects, unsetByPath } from \"../../../utils/object-path.js\";\n\nexport const schemaInputRegex = {\n  parameterName: {\n    expression: /^[a-zA-Z0-9_\\-$()]+$/,\n    message: \"Parameter names cannot contain special characters or spaces\",\n  },\n  propertyName: {\n    expression: /^[a-zA-Z0-9_-]+$/,\n    message: \"Property names cannot contain special characters or spaces\",\n  },\n  genericUrl: {\n    expression:\n      /https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/,\n    message: \"Enter a valid url like: https://api.example.com/v1.\",\n  },\n  urlPath: {\n    expression: /^(?=.+)(\\/([a-z0-9_.-]+|(\\{[a-zA-Z0-9_.-]+\\})))*\\/?$/,\n    message:\n      \"Invalid url path. Example: /{variable}/foo. Special characters are not allowed. URL path must be lower case.\",\n  },\n  modelName: {\n    expression: /^[a-zA-Z0-9]+$/,\n    message: \"Schema names cannot contain spaces or special characters.\",\n  },\n};\n\nexport const EDITOR_PLACEHOLDER_TOKEN = \"%%%\";\n\nfunction generatePlaceholderId() {\n  return `${EDITOR_PLACEHOLDER_TOKEN}${crypto.randomUUID().substring(0, 4)}`;\n}\n\nexport type NonArraySchemaObject =\n  | JSONSchema.BooleanSchema\n  | JSONSchema.IntegerSchema\n  | JSONSchema.NullSchema\n  | JSONSchema.NumberSchema\n  | JSONSchema.ObjectSchema\n  | JSONSchema.StringSchema;\n\nfunction typedIncludes<T extends U, U>(coll: ReadonlyArray<T>, el: U): el is T {\n  return coll.includes(el as T);\n}\n\nexport function findComposedKey(schema: NonArraySchemaObject) {\n  if (schema.oneOf) return \"oneOf\";\n  if (schema.anyOf) return \"anyOf\";\n  return \"allOf\";\n}\n\nexport function isArraySchema(schema: JSONSchema.BaseSchema): schema is JSONSchema.ArraySchema {\n  return schema.type === \"array\";\n}\n\nexport function isSimpleSchema(schema: JSONSchema.BaseSchema): schema is NonArraySchemaObject {\n  return typedIncludes(simplePropertyTypes, schema.type);\n}\n\nexport function isObjectSchema(schema: JSONSchema.BaseSchema): schema is JSONSchema.ObjectSchema {\n  if (Array.isArray(schema.type)) return false;\n  if (schema.type && schema.type === \"object\") return true;\n  return !!schema.properties;\n}\n\nexport function isComposedSchema(schema: JSONSchema.BaseSchema): schema is NonArraySchemaObject {\n  return Boolean(schema.allOf || schema.oneOf || schema.anyOf);\n}\n\nexport const simplePropertyTypes = [\"integer\", \"number\", \"string\", \"boolean\", \"null\"] as const;\nexport type SimplePropertyTypes = (typeof simplePropertyTypes)[number];\n\nconst propertyTypes = [...simplePropertyTypes, \"array\", \"object\"] as const;\n\nconst composedPropertyTypes = [\"allOf\", \"anyOf\", \"oneOf\"] as const;\ntype ComposedPropertyTypes = (typeof composedPropertyTypes)[number];\n\nconst allPropertyTypes = [...propertyTypes, ...composedPropertyTypes] as const;\nexport type AllPropertyTypes = (typeof allPropertyTypes)[number];\n\nexport type ReadableTypeNames = AllPropertyTypes | \"mixed\" | \"not\" | \"any\";\n\nexport function moveUpLevel(path: string) {\n  const match = path.match(/^(.*)(\\.[\\w\\d_%&-]+|\\[\\d+\\])$/);\n  return match ? match[1] : \"\";\n}\n\nexport function splitObjectPath(path: string) {\n  return path.split(/(\\.|)/);\n}\n\nexport function removePathFromSchema(schema: JSONSchema.BaseSchema, path: string) {\n  const cp = structuredClone(schema);\n  const parentPath = moveUpLevel(path);\n  const parentProperty = getByPath(cp, parentPath) as JSONSchema.BaseSchema;\n  if (Array.isArray(parentProperty)) {\n    const match = path.match(/.*\\[(\\d+)\\]$/);\n    if (match == null || !match[1]) throw new Error(\"Could not find index to splice\");\n    parentProperty.splice(Number(match[1]), 1);\n    setByPath(cp, parentPath, parentProperty);\n  } else {\n    unsetByPath(cp, path);\n  }\n  return cp;\n}\n\nexport function getPathProperty(\n  schema: JSONSchema.BaseSchema,\n  path: string,\n): JSONSchema.BaseSchema {\n  if (path === \"\") return schema;\n  const currentProperty = getByPath(schema, path) as JSONSchema.BaseSchema;\n  if (!currentProperty) throw new Error(\"No current property\");\n  return currentProperty;\n}\n\nfunction getLastPathSegment(path: string) {\n  const split = path.split(\".\");\n  return split[split.length - 1] || \"\";\n}\n\nexport function findNearestObject(\n  schema: JSONSchema.BaseSchema,\n  path: string,\n): NonArraySchemaObject | undefined {\n  let currentPath = path;\n  while (currentPath) {\n    currentPath = moveUpLevel(currentPath);\n    const currentProperty = getPathProperty(schema, currentPath);\n    if (\"properties\" in currentProperty && currentProperty.type === \"object\") {\n      return currentProperty as NonArraySchemaObject;\n    }\n  }\n}\n\nfunction doesPathEndOnPropertyName(path: string) {\n  return /properties\\.[^.]+$/.test(path);\n}\n\nexport function removeRequiredForProperty(schema: JSONSchema.BaseSchema, path: string) {\n  const cp = structuredClone(schema);\n  if (doesPathEndOnPropertyName(path) === false) return cp;\n  const nearestObject = findNearestObject(cp, path);\n  if (!nearestObject) return cp;\n  if (!Array.isArray(nearestObject.required)) return cp;\n  const propertyName = getLastPathSegment(path);\n  nearestObject.required = nearestObject.required.filter((e) => e !== propertyName);\n  return cp;\n}\n\nexport function addRequiredToProperty(rootSchema: JSONSchema.BaseSchema, path: string) {\n  const cp = structuredClone(rootSchema);\n  if (doesPathEndOnPropertyName(path) === false)\n    throw new Error(\"Can only toggle required for object\");\n  const nearestObject = findNearestObject(cp, path);\n  if (!nearestObject) throw new Error(\"Unable to find wrapping object\");\n  const requiredArr = nearestObject.required || [];\n  const propertyName = getLastPathSegment(path);\n  if (propertyName) {\n    if (requiredArr.some((e) => e === propertyName)) {\n      throw new Error(\"Property is already required\");\n    } else {\n      requiredArr.push(propertyName);\n    }\n    nearestObject.required = requiredArr;\n  }\n  return cp;\n}\n\nexport function insertAtPath<T extends object = JSONSchema.BaseSchema>(\n  schema: T,\n  path: string,\n  newSchema: JSONSchema.BaseSchema,\n): T {\n  if (path === \"\") return structuredClone(newSchema) as T;\n  const cp = structuredClone(schema);\n  setByPath(cp, path, newSchema);\n  return cp;\n}\n\nexport function changeStringPropertyMetaData({\n  rootSchema,\n  schema,\n  path,\n  propertyMetaData,\n}: {\n  rootSchema: JSONSchema.BaseSchema;\n  schema: JSONSchema.BaseSchema;\n  path: string;\n  propertyMetaData: {\n    description: string | undefined;\n    default: string | undefined;\n    enum: string[] | undefined;\n    examples: string[] | undefined;\n  };\n}) {\n  const cp = structuredClone(schema);\n  cp.description = propertyMetaData.description;\n  cp.examples = propertyMetaData.examples;\n  cp.default = propertyMetaData.default;\n  if (\n    propertyMetaData.default != null &&\n    !propertyMetaData.enum?.includes(propertyMetaData.default)\n  ) {\n    throw new Error(\"Default must be included in enum values\");\n  }\n  cp.enum = propertyMetaData.enum;\n  return insertAtPath(rootSchema, path, JSON.parse(JSON.stringify(cp)));\n}\n\nexport function changeNumberPropertyMetaData({\n  rootSchema,\n  schema,\n  path,\n  propertyMetaData,\n}: {\n  rootSchema: JSONSchema.BaseSchema;\n  schema: JSONSchema.BaseSchema;\n  path: string;\n  propertyMetaData: {\n    description: string | undefined;\n    format: \"float\" | \"double\" | undefined;\n    minimum: number | undefined;\n    maximum: number | undefined;\n    examples: number[] | undefined;\n  };\n}) {\n  const cp = structuredClone(schema);\n  cp.description = propertyMetaData.description;\n  cp.minimum = propertyMetaData.minimum;\n  cp.maximum = propertyMetaData.maximum;\n  cp.format = propertyMetaData.format;\n  cp.examples = propertyMetaData.examples;\n  return insertAtPath(rootSchema, path, JSON.parse(JSON.stringify(cp)));\n}\n\nexport function changeGenericMetaData({\n  rootSchema,\n  schema,\n  path,\n  propertyMetaData,\n}: {\n  rootSchema: JSONSchema.BaseSchema;\n  schema: JSONSchema.BaseSchema;\n  path: string;\n  propertyMetaData: { description: string | undefined };\n}) {\n  if (isComposedSchema(schema)) throw new Error(\"Metadata cannot be changed on composed types\");\n  const cp = structuredClone(schema);\n  if (propertyMetaData.description !== undefined) {\n    cp.description = propertyMetaData.description;\n  }\n  return insertAtPath(rootSchema, path, JSON.parse(JSON.stringify(cp)));\n}\n\nexport function changeBooleanMetaData({\n  rootSchema,\n  schema,\n  path,\n  propertyMetaData,\n}: {\n  rootSchema: JSONSchema.BaseSchema;\n  schema: JSONSchema.BaseSchema;\n  path: string;\n  propertyMetaData: {\n    description: string | undefined;\n    examples: boolean[] | undefined;\n  };\n}) {\n  if (isComposedSchema(schema)) throw new Error(\"Metadata cannot be changed on composed types\");\n  const cp = structuredClone(schema);\n  if (propertyMetaData.description !== undefined) {\n    cp.description = propertyMetaData.description;\n    cp.examples = propertyMetaData.examples;\n  }\n  return insertAtPath(rootSchema, path, JSON.parse(JSON.stringify(cp)));\n}\n\nexport function changeIntegerPropertyMetaData({\n  rootSchema,\n  schema,\n  path,\n  propertyMetaData,\n}: {\n  rootSchema: JSONSchema.BaseSchema;\n  schema: JSONSchema.BaseSchema;\n  path: string;\n  propertyMetaData: {\n    description: string | undefined;\n    format: \"int32\" | \"int64\" | undefined;\n    minimum: number | undefined;\n    maximum: number | undefined;\n    examples: number[] | undefined;\n  };\n}) {\n  const cp = structuredClone(schema);\n  cp.description = propertyMetaData.description;\n  cp.minimum = propertyMetaData.minimum;\n  cp.maximum = propertyMetaData.maximum;\n  cp.format = propertyMetaData.format;\n  cp.examples = propertyMetaData.examples;\n  return insertAtPath(rootSchema, path, JSON.parse(JSON.stringify(cp)));\n}\n\nexport function getPristineType(\n  type: JSONSchema.BaseSchema[\"type\"] | ComposedPropertyTypes,\n): JSONSchema.BaseSchema {\n  switch (type) {\n    case \"boolean\":\n    case \"integer\":\n    case \"number\":\n    case \"string\":\n      return { type };\n    case \"array\":\n      return { type: \"array\", items: { type: \"string\" } };\n    case \"object\":\n      return { type: \"object\" };\n    case \"null\":\n      return { type: \"null\" };\n    case \"oneOf\":\n      return { oneOf: [{ type: \"object\", properties: {} }] };\n    case \"anyOf\":\n      return { anyOf: [{ type: \"object\", properties: {} }] };\n    case \"allOf\":\n      return { allOf: [{ type: \"object\", properties: {} }] };\n    default:\n      throw new Error(\"Trying to change to unknown type\");\n  }\n}\n\nexport function changeType(schema: JSONSchema.BaseSchema, path: string, newType: AllPropertyTypes) {\n  const placeholderSchema = getPristineType(newType) || getPristineType(\"object\");\n  if (path === \"\") return placeholderSchema;\n  return insertAtPath(schema, path, placeholderSchema);\n}\n\nfunction isDirectAncestorOfComposedProperty(rootSchema: JSONSchema.BaseSchema, path: string) {\n  const parentPath = moveUpLevel(path);\n  const parentProperty = getByPath(rootSchema, parentPath) as JSONSchema.BaseSchema;\n  return Array.isArray(parentProperty);\n}\n\ntype BaseTypeOptions = {\n  propertyTypes: readonly AllPropertyTypes[];\n};\n\nexport type TypeOptions = ReturnType<typeof getTypeOptions>;\n/**\n * Rules for available types.\n *\n * TOP LEVEL REFERENCES\n * dtos + schemas: Schemas and DTOs cannot have top-level references\n *\n * DIRECT ANCESTOR OF COMPOSED TYPE\n * schemaTypes: cannot be composes types as well: allof.allof is forbidden\n */\nexport function getTypeOptions({\n  schema,\n  rootSchema,\n  path,\n}: {\n  rootSchema: JSONSchema.BaseSchema;\n  schema: JSONSchema.BaseSchema;\n  path: string;\n}): BaseTypeOptions & { innerArrayTypeOptions: BaseTypeOptions | undefined } {\n  let propertyTypes: Array<AllPropertyTypes> = [...allPropertyTypes];\n\n  // flags for modification\n  const isComposed = isDirectAncestorOfComposedProperty(rootSchema, path);\n  const isArraySchema = schema.type === \"array\";\n\n  // filter\n  if (isComposed) {\n    propertyTypes = [...propertyTypes];\n  }\n\n  const innerArrayTypeOptions = isArraySchema\n    ? {\n        propertyTypes: [...allPropertyTypes],\n      }\n    : undefined;\n  return {\n    propertyTypes,\n    innerArrayTypeOptions,\n  };\n}\n\nexport function isNonArraySchemaObject(\n  schema: JSONSchema.BaseSchema,\n): schema is NonArraySchemaObject {\n  if (schema.type === \"array\" || Array.isArray(schema.type)) return false;\n  return true;\n}\n\nexport function addPlaceholderToPath(\n  rootSchema: JSONSchema.BaseSchema,\n  path: string,\n): [schema: JSONSchema.BaseSchema, placeholderId: string | undefined] {\n  const property = getPathProperty(rootSchema, path);\n  const cp = structuredClone(property);\n\n  if (Array.isArray(cp)) throw new Error(\"Can't add placeholder to array\");\n  if (\"$ref\" in cp) throw new Error(\"Can't add placeholder to ref schema\");\n\n  if ((cp.oneOf || cp.allOf || cp.anyOf) && isNonArraySchemaObject(cp)) {\n    const composedKey = findComposedKey(cp);\n    cp[composedKey]?.push({ type: \"object\", properties: {} });\n    const newSchema = insertAtPath(rootSchema, path, cp);\n    return [newSchema, undefined];\n  }\n  if (\"type\" in cp && cp.type === \"object\") {\n    const placeholderId = generatePlaceholderId();\n    if (!cp.properties) cp.properties = {};\n    const newSchema = insertAtPath(\n      rootSchema,\n      `${path}${path === \"\" ? \"properties\" : \".properties\"}`,\n      { ...cp.properties, [placeholderId]: { type: \"string\" } },\n    );\n    return [newSchema, placeholderId];\n  }\n  throw new Error(\"Can't add placeholder to invalid type\");\n}\n\nexport function changePropertyName(\n  schema: JSONSchema.BaseSchema,\n  path: string,\n  newPropertyName: string,\n) {\n  if (doesPathEndOnPropertyName(path) === false) throw new Error(\"Path must end on property name\");\n\n  let cp = structuredClone(schema);\n  const oldPropertyName = getLastPathSegment(path);\n  const parentPath = moveUpLevel(path);\n  const nearestObject = findNearestObject(cp, path);\n  const newPath = `${parentPath}.${newPropertyName}`;\n  const property = getPathProperty(cp, path);\n  const isRequired = (nearestObject?.required || []).some((e) => e === oldPropertyName);\n\n  if (isRequired) cp = removeRequiredForProperty(cp, path);\n  unsetByPath(cp, path);\n  setWithObjects(cp, newPath, property);\n  if (isRequired) cp = addRequiredToProperty(cp, newPath);\n\n  return cp;\n}\n\nexport function wrapSchemaInArray(schema: NonArraySchemaObject): JSONSchema.BaseSchema {\n  return { type: \"array\", items: schema };\n}\n\nexport function unwrapSchemaFromArray(schema: JSONSchema.ArraySchema) {\n  return schema.items;\n}\n\nexport function wrapPathSchemaInArray(schema: JSONSchema.BaseSchema, path: string) {\n  const cp = structuredClone(schema);\n  const property = getPathProperty(cp, path);\n  if (isArraySchema(property)) {\n    throw new Error(\"Unable to wrap schema in array\");\n  }\n  const newProperty = wrapSchemaInArray(property as NonArraySchemaObject);\n  return insertAtPath(cp, path, newProperty);\n}\n\nexport function unwrapPathSchemaFromArray(schema: JSONSchema.BaseSchema, path: string) {\n  const cp = structuredClone(schema);\n  const property = getPathProperty(cp, path);\n  if (!isArraySchema(property)) {\n    throw new Error(\"Unable to unwrap schema. Schema is not of type array\");\n  }\n  const newProperty = unwrapSchemaFromArray(property);\n  return insertAtPath(cp, path, newProperty as JSONSchema.BaseSchema);\n}\n\nexport const addPlaceholderToSchema = ({\n  schema,\n  path,\n}: {\n  schema: JSONSchema.BaseSchema;\n  path: string;\n}) => {\n  let newSchema = structuredClone(schema);\n  const property = getPathProperty(schema, path);\n  if (!isNonArraySchemaObject(property)) throw new Error(\"Schema is not of type NonArray\");\n  const existingKeys = Object.keys(property.properties || {});\n\n  if (existingKeys.some((k) => k.startsWith(\"%%%\"))) {\n    throw new Error(\"There is an existing placeholder\");\n  }\n\n  const placeholderValues = addPlaceholderToPath(newSchema, path);\n  newSchema = placeholderValues[0];\n  return { schema: newSchema, placeholderId: placeholderValues[1] };\n};\n"],"mappings":"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"}

package/dist/components/internal/suggestion-menu/suggestion-menu-utils.mjs

@@ -0,0 +1,12 @@
+//#region src/components/internal/suggestion-menu/suggestion-menu-utils.ts
+function calculateStartPosition(cursorPosition, previousNode, triggerChar) {
+	if (!previousNode?.text || !triggerChar) return cursorPosition;
+	const commandText = previousNode.text;
+	const triggerCharIndex = commandText.lastIndexOf(triggerChar);
+	if (triggerCharIndex === -1) return cursorPosition;
+	return cursorPosition - commandText.substring(triggerCharIndex).length;
+}
+
+//#endregion
+export { calculateStartPosition };
+//# sourceMappingURL=suggestion-menu-utils.mjs.map

package/dist/components/internal/suggestion-menu/suggestion-menu-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-menu-utils.mjs","names":[],"sources":["../../../../src/components/internal/suggestion-menu/suggestion-menu-utils.ts"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport type { SuggestionItem } from \"./suggestion-menu-types.js\";\n\nexport function calculateStartPosition(\n  cursorPosition: number,\n  previousNode: Node | null,\n  triggerChar?: string,\n): number {\n  if (!previousNode?.text || !triggerChar) {\n    return cursorPosition;\n  }\n\n  const commandText = previousNode.text;\n  const triggerCharIndex = commandText.lastIndexOf(triggerChar);\n\n  if (triggerCharIndex === -1) {\n    return cursorPosition;\n  }\n\n  const textLength = commandText.substring(triggerCharIndex).length;\n  return cursorPosition - textLength;\n}\n\nexport function filterSuggestionItems(items: SuggestionItem[], query: string) {\n  const normalizedQuery = query.trim().toLowerCase();\n\n  if (!normalizedQuery) {\n    return items;\n  }\n\n  return items\n    .filter((item) => {\n      if (item.title.toLowerCase().includes(normalizedQuery)) return true;\n      if (item.subtext?.toLowerCase().includes(normalizedQuery)) return true;\n      if (item.keywords?.some((kw) => kw.toLowerCase().includes(normalizedQuery))) return true;\n      return false;\n    })\n    .sort((a, b) => {\n      const aTitle = a.title.toLowerCase();\n      const bTitle = b.title.toLowerCase();\n\n      if (aTitle === normalizedQuery && bTitle !== normalizedQuery) return -1;\n      if (bTitle === normalizedQuery && aTitle !== normalizedQuery) return 1;\n      if (aTitle.startsWith(normalizedQuery) && !bTitle.startsWith(normalizedQuery)) return -1;\n      if (bTitle.startsWith(normalizedQuery) && !aTitle.startsWith(normalizedQuery)) return 1;\n      return 0;\n    });\n}\n"],"mappings":";AAGA,SAAgB,uBACd,gBACA,cACA,aACQ;AACR,KAAI,CAAC,cAAc,QAAQ,CAAC,YAC1B,QAAO;CAGT,MAAM,cAAc,aAAa;CACjC,MAAM,mBAAmB,YAAY,YAAY,YAAY;AAE7D,KAAI,qBAAqB,GACvB,QAAO;AAIT,QAAO,iBADY,YAAY,UAAU,iBAAiB,CAAC"}

package/dist/components/internal/suggestion-menu/suggestion-menu.mjs

@@ -0,0 +1,151 @@
+import { useFloatingElement } from "../../../hooks/use-floating-element.mjs";
+import { useMenuNavigation } from "../../../hooks/use-menu-navigation.mjs";
+import { calculateStartPosition } from "./suggestion-menu-utils.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { flip, offset, shift, size } from "@floating-ui/react";
+import { PluginKey } from "@tiptap/pm/state";
+import { Suggestion, SuggestionPluginKey } from "@tiptap/suggestion";
+
+//#region src/components/internal/suggestion-menu/suggestion-menu.tsx
+const SuggestionMenu = ({ editor: providedEditor, floatingOptions, selector = "tiptap-suggestion-menu", children, maxHeight = 384, pluginKey = SuggestionPluginKey, ...internalSuggestionProps }) => {
+	const editor = providedEditor ?? null;
+	const [show, setShow] = useState(false);
+	const [internalClientRect, setInternalClientRect] = useState(null);
+	const [internalCommand, setInternalCommand] = useState(null);
+	const [internalItems, setInternalItems] = useState([]);
+	const [internalQuery, setInternalQuery] = useState("");
+	const [, setInternalRange] = useState(null);
+	const { ref, style, getFloatingProps, isMounted } = useFloatingElement(show, internalClientRect, 1e3, {
+		placement: "bottom-start",
+		middleware: [
+			offset(10),
+			flip({
+				mainAxis: true,
+				crossAxis: false
+			}),
+			shift(),
+			size({ apply({ availableHeight, elements }) {
+				if (elements.floating) {
+					const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
+					elements.floating.style.setProperty("--suggestion-menu-max-height", `${maxHeightValue}px`);
+				}
+			} })
+		],
+		onOpenChange(open) {
+			if (!open) setShow(false);
+		},
+		...floatingOptions
+	});
+	const internalSuggestionPropsRef = useRef(internalSuggestionProps);
+	useEffect(() => {
+		internalSuggestionPropsRef.current = internalSuggestionProps;
+	}, [internalSuggestionProps]);
+	const closePopup = useCallback(() => {
+		setShow(false);
+	}, []);
+	useEffect(() => {
+		if (!editor || editor.isDestroyed) return;
+		if (editor.state.plugins.find((plugin) => plugin.spec.key === pluginKey)) editor.unregisterPlugin(pluginKey);
+		const suggestion = Suggestion({
+			pluginKey: pluginKey instanceof PluginKey ? pluginKey : new PluginKey(pluginKey),
+			editor,
+			command({ editor, range, props }) {
+				if (!range) return;
+				const { view, state } = editor;
+				const { selection } = state;
+				if (!editor.extensionManager.extensions.some((extension) => extension.name === "mention" && extension.options?.suggestion?.char === internalSuggestionPropsRef.current.char)) {
+					const cursorPosition = selection.$from.pos;
+					const previousNode = selection.$head?.nodeBefore;
+					const startPosition = previousNode ? calculateStartPosition(cursorPosition, previousNode, internalSuggestionPropsRef.current.char) : selection.$from.start();
+					const transaction = state.tr.deleteRange(startPosition, cursorPosition);
+					view.dispatch(transaction);
+				}
+				const overrideSpace = view.state.selection.$to.nodeAfter?.text?.startsWith(" ");
+				const rangeToUse = { ...range };
+				if (overrideSpace) rangeToUse.to += 1;
+				props.onSelect({
+					editor,
+					range: rangeToUse,
+					context: props.context
+				});
+			},
+			render: () => ({
+				onStart: (props) => {
+					setInternalCommand(() => props.command);
+					setInternalItems(props.items);
+					setInternalQuery(props.query);
+					setInternalRange(props.range);
+					setInternalClientRect(props.clientRect?.() ?? null);
+					setShow(true);
+				},
+				onUpdate: (props) => {
+					setInternalCommand(() => props.command);
+					setInternalItems(props.items);
+					setInternalQuery(props.query);
+					setInternalRange(props.range);
+					setInternalClientRect(props.clientRect?.() ?? null);
+				},
+				onKeyDown: (props) => {
+					if (props.event.key === "Escape") {
+						closePopup();
+						return true;
+					}
+					return false;
+				},
+				onExit: () => {
+					setInternalCommand(null);
+					setInternalItems([]);
+					setInternalQuery("");
+					setInternalRange(null);
+					setInternalClientRect(null);
+					setShow(false);
+				}
+			}),
+			...internalSuggestionPropsRef.current,
+			items: ((args) => {
+				const fn = internalSuggestionPropsRef.current.items;
+				return fn ? fn(args) : [];
+			})
+		});
+		editor.registerPlugin(suggestion);
+		return () => {
+			if (!editor.isDestroyed) editor.unregisterPlugin(pluginKey);
+		};
+	}, [
+		editor,
+		pluginKey,
+		closePopup
+	]);
+	const onSelect = useCallback((item) => {
+		closePopup();
+		if (internalCommand) internalCommand(item);
+	}, [closePopup, internalCommand]);
+	const { selectedIndex } = useMenuNavigation({
+		editor,
+		query: internalQuery,
+		items: internalItems,
+		onSelect
+	});
+	if (!isMounted || !show || !editor) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style,
+		...getFloatingProps(),
+		"data-selector": selector,
+		className: "pz:z-50 pz:overflow-hidden pz:rounded-md pz:border pz:border-input pz:bg-popover pz:text-popover-foreground pz:shadow-md",
+		role: "listbox",
+		"aria-label": "Suggestions",
+		onPointerDown: (e) => e.preventDefault(),
+		children: children({
+			items: internalItems,
+			selectedIndex,
+			onSelect,
+			query: internalQuery
+		})
+	});
+};
+
+//#endregion
+export { SuggestionMenu };
+//# sourceMappingURL=suggestion-menu.mjs.map

package/dist/components/internal/suggestion-menu/suggestion-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-menu.mjs","names":[],"sources":["../../../../src/components/internal/suggestion-menu/suggestion-menu.tsx"],"sourcesContent":["import { flip, offset, shift, size } from \"@floating-ui/react\";\nimport { PluginKey } from \"@tiptap/pm/state\";\nimport type { Range } from \"@tiptap/react\";\nimport {\n  Suggestion,\n  type SuggestionKeyDownProps,\n  SuggestionPluginKey,\n  type SuggestionProps,\n} from \"@tiptap/suggestion\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useFloatingElement } from \"../../../hooks/use-floating-element.js\";\nimport { useMenuNavigation } from \"../../../hooks/use-menu-navigation.js\";\nimport type { SuggestionItem, SuggestionMenuProps } from \"./suggestion-menu-types.js\";\nimport { calculateStartPosition } from \"./suggestion-menu-utils.js\";\n\nexport const SuggestionMenu = ({\n  editor: providedEditor,\n  floatingOptions,\n  selector = \"tiptap-suggestion-menu\",\n  children,\n  maxHeight = 384,\n  pluginKey = SuggestionPluginKey,\n  ...internalSuggestionProps\n}: SuggestionMenuProps) => {\n  const editor = providedEditor ?? null;\n\n  const [show, setShow] = useState<boolean>(false);\n  const [internalClientRect, setInternalClientRect] = useState<DOMRect | null>(null);\n  const [internalCommand, setInternalCommand] = useState<((item: SuggestionItem) => void) | null>(\n    null,\n  );\n  const [internalItems, setInternalItems] = useState<SuggestionItem[]>([]);\n  const [internalQuery, setInternalQuery] = useState<string>(\"\");\n  const [, setInternalRange] = useState<Range | null>(null);\n\n  const { ref, style, getFloatingProps, isMounted } = useFloatingElement(\n    show,\n    internalClientRect,\n    1000,\n    {\n      placement: \"bottom-start\",\n      middleware: [\n        offset(10),\n        flip({ mainAxis: true, crossAxis: false }),\n        shift(),\n        size({\n          apply({ availableHeight, elements }) {\n            if (elements.floating) {\n              const maxHeightValue = maxHeight\n                ? Math.min(maxHeight, availableHeight)\n                : availableHeight;\n              elements.floating.style.setProperty(\n                \"--suggestion-menu-max-height\",\n                `${maxHeightValue}px`,\n              );\n            }\n          },\n        }),\n      ],\n      onOpenChange(open) {\n        if (!open) setShow(false);\n      },\n      ...floatingOptions,\n    },\n  );\n\n  const internalSuggestionPropsRef = useRef(internalSuggestionProps);\n\n  useEffect(() => {\n    internalSuggestionPropsRef.current = internalSuggestionProps;\n  }, [internalSuggestionProps]);\n\n  const closePopup = useCallback(() => {\n    setShow(false);\n  }, []);\n\n  useEffect(() => {\n    if (!editor || editor.isDestroyed) return;\n\n    const existingPlugin = editor.state.plugins.find((plugin) => plugin.spec.key === pluginKey);\n    if (existingPlugin) {\n      editor.unregisterPlugin(pluginKey);\n    }\n\n    type ItemsFn = NonNullable<typeof internalSuggestionPropsRef.current.items>;\n    type ItemsArgs = Parameters<ItemsFn>[0];\n    type ItemsReturn = ReturnType<ItemsFn>;\n\n    const suggestion = Suggestion({\n      pluginKey: pluginKey instanceof PluginKey ? pluginKey : new PluginKey(pluginKey),\n      editor,\n\n      command({ editor, range, props }) {\n        if (!range) return;\n\n        const { view, state } = editor;\n        const { selection } = state;\n\n        const isMention = editor.extensionManager.extensions.some(\n          (extension) =>\n            extension.name === \"mention\" &&\n            extension.options?.suggestion?.char === internalSuggestionPropsRef.current.char,\n        );\n\n        if (!isMention) {\n          const cursorPosition = selection.$from.pos;\n          const previousNode = selection.$head?.nodeBefore;\n\n          const startPosition = previousNode\n            ? calculateStartPosition(\n                cursorPosition,\n                previousNode,\n                internalSuggestionPropsRef.current.char,\n              )\n            : selection.$from.start();\n\n          const transaction = state.tr.deleteRange(startPosition, cursorPosition);\n          view.dispatch(transaction);\n        }\n\n        const nodeAfter = view.state.selection.$to.nodeAfter;\n        const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n        const rangeToUse = { ...range };\n        if (overrideSpace) rangeToUse.to += 1;\n\n        props.onSelect({ editor, range: rangeToUse, context: props.context });\n      },\n\n      render: () => ({\n        onStart: (props: SuggestionProps<SuggestionItem>) => {\n          setInternalCommand(() => props.command);\n          setInternalItems(props.items);\n          setInternalQuery(props.query);\n          setInternalRange(props.range);\n          setInternalClientRect(props.clientRect?.() ?? null);\n          setShow(true);\n        },\n        onUpdate: (props: SuggestionProps<SuggestionItem>) => {\n          setInternalCommand(() => props.command);\n          setInternalItems(props.items);\n          setInternalQuery(props.query);\n          setInternalRange(props.range);\n          setInternalClientRect(props.clientRect?.() ?? null);\n        },\n        onKeyDown: (props: SuggestionKeyDownProps) => {\n          if (props.event.key === \"Escape\") {\n            closePopup();\n            return true;\n          }\n          return false;\n        },\n        onExit: () => {\n          setInternalCommand(null);\n          setInternalItems([]);\n          setInternalQuery(\"\");\n          setInternalRange(null);\n          setInternalClientRect(null);\n          setShow(false);\n        },\n      }),\n      ...internalSuggestionPropsRef.current,\n      // Override `items` to always read from the live ref. The Suggestion\n      // plugin captures its options once at registration, but parents update\n      // `items` asynchronously (e.g. when `getSecrets` resolves). Without\n      // this delegation, items computed after registration never reach the\n      // menu and the user sees an empty list.\n      items: ((args: ItemsArgs): ItemsReturn => {\n        const fn = internalSuggestionPropsRef.current.items;\n        return (fn ? fn(args) : ([] as unknown as ItemsReturn)) as ItemsReturn;\n      }) as ItemsFn,\n    });\n\n    editor.registerPlugin(suggestion);\n\n    return () => {\n      if (!editor.isDestroyed) {\n        editor.unregisterPlugin(pluginKey);\n      }\n    };\n  }, [editor, pluginKey, closePopup]);\n\n  const onSelect = useCallback(\n    (item: SuggestionItem) => {\n      closePopup();\n      if (internalCommand) internalCommand(item);\n    },\n    [closePopup, internalCommand],\n  );\n\n  const { selectedIndex } = useMenuNavigation({\n    editor,\n    query: internalQuery,\n    items: internalItems,\n    onSelect,\n  });\n\n  if (!isMounted || !show || !editor) return null;\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      {...getFloatingProps()}\n      data-selector={selector}\n      className=\"pz:z-50 pz:overflow-hidden pz:rounded-md pz:border pz:border-input pz:bg-popover pz:text-popover-foreground pz:shadow-md\"\n      role=\"listbox\"\n      aria-label=\"Suggestions\"\n      onPointerDown={(e) => e.preventDefault()}\n    >\n      {children({ items: internalItems, selectedIndex, onSelect, query: internalQuery })}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/internal/tag-chip-decoration.mjs

@@ -0,0 +1,180 @@
+import { Extension } from "@tiptap/react";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+//#region src/components/internal/tag-chip-decoration.ts
+const SECRET_REGEX = /\{\{\s*SECRETS\.([A-Z][A-Z0-9_]*)\s*\}\}/g;
+const FIELD_REGEX = /\{\{\s*([a-zA-Z_][a-zA-Z0-9_.]*(?:\s*\|\s*[^}]+)?)\s*\}\}/g;
+const BLOCK_REGEX = /\{%[\s\S]*?%\}/g;
+const FIELD_CLASS = "pz-tag-chip-field pz:inline-flex pz:items-center pz:rounded-sm pz:bg-sky-100 pz:px-1 pz:text-sky-900 pz:cursor-pointer pz:focus-visible:outline-none pz:focus-visible:ring-2 pz:focus-visible:ring-ring";
+const SECRET_CLASS = "pz-tag-chip-secret pz:inline-flex pz:items-center pz:rounded-sm pz:bg-amber-100 pz:px-1 pz:text-amber-900 pz:cursor-pointer pz:focus-visible:outline-none pz:focus-visible:ring-2 pz:focus-visible:ring-ring";
+const BLOCK_CLASS = "pz-tag-chip-block pz:inline-flex pz:items-center pz:rounded-sm pz:bg-violet-100 pz:px-1 pz:text-violet-900 pz:cursor-pointer pz:focus-visible:outline-none pz:focus-visible:ring-2 pz:focus-visible:ring-ring";
+/**
+* Builds the DecorationSet for a given ProseMirror document. Walks every
+* text node, then in order:
+*   1. `{% … %}` Liquid block tags (e.g. `{% output %}`, `{% if %}`).
+*   2. `{{ SECRETS.<ID> }}` secret references.
+*   3. `{{ … }}` Liquid Outputs (fields, with optional dotted access and
+*      filter chains) over positions not already claimed by a secret match.
+* Each match becomes an inline Decoration that styles the substring as a
+* chip without touching the underlying text — copy/paste, cursor
+* navigation, and `editor.getText` keep their flat-text behavior.
+*/
+function buildDecorations(doc) {
+	const decorations = [];
+	doc.descendants((node, pos) => {
+		if (!node.isText || node.text == null) return;
+		const text = node.text;
+		const claimed = [];
+		BLOCK_REGEX.lastIndex = 0;
+		for (const m of text.matchAll(BLOCK_REGEX)) {
+			const start = pos + (m.index ?? 0);
+			const end = start + m[0].length;
+			claimed.push([start, end]);
+			decorations.push(Decoration.inline(start, end, {
+				class: BLOCK_CLASS,
+				"data-tag-chip": "block",
+				"data-tag-chip-text": m[0],
+				role: "button",
+				tabindex: "0"
+			}));
+		}
+		SECRET_REGEX.lastIndex = 0;
+		for (const m of text.matchAll(SECRET_REGEX)) {
+			const start = pos + (m.index ?? 0);
+			const end = start + m[0].length;
+			claimed.push([start, end]);
+			decorations.push(Decoration.inline(start, end, {
+				class: SECRET_CLASS,
+				"data-tag-chip": "secret",
+				"data-tag-chip-text": m[0],
+				role: "button",
+				tabindex: "0"
+			}));
+		}
+		FIELD_REGEX.lastIndex = 0;
+		for (const m of text.matchAll(FIELD_REGEX)) {
+			const start = pos + (m.index ?? 0);
+			const end = start + m[0].length;
+			if (claimed.some(([s, e]) => start < e && end > s)) continue;
+			decorations.push(Decoration.inline(start, end, {
+				class: FIELD_CLASS,
+				"data-tag-chip": "field",
+				"data-tag-chip-text": m[0],
+				role: "button",
+				tabindex: "0"
+			}));
+		}
+	});
+	return DecorationSet.create(doc, decorations);
+}
+const tagChipPluginKey = new PluginKey("tagChipDecoration");
+const tagChipInteractionKey = new PluginKey("tagChipInteraction");
+function chipHitFromTarget(target) {
+	if (!(target instanceof Element)) return null;
+	const el = target.closest("[data-tag-chip]");
+	if (!el) return null;
+	const kind = el.getAttribute("data-tag-chip");
+	const raw = el.getAttribute("data-tag-chip-text");
+	if (!kind || raw == null) return null;
+	return {
+		el,
+		hit: {
+			kind,
+			raw,
+			from: -1,
+			to: -1
+		}
+	};
+}
+/**
+* Tiptap extension that renders Liquid syntax as inline pills:
+* `{{ <name> }}` (fields, with optional dotted access and filter chains),
+* `{{ SECRETS.<ID> }}`, and `{% … %}` block tags (e.g. `{% output %}`).
+* Purely visual — the underlying text is unchanged so the persisted value
+* is identical to what the user typed.
+*
+* Configure with `onChipClick` / `onChipHover` to wire interactive
+* popovers and tooltips in the host editor without converting the
+* decorations to widgets (which would break the flat-text invariant).
+*/
+const TagChipDecoration = Extension.create({
+	name: "tagChipDecoration",
+	addOptions() {
+		return {
+			onChipClick: void 0,
+			onChipHover: void 0
+		};
+	},
+	addProseMirrorPlugins() {
+		const options = this.options;
+		return [new Plugin({
+			key: tagChipPluginKey,
+			state: {
+				init: (_, { doc }) => buildDecorations(doc),
+				apply: (tr, old) => tr.docChanged ? buildDecorations(tr.doc) : old
+			},
+			props: { decorations(state) {
+				return this.getState(state) ?? null;
+			} }
+		}), new Plugin({
+			key: tagChipInteractionKey,
+			props: { handleDOMEvents: {
+				mousedown(view, event) {
+					if (!options.onChipClick) return false;
+					const found = chipHitFromTarget(event.target);
+					if (!found) return false;
+					const pos = view.posAtDOM(found.el, 0);
+					const raw = found.hit.raw;
+					const from = pos;
+					const to = pos + raw.length;
+					event.preventDefault();
+					options.onChipClick({
+						...found.hit,
+						from,
+						to
+					}, found.el);
+					return true;
+				},
+				keydown(view, event) {
+					if (!options.onChipClick) return false;
+					if (event.key !== "Enter" && event.key !== " ") return false;
+					const active = document.activeElement;
+					if (!(active instanceof HTMLElement)) return false;
+					if (!active.matches("[data-tag-chip]")) return false;
+					const kind = active.getAttribute("data-tag-chip");
+					const raw = active.getAttribute("data-tag-chip-text");
+					if (!kind || raw == null) return false;
+					const pos = view.posAtDOM(active, 0);
+					event.preventDefault();
+					options.onChipClick({
+						kind,
+						raw,
+						from: pos,
+						to: pos + raw.length
+					}, active);
+					return true;
+				},
+				mouseover(_view, event) {
+					if (!options.onChipHover) return false;
+					const found = chipHitFromTarget(event.target);
+					if (!found) {
+						options.onChipHover(null, null);
+						return false;
+					}
+					options.onChipHover(found.hit, found.el);
+					return false;
+				},
+				mouseout(_view, event) {
+					if (!options.onChipHover) return false;
+					if (chipHitFromTarget(event.target)) options.onChipHover(null, null);
+					return false;
+				}
+			} }
+		})];
+	}
+});
+
+//#endregion
+export { TagChipDecoration };
+//# sourceMappingURL=tag-chip-decoration.mjs.map