Export variable references block in VariableHeader component

src/lib/components/variables/VariableHeader.svelte

@@ -9,6 +9,7 @@
   export let decomposition: Decomposition | undefined
   export let variable: Variable | undefined
 
+  const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
   const testCaseIndex = getContext("testCaseIndex") as Writable<number>
 
   $: latestFormulaDate =
@@ -119,3 +120,51 @@
     </div>
   {/if}
 </div>
+
+{#if variable?.reference !== undefined}
+  <!--Add variable references as described in openfisca references + decomposition customization and order them by date. -->
+  {#each Object.entries(variable.reference).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
+    {#each references as { href, note, title }}
+      <article class="px-3 m-2 mr-4">
+        {#if note !== undefined}
+          <div
+            class="text-sm text-gray-600 text-justify border-l-2 border-le-gris-dispositif-light pl-2 mb-4 leading-normal"
+          >
+            <p class="break-words">
+              {note}
+            </p>
+          </div>
+        {/if}
+        {#if instant !== "0001-01-01"}
+          <footer class="text-xs text-gray-500 text-right mb-6">
+            {#if href === undefined}
+              {#if title !== undefined}
+                <span>{title}</span>
+              {/if}
+            {:else}
+              <a
+                class="link text-gray-500 hover:text-le-bleu"
+                {href}
+                target="_blank"
+                ><span class="underline">{title ?? href}</span>
+                <!--Material Icon - Open in a New-->
+                <svg
+                  class="fill-current h-4 w-4 pb-1 inline"
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="18px"
+                  viewBox="0 0 24 24"
+                  width="18px"
+                  fill="#000000"
+                  ><path d="M0 0h24v24H0z" fill="none" /><path
+                    d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                  /></svg
+                >
+              </a>
+            {/if}
+            <span>(consulté le {dateFormatter.format(new Date(instant))})</span>
+          </footer>
+        {/if}
+      </article>
+    {/each}
+  {/each}
+{/if}

src/lib/components/variables/VariableReferredParameters.svelte

@@ -17,7 +17,6 @@
   export let parameters: Parameter[]
   export let variable: Variable | undefined
 
-  const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
   let openDirectParameters = true
 
   $: directParametersName = new Set(
@@ -39,53 +38,6 @@
 
 <VariableHeader {decomposition} {variable} />
 
-{#if variable?.reference !== undefined}
-  {#each Object.entries(variable.reference).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
-    {#each references as { href, note, title }}
-      <article class="px-3 m-2 mr-4">
-        {#if note !== undefined}
-          <div
-            class="text-sm text-gray-600 text-justify border-l-2 border-le-gris-dispositif-light pl-2 mb-4 leading-normal"
-          >
-            <p class="break-words">
-              {note}
-            </p>
-          </div>
-        {/if}
-        {#if instant !== "0001-01-01"}
-          <footer class="text-xs text-gray-500 text-right mb-6">
-            {#if href === undefined}
-              {#if title !== undefined}
-                <span>{title}</span>
-              {/if}
-            {:else}
-              <a
-                class="link text-gray-500 hover:text-le-bleu"
-                {href}
-                target="_blank"
-                ><span class="underline">{title ?? href}</span>
-                <!--Material Icon - Open in a New-->
-                <svg
-                  class="fill-current h-4 w-4 pb-1 inline"
-                  xmlns="http://www.w3.org/2000/svg"
-                  height="18px"
-                  viewBox="0 0 24 24"
-                  width="18px"
-                  fill="#000000"
-                  ><path d="M0 0h24v24H0z" fill="none" /><path
-                    d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-                  /></svg
-                >
-              </a>
-            {/if}
-            <span>(consulté le {dateFormatter.format(new Date(instant))})</span>
-          </footer>
-        {/if}
-      </article>
-    {/each}
-  {/each}
-{/if}
-
 {#if decomposition?.children === undefined}
   {#if Object.keys(rootDirectParameterById).length > 0}
     <h2