phoenix_duskmoon 9.16.13 → 9.16.15

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ### Added
 
+- Public React Chat hook factory, custom composer and renderer integration, and
+  application metadata, runtime and admission state across snapshots and events.
+- Opt-in browser constraint validation for classic React forms with
+  `novalidate={false}`; schema forms retain JSON Schema validation.
+- Independent classic React form layout through `form_class`, preserving outer
+  wrapper `class`; document the upstream schema-form styling limitation.
 - Native Core components: carousel, countdown, diff, keyboard keys, radial progress,
   floating actions, swap, filter group, hero, indicator, join, mask, sidebar layout,
   stack and megamenu, with Storybook examples.
@@ -9,6 +15,10 @@
 
 ### Changed
 
+- Update Core/CSS Art to 1.20.4, Elements/Art Elements to 1.9.1 and React Components
+  to 0.5.0, with current supporting JavaScript and Hex dependencies.
+- Support HTTP 0.21.x alongside 0.20.x; the umbrella selects 0.21.3. Update MDEx
+  Mermaid to 0.4.0, which escapes diagram source and preserves explicit raw HTML options.
 - Update Elements, Art Elements and declared individual element packages to 1.9.0,
   including Chat Scroll timeline fixes and Markdown's DOMPurify update. Remove the
   retired `el-pin-input` theme selector; native `dm_pin_input` remains supported.
@@ -26,6 +36,23 @@
 
 ### Fixed
 
+- Forward React form field attributes to their interactive controls and preserve
+  application-disabled fields when the LiveView connection recovers.
+- Preserve selected-value arrays for native checkbox groups named with `[]`,
+  including nested paths, empty selections and per-checkbox reset state.
+- Read current native controls before React form submission, including
+  programmatically changed hidden inputs, and delegate events for replaced or
+  newly added controls while preserving React-owned values.
+- Resolve production chunk imports by their importing module, preventing identical
+  relative paths in unrelated packages from becoming missing browser assets.
+- Preserve lazy custom-element registration and resolve preload URLs relative to
+  the emitted bundle when Storybook pages use nested routes.
+- Preserve shared development vendor runtimes and CommonJS exports during cache
+  recovery and late imports, with separate vendor caches for each Mix environment
+  and a shared initial static graph. Keep vendor URLs stable during discovery and
+  refresh cached URLs when Phoenix initializes its asset plug or restarts.
+- Complete required and optional transitive dependencies of nested npm packages,
+  and repair incomplete existing lockfiles before reporting successful installation.
 - Restore amd64/arm64 Alpine support across the native build toolchain, with
   published musl binaries and checksums plus Alpine release validation.
 - Code Engine's temporary stylesheet fallback now works after minification and

package/assets/js/react_chat/chat.js

@@ -4,8 +4,18 @@ import { Input } from "@duskmoon-dev/components/input";
 import { Button } from "@duskmoon-dev/components/button";
 import { Chat } from "@duskmoon-dev/components/chat";
 const h = React.createElement;
+const defaultOptions = {};
 
