@humanspeak/svelte-markdown 1.0.3 → 1.0.5

package/README.md

@@ -485,6 +485,88 @@ You can also use snippet overrides to wrap `MermaidRenderer` with custom markup:
 
 Since Mermaid rendering is async, the snippet delegates to `MermaidRenderer` rather than calling `mermaid.render()` directly. This pattern works for any async extension — keep the async logic in a component and use the snippet for layout customization.
 
+### GitHub Alerts
+
+Built-in support for [GitHub-style alerts/admonitions](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts). Five alert types are supported: `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, and `CAUTION`.
+
+```svelte
+<script lang="ts">
+    import SvelteMarkdown from '@humanspeak/svelte-markdown'
+    import type { RendererComponent, Renderers } from '@humanspeak/svelte-markdown'
+    import { markedAlert, AlertRenderer } from '@humanspeak/svelte-markdown/extensions'
+
+    const source = `
+> [!NOTE]
+> Useful information that users should know.
+
+> [!WARNING]
+> Urgent info that needs immediate attention.
+`
+
+    interface AlertRenderers extends Renderers {
+        alert: RendererComponent
+    }
+
+    const renderers: Partial<AlertRenderers> = {
+        alert: AlertRenderer
+    }
+</script>
+
+<SvelteMarkdown {source} extensions={[markedAlert()]} {renderers} />
+```
+
+`AlertRenderer` renders a `<div class="markdown-alert markdown-alert-{type}">` with a title — no inline styles, so you can theme it with your own CSS. You can also use snippet overrides:
+
+```svelte
+<SvelteMarkdown source={markdown} extensions={[markedAlert()]}>
+    {#snippet alert(props)}
+        <div class="my-alert my-alert-{props.alertType}">
+            <strong>{props.alertType}</strong>
+            <p>{props.text}</p>
+        </div>
+    {/snippet}
+</SvelteMarkdown>
+```
+
+### Footnotes
+
+Built-in support for footnote references and definitions. Footnote references (`[^id]`) render as superscript links, and definitions (`[^id]: content`) render as a numbered list at the end of the document with back-links.
+
+```svelte
+<script lang="ts">
+    import SvelteMarkdown from '@humanspeak/svelte-markdown'
+    import type { RendererComponent, Renderers } from '@humanspeak/svelte-markdown'
+    import {
+        markedFootnote,
+        FootnoteRef,
+        FootnoteSection
+    } from '@humanspeak/svelte-markdown/extensions'
+
+    const source = `
+Here is a statement[^1] with a footnote.
+
+Another claim[^note] that needs a source.
+
+[^1]: This is the first footnote.
+[^note]: This is a named footnote.
+`
+
+    interface FootnoteRenderers extends Renderers {
+        footnoteRef: RendererComponent
+        footnoteSection: RendererComponent
+    }
+
+    const renderers: Partial<FootnoteRenderers> = {
+        footnoteRef: FootnoteRef,
+        footnoteSection: FootnoteSection
+    }
+</script>
+
+<SvelteMarkdown {source} extensions={[markedFootnote()]} {renderers} />
+```
+
+`FootnoteRef` renders `<sup><a href="#fn-{id}">{id}</a></sup>` and `FootnoteSection` renders an `<ol>` with bidirectional links (ref to definition and back). You can also use snippet overrides for custom rendering.
+
 ### How It Works
 
 Marked extensions define custom token types with a `name` property (e.g., `inlineKatex`, `blockKatex`, `alert`). When you pass extensions via the `extensions` prop, SvelteMarkdown automatically extracts these token type names and makes them available as both **component renderer keys** and **snippet override names**.

package/dist/Parser.svelte

@@ -56,6 +56,9 @@
         RendererComponent
     } from './utils/markdown-parser.js'
 
+    // trunk-ignore(eslint/@typescript-eslint/no-explicit-any)
+    type AnySnippet = (..._args: any[]) => any
+
     interface Props<T extends Renderers = Renderers> {
         type?: string
         tokens?: Token[] | TokensList
@@ -63,8 +66,8 @@
         rows?: Tokens.TableCell[][]
         ordered?: boolean
         renderers: T
-        snippetOverrides?: Record<string, any> // trunk-ignore(eslint/@typescript-eslint/no-explicit-any)
-        htmlSnippetOverrides?: Record<string, any> // trunk-ignore(eslint/@typescript-eslint/no-explicit-any)
+        snippetOverrides?: Record<string, AnySnippet>
+        htmlSnippetOverrides?: Record<string, AnySnippet>
     }
 
     const {
@@ -121,14 +124,14 @@
                                 {#if cellSnippet}
                                     {@render cellSnippet({
                                         header: true,
-                                        align: (rest.align as string[])[i],
+                                        align: (rest.align as string[] | undefined)?.[i] ?? null,
                                         ...cellRest,
                                         children: headerCellContent
                                     })}
                                 {:else}
                                     <renderers.tablecell
                                         header={true}
-                                        align={(rest.align as string[])[i]}
+                                        align={(rest.align as string[] | undefined)?.[i] ?? null}
                                         {...cellRest}
                                     >
                                         {@render headerCellContent()}
@@ -172,7 +175,8 @@
                                     {#if cellSnippet}
                                         {@render cellSnippet({
                                             header: false,
-                                            align: (rest.align as string[])[j],
+                                            align:
+                                                (rest.align as string[] | undefined)?.[j] ?? null,
                                             ...cellRest,
                                             children: bodyCellContent
                                         })}
@@ -180,7 +184,8 @@
                                         <renderers.tablecell
                                             {...cellRest}
                                             header={false}
-                                            align={(rest.align as string[])[j]}
+                                            align={(rest.align as string[] | undefined)?.[j] ??
+                                                null}
                                         >
                                             {@render bodyCellContent()}
                                         </renderers.tablecell>

package/dist/Parser.svelte.d.ts

@@ -46,6 +46,7 @@
      */
 import Parser from './Parser.svelte';
 import type { Renderers, Token, TokensList, Tokens } from './utils/markdown-parser.js';
+type AnySnippet = (..._args: any[]) => any;
 interface Props<T extends Renderers = Renderers> {
     type?: string;
     tokens?: Token[] | TokensList;
@@ -53,8 +54,8 @@ interface Props<T extends Renderers = Renderers> {
     rows?: Tokens.TableCell[][];
     ordered?: boolean;
     renderers: T;
-    snippetOverrides?: Record<string, any>;
-    htmlSnippetOverrides?: Record<string, any>;
+    snippetOverrides?: Record<string, AnySnippet>;
+    htmlSnippetOverrides?: Record<string, AnySnippet>;
 }
 type $$ComponentProps = Props & {
     [key: string]: unknown;

package/dist/SvelteMarkdown.svelte

@@ -62,6 +62,9 @@
     import { rendererKeysInternal } from './utils/rendererKeys.js'
     import { Marked } from 'marked'
 
+    // trunk-ignore(eslint/@typescript-eslint/no-explicit-any)
+    type AnySnippet = (..._args: any[]) => any
+
     const {
         source = [],
         renderers = {},
@@ -174,7 +177,7 @@
             allRendererKeys
                 .filter((key) => key in rest && rest[key] != null)
                 .map((key) => [key, rest[key]])
-        )
+        ) as Record<string, AnySnippet>
     )
 
     // Collect HTML snippet overrides (keys matching html_<tag>)
@@ -183,7 +186,7 @@
             Object.entries(rest)
                 .filter(([key, val]) => key.startsWith('html_') && val != null)
                 .map(([key, val]) => [key.slice(5), val])
-        )
+        ) as Record<string, AnySnippet>
     )
 
     // Passthrough: everything that isn't a known snippet override
@@ -199,7 +202,7 @@
     {tokens}
     {...passThroughProps}
     options={combinedOptions}
-    slug={(val: string): string => (slugger ? slugger.slug(val) : '')}
+    slug={(val: string): string => slugger.slug(val)}
     renderers={combinedRenderers}
     {snippetOverrides}
     {htmlSnippetOverrides}

package/dist/extensions/alert/AlertRenderer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { AlertType } from './markedAlert.js'
+
+    interface Props {
+        text: string
+        alertType: AlertType
+    }
+
+    const { text, alertType }: Props = $props()
+
+    const titles: Record<AlertType, string> = {
+        note: 'Note',
+        tip: 'Tip',
+        important: 'Important',
+        warning: 'Warning',
+        caution: 'Caution'
+    }
+</script>
+
+<div class="markdown-alert markdown-alert-{alertType}" role="note">
+    <p class="markdown-alert-title">{titles[alertType]}</p>
+    <p>{text}</p>
+</div>

package/dist/extensions/alert/AlertRenderer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { AlertType } from './markedAlert.js';
+interface Props {
+    text: string;
+    alertType: AlertType;
+}
+declare const AlertRenderer: import("svelte").Component<Props, {}, "">;
+type AlertRenderer = ReturnType<typeof AlertRenderer>;
+export default AlertRenderer;

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

@@ -0,0 +1,3 @@
+export { default as AlertRenderer } from './AlertRenderer.svelte';
+export { markedAlert } from './markedAlert.js';
+export type { AlertType } from './markedAlert.js';

package/dist/extensions/alert/index.js

@@ -0,0 +1,2 @@
+export { default as AlertRenderer } from './AlertRenderer.svelte';
+export { markedAlert } from './markedAlert.js';

package/dist/extensions/alert/markedAlert.d.ts

@@ -0,0 +1,37 @@
+import type { MarkedExtension } from 'marked';
+/**
+ * Valid GitHub-style alert types.
+ *
+ * @see https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
+ */
+export type AlertType = 'note' | 'tip' | 'important' | 'warning' | 'caution';
+/**
+ * Creates a marked extension that tokenizes GitHub-style alert blockquotes
+ * into custom `alert` tokens.
+ *
+ * The extension produces block-level tokens with
+ * `{ type: 'alert', raw, text, alertType }` where `alertType` is one of
+ * `note`, `tip`, `important`, `warning`, or `caution`, and `text` is the
+ * alert body with leading `> ` stripped.
+ *
+ * Pair it with `AlertRenderer` (or your own component) to render the alerts.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import SvelteMarkdown from '@humanspeak/svelte-markdown'
+ *   import { markedAlert, AlertRenderer } from '@humanspeak/svelte-markdown/extensions'
+ *
+ *   const renderers = { alert: AlertRenderer }
+ * </script>
+ *
+ * <SvelteMarkdown
+ *   source={markdown}
+ *   extensions={[markedAlert()]}
+ *   {renderers}
+ * />
+ * ```
+ *
+ * @returns A `MarkedExtension` with a single block-level `alert` tokenizer
+ */
+export declare function markedAlert(): MarkedExtension;

package/dist/extensions/alert/markedAlert.js

@@ -0,0 +1,62 @@
+const ALERT_TYPES = new Set(['note', 'tip', 'important', 'warning', 'caution']);
+/**
+ * Creates a marked extension that tokenizes GitHub-style alert blockquotes
+ * into custom `alert` tokens.
+ *
+ * The extension produces block-level tokens with
+ * `{ type: 'alert', raw, text, alertType }` where `alertType` is one of
+ * `note`, `tip`, `important`, `warning`, or `caution`, and `text` is the
+ * alert body with leading `> ` stripped.
+ *
+ * Pair it with `AlertRenderer` (or your own component) to render the alerts.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import SvelteMarkdown from '@humanspeak/svelte-markdown'
+ *   import { markedAlert, AlertRenderer } from '@humanspeak/svelte-markdown/extensions'
+ *
+ *   const renderers = { alert: AlertRenderer }
+ * </script>
+ *
+ * <SvelteMarkdown
+ *   source={markdown}
+ *   extensions={[markedAlert()]}
+ *   {renderers}
+ * />
+ * ```
+ *
+ * @returns A `MarkedExtension` with a single block-level `alert` tokenizer
+ */
+export function markedAlert() {
+    return {
+        extensions: [
+            {
+                name: 'alert',
+                level: 'block',
+                start(src) {
+                    return src.match(/>\s*\[!/)?.index;
+                },
+                tokenizer(src) {
+                    const match = src.match(/^(?:>\s*\[!(\w+)\]\n)((?:[^\n]*(?:\n(?:>\s?)[^\n]*)*)?)(?:\n|$)/);
+                    if (match) {
+                        const alertType = match[1].toLowerCase();
+                        if (!ALERT_TYPES.has(alertType))
+                            return;
+                        const text = match[2]
+                            .split('\n')
+                            .map((line) => line.replace(/^>\s?/, ''))
+                            .join('\n')
+                            .trim();
+                        return {
+                            type: 'alert',
+                            raw: match[0],
+                            text,
+                            alertType: alertType
+                        };
+                    }
+                }
+            }
+        ]
+    };
+}

package/dist/extensions/footnote/FootnoteRef.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    interface Props {
+        id: string
+    }
+
+    const { id }: Props = $props()
+</script>
+
+<sup class="footnote-ref"><a href="#fn-{id}" id="fnref-{id}">{id}</a></sup>

package/dist/extensions/footnote/FootnoteRef.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    id: string;
+}
+declare const FootnoteRef: import("svelte").Component<Props, {}, "">;
+type FootnoteRef = ReturnType<typeof FootnoteRef>;
+export default FootnoteRef;

package/dist/extensions/footnote/FootnoteSection.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    interface Footnote {
+        id: string
+        text: string
+    }
+
+    interface Props {
+        footnotes: Footnote[]
+    }
+
+    const { footnotes }: Props = $props()
+</script>
+
+<section class="footnotes" role="doc-endnotes">
+    <ol>
+        {#each footnotes as { id, text } (id)}
+            <li id="fn-{id}">
+                <p>
+                    {text}
+                    <a href="#fnref-{id}" class="footnote-backref" role="doc-backlink">&#8617;</a>
+                </p>
+            </li>
+        {/each}
+    </ol>
+</section>

package/dist/extensions/footnote/FootnoteSection.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Footnote {
+    id: string;
+    text: string;
+}
+interface Props {
+    footnotes: Footnote[];
+}
+declare const FootnoteSection: import("svelte").Component<Props, {}, "">;
+type FootnoteSection = ReturnType<typeof FootnoteSection>;
+export default FootnoteSection;

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

@@ -0,0 +1,3 @@
+export { default as FootnoteRef } from './FootnoteRef.svelte';
+export { default as FootnoteSection } from './FootnoteSection.svelte';
+export { markedFootnote } from './markedFootnote.js';

package/dist/extensions/footnote/index.js

@@ -0,0 +1,3 @@
+export { default as FootnoteRef } from './FootnoteRef.svelte';
+export { default as FootnoteSection } from './FootnoteSection.svelte';
+export { markedFootnote } from './markedFootnote.js';

package/dist/extensions/footnote/markedFootnote.d.ts

@@ -0,0 +1,31 @@
+import type { MarkedExtension } from 'marked';
+/**
+ * Creates a marked extension that tokenizes footnote references (`[^id]`) and
+ * footnote definitions (`[^id]: content`) into custom tokens.
+ *
+ * The extension produces:
+ * - **Inline** `footnoteRef` tokens: `{ type: 'footnoteRef', raw, id }`
+ * - **Block** `footnoteSection` tokens: `{ type: 'footnoteSection', raw, footnotes }` where
+ *   `footnotes` is an array of `{ id, text }` objects
+ *
+ * Pair with `FootnoteRef` and `FootnoteSection` components (or your own) for rendering.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import SvelteMarkdown from '@humanspeak/svelte-markdown'
+ *   import { markedFootnote, FootnoteRef, FootnoteSection } from '@humanspeak/svelte-markdown/extensions'
+ *
+ *   const renderers = { footnoteRef: FootnoteRef, footnoteSection: FootnoteSection }
+ * </script>
+ *
+ * <SvelteMarkdown
+ *   source={markdown}
+ *   extensions={[markedFootnote()]}
+ *   {renderers}
+ * />
+ * ```
+ *
+ * @returns A `MarkedExtension` with inline `footnoteRef` and block `footnoteSection` tokenizers
+ */
+export declare function markedFootnote(): MarkedExtension;

package/dist/extensions/footnote/markedFootnote.js

@@ -0,0 +1,80 @@
+/**
+ * Creates a marked extension that tokenizes footnote references (`[^id]`) and
+ * footnote definitions (`[^id]: content`) into custom tokens.
+ *
+ * The extension produces:
+ * - **Inline** `footnoteRef` tokens: `{ type: 'footnoteRef', raw, id }`
+ * - **Block** `footnoteSection` tokens: `{ type: 'footnoteSection', raw, footnotes }` where
+ *   `footnotes` is an array of `{ id, text }` objects
+ *
+ * Pair with `FootnoteRef` and `FootnoteSection` components (or your own) for rendering.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import SvelteMarkdown from '@humanspeak/svelte-markdown'
+ *   import { markedFootnote, FootnoteRef, FootnoteSection } from '@humanspeak/svelte-markdown/extensions'
+ *
+ *   const renderers = { footnoteRef: FootnoteRef, footnoteSection: FootnoteSection }
+ * </script>
+ *
+ * <SvelteMarkdown
+ *   source={markdown}
+ *   extensions={[markedFootnote()]}
+ *   {renderers}
+ * />
+ * ```
+ *
+ * @returns A `MarkedExtension` with inline `footnoteRef` and block `footnoteSection` tokenizers
+ */
+export function markedFootnote() {
+    return {
+        extensions: [
+            {
+                name: 'footnoteRef',
+                level: 'inline',
+                start(src) {
+                    return src.match(/\[\^/)?.index;
+                },
+                tokenizer(src) {
+                    const match = src.match(/^\[\^([^\]\s]+)\](?!:)/);
+                    if (match) {
+                        return {
+                            type: 'footnoteRef',
+                            raw: match[0],
+                            id: match[1]
+                        };
+                    }
+                }
+            },
+            {
+                name: 'footnoteSection',
+                level: 'block',
+                start(src) {
+                    return src.match(/\[\^[^\]\s]+\]:/)?.index;
+                },
+                tokenizer(src) {
+                    const match = src.match(/^(?:\[\^([^\]\s]+)\]:\s*([^\n]*(?:\n(?!\[\^)[^\n]*)*)(?:\n|$))+/);
+                    if (match) {
+                        const footnotes = [];
+                        const defRegex = /\[\^([^\]\s]+)\]:\s*([^\n]*(?:\n(?!\[\^|\n)[^\n]*)*)/g;
+                        let defMatch;
+                        while ((defMatch = defRegex.exec(match[0])) !== null) {
+                            footnotes.push({
+                                id: defMatch[1],
+                                text: defMatch[2].trim()
+                            });
+                        }
+                        if (footnotes.length > 0) {
+                            return {
+                                type: 'footnoteSection',
+                                raw: match[0],
+                                footnotes
+                            };
+                        }
+                    }
+                }
+            }
+        ]
+    };
+}

package/dist/extensions/index.d.ts

@@ -5,8 +5,13 @@
  *
  * ```ts
  * 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'
  * ```
  *
  * @module @humanspeak/svelte-markdown/extensions
  */
+export { AlertRenderer, markedAlert } from './alert/index.js';
+export type { AlertType } from './alert/index.js';
+export { FootnoteRef, FootnoteSection, markedFootnote } from './footnote/index.js';
 export { MermaidRenderer, markedMermaid } from './mermaid/index.js';

package/dist/extensions/index.js

@@ -5,8 +5,12 @@
  *
  * ```ts
  * 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'
  * ```
  *
  * @module @humanspeak/svelte-markdown/extensions
  */
+export { AlertRenderer, markedAlert } from './alert/index.js';
+export { FootnoteRef, FootnoteSection, markedFootnote } from './footnote/index.js';
 export { MermaidRenderer, markedMermaid } from './mermaid/index.js';

package/dist/renderers/Br.svelte

@@ -2,13 +2,5 @@
 @component
 Renders a markdown line break as a `<br />` element.
 -->
-<script lang="ts">
-    import type { Snippet } from 'svelte'
 
-    interface Props {
-        children?: Snippet
-    }
-    const { children }: Props = $props()
-</script>
-
-<br />{@render children?.()}
+<br />

package/dist/renderers/Br.svelte.d.ts

@@ -1,8 +1,27 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children?: Snippet;
-}
-/** Renders a markdown line break as a `<br />` element. */
-declare const Br: import("svelte").Component<Props, {}, "">;
-type Br = ReturnType<typeof Br>;
 export default Br;
