@lostgradient/cinder 0.2.0 → 0.4.0

package/src/components/invocation-rule-builder/invocation-rule-builder.types.ts

@@ -0,0 +1,235 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * A single condition within a rule. The field, operator, and value
+ * are all consumer-defined strings — cinder does not interpret them.
+ *
+ * @schemaObject
+ */
+export type InvocationRuleCondition = {
+  /** Identifies the condition row; must be unique within its rule. */
+  id: string;
+  /** The field being tested, e.g. "path" or "label". Consumer-defined. */
+  field: string;
+  /** The comparison operator, e.g. "matches" or "is". Consumer-defined. */
+  operator: string;
+  /** The value being compared against. Consumer-defined. */
+  value: string;
+};
+
+/**
+ * A single action within a rule. The target is a consumer-defined
+ * identifier naming the agent, service, or step to invoke.
+ *
+ * @schemaObject
+ */
+export type InvocationRuleAction = {
+  /** Identifies the action row; must be unique within its rule. */
+  id: string;
+  /** The action target, e.g. a review-agent slug. Consumer-defined. */
+  target: string;
+};
+
+/**
+ * A single automation rule. A rule fires when ALL of its conditions are
+ * met and then triggers all of its actions. Cinder does not execute,
+ * persist, or validate rules — consumers own that logic entirely.
+ *
+ * @schemaObject
+ */
+export type InvocationRule = {
+  /** Unique identifier for the rule. */
+  id: string;
+  /** Display label for the rule. */
+  label: string;
+  /** Zero or more conditions (implicit AND). */
+  conditions: InvocationRuleCondition[];
+  /** Zero or more actions to invoke when conditions match. */
+  actions: InvocationRuleAction[];
+};
+
+/**
+ * An option in a field, operator, or action-target select list.
+ *
+ * @schemaObject
+ */
+export type InvocationRuleOption = {
+  /** The value stored on the condition or action. */
+  value: string;
+  /** The human-readable label shown in the select. */
+  label: string;
+};
+
+/**
+ * Describes the change that caused an `onchange` call.
+ * Consumers use the type to determine what to persist.
+ */
+export type InvocationRuleChange =
+  | { type: 'add-rule'; ruleId: string }
+  | { type: 'rename-rule'; ruleId: string }
+  | { type: 'remove-rule'; ruleId: string }
+  | { type: 'move-rule'; ruleId: string; fromIndex: number; toIndex: number }
+  | { type: 'add-condition'; ruleId: string; conditionId: string }
+  | { type: 'remove-condition'; ruleId: string; conditionId: string }
+  | {
+      type: 'update-condition';
+      ruleId: string;
+      conditionId: string;
+      field: keyof InvocationRuleCondition;
+    }
+  | { type: 'add-action'; ruleId: string; actionId: string }
+  | { type: 'remove-action'; ruleId: string; actionId: string }
+  | { type: 'update-action'; ruleId: string; actionId: string };
+
+/**
+ * Props for the InvocationRuleBuilder component.
+ *
+ * Cinder owns no rule execution, persistence, or validation semantics.
+ * All rule state is managed externally and passed in through the `rules`
+ * prop. Every user action calls `onchange` with the next rule array and
+ * a change descriptor; the consumer decides what to persist.
+ */
+type InvocationRuleBuilderBaseProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  'class' | 'children' | 'onchange'
+> & {
+  /**
+   * The current list of automation rules. Controlled — pass the updated
+   * list returned from `onchange` back into this prop to commit a change.
+   */
+  rules: InvocationRule[];
+
+  /**
+   * Options for the condition field selector. Consumer-provided list of
+   * fields that a condition can test, e.g. "path", "label", "author".
+   */
+  fieldOptions: InvocationRuleOption[];
+
+  /**
+   * Options for the condition operator selector. Consumer-provided list
+   * of operators, e.g. "matches", "is", "is-not", "contains".
+   */
+  operatorOptions: InvocationRuleOption[];
+
+  /**
+   * Options for the action target selector. Consumer-provided list of
+   * targets, e.g. review-agent slugs or step identifiers.
+   */
+  actionOptions: InvocationRuleOption[];
+
+  /**
+   * Label for the "Add rule" button. Defaults to "Add rule".
+   */
+  addRuleLabel?: string;
+
+  /**
+   * Label for the "Add condition" button. Defaults to "Add condition".
+   */
+  addConditionLabel?: string;
+
+  /**
+   * Label for the "Add action" button. Defaults to "Add action".
+   */
+  addActionLabel?: string;
+
+  /** Accessible label for the entire rule builder region. */
+  label?: string;
+
+  /** Additional CSS classes applied to the root element. */
+  class?: string;
+};
+
+type InvocationRuleBuilderChangeHandler = (
+  nextRules: InvocationRule[],
+  change: InvocationRuleChange,
+) => void;
+
+export type InvocationRuleBuilderProps =
+  | (InvocationRuleBuilderBaseProps & {
+      /**
+       * 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.
+       */
+      onchange: InvocationRuleBuilderChangeHandler;
+
+      /**
+       * When false or omitted, renders editable controls. Editable mode requires
+       * `onchange` so controls cannot become interactive-but-no-op.
+       */
+      readonly?: false;
+    })
+  | (InvocationRuleBuilderBaseProps & {
+      /**
+       * Optional in readonly usage because no edit controls are rendered.
+       * Runtime consumers may still pass it when sharing props between modes.
+       */
+      onchange?: InvocationRuleBuilderChangeHandler;
+
+      /**
+       * When true, renders a readonly summary of each rule instead of editable
+       * controls.
+       */
+      readonly: true;
+    });
+
+/**
+ * Cinder-specific schema surface for InvocationRuleBuilder.
+ *
+ * The `onchange` callback is documented but marked unsupported because
+ * functions cannot be represented as JSON Schema controls.
+ */
+export type InvocationRuleBuilderSchemaProps = {
+  /**
+   * The current list of automation rules. Controlled — pass the updated
+   * list returned from `onchange` back into this prop to commit a change.
+   */
+  rules: InvocationRule[];
+
+  /**
+   * Options for the condition field selector. Consumer-provided list of
+   * fields that a condition can test, e.g. "path", "label", "author".
+   */
+  fieldOptions: InvocationRuleOption[];
+
+  /**
+   * Options for the condition operator selector. Consumer-provided list
+   * of operators, e.g. "matches", "is", "is-not", "contains".
+   */
+  operatorOptions: InvocationRuleOption[];
+
+  /**
+   * Options for the action target selector. Consumer-provided list of
+   * targets, e.g. review-agent slugs or step identifiers.
+   */
+  actionOptions: InvocationRuleOption[];
+
+  /**
+   * Must be true for schema-driven usage because editable mode requires
+   * the unsupported `onchange` callback. Runtime consumers may omit this
+   * when passing `onchange` directly.
+   */
+  readonly: true;
+
+  /**
+   * Label for the "Add rule" button. Defaults to "Add rule".
+   */
+  addRuleLabel?: string;
+
+  /**
+   * Label for the "Add condition" button. Defaults to "Add condition".
+   */
+  addConditionLabel?: string;
+
+  /**
+   * Label for the "Add action" button. Defaults to "Add action".
+   */
+  addActionLabel?: string;
+
+  /** Accessible label for the entire rule builder region. */
+  label?: string;
+
+  /** Additional CSS classes applied to the root element. */
+  class?: string;
+};

package/src/components/json-schema-editor/README.md

@@ -25,20 +25,20 @@ Multi-view editor for authoring JSON Schema documents with form, raw JSON, and d
 
 <!-- generated:props:start -->
 
-| Prop            | Type                                       | Required | Default | Description                                                                                                                |
-| --------------- | ------------------------------------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `class`         | `string`                                   | no       | —       |                                                                                                                            |
-| `draftOverride` | `"2020-12"` \| `"2019-09"` \| `"draft-07"` | no       | —       | Force a draft override regardless of $schema.                                                                              |
-| `id`            | `string`                                   | yes      | —       | Required for ARIA wiring.                                                                                                  |
-| `maxHistory`    | `number`                                   | no       | —       | Maximum history entries (default 100).                                                                                     |
-| `readonly`      | `boolean`                                  | no       | —       | Read-only mode disables all mutations.                                                                                     |
-| `schemaKey`     | `string`                                   | no       | —       | Changing this triggers a full reset (history clears).                                                                      |
-| `view`          | `"form"` \| `"json"` \| `"diff"`           | no       | —       | Active view: form / json / diff. Bindable.                                                                                 |
-| `onchange`      | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `onrevert`      | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `onvalidate`    | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `original`      | `(opaque)`                                 | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
-| `schema`        | `(opaque)`                                 | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+| Prop            | Type                                       | Required | Default | Description                                                                                                                                          |
+| --------------- | ------------------------------------------ | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `class`         | `string`                                   | no       | —       | Additional class merged onto the `.cinder-jse` root element.                                                                                         |
+| `draftOverride` | `"2020-12"` \| `"2019-09"` \| `"draft-07"` | no       | —       | Force a draft override regardless of $schema.                                                                                                        |
+| `id`            | `string`                                   | yes      | —       | Required for ARIA wiring.                                                                                                                            |
+| `maxHistory`    | `number`                                   | no       | —       | Maximum history entries (default 100).                                                                                                               |
+| `readonly`      | `boolean`                                  | no       | —       | Read-only mode disables all mutations.                                                                                                               |
+| `schemaKey`     | `string`                                   | no       | —       | Changing this triggers a full reset (history clears).                                                                                                |
+| `view`          | `"form"` \| `"json"` \| `"diff"`           | no       | —       | Active view: form / json / diff. Bindable.                                                                                                           |
+| `onchange`      | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                           |
+| `onrevert`      | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                           |
+| `onvalidate`    | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                           |
+| `original`      | `(opaque)`                                 | no       | —       | Optional explicit baseline; defaults to the initial `schema`. Not expressible in JSON Schema; see the component types for the signature.             |
+| `schema`        | `(opaque)`                                 | yes      | —       | The schema being edited. May be a string (JSON text) or pre-parsed value. Not expressible in JSON Schema; see the component types for the signature. |
 
 <!-- generated:props:end -->
 

