@adecore/ui 0.14.0

package/dist/PromptDialog.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from './Button.js';
+import { DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle } from './dialog/parts.js';
+import { Field, FormError } from './Field.js';
+import { Icon } from './Icon.js';
+import { Input, TextArea } from './Input.js';
+import { useAsyncAction } from './useAsyncAction.js';
+/*
+ * The one dialog a question is asked in: a name to type, or a warning to agree with. Every confirm
+ * and every rename shares it, so none of them grows a layout of its own. It never closes itself,
+ * because what a confirm leads to is the caller's business: an action that asks a second question
+ * would be shut out by a close of its own.
+ */
+export function PromptDialog({ open, title, titleIcon, description, field, area, confirmLabel, confirmBusyLabel, confirmIcon, danger = false, busy = false, allowEmpty = false, confirmDisabled = false, secondary, nested = false, children, onConfirm, fallbackMessage, onOpenChange, className, ref }) {
+    const { t } = useTranslation('ui');
+    /* The dialog stays mounted between questions, so every opening starts from what it was handed.
+       The token is what it was handed, so a new question resets the fields in the same render that
+       shows it and not in a second one after. */
+    const token = open ? `${field?.initial ?? ''}\u0000${area?.initial ?? ''}` : '';
+    const [draft, setDraft] = useState({ token, value: field?.initial ?? '', body: area?.initial ?? '' });
+    const step = useAsyncAction(fallbackMessage);
+    if (draft.token !== token) {
+        setDraft({ token, value: field?.initial ?? '', body: area?.initial ?? '' });
+        step.clear();
+    }
+    const value = draft.value;
+    const body = draft.body;
+    const working = busy || step.busy;
+    const setValue = (next) => setDraft({ ...draft, value: next });
+    const setBody = (next) => setDraft({ ...draft, body: next });
+    const submit = () => {
+        if (!working && !confirmDisabled && (field === undefined || allowEmpty || value.trim() !== '')) {
+            void step.run(async () => await onConfirm(value.trim(), body.trim()));
+        }
+    };
+    const close = () => onOpenChange(false);
+    return (_jsx(DialogRoot, { open: open, onOpenChange: (next) => !next && close(), children: _jsxs(DialogPopup, { ref: ref, size: "sm", nested: nested, className: className, children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 break-words", children: [titleIcon && _jsx(Icon, { icon: titleIcon, size: 16 }), title] }), description !== undefined && _jsx(DialogDescription, { className: "mt-1 break-words", children: description }), field !== undefined && (_jsx(Field, { label: field.label, className: "mt-4", children: _jsx(Input, { autoFocus: true, mono: field.mono === true, "aria-label": field.ariaLabel, spellCheck: false, placeholder: field.placeholder, maxLength: field.maxLength, value: value, onChange: (event) => setValue(event.target.value), onKeyDown: (event) => {
+                            // Whatever listens on the window has keys of its own, and a name may hold any of them.
+                            event.stopPropagation();
+                            if (event.key === 'Enter') {
+                                event.preventDefault();
+                                submit();
+                            }
+                        } }) })), area !== undefined && (_jsx(Field, { label: area.label, className: "mt-3", children: _jsx(TextArea, { rows: 5, spellCheck: false, placeholder: area.placeholder, value: body, onChange: (event) => setBody(event.target.value) }) })), children, step.failure !== null && _jsx(FormError, { className: "mt-2 break-words", children: step.failure }), _jsxs(DialogFooter, { children: [_jsx(Button, { onClick: close, children: t('action.cancel') }), secondary !== undefined && (_jsx(Button, { disabled: working, onClick: secondary.onClick, children: secondary.label })), _jsxs(Button, { variant: danger ? 'danger' : 'primary', disabled: working || confirmDisabled || (field !== undefined && !allowEmpty && value.trim() === ''), onClick: submit, children: [confirmIcon && _jsx(Icon, { icon: confirmIcon, size: 12 }), working && confirmBusyLabel !== undefined ? confirmBusyLabel : confirmLabel] })] })] }) }));
+}

