@brdgapp/ui 0.1.2 → 1.0.0

package/components/segmented-control.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { cn } from "@brdgapp/ui/lib/utils";
+function SegmentedControl({ options, value, onChange, className, ...props }) {
+    return (_jsx(ToggleGroup, { "data-slot": "segmented-control", "aria-label": props["aria-label"], value: [value], onValueChange: (next) => {
+            // A single-choice control never ends up with nothing selected.
+            const picked = next[0];
+            if (picked !== undefined && picked !== value)
+                onChange(picked);
+        }, className: cn("inline-flex gap-[2px] rounded-full border border-[var(--border-default)] bg-[var(--surface-secondary)] p-[3px]", className), children: options.map((option) => (_jsx(Toggle, { value: option.value, "aria-label": option.ariaLabel, "data-slot": "segmented-control-option", className: cn("rounded-full px-3 py-[5px] text-[12px] font-semibold text-[var(--text-muted)] transition-colors duration-150 outline-none", "hover:text-[var(--text-body)] focus-visible:ring-2 focus-visible:ring-[var(--primary)] [&_svg]:size-3.5", "data-[pressed]:bg-[var(--surface-elevated)] data-[pressed]:text-[var(--text-primary)] data-[pressed]:shadow-[0_1px_2px_rgba(13,21,49,0.10)]"), children: option.label }, option.value))) }));
+}
+export { SegmentedControl };

