@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/mermaid-render.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Mermaid configuration and render cleanup, kept apart from the component so
+ * the contract is testable without a DOM.
+ *
+ * A failed render must stay inside its own diagram. `suppressErrorRendering`
+ * stops Mermaid from drawing its "Syntax error in text" diagram into the page;
+ * `render()` then throws and the component shows its own error state. The only
+ * nodes a render may leave behind are the two it created: the SVG (`chartId`)
+ * and its wrapper (`d${chartId}`). Cleanup removes those by id and nothing
+ * else — a sweep that matched on text would also match any app element whose
+ * content quotes that text.
+ */
+export declare const MERMAID_CONFIG: {
+    readonly startOnLoad: false;
+    readonly securityLevel: "strict";
+    readonly suppressErrorRendering: true;
+    readonly theme: "base";
+    readonly fontFamily: "ui-sans-serif, system-ui, sans-serif";
+    readonly gitGraph: {
+        readonly showBranches: true;
+        readonly showCommitLabel: true;
+        readonly mainBranchName: "main";
+        readonly rotateCommitLabel: true;
+    };
+};
+/** Remove the temporary nodes one `mermaid.render(chartId, …)` call created. */
+export declare function removeMermaidRenderArtifacts(doc: Pick<Document, 'getElementById'>, chartId: string): void;
+/**
+ * Rendered SVG per diagram source, least recently used first.
+ *
+ * Keyed by the source text itself, not a hash of it: a 32-bit hash served one
+ * diagram another diagram's SVG on a collision. Capped, because every distinct
+ * source a tab renders would otherwise stay for the life of the tab.
+ */
+export declare const MERMAID_SVG_CACHE_MAX = 32;
+/** The cached SVG for `source`, marked as most recently used. */
+export declare function readCachedMermaidSvg(source: string): string | undefined;
+export declare function cacheMermaidSvg(source: string, svg: string): void;
+export declare function zoomAtPoint(zoom: number, panOffset: {
+    x: number;
+    y: number;
+}, point: {
+    x: number;
+    y: number;
+}, zoomFactor: number): {
+    zoom: number;
+    panOffset: {
+        x: number;
+        y: number;
+    };
+};

package/dist/components/ui/mermaid-render.js

@@ -0,0 +1,65 @@
+/**
+ * Mermaid configuration and render cleanup, kept apart from the component so
+ * the contract is testable without a DOM.
+ *
+ * A failed render must stay inside its own diagram. `suppressErrorRendering`
+ * stops Mermaid from drawing its "Syntax error in text" diagram into the page;
+ * `render()` then throws and the component shows its own error state. The only
+ * nodes a render may leave behind are the two it created: the SVG (`chartId`)
+ * and its wrapper (`d${chartId}`). Cleanup removes those by id and nothing
+ * else — a sweep that matched on text would also match any app element whose
+ * content quotes that text.
+ */
+export const MERMAID_CONFIG = {
+    startOnLoad: false,
+    securityLevel: 'strict',
+    suppressErrorRendering: true,
+    theme: 'base',
+    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+    gitGraph: {
+        showBranches: true,
+        showCommitLabel: true,
+        mainBranchName: 'main',
+        rotateCommitLabel: true,
+    },
+};
+/** Remove the temporary nodes one `mermaid.render(chartId, …)` call created. */
+export function removeMermaidRenderArtifacts(doc, chartId) {
+    for (const id of [chartId, `d${chartId}`]) {
+        doc.getElementById(id)?.remove();
+    }
+}
+/**
+ * Rendered SVG per diagram source, least recently used first.
+ *
+ * Keyed by the source text itself, not a hash of it: a 32-bit hash served one
+ * diagram another diagram's SVG on a collision. Capped, because every distinct
+ * source a tab renders would otherwise stay for the life of the tab.
+ */
+export const MERMAID_SVG_CACHE_MAX = 32;
+const mermaidSvgCache = new Map();
+/** The cached SVG for `source`, marked as most recently used. */
+export function readCachedMermaidSvg(source) {
+    const svg = mermaidSvgCache.get(source);
+    if (svg === undefined)
+        return undefined;
+    mermaidSvgCache.delete(source);
+    mermaidSvgCache.set(source, svg);
+    return svg;
+}
+export function cacheMermaidSvg(source, svg) {
+    mermaidSvgCache.delete(source);
+    mermaidSvgCache.set(source, svg);
+    if (mermaidSvgCache.size > MERMAID_SVG_CACHE_MAX) {
+        const oldest = mermaidSvgCache.keys().next().value;
+        if (oldest !== undefined)
+            mermaidSvgCache.delete(oldest);
+    }
+}
+export function zoomAtPoint(zoom, panOffset, point, zoomFactor) {
+    const newZoom = Math.max(0.1, Math.min(5, zoom * zoomFactor));
+    return { zoom: newZoom, panOffset: {
+            x: point.x - (point.x - panOffset.x) * (newZoom / zoom),
+            y: point.y - (point.y - panOffset.y) * (newZoom / zoom),
+        } };
+}

