@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/hotkeys.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Keyboard shortcuts on TanStack Hotkeys. Register with `useHotkey` / `useHotkeys` and a
+ * `meta: { name, group }` so `KeyboardShortcuts` lists the binding. Where a hotkey is registered
+ * sets when it fires:
+ * - outside `AppShell` it is global, such as Cmd+K, and fires over any overlay;
+ * - inside `AppShell` it belongs to the page and pauses while an overlay is open;
+ * - inside an overlay (dialog, drawer, popover, menu, select, command menu) it fires only while
+ *   that overlay is the top one, since each overlay is a `HotkeyLayer`.
+ * Single keys and Shift combos skip text fields and ARIA widgets; Mod combos and Escape fire
+ * there too. `Mod` is Cmd on a Mac and Ctrl elsewhere. An app declares the hotkeys a person may
+ * rebind with `defineAppHotkeys`, passes them to a root `HotkeysProvider` with the saved
+ * `customHotkeys`, and registers each with `useHotkey(useAppHotkeys()[id], ...)`;
+ * `KeyboardShortcutSettings` lists and records them.
+ */
+import { HotkeysProvider, normalizeHotkey, validateHotkey, } from "@tanstack/react-hotkeys";
+import { useId } from "react";
+import { z } from "zod";
+export { defineAppHotkeys, detectPlatform, formatForDisplay, HotkeysProvider, useAppHotkeyList, useAppHotkeys, useCustomHotkeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeys, useKeyHold, } from "@tanstack/react-hotkeys";
+/** The scope of the hotkeys registered inside `AppShell`. */
+export const PAGE_HOTKEY_SCOPE = "page";
+/** Gives the hotkeys registered inside it to the page, paused while an overlay is open. */
+export function PageHotkeys({ children }) {
+    return _jsx(HotkeysProvider, { scope: PAGE_HOTKEY_SCOPE, children: children });
+}
+/**
+ * An overlay's keyboard: while mounted (and `enabled`), only the hotkeys registered inside it and
+ * the global ones fire, so the top overlay owns the keyboard and the page under it pauses.
+ */
+export function HotkeyLayer({ enabled, children }) {
+    const scope = `layer${useId()}`;
+    return (_jsx(HotkeysProvider, { scope: scope, exclusive: { allow: ["global"] }, enabled: enabled, children: children }));
+}
+const storedCustomHotkeysSchema = z.record(z.string(), z.union([z.string(), z.array(z.string()), z.null()]));
+/**
+ * The person's rebound hotkeys, kept in `localStorage` as JSON under `storageKey`, as the root
+ * `HotkeysProvider`'s `customHotkeys` and `onCustomHotkeysChange`. Entries that are no hotkey are
+ * dropped with a warning.
+ */
+export function storedCustomHotkeys(storageKey) {
+    const customHotkeys = {};
+    try {
+        const text = globalThis.localStorage?.getItem(storageKey);
+        const stored = storedCustomHotkeysSchema.safeParse(text ? JSON.parse(text) : {});
+        if (!stored.success)
+            console.warn(`Ignoring saved hotkeys under ${storageKey}`, stored.error);
+        for (const [id, hotkey] of Object.entries(stored.data ?? {})) {
+            if (hotkey === null)
+                customHotkeys[id] = null;
+            else if (validateHotkey(hotkey).valid)
+                customHotkeys[id] = normalizeHotkey(hotkey);
+            else
+                console.warn(`Ignoring saved hotkey ${id} under ${storageKey}`, hotkey);
+        }
+    }
+    catch (error) {
+        console.warn(`Ignoring unreadable saved hotkeys under ${storageKey}`, error);
+    }
+    return {
+        customHotkeys,
+        onCustomHotkeysChange: (next) => {
+            try {
+                globalThis.localStorage?.setItem(storageKey, JSON.stringify(next));
+            }
+            catch (error) {
+                console.warn(`Could not save hotkeys under ${storageKey}`, error);
+            }
+        },
+    };
+}

