@lostgradient/cinder 0.3.0 → 0.4.0

package/src/components/input/input.svelte

@@ -18,19 +18,16 @@
 <script lang="ts">
   import type { InputProps } from './input.types.ts';
 
-  import {
-    ariaInvalid,
-    composeDescribedBy,
-    describeId,
-    errorId as buildErrorId,
-  } from '../../_internal/field-control.ts';
+  import { resolveFieldControl } from '../../_internal/field-control.ts';
   import { getFormFieldContext } from '../../_internal/form-field-context.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { devWarn } from '../../utilities/dev-warn.ts';
+  import { commitValue } from '../../utilities/value-change.ts';
 
   let {
     id,
     value = $bindable(''),
+    onValueChange,
     label,
     description,
     error,
@@ -43,6 +40,8 @@
     leadingInteractive = false,
     trailingInteractive = false,
     'aria-describedby': consumerDescribedBy,
+    'aria-invalid': consumerInvalid,
+    oninput: consumerOninput,
     ...rest
   }: InputProps = $props();
 
@@ -56,32 +55,65 @@
     }
   });
 
-  const defaultDescriptionId = $derived(describeId(id, !!description));
-  const defaultErrorId = $derived(buildErrorId(id, !!error));
-  const ownDescriptionId = $derived(
-    description && defaultDescriptionId === context?.descriptionId
-      ? `${id}-input-description`
-      : defaultDescriptionId,
+  const field = $derived(
+    resolveFieldControl({
+      id,
+      generatedId: id,
+      context,
+      hasDescription: !!description,
+      hasError: !!error,
+      localIdNamespace: 'input',
+      consumerDescribedBy,
+      consumerInvalid,
+      required,
+      disabled,
+    }),
   );
-  const ownErrorId = $derived(
-    error && defaultErrorId === context?.errorId ? `${id}-input-error` : defaultErrorId,
-  );
-  const resolvedDescriptionId = $derived(ownDescriptionId ?? context?.descriptionId);
-  const resolvedErrorId = $derived(ownErrorId ?? context?.errorId);
-  const describedBy = $derived(
-    composeDescribedBy(resolvedDescriptionId, resolvedErrorId, consumerDescribedBy),
-  );
-  const resolvedAriaInvalid = $derived(
-    error ? ariaInvalid(true) : (context?.invalid ?? rest['aria-invalid'] ?? ariaInvalid(false)),
-  );
-  const resolvedRequired = $derived(required ?? context?.required ?? false);
-  const resolvedDisabled = $derived(disabled ?? context?.disabled ?? false);
+  const ownDescriptionId = $derived(field.ownDescriptionId);
+  const ownErrorId = $derived(field.ownErrorId);
+  const describedBy = $derived(field.describedBy);
+  const resolvedAriaInvalid = $derived(field.ariaInvalid);
+  const resolvedRequired = $derived(field.required);
+  const resolvedDisabled = $derived(field.disabled);
 
   const isNativeDateInput = $derived(type === 'date');
   const rendersNativeDateIcon = $derived(isNativeDateInput && !trailing);
   const hasTrailing = $derived(!!trailing || isNativeDateInput);
   const hasGroupWrapper = $derived(!!leading || hasTrailing);
-  const isInvalid = $derived(resolvedAriaInvalid === 'true' || resolvedAriaInvalid === true);
+  const isInvalid = $derived(resolvedAriaInvalid === 'true');
+  let inputNode: HTMLInputElement | undefined = $state();
+  let resetSyncTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  function syncValueAfterFormReset(): void {
+    if (resetSyncTimeout !== undefined) clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (inputNode) value = inputNode.value;
+    }, 0);
+  }
+
+  $effect(() => {
+    const form = inputNode?.form;
+    if (!form) return;
+
+    form.addEventListener('reset', syncValueAfterFormReset);
+    return () => {
+      form.removeEventListener('reset', syncValueAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+
+  function handleInput(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement;
+    const committed = commitValue(target.value, onValueChange, (next) => {
+      value = next;
+    });
+    target.value = committed;
+    consumerOninput?.(event as Parameters<NonNullable<InputProps['oninput']>>[0]);
+  }
 </script>
 
 {#snippet calendarIcon()}
@@ -106,16 +138,18 @@
 
 {#snippet inputElement()}
   <input
+    bind:this={inputNode}
     {id}
     {type}
+    {...rest}
     disabled={resolvedDisabled}
     required={resolvedRequired}
-    bind:value
+    {value}
+    oninput={handleInput}
     class={classNames('cinder-input', className)}
     data-cinder-native-date={rendersNativeDateIcon ? '' : undefined}
     aria-invalid={resolvedAriaInvalid}
     aria-describedby={describedBy}
-    {...rest}
   />
 {/snippet}
 
@@ -123,6 +157,9 @@
   {#if label}
     <label for={id} class="cinder-input-field__label" data-disabled={resolvedDisabled || undefined}>
       {label}
+      {#if resolvedRequired}
+        <span class="cinder-_required-marker" aria-hidden="true">*</span>
+      {/if}
     </label>
   {/if}
 

package/src/components/input/input.types.ts

@@ -42,6 +42,8 @@ export type InputProps = HTMLInputAttributes &
     id: string;
     /** Bindable current text value of the input. */
     value: string;
+    /** Intercept a proposed value before the bindable value is written. Return a replacement value to transform it. */
+    onValueChange?: (next: string) => string | void;
     /** Visible label text rendered above the input and linked via `for`/`id`. */
     label?: string;
     /** Helper text rendered below the input and associated via `aria-describedby`. */

package/src/components/invocation-rule-builder/README.md

@@ -79,25 +79,25 @@ A rule fires when ALL of its conditions match (implicit AND). Boolean grouping,
 
 ## Modes
 
-Pass `readonly={true}` to render a read-only summary instead of editable controls. This is useful for review screens where the rule is being confirmed before saving.
+Pass `readonly={true}` to render a read-only summary instead of editable controls. Schema-driven usage is read-only because callbacks are not representable in JSON Schema. Runtime consumers can render editable controls by passing `onchange` and leaving `readonly` false.
 
 ## Props
 
 <!-- generated:props:start -->
 
-| Prop                | Type       | Required | Default | Description                                                                                                                                                                                                                                         |
-| ------------------- | ---------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `addActionLabel`    | `string`   | no       | —       | Label for the "Add action" button. Defaults to "Add action".                                                                                                                                                                                        |
-| `addConditionLabel` | `string`   | no       | —       | Label for the "Add condition" button. Defaults to "Add condition".                                                                                                                                                                                  |
-| `addRuleLabel`      | `string`   | no       | —       | Label for the "Add rule" button. Defaults to "Add rule".                                                                                                                                                                                            |
-| `class`             | `string`   | no       | —       | Additional CSS classes applied to the root element.                                                                                                                                                                                                 |
-| `label`             | `string`   | no       | —       | Accessible label for the entire rule builder region.                                                                                                                                                                                                |
-| `readonly`          | `boolean`  | no       | —       | When true, renders a readonly summary of each rule instead of editable controls. Default is false (editable mode).                                                                                                                                  |
-| `actionOptions`     | `(opaque)` | yes      | —       | Options for the action target selector. Consumer-provided list of targets, e.g. review-agent slugs or step identifiers. Not expressible in JSON Schema; see the component types for the signature.                                                  |
-| `fieldOptions`      | `(opaque)` | yes      | —       | Options for the condition field selector. Consumer-provided list of fields that a condition can test, e.g. "path", "label", "author". Not expressible in JSON Schema; see the component types for the signature.                                    |
-| `onchange`          | `(opaque)` | yes      | —       | 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. Not expressible in JSON Schema; see the component types for the signature. |
-| `operatorOptions`   | `(opaque)` | yes      | —       | Options for the condition operator selector. Consumer-provided list of operators, e.g. "matches", "is", "is-not", "contains". Not expressible in JSON Schema; see the component types for the signature.                                            |
-| `rules`             | `(opaque)` | yes      | —       | The current list of automation rules. Controlled — pass the updated list returned from `onchange` back into this prop to commit a change. Not expressible in JSON Schema; see the component types for the signature.                                |
+| Prop                | Type                                                                                                                                                                     | Required | Default | Description                                                                                                                                                                                                                                                                                                                                             |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `actionOptions`     | { label: `string`; value: `string` }[]                                                                                                                                   | yes      | —       | Options for the action target selector. Consumer-provided list of targets, e.g. review-agent slugs or step identifiers.                                                                                                                                                                                                                                 |
+| `addActionLabel`    | `string`                                                                                                                                                                 | no       | —       | Label for the "Add action" button. Defaults to "Add action".                                                                                                                                                                                                                                                                                            |
+| `addConditionLabel` | `string`                                                                                                                                                                 | no       | —       | Label for the "Add condition" button. Defaults to "Add condition".                                                                                                                                                                                                                                                                                      |
+| `addRuleLabel`      | `string`                                                                                                                                                                 | no       | —       | Label for the "Add rule" button. Defaults to "Add rule".                                                                                                                                                                                                                                                                                                |
+| `class`             | `string`                                                                                                                                                                 | no       | —       | Additional CSS classes applied to the root element.                                                                                                                                                                                                                                                                                                     |
+| `fieldOptions`      | { label: `string`; value: `string` }[]                                                                                                                                   | yes      | —       | Options for the condition field selector. Consumer-provided list of fields that a condition can test, e.g. "path", "label", "author".                                                                                                                                                                                                                   |
+| `label`             | `string`                                                                                                                                                                 | no       | —       | Accessible label for the entire rule builder region.                                                                                                                                                                                                                                                                                                    |
+| `operatorOptions`   | { label: `string`; value: `string` }[]                                                                                                                                   | yes      | —       | Options for the condition operator selector. Consumer-provided list of operators, e.g. "matches", "is", "is-not", "contains".                                                                                                                                                                                                                           |
+| `readonly`          | `true`                                                                                                                                                                   | yes      | —       | Must be true for schema-driven usage because editable mode requires the unsupported `onchange` callback. Runtime consumers may omit this when passing `onchange` directly.                                                                                                                                                                              |
+| `rules`             | { actions: { id: `string`; target: `string` }[]; conditions: { field: `string`; id: `string`; operator: `string`; value: `string` }[]; id: `string`; label: `string` }[] | yes      | —       | The current list of automation rules. Controlled — pass the updated list returned from `onchange` back into this prop to commit a change.                                                                                                                                                                                                               |
+| `onchange`          | `(opaque)`                                                                                                                                                               | no       | —       | 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. Not expressible in JSON Schema; see the component types for the signature. |
 
 <!-- generated:props:end -->
 

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

@@ -6,6 +6,7 @@ export type {
   InvocationRule,
   InvocationRuleAction,
   InvocationRuleBuilderProps,
+  InvocationRuleBuilderSchemaProps,
   InvocationRuleChange,
   InvocationRuleCondition,
   InvocationRuleOption,

package/src/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);

package/src/components/invocation-rule-builder/invocation-rule-builder.svelte

@@ -2,7 +2,7 @@
   /**
    * @cinder
    * @category form
-   * @status alpha
+   * @status beta
    * @purpose Render and edit conditional automation rules composed of conditions and actions.
    * @tag automation
    * @tag rules
@@ -14,6 +14,7 @@
     InvocationRule,
     InvocationRuleAction,
     InvocationRuleBuilderProps,
+    InvocationRuleBuilderSchemaProps,
     InvocationRuleChange,
     InvocationRuleCondition,
     InvocationRuleOption,
@@ -52,9 +53,11 @@
   const sectionAriaLabel = $derived(
     ariaLabelledby ? undefined : (ariaLabel ?? label ?? 'Invocation rules'),
   );
+  const effectiveReadonly = $derived(readonly || onchange === undefined);
 
   /** Announcement text for the live region. */
   let announcement = $state('');
+  let ruleLabelDrafts = $state<Record<string, { baseLabel: string; value: string }>>({});
 
   function announce(message: string): void {
     announcement = '';
@@ -91,14 +94,14 @@
       { id: ruleId, label: `Rule ${rules.length + 1}`, conditions: [], actions: [] },
     ];
     const change: InvocationRuleChange = { type: 'add-rule', ruleId };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
     announce('Rule added.');
   }
 
   function handleRemoveRule(ruleId: string, ruleLabel: string, ruleIndex: number): void {
     const nextRules = rules.filter((rule) => rule.id !== ruleId);
     const change: InvocationRuleChange = { type: 'remove-rule', ruleId };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
     announce(`${ruleLabel} removed.`);
 
     // Move focus to the previous rule's remove button, or the add-rule button.
@@ -121,10 +124,26 @@
     const [moved] = nextRules.splice(fromIndex, 1);
     nextRules.splice(toIndex, 0, moved!);
     const change: InvocationRuleChange = { 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: string, label: string): void {
+    const nextLabel = label.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: InvocationRuleChange = { type: 'rename-rule', ruleId };
+    onchange?.(nextRules, change);
+  }
+
+  function ruleLabelDraft(rule: InvocationRule): string {
+    const draft = ruleLabelDrafts[rule.id];
+    return draft?.baseLabel === rule.label ? draft.value : rule.label;
+  }
+
   // ---------------------------------------------------------------------------
   // Condition handlers
   // ---------------------------------------------------------------------------
@@ -141,7 +160,7 @@
       ],
     }));
     const change: InvocationRuleChange = { type: 'add-condition', ruleId, conditionId };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
     announce('Condition added.');
   }
 
@@ -156,7 +175,7 @@
       conditions: rule.conditions.filter((condition) => condition.id !== conditionId),
     }));
     const change: InvocationRuleChange = { type: 'remove-condition', ruleId, conditionId };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
     announce('Condition removed.');
 
     tick().then(() => {
@@ -189,7 +208,7 @@
       conditionId,
       field,
     };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
   }
 
   // ---------------------------------------------------------------------------