package/components/skeleton.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const skeletonVariants: (props?: ({
+    shape?: "circle" | "line" | "block" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SkeletonProps = VariantProps<typeof skeletonVariants> & {
+    /** Size and position only: `w-1/2`, `size-8`, `h-24`. The look comes from `shape`. */
+    className?: string;
+};
+declare function Skeleton({ shape, className }: SkeletonProps): React.JSX.Element;
+export { Skeleton, skeletonVariants };
+export type { SkeletonProps };

package/components/skeleton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@brdgapp/ui/lib/utils";
+// A grey placeholder shaped like content that hasn't loaded yet. Started from shadcn's skeleton, then put
+// on Bridge's token: Bridge OS draws about 170 of these by hand (`bg-[var(--surface-tertiary)]
+// animate-pulse`), in three shapes: text lines (4px corners), avatars (circles) and whole blocks.
+// Hidden from screen readers: the region that's loading says so (DataState sets that up).
+const skeletonVariants = cva("block animate-pulse bg-[var(--surface-tertiary)]", {
+    variants: {
+        shape: {
+            line: "h-3 rounded-[4px]",
+            circle: "rounded-full",
+            block: "rounded-xl",
+        },
+    },
+    defaultVariants: { shape: "line" },
+});
+function Skeleton({ shape, className }) {
+    return _jsx("span", { "data-slot": "skeleton", "aria-hidden": "true", className: cn(skeletonVariants({ shape }), className) });
+}
+export { Skeleton, skeletonVariants };

package/components/skip-link.d.ts

@@ -0,0 +1,8 @@
+type SkipLinkProps = {
+    /** The id of the page's <main>. It needs `tabIndex={-1}` so focus can land on it. */
+    href?: string;
+    className?: string;
+};
+/** "Skip to content". Put it first inside <body>, before the top bar. */
+declare function SkipLink({ href, className }: SkipLinkProps): import("react").JSX.Element;
+export { SkipLink };

package/components/skip-link.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@brdgapp/ui/lib/utils";
+/** "Skip to content". Put it first inside <body>, before the top bar. */
+function SkipLink({ href = "#main", className }) {
+    return (_jsx("a", { "data-slot": "skip-link", href: href, className: cn("fixed top-3 left-3 z-[100] rounded-full bg-[var(--primary-solid)] px-4 py-2 text-14 font-semibold text-white shadow-[var(--shadow-menu)]", "outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-primary)]", className), children: "Skip to content" }));
+}
+export { SkipLink };

package/components/stat-box.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+type StatBoxProps = {
+    label: string;
+    value: number;
+    /** A muted third line: "72%", "rated great". */
+    sub?: string;
+    /** A ready-made value ("$12.5K", from `formatMoney`) instead of the formatted count. */
+    display?: string;
+    /** Explains what the number counts. */
+    info?: string;
+    /** Makes the box a link into the full list. With your router's link, use `render` too. */
+    href?: string;
+    /** Your router's link element, e.g. `render={<Link href="/outcomes/intros" />}`. */
+    render?: React.ReactElement;
+    className?: string;
+};
+declare function StatBox({ label, value, sub, display, info, href, render, className }: StatBoxProps): React.JSX.Element;
+/** Same size and shape as StatBox, for loading. */
+declare function StatBoxSkeleton({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export { StatBox, StatBoxSkeleton };
+export type { StatBoxProps };

package/components/stat-box.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRight } from "lucide-react";
+import { InfoHint } from "@brdgapp/ui/components/info-hint";
+import { formatCount } from "@brdgapp/ui/lib/format";
+import { cn } from "@brdgapp/ui/lib/utils";
+function StatBox({ label, value, sub, display, info, href, render, className }) {
+    const clickable = Boolean(href || render);
+    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { "data-slot": "stat-box-value", className: cn("text-[22px] leading-none font-bold tabular-nums text-[var(--text-primary)]", clickable && "transition-colors group-hover:text-[var(--primary)]"), children: display ?? formatCount(value) }), clickable ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "mt-0.5 size-3.5 shrink-0 text-[var(--text-disabled)] transition-colors group-hover:text-[var(--primary)]" })) : null] }), _jsxs("span", { className: "mt-1.5 flex items-center gap-1 text-[12px] font-semibold text-[var(--text-body)]", children: [label, info && !clickable ? _jsx(InfoHint, { text: info }) : null] }), sub ? _jsx("span", { className: "mt-0.5 block text-[11px] text-[var(--text-muted)]", children: sub }) : null] }));
+    const classes = cn("group block rounded-xl bg-[var(--surface-secondary)] px-4 py-3", className);
+    const link = useRender({
+        render: render ?? _jsx("a", { href: href }),
+        enabled: clickable,
+        props: mergeProps({
+            "data-slot": "stat-box",
+            className: cn(classes, "outline-none transition-colors hover:bg-[var(--surface-tertiary)] focus-visible:ring-2 focus-visible:ring-[var(--primary)]"),
+        }, { children: body }),
+    });
+    if (link)
+        return link;
+    return (_jsx("div", { "data-slot": "stat-box", className: classes, children: body }));
+}
+/** Same size and shape as StatBox, for loading. */
+function StatBoxSkeleton({ className }) {
+    return (_jsxs("div", { "data-slot": "stat-box-skeleton", "aria-hidden": "true", className: cn("rounded-xl bg-[var(--surface-secondary)] px-4 py-3", className), children: [_jsx("div", { className: "h-[22px] w-10 animate-pulse rounded bg-[var(--surface-tertiary)] motion-reduce:animate-none" }), _jsx("div", { className: "mt-1.5 h-3 w-16 animate-pulse rounded bg-[var(--surface-tertiary)] motion-reduce:animate-none" })] }));
+}
+export { StatBox, StatBoxSkeleton };

package/components/switch.d.ts

