@pie-element/passage 7.1.1-next.11 → 7.1.2-next.0

package/dist/browser/print/index.js

@@ -0,0 +1,48 @@
+import { Et as e, S as t } from "../dist-C_PfhNd9.js";
+import { t as n } from "../stimulus-tabs-CMox8txJ.js";
+import { t as r } from "../debounce-CUPmq2t-.js";
+import i from "react";
+import { createRoot as a } from "react-dom/client";
+var o = (0, (/* @__PURE__ */ e(t(), 1)).default)("pie-element:passage:print"), s = (e) => e != null, c = (e, t) => s(e) ? e : t, l = (e, t) => {
+	let n = t.role === "instructor", r = c(e.teacherInstructionsEnabled, !0), i = c(e.titleEnabled, !0), a = c(e.authorEnabled, !1), o = c(e.subtitleEnabled, !0), s = c(e.textEnabled, !0);
+	return e.passages.map((e, t) => ({
+		id: t,
+		teacherInstructions: c(e.teacherInstructionsEnabled, r) && n && e.teacherInstructions || "",
+		label: e.title || `Passage ${t + 1}`,
+		title: c(e.titleEnabled, i) && e.title || "",
+		author: c(e.authorEnabled, a) && e.author || "",
+		subtitle: c(e.subtitleEnabled, o) && e.subtitle || "",
+		text: c(e.textEnabled, s) && e.text || ""
+	}));
+}, u = class extends HTMLElement {
+	constructor() {
+		super(), this._model = null, this._options = null, this._session = [], this._root = null, this._rerender = r(() => {
+			if (this._model && this._session) {
+				if (this._model.passages && this._model.passages.length > 0) {
+					let e = l(this._model, this._options), t = i.createElement(n, {
+						disabledTabs: !0,
+						tabs: e
+					});
+					this._root ||= a(this), this._root.render(t);
+				}
+			} else o("skip");
+		}, 50, {
+			leading: !1,
+			trailing: !0
+		});
+	}
+	set model(e) {
+		this._model = e, this._rerender();
+	}
+	set options(e) {
+		this._options = e;
+	}
+	connectedCallback() {}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=index.js.map

package/dist/browser/print/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/print/index.tsx"],"sourcesContent":["// @ts-nocheck\n/**\n * @synced-from pie-elements/packages/passage/src/print.js\n * @auto-generated\n *\n * This file is automatically synced from pie-elements and converted to TypeScript.\n * Manual edits will be overwritten on next sync.\n * To make changes, edit the upstream JavaScript file and run sync again.\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { debounce } from 'lodash-es';\nimport debug from 'debug';\n\nimport StimulusTabs from '../delivery/stimulus-tabs.js';\n\nconst log = debug('pie-element:passage:print');\n\nconst checkNullish = (value) => value !== null && value !== undefined;\n\nconst isEnabled = (value, defaultValue) => (checkNullish(value) ? value : defaultValue);\n\nconst preparePrintPassage = (model, opts) => {\n  const isInstructor = opts.role === 'instructor';\n\n  // TODO: also update '../../configure/src/defaults.js' and '../../controller/src/defaults.js' when updating defaultValue\n  const teacherInstructionsEnabled = isEnabled(model.teacherInstructionsEnabled, true);\n  const titleEnabled = isEnabled(model.titleEnabled, true);\n  const authorEnabled = isEnabled(model.authorEnabled, false);\n  const subtitleEnabled = isEnabled(model.subtitleEnabled, true);\n  const textEnabled = isEnabled(model.textEnabled, true);\n\n  return model.passages.map((passage, index) => ({\n    id: index,\n    teacherInstructions: isEnabled(passage.teacherInstructionsEnabled, teacherInstructionsEnabled)\n      ? (isInstructor && passage.teacherInstructions) || ''\n      : '',\n    label: passage.title || `Passage ${index + 1}`,\n    title: isEnabled(passage.titleEnabled, titleEnabled) ? passage.title || '' : '',\n    author: isEnabled(passage.authorEnabled, authorEnabled) ? passage.author || '' : '',\n    subtitle: isEnabled(passage.subtitleEnabled, subtitleEnabled) ? passage.subtitle || '' : '',\n    text: isEnabled(passage.textEnabled, textEnabled) ? passage.text || '' : '',\n  }));\n};\n\nexport default class PassagePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._options = null;\n    this._session = [];\n    this._root = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          if (this._model.passages && this._model.passages.length > 0) {\n            const printPassage = preparePrintPassage(this._model, this._options);\n\n            const element = React.createElement(StimulusTabs, {\n              disabledTabs: true,\n              tabs: printPassage,\n            });\n\n            if (!this._root) {\n              this._root = createRoot(this);\n            }\n            this._root.render(element);\n          }\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  set options(o) {\n    this._options = o;\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;AAiBA,IAAM,KAAA,IAAA,wBAAA,GAAA,SAAY,2BAA2B,GAEvC,KAAgB,MAAU,KAAU,MAEpC,KAAa,GAAO,MAAkB,EAAa,CAAK,IAAI,IAAQ,GAEpE,KAAuB,GAAO,MAAS;CAC3C,IAAM,IAAe,EAAK,SAAS,cAG7B,IAA6B,EAAU,EAAM,4BAA4B,EAAI,GAC7E,IAAe,EAAU,EAAM,cAAc,EAAI,GACjD,IAAgB,EAAU,EAAM,eAAe,EAAK,GACpD,IAAkB,EAAU,EAAM,iBAAiB,EAAI,GACvD,IAAc,EAAU,EAAM,aAAa,EAAI;CAErD,OAAO,EAAM,SAAS,KAAK,GAAS,OAAW;EAC7C,IAAI;EACJ,qBAAqB,EAAU,EAAQ,4BAA4B,CAA0B,KACxF,KAAgB,EAAQ,uBACzB;EACJ,OAAO,EAAQ,SAAS,WAAW,IAAQ;EAC3C,OAAO,EAAU,EAAQ,cAAc,CAAY,KAAI,EAAQ,SAAc;EAC7E,QAAQ,EAAU,EAAQ,eAAe,CAAa,KAAI,EAAQ,UAAe;EACjF,UAAU,EAAU,EAAQ,iBAAiB,CAAe,KAAI,EAAQ,YAAiB;EACzF,MAAM,EAAU,EAAQ,aAAa,CAAW,KAAI,EAAQ,QAAa;CAC3E,EAAE;AACJ,GAEqB,IAArB,cAA0C,YAAY;CACpD,cAAc;EAOZ,AANA,MAAM,GACN,KAAK,SAAS,MACd,KAAK,WAAW,MAChB,KAAK,WAAW,CAAC,GACjB,KAAK,QAAQ,MAEb,KAAK,YAAY,QACT;GACJ,IAAI,KAAK,UAAU,KAAK;QAClB,KAAK,OAAO,YAAY,KAAK,OAAO,SAAS,SAAS,GAAG;KAC3D,IAAM,IAAe,EAAoB,KAAK,QAAQ,KAAK,QAAQ,GAE7D,IAAU,EAAM,cAAc,GAAc;MAChD,cAAc;MACd,MAAM;KACR,CAAC;KAKD,AAHA,AACE,KAAK,UAAQ,EAAW,IAAI,GAE9B,KAAK,MAAM,OAAO,CAAO;IAC3B;UAEA,EAAI,MAAM;EAEd,GACA,IACA;GAAE,SAAS;GAAO,UAAU;EAAK,CACnC;CACF;CAEA,IAAI,MAAM,GAAG;EAEX,AADA,KAAK,SAAS,GACd,KAAK,UAAU;CACjB;CAEA,IAAI,QAAQ,GAAG;EACb,KAAK,WAAW;CAClB;CAEA,oBAAoB,CAAC;CAErB,uBAAuB;EACrB,AAAI,KAAK,SACP,KAAK,MAAM,QAAQ;CAEvB;AACF"}

package/dist/browser/stimulus-tabs-CMox8txJ.js

@@ -0,0 +1,218 @@
+import { A as e, Et as t, M as n, N as r, a as i, b as a, et as o, h as s, o as c, s as l, t as u, xt as d } from "./dist-C_PfhNd9.js";
+import f from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/delivery/stimulus-tabs.tsx
+var g = /* @__PURE__ */ t(d(), 1);
+function _(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function v(e, t) {
+	return !e || _(e) ? e : _(e.default) ? e.default : t && _(e[t]) ? e[t] : t && _(e[t]?.default) ? e[t].default : e;
+}
+var y = v(s, "UiLayout") || v(T.UiLayout, "UiLayout"), b = v(c, "Purpose") || v(T.Purpose, "Purpose"), x = v(l, "PreviewPrompt") || v(T.PreviewPrompt, "PreviewPrompt"), S = v(a, "Collapsible") || v(T.Collapsible, "Collapsible"), C = u, w = C.default, T = w && typeof w == "object" ? w : C, E = o("div")({
+	flexGrow: 1,
+	backgroundColor: e.background(),
+	color: e.text(),
+	"&:not(.MathJax) table": { borderCollapse: "collapse" },
+	"&:not(.MathJax) table td, &:not(.MathJax) table th": {
+		padding: ".6em 1em",
+		textAlign: "left"
+	}
+}), D = o("div")(({ theme: t }) => ({
+	backgroundColor: e.background(),
+	color: e.text(),
+	padding: t.spacing(2),
+	"& blockquote": {
+		background: "#f9f9f9",
+		borderLeft: "5px solid #ccc",
+		margin: "1.5em 10px",
+		padding: ".5em 10px"
+	}
+})), O = o("div")({ fontSize: "1.75rem" }), k = o("div")({ fontSize: "1.5rem" }), A = o("div")({ fontSize: "1.25rem" }), j = o(n)(({ theme: e }) => ({
+	background: e.palette.common.white,
+	fontSize: "inherit",
+	fontFamily: "Roboto, sans-serif",
+	color: e.palette.common.black,
+	borderRadius: `${e.spacing(2)} ${e.spacing(2)} 0 0`,
+	border: "1px solid #D9DADA",
+	borderBottomWidth: 0,
+	minHeight: "56px",
+	padding: "8px 10px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	margin: `0 ${e.spacing(1)}`,
+	textTransform: "none",
+	".passage-label": {
+		display: "-webkit-box",
+		WebkitLineClamp: 2,
+		WebkitBoxOrient: "vertical",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "normal",
+		margin: "auto 0",
+		opacity: .7
+	},
+	"&.Mui-selected": {
+		color: e.palette.common.black,
+		".passage-label": { opacity: 1 },
+		".passage-label-underline": { backgroundColor: "#146EB3" }
+	},
+	"&:hover": { ".passage-label-underline": { backgroundColor: "#D0E2F0" } },
+	"& .MuiTouchRipple-root": { opacity: .7 }
+})), M = o("div")(({ theme: e }) => ({
+	height: "2px",
+	width: "100%",
+	marginTop: "6px",
+	background: e.palette.common.white
+})), N = class extends f.Component {
+	state = { activeTab: 0 };
+	handleChange = (e, t) => {
+		this.setState(() => ({ activeTab: t })), setTimeout(() => {
+			let e = new CustomEvent("pie-ui-passage-tabChanged", { detail: { tab: t } });
+			window.dispatchEvent(e);
+		});
+	};
+	handleKeyDown = (e, t) => {
+		let { key: n } = e, { tabs: r } = this.props, i = -1, a = r.findIndex((e) => e.id === t);
+		switch (n) {
+			case "ArrowRight":
+				i = (a + 1) % r.length;
+				break;
+			case "ArrowLeft":
+				i = (a - 1 + r.length) % r.length;
+				break;
+			case "Home":
+				i = 0;
+				break;
+			case "End":
+				i = r.length - 1;
+				break;
+			case "Enter":
+			case " ":
+				i = a;
+				break;
+			default: break;
+		}
+		i !== -1 && (e.preventDefault(), e.stopPropagation(), this.handleChange(e, r[i].id), document.getElementById(`button-${r[i].id}`).focus());
+	};
+	parsedText = (e = "") => {
+		let t = document.createElement("div");
+		t.innerHTML = e.replace(/(<br\/>\n)/g, "<br/>");
+		let n = t.querySelector("audio");
+		if (n) {
+			let e = document.createElement("source");
+			e.setAttribute("type", "audio/mp3"), e.setAttribute("src", n.getAttribute("src")), n.removeAttribute("src"), n.appendChild(e);
+		}
+		return t.innerHTML;
+	};
+	renderInstructions(e, t = !1) {
+		if (!e) return;
+		let n = /* @__PURE__ */ m(x, {
+			tagName: "div",
+			className: "prompt",
+			defaultClassName: "teacher-instructions",
+			prompt: e
+		});
+		return t ? n : /* @__PURE__ */ m(S, {
+			labels: {
+				hidden: "Show Teacher Instructions",
+				visible: "Hide Teacher Instructions"
+			},
+			children: n
+		});
+	}
+	renderTab(e, t) {
+		let { baseHeadingLevel: n } = this.props, r = n ? Math.min(6, Math.max(1, n)) : void 0, a = n ? `h${r}` : "h2", o = n ? Math.min(6, Math.max(1, r + 1)) : void 0;
+		return /* @__PURE__ */ h(D, {
+			id: `tabpanel-${e.id}`,
+			role: "tabpanel",
+			"aria-labelledby": `button-${e.id}`,
+			children: [
+				this.renderInstructions(e.teacherInstructions, t),
+				e.title && /* @__PURE__ */ m(b, {
+					purpose: "passage-title",
+					children: /* @__PURE__ */ m(a, { children: /* @__PURE__ */ m(O, { dangerouslySetInnerHTML: { __html: this.parsedText(e.title) } }) })
+				}),
+				e.subtitle && /* @__PURE__ */ m(b, {
+					purpose: "passage-subtitle",
+					children: /* @__PURE__ */ m(k, { dangerouslySetInnerHTML: { __html: this.parsedText(e.subtitle) } })
+				}),
+				e.author && /* @__PURE__ */ m(b, {
+					purpose: "passage-author",
+					children: /* @__PURE__ */ m(A, {
+						className: "author",
+						dangerouslySetInnerHTML: { __html: this.parsedText(e.author) }
+					})
+				}),
+				e.text && /* @__PURE__ */ m(b, {
+					purpose: "passage-text",
+					children: /* @__PURE__ */ m("div", {
+						className: "text",
+						dangerouslySetInnerHTML: { __html: n ? i(e.text, o) : e.text }
+					}, e.id)
+				})
+			]
+		}, e.id);
+	}
+	render() {
+		let { model: t, tabs: n, disabledTabs: i } = this.props, { activeTab: a } = this.state;
+		if (!n?.length) return;
+		let { extraCSSRules: o } = t || {}, s = (n || []).find((e) => e.id === a);
+		return /* @__PURE__ */ m(y, {
+			extraCSSRules: o,
+			children: /* @__PURE__ */ m(E, {
+				className: "passages",
+				children: i || n.length === 1 ? n.map((e) => this.renderTab(e, i)) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(r, {
+					sx: {
+						position: "sticky",
+						top: 0,
+						background: e.background(),
+						color: e.text(),
+						fontFamily: "Roboto, sans-serif",
+						"& .MuiTabs-list": { borderBottom: "1px solid #D9DADA" },
+						"& .MuiTabs-indicator": {
+							backgroundColor: "#ffffff",
+							marginBottom: "-1px"
+						}
+					},
+					value: a,
+					onChange: this.handleChange,
+					children: n.map((e) => /* @__PURE__ */ m(j, {
+						id: `button-${e.id}`,
+						label: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(b, {
+							purpose: "passage-label",
+							children: /* @__PURE__ */ m("span", {
+								className: "passage-label",
+								dangerouslySetInnerHTML: { __html: this.parsedText(e.label) }
+							})
+						}), /* @__PURE__ */ m(M, { className: "passage-label-underline" })] }),
+						value: e.id,
+						tabIndex: a === e.id ? 0 : -1,
+						"aria-controls": `tabpanel-${e.id}`,
+						"aria-selected": a === e.id,
+						onKeyDown: (t) => this.handleKeyDown(t, e.id)
+					}, e.id))
+				}), s ? this.renderTab(s, i) : null] })
+			})
+		});
+	}
+};
+N.propTypes = {
+	tabs: g.default.arrayOf(g.default.shape({
+		id: g.default.number.isRequired,
+		label: g.default.string.isRequired,
+		title: g.default.string.isRequired,
+		subtitle: g.default.string,
+		author: g.default.string,
+		text: g.default.string.isRequired,
+		teacherInstructions: g.default.string
+	}).isRequired).isRequired,
+	disabledTabs: g.default.bool,
+	model: g.default.object,
+	baseHeadingLevel: g.default.number
+};
+//#endregion
+export { N as t };
+
+//# sourceMappingURL=stimulus-tabs-CMox8txJ.js.map

