@adecore/ui 0.23.1 → 0.24.1

package/src/PanelHeader.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 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.tsx';
 
 export type PanelHeaderProps = useRender.ComponentProps<'header'> & {

package/src/SectionLabel.tsx

@@ -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/src/Select.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
-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/src/SelectSearch.tsx

@@ -1,5 +1,5 @@
 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/src/Slider.tsx

@@ -1,6 +1,6 @@
 import { useId, type Ref } 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.ts';
 import { placesOf } from './step-places.ts';
 

package/src/Surface.tsx

@@ -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]';
 

package/src/Switch.tsx

@@ -1,6 +1,6 @@
 import type { Ref } from 'react';
 import clsx from 'clsx';
-import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 
 export interface SwitchProps {
     checked: boolean;

package/src/Toasts.tsx

@@ -2,6 +2,7 @@ import { useState, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { Button } from './Button.tsx';
 import { Icon } from './Icon.tsx';
 import { IconButton } from './IconButton.tsx';
 import { Kbd } from './Kbd.tsx';
@@ -57,9 +58,9 @@ function TimerRing({ deadline, onDismiss }: { deadline: ToastDeadline; onDismiss
 function ActionButton({ action }: { action: ToastAction }) {
     return (
         <span className="flex items-center gap-2">
-            <button className="rounded-sm text-sm font-semibold text-text hover:text-text-muted" onClick={action.run}>
+            <Button size="xs" onClick={action.run}>
                 {action.label}
-            </button>
+            </Button>
             {action.shortcut && <Kbd shortcut={action.shortcut} className="font-sans text-xs text-text-faint" />}
         </span>
     );
@@ -90,7 +91,7 @@ function ToastCard<T extends Toast>({ toast, footer, onDismiss }: { toast: T; fo
                 )}
                 {/* Two or more would squeeze the title beside them, so they get a line of their own. */}
                 {actions.length > 1 && (
-                    <span className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1">
+                    <span className="mt-1 -ml-2 flex flex-wrap items-center gap-x-2 gap-y-1">
                         {actions.map((action) => (
                             <ActionButton key={action.label} action={action} />
                         ))}
@@ -133,9 +134,7 @@ export interface ToastsProps<T extends Toast> {
  */
 export function Toasts<T extends Toast>({ store, footer, className, ref }: ToastsProps<T>) {
     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 (
         <div
             ref={ref}

package/src/Tooltip.tsx

@@ -1,5 +1,5 @@
 import { useCallback, 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 { Kbd } from './Kbd.tsx';
 import type { Shortcut } from './shortcut.ts';
 import { registerShortcutHint } from './shortcut-hints.ts';
@@ -53,10 +53,10 @@ export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top',
             <BaseTooltip.Portal>
                 <BaseTooltip.Positioner anchor={anchor} side={side} sideOffset={sideOffset} className="tooltip-positioner">
                     <BaseTooltip.Popup role="tooltip" className="tooltip-popup">
-                        <BaseTooltip.Viewport className="max-w-72 px-[9px] py-[5px] text-pretty">
+                        {/* Not Base UI's Viewport: that one morphs between the triggers of one popup and
+                            measures and clones its content to do so, while every hint here has a root of its own. */}
+                        <div className="max-w-72 px-[9px] py-[5px] text-pretty">
                             <span className="wrap-anywhere">{label}</span>
-                            {/* The viewport wraps its children in a div of its own, so the 8px
-                                between the label and the shortcut has to sit on the shortcut itself. */}
                             {kbd !== undefined &&
                                 (typeof kbd === 'string' ? (
                                     <Kbd variant="inline" className="ml-2">
@@ -65,7 +65,7 @@ export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top',
                                 ) : (
                                     <Kbd shortcut={kbd} variant="inline" className="ml-2" />
                                 ))}
-                        </BaseTooltip.Viewport>
+                        </div>
                     </BaseTooltip.Popup>
                 </BaseTooltip.Positioner>
             </BaseTooltip.Portal>

package/src/clipboard.ts

@@ -3,8 +3,17 @@
  * and allowed, and there is nothing a person can do about a refusal, so both sides stay quiet.
  */
 
-export const copyText = (text: string): void => {
-    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: string): Promise<boolean> => {
+    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. */

package/src/dialog/parts.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useState, type ComponentProps } 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.ts';
 import { useDialogLayer } from '../dialog-layer.ts';
 

package/src/file-tree/helpers.ts

@@ -21,6 +21,16 @@ export function visibleRows(model: FileTree): FileTreeVisibleRow[] {
     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: FileTree, start: number, count: number): FileTreeVisibleRow[] {
+    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: FileTree, collapsed: ReadonlySet<string>, keyOf?: FoldKeyOf): void {
     for (let pass = 0; pass < EXPANSION_PASSES; pass++) {
         const { collapse, expand } = expansionChanges(visibleRows(model), collapsed, keyOf);

package/src/file-tree/parts.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode } 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, type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
 import { useTranslation } from 'react-i18next';

package/src/file-tree/use-slots.ts

@@ -1,7 +1,7 @@
 import { useEffect, useId, useState } from 'react';
 import { flushSync } from 'react-dom';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
-import { pathOfRow, visibleRows } from './helpers.ts';
+import { pathOfRow, visibleRows, visibleRowsAround } from './helpers.ts';
 import { FILE_TREE_CSS } from './style.ts';
 
 export interface RowSlot {
@@ -10,7 +10,7 @@ export interface RowSlot {
     decoration: HTMLElement;
 }
 
-interface Port {
+export interface Port {
     rowElement: HTMLElement;
     control: HTMLElement;
     decoration: HTMLElement;
@@ -18,6 +18,66 @@ interface Port {
     lightDecoration: HTMLElement;
 }
 
+/*
+ * 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: FileTree, shadow: ShadowRoot, elements: readonly HTMLElement[]): FileTreeVisibleRow[] {
+    const spacer = shadow.querySelector<HTMLElement>('[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: Iterable<Port>): void {
+    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<HTMLElement>('[data-item-section="content"]');
+        const icon = row.querySelector<HTMLElement>('[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: HTMLElement, name: string, space: number): void {
+    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: FileTree, frame: HTMLElement | null, label: string) {
     const prefix = useId().replaceAll(':', '');
@@ -35,23 +95,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
         let pending = false;
         let snapshot: string | null = null;
 
-        const position = (): void => {
-            for (const port of ports.values()) {
-                const row = port.rowElement;
-                const content = row.querySelector<HTMLElement>('[data-item-section="content"]');
-                const icon = row.querySelector<HTMLElement>('[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 = (): void => positionPorts(ports.values());
 
         const resize = new ResizeObserver(position);
         const dropPort = (port: Port): void => {
@@ -106,11 +150,12 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                 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<HTMLElement>('[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)) {
@@ -126,8 +171,8 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                     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/src/format/datetime.ts

@@ -1,3 +1,4 @@
+import { formatAgo } from './duration.ts';
 import { dateFormatter, wordFormatter } from './locale.ts';
 
 /* The parts that are a word rather than a number, and so come from the language and not the region. */
@@ -63,3 +64,19 @@ export const isSameDay = (a: Date | number, b: Date | number): boolean => {
 };
 
 export const formatMoment = (at: Date | number, now: Date | number = Date.now()): string => (isSameDay(at, now) ? formatClock(at) : formatDayClock(at));
+
+const WEEK = 7 * 24 * 60 * 60 * 1000;
+
+/*
+ * How old a row is, for its right edge: `3d ago` for the first week, then the day, with the year once
+ * it is not this one. An `at` ahead of `now`, from a clock that runs ahead, reads as now.
+ */
+export const formatAge = (at: Date | number, now: Date | number = Date.now()): string => {
+    const date = toDate(at);
+    const today = toDate(now);
+    const past = today.getTime() - date.getTime();
+    if (past < WEEK) {
+        return formatAgo(past);
+    }
+    return date.getFullYear() === today.getFullYear() ? formatDay(date) : formatDayWithYear(date);
+};

package/src/format/index.ts

@@ -1,6 +1,7 @@
 /* Every number, date, time and duration a person reads, written the way the language and the region they set ask for. */
 
 export {
+    formatAge,
     formatClock,
     formatDateTime,
     formatDay,

package/src/index.ts

@@ -25,7 +25,7 @@ export type {
 } from './menu/parts.tsx';
 export type { KeyValueListItemProps, KeyValueListNameProps, KeyValueListRootProps, KeyValueListValueProps } from './key-value-list/parts.tsx';
 export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
-export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue } from './tabs/parts.tsx';
+export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue, TabsVariant } from './tabs/parts.tsx';
 
 export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
 export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
@@ -49,11 +49,12 @@ export { Input, TextArea, type InputProps, type TextAreaProps } from './Input.ts
 export { Kbd, KeyCap, Keys, type KbdProps, type KeyCapProps, type KeysProps } from './Kbd.tsx';
 export { ListRow, type ListRowProps } from './ListRow.tsx';
 export { Meter, type MeterProps } from './Meter.tsx';
+export { MiddleTruncate, type MiddleTruncateProps } from './MiddleTruncate.tsx';
 export { PanelEmpty, type PanelEmptyProps } from './PanelEmpty.tsx';
 export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';
 export { Pill, type PillProps } from './Pill.tsx';
 export { PromptDialog, type PromptDialogProps } from './PromptDialog.tsx';
-export { ProjectSwitcher, type ProjectSwitcherItem, type ProjectSwitcherProps } from './ProjectSwitcher.tsx';
+export { ProjectSwitcher, ProjectSwitcherGroups, type ProjectSwitcherItem, type ProjectSwitcherProps } from './ProjectSwitcher.tsx';
 export { SectionLabel, type SectionLabelProps } from './SectionLabel.tsx';
 export { SegmentBar, type SegmentBarPart, type SegmentBarProps } from './SegmentBar.tsx';
 export { Segmented, type SegmentedOption, type SegmentedProps } from './Segmented.tsx';
@@ -128,6 +129,8 @@ export { Workspace, type WorkspaceProps } from './workspace/Workspace.tsx';
 export type { WorkspaceLayout } from './workspace/context.ts';
 export { DocumentTab, TabStrip, type DocumentTabProps, type TabStripProps, type TabStripItem } from './workspace/TabStrip.tsx';
 export { SplitView, type SplitViewProps, type SplitViewInfo, type SplitViewBounds, type SplitDropTarget, type SplitDrag } from './workspace/SplitView.tsx';
+export { DropPreview, type DropPreviewProps } from './workspace/DropPreview.tsx';
+export { dropPreviewPath, rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape, type TabDrop } from './workspace/preview.ts';
 export {
     createSplitLayout,
     normalizeSplitLayout,
@@ -141,4 +144,4 @@ export {
     type SplitLayout,
     type SplitCommand
 } from './workspace/model.ts';
-export type { SplitRect, SplitEdges, SplitMinimum } from './workspace/geometry.ts';
+export { tabGapAt, type SplitRect, type SplitEdges, type SplitMinimum } from './workspace/geometry.ts';

package/src/key-value-list/parts.tsx

@@ -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';
 
 export type KeyValueListRootProps = useRender.ComponentProps<'dl'> & {
     /* A hairline between rows, for a long list such as the headers of a message. Without it the rows sit close, for a few facts in a card. */

package/src/locales/en.ts

@@ -0,0 +1,82 @@
+export default {
+    action: {
+        cancel: 'Cancel',
+        copy: 'Copy',
+        copyError: 'Copy error',
+        dismiss: 'Dismiss',
+        reload: 'Reload',
+        retry: 'Try again',
+        select: 'Select',
+        selectAll: 'Select all'
+    },
+    accent: {
+        more: 'More colors'
+    },
+    settings: {
+        title: 'Settings',
+        section: 'Settings section',
+        sections: 'Settings sections',
+        close: 'Close settings',
+        failed: 'This settings page failed to render',
+        search: {
+            placeholder: 'Search settings',
+            clear: 'Clear search',
+            none: 'Nothing matches "{{query}}".',
+            results: 'Search results',
+            pane: 'Section'
+        }
+    },
+    controls: {
+        stepper: {
+            smaller: 'Smaller',
+            larger: 'Larger',
+            smallerFor: '{{label}}: smaller',
+            largerFor: '{{label}}: larger'
+        }
+    },
+    select: {
+        search: 'Search',
+        noMatch: 'No option matches “{{query}}”'
+    },
+    iconPicker: {
+        label: 'Icon',
+        none: 'No icon',
+        search: 'Find an icon',
+        clear: 'Clear search',
+        noMatch: 'No icon matches “{{query}}”'
+    },
+    zoom: {
+        out: 'Zoom out',
+        in: 'Zoom in',
+        presets: 'Zoom presets',
+        fit: 'Zoom to fit',
+        fitEverything: 'Fit everything'
+    },
+    waveform: {
+        position: '{{time}} of {{duration}}'
+    },
+    projectSwitcher: {
+        label: 'Projects',
+        recent: 'Recent projects',
+        actionsFor: 'Actions for {{name}}'
+    },
+    tabs: {
+        more: 'More',
+        close: 'Close tab'
+    },
+    tree: {
+        label: 'Files',
+        expand: 'Expand',
+        collapse: 'Collapse'
+    },
+    workspace: {
+        tabs: 'Open views',
+        unsaved: 'Unsaved changes',
+        closeTab: 'Close {{name}}',
+        resize: 'Resize panels',
+        pane: 'Panel',
+        movePane: 'Move panel',
+        maximize: 'Maximize panel',
+        restore: 'Restore panels'
+    }
+};

package/src/locales/nl.ts

@@ -0,0 +1,82 @@
+export default {
+    action: {
+        cancel: 'Annuleren',
+        copy: 'Kopiëren',
+        copyError: 'Fout kopiëren',
+        dismiss: 'Sluiten',
+        reload: 'Herladen',
+        retry: 'Opnieuw proberen',
+        select: 'Selecteren',
+        selectAll: 'Alles selecteren'
+    },
+    accent: {
+        more: 'Meer kleuren'
+    },
+    settings: {
+        title: 'Instellingen',
+        section: 'Onderdeel van de instellingen',
+        sections: 'Onderdelen van de instellingen',
+        close: 'Instellingen sluiten',
+        failed: 'Deze instellingenpagina kon niet worden getekend',
+        search: {
+            placeholder: 'Instellingen zoeken',
+            clear: 'Zoekopdracht wissen',
+            none: 'Niets komt overeen met "{{query}}".',
+            results: 'Zoekresultaten',
+            pane: 'Onderdeel'
+        }
+    },
+    controls: {
+        stepper: {
+            smaller: 'Kleiner',
+            larger: 'Groter',
+            smallerFor: '{{label}}: kleiner',
+            largerFor: '{{label}}: groter'
+        }
+    },
+    select: {
+        search: 'Zoeken',
+        noMatch: 'Geen optie past bij “{{query}}”'
+    },
+    iconPicker: {
+        label: 'Icoon',
+        none: 'Geen icoon',
+        search: 'Zoek een icoon',
+        clear: 'Zoekopdracht wissen',
+        noMatch: 'Geen icoon past bij “{{query}}”'
+    },
+    zoom: {
+        out: 'Uitzoomen',
+        in: 'Inzoomen',
+        presets: 'Zoomstanden',
+        fit: 'Zoomen tot alles past',
+        fitEverything: 'Alles laten passen'
+    },
+    waveform: {
+        position: '{{time}} van {{duration}}'
+    },
+    projectSwitcher: {
+        label: 'Projecten',
+        recent: 'Recente projecten',
+        actionsFor: 'Acties voor {{name}}'
+    },
+    tabs: {
+        more: 'Meer',
+        close: 'Tabblad sluiten'
+    },
+    tree: {
+        label: 'Bestanden',
+        expand: 'Uitvouwen',
+        collapse: 'Invouwen'
+    },
+    workspace: {
+        tabs: 'Open views',
+        unsaved: 'Niet-opgeslagen wijzigingen',
+        closeTab: 'Sluit {{name}}',
+        resize: 'Panelen vergroten of verkleinen',
+        pane: 'Paneel',
+        movePane: 'Paneel verplaatsen',
+        maximize: 'Paneel maximaliseren',
+        restore: 'Panelen herstellen'
+    }
+};

package/src/locales.ts

@@ -1,6 +1,7 @@
 import type { i18n as I18n } from 'i18next';
-import en from './locales/en.json' with { type: 'json' };
-import nl from './locales/nl.json' with { type: 'json' };
+/* The words are modules, not JSON: Node needs `with { type: 'json' }` on a JSON import, and a browser refuses it on the JavaScript Vite serves. */
+import en from './locales/en.ts';
+import nl from './locales/nl.ts';
 
 /* The words of this library live in a namespace of their own, which the app adds to its i18next beside its own namespaces. */
 export const UI_NAMESPACE = 'ui';

package/src/menu/parts.tsx

@@ -1,10 +1,10 @@
 import { createContext, useContext, type ComponentProps, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { Check, ChevronRight, type LucideIcon } from 'lucide-react';
-import { ContextMenu as BaseContextMenu } from '@base-ui-components/react/context-menu';
-import { Menu as BaseMenu } from '@base-ui-components/react/menu';
-import { Separator as BaseSeparator } from '@base-ui-components/react/separator';
-import { useRender } from '@base-ui-components/react/use-render';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.ts';
 import { Icon } from '../Icon.tsx';
 import { Tooltip } from '../Tooltip.tsx';

package/src/middle-truncate.ts

@@ -0,0 +1,41 @@
+export interface MiddleCut {
+    head: string;
+    /* What the ellipsis stands for; still in the text, so a copy or a find reads it. */
+    middle: string;
+    tail: string;
+}
+
+export const MIDDLE_ELLIPSIS = '…';
+
+/*
+ * The head and tail of `text` that keep the most of it around an ellipsis within `width`, or null
+ * when the whole text fits. The tail gets the odd character, since the end of a path or a branch is
+ * what tells two of them apart. Code points, never UTF-16 units, so a cut never halves a character.
+ */
+export function fitMiddle(text: string, width: number, measure: (text: string) => number): MiddleCut | null {
+    if (measure(text) <= width) {
+        return null;
+    }
+    const characters = Array.from(text);
+    const cutAt = (kept: number): MiddleCut => {
+        const headLength = Math.floor(kept / 2);
+        const tailStart = characters.length - (kept - headLength);
+        return {
+            head: characters.slice(0, headLength).join(''),
+            middle: characters.slice(headLength, tailStart).join(''),
+            tail: characters.slice(tailStart).join('')
+        };
+    };
+    const fits = (cut: MiddleCut): boolean => measure(cut.head + MIDDLE_ELLIPSIS + cut.tail) <= width;
+    let low = 0;
+    let high = characters.length - 1;
+    while (low < high) {
+        const kept = Math.ceil((low + high) / 2);
+        if (fits(cutAt(kept))) {
+            low = kept;
+        } else {
+            high = kept - 1;
+        }
+    }
+    return cutAt(low);
+}

package/src/popover/parts.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
-import { Popover as BasePopover } from '@base-ui-components/react/popover';
-import { PreviewCard as BasePreviewCard } from '@base-ui-components/react/preview-card';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
 import { withClass } from '../class-name.ts';
 import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';