@adecore/ui 0.14.0

package/dist/Toasts.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { Icon } from './Icon.js';
+import { IconButton } from './IconButton.js';
+import { Kbd } from './Kbd.js';
+import { Spinner } from './Spinner.js';
+import { Surface } from './Surface.js';
+import { elapsedOf } from './toast-store.js';
+const ICON = {
+    success: CircleCheck,
+    error: CircleAlert,
+    deleted: Trash
+};
+const TONE = {
+    progress: 'text-text-muted',
+    success: 'text-status-idle',
+    error: 'text-status-error',
+    deleted: 'text-text-muted'
+};
+/* The box is as tall as the title's own line, so what sits beside the title centers on that line. */
+const TITLE_LINE = 'flex h-(--text-sm--line-height) shrink-0 items-center';
+/*
+ * How long the offer in a toast still stands, drawn from the timer that takes the toast away: the
+ * ring starts as far along as that timer already is, so both end together. With motion off it stays full.
+ */
+function TimerRing({ deadline, onDismiss }) {
+    const { t } = useTranslation('ui');
+    const lifetime = deadline.end - deadline.start;
+    const [elapsed] = useState(() => elapsedOf(deadline, Date.now()));
+    return (_jsxs(IconButton, { size: "xs", label: t('action.dismiss'), className: "group/ring relative -my-px", onClick: onDismiss, children: [_jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", className: "-rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: 8, cy: 8, r: 6, fill: "none", strokeWidth: 2, className: "stroke-border" }), _jsx("circle", { cx: 8, cy: 8, r: 6, fill: "none", strokeWidth: 2, pathLength: 1, strokeDasharray: 1, className: "toast-timer-arc stroke-current", style: { animationDuration: `${lifetime}ms`, animationDelay: `${-elapsed}ms` } })] }), _jsx(Icon, { icon: X, size: 8, className: "absolute opacity-0 group-hover/ring:opacity-100 group-focus-visible/ring:opacity-100" })] }));
+}
+function ActionButton({ action }) {
+    return (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("button", { className: "rounded-sm text-sm font-semibold text-text hover:text-text-muted", onClick: action.run, children: action.label }), action.shortcut && _jsx(Kbd, { shortcut: action.shortcut, className: "font-sans text-xs text-text-faint" })] }));
+}
+function ToastCard({ toast, footer, onDismiss }) {
+    const { t } = useTranslation('ui');
+    // A toast that goes by itself keeps its close button out of sight until the pointer or the keyboard is on it.
+    const leaves = toast.kind === 'deleted' || (toast.kind === 'success' && toast.persist !== true);
+    const actions = [...(toast.action === undefined ? [] : [toast.action]), ...(toast.actions ?? [])];
+    // An offer that runs out shows how long it has left instead.
+    const countdown = actions.length > 0 ? toast.deadline : undefined;
+    return (_jsxs(Surface, { className: "group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3", children: [_jsx("span", { className: clsx(TITLE_LINE, 'w-4 justify-center'), children: toast.kind === 'progress' ? (_jsx(Spinner, { size: 16, className: TONE.progress })) : (_jsx(Icon, { icon: ICON[toast.kind], size: 16, className: TONE[toast.kind] })) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-1", children: [_jsx("span", { className: "text-sm text-text", children: toast.title }), toast.description !== undefined && toast.description !== '' && (_jsx("span", { className: "text-xs break-words text-pretty text-text-muted", children: toast.description })), actions.length > 1 && (_jsx("span", { className: "mt-1 flex flex-wrap items-center gap-x-4 gap-y-1", children: actions.map((action) => (_jsx(ActionButton, { action: action }, action.label))) })), footer?.(toast)] }), actions.length === 1 && (_jsx("span", { className: TITLE_LINE, children: _jsx(ActionButton, { action: actions[0] }) })), countdown !== undefined ? (_jsx(TimerRing, { deadline: countdown, onDismiss: onDismiss }, countdown.start)) : (_jsx(IconButton, { icon: X, size: "xs", label: t('action.dismiss'), className: clsx('-my-px', leaves && 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'), onClick: onDismiss }))] }));
+}
+/*
+ * Bottom right, over everything: what an action is doing while it runs and how it went when it is
+ * over, and a deletion that can still be taken back. A success takes itself away after four seconds,
+ * a deletion after eight, and a failure waits to be read.
+ */
+export function Toasts({ store, footer, className, ref }) {
+    const toasts = store((state) => state.toasts);
+    if (toasts.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { ref: ref, className: clsx('fixed right-4 bottom-4 z-(--z-popup) flex w-90 max-w-[calc(100vw-32px)] flex-col gap-2', className), role: "status", "aria-live": "polite", children: toasts.map((toast) => (_jsx(ToastCard, { toast: toast, footer: footer, onDismiss: () => store.getState().dismiss(toast.id) }, toast.id))) }));
+}

package/dist/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { Shortcut } from './shortcut.ts';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export declare function TooltipProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface TooltipProps {
+    label: ReactNode;
+    kbd?: Shortcut | string;
+    side?: TooltipSide;
+    sideOffset?: number;
+    name?: boolean;
+    disabled?: boolean;
+    children: ReactElement<Record<string, unknown>>;
+}
+export declare function Tooltip({ label, kbd, side, sideOffset, name, disabled, children }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
+import { Kbd } from './Kbd.js';
+import { registerShortcutHint } from './shortcut-hints.js';
+/* One provider per app. Tooltips share a delay, so moving along a row of buttons feels instant. `UIProvider` mounts it. */
+export function TooltipProvider({ children }) {
+    return (_jsx(BaseTooltip.Provider, { delay: 150, closeDelay: 0, children: children }));
+}
+/* A hint on hover and on keyboard focus. Every hint in an app is one of these, never a `title`. */
+export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }) {
+    // Held Cmd (Ctrl off macOS) prints this shortcut under the trigger (`ShortcutHints`).
+    const hintRef = useCallback((element) => {
+        if (element === null || kbd === undefined || typeof kbd === 'string') {
+            return undefined;
+        }
+        return registerShortcutHint(element, kbd);
+    }, [kbd]);
+    return (_jsxs(BaseTooltip.Root, { disabled: disabled, children: [_jsx(BaseTooltip.Trigger, { ref: hintRef, render: children, "aria-label": name && typeof label === 'string' ? label : undefined }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: sideOffset, className: "tooltip-positioner", children: _jsx(BaseTooltip.Popup, { className: "tooltip-popup", children: _jsxs(BaseTooltip.Viewport, { className: "max-w-72 px-[9px] py-[5px] text-pretty", children: [_jsx("span", { className: "wrap-anywhere", children: label }), kbd !== undefined &&
+                                    (typeof kbd === 'string' ? (_jsx(Kbd, { variant: "inline", className: "ml-2", children: kbd })) : (_jsx(Kbd, { shortcut: kbd, variant: "inline", className: "ml-2" })))] }) }) }) })] }));
+}

package/dist/UIProvider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { i18n as I18n } from 'i18next';
+import { type FormatSource } from './format/locale.ts';
+export interface UIProviderProps {
+    i18n: I18n;
+    formatSource?: FormatSource;
+    children: ReactNode;
+}
+export declare function UIProvider({ i18n, formatSource, children }: UIProviderProps): import("react").JSX.Element;

package/dist/UIProvider.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { setFormatSource } from './format/locale.js';
+import { addUiResources } from './locales.js';
+import { startInputModality } from './modality.js';
+import { TooltipProvider } from './Tooltip.js';
+/*
+ * Everything the library needs from an app, once, around the whole tree: its words in the app's
+ * i18next, the source of the formatters, the shared tooltip delay and the note of which input device
+ * is in use. Mount it above the first component of the library.
+ */
+export function UIProvider({ i18n, formatSource, children }) {
+    const [handed, setHanded] = useState({ i18n: null, source: undefined });
+    // In render and not in an effect, so the first child already reads the words and the region.
+    // Both calls only store what they are handed, so a render React throws away leaves nothing wrong behind.
+    if (handed.i18n !== i18n || handed.source !== formatSource) {
+        addUiResources(i18n);
+        if (formatSource !== undefined) {
+            setFormatSource(formatSource);
+        }
+        setHanded({ i18n, source: formatSource });
+    }
+    useLayoutEffect(startInputModality, []);
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(TooltipProvider, { children: children }) }));
+}

package/dist/Waveform.d.ts

@@ -0,0 +1,16 @@
+import { type KeyboardEvent, type Ref } from 'react';
+export interface WaveformProps {
+    levels: readonly number[];
+    duration: number;
+    range?: readonly [from: number, to: number];
+    value?: number;
+    onValueChange?(value: number): void;
+    onValueCommitted?(value: number): void;
+    step?: number;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+    marks?: readonly number[];
+    label: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Waveform({ levels, duration, range, value, onValueChange, onValueCommitted, step, onKeyDown, marks, label, className, ref }: WaveformProps): import("react").JSX.Element;

package/dist/Waveform.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { formatClockDuration } from './format/duration.js';
+import { mergeRefs } from './merge-refs.js';
+import { useMeasuredWidth } from './useMeasuredWidth.js';
+/* About one bar per 3px, each 2px wide; a bar sits at its own time, so it lines up with the marks and the playhead. */
+const BAR_PITCH = 3;
+const BAR_WIDTH = 2;
+/* The height of a silent bar, so silence still reads as a line. */
+const SILENCE = 0.04;
+/* Page Up and Page Down move this many steps, as a Base UI slider does. */
+const PAGE_STEPS = 10;
+/* The loudest sample under each bar, or null for a bar past either end of the audio. */
+const barsOf = (levels, duration, from, to, count) => {
+    if (count <= 0 || levels.length === 0 || duration <= 0 || to <= from) {
+        return [];
+    }
+    const perSecond = levels.length / duration;
+    return Array.from({ length: count }, (_, i) => {
+        const start = from + ((to - from) * i) / count;
+        const end = from + ((to - from) * (i + 1)) / count;
+        if (end <= 0 || start >= duration) {
+            return null;
+        }
+        const first = Math.max(0, Math.floor(start * perSecond));
+        const last = Math.min(levels.length - 1, Math.max(first, Math.ceil(end * perSecond) - 1));
+        let level = 0;
+        for (let index = first; index <= last; index++) {
+            level = Math.max(level, levels[index] ?? 0);
+        }
+        return Math.min(1, Math.max(SILENCE, level));
+    });
+};
+/* The loudness of a piece of audio over time, played up to the playhead, where a press or a drag seeks. */
+export function Waveform({ levels, duration, range, value, onValueChange, onValueCommitted, step = 1, onKeyDown, marks = [], label, className, ref }) {
+    const { t } = useTranslation('ui');
+    const [measure, width] = useMeasuredWidth();
+    const rootRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
+    const dragged = useRef(0);
+    const [from, to] = range ?? [0, duration];
+    const span = to - from;
+    const count = Math.floor(width / BAR_PITCH);
+    const bars = useMemo(() => barsOf(levels, duration, from, to, count), [levels, duration, from, to, count]);
+    const positionOf = (time) => (span > 0 ? (time - from) / span : 0);
+    const inView = (time) => positionOf(time) >= 0 && positionOf(time) <= 1;
+    const clamp = (time) => Math.min(duration, Math.max(0, time));
+    const seekAt = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (rect.width > 0) {
+            dragged.current = clamp(from + ((e.clientX - rect.left) / rect.width) * span);
+            onValueChange?.(dragged.current);
+        }
+    };
+    const letGo = (e) => {
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+            onValueCommitted?.(dragged.current);
+        }
+    };
+    const moveByKey = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) {
+            return;
+        }
+        const at = value ?? 0;
+        const moves = {
+            ArrowLeft: at - step,
+            ArrowDown: at - step,
+            ArrowRight: at + step,
+            ArrowUp: at + step,
+            PageDown: at - step * PAGE_STEPS,
+            PageUp: at + step * PAGE_STEPS,
+            Home: 0,
+            End: duration
+        };
+        const next = moves[e.key];
+        if (next === undefined) {
+            return;
+        }
+        // The slider owns these keys; a transport listening higher up would move the playhead a second time.
+        e.preventDefault();
+        e.stopPropagation();
+        onValueChange?.(clamp(next));
+        onValueCommitted?.(clamp(next));
+    };
+    const slider = onValueChange === undefined
+        ? { role: 'img' }
+        : {
+            role: 'slider',
+            tabIndex: 0,
+            'aria-valuemin': 0,
+            'aria-valuemax': duration,
+            'aria-valuenow': value ?? 0,
+            'aria-valuetext': t('waveform.position', {
+                time: formatClockDuration((value ?? 0) * 1000),
+                duration: formatClockDuration(duration * 1000)
+            }),
+            onPointerDown: (e) => {
+                e.currentTarget.setPointerCapture(e.pointerId);
+                seekAt(e);
+            },
+            onPointerMove: (e) => {
+                if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+                    seekAt(e);
+                }
+            },
+            onPointerUp: letGo,
+            onPointerCancel: letGo,
+            onKeyDown: moveByKey
+        };
+    return (_jsxs("div", { ref: rootRef, "aria-label": label, ...slider, className: clsx('relative select-none', onValueChange !== undefined && 'focus-ring cursor-ew-resize touch-none', className), children: [_jsxs("svg", { className: "absolute inset-0 size-full", viewBox: `0 0 ${Math.max(1, width)} 100`, preserveAspectRatio: "none", "aria-hidden": true, children: [bars.map((level, i) => {
+                        if (level === null) {
+                            return null;
+                        }
+                        const center = from + (span * (i + 0.5)) / count;
+                        return (_jsx("rect", { x: Math.round((i * width) / count), y: (100 - level * 100) / 2, width: BAR_WIDTH, height: level * 100, className: value !== undefined && center <= value ? 'fill-accent' : 'fill-text-faint' }, i));
+                    }), marks.filter(inView).map((mark) => {
+                        const x = Math.round(positionOf(mark) * width) + 0.5;
+                        return (_jsx("line", { x1: x, x2: x, y1: 0, y2: 100, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-accent opacity-60" }, mark));
+                    })] }), value !== undefined && inView(value) && (_jsx("span", { className: "pointer-events-none absolute inset-y-0 w-px bg-accent", style: { left: `${positionOf(value) * 100}%` } }))] }));
+}

package/dist/Wipe.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type Ref } from 'react';
+export interface WipeProps {
+    value: number;
+    onValueChange(value: number): void;
+    before: ReactNode;
+    after: ReactNode;
+    label: string;
+    handle?: 'knob' | 'line';
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Wipe({ value: split, onValueChange: onSplit, before, after, label, handle, className, ref }: WipeProps): import("react").JSX.Element;

package/dist/Wipe.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import clsx from 'clsx';
+import { ChevronsLeftRight } from 'lucide-react';
+import { Icon } from './Icon.js';
+import { formatPercent } from './format/number.js';
+import { mergeRefs } from './merge-refs.js';
+import { splitAt, splitForKey } from './wipe-split.js';
+/*
+ * Two versions of one picture in one frame: `before` left of the split and `after` right of it, with a
+ * handle between them a person drags or moves with the arrow keys. It fills the positioned element it
+ * sits in. The handle is a line with a round knob on it, or the plain line, which is dragged anywhere
+ * along its height.
+ */
+export function Wipe({ value: split, onValueChange: onSplit, before, after, label, handle = 'knob', className, ref }) {
+    const frame = useRef(null);
+    const percent = `${split * 100}%`;
+    function moveTo(clientX) {
+        const rect = frame.current?.getBoundingClientRect();
+        const next = rect ? splitAt(clientX, rect) : null;
+        if (next !== null) {
+            onSplit(next);
+        }
+    }
+    function onPointerDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        moveTo(e.clientX);
+    }
+    function onPointerMove(e) {
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            moveTo(e.clientX);
+        }
+    }
+    function onKeyDown(e) {
+        const next = splitForKey(split, e.key);
+        if (next === null) {
+            return;
+        }
+        // Only while the handle has the focus, so a canvas or a timeline around it never hears these keys.
+        e.preventDefault();
+        e.stopPropagation();
+        onSplit(next);
+    }
+    return (_jsxs("div", { ref: mergeRefs(frame, ref), className: clsx('absolute inset-0', className), children: [_jsx("div", { className: "absolute inset-0", children: before }), _jsx("div", { className: "absolute inset-0", style: { clipPath: `inset(0 0 0 ${percent})` }, children: after }), _jsxs("div", { role: "slider", tabIndex: 0, "aria-label": label, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(split * 100), "aria-valuetext": formatPercent(Math.round(split * 100)), className: clsx('group absolute inset-y-0 z-10 -ml-3.5 w-7 cursor-ew-resize touch-none', handle === 'line' && 'outline-none'), style: { left: percent }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onKeyDown: onKeyDown, children: [_jsx("span", { className: clsx('absolute inset-y-0 left-3.25 w-0.5 bg-media-handle shadow-media-handle-edge', handle === 'line' && 'group-focus-visible:bg-accent') }), handle === 'knob' && (_jsx("span", { className: "absolute top-1/2 left-3.5 grid h-7 w-7 -translate-1/2 place-items-center rounded-full bg-media-handle text-media-handle-text shadow-media-handle", children: _jsx(Icon, { icon: ChevronsLeftRight, size: 14 }) }))] })] }));
+}

