@sigx/lynx-markdown 0.4.5 → 0.4.6

package/dist/parser/scanner.js

@@ -0,0 +1,219 @@
+/**
+ * Shared low-level scanning helpers: source normalization, line classification,
+ * escape handling, and URL scanning. Pure functions, no AST/JSX dependency.
+ */
+/** Characters that may be backslash-escaped in markdown to their literal form. */
+const ESCAPABLE = new Set('\\`*_{}[]()#+-.!>~|"\'');
+/**
+ * Normalize source for uniform parsing: CRLF/CR → LF, and expand leading tabs
+ * to four spaces so indentation logic is consistent. Tabs after the first
+ * non-space content are left alone (they only matter for block indentation).
+ */
+export function normalize(src) {
+    const unified = src.replace(/\r\n?/g, '\n');
+    if (unified.indexOf('\t') === -1)
+        return unified;
+    return unified
+        .split('\n')
+        .map(expandLeadingTabs)
+        .join('\n');
+}
+function expandLeadingTabs(line) {
+    let i = 0;
+    let out = '';
+    let col = 0;
+    while (i < line.length) {
+        const ch = line[i];
+        if (ch === '\t') {
+            const next = col + (4 - (col % 4));
+            out += ' '.repeat(next - col);
+            col = next;
+        }
+        else if (ch === ' ') {
+            out += ' ';
+            col++;
+        }
+        else {
+            break;
+        }
+        i++;
+    }
+    return out + line.slice(i);
+}
+/** Count leading spaces (indentation) of a line. */
+export function indentOf(line) {
+    let i = 0;
+    while (i < line.length && line[i] === ' ')
+        i++;
+    return i;
+}
+/** True when a line is blank (empty or whitespace-only). */
+export function isBlank(line) {
+    return /^\s*$/.test(line);
+}
+/** Match an opening (or closing) fenced-code-block marker. */
+export function matchFence(line) {
+    const m = /^( {0,3})(`{3,}|~{3,})(.*)$/.exec(line);
+    if (!m)
+        return null;
+    const fence = m[2];
+    const info = m[3].trim();
+    // An opening info string for a backtick fence may not contain a backtick.
+    if (fence[0] === '`' && info.indexOf('`') !== -1)
+        return null;
+    return { char: fence[0], length: fence.length, indent: m[1].length, info };
+}
+/** True when `line` closes a fence opened by `open`. */
+export function isFenceClose(line, open) {
+    const m = /^( {0,3})(`{3,}|~{3,})\s*$/.exec(line);
+    if (!m)
+        return false;
+    const fence = m[2];
+    return fence[0] === open.char && fence.length >= open.length;
+}
+/** Match an ATX heading (`#`..`######`). Returns level + text, or null. */
+export function matchHeading(line) {
+    const m = /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/.exec(line);
+    if (!m)
+        return null;
+    // A `#` must be followed by a space or end of line to be a heading.
+    if (m[2] === undefined && line.replace(/^ {0,3}#{1,6}/, '').trim() !== '')
+        return null;
+    return { level: m[1].length, text: (m[2] ?? '').trim() };
+}
+/** Match a thematic break (`---`, `***`, `___`, optionally spaced). */
+export function isThematicBreak(line) {
+    const t = line.trim();
+    if (t.length < 3)
+        return false;
+    if (!/^[-*_]/.test(t))
+        return false;
+    const ch = t[0];
+    return t.split('').every((c) => c === ch || c === ' ') &&
+        t.replace(/\s/g, '').length >= 3;
+}
+/** Match a list-item marker (`- `, `* `, `+ `, `1. `, `1) `). */
+export function matchListMarker(line) {
+    const m = /^( {0,3})(?:([-*+])|(\d{1,9})([.)]))([ \t]+)(.*)$/.exec(line);
+    if (!m)
+        return null;
+    const markerIndent = m[1].length;
+    const ordered = m[3] !== undefined;
+    const delimiter = ordered ? m[4] : m[2];
+    const markerText = ordered ? m[3] + m[4] : m[2];
+    const spaces = m[5].length;
+    const contentIndent = markerIndent + markerText.length + spaces;
+    return {
+        ordered,
+        start: ordered ? parseInt(m[3], 10) : 1,
+        delimiter,
+        markerIndent,
+        contentIndent,
+        content: m[6],
+    };
+}
+/** Match an empty list item (`-` / `1.` with nothing after). */
+export function matchEmptyListMarker(line) {
+    const m = /^( {0,3})(?:([-*+])|(\d{1,9})([.)]))[ \t]*$/.exec(line);
+    if (!m)
+        return null;
+    const markerIndent = m[1].length;
+    const ordered = m[3] !== undefined;
+    const delimiter = ordered ? m[4] : m[2];
+    const markerText = ordered ? m[3] + m[4] : m[2];
+    return {
+        ordered,
+        start: ordered ? parseInt(m[3], 10) : 1,
+        delimiter,
+        markerIndent,
+        contentIndent: markerIndent + markerText.length + 1,
+        content: '',
+    };
+}
+/**
+ * Parse a GFM table delimiter row (`| --- | :--: | --: |`) into per-column
+ * alignment, or return null if the line is not a valid delimiter row.
+ */
+export function matchTableDelimiter(line) {
+    const t = line.trim();
+    if (t.indexOf('-') === -1)
+        return null;
+    const cells = splitTableRow(t);
+    if (cells.length === 0)
+        return null;
+    const align = [];
+    for (const cell of cells) {
+        const c = cell.trim();
+        if (!/^:?-+:?$/.test(c))
+            return null;
+        const left = c.startsWith(':');
+        const right = c.endsWith(':');
+        align.push(left && right ? 'center' : right ? 'right' : left ? 'left' : null);
+    }
+    return align;
+}
+/** Split a table row into raw cell strings, honoring `\|` escapes. */
+export function splitTableRow(line) {
+    let s = line.trim();
+    if (s.startsWith('|'))
+        s = s.slice(1);
+    if (s.endsWith('|') && !s.endsWith('\\|'))
+        s = s.slice(0, -1);
+    const cells = [];
+    let buf = '';
+    for (let i = 0; i < s.length; i++) {
+        const ch = s[i];
+        if (ch === '\\' && s[i + 1] === '|') {
+            buf += '|';
+            i++;
+        }
+        else if (ch === '|') {
+            cells.push(buf);
+            buf = '';
+        }
+        else {
+            buf += ch;
+        }
+    }
+    cells.push(buf);
+    return cells.map((c) => c.trim());
+}
+// ---------------------------------------------------------------------------
+// Escapes & URLs
+// ---------------------------------------------------------------------------
+/** True when `ch` is a backslash-escapable punctuation character. */
+export function isEscapable(ch) {
+    return ESCAPABLE.has(ch);
+}
+/** A conservative URL scheme allow-list for link safety. */
+const SAFE_SCHEME = /^(https?:|mailto:|tel:)/i;
+/**
+ * Return a link href if it is safe to expose to handlers, else `'#'`. Blocks
+ * `javascript:`/`data:` and other unexpected schemes. Relative/anchor links and
+ * the recognized safe schemes pass through unchanged.
+ */
+export function sanitizeHref(href) {
+    const h = href.trim();
+    if (h === '')
+        return '#';
+    if (/^[a-z][a-z0-9+.-]*:/i.test(h)) {
+        return SAFE_SCHEME.test(h) ? h : '#';
+    }
+    // No scheme → relative, anchor, or protocol-relative; allow.
+    return h;
+}
+/** Trailing punctuation trimmed from bare-URL autolinks (GFM behavior). */
+export function trimAutolinkTail(url) {
+    let end = url.length;
+    while (end > 0 && '?!.,:*_~)'.includes(url[end - 1])) {
+        // A trailing ')' is only trimmed when unbalanced within the URL.
+        if (url[end - 1] === ')') {
+            const open = (url.slice(0, end).match(/\(/g) ?? []).length;
+            const close = (url.slice(0, end).match(/\)/g) ?? []).length;
+            if (close <= open)
+                break;
+        }
+        end--;
+    }
+    return { url: url.slice(0, end), tail: url.slice(end) };
+}

