@examplary/ui 1.75.1 → 1.76.0

package/AGENTS.md

@@ -111,7 +111,7 @@ Import from `@examplary/ui`. Uses Tailwind CSS v4. Combine classes with the expo
 
 ## Buttons & Badges
 
-**Button** - Props: `variant` (default | primary | secondary | destructive | white | plain | dashed | rounded | roundedPrimary | roundedSecondary | roundedWhite), `size` (default | sm | lg | icon | icon-sm | icon-lg), `asChild`.
+**Button** - Props: `variant` (default | primary | secondary | destructive | white | plain | roundedPlain | dashed | rounded | roundedPrimary | roundedSecondary | roundedWhite), `size` (default | sm | lg | icon | icon-sm | icon-lg), `asChild`.
 
 ```tsx
 <Button variant="primary" size="sm">
@@ -119,7 +119,7 @@ Import from `@examplary/ui`. Uses Tailwind CSS v4. Combine classes with the expo
 </Button>
 ```
 
-**Badge** - Status tag. Props: `variant` (default | blue | bright | positive | orange | secondary).
+**Badge** - Status tag. Props: `variant` (default | blue | bright | positive | orange | secondary | destructive).
 
 ## Overlays
 
@@ -215,4 +215,4 @@ Import from `@examplary/ui`. Uses Tailwind CSS v4. Combine classes with the expo
 ## Utilities
 
 - `cn(...classes)` - Merges Tailwind classes (clsx + tailwind-merge).
-- `registerWebComponents()` - Registers `<file-attachment>`, `<page-clipping>`, `<inline-math>` custom elements for rich text rendering.
+- `registerWebComponents()` - Registers `<file-attachment>`, `<page-clipping>`, `<inline-math>`, `<content-reference>` custom elements for rich text rendering.

package/dist/components/rich-text/rich-text-display.js

@@ -1,12 +1,12 @@
 "use client";
 import { createElement, useMemo, useRef } from "react";