@@ -204,7 +223,7 @@
       actions: [...rule.actions, { id: actionId, target: firstTarget }],
     }));
     const change: InvocationRuleChange = { type: 'add-action', ruleId, actionId };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
     announce('Action added.');
   }
 
@@ -219,7 +238,7 @@
       actions: rule.actions.filter((action) => action.id !== actionId),
     }));
     const change: InvocationRuleChange = { type: 'remove-action', ruleId, actionId };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
     announce('Action removed.');
 
     tick().then(() => {
@@ -242,7 +261,7 @@
       ),
     }));
     const change: InvocationRuleChange = { type: 'update-action', ruleId, actionId };
-    onchange(nextRules, change);
+    onchange?.(nextRules, change);
   }
 
   // ---------------------------------------------------------------------------
@@ -280,9 +299,36 @@
   {#each rules as rule, ruleIndex (rule.id)}
     <div class="cinder-invocation-rule-builder__rule" data-irb-rule={ruleIndex}>
       <div class="cinder-invocation-rule-builder__rule-header">
-        <span class="cinder-invocation-rule-builder__rule-label">{rule.label}</span>
+        {#if effectiveReadonly}
+          <h3 class="cinder-invocation-rule-builder__rule-label">{rule.label}</h3>
+        {:else}
+          <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"
+              value={ruleLabelDraft(rule)}
+              aria-label={`Rule name for ${rule.label}`}
+              oninput={(event) =>
+                (ruleLabelDrafts = {
+                  ...ruleLabelDrafts,
+                  [rule.id]: {
+                    baseLabel: rule.label,
+                    value: (event.target as HTMLInputElement).value,
+                  },
+                })}
+              onblur={(event) =>
+                handleRenameRule(rule.id, (event.target as HTMLInputElement).value)}
+              onkeydown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  (event.currentTarget as HTMLInputElement).blur();
+                }
+              }}
+            />
+          </label>
+        {/if}
 
