@lostgradient/cinder 0.3.0 → 0.4.1

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

@@ -35,23 +35,27 @@ function classNames(...parts) {
 }
 
 // src/components/invocation-rule-builder/invocation-rule-builder.svelte
-var root_2 = $.from_html(`<div class="cinder-invocation-rule-builder__rule-controls"><button type="button" class="cinder-invocation-rule-builder__icon-btn"><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M8 3l5 6H3z"></path></svg></button> <button type="button" class="cinder-invocation-rule-builder__icon-btn"><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M8 13l-5-6h10z"></path></svg></button> <button type="button" class="cinder-invocation-rule-builder__icon-btn" data-irb-rule-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_4 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No conditions — rule always fires.</p>`);
-var root_6 = $.from_html(`<div class="cinder-invocation-rule-builder__summary-row"> </div>`);
-var root_3 = $.from_html(`<div class="cinder-invocation-rule-builder__summary"><!></div>`);
-var root_9 = $.from_html(`<option> </option>`);
-var root_10 = $.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"/> <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_7 = $.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_12 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No actions configured.</p>`);
-var root_14 = $.from_html(`<div class="cinder-invocation-rule-builder__summary-row"> </div>`);
-var root_11 = $.from_html(`<div class="cinder-invocation-rule-builder__summary"><!></div>`);
-var root_17 = $.from_html(`<option> </option>`);
-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_15 = $.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_1 = $.from_html(`<div class="cinder-invocation-rule-builder__rule"><div class="cinder-invocation-rule-builder__rule-header"><span class="cinder-invocation-rule-builder__rule-label"> </span> <!></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_18 = $.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_19 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No rules configured.</p>`);
+var root_2 = $.from_html(`<h3 class="cinder-invocation-rule-builder__rule-label"> </h3>`);
+var root_3 = $.from_html(`<label class="cinder-invocation-rule-builder__rule-label-field"><span class="cinder-sr-only">Rule name</span> <input class="cinder-invocation-rule-builder__rule-label-input"/></label>`);
+var root_4 = $.from_html(`<div class="cinder-invocation-rule-builder__rule-controls"><button type="button" class="cinder-invocation-rule-builder__icon-btn"><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M8 3l5 6H3z"></path></svg></button> <button type="button" class="cinder-invocation-rule-builder__icon-btn"><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M8 13l-5-6h10z"></path></svg></button> <button type="button" class="cinder-invocation-rule-builder__icon-btn" data-irb-rule-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_5 = $.from_html(`<p class="cinder-invocation-rule-builder__validation" role="status">Add at least one condition or this rule will always fire.</p>`);
+var root_7 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No conditions — rule always fires.</p>`);
+var root_9 = $.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_12 = $.from_html(`<option> </option>`);
+var root_13 = $.from_html(`<option> </option>`);
+var root_11 = $.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_10 = $.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_16 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No actions configured.</p>`);
+var root_18 = $.from_html(`<div class="cinder-invocation-rule-builder__summary-row"> </div>`);
+var root_15 = $.from_html(`<div class="cinder-invocation-rule-builder__summary"><!></div>`);
+var root_21 = $.from_html(`<option> </option>`);
+var root_20 = $.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_19 = $.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_1 = $.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_22 = $.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_23 = $.from_html(`<p class="cinder-invocation-rule-builder__empty">No rules configured.</p>`);
 var root = $.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();
@@ -75,7 +79,9 @@ function Invocation_rule_builder($$anchor, $$props) {
     "aria-labelledby"
   ]);
   const sectionAriaLabel = $.derived(() => $$props["aria-labelledby"] ? undefined : $$props["aria-label"] ?? $$props.label ?? "Invocation rules");
+  const effectiveReadonly = $.derived(() => readonly() || $$props.onchange === undefined);
   let announcement = $.state("");
+  let ruleLabelDrafts = $.state($.proxy({}));
   function announce(message) {
     $.set(announcement, "");
     tick().then(() => {
@@ -100,13 +106,13 @@ function Invocation_rule_builder($$anchor, $$props) {
       }
     ];
     const change = { type: "add-rule", ruleId };
-    $$props.onchange(nextRules, change);
+    $$props.onchange?.(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);
+    $$props.onchange?.(nextRules, change);
     announce(`${ruleLabel} removed.`);
     tick().then(() => {
       const targetIndex = ruleIndex > 0 ? ruleIndex - 1 : 0;
@@ -123,9 +129,24 @@ 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);
+    $$props.onchange?.(nextRules, change);
     announce(`${moved.label} moved to position ${toIndex + 1} of ${nextRules.length}.`);
   }
+  function handleRenameRule(ruleId, label) {
+    const nextLabel = label.trim() || "Untitled rule";
+    const { [ruleId]: _removedDraft, ...remainingDrafts } = $.get(ruleLabelDrafts);
+    $.set(ruleLabelDrafts, remainingDrafts, true);
+    const currentLabel = $$props.rules.find((rule) => rule.id === ruleId)?.label;
+    if (currentLabel === nextLabel)
+      return;
+    const nextRules = updateRules(ruleId, (rule) => ({ ...rule, label: nextLabel }));
+    const change = { type: "rename-rule", ruleId };
+    $$props.onchange?.(nextRules, change);
+  }
+  function ruleLabelDraft(rule) {
+    const draft = $.get(ruleLabelDrafts)[rule.id];
+    return draft?.baseLabel === rule.label ? draft.value : rule.label;
+  }
   function handleAddCondition(ruleId) {
     const conditionId = generateId();
     const firstField = $$props.fieldOptions[0]?.value ?? "";
@@ -143,7 +164,7 @@ function Invocation_rule_builder($$anchor, $$props) {
       ]
     }));
     const change = { type: "add-condition", ruleId, conditionId };
-    $$props.onchange(nextRules, change);
+    $$props.onchange?.(nextRules, change);
     announce("Condition added.");
   }
   function handleRemoveCondition(ruleId, conditionId, conditionIndex, ruleIndex) {
@@ -152,7 +173,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);
+    $$props.onchange?.(nextRules, change);
     announce("Condition removed.");
     tick().then(() => {
       const ruleEl = document.querySelector(`[data-irb-region="${baseId}"] [data-irb-rule="${ruleIndex}"]`);
@@ -168,7 +189,7 @@ function Invocation_rule_builder($$anchor, $$props) {
       conditions: rule.conditions.map((condition) => condition.id === conditionId ? { ...condition, [field]: value } : condition)
     }));
     const change = { type: "update-condition", ruleId, conditionId, field };
-    $$props.onchange(nextRules, change);
+    $$props.onchange?.(nextRules, change);
   }
   function handleAddAction(ruleId) {
     const actionId = generateId();
@@ -178,7 +199,7 @@ function Invocation_rule_builder($$anchor, $$props) {
       actions: [...rule.actions, { id: actionId, target: firstTarget }]
     }));
     const change = { type: "add-action", ruleId, actionId };
-    $$props.onchange(nextRules, change);
+    $$props.onchange?.(nextRules, change);
     announce("Action added.");
   }
   function handleRemoveAction(ruleId, actionId, actionIndex, ruleIndex) {
@@ -187,7 +208,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);
+    $$props.onchange?.(nextRules, change);
     announce("Action removed.");
     tick().then(() => {
       const ruleEl = document.querySelector(`[data-irb-region="${baseId}"] [data-irb-rule="${ruleIndex}"]`);
@@ -203,7 +224,7 @@ 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);
+    $$props.onchange?.(nextRules, change);
   }
   function fieldLabel(value) {
     return $$props.fieldOptions.find((option) => option.value === value)?.label ?? value;
@@ -235,13 +256,48 @@ function Invocation_rule_builder($$anchor, $$props) {
   $.each(node, 19, () => $$props.rules, (rule) => rule.id, ($$anchor2, rule, ruleIndex) => {
     var div = root_1();
     var div_1 = $.child(div);
-    var span = $.child(div_1);
-    var text = $.child(span, true);
-    $.reset(span);
-    var node_1 = $.sibling(span, 2);
+    var node_1 = $.child(div_1);
     {
       var consequent = ($$anchor3) => {
-        var div_2 = root_2();
+        var h3 = root_2();
+        var text = $.child(h3, true);
+        $.reset(h3);
+        $.template_effect(() => $.set_text(text, $.get(rule).label));
+        $.append($$anchor3, h3);
+      };
+      var alternate = ($$anchor3) => {
+        var label_1 = root_3();
+        var input = $.sibling($.child(label_1), 2);
+        $.remove_input_defaults(input);
+        $.reset(label_1);
+        $.template_effect(($0) => {
+          $.set_value(input, $0);
+          $.set_attribute(input, "aria-label", `Rule name for ${$.get(rule).label}`);
+        }, [() => ruleLabelDraft($.get(rule))]);
+        $.delegated("input", input, (event2) => $.set(ruleLabelDrafts, {
+          ...$.get(ruleLabelDrafts),
+          [$.get(rule).id]: { baseLabel: $.get(rule).label, value: event2.target.value }
+        }, true));
+        $.event("blur", input, (event2) => handleRenameRule($.get(rule).id, event2.target.value));
+        $.delegated("keydown", input, (event2) => {
+          if (event2.key === "Enter") {
+            event2.preventDefault();
+            event2.currentTarget.blur();
+          }
+        });
+        $.append($$anchor3, label_1);
+      };
+      $.if(node_1, ($$render) => {
+        if ($.get(effectiveReadonly))
+          $$render(consequent);
+        else
+          $$render(alternate, -1);
+      });
+    }
+    var node_2 = $.sibling(node_1, 2);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var div_2 = root_4();
         var button = $.child(div_2);
         var button_1 = $.sibling(button, 2);
         var button_2 = $.sibling(button_1, 2);
@@ -258,29 +314,40 @@ function Invocation_rule_builder($$anchor, $$props) {
         $.delegated("click", button_2, () => handleRemoveRule($.get(rule).id, $.get(rule).label, $.get(ruleIndex)));
         $.append($$anchor3, div_2);
       };
-      $.if(node_1, ($$render) => {
-        if (!readonly())
-          $$render(consequent);
+      $.if(node_2, ($$render) => {
+        if (!$.get(effectiveReadonly))
+          $$render(consequent_1);
       });
     }
     $.reset(div_1);
     var div_3 = $.sibling(div_1, 2);
-    var span_1 = $.child(div_3);
-    var node_2 = $.sibling(span_1, 2);
+    var span = $.child(div_3);
+    var node_3 = $.sibling(span, 2);
     {
       var consequent_2 = ($$anchor3) => {
-        var div_4 = root_3();
-        var node_3 = $.child(div_4);
+        var p = root_5();
+        $.append($$anchor3, p);
+      };
+      $.if(node_3, ($$render) => {
+        if (!$.get(effectiveReadonly) && $.get(rule).conditions.length === 0)
+          $$render(consequent_2);
+      });
+    }
+    var node_4 = $.sibling(node_3, 2);
+    {
+      var consequent_4 = ($$anchor3) => {
+        var div_4 = root_6();
+        var node_5 = $.child(div_4);
         {
-          var consequent_1 = ($$anchor4) => {
-            var p = root_4();
-            $.append($$anchor4, p);
+          var consequent_3 = ($$anchor4) => {
+            var p_1 = root_7();
+            $.append($$anchor4, p_1);
           };
-          var alternate = ($$anchor4) => {
+          var alternate_1 = ($$anchor4) => {
             var fragment_1 = $.comment();
-            var node_4 = $.first_child(fragment_1);
-            $.each(node_4, 17, () => $.get(rule).conditions, (condition) => condition.id, ($$anchor5, condition) => {
-              var div_5 = root_6();
+            var node_6 = $.first_child(fragment_1);
+            $.each(node_6, 17, () => $.get(rule).conditions, (condition) => condition.id, ($$anchor5, condition) => {
+              var div_5 = root_9();
               var text_1 = $.child(div_5, true);
               $.reset(div_5);
               $.template_effect(($0) => $.set_text(text_1, $0), [() => conditionSummary($.get(condition))]);
@@ -288,25 +355,25 @@ function Invocation_rule_builder($$anchor, $$props) {
             });
             $.append($$anchor4, fragment_1);
           };
-          $.if(node_3, ($$render) => {
+          $.if(node_5, ($$render) => {
             if ($.get(rule).conditions.length === 0)
-              $$render(consequent_1);
+              $$render(consequent_3);
             else
-              $$render(alternate, -1);
+              $$render(alternate_1, -1);
           });
         }
         $.reset(div_4);
         $.template_effect(() => $.set_attribute(div_4, "aria-label", `Conditions for ${$.get(rule).label}`));
         $.append($$anchor3, div_4);
       };
-      var alternate_1 = ($$anchor3) => {
-        var fragment_2 = root_7();
+      var alternate_2 = ($$anchor3) => {
+        var fragment_2 = root_10();
         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_11();
           var select = $.child(div_7);
           $.each(select, 21, () => $$props.fieldOptions, (option) => option.value, ($$anchor5, option) => {
-            var option_1 = root_9();
+            var option_1 = root_12();
             var text_2 = $.child(option_1, true);
             $.reset(option_1);
             var option_1_value = {};
@@ -323,7 +390,7 @@ function Invocation_rule_builder($$anchor, $$props) {
           $.init_select(select);
           var select_1 = $.sibling(select, 2);
           $.each(select_1, 21, () => $$props.operatorOptions, (option) => option.value, ($$anchor5, option) => {
-            var option_2 = root_10();
+            var option_2 = root_13();
             var text_3 = $.child(option_2, true);
             $.reset(option_2);
             var option_2_value = {};
@@ -338,9 +405,9 @@ function Invocation_rule_builder($$anchor, $$props) {
           $.reset(select_1);
           var select_1_value;
           $.init_select(select_1);
-          var input = $.sibling(select_1, 2);
-          $.remove_input_defaults(input);
-          var button_3 = $.sibling(input, 2);
+          var input_1 = $.sibling(select_1, 2);
+          $.remove_input_defaults(input_1);
+          var button_3 = $.sibling(input_1, 2);
           $.reset(div_7);
           $.template_effect(() => {
             $.set_attribute(select, "aria-label", `Field for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