package/dist/components/icon.d.ts

@@ -0,0 +1,58 @@
+import { type IconProps } from "@phosphor-icons/react";
+export type IconSize = "tiny" | "compact" | "small" | "medium" | "large" | "display" | "hero";
+export declare const icon: import("../../../src/styled-system/types/index.js").RecipeRuntimeFn<{
+    size: {
+        tiny: {
+            fontSize: "icon.tiny";
+        };
+        compact: {
+            fontSize: "icon.compact";
+        };
+        small: {
+            fontSize: "icon.small";
+        };
+        medium: {
+            fontSize: "icon.medium";
+        };
+        large: {
+            fontSize: "icon.large";
+        };
+        display: {
+            fontSize: "icon.display";
+        };
+        hero: {
+            fontSize: "icon.hero";
+        };
+    };
+    tone: {
+        neutral: {
+            color: "fg.muted";
+        };
+        info: {
+            color: "accent.blue";
+        };
+        success: {
+            color: "accent.green";
+        };
+        warning: {
+            color: "accent.yellow";
+        };
+        danger: {
+            color: "accent.red";
+        };
+    };
+}>;
+/**
+ * For an icon that points along the line, such as a caret or an arrow: mirrored under `dir=rtl`, so
+ * "next" points the way the text reads. It sets `scale`, so a `transform` or `rotate` still applies.
+ */
+export declare const directional: string;
+/** Continuous rotation for in-progress icons such as `SpinnerGapIcon`. */
+export declare const spinning: string;
+export type SpinnerProps = Omit<IconProps, "size"> & {
+    size?: IconSize;
+    /** Announced as the status; pass `aria-hidden` instead where a label beside it says it already. */
+    label?: string;
+};
+/** The one in-progress glyph: every pending state spins this, never a refresh or notch icon. */
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("@types/react").JSX.Element;

package/dist/components/icon.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpinnerGapIcon } from "@phosphor-icons/react";
+import { css, cva, cx } from "#primitives/css";
+import { useCiridaeLocale } from "./locale.js";
+export const icon = cva({
+    base: { display: "inline-block", flexShrink: "0", verticalAlign: "middle" },
+    variants: {
+        size: {
+            tiny: { fontSize: "icon.tiny" },
+            compact: { fontSize: "icon.compact" },
+            small: { fontSize: "icon.small" },
+            medium: { fontSize: "icon.medium" },
+            large: { fontSize: "icon.large" },
+            display: { fontSize: "icon.display" },
+            hero: { fontSize: "icon.hero" },
+        },
+        // A status mark's color, from the shared tones; leave it out to inherit the text color.
+        tone: {
+            neutral: { color: "fg.muted" },
+            info: { color: "accent.blue" },
+            success: { color: "accent.green" },
+            warning: { color: "accent.yellow" },
+            danger: { color: "accent.red" },
+        },
+    },
+    defaultVariants: { size: "medium" },
+});
+/**
+ * For an icon that points along the line, such as a caret or an arrow: mirrored under `dir=rtl`, so
+ * "next" points the way the text reads. It sets `scale`, so a `transform` or `rotate` still applies.
+ */
+export const directional = css({ _rtl: { scale: "-1 1" } });
+/** Continuous rotation for in-progress icons such as `SpinnerGapIcon`. */
+export const spinning = css({
+    animation: "spin 1s linear infinite",
+    _motionReduce: { animation: "none" },
+});
+/** The one in-progress glyph: every pending state spins this, never a refresh or notch icon. */
+export function Spinner({ size = "small", label, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsx(SpinnerGapIcon, { role: "status", "aria-label": label ?? labels.common.loading, ...props, className: cx(icon({ size }), spinning, className) }));
+}

