@lostgradient/cinder 0.9.0 → 0.12.0

package/src/components/schedule-builder/schedule-builder.types.ts

@@ -0,0 +1,137 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * The unit for an interval recurrence.
+ */
+export type ScheduleIntervalUnit = 'minutes' | 'hours' | 'days' | 'weeks';
+
+/**
+ * The emitted, lossless recurrence value. There are only ever TWO value
+ * variants — `cron` and `interval` — even though the UI offers a third
+ * "presets" authoring mode. Presets are sugar that lower to one of these two
+ * (e.g. "every 15 minutes" → `interval`; "daily at 09:00" → `cron`); there is
+ * no `mode: 'preset'` in the value a consumer receives.
+ */
+export type ScheduleValue =
+  | {
+      /** Discriminator: a 5-field cron recurrence. */
+      mode: 'cron';
+      /** The 5-field cron expression, space-separated (minute hour day-of-month month day-of-week). */
+      expression: string;
+    }
+  | {
+      /** Discriminator: a fixed-interval recurrence. */
+      mode: 'interval';
+      /** How many `unit`s between fires. A positive integer. */
+      every: number;
+      /** The interval unit. */
+      unit: ScheduleIntervalUnit;
+    };
+
+/**
+ * The authoring mode surfaced in the UI's SegmentedControl. Distinct from
+ * {@link ScheduleValue}'s `mode` discriminator: `presets` is an authoring
+ * convenience that emits a `cron` or `interval` value.
+ */
+export type ScheduleAuthoringMode = 'presets' | 'cron' | 'interval';
+
+/**
+ * A single computed upcoming fire, as returned by the injected
+ * {@link ScheduleBuilderProps.computeNextFires} callback. The component never
+ * computes or formats times itself (it ships no date/cron dependency): the
+ * consumer returns already-formatted display strings.
+ */
+export type ScheduleFire = {
+  /** Stable identity for the keyed preview list. */
+  id: string;
+  /** Human-readable label for this fire, e.g. "Mon Jun 1, 09:00". */
+  label: string;
+};
+
+/**
+ * Props for the ScheduleBuilder component.
+ *
+ * ScheduleBuilder is a presentational recurrence-definition control. It owns
+ * no scheduling execution, persistence, or date math. It is date-library-free:
+ * the "next N fires" preview is produced by the injected `computeNextFires`
+ * callback, and degrades gracefully (the preview is hidden) when the callback
+ * is absent. Scope is recurrence only — overlap policy, jitter, and backfill
+ * belong to the consumer's surrounding form.
+ */
+export type ScheduleBuilderProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'class' | 'children' | 'onchange'
+> & {
+  /**
+   * The current recurrence value (controlled). Pass the value returned from
+   * `onchange` back in to commit an edit. When omitted, the component starts
+   * from a sensible default (`interval`, every 15 minutes).
+   */
+  value?: ScheduleValue | undefined;
+  /**
+   * Called whenever the user edits the recurrence. Receives the next lossless
+   * {@link ScheduleValue}. The consumer owns persistence and validation.
+   */
+  onchange?: ((value: ScheduleValue) => void) | undefined;
+  /**
+   * Injected next-fires computation. The component passes the current value and
+   * the requested count and renders whatever fires the consumer returns. When
+   * omitted, the preview list is hidden (the component ships no date logic).
+   */
+  computeNextFires?: ((value: ScheduleValue, count: number) => ScheduleFire[]) | undefined;
+  /**
+   * How many upcoming fires to request from `computeNextFires`. Defaults to 5.
+   */
+  previewCount?: number | undefined;
+  /**
+   * Timezone label rendered in the always-visible timezone display slot, e.g.
+   * "America/New_York" or "UTC". Purely presentational — the component does not
+   * interpret it. When omitted, provide the `timezone` snippet instead; if
+   * neither is supplied the slot shows a "Not set" placeholder (the slot itself
+   * is always rendered).
+   */
+  timezoneLabel?: string | undefined;
+  /**
+   * Custom content for the timezone display slot. Takes precedence over
+   * `timezoneLabel` when both are supplied.
+   */
+  timezone?: Snippet | undefined;
+  /** Accessible label for the whole control. Defaults to "Schedule". */
+  label?: string | undefined;
+  /** Additional CSS classes applied to the root element. */
+  class?: string | undefined;
+};
+
+/**
+ * Schema-facing mirror of {@link ScheduleValue}.
+ * @schemaObject
+ */
+export type ScheduleValueSchema =
+  | { mode: 'cron'; expression: string }
+  | { mode: 'interval'; every: number; unit: ScheduleIntervalUnit };
+
+/**
+ * Cinder-specific schema surface for ScheduleBuilder.
+ *
+ * The `onchange`, `computeNextFires`, and `timezone` props are documented but
+ * unsupported by JSON Schema because functions and snippets cannot be modeled.
+ */
+export type ScheduleBuilderSchemaProps = {
+  /**
+   * The current recurrence value (controlled). When omitted, the component
+   * starts from a sensible default (`interval`, every 15 minutes).
+   * @schemaObject
+   */
+  value?: ScheduleValueSchema | undefined;
+  /**
+   * How many upcoming fires to request from `computeNextFires`. Defaults to 5.
+   */
+  previewCount?: number | undefined;
+  /** Timezone label rendered in the always-visible timezone display slot. */
+  timezoneLabel?: string | undefined;
+  /** Accessible label for the whole control. Defaults to "Schedule". */
+  label?: string | undefined;
+  /** Additional CSS classes applied to the root element. */
+  class?: string | undefined;
+};

package/src/components/schedule-builder/schedule-builder.utilities.ts

@@ -0,0 +1,344 @@
+import type { ScheduleIntervalUnit, ScheduleValue } from './schedule-builder.types.ts';
+
+/** The interval units offered in the interval mode selector, in order. */
+export const INTERVAL_UNITS: readonly ScheduleIntervalUnit[] = [
+  'minutes',
+  'hours',
+  'days',
+  'weeks',
+];
+
+/** Weekday chips for the weekly preset. `value` matches cron day-of-week (0 = Sunday). */
+export const WEEKDAYS: readonly { value: number; short: string; long: string }[] = [
+  { value: 1, short: 'Mon', long: 'Monday' },
+  { value: 2, short: 'Tue', long: 'Tuesday' },
+  { value: 3, short: 'Wed', long: 'Wednesday' },
+  { value: 4, short: 'Thu', long: 'Thursday' },
+  { value: 5, short: 'Fri', long: 'Friday' },
+  { value: 6, short: 'Sat', long: 'Saturday' },
+  { value: 0, short: 'Sun', long: 'Sunday' },
+];
+
+/** The five cron fields, in order, with their valid numeric ranges and hints. */
+export const CRON_FIELDS: readonly {
+  name: string;
+  min: number;
+  max: number;
+  hint: string;
+}[] = [
+  { name: 'Minute', min: 0, max: 59, hint: '0–59' },
+  { name: 'Hour', min: 0, max: 23, hint: '0–23' },
+  { name: 'Day of month', min: 1, max: 31, hint: '1–31' },
+  { name: 'Month', min: 1, max: 12, hint: '1–12' },
+  { name: 'Day of week', min: 0, max: 6, hint: '0–6 (Sun–Sat)' },
+];
+
+/** The default value used when the consumer passes none. */
+export function defaultScheduleValue(): ScheduleValue {
+  return { mode: 'interval', every: 15, unit: 'minutes' };
+}
+
+/** Singularize an interval unit for "every 1 X" phrasing. */
+function singularUnit(unit: ScheduleIntervalUnit): string {
+  return unit.slice(0, -1);
+}
+
+/**
+ * Validate a single cron field value against its field range. Accepts a
+ * wildcard, a step, a range, a comma list, or a plain number. Returns an error
+ * message when invalid, or `undefined` when the field is acceptable.
+ */
+export function validateCronField(rawValue: string, fieldIndex: number): string | undefined {
+  const field = CRON_FIELDS[fieldIndex];
+  if (!field) return 'Unknown field.';
+  const value = rawValue.trim();
+  if (value === '') return 'Required.';
+
+  const inRange = (n: number): boolean => Number.isInteger(n) && n >= field.min && n <= field.max;
+
+  // Comma-separated list: every part must be valid on its own.
+  for (const part of value.split(',')) {
+    const token = part.trim();
+    if (token === '') return 'Empty list item.';
+
+    // `*` or `*/step`
+    if (token === '*') continue;
+    const stepMatch = token.match(/^(\*|\d+-\d+)\/(\d+)$/);
+    if (stepMatch) {
+      const step = Number(stepMatch[2] ?? '');
+      if (!Number.isInteger(step) || step <= 0) return 'Step must be a positive integer.';
+      // A step larger than the field's maximum (e.g. `*/100` for minutes) is
+      // out of the advertised range and rejected by many cron parsers.
+      if (step > field.max) return `Step is larger than ${field.hint}.`;
+      const rangeText = stepMatch[1] ?? '*';
+      if (rangeText !== '*') {
+        const [a, b] = rangeText.split('-').map(Number);
+        if (a === undefined || b === undefined || !inRange(a) || !inRange(b)) {
+          return `Out of range (${field.hint}).`;
+        }
+        if (a > b) return 'Range start is after its end.';
+      }
+      continue;
+    }
+
+    // Range `a-b`
+    const rangeMatch = token.match(/^(\d+)-(\d+)$/);
+    if (rangeMatch) {
+      const a = Number(rangeMatch[1]);
+      const b = Number(rangeMatch[2]);
+      if (!inRange(a) || !inRange(b)) return `Out of range (${field.hint}).`;
+      if (a > b) return 'Range start is after its end.';
+      continue;
+    }
+
+    // Plain number
+    if (/^\d+$/.test(token)) {
+      if (!inRange(Number(token))) return `Out of range (${field.hint}).`;
+      continue;
+    }
+
+    return 'Not a valid cron token.';
+  }
+
+  return undefined;
+}
+
+/** Whether all five cron fields are individually valid. */
+export function cronFieldsValid(fields: string[]): boolean {
+  return (
+    fields.length === 5 &&
+    fields.every((value, index) => validateCronField(value, index) === undefined)
+  );
+}
+
+/** Join five cron fields into a normalized single-space expression. */
+export function joinCron(fields: string[]): string {
+  return fields.map((field) => field.trim()).join(' ');
+}
+
+/** Split a cron expression into exactly five fields, padding with `*` if short. */
+export function splitCron(expression: string): [string, string, string, string, string] {
+  const parts = expression.trim().split(/\s+/).filter(Boolean);
+  // Preserve any overflow (e.g. a 6-field seconds cron) in the last field rather
+  // than silently dropping it — the joined field then fails per-field validation
+  // so the out-of-contract expression is surfaced instead of quietly truncated.
+  const lastField = parts.length > 5 ? parts.slice(4).join(' ') : parts[4];
+  return [parts[0] ?? '*', parts[1] ?? '*', parts[2] ?? '*', parts[3] ?? '*', lastField ?? '*'];
+}
+
+/** Clamp/parse a `HH:MM` time string into `{ hour, minute }`, defaulting to 00:00. */
+export function parseTime(time: string): { hour: number; minute: number } {
+  const match = time.trim().match(/^(\d{1,2}):(\d{2})$/);
+  if (!match) return { hour: 0, minute: 0 };
+  const hour = Math.min(23, Math.max(0, Number(match[1])));
+  const minute = Math.min(59, Math.max(0, Number(match[2])));
+  return { hour, minute };
+}
+
+// ---------------------------------------------------------------------------
+// Preset lowering — presets are sugar that lower to a cron or interval value.
+// ---------------------------------------------------------------------------
+
+/** "every N minutes/hours" → an interval value. */
+export function lowerEveryN(every: number, unit: ScheduleIntervalUnit): ScheduleValue {
+  const safeEvery = Number.isInteger(every) && every > 0 ? every : 1;
+  return { mode: 'interval', every: safeEvery, unit };
+}
+
+/** "daily at HH:MM" → a cron value. */
+export function lowerDailyAt(time: string): ScheduleValue {
+  const { hour, minute } = parseTime(time);
+  return { mode: 'cron', expression: `${minute} ${hour} * * *` };
+}
+
+/** "weekly on [days] at HH:MM" → a cron value. Empty days falls back to every day. */
+export function lowerWeeklyAt(days: number[], time: string): ScheduleValue {
+  const { hour, minute } = parseTime(time);
+  // Don't use `Array.prototype.toSorted()` — it is ES2023 and the package
+  // targets ES2022, so it crashes runtimes that follow the target. Sort a
+  // caller-owned copy in place instead of mutating the input.
+  const sortedDays = [...days];
+  sortedDays.sort((a, b) => a - b);
+  const dow = sortedDays.length > 0 ? sortedDays.join(',') : '*';
+  return { mode: 'cron', expression: `${minute} ${hour} * * ${dow}` };
+}
+
+/** "monthly on day N at HH:MM" → a cron value. */
+export function lowerMonthlyOnDay(day: number, time: string): ScheduleValue {
+  const { hour, minute } = parseTime(time);
+  const safeDay = Math.min(31, Math.max(1, Math.trunc(day)));
+  return { mode: 'cron', expression: `${minute} ${hour} ${safeDay} * *` };
+}
+
+// ---------------------------------------------------------------------------
+// Cross-mode conversion — preserve intent losslessly where representable.
+// ---------------------------------------------------------------------------
+
+/**
+ * Whether a step wildcard of `every` on a field that wraps every `cycleLength`
+ * units (60 for minutes, 24 for hours) is a genuinely fixed-gap interval. A
+ * step wildcard restarts counting from the field's own zero point each cycle
+ * (e.g. the minute field restarts at :00 every hour), so it only behaves like
+ * a true "every N units, forever" interval when `every` evenly divides the
+ * cycle — otherwise the LAST gap before the restart is shorter than `every`.
+ * For example, an every-45-minutes step wildcard fires at :00 and :45 — a
+ * 45-then-15-minute gap, not a steady 45 minutes — because 45 does not
+ * divide 60.
+ */
+function isEvenDivisorStep(every: number, cycleLength: number): boolean {
+  // Must be strictly below the cycle length: a `*/N` where N equals (or exceeds)
+  // the cycle is out of the field's range (e.g. `*/60` for minutes, max 59) and
+  // is rejected by the cron validator, so it is not a representable step.
+  return Number.isInteger(every) && every > 0 && every < cycleLength && cycleLength % every === 0;
+}
+
+/**
+ * Convert any value into cron fields, so switching into cron mode always has
+ * something sensible to show. Only `minutes` and `hours` intervals whose
+ * `every` evenly divides their field's cycle (60 for minutes, 24 for hours)
+ * are losslessly representable as a cron step wildcard — see
+ * `isEvenDivisorStep`. A non-dividing minute/hour interval (e.g. every 45
+ * minutes or every 5 hours), and `days`/`weeks` intervals (a step wildcard on
+ * the day-of-month field resets at the start of every month rather than
+ * repeating every N days, and cron has no field for "every N weeks" at all),
+ * would silently change the schedule's actual cadence the moment a user
+ * merely LOOKED at the Cron tab if lowered to a step wildcard. Seed an honest
+ * neutral default (daily at midnight) instead for all of those — see
+ * `valueToInterval` below, which mirrors this by only recovering a step that
+ * actually divides evenly.
+ */
+export function valueToCronFields(value: ScheduleValue): string[] {
+  if (value.mode === 'cron') return splitCron(value.expression);
+  switch (value.unit) {
+    case 'minutes':
+      if (isEvenDivisorStep(value.every, 60)) return [`*/${value.every}`, '*', '*', '*', '*'];
+      // A whole-hour minute cadence (60, 120, …) is an hours interval in
+      // disguise: lower it through the hour field where representable rather
+      // than collapsing to a daily default that would turn hourly into daily.
+      if (value.every % 60 === 0) return hoursIntervalFields(value.every / 60);
+      return ['0', '0', '*', '*', '*'];
+    case 'hours':
+      return hoursIntervalFields(value.every);
+    case 'days':
+    case 'weeks':
+      return ['0', '0', '*', '*', '*'];
+  }
+}
+
+/**
+ * Lower an "every N hours" cadence to cron fields. Hourly (`N === 1`) is the
+ * plain `0 * * * *`; a larger N that evenly divides 24 becomes an hour step
+ * wildcard. Anything that does not divide the day (every 5 hours, or `N >= 24`)
+ * has no faithful fixed-gap cron form — a step wildcard would reset at midnight
+ * and shift the cadence at the day boundary — so it seeds the neutral daily
+ * default instead.
+ */
+function hoursIntervalFields(everyHours: number): string[] {
+  if (everyHours === 1) return ['0', '*', '*', '*', '*'];
+  if (isEvenDivisorStep(everyHours, 24)) return ['0', `*/${everyHours}`, '*', '*', '*'];
+  return ['0', '0', '*', '*', '*'];
+}
+
+/**
+ * Recover an interval `{ every, unit }` from a value when representable, so
+ * switching into interval mode is lossless for simple step patterns. Only a
+ * `minutes` or `hours` step that evenly divides its field's cycle (60 or 24
+ * — see `isEvenDivisorStep`) is recovered: a non-dividing minute/hour step
+ * (e.g. a 45-minute step wildcard) is not a true fixed-gap interval, and a
+ * day-of-month step
+ * wildcard is deliberately NOT read back as `{ unit: 'days' }` at all —
+ * cron's day-of-month step resets every month, so it is not equivalent to
+ * "every N days" and `valueToCronFields` never produces one for an interval
+ * value. Returns `undefined` when the cron expression is not a pure,
+ * evenly-dividing minute/hour interval.
+ */
+export function valueToInterval(
+  value: ScheduleValue,
+): { every: number; unit: ScheduleIntervalUnit } | undefined {
+  if (value.mode === 'interval') return { every: value.every, unit: value.unit };
+  const [minute, hour, dom, month, dow] = splitCron(value.expression);
+  if (month !== '*' || dow !== '*') return undefined;
+  // Common plain-wildcard forms: `* * * * *` = every minute, `0 * * * *` = hourly.
+  if (dom === '*' && hour === '*' && minute === '*') return { every: 1, unit: 'minutes' };
+  if (dom === '*' && hour === '*' && minute === '0') return { every: 1, unit: 'hours' };
+  const minuteStep = cronFieldStep(minute);
+  if (minuteStep && isEvenDivisorStep(minuteStep, 60) && hour === '*' && dom === '*') {
+    return { every: minuteStep, unit: 'minutes' };
+  }
+  const hourStep = cronFieldStep(hour);
+  if (hourStep && isEvenDivisorStep(hourStep, 24) && minute === '0' && dom === '*') {
+    return { every: hourStep, unit: 'hours' };
+  }
+  return undefined;
+}
+
+/** Extract the numeric step from a bare wildcard-step cron token, or `undefined`. */
+function cronFieldStep(token: string): number | undefined {
+  const match = token.match(/^\*\/(\d+)$/);
+  return match ? Number(match[1]) : undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Plain-English summary — no date library required.
+// ---------------------------------------------------------------------------
+
+const DOW_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+function pad2(n: number): string {
+  return n.toString().padStart(2, '0');
+}
+
+/** Whether a cron token is a single integer within the inclusive `[min, max]` range. */
+function isFixedInRange(token: string, min: number, max: number): boolean {
+  if (!/^\d+$/.test(token)) return false;
+  const n = Number(token);
+  return Number.isInteger(n) && n >= min && n <= max;
+}
+
+/** A concise, human-readable description of a recurrence value. */
+export function describeValue(value: ScheduleValue): string {
+  if (value.mode === 'interval') {
+    return value.every === 1
+      ? `Every ${singularUnit(value.unit)}`
+      : `Every ${value.every} ${value.unit}`;
+  }
+
+  const [minute, hour, dom, month, dow] = splitCron(value.expression);
+  // A "fixed" field must be a single integer WITHIN its cron range: an
+  // out-of-range digit token like `99` is invalid (validateCronField rejects it
+  // and preview is disabled), so the always-visible summary must not present
+  // `Daily at 99:00` or `Monthly on day 99` as if it were a real cadence.
+  const timeIsFixed = isFixedInRange(minute, 0, 59) && isFixedInRange(hour, 0, 23);
+  const at = timeIsFixed ? ` at ${pad2(Number(hour))}:${pad2(Number(minute))}` : '';
+
+  // The "Weekly"/"Monthly" phrasings imply a single fire per day, so they only
+  // hold when BOTH minute and hour are fixed. A schedule like `* * * * 1` or
+  // `0 * * * 1` fires every minute / every hour on Mondays — calling that
+  // "Weekly on Monday" understates the cadence — so those fall through to the
+  // raw cron summary below. ("Daily" already requires a fixed time.)
+
+  // Weekly: fixed day-of-week and a fixed time, wildcards elsewhere.
+  if (timeIsFixed && dom === '*' && month === '*' && dow !== '*' && /^[\d,]+$/.test(dow)) {
+    const dayNumbers = dow.split(',').map(Number);
+    // Day-of-week is declared 0–6 (Sun–Sat) by CRON_FIELDS, and
+    // validateCronField already rejects a user-typed 7 for that reason — this
+    // component does NOT treat 7 as a Sunday alias (some cron dialects do).
+    // An out-of-range day here can only come from a consumer-supplied value
+    // that bypassed field validation; fall through to the raw cron fallback
+    // below rather than silently wrap it into a misleading weekday via `% 7`.
+    const allDaysInRange = dayNumbers.every((day) => Number.isInteger(day) && day >= 0 && day <= 6);
+    if (allDaysInRange) {
+      const names = dayNumbers.map((day) => DOW_NAMES[day] ?? '').join(', ');
+      return `Weekly on ${names}${at}`;
+    }
+  }
+  // Monthly: an in-range fixed day-of-month and a fixed time.
+  if (timeIsFixed && isFixedInRange(dom, 1, 31) && month === '*' && dow === '*') {
+    return `Monthly on day ${dom}${at}`;
+  }
+  // Daily: wildcards on day fields, fixed time.
+  if (dom === '*' && month === '*' && dow === '*' && timeIsFixed) {
+    return `Daily${at}`;
+  }
+  return `Cron: ${joinCron([minute, hour, dom, month, dow])}`;
+}

package/src/components/schedule-builder/schedule-builder.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/schedule-builder/schedule-builder.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/tag-input/tag-input.schema.json

@@ -28,6 +28,10 @@
       "type": "boolean",
       "description": "Allow the same trimmed tag value to appear more than once."
     },
