@kortix/ui 0.14.12 → 0.14.14

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

package/dist/primitives/pixel-kortix-mark.js

@@ -1,24 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PIXEL_KORTIX_ROWS } from '../_vendor/kortix-shared.js';
 import { useId } from 'react';
 import { cn } from '../lib/utils.js';
 /**
- * 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 const PIXEL_KORTIX_ROWS = [
-    '##   ##   ##',
-    '##   ##   ##',
-    '+#+  ##  +#+',
-    ' ##+ ## +## ',
-    '  ########  ',
-    '  ########  ',
-    ' ##+ ## +## ',
-    '+#+  ##  +#+',
-    '##   ##   ##',
-    '##   ##   ##',
-];
+export { PIXEL_KORTIX_ROWS };
 /** Cell size and the gap after it, in viewBox units. At the default size one
  *  unit is one CSS pixel, so cells and the 1px checker land on whole pixels. */
 const CELL = 5;

package/dist/primitives/tag.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const tagVariants: (props?: ({
-    variant?: "custom" | "warning" | "default" | "free" | "new" | "latest" | null | undefined;
+    variant?: "custom" | "warning" | "default" | "new" | "free" | "latest" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Tag({ className, variant, ...props }: React.ComponentProps<'span'> & VariantProps<typeof tagVariants>): React.JSX.Element;
 export { Tag, tagVariants };

package/dist/primitives/textarea.js

@@ -4,11 +4,25 @@ import { inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTrans
 import { cn } from '../lib/utils.js';
 import * as React from 'react';
 import { useImperativeHandle } from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 0, }) => {
     const [init, setInit] = React.useState(true);
     const [currentHeight, setCurrentHeight] = React.useState(minHeight);
     const previousContentRef = React.useRef(triggerAutoSize);
     const resizeTimeoutRef = React.useRef(null);
+    // Size an empty textarea before the first paint. Otherwise it paints at the
+    // browser's `rows` height and the resize below snaps it 100 ms later: a
+    // visible jump (the New agent modal's "What it does" field).
+    useIsomorphicLayoutEffect(() => {
+        const textAreaElement = textAreaRef.current;
+        if (!textAreaElement)
+            return;
+        textAreaElement.style.minHeight = `${minHeight + 6}px`;
+        if (maxHeight > minHeight)
+            textAreaElement.style.maxHeight = `${maxHeight}px`;
+        if (textAreaElement.value.trim() === '')
+            textAreaElement.style.height = `${minHeight}px`;
+    }, [textAreaRef, minHeight, maxHeight]);
     React.useEffect(() => {
         const offsetBorder = 6;
         const textAreaElement = textAreaRef.current;

package/dist/primitives/toast.d.ts

@@ -10,6 +10,8 @@ type ToastOptions = {
     description?: string;
     duration?: number;
     id?: string | number;
+    /** Runs when the toast leaves: a dismissal or its timeout. */
+    onClose?: () => void;
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center' | 'bottom-center';
     /** Text links under the body, joined by a dot. */
     actions?: ToastAction[];

package/dist/primitives/toast.js

@@ -34,6 +34,8 @@ const toastData = (options, duration, isMobile) => ({
     duration,
     position: isMobile ? 'top-center' : options?.position || DEFAULT_POSITION,
 });
+/** sonner's two ways off the screen, as one callback. */
+const closeCallbacks = (onClose) => onClose ? { onDismiss: onClose, onAutoClose: onClose } : {};
 /** A 16px filled status disc. The mark inside is drawn in the card's own color. */
 function Disc({ className, children }) {
     return (
@@ -150,7 +152,7 @@ function UndoToastCard({ message, icon, undoLabel, onUndo, onDismiss, }) {
  */
 const renderToast = (message, variant, options, duration) => {
     const isMobile = window.innerWidth <= 768;
-    return toast.custom((t) => (_jsx(ToastCard, { message: message, icon: toastIcon(variant), variant: variant, options: options, onDismiss: () => toast.dismiss(t) })), toastData(options, duration, isMobile));
+    return toast.custom((t) => (_jsx(ToastCard, { message: message, icon: toastIcon(variant), variant: variant, options: options, onDismiss: () => toast.dismiss(t) })), { ...toastData(options, duration, isMobile), ...closeCallbacks(options?.onClose) });
 };
 export const successToast = (message, options) => {
     renderToast(message, 'success', options, options?.duration || DEFAULT_DURATION);
@@ -216,7 +218,7 @@ export const customToast = (render, options) => {
     const isMobile = window.innerWidth <= 768;
     return toast.custom((t) => render(() => toast.dismiss(t)), {
         ...toastData(options, options.duration ?? DEFAULT_DURATION, isMobile),
-        ...(options.onClose ? { onDismiss: options.onClose, onAutoClose: options.onClose } : {}),
+        ...closeCallbacks(options.onClose),
     });
 };
 /**

package/dist/providers/ui-provider.d.ts

@@ -320,6 +320,22 @@ export interface UiHostComponents {
      * (apps/web: its mobile app). Without it, nothing is shown.
      */
     HomeAnnouncement?: React.ComponentType;
+    /**
+     * One room's conversation (flag `agent_rooms`): its messages and a composer,
+     * by room NAME. A room that does not exist yet shows an empty state, and the
+     * first post creates it with `emptyTopic`. A space page renders its own room
+     * (the room named like the space's slug) through it, `fill` in its room
+     * tab: no frame, no header, the container's full height. Without it, a link
+     * to the rooms page.
+     */
+    RoomPanel?: React.ComponentType<{
+        projectId: string;
+        roomName: string;
+        emptyTopic?: string;
+        fill?: boolean;
+        /** Replaces the room's one-line intro above its first message (the space page's room tab). */
+        intro?: React.ReactNode;
+    }>;
     /** Who can open a session, and its public link. Without it, the header has no Share button. */
     ShareSessionModal?: React.ComponentType<{
         projectId: string;

package/dist/session/actions/session-label.d.ts

@@ -27,7 +27,7 @@ export interface SessionSource {
     /** For trigger-fired sessions: the kortix.yaml trigger slug. */
     triggerSlug: string | null;
 }
-/** The platform meta coordinator — drives other sessions from its own sandbox. */
+/** My Kortix (slug `mykortix`, `meta` on an older session), the built-in agent — drives other sessions from its own sandbox. */
 export declare function isMetaCoordinatorSession(session: ProjectSession): boolean;
 /**
  * Viewer-relative ownership marker.

package/dist/session/actions/session-label.js

@@ -1,8 +1,8 @@
-import { stripChatMentionMarkup } from '../../_vendor/kortix-shared.js';
+import { isMyKortixAgentName, stripChatMentionMarkup } from '../../_vendor/kortix-shared.js';
 import { isLegacyMigratedSession, SESSION_LIST_STATUS, sessionListStatus, } from '@kortix/sdk';
-/** The platform meta coordinator — drives other sessions from its own sandbox. */
+/** My Kortix (slug `mykortix`, `meta` on an older session), the built-in agent — drives other sessions from its own sandbox. */
 export function isMetaCoordinatorSession(session) {
-    return session.agent_name === 'meta';
+    return isMyKortixAgentName(session.agent_name);
 }
 /**
  * Viewer-relative ownership marker.