@songsid/agend 2.3.0-beta.9 → 2.3.0

package/dist/ui/shared/text-undo.js

@@ -0,0 +1,210 @@
+// #2342: undo and redo in every text field — one history per field, kept here instead of the browser's.
+//
+// The browser's own undo is one stack for the whole page (Chromium and WebKit alike): Ctrl+Z in one box undoes the
+// last edit in whichever box had it, and any script write to a field's value (a completion, a clear, a re-render
+// that differs from the box) wipes the stack. So the keys are taken here, but only in a text field:
+// - undo: Ctrl+Z (⌘Z on a Mac); redo: Ctrl+Shift+Z or Ctrl+Y (⌘⇧Z on a Mac, where Ctrl+Y is not redo). Anywhere else
+//   (a button, the page, a select) nothing is taken; a key with Alt, or mid-IME-composition, is left alone too.
+// - a field's steps are recorded from its edits (beforeinput, input): typing is grouped into one step until a pause
+//   (UNDO.PAUSE_MS), a space, a different kind of edit (typing ↔ deleting), a paste, a line break or the caret moving
+//   elsewhere; an IME composition is one step, recorded when it ends.
+// - the browser's own Undo and Redo commands (its Edit menu, a context menu: a trusted beforeinput historyUndo /
+//   historyRedo) go through the same history: cancelled and done here. Where a browser cannot cancel them (or a script
+//   runs execCommand("undo"), with no beforeinput at all), its own undo goes ahead and what it leaves resets the field's
+//   history (never a step that would undo the undo).
+// - a script's change to a field's value the person should be able to undo (a completion, a pick, putting text back)
+//   calls recordEdit(field) first: the change becomes a step. Any other change (a clear after send, a reload after
+//   save) resets the field's history, as the browser's own undo does — a sent message is never undone back into the box.
+// - undo and redo write the value and the caret back and dispatch `input`, so the page's state (Preact) follows.
+// - password fields are left to the browser: no secret is kept here.
+
+import { useState } from "./app-html.js";
+
+export const UNDO = { PAUSE_MS: 1000, MAX_STEPS: 100 };
+
+const TEXT_TYPES = new Set(["text", "search", "url", "email", "tel", "number", ""]);
+/** A field this keeps a history for: a textarea, or a text-like input (never a password) that is not read-only or disabled. */
+export function isTextField(el) {
+  if (!el || el.readOnly || el.disabled) return false;
+  const tag = (el.tagName || "").toLowerCase();
+  if (tag === "textarea") return true;
+  return tag === "input" && TEXT_TYPES.has((el.getAttribute && el.getAttribute("type") || el.type || "").toLowerCase());
+}
+
+const histories = new WeakMap();
+/** The value and the caret of `el`. A number input has no selection: its caret is null. */
+function snap(el) {
+  let s = null, e = null;
+  try { s = el.selectionStart; e = el.selectionEnd; } catch { /* a number input */ }
+  return { v: String(el.value ?? ""), s: s ?? null, e: e ?? null };
+}
+function historyFor(el) {
+  let h = histories.get(el);
+  if (!h) { h = { undo: [], redo: [], last: snap(el), kind: null, at: 0, marked: null, composing: false }; histories.set(el, h); }
+  return h;
+}
+/**
+ * Bring the history up to the field's value: a change made by a script since the last edit is a step when recordEdit
+ * marked it, and otherwise resets the history (what the browser does too).
+ */
+function sync(el, h) {
+  const now = String(el.value ?? "");
+  if (now === h.last.v) { h.marked = null; return; }
+  if (h.marked) { push(h.undo, h.marked); h.redo = []; }
+  else { h.undo = []; h.redo = []; }
+  h.marked = null;
+  h.last = snap(el);
+  h.kind = null;
+}
+function push(list, s) {
+  list.push(s);
+  if (list.length > UNDO.MAX_STEPS) list.shift();
+}
+
+/** The kind of an edit, for grouping: consecutive typing (or deleting) of one kind is one step. */
+function kindOf(e) {
+  const t = e.inputType || "";
+  if (t === "insertText") return e.data && /\s/.test(e.data) ? "space" : "type";
+  if (t === "deleteContentBackward" || t === "deleteContentForward") return "delete";
+  return "other";                                   // a paste, a drop, a cut, a line break, a word delete: its own step
+}
+
+/** Called before a script changes `el`'s value in a way the person may undo: the value now is the step to go back to. */
+export function recordEdit(el) {
+  if (!isTextField(el)) return;
+  const h = historyFor(el);
+  sync(el, h);
+  h.marked = snap(el);
+  h.kind = null;
+}
+
+/** The history kept for `el` (tests). */
+export function historyOf(el) {
+  const h = histories.get(el);
+  return h ? { undo: h.undo.map((s) => s.v), redo: h.redo.map((s) => s.v), last: h.last.v } : null;
+}
+
+/** Put snapshot `s` into `el` and tell the page (an `input` event, as an edit would). */
+function apply(el, s, type, win) {
+  el.value = s.v;
+  if (s.s != null) { try { el.setSelectionRange(s.s, s.e ?? s.s); } catch { /* a number input */ } }
+  const Ev = win && typeof win.InputEvent === "function" ? win.InputEvent : win && win.Event;
+  if (Ev) el.dispatchEvent(new Ev("input", { bubbles: true, ...(Ev === win.InputEvent ? { inputType: type } : {}) }));
+}
+
+/**
+ * Undo (or redo) on `el`. False when there is nothing to do.
+ */
+export function step(el, redo, win = typeof window !== "undefined" ? window : null) {
+  if (!isTextField(el)) return false;
+  const h = historyFor(el);
+  sync(el, h);
+  const from = redo ? h.redo : h.undo, to = redo ? h.undo : h.redo;
+  if (!from.length) return false;
+  to.push(h.last);
+  h.last = from.pop();
+  h.kind = null;
+  h.applying = true;
+  try { apply(el, h.last, redo ? "historyRedo" : "historyUndo", win); } finally { h.applying = false; }
+  h.last = snap(el);
+  return true;
+}
+
+/** Which history key `e` is, or null: "undo", "redo". `mac`: ⌘ is the modifier and Ctrl+Y is not redo. */
+export function historyKey(e, mac) {
+  if (e.altKey || e.isComposing || e.keyCode === 229) return null;
+  const mod = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+  if (!mod) return null;
+  const k = (e.key || "").toLowerCase();
+  if (k === "z") return e.shiftKey ? "redo" : "undo";
+  if (k === "y" && !e.shiftKey && !mac) return "redo";
+  return null;
+}
+
+/**
+ * Keep a history for every text field under `doc` and take the undo/redo keys in them. Returns an uninstall function.
+ */
+export function installTextUndo({ doc = document, win = typeof window !== "undefined" ? window : null, mac = false } = {}) {
+  const field = (e) => (isTextField(e.target) ? e.target : null);
+  const onBefore = (e) => {
+    const el = field(e);
+    // WebKit commits a composition after compositionend (deleteCompositionText, insertFromComposition): its step is
+    // the one compositionstart began.
+    if (!el || e.isComposing || /Composition/.test(e.inputType || "")) return;
+    const h = historyFor(el);
+    if (h.applying || h.composing) return;          // a browser that does not flag its composition events
+    if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+      if (e.cancelable) { e.preventDefault(); step(el, e.inputType === "historyRedo", win); }
+      else h.native = true;
+      return;
+    }
+    sync(el, h);
+    const kind = kindOf(e), now = Date.now(), at = snap(el);
+    // The same run of typing (or deleting) goes on: one step. A space ends a word's step (the next word is a new one).
+    // Anything else starts a new step from the value now.
+    const same = kind === "space" ? h.kind === "type" : kind !== "other" && kind === h.kind;
+    const goesOn = same && now - h.at < UNDO.PAUSE_MS && at.s === h.last.s && at.e === h.last.e;
+    if (!goesOn) { push(h.undo, at); h.redo = []; }
+    h.kind = kind;
+    h.at = now;
+  };
+  const onInput = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    if (h.applying) return;
+    // The browser's own undo or redo went ahead (one it could not cancel, or a script's execCommand("undo"), which has no
+    // beforeinput): what it left is a change of its own — the history starts afresh.
+    if (h.native || e.inputType === "historyUndo" || e.inputType === "historyRedo") { h.native = false; h.undo = []; h.redo = []; h.kind = null; }
+    h.last = snap(el);                              // mid-composition too: the value the next edit starts from
+  };
+  const onCompStart = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    sync(el, h);
+    push(h.undo, snap(el)); h.redo = [];
+    h.composing = true; h.kind = null;
+  };
+  const onCompEnd = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    h.composing = false;
+    h.last = snap(el);                              // WebKit's last input comes after compositionend: onInput updates it again
+  };
+  const onKey = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const which = historyKey(e, mac);
+    if (!which || historyFor(el).composing) return;
+    e.preventDefault();                             // never the browser's page-wide stack, even when this field has no step
+    step(el, which === "redo", win);
+  };
+  doc.addEventListener("beforeinput", onBefore, true);
+  doc.addEventListener("input", onInput, true);
+  doc.addEventListener("compositionstart", onCompStart, true);
+  doc.addEventListener("compositionend", onCompEnd, true);
+  doc.addEventListener("keydown", onKey, true);
+  return () => {
+    doc.removeEventListener("beforeinput", onBefore, true);
+    doc.removeEventListener("input", onInput, true);
+    doc.removeEventListener("compositionstart", onCompStart, true);
+    doc.removeEventListener("compositionend", onCompEnd, true);
+    doc.removeEventListener("keydown", onKey, true);
+  };
+}
+
+const trimmed = (v) => v.trim();
+/**
+ * A field whose owner keeps its value normalized (trimmed, or a number): the box shows the text as typed and the owner
+ * gets `norm(text)`. Binding the box to the normalized value would rewrite it while the person types (a space vanishes,
+ * "1.50" turns into "1.5") and lose the field's undo history. When the owner's value becomes something the text does not
+ * normalize to (a clear, a load), the box shows `show(value)`.
+ * Returns [text for the box, onText(typed) → the normalized value].
+ */
+export function useTypedText(value, norm = trimmed, show = (v) => (v == null ? "" : String(v))) {
+  const [raw, setRaw] = useState(null);
+  const text = raw !== null && Object.is(norm(raw), value) ? raw : show(value);
+  return [text, (typed) => { setRaw(typed); return norm(typed); }];
+}

