@columenlabs/lumen-ui 0.1.195 → 0.1.197

package/dist/assistant/chat-markdown.d.ts

@@ -0,0 +1,3 @@
+export default function ChatMarkdown({ children }: {
+    children: string;
+}): import("react").JSX.Element;

package/dist/assistant/chat-markdown.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '../lib/utils.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
+const ALLOWED = [
+    'p',
+    'strong',
+    'em',
+    'del',
+    'code',
+    'ul',
+    'ol',
+    'li',
+    'a',
+    'pre',
+    'br',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+];
+// A number, with an optional sign, currency, thousands, decimals and a short unit (12, −3.5%,
+// $1,204.10, 2.1×, 4.2K). A dash or an empty cell does not decide a column either way.
+const NUMBER = /^[−+\-]?[$€£]?\d[\d,]*(\.\d+)?\s?(%|×|x|[KMBkmb])?$/;
+const BLANK = /^(|—|–|-|n\/a)$/i;
+function text(node) {
+    if (node.type === 'text')
+        return node.value ?? '';
+    return (node.children ?? []).map(text).join('');
+}
+const cells = (row) => (row.children ?? []).filter((c) => c.tagName === 'td' || c.tagName === 'th');
+const rows = (section) => (section?.children ?? []).filter((c) => c.tagName === 'tr');
+/**
+ * Marks each cell of a column that holds only numbers `dataNum`, so the column right-aligns on
+ * one edge, and gives every cell its text as `dataText` for its hover.
+ */
+function rehypeNumberColumns() {
+    const visit = (node) => {
+        if (node.tagName === 'table') {
+            const head = node.children?.find((c) => c.tagName === 'thead');
+            const body = node.children?.find((c) => c.tagName === 'tbody');
+            const bodyRows = rows(body);
+            const width = Math.max(0, ...[...rows(head), ...bodyRows].map((r) => cells(r).length));
+            const numeric = Array.from({ length: width }, (_, i) => {
+                const values = bodyRows.map((r) => text(cells(r)[i] ?? { type: 'root' }).trim());
+                const filled = values.filter((v) => !BLANK.test(v));
+                return filled.length > 0 && filled.every((v) => NUMBER.test(v));
+            });
+            for (const r of [...rows(head), ...bodyRows]) {
+                cells(r).forEach((c, i) => {
+                    c.properties = { ...c.properties, dataText: text(c).trim() };
+                    if (numeric[i])
+                        c.properties.dataNum = '';
+                });
+            }
+            return;
+        }
+        node.children?.forEach(visit);
+    };
+    return (tree) => visit(tree);
+}
+// A header keeps the label font; only its edge follows the numbers under it.
+const cellClass = (p, head = false) => cn('max-w-xs overflow-hidden text-ellipsis', p['data-num'] !== undefined && (head ? 'text-right' : 'num text-right'));
+const components = {
+    table: ({ children }) => (_jsx("div", { className: "not-prose my-2 rounded-md border", children: _jsx(Table, { className: "text-xs", children: children }) })),
+    thead: ({ children }) => _jsx(TableHeader, { children: children }),
+    tbody: ({ children }) => _jsx(TableBody, { children: children }),
+    tr: ({ children }) => _jsx(TableRow, { children: children }),
+    th: (p) => (_jsx(TableHead, { className: cn(cellClass(p, true), 'text-muted-foreground'), title: p['data-text'], children: p.children })),
+    td: (p) => (_jsx(TableCell, { className: cellClass(p), title: p['data-text'], children: p.children })),
+};
+export default function ChatMarkdown({ children }) {
+    return (_jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeNumberColumns], allowedElements: ALLOWED, unwrapDisallowed: true, components: components, children: children }));
+}

package/dist/assistant/lumen-assistant.js

