@adecore/ui 0.14.0

package/src/menu/parts.tsx

@@ -0,0 +1,296 @@
+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 { withClass } from '../class-name.ts';
+import { Icon } from '../Icon.tsx';
+import { Tooltip } from '../Tooltip.tsx';
+
+/* Where a popup opens from decides where it goes when a call site says nothing. */
+type MenuKind = 'menu' | 'context' | 'submenu';
+
+const MenuKindContext = createContext<MenuKind>('menu');
+
+type PositionerProps = ComponentProps<typeof BaseMenu.Positioner>;
+
+type Placement = Pick<
+    PositionerProps,
+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionBoundary' | 'collisionAvoidance' | 'anchor' | 'sticky' | 'positionMethod'
+>;
+
+/*
+ * A menu hangs under its trigger, lined up with its start, unless there is no room. A context menu
+ * opens at the pointer, which its positioner already knows. A submenu sits beside its row, pulled
+ * up by the popup's own padding so its first row lines up with the row that opened it.
+ */
+const PLACEMENT: Record<MenuKind, Placement> = {
+    menu: { side: 'bottom', align: 'start', sideOffset: 6 },
+    context: {},
+    submenu: { sideOffset: 4, alignOffset: -4 }
+};
+
+/* The label above a group of rows. It takes the line height of the row it sits in. */
+export const MENU_LABEL = 'px-2.5 pt-1.5 pb-0.5 text-xs/[inherit] text-text-faint';
+
+/* A trailing hint in a row: what the item does to something else, never a shortcut. A shortcut stays a `Kbd`, which `.menu-item` already pushes to the right. */
+const MENU_HINT = 'ml-auto pl-3 text-xs/[inherit] text-text-faint';
+
+/* The hairline between two groups of rows. It runs the whole width of the popup, which is what the
+   negative margin buys back from its 4px of padding, and it is softer than a border a surface ends with. */
+const MENU_SEPARATOR = '-mx-1 my-1 h-px bg-border-soft';
+
+export function MenuRoot(props: ComponentProps<typeof BaseMenu.Root>) {
+    return (
+        <MenuKindContext value="menu">
+            <BaseMenu.Root {...props} />
+        </MenuKindContext>
+    );
+}
+
+export function ContextMenuRoot(props: ComponentProps<typeof BaseContextMenu.Root>) {
+    return (
+        <MenuKindContext value="context">
+            <BaseContextMenu.Root {...props} />
+        </MenuKindContext>
+    );
+}
+
+export function MenuSubmenuRoot(props: ComponentProps<typeof BaseMenu.SubmenuRoot>) {
+    return (
+        <MenuKindContext value="submenu">
+            <BaseMenu.SubmenuRoot {...props} />
+        </MenuKindContext>
+    );
+}
+
+export const MenuTrigger = BaseMenu.Trigger;
+
+export const ContextMenuTrigger = BaseContextMenu.Trigger;
+
+export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
+
+/*
+ * The shell every menu is drawn in: the portal, the layer it sits on and the gap to its trigger are
+ * decided once. The popup scrolls inside the room the window leaves it; `className` adds a minimum
+ * width or a layout of its own, such as a grid of swatches.
+ */
+export function MenuPopup({
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    collisionBoundary,
+    collisionAvoidance,
+    anchor,
+    sticky,
+    positionMethod,
+    className,
+    ...props
+}: MenuPopupProps) {
+    const defaults = PLACEMENT[useContext(MenuKindContext)];
+    return (
+        <BaseMenu.Portal>
+            <BaseMenu.Positioner
+                className="popup-positioner"
+                side={side ?? defaults.side}
+                align={align ?? defaults.align}
+                sideOffset={sideOffset ?? defaults.sideOffset}
+                alignOffset={alignOffset ?? defaults.alignOffset}
+                collisionPadding={collisionPadding}
+                collisionBoundary={collisionBoundary}
+                collisionAvoidance={collisionAvoidance}
+                anchor={anchor}
+                sticky={sticky}
+                positionMethod={positionMethod}
+            >
+                <BaseMenu.Popup className={withClass('menu-popup', className)} {...props} />
+            </BaseMenu.Positioner>
+        </BaseMenu.Portal>
+    );
+}
+
+type ItemLook = {
+    /*
+     * Leaves the row out: no padding, highlight or indicator, only what makes it an item (the arrow
+     * keys, typeahead, closing the menu). For an icon button, a swatch, a link or a segment inside a
+     * menu, which draws itself and its own highlight.
+     */
+    unstyled?: boolean;
+};
+
+type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & ItemLook;
+
+export function MenuItem({ unstyled = false, className, ...props }: MenuItemProps) {
+    return <BaseMenu.Item className={unstyled ? className : withClass('menu-item', className)} {...props} />;
+}
+
+export interface MenuCheckProps {
+    /* One of several is a bare tick; on or off is a tick in an outlined box, which says the row can be off. */
+    kind: 'radio' | 'checkbox';
+    /* Only for a row that is not a radio or checkbox item, and so has no indicator of its own. */
+    checked?: boolean;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+
+/*
+ * The slot before the label of a row that can be checked, in a menu or a list that reads as one. It
+ * is one line of the row tall, so a row with a second line keeps the tick beside its first. Radio and
+ * checkbox items draw it themselves; a plain row that shows a state hands it `checked`.
+ */
+export function MenuCheck({ kind, checked, className, ref }: MenuCheckProps) {
+    const tick = <Icon icon={Check} size={kind === 'radio' ? 14 : 12} />;
+    const indicator =
+        checked !== undefined ? (
+            checked && tick
+        ) : kind === 'radio' ? (
+            <BaseMenu.RadioItemIndicator className="flex">{tick}</BaseMenu.RadioItemIndicator>
+        ) : (
+            <BaseMenu.CheckboxItemIndicator className="flex">{tick}</BaseMenu.CheckboxItemIndicator>
+        );
+    return (
+        <span ref={ref} className={clsx('grid h-lh w-4 shrink-0 place-items-center', className)}>
+            {kind === 'checkbox' ? <span className="grid h-4 w-4 place-items-center rounded border border-border-strong">{indicator}</span> : indicator}
+        </span>
+    );
+}
+
+type Indicator = {
+    /* Where the tick or the box sits: before the label, or at the end of the row, for an option that reads as a label with its control after it. */
+    indicator?: 'start' | 'end';
+};
+
+type MenuCheckboxItemProps = ComponentProps<typeof BaseMenu.CheckboxItem> & ItemLook & Indicator & { children?: ReactNode };
+
+/* A row that is on or off. The box before its label is part of it. */
+export function MenuCheckboxItem({ unstyled = false, indicator = 'start', className, children, ...props }: MenuCheckboxItemProps) {
+    if (unstyled) {
+        return (
+            <BaseMenu.CheckboxItem className={className} {...props}>
+                {children}
+            </BaseMenu.CheckboxItem>
+        );
+    }
+    return (
+        <BaseMenu.CheckboxItem className={withClass('menu-item', className)} {...props}>
+            {indicator === 'start' && <MenuCheck kind="checkbox" />}
+            {children}
+            {indicator === 'end' && <MenuCheck kind="checkbox" className="ml-auto" />}
+        </BaseMenu.CheckboxItem>
+    );
+}
+
+export const MenuRadioGroup = BaseMenu.RadioGroup;
+
+type MenuRadioItemProps = ComponentProps<typeof BaseMenu.RadioItem> & ItemLook & Indicator & { children?: ReactNode };
+
+/* One of several. The tick before its label is part of it. */
+export function MenuRadioItem({ unstyled = false, indicator = 'start', className, children, ...props }: MenuRadioItemProps) {
+    if (unstyled) {
+        return (
+            <BaseMenu.RadioItem className={className} {...props}>
+                {children}
+            </BaseMenu.RadioItem>
+        );
+    }
+    return (
+        <BaseMenu.RadioItem className={withClass('menu-item', className)} {...props}>
+            {indicator === 'start' && <MenuCheck kind="radio" />}
+            {children}
+            {indicator === 'end' && <MenuCheck kind="radio" className="ml-auto" />}
+        </BaseMenu.RadioItem>
+    );
+}
+
+type SubmenuTriggerProps = ComponentProps<typeof BaseMenu.SubmenuTrigger> & {
+    children?: ReactNode;
+    /* The chevron at the end of the row that says it opens more. Off for a row that carries a hint there instead. */
+    chevron?: boolean;
+};
+
+export function MenuSubmenuTrigger({ className, children, chevron = true, ...props }: SubmenuTriggerProps) {
+    return (
+        <BaseMenu.SubmenuTrigger className={withClass('menu-item', className)} {...props}>
+            {children}
+            {chevron && <Icon icon={ChevronRight} size={14} className="ml-auto text-text-faint" />}
+        </BaseMenu.SubmenuTrigger>
+    );
+}
+
+export type MenuRowProps = useRender.ComponentProps<'div'>;
+
+/*
+ * A row with buttons at its end that reads as one row. Its first item is the row, every `RowAction`
+ * and `RowSubmenuTrigger` after it an item of its own, so the arrow keys reach each.
+ */
+export function MenuRow({ render, className, ref, ...props }: MenuRowProps) {
+    return useRender({ render, ref, defaultTagName: 'div', props: { role: 'group', ...props, className: clsx('menu-row', className) } });
+}
+
+type RowButton = {
+    icon: LucideIcon;
+    /* The button's accessible name. Unlike the `label` of an item, typing never lands on the button. */
+    label: string;
+    /* Classes for the icon rather than the button, such as a fill. The size stays the row's. */
+    iconClassName?: string;
+};
+
+export type MenuRowActionProps = Omit<ComponentProps<typeof BaseMenu.Item>, 'children' | 'label'> & RowButton;
+
+/* A button in a `Menu.Row` that acts at once, named by its tooltip. `closeOnClick={false}` keeps the menu open. */
+export function MenuRowAction({ icon, label, iconClassName, className, ...props }: MenuRowActionProps) {
+    return (
+        <Tooltip label={label} name>
+            <BaseMenu.Item className={withClass('menu-item menu-row-action', className)} {...props}>
+                <Icon icon={icon} size={14} className={iconClassName} />
+            </BaseMenu.Item>
+        </Tooltip>
+    );
+}
+
+export type MenuRowSubmenuTriggerProps = Omit<ComponentProps<typeof BaseMenu.SubmenuTrigger>, 'children' | 'label'> & RowButton;
+
+/*
+ * A button in a `Menu.Row` that opens a submenu, inside a `Menu.SubmenuRoot`. It has no tooltip: the
+ * submenu opens on the same hover and says what the button holds.
+ */
+export function MenuRowSubmenuTrigger({ icon, label, iconClassName, className, ...props }: MenuRowSubmenuTriggerProps) {
+    return (
+        <BaseMenu.SubmenuTrigger className={withClass('menu-item menu-row-action', className)} aria-label={label} {...props}>
+            <Icon icon={icon} size={14} className={iconClassName} />
+        </BaseMenu.SubmenuTrigger>
+    );
+}
+
+/* Also right between two groups of rows in a popover that reads as a menu. */
+export function MenuSeparator({ className, ...props }: ComponentProps<typeof BaseSeparator>) {
+    return <BaseSeparator className={withClass(MENU_SEPARATOR, className)} {...props} />;
+}
+
+export const MenuGroup = BaseMenu.Group;
+
+type MenuGroupLabelProps = ComponentProps<typeof BaseMenu.GroupLabel> & {
+    /* Leaves the label's type and padding out, for a group that lays out its own heading. */
+    unstyled?: boolean;
+};
+
+export function MenuGroupLabel({ unstyled = false, className, ...props }: MenuGroupLabelProps) {
+    return <BaseMenu.GroupLabel className={unstyled ? className : withClass(MENU_LABEL, className)} {...props} />;
+}
+
+export type MenuLabelProps = useRender.ComponentProps<'div'>;
+
+/* A label above rows that are not a `Menu.Group` of their own, such as a row of swatches. */
+export function MenuLabel({ render, className, ref, ...props }: MenuLabelProps) {
+    return useRender({ render, ref, defaultTagName: 'div', props: { ...props, className: clsx(MENU_LABEL, className) } });
+}
+
+export type MenuHintProps = useRender.ComponentProps<'span'>;
+
+export function MenuHint({ render, className, ref, ...props }: MenuHintProps) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx(MENU_HINT, className) } });
+}

