use:form action

+layout.svelte

<script>
  // src/routes/+layout.svelte

  import Toasts, { toasts } from "./Toasts.svelte";

  function show_toast({ detail: { json } }) {
    if (json.error) {
      toasts.error(json.error.message);
    } else {
      toasts.success(json.message);
    }
  }
</script>

<Toasts />

<div on:form-response={show_toast}>
  <slot />
</div>

form.js

// src/lib/form.js

export default function form(form_element) {
  form_element.setAttribute('novalidate', true);

  async function handle_submit(event) {
    event.preventDefault();

    function validate() {
      // https://css-tricks.com/form-validation-part-2-constraint-validation-api-javascript/
    }

    const is_valid = validate();

    if (!is_valid) return;

    const response = await fetch(event.target.getAttribute('action'), {
      method: event.target.getAttribute('method'),
      body: new FormData(event.target)
    });

    const json = await response.json();

    event.target.dispatchEvent(
      new CustomEvent('form-response', { bubbles: true, detail: { json } })
    );
  }

  form_element.addEventListener('submit', handle_submit);
}

How using on:form-response knows it has to search for src/lib/form.js?
I feel I'm missing a step of understanding.
Tku

import { form } from '$lib/form' appears to be missing from +layout.svelte