@pie-element/simple-cloze 0.1.4-next.6 → 0.1.4-next.8

package/author.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/dist/author/index.d.ts

@@ -2,6 +2,14 @@ declare const SvelteElementClass: any;
 declare class SimpleClozeAuthor extends SvelteElementClass {
     private _model;
     private _onChange;
+    onModelChange: (update: any) => void;
+    /**
+     * 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();
     set model(m: any);
     get model(): any;
     set onChange(fn: (model: any) => void);

package/dist/author/index.js

@@ -1,3 +1,59 @@
+//#region ../../shared/configure-events/dist/index.js
+var _e;
+var _e2;
+var _e3;
+var _e4;
+var _e5;
+var e = (_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;
@@ -3858,61 +3914,6 @@ function onDestroy(fn) {
 	onMount(() => () => untrack(fn));
 }
 /**
-* @template [T=any]
-* @param {string} type
-* @param {T} [detail]
-* @param {any}params_0
-* @returns {CustomEvent<T>}
-*/
-function create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
-	return new CustomEvent(type, {
-		detail,
-		bubbles,
-		cancelable
-	});
-}
-/**
-* Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).
-* Event dispatchers are functions that can take two arguments: `name` and `detail`.
-*
-* Component events created with `createEventDispatcher` create a
-* [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).
-* These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
-* The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)
-* property and can contain any type of data.
-*
-* The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:
-* ```ts
-* const dispatch = createEventDispatcher<{
-*  loaded: null; // does not take a detail argument
-*  change: string; // takes a detail argument of type string, which is required
-*  optional: number | null; // takes an optional detail argument of type number
-* }>();
-* ```
-*
-* @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)
-* @template {Record<string, any>} [EventMap = any]
-* @returns {EventDispatcher<EventMap>}
-*/
-function createEventDispatcher() {
-	const active_component_context = component_context;
-	if (active_component_context === null) lifecycle_outside_component("createEventDispatcher");
-	/**
-	* @param [detail]
-	* @param [options]
-	*/
-	return (type, detail, options) => {
-		const events = active_component_context.s.$$events?.[type];
-		if (events) {
-			const callbacks = is_array(events) ? events.slice() : [events];
-			const event = create_custom_event(type, detail, options);
-			for (const fn of callbacks) fn.call(active_component_context.x, event);
-			return !event.defaultPrevented;
-		}
-		return true;
-	};
-}
-/**
 * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate
 * @param {ComponentContext} context
 */