package/src/merge-refs.ts

@@ -0,0 +1,14 @@
+import type { Ref, RefCallback } from 'react';
+
+/* One callback ref that fills a component's own ref and the one its caller handed in. */
+export const mergeRefs =
+    <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>
+    (node) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function') {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        }
+    };

package/src/modality.ts

@@ -0,0 +1,37 @@
+type Modality = 'keyboard' | 'pointer';
+
+let current: Modality | null = null;
+let started = false;
+
+const set = (modality: Modality): void => {
+    if (current === modality) {
+        return;
+    }
+    current = modality;
+    document.documentElement.dataset.modality = modality;
+};
+
+/* Which device the app was last driven with, on the root element as `data-modality`. A ring that
+   only belongs to keyboard navigation cannot ask `:focus-visible` alone. Focus that a script moves
+   (Base UI does that for the hovered menu item) keeps matching it while the browser's own keyboard
+   flag is up, which a single keystroke anywhere, a terminal included, leaves on. Once per page;
+   `UIProvider` starts it, and a second call does nothing. */
+export function startInputModality(): void {
+    if (started) {
+        return;
+    }
+    started = true;
+    set('pointer');
+    window.addEventListener(
+        'keydown',
+        (event) => {
+            // A modifier on its own is half of a shift-click as often as it is a keystroke.
+            if (event.key !== 'Shift' && event.key !== 'Control' && event.key !== 'Alt' && event.key !== 'Meta') {
+                set('keyboard');
+            }
+        },
+        { capture: true }
+    );
+    window.addEventListener('pointerdown', () => set('pointer'), { capture: true, passive: true });
+    window.addEventListener('pointermove', () => set('pointer'), { capture: true, passive: true });
+}

