@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -34,7 +34,9 @@ function Invocation_rule_builder($$renderer, $$props) {
       ...rest
     } = $$props;
     const sectionAriaLabel = $.derived(() => ariaLabelledby ? undefined : ariaLabel ?? label ?? "Invocation rules");
+    const effectiveReadonly = $.derived(() => readonly || onchange === undefined);
     let announcement = "";
+    let ruleLabelDrafts = {};
     function announce(message) {
       announcement = "";
       tick().then(() => {
@@ -59,13 +61,13 @@ function Invocation_rule_builder($$renderer, $$props) {
         }
       ];
       const change = { type: "add-rule", ruleId };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
       announce("Rule added.");
     }
     function handleRemoveRule(ruleId, ruleLabel, ruleIndex) {
       const nextRules = rules.filter((rule) => rule.id !== ruleId);
       const change = { type: "remove-rule", ruleId };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
       announce(`${ruleLabel} removed.`);
       tick().then(() => {
         const targetIndex = ruleIndex > 0 ? ruleIndex - 1 : 0;
@@ -82,9 +84,24 @@ function Invocation_rule_builder($$renderer, $$props) {
       const [moved] = nextRules.splice(fromIndex, 1);
       nextRules.splice(toIndex, 0, moved);
       const change = { type: "move-rule", ruleId, fromIndex, toIndex };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
       announce(`${moved.label} moved to position ${toIndex + 1} of ${nextRules.length}.`);
     }
+    function handleRenameRule(ruleId, label2) {
+      const nextLabel = label2.trim() || "Untitled rule";
+      const { [ruleId]: _removedDraft, ...remainingDrafts } = ruleLabelDrafts;
+      ruleLabelDrafts = remainingDrafts;
+      const currentLabel = 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 };
+      onchange?.(nextRules, change);
+    }
+    function ruleLabelDraft(rule) {
+      const draft = ruleLabelDrafts[rule.id];
+      return draft?.baseLabel === rule.label ? draft.value : rule.label;
+    }
     function handleAddCondition(ruleId) {
       const conditionId = generateId();
       const firstField = fieldOptions[0]?.value ?? "";
@@ -102,7 +119,7 @@ function Invocation_rule_builder($$renderer, $$props) {
         ]
       }));
       const change = { type: "add-condition", ruleId, conditionId };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
       announce("Condition added.");
     }
     function handleRemoveCondition(ruleId, conditionId, conditionIndex, ruleIndex) {
@@ -111,7 +128,7 @@ function Invocation_rule_builder($$renderer, $$props) {
         conditions: rule.conditions.filter((condition) => condition.id !== conditionId)
       }));
       const change = { type: "remove-condition", ruleId, conditionId };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
       announce("Condition removed.");
       tick().then(() => {
         const ruleEl = document.querySelector(`[data-irb-region="${baseId}"] [data-irb-rule="${ruleIndex}"]`);
@@ -127,7 +144,7 @@ function Invocation_rule_builder($$renderer, $$props) {
         conditions: rule.conditions.map((condition) => condition.id === conditionId ? { ...condition, [field]: value } : condition)
       }));
       const change = { type: "update-condition", ruleId, conditionId, field };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
     }
     function handleAddAction(ruleId) {
       const actionId = generateId();
@@ -137,7 +154,7 @@ function Invocation_rule_builder($$renderer, $$props) {
         actions: [...rule.actions, { id: actionId, target: firstTarget }]
       }));
       const change = { type: "add-action", ruleId, actionId };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
       announce("Action added.");
     }
     function handleRemoveAction(ruleId, actionId, actionIndex, ruleIndex) {
@@ -146,7 +163,7 @@ function Invocation_rule_builder($$renderer, $$props) {
         actions: rule.actions.filter((action) => action.id !== actionId)
       }));
       const change = { type: "remove-action", ruleId, actionId };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
       announce("Action removed.");
       tick().then(() => {
         const ruleEl = document.querySelector(`[data-irb-region="${baseId}"] [data-irb-rule="${ruleIndex}"]`);
@@ -162,7 +179,7 @@ function Invocation_rule_builder($$renderer, $$props) {
         actions: rule.actions.map((action) => action.id === actionId ? { ...action, target } : action)
       }));
       const change = { type: "update-action", ruleId, actionId };
