@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Code/ImageReplacerExtension.js

@@ -0,0 +1,227 @@
+import { getMimeTypeFromDataUrl, isValidUrl } from "./utils.js";
+//#region packages/components/src/components/Code/ImageReplacerExtension.ts
+function getImageReplacerExtensions(cm) {
+	const { StateEffect, StateField, Decoration, EditorView, ViewPlugin, WidgetType: WidgetTypeBase, syntaxTree } = cm;
+	class DataUrlWidget extends WidgetTypeBase {
+		src;
+		mimeType;
+		constructor(src, mimeType) {
+			super();
+			this.src = src;
+			this.mimeType = mimeType;
+		}
+		toDOM() {
+			if (this.mimeType.startsWith("image/")) {
+				const img = document.createElement("img");
+				img.src = this.src;
+				img.style.maxWidth = "100%";
+				return img;
+			}
+			if (this.mimeType === "application/pdf") {
+				const iframe = document.createElement("iframe");
+				iframe.src = this.src;
+				iframe.style.width = "100%";
+				iframe.style.maxWidth = "100%";
+				iframe.style.height = "480px";
+				iframe.style.border = "0";
+				return iframe;
+			}
+			if (this.mimeType.startsWith("audio/")) {
+				const audio = document.createElement("audio");
+				audio.controls = true;
+				audio.style.width = "100%";
+				const source = document.createElement("source");
+				source.src = this.src;
+				source.type = this.mimeType;
+				audio.appendChild(source);
+				return audio;
+			}
+			const fallback = document.createElement("span");
+			fallback.textContent = this.src;
+			return fallback;
+		}
+	}
+	class UrlImageWidget extends WidgetTypeBase {
+		params;
+		constructor(params) {
+			super();
+			this.params = params;
+		}
+		positionTooltip(parent, tooltip) {
+			const rect = parent.getBoundingClientRect();
+			const parentRect = parent.offsetParent?.getBoundingClientRect() || {
+				left: 0,
+				right: window.innerWidth
+			};
+			if (rect.left - parentRect.left > parentRect.right - rect.right) {
+				tooltip.style.left = "100%";
+				tooltip.style.transform = "translateX(-100%)";
+				tooltip.style.right = "";
+			} else {
+				tooltip.style.right = "100%";
+				tooltip.style.transform = "translateX(100%)";
+				tooltip.style.left = "";
+			}
+			tooltip.style.bottom = "100%";
+		}
+		createTooltipElement() {
+			const tooltip = document.createElement("div");
+			tooltip.textContent = "Click to render image";
+			tooltip.style.position = "absolute";
+			tooltip.style.backgroundColor = "black";
+			tooltip.style.color = "white";
+			tooltip.style.padding = "5px";
+			tooltip.style.zIndex = "201";
+			tooltip.style.whiteSpace = "nowrap";
+			tooltip.style.visibility = "hidden";
+			tooltip.style.display = "block";
+			tooltip.style.fontFamily = "\"Inter\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+			tooltip.style.borderRadius = "8px";
+			return tooltip;
+		}
+		createIconElement() {
+			const imageIconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+			imageIconElement.setAttribute("width", "24");
+			imageIconElement.setAttribute("height", "24");
+			imageIconElement.setAttribute("viewBox", "0 0 24 24");
+			imageIconElement.setAttribute("fill", "none");
+			const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			pathElement.setAttribute("d", "M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM19 19H5V5H19V19ZM8.5 13.5L11 17L14.5 12.5L18 17H6L8.5 13.5Z");
+			pathElement.setAttribute("fill", "currentColor");
+			imageIconElement.appendChild(pathElement);
+			imageIconElement.style.display = "inline";
+			const tooltip = this.createTooltipElement();
+			const iconContainer = document.createElement("span");
+			iconContainer.appendChild(imageIconElement);
+			iconContainer.appendChild(tooltip);
+			iconContainer.style.cursor = "pointer";
+			iconContainer.style.position = "relative";
+			iconContainer.onmouseover = () => {
+				this.positionTooltip(iconContainer, tooltip);
+				tooltip.style.visibility = "visible";
+			};
+			iconContainer.onmouseout = () => {
+				tooltip.style.visibility = "hidden";
+			};
+			return iconContainer;
+		}
+		createImageElement() {
+			const imgElement = document.createElement("img");
+			imgElement.src = this.params.src;
+			imgElement.style.maxWidth = "100%";
+			imgElement.style.display = this.params.isOpen ? "block" : "none";
+			imgElement.style.cursor = "pointer";
+			imgElement.referrerPolicy = "no-referrer";
+			imgElement.onclick = (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				const imageEl = e.target;
+				if (imageEl.style.display === "none") {
+					imageEl.style.display = "block";
+					this.params.setOpen(true, this.params.position);
+				} else {
+					imageEl.style.display = "none";
+					this.params.setOpen(false, this.params.position);
+				}
+			};
+			return imgElement;
+		}
+		toDOM() {
+			const container = document.createElement("span");
+			container.className = "cm-image-widget";
+			const iconContainer = this.createIconElement();
+			const imgElement = this.createImageElement();
+			iconContainer.onclick = (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				this.toggleImage(container);
+			};
+			container.appendChild(iconContainer);
+			container.appendChild(imgElement);
+			return container;
+		}
+		toggleImage(container) {
+			const imgElement = container.querySelector("img");
+			if (imgElement) {
+				if (imgElement.style.display === "none") {
+					imgElement.style.display = "block";
+					this.params.setOpen(true, this.params.position);
+				} else {
+					imgElement.style.display = "none";
+					this.params.setOpen(false, this.params.position);
+				}
+			}
+		}
+	}
+	const updateDecorationState = StateEffect.define();
+	const decorationStateField = StateField.define({
+		create() {
+			return /* @__PURE__ */ new Map();
+		},
+		update(map, tr) {
+			for (const effect of tr.effects) if (effect.is(updateDecorationState)) map.set(effect.value.id, effect.value.state);
+			return map;
+		}
+	});
+	function images(view) {
+		const widgets = [];
+		const state = view.state.field(decorationStateField);
+		for (const { from, to } of view.visibleRanges) syntaxTree(view.state).iterate({
+			from,
+			to,
+			enter: (node) => {
+				if (node.name === "String" || node.name === "Literal") {
+					const start = node.name === "Literal" ? node.from : node.from + 1;
+					const end = node.name === "Literal" ? node.to : node.to - 1;
+					const text = view.state.doc.sliceString(start, end);
+					const mimeType = getMimeTypeFromDataUrl(text);
+					if (mimeType != null && (mimeType.startsWith("image/") || mimeType === "application/pdf" || mimeType.startsWith("audio/"))) {
+						const deco = Decoration.replace({
+							widget: new DataUrlWidget(text, mimeType),
+							inclusive: true
+						});
+						widgets.push(deco.range(node.from, node.to));
+					} else if (isValidUrl(text)) {
+						const deco = Decoration.widget({
+							widget: new UrlImageWidget({
+								src: text,
+								isOpen: state.get(`${node.to}`),
+								setOpen: (newState, nodePosition) => {
+									view.dispatch({ effects: updateDecorationState.of({
+										id: `${nodePosition}`,
+										state: newState
+									}) });
+								},
+								position: node.to
+							}),
+							inclusive: true
+						});
+						widgets.push(deco.range(node.to));
+					}
+				}
+			}
+		});
+		return Decoration.set(widgets);
+	}
+	return {
+		decorationStateField,
+		imageReplacerPlugin: ViewPlugin.fromClass(class {
+			decorations;
+			constructor(view) {
+				this.decorations = images(view);
+			}
+			update(update) {
+				if (update.docChanged || update.viewportChanged || syntaxTree(update.startState) !== syntaxTree(update.state)) this.decorations = images(update.view);
+			}
+		}, {
+			decorations: (v) => v.decorations,
+			provide: (plugin) => EditorView.atomicRanges.of((view) => {
+				return view.plugin(plugin)?.decorations || Decoration.none;
+			})
+		})
+	};
+}
+//#endregion
+export { getImageReplacerExtensions };
+
+//# sourceMappingURL=ImageReplacerExtension.js.map

