master

CLAUDE.md

@@ -0,0 +1,42 @@
+# pie-elements
+
+## What this is
+
+A monorepo of **PIE (Portable Interactions & Elements)** assessment item-type widgets — multiple-choice, extended-text-entry, graphing, drag-in-the-blank, hotspot, etc. Each item type is a native `HTMLElement` subclass that mounts a React tree internally, so it can be embedded framework-agnostically by a host player (`pie-player-components`).
+
+Sibling repo: **`pie-lib`** (`../pie-lib`) provides shared UI/logic building blocks, consumed as normal npm dependencies under the `@pie-lib/*` scope (not a local link — see `resolutions` in root `package.json`).
+
+## Repo structure
+
+- Lerna (independent versioning) + Yarn workspaces. Workspaces: `packages/*`, `packages/*/configure`, `packages/*/controller`, `packages/*/print`.
+- `packages/` — 32 item packages, plus `pie-models` (TS model/schema defs) and `boilerplate-item-type` (scaffold for new elements).
+- `old-packages/` — deprecated items, excluded from tests.
+- `scripts/` — build/release tooling, wraps `@pie-framework/build-helper`.
+
+## Package anatomy (per item type)
+
+Each item type is split into up to three independently-published npm packages:
+
+- **main** (`packages/<name>/src`) — the custom element: `model`/`session`/`options` setters, dispatches `ModelSetEvent`/`SessionChangedEvent`. This is what a host player embeds.
+- **configure/** (`@pie-element/<name>-configure`) — authoring UI that edits the model (built on `@pie-lib/config-ui`, MUI).
+- **controller/** (`@pie-element/<name>-controller`) — server/pre-render logic: `createDefaultModel`, `normalize`, and `model(question, session, env, updateSession)`. This is where scoring happens and where fields get stripped based on `env.mode` (`gather`/`view`/`evaluate`) and `env.role` (`student`/`instructor`) — the mechanism that keeps answers/rationale hidden from students. Don't weaken this filtering without understanding why it's there.
+
+Each package builds `src/` (and `configure/src`, `controller/src`) → `lib/` via Babel. Model docs are auto-generated into `docs/pie-schema.json` / `docs/config-schema.json` from `pie-models`.
+
+## Commands
+
+- `yarn build` — build all packages (`scripts/build build`)
+- `yarn test` — run tests (`scripts/build test`); Jest is configured **only at the repo root** (`jest.config.js`) — don't add per-package Jest config/devDependencies
+- `yarn lint` — ESLint over `packages`
+- `yarn update-pie-lib` — bump all `@pie-lib/*` deps to latest and sync the root `resolutions` block (`scripts/sync-pie-lib-resolutions.js`)
+- `yarn release` — clean + test + build + `lerna publish`
+
+## Conventions
+
+- No TypeScript in item source (except `pie-models`) — plain JS/JSX with Babel.
+- New item types start from `boilerplate-item-type`.
+- Keep `@pie-lib/*` version bumps going through `update-pie-lib` / `sync-pie-lib-resolutions.js` rather than hand-editing versions in individual package.json files, so the root `resolutions` block stays consistent.
+
+## Working preferences
+
+- **Do not create git commits unless explicitly asked.** The user commits their own changes — leave the working tree staged/unstaged as appropriate and let them review and commit themselves.

package.json

@@ -89,27 +89,27 @@
     "@jest/test-sequencer": "29.7.0",
     "@types/d3-array": "3.0.3",
     "@pie-lib/categorize": "2.0.2",
-    "@pie-lib/charting": "7.0.12",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/charting": "7.0.13",
+    "@pie-lib/config-ui": "13.0.13",
     "@pie-lib/controller-utils": "2.0.3",
     "@pie-lib/correct-answer-toggle": "4.0.5",
     "@pie-lib/drag": "4.0.6",
-    "@pie-lib/editable-html": "13.0.7",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/editable-html": "13.0.8",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "@pie-lib/feedback": "2.0.2",
-    "@pie-lib/graphing-solution-set": "4.0.12",
+    "@pie-lib/graphing-solution-set": "4.0.13",
     "@pie-lib/graphing-utils": "3.0.2",
-    "@pie-lib/graphing": "4.0.13",
+    "@pie-lib/graphing": "4.0.14",
     "@pie-lib/icons": "4.0.3",
-    "@pie-lib/mask-markup": "3.0.12",
+    "@pie-lib/mask-markup": "3.0.13",
     "@pie-lib/math-evaluator": "4.0.2",
     "@pie-lib/math-input": "8.1.1",
     "@pie-lib/math-rendering-accessible": "5.0.3",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/math-toolbar": "3.0.6",
-    "@pie-lib/plot": "4.0.12",
+    "@pie-lib/plot": "4.0.13",
     "@pie-lib/render-ui": "6.1.3",
-    "@pie-lib/rubric": "2.0.12",
+    "@pie-lib/rubric": "2.0.13",
     "@pie-lib/scoring-config": "5.0.3",
     "@pie-lib/style-utils": "2.0.2",
     "@pie-lib/test-utils": "2.0.2",

packages/boilerplate-item-type/configure/package.json

@@ -11,8 +11,8 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "@pie-lib/render-ui": "6.1.3",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",

packages/calculator/configure/package.json

@@ -11,7 +11,7 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/material-ui-calculator": "4.0.0",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/config-ui": "13.0.13",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

packages/categorize/configure/package.json

@@ -16,9 +16,9 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
     "@pie-lib/categorize": "2.0.2",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/config-ui": "13.0.13",
     "@pie-lib/drag": "4.0.6",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "@pie-lib/translator": "4.0.2",

packages/categorize/package.json

@@ -16,7 +16,7 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/categorize": "2.0.2",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/config-ui": "13.0.13",
     "@pie-lib/correct-answer-toggle": "4.0.5",
     "@pie-lib/drag": "4.0.6",
     "@pie-lib/math-rendering": "5.1.0",

packages/charting/configure/package.json

@@ -12,9 +12,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/charting": "7.0.12",
-    "@pie-lib/config-ui": "13.0.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/charting": "7.0.13",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "debug": "^4.1.1",

packages/charting/package.json

@@ -15,7 +15,7 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/charting": "7.0.12",
+    "@pie-lib/charting": "7.0.13",
     "@pie-lib/correct-answer-toggle": "4.0.5",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",

packages/complex-rubric/configure/package.json

@@ -14,9 +14,9 @@
     "@pie-element/multi-trait-rubric": "^8.1.0",
     "@pie-element/rubric": "^8.1.0",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/config-ui": "13.0.13",
     "@pie-lib/render-ui": "6.1.3",
-    "@pie-lib/rubric": "2.0.12",
+    "@pie-lib/rubric": "2.0.13",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",

packages/complex-rubric/package.json

@@ -13,7 +13,7 @@
     "@pie-element/multi-trait-rubric": "^8.1.0",
     "@pie-element/rubric": "^8.1.0",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/rubric": "2.0.12",
+    "@pie-lib/rubric": "2.0.13",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",

packages/drag-in-the-blank/configure/package.json

@@ -12,9 +12,9 @@
     "@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.12",
+    "@pie-lib/config-ui": "13.0.13",
     "@pie-lib/drag": "4.0.6",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "@pie-lib/math-rendering": "5.1.0",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",

packages/drag-in-the-blank/package.json

@@ -17,7 +17,7 @@
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/correct-answer-toggle": "4.0.5",
     "@pie-lib/drag": "4.0.6",
-    "@pie-lib/mask-markup": "3.0.12",
+    "@pie-lib/mask-markup": "3.0.13",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "lodash-es": "^4.17.23",

packages/drawing-response/configure/package.json

@@ -12,8 +12,8 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",

packages/ebsr/configure/package.json

@@ -13,7 +13,7 @@
     "@mui/material": "^7.3.4",
     "@pie-element/multiple-choice": "^13.2.0",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/config-ui": "13.0.13",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
     "react": "18.3.1",

packages/explicit-constructed-response/configure/package.json

@@ -10,8 +10,8 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",

packages/explicit-constructed-response/package.json

@@ -16,7 +16,7 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/correct-answer-toggle": "4.0.5",
-    "@pie-lib/mask-markup": "3.0.12",
+    "@pie-lib/mask-markup": "3.0.13",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "@pie-lib/translator": "4.0.2",

packages/extended-text-entry/configure/package.json

@@ -13,8 +13,8 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
     "react": "18.3.1",

packages/extended-text-entry/package.json

@@ -14,8 +14,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/config-ui": "13.0.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "classnames": "^2.2.6",

packages/fraction-model/configure/package.json

@@ -11,8 +11,8 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",

packages/fraction-model/package.json

@@ -12,7 +12,7 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/config-ui": "13.0.13",
     "@pie-lib/correct-answer-toggle": "4.0.5",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",

packages/graphing-solution-set/configure/package.json

@@ -12,9 +12,9 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
-    "@pie-lib/graphing-solution-set": "4.0.12",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
+    "@pie-lib/graphing-solution-set": "4.0.13",
     "@pie-lib/math-rendering": "5.1.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",

packages/graphing-solution-set/package.json

@@ -16,9 +16,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/config-ui": "13.0.13",
     "@pie-lib/correct-answer-toggle": "4.0.5",
-    "@pie-lib/graphing-solution-set": "4.0.12",
+    "@pie-lib/graphing-solution-set": "4.0.13",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "classnames": "^2.2.6",

packages/graphing/configure/package.json

@@ -12,9 +12,9 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
-    "@pie-lib/graphing": "4.0.13",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
+    "@pie-lib/graphing": "4.0.14",
     "@pie-lib/math-rendering": "5.1.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",

packages/graphing/package.json

@@ -16,7 +16,7 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/correct-answer-toggle": "4.0.5",
-    "@pie-lib/graphing": "4.0.13",
+    "@pie-lib/graphing": "4.0.14",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "classnames": "^2.2.6",

packages/hotspot/configure/package.json

@@ -12,8 +12,8 @@
     "@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.12",
-    "@pie-lib/editable-html-tip-tap": "2.1.10",
+    "@pie-lib/config-ui": "13.0.13",
+    "@pie-lib/editable-html-tip-tap": "2.1.11",
     "debug": "^4.1.1",
     "konva": "8.3.0",
     "lodash-es": "^4.17.23",

packages/hotspot/configure/src/root.jsx

@@ -12,6 +12,8 @@ import { updateImageDimensions, generateValidationMessage, getUpdatedShapes, get
 
 const { Panel, toggle, dropdown } = settings;
 
+const checkNullish = (value) => value !== null && value !== undefined;
+
 const DimensionsContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   marginBottom: theme.spacing(1.5),
@@ -164,6 +166,7 @@ export class Root extends React.Component {
       ...props,
     });
 
+
     return (
       <layout.ConfigLayout
         extraCSSRules={extraCSSRules}
@@ -225,15 +228,8 @@ export class Root extends React.Component {
         )}
 
         <FlexContainer>
-          <SubHeading variant="h6">
-            Define Hotspot
-          </SubHeading>
-          <StyledTooltip
-            disableFocusListener
-            disableTouchListener
-            placement={'left'}
-            title={validationMessage}
-          >
+          <SubHeading variant="h6">Define Hotspot</SubHeading>
+          <StyledTooltip disableFocusListener disableTouchListener placement={'left'} title={validationMessage}>
             <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
           </StyledTooltip>
         </FlexContainer>
@@ -255,7 +251,7 @@ export class Root extends React.Component {
           hotspotColor={model.hotspotColor}
           outlineColor={model.outlineColor}
           selectedHotspotColor={model.selectedHotspotColor}
-          hoverOutlineColor={model.hoverOutlineColor}
+          hoverOutlineColor={checkNullish(model.hoverOutlineColor) ? model.hoverOutlineColor : 'black'}
           onUpdateImageDimension={onUpdateImageDimension}
           onUpdateShapes={onUpdateShapes}
           onImageUpload={onImageUpload}