@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/input.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { Search, X } from "lucide-react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+import { isComposing } from "../lib/keys.js";
+import { IconButton } from "./button.js";
+/**
+ * The shared "field chrome" for every text-entry surface (Input, Textarea, Select trigger,
+ * Combobox): quiet surface, hairline border, firmer border on hover. Each consumer adds its own
+ * focus selector with `border-border-strong ring-3` — the halo colour (focus blue, or danger when
+ * invalid) is preset here. Invalid follows Base UI's `data-invalid` (inside <Field>) or
+ * `aria-invalid`.
+ */
+export const fieldChrome = cn("border border-border bg-surface text-fg shadow-xs ring-focus/35", "transition-[border-color,box-shadow,background-color,opacity] duration-(--duration-fast) ease-(--ease-standard)", "hover:border-border-strong", "data-invalid:border-danger-border! data-invalid:ring-danger/20", "aria-invalid:border-danger-border! aria-invalid:ring-danger/20", "has-[[data-invalid]]:border-danger-border! has-[[data-invalid]]:ring-danger/20", "has-[[aria-invalid=true]]:border-danger-border! has-[[aria-invalid=true]]:ring-danger/20");
+const inputStyles = tv({
+    slots: {
+        root: [
+            "group/input relative flex w-full min-w-0 cursor-text items-center touch-target",
+            fieldChrome,
+            "has-[input:focus]:border-border-strong has-[input:focus]:ring-3",
+            "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-45",
+            "has-[input:read-only]:bg-bg-subtle has-[input:read-only]:shadow-none has-[input:read-only]:hover:border-border",
+            "[&_svg]:shrink-0",
+        ],
+        input: [
+            "h-full min-w-0 flex-1 bg-transparent text-fg outline-none placeholder:text-fg-subtle",
+            // iOS zooms into a field whose text is under 16 px; touch screens get 16 px.
+            "pointer-coarse:text-[1rem]",
+            "focus-visible:outline-none disabled:cursor-not-allowed",
+            "[&::-webkit-search-cancel-button]:appearance-none",
+            "file:me-2 file:border-0 file:bg-transparent file:font-medium file:text-fg",
+        ],
+        adornment: "pointer-events-auto flex shrink-0 items-center text-fg-subtle",
+    },
+    variants: {
+        size: {
+            sm: {
+                root: "h-7 gap-1.5 rounded-md px-2 text-sm [&_svg:not([class*='size-'])]:size-3.5",
+                input: "text-sm",
+            },
+            md: {
+                root: "h-8 gap-2 rounded-lg px-2.5 text-base [&_svg:not([class*='size-'])]:size-4",
+                input: "text-base",
+            },
+            lg: {
+                root: "h-10 gap-2.5 rounded-xl px-3 text-md [&_svg:not([class*='size-'])]:size-4",
+                input: "text-md",
+            },
+        },
+        /**
+         * `wash`: a resting field on chrome (a sidebar's search): ink over whatever is beneath and no
+         * border until it has focus, when it takes the field's surface. Paper's own surface reads yellow
+         * over light vibrancy.
+         */
+        appearance: {
+            field: {},
+            wash: {
+                root: "border-transparent bg-field-wash shadow-none hover:border-transparent has-[input:focus]:border-border has-[input:focus]:bg-surface",
+            },
+            /**
+             * `bare`: text you edit in place, inside a heading or a card (a task's title): no chrome at rest
+             * and the surrounding type (size, weight, line height), a wash on hover and focus, and the focus
+             * halo. Touch screens still get at least 16 px, so iOS doesn't zoom.
+             */
+            bare: {
+                root: [
+                    "-mx-1 h-auto rounded-md border-transparent bg-transparent px-1 text-[length:inherit] shadow-none",
+                    "hover:border-transparent hover:bg-hover",
+                    "has-[input:focus]:border-transparent has-[input:focus]:bg-hover has-[input:focus]:ring-2",
+                ],
+                input: "text-[length:inherit] pointer-coarse:text-[max(1rem,1em)]",
+            },
+        },
+    },
+    defaultVariants: { size: "md", appearance: "field" },
+});
+/** Clicking the frame's padding or a decorative adornment focuses the input, like a native field. */
+function focusInputOnFramePress(event) {
+    const target = event.target;
+    if (!(target instanceof Element))
+        return;
+    if (target.closest("input, button, a, [role='button'], [tabindex]"))
+        return;
+    const input = event.currentTarget.querySelector("input");
+    if (!input || input.disabled)
+        return;
+    event.preventDefault();
+    input.focus();
+}
+export function Input({ size, appearance, leading, trailing, invalid, className, inputClassName, ...props }) {
+    const styles = inputStyles({ size, appearance });
+    return (_jsxs("div", { "data-slot": "input", className: styles.root({ className }), onPointerDown: focusInputOnFramePress, children: [leading !== undefined && (_jsx("span", { "data-slot": "input-leading", className: styles.adornment(), children: leading })), _jsx(BaseInput, { "data-slot": "input-control", "aria-invalid": invalid === true ? true : undefined, className: (state) => styles.input({
+                    className: resolveClassName(inputClassName, state),
+                }), ...props }), trailing !== undefined && (_jsx("span", { "data-slot": "input-trailing", className: styles.adornment(), children: trailing }))] }));
+}
+/** A search field: the search glyph before the text, no autocomplete or spellcheck. */
+export function SearchInput({ label, placeholder, onClear, trailing, onKeyDown, ...props }) {
+    const t = useUiStrings().primitives;
+    const clearable = onClear !== undefined && props.value !== undefined && String(props.value) !== "";
+    return (_jsx(Input, { type: "search", "aria-label": label, placeholder: placeholder ?? label, leading: _jsx(Search, { "aria-hidden": true }), trailing: clearable ? (_jsx(IconButton, { "aria-label": t.clearSearch, size: "xs", onClick: onClear, children: _jsx(X, {}) })) : (trailing), autoComplete: "off", spellCheck: false, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (clearable && event.key === "Escape" && !event.defaultPrevented && !isComposing(event)) {
+                event.preventDefault();
+                onClear();
+            }
+        }, ...props }));
+}

