@lostgradient/cinder 0.9.0 → 0.11.0

package/dist/components/invocation-rule-builder/index.js

@@ -74,6 +74,7 @@ var rest_excludes = new Set([
   "fieldOptions",
   "operatorOptions",
   "actionOptions",
+  "mode",
   "readonly",
   "addRuleLabel",
   "addConditionLabel",
@@ -91,22 +92,87 @@ var root_4 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No co
 var root_5 = $.from_html(`<div class="cinder-invocation-rule-builder__summary-row"> </div>`);
 var root_6 = $.from_html(`<div class="cinder-invocation-rule-builder__summary"><!></div>`);
 var root_7 = $.from_html(`<option> </option>`);
-var root_8 = $.from_html(`<div class="cinder-invocation-rule-builder__condition" role="listitem"><select class="cinder-invocation-rule-builder__condition-select"></select> <select class="cinder-invocation-rule-builder__condition-select"></select> <input type="text" class="cinder-invocation-rule-builder__condition-value" placeholder="Value to compare"/> <button type="button" class="cinder-invocation-rule-builder__icon-btn" data-irb-condition-remove=""><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" fill="none"></path></svg></button></div>`);
-var root_9 = $.from_html(`<div class="cinder-invocation-rule-builder__conditions" role="list"></div> <button type="button" class="cinder-invocation-rule-builder__add-btn" data-irb-add-condition=""> </button>`, 1);
-var root_10 = $.from_html(`<p class="cinder-invocation-rule-builder__validation" role="status">Add at least one action for this rule.</p>`);
-var root_11 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No actions configured.</p>`);
-var root_12 = $.from_html(`<div class="cinder-invocation-rule-builder__action" role="listitem"><select class="cinder-invocation-rule-builder__action-select"></select> <button type="button" class="cinder-invocation-rule-builder__icon-btn" data-irb-action-remove=""><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" fill="none"></path></svg></button></div>`);
-var root_13 = $.from_html(`<div class="cinder-invocation-rule-builder__actions" role="list"></div> <button type="button" class="cinder-invocation-rule-builder__add-btn" data-irb-add-action=""> </button>`, 1);
-var root_14 = $.from_html(`<div class="cinder-invocation-rule-builder__rule"><div class="cinder-invocation-rule-builder__rule-header"><!> <!></div> <div><span class="cinder-invocation-rule-builder__section-heading">Conditions</span> <!> <!></div> <div><span class="cinder-invocation-rule-builder__section-heading">Actions</span> <!> <!></div></div>`);
-var root_15 = $.from_html(`<button type="button" class="cinder-invocation-rule-builder__add-btn cinder-invocation-rule-builder__add-rule-btn" data-irb-add-rule=""> </button>`);
-var root_16 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No rules configured.</p>`);
-var root_17 = $.from_html(`<section><!> <!> <!></section> <div role="status" aria-live="polite" aria-atomic="true" class="cinder-invocation-rule-builder__announcer"> </div>`, 1);
+var root_8 = $.from_html(`<input type="number" class="cinder-invocation-rule-builder__condition-value" placeholder="Value to compare"/>`);
+var root_9 = $.from_html(`<input type="checkbox" class="cinder-invocation-rule-builder__condition-value-checkbox"/>`);
+var root_10 = $.from_html(`<select class="cinder-invocation-rule-builder__condition-select cinder-invocation-rule-builder__condition-value-select"></select>`);
+var root_11 = $.from_html(`<input type="text" class="cinder-invocation-rule-builder__condition-value" placeholder="Value to compare"/>`);
+var root_12 = $.from_html(`<div class="cinder-invocation-rule-builder__condition" role="listitem"><select class="cinder-invocation-rule-builder__condition-select"></select> <select class="cinder-invocation-rule-builder__condition-select"></select> <!> <button type="button" class="cinder-invocation-rule-builder__icon-btn" data-irb-condition-remove=""><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" fill="none"></path></svg></button></div>`);
+var root_13 = $.from_html(`<div class="cinder-invocation-rule-builder__conditions" role="list"></div> <button type="button" class="cinder-invocation-rule-builder__add-btn" data-irb-add-condition=""> </button>`, 1);
+var root_14 = $.from_html(`<p class="cinder-invocation-rule-builder__validation" role="status">Add at least one action for this rule.</p>`);
+var root_15 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No actions configured.</p>`);
+var root_16 = $.from_html(`<div class="cinder-invocation-rule-builder__action" role="listitem"><select class="cinder-invocation-rule-builder__action-select"></select> <button type="button" class="cinder-invocation-rule-builder__icon-btn" data-irb-action-remove=""><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" fill="none"></path></svg></button></div>`);
+var root_17 = $.from_html(`<div class="cinder-invocation-rule-builder__actions" role="list"></div> <button type="button" class="cinder-invocation-rule-builder__add-btn" data-irb-add-action=""> </button>`, 1);
+var root_18 = $.from_html(`<div><span class="cinder-invocation-rule-builder__section-heading">Actions</span> <!> <!></div>`);
+var root_19 = $.from_html(`<div class="cinder-invocation-rule-builder__rule"><div class="cinder-invocation-rule-builder__rule-header"><!> <!></div> <div><span class="cinder-invocation-rule-builder__section-heading">Conditions</span> <!> <!></div> <!></div>`);
+var root_20 = $.from_html(`<button type="button" class="cinder-invocation-rule-builder__add-btn cinder-invocation-rule-builder__add-rule-btn" data-irb-add-rule=""> </button>`);
+var root_21 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No rules configured.</p>`);
+var root_22 = $.from_html(`<section><!> <!> <!></section> <div role="status" aria-live="polite" aria-atomic="true" class="cinder-invocation-rule-builder__announcer"> </div>`, 1);
 function Invocation_rule_builder($$anchor, $$props) {
   const baseId = $.props_id();
   $.push($$props, true);
-  let readonly = $.prop($$props, "readonly", 3, false), addRuleLabel = $.prop($$props, "addRuleLabel", 3, "Add rule"), addConditionLabel = $.prop($$props, "addConditionLabel", 3, "Add condition"), addActionLabel = $.prop($$props, "addActionLabel", 3, "Add action"), rest = $.rest_props($$props, rest_excludes);
+  const CONDITIONS_ONLY_OPERATOR_OPTIONS = [
+    { value: "eq", label: "equals" },
+    { value: "gt", label: "greater than" },
+    { value: "lt", label: "less than" },
+    { value: "gte", label: "greater than or equal" },
+    { value: "lte", label: "less than or equal" }
+  ];
+  let mode = $.prop($$props, "mode", 3, "full"), readonly = $.prop($$props, "readonly", 3, false), addRuleLabel = $.prop($$props, "addRuleLabel", 3, "Add rule"), addConditionLabel = $.prop($$props, "addConditionLabel", 3, "Add condition"), addActionLabel = $.prop($$props, "addActionLabel", 3, "Add action"), rest = $.rest_props($$props, rest_excludes);
   const sectionAriaLabel = $.derived(() => $$props["aria-labelledby"] ? undefined : $$props["aria-label"] ?? $$props.label ?? "Invocation rules");
   const effectiveReadonly = $.derived(() => readonly() || $$props.onchange === undefined);
+  const conditionsOnly = $.derived(() => mode() === "conditions");
+  const resolvedOperatorOptions = $.derived(() => $.get(conditionsOnly) ? CONDITIONS_ONLY_OPERATOR_OPTIONS : $$props.operatorOptions ?? []);
+  const resolvedActionOptions = $.derived(() => $$props.actionOptions ?? []);
+  function fieldValueType(fieldValue) {
+    return $$props.fieldOptions.find((option) => option.value === fieldValue)?.type ?? "string";
+  }
+  function fieldEnumOptions(fieldValue) {
+    return $$props.fieldOptions.find((option) => option.value === fieldValue)?.options ?? [];
+  }
+  function defaultConditionValue(fieldValue) {
+    const type = fieldValueType(fieldValue);
+    switch (type) {
+      case "boolean":
+        return "false";
+      case "enum":
+        return fieldEnumOptions(fieldValue)[0]?.value ?? "";
+      case "number":
+      case "string":
+        return "";
+    }
+  }
+  const NUMBER_LIKE_VALUE_PATTERN = /^([+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d*)?|[+-]?\.?)$/i;
+  function isValueValidForFieldType(value, type, fieldValue) {
+    switch (type) {
+      case "boolean":
+        return value === "true" || value === "false";
+      case "enum":
+        return fieldEnumOptions(fieldValue).some((option) => option.value === value);
+      case "number":
+        return value === "" || value.trim() !== "" && NUMBER_LIKE_VALUE_PATTERN.test(value.trim());
+      case "string":
+        return true;
+    }
+  }
+  function isConditionsOnlyOperator(operator) {
+    return CONDITIONS_ONLY_OPERATOR_OPTIONS.some((option) => option.value === operator);
+  }
+  function displayOperator(operator) {
+    return $.get(conditionsOnly) && !isConditionsOnlyOperator(operator) ? "eq" : operator;
+  }
+  function emitChange(nextRules, change) {
+    const rulesToEmit = $.get(conditionsOnly) ? nextRules.map((rule) => ({
+      ...rule,
+      actions: [],
+      conditions: rule.conditions.map((condition) => {
+        const operator = isConditionsOnlyOperator(condition.operator) ? condition.operator : "eq";
+        const type = fieldValueType(condition.field);
+        const value = isValueValidForFieldType(condition.value, type, condition.field) ? condition.value : defaultConditionValue(condition.field);
+        return operator === condition.operator && value === condition.value ? condition : { ...condition, operator, value };
+      })
+    })) : nextRules;
+    $$props.onchange?.(rulesToEmit, change);
+  }
   let announcement = $.state("");
   let ruleLabelDrafts = $.state($.proxy({}));
   function announce(message) {
@@ -133,13 +199,13 @@ function Invocation_rule_builder($$anchor, $$props) {
       }
     ];
     const change = { type: "add-rule", ruleId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
     announce("Rule added.");
   }
   function handleRemoveRule(ruleId, ruleLabel, ruleIndex) {
     const nextRules = $$props.rules.filter((rule) => rule.id !== ruleId);
     const change = { type: "remove-rule", ruleId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
     announce(`${ruleLabel} removed.`);
     tick().then(() => {
       const targetIndex = ruleIndex > 0 ? ruleIndex - 1 : 0;
@@ -156,7 +222,7 @@ function Invocation_rule_builder($$anchor, $$props) {
     const [moved] = nextRules.splice(fromIndex, 1);
     nextRules.splice(toIndex, 0, moved);
     const change = { type: "move-rule", ruleId, fromIndex, toIndex };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
     announce(`${moved.label} moved to position ${toIndex + 1} of ${nextRules.length}.`);
   }
   function handleRenameRule(ruleId, label) {
@@ -168,7 +234,7 @@ function Invocation_rule_builder($$anchor, $$props) {
       return;
     const nextRules = updateRules(ruleId, (rule) => ({ ...rule, label: nextLabel }));
     const change = { type: "rename-rule", ruleId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
   }
   function ruleLabelDraft(rule) {
     const draft = $.get(ruleLabelDrafts)[rule.id];
@@ -177,7 +243,8 @@ function Invocation_rule_builder($$anchor, $$props) {
   function handleAddCondition(ruleId) {
     const conditionId = generateId();
     const firstField = $$props.fieldOptions[0]?.value ?? "";
-    const firstOperator = $$props.operatorOptions[0]?.value ?? "";
+    const firstOperator = $.get(resolvedOperatorOptions)[0]?.value ?? "";
+    const initialValue = $.get(conditionsOnly) ? defaultConditionValue(firstField) : "";
     const nextRules = updateRules(ruleId, (rule) => ({
       ...rule,
       conditions: [
@@ -186,12 +253,12 @@ function Invocation_rule_builder($$anchor, $$props) {
           id: conditionId,
           field: firstField,
           operator: firstOperator,
-          value: ""
+          value: initialValue
         }
       ]
     }));
     const change = { type: "add-condition", ruleId, conditionId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
     announce("Condition added.");
   }
   function handleRemoveCondition(ruleId, conditionId, conditionIndex, ruleIndex) {
@@ -200,7 +267,7 @@ function Invocation_rule_builder($$anchor, $$props) {
       conditions: rule.conditions.filter((condition) => condition.id !== conditionId)
     }));
     const change = { type: "remove-condition", ruleId, conditionId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
     announce("Condition removed.");
     tick().then(() => {
       const ruleEl = document.querySelector(`[data-irb-region="${baseId}"] [data-irb-rule="${ruleIndex}"]`);
@@ -213,20 +280,29 @@ function Invocation_rule_builder($$anchor, $$props) {
   function handleUpdateCondition(ruleId, conditionId, field, value) {
     const nextRules = updateRules(ruleId, (rule) => ({
       ...rule,
-      conditions: rule.conditions.map((condition) => condition.id === conditionId ? { ...condition, [field]: value } : condition)
+      conditions: rule.conditions.map((condition) => {
+        if (condition.id !== conditionId)
+          return condition;
+        if (field === "field" && $.get(conditionsOnly)) {
+          const nextType = fieldValueType(value);
+          const nextValue = isValueValidForFieldType(condition.value, nextType, value) ? condition.value : defaultConditionValue(value);
+          return { ...condition, field: value, value: nextValue };
+        }
+        return { ...condition, [field]: value };
+      })
     }));
     const change = { type: "update-condition", ruleId, conditionId, field };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
   }
   function handleAddAction(ruleId) {
     const actionId = generateId();
-    const firstTarget = $$props.actionOptions[0]?.value ?? "";
+    const firstTarget = $.get(resolvedActionOptions)[0]?.value ?? "";
     const nextRules = updateRules(ruleId, (rule) => ({
       ...rule,
       actions: [...rule.actions, { id: actionId, target: firstTarget }]
     }));
     const change = { type: "add-action", ruleId, actionId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
     announce("Action added.");
   }
   function handleRemoveAction(ruleId, actionId, actionIndex, ruleIndex) {
@@ -235,7 +311,7 @@ function Invocation_rule_builder($$anchor, $$props) {
       actions: rule.actions.filter((action) => action.id !== actionId)
     }));
     const change = { type: "remove-action", ruleId, actionId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
     announce("Action removed.");
     tick().then(() => {
       const ruleEl = document.querySelector(`[data-irb-region="${baseId}"] [data-irb-rule="${ruleIndex}"]`);
@@ -251,16 +327,17 @@ function Invocation_rule_builder($$anchor, $$props) {
       actions: rule.actions.map((action) => action.id === actionId ? { ...action, target } : action)
     }));
     const change = { type: "update-action", ruleId, actionId };
-    $$props.onchange?.(nextRules, change);
+    emitChange(nextRules, change);
   }
   function fieldLabel(value) {
     return $$props.fieldOptions.find((option) => option.value === value)?.label ?? value;
   }
   function operatorLabel(value) {
-    return $$props.operatorOptions.find((option) => option.value === value)?.label ?? value;
+    const displayValue = displayOperator(value);
+    return $.get(resolvedOperatorOptions).find((option) => option.value === displayValue)?.label ?? displayValue;
   }
   function actionTargetLabel(value) {
-    return $$props.actionOptions.find((option) => option.value === value)?.label ?? value;
+    return $.get(resolvedActionOptions).find((option) => option.value === value)?.label ?? value;
   }
   function conditionSummary(condition) {
     return `${fieldLabel(condition.field)} ${operatorLabel(condition.operator)} "${condition.value}"`;
@@ -268,7 +345,7 @@ function Invocation_rule_builder($$anchor, $$props) {
   function actionSummary(action) {
     return `Invoke ${actionTargetLabel(action.target)}`;
   }
-  var fragment = root_17();
+  var fragment = root_22();
   var section = $.first_child(fragment);
   $.attribute_effect(section, ($0) => ({
     ...rest,
@@ -281,7 +358,7 @@ function Invocation_rule_builder($$anchor, $$props) {
   ]);
   var node = $.child(section);
   $.each(node, 19, () => $$props.rules, (rule) => rule.id, ($$anchor2, rule, ruleIndex) => {
-    var div = root_14();
+    var div = root_19();
     var div_1 = $.child(div);
     var node_1 = $.child(div_1);
     {
@@ -393,11 +470,11 @@ function Invocation_rule_builder($$anchor, $$props) {
         $.template_effect(() => $.set_attribute(div_4, "aria-label", `Conditions for ${$.get(rule).label}`));
         $.append($$anchor3, div_4);
       };
-      var alternate_2 = ($$anchor3) => {
-        var fragment_2 = root_9();
+      var alternate_3 = ($$anchor3) => {
+        var fragment_2 = root_13();
         var div_6 = $.first_child(fragment_2);
         $.each(div_6, 23, () => $.get(rule).conditions, (condition) => condition.id, ($$anchor4, condition, conditionIndex) => {
-          var div_7 = root_8();
+          var div_7 = root_12();
           var select = $.child(div_7);
           $.each(select, 21, () => $$props.fieldOptions, (option) => option.value, ($$anchor5, option) => {
             var option_1 = root_7();
@@ -416,7 +493,7 @@ function Invocation_rule_builder($$anchor, $$props) {
           var select_value;
           $.init_select(select);
           var select_1 = $.sibling(select, 2);
-          $.each(select_1, 21, () => $$props.operatorOptions, (option) => option.value, ($$anchor5, option) => {
+          $.each(select_1, 21, () => $.get(resolvedOperatorOptions), (option) => option.value, ($$anchor5, option) => {
             var option_2 = root_7();
             var text_3 = $.child(option_2, true);
             $.reset(option_2);
@@ -432,37 +509,105 @@ function Invocation_rule_builder($$anchor, $$props) {
           $.reset(select_1);
           var select_1_value;
           $.init_select(select_1);
-          var input_1 = $.sibling(select_1, 2);
-          $.remove_input_defaults(input_1);
-          var button_3 = $.sibling(input_1, 2);
+          var node_7 = $.sibling(select_1, 2);
+          {
+            var consequent_5 = ($$anchor5) => {
+              var input_1 = root_8();
+              $.remove_input_defaults(input_1);
+              $.template_effect(() => {
+                $.set_attribute(input_1, "aria-label", `Value for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
+                $.set_value(input_1, $.get(condition).value);
+              });
+              $.delegated("input", input_1, (event2) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "value", event2.target.value));
+              $.append($$anchor5, input_1);
+            };
+            var d = $.derived(() => $.get(conditionsOnly) && fieldValueType($.get(condition).field) === "number");
+            var consequent_6 = ($$anchor5) => {
+              var input_2 = root_9();
+              $.remove_input_defaults(input_2);
+              $.template_effect(() => {
+                $.set_attribute(input_2, "aria-label", `Value for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
+                $.set_checked(input_2, $.get(condition).value === "true");
+              });
+              $.delegated("change", input_2, (event2) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "value", String(event2.target.checked)));
+              $.append($$anchor5, input_2);
+            };
+            var d_1 = $.derived(() => $.get(conditionsOnly) && fieldValueType($.get(condition).field) === "boolean");
+            var consequent_7 = ($$anchor5) => {
+              var select_2 = root_10();
+              $.each(select_2, 21, () => fieldEnumOptions($.get(condition).field), (option) => option.value, ($$anchor6, option) => {
+                var option_3 = root_7();
+                var text_4 = $.child(option_3, true);
+                $.reset(option_3);
+                var option_3_value = {};
+                $.template_effect(() => {
+                  $.set_text(text_4, $.get(option).label);
+                  if (option_3_value !== (option_3_value = $.get(option).value)) {
+                    option_3.value = (option_3.__value = $.get(option).value) ?? "";
+                  }
+                });
+                $.append($$anchor6, option_3);
+              });
+              $.reset(select_2);
+              var select_2_value;
+              $.init_select(select_2);
+              $.template_effect(() => {
+                $.set_attribute(select_2, "aria-label", `Value for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
+                if (select_2_value !== (select_2_value = $.get(condition).value)) {
+                  select_2.value = (select_2.__value = $.get(condition).value) ?? "", $.select_option(select_2, $.get(condition).value);
+                }
+              });
+              $.delegated("change", select_2, (event2) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "value", event2.target.value));
+              $.append($$anchor5, select_2);
+            };
+            var d_2 = $.derived(() => $.get(conditionsOnly) && fieldValueType($.get(condition).field) === "enum");
+            var alternate_2 = ($$anchor5) => {
+              var input_3 = root_11();
+              $.remove_input_defaults(input_3);
+              $.template_effect(() => {
+                $.set_attribute(input_3, "aria-label", `Value for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
+                $.set_value(input_3, $.get(condition).value);
+              });
+              $.delegated("input", input_3, (event2) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "value", event2.target.value));
+              $.append($$anchor5, input_3);
+            };
+            $.if(node_7, ($$render) => {
+              if ($.get(d))
+                $$render(consequent_5);
+              else if ($.get(d_1))
+                $$render(consequent_6, 1);
+              else if ($.get(d_2))
+                $$render(consequent_7, 2);
+              else
+                $$render(alternate_2, -1);
+            });
+          }
+          var button_3 = $.sibling(node_7, 2);
           $.reset(div_7);
-          $.template_effect(() => {
+          $.template_effect(($0) => {
             $.set_attribute(select, "aria-label", `Field for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
             if (select_value !== (select_value = $.get(condition).field)) {
               select.value = (select.__value = $.get(condition).field) ?? "", $.select_option(select, $.get(condition).field);
             }
             $.set_attribute(select_1, "aria-label", `Operator for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
-            if (select_1_value !== (select_1_value = $.get(condition).operator)) {
-              select_1.value = (select_1.__value = $.get(condition).operator) ?? "", $.select_option(select_1, $.get(condition).operator);
+            if (select_1_value !== (select_1_value = $0)) {
+              select_1.value = (select_1.__value = $0) ?? "", $.select_option(select_1, $0);
             }
-            $.set_attribute(input_1, "aria-label", `Value for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
-            $.set_value(input_1, $.get(condition).value);
             $.set_attribute(button_3, "aria-label", `Remove condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
-          });
+          }, [() => displayOperator($.get(condition).operator)]);
           $.delegated("change", select, (event2) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "field", event2.target.value));
           $.delegated("change", select_1, (event2) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "operator", event2.target.value));
-          $.delegated("input", input_1, (event2) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "value", event2.target.value));
           $.delegated("click", button_3, () => handleRemoveCondition($.get(rule).id, $.get(condition).id, $.get(conditionIndex), $.get(ruleIndex)));
           $.append($$anchor4, div_7);
         });
         $.reset(div_6);
         var button_4 = $.sibling(div_6, 2);
-        var text_4 = $.child(button_4);
+        var text_5 = $.child(button_4);
         $.reset(button_4);
         $.template_effect(() => {
           $.set_attribute(div_6, "aria-labelledby", `${baseId}-rule-${$.get(ruleIndex)}-conditions-label`);
           $.set_attribute(button_4, "aria-label", `${addConditionLabel()} to ${$.get(rule).label}`);
-          $.set_text(text_4, `+ ${addConditionLabel() ?? ""}`);
+          $.set_text(text_5, `+ ${addConditionLabel() ?? ""}`);
         });
         $.delegated("click", button_4, () => handleAddCondition($.get(rule).id));
         $.append($$anchor3, fragment_2);
@@ -471,150 +616,160 @@ function Invocation_rule_builder($$anchor, $$props) {
         if ($.get(effectiveReadonly))
           $$render(consequent_4);
         else
-          $$render(alternate_2, -1);
+          $$render(alternate_3, -1);
       });
     }
     $.reset(div_3);
-    var div_8 = $.sibling(div_3, 2);
-    var span_1 = $.child(div_8);
-    var node_7 = $.sibling(span_1, 2);
+    var node_8 = $.sibling(div_3, 2);
     {
-      var consequent_5 = ($$anchor3) => {
-        var p_2 = root_10();
-        $.append($$anchor3, p_2);
-      };
-      $.if(node_7, ($$render) => {
-        if (!$.get(effectiveReadonly) && $.get(rule).actions.length === 0)
-          $$render(consequent_5);
-      });
-    }
-    var node_8 = $.sibling(node_7, 2);
-    {
-      var consequent_7 = ($$anchor3) => {
-        var div_9 = root_6();
-        var node_9 = $.child(div_9);
+      var consequent_11 = ($$anchor3) => {
+        var div_8 = root_18();
+        var span_1 = $.child(div_8);
+        var node_9 = $.sibling(span_1, 2);
         {
-          var consequent_6 = ($$anchor4) => {
-            var p_3 = root_11();
-            $.append($$anchor4, p_3);
-          };
-          var alternate_3 = ($$anchor4) => {
-            var fragment_3 = $.comment();
-            var node_10 = $.first_child(fragment_3);
-            $.each(node_10, 17, () => $.get(rule).actions, (action) => action.id, ($$anchor5, action) => {
-              var div_10 = root_5();
-              var text_5 = $.child(div_10, true);
-              $.reset(div_10);
-              $.template_effect(($0) => $.set_text(text_5, $0), [() => actionSummary($.get(action))]);
-              $.append($$anchor5, div_10);
-            });
-            $.append($$anchor4, fragment_3);
+          var consequent_8 = ($$anchor4) => {
+            var p_2 = root_14();
+            $.append($$anchor4, p_2);
           };
           $.if(node_9, ($$render) => {
-            if ($.get(rule).actions.length === 0)
-              $$render(consequent_6);
-            else
-              $$render(alternate_3, -1);
+            if (!$.get(effectiveReadonly) && $.get(rule).actions.length === 0)
+              $$render(consequent_8);
           });
         }
-        $.reset(div_9);
-        $.template_effect(() => $.set_attribute(div_9, "aria-label", `Actions for ${$.get(rule).label}`));
-        $.append($$anchor3, div_9);
-      };
-      var alternate_4 = ($$anchor3) => {
-        var fragment_4 = root_13();
-        var div_11 = $.first_child(fragment_4);
-        $.each(div_11, 23, () => $.get(rule).actions, (action) => action.id, ($$anchor4, action, actionIndex) => {
-          var div_12 = root_12();
-          var select_2 = $.child(div_12);
-          $.each(select_2, 21, () => $$props.actionOptions, (option) => option.value, ($$anchor5, option) => {
-            var option_3 = root_7();
-            var text_6 = $.child(option_3, true);
-            $.reset(option_3);
-            var option_3_value = {};
+        var node_10 = $.sibling(node_9, 2);
+        {
+          var consequent_10 = ($$anchor4) => {
+            var div_9 = root_6();
+            var node_11 = $.child(div_9);
+            {
+              var consequent_9 = ($$anchor5) => {
+                var p_3 = root_15();
+                $.append($$anchor5, p_3);
+              };
+              var alternate_4 = ($$anchor5) => {
+                var fragment_3 = $.comment();
+                var node_12 = $.first_child(fragment_3);
+                $.each(node_12, 17, () => $.get(rule).actions, (action) => action.id, ($$anchor6, action) => {
+                  var div_10 = root_5();
+                  var text_6 = $.child(div_10, true);
+                  $.reset(div_10);
+                  $.template_effect(($0) => $.set_text(text_6, $0), [() => actionSummary($.get(action))]);
+                  $.append($$anchor6, div_10);
+                });
+                $.append($$anchor5, fragment_3);
+              };
+              $.if(node_11, ($$render) => {
+                if ($.get(rule).actions.length === 0)
+                  $$render(consequent_9);
+                else
+                  $$render(alternate_4, -1);
+              });
+            }
+            $.reset(div_9);
+            $.template_effect(() => $.set_attribute(div_9, "aria-label", `Actions for ${$.get(rule).label}`));
+            $.append($$anchor4, div_9);
+          };
+          var alternate_5 = ($$anchor4) => {
+            var fragment_4 = root_17();
+            var div_11 = $.first_child(fragment_4);
+            $.each(div_11, 23, () => $.get(rule).actions, (action) => action.id, ($$anchor5, action, actionIndex) => {
+              var div_12 = root_16();
+              var select_3 = $.child(div_12);
+              $.each(select_3, 21, () => $.get(resolvedActionOptions), (option) => option.value, ($$anchor6, option) => {
+                var option_4 = root_7();
+                var text_7 = $.child(option_4, true);
+                $.reset(option_4);
+                var option_4_value = {};
+                $.template_effect(() => {
+                  $.set_text(text_7, $.get(option).label);
+                  if (option_4_value !== (option_4_value = $.get(option).value)) {
+                    option_4.value = (option_4.__value = $.get(option).value) ?? "";
+                  }
+                });
+                $.append($$anchor6, option_4);
+              });
+              $.reset(select_3);
+              var select_3_value;
+              $.init_select(select_3);
+              var button_5 = $.sibling(select_3, 2);
+              $.reset(div_12);
+              $.template_effect(() => {
+                $.set_attribute(select_3, "aria-label", `Action ${$.get(actionIndex) + 1} target for ${$.get(rule).label}`);
+                if (select_3_value !== (select_3_value = $.get(action).target)) {
+                  select_3.value = (select_3.__value = $.get(action).target) ?? "", $.select_option(select_3, $.get(action).target);
+                }
+                $.set_attribute(button_5, "aria-label", `Remove action ${$.get(actionIndex) + 1} of ${$.get(rule).label}`);
+              });
+              $.delegated("change", select_3, (event2) => handleUpdateAction($.get(rule).id, $.get(action).id, event2.target.value));
+              $.delegated("click", button_5, () => handleRemoveAction($.get(rule).id, $.get(action).id, $.get(actionIndex), $.get(ruleIndex)));
+              $.append($$anchor5, div_12);
+            });
+            $.reset(div_11);
+            var button_6 = $.sibling(div_11, 2);
+            var text_8 = $.child(button_6);
+            $.reset(button_6);
             $.template_effect(() => {
-              $.set_text(text_6, $.get(option).label);
-              if (option_3_value !== (option_3_value = $.get(option).value)) {
-                option_3.value = (option_3.__value = $.get(option).value) ?? "";
-              }
+              $.set_attribute(div_11, "aria-labelledby", `${baseId}-rule-${$.get(ruleIndex)}-actions-label`);
+              $.set_attribute(button_6, "aria-label", `${addActionLabel()} to ${$.get(rule).label}`);
+              $.set_text(text_8, `+ ${addActionLabel() ?? ""}`);
             });
-            $.append($$anchor5, option_3);
-          });
-          $.reset(select_2);
-          var select_2_value;
-          $.init_select(select_2);
-          var button_5 = $.sibling(select_2, 2);
-          $.reset(div_12);
-          $.template_effect(() => {
-            $.set_attribute(select_2, "aria-label", `Action ${$.get(actionIndex) + 1} target for ${$.get(rule).label}`);
-            if (select_2_value !== (select_2_value = $.get(action).target)) {
-              select_2.value = (select_2.__value = $.get(action).target) ?? "", $.select_option(select_2, $.get(action).target);
-            }
-            $.set_attribute(button_5, "aria-label", `Remove action ${$.get(actionIndex) + 1} of ${$.get(rule).label}`);
+            $.delegated("click", button_6, () => handleAddAction($.get(rule).id));
+            $.append($$anchor4, fragment_4);
+          };
+          $.if(node_10, ($$render) => {
+            if ($.get(effectiveReadonly))
+              $$render(consequent_10);
+            else
+              $$render(alternate_5, -1);
           });
-          $.delegated("change", select_2, (event2) => handleUpdateAction($.get(rule).id, $.get(action).id, event2.target.value));
-          $.delegated("click", button_5, () => handleRemoveAction($.get(rule).id, $.get(action).id, $.get(actionIndex), $.get(ruleIndex)));
-          $.append($$anchor4, div_12);
-        });
-        $.reset(div_11);
-        var button_6 = $.sibling(div_11, 2);
-        var text_7 = $.child(button_6);
-        $.reset(button_6);
-        $.template_effect(() => {
-          $.set_attribute(div_11, "aria-labelledby", `${baseId}-rule-${$.get(ruleIndex)}-actions-label`);
-          $.set_attribute(button_6, "aria-label", `${addActionLabel()} to ${$.get(rule).label}`);
-          $.set_text(text_7, `+ ${addActionLabel() ?? ""}`);
-        });
-        $.delegated("click", button_6, () => handleAddAction($.get(rule).id));
-        $.append($$anchor3, fragment_4);
+        }
+        $.reset(div_8);
+        $.template_effect(() => $.set_attribute(span_1, "id", `${baseId}-rule-${$.get(ruleIndex)}-actions-label`));
+        $.append($$anchor3, div_8);
       };
       $.if(node_8, ($$render) => {
-        if ($.get(effectiveReadonly))
-          $$render(consequent_7);
-        else
-          $$render(alternate_4, -1);
+        if (mode() === "full")
+          $$render(consequent_11);
       });
     }
-    $.reset(div_8);
     $.reset(div);
     $.template_effect(() => {
       $.set_attribute(div, "data-irb-rule", $.get(ruleIndex));
       $.set_attribute(span, "id", `${baseId}-rule-${$.get(ruleIndex)}-conditions-label`);
-      $.set_attribute(span_1, "id", `${baseId}-rule-${$.get(ruleIndex)}-actions-label`);
     });
     $.append($$anchor2, div);
   });
-  var node_11 = $.sibling(node, 2);
+  var node_13 = $.sibling(node, 2);
   {
-    var consequent_8 = ($$anchor2) => {
-      var button_7 = root_15();
-      var text_8 = $.child(button_7);
+    var consequent_12 = ($$anchor2) => {
+      var button_7 = root_20();
+      var text_9 = $.child(button_7);
       $.reset(button_7);
-      $.template_effect(() => $.set_text(text_8, `+ ${addRuleLabel() ?? ""}`));
+      $.template_effect(() => $.set_text(text_9, `+ ${addRuleLabel() ?? ""}`));
       $.delegated("click", button_7, handleAddRule);
       $.append($$anchor2, button_7);
     };
-    $.if(node_11, ($$render) => {
+    $.if(node_13, ($$render) => {
       if (!$.get(effectiveReadonly))
-        $$render(consequent_8);
+        $$render(consequent_12);
     });
   }
-  var node_12 = $.sibling(node_11, 2);
+  var node_14 = $.sibling(node_13, 2);
   {
-    var consequent_9 = ($$anchor2) => {
-      var p_4 = root_16();
+    var consequent_13 = ($$anchor2) => {
+      var p_4 = root_21();
       $.append($$anchor2, p_4);
     };
-    $.if(node_12, ($$render) => {
+    $.if(node_14, ($$render) => {
       if ($$props.rules.length === 0 && $.get(effectiveReadonly))
-        $$render(consequent_9);
+        $$render(consequent_13);
     });
   }
   $.reset(section);
   var div_13 = $.sibling(section, 2);
-  var text_9 = $.child(div_13, true);
+  var text_10 = $.child(div_13, true);
   $.reset(div_13);
-  $.template_effect(() => $.set_text(text_9, $.get(announcement)));
+  $.template_effect(() => $.set_text(text_10, $.get(announcement)));
   $.append($$anchor, fragment);
   $.pop();
 }
@@ -627,4 +782,4 @@ export {
   Invocation_rule_builder as InvocationRuleBuilder
 };
 
-//# debugId=17DF876A74AC7E1B64756E2164756E21
+//# debugId=68559E88502D32A764756E2164756E21