@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/command-menu.d.ts

@@ -0,0 +1,43 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type HotkeyChord } from "./hotkeys.js";
+export type CommandMenuItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Muted text after the label, such as a record's title. */
+    detail?: string;
+    /** The hotkey that runs it while the menu is open, such as "Mod+J", shown at the row's end. */
+    shortcut?: HotkeyChord;
+    /** More text the query matches, such as a job's customer. */
+    keywords?: readonly string[];
+    /** Shown whatever the query, such as asking the agent about it. */
+    unfiltered?: boolean;
+    /** Runs as the row is chosen; a link row also navigates. */
+    onSelect?: () => void;
+    /** Makes the row a link to this address, so it can open in a new tab too. */
+    href?: string;
+    /** The link element, such as a router's `<Link to="...">`; implies a link row. */
+    render?: ReactElement;
+};
+/** Rows in order, under an optional heading; leave the heading out for a single flat list. */
+export type CommandMenuGroup = {
+    id?: string;
+    heading?: string;
+    items: readonly CommandMenuItem[];
+};
+export type CommandMenuProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    query: string;
+    /** Called as the field changes, and with "" when the menu closes. */
+    onQueryChange: (query: string) => void;
+    /** In order; a group with no matching row is left out. */
+    groups: readonly CommandMenuGroup[];
+    /** Names the dialog for screen readers; the locale's "Command menu" by default. */
+    title?: string;
+    /** The locale's "Search" by default. */
+    placeholder?: string;
+    /** Shown when no row matches, above any `unfiltered` row; the locale's "No results" by default. */
+    empty?: ReactNode;
+};
+export declare function CommandMenu({ open, onOpenChange, query, onQueryChange, groups, title: ownTitle, placeholder: ownPlaceholder, empty: ownEmpty, }: CommandMenuProps): import("@types/react").JSX.Element;

package/dist/components/command-menu.js

