@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/markdown.js

@@ -0,0 +1,307 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRight, Check } from "lucide-react";
+import { createContext, memo, use, useMemo, } from "react";
+import ReactMarkdown, { defaultUrlTransform, } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remend, { INCOMPLETE_IMAGE_PLACEHOLDER } from "remend";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { webUrl } from "../lib/url.js";
+import { Code, CodeBlock } from "./code-block.js";
+import { isImagePath, LocalImageThumbnail, localImagePath, useImageSources, useLocalImageScope, } from "./image-sources.js";
+import { ImageThumbnail } from "./image-thumbnail.js";
+import { ExternalLinkCheck, linkShowsAddress, useLinkPolicy } from "./link-policy.js";
+import { RemoteImageCard, RemoteImageGate, remoteImageHost } from "./remote-image-gate.js";
+import { TextLink } from "./text-link.js";
+/* ------------------------------------------------------------------------------------------ */
+/* Block splitting                                                                            */
+/* ------------------------------------------------------------------------------------------ */
+const FENCE = /^(\s*)(`{3,}|~{3,})/;
+const HEADING = /^ {0,3}#{1,6}(?:\s|$)/;
+const LIST_ITEM = /^ {0,3}(?:[-*+]|\d{1,9}[.)])(?:\s|$)/;
+/** Reference links / footnotes resolve document-wide, so such messages render as one block. */
+const DOCUMENT_SCOPED = /^ {0,3}\[[^\]]+\]:\s*\S|\[\^[^\]]+\]/m;
+/** Line-by-line state machine behind {@link splitMarkdownBlocks}. */
+class BlockSplitter {
+    blocks = [];
+    current = [];
+    isList = false;
+    blankRun = 0;
+    fence = null;
+    push(line) {
+        if (this.fence)
+            this.inFence(line);
+        else if (line.trim() === "") {
+            if (this.current.length > 0)
+                this.blankRun += 1;
+        }
+        else
+            this.content(line);
+    }
+    end() {
+        this.flush();
+        return this.blocks;
+    }
+    inFence(line) {
+        this.current.push(line);
+        const marker = FENCE.exec(line)?.[2];
+        const fence = this.fence;
+        if (fence && marker?.[0] === fence.char && marker.length >= fence.size && line.trim() === marker) {
+            this.fence = null;
+            // A top-level fence is a block of its own; whatever follows starts fresh.
+            if (!fence.nested)
+                this.flush();
+        }
+    }
+    content(line) {
+        const indented = /^\s/.test(line);
+        const continuesList = this.isList && (indented || LIST_ITEM.test(line));
+        const marker = FENCE.exec(line)?.[2];
+        if (marker !== undefined) {
+            const nested = continuesList && indented;
+            if (nested)
+                this.append(line);
+            else
+                this.start(line);
+            this.fence = { char: marker.charAt(0), size: marker.length, nested };
+        }
+        else if (HEADING.test(line)) {
+            this.start(line);
+            this.flush();
+        }
+        else if (this.current.length === 0 || (this.blankRun > 0 && !continuesList)) {
+            this.start(line);
+        }
+        else {
+            this.append(line);
+        }
+    }
+    /** Continue the current block, keeping any blank lines that separated it (loose lists). */
+    append(line) {
+        for (let i = 0; i < this.blankRun; i++)
+            this.current.push("");
+        this.current.push(line);
+        this.blankRun = 0;
+    }
+    start(line) {
+        this.flush();
+        this.isList = LIST_ITEM.test(line);
+        this.current.push(line);
+    }
+    flush() {
+        if (this.current.length > 0)
+            this.blocks.push(this.current.join("\n"));
+        this.current = [];
+        this.blankRun = 0;
+    }
+}
+/**
+ * Splits markdown into top-level blocks (paragraphs, headings, lists, fences, tables, …) so each can
+ * be memoized: while streaming only the last block re-parses. Splits at blank lines outside fences,
+ * keeps loose lists and indented continuations together, and isolates headings and fences.
+ */
+export function splitMarkdownBlocks(source) {
+    if (source.trim() === "")
+        return [];
+    if (DOCUMENT_SCOPED.test(source))
+        return [source];
+    const splitter = new BlockSplitter();
+    for (const line of source.split("\n"))
+        splitter.push(line);
+    return splitter.end();
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Streaming caret (rehype)                                                                   */
+/* ------------------------------------------------------------------------------------------ */
+/** Elements whose last child may host the caret; anything else (inline) receives it as a sibling. */
+const CARET_CONTAINERS = new Set(["p", "li", "ul", "ol", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"]);
+/** No caret after these — code blocks show their own streaming state. */
+const CARET_SKIP = new Set(["pre", "table", "hr", "img"]);
+const isElement = (node) => node !== undefined && node.type === "element";
+const isMeaningful = (node) => node.type === "element" || (node.type === "text" && node.value.trim() !== "");
+/** Appends a blinking caret right after the last rendered character. */
+function rehypeCaret() {
+    return (tree) => {
+        let parent = tree;
+        for (;;) {
+            const last = parent.children.findLast(isMeaningful);
+            if (!isElement(last))
+                break;
+            if (CARET_SKIP.has(last.tagName))
+                return;
+            if (!CARET_CONTAINERS.has(last.tagName))
+                break;
+            parent = last;
+        }
+        if (parent.type === "root")
+            return;
+        parent.children.push({
+            type: "element",
+            tagName: "span",
+            properties: { className: ["stream-caret", "ms-0.5"], ariaHidden: "true", dataSlot: "markdown-caret" },
+            children: [],
+        });
+    };
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Element map                                                                                */
+/* ------------------------------------------------------------------------------------------ */
+const StreamingBlockContext = createContext(false);
+const CodeActionsContext = createContext(undefined);
+const INCOMPLETE_LINK = "streamdown:incomplete-link";
+/** An image inline in the message, safe in `<img>` (no scripts, nothing fetched). */
+const INLINE_IMAGE = /^data:image\/(?:png|jpeg|gif|webp|svg\+xml)[;,]/iu;
+/**
+ * Keep remend's placeholders (rendered as inert stand-ins) — sanitize everything else. An image may
+ * also be inline data or a `file:` URL: `MarkdownImage` decides how each loads, if at all.
+ */
+const urlTransform = (url, key, node) => {
+    if (url.startsWith("streamdown:"))
+        return url;
+    if (key === "src" && node.tagName === "img" && (INLINE_IMAGE.test(url) || /^file:/iu.test(url)))
+        return url;
+    return defaultUrlTransform(url);
+};
+const isExternal = (href) => webUrl(href) !== undefined;
+function hastText(node) {
+    if (node.type === "text")
+        return node.value;
+    if (node.type === "element")
+        return node.children.map(hastText).join("");
+    return "";
+}
+function fenceLanguage(code) {
+    const classes = code.properties["className"];
+    if (!Array.isArray(classes))
+        return undefined;
+    for (const c of classes) {
+        if (typeof c === "string" && c.startsWith("language-"))
+            return c.slice("language-".length);
+    }
+    return undefined;
+}
+function MarkdownPre({ node }) {
+    const streaming = use(StreamingBlockContext);
+    const codeActions = use(CodeActionsContext);
+    const code = node?.children.find(isElement);
+    if (!code)
+        return null;
+    const text = hastText(code);
+    const lang = fenceLanguage(code);
+    // A block still arriving has no actions: what they act on isn't final yet.
+    const actions = streaming || codeActions === undefined
+        ? undefined
+        : codeActions({ code: text.endsWith("\n") ? text.slice(0, -1) : text, lang });
+    const acted = actions !== undefined && actions !== null;
+    return _jsx(CodeBlock, { code: text, lang: lang, streaming: streaming, actions: actions, wrap: acted });
+}
+function MarkdownLink({ node, href = "", children, className, ...props }) {
+    const policy = useLinkPolicy();
+    if (href === INCOMPLETE_LINK) {
+        return (_jsx(TextLink, { render: _jsx("span", {}), className: className, children: children }));
+    }
+    const external = isExternal(href);
+    const link = (onCheck) => (_jsxs(TextLink, { href: href, className: className, ...(external && { target: "_blank", rel: "noopener noreferrer" }), ...props, ...(onCheck !== undefined && {
+            onClick: (event) => {
+                event.preventDefault();
+                onCheck();
+            },
+        }), children: [children, external && (_jsx(ArrowUpRight, { "aria-hidden": true, className: "ms-px inline size-[0.85em] -translate-y-px align-baseline text-fg-subtle" }))] }));
+    // Under `check`, a link whose words aren't its address shows the address before it opens.
+    const text = node === undefined ? "" : hastText(node);
+    if (external && policy === "check" && !linkShowsAddress(text, href)) {
+        return _jsx(ExternalLinkCheck, { href: href, trigger: link });
+    }
+    return link();
+}
+/** Remote hosts whose images load on render (`Markdown.allowImageHosts`); everything else waits for a click. */
+const ImageHostsContext = createContext(new Set());
+const FAILED = { kind: "failed" };
+function MarkdownImage({ node: _node, src, alt = "", className, ...props }) {
+    const allowed = use(ImageHostsContext);
+    const sources = useImageSources();
+    const scope = useLocalImageScope();
+    if (src === INCOMPLETE_IMAGE_PLACEHOLDER || src === undefined || src === "") {
+        return _jsx("span", { className: "block h-40 w-64 max-w-full animate-pulse-soft rounded-lg bg-bg-muted" });
+    }
+    const host = remoteImageHost(src);
+    if (host !== undefined && sources.remote === "open" && !allowed.has(host)) {
+        return _jsx(RemoteImageCard, { src: src, alt: alt, host: host });
+    }
+    if (host === undefined && INLINE_IMAGE.test(src)) {
+        return _jsx(ImageThumbnail, { src: src, alt: alt });
+    }
+    if (host === undefined && sources.useLocal !== undefined) {
+        const path = localImagePath(src);
+        // Only a picture's path is read: a message can't make the surface read any other file.
+        return isImagePath(path) ? (_jsx(LocalImageThumbnail, { path: path, alt: alt, scope: scope, useLocal: sources.useLocal })) : (_jsx(ImageThumbnail, { src: undefined, alt: alt, problem: FAILED }));
+    }
+    // A file on this computer, where nothing reads one: it can't show (a page can't load `file:`).
+    if (/^file:/iu.test(src))
+        return _jsx(ImageThumbnail, { src: undefined, alt: alt, problem: FAILED });
+    const image = (_jsx("img", { src: src, alt: alt, loading: "lazy", decoding: "async", className: cn("inline-block max-w-full rounded-lg border border-border-subtle", className), ...props }));
+    return (_jsx(RemoteImageGate, { src: src, alt: alt, allowHosts: allowed, children: image }));
+}
+function MarkdownInput({ node: _node, type, checked, className, ...props }) {
+    const strings = useUiStrings().markdown;
+    if (type !== "checkbox")
+        return _jsx("input", { type: type, className: className, ...props });
+    return (_jsxs("span", { className: "absolute top-1 start-0 grid size-4 place-items-center", children: [_jsx("input", { type: "checkbox", checked: checked === true, readOnly: true, disabled: true, "aria-label": checked === true ? strings.taskDone : strings.taskTodo, className: cn("peer col-start-1 row-start-1 m-0 size-4 appearance-none rounded-xs border border-border-strong bg-surface shadow-xs", "checked:border-primary checked:bg-primary") }), _jsx(Check, { "aria-hidden": true, strokeWidth: 3, className: "pointer-events-none col-start-1 row-start-1 size-3 text-primary-fg opacity-0 peer-checked:opacity-100" })] }));
+}
+function MarkdownTable({ node: _node, className, ...props }) {
+    return (_jsx("div", { dir: "auto", "data-slot": "markdown-table", className: "overflow-x-auto rounded-lg border border-border-subtle", children: _jsx("table", { className: cn("w-full border-collapse text-sm tabular", "[&_tr:last-child>td]:border-b-0 [&_tr>*+*]:border-s [&_tr>*+*]:border-border-subtle", className), ...props }) }));
+}
+const heading = (Tag, size) => function Heading({ node: _node, className, ...props }) {
+    return _jsx(Tag, { dir: "auto", className: cn("font-semibold text-fg", size, className), ...props });
+};
+/**
+ * Each block takes the direction of the text in it (`dir="auto"`): the text is a model's or a
+ * person's, so an English answer reads left to right in a right-to-left interface, and a paragraph
+ * in another script beside it reads its own way. Code blocks stay left to right.
+ */
+const components = {
+    h1: heading("h1", "text-xl"),
+    h2: heading("h2", "text-md"),
+    h3: heading("h3", "text-md"),
+    h4: heading("h4", "text-base"),
+    h5: heading("h5", "text-base"),
+    h6: heading("h6", "text-base text-fg-muted"),
+    p: ({ node: _node, ...props }) => _jsx("p", { dir: "auto", ...props }),
+    a: MarkdownLink,
+    img: MarkdownImage,
+    input: MarkdownInput,
+    table: MarkdownTable,
+    pre: MarkdownPre,
+    code: ({ node: _node, ...props }) => _jsx(Code, { ...props }),
+    strong: ({ node: _node, ...props }) => _jsx("strong", { className: "font-semibold text-fg", ...props }),
+    del: ({ node: _node, ...props }) => _jsx("del", { className: "text-fg-subtle decoration-fg-faint", ...props }),
+    ul: ({ node: _node, className, ...props }) => (_jsx("ul", { dir: "auto", className: cn("space-y-1.5 ps-[1.375em] marker:text-fg-faint", className?.includes("contains-task-list") ? "list-none ps-0" : "list-disc", className), ...props })),
+    ol: ({ node: _node, className, ...props }) => (_jsx("ol", { dir: "auto", className: cn("list-decimal space-y-1.5 ps-[1.5em] marker:text-fg-subtle marker:tabular", className), ...props })),
+    li: ({ node: _node, className, ...props }) => (_jsx("li", { dir: "auto", className: cn("ps-1 [&>p+p]:mt-2 [&>:is(ul,ol)]:mt-1.5", className?.includes("task-list-item") && "relative ps-6 has-[input:checked]:text-fg-muted", className), ...props })),
+    blockquote: ({ node: _node, className, ...props }) => (_jsx("blockquote", { dir: "auto", className: cn("border-s-2 border-border-strong ps-4 text-fg-muted [&>*+*]:mt-2", className), ...props })),
+    hr: ({ node: _node, ...props }) => (_jsx("hr", { className: "my-6 border-0 border-t border-border-subtle", ...props })),
+    th: ({ node: _node, className, ...props }) => (_jsx("th", { className: cn("border-b border-border-subtle bg-bg-subtle px-3 py-2 text-start font-medium text-fg", className), ...props })),
+    td: ({ node: _node, className, ...props }) => (_jsx("td", { className: cn("border-b border-border-subtle px-3 py-2 align-top", className), ...props })),
+};
+/* ------------------------------------------------------------------------------------------ */
+/* Markdown                                                                                   */
+/* ------------------------------------------------------------------------------------------ */
+const REMARK_PLUGINS = [remarkGfm];
+const REHYPE_NONE = [];
+const REHYPE_CARET = [rehypeCaret];
+const MarkdownBlock = memo(function MarkdownBlock({ source, streaming, caret }) {
+    return (_jsx(StreamingBlockContext, { value: streaming, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: caret ? REHYPE_CARET : REHYPE_NONE, components: components, urlTransform: urlTransform, children: source }) }));
+});
+/** Assistant-message renderer: GFM, Shiki code blocks, calm prose rhythm, streaming-safe. */
+export function Markdown({ children, streaming = false, measure = false, allowImageHosts, codeActions, className, ...props }) {
+    const blocks = useMemo(() => splitMarkdownBlocks(children), [children]);
+    const hostKey = allowImageHosts?.join("\n") ?? "";
+    const hosts = useMemo(() => new Set(hostKey === "" ? [] : hostKey.split("\n")), [hostKey]);
+    return (_jsxs("div", { "data-slot": "markdown", "data-streaming": streaming || undefined, className: cn("min-w-0 text-md text-fg [overflow-wrap:break-word]", "[&>*+*]:mt-4 [&>*+:is(h1,h2)]:mt-8 [&>*+:is(h3,h4,h5,h6)]:mt-6 [&>:is(h1,h2,h3,h4,h5,h6)+*]:mt-2", measure && "max-w-[72ch]", className), ...props, children: [_jsx(ImageHostsContext, { value: hosts, children: _jsx(CodeActionsContext, { value: codeActions, children: blocks.map((block, index) => {
+                        const live = streaming && index === blocks.length - 1;
+                        return (_jsx(MarkdownBlock
+                        // biome-ignore lint/suspicious/noArrayIndexKey: blocks only append or change in place, so position is identity
+                        , { source: live ? remend(block) : block, streaming: live, caret: live }, index));
+                    }) }) }), streaming && blocks.length === 0 && _jsx("span", { "aria-hidden": true, className: "stream-caret" })] }));
+}

package/dist/components/menu.d.ts

@@ -0,0 +1,132 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+/** Positioner wrapper: stacking only — the popup owns all visuals. */
+export declare const menuPositionerClass = "z-(--z-overlay) outline-none";
+/** The floating surface for menus and context menus. */
+export declare const menuPopupClass: string;
+export declare const menuItemStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "";
+        /** Irreversible or data-losing actions. Tinted only on highlight so menus stay calm. */
+        destructive: "text-danger-fg data-highlighted:bg-danger-subtle data-highlighted:text-danger-fg [&_[data-slot=menu-item-icon]]:text-danger-fg";
+    };
+    /** Reserve the leading indicator column so plain items align with checkbox/radio items. */
+    inset: {
+        true: "ps-8";
+    };
+}, undefined, string[], {
+    variant: {
+        default: "";
+        /** Irreversible or data-losing actions. Tinted only on highlight so menus stay calm. */
+        destructive: "text-danger-fg data-highlighted:bg-danger-subtle data-highlighted:text-danger-fg [&_[data-slot=menu-item-icon]]:text-danger-fg";
+    };
+    /** Reserve the leading indicator column so plain items align with checkbox/radio items. */
+    inset: {
+        true: "ps-8";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "";
+        /** Irreversible or data-losing actions. Tinted only on highlight so menus stay calm. */
+        destructive: "text-danger-fg data-highlighted:bg-danger-subtle data-highlighted:text-danger-fg [&_[data-slot=menu-item-icon]]:text-danger-fg";
+    };
+    /** Reserve the leading indicator column so plain items align with checkbox/radio items. */
+    inset: {
+        true: "ps-8";
+    };
+}, undefined>>;
+export type MenuItemVariants = VariantProps<typeof menuItemStyles>;
+export declare const menuGroupLabelClass = "flex h-7 select-none items-center px-2 text-xs font-medium text-fg-subtle";
+export declare const menuSeparatorClass = "-mx-1 my-1 h-px bg-border-subtle";
+/** Shared content layout for every kind of item: icon · label/description · shortcut/trailing. */
+export declare function MenuItemContent({ icon, description, shortcut, trailing, children, }: {
+    icon?: ReactNode;
+    description?: ReactNode;
+    shortcut?: readonly string[] | undefined;
+    trailing?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+interface ItemSlots {
+    /** Leading icon (lucide element). */
+    icon?: ReactNode;
+    /** Secondary line under the label (e.g. model context window). */
+    description?: ReactNode;
+    /** The action it triggers: its keys from the host's keymap show as a trailing hint (prefer it). */
+    action?: string;
+    /** Logical keys rendered as a trailing hint when there is no `action`, e.g. `["mod", "shift", "f"]`. */
+    shortcut?: readonly string[];
+    /** Any trailing adornment (badge, count…). */
+    trailing?: ReactNode;
+}
+export declare const MenuRoot: typeof BaseMenu.Root;
+export declare const MenuTrigger: BaseMenu.Trigger;
+export declare const MenuGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuRadioGroup: import("react").NamedExoticComponent<Omit<import("@base-ui/react").MenuRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuSubmenuRoot: typeof BaseMenu.SubmenuRoot;
+export interface MenuContentProps extends ComponentProps<typeof BaseMenu.Popup> {
+    side?: ComponentProps<typeof BaseMenu.Positioner>["side"];
+    align?: ComponentProps<typeof BaseMenu.Positioner>["align"];
+    sideOffset?: number;
+    alignOffset?: number;
+    /** Extra props for the positioner (collision handling, anchor…). */
+    positionerProps?: Omit<ComponentProps<typeof BaseMenu.Positioner>, "side" | "align" | "sideOffset" | "alignOffset">;
+    /**
+     * Where the popup mounts (default: the body). Inside a container-query container, its items can
+     * follow that container's width, e.g. an overflow menu showing what its bar hides.
+     */
+    container?: ComponentProps<typeof BaseMenu.Portal>["container"];
+}
+/** Portal + positioner + popup in one. */
+export declare function MenuContent({ side, align, sideOffset, alignOffset, positionerProps, container, className, ...props }: MenuContentProps): import("react").JSX.Element;
+/**
+ * Popup for a nested menu. Overlaps the parent by its padding so the first item lines up with
+ * the trigger row.
+ */
+export declare function MenuSubmenuContent({ sideOffset, alignOffset, positionerProps, className, ...props }: Omit<MenuContentProps, "side" | "align">): import("react").JSX.Element;
+export interface MenuItemProps extends Omit<ComponentProps<typeof BaseMenu.Item>, "children">, ItemSlots, MenuItemVariants {
+    children?: ReactNode;
+}
+export declare function MenuItem({ icon, description, action, shortcut: given, trailing, variant, inset, className, children, ...props }: MenuItemProps): import("react").JSX.Element;
+export interface MenuLinkItemProps extends Omit<ComponentProps<typeof BaseMenu.LinkItem>, "children">, Omit<ItemSlots, "description">, MenuItemVariants {
+    children?: ReactNode;
+}
+/** Navigates (renders an `<a>`); otherwise identical to MenuItem. */
+export declare function MenuLinkItem({ icon, action, shortcut: given, trailing, variant, inset, className, children, ...props }: MenuLinkItemProps): import("react").JSX.Element;
+export interface MenuCheckboxItemProps extends Omit<ComponentProps<typeof BaseMenu.CheckboxItem>, "children">, Omit<ItemSlots, "icon"> {
+    children?: ReactNode;
+}
+/** Toggle with a leading check. Stays open on click so several options can be flipped. */
+export declare function MenuCheckboxItem({ description, action, shortcut: given, trailing, closeOnClick, className, children, ...props }: MenuCheckboxItemProps): import("react").JSX.Element;
+export interface MenuRadioItemProps extends Omit<ComponentProps<typeof BaseMenu.RadioItem>, "children">, ItemSlots {
+    children?: ReactNode;
+}
+/**
+ * One choice of a `MenuRadioGroup`. The check sits on the trailing edge when an `icon` is given
+ * (model pickers), otherwise in the leading indicator column.
+ */
+export declare function MenuRadioItem({ icon, description, action, shortcut: given, trailing, className, children, ...props }: MenuRadioItemProps): import("react").JSX.Element;
+export interface MenuSubmenuTriggerProps extends Omit<ComponentProps<typeof BaseMenu.SubmenuTrigger>, "children">, Pick<ItemSlots, "icon" | "description">, Pick<MenuItemVariants, "inset"> {
+    children?: ReactNode;
+}
+export declare function MenuSubmenuTrigger({ icon, description, inset, className, children, ...props }: MenuSubmenuTriggerProps): import("react").JSX.Element;
+export declare function MenuGroupLabel({ className, ...props }: ComponentProps<typeof BaseMenu.GroupLabel>): import("react").JSX.Element;
+export declare function MenuSeparator({ className, ...props }: ComponentProps<typeof BaseMenu.Separator>): import("react").JSX.Element;
+export interface MenuProps {
+    /** The trigger element; must accept a ref and DOM props (e.g. <Button>). */
+    trigger: ComponentProps<typeof BaseMenu.Trigger>["render"];
+    children: ReactNode;
+    side?: MenuContentProps["side"];
+    align?: MenuContentProps["align"];
+    open?: boolean;
+    onOpenChange?: ComponentProps<typeof BaseMenu.Root>["onOpenChange"];
+    /** Popup class (e.g. a width). */
+    className?: string;
+    /** Where the popup mounts (`MenuContent`'s `container`). */
+    container?: MenuContentProps["container"];
+    /** Positioner props (`MenuContent`'s `positionerProps`). */
+    positionerProps?: MenuContentProps["positionerProps"];
+}
+/** Convenience wrapper: `<Menu trigger={<Button>Options</Button>}>…items…</Menu>`. */
+export declare function Menu({ trigger, children, side, align, open, onOpenChange, className, container, positionerProps, }: MenuProps): import("react").JSX.Element;
+export {};

package/dist/components/menu.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Check, ChevronRight } from "lucide-react";
+import { cn, tv, withBase } from "../lib/cn.js";
+import { keyShortcutsProps } from "../lib/keys.js";
+import { useShortcut } from "../lib/shortcut-context.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { ItemLabel } from "./item-label.js";
+import { Shortcut } from "./kbd.js";
+/* ------------------------------------------------------------------------------------------ */
+/* Shared styles — reused by ContextMenu (and any other list-of-actions popup).               */
+/* ------------------------------------------------------------------------------------------ */
+/** Positioner wrapper: stacking only — the popup owns all visuals. */
+export const menuPositionerClass = "z-(--z-overlay) outline-none";
+/** The floating surface for menus and context menus. */
+export const menuPopupClass = cn("popup-motion surface-raised min-w-48 max-w-80 rounded-xl p-1 text-fg outline-none", "max-h-(--available-height) overflow-y-auto overscroll-contain scrollbar-none");
+export const menuItemStyles = tv({
+    base: [
+        "group/menu-item relative flex min-h-8 w-full cursor-default select-none items-center gap-2 rounded-md px-2",
+        "text-base text-fg outline-none",
+        "transition-[background-color,color] duration-(--duration-instant) ease-(--ease-standard)",
+        "data-highlighted:bg-hover data-popup-open:bg-hover",
+        "data-disabled:pointer-events-none data-disabled:opacity-45",
+        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    ],
+    variants: {
+        variant: {
+            default: "",
+            /** Irreversible or data-losing actions. Tinted only on highlight so menus stay calm. */
+            destructive: "text-danger-fg data-highlighted:bg-danger-subtle data-highlighted:text-danger-fg [&_[data-slot=menu-item-icon]]:text-danger-fg",
+        },
+        /** Reserve the leading indicator column so plain items align with checkbox/radio items. */
+        inset: { true: "ps-8" },
+    },
+    defaultVariants: { variant: "default" },
+});
+export const menuGroupLabelClass = "flex h-7 select-none items-center px-2 text-xs font-medium text-fg-subtle";
+export const menuSeparatorClass = "-mx-1 my-1 h-px bg-border-subtle";
+const iconClass = "flex size-4 shrink-0 items-center justify-center text-fg-subtle transition-colors duration-(--duration-instant) group-data-highlighted/menu-item:text-fg-muted";
+const indicatorClass = cn("flex size-4 items-center justify-center text-fg", "transition-[opacity,scale] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy)", "data-starting-style:scale-50 data-starting-style:opacity-0 data-ending-style:scale-50 data-ending-style:opacity-0", "motion-reduce:transition-none");
+/** Shared content layout for every kind of item: icon · label/description · shortcut/trailing. */
+export function MenuItemContent({ icon, description, shortcut, trailing, children, }) {
+    return (_jsxs(_Fragment, { children: [icon !== undefined && (_jsx("span", { "data-slot": "menu-item-icon", "aria-hidden": true, className: iconClass, children: icon })), _jsx(ItemLabel, { description: description, children: children }), shortcut && _jsx(Shortcut, { keys: shortcut, bare: true, size: "md", className: "ms-auto shrink-0 ps-4" }), trailing] }));
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Menu                                                                                       */
+/* ------------------------------------------------------------------------------------------ */
+export const MenuRoot = BaseMenu.Root;
+export const MenuTrigger = BaseMenu.Trigger;
+export const MenuGroup = BaseMenu.Group;
+export const MenuRadioGroup = BaseMenu.RadioGroup;
+export const MenuSubmenuRoot = BaseMenu.SubmenuRoot;
+/** Portal + positioner + popup in one. */
+export function MenuContent({ side = "bottom", align = "start", sideOffset = 6, alignOffset = 0, positionerProps, container, className, ...props }) {
+    const scoped = usePortalContainer();
+    return (_jsx(BaseMenu.Portal, { container: container ?? scoped, children: _jsx(BaseMenu.Positioner, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: 8, className: menuPositionerClass, ...positionerProps, children: _jsx(BaseMenu.Popup, { "data-slot": "menu", className: withBase(menuPopupClass, className), ...props }) }) }));
+}
+/**
+ * Popup for a nested menu. Overlaps the parent by its padding so the first item lines up with
+ * the trigger row.
+ */
+export function MenuSubmenuContent({ sideOffset = -2, alignOffset = -5, positionerProps, className, ...props }) {
+    const container = usePortalContainer();
+    return (_jsx(BaseMenu.Portal, { container: container, children: _jsx(BaseMenu.Positioner, { sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: 8, className: menuPositionerClass, ...positionerProps, children: _jsx(BaseMenu.Popup, { "data-slot": "menu-submenu", className: withBase(menuPopupClass, className), ...props }) }) }));
+}
+export function MenuItem({ icon, description, action, shortcut: given, trailing, variant, inset, className, children, ...props }) {
+    const shortcut = useShortcut(action) ?? given;
+    return (_jsx(BaseMenu.Item, { ...keyShortcutsProps(shortcut), "data-slot": "menu-item", "data-variant": variant ?? "default", className: withBase(menuItemStyles({ variant, inset }), className), ...props, children: _jsx(MenuItemContent, { icon: icon, description: description, shortcut: shortcut, trailing: trailing, children: children }) }));
+}
+/** Navigates (renders an `<a>`); otherwise identical to MenuItem. */
+export function MenuLinkItem({ icon, action, shortcut: given, trailing, variant, inset, className, children, ...props }) {
+    const shortcut = useShortcut(action) ?? given;
+    return (_jsx(BaseMenu.LinkItem, { ...keyShortcutsProps(shortcut), "data-slot": "menu-item", className: withBase(menuItemStyles({ variant, inset }), className), ...props, children: _jsx(MenuItemContent, { icon: icon, shortcut: shortcut, trailing: trailing, children: children }) }));
+}
+/** Toggle with a leading check. Stays open on click so several options can be flipped. */
+export function MenuCheckboxItem({ description, action, shortcut: given, trailing, closeOnClick = false, className, children, ...props }) {
+    const shortcut = useShortcut(action) ?? given;
+    return (_jsxs(BaseMenu.CheckboxItem, { ...keyShortcutsProps(shortcut), "data-slot": "menu-checkbox-item", closeOnClick: closeOnClick, className: withBase(menuItemStyles(), className), ...props, children: [_jsx("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: _jsx(BaseMenu.CheckboxItemIndicator, { className: indicatorClass, children: _jsx(Check, { strokeWidth: 2.25, className: "size-3.5" }) }) }), _jsx(MenuItemContent, { description: description, shortcut: shortcut, trailing: trailing, children: children })] }));
+}
+/**
+ * One choice of a `MenuRadioGroup`. The check sits on the trailing edge when an `icon` is given
+ * (model pickers), otherwise in the leading indicator column.
+ */
+export function MenuRadioItem({ icon, description, action, shortcut: given, trailing, className, children, ...props }) {
+    const shortcut = useShortcut(action) ?? given;
+    const indicator = (_jsx(BaseMenu.RadioItemIndicator, { className: indicatorClass, children: _jsx(Check, { strokeWidth: 2.25, className: "size-3.5" }) }));
+    return (_jsxs(BaseMenu.RadioItem, { ...keyShortcutsProps(shortcut), "data-slot": "menu-radio-item", className: withBase(menuItemStyles(), className), ...props, children: [icon === undefined && (_jsx("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: indicator })), _jsx(MenuItemContent, { icon: icon, description: description, shortcut: shortcut, trailing: icon === undefined ? (trailing) : (_jsxs(_Fragment, { children: [trailing, _jsx("span", { "aria-hidden": true, className: "ms-auto flex size-4 shrink-0 items-center justify-center", children: indicator })] })), children: children })] }));
+}
+export function MenuSubmenuTrigger({ icon, description, inset, className, children, ...props }) {
+    return (_jsx(BaseMenu.SubmenuTrigger, { "data-slot": "menu-submenu-trigger", className: withBase(menuItemStyles({ inset }), className), ...props, children: _jsx(MenuItemContent, { icon: icon, description: description, trailing: _jsx(ChevronRight, { "aria-hidden": true, className: "ms-auto size-3.5 text-fg-subtle" }), children: children }) }));
+}
+export function MenuGroupLabel({ className, ...props }) {
+    return (_jsx(BaseMenu.GroupLabel, { "data-slot": "menu-group-label", className: withBase(menuGroupLabelClass, className), ...props }));
+}
+export function MenuSeparator({ className, ...props }) {
+    return (_jsx(BaseMenu.Separator, { "data-slot": "menu-separator", className: withBase(menuSeparatorClass, className), ...props }));
+}
+/** Convenience wrapper: `<Menu trigger={<Button>Options</Button>}>…items…</Menu>`. */
+export function Menu({ trigger, children, side, align, open, onOpenChange, className, container, positionerProps, }) {
+    return (_jsxs(BaseMenu.Root, { ...(open !== undefined && { open }), ...(onOpenChange && { onOpenChange }), children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(MenuContent, { ...(side && { side }), ...(align && { align }), ...(container !== undefined && { container }), ...(positionerProps !== undefined && { positionerProps }), className: className, children: children })] }));
+}

package/dist/components/message-bubble.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentProps } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const messageBubble: import("tailwind-variants").TVReturnType<{
+    /** Who wrote it: the person (a quiet fill), or an automated sender (a hairline). */
+    from: {
+        person: "bg-bg-muted";
+        agent: "border border-border bg-surface";
+    };
+    size: {
+        /** A demo or a preview of a conversation. */
+        sm: "px-3.5 py-2 text-sm";
+        md: "px-4 py-2.5 text-md";
+    };
+    /** Not sent yet (queued): faded until it goes. */
+    pending: {
+        true: "opacity-60";
+    };
+}, undefined, "max-w-[85%] whitespace-pre-wrap rounded-2xl rounded-ee-md text-fg [overflow-wrap:anywhere]", {
+    /** Who wrote it: the person (a quiet fill), or an automated sender (a hairline). */
+    from: {
+        person: "bg-bg-muted";
+        agent: "border border-border bg-surface";
+    };
+    size: {
+        /** A demo or a preview of a conversation. */
+        sm: "px-3.5 py-2 text-sm";
+        md: "px-4 py-2.5 text-md";
+    };
+    /** Not sent yet (queued): faded until it goes. */
+    pending: {
+        true: "opacity-60";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    /** Who wrote it: the person (a quiet fill), or an automated sender (a hairline). */
+    from: {
+        person: "bg-bg-muted";
+        agent: "border border-border bg-surface";
+    };
+    size: {
+        /** A demo or a preview of a conversation. */
+        sm: "px-3.5 py-2 text-sm";
+        md: "px-4 py-2.5 text-md";
+    };
+    /** Not sent yet (queued): faded until it goes. */
+    pending: {
+        true: "opacity-60";
+    };
+}, undefined>>;
+export interface MessageBubbleProps extends ComponentProps<"div">, VariantProps<typeof messageBubble> {
+}
+/**
+ * A message the person sent, as a conversation draws it: a rounded bubble at the end of the line
+ * with its tail at the bottom end. The surface alone: the host adds attachments, the time and actions
+ * around it.
+ */
+export declare function MessageBubble({ from, size, pending, className, ...props }: MessageBubbleProps): import("react").JSX.Element;
+export {};

package/dist/components/message-bubble.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "../lib/cn.js";
+const messageBubble = tv({
+    base: "max-w-[85%] whitespace-pre-wrap rounded-2xl rounded-ee-md text-fg [overflow-wrap:anywhere]",
+    variants: {
+        /** Who wrote it: the person (a quiet fill), or an automated sender (a hairline). */
+        from: {
+            person: "bg-bg-muted",
+            agent: "border border-border bg-surface",
+        },
+        size: {
+            /** A demo or a preview of a conversation. */
+            sm: "px-3.5 py-2 text-sm",
+            md: "px-4 py-2.5 text-md",
+        },
+        /** Not sent yet (queued): faded until it goes. */
+        pending: { true: "opacity-60" },
+    },
+    defaultVariants: { from: "person", size: "md" },
+});
+/**
+ * A message the person sent, as a conversation draws it: a rounded bubble at the end of the line
+ * with its tail at the bottom end. The surface alone: the host adds attachments, the time and actions
+ * around it.
+ */
+export function MessageBubble({ from, size, pending, className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-bubble", className: messageBubble({ from, size, pending, className }), ...props }));
+}