@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -3,6 +3,8 @@ 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. */
@@ -18,6 +20,8 @@ export type InvocationRuleCondition = {
 /**
  * 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. */
@@ -30,6 +34,8 @@ export type InvocationRuleAction = {
  * 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. */
@@ -44,6 +50,8 @@ export type InvocationRule = {
 
 /**
  * An option in a field, operator, or action-target select list.
+ *
+ * @schemaObject
  */
 export type InvocationRuleOption = {
   /** The value stored on the condition or action. */
@@ -58,6 +66,7 @@ export type InvocationRuleOption = {
  */
 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 }
@@ -80,7 +89,7 @@ export type InvocationRuleChange =
  * prop. Every user action calls `onchange` with the next rule array and
  * a change descriptor; the consumer decides what to persist.
  */
-export type InvocationRuleBuilderProps = Omit<
+type InvocationRuleBuilderBaseProps = Omit<
   HTMLAttributes<HTMLElement>,
   'class' | 'children' | 'onchange'
 > & {
@@ -91,11 +100,92 @@ export type InvocationRuleBuilderProps = Omit<
   rules: InvocationRule[];
 
   /**
-   * 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.
+   * 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.
    */
-  onchange: (nextRules: InvocationRule[], change: InvocationRuleChange) => void;
+  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
@@ -116,10 +206,11 @@ export type InvocationRuleBuilderProps = Omit<
   actionOptions: InvocationRuleOption[];
 
   /**
-   * When true, renders a readonly summary of each rule instead of editable
-   * controls. Default is false (editable mode).
+   * 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?: boolean;
+  readonly: true;
 
   /**
    * Label for the "Add rule" button. Defaults to "Add rule".

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-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)
+  );
+}

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

@@ -8,16 +8,19 @@
     path: string;
     depth?: number;
     readonly?: boolean;
+    onvalidationerrorcount?: ((count: number) => void) | undefined;
     onchange: (properties: Record<string, JsonSchemaValue>, required: string[]) => void;
   };
 </script>
 
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import Alert from '../alert/alert.svelte';
   import Button from '../button/button.svelte';
   import Chip from '../chip/chip.svelte';
   import Input from '../input/input.svelte';
   import PropertyEditor from './property-editor.svelte';
+  import { calculatePropertyValidationErrorCount } from './property-list-validation.ts';
 
   let {
     idPrefix,
@@ -26,6 +29,7 @@
     path,
     depth = 0,
     readonly = false,
+    onvalidationerrorcount,
     onchange,
   }: PropertyListProps = $props();
 
@@ -36,6 +40,23 @@
   let draftNames = $state<Record<string, string>>({});
   let renameError = $state<string | null>(null);
   let expanded = $state<Record<string, boolean>>({});
+  let childValidationCounts = $state<Record<string, number>>({});
+
+  const validationErrorCount = $derived(
+    calculatePropertyValidationErrorCount(
+      propertyNames,
+      childValidationCounts,
+      renameError !== null,
+    ),
+  );
+
+  $effect(() => {
+    onvalidationerrorcount?.(validationErrorCount);
+  });
+
+  onDestroy(() => {
+    onvalidationerrorcount?.(0);
+  });
 
   function getDraftName(key: string): string {
     return draftNames[key] ?? key;
@@ -79,6 +100,11 @@
       expanded[draft] = true;
       delete expanded[oldKey];
     }
+    const childCount = childValidationCounts[oldKey];
+    if (childCount !== undefined) {
+      const { [oldKey]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+      childValidationCounts = { ...remainingChildCounts, [draft]: childCount };
+    }
     onchange(next, nextRequired);
   }
 
@@ -89,9 +115,26 @@
     const nextRequired = required.filter((name) => name !== key);
     delete draftNames[key];
     delete expanded[key];
+    const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+    childValidationCounts = remainingChildCounts;
     onchange(next, nextRequired);
   }
 
+  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 toggleExpanded(key: string, isOpen: boolean): void {
+    expanded[key] = !isOpen;
+    if (isOpen) setChildValidationErrorCount(key, 0);
+  }
+
   function moveProperty(key: string, direction: -1 | 1) {
     if (readonly) return;
     const index = propertyNames.indexOf(key);
@@ -162,7 +205,7 @@
 
 <div class="cinder-jse-property-list">
   {#if renameError}
-    <Alert variant="error">{renameError}</Alert>
+    <Alert variant="danger">{renameError}</Alert>
   {/if}
 
   {#if propertyNames.length === 0}
@@ -180,13 +223,14 @@
       interactive" violation.
     -->
     <div class="cinder-jse-property-row" data-cinder-required={isRequired ? '' : undefined}>
-      <div class="cinder-jse-property-row__summary">
+      <div class="cinder-jse-property-row__summary" style={`--cinder-jse-property-depth: ${depth}`}>
         <button
           type="button"
           class="cinder-jse-property-row__trigger"
+          aria-label={`${isOpen ? 'Collapse' : 'Expand'} ${key} property`}
           aria-expanded={isOpen}
           aria-controls={panelId}
-          onclick={() => (expanded[key] = !isOpen)}
+          onclick={() => toggleExpanded(key, isOpen)}
         >
           <span class="cinder-jse-property-row__chevron" aria-hidden="true">▸</span>
           <span class="cinder-jse-property-row__name">{key}</span>
@@ -248,6 +292,7 @@
             depth={depth + 1}
             {readonly}
             value={properties[key] ?? {}}
+            onvalidationerrorcount={(count) => setChildValidationErrorCount(key, count)}
             onchange={(next) => setPropertySchema(key, next)}
           />
         </div>