package/dist/render/MarkdownView.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `<MarkdownView>` — a SignalX-native, streaming-aware markdown renderer.
+ *
+ * Parses markdown in JS (zero dependencies) and renders to Lynx primitives, so
+ * it works identically on every platform — unlike {@link XMarkdown}, which wraps
+ * the platform-gated native `<x-markdown>` element. For an editable counterpart,
+ * see `MarkdownEditor`.
+ *
+ * Rendering is **generic**: the package ships neutral, theme-agnostic defaults
+ * and exposes a `components` map so any design system can fully control the look
+ * (e.g. `@sigx/lynx-daisyui`'s `markdownComponents`). See
+ * {@link MarkdownComponents}.
+ *
+ * The `value` prop is reactive: as it grows (e.g. driven by an AI token loop via
+ * {@link createMarkdownStream}), finalized blocks keep a stable identity and are
+ * never re-parsed or remounted, so completed content does not flicker or reflow.
+ *
+ * @example
+ * ```tsx
+ * import { MarkdownView } from '@sigx/lynx-markdown';
+ * import { markdownComponents } from '@sigx/lynx-daisyui';
+ *
+ * <MarkdownView value={md} components={markdownComponents} onLink={openUrl} />
+ * ```
+ */
+import { type Define } from '@sigx/lynx';
+import { type MarkdownComponents } from './components.js';
+export type MarkdownViewProps = Define.Prop<'value', string, false> & Define.Prop<'onLink', (href: string) => void, false> & Define.Prop<'onImageTap', (src: string) => void, false> & Define.Prop<'components', Partial<MarkdownComponents>, false>;
+export declare const MarkdownView: import("@sigx/runtime-core").ComponentFactory<MarkdownViewProps, void, {}>;

package/dist/render/MarkdownView.js

@@ -0,0 +1,43 @@
+/**
+ * `<MarkdownView>` — a SignalX-native, streaming-aware markdown renderer.
+ *
+ * Parses markdown in JS (zero dependencies) and renders to Lynx primitives, so
+ * it works identically on every platform — unlike {@link XMarkdown}, which wraps
+ * the platform-gated native `<x-markdown>` element. For an editable counterpart,
+ * see `MarkdownEditor`.
+ *
+ * Rendering is **generic**: the package ships neutral, theme-agnostic defaults
+ * and exposes a `components` map so any design system can fully control the look
+ * (e.g. `@sigx/lynx-daisyui`'s `markdownComponents`). See
+ * {@link MarkdownComponents}.
+ *
+ * The `value` prop is reactive: as it grows (e.g. driven by an AI token loop via
+ * {@link createMarkdownStream}), finalized blocks keep a stable identity and are
+ * never re-parsed or remounted, so completed content does not flicker or reflow.
+ *
+ * @example
+ * ```tsx
+ * import { MarkdownView } from '@sigx/lynx-markdown';
+ * import { markdownComponents } from '@sigx/lynx-daisyui';
+ *
+ * <MarkdownView value={md} components={markdownComponents} onLink={openUrl} />
+ * ```
+ */
+import { component, computed } from '@sigx/lynx';
+import { createIncrementalEngine } from '../parser/incremental.js';
+import { defaultComponents } from './components.js';
+import { renderDocument } from './engine.js';
+export const MarkdownView = component(({ props }) => {
+    const engine = createIncrementalEngine();
+    const blocks = computed(() => engine.parse(props.value ?? ''));
+    return () => {
+        const ctx = {
+            components: props.components
+                ? { ...defaultComponents, ...props.components }
+                : defaultComponents,
+            onLink: props.onLink,
+            onImageTap: props.onImageTap,
+        };
+        return renderDocument(blocks.value, ctx);
+    };
+});

package/dist/render/components.d.ts

@@ -0,0 +1,140 @@
+/**
+ * The render-function component contract and the neutral default renderers.
+ *
+ * `@sigx/lynx-markdown` is **generic**: the defaults here use only plain inline
+ * styles (numbers + theme-agnostic colors) so the renderer works standalone on
+ * any platform/theme with zero design-system coupling. A design system (e.g.
+ * `@sigx/lynx-daisyui`) supplies its own {@link MarkdownComponents} to control
+ * the look — see the `components` prop on `<Markdown>`.
+ *
+ * Each component receives its already-rendered `children` plus the raw AST
+ * `node`; the engine owns AST recursion and stable streaming keys, so a
+ * component only decides *what element to wrap children in*.
+ */
+import type { JSXElement } from '@sigx/lynx';
+import type { BlockquoteBlock, CodeBlock, HeadingBlock, HeadingLevel, InlineAutolink, InlineCodeSpan, InlineDel, InlineEm, InlineImage, InlineLink, InlineStrong, ListBlock, ListItem, ParagraphBlock, TableAlign, TableBlock, ThematicBreakBlock } from '../ast.js';
+/** A renderable child: a JSX element or a raw string (for text/`<br>`). */
+export type MarkdownChild = JSXElement | string;
+export interface RootProps {
+    children: MarkdownChild[];
+}
+export interface HeadingProps {
+    level: HeadingLevel;
+    children: MarkdownChild[];
+    node: HeadingBlock;
+}
+export interface ParagraphProps {
+    children: MarkdownChild[];
+    node: ParagraphBlock;
+}
+export interface BlockquoteProps {
+    children: MarkdownChild[];
+    node: BlockquoteBlock;
+}
+export interface ListProps {
+    ordered: boolean;
+    start: number;
+    tight: boolean;
+    children: MarkdownChild[];
+    node: ListBlock;
+}
+export interface ListItemProps {
+    ordered: boolean;
+    /** Zero-based index within the list. */
+    index: number;
+    /** Display number for ordered lists (`start + index`). */
+    number: number;
+    /** GFM task state, or `null` when not a task item. */
+    checked: boolean | null;
+    children: MarkdownChild[];
+    item: ListItem;
+}
+export interface CodeProps {
+    lang?: string;
+    value: string;
+    /** `false` while the fence is still streaming/unterminated. */
+    closed: boolean;
+    node: CodeBlock;
+}
+export interface ThematicBreakProps {
+    node: ThematicBreakBlock;
+}
+export interface TableProps {
+    align: (TableAlign | null)[];
+    children: MarkdownChild[];
+    node: TableBlock;
+}
+export interface TableRowProps {
+    header: boolean;
+    children: MarkdownChild[];
+    node: TableBlock;
+}
+export interface TableCellProps {
+    header: boolean;
+    align: TableAlign | null;
+    children: MarkdownChild[];
+    node: TableBlock;
+}
+export interface StrongProps {
+    children: MarkdownChild[];
+    node: InlineStrong;
+}
+export interface EmProps {
+    children: MarkdownChild[];
+    node: InlineEm;
+}
+export interface DelProps {
+    children: MarkdownChild[];
+    node: InlineDel;
+}
+export interface CodeSpanProps {
+    value: string;
+    node: InlineCodeSpan;
+}
+export interface LinkProps {
+    href: string;
+    title?: string;
+    children: MarkdownChild[];
+    onLink?: (href: string) => void;
+    node: InlineLink;
+}
+export interface AutolinkProps {
+    href: string;
+    value: string;
+    onLink?: (href: string) => void;
+    node: InlineAutolink;
+}
+export interface ImageProps {
+    src: string;
+    alt: string;
+    title?: string;
+    onImageTap?: (src: string) => void;
+    node: InlineImage;
+}
+/**
+ * Map of node type → render function. Pass a partial map to `<Markdown
+ * components={…}>` to override any subset; unspecified types fall back to the
+ * neutral {@link defaultComponents}.
+ */
+export interface MarkdownComponents {
+    root(props: RootProps): JSXElement;
+    heading(props: HeadingProps): JSXElement;
+    paragraph(props: ParagraphProps): JSXElement;
+    blockquote(props: BlockquoteProps): JSXElement;
+    list(props: ListProps): JSXElement;
+    listItem(props: ListItemProps): JSXElement;
+    code(props: CodeProps): JSXElement;
+    thematicBreak(props: ThematicBreakProps): JSXElement;
+    table(props: TableProps): JSXElement;
+    tableRow(props: TableRowProps): JSXElement;
+    tableCell(props: TableCellProps): JSXElement;
+    strong(props: StrongProps): MarkdownChild;
+    em(props: EmProps): MarkdownChild;
+    del(props: DelProps): MarkdownChild;
+    codeSpan(props: CodeSpanProps): MarkdownChild;
+    link(props: LinkProps): MarkdownChild;
+    autolink(props: AutolinkProps): MarkdownChild;
+    image(props: ImageProps): MarkdownChild;
+    br(): MarkdownChild;
+}
+export declare const defaultComponents: MarkdownComponents;

package/dist/render/components.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+// -- Neutral, theme-agnostic defaults ----------------------------------------
+/** Faint neutral fill that reads on both light and dark backgrounds. */
+const SURFACE = 'rgba(127, 127, 127, 0.14)';
+const BORDER = 'rgba(127, 127, 127, 0.32)';
+const LINK = '#3478f6';
+const HEADING_SIZE = { 1: 30, 2: 24, 3: 20, 4: 18, 5: 16, 6: 14 };
+export const defaultComponents = {
+    root: ({ children }) => (_jsx("view", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: children })),
+    heading: ({ level, children }) => (_jsx("text", { style: {
+            fontSize: HEADING_SIZE[level],
+            fontWeight: level <= 2 ? 700 : 600,
+            ...(level >= 6 ? { opacity: 0.8 } : {}),
+        }, children: children })),
+    paragraph: ({ children }) => _jsx("text", { style: { fontSize: 16, lineHeight: 24 }, children: children }),
+    blockquote: ({ children }) => (_jsx("view", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+            paddingLeft: 12,
+            borderLeftWidth: 4,
+            borderLeftStyle: 'solid',
+            borderLeftColor: BORDER,
+            opacity: 0.85,
+        }, children: children })),
+    list: ({ children }) => (_jsx("view", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: children })),
+    listItem: ({ ordered, number, checked, children }) => {
+        const isBullet = checked === null && !ordered;
+        return (_jsxs("view", { style: { display: 'flex', flexDirection: 'row', gap: 6, alignItems: 'flex-start' }, children: [isBullet ? (_jsx("view", { style: {
+                        width: 6,
+                        height: 6,
+                        borderRadius: 3,
+                        marginTop: 9,
+                        marginLeft: 2,
+                        backgroundColor: 'rgba(120, 120, 120, 0.9)',
+                    } })) : checked !== null ? (_jsx("view", { style: {
+                        width: 16,
+                        height: 16,
+                        marginTop: 4,
+                        borderRadius: 4,
+                        borderWidth: 1.5,
+                        borderStyle: 'solid',
+                        borderColor: checked ? '#3478f6' : 'rgba(127, 127, 127, 0.6)',
+                        backgroundColor: checked ? '#3478f6' : 'transparent',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: checked ? (_jsx("text", { style: { color: '#ffffff', fontSize: 11, lineHeight: 12 }, children: "\u2713" })) : null })) : (_jsx("text", { style: { fontSize: 16, lineHeight: 24, opacity: 0.6 }, children: `${number}.` })), _jsx("view", { style: { display: 'flex', flexDirection: 'column', gap: 4, flexGrow: 1, flexShrink: 1 }, children: children })] }));
+    },
+    code: ({ lang, value }) => (_jsxs("view", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: SURFACE,
+            borderRadius: 8,
+            padding: 12,
+        }, children: [lang ? (_jsx("text", { style: { fontFamily: 'monospace', fontSize: 12, opacity: 0.6, marginBottom: 6 }, children: lang })) : null, _jsx("text", { style: { fontFamily: 'monospace', fontSize: 14, whiteSpace: 'pre-wrap' }, children: value })] })),
+    thematicBreak: () => (_jsx("view", { style: { height: 1, backgroundColor: BORDER, marginTop: 8, marginBottom: 8 } })),
+    table: ({ children }) => (_jsx("view", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: BORDER,
+            borderRadius: 8,
+            overflow: 'hidden',
+        }, children: children })),
+    tableRow: ({ header, children }) => (_jsx("view", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            ...(header ? { backgroundColor: SURFACE } : {}),
+        }, children: children })),
+    tableCell: ({ header, align, children }) => (_jsx("view", { style: {
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: 0,
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingTop: 5,
+            paddingBottom: 5,
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: BORDER,
+        }, children: _jsx("text", { style: { fontSize: 15, fontWeight: header ? 600 : 400, textAlign: align ?? 'left' }, children: children }) })),
+    strong: ({ children }) => _jsx("text", { style: { fontWeight: 700 }, children: children }),
+    em: ({ children }) => _jsx("text", { style: { fontStyle: 'italic' }, children: children }),
+    del: ({ children }) => (_jsx("text", { style: { textDecoration: 'line-through', opacity: 0.8 }, children: children })),
+    codeSpan: ({ value }) => (_jsx("text", { style: {
+            fontFamily: 'monospace',
+            fontSize: 14,
+            backgroundColor: SURFACE,
+            borderRadius: 4,
+            paddingLeft: 3,
+            paddingRight: 3,
+        }, children: value })),
+    link: ({ href, children, onLink }) => (_jsx("text", { style: { color: LINK, textDecoration: 'underline' }, bindtap: () => onLink?.(href), children: children })),
+    autolink: ({ href, value, onLink }) => (_jsx("text", { style: { color: LINK, textDecoration: 'underline' }, bindtap: () => onLink?.(href), children: value })),
+    image: ({ src, alt, onImageTap }) => (_jsx("text", { style: { color: LINK, textDecoration: 'underline' }, bindtap: () => onImageTap?.(src), children: alt || src })),
+    br: () => '\n',
+};

package/dist/render/engine.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Render engine: walks a `BlockNode[]` AST and dispatches each node to a
+ * {@link MarkdownComponents} renderer.
+ *
+ * Responsibilities the engine keeps (so components stay simple and design
+ * systems can't accidentally break streaming):
+ *  - AST recursion — children are fully rendered before a component is called.
+ *  - Stable reconciliation keys — `VNode.key` is stamped from the AST node's
+ *    streaming key after the component returns, so finalized blocks never
+ *    remount regardless of which element a component produced.
+ */
+import type { JSXElement } from '@sigx/lynx';
+import type { BlockNode } from '../ast.js';
+import type { MarkdownComponents } from './components.js';
+export interface RenderContext {
+    components: MarkdownComponents;
+    onLink?: (href: string) => void;
+    onImageTap?: (src: string) => void;
+}
+/** Render top-level blocks and wrap them in the `root` container. */
+export declare function renderDocument(blocks: BlockNode[], ctx: RenderContext): JSXElement;