@@ -0,0 +1,339 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * A keyboard-first command palette: a search field over grouped rows in a dialog near the top of
+ * the window. Arrows move, Enter runs the highlighted row, Escape closes. `cmdk` owns the list's
+ * keyboard and selection; the menu matches rows itself, so their order stays the caller's.
+ */
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { useRender } from "@base-ui/react/use-render";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Command } from "cmdk";
+import { useLayoutEffect, useRef, useState, } from "react";
+import { css } from "#primitives/css";
+import { scoreCommandMatch } from "./command-match.js";
+import { HotkeyLayer, useHotkeys } from "./hotkeys.js";
+import { icon } from "./icon.js";
+import { ShortcutHint } from "./keycap.js";
+import { useCiridaeLocale } from "./locale.js";
+const backdrop = css({
+    position: "fixed",
+    inset: "none",
+    zIndex: "dialog",
+    background: "bg.backdrop",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
+    _motionReduce: { transition: "none" },
+});
+const popup = css({
+    zIndex: "dialog",
+    position: "fixed",
+    top: "15dvh",
+    left: "50%",
+    display: "flex",
+    flexDirection: "column",
+    width: "calc(100vw - token(spacing.layout.pageGap) * 2)",
+    maxWidth: "overlay.dialog",
+    overflow: "hidden",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.card",
+    color: "fg.primary",
+    textStyle: "body",
+    boxShadow: "card",
+    outline: "none",
+    transform: "translateX(-50%)",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
+    _motionReduce: { transition: "none" },
+    _phone: { top: "layout.pageGap" },
+});
+const visuallyHidden = css({
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "none",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: "0",
+});
+const field = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    height: "control.search",
+    paddingInline: "control.compactInline",
+    borderBottom: "1px solid token(colors.border.control)",
+    color: "fg.muted",
+    "& > input": {
+        flex: "1",
+        minWidth: "0",
+        height: "100%",
+        border: "0",
+        outline: "0",
+        background: "transparent",
+        color: "fg.primary",
+        font: "inherit",
+        _placeholder: { color: "fg.muted" },
+    },
+});
+const list = css({
+    maxHeight: "min(60dvh, 420px)",
+    overflowY: "auto",
+    overscrollBehavior: "contain",
+    "& [cmdk-group] + [cmdk-group]": { borderTop: "1px solid token(colors.border.subtle)" },
+    "& [cmdk-group-heading]": {
+        paddingInline: "control.compactInline",
+        paddingTop: "control.block",
+        paddingBottom: "layout.tightGap",
+        color: "fg.muted",
+        fontSize: "code",
+        fontWeight: "medium",
+    },
+    // The last group's rows run to the popup's foot, with the field's inset under them.
+    "& [cmdk-group]:last-child": { paddingBottom: "layout.tightGap" },
+});
+const row = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "menu.item",
+    paddingInline: "control.compactInline",
+    fontSize: "caption",
+    lineHeight: "body",
+    cursor: "pointer",
+    "&[data-selected=true]": { background: "bg.rowHover" },
+    "& > svg": { flexShrink: "0", color: "fg.muted" },
+    "& > [data-label]": {
+        flexShrink: "0",
+        maxWidth: "60%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "& > [data-detail]": {
+        flex: "1",
+        minWidth: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        color: "fg.muted",
+    },
+    "& > [data-shortcut]": { marginInlineStart: "auto" },
+    // A link row's anchor fills the row, so its content lays out as a plain row's does. Choosing
+    // the row clicks it, so it takes no pointer of its own and never navigates twice.
+    "& > [data-row-link]": {
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "center",
+        gap: "inherit",
+        flex: "1",
+        minWidth: "0",
+        alignSelf: "stretch",
+        color: "inherit",
+        textDecoration: "none",
+        "& > svg": { flexShrink: "0", color: "fg.muted" },
+        "& > [data-label]": {
+            flexShrink: "0",
+            maxWidth: "60%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        },
+        "& > [data-detail]": {
+            flex: "1",
+            minWidth: "0",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            color: "fg.muted",
+        },
+    },
+});
+const emptyRow = css({
+    paddingInline: "control.compactInline",
+    paddingBlock: "control.block",
+    color: "fg.muted",
+    fontSize: "caption",
+});
+/**
+ * The shown rows' hotkeys, in the menu's layer: it is the newest scope, so a row's hotkey wins over
+ * the page's own binding for the same keys, such as Cmd+J opening the chat empty.
+ */
+function CommandMenuShortcuts({ items, run, }) {
+    useHotkeys(items.flatMap((item) => item.shortcut
+        ? [
+            {
+                hotkey: item.shortcut,
+                callback: () => run(item),
+                options: { meta: { name: item.label } },
+            },
+        ]
+        : []));
+    return null;
+}
+/** Past this many rows the menu draws only those near the view. */
+const virtualizeRowsPast = 50;
+/** A row's height before it is measured: the menu's item height. */
+const menuRowHeight = 30;
+// The rows lie over a box as tall as all of them, each moved down to its place.
+const virtualLines = css({
+    position: "relative",
+    "& > *": { position: "absolute", top: "0", insetInline: "0" },
+});
+/** Every word of the query matches the row's label, detail or keywords (`scoreCommandMatch`). */
+function matchesQuery(item, query) {
+    return item.unfiltered === true || scoreCommandMatch(item, query) > 0;
+}
+export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups, title: ownTitle, placeholder: ownPlaceholder, empty: ownEmpty, }) {
+    const { labels } = useCiridaeLocale();
+    const title = ownTitle ?? labels.commandMenu.title;
+    const placeholder = ownPlaceholder ?? labels.common.search;
+    const empty = ownEmpty ?? labels.common.noResults;
+    const shownGroups = groups
+        .map((group) => ({ ...group, items: group.items.filter((item) => matchesQuery(item, query)) }))
+        .filter((group) => group.items.length > 0);
+    const matched = shownGroups.some((group) => group.items.some((item) => !item.unfiltered));
+    // A row that ran keeps the focus it moved, such as into the field it opened.
+    const ranItem = useRef(false);
+    // Focus goes back where it was when the menu opened, such as into a dialog under it, unless
+    // something else has taken it since the menu closed, such as a hotkey opening a composer.
+    const popupRef = useRef(null);
+    const focusedBeforeOpen = useRef(null);
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        const active = document.activeElement;
+        focusedBeforeOpen.current =
+            active instanceof HTMLElement && !popupRef.current?.contains(active) ? active : null;
+    }, [open]);
+    const restoreFocus = () => {
+        const ran = ranItem.current;
+        ranItem.current = false;
+        const active = document.activeElement;
+        const takenOver = active instanceof HTMLElement &&
+            active !== document.body &&
+            !popupRef.current?.contains(active);
+        if (ran || takenOver)
+            return false;
+        const before = focusedBeforeOpen.current;
+        return before?.isConnected ? before : true;
+    };
+    const setOpen = (next) => {
+        if (!next)
+            onQueryChange("");
+        onOpenChange(next);
+    };
+    const links = useRef(new Map());
+    const run = (item) => {
+        ranItem.current = true;
+        setOpen(false);
+        // A link row navigates through its anchor, so a router's link handles it as a click.
+        const link = links.current.get(item.id);
+        if (link)
+            link.click();
+        else
+            item.onSelect?.();
+    };
+    // Past `virtualizeRowsPast` rows the list draws only those near the view, so the menu owns the
+    // arrow keys and Enter: cmdk only knows the rows it can see.
+    const lines = shownGroups.flatMap((group, groupIndex) => [
+        ...(group.heading
+            ? [
+                {
+                    kind: "heading",
+                    key: `heading:${group.id ?? groupIndex}`,
+                    heading: group.heading,
+                },
+            ]
+            : []),
+        ...group.items.map((item) => ({ kind: "item", key: item.id, item })),
+    ]);
+    const shownItems = shownGroups.flatMap((group) => group.items);
+    const virtualized = shownItems.length > virtualizeRowsPast;
+    const [listElement, setListElement] = useState(null);
+    const virtualizer = useVirtualizer({
+        count: lines.length,
+        getScrollElement: () => listElement,
+        estimateSize: () => menuRowHeight,
+        getItemKey: (index) => lines[index]?.key ?? index,
+        overscan: 8,
+        enabled: virtualized,
+    });
+    const [chosenId, setChosenId] = useState("");
+    const selectedId = shownItems.some((item) => item.id === chosenId)
+        ? chosenId
+        : (shownItems[0]?.id ?? "");
+    const moveSelection = (event) => {
+        if (!virtualized)
+            return;
+        const index = shownItems.findIndex((item) => item.id === selectedId);
+        const last = shownItems.length - 1;
+        const next = event.key === "ArrowDown"
+            ? index >= last
+                ? 0
+                : index + 1
+            : event.key === "ArrowUp"
+                ? index <= 0
+                    ? last
+                    : index - 1
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? last
+                        : null;
+        if (event.key === "Enter") {
+            const item = shownItems[index];
+            if (!item)
+                return;
+            event.preventDefault();
+            run(item);
+            return;
+        }
+        const item = next === null ? undefined : shownItems[next];
+        if (!item)
+            return;
+        event.preventDefault();
+        setChosenId(item.id);
+        virtualizer.scrollToIndex(lines.findIndex((line) => line.key === item.id), { align: "auto" });
+    };
+    const drawItem = (item, measured) => (_jsxs(Command.Item, { ref: measured?.ref, "data-index": measured?.index, style: measured?.style, value: item.id, className: row, onSelect: () => run(item), children: [item.href !== undefined || item.render !== undefined ? (_jsx(CommandMenuLink, { item: item, register: (element) => {
+                    if (element)
+                        links.current.set(item.id, element);
+                    else
+                        links.current.delete(item.id);
+                } })) : (_jsx(CommandMenuRowContent, { item: item })), item.shortcut && _jsx(ShortcutHint, { "data-shortcut": "", hotkey: item.shortcut })] }, item.id));
+    return (_jsx(BaseDialog.Root, { open: open, onOpenChange: setOpen, children: _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(CommandMenuShortcuts, { items: shownGroups.flatMap((group) => group.items), run: run }), _jsx(BaseDialog.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsxs(BaseDialog.Popup, { className: popup, "data-ciridae-ui": "", ref: popupRef, finalFocus: restoreFocus, children: [_jsx(BaseDialog.Title, { className: visuallyHidden, children: title }), _jsxs(Command, { label: title, shouldFilter: false, loop: true, ...(virtualized ? { value: selectedId, onValueChange: setChosenId } : {}), onKeyDown: moveSelection, children: [_jsxs("div", { className: field, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(Command.Input, { autoFocus: true, placeholder: placeholder, value: query, onValueChange: onQueryChange })] }), _jsxs(Command.List, { ref: setListElement, className: list, children: [!matched && (_jsx("div", { className: emptyRow, role: "presentation", children: empty })), virtualized ? (_jsx("div", { className: virtualLines, style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => {
+                                                    const line = lines[virtualItem.index];
+                                                    if (!line)
+                                                        return null;
+                                                    const measured = {
+                                                        index: virtualItem.index,
+                                                        ref: virtualizer.measureElement,
+                                                        style: { transform: `translateY(${virtualItem.start}px)` },
+                                                    };
+                                                    return line.kind === "heading" ? (_jsx("div", { ref: measured.ref, "data-index": measured.index, style: measured.style, "cmdk-group-heading": "", role: "presentation", children: line.heading }, line.key)) : (drawItem(line.item, measured));
+                                                }) })) : (shownGroups.map((group, groupIndex) => (_jsx(Command.Group, { heading: group.heading, children: group.items.map((item) => drawItem(item)) }, group.id ?? group.heading ?? groupIndex))))] })] })] })] }) }) }));
+}
+function CommandMenuRowContent({ item }) {
+    return (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { "data-label": "", children: item.label }), item.detail && _jsx("span", { "data-detail": "", children: item.detail })] }));
+}
+/** A link row's anchor; the row's own selection clicks it, so it never takes focus itself. */
+function CommandMenuLink({ item, register, }) {
+    return useRender({
+        defaultTagName: "a",
+        render: item.render,
+        ref: register,
+        props: {
+            href: item.href,
+            tabIndex: -1,
+            "data-row-link": "",
+            onClick: item.onSelect,
+            children: _jsx(CommandMenuRowContent, { item: item }),
+        },
+    });
+}

