@pie-element/passage 6.0.0-beta.1 → 6.0.0-next.42

package/configure/package.json

@@ -13,10 +13,10 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.1.0-next.5",
-    "@pie-lib/editable-html-tip-tap": "1.1.0-next.5",
-    "lodash": "^4.17.15",
-    "prop-types": "^15.6.2",
+    "@pie-lib/config-ui": "12.1.1-next.0",
+    "@pie-lib/editable-html-tip-tap": "1.1.1-next.0",
+    "lodash": "^4.17.23",
+    "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

package/module/configure.js

@@ -0,0 +1 @@
+import{_dll_react_dom as e,_dll_prop_types as t,_dll_mui__material_styles as a,_dll_react as n,_dll_mui__material as i,_dll_mui__icons_material as s}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";import{_dll_pie_lib__config_ui as o}from"../../../@pie-lib/config-module@^3.0.0/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as l}from"../../../@pie-lib/editable-html-module@^6.0.5/module/index.js";var r,d=e;r=d.createRoot,d.hydrateRoot;var u={};Object.defineProperty(u,"__esModule",{value:!0});class c extends CustomEvent{constructor(e,t=!1){super(c.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}c.TYPE="model.updated";var g=u.ModelUpdatedEvent=c;class p extends CustomEvent{constructor(e,t){super(p.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}p.TYPE="delete.image";var h=u.DeleteImageEvent=p;class m extends CustomEvent{constructor(e){super(m.TYPE,{bubbles:!0,detail:e}),this.handler=e}}m.TYPE="insert.image";var b=u.InsertImageEvent=m;class _ extends CustomEvent{constructor(e,t){super(_.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}_.TYPE="delete.sound";var C=u.DeleteSoundEvent=_;class E extends CustomEvent{constructor(e){super(E.TYPE,{bubbles:!0,detail:e}),this.handler=e}}E.TYPE="insert.sound";var f=u.InsertSoundEvent=E;const x=n,S=t,{styled:I}=a,{Button:v}=i,{Dialog:P}=i,{DialogTitle:y}=i,{DialogContent:T}=i,{DialogContentText:R}=i,{DialogActions:q}=i,{RemoveCircle:D}=s,{AddCircle:k}=s,A=I(({label:e,type:t="add",onClick:a})=>{const n="add"===t?k:D;return x.createElement(v,{color:"primary",size:"small",onClick:a},x.createElement(n,{fontSize:"small",color:"primary",style:{marginRight:4}}),e)})({textDecoration:"underline","&:hover":{textDecoration:"underline",backgroundColor:"transparent"},display:"flex",alignItems:"center"}),M=({content:e,cancel:t,title:a,ok:n,open:i,onOk:s,onCancel:o})=>x.createElement(P,{open:i},x.createElement(y,null,a),x.createElement(T,null,x.createElement(R,null,e)),x.createElement(q,null,s&&x.createElement(v,{onClick:s,color:"primary"},n),o&&x.createElement(v,{onClick:o,color:"primary"},t)));M.propTypes={content:S.string.isRequired,title:S.string.isRequired,cancel:S.string.isRequired,ok:S.string.isRequired,open:S.bool.isRequired,onCancel:S.func.isRequired,onOk:S.func.isRequired};const w=n,j=t,{styled:O}=a,{InputContainer:Y}=o,L=l,{ALL_PLUGINS:H}=l;function W(e){let t,a=e[0],n=1;for(;n<e.length;){const i=e[n],s=e[n+1];if(n+=2,("optionalAccess"===i||"optionalCall"===i)&&null==a)return;"access"===i||"optionalAccess"===i?(t=a,a=s(a)):"call"!==i&&"optionalCall"!==i||(a=s((...e)=>a.call(t,...e)),t=void 0)}return a}const z=O(Y)(({theme:e})=>({paddingTop:e.spacing(2),marginBottom:e.spacing(2),width:"100%"})),B=O("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class $ extends w.Component{static __initStatic(){this.propTypes={onModelChanged:j.func.isRequired,model:j.object.isRequired,configuration:j.object.isRequired,imageSupport:j.object.isRequired,passageIndex:j.number.isRequired,uploadSoundSupport:j.object.isRequired}}static __initStatic2(){this.defaultProps={passageIndex:0}}constructor(e){super(e),$.prototype.__init.call(this)}__init(){this.handleChange=(e,t)=>{const{model:a,onModelChanged:n,passageIndex:i}=this.props;if(!a.passages||i<0||i>=a.passages.length)return;const s=[...a.passages];s[i]={...s[i],[e]:t},n({...a,passages:s})}}render(){const{model:e,configuration:t,imageSupport:a,passageIndex:n,uploadSoundSupport:i}=this.props,{maxImageWidth:s={},maxImageHeight:o={},mathMlOptions:l={},baseInputConfiguration:r={},teacherInstructions:d={},title:u={},subtitle:c={},text:g={},author:p={}}=t||{},{errors:h={},passages:m=[],teacherInstructionsEnabled:b,titleEnabled:_,subtitleEnabled:C,authorEnabled:E,textEnabled:f}=e||{},{passages:x}=h||{},{teacherInstructions:S,title:I,subtitle:v,author:P,text:y}=x&&x[n]||{},T=s&&s.prompt,R=o&&o.prompt,q=e=>({...r,...e});return w.createElement(w.Fragment,null,b&&w.createElement(z,{label:d.label},w.createElement(L,{activePlugins:H,markup:m[n].teacherInstructions||"",onChange:e=>this.handleChange("teacherInstructions",e),nonEmpty:!1,error:S,maxImageWidth:s&&s.teacherInstructions||T,maxImageHeight:o&&o.teacherInstructions||R,mathMlOptions:l,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(W([d,"optionalAccess",e=>e.inputConfiguration]))}),S&&w.createElement(B,null,S)),_&&w.createElement(z,{label:u.label},w.createElement(L,{activePlugins:H,markup:m[n].title||"",onChange:e=>this.handleChange("title",e),nonEmpty:!1,error:I,mathMlOptions:l,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(W([u,"optionalAccess",e=>e.inputConfiguration]))}),I&&w.createElement(B,null,I)),C&&w.createElement(z,{label:c.label},w.createElement(L,{activePlugins:H,markup:m[n].subtitle||"",onChange:e=>this.handleChange("subtitle",e),nonEmpty:!1,error:v,mathMlOptions:l,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(W([c,"optionalAccess",e=>e.inputConfiguration]))}),v&&w.createElement(B,null,v)),E&&w.createElement(z,{label:p.label},w.createElement(L,{activePlugins:H,markup:m[n].author||"",onChange:e=>this.handleChange("author",e),nonEmpty:!1,error:P,mathMlOptions:l,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(W([p,"optionalAccess",e=>e.inputConfiguration]))}),P&&w.createElement(B,null,P)),f&&w.createElement(z,{label:g.label},w.createElement(L,{activePlugins:H,markup:m[n].text||"",onChange:e=>this.handleChange("text",e),imageSupport:a,uploadSoundSupport:i,nonEmpty:!1,error:y,maxImageWidth:s&&s.text||T,maxImageHeight:o&&o.text||R,mathMlOptions:l,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(W([g,"optionalAccess",e=>e.inputConfiguration]))}),y&&w.createElement(B,null,y)))}}$.__initStatic(),$.__initStatic2();const F=n,U=t,{styled:G}=a,{Typography:N}=i,{settings:J}=o,{layout:K}=o,{Panel:Q,toggle:V,dropdown:X}=J,Z=G(N)(({theme:e})=>({paddingTop:e.spacing(2),marginBottom:e.spacing(2)}));class ee extends F.Component{static __initStatic(){this.propTypes={onModelChanged:U.func.isRequired,onConfigurationChanged:U.func,model:U.object.isRequired,configuration:U.object.isRequired,imageSupport:U.object.isRequired,uploadSoundSupport:U.object.isRequired,classes:U.object.isRequired}}constructor(e){super(e),ee.prototype.__init.call(this),ee.prototype.__init2.call(this),ee.prototype.__init3.call(this),ee.prototype.__init4.call(this),this.state={showConfirmationDialog:!1,indexToRemove:-1}}__init(){this.getInnerText=e=>(e||"").replaceAll(/<[^>]*>/g,"")}__init2(){this.onDelete=(e,t,a)=>{let n=e.passages;n.splice(t,1),a({...e,passages:n}),this.setState({showConfirmationDialog:!1,indexToRemove:-1})}}__init3(){this.removeAdditionalPassage=e=>{const{model:t={},onModelChanged:a}=this.props,{passages:n=[]}=t,{teacherInstructions:i="",title:s="",subtitle:o="",author:l="",text:r=""}=n[e];this.getInnerText(i).trim()||this.getInnerText(s).trim()||this.getInnerText(o).trim()||this.getInnerText(l).trim()||this.getInnerText(r).trim()?this.setState({showConfirmationDialog:!0,indexToRemove:e}):this.onDelete(t,e,a)}}__init4(){this.addAdditionalPassage=()=>{const{model:e,onModelChanged:t}=this.props,a=[...e.passages,{teacherInstructions:"",title:"",subtitle:"",author:"",text:""}];t({...e,passages:a})}}render(){const{model:e,configuration:t,imageSupport:a,onConfigurationChanged:n,onModelChanged:i,uploadSoundSupport:s}=this.props,{settingsPanelDisabled:o,language:l={},languageChoices:r={},teacherInstructions:d={},title:u={},subtitle:c={},text:g={},author:p={},additionalPassage:h={}}=t||{},{extraCSSRules:m,passages:b}=e||{},_={titleEnabled:u&&u.settings&&V(u.label),subtitleEnabled:c&&c.settings&&V(c.label),authorEnabled:p&&p.settings&&V(p.label),textEnabled:g&&g.settings&&V(g.label),"additionalPassage.enabled":h&&h.settings&&V(h.label,!0)},C={teacherInstructionsEnabled:d&&d.settings&&V(d.label),"language.enabled":l&&l.settings&&V(l.label,!0),language:l&&l.settings&&l.enabled&&X(r.label,r.options)},E=`${h.label} will be deleted`,{indexToRemove:f,showConfirmationDialog:x}=this.state;return F.createElement(K.ConfigLayout,{extraCSSRules:m,hideSettings:o,settings:F.createElement(Q,{model:e,configuration:t,onChangeModel:e=>i(e),onChangeConfiguration:e=>n(e),groups:{Settings:_,Properties:C}})},b.map((n,o)=>F.createElement(F.Fragment,{key:o},o>0&&F.createElement(Z,{variant:"h5"},h.label),F.createElement($,{imageSupport:a,uploadSoundSupport:s,model:e,configuration:t,passageIndex:o,onModelChanged:i}),o>0&&h.enabled&&F.createElement(A,{type:"remove",label:`Remove ${h.label}`,onClick:()=>this.removeAdditionalPassage(o)}),0===o&&h.enabled&&b.length<2&&F.createElement(A,{label:`Add ${h.label}`,onClick:this.addAdditionalPassage}))),F.createElement(M,{open:x,title:"Warning",content:E,cancel:"Cancel",ok:"Ok",onCancel:()=>this.setState({showConfirmationDialog:!1}),onOk:()=>this.onDelete(e,f,i)}))}}ee.__initStatic();var te={authorEnabled:!0,passages:[{teacherInstructions:"",title:"",subtitle:"",author:"",text:""}],subtitleEnabled:!0,teacherInstructionsEnabled:!0,textEnabled:!0,titleEnabled:!0},ae={baseInputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},h3:{disabled:!0},blockquote:{disabled:!0},textAlign:{disabled:!0},showParagraphs:{disabled:!1},separateParagraphs:{disabled:!0}},settingsPanelDisabled:!1,title:{settings:!0,label:"Title",inputConfiguration:{audio:{disabled:!0},video:{disabled:!0},image:{disabled:!0},textAlign:{disabled:!1}},required:!0},subtitle:{settings:!0,label:"Subtitle",inputConfiguration:{audio:{disabled:!0},video:{disabled:!0},image:{disabled:!0},textAlign:{disabled:!1}},required:!1},author:{settings:!0,label:"Author",inputConfiguration:{audio:{disabled:!0},video:{disabled:!0},image:{disabled:!0}},required:!1},text:{settings:!0,label:"Text",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},h3:{disabled:!1},blockquote:{disabled:!1},textAlign:{disabled:!1}},required:!0},teacherInstructions:{settings:!0,label:"Teacher Instructions",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},maxImageWidth:{teacherInstructions:300,text:300},maxImageHeight:{teacherInstructions:300,text:300},mathMlOptions:{mmlOutput:!1,mmlEditing:!1},language:{settings:!1,label:"Specify Language",enabled:!1},languageChoices:{label:"Language Choices",options:[]},additionalPassage:{settings:!0,label:"Additional Passage",enabled:!1}};const ne=n;class ie extends HTMLElement{static __initStatic(){this.createDefaultModel=(e={})=>({...te,...e})}constructor(){super(),this._root=null,this._model=ie.createDefaultModel(),this._configuration=ae}set model(e){this._model=ie.createDefaultModel(e),this.render()}set configuration(e){this._configuration=e,this.render()}connectedCallback(){this.render()}modelChanged(e){this._model=e,this.dispatchEvent(new g(this._model),!0),this.render()}onConfigurationChanged(e){this._configuration=e,this.render()}insertImage(e){this.dispatchEvent(new b(e))}onDeleteImage(e,t){this.dispatchEvent(new h(e,t))}insertSound(e){this.dispatchEvent(new f(e))}onDeleteSound(e,t){this.dispatchEvent(new C(e,t))}render(){if(this._model){const e=ne.createElement(ee,{model:this._model,configuration:this._configuration,onModelChanged:this.modelChanged.bind(this),onConfigurationChanged:this.onConfigurationChanged.bind(this),imageSupport:{add:this.insertImage.bind(this),delete:this.onDeleteImage.bind(this)},uploadSoundSupport:{add:this.insertSound.bind(this),delete:this.onDeleteSound.bind(this)}});this._root||(this._root=r(this)),this._root.render(e)}}disconnectedCallback(){this._root&&this._root.unmount()}}ie.__initStatic();export{ie as default};

package/module/controller.js

@@ -0,0 +1,1068 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+/** Used for built-in method references. */
+
+var objectProto$6 = Object.prototype;
+
+/**
+ * Checks if `value` is likely a prototype object.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
+ */
+function isPrototype$2(value) {
+  var Ctor = value && value.constructor,
+      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto$6;
+
+  return value === proto;
+}
+
+var _isPrototype = isPrototype$2;
+
+/**
+ * Creates a unary function that invokes `func` with its argument transformed.
+ *
+ * @private
+ * @param {Function} func The function to wrap.
+ * @param {Function} transform The argument transform.
+ * @returns {Function} Returns the new function.
+ */
+
+function overArg$1(func, transform) {
+  return function(arg) {
+    return func(transform(arg));
+  };
+}
+
+var _overArg = overArg$1;
+
+var overArg = _overArg;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeKeys$1 = overArg(Object.keys, Object);
+
+var _nativeKeys = nativeKeys$1;
+
+var isPrototype$1 = _isPrototype,
+    nativeKeys = _nativeKeys;
+
+/** Used for built-in method references. */
+var objectProto$5 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
+
+/**
+ * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property names.
+ */
+function baseKeys$1(object) {
+  if (!isPrototype$1(object)) {
+    return nativeKeys(object);
+  }
+  var result = [];
+  for (var key in Object(object)) {
+    if (hasOwnProperty$4.call(object, key) && key != 'constructor') {
+      result.push(key);
+    }
+  }
+  return result;
+}
+
+var _baseKeys = baseKeys$1;
+
+/** Detect free variable `global` from Node.js. */
+
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal$1;
+
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$7 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$7;
+
+var root$6 = _root;
+
+/** Built-in value references. */
+var Symbol$2 = root$6.Symbol;
+
+var _Symbol = Symbol$2;
+
+var Symbol$1 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$4 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$4.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty$3.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag$1;
+
+/** Used for built-in method references. */
+
+var objectProto$3 = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto$3.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString$1;
+
+var Symbol = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$4(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+var _baseGetTag = baseGetTag$4;
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+
+function isObject$2(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+var isObject_1 = isObject$2;
+
+var baseGetTag$3 = _baseGetTag,
+    isObject$1 = isObject_1;
+
+/** `Object#toString` result references. */
+var asyncTag = '[object AsyncFunction]',
+    funcTag$1 = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    proxyTag = '[object Proxy]';
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction$2(value) {
+  if (!isObject$1(value)) {
+    return false;
+  }
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 9 which returns 'object' for typed arrays and other constructors.
+  var tag = baseGetTag$3(value);
+  return tag == funcTag$1 || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+
+var isFunction_1 = isFunction$2;
+
+var root$5 = _root;
+
+/** Used to detect overreaching core-js shims. */
+var coreJsData$1 = root$5['__core-js_shared__'];
+
+var _coreJsData = coreJsData$1;
+
+var coreJsData = _coreJsData;
+
+/** Used to detect methods masquerading as native. */
+var maskSrcKey = (function() {
+  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+  return uid ? ('Symbol(src)_1.' + uid) : '';
+}());
+
+/**
+ * Checks if `func` has its source masked.
+ *
+ * @private
+ * @param {Function} func The function to check.
+ * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+ */
+function isMasked$1(func) {
+  return !!maskSrcKey && (maskSrcKey in func);
+}
+
+var _isMasked = isMasked$1;
+
+/** Used for built-in method references. */
+
+var funcProto$1 = Function.prototype;
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString$1 = funcProto$1.toString;
+
+/**
+ * Converts `func` to its source code.
+ *
+ * @private
+ * @param {Function} func The function to convert.
+ * @returns {string} Returns the source code.
+ */
+function toSource$2(func) {
+  if (func != null) {
+    try {
+      return funcToString$1.call(func);
+    } catch (e) {}
+    try {
+      return (func + '');
+    } catch (e) {}
+  }
+  return '';
+}
+
+var _toSource = toSource$2;
+
+var isFunction$1 = isFunction_1,
+    isMasked = _isMasked,
+    isObject = isObject_1,
+    toSource$1 = _toSource;
+
+/**
+ * Used to match `RegExp`
+ * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+ */
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+/** Used to detect host constructors (Safari). */
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+/** Used for built-in method references. */
+var funcProto = Function.prototype,
+    objectProto$2 = Object.prototype;
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString = funcProto.toString;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
+
+/** Used to detect if a method is native. */
+var reIsNative = RegExp('^' +
+  funcToString.call(hasOwnProperty$2).replace(reRegExpChar, '\\$&')
+  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
+);
+
+/**
+ * The base implementation of `_.isNative` without bad shim checks.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a native function,
+ *  else `false`.
+ */
+function baseIsNative$1(value) {
+  if (!isObject(value) || isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction$1(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource$1(value));
+}
+
+var _baseIsNative = baseIsNative$1;
+
+/**
+ * Gets the value at `key` of `object`.
+ *
+ * @private
+ * @param {Object} [object] The object to query.
+ * @param {string} key The key of the property to get.
+ * @returns {*} Returns the property value.
+ */
+
+function getValue$1(object, key) {
+  return object == null ? undefined : object[key];
+}
+
+var _getValue = getValue$1;
+
+var baseIsNative = _baseIsNative,
+    getValue = _getValue;
+
+/**
+ * Gets the native function at `key` of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {string} key The key of the method to get.
+ * @returns {*} Returns the function if it's native, else `undefined`.
+ */
+function getNative$5(object, key) {
+  var value = getValue(object, key);
+  return baseIsNative(value) ? value : undefined;
+}
+
+var _getNative = getNative$5;
+
+var getNative$4 = _getNative,
+    root$4 = _root;
+
+/* Built-in method references that are verified to be native. */
+var DataView$1 = getNative$4(root$4, 'DataView');
+
+var _DataView = DataView$1;
+
+var getNative$3 = _getNative,
+    root$3 = _root;
+
+/* Built-in method references that are verified to be native. */
+var Map$1 = getNative$3(root$3, 'Map');
+
+var _Map = Map$1;
+
+var getNative$2 = _getNative,
+    root$2 = _root;
+
+/* Built-in method references that are verified to be native. */
+var Promise$2 = getNative$2(root$2, 'Promise');
+
+var _Promise = Promise$2;
+
+var getNative$1 = _getNative,
+    root$1 = _root;
+
+/* Built-in method references that are verified to be native. */
+var Set$1 = getNative$1(root$1, 'Set');
+
+var _Set = Set$1;
+
+var getNative = _getNative,
+    root = _root;
+
+/* Built-in method references that are verified to be native. */
+var WeakMap$1 = getNative(root, 'WeakMap');
+
+var _WeakMap = WeakMap$1;
+
+var DataView = _DataView,
+    Map = _Map,
+    Promise$1 = _Promise,
+    Set = _Set,
+    WeakMap = _WeakMap,
+    baseGetTag$2 = _baseGetTag,
+    toSource = _toSource;
+
+/** `Object#toString` result references. */
+var mapTag$2 = '[object Map]',
+    objectTag$1 = '[object Object]',
+    promiseTag = '[object Promise]',
+    setTag$2 = '[object Set]',
+    weakMapTag$1 = '[object WeakMap]';
+
+var dataViewTag$1 = '[object DataView]';
+
+/** Used to detect maps, sets, and weakmaps. */
+var dataViewCtorString = toSource(DataView),
+    mapCtorString = toSource(Map),
+    promiseCtorString = toSource(Promise$1),
+    setCtorString = toSource(Set),
+    weakMapCtorString = toSource(WeakMap);
+
+/**
+ * Gets the `toStringTag` of `value`.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+var getTag$1 = baseGetTag$2;
+
+// Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
+if ((DataView && getTag$1(new DataView(new ArrayBuffer(1))) != dataViewTag$1) ||
+    (Map && getTag$1(new Map) != mapTag$2) ||
+    (Promise$1 && getTag$1(Promise$1.resolve()) != promiseTag) ||
+    (Set && getTag$1(new Set) != setTag$2) ||
+    (WeakMap && getTag$1(new WeakMap) != weakMapTag$1)) {
+  getTag$1 = function(value) {
+    var result = baseGetTag$2(value),
+        Ctor = result == objectTag$1 ? value.constructor : undefined,
+        ctorString = Ctor ? toSource(Ctor) : '';
+
+    if (ctorString) {
+      switch (ctorString) {
+        case dataViewCtorString: return dataViewTag$1;
+        case mapCtorString: return mapTag$2;
+        case promiseCtorString: return promiseTag;
+        case setCtorString: return setTag$2;
+        case weakMapCtorString: return weakMapTag$1;
+      }
+    }
+    return result;
+  };
+}
+
+var _getTag = getTag$1;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+
+function isObjectLike$3(value) {
+  return value != null && typeof value == 'object';
+}
+
+var isObjectLike_1 = isObjectLike$3;
+
+var baseGetTag$1 = _baseGetTag,
+    isObjectLike$2 = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var argsTag$1 = '[object Arguments]';
+
+/**
+ * The base implementation of `_.isArguments`.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ */
+function baseIsArguments$1(value) {
+  return isObjectLike$2(value) && baseGetTag$1(value) == argsTag$1;
+}
+
+var _baseIsArguments = baseIsArguments$1;
+
+var baseIsArguments = _baseIsArguments,
+    isObjectLike$1 = isObjectLike_1;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
+
+/** Built-in value references. */
+var propertyIsEnumerable = objectProto$1.propertyIsEnumerable;
+
+/**
+ * Checks if `value` is likely an `arguments` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArguments(function() { return arguments; }());
+ * // => true
+ *
+ * _.isArguments([1, 2, 3]);
+ * // => false
+ */
+var isArguments$1 = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
+  return isObjectLike$1(value) && hasOwnProperty$1.call(value, 'callee') &&
+    !propertyIsEnumerable.call(value, 'callee');
+};
+
+var isArguments_1 = isArguments$1;
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+
+var isArray$1 = Array.isArray;
+
+var isArray_1 = isArray$1;
+
+/** Used as references for various `Number` constants. */
+
+var MAX_SAFE_INTEGER = 9007199254740991;
+
+/**
+ * Checks if `value` is a valid array-like length.
+ *
+ * **Note:** This method is loosely based on
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+ * @example
+ *
+ * _.isLength(3);
+ * // => true
+ *
+ * _.isLength(Number.MIN_VALUE);
+ * // => false
+ *
+ * _.isLength(Infinity);
+ * // => false
+ *
+ * _.isLength('3');
+ * // => false
+ */
+function isLength$2(value) {
+  return typeof value == 'number' &&
+    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
+
+var isLength_1 = isLength$2;
+
+var isFunction = isFunction_1,
+    isLength$1 = isLength_1;
+
+/**
+ * Checks if `value` is array-like. A value is considered array-like if it's
+ * not a function and has a `value.length` that's an integer greater than or
+ * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+ * @example
+ *
+ * _.isArrayLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLike(document.body.children);
+ * // => true
+ *
+ * _.isArrayLike('abc');
+ * // => true
+ *
+ * _.isArrayLike(_.noop);
+ * // => false
+ */
+function isArrayLike$1(value) {
+  return value != null && isLength$1(value.length) && !isFunction(value);
+}
+
+var isArrayLike_1 = isArrayLike$1;
+
+var isBuffer$1 = {exports: {}};
+
+/**
+ * This method returns `false`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.13.0
+ * @category Util
+ * @returns {boolean} Returns `false`.
+ * @example
+ *
+ * _.times(2, _.stubFalse);
+ * // => [false, false]
+ */
+
+function stubFalse() {
+  return false;
+}
+
+var stubFalse_1 = stubFalse;
+
+(function (module, exports) {
+var root = _root,
+    stubFalse = stubFalse_1;
+
+/** Detect free variable `exports`. */
+var freeExports = exports && !exports.nodeType && exports;
+
+/** Detect free variable `module`. */
+var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+
+/** Detect the popular CommonJS extension `module.exports`. */
+var moduleExports = freeModule && freeModule.exports === freeExports;
+
+/** Built-in value references. */
+var Buffer = moduleExports ? root.Buffer : undefined;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
+
+/**
+ * Checks if `value` is a buffer.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.3.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
+ * @example
+ *
+ * _.isBuffer(new Buffer(2));
+ * // => true
+ *
+ * _.isBuffer(new Uint8Array(2));
+ * // => false
+ */
+var isBuffer = nativeIsBuffer || stubFalse;
+
+module.exports = isBuffer;
+}(isBuffer$1, isBuffer$1.exports));
+
+var baseGetTag = _baseGetTag,
+    isLength = isLength_1,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var argsTag = '[object Arguments]',
+    arrayTag = '[object Array]',
+    boolTag = '[object Boolean]',
+    dateTag = '[object Date]',
+    errorTag = '[object Error]',
+    funcTag = '[object Function]',
+    mapTag$1 = '[object Map]',
+    numberTag = '[object Number]',
+    objectTag = '[object Object]',
+    regexpTag = '[object RegExp]',
+    setTag$1 = '[object Set]',
+    stringTag = '[object String]',
+    weakMapTag = '[object WeakMap]';
+
+var arrayBufferTag = '[object ArrayBuffer]',
+    dataViewTag = '[object DataView]',
+    float32Tag = '[object Float32Array]',
+    float64Tag = '[object Float64Array]',
+    int8Tag = '[object Int8Array]',
+    int16Tag = '[object Int16Array]',
+    int32Tag = '[object Int32Array]',
+    uint8Tag = '[object Uint8Array]',
+    uint8ClampedTag = '[object Uint8ClampedArray]',
+    uint16Tag = '[object Uint16Array]',
+    uint32Tag = '[object Uint32Array]';
+
+/** Used to identify `toStringTag` values of typed arrays. */
+var typedArrayTags = {};
+typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
+typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
+typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
+typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
+typedArrayTags[uint32Tag] = true;
+typedArrayTags[argsTag] = typedArrayTags[arrayTag] =
+typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
+typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
+typedArrayTags[errorTag] = typedArrayTags[funcTag] =
+typedArrayTags[mapTag$1] = typedArrayTags[numberTag] =
+typedArrayTags[objectTag] = typedArrayTags[regexpTag] =
+typedArrayTags[setTag$1] = typedArrayTags[stringTag] =
+typedArrayTags[weakMapTag] = false;
+
+/**
+ * The base implementation of `_.isTypedArray` without Node.js optimizations.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
+ */
+function baseIsTypedArray$1(value) {
+  return isObjectLike(value) &&
+    isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
+}
+
+var _baseIsTypedArray = baseIsTypedArray$1;
+
+/**
+ * The base implementation of `_.unary` without support for storing metadata.
+ *
+ * @private
+ * @param {Function} func The function to cap arguments for.
+ * @returns {Function} Returns the new capped function.
+ */
+
+function baseUnary$1(func) {
+  return function(value) {
+    return func(value);
+  };
+}
+
+var _baseUnary = baseUnary$1;
+
+var _nodeUtil = {exports: {}};
+
+(function (module, exports) {
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `exports`. */
+var freeExports = exports && !exports.nodeType && exports;
+
+/** Detect free variable `module`. */
+var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+
+/** Detect the popular CommonJS extension `module.exports`. */
+var moduleExports = freeModule && freeModule.exports === freeExports;
+
+/** Detect free variable `process` from Node.js. */
+var freeProcess = moduleExports && freeGlobal.process;
+
+/** Used to access faster Node.js helpers. */
+var nodeUtil = (function() {
+  try {
+    // Use `util.types` for Node.js 10+.
+    var types = freeModule && freeModule.require && freeModule.require('util').types;
+
+    if (types) {
+      return types;
+    }
+
+    // Legacy `process.binding('util')` for Node.js < 10.
+    return freeProcess && freeProcess.binding && freeProcess.binding('util');
+  } catch (e) {}
+}());
+
+module.exports = nodeUtil;
+}(_nodeUtil, _nodeUtil.exports));
+
+var baseIsTypedArray = _baseIsTypedArray,
+    baseUnary = _baseUnary,
+    nodeUtil = _nodeUtil.exports;
+
+/* Node.js helper references. */
+var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
+
+/**
+ * Checks if `value` is classified as a typed array.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
+ * @example
+ *
+ * _.isTypedArray(new Uint8Array);
+ * // => true
+ *
+ * _.isTypedArray([]);
+ * // => false
+ */
+var isTypedArray$1 = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
+
+var isTypedArray_1 = isTypedArray$1;
+
+var baseKeys = _baseKeys,
+    getTag = _getTag,
+    isArguments = isArguments_1,
+    isArray = isArray_1,
+    isArrayLike = isArrayLike_1,
+    isBuffer = isBuffer$1.exports,
+    isPrototype = _isPrototype,
+    isTypedArray = isTypedArray_1;
+
+/** `Object#toString` result references. */
+var mapTag = '[object Map]',
+    setTag = '[object Set]';
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/**
+ * Checks if `value` is an empty object, collection, map, or set.
+ *
+ * Objects are considered empty if they have no own enumerable string keyed
+ * properties.
+ *
+ * Array-like values such as `arguments` objects, arrays, buffers, strings, or
+ * jQuery-like collections are considered empty if they have a `length` of `0`.
+ * Similarly, maps and sets are considered empty if they have a `size` of `0`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is empty, else `false`.
+ * @example
+ *
+ * _.isEmpty(null);
+ * // => true
+ *
+ * _.isEmpty(true);
+ * // => true
+ *
+ * _.isEmpty(1);
+ * // => true
+ *
+ * _.isEmpty([1, 2, 3]);
+ * // => false
+ *
+ * _.isEmpty({ 'a': 1 });
+ * // => false
+ */
+function isEmpty(value) {
+  if (value == null) {
+    return true;
+  }
+  if (isArrayLike(value) &&
+      (isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||
+        isBuffer(value) || isTypedArray(value) || isArguments(value))) {
+    return !value.length;
+  }
+  var tag = getTag(value);
+  if (tag == mapTag || tag == setTag) {
+    return !value.size;
+  }
+  if (isPrototype(value)) {
+    return !baseKeys(value).length;
+  }
+  for (var key in value) {
+    if (hasOwnProperty.call(value, key)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+var isEmpty_1 = isEmpty;
+
+// TODO: also update '../../configure/src/defaults.js' and '../../src/print.js' when updating defaults
+var defaults = {
+  authorEnabled: false, // TODO: should be set to true when all Studio content is updated
+  passages: [
+    {
+      teacherInstructions: '',
+      title: '',
+      subtitle: '',
+      author: '',
+      text: '',
+    },
+  ],
+  subtitleEnabled: true,
+  teacherInstructionsEnabled: true,
+  textEnabled: true,
+  titleEnabled: true,
+};
+
+const getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
+
+const checkNullish = (value) => value !== null && value !== undefined;
+
+const isEnabled = (value, defaultValue) => (checkNullish(value) ? value : defaultValue);
+
+function createDefaultModel(model = {}) {
+  return new Promise((resolve) => {
+    resolve({ ...defaults, ...model });
+  });
+}
+
+const normalize = (question) => ({ ...defaults, ...question });
+
+const normalizeTeacherInstructions = (instructions, env) => {
+  const { role, mode } = env;
+
+  if (role === 'instructor' && (mode === 'view' || mode === 'evaluate')) {
+    return instructions || '';
+  }
+
+  return '';
+};
+
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ */
+async function model(question, session, env) {
+  const normalizedQuestion = normalize(question);
+
+  const normalizedPassages = normalizedQuestion.passages.map((passage, index) => ({
+    teacherInstructions: isEnabled(passage.teacherInstructionsEnabled, normalizedQuestion.teacherInstructionsEnabled)
+      ? normalizeTeacherInstructions(passage.teacherInstructions, env)
+      : '',
+    label: getContent(passage.title) ? passage.title : `Passage ${index + 1}`,
+    title: isEnabled(passage.titleEnabled, normalizedQuestion.titleEnabled) ? passage.title || '' : '',
+    subtitle: isEnabled(passage.subtitleEnabled, normalizedQuestion.subtitleEnabled) ? passage.subtitle || '' : '',
+    author: isEnabled(passage.authorEnabled, normalizedQuestion.authorEnabled) ? passage.author || '' : '',
+    text: isEnabled(passage.textEnabled, normalizedQuestion.textEnabled) ? passage.text || '' : '',
+  }));
+
+  return {
+    ...normalizedQuestion,
+    passages: normalizedPassages,
+  };
+}
+
+const validate = (model = {}, config = {}) => {
+  const errors = {};
+  const passagesErrors = {};
+
+  (model.passages || []).forEach((passage, index) => {
+    const err = {};
+
+    ['teacherInstructions', 'title', 'subtitle', 'author', 'text'].forEach((field) => {
+      if (config[field]?.required && !getContent(passage[field])) {
+        err[field] = 'This field is required.';
+      }
+    });
+
+    if (!isEmpty_1(err)) {
+      passagesErrors[index] = err;
+    }
+  });
+
+  if (!isEmpty_1(passagesErrors)) {
+    errors.passages = passagesErrors;
+  }
+
+  return errors;
+};
+
+export { createDefaultModel, model, normalize, validate };

package/module/demo.js

@@ -0,0 +1,57 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  passages: [
+    {
+      teacherInstructions: 'Teacher instructions for first tab',
+      title: 'Hope Is the Thing with Feathers',
+      subtitle: 'from <em>The Complete Poems of Emily Dickinson</em>',
+      author: 'by Emily Dickinson',
+      text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p>',
+    },
+    {
+      title: 'Ineskeen Road, July Evening',
+      text: `The bicycles go by in twos and threes -<br/>
+        There's a dance in Billy Brennan's barn tonight,<br/>
+        And there's the half-talk code of mysteries<br/>
+        And the wink-and-elbow language of delight.<br/>
+        Half-past eight and there is not a spot<br/>
+        Upon a mile of road, no shadow thrown<br/>
+        That might turn out a man or woman, not<br/>
+        A footfall tapping secrecies of stone. <br/>
+        <p/>
+        I have what every poet hates in spite<br/>
+        Of all the solemn talk of contemplation.<br/>
+        Oh, Alexander Selkirk knew the plight<br/>
+        Of being king and government and nation.<br/>
+        A road, a mile of kingdom. I am king<br/>
+        Of banks and stones and every blooming thing.<br/>
+        `,
+    },
+  ],
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'passage-element': '../..',
+  },
+  models: [model('1', 'passage-element')],
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });

package/module/element.js

@@ -0,0 +1 @@
+import{_dll_pie_lib__math_rendering as e}from"../../../@pie-lib/math-rendering-module@^4.0.5/module/index.js";import{_dll_react_dom as t,_dll_prop_types as r,_dll_mui__material as n,_dll_mui__material_styles as o,_dll_pie_lib__render_ui as s}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";var a={};Object.defineProperty(a,"__esModule",{value:!0});class i extends CustomEvent{constructor(e,t,r){super(i.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e,hasModel:r}}),this.component=e,this.complete=t}}i.TYPE="model-set";var u=a.ModelSetEvent=i;class l extends CustomEvent{constructor(e,t){super(l.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e}}),this.component=e,this.complete=t}}l.TYPE="session-changed",a.SessionChangedEvent=l;var c={exports:{}},d={},p=Symbol.for("react.element"),f=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),y=Symbol.for("react.provider"),_=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),E=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),x=Symbol.iterator;var C={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},k=Object.assign,T={};function w(e,t,r){this.props=e,this.context=t,this.refs=T,this.updater=r||C}function R(){}function $(e,t,r){this.props=e,this.context=t,this.refs=T,this.updater=r||C}w.prototype.isReactComponent={},w.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},w.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},R.prototype=w.prototype;var I=$.prototype=new R;I.constructor=$,k(I,w.prototype),I.isPureReactComponent=!0;var A=Array.isArray,P=Object.prototype.hasOwnProperty,j={current:null},M={key:!0,ref:!0,__self:!0,__source:!0};function L(e,t,r){var n,o={},s=null,a=null;if(null!=t)for(n in void 0!==t.ref&&(a=t.ref),void 0!==t.key&&(s=""+t.key),t)P.call(t,n)&&!M.hasOwnProperty(n)&&(o[n]=t[n]);var i=arguments.length-2;if(1===i)o.children=r;else if(1<i){for(var u=Array(i),l=0;l<i;l++)u[l]=arguments[l+2];o.children=u}if(e&&e.defaultProps)for(n in i=e.defaultProps)void 0===o[n]&&(o[n]=i[n]);return{$$typeof:p,type:e,key:s,ref:a,props:o,_owner:j.current}}function O(e){return"object"==typeof e&&null!==e&&e.$$typeof===p}var q=/\/+/g;function H(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(e){return t[e]})}(""+e.key):t.toString(36)}function N(e,t,r,n,o){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var a=!1;if(null===e)a=!0;else switch(s){case"string":case"number":a=!0;break;case"object":switch(e.$$typeof){case p:case f:a=!0}}if(a)return o=o(a=e),e=""===n?"."+H(a,0):n,A(o)?(r="",null!=e&&(r=e.replace(q,"$&/")+"/"),N(o,t,r,"",function(e){return e})):null!=o&&(O(o)&&(o=function(e,t){return{$$typeof:p,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(o,r+(!o.key||a&&a.key===o.key?"":(""+o.key).replace(q,"$&/")+"/")+e)),t.push(o)),1;if(a=0,n=""===n?".":n+":",A(e))for(var i=0;i<e.length;i++){var u=n+H(s=e[i],i);a+=N(s,t,r,u,o)}else if(u=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=x&&e[x]||e["@@iterator"])?e:null}(e),"function"==typeof u)for(e=u.call(e),i=0;!(s=e.next()).done;)a+=N(s=s.value,t,r,u=n+H(s,i++),o);else if("object"===s)throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return a}function D(e,t,r){if(null==e)return e;var n=[],o=0;return N(e,n,"","",function(e){return t.call(r,e,o++)}),n}function F(e){if(-1===e._status){var t=e._result;(t=t()).then(function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)},function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)}),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var U={current:null},V={transition:null},z={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:j};function Y(){throw Error("act(...) is not supported in production builds of React.")}d.Children={map:D,forEach:function(e,t,r){D(e,function(){t.apply(this,arguments)},r)},count:function(e){var t=0;return D(e,function(){t++}),t},toArray:function(e){return D(e,function(e){return e})||[]},only:function(e){if(!O(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},d.Component=w,d.Fragment=h,d.Profiler=b,d.PureComponent=$,d.StrictMode=m,d.Suspense=v,d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=z,d.act=Y,d.cloneElement=function(e,t,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var n=k({},e.props),o=e.key,s=e.ref,a=e._owner;if(null!=t){if(void 0!==t.ref&&(s=t.ref,a=j.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var i=e.type.defaultProps;for(u in t)P.call(t,u)&&!M.hasOwnProperty(u)&&(n[u]=void 0===t[u]&&void 0!==i?i[u]:t[u])}var u=arguments.length-2;if(1===u)n.children=r;else if(1<u){i=Array(u);for(var l=0;l<u;l++)i[l]=arguments[l+2];n.children=i}return{$$typeof:p,type:e.type,key:o,ref:s,props:n,_owner:a}},d.createContext=function(e){return(e={$$typeof:_,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:y,_context:e},e.Consumer=e},d.createElement=L,d.createFactory=function(e){var t=L.bind(null,e);return t.type=e,t},d.createRef=function(){return{current:null}},d.forwardRef=function(e){return{$$typeof:g,render:e}},d.isValidElement=O,d.lazy=function(e){return{$$typeof:S,_payload:{_status:-1,_result:e},_init:F}},d.memo=function(e,t){return{$$typeof:E,type:e,compare:void 0===t?null:t}},d.startTransition=function(e){var t=V.transition;V.transition={};try{e()}finally{V.transition=t}},d.unstable_act=Y,d.useCallback=function(e,t){return U.current.useCallback(e,t)},d.useContext=function(e){return U.current.useContext(e)},d.useDebugValue=function(){},d.useDeferredValue=function(e){return U.current.useDeferredValue(e)},d.useEffect=function(e,t){return U.current.useEffect(e,t)},d.useId=function(){return U.current.useId()},d.useImperativeHandle=function(e,t,r){return U.current.useImperativeHandle(e,t,r)},d.useInsertionEffect=function(e,t){return U.current.useInsertionEffect(e,t)},d.useLayoutEffect=function(e,t){return U.current.useLayoutEffect(e,t)},d.useMemo=function(e,t){return U.current.useMemo(e,t)},d.useReducer=function(e,t,r){return U.current.useReducer(e,t,r)},d.useRef=function(e){return U.current.useRef(e)},d.useState=function(e){return U.current.useState(e)},d.useSyncExternalStore=function(e,t,r){return U.current.useSyncExternalStore(e,t,r)},d.useTransition=function(){return U.current.useTransition()},d.version="18.3.1",c.exports=d;var B=c.exports;var J,K=t;J=K.createRoot,K.hydrateRoot;const G=r,{Tabs:W}=n,{Tab:Q}=n,{styled:X}=o,{Collapsible:Z}=s,{color:ee}=s,{PreviewPrompt:te}=s,{Purpose:re}=s,{UiLayout:ne}=s;const oe=X("div")({flexGrow:1,backgroundColor:ee.background(),color:ee.text(),"&:not(.MathJax) table":{borderCollapse:"collapse"},"&:not(.MathJax) table td, &:not(.MathJax) table th":{padding:".6em 1em",textAlign:"left"}}),se=X("div")(({theme:e})=>({backgroundColor:ee.background(),color:ee.text(),padding:e.spacing(2)})),ae=X("div")({fontSize:"1.75rem"}),ie=X("div")({fontSize:"1.5rem"}),ue=X("div")({fontSize:"1.25rem"}),le=X(Q)(({theme:e})=>({background:e.palette.common.white,fontSize:"inherit",color:e.palette.common.black}));class ce extends B.Component{constructor(...e){super(...e),ce.prototype.__init.call(this),ce.prototype.__init2.call(this),ce.prototype.__init3.call(this),ce.prototype.__init4.call(this)}__init(){this.state={activeTab:0}}__init2(){this.handleChange=(e,t)=>{this.setState(()=>({activeTab:t})),setTimeout(()=>{const e=new CustomEvent("pie-ui-passage-tabChanged",{detail:{tab:t}});window.dispatchEvent(e)})}}__init3(){this.handleKeyDown=(e,t)=>{const{key:r}=e,{tabs:n}=this.props;let o=-1;const s=n.findIndex(e=>e.id===t);switch(r){case"ArrowRight":o=(s+1)%n.length;break;case"ArrowLeft":o=(s-1+n.length)%n.length;break;case"Home":o=0;break;case"End":o=n.length-1;break;case"Enter":case" ":o=s}-1!==o&&(e.preventDefault(),this.handleChange(e,n[o].id),document.getElementById(`button-${n[o].id}`).focus())}}__init4(){this.parsedText=(e="")=>{const t=document.createElement("div");t.innerHTML=e.replace(/(<br\/>\n)/g,"<br/>");const r=t.querySelector("audio");if(r){const e=document.createElement("source");e.setAttribute("type","audio/mp3"),e.setAttribute("src",r.getAttribute("src")),r.removeAttribute("src"),r.appendChild(e)}return t.innerHTML}}renderInstructions(e,t=!1){if(!e)return;const r=B.createElement(te,{tagName:"div",className:"prompt",defaultClassName:"teacher-instructions",prompt:e});return t?r:B.createElement(Z,{labels:{hidden:"Show Teacher Instructions",visible:"Hide Teacher Instructions"}},r)}renderTab(e,t){return B.createElement(se,{key:e.id,id:`tabpanel-${e.id}`,role:"tabpanel","aria-labelledby":`button-${e.id}`},this.renderInstructions(e.teacherInstructions,t),(e.title||e.subtitle)&&B.createElement("h2",null,e.title&&B.createElement(re,{purpose:"passage-title"},B.createElement(ae,{dangerouslySetInnerHTML:{__html:this.parsedText(e.title)}})),e.subtitle&&B.createElement(re,{purpose:"passage-subtitle"},B.createElement(ie,{dangerouslySetInnerHTML:{__html:this.parsedText(e.subtitle)}}))),e.author&&B.createElement(re,{purpose:"passage-author"},B.createElement(ue,{className:"author",dangerouslySetInnerHTML:{__html:this.parsedText(e.author)}})),e.text&&B.createElement(re,{purpose:"passage-text"},B.createElement("div",{key:e.id,className:"text",dangerouslySetInnerHTML:{__html:this.parsedText(e.text)}})))}render(){const{model:e,tabs:t,disabledTabs:r}=this.props,{activeTab:n}=this.state;if(!function(e){let t,r=e[0],n=1;for(;n<e.length;){const o=e[n],s=e[n+1];if(n+=2,("optionalAccess"===o||"optionalCall"===o)&&null==r)return;"access"===o||"optionalAccess"===o?(t=r,r=s(r)):"call"!==o&&"optionalCall"!==o||(r=s((...e)=>r.call(t,...e)),t=void 0)}return r}([t,"optionalAccess",e=>e.length]))return;const{extraCSSRules:o}=e||{},s=(t||[]).find(e=>e.id===n);return B.createElement(ne,{extraCSSRules:o},B.createElement(oe,{className:"passages"},r||1===t.length?t.map(e=>this.renderTab(e,r)):B.createElement(B.Fragment,null,B.createElement(W,{sx:{position:"sticky",top:0,background:ee.background(),color:ee.text()},value:n,onChange:this.handleChange},t.map(e=>B.createElement(le,{key:e.id,id:`button-${e.id}`,label:B.createElement(re,{purpose:"passage-label"},B.createElement("span",{dangerouslySetInnerHTML:{__html:this.parsedText(e.label)}})),value:e.id,tabIndex:n===e.id?0:-1,"aria-controls":`tabpanel-${e.id}`,"aria-selected":n===e.id,onFocus:()=>this.handleChange(null,e.id),onKeyDown:t=>this.handleKeyDown(t,e.id)}))),s?this.renderTab(s,r):null)))}}ce.propTypes={tabs:G.arrayOf(G.shape({id:G.number.isRequired,label:G.string.isRequired,title:G.string.isRequired,subtitle:G.string,author:G.string,text:G.string.isRequired,teacherInstructions:G.string}).isRequired).isRequired,disabledTabs:G.bool,model:G.object};const{renderMath:de}=e;class pe extends HTMLElement{constructor(){super(),this._model={passages:[]},this._session=null,this._root=null}setLangAttribute(){const e=this._model&&(this._model.language,1)?this._model.language:"",t=e?e.slice(0,2):"en";this.setAttribute("lang",t)}set model(e){this._model=e,this.dispatchEvent(new u(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._render()}_render(){const{passages:e=[]}=this._model;if(this._model.passages.length>0){const t=e.map((e,t)=>({id:t,...e})),r=B.createElement(ce,{tabs:t});this._root||(this._root=J(this)),this._root.render(r),queueMicrotask(()=>{de(this)})}}disconnectedCallback(){this._root&&this._root.unmount()}}export{pe as default};

package/module/index.html

@@ -0,0 +1,21 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/passage@6.0.0-beta.1</title>
+      <script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
+     
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./demo.js"></script> 
+    </head>
+  </html>

package/module/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "@pie-element/passage",
+  "version": "6.0.0-beta.1",
+  "modules": [
+    {
+      "name": "@pie-lib/math-rendering-module",
+      "version": "^4.0.5"
+    },
+    {
+      "name": "@pie-lib/shared-module",
+      "version": "^3.0.5"
+    }
+  ]
+}

package/module/print-demo.js

@@ -0,0 +1,95 @@
+import PrintElement from './print.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  passages: [
+    {
+      teacherInstructions: 'Teacher instructions for first tab',
+      title: 'Hope Is the Thing with Feathers',
+      subtitle: 'from <em>The Complete Poems of Emily Dickinson</em>',
+      author: 'by Emily Dickinson',
+      text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p>',
+    },
+    {
+      title: 'Ineskeen Road, July Evening',
+      text: `The bicycles go by in twos and threes -<br/>
+        There's a dance in Billy Brennan's barn tonight,<br/>
+        And there's the half-talk code of mysteries<br/>
+        And the wink-and-elbow language of delight.<br/>
+        Half-past eight and there is not a spot<br/>
+        Upon a mile of road, no shadow thrown<br/>
+        That might turn out a man or woman, not<br/>
+        A footfall tapping secrecies of stone. <br/>
+        <p/>
+        I have what every poet hates in spite<br/>
+        Of all the solemn talk of contemplation.<br/>
+        Oh, Alexander Selkirk knew the plight<br/>
+        Of being king and government and nation.<br/>
+        A road, a mile of kingdom. I am king<br/>
+        Of banks and stones and every blooming thing.<br/>
+        `,
+    },
+  ],
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'passage-element': '../..',
+  },
+  models: [model('1', 'passage-element')],
+};
+
+// new init - just shows off print!
+
+const init = async () => {
+  console.log('define the element...');
+  await Promise.all(
+    config.models.map(async (m) => {
+      try {
+        const printTag = `${m.element}-print`;
+        if (customElements.get(printTag)) {
+          return true;
+        } else {
+          customElements.define(printTag, PrintElement);
+          await customElements.whenDefined(printTag);
+          return true;
+        }
+      } catch (e) {
+        return false;
+      }
+    })
+  );
+
+  console.log('now apply the model...');
+  config.models.forEach((m) => {
+    const printTag = `${m.element}-print`;
+    const h3s = document.createElement('h3');
+    h3s.textContent = 'student mode';
+    document.body.appendChild(h3s);
+    const de = document.createElement(printTag);
+    document.body.appendChild(de);
+    de.options = {};
+    de.model = m;
+
+    const h3 = document.createElement('h3');
+    h3.textContent = 'instructor mode';
+    document.body.appendChild(h3);
+    const instr = document.createElement(printTag);
+    document.body.appendChild(instr);
+    instr.options = { mode: 'instructor' };
+    instr.model = JSON.parse(JSON.stringify(m));
+  });
+};
+
+init()
+  .then(() => {
+    console.log('ready');
+  })
+  .catch((e) => {
+    console.error(e);
+  });

package/module/print.html

@@ -0,0 +1,18 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/passage@6.0.0-beta.1</title>
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./print-demo.js"></script> 
+    </head>
+    <body></body>
+  </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/passage",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-next.42+bb1f3eb4e",
   "publishConfig": {
     "access": "public"
   },
@@ -14,13 +14,13 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "4.1.0-next.4",
-    "@pie-lib/render-ui": "5.1.0-next.5",
-    "prop-types": "^15.6.1",
+    "@pie-lib/math-rendering": "4.1.1-next.0",
+    "@pie-lib/render-ui": "5.1.1-next.0",
+    "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
-  "gitHead": "052dc31d77fd3f6cb54ec2ac34ed84858e8672c9",
+  "gitHead": "bb1f3eb4e3b5b1cb15024d459ffd6e94bf419712",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },