@pie-element/ebsr 14.0.1 → 14.1.1-next.2

package/package.json

@@ -1,29 +1,70 @@
 {
   "name": "@pie-element/ebsr",
-  "repository": "pie-framework/pie-elements",
-  "version": "14.0.1",
+  "version": "14.1.1-next.2",
   "description": "",
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
-    "@pie-element/multiple-choice": "^13.0.1",
-    "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/translator": "4.0.0",
+    "@pie-element/multiple-choice": "13.1.1-next.0",
+    "@pie-lib/translator": "4.0.1",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
-    "lodash-es": "^4.17.23"
+    "lodash-es": "^4.17.23",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-lib/config-ui": "13.0.1",
+    "@pie-element/shared-controller-utils": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0",
+    "@mui/material": "^7.3.4",
+    "prop-types": "^15.6.1"
   },
-  "author": "pie framework developers",
-  "license": "ISC",
-  "gitHead": "70b44575d7ea20d6e4640d9c51c1593a23232be3",
-  "scripts": {
-    "postpublish": "../../scripts/postpublish"
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
-  "main": "lib/index.js",
-  "module": "src/index.js",
   "exports": {
-    ".": "./src/index.js",
-    "./print": "./src/print.js"
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./delivery": {
+      "development": "./src/delivery/index.tsx",
+      "types": "./dist/delivery/index.d.ts",
+      "default": "./dist/delivery/index.js"
+    },
+    "./author": {
+      "development": "./src/author/index.ts",
+      "types": "./dist/author/index.d.ts",
+      "default": "./dist/author/index.js"
+    },
+    "./controller": {
+      "development": "./src/controller/index.ts",
+      "types": "./dist/controller/index.d.ts",
+      "default": "./dist/controller/index.js"
+    },
+    "./print": {
+      "development": "./src/print/index.tsx",
+      "types": "./dist/print/index.d.ts",
+      "default": "./dist/print/index.js"
+    }
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "devDependencies": {
+    "vite": "^8.0.1",
+    "typescript": "^5.9.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "bun x vite build && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "demo": "bun x vite --mode demo",
+    "test": "bun x vitest run"
   }
 }

package/{configure/src/defaults.js → src/author/defaults.ts}