package/src/platform.ts

@@ -0,0 +1,10 @@
+/* True on macOS and iOS, where a shortcut is written with ⌘ instead of Ctrl. The keyboard in question is the one in front of this page. */
+export const isApplePlatform = (): boolean => {
+    if (typeof navigator === 'undefined') {
+        return false;
+    }
+    const hints = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;
+    return applePlatformFrom(hints?.platform || navigator.platform);
+};
+
+export const applePlatformFrom = (platform: string | undefined): boolean => /mac|iphone|ipad/i.test(platform ?? '');

package/src/popover/index.parts.ts

@@ -0,0 +1,8 @@
+export {
+    PopoverClose as Close,
+    PopoverDescription as Description,
+    PopoverPopup as Popup,
+    PopoverRoot as Root,
+    PopoverTitle as Title,
+    PopoverTrigger as Trigger
+} from './parts.tsx';

package/src/popover/parts.tsx

@@ -0,0 +1,119 @@
+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 { withClass } from '../class-name.ts';
+
+/*
+ * The surface a popup is drawn on. `menu` is the padded card menus use, `picker` a card whose
+ * content runs to its edges (a search field on top of a list), and `plain` leaves the surface to the caller.
+ */
+const POPUP_VARIANT = {
+    menu: 'menu-popup',
+    picker: 'picker-popup',
+    plain: ''
+} as const;
+
+export type PopupVariant = keyof typeof POPUP_VARIANT;
+
+type Placement = Pick<
+    ComponentProps<typeof BasePopover.Positioner>,
+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionBoundary' | 'collisionAvoidance' | 'anchor' | 'sticky' | 'positionMethod'
+>;
+
+export const PopoverRoot = BasePopover.Root;
+
+export const PopoverTrigger = BasePopover.Trigger;
+
+export const PopoverClose = BasePopover.Close;
+
+export const PopoverTitle = BasePopover.Title;
+
+export const PopoverDescription = BasePopover.Description;
+
+export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> &
+    Placement & {
+        variant?: PopupVariant;
+    };
+
+/* The portal, the positioner and the popup of a popover: under its trigger and lined up with its start unless it says otherwise. */
+export function PopoverPopup({
+    variant = 'menu',
+    side = 'bottom',
+    align = 'start',
+    sideOffset = 8,
+    alignOffset,
+    collisionPadding,
+    collisionBoundary,
+    collisionAvoidance,
+    anchor,
+    sticky,
+    positionMethod,
+    className,
+    ...props
+}: PopoverPopupProps) {
+    return (
+        <BasePopover.Portal>
+            <BasePopover.Positioner
+                className="popup-positioner"
+                side={side}
+                align={align}
+                sideOffset={sideOffset}
+                alignOffset={alignOffset}
+                collisionPadding={collisionPadding}
+                collisionBoundary={collisionBoundary}
+                collisionAvoidance={collisionAvoidance}
+                anchor={anchor}
+                sticky={sticky}
+                positionMethod={positionMethod}
+            >
+                <BasePopover.Popup className={withClass(POPUP_VARIANT[variant], className)} {...props} />
+            </BasePopover.Positioner>
+        </BasePopover.Portal>
+    );
+}
+
+export const PreviewCardRoot = BasePreviewCard.Root;
+
+export const PreviewCardTrigger = BasePreviewCard.Trigger;
+
+export type PreviewCardPopupProps = ComponentProps<typeof BasePreviewCard.Popup> &
+    Placement & {
+        variant?: PopupVariant;
+    };
+
+/* A card that opens while the pointer rests on its trigger, drawn like a popover. */
+export function PreviewCardPopup({
+    variant = 'menu',
+    side = 'bottom',
+    align = 'start',
+    sideOffset = 8,
+    alignOffset,
+    collisionPadding,
+    collisionBoundary,
+    collisionAvoidance,
+    anchor,
+    sticky,
+    positionMethod,
+    className,
+    ...props
+}: PreviewCardPopupProps) {
+    return (
+        <BasePreviewCard.Portal>
+            <BasePreviewCard.Positioner
+                className="z-(--z-popup)"
+                side={side}
+                align={align}
+                sideOffset={sideOffset}
+                alignOffset={alignOffset}
+                collisionPadding={collisionPadding}
+                collisionBoundary={collisionBoundary}
+                collisionAvoidance={collisionAvoidance}
+                anchor={anchor}
+                sticky={sticky}
+                positionMethod={positionMethod}
+            >
+                <BasePreviewCard.Popup className={withClass(POPUP_VARIANT[variant], className)} {...props} />
+            </BasePreviewCard.Positioner>
+        </BasePreviewCard.Portal>
+    );
+}

package/src/prefetch.ts

@@ -0,0 +1,113 @@
+export type Loader = () => Promise<unknown>;
+
+/* Calls `run` once the main thread has nothing better to do. */
+export type WhenIdle = (run: () => void) => void;
+
+/*
+ * Loads lazy modules ahead of their first opening, one per idle moment and never two at once, so
+ * the first open resolves from the module cache. A loader registered while everything is on
+ * joins the end, which is how a lazy surface inside another lazy one gets its turn.
+ */
+export class Prefetcher {
+    private readonly registered: Loader[] = [];
+    private readonly queued = new Set<Loader>();
+    private readonly queue: Loader[] = [];
+    private everythingOn = false;
+    private running: Promise<void> | null = null;
+    private loading = false;
+    private readonly whenIdle: WhenIdle;
+    /* Asked on every start, since a person can turn data saving on while the page runs. */
+    private readonly allowed: () => boolean;
+
+    constructor(whenIdle: WhenIdle, allowed: () => boolean = () => true) {
+        this.whenIdle = whenIdle;
+        this.allowed = allowed;
+    }
+
+    /* True while a prefetch waits on its chunk, so a failure it causes is not taken for a person's. */
+    get busy(): boolean {
+        return this.loading;
+    }
+
+    register(load: Loader): void {
+        this.registered.push(load);
+        if (this.everythingOn) {
+            this.enqueue(load);
+        }
+    }
+
+    /* Loads this one module, ahead of whatever is registered. */
+    prefetch(load: Loader): Promise<void> {
+        if (!this.allowed()) {
+            return Promise.resolve();
+        }
+        this.enqueue(load);
+        return this.drain();
+    }
+
+    /* Loads every registered module, and every one registered from now on. */
+    prefetchEverything(): Promise<void> {
+        if (!this.allowed()) {
+            return Promise.resolve();
+        }
+        this.everythingOn = true;
+        for (const load of this.registered) {
+            this.enqueue(load);
+        }
+        return this.drain();
+    }
+
+    private enqueue(load: Loader): void {
+        if (this.queued.has(load)) {
+            return;
+        }
+        this.queued.add(load);
+        this.queue.push(load);
+        void this.drain();
+    }
+
+    private drain(): Promise<void> {
+        // Never on an empty queue: `loadQueue` would clear `running` before it is even set.
+        if (this.running === null && this.queue.length > 0) {
+            this.running = this.loadQueue();
+        }
+        return this.running ?? Promise.resolve();
+    }
+
+    private async loadQueue(): Promise<void> {
+        try {
+            for (let load = this.queue.shift(); load; load = this.queue.shift()) {
+                await new Promise<void>((resolve) => this.whenIdle(resolve));
+                this.loading = true;
+                try {
+                    await load();
+                } catch {
+                    // A later open tries again; a chunk a deploy removed is the app's to answer, and `busy` tells it this was only a prefetch.
+                } finally {
+                    this.loading = false;
+                }
+            }
+        } finally {
+            this.running = null;
+        }
+    }
+}
+
+/* Safari has no idle callback; the timeout at least lets the frame that asked finish first. */
+const FALLBACK_DELAY_MS = 50;
+/* A canvas that keeps drawing (a blinking cursor, a stream) may never leave an idle moment, and a prefetch that never runs helps nobody. */
+const IDLE_TIMEOUT_MS = 2000;
+
+const whenIdle: WhenIdle = (run) => {
+    if (typeof requestIdleCallback === 'function') {
+        requestIdleCallback(() => run(), { timeout: IDLE_TIMEOUT_MS });
+        return;
+    }
+    setTimeout(run, FALLBACK_DELAY_MS);
+};
+
+/* Not in every DOM typing yet, and only Chromium reports it. */
+const savesData = (): boolean => (navigator as { connection?: { saveData?: boolean } }).connection?.saveData === true;
+
+/* The one every `lazyNamed` and `lazyDialog` registers with. */
+export const prefetcher = /* @__PURE__ */ new Prefetcher(whenIdle, () => !savesData());