package/dist/ZoomControls.d.ts

@@ -0,0 +1,30 @@
+import type { Ref } from 'react';
+import type { Shortcut } from './shortcut.ts';
+export interface ZoomSelection {
+    label: string;
+    shortcut?: Shortcut;
+    enabled: boolean;
+    onZoom(): void;
+}
+export interface ZoomLabels {
+    out?: string;
+    in?: string;
+    presets?: string;
+    fit?: string;
+    fitEverything?: string;
+}
+export interface ZoomControlsProps {
+    zoom: number;
+    onZoomChange(zoom: number): void;
+    onFitAll(): void;
+    presets?: readonly number[];
+    labels?: ZoomLabels;
+    shortcuts?: {
+        zoomReset?: Shortcut;
+        fitAll?: Shortcut;
+    };
+    selection?: ZoomSelection;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ZoomControls({ zoom, onZoomChange, onFitAll, presets, labels, shortcuts, selection, className, ref }: ZoomControlsProps): import("react").JSX.Element;

package/dist/ZoomControls.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Maximize, Minus, Plus, Scan } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ButtonGroup } from './ButtonGroup.js';
+import { Icon } from './Icon.js';
+import { IconButton } from './IconButton.js';
+import { Kbd } from './Kbd.js';
+import { MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from './menu/parts.js';
+import { Tooltip } from './Tooltip.js';
+import { activeZoomPreset, steppedZoom, ZOOM_PRESETS } from './zoom.js';
+/* The zoom group of a dock: out, the readout with its presets, in, and fit everything. */
+export function ZoomControls({ zoom, onZoomChange, onFitAll, presets = ZOOM_PRESETS, labels = {}, shortcuts = {}, selection, className, ref }) {
+    const { t } = useTranslation('ui');
+    const preset = activeZoomPreset(zoom, presets);
+    return (_jsxs(ButtonGroup, { ref: ref, className: className, children: [_jsx(IconButton, { icon: Minus, label: labels.out ?? t('zoom.out'), onClick: () => onZoomChange(steppedZoom(zoom, -10)) }), _jsxs(MenuRoot, { children: [_jsx(Tooltip, { label: labels.presets ?? t('zoom.presets'), children: _jsxs(MenuTrigger, { className: "h-8 min-w-14 rounded-lg px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text", children: [Math.round(zoom * 100), "%"] }) }), _jsxs(MenuPopup, { side: "top", sideOffset: 10, align: "center", className: "min-w-44", children: [_jsx(MenuRadioGroup, { value: preset, onValueChange: (value) => onZoomChange(value / 100), children: presets.map((percent) => (_jsxs(MenuRadioItem, { value: percent, children: [_jsxs("span", { className: "tabular-nums", children: [percent, "%"] }), percent === 100 && shortcuts.zoomReset && _jsx(Kbd, { shortcut: shortcuts.zoomReset })] }, percent))) }), _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onClick: onFitAll, children: [_jsx("span", { className: "grid h-4 w-4 place-items-center", children: _jsx(Icon, { icon: Maximize, size: 14 }) }), labels.fit ?? t('zoom.fit'), " ", shortcuts.fitAll && _jsx(Kbd, { shortcut: shortcuts.fitAll })] }), selection && (_jsxs(MenuItem, { disabled: !selection.enabled, onClick: selection.onZoom, children: [_jsx("span", { className: "grid h-4 w-4 place-items-center", children: _jsx(Icon, { icon: Scan, size: 14 }) }), selection.label, " ", selection.shortcut && _jsx(Kbd, { shortcut: selection.shortcut })] }))] })] }), _jsx(IconButton, { icon: Plus, label: labels.in ?? t('zoom.in'), onClick: () => onZoomChange(steppedZoom(zoom, 10)) }), _jsx(IconButton, { icon: Maximize, label: labels.fitEverything ?? t('zoom.fitEverything'), kbd: shortcuts.fitAll, onClick: onFitAll })] }));
+}