package/dist/components/ui/mermaid-renderer.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface MermaidRendererProps {
+    chart: string;
+    className?: string;
+    enableFullscreen?: boolean;
+    /**
+     * The message is still streaming. The diagram renders once its source holds
+     * still for `CODE_SETTLE_MS`, not once per streamed token.
+     */
+    isStreaming?: boolean;
+}
+export declare const MermaidRenderer: React.FC<MermaidRendererProps>;
+export {};

package/dist/components/ui/mermaid-renderer.js

@@ -0,0 +1,340 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CODE_SETTLE_MS, useSettledValue } from '../../lib/settle.js';
+import { Button } from './button.js';
+import { ButtonGroup } from './button-group.js';
+import Hint from './hint.js';
+import { KortixLoader } from './kortix-loader.js';
+import { cacheMermaidSvg, MERMAID_CONFIG, readCachedMermaidSvg, removeMermaidRenderArtifacts, zoomAtPoint, } from './mermaid-render.js';
+import { Modal, ModalBody, ModalClose, ModalContent, ModalTitle } from './modal.js';
+import { cn } from '../../lib/utils.js';
+import { CheckIcon as Check, ArrowsOutSimpleIcon as Maximize2, ArrowCounterClockwiseIcon as RotateCcw, XIcon as X, MagnifyingGlassPlusIcon as ZoomIn, MagnifyingGlassMinusIcon as ZoomOut, } from '@phosphor-icons/react';
+import { Copy } from '../../icons/copy.js';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+let mermaidInstance = null;
+export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen = true, isStreaming = false }) => {
+    const containerRef = useRef(null);
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [renderedContent, setRenderedContent] = useState('');
+    const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);
+    // The source to render: null while a streaming diagram is still changing.
+    const source = useSettledValue(chart.trim(), isStreaming, CODE_SETTLE_MS);
+    // Canvas state for fullscreen viewer
+    const canvasRef = useRef(null);
+    const [zoom, setZoom] = useState(1);
+    const [rotation, setRotation] = useState(0);
+    const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [lastTouchDistance, setLastTouchDistance] = useState(null);
+    // Inline-card control: copy the diagram source.
+    const [copied, setCopied] = useState(false);
+    const handleCopySource = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(chart);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy diagram source:', err);
+        }
+    }, [chart]);
+    const handleRotate = useCallback(() => setRotation((prev) => prev + 90), []);
+    // Canvas event handlers
+    const handleMouseDown = useCallback((e) => {
+        if (e.button === 0) {
+            // Left mouse button
+            setIsDragging(true);
+            setDragStart({
+                x: e.clientX - panOffset.x,
+                y: e.clientY - panOffset.y,
+            });
+        }
+    }, [panOffset]);
+    const handleMouseMove = useCallback((e) => {
+        if (isDragging) {
+            const newOffset = {
+                x: e.clientX - dragStart.x,
+                y: e.clientY - dragStart.y,
+            };
+            setPanOffset(newOffset);
+        }
+    }, [isDragging, dragStart]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    // Touch event handlers for mobile support
+    const getTouchDistance = (touches) => {
+        if (touches.length < 2)
+            return null;
+        const touch1 = touches[0];
+        const touch2 = touches[1];
+        return Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
+    };
+    const getTouchCenter = (touches) => {
+        if (touches.length === 0)
+            return { x: 0, y: 0 };
+        if (touches.length === 1)
+            return { x: touches[0].clientX, y: touches[0].clientY };
+        const touch1 = touches[0];
+        const touch2 = touches[1];
+        return {
+            x: (touch1.clientX + touch2.clientX) / 2,
+            y: (touch1.clientY + touch2.clientY) / 2,
+        };
+    };
+    const handleTouchStart = useCallback((e) => {
+        if (e.touches.length === 1) {
+            // Single touch - start panning
+            setIsDragging(true);
+            setDragStart({
+                x: e.touches[0].clientX - panOffset.x,
+                y: e.touches[0].clientY - panOffset.y,
+            });
+        }
+        else if (e.touches.length === 2) {
+            // Two touches - start pinch zoom
+            setIsDragging(false);
+            setLastTouchDistance(getTouchDistance(e.touches));
+        }
+    }, [panOffset]);
+    const handleTouchMove = useCallback((e) => {
+        // Only prevent default if we're actively interacting with the canvas
+        if (isDragging || (e.touches.length === 2 && lastTouchDistance)) {
+            e.preventDefault();
+        }
+        if (e.touches.length === 1 && isDragging) {
+            // Single touch - pan
+            const newOffset = {
+                x: e.touches[0].clientX - dragStart.x,
+                y: e.touches[0].clientY - dragStart.y,
+            };
+            setPanOffset(newOffset);
+        }
+        else if (e.touches.length === 2 && lastTouchDistance) {
+            // Two touches - pinch zoom
+            e.preventDefault(); // Always prevent default for pinch zoom
+            const currentDistance = getTouchDistance(e.touches);
+            if (currentDistance) {
+                const zoomFactor = currentDistance / lastTouchDistance;
+                // Zoom towards touch center
+                if (canvasRef.current) {
+                    const rect = canvasRef.current.getBoundingClientRect();
+                    const touchCenter = getTouchCenter(e.touches);
+                    const centerX = touchCenter.x - rect.left;
+                    const centerY = touchCenter.y - rect.top;
+                    const next = zoomAtPoint(zoom, panOffset, { x: centerX, y: centerY }, zoomFactor);
+                    setZoom(next.zoom);
+                    setPanOffset(next.panOffset);
+                }
+                setLastTouchDistance(currentDistance);
+            }
+        }
+    }, [isDragging, dragStart, lastTouchDistance, zoom, panOffset]);
+    const handleTouchEnd = useCallback(() => {
+        setIsDragging(false);
+        setLastTouchDistance(null);
+    }, []);
+    // Wheel event handler - attached manually to avoid passive event issues
+    const handleWheelEvent = useCallback((e) => {
+        // Only handle zoom if Ctrl/Cmd is held or we're over the canvas
+        if (!canvasRef.current?.contains(e.target))
+            return;
+        e.preventDefault();
+        const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+        // Zoom towards mouse position
+        if (canvasRef.current) {
+            const rect = canvasRef.current.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            const next = zoomAtPoint(zoom, panOffset, { x: mouseX, y: mouseY }, zoomFactor);
+            setZoom(next.zoom);
+            setPanOffset(next.panOffset);
+        }
+    }, [zoom, panOffset]);
+    // Attach wheel event listener manually with passive: false
+    useEffect(() => {
+        const canvasElement = canvasRef.current;
+        if (canvasElement && isFullscreenOpen) {
+            canvasElement.addEventListener('wheel', handleWheelEvent, {
+                passive: false,
+            });
+            return () => {
+                canvasElement.removeEventListener('wheel', handleWheelEvent);
+            };
+        }
+    }, [isFullscreenOpen, handleWheelEvent]);
+    // Simple zoom controls
+    const handleZoomIn = () => setZoom((prev) => Math.min(5, prev * 1.2));
+    const handleZoomOut = () => setZoom((prev) => Math.max(0.1, prev * 0.8));
+    const handleFullscreenOpen = () => {
+        if (enableFullscreen) {
+            setIsFullscreenOpen(true);
+            // Reset canvas state
+            setZoom(0.8); // Start with a reasonable fit
+            setRotation(0);
+            setPanOffset({ x: 0, y: 0 });
+            setIsDragging(false);
+        }
+    };
+    useEffect(() => {
+        if (source === null)
+            return;
+        let mounted = true;
+        const renderChart = async () => {
+            if (!source) {
+                if (mounted)
+                    setIsLoading(false);
+                return;
+            }
+            const cachedResult = readCachedMermaidSvg(source);
+            if (cachedResult) {
+                if (mounted) {
+                    setRenderedContent(cachedResult);
+                    setError(null);
+                    setIsLoading(false);
+                }
+                return;
+            }
+            try {
+                if (mounted) {
+                    setIsLoading(true);
+                    setError(null);
+                }
+                // Check for basic Mermaid syntax
+                const firstLine = source.split('\n')[0].toLowerCase().trim();
+                const validStarters = [
+                    'graph',
+                    'flowchart',
+                    'sequencediagram',
+                    'sequence',
+                    'classdiagram',
+                    'class',
+                    'statediagram',
+                    'state',
+                    'erdiagram',
+                    'journey',
+                    'gantt',
+                    'pie',
+                    'gitgraph',
+                    'mindmap',
+                    'timeline',
+                    'sankey',
+                    'block',
+                    'quadrant',
+                    'requirement',
+                    'c4context',
+                    'c4container',
+                    'c4component',
+                    'c4dynamic',
+                ];
+                const hasValidStarter = validStarters.some((starter) => firstLine.startsWith(starter) || firstLine.includes(starter));
+                if (!hasValidStarter) {
+                    throw new Error(`Invalid diagram type. Chart must start with a valid Mermaid diagram type (e.g., graph, flowchart, sequenceDiagram, etc.). Found: "${firstLine}"`);
+                }
+                // Use cached Mermaid instance or initialize new one
+                if (!mermaidInstance) {
+                    const mermaid = (await import('mermaid')).default;
+                    await mermaid.initialize({
+                        ...MERMAID_CONFIG,
+                        gitGraph: { ...MERMAID_CONFIG.gitGraph },
+                    });
+                    mermaidInstance = mermaid;
+                }
+                const chartId = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+                let result;
+                try {
+                    result = await mermaidInstance.render(chartId, source);
+                }
+                catch (renderError) {
+                    const errorMessage = renderError instanceof Error ? renderError.message : String(renderError);
+                    // Remove the temporary nodes this render created, and only those.
+                    removeMermaidRenderArtifacts(document, chartId);
+                    if (errorMessage.includes('Parse error') || errorMessage.includes('Syntax error')) {
+                        throw new Error(`Diagram syntax error: ${errorMessage}`);
+                    }
+                    else if (errorMessage.includes('UnknownDiagramError')) {
+                        throw new Error('unsupported_diagram_type');
+                    }
+                    else {
+                        throw new Error(`Failed to render diagram: ${errorMessage}`);
+                    }
+                }
+                cacheMermaidSvg(source, result.svg);
+                if (!mounted)
+                    return;
+                setRenderedContent(result.svg);
+            }
+            catch (err) {
+                if (mounted) {
+                    const errorMessage = err instanceof Error ? err.message : 'Failed to render diagram';
+                    // Unsupported diagram types render as a plain code block below.
+                    if (errorMessage.includes('UnknownDiagramError') ||
+                        errorMessage.includes('No diagram type detected')) {
+                        setError('unsupported_diagram_type');
+                    }
+                    else {
+                        setError(errorMessage);
+                    }
+                }
+            }
+            finally {
+                if (mounted)
+                    setIsLoading(false);
+            }
+        };
+        renderChart();
+        return () => {
+            mounted = false;
+        };
+    }, [source]);
+    // A diagram that already drew keeps its last SVG while a newer source
+    // renders, and a streaming diagram shows no error for a half-written
+    // source: the placeholder stands until there is something to draw.
+    const showError = !!error && !isStreaming;
+    if ((isLoading || (error && !showError)) && !renderedContent) {
+        return (_jsx("div", { className: cn('bg-muted/30 flex items-center justify-center rounded-lg border border-dashed p-8', className), children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-muted-foreground mb-2 text-sm", children: "Rendering Mermaid diagram..." }), _jsx(KortixLoader, { size: "medium" })] }) }));
+    }
+    if (showError) {
+        // For unsupported diagram types, render as a simple code block
+        if (error === 'unsupported_diagram_type') {
+            return (_jsxs("div", { className: cn('my-2', className), children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs", children: "Unsupported diagram type (not available in Mermaid 11.x)" }), _jsx("pre", { className: "bg-muted/50 overflow-x-auto rounded-lg border p-3 font-mono text-xs whitespace-pre-wrap", children: chart })] }));
+        }
+        // For other errors, show the full error UI
+        return (_jsxs("div", { className: cn('bg-muted/30 border-border/40 rounded-lg border p-4', className), children: [_jsx("div", { className: "text-muted-foreground mb-2 text-sm font-medium", children: "Failed to render Mermaid diagram" }), _jsx("div", { className: "text-muted-foreground bg-muted/50 rounded p-2 font-mono text-xs", children: error }), _jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs", children: "Show diagram source" }), _jsx("pre", { className: "bg-muted/50 mt-2 overflow-x-auto rounded p-2 text-xs whitespace-pre-wrap", children: chart })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: `
+          .mermaid-container svg {
+            max-width: 100% !important;
+            height: auto !important;
+            display: block !important;
+            margin: 0 auto !important;
+          }
+          .mermaid-container .node {
+            fill: hsl(var(--card)) !important;
+            stroke: hsl(var(--foreground)) !important;
+          }
+          .mermaid-container .cluster {
+            fill: hsl(var(--muted)) !important;
+            stroke: hsl(var(--foreground)) !important;
+          }
+          .mermaid-container text {
+            fill: hsl(var(--foreground)) !important;
+            font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif !important;
+          }
+          .mermaid-container .edgePath {
+            stroke: hsl(var(--foreground)) !important;
+          }
+          .mermaid-container .marker {
+            fill: hsl(var(--foreground)) !important;
+          }
+        `,
+                } }), _jsxs("div", { className: cn('mermaid-container group bg-background relative my-4 w-full overflow-auto rounded-lg border', className), style: { minHeight: '200px' }, children: [_jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: _jsxs(ButtonGroup, { children: [enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleFullscreenOpen, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { className: "size-3.5" }) }) })), _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleCopySource, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) })] }) }), _jsx("div", { ref: containerRef, dangerouslySetInnerHTML: { __html: renderedContent } })] }), _jsx(Modal, { open: isFullscreenOpen, onOpenChange: setIsFullscreenOpen, children: _jsxs(ModalContent, { variant: "base", showCloseButton: false, className: "flex h-[90vh] flex-col space-y-0 overflow-hidden lg:h-[90vh] lg:max-w-7xl", closeButtonChildren: _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: "Zoom in", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomIn, "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }) }), _jsx(Hint, { label: "Zoom out", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomOut, "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }) }), _jsx(Hint, { label: "Rotate", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleRotate, "aria-label": "Rotate diagram", children: _jsx(RotateCcw, { className: "size-4" }) }) }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Close", children: _jsx(X, { className: "size-4" }) }) })] }), children: [_jsx(ModalTitle, { className: "sr-only", children: "Diagram" }), _jsx(ModalBody, { className: "relative min-h-0 flex-1 space-y-0 p-0", children: _jsx("div", { ref: canvasRef, className: "bg-muted/10 absolute inset-0 touch-none overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { cursor: isDragging ? 'grabbing' : 'grab' }, children: renderedContent ? (_jsx("div", { className: "mermaid-container absolute inset-0 flex items-center justify-center", style: {
+                                        transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom}) rotate(${rotation}deg)`,
+                                        transformOrigin: 'center center',
+                                        transition: isDragging ? 'none' : 'transform 0.15s ease-out',
+                                    }, dangerouslySetInnerHTML: { __html: renderedContent } })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(KortixLoader, { size: "medium" }) })) }) })] }) })] }));
+});
+MermaidRenderer.displayName = 'MermaidRenderer';