package/dist/SectionLabel.d.ts

@@ -0,0 +1,3 @@
+import { useRender } from '@base-ui-components/react/use-render';
+export type SectionLabelProps = useRender.ComponentProps<'span'>;
+export declare function SectionLabel({ render, className, ref, ...props }: SectionLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/SectionLabel.js

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+/* A label takes the line height of the row it sits in, which is why the size carries `/[inherit]`. */
+const SECTION_LABEL = 'text-xs/[inherit] font-medium text-text-faint';
+/*
+ * The small label above a group of rows outside a popup: a sidebar's groups, a palette's sections,
+ * the name of a field. Always sentence case. A `<span>` unless `render` makes it a heading or a label.
+ */
+export function SectionLabel({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: { ...props, className: clsx(SECTION_LABEL, className) }
+    });
+}

package/dist/SegmentBar.d.ts

@@ -0,0 +1,18 @@
+import { type Ref } from 'react';
+export interface SegmentBarPart {
+    value: number;
+    start?: number;
+    label?: string;
+    color?: string;
+    current?: boolean;
+}
+export interface SegmentBarProps {
+    parts: readonly SegmentBarPart[];
+    range?: readonly [from: number, to: number];
+    size?: 'sm' | 'md';
+    onSelect?(index: number): void;
+    label?: string;
+    className?: string;
+    ref?: Ref<HTMLOListElement>;
+}
+export declare function SegmentBar({ parts, range, size, onSelect, label, className, ref }: SegmentBarProps): import("react").JSX.Element;

package/dist/SegmentBar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { mergeRefs } from './merge-refs.js';
+import { Tooltip } from './Tooltip.js';
+import { useMeasuredWidth } from './useMeasuredWidth.js';
+/* A whole split into parts, each as wide as it lasts, so they compare at a glance. A part starts exactly at its
+   place; the gap between two parts that touch comes out of the one before. */
+export function SegmentBar({ parts, range, size = 'md', onSelect, label, className, ref }) {
+    const [measure, width] = useMeasuredWidth();
+    const rootRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
+    const labels = useRef([]);
+    const [cut, setCut] = useState([]);
+    let end = 0;
+    const placed = parts.map((part, index) => {
+        const from = part.start ?? end;
+        end = from + Math.max(0, part.value);
+        return { part, index, from, to: end };
+    });
+    const [from, to] = range ?? [0, end];
+    const span = to - from;
+    const visible = span > 0 ? placed.filter((placement) => placement.to > from && placement.from < to) : [];
+    // Parts without a name say nothing a screen reader could use; the element around the bar names it, as a meter does.
+    // Parts a person can press stay reachable, since a hidden list must not hold focusable buttons.
+    const hidden = onSelect === undefined && !parts.some((part) => part.label !== undefined);
+    // A label that stops fitting after a resize or a new range gets its tooltip.
+    useEffect(() => {
+        const next = labels.current.slice(0, visible.length).map((element) => element !== null && element.scrollWidth > element.clientWidth);
+        setCut((current) => (current.length === next.length && current.every((value, i) => value === next[i]) ? current : next));
+    }, [width, parts, from, to, size, visible.length]);
+    return (_jsx("ol", { ref: rootRef, "aria-label": hidden ? undefined : label, "aria-hidden": hidden ? true : undefined, className: clsx('relative min-w-0', size === 'sm' ? 'h-1.5' : 'h-7', className), children: visible.map(({ part, index, from: partFrom, to: partTo }, i) => {
+            const left = (Math.max(partFrom, from) - from) / span;
+            const right = (Math.min(partTo, to) - from) / span;
+            const next = visible[i + 1];
+            // Less than a pixel apart they touch, whatever rounding the caller's starts carry.
+            const touches = next !== undefined && ((next.from - partTo) / span) * width < 1;
+            const fill = clsx('flex size-full min-w-0 items-center', size === 'sm' ? 'rounded-full' : 'rounded-sm px-1.5 text-left text-xs', part.current && (size === 'sm' ? 'bg-accent' : 'bg-accent-soft text-text'), !part.current && part.color === undefined && 'bg-surface-active', !part.current && size === 'md' && 'text-text-muted', onSelect !== undefined && 'cursor-pointer hover:opacity-80');
+            const text = (_jsx("span", { ref: (element) => {
+                    labels.current[i] = element;
+                }, className: size === 'sm' ? 'sr-only' : 'min-w-0 truncate', children: part.label }));
+            const body = onSelect === undefined ? (_jsx("span", { className: fill, style: { backgroundColor: part.color }, "aria-current": part.current ? true : undefined, children: text })) : (_jsx("button", { type: "button", className: fill, style: { backgroundColor: part.color }, "aria-current": part.current ? true : undefined, onClick: () => onSelect(index), children: text }));
+            return (_jsx("li", { className: clsx('absolute inset-y-0 focus-within:z-10', touches && 'pr-0.5'), style: { left: `${left * 100}%`, width: `${(right - left) * 100}%` }, children: part.label === undefined ? (body) : (_jsx(Tooltip, { label: part.label, disabled: size === 'md' && !cut[i], children: body })) }, index));
+        }) }));
+}