package/src/preview-card/index.parts.ts

@@ -0,0 +1 @@
+export { PreviewCardPopup as Popup, PreviewCardRoot as Root, PreviewCardTrigger as Trigger } from '../popover/parts.tsx';

package/src/project-switcher-row.tsx

@@ -0,0 +1,51 @@
+import type { MouseEvent } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { MoreHorizontal } from 'lucide-react';
+import * as Menu from './menu/index.parts.ts';
+import type { ProjectSwitcherItem } from './ProjectSwitcher.tsx';
+import { Tooltip } from './Tooltip.tsx';
+
+export function ProjectSwitcherRow<Item extends ProjectSwitcherItem>({
+    project,
+    onSelect
+}: {
+    project: Item;
+    onSelect(project: Item, event: MouseEvent<HTMLElement>): void;
+}) {
+    const { t } = useTranslation('ui');
+    const hasActions = Boolean(project.actions);
+    const item = (
+        <Menu.Item
+            className={clsx('min-w-0', project.muted && 'opacity-50')}
+            disabled={project.disabled}
+            label={project.name}
+            onClick={(event) => onSelect(project, event)}
+        >
+            {project.icon}
+            <span className="min-w-0 truncate">{project.name}</span>
+            {project.hint && <span className="ml-auto truncate pl-3 text-xs text-text-faint">{project.hint}</span>}
+        </Menu.Item>
+    );
+    const row = project.description ? (
+        <Tooltip label={project.description} side="right" sideOffset={hasActions ? 41 : undefined}>
+            {item}
+        </Tooltip>
+    ) : (
+        item
+    );
+
+    if (!hasActions) {
+        return row;
+    }
+
+    return (
+        <Menu.Row aria-label={project.name}>
+            {row}
+            <Menu.SubmenuRoot>
+                <Menu.RowSubmenuTrigger icon={MoreHorizontal} label={t('projectSwitcher.actionsFor', { name: project.name })} />
+                <Menu.Popup className="min-w-52">{project.actions}</Menu.Popup>
+            </Menu.SubmenuRoot>
+        </Menu.Row>
+    );
+}

package/src/selection.ts

@@ -0,0 +1,24 @@
+/*
+ * The text selection, as a context menu has to read it. The app has one selection at a time and a
+ * menu belongs to the surface the click landed on, so both of these are scoped to an element.
+ * A selection somewhere else is no selection this menu can copy.
+ */
+
+export const selectionWithin = (element: HTMLElement | null): string => {
+    const selection = window.getSelection();
+    if (!element || !selection || selection.isCollapsed || selection.rangeCount === 0) {
+        return '';
+    }
+    return element.contains(selection.getRangeAt(0).commonAncestorContainer) ? selection.toString() : '';
+};
+
+export const selectAllWithin = (element: HTMLElement | null): void => {
+    const selection = window.getSelection();
+    if (!element || !selection) {
+        return;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    selection.removeAllRanges();
+    selection.addRange(range);
+};