@@ -0,0 +1,13 @@
+type SwitchProps = {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /** A name is required: either `aria-label`, or `aria-labelledby` pointing at the visible label. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    id?: string;
+    className?: string;
+};
+declare function Switch({ checked, onChange, disabled, className, ...props }: SwitchProps): import("react").JSX.Element;
+export { Switch };
+export type { SwitchProps };

package/components/switch.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "@brdgapp/ui/lib/utils";
+function Switch({ checked, onChange, disabled = false, className, ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", checked: checked, onCheckedChange: (next) => onChange(next), disabled: disabled, className: cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-[var(--surface-tertiary)] transition-colors duration-200 outline-none", "focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-primary)]", "data-[checked]:bg-[var(--primary-solid)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "inline-block size-4 translate-x-[2px] rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.3)] transition-transform duration-200 data-[checked]:translate-x-[18px]" }) }));
+}
+export { Switch };

package/components/tabs.d.ts

@@ -0,0 +1,6 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+declare function Tabs({ className, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
+declare function TabList({ className, ...props }: TabsPrimitive.List.Props): import("react").JSX.Element;
+declare function Tab({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
+declare function TabPanel({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
+export { Tabs, TabList, Tab, TabPanel };

package/components/tabs.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "@brdgapp/ui/lib/utils";
+// Underline tabs from the Arch Design System. Look ported from Bridge OS src/components/ui/tabs.tsx;
+// behaviour now comes from Base UI Tabs (arrow keys move between tabs, correct tab / tabpanel roles).
+// API change from Bridge OS: the group owns the selected value (`<Tabs value onValueChange>`) and each
+// `<Tab>` has a `value`, instead of each tab taking `active`.
+function Tabs({ className, ...props }) {
+    return _jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("min-w-0", className), ...props });
+}
+// The baseline is an inset shadow, not a border, so the active tab's 2px underline can cover it without
+// sticking out of the row. (A border plus a -1px tab margin got clipped by the row's sideways scrolling.)
+// When the page draws its own baseline, pass `shadow-none -mb-px` so the row sits on that line instead.
+function TabList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tab-list", className: cn("flex items-center gap-6 overflow-x-auto shadow-[inset_0_-1px_0_var(--border-default)] scrollbar-none", className), ...props }));
+}
+function Tab({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tab", className: cn("relative shrink-0 rounded-t border-b-2 border-transparent pt-1 pb-3 max-md:min-h-11 text-[14px] font-bold tracking-[0.4px] whitespace-nowrap", "text-[var(--text-muted)] transition-colors duration-150 outline-none hover:text-[var(--text-body)]", "focus-visible:ring-2 focus-visible:ring-[var(--primary)]", "data-[active]:border-[var(--text-primary)] data-[active]:text-[var(--text-primary)]", "disabled:pointer-events-none disabled:opacity-50", className), ...props }));
+}
+// A panel takes focus when it has nothing focusable inside, so it shows the same ring as everything else.
+function TabPanel({ className, ...props }) {
+    return _jsx(TabsPrimitive.Panel, { "data-slot": "tab-panel", className: cn("rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-primary)]", className), ...props });
+}
+export { Tabs, TabList, Tab, TabPanel };

package/components/tag-input.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+type TagInputProps = ElementProps<HTMLDivElement> & {
+    value: string[];
+    onChange: (next: string[]) => void;
+    placeholder?: string;
+    /** Required unless a visible <label> points at the field. */
+    ariaLabel?: string;
+    /** Chip colour: `primary` (blue tint) or `muted` (grey). */
+    variant?: "primary" | "muted";
+    className?: string;
+};
+declare function TagInput({ value, onChange, placeholder, ariaLabel, variant, className, ...rest }: TagInputProps): React.JSX.Element;
+export { TagInput };
+export type { TagInputProps };

package/components/tag-input.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { X } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+function TagInput({ value, onChange, placeholder, ariaLabel, variant = "primary", className, ...rest }) {
+    const [draft, setDraft] = useState("");
+    const inputRef = useRef(null);
+    function add(raw) {
+        const v = raw.trim();
+        if (!v)
+            return;
+        if (!value.some((t) => t.toLowerCase() === v.toLowerCase()))
+            onChange([...value, v]);
+        setDraft("");
+    }
+    function removeAt(index) {
+        onChange(value.filter((_, i) => i !== index));
+        inputRef.current?.focus();
+    }
+    function onKeyDown(e) {
+        if (e.key === "Enter" || e.key === ",") {
+            e.preventDefault();
+            add(draft);
+        }
+        else if (e.key === "Backspace" && draft === "" && value.length > 0) {
+            e.preventDefault();
+            removeAt(value.length - 1);
+        }
+    }
+    return (
+    // Clicking anywhere in the box focuses the text field (a mouse convenience; the field is reachable by Tab).
+    _jsxs("div", { ...rest, "data-slot": "tag-input", onClick: () => inputRef.current?.focus(), className: cn("flex min-h-11 md:min-h-10 w-full cursor-text flex-wrap items-center gap-1.5 rounded-lg border border-[var(--border-default)] bg-[var(--surface-primary)] px-2 py-1.5", "transition-all duration-150 hover:border-[var(--border-hover)] focus-within:border-[var(--primary)] focus-within:ring-2 focus-within:ring-[var(--primary)]/20", className), children: [value.map((tag, i) => (_jsxs("span", { "data-slot": "tag-input-chip", className: cn("inline-flex items-center gap-0.5 rounded-full py-0.5 pr-0.5 pl-2.5 text-[11px] font-semibold", variant === "primary" ? "bg-[var(--primary)]/[0.08] text-[var(--primary)]" : "bg-[var(--surface-secondary)] text-[var(--text-body)]"), children: [tag, _jsx(ButtonPrimitive, { "aria-label": `Remove ${tag}`, onClick: (e) => {
+                            e.stopPropagation();
+                            removeAt(i);
+                        }, className: "inline-flex size-5 items-center justify-center rounded-full opacity-60 outline-none transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--primary)]", children: _jsx(X, { "aria-hidden": "true", className: "size-3" }) })] }, `${tag}-${i}`))), _jsx(InputPrimitive, { ref: inputRef, "data-slot": "tag-input-field", type: "text", value: draft, "aria-label": ariaLabel, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, onBlur: () => add(draft), placeholder: value.length === 0 ? placeholder : "", className: "min-w-[80px] flex-1 border-0 bg-transparent px-1.5 py-0.5 text-16 md:text-14 text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]" })] }));
+}
+export { TagInput };

