phoenix_duskmoon 9.14.0 → 9.16.1

package/README.md

@@ -143,17 +143,17 @@ Components that require hooks:
 ## Available Components
 
 - **Action**: buttons, dropdowns, floating actions, links, menus, swaps, toggles
-- **Data Display**: accordion, avatar, badge, card, carousel, chat, chat scroll, chip, collapse, countdown, datetime, diff, keyboard keys, flash, git repository, list, markdown, markdown body, pagination, popover, progress, radial progress, skeleton, stat, table, timeline, tooltip
+- **Data Display**: accordion, avatar, badge, card, carousel, chat, chat scroll, chip, collapse, countdown, datetime, diff, flash, git repository, list, markdown, markdown body, pagination, popover, progress, radial progress, skeleton, stat, table, timeline, tooltip
 - **Data Entry**: autocomplete, cascader, checkbox, compact input, file upload, filter group, form, input, multi-select, OTP input, PIN input, radio, rating, segment control, select, slider, switch, textarea, time input, tree select
 - **Feedback**: dialog, loading, snackbar, toast
-- **Navigation**: actionbar, appbar, bottom nav, breadcrumb, left menu, megamenu, navbar, nested menu, page footer, page header, stepper, steps, tabs
-- **Layout**: bottom sheet, divider, drawer, hero, indicator, join, mask, sidebar layout, stack, theme switcher
+- **Navigation**: actionbar, appbar, bottom nav, breadcrumb, left menu, megamenu, navbar, page footer, page header, stepper, tabs
+- **Layout**: bottom sheet, divider, drawer, sidebar layout, theme switcher
 - **CSS Art**: button noise, eclipse, plasma ball, signature, snow, spotlight search
 
 
 ## Upstream design alignment
 
-The current frontend uses Core/CSS Art 1.19.9 and Elements/Art Elements 1.7.6.
+The current frontend uses Core/CSS Art 1.19.10 and Elements/Art Elements 1.8.0.
 Individually published element dependencies are pinned to their current versions;
 see the [contract audit](apps/phoenix_duskmoon/guides/upstream-design-alignment.md) for the exact set.
 
@@ -163,10 +163,10 @@ native scrolling, swap uses a checkbox, floating actions and megamenu
 use the browser Popover API. No element registration is needed for these primitives.
 
 ```heex
-<.dm_indicator>
-  <:indicator><span class="badge badge-primary">3</span></:indicator>
+<div class="indicator">
+  <span class="indicator-item badge badge-primary" aria-label="3 unread messages">3</span>
   <button type="button" class="btn">Inbox</button>
-</.dm_indicator>
+</div>
 
 <.dm_sidebar_layout>
   <:sidebar><nav aria-label="Workspace">Workspace links</nav></:sidebar>

package/assets/css/element-theme-bridge.css

@@ -29,12 +29,10 @@ el-dm-art-snowball-preloader,
 el-dm-art-sun,
 el-dm-art-synthwave-starfield,
 el-dm-autocomplete,
-el-dm-badge,
 el-dm-bottom-navigation,
 el-dm-bottom-sheet,
 el-dm-breadcrumbs,
 el-dm-button,
-el-dm-card,
 el-dm-cascader,
 el-dm-chip,
 el-dm-circle-menu,
@@ -60,7 +58,6 @@ el-dm-progress,
 el-dm-segment-control,
 el-dm-select,
 el-dm-slider,
-el-dm-stepper,
 el-dm-switch,
 el-dm-table,
 el-dm-tabs,

package/assets/css/phoenix_duskmoon.css

@@ -3,6 +3,8 @@
 @source "../../lib/**/*.ex";
 
 @import "tailwindcss";
+@import "@duskmoon-dev/core/base.css";
+@import "@duskmoon-dev/components/styles.css";
 
 /* DuskMoon UI design system — syntactic sugar for @duskmoon-dev/core */
 @plugin "@duskmoon-dev/core/plugin";

package/assets/js/react_chat/chat.js

@@ -0,0 +1,225 @@
+import React, { memo, useEffect, useId, useRef, useState } from "react";
+import { Markdown } from "@duskmoon-dev/components/markdown";
+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 Message = memo(function Message({ message, bridge, targetId, timeline }) {
+	const [notice, setNotice] = useState("");
+	return h(
+		Chat,
+		{
+			id: targetId,
+			role: "article",
+			placement: message.role === "user" ? "end" : "start",
+			timeline,
+			"data-message-id": message.id,
+		},
+		h(Chat.Header, null, message.author || message.role),
+		h(
+			Chat.Bubble,
+			{ streaming: message.status === "streaming" },
+			...(message.tools || []).map((tool) =>
+				h(
+					Chat.Tool,
+					{ key: tool.id, status: 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(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) =>
+					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,
+					),
+				),
+			),
+		),
+		h("span", { role: "status" }, notice),
+	);
+});
+
+export function ReactChat({ state, bridge, connected, label }) {
+	const transcriptId = useId();
+	const [draft, setDraft] = useState("");
+	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;
+		pending.current = true;
+		setBusy(true);
+		setNotice("");
+		try {
+			await bridge.send("send", { text, request_id: crypto.randomUUID() });
+			if (alive.current) setDraft((current) => (current === text ? "" : current));
+		} catch (error) {
+			if (alive.current) setNotice(error.message);
+		} finally {
+			pending.current = false;
+			if (alive.current) setBusy(false);
+		}
+	}
+	return h(
+		"section",
+		{ className: "flex flex-col gap-3 h-full", "aria-label": label },
+		h(
+			Chat.Scroll,
+			{
+				ref: scroll,
+				className: "flex-1 min-h-0",
+				"data-chat-messages": true,
+				onScroll: () => {
+					const el = scroll.current;
+					follow.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
+				},
+			},
+			h(
+				Chat.ScrollTrack,
+				{ role: "navigation", "aria-label": "Assistant replies" },
+				replies.map((message) =>
+					h(Chat.ScrollIndicator, {
+						key: message.id,
+						targetId: targetId(message),
+						timeline: timelines.get(message.id),
+						onClick: () => {
+							follow.current = false;
+						},
+					}),
+				),
+			),
+			h(
+				Chat.ScrollBody,
+				{ className: "gap-3" },
+				state.messages.map((message) =>
+					h(Message, {
+						key: message.id,
+						message,
+						bridge,
+						targetId: targetId(message),
+						timeline: timelines.get(message.id),
+					}),
+				),
+			),
+		),
+		h(
+			Button,
+			{
+				type: "button",
+				appearance: "ghost",
+				onClick: () => {
+					follow.current = true;
+					scroll.current.scrollTop = scroll.current.scrollHeight;
+				},
+			},
+			"Jump to latest",
+		),
+		(!connected || state.needsSync) &&
+			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",
+			),
+			streaming &&
+				h(
+					Button,
+					{
+						type: "button",
+						disabled: !connected,
+						onClick: () => bridge.send("stop", {}).catch((error) => setNotice(error.message)),
+					},
+					"Stop",
+				),
+		),
+	);
+}

package/assets/js/react_chat/index.js

@@ -0,0 +1,105 @@
+import React from "react";
+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,
+			);
+			const body = {
+				...payload,
+				id: this.el.id,
+				conversation_id: this.state.conversationId,
+			};
+			const reply = (response) =>
+				finish(
+					response?.status === "ok"
+						? null
+						: new Error(response?.message || "Chat request rejected"),
+					response,
+				);
+			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();
+			});
+	},
+	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();
+	},
+};

package/assets/js/react_chat/state.js

@@ -0,0 +1,84 @@
+export function initialState(conversationId, messages = []) {
+	return {
+		conversationId,
+		messages,
+		sequences: {},
+		error: null,
+		needsSync: false,
+	};
+}
+
+export function reduceChat(state, event) {
+	if (event?.conversation_id !== state.conversationId) return state;
+	if (["chat.snapshot", "chat.reset"].includes(event.type)) {
+		return {
+			...initialState(state.conversationId, event.messages || []),
+			sequences: event.sequences || {},
+		};
+	}
+	if (
+		!event.message_id ||
+		!Number.isSafeInteger(event.sequence) ||
+		event.sequence < 1
+	)
+		return state;
+	const last = state.sequences[event.message_id] || 0;
+	if (event.sequence <= last) return state;
+	if (event.sequence !== last + 1) return { ...state, needsSync: true };
+	if (state.needsSync) return state;
+	const index = state.messages.findIndex(
+		(message) => message.id === event.message_id,
+	);
+	let messages = state.messages;
+	if (event.type === "chat.message") {
+		if (!event.message || event.message.id !== event.message_id) return state;
+		messages =
+			index < 0
+				? [...messages, event.message]
+				: messages.map((m, i) => (i === index ? event.message : m));
+	} else {
+		if (index < 0) return { ...state, needsSync: true };
+		const message = messages[index];
+		let next;
+		switch (event.type) {
+			case "chat.delta":
+				if (message.status !== "streaming" || typeof event.text !== "string")
+					return state;
+				next = { ...message, content: (message.content || "") + event.text };
+				break;
+			case "chat.tool":
+				if (!event.tool?.id) return state;
+				next = {
+					...message,
+					tools: [
+						...(message.tools || []).filter(
+							(tool) => tool.id !== event.tool.id,
+						),
+						event.tool,
+					],
+				};
+				break;
+			case "chat.complete":
+				next = {
+					...message,
+					status: event.status === "cancelled" ? "cancelled" : "complete",
+				};
+				break;
+			case "chat.error":
+				next = {
+					...message,
+					status: "error",
+					error: event.message || "Generation failed",
+				};
+				break;
+			default:
+				return state;
+		}
+		messages = messages.map((m, i) => (i === index ? next : m));
+	}
+	return {
+		...state,
+		messages,
+		sequences: { ...state.sequences, [event.message_id]: event.sequence },
+	};
+}

package/assets/js/react_form/component.js

@@ -0,0 +1,40 @@
+import React, { useId } from "react";
+import { Form } from "@duskmoon-dev/components/form";
+import { Input } from "@duskmoon-dev/components/input";
+import { InputNumber } from "@duskmoon-dev/components/input-number";
+import { Checkbox } from "@duskmoon-dev/components/checkbox";
+import { Select } from "@duskmoon-dev/components/select";
+
+const h = React.createElement;
+
+export function ReactField({ config, value, errors, disabled, onChange }) {
+  const errorId = useId();
+  const label = config.label || (Array.isArray(config.name) ? config.name.join(".") : config.name);
+  const common = { disabled, "aria-label": label, "aria-invalid": errors?.length ? "true" : undefined, "aria-describedby": errors?.length ? errorId : undefined };
+  let control;
+
+  switch (config.type) {
+    case "checkbox":
+      control = h(Checkbox, { ...common, checked: Boolean(value), onChange: (event) => onChange(event.target.checked) });
+      break;
+    case "number":
+      control = h(InputNumber, { ...common, value: value ?? null, onChange });
+      break;
+    case "select":
+    case "multiselect":
+      control = h(Select, { ...common, value: value ?? undefined, mode: config.type === "multiselect" ? "multiple" : undefined,
+        options: config.options || [], showSearch: true, allowClear: true, onChange: (next) => onChange(next ?? null) });
+      break;
+    case "textarea":
+      control = h("textarea", { ...common, className: "textarea", value: value ?? "", onChange: (event) => onChange(event.target.value) });
+      break;
+    default:
+      control = h(Input, { ...common, type: config.type, value: value ?? "", onChange: (event) => onChange(event.target.value) });
+  }
+
+  return h(Form.Item, {
+    label,
+    className: errors?.length ? "form-item-error" : undefined,
+    help: errors?.length ? h(Form.ErrorList, { id: errorId, errors, role: "alert" }) : undefined,
+  }, control);
+}

package/assets/js/react_form/index.js

@@ -0,0 +1,117 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ReactField } from "./component.js";
+import { compileForm } from "@duskmoon-dev/components/json-schema-form";
+import { ReactSchemaForm, changedPath, schemaErrors } from "./schema.js";
+import { collectValues, fieldKey, getAt, pathOf, setAt } from "./values.js";
+function parseJSON(value, fallback = {}) { try { return JSON.parse(value); } catch { return fallback; } }
+function flattenErrors(errors, prefix = [], result = {}) {
+  Object.entries(errors || {}).forEach(([key, value]) => {
+    const path = [...prefix, key];
+    if (Array.isArray(value)) result[path.join(".")] = value;
+    else if (value && typeof value === "object") flattenErrors(value, path, result);
+  });
+  return result;
+}
+
+export const DuskmoonReactForm = {
+  mounted() {
+    this.revision = 0; this.roots = new Map(); this.disconnectedState = false;
+    this.schemaElement = this.el.querySelector("[data-dm-react-schema]");
+    if (this.schemaElement) this.mountSchema();
+    else this.mountForm();
+    this.handleEvent("dm:form:reset", (payload) => {
+      if (payload?.id === this.el.id) this.resetForm(payload.values ?? this.initialValues);
+    });
+  },
+  mountForm() {
+    this.form = this.el.querySelector("[data-dm-react-form]");
+    const nativeValues = collectValues([...this.form.querySelectorAll("[name]")]);
+    this.values = { ...nativeValues, ...parseJSON(this.el.dataset.initialValues) };
+    this.initialValues = structuredClone(this.values);
+    this.fields = [...this.el.querySelectorAll("[data-dm-react-field]")];
+    const fieldKeys = this.fields.map((element) => fieldKey(parseJSON(element.dataset.dmReactField).name));
+    if (new Set(fieldKeys).size !== fieldKeys.length) throw new Error("React form field names must be unique");
+    this.mountFields(); this.bindNative(); this.bindForm();
+  },
+  mountSchema() {
+    this.compiledSchema = compileForm(JSON.parse(this.el.dataset.schema));
+    this.values = parseJSON(this.el.dataset.initialValues, this.compiledSchema.initialValue());
+    this.initialValues = structuredClone(this.values);
+    this.schemaRevision = 0; this.schemaRoot = createRoot(this.schemaElement);
+    this.renderSchema();
+  },
+  renderSchema() {
+    this.schemaRoot.render(React.createElement(ReactSchemaForm, {
+      key: this.schemaRevision, compiled: this.compiledSchema, value: this.values,
+      defaultValue: this.initialValues, errors: this.errors, disabled: this.disconnectedState,
+      onChange: (values) => {
+        const path = changedPath(this.values, values);
+        this.values = structuredClone(values); this.errors = {}; this.renderAll(); this.scheduleChange(path);
+      },
+      onErrorsChange: () => { this.errors = {}; this.renderAll(); },
+      onSubmit: (values) => { this.values = structuredClone(values); this.submit(); },
+      onReset: () => this.resetForm(),
+    }));
+  },
+  mountFields() {
+    this.fields.forEach((element) => {
+      const config = parseJSON(element.dataset.dmReactField);
+      const key = fieldKey(config.name); const root = createRoot(element);
+      this.roots.set(key, { config, root }); this.renderField(element);
+    });
+  },
+  renderField(element) {
+    const config = parseJSON(element.dataset.dmReactField); const entry = this.roots.get(fieldKey(config.name));
+    entry?.root.render(React.createElement(ReactField, {
+      config, value: getAt(this.values, config.name), errors: this.errors?.[fieldKey(config.name)], disabled: this.disconnectedState,
+      onChange: (value) => this.change(config.name, value),
+    }));
+  },
+  bindNative() {
+    this.native = [...this.form.querySelectorAll("[name]")].filter((element) => !element.closest("[data-dm-react-field]"));
+    this.native.forEach((element) => {
+      const handler = () => this.change(element.name, this.nativeValue(element));
+      element.addEventListener("input", handler); element.addEventListener("change", handler); element.__dmReactHandler = handler;
+    });
+  },
+  nativeValue(element) {
+    if (element.type === "checkbox") return element.checked;
+    if (element.type === "number") return element.value === "" ? null : Number(element.value);
+    if (element.multiple) return [...element.selectedOptions].map((option) => option.value);
+    return element.value;
+  },
+  bindForm() {
+    this.submitHandler = (event) => { event.preventDefault(); this.submit(); };
+    this.resetHandler = () => setTimeout(() => this.resetForm(), 0);
+    this.form.addEventListener("submit", this.submitHandler); this.form.addEventListener("reset", this.resetHandler);
+  },
+  change(name, value) {
+    this.values = setAt(this.values, name, value); this.errors = { ...this.errors, [fieldKey(name)]: [] }; this.renderAll();
+    this.scheduleChange(name);
+  },
+  scheduleChange(name) {
+    const event = this.el.getAttribute("phx-change"); if (!event || this.disconnectedState) return;
+    clearTimeout(this.changeTimer); this.changeTimer = setTimeout(() => this.send(event, name), Number(this.el.getAttribute("phx-debounce") || 0));
+  },
+  submit() { clearTimeout(this.changeTimer); const event = this.el.getAttribute("phx-submit"); if (event && !this.disconnectedState) this.send(event); },
+  send(event, changed) {
+    const revision = ++this.revision; const values = this.values;
+    const payload = { id: this.el.id, values, revision, ...(changed ? { changed: pathOf(changed) } : {}) };
+    const target = this.el.getAttribute("phx-target"); const callback = (reply) => {
+      if (this.destroyedState || revision !== this.revision || values !== this.values || !reply) return;
+      this.errors = this.schemaRoot ? schemaErrors(reply.errors) : flattenErrors(reply.errors); this.renderAll();
+    };
+    if (target) this.pushEventTo(target, event, payload, callback); else this.pushEvent(event, payload, callback);
+  },
+  renderAll() { if (this.schemaRoot) this.renderSchema(); else this.fields.forEach((element) => this.renderField(element)); },
+  resetForm(values = this.initialValues) {
+    clearTimeout(this.changeTimer);
+    this.values = structuredClone(values); this.errors = {}; this.revision++;
+    if (this.schemaRoot) { this.schemaRevision++; this.renderAll(); return; }
+    this.native.forEach((element) => { if (element.type === "checkbox") element.checked = Boolean(getAt(this.values, element.name)); else element.value = getAt(this.values, element.name) ?? ""; }); this.renderAll();
+  },
+  disconnected() { clearTimeout(this.changeTimer); this.disconnectedState = true; this.renderAll(); },
+  reconnected() { this.disconnectedState = false; this.renderAll(); },
+  destroyed() { this.destroyedState = true; clearTimeout(this.changeTimer); this.schemaRoot?.unmount(); this.form?.removeEventListener("submit", this.submitHandler); this.form?.removeEventListener("reset", this.resetHandler); this.native?.forEach((element) => { element.removeEventListener("input", element.__dmReactHandler); element.removeEventListener("change", element.__dmReactHandler); }); this.roots.forEach(({ root }) => root.unmount()); },
+};