package/dist/class-name.d.ts

@@ -0,0 +1,2 @@
+export type StateClassName<State> = string | ((state: State) => string | undefined) | undefined;
+export declare const withClass: <State>(own: string, className: StateClassName<State>) => string | ((state: State) => string);

package/dist/class-name.js

@@ -0,0 +1,3 @@
+import clsx from 'clsx';
+/* Puts the library's own classes before a caller's, whichever form the caller's takes. */
+export const withClass = (own, className) => typeof className === 'function' ? (state) => clsx(own, className(state)) : clsx(own, className);

package/dist/clipboard.d.ts

@@ -0,0 +1,2 @@
+export declare const copyText: (text: string) => void;
+export declare const readClipboardText: () => Promise<string>;

package/dist/clipboard.js

@@ -0,0 +1,16 @@
+/*
+ * The clipboard, as the app uses it. A browser hands text over only to a document that is focused
+ * and allowed, and there is nothing a person can do about a refusal, so both sides stay quiet.
+ */
+export const copyText = (text) => {
+    void navigator.clipboard?.writeText(text).catch(() => undefined);
+};
+/* What is on the clipboard, or nothing at all when the browser will not say. */
+export const readClipboardText = async () => {
+    try {
+        return (await navigator.clipboard?.readText()) ?? '';
+    }
+    catch {
+        return '';
+    }
+};

