Split demo site into its own package (#1351)

* Split demo site into its own package

Move the demo site from packages/webamp/demo/ into packages/webamp-demo/
as a standalone workspace package. This cleanly separates the library
(published to npm) from the demo site (deployed to webamp.org).

Key changes:
- Demo imports webamp source via relative paths (no aliases needed)
- Demo has its own package.json with demo-specific deps
- Simplified vite config (just nodePolyfills plugin)
- Removed vite branching from rollupPlugins.mjs (library-only now)
- Renamed build-library -> build in webamp package
- Updated turbo.json, CI, netlify config, and code-size workflow
- Removed demo-only deps from webamp package (sentry, butterchurn stays
  for the butterchurn bundle)
- Zero bundle size change for the library

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix: add type-check dependency to webamp#build task

The webamp-docs package needs type declarations from webamp to
type-check. These are generated by tsc (type-check), which must run
before the build task.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add updated readme to webamp-demo package

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Document the live reloading dev flow in both readmes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix code-size CI: use deploy script that exists on both branches

The compressed-size-action checks out master and runs the build script.
Master doesn't have a root "build" script, so revert to using "deploy"
which exists on both branches.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Build all packages
         run: |
-          npx turbo build build-library
+          npx turbo build
         env:
           NODE_ENV: production
       - name: Lint and type-check

README.md

@@ -6,7 +6,7 @@
 A reimplementation of Winamp in HTML5 and JavaScript with full skin support.
 As seen on [TechCrunch], [Motherboard], [Gizmodo], Hacker News ([1], [2], [3], [4]), and [elsewhere](./packages/webamp/docs/press.md).
 
-[![Screenshot of Webamp](https://raw.githubusercontent.com/captbaritone/webamp/master/packages/webamp/demo/images/preview.png)](https://webamp.org)
+[![Screenshot of Webamp](https://raw.githubusercontent.com/captbaritone/webamp/master/packages/webamp-demo/images/preview.png)](https://webamp.org)
 
 Check out this [Twitter thread](https://twitter.com/captbaritone/status/961274714013319168) for an illustrated list of features. Works in modern versions of Edge, Firefox, Safari and Chrome. IE is [not supported](http://caniuse.com/#feat=audio-api).
 
@@ -19,7 +19,7 @@ Check out this [Twitter thread](https://twitter.com/captbaritone/status/96127471
 Webamp uses a [monorepo](https://en.wikipedia.org/wiki/Monorepo) approach, so in addition to the Webamp NPM module, this repository contains code for a few closely related projects and some pieces of Webamp which are published as standalone modules:
 
 - [`packages/webamp`](https://github.com/captbaritone/webamp/tree/master/packages/webamp): The [Webamp NPM module](https://www.npmjs.com/package/webamp)
-- [`packages/webamp/demo`](https://github.com/captbaritone/webamp/tree/master/packages/webamp/demo): The demo site which lives at [webamp.org](https://webamp.org)
+- [`packages/webamp-demo`](https://github.com/captbaritone/webamp/tree/master/packages/webamp-demo): The demo site which lives at [webamp.org](https://webamp.org)
 - [`packages/webamp-docs`](https://github.com/captbaritone/webamp/tree/master/packages/webamp-docs): The documentation site for Webamp the NPM library which lives at [docs.webamp.org](https://docs.webamp.org)
 - [`packages/ani-cursor`](https://github.com/captbaritone/webamp/tree/master/packages/ani-cursor): An NPM module for rendering animiated `.ani` cursors as CSS animations
 - [`packages/skin-database`](https://github.com/captbaritone/webamp/tree/master/packages/skin-database): The server component of https://skins.webamp.org which also runs our [Twitter bot](https://twitter.com/winampskins), and a Discord bot for our community chat

netlify.toml

@@ -1,6 +1,6 @@
 [build]
 command = "pnpm run deploy"
-publish = "packages/webamp/dist/demo-site/"
+publish = "packages/webamp-demo/dist/"
 
 # A short URL for listeners of https://changelog.com/podcast/291
 [[redirects]]

package.json

@@ -15,7 +15,7 @@
     "test:unit": "jest",
     "lint": "npx turbo lint",
     "type-check": "pnpm --filter webamp type-check && pnpm --filter ani-cursor type-check && pnpm --filter skin-database type-check && pnpm --filter webamp-docs type-check && pnpm --filter winamp-eqf type-check",
-    "deploy": "npx turbo webamp#build webamp-modern#build --concurrency 1 && mv packages/webamp-modern/build packages/webamp/dist/demo-site/modern",
+    "deploy": "npx turbo build webamp-modern#build --concurrency 1 && mv packages/webamp-modern/build packages/webamp-demo/dist/modern",
     "format": "prettier --write '**/*.{js,ts,tsx}'"
   },
   "devDependencies": {

packages/webamp-demo/index.html

@@ -63,7 +63,7 @@
       </a>
       <a
         target="_blank"
-        href="https://github.com/captbaritone/webamp/blob/master/packages/webamp/docs/music-credits.md"
+        href="https://github.com/captbaritone/webamp/blob/master/packages/webamp-demo/docs/music-credits.md"
         id="music-credits"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

packages/webamp-demo/js/DemoDesktop.tsx

@@ -1,10 +1,10 @@
-import WebampLazy from "../../js/webampLazy";
+import WebampLazy from "../../webamp/js/webampLazy";
 import { Suspense } from "react";
 import WebampIcon from "./WebampIcon";
 // import Mp3Icon from "./Mp3Icon";
 import SkinIcon from "./SkinIcon";
 import { /* defaultInitialTracks, */ SHOW_DESKTOP_ICONS } from "./config";
-import { useWindowSize } from "../../js/hooks";
+import { useWindowSize } from "../../webamp/js/hooks";
 import availableSkins from "./availableSkins";
 import DesktopLinkIcon from "./DesktopLinkIcon";
 import museumIcon from "../images/icons/internet-folder-32x32.png";

packages/webamp-demo/js/MilkIcon.tsx

@@ -1,5 +1,5 @@
-import type WebampLazy from "../../js/webampLazy";
-import { loadPresets } from "../../js/actionCreators/milkdrop";
+import type WebampLazy from "../../webamp/js/webampLazy";
+import { loadPresets } from "../../webamp/js/actionCreators/milkdrop";
 import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";

packages/webamp-demo/js/Mp3Icon.tsx

@@ -1,5 +1,5 @@
-import WebampLazy from "../../js/webampLazy";
-import { URLTrack } from "../../js/types";
+import WebampLazy from "../../webamp/js/webampLazy";
+import { URLTrack } from "../../webamp/js/types";
 import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";

packages/webamp-demo/js/SkinIcon.tsx

@@ -1,4 +1,4 @@
-import WebampLazy from "../../js/webampLazy";
+import WebampLazy from "../../webamp/js/webampLazy";
 // @ts-ignore
 import iconSmall from "../images/icons/paint-file-32x32.png";
 import DesktopIcon from "./DesktopIcon";

packages/webamp-demo/js/SoundCloud.ts

@@ -1,4 +1,4 @@
-import { Track } from "../../js/types";
+import { Track } from "../../webamp/js/types";
 
 const CLIENT_ID = "T9EbIJ75SnsJK3iX8lOZaDlGIYgQB32G";
 

packages/webamp-demo/js/WebampIcon.tsx

@@ -1,4 +1,4 @@
-import WebampLazy from "../../js/webampLazy";
+import WebampLazy from "../../webamp/js/webampLazy";
 import { useEffect, useState } from "react";
 // @ts-ignore
 import iconSmall from "../images/icons/winamp2-32x32.png";

packages/webamp-demo/js/butterchurnOptions.ts

@@ -1,4 +1,4 @@
-import { ButterchurnOptions } from "../../js/types";
+import { ButterchurnOptions } from "../../webamp/js/types";
 
 const KNOWN_PRESET_URLS_REGEXES = [
   /^https:\/\/unpkg\.com\/butterchurn-presets\/.*\.json$/,

packages/webamp-demo/js/choreography.ts

@@ -1,5 +1,5 @@
-import Webamp from "../../js/webampLazy";
-import { Slider } from "../../js/types";
+import Webamp from "../../webamp/js/webampLazy";
+import { Slider } from "../../webamp/js/types";
 import { batch } from "react-redux";
 
 const BANDS: Slider[] = [

packages/webamp-demo/js/config.ts

@@ -1,4 +1,4 @@
-import { Track, URLTrack, PartialState } from "../../js/types";
+import { Track, URLTrack, PartialState } from "../../webamp/js/types";
 // @ts-ignore
 import llamaAudio from "../mp3/llama-2.91.mp3";
 

packages/webamp-demo/js/dropboxFilePicker.ts

@@ -1,4 +1,4 @@
-import { FilePicker } from "../../js/types";
+import { FilePicker } from "../../webamp/js/types";
 
 interface DropboxFile {
   link: string;

packages/webamp-demo/js/eventLogger.ts

@@ -1,5 +1,5 @@
 import { log, GoogleAnalyticsEvent } from "./logger";
-import { Action } from "../../js/types";
+import { Action } from "../../webamp/js/types";
 
 function logEventFromAction(action: Action): GoogleAnalyticsEvent | null {
   switch (action.type) {

packages/webamp-demo/js/index.tsx

@@ -6,7 +6,7 @@ import isButterchurnSupported from "butterchurn/dist/isSupported.min";
 import { getWebampConfig } from "./webampConfig";
 import * as SoundCloud from "./SoundCloud";
 
-import WebampLazy from "../../js/webampLazy";
+import WebampLazy from "../../webamp/js/webampLazy";
 
 import { disableMarquee, skinUrl as configSkinUrl } from "./config";
 import DemoDesktop from "./DemoDesktop";

packages/webamp-demo/js/screenshotInitialState.ts

@@ -1,4 +1,4 @@
-import { PartialState } from "../../js/types";
+import { PartialState } from "../../webamp/js/types";
 
 const defaultTracksState = {
   "0": {

packages/webamp-demo/js/webampConfig.ts

@@ -6,7 +6,7 @@ import isButterchurnSupported from "butterchurn/dist/isSupported.min";
 import { loggerMiddleware } from "./eventLogger";
 import * as SoundCloud from "./SoundCloud";
 
-import { Action, Options, AppState, WindowLayout } from "../../js/types";
+import { Action, Options, AppState, WindowLayout } from "../../webamp/js/types";
 
 import { getButterchurnOptions } from "./butterchurnOptions";
 import dropboxFilePicker from "./dropboxFilePicker";
@@ -14,7 +14,7 @@ import availableSkins from "./availableSkins";
 
 import { initialTracks, initialState } from "./config";
 import screenshotInitialState from "./screenshotInitialState";
-import { InjectableDependencies, PrivateOptions } from "../../js/webampLazy";
+import { InjectableDependencies, PrivateOptions } from "../../webamp/js/webampLazy";
 
 const NOISY_ACTION_TYPES = new Set([
   "STEP_MARQUEE",

packages/webamp-demo/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "webamp-demo",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@sentry/browser": "5.9.1",
+    "ani-cursor": "workspace:*",
+    "butterchurn": "3.0.0-beta.5",
+    "butterchurn-presets": "3.0.0-beta.4",
+    "classnames": "^2.2.5",
+    "invariant": "^2.2.3",
+    "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
+    "milkdrop-preset-converter-aws": "^0.1.6",
+    "music-metadata": "^11.6.0",
+    "music-metadata-browser": "^0.6.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-redux": "^8.0.5",
+    "redux": "^5.0.0-alpha.0",
+    "redux-sentry-middleware": "^0.1.3",
+    "redux-thunk": "^3.1.0",
+    "reselect": "^3.0.1",
+    "strtok3": "^10.3.1",
+    "tinyqueue": "^3.0.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "typescript": "^5.6.2",
+    "vite": "^5.2.12",
+    "webamp": "workspace:*",
+    "winamp-eqf": "workspace:*"
+  }
+}

packages/webamp-demo/readme.md

@@ -1,6 +1,8 @@
 # Webamp.org
 
-The Webamp demo site, [webamp.org](https://webamp.org), uses the same interface as the NPM module but adds the following functionality by utilizing Webamp's public API
+> **Note:** This package is the source for the [webamp.org](https://webamp.org) demo site. It is not a good reference for how to use Webamp in your own project — it relies on private internal APIs and imports library source directly. For examples of how to use Webamp as a consumer, see the [examples](../../examples/) directory or the [documentation site](https://docs.webamp.org).
+
+The demo site uses the same interface as the NPM module but adds the following functionality by utilizing Webamp's public API
 
 - Error reporting using [Sentry](https://sentry.io)
 - Analytics using [Google Analytics](https://analytics.google.com/analytics/web/)
@@ -9,35 +11,37 @@ The Webamp demo site, [webamp.org](https://webamp.org), uses the same interface
 
 Additionally, it makes use of some private Webamp APIs to add the following functionality:
 
-- [Butterchun](https://github.com/jberg/butterchurn) integration to render [MilkDrop](https://en.wikipedia.org/wiki/MilkDrop) visualizations. We intend to make this part of the public API soon.
+- [Butterchurn](https://github.com/jberg/butterchurn) integration to render [MilkDrop](https://en.wikipedia.org/wiki/MilkDrop) visualizations. We intend to make this part of the public API soon.
 - "Screenshot" mode `https://webamp.org/?screenshot=1` which can be used together with [Puppeteer](https://github.com/GoogleChrome/puppeteer) to automate the generation of Winamp skin screenshots
 
+## Development
+
+    pnpm start
+
+This starts a Vite dev server that imports the webamp library source directly via relative paths. Any edits to files in `packages/webamp/js/` are immediately reflected in the browser without a rebuild step.
+
 ## Production Builds
 
-To do an optimized build of the demo site, you can run:
+To do an optimized build of the demo site:
 
     pnpm run build
 
-If you wish to test this build locally, run:
+To test the production build locally:
 
     pnpm run serve
 
-Then open the local ip/port that is output to the console in your browser.
-
 ## Deploying
 
-[Netlify](https://www.netlify.com/) watches GitHub for new versions of master. When a new version is seen, it is automatically built using `npm run build` and pushed to the server. Additionally, Netlify will run a build on every pull request and include a link under the heading "Deploy preview ready!". This enables easy high level testing of pull requests.
+[Netlify](https://www.netlify.com/) watches GitHub for new versions of master. When a new version is seen, it is automatically built and pushed to the server. Additionally, Netlify will run a build on every pull request and include a link under the heading "Deploy preview ready!".
 
 In short, deploying should be as simple as pushing a commit to master.
 
-Additionally, if you want to fork the project, deploying should be as simple as setting up a free Netlify account
-
 ### Advanced Usage
 
 There are some "feature flags" which you can manipulate by passing a specially crafted URL hash. Simply supply a JSON blob after the `#` of the URL to change these settings:
 
 - `skinUrl` (string) Url of the default skin to use. Note, this file must be served with the correct Allows Origin header.
 - `audioUrl` (string) Url of the default audio file to use. Note, this file must be served with the correct Allows Origin header.
-- `initialState` (object) Override the [initial Redux state](packages/webamp/js/reducers/index.ts). Values from this object will be recursively merged into the actual default state.
+- `initialState` (object) Override the initial Redux state. Values from this object will be recursively merged into the actual default state.
 
-**Note:** These are intended mostly as development tools and are subject to change at any time.
+**Note:** These are intended mostly as development tools and are subject to change at any time.

packages/webamp-demo/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

packages/webamp-demo/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import nodePolyfills from "rollup-plugin-polyfill-node";
+
+export default defineConfig({
+  build: {
+    outDir: "dist",
+    chunkSizeWarningLimit: 2500,
+  },
+  assetsInclude: ["**/*.wsz", "**/*.mp3"],
+  plugins: [
+    // Needed for music-metadata-browser which uses polyfillable node APIs
+    // @ts-expect-error Rollup plugin type mismatch with Vite's stricter types
+    nodePolyfills(),
+  ],
+});

packages/webamp/README.md

@@ -2,26 +2,22 @@
 
 ## Development
 
-I do most development by starting the demo site in dev mode and iterating that way. The following commands will install all dependencies, run an initial development build and then start a local server. Every time you save a file, it will rebuild the bundle and automatically refresh the page.
+The demo site in `packages/webamp-demo` imports the library source directly, so you can iterate on the library with live reloading:
 
-    # First clone the repo, then...
-    cd webamp
-    # Change into the NPM module's sub directory
-    cd packages/webamp
-    # __Note:__ Please use pnpm over npm/yarn, since pnpm will respect our `pnpm-lock.yaml` file
-    pnpm install
+    cd packages/webamp-demo
     pnpm start
 
-`http://localhost:8080/` should automatically open in your browser.
+Any edits to library source files in `packages/webamp/js/` are immediately reflected in the browser — no rebuild needed.
 
-    # Run tests and lint checks
+    # Run tests
+    cd packages/webamp
     pnpm test
 
 ## Building
 
-The NPM module is built separately from the demo site. To build it run:
+To build the library for publishing:
 
-    pnpm run build-library
+    pnpm run build
 
 This will write files to `./built`.
 

packages/webamp/package.json

@@ -12,11 +12,6 @@
   "types": "built/types/js/webamp.d.ts",
   "browser": "built/webamp.bundle.min.mjs",
   "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead",
-  "targets": {
-    "demo-site": {
-      "source": "demo/index.html"
-    }
-  },
   "exports": {
     ".": {
       "require": "./built/webamp.bundle.min.js",
@@ -40,11 +35,8 @@
     "lint-fix": "eslint . --ext ts,tsx,js --fix",
     "lint": "eslint . --ext ts,tsx,js",
     "type-check": "tsc",
-    "build": "vite build --emptyOutDir",
-    "build-library": "node ./scripts/rollup.mjs",
-    "prepublishOnly": "npm run build-library && npm run type-check",
-    "serve": "vite preview",
-    "start": "vite",
+    "build": "node ./scripts/rollup.mjs",
+    "prepublishOnly": "npm run build && npm run type-check",
     "test": "vitest run",
     "tdd": "vitest",
     "format": "prettier --write \"**/*.{js,ts,tsx,d.ts,css}\"",
@@ -71,7 +63,6 @@
   },
   "homepage": "https://github.com/captbaritone/webamp/",
   "devDependencies": {
-    "@sentry/browser": "5.9.1",
     "ani-cursor": "workspace:*",
     "butterchurn": "3.0.0-beta.5",
     "butterchurn-presets": "3.0.0-beta.4",
@@ -79,14 +70,12 @@
     "invariant": "^2.2.3",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "milkdrop-preset-converter-aws": "^0.1.6",
     "music-metadata": "^11.6.0",
     "music-metadata-browser": "^0.6.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^8.0.5",
     "redux": "^5.0.0-alpha.0",
-    "redux-sentry-middleware": "^0.1.3",
     "redux-thunk": "^3.1.0",
     "reselect": "^3.0.1",
     "strtok3": "^10.3.1",
@@ -119,8 +108,7 @@
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.2.12"
+    "typescript": "^5.6.2"
   },
   "prettier": {
     "trailingComma": "es5"

packages/webamp/scripts/rollupPlugins.mjs

@@ -11,14 +11,14 @@ import atImport from "postcss-import";
 import nodePolyfills from "rollup-plugin-polyfill-node";
 import path from "node:path";
 
-export function getPlugins({ minify, outputFile, vite }) {
+export function getPlugins({ minify, outputFile }) {
   const plugins = [
     replace({
       // Ensure we don't use the dev build of React
       values: { "process.env.NODE_ENV": JSON.stringify("production") },
       preventAssignment: true,
     }),
-    vite ? null : stripInlineSuffix(),
+    stripInlineSuffix(),
     // https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
     // TODO: We could offer a version which does not inline React/React-DOM
     nodeResolve({
@@ -30,27 +30,19 @@ export function getPlugins({ minify, outputFile, vite }) {
     // Needed for music-metadata-browser in the Webamp bundle which depends upon
     // being able to use some polyfillable node APIs
     nodePolyfills(),
-    // Vite handles TypeScript natively, so only use the plugin for Rollup builds
-    vite
-      ? null
-      : typescript({
-          compilerOptions: {
-            jsx: "react-jsx",
-            module: "esnext",
-            declarationDir: "dist/demo-site/declarations",
-            outDir: "./tsBuilt",
-          },
-        }),
-    // Enable importing .json files. But Vite already enables this, so enabling it there
-    // causes it to try to parse the js version as JSON.
-    vite ? null : json(),
-    // https://www.npmjs.com/package/rollup-plugin-import-css
-    vite
-      ? null
-      : postcss({
-          inject: false,
-          plugins: [atImport, postcssOptimizeDataUriPngs],
-        }),
+    typescript({
+      compilerOptions: {
+        jsx: "react-jsx",
+        module: "esnext",
+        declarationDir: "dist/demo-site/declarations",
+        outDir: "./tsBuilt",
+      },
+    }),
+    json(),
+    postcss({
+      inject: false,
+      plugins: [atImport, postcssOptimizeDataUriPngs],
+    }),
     // Required because React still ships as CJS
     commonjs(),
     minify

packages/webamp/vite.config.mts

@@ -1,43 +0,0 @@
-import { defineConfig } from "vite";
-import { getPlugins } from "./scripts/rollupPlugins.mjs";
-
-export default defineConfig({
-  build: {
-    outDir: "../dist/demo-site",
-    chunkSizeWarningLimit: 2500, // Suppress warnings for chunks larger than 500kb
-  },
-  root: "demo",
-  // Used only by the demo site, not the library
-  assetsInclude: ["**/*.wsz", "**/*.mp3"],
-  optimizeDeps: {
-    include: ["winamp-eqf"],
-  },
-  // @ts-ignore
-  plugins: [
-    ...getPlugins({
-      minify: true,
-      outputFile: "dist/demo-site/report",
-      vite: true,
-    }),
-    /*
-    replace({
-      // Ensure we don't use the dev build of React
-      values: { "process.env.NODE_ENV": JSON.stringify("production") },
-      preventAssignment: true,
-    }),
-    nodeResolve(),
-    typescript({
-      compilerOptions: {
-        jsx: "react-jsx",
-        module: "esnext",
-        declarationDir: "dist/declarations",
-      },
-    }),
-    commonjs(),
-    babel({ babelHelpers: "bundled" }),
-    */
-  ],
-  worker: {
-    rollupOptions: {},
-  },
-});

pnpm-lock.yaml

@@ -341,9 +341,6 @@ importers:
       '@rollup/plugin-typescript':
         specifier: ^11.1.6
         version: 11.1.6(rollup@4.18.0)(tslib@2.8.1)(typescript@5.6.3)
-      '@sentry/browser':
-        specifier: 5.9.1
-        version: 5.9.1
       '@types/classnames':
         specifier: ^2.2.6
         version: 2.3.1
@@ -404,9 +401,6 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
-      milkdrop-preset-converter-aws:
-        specifier: ^0.1.6
-        version: 0.1.6
       music-metadata:
         specifier: ^11.6.0
         version: 11.6.0
@@ -434,9 +428,6 @@ importers:
       redux:
         specifier: ^5.0.0-alpha.0
         version: 5.0.1
-      redux-sentry-middleware:
-        specifier: ^0.1.3
-        version: 0.1.8
       redux-thunk:
         specifier: ^3.1.0
         version: 3.1.0(redux@5.0.1)
@@ -464,9 +455,6 @@ importers:
       typescript:
         specifier: ^5.6.2
         version: 5.6.3
-      vite:
-        specifier: ^5.2.12
-        version: 5.2.12(@types/node@24.0.10)(lightningcss@1.24.1)(terser@5.43.0)
       vitest:
         specifier: ^3.2.0
         version: 3.2.6(@edge-runtime/vm@2.1.2)(@types/debug@4.1.12)(@types/node@24.0.10)(jiti@1.21.7)(jsdom@20.0.3(bufferutil@4.0.8)(utf-8-validate@5.0.10))(lightningcss@1.24.1)(terser@5.43.0)
@@ -474,6 +462,90 @@ importers:
         specifier: workspace:*
         version: link:../winamp-eqf
 
+  packages/webamp-demo:
+    devDependencies:
+      '@sentry/browser':
+        specifier: 5.9.1
+        version: 5.9.1
+      '@types/react':
+        specifier: ^18.0.26
+        version: 18.2.74
+      '@types/react-dom':
+        specifier: ^18.0.10
+        version: 18.2.24
+      ani-cursor:
+        specifier: workspace:*
+        version: link:../ani-cursor
+      butterchurn:
+        specifier: 3.0.0-beta.5
+        version: 3.0.0-beta.5(patch_hash=dn4lya4siqyl4wmtq4serjeoma)
+      butterchurn-presets:
+        specifier: 3.0.0-beta.4
+        version: 3.0.0-beta.4
+      classnames:
+        specifier: ^2.2.5
+        version: 2.5.1
+      invariant:
+        specifier: ^2.2.3
+        version: 2.2.4
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
+      milkdrop-preset-converter-aws:
+        specifier: ^0.1.6
+        version: 0.1.6
+      music-metadata:
+        specifier: ^11.6.0
+        version: 11.6.0
+      music-metadata-browser:
+        specifier: ^0.6.1
+        version: 0.6.6
+      react:
+        specifier: ^19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: ^19.1.0
+        version: 19.1.0(react@19.1.0)
+      react-redux:
+        specifier: ^8.0.5
+        version: 8.1.3(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
+      redux:
+        specifier: ^5.0.0-alpha.0
+        version: 5.0.1
+      redux-sentry-middleware:
+        specifier: ^0.1.3
+        version: 0.1.8
+      redux-thunk:
+        specifier: ^3.1.0
+        version: 3.1.0(redux@5.0.1)
+      reselect:
+        specifier: ^3.0.1
+        version: 3.0.1
+      rollup-plugin-polyfill-node:
+        specifier: ^0.13.0
+        version: 0.13.0(rollup@4.45.0)
+      strtok3:
+        specifier: ^10.3.1
+        version: 10.3.1
+      tinyqueue:
+        specifier: ^3.0.0
+        version: 3.0.0
+      typescript:
+        specifier: ^5.6.2
+        version: 5.8.3
+      vite:
+        specifier: ^5.2.12
+        version: 5.2.12(@types/node@24.0.10)(lightningcss@1.24.1)(terser@5.43.0)
+      webamp:
+        specifier: workspace:*
+        version: link:../webamp
+      winamp-eqf:
+        specifier: workspace:*
+        version: link:../winamp-eqf
+
   packages/webamp-docs:
     dependencies:
       '@docusaurus/core':
@@ -14979,7 +15051,7 @@ snapshots:
     dependencies:
       '@docusaurus/types': 3.8.1(@swc/core@1.4.12(@swc/helpers@0.5.15))(acorn@8.15.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/history': 4.7.11
-      '@types/react': 18.2.74
+      '@types/react': 19.2.7
       '@types/react-router-config': 5.0.11
       '@types/react-router-dom': 5.3.3
       react: 19.1.0
@@ -15413,7 +15485,7 @@ snapshots:
       '@docusaurus/utils': 3.8.1(@swc/core@1.4.12(@swc/helpers@0.5.15))(acorn@8.15.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@docusaurus/utils-common': 3.8.1(@swc/core@1.4.12(@swc/helpers@0.5.15))(acorn@8.15.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/history': 4.7.11
-      '@types/react': 18.2.74
+      '@types/react': 19.2.7
       '@types/react-router-config': 5.0.11
       clsx: 2.1.1
       parse-numeric-range: 1.3.0
@@ -15483,7 +15555,7 @@ snapshots:
     dependencies:
       '@mdx-js/mdx': 3.1.0(acorn@8.15.0)
       '@types/history': 4.7.11
-      '@types/react': 18.2.74
+      '@types/react': 19.2.7
       commander: 5.1.0
       joi: 17.12.3
       react: 19.1.0
@@ -16684,6 +16756,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.18.0
 
+  '@rollup/plugin-inject@5.0.5(rollup@4.45.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.45.0)
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+    optionalDependencies:
+      rollup: 4.45.0
+
   '@rollup/plugin-json@4.1.0(rollup@2.37.1)':
     dependencies:
       '@rollup/pluginutils': 3.1.0(rollup@2.37.1)
@@ -16766,6 +16846,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.18.0
 
+  '@rollup/pluginutils@5.1.0(rollup@4.45.0)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.45.0
+
   '@rollup/rollup-android-arm-eabi@4.18.0':
     optional: true
 
@@ -17358,7 +17446,7 @@ snapshots:
 
   '@types/hoist-non-react-statics@3.3.5':
     dependencies:
-      '@types/react': 18.2.74
+      '@types/react': 19.2.7
       hoist-non-react-statics: 3.3.2
 
   '@types/html-minifier-terser@6.1.0': {}
@@ -17479,19 +17567,19 @@ snapshots:
   '@types/react-router-config@5.0.11':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.74
+      '@types/react': 19.2.7
       '@types/react-router': 5.1.20
 
   '@types/react-router-dom@5.3.3':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.74
+      '@types/react': 19.2.7
       '@types/react-router': 5.1.20
 
   '@types/react-router@5.1.20':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.74
+      '@types/react': 19.2.7
 
   '@types/react@18.2.74':
     dependencies:
@@ -27059,6 +27147,11 @@ snapshots:
       '@rollup/plugin-inject': 5.0.5(rollup@4.18.0)
       rollup: 4.18.0
 
+  rollup-plugin-polyfill-node@0.13.0(rollup@4.45.0):
+    dependencies:
+      '@rollup/plugin-inject': 5.0.5(rollup@4.45.0)
+      rollup: 4.45.0
+
   rollup-plugin-polyfill-node@0.6.2(rollup@2.37.1):
     dependencies:
       '@rollup/plugin-inject': 4.0.4(rollup@2.37.1)

turbo.json

@@ -8,19 +8,15 @@
       "outputs": ["built/**", "dist/**"]
     },
     "webamp#build": {
+      "dependsOn": ["ani-cursor#build", "winamp-eqf#build", "webamp#type-check"],
+      "outputs": ["built/**"]
+    },
+    "webamp-demo#build": {
       "dependsOn": ["ani-cursor#build", "winamp-eqf#build"],
       "outputs": ["dist/**"]
     },
-    "webamp#build-library": {
-      "dependsOn": [
-        "ani-cursor#build",
-        "winamp-eqf#build",
-        "webamp#type-check"
-      ],
-      "outputs": ["built/**"]
-    },
     "webamp-docs#build": {
-      "dependsOn": ["webamp#build-library"],
+      "dependsOn": ["webamp#build"],
       "outputs": ["build/**", ".docusaurus/**"]
     },
     "ani-cursor#type-check": {},
@@ -29,7 +25,7 @@
       "dependsOn": ["ani-cursor#build", "winamp-eqf#build"]
     },
     "webamp-docs#type-check": {
-      "dependsOn": ["webamp#build-library"]
+      "dependsOn": ["webamp#build"]
     },
     "skin-database#type-check": {
       "dependsOn": ["skin-database#grats"]