package/dist/components/input.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps, type MouseEvent } from "react";
+import type { Hotkey } from "./hotkeys.js";
+export type InputProps = Omit<ComponentProps<"input">, "size"> & {
+    size?: "small" | "medium" | "large";
+};
+export declare function Input({ className, size, ...props }: InputProps): import("@types/react").JSX.Element;
+export type SearchInputProps = Omit<ComponentProps<"input">, "size" | "value" | "defaultValue"> & {
+    variant?: "regular" | "flat" | "sidebar" | "dropdown";
+    /** Defaults to `compact` in a `Toolbar`, `regular` elsewhere. */
+    size?: "regular" | "compact";
+    /** `fill` takes the row's width; `field` grows from a name's width to a search field's. */
+    width?: "fill" | "field";
+    value?: string;
+    defaultValue?: string;
+    /**
+     * The search to run, once typing pauses for `debounceMs` or on Enter. With it the field keeps
+     * its own draft, and a new `value` replaces the draft, such as when the URL changes.
+     */
+    onValueCommit?: (value: string) => void;
+    /** How long typing pauses before `onValueCommit`. Defaults to 250. */
+    debounceMs?: number;
+    /** Shows this hotkey's hint, such as "Mod+K"; the host binds it, such as to open its search. */
+    shortcut?: Hotkey;
+    wrapperClassName?: string;
+};
+export declare function SearchInput({ variant, size: ownSize, width, value, defaultValue, onValueCommit, debounceMs, shortcut, wrapperClassName, className, onChange, onKeyDown, ...props }: SearchInputProps): import("@types/react").JSX.Element;
+export type SearchFieldProps = Omit<ComponentProps<"input">, "size" | "type"> & {
+    /** Defaults to `compact` in a `Toolbar`, `regular` elsewhere. */
+    size?: "regular" | "compact";
+    /** Shows the clear button; it clears a controlled value through `onClear`. */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Shows this hotkey's hint while the field is empty, such as "/"; the host binds it. */
+    shortcut?: Hotkey;
+    wrapperClassName?: string;
+};
+export declare function SearchField({ size: ownSize, onClear, shortcut, wrapperClassName, className, disabled, ...props }: SearchFieldProps): import("@types/react").JSX.Element;