package/dist/browser/stimulus-tabs-CMox8txJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stimulus-tabs-CMox8txJ.js","names":[],"sources":["../../src/delivery/stimulus-tabs.tsx"],"sourcesContent":["// @ts-nocheck\n/**\n * @synced-from pie-elements/packages/passage/src/stimulus-tabs.jsx\n * @auto-generated\n *\n * This file is automatically synced from pie-elements and converted to TypeScript.\n * Manual edits will be overwritten on next sync.\n * To make changes, edit the upstream JavaScript file and run sync again.\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Tabs from '@mui/material/Tabs';\nimport Tab from '@mui/material/Tab';\nimport { styled } from '@mui/material/styles';\nimport { Collapsible as CollapsibleImport, color, PreviewPrompt as PreviewPromptImport, Purpose as PurposeImport, UiLayout as UiLayoutImport, transformDataHeadings } from '@pie-lib/render-ui';\n\nfunction isRenderableReactInteropType(value: any) {\n  return (\n    typeof value === 'function' ||\n    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')\n  );\n}\n\nfunction unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {\n  if (!maybeSymbol) return maybeSymbol;\n  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;\n  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;\n  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {\n    return maybeSymbol[namedExport];\n  }\n  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {\n    return maybeSymbol[namedExport].default;\n  }\n  return maybeSymbol;\n}\nconst UiLayout = unwrapReactInteropSymbol(UiLayoutImport, 'UiLayout') || unwrapReactInteropSymbol(renderUi.UiLayout, 'UiLayout');\nconst Purpose = unwrapReactInteropSymbol(PurposeImport, 'Purpose') || unwrapReactInteropSymbol(renderUi.Purpose, 'Purpose');\nconst PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt') || unwrapReactInteropSymbol(renderUi.PreviewPrompt, 'PreviewPrompt');\nconst Collapsible = unwrapReactInteropSymbol(CollapsibleImport, 'Collapsible') || unwrapReactInteropSymbol(renderUi.Collapsible, 'Collapsible');\nimport * as RenderUiNamespace from '@pie-lib/render-ui';\nconst renderUiNamespaceAny = RenderUiNamespace as any;\nconst renderUiDefaultMaybe = renderUiNamespaceAny['default'];\nconst renderUi =\n  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'\n    ? renderUiDefaultMaybe\n    : renderUiNamespaceAny;\nconst PassagesContainer: any = styled('div')({\n  flexGrow: 1,\n  backgroundColor: color.background(),\n  color: color.text(),\n  '&:not(.MathJax) table': {\n    borderCollapse: 'collapse',\n  },\n  '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n    padding: '.6em 1em',\n    textAlign: 'left',\n  },\n});\n\nconst Passage: any = styled('div')(({ theme }) => ({\n  backgroundColor: color.background(),\n  color: color.text(),\n  padding: theme.spacing(2),\n  '& blockquote': {\n    background: '#f9f9f9',\n    borderLeft: '5px solid #ccc',\n    margin: '1.5em 10px',\n    padding: '.5em 10px',\n  },\n}));\n\nconst PassageTitle: any = styled('div')({\n  fontSize: '1.75rem',\n});\n\nconst PassageSubtitle: any = styled('div')({\n  fontSize: '1.5rem',\n});\n\nconst PassageAuthor: any = styled('div')({\n  fontSize: '1.25rem',\n});\n\nconst TabStyled: any = styled(Tab)(({ theme }) => ({\n  background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n  fontSize: 'inherit',\n  fontFamily: 'Roboto, sans-serif',\n  color: theme.palette.common.black, // remove when PD-2801 is DONE\n  borderRadius: `${theme.spacing(2)} ${theme.spacing(2)} 0 0`,\n  border: '1px solid #D9DADA',\n  borderBottomWidth: 0,\n  minHeight: '56px',\n  padding: '8px 10px',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  margin: `0 ${theme.spacing(1)}`,\n  textTransform: 'none',\n\n  '.passage-label': {\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'normal',\n    margin: 'auto 0',\n    opacity: 0.7,\n  },\n\n  '&.Mui-selected': {\n    color: theme.palette.common.black,\n    '.passage-label': {\n      opacity: 1,\n    },\n    '.passage-label-underline': {\n      backgroundColor: '#146EB3',\n    },\n  },\n\n  '&:hover': {\n    '.passage-label-underline': {\n      backgroundColor: '#D0E2F0',\n    },\n  },\n\n  '& .MuiTouchRipple-root': {\n    opacity: 0.7,\n  },\n}));\n\nconst Underline: any = styled('div')(({ theme }) => ({\n  height: '2px',\n  width: '100%',\n  marginTop: '6px',\n  background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n}));\n\nclass StimulusTabs extends React.Component {\n  state = {\n    activeTab: 0,\n  };\n\n  handleChange: any = (event, activeTab) => {\n    this.setState(() => ({ activeTab }));\n\n    setTimeout(() => {\n      const tabChangeEvent = new CustomEvent('pie-ui-passage-tabChanged', {\n        detail: { tab: activeTab },\n      });\n\n      window.dispatchEvent(tabChangeEvent);\n    });\n  };\n\n  handleKeyDown: any = (event, currentTabId) => {\n    const { key } = event;\n    const { tabs } = this.props;\n\n    let newTabIndex = -1;\n    const currentIndex = tabs.findIndex((tab) => tab.id === currentTabId);\n\n    switch (key) {\n      case 'ArrowRight':\n        // Move to the next tab\n        newTabIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case 'ArrowLeft':\n        // Move to the previous tab\n        newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      // Commented out ArrowDown and ArrowUp for future vertical tab navigation\n      // case 'ArrowDown':\n      //   // Move to the next tab (for vertical alignment)\n      //   newTabIndex = (currentIndex + 1) % tabs.length;\n      //   break;\n      // case 'ArrowUp':\n      //   // Move to the previous tab (for vertical alignment)\n      //   newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      //   break;\n      case 'Home':\n        // Move to the first tab\n        newTabIndex = 0;\n        break;\n      case 'End':\n        // Move to the last tab\n        newTabIndex = tabs.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        // Activate the current tab\n        newTabIndex = currentIndex;\n        break;\n      default:\n        break;\n    }\n\n    if (newTabIndex !== -1) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleChange(event, tabs[newTabIndex].id);\n      document.getElementById(`button-${tabs[newTabIndex].id}`).focus();\n    }\n  };\n\n  parsedText: any = (text = '') => {\n    // fix imported audio content for Safari PD-1391\n    const div = document.createElement('div');\n    div.innerHTML = text.replace(/(<br\\/>\\n)/g, '<br/>');\n\n    const audio = div.querySelector('audio');\n\n    if (audio) {\n      const source = document.createElement('source');\n\n      source.setAttribute('type', 'audio/mp3');\n      source.setAttribute('src', audio.getAttribute('src'));\n\n      audio.removeAttribute('src');\n      audio.appendChild(source);\n    }\n\n    return div.innerHTML;\n  };\n\n  renderInstructions(teacherInstructions, disabledTabs = false) {\n    if (!teacherInstructions) {\n      return;\n    }\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    if (disabledTabs) {\n      return teacherInstructionsDiv;\n    }\n\n    return (\n      <Collapsible\n        labels={{\n          hidden: 'Show Teacher Instructions',\n          visible: 'Hide Teacher Instructions',\n        }}\n      >\n        {teacherInstructionsDiv}\n      </Collapsible>\n    );\n  }\n\n  renderTab(tab, disabledTabs) {\n    const { baseHeadingLevel } = this.props;\n    const clampedLevel = baseHeadingLevel ? Math.min(6, Math.max(1, baseHeadingLevel)) : undefined;\n    const TitleTag = baseHeadingLevel ? `h${clampedLevel}` : 'h2'; // default to h2 if no base level is provided - this was the previous behavior\n    const textLevel = baseHeadingLevel ? Math.min(6, Math.max(1, clampedLevel + 1)) : undefined; // promote text headings one level above title\n\n    return (\n      <Passage key={tab.id} id={`tabpanel-${tab.id}`} role=\"tabpanel\" aria-labelledby={`button-${tab.id}`}>\n        {this.renderInstructions(tab.teacherInstructions, disabledTabs)}\n\n        {tab.title && (\n          <Purpose purpose=\"passage-title\">\n            <TitleTag>\n              <PassageTitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }} />\n            </TitleTag>\n          </Purpose>\n        )}\n\n        {tab.subtitle && (\n          <Purpose purpose=\"passage-subtitle\">\n            <PassageSubtitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.subtitle) }} />\n          </Purpose>\n        )}\n\n        {tab.author && (\n          <Purpose purpose=\"passage-author\">\n            <PassageAuthor className=\"author\" dangerouslySetInnerHTML={{ __html: this.parsedText(tab.author) }} />\n          </Purpose>\n        )}\n\n        {tab.text && (\n          <Purpose purpose=\"passage-text\">\n            <div key={tab.id} className=\"text\" dangerouslySetInnerHTML={{ __html: baseHeadingLevel ? transformDataHeadings(tab.text, textLevel) : tab.text }} />\n          </Purpose>\n        )}\n      </Passage>\n    );\n  }\n\n  render() {\n    const { model, tabs, disabledTabs } = this.props;\n    const { activeTab } = this.state;\n\n    if (!tabs?.length) {\n      return;\n    }\n\n    const { extraCSSRules } = model || {};\n    const selectedTab = (tabs || []).find((tab) => tab.id === activeTab);\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        <PassagesContainer className=\"passages\">\n          {disabledTabs || tabs.length === 1 ? (\n            tabs.map((tab) => this.renderTab(tab, disabledTabs))\n          ) : (\n            <>\n              <Tabs\n                sx={{\n                  position: 'sticky',\n                  top: 0,\n                  background: color.background(),\n                  color: color.text(),\n                  fontFamily: 'Roboto, sans-serif',\n                  '& .MuiTabs-list': {\n                    borderBottom: '1px solid #D9DADA',\n                  },\n                  '& .MuiTabs-indicator': {\n                    backgroundColor: '#ffffff',\n                    marginBottom: '-1px',\n                  },\n                }}\n                value={activeTab}\n                onChange={this.handleChange}\n              >\n                {tabs.map((tab) => (\n                  <TabStyled\n                    key={tab.id}\n                    id={`button-${tab.id}`}\n                    label={\n                      <>\n                        <Purpose purpose=\"passage-label\">\n                          <span\n                            className=\"passage-label\"\n                            dangerouslySetInnerHTML={{ __html: this.parsedText(tab.label) }}\n                          />\n                        </Purpose>\n                        <Underline className=\"passage-label-underline\" />\n                      </>\n                    }\n                    value={tab.id}\n                    tabIndex={activeTab === tab.id ? 0 : -1}\n                    aria-controls={`tabpanel-${tab.id}`}\n                    aria-selected={activeTab === tab.id}\n                    onKeyDown={(event) => this.handleKeyDown(event, tab.id)}\n                  />\n                ))}\n              </Tabs>\n              {selectedTab ? this.renderTab(selectedTab, disabledTabs) : null}\n            </>\n          )}\n        </PassagesContainer>\n      </UiLayout>\n    );\n  }\n}\n\nStimulusTabs.propTypes = {\n  tabs: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.number.isRequired,\n      label: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      subtitle: PropTypes.string,\n      author: PropTypes.string,\n      text: PropTypes.string.isRequired,\n      teacherInstructions: PropTypes.string,\n    }).isRequired,\n  ).isRequired,\n  disabledTabs: PropTypes.bool,\n  model: PropTypes.object,\n  baseHeadingLevel: PropTypes.number,\n};\n\nexport default StimulusTabs;\n"],"mappings":"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"}