+    "commitOnSubmit": {
+      "type": "boolean",
+      "description": "Commit a non-empty pending draft before the parent form submits."
+    },
     "autocapitalize": {
       "enum": ["off", "on", "characters", "none", "sentences", "words", null],
       "description": "Autocapitalization hint forwarded to the visible text input."

package/src/components/tag-input/tag-input.schema.ts

@@ -31,6 +31,10 @@ const schema = {
       type: 'boolean',
       description: 'Allow the same trimmed tag value to appear more than once.',
     },
+    commitOnSubmit: {
+      type: 'boolean',
+      description: 'Commit a non-empty pending draft before the parent form submits.',
+    },
     autocapitalize: {
       enum: ['off', 'on', 'characters', 'none', 'sentences', 'words', null],
       description: 'Autocapitalization hint forwarded to the visible text input.',

package/src/components/tag-input/tag-input.svelte

@@ -3,7 +3,7 @@ export {};
 </script>
 
 <script lang="ts">
-import { tick, untrack } from 'svelte';
+import { flushSync, tick, untrack } from 'svelte';
 import { devWarn } from '../../utilities/dev-warn.ts';
 import { ariaInvalid, composeDescribedBy, resolveFieldControl, } from '../../_internal/field-control.ts';
 import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
@@ -11,7 +11,7 @@ import { getFormFieldContext } from '../../_internal/form-field-context.ts';
 import { classNames } from '../../utilities/class-names.ts';
 import { handleRovingKeydown, isRovingKey } from '../../utilities/roving-tabindex.ts';
 const generatedId = $props.id();
-let { id, value, defaultValue, delimiter = ',', max, validate, allowDuplicates = false, disabled, readonly = false, name, class: className, oninput: consumerInput, onkeydown: consumerKeyDown, onfocus: consumerFocus, onblur: consumerBlur, 'aria-describedby': consumerDescribedBy, 'aria-label': consumerAriaLabel, 'aria-labelledby': consumerAriaLabelledBy, 'aria-invalid': consumerInvalid, required: _ignoredRequired, onchange, ...rest } = $props();
+let { id, value, defaultValue, delimiter = ',', max, validate, allowDuplicates = false, commitOnSubmit = false, disabled, readonly = false, name, class: className, oninput: consumerInput, onkeydown: consumerKeyDown, onfocus: consumerFocus, onblur: consumerBlur, 'aria-describedby': consumerDescribedBy, 'aria-label': consumerAriaLabel, 'aria-labelledby': consumerAriaLabelledBy, 'aria-invalid': consumerInvalid, required: _ignoredRequired, onchange, ...rest } = $props();
 const initialDefaultTags = untrack(() => [...(defaultValue ?? [])]);
 const context = getFormFieldContext();
 let rootElement = $state(null);
@@ -92,6 +92,19 @@ $effect(() => {
     const form = inputElement.closest('form');
     if (!form)
         return;
+    const onSubmit = (event) => {
+        if (!commitOnSubmit || field.disabled || resolvedReadonly)
+            return;
+        if (!draftValue.trim())
+            return;
+        let committed = false;
+        flushSync(() => {
+            committed = commitDraft();
+        });
+        if (!committed) {
+            event.preventDefault();
+        }
+    };
     const onReset = () => {
         draftValue = '';
         inlineError = null;
@@ -100,8 +113,12 @@ $effect(() => {
             uncontrolledTags = [...initialDefaultTags];
         }
     };
+    form.addEventListener('submit', onSubmit, true);
     form.addEventListener('reset', onReset);
-    return () => form.removeEventListener('reset', onReset);
+    return () => {
+        form.removeEventListener('submit', onSubmit, true);
+        form.removeEventListener('reset', onReset);
+    };
 });
 function getChipElements() {
     // The focusable, keyboard-removable element is the remove <button> — the

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

@@ -34,6 +34,8 @@ export type TagInputProps = SupportedInputAttributes & {
   validate?: (tag: string) => boolean | string;
   /** Allow the same trimmed tag value to appear more than once. */
   allowDuplicates?: boolean;
+  /** Commit a non-empty pending draft before the parent form submits. */
+  commitOnSubmit?: boolean;
   /** Disable the input and chip removal affordances. */
   disabled?: boolean;
   /** Render the pending-tag input as read-only and make committed tags non-removable. */
@@ -59,6 +61,8 @@ export interface TagInputSchemaProps {
   delimiter?: string | RegExp;
   /** Allow the same trimmed tag value to appear more than once. */
   allowDuplicates?: boolean;
+  /** Commit a non-empty pending draft before the parent form submits. */
+  commitOnSubmit?: boolean;
   /** Autocomplete hint forwarded to the visible text input. */
   autocomplete?: HTMLInputAttributes['autocomplete'];
   /** Autocapitalization hint forwarded to the visible text input. */

package/src/index.ts

@@ -257,6 +257,12 @@ export type { CommandPaletteProps } from './components/command-palette/index.ts'
 export { default as ConfirmDialog } from './components/confirm-dialog/index.ts';
 export type { ConfirmDialogProps } from './components/confirm-dialog/index.ts';
 
+export { default as ConnectionIndicator } from './components/connection-indicator/index.ts';
+export type {
+  ConnectionIndicatorProps,
+  ConnectionIndicatorStatus,
+} from './components/connection-indicator/index.ts';
+
 export { default as Container } from './components/container/index.ts';
 export type {
   ContainerElement,
@@ -504,10 +510,14 @@ export { default as InvocationRuleBuilder } from './components/invocation-rule-b
 export type {
   InvocationRule,
   InvocationRuleAction,
+  InvocationRuleBuilderMode,
   InvocationRuleBuilderProps,
   InvocationRuleChange,
   InvocationRuleCondition,
+  InvocationRuleConditionsOnlyOperator,
+  InvocationRuleFieldType,
   InvocationRuleOption,
+  InvocationRuleValueChoice,
 } from './components/invocation-rule-builder/index.ts';
 
 export { default as JsonViewer } from './components/json-viewer/index.ts';
@@ -696,9 +706,13 @@ export type { RatingPrecision, RatingProps } from './components/rating/index.ts'
 export { default as RunStepTimeline } from './components/run-step-timeline/index.ts';
 export type {
   RunStep,
+  RunStepBranchGroup,
+  RunStepBranchLane,
+  RunStepBranchLaneOutcome,
   RunStepDetail,
   RunStepLink,
   RunStepStatus,
+  RunStepTimelineEntry,
   RunStepTimelineProps,
 } from './components/run-step-timeline/index.ts';
 
@@ -715,6 +729,15 @@ export type {
   ResizablePanelsResizeReason,
 } from './components/resizable-panels/index.ts';
 
+export { default as ScheduleBuilder } from './components/schedule-builder/index.ts';
+export type {
+  ScheduleAuthoringMode,
+  ScheduleBuilderProps,
+  ScheduleFire,
+  ScheduleIntervalUnit,
+  ScheduleValue,
+} from './components/schedule-builder/index.ts';
+
 export { default as SchemaForm, readSchemaFormData } from './components/schema-form/index.ts';
 export type {
   SchemaFormOutput,

package/src/styles/components.css

@@ -53,6 +53,7 @@
 @import '../components/command-menu/command-menu.css';
 @import '../components/command-palette/command-palette.css';
 @import '../components/confirm-dialog/confirm-dialog.css';
+@import '../components/connection-indicator/connection-indicator.css';
 @import '../components/container/container.css';
 @import '../components/context-menu/context-menu.css';
 @import '../components/copy-button/copy-button.css';
@@ -129,6 +130,7 @@
 @import '../components/resizable-panels/resizable-panels.css';
 @import '../components/run-step-timeline/run-step-timeline.css';
 @import '../components/review-editor/review-editor.css';
+@import '../components/schedule-builder/schedule-builder.css';
 @import '../components/schema-form/schema-form.css';
 @import '../components/scroll-area/scroll-area.css';
 @import '../components/search-field/search-field.css';