package/dist/context-menu/index.parts.d.ts

@@ -0,0 +1 @@
+export { MenuCheck as Check, MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuHint as Hint, MenuItem as Item, MenuLabel as Label, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, ContextMenuRoot as Root, MenuRow as Row, MenuRowAction as RowAction, MenuRowSubmenuTrigger as RowSubmenuTrigger, MenuSeparator as Separator, MenuSubmenuRoot as SubmenuRoot, MenuSubmenuTrigger as SubmenuTrigger, ContextMenuTrigger as Trigger } from '../menu/parts.tsx';

package/dist/context-menu/index.parts.js

@@ -0,0 +1,2 @@
+/* A context menu is a menu that opens at the pointer; every part inside it is the menu's own. */
+export { MenuCheck as Check, MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuHint as Hint, MenuItem as Item, MenuLabel as Label, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, ContextMenuRoot as Root, MenuRow as Row, MenuRowAction as RowAction, MenuRowSubmenuTrigger as RowSubmenuTrigger, MenuSeparator as Separator, MenuSubmenuRoot as SubmenuRoot, MenuSubmenuTrigger as SubmenuTrigger, ContextMenuTrigger as Trigger } from '../menu/parts.js';

package/dist/dialog/index.parts.d.ts

@@ -0,0 +1 @@
+export { DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogText as Text, DialogTitle as Title, DialogTrigger as Trigger } from './parts.tsx';