package/components/tag.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+declare const tagVariants: (props?: ({
+    color?: "blue" | "green" | "purple" | "grey" | "red" | "yellow" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TagProps = VariantProps<typeof tagVariants> & ElementProps & {
+    /** A bare Lucide icon before the label; sized for you. */
+    icon?: React.ReactNode;
+    /** Something after the label, such as a chevron on a tag that opens a menu. */
+    trailing?: React.ReactNode;
+    /** Makes the tag a button with hover and press states. A tag that does nothing stays a plain label. */
+    onClick?: () => void;
+    className?: string;
+    /**
+     * @deprecated Use `Tip` for an explanation instead: a native title tooltip is slow, unstyled and missing on
+     * touch. Kept so apps can move onto the package without changing behaviour; removed in 2.0.
+     */
+    title?: string;
+    children: React.ReactNode;
+};
+type TagColor = NonNullable<VariantProps<typeof tagVariants>["color"]>;
+type TagSize = NonNullable<VariantProps<typeof tagVariants>["size"]>;
+declare function Tag({ color, size, icon, trailing, onClick, className, title, children, ...rest }: TagProps): React.JSX.Element;
+export { Tag, tagVariants };
+export type { TagProps, TagColor, TagSize };

package/components/tag.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "@brdgapp/ui/lib/utils";
+// The soft "Color label" from the Arch Design System. Ported from Bridge OS src/components/ui/tag.tsx
+// (components.md → Tag / Badge / RatingPill). Rounded 4px, never a pill. Every colour is a token family,
+// so it follows dark mode.
+const tagVariants = cva("inline-flex items-center gap-1 rounded-[4px] border font-semibold tracking-[0.4px] align-middle [&_svg]:shrink-0", {
+    variants: {
+        color: {
+            grey: "border-[var(--border-default)] bg-[var(--surface-secondary)] text-[var(--text-secondary)]",
+            blue: "border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]",
+            green: "border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success-text)]",
+            yellow: "border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning-text)]",
+            red: "border-[var(--error-border)] bg-[var(--error-bg)] text-[var(--error-text)]",
+            purple: "border-[var(--purple-border)] bg-[var(--purple-bg)] text-[var(--purple)]",
+        },
+        size: {
+            sm: "px-2 py-0.5 text-[12px] [&_svg]:size-3.5",
+            md: "px-2.5 py-1 text-[14px] [&_svg]:size-4",
+        },
+    },
+    defaultVariants: { color: "grey", size: "sm" },
+});
+function Tag({ color, size, icon, trailing, onClick, className, title, children, ...rest }) {
+    const classes = cn(tagVariants({ color, size }), onClick &&
+        "cursor-pointer transition-[filter,opacity] hover:brightness-[0.97] active:opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)]", className);
+    const inner = (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "data-slot": "tag-icon", "aria-hidden": "true", className: "inline-flex shrink-0 items-center", children: icon })) : null, _jsx("span", { "data-slot": "tag-label", className: "truncate", children: children }), trailing ? (_jsx("span", { "data-slot": "tag-trailing", className: "inline-flex shrink-0 items-center", children: trailing })) : null] }));
+    if (onClick) {
+        return (_jsx(ButtonPrimitive, { ...rest, "data-slot": "tag", onClick: onClick, title: title, className: classes, children: inner }));
+    }
+    return (_jsx("span", { ...rest, "data-slot": "tag", title: title, className: classes, children: inner }));
+}
+export { Tag, tagVariants };

