@wildwinter/expr-editor 0.6.0 → 0.8.0

package/README.md

@@ -55,6 +55,14 @@ Notable options beyond the basics:
   the flag-delta pills plus an "+ flag" chip (which picks sign + name from
   `flags`), hiding the function name and target arg, and seeds the call on the
   first flag add. Pair with `requireNonEmpty` so the last flag can't be removed.
+- `propertyActions(ref)` — host actions shown when a property pill is
+  right-clicked (e.g. "Go to definition"); the host resolves what each does.
+- `rawPlaceholder` — placeholder for the raw-text textarea (value cells pass a
+  value-flavoured hint).
+
+Pills carry `aria-haspopup`/labels and the tree controls carry aria-labels for
+assistive tech. A comparison of a numeric dialect function against a number
+(e.g. `turns_since_tag("x") > 3`) deletes as a unit.
 - `setText(on)` — the host's raw-text toggle (`</>`); unparseable input falls
   back to raw text automatically.
 

package/dist/index.cjs

@@ -305,10 +305,11 @@ function el(tag, cls, children) {
   }
   return node;
 }
-function button(cls, label, onClick, title) {
+function button(cls, label, onClick, title, aria) {
   const b = el("button", cls, [label]);
   b.type = "button";
   if (title) b.title = title;
+  if (aria) b.setAttribute("aria-label", aria);
   b.addEventListener("click", onClick);
   return b;
 }
@@ -389,10 +390,25 @@ function textField(opts) {
 var FLAG_FNS = /* @__PURE__ */ new Set(["check_flags", "set_flags"]);
 var TAG_ARG0_FNS = /* @__PURE__ */ new Set(["seen", "patter_seen", "visits", "patter_visits"]);
 function pill(kind, label, onClick, opts = {}) {
-  const b = button(`exed-pill exed-pill-${kind}${opts.issue ? " exed-pill-err" : ""}`, label, () => onClick(b), opts.issue ?? opts.title);
+  const b = button(`exed-pill exed-pill-${kind}${opts.issue ? " exed-pill-err" : ""}`, label, () => onClick(b), opts.issue ?? opts.title, opts.aria);
+  b.setAttribute("aria-haspopup", "dialog");
   if (opts.path) b.dataset["exedPath"] = opts.path.join("/");
   return b;
 }
+var OP_ARIA = {
+  "==": "equals",
+  "!=": "not equal to",
+  ">": "greater than",
+  ">=": "at least",
+  "<": "less than",
+  "<=": "at most",
+  "and": "and",
+  "or": "or",
+  "+": "plus",
+  "-": "minus",
+  "*": "times",
+  "/": "divided by"
+};
 var issueText = (ctx, path) => {
   const list = issuesAt(ctx.byPath, path);
   return list.length ? list.map((i) => i.message).join("; ") : void 0;
@@ -420,7 +436,9 @@ function renderNode(node, path, ctx, parentOp, side) {
     case "scopedvar": {
       const entry = lookup(ctx.catalogue, node.scope, node.name);
       const label = displayName({ scope: node.scope, name: node.name }, ctx.defaultScope);
-      return pill("var", label, (b) => variableEditor(ctx, path, node, b), { issue: issue ?? (entry ? void 0 : `Unknown property ${label}`) });
+      const varPill = pill("var", label, (b) => variableEditor(ctx, path, node, b), { issue: issue ?? (entry ? void 0 : `Unknown property ${label}`) });
+      attachPropertyMenu(ctx, node, varPill);
+      return varPill;
     }
     case "flagdelta":
       return pill(node.sign === "+" ? "flagpos" : "flagneg", `${node.sign}${node.name || "flag"}`, (b) => flagEditor(ctx, path, node, b), { issue, path });
@@ -437,7 +455,7 @@ function renderNode(node, path, ctx, parentOp, side) {
     }
     case "unary": {
       const row = el("span", "exed-unary");
-      row.append(pill("op", UNARY_LABEL[node.op], () => ctx.apply(deleteOrUnwrapNot(ctx, path, node)), { title: "remove" }));
+      row.append(pill("op", UNARY_LABEL[node.op], () => ctx.apply(deleteOrUnwrapNot(ctx, path, node)), { title: "remove", aria: `${OP_ARIA[node.op] ?? node.op} (click to remove)` }));
       row.append(renderNode(node.operand, [...path, "operand"], ctx));
       return row;
     }
@@ -449,7 +467,7 @@ function renderNode(node, path, ctx, parentOp, side) {
       const swap = opSwapGroup(node.op);
       const opPill = pill("op", BINARY_LABEL[node.op], (b) => {
         if (swap) operatorEditor(ctx, path, node.op, swap, b);
-      }, { title: swap ? "swap operator" : void 0 });
+      }, { title: swap ? "swap operator" : void 0, aria: OP_ARIA[node.op] ?? node.op });
       if (!swap) opPill.classList.add("exed-op-structural");
       row.append(opPill);
       row.append(renderNode(node.right, [...path, "right"], ctx, node.op, "right"));
@@ -458,10 +476,47 @@ function renderNode(node, path, ctx, parentOp, side) {
     }
   }
 }
+function signToggle(current, onPick) {
+  const row = el("div", "exed-sign");
+  ["+", "-"].forEach((s) => {
+    const cls = `exed-signbtn${s === current ? s === "+" ? " sel-pos" : " sel-neg" : ""}`;
+    row.append(button(cls, s === "+" ? "+ set" : "\u2212 unset", () => onPick(s)));
+  });
+  return row;
+}
 var deleteOrUnwrapNot = (ctx, path, node) => (
   // clicking the NOT pill strips it (keeps the operand)
   setNodeAt(ctx.getAst(), path, node.operand)
 );
+function attachPropertyMenu(ctx, node, pillEl) {
+  if (!ctx.propertyActions) return;
+  const actions = ctx.propertyActions({ scope: node.scope, name: node.name });
+  if (!actions.length) return;
+  pillEl.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    ctx.openPopover(pillEl, (close) => {
+      const wrap = el("div", "exed-menu");
+      for (const a of actions) wrap.append(button("exed-opt", a.label, () => {
+        a.run();
+        close();
+      }));
+      return wrap;
+    });
+  });
+}
+function isCompoundComparison(node, ctx) {
+  if (node.kind !== "binary" || !isComparisonOp(node.op)) return false;
+  const numCall = (n) => n.kind === "call" && ctx.dialect.functions[n.name]?.returnType === "number";
+  const isNum = (n) => n.kind === "number";
+  return numCall(node.left) && isNum(node.right) || numCall(node.right) && isNum(node.left);
+}
+function effectiveDeletePath(ctx, path) {
+  const last = path[path.length - 1];
+  if (last !== "left" && last !== "right") return path;
+  const parentPath = path.slice(0, -1);
+  const parent = getNodeAt(ctx.getAst(), parentPath);
+  return parent && isCompoundComparison(parent, ctx) ? parentPath : path;
+}
 function boolEditor(ctx, path, value, anchor) {
   ctx.openPopover(anchor, (close) => {
     const wrap = el("div", "exed-menu");
@@ -547,14 +602,10 @@ function flagEditor(ctx, path, node, anchor) {
   ctx.openPopover(anchor, (close) => {
     const wrap = el("div", "exed-menu");
     wrap.append(el("div", "exed-menu-head", ["Flag set?"]));
-    const signRow = el("div", "exed-field-row");
-    for (const s of ["+", "-"]) {
-      signRow.append(button(`exed-opt${s === node.sign ? " sel" : ""}`, s === "+" ? "+ set" : "\u2212 unset", () => {
-        replace(ctx, path, flagDelta(s, node.name));
-        close();
-      }));
-    }
-    wrap.append(signRow);
+    wrap.append(signToggle(node.sign, (s) => {
+      replace(ctx, path, flagDelta(s, node.name));
+      close();
+    }));
     const names = (entry?.enumValues ?? []).filter((n) => !used.includes(n));
     if (names.length) {
       wrap.append(el("div", "exed-menu-head", ["Flag"]));
@@ -577,7 +628,7 @@ function flagEditor(ctx, path, node, anchor) {
     return wrap;
   });
 }
-var canDelete = (ctx, path) => !(ctx.requireNonEmpty && path.length === 0);
+var canDelete = (ctx, path) => !(ctx.requireNonEmpty && effectiveDeletePath(ctx, path).length === 0);
 function callEditor(ctx, path, node, anchor) {
   ctx.openPopover(anchor, (close) => {
     const wrap = el("div", "exed-menu");
@@ -591,7 +642,7 @@ function callEditor(ctx, path, node, anchor) {
     }
     if (canDelete(ctx, path)) {
       wrap.append(button("exed-opt danger", "Delete", () => {
-        ctx.apply(deleteAt(ctx.getAst(), path));
+        ctx.apply(deleteAt(ctx.getAst(), effectiveDeletePath(ctx, path)));
         close();
       }));
     }
@@ -606,7 +657,7 @@ function variableEditor(ctx, path, node, anchor) {
       close();
     },
     ...canDelete(ctx, path) ? { footer: button("exed-opt danger", "Delete", () => {
-      ctx.apply(deleteAt(ctx.getAst(), path));
+      ctx.apply(deleteAt(ctx.getAst(), effectiveDeletePath(ctx, path)));
       close();
     }) } : {}
   }));
@@ -876,15 +927,17 @@ function renderRow(ctx, row, env) {
   if (row.kind === "container") return renderContainer(ctx, row, env);
   return renderLeaf(ctx, row, env);
 }
-function notToggle(ctx, path) {
-  return button("exed-rowbtn", "NOT", () => ctx.apply(toggleContainerNot(ctx.getAst(), path)), "toggle NOT");
+function notToggle(ctx, path, pressed) {
+  const b = button("exed-rowbtn", "NOT", () => ctx.apply(toggleContainerNot(ctx.getAst(), path)), "toggle NOT", pressed ? "remove NOT" : "apply NOT");
+  b.setAttribute("aria-pressed", String(pressed));
+  return b;
 }
 function rowActions(ctx, row, env) {
   const acts = el("div", "exed-rowacts");
-  acts.append(notToggle(ctx, row.path));
+  acts.append(notToggle(ctx, row.path, row.negated));
   if (env.chainPath && env.count != null && env.index != null) {
-    if (env.index > 0) acts.append(button("exed-rowbtn", "\u2191", () => ctx.apply(moveChildInContainer(ctx.getAst(), env.chainPath, env.index, env.index - 1)), "move up"));
-    if (env.index < env.count - 1) acts.append(button("exed-rowbtn", "\u2193", () => ctx.apply(moveChildInContainer(ctx.getAst(), env.chainPath, env.index, env.index + 1)), "move down"));
+    if (env.index > 0) acts.append(button("exed-rowbtn", "\u2191", () => ctx.apply(moveChildInContainer(ctx.getAst(), env.chainPath, env.index, env.index - 1)), "move up", "move up"));
+    if (env.index < env.count - 1) acts.append(button("exed-rowbtn", "\u2193", () => ctx.apply(moveChildInContainer(ctx.getAst(), env.chainPath, env.index, env.index + 1)), "move down", "move down"));
   }
   acts.append(button("exed-rowbtn danger", "\u2715", () => {
     if (env.root) {
@@ -893,7 +946,7 @@ function rowActions(ctx, row, env) {
     }
     const target = redirectDeleteForPlaceholderSibling(ctx.getAst(), row.path);
     ctx.apply(deleteAt(ctx.getAst(), target));
-  }, "delete"));
+  }, "delete", "delete this condition"));
   return acts;
 }
 function renderLeaf(ctx, row, env) {
@@ -921,8 +974,8 @@ function renderContainer(ctx, row, env) {
     head.append(el("span", "exed-grouplabel", [label]));
   }
   const headActs = el("div", "exed-rowacts");
-  headActs.append(notToggle(ctx, row.path));
-  if (!env.root) headActs.append(button("exed-rowbtn danger", "\u2715", () => ctx.apply(deleteAt(ctx.getAst(), row.path)), "delete group"));
+  headActs.append(notToggle(ctx, row.path, row.negated));
+  if (!env.root) headActs.append(button("exed-rowbtn danger", "\u2715", () => ctx.apply(deleteAt(ctx.getAst(), row.path)), "delete group", "delete this group"));
   head.append(headActs);
   box.append(head);
   const body = el("div", "exed-groupbody");
@@ -1075,6 +1128,7 @@ function mountExpressionEditor(host, opts) {
       },
       ...opts.requireNonEmpty ? { requireNonEmpty: true } : {},
       ...opts.valueEnumValues ? { valueEnumValues: opts.valueEnumValues } : {},
+      ...opts.propertyActions ? { propertyActions: opts.propertyActions } : {},
       ...opts.pickNode ? { pickNode: opts.pickNode } : {},
       ...opts.nodeLabel ? { nodeLabel: opts.nodeLabel } : {}
     };
@@ -1111,7 +1165,7 @@ function mountExpressionEditor(host, opts) {
   function rawArea() {
     const ta = el("textarea", "exed-raw");
     ta.value = src;
-    ta.placeholder = "@gold > 0 and @met_anna";
+    ta.placeholder = opts.rawPlaceholder ?? "@gold > 0 and @met_anna";
     ta.rows = 2;
     ta.addEventListener("input", () => {
       src = ta.value;
@@ -1164,21 +1218,15 @@ function mountExpressionEditor(host, opts) {
         let sign = "+";
         const wrap = el("div", "exed-menu");
         wrap.append(el("div", "exed-menu-head", ["Add flag"]));
-        const signRow = el("div", "exed-field-row");
+        const signHost = el("div");
         const drawSign = () => {
-          signRow.replaceChildren(
-            button(`exed-opt${sign === "+" ? " sel" : ""}`, "+ set", () => {
-              sign = "+";
-              drawSign();
-            }),
-            button(`exed-opt${sign === "-" ? " sel" : ""}`, "\u2212 unset", () => {
-              sign = "-";
-              drawSign();
-            })
-          );
+          signHost.replaceChildren(signToggle(sign, (s) => {
+            sign = s;
+            drawSign();
+          }));
         };
         drawSign();
-        wrap.append(signRow);
+        wrap.append(signHost);
         const commit = (name) => {
           const delta = flagDelta(sign, name);
           emit(toSrc(call ? { ...call, args: [...call.args, delta] } : callNode("set_flags", [parseRef(opts.flagValue.target), delta])));