@@ -351,13 +418,13 @@ function Invocation_rule_builder($$anchor, $$props) {
             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);
             }
-            $.set_attribute(input, "aria-label", `Value for condition ${$.get(conditionIndex) + 1} of ${$.get(rule).label}`);
-            $.set_value(input, $.get(condition).value);
+            $.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}`);
           });
-          $.delegated("change", select, (event) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "field", event.target.value));
-          $.delegated("change", select_1, (event) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "operator", event.target.value));
-          $.delegated("input", input, (event) => handleUpdateCondition($.get(rule).id, $.get(condition).id, "value", event.target.value));
+          $.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);
         });
@@ -373,31 +440,42 @@ function Invocation_rule_builder($$anchor, $$props) {
         $.delegated("click", button_4, () => handleAddCondition($.get(rule).id));
         $.append($$anchor3, fragment_2);
       };
-      $.if(node_2, ($$render) => {
-        if (readonly())
-          $$render(consequent_2);
+      $.if(node_4, ($$render) => {
+        if ($.get(effectiveReadonly))
+          $$render(consequent_4);
         else
-          $$render(alternate_1, -1);
+          $$render(alternate_2, -1);
       });
     }
     $.reset(div_3);
     var div_8 = $.sibling(div_3, 2);
-    var span_2 = $.child(div_8);
-    var node_5 = $.sibling(span_2, 2);
+    var span_1 = $.child(div_8);
+    var node_7 = $.sibling(span_1, 2);
     {
-      var consequent_4 = ($$anchor3) => {
-        var div_9 = root_11();
-        var node_6 = $.child(div_9);
+      var consequent_5 = ($$anchor3) => {
+        var p_2 = root_14();
+        $.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_15();
+        var node_9 = $.child(div_9);
         {
-          var consequent_3 = ($$anchor4) => {
-            var p_1 = root_12();
-            $.append($$anchor4, p_1);
+          var consequent_6 = ($$anchor4) => {
+            var p_3 = root_16();
+            $.append($$anchor4, p_3);
           };
-          var alternate_2 = ($$anchor4) => {
+          var alternate_3 = ($$anchor4) => {
             var fragment_3 = $.comment();
-            var node_7 = $.first_child(fragment_3);
-            $.each(node_7, 17, () => $.get(rule).actions, (action) => action.id, ($$anchor5, action) => {
-              var div_10 = root_14();
+            var node_10 = $.first_child(fragment_3);
+            $.each(node_10, 17, () => $.get(rule).actions, (action) => action.id, ($$anchor5, action) => {
+              var div_10 = root_18();
               var text_5 = $.child(div_10, true);
               $.reset(div_10);
               $.template_effect(($0) => $.set_text(text_5, $0), [() => actionSummary($.get(action))]);
@@ -405,25 +483,25 @@ function Invocation_rule_builder($$anchor, $$props) {
             });
             $.append($$anchor4, fragment_3);
           };
-          $.if(node_6, ($$render) => {
+          $.if(node_9, ($$render) => {
             if ($.get(rule).actions.length === 0)
-              $$render(consequent_3);
+              $$render(consequent_6);
             else
-              $$render(alternate_2, -1);
+              $$render(alternate_3, -1);
           });
         }
         $.reset(div_9);
         $.template_effect(() => $.set_attribute(div_9, "aria-label", `Actions for ${$.get(rule).label}`));
         $.append($$anchor3, div_9);
       };
-      var alternate_3 = ($$anchor3) => {
-        var fragment_4 = root_15();
+      var alternate_4 = ($$anchor3) => {
+        var fragment_4 = root_19();
         var div_11 = $.first_child(fragment_4);
         $.each(div_11, 23, () => $.get(rule).actions, (action) => action.id, ($$anchor4, action, actionIndex) => {
-          var div_12 = root_16();
+          var div_12 = root_20();
           var select_2 = $.child(div_12);
           $.each(select_2, 21, () => $$props.actionOptions, (option) => option.value, ($$anchor5, option) => {
-            var option_3 = root_17();
+            var option_3 = root_21();
             var text_6 = $.child(option_3, true);
             $.reset(option_3);
             var option_3_value = {};
@@ -447,7 +525,7 @@ function Invocation_rule_builder($$anchor, $$props) {
             }
             $.set_attribute(button_5, "aria-label", `Remove action ${$.get(actionIndex) + 1} of ${$.get(rule).label}`);
           });
-          $.delegated("change", select_2, (event) => handleUpdateAction($.get(rule).id, $.get(action).id, event.target.value));
+          $.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);
         });
@@ -463,47 +541,46 @@ function Invocation_rule_builder($$anchor, $$props) {
         $.delegated("click", button_6, () => handleAddAction($.get(rule).id));
         $.append($$anchor3, fragment_4);
       };
-      $.if(node_5, ($$render) => {
-        if (readonly())
-          $$render(consequent_4);
+      $.if(node_8, ($$render) => {
+        if ($.get(effectiveReadonly))
+          $$render(consequent_7);
         else
-          $$render(alternate_3, -1);
+          $$render(alternate_4, -1);
       });
     }
     $.reset(div_8);
     $.reset(div);
     $.template_effect(() => {
       $.set_attribute(div, "data-irb-rule", $.get(ruleIndex));
-      $.set_text(text, $.get(rule).label);
-      $.set_attribute(span_1, "id", `${baseId}-rule-${$.get(ruleIndex)}-conditions-label`);
-      $.set_attribute(span_2, "id", `${baseId}-rule-${$.get(ruleIndex)}-actions-label`);
+      $.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_8 = $.sibling(node, 2);
+  var node_11 = $.sibling(node, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var button_7 = root_18();
+    var consequent_8 = ($$anchor2) => {
+      var button_7 = root_22();
       var text_8 = $.child(button_7);
       $.reset(button_7);
       $.template_effect(() => $.set_text(text_8, `+ ${addRuleLabel() ?? ""}`));
       $.delegated("click", button_7, handleAddRule);
       $.append($$anchor2, button_7);
     };
-    $.if(node_8, ($$render) => {
-      if (!readonly())
-        $$render(consequent_5);
+    $.if(node_11, ($$render) => {
+      if (!$.get(effectiveReadonly))
+        $$render(consequent_8);
     });
   }
-  var node_9 = $.sibling(node_8, 2);
+  var node_12 = $.sibling(node_11, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var p_2 = root_19();
-      $.append($$anchor2, p_2);
+    var consequent_9 = ($$anchor2) => {
+      var p_4 = root_23();
+      $.append($$anchor2, p_4);
     };
-    $.if(node_9, ($$render) => {
-      if ($$props.rules.length === 0 && readonly())
-        $$render(consequent_6);
+    $.if(node_12, ($$render) => {
+      if ($$props.rules.length === 0 && $.get(effectiveReadonly))
+        $$render(consequent_9);
     });
   }
   $.reset(section);
@@ -514,7 +591,7 @@ function Invocation_rule_builder($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-$.delegate(["click", "change", "input"]);
+$.delegate(["input", "keydown", "click", "change"]);
 
 // src/components/invocation-rule-builder/index.ts
 var invocation_rule_builder_default = Invocation_rule_builder;
@@ -523,4 +600,4 @@ export {
   Invocation_rule_builder as InvocationRuleBuilder
 };
 
-//# debugId=BB198B2C21FCB59764756E2164756E21
+//# debugId=D1D11EA2B754D14564756E2164756E21

package/dist/components/invocation-rule-builder/invocation-rule-builder.css

@@ -30,12 +30,42 @@
   .cinder-invocation-rule-builder__rule-label {
     flex: 1 1 auto;
     min-inline-size: 0;
+    margin: 0;
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-semibold);
     color: var(--cinder-text);
     overflow-wrap: anywhere;
   }
 
+  .cinder-invocation-rule-builder__rule-label-field {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .cinder-invocation-rule-builder__rule-label-input {
+    inline-size: 100%;
+    min-block-size: var(--cinder-control-height-sm, 2rem);
+    padding-inline: var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background: var(--cinder-surface);
+    color: var(--cinder-text);
+    font: inherit;
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  .cinder-invocation-rule-builder__rule-label-input:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-invocation-rule-builder__rule-label-input:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+    }
+  }
+
   .cinder-invocation-rule-builder__rule-controls {
     display: inline-flex;
     gap: var(--cinder-space-1);
@@ -49,9 +79,8 @@
     display: block;
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-semibold);
-    letter-spacing: 0.05em;
     text-transform: uppercase;
-    color: var(--cinder-text-muted);
+    color: var(--cinder-text);
     margin-block-end: var(--cinder-space-2);
   }
 
@@ -74,7 +103,8 @@
     flex: 1 1 8rem;
     min-inline-size: 6rem;
     block-size: var(--cinder-control-height-sm, 2rem);
-    padding-inline: var(--cinder-space-2);
+    padding-inline-start: var(--cinder-space-2);
+    padding-inline-end: var(--cinder-space-7);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-sm);
     background: var(--cinder-surface);
@@ -83,6 +113,16 @@
     font-family: inherit;
     cursor: pointer;
     appearance: none;
+    background-image:
+      linear-gradient(45deg, transparent 50%, currentcolor 50%),
+      linear-gradient(135deg, currentcolor 50%, transparent 50%);
+    background-position:
+      calc(100% - 0.85rem) 50%,
+      calc(100% - 0.55rem) 50%;
+    background-size:
+      0.3rem 0.3rem,
+      0.3rem 0.3rem;
+    background-repeat: no-repeat;
   }
 
   .cinder-invocation-rule-builder__condition-select:focus-visible {
@@ -137,7 +177,8 @@
   .cinder-invocation-rule-builder__action-select {
     flex: 1 1 auto;
     block-size: var(--cinder-control-height-sm, 2rem);
-    padding-inline: var(--cinder-space-2);
+    padding-inline-start: var(--cinder-space-2);
+    padding-inline-end: var(--cinder-space-7);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-sm);
     background: var(--cinder-surface);
@@ -146,6 +187,22 @@
     font-family: inherit;
     cursor: pointer;
     appearance: none;
+    background-image:
+      linear-gradient(45deg, transparent 50%, currentcolor 50%),
+      linear-gradient(135deg, currentcolor 50%, transparent 50%);
+    background-position:
+      calc(100% - 0.85rem) 50%,
+      calc(100% - 0.55rem) 50%;
+    background-size:
+      0.3rem 0.3rem,
+      0.3rem 0.3rem;
+    background-repeat: no-repeat;
+  }
+
+  .cinder-invocation-rule-builder__validation {
+    margin: 0 0 var(--cinder-space-2);
+    color: var(--cinder-color-warning-fg);
+    font-size: var(--cinder-text-xs);
   }
 
   .cinder-invocation-rule-builder__action-select:focus-visible {
@@ -166,8 +223,8 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     padding: 0;
     border: 1px solid var(--cinder-border-muted);
     border-radius: var(--cinder-radius-sm);