@anyknown/ui 0.4.1 → 0.5.0

package/dist/components/card/Card.d.ts

@@ -1,2 +1,7 @@
 import type { ComponentProps } from "react";
-export declare function Card(props: ComponentProps<"div">): import("react").JSX.Element;
+import { type StyleArg } from "../../lib/styled.js";
+type CardProps = ComponentProps<"div"> & {
+    sx?: StyleArg;
+};
+export declare function Card({ sx, ...props }: CardProps): import("react").JSX.Element;
+export {};

package/dist/components/card/Card.js

@@ -12,6 +12,6 @@ const styles = stylex.create({
         padding: space.lg,
     },
 });
-export function Card(props) {
-    return _jsx("div", { ...props, ...styled(props, styles.base) });
+export function Card({ sx, ...props }) {
+    return _jsx("div", { ...props, ...styled(props, styles.base, sx) });
 }

package/dist/components/markdown/Formula.d.ts

@@ -0,0 +1,18 @@
+import { type StyleArg } from "../../lib/styled.js";
+export type FormulaProps = {
+    children: string;
+    display?: boolean;
+    sx?: StyleArg;
+};
+/**
+ * TeX → MathML, rendered by the browser itself.
+ *
+ * Temml emits MathML rather than a pile of positioned spans, which is why this component needs no
+ * stylesheet and no web font — the two things a KaTeX integration would push onto every consumer
+ * of this package. It also means a screen reader gets the actual maths, not a div soup.
+ *
+ * Temml writes into the node directly (`temml.render`), so nothing here ever hands a string to
+ * `dangerouslySetInnerHTML` — this package does not use it anywhere and maths is not the place to
+ * start, given the TeX usually arrives from a language model.
+ */
+export declare function Formula({ children, display, sx }: FormulaProps): import("react").JSX.Element;

package/dist/components/markdown/Formula.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useEffect, useRef } from "react";
+import { styled } from "../../lib/styled.js";
+import { color, space, text } from "../../tokens.stylex.js";
+const styles = stylex.create({
+    // Display maths is the one block that routinely overflows a phone: a long equation cannot be
+    // re-wrapped the way a paragraph can, so it gets its own scroller rather than widening the page.
+    block: {
+        display: "block",
+        overflowX: "auto",
+        overflowY: "hidden",
+        paddingBlock: space.xs,
+        marginBlock: space.xs,
+        color: color.text,
+    },
+    inline: {
+        display: "inline-block",
+        maxWidth: "100%",
+        overflowX: "auto",
+        verticalAlign: "middle",
+        color: color.text,
+    },
+    // What a caller sees when the TeX itself is wrong. Showing the source beats showing nothing:
+    // the reader can still read the formula, and it is obvious who to blame.
+    error: {
+        fontFamily: "ui-monospace, monospace",
+        fontSize: text.xs,
+        color: color.danger,
+        overflowWrap: "anywhere",
+    },
+});
+/**
+ * TeX → MathML, rendered by the browser itself.
+ *
+ * Temml emits MathML rather than a pile of positioned spans, which is why this component needs no
+ * stylesheet and no web font — the two things a KaTeX integration would push onto every consumer
+ * of this package. It also means a screen reader gets the actual maths, not a div soup.
+ *
+ * Temml writes into the node directly (`temml.render`), so nothing here ever hands a string to
+ * `dangerouslySetInnerHTML` — this package does not use it anywhere and maths is not the place to
+ * start, given the TeX usually arrives from a language model.
+ */
+export function Formula({ children, display = false, sx }) {
+    const host = useRef(null);
+    useEffect(() => {
+        const node = host.current;
+        if (!node)
+            return;
+        let live = true;
+        // Temml is ~250KB and most messages contain no maths at all, so it arrives only when the
+        // first formula does.
+        void import("temml")
+            .then((temml) => {
+            if (!live || !host.current)
+                return;
+            temml.default.render(children, host.current, {
+                displayMode: display,
+                // `throwOnError: false` renders the offending source in red instead of blowing up the
+                // whole message; `trust: false` (the default) keeps \href and friends inert.
+                throwOnError: false,
+                errorColor: "currentColor",
+            });
+        })
+            // Nothing about one formula is worth taking a message down for. `throwOnError` covers bad
+            // TeX, this covers everything else: a chunk that fails to load, or a DOM that will not
+            // take MathML at all (jsdom builds those elements without a `style`, so Temml throws
+            // there and only there). The source TeX is already on screen and simply stays.
+            .catch(() => { });
+        return () => {
+            live = false;
+        };
+    }, [children, display]);
+    return (_jsx("span", { ref: host, ...styled({}, display ? styles.block : styles.inline, sx), ...(display ? { role: "math" } : {}), children: _jsx("span", { ...stylex.props(styles.error), children: children }) }));
+}

