@pie-element/venn-classification 0.1.1-next.8 → 0.1.1-next.9

package/dist/author/index.js

@@ -1,59 +1,3 @@
-//#region ../../shared/configure-events/dist/index.js
-var _e;
-var _e2;
-var _e3;
-var _e4;
-var _e5;
-var e$3 = (_e = class e extends CustomEvent {
-	constructor(t, n = !1) {
-		super(e.TYPE, {
-			bubbles: !0,
-			detail: {
-				update: t,
-				reset: n
-			}
-		}), this.update = t, this.reset = n;
-	}
-}, _e.TYPE = "model.updated", _e);
-_e2 = class e extends CustomEvent {
-	constructor(t, n) {
-		super(e.TYPE, {
-			bubbles: !0,
-			detail: {
-				src: t,
-				done: n
-			}
-		}), this.src = t, this.done = n;
-	}
-}, _e2.TYPE = "delete.image";
-_e3 = class e extends CustomEvent {
-	constructor(t) {
-		super(e.TYPE, {
-			bubbles: !0,
-			detail: t
-		}), this.handler = t;
-	}
-}, _e3.TYPE = "insert.image";
-_e4 = class e extends CustomEvent {
-	constructor(t, n) {
-		super(e.TYPE, {
-			bubbles: !0,
-			detail: {
-				src: t,
-				done: n
-			}
-		}), this.src = t, this.done = n;
-	}
-}, _e4.TYPE = "delete.sound";
-_e5 = class e extends CustomEvent {
-	constructor(t) {
-		super(e.TYPE, {
-			bubbles: !0,
-			detail: t
-		}), this.handler = t;
-	}
-}, _e5.TYPE = "insert.sound";
-//#endregion
 //#region ../../../node_modules/.bun/svelte@5.57.0/node_modules/svelte/src/internal/disclose-version.js
 if (typeof window !== "undefined") {
 	var _window$__svelte, _window;
@@ -5528,6 +5472,177 @@ function create_custom_element(Component, props_definition, slots, exports, shad
 	return Class;
 }
 //#endregion
+//#region ../../shared/configure-events/dist/index.js
+var _e;
+var _e2;
+var _e3;
+var _e4;
+var _e5;
+var e$3 = (_e = class e extends CustomEvent {
+	constructor(t, n = !1) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: {
+				update: t,
+				reset: n
+			}
+		}), this.update = t, this.reset = n;
+	}
+}, _e.TYPE = "model.updated", _e);
+_e2 = class e extends CustomEvent {
+	constructor(t, n) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: {
+				src: t,
+				done: n
+			}
+		}), this.src = t, this.done = n;
+	}
+}, _e2.TYPE = "delete.image";
+_e3 = class e extends CustomEvent {
+	constructor(t) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: t
+		}), this.handler = t;
+	}
+}, _e3.TYPE = "insert.image";
+_e4 = class e extends CustomEvent {
+	constructor(t, n) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: {
+				src: t,
+				done: n
+			}
+		}), this.src = t, this.done = n;
+	}
+}, _e4.TYPE = "delete.sound";
+_e5 = class e extends CustomEvent {
+	constructor(t) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: t
+		}), this.handler = t;
+	}
+}, _e5.TYPE = "insert.sound";
+//#endregion
+//#region ../../lib-svelte/config-ui-svelte/dist/index.js
+var t$3 = /* @__PURE__ */ from_html("<aside class=\"pie-config-layout-settings svelte-9dr0jr\" aria-label=\"Settings\"><!></aside>");
+var n$1 = /* @__PURE__ */ from_html("<div class=\"pie-config-layout svelte-9dr0jr\"><div class=\"pie-config-layout-contents svelte-9dr0jr\"><div class=\"pie-config-layout-design svelte-9dr0jr\"><!></div> <!></div></div>");
+var r$2 = {
+	hash: "svelte-9dr0jr",
+	code: ".pie-config-layout.svelte-9dr0jr {container-type:inline-size;}.pie-config-layout-contents.svelte-9dr0jr {display:flex;flex-direction:column;gap:16px;}.pie-config-layout-design.svelte-9dr0jr {flex:1 1 auto;min-width:0;}\n\n  @container (min-width: 1135px) {.pie-config-layout-contents.svelte-9dr0jr {flex-direction:row;align-items:flex-start;}.pie-config-layout-settings.svelte-9dr0jr {flex:0 0 300px;position:sticky;top:0;}\n  }"
+};
+function i$1(i, a) {
+	append_styles$1(i, r$2);
+	let o = prop(a, "hideSettings", 3, !1);
+	var s = n$1(), c = child(s), l = child(c);
+	snippet(child(l), () => a.children), reset$1(l);
+	var d = sibling(l, 2), f = (n) => {
+		var r = t$3();
+		snippet(child(r), () => a.settings), reset$1(r), append(n, r);
+	};
+	if_block(d, (e) => {
+		a.settings && !o() && e(f);
+	}), reset$1(c), reset$1(s), append(i, s);
+}
+var a$1 = (e) => typeof e == "object" && !!e && !Array.isArray(e);
+function o$1(e, t) {
+	if (!a$1(t)) return e;
+	let n = { ...e };
+	for (let [r, i] of Object.entries(t)) {
+		let t = e[r];
+		n[r] = a$1(t) && a$1(i) ? {
+			...t,
+			...i
+		} : i;
+	}
+	return n;
+}
+function s$1(e) {
+	return a$1(e) ? Object.values(e).some((e) => a$1(e) && (e.settings === !0 || s$1(e))) : !1;
+}
+var c$1 = (e, t = !1, n = !1) => ({
+	type: "toggle",
+	label: e,
+	isConfigProperty: t,
+	disabled: n
+});
+var l = (e, t, n = !1) => ({
+	type: "radio",
+	label: e,
+	choices: t.map((e) => typeof e == "string" ? {
+		label: e,
+		value: e
+	} : e),
+	isConfigProperty: n
+});
+function u(e, t) {
+	let n = e;
+	for (let e of t.split(".")) {
+		if (!a$1(n)) return;
+		n = n[e];
+	}
+	return n;
+}
+function d(e, t, n) {
+	let [r, ...i] = t.split("."), o = e[r], s = i.length === 0 ? n : d(a$1(o) ? o : {}, i.join("."), n);
+	return {
+		...e,
+		[r]: s
+	};
+}
+var f = /* @__PURE__ */ from_html("<label class=\"pie-settings-toggle svelte-1ang3sw\"><span> </span> <input type=\"checkbox\" role=\"switch\" class=\"svelte-1ang3sw\"/></label>");
+var p = /* @__PURE__ */ from_html("<label class=\"pie-settings-choice-row svelte-1ang3sw\"><input type=\"radio\" class=\"svelte-1ang3sw\"/> <span> </span></label>");
+var m = /* @__PURE__ */ from_html("<fieldset class=\"pie-settings-choice svelte-1ang3sw\"><legend class=\"svelte-1ang3sw\"> </legend> <!></fieldset>");
+var h$1 = /* @__PURE__ */ from_html("<fieldset class=\"pie-settings-group svelte-1ang3sw\"><legend class=\"pie-settings-group-name svelte-1ang3sw\"> </legend> <!></fieldset>");
+var g = /* @__PURE__ */ from_html("<div class=\"pie-settings-panel svelte-1ang3sw\"></div>");
+var _ = {
+	hash: "svelte-1ang3sw",
+	code: ".pie-settings-panel.svelte-1ang3sw {display:flex;flex-direction:column;gap:16px;padding:16px;border:1px solid var(--pie-border-light, #ccc);border-radius:4px;color:var(--pie-text, #212121);}fieldset.svelte-1ang3sw {margin:0;padding:0;border:0;min-width:0;}.pie-settings-group.svelte-1ang3sw {display:flex;flex-direction:column;gap:8px;}.pie-settings-group-name.svelte-1ang3sw {margin-bottom:8px;font-weight:600;}.pie-settings-toggle.svelte-1ang3sw {display:flex;align-items:center;justify-content:space-between;gap:12px;}.pie-settings-choice.svelte-1ang3sw legend:where(.svelte-1ang3sw) {margin-bottom:4px;}.pie-settings-choice-row.svelte-1ang3sw {display:flex;align-items:center;gap:8px;}input.svelte-1ang3sw {accent-color:var(--pie-primary, #3f51b5);}input.svelte-1ang3sw:focus-visible {outline:2px solid var(--pie-focus-outline, #1a73e8);outline-offset:2px;}"
+};
+function v(t, n) {
+	push(n, !0), append_styles$1(t, _);
+	let r = prop(n, "configuration", 19, () => ({})), i = Math.random().toString(36).slice(2, 10), a = /* @__PURE__ */ user_derived(() => Object.entries(n.groups).map(([e, t]) => [e, Object.entries(t).filter((e) => !!e[1])]).filter(([, e]) => e.length > 0)), o = (e, t) => u(t.isConfigProperty ? r() : n.model, e);
+	function s(e, t, i) {
+		t.isConfigProperty ? n.onChangeConfiguration?.(d(r(), e, i), e) : n.onChangeModel(d(n.model, e, i), e);
+	}
+	var c = g();
+	each(c, 21, () => get$1(a), ([e, t]) => e, (t, n) => {
+		var r = /* @__PURE__ */ user_derived(() => to_array(get$1(n), 2));
+		let a = () => get$1(r)[0], c = () => get$1(r)[1];
+		var l = h$1(), u = child(l), d = only_child(u, !0);
+		each(sibling(u, 2), 17, c, ([e, t]) => e, (t, n) => {
+			var r = /* @__PURE__ */ user_derived(() => to_array(get$1(n), 2));
+			let a = () => get$1(r)[0], c = () => get$1(r)[1];
+			var l = comment(), u = first_child(l), d = (t) => {
+				var n = f(), r = child(n), i = only_child(r, !0), l = sibling(r, 2);
+				remove_input_defaults(l), reset$1(n), template_effect((t) => {
+					set_text(i, c().label), set_checked(l, t), l.disabled = c().disabled;
+				}, [() => !!o(a(), c())]), delegated("change", l, (e) => s(a(), c(), e.currentTarget.checked)), append(t, n);
+			}, h = (t) => {
+				var n = m(), r = child(n), l = only_child(r, !0);
+				each(sibling(r, 2), 17, () => c().choices, (e) => e.value, (t, n) => {
+					var r = p(), l = child(r);
+					remove_input_defaults(l);
+					var d = only_child(sibling(l, 2), !0);
+					reset$1(r), template_effect((t) => {
+						set_attribute(l, "name", `${i}-${a()}`), set_value(l, get$1(n).value), set_checked(l, t), set_text(d, get$1(n).label);
+					}, [() => o(a(), c()) === get$1(n).value]), delegated("change", l, () => s(a(), c(), get$1(n).value)), append(t, r);
+				}), reset$1(n), template_effect(() => set_text(l, c().label)), append(t, n);
+			};
+			if_block(u, (e) => {
+				c().type === "toggle" ? e(d) : c().type === "radio" && e(h, 1);
+			}), append(t, l);
+		}), reset$1(l), template_effect(() => set_text(d, a())), append(t, l);
+	}), reset$1(c), append(t, c), pop();
+}
+delegate(["change"]);
+var y = i$1;
+var b = v;
+//#endregion
 //#region ../../../node_modules/.bun/@tiptap+core@3.31.3+ef29727eaaf819d3/node_modules/@tiptap/core/dist/rolldown-runtime-D7D4PA-g.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -35893,7 +36008,12 @@ var defaults_default = {
 		scoringPolicy: {
 			label: "Scoring policy",
 			settings: true
-		}
+		},
+		teacherInstructions: {
+			label: "Teacher Instructions",
+			settings: true
+		},
+		settingsPanelDisabled: false
 	}
 };
 //#endregion