package/dist/components/input.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useDebouncer } from "@tanstack/react-pacer";
+import { useEffect, useState } from "react";
+import { css, cva, cx } from "#primitives/css";
+import { useFieldControl } from "./field-context.js";
+import { icon } from "./icon.js";
+import { ShortcutHint } from "./keycap.js";
+import { useInToolbar } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+/*
+ * The one field face: a flat well under a hairline, nearly square-cornered. Error comes from
+ * `aria-invalid` or Base UI's Field, never from a prop, and nothing changes on hover.
+ */
+const fieldFace = {
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "control",
+    background: "bg.field",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    _placeholder: { color: "fg.subtle" },
+    _focusVisible: { focusRing: "outer" },
+    "&[aria-invalid=true], &[data-invalid]": { borderColor: "border.error" },
+    "&:disabled, &[data-disabled]": {
+        background: "bg.fieldDisabled",
+        opacity: "disabled",
+        cursor: "not-allowed",
+    },
+};
+const field = cva({
+    base: { ...fieldFace, width: "100%", lineHeight: "tight" },
+    variants: {
+        size: {
+            /** Matches the small button, for forms and filters. */
+            small: {
+                height: "control.compact",
+                paddingInline: "control.compactInline",
+                fontSize: "caption",
+            },
+            /** The Round 2 field: the height of the default button. */
+            medium: {
+                height: "control.default",
+                paddingInline: "control.compactInline",
+                fontSize: "body",
+            },
+            /** For a page whose form is the whole page, such as sign-in. */
+            large: {
+                height: "control.field",
+                paddingInline: "control.inline",
+                borderRadius: "field",
+                fontSize: "body",
+            },
+        },
+    },
+    defaultVariants: { size: "small" },
+});
+export function Input({ className, size = "small", ...props }) {
+    const fieldIds = useFieldControl(props);
+    return (_jsx(BaseInput, { ...props, ...fieldIds, className: cx(field({ size }), className), "data-ciridae-ui": "" }));
+}
+const search = cva({
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "control.iconGap",
+        height: "control.search",
+        width: "100%",
+        border: "1px solid transparent",
+        color: "fg.muted",
+        _hover: { color: "fg.primary" },
+        _focusWithin: { color: "fg.primary" },
+    },
+    variants: {
+        variant: {
+            regular: {
+                borderRadius: "pill",
+                paddingInline: "control.inline",
+                background: "bg.control",
+                boxShadow: "search",
+            },
+            // The sidebar's search is a flat field, like the ones in a form.
+            sidebar: {
+                height: "control.default",
+                borderRadius: "control",
+                paddingInline: "control.compactInline",
+                border: "1px solid token(colors.border.control)",
+                background: "bg.field",
+            },
+            dropdown: {
+                borderRadius: "action",
+                paddingInline: "control.compactInline",
+                border: "0",
+                height: "control.compact",
+                background: "transparent",
+            },
+            // The regular pill without its lift: no shadow or ring, on the canvas, for a field set on
+            // a card.
+            flat: {
+                borderRadius: "pill",
+                paddingInline: "control.inline",
+                borderColor: "border.card",
+                background: "bg.canvas",
+            },
+        },
+        width: {
+            fill: {},
+            // Grows with its toolbar from a name's width up to a search field's, leaving its filters room.
+            field: { flex: "1", minWidth: "0", flexBasis: "220px", maxWidth: "control.searchField" },
+        },
+        size: {
+            regular: {},
+            /** Matches compact selects and small buttons in a row of filters. */
+            compact: {
+                height: "control.compact",
+                paddingInline: "control.compactInline",
+                borderRadius: "action",
+            },
+        },
+    },
+    defaultVariants: { variant: "regular", size: "regular", width: "fill" },
+});
+const searchText = cva({
+    base: {
+        flex: "1",
+        minWidth: "0",
+        height: "100%",
+        padding: "none",
+        border: "0",
+        background: "transparent",
+        outline: "none",
+        color: "fg.primary",
+        fontFamily: "sans",
+        fontSize: "body",
+        fontWeight: "medium",
+        _placeholder: { color: "fg.muted" },
+    },
+    variants: {
+        variant: {
+            regular: {},
+            sidebar: {},
+            flat: {},
+            dropdown: { fontSize: "caption", fontWeight: "regular" },
+        },
+        size: { regular: {}, compact: { fontSize: "caption", fontWeight: "regular" } },
+    },
+});
+export function SearchInput({ variant = "regular", size: ownSize, width = "fill", value, defaultValue, onValueCommit, debounceMs = 250, shortcut, wrapperClassName, className, onChange, onKeyDown, ...props }) {
+    const inToolbar = useInToolbar();
+    const size = ownSize ?? (inToolbar ? "compact" : "regular");
+    const [draft, setDraft] = useState(value ?? defaultValue ?? "");
+    const [shownValue, setShownValue] = useState(value);
+    if (value !== shownValue) {
+        setShownValue(value);
+        setDraft(value ?? "");
+    }
+    const committing = onValueCommit !== undefined;
+    const committed = value ?? defaultValue ?? "";
+    const commit = useDebouncer((next) => onValueCommit?.(next), { wait: debounceMs });
+    // A new `value` replaces the draft, and with it any commit still waiting.
+    const cancelCommit = commit.cancel;
+    useEffect(() => cancelCommit(), [cancelCommit, value]);
+    return (_jsxs("label", { className: cx(search({ variant, size, width }), wrapperClassName), "data-ciridae-ui": "", "data-edge": variant === "regular" ? "control" : undefined, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(BaseInput, { ...props, ...(committing ? { value: draft } : { value, defaultValue }), type: "search", onChange: (event) => {
+                    if (committing) {
+                        const next = event.target.value;
+                        setDraft(next);
+                        if (next === committed)
+                            commit.cancel();
+                        else
+                            commit.maybeExecute(next);
+                    }
+                    onChange?.(event);
+                }, onKeyDown: (event) => {
+                    if (committing && event.key === "Enter") {
+                        commit.cancel();
+                        onValueCommit(event.currentTarget.value);
+                    }
+                    onKeyDown?.(event);
+                }, className: cx(searchText({ variant, size }), className) }), shortcut && _jsx(ShortcutHint, { hotkey: shortcut })] }));
+}
+/*
+ * The Round 2 search field is an underline, not a box: an icon, the text, and a clear button on
+ * one hairline. Focus turns that hairline into a 2px accent line, as the frames draw it, rather
+ * than boxing a field that has no box.
+ */
+const underline = cva({
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "control.iconGap",
+        width: "100%",
+        paddingInline: "search.inline",
+        borderBottom: "1px solid token(colors.border.control)",
+        color: "fg.muted",
+        "&:has(:focus-visible)": {
+            borderBottomColor: "border.focus",
+            boxShadow: "inset 0 -1px 0 0 token(colors.border.focus)",
+        },
+        "&:has(:disabled)": { opacity: "disabled" },
+    },
+    variants: {
+        size: {
+            regular: { height: "control.default" },
+            compact: { height: "control.compact" },
+        },
+    },
+    defaultVariants: { size: "regular" },
+});
+const underlineText = css({
+    flex: "1",
+    minWidth: "0",
+    height: "100%",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    outline: "none",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    _placeholder: { color: "fg.subtle" },
+    _disabled: { cursor: "not-allowed" },
+    // Browsers draw their own clear control on `type=search`; the row has its own.
+    "&::-webkit-search-cancel-button": { display: "none" },
+});
+const clear = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "control.clear",
+    height: "control.clear",
+    padding: "none",
+    border: "0",
+    borderRadius: "round",
+    background: "transparent",
+    color: "fg.muted",
+    cursor: "pointer",
+    _hover: { color: "fg.primary", background: "bg.hover" },
+    _focusVisible: { focusRing: "inset" },
+});
+export function SearchField({ size: ownSize, onClear, shortcut, wrapperClassName, className, disabled, ...props }) {
+    const inToolbar = useInToolbar();
+    const { labels } = useCiridaeLocale();
+    const size = ownSize ?? (inToolbar ? "compact" : "regular");
+    return (_jsxs("label", { className: cx(underline({ size }), wrapperClassName), "data-ciridae-ui": "", children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(BaseInput, { ...props, type: "search", disabled: disabled, className: cx(underlineText, className) }), onClear && (_jsx("button", { type: "button", className: clear, "aria-label": labels.common.clear, disabled: disabled, onClick: onClear, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })), shortcut && !onClear && _jsx(ShortcutHint, { hotkey: shortcut })] }));
+}

