@naxodev/opencode-music-player 0.2.5 → 0.3.0

package/dist/index.js

@@ -0,0 +1,2272 @@
+// @bun
+// index.tsx
+import { createComponent as _$createComponent3 } from "@opentui/solid";
+import { Plugin } from "@opencode/plugin/tui";
+
+// system-media.ts
+import {
+  baselineCapabilities,
+  createReconnectingMusicSessionClient
+} from "@naxodev/music-core";
+
+// artwork.ts
+import { mkdtemp, rm } from "fs/promises";
+import { tmpdir } from "os";
+import { join } from "path";
+import { PNG } from "pngjs";
+import {
+  acquireCatalogArtwork,
+  MAX_ARTWORK_BYTES,
+  selectCatalogResolution
+} from "@naxodev/music-core";
+import {
+  selectCatalogResolution as selectCatalogResolution2,
+  selectCatalogTrack,
+  readLimitedResponse,
+  downloadCatalogImage
+} from "@naxodev/music-core";
+var MAX_CONVERTED_PNG_BYTES = 1e6;
+var MAX_IMAGE_DIMENSION = 4096;
+var MAX_IMAGE_PIXELS = 12000000;
+var CONVERSION_TIMEOUT_MS = 3000;
+function imageDimensionsAreSafe(width, height) {
+  return Number.isInteger(width) && Number.isInteger(height) && width > 0 && height > 0 && width <= MAX_IMAGE_DIMENSION && height <= MAX_IMAGE_DIMENSION && width * height <= MAX_IMAGE_PIXELS;
+}
+async function runCommandWithTimeout(command, timeoutMs) {
+  const proc = Bun.spawn(command, { stdout: "pipe", stderr: "ignore" });
+  let timedOut = false;
+  const timer = setTimeout(() => {
+    timedOut = true;
+    proc.kill(9);
+  }, timeoutMs);
+  try {
+    const [out, code] = await Promise.all([
+      new Response(proc.stdout).text(),
+      proc.exited
+    ]);
+    return { code, out, timed_out: timedOut };
+  } finally {
+    clearTimeout(timer);
+  }
+}
+function dimensionsFromSips(output) {
+  const width = Number(output.match(/pixelWidth:\s*(\d+)/)?.[1]);
+  const height = Number(output.match(/pixelHeight:\s*(\d+)/)?.[1]);
+  return imageDimensionsAreSafe(width, height) ? { width, height } : null;
+}
+async function squarePng(bytes, size) {
+  if (bytes.byteLength === 0 || bytes.byteLength > MAX_ARTWORK_BYTES)
+    return null;
+  const dir = await mkdtemp(join(tmpdir(), "opencode-music-art-"));
+  const input = join(dir, "input");
+  const output = join(dir, "art.png");
+  try {
+    await Bun.write(input, bytes);
+    const inspected = await runCommandWithTimeout(["sips", "-g", "pixelWidth", "-g", "pixelHeight", input], CONVERSION_TIMEOUT_MS);
+    if (inspected.timed_out || inspected.code !== 0 || !dimensionsFromSips(inspected.out)) {
+      return null;
+    }
+    const converted = await runCommandWithTimeout([
+      "sips",
+      "-z",
+      String(size),
+      String(size),
+      "-s",
+      "format",
+      "png",
+      input,
+      "--out",
+      output
+    ], CONVERSION_TIMEOUT_MS);
+    if (converted.timed_out || converted.code !== 0)
+      return null;
+    const file = Bun.file(output);
+    if (file.size === 0 || file.size > MAX_CONVERTED_PNG_BYTES)
+      return null;
+    return new Uint8Array(await file.arrayBuffer());
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+}
+var hex = (r, g, b) => `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+function presentation(pngBytes) {
+  const image = PNG.sync.read(Buffer.from(pngBytes));
+  const cells = [];
+  let accent = "#7aa2f7";
+  let accentScore = -1;
+  for (let y = 0;y < image.height; y += 2) {
+    const row = [];
+    for (let x = 0;x < image.width; x++) {
+      const colors = [y, Math.min(y + 1, image.height - 1)].map((py) => {
+        const offset = (py * image.width + x) * 4;
+        const r = image.data[offset] ?? 0;
+        const g = image.data[offset + 1] ?? 0;
+        const b = image.data[offset + 2] ?? 0;
+        const max = Math.max(r, g, b) / 255;
+        const min = Math.min(r, g, b) / 255;
+        const light = (max + min) / 2;
+        const score = (max - min) * (1 - Math.abs(light - 0.5) * 2);
+        if (score > accentScore) {
+          accentScore = score;
+          accent = hex(r, g, b);
+        }
+        return hex(r, g, b);
+      });
+      row.push({ upper: colors[0], lower: colors[1] });
+    }
+    cells.push(row);
+  }
+  return { cells, accent };
+}
+async function resolveArtworkDetails(id, target, nativeBase64, legacyId = id, fetcher = fetch, signal) {
+  if (signal?.aborted)
+    return { artwork: null, duration_ms: target.duration_ms };
+  const candidates = [];
+  if (nativeBase64) {
+    try {
+      const maxBase64Length = Math.ceil(MAX_ARTWORK_BYTES / 3) * 4;
+      if (nativeBase64.length <= maxBase64Length) {
+        const bytes = new Uint8Array(Buffer.from(nativeBase64, "base64"));
+        if (bytes.byteLength <= MAX_ARTWORK_BYTES)
+          candidates.push(bytes);
+      }
+    } catch {}
+  }
+  for (const bytes of candidates) {
+    try {
+      const nativePng = await squarePng(bytes, 300);
+      const thumbnail = nativePng ? await squarePng(nativePng, 24) : null;
+      if (nativePng && thumbnail) {
+        return {
+          artwork: {
+            id,
+            legacy_id: legacyId,
+            png_base64: Buffer.from(nativePng).toString("base64"),
+            ...presentation(thumbnail)
+          },
+          duration_ms: target.duration_ms
+        };
+      }
+    } catch {}
+  }
+  const catalog = await acquireCatalogArtwork(target, {
+    fetch: fetcher,
+    signal
+  });
+  if (catalog.kind !== "available" || signal?.aborted)
+    return {
+      artwork: null,
+      duration_ms: catalog.duration_ms ?? target.duration_ms
+    };
+  if (!catalog.bytes) {
+    return { artwork: null, duration_ms: catalog.duration_ms };
+  }
+  try {
+    const nativePng = await squarePng(catalog.bytes, 300);
+    const thumbnail = nativePng ? await squarePng(nativePng, 24) : null;
+    if (!nativePng || !thumbnail) {
+      return { artwork: null, duration_ms: catalog.duration_ms };
+    }
+    return {
+      artwork: {
+        id,
+        legacy_id: legacyId,
+        png_base64: Buffer.from(nativePng).toString("base64"),
+        ...presentation(thumbnail)
+      },
+      duration_ms: catalog.duration_ms
+    };
+  } catch {
+    return { artwork: null, duration_ms: catalog.duration_ms };
+  }
+}
+
+// system-media.ts
+var MAX_ARTWORK_ENTRIES = 32;
+var artworkCache = new Map;
+var artworkJobs = new Map;
+var waitingArtwork = new Map;
+var sessionClientSequence = 0;
+var createOpenCodeSessionClient = (signal) => createReconnectingMusicSessionClient({
+  clientId: `opencode-music-player-${++sessionClientSequence}`,
+  hostKind: "opencode",
+  capabilities: [...baselineCapabilities],
+  ...signal ? { signal } : {}
+});
+function artworkIdentityKey(identity) {
+  return JSON.stringify([
+    identity.uid,
+    identity.title,
+    identity.artist,
+    identity.album,
+    identity.duration_ms
+  ]);
+}
+function artworkCacheKey(identity) {
+  return JSON.stringify([
+    identity.title,
+    identity.artist,
+    identity.album,
+    identity.duration_ms
+  ]);
+}
+function identityFromTrack(track) {
+  return {
+    uid: track.id,
+    title: track.name,
+    artist: track.artists,
+    album: track.album,
+    duration_ms: track.duration_ms
+  };
+}
+function removeWaitingInterest(host) {
+  for (const [key, deferred] of waitingArtwork) {
+    deferred.interests.delete(host);
+    if (deferred.interests.size === 0)
+      waitingArtwork.delete(key);
+  }
+}
+function admitDeferredArtwork() {
+  const next = waitingArtwork.entries().next().value;
+  if (!next)
+    return;
+  const [key, deferred] = next;
+  waitingArtwork.delete(key);
+  for (const host of deferred.interests.keys()) {
+    if (!host.isActive())
+      deferred.interests.delete(host);
+  }
+  const leader = deferred.interests.values().next().value;
+  if (!leader) {
+    admitDeferredArtwork();
+    return;
+  }
+  artworkForTrack(key, leader.legacyKey, leader.target, leader.native, leader.resolver, leader.host, leader.identity, leader.now);
+  const admitted = artworkJobs.get(key);
+  if (!admitted)
+    return;
+  for (const interest of deferred.interests.values()) {
+    if (interest.host.isActive())
+      admitted.interests.set(interest.host, interest.identity);
+  }
+}
+function releaseArtworkSlot(key, entry) {
+  artworkJobs.delete(key);
+  if (entry) {
+    artworkCache.set(key, entry);
+    if (artworkCache.size > MAX_ARTWORK_ENTRIES) {
+      const oldest = artworkCache.keys().next().value;
+      if (oldest)
+        artworkCache.delete(oldest);
+    }
+  }
+  admitDeferredArtwork();
+}
+function settleArtworkEntry(key, entry) {
+  releaseArtworkSlot(key, entry);
+}
+function publishArtworkCompletion(entry, artwork) {
+  for (const [host, identity] of entry.interests) {
+    if (!host.isActive() || !host.accepts(identity))
+      continue;
+    host.publish({
+      type: "artwork-completion",
+      identity,
+      artwork,
+      duration_ms: entry.duration_ms
+    });
+  }
+  entry.interests.clear();
+}
+function removeArtworkInterests(host) {
+  removeWaitingInterest(host);
+  for (const entry of artworkCache.values())
+    entry.interests.delete(host);
+  for (const entry of artworkJobs.values()) {
+    entry.interests.delete(host);
+    if (!entry.interests.size)
+      entry.abort.abort();
+  }
+}
+function artworkForTrack(key, legacyKey, target, native, resolver, host, identity, now) {
+  let entry = artworkJobs.get(key) ?? artworkCache.get(key);
+  if (entry?.abort.signal.aborted)
+    entry = undefined;
+  if (!entry) {
+    if (artworkJobs.has(key) || artworkJobs.size >= MAX_ARTWORK_ENTRIES) {
+      removeWaitingInterest(host);
+      let deferred = waitingArtwork.get(key);
+      if (!deferred && waitingArtwork.size < MAX_ARTWORK_ENTRIES) {
+        deferred = { interests: new Map };
+        waitingArtwork.set(key, deferred);
+      }
+      if (deferred && deferred.interests.size < MAX_ARTWORK_ENTRIES)
+        deferred.interests.set(host, {
+          legacyKey,
+          target,
+          native,
+          resolver,
+          host,
+          identity,
+          now
+        });
+      return {
+        artwork: null,
+        duration_ms: target.duration_ms,
+        loading: !!deferred && deferred.interests.has(host)
+      };
+    }
+    entry = {
+      value: null,
+      duration_ms: target.duration_ms,
+      resolved: false,
+      pending: false,
+      abort: new AbortController,
+      interests: new Map
+    };
+  }
+  removeWaitingInterest(host);
+  if (!entry.pending && !entry.resolved) {
+    entry.pending = true;
+    artworkJobs.set(key, entry);
+    const activeEntry = entry;
+    (async () => {
+      let data = null;
+      try {
+        data = await native();
+      } catch {}
+      return resolver(key, target, data, legacyKey, undefined, activeEntry.abort.signal);
+    })().then((resolution) => {
+      activeEntry.value = resolution.artwork;
+      activeEntry.duration_ms = resolution.duration_ms;
+      activeEntry.resolved = true;
+      activeEntry.pending = false;
+      if (activeEntry.abort.signal.aborted) {
+        releaseArtworkSlot(key);
+        return;
+      }
+      settleArtworkEntry(key, activeEntry);
+      publishArtworkCompletion(activeEntry, resolution.artwork);
+    }, () => {
+      activeEntry.value = null;
+      activeEntry.resolved = true;
+      activeEntry.pending = false;
+      if (activeEntry.abort.signal.aborted) {
+        releaseArtworkSlot(key);
+        return;
+      }
+      settleArtworkEntry(key, activeEntry);
+      publishArtworkCompletion(activeEntry, null);
+    });
+  }
+  if (entry.pending)
+    entry.interests.set(host, identity);
+  return {
+    artwork: entry.value,
+    duration_ms: entry.duration_ms,
+    loading: entry.pending
+  };
+}
+function createSessionSystemMedia(overrides = {}) {
+  const factory = overrides.createClient ?? createOpenCodeSessionClient;
+  const resolver = overrides.resolveArtworkDetails ?? resolveArtworkDetails;
+  const now = overrides.now ?? Date.now;
+  const listeners = new Set;
+  const presentationListeners = new Set;
+  const acquisitionAbort = new AbortController;
+  let disposed = false;
+  let currentArtworkIdentity = null;
+  let currentArtworkKey = null;
+  let client;
+  let installed = false;
+  let latest;
+  let latestStatus;
+  let latestConnection;
+  let acquisitionError;
+  let publishedLifecycle;
+  let unsubscribers = [];
+  let clientReleased = false;
+  let disposal;
+  const releaseClient = async (next) => {
+    if (clientReleased)
+      return;
+    clientReleased = true;
+    await next.dispose();
+  };
+  const emit = (event) => {
+    if (disposed)
+      return;
+    for (const listener of [...listeners]) {
+      try {
+        listener(event);
+      } catch {}
+    }
+  };
+  const host = {
+    publish(event) {
+      if (disposed)
+        return;
+      for (const listener of [...presentationListeners]) {
+        try {
+          listener(event);
+        } catch {}
+      }
+    },
+    isActive: () => !disposed,
+    accepts: (identity) => currentArtworkIdentity === artworkIdentityKey(identity)
+  };
+  const lifecycle = () => {
+    if (latestConnection?.type === "reconnecting" || latestConnection?.type === "terminal")
+      return {
+        type: "lifecycle",
+        message: latestConnection.error.message,
+        source: "connection"
+      };
+    if (latestConnection?.type === "disposed")
+      return {
+        type: "lifecycle",
+        message: "music session is disposed",
+        source: "connection"
+      };
+    if (acquisitionError)
+      return {
+        type: "lifecycle",
+        message: acquisitionError,
+        source: "acquisition"
+      };
+    return {
+      type: "lifecycle",
+      message: latestStatus && latestStatus.kind !== "ready" ? latestStatus.message : null,
+      source: "provider"
+    };
+  };
+  const publishLifecycle = () => {
+    const event = lifecycle();
+    const key = `${event.source}:${event.message}`;
+    if (publishedLifecycle === key)
+      return;
+    publishedLifecycle = key;
+    emit(event);
+  };
+  const project = (state) => {
+    const nextKey = state?.state.track ? artworkCacheKey(identityFromTrack(state.state.track)) : null;
+    if (nextKey !== currentArtworkKey)
+      removeArtworkInterests(host);
+    currentArtworkKey = nextKey;
+    if (!state) {
+      currentArtworkIdentity = null;
+      return null;
+    }
+    if (!state.state.track) {
+      currentArtworkIdentity = null;
+      return state.state;
+    }
+    const track = state.state.track;
+    const identity = identityFromTrack(track);
+    currentArtworkIdentity = artworkIdentityKey(identity);
+    const artworkState = artworkForTrack(artworkCacheKey(identity), artworkIdentityKey(identity), {
+      title: track.name,
+      artist: track.artists,
+      album: track.album,
+      duration_ms: track.duration_ms
+    }, async () => {
+      const active = await clientPromise;
+      if (disposed || active !== client)
+        return null;
+      const result = await active.artwork({
+        id: track.id,
+        name: track.name,
+        artists: track.artists,
+        album: track.album,
+        duration_ms: track.duration_ms
+      });
+      return active === client && result.type === "available" ? result.base64 : null;
+    }, resolver, host, identity, now);
+    return {
+      ...state.state,
+      track: {
+        ...track,
+        artwork: artworkState.artwork,
+        artwork_loading: artworkState.loading
+      }
+    };
+  };
+  const install = (next) => {
+    if (installed)
+      return;
+    installed = true;
+    client = next;
+    latest = next.state;
+    latestStatus = next.status;
+    latestConnection = next.connection;
+    unsubscribers = [
+      next.subscribeState((state) => {
+        if (disposed)
+          return;
+        latest = state;
+        emit({ type: "snapshot", state: project(state) });
+      }),
+      next.subscribeStatus((status) => {
+        if (disposed)
+          return;
+        latestStatus = status;
+        publishLifecycle();
+      }),
+      next.subscribeConnection((connection) => {
+        if (disposed)
+          return;
+        latestConnection = connection;
+        publishLifecycle();
+      })
+    ];
+  };
+  const clientPromise = Promise.resolve().then(() => factory(acquisitionAbort.signal)).then((next) => {
+    if (disposed) {
+      releaseClient(next).catch((error) => {
+        console.error("Failed to dispose late music session client", error);
+      });
+      return next;
+    }
+    install(next);
+    return next;
+  });
+  clientPromise.catch((error) => {
+    if (disposed)
+      return;
+    acquisitionError = error instanceof Error ? error.message : String(error);
+    publishLifecycle();
+  });
+  const activeClient = async () => {
+    const next = await clientPromise;
+    if (disposed || next !== client)
+      throw new Error("music session is disposed");
+    return next;
+  };
+  return {
+    async player() {
+      await activeClient();
+      return project(latest);
+    },
+    async refreshArtwork() {
+      await activeClient();
+      const track = latest?.state.track;
+      if (!track)
+        return;
+      const key = artworkCacheKey(identityFromTrack(track));
+      if (artworkJobs.has(key))
+        return;
+      artworkCache.delete(key);
+      emit({ type: "snapshot", state: project(latest) });
+    },
+    async play() {
+      await (await activeClient()).play();
+    },
+    async pause() {
+      await (await activeClient()).pause();
+    },
+    async next() {
+      await (await activeClient()).next();
+    },
+    async previous() {
+      await (await activeClient()).previous();
+    },
+    async seek(positionMs) {
+      await (await activeClient()).seek(positionMs);
+    },
+    subscribe(listener) {
+      if (disposed)
+        return () => {};
+      let closed = false;
+      listeners.add(listener);
+      try {
+        if (latest)
+          listener({ type: "snapshot", state: project(latest) });
+        if (installed || acquisitionError)
+          listener(lifecycle());
+      } catch {}
+      return () => {
+        if (closed)
+          return;
+        closed = true;
+        listeners.delete(listener);
+      };
+    },
+    subscribePresentation(listener) {
+      if (disposed)
+        return () => {};
+      let closed = false;
+      presentationListeners.add(listener);
+      return () => {
+        if (closed)
+          return;
+        closed = true;
+        presentationListeners.delete(listener);
+      };
+    },
+    dispose() {
+      if (disposal)
+        return disposal;
+      disposed = true;
+      disposal = Promise.resolve().then(async () => {
+        const errors = [];
+        for (const unsubscribe of unsubscribers.splice(0)) {
+          try {
+            unsubscribe();
+          } catch (error) {
+            errors.push(error);
+          }
+        }
+        listeners.clear();
+        presentationListeners.clear();
+        removeArtworkInterests(host);
+        if (client) {
+          try {
+            await releaseClient(client);
+          } catch (error) {
+            errors.push(error);
+          }
+        }
+        if (errors.length)
+          throw new AggregateError(errors, "music session cleanup failed");
+      });
+      acquisitionAbort.abort();
+      return disposal;
+    }
+  };
+}
+function openNowPlayingApp() {
+  Bun.spawn(["open", "https://music.youtube.com"], {
+    stdout: "ignore",
+    stderr: "ignore"
+  });
+}
+
+// types.ts
+import {
+  emptyPlayer as emptyCorePlayer,
+  formatMs,
+  isMac
+} from "@naxodev/music-core";
+function mergeArtworkCompletion(player, event) {
+  const track = player?.track;
+  if (!track || track.name !== event.identity.title || track.artists !== event.identity.artist || track.album !== event.identity.album || track.duration_ms > 0 && track.duration_ms !== event.identity.duration_ms) {
+    return player;
+  }
+  return {
+    ...player,
+    track: {
+      ...track,
+      artwork: event.artwork,
+      artwork_loading: false
+    }
+  };
+}
+function mergePlayerSnapshot(player, snapshot) {
+  const current = player?.track;
+  const next = snapshot.track;
+  if (!current || !next || current.name !== next.name || current.artists !== next.artists || current.album !== next.album || current.duration_ms > 0 && next.duration_ms > 0 && current.duration_ms !== next.duration_ms || current.artwork === null && current.artwork_loading !== false) {
+    return snapshot;
+  }
+  return {
+    ...snapshot,
+    track: {
+      ...next,
+      artwork: next.artwork ?? current.artwork,
+      artwork_loading: false
+    }
+  };
+}
+
+// ui.tsx
+import { memo as _$memo } from "@opentui/solid";
+import { effect as _$effect2 } from "@opentui/solid";
+import { insertNode as _$insertNode2 } from "@opentui/solid";
+import { insert as _$insert3 } from "@opentui/solid";
+import { use as _$use3 } from "@opentui/solid";
+import { setProp as _$setProp2 } from "@opentui/solid";
+import { createElement as _$createElement3 } from "@opentui/solid";
+import { createComponent as _$createComponent2 } from "@opentui/solid";
+import { Show, createEffect, createMemo, createSignal, onCleanup as onCleanup3, onMount as onMount3 } from "solid-js";
+import { MouseButton } from "@opentui/core";
+
+// artwork.tsx
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { For, onCleanup, onMount } from "solid-js";
+
+// artwork-placement.ts
+var CLEARED_STATE = {
+  transmitted: 0,
+  placement: null
+};
+function placementKey(placement) {
+  return [
+    placement.imageId,
+    placement.x,
+    placement.y,
+    placement.width,
+    placement.height
+  ].join(":");
+}
+function samePlacement(a, b) {
+  return a !== null && placementKey(a) === placementKey(b);
+}
+function planNativeArtworkPlacement(input) {
+  const { state, imageId, x, y, width, height } = input;
+  const desired = { imageId, x, y, width, height };
+  if (input.disposed || !input.kittySupported || !input.slotValid) {
+    if (state.transmitted !== 0) {
+      return {
+        actions: [{ type: "delete-image", imageId: state.transmitted }],
+        nextState: CLEARED_STATE
+      };
+    }
+    return { actions: [], nextState: state };
+  }
+  if (state.transmitted !== imageId) {
+    const actions2 = [];
+    if (state.transmitted !== 0) {
+      actions2.push({ type: "delete-image", imageId: state.transmitted });
+    } else {
+      actions2.push({ type: "delete-image", imageId });
+    }
+    actions2.push({
+      type: "transmit-and-display",
+      imageId,
+      x,
+      y,
+      width,
+      height
+    });
+    return {
+      actions: actions2,
+      nextState: { transmitted: imageId, placement: desired }
+    };
+  }
+  if (samePlacement(state.placement, desired)) {
+    return { actions: [], nextState: state };
+  }
+  const actions = [];
+  if (state.placement !== null || state.transmitted !== 0) {
+    actions.push({ type: "delete-placement", imageId });
+  }
+  actions.push({
+    type: "place",
+    imageId,
+    placementId: imageId,
+    x,
+    y,
+    width,
+    height
+  });
+  return {
+    actions,
+    nextState: { transmitted: imageId, placement: desired }
+  };
+}
+
+// kitty-graphics.ts
+var APC = "\x1B_G";
+var ST = "\x1B\\";
+var CHUNK_SIZE = 4096;
+function tmuxPassthrough(data) {
+  return `\x1BPtmux;${data.replaceAll("\x1B", "\x1B\x1B")}\x1B\\`;
+}
+function kittyTransmitPng(pngBase64, imageId) {
+  const chunks = [];
+  for (let offset = 0;offset < pngBase64.length; offset += CHUNK_SIZE) {
+    const chunk = pngBase64.slice(offset, offset + CHUNK_SIZE);
+    const more = offset + CHUNK_SIZE < pngBase64.length ? 1 : 0;
+    const control = offset === 0 ? `a=t,f=100,i=${imageId},q=2,m=${more}` : `m=${more}`;
+    chunks.push(`${APC}${control};${chunk}${ST}`);
+  }
+  return chunks;
+}
+function kittyDisplayPng(pngBase64, imageId, x, y, width, height) {
+  const chunks = kittyTransmitPng(pngBase64, imageId);
+  return chunks.map((command, index) => {
+    let next = command;
+    if (index === 0) {
+      next = next.replace(`${APC}a=t,f=100,i=${imageId},q=2,`, `\x1B7\x1B[${y + 1};${x + 1}H${APC}a=T,f=100,i=${imageId},p=${imageId},q=2,C=1,c=${width},r=${height},z=1,`);
+    }
+    return index === chunks.length - 1 ? `${next}\x1B8` : next;
+  });
+}
+function kittyPlace(imageId, placementId, x, y, width, height) {
+  return `\x1B7\x1B[${y + 1};${x + 1}H${APC}a=p,i=${imageId},p=${placementId},q=2,c=${width},r=${height},z=1;${ST}\x1B8`;
+}
+function kittyDelete(imageId) {
+  return `${APC}a=d,d=I,i=${imageId},q=2;${ST}`;
+}
+function kittyDeletePlacement(imageId) {
+  return `${APC}a=d,d=i,i=${imageId},q=2;${ST}`;
+}
+function kittyImageId(key) {
+  let hash = 2166136261;
+  for (let i = 0;i < key.length; i++) {
+    hash ^= key.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0 || 1;
+}
+function writeGraphics(renderer, data) {
+  const target = renderer;
+  if (!target.stdout || typeof target.realStdoutWrite !== "function")
+    return false;
+  const output = (value) => process.env.TMUX && !process.env.HERDR_ENV ? tmuxPassthrough(value) : value;
+  let cursorSaved = false;
+  try {
+    for (const command of typeof data === "string" ? [data] : data) {
+      if (command.includes("\x1B7"))
+        cursorSaved = true;
+      target.realStdoutWrite.call(target.stdout, output(command));
+      if (command.includes("\x1B8"))
+        cursorSaved = false;
+    }
+    return true;
+  } catch {
+    if (cursorSaved) {
+      try {
+        target.realStdoutWrite.call(target.stdout, output("\x1B8"));
+      } catch {}
+    }
+    return false;
+  }
+}
+
+// tmux-offset.ts
+var ZERO = { x: 0, y: 0 };
+function createTmuxOffsetCache() {
+  return { offset: null, slot: null };
+}
+function shouldUseTmuxOffset(env = process.env) {
+  return Boolean(env.TMUX) && !env.HERDR_ENV;
+}
+function slotKey(slot) {
+  return [slot.screenX, slot.screenY, slot.width, slot.height].join(":");
+}
+function sameSlotGeometry(a, b) {
+  if (a === null || b === null)
+    return false;
+  return slotKey(a) === slotKey(b);
+}
+function parseTmuxOffsetMessage(stdout) {
+  const [left, top, statusPosition, status] = stdout.trim().split("\t");
+  return {
+    x: Number.parseInt(left ?? "0", 10) || 0,
+    y: (Number.parseInt(top ?? "0", 10) || 0) + (statusPosition === "top" && status !== "off" ? 1 : 0)
+  };
+}
+function queryTmuxOffset() {
+  const result = Bun.spawnSync([
+    "tmux",
+    "display-message",
+    "-p",
+    "#{pane_left}\t#{pane_top}\t#{status-position}\t#{status}"
+  ]);
+  return {
+    ok: result.exitCode === 0,
+    stdout: result.stdout.toString()
+  };
+}
+function resolveTerminalOffset(options) {
+  const env = options.env ?? process.env;
+  if (!shouldUseTmuxOffset(env)) {
+    options.cache.offset = null;
+    options.cache.slot = null;
+    return ZERO;
+  }
+  if (options.cache.offset !== null && options.slot !== null && sameSlotGeometry(options.cache.slot, options.slot)) {
+    return options.cache.offset;
+  }
+  const query = options.query ?? queryTmuxOffset;
+  const result = query();
+  if (!result.ok) {
+    options.cache.offset = null;
+    options.cache.slot = null;
+    return ZERO;
+  }
+  const offset = parseTmuxOffsetMessage(result.stdout);
+  options.cache.offset = offset;
+  options.cache.slot = options.slot ? { ...options.slot } : null;
+  return offset;
+}
+
+// artwork.tsx
+var tmuxOffsetCache = createTmuxOffsetCache();
+var nativeArtworkImageId = kittyImageId("opencode-music-player:artwork");
+var defaultOwnershipScope = {
+  latestOwner: 0
+};
+var nativeArtworkRuntimes = new WeakMap;
+function nativeArtworkRuntime(renderer) {
+  const existing = nativeArtworkRuntimes.get(renderer);
+  if (existing)
+    return existing;
+  const created = {
+    latestOwner: 0,
+    state: {
+      transmitted: 0,
+      placement: null
+    },
+    identity: ""
+  };
+  nativeArtworkRuntimes.set(renderer, created);
+  return created;
+}
+function claimNativeArtworkOwnership(scope = defaultOwnershipScope) {
+  const owner = ++scope.latestOwner;
+  return {
+    isCurrent: () => owner === scope.latestOwner
+  };
+}
+function cleanupNativeArtwork(ownership, remove) {
+  if (ownership.isCurrent())
+    remove();
+}
+function imageIdForArtwork(_artworkId) {
+  return nativeArtworkImageId;
+}
+function legacyImageIdForArtwork(artworkId) {
+  return kittyImageId(artworkId);
+}
+function legacyImageIdForResolvedArtwork(artwork) {
+  return legacyImageIdForArtwork(artwork.legacy_id ?? artwork.id);
+}
+function terminalOffset(slot) {
+  return resolveTerminalOffset({
+    slot,
+    cache: tmuxOffsetCache
+  });
+}
+function supportsKittyGraphics(context) {
+  return !!context.renderer.capabilities?.kitty_graphics || process.env.TERM_PROGRAM?.toLowerCase() === "ghostty";
+}
+function copyState(next) {
+  return {
+    transmitted: next.transmitted,
+    placement: next.placement ? {
+      ...next.placement
+    } : null
+  };
+}
+function AlbumArtwork(props) {
+  const renderer = props.context.renderer;
+  const runtime = nativeArtworkRuntime(renderer);
+  const ownership = claimNativeArtworkOwnership(runtime);
+  let container;
+  let paintPending = false;
+  let disposed = false;
+  const applyAction = (action) => {
+    const renderer2 = props.context.renderer;
+    switch (action.type) {
+      case "delete-image":
+        return writeGraphics(renderer2, kittyDelete(action.imageId));
+      case "delete-placement":
+        return writeGraphics(renderer2, kittyDeletePlacement(action.imageId));
+      case "transmit-and-display": {
+        const commands = kittyDisplayPng(props.artwork.png_base64, action.imageId, action.x, action.y, action.width, action.height);
+        return writeGraphics(renderer2, commands);
+      }
+      case "place":
+        return writeGraphics(renderer2, kittyPlace(action.imageId, action.placementId, action.x, action.y, action.width, action.height));
+    }
+  };
+  const applyPlan = (plan) => {
+    for (const action of plan.actions) {
+      if (!applyAction(action))
+        return false;
+    }
+    return true;
+  };
+  const commitPlan = (plan) => {
+    runtime.state = copyState(plan.nextState);
+  };
+  const paintNativeImage = () => {
+    if (!ownership.isCurrent())
+      return;
+    if (runtime.identity !== props.artwork.id) {
+      runtime.identity = props.artwork.id;
+      writeGraphics(props.context.renderer, kittyDelete(legacyImageIdForResolvedArtwork(props.artwork)));
+      runtime.state = {
+        transmitted: 0,
+        placement: null
+      };
+    }
+    const kittySupported = supportsKittyGraphics(props.context);
+    const slotValid = !!container && !container.isDestroyed && container.width >= 1 && container.height >= 1;
+    const slot = container ? {
+      screenX: container.screenX,
+      screenY: container.screenY,
+      width: container.width,
+      height: container.height
+    } : null;
+    const offset = terminalOffset(slot);
+    const imageId = imageIdForArtwork(props.artwork.id);
+    const x = slot ? slot.screenX + offset.x : 0;
+    const y = slot ? slot.screenY + offset.y : 0;
+    const width = slot?.width ?? 0;
+    const height = slot?.height ?? 0;
+    const plan = planNativeArtworkPlacement({
+      state: runtime.state,
+      imageId,
+      x,
+      y,
+      width,
+      height,
+      kittySupported,
+      slotValid,
+      disposed
+    });
+    if (plan.actions.length === 0)
+      return;
+    if (applyPlan(plan))
+      commitPlan(plan);
+  };
+  const scheduleNativeImage = () => {
+    if (paintPending || disposed)
+      return;
+    paintPending = true;
+    props.context.renderer.idle().then(() => {
+      paintPending = false;
+      if (!disposed && ownership.isCurrent())
+        paintNativeImage();
+    });
+  };
+  onMount(() => props.context.renderer.on("frame", scheduleNativeImage));
+  onCleanup(() => {
+    disposed = true;
+    props.context.renderer.off("frame", scheduleNativeImage);
+    setTimeout(() => {
+      cleanupNativeArtwork(ownership, () => {
+        if (!renderer.isDestroyed)
+          writeGraphics(renderer, kittyDelete(nativeArtworkImageId));
+        runtime.state = {
+          transmitted: 0,
+          placement: null
+        };
+        runtime.identity = "";
+      });
+    }, 0);
+  });
+  return (() => {
+    var _el$ = _$createElement("box");
+    _$use((value) => container = value, _el$);
+    _$setProp(_el$, "width", 24);
+    _$setProp(_el$, "height", 12);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "overflow", "hidden");
+    _$insert(_el$, _$createComponent(For, {
+      get each() {
+        return props.artwork.cells;
+      },
+      children: (row) => (() => {
+        var _el$2 = _$createElement("text");
+        _$insert(_el$2, _$createComponent(For, {
+          each: row,
+          children: (cell) => (() => {
+            var _el$3 = _$createElement("span");
+            _$insertNode(_el$3, _$createTextNode(`\u2580`));
+            _$effect((_$p) => _$setProp(_el$3, "style", {
+              fg: cell.upper,
+              bg: cell.lower
+            }, _$p));
+            return _el$3;
+          })()
+        }));
+        return _el$2;
+      })()
+    }));
+    return _el$;
+  })();
+}
+
+// waveform.tsx
+import { insert as _$insert2 } from "@opentui/solid";
+import { use as _$use2 } from "@opentui/solid";
+import { createElement as _$createElement2 } from "@opentui/solid";
+import { createEngine, displayLevel, isFlat, sameTrackIdentity, stepEngine, waveformSeedKey } from "@naxodev/music-core";
+import { onCleanup as onCleanup2, onMount as onMount2 } from "solid-js";
+import { StyledText, fg } from "@opentui/core";
+function createWaveformCoordinator(options) {
+  let player = null;
+  let bars = 0;
+  let requestedKey = "";
+  let engineKey = "";
+  let engine = null;
+  let timer = null;
+  const stop = () => {
+    if (timer === null)
+      return;
+    options.scheduler.clearInterval(timer);
+    timer = null;
+  };
+  const start = () => {
+    if (timer !== null || !player?.track)
+      return;
+    timer = options.scheduler.setInterval(() => frame(), options.intervalMs);
+  };
+  const frame = (seek = false) => {
+    const track = player?.track;
+    if (!player || !track) {
+      stop();
+      return null;
+    }
+    const key = engineKey || requestedKey;
+    if (!engine || engine.n !== bars || engineKey !== key) {
+      engine = createEngine(bars, key);
+      engineKey = key;
+    }
+    stepEngine(engine, {
+      track_key: key,
+      bars,
+      progress_ms: player.progress_ms,
+      fetched_at: player.fetched_at,
+      is_playing: player.is_playing,
+      duration_ms: track.duration_ms,
+      now_ms: options.now(),
+      seek
+    });
+    options.render(player, engine);
+    if (player.is_playing || !isFlat(engine))
+      start();
+    else
+      stop();
+    return engine;
+  };
+  return {
+    setInput: (next, trackIdentity, nextBars) => {
+      if (!next?.track) {
+        player = null;
+        engine = null;
+        engineKey = "";
+        requestedKey = "";
+        bars = nextBars;
+        stop();
+        options.clear();
+        return;
+      }
+      if (bars !== nextBars || player?.track && !sameTrackIdentity(player.track, next.track)) {
+        engine = null;
+        engineKey = "";
+      }
+      player = next;
+      requestedKey = trackIdentity;
+      bars = nextBars;
+    },
+    frame,
+    start,
+    stop,
+    dispose: () => {
+      stop();
+      player = null;
+      engine = null;
+      engineKey = "";
+      requestedKey = "";
+    }
+  };
+}
+var BLOCK = [" ", "\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+var BLUE = [
+  "#1a1b26",
+  "#24283b",
+  "#3d59a1",
+  "#414868",
+  "#565f89",
+  "#7aa2f7",
+  "#89b4fa",
+  "#b4c0f7",
+  "#c0caf5"
+];
+function blueFor(level, playing, theme) {
+  if (!playing && level < 0.05)
+    return theme.text.subdued;
+  if (level <= 0.02)
+    return BLUE[1];
+  const idx = Math.min(BLUE.length - 1, Math.floor(level * (BLUE.length - 1)));
+  return BLUE[Math.max(2, idx)];
+}
+function blockChar(level) {
+  return BLOCK[Math.max(0, Math.min(8, Math.round(level * 8)))];
+}
+function Waveform(props) {
+  const barCount = () => props.bars ?? (props.variant === "hero" ? 48 : 16);
+  let text;
+  const paint = (player, engine) => {
+    if (!text)
+      return;
+    const playing = player.is_playing;
+    text.content = new StyledText(Array.from({
+      length: barCount()
+    }, (_, index) => {
+      const level = displayLevel(engine.levels[index] ?? 0, index, playing);
+      return fg(blueFor(level, playing || level > 0.05, props.theme))(blockChar(level));
+    }));
+  };
+  const coordinator = createWaveformCoordinator({
+    now: () => Date.now(),
+    scheduler: {
+      setInterval,
+      clearInterval: (timer) => clearInterval(timer)
+    },
+    intervalMs: props.variant === "hero" ? 48 : 64,
+    render: paint,
+    clear: () => {
+      if (text)
+        text.content = " ".repeat(barCount());
+    }
+  });
+  const update = (player) => {
+    coordinator.setInput(player, player?.track ? waveformSeedKey(player.track.name, player.track.id) : "", barCount());
+    coordinator.frame();
+  };
+  const unsubscribe = props.source.subscribe(update);
+  onMount2(() => coordinator.frame());
+  onCleanup2(() => {
+    unsubscribe();
+    coordinator.dispose();
+  });
+  return (() => {
+    var _el$ = _$createElement2("text");
+    _$use2((element) => text = element, _el$);
+    _$insert2(_el$, () => " ".repeat(barCount()));
+    return _el$;
+  })();
+}
+
+// ui.tsx
+var t = (s) => s + "\uFE0E";
+var Icon = {
+  prev: t("\u23EE"),
+  next: t("\u23ED"),
+  play: t("\u25B6"),
+  pause: t("\u23F8"),
+  scrub: "\u25CF"
+};
+var TRANSPORT_LAYOUT = {
+  prevWidth: 6,
+  playWidth: 10,
+  nextWidth: 6,
+  height: 2,
+  gap: 1
+};
+var COMPACT_MARKER_WIDTH = 1;
+var COMPACT_TITLE_SEPARATOR = " ";
+var COMPACT_SEPARATOR = " - ";
+var COMPACT_SEEK_FRACTION = 0.8;
+function compactSeekRegionWidth(width) {
+  if (!Number.isFinite(width) || width <= 0)
+    return 0;
+  const available = Math.floor(width);
+  return Math.max(0, Math.min(available, Math.round(available * COMPACT_SEEK_FRACTION)));
+}
+function seekPositionForCell(cell, width, durationMs) {
+  if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(durationMs) || durationMs <= 0) {
+    return null;
+  }
+  const lastCell = Math.max(0, Math.floor(width) - 1);
+  const clampedCell = Math.max(0, Math.min(lastCell, Math.floor(cell)));
+  const ratio = lastCell === 0 ? 0 : clampedCell / lastCell;
+  return Math.round(ratio * durationMs);
+}
+var COMPACT_BUDGETS = {
+  wide: {
+    minWidth: 55,
+    padding: 1,
+    titleWidth: 28,
+    artistWidth: 20
+  },
+  medium: {
+    minWidth: 32,
+    padding: 1,
+    titleWidth: 28,
+    artistWidth: 0
+  },
+  narrow: {
+    minWidth: 6,
+    padding: 1,
+    titleWidth: 2,
+    artistWidth: 0
+  },
+  markerOnly: {
+    minWidth: 1,
+    padding: 0,
+    titleWidth: 0,
+    artistWidth: 0
+  }
+};
+function sanitizeTerminalText(value, fallback = "") {
+  const clean = value.normalize("NFC").replace(/(?:\x1b\]|\x9d)[\s\S]*?(?:\x07|\x1b\\|\x9c|$)/g, "").replace(/(?:\x1b\[|\x9b)[0-?]*[ -/]*[@-~]/g, "").replace(/[\u0000-\u001f\u007f-\u009f\u2028\u2029]+/g, " ").replace(/\s+/g, " ").trim();
+  return clean || fallback;
+}
+function truncate(value, width) {
+  if (Bun.stringWidth(value) <= width)
+    return value;
+  if (width <= 1)
+    return "\u2026";
+  let result = "";
+  for (const character of value) {
+    if (Bun.stringWidth(result + character) > width - 1)
+      break;
+    result += character;
+  }
+  return `${result}\u2026`;
+}
+function compactPresentation(width, title, artist, playing) {
+  const available = Math.max(1, Math.floor(width));
+  const marker = playing ? Icon.pause : Icon.play;
+  const cleanTitle = sanitizeTerminalText(title, "Unknown track");
+  const cleanArtist = sanitizeTerminalText(artist);
+  const tier = available >= COMPACT_BUDGETS.wide.minWidth ? "wide" : available >= COMPACT_BUDGETS.medium.minWidth ? "medium" : available >= COMPACT_BUDGETS.narrow.minWidth ? "narrow" : "markerOnly";
+  const budget = COMPACT_BUDGETS[tier];
+  if (tier === "markerOnly") {
+    return {
+      tier,
+      marker,
+      padding: budget.padding,
+      title: null,
+      artist: null
+    };
+  }
+  const fixedWidth = COMPACT_MARKER_WIDTH + COMPACT_TITLE_SEPARATOR.length + budget.padding * 2;
+  const titleWidth = tier === "narrow" ? available - fixedWidth : budget.titleWidth;
+  return {
+    tier,
+    marker,
+    padding: budget.padding,
+    title: truncate(cleanTitle, titleWidth),
+    artist: tier === "wide" && cleanArtist ? truncate(cleanArtist, budget.artistWidth) : null
+  };
+}
+function CompactPlayer(props) {
+  const theme = () => props.context.theme;
+  let row;
+  let content;
+  let allocatedWidth = Number.MAX_SAFE_INTEGER;
+  const track = createMemo(() => props.state.player?.track);
+  const renderLine = () => {
+    const current = track();
+    if (!current)
+      return "";
+    const display = compactPresentation(allocatedWidth, current.name, current.artists, !!props.state.player?.is_playing);
+    const padding = " ".repeat(display.padding);
+    return `${padding}${display.marker}${display.title ? `${COMPACT_TITLE_SEPARATOR}${display.title}` : ""}${display.artist ? `${COMPACT_SEPARATOR}${display.artist}` : ""}${padding}`;
+  };
+  const updateContent = () => {
+    const line = renderLine();
+    if (content)
+      content.content = line;
+  };
+  const updateWidth = function() {
+    allocatedWidth = Math.max(1, this.width);
+    updateContent();
+  };
+  createEffect(updateContent);
+  onCleanup3(() => {
+    if (row?.onSizeChange === updateWidth)
+      row.onSizeChange = undefined;
+  });
+  return _$createComponent2(Show, {
+    get when() {
+      return track();
+    },
+    children: (_track) => (() => {
+      var _el$ = _$createElement3("box"), _el$2 = _$createElement3("text");
+      _$insertNode2(_el$, _el$2);
+      _$use3((element) => {
+        row = element;
+        element.onSizeChange = updateWidth;
+      }, _el$);
+      _$setProp2(_el$, "id", "music-compact-player");
+      _$setProp2(_el$, "width", "100%");
+      _$setProp2(_el$, "alignSelf", "stretch");
+      _$setProp2(_el$, "minWidth", 0);
+      _$setProp2(_el$, "height", 1);
+      _$setProp2(_el$, "flexDirection", "row");
+      _$setProp2(_el$, "flexShrink", 0);
+      _$setProp2(_el$, "overflow", "hidden");
+      _$setProp2(_el$, "onMouseDown", (event) => {
+        if (event.button !== MouseButton.LEFT)
+          return;
+        const current = props.state.player?.track;
+        if (!current || !row)
+          return;
+        const seekWidth = compactSeekRegionWidth(row.width);
+        const cell = Math.floor(event.x - row.x);
+        const markerCell = compactPresentation(row.width, current.name, current.artists, !!props.state.player?.is_playing).padding;
+        if (cell === markerCell) {
+          event.preventDefault();
+          event.stopPropagation();
+          props.onPlayPause();
+          return;
+        }
+        if (cell < 0 || cell >= seekWidth)
+          return;
+        const position = seekPositionForCell(cell, seekWidth, current.duration_ms);
+        if (position === null)
+          return;
+        event.preventDefault();
+        event.stopPropagation();
+        props.onSeek(position);
+      });
+      _$use3((element) => {
+        content = element;
+        updateContent();
+      }, _el$2);
+      _$setProp2(_el$2, "wrapMode", "none");
+      _$setProp2(_el$2, "truncate", true);
+      _$insert3(_el$2, renderLine);
+      _$effect2((_$p) => _$setProp2(_el$2, "fg", theme().text.action.primary.default, _$p));
+      return _el$;
+    })()
+  });
+}
+function liveProgress(player, now = Date.now()) {
+  if (!player?.track)
+    return 0;
+  if (!player.is_playing)
+    return player.progress_ms;
+  return Math.min(player.track.duration_ms, player.progress_ms + (Math.max(now, player.fetched_at) - player.fetched_at));
+}
+function progressSegments(progress, duration, width) {
+  if (duration <= 0)
+    return {
+      left: "",
+      thumb: "",
+      right: "\u2500".repeat(width)
+    };
+  const ratio = Math.max(0, Math.min(1, progress / duration));
+  const track = width - 1;
+  const filled = Math.max(0, Math.min(track, Math.round(ratio * track)));
+  return {
+    left: "\u2501".repeat(filled),
+    thumb: Icon.scrub,
+    right: "\u2500".repeat(Math.max(0, track - filled))
+  };
+}
+function ProgressBar(props) {
+  let bar;
+  let leftNode;
+  let thumbNode;
+  let rightNode;
+  const width = () => Math.max(8, props.width ?? 28);
+  const rendered = () => {
+    const player = props.source.current();
+    return progressSegments(liveProgress(player), player?.track?.duration_ms ?? 0, width());
+  };
+  const paint = () => {
+    const next = rendered();
+    if (leftNode)
+      leftNode.children = [next.left];
+    if (thumbNode)
+      thumbNode.children = [next.thumb];
+    if (rightNode)
+      rightNode.children = [next.right];
+  };
+  onMount3(() => {
+    const unsubscribe = props.source.subscribe(() => paint());
+    const timer = setInterval(() => {
+      if (props.source.current()?.is_playing)
+        paint();
+    }, 1000);
+    onCleanup3(() => {
+      unsubscribe();
+      clearInterval(timer);
+    });
+  });
+  return (() => {
+    var _el$3 = _$createElement3("box"), _el$4 = _$createElement3("text"), _el$5 = _$createElement3("span"), _el$6 = _$createElement3("span"), _el$7 = _$createElement3("span");
+    _$insertNode2(_el$3, _el$4);
+    _$use3((element) => bar = element, _el$3);
+    _$setProp2(_el$3, "id", "music-sidebar-seek");
+    _$setProp2(_el$3, "height", 1);
+    _$setProp2(_el$3, "onMouseDown", (event) => {
+      if (event.button !== MouseButton.LEFT || !bar)
+        return;
+      const position = seekPositionForCell(event.x - bar.x, bar.width, props.source.current()?.track?.duration_ms ?? 0);
+      if (position === null)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      props.onSeek(position);
+    });
+    _$insertNode2(_el$4, _el$5);
+    _$insertNode2(_el$4, _el$6);
+    _$insertNode2(_el$4, _el$7);
+    _$use3((element) => leftNode = element, _el$5);
+    _$insert3(_el$5, () => rendered().left);
+    _$use3((element) => thumbNode = element, _el$6);
+    _$insert3(_el$6, () => rendered().thumb);
+    _$use3((element) => rightNode = element, _el$7);
+    _$insert3(_el$7, () => rendered().right);
+    _$effect2((_p$) => {
+      var _v$ = width(), _v$2 = {
+        fg: props.accent ?? props.theme.text.action.primary.default
+      }, _v$3 = {
+        fg: props.accent ?? props.theme.text.action.primary.default
+      }, _v$4 = {
+        fg: props.theme.text.subdued
+      };
+      _v$ !== _p$.e && (_p$.e = _$setProp2(_el$3, "width", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp2(_el$5, "style", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp2(_el$6, "style", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp2(_el$7, "style", _v$4, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$3;
+  })();
+}
+function LiveElapsed(props) {
+  let text;
+  const paint = () => {
+    if (text)
+      text.content = formatMs(liveProgress(props.source.current()));
+  };
+  onMount3(() => {
+    const unsubscribe = props.source.subscribe(() => paint());
+    const timer = setInterval(() => {
+      if (props.source.current()?.is_playing)
+        paint();
+    }, 1000);
+    onCleanup3(() => {
+      unsubscribe();
+      clearInterval(timer);
+    });
+  });
+  return (() => {
+    var _el$8 = _$createElement3("text");
+    _$use3((element) => text = element, _el$8);
+    _$insert3(_el$8, () => formatMs(liveProgress(props.source.current())));
+    _$effect2((_$p) => _$setProp2(_el$8, "fg", props.theme.text.subdued, _$p));
+    return _el$8;
+  })();
+}
+function IconBtn(props) {
+  const [hover, setHover] = createSignal(false);
+  const [press, setPress] = createSignal(false);
+  const bg = () => {
+    if (press() || props.active) {
+      return props.theme.background.action.primary.default;
+    }
+    return props.theme.background.surface.offset;
+  };
+  const fg2 = () => {
+    if (press() || props.active)
+      return props.accent ?? props.theme.text.action.primary.default;
+    if (props.primary) {
+      return hover() ? props.theme.text.action.primary.default : props.theme.text.default;
+    }
+    return hover() ? props.theme.text.action.primary.default : props.theme.text.default;
+  };
+  const w = () => props.width ?? 3;
+  const h = () => props.height ?? 1;
+  return (() => {
+    var _el$9 = _$createElement3("box"), _el$0 = _$createElement3("text");
+    _$insertNode2(_el$9, _el$0);
+    _$setProp2(_el$9, "onMouseDown", () => {
+      setPress(true);
+      props.onClick();
+    });
+    _$setProp2(_el$9, "onMouseUp", () => setPress(false));
+    _$setProp2(_el$9, "onMouseOver", () => setHover(true));
+    _$setProp2(_el$9, "onMouseOut", () => {
+      setHover(false);
+      setPress(false);
+    });
+    _$setProp2(_el$9, "flexShrink", 0);
+    _$setProp2(_el$9, "alignItems", "center");
+    _$setProp2(_el$9, "justifyContent", "center");
+    _$insert3(_el$0, () => props.icon);
+    _$effect2((_p$) => {
+      var _v$5 = w(), _v$6 = h(), _v$7 = bg(), _v$8 = fg2();
+      _v$5 !== _p$.e && (_p$.e = _$setProp2(_el$9, "width", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp2(_el$9, "height", _v$6, _p$.t));
+      _v$7 !== _p$.a && (_p$.a = _$setProp2(_el$9, "backgroundColor", _v$7, _p$.a));
+      _v$8 !== _p$.o && (_p$.o = _$setProp2(_el$0, "fg", _v$8, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$9;
+  })();
+}
+function SidebarPlayer(props) {
+  const theme = () => props.context.theme;
+  let latestPlayer = props.state.player;
+  const presentationListeners = new Set;
+  const publishPlayer = (player2) => {
+    latestPlayer = player2;
+    for (const listener of [...presentationListeners]) {
+      try {
+        listener(player2);
+      } catch {}
+    }
+  };
+  const source = {
+    current: () => latestPlayer,
+    subscribe(listener) {
+      presentationListeners.add(listener);
+      try {
+        listener(latestPlayer);
+      } catch {}
+      return () => presentationListeners.delete(listener);
+    }
+  };
+  createEffect(() => publishPlayer(props.state.player));
+  const unsubscribeSession = props.subscribe?.((state) => publishPlayer(state.player));
+  onCleanup3(() => {
+    unsubscribeSession?.();
+    presentationListeners.clear();
+  });
+  const player = createMemo(() => props.state.player);
+  const track = createMemo(() => player()?.track);
+  const playing = createMemo(() => !!player()?.is_playing);
+  const duration = createMemo(() => track()?.duration_ms ?? 0);
+  return (() => {
+    var _el$1 = _$createElement3("box"), _el$10 = _$createElement3("box"), _el$11 = _$createElement3("box"), _el$12 = _$createElement3("box"), _el$16 = _$createElement3("box");
+    _$insertNode2(_el$1, _el$10);
+    _$insertNode2(_el$1, _el$12);
+    _$insertNode2(_el$1, _el$16);
+    _$setProp2(_el$1, "flexDirection", "column");
+    _$setProp2(_el$1, "border", ["top"]);
+    _$setProp2(_el$1, "paddingLeft", 1);
+    _$setProp2(_el$1, "paddingRight", 1);
+    _$setProp2(_el$1, "paddingTop", 1);
+    _$setProp2(_el$1, "paddingBottom", 1);
+    _$setProp2(_el$1, "gap", 1);
+    _$setProp2(_el$1, "flexShrink", 0);
+    _$insert3(_el$1, _$createComponent2(Show, {
+      get when() {
+        return props.state.error;
+      },
+      children: (err) => (() => {
+        var _el$17 = _$createElement3("text");
+        _$insert3(_el$17, () => sanitizeTerminalText(err()));
+        _$effect2((_$p) => _$setProp2(_el$17, "fg", theme().text.feedback.error.default, _$p));
+        return _el$17;
+      })()
+    }), _el$10);
+    _$insertNode2(_el$10, _el$11);
+    _$setProp2(_el$10, "flexDirection", "row");
+    _$setProp2(_el$10, "justifyContent", "center");
+    _$setProp2(_el$11, "width", 24);
+    _$setProp2(_el$11, "height", 12);
+    _$setProp2(_el$11, "overflow", "hidden");
+    _$insert3(_el$11, _$createComponent2(Show, {
+      get when() {
+        return track()?.artwork;
+      },
+      get fallback() {
+        return (() => {
+          var _el$18 = _$createElement3("box"), _el$19 = _$createElement3("text");
+          _$insertNode2(_el$18, _el$19);
+          _$setProp2(_el$18, "width", 24);
+          _$setProp2(_el$18, "height", 12);
+          _$setProp2(_el$18, "alignItems", "center");
+          _$setProp2(_el$18, "justifyContent", "center");
+          _$insert3(_el$19, (() => {
+            var _c$ = _$memo(() => !!track());
+            return () => _c$() ? track()?.artwork_loading ? "Loading artwork\u2026" : "Artwork unavailable" : "";
+          })());
+          _$effect2((_$p) => _$setProp2(_el$19, "fg", theme().text.subdued, _$p));
+          return _el$18;
+        })();
+      },
+      children: (artwork) => _$createComponent2(AlbumArtwork, {
+        get context() {
+          return props.context;
+        },
+        get artwork() {
+          return artwork();
+        }
+      })
+    }));
+    _$insert3(_el$1, _$createComponent2(Show, {
+      get when() {
+        return track();
+      },
+      get fallback() {
+        return (() => {
+          var _el$20 = _$createElement3("text");
+          _$insert3(_el$20, () => props.state.loading ? "Syncing\u2026" : "Nothing playing");
+          _$effect2((_$p) => _$setProp2(_el$20, "fg", theme().text.subdued, _$p));
+          return _el$20;
+        })();
+      },
+      children: (t2) => (() => {
+        var _el$21 = _$createElement3("box"), _el$22 = _$createElement3("text"), _el$23 = _$createElement3("b");
+        _$insertNode2(_el$21, _el$22);
+        _$setProp2(_el$21, "flexDirection", "column");
+        _$setProp2(_el$21, "gap", 0);
+        _$insertNode2(_el$22, _el$23);
+        _$insert3(_el$23, () => sanitizeTerminalText(t2().name, "Unknown track"));
+        _$insert3(_el$21, _$createComponent2(Show, {
+          get when() {
+            return t2().artists;
+          },
+          get children() {
+            var _el$24 = _$createElement3("text");
+            _$insert3(_el$24, () => sanitizeTerminalText(t2().artists));
+            _$effect2((_$p) => _$setProp2(_el$24, "fg", theme().text.subdued, _$p));
+            return _el$24;
+          }
+        }), null);
+        _$insert3(_el$21, _$createComponent2(Show, {
+          get when() {
+            return t2().album;
+          },
+          get children() {
+            var _el$25 = _$createElement3("text");
+            _$insert3(_el$25, () => sanitizeTerminalText(t2().album));
+            _$effect2((_$p) => _$setProp2(_el$25, "fg", theme().text.subdued, _$p));
+            return _el$25;
+          }
+        }), null);
+        _$effect2((_$p) => _$setProp2(_el$22, "fg", theme().text.default, _$p));
+        return _el$21;
+      })()
+    }), _el$12);
+    _$setProp2(_el$12, "flexDirection", "row");
+    _$setProp2(_el$12, "justifyContent", "center");
+    _$setProp2(_el$12, "overflow", "hidden");
+    _$insert3(_el$12, _$createComponent2(Waveform, {
+      get theme() {
+        return theme();
+      },
+      source,
+      bars: 24,
+      variant: "hero"
+    }));
+    _$insert3(_el$1, _$createComponent2(Show, {
+      get when() {
+        return _$memo(() => !!track())() && duration() > 0;
+      },
+      get children() {
+        var _el$13 = _$createElement3("box"), _el$14 = _$createElement3("box"), _el$15 = _$createElement3("text");
+        _$insertNode2(_el$13, _el$14);
+        _$setProp2(_el$13, "flexDirection", "column");
+        _$setProp2(_el$13, "gap", 0);
+        _$setProp2(_el$13, "overflow", "hidden");
+        _$insert3(_el$13, _$createComponent2(ProgressBar, {
+          get theme() {
+            return theme();
+          },
+          source,
+          width: 24,
+          get accent() {
+            return track()?.artwork?.accent;
+          },
+          get onSeek() {
+            return props.onSeek;
+          }
+        }), _el$14);
+        _$insertNode2(_el$14, _el$15);
+        _$setProp2(_el$14, "flexDirection", "row");
+        _$setProp2(_el$14, "justifyContent", "space-between");
+        _$insert3(_el$14, _$createComponent2(LiveElapsed, {
+          get theme() {
+            return theme();
+          },
+          source
+        }), _el$15);
+        _$insert3(_el$15, () => formatMs(duration()));
+        _$effect2((_$p) => _$setProp2(_el$15, "fg", theme().text.subdued, _$p));
+        return _el$13;
+      }
+    }), _el$16);
+    _$setProp2(_el$16, "flexDirection", "row");
+    _$setProp2(_el$16, "justifyContent", "center");
+    _$insert3(_el$16, _$createComponent2(IconBtn, {
+      get theme() {
+        return theme();
+      },
+      get icon() {
+        return Icon.prev;
+      },
+      get width() {
+        return TRANSPORT_LAYOUT.prevWidth;
+      },
+      get height() {
+        return TRANSPORT_LAYOUT.height;
+      },
+      onClick: () => props.onPrev()
+    }), null);
+    _$insert3(_el$16, _$createComponent2(IconBtn, {
+      get theme() {
+        return theme();
+      },
+      get icon() {
+        return _$memo(() => !!playing())() ? Icon.pause : Icon.play;
+      },
+      primary: true,
+      get active() {
+        return playing();
+      },
+      get accent() {
+        return track()?.artwork?.accent;
+      },
+      get width() {
+        return TRANSPORT_LAYOUT.playWidth;
+      },
+      get height() {
+        return TRANSPORT_LAYOUT.height;
+      },
+      onClick: () => props.onPlayPause()
+    }), null);
+    _$insert3(_el$16, _$createComponent2(IconBtn, {
+      get theme() {
+        return theme();
+      },
+      get icon() {
+        return Icon.next;
+      },
+      get width() {
+        return TRANSPORT_LAYOUT.nextWidth;
+      },
+      get height() {
+        return TRANSPORT_LAYOUT.height;
+      },
+      onClick: () => props.onNext()
+    }), null);
+    _$effect2((_p$) => {
+      var _v$9 = playing() ? track()?.artwork?.accent ?? theme().text.action.primary.default : theme().border.default, _v$0 = TRANSPORT_LAYOUT.gap;
+      _v$9 !== _p$.e && (_p$.e = _$setProp2(_el$1, "borderColor", _v$9, _p$.e));
+      _v$0 !== _p$.t && (_p$.t = _$setProp2(_el$16, "gap", _v$0, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$1;
+  })();
+}
+
+// index.tsx
+var SEEK_END_MARGIN_MS = 1000;
+function seekTarget(positionMs, durationMs) {
+  if (!Number.isFinite(positionMs) || typeof durationMs !== "number" || !Number.isFinite(durationMs) || durationMs <= 0)
+    return null;
+  const ceiling = Math.max(0, durationMs - SEEK_END_MARGIN_MS);
+  return Math.max(0, Math.min(ceiling, Math.round(positionMs)));
+}
+var controllerDependencies = {
+  createSessionMedia: createSessionSystemMedia
+};
+function errMsg(error) {
+  return error && typeof error === "object" && "message" in error ? String(error.message) : String(error);
+}
+function createController(context, dependencies = controllerDependencies) {
+  const [session, setSessionStore] = context.storage.memory("music-player.session.v6", {
+    initial: {
+      loading: false,
+      loadingOwners: [],
+      error: null,
+      player: null
+    }
+  });
+  const sessionListeners = new Set;
+  const setSession = (update) => {
+    setSessionStore(update);
+    for (const listener of [...sessionListeners]) {
+      try {
+        listener(session);
+      } catch {}
+    }
+  };
+  const loadingOwner = crypto.randomUUID();
+  const media = dependencies.createSessionMedia();
+  let disposed = false;
+  let lifecycleGeneration = 0;
+  let eventDisposer = null;
+  let presentationDisposer = null;
+  let lifecycleError = {
+    message: null,
+    source: undefined
+  };
+  let transportError = null;
+  let receivedSnapshot = false;
+  let snapshotEpoch = 0;
+  let playbackIntent;
+  let activeSeek = null;
+  let latestSeek = null;
+  const pending = new Set;
+  const isActive = () => !disposed;
+  const publishError = () => {
+    if (!isActive())
+      return;
+    const message = lifecycleError.source === "connection" && lifecycleError.message ? lifecycleError.message : transportError ?? lifecycleError.message;
+    setSession((draft) => {
+      draft.error = message;
+    });
+  };
+  const setLifecycleError = (message, source) => {
+    lifecycleError = {
+      message,
+      source
+    };
+    publishError();
+  };
+  const setTransportError = (message) => {
+    transportError = message;
+    publishError();
+  };
+  const setLoadingOwner = (active) => {
+    setSession((draft) => {
+      const owners = new Set(draft.loadingOwners ?? []);
+      if (active)
+        owners.add(loadingOwner);
+      else
+        owners.delete(loadingOwner);
+      draft.loadingOwners = [...owners];
+      draft.loading = owners.size > 0;
+    });
+  };
+  const updateLoading = () => {
+    if (isActive())
+      setLoadingOwner(pending.size > 0);
+  };
+  const settle = (resolve) => {
+    if (!pending.delete(resolve))
+      return;
+    resolve();
+    updateLoading();
+  };
+  const runCommand = (command, onSettled) => {
+    if (!isActive())
+      return Promise.resolve();
+    const generation = lifecycleGeneration;
+    return new Promise((resolve) => {
+      pending.add(resolve);
+      updateLoading();
+      let result;
+      try {
+        result = command();
+      } catch (error) {
+        result = Promise.reject(error);
+      }
+      let succeeded = false;
+      Promise.resolve(result).then(() => {
+        succeeded = true;
+        if (!isActive() || generation !== lifecycleGeneration)
+          return;
+        if (transportError !== null)
+          setTransportError(null);
+      }, (error) => {
+        if (!isActive() || generation !== lifecycleGeneration)
+          return;
+        const message = sanitizeTerminalText(errMsg(error));
+        setTransportError(message);
+        context.ui.toast.show({
+          title: "Music",
+          message,
+          variant: "error"
+        });
+      }).finally(() => {
+        try {
+          onSettled?.(succeeded);
+        } finally {
+          settle(resolve);
+        }
+      });
+    });
+  };
+  const runSeek = (intent) => {
+    activeSeek = intent;
+    runCommand(() => media.seek(intent.positionMs), () => {
+      if (activeSeek !== intent)
+        return;
+      activeSeek = null;
+      for (const resolve of intent.resolves)
+        resolve();
+      intent.resolves = [];
+      const next = latestSeek;
+      latestSeek = null;
+      if (isActive() && next)
+        runSeek(next);
+      else
+        next?.resolves.splice(0).forEach((resolve) => resolve());
+    });
+  };
+  const refreshAll = async () => {
+    if (!isActive())
+      return;
+    const generation = lifecycleGeneration;
+    try {
+      const player = await media.player();
+      if (!isActive() || generation !== lifecycleGeneration || receivedSnapshot)
+        return;
+      setSession((draft) => {
+        draft.player = player;
+      });
+    } catch (error) {
+      if (isActive() && generation === lifecycleGeneration)
+        setTransportError(errMsg(error));
+    }
+  };
+  const playPause = () => {
+    const nextPlaying = !(playbackIntent?.target ?? !!session.player?.is_playing);
+    const intent = {
+      target: nextPlaying,
+      startedAtEpoch: snapshotEpoch,
+      settled: false
+    };
+    playbackIntent = intent;
+    return runCommand(() => nextPlaying ? media.play() : media.pause(), (succeeded) => {
+      if (playbackIntent !== intent)
+        return;
+      if (!succeeded) {
+        playbackIntent = undefined;
+        return;
+      }
+      intent.settled = true;
+      if (snapshotEpoch > intent.startedAtEpoch && session.player?.is_playing === intent.target)
+        playbackIntent = undefined;
+    });
+  };
+  const seek = (positionMs) => {
+    const target = seekTarget(positionMs, session.player?.track?.duration_ms);
+    if (!session.player?.track || target === null || !isActive())
+      return Promise.resolve();
+    return new Promise((resolve) => {
+      if (activeSeek) {
+        if (latestSeek) {
+          latestSeek.positionMs = target;
+          latestSeek.resolves.push(resolve);
+        } else {
+          latestSeek = {
+            positionMs: target,
+            resolves: [resolve]
+          };
+        }
+        return;
+      }
+      runSeek({
+        positionMs: target,
+        resolves: [resolve]
+      });
+    });
+  };
+  eventDisposer = media.subscribe((event) => {
+    if (!isActive())
+      return;
+    if (event?.type === "snapshot") {
+      receivedSnapshot = true;
+      snapshotEpoch++;
+      setSession((draft) => {
+        draft.player = mergePlayerSnapshot(draft.player, event.state);
+      });
+      if (playbackIntent?.settled && snapshotEpoch > playbackIntent.startedAtEpoch && event.state.is_playing === playbackIntent.target)
+        playbackIntent = undefined;
+      return;
+    }
+    if (event?.type === "lifecycle") {
+      setLifecycleError(event.message, event.source);
+      if (event.source === "connection" && event.message !== null)
+        playbackIntent = undefined;
+      if (event.message !== null && latestSeek) {
+        latestSeek.resolves.splice(0).forEach((resolve) => resolve());
+        latestSeek = null;
+      }
+    }
+  });
+  presentationDisposer = media.subscribePresentation((event) => {
+    if (!isActive())
+      return;
+    setSession((draft) => {
+      draft.player = mergeArtworkCompletion(draft.player, event);
+    });
+  });
+  refreshAll();
+  return {
+    session,
+    subscribe(listener) {
+      sessionListeners.add(listener);
+      listener(session);
+      return () => sessionListeners.delete(listener);
+    },
+    refreshAll,
+    refreshArtwork: async () => {
+      if (!isActive())
+        return;
+      try {
+        await media.refreshArtwork();
+      } catch (error) {
+        if (isActive())
+          setTransportError(errMsg(error));
+      }
+    },
+    async openApp() {
+      if (!isActive())
+        return;
+      try {
+        openNowPlayingApp();
+        context.ui.toast.show({
+          title: "Music",
+          message: "Play in any app \u2014 the sidebar uses system media",
+          variant: "info"
+        });
+      } catch (error) {
+        setTransportError(errMsg(error));
+      }
+    },
+    playPause,
+    seek,
+    next: () => runCommand(() => media.next()),
+    prev: () => runCommand(() => media.previous()),
+    dispose() {
+      if (disposed)
+        return;
+      disposed = true;
+      lifecycleGeneration++;
+      eventDisposer?.();
+      eventDisposer = null;
+      presentationDisposer?.();
+      presentationDisposer = null;
+      latestSeek?.resolves.splice(0).forEach((resolve) => resolve());
+      latestSeek = null;
+      activeSeek?.resolves.splice(0).forEach((resolve) => resolve());
+      activeSeek = null;
+      for (const resolve of [...pending])
+        settle(resolve);
+      media.dispose().catch(() => {});
+      setLoadingOwner(false);
+      sessionListeners.clear();
+    }
+  };
+}
+function AppHost(props) {
+  const {
+    context,
+    ctrl
+  } = props;
+  context.keymap.layer(() => ({
+    mode: "global",
+    priority: 200,
+    commands: [{
+      id: "music.playpause",
+      title: "Play / pause",
+      group: "Music",
+      bind: "ctrl+shift+p",
+      palette: true,
+      run: () => void ctrl.playPause()
+    }, {
+      id: "music.next",
+      title: "Next track",
+      group: "Music",
+      bind: "ctrl+shift+right",
+      palette: true,
+      run: () => void ctrl.next()
+    }, {
+      id: "music.prev",
+      title: "Previous track",
+      group: "Music",
+      bind: "ctrl+shift+left",
+      palette: true,
+      run: () => void ctrl.prev()
+    }, {
+      id: "music.open-app",
+      title: "Open music site",
+      group: "Music",
+      palette: true,
+      slash: {
+        name: "music-app"
+      },
+      run: () => void ctrl.openApp()
+    }, {
+      id: "music.refresh-artwork",
+      title: "Refresh artwork",
+      group: "Music",
+      palette: true,
+      slash: {
+        name: "music-artwork"
+      },
+      run: () => void ctrl.refreshArtwork()
+    }]
+  }));
+  return _$createComponent3(CompactPlayer, {
+    context,
+    get state() {
+      return ctrl.session;
+    },
+    onPlayPause: () => void ctrl.playPause(),
+    onSeek: (positionMs) => void ctrl.seek(positionMs)
+  });
+}
+function createMusicPlayerPlugin(options) {
+  return Plugin.define({
+    id: "music-player",
+    setup(context) {
+      if (!isMac()) {
+        context.ui.toast.show({
+          title: "Music",
+          message: "System media control is macOS-only",
+          variant: "warning"
+        });
+      }
+      const ctrl = options?.createController?.(context) ?? createController(context, options?.createSessionMedia ? {
+        ...controllerDependencies,
+        createSessionMedia: options.createSessionMedia
+      } : controllerDependencies);
+      const observeSession = () => {
+        ctrl.session.loading;
+        ctrl.session.error;
+        ctrl.session.player;
+      };
+      const unsubApp = context.ui.slot({
+        append: "session.composer.top",
+        render: () => {
+          observeSession();
+          return _$createComponent3(AppHost, {
+            context,
+            ctrl
+          });
+        }
+      });
+      const unsubSidebar = context.ui.slot({
+        append: "sidebar.content",
+        render: () => {
+          observeSession();
+          return _$createComponent3(SidebarPlayer, {
+            context,
+            get state() {
+              return ctrl.session;
+            },
+            get subscribe() {
+              return ctrl.subscribe;
+            },
+            onPlayPause: () => void ctrl.playPause(),
+            onNext: () => void ctrl.next(),
+            onPrev: () => void ctrl.prev(),
+            onSeek: (positionMs) => void ctrl.seek(positionMs)
+          });
+        }
+      });
+      return () => {
+        unsubApp();
+        unsubSidebar();
+        ctrl.dispose();
+      };
+    }
+  });
+}
+var opencode_music_player_default = createMusicPlayerPlugin();
+export {
+  opencode_music_player_default as default,
+  createMusicPlayerPlugin,
+  createController,
+  SEEK_END_MARGIN_MS
+};