package/dist/components/markdown/Markdown.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type StyleArg } from "../../lib/styled.js";
+/** A fenced block a shell wants to draw itself — mermaid, a chart spec, anything. */
+export type MarkdownBlock = {
+    lang: string;
+    code: string;
+};
+export type MarkdownProps = Omit<ComponentProps<"div">, "children"> & {
+    children: string;
+    /**
+     * Draws a fenced block instead of the built-in code block. Returning `undefined` (or not
+     * passing this at all) falls back to the code block, which is why a shell that has no mermaid
+     * bundled still shows the source rather than nothing.
+     *
+     * This package deliberately does not depend on any diagram library: mermaid alone unpacks to
+     * ~84MB, which no design system should push onto every app that installs it.
+     */
+    renderBlock?: (block: MarkdownBlock) => ReactNode | undefined;
+    /** Passed through to code blocks, so a shell can localise their copy button. */
+    copyLabel?: string;
+    copiedLabel?: string;
+    sx?: StyleArg;
+};
+/**
+ * Markdown as a conversation renders it: GFM tables, fenced code, TeX maths, task lists.
+ *
+ * Nothing here goes through `innerHTML`. The markdown is tokenised and every token is turned into
+ * a React element, so a model that emits `<script>` gets its source shown, not run.
+ */
+export declare function Markdown({ children, renderBlock, copyLabel, copiedLabel, sx, ...rest }: MarkdownProps): import("react").JSX.Element;

