@inkra/react 0.3.0 → 0.4.3

package/dist/markdown/CodeBlock.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Prism from 'prismjs';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-tsx.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-markdown.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { Card } from '../content/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { codeIcons } from './icons.js';
+Prism.manual = true;
+const languageAliases = {
+    js: 'javascript',
+    md: 'markdown',
+    sh: 'bash',
+    shell: 'bash',
+    ts: 'typescript',
+    txt: 'plain',
+    text: 'plain',
+    plaintext: 'plain',
+};
+const languageNames = {
+    javascript: 'JavaScript', typescript: 'TypeScript', jsx: 'JSX', tsx: 'TSX',
+    bash: 'Bash', json: 'JSON', markdown: 'Markdown', css: 'CSS', html: 'HTML',
+};
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function flatten(stream, inheritedClasses = '') {
+    const tokens = Array.isArray(stream) ? stream : [stream];
+    return tokens.flatMap(token => {
+        if (typeof token === 'string')
+            return [{ text: token, classes: inheritedClasses }];
+        const aliases = Array.isArray(token.alias) ? token.alias : token.alias ? [token.alias] : [];
+        const tokenClasses = classes(inheritedClasses, `token-${token.type}`, ...aliases.map(alias => `token-${alias}`));
+        return flatten(token.content, tokenClasses);
+    });
+}
+function languageFromClassName(className) {
+    return /(?:^|\s)language-([^\s]+)/.exec(className ?? '')?.[1]?.toLowerCase();
+}
+function tokenize(code, language) {
+    const normalized = languageAliases[language ?? ''] ?? language ?? 'plain';
+    const grammar = Prism.languages[normalized] ?? Prism.languages.plain;
+    return flatten(Prism.tokenize(code, grammar)).flatMap(part => part.text.split(/(\r\n|\r|\n)/).filter(Boolean).map(text => ({ ...part, text })));
+}
+export function MarkdownCodeBlock({ code, codeClassName, className, labels, tabIndex: _tabIndex, ...props }) {
+    const language = languageFromClassName(codeClassName);
+    const normalizedLanguage = languageAliases[language ?? ''] ?? language ?? 'plain';
+    const languageLabel = normalizedLanguage === 'plain' ? labels.plainText : languageNames[normalizedLanguage] ?? language;
+    const parts = useMemo(() => tokenize(code, language), [code, language]);
+    const [status, setStatus] = useState('idle');
+    const request = useRef(0);
+    const timer = useRef(undefined);
+    useEffect(() => {
+        setStatus('idle');
+        return () => { request.current += 1; clearTimeout(timer.current); };
+    }, [code]);
+    const copyLabel = status === 'copied' ? labels.copied : status === 'failed' ? labels.copyFailed : labels.copy;
+    async function copyCode() {
+        const id = ++request.current;
+        clearTimeout(timer.current);
+        setStatus('copying');
+        try {
+            await navigator.clipboard.writeText(code);
+            if (request.current !== id)
+                return;
+            setStatus('copied');
+        }
+        catch {
+            if (request.current !== id)
+                return;
+            setStatus('failed');
+        }
+        timer.current = setTimeout(() => setStatus('idle'), 2000);
+    }
+    return _jsxs(Card.Root, { className: "inkra-markdown__code-frame", radius: 6, seed: `markdown-code-frame-${language ?? 'plain'}`, children: [_jsx(Card.Header, { className: "inkra-markdown__code-header", align: "center", action: _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", "aria-label": copyLabel, "aria-busy": status === 'copying' || undefined, disabled: status === 'copying', onClick: () => void copyCode(), children: _jsx(PencilIcon, { paths: status === 'copied' ? codeIcons.check : codeIcons.copy, size: 22 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: copyLabel }) })] }) }), children: _jsxs("span", { className: "inkra-markdown__code-language", children: [_jsx(PencilIcon, { paths: normalizedLanguage === 'bash' ? codeIcons.terminal : codeIcons.code, size: 22 }), _jsx(PencilText, { children: languageLabel })] }) }), _jsx("pre", { ...props, className: classes('inkra-markdown__code-surface', className), "data-language": language ?? 'plain', tabIndex: 0, children: _jsx("code", { className: classes('inkra-markdown__code', codeClassName), children: parts.map((part, index) => /\S/.test(part.text)
+                        ? _jsx(PencilText, { className: classes('inkra-markdown__code-token', part.classes), seed: `markdown-code-${language ?? 'plain'}-${index}-${part.text}`, children: part.text }, index)
+                        : part.text) }) }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__code-focus", radius: 6, seed: "markdown-code-focus", variant: "outline" }), _jsx("span", { className: "inkra-markdown__code-status", role: "status", children: status === 'copied' ? labels.copied : status === 'failed' ? labels.copyFailed : '' })] });
+}

package/dist/markdown/Deletion.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export declare function Deletion({ children, className, ...props }: ComponentPropsWithoutRef<'del'>): import("react").JSX.Element;

package/dist/markdown/Deletion.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+export function Deletion({ children, className, ...props }) {
+    const ref = useRef(null);
+    const [lines, setLines] = useState([]);
+    useBrowserLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !document.createElement('canvas').getContext('2d'))
+            return;
+        let disposed = false;
+        let frame = 0;
+        const measure = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const box = node.getBoundingClientRect();
+            const scaleX = node.offsetWidth ? box.width / node.offsetWidth : 1;
+            const scaleY = node.offsetHeight ? box.height / node.offsetHeight : 1;
+            const fragments = [];
+            const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+            const range = document.createRange();
+            // Use native line fragments, not one line through the whole wrapped block.
+            for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+                if (!text.textContent?.trim() || text.parentElement?.closest('[aria-hidden="true"]'))
+                    continue;
+                range.selectNodeContents(text);
+                for (const rect of range.getClientRects()) {
+                    if (!rect.width || !rect.height)
+                        continue;
+                    const top = (rect.top - box.top + rect.height * 0.52) / (scaleY || 1) - 3;
+                    const left = (rect.left - box.left) / (scaleX || 1);
+                    const width = rect.width / (scaleX || 1);
+                    const line = fragments.find(item => Math.abs(item.top - top) < 3);
+                    if (line) {
+                        const end = Math.max(line.left + line.width, left + width);
+                        line.left = Math.min(line.left, left);
+                        line.width = end - line.left;
+                    }
+                    else
+                        fragments.push({ left, top, width });
+                }
+            }
+            const next = fragments.map(line => ({
+                left: Math.round(line.left * 2) / 2,
+                top: Math.round(line.top * 2) / 2,
+                width: Math.round(line.width * 2) / 2,
+            }));
+            setLines(previous => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+        };
+        const schedule = () => {
+            if (!disposed && !frame)
+                frame = requestAnimationFrame(measure);
+        };
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        observer?.observe(node);
+        document.fonts?.addEventListener('loadingdone', schedule);
+        document.fonts?.ready.then(schedule);
+        measure();
+        return () => {
+            disposed = true;
+            observer?.disconnect();
+            document.fonts?.removeEventListener('loadingdone', schedule);
+            cancelAnimationFrame(frame);
+        };
+    }, [children]);
+    return _jsxs("del", { ...props, className: ['inkra-markdown__deleted', className].filter(Boolean).join(' '), ref: ref, "data-pencil-strike-ready": lines.length > 0 || undefined, children: [children, lines.map((line, index) => _jsx(PencilLine, { className: "inkra-markdown__strike", seed: `markdown-strike-${index}`, weight: 0.7, roughness: 0.4, style: { left: line.left, top: line.top, width: line.width } }, index))] });
+}

