handleFill function

async function handleFill(
  step: FlowStep,
  resolvedValue: string | undefined,
  config: ReplayConfig,
): Promise<StepResult> {
  const el = requireElement(step);
  ensureVisible(el);

  if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
    return { status: "failed", error: "Fill target is not an input/textarea" };
  }

  const value = resolvedValue ?? "";

  // Clear existing value first
  el.value = "";
  el.dispatchEvent(new Event("input", { bubbles: true }));

  // Simulate typing character by character
  if (config.typingDelay > 0 && value.length > 0) {
    for (const char of value) {
      el.value += char;
      el.dispatchEvent(new Event("input", { bubbles: true }));
      el.dispatchEvent(
        new KeyboardEvent("keydown", { key: char, bubbles: true }),
      );
      el.dispatchEvent(
        new KeyboardEvent("keyup", { key: char, bubbles: true }),
      );
      await sleep(config.typingDelay);
    }
  } else {
    el.value = value;
    el.dispatchEvent(new Event("input", { bubbles: true }));
  }

  el.dispatchEvent(new Event("change", { bubbles: true }));
  el.dispatchEvent(new Event("blur", { bubbles: true }));

  return { status: "success" };
}