package/dist/components/markdown/Markdown.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Marked } from "marked";
+import { styled } from "../../lib/styled.js";
+import { color, radius, space, text } from "../../tokens.stylex.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { CodeBlock, InlineCode } from "../code-block/CodeBlock.js";
+import { Formula } from "./Formula.js";
+import { isMathToken, mathExtensions } from "./math.js";
+// Its own Marked instance, not the module-level `marked`: `marked.use()` is global, and a design
+// system must not reach into whatever else the host app parses.
+//
+// `breaks: true` because this renders what a person or a model just typed into a conversation. In
+// a document a lone newline is a space; in a chat message it is a line the writer meant to break.
+const parser = new Marked({ gfm: true, breaks: true }).use({ extensions: mathExtensions });
+const styles = stylex.create({
+    root: {
+        display: "grid",
+        gap: space.sm,
+        // Set, never inherited. Every other component in this package states its own colour and
+        // size for the same reason: a host whose text colour is wrong (or missing, as when a page
+        // forgets tokens.css) would otherwise paint this black on a dark ground.
+        color: color.text,
+        fontSize: text.sm,
+        lineHeight: text.leadingRelaxed,
+        // Model output is full of things with no spaces in them — URLs, file paths, hashes. On a
+        // 390px screen any one of them would otherwise push the whole conversation sideways.
+        overflowWrap: "anywhere",
+        minWidth: 0,
+    },
+    p: { margin: 0, lineHeight: text.leadingNormal },
+    heading: { margin: 0, lineHeight: text.leadingSnug, fontWeight: 600 },
+    h1: { fontSize: text.lg },
+    // h2 and below are body-sized and carry their weight instead: these are headings inside one
+    // chat message, not a page outline, and a message that shouts three sizes at you reads worse.
+    h2: { fontSize: text.base },
+    h3: { fontSize: text.base },
+    list: { margin: 0, paddingInlineStart: "1.5em", display: "grid", gap: space.xxs },
+    item: { lineHeight: text.leadingNormal },
+    // The item's own text follows it on the same line, so the box must not take the whole row.
+    task: { display: "inline-flex", marginInlineEnd: space.xxs, verticalAlign: "middle" },
+    quote: {
+        margin: 0,
+        paddingInlineStart: space.sm,
+        borderInlineStartWidth: 2,
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: color.border,
+        color: color.textMuted,
+        display: "grid",
+        gap: space.xs,
+    },
+    rule: {
+        border: "none",
+        borderBlockStartWidth: 1,
+        borderBlockStartStyle: "solid",
+        borderBlockStartColor: color.border,
+        margin: 0,
+    },
+    link: { color: color.accent, textUnderlineOffset: "0.15em" },
+    image: { maxWidth: "100%", height: "auto", borderRadius: radius.md },
+    // The table itself must not shrink to fit; the wrapper scrolls instead. A squashed table on a
+    // phone is unreadable, a scrolling one is merely narrow.
+    tableWrap: { overflowX: "auto", maxWidth: "100%" },
+    // Sized by its own content, not stretched to the message width: a two-column table pulled out
+    // to full width puts its cells at opposite ends of the screen and is harder to read, not easier.
+    table: { borderCollapse: "collapse" },
+    cell: {
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        textAlign: "start",
+        verticalAlign: "top",
+    },
+    head: { backgroundColor: color.surface, fontWeight: 600 },
+});
+const ALIGN = { left: "start", center: "center", right: "end" };
+function inlineTokens(token) {
+    return token.tokens;
+}
+function renderInline(tokens, context, keyPrefix) {
+    if (!tokens)
+        return null;
+    return tokens.map((token, index) => {
+        const key = `${keyPrefix}.${index}`;
+        if (isMathToken(token)) {
+            return (_jsx(Formula, { display: token.display, children: token.text }, key));
+        }
+        switch (token.type) {
+            case "text":
+            case "escape": {
+                const nested = inlineTokens(token);
+                // A `text` token carries children only when it contains inline markup; otherwise the
+                // string itself is the whole of it.
+                return nested ? (_jsx("span", { children: renderInline(nested, context, key) }, key)) : (token.text);
+            }
+            case "strong":
+                return _jsx("strong", { children: renderInline(inlineTokens(token), context, key) }, key);
+            case "em":
+                return _jsx("em", { children: renderInline(inlineTokens(token), context, key) }, key);
+            case "del":
+                return _jsx("del", { children: renderInline(inlineTokens(token), context, key) }, key);
+            case "codespan":
+                return _jsx(InlineCode, { children: token.text }, key);
+            case "br":
+                return _jsx("br", {}, key);
+            // The list draws the box itself; this token is the source `[x]` and would double it.
+            case "checkbox":
+                return null;
+            case "link": {
+                const link = token;
+                return (_jsx("a", { href: link.href, title: link.title ?? undefined, target: "_blank", 
+                    // Model output is untrusted: never hand a new tab a live `window.opener`.
+                    rel: "noopener noreferrer nofollow", ...stylex.props(styles.link), children: renderInline(inlineTokens(token), context, key) }, key));
+            }
+            case "image": {
+                const image = token;
+                return (_jsx("img", { src: image.href, alt: image.text, title: image.title ?? undefined, loading: "lazy", ...stylex.props(styles.image) }, key));
+            }
+            // `html` inline: shown as text, never parsed. See renderBlocks.
+            case "html":
+                return _jsx("span", { children: token.raw }, key);
+            default:
+                return _jsx("span", { children: token.raw ?? "" }, key);
+        }
+    });
+}
+/**
+ * A list item's children are a mix: its own sentence arrives as inline tokens, but a nested list
+ * or fenced block is block-level. Sending the whole lot to one renderer is what flattened
+ * "巢狀:\n  1. 第一\n  2. 第二" into a single line.
+ */
+function renderItem(item, context, key) {
+    return item.tokens.map((token, index) => {
+        const childKey = `${key}.${index}`;
+        return token.type === "text" || token.type === "checkbox"
+            ? renderInline([token], context, childKey)
+            : renderBlocks([token], context, childKey);
+    });
+}
+function renderList(token, context, key) {
+    const Tag = token.ordered ? "ol" : "ul";
+    return (_jsx(Tag, { ...(token.ordered && token.start !== "" ? { start: token.start } : {}), ...stylex.props(styles.list), children: token.items.map((item, index) => (_jsxs("li", { ...stylex.props(styles.item), children: [item.task && (
+                // The design system's own box, not a native <input>: that one paints itself in the
+                // OS accent colour and ignores the theme entirely.
+                _jsx(Checkbox, { checked: item.checked ?? false, disabled: true, readOnly: true, "aria-label": item.checked ? "已完成" : "未完成", sx: styles.task })), renderItem(item, context, `${key}.${index}`)] }, `${key}.${index}`))) }, key));
+}
+function renderTable(token, context, key) {
+    return (_jsx("div", { ...stylex.props(styles.tableWrap), children: _jsxs("table", { ...stylex.props(styles.table), children: [_jsx("thead", { children: _jsx("tr", { children: token.header.map((cell, index) => (_jsx("th", { ...stylex.props(styles.cell, styles.head), style: { textAlign: ALIGN[token.align[index] ?? "left"] }, children: renderInline(cell.tokens, context, `${key}.h.${index}`) }, index))) }) }), _jsx("tbody", { children: token.rows.map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, index) => (_jsx("td", { ...stylex.props(styles.cell), style: { textAlign: ALIGN[token.align[index] ?? "left"] }, children: renderInline(cell.tokens, context, `${key}.${rowIndex}.${index}`) }, index))) }, rowIndex))) })] }) }, key));
+}
+function renderBlocks(tokens, context, keyPrefix = "b") {
+    const out = [];
+    tokens.forEach((token, index) => {
+        const key = `${keyPrefix}.${index}`;
+        if (isMathToken(token)) {
+            out.push(_jsx(Formula, { display: true, children: token.text }, key));
+            return;
+        }
+        switch (token.type) {
+            case "space":
+                return;
+            case "paragraph":
+                out.push(_jsx("p", { ...stylex.props(styles.p), children: renderInline(inlineTokens(token), context, key) }, key));
+                return;
+            case "heading": {
+                const heading = token;
+                const level = headingLevel(heading.depth);
+                const Tag = `h${level}`;
+                out.push(_jsx(Tag, { ...stylex.props(styles.heading, styles[Tag]), children: renderInline(inlineTokens(token), context, key) }, key));
+                return;
+            }
+            case "code": {
+                const block = token;
+                const lang = (block.lang ?? "").trim().split(/\s+/)[0] ?? "";
+                const custom = context.renderBlock?.({ lang, code: block.text });
+                out.push(custom !== undefined && custom !== null ? (_jsx("div", { children: custom }, key)) : (_jsx(CodeBlock, { code: block.text, ...(lang ? { lang } : {}), ...(context.copyLabel ? { copyLabel: context.copyLabel } : {}), ...(context.copiedLabel ? { copiedLabel: context.copiedLabel } : {}) }, key)));
+                return;
+            }
+            case "table":
+                out.push(renderTable(token, context, key));
+                return;
+            case "list":
+                out.push(renderList(token, context, key));
+                return;
+            case "blockquote":
+                out.push(_jsx("blockquote", { ...stylex.props(styles.quote), children: renderBlocks(inlineTokens(token) ?? [], context, key) }, key));
+                return;
+            case "hr":
+                out.push(_jsx("hr", { ...stylex.props(styles.rule) }, key));
+                return;
+            case "html":
+                // Never parsed, never injected — the source is shown as code. Markdown from a model is
+                // untrusted input and this package has no sanitiser to lean on, so `<script>` is
+                // something to display, not something to run.
+                out.push(_jsx(CodeBlock, { lang: "html", code: token.raw.trimEnd(), ...(context.copyLabel ? { copyLabel: context.copyLabel } : {}), ...(context.copiedLabel ? { copiedLabel: context.copiedLabel } : {}) }, key));
+                return;
+            case "text": {
+                const nested = inlineTokens(token);
+                out.push(_jsx("p", { ...stylex.props(styles.p), children: nested ? renderInline(nested, context, key) : token.text }, key));
+                return;
+            }
+            // `def` is a link reference definition: it defines, it does not render.
+            default:
+                return;
+        }
+    });
+    return out;
+}
+/** Headings inside a message never go past h3; deeper ones would be smaller than the body. */
+function headingLevel(depth) {
+    return depth <= 1 ? 1 : depth === 2 ? 2 : 3;
+}
+/**
+ * Markdown as a conversation renders it: GFM tables, fenced code, TeX maths, task lists.
+ *
+ * Nothing here goes through `innerHTML`. The markdown is tokenised and every token is turned into
+ * a React element, so a model that emits `<script>` gets its source shown, not run.
+ */
+export function Markdown({ children, renderBlock, copyLabel, copiedLabel, sx, ...rest }) {
+    const tokens = parser.lexer(children);
+    return (_jsx("div", { ...rest, ...styled(rest, styles.root, sx), children: renderBlocks(tokens, { renderBlock, copyLabel, copiedLabel }) }));
+}