package/dist/components/keyboard-shortcuts.d.ts

@@ -0,0 +1,10 @@
+import { type HotkeyChord } from "./hotkeys.js";
+export type KeyboardShortcutsProps = {
+    /** The hotkey that opens and closes the sheet; Cmd/Ctrl+/ by default. */
+    hotkey?: HotkeyChord;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare function KeyboardShortcuts({ hotkey, open: ownOpen, onOpenChange, }: KeyboardShortcutsProps): import("@types/react").JSX.Element;
+/** The app's rebindable hotkeys under their groups, each with Change and, once changed, Reset. */
+export declare function KeyboardShortcutSettings(): import("@types/react").JSX.Element[];

package/dist/components/keyboard-shortcuts.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The keyboard cheat sheet: `?` opens a dialog of every hotkey registered with a `meta.name`,
+ * grouped by `meta.group`, read from the hotkeys registry, so it lists what the mounted app and
+ * page bind. A row joins the hotkeys that share a name, such as ← and Page Up for the previous page.
+ * `KeyboardShortcutSettings` lists the app's rebindable hotkeys (`defineAppHotkeys` on the root
+ * `HotkeysProvider`) and records a new one for each.
+ */
+import { useState } from "react";
+import { css } from "#primitives/css";
+import { Button } from "./button.js";
+import { useControllableState } from "./controllable-state.js";
+import { formatForDisplay, useAppHotkeyList, useCustomHotkeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, } from "./hotkeys.js";
+import { ShortcutHint } from "./keycap.js";
+import { Cluster, Eyebrow, MutedText } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Dialog } from "./overlays.js";
+import { SettingsPanel, SettingsRow } from "./settings.js";
+const groupStyle = css({ display: "grid", gap: "layout.controlGap", margin: "none" });
+const rowStyle = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    "& > dt": { color: "fg.primary", fontSize: "body" },
+    "& > dd": { display: "flex", gap: "layout.controlGap", margin: "none" },
+});
+/** Rows of `[name, hotkeys]` under each group, in the order they were registered. */
+function useShortcutGroups(fallbackGroup) {
+    const groups = new Map();
+    for (const registration of useHotkeyRegistrations()) {
+        const meta = registration.options.meta;
+        if (!meta?.name || registration.status === "disabled")
+            continue;
+        const group = meta.group ?? fallbackGroup;
+        const rows = groups.get(group) ?? new Map();
+        groups.set(group, rows);
+        const hotkeys = rows.get(meta.name) ?? new Map();
+        rows.set(meta.name, hotkeys);
+        hotkeys.set(formatForDisplay(registration.hotkey), registration.hotkey);
+    }
+    return groups;
+}
+export function KeyboardShortcuts({ hotkey = "Mod+/", open: ownOpen, onOpenChange, }) {
+    const { labels } = useCiridaeLocale();
+    const [open, setOpen] = useControllableState(ownOpen, false, onOpenChange);
+    useHotkey(hotkey, () => setOpen(!open), {
+        meta: { name: labels.keyboard.shortcuts },
+    });
+    const groups = useShortcutGroups(labels.keyboard.general);
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => setOpen(next), kind: "info", title: labels.keyboard.shortcuts, children: [...groups].map(([group, rows]) => (_jsxs("section", { className: groupStyle, children: [_jsx(Eyebrow, { render: _jsx("h3", {}), children: group }), _jsx("dl", { className: groupStyle, children: [...rows].map(([name, hotkeys]) => (_jsxs("div", { className: rowStyle, children: [_jsx("dt", { children: name }), _jsx("dd", { children: [...hotkeys].map(([key, rowHotkey]) => (_jsx(ShortcutHint, { hotkey: rowHotkey }, key))) })] }, name))) })] }, group))) }));
+}
+/** A row's hotkey, recorded anew on Change: a chord, or two steps such as G then I. */
+function ShortcutSettingRow({ appHotkey, isCustom }) {
+    const { labels } = useCiridaeLocale();
+    const { findConflicts, setCustomHotkey, resetCustomHotkey } = useCustomHotkeys();
+    const [problem, setProblem] = useState(null);
+    const recorder = useHotkeyRecorder({
+        maxSteps: 2,
+        // By the key's character, as the defaults are written, so conflicts compare like with like.
+        recordBy: "key",
+        validate: (hotkey) => {
+            const [conflict] = findConflicts(appHotkey.id, hotkey);
+            return conflict ? labels.keyboard.usedBy(conflict.meta?.name ?? conflict.id) : true;
+        },
+        onReject: (rejection) => setProblem(rejection.message),
+        onRecord: (hotkey) => {
+            setProblem(null);
+            setCustomHotkey(appHotkey.id, hotkey);
+        },
+    });
+    return (_jsx(SettingsRow, { label: appHotkey.meta?.name ?? appHotkey.id, children: _jsxs(Cluster, { gap: "8", children: [problem && _jsx(MutedText, { children: problem }), recorder.isRecording ? (_jsx(MutedText, { children: recorder.steps.length > 0
+                        ? formatForDisplay(recorder.steps)
+                        : labels.keyboard.pressKeys })) : appHotkey.hotkey ? (_jsx(ShortcutHint, { hotkey: appHotkey.hotkey })) : (_jsx(MutedText, { children: labels.keyboard.unassigned })), _jsx(Button, { variant: "secondary", onClick: () => {
+                        setProblem(null);
+                        if (recorder.isRecording)
+                            recorder.cancelRecording();
+                        else
+                            recorder.startRecording();
+                    }, children: recorder.isRecording ? labels.common.cancel : labels.keyboard.change }), isCustom && (_jsx(Button, { variant: "ghost", onClick: () => resetCustomHotkey(appHotkey.id), children: labels.keyboard.reset }))] }) }));
+}
+/** The app's rebindable hotkeys under their groups, each with Change and, once changed, Reset. */
+export function KeyboardShortcutSettings() {
+    const { labels } = useCiridaeLocale();
+    const groups = new Map();
+    for (const item of useAppHotkeyList()) {
+        const group = item.appHotkey.meta?.group ?? labels.keyboard.general;
+        groups.set(group, [...(groups.get(group) ?? []), item]);
+    }
+    return [...groups].map(([group, items]) => (_jsx(SettingsPanel, { title: group, children: items.map((item) => (_jsx(ShortcutSettingRow, { appHotkey: item.appHotkey, isCustom: item.isCustom }, item.appHotkey.id))) }, group)));
+}

package/dist/components/keycap.d.ts

@@ -0,0 +1,12 @@
+import { type Hotkey } from "./hotkeys.js";
+import type { ComponentProps } from "react";
+/** One key as a 24px cap, such as the `K` after a search field. */
+export declare function Keycap({ className, ...props }: ComponentProps<"kbd">): import("@types/react").JSX.Element;
+/**
+ * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
+ * elsewhere, and a sequence's steps are spaced ("G I"). `Keycap` is the boxed key for a place
+ * that wants it.
+ */
+export declare function ShortcutHint({ hotkey, className, ...props }: ComponentProps<"kbd"> & {
+    hotkey: Hotkey;
+}): import("@types/react").JSX.Element;

package/dist/components/keycap.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cx } from "#primitives/css";
+import { detectPlatform, formatForDisplay } from "./hotkeys.js";
+const keycap = css({
+    display: "grid",
+    placeItems: "center",
+    width: "control.shortcut",
+    height: "control.shortcut",
+    border: "1px solid token(colors.border.glass)",
+    borderRadius: "keycap",
+    background: "bg.hover",
+    color: "fg.muted",
+    fontSize: "body",
+    fontFamily: "sans",
+    lineHeight: "tight",
+});
+// A quiet inline hint, as a menu writes its shortcuts: no box, no extra height, and none on a
+// phone, which has no keyboard to press it on.
+const shortcut = css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: "0",
+    color: "fg.subtle",
+    fontFamily: "sans",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "tight",
+    lineHeight: "tight",
+    whiteSpace: "nowrap",
+    _phone: { display: "none" },
+});
+// "⌘K" on a Mac, as a menu writes it; "Ctrl+K" elsewhere.
+const separatorToken = detectPlatform() === "mac" ? "" : undefined;
+/** One key as a 24px cap, such as the `K` after a search field. */
+export function Keycap({ className, ...props }) {
+    return _jsx("kbd", { ...props, className: cx(keycap, className), "data-ciridae-ui": "" });
+}
+/**
+ * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
+ * elsewhere, and a sequence's steps are spaced ("G I"). `Keycap` is the boxed key for a place
+ * that wants it.
+ */
+export function ShortcutHint({ hotkey, className, ...props }) {
+    return (_jsx("kbd", { ...props, dir: "ltr", "aria-label": formatForDisplay(hotkey, { useSymbols: false }), className: cx(shortcut, className), "data-ciridae-ui": "", children: formatForDisplay(hotkey, { separatorToken }) }));
+}