package/dist/components/item-label.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, ReactNode } from "react";
+/** A menu, select or combobox item's label, with its description under it when there is one. */
+export declare function ItemLabel({ description, as: Text, children, }: {
+    readonly description?: ReactNode;
+    /** What renders the label itself: a span, or a select's `ItemText`, which its trigger shows once picked. */
+    readonly as?: ElementType<{
+        className?: string;
+        children?: ReactNode;
+    }>;
+    readonly children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/item-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A menu, select or combobox item's label, with its description under it when there is one. */
+export function ItemLabel({ description, as: Text = "span", children, }) {
+    return description === undefined ? (_jsx(Text, { className: "min-w-0 flex-1 truncate", children: children })) : (_jsxs("span", { className: "flex min-w-0 flex-1 flex-col py-1.5", children: [_jsx(Text, { className: "truncate leading-5", children: children }), _jsx("span", { className: "line-clamp-2 text-pretty text-xs leading-4 text-fg-subtle", children: description })] }));
+}

package/dist/components/item-row.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface ItemRowProps extends Omit<ComponentProps<"div">, "title"> {
+    /** Leading glyph in a tile; an icon in it is sized and muted for you. */
+    icon?: ReactNode;
+    /** The item's name, with any badge after it. Wrap a long name in a `truncate` span. */
+    title: ReactNode;
+    /** One muted line under the name: cut with an ellipsis when it doesn't fit, whole in a tooltip. */
+    detail?: ReactNode;
+    /** Its controls. On a narrow card they drop under the text rather than squeeze it. */
+    trailing?: ReactNode;
+    /** More under the detail, wrapping: a status note, a reason. */
+    children?: ReactNode;
+}
+/**
+ * One item in a flush, divided card (`Card size="flush" divided`): an icon tile, its name and a muted
+ * detail, its controls at the end. A device, a key, a member, an invoice. `CardRow` is the padding
+ * alone, for a row that lays out its own content.
+ */
+export declare function ItemRow({ icon, title, detail, trailing, children, className, ...props }: ItemRowProps): import("react").JSX.Element;
+/** `ItemRow`s while a list loads: the tile, a name and a detail line, `rows` times. */
+export declare function ItemRowSkeleton({ rows }: {
+    readonly rows?: number;
+}): import("react").JSX.Element;

package/dist/components/item-row.js

@@ -0,0 +1,19 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Skeleton } from "./skeleton.js";
+import { TruncatedText } from "./truncated-text.js";
+const tile = "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg [&_svg]:size-4 [&_svg]:text-fg-subtle";
+const frame = "flex min-h-14 items-center gap-x-3 gap-y-2 px-4 py-2.5";
+/**
+ * One item in a flush, divided card (`Card size="flush" divided`): an icon tile, its name and a muted
+ * detail, its controls at the end. A device, a key, a member, an invoice. `CardRow` is the padding
+ * alone, for a row that lays out its own content.
+ */
+export function ItemRow({ icon, title, detail, trailing, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "item-row", className: cn(frame, "flex-wrap", className), ...props, children: [_jsxs("div", { className: cn("flex min-w-0 grow items-center gap-x-3", icon === undefined ? "basis-48" : "basis-60"), children: [icon !== undefined && _jsx("span", { className: tile, children: icon }), _jsxs("div", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "flex min-w-0 items-center gap-2 text-base text-fg", children: title }), detail !== undefined && _jsx(TruncatedText, { className: "text-sm text-fg-subtle", children: detail }), children !== undefined && _jsx("div", { className: "text-sm text-fg-subtle", children: children })] })] }), trailing !== undefined && _jsx("div", { className: "ms-auto flex shrink-0 items-center gap-1.5", children: trailing })] }));
+}
+/** `ItemRow`s while a list loads: the tile, a name and a detail line, `rows` times. */
+export function ItemRowSkeleton({ rows = 1 }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }, (_, i) => i).map((row) => (_jsxs("div", { "data-slot": "item-row-skeleton", "aria-hidden": true, className: frame, children: [_jsx(Skeleton, { className: "size-8 rounded-lg" }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-32" }), _jsx(Skeleton, { className: "h-3 w-48 max-w-full" })] })] }, row))) }));
+}

package/dist/components/kbd.d.ts

@@ -0,0 +1,55 @@
+import type { ComponentProps } from "react";
+import { type UiStrings } from "../i18n/strings/index.js";
+import { type VariantProps } from "../lib/cn.js";
+declare const kbd: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-4 min-w-4 px-1 text-xs leading-none";
+        md: "h-5 min-w-5 px-1.5 text-xs leading-none";
+    };
+    /** `bare` drops the keycap chrome — for hints inside menus and buttons. */
+    bare: {
+        true: "border-transparent bg-transparent px-0 text-fg-subtle shadow-none [box-shadow:none]";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "h-4 min-w-4 px-1 text-xs leading-none";
+        md: "h-5 min-w-5 px-1.5 text-xs leading-none";
+    };
+    /** `bare` drops the keycap chrome — for hints inside menus and buttons. */
+    bare: {
+        true: "border-transparent bg-transparent px-0 text-fg-subtle shadow-none [box-shadow:none]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-4 min-w-4 px-1 text-xs leading-none";
+        md: "h-5 min-w-5 px-1.5 text-xs leading-none";
+    };
+    /** `bare` drops the keycap chrome — for hints inside menus and buttons. */
+    bare: {
+        true: "border-transparent bg-transparent px-0 text-fg-subtle shadow-none [box-shadow:none]";
+    };
+}, undefined>>;
+type KbdStrings = UiStrings["kbd"];
+export interface KbdProps extends ComponentProps<"kbd">, VariantProps<typeof kbd> {
+}
+/** A single keycap. */
+export declare function Kbd({ size, bare, className, ...props }: KbdProps): import("react").JSX.Element;
+/** A chord in words for screen readers: `["mod", "k"]` → "Command K" on Apple, "Control K" elsewhere. */
+export declare function spokenShortcut(keys: readonly string[], mac?: boolean, strings?: KbdStrings): string;
+export interface ShortcutProps extends Omit<ComponentProps<"span">, "children">, VariantProps<typeof kbd> {
+    /** Logical keys, e.g. `["mod", "k"]` → ⌘K on macOS, Ctrl K elsewhere. */
+    keys: readonly string[];
+    /**
+     * Announce the chord in words ("Command K"). Off by default: a shortcut inside a button, menu
+     * item or tooltip is announced through the control's `aria-keyshortcuts` (see
+     * `ariaKeyShortcuts`), so its name doesn't double up as "New document⌘N⌘N". Turn on for
+     * standalone hints and shortcut lists, where the keys are the content.
+     */
+    spoken?: boolean;
+}
+/**
+ * A key combination rendered as keycaps with platform-aware glyphs. The keycaps are always
+ * `aria-hidden`; at most one spoken form exists (the `spoken` words), never glyphs plus words.
+ */
+export declare function Shortcut({ keys, size, bare, spoken, className, ...props }: ShortcutProps): import("react").JSX.Element;
+export {};

package/dist/components/kbd.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiStrings } from "../i18n/provider.js";
+import { EN_UI_STRINGS } from "../i18n/strings/index.js";
+import { cn, tv } from "../lib/cn.js";
+import { keyGlyph } from "../lib/keycaps.js";
+import { keyed } from "../lib/keyed.js";
+import { isMacPlatform } from "../lib/keys.js";
+const kbd = tv({
+    base: [
+        "inline-flex select-none items-center justify-center gap-0.5 rounded-xs font-sans font-medium tabular",
+        "border border-border bg-surface text-fg-muted [box-shadow:inset_0_-1px_0_0_var(--border)]",
+    ],
+    variants: {
+        size: {
+            sm: "h-4 min-w-4 px-1 text-xs leading-none",
+            md: "h-5 min-w-5 px-1.5 text-xs leading-none",
+        },
+        /** `bare` drops the keycap chrome — for hints inside menus and buttons. */
+        bare: { true: "border-transparent bg-transparent px-0 text-fg-subtle shadow-none [box-shadow:none]" },
+    },
+    defaultVariants: { size: "md" },
+});
+/** A single keycap. */
+export function Kbd({ size, bare, className, ...props }) {
+    return _jsx("kbd", { "data-slot": "kbd", className: cn(kbd({ size, bare }), className), ...props });
+}
+/** Spoken names per logical key: [Apple, elsewhere]. */
+function spokenNames(spoken) {
+    return {
+        mod: [spoken.command, spoken.control],
+        cmd: [spoken.command, spoken.control],
+        ctrl: [spoken.control, spoken.control],
+        alt: [spoken.option, spoken.alt],
+        option: [spoken.option, spoken.alt],
+        shift: [spoken.shift, spoken.shift],
+        enter: [spoken.return, spoken.enter],
+        return: [spoken.return, spoken.enter],
+        esc: [spoken.escape, spoken.escape],
+        escape: [spoken.escape, spoken.escape],
+        tab: [spoken.tab, spoken.tab],
+        space: [spoken.space, spoken.space],
+        up: [spoken.upArrow, spoken.upArrow],
+        down: [spoken.downArrow, spoken.downArrow],
+        left: [spoken.leftArrow, spoken.leftArrow],
+        right: [spoken.rightArrow, spoken.rightArrow],
+        backspace: [spoken.delete, spoken.backspace],
+        delete: [spoken.forwardDelete, spoken.delete],
+    };
+}
+/** A chord in words for screen readers: `["mod", "k"]` → "Command K" on Apple, "Control K" elsewhere. */
+export function spokenShortcut(keys, mac = isMacPlatform(), strings = EN_UI_STRINGS.kbd) {
+    const names = spokenNames(strings.spoken);
+    const word = (key) => {
+        const spoken = names[key.toLowerCase()];
+        if (spoken)
+            return mac ? spoken[0] : spoken[1];
+        return keyGlyph(key, mac, strings);
+    };
+    return runsOf(keys)
+        .map(({ key, count }) => (count > 1 ? strings.spoken.repeated({ key: word(key), count }) : word(key)))
+        .join(" ");
+}
+/** Consecutive presses of one key fold into a run: `["esc", "esc"]` → one key pressed twice. */
+function runsOf(keys) {
+    const runs = [];
+    for (const key of keys) {
+        const last = runs.at(-1);
+        if (last !== undefined && last.key.toLowerCase() === key.toLowerCase())
+            last.count += 1;
+        else
+            runs.push({ key, count: 1 });
+    }
+    return runs;
+}
+/**
+ * A key combination rendered as keycaps with platform-aware glyphs. The keycaps are always
+ * `aria-hidden`; at most one spoken form exists (the `spoken` words), never glyphs plus words.
+ */
+export function Shortcut({ keys, size, bare, spoken = false, className, ...props }) {
+    const mac = isMacPlatform();
+    const strings = useUiStrings().kbd;
+    // A double press ("Esc Esc") reads as one keycap pressed twice, not two caps jammed together.
+    const caps = keyed(runsOf(keys), (run) => run.key).map(({ item: { key, count }, key: id }) => (_jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx(Kbd, { size: size, bare: bare, "aria-hidden": true, children: keyGlyph(key, mac, strings) }), count > 1 && (_jsxs("span", { "aria-hidden": true, className: "text-xs leading-none text-fg-subtle tabular", children: ["\u00D7", count] }))] }, id)));
+    return (_jsxs("span", { "data-slot": "shortcut", className: cn("inline-flex items-center gap-0.5", className), ...(spoken ? {} : { "aria-hidden": true }), ...props, children: [spoken && _jsx("span", { className: "sr-only", children: spokenShortcut(keys, mac, strings) }), caps] }));
+}