+type Br = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+/** Renders a markdown line break as a `<br />` element. */
+declare const Br: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/renderers/TableCell.svelte

@@ -4,7 +4,7 @@ Renders a table cell as either `<th>` (header) or `<td>` (data), with optional
 text alignment applied as an inline `text-align` style.
 
 @prop {boolean} header - When `true`, renders a `<th>`; otherwise renders a `<td>`.
-@prop {'left'|'center'|'right'|'justify'|'char'|null|undefined} align - Column alignment.
+@prop {'left'|'center'|'right'|null} align - Column alignment.
 @prop {Snippet} [children] - Cell content.
 -->
 <script lang="ts">
@@ -12,7 +12,7 @@ text alignment applied as an inline `text-align` style.
 
     interface Props {
         header: boolean
-        align: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined
+        align: 'left' | 'center' | 'right' | null
         children?: Snippet
     }
 

package/dist/renderers/TableCell.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     header: boolean;
-    align: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined;
+    align: 'left' | 'center' | 'right' | null;
     children?: Snippet;
 }
 /**
@@ -9,7 +9,7 @@ interface Props {
  * text alignment applied as an inline `text-align` style.
  *
  * @prop {boolean} header - When `true`, renders a `<th>`; otherwise renders a `<td>`.
- * @prop {'left'|'center'|'right'|'justify'|'char'|null|undefined} align - Column alignment.
+ * @prop {'left'|'center'|'right'|null} align - Column alignment.
  * @prop {Snippet} [children] - Cell content.
  */
 declare const TableCell: import("svelte").Component<Props, {}, "">;

