@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/_bundled/tokens/spec.js

@@ -0,0 +1,221 @@
+export const BRAND_HEX = "#0169ff";
+export const FOCUS_MIX = { light: 100, dark: 72 };
+export const SURFACE_LIGHT = [0.999, 0.0015, 84];
+const WARM_HUE = 84;
+const LIGHT_L = [0.991, 0.979, 0.961, 0.944, 0.926, 0.902, 0.866, 0.805, 0, 0, 0.52, 0.218];
+const DARK_L = [0.212, 0.235, 0.262, 0.288, 0.314, 0.346, 0.396, 0.474, 0, 0, 0.78, 0.955];
+const GRAY_C_LIGHT = [
+  0.0035,
+  0.0045,
+  0.006,
+  0.0065,
+  0.007,
+  0.0075,
+  0.008,
+  0.009,
+  0.008,
+  0.008,
+  0.008,
+  0.006
+];
+const GRAY_C_DARK = [
+  0.003,
+  0.0035,
+  0.004,
+  0.0045,
+  0.005,
+  0.0055,
+  0.006,
+  0.007,
+  0.007,
+  0.007,
+  0.006,
+  0.004
+];
+const step = (xs, i) => {
+  const v = xs[i];
+  if (v === undefined)
+    throw new Error(`ramp index ${i} out of range`);
+  return v;
+};
+const toRamp = (xs) => {
+  if (xs.length !== 12)
+    throw new Error("ramp must have 12 steps");
+  const at = (i) => step(xs, i);
+  return [at(0), at(1), at(2), at(3), at(4), at(5), at(6), at(7), at(8), at(9), at(10), at(11)];
+};
+function grayRamp(mode) {
+  const L = mode === "light" ? LIGHT_L : DARK_L;
+  const C = mode === "light" ? GRAY_C_LIGHT : GRAY_C_DARK;
+  const solid = mode === "light" ? [0.6, 0.505] : [0.56, 0.702];
+  const text = mode === "light" ? 0.426 : 0.8;
+  return toRamp(Array.from({ length: 12 }, (_, i) => {
+    const l = i === 8 ? step(solid, 0) : i === 9 ? step(solid, 1) : i === 10 ? text : step(L, i);
+    return [l, step(C, i), WARM_HUE];
+  }));
+}
+const CHROMA_SHAPE = [0.05, 0.1, 0.18, 0.26, 0.34, 0.42, 0.52, 0.68, 1, 0.96, 0.82, 0.42];
+function hueRamp(spec, mode) {
+  const L = mode === "light" ? LIGHT_L : DARK_L;
+  const idx = mode === "light" ? 0 : 1;
+  const solidL = spec.solid[idx];
+  return toRamp(Array.from({ length: 12 }, (_, i) => {
+    let l = step(L, i);
+    if (i === 8)
+      l = solidL;
+    if (i === 9)
+      l = mode === "light" ? solidL - 0.045 : solidL + 0.045;
+    if (i === 10 && spec.text)
+      l = spec.text[idx];
+    const darkDamp = mode === "dark" && i < 8 ? 0.78 : 1;
+    return [l, spec.c * step(CHROMA_SHAPE, i) * darkDamp, spec.h];
+  }));
+}
+export const HUES = {
+  blue: { h: 260.44, c: 0.2373, solid: [0.5692, 0.66], text: [0.505, 0.78] },
+  green: { h: 152, c: 0.15, solid: [0.545, 0.66], text: [0.48, 0.8], onWhite: 0.545 },
+  amber: { h: 72, c: 0.155, solid: [0.78, 0.8], text: [0.52, 0.84] },
+  red: { h: 25, c: 0.19, solid: [0.575, 0.64], text: [0.505, 0.78], onWhite: 0.575 },
+  violet: { h: 295, c: 0.15, solid: [0.58, 0.64], text: [0.5, 0.8] }
+};
+export const RAMPS = {
+  light: {
+    gray: grayRamp("light"),
+    blue: hueRamp(HUES.blue, "light"),
+    green: hueRamp(HUES.green, "light"),
+    amber: hueRamp(HUES.amber, "light"),
+    red: hueRamp(HUES.red, "light"),
+    violet: hueRamp(HUES.violet, "light")
+  },
+  dark: {
+    gray: grayRamp("dark"),
+    blue: hueRamp(HUES.blue, "dark"),
+    green: hueRamp(HUES.green, "dark"),
+    amber: hueRamp(HUES.amber, "dark"),
+    red: hueRamp(HUES.red, "dark"),
+    violet: hueRamp(HUES.violet, "dark")
+  }
+};
+const soften = (color) => ({ mix: [color, ["gray", 11], 0.18] });
+export const SYNTAX = {
+  light: {
+    fg: ["gray", 12],
+    muted: ["gray", 11],
+    comment: ["gray", 10],
+    keyword: ["violet", 11],
+    string: ["green", 11],
+    number: ["amber", 11],
+    fn: ["blue", 11],
+    type: { mix: [["blue", 11], ["green", 11], 0.5] },
+    tag: { mix: [["red", 11], ["gray", 11], 0.2] },
+    attribute: ["amber", 11],
+    regex: ["red", 11],
+    inserted: ["green", 11],
+    deleted: ["red", 11]
+  },
+  dark: {
+    fg: { mix: [["gray", 12], ["gray", 11], 0.22] },
+    muted: ["gray", 11],
+    comment: ["gray", 10],
+    keyword: soften(["violet", 11]),
+    string: soften(["green", 11]),
+    number: soften(["amber", 11]),
+    fn: soften(["blue", 11]),
+    type: soften({ mix: [["blue", 11], ["green", 11], 0.5] }),
+    tag: soften(["red", 11]),
+    attribute: soften(["amber", 11]),
+    regex: soften(["red", 11]),
+    inserted: soften(["green", 11]),
+    deleted: soften(["red", 11])
+  }
+};
+export const PERSONA_HUES = {
+  clay: 42,
+  ochre: 78,
+  sage: 140,
+  teal: 192,
+  slate: 245,
+  iris: 278,
+  plum: 330,
+  rose: 12
+};
+export const RADII = {
+  xs: "0.25rem",
+  sm: "0.375rem",
+  md: "0.5rem",
+  lg: "0.625rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  "3xl": "1.375rem",
+  "4xl": "1.75rem"
+};
+export const CONTAINERS = {
+  reading: "46rem",
+  form: "42rem",
+  page: "64rem",
+  wide: "76rem",
+  card: "25rem",
+  "card-wide": "44rem",
+  bar: "40rem"
+};
+export const PAGE_STEPS = {
+  "page-md": "40rem",
+  "page-lg": "64rem"
+};
+export const LAYERS = {
+  sticky: 10,
+  dropdown: 20,
+  banner: 30,
+  drawer: 40,
+  tour: 45,
+  toast: 50,
+  overlay: 60,
+  tooltip: 70
+};
+export const LAYOUT = {
+  sidebar: "16.5rem",
+  header: "3.25rem",
+  "bottom-bar": "2.75rem",
+  "pane-min": "18.75rem"
+};
+export const TYPE_SCALE = {
+  "2xs": ["0.6875rem", "1rem", "0.01em"],
+  xs: ["0.75rem", "1.125rem", "0.005em"],
+  sm: ["0.8125rem", "1.25rem", "0em"],
+  base: ["0.875rem", "1.375rem", "-0.003em"],
+  md: ["0.9375rem", "1.5rem", "-0.006em"],
+  lg: ["1.0625rem", "1.625rem", "-0.011em"],
+  xl: ["1.25rem", "1.75rem", "-0.015em"],
+  "2xl": ["1.5rem", "2rem", "-0.019em"],
+  "3xl": ["1.875rem", "2.375rem", "-0.022em"],
+  "4xl": ["2.375rem", "2.75rem", "-0.025em"],
+  "5xl": ["3rem", "3.375rem", "-0.028em"],
+  "6xl": ["3.75rem", "4rem", "-0.03em"]
+};
+export const DURATIONS = {
+  instant: 80,
+  fast: 120,
+  base: 180,
+  moderate: 240,
+  slow: 320,
+  slower: 480,
+  glacial: 800,
+  loaderDelay: 200,
+  loaderMin: 400
+};
+export const EASINGS = {
+  standard: [0.2, 0, 0, 1],
+  out: [0.16, 1, 0.3, 1],
+  in: [0.5, 0, 0.75, 0],
+  inOut: [0.65, 0, 0.35, 1],
+  emphasized: [0.3, 0, 0, 1.15],
+  sheet: [0.32, 0.72, 0, 1]
+};
+export const SPRINGS = {
+  snappy: { visualDuration: 0.14, bounce: 0 },
+  smooth: { visualDuration: 0.17, bounce: 0 },
+  gentle: { visualDuration: 0.42, bounce: 0 },
+  bouncy: { visualDuration: 0.38, bounce: 0.28 },
+  signature: { visualDuration: 0.5, bounce: 0.2 }
+};
+export const SPRING_CSS_REST = 0.01;

