@humanspeak/svelte-markdown 1.4.1 → 1.4.2

package/README.md

@@ -356,22 +356,34 @@ Both approaches work for any tag name. Snippet overrides take precedence over co
 
 ## Marked Extensions
 
-Use third-party [marked extensions](https://marked.js.org/using_advanced#extensions) via the `extensions` prop. The component handles registering tokenizers internally — you just provide renderers for the custom token types.
+Use [marked extensions](https://marked.js.org/using_advanced#extensions) via the `extensions` prop. SvelteMarkdown ships first-class extensions for KaTeX, Mermaid, GitHub-style alerts, and footnotes from the `@humanspeak/svelte-markdown/extensions` subpath — no third-party packages required. Third-party extensions still work too; the component handles registering tokenizers internally and you just provide renderers for the custom token types.
 
 ### KaTeX Math Rendering
 
+The package includes built-in `markedKatex` and `KatexRenderer` helpers. Install `katex` as an optional peer dependency and load its CSS:
+
 ```bash
-npm install marked-katex-extension katex
+npm install katex
 ```
 
+**Default delimiter set** (mirrors KaTeX's own [`auto-render`](https://katex.org/docs/autorender.html) defaults):
+
+| Delimiter pair                                                 | Level  | `displayMode` |
+| -------------------------------------------------------------- | ------ | ------------- |
+| `\(...\)`                                                      | inline | `false`       |
+| `\[...\]` (own-line)                                           | block  | `true`        |
+| `$$...$$` (own-line)                                           | block  | `true`        |
+| `\begin{equation}...\end{equation}` and other AMS environments | block  | `true`        |
+
+Single-dollar inline (`$x^2$`) is **off** by default — KaTeX itself excludes it from auto-render to avoid currency-string clashes like `$5,000`. Pass `{ singleDollarInline: true }` to enable it; it uses a whitespace-bounded rule so currency strings still won't match.
+
 **Component renderer approach:**
 
 ```svelte
 <script lang="ts">
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
     import type { RendererComponent, Renderers } from '@humanspeak/svelte-markdown'
-    import markedKatex from 'marked-katex-extension'
-    import KatexRenderer from './KatexRenderer.svelte'
+    import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'
 
     interface KatexRenderers extends Renderers {
         inlineKatex: RendererComponent
@@ -385,56 +397,45 @@ npm install marked-katex-extension katex
 </script>
 
 <svelte:head>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.28/dist/katex.min.css" crossorigin="anonymous" />
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/katex@0.16.45/dist/katex.min.css"
+        crossorigin="anonymous"
+    />
 </svelte:head>
 
 <SvelteMarkdown
-    source="Euler's identity: $e^{{i\pi}} + 1 = 0$"
-    extensions={[markedKatex({ throwOnError: false })]}
+    source={`Euler's identity: \\(e^{i\\pi} + 1 = 0\\)`}
+    extensions={[markedKatex()]}
     {renderers}
 />
 ```
 
-Where `KatexRenderer.svelte` is:
-
-```svelte
-<script lang="ts">
-    import katex from 'katex'
-
-    interface Props {
-        text: string
-        displayMode?: boolean
-    }
-    const { text, displayMode = false }: Props = $props()
-
-    const html = $derived(katex.renderToString(text, { throwOnError: false, displayMode }))
-</script>
-
-{@html html}
-```
+`KatexRenderer` hardcodes `throwOnError: false` so a single malformed expression renders as a tinted error span instead of throwing — if you need stricter behavior, supply your own component for the `inlineKatex` / `blockKatex` keys.
 
 **Snippet override approach** (no separate component file needed):
 
 ```svelte
 <script lang="ts">
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
+    import { markedKatex } from '@humanspeak/svelte-markdown/extensions'
     import katex from 'katex'
-    import markedKatex from 'marked-katex-extension'
 </script>
 
 <svelte:head>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.28/dist/katex.min.css" crossorigin="anonymous" />
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/katex@0.16.45/dist/katex.min.css"
+        crossorigin="anonymous"
+    />
 </svelte:head>
 
-<SvelteMarkdown
-    source="Euler's identity: $e^{{i\pi}} + 1 = 0$"
-    extensions={[markedKatex({ throwOnError: false })]}
->
+<SvelteMarkdown source={`Euler's identity: \\(e^{i\\pi} + 1 = 0\\)`} extensions={[markedKatex()]}>
     {#snippet inlineKatex(props)}
-        {@html katex.renderToString(props.text, { displayMode: false })}
+        {@html katex.renderToString(props.text, { throwOnError: false, displayMode: false })}
     {/snippet}
     {#snippet blockKatex(props)}
-        {@html katex.renderToString(props.text, { displayMode: true })}
+        {@html katex.renderToString(props.text, { throwOnError: false, displayMode: true })}
     {/snippet}
 </SvelteMarkdown>
 ```
@@ -575,7 +576,7 @@ Marked extensions define custom token types with a `name` property (e.g., `inlin
 To find the token type names for any extension, check its source or documentation for the `name` field in its `extensions` array:
 
 ```js
-// Example: marked-katex-extension registers tokens named "inlineKatex" and "blockKatex"
+// Example: markedKatex (built-in) registers tokens named "inlineKatex" and "blockKatex"
 // → use renderers={{ inlineKatex: ..., blockKatex: ... }}
 // → or {#snippet inlineKatex(props)} and {#snippet blockKatex(props)}
 

package/dist/extensions/index.d.ts

@@ -7,6 +7,7 @@
  * import { markedMermaid, MermaidRenderer } from '@humanspeak/svelte-markdown/extensions'
  * import { markedAlert, AlertRenderer } from '@humanspeak/svelte-markdown/extensions'
  * import { markedFootnote, FootnoteRef, FootnoteSection } from '@humanspeak/svelte-markdown/extensions'
+ * import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'
  * ```
  *
  * @module @humanspeak/svelte-markdown/extensions
@@ -14,4 +15,6 @@
 export { AlertRenderer, markedAlert } from './alert/index.js';
 export type { AlertType } from './alert/index.js';
 export { FootnoteRef, FootnoteSection, markedFootnote } from './footnote/index.js';
+export { BLOCK_KATEX_TOKEN, INLINE_KATEX_TOKEN, KatexRenderer, markedKatex } from './katex/index.js';
+export type { MarkedKatexOptions } from './katex/index.js';
 export { MermaidRenderer, markedMermaid } from './mermaid/index.js';

package/dist/extensions/index.js

@@ -7,10 +7,12 @@
  * import { markedMermaid, MermaidRenderer } from '@humanspeak/svelte-markdown/extensions'
  * import { markedAlert, AlertRenderer } from '@humanspeak/svelte-markdown/extensions'
  * import { markedFootnote, FootnoteRef, FootnoteSection } from '@humanspeak/svelte-markdown/extensions'
+ * import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'
  * ```
  *
  * @module @humanspeak/svelte-markdown/extensions
  */
 export { AlertRenderer, markedAlert } from './alert/index.js';
 export { FootnoteRef, FootnoteSection, markedFootnote } from './footnote/index.js';
+export { BLOCK_KATEX_TOKEN, INLINE_KATEX_TOKEN, KatexRenderer, markedKatex } from './katex/index.js';
 export { MermaidRenderer, markedMermaid } from './mermaid/index.js';

package/dist/extensions/katex/KatexRenderer.svelte

@@ -0,0 +1,40 @@
+<!--
+@component
+Renders an `inlineKatex` or `blockKatex` token (produced by {@link markedKatex})
+to KaTeX HTML.
+
+Pair with the matching extension via the `renderers` prop:
+
+```svelte
+<SvelteMarkdown
+  source={markdown}
+  extensions={[markedKatex()]}
+  renderers={{ inlineKatex: KatexRenderer, blockKatex: KatexRenderer }}
+/>
+```
+
+Requires `katex` to be installed (it's an optional peer dependency of
+`@humanspeak/svelte-markdown`) and `katex/dist/katex.css` to be loaded — either
+imported directly or pulled in via the CDN tag KaTeX recommends.
+
+Hardcodes `throwOnError: false` so a single malformed expression renders as a
+red KaTeX error span instead of throwing. If you need stricter behavior, pass
+your own component for `inlineKatex` / `blockKatex` instead.
+-->
+<script lang="ts">
+    import katex from 'katex'
+
+    interface Props {
+        /** TeX/LaTeX source to render. Token's inner content for delimiter pairs, or the full `\begin{env}...\end{env}` string for AMS environments. */
+        text: string
+        /** When `true`, render in display style (block); otherwise inline. */
+        displayMode?: boolean
+    }
+
+    const { text, displayMode = false }: Props = $props()
+
+    const html = $derived(katex.renderToString(text, { throwOnError: false, displayMode }))
+</script>
+
+<!-- trunk-ignore(eslint/svelte/no-at-html-tags) -->
+{@html html}

package/dist/extensions/katex/KatexRenderer.svelte.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    /** TeX/LaTeX source to render. Token's inner content for delimiter pairs, or the full `\begin{env}...\end{env}` string for AMS environments. */
+    text: string;
+    /** When `true`, render in display style (block); otherwise inline. */
+    displayMode?: boolean;
+}
+/**
+ * Renders an `inlineKatex` or `blockKatex` token (produced by {@link markedKatex})
+ * to KaTeX HTML.
+ *
+ * Pair with the matching extension via the `renderers` prop:
+ *
+ * ```svelte
+ * <SvelteMarkdown
+ * source={markdown}
+ * extensions={[markedKatex()]}
+ * renderers={{ inlineKatex: KatexRenderer, blockKatex: KatexRenderer }}
+ * />
+ * ```
+ *
+ * Requires `katex` to be installed (it's an optional peer dependency of
+ * `@humanspeak/svelte-markdown`) and `katex/dist/katex.css` to be loaded — either
+ * imported directly or pulled in via the CDN tag KaTeX recommends.
+ *
+ * Hardcodes `throwOnError: false` so a single malformed expression renders as a
+ * red KaTeX error span instead of throwing. If you need stricter behavior, pass
+ * your own component for `inlineKatex` / `blockKatex` instead.
+ */
+declare const KatexRenderer: import("svelte").Component<Props, {}, "">;
+type KatexRenderer = ReturnType<typeof KatexRenderer>;
+export default KatexRenderer;

package/dist/extensions/katex/index.d.ts

@@ -0,0 +1,3 @@
+export { default as KatexRenderer } from './KatexRenderer.svelte';
+export { BLOCK_KATEX_TOKEN, INLINE_KATEX_TOKEN, markedKatex } from './markedKatex.js';
+export type { MarkedKatexOptions } from './markedKatex.js';

package/dist/extensions/katex/index.js

@@ -0,0 +1,2 @@
+export { default as KatexRenderer } from './KatexRenderer.svelte';
+export { BLOCK_KATEX_TOKEN, INLINE_KATEX_TOKEN, markedKatex } from './markedKatex.js';

package/dist/extensions/katex/markedKatex.d.ts

@@ -0,0 +1,70 @@
+import type { MarkedExtension } from 'marked';
+/** Token type emitted for inline math (`\(...\)`, opt-in `$...$`). */
+export declare const INLINE_KATEX_TOKEN = "inlineKatex";
+/** Token type emitted for block math (`\[...\]`, `$$...$$`, AMS environments). */
+export declare const BLOCK_KATEX_TOKEN = "blockKatex";
+/**
+ * Options for the {@link markedKatex} factory.
+ */
+export interface MarkedKatexOptions {
+    /**
+     * When `true`, also tokenize `$...$` (inline) and `$$...$$` (inline) as
+     * math, using the standard whitespace-boundary rule that prevents
+     * currency strings like `$5,000` from being parsed as a math expression.
+     *
+     * Off by default. KaTeX's own `auto-render` extension excludes `$...$`
+     * from its defaults with the comment "LaTeX uses $…$, but it ruins the
+     * display of normal `$` in text" — we follow the same opinion.
+     *
+     * Block-level `$$...$$` (own-line delimiters) is always enabled, and is
+     * unaffected by this option.
+     *
+     * @defaultValue `false`
+     */
+    singleDollarInline?: boolean;
+}
+/**
+ * Creates a marked extension that tokenizes KaTeX math expressions into
+ * custom `inlineKatex` and `blockKatex` tokens.
+ *
+ * Default delimiter set (mirrors KaTeX's own `auto-render` defaults):
+ *
+ * | Delimiter pair | Level | `displayMode` |
+ * |---|---|---|
+ * | `\(...\)` | inline | `false` |
+ * | `\[...\]` (own-line) | block | `true` |
+ * | `$$...$$` (own-line) | block | `true` |
+ * | `\begin{equation}...\end{equation}` and other AMS envs | block | `true` |
+ *
+ * Supported AMS environments: `equation`, `align`, `alignat`, `gather`, `CD`,
+ * plus their starred variants (e.g. `equation*`).
+ *
+ * `$...$` inline is **off** by default — KaTeX itself opts out of single-
+ * dollar inline because of currency-string clashes (`$5,000` etc.). Pass
+ * `{ singleDollarInline: true }` to enable it; when enabled it uses the
+ * whitespace-boundary rule from upstream `marked-katex-extension` so
+ * currency strings still won't match.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import SvelteMarkdown from '@humanspeak/svelte-markdown'
+ *   import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'
+ *
+ *   const renderers = { inlineKatex: KatexRenderer, blockKatex: KatexRenderer }
+ * </script>
+ *
+ * <SvelteMarkdown
+ *   source={markdown}
+ *   extensions={[markedKatex()]}
+ *   {renderers}
+ * />
+ * ```
+ *
+ * Pair with `KatexRenderer` from the same subpath, or supply your own
+ * component that accepts `{ text: string; displayMode?: boolean }`.
+ *
+ * @param options - {@link MarkedKatexOptions}
+ * @returns A `MarkedExtension` containing one block-level and one inline tokenizer
+ */
+export declare function markedKatex(options?: MarkedKatexOptions): MarkedExtension;

package/dist/extensions/katex/markedKatex.js

@@ -0,0 +1,159 @@
+/** Token type emitted for inline math (`\(...\)`, opt-in `$...$`). */
+export const INLINE_KATEX_TOKEN = 'inlineKatex';
+/** Token type emitted for block math (`\[...\]`, `$$...$$`, AMS environments). */
+export const BLOCK_KATEX_TOKEN = 'blockKatex';
+const AMS_ENVIRONMENTS = ['equation', 'align', 'alignat', 'gather', 'CD'];
+// `\\*` in the JS string becomes `\*` in the regex source, which matches a
+// literal `*` (the AMS un-numbered variant). Without the escape, `equation*`
+// in a regex would mean "equatio + zero-or-more n", which silently fails to
+// match `\begin{equation*}`.
+const AMS_NAMES = AMS_ENVIRONMENTS.flatMap((n) => [n, `${n}\\*`]).join('|');
+const blockBracketRule = /^\\\[[ \t]*\n([\s\S]+?)\n[ \t]*\\\](?:\n|$)/;
+const blockDollarRule = /^\$\$[ \t]*\n([\s\S]+?)\n[ \t]*\$\$(?:\n|$)/;
+const blockAmsRule = new RegExp(`^\\\\begin\\{(${AMS_NAMES})\\}[\\s\\S]+?\\\\end\\{\\1\\}(?:\\n|$)?`);
+const inlineParenRule = /^\\\(([\s\S]+?)\\\)/;
+// Mirrors the "standard" rule from upstream marked-katex-extension: requires a
+// whitespace, end-of-string, or punctuation boundary after the closing `$` so
+// strings like `$5,000` do not match.
+const inlineDollarRule = /^\$(?!\$)((?:\\.|[^\\\n$])+?)\$(?=[\s?!.,:？！。，：]|$)/;
+const earliestIndex = (src, needles) => {
+    let best = -1;
+    for (const needle of needles) {
+        const i = src.indexOf(needle);
+        if (i !== -1 && (best === -1 || i < best))
+            best = i;
+    }
+    return best === -1 ? undefined : best;
+};
+/**
+ * Creates a marked extension that tokenizes KaTeX math expressions into
+ * custom `inlineKatex` and `blockKatex` tokens.
+ *
+ * Default delimiter set (mirrors KaTeX's own `auto-render` defaults):
+ *
+ * | Delimiter pair | Level | `displayMode` |
+ * |---|---|---|
+ * | `\(...\)` | inline | `false` |
+ * | `\[...\]` (own-line) | block | `true` |
+ * | `$$...$$` (own-line) | block | `true` |
+ * | `\begin{equation}...\end{equation}` and other AMS envs | block | `true` |
+ *
+ * Supported AMS environments: `equation`, `align`, `alignat`, `gather`, `CD`,
+ * plus their starred variants (e.g. `equation*`).
+ *
+ * `$...$` inline is **off** by default — KaTeX itself opts out of single-
+ * dollar inline because of currency-string clashes (`$5,000` etc.). Pass
+ * `{ singleDollarInline: true }` to enable it; when enabled it uses the
+ * whitespace-boundary rule from upstream `marked-katex-extension` so
+ * currency strings still won't match.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import SvelteMarkdown from '@humanspeak/svelte-markdown'
+ *   import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'
+ *
+ *   const renderers = { inlineKatex: KatexRenderer, blockKatex: KatexRenderer }
+ * </script>
+ *
+ * <SvelteMarkdown
+ *   source={markdown}
+ *   extensions={[markedKatex()]}
+ *   {renderers}
+ * />
+ * ```
+ *
+ * Pair with `KatexRenderer` from the same subpath, or supply your own
+ * component that accepts `{ text: string; displayMode?: boolean }`.
+ *
+ * @param options - {@link MarkedKatexOptions}
+ * @returns A `MarkedExtension` containing one block-level and one inline tokenizer
+ */
+export function markedKatex(options = {}) {
+    const { singleDollarInline = false } = options;
+    // The token-cache hash serializes functions via `fn.toString()`, which
+    // can't see option values that live in a closure (our tokenizers'
+    // source code is identical regardless of `singleDollarInline`). This
+    // marker makes the option visible to JSON.stringify so two
+    // `markedKatex({ ... })` calls with different options produce
+    // different cache keys — without it, toggling the option at runtime
+    // returns stale tokens. Cast because `MarkedExtension` doesn't permit
+    // arbitrary fields, but Marked.use() shallow-spreads our object into
+    // `defaults`, so the marker survives.
+    const ext = {
+        _humanspeakKatexConfig: JSON.stringify({ singleDollarInline }),
+        extensions: [
+            {
+                name: BLOCK_KATEX_TOKEN,
+                level: 'block',
+                start(src) {
+                    return earliestIndex(src, ['\\[', '$$', '\\begin{']);
+                },
+                tokenizer(src) {
+                    const bracket = src.match(blockBracketRule);
+                    if (bracket) {
+                        return {
+                            type: BLOCK_KATEX_TOKEN,
+                            raw: bracket[0],
+                            text: bracket[1].trim(),
+                            displayMode: true
+                        };
+                    }
+                    const dollar = src.match(blockDollarRule);
+                    if (dollar) {
+                        return {
+                            type: BLOCK_KATEX_TOKEN,
+                            raw: dollar[0],
+                            text: dollar[1].trim(),
+                            displayMode: true
+                        };
+                    }
+                    const ams = src.match(blockAmsRule);
+                    if (ams) {
+                        // KaTeX parses `\begin{...}...\end{...}` natively, so
+                        // pass the entire matched string through as `text`.
+                        return {
+                            type: BLOCK_KATEX_TOKEN,
+                            raw: ams[0],
+                            text: ams[0].replace(/\n$/, '').trim(),
+                            displayMode: true
+                        };
+                    }
+                }
+            },
+            {
+                name: INLINE_KATEX_TOKEN,
+                level: 'inline',
+                start(src) {
+                    const needles = ['\\('];
+                    if (singleDollarInline)
+                        needles.push('$');
+                    return earliestIndex(src, needles);
+                },
+                tokenizer(src) {
+                    const paren = src.match(inlineParenRule);
+                    if (paren) {
+                        return {
+                            type: INLINE_KATEX_TOKEN,
+                            raw: paren[0],
+                            text: paren[1].trim(),
+                            displayMode: false
+                        };
+                    }
+                    if (singleDollarInline) {
+                        const dollar = src.match(inlineDollarRule);
+                        if (dollar) {
+                            return {
+                                type: INLINE_KATEX_TOKEN,
+                                raw: dollar[0],
+                                text: dollar[1].trim(),
+                                displayMode: false
+                            };
+                        }
+                    }
+                }
+            }
+        ]
+    };
+    return ext;
+}

package/dist/types.d.ts

@@ -204,9 +204,13 @@ export type SvelteMarkdownProps<T extends Renderers = Renderers> = {
      *
      * @example
      * ```svelte
+     * <script lang="ts">
+     *   import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'
+     * </script>
+     *
      * <SvelteMarkdown
      *   source={markdown}
-     *   extensions={[markedKatex({ throwOnError: false })]}
+     *   extensions={[markedKatex()]}
      *   renderers={{ inlineKatex: KatexRenderer, blockKatex: KatexRenderer }}
      * />
      * ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-markdown",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Fast, customizable markdown renderer for Svelte with built-in caching, TypeScript support, and Svelte 5 runes",
   "keywords": [
     "svelte",
@@ -70,60 +70,63 @@
     "@humanspeak/memory-cache": "^1.0.6",
     "github-slugger": "^2.0.0",
     "htmlparser2": "^12.0.0",
-    "marked": "^18.0.0"
+    "marked": "^18.0.3"
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.5",
     "@eslint/js": "^10.0.1",
-    "@playwright/cli": "^0.1.6",
+    "@playwright/cli": "^0.1.11",
     "@playwright/test": "^1.59.1",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/kit": "^2.59.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/katex": "^0.16.8",
-    "@types/node": "^25.5.2",
-    "@typescript-eslint/eslint-plugin": "^8.58.1",
-    "@typescript-eslint/parser": "^8.58.1",
-    "@vitest/coverage-v8": "^4.1.4",
-    "eslint": "^10.2.0",
+    "@types/node": "^25.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
+    "@vitest/coverage-v8": "^4.1.5",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-svelte": "^3.17.0",
+    "eslint-plugin-svelte": "^3.17.1",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "globals": "^17.4.0",
+    "globals": "^17.6.0",
     "husky": "^9.1.7",
-    "jsdom": "^29.0.2",
+    "jsdom": "^29.1.1",
     "katex": "^0.16.45",
-    "marked-katex-extension": "^5.1.8",
     "mermaid": "^11.14.0",
     "mprocs": "^0.9.2",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-svelte": "^3.5.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
+    "prettier-plugin-tailwindcss": "^0.8.0",
     "publint": "^0.3.18",
-    "svelte": "^5.55.2",
-    "svelte-check": "^4.4.6",
-    "typescript": "^6.0.2",
-    "typescript-eslint": "^8.58.1",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.4"
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.7",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5"
   },
   "peerDependencies": {
+    "katex": ">=0.16.0",
     "mermaid": ">=10.0.0",
     "svelte": "^5.0.0"
   },
   "peerDependenciesMeta": {
+    "katex": {
+      "optional": true
+    },
     "mermaid": {
       "optional": true
     }
   },
   "volta": {
-    "node": "24.14.0"
+    "node": "24.15.0"
   },
   "publishConfig": {
     "access": "public"