-      onchange(nextRules, change);
+      onchange?.(nextRules, change);
     }
     function fieldLabel(value) {
       return fieldOptions.find((option) => option.value === value)?.label ?? value;
@@ -189,15 +206,30 @@ function Invocation_rule_builder($$renderer, $$props) {
     const each_array = $.ensure_array_like(rules);
     for (let ruleIndex = 0, $$length = each_array.length;ruleIndex < $$length; ruleIndex++) {
       let rule = each_array[ruleIndex];
-      $$renderer2.push(`<div class="cinder-invocation-rule-builder__rule"${$.attr("data-irb-rule", ruleIndex)}><div class="cinder-invocation-rule-builder__rule-header"><span class="cinder-invocation-rule-builder__rule-label">${$.escape(rule.label)}</span> `);
-      if (!readonly) {
+      $$renderer2.push(`<div class="cinder-invocation-rule-builder__rule"${$.attr("data-irb-rule", ruleIndex)}><div class="cinder-invocation-rule-builder__rule-header">`);
+      if (effectiveReadonly()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<h3 class="cinder-invocation-rule-builder__rule-label">${$.escape(rule.label)}</h3>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<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"${$.attr("value", ruleLabelDraft(rule))}${$.attr("aria-label", `Rule name for ${rule.label}`)}/></label>`);
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (!effectiveReadonly()) {
         $$renderer2.push("<!--[0-->");
         $$renderer2.push(`<div class="cinder-invocation-rule-builder__rule-controls"><button type="button" class="cinder-invocation-rule-builder__icon-btn"${$.attr("aria-label", `Move ${rule.label} up`)}${$.attr("disabled", ruleIndex === 0, true)}><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"${$.attr("aria-label", `Move ${rule.label} down`)}${$.attr("disabled", ruleIndex === rules.length - 1, true)}><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"${$.attr("aria-label", `Remove ${rule.label}`)} 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>`);
       } else {
         $$renderer2.push("<!--[-1-->");
       }
       $$renderer2.push(`<!--]--></div> <div><span${$.attr("id", `${baseId}-rule-${ruleIndex}-conditions-label`)} class="cinder-invocation-rule-builder__section-heading">Conditions</span> `);
-      if (readonly) {
+      if (!effectiveReadonly() && rule.conditions.length === 0) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<p class="cinder-invocation-rule-builder__validation" role="status">Add at least one condition or this rule will always fire.</p>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (effectiveReadonly()) {
         $$renderer2.push("<!--[0-->");
         $$renderer2.push(`<div class="cinder-invocation-rule-builder__summary"${$.attr("aria-label", `Conditions for ${rule.label}`)}>`);
         if (rule.conditions.length === 0) {
@@ -254,12 +286,19 @@ function Invocation_rule_builder($$renderer, $$props) {
             }
             $$renderer3.push(`<!--]-->`);
           });
-          $$renderer2.push(` <input type="text" class="cinder-invocation-rule-builder__condition-value"${$.attr("aria-label", `Value for condition ${conditionIndex + 1} of ${rule.label}`)}${$.attr("value", condition.value)}/> <button type="button" class="cinder-invocation-rule-builder__icon-btn"${$.attr("aria-label", `Remove condition ${conditionIndex + 1} of ${rule.label}`)} 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>`);
+          $$renderer2.push(` <input type="text" class="cinder-invocation-rule-builder__condition-value"${$.attr("aria-label", `Value for condition ${conditionIndex + 1} of ${rule.label}`)} placeholder="Value to compare"${$.attr("value", condition.value)}/> <button type="button" class="cinder-invocation-rule-builder__icon-btn"${$.attr("aria-label", `Remove condition ${conditionIndex + 1} of ${rule.label}`)} 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>`);
         }
         $$renderer2.push(`<!--]--></div> <button type="button" class="cinder-invocation-rule-builder__add-btn"${$.attr("aria-label", `${addConditionLabel} to ${rule.label}`)} data-irb-add-condition="">+ ${$.escape(addConditionLabel)}</button>`);
       }
       $$renderer2.push(`<!--]--></div> <div><span${$.attr("id", `${baseId}-rule-${ruleIndex}-actions-label`)} class="cinder-invocation-rule-builder__section-heading">Actions</span> `);
-      if (readonly) {
+      if (!effectiveReadonly() && rule.actions.length === 0) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<p class="cinder-invocation-rule-builder__validation" role="status">Add at least one action for this rule.</p>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (effectiveReadonly()) {
         $$renderer2.push("<!--[0-->");
         $$renderer2.push(`<div class="cinder-invocation-rule-builder__summary"${$.attr("aria-label", `Actions for ${rule.label}`)}>`);
         if (rule.actions.length === 0) {
@@ -306,14 +345,14 @@ function Invocation_rule_builder($$renderer, $$props) {
       $$renderer2.push(`<!--]--></div></div>`);
     }
     $$renderer2.push(`<!--]--> `);
-    if (!readonly) {
+    if (!effectiveReadonly()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<button type="button" class="cinder-invocation-rule-builder__add-btn cinder-invocation-rule-builder__add-rule-btn" data-irb-add-rule="">+ ${$.escape(addRuleLabel)}</button>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]--> `);
-    if (rules.length === 0 && readonly) {
+    if (rules.length === 0 && effectiveReadonly()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<p class="cinder-invocation-rule-builder__empty">No rules configured.</p>`);
     } else {
@@ -330,4 +369,4 @@ export {
   Invocation_rule_builder as InvocationRuleBuilder
 };
 
-//# debugId=D969598E843415A564756E2164756E21
+//# debugId=EE189D6F9126355564756E2164756E21

package/dist/server/components/invocation-rule-builder/invocation-rule-builder.schema.js

@@ -7,10 +7,134 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
+    rules: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Unique identifier for the rule."
+          },
+          label: {
+            type: "string",
+            description: "Display label for the rule."
+          },
+          conditions: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                id: {
+                  type: "string",
+                  description: "Identifies the condition row; must be unique within its rule."
+                },
+                field: {
+                  type: "string",
+                  description: 'The field being tested, e.g. "path" or "label". Consumer-defined.'
+                },
+                operator: {
+                  type: "string",
+                  description: 'The comparison operator, e.g. "matches" or "is". Consumer-defined.'
+                },
+                value: {
+                  type: "string",
+                  description: "The value being compared against. Consumer-defined."
+                }
+              },
+              additionalProperties: false,
+              required: ["field", "id", "operator", "value"]
+            },
+            description: "Zero or more conditions (implicit AND)."
+          },
+          actions: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                id: {
+                  type: "string",
+                  description: "Identifies the action row; must be unique within its rule."
+                },
+                target: {
+                  type: "string",
+                  description: "The action target, e.g. a review-agent slug. Consumer-defined."
+                }
+              },
+              additionalProperties: false,
+              required: ["id", "target"]
+            },
+            description: "Zero or more actions to invoke when conditions match."
+          }
+        },
+        additionalProperties: false,
+        required: ["actions", "conditions", "id", "label"]
+      },
+      description: "The current list of automation rules. Controlled — pass the updated\nlist returned from `onchange` back into this prop to commit a change."
+    },
+    fieldOptions: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          value: {
+            type: "string",
+            description: "The value stored on the condition or action."
+          },
+          label: {
+            type: "string",
+            description: "The human-readable label shown in the select."
+          }
+        },
+        additionalProperties: false,
+        required: ["label", "value"]
+      },
+      description: `Options for the condition field selector. Consumer-provided list of
+fields that a condition can test, e.g. "path", "label", "author".`
+    },
+    operatorOptions: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          value: {
+            type: "string",
+            description: "The value stored on the condition or action."
+          },
+          label: {
+            type: "string",
+            description: "The human-readable label shown in the select."
+          }
+        },
+        additionalProperties: false,
+        required: ["label", "value"]
+      },
+      description: `Options for the condition operator selector. Consumer-provided list
+of operators, e.g. "matches", "is", "is-not", "contains".`
+    },
+    actionOptions: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          value: {
+            type: "string",
+            description: "The value stored on the condition or action."
+          },
+          label: {
+            type: "string",
+            description: "The human-readable label shown in the select."
+          }
+        },
+        additionalProperties: false,
+        required: ["label", "value"]
+      },
+      description: `Options for the action target selector. Consumer-provided list of
+targets, e.g. review-agent slugs or step identifiers.`
+    },
     readonly: {
-      type: "boolean",
-      description: `When true, renders a readonly summary of each rule instead of editable
-controls. Default is false (editable mode).`
+      const: true,
+      description: "Must be true for schema-driven usage because editable mode requires\nthe unsupported `onchange` callback. Runtime consumers may omit this\nwhen passing `onchange` directly."
     },
     addRuleLabel: {
       type: "string",
@@ -34,42 +158,16 @@ controls. Default is false (editable mode).`
     }
   },
   additionalProperties: false,
+  required: ["actionOptions", "fieldOptions", "operatorOptions", "readonly", "rules"],
   metadata: {
     unsupportedProps: [
-      {
-        name: "actionOptions",
-        reason: "unknown-shape",
-        required: true,
-        description: `Options for the action target selector. Consumer-provided list of
-targets, e.g. review-agent slugs or step identifiers.`
-      },
-      {
-        name: "fieldOptions",
-        reason: "unknown-shape",
-        required: true,
-        description: `Options for the condition field selector. Consumer-provided list of
-fields that a condition can test, e.g. "path", "label", "author".`
-      },
       {
         name: "onchange",
         reason: "function-or-snippet",
-        required: true,
-        description: `Called whenever the user makes any edit. Receives the next rule
-array (pure, not mutated) and a change descriptor. Consumer owns
-persistence, validation, and execution.`
-      },
-      {
-        name: "operatorOptions",
-        reason: "unknown-shape",
-        required: true,
-        description: `Options for the condition operator selector. Consumer-provided list
-of operators, e.g. "matches", "is", "is-not", "contains".`
-      },
-      {
-        name: "rules",
-        reason: "unknown-shape",
-        required: true,
-        description: "The current list of automation rules. Controlled — pass the updated\nlist returned from `onchange` back into this prop to commit a change."
+        description: `Called whenever the user makes any edit. Required for editable runtime
+usage because editable controls must commit controlled state changes.
+Receives the next rule array (pure, not mutated) and a change descriptor.
+Consumer owns persistence, validation, and execution.`
       }
     ]
   }
@@ -79,4 +177,4 @@ export {
   invocation_rule_builder_schema_default as default
 };
 
-//# debugId=3DF6CC7103E34E9264756E2164756E21
+//# debugId=77767694B951702A64756E2164756E21

package/dist/server/components/json-schema-editor/index.css

@@ -178,8 +178,10 @@
     display: flex;
     align-items:  center;
     gap: var(--cinder-space-2);
-    padding: var(--cinder-space-1-5) var(--cinder-space-3);
+    padding-block: var(--cinder-space-1-5);
     min-height: var(--cinder-button-height-md);
+    padding-inline-start: calc(var(--cinder-space-3)  + var(--cinder-jse-property-depth, 0) * var(--cinder-space-4));
+    padding-inline-end: var(--cinder-space-3);
   }
 
   .cinder-jse-property-row__trigger {
@@ -245,6 +247,7 @@
     padding: var(--cinder-space-3) var(--cinder-space-3) var(--cinder-space-4);
     background: none;
     flex-direction: column;
+    margin-inline-start: calc(var(--cinder-jse-property-depth, 0) * var(--cinder-space-4));
   }
 
   .cinder-jse-property-row__panel > .cinder-jse-property-editor[data-cinder-jse-depth] {