package/src/components/json-schema-editor/form-view.svelte

@@ -4,6 +4,7 @@
   export type FormViewProps = {
     state: EditorState;
     idPrefix: string;
+    onvalidationerrorcount?: ((count: number) => void) | undefined;
     class?: string;
   };
 </script>
@@ -15,7 +16,7 @@
   import EmptyState from '../empty-state/empty-state.svelte';
   import PropertyEditor from './property-editor.svelte';
 
-  let { state, idPrefix, class: className }: FormViewProps = $props();
+  let { state, idPrefix, onvalidationerrorcount, class: className }: FormViewProps = $props();
 
   // Snapshot the committed schema each render so changes propagate via the
   // value prop on PropertyEditor. We don't pass the live committed schema by
@@ -51,6 +52,7 @@
       depth={0}
       readonly={state.readonly || state.jsonDraftIsDirty}
       value={rootSchema}
+      {onvalidationerrorcount}
       onchange={(next, options) => state.commitFromForm(next, options)}
     />
   {/if}

package/src/components/json-schema-editor/json-schema-editor-impl.svelte

@@ -109,13 +109,15 @@
     return options;
   });
 
-  const state = createEditorState(stateOptions);
+  let localValidationErrorCount = $state(0);
+  const editorState = createEditorState(stateOptions);
+  const toolbarValidationErrorCount = $derived(view === 'form' ? localValidationErrorCount : 0);
 
   // Sync `readonly` into the state container whenever the prop changes.
   // `setReadonly` only assigns the flag, so re-applying the construction-seeded
   // value on the initial effect run is a harmless no-op — no sentinel needed.
   $effect(() => {
-    state.setReadonly(readonly);
+    editorState.setReadonly(readonly);
   });
 
   // Sync `draftOverride` into the state container when the *prop* changes.
@@ -129,14 +131,14 @@
   $effect(() => {
     if (draftOverride !== lastDraftOverride) {
       lastDraftOverride = draftOverride;
-      state.setDraftOverride(draftOverride);
+      editorState.setDraftOverride(draftOverride);
     }
   });
 
   // Tear down debounce timers on unmount so stale callbacks don't fire after
   // the parent unmounts the editor.
   $effect(() => {
-    return () => state.destroy();
+    return () => editorState.destroy();
   });
 
   // schemaKey-triggered reset. Track the previous key explicitly so we don't
@@ -151,38 +153,38 @@
     if (schemaKey !== lastSchemaKey) {
       lastSchemaKey = schemaKey;
       untrack(() => {
-        state.reload(schema, original);
+        editorState.reload(schema, original);
       });
       announcer.announce('Schema reloaded');
     }
   });
 