package/dist/markdown/icons.d.ts

@@ -0,0 +1,14 @@
+export declare const codeIcons: {
+    copy: {
+        d: string;
+    }[];
+    check: {
+        d: string;
+    }[];
+    terminal: {
+        d: string;
+    }[];
+    code: {
+        d: string;
+    }[];
+};

package/dist/markdown/icons.js

@@ -0,0 +1,16 @@
+import { __iconData as copy } from 'lucide-react/dist/esm/icons/copy.mjs';
+import { __iconData as check } from 'lucide-react/dist/esm/icons/check.mjs';
+import { __iconData as terminal } from 'lucide-react/dist/esm/icons/terminal.mjs';
+import { __iconData as code } from 'lucide-react/dist/esm/icons/code-xml.mjs';
+function paths(data) {
+    return data.node.flatMap(([tag, attributes]) => {
+        if (tag === 'path')
+            return [{ d: attributes.d }];
+        if (tag !== 'rect')
+            return [];
+        const { x = 0, y = 0, width = 0, height = 0, rx = 0 } = Object.fromEntries(Object.entries(attributes).map(([key, value]) => [key, Number(value)]));
+        const r = Math.min(rx, width / 2, height / 2);
+        return [{ d: `M${x + r} ${y}H${x + width - r}Q${x + width} ${y} ${x + width} ${y + r}V${y + height - r}Q${x + width} ${y + height} ${x + width - r} ${y + height}H${x + r}Q${x} ${y + height} ${x} ${y + height - r}V${y + r}Q${x} ${y} ${x + r} ${y}Z` }];
+    });
+}
+export const codeIcons = { copy: paths(copy), check: paths(check), terminal: paths(terminal), code: paths(code) };

