feat: scrobbling

deno.jsonc

···
     "@js-temporal/polyfill": "npm:@js-temporal/polyfill@^0.5.1",
     "@mary/ds-queue": "jsr:@mary/ds-queue@^0.1.3",
     "@noble/ciphers": "npm:@noble/ciphers@^2.1.1",
+    "@noble/hashes": "npm:@noble/hashes@^2.0.1",
     "@okikio/transferables": "jsr:@okikio/transferables@^1.0.2",
     "@orama/orama": "npm:@orama/orama@^3.1.18",
     "@phosphor-icons/web": "npm:@phosphor-icons/web@^2.1.2",

src/_data/facets.yaml

···
   featured: true
   desc: >
     Automatically put tracks into the queue.
+- url: "facets/scrobble/last.fm/index.html"
+  title: "Scrobble / Last.fm"
+  category: Data
+  desc: >
+    Enable Last.fm scrobbling.
 - url: "facets/tools/export-import/index.html"
   title: "Tools / Export & Import"
   category: Data

src/_includes/layouts/diffuse.vto

···
     <meta name="msapplication-TileColor" content="#8a90a9" />
     <meta name="theme-color" content="#8a90a9" />
 
-    <!-- Preload items so they're ready before first paint (prevents flash during view transitions) -->
-    <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable.woff2" />
-    <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable-Italic.woff2" />
-    <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/CommitMonoVariable.woff2" />
-    <link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/bold/Phosphor-Bold.woff2" />
-    <link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/fill/Phosphor-Fill.woff2" />
-
     <!-- Styles -->
     {{ for url of styles }}
       <link rel="stylesheet" href="{{ url }}" />

src/common/facets/foundation.js

···
 import ScopedTracksOrchestrator from "~/components/orchestrator/scoped-tracks/element.js";
 import FavouritesOrchestrator from "~/components/orchestrator/favourites/element.js";
 import MediaSessionOrchestrator from "~/components/orchestrator/media-session/element.js";
+import ScrobbleAudioOrchestrator from "~/components/orchestrator/scrobble-audio/element.js";
 import SourcesOrchestrator from "~/components/orchestrator/sources/element.js";
+import ScrobbleConfigurator from "~/components/configurator/scrobbles/element.js";
 
 /**
  * @import { DiffuseElement } from "@toko/diffuse/common/element.js";
···
   GROUP,
 
   features: {
+    audioScrobbling,
     fillQueueAutomatically,
     playAudioFromQueue,
     processInputs,
···
   },
 
   // Elements
+  configurator: {
+    scrobbles,
+  },
   engine: {
     audio,
     queue,
···
     queueAudio,
     processTracks,
     scopedTracks,
+    scrobbleAudio,
     sources,
   },
   processor: {
···
 
 // 📦️
 
+function audioScrobbling() {
+  return {
+    configurator: {
+      scrobbles: scrobbles(),
+    },
+    orchestrator: {
+      scrobbleAudio: scrobbleAudio(),
+    },
+  };
+}
+
 function fillQueueAutomatically() {
   return {
     engine: {
···
 }
 
 // 🥡
+
+// Configurators
+function scrobbles() {
+  const sc = new ScrobbleConfigurator();
+  sc.setAttribute("group", GROUP);
+  sc.setAttribute("id", "scrobbles");
+
+  return findExistingOrAdd(sc);
+}
 
 // Engines
 function audio() {
···
   sto.setAttribute("search-processor-selector", s.selector);
 
   return findExistingOrAdd(sto);
+}
+
+function scrobbleAudio() {
+  const a = audio();
+  const sc = scrobbles();
+
+  const sao = new ScrobbleAudioOrchestrator();
+  sao.setAttribute("group", GROUP);
+  sao.setAttribute("audio-engine-selector", a.selector);
+  sao.setAttribute("scrobbles-selector", sc.selector);
+
+  return findExistingOrAdd(sao);
 }
 
 function sources() {

src/components/configurator/scrobbles/element.js

···
+import { DiffuseElement } from "~/common/element.js";
+
+/**
+ * @import {Track} from "~/definitions/types.d.ts"
+ * @import {ScrobbleActions, ScrobbleElement} from "~/components/supplement/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// ELEMENT
+////////////////////////////////////////////
+
+/**
+ * @implements {ScrobbleActions}
+ */
+class ScrobbleConfigurator extends DiffuseElement {
+  static NAME = "diffuse/configurator/scrobbles";
+
+  // SCROBBLE ACTIONS
+
+  /**
+   * @param {Track} track
+   */
+  async nowPlaying(track) {
+    return await Promise.all(
+      this.#activeScrobblers().map((s) => s.nowPlaying(track)),
+    );
+  }
+
+  /**
+   * @param {Track} track
+   * @param {number} startedAt Unix timestamp in milliseconds
+   */
+  async scrobble(track, startedAt) {
+    return await Promise.all(
+      this.#activeScrobblers().map((s) => s.scrobble(track, startedAt)),
+    );
+  }
+
+  // MISC
+
+  /**
+   * All child scrobble elements, regardless of authentication state.
+   *
+   * @returns {ScrobbleElement[]}
+   */
+  scrobblers() {
+    return Array.from(this.root().children).flatMap((el) => {
+      if (!("isAuthenticated" in el && "nowPlaying" in el)) return [];
+      return [/** @type {ScrobbleElement} */ (/** @type {unknown} */ (el))];
+    });
+  }
+
+  /**
+   * Child scrobble elements that are currently authenticated.
+   *
+   * @returns {ScrobbleElement[]}
+   */
+  #activeScrobblers() {
+    return this.scrobblers().filter((s) => s.isAuthenticated());
+  }
+}
+
+export default ScrobbleConfigurator;
+
+////////////////////////////////////////////
+// REGISTER
+////////////////////////////////////////////
+
+export const CLASS = ScrobbleConfigurator;
+export const NAME = "dc-scrobbles";
+
+customElements.define(NAME, ScrobbleConfigurator);

src/components/engine/audio/element.js

···
         isPreload: a.isPreload,
         mimeType: a.mimeType,
         progress: a.progress,
+        track: a.track,
         url,
       };
     });

src/components/engine/audio/types.d.ts

···
 import type { Signal, SignalReader } from "~/common/signal.d.ts";
+import type { Track } from "~/definitions/types.d.ts";
 
 export type Actions = {
   adjustVolume: (_: { audioId?: string; volume: number }) => void;
···
    * Initial progress
    */
   progress?: number;
+  track: Track;
 };
 
 export type AudioState = {

src/components/orchestrator/queue-audio/element.js

···
     // TODO: Take URL expiration timestamp into account
     // TODO: Add support for seeking streams
     //       (requires a lot of code, decoding audio frames, etc.)
-    const activeAudio = activeItem && resolvedUri
-      ? [{ id: activeItem.id, isPreload: false, ...resolvedUri }]
+    const activeAudio = activeTrack && resolvedUri
+      ? [{
+        id: activeTrack.id,
+        isPreload: false,
+        track: activeTrack,
+        ...resolvedUri,
+      }]
       : [];
 
     audio.supply({
···
           id: nextItem.id,
           isPreload: true,
           url: nextUrl,
+          track: nextTrack,
         }],
       });
     }, 30_000);

src/components/orchestrator/scrobble-audio/element.js

···
+import { BroadcastableDiffuseElement, query } from "~/common/element.js";
+
+/**
+ * @import {ScrobbleElement} from "~/components/supplement/types.d.ts"
+ * @import {Track} from "~/definitions/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// ELEMENT
+////////////////////////////////////////////
+
+/**
+ * Connects the audio engine with the scrobble configurator.
+ *
+ * Calls `nowPlaying` when a track starts and `scrobble` once the user
+ * has listened long enough per the last.fm rules:
+ *   - Track must be at least 30 seconds long.
+ *   - User must have listened to at least min(duration / 2, 4 minutes).
+ */
+class ScrobbleAudioOrchestrator extends BroadcastableDiffuseElement {
+  static NAME = "diffuse/orchestrator/scrobble-audio";
+
+  // LIFECYCLE
+
+  /** @override */
+  async connectedCallback() {
+    if (this.hasAttribute("group")) {
+      this.broadcast(this.identifier, {});
+    }
+
+    super.connectedCallback();
+
+    /** @type {import("~/components/engine/audio/element.js").CLASS} */
+    this.audio = query(this, "audio-engine-selector");
+
+    /** @type {ScrobbleElement} */
+    this.scrobbles = query(this, "scrobbles-selector");
+
+    await customElements.whenDefined(this.audio.localName);
+    await customElements.whenDefined(this.scrobbles.localName);
+
+    this.effect(() => this.#monitorAudio());
+  }
+
+  /** @override */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#stopTimer();
+  }
+
+  // TRACK STATE
+  // Resets whenever the active (non-preload) audio item changes.
+
+  /** @type {string | null} */
+  #trackId = null;
+
+  /** @type {Track | null} */
+  #activeTrack = null;
+
+  /** @type {number | null} Date.now() when track first started, used as the scrobble timestamp. */
+  #startedAt = null;
+
+  /** Whether `nowPlaying` has been called for the current track. */
+  #nowPlayingSent = false;
+
+  /** Whether `scrobble` has been called for the current track. */
+  #scrobbled = false;
+
+  // TIMER STATE
+  // Accumulates actual listening time (pauses don't count).
+
+  /** Accumulated listening time in ms before the last pause. */
+  #listenedMs = 0;
+
+  /** Date.now() when the timer was last resumed; null when paused. */
+  #timerResumedAt = /** @type {number | null} */ (null);
+
+  /** @type {number | null} */
+  #intervalId = null;
+
+  // EFFECT
+
+  /**
+   * Reacts to audio item changes and playback state.
+   * Detects track changes, resets state, and starts/stops the listening timer.
+   */
+  #monitorAudio() {
+    if (!this.audio) return;
+
+    const active = this.audio.items().find((item) => !item.isPreload);
+    const id = active?.id ?? null;
+
+    // Detect track change
+    if (id !== this.#trackId) {
+      this.#stopTimer();
+
+      this.#trackId = id;
+      this.#activeTrack = active?.track ?? null;
+      this.#startedAt = id ? Date.now() : null;
+      this.#nowPlayingSent = false;
+      this.#scrobbled = false;
+      this.#listenedMs = 0;
+    }
+
+    if (!id) return;
+
+    const isPlaying = this.audio.state(id)?.isPlaying() ?? false;
+
+    if (isPlaying) {
+      this.#startTimer();
+
+      if (!this.#nowPlayingSent) {
+        this.#nowPlayingSent = true;
+        this.#sendNowPlaying(id);
+      }
+    } else {
+      this.#stopTimer();
+    }
+  }
+
+  // TIMER
+
+  #startTimer() {
+    if (this.#timerResumedAt !== null) return;
+
+    this.#timerResumedAt = Date.now();
+    this.#intervalId = setInterval(() => this.#checkScrobble(), 1_000);
+  }
+
+  #stopTimer() {
+    if (this.#timerResumedAt !== null) {
+      this.#listenedMs += Date.now() - this.#timerResumedAt;
+      this.#timerResumedAt = null;
+    }
+
+    if (this.#intervalId !== null) {
+      clearInterval(this.#intervalId);
+      this.#intervalId = null;
+    }
+  }
+
+  #totalListenedMs() {
+    return this.#listenedMs +
+      (this.#timerResumedAt !== null ? Date.now() - this.#timerResumedAt : 0);
+  }
+
+  // SCROBBLING
+
+  /**
+   * @param {string} id
+   */
+  async #sendNowPlaying(id) {
+    if (!(await this.isLeader())) return;
+    if (this.#trackId !== id || !this.#activeTrack) return;
+
+    try {
+      await this.scrobbles?.nowPlaying(this.#activeTrack);
+    } catch (err) {
+      console.warn("scrobble: nowPlaying failed", err);
+    }
+  }
+
+  async #checkScrobble() {
+    if (this.#scrobbled) return;
+
+    const id = this.#trackId;
+    if (!id || !this.#startedAt || !this.#activeTrack) return;
+
+    const durationSec = this.audio?.state(id)?.duration() ?? 0;
+
+    // last.fm: track must be at least 30 seconds
+    if (durationSec < 30) return;
+
+    // last.fm: must have listened to min(half the track, 4 minutes)
+    const listenedSec = this.#totalListenedMs() / 1000;
+    if (listenedSec < Math.min(durationSec / 2, 240)) return;
+
+    this.#scrobbled = true;
+
+    if (!(await this.isLeader())) return;
+    if (this.#trackId !== id) return;
+
+    const track = this.#activeTrack;
+    const startedAt = this.#startedAt;
+
+    try {
+      await this.scrobbles?.scrobble(track, startedAt);
+    } catch (err) {
+      console.warn("scrobble: scrobble failed", err);
+      this.#scrobbled = false;
+    }
+  }
+}
+
+export default ScrobbleAudioOrchestrator;
+
+////////////////////////////////////////////
+// REGISTER
+////////////////////////////////////////////
+
+export const CLASS = ScrobbleAudioOrchestrator;
+export const NAME = "do-scrobble-audio";
+
+customElements.define(NAME, ScrobbleAudioOrchestrator);

src/components/supplement/last.fm/element.js

···
+import { md5 } from "@noble/hashes/legacy.js";
+import { bytesToHex, utf8ToBytes } from "@noble/hashes/utils.js";
+
+import { DiffuseElement } from "~/common/element.js";
+import { computed, signal } from "~/common/signal.js";
+
+/**
+ * @import {Track} from "~/definitions/types.d.ts"
+ * @import {ScrobbleElement} from "../types.d.ts"
+ */
+
+////////////////////////////////////////////
+// CONSTANTS
+////////////////////////////////////////////
+
+const LASTFM_API_URL = "https://ws.audioscrobbler.com/2.0/";
+const LASTFM_AUTH_URL = "https://www.last.fm/api/auth/";
+const STORAGE_KEY = "diffuse/supplement/last.fm/session";
+const PENDING_TOKEN_KEY = "diffuse/supplement/last.fm/pending-token";
+
+const DEFAULT_API_KEY = "4f0fe85b67baef8bb7d008a8754a95e5";
+const DEFAULT_API_SECRET = "0cec3ca0f58e04a5082f1131aba1e0d3";
+
+////////////////////////////////////////////
+// ELEMENT
+////////////////////////////////////////////
+
+/**
+ * @implements {ScrobbleElement}
+ */
+class LastFmSupplement extends DiffuseElement {
+  static NAME = "diffuse/supplement/last.fm";
+
+  get #apiKey() {
+    return this.getAttribute("api-key") ?? DEFAULT_API_KEY;
+  }
+
+  get #apiSecret() {
+    return this.getAttribute("api-secret") ?? DEFAULT_API_SECRET;
+  }
+
+  // SIGNALS
+
+  #sessionKey = signal(/** @type {string | null} */ (null));
+  #handle = signal(/** @type {string | null} */ (null));
+
+  // STATE
+
+  isAuthenticated = computed(() => this.#sessionKey.value !== null);
+  handle = this.#handle.get;
+
+  // LIFECYCLE
+
+  /** @override */
+  connectedCallback() {
+    super.connectedCallback();
+    this.#tryRestore();
+  }
+
+  async #tryRestore() {
+    await this.whenConnected();
+
+    // Check for a pending token in sessionStorage (returning from auth redirect)
+    const pendingToken = sessionStorage.getItem(PENDING_TOKEN_KEY);
+
+    if (pendingToken) {
+      sessionStorage.removeItem(PENDING_TOKEN_KEY);
+
+      try {
+        const session = await this.#getSession(pendingToken);
+        this.#setSession(session);
+      } catch (err) {
+        console.warn("last.fm: failed to exchange token for session", err);
+      }
+
+      return;
+    }
+
+    // Restore an existing session from localStorage
+    const stored = localStorage.getItem(STORAGE_KEY);
+
+    if (stored) {
+      try {
+        const { key, name: handle } = JSON.parse(stored);
+        this.#sessionKey.value = key;
+        this.#handle.value = handle;
+      } catch {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+    }
+  }
+
+  // AUTH
+
+  /**
+   * Initiate the last.fm auth flow.
+   * Requests a token and redirects the browser to the authorization page.
+   */
+  async signIn() {
+    const token = await this.#getToken();
+
+    sessionStorage.setItem(PENDING_TOKEN_KEY, token);
+
+    const callbackUrl = location.origin + location.pathname + location.search;
+    const authUrl = new URL(LASTFM_AUTH_URL);
+    authUrl.searchParams.set("api_key", this.#apiKey);
+    authUrl.searchParams.set("token", token);
+    authUrl.searchParams.set("cb", callbackUrl);
+
+    location.assign(authUrl.toString());
+  }
+
+  /**
+   * Clear the stored session.
+   */
+  signOut() {
+    this.#sessionKey.value = null;
+    this.#handle.value = null;
+    localStorage.removeItem(STORAGE_KEY);
+  }
+
+  /** @param {{ key: string, name: string }} session */
+  #setSession({ key, name: handle }) {
+    this.#sessionKey.value = key;
+    this.#handle.value = handle;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ key, name: handle }));
+  }
+
+  // SCROBBLE ACTIONS
+
+  /**
+   * @param {Track} track
+   */
+  async nowPlaying(track) {
+    const tags = track.tags ?? {};
+    /** @type {Record<string, string>} */
+    const params = {};
+
+    if (tags.title) params.track = tags.title;
+    if (tags.artist) params.artist = tags.artist;
+    if (tags.album) params.album = tags.album;
+    if (tags.albumartist) params.albumArtist = tags.albumartist;
+    if (tags.track?.no != null) params.trackNumber = String(tags.track.no);
+    if (track.stats?.duration != null) {
+      params.duration = String(Math.round(track.stats.duration / 1000));
+    }
+
+    return this.#authenticatedCall("track.updateNowPlaying", params);
+  }
+
+  /**
+   * @param {Track} track
+   * @param {number} startedAt Unix timestamp in milliseconds
+   */
+  async scrobble(track, startedAt) {
+    const tags = track.tags ?? {};
+    /** @type {Record<string, string>} */
+    const params = {
+      timestamp: String(Math.floor(startedAt / 1000)),
+    };
+
+    if (tags.title) params.track = tags.title;
+    if (tags.artist) params.artist = tags.artist;
+    if (tags.album) params.album = tags.album;
+    if (tags.albumartist) params.albumArtist = tags.albumartist;
+    if (tags.track?.no != null) params.trackNumber = String(tags.track.no);
+    if (track.stats?.duration != null) {
+      params.duration = String(Math.round(track.stats.duration / 1000));
+    }
+
+    return this.#authenticatedCall("track.scrobble", params);
+  }
+
+  // API
+
+  /**
+   * Sign a set of API parameters (excluding `format` and `callback`).
+   *
+   * @param {Record<string, string>} params
+   * @returns {string} MD5 hex digest
+   */
+  #sign(params) {
+    const str = Object.keys(params)
+      .sort()
+      .map((k) => k + params[k])
+      .join("");
+    return bytesToHex(md5(utf8ToBytes(str + this.#apiSecret)));
+  }
+
+  /**
+   * @param {string} method
+   * @param {Record<string, string>} [params]
+   * @returns {Promise<any>}
+   */
+  async #call(method, params = {}) {
+    const allParams = { ...params, api_key: this.#apiKey, method };
+    const api_sig = this.#sign(allParams);
+    const body = new URLSearchParams({ ...allParams, api_sig, format: "json" });
+
+    const response = await fetch(LASTFM_API_URL, { method: "POST", body });
+    const data = await response.json();
+
+    if (data.error) {
+      throw new Error(`last.fm error ${data.error}: ${data.message}`);
+    }
+
+    return data;
+  }
+
+  /**
+   * @param {string} method
+   * @param {Record<string, string>} [params]
+   * @returns {Promise<any>}
+   */
+  async #authenticatedCall(method, params = {}) {
+    const sk = this.#sessionKey.value;
+    if (!sk) throw new Error("Not authenticated with last.fm");
+    return this.#call(method, { ...params, sk });
+  }
+
+  /** @returns {Promise<string>} */
+  async #getToken() {
+    const data = await this.#call("auth.getToken");
+    return data.token;
+  }
+
+  /**
+   * @param {string} token
+   * @returns {Promise<{ key: string, name: string }>}
+   */
+  async #getSession(token) {
+    const data = await this.#call("auth.getSession", { token });
+    return data.session;
+  }
+}
+
+export default LastFmSupplement;
+
+////////////////////////////////////////////
+// REGISTER
+////////////////////////////////////////////
+
+export const CLASS = LastFmSupplement;
+export const NAME = "ds-lastfm";
+
+customElements.define(NAME, CLASS);