package/dist/components/accordion.d.ts

@@ -0,0 +1,27 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { type ComponentProps } from "react";
+/**
+ * `card`: each item its own bordered row on the surface, 8 px apart (the files an import would
+ * change). `plain`: no chrome, for an accordion inside other content (a held message's text in its
+ * card); the trigger takes its text from where it sits and wraps.
+ */
+type AccordionVariant = "card" | "plain";
+export interface AccordionProps extends ComponentProps<typeof BaseAccordion.Root> {
+    readonly variant?: AccordionVariant;
+}
+/**
+ * A list of things, each a header that opens its own panel: the files a change touches, a message's
+ * full text. `multiple` lets several stay open, as a list of files wants. One quiet fold under a label
+ * ("Advanced", "Details") is a `Disclosure`.
+ *
+ * Panels open at their full height at once; only the chevron turns and the content fades in (§7).
+ */
+export declare function Accordion({ variant, className, ...props }: AccordionProps): import("react").JSX.Element;
+export declare function AccordionItem({ className, ...props }: ComponentProps<typeof BaseAccordion.Item>): import("react").JSX.Element;
+/**
+ * The item's header: a heading (`h3`) holding the button that opens the panel, with a chevron before
+ * the children. Its children are the button's name.
+ */
+export declare function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof BaseAccordion.Trigger>): import("react").JSX.Element;
+export declare function AccordionPanel({ className, ...props }: ComponentProps<typeof BaseAccordion.Panel>): import("react").JSX.Element;
+export {};

