@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/radio-group.d.ts

@@ -0,0 +1,16 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+export type RadioGroupProps<Value = string> = BaseRadioGroup.Props<Value>;
+export type RadioGroupItemProps<Value = string> = BaseRadio.Root.Props<Value>;
+/**
+ * A set of radios where one value is chosen. Arrow keys move between items
+ * and select them. Name the group with `aria-label` or `aria-labelledby`.
+ * Children may include a legend, helper, or error next to the items.
+ */
+export declare function RadioGroup<Value = string>({ className, ...props }: RadioGroupProps<Value>): import("react").JSX.Element;
+/**
+ * A 16px radio with a larger hit area. Name it with a wrapping `Label`, a
+ * `Label htmlFor` pointing at its `id`, or `aria-label`. Set `aria-invalid`
+ * to draw a danger ring.
+ */
+export declare function RadioGroupItem<Value = string>({ className, ...props }: RadioGroupItemProps<Value>): import("react").JSX.Element;

package/dist/components/radio-group.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { stateClassName } from "../internal/classes.js";
+/**
+ * A set of radios where one value is chosen. Arrow keys move between items
+ * and select them. Name the group with `aria-label` or `aria-labelledby`.
+ * Children may include a legend, helper, or error next to the items.
+ */
+export function RadioGroup({ className, ...props }) {
+    return (_jsx(BaseRadioGroup, { "data-slot": "radio-group", ...props, className: stateClassName("sprout-radio-group", className) }));
+}
+/**
+ * A 16px radio with a larger hit area. Name it with a wrapping `Label`, a
+ * `Label htmlFor` pointing at its `id`, or `aria-label`. Set `aria-invalid`
+ * to draw a danger ring.
+ */
+export function RadioGroupItem({ className, ...props }) {
+    return (_jsx(BaseRadio.Root, { "data-slot": "radio-group-item", ...props, className: stateClassName("sprout-radio-group-item", className), children: _jsx(BaseRadio.Indicator, { "data-slot": "radio-group-indicator", className: "sprout-radio-group-indicator" }) }));
+}

package/dist/components/reasoning-effort.d.ts