package/dist/Segmented.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface SegmentedOption<T extends string> {
+    id: T;
+    label: string;
+    icon?: LucideIcon;
+}
+export interface SegmentedProps<T extends string> {
+    value: T;
+    onValueChange(id: T): void;
+    options: readonly SegmentedOption<T>[];
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Segmented<T extends string>({ value, onValueChange, options, label, disabled, className, ref }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/Segmented.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Icon } from './Icon.js';
+/* One of a few options side by side in one sunken track, the picked one lifted out of it. */
+export function Segmented({ value, onValueChange, options, label, disabled, className, ref }) {
+    return (_jsx("div", { ref: ref, className: clsx('flex h-8 w-fit items-center rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', className), role: "radiogroup", "aria-label": label, children: options.map((option) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === option.id, disabled: disabled, className: clsx('flex h-7 items-center gap-1.5 rounded-md px-3 transition-colors disabled:opacity-50', value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'), onClick: () => onValueChange(option.id), children: [option.icon && _jsx(Icon, { icon: option.icon, size: 14 }), option.label] }, option.id))) }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, Ref } from 'react';
+export interface SelectItem<T extends string> {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectGroup<T extends string> {
+    label: string;
+    items: SelectItem<T>[];
+}
+export interface SelectProps<T extends string> {
+    value: T | null;
+    onValueChange(value: T): void;
+    items: SelectItem<T>[] | SelectGroup<T>[];
+    label: string;
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    variant?: 'outlined' | 'ghost';
+    disabled?: boolean;
+    align?: 'start' | 'end';
+    truncateValue?: boolean;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Select<T extends string>({ value, onValueChange, items, label, placeholder, size, variant, disabled, align, truncateValue, className, ref }: SelectProps<T>): import("react").JSX.Element;

package/dist/Select.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as BaseSelect } from '@base-ui-components/react/select';
+import clsx from 'clsx';
+import { ChevronDown } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from './Icon.js';
+import { MENU_LABEL, MenuCheck } from './menu/parts.js';
+const isGroup = (entry) => Array.isArray(entry.items);
+const TRIGGER_SIZE = {
+    sm: 'h-7 gap-1 px-2',
+    md: 'h-8 gap-1.5 px-2'
+};
+const TRIGGER_VARIANT = {
+    outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
+    ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
+};
+/* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */
+const TRIGGER_DISABLED = 'data-disabled:cursor-default data-disabled:opacity-50';
+/* A description makes the row two lines high; the box keeps the icon on the label's line. */
+function Row({ item, picked }) {
+    return (_jsxs(BaseSelect.Item, { className: clsx('menu-item', item.description && 'items-start'), value: item.value, label: item.label, disabled: item.disabled, children: [_jsx(MenuCheck, { kind: "radio", checked: picked }), item.icon && _jsx("span", { className: "flex h-lh shrink-0 items-center", children: item.icon }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx(BaseSelect.ItemText, { children: item.label }), item.description && _jsx("span", { className: "text-xs text-text-faint", children: item.description })] })] }));
+}
+/* The one select. A Base UI `Select` in the popup style the menus use, so a settings field and a
+   picker in a toolbar read the same. Base UI brings the keyboard along (arrows,
+   Home and End, typeahead, Enter, Escape), which a hand-rolled listbox would have to repeat. */
+export function Select({ value, onValueChange, items, label, placeholder, size = 'md', variant = 'outlined', disabled, align = 'start', truncateValue = true, className, ref }) {
+    const { t } = useTranslation('ui');
+    const groups = items.length > 0 && isGroup(items[0]) ? items : null;
+    const flat = groups ? groups.flatMap((group) => group.items) : items;
+    const selected = flat.find((item) => item.value === value) ?? null;
+    return (_jsxs(BaseSelect.Root, { items: flat.map((item) => ({ value: item.value, label: item.label })), value: value, disabled: disabled, onValueChange: (next) => onValueChange(next), children: [_jsxs(BaseSelect.Trigger, { ref: ref, "aria-label": label, className: clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className), children: [selected?.icon, _jsx(BaseSelect.Value, { className: clsx(truncateValue && 'truncate'), children: () => selected?.label ?? placeholder ?? t('action.select') }), _jsx(BaseSelect.Icon, { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "popup-positioner", side: "bottom", align: align, sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "menu-popup", children: _jsx(BaseSelect.List, { className: "max-h-80 overflow-auto", children: groups
+                                ? groups.map((group) => (_jsxs(BaseSelect.Group, { children: [_jsx(BaseSelect.GroupLabel, { className: MENU_LABEL, children: group.label }), group.items.map((item) => (_jsx(Row, { item: item, picked: item.value === value }, item.value)))] }, group.label)))
+                                : flat.map((item) => _jsx(Row, { item: item, picked: item.value === value }, item.value)) }) }) }) })] }));
+}

package/dist/Separator.d.ts

@@ -0,0 +1,7 @@
+import type { Ref } from 'react';
+export interface SeparatorProps {
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Separator({ orientation, className, ref }: SeparatorProps): import("react").JSX.Element;

package/dist/Separator.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+/* A hairline between two groups of controls in a toolbar-like row. It carries no margin of its own.
+   The row's gap puts 8px on either side of it, which is what makes the line read as a divider and
+   not as a group of its own. Between two groups of menu rows it is `Menu.Separator`. */
+export function Separator({ orientation = 'vertical', className, ref }) {
+    return _jsx("span", { ref: ref, "aria-hidden": true, className: clsx(orientation === 'vertical' ? 'h-4 w-px' : 'h-px w-full', 'shrink-0 bg-border', className) });
+}

package/dist/ShortcutHints.d.ts

@@ -0,0 +1 @@
+export declare function ShortcutHints(): import("react").ReactPortal | null;

package/dist/ShortcutHints.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { isApplePlatform } from './platform.js';
+import { formatShortcut } from './shortcut.js';
+import { ModifierHold, placeHint, shortcutHintTargets } from './shortcut-hints.js';
+/* Whether a person can see the button now: on screen, not faded out, and not under a dialog or another node. */
+const isSeen = (element, rect) => {
+    if (rect.width === 0 || rect.height === 0 || rect.bottom <= 0 || rect.right <= 0 || rect.top >= window.innerHeight || rect.left >= window.innerWidth) {
+        return false;
+    }
+    if (!element.checkVisibility({ opacityProperty: true, visibilityProperty: true })) {
+        return false;
+    }
+    const hit = document.elementFromPoint((rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2);
+    return hit !== null && element.contains(hit);
+};
+const measureHints = (apple) => {
+    const viewport = { width: window.innerWidth, height: window.innerHeight };
+    const hints = [];
+    for (const [element, target] of shortcutHintTargets()) {
+        const rect = element.getBoundingClientRect();
+        if (!isSeen(element, rect)) {
+            continue;
+        }
+        const placement = placeHint(rect, viewport);
+        hints.push({
+            id: target.id,
+            text: formatShortcut(target.shortcut, apple),
+            style: { left: placement.left, right: placement.right, top: placement.top, translate: `${placement.translateX} ${placement.translateY}` }
+        });
+    }
+    return hints;
+};
+/*
+ * Every visible button's shortcut, under the button, for as long as the modifier is held on its own.
+ * Mounted once; the listener sits on the window in the capture phase so a terminal that keeps a key to
+ * itself still takes the hints down. An embedded page (`<webview>`) has the keyboard to itself and shows none.
+ */
+export function ShortcutHints() {
+    const [shown, setShown] = useState(false);
+    const [hints, setHints] = useState([]);
+    const holdRef = useRef(null);
+    useEffect(() => {
+        const hold = new ModifierHold(isApplePlatform(), setShown);
+        holdRef.current = hold;
+        const onKeyDown = (e) => hold.keyDown(e);
+        const onKeyUp = (e) => hold.keyUp(e);
+        // A click or a zoom with the modifier down is a gesture, not someone looking for a shortcut.
+        const cancel = () => hold.cancel();
+        window.addEventListener('keydown', onKeyDown, true);
+        window.addEventListener('keyup', onKeyUp, true);
+        window.addEventListener('pointerdown', cancel, true);
+        window.addEventListener('wheel', cancel, { capture: true, passive: true });
+        window.addEventListener('blur', cancel);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown, true);
+            window.removeEventListener('keyup', onKeyUp, true);
+            window.removeEventListener('pointerdown', cancel, true);
+            window.removeEventListener('wheel', cancel, true);
+            window.removeEventListener('blur', cancel);
+            hold.cancel();
+        };
+    }, []);
+    // Measured before paint and then every frame, so a hint never shows where its button was.
+    useLayoutEffect(() => {
+        if (!shown) {
+            return;
+        }
+        const apple = isApplePlatform();
+        let frame = 0;
+        let last = '';
+        const measure = () => {
+            // Focus that moved into a page takes the key-up with it, so the embedder never hears the modifier let go.
+            if (document.activeElement?.tagName === 'WEBVIEW') {
+                holdRef.current?.cancel();
+                return;
+            }
+            const next = measureHints(apple);
+            const signature = JSON.stringify(next);
+            if (signature !== last) {
+                last = signature;
+                setHints(next);
+            }
+            frame = requestAnimationFrame(measure);
+        };
+        measure();
+        return () => cancelAnimationFrame(frame);
+    }, [shown]);
+    if (!shown) {
+        return null;
+    }
+    return createPortal(_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed inset-0 z-(--z-shortcut-hints)", children: hints.map((hint) => (_jsx("kbd", { className: "absolute rounded-md bg-text px-1.5 font-sans text-xs/tight font-medium whitespace-nowrap text-surface shadow-float", style: hint.style, children: hint.text }, hint.id))) }), document.body);
+}

package/dist/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import type { Ref } from 'react';
+export interface SkeletonProps {
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Skeleton({ className, ref }: SkeletonProps): import("react").JSX.Element;

package/dist/Skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+/* A bar where a value will be, while the answer is still on its way. */
+export function Skeleton({ className, ref }) {
+    return _jsx("span", { ref: ref, className: clsx('block h-4 animate-pulse rounded bg-surface-sunken', className), "aria-hidden": true });
+}

package/dist/SlidingColumn.d.ts

@@ -0,0 +1,19 @@
+import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref, type RefObject } from 'react';
+export interface SlidingColumnProps {
+    open: boolean;
+    width: number;
+    bounds: {
+        min: number;
+        max(): number;
+    };
+    onWidthChange(width: number): void;
+    instant?: boolean;
+    body?: {
+        ref: RefObject<HTMLDivElement | null>;
+        onKeyDown(event: ReactKeyboardEvent<HTMLDivElement>): void;
+    };
+    className?: string;
+    ref?: Ref<HTMLElement>;
+    children?: ReactNode;
+}
+export declare function SlidingColumn({ open, width, bounds, onWidthChange, instant, body, className, ref, children }: SlidingColumnProps): import("react").JSX.Element;

package/dist/SlidingColumn.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ColumnResizeHandle } from './ColumnResizeHandle.js';
+import { mergeRefs } from './merge-refs.js';
+import { useColumnResize } from './useColumnResize.js';
+// How long the open and close motion takes; the same number as `.sliding-column` in `theme.css`.
+const TRANSITION_MS = 200;
+/*
+ * A panel that slides in and out along the right edge. The outer column is 0 wide and inert while
+ * closed; the contents sit in an inner column of the stored width, so they do not reflow while it
+ * moves, and they stay mounted until the slide is over, so a close plays out. The left edge is the
+ * drag handle.
+ */
+export function SlidingColumn({ open, width, bounds, onWidthChange, instant = false, body, className, ref, children }) {
+    /* Closed and done animating. Until then the contents stay mounted, so a close plays out. */
+    const [settled, setSettled] = useState(!open);
+    /* A width that lands without a transition fires no `transitionend`, so the motion it would have
+       ended is over in the same commit that starts it. */
+    if (instant && settled !== !open) {
+        setSettled(!open);
+    }
+    const present = open || !settled;
+    const column = useRef(null);
+    const { startResize } = useColumnResize(column, { ...bounds, size: width, from: 'right', onSize: onWidthChange });
+    useEffect(() => {
+        if (open || settled) {
+            return;
+        }
+        // Reduced motion and a hidden tab paint no width change, so no `transitionend` arrives.
+        const timer = window.setTimeout(() => setSettled(true), TRANSITION_MS + 50);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [open, settled]);
+    return (_jsx("aside", { ref: mergeRefs(column, ref), inert: !open, "data-instant": instant ? '' : undefined, className: clsx('sliding-column flex h-full shrink-0 justify-end overflow-hidden', className), style: { width: open ? width : 0 }, onTransitionEnd: (event) => {
+            if (event.propertyName === 'width' && event.target === event.currentTarget) {
+                setSettled(!open);
+            }
+        }, children: present && (_jsxs("div", { ref: body?.ref, tabIndex: body ? -1 : undefined, className: "relative flex h-full shrink-0 flex-col border-l border-border bg-surface outline-none", style: { width }, onKeyDown: body?.onKeyDown, children: [open && _jsx(ColumnResizeHandle, { from: "right", onPointerDown: startResize }), children] })) }));
+}

package/dist/Spinner.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+export interface SpinnerProps extends Omit<ComponentProps<'span'>, 'children'> {
+    size?: number;
+    label?: string;
+}
+export declare function Spinner({ size, label, className, style, ref, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/Spinner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+const DOTS = [0, 1, 2];
+/* Work in progress: three dots that leap over each other in the color of the text around them. With reduced motion they stand still. */
+export function Spinner({ size = 16, label, className, style, ref, ...props }) {
+    return (_jsx("span", { ref: ref, role: label === undefined ? undefined : 'img', "aria-label": label, "aria-hidden": label === undefined ? true : undefined, ...props, className: clsx('spinner', className), style: { ...style, '--spinner-size': `${size}px` }, children: DOTS.map((dot) => (_jsx("span", { className: "spinner-hop", style: { '--spinner-step': dot }, children: _jsx("span", { className: "spinner-dot" }) }, dot))) }));
+}

package/dist/Stepper.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'react';
+export interface StepperProps {
+    value: number;
+    onValueChange(value: number): void;
+    min: number;
+    max: number;
+    step: number;
+    decimals?: number;
+    unit?: string;
+    label: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Stepper({ value, onValueChange, min, max, step, decimals, unit, label, className, ref }: StepperProps): import("react").JSX.Element;

package/dist/Stepper.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Minus, Plus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ButtonGroup } from './ButtonGroup.js';
+import { formatFixed } from './format/number.js';
+import { IconButton } from './IconButton.js';
+const placesOf = (step) => String(step).split('.')[1]?.length ?? 0;
+/* A number between minus and plus, in one sunken group so the three read as a single control. */
+export function Stepper({ value, onValueChange, min, max, step, decimals = placesOf(step), unit, label, className, ref }) {
+    const { t } = useTranslation('ui');
+    const reading = (amount) => (_jsxs(_Fragment, { children: [formatFixed(amount, decimals), unit && _jsx("span", { className: "text-text-muted", children: unit })] }));
+    const nudge = (direction) => {
+        const next = Math.round((value + direction * step) * 100) / 100;
+        onValueChange(Math.min(max, Math.max(min, next)));
+    };
+    return (_jsxs(ButtonGroup, { ref: ref, className: clsx('shrink-0 rounded-lg bg-surface-sunken p-0.5', className), role: "group", "aria-label": label, children: [_jsx(IconButton, { icon: Minus, size: "sm", label: t('controls.stepper.smallerFor', { label }), tooltip: t('controls.stepper.smaller'), disabled: value <= min, onClick: () => nudge(-1) }), _jsxs("span", { className: "grid min-w-10 px-1 text-center text-xs text-text tabular-nums", children: [_jsx("span", { className: "invisible col-start-1 row-start-1", children: reading(min) }), _jsx("span", { className: "invisible col-start-1 row-start-1", children: reading(max) }), _jsx("span", { className: "col-start-1 row-start-1", "aria-live": "polite", children: reading(value) })] }), _jsx(IconButton, { icon: Plus, size: "sm", label: t('controls.stepper.largerFor', { label }), tooltip: t('controls.stepper.larger'), disabled: value >= max, onClick: () => nudge(1) })] }));
+}

package/dist/Surface.d.ts

@@ -0,0 +1,3 @@
+import { useRender } from '@base-ui-components/react/use-render';
+export type SurfaceProps = useRender.ComponentProps<'div'>;
+export declare function Surface({ render, className, ref, ...props }: SurfaceProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/Surface.js

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+const FLOAT = 'border border-border bg-[color-mix(in_srgb,var(--surface-raised)_88%,transparent)] shadow-float backdrop-blur-[14px]';
+/*
+ * The glass card that floats over the content under it: a dock, a banner, a toast, a find bar, a
+ * chip over a scrolling thread. It brings the ground, the border and the shadow; the caller brings
+ * the shape (radius, padding, height) and the position.
+ */
+export function Surface({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: { ...props, className: clsx(FLOAT, className) }
+    });
+}

package/dist/Switch.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'react';
+export interface SwitchProps {
+    checked: boolean;
+    onCheckedChange(checked: boolean): void;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Switch({ checked, onCheckedChange, label, disabled, className, ref }: SwitchProps): import("react").JSX.Element;

package/dist/Switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+/* On or off, as a switch rather than a checkbox: a setting that takes effect the moment it flips. */
+export function Switch({ checked, onCheckedChange, label, disabled, className, ref }) {
+    return (_jsx(BaseSwitch.Root, { ref: ref, checked: checked, onCheckedChange: (next) => onCheckedChange(next), "aria-label": label, disabled: disabled, className: clsx('relative h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50', className), children: _jsx(BaseSwitch.Thumb, { className: "block h-4 w-4 rounded-full bg-surface-raised shadow-raised transition-transform data-checked:translate-x-4" }) }));
+}

package/dist/TextMenu.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export type TextMenuProps = ComponentProps<'div'> & {
+    items?: ReactNode;
+};
+export declare function TextMenu({ children, items, ref, ...rest }: TextMenuProps): import("react").JSX.Element;

package/dist/TextMenu.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Copy, Scan } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { copyText } from './clipboard.js';
+import { Icon } from './Icon.js';
+import { Kbd } from './Kbd.js';
+import { mergeRefs } from './merge-refs.js';
+import { ContextMenuRoot, ContextMenuTrigger, MenuItem, MenuPopup, MenuSeparator } from './menu/parts.js';
+import { isApplePlatform } from './platform.js';
+import { selectAllWithin, selectionWithin } from './selection.js';
+import { EDIT_SHORTCUTS, matchesShortcut } from './shortcut.js';
+/*
+ * A block of text and the menu that belongs to it: Copy for what is selected inside it, Select all
+ * for the whole of it, on Cmd+A as well. Anywhere text can be selected a right-click has to offer
+ * to copy it, and an app that draws every menu itself offers nothing at all without one of these.
+ */
+export function TextMenu({ children, items, ref, ...rest }) {
+    const { t } = useTranslation('ui');
+    const host = useRef(null);
+    // Read when the menu opens: a selection made after that is not the one the click was about.
+    const [selection, setSelection] = useState('');
+    const onKeyDown = (event) => {
+        if (!matchesShortcut(EDIT_SHORTCUTS.selectAll, event, isApplePlatform())) {
+            return;
+        }
+        event.preventDefault();
+        selectAllWithin(host.current);
+    };
+    return (_jsxs(ContextMenuRoot, { onOpenChange: (open) => setSelection(open ? selectionWithin(host.current) : ''), children: [_jsx(ContextMenuTrigger, { ...rest, ref: mergeRefs(host, ref), onKeyDown: onKeyDown, children: children }), _jsxs(MenuPopup, { children: [_jsxs(MenuItem, { disabled: selection === '', onClick: () => copyText(selection), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('action.copy'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onClick: () => selectAllWithin(host.current), children: [_jsx(Icon, { icon: Scan, size: 14 }), " ", t('action.selectAll'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.selectAll })] }), items !== undefined && (_jsxs(_Fragment, { children: [_jsx(MenuSeparator, {}), items] }))] })] }));
+}

package/dist/Tile.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Shortcut } from './shortcut.ts';
+export interface TileProps extends Omit<ComponentProps<'button'>, 'title'> {
+    icon: ReactNode;
+    title: string;
+    description?: ReactNode;
+    shortcut?: Shortcut;
+    primary?: boolean;
+    size?: 'md' | 'sm';
+}
+export declare function Tile({ icon, title, description, shortcut, primary, size, className, type, ...rest }: TileProps): import("react").JSX.Element;

package/dist/Tile.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Kbd } from './Kbd.js';
+/*
+ * One thing to start with, as a card that is a button: a start screen and the empty places of an app
+ * use it, so a place to begin looks the same wherever it is offered.
+ */
+export function Tile({ icon, title, description, shortcut, primary = false, size = 'md', className, type = 'button', ...rest }) {
+    return (_jsxs("button", { type: type, className: clsx('flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover disabled:opacity-50 disabled:hover:bg-surface', size === 'md' ? 'gap-3 rounded-xl p-3' : 'gap-2 rounded-lg px-2 py-1.5', primary ? 'border-accent' : 'border-border', className), ...rest, children: [_jsx("span", { className: clsx('grid size-8 shrink-0 place-items-center rounded-lg', primary ? 'bg-accent text-accent-text' : 'bg-surface-sunken text-text-muted'), children: icon }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-text", children: title }), description && _jsx("span", { className: "truncate text-xs text-text-muted", children: description })] }), shortcut && _jsx(Kbd, { shortcut: shortcut, variant: "inline", className: "shrink-0" })] }));
+}

package/dist/Toasts.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode, type Ref } from 'react';
+import { type Toast, type ToastStoreHook } from './toast-store.ts';
+export interface ToastsProps<T extends Toast> {
+    store: ToastStoreHook<T>;
+    footer?: (toast: T) => ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Toasts<T extends Toast>({ store, footer, className, ref }: ToastsProps<T>): import("react").JSX.Element | null;