@pie-lib/render-ui 0.1.0

package/dist/has-media.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/has-media.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const hasMedia: (s: any) => boolean;
+//# sourceMappingURL=has-media.d.ts.map

package/dist/has-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-media.d.ts","sourceRoot":"","sources":["../src/has-media.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAWH,eAAO,MAAM,QAAQ,GAAI,MAAC,YAMzB,CAAC"}

package/dist/has-media.js

@@ -0,0 +1,10 @@
+//#region src/has-media.ts
+var e;
+typeof window < "u" && (e = new DOMParser());
+var t = (t) => {
+	if (!t) return !1;
+	let n = e.parseFromString(t, "text/html");
+	return !!n.body.querySelector("img") || !!n.body.querySelector("video") || !!n.body.querySelector("audio");
+};
+//#endregion
+export { t as hasMedia };

package/dist/has-text.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/has-text.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const hasText: (s: any) => boolean;
+//# sourceMappingURL=has-text.d.ts.map

package/dist/has-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-text.d.ts","sourceRoot":"","sources":["../src/has-text.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAaH,eAAO,MAAM,OAAO,GAAI,MAAC,YAMxB,CAAC"}

package/dist/has-text.js

@@ -0,0 +1,10 @@
+//#region src/has-text.ts
+var e;
+typeof window < "u" && (e = new DOMParser());
+var t = (t) => e.parseFromString(t, "text/html").body.textContent, n = (e) => {
+	if (!e) return !1;
+	let n = t(e);
+	return !!(n && n.trim());
+};
+//#endregion
+export { n as hasText };

package/dist/html-and-math.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/html-and-math.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export default class HtmlAndMath extends React.Component {
+    static propTypes: {
+        tag: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        html: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        tag: string;
+        html: string;
+    };
+    render(): JSX.Element;
+}
+//# sourceMappingURL=html-and-math.d.ts.map

package/dist/html-and-math.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-and-math.d.ts","sourceRoot":"","sources":["../src/html-and-math.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS;IACtD,MAAM,CAAC,SAAS;;;;MAId;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEF,MAAM;CAKP"}

package/dist/html-and-math.js

@@ -0,0 +1,25 @@
+import e from "react";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/html-and-math.tsx
+var r = class extends e.Component {
+	static propTypes = {
+		tag: t.string,
+		className: t.string,
+		html: t.string
+	};
+	static defaultProps = {
+		tag: "div",
+		html: ""
+	};
+	render() {
+		let { tag: e, className: t, html: r } = this.props;
+		return /* @__PURE__ */ n(e || "div", {
+			ref: (e) => this.node = e,
+			className: t,
+			dangerouslySetInnerHTML: { __html: r }
+		});
+	}
+};
+//#endregion
+export { r as default };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import * as indicators from './response-indicators.js';
+import Feedback from './feedback.js';
+import Collapsible from './collapsible/index.js';
+import withUndoReset from './withUndoReset.js';
+import PreviewLayout from './preview-layout.js';
+import UiLayout from './ui-layout.js';
+import HtmlAndMath from './html-and-math.js';
+import InputContainer from './input-container.js';
+import PreviewPrompt from './preview-prompt.js';
+import Readable from './readable.js';
+import Purpose from './purpose.js';
+import * as color from './color.js';
+import { hasText } from './has-text.js';
+import { hasMedia } from './has-media.js';
+import EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage.js';
+export { HtmlAndMath, indicators, withUndoReset, Feedback, UiLayout, PreviewLayout, Collapsible, InputContainer, PreviewPrompt, color, Readable, Purpose, hasText, hasMedia, EnableAudioAutoplayImage, };
+export { InlineMenu } from './inline-menu.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,UAAU,MAAM,0BAA0B,CAAC;AACvD,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,wBAAwB,MAAM,sCAAsC,CAAC;AAE5E,OAAO,EACL,WAAW,EACX,UAAU,EACV,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,WAAW,EACX,cAAc,EACd,aAAa,EACb,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,wBAAwB,GACzB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+import { color_exports as e } from "./color.js";
+import t from "./feedback.js";
+import { response_indicators_exports as n } from "./response-indicators.js";
+import r from "./collapsible/index.js";
+import i from "./withUndoReset.js";
+import a from "./ui-layout.js";
+import o from "./preview-layout.js";
+import s from "./html-and-math.js";
+import c from "./input-container.js";
+import l from "./preview-prompt.js";
+import u from "./readable.js";
+import d from "./purpose.js";
+import { hasText as f } from "./has-text.js";
+import { hasMedia as p } from "./has-media.js";
+import m from "./assets/enableAudioAutoplayImage.js";
+import { InlineMenu as h } from "./inline-menu.js";
+export { r as Collapsible, m as EnableAudioAutoplayImage, t as Feedback, s as HtmlAndMath, h as InlineMenu, c as InputContainer, o as PreviewLayout, l as PreviewPrompt, d as Purpose, u as Readable, a as UiLayout, e as color, p as hasMedia, f as hasText, n as indicators, i as withUndoReset };

package/dist/inline-menu.d.ts

@@ -0,0 +1,34 @@
+/**
+ * InlineMenu - A wrapper around MUI's Menu component for inline contexts
+ *
+ * This component fixes the issue where MUI's Menu creates a modal overlay
+ * that covers the entire screen with a white background. It's designed for
+ * use in inline contexts like dropdowns within text or other UI elements.
+ *
+ * Key differences from standard MUI Menu:
+ * - No backdrop (hideBackdrop)
+ * - Transparent modal root (doesn't block UI)
+ * - No scroll locking (disableScrollLock)
+ * - Menu itself remains interactive
+ *
+ * This file is NOT synced from upstream - it's specific to pie-elements-ng.
+ */
+import React from 'react';
+import { MenuProps } from '@mui/material/Menu';
+/**
+ * InlineMenu component that wraps MUI Menu without the blocking backdrop
+ *
+ * @example
+ * ```tsx
+ * <InlineMenu
+ *   anchorEl={anchorEl}
+ *   open={Boolean(anchorEl)}
+ *   onClose={handleClose}
+ * >
+ *   <MenuItem onClick={handleOption1}>Option 1</MenuItem>
+ *   <MenuItem onClick={handleOption2}>Option 2</MenuItem>
+ * </InlineMenu>
+ * ```
+ */
+export declare const InlineMenu: React.FC<MenuProps>;
+//# sourceMappingURL=inline-menu.d.ts.map

package/dist/inline-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-menu.d.ts","sourceRoot":"","sources":["../src/inline-menu.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0B1C,CAAC"}

package/dist/inline-menu.js

@@ -0,0 +1,29 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+import t from "@mui/material/Menu";
+//#region src/inline-menu.tsx
+var n = ({ slotProps: n, ...r }) => /* @__PURE__ */ e(t, {
+	...r,
+	disableScrollLock: !0,
+	hideBackdrop: !0,
+	slotProps: {
+		...n,
+		root: {
+			...n?.root,
+			style: {
+				backgroundColor: "transparent",
+				pointerEvents: "none",
+				...n?.root?.style
+			}
+		},
+		paper: {
+			...n?.paper,
+			style: {
+				pointerEvents: "auto",
+				...n?.paper?.style
+			}
+		}
+	}
+});
+//#endregion
+export { n as InlineMenu };

package/dist/input-container.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/input-container.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const InputContainer: {
+    ({ label, className, children }: {
+        label: any;
+        className: any;
+        children: any;
+    }): JSX.Element;
+    propTypes: {
+        label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+    };
+};
+export default InputContainer;
+//# sourceMappingURL=input-container.d.ts.map

package/dist/input-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-container.d.ts","sourceRoot":"","sources":["../src/input-container.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAgCnC,QAAA,MAAM,cAAc;;;;;;;;;;;CAKnB,CAAC;AAQF,eAAe,cAAc,CAAC"}

package/dist/input-container.js