src/components/supplement/types.d.ts

···
+import type { DiffuseElement } from "~/common/element.js";
+import type { SignalReader } from "~/common/signal.d.ts";
+import type { Track } from "~/definitions/types.d.ts";
+
+export type ScrobbleElement = DiffuseElement & ScrobbleActions & {
+  isAuthenticated: SignalReader<boolean>;
+  handle: SignalReader<string | null>;
+};
+
+export type ScrobbleActions = {
+  nowPlaying(track: Track): Promise<unknown>;
+
+  /**
+   * @param {Track} track
+   * @param {number} startedAt Unix timestamp in milliseconds
+   */
+  scrobble(track: Track, startedAt: number): Promise<unknown>;
+};

src/facets/scrobble/last.fm/index.html

···
+<link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/themes/default.css" />
+
+<main>
+  <wa-card>
+    <div slot="header" class="card-header">
+      <strong>Last.fm</strong>
+      <!--<wa-button id="settings-btn" appearance="plain" size="small" aria-label="API credentials">
+        <wa-icon name="gear"></wa-icon>
+      </wa-button>-->
+    </div>
+
+    <div id="state-connect" class="card-body">
+      <p>Connect your Last.fm account to start scrobbling.</p>
+      <wa-button id="sign-in-btn" variant="brand" appearance="filled">
+        <wa-icon slot="prefix" name="plug"></wa-icon>
+        Connect
+      </wa-button>
+    </div>
+
+    <div id="state-connected" class="card-body" hidden>
+      <p id="handle-paragraph" hidden>Connected as <strong id="handle-text"></strong>.</p>
+      <wa-button id="sign-out-btn" variant="neutral" appearance="outlined" hidden>
+        <wa-icon slot="prefix" name="plug-slash"></wa-icon>
+        Disconnect
+      </wa-button>
+    </div>
+  </wa-card>
+</main>
+
+<wa-drawer id="credentials-drawer" label="API Credentials" placement="end">
+  <div class="drawer-body">
+    <wa-input id="api-key-input" label="API Key" placeholder="Default"></wa-input>
+    <wa-input
+      id="api-secret-input"
+      label="API Secret"
+      type="password"
+      placeholder="Default"
+    ></wa-input>
+  </div>
+  <div slot="footer" class="drawer-footer">
+    <wa-button id="save-creds-btn" variant="brand" appearance="filled">Save</wa-button>
+    <wa-button id="reset-creds-btn" variant="neutral" appearance="outlined"
+      >Reset to defaults</wa-button
+    >
+  </div>
+</wa-drawer>
+
+<style>
+  body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100dvh;
+    margin: 0;
+  }
+
+  wa-card {
+    width: min(360px, calc(100vw - 2rem));
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wa-space-m);
+  }
+
+  .drawer-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wa-space-m);
+  }
+
+  .drawer-footer {
+    display: flex;
+    gap: var(--wa-space-s);
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  p {
+    margin: 0;
+  }
+</style>
+
+<script type="module" src="./index.inline.js"></script>

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

···
+import "@awesome.me/webawesome/dist/components/card/card.js";
+import "@awesome.me/webawesome/dist/components/button/button.js";
+import "@awesome.me/webawesome/dist/components/drawer/drawer.js";
+import "@awesome.me/webawesome/dist/components/input/input.js";
+import "@awesome.me/webawesome/dist/components/icon/icon.js";
+
+import "~/common/webawesome/detect-dark.js";
+
+import LastFmSupplement from "~/components/supplement/last.fm/element.js";
+import { effect } from "~/common/signal.js";
+
+/**
+ * @import { default as WaDrawer } from "@awesome.me/webawesome/dist/components/drawer/drawer.js"
+ * @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
+ */
+
+////////////////////////////////////////////
+// SETUP
+////////////////////////////////////////////
+
+const CREDS_KEY = "diffuse/supplement/last.fm/credentials";
+
+/** @returns {{ apiKey: string, apiSecret: string } | null} */
+function loadCredentials() {
+  try {
+    return JSON.parse(localStorage.getItem(CREDS_KEY) ?? "null");
+  } catch {
+    return null;
+  }
+}
+
+// Find existing or create new ds-lastfm element
+let lastFm = /** @type {LastFmSupplement | null} */ (
+  document.body.querySelector("ds-lastfm")
+);
+
+if (!lastFm) {
+  lastFm = new LastFmSupplement();
+  const creds = loadCredentials();
+  if (creds) {
+    lastFm.setAttribute("api-key", creds.apiKey);
+    lastFm.setAttribute("api-secret", creds.apiSecret);
+  }
+  document.body.append(lastFm);
+}
+
+await customElements.whenDefined(lastFm.localName);
+
+////////////////////////////////////////////
+// ELEMENTS
+////////////////////////////////////////////
+
+const stateConnect = /** @type {HTMLElement} */ (
+  document.querySelector("#state-connect")
+);
+const stateConnected = /** @type {HTMLElement} */ (
+  document.querySelector("#state-connected")
+);
+const handleParagraph = /** @type {HTMLElement} */ (
+  document.querySelector("#handle-paragraph")
+);
+const handleText = /** @type {HTMLElement} */ (
+  document.querySelector("#handle-text")
+);
+
+const settingsBtn = /** @type {HTMLElement} */ (
+  document.querySelector("#settings-btn")
+);
+
+const signInBtn = /** @type {HTMLElement} */ (
+  document.querySelector("#sign-in-btn")
+);
+
+const signOutBtn = /** @type {HTMLElement} */ (
+  document.querySelector("#sign-out-btn")
+);
+
+const credentialsDrawer = /** @type {WaDrawer} */ (
+  document.querySelector("#credentials-drawer")
+);
+
+const apiKeyInput = /** @type {WaInput} */ (
+  document.querySelector("#api-key-input")
+);
+
+const apiSecretInput = /** @type {WaInput} */ (
+  document.querySelector("#api-secret-input")
+);
+
+const saveCredsBtn = /** @type {HTMLElement} */ (
+  document.querySelector("#save-creds-btn")
+);
+
+const resetCredsBtn = /** @type {HTMLElement} */ (
+  document.querySelector("#reset-creds-btn")
+);
+
+// Pre-fill drawer inputs with stored credentials
+const existingCreds = loadCredentials();
+if (existingCreds) {
+  apiKeyInput.value = existingCreds.apiKey;
+  apiSecretInput.value = existingCreds.apiSecret;
+}
+
+////////////////////////////////////////////
+// REACTIVE UI
+////////////////////////////////////////////
+
+effect(() => {
+  const isAuthenticated = lastFm.isAuthenticated();
+  const handle = lastFm.handle();
+
+  stateConnect.hidden = isAuthenticated;
+  stateConnected.hidden = !isAuthenticated;
+
+  handleParagraph.hidden = !handle;
+  signOutBtn.hidden = !isAuthenticated;
+  if (handle) handleText.textContent = handle;
+});
+
+////////////////////////////////////////////
+// ACTIONS
+////////////////////////////////////////////
+
+settingsBtn?.addEventListener("click", (e) => {
+  e.stopPropagation();
+  credentialsDrawer.open = true;
+});
+
+signInBtn.onclick = () => lastFm.signIn();
+
+signOutBtn.onclick = () => lastFm.signOut();
+
+saveCredsBtn.onclick = () => {
+  const apiKey = apiKeyInput.value?.trim();
+  const apiSecret = apiSecretInput.value?.trim();
+  if (!apiKey || !apiSecret) return;
+
+  localStorage.setItem(CREDS_KEY, JSON.stringify({ apiKey, apiSecret }));
+  lastFm.setAttribute("api-key", apiKey);
+  lastFm.setAttribute("api-secret", apiSecret);
+};
+
+resetCredsBtn.onclick = () => {
+  localStorage.removeItem(CREDS_KEY);
+  lastFm.removeAttribute("api-key");
+  lastFm.removeAttribute("api-secret");
+  apiKeyInput.value = "";
+  apiSecretInput.value = "";
+};