package/dist/ui/shared/tokens.css

@@ -166,3 +166,7 @@
 @media (pointer: coarse), (max-width: 899px) {
   input, select, textarea { --fs-xs: 16px; --fs-sm: 16px; --fs-md: 16px; }
 }
+/* #2478: the composer's drawn placeholder (a span over the box) is the box's text in size too. */
+@media (pointer: coarse), (max-width: 899px) {
+  .composer-ph { --fs-md: 16px; }
+}

package/dist/ui/shared/ui-dialog.js

@@ -1,6 +1,7 @@
 // #1408 §7: one dialog for the whole app — the native <dialog> opened with showModal(), so the browser traps focus,
 // makes the rest inert and closes it on Esc. Focus goes back to whatever opened it. On a phone it is a bottom sheet
-// with its own × (app.css). Text and buttons only; no style attribute (#1300).
+// with its own × (app.css). Text and buttons only; no style attribute (#1300). `drawer`: on a desk it comes in from the
+// right edge at full height, the page still in view beside it (the task board's card); a phone keeps the bottom sheet.
 import { html, useEffect, useLayoutEffect, useRef } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t } from "./app-i18n.js";
@@ -9,7 +10,7 @@ import { t } from "./app-i18n.js";
  * <${Dialog} title="Create task" onClose=${…} actions=${html`…`}>…body…</${Dialog}>
  * Rendered = open; the parent unmounts it to close. `busy` keeps Esc and the backdrop from closing it mid-request.
  */