@@ -0,0 +1,39 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@mui/material/InputLabel";
+import a from "@mui/material/FormControl";
+//#region src/input-container.tsx
+var o = t(a)(({ theme: e }) => ({
+	margin: 0,
+	padding: 0,
+	flex: "1 0 auto",
+	minWidth: e.spacing(4)
+})), s = t(i)(() => ({
+	fontSize: "inherit",
+	whiteSpace: "nowrap",
+	margin: 0,
+	padding: 0,
+	alignSelf: "flex-start",
+	position: "absolute",
+	top: 0,
+	left: 0,
+	transformOrigin: "top left",
+	pointerEvents: "none",
+	"&.MuiInputLabel-shrink": { transform: "scale(0.75) translate(0, -0.75em)" },
+	"&:not(.MuiInputLabel-shrink)": { transform: "translate(0, 0)" }
+})), c = ({ label: e, className: t, children: i }) => /* @__PURE__ */ r(o, {
+	className: t,
+	children: [/* @__PURE__ */ n(s, {
+		shrink: !0,
+		children: e
+	}), i]
+});
+c.propTypes = {
+	label: e.oneOfType([e.string, e.object]).isRequired,
+	className: e.string,
+	children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired
+};
+//#endregion
+export { c as default };

package/dist/preview-layout.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/preview-layout.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare class PreviewLayout extends React.Component {
+    static propTypes: {
+        ariaLabel: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+        role: PropTypes.Requireable<string>;
+        extraCSSRules: PropTypes.Requireable<PropTypes.InferProps<{
+            names: PropTypes.Requireable<(string | null | undefined)[]>;
+            rules: PropTypes.Requireable<string>;
+        }>>;
+        fontSizeFactor: PropTypes.Requireable<number>;
+    };
+    render(): JSX.Element;
+}
+export default PreviewLayout;
+//# sourceMappingURL=preview-layout.d.ts.map

package/dist/preview-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-layout.d.ts","sourceRoot":"","sources":["../src/preview-layout.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS;IACzC,MAAM,CAAC,SAAS;;;;;;;;;MASd;IAEF,MAAM;CAeP;AAED,eAAe,aAAa,CAAC"}

package/dist/preview-layout.js

@@ -0,0 +1,37 @@
+import e from "./ui-layout.js";
+import t from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/preview-layout.tsx
+var a = r(e)({
+	display: "flex",
+	flexDirection: "column",
+	position: "relative"
+}), o = class extends t.Component {
+	static propTypes = {
+		ariaLabel: n.string,
+		children: n.oneOfType([n.arrayOf(n.node), n.node]).isRequired,
+		role: n.string,
+		extraCSSRules: n.shape({
+			names: n.arrayOf(n.string),
+			rules: n.string
+		}),
+		fontSizeFactor: n.number
+	};
+	render() {
+		let { children: e, ariaLabel: t, role: n, extraCSSRules: r, fontSizeFactor: o, classes: s } = this.props;
+		return /* @__PURE__ */ i(a, {
+			...t ? {
+				"aria-label": t,
+				role: n
+			} : {},
+			extraCSSRules: r,
+			fontSizeFactor: o,
+			classes: s,
+			children: e
+		});
+	}
+};
+//#endregion
+export { o as default };

package/dist/preview-prompt.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/preview-prompt.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+export declare class PreviewPrompt extends Component {
+    static propTypes: {
+        prompt: PropTypes.Requireable<string>;
+        tagName: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        defaultClassName: PropTypes.Requireable<string>;
+        autoplayAudioEnabled: PropTypes.Requireable<boolean>;
+        customAudioButton: PropTypes.Requireable<PropTypes.InferProps<{
+            playImage: PropTypes.Requireable<string>;
+            pauseImage: PropTypes.Requireable<string>;
+        }>>;
+    };
+    static defaultProps: {
+        onClick: () => void;
+    };
+    parsedText: any;
+    addCustomAudioButtonControls(): void;
+    removeCustomAudioButtonListeners(): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    setupMathRendering(): void;
+    renderMathContent(): void;
+    alignImages(): void;
+    render(): JSX.Element;
+}
+export default PreviewPrompt;
+//# sourceMappingURL=preview-prompt.d.ts.map

package/dist/preview-prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-prompt.d.ts","sourceRoot":"","sources":["../src/preview-prompt.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,SAAS,MAAM,YAAY,CAAC;AA2DnC,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,CAAC,SAAS;;;;;;;;;;;MAWd;IAEF,MAAM,CAAC,YAAY;;MAEjB;IAEF,UAAU,EAAE,GAAG,CAuCb;IAEF,4BAA4B;IA0D5B,gCAAgC;IAahC,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA;IAQ5B,oBAAoB;IAIpB,kBAAkB;IAIlB,iBAAiB;IAOjB,WAAW;IAkCX,MAAM;CAmBP;AAED,eAAe,aAAa,CAAC"}