package/dist/components/command-palette.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type CommandMenuItem } from "./command-menu.js";
+import { type HotkeyChord } from "./hotkeys.js";
+export type CommandPaletteItem = Omit<CommandMenuItem, "unfiltered">;
+export type CommandPaletteGroup = {
+    id: string;
+    heading?: string;
+    items: readonly CommandPaletteItem[];
+};
+export type CommandPaletteProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    groups: readonly CommandPaletteGroup[];
+    /** Called as the query changes, and with "" when the palette closes. */
+    onQueryChange?: (query: string) => void;
+    /** A last row for the query itself, shown whatever matched while something is typed. */
+    footerItem?: (query: string) => CommandPaletteItem | null;
+    title?: string;
+    placeholder?: string;
+    empty?: ReactNode;
+};
+/** Whether the palette is open; `hotkey` (Cmd/Ctrl+K by default) toggles it from anywhere. */
+export declare function useCommandPalette({ hotkey }?: {
+    hotkey?: HotkeyChord;
+}): {
+    open: boolean;
+    setOpen: import("@types/react").Dispatch<import("@types/react").SetStateAction<boolean>>;
+    toggle: () => void;
+};
+export declare function CommandPalette({ open, onOpenChange, groups, onQueryChange, footerItem, title, placeholder, empty, }: CommandPaletteProps): import("@types/react").JSX.Element;
+export type CommandPaletteTriggerProps = ComponentProps<"button"> & {
+    /** The hotkey `useCommandPalette` opens it with, shown at the end; Cmd/Ctrl+K by default. */
+    hotkey?: HotkeyChord;
+};
+/** A search field's face, as a button that opens the palette; reads "Search" unless given text. */
+export declare function CommandPaletteTrigger({ hotkey, className, children, ...props }: CommandPaletteTriggerProps): import("@types/react").JSX.Element;

package/dist/components/command-palette.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The app's Cmd+K palette on `CommandMenu`: groups of pages, records, people and actions the app
+ * supplies, matched loosely on label, detail and keywords and ranked closest first within each
+ * group, with an optional row for whatever was typed (such as asking the agent about it).
+ * `useCommandPalette` owns the open state and the shortcut; `CommandPaletteTrigger` is a search
+ * field's face that opens it, for a sidebar.
+ */
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { useCallback, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { scoreCommandMatch } from "./command-match.js";
+import { CommandMenu } from "./command-menu.js";
+import { useHotkey } from "./hotkeys.js";
+import { icon } from "./icon.js";
+import { ShortcutHint } from "./keycap.js";
+import { useCiridaeLocale } from "./locale.js";
+/** Whether the palette is open; `hotkey` (Cmd/Ctrl+K by default) toggles it from anywhere. */
+export function useCommandPalette({ hotkey = "Mod+K" } = {}) {
+    const { labels } = useCiridaeLocale();
+    const [open, setOpen] = useState(false);
+    useHotkey(hotkey, () => setOpen((current) => !current), {
+        meta: { name: labels.keyboard.openCommandMenu },
+    });
+    const toggle = useCallback(() => setOpen((current) => !current), []);
+    return { open, setOpen, toggle };
+}
+export function CommandPalette({ open, onOpenChange, groups, onQueryChange, footerItem, title, placeholder, empty, }) {
+    const [query, setQuery] = useState("");
+    const changeQuery = (next) => {
+        setQuery(next);
+        onQueryChange?.(next);
+    };
+    const typed = query.trim();
+    // Closest first within a group; rows that score alike keep the caller's order.
+    const rankedGroups = groups.map((group) => ({
+        id: group.id,
+        heading: group.heading,
+        items: typed
+            ? group.items
+                .map((item, index) => ({ item, index, score: scoreCommandMatch(item, typed) }))
+                .filter((entry) => entry.score > 0)
+                .sort((first, second) => second.score - first.score || first.index - second.index)
+                .map((entry) => entry.item)
+            : group.items,
+    }));
+    const footer = typed && footerItem ? footerItem(typed) : null;
+    return (_jsx(CommandMenu, { open: open, onOpenChange: onOpenChange, query: query, onQueryChange: changeQuery, groups: footer
+            ? [...rankedGroups, { id: "footer", items: [{ ...footer, unfiltered: true }] }]
+            : rankedGroups, title: title, placeholder: placeholder, empty: empty }));
+}
+const trigger = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    width: "100%",
+    // The sidebar row's height, so it sits in the column as one of its items.
+    height: "control.small",
+    paddingInlineStart: "control.compactInline",
+    paddingInlineEnd: "control.iconGap",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.field",
+    color: "fg.muted",
+    font: "inherit",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    cursor: "pointer",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+    "& > [data-shortcut]": { marginInlineStart: "auto", _phone: { display: "none" } },
+});
+/** A search field's face, as a button that opens the palette; reads "Search" unless given text. */
+export function CommandPaletteTrigger({ hotkey = "Mod+K", className, children, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("button", { type: "button", "aria-haspopup": "dialog", ...props, className: cx(trigger, className), "data-ciridae-ui": "", children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), children ?? labels.common.search, _jsx(ShortcutHint, { "data-shortcut": "", hotkey: hotkey })] }));
+}

