@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/components/Layers/Layers.tsx

@@ -0,0 +1,216 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { OrderedList } from '@dxos/react-ui-list';
+import * as Button from '@dxos/react-ui/Button';
+import * as Editable from '@dxos/react-ui/Editable';
+import * as Menu from '@dxos/react-ui/Menu';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
+import type * as Util from '@dxos/react-ui/Util';
+
+import { type Layer, type LayerId } from '../../model/types.ts';
+
+export type LayersPanelProps = Util.ThemedClassName<{
+  /** The scene's layers, bottom first (`sceneLayers`); the panel lists them top first, as they stack. */
+  layers: readonly Layer[];
+  /** The selected layers; the top-most of them is the one new shapes go on. */
+  selected?: readonly LayerId[];
+  readonly?: boolean;
+  onSelectedChange?: (ids: LayerId[]) => void;
+  /** Shows or hides a layer. */
+  onToggle?: (id: LayerId) => void;
+  onRename?: (id: LayerId, name: string) => void;
+  /** Moves a layer to `index` in the bottom-first order. */
+  onMove?: (id: LayerId, index: number) => void;
+  /** Adds a layer; the panel opens the name of the one whose id it returns. */
+  onCreate?: () => LayerId | void;
+  /** Removes the selected layers and their shapes; offered while at least one layer would remain. */
+  onDelete?: (ids: LayerId[]) => void;
+  /** Merges the selected layers into the top-most of them; offered while two or more are selected. */
+  onMerge?: (ids: LayerId[], into: LayerId) => void;
+  /** Whether the panel is docked beside the canvas. */
+  docked?: boolean;
+}>;
+
+type LayerNameProps = {
+  layer: Layer;
+  readonly?: boolean;
+  editing: boolean;
+  onEditingChange: (editing: boolean) => void;
+  onRename?: (name: string) => void;
+};
+
+/**
+ * A layer's name, edited in place on a double-click (`Editable`: the input takes the preview's cell, so the row does
+ * not move). Enter or leaving it commits, Escape keeps the old name. It is the row's text part, so it carries that
+ * part's class for the row's layout.
+ */
+const LayerName = ({ layer, readonly, editing, onEditingChange, onRename }: LayerNameProps) => (
+  <Editable.Root
+    classNames='dx-listbox-item-text'
+    value={layer.name}
+    activation='dblclick'
+    editing={editing}
+    onEditingChange={onEditingChange}
+    disabled={readonly || !onRename}
+    onValueChange={(next) => {
+      const name = next.trim();
+      if (name && name !== layer.name) {
+        onRename?.(name);
+      }
+    }}
+  >
+    <Editable.Preview data-testid={`layer-name-${layer.id}`} />
+    <Editable.Input
+      aria-label='Layer name'
+      data-testid={`layer-input-${layer.id}`}
+      // While a name is typed, the list's keys (typeahead, arrows, selection) must not take its keys; otherwise the
+      // list keeps them, so the arrows move between rows.
+      onKeyDown={(event) => event.stopPropagation()}
+    />
+  </Editable.Root>
+);
+
+/**
+ * A scene's layers, top first as they stack: the active one is selected, each shows or hides from its eye, renames on
+ * a double-click and reorders by its handle. The toolbar adds a layer, deletes the active one, and merges it down.
+ */
+export const LayersPanel = ({
+  classNames,
+  layers,
+  selected: selectedProp,
+  readonly,
+  onSelectedChange,
+  onToggle,
+  onRename,
+  onMove,
+  onCreate,
+  onDelete,
+  onMerge,
+  docked = false,
+}: LayersPanelProps) => {
+  const items = useMemo(() => [...layers].reverse(), [layers]);
+  // The row whose name is open; a new layer opens its own, so it is named as it is made.
+  const [editingId, setEditingId] = useState<LayerId>();
+  // Bottom first, as `layers`, so the last is the top-most selected.
+  const selected = useMemo(
+    () => layers.filter((layer) => selectedProp?.includes(layer.id)).map((layer) => layer.id),
+    [layers, selectedProp],
+  );
+  const top = selected[selected.length - 1];
+  return (
+    <Panel.Root classNames={classNames} data-testid='layers'>
+      <Panel.Header asChild>
+        <Toolbar.Root data-testid='layers-toolbar'>
+          <Button.Root
+            variant='ghost'
+            iconOnly
+            icon='ph--plus--regular'
+            label='Add layer'
+            disabled={readonly || !onCreate}
+            data-testid='layers-create'
+            onClick={() => {
+              const id = onCreate?.();
+              if (id) {
+                setEditingId(id);
+              }
+            }}
+          />
+          {/* The rarer, destructive edits wait in a menu at the toolbar's end. */}
+          <Toolbar.Separator variant='gap' />
+          <Menu.Root positioning={{ placement: 'bottom-end', gutter: 4 }}>
+            <Menu.Trigger asChild>
+              <Button.Root
+                variant='ghost'
+                iconOnly
+                icon='ph--dots-three-vertical--regular'
+                label='Layer actions'
+                disabled={readonly}
+                data-testid='layers-menu'
+              />
+            </Menu.Trigger>
+            <Menu.Content>
+              <Menu.Item
+                item={{ value: 'merge', label: 'Merge layers', icon: 'ph--arrow-line-down--regular' }}
+                disabled={!onMerge || selected.length < 2}
+                data-testid='layers-merge'
+                onSelect={() => top && onMerge?.(selected, top)}
+              />
+              <Menu.Item
+                item={{ value: 'delete', label: 'Delete layers', icon: 'ph--trash--regular' }}
+                disabled={!onDelete || selected.length === 0 || selected.length >= layers.length}
+                data-testid='layers-delete'
+                onSelect={() => onDelete?.(selected)}
+              />
+            </Menu.Content>
+          </Menu.Root>
+        </Toolbar.Root>
+      </Panel.Header>
+      <Panel.Body>
+        <OrderedList.Root
+          items={items}
+          getLabel={(layer) => layer.name}
+          readonly={readonly || !onMove}
+          multiple
+          value={selected}
+          onValueChange={(ids) => onSelectedChange?.(ids)}
+          // The list is top first; the order the model keeps is bottom first.
+          onMove={(from, to) => onMove?.(items[from].id, items.length - 1 - to)}
+        >
+          {({ items }) => (
+            <OrderedList.Content
+              // Docked, the dock scrolls the panels together, so the list keeps no scroll of its own (it would hold the wheel).
+              scroll={!docked}
+              // Rows run edge to edge, with no gutter around them.
+              gutter='none'
+              aria-label='Layers'
+              onKeyDown={(event) => {
+                // Enter on the list (as well as selecting the highlighted row) opens that row's name.
+                if (event.key !== 'Enter' || event.target !== event.currentTarget || readonly || !onRename) {
+                  return;
+                }
+                const active = event.currentTarget.getAttribute('aria-activedescendant');
+                const id = active ? event.currentTarget.ownerDocument.getElementById(active)?.dataset.value : undefined;
+                if (id) {
+                  setEditingId(id);
+                }
+              }}
+            >
+              {items.map((layer) => (
+                <OrderedList.Item key={layer.id} id={layer.id} data-testid={`layer-${layer.id}`}>
+                  <OrderedList.DragHandle />
+                  <LayerName
+                    layer={layer}
+                    readonly={readonly}
+                    editing={editingId === layer.id}
+                    onEditingChange={(editing) =>
+                      setEditingId((current) => (editing ? layer.id : current === layer.id ? undefined : current))
+                    }
+                    onRename={(name) => onRename?.(layer.id, name)}
+                  />
+                  <Button.Root
+                    variant='ghost'
+                    iconOnly
+                    icon={layer.hidden ? 'ph--eye-slash--regular' : 'ph--eye--regular'}
+                    label={layer.hidden ? 'Show layer' : 'Hide layer'}
+                    disabled={readonly || !onToggle}
+                    data-testid={`layer-toggle-${layer.id}`}
+                    onClick={(event) => {
+                      // The row's own click selects it; showing or hiding a layer leaves the selection alone.
+                      event.stopPropagation();
+                      onToggle?.(layer.id);
+                    }}
+                  />
+                </OrderedList.Item>
+              ))}
+            </OrderedList.Content>
+          )}
+        </OrderedList.Root>
+      </Panel.Body>
+    </Panel.Root>
+  );
+};