package/components/textarea.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+type TextareaProps = Omit<React.ComponentProps<"textarea">, "className" | "style"> & {
+    /** Lines tall when empty. */
+    rows?: number;
+    /** Lines it grows to before scrolling. Set equal to `rows` for a fixed height. */
+    maxRows?: number;
+    /** Layout only: `max-w-md`. */
+    className?: string;
+};
+declare function Textarea({ rows, maxRows, maxLength, className, value, defaultValue, onChange, ref, ...props }: TextareaProps): React.JSX.Element;
+export { Textarea };
+export type { TextareaProps };

package/components/textarea.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import { cn } from "@brdgapp/ui/lib/utils";
+// A multi-line text field: notes, bios, intro messages. Started from shadcn's textarea, then put on
+// Bridge's look and built on Base UI Field.Control, so inside a Field the label, help text and error are
+// tied to it like Input.
+//
+// Decisions (2026-11-03, after checking all 12 app repos: 91 files with a textarea):
+// - Same box as Input: white, 14px text (16px on phones: iOS zooms into smaller fields), 8px corners, the same hover, focus and error borders.
+// - Starts 3 lines tall (apps use 2 to 4), grows with the text up to 10 lines, then scrolls inside. Grown
+//   by hand in 15 files across 7 apps (app-cc's useAutoResizeTextarea, chat, together…). No drag handle:
+//   43 places turned it off. Grows with JavaScript, since CSS `field-sizing` isn't in every browser yet.
+// - With `maxLength`, a "120/500" count under the box, turning red near the limit, as in Bridge OS's
+//   network-entry-modal.tsx. Hand-made in 15 files across 6 apps.
+const LINE = 20; // a 20px line (leading-5), at 14px and at 16px on phones
+const PAD_Y = 10; // py-2.5
+const BORDER = 1;
+const textareaClasses = cn("block w-full min-w-0 resize-none rounded-lg border border-[var(--border-default)] bg-[var(--surface-primary)] px-3.5 py-2.5", "text-16 leading-5 md:text-14 md:leading-5 text-[var(--text-primary)] placeholder:text-[var(--text-muted)]", "transition-colors duration-150 ease-out outline-none", "hover:border-[var(--border-hover)]", "focus-visible:border-[var(--primary)] focus-visible:ring-2 focus-visible:ring-[var(--primary)]/20", "aria-invalid:border-[var(--error)] aria-invalid:hover:border-[var(--error)] aria-invalid:focus-visible:border-[var(--error)] aria-invalid:focus-visible:ring-[var(--error)]/20", "data-[invalid]:border-[var(--error)] data-[invalid]:hover:border-[var(--error)] data-[invalid]:focus-visible:border-[var(--error)] data-[invalid]:focus-visible:ring-[var(--error)]/20", "disabled:cursor-not-allowed disabled:opacity-50");
+/** How close to the limit the count turns red: the last 10%, at most 50 characters. */
+function nearLimit(length, max) {
+    return max - length <= Math.min(50, Math.ceil(max * 0.1));
+}
+function Textarea({ rows = 3, maxRows = 10, maxLength, className, value, defaultValue, onChange, ref, ...props }) {
+    const inner = React.useRef(null);
+    const [typed, setTyped] = React.useState(() => String(defaultValue ?? "").length);
+    const length = value !== undefined ? String(value).length : typed;
+    const countId = React.useId();
+    const minHeight = rows * LINE + PAD_Y * 2 + BORDER * 2;
+    const maxHeight = Math.max(rows, maxRows) * LINE + PAD_Y * 2 + BORDER * 2;
+    const fit = React.useCallback(() => {
+        const el = inner.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        const needed = el.scrollHeight + BORDER * 2;
+        el.style.height = `${Math.min(Math.max(needed, minHeight), maxHeight)}px`;
+        el.style.overflowY = needed > maxHeight ? "auto" : "hidden";
+    }, [minHeight, maxHeight]);
+    // Fit on first paint, whenever a controlled value changes, and when the box changes width.
+    React.useLayoutEffect(fit, [fit, value]);
+    React.useEffect(() => {
+        const el = inner.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        let width = el.offsetWidth;
+        const observer = new ResizeObserver(() => {
+            if (el.offsetWidth !== width) {
+                width = el.offsetWidth;
+                fit();
+            }
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [fit]);
+    const setRefs = (el, controlRef) => {
+        inner.current = el;
+        for (const r of [ref, controlRef]) {
+            if (typeof r === "function")
+                r(el);
+            else if (r)
+                r.current = el;
+        }
+    };
+    const remaining = maxLength !== undefined ? maxLength - length : null;
+    const warn = maxLength !== undefined && nearLimit(length, maxLength);
+    return (_jsxs("div", { "data-slot": "textarea-wrapper", className: cn("flex w-full flex-col gap-1", className), children: [_jsx(FieldPrimitive.Control, { render: (controlProps) => {
+                    const { ref: controlRef, onChange: controlOnChange, ...rest } = controlProps;
+                    return (_jsx("textarea", { ...rest, ...props, "data-slot": "textarea", ref: (el) => setRefs(el, controlRef), rows: rows, maxLength: maxLength, value: value, defaultValue: defaultValue, "aria-describedby": [rest["aria-describedby"], props["aria-describedby"], maxLength !== undefined ? countId : null].filter(Boolean).join(" ") || undefined, className: textareaClasses, style: { minHeight, maxHeight }, onChange: (e) => {
+                            controlOnChange?.(e);
+                            onChange?.(e);
+                            setTyped(e.target.value.length);
+                            fit();
+                        } }));
+                } }), maxLength !== undefined ? (_jsxs("p", { id: countId, "data-slot": "textarea-count", className: cn("self-end text-[12px] tabular-nums", warn ? "text-[var(--danger-text)]" : "text-[var(--text-muted)]"), children: [_jsxs("span", { "aria-hidden": "true", children: [length, "/", maxLength] }), _jsx("span", { className: "sr-only", children: `${remaining} of ${maxLength} characters left` })] })) : null, maxLength !== undefined ? (_jsx("span", { className: "sr-only", "aria-live": "polite", children: warn ? (remaining === 0 ? "Character limit reached" : `${remaining} characters left`) : "" })) : null] }));
+}
+export { Textarea };

package/components/theme-switch.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/** Light, Dark or System, for the Appearance row in Settings. The choice applies in every Bridge app. */
+declare function ThemeSwitch({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export { ThemeSwitch };

package/components/theme-switch.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { SegmentedControl } from "@brdgapp/ui/components/segmented-control";
+import { useTheme } from "@brdgapp/ui/hooks/use-theme";
+const OPTIONS = [
+    { value: "light", label: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Sun, { "aria-hidden": "true" }), "Light"] }) },
+    { value: "dark", label: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Moon, { "aria-hidden": "true" }), "Dark"] }) },
+    { value: "system", label: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Monitor, { "aria-hidden": "true" }), "System"] }) },
+];
+/** Light, Dark or System, for the Appearance row in Settings. The choice applies in every Bridge app. */
+function ThemeSwitch({ className }) {
+    const { theme, setTheme } = useTheme();
+    return _jsx(SegmentedControl, { "aria-label": "Appearance", options: OPTIONS, value: theme, onChange: setTheme, className: className });
+}
+export { ThemeSwitch };

