@corbits/react-ui 0.1.0

package/dist/ui/tabs.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+export type TabDescriptor<Id extends string> = {
+    readonly id: Id;
+    readonly label: string;
+    /** Shown beside the label — a count of what is inside. */
+    readonly count?: number;
+};
+export type TabsProps<Id extends string> = {
+    readonly tabs: readonly TabDescriptor<Id>[];
+    readonly active: Id;
+    readonly onChange: (id: Id) => void;
+    /** Names the set for assistive tech: "Insights sections". */
+    readonly label: string;
+    /** Renders the active panel. Called once — only the open panel is mounted. */
+    readonly children: (active: Id) => ReactNode;
+    /** `underline` for page-level navigation, `enclosed` for tabs inside a card. */
+    readonly variant?: "underline" | "enclosed";
+    readonly className?: string;
+};
+/**
+ * Tabs that behave the way the tab pattern promises.
+ *
+ * The parts people leave out are the parts that matter. A roving `tabIndex`
+ * puts *one* stop in the tab list, so Tab moves past the whole set into the
+ * panel instead of stepping through every tab — and that only works if arrow
+ * keys move between them, which is why `onKeyDown` here is not optional garnish.
+ * Home and End jump to the ends. `aria-controls` and `aria-labelledby` tie each
+ * tab to its panel in both directions, which is what makes "go to the panel this
+ * tab controls" a thing a screen reader can offer.
+ *
+ * Selection is controlled and only the active panel is mounted. Tab state is
+ * almost always also URL state — someone will want to link to a tab — and
+ * owning it internally means fighting the component to do that. Mounting one
+ * panel keeps hidden panels from fetching, animating, or holding focus.
+ *
+ * Focus follows the arrow keys, and only the arrow keys. The APG requires it:
+ * with a roving `tabIndex` the tab you arrowed away from becomes
+ * `tabIndex={-1}` and `aria-selected={false}`, so leaving focus there strands
+ * it on a tab that is no longer either the selection or a tab stop, and the
+ * next Tab press escapes from the wrong place. Selection by click does *not*
+ * move focus — the clicked tab already has it — and focus is never pushed into
+ * the panel, which is the "improvement" that stops people arrowing on.
+ */
+export declare function Tabs<Id extends string>({ tabs, active, onChange, label, children, variant, className, }: TabsProps<Id>): import("react").JSX.Element;

