@wildwinter/expr-editor 0.7.0 → 0.9.0

package/README.md

@@ -55,6 +55,19 @@ 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.
+
+`renderConditionPreview(src, opts)` / `renderEffectsPreview(effects, opts)`
+return read-only pill strips (same pills as the editor, non-interactive). Pass
+`propertyActions` to make property pills right-click interactive (e.g. "Go to
+definition") while left-click still falls through to the host.
 - `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"));
@@ -470,6 +488,36 @@ 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;
+  const open = ctx.openMenu ?? ctx.openPopover;
+  pillEl.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    open(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");
@@ -581,7 +629,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");
@@ -595,7 +643,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();
       }));
     }
@@ -610,7 +658,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();
     }) } : {}
   }));
@@ -880,15 +928,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) {
@@ -897,7 +947,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) {
@@ -925,8 +975,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");
@@ -1079,6 +1129,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 } : {}
     };
@@ -1115,7 +1166,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;
@@ -1614,7 +1665,13 @@ function frozenCtx(src, o) {
     pickNode: () => {
     },
     // enables labelled node pills; never fires (preview is read-only)
-    ...o.nodeLabel ? { nodeLabel: o.nodeLabel } : {}
+    ...o.nodeLabel ? { nodeLabel: o.nodeLabel } : {},
+    ...o.propertyActions ? {
+      propertyActions: o.propertyActions,
+      openMenu: (anchor, render) => {
+        openPopover(anchor, render, { container: o.popoverContainer });
+      }
+    } : {}
   };
   return { ctx, ast: v.ast };
 }
@@ -1623,7 +1680,8 @@ function exprPills(src, o) {
   return ast ? renderNode(ast, [], ctx) : el("span", "exed-preview-raw", [src]);
 }
 function renderConditionPreview(src, o) {
-  return el("div", "exed-preview", [exprPills(src, o)]);
+  const cls = o.propertyActions ? "exed-preview exed-preview-interactive" : "exed-preview";
+  return el("div", cls, [exprPills(src, o)]);
 }
 function renderEffectsPreview(effects, o) {
   const wrap = el("div", "exed-preview exed-preview-effects");