@@ -1,3 +1,13 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/configure/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
 import { cloneDeep } from 'lodash-es';
 
 const defaultConfig = {

package/{configure/src/index.js → src/author/index.ts}

@@ -1,11 +1,21 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/configure/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
-import MultipleChoiceConfigure from '@pie-element/multiple-choice/configure/lib';
+import { ModelUpdatedEvent } from '@pie-element/shared-configure-events';
+import MultipleChoiceConfigure from '@pie-element/multiple-choice/author';
 import { defaults } from 'lodash-es';
-import Main from './main';
+import Main from './main.js';
 
-import sensibleDefaults from './defaults';
+import sensibleDefaults from './defaults.js';
 
 const MODEL_UPDATED = ModelUpdatedEvent.TYPE;
 const MC_TAG_NAME = 'ebsr-multiple-choice-configure';
@@ -70,7 +80,7 @@ export default class EbsrConfigure extends HTMLElement {
     this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
   }
 
-  onModelChanged = (m, reset) => {
+  onModelChanged: any = (m, reset) => {
     this._model = EbsrConfigure.createDefaultModel(m, this._model);
 
     this.dispatchModelUpdated(reset);
@@ -127,7 +137,7 @@ export default class EbsrConfigure extends HTMLElement {
     this._render();
   }
 
-  onModelUpdated = (e) => {
+  onModelUpdated: any = (e) => {
     if (e.target === this) {
       return;
     }

package/{configure/src/main.jsx → src/author/main.tsx}

@@ -1,3 +1,13 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/configure/src/main.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { settings, layout } from '@pie-lib/config-ui';
@@ -5,11 +15,11 @@ import { styled } from '@mui/material/styles';
 
 const { Panel, toggle, radio, dropdown } = settings;
 
-const PartLabel = styled('div')(({ theme }) => ({
+const PartLabel: any = styled('div')(({ theme }) => ({
   paddingBottom: theme.spacing(2),
 }));
 
-const Divider = styled('div')(({ theme }) => ({
+const Divider: any = styled('div')(({ theme }) => ({
   flex: 1,
   height: theme.spacing(2.5),
 }));
@@ -22,7 +32,7 @@ export class Main extends React.Component {
     onConfigurationChanged: PropTypes.func,
   };
 
-  removeExtraChoices = (choices) => {
+  removeExtraChoices: any = (choices) => {
     let correctFound = false;
 
     return (choices || []).map((choice) => {
@@ -40,7 +50,7 @@ export class Main extends React.Component {
     });
   };
 
-  onModelChanged = (model, key) => {
+  onModelChanged: any = (model, key) => {
     const { onModelChanged } = this.props;
 
     if (key === 'partA.choiceMode' && model.partA.choiceMode === 'radio') {

package/{controller/src/defaults.js → src/controller/defaults.ts}

@@ -1,3 +1,13 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/controller/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
 const partModel = (base) => ({
   choiceMode: 'radio',
   choicePrefix: 'letters',

package/{controller/src/index.js → src/controller/index.ts}

@@ -1,6 +1,16 @@
-import defaults from './defaults';
-import { lockChoices, getShuffledChoices, partialScoring } from '@pie-lib/controller-utils';
-import { isResponseCorrect } from './utils';
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/controller/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import defaults from './defaults.js';
+import { lockChoices, getShuffledChoices, partialScoring } from '@pie-element/shared-controller-utils';
+import { isResponseCorrect } from './utils.js';
 import { get, isEmpty } from 'lodash-es';
 import Translator from '@pie-lib/translator';
 

package/{controller/src/utils.js → src/controller/utils.ts}

@@ -1,3 +1,13 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/controller/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
 import { isEqual } from 'lodash-es';
 
 export const getCorrectResponse = (choices) =>

package/src/{index.js → delivery/index.tsx}

@@ -1,4 +1,14 @@
-import { SessionChangedEvent } from '@pie-framework/pie-player-events';
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { SessionChangedEvent } from '@pie-element/shared-player-events';
 import MultipleChoice from '@pie-element/multiple-choice';
 import { get } from 'lodash-es';
 import debug from 'debug';
@@ -26,6 +36,38 @@ export const isSessionComplete = (session) => {
   return isNonEmptyArray(a) && isNonEmptyArray(b);
 };
 
+function getPlayerAttributes(element) {
+  const player =
+    element.closest('pie-player') ||
+    element.closest('pie-item-player');
+
+  if (!player) {
+    return { baseHeadingLevel: undefined, includeSrHeading: true };
+  }
+
+  const getRaw = (camelCaseName, hyphenatedName, allLowerName) => {
+    let raw = player[camelCaseName];
+
+    // fallback in case someone sets via HTML attribute manually
+    if (raw == null) {
+      raw =
+        player.getAttribute(hyphenatedName) ??
+        player.getAttribute(allLowerName);
+    }
+
+    return raw;
+  };
+
+  const levelRaw = getRaw('baseHeadingLevel', 'base-heading-level', 'baseheadinglevel');
+  const level = parseInt(levelRaw, 10);
+  const baseHeadingLevel = Number.isFinite(level) && level >= 1 && level <= 6 ? level : undefined;
+
+  const srRaw = getRaw('includeSrHeading', 'include-sr-heading', 'includesrheading');
+  const includeSrHeading = srRaw == null ? true : srRaw !== false && srRaw !== 'false';
+
+  return { baseHeadingLevel, includeSrHeading };
+}
+
 export default class Ebsr extends HTMLElement {
   constructor() {
     super();
@@ -33,7 +75,7 @@ export default class Ebsr extends HTMLElement {
     this._session = {};
   }
 
-  onSessionUpdated = (e) => {
+  onSessionUpdated: any = (e) => {
     if (e.target === this) {
       return;
     }
@@ -85,6 +127,12 @@ export default class Ebsr extends HTMLElement {
         mode,
         keyMode: this._model[key].choicePrefix,
       };
+
+      // Parts of an EBSR item should not render their own SR headings —
+      // the EBSR element itself provides the item-level heading.
+      const { includeSrHeading, baseHeadingLevel } = getPlayerAttributes(this);
+      part.includeSrHeading = includeSrHeading;
+      part.baseHeadingLevel = baseHeadingLevel !== undefined ? Math.min(6, baseHeadingLevel + (includeSrHeading ? 1 : 0)) : undefined;
     }
   }
 
@@ -116,16 +164,43 @@ export default class Ebsr extends HTMLElement {
 
   connectedCallback() {
     this._render();
+    this._initPlayerObserver();
     this.addEventListener(SESSION_CHANGED, this.onSessionUpdated);
   }
 
   disconnectedCallback() {
+    this._disconnectPlayerObserver();
     this.removeEventListener(SESSION_CHANGED, this.onSessionUpdated);
   }
 
+  _initPlayerObserver() {
+    const player = this.closest('pie-player') || this.closest('pie-item-player');
+    if (!player) return;
+
+    this._playerObserver = new MutationObserver(() => {
+      this._render();
+    });
+    this._playerObserver.observe(player, {
+      attributes: true,
+      attributeFilter: ['base-heading-level', 'baseheadinglevel', 'include-sr-heading', 'includesrheading'],
+    });
+  }
+
+  _disconnectPlayerObserver() {
+    if (this._playerObserver) {
+      this._playerObserver.disconnect();
+      this._playerObserver = null;
+    }
+  }
+
   _render() {
     this.ariaLabel = 'Two-Part Question';
     this.role = 'region';
+
+    const { baseHeadingLevel: ebsrLevel, includeSrHeading } = getPlayerAttributes(this);
+    const headingTag = ebsrLevel ? `h${Math.min(6, ebsrLevel)}` : 'h2';
+    const srHeading = includeSrHeading ? `<${headingTag} class="srOnly">Two-Part Question</${headingTag}>` : '';
+
     this.innerHTML = `
       <style>
         .srOnly {
@@ -140,7 +215,7 @@ export default class Ebsr extends HTMLElement {
       }
       ${this._model?.extraCSSRules?.rules}
       </style>
-        <h2 class="srOnly">Two-Part Question</h2>
+        ${srHeading}
         <${MC_TAG_NAME} id="a"></${MC_TAG_NAME}>
         <${MC_TAG_NAME} id="b"></${MC_TAG_NAME}>
     `;

package/src/index.iife.ts

@@ -0,0 +1,16 @@
+/**
+ * IIFE entry point for ebsr element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+
+import Element from './index.js';
+
+// Auto-register the custom element for IIFE mode
+if (typeof window !== 'undefined' && !customElements.get('ebsr-element')) {
+  customElements.define('ebsr-element', Element);
+}
+
+// Export for IIFE global
+export default Element;

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/src/{print.js → print/index.tsx}

@@ -1,7 +1,17 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/ebsr/src/print.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
 import { cloneDeep, get } from 'lodash-es';
 import MultipleChoice from '@pie-element/multiple-choice';
 import debug from 'debug';
-import { SessionChangedEvent } from '@pie-framework/pie-player-events';
+import { SessionChangedEvent } from '@pie-element/shared-player-events';
 const MC_TAG_NAME = 'ebsr-multiple-choice';
 const SESSION_CHANGED = SessionChangedEvent.TYPE;
 import Translator from '@pie-lib/translator';
@@ -73,7 +83,7 @@ export default class Ebsr extends HTMLElement {
     this._options = null;
   }
 
-  onSessionUpdated = (e) => {
+  onSessionUpdated: any = (e) => {
     if (e.target === this) {
       return;
     }