@@ -0,0 +1,24 @@
+export interface ReasoningEffortProps {
+    /** Level names from lowest to highest effort. Each one gets a tick. */
+    levels: readonly string[];
+    /** Index of the chosen level in `levels`. */
+    value: number;
+    /** Called with the new index on drag, click, or key press. */
+    onValueChange: (index: number) => void;
+    /**
+     * Bold text before the level name in the bubble shown while dragging,
+     * such as the model name.
+     */
+    label?: string | undefined;
+    /** Names the slider. Defaults to "Reasoning effort". */
+    "aria-label"?: string | undefined;
+    /** Points at visible text that names the slider, instead of `aria-label`. */
+    "aria-labelledby"?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * A pill-shaped slider that picks one of a few effort levels. While dragging,
+ * a bubble grows out of the track and shows `label` and the level name.
+ * Release snaps the thumb to the nearest level.
+ */
+export declare function ReasoningEffort({ levels, value, onValueChange, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: ReasoningEffortProps): import("react").JSX.Element;

package/dist/components/reasoning-effort.js

@@ -0,0 +1,269 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { cn } from "../internal/classes.js";
+const TRACK = 256;
+const HEIGHT = 32;
+const RADIUS = HEIGHT / 2;
+const BUMP_H = 20;
+const REST_W = 27.2;
+const DRAG_W = 33.6;
+const REST_H = 27.2;
+const EDGE_PAD = (HEIGHT - REST_H) / 2;
+const SHOULDER = 23.572;
+/** Space from each label edge to the foot of the shoulder. */
+const TEXT_SIDE = 20;
+/** How far the outer foot walks down the end cap once it passes the crown. */
+const PHI_MAX = 0.6;
+const PHI_REACH = 36;
+function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}
+function easeOut(t) {
+    return 1 - (1 - t) ** 3;
+}
+function smoothstep(t) {
+    const x = clamp(t, 0, 1);
+    return x * x * (3 - 2 * x);
+}
+function reducedMotion() {
+    return (typeof window !== "undefined" &&
+        window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+}
+function plateauFor(textW) {
+    return Math.max(8, textW + TEXT_SIDE * 2 - SHOULDER * 2);
+}
+function capFoot(side, phi) {
+    const crown = side === -1 ? RADIUS : TRACK - RADIUS;
+    return {
+        x: crown + side * RADIUS * Math.sin(phi),
+        y: BUMP_H + RADIUS * (1 - Math.cos(phi)),
+    };
+}
+function shellGeom(cx, plateauW) {
+    const crownL = RADIUS;
+    const crownR = TRACK - RADIUS;
+    let topL = cx - plateauW / 2;
+    let topR = topL + plateauW;
+    let phiL = 0;
+    let phiR = 0;
+    const overflowL = crownL - (topL - SHOULDER);
+    if (overflowL > 0) {
+        phiL = PHI_MAX * smoothstep(overflowL / PHI_REACH);
+        const foot = capFoot(-1, phiL);
+        const minTopL = foot.x + SHOULDER * Math.cos(phiL);
+        if (topL < minTopL) {
+            topR += minTopL - topL;
+            topL = minTopL;
+        }
+    }
+    const overflowR = topR + SHOULDER - crownR;
+    if (overflowR > 0) {
+        phiR = PHI_MAX * smoothstep(overflowR / PHI_REACH);
+        const foot = capFoot(1, phiR);
+        const maxTopR = foot.x - SHOULDER * Math.cos(phiR);
+        if (topR > maxTopR) {
+            topL -= topR - maxTopR;
+            topR = maxTopR;
+        }
+    }
+    // A tilted shoulder is shorter in x, which would pull the label onto the
+    // outer edge. Grow the plateau inward by that loss and keep the label with it.
+    const insetL = phiL > 0 ? SHOULDER * (1 - Math.cos(phiL)) : 0;
+    const insetR = phiR > 0 ? SHOULDER * (1 - Math.cos(phiR)) : 0;
+    topR += insetL;
+    topL -= insetR;
+    return { topL, topR, phiL, phiR, insetL, insetR };
+}
+/** One shoulder curve. `phi` tilts the foot onto the cap tangent; 0 is flat. */
+function shoulderCmds(footX, footY, platX, platY, phi, dir) {
+    const xScale = Math.abs(platX - footX) / SHOULDER;
+    const yScale = Math.max(0.001, (footY - platY) / 20);
+    const tangent = { x: dir * Math.cos(phi), y: -Math.sin(phi) };
+    const map = (lx, ly) => ({
+        x: footX + dir * lx * xScale,
+        y: footY + (ly - 20) * yScale,
+    });
+    const h1 = 5.398 * xScale;
+    const p0 = { x: footX, y: footY };
+    const c1 = { x: footX + tangent.x * h1, y: footY + tangent.y * h1 };
+    const c2 = map(10.012, 16.114);
+    const p1 = map(10.93, 10.794);
+    const c3 = map(11.916, 4.577);
+    const c4 = map(17.277, 0);
+    const p3 = { x: platX, y: platY };
+    const fmt = (p) => `${p.x.toFixed(2)} ${p.y.toFixed(2)}`;
+    if (dir === 1)
+        return `C${fmt(c1)} ${fmt(c2)} ${fmt(p1)}C${fmt(c3)} ${fmt(c4)} ${fmt(p3)}`;
+    return `C${fmt(c4)} ${fmt(c3)} ${fmt(p1)}C${fmt(c2)} ${fmt(c1)} ${fmt(p0)}`;
+}
+/** One outline: the pill, with the label bump grown out of its top edge. */
+function shellPath(cx, open, plateauW) {
+    const trackTop = BUMP_H;
+    const trackBot = BUMP_H + HEIGHT;
+    const crownL = RADIUS;
+    const crownR = TRACK - RADIUS;
+    if (open < 0.012) {
+        return `M${crownL} ${trackTop}H${crownR}A${RADIUS} ${RADIUS} 0 0 1 ${crownR} ${trackBot}H${crownL}A${RADIUS} ${RADIUS} 0 0 1 ${crownL} ${trackTop}Z`;
+    }
+    const bumpTop = BUMP_H * (1 - open);
+    const { topL, topR, phiL, phiR } = shellGeom(cx, plateauW);
+    const cmds = [`M${crownL} ${trackBot}`];
+    if (phiL > 0.001) {
+        const foot = capFoot(-1, phiL);
+        cmds.push(`A${RADIUS} ${RADIUS} 0 0 1 ${foot.x.toFixed(2)} ${foot.y.toFixed(2)}`);
+        cmds.push(shoulderCmds(foot.x, foot.y, topL, bumpTop, phiL, 1));
+    }
+    else {
+        cmds.push(`A${RADIUS} ${RADIUS} 0 0 1 ${crownL} ${trackTop}`);
+        const footL = topL - SHOULDER;
+        if (footL > crownL + 0.4)
+            cmds.push(`H${footL.toFixed(2)}`);
+        cmds.push(shoulderCmds(footL, trackTop, topL, bumpTop, 0, 1));
+    }
+    if (topR > topL + 0.4)
+        cmds.push(`H${topR.toFixed(2)}`);
+    if (phiR > 0.001) {
+        const foot = capFoot(1, phiR);
+        cmds.push(shoulderCmds(foot.x, foot.y, topR, bumpTop, phiR, -1));
+        cmds.push(`A${RADIUS} ${RADIUS} 0 0 1 ${crownR} ${trackBot}`);
+    }
+    else {
+        const footR = topR + SHOULDER;
+        cmds.push(shoulderCmds(footR, trackTop, topR, bumpTop, 0, -1));
+        if (footR < crownR - 0.4)
+            cmds.push(`H${crownR}`);
+        cmds.push(`A${RADIUS} ${RADIUS} 0 0 1 ${crownR} ${trackBot}`);
+    }
+    cmds.push(`H${crownL}Z`);
+    return cmds.join("");
+}
+function useTween(target, duration, delay = 0) {
+    const ref = useRef(target);
+    const [value, setValue] = useState(target);
+    useEffect(() => {
+        const from = ref.current;
+        if (reducedMotion() || Math.abs(target - from) < 0.001) {
+            ref.current = target;
+            setValue(target);
+            return;
+        }
+        const start = performance.now();
+        let raf = 0;
+        const step = (now) => {
+            const elapsed = now - start - delay;
+            if (elapsed >= 0) {
+                const t = Math.min(1, elapsed / duration);
+                ref.current = from + (target - from) * easeOut(t);
+                setValue(ref.current);
+                if (t === 1)
+                    return;
+            }
+            raf = requestAnimationFrame(step);
+        };
+        raf = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(raf);
+    }, [target, duration, delay]);
+    return value;
+}
+/**
+ * A pill-shaped slider that picks one of a few effort levels. While dragging,
+ * a bubble grows out of the track and shows `label` and the level name.
+ * Release snaps the thumb to the nearest level.
+ */
+export function ReasoningEffort({ levels, value, onValueChange, label, "aria-label": ariaLabel = "Reasoning effort", "aria-labelledby": ariaLabelledBy, className, }) {
+    const max = Math.max(0, levels.length - 1);
+    const current = clamp(Math.round(value), 0, max);
+    const trackRef = useRef(null);
+    const labelRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [dragValue, setDragValue] = useState(current);
+    const [textW, setTextW] = useState(64);
+    const gradId = useId();
+    const settled = useTween(dragging ? dragValue : current, 220);
+    const display = dragging ? dragValue : settled;
+    const open = useTween(dragging ? 1 : 0, 220);
+    const reveal = useTween(dragging ? 1 : 0, dragging ? 132 : 90, dragging ? 85 : 0);
+    const plateauW = useTween(plateauFor(textW), 90);
+    const centerFor = (index) => RADIUS + (max === 0 ? 0 : index / max) * (TRACK - RADIUS * 2);
+    const valueFrom = (clientX) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect || max === 0)
+            return current;
+        return clamp(((clientX - rect.left - RADIUS) / (rect.width - RADIUS * 2)) * max, 0, max);
+    };
+    const move = (next) => {
+        setDragValue(next);
+        if (Math.round(next) !== current)
+            onValueChange(Math.round(next));
+    };
+    const onPointerDown = (event) => {
+        if (event.button !== 0)
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        setDragging(true);
+        move(valueFrom(event.clientX));
+    };
+    const onPointerMove = (event) => {
+        if (dragging)
+            move(valueFrom(event.clientX));
+    };
+    const onPointerUp = (event) => {
+        if (!dragging)
+            return;
+        if (event.currentTarget.hasPointerCapture?.(event.pointerId))
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        setDragging(false);
+    };
+    const onKeyDown = (event) => {
+        const keys = {
+            ArrowRight: current + 1,
+            ArrowUp: current + 1,
+            ArrowLeft: current - 1,
+            ArrowDown: current - 1,
+            Home: 0,
+            End: max,
+        };
+        const next = keys[event.key];
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        const clamped = clamp(next, 0, max);
+        if (clamped !== current)
+            onValueChange(clamped);
+    };
+    const center = centerFor(display);
+    const thumbW = REST_W + (DRAG_W - REST_W) * open;
+    const thumbLeft = clamp(center - thumbW / 2, EDGE_PAD, TRACK - EDGE_PAD - thumbW);
+    const thumbRight = thumbLeft + thumbW;
+    const fillW = Math.min(TRACK, thumbRight + EDGE_PAD);
+    const active = Math.round(display);
+    const level = levels[active];
+    const plateau = shellGeom(center, plateauW);
+    const labelX = (plateau.topL + plateau.topR) / 2 + (plateau.insetL - plateau.insetR) / 2;
+    useLayoutEffect(() => {
+        const w = labelRef.current?.getBoundingClientRect().width ?? 0;
+        if (w > 0 && Math.abs(w - textW) > 0.4)
+            setTextW(w);
+    }, [level, label, textW]);
+    return (_jsxs("div", { "data-slot": "reasoning-effort", "data-dragging": dragging, className: cn("sprout-reasoning-effort", className), children: [_jsxs("svg", { className: "sprout-reasoning-effort-shell", viewBox: `0 0 ${TRACK} ${BUMP_H + HEIGHT}`, "aria-hidden": "true", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0", className: "sprout-reasoning-effort-stop-top" }), _jsx("stop", { offset: "1", className: "sprout-reasoning-effort-stop-bottom" })] }) }), _jsx("path", { "data-slot": "reasoning-effort-shell", d: shellPath(center, open, plateauW), fill: `url(#${gradId})`, strokeWidth: "0.5", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }), _jsx("div", { ref: labelRef, "data-slot": "reasoning-effort-bubble", "aria-hidden": "true", className: "sprout-reasoning-effort-bubble", style: {
+                    left: labelX,
+                    opacity: reveal,
+                    filter: reveal > 0.98
+                        ? undefined
+                        : `blur(${((1 - reveal) * 3).toFixed(2)}px)`,
+                    transform: `translate(-50%, ${3 * (1 - open)}px)`,
+                }, children: _jsxs("span", { className: "sprout-reasoning-effort-bubble-text", children: [label && (_jsx("span", { className: "sprout-reasoning-effort-bubble-label", children: label })), _jsx("span", { className: "sprout-reasoning-effort-bubble-level", children: level })] }, level) }), _jsxs("div", { ref: trackRef, role: "slider", tabIndex: 0, "data-slot": "reasoning-effort-track", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": levels[current], className: "sprout-reasoning-effort-track", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, children: [_jsx("div", { "data-slot": "reasoning-effort-fill", className: "sprout-reasoning-effort-fill", style: { width: fillW } }), _jsx("div", { "data-slot": "reasoning-effort-thumb", className: "sprout-reasoning-effort-thumb", style: {
+                            left: thumbLeft,
+                            width: thumbW,
+                            height: REST_H,
+                            marginTop: -REST_H / 2,
+                        } }), levels.map((name, index) => {
+                        const x = centerFor(index);
+                        const onThumb = x >= thumbLeft + 0.5 && x <= thumbRight - 0.5;
+                        return (_jsx("span", { "data-slot": "reasoning-effort-tick", "data-on-thumb": onThumb, "data-active": index === active && !onThumb, className: "sprout-reasoning-effort-tick", style: {
+                                left: x,
+                                height: 4.8 + (max === 0 ? 0 : index / max) * 4.8,
+                            } }, `${index}-${name}`));
+                    })] })] }));
+}

package/dist/components/resizable.d.ts

@@ -0,0 +1,67 @@
+import { type ComponentProps } from "react";
+export declare const resizableOrientationNames: readonly ["horizontal", "vertical"];
+/** `"horizontal"` places panels side by side. `"vertical"` stacks them. */
+export type ResizableOrientation = (typeof resizableOrientationNames)[number];
+/**
+ * Numbers are pixels. Strings may end in `%`, `px`, `rem`, `em`, `vw`, or `vh`.
+ * A string without a unit is a percentage, so `"40"` is the same as `"40%"`.
+ */
+export type ResizableSize = number | string;
+/** Panel sizes in percent of the group, keyed by panel `id`. */
+export type ResizableLayout = Record<string, number>;
+export interface ResizableLayoutChangeDetails {
+    /** True for pointer and keyboard resizes. False for mount and container changes. */
+    isUserInteraction: boolean;
+}
+export interface ResizablePanelGroupProps extends ComponentProps<"div"> {
+    /** `"horizontal"` (default) places panels side by side. `"vertical"` stacks them. */
+    orientation?: ResizableOrientation;
+    /** Starting sizes by panel `id`, such as a layout saved by `useResizableLayout`. */
+    defaultLayout?: ResizableLayout | undefined;
+    /** Called on every change, including each pointer move while dragging. */
+    onLayoutChange?: ((layout: ResizableLayout) => void) | undefined;
+    /** Called once a change settles: on mount, after a drag ends, and after each key press. */
+    onLayoutChanged?: ((layout: ResizableLayout, details: ResizableLayoutChangeDetails) => void) | undefined;
+}
+/** A row or column of resizable panels separated by `ResizableHandle`s. */
+export declare function ResizablePanelGroup({ orientation, defaultLayout, onLayoutChange, onLayoutChanged, className, children, ref, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
+export interface ResizablePanelProps extends Omit<ComponentProps<"div">, "id"> {
+    /** Key for this panel in layouts. Set it when saving layouts or showing panels conditionally. */
+    id?: string;
+    /** Starting size. Panels without one share the space that is left. */
+    defaultSize?: ResizableSize | undefined;
+    /** Smallest size while resizing. Defaults to 0%. */
+    minSize?: ResizableSize | undefined;
+    /** Largest size while resizing. Defaults to 100%. */
+    maxSize?: ResizableSize | undefined;
+}
+/** One resizable region. It must be a direct child of `ResizablePanelGroup`. */
+export declare function ResizablePanel({ id: idProp, defaultSize, minSize, maxSize, className, style, ref, ...props }: ResizablePanelProps): import("react").JSX.Element;
+export interface ResizableHandleProps extends ComponentProps<"div"> {
+    /** Shows a small grip on the line, for splits people resize often. */
+    withHandle?: boolean;
+}
+/**
+ * The divider between two panels. Drag it, or focus it and use the arrow keys.
+ * Home and End move it to the first panel's minimum and maximum size.
+ */
+export declare function ResizableHandle({ withHandle, className, children, onPointerDown, onKeyDown, ref, ...props }: ResizableHandleProps): import("react").JSX.Element;
+export interface UseResizableLayoutOptions {
+    /** Storage key for this split. Use one per place the split appears. */
+    id: string;
+    /** Panel ids currently shown. Each set of panels keeps its own saved layout. */
+    panelIds?: readonly string[] | undefined;
+    /** Only save sizes the person chose, not the starting layout. */
+    onlySaveAfterUserInteractions?: boolean | undefined;
+    /** Where to save. Defaults to `localStorage`. */
+    storage?: Pick<Storage, "getItem" | "setItem"> | undefined;
+}
+export interface ResizableLayoutStore {
+    defaultLayout: ResizableLayout | undefined;
+    onLayoutChanged: (layout: ResizableLayout, details: ResizableLayoutChangeDetails) => void;
+}
+/**
+ * Remembers a group's layout between visits. Spread the result onto
+ * `ResizablePanelGroup` as `defaultLayout` and `onLayoutChanged`.
+ */
+export declare function useResizableLayout({ id, panelIds, onlySaveAfterUserInteractions, storage, }: UseResizableLayoutOptions): ResizableLayoutStore;