package/dist/markdown/index.d.ts

@@ -0,0 +1,17 @@
+import type { Components } from 'react-markdown';
+import { type ComponentPropsWithoutRef } from 'react';
+import { type MarkdownCodeLabels } from './CodeBlock.js';
+export interface MarkdownLabels extends Partial<MarkdownCodeLabels> {
+    code?: string;
+    table?: string;
+    taskChecked?: string;
+    taskUnchecked?: string;
+}
+export interface MarkdownProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children: string;
+    components?: Components;
+    headingLevelOffset?: number;
+    labels?: MarkdownLabels;
+    transformUrl?: (url: string, kind: 'link' | 'image') => string | null | undefined;
+}
+export declare const Markdown: import("react").ForwardRefExoticComponent<MarkdownProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/markdown/index.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useMemo, } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Table } from '../content/index.js';
+import { Checkbox } from '../selection/Checkbox.js';
+import { MarkdownCodeBlock } from './CodeBlock.js';
+import { Deletion } from './Deletion.js';
+const listContext = createContext('unordered');
+const codeContext = createContext('inline');
+const bulletPaths = [{ d: 'M12 4.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15' }];
+const markdownPlugins = [remarkGfm];
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function pencilChildren(children, seed) {
+    return Children.map(children, (child, index) => {
+        if (typeof child !== 'string' && typeof child !== 'number')
+            return child;
+        const value = String(child);
+        if (!/\S/.test(value))
+            return value;
+        const [, leading, text, trailing] = /^(\s*)([\s\S]*?)(\s*)$/.exec(value);
+        return _jsxs(_Fragment, { children: [leading, _jsx(PencilText, { seed: `${seed}-${index}`, children: text }), trailing] });
+    });
+}
+function taskContent(children) {
+    let checkbox;
+    const extract = (content) => Children.map(content, child => {
+        if (!isValidElement(child))
+            return child;
+        if (!checkbox && child.props.node?.tagName === 'input' && child.props.type === 'checkbox') {
+            checkbox = child;
+            return null;
+        }
+        if (!checkbox && child.props.node?.tagName === 'p')
+            return cloneElement(child, {}, extract(child.props.children));
+        return child;
+    });
+    const content = extract(children);
+    return { checkbox, content };
+}
+function textChildren(children) {
+    let value = '';
+    Children.forEach(children, child => {
+        if (typeof child === 'string' || typeof child === 'number')
+            value += String(child);
+    });
+    return value;
+}
+function codeBlockContent(children) {
+    if (isValidElement(children)) {
+        return {
+            className: children.props.className,
+            code: textChildren(children.props.children),
+        };
+    }
+    return { className: undefined, code: textChildren(children) };
+}
+function safeUrl(url, kind) {
+    const trimmed = url.trim();
+    if (!trimmed)
+        return null;
+    if (/^(?:[#/?]|\.\.?\/)/.test(trimmed))
+        return trimmed;
+    const scheme = /^([a-z][a-z\d+.-]*):/i.exec(trimmed.replace(/[\u0000-\u001f\u007f]/g, ''))?.[1]?.toLowerCase();
+    if (!scheme)
+        return trimmed;
+    if (scheme === 'http' || scheme === 'https')
+        return trimmed;
+    if (kind === 'link' && (scheme === 'mailto' || scheme === 'tel'))
+        return trimmed;
+    return null;
+}
+function headingTag(level, offset) {
+    return `h${Math.max(1, Math.min(6, level + offset))}`;
+}
+function MarkdownTaskCheckbox({ checked = false, className, label, ...props }) {
+    const selected = Boolean(checked);
+    return _jsx(Checkbox, { ...props, "aria-label": props['aria-label'] ?? label, checked: selected, className: classes('inkra-markdown__task-checkbox', className), disabled: true, label: _jsx("span", { "aria-hidden": "true" }), seed: `markdown-task-${selected ? 'checked' : 'unchecked'}` });
+}
+function createMarkdownComponents(headingLevelOffset, labels) {
+    const heading = (level) => {
+        const Heading = headingTag(level, headingLevelOffset);
+        return ({ node: _node, children, className, ...props }) => (_jsx(Heading, { ...props, className: classes('inkra-markdown__heading', className), children: pencilChildren(children, `markdown-heading-${level}`) }));
+    };
+    return {
+        h1: heading(1),
+        h2: heading(2),
+        h3: heading(3),
+        h4: heading(4),
+        h5: heading(5),
+        h6: heading(6),
+        p: ({ node: _node, children, className, ...props }) => (_jsx("p", { ...props, className: classes('inkra-markdown__paragraph', className), children: pencilChildren(children, 'markdown-paragraph') })),
+        strong: ({ node: _node, children, ...props }) => _jsx("strong", { ...props, children: pencilChildren(children, 'markdown-strong') }),
+        em: ({ node: _node, children, ...props }) => _jsx("em", { ...props, children: pencilChildren(children, 'markdown-emphasis') }),
+        del: ({ node: _node, children, ...props }) => _jsx(Deletion, { ...props, children: pencilChildren(children, 'markdown-deleted') }),
+        a: ({ node: _node, children, className, href, ...props }) => href ? (_jsxs("a", { ...props, className: classes('inkra-markdown__link', className), href: href, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__link-focus", radius: 3, seed: `markdown-link-focus-${href}`, variant: "outline" }), _jsx("span", { children: pencilChildren(children, 'markdown-link') }), _jsx(PencilLine, { className: "inkra-markdown__link-line", seed: `markdown-link-${href}` })] })) : _jsx("span", { className: classes('inkra-markdown__link-text', className), children: pencilChildren(children, 'markdown-link-text') }),
+        blockquote: ({ node: _node, children, className, ...props }) => (_jsxs("blockquote", { ...props, className: classes('inkra-markdown__quote', className), children: [_jsx(PencilLine, { className: "inkra-markdown__quote-line", orientation: "vertical", seed: "markdown-quote" }), _jsx("div", { children: children })] })),
+        hr: ({ node: _node, className, ...props }) => (_jsx("div", { ...props, className: classes('inkra-markdown__divider', className), role: "separator", children: _jsx(PencilLine, { seed: "markdown-divider" }) })),
+        pre: ({ node: _node, children, ...props }) => {
+            const block = codeBlockContent(children);
+            return _jsx(codeContext.Provider, { value: "block", children: _jsx(MarkdownCodeBlock, { ...props, "aria-label": labels.code, labels: labels, code: block.code, codeClassName: block.className }) });
+        },
+        code: ({ node: _node, children, className, ...props }) => {
+            const kind = useContext(codeContext);
+            const value = textChildren(children);
+            return _jsx("code", { ...props, className: classes('inkra-markdown__code', className), "data-inline": kind === 'inline' || undefined, children: kind === 'inline'
+                    ? _jsxs(_Fragment, { children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__code-wash", radius: 3, seed: `markdown-inline-code-wash-${value}`, variant: "wash" }), _jsx(PencilText, { className: "inkra-markdown__code-text", seed: `markdown-inline-code-${value}`, children: value })] })
+                    : children });
+        },
+        ul: ({ node: _node, children, className, ...props }) => (_jsx(listContext.Provider, { value: "unordered", children: _jsx("ul", { ...props, className: classes('inkra-markdown__list', 'inkra-markdown__list--unordered', className), children: children }) })),
+        ol: ({ node: _node, children, className, start, style, ...props }) => {
+            const first = typeof start === 'number' && Number.isFinite(start) ? Math.trunc(start) : 1;
+            let itemIndex = 0;
+            const numberedChildren = Children.map(children, child => {
+                if (!isValidElement(child))
+                    return child;
+                const marker = first + itemIndex;
+                itemIndex += 1;
+                return cloneElement(child, { 'data-inkra-ordered-index': marker });
+            });
+            const last = first + Math.max(0, itemIndex - 1);
+            const markerCharacters = Math.max(`${first}.`.length, `${last}.`.length);
+            const listStyle = {
+                ...style,
+                '--inkra-markdown-ordered-marker-width': `max(1.75rem, ${markerCharacters}ch)`,
+            };
+            return _jsx(listContext.Provider, { value: "ordered", children: _jsx("ol", { ...props, className: classes('inkra-markdown__list', 'inkra-markdown__list--ordered', className), start: first, style: listStyle, children: numberedChildren }) });
+        },
+        li: ({ node: _node, children, className, 'data-inkra-ordered-index': orderedIndex, ...props }) => {
+            const kind = useContext(listContext);
+            const task = className?.split(/\s+/).includes('task-list-item');
+            const extracted = task ? taskContent(children) : undefined;
+            return _jsxs("li", { ...props, className: classes('inkra-markdown__list-item', className), "data-inkra-list-kind": kind, children: [kind === 'unordered' && !task && _jsx(PencilIcon, { className: "inkra-markdown__bullet", paths: bulletPaths, size: 12, sourceSize: 24, strokeWidth: 1.2, intensity: 0.78 }), kind === 'ordered' && orderedIndex != null && _jsx(PencilText, { "aria-hidden": "true", className: "inkra-markdown__ordered-marker", seed: `markdown-order-${orderedIndex}`, children: `${orderedIndex}.` }), _jsx("div", { className: "inkra-markdown__list-content", children: extracted?.checkbox
+                            ? _jsxs("div", { className: "inkra-markdown__task-row", children: [extracted.checkbox, _jsx("div", { className: "inkra-markdown__task-content", children: pencilChildren(extracted.content, 'markdown-list-item') })] })
+                            : pencilChildren(children, 'markdown-list-item') })] });
+        },
+        input: ({ node: _node, checked, type, ...props }) => type === 'checkbox'
+            ? _jsx(MarkdownTaskCheckbox, { ...props, checked: checked, label: checked ? labels.taskChecked : labels.taskUnchecked })
+            : _jsx("input", { ...props, checked: checked, type: type }),
+        table: ({ node: _node, children, className, ...props }) => (_jsxs("div", { className: "inkra-markdown__table-frame", children: [_jsx(Table.Container, { "aria-label": labels.table, className: "inkra-markdown__table", role: "region", children: _jsx(Table.Root, { ...props, className: className, children: children }) }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__table-focus", radius: 6, seed: "markdown-table-focus", variant: "outline" })] })),
+        thead: ({ node: _node, ...props }) => _jsx(Table.Header, { ...props }),
+        tbody: ({ node: _node, ...props }) => _jsx(Table.Body, { ...props }),
+        tr: ({ node: _node, ...props }) => _jsx(Table.Row, { ...props }),
+        th: ({ node: _node, children, align, ...props }) => _jsx(Table.Head, { ...props, align: align, children: pencilChildren(children, 'markdown-table-heading') }),
+        td: ({ node: _node, children, align, ...props }) => _jsx(Table.Cell, { ...props, align: align, verticalAlign: "top", children: pencilChildren(children, 'markdown-table-cell') }),
+        img: ({ node: _node, className, alt = '', ...props }) => props.src ? (_jsx(PencilSurface, { as: "span", className: "inkra-markdown__image-frame", radius: 6, seed: `markdown-image-${props.src ?? ''}`, variant: "outline", children: _jsx("img", { ...props, alt: alt, className: classes('inkra-markdown__image', className), decoding: "async", loading: "lazy" }) })) : _jsx("span", { className: classes('inkra-markdown__image-alt', className), children: pencilChildren(alt, 'markdown-image-alt') }),
+    };
+}
+export const Markdown = forwardRef(function Markdown({ children, className, components, headingLevelOffset = 0, labels, transformUrl, ...props }, ref) {
+    const offset = Number.isFinite(headingLevelOffset) ? Math.trunc(headingLevelOffset) : 0;
+    const resolvedLabels = useMemo(() => ({
+        code: labels?.code ?? 'Code block',
+        plainText: labels?.plainText ?? 'Plain text',
+        copy: labels?.copy ?? 'Copy code',
+        copied: labels?.copied ?? 'Code copied',
+        copyFailed: labels?.copyFailed ?? 'Copy failed. Select the code to copy it manually.',
+        table: labels?.table ?? 'Markdown table',
+        taskChecked: labels?.taskChecked ?? 'Completed task',
+        taskUnchecked: labels?.taskUnchecked ?? 'Incomplete task',
+    }), [labels?.code, labels?.plainText, labels?.copy, labels?.copied, labels?.copyFailed, labels?.table, labels?.taskChecked, labels?.taskUnchecked]);
+    const builtIns = useMemo(() => createMarkdownComponents(offset, resolvedLabels), [offset, resolvedLabels]);
+    const resolvedComponents = useMemo(() => ({ ...builtIns, ...components }), [builtIns, components]);
+    const urlTransform = useCallback((url, key) => {
+        const kind = key === 'src' ? 'image' : 'link';
+        const transformed = transformUrl ? transformUrl(url, kind) : url;
+        return transformed == null ? null : safeUrl(transformed, kind);
+    }, [transformUrl]);
+    return _jsx("div", { ...props, ref: ref, className: classes('inkra-markdown', className), children: _jsx(ReactMarkdown, { components: resolvedComponents, remarkPlugins: markdownPlugins, skipHtml: true, urlTransform: urlTransform, children: children }) });
+});

package/dist/node-graph/index.d.ts

@@ -50,7 +50,9 @@ export interface NodeGraphControlLabels {
     fitView: string;
 }
 export interface NodeGraphRootProps<NodeType extends NodeGraphNode = NodeGraphNode, EdgeType extends NodeGraphEdge = NodeGraphEdge> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onError'> {
+    /** Immutable snapshots: replace the array and each changed node (including changed nested data). */
     nodes: NodeType[];
+    /** Immutable snapshots: replace the array and each changed edge (including changed nested data). */
     edges: EdgeType[];
     onNodesChange?: (changes: NodeGraphNodeChange<NodeType>[]) => void;
     onEdgesChange?: (changes: NodeGraphEdgeChange<EdgeType>[]) => void;

package/dist/node-graph/index.js

@@ -132,9 +132,6 @@ function PencilEdgeCanvas({ id, path, className, selected = false }) {
             if (disposed)
                 return;
             try {
-                const points = sampleSvgPath(pathElement, bounds);
-                if (points.length < 2)
-                    throw new Error('NodeGraph edge has no drawable path');
                 const style = getComputedStyle(canvas);
                 const width = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
                 const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
@@ -150,6 +147,9 @@ function PencilEdgeCanvas({ id, path, className, selected = false }) {
                     image = undefined;
                 }
                 if (!image) {
+                    const points = sampleSvgPath(pathElement, bounds);
+                    if (points.length < 2)
+                        throw new Error('NodeGraph edge has no drawable path');
                     image = document.createElement('canvas');
                     image.width = budget.width;
                     image.height = budget.height;
@@ -260,28 +260,52 @@ function NodeGraphRootInner({ nodes, edges, onNodesChange, onEdgesChange, onConn
         zoomOut: () => instanceRef.current?.zoomOut() ?? Promise.resolve(false),
         getViewport: () => instanceRef.current?.getViewport() ?? defaultViewport,
     }), [defaultViewport]);
-    const internalNodes = useMemo(() => nodes.map(node => ({
-        ...node,
-        type: 'inkra',
-        ariaLabel: node.ariaLabel ?? readableLabel(node.data.label, node.id),
-        data: {
-            __inkraRenderNode: renderNode,
-            __inkraReadOnly: readOnly,
-            __inkraData: node.data,
-        },
-    })), [nodes, readOnly, renderNode]);
-    const internalEdges = useMemo(() => edges.map(edge => ({
-        ...edge,
-        type: 'inkra',
-        ariaLabel: edge.ariaLabel ?? `Edge from ${edge.source} to ${edge.target}`,
-        label: undefined,
-        data: {
-            ...edge.data,
-            __inkraEdge: edge,
-            __inkraRenderEdge: renderEdge,
-            __inkraRenderEdgeLabel: renderEdgeLabel,
-        },
-    })), [edges, renderEdge, renderEdgeLabel]);
+    // Immutable node/edge updates should invalidate only the changed records. Weak
+    // keys release removed records and changing render configuration resets the cache.
+    const adaptNode = useMemo(() => {
+        const cache = new WeakMap();
+        return (node) => {
+            const cached = cache.get(node);
+            if (cached)
+                return cached;
+            const adapted = {
+                ...node,
+                type: 'inkra',
+                ariaLabel: node.ariaLabel ?? readableLabel(node.data.label, node.id),
+                data: {
+                    __inkraRenderNode: renderNode,
+                    __inkraReadOnly: readOnly,
+                    __inkraData: node.data,
+                },
+            };
+            cache.set(node, adapted);
+            return adapted;
+        };
+    }, [readOnly, renderNode]);
+    const adaptEdge = useMemo(() => {
+        const cache = new WeakMap();
+        return (edge) => {
+            const cached = cache.get(edge);
+            if (cached)
+                return cached;
+            const adapted = {
+                ...edge,
+                type: 'inkra',
+                ariaLabel: edge.ariaLabel ?? `Edge from ${edge.source} to ${edge.target}`,
+                label: undefined,
+                data: {
+                    ...edge.data,
+                    __inkraEdge: edge,
+                    __inkraRenderEdge: renderEdge,
+                    __inkraRenderEdgeLabel: renderEdgeLabel,
+                },
+            };
+            cache.set(edge, adapted);
+            return adapted;
+        };
+    }, [renderEdge, renderEdgeLabel]);
+    const internalNodes = useMemo(() => nodes.map(adaptNode), [nodes, adaptNode]);
+    const internalEdges = useMemo(() => edges.map(adaptEdge), [edges, adaptEdge]);
     const rootStyle = { minHeight: 320, ...style };
     return _jsx("div", { ...props, "aria-label": ariaLabel, className: ['inkra-node-graph', className].filter(Boolean).join(' '), "data-empty": nodes.length === 0 || undefined, "data-read-only": readOnly || undefined, style: rootStyle, children: !mounted ? _jsx(SsrFallback, { nodes: nodes, emptyState: emptyState, label: ariaLabel }) : _jsxs(ReactFlowProvider, { children: [_jsx(ReactFlow, { "aria-label": ariaLabel, nodes: internalNodes, edges: internalEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onInit: instance => { instanceRef.current = instance; }, onNodesChange: changes => onNodesChange?.(changes), onEdgesChange: changes => onEdgesChange?.(changes), onConnect: readOnly ? undefined : onConnect, isValidConnection: isValidConnection, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, edgesReconnectable: !readOnly, nodesFocusable: true, edgesFocusable: true, deleteKeyCode: readOnly ? null : ['Backspace', 'Delete'], fitView: fitView, fitViewOptions: fitViewOptions, defaultViewport: defaultViewport, viewport: viewport, onViewportChange: onViewportChange, minZoom: minZoom, maxZoom: maxZoom, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, connectOnClick: connectOnClick && !readOnly, connectionLineComponent: NodeGraphConnectionLine, onlyRenderVisibleElements: onlyRenderVisibleElements, noDragClassName: "nodrag", noPanClassName: "nopan", children: controls && _jsx(Panel, { position: "bottom-left", children: _jsx(NodeGraphControls, { fitViewLabel: controlLabels?.fitView, fitViewOptions: fitViewOptions, zoomInLabel: controlLabels?.zoomIn, zoomOutLabel: controlLabels?.zoomOut }) }) }), nodes.length === 0 && _jsx("div", { className: "inkra-node-graph__empty", role: "status", children: emptyState })] }) });
 }

package/dist/number-ticker/precision.js

@@ -46,6 +46,14 @@ function roundedDecimal(value, options) {
             : options.minimumFractionDigits ?? 0;
     return { value: rounded, decimals };
 }
+let exactDecimalStringsSupported;
+function supportsExactDecimalStrings() {
+    if (exactDecimalStringsSupported === undefined) {
+        const probe = new Intl.NumberFormat('en-US', { useGrouping: false });
+        exactDecimalStringsSupported = probe.format('9007199254740993') === '9007199254740993';
+    }
+    return exactDecimalStringsSupported;
+}
 // Intl accepts exact decimal strings in modern engines, but some engines still
 // turn strings beyond Number.MAX_VALUE into Infinity. BigInt bypasses that path.
 export function formatExactParts(formatter, value) {
@@ -60,8 +68,7 @@ export function formatExactParts(formatter, value) {
         return formatter.formatToParts(BigInt(decimal.toFixed(0)));
     if (decimal.e < 308) {
         const exactFormat = formatter.formatToParts;
-        const probe = new Intl.NumberFormat('en-US', { useGrouping: false });
-        if (probe.format('9007199254740993') !== '9007199254740993') {
+        if (!supportsExactDecimalStrings()) {
             throw new RangeError('NumberTicker decimal strings require exact Intl.NumberFormat string support');
         }
         return exactFormat.call(formatter, decimal.toString());

package/dist/overflow-list/index.js

@@ -157,6 +157,9 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
         widthCache.current.clear();
         setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true });
     }, [allKeys, layout.signature, signature]);
+    // Keep observer targets in sync when a resize reveals or hides items without
+    // changing whether an overflow trigger is needed. Memoized visibleEntries
+    // leaves the observer intact during unrelated parent updates.
     useEffect(() => {
         const root = rootRef.current;
         if (!root)
@@ -177,7 +180,7 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
                 frameRef.current = null;
             }
         };
-    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature]);
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature, visibleEntries]);
     useEffect(() => {
         const fonts = typeof document === 'undefined' ? undefined : document.fonts;
         if (!fonts?.addEventListener)
@@ -198,7 +201,7 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
     useEffect(() => {
         if (effectiveLayout.measuring)
             return;
-        const changeKey = `${signature}:${visibleEntries.map(entry => entry.key).join('|')}`;
+        const changeKey = JSON.stringify([signature, visibleEntries.map(entry => entry.key)]);
         if (lastChangeRef.current === changeKey)
             return;
         lastChangeRef.current = changeKey;

package/dist/overlay/Overlay.js

@@ -63,7 +63,7 @@ export const OverlayFooter = forwardRef(function OverlayFooter({ children, class
     const id = useId();
     return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__footer', className), "data-divided": divided || undefined, "data-align": align, children: [divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-footer-${id}` }), children] });
 });
-export const Overlay = Object.freeze({
+export const Overlay = /* @__PURE__ */ Object.freeze({
     Root: OverlayRoot,
     Trigger: OverlayTrigger,
     Portal: OverlayPortal,

package/dist/overlay/Popover.js

@@ -18,10 +18,10 @@ export const PopoverTrigger = forwardRef(function PopoverTrigger(props, forwarde
 export function PopoverPortal({ children, ...props }) {
     return mapPortalChildren(children, child => _jsx(PopoverPrimitive.Portal, { ...props, children: child }));
 }
-export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, collisionPadding = 12, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
     props = usePortalThemeProps(props);
-    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
+    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), collisionPadding: collisionPadding, ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
 });
 export const PopoverTitle = forwardRef(function PopoverTitle({ children, className, seed, ...props }, ref) {
     const id = useId();
@@ -34,7 +34,7 @@ export const PopoverDescription = forwardRef(function PopoverDescription({ child
 export const PopoverClose = forwardRef(function PopoverClose(props, ref) {
     return _jsx(PopoverPrimitive.Close, { ...props, ref: ref });
 });
-export const Popover = Object.freeze({
+export const Popover = /* @__PURE__ */ Object.freeze({
     Root: PopoverRoot,
     Anchor: PopoverAnchor,
     Trigger: PopoverTrigger,

package/dist/overlay/themeBridge.js

@@ -45,6 +45,14 @@ function readThemeSnapshot(node, forcedColors = isForcedColorsActive()) {
         style,
     };
 }
+function sameThemeSnapshot(left, right) {
+    if (left.theme !== right.theme || left.inkraTheme !== right.inkraTheme
+        || left.direction !== right.direction || left.language !== right.language)
+        return false;
+    const entries = Object.entries(left.style);
+    return entries.length === Object.keys(right.style).length
+        && entries.every(([property, value]) => right.style[property] === value);
+}
 export function PortalThemeProvider({ children }) {
     const parentDepth = useContext(PortalLayerDepthContext);
     const depth = parentDepth + 1;
@@ -52,12 +60,16 @@ export function PortalThemeProvider({ children }) {
     const [snapshot, setSnapshot] = useState(emptySnapshot);
     const captureTrigger = useCallback((node) => {
         setTrigger(node);
-        setSnapshot(readThemeSnapshot(node));
+        const next = readThemeSnapshot(node);
+        setSnapshot(current => sameThemeSnapshot(current, next) ? current : next);
     }, []);
     useEffect(() => {
         if (!trigger || typeof MutationObserver === 'undefined')
             return undefined;
-        const refresh = () => setSnapshot(readThemeSnapshot(trigger));
+        const refresh = () => {
+            const next = readThemeSnapshot(trigger);
+            setSnapshot(current => sameThemeSnapshot(current, next) ? current : next);
+        };
         const observer = new MutationObserver(refresh);
         for (let target = trigger; target; target = target.parentElement) {
             observer.observe(target, {