package/dist/dialog/index.parts.js

@@ -0,0 +1 @@
+export { DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogText as Text, DialogTitle as Title, DialogTrigger as Trigger } from './parts.js';

package/dist/dialog/parts.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps } from 'react';
+import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+import { useRender } from '@base-ui-components/react/use-render';
+declare const SIZE: {
+    readonly sm: 'w-[420px] p-5';
+};
+export declare function DialogRoot({ open, defaultOpen, onOpenChange, ...props }: ComponentProps<typeof BaseDialog.Root>): import("react").JSX.Element;
+export declare const DialogTrigger: BaseDialog.Trigger;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogPopupProps = ComponentProps<typeof BaseDialog.Popup> & {
+    size?: keyof typeof SIZE;
+    nested?: boolean;
+    backdrop?: boolean;
+    backdropClassName?: string;
+    keepMounted?: boolean;
+};
+export declare function DialogPopup({ size, nested, backdrop, backdropClassName, keepMounted, className, ...props }: DialogPopupProps): import("react").JSX.Element;
+export type DialogTitleProps = ComponentProps<typeof BaseDialog.Title> & {
+    size?: 'base' | 'lg';
+};
+export declare function DialogTitle({ size, className, ...props }: DialogTitleProps): import("react").JSX.Element;
+declare const DESCRIPTION: {
+    readonly sm: 'text-sm text-text-muted';
+    readonly xs: 'text-xs text-text-muted';
+};
+export type DialogDescriptionProps = ComponentProps<typeof BaseDialog.Description> & {
+    size?: keyof typeof DESCRIPTION;
+};
+export declare function DialogDescription({ size, className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+export type DialogTextProps = useRender.ComponentProps<'p'> & {
+    size?: keyof typeof DESCRIPTION;
+};
+export declare function DialogText({ size, render, className, ref, ...props }: DialogTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DialogFooterProps = useRender.ComponentProps<'div'>;
+export declare function DialogFooter({ render, className, ref, ...props }: DialogFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/dialog/parts.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import clsx from 'clsx';
+import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+import { useRender } from '@base-ui-components/react/use-render';
+import { withClass } from '../class-name.js';
+import { useDialogLayer } from '../dialog-layer.js';
+/* Whether the dialog is open, for its popup to decide whether it stacks over another one. */
+const DialogOpenContext = createContext(false);
+/* A question or a form of a few fields. Every one is as wide as the others, whatever it asks. */
+const SIZE = {
+    sm: 'w-[420px] p-5'
+};
+export function DialogRoot({ open, defaultOpen, onOpenChange, ...props }) {
+    // Followed rather than taken over, so a dialog that keeps its own state still does.
+    const [seen, setSeen] = useState(defaultOpen ?? false);
+    return (_jsx(DialogOpenContext, { value: open ?? seen, children: _jsx(BaseDialog.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: (next, details) => {
+                onOpenChange?.(next, details);
+                if (!details.isCanceled) {
+                    setSeen(next);
+                }
+            }, ...props }) }));
+}
+export const DialogTrigger = BaseDialog.Trigger;
+export const DialogClose = BaseDialog.Close;
+/*
+ * The portal, the backdrop and the popup of a dialog in one part. A dialog that opens while another
+ * one is up, such as one from the menu bar over a settings dialog, takes the nested steps and a
+ * backdrop of its own, or the one underneath stays on top and keeps taking clicks.
+ */
+export function DialogPopup({ size, nested = false, backdrop = true, backdropClassName, keepMounted, className, ...props }) {
+    const stacked = useDialogLayer(useContext(DialogOpenContext)) || nested;
+    return (_jsxs(BaseDialog.Portal, { keepMounted: keepMounted, children: [backdrop && (_jsx(BaseDialog.Backdrop, { className: clsx('dialog-backdrop', stacked && 'dialog-backdrop-nested', backdropClassName), forceRender: stacked })), _jsx(BaseDialog.Popup, { className: withClass(clsx('dialog-popup', size !== undefined && SIZE[size], stacked && 'dialog-popup-nested'), className), ...props })] }));
+}
+export function DialogTitle({ size = 'base', className, ...props }) {
+    return _jsx(BaseDialog.Title, { className: withClass(clsx(size === 'lg' ? 'text-lg' : 'text-base', 'font-semibold text-text'), className), ...props });
+}
+const DESCRIPTION = { sm: 'text-sm text-text-muted', xs: 'text-xs text-text-muted' };
+/* The sentence under the title, which is also what a screen reader reads as the dialog's description. It carries no margin. */
+export function DialogDescription({ size = 'sm', className, ...props }) {
+    return _jsx(BaseDialog.Description, { className: withClass(DESCRIPTION[size], className), ...props });
+}
+/* A further line in the style of the description that is not the dialog's description: a warning, a note under a choice. */
+export function DialogText({ size = 'sm', render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'p', props: { ...props, className: clsx(DESCRIPTION[size], className) } });
+}
+/* The buttons at the foot of a dialog, the main action last and so on the right. */
+export function DialogFooter({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: { ...props, className: clsx('mt-4 flex flex-wrap items-center justify-end gap-2', className) }
+    });
+}

package/dist/dialog-layer.d.ts

@@ -0,0 +1 @@
+export declare function useDialogLayer(isOpen: boolean): boolean;

package/dist/dialog-layer.js

@@ -0,0 +1,27 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+// The app-level dialogs open right now. Each one is its own root, so Base UI does not see them as nested.
+const open = new Set();
+/*
+ * Whether a dialog opened while another app-level dialog was already up, such as one opened from the
+ * menu bar over a settings dialog. Such a dialog takes the nested steps (`dialog-backdrop-nested`,
+ * `dialog-popup-nested`, a forced backdrop), or the one underneath stays on top and keeps taking clicks.
+ */
+export function useDialogLayer(isOpen) {
+    const id = useRef(Symbol('dialog'));
+    // Decided in render at the moment the dialog opens, so its first frame is already on the right step.
+    const [seen, setSeen] = useState({ open: false, stacked: false });
+    if (seen.open !== isOpen) {
+        setSeen({ open: isOpen, stacked: isOpen && open.size > 0 });
+    }
+    useLayoutEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const self = id.current;
+        open.add(self);
+        return () => {
+            open.delete(self);
+        };
+    }, [isOpen]);
+    return isOpen && seen.stacked;
+}

