@kortix/ui 0.14.11 → 0.14.13

package/dist/markdown/doc-editor/doc-embed.js

@@ -0,0 +1,168 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../primitives/button.js';
+import { ButtonGroup } from '../../primitives/button-group.js';
+import { FaviconAvatar } from '../../primitives/favicon-avatar.js';
+import { Hint } from '../../primitives/hint.js';
+import { faviconUrlForUrl } from '../../lib/favicon.js';
+import { successToast } from '../../primitives/toast.js';
+import { ArrowSquareOutIcon, LinkSimpleIcon, TextTIcon, TrashIcon } from '@phosphor-icons/react';
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+const SUMMARY_MAX = 220;
+/** A link that can be a card: any http(s) address. */
+export function canEmbed(href) {
+    return /^https?:\/\/[^\s]+$/i.test(href) && URL.canParse(href);
+}
+/** `fix-the-thing` → `Fix the thing`. */
+function fromSlug(slug) {
+    const words = decodeURIComponent(slug).replace(/[-_]+/g, ' ').trim();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
+/** A Linear page's id and name from its URL: its pages need a login, so they tell nothing more. */
+function linearTitle(url) {
+    if (url.hostname !== 'linear.app')
+        return null;
+    const [, section, id, slug] = url.pathname.split('/').filter(Boolean);
+    if (section === 'issue' && id)
+        return [id.toUpperCase(), slug ? fromSlug(slug) : ''].filter(Boolean).join(' ');
+    // A project or document link ends in `<name>-<hash>`.
+    return id ? fromSlug(id.replace(/-[0-9a-f]{8,}$/i, '')) : 'Linear';
+}
+/** Strip complete HTML comments in one forward pass, including nested opening markers. */
+function withoutComments(text) {
+    const chunks = [];
+    let cursor = 0;
+    for (;;) {
+        const start = text.indexOf('<!--', cursor);
+        if (start === -1)
+            break;
+        const end = text.indexOf('-->', start + 4);
+        if (end === -1)
+            break;
+        chunks.push(text.slice(cursor, start), ' ');
+        cursor = end + 3;
+    }
+    chunks.push(text.slice(cursor));
+    return chunks.join('');
+}
+/** One plain line from page text (Markdown or HTML removed), capped. */
+export function plainSummary(text) {
+    if (!text)
+        return '';
+    const plain = withoutComments(text)
+        .replace(/```[\s\S]*?```/g, ' ')
+        .replace(/<[^<>]+>/g, ' ')
+        .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+        .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+        .replace(/^\s{0,3}(#{1,6}|>|[-*+]|\d+\.)\s+/gm, '')
+        .replace(/[*_`~]/g, '')
+        // Text a page escaped twice (GitHub's descriptions): shown as written, after tags are gone.
+        .replace(/&(lt|gt|quot|#39|apos|amp);/g, (_m, name) => ({ lt: '<', gt: '>', quot: '"', '#39': "'", apos: "'", amp: '&' })[name] ?? '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return plain.length > SUMMARY_MAX ? `${plain.slice(0, SUMMARY_MAX - 1).trimEnd()}…` : plain;
+}
+/** What the URL alone tells: the card when the page says nothing (a private page, Linear, a failed read). */
+export function embedFromUrl(href) {
+    if (!canEmbed(href))
+        return null;
+    const url = new URL(href);
+    const title = linearTitle(url) ?? `${url.hostname}${url.pathname === '/' ? '' : url.pathname}`;
+    return { href, title, summary: '', image: '' };
+}
+/**
+ * The card for a link: the page's own title, description and image, read by
+ * the API (`read`: `getLinkPreview` for the doc's project). GitHub's title
+ * reads "… by author · Pull Request #12 · owner/repo". Linear is not read (its
+ * pages need a login); a page that cannot be read is the card the URL gives.
+ */
+export async function fetchEmbed(href, read) {
+    const base = embedFromUrl(href);
+    if (!base || new URL(href).hostname === 'linear.app')
+        return base;
+    try {
+        const page = await read(href);
+        return { href, title: page.title ?? base.title, summary: plainSummary(page.description), image: page.image_url ?? '' };
+    }
+    catch {
+        return base;
+    }
+}
+const text = (el, cls) => el.querySelector(`.${cls}`)?.textContent?.trim() ?? '';
+/** The card's markup: the same in the editor and in the stored HTML. */
+function CardBody({ href, title, summary, image, onClick }) {
+    // An image that does not load (gone, blocked) leaves the card text only.
+    const [broken, setBroken] = useState(false);
+    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: [_jsxs("span", { className: "kx-embed-text", children: [_jsx("span", { className: "kx-embed-title", children: title }), summary ? _jsx("span", { className: "kx-embed-summary", children: summary }) : null, _jsxs("span", { className: "kx-embed-url", children: [!image || broken ? _jsx(FaviconAvatar, { value: href, size: "2xs" }) : null, _jsx("span", { className: "kx-embed-href", children: href })] })] }), image && !broken ? _jsx("img", { className: "kx-embed-image", src: image, alt: "", referrerPolicy: "no-referrer", onError: () => setBroken(true) }) : null] }));
+}
+/**
+ * The card in the editor, with its actions on hover, in one button group:
+ * Open link, Convert to a plain link, Copy link, Delete. While editing, a click on the card selects
+ * it; Open link opens the page.
+ */
+function LinkEmbedView({ node, editor, getPos, deleteNode }) {
+    const t = useTranslations('artifacts');
+    const meta = node.attrs;
+    const editable = editor.isEditable;
+    const convert = () => {
+        const at = getPos();
+        if (typeof at !== 'number')
+            return;
+        editor
+            .chain()
+            .focus()
+            .insertContentAt({ from: at, to: at + node.nodeSize }, { type: 'paragraph', content: [{ type: 'text', text: meta.href, marks: [{ type: 'link', attrs: { href: meta.href } }] }] })
+            .run();
+    };
+    const copy = async () => {
+        await navigator.clipboard.writeText(meta.href);
+        successToast(t('linkCopied'));
+    };
+    const action = (label, Icon, run) => (_jsx(Hint, { label: label, side: "top", children: _jsx(Button, { variant: "secondary", size: "icon-sm", "aria-label": label, onClick: run, children: _jsx(Icon, { className: "size-3.5" }) }) }));
+    return (_jsxs(NodeViewWrapper, { className: "kx-embed group/embed relative", children: [_jsx(CardBody, { ...meta, onClick: editable ? (e) => e.preventDefault() : undefined }), _jsx("div", { contentEditable: false, "data-embed-actions": "", className: "absolute top-2 right-2 opacity-0 transition-opacity group-focus-within/embed:opacity-100 group-hover/embed:opacity-100", children: _jsxs(ButtonGroup, { children: [action(t('embedOpen'), ArrowSquareOutIcon, () => window.open(meta.href, '_blank', 'noopener,noreferrer')), editable ? action(t('embedConvert'), TextTIcon, convert) : null, action(t('embedCopy'), LinkSimpleIcon, () => void copy()), editable ? action(t('embedDelete'), TrashIcon, deleteNode) : null] }) })] }));
+}
+/** The card in a doc: an atom block, `div.kx-embed` in the HTML and in the Markdown file. */
+export const LinkEmbed = Node.create({
+    name: 'linkEmbed',
+    group: 'block',
+    atom: true,
+    draggable: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            href: { default: '', rendered: false, parseHTML: (el) => el.querySelector('a')?.getAttribute('href') ?? '' },
+            title: { default: '', rendered: false, parseHTML: (el) => text(el, 'kx-embed-title') },
+            summary: { default: '', rendered: false, parseHTML: (el) => text(el, 'kx-embed-summary') },
+            image: { default: '', rendered: false, parseHTML: (el) => el.querySelector('img.kx-embed-image')?.getAttribute('src') ?? '' },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div.kx-embed', priority: 60 }];
+    },
+    renderHTML({ node }) {
+        const { href, title, summary, image } = node.attrs;
+        const textParts = [['span', { class: 'kx-embed-title' }, title]];
+        if (summary)
+            textParts.push(['span', { class: 'kx-embed-summary' }, summary]);
+        const favicon = image ? null : faviconUrlForUrl(href);
+        textParts.push([
+            'span',
+            { class: 'kx-embed-url' },
+            ...(favicon ? [['img', { class: 'kx-embed-favicon', src: favicon, alt: '', referrerpolicy: 'no-referrer' }]] : []),
+            ['span', { class: 'kx-embed-href' }, href],
+        ]);
+        const body = [['span', { class: 'kx-embed-text' }, ...textParts]];
+        if (image)
+            body.push(['img', { class: 'kx-embed-image', src: image, alt: '', referrerpolicy: 'no-referrer' }]);
+        return ['div', { class: 'kx-embed' }, ['a', { href, target: '_blank', rel: 'noopener noreferrer' }, ...body]];
+    },
+    addNodeView() {
+        // The editor leaves the action buttons to themselves (see DocCodeBlock).
+        return ReactNodeViewRenderer(LinkEmbedView, {
+            stopEvent: ({ event }) => !!event.target?.closest?.('[data-embed-actions]'),
+        });
+    },
+});

package/dist/markdown/doc-editor/doc-extensions.d.ts

@@ -0,0 +1,26 @@
+import { Node, type Extensions } from '@tiptap/core';
+/** An image in a doc (`![alt](src)` in the file). */
+export declare const DocImage: Node<import("@tiptap/extension-image").ImageOptions, any>;
+/** A video in a doc: `<video src controls>`, kept as HTML in the Markdown file. */
+export declare const Video: Node<any, any>;
+/**
+ * Code blocks; a ```mermaid block also shows its diagram under the source.
+ * The editor ignores events in the caption and the diagram: they belong to the
+ * language field, Copy and Edit. A doc's diagram has no fullscreen view.
+ */
+export declare const DocCodeBlock: Node<import("@tiptap/extension-code-block").CodeBlockOptions, any>;
+/**
+ * A line break in the Markdown source inside a paragraph. It reads as a space
+ * and saves as the newline it was (`markdown.ts`), so a hard-wrapped file
+ * keeps its lines. Backspace over it joins the words, like a space.
+ */
+export declare const SoftBreak: Node<any, any>;
+/** The document editor's extensions. `placeholder` names the empty line. */
+export declare function docExtensions({ editable, placeholder, }: {
+    editable: boolean;
+    placeholder: (node: {
+        type: {
+            name: string;
+        };
+    }) => string;
+}): Extensions;

package/dist/markdown/doc-editor/doc-extensions.js

@@ -0,0 +1,149 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The one Kortix document editor's schema: what a Markdown doc can hold when
+ * a person edits it in place. Doc artifacts and an agent's instructions use
+ * the same set, so a doc reads and edits the same everywhere. The look is
+ * `ARTIFACT_DOC_CSS` (`.kx-doc`); Markdown goes in and out through
+ * `markdown.ts`.
+ */
+import { Code } from '@tiptap/extension-code';
+import CodeBlock from '@tiptap/extension-code-block';
+import Image from '@tiptap/extension-image';
+import { TaskItem, TaskList } from '@tiptap/extension-list';
+import { TableKit } from '@tiptap/extension-table';
+import { Placeholder } from '@tiptap/extensions';
+import { Node, mergeAttributes } from '@tiptap/core';
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { CheckIcon, PencilSimpleIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import Hint from '../../primitives/hint.js';
+import { SessionDotMatrix } from '../../primitives/dot-matrix/session-dot-matrix.js';
+import { MermaidRenderer } from '../../primitives/mermaid-renderer.js';
+import { TextShimmer } from '../../primitives/text-shimmer.js';
+import { CopyButton } from '../copy-button.js';
+import { LinkEmbed } from './doc-embed.js';
+/**
+ * `uploading`: a pasted or dropped file shown from a local URL while it
+ * uploads (`data-uploading`). Never saved: `htmlToMarkdown` drops it.
+ */
+const uploadingAttribute = {
+    uploading: {
+        default: false,
+        parseHTML: (el) => el.hasAttribute('data-uploading'),
+        renderHTML: (attrs) => (attrs.uploading ? { 'data-uploading': '' } : {}),
+    },
+};
+/** An image or video in the editor, with an "Uploading…" chip while its file uploads. */
+function MediaView({ node }) {
+    const t = useTranslations('artifacts');
+    const { src, alt, title, uploading } = node.attrs;
+    return (_jsxs(NodeViewWrapper, { className: "kx-media", "data-uploading": uploading || undefined, "data-drag-handle": "", children: [node.type.name === 'video' ? (_jsx("video", { src: src, controls: true, preload: "metadata" })) : (
+            // eslint-disable-next-line @next/next/no-img-element -- a doc's own media, any origin
+            _jsx("img", { src: src, alt: alt ?? '', title: title })), uploading ? (_jsxs("span", { contentEditable: false, className: "bg-popover text-foreground absolute bottom-3 left-3 flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium shadow-sm", children: [_jsx(SessionDotMatrix, { sessionId: src, size: 14, className: "shrink-0" }), _jsx(TextShimmer, { duration: 1, spread: 2, className: "text-xs", children: t('uploading') })] })) : null] }));
+}
+/** An image in a doc (`![alt](src)` in the file). */
+export const DocImage = Image.extend({
+    draggable: true,
+    addAttributes() {
+        return { ...this.parent?.(), ...uploadingAttribute };
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(MediaView);
+    },
+});
+/** A video in a doc: `<video src controls>`, kept as HTML in the Markdown file. */
+export const Video = Node.create({
+    name: 'video',
+    group: 'block',
+    atom: true,
+    draggable: true,
+    addAttributes() {
+        return { src: { default: null }, ...uploadingAttribute };
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(MediaView);
+    },
+    parseHTML() {
+        return [{ tag: 'video[src]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['video', mergeAttributes(HTMLAttributes, { controls: 'true', preload: 'metadata' })];
+    },
+});
+/** The code-fence language id of a block that names none: a Markdown token, not UI copy. */
+const PLAIN_LANGUAGE = 'text';
+function CodeBlockView({ node, editor, updateAttributes }) {
+    const t = useTranslations('artifacts');
+    const [editing, setEditing] = useState(false);
+    const source = node.textContent.trim();
+    const language = node.attrs.language ?? '';
+    const diagram = language === 'mermaid' && source;
+    // A diagram shows as a picture; its source opens only for someone editing it.
+    const showSource = !diagram || editing;
+    return (_jsxs(NodeViewWrapper, { as: "div", children: [_jsxs("figure", { className: "kx-code", hidden: !showSource, children: [_jsxs("figcaption", { contentEditable: false, children: [editor.isEditable ? (_jsx("input", { "aria-label": t('codeLanguage'), placeholder: PLAIN_LANGUAGE, value: language, onChange: (e) => updateAttributes({ language: e.target.value.trim().toLowerCase() || null }) })) : (_jsx("span", { children: language || PLAIN_LANGUAGE })), source ? _jsx(CopyButton, { code: node.textContent }) : null] }), _jsx("pre", { children: _jsx(NodeViewContent, { as: "code" }) })] }), diagram ? (_jsx("div", { contentEditable: false, className: "kx-diagram", children: _jsx(MermaidRenderer, { chart: source, enableFullscreen: false, actions: editor.isEditable ? (_jsx(Hint, { label: editing ? t('diagramDone') : t('diagramEdit'), side: "top", children: _jsx(Button, { variant: "secondary", size: "icon-sm", "aria-label": editing ? t('diagramDone') : t('diagramEdit'), "aria-pressed": editing, onClick: () => setEditing((v) => !v), children: editing ? _jsx(CheckIcon, { className: "size-3.5" }) : _jsx(PencilSimpleIcon, { className: "size-3.5" }) }) })) : null }) })) : null] }));
+}
+/**
+ * Code blocks; a ```mermaid block also shows its diagram under the source.
+ * The editor ignores events in the caption and the diagram: they belong to the
+ * language field, Copy and Edit. A doc's diagram has no fullscreen view.
+ */
+export const DocCodeBlock = CodeBlock.extend({
+    addNodeView() {
+        // The element a DOM node or event target is, or sits in (a text node's parent).
+        const elementOf = (target) => target instanceof Element ? target : (target?.parentElement ?? null);
+        const controls = (target) => !!elementOf(target)?.closest('.kx-diagram, .kx-code > figcaption');
+        return ReactNodeViewRenderer(CodeBlockView, {
+            stopEvent: ({ event }) => controls(event.target),
+        });
+    },
+});
+/**
+ * A line break in the Markdown source inside a paragraph. It reads as a space
+ * and saves as the newline it was (`markdown.ts`), so a hard-wrapped file
+ * keeps its lines. Backspace over it joins the words, like a space.
+ */
+export const SoftBreak = Node.create({
+    name: 'softBreak',
+    group: 'inline',
+    inline: true,
+    selectable: false,
+    parseHTML() {
+        return [{ tag: 'span[data-soft-break]' }];
+    },
+    renderHTML() {
+        return ['span', { 'data-soft-break': '' }, ' '];
+    },
+    renderText() {
+        return ' ';
+    },
+});
+/**
+ * Inline code that may sit inside bold or a link: StarterKit's code mark
+ * excludes every other mark, which would drop the bold from
+ * "**`view` before a task**" on the first save.
+ */
+const DocCode = Code.extend({ excludes: '' });
+/** The document editor's extensions. `placeholder` names the empty line. */
+export function docExtensions({ editable, placeholder, }) {
+    return [
+        StarterKit.configure({
+            code: false,
+            codeBlock: false,
+            link: { openOnClick: !editable, autolink: true, defaultProtocol: 'https' },
+        }),
+        DocCode,
+        DocCodeBlock,
+        SoftBreak,
+        TableKit.configure({ table: { resizable: false } }),
+        DocImage,
+        Video,
+        TaskList,
+        TaskItem.configure({ nested: true }),
+        LinkEmbed,
+        Placeholder.configure({ placeholder: ({ node }) => placeholder(node) }),
+    ];
+}

package/dist/markdown/doc-editor/doc-menus.d.ts

@@ -0,0 +1,9 @@
+import { type Editor } from '@tiptap/react';
+export declare function DocMenus({ editor, blockMenu, editable, canComment, commenting, onComment, }: {
+    editor: Editor;
+    blockMenu?: boolean;
+    editable?: boolean;
+    canComment?: boolean;
+    commenting?: boolean;
+    onComment?: () => void;
+}): import("react").JSX.Element;

package/dist/markdown/doc-editor/doc-menus.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The document editor's two menus: one over selected text (marks, headings,
+ * quote, table rows) and a `+` menu on an empty line (blocks). Markdown
+ * shortcuts (`# `, `- `, `1. `, `[ ] `, `> `, ``` ```) work without them.
+ * `blockMenu={false}` drops the `+` menu, for an editor with a `/` block menu.
+ * `canComment` adds a Comment button over selected text; with `editable={false}`
+ * it is the only button.
+ */
+import { ChatCircleIcon, CheckSquareIcon, CodeBlockIcon, CodeIcon, LinkSimpleIcon, ListBulletsIcon, ListNumbersIcon, MinusIcon, PlusIcon, QuotesIcon, TableIcon, TextBIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextItalicIcon, TextStrikethroughIcon, TrashIcon, } from '@phosphor-icons/react';
+import { TextSelection } from '@tiptap/pm/state';
+import { useEditorState } from '@tiptap/react';
+import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import Hint from '../../primitives/hint.js';
+function MenuButton({ icon: IconCmp, label, active, onClick, disabled, }) {
+    return (_jsx(Hint, { label: label, side: "top", sideOffset: 6, children: _jsx(Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": label, "aria-pressed": active, "aria-busy": disabled || undefined, disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: onClick, className: "data-[active=true]:bg-active data-[active=true]:text-foreground text-muted-foreground", "data-active": active || undefined, children: _jsx(IconCmp, { className: "size-4" }) }) }));
+}
+const MENU = 'bg-popover text-popover-foreground flex items-center gap-0.5 rounded-lg border p-1 shadow-md';
+export function DocMenus({ editor, blockMenu = true, editable = true, canComment = false, commenting = false, onComment, }) {
+    const t = useTranslations('artifacts');
+    const state = useEditorState({
+        editor,
+        selector: ({ editor: e }) => ({
+            bold: e.isActive('bold'),
+            italic: e.isActive('italic'),
+            strike: e.isActive('strike'),
+            code: e.isActive('code'),
+            link: e.isActive('link'),
+            h1: e.isActive('heading', { level: 1 }),
+            h2: e.isActive('heading', { level: 2 }),
+            h3: e.isActive('heading', { level: 3 }),
+            quote: e.isActive('blockquote'),
+            table: e.isActive('table'),
+        }),
+    });
+    const chain = () => editor.chain().focus();
+    const setLink = () => {
+        const previous = editor.getAttributes('link').href;
+        const url = window.prompt(t('linkPrompt'), previous ?? 'https://');
+        if (url === null)
+            return;
+        if (url.trim() === '')
+            chain().extendMarkRange('link').unsetLink().run();
+        else
+            chain().extendMarkRange('link').setLink({ href: url.trim() }).run();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(BubbleMenu, { editor: editor, options: { placement: 'top' }, shouldShow: ({ editor: e, state: s, from, to }) => (editable || canComment) &&
+                    s.selection instanceof TextSelection &&
+                    from !== to &&
+                    !!s.doc.textBetween(from, to).trim() &&
+                    !e.isActive('image') &&
+                    !e.isActive('video'), children: _jsxs("div", { className: MENU, children: [editable ? (_jsxs(_Fragment, { children: [_jsx(MenuButton, { icon: TextBIcon, label: t('bold'), active: state.bold, onClick: () => chain().toggleBold().run() }), _jsx(MenuButton, { icon: TextItalicIcon, label: t('italic'), active: state.italic, onClick: () => chain().toggleItalic().run() }), _jsx(MenuButton, { icon: TextStrikethroughIcon, label: t('strike'), active: state.strike, onClick: () => chain().toggleStrike().run() }), _jsx(MenuButton, { icon: CodeIcon, label: t('inlineCode'), active: state.code, onClick: () => chain().toggleCode().run() }), _jsx(MenuButton, { icon: LinkSimpleIcon, label: t('link'), active: state.link, onClick: setLink }), _jsx("span", { className: "bg-border mx-0.5 h-5 w-px" }), _jsx(MenuButton, { icon: TextHOneIcon, label: t('heading1'), active: state.h1, onClick: () => chain().toggleHeading({ level: 1 }).run() }), _jsx(MenuButton, { icon: TextHTwoIcon, label: t('heading2'), active: state.h2, onClick: () => chain().toggleHeading({ level: 2 }).run() }), _jsx(MenuButton, { icon: TextHThreeIcon, label: t('heading3'), active: state.h3, onClick: () => chain().toggleHeading({ level: 3 }).run() }), _jsx(MenuButton, { icon: QuotesIcon, label: t('quote'), active: state.quote, onClick: () => chain().toggleBlockquote().run() }), state.table ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "bg-border mx-0.5 h-5 w-px" }), _jsx(MenuButton, { icon: PlusIcon, label: t('addRow'), onClick: () => chain().addRowAfter().run() }), _jsx(MenuButton, { icon: ListBulletsIcon, label: t('addColumn'), onClick: () => chain().addColumnAfter().run() }), _jsx(MenuButton, { icon: MinusIcon, label: t('deleteRow'), onClick: () => chain().deleteRow().run() }), _jsx(MenuButton, { icon: TrashIcon, label: t('deleteTable'), onClick: () => chain().deleteTable().run() })] })) : null] })) : null, canComment && onComment ? (_jsxs(_Fragment, { children: [editable ? _jsx("span", { className: "bg-border mx-0.5 h-5 w-px" }) : null, _jsx(MenuButton, { icon: ChatCircleIcon, label: t('discussion.commentSelection'), onClick: onComment, disabled: commenting })] })) : null] }) }), editable && blockMenu ? (_jsx(FloatingMenu, { editor: editor, options: { placement: 'bottom-start', offset: 6 }, children: _jsxs("div", { className: MENU, children: [_jsx(MenuButton, { icon: TextHOneIcon, label: t('heading1'), onClick: () => chain().setHeading({ level: 1 }).run() }), _jsx(MenuButton, { icon: TextHTwoIcon, label: t('heading2'), onClick: () => chain().setHeading({ level: 2 }).run() }), _jsx(MenuButton, { icon: TextHThreeIcon, label: t('heading3'), onClick: () => chain().setHeading({ level: 3 }).run() }), _jsx(MenuButton, { icon: ListBulletsIcon, label: t('bulletList'), onClick: () => chain().toggleBulletList().run() }), _jsx(MenuButton, { icon: ListNumbersIcon, label: t('numberedList'), onClick: () => chain().toggleOrderedList().run() }), _jsx(MenuButton, { icon: CheckSquareIcon, label: t('taskList'), onClick: () => chain().toggleTaskList().run() }), _jsx(MenuButton, { icon: QuotesIcon, label: t('quote'), onClick: () => chain().toggleBlockquote().run() }), _jsx(MenuButton, { icon: CodeBlockIcon, label: t('codeBlock'), onClick: () => chain().toggleCodeBlock().run() }), _jsx(MenuButton, { icon: TableIcon, label: t('table'), onClick: () => chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }), _jsx(MenuButton, { icon: MinusIcon, label: t('divider'), onClick: () => chain().setHorizontalRule().run() })] }) })) : null] }));
+}

package/dist/markdown/doc-editor/markdown.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The document editor holds Markdown files (a doc artifact, an agent's
+ * instructions). The editor works in HTML, so a doc goes Markdown → HTML on
+ * load and HTML → Markdown on save. GFM tables, strikethrough and task lists
+ * survive the round trip, and so do the file's own line breaks: a source
+ * line break inside a paragraph (a soft break) becomes
+ * `<span data-soft-break>`, which reads as a space and saves as a newline.
+ * A file wrapped at 72 columns stays wrapped, so a one-word edit is a
+ * one-line diff.
+ */
+export declare function markdownToHtml(markdown: string): string;
+export declare function htmlToMarkdown(html: string): string;

package/dist/markdown/doc-editor/markdown.js

@@ -0,0 +1,140 @@
+import { Marked } from 'marked';
+import TurndownService from 'turndown';
+import { strikethrough, tables } from 'turndown-plugin-gfm';
+const escapeHtml = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+/**
+ * Raw HTML in the Markdown shows as the text it is (`<package>` in a
+ * sentence), so the editor keeps it and saves it back. The editor has no
+ * node for an unknown tag and would drop it. A `<video>` and a link card
+ * (`<div class="kx-embed">`, doc-embed.tsx) are the tags a doc holds as HTML.
+ */
+const DOC_HTML = /^(<\/?video\b|<div class="kx-embed">)/i;
+const parser = new Marked({
+    renderer: {
+        html: ({ text }) => (DOC_HTML.test(text.trim()) ? text : escapeHtml(text)),
+    },
+});
+/**
+ * The document editor holds Markdown files (a doc artifact, an agent's
+ * instructions). The editor works in HTML, so a doc goes Markdown → HTML on
+ * load and HTML → Markdown on save. GFM tables, strikethrough and task lists
+ * survive the round trip, and so do the file's own line breaks: a source
+ * line break inside a paragraph (a soft break) becomes
+ * `<span data-soft-break>`, which reads as a space and saves as a newline.
+ * A file wrapped at 72 columns stays wrapped, so a one-word edit is a
+ * one-line diff.
+ */
+export function markdownToHtml(markdown) {
+    const html = parser.parse(markdown, { gfm: true, async: false })
+        // marked's task items → the editor's (`li[data-type=taskItem]`).
+        // A loose list (blank lines between items) puts the box inside a <p>: keep the <p> as the item's text.
+        .replace(/<li>(<p>)?<input (checked="" )?disabled="" type="checkbox">\s*/g, (_m, p, checked) => `<li data-type="taskItem" data-checked="${checked ? 'true' : 'false'}">${p ?? ''}`)
+        .replace(/<ul>(\s*<li data-type="taskItem")/g, '<ul data-type="taskList">$1')
+        // marked keeps a fence's last newline; the editor would show it as an empty line.
+        .replace(/\n<\/code><\/pre>/g, '</code></pre>');
+    return markSoftBreaks(html);
+}
+const TEXT_BLOCK = 'p, li, h1, h2, h3, h4, h5, h6, td, th';
+const BLOCK_TAGS = new Set(['UL', 'OL', 'P', 'PRE', 'BLOCKQUOTE', 'TABLE', 'DIV', 'HR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
+const CONTAINER_TAGS = new Set([...BLOCK_TAGS, 'LI', 'THEAD', 'TBODY', 'TR']);
+/** Each newline inside a text block's text → `<span data-soft-break> </span>`. */
+function markSoftBreaks(html) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const walker = doc.createTreeWalker(doc.body, 4 /* NodeFilter.SHOW_TEXT */);
+    const texts = [];
+    for (let node = walker.nextNode(); node; node = walker.nextNode())
+        texts.push(node);
+    for (const text of texts) {
+        const parent = text.parentElement;
+        if (!parent || !text.data.includes('\n') || parent.closest('pre, code'))
+            continue;
+        const block = parent.closest(TEXT_BLOCK);
+        // Only text that flows in the block: not the newlines between a nested list's items.
+        if (!block || (parent !== block && CONTAINER_TAGS.has(parent.nodeName)))
+            continue;
+        // A newline beside a block edge (before a nested list, at the item's end) is layout, not a break.
+        const edge = (sibling) => (sibling ? BLOCK_TAGS.has(sibling.nodeName) : parent === block);
+        let data = text.data;
+        if (edge(text.nextSibling))
+            data = data.replace(/\n+$/, '');
+        if (edge(text.previousSibling))
+            data = data.replace(/^\n+/, '');
+        const pieces = [];
+        data.split('\n').forEach((part, i) => {
+            if (i > 0) {
+                const soft = doc.createElement('span');
+                soft.setAttribute('data-soft-break', '');
+                soft.textContent = ' ';
+                pieces.push(soft);
+            }
+            if (part)
+                pieces.push(doc.createTextNode(part));
+        });
+        text.replaceWith(...pieces);
+    }
+    return doc.body.innerHTML;
+}
+let service = null;
+function turndown() {
+    if (service)
+        return service;
+    const td = new TurndownService({
+        headingStyle: 'atx',
+        bulletListMarker: '-',
+        codeBlockStyle: 'fenced',
+        emDelimiter: '*',
+        // A soft break holds only a space, so turndown sees it as blank: it saves as the newline it was.
+        blankReplacement: (_content, node) => node.nodeName === 'SPAN' && node.hasAttribute('data-soft-break')
+            ? '\n'
+            : node.isBlock
+                ? '\n\n'
+                : '',
+    });
+    tables(td);
+    strikethrough(td);
+    td.addRule('taskItem', {
+        filter: (node) => node.nodeName === 'LI' && node.getAttribute('data-type') === 'taskItem',
+        replacement: (content, node) => `- [${node.getAttribute('data-checked') === 'true' ? 'x' : ' '}] ${content.trim().replace(/\n+/g, ' ')}\n`,
+    });
+    // Tight items (`- a`, `1. a`), nested lines indented to the marker's width.
+    // Added after taskItem, so it would win (turndown tries later rules first): skip task items.
+    td.addRule('listItem', {
+        filter: (node) => node.nodeName === 'LI' && node.getAttribute('data-type') !== 'taskItem',
+        replacement: (content, node) => {
+            const parent = node.parentNode;
+            const index = parent ? Array.prototype.indexOf.call(parent.children, node) : 0;
+            const start = Number(parent?.getAttribute('start') ?? 1);
+            const prefix = parent?.nodeName === 'OL' ? `${start + index}. ` : '- ';
+            const body = content.replace(/^\n+/, '').replace(/\n+$/, '').replace(/\n/g, `\n${' '.repeat(prefix.length)}`);
+            return `${prefix}${body}\n`;
+        },
+    });
+    // An underscore inside a word (`feature_disabled`) never starts emphasis: keep it bare.
+    const escape = td.escape.bind(td);
+    td.escape = (text) => escape(text).replace(/(\w)\\_(?=\w)/g, '$1_');
+    td.remove(['label']);
+    // A video stays an HTML tag inside the Markdown: Markdown has none.
+    td.keep(['video']);
+    // A link card stays one line of HTML (doc-embed.tsx): a Markdown HTML block, served as written.
+    td.addRule('linkEmbed', {
+        filter: (node) => node.nodeName === 'DIV' && node.classList.contains('kx-embed'),
+        replacement: (_content, node) => `\n\n${node.outerHTML.replace(/\s*\n\s*/g, ' ')}\n\n`,
+    });
+    service = td;
+    return td;
+}
+export function htmlToMarkdown(html) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    // A table cell holds one line in Markdown: unwrap the editor's paragraphs.
+    doc.querySelectorAll('td > p, th > p').forEach((p) => p.replaceWith(...Array.from(p.childNodes)));
+    // A list item with one paragraph is one line: unwrap it, so the list stays tight.
+    doc.querySelectorAll('li > p:only-of-type').forEach((p) => p.replaceWith(...Array.from(p.childNodes)));
+    doc.querySelectorAll('colgroup').forEach((c) => c.remove());
+    // Media still uploading is a local preview: the file gets it once the upload lands.
+    doc.querySelectorAll('[data-uploading]').forEach((el) => el.remove());
+    // Empty, so turndown adds no flanking space: the soft break saves as a bare newline.
+    doc.querySelectorAll('span[data-soft-break]').forEach((s) => {
+        s.textContent = '';
+    });
+    return `${turndown().turndown(doc.body.innerHTML).trim()}\n`;
+}

package/dist/markdown/genui/components/inline.d.ts

@@ -12,6 +12,6 @@ export declare const genuiBadgeClass: (tone: BadgeTone) => string;
 export declare function GenuiBadge({ props }: GenuiComponentProps): import("react").JSX.Element;
 export declare function GenuiCallout({ props }: GenuiComponentProps): import("react").JSX.Element;
 /** Set inside an image gallery (layout.tsx): the tile sizes the image, which covers it. A `tile` shows its caption on hover. */
-export declare const GenuiImageGridContext: import("react").Context<false | "tile" | "lead">;
+export declare const GenuiImageGridContext: import("react").Context<false | "lead" | "tile">;
 export declare function GenuiImage({ props }: GenuiComponentProps): import("react").JSX.Element;
 export declare function GenuiLink({ props }: GenuiComponentProps): import("react").JSX.Element;

package/dist/primitives/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "accent" | "secondary" | "success" | "warning" | "info" | "beta" | "default" | "kortix" | "destructive" | "update" | "new" | "muted" | "transparent" | "solid" | "badgeSuccess" | "highlight" | "royal" | null | undefined;
+    variant?: "outline" | "accent" | "secondary" | "success" | "warning" | "info" | "beta" | "default" | "kortix" | "new" | "destructive" | "update" | "muted" | "transparent" | "solid" | "badgeSuccess" | "highlight" | "royal" | null | undefined;
     size?: "default" | "xs" | "sm" | "tabular" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {

package/dist/primitives/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "input" | "text" | "popover" | "background" | "outline" | "accent" | "error" | "secondary" | "success" | "warning" | "info" | "default" | "destructive" | "muted" | "danger" | "blue" | "transparent" | "brand" | "blue-ghost" | "blue-secondary" | "outline-ghost" | "secondary-outline" | "sidebar" | "ghost" | "foreground" | "outline-foreground" | "inverse" | "invert-outline-foreground" | "ghost-input" | "ghost-sidebar" | "outline-sidebar" | null | undefined;
+    variant?: "link" | "input" | "text" | "popover" | "background" | "outline" | "accent" | "error" | "secondary" | "success" | "warning" | "info" | "default" | "destructive" | "blue" | "muted" | "danger" | "transparent" | "brand" | "blue-ghost" | "blue-secondary" | "outline-ghost" | "secondary-outline" | "sidebar" | "ghost" | "foreground" | "outline-foreground" | "inverse" | "invert-outline-foreground" | "ghost-input" | "ghost-sidebar" | "outline-sidebar" | null | undefined;
     size?: "base" | "default" | "icon" | "toolbar" | "xs" | "sm" | "lg" | "xl" | "icon-xs" | "icon-sm" | "icon-base" | "icon-md" | "icon-lg" | "magic-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/primitives/pixel-kortix-mark.d.ts

@@ -1,10 +1,11 @@
+import { PIXEL_KORTIX_ROWS } from '../_vendor/shared/pixel-mark.js';
 import { type ComponentPropsWithoutRef } from 'react';
 /**
- * The Kortix symbol (`kortix-logo.tsx`, `variant="icon"`) sampled onto a
- * 12 × 10 grid. `#` is a cell the symbol fully covers; `+` is a cell on a curve
- * that it only partly covers, drawn as a checker so the curves read as dither.
+ * The Kortix symbol on a 12 × 10 grid: `#` a full cell, `+` a curve cell drawn
+ * as a checker. The rows live in `@kortix/shared/pixel-mark` so the TUI splash
+ * draws the same symbol; this module re-exports them under the same name.
  */
-export declare const PIXEL_KORTIX_ROWS: readonly ["##   ##   ##", "##   ##   ##", "+#+  ##  +#+", " ##+ ## +## ", "  ########  ", "  ########  ", " ##+ ## +## ", "+#+  ##  +#+", "##   ##   ##", "##   ##   ##"];
+export { PIXEL_KORTIX_ROWS };
 /**
  * Decorative pixel art of the Kortix symbol, for empty states. It paints in
  * `currentColor`, so the caller sets the tone. It is always `aria-hidden`: the