package/dist/components/markdown/math.d.ts

@@ -0,0 +1,10 @@
+import type { TokenizerAndRendererExtension, Tokens } from "marked";
+export type MathToken = Tokens.Generic & {
+    type: "math";
+    text: string;
+    display: boolean;
+};
+export declare const mathExtensions: TokenizerAndRendererExtension[];
+export declare function isMathToken(token: {
+    type: string;
+}): token is MathToken;

package/dist/components/markdown/math.js

@@ -0,0 +1,86 @@
+// 數學是 marked 沒有的語法,所以走 extension 自己 tokenize。兩種寫法都收:$…$ / $$…$$ 是
+// TeX 的慣例,\( … \) / \[ … \] 是 LaTeX 自己的,兩種模型都會吐。
+//
+// `$` 的難處在它同時是錢:「$5 到 $10」不是公式。所以開頭的 `$` 後面不能是空白,結尾的
+// `$` 前面不能是空白、後面不能接數字——GitHub 與 KaTeX 的 auto-render 用的是同一組條件。
+const INLINE_DOLLAR = /^\$(?![\s$])((?:\\.|[^\n$\\])+?)(?<!\s)\$(?!\d)/;
+const INLINE_PAREN = /^\\\(([\s\S]+?)\\\)/;
+const BLOCK_DOLLAR = /^\$\$([\s\S]+?)\$\$/;
+const BLOCK_BRACKET = /^\\\[([\s\S]+?)\\\]/;
+function first(src, ...patterns) {
+    for (const pattern of patterns) {
+        const match = pattern.exec(src);
+        if (match)
+            return match;
+    }
+    return null;
+}
+/**
+ * Where the next real match starts.
+ *
+ * This has to be exact, not merely "the next `$`". marked splits the surrounding text token at
+ * whatever index `start` names, and with `breaks: true` a fragment that is left as trailing
+ * whitespace before the split becomes a `<br>` — so pointing at a `$` that turns out to be a
+ * dollar sign inserted line breaks into "從 $5 漲到 $10".
+ */
+function startWith(...patterns) {
+    return (src) => {
+        let at = src.search(/[$\\]/);
+        while (at !== -1) {
+            if (first(src.slice(at), ...patterns))
+                return at;
+            const next = src.slice(at + 1).search(/[$\\]/);
+            if (next === -1)
+                return undefined;
+            at += 1 + next;
+        }
+        return undefined;
+    };
+}
+// The block hint must ignore inline maths. `start` is where marked *cuts*, and a block-level
+// extension cuts the paragraph itself — so pointing at the `$` in "行內數學 $E = mc^2$" split that
+// sentence in half and left the two pieces as separate lines.
+const startBlock = startWith(BLOCK_DOLLAR, BLOCK_BRACKET);
+const startInline = startWith(BLOCK_DOLLAR, BLOCK_BRACKET, INLINE_DOLLAR, INLINE_PAREN);
+export const mathExtensions = [
+    {
+        name: "math",
+        level: "block",
+        start: startBlock,
+        tokenizer(src) {
+            const match = first(src, BLOCK_DOLLAR, BLOCK_BRACKET);
+            if (!match)
+                return undefined;
+            const token = {
+                type: "math",
+                raw: match[0],
+                text: (match[1] ?? "").trim(),
+                display: true,
+            };
+            return token;
+        },
+    },
+    {
+        name: "inlineMath",
+        level: "inline",
+        start: startInline,
+        tokenizer(src) {
+            // A `$$…$$` that sits inside a paragraph is still display maths; the block tokenizer
+            // only ever sees it when it starts its own line.
+            const block = first(src, BLOCK_DOLLAR, BLOCK_BRACKET);
+            const match = block ?? first(src, INLINE_DOLLAR, INLINE_PAREN);
+            if (!match)
+                return undefined;
+            const token = {
+                type: "math",
+                raw: match[0],
+                text: (match[1] ?? "").trim(),
+                display: block !== null,
+            };
+            return token;
+        },
+    },
+];
+export function isMathToken(token) {
+    return token.type === "math";
+}

