@2lab.ai/ui 0.0.0-stage → 0.2.0

package/dist/memory-panel.js

@@ -0,0 +1,1255 @@
+import { d as define, U as UiElement, e as esc, f as escAttr, p as prefersReducedMotion } from "./html-elD6Bb_u.js";
+import { d as fmtInt } from "./format-BBGWXPzk.js";
+const styles = `
+:host { --mm-fold: 320ms; --mm-warn: var(--yellow); --mm-danger-bg: color-mix(in srgb, var(--red) 11%, transparent);
+  --mm-mark: color-mix(in srgb, var(--st-wait) 32%, transparent); --mm-well: var(--surface-raised); }
+.mm { container: mm / inline-size; position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-secondary); font-size: 13px; }
+.mm h3, .mm p { margin: 0; }
+.mm ol { margin: 0; padding: 0; }
+.mm :is(button, input, textarea):focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
+.mm-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 2px; }
+.mm-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
+.mm-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 5px; background: var(--mm-well); font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
+.mm-count:empty { display: none; }
+
+/* filters: store chips (radiogroup) · search covering the chips */
+.mm-filters { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border); }
+.mm-chips, .mm-search { grid-area: 1 / 1; transition: opacity 220ms ease, filter 220ms ease; }
+.mm-chips { display: flex; gap: 4px; min-width: 0; margin: -3px -4px; padding: 3px 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 14px), transparent); }
+.mm-chips::-webkit-scrollbar { display: none; }
+.mm-chip { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 28px; padding: 0 9px; font-size: 12.5px; color: var(--text-secondary); background: none; border: 0; border-radius: 8px; white-space: nowrap; transition: background-color var(--dur-press) ease, color var(--dur-press) ease, box-shadow var(--dur-press) ease; }
+.mm-chip[aria-checked="true"] { background: var(--mm-well); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
+.mm-chip-n { font-size: 11.5px; font-weight: 400; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
+.mm-search { display: flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 2px 0 9px; border-radius: 8px; background: var(--mm-well); color: var(--text-tertiary); opacity: 0; visibility: hidden; }
+.mm-search svg { flex: none; }
+.mm-search input { flex: 1; min-width: 0; height: 28px; padding: 0; font-size: 13px; color: var(--text); background: none; border: 0; outline: none; -webkit-appearance: none; appearance: none; }
+.mm-search input::placeholder { color: var(--text-tertiary); }
+.mm-search input::-webkit-search-cancel-button { display: none; }
+.mm .mm-search input:focus-visible { outline: none; }
+.mm-search:focus-within { box-shadow: inset 0 0 0 1px var(--border-focus); }
+.mm-filters[data-searching] .mm-chips { opacity: 0; filter: blur(2px); }
+.mm-filters[data-searching] .mm-search { grid-area: 1 / 1 / 2 / 3; opacity: 1; visibility: visible; }
+.mm-filters[data-searching] .mm-search-open { opacity: 0; visibility: hidden; }
+.mm-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1; color: var(--text-tertiary); background: none; border: 0; border-radius: 8px; transition: background-color var(--dur-press) ease, color var(--dur-press) ease, opacity 200ms ease; }
+.mm-search-open { grid-area: 1 / 2; }
+.mm-note { padding: 9px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, transparent); font-size: 12.5px; color: var(--text-secondary); }
+
+/* groups — one per store; folds are grid rows 0fr ↔ 1fr */
+.mm-list { padding: 2px 8px 6px; }
+.mm-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--mm-fold) var(--ease-out), opacity var(--dur-fade) ease; }
+.mm-fold[data-open] { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--mm-fold) var(--ease-out), opacity 240ms ease 60ms; }
+.mm-fold[data-leaving] { transition: grid-template-rows var(--mm-fold) var(--ease-out), opacity 200ms ease, filter 200ms ease; filter: blur(2px); }
+.mm-clip { min-height: 0; overflow: hidden; }
+.mm-ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 12px 8px 4px; }
+.mm-ghead h3 { min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
+.mm-file { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--text-tertiary); }
+.mm-usage { display: flex; flex: 0 1 280px; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+.mm-bar { position: relative; flex: 1; min-width: 48px; height: 6px; border-radius: 3px; background: var(--ib-pill); overflow: hidden; }
+.mm-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--st-done); }
+.mm-usage[data-level="warn"] .mm-bar > i { background: var(--st-wait); }
+.mm-usage[data-level="high"] .mm-bar > i, .mm-usage[data-level="full"] .mm-bar > i { background: var(--st-fail); }
+.mm-usage[data-level="warn"], .mm-usage[data-level="high"], .mm-over { color: var(--mm-warn); }
+.mm-usage[data-level="full"] { color: var(--red); }
+.mm-uval { flex: none; white-space: nowrap; }
+.mm-items { list-style: none; }
+.mm-row { padding: 6px 8px 5px; border-radius: 8px; transition: background-color var(--dur-press) ease; }
+.mm-row:hover, .mm-row:focus-within, .mm-row[data-editing] { background: var(--mm-well); }
+.mm-text { font-size: 13px; line-height: 20px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
+.mm-text mark { border-radius: 3px; background: var(--mm-mark); box-shadow: 0 0 0 1px var(--mm-mark); color: inherit; }
+.mm-meta { display: flex; align-items: center; gap: 6px; min-height: 26px; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
+.mm-src { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.mm-acts { display: inline-flex; flex: none; align-items: center; gap: 2px; margin: -1px -4px -1px auto; opacity: 0; transition: opacity 180ms ease; }
+.mm-row:hover .mm-acts, .mm-row:focus-within .mm-acts, .mm-acts.is-on { opacity: 1; }
+.mm-act { height: 26px; padding: 0 9px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); background: none; border: 0; border-radius: 8px; white-space: nowrap; transition: background-color var(--dur-press) ease, color var(--dur-press) ease, opacity var(--dur-press) ease; }
+.mm-act-main { background: var(--text); color: var(--surface); }
+.mm-act:disabled { opacity: 0.4; cursor: default; }
+.mm textarea.mm-edit { display: block; width: 100%; min-height: 20px; margin: 0; padding: 0; font-size: 13px; line-height: 20px; color: var(--text); background: none; border: 0; border-radius: 0; resize: none; overflow: hidden; }
+.mm textarea.mm-edit:focus-visible { outline: none; }
+.mm-row[data-editing]:focus-within, .mm-new:focus-within { box-shadow: inset 0 0 0 1px var(--border-focus); }
+.mm-counter { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
+.mm-counter.is-over { color: var(--red); }
+.mm-empty { padding: 4px 8px 8px; font-size: 12.5px; color: var(--text-tertiary); }
+.mm-nomatch { padding: 18px 8px 12px; text-align: center; overflow-wrap: anywhere; }
+/* 3px of room so a focus ring is not clipped by the folding parent */
+.mm-addline { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 3px 8px; }
+.mm-add { display: flex; align-items: center; gap: 6px; min-width: 0; height: 32px; padding: 0 8px; font-size: 13px; color: var(--text-tertiary); background: none; border: 0; border-radius: 8px; text-align: left; transition: background-color var(--dur-press) ease, color var(--dur-press) ease; }
+.mm-clear { flex: none; height: 28px; padding: 0 8px; font-size: 12px; color: var(--text-tertiary); background: none; border: 0; border-radius: 8px; white-space: nowrap; transition: background-color var(--dur-press) ease, color var(--dur-press) ease, box-shadow var(--dur-press) ease; }
+.mm-clear[data-armed] { background: var(--mm-danger-bg); color: var(--red); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent); }
+.mm-new { margin: 3px 3px 8px; padding: 8px 8px 6px; border-radius: 8px; background: var(--mm-well); }
+.mm-label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-tertiary); }
+.mm-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
+
+/* tray: caption (cross-fades) · polite status · Undo */
+.mm-foot { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 16px; border-top: 1px solid var(--border); border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); background: var(--bg); }
+.mm-caption { display: grid; flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.mm-caption b { font-weight: 600; color: var(--text); }
+.mm-swap { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; animation: mm-swap-in 320ms ease both; }
+.mm-swap[data-out] { animation: mm-swap-out 220ms ease both; }
+.mm-swap.is-warn { color: var(--mm-warn); }
+.mm-swap.is-fail { color: var(--red); }
+.mm-forgot { display: flex; min-width: 0; }
+.mm-flat { flex: none; white-space: pre; }
+.mm-quote { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.mm-undo { display: inline-flex; flex: none; align-items: center; height: 28px; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; animation: mm-swap-in 300ms ease both; transition: border-color var(--dur-press) ease; }
+.mm-undo[hidden] { display: none; }
+@keyframes mm-swap-in { from { opacity: 0; filter: blur(2px); } }
+@keyframes mm-swap-out { to { opacity: 0; filter: blur(2px); } }
+@media (hover: hover) and (pointer: fine) {
+  .mm-chip:hover, .mm-icon:hover, .mm-add:hover { background: var(--mm-well); color: var(--text); }
+  .mm-act:hover { background: var(--surface); color: var(--text); }
+  .mm-act-main:hover { background: var(--text); color: var(--surface); opacity: 0.86; }
+  .mm-act-del:hover, .mm-clear:hover { background: var(--mm-danger-bg); color: var(--red); }
+  .mm-undo:hover { border-color: var(--accent); }
+}
+@container mm (max-width: 480px) { .mm-cap { display: none; } .mm-usage { flex-basis: 100%; } }
+@container mm (max-width: 340px) { .mm-chip-n { display: none; } .mm-chip { padding: 0 7px; } }
+@media (pointer: coarse) {
+  .mm-acts { opacity: 1; }
+  .mm-act, .mm-chip, .mm-clear, .mm-add, .mm-undo { min-height: 44px; }
+  .mm-icon { width: 44px; height: 44px; }
+  .mm-search { height: 44px; }
+  .mm-search input { height: 42px; font-size: 16px; }
+  .mm textarea.mm-edit { font-size: 16px; line-height: 22px; }
+  .mm-meta { min-height: 44px; }
+}
+`;
+const UNDO_MS = 5e3;
+const FOLD_MS = 320;
+const NOTICE_MS = 3e3;
+const ARM_MS = 4e3;
+const ROLL_MS = 520;
+const SWAP_OUT_MS = 260;
+const REVEAL_SCROLL_MS = 120;
+const SHORT = 40;
+const STRINGS = {
+  en: {
+    panel: "Personal memory",
+    stores: "Stores",
+    all: "All",
+    search: "Search memories",
+    searchPh: "Search entries",
+    closeSearch: "Close search",
+    usage: (l) => `${l} usage`,
+    of: (u, l) => `${u} / ${l} chars`,
+    chars: (n) => `${n} chars`,
+    full: " · full",
+    empty: "Empty — add an entry below.",
+    emptyRo: "Empty.",
+    noMatch: (q) => `No entries match “${q}”`,
+    over: "over the per-entry limit",
+    edit: "Edit",
+    del: "Delete",
+    editName: (s) => `Edit “${s}”`,
+    delName: (s) => `Delete “${s}”`,
+    editField: (l, n) => `Edit ${l} #${n}`,
+    cancel: "Cancel",
+    save: "Save",
+    add: "Add",
+    addTo: (l) => `Add to ${l}`,
+    clear: "Clear all",
+    clearN: (n) => `Clear ${n} ${n === 1 ? "entry" : "entries"}`,
+    armed: "This cannot be undone — press again to clear",
+    armedSr: (l, n) => `Clear all ${n} ${n === 1 ? "entry" : "entries"} in ${l}? This cannot be undone — press again to clear`,
+    newLabel: (cap) => cap ? `New entry (up to ${cap} chars)` : "New entry",
+    after: (total, limit) => limit ? `After adding: ${total} / ${limit} chars` : `After adding: ${total} chars`,
+    overBy: (n) => ` — ${n} over`,
+    tooLong: " — over the per-entry limit",
+    deleted: ["Deleted “", "”"],
+    deletedSr: (s) => `Deleted “${s}” — Undo brings it back`,
+    undo: "Undo",
+    saved: "Saved",
+    added: "Added",
+    restored: "Restored",
+    cleared: "Cleared",
+    emptyEntry: "An entry cannot be empty — use Delete to remove it",
+    editHint: "Enter to save · Shift+Enter for a new line · Esc to cancel",
+    addHint: "Enter to add · Shift+Enter for a new line · Esc to close",
+    entries: (n) => n === 1 ? " entry" : " entries"
+  },
+  ko: {
+    panel: "개인 메모리",
+    stores: "저장소",
+    all: "전체",
+    search: "개인 메모리 검색",
+    searchPh: "항목 검색",
+    closeSearch: "검색 닫기",
+    usage: (l) => `${l} 사용량`,
+    of: (u, l) => `${u} / ${l}자`,
+    chars: (n) => `${n}자`,
+    full: " · 가득 참",
+    empty: "비어 있음 — 아래에서 추가하세요.",
+    emptyRo: "비어 있음.",
+    noMatch: (q) => `“${q}” 검색 결과가 없습니다`,
+    over: "한 항목 한도 초과",
+    edit: "수정",
+    del: "삭제",
+    editName: (s) => `수정: “${s}”`,
+    delName: (s) => `삭제: “${s}”`,
+    editField: (l, n) => `${l} ${n}번 수정`,
+    cancel: "취소",
+    save: "저장",
+    add: "추가",
+    addTo: (l) => `${l}에 추가`,
+    clear: "모두 지우기",
+    clearN: (n) => `${n}개 모두 지우기`,
+    armed: "되돌릴 수 없습니다 — 한 번 더 누르면 지웁니다",
+    armedSr: (l, n) => `${l} 항목 ${n}개를 모두 지울까요? 되돌릴 수 없습니다 — 한 번 더 누르면 지웁니다`,
+    newLabel: (cap) => cap ? `새 항목 (한 항목 최대 ${cap}자)` : "새 항목",
+    after: (total, limit) => limit ? `추가하면 ${total} / ${limit}자` : `추가하면 ${total}자`,
+    overBy: (n) => ` — ${n}자 초과`,
+    tooLong: " — 한 항목 한도 초과",
+    deleted: ["삭제함 “", "”"],
+    deletedSr: (s) => `삭제함 “${s}” — 되돌리기로 되돌릴 수 있습니다`,
+    undo: "되돌리기",
+    saved: "저장했습니다",
+    added: "추가했습니다",
+    restored: "되돌렸습니다",
+    cleared: "모두 지웠습니다",
+    emptyEntry: "비어 있는 항목은 저장할 수 없습니다 — 지우려면 삭제를 쓰세요",
+    editHint: "Enter 저장 · Shift+Enter 줄바꿈 · Esc 취소",
+    addHint: "Enter 추가 · Shift+Enter 줄바꿈 · Esc 닫기",
+    entries: (_n) => "개 항목"
+  }
+};
+const SEARCH_SVG = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><circle cx="6" cy="6" r="4.25" stroke="currentColor" stroke-width="1.5"/><path d="M9.25 9.25 12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>';
+const num = (v) => {
+  const n = Number(v);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+};
+function storeUsed(entries, separator = "") {
+  if (!entries.length) return 0;
+  let n = separator.length * (entries.length - 1);
+  for (const e of entries) n += String(e).length;
+  return n;
+}
+function usageLevel(used, limit) {
+  if (!(limit > 0)) return "ok";
+  const r = used / limit;
+  return r >= 1 ? "full" : r >= 0.95 ? "high" : r >= 0.8 ? "warn" : "ok";
+}
+function usageAfterAdd(entries, separator, text) {
+  const n = String(text ?? "").trim().length;
+  return storeUsed(entries, separator) + (n ? n + (entries.length ? separator.length : 0) : 0);
+}
+function isSameEdit(next, previous) {
+  return String(next ?? "").trim() === String(previous ?? "").trim();
+}
+function shortText(text, max = SHORT) {
+  const s = String(text ?? "");
+  return s.length > max ? `${s.slice(0, max)}…` : s;
+}
+function entryMatches(text, q, store) {
+  const needle = String(q ?? "").trim().toLowerCase();
+  if (!needle) return true;
+  if (String(text ?? "").toLowerCase().includes(needle))
+    return true;
+  return !!store && `${store.label ?? ""} ${store.file ?? ""}`.toLowerCase().includes(needle);
+}
+function highlight(text, q) {
+  const s = String(text ?? "");
+  const needle = String(q ?? "").trim().toLowerCase();
+  const lower = s.toLowerCase();
+  if (!needle || lower.length !== s.length) return esc(s);
+  let out = "";
+  let at = 0;
+  for (let i = lower.indexOf(needle); i >= 0; i = lower.indexOf(needle, at)) {
+    out += `${esc(s.slice(at, i))}<mark>${esc(s.slice(i, i + needle.length))}</mark>`;
+    at = i + needle.length;
+  }
+  return out + esc(s.slice(at));
+}
+function hash(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+function entryKeys(entries) {
+  const seen = /* @__PURE__ */ new Map();
+  return entries.map((e) => {
+    const h = hash(String(e));
+    const n = seen.get(h) ?? 0;
+    seen.set(h, n + 1);
+    return n ? `${h}.${n}` : h;
+  });
+}
+function fold(el, open) {
+  if (!el) return;
+  el.toggleAttribute("data-open", open);
+  el.toggleAttribute("inert", !open);
+}
+function grow(el) {
+  if (!el) return;
+  el.style.height = "auto";
+  const h = el.scrollHeight;
+  if (h > 0) el.style.height = `${h}px`;
+}
+class UiMemoryPanel extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang"];
+  }
+  #work = [];
+  /** Entry texts as the DOM shows them (a delete's fold can outlive the working copy by FOLD_MS). */
+  #painted = /* @__PURE__ */ new Map();
+  #view = { store: null, q: "", searching: false };
+  #editing = null;
+  #adding = {};
+  #drafts = {};
+  #undo = null;
+  #notice = null;
+  #armed = null;
+  #holds = { hover: false, panel: false };
+  #seq = 0;
+  #chrome = "";
+  #trayKey = "";
+  #trayItem = null;
+  #rolls = /* @__PURE__ */ new Map();
+  #timers = { notice: 0, armed: 0, settle: 0, scroll: 0 };
+  #swaps = /* @__PURE__ */ new Set();
+  constructor() {
+    super();
+    const r = this.root;
+    r.addEventListener("click", (e) => this.#onClick(e));
+    r.addEventListener("keydown", (e) => this.#onKey(e));
+    r.addEventListener("input", (e) => this.#onInput(e));
+    r.addEventListener("focusin", () => this.#hold("panel", true));
+    r.addEventListener("focusout", (e) => {
+      const to = e.relatedTarget;
+      this.#hold("panel", !!to && this.content.contains(to));
+    });
+  }
+  get data() {
+    return super.data;
+  }
+  /** Setting data ends every optimistic change: the panel shows exactly the stores you pass. */
+  set data(value) {
+    this.#adopt(value);
+    super.data = value;
+  }
+  attributeChangedCallback() {
+    this.#chrome = "";
+    this.requestRender();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.#undo && !this.#undo.timer) this.#armUndo();
+  }
+  disconnectedCallback() {
+    for (const k of ["notice", "armed", "settle", "scroll"]) {
+      clearTimeout(this.#timers[k]);
+      this.#timers[k] = 0;
+    }
+    const u = this.#undo;
+    if (u?.timer) {
+      clearTimeout(u.timer);
+      u.timer = 0;
+      u.left = Math.max(0, u.left - (Date.now() - u.started));
+    }
+    for (const id of this.#swaps) clearTimeout(id);
+    this.#swaps.clear();
+    for (const st of this.#rolls.values()) cancelAnimationFrame(st.raf);
+    this.#rolls.clear();
+    this.#notice = null;
+    this.#armed = null;
+    this.#holds = { hover: false, panel: false };
+  }
+  get #t() {
+    return (this.getAttribute("lang") ?? "").toLowerCase().startsWith("ko") ? STRINGS.ko : STRINGS.en;
+  }
+  get #ro() {
+    const r = this.data?.readOnly;
+    return r === true || typeof r === "string";
+  }
+  #store(id) {
+    return id == null ? void 0 : this.#work.find((s) => s.id === id);
+  }
+  // ── data ──
+  #adopt(d) {
+    const list = Array.isArray(d?.stores) ? d.stores : [];
+    this.#work = list.filter((s) => s && s.id != null).map((s) => ({
+      id: String(s.id),
+      label: String(s.label ?? s.id),
+      file: s.file ? String(s.file) : "",
+      limit: num(s.limit),
+      per: num(s.perEntryLimit),
+      sep: typeof s.separator === "string" ? s.separator : "",
+      entries: (Array.isArray(s.entries) ? s.entries : []).map((e2) => String(e2 ?? ""))
+    }));
+    const ro = d?.readOnly === true || typeof d?.readOnly === "string";
+    const e = this.#editing;
+    if (e) {
+      const s = this.#store(e.store);
+      const at = s ? s.entries.indexOf(e.orig) : -1;
+      if (!ro && s && at >= 0 && s.entries.lastIndexOf(e.orig) === at) e.index = at;
+      else {
+        this.#editing = null;
+        if (s && !ro && e.draft !== e.orig) this.#keepDraft(s.id, e.draft);
+      }
+    }
+    if (ro) {
+      this.#adding = {};
+      this.#armed = null;
+      this.#dropUndo();
+    }
+    if (this.#view.store && !this.#store(this.#view.store)) this.#view = { ...this.#view, store: null };
+    if (this.#undo && !this.#store(this.#undo.store)) this.#dropUndo();
+    const a = this.#armed;
+    if (a && this.#store(a.store)?.entries.length !== a.n) this.#armed = null;
+  }
+  // ── rendering ──
+  /** The static chrome: chips, search, tray. The groups are painted into `.mm-list`. */
+  render() {
+    const d = this.data;
+    const t = this.#t;
+    const title = d?.title ? String(d.title) : "";
+    const reason = typeof d?.readOnly === "string" ? d.readOnly : "";
+    let chips = `<button type="button" class="mm-chip" role="radio" data-act="chip" data-all data-key="chip-all" aria-checked="false" tabindex="-1">${esc(t.all)} <span class="mm-chip-n"></span></button>`;
+    for (const s of this.#work)
+      chips += `<button type="button" class="mm-chip" role="radio" data-act="chip" data-pick="${escAttr(s.id)}" data-key="${escAttr(`chip|${s.id}`)}" aria-checked="false" tabindex="-1">${esc(s.label)} <span class="mm-chip-n"></span></button>`;
+    return `<section class="mm" role="group" ${title ? 'aria-labelledby="mm-title"' : `aria-label="${escAttr(t.panel)}"`}>
+${title ? `<div class="mm-head"><span class="mm-title" id="mm-title">${esc(title)}</span><span class="mm-count" aria-hidden="true"></span></div>` : ""}<div class="mm-filters">
+<div class="mm-chips" role="radiogroup" aria-label="${escAttr(t.stores)}">${chips}</div>
+<div class="mm-search" id="mm-search" inert>${SEARCH_SVG}<input type="search" class="mm-q" data-key="q" placeholder="${escAttr(t.searchPh)}" aria-label="${escAttr(t.search)}" autocomplete="off" spellcheck="false"><button type="button" class="mm-icon" data-act="search-close" data-key="search-close" aria-label="${escAttr(t.closeSearch)}"><span aria-hidden="true">×</span></button></div>
+<button type="button" class="mm-icon mm-search-open" data-act="search-open" data-key="search-open" aria-label="${escAttr(t.search)}" aria-expanded="false" aria-controls="mm-search">${SEARCH_SVG}</button>
+</div>${reason ? `<p class="mm-note">${esc(reason)}</p>` : ""}
+<div class="mm-list"></div>
+<div class="mm-foot"><span class="mm-caption" aria-hidden="true"></span><span class="sr-only mm-live" role="status" aria-live="polite" aria-atomic="true">${esc(this.#trayState().live)}</span><button type="button" class="mm-undo" data-act="undo" data-key="undo" hidden>${esc(t.undo)}</button></div>
+</section>`;
+  }
+  /** Renders are deferred while a deleted row folds away, so the host's answer never cuts the fold short. */
+  update() {
+    if (this.#timers.settle) return;
+    this.#paintAll();
+  }
+  #sig() {
+    const d = this.data;
+    return JSON.stringify([
+      this.#t.all,
+      d?.title ?? "",
+      typeof d?.readOnly === "string" ? d.readOnly : "",
+      this.#work.map((s) => [s.id, s.label])
+    ]);
+  }
+  #paintAll() {
+    if (this.#timers.settle) {
+      clearTimeout(this.#timers.settle);
+      this.#timers.settle = 0;
+    }
+    if (!this.data || !Array.isArray(this.data.stores)) {
+      this.content.innerHTML = "";
+      this.#chrome = "";
+      this.#trayItem = null;
+      return;
+    }
+    this.#keepFocus(() => {
+      const sig = this.#sig();
+      if (sig !== this.#chrome) this.#buildChrome(sig);
+      this.#paintList();
+    });
+    this.#applyView();
+  }
+  #buildChrome(sig) {
+    for (const st of this.#rolls.values()) cancelAnimationFrame(st.raf);
+    this.#rolls.clear();
+    this.#trayKey = "";
+    this.#trayItem = null;
+    this.#holds.hover = false;
+    this.content.innerHTML = this.render();
+    this.#chrome = sig;
+    const q = this.$(".mm-q");
+    if (q) q.value = this.#view.q;
+    const foot = this.$(".mm-foot");
+    foot?.addEventListener("pointerenter", (e) => {
+      if (e.pointerType !== "touch") this.#hold("hover", true);
+    });
+    foot?.addEventListener("pointerleave", () => this.#hold("hover", false));
+  }
+  #paintList() {
+    const list = this.$(".mm-list");
+    if (!list) return;
+    const t = this.#t;
+    const ro = this.#ro;
+    let html = "";
+    this.#work.forEach((s, si) => {
+      html += this.#groupHtml(s, si, t, ro);
+    });
+    html += '<div class="mm-fold mm-nomatch-f" inert><div class="mm-clip"><p class="mm-empty mm-nomatch"></p></div></div>';
+    list.innerHTML = html;
+    this.#painted = new Map(this.#work.map((s) => [s.id, s.entries.slice()]));
+    for (const s of this.#work) {
+      const box = this.#byKey(`new|${s.id}`);
+      if (box) {
+        box.value = this.#drafts[s.id] ?? "";
+        this.#paintCount(s);
+        if (this.#adding[s.id]) grow(box);
+      }
+    }
+    const e = this.#editing;
+    if (e) {
+      const ta = this.#byKey(`edit|${e.store}`);
+      if (ta) {
+        ta.value = e.draft;
+        grow(ta);
+      }
+    }
+  }
+  #groupHtml(s, si, t, ro) {
+    const v = this.#view;
+    const q = v.q.trim();
+    const keys = entryKeys(s.entries);
+    const used = storeUsed(s.entries, s.sep);
+    const level = usageLevel(used, s.limit);
+    let rows = "";
+    let shown = 0;
+    s.entries.forEach((text, i) => {
+      const show = this.#rowShown(s, i, text);
+      if (show) shown++;
+      const editing = !ro && this.#editing?.store === s.id && this.#editing.index === i;
+      rows += `<li><div class="mm-fold mm-rowf" data-row="${keys[i]}" data-i="${i}"${show ? " data-open" : " inert"}><div class="mm-clip">${editing ? this.#editorHtml(s, i, t) : this.#rowHtml(s, i, text, keys[i], t, ro)}</div></div></li>`;
+    });
+    const open = (!v.store || v.store === s.id) && (shown > 0 || !q);
+    const val = s.limit > 0 ? t.of(fmtInt(used), fmtInt(s.limit)) + (level === "full" ? t.full : "") : t.chars(fmtInt(used));
+    const bar = s.limit > 0 ? `<span class="mm-bar" role="meter" aria-valuemin="0" aria-valuemax="${s.limit}" aria-valuenow="${Math.min(used, s.limit)}" aria-valuetext="${escAttr(val)}" aria-label="${escAttr(t.usage(s.label))}"><i style="width:${Math.min(100, used / s.limit * 100).toFixed(2)}%"></i></span>` : "";
+    let html = `<section class="mm-group mm-fold" data-store="${escAttr(s.id)}"${open ? " data-open" : " inert"} aria-labelledby="mm-h-${si}"><div class="mm-clip">
+<div class="mm-ghead"><h3 id="mm-h-${si}">${esc(s.label)}${s.file ? ` <span class="mm-file">${esc(s.file)}</span>` : ""}</h3><div class="mm-usage" data-level="${level}">${bar}<span class="mm-uval"${bar ? ' aria-hidden="true"' : ""}>${esc(val)}</span></div></div>`;
+    if (!s.entries.length) html += `<p class="mm-empty">${esc(ro ? t.emptyRo : t.empty)}</p>`;
+    html += `<ol class="mm-items">${rows}</ol>`;
+    if (!ro) {
+      const adding = !!this.#adding[s.id];
+      const armed = this.#armed?.store === s.id;
+      html += `<div class="mm-fold mm-addf" data-addline${adding ? " inert" : " data-open"}><div class="mm-clip"><div class="mm-addline"><button type="button" class="mm-add" data-act="add-open" data-key="${escAttr(`add|${s.id}`)}" aria-expanded="${adding}" aria-controls="mm-new-${si}"><span aria-hidden="true">+</span> ${esc(t.addTo(s.label))}</button>${s.entries.length ? `<button type="button" class="mm-clear" data-act="clear" data-key="${escAttr(`clear|${s.id}`)}"${armed ? " data-armed" : ""}>${esc(armed ? t.clearN(s.entries.length) : t.clear)}</button>` : ""}</div></div></div>
+<div class="mm-fold mm-newf" id="mm-new-${si}" data-newbox${adding ? " data-open" : " inert"}><div class="mm-clip"><div class="mm-new"><label class="mm-label" for="mm-ta-${si}">${esc(
+        t.newLabel(s.per > 0 ? fmtInt(s.per) : "")
+      )}</label><textarea id="mm-ta-${si}" class="mm-edit" data-key="${escAttr(`new|${s.id}`)}" rows="2"></textarea><div class="mm-line"><span class="mm-counter" data-count></span><span class="mm-acts is-on"><button type="button" class="mm-act" data-act="add-close" data-key="${escAttr(`addc|${s.id}`)}">${esc(t.cancel)}</button><button type="button" class="mm-act mm-act-main" data-act="add-save" data-key="${escAttr(`adds|${s.id}`)}">${esc(t.add)}</button></span></div></div></div></div>`;
+    }
+    return `${html}</div></section>`;
+  }
+  #rowHtml(s, i, text, key, t, ro) {
+    const len = text.length;
+    const short = shortText(text);
+    const acts = ro ? "" : `<span class="mm-acts"><button type="button" class="mm-act" data-act="edit" data-key="${escAttr(`ed|${s.id}|${key}`)}" aria-label="${escAttr(t.editName(short))}">${esc(t.edit)}</button><button type="button" class="mm-act mm-act-del" data-act="delete" data-key="${escAttr(`del|${s.id}|${key}`)}" aria-label="${escAttr(t.delName(short))}">${esc(t.del)}</button></span>`;
+    return `<div class="mm-row"><p class="mm-text">${esc(text)}</p><div class="mm-meta"><span class="mm-src">#${i + 1} · ${esc(t.chars(fmtInt(len)))}${s.per > 0 && len > s.per ? ` · <span class="mm-over">${esc(t.over)}</span>` : ""}</span>${acts}</div></div>`;
+  }
+  #editorHtml(s, i, t) {
+    const c = this.#editCount(s, this.#editing?.draft ?? "");
+    return `<div class="mm-row" data-editing><textarea class="mm-edit" data-key="${escAttr(`edit|${s.id}`)}" rows="1" aria-label="${escAttr(t.editField(s.label, i + 1))}"></textarea><div class="mm-meta"><span class="mm-counter${c.over ? " is-over" : ""}" data-ecount>${esc(c.text)}</span><span class="mm-acts is-on"><button type="button" class="mm-act" data-act="cancel" data-key="${escAttr(`cancel|${s.id}`)}">${esc(t.cancel)}</button><button type="button" class="mm-act mm-act-main" data-act="save" data-key="${escAttr(`save|${s.id}`)}">${esc(t.save)}</button></span></div></div>`;
+  }
+  #editCount(s, draft) {
+    const n = draft.trim().length;
+    return {
+      text: s.per > 0 ? `${fmtInt(n)} / ${this.#t.chars(fmtInt(s.per))}` : this.#t.chars(fmtInt(n)),
+      over: s.per > 0 && n > s.per
+    };
+  }
+  #paintCount(s) {
+    const el = this.#group(s.id)?.querySelector("[data-count]");
+    if (!el) return;
+    const t = this.#t;
+    const draft = this.#drafts[s.id] ?? "";
+    const total = usageAfterAdd(s.entries, s.sep, draft);
+    const over = s.limit > 0 && total > s.limit ? total - s.limit : 0;
+    const long = s.per > 0 && draft.trim().length > s.per;
+    el.textContent = t.after(fmtInt(total), s.limit > 0 ? fmtInt(s.limit) : "") + (over ? t.overBy(fmtInt(over)) : "") + (long ? t.tooLong : "");
+    el.classList.toggle("is-over", !!over || long);
+  }
+  #rowShown(s, i, text) {
+    const v = this.#view;
+    if (v.store && v.store !== s.id) return false;
+    if (this.#editing?.store === s.id && this.#editing.index === i) return true;
+    return entryMatches(text, v.q, s);
+  }
+  /** Fold rows and groups to the chip + search without repainting (what is typed stays put). */
+  #applyView() {
+    const v = this.#view;
+    const q = v.q.trim();
+    let any = false;
+    for (const g of this.$$(".mm-group")) {
+      const s = this.#store(g.dataset.store);
+      if (!s) continue;
+      const texts = this.#painted.get(s.id) ?? [];
+      let shown = 0;
+      for (const f of Array.from(g.querySelectorAll(".mm-rowf"))) {
+        if (f.hasAttribute("data-leaving")) continue;
+        const i = Number(f.dataset.i);
+        const text = texts[i] ?? "";
+        const show = this.#rowShown(s, i, text);
+        if (show) shown++;
+        fold(f, show);
+        const p = f.querySelector(".mm-text");
+        const hl = show ? q : "";
+        if (p && (f.dataset.hl ?? "") !== hl) {
+          p.innerHTML = hl ? highlight(text, hl) : esc(text);
+          f.dataset.hl = hl;
+        }
+      }
+      if (shown) any = true;
+      fold(g, (!v.store || v.store === s.id) && (shown > 0 || !q));
+    }
+    fold(this.$(".mm-nomatch-f"), !!q && !any);
+    const nm = this.$(".mm-nomatch");
+    if (nm && q) nm.textContent = this.#t.noMatch(q);
+    this.#sync();
+  }
+  /** Chrome after any change: chip state (one tab stop) and counts, search state, head count, tray. */
+  #sync() {
+    if (!this.$(".mm")) return;
+    const v = this.#view;
+    const total = this.#work.reduce((n, s) => n + s.entries.length, 0);
+    for (const chip of this.$$(".mm-chip")) {
+      const id = chip.hasAttribute("data-all") ? null : chip.dataset.pick ?? null;
+      const on = id === v.store;
+      chip.setAttribute("aria-checked", on ? "true" : "false");
+      chip.tabIndex = on ? 0 : -1;
+      const n = chip.querySelector(".mm-chip-n");
+      if (n) n.textContent = fmtInt(id === null ? total : this.#store(id)?.entries.length ?? 0);
+    }
+    this.$(".mm-filters")?.toggleAttribute("data-searching", v.searching);
+    this.$(".mm-chips")?.toggleAttribute("inert", v.searching);
+    this.$(".mm-search")?.toggleAttribute("inert", !v.searching);
+    const opener = this.$(".mm-search-open");
+    if (opener) {
+      opener.setAttribute("aria-expanded", v.searching ? "true" : "false");
+      opener.toggleAttribute("inert", v.searching);
+    }
+    this.#roll(this.$(".mm-count"), total);
+    this.#paintTray();
+  }
+  // ── focus ──
+  #byKey(key) {
+    return this.$$("[data-key]").find((el) => el.dataset.key === key) ?? null;
+  }
+  #group(id) {
+    return this.$$(".mm-group").find((g) => g.dataset.store === id) ?? null;
+  }
+  #chip(id) {
+    return id === null ? this.#byKey("chip-all") : this.#byKey(`chip|${id}`);
+  }
+  #focus(el) {
+    const h = el;
+    if (!h || h.closest("[inert]") || h.disabled) return false;
+    h.focus({ preventScroll: true });
+    return true;
+  }
+  #focusKey(key) {
+    return this.#focus(this.#byKey(key));
+  }
+  #focusRow(kind, s, i) {
+    const key = entryKeys(s.entries)[i];
+    if (!key || !this.#focusKey(`${kind}|${s.id}|${key}`))
+      this.#focusKey(`add|${s.id}`) || this.#focus(this.#chip(this.#view.store));
+  }
+  /**
+   * Repaint without losing focus: the focused key comes back (rows are keyed by content, so a host answer that
+   * shifts indices keeps focus on the same entry); a key that is gone falls back to the same action on the row
+   * now at that place, then the store's add button, then the selected chip.
+   */
+  #keepFocus(fn) {
+    const a = this.getRootNode().activeElement === this ? this.root.activeElement : null;
+    const key = a?.dataset?.key ?? "";
+    const field = a;
+    const sel = a && "selectionStart" in a ? [field.selectionStart, field.selectionEnd] : null;
+    const store = a?.closest(".mm-group")?.dataset.store;
+    const at = Number(a?.closest(".mm-rowf")?.dataset.i ?? 0);
+    fn();
+    if (!a || a.isConnected || !key) return;
+    let next = this.#byKey(key);
+    if (!next || next.closest("[inert]")) {
+      next = null;
+      const kind = key.split("|")[0];
+      const s = this.#store(store);
+      if (s && (kind === "ed" || kind === "del")) {
+        const keys = entryKeys(s.entries);
+        for (let j = Math.min(at, s.entries.length - 1); j >= 0 && !next; j--) {
+          const el = this.#byKey(`${kind}|${s.id}|${keys[j]}`);
+          if (el && !el.closest("[inert]")) next = el;
+        }
+      }
+      if (!next && s) {
+        const add = this.#byKey(`add|${s.id}`);
+        if (add && !add.closest("[inert]")) next = add;
+      }
+      next ??= this.#chip(this.#view.store);
+    }
+    if (!next) return;
+    next.focus({ preventScroll: true });
+    if (sel && sel[0] != null && "setSelectionRange" in next) {
+      try {
+        next.setSelectionRange(sel[0], sel[1]);
+      } catch {
+      }
+    }
+  }
+  // ── events from the shadow tree ──
+  #onClick(e) {
+    const b = e.target?.closest?.("[data-act]");
+    if (!b || b.disabled) return;
+    const sid = b.closest(".mm-group")?.dataset.store ?? "";
+    const row = b.closest(".mm-rowf")?.dataset.row ?? "";
+    switch (b.dataset.act) {
+      case "chip":
+        this.#pick(b.hasAttribute("data-all") ? null : b.dataset.pick ?? null);
+        break;
+      case "search-open":
+        this.#searchOpen();
+        break;
+      case "search-close":
+        this.#searchClose();
+        break;
+      case "edit":
+        this.#editStart(sid, row);
+        break;
+      case "delete":
+        this.#delete(sid, row);
+        break;
+      case "cancel":
+        this.#editCancel();
+        break;
+      case "save":
+        this.#editSave();
+        break;
+      case "add-open":
+        this.#addOpen(sid);
+        break;
+      case "add-close":
+        this.#addClose(sid);
+        break;
+      case "add-save":
+        this.#add(sid);
+        break;
+      case "clear":
+        this.#clear(sid);
+        break;
+      case "undo":
+        this.#restore();
+        break;
+    }
+  }
+  #onKey(e) {
+    const el = e.target;
+    if (e.repeat && e.key === "Enter" && el.tagName === "BUTTON") {
+      e.preventDefault();
+      return;
+    }
+    if (el.closest(".mm-chips")) {
+      this.#chipKey(e);
+      return;
+    }
+    if (el.closest(".mm-search")) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#searchClose();
+      }
+      return;
+    }
+    const key = el.dataset?.key ?? "";
+    const isEdit = key.startsWith("edit|");
+    if (isEdit || key.startsWith("new|")) {
+      if (e.isComposing || e.keyCode === 229) return;
+      const sid = el.closest(".mm-group")?.dataset.store ?? "";
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        if (isEdit) this.#editSave();
+        else this.#add(sid);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isEdit) this.#editCancel();
+        else this.#addClose(sid);
+      }
+      return;
+    }
+    if (e.key === "Escape" && this.#armed) {
+      e.stopPropagation();
+      this.#disarm();
+    }
+  }
+  #onInput(e) {
+    const el = e.target;
+    const key = el.dataset?.key ?? "";
+    if (key === "q") {
+      this.#view = { store: null, q: el.value, searching: true };
+      this.#applyView();
+      return;
+    }
+    const sid = el.closest(".mm-group")?.dataset.store ?? "";
+    const s = this.#store(sid);
+    if (!s) return;
+    if (key.startsWith("edit|") && this.#editing?.store === sid) {
+      this.#editing.draft = el.value;
+      grow(el);
+      const c = this.#editCount(s, el.value);
+      const out = el.closest(".mm-row")?.querySelector("[data-ecount]");
+      if (out) {
+        out.textContent = c.text;
+        out.classList.toggle("is-over", c.over);
+      }
+    } else if (key.startsWith("new|")) {
+      this.#drafts[sid] = el.value;
+      grow(el);
+      this.#paintCount(s);
+    }
+  }
+  // ── chips + search ──
+  #pick(id) {
+    this.#view = { ...this.#view, store: id && this.#store(id) ? id : null };
+    this.#applyView();
+  }
+  /** One tab stop; arrows move and select (wrapping), Home / End. */
+  #chipKey(e) {
+    const keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"];
+    if (!keys.includes(e.key)) return;
+    e.preventDefault();
+    const order = [null, ...this.#work.map((s) => s.id)];
+    const cur = Math.max(0, order.indexOf(this.#view.store));
+    const step = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1;
+    const next = e.key === "Home" ? 0 : e.key === "End" ? order.length - 1 : (cur + step + order.length) % order.length;
+    this.#pick(order[next]);
+    const chip = this.#chip(order[next]);
+    if (chip) {
+      chip.focus();
+      chip.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }
+  }
+  #searchOpen() {
+    this.#view = { store: null, q: "", searching: true };
+    const q = this.$(".mm-q");
+    if (q) q.value = "";
+    this.#applyView();
+    q?.focus();
+  }
+  #searchClose() {
+    this.#view = { store: null, q: "", searching: false };
+    const q = this.$(".mm-q");
+    if (q) q.value = "";
+    this.#applyView();
+    this.#focusKey("search-open");
+  }
+  // ── edit ──
+  /** The open editor's index, re-checked against its text (rows above may have moved). */
+  #editIndex(s, e) {
+    if (s.entries[e.index] === e.orig) return e.index;
+    return s.entries.indexOf(e.orig);
+  }
+  #editStart(sid, key) {
+    const s = this.#store(sid);
+    if (!s || this.#ro) return;
+    const i = entryKeys(s.entries).indexOf(key);
+    if (i < 0) return;
+    const prev = this.#editing;
+    if (prev && prev.draft !== prev.orig && !(prev.store === sid && prev.index === i))
+      this.#keepDraft(prev.store, prev.draft);
+    this.#editing = { store: sid, index: i, orig: s.entries[i], draft: s.entries[i] };
+    this.#disarm(false);
+    this.#paintAll();
+    const ta = this.#byKey(`edit|${sid}`);
+    if (ta) {
+      ta.focus();
+      ta.setSelectionRange?.(ta.value.length, ta.value.length);
+      grow(ta);
+    }
+  }
+  #editCancel() {
+    const e = this.#editing;
+    if (!e) return;
+    this.#editing = null;
+    const s = this.#store(e.store);
+    this.#paintAll();
+    if (s) this.#focusRow("ed", s, Math.max(0, this.#indexOfText(s, e.orig, e.index)));
+  }
+  #indexOfText(s, text, near) {
+    return s.entries[near] === text ? near : s.entries.indexOf(text);
+  }
+  #editSave() {
+    const e = this.#editing;
+    const s = e ? this.#store(e.store) : void 0;
+    if (!e || !s) return;
+    const ta = this.#byKey(`edit|${s.id}`);
+    const text = ta ? ta.value : e.draft;
+    const t = this.#t;
+    if (!text.trim()) {
+      this.#say(t.emptyEntry, true);
+      return;
+    }
+    const i = this.#editIndex(s, e);
+    if (i < 0) return;
+    if (isSameEdit(text, e.orig)) {
+      this.#editing = null;
+      this.#paintAll();
+      this.#focusRow("ed", s, i);
+      return;
+    }
+    if (!this.emit("ui-edit", { store: s.id, index: i, text, previous: e.orig })) return;
+    s.entries[i] = text;
+    this.#editing = null;
+    this.#say(t.saved);
+    this.#paintAll();
+    this.#focusRow("ed", s, i);
+  }
+  // ── delete + undo ──
+  #delete(sid, key) {
+    if (this.#ro) return;
+    if (this.#timers.settle) this.#paintAll();
+    const s = this.#store(sid);
+    if (!s) return;
+    const i = entryKeys(s.entries).indexOf(key);
+    if (i < 0) return;
+    const text = s.entries[i];
+    if (!this.emit("ui-delete", { store: sid, index: i, text })) return;
+    const g = this.#group(sid);
+    const row = g?.querySelector(`.mm-rowf[data-i="${i}"]`) ?? null;
+    if (row) {
+      row.setAttribute("data-leaving", "");
+      fold(row, false);
+    }
+    if (g && row) this.#focusAfterDelete(g, row);
+    s.entries.splice(i, 1);
+    const e = this.#editing;
+    if (e?.store === sid && e.index > i) e.index--;
+    this.#dropUndo();
+    this.#undo = { store: sid, index: i, text, seq: ++this.#seq, left: UNDO_MS, started: 0, timer: 0 };
+    this.#armUndo();
+    this.#disarm(false);
+    this.#sync();
+    if (row && !prefersReducedMotion())
+      this.#timers.settle = window.setTimeout(() => {
+        this.#timers.settle = 0;
+        this.#paintAll();
+      }, FOLD_MS);
+    else this.#paintAll();
+  }
+  /**
+   * Focus after a delete: the next row the view shows, else the nearest shown row before it, else the store's add
+   * button, else the search box / the selected chip.
+   */
+  #focusAfterDelete(g, row) {
+    const rows = Array.from(g.querySelectorAll(".mm-rowf"));
+    const at = rows.indexOf(row);
+    const del = (f) => f !== row && !f.hasAttribute("data-leaving") && this.#focus(f.querySelector('[data-act="delete"]'));
+    for (let j = at + 1; j < rows.length; j++) if (del(rows[j])) return;
+    for (let j = at - 1; j >= 0; j--) if (del(rows[j])) return;
+    if (!g.hasAttribute("inert")) {
+      if (this.#focus(g.querySelector('[data-act="add-open"]'))) return;
+      if (this.#focus(g.querySelector('textarea[data-key^="new|"]'))) return;
+    }
+    if (this.#view.searching && this.#focus(this.$(".mm-q"))) return;
+    this.#focus(this.#chip(this.#view.store));
+  }
+  #held() {
+    return this.#holds.hover || this.#holds.panel;
+  }
+  /** The undo window: 5 s, paused while the pointer rests on the tray or focus is anywhere in the panel. */
+  #armUndo() {
+    const u = this.#undo;
+    if (!u) return;
+    clearTimeout(u.timer);
+    u.timer = 0;
+    u.started = Date.now();
+    if (this.#held() || !this.isConnected) return;
+    u.timer = window.setTimeout(
+      () => {
+        u.timer = 0;
+        if (this.#undo !== u) return;
+        this.#undo = null;
+        this.#paintTray();
+      },
+      Math.max(0, u.left)
+    );
+  }
+  #hold(kind, on) {
+    const was = this.#held();
+    this.#holds[kind] = on;
+    const held = this.#held();
+    const u = this.#undo;
+    if (held === was || !u) return;
+    if (!held) this.#armUndo();
+    else if (u.timer) {
+      clearTimeout(u.timer);
+      u.timer = 0;
+      u.left = Math.max(0, u.left - (Date.now() - u.started));
+    }
+  }
+  #dropUndo() {
+    if (this.#undo?.timer) clearTimeout(this.#undo.timer);
+    this.#undo = null;
+  }
+  #restore() {
+    const u = this.#undo;
+    if (!u || this.#ro) return;
+    const s = this.#store(u.store);
+    this.#dropUndo();
+    if (!s) return;
+    if (!this.emit("ui-restore", { store: u.store, index: u.index, text: u.text })) {
+      this.#keepDraft(s.id, u.text);
+      this.#paintAll();
+      this.#focusKey(`new|${s.id}`);
+      return;
+    }
+    const at = Math.min(u.index, s.entries.length);
+    s.entries.splice(at, 0, u.text);
+    const e = this.#editing;
+    if (e?.store === s.id && e.index >= at) e.index++;
+    this.#say(this.#t.restored);
+    this.#paintAll();
+    this.#reveal(s, at, true);
+  }
+  /** A row that came back or was added: shown under the view (else the view resets), unfolded, scrolled to. */
+  #reveal(s, i, focusEdit) {
+    const text = s.entries[i];
+    if (text === void 0) return;
+    const v = this.#view;
+    if (v.store && v.store !== s.id || !entryMatches(text, v.q, s)) {
+      this.#view = { store: null, q: "", searching: false };
+      const q = this.$(".mm-q");
+      if (q) q.value = "";
+      this.#applyView();
+    }
+    const key = entryKeys(s.entries)[i];
+    const f = this.#group(s.id)?.querySelector(`.mm-rowf[data-i="${i}"]`);
+    const reduced = prefersReducedMotion();
+    if (f && !reduced) {
+      f.removeAttribute("data-open");
+      void f.offsetHeight;
+      f.setAttribute("data-open", "");
+    }
+    clearTimeout(this.#timers.scroll);
+    if (f)
+      this.#timers.scroll = window.setTimeout(() => {
+        this.#timers.scroll = 0;
+        f.scrollIntoView?.({ block: "nearest", behavior: reduced ? "auto" : "smooth" });
+      }, REVEAL_SCROLL_MS);
+    if (focusEdit) this.#focusKey(`ed|${s.id}|${key}`);
+  }
+  // ── add + clear ──
+  /** A draft that has to leave its editor waits in the store's add box (appended when the box has text). */
+  #keepDraft(sid, text) {
+    if (!text.trim()) return;
+    const cur = this.#drafts[sid] ?? "";
+    if (cur === text) return;
+    this.#drafts[sid] = cur.trim() ? `${cur}
+
+${text}` : text;
+    this.#adding[sid] = true;
+  }
+  #addOpen(sid) {
+    const s = this.#store(sid);
+    const g = this.#group(sid);
+    if (!s || !g || this.#ro) return;
+    this.#adding[sid] = true;
+    fold(g.querySelector("[data-addline]"), false);
+    fold(g.querySelector("[data-newbox]"), true);
+    g.querySelector('[data-act="add-open"]')?.setAttribute("aria-expanded", "true");
+    const ta = g.querySelector('textarea[data-key^="new|"]');
+    grow(ta);
+    ta?.focus();
+    this.#disarm(false);
+    this.#paintTray();
+  }
+  /** Closing keeps the draft in the box. */
+  #addClose(sid) {
+    const g = this.#group(sid);
+    this.#adding[sid] = false;
+    if (!g) return;
+    fold(g.querySelector("[data-newbox]"), false);
+    fold(g.querySelector("[data-addline]"), true);
+    const b = g.querySelector('[data-act="add-open"]');
+    b?.setAttribute("aria-expanded", "false");
+    b?.focus();
+    this.#paintTray();
+  }
+  #add(sid) {
+    const s = this.#store(sid);
+    if (!s || this.#ro) return;
+    const ta = this.#byKey(`new|${sid}`);
+    const text = ta ? ta.value : this.#drafts[sid] ?? "";
+    if (!text.trim()) return;
+    if (!this.emit("ui-add", { store: sid, text })) return;
+    s.entries.push(text);
+    this.#drafts[sid] = "";
+    this.#adding[sid] = false;
+    this.#say(this.#t.added);
+    this.#paintAll();
+    this.#reveal(s, s.entries.length - 1, false);
+    this.#focusKey(`add|${sid}`);
+  }
+  /** Two presses within 4 s: the first names the count, the second sends `ui-clear`. No undo. */
+  #clear(sid) {
+    const s = this.#store(sid);
+    if (!s || this.#ro || !s.entries.length) return;
+    const a = this.#armed;
+    if (!a || a.store !== sid || a.n !== s.entries.length) {
+      this.#armed = { store: sid, n: s.entries.length, seq: ++this.#seq };
+      clearTimeout(this.#timers.armed);
+      this.#timers.armed = window.setTimeout(() => {
+        this.#timers.armed = 0;
+        this.#disarm();
+      }, ARM_MS);
+      this.#paintClear();
+      this.#paintTray();
+      return;
+    }
+    this.#disarm(false);
+    if (!this.emit("ui-clear", { store: sid })) {
+      this.#paintClear();
+      this.#paintTray();
+      return;
+    }
+    const e = this.#editing;
+    if (e?.store === sid) {
+      this.#editing = null;
+      if (e.draft !== e.orig) this.#keepDraft(sid, e.draft);
+    }
+    s.entries = [];
+    this.#say(this.#t.cleared);
+    this.#paintAll();
+    if (!this.#focusKey(`add|${sid}`)) this.#focusKey(`new|${sid}`);
+  }
+  #disarm(paint = true) {
+    clearTimeout(this.#timers.armed);
+    this.#timers.armed = 0;
+    if (!this.#armed) return;
+    this.#armed = null;
+    if (paint) {
+      this.#paintClear();
+      this.#paintTray();
+    }
+  }
+  #paintClear() {
+    const t = this.#t;
+    for (const b of this.$$(".mm-clear")) {
+      const s = this.#store(b.closest(".mm-group")?.dataset.store);
+      const armed = !!s && this.#armed?.store === s.id;
+      b.toggleAttribute("data-armed", armed);
+      b.textContent = armed && s ? t.clearN(s.entries.length) : t.clear;
+    }
+  }
+  // ── tray ──
+  #say(text, fail = false) {
+    const n = { text, seq: ++this.#seq, fail };
+    this.#notice = n;
+    clearTimeout(this.#timers.notice);
+    this.#timers.notice = window.setTimeout(() => {
+      this.#timers.notice = 0;
+      if (this.#notice !== n) return;
+      this.#notice = null;
+      this.#paintTray();
+    }, NOTICE_MS);
+    this.#paintTray();
+  }
+  /** The tray line by priority: Clear armed > Deleted + Undo > a 3 s notice > editing / adding hints > counts. */
+  #trayState() {
+    const t = this.#t;
+    const a = this.#armed;
+    const as = a ? this.#store(a.store) : void 0;
+    if (a && as) return { key: `armed-${a.seq}`, html: esc(t.armed), live: t.armedSr(as.label, a.n), tone: "warn" };
+    const u = this.#undo;
+    if (u)
+      return {
+        key: `undo-${u.seq}`,
+        html: `<span class="mm-forgot"><span class="mm-flat">${esc(t.deleted[0])}</span><b class="mm-quote">${esc(u.text)}</b><span class="mm-flat">${esc(t.deleted[1])}</span></span>`,
+        live: t.deletedSr(shortText(u.text))
+      };
+    const n = this.#notice;
+    if (n) return { key: `notice-${n.seq}`, html: esc(n.text), live: n.text, tone: n.fail ? "fail" : "" };
+    if (this.#editing) return { key: "editing", html: esc(t.editHint), live: t.editHint };
+    if (!this.#ro && this.#work.some((s) => this.#adding[s.id]))
+      return { key: "adding", html: esc(t.addHint), live: t.addHint };
+    const total = this.#work.reduce((sum, s) => sum + s.entries.length, 0);
+    const cap = this.#work.map((s) => {
+      const used = fmtInt(storeUsed(s.entries, s.sep));
+      return ` · ${s.label} ${s.limit > 0 ? t.of(used, fmtInt(s.limit)) : t.chars(used)}`;
+    }).join("");
+    return {
+      key: "rest",
+      total,
+      cap,
+      html: `<b class="mm-n">${fmtInt(total)}</b>${esc(t.entries(total))}<span class="mm-cap">${esc(cap)}</span>`,
+      live: `${fmtInt(total)}${t.entries(total)}${cap}`
+    };
+  }
+  /** Swap the caption only when the state changes (in 320 ms / out 220 ms); the same state rolls its count. */
+  #paintTray() {
+    const cap = this.$(".mm-caption");
+    if (!cap) return;
+    const s = this.#trayState();
+    const undo = this.$(".mm-undo");
+    if (undo) undo.hidden = !s.key.startsWith("undo-");
+    const live = this.$(".mm-live");
+    if (live && live.textContent !== s.live) live.textContent = s.live;
+    const cur = this.#trayItem;
+    if (cur && cur.isConnected && this.#trayKey === s.key) {
+      if (s.key === "rest") {
+        this.#roll(cur.querySelector(".mm-n"), s.total ?? 0);
+        const c = cur.querySelector(".mm-cap");
+        if (c && c.textContent !== s.cap) c.textContent = s.cap ?? "";
+      }
+      return;
+    }
+    this.#trayKey = s.key;
+    if (cur) {
+      cur.setAttribute("data-out", "");
+      const id = window.setTimeout(
+        () => {
+          this.#swaps.delete(id);
+          cur.remove();
+        },
+        prefersReducedMotion() ? 0 : SWAP_OUT_MS
+      );
+      this.#swaps.add(id);
+    }
+    const item = document.createElement("span");
+    item.className = `mm-swap${s.tone ? ` is-${s.tone}` : ""}`;
+    item.innerHTML = s.html;
+    cap.append(item);
+    this.#trayItem = item;
+    for (const [node, st] of this.#rolls) {
+      if (!node.isConnected) {
+        cancelAnimationFrame(st.raf);
+        this.#rolls.delete(node);
+      }
+    }
+    const nb = item.querySelector(".mm-n");
+    if (nb) this.#rolls.set(nb, { n: s.total ?? 0, raf: 0 });
+  }
+  /** Counts roll to their new value: 520 ms, ease-out quart; at once on first paint and with reduced motion. */
+  #roll(el, to) {
+    if (!el) return;
+    const st = this.#rolls.get(el) ?? { n: Number.NaN, raf: 0 };
+    if (st.raf && st.n === to) return;
+    const from = Number.isFinite(st.n) ? st.n : to;
+    st.n = to;
+    if (st.raf) cancelAnimationFrame(st.raf);
+    st.raf = 0;
+    this.#rolls.set(el, st);
+    if (from === to || prefersReducedMotion() || typeof requestAnimationFrame !== "function") {
+      el.textContent = fmtInt(to);
+      return;
+    }
+    let t0 = 0;
+    const step = (now) => {
+      if (!t0) t0 = now;
+      const p = Math.min(1, (now - t0) / ROLL_MS);
+      el.textContent = fmtInt(Math.round(from + (to - from) * (1 - (1 - p) ** 4)));
+      st.raf = p < 1 ? requestAnimationFrame(step) : 0;
+    };
+    st.raf = requestAnimationFrame(step);
+  }
+}
+define("ui-memory-panel", UiMemoryPanel);
+export {
+  FOLD_MS,
+  UNDO_MS,
+  UiMemoryPanel,
+  entryKeys,
+  entryMatches,
+  highlight,
+  isSameEdit,
+  shortText,
+  storeUsed,
+  usageAfterAdd,
+  usageLevel
+};
+//# sourceMappingURL=memory-panel.js.map