package/dist/renderers/html/Sup.svelte

@@ -7,7 +7,7 @@ Renders an HTML `<sup>` element. Accepts optional attributes and child content.
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, unknown>
+        attributes?: Record<string, any> // trunk-ignore(eslint/@typescript-eslint/no-explicit-any)
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Sup.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     children?: Snippet;
-    attributes?: Record<string, unknown>;
+    attributes?: Record<string, any>;
 }
 /** Renders an HTML `<sup>` element. Accepts optional attributes and child content. */
 declare const Sup: import("svelte").Component<Props, {}, "">;

package/dist/types.d.ts

@@ -75,7 +75,7 @@ export interface TableRowSnippetProps {
 }
 export interface TableCellSnippetProps {
     header: boolean;
-    align: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined;
+    align: 'left' | 'center' | 'right' | null;
     children?: Snippet;
 }
 export interface EmSnippetProps {
@@ -124,8 +124,16 @@ export type SnippetOverrides = {
     rawtext?: Snippet<[RawTextSnippetProps]>;
     escape?: Snippet<[EscapeSnippetProps]>;
 };
+/**
+ * Props passed to HTML snippet overrides.
+ *
+ * **Security note:** `attributes` are spread directly onto the rendered HTML element.
+ * This includes any attribute from the source markdown, such as `onclick` or `onerror`.
+ * If rendering untrusted markdown, use `allowHtmlOnly`/`excludeHtmlOnly` to restrict
+ * allowed tags, or integrate your own sanitizer to strip dangerous attributes.
+ */
 export interface HtmlSnippetProps {
-    attributes?: Record<string, any>;
+    attributes?: Record<string, string | number | boolean | undefined>;
     children?: Snippet;
 }
 export type HtmlSnippetOverrides = {

package/dist/utils/parse-and-cache.d.ts

@@ -28,7 +28,7 @@ import type { Token, TokensList } from './markdown-parser.js';
  * const cachedTokens = parseAndCacheTokens('# Hello World', { gfm: true }, false)
  * ```
  */
-export declare function parseAndCacheTokens(source: string, options: SvelteMarkdownOptions, isInline: boolean): Token[] | TokensList;
+export declare const parseAndCacheTokens: (source: string, options: SvelteMarkdownOptions, isInline: boolean) => Token[] | TokensList;
 /**
  * Parses markdown source with caching (async path).
  * Uses Marked's recursive walkTokens with Promise.all to properly
@@ -46,4 +46,4 @@ export declare function parseAndCacheTokens(source: string, options: SvelteMarkd
  * const tokens = await parseAndCacheTokensAsync('# Hello', opts, false)
  * ```
  */
-export declare function parseAndCacheTokensAsync(source: string, options: SvelteMarkdownOptions, isInline: boolean): Promise<Token[] | TokensList>;
+export declare const parseAndCacheTokensAsync: (source: string, options: SvelteMarkdownOptions, isInline: boolean) => Promise<Token[] | TokensList>;

package/dist/utils/parse-and-cache.js

@@ -10,13 +10,20 @@ import { tokenCache } from './token-cache.js';
 import { shrinkHtmlTokens } from './token-cleanup.js';
 import { Lexer, Marked } from 'marked';
 /**
- * Lex and clean tokens from markdown source. Shared by sync and async paths.
+ * Lexes markdown source and cleans the resulting tokens. Shared by sync and async paths.
+ *
+ * @param source - Raw markdown string to lex
+ * @param options - Parser options forwarded to the Marked lexer
+ * @param isInline - When true, uses inline tokenization (no block elements)
+ * @returns Cleaned token array with HTML tokens properly nested
+ *
+ * @internal
  */
-function lexAndClean(source, options, isInline) {
+const lexAndClean = (source, options, isInline) => {
     const lexer = new Lexer(options);
     const parsedTokens = isInline ? lexer.inlineTokens(source) : lexer.lex(source);
     return shrinkHtmlTokens(parsedTokens);
-}
+};
 /**
  * Parses markdown source with caching (synchronous path).
  * Checks cache first, parses on miss, stores result, and returns tokens.
@@ -37,7 +44,7 @@ function lexAndClean(source, options, isInline) {
  * const cachedTokens = parseAndCacheTokens('# Hello World', { gfm: true }, false)
  * ```
  */
-export function parseAndCacheTokens(source, options, isInline) {
+export const parseAndCacheTokens = (source, options, isInline) => {
     // Check cache first - avoids expensive parsing
     const cached = tokenCache.getTokens(source, options);
     if (cached) {
@@ -51,7 +58,7 @@ export function parseAndCacheTokens(source, options, isInline) {
     // Cache the cleaned tokens for next time
     tokenCache.setTokens(source, options, cleanedTokens);
     return cleanedTokens;
-}
+};
 /**
  * Parses markdown source with caching (async path).
  * Uses Marked's recursive walkTokens with Promise.all to properly
@@ -69,7 +76,7 @@ export function parseAndCacheTokens(source, options, isInline) {
  * const tokens = await parseAndCacheTokensAsync('# Hello', opts, false)
  * ```
  */
-export async function parseAndCacheTokensAsync(source, options, isInline) {
+export const parseAndCacheTokensAsync = async (source, options, isInline) => {
     // Check cache first - avoids expensive parsing
     const cached = tokenCache.getTokens(source, options);
     if (cached) {
@@ -89,4 +96,4 @@ export async function parseAndCacheTokensAsync(source, options, isInline) {
     // Cache the cleaned tokens for next time
     tokenCache.setTokens(source, options, cleanedTokens);
     return cleanedTokens;
-}
+};

package/dist/utils/token-cache.d.ts

@@ -35,7 +35,7 @@ import type { Token, TokensList } from './markdown-parser.js';
  * console.log(hash1 !== hash2) // true - different content = different hash
  * ```
  */
-declare function hashString(str: string): string;
+declare const hashString: (str: string) => string;
 /**
  * Specialized cache for markdown token storage.
  * Extends MemoryCache with markdown-specific convenience methods.

package/dist/utils/token-cache.js

@@ -33,7 +33,7 @@ import { MemoryCache } from './cache.js';
  * console.log(hash1 !== hash2) // true - different content = different hash
  * ```
  */
-function hashString(str) {
+const hashString = (str) => {
     let hash = 2166136261; // FNV offset basis (32-bit)
     for (let i = 0; i < str.length; i++) {
         hash ^= str.charCodeAt(i);
@@ -42,7 +42,7 @@ function hashString(str) {
     }
     // Convert to unsigned 32-bit integer and base36 string
     return (hash >>> 0).toString(36);
-}
+};
 /**
  * Generates a cache key from markdown source and parser options.
  * Combines hashes of both source content and options to ensure
@@ -71,7 +71,7 @@ function hashString(str) {
 // reactivity system creates new objects on prop changes ($derived), so
 // this is safe for all internal usage paths.
 const optionsHashCache = new WeakMap();
-function getCacheKey(source, options) {
+const getCacheKey = (source, options) => {
     const sourceHash = hashString(source);
     let optionsHash = optionsHashCache.get(options);
     if (!optionsHash) {
@@ -90,7 +90,7 @@ function getCacheKey(source, options) {
         optionsHashCache.set(options, optionsHash);
     }
     return `${sourceHash}:${optionsHash}`;
-}
+};
 /**
  * Specialized cache for markdown token storage.
  * Extends MemoryCache with markdown-specific convenience methods.

package/dist/utils/token-cleanup.d.ts

@@ -32,51 +32,6 @@ export declare const isHtmlOpenTag: (raw: string) => {
  * @internal
  */
 export declare const extractAttributes: (raw: string) => Record<string, string>;
-/**
- * Converts an HTML string into a sequence of tokens using htmlparser2.
- * Handles complex nested structures while maintaining proper order and relationships.
- *
- * Key features:
- * - Preserves original HTML structure without automatic tag closing
- * - Handles self-closing tags with proper XML syntax (e.g., <br/> instead of <br>)
- * - Gracefully handles malformed HTML by preserving the original structure
- * - Maintains attribute information in opening tags
- * - Processes text content between tags
- *
- * @param {string} html - HTML string to be parsed
- * @returns {Token[]} Array of tokens representing the HTML structure
- *
- * @example
- * // Well-formed HTML
- * parseHtmlBlock('<div>Hello <span>world</span></div>')
- * // Returns [
- * //   { type: 'html', raw: '<div>', ... },
- * //   { type: 'text', raw: 'Hello ', ... },
- * //   { type: 'html', raw: '<span>', ... },
- * //   { type: 'text', raw: 'world', ... },
- * //   { type: 'html', raw: '</span>', ... },
- * //   { type: 'html', raw: '</div>', ... }
- * // ]
- *
- * // Self-closing tags
- * parseHtmlBlock('<div>Before<br/>After</div>')
- * // Returns [
- * //   { type: 'html', raw: '<div>', ... },
- * //   { type: 'text', raw: 'Before', ... },
- * //   { type: 'html', raw: '<br/>', ... },
- * //   { type: 'text', raw: 'After', ... },
- * //   { type: 'html', raw: '</div>', ... }
- * // ]
- *
- * // Malformed HTML
- * parseHtmlBlock('<div>Unclosed')
- * // Returns [
- * //   { type: 'html', raw: '<div>', ... },
- * //   { type: 'text', raw: 'Unclosed', ... }
- * // ]
- *
- * @internal
- */
 export declare const parseHtmlBlock: (html: string) => Token[];
 export declare const containsMultipleTags: (html: string) => boolean;
 /**

package/dist/utils/token-cleanup.js

@@ -141,6 +141,22 @@ export const extractAttributes = (raw) => {
  *
  * @internal
  */
+/**
+ * Serializes an HTML attribute map into a string for tag construction.
+ * Escapes double quotes in values to prevent attribute injection.
+ *
+ * @param {Record<string, string>} attributes - Map of attribute names to values
+ * @returns {string} Serialized attributes string with leading spaces
+ *
+ * @example
+ * serializeAttributes({ class: 'foo', id: 'bar' })
+ * // Returns ' class="foo" id="bar"'
+ *
+ * @internal
+ */
+const serializeAttributes = (attributes) => Object.entries(attributes)
+    .map(([key, value]) => ` ${key}="${value.replace(/"/g, '&quot;')}"`)
+    .join('');
 export const parseHtmlBlock = (html) => {
     const tokens = [];
     let currentText = '';
@@ -158,9 +174,7 @@ export const parseHtmlBlock = (html) => {
             if (SELF_CLOSING_TAGS.test(name)) {
                 tokens.push({
                     type: 'html',
-                    raw: `<${name}${Object.entries(attributes)
-                        .map(([key, value]) => ` ${key}="${value}"`)
-                        .join('')}/>`,
+                    raw: `<${name}${serializeAttributes(attributes)}/>`,
                     tag: name,
                     attributes
                 });
@@ -169,9 +183,7 @@ export const parseHtmlBlock = (html) => {
                 openTags.push(name);
                 tokens.push({
                     type: 'html',
-                    raw: `<${name}${Object.entries(attributes)
-                        .map(([key, value]) => ` ${key}="${value}"`)
-                        .join('')}>`,
+                    raw: `<${name}${serializeAttributes(attributes)}>`,
                     tag: name,
                     attributes
                 });
@@ -203,8 +215,7 @@ export const parseHtmlBlock = (html) => {
             }
         }
     }, {
-        xmlMode: true,
-        // Add this to prevent automatic tag closing
+        xmlMode: false,
         recognizeSelfClosing: true
     });
     parser.write(html);
@@ -290,19 +301,16 @@ export const shrinkHtmlTokens = (tokens) => {
         }
         else if (token.type === 'table') {
             // Process header cells
-            if (token.header) {
-                // @ts-expect-error: expected any
-                token.header = token.header.map((cell) => ({
+            const tableToken = token;
+            if (tableToken.header) {
+                tableToken.header = tableToken.header.map((cell) => ({
                     ...cell,
                     tokens: cell.tokens ? shrinkHtmlTokens(cell.tokens) : []
                 }));
             }
             // Process row cells
-            if (token.rows) {
-                // @ts-expect-error: expected any
-                token.rows = token.rows.map((row) => 
-                // @ts-expect-error: expected any
-                row.map((cell) => ({
+            if (tableToken.rows) {
+                tableToken.rows = tableToken.rows.map((row) => row.map((cell) => ({
                     ...cell,
                     tokens: cell.tokens ? shrinkHtmlTokens(cell.tokens) : []
                 })));
@@ -394,9 +402,9 @@ export const processHtmlTokens = (tokens) => {
             result.push(token);
         }
     }
-    // If we have unclosed tags, return original tokens
+    // If we have unclosed tags, return partial result (better than discarding all work)
     if (stack.length > 0) {
-        return tokens;
+        return result;
     }
     return result;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-markdown",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Fast, customizable markdown renderer for Svelte with built-in caching, TypeScript support, and Svelte 5 runes",
   "keywords": [
     "svelte",
@@ -67,51 +67,51 @@
     }
   },
   "dependencies": {
-    "@humanspeak/memory-cache": "^1.0.5",
+    "@humanspeak/memory-cache": "^1.0.6",
     "github-slugger": "^2.0.0",
     "htmlparser2": "^10.1.0",
-    "marked": "^17.0.3"
+    "marked": "^17.0.4"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
+    "@eslint/compat": "^2.0.3",
     "@eslint/js": "^10.0.1",
     "@playwright/cli": "^0.1.1",
     "@playwright/test": "^1.58.2",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.53.3",
+    "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@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.3.2",
-    "@typescript-eslint/eslint-plugin": "^8.56.1",
-    "@typescript-eslint/parser": "^8.56.1",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^10.0.2",
+    "@types/node": "^25.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.1",
+    "@typescript-eslint/parser": "^8.57.1",
+    "@vitest/coverage-v8": "^4.1.0",
+    "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-svelte": "^3.15.0",
+    "eslint-plugin-svelte": "^3.15.2",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "globals": "^17.3.0",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "jsdom": "^28.1.0",
-    "katex": "^0.16.33",
+    "jsdom": "^29.0.0",
+    "katex": "^0.16.38",
     "marked-katex-extension": "^5.1.7",
-    "mermaid": "^11.12.3",
+    "mermaid": "^11.13.0",
     "mprocs": "^0.8.3",
     "prettier": "^3.8.1",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-svelte": "^3.5.0",
+    "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "publint": "^0.3.17",
-    "svelte": "^5.53.5",
-    "svelte-check": "^4.4.4",
+    "publint": "^0.3.18",
+    "svelte": "^5.53.13",
+    "svelte-check": "^4.4.5",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "typescript-eslint": "^8.57.1",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
     "mermaid": ">=10.0.0",
@@ -123,7 +123,7 @@
     }
   },
   "volta": {
-    "node": "22.16.0"
+    "node": "24.14.0"
   },
   "publishConfig": {
     "access": "public"
@@ -134,6 +134,7 @@
   ],
   "scripts": {
     "build": "vite build && npm run package",
+    "cf-typegen": "pnpm --filter docs cf-typegen",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "vite dev",