@8ux-co/eelzap 0.10.1 → 0.10.2

package/dist/{suggest-JZ63L3WP.js → suggest-KLS6B7AM.js}

@@ -13,16 +13,17 @@ import {
   parseRecordRef,
   reveal,
   tagGuard
-} from "./chunk-7CXQK2PR.js";
+} from "./chunk-T6S3S5RH.js";
 import {
   SUGGEST_MESSAGES,
   TOKENS,
   el,
   icon,
   initials,
+  kbd,
   mountHost,
   readTokenAnswer
-} from "./chunk-7ZPXZZUT.js";
+} from "./chunk-4ET7VBJA.js";
 import {
   EXPIRY_MARGIN_MS,
   accessLive,
@@ -55,6 +56,10 @@ async function call(ctx, token, path, init) {
     const seconds = Number.parseInt(response.headers.get("Retry-After") ?? "", 10);
     return { ok: false, kind: "rate", retryAfter: seconds > 0 ? Math.min(seconds, 3600) : 30 };
   }
+  if (response.status === 409) {
+    const body = await response.json().catch(() => null);
+    if (body?.error?.code === "NO_CHANGE") return { ok: false, kind: "unchanged" };
+  }
   if (!response.ok) return { ok: false, kind: "invalid" };
   try {
     return { ok: true, data: await response.json() };
@@ -374,6 +379,9 @@ function inDraftSession(win, now = Date.now()) {
   const value = readJson(win, DRAFT_SESSION_KEY);
   return !!value && typeof value.exp === "number" && value.exp > now && value.origin === win.location.origin;
 }
+function rememberEditIntent(win, now = Date.now()) {
+  write2(win, EDIT_INTENT_KEY, { path: win.location.pathname, at: now });
+}
 function takeEditIntent(win, now = Date.now()) {
   const value = readJson(win, EDIT_INTENT_KEY);
   remove(win, EDIT_INTENT_KEY);
@@ -465,12 +473,112 @@ async function leaveDraftSession(ctx, token, tagged) {
 }
 
 // src/preview/site/suggestion.ts
+var SUGGESTIBLE_TYPES = ["TEXT", "LONG_TEXT", "NUMBER", "URL"];
+var INPUT_TYPES = /* @__PURE__ */ new Set(["URL", "NUMBER", "INTEGER", "CURRENCY", "DATE", "DATETIME"]);
+function proposableField(tagged, field) {
+  return !!tagged && !!field && !tagged.html && SUGGESTIBLE_TYPES.includes(field.type);
+}
 function editKindFor(tagged, field) {
   if (!tagged || !field || tagged.html) return null;
   if (field.type === "TEXT" || field.type === "LONG_TEXT") return "text";
-  if (field.type === "NUMBER" || field.type === "URL") return "input";
+  if (INPUT_TYPES.has(field.type)) return "input";
+  if (field.type === "ENUM") return field.options?.length ? "choice" : null;
+  if (field.type === "BOOLEAN") return "switch";
   return null;
 }
+var ZERO_DIGITS = /* @__PURE__ */ new Set([
+  "BIF",
+  "CLP",
+  "DJF",
+  "GNF",
+  "ISK",
+  "JPY",
+  "KMF",
+  "KRW",
+  "PYG",
+  "RWF",
+  "UGX",
+  "UYI",
+  "VND",
+  "VUV",
+  "XAF",
+  "XOF",
+  "XPF"
+]);
+var THREE_DIGITS = /* @__PURE__ */ new Set(["BHD", "IQD", "JOD", "KWD", "LYD", "OMR", "TND"]);
+function currencyDigits(code) {
+  const upper = (code ?? "").toUpperCase();
+  if (ZERO_DIGITS.has(upper)) return 0;
+  if (THREE_DIGITS.has(upper)) return 3;
+  return 2;
+}
+var pad = (n) => String(n).padStart(2, "0");
+function inputSpec(field, value) {
+  const digits = currencyDigits(field.currency);
+  const limits = { min: field.min, max: field.max };
+  const number = typeof value === "number" && Number.isFinite(value) ? value : null;
+  switch (field.type) {
+    case "NUMBER":
+      return {
+        type: "number",
+        text: number === null ? "" : String(number),
+        ...limits,
+        step: field.step ?? "any"
+      };
+    case "INTEGER":
+      return { type: "number", text: number === null ? "" : String(number), ...limits, step: 1 };
+    case "CURRENCY":
+      return {
+        type: "number",
+        text: number === null ? "" : (number / 10 ** digits).toFixed(digits),
+        ...limits,
+        step: field.step ?? 10 ** -digits
+      };
+    case "DATE":
+      return { type: "date", text: typeof value === "string" ? value.slice(0, 10) : "" };
+    case "DATETIME": {
+      const at = typeof value === "string" ? new Date(value) : null;
+      return {
+        type: "datetime-local",
+        text: at && Number.isFinite(at.getTime()) ? `${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())}T${pad(at.getHours())}:${pad(at.getMinutes())}` : ""
+      };
+    }
+    default:
+      return { type: "text", text: typeof value === "string" ? value : "" };
+  }
+}
+function parseInput(field, raw) {
+  const text = cleanStega(raw).trim();
+  if (field.type === "URL") return { ok: true, value: normalizeText(text) };
+  if (text === "") return { ok: true, value: null };
+  const number = Number(text.replace(",", "."));
+  switch (field.type) {
+    case "NUMBER":
+      return Number.isFinite(number) ? { ok: true, value: number } : { ok: false };
+    case "INTEGER":
+      return Number.isInteger(number) ? { ok: true, value: number } : { ok: false };
+    case "CURRENCY":
+      return Number.isFinite(number) ? { ok: true, value: Math.round(number * 10 ** currencyDigits(field.currency)) } : { ok: false };
+    case "DATE":
+      return /^\d{4}-\d{2}-\d{2}$/.test(text) && Number.isFinite(Date.parse(text)) ? { ok: true, value: text } : { ok: false };
+    case "DATETIME": {
+      const at = new Date(text);
+      return Number.isFinite(at.getTime()) ? { ok: true, value: at.toISOString() } : { ok: false };
+    }
+    default:
+      return { ok: true, value: text };
+  }
+}
+function sameRaw(type, a, b) {
+  const before = a ?? null;
+  if (typeof before === "string" && typeof b === "string") {
+    if (type === "DATETIME") {
+      return Math.floor(Date.parse(before) / 6e4) === Math.floor(Date.parse(b) / 6e4);
+    }
+    return normalizeText(before) === normalizeText(b);
+  }
+  return before === b;
+}
 function fieldOf(data, tagged) {
   if (!data || !tagged) return null;
   const field = data.fields?.[tagged.recordRef]?.[tagged.fieldKey];
@@ -549,7 +657,7 @@ function buildDraftBody(input) {
     ...recordKeys(input.recordRef),
     pageUrl: input.pageUrl,
     anchors: input.anchors.slice(0, 20),
-    body: String(input.proposal.value).slice(0, 1e4) || " ",
+    body: (input.display ?? String(input.proposal.value ?? "")).slice(0, 1e4) || " ",
     ...proposedPart(input.proposal)
   };
 }
@@ -781,6 +889,7 @@ var OVERLAY_MODE = {
 var PENDING_PIN = "eelzap:pending";
 var LARGE_SHARE = 0.5;
 var TOAST_MS = 8e3;
+var RELOAD_AFTER_SAVE_MS = 700;
 var SAVED_MS = 4e3;
 function start(ctx, options = {}) {
   const { win, doc } = ctx;
@@ -795,6 +904,7 @@ function start(ctx, options = {}) {
   const m = SUGGEST_MESSAGES[ctx.locale];
   const dm = DRAFT_SESSION_MESSAGES[ctx.locale];
   let reopenEdit = takeEditIntent(win);
+  let retryDraft = !reopenEdit;
   const host = mountHost(doc, CSS + DRAG_CSS);
   const layer = el(doc, "div", { class: "layer" });
   const marks = el(doc, "div", { class: "marks" });
@@ -813,6 +923,7 @@ function start(ctx, options = {}) {
   let editing = null;
   let list = null;
   let toast = null;
+  let info = null;
   let toastTimer = null;
   let status = null;
   let statusTimer = null;
@@ -834,7 +945,10 @@ function start(ctx, options = {}) {
   };
   win.addEventListener("click", onClickFirst, true);
   const onPressFirst = (event) => {
-    if (menuOpen && event.target !== host.host) setMenu(false);
+    if (event.target === host.host) return;
+    if (menuOpen) setMenu(false);
+    if (editing?.card && !editing.done) commitEdit(editing);
+    if (info) closeInfo();
   };
   win.addEventListener("pointerdown", onPressFirst, true);
   layer.addEventListener("pointerdown", (event) => {
@@ -969,12 +1083,14 @@ function start(ctx, options = {}) {
   function setMode(next) {
     if (next === "edit" && !canEdit() || paused && next !== "navigate") return;
     if (status === "preparing") return;
-    if (next === "edit" && !index.elements.length && !inDraftSession(win)) {
+    if (next === "edit" && !index.elements.length && (retryDraft || !inDraftSession(win))) {
+      retryDraft = false;
       void prepareEdit();
       return;
     }
     endEdit();
     closeComposer();
+    closeInfo();
     mode = next;
     selection = [];
     overlay.clearSelection();
@@ -1075,7 +1191,7 @@ function start(ctx, options = {}) {
   function withTip(target, text, end) {
     const show = () => {
       tip.replaceChildren(text);
-      if (key) tip.append(el(doc, "span", { class: "kbd", text: `Shift ${key}` }));
+      if (key) tip.append(kbd(doc, "Shift", key));
       tip.classList.add("on");
       const rect = target.getBoundingClientRect();
       const vw = doc.documentElement.clientWidth || win.innerWidth;
@@ -1494,6 +1610,13 @@ function start(ctx, options = {}) {
         box.style.top = `${rect.top - 3}px`;
         box.style.width = `${rect.width + 6}px`;
         box.style.height = `${rect.height + 6}px`;
+        if (editing?.card)
+          box.append(
+            el(doc, "span", {
+              class: "mark-chip",
+              text: editing.field.label || editing.tagged.fieldKey
+            })
+          );
         return box;
       })
     );
@@ -1505,18 +1628,42 @@ function start(ctx, options = {}) {
       frame = null;
       drawMarks();
       if (composer) position(composer.card, anchorRect(composer));
-      if (editing?.card) position(editing.card, editing.element.getBoundingClientRect());
+      if (editing?.card)
+        position(editing.card, editing.element.getBoundingClientRect(), editing.card.offsetWidth);
+      if (info) position(info.card, info.tagged.element.getBoundingClientRect(), 300);
     });
   }
-  function position(card, rect) {
-    const width = Math.min(420, win.innerWidth - 16);
-    const height = card.offsetHeight || 260;
-    const below = rect.bottom + 10;
-    const top = below + height < win.innerHeight - 90 ? below : Math.max(8, rect.top - height - 10);
-    const left = Math.min(Math.max(8, rect.left), Math.max(8, win.innerWidth - width - 8));
+  function position(card, rect, preferred = 420) {
+    const vw = win.innerWidth;
+    const vh = win.innerHeight;
+    const width = Math.min(preferred, vw - 16);
     card.style.width = `${width}px`;
-    card.style.top = `${top}px`;
-    card.style.left = `${left}px`;
+    const height = card.offsetHeight || 260;
+    const bar = bottom.querySelector(".toolbar, .pill")?.getBoundingClientRect();
+    const clampX = (x) => Math.min(Math.max(8, x), Math.max(8, vw - width - 8));
+    const hits = (x, y) => !!bar && x < bar.right + 8 && x + width > bar.left - 8 && y < bar.bottom + 8 && y + height > bar.top - 8;
+    const fits = (y) => y >= 8 && y + height <= vh - 8;
+    let place = null;
+    for (const y of [rect.bottom + 10, rect.top - height - 10]) {
+      if (!fits(y)) continue;
+      for (const x of [
+        clampX(rect.left),
+        clampX((bar?.right ?? 0) + 8),
+        clampX((bar?.left ?? 0) - 8 - width)
+      ]) {
+        if (!hits(x, y)) {
+          place = [x, y];
+          break;
+        }
+      }
+      if (place) break;
+    }
+    if (!place) {
+      const y = fits(rect.bottom + 10) ? rect.bottom + 10 : Math.max(8, rect.top - height - 10);
+      place = [clampX(rect.left), y];
+    }
+    card.style.left = `${place[0]}px`;
+    card.style.top = `${place[1]}px`;
   }
   function onSelect(elements) {
     if (mode !== "comment" || composer) return;
@@ -1562,7 +1709,7 @@ function start(ctx, options = {}) {
     const own = single ? index.get(single) : null;
     const tagged = own && own.recordRef === recordRef ? own : null;
     const field = fieldOf(data, tagged);
-    const proposable = editKindFor(tagged, field) !== null;
+    const proposable = proposableField(tagged, field);
     const target = single;
     const before = field?.type === "URL" && target?.localName === "a" ? target.getAttribute("href") ?? "" : normalizeText(target?.textContent ?? "");
     const spotPin = point ? anchors[0] : null;
@@ -1834,13 +1981,17 @@ function start(ctx, options = {}) {
     const field = fieldOf(data, tagged);
     const kind = editKindFor(tagged, field);
     if (!kind || !field) {
-      setToast({ title: m.notEditable, body: m.notEditableBody, error: true });
+      openInfoCard(tagged);
       return;
     }
+    closeInfo();
     const element = tagged.element;
     const pageUrl = currentPageUrl(win);
     const anchors = [toApiAnchor(buildAnchor(element, index, pageUrl, doc, win), tagged.recordRef)];
     const before = field.type === "URL" && element.localName === "a" ? element.getAttribute("href") ?? "" : normalizeText(element.textContent ?? "");
+    const stored2 = data?.values?.[tagged.recordRef]?.[tagged.fieldKey];
+    const legacy = field.type === "NUMBER" && stored2 === void 0 ? parseProposed("NUMBER", before) : null;
+    const raw = legacy?.ok ? legacy.value : stored2;
     const inline = kind === "text" ? beginInlineEdit(element) : null;
     const session = {
       element,
@@ -1851,6 +2002,9 @@ function start(ctx, options = {}) {
       pageUrl,
       anchors,
       before,
+      raw,
+      picked: raw,
+      returnFocus: doc.activeElement,
       revert: inline?.revert ?? (() => {
       }),
       keep: inline?.keep ?? (() => {
@@ -1863,58 +2017,228 @@ function start(ctx, options = {}) {
     if (inline) {
       element.addEventListener("blur", () => commitEdit(session), { once: true });
       element.focus?.();
+    } else if (kind === "choice") {
+      openChoiceCard(session);
+    } else if (kind === "switch") {
+      openSwitchCard(session);
     } else {
       openInputCard(session);
     }
     renderBottom();
   }
+  function openValueCard(session, body, focus, width) {
+    const label = session.field.label || session.tagged.fieldKey;
+    const card = el(
+      doc,
+      "div",
+      {
+        class: "card editor",
+        attrs: { role: "dialog", "aria-label": label },
+        on: {
+          keydown: (event) => {
+            const e = event;
+            if (e.key !== "Enter" || e.target.getAttribute("role") === "option") return;
+            e.preventDefault();
+            commitEdit(session);
+          }
+        }
+      },
+      [
+        body,
+        el(doc, "div", { class: "keys" }, [
+          kbd(doc, "Enter"),
+          m.enterSaves,
+          kbd(doc, "Esc"),
+          m.escCancels
+        ])
+      ]
+    );
+    card.style.width = `${width}px`;
+    session.card = card;
+    layer.append(card);
+    position(card, session.element.getBoundingClientRect(), width);
+    focus.focus();
+  }
   function openInputCard(session) {
+    const { field } = session;
+    const spec = field.type === "URL" ? { type: "url", text: session.before, min: void 0, max: void 0, step: void 0 } : inputSpec(field, session.raw);
     const input = el(doc, "input", {
       class: "value",
       attrs: {
-        "aria-label": session.field.label || session.tagged.fieldKey,
-        type: "text",
-        inputmode: session.field.type === "NUMBER" ? "decimal" : "url"
-      }
-    });
-    input.value = session.before;
-    input.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        commitEdit(session);
+        "aria-label": field.label || session.tagged.fieldKey,
+        type: spec.type,
+        min: spec.min === void 0 ? null : String(spec.min),
+        max: spec.max === void 0 ? null : String(spec.max),
+        step: spec.step === void 0 ? null : String(spec.step)
       }
     });
-    const card = el(doc, "div", { class: "card popover sheet", attrs: { role: "dialog" } }, [
-      el(doc, "div", { class: "head" }, [
-        el(doc, "span", { class: "chip" }, [
-          icon(doc, "field", 12),
-          session.field.label || session.tagged.fieldKey
-        ]),
-        closeButton(m.close, () => cancelEdit(session))
-      ]),
-      el(doc, "div", { class: "content" }, [
+    input.value = spec.text;
+    session.input = input;
+    const unit2 = field.type === "CURRENCY" ? field.currency ?? null : null;
+    openValueCard(
+      session,
+      unit2 ? el(doc, "div", { class: "with-unit" }, [
         input,
-        el(doc, "div", { class: "actions" }, [
-          el(doc, "button", {
-            class: "btn btn-outline",
-            text: m.cancel,
-            attrs: { type: "button" },
-            on: { click: () => cancelEdit(session) }
+        el(doc, "span", { class: "muted", text: unit2 })
+      ]) : input,
+      input,
+      field.type === "URL" ? 280 : 220
+    );
+  }
+  function openChoiceCard(session) {
+    const buttons = (session.field.options ?? []).map(
+      (option) => el(
+        doc,
+        "button",
+        {
+          class: "option",
+          attrs: {
+            type: "button",
+            role: "option",
+            "aria-selected": String(option.id === session.raw),
+            tabindex: "-1"
+          },
+          on: {
+            click: () => {
+              session.picked = option.id;
+              commitEdit(session);
+            }
+          }
+        },
+        [
+          el(doc, "span", { class: "option-label", text: option.label }),
+          option.id === session.raw ? icon(doc, "tick", 14) : null
+        ]
+      )
+    );
+    const first = buttons.find((button) => button.getAttribute("aria-selected") === "true") ?? buttons[0];
+    first.tabIndex = 0;
+    const list2 = el(
+      doc,
+      "div",
+      {
+        class: "options",
+        attrs: { role: "listbox", "aria-label": m.options(session.field.label) },
+        on: {
+          keydown: (event) => {
+            const e = event;
+            const at = buttons.indexOf(host.root.activeElement);
+            const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: buttons.length - 1 }[e.key];
+            if (to === void 0) return;
+            e.preventDefault();
+            buttons[Math.min(buttons.length - 1, Math.max(0, to))]?.focus();
+          }
+        }
+      },
+      buttons
+    );
+    openValueCard(session, list2, first, 230);
+  }
+  function openSwitchCard(session) {
+    session.picked = session.raw === true;
+    const label = session.field.label || session.tagged.fieldKey;
+    const toggle = el(
+      doc,
+      "button",
+      {
+        class: "switch",
+        attrs: {
+          type: "button",
+          role: "switch",
+          "aria-checked": String(session.picked),
+          "aria-label": label
+        },
+        on: {
+          click: () => {
+            session.picked = !session.picked;
+            toggle.setAttribute("aria-checked", String(session.picked));
+          }
+        }
+      },
+      [el(doc, "span", { class: "knob" })]
+    );
+    openValueCard(
+      session,
+      el(doc, "div", { class: "switch-row" }, [
+        el(doc, "span", { class: "title", text: label }),
+        toggle
+      ]),
+      toggle,
+      220
+    );
+  }
+  function openInfoCard(tagged) {
+    closeInfo();
+    const field = fieldOf(data, tagged);
+    const label = field?.label || tagged.fieldKey;
+    const card = el(
+      doc,
+      "div",
+      { class: "card info", attrs: { role: "dialog", "aria-label": m.editInZap } },
+      [
+        icon(doc, "info", 16),
+        el(doc, "div", { class: "toast-text" }, [
+          el(doc, "span", { class: "title", text: m.editInZap }),
+          el(doc, "span", {
+            class: "muted",
+            text: m.editInZapBody(label, field?.type ?? "", tagged.recordRef.startsWith("doc:"))
           }),
-          el(doc, "button", {
-            class: "btn btn-primary",
-            text: m.save,
-            attrs: { type: "button", "data-action": "save" },
-            on: { click: () => commitEdit(session) }
-          })
+          el(doc, "div", { class: "actions start" }, [
+            el(
+              doc,
+              "button",
+              {
+                class: "btn btn-outline",
+                attrs: { type: "button", "data-action": "open-field" },
+                on: {
+                  click: () => {
+                    closeInfo();
+                    win.open(fieldEditorUrl(tagged), "_blank", "noopener");
+                  }
+                }
+              },
+              [icon(doc, "external", 14), m.openInZap]
+            ),
+            el(
+              doc,
+              "button",
+              {
+                class: "btn btn-ghost",
+                attrs: { type: "button", "data-action": "comment-field" },
+                on: {
+                  click: () => {
+                    closeInfo();
+                    setMode("comment");
+                    if (mode === "comment") openComposer([tagged.element], null);
+                  }
+                }
+              },
+              [icon(doc, "commentPlus", 14), m.comment]
+            )
+          ])
         ])
-      ])
-    ]);
-    session.card = card;
-    session.input = input;
+      ]
+    );
+    info = { tagged, card };
     layer.append(card);
-    position(card, session.element.getBoundingClientRect());
-    input.focus();
+    position(card, tagged.element.getBoundingClientRect(), 300);
+  }
+  function closeInfo() {
+    info?.card.remove();
+    info = null;
+  }
+  function fieldEditorUrl(tagged) {
+    const own = !data?.records?.[tagged.recordRef];
+    const base = data?.editorUrls?.[tagged.recordRef] ?? (own ? data?.viewer?.editorUrl : null) ?? null;
+    const safe = zapUrl(base, ctx.zapOrigin);
+    if (!base) return safe;
+    try {
+      const url = new URL(safe);
+      url.searchParams.set("field", tagged.fieldKey);
+      return url.href;
+    } catch {
+      return safe;
+    }
   }
   function beginInlineEdit(target) {
     const children = Array.from(target.childNodes);
@@ -1956,6 +2280,8 @@ function start(ctx, options = {}) {
     session.card?.remove();
     if (editing === session) editing = null;
     renderBottom();
+    const back = session.returnFocus;
+    if (session.card && back?.isConnected) back.focus?.({ preventScroll: true });
   }
   function cancelEdit(session) {
     if (session.done) return;
@@ -1963,42 +2289,77 @@ function start(ctx, options = {}) {
   }
   function commitEdit(session) {
     if (session.done) return;
-    const parsed = parseProposed(session.field.type, typedValue(session));
-    if (!parsed.ok) {
-      finishEdit(session, false);
-      setToast({ title: m.saveFailed, body: m.invalidNumber, error: true });
-      return;
+    const { field, kind } = session;
+    const text = kind === "text" || field.type === "URL";
+    let value;
+    if (text) {
+      const parsed = parseProposed(field.type, typedValue(session));
+      const before = parseProposed(field.type, session.before);
+      if (parsed.ok && before.ok && sameValue(before.value, parsed.value)) {
+        finishEdit(session, false);
+        return;
+      }
+      if (!parsed.ok) return invalid(session);
+      value = parsed.value;
+    } else if (kind === "input") {
+      if (session.input?.validity?.badInput) return invalid(session);
+      const parsed = parseInput(field, typedValue(session));
+      if (!parsed.ok) return invalid(session);
+      value = parsed.value;
+    } else {
+      value = session.picked ?? null;
     }
-    const before = parseProposed(session.field.type, session.before);
-    if (before.ok && sameValue(before.value, parsed.value)) {
+    if (!text && sameRaw(field.type, session.raw, value)) {
       finishEdit(session, false);
       return;
     }
     finishEdit(session, true);
-    void save(session, {
-      fieldKey: session.tagged.fieldKey,
-      locale: session.tagged.locale,
-      value: parsed.value
-    });
+    void save(
+      session,
+      { fieldKey: session.tagged.fieldKey, locale: session.tagged.locale, value },
+      kind === "choice" ? field.options?.find((option) => option.id === value)?.label : kind === "switch" ? value ? m.yes : m.no : void 0
+    );
   }
-  async function save(session, proposal) {
+  function invalid(session) {
+    finishEdit(session, false);
+    setToast({ title: m.saveFailed, body: m.invalidNumber, error: true });
+  }
+  async function save(session, proposal, display) {
     setStatus("saving");
     const body = buildDraftBody({
       recordRef: session.recordRef,
       pageUrl: session.pageUrl,
       anchors: session.anchors,
-      proposal
+      proposal,
+      display
     });
     const draftKey = newIdempotencyKey(win);
     const result = await auth.call((token) => saveToDraft(ctx, token, body, draftKey));
     if (destroyed) return;
     if (!result.ok) {
-      session.revert();
       setStatus(null);
+      if (result.kind === "unchanged") return;
+      session.revert();
       onFailure(result, "edit");
       return;
     }
     setStatus("saved");
+    if (data && session.raw !== void 0)
+      (data.values ?? (data.values = {}))[session.recordRef] = {
+        ...data.values[session.recordRef],
+        [session.tagged.fieldKey]: proposal.value
+      };
+    showSaved(session, display);
+  }
+  function showSaved(session, display) {
+    const { field, tagged, element } = session;
+    if (session.kind === "text" || field.type === "URL") return;
+    if (field.type === "ENUM" && display !== void 0 && tagged.source === "attr" && element.children.length === 0) {
+      element.textContent = display;
+      return;
+    }
+    rememberEditIntent(win);
+    win.setTimeout(() => win.location.reload(), RELOAD_AFTER_SAVE_MS);
   }
   function endEdit() {
     if (editing && !editing.done) commitEdit(editing);
@@ -2019,6 +2380,11 @@ function start(ctx, options = {}) {
       closeComposer();
       return;
     }
+    if (info && event.key === "Escape") {
+      event.preventDefault();
+      closeInfo();
+      return;
+    }
     const session = editing;
     if (!session || session.done) return;
     if (event.key === "Escape") {
@@ -2124,11 +2490,9 @@ var CSS = `
   border-radius: 7px; background: #101828; color: #FFFFFF; font-weight: 500; font-size: 12px; line-height: 18px;
   white-space: nowrap; pointer-events: none; }
 .tip:not(.on) { display: none; }
-.kbd { font-size: 11px; line-height: 16px; color: #CBD5E1; padding: 1px 5px; border-radius: 4px;
-  background: rgba(255,255,255,.12); }
 [data-enter] { animation: eelzap-in .16s cubic-bezier(.4,0,.2,1); }
 @keyframes eelzap-in { from { opacity: 0; transform: scale(.96); } }
-@media (prefers-reduced-motion: reduce) { .seg, .tool, .grip, .pill { transition: none; } [data-enter] { animation: none; } }
+@media (prefers-reduced-motion: reduce) { .seg, .tool, .grip, .pill, .switch, .knob { transition: none; } [data-enter] { animation: none; } }
 .tool.strong { color: ${TOKENS.fg}; }
 .divider { width: 1px; height: 22px; background: ${TOKENS.border}; }
 .avatar { width: 26px; height: 26px; border-radius: 7px; background: #DBEAFE; color: #1D4ED8;
@@ -2152,7 +2516,35 @@ var CSS = `
 .refused { align-self: center; margin-right: 0; width: min(420px, calc(100vw - 16px)); align-items: flex-start; }
 .toast > .icon { color: #16A34A; }
 .refused > .icon, .toast-error > .icon { color: ${TOKENS.danger}; }
-.paused > .icon { color: ${TOKENS.muted}; }
+.paused > .icon, .info > .icon { color: ${TOKENS.muted}; }
+.editor { min-width: max-content; }
+.editor, .info { position: fixed; padding: 8px; border-radius: 7px;
+  box-shadow: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06); }
+.info { display: flex; gap: 10px; padding: 12px 14px; }
+.info > .icon { margin-top: 1px; }
+.info .title { font-weight: 500; }
+.info .muted { font-size: 12px; }
+.actions.start { justify-content: flex-start; margin-top: 10px; gap: 6px; }
+.actions.start .btn { height: 28px; gap: 7px; font-size: 12px; }
+.btn-ghost { border: 1px solid transparent; }
+.btn-ghost:hover { background: ${TOKENS.subtle}; }
+.keys { display: flex; align-items: center; gap: 5px; margin: 8px 2px 0; font-size: 12px; color: ${TOKENS.muted}; white-space: nowrap; }
+.editor input.value { height: 34px; border-radius: 8px; }
+.with-unit { display: flex; align-items: center; gap: 8px; }
+.options { display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
+.option { width: 100%; height: 32px; gap: 8px; padding: 0 8px; border-radius: 6px; font-weight: 400; text-align: left; }
+.option:hover, .option:focus-visible { background: #F1F5F9; box-shadow: none; }
+.option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
+.switch-row .title { font-weight: 500; }
+.switch { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #CBD5E1; transition: background .15s; }
+.switch[aria-checked="true"] { background: ${TOKENS.primary}; }
+.knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: ${TOKENS.bg};
+  box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: left .15s; }
+.switch[aria-checked="true"] .knob { left: 16px; }
+.mark-chip { position: absolute; right: -5px; top: -27px; display: inline-flex; align-items: center; height: 20px;
+  padding: 0 7px; border-radius: 6px; background: ${TOKENS.gold}; color: #FFFFFF; font: 600 12px Poppins, ui-sans-serif, system-ui, sans-serif;
+  white-space: nowrap; }
 .toast-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
 .title { font-weight: 600; }
 .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@@ -2188,4 +2580,4 @@ export {
   start,
   zapUrl
 };
-//# sourceMappingURL=suggest-JZ63L3WP.js.map
+//# sourceMappingURL=suggest-KLS6B7AM.js.map