@columenlabs/lumen-ui 0.1.304 → 0.1.306

package/dist/assistant/copy.d.ts

@@ -1,4 +1,4 @@
-import type { ChatItem } from '@columenlabs/lumen-ui-types/assistant';
+import { type ChatItem } from '@columenlabs/lumen-ui-types/assistant';
 /** The whole chat, its title as the heading. */
 export declare function chatMarkdown(title: string, items: ChatItem[], name: string): string;
 /** One turn: a message and everything the assistant did for it. */

package/dist/assistant/copy.js

@@ -1,3 +1,6 @@
+// A chat as Markdown, for Copy chat and each turn's copy icon: every message, tool line and card as
+// it shows, so a chat can be pasted into an issue, a doc or another agent.
+import { stepLineText } from '@columenlabs/lumen-ui-types/assistant';
 import { lumenToast } from '../lumen-toast.js';
 /** The whole chat, its title as the heading. */
 export function chatMarkdown(title, items, name) {
@@ -52,7 +55,7 @@ function itemMarkdown(i, depth, name) {
                 i.ms ? `${(i.ms / 1000).toFixed(1)} s` : '',
                 i.write ? i.write.status : '',
             ].filter(Boolean);
-            return `**${i.ok ? 'Tool' : 'Failed'}: ${i.title}** (${facts.join(', ')})${i.error ? `\n\nError: ${i.error}` : ''}`;
+            return `**${i.ok ? 'Tool' : 'Failed'}: ${stepLineText(i.title)}** (${facts.join(', ')})${i.error ? `\n\nError: ${i.error}` : ''}`;
         }
         case 'draft':
             return [

package/dist/assistant/lumen-assistant.js

@@ -4,7 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // (the person's messages, the answer as it streams, each tool call as a line, drafted changes as
 // cards to Save or Dismiss, work handed to a higher tier in its own section); and the composer,
 // with Stop, a queued message and the chat's cost and context under it.
-import { ASSISTANT_IMAGES_MAX, ASSISTANT_IMAGE_CHARS, COMPACT_AT, } from '@columenlabs/lumen-ui-types/assistant';
+import { ASSISTANT_IMAGES_MAX, ASSISTANT_IMAGE_CHARS, COMPACT_AT, stepLineParts, stepLineText, } from '@columenlabs/lumen-ui-types/assistant';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ArrowUpIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CircleAlertIcon, CircleCheckIcon, CircleXIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, HandIcon, LightbulbIcon, ListPlusIcon, LoaderCircleIcon, MonitorIcon, PaperclipIcon, PencilIcon, PlusIcon, RefreshCwIcon, ReplyIcon, SearchIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, } from 'lucide-react';
 import { Fragment, createContext, useContext, useEffect, useRef, useState, } from 'react';
@@ -464,7 +464,7 @@ function ToolStep({ step, live }) {
         step.rows !== undefined ? `${step.rows} row${step.rows === 1 ? '' : 's'}` : '',
         seconds(step.ms),
     ].filter(Boolean);