@@ -21,8 +21,8 @@ import { Textarea } from '../ui/textarea.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { useAssistantChat } from './use-assistant-chat.js';
-// The Markdown renderer loads with the first answer (lazy-part.tsx).
-const Markdown = lazyPart(() => import('react-markdown').then((m) => m.default));
+// The Markdown renderer (tables included) loads with the first answer (lazy-part.tsx).
+const ChatMarkdown = lazyPart(() => import('./chat-markdown.js').then((m) => m.default));
 /** The main model's context drawn full (tokens); the mark sits where the assistant compacts. */
 const CONTEXT_MAX = 200_000;
 const COMPACT_AT = 150_000;
@@ -256,7 +256,7 @@ function Item({ item, onSettle, busy, }) {
         case 'user':
             return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
         case 'text':
-            return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(Markdown, { allowedElements: ['p', 'strong', 'em', 'code', 'ul', 'ol', 'li', 'a', 'pre', 'br'], unwrapDisallowed: true, children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
+            return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(ChatMarkdown, { children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
         case 'step':
             return _jsx(Step, { step: item, live: !!item.live });
         case 'draft':

package/dist/lumen-selector.js

@@ -138,7 +138,7 @@ const MORE = 'flex h-7 w-full items-center gap-1.5 rounded-md pr-2 pl-8 text-lef
 /** One row's inside: box or icon, label, detail, and the check when picked. */
 export function SelectorRowContent({ option, selected, multiple, trailing, }) {
     const Icon = option.icon;
-    return (_jsxs(_Fragment, { children: [option.indent && _jsx("span", { "aria-hidden": true, className: "w-4 shrink-0" }), multiple && (_jsx("span", { "aria-hidden": true, className: cn('flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input', selected && 'border-primary bg-primary text-primary-foreground'), children: selected && _jsx(CheckIcon, { className: "size-3" }) })), option.thumb ? (_jsx("span", { "aria-hidden": true, className: "shrink-0", children: option.thumb })) : (Icon && _jsx(Icon, { className: "text-muted-foreground" })), option.description ? (_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate", children: option.content ?? option.label }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })] })) : (_jsx("span", { className: "min-w-0 flex-1 truncate", children: option.content ?? option.label })), option.detail && (_jsx("span", { className: "shrink-0 text-xs whitespace-nowrap text-muted-foreground", children: option.detail })), trailing] }));
+    return (_jsxs(_Fragment, { children: [option.indent && _jsx("span", { "aria-hidden": true, className: "w-4 shrink-0" }), multiple && (_jsx("span", { "aria-hidden": true, className: cn('flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input', selected && 'border-primary bg-primary text-primary-foreground'), children: selected && _jsx(CheckIcon, { className: "size-3" }) })), option.thumb ? (_jsx("span", { "aria-hidden": true, className: "shrink-0", children: option.thumb })) : (Icon && _jsx(Icon, { className: "text-muted-foreground" })), option.description ? (_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate", children: option.content ?? option.label }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })] })) : (_jsx("span", { className: cn('min-w-0 truncate', option.detail ? 'max-w-2/3 shrink-0' : 'flex-1'), children: option.content ?? option.label })), option.detail && (_jsx("span", { className: "min-w-0 flex-1 truncate text-right text-xs text-muted-foreground", title: option.detail, children: option.detail })), trailing] }));
 }
 function Rows({ shown, picked, multiple, full, expand, }) {
     return shown.map((g) => (_jsxs(Base.Group, { items: g.rows.map((o) => o.value), children: [g.label && _jsx(Base.GroupLabel, { className: GROUP_LABEL, children: g.label }), g.rows.map((o) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.195",
+  "version": "0.1.197",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.195",
+    "@columenlabs/lumen-ui-types": "0.1.197",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -80,6 +80,7 @@
     "react-markdown": "10.1.0",
     "react-resizable-panels": "^4.14.3",
     "recharts": "^3.10.1",
+    "remark-gfm": "4.0.1",
     "shiki": "4.5.0",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",