-import { convertLatexToMathMl } from "mathlive";
+import { latexToSafeMathMl } from "../../lib/sanitize-mathml";
 import { cn } from "../../utils";
 export const convertHtmlToRichText = (html) => {
     // Replace <inline-math> with MathML generated from the LaTeX content
     return (html?.replace?.(/<inline-math>([\s\S]*?)<\/inline-math>/g, (match, content) => {
         try {
-            return `<math>${convertLatexToMathMl(content)}</math>`;
+            return `<math>${latexToSafeMathMl(content)}</math>`;
         }
         catch {
             // If conversion fails, keep the original inline-math markup so that

package/dist/components/rich-text/tiptap/image.js

@@ -40,6 +40,9 @@ const Image = Node.create({
             height: {
                 default: null,
             },
+            "data-graph": {
+                default: null,
+            },
         };
     },
     parseHTML() {

package/dist/components/rich-text/tiptap/mathematics-component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 import { EditIcon } from "lucide-react";
-import { convertLatexToMathMl } from "mathlive";
+import { latexToSafeMathMl } from "../../../lib/sanitize-mathml.js";
 import { cn } from "../../../utils.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover.js";
 import "mathlive";
@@ -14,12 +14,12 @@ export const MathematicsEditComponent = ({ node, editor }) => {
 export const InlineMathView = ({ children, onEdit, }) => {
     const [menuOpen, setMenuOpen] = useState(false);
     const [value, setValue] = useState(children || "");
-    const html = useMemo(() => {
+    const mathml = useMemo(() => {
         try {
-            return convertLatexToMathMl(value);
+            return latexToSafeMathMl(value);
         }
         catch {
-            return value;
+            return null;
         }
     }, [value]);
     return (_jsxs(Popover, { open: menuOpen, onOpenChange: (open) => {
@@ -35,7 +35,7 @@ export const InlineMathView = ({ children, onEdit, }) => {
                     // no-op
                 }
             }
-        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("span", { className: cn("rounded-2xl bg-pink-50 min-h-6 px-1.5 py-0.25 inline-flex gap-2.5 items-center cursor-pointer hover:bg-pink-200 group transition-all", menuOpen && "bg-pink-200"), children: [_jsx("math", { dangerouslySetInnerHTML: { __html: html } }), _jsx(EditIcon, { className: cn("text-pink-500 size-3 hidden group-hover:block shrink-0", menuOpen && "block") })] }) }), _jsx(PopoverContent, { align: "center", side: "bottom", sideOffset: -30, collisionPadding: 12, className: "border border-black p-0 bg-white rounded-md shadow-md max-w-none", onPointerDownOutside: (event) => {
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("span", { className: cn("rounded-2xl bg-pink-50 min-h-6 px-1.5 py-0.25 inline-flex gap-2.5 items-center cursor-pointer hover:bg-pink-200 group transition-all", menuOpen && "bg-pink-200"), children: [mathml === null ? (value) : (_jsx("math", { dangerouslySetInnerHTML: { __html: mathml } })), _jsx(EditIcon, { className: cn("text-pink-500 size-3 hidden group-hover:block shrink-0", menuOpen && "block") })] }) }), _jsx(PopoverContent, { align: "center", side: "bottom", sideOffset: -30, collisionPadding: 12, className: "border border-black p-0 bg-white rounded-md shadow-md max-w-none", onPointerDownOutside: (event) => {
                     const mathKeyboard = document.querySelector(".ML__keyboard");
                     if (mathKeyboard?.contains(event.target)) {
                         // Prevent closing when clicking on the math keyboard

package/dist/components/ui/color-picker.js

@@ -36,7 +36,7 @@ const ColorPicker = ({ value, swatches = defaultSwatches, defaultValue = "#fffff
         }
     };
     const hasSwatchSelected = useMemo(() => availableSwatches.includes(parsedValue), [availableSwatches, parsedValue]);
-    return (_jsxs("div", { className: cn("flex flex-wrap gap-2", className), children: [availableSwatches.map((color) => (_jsx(Button, { type: "button", style: { backgroundColor: color }, variant: "roundedWhite", size: "sm", className: cn("size-8 p-0", color === parsedValue && "border-black", swatchClassName), onClick: () => onChangeProxy(color) }, color))), allowCustom && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "roundedWhite", size: "sm", className: cn("h-8", !hasSwatchSelected && "border-black"), style: {
+    return (_jsxs("div", { className: cn("flex flex-wrap gap-2", className), children: [availableSwatches.map((color) => (_jsx(Button, { type: "button", style: { backgroundColor: color }, variant: "roundedWhite", size: "sm", className: cn("size-8 p-0", color === parsedValue && "border-black", swatchClassName), onClick: () => onChangeProxy(color) }, color))), allowCustom && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "roundedWhite", size: "sm", className: cn("h-8 ml-auto", !hasSwatchSelected && "border-black"), style: {
                                 backgroundColor: !hasSwatchSelected ? parsedValue : "",
                             }, children: [_jsx(PipetteIcon, {}), customLabelTitle] }) }), _jsxs(PopoverContent, { className: "rounded-xl bg-white p-4", children: [_jsx(HexColorPicker, { color: parsedValue, onChange: onChangeProxy, className: "w-full!" }), _jsx(Input, { className: "w-full mt-2", maxLength: 7, onChange: (e) => {
                                     onChange(e?.currentTarget?.value);

package/dist/components/web-components/inline-math.js

@@ -1,5 +1,5 @@
 "use client";
-import { convertLatexToMathMl } from "mathlive";
+import { latexToSafeMathMl } from "../../lib/sanitize-mathml.js";
 // Custom element for use in rich text editors
 export class InlineMathElement extends HTMLElement {
     observer;
@@ -19,9 +19,9 @@ export class InlineMathElement extends HTMLElement {
         this.observer?.disconnect();
     }
     render() {
-        const latex = this.textContent;
+        const latex = this.textContent ?? "";
         try {
-            this.innerHTML = `<math>${convertLatexToMathMl(latex)}</math>`;
+            this.innerHTML = `<math>${latexToSafeMathMl(latex)}</math>`;
         }
         catch (error) {
             this.textContent = error.message;

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
+export * from "./sanitize-mathml";
 export * from "./use-resizable";

package/dist/lib/index.js

@@ -1 +1,2 @@
+export * from "./sanitize-mathml";
 export * from "./use-resizable";

package/dist/lib/sanitize-mathml.d.ts

@@ -0,0 +1,6 @@
+export declare const sanitizeMathMl: (markup: string) => string;
+/**
+ * Converts LaTeX to MathML that is safe to inject as markup. Throws whenever
+ * `convertLatexToMathMl` does, so callers keep their own fallback rendering.
+ */
+export declare const latexToSafeMathMl: (latex: string) => string;

package/dist/lib/sanitize-mathml.js

@@ -0,0 +1,149 @@
+import { convertLatexToMathMl } from "mathlive";
+/**
+ * MathLive interpolates LaTeX arguments straight into the MathML it returns —
+ * `\enclose{...}` lands in a `notation` attribute, unescaped — so its output
+ * can carry event handlers or entire HTML elements into whatever renders it.
+ * See https://github.com/arnog/mathlive/security/advisories/GHSA-fm7p-gw32-828p.
+ *
+ * Everything below re-serializes the markup from scratch: only known MathML
+ * elements and presentational attributes survive, attribute values are quoted
+ * and escaped, and all remaining text is escaped.
+ */
+const ALLOWED_ELEMENTS = new Set([
+    "menclose",
+    "merror",
+    "mfrac",
+    "mi",
+    "mn",
+    "mo",
+    "mover",
+    "mpadded",
+    "mphantom",
+    "mroot",
+    "mrow",
+    "ms",
+    "mspace",
+    "msqrt",
+    "mstyle",
+    "msub",
+    "msubsup",
+    "msup",
+    "mtable",
+    "mtd",
+    "mtext",
+    "mtr",
+    "munder",
+    "munderover",
+]);
+const ALLOWED_ATTRIBUTES = new Set([
+    "accent",
+    "accentunder",
+    "columnalign",
+    "columnspan",
+    "depth",
+    "dir",
+    "displaystyle",
+    "fence",
+    "height",
+    "linethickness",
+    "lspace",
+    "mathbackground",
+    "mathcolor",
+    "mathvariant",
+    "maxsize",
+    "minsize",
+    "notation",
+    "rowalign",
+    "rowspan",
+    "rspace",
+    "scriptlevel",
+    "separator",
+    "stretchy",
+    "symmetric",
+    "width",
+]);
+const LOOKS_LIKE_TAG = /^<\/?[a-zA-Z]/;
+const TAG_START = /^<(\/?)([a-zA-Z][a-zA-Z0-9-]*)/;
+const ATTRIBUTE = /([a-zA-Z_:][-.:\w]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'`=<>]+)))?/g;
+const BARE_AMPERSAND = /&(?![a-zA-Z][a-zA-Z0-9]*;|#[0-9]+;|#[xX][0-9a-fA-F]+;)/g;
+const TRAILING_SLASH = /\/\s*$/;
+const escapeText = (value) => value
+    .replace(BARE_AMPERSAND, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+const escapeAttributeValue = (value) => escapeText(value).replace(/"/g, "&quot;");
+// Quoted attribute values may contain ">", so the tag only ends on a ">" that
+// sits outside of quotes — the same rule the HTML parser applies.
+const findTagEnd = (markup, start) => {
+    let quote;
+    for (let index = start; index < markup.length; index++) {
+        const character = markup[index];
+        if (quote) {
+            if (character === quote)
+                quote = undefined;
+        }
+        else if (character === '"' || character === "'") {
+            quote = character;
+        }
+        else if (character === ">") {
+            return index;
+        }
+    }
+    return -1;
+};
+const buildOpeningTag = (element, body) => {
+    const attributes = [];
+    for (const attribute of body
+        .replace(TRAILING_SLASH, "")
+        .matchAll(ATTRIBUTE)) {
+        const name = attribute[1].toLowerCase();
+        if (!ALLOWED_ATTRIBUTES.has(name))
+            continue;
+        const value = attribute[2] ?? attribute[3] ?? attribute[4] ?? "";
+        attributes.push(` ${name}="${escapeAttributeValue(value)}"`);
+    }
+    const selfClosing = TRAILING_SLASH.test(body);
+    return `<${element}${attributes.join("")}${selfClosing ? "/" : ""}>`;
+};
+export const sanitizeMathMl = (markup) => {
+    let result = "";
+    let index = 0;
+    while (index < markup.length) {
+        const tagStart = markup.indexOf("<", index);
+        if (tagStart === -1) {
+            result += escapeText(markup.slice(index));
+            break;
+        }
+        result += escapeText(markup.slice(index, tagStart));
+        // Testing a three-character window first keeps a run of stray "<" linear
+        if (!LOOKS_LIKE_TAG.test(markup.slice(tagStart, tagStart + 3))) {
+            result += "&lt;";
+            index = tagStart + 1;
+            continue;
+        }
+        const tagEnd = findTagEnd(markup, tagStart);
+        if (tagEnd === -1) {
+            result += escapeText(markup.slice(tagStart));
+            break;
+        }
+        const tag = markup.slice(tagStart, tagEnd + 1);
+        const start = tag.match(TAG_START);
+        index = tagEnd + 1;
+        if (!start) {
+            result += escapeText(tag);
+            continue;
+        }
+        const element = start[2].toLowerCase();
+        if (ALLOWED_ELEMENTS.has(element)) {
+            result += start[1]
+                ? `</${element}>`
+                : buildOpeningTag(element, tag.slice(start[0].length, -1));
+        }
+    }
+    return result;
+};
+/**
+ * Converts LaTeX to MathML that is safe to inject as markup. Throws whenever
+ * `convertLatexToMathMl` does, so callers keep their own fallback rendering.
+ */
+export const latexToSafeMathMl = (latex) => sanitizeMathMl(convertLatexToMathMl(latex));

package/package.json

@@ -2,7 +2,7 @@
   "name": "@examplary/ui",
   "description": "UI components for the Examplary testing platform.",
   "packageManager": "yarn@4.5.3",
-  "version": "1.75.1",
+  "version": "1.76.0",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "dev": "yarn build --watch",
+    "test": "vitest",
     "release": "semantic-release -e semantic-release-monorepo",
     "build": "yarn build:js && yarn build:styles",
     "build:js": "tsc ./src/index.ts --outDir dist --skipLibCheck --declaration --jsx react-jsx --esModuleInterop --moduleResolution bundler --module es2020",
@@ -92,7 +93,8 @@
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.0",
     "tailwindcss": "^4.2.1",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   },
   "homepage": "https://examplary.ai/developers",
   "author": {