package/components/toast.d.ts

@@ -0,0 +1,25 @@
+type ToastVariant = "success" | "error";
+declare const toast: {
+    /** A past-tense confirmation: "Intro sent". */
+    success: (message: string) => string;
+    /** Something that failed out of sight: "Couldn't copy the link". Errors people must fix stay on the page. */
+    error: (message: string) => string;
+    /** Hide one toast, or all of them. */
+    close: (id?: string) => void;
+};
+/** Mount once in the app's root layout. Toasts last 3 seconds; at most 3 show at once. */
+declare function Toaster({ timeout }: {
+    timeout?: number;
+}): import("react").JSX.Element;
+type ToastProps = {
+    open: boolean;
+    message: string;
+    variant?: ToastVariant;
+};
+/**
+ * @deprecated Use `<Toaster />` and `toast.success()`. Kept for Bridge OS screens that own their timer;
+ * removed in 2.0.
+ */
+declare function Toast({ open, message, variant }: ToastProps): import("react").JSX.Element;
+export { Toast, Toaster, toast };
+export type { ToastProps, ToastVariant };

package/components/toast.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { AlertCircle, Check } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+/** The app-wide toast queue. Needs one `<Toaster />` mounted. */
+const manager = ToastPrimitive.createToastManager();
+const toast = {
+    /** A past-tense confirmation: "Intro sent". */
+    success: (message) => manager.add({ title: message, type: "success" }),
+    /** Something that failed out of sight: "Couldn't copy the link". Errors people must fix stay on the page. */
+    error: (message) => manager.add({ title: message, type: "error", priority: "high" }),
+    /** Hide one toast, or all of them. */
+    close: (id) => manager.close(id),
+};
+const VIEWPORT = "fixed inset-x-0 top-[72px] z-[100] flex flex-col items-center gap-2 px-4 outline-none pointer-events-none";
+function ToastList() {
+    const { toasts } = ToastPrimitive.useToastManager();
+    return toasts.map((t) => {
+        const Icon = t.type === "error" ? AlertCircle : Check;
+        return (_jsxs(ToastPrimitive.Root, { toast: t, swipeDirection: "up", "data-slot": "toast", className: cn("pointer-events-auto inline-flex items-center gap-2 rounded-full border border-[var(--border-default)] bg-[var(--surface-elevated)] py-2 pr-4 pl-3 shadow-[var(--shadow-menu)]", "transition-[opacity,translate] duration-200 ease-out data-[ending-style]:duration-150 data-[starting-style]:-translate-y-2 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"), children: [_jsx(Icon, { "aria-hidden": "true", className: cn("size-4 shrink-0", t.type === "error" ? "text-[var(--danger-text)]" : "text-[var(--success)]") }), _jsx(ToastPrimitive.Title, { className: "text-[13px] font-semibold text-[var(--text-primary)]" })] }, t.id));
+    });
+}
+/** Mount once in the app's root layout. Toasts last 3 seconds; at most 3 show at once. */
+function Toaster({ timeout = 3000 }) {
+    return (_jsx(ToastPrimitive.Provider, { toastManager: manager, timeout: timeout, limit: 3, children: _jsx(ToastPrimitive.Portal, { children: _jsx(ToastPrimitive.Viewport, { "data-slot": "toaster", className: VIEWPORT, children: _jsx(ToastList, {}) }) }) }));
+}
+/**
+ * @deprecated Use `<Toaster />` and `toast.success()`. Kept for Bridge OS screens that own their timer;
+ * removed in 2.0.
+ */
+function Toast({ open, message, variant = "success" }) {
+    // Its own small queue, so it works without a Toaster. Never times out: `open` decides.
+    const [own] = useState(() => ToastPrimitive.createToastManager());
+    useEffect(() => {
+        if (!open)
+            return;
+        const id = own.add({ title: message, type: variant, timeout: 0 });
+        return () => own.close(id);
+    }, [open, message, variant, own]);
+    return (_jsx(ToastPrimitive.Provider, { toastManager: own, children: _jsx(ToastPrimitive.Portal, { children: _jsx(ToastPrimitive.Viewport, { className: VIEWPORT, children: _jsx(ToastList, {}) }) }) }));
+}
+export { Toast, Toaster, toast };