-  // Sync the bindable `view` prop into `state.view`. The flow is intentionally
+  // Sync the bindable `view` prop into `editorState.view`. The flow is intentionally
   // one-directional: `view` is the single source of truth. The parent's
   // `bind:view` and the `Tabs` `bind:value={view}` both write the prop directly,
   // and `state` never changes its view autonomously (`reload()` does not touch
   // `view`), so there is no state→prop direction to mirror. A write-back effect
-  // that mirrored `state.view` onto the prop would force an extra render of the
+  // that mirrored `editorState.view` onto the prop would force an extra render of the
   // tab tree on every unrelated state change; if a future code path ever mutates
-  // `state.view` independently, that path must also update the `view` prop (or
+  // `editorState.view` independently, that path must also update the `view` prop (or
   // expose an onViewChange callback) rather than rely on a mirror effect here.
   $effect(() => {
-    if (state.view !== view) state.setView(view);
+    if (editorState.view !== view) editorState.setView(view);
   });
 
   // Action handlers used by the toolbar.
   function handleUndo() {
-    const label = state.undo();
+    const label = editorState.undo();
     announcer.announce(label ? `Undid: ${label}` : 'Undid last edit');
   }
 
   function handleRedo() {
-    const label = state.redo();
+    const label = editorState.redo();
     announcer.announce(label ? `Redid: ${label}` : 'Redid edit');
   }
 
   function handleRevert() {
-    state.revert();
+    editorState.revert();
     announcer.announce('Reverted to original schema');
   }
 
@@ -227,16 +229,22 @@
   role="region"
   aria-label="JSON Schema editor"
 >
-  <JsonSchemaToolbar {state} onUndo={handleUndo} onRedo={handleRedo} onRevert={handleRevert} />
+  <JsonSchemaToolbar
+    state={editorState}
+    localValidationErrorCount={toolbarValidationErrorCount}
+    onUndo={handleUndo}
+    onRedo={handleRedo}
+    onRevert={handleRevert}
+  />
 
   <Tabs bind:value={view}>
     <TabList label="Editor view">
       <Tab value="form">Form</Tab>
       <Tab value="json">JSON</Tab>
       <Tab value="diff">