-export function Dialog({ title, onClose, actions, children, busy = false, wide = false, label }) {
+export function Dialog({ title, onClose, actions, children, busy = false, wide = false, drawer = false, label, tools = null }) {
   const ref = useRef(null);
   const opener = useRef(null);
   const busyRef = useRef(busy);
@@ -35,9 +36,9 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     d.addEventListener("click", onClick);
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
   }, [onClose]);
-  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}`} aria-label=${label || title}>
+  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}${drawer ? " dlg-drawer" : ""}`} aria-label=${label || title}>
     <div class="dlg-box">
-      <div class="dlg-head"><h2 class="dlg-title">${title}</h2>
+      <div class="dlg-head"><h2 class="dlg-title">${title}</h2>${tools ? html`<span class="dlg-tools">${tools}</span>` : null}
         <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${() => { if (!busyRef.current) onClose(); }}><${Icon} name="close" /></button></div>
       <div class="dlg-body">${children}</div>
       ${actions ? html`<div class="dlg-actions">${actions}</div>` : null}

package/dist/ui/shared/ui-icons.js

@@ -7,6 +7,8 @@ const P = {
   menu: () => html`<path d="M4 6h16M4 12h16M4 18h16"/>`,
   sidebar: () => html`<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/>`,
   plus: () => html`<path d="M12 5v14M5 12h14"/>`,
+  minus: () => html`<path d="M5 12h14"/>`,                                        // #2333: the lightbox's zoom out
+  fitwidth: () => html`<path d="M3 4v16M21 4v16M7 12h10M10 9l-3 3 3 3M14 9l3 3-3 3"/>`,   // #2333: fit width
   edit: () => html`<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/>`,
   more: () => html`<circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/>`,
   chat: () => html`<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>`,
@@ -37,8 +39,10 @@ const P = {
   type: () => html`<path d="M4 7V5h16v2M9 19h6M12 5v14"/>`,
   chart: () => html`<path d="M3 20h18M6 16v-4M11 16V8M16 16v-6"/>`,
   up: () => html`<path d="M12 19V5M5 12l7-7 7 7"/>`,
+  sort: () => html`<path d="M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4"/>`,   // #2179: the sidebar's sort
   star: () => html`<path d="M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95L12 2.5z"/>`,
   eye: () => html`<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
+  idcard: () => html`<rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="8" cy="11" r="2"/><path d="M5 16a3 3 0 0 1 6 0M14 10h5M14 14h3"/>`,
   check: () => html`<path d="M20 6L9 17l-5-5"/>`,
   inbox: () => html`<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>`,
   bell: () => html`<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>`,

package/dist/ui/shared/ui-menu.js

@@ -4,21 +4,25 @@ import { html, useEffect, useRef, useState } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t } from "./app-i18n.js";
 
-/** items: [{ key, label, icon?, onSelect, danger?, disabled? }] (falsy entries are skipped). */
-export function Menu({ items, label, icon = "more", cls = "" }) {
+/**
+ * items: [{ key, label, icon?, onSelect, danger?, disabled? }] (falsy entries are skipped). `checked` makes a radio item;
+ * `checkbox: true` with `checked` a checkbox item (#2217 hotfix: the chat's card menu), which toggles and keeps the menu
+ * open. `active`: the button shows a pressed look (what it controls is on), without changing its role.
+ */
+export function Menu({ items, label, icon = "more", cls = "", active = false }) {
   const [open, setOpen] = useState(false);
   const btn = useRef(null), list = useRef(null);
   const shown = (items || []).filter(Boolean);
   useEffect(() => {
     if (!open) return undefined;
-    const first = list.current && list.current.querySelector("[role=menuitem]:not([disabled])");
+    const first = list.current && list.current.querySelector("[role=menuitem]:not([disabled]), [role=menuitemradio]:not([disabled]), [role=menuitemcheckbox]:not([disabled])");
     if (first) first.focus();
     const outside = (e) => { if (list.current && !list.current.contains(e.target) && btn.current && !btn.current.contains(e.target)) setOpen(false); };
     document.addEventListener("pointerdown", outside, true);
     return () => document.removeEventListener("pointerdown", outside, true);
   }, [open]);
   function onKey(e) {
-    const all = [...list.current.querySelectorAll("[role=menuitem]:not([disabled])")];
+    const all = [...list.current.querySelectorAll("[role=menuitem]:not([disabled]), [role=menuitemradio]:not([disabled]), [role=menuitemcheckbox]:not([disabled])")];
     const i = all.indexOf(document.activeElement);
     if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setOpen(false); btn.current && btn.current.focus(); }
     else if (e.key === "ArrowDown") { e.preventDefault(); (all[(i + 1) % all.length] || all[0])?.focus(); }
@@ -29,11 +33,20 @@ export function Menu({ items, label, icon = "more", cls = "" }) {
   }
   function choose(item) { setOpen(false); btn.current && btn.current.focus(); item.onSelect(); }
   return html`<div class=${`menu ${cls}`}>
-    <button ref=${btn} type="button" class="icon-btn" aria-haspopup="menu" aria-expanded=${open ? "true" : "false"}
+    <button ref=${btn} type="button" class=${`icon-btn${active ? " active" : ""}`} aria-haspopup="menu" aria-expanded=${open ? "true" : "false"}
       aria-label=${label || t("app.more")} title=${label || t("app.more")} onClick=${() => setOpen(!open)}><${Icon} name=${icon} /></button>
     ${open ? html`<div data-trust="menu" ref=${list} class="menu-list" role="menu" aria-label=${label || t("app.more")} onKeyDown=${onKey}>
-      ${shown.map(item => html`<button key=${item.key} type="button" role="menuitem" class=${`menu-item${item.danger ? " danger" : ""}`}
-        disabled=${!!item.disabled} onClick=${() => choose(item)}>${item.icon ? html`<${Icon} name=${item.icon} size=${16} />` : null}<span>${item.label}</span></button>`)}
+      ${shown.map(item => item.heading
+        ? html`<div key=${item.key} class="menu-heading" role="presentation">${item.label}</div>`
+        : item.checkbox
+          ? html`<button key=${item.key} type="button" role="menuitemcheckbox" aria-checked=${item.checked ? "true" : "false"} class="menu-item menu-radio"
+            disabled=${!!item.disabled} onClick=${() => item.onSelect()}><span class="menu-tick" aria-hidden="true">${item.checked ? html`<${Icon} name="check" size=${16} />` : null}</span><span>${item.label}</span></button>`
+        : item.checked !== undefined
+          // #2196: one of a group of choices (Page colours): a radio item, the chosen one ticked.
+          ? html`<button key=${item.key} type="button" role="menuitemradio" aria-checked=${item.checked ? "true" : "false"} class="menu-item menu-radio"
+            disabled=${!!item.disabled} onClick=${() => choose(item)}><span class="menu-tick" aria-hidden="true">${item.checked ? html`<${Icon} name="check" size=${16} />` : null}</span><span>${item.label}</span></button>`
+          : html`<button key=${item.key} type="button" role="menuitem" class=${`menu-item${item.danger ? " danger" : ""}`}
+            disabled=${!!item.disabled} onClick=${() => choose(item)}>${item.icon ? html`<${Icon} name=${item.icon} size=${16} />` : null}<span>${item.label}</span></button>`)}
     </div>` : null}
   </div>`;
 }

package/dist/ui/shared/ui-toast.js

@@ -1,5 +1,6 @@
-// Toasts: one stack in a corner (under the header on a phone), each gone after a few seconds. Text only.
-import { html, useEffect, useState } from "./app-html.js";
+// Toasts: one stack in a corner (under the header on a phone; above the tabs on the task board), each gone after a few
+// seconds. Text only. A manual popover, so it stands in the top layer above an open dialog (#2299).
+import { html, useEffect, useRef, useState } from "./app-html.js";
 import { createStore } from "./app-store.js";
 
 const toasts = createStore([]);
@@ -14,5 +15,17 @@ export function toast(text, ok = true) {
 export function Toasts() {
   const [list, setList] = useState(toasts.get());
   useEffect(() => toasts.subscribe(setList), []);
-  return html`<div data-trust="toast" class="toasts" role="status" aria-live="polite">${list.map(x => html`<div key=${x.id} class=${`toast ${x.ok ? "ok" : "err"}`}>${x.text}</div>`)}</div>`;
+  // #2299: a manual popover — in the top layer, so an open modal dialog's backdrop does not dim a toast (it did: grey on
+  // grey in the dark theme). Shown again on every new toast, so it is above a dialog opened since. Without popover
+  // support it stays an ordinary fixed box, as before.
+  const box = useRef(null);
+  useEffect(() => {
+    const el = box.current;
+    if (!el || typeof el.showPopover !== "function") return;
+    try {
+      if (el.matches(":popover-open")) el.hidePopover();
+      if (list.length) el.showPopover();
+    } catch { /* a popover that cannot be shown stays where it is */ }
+  }, [list]);
+  return html`<div ref=${box} popover="manual" data-trust="toast" class="toasts" role="status" aria-live="polite">${list.map(x => html`<div key=${x.id} class=${`toast ${x.ok ? "ok" : "err"}`}>${x.text}</div>`)}</div>`;
 }