@@ -4036,7 +4037,7 @@ function html(node, get_value, is_controlled = false, svg = false, mathml = fals
 * @param {Node} anchor
 * @param {{ hash: string, code: string }} css
 */
-function append_styles$1(anchor, css) {
+function append_styles(anchor, css) {
 	effect(() => {
 		anchor = active_effect?.parent?.nodes?.start ?? anchor;
 		var root = anchor.getRootNode();
@@ -4075,90 +4076,6 @@ function to_class(value, hash, directives) {
 	}
 	return classname === "" ? null : classname;
 }
-/**
-*
-* @param {Record<string,any>} styles
-* @param {boolean} important
-*/
-function append_styles(styles, important = false) {
-	var separator = important ? " !important;" : ";";
-	var css = "";
-	for (var key of Object.keys(styles)) {
-		var value = styles[key];
-		if (value != null && value !== "") css += " " + key + ": " + value + separator;
-	}
-	return css;
-}
-/**
-* @param {string} name
-* @returns {string}
-*/
-function to_css_name(name) {
-	if (name[0] !== "-" || name[1] !== "-") return name.toLowerCase();
-	return name;
-}
-/**
-* @param {any} value
-* @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [styles]
-* @returns {string | null}
-*/
-function to_style(value, styles) {
-	if (styles) {
-		var new_style = "";
-		/** @type {Record<string,any> | undefined} */
-		var normal_styles;
-		/** @type {Record<string,any> | undefined} */
-		var important_styles;
-		if (Array.isArray(styles)) {
-			normal_styles = styles[0];
-			important_styles = styles[1];
-		} else normal_styles = styles;
-		if (value) {
-			value = String(value).replaceAll(/\/\*.*?\*\//g, "").trim();
-			/** @type {boolean | '"' | "'"} */
-			var in_str = false;
-			var in_apo = 0;
-			var in_comment = false;
-			var reserved_names = [];
-			if (normal_styles) reserved_names.push(...Object.keys(normal_styles).map(to_css_name));
-			if (important_styles) reserved_names.push(...Object.keys(important_styles).map(to_css_name));
-			var start_index = 0;
-			var name_index = -1;
-			const len = value.length;
-			for (var i = 0; i < len; i++) {
-				var c = value[i];
-				if (in_comment) {
-					if (c === "/" && value[i - 1] === "*") in_comment = false;
-				} else if (in_str) {
-					if (in_str === c) in_str = false;
-				} else if (c === "/" && value[i + 1] === "*") in_comment = true;
-				else if (c === "\"" || c === "'") in_str = c;
-				else if (c === "(") in_apo++;
-				else if (c === ")") in_apo--;
-				if (!in_comment && in_str === false && in_apo === 0) {
-					if (c === ":" && name_index === -1) name_index = i;
-					else if (c === ";" || i === len - 1) {
-						if (name_index !== -1) {
-							var name = to_css_name(value.substring(start_index, name_index).trim());
-							if (!reserved_names.includes(name)) {
-								if (c !== ";") i++;
-								var property = value.substring(start_index, i).trim();
-								new_style += " " + property + ";";
-							}
-						}
-						start_index = i + 1;
-						name_index = -1;
-					}
-				}
-			}
-		}
-		if (normal_styles) new_style += append_styles(normal_styles);
-		if (important_styles) new_style += append_styles(important_styles, true);
-		new_style = new_style.trim();
-		return new_style === "" ? null : new_style;
-	}
-	return value == null ? null : String(value);
-}
 //#endregion
 //#region ../../../node_modules/.bun/svelte@5.57.0/node_modules/svelte/src/internal/client/dom/elements/class.js
 /**
@@ -4185,40 +4102,6 @@ function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
 	return next_classes;
 }
 //#endregion
-//#region ../../../node_modules/.bun/svelte@5.57.0/node_modules/svelte/src/internal/client/dom/elements/style.js
-/**
-* @param {Element & ElementCSSInlineStyle} dom
-* @param {Record<string, any>} prev
-* @param {Record<string, any>} next
-* @param {string} [priority]
-*/
-function update_styles(dom, prev = {}, next, priority) {
-	for (var key in next) {
-		var value = next[key];
-		if (prev[key] !== value) if (next[key] == null) dom.style.removeProperty(key);
-		else dom.style.setProperty(key, value, priority);
-	}
-}
-/**
-* @param {Element & ElementCSSInlineStyle} dom
-* @param {string | null} value
-* @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [prev_styles]
-* @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [next_styles]
-*/
-function set_style(dom, value, prev_styles, next_styles) {
-	var prev = dom[STYLE_CACHE];
-	if (hydrating || prev !== value) {
-		var next_style_attr = to_style(value, next_styles);
-		if (!hydrating || next_style_attr !== dom.getAttribute("style")) if (next_style_attr == null) dom.removeAttribute("style");
-		else dom.style.cssText = next_style_attr;
-		/** @type {any} */ dom[STYLE_CACHE] = value;
-	} else if (next_styles) if (Array.isArray(next_styles)) {
-		update_styles(dom, prev_styles?.[0], next_styles[0]);
-		update_styles(dom, prev_styles?.[1], next_styles[1], "important");
-	} else update_styles(dom, prev_styles, next_styles);
-	return next_styles;
-}
-//#endregion
 //#region ../../../node_modules/.bun/svelte@5.57.0/node_modules/svelte/src/internal/client/dom/elements/attributes.js
 /** @import { Blocker, Effect } from '#client' */
 var IS_CUSTOM_ELEMENT = Symbol("is custom element");
@@ -26624,7 +26507,6 @@ var Underline = Mark.create({
 		};
 	}
 });
-var src_default$5 = Underline;
 //#endregion
 //#region ../../../node_modules/.bun/prosemirror-dropcursor@1.8.2/node_modules/prosemirror-dropcursor/dist/index.js
 /**
@@ -27900,7 +27782,12 @@ function createPlaceholderPlugin({ editor, options }) {
 		} }
 	});
 }
-Extension.create({
+/**
+* This extension allows you to add a placeholder to your editor.
+* A placeholder is a text that appears when the editor or a node is empty.
+* @see https://www.tiptap.dev/api/extensions/placeholder
+*/
+var Placeholder = Extension.create({
 	name: "placeholder",
 	addOptions() {
 		return {
@@ -31348,26 +31235,31 @@ Extension.create({
 });
 //#endregion
 //#region ../../lib-svelte/editable-html-tiptap-svelte/dist/index2.js
-var root$1 = /* @__PURE__ */ from_html(`<button type="button" class="pie-toolbar-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Insert Table"></button>`);
-var root_1 = /* @__PURE__ */ from_html(`<button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Add Row"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Delete Row"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Add Column"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Delete Column"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Delete Table"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Toggle Table Border"></button>`, 1);
-var root_2 = /* @__PURE__ */ from_html(`<div class="align-menu"><button type="button" class="align-menu-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Align Left"></button> <button type="button" class="align-menu-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Align Center"></button> <button type="button" class="align-menu-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Align Right"></button></div>`);
-var root_3 = /* @__PURE__ */ from_html(`<button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Bold"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Italic"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Strikethrough"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Code"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Underline"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Subscript"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Superscript"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Heading"></button> <button type="button" class="pie-toolbar-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Insert Image"></button> <div class="align-dropdown"><button type="button" class="pie-toolbar-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Text Alignment"><!> <span class="dropdown-arrow">▼</span></button> <!></div> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Bullet List"></button> <button type="button" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Numbered List"></button> <button type="button" class="pie-toolbar-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Undo"></button> <button type="button" class="pie-toolbar-btn" style="border: none; background: none; padding: 2px; color: grey; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Redo"></button>`, 1);
-var root_4 = /* @__PURE__ */ from_html(`<div role="toolbar" tabindex="-1"><div class="toolbar-content"><div class="toolbar-buttons"><!> <!> <!></div> <button type="button" class="done-btn" style="border: none; background: none; padding: 2px; color: #00bb00; display: inline-flex; cursor: pointer; align-items: center; justify-content: center;" title="Done"></button></div></div>`);
-var root_5 = /* @__PURE__ */ from_html(`<div class="editor-container editable-html" style="position: relative; padding: 0; border: 1px solid #ccc; border-radius: 4px; cursor: text; background-color: var(--pie-background, white); width: 100%;"><div style="position: relative; padding: 0; overflow-y: auto; color: var(--pie-text, rgba(0, 0, 0, 0.87)); background-color: var(--pie-background, white); min-height: 120px;"><div class="editor-children" style="padding: 10px 16px;"><div class="editor" style="padding: 5px; min-height: 100px;"></div></div></div> <!></div>`);
+var root$1 = /* @__PURE__ */ from_html(`<button type="button" class="pie-toolbar-btn" title="Insert Table"></button>`);
+var root_1 = /* @__PURE__ */ from_html(`<button type="button" title="Add Row"></button> <button type="button" title="Delete Row"></button> <button type="button" title="Add Column"></button> <button type="button" title="Delete Column"></button> <button type="button" title="Delete Table"></button> <button type="button" title="Toggle Table Border"></button>`, 1);
+var root_2 = /* @__PURE__ */ from_html(`<div class="align-menu"><button type="button" class="align-menu-btn" title="Align Left"></button> <button type="button" class="align-menu-btn" title="Align Center"></button> <button type="button" class="align-menu-btn" title="Align Right"></button></div>`);
+var root_3 = /* @__PURE__ */ from_html(`<button type="button" title="Bold"></button> <button type="button" title="Italic"></button> <button type="button" title="Strikethrough"></button> <button type="button" title="Code"></button> <button type="button" title="Underline"></button> <button type="button" title="Subscript"></button> <button type="button" title="Superscript"></button> <button type="button" title="Heading"></button> <button type="button" class="pie-toolbar-btn" title="Insert Image"></button> <div class="align-dropdown"><button type="button" class="pie-toolbar-btn" title="Text Alignment"><!> <span class="dropdown-arrow">▼</span></button> <!></div> <button type="button" title="Bullet List"></button> <button type="button" title="Numbered List"></button> <button type="button" class="pie-toolbar-btn" title="Undo"></button> <button type="button" class="pie-toolbar-btn" title="Redo"></button>`, 1);
+var root_4 = /* @__PURE__ */ from_html(`<div role="toolbar" tabindex="-1"><div class="toolbar-content"><div class="toolbar-buttons"><!> <!> <!></div> <button type="button" class="done-btn" title="Done"></button></div></div>`);
+var root_5 = /* @__PURE__ */ from_html(`<div class="pie-editable-html editor-container editable-html svelte-rx7so6"><div><div class="editor-children"><div class="editor"></div></div></div> <!></div>`);
 var $$css$1 = {
 	hash: "svelte-rx7so6",
-	code: ".editor-container {position:relative;padding:0px;border:1px solid #ccc;border-radius:4px;cursor:text;background-color:var(--pie-background, white);width:100%;}.editor-holder {position:relative;padding:0px;overflow-y:auto;color:var(--pie-text, rgba(0, 0, 0, 0.87));background-color:var(--pie-background, white);min-height:120px;}.editor-holder.disabled {background-color:var(--pie-background-dark, #f5f5f5);cursor:not-allowed;}.editor-children {padding:10px 16px;}.editor {padding:5px;min-height:100px;}\n\n  /* Toolbar styles matching React version EXACTLY */.toolbar {position:absolute;z-index:20;cursor:pointer;justify-content:space-between;background:var(--editable-html-toolbar-bg, #efefef);min-width:280px;margin:5px 0 0 0;padding:2px;box-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n      0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n      0px 3px 1px -2px rgba(0, 0, 0, 0.12);box-sizing:border-box;display:flex;opacity:0;pointer-events:none;top:100%;left:0;}.toolbar.focused {opacity:1;pointer-events:auto;}.toolbar-content {display:flex;width:100%;justify-content:space-between;}.toolbar-buttons {align-items:center;display:flex;width:100%;}.toolbar button.pie-toolbar-btn {\n    /* Reset all browser defaults */appearance:none;-webkit-appearance:none;-moz-appearance:none;\n\n    /* Core button styling - matching React MenuBar exactly */color:grey !important;display:inline-flex !important;padding:2px !important;background:none !important;border:0 !important;border-width:0 !important;border-style:none !important;outline:none !important;box-shadow:none !important;cursor:pointer !important;align-items:center !important;justify-content:center !important;min-width:auto !important;width:auto !important;height:auto !important;margin:0 !important;font:inherit !important;text-align:inherit !important;text-transform:none !important;}.pie-toolbar-btn:hover:not(:disabled) {color:black;}.pie-toolbar-btn:focus {outline:2px solid #666;}.pie-toolbar-btn:disabled {opacity:0.7;cursor:not-allowed;}.pie-toolbar-btn:disabled:hover {color:grey;}.pie-toolbar-btn.active {background:var(--pie-primary, #9c27b0);color:var(--pie-white, #ffffff);}.pie-toolbar-btn svg {width:24px;height:24px;}\n\n  /* Done Button - matching React DoneButton component */.done-btn {vertical-align:top;width:28px;height:28px;color:var(--editable-html-toolbar-check, #00bb00);padding:4px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;}.done-btn:hover {background-color:rgba(0, 187, 0, 0.08);border-radius:4px;}.done-btn svg {width:24px;height:24px;}\n\n  /* Text alignment dropdown */.align-dropdown {position:relative;}.dropdown-arrow {margin-left:2px;font-size:8px;}.align-menu {position:absolute;top:100%;left:0;background:var(--pie-white, #fff);display:flex;flex-direction:row;padding:2px;box-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n      0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n      0px 3px 1px -2px rgba(0, 0, 0, 0.12);z-index:30;}.align-menu-btn {color:var(--pie-disabled, grey);display:inline-flex;padding:4px;background:none;border:none;cursor:pointer;align-items:center;justify-content:center;min-width:32px;min-height:32px;}.align-menu-btn:hover {color:var(--pie-black, black);background-color:rgba(0, 0, 0, 0.04);}\n\n  /* ProseMirror editor styles */.ProseMirror {outline:none !important;min-height:100px;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;font-size:14px;line-height:1.6;color:var(--pie-text, rgba(0, 0, 0, 0.87));}.ProseMirror p {margin:0;}.ProseMirror ul,\n  .ProseMirror ol {padding:0 1rem;margin:1.25rem 1rem 1.25rem 0.4rem;}.ProseMirror ul li p,\n  .ProseMirror ol li p {margin-top:0.25em;margin-bottom:0.25em;}.ProseMirror h1,\n  .ProseMirror h2,\n  .ProseMirror h3,\n  .ProseMirror h4,\n  .ProseMirror h5,\n  .ProseMirror h6 {line-height:1.1;margin-top:2.5rem;text-wrap:pretty;}.ProseMirror h1,\n  .ProseMirror h2 {margin-top:3.5rem;margin-bottom:1.5rem;}.ProseMirror h1 {font-size:1.4rem;}.ProseMirror h2 {font-size:1.2rem;}.ProseMirror h3 {font-size:1.1rem;}.ProseMirror h4,\n  .ProseMirror h5,\n  .ProseMirror h6 {font-size:1rem;}.ProseMirror code {background-color:rgba(88, 5, 255, 0.05);border-radius:0.4rem;color:#2e2b29;font-size:0.85rem;padding:0.25em 0.3em;}.ProseMirror pre {background:#2e2b29;border-radius:0.5rem;color:#fff;font-family:'JetBrainsMono', monospace;margin:1.5rem 0;padding:0.75rem 1rem;}.ProseMirror pre code {background:none;color:inherit;font-size:0.8rem;padding:0;}.ProseMirror blockquote {border-left:3px solid rgba(61, 37, 20, 0.12);margin:1.5rem 0;padding-left:1rem;}.ProseMirror hr {border:none;border-top:1px solid rgba(61, 37, 20, 0.08);margin:2rem 0;}.ProseMirror img {max-width:100%;height:auto;}\n\n  /* Table styles */.ProseMirror table {table-layout:fixed;width:100%;border-collapse:collapse;color:var(--pie-text, rgba(0, 0, 0, 0.87));background-color:var(--pie-background, white);margin:1rem 0;}.ProseMirror table:not([border=\"1\"]) tr {border-top:1px solid #dfe2e5;}.ProseMirror td,\n  .ProseMirror th {padding:0.6em 1em;text-align:center;vertical-align:top;position:relative;}.ProseMirror table:not([border=\"1\"]) td,\n  .ProseMirror table:not([border=\"1\"]) th {border:1px solid #dfe2e5;}.ProseMirror table[border=\"1\"] {border:2px solid var(--pie-black, #000);}.ProseMirror table[border=\"1\"] td,\n  .ProseMirror table[border=\"1\"] th {border:1px solid var(--pie-black, #000);}.ProseMirror .selectedCell {background-color:rgba(200, 200, 255, 0.4);}\n\n  /* Placeholder */.ProseMirror p.is-editor-empty:first-child::before {content:attr(data-placeholder);float:left;color:#adb5bd;pointer-events:none;height:0;}.ProseMirror:focus {outline:none;}"
+	code: ".pie-editable-html.svelte-rx7so6 {position:relative;padding:0px;border:1px solid #ccc;border-radius:4px;cursor:text;background-color:var(--pie-background, rgba(255, 255, 255, 0));width:100%;}.pie-editable-html.svelte-rx7so6 .editor-holder {position:relative;padding:0px;overflow-y:auto;color:var(--pie-text, black);background-color:var(--pie-background, rgba(255, 255, 255, 0));min-height:120px;}.pie-editable-html.svelte-rx7so6 .editor-holder.disabled {cursor:not-allowed;}.pie-editable-html.svelte-rx7so6 .editor-children {padding:10px 16px;}.pie-editable-html.svelte-rx7so6 .editor {padding:5px;min-height:100px;}\n\n  /* Toolbar styles matching React version EXACTLY */.pie-editable-html.svelte-rx7so6 .toolbar {position:absolute;z-index:20;cursor:pointer;justify-content:space-between;background:var(--editable-html-toolbar-bg, #efefef);min-width:280px;margin:5px 0 0 0;padding:2px;box-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n      0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n      0px 3px 1px -2px rgba(0, 0, 0, 0.12);box-sizing:border-box;display:flex;opacity:0;pointer-events:none;top:100%;left:0;}.pie-editable-html.svelte-rx7so6 .toolbar.focused {opacity:1;pointer-events:auto;}.pie-editable-html.svelte-rx7so6 .toolbar-content {display:flex;width:100%;justify-content:space-between;}.pie-editable-html.svelte-rx7so6 .toolbar-buttons {align-items:center;display:flex;width:100%;}.pie-editable-html.svelte-rx7so6 .toolbar button.pie-toolbar-btn {\n    /* Reset all browser defaults */appearance:none;-webkit-appearance:none;-moz-appearance:none;\n\n    /* Core button styling - matching React MenuBar exactly */color:grey !important;display:inline-flex !important;padding:2px !important;background:none !important;border:0 !important;border-width:0 !important;border-style:none !important;outline:none !important;box-shadow:none !important;cursor:pointer !important;align-items:center !important;justify-content:center !important;min-width:auto !important;width:auto !important;height:auto !important;margin:0 !important;font:inherit !important;text-align:inherit !important;text-transform:none !important;}.pie-editable-html.svelte-rx7so6 .pie-toolbar-btn:hover:not(:disabled) {color:black;}.pie-editable-html.svelte-rx7so6 .pie-toolbar-btn:focus {outline:2px solid #666;}.pie-editable-html.svelte-rx7so6 .pie-toolbar-btn:disabled {opacity:0.7;cursor:not-allowed;}.pie-editable-html.svelte-rx7so6 .pie-toolbar-btn:disabled:hover {color:grey;}.pie-editable-html.svelte-rx7so6 .pie-toolbar-btn.active {background:var(--pie-primary, #3f51b5);color:var(--pie-white, #ffffff);}.pie-editable-html.svelte-rx7so6 .pie-toolbar-btn svg {width:24px;height:24px;}\n\n  /* Done Button - matching React DoneButton component */.pie-editable-html.svelte-rx7so6 .done-btn {vertical-align:top;width:28px;height:28px;color:var(--editable-html-toolbar-check, #00bb00);padding:4px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;}.pie-editable-html.svelte-rx7so6 .done-btn:hover {background-color:rgba(0, 187, 0, 0.08);border-radius:4px;}.pie-editable-html.svelte-rx7so6 .done-btn svg {width:24px;height:24px;}\n\n  /* Text alignment dropdown */.pie-editable-html.svelte-rx7so6 .align-dropdown {position:relative;}.pie-editable-html.svelte-rx7so6 .dropdown-arrow {margin-left:2px;font-size:8px;}.pie-editable-html.svelte-rx7so6 .align-menu {position:absolute;top:100%;left:0;background:var(--pie-white, #ffffff);display:flex;flex-direction:row;padding:2px;box-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n      0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n      0px 3px 1px -2px rgba(0, 0, 0, 0.12);z-index:30;}.pie-editable-html.svelte-rx7so6 .align-menu-btn {color:var(--pie-disabled, grey);display:inline-flex;padding:4px;background:none;border:none;cursor:pointer;align-items:center;justify-content:center;min-width:32px;min-height:32px;}.pie-editable-html.svelte-rx7so6 .align-menu-btn:hover {color:var(--pie-black, #000000);background-color:rgba(0, 0, 0, 0.04);}\n\n  /* ProseMirror editor styles */.pie-editable-html.svelte-rx7so6 .ProseMirror {outline:none !important;min-height:100px;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;font-size:14px;line-height:1.6;color:var(--pie-text, black);}.pie-editable-html.svelte-rx7so6 .ProseMirror p {margin:0;}.pie-editable-html.svelte-rx7so6 .ProseMirror ul,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror ol {padding:0 1rem;margin:1.25rem 1rem 1.25rem 0.4rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror ul li p,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror ol li p {margin-top:0.25em;margin-bottom:0.25em;}.pie-editable-html.svelte-rx7so6 .ProseMirror h1,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h2,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h3,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h4,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h5,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h6 {line-height:1.1;margin-top:2.5rem;text-wrap:pretty;}.pie-editable-html.svelte-rx7so6 .ProseMirror h1,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h2 {margin-top:3.5rem;margin-bottom:1.5rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror h1 {font-size:1.4rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror h2 {font-size:1.2rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror h3 {font-size:1.1rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror h4,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h5,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror h6 {font-size:1rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror code {background-color:rgba(88, 5, 255, 0.05);border-radius:0.4rem;color:#2e2b29;font-size:0.85rem;padding:0.25em 0.3em;}.pie-editable-html.svelte-rx7so6 .ProseMirror pre {background:#2e2b29;border-radius:0.5rem;color:#fff;font-family:'JetBrainsMono', monospace;margin:1.5rem 0;padding:0.75rem 1rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror pre code {background:none;color:inherit;font-size:0.8rem;padding:0;}.pie-editable-html.svelte-rx7so6 .ProseMirror blockquote {border-left:3px solid rgba(61, 37, 20, 0.12);margin:1.5rem 0;padding-left:1rem;}.pie-editable-html.svelte-rx7so6 .ProseMirror hr {border:none;border-top:1px solid rgba(61, 37, 20, 0.08);margin:2rem 0;}.pie-editable-html.svelte-rx7so6 .ProseMirror img {max-width:100%;height:auto;}\n\n  /* Table styles */.pie-editable-html.svelte-rx7so6 .ProseMirror table {table-layout:fixed;width:100%;border-collapse:collapse;color:var(--pie-text, black);background-color:var(--pie-background, rgba(255, 255, 255, 0));margin:1rem 0;}.pie-editable-html.svelte-rx7so6 .ProseMirror table:not([border=\"1\"]) tr {border-top:1px solid #dfe2e5;}.pie-editable-html.svelte-rx7so6 .ProseMirror td,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror th {padding:0.6em 1em;text-align:center;vertical-align:top;position:relative;}.pie-editable-html.svelte-rx7so6 .ProseMirror table:not([border=\"1\"]) td,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror table:not([border=\"1\"]) th {border:1px solid #dfe2e5;}.pie-editable-html.svelte-rx7so6 .ProseMirror table[border=\"1\"] {border:2px solid var(--pie-black, #000000);}.pie-editable-html.svelte-rx7so6 .ProseMirror table[border=\"1\"] td,\n  .pie-editable-html.svelte-rx7so6 .ProseMirror table[border=\"1\"] th {border:1px solid var(--pie-black, #000000);}.pie-editable-html.svelte-rx7so6 .ProseMirror .selectedCell {background-color:rgba(200, 200, 255, 0.4);}\n\n  /* Placeholder */.pie-editable-html.svelte-rx7so6 .ProseMirror p.is-editor-empty:first-child::before {content:attr(data-placeholder);float:left;color:#adb5bd;pointer-events:none;height:0;}.pie-editable-html.svelte-rx7so6 .ProseMirror:focus {outline:none;}"
 };
-function EditableHtml($$anchor, $$props) {
+function EditableHtml$1($$anchor, $$props) {
 	push($$props, true);
-	append_styles$1($$anchor, $$css$1);
-	let markup = prop($$props, "markup", 3, "");
-	prop($$props, "placeholder", 3, "Enter text here...");
-	let showToolbar = prop($$props, "showToolbar", 3, true), disabled = prop($$props, "disabled", 3, false);
+	append_styles($$anchor, $$css$1);
+	let markup = prop($$props, "markup", 3, ""), placeholder = prop($$props, "placeholder", 3, "Enter text here..."), showToolbar = prop($$props, "showToolbar", 3, true), disabled = prop($$props, "disabled", 3, false);
 	let editorElement;
 	let editor = /* @__PURE__ */ state(null);
-	let isFocused = /* @__PURE__ */ state(false);
+	let hasFocus = /* @__PURE__ */ state(false);
 	let showAlignMenu = /* @__PURE__ */ state(false);
+	function editorAttributes() {
+		return {
+			role: "textbox",
+			"aria-multiline": "true",
+			...$$props.ariaLabel ? { "aria-label": $$props.ariaLabel } : {}
+		};
+	}
 	let editorState = /* @__PURE__ */ state(proxy({
 		isBold: false,
 		canBold: false,
@@ -31419,17 +31311,23 @@ function EditableHtml($$anchor, $$props) {
 		set(editor, new Editor({
 			element: editorElement,
 			extensions: [
-				src_default$4.configure({ heading: { levels: [
-					1,
-					2,
-					3,
-					4,
-					5,
-					6
-				] } }),
+				src_default$4.configure({
+					heading: { levels: [
+						1,
+						2,
+						3,
+						4,
+						5,
+						6
+					] },
+					link: {
+						autolink: false,
+						linkOnPaste: false,
+						shouldAutoLink: () => false
+					}
+				}),
 				TextStyle,
 				CharacterCount.configure({ limit: 1e6 }),
-				src_default$5,
 				src_default$2,
 				src_default$3,
 				src_default$1.configure({
@@ -31447,11 +31345,13 @@ function EditableHtml($$anchor, $$props) {
 				}),
 				TableRow,
 				TableHeader,
-				TableCell
+				TableCell,
+				Placeholder.configure({ placeholder: () => placeholder() })
 			],
 			content: markup() || "",
 			editable: !disabled(),
 			autofocus: false,
+			editorProps: { attributes: editorAttributes() },
 			onUpdate: ({ editor }) => {
 				const html = editor.getHTML();
 				if ($$props.onChange) $$props.onChange(html);
@@ -31461,12 +31361,7 @@ function EditableHtml($$anchor, $$props) {
 				updateEditorState();
 			},
 			onFocus: () => {
-				set(isFocused, true);
 				updateEditorState();
-			},
-			onBlur: () => {
-				set(isFocused, false);
-				set(showAlignMenu, false);
 			}
 		}), true);
 		updateEditorState();
@@ -31475,11 +31370,25 @@ function EditableHtml($$anchor, $$props) {
 		if (get(editor)) get(editor).destroy();
 	});
 	user_effect(() => {
-		if (get(editor) && markup() !== get(editor).getHTML()) get(editor).commands.setContent(markup() || "", false);
+		if (get(editor) && markup() !== get(editor).getHTML()) get(editor).commands.setContent(markup() || "", { emitUpdate: false });
 	});
 	user_effect(() => {
-		if (get(editor)) get(editor).setEditable(!disabled());
+		const editable = !disabled();
+		if (get(editor) && get(editor).isEditable !== editable) get(editor).setEditable(editable, false);
 	});
+	user_effect(() => {
+		const attributes = editorAttributes();
+		if (get(editor) && get(editor).view.dom.getAttribute("aria-label") !== (attributes["aria-label"] ?? null)) get(editor).setOptions({ editorProps: { attributes } });
+	});
+	function handleFocusIn() {
+		set(hasFocus, true);
+	}
+	function handleFocusOut(e) {
+		if (!e.currentTarget.contains(e.relatedTarget)) {
+			set(hasFocus, false);
+			set(showAlignMenu, false);
+		}
+	}
 	function toggleBold() {
 		get(editor)?.chain().focus().toggleBold().run();
 	}
@@ -31561,7 +31470,7 @@ function EditableHtml($$anchor, $$props) {
 	function handleDoneClick() {
 		if (get(editor)) {
 			const html = get(editor).getHTML();
-			if ($$props.onChange) $$props.onChange(html);
+			if (html !== markup()) $$props.onChange?.(html);
 			get(editor).commands.blur();
 		}
 	}
@@ -31785,8 +31694,8 @@ function EditableHtml($$anchor, $$props) {
 		reset$1(div_5);
 		reset$1(div_4);
 		template_effect(() => {
-			classes_1 = set_class(div_4, 1, "toolbar", null, classes_1, { focused: get(isFocused) });
-			set_style(div_4, `position: absolute; z-index: 20; cursor: pointer; justify-content: space-between; background: var(--editable-html-toolbar-bg, #efefef); min-width: 280px; margin: 5px 0 0 0; padding: 2px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); box-sizing: border-box; display: flex; top: 100%; left: 0; opacity: ${get(isFocused) ? 1 : 0}; pointer-events: ${get(isFocused) ? "auto" : "none"};`);
+			classes_1 = set_class(div_4, 1, "toolbar", null, classes_1, { focused: get(hasFocus) });
+			div_4.inert = !get(hasFocus);
 		});
 		delegated("mousedown", div_4, handleMouseDown);
 		delegated("click", button_24, handleDoneClick);
@@ -31797,48 +31706,53 @@ function EditableHtml($$anchor, $$props) {
 	});
 	reset$1(div);
 	template_effect(() => classes = set_class(div_1, 1, "editor-holder", null, classes, { disabled: disabled() }));
+	delegated("focusin", div, handleFocusIn);
+	delegated("focusout", div, handleFocusOut);
 	append($$anchor, div);
 	pop();
 }
-delegate(["mousedown", "click"]);
+delegate([
+	"focusin",
+	"focusout",
+	"mousedown",
+	"click"
+]);
+//#endregion
+//#region ../../lib-svelte/editable-html-tiptap-svelte/dist/index.js
+var EditableHtml = EditableHtml$1;
 //#endregion
 //#region src/author/Author.svelte
-var root = /* @__PURE__ */ from_html(`<div class="simple-cloze-author svelte-13ppn6m"><div class="input-container svelte-13ppn6m"><span class="input-label svelte-13ppn6m">Prompt</span> <!></div> <div class="mb-6"><label for="simple-cloze-correct-answer" class="block text-sm text-gray-600 mb-2">Correct Answer</label> <input id="simple-cloze-correct-answer" type="text" class="input input-bordered w-full" placeholder="Enter the correct answer"/></div></div>`);
+var root = /* @__PURE__ */ from_html(`<div class="simple-cloze-author svelte-13ppn6m"><div class="input-container svelte-13ppn6m"><span class="input-label svelte-13ppn6m">Prompt</span> <!></div> <div class="mb-6"><label class="block text-sm text-gray-600 mb-2">Correct Answer</label> <input type="text" class="input input-bordered w-full" placeholder="Enter the correct answer"/></div></div>`);
 var $$css = {
 	hash: "svelte-13ppn6m",
 	code: ".simple-cloze-author.svelte-13ppn6m {max-width:56rem;margin:0 auto;padding:24px;}.input-container.svelte-13ppn6m {position:relative;padding-top:16px;margin-bottom:24px;width:100%;}.input-label.svelte-13ppn6m {position:absolute;top:0;left:0;transform-origin:top left;transform:scale(0.75) translate(0, -0.75em);color:var(--pie-text, rgba(0, 0, 0, 0.6));pointer-events:none;}.simple-cloze-author .editor-container {border-color:var(--pie-border-light, #ccc);border-radius:4px;}.simple-cloze-author .editor-holder {min-height:140px;}"
 };
 function Author($$anchor, $$props) {
 	push($$props, true);
-	append_styles$1($$anchor, $$css);
-	const dispatch = createEventDispatcher();
-	let model = prop($$props, "model", 15), onChange = prop($$props, "onChange", 7);
-	function emitModelUpdate(nextModel) {
-		dispatch("model.updated", {
-			update: nextModel,
-			reset: false
-		});
+	append_styles($$anchor, $$css);
+	let model = prop($$props, "model", 15), onChange = prop($$props, "onChange", 7), onModelChange = prop($$props, "onModelChange", 7);
+	const answerInputId = `simple-cloze-correct-answer-${Math.random().toString(36).slice(2, 10)}`;
+	/**
+	* The wrapper owns the model and announces the edit; `onChange` serves a
+	* component mounted without one. The update spreads the whole model, so fields
+	* this form does not edit survive.
+	*/
+	function emitModelUpdate(patch) {
+		const nextModel = {
+			...model() || {},
+			...patch
+		};
+		if (onModelChange()) onModelChange()(nextModel);
+		else {
+			model(nextModel);
+			onChange()?.(nextModel);
+		}
 	}
 	function handlePromptChange(html) {
-		if (onChange() && model()) onChange()({
-			...model(),
-			prompt: html
-		});
-		if (model()) emitModelUpdate({
-			...model(),
-			prompt: html
-		});
+		emitModelUpdate({ prompt: html });
 	}
 	function handleAnswerChange(e) {
-		const target = e.target;
-		if (onChange() && model()) onChange()({
-			...model(),
-			correctAnswer: target.value
-		});
-		if (model()) emitModelUpdate({
-			...model(),
-			correctAnswer: target.value
-		});
+		emitModelUpdate({ correctAnswer: e.target.value });
 	}
 	var $$exports = {
 		get model() {
@@ -31854,6 +31768,13 @@ function Author($$anchor, $$props) {
 		set onChange($$value) {
 			onChange($$value);
 			flushSync();
+		},
+		get onModelChange() {
+			return onModelChange();
+		},
+		set onModelChange($$value) {
+			onModelChange($$value);
+			flushSync();
 		}
 	};
 	var div = root();
@@ -31866,16 +31787,22 @@ function Author($$anchor, $$props) {
 				return get($0);
 			},
 			onChange: handlePromptChange,
-			placeholder: "Enter your question here..."
+			placeholder: "Enter your question here...",
+			ariaLabel: "Prompt"
 		});
 	}
 	reset$1(div_1);
 	var div_2 = sibling(div_1, 2);
-	var input = sibling(child(div_2), 2);
+	var label = child(div_2);
+	var input = sibling(label, 2);
 	remove_input_defaults(input);
 	reset$1(div_2);
 	reset$1(div);
-	template_effect(() => set_value(input, model()?.correctAnswer || ""));
+	template_effect(() => {
+		set_attribute(label, "for", answerInputId);
+		set_attribute(input, "id", answerInputId);
+		set_value(input, model()?.correctAnswer || "");
+	});
 	delegated("input", input, handleAnswerChange);
 	append($$anchor, div);
 	return pop($$exports);
@@ -31883,16 +31810,29 @@ function Author($$anchor, $$props) {
 delegate(["input"]);
 create_custom_element(Author, {
 	model: { type: "Object" },
+	onModelChange: {},
 	onChange: {}
 }, [], []);
 //#endregion
 //#region src/author/index.ts
 var SvelteElementClass = Author.element;
 var SimpleClozeAuthor = class extends SvelteElementClass {
-	constructor(..._args) {
-		super(..._args);
+	/**
+	* 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(update, false));
+		};
 	}
 	set model(m) {
 		this._model = m;
@@ -31903,7 +31843,6 @@ var SimpleClozeAuthor = class extends SvelteElementClass {
 	}
 	set onChange(fn) {
 		this._onChange = fn;
-		this.onChange = fn;
 	}
 	get onChange() {
 		return this._onChange || (() => {});