@pie-lib/mask-markup 3.1.0-beta.5 → 3.1.0

package/src/__tests__/drag-in-the-blank.test.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import DragInTheBlank from '../drag-in-the-blank';
+import { closestDroppableKeyboardCoordinates } from '../keyboard-coordinates';
 
 const markup = `<div>
   <img src="https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg"></img>
@@ -14,11 +15,14 @@ const markup = `<div>
 </div>`;
 const choice = (v, id) => ({ value: v, id });
 
+let capturedDragProviderProps;
+
 // Mock DragProvider and DragDroppablePlaceholder to avoid DndContext requirement
 jest.mock('@pie-lib/drag', () => ({
-  DragProvider: ({ children, onDragStart, onDragEnd }) => {
+  DragProvider: (props) => {
+    capturedDragProviderProps = props;
     // Simple wrapper that doesn't require DndContext
-    return <div data-testid="drag-provider">{children}</div>;
+    return <div data-testid="drag-provider">{props.children}</div>;
   },
   DragDroppablePlaceholder: ({ children, disabled, instanceId }) => {
     // Simple wrapper that doesn't require useDroppable
@@ -108,4 +112,145 @@ describe('DragInTheBlank', () => {
       expect(container.firstChild).toBeInTheDocument();
     });
   });
+
+  describe('selection state', () => {
+    const baseProps = {
+      value: {},
+      onChange: jest.fn(),
+      choices: [{ id: '0', value: 'firstChoice' }, { id: '1', value: 'secondChoice' }],
+      markup: 'text {{0}} more {{1}} end',
+    };
+
+    beforeEach(() => {
+      baseProps.onChange.mockClear();
+    });
+
+    it('mirrors an active drag into selectedItem on drag start', () => {
+      const instance = new DragInTheBlank(baseProps);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+      const data = { id: '0', choice: { id: '0', value: 'X' }, fromChoice: false, type: 'MaskBlank' };
+
+      instance.handleDragStart({ active: { data: { current: data } } });
+
+      expect(instance.state.selectedItem).toEqual(data);
+    });
+
+    it('toggleItemSelection selects, then deselects the same item', () => {
+      const instance = new DragInTheBlank(baseProps);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+      const data = { choice: { id: '0' }, fromChoice: true, type: 'MaskBlank' };
+
+      instance.toggleItemSelection(data);
+      expect(instance.state.selectedItem).toEqual(data);
+
+      instance.toggleItemSelection(data);
+      expect(instance.state.selectedItem).toBeNull();
+    });
+
+    it('placeSelectedItem places a pool choice into a blank via commitPlacement/onChange', () => {
+      const instance = new DragInTheBlank(baseProps);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+      const poolChoice = { choice: { id: '0' }, instanceId: 'x', fromChoice: true, type: 'MaskBlank' };
+
+      instance.toggleItemSelection(poolChoice);
+      instance.placeSelectedItem('blank-1');
+
+      expect(baseProps.onChange).toHaveBeenCalledWith({ 'blank-1': '0' });
+      expect(instance.state.selectedItem).toBeNull();
+    });
+
+    it('placeSelectedItem with targetId undefined removes a placed item (returns it to the board)', () => {
+      const props = { ...baseProps, value: { 'blank-1': '0' } };
+      const instance = new DragInTheBlank(props);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+      const placedItem = { id: 'blank-1', choice: { id: '0' }, instanceId: 'x', fromChoice: false, type: 'MaskBlank' };
+
+      instance.toggleItemSelection(placedItem);
+      instance.placeSelectedItem(undefined);
+
+      expect(props.onChange).toHaveBeenCalledWith({});
+    });
+
+    it('placeSelectedItem does nothing when nothing is selected', () => {
+      const instance = new DragInTheBlank(baseProps);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+
+      instance.placeSelectedItem('blank-1');
+
+      expect(baseProps.onChange).not.toHaveBeenCalled();
+    });
+
+    it('onItemClick and onPlacementClick are ignored for a short window right after a drag ends', () => {
+      const instance = new DragInTheBlank(baseProps);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+      const data = { choice: { id: '0' }, fromChoice: true, type: 'MaskBlank' };
+
+      instance.handleDragEnd({ active: null, over: null });
+      instance.onItemClick(data);
+
+      expect(instance.state.selectedItem).toBeNull();
+    });
+
+    it('onPlacementClick is ignored for a short window right after a drag ends', () => {
+      const instance = new DragInTheBlank(baseProps);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+      const data = { choice: { id: '0' }, fromChoice: true, type: 'MaskBlank' };
+
+      instance.handleDragEnd({ active: null, over: null });
+      // Select an item after the drag-end guard is armed, so placeSelectedItem would
+      // have something to place if the guard didn't short-circuit it first.
+      instance.toggleItemSelection(data);
+      instance.onPlacementClick('blank-1');
+
+      expect(baseProps.onChange).not.toHaveBeenCalled();
+      expect(instance.state.selectedItem).toEqual(data);
+    });
+
+    it("onDragEnd dropping a blank's own content back onto its own slot is a no-op", () => {
+      const props = { ...baseProps, value: { 'blank-1': '0' } };
+      const instance = new DragInTheBlank(props);
+      instance.setState = (s) => Object.assign(instance.state, typeof s === 'function' ? s(instance.state) : s);
+      const draggedItem = { id: 'blank-1', choice: { id: '0' }, fromChoice: false, type: 'MaskBlank' };
+
+      instance.handleDragEnd({
+        active: { data: { current: draggedItem } },
+        over: { data: { current: { id: 'blank-1', accepts: ['MaskBlank'] } } },
+      });
+
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('DragProvider wiring', () => {
+    it('passes the Tab/Shift+Tab coordinate getter and keyboard codes to DragProvider', () => {
+      render(
+        <DragInTheBlank
+          value={{}}
+          onChange={jest.fn()}
+          choices={[]}
+          markup="text {{0}} end"
+        />,
+      );
+
+      expect(capturedDragProviderProps.keyboardCoordinateGetter).toBe(closestDroppableKeyboardCoordinates);
+      expect(capturedDragProviderProps.keyboardCodes).toEqual({
+        start: ['Space', 'Enter'],
+        cancel: ['Escape'],
+        end: ['Space', 'Enter'],
+      });
+    });
+
+    it('passes onDragCancel to DragProvider', () => {
+      render(
+        <DragInTheBlank
+          value={{}}
+          onChange={jest.fn()}
+          choices={[]}
+          markup="text {{0}} end"
+        />,
+      );
+
+      expect(typeof capturedDragProviderProps.onDragCancel).toBe('function');
+    });
+  });
 });

package/src/__tests__/keyboard-coordinates.test.js

@@ -0,0 +1,202 @@
+import { KeyboardCode } from '@dnd-kit/core';
+import { closestDroppableKeyboardCoordinates } from '../keyboard-coordinates';
+
+function rectsToContext(rects) {
+  const droppableRects = new Map(Object.entries(rects));
+  const droppableContainers = new Map(Object.keys(rects).map((id) => [id, { disabled: false }]));
+
+  return { droppableRects, droppableContainers };
+}
+
+function makeEvent(code, shiftKey = false) {
+  return { code, preventDefault: () => {}, shiftKey };
+}
+
+// Mirrors dnd-kit's own KeyboardSensor, which always derives collisionRect's top-left
+// from the dragged item's current on-screen position on every keydown — so a test's
+// collisionRect must track currentCoordinates the same way on every simulated press,
+// not stay fixed while currentCoordinates changes across multiple presses.
+function press(rects, currentCoordinates, itemSize, event, active) {
+  const context = {
+    ...rectsToContext(rects),
+    collisionRect: { left: currentCoordinates.x, top: currentCoordinates.y, ...itemSize },
+  };
+
+  return closestDroppableKeyboardCoordinates(event, { active, context, currentCoordinates });
+}
+
+describe('closestDroppableKeyboardCoordinates', () => {
+  describe('arrow keys', () => {
+    it("nudges the dragged item by dnd-kit's own default step (25px), unchanged", () => {
+      const context = { ...rectsToContext({}), collisionRect: { left: 0, top: 0, width: 100, height: 40 } };
+      const currentCoordinates = { x: 10, y: 20 };
+
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Down), { context, currentCoordinates }),
+      ).toEqual({ x: 10, y: 45 });
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Up), { context, currentCoordinates }),
+      ).toEqual({ x: 10, y: -5 });
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Right), { context, currentCoordinates }),
+      ).toEqual({ x: 35, y: 20 });
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Left), { context, currentCoordinates }),
+      ).toEqual({ x: -15, y: 20 });
+    });
+  });
+
+  describe('Tab / Shift+Tab', () => {
+    const blank0Rect = { left: 0, top: 0, width: 120, height: 40, right: 120, bottom: 40 };
+    const blank1Rect = { left: 0, top: 60, width: 120, height: 40, right: 120, bottom: 100 };
+    const boardRect = { left: 0, top: 120, width: 400, height: 300, right: 400, bottom: 420 };
+    const baseRects = {
+      'mask-blank-drop-0': blank0Rect,
+      'mask-blank-drop-1': blank1Rect,
+      'drag-in-the-blank-droppable': boardRect,
+    };
+
+    it('jumps to the next droppable in top-to-bottom order, landing at its center-left point', () => {
+      const currentCoordinates = { x: blank0Rect.left, y: blank0Rect.top };
+
+      const next = press(baseRects, currentCoordinates, { width: 120, height: 40 }, makeEvent('Tab'));
+
+      expect(next).toEqual({ x: blank1Rect.left, y: blank1Rect.top + blank1Rect.height / 2 });
+    });
+
+    it('cycles backwards with Shift+Tab, wrapping to the choice board', () => {
+      const currentCoordinates = { x: blank0Rect.left, y: blank0Rect.top };
+
+      const next = press(baseRects, currentCoordinates, { width: 120, height: 40 }, makeEvent('Tab', true));
+
+      expect(next).toEqual({ x: boardRect.left, y: boardRect.top + boardRect.height / 2 });
+    });
+
+    it("excludes a dragged blank's own drop-zone from the cycle", () => {
+      // A blank is simultaneously draggable and droppable for its own slot (the same
+      // shape as match-list's placed "target" tiles). Without excluding it, containment
+      // would match the blank to itself and cycle relative to itself instead of its
+      // real neighbors — this test is constructed so the two behaviors give different,
+      // distinguishable results (not just coincidentally the same answer).
+      const blankARect = { left: 0, top: 0, width: 120, height: 40, right: 120, bottom: 40 };
+      const blankBRect = { left: 0, top: 60, width: 120, height: 40, right: 120, bottom: 100 };
+      const blankCRect = { left: 0, top: 120, width: 120, height: 40, right: 120, bottom: 160 };
+      const rects = {
+        'mask-blank-drop-a': blankARect,
+        'mask-blank-drop-b': blankBRect,
+        'mask-blank-drop-c': blankCRect,
+      };
+      const active = { data: { current: { id: 'b', fromChoice: false, type: 'MaskBlank' } } };
+      // Sitting exactly at blank B's own position.
+      const currentCoordinates = { x: blankBRect.left, y: blankBRect.top };
+
+      const next = press(rects, currentCoordinates, { width: 120, height: 40 }, makeEvent('Tab', true), active);
+
+      // With B's own slot excluded, Shift+Tab from B's position falls back to
+      // nearest-by-dropPosition among the remaining targets (A and C) — A is closer to
+      // B's actual position, making A the resolved "current", so reverse from there
+      // lands on C. Without the exclusion, containment would match B to itself
+      // directly (index 1 of [A, B, C] sorted by position), landing on A instead.
+      expect(next).toEqual({ x: blankCRect.left, y: blankCRect.top + blankCRect.height / 2 });
+    });
+
+    it('keeps advancing on repeated Shift+Tab when the choice board is much wider than the dragged item', () => {
+      // Regression case for the bug already found and fixed in match-list/image-cloze-
+      // association: matching the "current" target by reconstructing a center from the
+      // dragged item's own small size (instead of checking which target's rect actually
+      // contains it) makes the *next* press re-match a completely different droppable
+      // once the item is actually sitting on a wide target, so it looks like the press
+      // does nothing.
+      const wideBlankRect = { left: 0, top: 0, width: 900, height: 40, right: 900, bottom: 40 };
+      const rects = { 'mask-blank-drop-0': wideBlankRect, 'drag-in-the-blank-droppable': boardRect };
+      const itemSize = { width: 100, height: 40 };
+
+      const afterFirst = press(rects, { x: boardRect.left, y: boardRect.top }, itemSize, makeEvent('Tab', true));
+
+      expect(afterFirst).toEqual({ x: 0, y: 20 }); // wide blank's center-left point
+
+      const afterSecond = press(rects, afterFirst, itemSize, makeEvent('Tab', true));
+
+      expect(afterSecond).toEqual({ x: boardRect.left, y: boardRect.top + boardRect.height / 2 });
+    });
+
+    it('correctly identifies the choice board as the current target when picking up an item positioned near its edge, close to a small neighboring blank', () => {
+      // Regression case for the OTHER failure mode: matching "current target" purely by
+      // nearest-dropPosition (instead of containment first) can misidentify a large
+      // droppable as some small, unrelated nearby one, because a large droppable's
+      // dropPosition is anchored at its own vertical middle.
+      const tallBoardRect = { left: 0, top: 0, width: 400, height: 600, right: 400, bottom: 600 };
+      const smallBlankRect = { left: 0, top: -60, width: 100, height: 40, right: 100, bottom: -20 };
+      const rects = { 'mask-blank-drop-0': smallBlankRect, 'drag-in-the-blank-droppable': tallBoardRect };
+      const itemSize = { width: 100, height: 40 };
+
+      const currentCoordinates = { x: 0, y: 10 };
+
+      const next = press(rects, currentCoordinates, itemSize, makeEvent('Tab'));
+
+      expect(next).toEqual({ x: smallBlankRect.left, y: smallBlankRect.top + smallBlankRect.height / 2 });
+    });
+
+    it('keeps the choice board as a fixed last stop instead of sorting it in by its own center, when the board spans multiple blank rows', () => {
+      // Regression case for a real bug found via manual browser testing: with 3
+      // choices stacked beside wrapped inline text (`choicePosition: 'right'`), the
+      // tall choice board's own center fell numerically BETWEEN blank 2 and blank 3's
+      // rows. Sorting it by position the same way as a blank interleaved it into the
+      // middle of the cycle, so the very first Tab press after picking up a pool
+      // choice jumped straight to blank 3, skipping blanks 1 and 2 entirely.
+      const blank0Rect = { left: 0, top: 200, width: 50, height: 50, right: 50, bottom: 250 };
+      const blank1Rect = { left: 0, top: 250, width: 50, height: 50, right: 50, bottom: 300 };
+      const blank2Rect = { left: 0, top: 285, width: 50, height: 50, right: 50, bottom: 335 };
+      // Spans all three choices stacked beside the text — its center (287.5) falls
+      // between blank1's (275) and blank2's (310), more than 10px from either, so the
+      // old position-based sort placed it between them.
+      const tallBoardRect = { left: 400, top: 195, width: 80, height: 185, right: 480, bottom: 380 };
+      const rects = {
+        'mask-blank-drop-0': blank0Rect,
+        'mask-blank-drop-1': blank1Rect,
+        'mask-blank-drop-2': blank2Rect,
+        'drag-in-the-blank-droppable': tallBoardRect,
+      };
+      const active = { data: { current: { fromChoice: true, choice: { id: 'x' }, type: 'MaskBlank' } } };
+      const itemSize = { width: 48, height: 50 };
+      // Picking up a choice from within the board — its own current position, before
+      // any movement, sits inside the board's rect.
+      const currentCoordinates = { x: 415, y: 205 };
+
+      const next = press(rects, currentCoordinates, itemSize, makeEvent('Tab'), active);
+
+      expect(next).toEqual({ x: blank0Rect.left, y: blank0Rect.top + blank0Rect.height / 2 });
+    });
+
+    it('cycles through every blank in position order, then the board, then wraps — even when the board would otherwise sort into the middle', () => {
+      const blank0Rect = { left: 0, top: 200, width: 50, height: 50, right: 50, bottom: 250 };
+      const blank1Rect = { left: 0, top: 250, width: 50, height: 50, right: 50, bottom: 300 };
+      const blank2Rect = { left: 0, top: 285, width: 50, height: 50, right: 50, bottom: 335 };
+      const tallBoardRect = { left: 400, top: 195, width: 80, height: 185, right: 480, bottom: 380 };
+      const rects = {
+        'mask-blank-drop-0': blank0Rect,
+        'mask-blank-drop-1': blank1Rect,
+        'mask-blank-drop-2': blank2Rect,
+        'drag-in-the-blank-droppable': tallBoardRect,
+      };
+      const active = { data: { current: { fromChoice: true, choice: { id: 'x' }, type: 'MaskBlank' } } };
+      const itemSize = { width: 48, height: 50 };
+
+      let coords = { x: 415, y: 205 };
+      const visited = [];
+
+      for (let i = 0; i < 5; i++) {
+        coords = press(rects, coords, itemSize, makeEvent('Tab'), active);
+        visited.push(coords);
+      }
+
+      expect(visited).toEqual([
+        { x: blank0Rect.left, y: blank0Rect.top + blank0Rect.height / 2 },
+        { x: blank1Rect.left, y: blank1Rect.top + blank1Rect.height / 2 },
+        { x: blank2Rect.left, y: blank2Rect.top + blank2Rect.height / 2 },
+        { x: tallBoardRect.left, y: tallBoardRect.top + tallBoardRect.height / 2 },
+        { x: blank0Rect.left, y: blank0Rect.top + blank0Rect.height / 2 }, // wraps
+      ]);
+    });
+  });
+});

package/src/__tests__/mask.test.js

@@ -185,6 +185,104 @@ describe('Mask', () => {
     });
   });
 
+  describe('mark rendering', () => {
+    const markedLayout = (marks, text = 'x') => ({
+      nodes: [
+        {
+          object: 'text',
+          leaves: [{ marks, text }],
+        },
+      ],
+    });
+
+    it('renders a mark as an element, not as escaped html text', () => {
+      const { container } = render(<Mask {...defaultProps} layout={markedLayout([{ type: 'bold' }])} />);
+
+      const b = container.querySelector('b');
+      expect(b).toBeInTheDocument();
+      expect(b.textContent).toBe('x');
+      // the tag must not leak into the text content
+      expect(container.textContent).toBe('x');
+    });
+
+    it.each([
+      ['bold', 'b'],
+      ['italic', 'em'],
+      ['underline', 'u'],
+      ['strikethrough', 's'],
+      ['code', 'code'],
+      ['strong', 'strong'],
+    ])('maps the %s mark to a <%s> element', (markType, tag) => {
+      const { container } = render(<Mask {...defaultProps} layout={markedLayout([{ type: markType }])} />);
+
+      const el = container.querySelector(tag);
+      expect(el).toBeInTheDocument();
+      expect(el.textContent).toBe('x');
+    });
+
+    it('nests multiple marks, keeping the first mark as the outermost tag', () => {
+      const { container } = render(
+        <Mask {...defaultProps} layout={markedLayout([{ type: 'bold' }, { type: 'italic' }])} />,
+      );
+
+      const nested = container.querySelector('b > em');
+      expect(nested).toBeInTheDocument();
+      expect(nested.textContent).toBe('x');
+      expect(container.textContent).toBe('x');
+    });
+
+    it('nests three marks in mark order', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={markedLayout([{ type: 'underline' }, { type: 'strikethrough' }, { type: 'italic' }])}
+        />,
+      );
+
+      const nested = container.querySelector('u > s > em');
+      expect(nested).toBeInTheDocument();
+      expect(nested.textContent).toBe('x');
+    });
+
+    it('renders plain text when no mark maps to a tag', () => {
+      const { container } = render(<Mask {...defaultProps} layout={markedLayout([{ type: 'unknown-mark' }])} />);
+
+      expect(container.textContent).toBe('x');
+      expect(container.firstChild.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+    });
+
+    it('wraps only the marks that map to a tag', () => {
+      const { container } = render(
+        <Mask {...defaultProps} layout={markedLayout([{ type: 'unknown-mark' }, { type: 'bold' }])} />,
+      );
+
+      const b = container.querySelector('b');
+      expect(b).toBeInTheDocument();
+      expect(b.textContent).toBe('x');
+      expect(container.textContent).toBe('x');
+    });
+
+    it('renders marked text inline alongside unmarked text', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={{
+            nodes: [
+              { object: 'text', leaves: [{ text: 'Foo ' }] },
+              { object: 'text', leaves: [{ marks: [{ type: 'bold' }, { type: 'italic' }], text: 'x' }] },
+              { object: 'text', leaves: [{ text: ' bar' }] },
+            ],
+            object: 'block',
+            type: 'div',
+          }}
+        />,
+      );
+
+      expect(container.querySelector('b > em').textContent).toBe('x');
+      expect(container.textContent).toBe('Foo x bar');
+    });
+  });
+
   describe('spacer rendering for DnD components', () => {
     it('adds spacers before and after DnD blank components', () => {
       const mockRenderChildren = jest.fn((n) => {

package/src/choices/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import Choice from '../choice';
 import { choice } from '../../__tests__/utils';
 import Choices from '../index';
@@ -65,6 +65,48 @@ describe('index', () => {
       const { container } = render(<Choices {...defaultProps} duplicates={true} value={{ 0: '0', 1: '1' }} />);
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    describe('click-to-place into the pool', () => {
+      it('places the selection into the pool when clicking the pool background', () => {
+        const onPlacementClick = jest.fn();
+        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
+        const { container } = render(
+          <Choices {...defaultProps} selectedItem={selectedItem} onPlacementClick={onPlacementClick} />,
+        );
+
+        fireEvent.click(container.firstChild);
+
+        expect(onPlacementClick).toHaveBeenCalledWith(undefined);
+      });
+
+      it('does nothing when clicking the pool background with nothing selected', () => {
+        const onPlacementClick = jest.fn();
+        const { container } = render(<Choices {...defaultProps} onPlacementClick={onPlacementClick} />);
+
+        fireEvent.click(container.firstChild);
+
+        expect(onPlacementClick).not.toHaveBeenCalled();
+      });
+
+      it('clicking a specific choice selects it, not the pool background handler', () => {
+        const onPlacementClick = jest.fn();
+        const onSelectClick = jest.fn();
+        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
+        render(
+          <Choices
+            {...defaultProps}
+            selectedItem={selectedItem}
+            onSelectClick={onSelectClick}
+            onPlacementClick={onPlacementClick}
+          />,
+        );
+
+        fireEvent.click(screen.getByText('Jumped'));
+
+        expect(onSelectClick).toHaveBeenCalled();
+        expect(onPlacementClick).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('Choice', () => {
@@ -105,5 +147,66 @@ describe('index', () => {
         expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
       });
     });
+
+    describe('click-to-select', () => {
+      it('selects this choice on click when nothing else is selected', () => {
+        const onSelectClick = jest.fn();
+        const { container } = render(<Choice {...defaultProps} selectedItem={null} onSelectClick={onSelectClick} />);
+
+        fireEvent.click(container.firstChild);
+
+        expect(onSelectClick).toHaveBeenCalledWith({
+          choice: defaultProps.choice,
+          instanceId: defaultProps.instanceId,
+          fromChoice: true,
+          type: 'MaskBlank',
+        });
+      });
+
+      it('toggles off (calls onSelectClick again) when clicking the already-selected choice', () => {
+        const onSelectClick = jest.fn();
+        const selectedItem = { choice: defaultProps.choice, instanceId: defaultProps.instanceId, fromChoice: true, type: 'MaskBlank' };
+        const { container } = render(
+          <Choice {...defaultProps} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
+        );
+
+        fireEvent.click(container.firstChild);
+
+        expect(onSelectClick).toHaveBeenCalledWith({
+          choice: defaultProps.choice,
+          instanceId: defaultProps.instanceId,
+          fromChoice: true,
+          type: 'MaskBlank',
+        });
+      });
+
+      it('selects this choice even while a different item is already selected (pool items are never placement targets)', () => {
+        const onSelectClick = jest.fn();
+        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
+        const { container } = render(
+          <Choice {...defaultProps} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
+        );
+
+        fireEvent.click(container.firstChild);
+
+        expect(onSelectClick).toHaveBeenCalledWith({
+          choice: defaultProps.choice,
+          instanceId: defaultProps.instanceId,
+          fromChoice: true,
+          type: 'MaskBlank',
+        });
+      });
+
+      it('does nothing on click when disabled', () => {
+        const onSelectClick = jest.fn();
+        const { container } = render(
+          <Choice {...defaultProps} disabled={true} selectedItem={null} onSelectClick={onSelectClick} />,
+        );
+
+        fireEvent.click(container.firstChild);
+
+        expect(onSelectClick).not.toHaveBeenCalled();
+      });
+    });
   });
 });

package/src/choices/choice.jsx

@@ -8,12 +8,12 @@ import { color } from '@pie-lib/render-ui';
 
 export const DRAG_TYPE = 'MaskBlank';
 
-const StyledChoice = styled('span')(({ theme, disabled }) => ({
+const StyledChoice = styled('span')(({ theme, disabled, selected }) => ({
   border: `solid 0px ${theme.palette.primary.main}`,
-  borderRadius: theme.spacing(2),
   margin: theme.spacing(0.5),
   transform: 'translate(0, 0)',
   display: 'inline-flex',
+  opacity: selected ? 0.7 : 1,
   ...(disabled && {}),
 }));
 
@@ -55,7 +55,7 @@ const StyledChipLabel = styled('span')(() => ({
   },
 }));
 
-export default function Choice({ choice, disabled, instanceId }) {
+export default function Choice({ choice, disabled, instanceId, selectedItem, onSelectClick }) {
   const rootRef = useRef(null);
 
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
@@ -68,6 +68,15 @@ export default function Choice({ choice, disabled, instanceId }) {
     renderMath(rootRef.current);
   }, [choice.value]);
 
+  const isSelected = !!selectedItem && selectedItem.fromChoice === true && selectedItem.choice.id === choice.id;
+
+  const handleClick = (e) => {
+    if (disabled) return;
+
+    e.stopPropagation();
+    onSelectClick?.({ choice, instanceId, fromChoice: true, type: DRAG_TYPE });
+  };
+
   return (
     <StyledChoice
       ref={setNodeRef}
@@ -80,6 +89,8 @@ export default function Choice({ choice, disabled, instanceId }) {
           : {}
       }
       disabled={disabled}
+      selected={isSelected}
+      onClick={handleClick}
       {...listeners}
       {...attributes}
     >
@@ -97,4 +108,6 @@ Choice.propTypes = {
   choice: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
   instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selectedItem: PropTypes.object,
+  onSelectClick: PropTypes.func,
 };