@wildwinter/expr-editor 0.2.0 → 0.4.0

package/dist/index.d.cts

@@ -224,6 +224,14 @@ interface EditCtx {
      *  next render — used by insert-then-refine templates so the author lands
      *  straight in the first unfilled slot instead of chasing the error ring. */
     requestFocus?(path: AstPath): void;
+    /** When true, a delete that would empty the whole expression is blocked (the
+     *  Delete affordance is withheld). Used by single-value fields that must
+     *  always hold at least one term; conditions leave it false (empty = always). */
+    requireNonEmpty?: boolean;
+    /** Enum values offered when editing the single root literal of a value field
+     *  (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[];
 }
 
 interface ExpressionEditorOptions {
@@ -254,6 +262,20 @@ interface ExpressionEditorOptions {
     /** Render the editor's own validation message list under the pills (default true).
      *  Hosts that display their own validation messages pass false to avoid doubling up. */
     messages?: boolean;
+    /** Where to append the popover micro-editors (default document.body). Pass a
+     *  container inside a focus-trapping dialog (Radix, etc.) so opening a pill's
+     *  popover does not dismiss the surrounding dialog. */
+    popoverContainer?: HTMLElement;
+    /** Block a delete that would empty the whole expression (single-value fields
+     *  that must always hold a term). Conditions leave this off (empty = always). */
+    requireNonEmpty?: boolean;
+    /** Enum values for the single root literal of a value field (an enum-typed
+     *  target): the literal editor then offers them as a picker. Flat mode only. */
+    valueEnumValues?: string[];
+    /** Flat single-value field: an empty value renders one editable "set a value…"
+     *  placeholder pill (a root string literal) rather than the condition
+     *  clause-menu empty state. Pairs with mode:"flat". */
+    valueField?: boolean;
     /** Emitted on every edit (name-form; "" when cleared). */
     onChange: (src: string) => void;
     /** Notified when the author starts (true) / stops (false) editing inside a popover
@@ -296,6 +318,10 @@ interface EffectsEditorOptions {
     allowEmit?: boolean;
     /** Start each inline value editor in raw-text mode (host's global "show as text" toggle drives this). */
     text?: boolean;
+    /** Where to append popover micro-editors (default document.body). Pass a container
+     *  inside a focus-trapping dialog so popovers do not dismiss it. Threaded to the
+     *  target/event pickers here and to every inline value editor. */
+    popoverContainer?: HTMLElement;
     /** Emitted on every structural / value edit with the whole new list. */
     onChange: (effects: EditorEffect[]) => void;
 }

package/dist/index.d.ts

@@ -224,6 +224,14 @@ interface EditCtx {
      *  next render — used by insert-then-refine templates so the author lands
      *  straight in the first unfilled slot instead of chasing the error ring. */
     requestFocus?(path: AstPath): void;
+    /** When true, a delete that would empty the whole expression is blocked (the
+     *  Delete affordance is withheld). Used by single-value fields that must
+     *  always hold at least one term; conditions leave it false (empty = always). */
+    requireNonEmpty?: boolean;
+    /** Enum values offered when editing the single root literal of a value field
+     *  (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[];
 }
 
 interface ExpressionEditorOptions {
@@ -254,6 +262,20 @@ interface ExpressionEditorOptions {
     /** Render the editor's own validation message list under the pills (default true).
      *  Hosts that display their own validation messages pass false to avoid doubling up. */
     messages?: boolean;
+    /** Where to append the popover micro-editors (default document.body). Pass a
+     *  container inside a focus-trapping dialog (Radix, etc.) so opening a pill's
+     *  popover does not dismiss the surrounding dialog. */
+    popoverContainer?: HTMLElement;
+    /** Block a delete that would empty the whole expression (single-value fields
+     *  that must always hold a term). Conditions leave this off (empty = always). */
+    requireNonEmpty?: boolean;
+    /** Enum values for the single root literal of a value field (an enum-typed
+     *  target): the literal editor then offers them as a picker. Flat mode only. */
+    valueEnumValues?: string[];
+    /** Flat single-value field: an empty value renders one editable "set a value…"
+     *  placeholder pill (a root string literal) rather than the condition
+     *  clause-menu empty state. Pairs with mode:"flat". */
+    valueField?: boolean;
     /** Emitted on every edit (name-form; "" when cleared). */
     onChange: (src: string) => void;
     /** Notified when the author starts (true) / stops (false) editing inside a popover
@@ -296,6 +318,10 @@ interface EffectsEditorOptions {
     allowEmit?: boolean;
     /** Start each inline value editor in raw-text mode (host's global "show as text" toggle drives this). */
     text?: boolean;
+    /** Where to append popover micro-editors (default document.body). Pass a container
+     *  inside a focus-trapping dialog so popovers do not dismiss it. Threaded to the
+     *  target/event pickers here and to every inline value editor. */
+    popoverContainer?: HTMLElement;
     /** Emitted on every structural / value edit with the whole new list. */
     onChange: (effects: EditorEffect[]) => void;
 }

