@pie-lib/mask-markup 3.1.5 → 3.1.6-beta.2

package/src/components/blank.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { renderMath } from '@pie-lib/math-rendering';
 import debug from 'debug';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
 import { styled } from '@mui/material/styles';
 import Chip from '@mui/material/Chip';
 import classnames from 'classnames';
@@ -11,32 +12,22 @@ import { grey } from '@mui/material/colors';
 
 const log = debug('pie-lib:mask-markup:blank');
 
-const StyledContent = styled('span')(({ dragged, over, selected, showsPointerCursor }) => ({
+const StyledContent = styled('span')(({ dragged, over }) => ({
   border: `solid 0px ${color.primary()}`,
   minWidth: '200px',
+  touchAction: 'none',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   opacity: 1,
-  cursor: 'default',
   ...(over && {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
   }),
-  ...((dragged || selected) && {
+  ...(dragged && {
     opacity: 0.5,
   }),
-  ...(showsPointerCursor && {
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  }),
 }));
 
-const StyledDragHandle = styled('span')({
-  display: 'inline-flex',
-  touchAction: 'none',
-});
-
 const StyledChip = styled(Chip)(() => ({
   backgroundColor: color.background(),
   border: `2px dashed ${color.text()}`,
@@ -350,40 +341,23 @@ function DragDropBlank({
   emptyResponseAreaWidth,
   emptyResponseAreaHeight,
   instanceId,
-  selectedItem,
-  onSelectClick,
-  onPlacementClick,
 }) {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const dragData = {
-    id,
-    choice,
-    instanceId,
-    fromChoice: false, // This is from a blank, not from choices
-    type: 'MaskBlank',
-  };
-
   // Setup draggable functionality
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
     setNodeRef: setDragNodeRef,
+    transform,
     isDragging,
   } = useDraggable({
     id: `mask-blank-drag-${id}`,
     disabled: disabled || !choice,
-    data: dragData,
-    // dnd-kit's own `attributes` default tabIndex to 0 unconditionally, even when
-    // `disabled` — so a non-draggable (empty) blank stays a native Tab stop of its own.
-    // For a drop-zone (droppable blank), that duplicates the outer wrapper's own tab stop
-    // (see isNativeTabStop below) at the exact same position, so Tab/Shift+Tab has to
-    // pass through both to move anywhere visibly, making every other press look like a
-    // no-op. Drop it out of the tab order here whenever it isn't independently
-    // reachable/interactive, leaving the outer wrapper (for an empty blank) or
-    // nothing (for a disabled blank) as the sole stop.
-    attributes: {
-      tabIndex: choice && !disabled ? 0 : -1,
+    data: {
+      id: id,
+      choice: choice,
+      instanceId: instanceId,
+      fromChoice: false, // This is from a blank, not from choices
+      type: 'MaskBlank',
     },
   });
 
@@ -401,82 +375,38 @@ function DragDropBlank({
     },
   });
 
-  const isSelected = !!selectedItem && selectedItem.fromChoice === false && selectedItem.id === id;
-
-  const handleClick = () => {
-    if (disabled) return;
-
-    if (isSelected) {
-      // Clicking this blank's already-selected content again deselects it.
-      onSelectClick?.(dragData);
-    } else if (selectedItem) {
-      // Something else is selected — place it here, whether this blank is currently
-      // empty or already filled (the same commitPlacement logic drag-and-drop uses).
-      onPlacementClick?.(id);
-    } else if (choice) {
-      // Nothing selected yet, and this blank holds an answer — select it for moving
-      // elsewhere, the same way Tab+Space/Enter does.
-      onSelectClick?.(dragData);
-    }
-
-    // Empty blank clicked with nothing selected: nothing to place or select.
+  // Combine refs for both drag and drop
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
   };
 
-  // An empty blank isn't draggable, so dnd-kit's own attributes (only applied to the
-  // inner node, and only when draggable) never make it tabbable — this outer wrapper
-  // needs its own focus/activation handling so "select a choice, then Tab to a blank
-  // and press Space/Enter" works even when the blank is empty. This is independent of,
-  // and doesn't change, the existing in-drag Tab-cycling (that's driven by an active
-  // dnd-kit drag, not native focus).
-  //
-  // Only made a native Tab stop when NOT draggable (i.e. empty): when the blank is
-  // filled, the inner node is already independently tabbable via dnd-kit's own
-  // attributes for the existing pick-up-to-move gesture, and adding a second, outer Tab
-  // stop for the same visual chip would add an extra stop to the existing Tab order —
-  // the same double-tab-stop bug already found and fixed once in match-list/image-
-  // cloze-association's equivalent code.
-  const isNativeTabStop = !choice && !disabled;
-  const isInnerDraggable = !!choice && !disabled;
-
-  const handleKeyDown = (e) => {
-    if (e.code === 'Space' || e.code === 'Enter') {
-      e.preventDefault();
-      handleClick();
-    }
+  const style = {
+    transform: CSS.Translate.toString(transform),
   };
 
-  const hasSelection = !!selectedItem;
-  const showsHoverEffect = isOver || (hasSelection && isHovered && !disabled);
-
   return (
     <StyledContent
-      ref={setDropNodeRef}
-      role={isNativeTabStop ? 'button' : undefined}
-      tabIndex={isNativeTabStop ? 0 : -1}
-      onClick={handleClick}
-      onKeyDown={isNativeTabStop ? handleKeyDown : undefined}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      ref={setNodeRef}
+      style={style}
       dragged={isDragging}
-      over={showsHoverEffect}
-      selected={isSelected}
-      showsPointerCursor={hasSelection && !disabled}
+      over={isOver}
+      {...dragAttributes}
+      {...dragListeners}
     >
-      <StyledDragHandle ref={setDragNodeRef} {...(isInnerDraggable ? dragAttributes : {})} {...dragListeners}>
-        <BlankContent
-          id={id}
-          disabled={disabled}
-          duplicates={duplicates}
-          choice={choice}
-          isOver={showsHoverEffect}
-          dragItem={dragItem?.data?.current}
-          correct={correct}
-          onChange={onChange}
-          emptyResponseAreaWidth={emptyResponseAreaWidth}
-          emptyResponseAreaHeight={emptyResponseAreaHeight}
-          instanceId={instanceId}
-        />
-      </StyledDragHandle>
+      <BlankContent
+        id={id}
+        disabled={disabled}
+        duplicates={duplicates}
+        choice={choice}
+        isOver={isOver}
+        dragItem={dragItem?.data?.current}
+        correct={correct}
+        onChange={onChange}
+        emptyResponseAreaWidth={emptyResponseAreaWidth}
+        emptyResponseAreaHeight={emptyResponseAreaHeight}
+        instanceId={instanceId}
+      />
     </StyledContent>
   );
 }
@@ -496,9 +426,6 @@ DragDropBlank.propTypes = {
   emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   instanceId: PropTypes.string,
-  selectedItem: PropTypes.object,
-  onSelectClick: PropTypes.func,
-  onPlacementClick: PropTypes.func,
 };
 
 export default DragDropBlank;

package/src/components/dropdown.jsx

@@ -13,8 +13,6 @@ import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 
-const pieVar = color.v('pie');
-
 const StyledButton = styled(Button)(() => ({
   color: color.text(),
   border: `1px solid ${color.borderGray()}`,
@@ -55,11 +53,15 @@ const StyledButton = styled(Button)(() => ({
 }));
 
 const StyledMenu = styled(Menu)(() => ({
-  '& .MuiPaper-root': {
-    // honour the host's --pie-background, but stay opaque when it is undefined:
-    // color.background() falls back to rgba(255,255,255,0), which makes the open
-    // menu transparent and unreadable over the item content (PIE-1008)
-    backgroundColor: pieVar('background', color.defaults.WHITE),
+  backgroundColor: color.background(),
+  border: `1px solid ${color.correct()} !important`,
+  '&:hover': {
+    border: `1px solid ${color.text()} `,
+    borderColor: 'initial',
+  },
+  '&:focus': {
+    border: `1px solid ${color.text()}`,
+    borderColor: 'initial',
   },
   // remove default padding on the inner list
   '& .MuiList-root': {

package/src/drag-in-the-blank.jsx

@@ -6,13 +6,6 @@ import Choices from './choices';
 import Choice from './choices/choice';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
-import { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';
-
-// A click that lands right after a real drag gesture ends (pointer drag-and-drop, or
-// the browser's own synthetic click for a keyboard Space/Enter) must be ignored by the
-// click-to-select/click-to-place handlers below, or it would immediately reopen or
-// re-trigger a selection for a drag that just completed.
-const CLICK_AFTER_DRAG_GUARD_MS = 250;
 
 const Masked = withMask('blank', (props) => (node, data, onChange) => {
   const dataset = node.data?.dataset || {};
@@ -28,9 +21,6 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
       emptyResponseAreaHeight,
       instanceId,
       isDragging,
-      selectedItem,
-      onSelectClick,
-      onPlacementClick,
     } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
@@ -57,9 +47,6 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         }}
         instanceId={instanceId}
         isDragging={isDragging}
-        selectedItem={selectedItem}
-        onSelectClick={onSelectClick}
-        onPlacementClick={onPlacementClick}
       />
     );
   }
@@ -71,9 +58,7 @@ export default class DragInTheBlank extends React.Component {
     this.state = {
       activeDragItem: null,
       dropAnimation: undefined,
-      selectedItem: null,
     };
-    this.lastDragEndAt = 0;
   }
 
   static propTypes = {
@@ -104,7 +89,6 @@ export default class DragInTheBlank extends React.Component {
       this.setState({
         activeDragItem: active.data.current,
         dropAnimation: undefined, // default during drag
-        selectedItem: active.data.current,
       });
     }
   };
@@ -126,40 +110,9 @@ export default class DragInTheBlank extends React.Component {
     return null;
   };
 
-  // Shared placement logic for both the drag-end path and the click-to-place path, so
-  // neither reimplements the other's mutation rules.
-  //
-  // `targetId === undefined` means "the choice board" — placing there removes the item
-  // from wherever it currently is (mirroring image-cloze-association's
-  // `containerIndex === undefined` convention for its own choices pool).
-  commitPlacement = (draggedItem, targetId) => {
-    const { onChange, value } = this.props;
-
-    if (!onChange) return;
-
-    if (targetId === undefined) {
-      if (!draggedItem.fromChoice && draggedItem.id) {
-        const newValue = { ...value };
-        delete newValue[draggedItem.id];
-        onChange(newValue);
-      }
-      return;
-    }
-
-    if (draggedItem.fromChoice === true) {
-      const newValue = { ...value };
-      newValue[targetId] = draggedItem.choice.id;
-      onChange(newValue);
-    } else if (draggedItem.id && draggedItem.id !== targetId) {
-      const newValue = { ...value };
-      newValue[targetId] = draggedItem.choice.id;
-      delete newValue[draggedItem.id];
-      onChange(newValue);
-    }
-  };
-
   handleDragEnd = (event) => {
     const { active, over } = event;
+    const { onChange, value } = this.props;
 
     const draggedData = active?.data?.current;
     const dropData = over?.data?.current;
@@ -173,83 +126,29 @@ export default class DragInTheBlank extends React.Component {
       dropAnimation: isValidDrop ? null : undefined,
     });
 
-    this.cancelSelection();
-    this.lastDragEndAt = Date.now();
-
-    if (!isValidDrop) return;
-
-    const targetId = dropData.toChoiceBoard === true ? undefined : dropData.id;
-
-    this.commitPlacement(draggedData, targetId);
-  };
-
-  onDragCancel = () => {
-    this.setState({ activeDragItem: null, dropAnimation: undefined });
-    this.cancelSelection();
-    this.lastDragEndAt = Date.now();
-  };
-
-  isSameItem = (a, b) => {
-    if (!a || !b || a.fromChoice !== b.fromChoice) return false;
-    return a.fromChoice ? a.choice.id === b.choice.id : a.id === b.id;
-  };
-
-  // Click-to-select semantics: selecting the currently-selected item again clears the
-  // selection instead of re-selecting it.
-  toggleItemSelection = (data) => {
-    this.setState((state) => ({
-      selectedItem: this.isSameItem(state.selectedItem, data) ? null : data,
-    }));
-  };
-
-  cancelSelection = () => {
-    this.setState({ selectedItem: null });
-  };
-
-  // If a real dnd-kit drag (started via keyboard Space/Enter) is still live when a
-  // click completes the placement below, it needs to be cleanly ended — otherwise
-  // dnd-kit would still think a drag is in progress. Escape is already configured as
-  // this sensor's cancel key (see the keyboardCodes passed to DragProvider below), and
-  // dispatching it as a real DOM KeyboardEvent is how dnd-kit's own document-level
-  // listener is reached from outside its sensor.
-  //
-  // Only dispatch when a drag is actually live — this is a synthetic Escape keydown on
-  // `document`, so an unconditional dispatch would also be observed by any other
-  // document-level Escape listener (host player modals/dialogs, or another mounted
-  // instance of this same component) even when nothing here actually needed cancelling.
-  endAnyLiveKeyboardDrag = () => {
-    if (!this.state.activeDragItem) return;
-
-    document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape', bubbles: true, cancelable: true }));
-  };
-
-  placeSelectedItem = (targetId) => {
-    const { selectedItem } = this.state;
-
-    if (!selectedItem) return;
-
-    this.commitPlacement(selectedItem, targetId);
-    this.cancelSelection();
-    this.endAnyLiveKeyboardDrag();
-  };
-
-  isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < CLICK_AFTER_DRAG_GUARD_MS;
-
-  onItemClick = (data) => {
-    if (this.isClickSoonAfterDragEnd()) return;
-
-    // End any still-live keyboard drag BEFORE toggling the new selection: ending it
-    // also cancels the current selection as a side effect (see onDragCancel above), so
-    // doing it before — not after — lets this click's own selection be the one that
-    // sticks.
-    this.endAnyLiveKeyboardDrag();
-    this.toggleItemSelection(data);
-  };
+    if (!isValidDrop || !onChange) return;
 
-  onPlacementClick = (targetId) => {
-    if (this.isClickSoonAfterDragEnd()) return;
+    const draggedItem = draggedData;
+    const targetId = dropData.id;
 
-    this.placeSelectedItem(targetId);
+    if (dropData.toChoiceBoard === true) {
+      if (!draggedItem.fromChoice && draggedItem.id) {
+        const newValue = { ...value };
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+    } else if (draggedItem.fromChoice === true) {
+      if (targetId && targetId !== 'drag-in-the-blank-droppable') {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        onChange(newValue);
+      }
+    } else if (draggedItem.id && draggedItem.id !== targetId) {
+      const newValue = { ...value };
+      newValue[targetId] = draggedItem.choice.id;
+      delete newValue[draggedItem.id];
+      onChange(newValue);
+    }
   };
 
   getPositionDirection = (choicePosition) => {
@@ -304,10 +203,7 @@ export default class DragInTheBlank extends React.Component {
       <DragProvider
         onDragStart={this.handleDragStart}
         onDragEnd={this.handleDragEnd}
-        onDragCancel={this.onDragCancel}
         collisionDetection={rectIntersection}
-        keyboardCoordinateGetter={closestDroppableKeyboardCoordinates}
-        keyboardCodes={{ start: ['Space', 'Enter'], cancel: ['Escape'], end: ['Space', 'Enter'] }}
       >
         <div ref={(ref) => (this.rootRef = ref)} style={style}>
           <Choices
@@ -317,9 +213,6 @@ export default class DragInTheBlank extends React.Component {
             duplicates={duplicates}
             disabled={disabled}
             instanceId={instanceId}
-            selectedItem={this.state.selectedItem}
-            onSelectClick={this.onItemClick}
-            onPlacementClick={this.onPlacementClick}
           />
           <Masked
             elementType="drag-in-the-blank"
@@ -337,9 +230,6 @@ export default class DragInTheBlank extends React.Component {
             emptyResponseAreaHeight={emptyResponseAreaHeight}
             instanceId={instanceId}
             isDragging={!!this.state.activeDragItem}
-            selectedItem={this.state.selectedItem}
-            onSelectClick={this.onItemClick}
-            onPlacementClick={this.onPlacementClick}
           />
           <DragOverlay style={{ pointerEvents: 'none' }} dropAnimation={this.state.dropAnimation}>
             {this.renderDragOverlay()}

package/src/mask.jsx

@@ -32,7 +32,7 @@ const getMark = (n) => {
   const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
 
   if (mark) {
-    return mark.marks;
+    return mark.marks[0];
   }
 
   return null;
@@ -83,20 +83,18 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         const extraText = addText(parentNode, t);
         return extraText ? acc + extraText : acc;
       }, '');
-      const marks = getMark(n);
+      const mark = getMark(n);
 
-      if (marks?.length > 0) {
-        const tagsToWrap = marks
-          .map((mark) => Object.keys(MARK_TAGS).find((markKey) => MARK_TAGS[markKey] === mark.type))
-          .filter(Boolean);
+      if (mark) {
+        let markKey;
 
-        if (tagsToWrap.length > 0) {
-          // nest from the inside out so the first mark ends up as the outermost tag: <b><em>content</em></b>
-          children.push(
-            tagsToWrap.reduceRight((acc, Tag, tagIndex) => <Tag key={`${key}-${Tag}-${tagIndex}`}>{acc}</Tag>, content),
-          );
-        } else {
-          children.push(content);
+        for (markKey in MARK_TAGS) {
+          if (MARK_TAGS[markKey] === mark.type) {
+            const Tag = markKey;
+
+            children.push(<Tag key={key}>{content}</Tag>);
+            break;
+          }
         }
       } else if (content.length > 0) {
         children.push(content);

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/lib/keyboard-coordinates.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard-coordinates.js","names":["_core","require","_createForOfIteratorHelper","r","e","t","Symbol","iterator","Array","isArray","_unsupportedIterableToArray","length","_n","F","s","n","done","value","f","TypeError","o","a","u","call","next","_arrayLikeToArray","toString","slice","constructor","name","from","test","CHOICE_BOARD_ID","closestDroppableKeyboardCoordinates","exports","event","_ref","_active$data","active","context","currentCoordinates","code","isTab","KeyboardCode","Tab","isArrow","Down","Up","Left","Right","undefined","defaultKeyboardCoordinateGetter","preventDefault","droppableRects","droppableContainers","collisionRect","size","draggedData","data","current","ownDropId","fromChoice","id","concat","targets","boardTarget","_iterator","_step","_step$value","_slicedToArray2","container","disabled","rect","get","center","x","left","width","y","top","height","dropPosition","target","push","err","reverse","shiftKey","sort","b","Math","abs","draggedCenter","currentIndex","findIndex","right","bottom","minDist","Infinity","i","dist","distance","nextIndex","sqrt","pow"],"sources":["../src/keyboard-coordinates.js"],"sourcesContent":["import { defaultKeyboardCoordinateGetter, KeyboardCode } from '@dnd-kit/core';\n\n// Matches the id `drag-in-the-blank-dp.jsx` registers for the choice board's droppable.\nconst CHOICE_BOARD_ID = 'drag-in-the-blank-droppable';\n\n/**\n * Custom keyboard coordinate getter for drag-in-the-blank's Tab-based placement.\n *\n * Tab/Shift+Tab cycle the dragged item directly onto the next/previous enabled\n * droppable — a blank (`mask-blank-drop-{id}`), sorted by on-screen position\n * (top-to-bottom, then left-to-right, since blanks sit inline in flowing text rather\n * than a simple list) — followed by the choice board as a fixed last stop (see below\n * for why the board isn't sorted alongside the blanks).\n *\n * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving\n * the existing free-form arrow-key dragging behavior completely unchanged.\n */\nexport const closestDroppableKeyboardCoordinates = (event, { active, context, currentCoordinates }) => {\n  const { code } = event;\n  const isTab = code === KeyboardCode.Tab;\n  const isArrow =\n    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;\n\n  if (!isTab && !isArrow) {\n    return undefined;\n  }\n\n  if (isArrow) {\n    return defaultKeyboardCoordinateGetter(event, { context, currentCoordinates });\n  }\n\n  event.preventDefault();\n\n  const { droppableRects, droppableContainers, collisionRect } = context;\n\n  if (!droppableRects || droppableRects.size === 0) {\n    return currentCoordinates;\n  }\n\n  // A blank is itself a droppable for its own slot (\"mask-blank-drop-{id}\"), and\n  // simultaneously draggable from that same slot — the same shape as match-list's\n  // placed \"target\" tiles. That self drop-zone must never be treated as a navigable\n  // target: exclude it outright rather than relying on a distance threshold.\n  const draggedData = active?.data?.current;\n  const ownDropId =\n    draggedData && draggedData.fromChoice === false && draggedData.id != null\n      ? `mask-blank-drop-${draggedData.id}`\n      : undefined;\n\n  const targets = [];\n  let boardTarget;\n\n  for (const [id, container] of droppableContainers) {\n    if (container?.disabled) continue;\n    if (id === ownDropId) continue;\n\n    const rect = droppableRects.get(id);\n    if (!rect) continue;\n\n    const center = {\n      x: rect.left + rect.width / 2,\n      y: rect.top + rect.height / 2,\n    };\n    // Land the dragged item's own top-left corner at the target's center-left point,\n    // rather than at the target's own top-left corner (avoids overshooting into a\n    // neighboring droppable when the target is much wider than the dragged item).\n    const dropPosition = {\n      x: rect.left,\n      y: rect.top + rect.height / 2,\n    };\n\n    const target = { id, rect, dropPosition, center };\n\n    if (id === CHOICE_BOARD_ID) {\n      boardTarget = target;\n    } else {\n      targets.push(target);\n    }\n  }\n\n  if (targets.length === 0 && !boardTarget) {\n    return currentCoordinates;\n  }\n\n  const reverse = event.shiftKey;\n\n  targets.sort((a, b) => {\n    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;\n    return a.center.x - b.center.x;\n  });\n\n  // The choice board can be an arbitrarily large container — e.g. several choices\n  // stacked beside the markup (`choicePosition: 'right'`/`'left'`) — so its own center\n  // can land anywhere relative to the blanks it sits beside, including numerically\n  // between two of them. Sorting it by position the same way as a blank would then\n  // interleave it into the middle of the cycle, making a single Tab press jump over\n  // more than one blank (confirmed live: with 3 stacked choices beside wrapped text,\n  // the board's center fell between blank 2 and blank 3, so the very first Tab press\n  // from the pool landed on blank 3, skipping blanks 1 and 2 entirely). Anchor it as a\n  // fixed stop after every blank, in every layout, instead of trusting its own bounds.\n  if (boardTarget) {\n    targets.push(boardTarget);\n  }\n\n  // Find the current target: whichever target's rect actually contains the dragged\n  // item's own center. This holds regardless of how the dragged item's size compares\n  // to the target's — a compact chip landed (per `dropPosition` above) at a much wider\n  // target's left edge is still contained within that target's rect. Comparing\n  // distances between reconstructed centers instead breaks down for exactly that shape\n  // (a small item in a much wider target): the reconstructed center can end up closer\n  // to a completely different droppable than to the one the item is actually sitting\n  // on, so the *next* press re-matches the wrong target and looks like it does nothing.\n  const draggedCenter = collisionRect\n    ? { x: collisionRect.left + collisionRect.width / 2, y: collisionRect.top + collisionRect.height / 2 }\n    : currentCoordinates;\n\n  let currentIndex = targets.findIndex(\n    (t) =>\n      draggedCenter.x >= t.rect.left &&\n      draggedCenter.x <= t.rect.right &&\n      draggedCenter.y >= t.rect.top &&\n      draggedCenter.y <= t.rect.bottom,\n  );\n\n  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly\n  // inside any target (e.g. mid-flight after a free arrow-key move).\n  if (currentIndex === -1) {\n    let minDist = Infinity;\n\n    for (let i = 0; i < targets.length; i++) {\n      const dist = distance(currentCoordinates, targets[i].dropPosition);\n\n      if (dist < minDist) {\n        minDist = dist;\n        currentIndex = i;\n      }\n    }\n  }\n\n  const nextIndex = reverse\n    ? (currentIndex - 1 + targets.length) % targets.length\n    : (currentIndex + 1) % targets.length;\n\n  return targets[nextIndex].dropPosition;\n};\n\nconst distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n"],"mappings":";;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAA8E,SAAAC,2BAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,yBAAAC,MAAA,IAAAH,CAAA,CAAAG,MAAA,CAAAC,QAAA,KAAAJ,CAAA,qBAAAE,CAAA,QAAAG,KAAA,CAAAC,OAAA,CAAAN,CAAA,MAAAE,CAAA,GAAAK,2BAAA,CAAAP,CAAA,MAAAC,CAAA,IAAAD,CAAA,uBAAAA,CAAA,CAAAQ,MAAA,IAAAN,CAAA,KAAAF,CAAA,GAAAE,CAAA,OAAAO,EAAA,MAAAC,CAAA,YAAAA,EAAA,eAAAC,CAAA,EAAAD,CAAA,EAAAE,CAAA,WAAAA,EAAA,WAAAH,EAAA,IAAAT,CAAA,CAAAQ,MAAA,KAAAK,IAAA,WAAAA,IAAA,MAAAC,KAAA,EAAAd,CAAA,CAAAS,EAAA,UAAAR,CAAA,WAAAA,EAAAD,CAAA,UAAAA,CAAA,KAAAe,CAAA,EAAAL,CAAA,gBAAAM,SAAA,iJAAAC,CAAA,EAAAC,CAAA,OAAAC,CAAA,gBAAAR,CAAA,WAAAA,EAAA,IAAAT,CAAA,GAAAA,CAAA,CAAAkB,IAAA,CAAApB,CAAA,MAAAY,CAAA,WAAAA,EAAA,QAAAZ,CAAA,GAAAE,CAAA,CAAAmB,IAAA,WAAAH,CAAA,GAAAlB,CAAA,CAAAa,IAAA,EAAAb,CAAA,KAAAC,CAAA,WAAAA,EAAAD,CAAA,IAAAmB,CAAA,OAAAF,CAAA,GAAAjB,CAAA,KAAAe,CAAA,WAAAA,EAAA,UAAAG,CAAA,YAAAhB,CAAA,cAAAA,CAAA,8BAAAiB,CAAA,QAAAF,CAAA;AAAA,SAAAV,4BAAAP,CAAA,EAAAkB,CAAA,QAAAlB,CAAA,2BAAAA,CAAA,SAAAsB,iBAAA,CAAAtB,CAAA,EAAAkB,CAAA,OAAAhB,CAAA,MAAAqB,QAAA,CAAAH,IAAA,CAAApB,CAAA,EAAAwB,KAAA,6BAAAtB,CAAA,IAAAF,CAAA,CAAAyB,WAAA,KAAAvB,CAAA,GAAAF,CAAA,CAAAyB,WAAA,CAAAC,IAAA,aAAAxB,CAAA,cAAAA,CAAA,GAAAG,KAAA,CAAAsB,IAAA,CAAA3B,CAAA,oBAAAE,CAAA,+CAAA0B,IAAA,CAAA1B,CAAA,IAAAoB,iBAAA,CAAAtB,CAAA,EAAAkB,CAAA;AAAA,SAAAI,kBAAAtB,CAAA,EAAAkB,CAAA,aAAAA,CAAA,IAAAA,CAAA,GAAAlB,CAAA,CAAAQ,MAAA,MAAAU,CAAA,GAAAlB,CAAA,CAAAQ,MAAA,YAAAP,CAAA,MAAAW,CAAA,GAAAP,KAAA,CAAAa,CAAA,GAAAjB,CAAA,GAAAiB,CAAA,EAAAjB,CAAA,IAAAW,CAAA,CAAAX,CAAA,IAAAD,CAAA,CAAAC,CAAA,UAAAW,CAAA;AAE9E;AACA,IAAMiB,eAAe,GAAG,6BAA6B;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,mCAAmC,GAAAC,OAAA,CAAAD,mCAAA,GAAG,SAAtCA,mCAAmCA,CAAIE,KAAK,EAAAC,IAAA,EAA8C;EAAA,IAAAC,YAAA;EAAA,IAA1CC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;EAC9F,IAAQC,IAAI,GAAKN,KAAK,CAAdM,IAAI;EACZ,IAAMC,KAAK,GAAGD,IAAI,KAAKE,kBAAY,CAACC,GAAG;EACvC,IAAMC,OAAO,GACXJ,IAAI,KAAKE,kBAAY,CAACG,IAAI,IAAIL,IAAI,KAAKE,kBAAY,CAACI,EAAE,IAAIN,IAAI,KAAKE,kBAAY,CAACK,IAAI,IAAIP,IAAI,KAAKE,kBAAY,CAACM,KAAK;EAErH,IAAI,CAACP,KAAK,IAAI,CAACG,OAAO,EAAE;IACtB,OAAOK,SAAS;EAClB;EAEA,IAAIL,OAAO,EAAE;IACX,OAAO,IAAAM,qCAA+B,EAAChB,KAAK,EAAE;MAAEI,OAAO,EAAPA,OAAO;MAAEC,kBAAkB,EAAlBA;IAAmB,CAAC,CAAC;EAChF;EAEAL,KAAK,CAACiB,cAAc,CAAC,CAAC;EAEtB,IAAQC,cAAc,GAAyCd,OAAO,CAA9Dc,cAAc;IAAEC,mBAAmB,GAAoBf,OAAO,CAA9Ce,mBAAmB;IAAEC,aAAa,GAAKhB,OAAO,CAAzBgB,aAAa;EAE1D,IAAI,CAACF,cAAc,IAAIA,cAAc,CAACG,IAAI,KAAK,CAAC,EAAE;IAChD,OAAOhB,kBAAkB;EAC3B;;EAEA;EACA;EACA;EACA;EACA,IAAMiB,WAAW,GAAGnB,MAAM,aAANA,MAAM,gBAAAD,YAAA,GAANC,MAAM,CAAEoB,IAAI,cAAArB,YAAA,uBAAZA,YAAA,CAAcsB,OAAO;EACzC,IAAMC,SAAS,GACbH,WAAW,IAAIA,WAAW,CAACI,UAAU,KAAK,KAAK,IAAIJ,WAAW,CAACK,EAAE,IAAI,IAAI,sBAAAC,MAAA,CAClDN,WAAW,CAACK,EAAE,IACjCZ,SAAS;EAEf,IAAMc,OAAO,GAAG,EAAE;EAClB,IAAIC,WAAW;EAAC,IAAAC,SAAA,GAAAhE,0BAAA,CAEcoD,mBAAmB;IAAAa,KAAA;EAAA;IAAjD,KAAAD,SAAA,CAAApD,CAAA,MAAAqD,KAAA,GAAAD,SAAA,CAAAnD,CAAA,IAAAC,IAAA,GAAmD;MAAA,IAAAoD,WAAA,OAAAC,eAAA,aAAAF,KAAA,CAAAlD,KAAA;QAAvC6C,EAAE,GAAAM,WAAA;QAAEE,SAAS,GAAAF,WAAA;MACvB,IAAIE,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEC,QAAQ,EAAE;MACzB,IAAIT,EAAE,KAAKF,SAAS,EAAE;MAEtB,IAAMY,IAAI,GAAGnB,cAAc,CAACoB,GAAG,CAACX,EAAE,CAAC;MACnC,IAAI,CAACU,IAAI,EAAE;MAEX,IAAME,MAAM,GAAG;QACbC,CAAC,EAAEH,IAAI,CAACI,IAAI,GAAGJ,IAAI,CAACK,KAAK,GAAG,CAAC;QAC7BC,CAAC,EAAEN,IAAI,CAACO,GAAG,GAAGP,IAAI,CAACQ,MAAM,GAAG;MAC9B,CAAC;MACD;MACA;MACA;MACA,IAAMC,YAAY,GAAG;QACnBN,CAAC,EAAEH,IAAI,CAACI,IAAI;QACZE,CAAC,EAAEN,IAAI,CAACO,GAAG,GAAGP,IAAI,CAACQ,MAAM,GAAG;MAC9B,CAAC;MAED,IAAME,MAAM,GAAG;QAAEpB,EAAE,EAAFA,EAAE;QAAEU,IAAI,EAAJA,IAAI;QAAES,YAAY,EAAZA,YAAY;QAAEP,MAAM,EAANA;MAAO,CAAC;MAEjD,IAAIZ,EAAE,KAAK9B,eAAe,EAAE;QAC1BiC,WAAW,GAAGiB,MAAM;MACtB,CAAC,MAAM;QACLlB,OAAO,CAACmB,IAAI,CAACD,MAAM,CAAC;MACtB;IACF;EAAC,SAAAE,GAAA;IAAAlB,SAAA,CAAA9D,CAAA,CAAAgF,GAAA;EAAA;IAAAlB,SAAA,CAAAhD,CAAA;EAAA;EAED,IAAI8C,OAAO,CAACrD,MAAM,KAAK,CAAC,IAAI,CAACsD,WAAW,EAAE;IACxC,OAAOzB,kBAAkB;EAC3B;EAEA,IAAM6C,OAAO,GAAGlD,KAAK,CAACmD,QAAQ;EAE9BtB,OAAO,CAACuB,IAAI,CAAC,UAAClE,CAAC,EAAEmE,CAAC,EAAK;IACrB,IAAIC,IAAI,CAACC,GAAG,CAACrE,CAAC,CAACqD,MAAM,CAACI,CAAC,GAAGU,CAAC,CAACd,MAAM,CAACI,CAAC,CAAC,GAAG,EAAE,EAAE,OAAOzD,CAAC,CAACqD,MAAM,CAACI,CAAC,GAAGU,CAAC,CAACd,MAAM,CAACI,CAAC;IAC1E,OAAOzD,CAAC,CAACqD,MAAM,CAACC,CAAC,GAAGa,CAAC,CAACd,MAAM,CAACC,CAAC;EAChC,CAAC,CAAC;;EAEF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,IAAIV,WAAW,EAAE;IACfD,OAAO,CAACmB,IAAI,CAAClB,WAAW,CAAC;EAC3B;;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,IAAM0B,aAAa,GAAGpC,aAAa,GAC/B;IAAEoB,CAAC,EAAEpB,aAAa,CAACqB,IAAI,GAAGrB,aAAa,CAACsB,KAAK,GAAG,CAAC;IAAEC,CAAC,EAAEvB,aAAa,CAACwB,GAAG,GAAGxB,aAAa,CAACyB,MAAM,GAAG;EAAE,CAAC,GACpGxC,kBAAkB;EAEtB,IAAIoD,YAAY,GAAG5B,OAAO,CAAC6B,SAAS,CAClC,UAACxF,CAAC;IAAA,OACAsF,aAAa,CAAChB,CAAC,IAAItE,CAAC,CAACmE,IAAI,CAACI,IAAI,IAC9Be,aAAa,CAAChB,CAAC,IAAItE,CAAC,CAACmE,IAAI,CAACsB,KAAK,IAC/BH,aAAa,CAACb,CAAC,IAAIzE,CAAC,CAACmE,IAAI,CAACO,GAAG,IAC7BY,aAAa,CAACb,CAAC,IAAIzE,CAAC,CAACmE,IAAI,CAACuB,MAAM;EAAA,CACpC,CAAC;;EAED;EACA;EACA,IAAIH,YAAY,KAAK,CAAC,CAAC,EAAE;IACvB,IAAII,OAAO,GAAGC,QAAQ;IAEtB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGlC,OAAO,CAACrD,MAAM,EAAEuF,CAAC,EAAE,EAAE;MACvC,IAAMC,IAAI,GAAGC,QAAQ,CAAC5D,kBAAkB,EAAEwB,OAAO,CAACkC,CAAC,CAAC,CAACjB,YAAY,CAAC;MAElE,IAAIkB,IAAI,GAAGH,OAAO,EAAE;QAClBA,OAAO,GAAGG,IAAI;QACdP,YAAY,GAAGM,CAAC;MAClB;IACF;EACF;EAEA,IAAMG,SAAS,GAAGhB,OAAO,GACrB,CAACO,YAAY,GAAG,CAAC,GAAG5B,OAAO,CAACrD,MAAM,IAAIqD,OAAO,CAACrD,MAAM,GACpD,CAACiF,YAAY,GAAG,CAAC,IAAI5B,OAAO,CAACrD,MAAM;EAEvC,OAAOqD,OAAO,CAACqC,SAAS,CAAC,CAACpB,YAAY;AACxC,CAAC;AAED,IAAMmB,QAAQ,GAAG,SAAXA,QAAQA,CAAI/E,CAAC,EAAEmE,CAAC;EAAA,OAAKC,IAAI,CAACa,IAAI,CAACb,IAAA,CAAAc,GAAA,CAAClF,CAAC,CAACsD,CAAC,GAAGa,CAAC,CAACb,CAAC,EAAK,CAAC,IAAAc,IAAA,CAAAc,GAAA,CAAIlF,CAAC,CAACyD,CAAC,GAAGU,CAAC,CAACV,CAAC,EAAK,CAAC,EAAC;AAAA","ignoreList":[]}