package/dist/ui/tabs.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * Tabs that behave the way the tab pattern promises.
+ *
+ * The parts people leave out are the parts that matter. A roving `tabIndex`
+ * puts *one* stop in the tab list, so Tab moves past the whole set into the
+ * panel instead of stepping through every tab — and that only works if arrow
+ * keys move between them, which is why `onKeyDown` here is not optional garnish.
+ * Home and End jump to the ends. `aria-controls` and `aria-labelledby` tie each
+ * tab to its panel in both directions, which is what makes "go to the panel this
+ * tab controls" a thing a screen reader can offer.
+ *
+ * Selection is controlled and only the active panel is mounted. Tab state is
+ * almost always also URL state — someone will want to link to a tab — and
+ * owning it internally means fighting the component to do that. Mounting one
+ * panel keeps hidden panels from fetching, animating, or holding focus.
+ *
+ * Focus follows the arrow keys, and only the arrow keys. The APG requires it:
+ * with a roving `tabIndex` the tab you arrowed away from becomes
+ * `tabIndex={-1}` and `aria-selected={false}`, so leaving focus there strands
+ * it on a tab that is no longer either the selection or a tab stop, and the
+ * next Tab press escapes from the wrong place. Selection by click does *not*
+ * move focus — the clicked tab already has it — and focus is never pushed into
+ * the panel, which is the "improvement" that stops people arrowing on.
+ */ export function Tabs({ tabs, active, onChange, label, children, variant = "underline", className }) {
+    const base = useId();
+    const tabId = (id)=>`${base}-tab-${id}`;
+    const panelId = (id)=>`${base}-panel-${id}`;
+    // Every tab button is rendered whatever the selection, so the node to focus
+    // already exists at the moment the key is handled — no effect, no timer.
+    const buttons = useRef(new Map());
+    /** Arrow/Home/End selection: change the tab *and* take focus with it. */ function focusTab(id) {
+        onChange(id);
+        buttons.current.get(id)?.focus();
+    }
+    function move(delta) {
+        const index = tabs.findIndex((tab)=>tab.id === active);
+        const next = tabs[(index + delta + tabs.length) % tabs.length];
+        if (next !== undefined) focusTab(next.id);
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("flex flex-col gap-4", className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                role: "tablist",
+                "aria-label": label,
+                onKeyDown: (event)=>{
+                    if (event.key === "ArrowRight") {
+                        event.preventDefault();
+                        move(1);
+                    } else if (event.key === "ArrowLeft") {
+                        event.preventDefault();
+                        move(-1);
+                    } else if (event.key === "Home") {
+                        event.preventDefault();
+                        if (tabs[0] !== undefined) focusTab(tabs[0].id);
+                    } else if (event.key === "End") {
+                        event.preventDefault();
+                        const last = tabs[tabs.length - 1];
+                        if (last !== undefined) focusTab(last.id);
+                    }
+                },
+                className: cn("flex flex-wrap items-center", variant === "underline" ? "gap-1 border-b border-border" : "gap-1 rounded-md border border-border p-1"),
+                children: tabs.map((tab)=>{
+                    const selected = tab.id === active;
+                    return /*#__PURE__*/ _jsxs("button", {
+                        ref: (node)=>{
+                            if (node === null) buttons.current.delete(tab.id);
+                            else buttons.current.set(tab.id, node);
+                        },
+                        type: "button",
+                        role: "tab",
+                        id: tabId(tab.id),
+                        "aria-selected": selected,
+                        "aria-controls": panelId(tab.id),
+                        tabIndex: selected ? 0 : -1,
+                        onClick: ()=>onChange(tab.id),
+                        className: cn("inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors", variant === "underline" ? // inactive, so selecting a tab does not shift the row.
+                        selected ? "-mb-px border-b-2 border-primary-emphasis text-foreground" : "-mb-px border-b-2 border-transparent text-muted-foreground hover:text-foreground" : selected ? "rounded-sm bg-muted text-foreground" : "rounded-sm text-muted-foreground hover:text-foreground"),
+                        children: [
+                            tab.label,
+                            tab.count === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                                className: "rounded-sm bg-muted px-1.5 font-mono text-xs text-muted-foreground",
+                                children: tab.count
+                            })
+                        ]
+                    }, tab.id);
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                role: "tabpanel",
+                id: panelId(active),
+                "aria-labelledby": tabId(active),
+                tabIndex: 0,
+                children: children(active)
+            })
+        ]
+    });
+}

package/dist/ui/textarea.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+export type TextareaProps = React.ComponentProps<"textarea"> & {
+    /** Grows the textarea to fit its content instead of scrolling internally. */
+    readonly autoResize?: boolean;
+    /** Pixel height autoResize grows to before it caps and scrolls. */
+    readonly maxHeight?: number;
+};
+export declare function Textarea({ className, autoResize, maxHeight, onChange, ...props }: TextareaProps): React.JSX.Element;

package/dist/ui/textarea.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/utils.js";
+// Matches ChatInput's MAX_ROWS_PX — the same cap, so a textarea grown by
+// autoResize behaves identically wherever it's used.
+const DEFAULT_MAX_HEIGHT_PX = 200;
+export function Textarea({ className, autoResize, maxHeight = DEFAULT_MAX_HEIGHT_PX, onChange, ...props }) {
+    const ref = useRef(null);
+    const resize = (element)=>{
+        element.style.height = "auto";
+        element.style.height = `${Math.min(element.scrollHeight, maxHeight)}px`;
+    };
+    useEffect(()=>{
+        if (autoResize && ref.current) resize(ref.current);
+    }, [
+        autoResize,
+        maxHeight
+    ]);
+    return /*#__PURE__*/ _jsx("textarea", {
+        ref: ref,
+        "data-slot": "textarea",
+        style: autoResize ? {
+            maxHeight
+        } : undefined,
+        className: cn("flex min-h-16 w-full min-w-0 rounded-md border border-input bg-card px-3 py-2 text-sm shadow-xs transition-colors", autoResize && "resize-none overflow-y-auto", "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50", className),
+        onChange: (event)=>{
+            if (autoResize) resize(event.currentTarget);
+            onChange?.(event);
+        },
+        ...props
+    });
+}

