@adecore/ui 0.23.0 → 0.24.0

package/dist/ButtonGroup.d.ts

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

package/dist/ButtonGroup.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 /* Icon buttons that belong together sit 1px apart; groups keep the wider gap of their container. */
 export function ButtonGroup({ render, className, ref, ...props }) {
     return useRender({

package/dist/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Check, Minus } from 'lucide-react';
-import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { Icon } from './Icon.js';
 /* Picked or not, as one item out of a list or an option that waits for a Save button. */
 export function Checkbox({ checked, onCheckedChange, label, indeterminate = false, disabled, className, ref }) {

package/dist/ChoiceCards.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useId } from 'react';
 import clsx from 'clsx';
-import { Radio } from '@base-ui-components/react/radio';
-import { RadioGroup } from '@base-ui-components/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
 import { Icon } from './Icon.js';
 function ChoiceCard({ choice, radio }) {
     const id = useId();

package/dist/CloseButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { X } from 'lucide-react';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { IconButton } from './IconButton.js';
 /* The close button in the header of every panel and dialog. In a dialog it is that dialog's own close part. */
 export function CloseButton({ label, kbd, size, className, ref, ...closes }) {

package/dist/ColorSwatch.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 declare const PICKED_RING: {
     readonly surface: 'ring-2 ring-accent ring-offset-2 ring-offset-surface';
     readonly popup: 'ring-2 ring-accent ring-offset-1 ring-offset-surface-raised';

package/dist/ColorSwatch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Check } from 'lucide-react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { Icon } from './Icon.js';
 /* `focus-ring` for the swatch that is a menu item rather than a button, which the keyboard reaches all the same. */
 const SWATCH = 'focus-ring grid h-6 w-6 place-items-center rounded-full text-accent-text';

package/dist/Field.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type Ref } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 export type FieldHintProps = useRender.ComponentProps<'p'>;
 export declare function FieldHint({ render, className, ref, ...props }: FieldHintProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type FormErrorProps = useRender.ComponentProps<'p'>;

package/dist/Field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
+import { useId, useMemo } from 'react';
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { FieldContext } from './field-context.js';
 import { SectionLabel } from './SectionLabel.js';
 const HINT = 'text-xs text-text-muted';
@@ -45,5 +45,6 @@ export function Field({ label, hint, error, group = false, orientation = 'vertic
     const hasHint = isShown(hint);
     const hasError = isShown(error);
     const describedBy = [hasHint ? `${id}-hint` : null, hasError ? `${id}-error` : null].filter((part) => part !== null).join(' ') || undefined;
-    return (_jsxs("div", { ref: ref, role: group ? 'group' : undefined, "aria-labelledby": group && hasLabel ? `${id}-label` : undefined, "aria-describedby": group ? describedBy : undefined, className: clsx(horizontal ? 'grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-1.5' : 'flex flex-col gap-1.5', className), children: [hasLabel && (_jsx(FieldLabel, { id: id, group: group, horizontal: horizontal, children: label })), _jsx(FieldContext, { value: group ? null : { id: `${id}-control`, describedBy, invalid: hasError }, children: horizontal ? _jsx("div", { className: "col-start-2 min-w-0", children: children }) : children }), hasHint && (_jsx("p", { id: `${id}-hint`, className: clsx(HINT, horizontal && 'col-start-2'), children: hint })), hasError && (_jsx("p", { id: `${id}-error`, role: "alert", className: clsx(ERROR, 'break-words', horizontal && 'col-start-2'), children: error }))] }));
+    const control = useMemo(() => (group ? null : { id: `${id}-control`, describedBy, invalid: hasError }), [group, id, describedBy, hasError]);
+    return (_jsxs("div", { ref: ref, role: group ? 'group' : undefined, "aria-labelledby": group && hasLabel ? `${id}-label` : undefined, "aria-describedby": group ? describedBy : undefined, className: clsx(horizontal ? 'grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-1.5' : 'flex flex-col gap-1.5', className), children: [hasLabel && (_jsx(FieldLabel, { id: id, group: group, horizontal: horizontal, children: label })), _jsx(FieldContext, { value: control, children: horizontal ? _jsx("div", { className: "col-start-2 min-w-0", children: children }) : children }), hasHint && (_jsx("p", { id: `${id}-hint`, className: clsx(HINT, horizontal && 'col-start-2'), children: hint })), hasError && (_jsx("p", { id: `${id}-error`, role: "alert", className: clsx(ERROR, 'break-words', horizontal && 'col-start-2'), children: error }))] }));
 }

package/dist/IconButton.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import type { Shortcut } from './shortcut.ts';
 import { type TooltipSide } from './Tooltip.tsx';
 import { type IconButtonSize } from './icon-button-size.ts';

package/dist/IconButton.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { Icon } from './Icon.js';
 import { Spinner } from './Spinner.js';
 import { Tooltip } from './Tooltip.js';

package/dist/ListRow.d.ts

@@ -1,4 +1,4 @@
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 declare const VARIANT: {
     readonly flat: 'flex h-7 items-center';
     readonly inset: 'flex h-8 items-center rounded-md px-2';

package/dist/ListRow.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 const VARIANT = {
     /* A row of a list that reads as a table and fills the width of its panel: commits, processes,
        branches. Square, so the rows stack into one block. It carries no padding; the caller pads 12px

package/dist/MiddleTruncate.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from 'react';
+export interface MiddleTruncateProps {
+    text: string;
+    tooltip?: boolean;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function MiddleTruncate({ text, tooltip, className, ref }: MiddleTruncateProps): import("react").JSX.Element;

package/dist/MiddleTruncate.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { fitMiddle } from './middle-truncate.js';
+import { mergeRefs } from './merge-refs.js';
+import { Tooltip } from './Tooltip.js';
+let canvas = null;
+/* How wide a text is drawn in the face of `element`, or null where the page cannot tell (no canvas). */
+function textMeasure(element) {
+    const view = element.ownerDocument.defaultView;
+    canvas ??= element.ownerDocument.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (context === null || view === null) {
+        return null;
+    }
+    const style = view.getComputedStyle(element);
+    context.font = style.font || `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+    if ('letterSpacing' in context) {
+        context.letterSpacing = style.letterSpacing === 'normal' ? '0px' : style.letterSpacing;
+    }
+    return (text) => context.measureText(text).width;
+}
+function sameCut(first, second) {
+    return first?.head === second?.head && first?.tail === second?.tail;
+}
+/*
+ * A path or a branch name on one line that keeps its start and its end and cuts the middle. It asks
+ * for the width of the whole text and measures what it gets. The part it cuts stays in the element
+ * at no width, so selecting, copying and finding read the whole text.
+ */
+export function MiddleTruncate({ text, tooltip = true, className, ref }) {
+    const [element, setElement] = useState(null);
+    const [cut, setCut] = useState(null);
+    const rootRef = useMemo(() => mergeRefs(setElement, ref), [ref]);
+    useLayoutEffect(() => {
+        if (element === null) {
+            return;
+        }
+        const update = () => {
+            const measure = textMeasure(element);
+            // Layout rounds what a canvas measures, so a text a fraction wider than its box still fits.
+            const next = measure === null ? null : fitMiddle(text, element.getBoundingClientRect().width + 0.5, measure);
+            setCut((current) => (sameCut(current, next) ? current : next));
+        };
+        update();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element, text]);
+    const content = (_jsx("span", { ref: rootRef, className: clsx('middle-truncate', className), "data-text": text, children: cut === null ? (text) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "middle-truncate-head", children: cut.head }), _jsx("span", { className: "middle-truncate-middle", children: cut.middle }), cut.tail] })) }));
+    // Only a cut text has more to say, and a long list of whole ones keeps no hover handlers.
+    if (cut === null || !tooltip) {
+        return content;
+    }
+    return _jsx(Tooltip, { label: text, children: content });
+}

package/dist/PanelHeader.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 export type PanelHeaderProps = useRender.ComponentProps<'header'> & {
     title?: ReactNode;
 };

package/dist/PanelHeader.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { SectionLabel } from './SectionLabel.js';
 /*
  * The bar across the top of a side panel, as tall as a 48px toolbar beside it: the panel's name,

package/dist/SectionLabel.d.ts

@@ -1,3 +1,3 @@
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/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';
 /*

package/dist/Select.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select as BaseSelect } from '@base-ui-components/react/select';
+import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

package/dist/SelectSearch.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Combobox } from '@base-ui-components/react/combobox';
+import { Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { ChevronDown, Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

package/dist/Slider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
 import clsx from 'clsx';
-import { Slider as BaseSlider } from '@base-ui-components/react/slider';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { formatFixed } from './format/number.js';
 import { placesOf } from './step-places.js';
 /* A number picked along a range: the label and the value on one line, the track under them. */

package/dist/Surface.d.ts

@@ -1,3 +1,3 @@
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/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

package/dist/Switch.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+import { Switch as BaseSwitch } from '@base-ui/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, 

package/dist/Toasts.d.ts

@@ -6,4 +6,4 @@ export interface ToastsProps<T extends Toast> {
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Toasts<T extends Toast>({ store, footer, className, ref }: ToastsProps<T>): import("react").JSX.Element | null;
+export declare function Toasts<T extends Toast>({ store, footer, className, ref }: ToastsProps<T>): import("react").JSX.Element;

package/dist/Toasts.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { Button } from './Button.js';
 import { Icon } from './Icon.js';
 import { IconButton } from './IconButton.js';
 import { Kbd } from './Kbd.js';
@@ -33,7 +34,7 @@ function TimerRing({ deadline, onDismiss }) {
     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" })] }));
+    return (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "xs", 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');
@@ -42,7 +43,7 @@ function ToastCard({ toast, footer, onDismiss }) {
     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 break-words 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 }))] }));
+    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 break-words 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 -ml-2 flex flex-wrap items-center gap-x-2 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
@@ -51,8 +52,6 @@ function ToastCard({ toast, footer, onDismiss }) {
  */
 export function Toasts({ store, footer, className, ref }) {
     const toasts = store((state) => state.toasts);
-    if (toasts.length === 0) {
-        return null;
-    }
+    // Stays mounted with nothing in it: a screen reader skips what a live region says the moment it is inserted.
     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

@@ -1,5 +1,5 @@
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
-import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 import type { Shortcut } from './shortcut.ts';
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 export declare function TooltipProvider({ children }: {

package/dist/Tooltip.js

@@ -1,6 +1,6 @@
 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 { Tooltip as BaseTooltip } from '@base-ui/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. */
@@ -16,6 +16,6 @@ export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top',
         }
         return registerShortcutHint(element, kbd);
     }, [kbd]);
-    return (_jsxs(BaseTooltip.Root, { disabled: disabled, open: open, onOpenChange: onOpenChange, disableHoverablePopup: children === undefined, children: [children && _jsx(BaseTooltip.Trigger, { ref: hintRef, render: children, "aria-label": name && typeof label === 'string' ? label : undefined }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { anchor: anchor, side: side, sideOffset: sideOffset, className: "tooltip-positioner", children: _jsx(BaseTooltip.Popup, { role: "tooltip", 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 &&
+    return (_jsxs(BaseTooltip.Root, { disabled: disabled, open: open, onOpenChange: onOpenChange, disableHoverablePopup: children === undefined, children: [children && _jsx(BaseTooltip.Trigger, { ref: hintRef, render: children, "aria-label": name && typeof label === 'string' ? label : undefined }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { anchor: anchor, side: side, sideOffset: sideOffset, className: "tooltip-positioner", children: _jsx(BaseTooltip.Popup, { role: "tooltip", className: "tooltip-popup", children: _jsxs("div", { 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/clipboard.d.ts

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

package/dist/clipboard.js

@@ -2,8 +2,18 @@
  * 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);
+/* Resolves to whether the text got there, for a caller that tells the person; it never rejects. */
+export const copyText = async (text) => {
+    try {
+        if (!navigator.clipboard) {
+            return false;
+        }
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch {
+        return false;
+    }
 };
 /* What is on the clipboard, or nothing at all when the browser will not say. */
 export const readClipboardText = async () => {

package/dist/dialog/parts.d.ts

@@ -1,12 +1,12 @@
 import { type ComponentProps } from 'react';
-import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
-import { useRender } from '@base-ui-components/react/use-render';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { useRender } from '@base-ui/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 declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export type DialogPopupProps = ComponentProps<typeof BaseDialog.Popup> & {
     size?: keyof typeof SIZE;
     nested?: boolean;

package/dist/dialog/parts.js

@@ -1,8 +1,8 @@
 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 { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { useRender } from '@base-ui/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. */

package/dist/file-tree/helpers.d.ts

@@ -6,6 +6,7 @@ export interface SortRow {
 export declare function directoryHandle(model: FileTree, path: string): FileTreeDirectoryHandle | null;
 export declare function pathOfRow(row: FileTreeVisibleRow): string;
 export declare function visibleRows(model: FileTree): FileTreeVisibleRow[];
+export declare function visibleRowsAround(model: FileTree, start: number, count: number): FileTreeVisibleRow[];
 export declare function applyExpansion(model: FileTree, collapsed: ReadonlySet<string>, keyOf?: FoldKeyOf): void;
 export declare function resetExpandedPaths(model: FileTree, paths: readonly string[], expanded: ReadonlySet<string>): void;
 export declare function rowPathOf(event: {

package/dist/file-tree/helpers.js

@@ -10,6 +10,15 @@ export function pathOfRow(row) {
 export function visibleRows(model) {
     return model.getVisibleRows(0, model.getVisibleCount()).map((row) => ({ ...row, path: pathOfRow(row) }));
 }
+/* The `count` rows from `start` and one on each side, for a neighbor's selection, without copying the whole list. */
+export function visibleRowsAround(model, start, count) {
+    const first = Math.max(0, start - 1);
+    const last = Math.min(model.getVisibleCount() - 1, start + count);
+    if (last < first) {
+        return [];
+    }
+    return model.getVisibleRows(first, last).map((row) => ({ ...row, path: pathOfRow(row) }));
+}
 export function applyExpansion(model, collapsed, keyOf) {
     for (let pass = 0; pass < EXPANSION_PASSES; pass++) {
         const { collapse, expand } = expansionChanges(visibleRows(model), collapsed, keyOf);

package/dist/file-tree/parts.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
 export type FileTreeRootProps = useRender.ComponentProps<'div'> & {

package/dist/file-tree/parts.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { FileTree as PierreFileTree } from '@pierre/trees/react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';

package/dist/file-tree/use-slots.d.ts

@@ -4,4 +4,12 @@ export interface RowSlot {
     control: HTMLElement;
     decoration: HTMLElement;
 }
+export interface Port {
+    rowElement: HTMLElement;
+    control: HTMLElement;
+    decoration: HTMLElement;
+    lightControl: HTMLElement;
+    lightDecoration: HTMLElement;
+}
+export declare function positionPorts(ports: Iterable<Port>): void;
 export declare function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string): RowSlot[];

package/dist/file-tree/use-slots.js

@@ -1,7 +1,64 @@
 import { useEffect, useId, useState } from 'react';
 import { flushSync } from 'react-dom';
-import { pathOfRow, visibleRows } from './helpers.js';
+import { pathOfRow, visibleRows, visibleRowsAround } from './helpers.js';
 import { FILE_TREE_CSS } from './style.js';
+/*
+ * The rows of the mounted window, read from the spacer beta.6 puts above it (its first index times the
+ * row height), so a scroll frame copies those and not every visible row. The whole list stands in when
+ * the spacer is missing or the model already moved past what is mounted.
+ */
+function mountedRows(model, shadow, elements) {
+    const spacer = shadow.querySelector('[data-file-tree-virtualized-sticky-offset]');
+    const offset = spacer === null ? Number.NaN : Number.parseFloat(spacer.style.height);
+    const itemHeight = model.getItemHeight();
+    if (!Number.isFinite(offset) || itemHeight <= 0) {
+        return visibleRows(model);
+    }
+    // A folder pinned to the top leaves the flow, but still takes its index in the window.
+    const pinned = shadow.querySelectorAll('[data-file-tree-sticky-row="true"]').length;
+    const rows = visibleRowsAround(model, Math.round(offset / itemHeight), elements.length + pinned);
+    const paths = new Set(rows.map((row) => row.path));
+    return elements.every((element) => element.dataset.itemPath === undefined || paths.has(element.dataset.itemPath)) ? rows : visibleRows(model);
+}
+/*
+ * Lines the ports up with their rows: every size first, then the spaces they reserve, then every offset,
+ * then the ports, so a pass forces two layouts at most however many rows are mounted.
+ */
+export function positionPorts(ports) {
+    const spaced = [...ports].map((port) => ({
+        port,
+        control: port.lightControl.childNodes.length > 0 ? Math.ceil(port.lightControl.getBoundingClientRect().width) + 6 : 0,
+        decoration: port.lightDecoration.childNodes.length > 0 ? Math.ceil(port.lightDecoration.getBoundingClientRect().width) + 6 : 0
+    }));
+    for (const { port, control, decoration } of spaced) {
+        setSpace(port.rowElement, '--adecore-tree-control-space', control);
+        setSpace(port.rowElement, '--adecore-tree-decoration-space', decoration);
+    }
+    const placed = spaced.map(({ port, control, decoration }) => {
+        const row = port.rowElement;
+        const content = row.querySelector('[data-item-section="content"]');
+        const icon = row.querySelector('[data-item-section="icon"]');
+        return {
+            port,
+            top: `${row.offsetTop}px`,
+            controlLeft: `${row.offsetLeft + (icon?.offsetLeft ?? 4) - control}px`,
+            decorationLeft: `${row.offsetLeft + (content === null ? row.offsetWidth - decoration - 2 : content.offsetLeft + content.offsetWidth + 6)}px`
+        };
+    });
+    for (const { port, top, controlLeft, decorationLeft } of placed) {
+        port.control.style.top = top;
+        port.control.style.left = controlLeft;
+        port.decoration.style.top = top;
+        port.decoration.style.left = decorationLeft;
+    }
+}
+// An unchanged space is left alone, so a pass that only scrolled measures once.
+function setSpace(row, name, space) {
+    const value = `${space}px`;
+    if (row.style.getPropertyValue(name) !== value) {
+        row.style.setProperty(name, value);
+    }
+}
 // beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
 export function useFileTreeSlots(model, frame, label) {
     const prefix = useId().replaceAll(':', '');
@@ -17,23 +74,7 @@ export function useFileTreeSlots(model, frame, label) {
         let disposed = false;
         let pending = false;
         let snapshot = null;
-        const position = () => {
-            for (const port of ports.values()) {
-                const row = port.rowElement;
-                const content = row.querySelector('[data-item-section="content"]');
-                const icon = row.querySelector('[data-item-section="icon"]');
-                const control = port.lightControl;
-                const decoration = port.lightDecoration;
-                const controlSpace = control.childNodes.length > 0 ? Math.ceil(control.getBoundingClientRect().width) + 6 : 0;
-                const decorationSpace = decoration.childNodes.length > 0 ? Math.ceil(decoration.getBoundingClientRect().width) + 6 : 0;
-                row.style.setProperty('--adecore-tree-control-space', `${controlSpace}px`);
-                row.style.setProperty('--adecore-tree-decoration-space', `${decorationSpace}px`);
-                port.control.style.top = `${row.offsetTop}px`;
-                port.control.style.left = `${row.offsetLeft + (icon?.offsetLeft ?? 4) - controlSpace}px`;
-                port.decoration.style.top = `${row.offsetTop}px`;
-                port.decoration.style.left = `${row.offsetLeft + (content === null ? row.offsetWidth - decorationSpace - 2 : content.offsetLeft + content.offsetWidth + 6)}px`;
-            }
-        };
+        const position = () => positionPorts(ports.values());
         const resize = new ResizeObserver(position);
         const dropPort = (port) => {
             port.control.remove();
@@ -87,11 +128,12 @@ export function useFileTreeSlots(model, frame, label) {
                 resize.observe(current);
             }
             shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
-            const rows = visibleRows(model);
-            const byPath = new Map(rows.map((row) => [pathOfRow(row), row]));
             const elements = [
                 ...shadow.querySelectorAll('[data-type="item"]:not([data-item-parked="true"]):not([data-file-tree-sticky-row="true"])')
             ];
+            const rows = mountedRows(model, shadow, elements);
+            const byPath = new Map(rows.map((row) => [pathOfRow(row), row]));
+            const byIndex = new Map(rows.map((row) => [row.index, row]));
             const live = new Set(elements);
             for (const [element, port] of ports) {
                 if (!live.has(element)) {
@@ -107,8 +149,8 @@ export function useFileTreeSlots(model, frame, label) {
                     continue;
                 }
                 element.dataset.interactive = 'true';
-                element.dataset.joinedStart = String(row.isSelected && rows[row.index - 1]?.isSelected === true);
-                element.dataset.joinedEnd = String(row.isSelected && rows[row.index + 1]?.isSelected === true);
+                element.dataset.joinedStart = String(row.isSelected && byIndex.get(row.index - 1)?.isSelected === true);
+                element.dataset.joinedEnd = String(row.isSelected && byIndex.get(row.index + 1)?.isSelected === true);
                 let port = ports.get(element);
                 if (port === undefined) {
                     serial++;

package/dist/format/datetime.d.ts

@@ -9,3 +9,4 @@ export declare const formatDayClock: (at: Date | number) => string;
 export declare const formatNumericDate: (at: Date | number) => string;
 export declare const isSameDay: (a: Date | number, b: Date | number) => boolean;
 export declare const formatMoment: (at: Date | number, now?: Date | number) => string;
+export declare const formatAge: (at: Date | number, now?: Date | number) => string;