package/dist/components/controllable-state.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A value the caller may own (`value` with `onChange`) or leave to the component (`defaultValue`):
+ * reads the caller's while it passes one, else the component's own, and reports every change.
+ */
+export declare function useControllableState<Value>(value: Value | undefined, defaultValue: Value, onChange?: (value: Value) => void): [Value, (value: Value) => void];

package/dist/components/controllable-state.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react";
+/**
+ * A value the caller may own (`value` with `onChange`) or leave to the component (`defaultValue`):
+ * reads the caller's while it passes one, else the component's own, and reports every change.
+ */
+export function useControllableState(value, defaultValue, onChange) {
+    const [ownValue, setOwnValue] = useState(defaultValue);
+    const controlled = value !== undefined;
+    const setValue = useCallback((next) => {
+        if (!controlled)
+            setOwnValue(next);
+        onChange?.(next);
+    }, [controlled, onChange]);
+    return [controlled ? value : ownValue, setValue];
+}

package/dist/components/copyable-id.d.ts

@@ -0,0 +1,37 @@
+import { type IconButtonProps } from "./button.js";
+/**
+ * Copies `value` (or what it returns, read at the moment of copying) and reports `copied` for a
+ * moment afterwards, for a check-mark confirmation.
+ */
+export declare function useCopy(value: string | (() => string), onCopied?: () => void): {
+    copied: boolean;
+    copy: () => undefined;
+};
+export type CopyButtonProps = {
+    /** The text to copy, or a function that builds it when the button is pressed. */
+    value: string | (() => string);
+    /** What gets copied, such as "command"; the button reads "Copy <label>", or "Copy" without one. */
+    label?: string;
+    /** `inline` is the bare icon in a line of text, such as a message's footer. */
+    variant?: "raised" | "ghost" | "inline";
+    size?: IconButtonProps["size"];
+    onCopied?: () => void;
+    className?: string;
+};
+/** A button that copies `value`, its icon turning into a check once copied. */
+export declare function CopyButton({ value, label, variant, size, onCopied, className, }: CopyButtonProps): import("@types/react").JSX.Element;
+/**
+ * A long identifier, such as an error's trace ID, shown short and copied whole on click so a
+ * reader can hand it to support.
+ */
+export declare function CopyableId({ value, label, className, }: {
+    value: string;
+    label?: string;
+    className?: string;
+}): import("@types/react").JSX.Element;
+/** Text shown in full with a copy control; `label` names what gets copied, such as a key's name. */
+export declare function CopyableText({ text, label, className, }: {
+    text: string;
+    label: string;
+    className?: string;
+}): import("@types/react").JSX.Element;