package/dist/components/link-policy.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+/**
+ * How a message's links to other sites open on the surface it renders on: `open` at once; `check`
+ * first shows the whole address when what the link says isn't that address (Cloud Chat, cloud-chat.md
+ * §8), so a link built from the conversation's text can't leave unseen.
+ */
+export type LinkPolicy = "open" | "check";
+export declare function LinkPolicyProvider({ value, children, }: {
+    readonly value: LinkPolicy;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useLinkPolicy(): LinkPolicy;
+/** The link says its own address (an autolink, or a URL pasted as its text): nothing hides behind it. */
+export declare function linkShowsAddress(text: string, href: string): boolean;
+/**
+ * An external address waiting for the person: the whole of it, then Open (as the link would have,
+ * in a new tab with no opener), Copy or Cancel. `trigger` is what they clicked. The dialog loads where a
+ * check renders, so a surface that only opens links doesn't carry it; a click while it loads opens it once
+ * it has, and the link never leaves unseen.
+ */
+export declare function ExternalLinkCheck({ href, trigger, }: {
+    readonly href: string;
+    readonly trigger: (open: () => void) => ReactNode;
+}): import("react").JSX.Element;

package/dist/components/link-policy.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, lazy, Suspense, use, useState } from "react";
+const LinkPolicyContext = createContext("open");
+export function LinkPolicyProvider({ value, children, }) {
+    return _jsx(LinkPolicyContext, { value: value, children: children });
+}
+export function useLinkPolicy() {
+    return use(LinkPolicyContext);
+}
+/** An address as a person reads it: without its scheme or a closing slash. */
+function bare(text) {
+    return text
+        .trim()
+        .replace(/^https?:\/\//iu, "")
+        .replace(/\/$/u, "");
+}
+/** The link says its own address (an autolink, or a URL pasted as its text): nothing hides behind it. */
+export function linkShowsAddress(text, href) {
+    return bare(text).toLowerCase() === bare(href).toLowerCase();
+}
+const LinkCheckDialog = lazy(() => import("../lib/link-check-dialog.js").then((module) => ({ default: module.LinkCheckDialog })));
+/**
+ * An external address waiting for the person: the whole of it, then Open (as the link would have,
+ * in a new tab with no opener), Copy or Cancel. `trigger` is what they clicked. The dialog loads where a
+ * check renders, so a surface that only opens links doesn't carry it; a click while it loads opens it once
+ * it has, and the link never leaves unseen.
+ */
+export function ExternalLinkCheck({ href, trigger, }) {
+    const [asked, setAsked] = useState(false);
+    return (_jsx(Suspense, { fallback: trigger(() => setAsked(true)), children: _jsx(LinkCheckDialog, { href: href, trigger: trigger, asked: asked }) }));
+}

package/dist/components/linked-text.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Plain text (tool output, terminal transcripts) with its web URLs as links: a dev server's
+ * `http://localhost:8000/` is one click away. Clicks are the host's to route (an app may open them in a
+ * pane of its own, ⌘/Ctrl-click in the system browser); without a handler they open in a new tab.
+ */
+export type TextPart = {
+    readonly text: string;
+} | {
+    readonly url: string;
+};
+/** Text split into plain runs and web URLs, in order. */
+export declare function linkParts(text: string): TextPart[];
+export declare function LinkedText({ text }: {
+    readonly text: string;
+}): string | (string | import("react").JSX.Element)[];

package/dist/components/linked-text.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { keyed } from "../lib/keyed.js";
+import { TextLink } from "./text-link.js";
+/**
+ * A web URL runs until a space, a quote or angle bracket, or a character no URL holds unescaped: a
+ * letter of a script written without spaces (`详见 https://x/docs，然后`) or full-width punctuation.
+ */
+const URL_PATTERN = /\bhttps?:\/\/[^\s<>"'`\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}\u3000-\u303f\uff00-\uffef]+/giu;
+/** Punctuation that ends a sentence rather than the URL (`see http://localhost:3000.`). */
+const TRAILING = /[.,;:!?'"]+$/u;
+/** Drops trailing punctuation, and closing brackets the URL didn't open (`(http://x/a)`). */
+function trimUrl(raw) {
+    let url = raw.replace(TRAILING, "");
+    for (const [open, close] of [
+        ["(", ")"],
+        ["[", "]"],
+        ["{", "}"],
+    ]) {
+        while (url.endsWith(close) && url.split(close).length > url.split(open).length) {
+            url = url.slice(0, -1).replace(TRAILING, "");
+        }
+    }
+    return url;
+}
+/** Text split into plain runs and web URLs, in order. */
+export function linkParts(text) {
+    const parts = [];
+    let at = 0;
+    for (const match of text.matchAll(URL_PATTERN)) {
+        const url = trimUrl(match[0]);
+        const start = match.index;
+        if (url.length <= "https://".length)
+            continue;
+        if (start > at)
+            parts.push({ text: text.slice(at, start) });
+        parts.push({ url });
+        at = start + url.length;
+    }
+    if (at < text.length)
+        parts.push({ text: text.slice(at) });
+    return parts;
+}
+export function LinkedText({ text }) {
+    if (!text.includes("http"))
+        return text;
+    return keyed(linkParts(text), (part) => ("url" in part ? part.url : part.text)).map(({ item: part, key }) => "url" in part ? (_jsx(TextLink, { href: part.url, target: "_blank", rel: "noreferrer", children: part.url }, key)) : (part.text));
+}

package/dist/components/loading-region.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface LoadingRegionProps extends Omit<ComponentProps<"div">, "children" | "role" | "aria-busy" | "aria-label"> {
+    /** What is on its way, in words ("Loading changes"): the region's name for assistive technology. */
+    readonly label: string;
+    /** Placeholder rows of varied width, one per line of a list (files, changes, computers). */
+    readonly rows?: number;
+    /** Each row starts with an icon's square, as a file list's or a tree's rows do. */
+    readonly icon?: boolean;
+    /** The placeholder's own shape, after any rows: a grid of figures, a chart, a board's columns. */
+    readonly children?: ReactNode;
+}
+/**
+ * Where something is loading: a busy status region named by `label`, holding skeletons in the shape
+ * of what is coming. Mount it while the load runs and replace it with what arrives. It takes its
+ * place at once but shows only once the wait is long enough to notice (`useDelayedLoading`), so a
+ * quick load never flashes it and nothing moves when it does show.
+ */
+export declare function LoadingRegion({ label, rows, icon, className, children, ...props }: LoadingRegionProps): import("react").JSX.Element;

package/dist/components/loading-region.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useDelayedLoading } from "../lib/use-delayed-loading.js";
+import { Skeleton } from "./skeleton.js";
+/** Row widths, varied so a placeholder list reads as names of different lengths, not a ruled block. */
+const ROW_WIDTHS = ["w-3/4", "w-1/2", "w-2/3", "w-2/5", "w-3/5", "w-1/3", "w-1/2"];
+/**
+ * Where something is loading: a busy status region named by `label`, holding skeletons in the shape
+ * of what is coming. Mount it while the load runs and replace it with what arrives. It takes its
+ * place at once but shows only once the wait is long enough to notice (`useDelayedLoading`), so a
+ * quick load never flashes it and nothing moves when it does show.
+ */
+export function LoadingRegion({ label, rows = 0, icon = false, className, children, ...props }) {
+    const shown = useDelayedLoading(true);
+    return (_jsxs("div", { "data-slot": "loading-region", role: "status", "aria-busy": "true", "aria-label": label, className: cn("flex flex-col gap-2 transition-opacity duration-(--duration-fast) ease-standard motion-reduce:transition-none", !shown && "opacity-0", className), ...props, children: [Array.from({ length: rows }, (_, i) => i).map((row) => (_jsxs("div", { className: "flex h-7 items-center gap-2", children: [icon && _jsx(Skeleton, { className: "size-4" }), _jsx(Skeleton, { className: cn("h-3", ROW_WIDTHS[row % ROW_WIDTHS.length]) })] }, row))), children] }));
+}

package/dist/components/markdown.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentProps, type ReactNode } from "react";
+/**
+ * Splits markdown into top-level blocks (paragraphs, headings, lists, fences, tables, …) so each can
+ * be memoized: while streaming only the last block re-parses. Splits at blank lines outside fences,
+ * keeps loose lists and indented continuations together, and isolates headings and fences.
+ */
+export declare function splitMarkdownBlocks(source: string): string[];
+/** A finished fenced code block: its text (without the closing newline) and its language tag. */
+export interface MarkdownCodeBlock {
+    readonly code: string;
+    readonly lang: string | undefined;
+}
+/**
+ * Extra controls a host shows in a finished code block's header (a Run button). A block with
+ * any soft-wraps, so nothing they act on sits out of sight past the block's edge.
+ */
+export type CodeBlockActions = (block: MarkdownCodeBlock) => ReactNode;
+export interface MarkdownProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Markdown source. */
+    children: string;
+    /** The text is still arriving: repairs unfinished syntax and only re-renders the last block. */
+    streaming?: boolean;
+    /** Constrain line length to a comfortable ~72ch measure. */
+    measure?: boolean;
+    /**
+     * Remote image hosts trusted to load on render (e.g. the host's own CDN). Other http(s) images
+     * show a "Load image" placeholder until the reader asks; data:, blob: and same-origin always load.
+     */
+    allowImageHosts?: readonly string[] | undefined;
+    /** Extra controls for each finished code block (none by default). */
+    codeActions?: CodeBlockActions | undefined;
+}
+/** Assistant-message renderer: GFM, Shiki code blocks, calm prose rhythm, streaming-safe. */
+export declare function Markdown({ children, streaming, measure, allowImageHosts, codeActions, className, ...props }: MarkdownProps): import("react").JSX.Element;