@kortix/ui 0.0.0-stage → 0.14.4

package/dist/primitives/card.js

@@ -0,0 +1,291 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from './button.js';
+import { useProximityHover } from '../hooks/use-proximity-hover.js';
+import { fontWeights } from '../lib/font-weight.js';
+import { useIcon } from '../lib/icon-context.js';
+import { useUiLink } from '../providers/ui-provider.js';
+import { spring } from '../lib/springs.js';
+import { cn } from '../lib/utils.js';
+import { AnimatePresence, m } from 'motion/react';
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useMemo, useRef, } from 'react';
+const CardGroupContext = createContext(null);
+const CardContext = createContext({
+    emphasized: false,
+    orientation: 'card',
+    clickable: false,
+    hasImage: false,
+});
+const CardGroup = forwardRef(({ orientation = 'card', columns = 1, border = 'none', separated = false, proximityHover = true, className, children, ...props }, ref) => {
+    const containerRef = useRef(null);
+    // >1 column wraps into a grid, where nearest-item must be resolved in two
+    // dimensions; a single column is a plain vertical list.
+    const axis = columns > 1 ? 'xy' : 'y';
+    const { activeIndex, itemRects, sessionRef, handlers, registerItem, measureItems } = useProximityHover(containerRef, { axis });
+    // Assign each valid child a stable proximity index so callers never thread
+    // one through by hand (Table asks for it; here the group owns it).
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const count = childArray.length;
+    const indexed = childArray.map((child, i) => cloneElement(child, { index: i }));
+    // Which card is selected — so its neighbours can drop the divider that
+    // would otherwise slice through the selection fill.
+    const selectedIndex = childArray.findIndex((child) => child.props.selected);
+    useEffect(() => {
+        measureItems();
+    }, [measureItems, count, columns, orientation, separated, border]);
+    const outlined = border === 'outlined';
+    const divided = !separated;
+    const contextValue = useMemo(() => ({
+        registerItem,
+        activeIndex,
+        selectedIndex,
+        orientation,
+        columns,
+        count,
+        separated,
+        divided,
+        outlined,
+    }), [
+        registerItem,
+        activeIndex,
+        selectedIndex,
+        orientation,
+        columns,
+        count,
+        separated,
+        divided,
+        outlined,
+    ]);
+    const activeRect = proximityHover && activeIndex !== null ? itemRects[activeIndex] : null;
+    return (_jsx(CardGroupContext.Provider, { value: contextValue, children: _jsxs("div", { ref: (node) => {
+                containerRef.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, ...props, "data-slot": "card-group", "data-orientation": orientation, className: cn('relative grid', 
+            // A shared frame clips the highlight + dividers to its rounded
+            // corners; separated tiles clip themselves.
+            outlined && !separated && 'border-border/60 overflow-hidden rounded-xl border', separated ? 'gap-2' : 'gap-0', className), style: {
+                gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`,
+            }, onMouseEnter: proximityHover ? handlers.onMouseEnter : undefined, onMouseMove: proximityHover ? handlers.onMouseMove : undefined, onMouseLeave: proximityHover ? handlers.onMouseLeave : undefined, children: [_jsx(AnimatePresence, { children: activeRect && (_jsx(m.div, { "aria-hidden": true, layout: true, className: "bg-hover pointer-events-none absolute z-0 rounded-xl", style: {
+                            top: activeRect.top,
+                            left: activeRect.left,
+                            width: activeRect.width,
+                            height: activeRect.height,
+                        }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: spring.fast.exit }, transition: { ...spring.fast, opacity: { duration: 0.08 } } }, sessionRef.current)) }), indexed] }) }));
+});
+CardGroup.displayName = 'CardGroup';
+const Card = forwardRef(({ onClick, href, external, label, selected = false, disabled = false, dismissible = false, onDismiss, index, className, children, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const group = useContext(CardGroupContext);
+    const XIcon = useIcon('x');
+    const Link = useUiLink();
+    const orientation = group?.orientation ?? 'card';
+    const columns = group?.columns ?? 1;
+    const count = group?.count ?? 1;
+    const separated = group?.separated ?? true;
+    const divided = group?.divided ?? false;
+    const outlined = group?.outlined ?? false;
+    const activeIndex = group?.activeIndex ?? null;
+    const selectedIndex = group?.selectedIndex ?? -1;
+    // Depend on the stable registerItem callback, not the whole group context —
+    // the context object's identity changes on every proximity/selection frame,
+    // which would otherwise re-register every card each frame.
+    const registerItem = group?.registerItem;
+    useEffect(() => {
+        if (index === undefined || !registerItem)
+            return;
+        registerItem(index, internalRef.current);
+        return () => registerItem(index, null);
+    }, [index, registerItem]);
+    // Divider geometry: draw a hairline toward the neighbour below / to the
+    // right, but drop it next to the active OR selected card so the highlight
+    // and selection fill read clean (the same trick Table uses on row borders).
+    const col = index !== undefined ? index % columns : 0;
+    const hasBelow = index !== undefined && index + columns < count;
+    const hasRight = index !== undefined && col < columns - 1 && index + 1 < count;
+    const self = index ?? -1;
+    const touchesBelow = (i) => i === self || i === self + columns;
+    const touchesRight = (i) => i === self || i === self + 1;
+    const showBottom = divided && hasBelow && !(touchesBelow(activeIndex ?? -1) || touchesBelow(selectedIndex));
+    const showRight = divided && hasRight && !(touchesRight(activeIndex ?? -1) || touchesRight(selectedIndex));
+    const isInline = orientation === 'inline';
+    // An inline card with a full-bleed image reflows so its actions stack under
+    // the text (see the body wrapper below + CardHeader/CardFooter). Match the
+    // image child by identity OR displayName so detection and the split below
+    // agree even when module identity drifts (e.g. HMR duplication).
+    const isCardImage = (child) => isValidElement(child) &&
+        (child.type === CardImage ||
+            child.type?.displayName === 'CardImage');
+    const hasImage = Children.toArray(children).some(isCardImage);
+    const inlineImage = isInline && hasImage;
+    const clickable = !!href || !!onClick;
+    // Title weight follows the persistent selected state only — proximity hover
+    // previews via the highlight fill, not by bolding the label.
+    const emphasized = selected;
+    // A standalone card (no group) is its own tile — always rounded + clipped.
+    // Inside a group, a separated tile carries its own rounding + clip only when
+    // it draws a visible frame; a borderless separated tile has no surface to
+    // hug, so it stays unclipped and its media reads as a plain square, and a
+    // card in a continuous block leans on the shared group frame for both.
+    const tileShape = !group
+        ? 'rounded-xl overflow-hidden'
+        : separated && outlined
+            ? 'rounded-xl overflow-hidden border border-border/60'
+            : '';
+    // Stretched overlay makes the whole card the click target while keeping
+    // action buttons (higher z) independently clickable — the accessible
+    // alternative to nesting interactive elements inside a button/anchor. A
+    // disabled card drops the overlay entirely so it can't be tabbed to or
+    // activated by keyboard (pointer-events-none only blocks the mouse).
+    const overlay = clickable && !disabled ? (href ? (_jsx(Link, { href: href, onClick: onClick, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, "aria-label": label, className: "absolute inset-0 z-20 rounded-[inherit] outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)]" })) : (_jsx("button", { type: "button", onClick: onClick, "aria-label": label, "aria-pressed": selected || undefined, className: "absolute inset-0 z-20 rounded-[inherit] outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)]" }))) : null;
+    const cardContext = useMemo(() => ({ emphasized, orientation, clickable, hasImage }), [emphasized, orientation, clickable, hasImage]);
+    // Inline image cards wrap their non-image parts in a centred column so the
+    // title, description, and actions hug together and sit vertically centred
+    // against the image instead of stretching to its full height.
+    let body = children;
+    if (inlineImage) {
+        const parts = Children.toArray(children);
+        const image = parts.find(isCardImage);
+        const rest = parts.filter((part) => part !== image);
+        body = (_jsxs(_Fragment, { children: [image, _jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-2 py-3.5 pr-4", children: rest })] }));
+    }
+    return (_jsx(CardContext.Provider, { value: cardContext, children: _jsxs("div", { ref: (node) => {
+                internalRef.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, "data-slot": "card", "data-proximity-index": index, "data-selected": selected || undefined, "data-orientation": orientation, "aria-disabled": disabled || undefined, className: cn('group/card relative z-10 min-h-[60px] min-w-0', inlineImage
+                ? // Image on the left; the text + actions ride in a centred
+                    // column beside it (see the wrapper in the body below).
+                    'flex flex-row items-center gap-3'
+                : isInline
+                    ? 'flex flex-row items-center gap-3 pl-4'
+                    : 'flex flex-col pb-4', 
+            // Standalone (no group) cards can't lean on the group highlight, so
+            // they carry their own hover tint when interactive.
+            !group && clickable && !disabled && 'hover:bg-hover transition-colors duration-80', tileShape, disabled && 'pointer-events-none opacity-50', className), ...props, children: [selected && (_jsx("span", { "aria-hidden": true, className: "bg-active pointer-events-none absolute inset-0 -z-10 rounded-xl" })), showBottom && (_jsx("span", { "aria-hidden": true, className: "bg-border/60 pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-px" })), showRight && (_jsx("span", { "aria-hidden": true, className: cn('bg-border/60 pointer-events-none absolute top-0 right-0 -z-10 w-px', showBottom ? 'bottom-px' : 'bottom-0') })), overlay, body, dismissible && (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onDismiss, "aria-label": "Dismiss", className: "text-muted-foreground hover:text-foreground absolute top-2 right-2 z-30", children: _jsx(XIcon, { size: 15, strokeWidth: 1.5, className: "size-[15px]" }) }))] }) }));
+});
+Card.displayName = 'Card';
+// ── CardHeader ───────────────────────────────────────────
+// shadcn's header grid: title + description stack, with CardAction pinned to
+// the top-right column. In an inline card it becomes the flexible text column
+// between the leading media and trailing footer.
+const CardHeader = forwardRef(({ className, ...props }, ref) => {
+    const { orientation, hasImage } = useContext(CardContext);
+    const inlineImage = orientation === 'inline' && hasImage;
+    return (_jsx("div", { ref: ref, "data-slot": "card-header", className: cn('grid auto-rows-min items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto]', 
+        // With an action present the header is two columns, but only the
+        // action belongs in the second one. Auto-placement would otherwise
+        // flow a third sibling (media, eyebrow…) into the free right-hand
+        // cell and park the description beside the title.
+        '[&>*:not([data-slot=card-action])]:col-start-1', inlineImage
+            ? 'min-w-0'
+            : orientation === 'inline'
+                ? 'min-w-0 flex-1 py-3.5'
+                : 'px-4 pt-4', className), ...props }));
+});
+CardHeader.displayName = 'CardHeader';
+// ── CardTitle ────────────────────────────────────────────
+const CardTitle = forwardRef(({ className, children, ...props }, ref) => {
+    const { emphasized, orientation } = useContext(CardContext);
+    // Inline rows trim the title to cap height so it centres tightly against
+    // the media/actions; stacked cards keep the natural line box.
+    const trim = orientation === 'inline' ? '[text-box:trim-both_cap_alphabetic]' : '';
+    // Ghost-span pattern: an invisible semibold copy reserves the width so the
+    // resting→active weight animation never reflows the row.
+    return (_jsxs("span", { ref: ref, "data-slot": "card-title", className: cn('inline-grid text-[length:var(--text-sm,0.875rem)] leading-snug', className), ...props, children: [_jsx("span", { className: cn('invisible col-start-1 row-start-1', trim), style: { fontVariationSettings: fontWeights.semibold }, "aria-hidden": "true", children: children }), _jsx("span", { className: cn('text-foreground col-start-1 row-start-1 transition-[font-variation-settings] duration-80', trim), style: {
+                    // normal → semibold on emphasis, matching nav-item / menu-item /
+                    // table (the opsz-paired tokens keep the advance width ~constant).
+                    fontVariationSettings: emphasized ? fontWeights.semibold : fontWeights.normal,
+                }, children: children })] }));
+});
+CardTitle.displayName = 'CardTitle';
+// ── CardDescription ──────────────────────────────────────
+const CardDescription = forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, "data-slot": "card-description", className: cn('text-muted-foreground text-[length:var(--text-sm,0.875rem)] leading-normal', className), ...props })));
+CardDescription.displayName = 'CardDescription';
+// ── CardAction ───────────────────────────────────────────
+// Pinned to the header's top-right column (shadcn's slot). Sits above the
+// stretched overlay so any control inside stays independently clickable.
+const CardAction = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "card-action", className: cn('relative z-30 col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props })));
+CardAction.displayName = 'CardAction';
+// ── CardContent ──────────────────────────────────────────
+const CardContent = forwardRef(({ className, ...props }, ref) => {
+    const { orientation } = useContext(CardContext);
+    return (_jsx("div", { ref: ref, "data-slot": "card-content", className: cn(orientation === 'inline' ? '' : 'px-4 pt-3', className), ...props }));
+});
+CardContent.displayName = 'CardContent';
+// ── CardFooter ───────────────────────────────────────────
+// Actions row. Rises above the stretched overlay (z-30) so buttons stay
+// clickable. In an inline card it becomes the trailing, right-aligned slot.
+const CardFooter = forwardRef(({ className, ...props }, ref) => {
+    const { orientation, hasImage } = useContext(CardContext);
+    const inlineImage = orientation === 'inline' && hasImage;
+    return (_jsx("div", { ref: ref, "data-slot": "card-footer", className: cn('relative z-30 flex items-center gap-1', inlineImage
+            ? // Under the text, left-aligned in natural order (the inline
+                // wrapper owns the spacing).
+                'flex-wrap'
+            : orientation === 'inline'
+                ? 'ml-auto shrink-0 pr-4'
+                : 'flex-wrap px-4 pt-3', className), ...props }));
+});
+CardFooter.displayName = 'CardFooter';
+function CardMedia({ logo, logoAlt, icon: Icon, size = 22, className }) {
+    const { orientation } = useContext(CardContext);
+    // Stacked: sits in the header grid; add an extra 8px so the gap below the
+    // icon reads 12px (header gap-1 + mb-2). Inline: leading slot — the card owns
+    // the left inset, so no extra padding here.
+    const wrap = cn(orientation === 'inline' ? '' : 'mb-2', className);
+    if (logo) {
+        const logos = Array.isArray(logo) ? logo : [logo];
+        return (_jsx("span", { "data-slot": "card-media", className: cn('inline-flex shrink-0 items-center gap-1.5', wrap), children: logos.map((src, i) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [i > 0 && _jsx("span", { "aria-hidden": true, className: "bg-border h-px w-2" }), _jsx("img", { src: src, alt: logoAlt ?? '', width: size, height: size, className: "rounded-lg object-contain", style: { width: size, height: size } })] }, src))) }));
+    }
+    if (Icon) {
+        // The icon sits in a 32×32 tinted tile so it reads as a media slot rather
+        // than a bare glyph. The tile is an overlay tint (not a solid surface) so it
+        // blends over whatever is behind it — the substrate or the hover highlight.
+        return (_jsx("span", { "data-slot": "card-media", className: cn('bg-hover inline-flex size-8 shrink-0 items-center justify-center rounded-lg', wrap), children: _jsx(Icon, { size: 18, strokeWidth: 1.5, className: "text-muted-foreground" }) }));
+    }
+    return null;
+}
+function CardImage({ src, alt, className }) {
+    const { orientation } = useContext(CardContext);
+    return (
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { src: src, alt: alt ?? '', "data-slot": "card-image", 
+        // The image keeps a fixed 2px corner radius in every state — stacked or
+        // inline, framed or borderless — rather than inheriting a frame's larger
+        // clip. (A framed tile still clips the surrounding surface as before.)
+        className: cn('rounded-[2px] object-cover', orientation === 'inline' ? 'size-40 shrink-0' : 'aspect-[16/9] w-full', className) }));
+}
+// A stable marker so the Card can recognise an image child by name, surviving
+// module-identity mismatches (e.g. HMR duplication) that break `type ===`.
+CardImage.displayName = 'CardImage';
+// ── CardEyebrow ──────────────────────────────────────────
+// Small uppercase label above the title (e.g. "New Model").
+const CardEyebrow = forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, "data-slot": "card-eyebrow", className: cn('text-muted-foreground text-[11px] tracking-wide uppercase', className), style: { fontVariationSettings: fontWeights.semibold }, ...props })));
+CardEyebrow.displayName = 'CardEyebrow';
+function CardFeature({ icon: Icon, title, description }) {
+    return (_jsxs("div", { "data-slot": "card-feature", className: "flex items-start gap-2.5", children: [Icon && (_jsx(Icon, { size: 16, strokeWidth: 1.5, className: "text-muted-foreground mt-0.5 shrink-0" })), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "text-foreground text-[length:var(--text-xs,0.8125rem)] [text-box:trim-both_cap_alphabetic]", style: { fontVariationSettings: fontWeights.medium }, children: title }), description && (_jsx("span", { className: "text-muted-foreground text-[12px] leading-relaxed", children: description }))] })] }));
+}
+function CardButton({ children, onClick, href, variant, size = 'sm', icon: Icon, iconPosition, external = false, disabled = false, }) {
+    const ArrowRight = useIcon('arrow-right');
+    const Link = useUiLink();
+    const position = iconPosition ?? (external ? 'end' : 'start');
+    // No size class on either glyph: Button's own svg rules own the scale, so an
+    // icon tracks whichever `size` the caller picked instead of being pinned.
+    const glyph = Icon ? (_jsx(Icon, { strokeWidth: 1.5, className: "shrink-0 transition-[stroke-width] duration-80 group-hover/action:stroke-[2]" })) : null;
+    const externalGlyph = external ? (_jsx(ArrowRight, { strokeWidth: 1.5, className: "shrink-0 -rotate-45 transition-[stroke-width] duration-80 group-hover/action:stroke-[2]" })) : null;
+    const inner = (_jsxs(_Fragment, { children: [position === 'start' && glyph, _jsx("span", { className: "[text-box:trim-both_cap_alphabetic]", children: children }), position === 'end' && glyph, externalGlyph] }));
+    // Button owns the whole box — height, padding, radius, type scale. The card
+    // adds only what the surface needs: a hover group for the glyph, a lift above
+    // the stretched overlay, and `link`'s bare-text box.
+    const classes = cn('group/action relative z-30', variant === 'link' && 'h-auto px-0');
+    if (href) {
+        return (_jsx(Button, { asChild: true, variant: variant, size: size, className: classes, children: _jsx(Link, { href: href, onClick: onClick, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, children: inner }) }));
+    }
+    return (_jsx(Button, { type: "button", variant: variant, size: size, onClick: onClick, disabled: disabled, className: classes, children: inner }));
+}
+export { Card, CardAction, CardButton, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardHeader, CardImage, CardMedia, CardTitle, };

package/dist/primitives/chain-of-thought.d.ts

@@ -0,0 +1,75 @@
+/**
+ * ChainOfThought — a vertical list of steps, each opening independently.
+ *
+ * Adapted from prompt-kit (https://prompt-kit.com/c/chain-of-thought.json),
+ * then reduced to the two parts that are actually used: the list and the step.
+ * Upstream's `ChainOfThoughtItem`, `ChainOfThoughtTrigger` and
+ * `ChainOfThoughtContent` are gone — nothing imported them, and
+ * `ChainOfThoughtContent` carried a SECOND rail implementation that contradicted
+ * the one below.
+ */
+import * as React from 'react';
+import { Disclosure } from './disclosure.js';
+export type ChainOfThoughtStepProps = React.ComponentProps<typeof Disclosure>;
+/**
+ * One step. It owns no spacing — the list does.
+ *
+ * A step used to carry `pb-3` (and `pb-2` when last), which made the gap a
+ * property of the ROW rather than of the list. Two costs, both visible: the
+ * final step left trailing padding that no following gap balanced, so a chain
+ * sitting between two paragraphs was 12px from the one above and 20px from the
+ * one below; and a chain of exactly one step — a single tool call — was a row
+ * with 8px hanging off the bottom for no reason at all. `space-y` on the list
+ * puts the gap BETWEEN rows, which is where a gap belongs: even everywhere,
+ * absent at both ends.
+ *
+ * The rail draws only while the step is OPEN.
+ *
+ * It used to connect every step to the next, running the whole height of the
+ * chain — a spine down a list of independent rows. That is not what the line
+ * means. The line means "this content belongs to the row above it", which is
+ * only true when there IS content, i.e. when the step is open. Drawn always, it
+ * asserts a sequence the rows do not have, and it turns a quiet list into a
+ * diagram.
+ *
+ * "Open" has to be asked TWO ways, because a step's content is not always
+ * behind the step's own disclosure. A thought, a group and a file-chip row all
+ * bind to this `Disclosure`, so `data-state` on the step answers for them. A
+ * plain tool row does not: `ToolPartRenderer` brings its own nested
+ * `Disclosure`, so expanding a `bash` row leaves the step reading `closed` and
+ * the first rule silently never fires — which is exactly how a expanded command
+ * ended up as the one row in the chain with no rail beside it. The `has-`
+ * clause asks the descendants instead: if anything inside this step is open,
+ * there is content, and content is what the line is for.
+ *
+ * Positioning: the rail is absolute so `bottom-0` stretches it to whatever the
+ * step currently is — a search card, a command block, a paragraph of reasoning.
+ * A fixed-height spacer cannot know how tall its sibling is, which is how the
+ * old version visibly broke the moment a step expanded. `left-2` puts the
+ * hairline on the 8px centre of the 16px leading icon, the column every step's
+ * icon occupies; `top-[1.6rem]` clears that icon so the rail reads as hanging
+ * from it rather than striking through it.
+ *
+ * A row that leads with no icon — the bare single-step burst — still draws it.
+ * The rail's job is to tie content to the row above it, and that is true whether
+ * or not the row happens to show a glyph. What such a row must NOT do is let its
+ * content start at the margin: the hairline then lands 8px INSIDE the content
+ * and strikes through the left edge of the file chip. The indent is what gives
+ * the rail its lane, so bare rows keep it (`pl-7` / `--tool-indent`) even though
+ * they drop the icon that indent was originally measured from.
+ */
+export declare function ChainOfThoughtStep({ children, className, ...props }: ChainOfThoughtStepProps): React.JSX.Element;
+export type ChainOfThoughtProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * The list. One `space-y` and nothing else.
+ *
+ * This used to `React.cloneElement` every child to inject `isLast`, which the
+ * step needed to decide its own padding and whether to draw a rail. Both
+ * questions are gone — spacing lives here, and the rail follows open state — so
+ * the clone went with them. A `map` + `cloneElement` on every render, for a list
+ * that re-renders on every SSE frame, bought nothing.
+ */
+export declare function ChainOfThought({ children, className }: ChainOfThoughtProps): React.JSX.Element;

package/dist/primitives/chain-of-thought.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Disclosure } from './disclosure.js';
+import { cn } from '../lib/utils.js';
+/**
+ * One step. It owns no spacing — the list does.
+ *
+ * A step used to carry `pb-3` (and `pb-2` when last), which made the gap a
+ * property of the ROW rather than of the list. Two costs, both visible: the
+ * final step left trailing padding that no following gap balanced, so a chain
+ * sitting between two paragraphs was 12px from the one above and 20px from the
+ * one below; and a chain of exactly one step — a single tool call — was a row
+ * with 8px hanging off the bottom for no reason at all. `space-y` on the list
+ * puts the gap BETWEEN rows, which is where a gap belongs: even everywhere,
+ * absent at both ends.
+ *
+ * The rail draws only while the step is OPEN.
+ *
+ * It used to connect every step to the next, running the whole height of the
+ * chain — a spine down a list of independent rows. That is not what the line
+ * means. The line means "this content belongs to the row above it", which is
+ * only true when there IS content, i.e. when the step is open. Drawn always, it
+ * asserts a sequence the rows do not have, and it turns a quiet list into a
+ * diagram.
+ *
+ * "Open" has to be asked TWO ways, because a step's content is not always
+ * behind the step's own disclosure. A thought, a group and a file-chip row all
+ * bind to this `Disclosure`, so `data-state` on the step answers for them. A
+ * plain tool row does not: `ToolPartRenderer` brings its own nested
+ * `Disclosure`, so expanding a `bash` row leaves the step reading `closed` and
+ * the first rule silently never fires — which is exactly how a expanded command
+ * ended up as the one row in the chain with no rail beside it. The `has-`
+ * clause asks the descendants instead: if anything inside this step is open,
+ * there is content, and content is what the line is for.
+ *
+ * Positioning: the rail is absolute so `bottom-0` stretches it to whatever the
+ * step currently is — a search card, a command block, a paragraph of reasoning.
+ * A fixed-height spacer cannot know how tall its sibling is, which is how the
+ * old version visibly broke the moment a step expanded. `left-2` puts the
+ * hairline on the 8px centre of the 16px leading icon, the column every step's
+ * icon occupies; `top-[1.6rem]` clears that icon so the rail reads as hanging
+ * from it rather than striking through it.
+ *
+ * A row that leads with no icon — the bare single-step burst — still draws it.
+ * The rail's job is to tie content to the row above it, and that is true whether
+ * or not the row happens to show a glyph. What such a row must NOT do is let its
+ * content start at the margin: the hairline then lands 8px INSIDE the content
+ * and strikes through the left edge of the file chip. The indent is what gives
+ * the rail its lane, so bare rows keep it (`pl-7` / `--tool-indent`) even though
+ * they drop the icon that indent was originally measured from.
+ */
+export function ChainOfThoughtStep({ children, className, ...props }) {
+    return (_jsxs(Disclosure, { className: cn('group/step relative', className), ...props, children: [_jsx("div", { "aria-hidden": true, className: cn('bg-muted-foreground/15 absolute top-[1.6rem] bottom-0 left-2 w-[1px]', 'hidden group-data-[state=open]/step:block', 'group-has-[[data-state=open]]/step:block') }), children] }));
+}
+/**
+ * The list. One `space-y` and nothing else.
+ *
+ * This used to `React.cloneElement` every child to inject `isLast`, which the
+ * step needed to decide its own padding and whether to draw a rail. Both
+ * questions are gone — spacing lives here, and the rail follows open state — so
+ * the clone went with them. A `map` + `cloneElement` on every render, for a list
+ * that re-renders on every SSE frame, bought nothing.
+ */
+export function ChainOfThought({ children, className }) {
+    return _jsx("div", { className: cn('space-y-3', className), children: children });
+}

package/dist/primitives/chart.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+interface ChartTooltipContentProps extends React.ComponentProps<'div'> {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        value?: number | string;
+        payload?: Record<string, unknown>;
+        color?: string;
+        dataKey?: string | number;
+        fill?: string;
+        type?: string;
+    }>;
+    label?: string;
+    labelFormatter?: (value: unknown, payload: unknown[]) => React.ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: string, item: unknown, index: number, payload: unknown) => React.ReactNode;
+    color?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+}
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+interface ChartLegendContentProps extends React.ComponentProps<'div'> {
+    payload?: Array<{
+        value?: string;
+        type?: string;
+        id?: string;
+        color?: string;
+        dataKey?: string | number;
+    }>;
+    verticalAlign?: 'top' | 'bottom';
+    hideIcon?: boolean;
+    nameKey?: string;
+}
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ChartLegendContentProps): React.JSX.Element | null;
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, };

package/dist/primitives/chart.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { cn } from '../lib/utils.js';
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChart must be used within a <ChartContainer />');
+    }
+    return context;
+}
+function ChartContainer({ id, className, children, config, ...props }) {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    const contextValue = React.useMemo(() => ({ config }), [config]);
+    return (_jsx(ChartContext.Provider, { value: contextValue, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+}
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] || itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join('\n')}
+}
+`)
+                .join('\n'),
+        } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const tooltipLabel = (() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === 'string'
+            ? config[label]?.label || label
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (_jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: cn('font-medium', labelClassName), children: value });
+    })();
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+    const visibleItems = payload.filter((item) => item.type !== 'none');
+    return (_jsxs("div", { className: cn('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: visibleItems.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const itemPayload = item.payload;
+                    const indicatorColor = color || itemPayload?.fill || item.color;
+                    return (_jsx("div", { className: cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn('shrink-0 rounded-[2px]', {
+                                        'h-2.5 w-2.5': indicator === 'dot',
+                                        'w-1': indicator === 'line',
+                                        'w-0 border-[length:calc(var(--border-width,1px)*1.5)] border-dashed bg-transparent': indicator === 'dashed',
+                                        'my-0.5': nestLabel && indicator === 'dashed',
+                                    }), style: {
+                                        backgroundColor: indicator !== 'dashed' ? indicatorColor : undefined,
+                                        borderColor: indicator === 'dashed' ? indicatorColor : undefined,
+                                    } }))), _jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value !== undefined && (_jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }))] })] })) }, String(item.dataKey ?? item.name ?? 'value')));
+                }) })] }));
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    const visibleItems = payload.filter((item) => item.type !== 'none');
+    return (_jsx("div", { className: cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: visibleItems.map((item) => {
+            const key = `${nameKey || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, item.value));
+        }) }));
+}
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== 'object' || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload && typeof payload[key] === 'string') {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === 'string') {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, };

package/dist/primitives/checkbox-group.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+type CheckboxGroupProps = Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> & {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    disabled?: boolean;
+    name?: string;
+};
+declare function CheckboxGroup({ className, value, defaultValue, onValueChange, disabled, name, ...props }: CheckboxGroupProps): React.JSX.Element;
+type CheckboxGroupItemProps = {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+};
+declare function CheckboxGroupItem({ value: itemValue, label, disabled: itemDisabled, id, className, }: CheckboxGroupItemProps): React.JSX.Element;
+export { CheckboxGroup, CheckboxGroupItem };
+export type { CheckboxGroupItemProps, CheckboxGroupProps };