package/dist/components/accordion.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { createContext, use } from "react";
+import { tv, withBase } from "../lib/cn.js";
+import { DisclosureChevron } from "./disclosure.js";
+const AccordionVariantContext = createContext("card");
+const accordionStyles = tv({
+    slots: {
+        root: "flex min-w-0 flex-col",
+        item: "flex min-w-0 flex-col",
+        header: "flex min-w-0",
+        trigger: [
+            "flex w-full min-w-0 text-start outline-none focus-visible:ring-focus",
+            "data-disabled:pointer-events-none data-disabled:opacity-45",
+        ],
+        // One line tall, so the chevron sits on the first line of a header that wraps.
+        chevronBox: "flex h-lh shrink-0 items-center",
+        chevron: "text-fg-subtle",
+        // Opens at its full height at once (no layout motion, system.md §7); only the content fades in.
+        panel: [
+            "transition-opacity duration-(--duration-fast) ease-standard",
+            "data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none",
+        ],
+    },
+    variants: {
+        variant: {
+            card: {
+                root: "gap-2",
+                item: "overflow-hidden rounded-lg border border-border bg-surface",
+                // The item clips its corners, so the focus ring sits inside the row.
+                trigger: "items-center gap-2 rounded-[inherit] px-3 py-2 text-sm focus-visible:outline-offset-[-2px]",
+            },
+            plain: {
+                trigger: "items-start gap-1.5 rounded-sm",
+            },
+        },
+    },
+    defaultVariants: { variant: "card" },
+});
+/**
+ * A list of things, each a header that opens its own panel: the files a change touches, a message's
+ * full text. `multiple` lets several stay open, as a list of files wants. One quiet fold under a label
+ * ("Advanced", "Details") is a `Disclosure`.
+ *
+ * Panels open at their full height at once; only the chevron turns and the content fades in (§7).
+ */
+export function Accordion({ variant = "card", className, ...props }) {
+    return (_jsx(AccordionVariantContext, { value: variant, children: _jsx(BaseAccordion.Root, { "data-slot": "accordion", "data-variant": variant, className: withBase(accordionStyles({ variant }).root(), className), ...props }) }));
+}
+export function AccordionItem({ className, ...props }) {
+    const variant = use(AccordionVariantContext);
+    return (_jsx(BaseAccordion.Item, { "data-slot": "accordion-item", className: withBase(accordionStyles({ variant }).item(), className), ...props }));
+}
+/**
+ * The item's header: a heading (`h3`) holding the button that opens the panel, with a chevron before
+ * the children. Its children are the button's name.
+ */
+export function AccordionTrigger({ className, children, ...props }) {
+    const styles = accordionStyles({ variant: use(AccordionVariantContext) });
+    return (_jsx(BaseAccordion.Header, { "data-slot": "accordion-header", className: styles.header(), children: _jsxs(BaseAccordion.Trigger, { "data-slot": "accordion-trigger", className: withBase(styles.trigger(), className), ...props, children: [_jsx("span", { "aria-hidden": true, className: styles.chevronBox(), children: _jsx(DisclosureChevron, { className: styles.chevron() }) }), children] }) }));
+}
+export function AccordionPanel({ className, ...props }) {
+    const variant = use(AccordionVariantContext);
+    return (_jsx(BaseAccordion.Panel, { "data-slot": "accordion-panel", className: withBase(accordionStyles({ variant }).panel(), className), ...props }));
+}

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,59 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import { type DialogPopupVariants } from "./dialog.js";
+export interface AlertDialogContentProps extends ComponentProps<typeof BaseAlertDialog.Popup>, DialogPopupVariants {
+}
+/** Portal + backdrop + viewport + popup. No corner close: alerts demand an explicit choice. */
+export declare function AlertDialogContent({ size, className, ...props }: AlertDialogContentProps): import("react").JSX.Element;
+export declare function AlertDialogHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function AlertDialogFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function AlertDialogTitle({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Title>): import("react").JSX.Element;
+export declare function AlertDialogDescription({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Description>): import("react").JSX.Element;
+export interface AlertDialogProps {
+    /** Optional trigger element; must accept a ref and DOM props (e.g. <Button>). */
+    trigger?: ReactElement;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Extra content between the description and the actions (e.g. a "don't ask again" checkbox). */
+    children?: ReactNode;
+    /** Leading glyph shown above the title. */
+    icon?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    /** Danger styling for irreversible actions. */
+    destructive?: boolean;
+    /**
+     * Runs on confirm. Return a promise to keep the dialog open with a loading confirm button until it
+     * settles; the dialog closes on success and stays open if it rejects.
+     */
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    size?: DialogPopupVariants["size"];
+}
+/** Confirm/cancel convenience: `<AlertDialog trigger={…} title="Discard changes?" destructive onConfirm={…}/>`. */
+export declare function AlertDialog({ trigger, title, description, children, icon, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, open: openProp, defaultOpen, onOpenChange, size, }: AlertDialogProps): import("react").JSX.Element;
+/** What `useConfirm` asks about one item: its words, and what confirming does. */
+export interface ConfirmOptions<T> {
+    readonly title: (item: T) => ReactNode;
+    readonly description?: ((item: T) => ReactNode) | undefined;
+    readonly confirmLabel?: ReactNode;
+    readonly destructive?: boolean;
+    /**
+     * What confirming does. A promise keeps the dialog open with a loading button until it settles: it
+     * closes when it resolves, and stays open when it rejects (say why before rejecting, e.g. with a
+     * toast). Without one, the dialog closes at once.
+     */
+    readonly run: (item: T) => void | Promise<void>;
+}
+/**
+ * "Confirm this item, then act" without the per-screen state: `ask(item)` opens the dialog for it,
+ * and `dialog` is the element to render once. `ask` keeps its identity across renders, so memoized
+ * rows can take it as a prop.
+ */
+export declare function useConfirm<T>(options: ConfirmOptions<T>): {
+    readonly ask: (item: T) => void;
+    readonly dialog: ReactNode;
+};

package/dist/components/alert-dialog.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { useCallback, useState } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn, withBase } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Button } from "./button.js";
+import { dialogBackdropClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogPopupStyles, dialogTitleClass, dialogViewportClass, } from "./dialog.js";
+/** Portal + backdrop + viewport + popup. No corner close: alerts demand an explicit choice. */
+export function AlertDialogContent({ size = "sm", className, ...props }) {
+    const container = usePortalContainer();
+    return (_jsxs(BaseAlertDialog.Portal, { container: container, children: [_jsx(BaseAlertDialog.Backdrop, { "data-slot": "alert-dialog-backdrop", className: dialogBackdropClass }), _jsx(BaseAlertDialog.Viewport, { "data-slot": "alert-dialog-viewport", className: dialogViewportClass, children: _jsx(BaseAlertDialog.Popup, { "data-slot": "alert-dialog", className: withBase(dialogPopupStyles({ size }), className), ...props }) })] }));
+}
+export function AlertDialogHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-header", className: cn(dialogHeaderClass, className), ...props });
+}
+export function AlertDialogFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-footer", className: cn(dialogFooterClass, className), ...props });
+}
+export function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(BaseAlertDialog.Title, { "data-slot": "alert-dialog-title", className: withBase(dialogTitleClass, className), ...props }));
+}
+export function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(BaseAlertDialog.Description, { "data-slot": "alert-dialog-description", className: withBase(dialogDescriptionClass, className), ...props }));
+}
+/** Confirm/cancel convenience: `<AlertDialog trigger={…} title="Discard changes?" destructive onConfirm={…}/>`. */
+export function AlertDialog({ trigger, title, description, children, icon, confirmLabel, cancelLabel, destructive = false, onConfirm, onCancel, open: openProp, defaultOpen = false, onOpenChange, size, }) {
+    const t = useUiStrings().alertDialog;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [pending, setPending] = useState(false);
+    const open = openProp ?? uncontrolledOpen;
+    const setOpen = (next) => {
+        if (openProp === undefined)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    const confirm = async () => {
+        const result = onConfirm?.();
+        if (result instanceof Promise) {
+            setPending(true);
+            try {
+                await result;
+                setOpen(false);
+            }
+            catch {
+                // Keep the dialog open so the user can retry; the caller surfaces the error.
+            }
+            finally {
+                setPending(false);
+            }
+            return;
+        }
+        setOpen(false);
+    };
+    return (_jsxs(BaseAlertDialog.Root, { open: open, onOpenChange: (next) => {
+            if (pending)
+                return;
+            if (!next)
+                onCancel?.();
+            setOpen(next);
+        }, children: [trigger && _jsx(BaseAlertDialog.Trigger, { render: trigger }), _jsxs(AlertDialogContent, { size: size, children: [_jsxs(AlertDialogHeader, { children: [icon !== undefined && (_jsx("div", { "aria-hidden": true, className: cn("mb-2 flex size-9 items-center justify-center rounded-xl [&_svg]:size-[18px]", destructive ? "bg-danger-subtle text-danger-fg" : "bg-bg-muted text-fg-muted"), children: icon })), _jsx(AlertDialogTitle, { children: title }), description !== undefined && _jsx(AlertDialogDescription, { children: description })] }), children !== undefined && _jsx("div", { className: "px-6 pb-4", children: children }), _jsxs(AlertDialogFooter, { children: [_jsx(BaseAlertDialog.Close, { disabled: pending, render: _jsx(Button, { variant: "secondary" }), children: cancelLabel ?? t.cancel }), _jsx(Button, { variant: destructive ? "danger" : "primary", loading: pending, onClick: () => {
+                                    void confirm();
+                                }, children: confirmLabel ?? t.confirm })] })] })] }));
+}
+/**
+ * "Confirm this item, then act" without the per-screen state: `ask(item)` opens the dialog for it,
+ * and `dialog` is the element to render once. `ask` keeps its identity across renders, so memoized
+ * rows can take it as a prop.
+ */
+export function useConfirm(options) {
+    // The item stays after closing, so the dialog keeps its words while it fades out.
+    const [item, setItem] = useState(undefined);
+    const [open, setOpen] = useState(false);
+    const { title, description, confirmLabel, destructive = false, run } = options;
+    const dialog = (_jsx(AlertDialog, { open: open, onOpenChange: setOpen, title: item === undefined ? null : title(item.value), description: item === undefined || description === undefined ? undefined : description(item.value), confirmLabel: confirmLabel, destructive: destructive, onConfirm: () => (item === undefined ? undefined : run(item.value)) }));
+    const ask = useCallback((value) => {
+        setItem({ value });
+        setOpen(true);
+    }, []);
+    return { ask, dialog };
+}

package/dist/components/alert.d.ts

@@ -0,0 +1,141 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const alertStyles: import("tailwind-variants").TVReturnType<{
+    tone: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+    layout: {
+        callout: {
+            root: string;
+        };
+        bar: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    lead: string;
+    icon: string;
+    body: string;
+    title: string;
+    description: string;
+    action: string;
+    dismiss: string;
+}, undefined, {
+    tone: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+    layout: {
+        callout: {
+            root: string;
+        };
+        bar: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    lead: string;
+    icon: string;
+    body: string;
+    title: string;
+    description: string;
+    action: string;
+    dismiss: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+    layout: {
+        callout: {
+            root: string;
+        };
+        bar: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    lead: string;
+    icon: string;
+    body: string;
+    title: string;
+    description: string;
+    action: string;
+    dismiss: string;
+}>>;
+export type AlertTone = NonNullable<VariantProps<typeof alertStyles>["tone"]>;
+export interface AlertProps extends Omit<ComponentProps<"div">, "title">, VariantProps<typeof alertStyles> {
+    title?: ReactNode;
+    /** Replace the tone icon, or pass `false` to hide it. */
+    icon?: ReactNode | false;
+    /** Trailing controls, e.g. a small "Retry" button. */
+    action?: ReactNode;
+    /** Renders a close button; the parent decides what dismissal means. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+}
+/**
+ * Inline callout for page- or panel-level messages; `layout="bar"` lays it flush across the top of a
+ * pane. Warnings and errors use `role="alert"` so they're announced when they appear; the rest are
+ * polite `status` regions.
+ */
+export declare function Alert({ tone, layout, title, icon, action, onDismiss, dismissLabel, className, children, ...props }: AlertProps): import("react").JSX.Element;
+export {};

package/dist/components/alert.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, CircleCheck, Info, Lightbulb, TriangleAlert, X } from "lucide-react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn, tv } from "../lib/cn.js";
+import { IconButton } from "./button.js";
+const alertStyles = tv({
+    slots: {
+        root: "relative flex w-full flex-wrap items-start gap-x-2.5 gap-y-2",
+        // The icon and the text are one unit, so a narrow alert never leaves the icon alone on a line;
+        // it keeps ~14rem of text beside the action, and narrower, the action wraps under the text.
+        lead: "flex min-w-0 flex-1 basis-64 items-start gap-x-2.5",
+        icon: "mt-0.5 size-4 shrink-0",
+        body: "flex min-w-0 flex-1 flex-col gap-0.5",
+        title: "font-medium text-fg",
+        description: "text-fg-muted text-pretty [&_code]:text-sm",
+        // One group at the end; wider than the alert itself (long labels, a narrow column), its buttons
+        // wrap whole within it rather than spill past the edge.
+        action: "ms-auto flex max-w-full shrink-0 flex-wrap items-center justify-end gap-1.5 self-center",
+        dismiss: "-my-1 -me-1.5 shrink-0",
+    },
+    variants: {
+        tone: {
+            neutral: { root: "border-border bg-bg-subtle", icon: "text-fg-subtle" },
+            info: { root: "border-info-border bg-info-subtle", icon: "text-info-fg" },
+            success: { root: "border-success-border bg-success-subtle", icon: "text-success-fg" },
+            warning: { root: "border-warning-border bg-warning-subtle", icon: "text-warning-fg" },
+            danger: { root: "border-danger-border bg-danger-subtle", icon: "text-danger-fg" },
+        },
+        layout: {
+            callout: { root: "rounded-xl border px-3.5 py-3 text-base" },
+            // Flush across the top of a pane or card: no radius, only the hairline under it.
+            bar: { root: "shrink-0 border-b px-3 py-2 text-sm" },
+        },
+    },
+    defaultVariants: { tone: "neutral", layout: "callout" },
+});
+const TONE_ICON = {
+    neutral: Lightbulb,
+    info: Info,
+    success: CircleCheck,
+    warning: TriangleAlert,
+    danger: CircleAlert,
+};
+/**
+ * Inline callout for page- or panel-level messages; `layout="bar"` lays it flush across the top of a
+ * pane. Warnings and errors use `role="alert"` so they're announced when they appear; the rest are
+ * polite `status` regions.
+ */
+export function Alert({ tone = "neutral", layout, title, icon, action, onDismiss, dismissLabel, className, children, ...props }) {
+    const t = useUiStrings().primitives;
+    const styles = alertStyles({ tone, layout });
+    const ToneIcon = TONE_ICON[tone];
+    return (_jsxs("div", { "data-slot": "alert", "data-tone": tone, role: tone === "danger" || tone === "warning" ? "alert" : "status", className: styles.root({ className }), ...props, children: [_jsxs("div", { className: styles.lead(), children: [icon !== false && (_jsx("span", { "aria-hidden": true, className: cn(styles.icon(), "[&_svg]:size-4"), children: icon ?? _jsx(ToneIcon, { className: "size-4" }) })), _jsxs("div", { className: styles.body(), children: [title !== undefined && _jsx("div", { className: styles.title(), children: title }), children !== undefined && _jsx("div", { className: styles.description(), children: children })] })] }), action !== undefined && _jsx("div", { className: styles.action(), children: action }), onDismiss && (_jsx(IconButton, { "aria-label": dismissLabel ?? t.dismiss, size: "xs", onClick: onDismiss, className: styles.dismiss(), children: _jsx(X, {}) }))] }));
+}

package/dist/components/appear.d.ts

@@ -0,0 +1,21 @@
+import * as m from "motion/react-m";
+import { type ComponentProps, type ReactNode } from "react";
+export declare function AppearProvider({ live, children }: {
+    readonly live: boolean;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A container that arrives as a whole (a row of a live list) and animates itself: what it holds when it
+ * mounts doesn't animate again; only what arrives inside it later does.
+ */
+export declare function AppearScope({ children }: {
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+export interface AppearProps extends Omit<ComponentProps<typeof m.div>, "initial" | "animate" | "transition"> {
+    /** Stable identity of the item (a tool's call id, a part's index in its message). */
+    readonly id: string;
+}
+/** A 6 px rise and fade on the snappy spring for an item that just arrived. */
+export declare function Appear({ id, ...props }: AppearProps): import("react").JSX.Element;
+/** Content that replaces a skeleton fades in where the skeleton was (no jump, no movement). */
+export declare function Reveal(props: Omit<ComponentProps<typeof m.div>, "initial" | "animate" | "transition">): import("react").JSX.Element;