package/dist/controller/defaults.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-elements/packages/passage/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.
+ */
+declare const _default: {
+    authorEnabled: boolean;
+    passages: {
+        teacherInstructions: string;
+        title: string;
+        subtitle: string;
+        author: string;
+        text: string;
+    }[];
+    subtitleEnabled: boolean;
+    teacherInstructionsEnabled: boolean;
+    textEnabled: boolean;
+    titleEnabled: boolean;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,17 @@
+//#region src/controller/defaults.ts
+var e = {
+	authorEnabled: !1,
+	passages: [{
+		teacherInstructions: "",
+		title: "",
+		subtitle: "",
+		author: "",
+		text: ""
+	}],
+	subtitleEnabled: !0,
+	teacherInstructionsEnabled: !0,
+	textEnabled: !0,
+	titleEnabled: !0
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/passage/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.
+ */
+export declare function createDefaultModel(model?: {}): Promise<unknown>;
+export declare const normalize: (question: any) => any;
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ */
+export declare function model(question: any, session: any, env: any): Promise<any>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,50 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "./defaults.js";
+//#region src/controller/index.ts
+var n = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), r = (e) => e != null, i = (e, t) => r(e) ? e : t;
+function a(e = {}) {
+	return new Promise((n) => {
+		n({
+			...t,
+			...e
+		});
+	});
+}
+var o = (e) => ({
+	...t,
+	...e
+}), s = (e, t) => {
+	let { role: n, mode: r } = t;
+	return n === "instructor" && (r === "view" || r === "evaluate") && e || "";
+};
+async function c(e, t, r) {
+	let a = o(e), c = a.passages.map((e, t) => ({
+		teacherInstructions: i(e.teacherInstructionsEnabled, a.teacherInstructionsEnabled) ? s(e.teacherInstructions, r) : "",
+		label: n(e.title) ? e.title : `Passage ${t + 1}`,
+		title: i(e.titleEnabled, a.titleEnabled) && e.title || "",
+		subtitle: i(e.subtitleEnabled, a.subtitleEnabled) && e.subtitle || "",
+		author: i(e.authorEnabled, a.authorEnabled) && e.author || "",
+		text: i(e.textEnabled, a.textEnabled) && e.text || ""
+	}));
+	return {
+		...a,
+		passages: c
+	};
+}
+var l = (t = {}, r = {}) => {
+	let i = {}, a = {};
+	return (t.passages || []).forEach((t, i) => {
+		let o = {};
+		[
+			"teacherInstructions",
+			"title",
+			"subtitle",
+			"author",
+			"text"
+		].forEach((e) => {
+			r[e]?.required && !n(t[e]) && (o[e] = "This field is required.");
+		}), e(o) || (a[i] = o);
+	}), e(a) || (i.passages = a), i;
+};
+//#endregion
+export { a as createDefaultModel, c as model, o as normalize, l as validate };

package/dist/delivery/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/passage/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.
+ */
+export default class PiePassage extends HTMLElement {
+    constructor();
+    setLangAttribute(): void;
+    _scheduleMathRender: any;
+    _initMathObserver(): void;
+    _disconnectMathObserver(): void;
+    set model(s: any);
+    set session(s: any);
+    connectedCallback(): void;
+    _render(): void;
+    _initPlayerObserver(): void;
+    _disconnectPlayerObserver(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,83 @@
+import e from "./stimulus-tabs.js";
+import { ModelSetEvent as t } from "@pie-element/shared-player-events";
+import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
+import r from "react";
+import { createRoot as i } from "react-dom/client";
+//#region src/delivery/index.ts
+function a(e) {
+	let t = e.closest("pie-player") || e.closest("pie-item-player");
+	if (t) {
+		let e = t.baseHeadingLevel;
+		e ??= t.getAttribute("base-heading-level") ?? t.getAttribute("baseheadinglevel");
+		let n = parseInt(e, 10);
+		if (Number.isFinite(n) && n >= 1 && n <= 6) return n;
+	}
+}
+var o = class extends HTMLElement {
+	constructor() {
+		super(), this._model = { passages: [] }, this._session = null, this._root = null, this._mathObserver = null, this._mathRenderPending = !1, this._playerObserver = null;
+	}
+	setLangAttribute() {
+		let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
+		this.setAttribute("lang", t);
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), n(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new t(this.tagName.toLowerCase(), this._session, !!this._model)), this.setLangAttribute(), this._render();
+	}
+	set session(e) {
+		this._session = e;
+	}
+	connectedCallback() {
+		this.setAttribute("aria-label", "Passage"), this.setAttribute("role", "region"), this._initMathObserver(), this._initPlayerObserver(), this._render();
+	}
+	_render() {
+		let { passages: t = [] } = this._model;
+		if (this._model.passages.length > 0) {
+			let n = t.map((e, t) => ({
+				id: t,
+				...e
+			})), o = r.createElement(e, {
+				tabs: n,
+				model: this._model,
+				baseHeadingLevel: a(this)
+			});
+			this._root ||= i(this), this._root.render(o), this._initMathObserver();
+		}
+	}
+	_initPlayerObserver() {
+		let e = this.closest("pie-player") || this.closest("pie-item-player");
+		e && (this._playerObserver = new MutationObserver(() => {
+			this._render();
+		}), this._playerObserver.observe(e, {
+			attributes: !0,
+			attributeFilter: ["base-heading-level"]
+		}));
+	}
+	_disconnectPlayerObserver() {
+		this._playerObserver &&= (this._playerObserver.disconnect(), null);
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), this._disconnectPlayerObserver(), this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/stimulus-tabs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-elements/packages/passage/src/stimulus-tabs.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';
+declare class StimulusTabs extends React.Component {
+    state: {
+        activeTab: number;
+    };
+    handleChange: any;
+    handleKeyDown: any;
+    parsedText: any;
+    renderInstructions(teacherInstructions: any, disabledTabs?: boolean): React.JSX.Element | undefined;
+    renderTab(tab: any, disabledTabs: any): React.JSX.Element;
+    render(): React.JSX.Element | undefined;
+}
+export default StimulusTabs;