@pie-element/placement-ordering 14.2.1 → 14.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [14.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.2.1...@pie-element/placement-ordering@14.3.0) (2026-08-21)
+
+### Bug Fixes
+
+- move [@pie-lib](https://github.com/pie-lib) deps back to latest, off next prereleases PIE-927 ([a53e012](https://github.com/pie-framework/pie-elements/commit/a53e0127eb4ac95ece54e1e2bd669ae4974f4251))
+- **theming:** move the grey palette reads onto --pie-\* tokens PIE-856 ([d7d005b](https://github.com/pie-framework/pie-elements/commit/d7d005bf081843335b4b0377852f2ecd075cb62d)), closes [#000000](https://github.com/pie-framework/pie-elements/issues/000000) [#E0E1E6](https://github.com/pie-framework/pie-elements/issues/E0E1E6) [#646464](https://github.com/pie-framework/pie-elements/issues/646464) [#616161](https://github.com/pie-framework/pie-elements/issues/616161) [#E0E1E6](https://github.com/pie-framework/pie-elements/issues/E0E1E6) [#C0C3](https://github.com/pie-framework/pie-elements/issues/C0C3)
+
+### Features
+
+- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
+
 ## [14.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.2.0...@pie-element/placement-ordering@14.2.1) (2026-08-19)
 
 ### Bug Fixes

package/configure/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.11...@pie-element/placement-ordering-configure@11.2.0) (2026-08-21)
+
+### Features
+
+- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
+
 ## [11.1.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.10...@pie-element/placement-ordering-configure@11.1.11) (2026-08-19)
 
 ### Bug Fixes

package/configure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/placement-ordering-configure",
-  "version": "11.1.11",
+  "version": "11.2.0",
   "private": true,
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -11,10 +11,10 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.15",
-    "@pie-lib/drag": "4.1.0",
-    "@pie-lib/editable-html-tip-tap": "2.1.13",
-    "@pie-lib/render-ui": "6.1.3",
+    "@pie-lib/config-ui": "13.0.16",
+    "@pie-lib/drag": "4.1.1",
+    "@pie-lib/editable-html-tip-tap": "2.1.14",
+    "@pie-lib/render-ui": "7.0.0",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "nested-property": "^0.0.7",

package/lib/tile.js

@@ -54,7 +54,7 @@ const StyledTileContent = (0, _styles.styled)('div')(({
   padding: '10px',
   boxSizing: 'border-box',
   overflow: 'hidden',
-  border: type === 'choice' || type === 'target' ? `1px solid ${theme.palette.grey[400]}` : '1px solid transparent',
+  border: type === 'choice' || type === 'target' ? `1px solid ${_renderUi.color.border()}` : '1px solid transparent',
   backgroundColor: type === 'choice' || type === 'target' ? _renderUi.color.background() : 'transparent',
   transition: type === 'choice' || type === 'target' ? 'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease' : 'none',
   pointerEvents: 'none',
@@ -62,7 +62,9 @@ const StyledTileContent = (0, _styles.styled)('div')(({
   ...((type === 'choice' || type === 'target') && {
     '&:hover': {
       backgroundColor: disabled ? _renderUi.color.background() : _renderUi.color.secondary(),
-      borderColor: disabled ? theme.palette.grey[400] : theme.palette.primary.main,
+      // The disabled branch says "disabled", so it takes the disabled token rather
+      // than the neutral stroke the resting state uses.
+      borderColor: disabled ? _renderUi.color.disabled() : theme.palette.primary.main,
       transform: disabled ? 'none' : 'scale(1.02)'
     }
   }),

package/lib/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_core","_styles","_drag","_renderUi","log","debug","StyledNumberContainer","styled","theme","width","fontSize","typography","textAlign","color","palette","common","black","Holder","type","index","isOver","disabled","default","createElement","PlaceHolder","undefined","propTypes","PropTypes","string","number","bool","StyledTileContent","isDragging","isSelected","outcome","label","cursor","height","padding","boxSizing","overflow","border","grey","backgroundColor","background","transition","pointerEvents","userSelect","secondary","borderColor","primary","main","transform","opacity","primaryLight","borderStyle","secondaryLight","boxShadow","incorrect","correct","TileContent","props","empty","guideIndex","dangerouslySetInnerHTML","__html","Tile","id","instanceId","draggable","tileIndex","selectedChoice","onChoiceClick","onPlacementClick","dragId","dropId","tileData","value","attributes","listeners","setNodeRef","setDragRef","useDraggable","data","setDropRef","dropIsOver","useDroppable","isHovered","setIsHovered","React","useState","hasSelection","showsHoverEffect","handleClick","isNativeTabStop","handleKeyDown","e","code","preventDefault","ref","useRef","useEffect","currentRef","current","handleTouchStart","addEventListener","passive","removeEventListener","setRefs","element","style","x","y","margin","zIndex","willChange","_extends2","role","tabIndex","onKeyDown","onClick","onMouseEnter","onMouseLeave","exports","any","object","func","_default"],"sources":["../src/tile.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:placement-ordering:tile');\n\nconst StyledNumberContainer = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: theme.typography.fontSize + 4,\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ type, index, isOver, disabled }) => (\n  <PlaceHolder type={type} isOver={isOver} disabled={disabled}>\n    {type === 'target' && index !== undefined && <StyledNumberContainer>{index}</StyledNumberContainer>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  type: PropTypes.string,\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nconst StyledTileContent = styled('div')(\n  ({ theme, isDragging, isSelected, isOver, disabled, outcome, label, type }) => ({\n    cursor: disabled ? 'not-allowed' : 'grab',\n    width: '100%',\n    height: '100%',\n    padding: '10px',\n    boxSizing: 'border-box',\n    overflow: 'hidden',\n    border: type === 'choice' || type === 'target' ? `1px solid ${theme.palette.grey[400]}` : '1px solid transparent',\n    backgroundColor: type === 'choice' || type === 'target' ? color.background() : 'transparent',\n    transition:\n      type === 'choice' || type === 'target'\n        ? 'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease'\n        : 'none',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    ...((type === 'choice' || type === 'target') && {\n      '&:hover': {\n        backgroundColor: disabled ? color.background() : color.secondary(),\n        borderColor: disabled ? theme.palette.grey[400] : theme.palette.primary.main,\n        transform: disabled ? 'none' : 'scale(1.02)',\n      },\n    }),\n\n    // Apply conditional styles based on props (only if not empty spacing tile)\n    ...((type === 'choice' || type === 'target') &&\n      isOver &&\n      !disabled && {\n        opacity: 0.4,\n        backgroundColor: color.primaryLight(),\n        borderColor: theme.palette.primary.main,\n        borderStyle: 'dashed',\n        transform: 'scale(1.05)',\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      (isDragging || isSelected) &&\n      !disabled && {\n        opacity: 0.6,\n        backgroundColor: color.secondaryLight(),\n        transform: 'scale(1.05) rotate(2deg)',\n        boxShadow: '0 8px 16px rgba(0,0,0,0.2)',\n        cursor: 'grabbing',\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      disabled && {\n        cursor: 'not-allowed',\n        '&:hover': {\n          backgroundColor: color.background(),\n          transform: 'none',\n        },\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      outcome === 'incorrect' && {\n        border: `1px solid ${color.incorrect()}`,\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      outcome === 'correct' && {\n        border: `1px solid ${color.correct()}`,\n      }),\n\n    ...(!label && {\n      border: 'none',\n      '&:hover': {\n        backgroundColor: 'unset',\n      },\n    }),\n  }),\n);\n\nconst TileContent = (props) => {\n  const { type, isDragging, isSelected, empty, isOver, label, disabled, outcome, guideIndex } = props;\n\n  if (empty) {\n    return <Holder type={type} index={guideIndex} isOver={isOver} disabled={disabled} />;\n  } else {\n    return (\n      <StyledTileContent\n        type={type}\n        isDragging={isDragging}\n        isSelected={isSelected}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        label={label}\n        dangerouslySetInnerHTML={{ __html: label }}\n      />\n    );\n  }\n};\n\nexport const Tile = (props) => {\n  const {\n    label,\n    type,\n    id,\n    empty,\n    disabled,\n    outcome,\n    index,\n    guideIndex,\n    instanceId,\n    draggable,\n    tileIndex,\n    selectedChoice,\n    onChoiceClick,\n    onPlacementClick,\n  } = props;\n\n  // Use type + tileIndex in the IDs to guarantee uniqueness in all modes.\n  // In includeTargets mode, a choice (id:'c1', type:'choice') and a target (id:'c1', type:'target')\n  // can coexist — the type differentiates them.\n  // tileIndex (array position from tiler) ensures empty placeholders are also unique.\n  const dragId = `tile-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n  const dropId = `drop-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n\n  // Built once and reused for dnd-kit's own drag/drop data and for the click handlers\n  // below, so a click carries exactly the same shape a real drag would.\n  const tileData = { id, type, instanceId, value: label, index };\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: tileData,\n    disabled: !draggable || disabled,\n  });\n\n  const { setNodeRef: setDropRef, isOver: dropIsOver } = useDroppable({\n    id: dropId,\n    data: tileData,\n    // Disable droppable on the tile currently being dragged so closestCenter\n    // cannot pick it as the drop target (prevents self-collision and wrong matches).\n    disabled: isDragging,\n  });\n\n  const isSelected =\n    !!selectedChoice &&\n    selectedChoice.type === tileData.type &&\n    selectedChoice.id === tileData.id &&\n    selectedChoice.index === tileData.index;\n\n  // dnd-kit's own isOver (dropIsOver) only reflects real collision detection during an\n  // active drag, so it stays false while a placement area is merely a candidate for a\n  // pending click-based placement. Track hovering locally and fold it into the same\n  // isOver signal the styling below already uses, so hovering a response area while\n  // something is selected gets the exact same treatment as hovering it during a real\n  // drag — one code path, no duplicated CSS.\n  const [isHovered, setIsHovered] = React.useState(false);\n  const hasSelection = !!selectedChoice && !disabled;\n  const showsHoverEffect = dropIsOver || (type === 'target' && hasSelection && isHovered);\n\n  // Click-to-select/click-to-place (both choices and targets are handled by this same\n  // component, differentiated by `type`):\n  //  - Choice tile: selects/switches/deselects it, UNLESS a placed answer (a \"target\")\n  //    is currently selected, in which case clicking any choice-row tile returns it to\n  //    the choices column/row (choice -> choice has no placement meaning in the\n  //    reducer, so there's no ambiguity there).\n  //  - Target tile: clicking the already-selected placed answer again deselects it;\n  //    clicking it while something else is selected places that selection here\n  //    (empty or occupied); clicking a filled target with nothing selected selects\n  //    that placed answer for moving, the same way Tab+Space/Enter does. An empty\n  //    target with nothing selected is a no-op.\n  const handleClick = () => {\n    if (disabled) return;\n\n    if (type === 'choice') {\n      if (selectedChoice?.type === 'target') {\n        onPlacementClick?.(tileData);\n      } else if (draggable) {\n        onChoiceClick?.(tileData);\n      }\n    } else if (type === 'target') {\n      if (isSelected) {\n        onChoiceClick?.(tileData);\n      } else if (selectedChoice) {\n        onPlacementClick?.(tileData);\n      } else if (draggable) {\n        onChoiceClick?.(tileData);\n      }\n    }\n  };\n\n  // dnd-kit's own draggable attributes (spread below) already make a draggable tile a\n  // native Tab stop with its own Space/Enter activation. An empty tile is never\n  // draggable, so without this it wouldn't be reachable by Tab at all — needed for\n  // \"select a choice, then Tab to a placement area and press Space/Enter\" to work.\n  // Gated to non-draggable tiles specifically so it never overrides dnd-kit's own\n  // keydown handling (see the conditional spread order below).\n  const isNativeTabStop = !(draggable && !disabled) && !disabled;\n\n  const handleKeyDown = (e) => {\n    if (e.code === 'Space' || e.code === 'Enter') {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const ref = React.useRef(null);\n\n  React.useEffect(() => {\n    const currentRef = ref.current;\n\n    const handleTouchStart = (e) => {\n      e.preventDefault(); // Prevent the default touch event behavior\n    };\n\n    if (currentRef) {\n      currentRef.addEventListener('touchstart', handleTouchStart, { passive: false });\n    }\n\n    return () => {\n      if (currentRef) {\n        currentRef.removeEventListener('touchstart', handleTouchStart);\n      }\n    };\n  }, []);\n\n  const setRefs = (element) => {\n    ref.current = element;\n    setDragRef(element);\n    setDropRef(element);\n  };\n\n  log('[render], props: ', props);\n\n  const style = {\n    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n    boxSizing: 'border-box',\n    overflow: 'visible',\n    padding: 0,\n    margin: 0,\n    textAlign: 'center',\n    pointerEvents: 'auto',\n    cursor: disabled ? 'not-allowed' : type === 'target' && hasSelection ? 'pointer' : isDragging ? 'grabbing' : 'grab',\n    zIndex: isDragging ? 1000 : 'auto',\n    willChange: isDragging ? 'transform' : 'auto',\n  };\n\n  return (\n    <div\n      ref={setRefs}\n      style={style}\n      role={isNativeTabStop ? 'button' : undefined}\n      tabIndex={isNativeTabStop ? 0 : undefined}\n      onKeyDown={isNativeTabStop ? handleKeyDown : undefined}\n      onClick={handleClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      {...(draggable && !disabled ? { ...listeners, ...attributes } : {})}\n    >\n      <TileContent\n        label={label}\n        id={id}\n        empty={empty}\n        index={index}\n        guideIndex={guideIndex}\n        isOver={showsHoverEffect}\n        isDragging={isDragging}\n        isSelected={isSelected}\n        disabled={disabled}\n        outcome={outcome}\n        type={type}\n      />\n    </div>\n  );\n};\n\nTile.propTypes = {\n  id: PropTypes.any,\n  label: PropTypes.string,\n  isOver: PropTypes.bool,\n  type: PropTypes.string,\n  empty: PropTypes.bool,\n  disabled: PropTypes.bool,\n  outcome: PropTypes.string,\n  index: PropTypes.number,\n  guideIndex: PropTypes.number,\n  instanceId: PropTypes.any,\n  draggable: PropTypes.bool,\n  tileIndex: PropTypes.number,\n  selectedChoice: PropTypes.object,\n  onChoiceClick: PropTypes.func,\n  onPlacementClick: PropTypes.func,\n};\n\nexport default Tile;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"tile.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_core","_styles","_drag","_renderUi","log","debug","StyledNumberContainer","styled","theme","width","fontSize","typography","textAlign","color","palette","common","black","Holder","type","index","isOver","disabled","default","createElement","PlaceHolder","undefined","propTypes","PropTypes","string","number","bool","StyledTileContent","isDragging","isSelected","outcome","label","cursor","height","padding","boxSizing","overflow","border","backgroundColor","background","transition","pointerEvents","userSelect","secondary","borderColor","primary","main","transform","opacity","primaryLight","borderStyle","secondaryLight","boxShadow","incorrect","correct","TileContent","props","empty","guideIndex","dangerouslySetInnerHTML","__html","Tile","id","instanceId","draggable","tileIndex","selectedChoice","onChoiceClick","onPlacementClick","dragId","dropId","tileData","value","attributes","listeners","setNodeRef","setDragRef","useDraggable","data","setDropRef","dropIsOver","useDroppable","isHovered","setIsHovered","React","useState","hasSelection","showsHoverEffect","handleClick","isNativeTabStop","handleKeyDown","e","code","preventDefault","ref","useRef","useEffect","currentRef","current","handleTouchStart","addEventListener","passive","removeEventListener","setRefs","element","style","x","y","margin","zIndex","willChange","_extends2","role","tabIndex","onKeyDown","onClick","onMouseEnter","onMouseLeave","exports","any","object","func","_default"],"sources":["../src/tile.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:placement-ordering:tile');\n\nconst StyledNumberContainer = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: theme.typography.fontSize + 4,\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ type, index, isOver, disabled }) => (\n  <PlaceHolder type={type} isOver={isOver} disabled={disabled}>\n    {type === 'target' && index !== undefined && <StyledNumberContainer>{index}</StyledNumberContainer>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  type: PropTypes.string,\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nconst StyledTileContent = styled('div')(\n  ({ theme, isDragging, isSelected, isOver, disabled, outcome, label, type }) => ({\n    cursor: disabled ? 'not-allowed' : 'grab',\n    width: '100%',\n    height: '100%',\n    padding: '10px',\n    boxSizing: 'border-box',\n    overflow: 'hidden',\n    border: type === 'choice' || type === 'target' ? `1px solid ${color.border()}` : '1px solid transparent',\n    backgroundColor: type === 'choice' || type === 'target' ? color.background() : 'transparent',\n    transition:\n      type === 'choice' || type === 'target'\n        ? 'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease'\n        : 'none',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    ...((type === 'choice' || type === 'target') && {\n      '&:hover': {\n        backgroundColor: disabled ? color.background() : color.secondary(),\n        // The disabled branch says \"disabled\", so it takes the disabled token rather\n        // than the neutral stroke the resting state uses.\n        borderColor: disabled ? color.disabled() : theme.palette.primary.main,\n        transform: disabled ? 'none' : 'scale(1.02)',\n      },\n    }),\n\n    // Apply conditional styles based on props (only if not empty spacing tile)\n    ...((type === 'choice' || type === 'target') &&\n      isOver &&\n      !disabled && {\n        opacity: 0.4,\n        backgroundColor: color.primaryLight(),\n        borderColor: theme.palette.primary.main,\n        borderStyle: 'dashed',\n        transform: 'scale(1.05)',\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      (isDragging || isSelected) &&\n      !disabled && {\n        opacity: 0.6,\n        backgroundColor: color.secondaryLight(),\n        transform: 'scale(1.05) rotate(2deg)',\n        boxShadow: '0 8px 16px rgba(0,0,0,0.2)',\n        cursor: 'grabbing',\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      disabled && {\n        cursor: 'not-allowed',\n        '&:hover': {\n          backgroundColor: color.background(),\n          transform: 'none',\n        },\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      outcome === 'incorrect' && {\n        border: `1px solid ${color.incorrect()}`,\n      }),\n\n    ...((type === 'choice' || type === 'target') &&\n      outcome === 'correct' && {\n        border: `1px solid ${color.correct()}`,\n      }),\n\n    ...(!label && {\n      border: 'none',\n      '&:hover': {\n        backgroundColor: 'unset',\n      },\n    }),\n  }),\n);\n\nconst TileContent = (props) => {\n  const { type, isDragging, isSelected, empty, isOver, label, disabled, outcome, guideIndex } = props;\n\n  if (empty) {\n    return <Holder type={type} index={guideIndex} isOver={isOver} disabled={disabled} />;\n  } else {\n    return (\n      <StyledTileContent\n        type={type}\n        isDragging={isDragging}\n        isSelected={isSelected}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        label={label}\n        dangerouslySetInnerHTML={{ __html: label }}\n      />\n    );\n  }\n};\n\nexport const Tile = (props) => {\n  const {\n    label,\n    type,\n    id,\n    empty,\n    disabled,\n    outcome,\n    index,\n    guideIndex,\n    instanceId,\n    draggable,\n    tileIndex,\n    selectedChoice,\n    onChoiceClick,\n    onPlacementClick,\n  } = props;\n\n  // Use type + tileIndex in the IDs to guarantee uniqueness in all modes.\n  // In includeTargets mode, a choice (id:'c1', type:'choice') and a target (id:'c1', type:'target')\n  // can coexist — the type differentiates them.\n  // tileIndex (array position from tiler) ensures empty placeholders are also unique.\n  const dragId = `tile-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n  const dropId = `drop-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n\n  // Built once and reused for dnd-kit's own drag/drop data and for the click handlers\n  // below, so a click carries exactly the same shape a real drag would.\n  const tileData = { id, type, instanceId, value: label, index };\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: tileData,\n    disabled: !draggable || disabled,\n  });\n\n  const { setNodeRef: setDropRef, isOver: dropIsOver } = useDroppable({\n    id: dropId,\n    data: tileData,\n    // Disable droppable on the tile currently being dragged so closestCenter\n    // cannot pick it as the drop target (prevents self-collision and wrong matches).\n    disabled: isDragging,\n  });\n\n  const isSelected =\n    !!selectedChoice &&\n    selectedChoice.type === tileData.type &&\n    selectedChoice.id === tileData.id &&\n    selectedChoice.index === tileData.index;\n\n  // dnd-kit's own isOver (dropIsOver) only reflects real collision detection during an\n  // active drag, so it stays false while a placement area is merely a candidate for a\n  // pending click-based placement. Track hovering locally and fold it into the same\n  // isOver signal the styling below already uses, so hovering a response area while\n  // something is selected gets the exact same treatment as hovering it during a real\n  // drag — one code path, no duplicated CSS.\n  const [isHovered, setIsHovered] = React.useState(false);\n  const hasSelection = !!selectedChoice && !disabled;\n  const showsHoverEffect = dropIsOver || (type === 'target' && hasSelection && isHovered);\n\n  // Click-to-select/click-to-place (both choices and targets are handled by this same\n  // component, differentiated by `type`):\n  //  - Choice tile: selects/switches/deselects it, UNLESS a placed answer (a \"target\")\n  //    is currently selected, in which case clicking any choice-row tile returns it to\n  //    the choices column/row (choice -> choice has no placement meaning in the\n  //    reducer, so there's no ambiguity there).\n  //  - Target tile: clicking the already-selected placed answer again deselects it;\n  //    clicking it while something else is selected places that selection here\n  //    (empty or occupied); clicking a filled target with nothing selected selects\n  //    that placed answer for moving, the same way Tab+Space/Enter does. An empty\n  //    target with nothing selected is a no-op.\n  const handleClick = () => {\n    if (disabled) return;\n\n    if (type === 'choice') {\n      if (selectedChoice?.type === 'target') {\n        onPlacementClick?.(tileData);\n      } else if (draggable) {\n        onChoiceClick?.(tileData);\n      }\n    } else if (type === 'target') {\n      if (isSelected) {\n        onChoiceClick?.(tileData);\n      } else if (selectedChoice) {\n        onPlacementClick?.(tileData);\n      } else if (draggable) {\n        onChoiceClick?.(tileData);\n      }\n    }\n  };\n\n  // dnd-kit's own draggable attributes (spread below) already make a draggable tile a\n  // native Tab stop with its own Space/Enter activation. An empty tile is never\n  // draggable, so without this it wouldn't be reachable by Tab at all — needed for\n  // \"select a choice, then Tab to a placement area and press Space/Enter\" to work.\n  // Gated to non-draggable tiles specifically so it never overrides dnd-kit's own\n  // keydown handling (see the conditional spread order below).\n  const isNativeTabStop = !(draggable && !disabled) && !disabled;\n\n  const handleKeyDown = (e) => {\n    if (e.code === 'Space' || e.code === 'Enter') {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const ref = React.useRef(null);\n\n  React.useEffect(() => {\n    const currentRef = ref.current;\n\n    const handleTouchStart = (e) => {\n      e.preventDefault(); // Prevent the default touch event behavior\n    };\n\n    if (currentRef) {\n      currentRef.addEventListener('touchstart', handleTouchStart, { passive: false });\n    }\n\n    return () => {\n      if (currentRef) {\n        currentRef.removeEventListener('touchstart', handleTouchStart);\n      }\n    };\n  }, []);\n\n  const setRefs = (element) => {\n    ref.current = element;\n    setDragRef(element);\n    setDropRef(element);\n  };\n\n  log('[render], props: ', props);\n\n  const style = {\n    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n    boxSizing: 'border-box',\n    overflow: 'visible',\n    padding: 0,\n    margin: 0,\n    textAlign: 'center',\n    pointerEvents: 'auto',\n    cursor: disabled ? 'not-allowed' : type === 'target' && hasSelection ? 'pointer' : isDragging ? 'grabbing' : 'grab',\n    zIndex: isDragging ? 1000 : 'auto',\n    willChange: isDragging ? 'transform' : 'auto',\n  };\n\n  return (\n    <div\n      ref={setRefs}\n      style={style}\n      role={isNativeTabStop ? 'button' : undefined}\n      tabIndex={isNativeTabStop ? 0 : undefined}\n      onKeyDown={isNativeTabStop ? handleKeyDown : undefined}\n      onClick={handleClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      {...(draggable && !disabled ? { ...listeners, ...attributes } : {})}\n    >\n      <TileContent\n        label={label}\n        id={id}\n        empty={empty}\n        index={index}\n        guideIndex={guideIndex}\n        isOver={showsHoverEffect}\n        isDragging={isDragging}\n        isSelected={isSelected}\n        disabled={disabled}\n        outcome={outcome}\n        type={type}\n      />\n    </div>\n  );\n};\n\nTile.propTypes = {\n  id: PropTypes.any,\n  label: PropTypes.string,\n  isOver: PropTypes.bool,\n  type: PropTypes.string,\n  empty: PropTypes.bool,\n  disabled: PropTypes.bool,\n  outcome: PropTypes.string,\n  index: PropTypes.number,\n  guideIndex: PropTypes.number,\n  instanceId: PropTypes.any,\n  draggable: PropTypes.bool,\n  tileIndex: PropTypes.number,\n  selectedChoice: PropTypes.object,\n  onChoiceClick: PropTypes.func,\n  onPlacementClick: PropTypes.func,\n};\n\nexport default Tile;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/placement-ordering",
   "repository": "pie-framework/pie-elements",
-  "version": "14.2.1",
+  "version": "14.3.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -14,10 +14,10 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "4.0.5",
-    "@pie-lib/drag": "4.1.0",
+    "@pie-lib/correct-answer-toggle": "4.0.6",
+    "@pie-lib/drag": "4.1.1",
     "@pie-lib/math-rendering": "5.1.0",
-    "@pie-lib/render-ui": "6.1.3",
+    "@pie-lib/render-ui": "7.0.0",
     "@pie-lib/translator": "4.0.2",
     "debug": "^4.1.1",
     "decimal.js": "^10.0.0",
@@ -29,7 +29,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "0f939adae5927fe0a54d21a4a98e224775562406",
+  "gitHead": "e299866c75466c3c3f12469e783c129c800f24fb",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },