phoenix_duskmoon 9.16.14 → 9.16.16

package/CHANGELOG.md

@@ -1,9 +1,20 @@
 # Unreleased
 
+### Breaking changes
+
+- Remove the six `dm_git_*` repository components, their automatic imports,
+  Storybook demos and delegated Git clipboard runtime. Git presentation is now
+  application-owned. There is no replacement published package; see
+  [the migration guide](guides/migrating-git-components.md) before upgrading.
+
 ### 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.
@@ -32,6 +43,17 @@
 
 ### Fixed
 
+- Hide the simple appbar's mobile toggle and navigation when no menu entries exist,
+  preserving its logo and user-profile slots.
+- Generate React Chat submission IDs on HTTP LAN origins with a cryptographic
+  UUIDv4 fallback when the native `crypto.randomUUID()` API is unavailable.
+- 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

package/README.md

@@ -14,6 +14,11 @@ Requires Elixir `>= 1.18` and `tailwindcss >= 4.0`.
 
 See the [docs](https://hexdocs.pm/phoenix_duskmoon/) for more information.
 
+The unreleased removal of Git repository components is a breaking API change.
+Applications using `dm_git_*` helpers or the Git clipboard runtime must migrate
+to application-owned components before upgrading; see the
+[Git component migration guide](https://github.com/duskmoon-dev/phoenix-duskmoon-ui/blob/main/apps/phoenix_duskmoon/guides/migrating-git-components.md).
+
 
 ## Install
 

package/assets/js/phoenix_duskmoon.js

@@ -11,13 +11,9 @@ const DM_EVENTS = [
   "dm-submit", "dm-select", "dm-close", "dm-open", "dm-toggle",
 ];
 
-const COPY_SELECTOR = "[data-copy-value]";
-const COPY_FEEDBACK_DURATION = 2000;
-const COPY_LISTENER = Symbol.for("phoenix-duskmoon.copy-listener");
 const DIALOG_SELECTOR = 'dialog[data-dm-confirm-dialog="true"]';
 const DIALOG_CONFIRM_SELECTOR = '[data-dm-confirm-action="true"]';
 const DIALOG_BEHAVIOR_LISTENERS = Symbol.for("phoenix-duskmoon.dialog-behavior-listeners");
-const copyFeedback = new WeakMap();
 
 /**
  * WebComponentHook - Universal LiveView ↔ Custom Element bridge
@@ -262,106 +258,6 @@ export const FormElementHook = {
   },
 };
 
-/** Copy text with the Clipboard API, falling back only when it is unavailable. */
-export async function copyTextToClipboard(value, environment = globalThis) {
-  const clipboard = environment.navigator?.clipboard;
-
-  if (typeof clipboard?.writeText === "function") {
-    await clipboard.writeText(value);
-    return;
-  }
-
-  const document = environment.document;
-
-  if (!document?.body || typeof document.execCommand !== "function") {
-    throw new Error("Clipboard API is unavailable");
-  }
-
-  const textArea = document.createElement("textarea");
-  const activeElement = document.activeElement;
-  textArea.value = value;
-  textArea.setAttribute("readonly", "");
-  textArea.style.position = "fixed";
-  textArea.style.opacity = "0";
-  document.body.appendChild(textArea);
-
-  try {
-    textArea.focus();
-    textArea.select();
-
-    if (!document.execCommand("copy")) {
-      throw new Error("Clipboard copy command failed");
-    }
-  } finally {
-    document.body.removeChild(textArea);
-    activeElement?.focus?.();
-  }
-}
-
-function copyStatus(button) {
-  const sibling = button.nextElementSibling;
-
-  if (sibling?.matches?.("[data-copy-status]")) {
-    return sibling;
-  }
-
-  return button.parentElement?.querySelector?.("[data-copy-status]") ?? null;
-}
-
-function showCopyFeedback(button, message, state, options) {
-  const label = button.querySelector?.("[data-copy-label]");
-  const status = copyStatus(button);
-  const previous = copyFeedback.get(button);
-  const cancelReset = options.cancelReset ?? globalThis.clearTimeout;
-  const scheduleReset = options.scheduleReset ?? globalThis.setTimeout;
-
-  if (previous?.timer !== undefined) {
-    cancelReset(previous.timer);
-  }
-
-  const originalLabel = previous?.originalLabel ?? label?.textContent ?? "Copy";
-
-  if (label) label.textContent = message;
-  if (status) status.textContent = message;
-  button.dataset.copyState = state;
-
-  const timer = scheduleReset(() => {
-    if (label) label.textContent = originalLabel;
-    if (status) status.textContent = "";
-    delete button.dataset.copyState;
-    copyFeedback.delete(button);
-  }, COPY_FEEDBACK_DURATION);
-
-  copyFeedback.set(button, { originalLabel, timer });
-}
-
-/** Handle clicks from any descendant of a generated copy control. */
-export async function handleClipboardClick(event, options = {}) {
-  const button = event.target?.closest?.(COPY_SELECTOR);
-
-  if (!button || button.disabled || button.getAttribute?.("aria-disabled") === "true") {
-    return;
-  }
-
-  const copy = options.copy ?? copyTextToClipboard;
-
-  try {
-    await copy(button.dataset.copyValue);
-    showCopyFeedback(button, button.dataset.copySuccess ?? "Copied", "success", options);
-  } catch (_error) {
-    showCopyFeedback(button, button.dataset.copyFailure ?? "Copy failed", "error", options);
-  }
-}
-
-/** Install one delegated listener so LiveView-patched copy controls also work. */
-export function installClipboardBehavior(root = globalThis.document, options = {}) {
-  if (!root?.addEventListener || root[COPY_LISTENER]) return;
-
-  const listener = (event) => handleClipboardClick(event, options);
-  root.addEventListener("click", listener);
-  root[COPY_LISTENER] = listener;
-}
-
 /** Close the current confirm dialog before submit/reset/custom command default actions. */
 export function handleDialogConfirmClick(event) {
   const path = event.composedPath?.() ?? [];
@@ -379,7 +275,6 @@ export function installDialogBehavior(root = globalThis.document) {
   root[DIALOG_BEHAVIOR_LISTENERS] = handleDialogConfirmClick;
 }
 
-installClipboardBehavior();
 installDialogBehavior();
 
 // Export to window for non-module usage

package/assets/js/react_chat/chat.js

@@ -131,6 +131,21 @@ const Message = memo(function Message(props) {
 	);
 });
 
+function requestId() {
+	if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
+	const bytes = crypto.getRandomValues(new Uint8Array(16));
+	bytes[6] = (bytes[6] & 0x0f) | 0x40;
+	bytes[8] = (bytes[8] & 0x3f) | 0x80;
+	const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0"));
+	return [
+		hex.slice(0, 4).join(""),
+		hex.slice(4, 6).join(""),
+		hex.slice(6, 8).join(""),
+		hex.slice(8, 10).join(""),
+		hex.slice(10).join(""),
+	].join("-");
+}
+
 // A composer owns its draft/attachments. This helper only owns admission and UI requests.
 export function useChatSubmission({ bridge, canSubmit }) {
 	const [busy, setBusy] = useState(false);
@@ -151,7 +166,7 @@ export function useChatSubmission({ bridge, canSubmit }) {
 		setNotice("");
 		try {
 			return await bridge.send("send", {
-				request_id: crypto.randomUUID(),
+				request_id: requestId(),
 				...payload,
 			});
 		} catch (error) {

package/assets/js/react_form/component.js

@@ -10,30 +10,41 @@ 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 };
+  const common = { disabled: Boolean(disabled || config.disabled), "aria-label": label, "aria-invalid": errors?.length ? "true" : undefined, "aria-describedby": errors?.length ? errorId : undefined };
+  const textAttributes = { placeholder: config.placeholder ?? undefined, autoComplete: config.autocomplete ?? undefined, required: config.required, readOnly: config.readonly };
   let control;
 
   switch (config.type) {
     case "checkbox":
-      control = h(Checkbox, { ...common, checked: Boolean(value), onChange: (event) => onChange(event.target.checked) });
+      control = h(Checkbox, { ...common, required: config.required, checked: Boolean(value), onChange: (event) => onChange(event.target.checked) });
       break;
     case "number":
-      control = h(InputNumber, { ...common, value: value ?? null, onChange });
+      // TODO(upstream): duskmoon-dev/duskmoon-react#82
+      // WORKAROUND(upstream): duskmoon-dev/duskmoon-react#82 — readOnly does not guard upstream stepping.
+      control = h(InputNumber, { ...common, ...textAttributes, min: config.min ?? undefined, max: config.max ?? undefined, step: config.step ?? undefined,
+        controls: config.readonly ? false : undefined, keyboard: config.readonly ? false : undefined, value: value ?? null, onChange });
       break;
     case "select":
     case "multiselect":
-      control = h(Select, { ...common, value: value ?? undefined, mode: config.type === "multiselect" ? "multiple" : undefined,
+      // TODO(upstream): duskmoon-dev/duskmoon-react#83
+      // WORKAROUND(upstream): duskmoon-dev/duskmoon-react#83 — only the mounted trigger can receive required ARIA in 0.5.0.
+      control = h(Select, { ...common, placeholder: config.placeholder ?? undefined, ref: (container) => {
+        const trigger = container?.querySelector('button[aria-haspopup="listbox"]');
+        if (config.required) trigger?.setAttribute("aria-required", "true");
+        else trigger?.removeAttribute("aria-required");
+      }, 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) });
+      control = h("textarea", { ...common, ...textAttributes, rows: config.rows ?? undefined, 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) });
+      control = h(Input, { ...common, ...textAttributes, type: config.type, value: value ?? "", onChange: (event) => onChange(event.target.value) });
   }
 
   return h(Form.Item, {
     label,
+    required: config.required,
     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

@@ -3,7 +3,7 @@ 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";
+import { collectValues, fieldKey, getAt, nativeValue, pathOf, setAt, setNativeValue } 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]) => {
@@ -26,10 +26,10 @@ export const DuskmoonReactForm = {
   },
   mountForm() {
     this.form = this.el.querySelector("[data-dm-react-form]");
-    const nativeValues = collectValues([...this.form.querySelectorAll("[name]")]);
+    this.fields = [...this.el.querySelectorAll("[data-dm-react-field]")];
+    const nativeValues = collectValues(this.nativeControls());
     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();
@@ -42,6 +42,7 @@ export const DuskmoonReactForm = {
     this.renderSchema();
   },
   renderSchema() {
+    // TODO(upstream): duskmoon-dev/duskmoon-react#85 - JsonSchemaForm has no native form class prop.
     this.schemaRoot.render(React.createElement(ReactSchemaForm, {
       key: this.schemaRevision, compiled: this.compiledSchema, value: this.values,
       defaultValue: this.initialValues, errors: this.errors, disabled: this.disconnectedState,
@@ -68,18 +69,23 @@ export const DuskmoonReactForm = {
       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;
+  nativeControls() {
+    const managedPaths = this.fields.map((element) => pathOf(parseJSON(element.dataset.dmReactField).name).map(String));
+    return [...this.form.querySelectorAll("input[name], select[name], textarea[name]")].filter((element) => {
+      if (element.closest("[data-dm-react-field]")) return false;
+      const path = pathOf(element.name).map(String);
+      return !managedPaths.some((managed) => managed.slice(0, Math.min(path.length, managed.length)).every((key, index) => key === path[index]));
     });
   },
+  bindNative() {
+    this.nativeHandler = (event) => {
+      const controls = this.nativeControls(); const element = event.target;
+      if (controls.includes(element)) this.change(element.name, nativeValue(element, controls));
+    };
+    this.form.addEventListener("input", this.nativeHandler); this.form.addEventListener("change", this.nativeHandler);
+  },
   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;
+    return nativeValue(element, this.nativeControls());
   },
   bindForm() {
     this.submitHandler = (event) => { event.preventDefault(); this.submit(); };
@@ -94,7 +100,15 @@ export const DuskmoonReactForm = {
     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); },
+  submit() {
+    clearTimeout(this.changeTimer); const event = this.el.getAttribute("phx-submit"); if (!event || this.disconnectedState) return;
+    if (this.form) {
+      if (this.form.noValidate === false && !this.form.reportValidity()) return;
+      const controls = this.nativeControls();
+      controls.forEach((element) => { this.values = setAt(this.values, element.name, nativeValue(element, controls)); });
+    }
+    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) } : {}) };
@@ -109,9 +123,9 @@ export const DuskmoonReactForm = {
     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();
+    this.nativeControls().forEach((element) => setNativeValue(element, 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()); },
+  destroyed() { this.destroyedState = true; clearTimeout(this.changeTimer); this.schemaRoot?.unmount(); this.form?.removeEventListener("submit", this.submitHandler); this.form?.removeEventListener("reset", this.resetHandler); this.form?.removeEventListener("input", this.nativeHandler); this.form?.removeEventListener("change", this.nativeHandler); this.roots.forEach(({ root }) => root.unmount()); },
 };

package/assets/js/react_form/values.js

@@ -17,13 +17,27 @@ export function setAt(values, name, value) {
   return result;
 }
 
+function isCheckboxGroup(element) {
+  return element.type === "checkbox" && element.name.endsWith("[]");
+}
+
+export function nativeValue(element, elements = [element]) {
+  if (isCheckboxGroup(element)) {
+    return elements.filter((control) => control.type === "checkbox" && control.name === element.name && control.checked)
+      .map((control) => control.value);
+  }
+  if (element.type === "checkbox") return Boolean(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;
+}
+
+export function setNativeValue(element, value) {
+  if (element.type === "checkbox") {
+    element.checked = isCheckboxGroup(element) ? Array.isArray(value) && value.includes(element.value) : Boolean(value);
+  } else element.value = value ?? "";
+}
+
 export function collectValues(elements) {
-  return elements.reduce((values, element) => {
-    let value;
-    if (element.type === "checkbox") value = Boolean(element.checked);
-    else if (element.type === "number") value = element.value === "" ? null : Number(element.value);
-    else if (element.multiple) value = [...element.selectedOptions].map((option) => option.value);
-    else value = element.value;
-    return setAt(values, element.name, value);
-  }, {});
+  return elements.reduce((values, element) => setAt(values, element.name, nativeValue(element, elements)), {});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_duskmoon",
-  "version": "9.16.14",
+  "version": "9.16.16",
   "type": "module",
   "exports": {
     ".": "./priv/static/assets/js/phoenix_duskmoon.js",