package/hooks/use-is-mobile.d.ts

@@ -0,0 +1,2 @@
+declare function useIsMobile(): boolean;
+export { useIsMobile };

package/hooks/use-is-mobile.js

@@ -0,0 +1,16 @@
+"use client";
+import { useSyncExternalStore } from "react";
+// True below 768px (Tailwind's `md`), the line where Bridge switches to its phone shapes: one pane at a time,
+// bottom sheets instead of menus. Use it only when the structure changes; for looks, use `md:` classes,
+// which also work in the server render. Returns false on the server and in the first client render, then
+// the real answer, and updates when the window crosses the line (a tablet turned sideways).
+const QUERY = "(max-width: 767px)";
+function subscribe(onChange) {
+    const list = window.matchMedia(QUERY);
+    list.addEventListener("change", onChange);
+    return () => list.removeEventListener("change", onChange);
+}
+function useIsMobile() {
+    return useSyncExternalStore(subscribe, () => window.matchMedia(QUERY).matches, () => false);
+}
+export { useIsMobile };

package/hooks/use-mock-query.d.ts

@@ -0,0 +1,23 @@
+type MockQueryStatus = "loading" | "error" | "success";
+type MockQueryResult<T> = {
+    status: MockQueryStatus;
+    data: T | undefined;
+    error: Error | undefined;
+    /** Load again, for example from a Retry button. */
+    retry: () => void;
+};
+type MockQueryOptions = {
+    /** Overrides the global demo delay for this query. */
+    latency?: number;
+    /** Forces this query to fail, whatever the global setting says. */
+    fail?: boolean;
+};
+/**
+ * Fake data loading for handbook demos, so every loading, empty and error state can be shown live.
+ * Follows the global demo controls (delay, failure, replay). Demo-only — product code uses real data.
+ *
+ *   const { status, data, retry } = useMockQuery("intros-table", () => SAMPLE_INTROS);
+ */
+declare function useMockQuery<T>(key: string, getData: () => T, options?: MockQueryOptions): MockQueryResult<T>;
+export { useMockQuery };
+export type { MockQueryResult, MockQueryStatus, MockQueryOptions };