package/dist/components/Code/ImageReplacerExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageReplacerExtension.js","names":[],"sources":["../../../src/components/Code/ImageReplacerExtension.ts"],"sourcesContent":["import type { Range } from '@codemirror/state';\nimport type {\n  Decoration,\n  DecorationSet,\n  EditorView,\n  ViewUpdate,\n} from '@codemirror/view';\n\nimport type { CMBundle } from '../../utils/lazy-codemirror-loader';\nimport { getMimeTypeFromDataUrl, isValidUrl } from './utils';\n\nexport function getImageReplacerExtensions(cm: CMBundle) {\n  const {\n    StateEffect,\n    StateField,\n    Decoration,\n    EditorView,\n    ViewPlugin,\n    WidgetType: WidgetTypeBase,\n    syntaxTree,\n  } = cm;\n\n  class DataUrlWidget extends WidgetTypeBase {\n    constructor(\n      private src: string,\n      private mimeType: string\n    ) {\n      super();\n    }\n\n    toDOM() {\n      if (this.mimeType.startsWith('image/')) {\n        const img = document.createElement('img');\n        img.src = this.src;\n        img.style.maxWidth = '100%';\n        return img;\n      }\n\n      if (this.mimeType === 'application/pdf') {\n        const iframe = document.createElement('iframe');\n        iframe.src = this.src;\n        iframe.style.width = '100%';\n        iframe.style.maxWidth = '100%';\n        iframe.style.height = '480px';\n        iframe.style.border = '0';\n        return iframe;\n      }\n\n      if (this.mimeType.startsWith('audio/')) {\n        const audio = document.createElement('audio');\n        audio.controls = true;\n        audio.style.width = '100%';\n\n        const source = document.createElement('source');\n        source.src = this.src;\n        source.type = this.mimeType;\n        audio.appendChild(source);\n        return audio;\n      }\n\n      const fallback = document.createElement('span');\n      fallback.textContent = this.src;\n      return fallback;\n    }\n  }\n\n  class UrlImageWidget extends WidgetTypeBase {\n    constructor(\n      private params: {\n        src: string;\n        isOpen: boolean;\n        setOpen: (newState: boolean, nodePosition: number) => void;\n        position: number;\n      }\n    ) {\n      super();\n    }\n\n    positionTooltip(parent: HTMLElement, tooltip: HTMLElement) {\n      const rect = parent.getBoundingClientRect();\n      const parentRect = parent.offsetParent?.getBoundingClientRect() || {\n        left: 0,\n        right: window.innerWidth,\n      };\n\n      const leftSpace = rect.left - parentRect.left;\n      const rightSpace = parentRect.right - rect.right;\n\n      if (leftSpace > rightSpace) {\n        tooltip.style.left = '100%';\n        tooltip.style.transform = 'translateX(-100%)';\n        tooltip.style.right = '';\n      } else {\n        tooltip.style.right = '100%';\n        tooltip.style.transform = 'translateX(100%)';\n        tooltip.style.left = '';\n      }\n\n      tooltip.style.bottom = '100%';\n    }\n\n    createTooltipElement() {\n      const tooltip = document.createElement('div');\n      tooltip.textContent = 'Click to render image';\n      tooltip.style.position = 'absolute';\n      tooltip.style.backgroundColor = 'black';\n      tooltip.style.color = 'white';\n      tooltip.style.padding = '5px';\n      tooltip.style.zIndex = '201';\n      tooltip.style.whiteSpace = 'nowrap';\n      tooltip.style.visibility = 'hidden';\n      tooltip.style.display = 'block';\n      tooltip.style.fontFamily =\n        '\"Inter\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"';\n      tooltip.style.borderRadius = '8px';\n      return tooltip;\n    }\n\n    createIconElement() {\n      const imageIconElement = document.createElementNS(\n        'http://www.w3.org/2000/svg',\n        'svg'\n      );\n      imageIconElement.setAttribute('width', '24');\n      imageIconElement.setAttribute('height', '24');\n      imageIconElement.setAttribute('viewBox', '0 0 24 24');\n      imageIconElement.setAttribute('fill', 'none');\n\n      const pathElement = document.createElementNS(\n        'http://www.w3.org/2000/svg',\n        'path'\n      );\n      pathElement.setAttribute(\n        'd',\n        'M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM19 19H5V5H19V19ZM8.5 13.5L11 17L14.5 12.5L18 17H6L8.5 13.5Z'\n      );\n      pathElement.setAttribute('fill', 'currentColor');\n      imageIconElement.appendChild(pathElement);\n      imageIconElement.style.display = 'inline';\n\n      const tooltip = this.createTooltipElement();\n\n      const iconContainer = document.createElement('span');\n      iconContainer.appendChild(imageIconElement);\n      iconContainer.appendChild(tooltip);\n      iconContainer.style.cursor = 'pointer';\n      iconContainer.style.position = 'relative';\n\n      iconContainer.onmouseover = () => {\n        this.positionTooltip(iconContainer, tooltip);\n        tooltip.style.visibility = 'visible';\n      };\n      iconContainer.onmouseout = () => {\n        tooltip.style.visibility = 'hidden';\n      };\n      return iconContainer;\n    }\n\n    createImageElement() {\n      const imgElement = document.createElement('img');\n      imgElement.src = this.params.src;\n      imgElement.style.maxWidth = '100%';\n      imgElement.style.display = this.params.isOpen ? 'block' : 'none';\n      imgElement.style.cursor = 'pointer';\n      imgElement.referrerPolicy = 'no-referrer';\n\n      imgElement.onclick = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        const imageEl = e.target as HTMLImageElement;\n        if (imageEl.style.display === 'none') {\n          imageEl.style.display = 'block';\n          this.params.setOpen(true, this.params.position);\n        } else {\n          imageEl.style.display = 'none';\n          this.params.setOpen(false, this.params.position);\n        }\n      };\n      return imgElement;\n    }\n\n    toDOM() {\n      const container = document.createElement('span');\n      container.className = 'cm-image-widget';\n\n      const iconContainer = this.createIconElement();\n      const imgElement = this.createImageElement();\n      iconContainer.onclick = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        this.toggleImage(container);\n      };\n\n      container.appendChild(iconContainer);\n      container.appendChild(imgElement);\n      return container;\n    }\n\n    toggleImage(container: HTMLElement) {\n      const imgElement = container.querySelector('img');\n      if (imgElement) {\n        if (imgElement.style.display === 'none') {\n          imgElement.style.display = 'block';\n          this.params.setOpen(true, this.params.position);\n        } else {\n          imgElement.style.display = 'none';\n          this.params.setOpen(false, this.params.position);\n        }\n      }\n    }\n  }\n\n  const updateDecorationState = StateEffect.define<{\n    id: string;\n    state: boolean;\n  }>();\n\n  const decorationStateField = StateField.define({\n    create() {\n      return new Map();\n    },\n    update(map, tr) {\n      for (const effect of tr.effects) {\n        if (effect.is(updateDecorationState)) {\n          map.set(effect.value.id, effect.value.state);\n        }\n      }\n      return map;\n    },\n  });\n\n  function images(view: EditorView) {\n    const widgets: Range<Decoration>[] = [];\n    const state = view.state.field(decorationStateField);\n    for (const { from, to } of view.visibleRanges) {\n      syntaxTree(view.state).iterate({\n        from,\n        to,\n        enter: (node) => {\n          if (node.name === 'String' || node.name === 'Literal') {\n            const start = node.name === 'Literal' ? node.from : node.from + 1;\n            const end = node.name === 'Literal' ? node.to : node.to - 1;\n            const text = view.state.doc.sliceString(start, end);\n            const mimeType = getMimeTypeFromDataUrl(text);\n            const shouldRenderDataUrl =\n              mimeType != null &&\n              (mimeType.startsWith('image/') ||\n                mimeType === 'application/pdf' ||\n                mimeType.startsWith('audio/'));\n\n            if (shouldRenderDataUrl) {\n              const deco = Decoration.replace({\n                widget: new DataUrlWidget(text, mimeType),\n                inclusive: true,\n              });\n              widgets.push(deco.range(node.from, node.to));\n            } else if (isValidUrl(text)) {\n              const deco = Decoration.widget({\n                widget: new UrlImageWidget({\n                  src: text,\n                  isOpen: state.get(`${node.to}`),\n                  setOpen: (newState: boolean, nodePosition: number) => {\n                    view.dispatch({\n                      effects: updateDecorationState.of({\n                        id: `${nodePosition}`,\n                        state: newState,\n                      }),\n                    });\n                  },\n                  position: node.to,\n                }),\n                inclusive: true,\n              });\n              widgets.push(deco.range(node.to));\n            }\n          }\n        },\n      });\n    }\n    return Decoration.set(widgets);\n  }\n\n  const imageReplacerPlugin = ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet;\n\n      constructor(view: EditorView) {\n        this.decorations = images(view);\n      }\n\n      update(update: ViewUpdate) {\n        if (\n          update.docChanged ||\n          update.viewportChanged ||\n          syntaxTree(update.startState) !== syntaxTree(update.state)\n        ) {\n          this.decorations = images(update.view);\n        }\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n      provide: (plugin) =>\n        EditorView.atomicRanges.of((view) => {\n          return view.plugin(plugin)?.decorations || Decoration.none;\n        }),\n    }\n  );\n\n  return { decorationStateField, imageReplacerPlugin };\n}\n"],"mappings":"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"}

