@adecore/ui 0.14.0

package/dist/settings/ConfirmDialog.d.ts

@@ -0,0 +1,9 @@
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    title: string;
+    description: string;
+    confirmLabel: string;
+    onConfirm(): Promise<void>;
+}
+export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, onConfirm }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/settings/ConfirmDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromptDialog } from '../PromptDialog.js';
+/* One destructive step, asked before it happens, over whichever dialog it was opened from. */
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, onConfirm }) {
+    return (_jsx(PromptDialog, { open: open, nested: true, danger: true, title: title, description: description, confirmLabel: confirmLabel, onConfirm: async () => {
+            await onConfirm();
+            onOpenChange(false);
+        }, onOpenChange: onOpenChange }));
+}

package/dist/settings/DetailHeader.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode, Ref } from 'react';
+export interface DetailHeaderProps {
+    mark: ReactNode;
+    title: string;
+    subtitle: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function DetailHeader({ mark, title, subtitle, actions, className, ref }: DetailHeaderProps): import("react").JSX.Element;

package/dist/settings/DetailHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+/* The head of a detail: a mark, the name, a line under it, and the actions of the thing. */
+export function DetailHeader({ mark, title, subtitle, actions, className, ref }) {
+    return (_jsxs("header", { ref: ref, className: clsx('flex min-w-0 flex-wrap items-start gap-3', className), children: [mark, _jsxs("div", { className: "min-w-0 grow basis-48", children: [_jsx("h3", { className: "truncate text-lg font-semibold text-text", children: title }), _jsx("div", { className: "flex min-w-0 items-center gap-1.5 text-xs break-words text-text-muted", children: subtitle })] }), actions] }));
+}

package/dist/settings/MasterDetail.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode, Ref } from 'react';
+declare const LIST_WIDTHS: {
+    readonly 280: 'w-70';
+    readonly 320: 'w-80';
+    readonly 340: 'w-85';
+};
+export interface MasterDetailProps {
+    list: ReactNode;
+    listWidth: keyof typeof LIST_WIDTHS;
+    listLabel: string;
+    detail: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function MasterDetail({ list, listWidth, listLabel, detail, className, ref }: MasterDetailProps): import("react").JSX.Element;
+export interface MasterItemProps {
+    selected: boolean;
+    onSelect(): void;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function MasterItem({ selected, onSelect, children, className, ref }: MasterItemProps): import("react").JSX.Element;
+export {};

package/dist/settings/MasterDetail.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+const LIST_WIDTHS = { 280: 'w-70', 320: 'w-80', 340: 'w-85' };
+/*
+ * A list beside the detail of what is picked in it, for a pane of many things of one kind (accounts,
+ * devices, shortcut categories). Each side scrolls on its own, and the detail takes the rest of the
+ * width, like a single-column pane. Its section must be `split`, so the dialog hands the pane its whole height
+ * instead of a padded scrolling column.
+ */
+export function MasterDetail({ list, listWidth, listLabel, detail, className, ref }) {
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 grow border-t border-border max-[640px]:flex-col', className), children: [_jsx("nav", { "aria-label": listLabel, className: clsx('flex shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-border p-2 max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b', LIST_WIDTHS[listWidth]), children: list }), _jsx("div", { className: "min-h-0 min-w-0 grow overflow-y-auto", children: _jsx("div", { className: "flex min-w-0 flex-col gap-7 px-8 pt-6 pb-10 max-[960px]:px-4", children: detail }) })] }));
+}
+/* One row of the list. The picked one is lifted a shade. */
+export function MasterItem({ selected, onSelect, children, className, ref }) {
+    return (_jsx("button", { ref: ref, type: "button", "aria-current": selected ? 'true' : undefined, className: clsx('flex w-full min-w-0 shrink-0 items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-text focus-visible:-outline-offset-2', selected ? 'bg-text/5' : 'hover:bg-surface-hover', className), onClick: onSelect, children: children }));
+}

package/dist/settings/SettingsDialog.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentType, type ReactNode, type Ref } from 'react';
+import { type LucideIcon } from 'lucide-react';
+export interface SettingsSectionEntry {
+    id: string;
+    icon: LucideIcon;
+    label: string;
+    description: string;
+    pane: ComponentType;
+    split?: boolean;
+    hero?: ComponentType;
+}
+export interface SettingsGroupEntry {
+    label: string | null;
+    sections: readonly SettingsSectionEntry[];
+}
+export interface SettingsSearchResult {
+    section: string;
+    id: string | null;
+    label: string;
+}
+export interface SettingsSearch {
+    find(query: string): readonly SettingsSearchResult[];
+    hint?: string;
+    focusAt?: number;
+}
+export interface SettingsDialogProps {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    section: string;
+    onNavigate(next: {
+        section: string;
+        target?: string | null;
+    }): void;
+    groups: readonly SettingsGroupEntry[];
+    footer?: readonly SettingsSectionEntry[];
+    account?: {
+        section: SettingsSectionEntry;
+        tab: ReactNode;
+    };
+    search?: SettingsSearch;
+    target?: string | null;
+    onTargetShown?(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SettingsDialog({ open, onOpenChange, section, onNavigate, groups, footer, account, search, target, onTargetShown, className, ref }: SettingsDialogProps): import("react").JSX.Element;

package/dist/settings/SettingsDialog.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Tabs } from '@base-ui-components/react/tabs';
+import { Search, X } from 'lucide-react';
+import { CloseButton } from '../CloseButton.js';
+import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from '../dialog/parts.js';
+import { ErrorBoundary } from '../ErrorBoundary.js';
+import { Icon } from '../Icon.js';
+import { IconButton } from '../IconButton.js';
+import { Input } from '../Input.js';
+import { Select } from '../Select.js';
+import { SettingsTargetContext } from './target.js';
+/* How far a pane with a hero scrolls before the title bar over it is filled in. */
+const BAR_FILL_DISTANCE = 70;
+const NAV_ITEM = 'flex h-8 min-w-0 shrink-0 items-center gap-2.5 rounded-md px-2.5 text-sm focus-visible:-outline-offset-2 text-text-muted hover:bg-surface-hover hover:text-text data-active:bg-surface-active data-active:text-text';
+function NavTab({ section }) {
+    return (_jsxs(Tabs.Tab, { value: section.id, className: NAV_ITEM, children: [_jsx(Icon, { icon: section.icon, size: 16, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate", children: section.label })] }));
+}
+function SettingsNav({ groups, footer, account }) {
+    const { t } = useTranslation('ui');
+    return (_jsxs(Tabs.List, { "aria-label": t('settings.sections'), activateOnFocus: true, className: "flex min-h-0 grow flex-col", children: [_jsx("div", { className: "flex min-h-0 flex-col gap-3.5 overflow-y-auto", children: groups.map((group) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [group.label !== null && _jsx("span", { className: "px-2.5 pt-2.5 pb-1 text-xs font-medium text-text-faint", children: group.label }), group.sections.map((section) => (_jsx(NavTab, { section: section }, section.id)))] }, group.sections[0].id))) }), (footer?.length || account) && (_jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-3.5", children: [footer?.map((section) => (_jsx(NavTab, { section: section }, section.id))), account && _jsx("div", { className: "-mx-3 -mb-1 border-t border-border px-3 pt-3", children: account.tab })] }))] }));
+}
+function SearchField({ search, query, onQuery, onPick }) {
+    const { t } = useTranslation('ui');
+    const input = useRef(null);
+    const focusAt = search.focusAt ?? 0;
+    useEffect(() => {
+        if (focusAt > 0) {
+            input.current?.focus();
+            input.current?.select();
+        }
+    }, [focusAt]);
+    return (_jsxs("div", { className: "relative shrink-0", children: [_jsx(Icon, { icon: Search, size: 14, className: "pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-text-faint" }), _jsx(Input, { ref: input, className: "bg-surface-sunken pr-12 pl-8 text-xs", placeholder: t('settings.search.placeholder'), "aria-label": t('settings.search.placeholder'), value: query, spellCheck: false, autoComplete: "off", onChange: (event) => onQuery(event.target.value), onKeyDown: (event) => {
+                    // Escape clears the search first; the dialog only closes on an empty field.
+                    if (event.key === 'Escape' && query) {
+                        event.stopPropagation();
+                        onQuery('');
+                    }
+                    if (event.key === 'Enter') {
+                        const first = search.find(query)[0];
+                        if (first) {
+                            onPick(first);
+                        }
+                    }
+                } }), query ? (_jsx(IconButton, { icon: X, size: "sm", label: t('settings.search.clear'), tooltip: false, className: "absolute top-1/2 right-1 -translate-y-1/2", onClick: () => onQuery('') })) : (search.hint && (_jsx("span", { className: "pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-xs text-text-faint", "aria-hidden": true, children: search.hint })))] }));
+}
+/* In place of the navigation while a query is typed: the panes and rows that match, each a jump to where it lives. */
+function SearchResults({ search, query, labelOf, onPick }) {
+    const { t, i18n } = useTranslation('ui');
+    // The language is a dependency the linter cannot see; every result reads its words off i18next.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    const results = useMemo(() => search.find(query), [search.find, query, i18n.language]);
+    if (results.length === 0) {
+        return _jsx("p", { className: "px-2.5 py-1 text-xs break-words text-text-muted", children: t('settings.search.none', { query: query.trim() }) });
+    }
+    return (_jsx("ul", { className: "flex min-h-0 flex-col gap-0.5 overflow-y-auto", "aria-label": t('settings.search.results'), children: results.map((result) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "flex w-full min-w-0 flex-col rounded-md px-2.5 py-1.5 text-left hover:bg-surface-hover", onClick: () => onPick(result), children: [_jsx("span", { className: "truncate text-sm text-text", children: result.label }), _jsx("span", { className: "truncate text-xs text-text-faint", children: result.id === null ? t('settings.search.pane') : labelOf(result.section) })] }) }, `${result.section}:${result.id ?? ''}`))) }));
+}
+/* Sections on the left, one pane on the right. A pane mounts only while its section is open. */
+export function SettingsDialog({ open, onOpenChange, section, onNavigate, groups, footer = [], account, search, target = null, onTargetShown, className, ref }) {
+    const { t } = useTranslation('ui');
+    const [query, setQuery] = useState('');
+    const sections = [...groups.flatMap((group) => group.sections), ...footer, ...(account ? [account.section] : [])];
+    const meta = sections.find((entry) => entry.id === section) ?? sections[0];
+    const items = sections.map((entry) => ({ value: entry.id, label: entry.label }));
+    const searching = search !== undefined && query.trim() !== '';
+    const floating = meta.hero !== undefined && !meta.split;
+    const barFill = useRef(null);
+    // The latest callback behind a stable one, so a lit row's timer does not start over on every render.
+    const latestShown = useRef(onTargetShown);
+    useEffect(() => {
+        latestShown.current = onTargetShown;
+    });
+    const targetValue = useMemo(() => ({ target, shown: () => latestShown.current?.() }), [target]);
+    const labelOf = (id) => sections.find((entry) => entry.id === id)?.label ?? id;
+    const pick = (result) => onNavigate({ section: result.section, target: result.id });
+    return (_jsx(DialogRoot, { open: open, onOpenChange: (next) => {
+            onOpenChange(next);
+            if (!next) {
+                setQuery('');
+            }
+        }, children: _jsxs(DialogPopup, { ref: ref, className: clsx('flex h-[760px] w-[1200px]', className), children: [_jsxs(Tabs.Root, { value: meta.id, onValueChange: (value) => onNavigate({ section: value }), orientation: "vertical", className: "flex min-h-0 min-w-0 grow max-[640px]:flex-col", children: [_jsxs("div", { className: "flex w-58 shrink-0 flex-col gap-3.5 border-r border-border bg-surface bg-clip-padding px-3 py-4 max-[960px]:w-48 max-[640px]:w-auto max-[640px]:flex-row max-[640px]:items-center max-[640px]:border-r-0 max-[640px]:border-b", children: [_jsx(DialogTitle, { className: "px-2.5 pt-1 max-[640px]:pt-0", children: t('settings.title') }), _jsxs("div", { className: "contents max-[640px]:hidden", children: [search && _jsx(SearchField, { search: search, query: query, onQuery: setQuery, onPick: pick }), searching ? (_jsx(SearchResults, { search: search, query: query, labelOf: labelOf, onPick: pick })) : (_jsx(SettingsNav, { groups: groups, footer: footer, account: account }))] }), _jsx("div", { className: "min-w-0 grow min-[641px]:hidden", children: _jsx(Select, { value: meta.id, items: items, onValueChange: (value) => onNavigate({ section: value }), label: t('settings.section') }) })] }), _jsxs("div", { className: "relative flex min-h-0 min-w-0 grow flex-col", children: [_jsxs("div", { className: clsx('flex min-w-0 items-start gap-4 px-8 pt-5.5 pb-4.5 max-[960px]:px-4', floating && 'absolute inset-x-0 top-0 z-10'), children: [floating && (_jsx("div", { ref: barFill, className: "absolute inset-0 -z-10 border-b border-border bg-surface-raised opacity-0", "aria-hidden": true }, meta.id)), _jsxs("div", { className: "min-w-0 grow", children: [_jsx("h2", { className: "text-lg font-semibold text-text", children: meta.label }), _jsx("p", { className: "mt-0.5 text-xs break-words text-text-muted", children: meta.description })] }), _jsx(CloseButton, { label: t('settings.close'), dialog: true })] }), _jsx(SettingsTargetContext, { value: targetValue, children: sections.map((entry) => {
+                                        const Pane = entry.pane;
+                                        const Hero = entry.split ? undefined : entry.hero;
+                                        return (_jsx(Tabs.Panel, { value: entry.id, keepMounted: false, className: clsx('flex min-h-0 min-w-0 grow flex-col outline-none', 
+                                            // A split pane scrolls each of its sides itself.
+                                            !entry.split && 'gap-7 overflow-y-auto px-8 pb-10 max-[960px]:px-4', 
+                                            // Under a hero the bar's fill marks the edge; a fade would wipe the hero out behind the clear bar.
+                                            !entry.split && !Hero && 'scroll-fade-top pt-1'), onScroll: (event) => {
+                                                const top = event.currentTarget.scrollTop;
+                                                event.currentTarget.toggleAttribute('data-fade-start', top > 0);
+                                                barFill.current?.style.setProperty('opacity', String(Math.min(top / BAR_FILL_DISTANCE, 1)));
+                                            }, children: _jsx(ErrorBoundary, { label: t('settings.failed'), className: "min-h-0 grow", children: _jsxs(Suspense, { fallback: null, children: [Hero && (_jsx("div", { className: "-mx-8 shrink-0 max-[960px]:-mx-4", children: _jsx(Hero, {}) })), _jsx(Pane, {})] }) }) }, entry.id));
+                                    }) })] })] }), _jsx(DialogDescription, { className: "sr-only", children: meta.description })] }) }));
+}

package/dist/settings/SettingsRow.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode, type Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface SettingsRowProps {
+    label: ReactNode;
+    description?: ReactNode;
+    control?: ReactNode;
+    children?: ReactNode;
+    muted?: boolean;
+    leading?: ReactNode;
+    indent?: boolean;
+    searchId?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface TopIconProps {
+    icon: LucideIcon;
+    size?: number;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function TopIcon({ icon, size, className, ref }: TopIconProps): import("react").JSX.Element;
+export declare function SettingsRow({ label, description, control, children, muted, leading, indent, searchId, className, ref }: SettingsRowProps): import("react").JSX.Element;

package/dist/settings/SettingsRow.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon.js';
+import { mergeRefs } from '../merge-refs.js';
+import { useSettingsTarget } from './target.js';
+/* How long a row a search result jumped to stays lit. */
+const TARGET_MS = 1600;
+/* An icon beside text that may wrap: the box is one line of `text-sm` high, so the icon sits on the first line. */
+export function TopIcon({ icon, size = 16, className, ref }) {
+    return (_jsx("span", { ref: ref, className: "flex h-5.5 shrink-0 items-center", children: _jsx(Icon, { icon: icon, size: size, className: className }) }));
+}
+/*
+ * One setting: what it is on the left, the control on the right. Where the two do not fit side by
+ * side (a tablet, a narrow window) the control wraps under the label instead of widening the dialog.
+ */
+export function SettingsRow({ label, description, control, children, muted = false, leading, indent = false, searchId, className, ref }) {
+    const row = useRef(null);
+    const { target, shown } = useSettingsTarget();
+    const targeted = searchId !== undefined && target === searchId;
+    useEffect(() => {
+        if (!targeted) {
+            return;
+        }
+        row.current?.scrollIntoView({ block: 'center' });
+        const timer = window.setTimeout(shown, TARGET_MS);
+        return () => window.clearTimeout(timer);
+    }, [targeted, shown]);
+    return (_jsxs("div", { ref: mergeRefs(row, ref), "data-settings-row": searchId, className: clsx('flex min-w-0 flex-col gap-3 pr-4.5 transition-colors duration-500 first:rounded-t-xl last:rounded-b-xl', indent ? 'pl-14.5' : 'pl-4.5', description || children || leading ? 'py-3.5' : 'py-3', targeted && 'bg-accent-soft duration-0', className), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2", children: [_jsxs("div", { className: "flex min-w-0 grow basis-60 items-start gap-3", children: [leading, _jsxs("div", { className: "min-w-0 grow", children: [_jsx("div", { className: clsx('text-sm break-words', muted ? 'text-text-muted' : 'text-text'), children: label }), description && _jsx("div", { className: "mt-0.5 text-xs break-words text-text-muted", children: description })] })] }), control && _jsx("div", { className: "ml-auto flex max-w-full min-w-0 flex-wrap items-center justify-end gap-2", children: control })] }), children] }));
+}

package/dist/settings/SettingsSection.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface SettingsSectionProps {
+    title?: string;
+    description?: ReactNode;
+    icon?: LucideIcon;
+    tag?: ReactNode;
+    action?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function SettingsSection({ title, description, icon, tag, action, footer, children, className, ref }: SettingsSectionProps): import("react").JSX.Element;

package/dist/settings/SettingsSection.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Icon } from '../Icon.js';
+/* A titled group of rows in one card; rows divide themselves with a hairline. Without a title it is the card alone. */
+export function SettingsSection({ title, description, icon, tag, action, footer, children, className, ref }) {
+    const hasHeader = title !== undefined || description !== undefined || tag !== undefined || action !== undefined;
+    return (_jsxs("section", { ref: ref, className: clsx('flex min-w-0 flex-col gap-2.5', className), "aria-label": title, children: [hasHeader && (_jsxs("div", { className: "flex min-w-0 flex-wrap items-end gap-x-3 gap-y-2", children: [_jsxs("div", { className: "min-w-0 grow basis-48", children: [title !== undefined && (_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium text-text", children: [icon && _jsx(Icon, { icon: icon, size: 14, className: "shrink-0 text-text-faint" }), title] })), description !== undefined && _jsx("p", { className: "mt-0.5 text-xs break-words text-text-muted", children: description })] }), action, tag] })), _jsx("div", { className: "min-w-0 divide-y divide-border rounded-xl border border-border bg-surface bg-clip-padding", children: children }), footer && _jsx("p", { className: "text-xs text-text-faint", children: footer })] }));
+}

package/dist/settings/index.d.ts

@@ -0,0 +1,7 @@
+export { ConfirmDialog, type ConfirmDialogProps } from './ConfirmDialog.tsx';
+export { DetailHeader, type DetailHeaderProps } from './DetailHeader.tsx';
+export { MasterDetail, MasterItem, type MasterDetailProps, type MasterItemProps } from './MasterDetail.tsx';
+export { SettingsDialog, type SettingsDialogProps, type SettingsGroupEntry, type SettingsSearch, type SettingsSearchResult, type SettingsSectionEntry } from './SettingsDialog.tsx';
+export { SettingsRow, TopIcon, type SettingsRowProps, type TopIconProps } from './SettingsRow.tsx';
+export { SettingsSection, type SettingsSectionProps } from './SettingsSection.tsx';
+export { useSettingsTarget } from './target.ts';

package/dist/settings/index.js

@@ -0,0 +1,8 @@
+/* The settings dialog and the parts a pane is built from. */
+export { ConfirmDialog } from './ConfirmDialog.js';
+export { DetailHeader } from './DetailHeader.js';
+export { MasterDetail, MasterItem } from './MasterDetail.js';
+export { SettingsDialog } from './SettingsDialog.js';
+export { SettingsRow, TopIcon } from './SettingsRow.js';
+export { SettingsSection } from './SettingsSection.js';
+export { useSettingsTarget } from './target.js';

package/dist/settings/target.d.ts

@@ -0,0 +1,7 @@
+interface SettingsTarget {
+    target: string | null;
+    shown(): void;
+}
+export declare const SettingsTargetContext: import("react").Context<SettingsTarget>;
+export declare const useSettingsTarget: () => SettingsTarget;
+export {};

package/dist/settings/target.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const SettingsTargetContext = createContext({ target: null, shown: () => { } });
+export const useSettingsTarget = () => useContext(SettingsTargetContext);

package/dist/shortcut-hints.d.ts

@@ -0,0 +1,38 @@
+import type { Shortcut } from './shortcut.ts';
+export declare const HINT_DELAY_MS = 500;
+export interface HintTarget {
+    id: number;
+    shortcut: Shortcut;
+}
+export declare const registerShortcutHint: (element: Element, shortcut: Shortcut) => (() => void);
+export declare const shortcutHintTargets: () => ReadonlyMap<Element, HintTarget>;
+export type HoldKey = Pick<KeyboardEvent, 'key' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey' | 'repeat'>;
+export declare class ModifierHold {
+    private readonly apple;
+    private readonly onChange;
+    private timer;
+    private shown;
+    constructor(apple: boolean, onChange: (shown: boolean) => void);
+    keyDown(event: HoldKey): void;
+    keyUp(event: Pick<KeyboardEvent, 'key'>): void;
+    cancel(): void;
+    private modifierKey;
+    private otherModifierHeld;
+}
+export interface HintRect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface HintPlacement {
+    left?: number;
+    right?: number;
+    top: number;
+    translateX: '0' | '-50%';
+    translateY: '0' | '-100%';
+}
+export declare const placeHint: (rect: HintRect, viewport: {
+    width: number;
+    height: number;
+}) => HintPlacement;

package/dist/shortcut-hints.js

@@ -0,0 +1,81 @@
+/* How long the modifier has to be held on its own before every shortcut shows. */
+export const HINT_DELAY_MS = 500;
+const targets = new Map();
+let nextId = 0;
+/* Called by every `Tooltip` whose `kbd` is a real shortcut; a phrase about a key is no shortcut to print. */
+export const registerShortcutHint = (element, shortcut) => {
+    nextId += 1;
+    targets.set(element, { id: nextId, shortcut });
+    return () => {
+        targets.delete(element);
+    };
+};
+export const shortcutHintTargets = () => targets;
+/*
+ * Whether the hints are up: the platform's modifier (Cmd on macOS, Ctrl elsewhere) held on its own for
+ * `HINT_DELAY_MS`. Any other key, the modifier coming up or the caller cancelling takes them down, so
+ * a shortcut pressed in passing never flashes them.
+ */
+export class ModifierHold {
+    apple;
+    onChange;
+    timer = null;
+    shown = false;
+    constructor(apple, onChange) {
+        this.apple = apple;
+        this.onChange = onChange;
+    }
+    keyDown(event) {
+        // A repeat is the key still held; only a fresh press starts the wait.
+        if (event.repeat && event.key === this.modifierKey()) {
+            return;
+        }
+        this.cancel();
+        if (event.key === this.modifierKey() && !this.otherModifierHeld(event)) {
+            this.timer = setTimeout(() => {
+                this.timer = null;
+                this.shown = true;
+                this.onChange(true);
+            }, HINT_DELAY_MS);
+        }
+    }
+    keyUp(event) {
+        if (event.key === this.modifierKey()) {
+            this.cancel();
+        }
+    }
+    cancel() {
+        if (this.timer !== null) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        if (this.shown) {
+            this.shown = false;
+            this.onChange(false);
+        }
+    }
+    modifierKey() {
+        return this.apple ? 'Meta' : 'Control';
+    }
+    otherModifierHeld(event) {
+        return event.altKey || event.shiftKey || (this.apple ? event.ctrlKey : event.metaKey);
+    }
+}
+const HINT_GAP_PX = 2;
+/* Room a hint needs to be centered under its button; nearer a window edge it lines up with that edge instead. */
+const EDGE_ROOM_PX = 48;
+const HINT_HEIGHT_PX = 24;
+/* Under the button, centered, and above it where the window ends first. */
+export const placeHint = (rect, viewport) => {
+    const below = rect.bottom + HINT_GAP_PX + HINT_HEIGHT_PX <= viewport.height;
+    const top = Math.round(below ? rect.bottom + HINT_GAP_PX : rect.top - HINT_GAP_PX);
+    const translateY = below ? '0' : '-100%';
+    const center = (rect.left + rect.right) / 2;
+    if (center < EDGE_ROOM_PX) {
+        return { left: Math.round(rect.left), top, translateX: '0', translateY };
+    }
+    if (center > viewport.width - EDGE_ROOM_PX) {
+        return { right: Math.round(viewport.width - rect.right), top, translateX: '0', translateY };
+    }
+    return { left: Math.round(center), top, translateX: '-50%', translateY };
+};

package/dist/shortcut.d.ts

@@ -0,0 +1,32 @@
+export interface Shortcut {
+    mod: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean;
+    key: string;
+}
+export type KeyLike = Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey' | 'key' | 'code'>;
+/**
+ * Parses `Mod+Shift+K`. Throws on a word it does not know or on two keys, so a typo in a table fails
+ * the moment the module loads instead of leaving a shortcut that never fires.
+ */
+export declare const shortcut: (text: string) => Shortcut;
+export declare const matchesShortcut: (target: Shortcut, event: KeyLike, apple: boolean) => boolean;
+export declare const shortcutParts: (target: Shortcut, apple: boolean) => string[];
+export declare const formatShortcut: (target: Shortcut, apple: boolean) => string;
+export declare const EDIT_SHORTCUTS: {
+    readonly copy: Shortcut;
+    readonly cut: Shortcut;
+    readonly paste: Shortcut;
+    readonly selectAll: Shortcut;
+};
+export declare const KEY_SHORTCUTS: {
+    readonly enter: Shortcut;
+    readonly modEnter: Shortcut;
+    readonly backspace: Shortcut;
+    readonly escape: Shortcut;
+    readonly shift: Shortcut;
+    readonly rename: Shortcut;
+};
+export declare const isModHeld: (event: Pick<KeyLike, 'metaKey' | 'ctrlKey'>, apple: boolean) => boolean;

package/dist/shortcut.js

@@ -0,0 +1,137 @@
+/* Matched on the physical key: Shift turns `[` into `{` and Option turns most keys into a dead key. */
+const PUNCTUATION_CODES = {
+    ',': 'Comma',
+    '.': 'Period',
+    '/': 'Slash',
+    ';': 'Semicolon',
+    "'": 'Quote',
+    '`': 'Backquote',
+    '\\': 'Backslash',
+    '[': 'BracketLeft',
+    ']': 'BracketRight'
+};
+/* Matched on the character, because `+` sits on a different key per layout. */
+const CHARACTER_KEYS = new Set(['+', '-', '=']);
+const NAMED_KEYS = new Set(['Enter', 'Escape', 'Backspace', 'Delete', 'Tab', 'Space', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
+const FUNCTION_KEY = /^F([1-9]|1[0-2])$/;
+const MODIFIER_WORDS = ['Mod', 'Ctrl', 'Meta', 'Alt', 'Shift'];
+const isKey = (word) => /^[A-Za-z0-9]$/.test(word) || word in PUNCTUATION_CODES || CHARACTER_KEYS.has(word) || NAMED_KEYS.has(word) || FUNCTION_KEY.test(word);
+/**
+ * Parses `Mod+Shift+K`. Throws on a word it does not know or on two keys, so a typo in a table fails
+ * the moment the module loads instead of leaving a shortcut that never fires.
+ */
+export const shortcut = (text) => {
+    // A trailing `++` is the plus key itself, which a plain split would read as two empty words.
+    const words = text === '+' ? ['+'] : text.endsWith('++') ? [...text.slice(0, -2).split('+'), '+'] : text.split('+');
+    const result = { mod: false, ctrl: false, meta: false, alt: false, shift: false, key: '' };
+    for (const word of words) {
+        const modifier = MODIFIER_WORDS.find((candidate) => candidate === word);
+        if (modifier) {
+            result[modifier === 'Mod' ? 'mod' : modifier === 'Ctrl' ? 'ctrl' : modifier === 'Meta' ? 'meta' : modifier === 'Alt' ? 'alt' : 'shift'] = true;
+            continue;
+        }
+        if (!isKey(word)) {
+            throw new Error(`Unknown key "${word}" in shortcut "${text}"`);
+        }
+        if (result.key !== '') {
+            throw new Error(`Shortcut "${text}" names two keys`);
+        }
+        result.key = word.length === 1 ? word.toUpperCase() : word;
+    }
+    return result;
+};
+// Letters and digits match on `code`: with Shift held `key` says `!` for 1, and Option's dead keys change it on macOS.
+const matchesKey = (key, event) => {
+    if (/^[A-Z]$/.test(key)) {
+        return event.code === `Key${key}`;
+    }
+    if (/^[0-9]$/.test(key)) {
+        return event.code === `Digit${key}`;
+    }
+    const code = PUNCTUATION_CODES[key];
+    if (code) {
+        return event.code === code;
+    }
+    if (key === 'Space') {
+        return event.code === 'Space';
+    }
+    return event.key === key;
+};
+/* Strict: every modifier the shortcut does not name has to be up, so Ctrl+K on macOS is not Cmd+K. */
+export const matchesShortcut = (target, event, apple) => {
+    const meta = target.meta || (target.mod && apple);
+    const ctrl = target.ctrl || (target.mod && !apple);
+    if (target.key === '' || event.metaKey !== meta || event.ctrlKey !== ctrl || event.altKey !== target.alt || event.shiftKey !== target.shift) {
+        return false;
+    }
+    return matchesKey(target.key, event);
+};
+const KEY_LABELS = {
+    Enter: { apple: '↩', other: 'Enter' },
+    Backspace: { apple: '⌫', other: 'Backspace' },
+    Delete: { apple: '⌦', other: 'Delete' },
+    Escape: { apple: 'Esc', other: 'Esc' },
+    Tab: { apple: '⇥', other: 'Tab' },
+    Space: { apple: 'Space', other: 'Space' },
+    ArrowLeft: { apple: '←', other: '←' },
+    ArrowRight: { apple: '→', other: '→' },
+    ArrowUp: { apple: '↑', other: '↑' },
+    ArrowDown: { apple: '↓', other: '↓' }
+};
+/* The modifiers and the key as separate caps, in the order the platform prints them. */
+export const shortcutParts = (target, apple) => {
+    const parts = [];
+    if (apple) {
+        if (target.ctrl) {
+            parts.push('⌃');
+        }
+        if (target.alt) {
+            parts.push('⌥');
+        }
+        if (target.shift) {
+            parts.push('⇧');
+        }
+        if (target.meta || target.mod) {
+            parts.push('⌘');
+        }
+    }
+    else {
+        if (target.ctrl || target.mod) {
+            parts.push('Ctrl');
+        }
+        if (target.alt) {
+            parts.push('Alt');
+        }
+        if (target.shift) {
+            parts.push('Shift');
+        }
+        if (target.meta) {
+            parts.push('Meta');
+        }
+    }
+    if (target.key !== '') {
+        const label = KEY_LABELS[target.key];
+        parts.push(label ? label[apple ? 'apple' : 'other'] : target.key);
+    }
+    return parts;
+};
+/* `⌥⇧⌘K` on macOS, `Ctrl+Alt+Shift+K` elsewhere. */
+export const formatShortcut = (target, apple) => shortcutParts(target, apple).join(apple ? '' : '+');
+/* The browser's own editing shortcuts, which the app only ever prints in a menu. */
+export const EDIT_SHORTCUTS = {
+    copy: /* @__PURE__ */ shortcut('Mod+C'),
+    cut: /* @__PURE__ */ shortcut('Mod+X'),
+    paste: /* @__PURE__ */ shortcut('Mod+V'),
+    selectAll: /* @__PURE__ */ shortcut('Mod+A')
+};
+/* Keys that are not a shortcut of their own but are printed as one in a hint. */
+export const KEY_SHORTCUTS = {
+    enter: /* @__PURE__ */ shortcut('Enter'),
+    modEnter: /* @__PURE__ */ shortcut('Mod+Enter'),
+    backspace: /* @__PURE__ */ shortcut('Backspace'),
+    escape: /* @__PURE__ */ shortcut('Escape'),
+    shift: /* @__PURE__ */ shortcut('Shift'),
+    rename: /* @__PURE__ */ shortcut('F2')
+};
+/* Whether the platform's own modifier is down during a pointer gesture: Cmd on macOS, Ctrl elsewhere. */
+export const isModHeld = (event, apple) => (apple ? event.metaKey : event.ctrlKey);

package/dist/testing/dedupe.d.ts

@@ -0,0 +1 @@
+export {};