-    return (_jsxs("p", { "data-slot": "chat-step", "data-ok": ok, className: cn('flex min-w-0 items-center gap-1.5 text-xs', ok ? 'text-muted-foreground' : 'text-loss'), children: [live ? (_jsx(Spinner, { className: "size-3" })) : !ok ? (_jsx(CircleAlertIcon, { className: "size-3.5 shrink-0" })) : w ? (_jsx(PencilIcon, { className: "size-3.5 shrink-0" })) : (_jsx(WrenchIcon, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "truncate", title: step.title, children: step.title }), !live && facts.length > 0 && (_jsx("span", { className: "shrink-0 tabular-nums", children: facts.join(' · ') })), (step.error || w?.error) && (_jsxs("span", { className: "truncate", title: step.error ?? w?.error, children: ["\u00B7 ", step.error ?? w?.error] })), w?.status === 'undone' ? (_jsx("span", { className: "shrink-0", children: "\u00B7 Undone" })) : (w?.undo &&
+    return (_jsxs("p", { "data-slot": "chat-step", "data-ok": ok, className: cn('flex min-w-0 items-center gap-1.5 text-xs', ok ? 'text-muted-foreground' : 'text-loss'), children: [live ? (_jsx(Spinner, { className: "size-3" })) : !ok ? (_jsx(CircleAlertIcon, { className: "size-3.5 shrink-0" })) : w ? (_jsx(PencilIcon, { className: "size-3.5 shrink-0" })) : (_jsx(WrenchIcon, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "truncate", title: stepLineText(step.title), children: stepLineParts(step.title).map((part, i) => part.name ? (_jsx("span", { "data-step-name": true, className: cn('rounded px-1 font-medium', ok ? 'bg-primary/10 text-primary' : 'bg-loss/10'), children: part.text }, i)) : (part.text)) }), !live && facts.length > 0 && (_jsx("span", { className: "shrink-0 tabular-nums", children: facts.join(' · ') })), (step.error || w?.error) && (_jsxs("span", { className: "truncate", title: step.error ?? w?.error, children: ["\u00B7 ", step.error ?? w?.error] })), w?.status === 'undone' ? (_jsx("span", { className: "shrink-0", children: "\u00B7 Undone" })) : (w?.undo &&
                 undo && (_jsxs(Button, { size: "sm", variant: "ghost", className: "ml-auto h-6 shrink-0 px-2 text-xs", disabled: undoing, onClick: () => void take(), children: [undoing ? _jsx(Spinner, {}) : _jsx(Undo2Icon, {}), "Undo"] })))] }));
 }
 /** The arguments as short lines: `name: value`. */

package/dist/lumen-bottom-sheet.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog } from 'radix-ui';
 import * as React from 'react';
 import { Drawer } from 'vaul';
+import { useKeyboardFit } from './hooks/use-keyboard-fit.js';
 import { cn } from './lib/utils.js';
 /** A snap point in px against a screen `h` px tall. */
 function px(s, h) {
@@ -27,11 +28,14 @@ function useSafeBottom() {
     }, []);
     return inset;
 }
-/** The screen's height, kept up to date. */
+/**
+ * The screen's height, kept up to date: the layout viewport, which a phone's keyboard leaves alone
+ * (iOS shrinks `innerHeight` with the keyboard, which would shrink the sheet with it).
+ */
 function useScreenHeight() {
-    const [h, setH] = React.useState(() => typeof window === 'undefined' ? 800 : window.innerHeight);
+    const [h, setH] = React.useState(() => typeof window === 'undefined' ? 800 : document.documentElement.clientHeight);
     React.useEffect(() => {
-        const on = () => setH(window.innerHeight);
+        const on = () => setH(document.documentElement.clientHeight);
         window.addEventListener('resize', on);
         return () => window.removeEventListener('resize', on);
     }, []);
@@ -51,7 +55,14 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
     const at = snaps.indexOf(snap);
     // The sheet is as tall as the screen and slides down to its snap; what it holds fills only the
     // part on screen, so a composer or footer at its bottom stays in view at every snap.
-    const shown = Math.min(h, Math.max(0, px(rest(snap), h)));
+    const rested = Math.min(h, Math.max(0, px(rest(snap), h)));
+    // Typing in the sheet with the keyboard up: the sheet ends at the keyboard, as tall as its snap or
+    // what is visible, so the field and the composer sit just above the keys (theme.css holds vaul's
+    // slide off while it does). A field above the sheet leaves the sheet where it rests.
+    const kb = useKeyboardFit();
+    const [typing, setTyping] = React.useState(false);
+    const lifted = typing && kb ? Math.min(rested, kb.height) : undefined;
+    const shown = lifted ?? rested;
     return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, handleOnly: true, snapPoints: rests, activeSnapPoint: rests[at] ?? rest(snap), setActiveSnapPoint: (s) => {
             const i = s == null ? -1 : rests.indexOf(s);
             const next = snaps[i];
@@ -59,5 +70,10 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
                 onSnap(next);
         }, children: _jsx(Dialog.Root, { open: true, modal: false, onOpenChange: () => { }, children: _jsx(Drawer.Portal, { children: _jsxs(Drawer.Content, { "data-slot": "lumen-bottom-sheet", "aria-describedby": undefined, 
                     // Focus stays where the person was: the sheet is always there, opening it is not a move.
-                    onOpenAutoFocus: (e) => e.preventDefault(), className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-[env(safe-area-inset-bottom)]", children: children })] })] }) }) }) }));
+                    onOpenAutoFocus: (e) => e.preventDefault(), onFocus: () => setTyping(true), onBlur: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget))
+                            setTyping(false);
+                    }, "data-lifted": lifted === undefined ? undefined : '', style: lifted === undefined || !kb
+                        ? undefined
+                        : { top: kb.top + kb.height - lifted, bottom: 'auto', height: lifted }, className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: cn('flex min-h-0 flex-1 flex-col', lifted === undefined && 'pb-[env(safe-area-inset-bottom)]'), children: children })] })] }) }) }) }));
 }

package/dist/theme.css

@@ -974,3 +974,10 @@ body[data-spotlight="nav"] [data-spotlit] {
     display: none;
   }
 }
+
+/* LumenBottomSheet while the person types in it with the keyboard up: it is placed at the keyboard
+   (lumen-bottom-sheet.tsx), so vaul's slide to its snap, set inline, stays off until the keys go. */
+[data-slot="lumen-bottom-sheet"][data-lifted] {
+  transform: none !important;
+  transition: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.304",
+  "version": "0.1.306",
   "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.304",
+    "@columenlabs/lumen-ui-types": "0.1.306",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",