```ts
/**
 * Parses a span text into total inches.
 * @param text - A string representing a span in yards, feet, and/or inches.
 * @returns The total inches represented by the span.
 */
export function parseSpan(text: string): number {
  if (typeof text !== 'string' || !text.trim()) throw new Error('Invalid span');

  const units = ['yd', 'ft', 'in'];
  const parts = text.split(/\s+/);
  let totalInches = 0;

  for (let i = 0; i < parts.length; i++) {
    const part = parts[i];
    if (!/\d+[yfi]/.test(part)) throw new Error('Invalid span');

    const value = parseInt(part, 10);
    const unit = part.slice(-2);

    if (!units.includes(unit) || (i > 0 && units.indexOf(unit) < units.indexOf(parts[i - 1].slice(-2)))) {
      throw new Error('Invalid span');
    }

    switch (unit) {
      case 'yd': totalInches += value * 36; break;
      case 'ft': totalInches += value * 12; break;
      case 'in': totalInches += value; break;
    }
  }

  return totalInches;
}

/**
 * Renders a non-negative integer of total inches into canonical form.
 * @param inches - A non-negative integer representing the total inches.
 * @returns The span in canonical form.
 */
export function formatSpan(inches: number): string {
  if (typeof inches !== 'number' || inches < 0 || !Number.isInteger(inches) || inches % 1 !== 0) throw new Error('Invalid inches');

  const units = ['yd', 'ft', 'in'];
  let result: string[] = [];

  for (let i = units.length - 1; i >= 0; i--) {
    const unit = units[i];
    if (unit === 'in' && inches % 12 === 0) continue;
    if (unit === 'ft' && Math.floor(inches / 12) % 3 === 0 || unit === 'yd') {
      result.push(`${Math.floor(inches / toInchFactor(unit))}${unit}`);
      inches %= toInchFactor(unit);
    }
  }

  return result.join(' ');
}

/**
 * Takes two span texts and returns their sum in canonical form.
 * @param first - The first span text.
 * @param second - The second span text.
 * @returns The sum of the two spans in canonical form.
 */
export function addSpans(first: string, second: string): string {
  const totalInches = parseSpan(first) + parseSpan(second);
  return formatSpan(totalInches);
}

const toInchFactor = (unit: 'yd' | 'ft' | 'in'): number => unit === 'yd' ? 36 : unit === 'ft' ? 12 : 1;
```