package/dist/error-boundary.d.ts

@@ -0,0 +1,4 @@
+export type ResetKeys = readonly unknown[];
+export declare const shouldReset: (failed: boolean, previous: ResetKeys, next: ResetKeys) => boolean;
+export declare const errorMessageOf: (error: unknown) => string;
+export declare const errorReport: (label: string, error: unknown, componentStack: string | null) => string;

package/dist/error-boundary.js

@@ -0,0 +1,34 @@
+/*
+ * The pure half of `ErrorBoundary`: when a failed subtree gets another try, and what a person copies
+ * out of the message. Kept apart so it can be tested without a DOM.
+ */
+/*
+ * Whether a boundary that holds an error should draw its children again. Only a boundary that
+ * failed resets. Comparing keys while the children are fine would remount a terminal or an embedded
+ * page every time the data under it changes.
+ */
+export const shouldReset = (failed, previous, next) => {
+    if (!failed) {
+        return false;
+    }
+    if (previous.length !== next.length) {
+        return true;
+    }
+    return previous.some((key, i) => !Object.is(key, next[i]));
+};
+/* A thrown value is not always an Error, and the message has to say something either way. */
+export const errorMessageOf = (error) => {
+    if (error instanceof Error) {
+        return error.message || error.name;
+    }
+    return typeof error === 'string' ? error : String(error);
+};
+/* The text behind the copy button: what a bug report needs, the component stack included. */
+export const errorReport = (label, error, componentStack) => {
+    const stack = error instanceof Error && error.stack ? error.stack : errorMessageOf(error);
+    const parts = [label, stack];
+    if (componentStack) {
+        parts.push(`Component stack:${componentStack}`);
+    }
+    return parts.join('\n\n');
+};

package/dist/error-message.d.ts

@@ -0,0 +1 @@
+export declare const messageOf: (e: unknown, fallback?: string) => string;

package/dist/error-message.js

@@ -0,0 +1,4 @@
+/* The sentence of an error, for a person to read. One that crossed an Electron bridge (`ipcRenderer.invoke`)
+   carries Electron's own prefix, which says nothing to a person. A throw that is not an Error has no
+   sentence in it, so a caller that knows the step names it. */
+export const messageOf = (e, fallback) => (e instanceof Error ? e.message : (fallback ?? String(e))).replace(/^Error invoking remote method '[^']+': (?:[A-Za-z]*Error: )?/, '');

package/dist/field-context.d.ts

@@ -0,0 +1,7 @@
+export interface FieldControl {
+    id: string;
+    describedBy: string | undefined;
+    invalid: boolean;
+}
+export declare const FieldContext: import("react").Context<FieldControl | null>;
+export declare const useFieldControl: () => FieldControl | null;

package/dist/field-context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react';
+export const FieldContext = createContext(null);
+/* What an `Input` or a `TextArea` inside a `Field` takes over: the id its label points at, the hint and the error it is described by. */
+export const useFieldControl = () => useContext(FieldContext);