package/dist/preview-prompt.js

@@ -0,0 +1,153 @@
+import { text as e } from "./color.js";
+import { Component as t } from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { jsx as i } from "react/jsx-runtime";
+import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/preview-prompt.tsx
+var o = r("div")(({ theme: t, tagName: n }) => ({
+	"&:not(.MathJax) > table": { borderCollapse: "collapse" },
+	"&:not(.MathJax) > table:has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)": {
+		backgroundColor: "#f6f8fa",
+		color: t.palette.common.black
+	},
+	"&:not(.MathJax) > table:has(tbody tr > td:first-child) tbody tr:nth-child(even) td": {
+		backgroundColor: "#f6f8fa",
+		color: t.palette.common.black
+	},
+	"&:not(.MathJax) table td, &:not(.MathJax) table th": {
+		padding: ".6em 1em",
+		textAlign: "left"
+	},
+	"&:not(.MathJax) > table td > p.kds-indent": { textAlign: "initial" },
+	"&.prompt": {
+		verticalAlign: "middle",
+		color: e()
+	},
+	"&.legend": {
+		width: "100%",
+		fontSize: "inherit !important"
+	},
+	"&.rationale": {
+		paddingLeft: t.spacing(4),
+		paddingBottom: t.spacing(1)
+	},
+	"&.prompt-label": {
+		color: `${e()} !important`,
+		display: "flex",
+		flexDirection: "column",
+		verticalAlign: "middle",
+		cursor: "pointer",
+		"& > p": { margin: "0 0 0 0 !important" }
+	}
+})), s = /\\embed\{newLine\}\[\]/g, c = "\\newline ", l = class extends t {
+	static propTypes = {
+		prompt: n.string,
+		tagName: n.string,
+		className: n.string,
+		onClick: n.func,
+		defaultClassName: n.string,
+		autoplayAudioEnabled: n.bool,
+		customAudioButton: n.shape({
+			playImage: n.string,
+			pauseImage: n.string
+		})
+	};
+	static defaultProps = { onClick: () => {} };
+	parsedText = (e) => {
+		let { customAudioButton: t } = this.props, n = document.createElement("div");
+		n.innerHTML = e;
+		let r = n.querySelector("audio");
+		if (r) {
+			let e = document.createElement("source");
+			if (e.setAttribute("type", "audio/mp3"), e.setAttribute("src", r.getAttribute("src")), r.removeAttribute("src"), r.setAttribute("id", "pie-prompt-audio-player"), r.appendChild(e), t) {
+				r.style.display = "none";
+				let e = document.createElement("div");
+				e.id = "play-audio-button", Object.assign(e.style, {
+					cursor: "pointer",
+					display: "block",
+					width: "128px",
+					height: "128px",
+					backgroundImage: `url(${t.pauseImage})`,
+					backgroundSize: "cover",
+					borderRadius: "50%",
+					border: "1px solid #326295"
+				}), r.parentNode.insertBefore(e, r);
+			}
+		}
+		return n.innerHTML;
+	};
+	addCustomAudioButtonControls() {
+		let { autoplayAudioEnabled: e, customAudioButton: t } = this.props, n = document.getElementById("play-audio-button"), r = document.getElementById("pie-prompt-audio-player");
+		if (e && r && r.play().then(() => {
+			n && t && r.addEventListener("ended", a);
+		}).catch((e) => {
+			console.error("Error playing audio", e);
+		}), !n || !r || !t) return;
+		let i = () => {
+			r.paused && (n.style.backgroundImage.includes(t.pauseImage) || r.play());
+		}, a = () => {
+			n.style.backgroundImage = `url(${t.playImage})`;
+		}, o = () => {
+			Object.assign(n.style, {
+				backgroundImage: `url(${t.pauseImage})`,
+				border: "1px solid #ccc"
+			});
+		}, s = () => {
+			Object.assign(n.style, {
+				backgroundImage: `url(${t.playImage})`,
+				border: "1px solid #326295"
+			});
+		};
+		n.addEventListener("click", i), r.addEventListener("play", o), r.addEventListener("pause", s), r.addEventListener("ended", a), this._handlePlayClick = i, this._handleAudioPlay = o, this._handleAudioPause = s, this._handleAudioEnded = a;
+	}
+	removeCustomAudioButtonListeners() {
+		let e = document.getElementById("play-audio-button"), t = document.querySelector("audio");
+		!e || !t || (e.removeEventListener("click", this._handlePlayClick), t.removeEventListener("play", this._handleAudioPlay), t.removeEventListener("pause", this._handleAudioPause), t.removeEventListener("ended", this._handleAudioEnded));
+	}
+	componentDidMount() {
+		this.alignImages(), this.addCustomAudioButtonControls(), this.setupMathRendering();
+	}
+	componentDidUpdate(e) {
+		this.alignImages(), e.prompt !== this.props.prompt && this.renderMathContent();
+	}
+	componentWillUnmount() {
+		this.removeCustomAudioButtonListeners();
+	}
+	setupMathRendering() {
+		this.renderMathContent();
+	}
+	renderMathContent() {
+		let e = document.getElementById("preview-prompt");
+		e && typeof a == "function" && a(e);
+	}
+	alignImages() {
+		document.querySelectorAll("#preview-prompt").forEach((e) => {
+			let t = e.getElementsByTagName("img");
+			if (t && t.length) {
+				for (let e of t) if (e.attributes && e.attributes.alignment && e.attributes.alignment.value) {
+					let t = e.parentElement;
+					if (!(t.tagName === "DIV" && t.style.display === "flex" && t.style.width === "100%")) {
+						let n = document.createElement("div");
+						n.style.display = "flex", n.style.width = "100%";
+						let r = e.cloneNode(!0);
+						n.appendChild(r), t.replaceChild(n, e);
+					}
+				}
+			}
+		});
+	}
+	render() {
+		let { prompt: e, tagName: t, className: n, onClick: r, defaultClassName: a } = this.props, l = `${n || ""} ${a || ""} ${t === "legend" ? "legend" : ""}`.trim();
+		return /* @__PURE__ */ i(o, {
+			as: t || "div",
+			id: "preview-prompt",
+			onClick: r,
+			className: l,
+			tagName: t,
+			dangerouslySetInnerHTML: { __html: this.parsedText(e || "").replace(s, c) }
+		});
+	}
+};
+//#endregion
+export { l as default };

