chore: `foundation.setup` function to set doc title and fade out loader

src/common/facets/loader.js

···
-export function removeLoader() {
-  const loader = document.querySelector("#diffuse-loader");
-
-  if (loader) {
-    loader.classList.add("loaded");
-    setTimeout(() => {
-      loader.remove();
-      loader.parentElement?.remove();
-    }, 750);
-  }
-}

src/common/foundation.js

···
       search: signals.processor.search.get,
     },
   },
+
+  // Utilities
+
+  container: () => {
+    return document.body.querySelector("#container");
+  },
+
+  hideLoader: () => {
+    const loader = document.querySelector("#diffuse-loader");
+
+    if (loader) {
+      loader.classList.add("loaded");
+      setTimeout(() => {
+        loader.remove();
+        loader.parentElement?.remove();
+      }, 750);
+    }
+  },
+
+  /**
+   * @param {{ title: string }} options
+   */
+  setup: ({ title }) => {
+    document.title = title;
+    config.hideLoader();
+  },
 };
 
 export default config;

src/facets/connect/atproto/index.inline.js

···
 
 import { setup } from "~/facets/connect/common.js";
 
-document.title = "Connect AT Protocol | Diffuse";
+foundation.setup({ title: "Connect AT Protocol | Diffuse" });
 
 /**
  * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
···
 ////////////////////////////////////////////
 
 const outputOrchestrator = await foundation.orchestrator.output();
-
 await customElements.whenDefined(outputOrchestrator.localName);
 
 const atprotoOption = (await outputOrchestrator.options()).find(

src/facets/connect/https/index.inline.js

···
  * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
  */
 
-document.title = "Connect HTTPS | Diffuse";
+foundation.setup({ title: "Connect HTTPS | Diffuse" });
 
 ////////////////////////////////////////////
 // SETUP

src/facets/connect/icecast/index.inline.js

···
  * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
  */
 
-document.title = "Connect Icecast | Diffuse";
+foundation.setup({ title: "Connect Icecast | Diffuse" });
 
 ////////////////////////////////////////////
 // SETUP

src/facets/connect/index.inline.js

···
 import "~/common/webawesome/phosphor/fill.js";
 
 import { data as facetsData } from "~/facets/index.js";
+import foundation from "~/common/foundation.js";
 
-document.title = "Connect | Diffuse";
+foundation.setup({ title: "Connect | Diffuse" });
 
 /** @param {string} path */
 const loaderHref = (path) => `l/?path=${encodeURIComponent(path)}`;

src/facets/connect/local/index.inline.js

···
  * @import {Track} from "~/definitions/types.d.ts"
  */
 
-document.title = "Connect Local | Diffuse";
+foundation.setup({ title: "Connect Local | Diffuse" });
 
 ////////////////////////////////////////////
 // SETUP

src/facets/connect/opensubsonic/index.inline.js

···
  * @import { Server } from "~/components/input/opensubsonic/types.d.ts"
  */
 
-document.title = "Connect OpenSubsonic | Diffuse";
+foundation.setup({ title: "Connect OpenSubsonic | Diffuse" });
 
 ////////////////////////////////////////////
 // SETUP

src/facets/connect/s3/index.inline.js

···
 
 import { setup } from "~/facets/connect/common.js";
 
-document.title = "Connect S3 | Diffuse";
+foundation.setup({ title: "Connect S3 | Diffuse" });
 
 /**
  * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"

src/facets/data/export-import/index.inline.js

···
 import { effect } from "~/common/signal.js";
 
 // Set doc title
-document.title = "Export & Import | Diffuse";
+foundation.setup({ title: "Export & Import | Diffuse" });
 
 // Doc loader
 const main = /** @type {HTMLElement} */ (document.querySelector("main"));

src/facets/data/process-tracks/index.inline.js

···
 import { effect } from "~/common/signal.js";
 import foundation from "~/common/foundation.js";
 
+foundation.setup({ title: "Process Tracks | Diffuse" });
+
 const main = /** @type {HTMLElement} */ (document.querySelector("main"));
 main.classList.add("has-loaded");
 

src/facets/data/v3-import/index.inline.js

···
 import * as TID from "@atcute/tid";
 import foundation from "~/common/foundation.js";
 
-document.title = "V3.x Import | Diffuse";
+foundation.setup({ title: "V3.x Import | Diffuse" });
 
 const main = /** @type {HTMLElement} */ (document.querySelector("main"));
 main.classList.add("has-loaded");

src/facets/examples/generate-playlist/index.inline.js

···
 import foundation from "~/common/foundation.js";
 
 // Set doc title
-document.title = "Generate Playlist | Diffuse";
+foundation.setup({ title: "Generate Playlist | Diffuse" });
 
 const output = await foundation.orchestrator.output();
 const queue = await foundation.engine.queue();

src/facets/examples/now-playing/index.inline.js

···
 import { effect } from "~/common/signal.js";
 
 // Set doc title
-document.title = "Now Playing | Diffuse";
+foundation.setup({ title: "Now Playing | Diffuse" });
 
 const output = await foundation.orchestrator.output();
 const queue = await foundation.engine.queue();

src/facets/misc/scrobble/last.fm/index.inline.js

···
 import { effect } from "~/common/signal.js";
 
 // Set doc title
-document.title = "Last.fm | Scrobble | Diffuse";
+foundation.setup({ title: "Last.fm | Scrobble | Diffuse" });
 
 /**
  * @import { default as WaDrawer } from "@awesome.me/webawesome/dist/components/drawer/drawer.js"

src/facets/misc/split-view/index.inline.js

···
 import * as Output from "~/common/output.js";
 
 // Set doc title
-document.title = "Split View | Diffuse";
+foundation.setup({ title: "Split View | Diffuse" });
 
 /**
  * @import { default as WaSplitPanel } from "@awesome.me/webawesome/dist/components/split-panel/split-panel.js"

src/facets/playback/auto-queue/index.inline.js

···
 const ACTIVE_CLASS = "button--active";
 
 // Set doc title
-document.title = "Automatic Queue | Diffuse";
+foundation.setup({ title: "Automatic Queue | Diffuse" });
 
 // Doc load
 const main = /** @type {HTMLElement} */ (document.querySelector("main"));

src/l/index.js

···
 import * as Output from "~/common/output.js";
 import { createLoader, renderError } from "~/common/loader.js";
 import { insertPreludes } from "~/common/facets/prelude.js";
-import { removeLoader } from "~/common/facets/loader.js";
 
 // Output element
 const output = await foundation.orchestrator.output();
···
     range.selectNode(container);
     const documentFragment = range.createContextualFragment(facet.html ?? "");
     container.append(documentFragment);
-
-    removeLoader();
   },
 });

src/l/index.vto

···
 <div id="container">
   <div class="diffuse">
     <div id="diffuse-loader" class="flex">
-      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="animate-bounce"><path d="M212.92,17.71a7.89,7.89,0,0,0-6.86-1.46l-128,32A8,8,0,0,0,72,56V166.1A36,36,0,1,0,88,196V102.25l112-28V134.1A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.71Z"></path></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="animate-bounce"><path d="M212.92,17.71a7.89,7.89,0,0,0-6.86-1.46l-128,32A8,8,0,0,0,72,56V166.1A36,36,0,1,0,88,196V102.25l112-28V134.1A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.71Z"></path></svg>
     </div>
   </div>
 </div>

src/styles/loader.css

···
 @scope (.diffuse) {
   :scope {
     color: var(--text-color);
-    font-size: var(--fs-base);
-    font-weight: 500;
+    font-size: var(--fs-md);
     left: 50%;
     pointer-events: none;
     position: absolute;
···
   }
 
   #diffuse-loader {
-    font-size: var(--fs-md);
-    letter-spacing: var(--leading-loose);
-    text-transform: uppercase;
     transition: opacity 500ms ease;
 
     &.loaded {
       opacity: 0;
-    }
-
-    svg {
-      height: var(--fs-md);
-      width: var(--fs-md);
     }
   }
 }

src/themes/blur/artwork-controller/facet/index.inline.js

···
 import ArtworkController from "~/themes/blur/artwork-controller/element.js";
 
 // Set doc title
-document.title = "Artwork controller | Blur | Diffuse";
+foundation.setup({ title: "Artwork controller | Blur | Diffuse" });
 
 // Setup the prerequisite elements
 await foundation.orchestrator.queueAudio();