@wildwinter/expr-editor 0.7.0 → 0.9.0

package/dist/index.d.cts

@@ -214,6 +214,10 @@ interface EditCtx {
     apply(next: ExprNode | null): void;
     /** Open a popover anchored to `anchor`; `render(close)` builds the content. */
     openPopover(anchor: HTMLElement, render: (close: () => void) => Node): void;
+    /** Opener for the property right-click menu; falls back to openPopover. The
+     *  read-only preview sets this (a real popover) while leaving openPopover a
+     *  no-op, so property pills get their menu but left-click editing stays inert. */
+    openMenu?(anchor: HTMLElement, render: (close: () => void) => Node): void;
     /** Host-provided picker for a flow-node reference arg (e.g. `seen(...)` / `visits(...)`). When set,
      *  the node-ref arg renders as a pill that opens this instead of a free-text field; `onPick` receives
      *  the chosen node id. Absent in dialects / hosts that have no node catalogue. */
@@ -232,6 +236,16 @@ interface EditCtx {
      *  (an enum-typed outcome target). Lets the string editor show an enum picker
      *  even without a comparison peer. No effect on non-root literals. */
     valueEnumValues?: string[];
+    /** Host actions for a property pill (e.g. "Go to definition"). When set,
+     *  right-clicking a property pill opens a menu of these actions. The host
+     *  resolves what each does (navigation etc.); empty array = no menu. */
+    propertyActions?(ref: {
+        scope: string;
+        name: string;
+    }): Array<{
+        label: string;
+        run: () => void;
+    }>;
 }
 
 interface ExpressionEditorOptions {
@@ -286,6 +300,18 @@ interface ExpressionEditorOptions {
         target: string;
         flags: string[];
     };
+    /** Placeholder for the raw-text textarea (defaults to a generic example).
+     *  Value cells pass a value-flavoured hint (e.g. "autumn or @count + 1"). */
+    rawPlaceholder?: string;
+    /** Host actions for a property pill, shown on right-click (e.g. go to
+     *  definition). Receives the property ref; returns the menu items. */
+    propertyActions?(ref: {
+        scope: string;
+        name: string;
+    }): Array<{
+        label: string;
+        run: () => void;
+    }>;
     /** Emitted on every edit (name-form; "" when cleared). */
     onChange: (src: string) => void;
     /** Notified when the author starts (true) / stops (false) editing inside a popover
@@ -361,6 +387,18 @@ interface PreviewOptions {
     scopeOrder?: string[];
     /** Resolve a node id to a readable label for seen()/visits() node pills. */
     nodeLabel?: (id: string) => string;
+    /** Host actions for a property pill (e.g. "Go to definition"). When set, the
+     *  preview becomes right-click interactive on property pills (left-click still
+     *  falls through to the host); otherwise the preview is fully non-interactive. */
+    propertyActions?(ref: {
+        scope: string;
+        name: string;
+    }): Array<{
+        label: string;
+        run: () => void;
+    }>;
+    /** Where the property menu mounts (default document.body). */
+    popoverContainer?: HTMLElement;
 }
 /** Read-only pill strip for a condition (name-form). Empty/unparseable is the caller's concern; a
  *  non-empty unparseable string falls back to its raw text. */

package/dist/index.d.ts

@@ -214,6 +214,10 @@ interface EditCtx {
     apply(next: ExprNode | null): void;
     /** Open a popover anchored to `anchor`; `render(close)` builds the content. */
     openPopover(anchor: HTMLElement, render: (close: () => void) => Node): void;
+    /** Opener for the property right-click menu; falls back to openPopover. The
+     *  read-only preview sets this (a real popover) while leaving openPopover a
+     *  no-op, so property pills get their menu but left-click editing stays inert. */
+    openMenu?(anchor: HTMLElement, render: (close: () => void) => Node): void;
     /** Host-provided picker for a flow-node reference arg (e.g. `seen(...)` / `visits(...)`). When set,
      *  the node-ref arg renders as a pill that opens this instead of a free-text field; `onPick` receives
      *  the chosen node id. Absent in dialects / hosts that have no node catalogue. */
@@ -232,6 +236,16 @@ interface EditCtx {
      *  (an enum-typed outcome target). Lets the string editor show an enum picker
      *  even without a comparison peer. No effect on non-root literals. */
     valueEnumValues?: string[];
+    /** Host actions for a property pill (e.g. "Go to definition"). When set,
+     *  right-clicking a property pill opens a menu of these actions. The host
+     *  resolves what each does (navigation etc.); empty array = no menu. */
+    propertyActions?(ref: {
+        scope: string;
+        name: string;
+    }): Array<{
+        label: string;
+        run: () => void;
+    }>;
 }
 
 interface ExpressionEditorOptions {
@@ -286,6 +300,18 @@ interface ExpressionEditorOptions {
         target: string;
         flags: string[];
     };
+    /** Placeholder for the raw-text textarea (defaults to a generic example).
+     *  Value cells pass a value-flavoured hint (e.g. "autumn or @count + 1"). */
+    rawPlaceholder?: string;
+    /** Host actions for a property pill, shown on right-click (e.g. go to
+     *  definition). Receives the property ref; returns the menu items. */
+    propertyActions?(ref: {
+        scope: string;
+        name: string;
+    }): Array<{
+        label: string;
+        run: () => void;
+    }>;
     /** Emitted on every edit (name-form; "" when cleared). */
     onChange: (src: string) => void;
     /** Notified when the author starts (true) / stops (false) editing inside a popover
@@ -361,6 +387,18 @@ interface PreviewOptions {
     scopeOrder?: string[];
     /** Resolve a node id to a readable label for seen()/visits() node pills. */
     nodeLabel?: (id: string) => string;
+    /** Host actions for a property pill (e.g. "Go to definition"). When set, the
+     *  preview becomes right-click interactive on property pills (left-click still
+     *  falls through to the host); otherwise the preview is fully non-interactive. */
+    propertyActions?(ref: {
+        scope: string;
+        name: string;
+    }): Array<{
+        label: string;
+        run: () => void;
+    }>;
+    /** Where the property menu mounts (default document.body). */
+    popoverContainer?: HTMLElement;
 }
 /** Read-only pill strip for a condition (name-form). Empty/unparseable is the caller's concern; a
  *  non-empty unparseable string falls back to its raw text. */

package/dist/index.js

@@ -303,10 +303,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;
 }
@@ -387,10 +388,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;
@@ -418,7 +434,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 });
@@ -435,7 +453,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;
     }
@@ -447,7 +465,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"));
@@ -468,6 +486,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");
@@ -579,7 +627,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");
@@ -593,7 +641,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();
       }));
     }
@@ -608,7 +656,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();
     }) } : {}
   }));
@@ -878,15 +926,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) {
@@ -895,7 +945,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) {
@@ -923,8 +973,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");
@@ -1077,6 +1127,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 } : {}
     };
@@ -1113,7 +1164,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;
@@ -1612,7 +1663,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 };
 }
@@ -1621,7 +1678,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");