package/dist/components/ui/message.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Message: one conversation row. `align="end"` for the local user, `"start"`
+ * for the agent. Compose with `Bubble` for the surface and `MessageAvatar` for
+ * the avatar slot.
+ */
+declare function Message({ className, align, ...props }: React.ComponentProps<'div'> & {
+    align?: 'start' | 'end';
+}): React.JSX.Element;
+declare function MessageGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function MessageAvatar({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function MessageContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function MessageHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function MessageFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/components/ui/message.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * Message: one conversation row. `align="end"` for the local user, `"start"`
+ * for the agent. Compose with `Bubble` for the surface and `MessageAvatar` for
+ * the avatar slot.
+ */
+function Message({ className, align = 'start', ...props }) {
+    return (_jsx("div", { "data-slot": "message", "data-align": align, className: cn('flex w-full items-end gap-2.5', align === 'end' ? 'flex-row-reverse' : 'flex-row', className), ...props }));
+}
+function MessageGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "message-group", className: cn('flex flex-col gap-1.5', className), ...props });
+}
+function MessageAvatar({ className, ...props }) {
+    return _jsx("div", { "data-slot": "message-avatar", className: cn('shrink-0 self-end', className), ...props });
+}
+function MessageContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-content", className: cn('flex min-w-0 flex-col gap-1', className), ...props }));
+}
+function MessageHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-header", className: cn('text-muted-foreground flex items-center gap-2 text-xs', className), ...props }));
+}
+function MessageFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-footer", className: cn('text-muted-foreground flex items-center gap-2 text-xs', className), ...props }));
+}
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/components/ui/modal.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @example
+ * ```tsx
+ * import {
+ *   Modal,
+ *   ModalBody,
+ *   ModalContent,
+ *   ModalDescription,
+ *   ModalFooter,
+ *   ModalHeader,
+ *   ModalTitle,
+ *   ModalTrigger,
+ * } from './modal.js';
+ * import { Button } from './button.js';
+ *
+ * <Modal>
+ *   <ModalTrigger asChild>
+ *     <Button>Open</Button>
+ *   </ModalTrigger>
+ *   <ModalContent className="lg:max-w-md">
+ *     <ModalHeader>
+ *       <ModalTitle>Title</ModalTitle>
+ *       <ModalDescription>Description</ModalDescription>
+ *     </ModalHeader>
+ *     <ModalBody>{children}</ModalBody>
+ *     <ModalFooter>
+ *       <Button variant="outline-ghost">Cancel</Button>
+ *       <Button>Confirm</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * Controlled:
+ * ```tsx
+ * <Modal open={open} onOpenChange={setOpen}>
+ *   <ModalContent>...</ModalContent>
+ * </Modal>
+ * ```
+ */
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { type TriggerVariantProps } from './trigger-variants.js';
+declare const Modal: ({ open, defaultOpen, onOpenChange, ...props }: DialogPrimitive.DialogProps) => React.JSX.Element;
+declare const ModalTrigger: ({ className, variant, size, asChild, ...props }: Omit<React.ComponentProps<typeof DialogPrimitive.Trigger>, "size"> & TriggerVariantProps) => React.JSX.Element;
+declare const ModalClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const overlayAnimationClasses: {
+    readonly default: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200";
+    readonly none: "";
+};
+declare const ModalOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    animation?: keyof typeof overlayAnimationClasses;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ModalVariants: (props?: ({
+    variant?: "default" | "transparent" | "base" | null | undefined;
+    side?: "left" | "right" | "bottom" | "top" | "fullscreen" | null | undefined;
+    animation?: "none" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof ModalVariants> {
+    closeClassName?: string;
+    closeLabel?: string;
+    modalClassName?: string;
+    showCloseButton?: boolean;
+    closeButtonChildren?: React.ReactNode;
+    closeOnOutsideClick?: boolean;
+    overlayClassName?: string;
+}
+/**
+ * Should an "outside" interaction actually dismiss the modal?
+ *
+ * Two cases both look like backdrop clicks to Radix and must NOT dismiss:
+ *
+ * 1. The click lands on a portaled Select / DropdownMenu / tooltip panel.
+ *    Those portal to `document.body`, outside the modal's DOM subtree, so
+ *    containment says "outside". `isFloatingLayerTarget` catches that.
+ *
+ * 2. A *modal* DropdownMenu is open and the click lands anywhere else —
+ *    including visually on the modal body, or on the dark overlay. While the
+ *    menu is open Radix sets `pointer-events: none` on everything under it, so
+ *    the event target is `body` / the overlay, not the menu. Checking the
+ *    target alone fails; Escape already uses `hasOpenFloatingLayer()` for the
+ *    same reason. The gesture owns the floating layer: dismiss that first, and
+ *    require a second click to close the modal.
+ */
+export declare function modalDismissesOnOutsideInteraction(target: EventTarget | null, closeOnOutsideClick: boolean): boolean;
+declare const ModalContentInner: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ModalHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const ModalFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const ModalTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ModalDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const ModalBody: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+export { Modal, ModalBody, ModalClose, ModalContent, ModalContentInner, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, };