@@ -36037,8 +36157,8 @@ var root_8$1 = /* @__PURE__ */ from_svg(`<circle fill="none" stroke="#1e293b"></
 var root_9$1 = /* @__PURE__ */ from_svg(`<text font-weight="600" fill="#0f172a"> </text>`);
 var root_10$1 = /* @__PURE__ */ from_html(`<div class="region-aria svelte-gkcqor" role="region"></div>`);
 var root_11$1 = /* @__PURE__ */ from_html(`<div class="tile-wrapper svelte-gkcqor"><!></div>`);
-var root_12 = /* @__PURE__ */ from_html(`<div class="venn-diagram svelte-gkcqor"><svg preserveAspectRatio="xMidYMid meet" aria-hidden="true" class="svelte-gkcqor"><defs><mask maskUnits="userSpaceOnUse" x="0" y="0"><rect x="0" y="0" fill="black"></rect><circle fill="white"></circle><circle fill="black"></circle></mask><mask maskUnits="userSpaceOnUse" x="0" y="0"><rect x="0" y="0" fill="black"></rect><circle fill="white"></circle><circle fill="black"></circle></mask><clipPath clipPathUnits="userSpaceOnUse"><circle></circle></clipPath><mask maskUnits="userSpaceOnUse" x="0" y="0"><rect x="0" y="0" fill="white"></rect><circle fill="black"></circle><circle fill="black"></circle></mask></defs><rect fill="#ffffff" stroke="#cbd5e1"></rect><!><!><!><!><!><!><!><line stroke="#cbd5e1"></line></svg> <div class="region-labels svelte-gkcqor" aria-hidden="false"></div> <div class="placed-tiles svelte-gkcqor"></div></div> <!>`, 1);
-var root_13 = /* @__PURE__ */ from_html(`<div class="drag-ghost svelte-gkcqor"><!></div>`);
+var root_12$1 = /* @__PURE__ */ from_html(`<div class="venn-diagram svelte-gkcqor"><svg preserveAspectRatio="xMidYMid meet" aria-hidden="true" class="svelte-gkcqor"><defs><mask maskUnits="userSpaceOnUse" x="0" y="0"><rect x="0" y="0" fill="black"></rect><circle fill="white"></circle><circle fill="black"></circle></mask><mask maskUnits="userSpaceOnUse" x="0" y="0"><rect x="0" y="0" fill="black"></rect><circle fill="white"></circle><circle fill="black"></circle></mask><clipPath clipPathUnits="userSpaceOnUse"><circle></circle></clipPath><mask maskUnits="userSpaceOnUse" x="0" y="0"><rect x="0" y="0" fill="white"></rect><circle fill="black"></circle><circle fill="black"></circle></mask></defs><rect fill="#ffffff" stroke="#cbd5e1"></rect><!><!><!><!><!><!><!><line stroke="#cbd5e1"></line></svg> <div class="region-labels svelte-gkcqor" aria-hidden="false"></div> <div class="placed-tiles svelte-gkcqor"></div></div> <!>`, 1);
+var root_13$1 = /* @__PURE__ */ from_html(`<div class="drag-ghost svelte-gkcqor"><!></div>`);
 var root_14 = /* @__PURE__ */ from_html(`<div class="venn-root svelte-gkcqor"><!> <!> <!> <!> <!> <div class="sr-only svelte-gkcqor" aria-live="polite" aria-atomic="true"></div></div>`);
 var $$css$1 = {
 	hash: "svelte-gkcqor",
@@ -36438,7 +36558,7 @@ function VennClassification($$anchor, $$props) {
 		append($$anchor, div_2);
 	};
 	var alternate_1 = ($$anchor) => {
-		var fragment_1 = root_12();
+		var fragment_1 = root_12$1();
 		var div_3 = first_child(fragment_1);
 		let styles;
 		var svg_2 = child(div_3);
@@ -36760,7 +36880,7 @@ function VennClassification($$anchor, $$props) {
 	});
 	var node_17 = sibling(node_4, 2);
 	var consequent_10 = ($$anchor) => {
-		var div_8 = root_13();
+		var div_8 = root_13$1();
 		Tile(child(div_8), {
 			get id() {
 				return get$1(draggedTile).id;
@@ -36802,52 +36922,55 @@ create_custom_element(VennClassification, {
 }, [], []);
 //#endregion
 //#region src/author/Author.svelte
-var root = /* @__PURE__ */ from_html(`<label class="circle-label-row svelte-13ppn6m"><span></span> <input type="text" class="svelte-13ppn6m"/></label>`);
-var root_1 = /* @__PURE__ */ from_html(`<div class="hint svelte-13ppn6m">Add at least one tile; each tile needs a correct region and either a label (text or simple HTML) or an
+var root = /* @__PURE__ */ from_html(`<div class="field-group svelte-13ppn6m"><div class="field-header svelte-13ppn6m"> </div> <!></div>`);
+var root_1 = /* @__PURE__ */ from_html(`<label class="circle-label-row svelte-13ppn6m"><span></span> <input type="text" class="svelte-13ppn6m"/></label>`);
+var root_2 = /* @__PURE__ */ from_html(`<div class="hint svelte-13ppn6m">Add at least one tile; each tile needs a correct region and either a label (text or simple HTML) or an
           image URL plus short alt text.</div>`);
-var root_2 = /* @__PURE__ */ from_html(`<div class="tile-field-full svelte-13ppn6m"><button type="button" class="btn-ghost svelte-13ppn6m">Remove image</button></div>`);
-var root_3 = /* @__PURE__ */ from_html(`<li class="tile-row svelte-13ppn6m"><div class="tile-row-header svelte-13ppn6m"><div class="tile-inputs svelte-13ppn6m"><label class="svelte-13ppn6m"><span>ID</span> <input type="text" class="svelte-13ppn6m"/></label> <label class="label-input svelte-13ppn6m"><span>Label</span> <input type="text" class="svelte-13ppn6m"/></label> <label class="label-input tile-field-full svelte-13ppn6m"><span>Image URL (optional)</span> <input type="text" placeholder="https://… or data:image/…" class="svelte-13ppn6m"/></label> <label class="label-input tile-field-full svelte-13ppn6m"><span>Image alt (required if image URL is set)</span> <input type="text" class="svelte-13ppn6m"/></label> <!></div> <div class="tile-actions svelte-13ppn6m"><button type="button" class="btn-ghost svelte-13ppn6m" aria-label="Move up">↑</button> <button type="button" class="btn-ghost svelte-13ppn6m" aria-label="Move down">↓</button> <button type="button" class="btn-ghost danger svelte-13ppn6m" aria-label="Remove">✕</button></div></div> <div class="tile-region svelte-13ppn6m"><div class="region-header svelte-13ppn6m">Correct region</div> <!></div></li>`);
-var root_4 = /* @__PURE__ */ from_html(`<label class="override-row svelte-13ppn6m"><span class="override-key svelte-13ppn6m"> </span> <input type="text" class="svelte-13ppn6m"/></label>`);
-var root_5 = /* @__PURE__ */ from_html(`<div class="preview-diagram svelte-13ppn6m"><!></div>`);
-var root_6 = /* @__PURE__ */ from_html(`<p class="hint preview-diagram-placeholder svelte-13ppn6m">Add at least one tile to see the diagram.</p>`);
-var root_7 = /* @__PURE__ */ from_html(`<p class="hint preview-diagram-placeholder svelte-13ppn6m">Exactly two circles are required for the preview.</p>`);
-var root_8 = /* @__PURE__ */ from_html(`<img alt="" class="preview-thumb svelte-13ppn6m" aria-hidden="true"/>`);
-var root_9 = /* @__PURE__ */ from_html(`<li class="svelte-13ppn6m"><span class="preview-tile svelte-13ppn6m"><!> </span> <span class="preview-arrow svelte-13ppn6m">→</span> <span class="preview-region svelte-13ppn6m"> </span></li>`);
-var root_10 = /* @__PURE__ */ from_html(`<div class="preview-list-heading svelte-13ppn6m">Correct regions</div> <ol class="preview-list svelte-13ppn6m"></ol>`, 1);
-var root_11 = /* @__PURE__ */ from_html(`<div class="venn-author svelte-13ppn6m"><div class="author-shell svelte-13ppn6m"><div class="editor-column svelte-13ppn6m"><div class="field-group svelte-13ppn6m"><label class="field-header svelte-13ppn6m"><input type="checkbox" class="svelte-13ppn6m"/> <span>Prompt</span></label> <!></div> <div class="field-group svelte-13ppn6m"><div class="field-header svelte-13ppn6m">Circles</div> <p class="hint circle-count-note svelte-13ppn6m">2 circles (4 regions).</p> <div class="circle-labels svelte-13ppn6m"></div></div> <div class="field-group svelte-13ppn6m"><div class="field-header-row svelte-13ppn6m"><span class="field-header svelte-13ppn6m">Tiles</span> <button type="button" class="btn-add svelte-13ppn6m">+ Add tile</button></div> <!> <ul class="tile-list svelte-13ppn6m"></ul></div> <div class="field-group svelte-13ppn6m"><div class="field-header svelte-13ppn6m">Scoring policy</div> <label class="radio-row svelte-13ppn6m"><input type="radio" name="scoring" value="partialPerTile"/> <span>Partial credit per tile</span></label> <label class="radio-row svelte-13ppn6m"><input type="radio" name="scoring" value="allOrNothing"/> <span>All or nothing</span></label></div> <details class="field-group svelte-13ppn6m"><summary class="field-header svelte-13ppn6m">Region labels (advanced)</summary> <p class="hint svelte-13ppn6m">Override the auto-composed region labels that delivery uses for aria-labels and visible region chrome.</p> <!></details></div> <button type="button" class="split-gutter svelte-13ppn6m" role="slider" aria-orientation="vertical" aria-label="Resize editor and preview panels"></button> <div class="preview-column svelte-13ppn6m"><div class="preview-header svelte-13ppn6m">Preview</div> <div class="preview-note svelte-13ppn6m">Live diagram with each tile in its authored <em>correct region</em>. Drag the vertical handle (or use
-      arrow keys when it is focused) to change the editor / preview split.</div> <div class="preview-summary svelte-13ppn6m"><div><strong>Circles:</strong> </div> <div><strong>Scoring:</strong> </div> <div><strong>Tiles:</strong> </div></div> <!> <!></div></div></div>`);
+var root_3 = /* @__PURE__ */ from_html(`<div class="tile-field-full svelte-13ppn6m"><button type="button" class="btn-ghost svelte-13ppn6m">Remove image</button></div>`);
+var root_4 = /* @__PURE__ */ from_html(`<li class="tile-row svelte-13ppn6m"><div class="tile-row-header svelte-13ppn6m"><div class="tile-inputs svelte-13ppn6m"><label class="svelte-13ppn6m"><span>ID</span> <input type="text" class="svelte-13ppn6m"/></label> <label class="label-input svelte-13ppn6m"><span>Label</span> <input type="text" class="svelte-13ppn6m"/></label> <label class="label-input tile-field-full svelte-13ppn6m"><span>Image URL (optional)</span> <input type="text" placeholder="https://… or data:image/…" class="svelte-13ppn6m"/></label> <label class="label-input tile-field-full svelte-13ppn6m"><span>Image alt (required if image URL is set)</span> <input type="text" class="svelte-13ppn6m"/></label> <!></div> <div class="tile-actions svelte-13ppn6m"><button type="button" class="btn-ghost svelte-13ppn6m" aria-label="Move up">↑</button> <button type="button" class="btn-ghost svelte-13ppn6m" aria-label="Move down">↓</button> <button type="button" class="btn-ghost danger svelte-13ppn6m" aria-label="Remove">✕</button></div></div> <div class="tile-region svelte-13ppn6m"><div class="region-header svelte-13ppn6m">Correct region</div> <!></div></li>`);
+var root_5 = /* @__PURE__ */ from_html(`<label class="override-row svelte-13ppn6m"><span class="override-key svelte-13ppn6m"> </span> <input type="text" class="svelte-13ppn6m"/></label>`);
+var root_6 = /* @__PURE__ */ from_html(`<div class="preview-diagram svelte-13ppn6m"><!></div>`);
+var root_7 = /* @__PURE__ */ from_html(`<p class="hint preview-diagram-placeholder svelte-13ppn6m">Add at least one tile to see the diagram.</p>`);
+var root_8 = /* @__PURE__ */ from_html(`<p class="hint preview-diagram-placeholder svelte-13ppn6m">Exactly two circles are required for the preview.</p>`);
+var root_9 = /* @__PURE__ */ from_html(`<img alt="" class="preview-thumb svelte-13ppn6m" aria-hidden="true"/>`);
+var root_10 = /* @__PURE__ */ from_html(`<li class="svelte-13ppn6m"><span class="preview-tile svelte-13ppn6m"><!> </span> <span class="preview-arrow svelte-13ppn6m">→</span> <span class="preview-region svelte-13ppn6m"> </span></li>`);
+var root_11 = /* @__PURE__ */ from_html(`<div class="preview-list-heading svelte-13ppn6m">Correct regions</div> <ol class="preview-list svelte-13ppn6m"></ol>`, 1);
+var root_12 = /* @__PURE__ */ from_html(`<div class="author-shell svelte-13ppn6m"><div class="editor-column svelte-13ppn6m"><!> <!> <div class="field-group svelte-13ppn6m"><div class="field-header svelte-13ppn6m">Circles</div> <p class="hint circle-count-note svelte-13ppn6m">2 circles (4 regions).</p> <div class="circle-labels svelte-13ppn6m"></div></div> <div class="field-group svelte-13ppn6m"><div class="field-header-row svelte-13ppn6m"><span class="field-header svelte-13ppn6m">Tiles</span> <button type="button" class="btn-add svelte-13ppn6m">+ Add tile</button></div> <!> <ul class="tile-list svelte-13ppn6m"></ul></div> <details class="field-group svelte-13ppn6m"><summary class="field-header svelte-13ppn6m">Region labels (advanced)</summary> <p class="hint svelte-13ppn6m">Override the auto-composed region labels that delivery uses for aria-labels and visible region chrome.</p> <!></details></div> <button type="button" class="split-gutter svelte-13ppn6m" role="slider" aria-orientation="vertical" aria-label="Resize editor and preview panels"></button> <div class="preview-column svelte-13ppn6m"><div class="preview-header svelte-13ppn6m">Preview</div> <div class="preview-note svelte-13ppn6m">Live diagram with each tile in its authored <em>correct region</em>. Drag the vertical handle (or use
+      arrow keys when it is focused) to change the editor / preview split.</div> <div class="preview-summary svelte-13ppn6m"><div><strong>Circles:</strong> </div> <div><strong>Scoring:</strong> </div> <div><strong>Tiles:</strong> </div></div> <!> <!></div></div>`);
+var root_13 = /* @__PURE__ */ from_html(`<div class="venn-author svelte-13ppn6m"><!></div>`);
 var $$css = {
 	hash: "svelte-13ppn6m",
-	code: ".venn-author.svelte-13ppn6m {padding:24px;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:#0f172a;box-sizing:border-box;--vc-focus-ring: var(\n      --pie-focus-outline,\n      var(--pie-button-focus-outline, var(--pie-focus-checked-border, #1565c0))\n    );}.author-shell.svelte-13ppn6m {display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;min-height:min(72vh, 720px);max-height:min(85vh, 960px);box-sizing:border-box;}.editor-column.svelte-13ppn6m {display:flex;flex-direction:column;gap:20px;flex-shrink:0;overflow:auto;min-width:0;}.split-gutter.svelte-13ppn6m {flex:0 0 6px;width:6px;margin:0;padding:0;border:none;border-left:1px solid #cbd5e1;border-right:1px solid #cbd5e1;cursor:col-resize;touch-action:none;background:#e2e8f0;align-self:stretch;}.split-gutter.svelte-13ppn6m:hover,\n  .split-gutter.svelte-13ppn6m:focus-visible {background:#cbd5e1;}.split-gutter.svelte-13ppn6m:focus-visible {outline:2px solid var(--vc-focus-ring, #1565c0);outline-offset:2px;}\n  @media (max-width: 900px) {.author-shell.svelte-13ppn6m {flex-direction:column;min-height:unset;max-height:unset;}.editor-column.svelte-13ppn6m {width:100% !important;flex:none;max-width:none;}.split-gutter.svelte-13ppn6m {display:none;}.preview-column.svelte-13ppn6m {flex:none;width:100%;}\n  }.field-group.svelte-13ppn6m {border:1px solid #e2e8f0;border-radius:8px;padding:16px;background:#ffffff;}.field-header.svelte-13ppn6m,\n  .field-header-row.svelte-13ppn6m {display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14px;margin-bottom:12px;color:#0f172a;}.field-header.svelte-13ppn6m input[type='checkbox']:where(.svelte-13ppn6m) {margin-right:8px;}.field-header-row.svelte-13ppn6m {gap:8px;}.btn-add.svelte-13ppn6m {background:#2563eb;color:#ffffff;border:none;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer;}.btn-add.svelte-13ppn6m:hover {background:#1d4ed8;}.btn-ghost.svelte-13ppn6m {background:transparent;border:1px solid #cbd5e1;border-radius:4px;padding:2px 8px;cursor:pointer;font-size:13px;}.btn-ghost.svelte-13ppn6m:hover:not(:disabled) {background:#f1f5f9;}.btn-ghost.svelte-13ppn6m:disabled {opacity:0.4;cursor:not-allowed;}.btn-ghost.danger.svelte-13ppn6m {color:#bf0d00;}.circle-labels.svelte-13ppn6m {display:flex;flex-direction:column;gap:8px;}.circle-count-note.svelte-13ppn6m {margin:0 0 4px 0;}.radio-row.svelte-13ppn6m {display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-top:6px;}.circle-label-row.svelte-13ppn6m {display:grid;grid-template-columns:120px minmax(0, 1fr);align-items:center;gap:8px;font-size:13px;}.circle-label-row.svelte-13ppn6m input:where(.svelte-13ppn6m),\n  .tile-inputs.svelte-13ppn6m input:where(.svelte-13ppn6m),\n  .override-row.svelte-13ppn6m input:where(.svelte-13ppn6m) {padding:6px 8px;border:1px solid #cbd5e1;border-radius:4px;font-size:13px;width:100%;box-sizing:border-box;}.tile-list.svelte-13ppn6m {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}.tile-row.svelte-13ppn6m {border:1px solid #e2e8f0;border-radius:6px;padding:10px 12px;background:#f8fafc;}.tile-row-header.svelte-13ppn6m {display:flex;gap:8px;align-items:center;}.tile-inputs.svelte-13ppn6m {flex:1;display:grid;grid-template-columns:140px 1fr;gap:8px;}.tile-inputs.svelte-13ppn6m label:where(.svelte-13ppn6m) {display:flex;flex-direction:column;gap:2px;font-size:12px;color:#475569;}.tile-inputs.svelte-13ppn6m .tile-field-full:where(.svelte-13ppn6m) {grid-column:1 / -1;}.tile-actions.svelte-13ppn6m {display:flex;gap:4px;}.tile-region.svelte-13ppn6m {margin-top:8px;}.region-header.svelte-13ppn6m {font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;}.override-row.svelte-13ppn6m {display:grid;grid-template-columns:100px minmax(0, 1fr);align-items:center;gap:8px;font-size:13px;margin-top:6px;}.override-key.svelte-13ppn6m {font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:12px;color:#64748b;}.hint.svelte-13ppn6m {font-size:12px;color:#64748b;margin:8px 0;}.preview-column.svelte-13ppn6m {flex:1 1 auto;min-width:0;overflow:auto;border:1px solid #e2e8f0;border-radius:8px;padding:16px;background:#ffffff;}.preview-diagram.svelte-13ppn6m {margin:12px 0 16px 0;max-width:100%;overflow-x:auto;}.preview-diagram.svelte-13ppn6m .venn-root {padding-top:8px;}.preview-list-heading.svelte-13ppn6m {font-size:12px;font-weight:600;color:#475569;margin:8px 0 6px 0;}.preview-diagram-placeholder.svelte-13ppn6m {margin:12px 0;}.preview-header.svelte-13ppn6m {font-weight:600;font-size:14px;margin-bottom:8px;}.preview-note.svelte-13ppn6m {font-size:12px;color:#64748b;margin-bottom:12px;}.preview-summary.svelte-13ppn6m {font-size:13px;line-height:1.5;color:#334155;margin-bottom:10px;}.preview-list.svelte-13ppn6m {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}.preview-list.svelte-13ppn6m li:where(.svelte-13ppn6m) {display:flex;align-items:center;gap:6px;font-size:13px;}.preview-tile.svelte-13ppn6m {display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;padding:2px 6px;color:#1d4ed8;}.preview-thumb.svelte-13ppn6m {width:22px;height:22px;object-fit:contain;flex-shrink:0;}.preview-arrow.svelte-13ppn6m {color:#94a3b8;}.preview-region.svelte-13ppn6m {color:#0f172a;}"
+	code: ".venn-author.svelte-13ppn6m {padding:24px;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:#0f172a;box-sizing:border-box;--vc-focus-ring: var(\n      --pie-focus-outline,\n      var(--pie-button-focus-outline, var(--pie-focus-checked-border, #1565c0))\n    );}.author-shell.svelte-13ppn6m {display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;min-height:min(72vh, 720px);max-height:min(85vh, 960px);box-sizing:border-box;}.editor-column.svelte-13ppn6m {display:flex;flex-direction:column;gap:20px;flex-shrink:0;overflow:auto;min-width:0;}.split-gutter.svelte-13ppn6m {flex:0 0 6px;width:6px;margin:0;padding:0;border:none;border-left:1px solid #cbd5e1;border-right:1px solid #cbd5e1;cursor:col-resize;touch-action:none;background:#e2e8f0;align-self:stretch;}.split-gutter.svelte-13ppn6m:hover,\n  .split-gutter.svelte-13ppn6m:focus-visible {background:#cbd5e1;}.split-gutter.svelte-13ppn6m:focus-visible {outline:2px solid var(--vc-focus-ring, #1565c0);outline-offset:2px;}\n  @media (max-width: 900px) {.author-shell.svelte-13ppn6m {flex-direction:column;min-height:unset;max-height:unset;}.editor-column.svelte-13ppn6m {width:100% !important;flex:none;max-width:none;}.split-gutter.svelte-13ppn6m {display:none;}.preview-column.svelte-13ppn6m {flex:none;width:100%;}\n  }.field-group.svelte-13ppn6m {border:1px solid #e2e8f0;border-radius:8px;padding:16px;background:#ffffff;}.field-header.svelte-13ppn6m,\n  .field-header-row.svelte-13ppn6m {display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14px;margin-bottom:12px;color:#0f172a;}.field-header-row.svelte-13ppn6m {gap:8px;}.btn-add.svelte-13ppn6m {background:#2563eb;color:#ffffff;border:none;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer;}.btn-add.svelte-13ppn6m:hover {background:#1d4ed8;}.btn-ghost.svelte-13ppn6m {background:transparent;border:1px solid #cbd5e1;border-radius:4px;padding:2px 8px;cursor:pointer;font-size:13px;}.btn-ghost.svelte-13ppn6m:hover:not(:disabled) {background:#f1f5f9;}.btn-ghost.svelte-13ppn6m:disabled {opacity:0.4;cursor:not-allowed;}.btn-ghost.danger.svelte-13ppn6m {color:#bf0d00;}.circle-labels.svelte-13ppn6m {display:flex;flex-direction:column;gap:8px;}.circle-count-note.svelte-13ppn6m {margin:0 0 4px 0;}.circle-label-row.svelte-13ppn6m {display:grid;grid-template-columns:120px minmax(0, 1fr);align-items:center;gap:8px;font-size:13px;}.circle-label-row.svelte-13ppn6m input:where(.svelte-13ppn6m),\n  .tile-inputs.svelte-13ppn6m input:where(.svelte-13ppn6m),\n  .override-row.svelte-13ppn6m input:where(.svelte-13ppn6m) {padding:6px 8px;border:1px solid #cbd5e1;border-radius:4px;font-size:13px;width:100%;box-sizing:border-box;}.tile-list.svelte-13ppn6m {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}.tile-row.svelte-13ppn6m {border:1px solid #e2e8f0;border-radius:6px;padding:10px 12px;background:#f8fafc;}.tile-row-header.svelte-13ppn6m {display:flex;gap:8px;align-items:center;}.tile-inputs.svelte-13ppn6m {flex:1;display:grid;grid-template-columns:140px 1fr;gap:8px;}.tile-inputs.svelte-13ppn6m label:where(.svelte-13ppn6m) {display:flex;flex-direction:column;gap:2px;font-size:12px;color:#475569;}.tile-inputs.svelte-13ppn6m .tile-field-full:where(.svelte-13ppn6m) {grid-column:1 / -1;}.tile-actions.svelte-13ppn6m {display:flex;gap:4px;}.tile-region.svelte-13ppn6m {margin-top:8px;}.region-header.svelte-13ppn6m {font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;}.override-row.svelte-13ppn6m {display:grid;grid-template-columns:100px minmax(0, 1fr);align-items:center;gap:8px;font-size:13px;margin-top:6px;}.override-key.svelte-13ppn6m {font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:12px;color:#64748b;}.hint.svelte-13ppn6m {font-size:12px;color:#64748b;margin:8px 0;}.preview-column.svelte-13ppn6m {flex:1 1 auto;min-width:0;overflow:auto;border:1px solid #e2e8f0;border-radius:8px;padding:16px;background:#ffffff;}.preview-diagram.svelte-13ppn6m {margin:12px 0 16px 0;max-width:100%;overflow-x:auto;}.preview-diagram.svelte-13ppn6m .venn-root {padding-top:8px;}.preview-list-heading.svelte-13ppn6m {font-size:12px;font-weight:600;color:#475569;margin:8px 0 6px 0;}.preview-diagram-placeholder.svelte-13ppn6m {margin:12px 0;}.preview-header.svelte-13ppn6m {font-weight:600;font-size:14px;margin-bottom:8px;}.preview-note.svelte-13ppn6m {font-size:12px;color:#64748b;margin-bottom:12px;}.preview-summary.svelte-13ppn6m {font-size:13px;line-height:1.5;color:#334155;margin-bottom:10px;}.preview-list.svelte-13ppn6m {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}.preview-list.svelte-13ppn6m li:where(.svelte-13ppn6m) {display:flex;align-items:center;gap:6px;font-size:13px;}.preview-tile.svelte-13ppn6m {display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;padding:2px 6px;color:#1d4ed8;}.preview-thumb.svelte-13ppn6m {width:22px;height:22px;object-fit:contain;flex-shrink:0;}.preview-arrow.svelte-13ppn6m {color:#94a3b8;}.preview-region.svelte-13ppn6m {color:#0f172a;}"
 };
 function Author($$anchor, $$props) {
 	push($$props, true);
 	append_styles$1($$anchor, $$css);
-	let model = prop($$props, "model", 15), onChange = prop($$props, "onChange", 7), onModelChange = prop($$props, "onModelChange", 7);
-	/** The wrapper owns the model and announces the edit; `onChange` serves a component mounted without one. */
+	let model = prop($$props, "model", 7), configuration = prop($$props, "configuration", 7);
+	const config = /* @__PURE__ */ user_derived(() => o$1(defaults_default.configuration, configuration()));
+	const SCORING_POLICY_CHOICES = [{
+		label: "Partial credit per tile",
+		value: "partialPerTile"
+	}, {
+		label: "All or nothing",
+		value: "allOrNothing"
+	}];
+	/**
+	* Keeps the edit as the element's model, so the next edit builds on it,
+	* assigning it through the host: a remount after a detach starts from the
+	* host's property. Announces it as a bubbling `model.updated` for the player
+	* listening at its root.
+	*/
 	function emit(next) {
-		if (onModelChange()) onModelChange()(next);
-		else {
-			model(next);
-			onChange()?.(next);
-		}
+		$$props.$$host.model = next;
+		$$props.$$host.dispatchEvent(new e$3(next));
 	}
 	/**
-	* The model with the fields this form edits filled in. Every other field,
-	* `id` and `element` included, passes through untouched: the player owns those
-	* two, and an edit must not drop what the form does not show.
+	* The model with the controller's defaults filled in. Every other field, `id`
+	* and `element` included, passes through untouched: the player owns those two,
+	* and an edit must not drop what the form does not show.
 	*/
 	function safeModel() {
-		const m = model() || {};
-		return {
-			...m,
-			prompt: m.prompt ?? "",
-			promptEnabled: m.promptEnabled !== false,
-			circles: Array.isArray(m.circles) && m.circles.length > 0 ? m.circles : [{ label: "Set A" }, { label: "Set B" }],
-			tiles: Array.isArray(m.tiles) ? m.tiles : [],
-			regionLabels: m.regionLabels ?? {},
-			scoringPolicy: m.scoringPolicy ?? "partialPerTile"
-		};
+		return createDefaultModel(model() || void 0);
 	}
 	function update(patch) {
 		emit({
@@ -36858,9 +36981,6 @@ function Author($$anchor, $$props) {
 	function onPromptChange(html) {
 		update({ prompt: html });
 	}
-	function setPromptEnabled(enabled) {
-		update({ promptEnabled: enabled });
-	}
 	function setCircleLabel(idx, label) {
 		update({ circles: safeModel().circles.map((c, i) => i === idx ? {
 			...c,
@@ -36931,9 +37051,6 @@ function Author($$anchor, $$props) {
 			correctRegion: normalizeRegion(region)
 		} : t) });
 	}
-	function setScoringPolicy(policy) {
-		update({ scoringPolicy: policy });
-	}
 	function setRegionLabelOverride(key, label) {
 		const next = { ...safeModel().regionLabels || {} };
 		if (label.trim().length === 0) delete next[key];
@@ -37038,278 +37155,321 @@ function Author($$anchor, $$props) {
 			model($$value);
 			flushSync();
 		},
-		get onChange() {
-			return onChange();
-		},
-		set onChange($$value) {
-			onChange($$value);
-			flushSync();
-		},
-		get onModelChange() {
-			return onModelChange();
+		get configuration() {
+			return configuration();
 		},
-		set onModelChange($$value) {
-			onModelChange($$value);
+		set configuration($$value) {
+			configuration($$value);
 			flushSync();
 		}
 	};
-	var div = root_11();
-	var div_1 = child(div);
-	var div_2 = child(div_1);
-	let styles;
-	var div_3 = child(div_2);
-	var label_1 = child(div_3);
-	var input = child(label_1);
-	remove_input_defaults(input);
-	next(2);
-	reset$1(label_1);
-	var node = sibling(label_1, 2);
-	var consequent = ($$anchor) => {
-		{
-			let $0 = /* @__PURE__ */ user_derived(() => get$1(m).prompt || "");
-			EditableHtml($$anchor, {
-				get markup() {
-					return get$1($0);
-				},
-				onChange: onPromptChange,
-				placeholder: "Enter a prompt for the Venn classification question...",
-				ariaLabel: "Prompt"
-			});
-		}
-	};
-	if_block(node, ($$render) => {
-		if (get$1(m).promptEnabled !== false) $$render(consequent);
-	});
-	reset$1(div_3);
-	var div_4 = sibling(div_3, 2);
-	var div_5 = sibling(child(div_4), 4);
-	each(div_5, 21, () => get$1(m).circles, index, ($$anchor, circle, idx) => {
-		var label_2 = root();
-		var span = child(label_2);
-		span.textContent = `Circle ${idx + 1} label`;
-		var input_1 = sibling(span, 2);
-		remove_input_defaults(input_1);
-		reset$1(label_2);
-		template_effect(() => set_value(input_1, get$1(circle).label));
-		delegated("input", input_1, (e) => setCircleLabel(idx, e.currentTarget.value));
-		append($$anchor, label_2);
-	});
-	reset$1(div_5);
-	reset$1(div_4);
-	var div_6 = sibling(div_4, 2);
-	var div_7 = child(div_6);
-	var button = sibling(child(div_7), 2);
-	reset$1(div_7);
-	var node_1 = sibling(div_7, 2);
-	var consequent_1 = ($$anchor) => {
-		append($$anchor, root_1());
-	};
-	if_block(node_1, ($$render) => {
-		if (get$1(m).tiles.length === 0) $$render(consequent_1);
-	});
-	var ul = sibling(node_1, 2);
-	each(ul, 21, () => get$1(m).tiles, index, ($$anchor, tile, idx) => {
-		var li = root_3();
-		var div_9 = child(li);
-		var div_10 = child(div_9);
-		var label_3 = child(div_10);
-		var input_2 = sibling(child(label_3), 2);
-		remove_input_defaults(input_2);
-		reset$1(label_3);
-		var label_4 = sibling(label_3, 2);
-		var input_3 = sibling(child(label_4), 2);
-		remove_input_defaults(input_3);
-		reset$1(label_4);
-		var label_5 = sibling(label_4, 2);
-		var input_4 = sibling(child(label_5), 2);
-		remove_input_defaults(input_4);
-		reset$1(label_5);
-		var label_6 = sibling(label_5, 2);
-		var input_5 = sibling(child(label_6), 2);
-		remove_input_defaults(input_5);
-		reset$1(label_6);
-		var node_2 = sibling(label_6, 2);
-		var consequent_2 = ($$anchor) => {
-			var div_11 = root_2();
-			delegated("click", only_child(div_11), () => clearTileImage(idx));
-			append($$anchor, div_11);
+	var div = root_13();
+	var node = child(div);
+	{
+		const settings = ($$anchor) => {
+			{
+				let $0 = /* @__PURE__ */ user_derived(() => ({
+					Settings: { promptEnabled: get$1(config).prompt?.settings && c$1(get$1(config).prompt.label) },
+					Properties: {
+						teacherInstructionsEnabled: get$1(config).teacherInstructions?.settings && c$1(get$1(config).teacherInstructions.label),
+						scoringPolicy: get$1(config).scoringPolicy?.settings && l(get$1(config).scoringPolicy.label, SCORING_POLICY_CHOICES)
+					}
+				}));
+				b($$anchor, {
+					get model() {
+						return get$1(m);
+					},
+					get configuration() {
+						return get$1(config);
+					},
+					get groups() {
+						return get$1($0);
+					},
+					onChangeModel: (next) => update(next)
+				});
+			}
 		};
-		var d = /* @__PURE__ */ user_derived(() => (get$1(tile).imageUrl ?? "").trim());
-		if_block(node_2, ($$render) => {
-			if (get$1(d)) $$render(consequent_2);
-		});
-		reset$1(div_10);
-		var div_12 = sibling(div_10, 2);
-		var button_2 = child(div_12);
-		button_2.disabled = idx === 0;
-		var button_3 = sibling(button_2, 2);
-		var button_4 = sibling(button_3, 2);
-		reset$1(div_12);
-		reset$1(div_9);
-		var div_13 = sibling(div_9, 2);
-		RegionPicker(sibling(child(div_13), 2), {
-			get circles() {
-				return get$1(m).circles;
+		let $0 = /* @__PURE__ */ user_derived(() => get$1(config).settingsPanelDisabled === true || !s$1(get$1(config)));
+		y(node, {
+			get hideSettings() {
+				return get$1($0);
 			},
-			get regionLabels() {
-				return get$1(m).regionLabels;
-			},
-			get value() {
-				return get$1(tile).correctRegion;
-			},
-			onchange: (region) => setTileRegion(idx, region)
-		});
-		reset$1(div_13);
-		reset$1(li);
-		template_effect(() => {
-			set_value(input_2, get$1(tile).id);
-			set_value(input_3, get$1(tile).label);
-			set_value(input_4, get$1(tile).imageUrl ?? "");
-			set_value(input_5, get$1(tile).imageAlt ?? "");
-			button_3.disabled = idx === get$1(m).tiles.length - 1;
-		});
-		delegated("input", input_2, (e) => setTileId(idx, e.currentTarget.value));
-		delegated("input", input_3, (e) => setTileLabel(idx, e.currentTarget.value));
-		delegated("input", input_4, (e) => setTileImageUrl(idx, e.currentTarget.value));
-		delegated("input", input_5, (e) => setTileImageAlt(idx, e.currentTarget.value));
-		delegated("click", button_2, () => moveTile(idx, -1));
-		delegated("click", button_3, () => moveTile(idx, 1));
-		delegated("click", button_4, () => removeTile(idx));
-		append($$anchor, li);
-	});
-	reset$1(ul);
-	reset$1(div_6);
-	var div_14 = sibling(div_6, 2);
-	var label_7 = sibling(child(div_14), 2);
-	var input_6 = child(label_7);
-	remove_input_defaults(input_6);
-	next(2);
-	reset$1(label_7);
-	var label_8 = sibling(label_7, 2);
-	var input_7 = child(label_8);
-	remove_input_defaults(input_7);
-	next(2);
-	reset$1(label_8);
-	reset$1(div_14);
-	var details = sibling(div_14, 2);
-	each(sibling(child(details), 4), 17, () => get$1(regions), (region) => regionKey(region), ($$anchor, region) => {
-		const key = /* @__PURE__ */ user_derived(() => regionKey(get$1(region)));
-		const placeholder = /* @__PURE__ */ user_derived(() => composeRegionLabel(get$1(m).circles || [], get$1(region)));
-		var label_9 = root_4();
-		var span_1 = child(label_9);
-		var text = only_child(span_1, true);
-		var input_8 = sibling(span_1, 2);
-		remove_input_defaults(input_8);
-		reset$1(label_9);
-		template_effect(() => {
-			set_text(text, get$1(key) || "(outside)");
-			set_attribute(input_8, "placeholder", get$1(placeholder));
-			set_value(input_8, get$1(m).regionLabels?.[get$1(key)] ?? "");
-		});
-		delegated("input", input_8, (e) => setRegionLabelOverride(get$1(key), e.currentTarget.value));
-		append($$anchor, label_9);
-	});
-	reset$1(details);
-	reset$1(div_2);
-	var button_5 = sibling(div_2, 2);
-	set_attribute(button_5, "aria-valuemin", MIN_EDITOR_W);
-	var div_15 = sibling(button_5, 2);
-	var div_16 = sibling(child(div_15), 4);
-	var div_17 = child(div_16);
-	var text_1 = sibling(child(div_17));
-	reset$1(div_17);
-	var div_18 = sibling(div_17, 2);
-	var text_2 = sibling(child(div_18));
-	reset$1(div_18);
-	var div_19 = sibling(div_18, 2);
-	var text_3 = sibling(child(div_19));
-	reset$1(div_19);
-	reset$1(div_16);
-	var node_5 = sibling(div_16, 2);
-	var consequent_3 = ($$anchor) => {
-		var div_20 = root_5();
-		VennClassification(child(div_20), {
-			get model() {
-				return get$1(previewModel);
+			settings,
+			children: ($$anchor, $$slotProps) => {
+				var div_1 = root_12();
+				var div_2 = child(div_1);
+				let styles;
+				var node_1 = child(div_2);
+				var consequent = ($$anchor) => {
+					var div_3 = root();
+					var div_4 = child(div_3);
+					var text = only_child(div_4, true);
+					var node_2 = sibling(div_4, 2);
+					{
+						let $0 = /* @__PURE__ */ user_derived(() => get$1(m).teacherInstructions || "");
+						let $1 = /* @__PURE__ */ user_derived(() => get$1(config).teacherInstructions?.label);
+						EditableHtml(node_2, {
+							get markup() {
+								return get$1($0);
+							},
+							onChange: (html) => update({ teacherInstructions: html }),
+							get ariaLabel() {
+								return get$1($1);
+							}
+						});
+					}
+					reset$1(div_3);
+					template_effect(() => set_text(text, get$1(config).teacherInstructions?.label));
+					append($$anchor, div_3);
+				};
+				if_block(node_1, ($$render) => {
+					if (get$1(m).teacherInstructionsEnabled !== false) $$render(consequent);
+				});
+				var node_3 = sibling(node_1, 2);
+				var consequent_1 = ($$anchor) => {
+					var div_5 = root();
+					var div_6 = child(div_5);
+					var text_1 = only_child(div_6, true);
+					var node_4 = sibling(div_6, 2);
+					{
+						let $0 = /* @__PURE__ */ user_derived(() => get$1(m).prompt || "");
+						let $1 = /* @__PURE__ */ user_derived(() => get$1(config).prompt?.label);
+						EditableHtml(node_4, {
+							get markup() {
+								return get$1($0);
+							},
+							onChange: onPromptChange,
+							placeholder: "Enter a prompt for the Venn classification question...",
+							get ariaLabel() {
+								return get$1($1);
+							}
+						});
+					}
+					reset$1(div_5);
+					template_effect(() => set_text(text_1, get$1(config).prompt?.label));
+					append($$anchor, div_5);
+				};
+				if_block(node_3, ($$render) => {
+					if (get$1(m).promptEnabled !== false) $$render(consequent_1);
+				});
+				var div_7 = sibling(node_3, 2);
+				var div_8 = sibling(child(div_7), 4);
+				each(div_8, 21, () => get$1(m).circles, index, ($$anchor, circle, idx) => {
+					var label_1 = root_1();
+					var span = child(label_1);
+					span.textContent = `Circle ${idx + 1} label`;
+					var input = sibling(span, 2);
+					remove_input_defaults(input);
+					reset$1(label_1);
+					template_effect(() => set_value(input, get$1(circle).label));
+					delegated("input", input, (e) => setCircleLabel(idx, e.currentTarget.value));
+					append($$anchor, label_1);
+				});
+				reset$1(div_8);
+				reset$1(div_7);
+				var div_9 = sibling(div_7, 2);
+				var div_10 = child(div_9);
+				var button = sibling(child(div_10), 2);
+				reset$1(div_10);
+				var node_5 = sibling(div_10, 2);
+				var consequent_2 = ($$anchor) => {
+					append($$anchor, root_2());
+				};
+				if_block(node_5, ($$render) => {
+					if (get$1(m).tiles.length === 0) $$render(consequent_2);
+				});
+				var ul = sibling(node_5, 2);
+				each(ul, 21, () => get$1(m).tiles, index, ($$anchor, tile, idx) => {
+					var li = root_4();
+					var div_12 = child(li);
+					var div_13 = child(div_12);
+					var label_2 = child(div_13);
+					var input_1 = sibling(child(label_2), 2);
+					remove_input_defaults(input_1);
+					reset$1(label_2);
+					var label_3 = sibling(label_2, 2);
+					var input_2 = sibling(child(label_3), 2);
+					remove_input_defaults(input_2);
+					reset$1(label_3);
+					var label_4 = sibling(label_3, 2);
+					var input_3 = sibling(child(label_4), 2);
+					remove_input_defaults(input_3);
+					reset$1(label_4);
+					var label_5 = sibling(label_4, 2);
+					var input_4 = sibling(child(label_5), 2);
+					remove_input_defaults(input_4);
+					reset$1(label_5);
+					var node_6 = sibling(label_5, 2);
+					var consequent_3 = ($$anchor) => {
+						var div_14 = root_3();
+						delegated("click", only_child(div_14), () => clearTileImage(idx));
+						append($$anchor, div_14);
+					};
+					var d = /* @__PURE__ */ user_derived(() => (get$1(tile).imageUrl ?? "").trim());
+					if_block(node_6, ($$render) => {
+						if (get$1(d)) $$render(consequent_3);
+					});
+					reset$1(div_13);
+					var div_15 = sibling(div_13, 2);
+					var button_2 = child(div_15);
+					button_2.disabled = idx === 0;
+					var button_3 = sibling(button_2, 2);
+					var button_4 = sibling(button_3, 2);
+					reset$1(div_15);
+					reset$1(div_12);
+					var div_16 = sibling(div_12, 2);
+					RegionPicker(sibling(child(div_16), 2), {
+						get circles() {
+							return get$1(m).circles;
+						},
+						get regionLabels() {
+							return get$1(m).regionLabels;
+						},
+						get value() {
+							return get$1(tile).correctRegion;
+						},
+						onchange: (region) => setTileRegion(idx, region)
+					});
+					reset$1(div_16);
+					reset$1(li);
+					template_effect(() => {
+						set_value(input_1, get$1(tile).id);
+						set_value(input_2, get$1(tile).label);
+						set_value(input_3, get$1(tile).imageUrl ?? "");
+						set_value(input_4, get$1(tile).imageAlt ?? "");
+						button_3.disabled = idx === get$1(m).tiles.length - 1;
+					});
+					delegated("input", input_1, (e) => setTileId(idx, e.currentTarget.value));
+					delegated("input", input_2, (e) => setTileLabel(idx, e.currentTarget.value));
+					delegated("input", input_3, (e) => setTileImageUrl(idx, e.currentTarget.value));
+					delegated("input", input_4, (e) => setTileImageAlt(idx, e.currentTarget.value));
+					delegated("click", button_2, () => moveTile(idx, -1));
+					delegated("click", button_3, () => moveTile(idx, 1));
+					delegated("click", button_4, () => removeTile(idx));
+					append($$anchor, li);
+				});
+				reset$1(ul);
+				reset$1(div_9);
+				var details = sibling(div_9, 2);
+				each(sibling(child(details), 4), 17, () => get$1(regions), (region) => regionKey(region), ($$anchor, region) => {
+					const key = /* @__PURE__ */ user_derived(() => regionKey(get$1(region)));
+					const placeholder = /* @__PURE__ */ user_derived(() => composeRegionLabel(get$1(m).circles || [], get$1(region)));
+					var label_6 = root_5();
+					var span_1 = child(label_6);
+					var text_2 = only_child(span_1, true);
+					var input_5 = sibling(span_1, 2);
+					remove_input_defaults(input_5);
+					reset$1(label_6);
+					template_effect(() => {
+						set_text(text_2, get$1(key) || "(outside)");
+						set_attribute(input_5, "placeholder", get$1(placeholder));
+						set_value(input_5, get$1(m).regionLabels?.[get$1(key)] ?? "");
+					});
+					delegated("input", input_5, (e) => setRegionLabelOverride(get$1(key), e.currentTarget.value));
+					append($$anchor, label_6);
+				});
+				reset$1(details);
+				reset$1(div_2);
+				var button_5 = sibling(div_2, 2);
+				set_attribute(button_5, "aria-valuemin", MIN_EDITOR_W);
+				var div_17 = sibling(button_5, 2);
+				var div_18 = sibling(child(div_17), 4);
+				var div_19 = child(div_18);
+				var text_3 = sibling(child(div_19));
+				reset$1(div_19);
+				var div_20 = sibling(div_19, 2);
+				var text_4 = sibling(child(div_20));
+				reset$1(div_20);
+				var div_21 = sibling(div_20, 2);
+				var text_5 = sibling(child(div_21));
+				reset$1(div_21);
+				reset$1(div_18);
+				var node_9 = sibling(div_18, 2);
+				var consequent_4 = ($$anchor) => {
+					var div_22 = root_6();
+					VennClassification(child(div_22), {
+						get model() {
+							return get$1(previewModel);
+						},
+						get session() {
+							return get$1(previewSession);
+						}
+					});
+					reset$1(div_22);
+					append($$anchor, div_22);
+				};
+				var consequent_5 = ($$anchor) => {
+					append($$anchor, root_7());
+				};
+				var alternate = ($$anchor) => {
+					append($$anchor, root_8());
+				};
+				if_block(node_9, ($$render) => {
+					if (get$1(m).tiles.length > 0 && get$1(m).circles?.length === 2) $$render(consequent_4);
+					else if (get$1(m).tiles.length === 0) $$render(consequent_5, 1);
+					else $$render(alternate, -1);
+				});
+				var node_11 = sibling(node_9, 2);
+				var consequent_7 = ($$anchor) => {
+					var fragment_1 = root_11();
+					var ol = sibling(first_child(fragment_1), 2);
+					each(ol, 21, () => get$1(m).tiles, index, ($$anchor, tile) => {
+						var li_1 = root_10();
+						var span_2 = child(li_1);
+						var node_12 = child(span_2);
+						var consequent_6 = ($$anchor) => {
+							var img = root_9();
+							template_effect(() => set_attribute(img, "src", get$1(tile).imageUrl));
+							append($$anchor, img);
+						};
+						var d_1 = /* @__PURE__ */ user_derived(() => (get$1(tile).imageUrl ?? "").trim());
+						if_block(node_12, ($$render) => {
+							if (get$1(d_1)) $$render(consequent_6);
+						});
+						var text_6 = sibling(node_12);
+						reset$1(span_2);
+						var text_7 = only_child(sibling(span_2, 4), true);
+						reset$1(li_1);
+						template_effect(($0, $1) => {
+							set_text(text_6, ` ${$0 ?? ""}`);
+							set_text(text_7, $1);
+						}, [() => stripHtml(get$1(tile).label) || (get$1(tile).imageAlt ?? "").trim() || get$1(tile).id, () => getRegionLabel(get$1(m), get$1(tile).correctRegion)]);
+						append($$anchor, li_1);
+					});
+					reset$1(ol);
+					append($$anchor, fragment_1);
+				};
+				if_block(node_11, ($$render) => {
+					if (get$1(m).tiles.length > 0) $$render(consequent_7);
+				});
+				reset$1(div_17);
+				reset$1(div_1);
+				bind_this(div_1, ($$value) => set(authorShellEl, $$value), () => get$1(authorShellEl));
+				template_effect(($0, $1) => {
+					styles = set_style(div_2, "", styles, { width: get$1(editorColumnWidth) });
+					set_attribute(button_5, "aria-valuemax", get$1(shellWidth) > 0 ? get$1(shellWidth) - MIN_PREVIEW_W - SPLITTER_W : 360);
+					set_attribute(button_5, "aria-valuenow", $0);
+					set_text(text_3, ` ${$1 ?? ""}`);
+					set_text(text_4, ` ${get$1(m).scoringPolicy === "allOrNothing" ? "All or nothing" : "Partial per tile"}`);
+					set_text(text_5, ` ${get$1(m).tiles.length ?? ""}`);
+				}, [() => get$1(editorWidthPx) ?? (get$1(shellWidth) > 0 ? Math.floor((get$1(shellWidth) - SPLITTER_W) / 2) : MIN_EDITOR_W), () => get$1(m).circles.map((c) => c.label).join(", ")]);
+				delegated("click", button, addTile);
+				delegated("pointerdown", button_5, onSplitPointerDown);
+				delegated("keydown", button_5, onSplitKeyDown);
+				bind_element_size(div_1, "clientWidth", ($$value) => set(shellWidth, $$value));
+				append($$anchor, div_1);
 			},
-			get session() {
-				return get$1(previewSession);
+			$$slots: {
+				settings: true,
+				default: true
 			}
 		});
-		reset$1(div_20);
-		append($$anchor, div_20);
-	};
-	var consequent_4 = ($$anchor) => {
-		append($$anchor, root_6());
-	};
-	var alternate = ($$anchor) => {
-		append($$anchor, root_7());
-	};
-	if_block(node_5, ($$render) => {
-		if (get$1(m).tiles.length > 0 && get$1(m).circles?.length === 2) $$render(consequent_3);
-		else if (get$1(m).tiles.length === 0) $$render(consequent_4, 1);
-		else $$render(alternate, -1);
-	});
-	var node_7 = sibling(node_5, 2);
-	var consequent_6 = ($$anchor) => {
-		var fragment_1 = root_10();
-		var ol = sibling(first_child(fragment_1), 2);
-		each(ol, 21, () => get$1(m).tiles, index, ($$anchor, tile) => {
-			var li_1 = root_9();
-			var span_2 = child(li_1);
-			var node_8 = child(span_2);
-			var consequent_5 = ($$anchor) => {
-				var img = root_8();
-				template_effect(() => set_attribute(img, "src", get$1(tile).imageUrl));
-				append($$anchor, img);
-			};
-			var d_1 = /* @__PURE__ */ user_derived(() => (get$1(tile).imageUrl ?? "").trim());
-			if_block(node_8, ($$render) => {
-				if (get$1(d_1)) $$render(consequent_5);
-			});
-			var text_4 = sibling(node_8);
-			reset$1(span_2);
-			var text_5 = only_child(sibling(span_2, 4), true);
-			reset$1(li_1);
-			template_effect(($0, $1) => {
-				set_text(text_4, ` ${$0 ?? ""}`);
-				set_text(text_5, $1);
-			}, [() => stripHtml(get$1(tile).label) || (get$1(tile).imageAlt ?? "").trim() || get$1(tile).id, () => getRegionLabel(get$1(m), get$1(tile).correctRegion)]);
-			append($$anchor, li_1);
-		});
-		reset$1(ol);
-		append($$anchor, fragment_1);
-	};
-	if_block(node_7, ($$render) => {
-		if (get$1(m).tiles.length > 0) $$render(consequent_6);
-	});
-	reset$1(div_15);
-	reset$1(div_1);
-	bind_this(div_1, ($$value) => set(authorShellEl, $$value), () => get$1(authorShellEl));
+	}
 	reset$1(div);
-	template_effect(($0, $1) => {
-		styles = set_style(div_2, "", styles, { width: get$1(editorColumnWidth) });
-		set_checked(input, get$1(m).promptEnabled !== false);
-		set_checked(input_6, get$1(m).scoringPolicy !== "allOrNothing");
-		set_checked(input_7, get$1(m).scoringPolicy === "allOrNothing");
-		set_attribute(button_5, "aria-valuemax", get$1(shellWidth) > 0 ? get$1(shellWidth) - MIN_PREVIEW_W - SPLITTER_W : 360);
-		set_attribute(button_5, "aria-valuenow", $0);
-		set_text(text_1, ` ${$1 ?? ""}`);
-		set_text(text_2, ` ${get$1(m).scoringPolicy === "allOrNothing" ? "All or nothing" : "Partial per tile"}`);
-		set_text(text_3, ` ${get$1(m).tiles.length ?? ""}`);
-	}, [() => get$1(editorWidthPx) ?? (get$1(shellWidth) > 0 ? Math.floor((get$1(shellWidth) - SPLITTER_W) / 2) : MIN_EDITOR_W), () => get$1(m).circles.map((c) => c.label).join(", ")]);
-	delegated("change", input, (e) => setPromptEnabled(e.currentTarget.checked));
-	delegated("click", button, addTile);
-	delegated("change", input_6, () => setScoringPolicy("partialPerTile"));
-	delegated("change", input_7, () => setScoringPolicy("allOrNothing"));
-	delegated("pointerdown", button_5, onSplitPointerDown);
-	delegated("keydown", button_5, onSplitKeyDown);
-	bind_element_size(div_1, "clientWidth", ($$value) => set(shellWidth, $$value));
 	append($$anchor, div);
 	return pop($$exports);
 }
 delegate([
-	"change",
 	"input",
 	"click",
 	"pointerdown",
@@ -37317,45 +37477,12 @@ delegate([
 ]);
 create_custom_element(Author, {
 	model: { type: "Object" },
-	onModelChange: {},
-	onChange: {}
+	configuration: { type: "Object" }
 }, [], []);
 //#endregion
 //#region src/author/index.ts
-var SvelteElementClass = Author.element;
-var VennClassificationAuthor = class extends SvelteElementClass {
-	/**
-	* The component reports each edit through its `onModelChange` prop, assigned
-	* here through the accessor Svelte generates for it. The host keeps the
-	* edited model, renders from it, and announces it as `model.updated`, which
-	* bubbles to the listener an authoring player registers at its root.
-	*/
-	constructor() {
-		super();
-		_defineProperty(this, "_model", null);
-		_defineProperty(this, "_onChange", null);
-		this.onModelChange = (update) => {
-			this._model = update;
-			super.model = update;
-			this._onChange?.(update);
-			this.dispatchEvent(new e$3(update, false));
-		};
-	}
-	set model(m) {
-		this._model = m;
-		super.model = m;
-	}
-	get model() {
-		return this._model;
-	}
-	set onChange(fn) {
-		this._onChange = fn;
-	}
-	get onChange() {
-		return this._onChange || (() => {});
-	}
-};
+var author_default = Author.element;
 //#endregion
-export { VennClassificationAuthor as default };
+export { author_default as default };
 
 //# sourceMappingURL=index.js.map