-const Message = memo(function Message({ message, bridge, targetId, timeline }) {
+const Message = memo(function Message(props) {
+	const {
+		message,
+		bridge,
+		targetId,
+		timeline,
+		options,
+		connected,
+		synchronizing,
+	} = props;
 	const [notice, setNotice] = useState("");
 	return h(
 		Chat,
@@ -16,7 +26,9 @@ const Message = memo(function Message({ message, bridge, targetId, timeline }) {
 			timeline,
 			"data-message-id": message.id,
 		},
-		h(Chat.Header, null, message.author || message.role),
+		options.renderHeader
+			? h(options.renderHeader, props)
+			: h(Chat.Header, null, message.author || message.role),
 		h(
 			Chat.Bubble,
 			{ streaming: message.status === "streaming" },
@@ -24,114 +36,229 @@ const Message = memo(function Message({ message, bridge, targetId, timeline }) {
 				h(
 					Chat.Tool,
 					{ key: tool.id, status: tool.status || "running" },
-					h(Chat.ToolHeader, null, `${tool.name || tool.id}: ${tool.status || "running"}`),
+					h(
+						Chat.ToolHeader,
+						null,
+						`${tool.name || tool.id}: ${tool.status || "running"}`,
+					),
 					h(
 						tool.result == null ? Chat.ToolCall : Chat.ToolResult,
 						null,
-						h("pre", null, JSON.stringify(tool.result ?? tool.input ?? {}, null, 2)),
+						h(
+							"pre",
+							null,
+							JSON.stringify(tool.result ?? tool.input ?? {}, null, 2),
+						),
 					),
 				),
 			),
-			h(Markdown, { className: "chat-bubble-content", markdown: message.content || "" }),
+			h(Markdown, {
+				className: "chat-bubble-content",
+				markdown: message.content || "",
+			}),
 		),
 		message.status === "streaming" &&
-			h(Chat.Status, { role: "status" }, h(Chat.StatusItem, null, "Generating…")),
-		message.error && h("p", { role: "alert" }, message.error),
-		h(
-			Chat.Footer,
-			null,
 			h(
-				Chat.Actions,
-				null,
-				h(
-					Button,
-					{
-						type: "button",
-						appearance: "ghost",
-						onClick: async () => {
-							try {
-								await navigator.clipboard.writeText(message.content || "");
-								setNotice("Copied");
-							} catch {
-								setNotice("Copy failed");
-							}
-						},
-					},
-					"Copy",
-				),
-				["error", "cancelled"].includes(message.status) &&
-					h(
-						Button,
-						{
-							type: "button",
-							appearance: "ghost",
-							onClick: () =>
-								bridge
-									.send("retry", { message_id: message.id })
-									.catch((error) => setNotice(error.message)),
-						},
-						"Retry",
-					),
-				...(message.actions || []).map((action) =>
+				Chat.Status,
+				{ role: "status" },
+				h(Chat.StatusItem, null, "Generating…"),
+			),
+		message.error && h("p", { role: "alert" }, message.error),
+		options.renderFooter
+			? h(options.renderFooter, props)
+			: h(
+					Chat.Footer,
+					null,
 					h(
-						Button,
-						{
-							key: action.id,
-							type: "button",
-							appearance: "ghost",
-							onClick: () =>
-								bridge
-									.send("action", { message_id: message.id, action: action.id })
-									.catch((error) => setNotice(error.message)),
-						},
-						action.label,
+						Chat.Actions,
+						null,
+						h(
+							Button,
+							{
+								type: "button",
+								appearance: "ghost",
+								onClick: async () => {
+									try {
+										await navigator.clipboard.writeText(message.content || "");
+										setNotice("Copied");
+									} catch {
+										setNotice("Copy failed");
+									}
+								},
+							},
+							"Copy",
+						),
+						["error", "cancelled"].includes(message.status) &&
+							h(
+								Button,
+								{
+									type: "button",
+									appearance: "ghost",
+									disabled: !connected || synchronizing,
+									onClick: () =>
+										bridge
+											.send("retry", { message_id: message.id })
+											.catch((error) => setNotice(error.message)),
+								},
+								"Retry",
+							),
+						...(message.actions || []).map((action) =>
+							h(
+								Button,
+								{
+									key: action.id,
+									disabled:
+										action.disabled ||
+										action.eligible === false ||
+										!connected ||
+										synchronizing,
+									type: "button",
+									appearance: "ghost",
+									onClick: () =>
+										bridge
+											.send("action", {
+												message_id: message.id,
+												action: action.id,
+											})
+											.catch((error) => setNotice(error.message)),
+								},
+								action.label,
+							),
+						),
 					),
 				),
-			),
-		),
 		h("span", { role: "status" }, notice),
 	);
 });
 
-export function ReactChat({ state, bridge, connected, label }) {
-	const transcriptId = useId();
-	const [draft, setDraft] = useState("");
+// A composer owns its draft/attachments. This helper only owns admission and UI requests.
+export function useChatSubmission({ bridge, canSubmit }) {
 	const [busy, setBusy] = useState(false);
 	const [notice, setNotice] = useState("");
 	const pending = useRef(false);
 	const alive = useRef(true);
-	const scroll = useRef(null);
-	const follow = useRef(true);
-	useEffect(
-		() => () => {
-			alive.current = false;
-		},
-		[],
-	);
 	useEffect(() => {
-		if (follow.current && scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight;
-	}, [state.messages]);
-	const streaming = state.messages.some((message) => message.status === "streaming");
-	const replies = state.messages.filter((message) => message.role === "assistant").slice(-24);
-	const timelines = new Map(replies.map((message, index) => [message.id, index + 1]));
-	const targetId = (message) => `${transcriptId}-message-${encodeURIComponent(message.id)}`;
-	async function submit(event) {
-		event.preventDefault();
-		if (!draft.trim() || pending.current || streaming || !connected || state.needsSync) return;
-		const text = draft;
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	async function submit(payload) {
+		if (!canSubmit || pending.current)
+			throw new Error("Chat is not accepting messages");
 		pending.current = true;
 		setBusy(true);
 		setNotice("");
 		try {
-			await bridge.send("send", { text, request_id: crypto.randomUUID() });
-			if (alive.current) setDraft((current) => (current === text ? "" : current));
+			return await bridge.send("send", {
+				request_id: crypto.randomUUID(),
+				...payload,
+			});
 		} catch (error) {
 			if (alive.current) setNotice(error.message);
+			throw error;
 		} finally {
 			pending.current = false;
 			if (alive.current) setBusy(false);
 		}
 	}
+	return { submit, busy, notice };
+}
+
+function DefaultComposer(props) {
+	const { bridge, connected, active, canSubmit } = props;
+	const [draft, setDraft] = useState("");
+	const { submit, busy, notice } = useChatSubmission(props);
+	const [stopNotice, setStopNotice] = useState("");
+	async function onSubmit(event) {
+		event.preventDefault();
+		if (!draft.trim() || busy || !canSubmit) return;
+		const text = draft;
+		try {
+			await submit({ text });
+			setDraft((current) => (current === text ? "" : current));
+		} catch {
+			/* The helper preserves the draft and renders the rejection. */
+		}
+	}
+	return h(
+		React.Fragment,
+		null,
+		(notice || stopNotice) && h("p", { role: "alert" }, notice || stopNotice),
+		h(
+			"form",
+			{ className: "flex gap-2", onSubmit },
+			h(Input, {
+				value: draft,
+				onChange: (event) => setDraft(event.target.value),
+				"aria-label": "Message",
+				placeholder: "Write a message",
+			}),
+			h(
+				Button,
+				{ type: "submit", disabled: busy || !canSubmit || !draft.trim() },
+				"Send",
+			),
+			active &&
+				h(
+					Button,
+					{
+						type: "button",
+						disabled: !connected,
+						onClick: () =>
+							bridge
+								.send("stop", {})
+								.catch((error) => setStopNotice(error.message)),
+					},
+					"Stop",
+				),
+		),
+	);
+}
+
+export function ReactChat({
+	state,
+	bridge,
+	connected,
+	label,
+	options = defaultOptions,
+}) {
+	const transcriptId = useId();
+	const scroll = useRef(null);
+	const follow = useRef(true);
+	useEffect(() => {
+		if (follow.current && scroll.current)
+			scroll.current.scrollTop = scroll.current.scrollHeight;
+	}, [state.messages]);
+	const streaming = state.messages.some(
+		(message) => message.status === "streaming",
+	);
+	const active = state.runtime.active ?? streaming;
+	const canSubmit =
+		connected &&
+		!state.needsSync &&
+		state.admission.canSubmit !== false &&
+		(!active || state.admission.allowWhileStreaming === true);
+	const context = {
+		state,
+		bridge,
+		connected,
+		synchronizing: state.needsSync,
+		metadata: state.metadata,
+		runtime: state.runtime,
+		admission: state.admission,
+		streaming,
+		active,
+		canSubmit,
+	};
+	const replies = state.messages
+		.filter((message) => message.role === "assistant")
+		.slice(-24);
+	const timelines = new Map(
+		replies.map((message, index) => [message.id, index + 1]),
+	);
+	const targetId = (message) =>
+		`${transcriptId}-message-${encodeURIComponent(message.id)}`;
 	return h(
 		"section",
 		{ className: "flex flex-col gap-3 h-full", "aria-label": label },
@@ -143,7 +270,8 @@ export function ReactChat({ state, bridge, connected, label }) {
 				"data-chat-messages": true,
 				onScroll: () => {
 					const el = scroll.current;
-					follow.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
+					follow.current =
+						el.scrollHeight - el.scrollTop - el.clientHeight < 48;
 				},
 			},
 			h(
@@ -164,7 +292,13 @@ export function ReactChat({ state, bridge, connected, label }) {
 				Chat.ScrollBody,
 				{ className: "gap-3" },
 				state.messages.map((message) =>
-					h(Message, {
+					h(options.renderMessage || Message, {
+						...(options.renderMessage ||
+						options.renderHeader ||
+						options.renderFooter
+							? context
+							: { connected, synchronizing: state.needsSync }),
+						options,
 						key: message.id,
 						message,
 						bridge,
@@ -190,36 +324,14 @@ export function ReactChat({ state, bridge, connected, label }) {
 			h(
 				"p",
 				{ role: "status" },
-				connected ? "Synchronizing conversation…" : "Disconnected. Draft preserved.",
-			),
-		notice && h("p", { role: "alert" }, notice),
-		h(
-			"form",
-			{ className: "flex gap-2", onSubmit: submit },
-			h(Input, {
-				value: draft,
-				onChange: (event) => setDraft(event.target.value),
-				"aria-label": "Message",
-				placeholder: "Write a message",
-			}),
-			h(
-				Button,
-				{
-					type: "submit",
-					disabled: busy || streaming || !connected || state.needsSync || !draft.trim(),
-				},
-				"Send",
+				connected
+					? "Synchronizing conversation…"
+					: "Disconnected. Draft preserved.",
 			),
-			streaming &&
-				h(
-					Button,
-					{
-						type: "button",
-						disabled: !connected,
-						onClick: () => bridge.send("stop", {}).catch((error) => setNotice(error.message)),
-					},
-					"Stop",
-				),
-		),
+		options.renderStatus && h(options.renderStatus, context),
+		h(options.Composer || DefaultComposer, {
+			...context,
+			key: state.conversationId,
+		}),
 	);
 }

package/assets/js/react_chat/index.js

@@ -3,103 +3,129 @@ import { createRoot } from "react-dom/client";
 import { ReactChat } from "./chat.js";
 import { initialState, reduceChat } from "./state.js";
 
-export const DuskmoonReactChat = {
-	mounted() {
-		this.config = JSON.parse(this.el.dataset.chat);
-		this.state = initialState(this.config.conversationId, this.config.messages);
-		this.root = createRoot(this.el);
-		this.connected = true;
-		this.requests = new Set();
-		this.bridge = { send: (action, payload) => this.sendChat(action, payload) };
-		this.eventRef = this.handleEvent(this.config.event, (event) => {
-			if (event.id !== this.el.id) return;
-			const previous = this.state;
-			this.state = reduceChat(this.state, event);
-			if (previous === this.state) return;
-			if (this.state.needsSync && !previous.needsSync) this.requestSync();
-			this.scheduleRender();
-		});
-		this.renderChat();
-	},
-	sendChat(action, payload) {
-		if (!this.connected || this.dead)
-			return Promise.reject(new Error("Chat is disconnected"));
-		return new Promise((resolve, reject) => {
-			const finish = (error, reply) => {
-				if (!this.requests.delete(request)) return;
-				clearTimeout(request.timer);
-				error ? reject(error) : resolve(reply);
-			};
-			const request = {
-				cancel: () =>
-					finish(new Error("Chat disconnected; check status before retrying")),
-			};
-			this.requests.add(request);
-			request.timer = setTimeout(
-				() =>
-					finish(
-						new Error("Chat request timed out; check status before retrying"),
-					),
-				15000,
+export { ReactChat, useChatSubmission } from "./chat.js";
+export { initialState, reduceChat } from "./state.js";
+
+export function createDuskmoonReactChat(options = {}) {
+	return {
+		mounted() {
+			this.config = JSON.parse(this.el.dataset.chat);
+			this.state = initialState(
+				this.config.conversationId,
+				this.config.messages,
+				this.config,
 			);
-			const body = {
-				...payload,
-				id: this.el.id,
-				conversation_id: this.state.conversationId,
+			this.root = createRoot(this.el);
+			this.connected = true;
+			this.requests = new Set();
+			this.bridge = {
+				send: (action, payload) => this.sendChat(action, payload),
 			};
-			const reply = (response) =>
-				finish(
-					response?.status === "ok"
-						? null
-						: new Error(response?.message || "Chat request rejected"),
-					response,
+			this.eventRef = this.handleEvent(this.config.event, (event) => {
+				if (event.id !== this.el.id) return;
+				const previous = this.state;
+				this.state = reduceChat(this.state, event);
+				if (previous === this.state) return;
+				if (this.state.needsSync && !previous.needsSync) this.requestSync();
+				this.scheduleRender();
+			});
+			this.renderChat();
+		},
+		sendChat(action, payload) {
+			if (!this.connected || this.dead)
+				return Promise.reject(new Error("Chat is disconnected"));
+			if (action === "send" && this.state.needsSync)
+				return Promise.reject(new Error("Chat is synchronizing"));
+			return new Promise((resolve, reject) => {
+				const finish = (error, reply) => {
+					if (!this.requests.delete(request)) return;
+					clearTimeout(request.timer);
+					error ? reject(error) : resolve(reply);
+				};
+				const request = {
+					cancel: () =>
+						finish(
+							new Error("Chat disconnected; check status before retrying"),
+						),
+				};
+				this.requests.add(request);
+				request.timer = setTimeout(
+					() =>
+						finish(
+							new Error("Chat request timed out; check status before retrying"),
+						),
+					15000,
 				);
-			try {
-				const event = this.config.actions[action];
-				if (this.config.target)
-					this.pushEventTo(this.config.target, event, body, reply);
-				else this.pushEvent(event, body, reply);
-			} catch (error) {
-				finish(error);
-			}
-		});
-	},
-	requestSync() {
-		this.sendChat("sync", { sequences: this.state.sequences }).catch(() => {});
-	},
-	scheduleRender() {
-		if (!this.frame)
-			this.frame = requestAnimationFrame(() => {
-				this.frame = null;
-				if (!this.dead) this.renderChat();
+				const body = {
+					...payload,
+					id: this.el.id,
+					conversation_id: this.state.conversationId,
+				};
+				const reply = (response) => {
+					const error =
+						response?.status === "ok"
+							? null
+							: new Error(response?.message || "Chat request rejected");
+					if (error) error.response = response;
+					finish(error, response);
+				};
+				try {
+					const event = this.config.actions[action];
+					if (this.config.target || this.el.dataset.target)
+						this.pushEventTo(
+							this.config.target || this.el.dataset.target,
+							event,
+							body,
+							reply,
+						);
+					else this.pushEvent(event, body, reply);
+				} catch (error) {
+					finish(error);
+				}
 			});
-	},
-	renderChat() {
-		this.root.render(
-			React.createElement(ReactChat, {
-				state: this.state,
-				bridge: this.bridge,
-				connected: this.connected,
-				label: this.config.label,
-			}),
-		);
-	},
-	disconnected() {
-		this.connected = false;
-		this.requests.forEach((request) => request.cancel());
-		this.renderChat();
-	},
-	reconnected() {
-		this.connected = true;
-		this.state = { ...this.state, needsSync: true };
-		this.renderChat();
-		this.requestSync();
-	},
-	destroyed() {
-		this.dead = true;
-		cancelAnimationFrame(this.frame);
-		this.removeHandleEvent(this.eventRef);
-		this.requests.forEach((request) => request.cancel());
-		this.root.unmount();
-	},
-};
+		},
+		requestSync() {
+			this.sendChat("sync", { sequences: this.state.sequences }).catch(
+				() => {},
+			);
+		},
+		scheduleRender() {
+			if (!this.frame)
+				this.frame = requestAnimationFrame(() => {
+					this.frame = null;
+					if (!this.dead) this.renderChat();
+				});
+		},
+		renderChat() {
+			this.root.render(
+				React.createElement(ReactChat, {
+					state: this.state,
+					bridge: this.bridge,
+					connected: this.connected,
+					label: this.config.label,
+					options,
+				}),
+			);
+		},
+		disconnected() {
+			this.connected = false;
+			this.requests.forEach((request) => request.cancel());
+			this.renderChat();
+		},
+		reconnected() {
+			this.connected = true;
+			this.state = { ...this.state, needsSync: true };
+			this.renderChat();
+			this.requestSync();
+		},
+		destroyed() {
+			this.dead = true;
+			cancelAnimationFrame(this.frame);
+			this.removeHandleEvent(this.eventRef);
+			this.requests.forEach((request) => request.cancel());
+			this.root.unmount();
+		},
+	};
+}
+
+export const DuskmoonReactChat = createDuskmoonReactChat();