package/dist/components/text/Text.d.ts

@@ -1,7 +1,9 @@
 import type { ComponentProps, ElementType } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 type TextProps = ComponentProps<"p"> & {
     as?: ElementType;
     variant?: "display" | "title" | "body" | "caption" | "mono";
+    sx?: StyleArg;
 };
-export declare function Text({ as: Tag, variant, ...props }: TextProps): import("react").JSX.Element;
+export declare function Text({ as: Tag, variant, sx, ...props }: TextProps): import("react").JSX.Element;
 export {};

package/dist/components/text/Text.js

@@ -26,6 +26,6 @@ const styles = stylex.create({
     caption: { fontSize: text.sm, color: color.textMuted },
     mono: { fontFamily: font.mono, fontSize: text.sm },
 });
-export function Text({ as: Tag = "p", variant = "body", ...props }) {
-    return _jsx(Tag, { ...props, ...styled(props, styles.base, styles[variant]) });
+export function Text({ as: Tag = "p", variant = "body", sx, ...props }) {
+    return _jsx(Tag, { ...props, ...styled(props, styles.base, styles[variant], sx) });
 }

package/dist/index.d.ts

@@ -53,3 +53,5 @@ export type { FileRowProps, FileListProps, FileItem, FileRowAction } from "./com
 export { DiffViewer, type DiffViewerProps, type DiffFile } from "./components/diff-viewer/DiffViewer.js";
 export { DataTable } from "./components/data-table/DataTable.js";
 export type { DataTableProps, DataTableColumn, SortState } from "./components/data-table/DataTable.js";
+export { Markdown, type MarkdownProps, type MarkdownBlock } from "./components/markdown/Markdown.js";
+export { Formula, type FormulaProps } from "./components/markdown/Formula.js";

package/dist/index.js

@@ -36,3 +36,5 @@ export { Dropzone, UploadList } from "./components/dropzone/Dropzone.js";
 export { FileRow, FileList } from "./components/file-row/FileRow.js";
 export { DiffViewer } from "./components/diff-viewer/DiffViewer.js";
 export { DataTable } from "./components/data-table/DataTable.js";
+export { Markdown } from "./components/markdown/Markdown.js";
+export { Formula } from "./components/markdown/Formula.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@anyknown/ui",
-	"version": "0.4.1",
-	"description": "AnyKnown design system — StyleX tokens, themes, and 34 components",
+	"version": "0.5.0",
+	"description": "AnyKnown design system — StyleX tokens, themes, and 36 components",
 	"homepage": "https://ui.anyknown.com",
 	"bugs": {
 		"url": "https://github.com/anyknown-com/ui/issues"
@@ -56,7 +56,9 @@
 	"dependencies": {
 		"@base-ui/react": "^1.7.0",
 		"@stylexjs/stylex": "^0.19.0",
-		"diff": "^9.0.0"
+		"diff": "^9.0.0",
+		"marked": "^18.0.11",
+		"temml": "^0.13.5"
 	},
 	"devDependencies": {
 		"@babel/core": "^8.0.1",
@@ -73,7 +75,6 @@
 		"@vitest/coverage-v8": "^4.1.11",
 		"autoprefixer": "^10.5.4",
 		"jsdom": "^30.0.1",
-		"marked": "^18.0.11",
 		"oxfmt": "^0.65.0",
 		"oxlint": "^1.80.0",
 		"postcss": "^8.5.26",