@adecore/ui 0.14.0

package/src/format/number.ts

@@ -0,0 +1,87 @@
+import { numberFormatter } from './locale.ts';
+
+const WHOLE: Intl.NumberFormatOptions = { maximumFractionDigits: 0 };
+const ONE_DECIMAL: Intl.NumberFormatOptions = { maximumFractionDigits: 1 };
+
+/* A count as a region groups one: `1,234,567` there, `1.234.567` here. */
+export const formatNumber = (value: number): string => numberFormatter(WHOLE).format(Math.round(value));
+
+/* The same, to one decimal, where the fraction is the part that means something. */
+export const formatDecimal = (value: number): string => numberFormatter(ONE_DECIMAL).format(value);
+
+const fixedSpecs = new Map<number, Intl.NumberFormatOptions>();
+
+/* Always `decimals` places, so values that follow each other keep one width: `1,0` and `1,5`, never `1` and `1,5`. */
+export const formatFixed = (value: number, decimals: number): string => {
+    let spec = fixedSpecs.get(decimals);
+    if (spec === undefined) {
+        spec = { minimumFractionDigits: decimals, maximumFractionDigits: decimals };
+        fixedSpecs.set(decimals, spec);
+    }
+    return numberFormatter(spec).format(value);
+};
+
+/* Percent as Activity Monitor writes it: a decimal under ten, where the difference still shows. */
+export const formatPercent = (value: number): string => `${value < 10 ? formatDecimal(value) : formatNumber(value)}%`;
+
+/*
+ * The option objects a money formatter is cached on, one per currency and precision. The cache is
+ * keyed on the object itself, so building a fresh one per call would build a fresh formatter too.
+ */
+const moneySpecs = new Map<string, Intl.NumberFormatOptions>();
+
+const moneySpec = (currency: string, maximumFractionDigits: number | undefined): Intl.NumberFormatOptions => {
+    const key = `${currency}|${maximumFractionDigits ?? ''}`;
+    const known = moneySpecs.get(key);
+    if (known !== undefined) {
+        return known;
+    }
+    // Narrow, or a Dutch region writes a dollar amount as `US$ 5.480,96`, which is a currency lesson
+    // nobody asked for in a table of prices.
+    const spec: Intl.NumberFormatOptions = {
+        style: 'currency',
+        currency,
+        currencyDisplay: 'narrowSymbol',
+        ...(maximumFractionDigits ? { maximumFractionDigits } : {})
+    };
+    moneySpecs.set(key, spec);
+    return spec;
+};
+
+/* An amount in the currency it is already in, as a bank statement would print it. */
+export const formatMoney = (value: number, currency: string, maximumFractionDigits?: number): string =>
+    numberFormatter(moneySpec(currency, maximumFractionDigits)).format(value);
+
+const SIGNIFICANT_MONEY: Intl.NumberFormatOptions = { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol', maximumSignificantDigits: 3 };
+
+/* Dollars to three significant digits, for amounts that run from a fraction of a cent to tens of dollars in one list. */
+export const formatUsdSignificant = (value: number): string => numberFormatter(SIGNIFICANT_MONEY).format(value);
+
+/* `1.2M`, `412K`, `640`: a token count is read as a size, not counted. */
+export const formatTokens = (value: number): string => {
+    const rounded = Math.round(value);
+    if (rounded >= 1_000_000) {
+        return `${formatDecimal(rounded >= 10_000_000 ? Math.round(rounded / 1_000_000) : rounded / 1_000_000)}M`;
+    }
+    if (rounded >= 1_000) {
+        return `${formatDecimal(rounded >= 10_000 ? Math.round(rounded / 1_000) : rounded / 1_000)}K`;
+    }
+    return formatNumber(rounded);
+};
+
+const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;
+
+/*
+ * A size the way a person says it, with the number in the region's own notation: whole bytes up to
+ * a kilobyte, one decimal above that. `whole` is for a column that only has room for a round number.
+ */
+export const formatBytes = (bytes: number, whole = false): string => {
+    let value = Math.max(0, bytes);
+    let unit = 0;
+    while (value >= 1024 && unit < UNITS.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    const decimals = unit > 0 && !whole && value < 10;
+    return `${decimals ? formatDecimal(value) : formatNumber(value)} ${UNITS[unit]}`;
+};

package/src/format/regions.ts

@@ -0,0 +1,20 @@
+/*
+ * The regions a person can read this app in, beside the one its language comes with and the one the
+ * operating system was set to. The list is short on purpose. It is here for a machine whose region
+ * reads nothing like the person in front of it, not as a country picker.
+ */
+export const FORMAT_LANGUAGE = 'language';
+export const FORMAT_SYSTEM = 'system';
+
+/* Only the tags. A country names itself in the language the interface is in (`Intl.DisplayNames`),
+   so no translation file ever carries a list of countries. */
+export const FORMAT_REGIONS = ['nl-NL', 'en-US', 'en-GB', 'de-DE', 'fr-FR', 'es-ES', 'sv-SE', 'ja-JP'] as const;
+
+export const FORMAT_REGION_CHOICES: readonly string[] = [FORMAT_LANGUAGE, FORMAT_SYSTEM, ...FORMAT_REGIONS];
+
+/* The country of a region tag, named in `language`: `nl-NL` in English is "Netherlands". */
+export const regionName = (region: string, language: string): string =>
+    new Intl.DisplayNames([language], { type: 'region' }).of(region.slice(region.indexOf('-') + 1)) ?? region;
+
+/* A stored region, or the language's own for anything this version does not offer. */
+export const formatRegionFrom = (stored: unknown): string => FORMAT_REGION_CHOICES.find((region) => region === stored) ?? FORMAT_LANGUAGE;

package/src/format/time-zone.ts

@@ -0,0 +1,2 @@
+/* The IANA time zone this machine is set to, or null when the runtime does not say. */
+export const localTimeZone = (): string | null => Intl.DateTimeFormat().resolvedOptions().timeZone || null;

package/src/icon-button-size.ts

@@ -0,0 +1,6 @@
+export type IconButtonSize = 'md' | 'sm' | 'xs' | '2xs';
+
+/* The size decides the square and the radius (`.icon-btn` in `theme.css`) and the icon inside: 16 in 32, 14 in 28, 12 below. */
+export const ICON_BUTTON_CLASS: Record<IconButtonSize, string | undefined> = { md: undefined, sm: 'icon-btn-sm', xs: 'icon-btn-xs', '2xs': 'icon-btn-2xs' };
+
+export const ICON_BUTTON_ICON_SIZE: Record<IconButtonSize, number> = { md: 16, sm: 14, xs: 12, '2xs': 12 };

package/src/icon-picker.ts

@@ -0,0 +1,112 @@
+import type { LucideIcon } from 'lucide-react';
+
+/* A heading over part of the icons. The label arrives in the reader's language; the picker never translates it. */
+export interface IconPickerGroup {
+    id: string;
+    label: string;
+    icons: Readonly<Record<string, LucideIcon>>;
+}
+
+export type IconPickerIcons = Readonly<Record<string, LucideIcon>> | readonly IconPickerGroup[];
+
+/* A group as the grid draws it: a flat set of icons is one group without a heading. */
+export interface IconSection {
+    id: string;
+    label: string | null;
+    icons: readonly (readonly [name: string, glyph: LucideIcon])[];
+}
+
+/* Where a cell sits on the screen, in the units of `getBoundingClientRect`. */
+export interface IconCellBox {
+    left: number;
+    top: number;
+    width: number;
+}
+
+export const isGrouped = (icons: IconPickerIcons): icons is readonly IconPickerGroup[] => Array.isArray(icons);
+
+export const sectionsOf = (icons: IconPickerIcons): IconSection[] =>
+    isGrouped(icons)
+        ? icons.map((group) => ({ id: group.id, label: group.label, icons: Object.entries(group.icons) }))
+        : [{ id: '', label: null, icons: Object.entries(icons) }];
+
+/* The icons whose name, keywords or group label hold the query, case-insensitive. A group without one is left out. */
+export const filterSections = (sections: readonly IconSection[], query: string, keywords: Readonly<Record<string, readonly string[]>> = {}): IconSection[] => {
+    const needle = query.trim().toLowerCase();
+    if (needle === '') {
+        return [...sections];
+    }
+    const holds = (text: string): boolean => text.toLowerCase().includes(needle);
+    return sections.flatMap((section) => {
+        if (section.label !== null && holds(section.label)) {
+            return [section];
+        }
+        const icons = section.icons.filter(([name]) => holds(name) || (keywords[name] ?? []).some(holds));
+        return icons.length > 0 ? [{ ...section, icons }] : [];
+    });
+};
+
+/* The one icon the grid's tab stop sits on: the one last focused, else the chosen one, else the first, as long as the search shows it. */
+export const tabStopOf = (visible: readonly string[], focused: string | null, value: string | null): string | null => {
+    if (focused !== null && visible.includes(focused)) {
+        return focused;
+    }
+    if (value !== null && visible.includes(value)) {
+        return value;
+    }
+    return visible[0] ?? null;
+};
+
+/* Rows lie a few pixels apart at least, so a rounding difference between two cells of one row is no new row. */
+const SAME_ROW = 2;
+
+/*
+ * The cell a key moves the focus to, or null for a key the grid leaves alone. Up and down go by what
+ * the eye sees: the nearest cell in the next row drawn, which may belong to another group. At an edge
+ * the focus stays, so the key never scrolls the grid instead.
+ */
+export const cellForKey = (key: string, boxes: readonly IconCellBox[], from: number): number | null => {
+    const last = boxes.length - 1;
+    switch (key) {
+        case 'ArrowRight':
+            return Math.min(from + 1, last);
+        case 'ArrowLeft':
+            return Math.max(from - 1, 0);
+        case 'Home':
+            return 0;
+        case 'End':
+            return last;
+        case 'ArrowDown':
+        case 'ArrowUp':
+            break;
+        default:
+            return null;
+    }
+    const current = boxes[from];
+    if (current === undefined) {
+        return null;
+    }
+    const down = key === 'ArrowDown';
+    const tops = boxes.map((box) => box.top).filter((top) => (down ? top > current.top + SAME_ROW : top < current.top - SAME_ROW));
+    if (tops.length === 0) {
+        return from;
+    }
+    const row = down ? Math.min(...tops) : Math.max(...tops);
+    const center = current.left + current.width / 2;
+    let nearest = from;
+    let distance = Number.POSITIVE_INFINITY;
+    boxes.forEach((box, index) => {
+        if (Math.abs(box.top - row) > SAME_ROW) {
+            return;
+        }
+        const gap = Math.abs(box.left + box.width / 2 - center);
+        if (gap < distance) {
+            nearest = index;
+            distance = gap;
+        }
+    });
+    return nearest;
+};
+
+/* Escape empties a search that holds text and goes no further; on an empty one it is left to whatever else hears it, such as a dialog. */
+export const escapeClearsSearch = (key: string, query: string): boolean => key === 'Escape' && query !== '';

package/src/index.ts

@@ -0,0 +1,103 @@
+/*
+ * The components, hooks and helpers of the library. Every name here is public API; the snapshot in
+ * `exports.test.ts` turns any change to this list into a diff someone has to accept.
+ */
+
+export * as ContextMenu from './context-menu/index.parts.ts';
+export * as Dialog from './dialog/index.parts.ts';
+export * as Menu from './menu/index.parts.ts';
+export * as Popover from './popover/index.parts.ts';
+export * as PreviewCard from './preview-card/index.parts.ts';
+
+export type { DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogTextProps, DialogTitleProps } from './dialog/parts.tsx';
+export type {
+    MenuCheckProps,
+    MenuHintProps,
+    MenuLabelProps,
+    MenuPopupProps,
+    MenuRowActionProps,
+    MenuRowProps,
+    MenuRowSubmenuTriggerProps
+} from './menu/parts.tsx';
+export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
+
+export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
+export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button.tsx';
+export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup.tsx';
+export { Checkbox, type CheckboxProps } from './Checkbox.tsx';
+export { ChoiceCards, type Choice, type ChoiceCardsProps } from './ChoiceCards.tsx';
+export { CloseButton, type CloseButtonProps } from './CloseButton.tsx';
+export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch.tsx';
+export { ColumnResizeHandle, type ColumnResizeHandleProps } from './ColumnResizeHandle.tsx';
+export { DisabledReason, type DisabledReasonProps } from './DisabledReason.tsx';
+export { DockShell, type DockShellProps } from './DockShell.tsx';
+export { EmptyState, type EmptyStateProps } from './EmptyState.tsx';
+export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary.tsx';
+export { Field, FieldHint, FormError, type FieldHintProps, type FieldProps, type FormErrorProps } from './Field.tsx';
+export { FileIcon, type FileIconProps } from './FileIcon.tsx';
+export { Icon, type IconProps } from './Icon.tsx';
+export { IconButton, type IconButtonProps, type IconButtonSize } from './IconButton.tsx';
+export { IconPicker, type IconPickerGroup, type IconPickerProps } from './IconPicker.tsx';
+export { Input, TextArea, type InputProps, type TextAreaProps } from './Input.tsx';
+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 { 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 { SectionLabel, type SectionLabelProps } from './SectionLabel.tsx';
+export { SegmentBar, type SegmentBarPart, type SegmentBarProps } from './SegmentBar.tsx';
+export { Segmented, type SegmentedOption, type SegmentedProps } from './Segmented.tsx';
+export { Select, type SelectGroup, type SelectItem, type SelectProps } from './Select.tsx';
+export { Separator, type SeparatorProps } from './Separator.tsx';
+export { ShortcutHints } from './ShortcutHints.tsx';
+export { Skeleton, type SkeletonProps } from './Skeleton.tsx';
+export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
+export { Spinner, type SpinnerProps } from './Spinner.tsx';
+export { Stepper, type StepperProps } from './Stepper.tsx';
+export { Surface, type SurfaceProps } from './Surface.tsx';
+export { Switch, type SwitchProps } from './Switch.tsx';
+export { TextMenu, type TextMenuProps } from './TextMenu.tsx';
+export { Tile, type TileProps } from './Tile.tsx';
+export { Toasts, type ToastsProps } from './Toasts.tsx';
+export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from './Tooltip.tsx';
+export { UIProvider, type UIProviderProps } from './UIProvider.tsx';
+export { Waveform, type WaveformProps } from './Waveform.tsx';
+export { Wipe, type WipeProps } from './Wipe.tsx';
+export { ZoomControls, type ZoomControlsProps, type ZoomLabels, type ZoomSelection } from './ZoomControls.tsx';
+
+export { copyText, readClipboardText } from './clipboard.ts';
+export { messageOf } from './error-message.ts';
+export type { ResetKeys } from './error-boundary.ts';
+export { FILE_TREE_ICONS } from './file-icon.ts';
+export { cameThroughPortal, isInFloatingLayer } from './floating.ts';
+export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.tsx';
+export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.ts';
+export { startInputModality } from './modality.ts';
+export { isApplePlatform } from './platform.ts';
+export { Prefetcher, prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
+export { selectAllWithin, selectionWithin } from './selection.ts';
+export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts, type KeyLike, type Shortcut } from './shortcut.ts';
+export {
+    SUCCESS_MS,
+    UNDO_MS,
+    createToastStore,
+    elapsedOf,
+    type Toast,
+    type ToastAction,
+    type ToastDeadline,
+    type ToastInput,
+    type ToastKind,
+    type ToastPatch,
+    type ToastStore,
+    type ToastStoreHook
+} from './toast-store.ts';
+export { useAsyncAction, type AsyncAction } from './useAsyncAction.ts';
+export { clampColumnSize, useColumnResize, type ColumnEdge, type ColumnResize, type ColumnResizeOptions } from './useColumnResize.ts';
+export { useContentSize, type ContentSize } from './useContentSize.ts';
+export { useMeasuredWidth } from './useMeasuredWidth.ts';
+export { useNow, useTickingText } from './useNow.ts';
+export { ZOOM_PRESETS } from './zoom.ts';

package/src/lazy.tsx

@@ -0,0 +1,124 @@
+import { Suspense, lazy, useState, useSyncExternalStore, type ComponentProps, type ComponentType } from 'react';
+import { prefetcher } from './prefetch.ts';
+
+/*
+ * A module's component, loaded once and kept. `React.lazy` suspends for a tick even on a module the
+ * prefetcher already has, which shows the fallback and mounts a dialog already open; a component
+ * that is here is drawn straight away instead.
+ */
+export class LoadedComponent<Component> {
+    current: Component | null = null;
+    private readonly listeners = new Set<() => void>();
+    private readonly loader: () => Promise<Component>;
+
+    constructor(loader: () => Promise<Component>) {
+        this.loader = loader;
+    }
+
+    async load(): Promise<Component> {
+        const component = await this.loader();
+        if (this.current === null) {
+            this.current = component;
+            for (const listener of this.listeners) {
+                listener();
+            }
+        }
+        return component;
+    }
+
+    subscribe(listener: () => void): () => void {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+}
+
+const openErrorListeners = new Set<(error: unknown) => void>();
+
+/*
+ * Tells `listener` when a module that `lazyNamed` or `lazyDialog` loads for a render fails to load,
+ * which is a load a person waits on. A failed prefetch never reaches it, not even one of the same
+ * module at the same moment, so an app can answer the one without being woken by the other.
+ */
+export function onLazyOpenError(listener: (error: unknown) => void): () => void {
+    openErrorListeners.add(listener);
+    return () => {
+        openErrorListeners.delete(listener);
+    };
+}
+
+/* Only a render loads through here; the prefetcher calls `loaded.load()` itself, so its failures report nothing. */
+async function open<Component>(loaded: LoadedComponent<Component>): Promise<{ default: Component }> {
+    try {
+        return { default: await loaded.load() };
+    } catch (error) {
+        for (const listener of openErrorListeners) {
+            listener(error);
+        }
+        throw error;
+    }
+}
+
+/*
+ * `React.lazy` for a module that exports its component by name, `default` included. Every module
+ * loaded through here, or through `lazyDialog`, registers with `prefetcher`, which loads it ahead of
+ * its first opening once the app calls `prefetcher.prefetchEverything()`.
+ */
+export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(
+    load: () => Promise<Module>,
+    name: Name
+): ComponentType<ComponentProps<Module[Name]>> {
+    const loaded = new LoadedComponent(async () => (await load())[name]);
+    prefetcher.register(() => loaded.load());
+    const Lazy = lazy(() => open(loaded));
+    // Once `loaded` has it, `Lazy` never committed anything, so switching over remounts nothing.
+    const LazyNamed = (props: ComponentProps<Module[Name]>) => {
+        const Component: ComponentType<any> = loaded.current ?? Lazy;
+        return <Component {...props} />;
+    };
+    return LazyNamed;
+}
+
+/* Stays true after the first opening, so every close after it still has something mounted to animate. */
+function useOpenedOnce(open: boolean): boolean {
+    const [opened, setOpened] = useState(open);
+    if (open && !opened) {
+        setOpened(true);
+    }
+    return opened || open;
+}
+
+/*
+ * A dialog that keeps its own open state. Once its module is here, prefetched or opened, it stays
+ * mounted closed, so its first opening animates like every other; before that, opening loads it.
+ */
+export function lazyDialog<Module extends Record<Name, ComponentType>, Name extends keyof Module, State>(
+    load: () => Promise<Module>,
+    name: Name,
+    useStore: (select: (state: State) => boolean) => boolean,
+    isOpen: (state: State) => boolean
+): ComponentType {
+    const loaded = new LoadedComponent(async (): Promise<ComponentType> => (await load())[name]);
+    prefetcher.register(() => loaded.load());
+    const Dialog = lazy(() => open(loaded));
+    const subscribe = (listener: () => void) => loaded.subscribe(listener);
+    const isLoaded = () => loaded.current !== null;
+    const LazyDialog = () => {
+        const opened = useOpenedOnce(useStore(isOpen));
+        useSyncExternalStore(subscribe, isLoaded);
+        const Loaded: ComponentType | null = loaded.current;
+        if (Loaded) {
+            return <Loaded />;
+        }
+        if (!opened) {
+            return null;
+        }
+        return (
+            <Suspense fallback={null}>
+                <Dialog />
+            </Suspense>
+        );
+    };
+    return LazyDialog;
+}

package/src/locales/en.json

@@ -0,0 +1,59 @@
+{
+  "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"
+    }
+  },
+  "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}}"
+  }
+}

package/src/locales/nl.json

@@ -0,0 +1,59 @@
+{
+  "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"
+    }
+  },
+  "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}}"
+  }
+}

package/src/locales.ts

@@ -0,0 +1,21 @@
+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 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';
+
+/*
+ * Every language the library speaks, by language code. Small enough to ship whole, which is what lets
+ * `addUiResources` run synchronously before the first render, so no word ever shows as its key.
+ */
+export const UI_RESOURCES: Readonly<Record<string, Record<string, unknown>>> = { en, nl };
+
+/* Adds the `ui` namespace in every language to an i18next instance. A language the app already filled keeps its words. */
+export const addUiResources = (i18n: I18n): void => {
+    for (const [language, words] of Object.entries(UI_RESOURCES)) {
+        if (!i18n.hasResourceBundle(language, UI_NAMESPACE)) {
+            i18n.addResourceBundle(language, UI_NAMESPACE, words, true, false);
+        }
+    }
+};

package/src/menu/index.parts.ts

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