package/src/components/Layers/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Layers.tsx';

package/src/components/Palette/Palette.stories.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { freehandCapabilities } from '../../model/projection.ts';
+import { type NodeRegistry, defaultLinkRegistry, defaultNodeRegistry } from '../../model/registry.ts';
+import { type Tool } from '../../model/types.ts';
+import { Palette, type PaletteProps } from './Palette.tsx';
+
+const ICONS = [
+  'ph--brain--regular',
+  'ph--function--regular',
+  'ph--database--regular',
+  'ph--image--regular',
+  'ph--git-fork--regular',
+  'ph--intersect--regular',
+  'ph--shuffle--regular',
+  'ph--code--regular',
+];
+
+/** Many node types in four groups, as a host with a large registry (the compute shapes) has. */
+const MANY: NodeRegistry = Object.fromEntries(
+  ['Inputs', 'Transform', 'Operations', 'Outputs'].flatMap((group, groupIndex) =>
+    Array.from({ length: 6 }, (_, index) => {
+      const type = `${group.toLowerCase()}-${index}`;
+      return [
+        type,
+        {
+          ...defaultNodeRegistry.rect,
+          type,
+          key: undefined,
+          name: `${group} ${index + 1}`,
+          icon: ICONS[(groupIndex * 6 + index) % ICONS.length],
+          group,
+        },
+      ];
+    }),
+  ),
+);
+
+type StoryArgs = Pick<PaletteProps, 'collapse' | 'flyout'> & {
+  /** Many types in groups, or the built-in few. */
+  many: boolean;
+  /** The height of the view the rail floats in. */
+  height: number;
+};
+
+/** The rail floating in a view of `height`, as `SceneView.Palette` places it. */
+const DefaultStory = ({ collapse, flyout, many, height }: StoryArgs) => {
+  const [tool, setTool] = useState<Tool>({ kind: 'select' });
+  return (
+    <div className='relative w-64 border border-separator rounded-sm' style={{ height }}>
+      <div className='absolute top-2 bottom-2 left-2 pointer-events-none'>
+        <Palette
+          tool={tool}
+          nodes={many ? MANY : defaultNodeRegistry}
+          links={defaultLinkRegistry}
+          capabilities={freehandCapabilities}
+          collapse={collapse}
+          flyout={flyout}
+          onToolChange={setTool}
+        />
+      </div>
+      <div className='absolute bottom-2 right-2 text-xs text-fg-muted' data-testid='palette-tool'>
+        {'type' in tool ? tool.type : tool.kind}
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<StoryArgs> = {
+  title: 'ui/react-ui-canvas/Palette',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
+  args: { collapse: 'auto', flyout: 'list', many: false, height: 640 },
+  argTypes: {
+    collapse: { control: 'select', options: ['auto', true, false] },
+    flyout: { control: 'select', options: ['list', 'grid'] },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryArgs>;
+
+/** The built-in types: few enough that the rail stays flat. */
+export const Default: Story = {};
+
+/** Many types in a short view: the node groups fold into flyouts. */
+export const Many: Story = { args: { many: true } };
+
+/** Many types folded, each group's tools as a grid of icons rather than a list. */
+export const ManyGrid: Story = { args: { many: true, flyout: 'grid' } };
+
+/** Many types with room to spare: still flat, every tool one click away. */
+export const ManyTall: Story = { args: { many: true, height: 1400 } };
+
+/** A folded group picks its face, opens its grid, and shows the tool picked from it. */
+export const Test: Story = {
+  args: { many: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // 1. The rail folds: one button per node group.
+    await waitFor(() => expect(canvas.getByTestId('palette')).toHaveAttribute('data-collapsed'));
+    // 2. The group's face picks its first tool.
+    await userEvent.click(within(canvas.getByTestId('palette-group-Transform')).getAllByRole('button')[0]);
+    await expect(canvas.getByTestId('palette-tool')).toHaveTextContent('transform-0');
+    // 3. The chevron opens the group's grid; a pick there selects it and becomes the face.
+    await userEvent.click(canvas.getByTestId('palette-group-Transform-open'));
+    const tools = await within(canvasElement.ownerDocument.body).findByTestId('palette-group-Transform-tools');
+    await userEvent.click(within(tools).getByTestId('palette-transform-3'));
+    await expect(canvas.getByTestId('palette-tool')).toHaveTextContent('transform-3');
+    await waitFor(() =>
+      expect(
+        within(canvas.getByTestId('palette-group-Transform')).getByTestId('palette-transform-3'),
+      ).toBeInTheDocument(),
+    );
+
+    // 4. Resting the pointer on a folded group opens its grid.
+    await userEvent.hover(canvas.getByTestId('palette-group-Outputs'));
+    await expect(
+      await within(canvasElement.ownerDocument.body).findByTestId(
+        'palette-group-Outputs-tools',
+        {},
+        { timeout: 2_000 },
+      ),
+    ).toBeInTheDocument();
+  },
+};

package/src/components/Palette/Palette.tsx

@@ -4,9 +4,11 @@
 
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import React, { useEffect, useRef } from 'react';
+import React, { type RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import * as Button from '@dxos/react-ui/Button';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Popover from '@dxos/react-ui/Popover';
 import { mx } from '@dxos/ui-theme';
 
 import { type LinkRegistry, type NodeRegistry } from '../../model/registry.ts';
@@ -20,8 +22,11 @@ const BASE: Entry[] = [
   { tool: { kind: 'hand' }, icon: 'ph--hand--regular', label: 'Pan', key: 'H' },
 ];
 
+/** A run of palette entries; a group of node types may fold into one flyout button when the rail runs out of room. */
+export type PaletteGroup = { name: string; entries: Entry[]; collapsible: boolean };
+
 /** Node types by their `group`, in registry order; types without one share the first, unnamed group. */
-const nodeGroups = (nodes: NodeRegistry): Entry[][] => {
+const nodeGroups = (nodes: NodeRegistry): PaletteGroup[] => {
   const groups = new Map<string, Entry[]>();
   for (const def of Object.values(nodes)) {
     const name = def.group ?? '';
@@ -30,26 +35,34 @@ const nodeGroups = (nodes: NodeRegistry): Entry[][] => {
       { tool: { kind: 'node' as const, type: def.type }, icon: def.icon, label: def.name, key: def.key },
     ]);
   }
-  return [...groups.values()];
+  return [...groups.entries()].map(([name, entries]) => ({ name, entries, collapsible: entries.length > 1 }));
 };
 
 /**
- * Palette entries: the fixed tools, then the node types by group, then a link per link type; a group the
- * projection cannot apply (`create`, `link`) is left out rather than offered and silently dropped.
+ * Palette groups: the fixed tools, then the node types by group, then a link per link type; a group the projection
+ * cannot apply (`create`, `link`) is left out rather than offered and silently dropped. Only node groups fold.
  */
-export const paletteEntries = (nodes: NodeRegistry, links: LinkRegistry, capabilities: Capabilities): Entry[][] =>
+export const paletteGroups = (nodes: NodeRegistry, links: LinkRegistry, capabilities: Capabilities): PaletteGroup[] =>
   [
-    BASE,
+    { name: 'Tools', entries: BASE, collapsible: false },
     ...(capabilities.create ? nodeGroups(nodes) : []),
-    capabilities.link
-      ? Object.values(links).map((def) => ({
-          tool: { kind: 'link' as const, type: def.type },
-          icon: def.icon,
-          label: def.name,
-          key: def.key,
-        }))
-      : [],
-  ].filter((group) => group.length > 0);
+    {
+      name: 'Links',
+      entries: capabilities.link
+        ? Object.values(links).map((def) => ({
+            tool: { kind: 'link' as const, type: def.type },
+            icon: def.icon,
+            label: def.name,
+            key: def.key,
+          }))
+        : [],
+      collapsible: false,
+    },
+  ].filter((group) => group.entries.length > 0);
+
+/** Palette entries by group, flat within each. */
+export const paletteEntries = (nodes: NodeRegistry, links: LinkRegistry, capabilities: Capabilities): Entry[][] =>
+  paletteGroups(nodes, links, capabilities).map((group) => group.entries);
 
 export const sameTool = (left: Tool, right: Tool): boolean =>
   left.kind === right.kind && ('type' in left ? left.type === ('type' in right ? right.type : undefined) : true);
@@ -69,40 +82,218 @@ export type PaletteProps = {
   nodes: NodeRegistry;
   links: LinkRegistry;
   capabilities: Capabilities;
+  /**
+   * Folds each group of node types into one flyout button: `auto` (the default) does so only when the flat rail would
+   * not fit the space below it, so a small registry keeps every tool one click away.
+   */
+  collapse?: 'auto' | boolean;
+  /** How a folded group lists its tools: one per row with its name (the default), or a grid of icons. */
+  flyout?: 'list' | 'grid';
   onToolChange: (tool: Tool) => void;
 };
 
+/** The height the rail would take flat: each button, the gaps between them, and each group's padding and divider. */
+const flatHeight = (groups: readonly PaletteGroup[], button: number): number =>
+  groups.reduce((height, group) => height + group.entries.length * (button + 4) - 4 + 9, 0);
+
+/**
+ * Whether the rail folds its node groups: always, never, or (`auto`) when the flat rail would overflow its parent,
+ * which the host sizes to the room the rail may take (`SceneView.Palette` spans from below the navigation to above
+ * the bottom bars); re-measured as that resizes.
+ */
+const useCollapsed = (
+  ref: RefObject<HTMLDivElement | null>,
+  groups: readonly PaletteGroup[],
+  collapse: PaletteProps['collapse'],
+) => {
+  const [overflows, setOverflows] = useState(false);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    const host = element?.parentElement;
+    if (collapse !== 'auto' || !element || !host) {
+      return;
+    }
+    const measure = () => {
+      const button = element.querySelector('button')?.getBoundingClientRect().height ?? 32;
+      setOverflows(flatHeight(groups, button) > host.clientHeight);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [ref, groups, collapse]);
+  return collapse === 'auto' ? overflows : collapse;
+};
+
 /**
  * Tool palette: a click picks the tool; a node type can also be dragged onto the canvas, which creates
- * it where it drops (the canvas is a pragmatic-dnd drop target for `nodeDragData`).
+ * it where it drops (the canvas is a pragmatic-dnd drop target for `nodeDragData`). With many types the node
+ * groups fold into flyouts (`collapse`), each showing its active or last-used tool.
+ */
+export const Palette = ({
+  tool,
+  nodes,
+  links,
+  capabilities,
+  collapse = 'auto',
+  flyout = 'list',
+  onToolChange,
+}: PaletteProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const groups = useMemo(() => paletteGroups(nodes, links, capabilities), [nodes, links, capabilities]);
+  const collapsed = useCollapsed(ref, groups, collapse);
+  return (
+    <div
+      ref={ref}
+      // The host's frame spans the room the rail may take and lets the canvas below it take the pointer.
+      className='flex flex-col w-fit rounded-sm bg-modal-surface border border-separator divide-y divide-separator pointer-events-auto'
+      data-testid='palette'
+      data-collapsed={collapsed || undefined}
+    >
+      {groups.map((group) =>
+        collapsed && group.collapsible ? (
+          <div key={group.name} className='flex flex-col p-1'>
+            <PaletteFlyout group={group} tool={tool} layout={flyout} onToolChange={onToolChange} />
+          </div>
+        ) : (
+          <div key={group.name} className='flex flex-col gap-1 p-1'>
+            {group.entries.map((entry) => (
+              <PaletteButton
+                key={entry.label}
+                entry={entry}
+                active={sameTool(tool, entry.tool)}
+                onToolChange={onToolChange}
+              />
+            ))}
+          </div>
+        ),
+      )}
+    </div>
+  );
+};
+
+/** How long the pointer rests on a folded group before its tools open. */
+const HOVER_OPEN_MS = 500;
+/** How long the tools stay open after the pointer leaves, so it can cross the gap between the rail and the grid. */
+const HOVER_CLOSE_MS = 250;
+
+/**
+ * Opens after the pointer rests on the trigger, and closes once it has left both the trigger and the content. `hovered`
+ * is how it opened, so the content can leave focus where it is.
  */
-export const Palette = ({ tool, nodes, links, capabilities, onToolChange }: PaletteProps) => (
-  <div
-    className='flex flex-col rounded-sm bg-modal-surface border border-separator divide-y divide-separator'
-    data-testid='palette'
-  >
-    {paletteEntries(nodes, links, capabilities).map((group, index) => (
-      <div key={index} className='flex flex-col gap-1 p-1'>
-        {group.map((entry) => (
-          <PaletteButton
-            key={entry.label}
-            entry={entry}
-            active={sameTool(tool, entry.tool)}
-            onToolChange={onToolChange}
-          />
-        ))}
-      </div>
-    ))}
-  </div>
-);
+const useHoverOpen = (setOpen: (open: boolean, hovered?: boolean) => void) => {
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  return useMemo(
+    () => ({
+      enter: () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(true, true), HOVER_OPEN_MS);
+      },
+      keep: () => clearTimeout(timer.current),
+      leave: () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
+      },
+    }),
+    [setOpen],
+  );
+};
+
+type PaletteFlyoutProps = {
+  group: PaletteGroup;
+  tool: Tool;
+  layout: NonNullable<PaletteProps['flyout']>;
+  onToolChange: (tool: Tool) => void;
+};
+
+/**
+ * A folded group: its active (else last-used, else first) tool as one button, picked with a click, and a corner
+ * chevron (or a hover) opening the group's tools beside the rail, as a list or a grid (`layout`).
+ */
+const PaletteFlyout = ({ group, tool, layout, onToolChange }: PaletteFlyoutProps) => {
+  const [open, setOpenState] = useState(false);
+  // Opened by a hover, the list takes no focus (a pointer user would see a focus ring on the first row); opened from
+  // the chevron (a click or the keyboard), it does, so arrows move through it.
+  const [hovered, setHovered] = useState(false);
+  const setOpen = useCallback((next: boolean, byHover = false) => {
+    setHovered(next && byHover);
+    setOpenState(next);
+  }, []);
+  const hover = useHoverOpen(setOpen);
+  const [lastUsed, setLastUsed] = useState<Entry>(group.entries[0]);
+  const active = group.entries.find((entry) => sameTool(tool, entry.tool));
+  // A tool picked from elsewhere (its key, the grid) becomes the group's face, so the rail shows what is in use.
+  useEffect(() => {
+    if (active) {
+      setLastUsed(active);
+    }
+  }, [active]);
+  const shown = active ?? lastUsed;
+  return (
+    <Popover.Root
+      open={open}
+      autoFocus={!hovered}
+      onOpenChange={({ open }) => setOpen(open)}
+      positioning={{ placement: 'right-start' }}
+    >
+      <Popover.Anchor asChild>
+        <div
+          className='relative'
+          data-testid={`palette-group-${group.name}`}
+          onPointerEnter={hover.enter}
+          onPointerLeave={hover.leave}
+        >
+          <PaletteButton entry={shown} active={active !== undefined} onToolChange={onToolChange} />
+          <Popover.Trigger asChild>
+            <button
+              type='button'
+              aria-label={`${group.name} tools`}
+              className='absolute bottom-0 right-0 flex size-3 items-end justify-end text-fg-subtle hover:text-fg'
+              data-testid={`palette-group-${group.name}-open`}
+            >
+              <Icon.Icon icon='ph--caret-right--fill' size='xs' />
+            </button>
+          </Popover.Trigger>
+        </div>
+      </Popover.Anchor>
+      <Popover.Content onPointerEnter={hover.keep} onPointerLeave={hover.leave}>
+        <div
+          className={mx(
+            layout === 'list'
+              ? 'flex flex-col items-stretch gap-1 p-1'
+              : 'grid grid-cols-[repeat(3,min-content)] gap-1 p-1',
+          )}
+          data-testid={`palette-group-${group.name}-tools`}
+        >
+          {group.entries.map((entry) => (
+            <PaletteButton
+              key={entry.label}
+              entry={entry}
+              labelled={layout === 'list'}
+              active={sameTool(tool, entry.tool)}
+              onToolChange={(next) => {
+                onToolChange(next);
+                setOpen(false);
+              }}
+            />
+          ))}
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+};
 
 const PaletteButton = ({
   entry,
   active,
+  labelled,
   onToolChange,
 }: {
   entry: Entry;
   active: boolean;
+  /** Shows the tool's name beside its icon (a flyout's list), rather than the icon alone. */
+  labelled?: boolean;
   onToolChange: (tool: Tool) => void;
 }) => {
   const ref = useRef<HTMLButtonElement>(null);
@@ -122,10 +313,10 @@ const PaletteButton = ({
     <Button.Root
       ref={ref}
       variant='ghost'
-      iconOnly
+      iconOnly={!labelled}
       icon={entry.icon}
-      label={entry.key ? `${entry.label} (${entry.key})` : entry.label}
-      classNames={mx(active && 'bg-primary-500/20')}
+      label={labelled ? entry.label : entry.key ? `${entry.label} (${entry.key})` : entry.label}
+      classNames={mx(labelled && 'w-full justify-start', active && 'bg-primary-500/20')}
       data-testid={`palette-${entry.key ?? ('type' in entry.tool ? entry.tool.type : entry.tool.kind)}`}
       onClick={() => onToolChange(entry.tool)}
     />