package/dist/ui/theme-provider.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+import { type ResolvedThemeMode, type ThemeMode, type ThemePreset } from "../lib/theme.js";
+export type ThemeContextValue = {
+    readonly mode: ThemeMode;
+    readonly setMode: (mode: ThemeMode) => void;
+    readonly cycleMode: () => void;
+    readonly resolvedMode: ResolvedThemeMode;
+    readonly preset: ThemePreset;
+    readonly setPreset: (preset: ThemePreset) => void;
+};
+export type ThemeProviderProps = {
+    readonly children: ReactNode;
+    /**
+     * localStorage key. Hosts that persist per user should pass a key that
+     * includes the user id (e.g. `corbits-theme:user_1`).
+     */
+    readonly storageKey?: string;
+    readonly defaultMode?: ThemeMode;
+    readonly defaultPreset?: ThemePreset;
+    /**
+     * Element that receives `.dark`/`.light`, `data-theme`, and `color-scheme`.
+     * Defaults to `document.documentElement`. A scoped root still inherits the
+     * OS-following media query, which only inspects `:root` — explicit light on
+     * a dark-OS host requires `.light` on `documentElement` regardless.
+     */
+    readonly root?: Element | null;
+};
+/**
+ * Owns light/dark/system mode and named preset overlays for the Corbits theme.
+ *
+ * The host mounts this once near the root and keys `storageKey` by user when
+ * signed in. Mode is applied as `.dark` on the root (see theme.css); presets
+ * as `data-theme`. Components never import storage — they call `useTheme`.
+ */
+export declare function ThemeProvider({ children, storageKey, defaultMode, defaultPreset, root, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;

package/dist/ui/theme-provider.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { DEFAULT_THEME_STORAGE_KEY, applyThemeToRoot, nextThemeMode, parseThemePreference, resolveThemeMode, serializeThemePreference } from "../lib/theme.js";
+const ThemeContext = /*#__PURE__*/ createContext(null);
+function readSystemPrefersDark() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return false;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function readStoredPreference(storageKey, fallback) {
+    if (typeof window === "undefined") return fallback;
+    try {
+        return parseThemePreference(window.localStorage.getItem(storageKey), fallback);
+    } catch  {
+        return fallback;
+    }
+}
+function writeStoredPreference(storageKey, preference) {
+    if (typeof window === "undefined") return;
+    try {
+        window.localStorage.setItem(storageKey, serializeThemePreference(preference));
+    } catch  {
+    // Quota / private mode — preference still applies for this session.
+    }
+}
+/**
+ * Owns light/dark/system mode and named preset overlays for the Corbits theme.
+ *
+ * The host mounts this once near the root and keys `storageKey` by user when
+ * signed in. Mode is applied as `.dark` on the root (see theme.css); presets
+ * as `data-theme`. Components never import storage — they call `useTheme`.
+ */ export function ThemeProvider({ children, storageKey = DEFAULT_THEME_STORAGE_KEY, defaultMode = "system", defaultPreset = "default", root = null }) {
+    const fallback = useMemo(()=>({
+            mode: defaultMode,
+            preset: defaultPreset
+        }), [
+        defaultMode,
+        defaultPreset
+    ]);
+    const [preference, setPreference] = useState(()=>readStoredPreference(storageKey, fallback));
+    const [systemPrefersDark, setSystemPrefersDark] = useState(readSystemPrefersDark);
+    // Re-read when the host changes the storage key (e.g. user signs in).
+    useEffect(()=>{
+        setPreference(readStoredPreference(storageKey, fallback));
+    }, [
+        storageKey,
+        fallback
+    ]);
+    useEffect(()=>{
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return;
+        }
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = ()=>setSystemPrefersDark(media.matches);
+        onChange();
+        media.addEventListener("change", onChange);
+        return ()=>media.removeEventListener("change", onChange);
+    }, []);
+    const resolvedMode = resolveThemeMode(preference.mode, systemPrefersDark);
+    useEffect(()=>{
+        const target = root ?? (typeof document !== "undefined" ? document.documentElement : null);
+        if (target === null) return;
+        applyThemeToRoot(target, resolvedMode, preference.preset);
+    }, [
+        root,
+        resolvedMode,
+        preference.preset
+    ]);
+    const setMode = useCallback((mode)=>{
+        setPreference((current)=>{
+            const next = {
+                mode,
+                preset: current.preset
+            };
+            writeStoredPreference(storageKey, next);
+            return next;
+        });
+    }, [
+        storageKey
+    ]);
+    const setPreset = useCallback((preset)=>{
+        setPreference((current)=>{
+            const next = {
+                mode: current.mode,
+                preset
+            };
+            writeStoredPreference(storageKey, next);
+            return next;
+        });
+    }, [
+        storageKey
+    ]);
+    const cycleMode = useCallback(()=>{
+        setMode(nextThemeMode(preference.mode));
+    }, [
+        preference.mode,
+        setMode
+    ]);
+    const value = useMemo(()=>({
+            mode: preference.mode,
+            setMode,
+            cycleMode,
+            resolvedMode,
+            preset: preference.preset,
+            setPreset
+        }), [
+        preference.mode,
+        preference.preset,
+        setMode,
+        cycleMode,
+        resolvedMode,
+        setPreset
+    ]);
+    return /*#__PURE__*/ _jsx(ThemeContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+export function useTheme() {
+    const value = useContext(ThemeContext);
+    if (value === null) {
+        throw new Error("No ThemeProvider in scope — wrap the tree in <ThemeProvider>.");
+    }
+    return value;
+}

package/dist/ui/theme-toggle.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonProps } from "./button.js";
+export type ThemeToggleProps = Omit<ButtonProps, "onClick" | "children" | "aria-label" | "title"> & {
+    /** Override the accessible name; defaults to the current mode label. */
+    readonly label?: string;
+};
+/**
+ * Cycles system → light → dark. Intended for the host identity dock (or any
+ * chrome that needs a one-control theme switch). Uses `useTheme`, so it must
+ * sit under `ThemeProvider`.
+ */
+export declare function ThemeToggle({ label, variant, size, ...props }: ThemeToggleProps): import("react").JSX.Element;

package/dist/ui/theme-toggle.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { Button } from "./button.js";
+import { useTheme } from "./theme-provider.js";
+function iconFor(mode) {
+    if (mode === "light") return /*#__PURE__*/ _jsx(Sun, {});
+    if (mode === "dark") return /*#__PURE__*/ _jsx(Moon, {});
+    return /*#__PURE__*/ _jsx(Monitor, {});
+}
+function labelFor(mode) {
+    if (mode === "light") return "Light theme";
+    if (mode === "dark") return "Dark theme";
+    return "System theme";
+}
+/**
+ * Cycles system → light → dark. Intended for the host identity dock (or any
+ * chrome that needs a one-control theme switch). Uses `useTheme`, so it must
+ * sit under `ThemeProvider`.
+ */ export function ThemeToggle({ label, variant = "ghost", size = "sm", ...props }) {
+    const { mode, cycleMode } = useTheme();
+    const name = label ?? labelFor(mode);
+    return /*#__PURE__*/ _jsx(Button, {
+        ...props,
+        type: "button",
+        variant: variant,
+        size: size,
+        onClick: cycleMode,
+        title: name,
+        "aria-label": name,
+        children: iconFor(mode)
+    });
+}

package/dist/ui/thinking-indicator.d.ts

@@ -0,0 +1,7 @@
+import { type ThinkingMarkProps } from "./thinking-mark.js";
+export interface ThinkingIndicatorProps extends ThinkingMarkProps {
+    /** Visible status text, also announced by assistive technology. */
+    label?: string;
+}
+/** A thinking status with Silk, Strata, or Echo motion. Defaults to Silk. */
+export declare function ThinkingIndicator({ label, className, style, ...markProps }: ThinkingIndicatorProps): import("react").JSX.Element;

package/dist/ui/thinking-indicator.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { ThinkingMark } from "./thinking-mark.js";
+/** A thinking status with Silk, Strata, or Echo motion. Defaults to Silk. */ export function ThinkingIndicator({ label = "Thinking...", className, style, ...markProps }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        role: "status",
+        className: cn("inline-flex items-center gap-1.5 text-sm text-muted-foreground", className),
+        style: style,
+        children: [
+            /*#__PURE__*/ _jsx(ThinkingMark, {
+                ...markProps,
+                className: "-translate-y-[8%]"
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                children: label
+            })
+        ]
+    });
+}

package/dist/ui/thinking-label.d.ts

@@ -0,0 +1,19 @@
+export type ThinkingLabelProps = {
+    /** What the agent is doing, in its own words — rotated in order. */
+    readonly verbs: readonly string[];
+    /** Rotation cadence. A heartbeat, not a ticker — keep it at ~1s or slower. */
+    readonly intervalMs?: number;
+    /** What the status role announces, once. Defaults to "Working". */
+    readonly statusLabel?: string;
+    readonly className?: string;
+};
+/**
+ * The shimmering "working" word, rotating through caller-supplied verbs on
+ * an interval. Every verb renders stacked in one grid cell, so the element's
+ * width is the widest verb and a swap crossfades instead of reflowing
+ * siblings. Visual rotation is decorative: a single `role="status"`
+ * announces "Working" once, so a screen reader is not re-interrupted every
+ * few seconds. Reduced motion is live via `usePrefersReducedMotion` and
+ * stops the rotation rather than just stilling the shimmer.
+ */
+export declare function ThinkingLabel({ verbs, intervalMs, statusLabel, className, }: ThinkingLabelProps): import("react").JSX.Element | null;

package/dist/ui/thinking-label.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ShimmerText } from "./shimmer-text.js";
+const DEFAULT_INTERVAL_MS = 3_000;
+/**
+ * The shimmering "working" word, rotating through caller-supplied verbs on
+ * an interval. Every verb renders stacked in one grid cell, so the element's
+ * width is the widest verb and a swap crossfades instead of reflowing
+ * siblings. Visual rotation is decorative: a single `role="status"`
+ * announces "Working" once, so a screen reader is not re-interrupted every
+ * few seconds. Reduced motion is live via `usePrefersReducedMotion` and
+ * stops the rotation rather than just stilling the shimmer.
+ */ export function ThinkingLabel({ verbs, intervalMs = DEFAULT_INTERVAL_MS, statusLabel = "Working", className }) {
+    const [at, setAt] = useState(0);
+    const reduceMotion = usePrefersReducedMotion();
+    useEffect(()=>{
+        if (verbs.length < 2 || !reduceMotion) return;
+        setAt(0);
+    }, [
+        verbs.length,
+        reduceMotion
+    ]);
+    useEffect(()=>{
+        if (verbs.length < 2 || reduceMotion) return;
+        const timer = setInterval(()=>setAt((current)=>(current + 1) % verbs.length), intervalMs);
+        return ()=>clearInterval(timer);
+    }, [
+        verbs.length,
+        intervalMs,
+        reduceMotion
+    ]);
+    if (verbs.length === 0) return null;
+    const active = at % verbs.length;
+    return /*#__PURE__*/ _jsxs("span", {
+        className: cn("text-sm", className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                role: "status",
+                className: "sr-only",
+                children: statusLabel
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                className: "inline-grid",
+                children: verbs.map((verb, index)=>/*#__PURE__*/ _jsx(ShimmerText, {
+                        className: cn("col-start-1 row-start-1 transition-opacity duration-200", index === active ? "opacity-100" : "opacity-0"),
+                        children: verb
+                    }, index))
+            })
+        ]
+    });
+}

package/dist/ui/thinking-mark.d.ts

@@ -0,0 +1,10 @@
+import { type CSSProperties } from "react";
+export type ThinkingVariant = "silk" | "strata" | "echo";
+export interface ThinkingMarkProps {
+    variant?: ThinkingVariant;
+    paused?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Decorative animated Corbits mark. Pair with visible text or ThinkingIndicator. */
+export declare function ThinkingMark({ variant, paused, className, style }: ThinkingMarkProps): import("react").JSX.Element;