package/dist/components/Code/JsonHighlighterExtension.d.ts

@@ -0,0 +1,4 @@
+import type { Extension } from '@codemirror/state';
+import type { CMBundle } from '../../utils/lazy-codemirror-loader.js';
+/** Highlights JSON values referenced by variable mappings. */
+export declare function createJsonHighlighterExtension(cm: CMBundle, variableMapping: Record<string, string | null>, dataType: 'input' | 'output' | 'referenceOutput', activeVariable: string | null): Extension;

package/dist/components/Code/JsonHighlighterExtension.js

@@ -0,0 +1,172 @@
+//#region packages/components/src/components/Code/JsonHighlighterExtension.ts
+/** Highlights JSON values referenced by variable mappings. */
+function createJsonHighlighterExtension(cm, variableMapping, dataType, activeVariable) {
+	const { Decoration, ViewPlugin, syntaxTree } = cm;
+	return ViewPlugin.fromClass(class {
+		decorations;
+		constructor(view) {
+			this.decorations = this.getDecorations(view);
+		}
+		getDecorations(view) {
+			const relevantMappings = Object.entries(variableMapping).filter(([, path]) => path === dataType || path?.startsWith(`${dataType}.`));
+			if (relevantMappings.length === 0) return Decoration.none;
+			const ranges = [];
+			for (const [variableName, path] of relevantMappings) {
+				if (!path) continue;
+				const highlightClass = activeVariable === variableName ? "bg-yellow-200 dark:bg-yellow-800" : "bg-green-100 dark:bg-green-950";
+				if (path === dataType) {
+					this.addDecoration(ranges, 0, view.state.doc.length, highlightClass);
+					continue;
+				}
+				const actualPath = path.substring(dataType.length + 1);
+				const pathSegments = this.parseJsonPath(actualPath);
+				this.findMatchingNodes(view, pathSegments, ranges, highlightClass);
+			}
+			return Decoration.set(ranges.map(({ from, to, decoration }) => Decoration.mark({ class: decoration.spec.class }).range(from, to)));
+		}
+		/** Parses property, array-index, and wildcard path segments. */
+		parseJsonPath(path) {
+			const segments = [];
+			let currentSegment = "";
+			let inBracket = false;
+			for (let i = 0; i < path.length; i++) {
+				const char = path[i];
+				if (char === "." && !inBracket) {
+					if (currentSegment) {
+						segments.push({
+							type: "property",
+							value: currentSegment
+						});
+						currentSegment = "";
+					}
+				} else if (char === "[") {
+					if (currentSegment) {
+						segments.push({
+							type: "property",
+							value: currentSegment
+						});
+						currentSegment = "";
+					}
+					inBracket = true;
+				} else if (char === "]" && inBracket) {
+					if (currentSegment) {
+						if (currentSegment === "*") segments.push({
+							type: "wildcard",
+							value: "*"
+						});
+						else {
+							const index = parseInt(currentSegment, 10);
+							segments.push({
+								type: "index",
+								value: isNaN(index) ? currentSegment : index
+							});
+						}
+						currentSegment = "";
+					}
+					inBracket = false;
+				} else currentSegment += char;
+			}
+			if (currentSegment) {
+				const numericIndex = parseInt(currentSegment, 10);
+				if (currentSegment === "*") segments.push({
+					type: "wildcard",
+					value: "*"
+				});
+				else if (!isNaN(numericIndex) && numericIndex.toString() === currentSegment) segments.push({
+					type: "index",
+					value: numericIndex
+				});
+				else segments.push({
+					type: "property",
+					value: currentSegment
+				});
+			}
+			return segments;
+		}
+		findMatchingNodes(view, pathSegments, ranges, highlightClass, currentDepth = 0, parentFrom = 0, parentTo = view.state.doc.length) {
+			const currentSegment = pathSegments[currentDepth];
+			if (!currentSegment) return;
+			syntaxTree(view.state).iterate({
+				from: parentFrom,
+				to: parentTo,
+				enter: (node) => {
+					if (currentSegment.type === "property" && node.name === "Property") {
+						const { keyNode, valueNode } = this.extractPropertyNodes(node);
+						if (!keyNode) return;
+						if (this.extractKeyName(view, keyNode) !== currentSegment.value) return;
+						if (currentDepth === pathSegments.length - 1 && valueNode) this.addDecoration(ranges, valueNode.from, valueNode.to, highlightClass);
+						else if (currentDepth < pathSegments.length - 1 && valueNode) {
+							if (valueNode.name === "Object" || valueNode.name === "Array") this.findMatchingNodes(view, pathSegments, ranges, highlightClass, currentDepth + 1, valueNode.from, valueNode.to);
+						}
+					} else if ((currentSegment.type === "index" || currentSegment.type === "wildcard") && node.name === "Array") {
+						const elements = this.extractArrayElements(node);
+						if (currentSegment.type === "index") {
+							const targetIndex = currentSegment.value;
+							const resolvedIndex = targetIndex >= 0 ? targetIndex : elements.length + targetIndex;
+							if (resolvedIndex < 0 || resolvedIndex >= elements.length) return;
+							const targetElement = elements[resolvedIndex];
+							if (currentDepth === pathSegments.length - 1) this.addDecoration(ranges, targetElement.from, targetElement.to, highlightClass);
+							else if (currentDepth < pathSegments.length - 1) this.findMatchingNodes(view, pathSegments, ranges, highlightClass, currentDepth + 1, targetElement.from, targetElement.to);
+						} else if (currentSegment.type === "wildcard") elements.forEach((element) => {
+							if (currentDepth === pathSegments.length - 1) this.addDecoration(ranges, element.from, element.to, highlightClass);
+							else if (currentDepth < pathSegments.length - 1) this.findMatchingNodes(view, pathSegments, ranges, highlightClass, currentDepth + 1, element.from, element.to);
+						});
+					}
+				}
+			});
+		}
+		extractArrayElements(arrayNode) {
+			const elements = [];
+			const cursor = arrayNode.node.cursor();
+			if (cursor.firstChild()) {
+				if (cursor.nextSibling()) do
+					if (cursor.name === "Expression" || cursor.name === "Number" || cursor.name === "String" || cursor.name === "True" || cursor.name === "False" || cursor.name === "Null" || cursor.name === "Array" || cursor.name === "Object") elements.push({
+						from: cursor.from,
+						to: cursor.to,
+						name: cursor.name
+					});
+				while (cursor.nextSibling());
+			}
+			return elements;
+		}
+		extractPropertyNodes(node) {
+			let keyNode;
+			let valueNode;
+			const cursor = node.node.cursor();
+			if (cursor.firstChild()) do
+				if (cursor.name === "PropertyName") keyNode = {
+					from: cursor.from,
+					to: cursor.to,
+					name: cursor.name
+				};
+				else if (cursor.name === "Expression" || cursor.name === "Number" || cursor.name === "String" || cursor.name === "True" || cursor.name === "False" || cursor.name === "Null" || cursor.name === "Array" || cursor.name === "Object") valueNode = {
+					from: cursor.from,
+					to: cursor.to,
+					name: cursor.name
+				};
+			while (cursor.nextSibling());
+			return {
+				keyNode,
+				valueNode
+			};
+		}
+		extractKeyName(view, keyNode) {
+			return view.state.doc.sliceString(keyNode.from, keyNode.to).replace(/^["'](.*)["']$/, "$1");
+		}
+		addDecoration(ranges, from, to, highlightClass) {
+			const decoration = Decoration.mark({ class: highlightClass });
+			ranges.push({
+				from,
+				to,
+				decoration
+			});
+		}
+		update(update) {
+			if (update.docChanged || update.viewportChanged) this.decorations = this.getDecorations(update.view);
+		}
+	}, { decorations: (v) => v.decorations });
+}
+//#endregion
+export { createJsonHighlighterExtension };
+
+//# sourceMappingURL=JsonHighlighterExtension.js.map

package/dist/components/Code/JsonHighlighterExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonHighlighterExtension.js","names":[],"sources":["../../../src/components/Code/JsonHighlighterExtension.ts"],"sourcesContent":["import type { Extension } from '@codemirror/state';\nimport type {\n  Decoration,\n  DecorationSet,\n  EditorView,\n  ViewUpdate,\n} from '@codemirror/view';\nimport type { SyntaxNodeRef } from '@lezer/common';\n\nimport type { CMBundle } from '../../utils/lazy-codemirror-loader';\n\ntype NodeInfo = { from: number; to: number; name: string };\ntype DecoratedRange = { from: number; to: number; decoration: Decoration };\n\ntype PathSegment = {\n  type: 'property' | 'index' | 'wildcard';\n  value: string | number;\n};\n\n/** Highlights JSON values referenced by variable mappings. */\nexport function createJsonHighlighterExtension(\n  cm: CMBundle,\n  variableMapping: Record<string, string | null>,\n  dataType: 'input' | 'output' | 'referenceOutput',\n  activeVariable: string | null\n): Extension {\n  const { Decoration, ViewPlugin, syntaxTree } = cm;\n  return ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet;\n\n      constructor(view: EditorView) {\n        this.decorations = this.getDecorations(view);\n      }\n\n      getDecorations(view: EditorView): DecorationSet {\n        // Match the full data type or a path nested beneath it.\n        const relevantMappings = Object.entries(variableMapping).filter(\n          ([, path]) => path === dataType || path?.startsWith(`${dataType}.`)\n        );\n\n        if (relevantMappings.length === 0) {\n          return Decoration.none;\n        }\n\n        const ranges: DecoratedRange[] = [];\n\n        for (const [variableName, path] of relevantMappings) {\n          if (!path) continue;\n\n          const isActiveVariable = activeVariable === variableName;\n\n          const highlightClass = isActiveVariable\n            ? 'bg-yellow-200 dark:bg-yellow-800'\n            : 'bg-green-100 dark:bg-green-950';\n\n          if (path === dataType) {\n            this.addDecoration(\n              ranges,\n              0,\n              view.state.doc.length,\n              highlightClass\n            );\n            continue;\n          }\n\n          // Strip the data type and separator from the stored path.\n          const actualPath = path.substring(dataType.length + 1);\n          const pathSegments = this.parseJsonPath(actualPath);\n\n          this.findMatchingNodes(view, pathSegments, ranges, highlightClass);\n        }\n\n        return Decoration.set(\n          ranges.map(({ from, to, decoration }) =>\n            Decoration.mark({\n              class: decoration.spec.class as string,\n            }).range(from, to)\n          )\n        );\n      }\n\n      /** Parses property, array-index, and wildcard path segments. */\n      parseJsonPath(path: string): PathSegment[] {\n        const segments: PathSegment[] = [];\n        let currentSegment = '';\n        let inBracket = false;\n\n        for (let i = 0; i < path.length; i++) {\n          const char = path[i];\n\n          if (char === '.' && !inBracket) {\n            if (currentSegment) {\n              segments.push({ type: 'property', value: currentSegment });\n              currentSegment = '';\n            }\n          } else if (char === '[') {\n            if (currentSegment) {\n              segments.push({ type: 'property', value: currentSegment });\n              currentSegment = '';\n            }\n            inBracket = true;\n          } else if (char === ']' && inBracket) {\n            if (currentSegment) {\n              if (currentSegment === '*') {\n                segments.push({ type: 'wildcard', value: '*' });\n              } else {\n                const index = parseInt(currentSegment, 10);\n                segments.push({\n                  type: 'index',\n                  value: isNaN(index) ? currentSegment : index,\n                });\n              }\n              currentSegment = '';\n            }\n            inBracket = false;\n          } else {\n            currentSegment += char;\n          }\n        }\n\n        if (currentSegment) {\n          const numericIndex = parseInt(currentSegment, 10);\n          if (currentSegment === '*') {\n            segments.push({ type: 'wildcard', value: '*' });\n          } else if (\n            !isNaN(numericIndex) &&\n            numericIndex.toString() === currentSegment\n          ) {\n            segments.push({ type: 'index', value: numericIndex });\n          } else {\n            segments.push({ type: 'property', value: currentSegment });\n          }\n        }\n\n        return segments;\n      }\n\n      findMatchingNodes(\n        view: EditorView,\n        pathSegments: PathSegment[],\n        ranges: DecoratedRange[],\n        highlightClass: string,\n        currentDepth = 0,\n        parentFrom = 0,\n        parentTo = view.state.doc.length\n      ): void {\n        const currentSegment = pathSegments[currentDepth];\n        if (!currentSegment) return;\n\n        const tree = syntaxTree(view.state);\n\n        tree.iterate({\n          from: parentFrom,\n          to: parentTo,\n          enter: (node) => {\n            if (\n              currentSegment.type === 'property' &&\n              node.name === 'Property'\n            ) {\n              const { keyNode, valueNode } = this.extractPropertyNodes(node);\n\n              if (!keyNode) return;\n\n              const keyName = this.extractKeyName(view, keyNode);\n\n              if (keyName !== currentSegment.value) return;\n\n              if (currentDepth === pathSegments.length - 1 && valueNode) {\n                this.addDecoration(\n                  ranges,\n                  valueNode.from,\n                  valueNode.to,\n                  highlightClass\n                );\n              } else if (currentDepth < pathSegments.length - 1 && valueNode) {\n                if (valueNode.name === 'Object' || valueNode.name === 'Array') {\n                  this.findMatchingNodes(\n                    view,\n                    pathSegments,\n                    ranges,\n                    highlightClass,\n                    currentDepth + 1,\n                    valueNode.from,\n                    valueNode.to\n                  );\n                }\n              }\n            } else if (\n              (currentSegment.type === 'index' ||\n                currentSegment.type === 'wildcard') &&\n              node.name === 'Array'\n            ) {\n              const elements = this.extractArrayElements(node);\n              if (currentSegment.type === 'index') {\n                const targetIndex = currentSegment.value as number;\n\n                // Negative indices address elements from the end of the array.\n                const resolvedIndex =\n                  targetIndex >= 0\n                    ? targetIndex\n                    : elements.length + targetIndex;\n\n                if (resolvedIndex < 0 || resolvedIndex >= elements.length) {\n                  return;\n                }\n\n                const targetElement = elements[resolvedIndex];\n\n                if (currentDepth === pathSegments.length - 1) {\n                  this.addDecoration(\n                    ranges,\n                    targetElement.from,\n                    targetElement.to,\n                    highlightClass\n                  );\n                } else if (currentDepth < pathSegments.length - 1) {\n                  this.findMatchingNodes(\n                    view,\n                    pathSegments,\n                    ranges,\n                    highlightClass,\n                    currentDepth + 1,\n                    targetElement.from,\n                    targetElement.to\n                  );\n                }\n              } else if (currentSegment.type === 'wildcard') {\n                elements.forEach((element) => {\n                  if (currentDepth === pathSegments.length - 1) {\n                    this.addDecoration(\n                      ranges,\n                      element.from,\n                      element.to,\n                      highlightClass\n                    );\n                  } else if (currentDepth < pathSegments.length - 1) {\n                    this.findMatchingNodes(\n                      view,\n                      pathSegments,\n                      ranges,\n                      highlightClass,\n                      currentDepth + 1,\n                      element.from,\n                      element.to\n                    );\n                  }\n                });\n              }\n            }\n          },\n        });\n      }\n\n      private extractArrayElements(arrayNode: SyntaxNodeRef): NodeInfo[] {\n        const elements: NodeInfo[] = [];\n\n        const cursor = arrayNode.node.cursor();\n\n        if (cursor.firstChild()) {\n          if (cursor.nextSibling()) {\n            do {\n              if (\n                cursor.name === 'Expression' ||\n                cursor.name === 'Number' ||\n                cursor.name === 'String' ||\n                cursor.name === 'True' ||\n                cursor.name === 'False' ||\n                cursor.name === 'Null' ||\n                cursor.name === 'Array' ||\n                cursor.name === 'Object'\n              ) {\n                elements.push({\n                  from: cursor.from,\n                  to: cursor.to,\n                  name: cursor.name,\n                });\n              }\n            } while (cursor.nextSibling());\n          }\n        }\n\n        return elements;\n      }\n\n      private extractPropertyNodes(node: SyntaxNodeRef): {\n        keyNode?: NodeInfo;\n        valueNode?: NodeInfo;\n      } {\n        let keyNode: NodeInfo | undefined;\n        let valueNode: NodeInfo | undefined;\n\n        const cursor = node.node.cursor();\n        if (cursor.firstChild()) {\n          do {\n            if (cursor.name === 'PropertyName') {\n              keyNode = {\n                from: cursor.from,\n                to: cursor.to,\n                name: cursor.name,\n              };\n            } else if (\n              cursor.name === 'Expression' ||\n              cursor.name === 'Number' ||\n              cursor.name === 'String' ||\n              cursor.name === 'True' ||\n              cursor.name === 'False' ||\n              cursor.name === 'Null' ||\n              cursor.name === 'Array' ||\n              cursor.name === 'Object'\n            ) {\n              valueNode = {\n                from: cursor.from,\n                to: cursor.to,\n                name: cursor.name,\n              };\n            }\n          } while (cursor.nextSibling());\n        }\n\n        return { keyNode, valueNode };\n      }\n\n      private extractKeyName(view: EditorView, keyNode: NodeInfo): string {\n        const keyText = view.state.doc.sliceString(keyNode.from, keyNode.to);\n        return keyText.replace(/^[\"'](.*)[\"']$/, '$1');\n      }\n\n      private addDecoration(\n        ranges: DecoratedRange[],\n        from: number,\n        to: number,\n        highlightClass: string\n      ): void {\n        const decoration = Decoration.mark({\n          class: highlightClass,\n        });\n\n        ranges.push({\n          from,\n          to,\n          decoration,\n        });\n      }\n\n      update(update: ViewUpdate) {\n        if (update.docChanged || update.viewportChanged) {\n          this.decorations = this.getDecorations(update.view);\n        }\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    }\n  );\n}\n"],"mappings":"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"}

package/dist/components/Code/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MAX_CODE_LENGTH = 5000;
+export declare const MAX_LINE_LENGTH = 1000;
+export declare const MAX_TEXT_LENGTH = 20000;
+export declare const MAX_CODE_HEIGHT = 450;
+export declare const ROW_WIDTH = 80;
+export declare const ROW_HEIGHT = 20;

package/dist/components/Code/constants.js

@@ -0,0 +1,11 @@
+//#region packages/components/src/components/Code/constants.tsx
+var MAX_CODE_LENGTH = 5e3;
+var MAX_LINE_LENGTH = 1e3;
+var MAX_TEXT_LENGTH = 2e4;
+var MAX_CODE_HEIGHT = 450;
+var ROW_WIDTH = 80;
+var ROW_HEIGHT = 20;
+//#endregion
+export { MAX_CODE_HEIGHT, MAX_CODE_LENGTH, MAX_LINE_LENGTH, MAX_TEXT_LENGTH, ROW_HEIGHT, ROW_WIDTH };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/Code/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/Code/constants.tsx"],"sourcesContent":["export const MAX_CODE_LENGTH = 5_000;\nexport const MAX_LINE_LENGTH = 1_000;\nexport const MAX_TEXT_LENGTH = 20_000;\n\nexport const MAX_CODE_HEIGHT = 450;\n\nexport const ROW_WIDTH = 80;\nexport const ROW_HEIGHT = 20;\n"],"mappings":";AAAA,IAAa,kBAAkB;AAC/B,IAAa,kBAAkB;AAC/B,IAAa,kBAAkB;AAE/B,IAAa,kBAAkB;AAE/B,IAAa,YAAY;AACzB,IAAa,aAAa"}

package/dist/components/Code/index.d.ts

@@ -0,0 +1,30 @@
+import type { Extension } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+import type { CodeLanguageType } from './types.js';
+/** Props for the syntax-highlighted CodeMirror block. */
+export interface CodeProps {
+    language: CodeLanguageType;
+    extensions?: Extension[];
+    value: string | undefined;
+    onChange?: (code: string) => void;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    height?: string;
+    maxHeight?: string;
+    omitMaxHeight?: boolean;
+    width?: string;
+    fontSize?: string;
+    placeholder?: string;
+    showCopyButton?: boolean;
+    testId?: string;
+    variant?: 'plain' | 'full';
+    onCreateEditor?: (view: EditorView) => void;
+    converterExtensions?: Extension[];
+}
+/**
+ * Renders syntax-highlighted code with optional editing and copy support.
+ *
+ * Import directly from `@langchain/macaw-components/Code` so the CodeMirror
+ * dependency is only loaded by surfaces that use it.
+ */
+export declare const Code: ({ value, readOnly, onChange, autoFocus, placeholder, language, extensions, converterExtensions, height, maxHeight, omitMaxHeight, width, fontSize, onCreateEditor, variant, testId, showCopyButton, }: CodeProps) => import("react").JSX.Element | null;