feat: use output configurator in constituents

src/common/constituents/default.js

···
 import InputConfigurator from "@components/configurator/input/element.js";
+import OutputConfigurator from "@components/configurator/output/element.js";
 import Queue from "@components/engine/queue/element.js";
 import OpenSubsonic from "@components/input/opensubsonic/element.js";
 import S3 from "@components/input/s3/element.js";
···
 
   // Output
   const idb = new IndexedDBOutput();
+  idb.setAttribute("id", "idb-json-output")
+  idb.setAttribute("namespace", "json")
+
   const json = new JsonStringOutput();
-  json.setAttribute("output-selector", idb.localName);
+  json.setAttribute("id", "idb-json")
+  json.setAttribute("output-selector", "#idb-json-output");
+
+  const output = new OutputConfigurator();
+  output.setAttribute("default", "idb-json");
+  output.append(json);
 
   const refiner = new DefaultRefiner();
   refiner.setAttribute("id", "output");
-  refiner.setAttribute("output-selector", json.localName);
+  refiner.setAttribute("output-selector", output.localName);
 
-  document.body.append(idb, json, refiner);
+  document.body.append(idb, output, refiner);
 
   // Orchestrators
   const oqt = new QueueTracksOrchestrator();
···
 
     configurator: {
       input,
+      output,
     },
     engine: {
       queue,

src/common/element.js

···
  * around rendering and managing signals.
  */
 export class DiffuseElement extends HTMLElement {
+  $connected = signal(false)
+
   #connected = Promise.withResolvers();
   #disposables = /** @type {Array<() => void>} */ ([]);
 
···
   // LIFECYCLE
 
   connectedCallback() {
+    this.$connected.value = true
     this.#connected.resolve(null);
 
     if (!("render" in this && typeof this.render === "function")) return;
···
   }
 
   disconnectedCallback() {
+    this.$connected.value = false
     this.#teardown();
   }
 

src/components/output/common.js

···
-import { signal } from "@common/signal.js";
+import { effect, signal } from "@common/signal.js";
 
 /**
  * @import {OutputManager, OutputManagerProperties} from "./types.d.ts"
···
     ts.value = "loaded";
   }
 
-  loadTracks();
+  effect(loadTracks);
 
   return {
     tracks: {

src/components/output/polymorphic/indexed-db/element.js

···
     const manager = outputManager({
       tracks: {
         empty: () => undefined,
-        get: () => p.get({ name: this.#cat("tracks") }),
-        put: (data) => p.put({ name: this.#cat("tracks"), data }),
+        get: () => {
+          if (!this.$connected.value) return undefined
+          return p.get({ name: this.#cat("tracks") })
+        },
+        put: (data) => {
+          if (!this.$connected.value) return
+          return p.put({ name: this.#cat("tracks"), data })
+        },
       },
     });
 
     this.tracks = manager.tracks;
   }
+
+  // 🛠️
 
   /** @param {string} name */
   #cat(name) {

src/components/transformer/output/base.js

···
           await this.output.whenDefined;
           await this.output.signal()?.tracks.save(newTracks);
         },
-        state: computed(() =>
-          this.output.signal()?.tracks.state() ?? "loading"
-        ),
+        state: computed(() => {
+          return this.output.signal()?.tracks.state() ?? "loading"
+        }),
       },
     };
 

src/components/transformer/output/string/json/element.js

···
       tracks: {
         ...base.tracks,
         collection: computed(() => {
-          const json = base.tracks.collection() ?? "[]";
+          let json = base.tracks.collection();
+          if (typeof json !== "string") json = "[]"
 
           // Try parsing JSON
           try {

src/themes/blur/artwork-controller/element.css

···
+@import "../../../styles/vendor/phosphor/fill/style.css";
+@import "../../../styles/animations.css";
+
 :host {
   --transition-durition: 750ms;
 }

src/themes/blur/artwork-controller/element.js

···
 
       this.effect(() => {
         const now = !!queue.now();
-        const bool = !now ||
-          (now && this.#audio()?.loadingState() !== "loaded");
+        const bool = (now && this.#audio()?.loadingState() !== "loaded");
 
         if (this.#isLoadingTimeout) {
           clearTimeout(this.#isLoadingTimeout);
···
 
     return html`
       <style>
-      @import "../../../styles/vendor/phosphor/fill/style.css";
-      @import "../../../styles/animations.css";
-      @import "./element.css";
+      @import "${import.meta.resolve('./element.css')}";
       </style>
 
       <main style="background-color: ${this.#artworkColor.value ??

src/themes/blur/artwork-controller/index.vto

···
 base: ../../../
 
 styles:
-  - ../../../styles/vendor/phosphor/fill/style.css
-  - ../../../styles/base.css
+  - styles/vendor/phosphor/fill/style.css
+  - styles/base.css
 ---
 
 <!-- ELEMENTS -->
···
 <!-- SCRIPTS -->
 
 <script type="module">
-  import { config } from "../../../common/constituents/default.js"
-  import QueueAudioOrchestrator from "../../../components/orchestrator/queue-audio/element.js";
+  import { config } from "./common/constituents/default.js"
+  import QueueAudioOrchestrator from "./components/orchestrator/queue-audio/element.js";
 
-  import "../../../components/engine/audio/element.js"
-  import "../../../components/processor/artwork/element.js"
+  import "./components/engine/audio/element.js"
+  import "./components/processor/artwork/element.js"
 
   // Prepare default constituents setup
   const defaults = config()
 
   // Only then initiate artwork controller
-  import("./element.js")
+  import("./themes/blur/artwork-controller/element.js")
 
   // Orchestrators
 

src/themes/webamp/index.js

···
 import "@components/configurator/output/element.js";
 import "@components/input/opensubsonic/element.js";
 import "@components/input/s3/element.js";
-// import "@components/orchestrator/process-tracks/element.js";
+import "@components/orchestrator/process-tracks/element.js";
 import "@components/orchestrator/queue-tracks/element.js";
 import "@components/output/polymorphic/indexed-db/element.js";
 import "@components/processor/metadata/element.js";