package/dist/index.js

@@ -310,7 +310,8 @@ function button(cls, label, onClick, title) {
   b.addEventListener("click", onClick);
   return b;
 }
-function openPopover(anchor, render, onClose) {
+function openPopover(anchor, render, opts = {}) {
+  const container = opts.container ?? document.body;
   const pop = el("div", "exed-pop");
   let closed = false;
   const close = () => {
@@ -319,7 +320,7 @@ function openPopover(anchor, render, onClose) {
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
     pop.remove();
-    onClose?.();
+    opts.onClose?.();
   };
   const onDown = (e) => {
     const t = e.target;
@@ -332,15 +333,21 @@ function openPopover(anchor, render, onClose) {
     }
   };
   pop.append(render(close));
-  document.body.append(pop);
+  container.append(pop);
   const a = anchor.getBoundingClientRect();
   const ph = pop.getBoundingClientRect();
   let top = a.bottom + 4;
   if (top + ph.height > window.innerHeight - 8 && a.top - ph.height - 4 > 8) top = a.top - ph.height - 4;
   let left = a.left;
   if (left + ph.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - 8 - ph.width);
-  pop.style.top = `${Math.round(top + window.scrollY)}px`;
-  pop.style.left = `${Math.round(left + window.scrollX)}px`;
+  if (container === document.body) {
+    pop.style.top = `${Math.round(top + window.scrollY)}px`;
+    pop.style.left = `${Math.round(left + window.scrollX)}px`;
+  } else {
+    const cr = container.getBoundingClientRect();
+    pop.style.top = `${Math.round(top - cr.top + container.scrollTop)}px`;
+    pop.style.left = `${Math.round(left - cr.left + container.scrollLeft)}px`;
+  }
   setTimeout(() => {
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
@@ -481,11 +488,14 @@ function numberEditor(ctx, path, value, anchor) {
 function stringEditor(ctx, path, node, anchor) {
   const peer = findEnumPeer(ctx.getAst(), path);
   const enumEntry = peer ? lookup(ctx.catalogue, peer.scope, peer.name) : null;
+  const rootValueEnums = path.length === 0 && ctx.valueEnumValues?.length ? ctx.valueEnumValues : null;
+  const enumValues = enumEntry?.enumValues?.length ? enumEntry.enumValues : rootValueEnums;
+  const enumHeadLabel = enumEntry ? `${displayName(enumEntry, ctx.defaultScope)} value` : "Value";
   ctx.openPopover(anchor, (close) => {
-    if (enumEntry?.enumValues?.length) {
+    if (enumValues?.length) {
       const wrap = el("div", "exed-menu");
-      wrap.append(el("div", "exed-menu-head", [`${displayName(enumEntry, ctx.defaultScope)} value`]));
-      for (const v of enumEntry.enumValues) {
+      wrap.append(el("div", "exed-menu-head", [enumHeadLabel]));
+      for (const v of enumValues) {
         wrap.append(button(`exed-opt${v === node.value ? " sel" : ""}`, v, () => {
           replace(ctx, path, strLit(v));
           close();
@@ -557,6 +567,7 @@ function flagEditor(ctx, path, node, anchor) {
     return wrap;
   });
 }
+var canDelete = (ctx, path) => !(ctx.requireNonEmpty && path.length === 0);
 function callEditor(ctx, path, node, anchor) {
   ctx.openPopover(anchor, (close) => {
     const wrap = el("div", "exed-menu");
@@ -568,10 +579,12 @@ function callEditor(ctx, path, node, anchor) {
         close();
       }));
     }
-    wrap.append(button("exed-opt danger", "Delete", () => {
-      ctx.apply(deleteAt(ctx.getAst(), path));
-      close();
-    }));
+    if (canDelete(ctx, path)) {
+      wrap.append(button("exed-opt danger", "Delete", () => {
+        ctx.apply(deleteAt(ctx.getAst(), path));
+        close();
+      }));
+    }
     return wrap;
   });
 }
@@ -582,10 +595,10 @@ function variableEditor(ctx, path, node, anchor) {
       replace(ctx, path, scopedVar(entry.scope, entry.name));
       close();
     },
-    footer: button("exed-opt danger", "Delete", () => {
+    ...canDelete(ctx, path) ? { footer: button("exed-opt danger", "Delete", () => {
       ctx.apply(deleteAt(ctx.getAst(), path));
       close();
-    })
+    }) } : {}
   }));
 }
 function propertyPicker(ctx, opts) {
@@ -1037,9 +1050,12 @@ function mountExpressionEditor(host, opts) {
       apply: (next) => emit(toSrc(next)),
       openPopover: (anchor, r) => {
         closePopover();
-        const pop = openPopover(anchor, r, () => {
-          if (activePopover === pop) activePopover = null;
-          setEditing(false);
+        const pop = openPopover(anchor, r, {
+          container: opts.popoverContainer,
+          onClose: () => {
+            if (activePopover === pop) activePopover = null;
+            setEditing(false);
+          }
         });
         activePopover = pop;
         setEditing(true);
@@ -1047,6 +1063,8 @@ function mountExpressionEditor(host, opts) {
       requestFocus: (p) => {
         pendingFocus = p;
       },
+      ...opts.requireNonEmpty ? { requireNonEmpty: true } : {},
+      ...opts.valueEnumValues ? { valueEnumValues: opts.valueEnumValues } : {},
       ...opts.pickNode ? { pickNode: opts.pickNode } : {},
       ...opts.nodeLabel ? { nodeLabel: opts.nodeLabel } : {}
     };
@@ -1058,7 +1076,7 @@ function mountExpressionEditor(host, opts) {
     if (raw || v.unparseable) {
       host.append(rawArea());
     } else if (!src.trim() || !v.ast) {
-      host.append(emptyState());
+      host.append(opts.valueField ? valueEmptyState() : emptyState());
     } else {
       const ctx = buildCtx(v.ast);
       const body = el("div", "exed-body");
@@ -1102,6 +1120,10 @@ function mountExpressionEditor(host, opts) {
     }));
     return wrap;
   }
+  function valueEmptyState() {
+    const ctx = buildCtx(strLit(""));
+    return el("div", "exed-flat", [renderNode(strLit(""), [], ctx)]);
+  }
   function addTermControl(ctx) {
     const boolean = opts.addTerm === "boolean";
     const ops = boolean ? ["and", "or"] : ARITHMETIC_OPS;
@@ -1331,7 +1353,7 @@ function mountEffectsEditor(host, opts) {
         close();
       },
       onCancel: close
-    }));
+    }), { container: opts.popoverContainer });
   };
   const targetType = (target) => opts.catalogue.find((e) => refOf(e, defaultScope) === target)?.type;
   const valueDisplay = (value, onChange, type) => {
@@ -1346,6 +1368,7 @@ function mountEffectsEditor(host, opts) {
       functions: opts.functions,
       mode: "flat",
       ...addTerm ? { addTerm } : {},
+      ...opts.popoverContainer ? { popoverContainer: opts.popoverContainer } : {},
       text: textMode,
       onChange
     }));
@@ -1385,7 +1408,7 @@ function mountEffectsEditor(host, opts) {
       wrap.append(search, list);
       setTimeout(() => search.focus(), 0);
       return wrap;
-    });
+    }, { container: opts.popoverContainer });
   };
   const iconBtn = (glyph, title, onClick, danger = false) => button(`exed-eff-icon${danger ? " danger" : ""}`, glyph, onClick, title);
   function setRow(eff, i) {
@@ -1458,7 +1481,7 @@ function mountEffectsEditor(host, opts) {
       wrap.append(button("exed-btn primary", "Apply", apply));
       setTimeout(() => input.focus(), 0);
       return wrap;
-    });
+    }, { container: opts.popoverContainer });
   };
   const rowActions2 = (i) => {
     const acts = el("div", "exed-effect-acts");