+ {BOUNDARY_FIELDS.map(({ key, label, description, fromTier, toTier, fromColor, toColor }) => {
+ const fieldError = boundaryErrors?.[key];
+ const inputId = `boundary-${key}`;
+ const errorId = `${inputId}-error`;
+ const { onChange, ...boundaryInputProps } = register(`tier_boundaries.${key}`, {
+ required: "Enter a number between 0 and 1",
+ setValueAs: boundaryValueAsNumber,
+ validate: (value) => {
+ if (!Number.isFinite(value)) return "Enter a number between 0 and 1";
+ if (value <= 0) return "Must be greater than 0";
+ if (value >= 1) return "Must be less than 1";
+ const { simple_medium, medium_complex } = liveBoundaries;
+ if (key === "medium_complex" && Number.isFinite(simple_medium) && value <= simple_medium) {
+ return "Must be greater than Simple → Medium";
+ }
+ if (key === "complex_reasoning" && Number.isFinite(medium_complex) && value <= medium_complex) {
+ return "Must be greater than Medium → Complex";
+ }
+ return true;
+ },
+ deps:
+ key === "simple_medium"
+ ? ["tier_boundaries.medium_complex"]
+ : key === "medium_complex"
+ ? ["tier_boundaries.complex_reasoning"]
+ : undefined,
+ });
+
+ return (
+
+ {/* Tier transition label */}
+
+
+ {fromTier}
+
+ →
+
+ {toTier}
+
+
+
+
+
{
+ normalizeBoundaryInput(event);
+ onChange(event);
+ }}
+ aria-invalid={fieldError ? true : undefined}
+ aria-describedby={fieldError ? errorId : undefined}
+ className={cn(
+ "h-11 text-center text-lg font-mono font-medium",
+ fieldError && "border-destructive focus-visible:ring-destructive",
+ )}
+ {...boundaryInputProps}
+ />
+
+ {fieldError ? (
+
+ {fieldError.message}
+
+ ) : (
+
{description}
+ )}
+
+ );
+ })}
+