package/hooks/use-mock-query.js

@@ -0,0 +1,36 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { useDemoControls } from "@brdgapp/ui/lib/demo-controls";
+/**
+ * Fake data loading for handbook demos, so every loading, empty and error state can be shown live.
+ * Follows the global demo controls (delay, failure, replay). Demo-only — product code uses real data.
+ *
+ *   const { status, data, retry } = useMockQuery("intros-table", () => SAMPLE_INTROS);
+ */
+function useMockQuery(key, getData, options = {}) {
+    const controls = useDemoControls();
+    const latency = options.latency ?? controls.latency;
+    const shouldFail = options.fail ?? controls.fail;
+    const [attempt, setAttempt] = useState(0);
+    // Every change of input is a new request. Until that request settles, the status is "loading" —
+    // worked out here rather than set in the effect, so nothing renders twice.
+    const request = `${key}|${latency}|${shouldFail}|${controls.replayKey}|${attempt}`;
+    const [settled, setSettled] = useState(null);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setSettled(shouldFail
+                ? { request, error: new Error(`Couldn't load ${key}`) }
+                : { request, data: getData() });
+        }, latency);
+        return () => clearTimeout(timer);
+        // getData is read once per request on purpose; callers pass inline functions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [request]);
+    const retry = useCallback(() => setAttempt((a) => a + 1), []);
+    if (settled?.request !== request)
+        return { status: "loading", data: undefined, error: undefined, retry };
+    if (settled.error)
+        return { status: "error", data: undefined, error: settled.error, retry };
+    return { status: "success", data: settled.data, error: undefined, retry };
+}
+export { useMockQuery };

package/hooks/use-theme.d.ts

@@ -0,0 +1,11 @@
+import { type ResolvedTheme, type ThemePreference } from "@brdgapp/ui/lib/theme";
+export type UseTheme = {
+    /** The choice: "light", "dark" or "system". */
+    theme: ThemePreference;
+    /** What's drawn now. */
+    resolvedTheme: ResolvedTheme;
+    /** Saves the choice for every Bridge app and applies it. */
+    setTheme: (theme: ThemePreference) => void;
+};
+/** The theme choice, what's drawn, and a way to change it. Needs `themeScript` in the root layout's <head>. */
+export declare function useTheme(): UseTheme;