package/dist/purpose.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/purpose.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const Purpose: {
+    (props: any): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        purpose: PropTypes.Requireable<string>;
+    };
+};
+export default Purpose;
+//# sourceMappingURL=purpose.d.ts.map

package/dist/purpose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"purpose.d.ts","sourceRoot":"","sources":["../src/purpose.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,QAAA,MAAM,OAAO;;;;;;CAMZ,CAAC;AAOF,eAAe,OAAO,CAAC"}

package/dist/purpose.js

@@ -0,0 +1,11 @@
+import e from "react";
+import t from "prop-types";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
+//#region src/purpose.tsx
+var i = (t) => /* @__PURE__ */ r(n, { children: e.Children.map(t.children, (n) => e.cloneElement(n, { "data-pie-purpose": t.purpose })) });
+i.propTypes = {
+	children: t.node,
+	purpose: t.string
+};
+//#endregion
+export { i as default };

package/dist/readable.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-lib/packages/render-ui/src/readable.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const Readable: {
+    (props: any): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        false: PropTypes.Requireable<boolean>;
+    };
+};
+export default Readable;
+//# sourceMappingURL=readable.d.ts.map

package/dist/readable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readable.d.ts","sourceRoot":"","sources":["../src/readable.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,QAAA,MAAM,QAAQ;;;;;;CAQb,CAAC;AAOF,eAAe,QAAQ,CAAC"}

package/dist/readable.js

@@ -0,0 +1,11 @@
+import e from "react";
+import t from "prop-types";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
+//#region src/readable.tsx
+var i = (t) => /* @__PURE__ */ r(n, { children: e.Children.map(t.children, (n) => e.cloneElement(n, { "data-pie-readable": t.false === void 0 })) });
+i.propTypes = {
+	children: t.node,
+	false: t.bool
+};
+//#endregion
+export { i as default };