-        Diff{#if state.hasChanges}<span class="cinder-sr-only">, has changes</span>{/if}
+        Diff{#if editorState.hasChanges}<span class="cinder-sr-only">, has changes</span>{/if}
         {#snippet trailing()}
-          {#if state.hasChanges}
+          {#if editorState.hasChanges}
             <Badge variant="neutral" aria-hidden="true">●</Badge>
           {/if}
         {/snippet}
@@ -244,13 +252,17 @@
     </TabList>
 
     <TabPanel value="form">
-      <FormView {state} idPrefix={`${id}-form`} />
+      <FormView
+        state={editorState}
+        idPrefix={`${id}-form`}
+        onvalidationerrorcount={(count) => (localValidationErrorCount = count)}
+      />
     </TabPanel>
     <TabPanel value="json">
-      <JsonView {state} idPrefix={`${id}-json`} />
+      <JsonView state={editorState} idPrefix={`${id}-json`} />
     </TabPanel>
     <TabPanel value="diff">
-      <DiffView {state} />
+      <DiffView state={editorState} />
     </TabPanel>
   </Tabs>
 </div>

package/src/components/json-schema-editor/json-schema-editor.css

@@ -202,7 +202,11 @@
     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);
+    padding-inline-end: var(--cinder-space-3);
+    padding-inline-start: calc(
+      var(--cinder-space-3) + var(--cinder-jse-property-depth, 0) * var(--cinder-space-4)
+    );
     min-height: var(--cinder-button-height-md);
   }
 
@@ -271,6 +275,7 @@
     flex-direction: column;
     gap: var(--cinder-space-3);
     padding: var(--cinder-space-3) var(--cinder-space-3) var(--cinder-space-4);
+    margin-inline-start: calc(var(--cinder-jse-property-depth, 0) * var(--cinder-space-4));
     background: transparent;
   }
 

package/src/components/json-schema-editor/json-schema-editor.examples.json

@@ -7,7 +7,7 @@
       "id": "basic",
       "title": "Basic JSON Schema editor",
       "description": "Edit a flat object schema with form, JSON, and diff views.",
-      "code": "<script lang=\"ts\">\n  import { JsonSchemaEditor } from '@lostgradient/cinder/json-schema-editor';\n  import type { JsonSchemaValue } from '@lostgradient/cinder/json-schema-editor';\n  const personSchema: JsonSchemaValue = {\n    $schema: 'https://json-schema.org/draft/2020-12/schema',\n    title: 'Person',\n    type: 'object',\n    properties: {\n      name: { type: 'string', title: 'Full name', minLength: 1 },\n      age: { type: 'integer', minimum: 0 },\n      email: { type: 'string', format: 'email' },\n    },\n    required: ['name'],\n  };\n</script>\n\n<JsonSchemaEditor id=\"basic-jse\" schema={personSchema} />\n"
+      "code": "<script lang=\"ts\">\n  import { JsonSchemaEditor } from '@lostgradient/cinder/json-schema-editor';\n  import type { JsonSchemaValue } from '@lostgradient/cinder/json-schema-editor';\n\n  const personSchema: JsonSchemaValue = {\n    $schema: 'https://json-schema.org/draft/2020-12/schema',\n    title: 'Person',\n    type: 'object',\n    properties: {\n      name: { type: 'string', title: 'Full name', minLength: 1 },\n      age: { type: 'integer', minimum: 0 },\n      email: { type: 'string', format: 'email' },\n    },\n    required: ['name'],\n  };\n</script>\n\n<JsonSchemaEditor id=\"jse\" schema={personSchema} />\n"
     },
     {
       "id": "composition",

package/src/components/json-schema-editor/json-schema-editor.types.ts

@@ -42,5 +42,6 @@ export type JsonSchemaEditorProps = {
   onchange?: (event: JsonSchemaEditorChangeEvent) => void;
   onrevert?: (event: JsonSchemaEditorRevertEvent) => void;
   onvalidate?: (result: JsonSchemaValidationResult) => void;
+  /** Additional class merged onto the `.cinder-jse` root element. */
   class?: string;
 };

package/src/components/json-schema-editor/json-schema-toolbar.svelte

@@ -3,6 +3,7 @@
 
   export type JsonSchemaToolbarProps = {
     state: EditorState;
+    localValidationErrorCount?: number;
     onUndo?: () => void;
     onRedo?: () => void;
     onRevert?: () => void;
@@ -20,6 +21,7 @@
 
   let {
     state: editorState,
+    localValidationErrorCount = 0,
     onUndo,
     onRedo,
     onRevert,
@@ -27,6 +29,7 @@
   }: JsonSchemaToolbarProps = $props();
 
   const validationBadgeVariant = $derived.by(() => {
+    if (localValidationErrorCount > 0) return 'danger' as const;
     switch (editorState.validationStatus) {
       case 'valid':
         return 'success' as const;
@@ -38,6 +41,9 @@
   });
 
   const validationBadgeText = $derived.by(() => {
+    if (localValidationErrorCount > 0) {
+      return `Invalid — ${localValidationErrorCount} field ${localValidationErrorCount === 1 ? 'error' : 'errors'}`;
+    }
     switch (editorState.validationStatus) {
       case 'valid':
         return `Valid (${editorState.activeDraft})`;

package/src/components/json-schema-editor/json-view.svelte

@@ -73,7 +73,7 @@
   />
 
   {#if draftErrorMessage}
-    <Alert variant="error">
+    <Alert variant="danger">
       <pre class="cinder-jse-json-view__errors">{draftErrorMessage}</pre>
     </Alert>
   {/if}

package/src/components/json-schema-editor/property-editor.svelte

@@ -12,6 +12,8 @@
     depth?: number;
     /** Whether the editor is read-only. */
     readonly?: boolean;
+    /** Called when nested form-only validation errors change. */
+    onvalidationerrorcount?: ((count: number) => void) | undefined;
     /** Called whenever the value changes. */
     onchange: (next: JsonSchemaValue, options?: { coalesceKey?: string; label?: string }) => void;
     class?: string;
@@ -83,6 +85,7 @@
 </script>
 
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import { classNames } from '../../utilities/class-names.ts';
   import Alert from '../alert/alert.svelte';
   import Badge from '../badge/badge.svelte';
@@ -102,6 +105,7 @@
     path,
     depth = 0,
     readonly = false,
+    onvalidationerrorcount,
     onchange,
     class: className,
   }: PropertyEditorProps = $props();
@@ -139,7 +143,7 @@
   // ===== Mutation helpers =====
   function patch(
     edits: Partial<JsonSchemaObject>,
-    opts?: { coalesceKey?: string; label?: string },
+    opts: { coalesceKey?: string; label?: string } | undefined = undefined,
   ) {
     if (readonly) return;
     const next: JsonSchemaObject = { ...objectValue, ...edits };
@@ -237,6 +241,29 @@
   }
 
   // ===== Children (object/array) =====
+  let childValidationCounts = $state<Record<string, number>>({});
+  const validationErrorCount = $derived(
+    Object.values(childValidationCounts).reduce((total, count) => total + count, 0),
+  );
+
+  $effect(() => {
+    onvalidationerrorcount?.(validationErrorCount);
+  });
+
+  onDestroy(() => {
+    onvalidationerrorcount?.(0);
+  });
+
+  function setChildValidationErrorCount(key: string, count: number): void {
+    if ((childValidationCounts[key] ?? 0) === count) return;
+    if (count === 0) {
+      const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+      childValidationCounts = remainingChildCounts;
+      return;
+    }
+    childValidationCounts = { ...childValidationCounts, [key]: count };
+  }
+
   function patchProperties(properties: Record<string, JsonSchemaValue>, required: string[]) {
     const edits: Partial<JsonSchemaObject> = { properties };
     edits.required = required.length > 0 ? required : undefined;
@@ -304,8 +331,12 @@
 
   function removeCompositionBranch(keyword: 'allOf' | 'anyOf' | 'oneOf', branchIndex: number) {
     const list = Array.isArray(objectValue[keyword]) ? [...objectValue[keyword]!] : [];
+    const removedBranchKey = compositionBranchKeys[keyword][branchIndex];
+    const nextBranchKeys = [...compositionBranchKeys[keyword]];
     list.splice(branchIndex, 1);
-    setKeywordKeys(keyword, compositionBranchKeys[keyword].toSpliced(branchIndex, 1));
+    nextBranchKeys.splice(branchIndex, 1);
+    setKeywordKeys(keyword, nextBranchKeys);
+    if (removedBranchKey) setChildValidationErrorCount(`${keyword}:${removedBranchKey}`, 0);
     patchComposition(keyword, list.length > 0 ? list : undefined);
   }
 
@@ -402,6 +433,7 @@
           path={`${path}/properties`}
           properties={objectValue.properties ?? {}}
           required={objectValue.required ?? []}
+          onvalidationerrorcount={(count) => setChildValidationErrorCount('properties', count)}
           onchange={patchProperties}
         />
       </div>
@@ -417,6 +449,7 @@
           depth={depth + 1}
           {readonly}
           value={objectValue.items ?? {}}
+          onvalidationerrorcount={(count) => setChildValidationErrorCount('items', count)}
           onchange={(next) => setItems(next)}
         />
       </div>
@@ -509,12 +542,15 @@
           <summary class="cinder-jse-section__title">{keyword}</summary>
           <div class="cinder-jse-section__body">
             {#each objectValue[keyword] as branch, branchIndex (compositionBranchKeys[keyword][branchIndex])}
+              {@const branchKey = compositionBranchKeys[keyword][branchIndex]}
               <PropertyEditor
                 idPrefix={`${idPrefix}-${keyword}-${branchIndex}`}
                 path={`${path}/${keyword}/${branchIndex}`}
                 depth={depth + 1}
                 {readonly}
                 value={branch}
+                onvalidationerrorcount={(count) =>
+                  setChildValidationErrorCount(`${keyword}:${branchKey}`, count)}
                 onchange={(next) => {
                   const list = [...objectValue[keyword]!];
                   list[branchIndex] = next;

package/src/components/json-schema-editor/property-list-validation.ts

@@ -0,0 +1,10 @@
+export function calculatePropertyValidationErrorCount(
+  propertyNames: string[],
+  childValidationCounts: Record<string, number>,
+  hasRenameError: boolean,
+): number {
+  return (
+    (hasRenameError ? 1 : 0) +
+    propertyNames.reduce((total, key) => total + (childValidationCounts[key] ?? 0), 0)
+  );
+}