-        {#if !readonly}
+        {#if !effectiveReadonly}
           <div class="cinder-invocation-rule-builder__rule-controls">
             <button
               type="button"
@@ -329,8 +375,13 @@
         >
           Conditions
         </span>
+        {#if !effectiveReadonly && rule.conditions.length === 0}
+          <p class="cinder-invocation-rule-builder__validation" role="status">
+            Add at least one condition or this rule will always fire.
+          </p>
+        {/if}
 
-        {#if readonly}
+        {#if effectiveReadonly}
           <div
             class="cinder-invocation-rule-builder__summary"
             aria-label={`Conditions for ${rule.label}`}
@@ -393,6 +444,7 @@
                   type="text"
                   class="cinder-invocation-rule-builder__condition-value"
                   aria-label={`Value for condition ${conditionIndex + 1} of ${rule.label}`}
+                  placeholder="Value to compare"
                   value={condition.value}
                   oninput={(event) =>
                     handleUpdateCondition(
@@ -444,8 +496,13 @@
         >
           Actions
         </span>
+        {#if !effectiveReadonly && rule.actions.length === 0}
+          <p class="cinder-invocation-rule-builder__validation" role="status">
+            Add at least one action for this rule.
+          </p>
+        {/if}
 
-        {#if readonly}
+        {#if effectiveReadonly}
           <div
             class="cinder-invocation-rule-builder__summary"
             aria-label={`Actions for ${rule.label}`}
@@ -518,7 +575,7 @@
     </div>
   {/each}
 
-  {#if !readonly}
+  {#if !effectiveReadonly}
     <button
       type="button"
       class="cinder-invocation-rule-builder__add-btn cinder-invocation-rule-builder__add-rule-btn"
@@ -529,7 +586,7 @@
     </button>
   {/if}
 
-  {#if rules.length === 0 && readonly}
+  {#if rules.length === 0 && effectiveReadonly}
     <p class="cinder-invocation-rule-builder__empty">No rules configured.</p>
   {/if}
 </section>