readme-waves 1.0.0

package/README.md

@@ -0,0 +1,139 @@
+# readme-waves
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Generate animated music equalizer visualizations for GitHub profile READMEs. Built in Rust.
+
+Renders your music as a contribution-graph-style equalizer — frequency bands from left (bass) to right (treble), with GitHub's green color levels stacking from bottom to top based on intensity.
+
+## Output Modes
+
+| Mode | Format | Audio | Auto-play in README | Best for |
+|------|--------|-------|---------------------|----------|
+| SVG | `.svg` | No | Yes (CSS animation) | Visual-only, lightweight |
+| Video | `.mp4` | Yes | Requires manual embed | Full experience with sound |
+
+## Quick Start
+
+### CLI
+
+Requires [Rust](https://rustup.rs/) and [yt-dlp](https://github.com/yt-dlp/yt-dlp) (for YouTube mode).
+
+```bash
+# Build
+cargo build --release
+
+# From local audio file → SVG
+./target/release/readme-waves song.mp3 -o waveform.svg
+
+# From local audio file → MP4 video with audio
+./target/release/readme-waves song.mp3 --video -o waveform.mp4
+
+# From YouTube playlist (picks a random song)
+./target/release/readme-waves "https://www.youtube.com/playlist?list=PLxxxxx" -o waveform.svg
+
+# Video from YouTube playlist
+./target/release/readme-waves "https://www.youtube.com/playlist?list=PLxxxxx" --video -o waveform.mp4
+```
+
+### CLI Options
+
+| Flag | Description | Default |
+|------|-------------|---------|
+| `<input>` | Audio file path or YouTube playlist URL | (required) |
+| `-o, --output` | Output file path | `waveform.svg` |
+| `--video` | Generate MP4 video with audio | `false` |
+| `--rows` | Amplitude levels (height in squares) | `7` |
+| `--cols` | Frequency bands (number of columns) | `52` |
+| `--frames` | Animation frames (SVG mode) | `60` |
+| `--fps` | Video frame rate | `24` |
+| `--duration` | SVG animation loop (seconds) | `10` |
+| `--theme` | Color theme: `dark`, `light` | `dark` |
+| `--background` | Background color | `transparent` |
+
+### GitHub Action
+
+> **Note:** The action currently generates SVG files. For video mode, use the CLI locally.
+
+Add to `.github/workflows/waveform.yml`:
+
+```yaml
+name: Generate Waveform
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  generate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: TakalaWang/readme-waves@main
+        with:
+          playlist_url: 'https://www.youtube.com/playlist?list=YOUR_PLAYLIST_ID'
+          output_path: assets/waveform.svg
+          rows: '7'
+          cols: '52'
+
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: 'chore: update waveform'
+          file_pattern: 'assets/*'
+```
+
+Embed in your README:
+
+```markdown
+![Waveform](./assets/waveform.svg)
+```
+
+### Action Inputs
+
+| Input | Description | Default |
+|-------|-------------|---------|
+| `audio_file` | Local audio file path | - |
+| `playlist_url` | YouTube playlist URL (random song daily) | - |
+| `output_path` | Output SVG path | `assets/waveform.svg` |
+| `rows` | Amplitude levels (grid height) | `7` |
+| `cols` | Frequency bands (grid width) | `52` |
+| `frames` | Animation frames | `60` |
+| `animation_duration` | Animation loop (seconds) | `10` |
+| `theme` | Color theme (`dark` or `light`) | `dark` |
+| `background_color` | SVG background | `transparent` |
+
+## How It Works
+
+1. Decodes audio using [symphonia](https://github.com/pdeljanov/Symphonia) (pure Rust, no ffmpeg)
+2. Applies Short-Time Fourier Transform (STFT) via [rustfft](https://github.com/ejmahler/RustFFT)
+3. Trims to the lower 30% of the frequency range (where music energy lives)
+4. Per-band normalization with gamma correction for even dynamic range
+5. Generates equalizer visualization:
+   - **SVG mode**: per-cell CSS `@keyframes` animation
+   - **Video mode**: raw pixel frames piped to ffmpeg with the original audio
+
+## Color Themes
+
+**Dark** (default) — GitHub dark mode contribution colors:
+```
+#161b22  #0e4429  #006d32  #26a641  #39d353
+```
+
+**Light** — GitHub light mode contribution colors:
+```
+#ebedf0  #9be9a8  #40c463  #30a14e  #216e39
+```
+
+## Tech Stack
+
+- [symphonia](https://github.com/pdeljanov/Symphonia) — pure Rust audio decoding (mp3, wav, flac, ogg, aac)
+- [rustfft](https://github.com/ejmahler/RustFFT) — FFT spectrum analysis
+- [clap](https://github.com/clap-rs/clap) — CLI argument parsing
+- [yt-dlp](https://github.com/yt-dlp/yt-dlp) — YouTube audio download (optional)
+- [ffmpeg](https://ffmpeg.org/) — video encoding (video mode only)
+
+## License
+
+[MIT](LICENSE)

package/dist/cli/index.js

@@ -0,0 +1,330 @@
+#!/usr/bin/env node
+
+// cli/index.ts
+import { Command } from "commander";
+
+// lib/audio.ts
+var FFT_SIZE = 1024;
+function fft(re, im) {
+  const n = re.length;
+  for (let i = 1, j = 0; i < n; i++) {
+    let bit = n >> 1;
+    while (j & bit) {
+      j ^= bit;
+      bit >>= 1;
+    }
+    j ^= bit;
+    if (i < j) {
+      [re[i], re[j]] = [re[j], re[i]];
+      [im[i], im[j]] = [im[j], im[i]];
+    }
+  }
+  for (let len = 2; len <= n; len *= 2) {
+    const halfLen = len / 2;
+    const angle = -2 * Math.PI / len;
+    const wRe = Math.cos(angle);
+    const wIm = Math.sin(angle);
+    for (let i = 0; i < n; i += len) {
+      let curRe = 1;
+      let curIm = 0;
+      for (let j = 0; j < halfLen; j++) {
+        const a = i + j;
+        const b = a + halfLen;
+        const tRe = curRe * re[b] - curIm * im[b];
+        const tIm = curRe * im[b] + curIm * re[b];
+        re[b] = re[a] - tRe;
+        im[b] = im[a] - tIm;
+        re[a] += tRe;
+        im[a] += tIm;
+        const nextRe = curRe * wRe - curIm * wIm;
+        curIm = curRe * wIm + curIm * wRe;
+        curRe = nextRe;
+      }
+    }
+  }
+}
+function hannWindow(buf) {
+  const n = buf.length;
+  for (let i = 0; i < n; i++) {
+    buf[i] *= 0.5 * (1 - Math.cos(2 * Math.PI * i / (n - 1)));
+  }
+}
+function magnitudeSpectrum(samples) {
+  const re = new Float64Array(samples);
+  const im = new Float64Array(FFT_SIZE);
+  hannWindow(re);
+  fft(re, im);
+  const half = FFT_SIZE / 2;
+  const mag = new Float64Array(half);
+  for (let i = 0; i < half; i++) {
+    mag[i] = Math.sqrt(re[i] * re[i] + im[i] * im[i]);
+  }
+  return mag;
+}
+function logBands(bars, maxBin) {
+  const usableBins = Math.floor(maxBin * 0.3);
+  const edges = [];
+  const logMin = Math.log(1);
+  const logMax = Math.log(usableBins + 1);
+  for (let i = 0; i <= bars; i++) {
+    const val = Math.exp(logMin + (logMax - logMin) * (i / bars));
+    edges.push(Math.round(val));
+  }
+  return edges;
+}
+function extractSpectrumFromPCM(samples, _sampleRate, bars, frames) {
+  const totalSamples = samples.length;
+  const hopSize = Math.max(1, Math.floor((totalSamples - FFT_SIZE) / (frames - 1)));
+  const halfBins = FFT_SIZE / 2;
+  const edges = logBands(bars, halfBins);
+  const raw = [];
+  for (let f = 0; f < frames; f++) {
+    const offset = Math.min(f * hopSize, totalSamples - FFT_SIZE);
+    const chunk = new Float64Array(FFT_SIZE);
+    for (let i = 0; i < FFT_SIZE; i++) {
+      chunk[i] = samples[offset + i] ?? 0;
+    }
+    const mag = magnitudeSpectrum(chunk);
+    const bandValues = [];
+    for (let b = 0; b < bars; b++) {
+      const lo = Math.max(edges[b], 1);
+      const hi = Math.max(edges[b + 1], lo + 1);
+      let sum = 0;
+      let count = 0;
+      for (let k = lo; k < hi && k < halfBins; k++) {
+        sum += mag[k];
+        count++;
+      }
+      bandValues.push(count > 0 ? sum / count : 0);
+    }
+    raw.push(bandValues);
+  }
+  const bandMax = new Float64Array(bars);
+  let globalMax = 0;
+  for (let b = 0; b < bars; b++) {
+    for (let f = 0; f < frames; f++) {
+      if (raw[f][b] > bandMax[b]) bandMax[b] = raw[f][b];
+    }
+    if (bandMax[b] > globalMax) globalMax = bandMax[b];
+  }
+  if (globalMax === 0) {
+    return raw;
+  }
+  const result = [];
+  for (let f = 0; f < frames; f++) {
+    const row = [];
+    for (let b = 0; b < bars; b++) {
+      if (bandMax[b] === 0) {
+        row.push(0);
+        continue;
+      }
+      const weight = Math.pow(bandMax[b] / globalMax, 0.6);
+      const normalized = raw[f][b] / bandMax[b] * weight;
+      row.push(Math.sqrt(Math.min(normalized, 1)));
+    }
+    result.push(row);
+  }
+  return result;
+}
+async function extractSpectrumFromFile(filePath, bars, frames) {
+  const { execFile: execFile2 } = await import("child_process");
+  const { promisify: promisify2 } = await import("util");
+  const exec2 = promisify2(execFile2);
+  const SAMPLE_RATE = 16e3;
+  const { stdout } = await exec2(
+    "ffmpeg",
+    ["-i", filePath, "-ac", "1", "-ar", String(SAMPLE_RATE), "-f", "f32le", "-v", "quiet", "pipe:1"],
+    { encoding: "buffer", maxBuffer: 100 * 1024 * 1024 }
+  );
+  const samples = new Float32Array(
+    stdout.buffer,
+    stdout.byteOffset,
+    stdout.byteLength / 4
+  );
+  return extractSpectrumFromPCM(samples, SAMPLE_RATE, bars, frames);
+}
+
+// lib/types.ts
+var DEFAULT_OPTIONS = {
+  rows: 7,
+  cols: 52,
+  cellSize: 10,
+  cellGap: 3,
+  cellRadius: 2,
+  animationDuration: 10,
+  theme: "dark",
+  backgroundColor: "transparent"
+};
+var THEMES = {
+  dark: ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"],
+  light: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"]
+};
+
+// lib/svg.ts
+function escapeXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function litRows(amp, rows) {
+  return Math.round(amp * rows);
+}
+function rowColorLevel(r, rows) {
+  if (rows <= 1) return 4;
+  const ratio = r / (rows - 1);
+  if (ratio < 0.33) return 2;
+  if (ratio < 0.66) return 3;
+  return 4;
+}
+function generateSvg(spectrum, options, metadata) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const { rows, cols, cellSize, cellGap, cellRadius, animationDuration, theme, backgroundColor } = opts;
+  const colors = THEMES[theme];
+  const frames = spectrum.length;
+  const step = cellSize + cellGap;
+  const gridWidth = cols * step - cellGap;
+  const gridHeight = rows * step - cellGap;
+  const headerHeight = metadata ? 45 : 0;
+  const svgWidth = gridWidth;
+  const svgHeight = gridHeight + headerHeight;
+  const lines = [];
+  lines.push(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}">`
+  );
+  if (backgroundColor !== "transparent") {
+    lines.push(`<rect width="100%" height="100%" fill="${backgroundColor}"/>`);
+  }
+  if (metadata) {
+    const cx = 16;
+    const cy = 22;
+    const r = 14;
+    lines.push(`<g>`);
+    lines.push(`<circle cx="${cx}" cy="${cy}" r="${r}" fill="${colors[3]}" opacity="0.9"/>`);
+    const tx = cx - 4;
+    const ty = cy - 7;
+    lines.push(
+      `<polygon points="${tx + 3},${ty} ${tx + 3 + 12},${ty + 7} ${tx + 3},${ty + 14}" fill="${theme === "dark" ? "#fff" : "#000"}"/>`
+    );
+    const textX = cx + r + 8;
+    const textColor = theme === "dark" ? "#c9d1d9" : "#24292f";
+    lines.push(
+      `<a href="${escapeXml(metadata.url)}" target="_blank"><text x="${textX}" y="${cy + 5}" font-family="Segoe UI,Helvetica,Arial,sans-serif" font-size="13" fill="${textColor}">${escapeXml(metadata.title)} \u2014 ${escapeXml(metadata.artist)}</text></a>`
+    );
+    lines.push(`</g>`);
+  }
+  const cssLines = [];
+  for (let c = 0; c < cols; c++) {
+    for (let r = 0; r < rows; r++) {
+      const keyframeName = `c${c}r${r}`;
+      const kfParts = [];
+      for (let f = 0; f < frames; f++) {
+        const pct = (f / (frames - 1) * 100).toFixed(2);
+        const amp = spectrum[f]?.[c] ?? 0;
+        const lit = litRows(amp, rows);
+        const isLit = r < lit;
+        let colorIdx;
+        if (isLit) {
+          colorIdx = rowColorLevel(r, rows);
+        } else {
+          colorIdx = 0;
+        }
+        kfParts.push(`${pct}%{fill:${colors[colorIdx]}}`);
+      }
+      cssLines.push(`@keyframes ${keyframeName}{${kfParts.join("")}}`);
+    }
+  }
+  lines.push(`<style>`);
+  for (const css of cssLines) {
+    lines.push(css);
+  }
+  lines.push(`</style>`);
+  const gridY = headerHeight;
+  for (let c = 0; c < cols; c++) {
+    for (let r = 0; r < rows; r++) {
+      const x = c * step;
+      const y = gridY + (rows - 1 - r) * step;
+      const keyframeName = `c${c}r${r}`;
+      lines.push(
+        `<rect x="${x}" y="${y}" width="${cellSize}" height="${cellSize}" rx="${cellRadius}" fill="${colors[0]}" style="animation:${keyframeName} ${animationDuration}s ease-in-out infinite"/>`
+      );
+    }
+  }
+  lines.push(`</svg>`);
+  return lines.join("\n");
+}
+
+// cli/youtube.ts
+import { execFile } from "child_process";
+import { promisify } from "util";
+var exec = promisify(execFile);
+async function getVideoMetadata(videoUrl) {
+  const { stdout } = await exec("yt-dlp", ["--no-download", "-j", "--no-playlist", videoUrl]);
+  const data = JSON.parse(stdout);
+  return {
+    id: data.id ?? "",
+    title: data.title ?? data.fulltitle ?? "Unknown",
+    artist: data.artist ?? data.uploader ?? data.channel ?? "Unknown",
+    url: data.webpage_url ?? videoUrl
+  };
+}
+async function downloadAudio(videoUrl, outputPath) {
+  await exec("yt-dlp", ["-x", "--audio-format", "mp3", "-o", outputPath, "--no-playlist", videoUrl], {
+    timeout: 3e5
+  });
+}
+
+// cli/index.ts
+import { writeFile, mkdir, unlink } from "fs/promises";
+import { dirname, join } from "path";
+import { tmpdir } from "os";
+var program = new Command().name("readme-waves").description("Generate animated music equalizer SVGs").argument("<input>", "Audio file path or YouTube URL").option("-o, --output <path>", "Output path", "waveform.svg").option("--video", "Generate MP4 video with audio instead of SVG").option("--rows <n>", "Amplitude levels", "7").option("--cols <n>", "Frequency bands", "52").option("--frames <n>", "Animation frames (SVG mode)", "60").option("--fps <n>", "Video frame rate", "24").option("--duration <s>", "Animation duration in seconds (SVG mode)", "10").option("--theme <theme>", "Color theme: dark, light", "dark").action(async (input, opts) => {
+  const isYoutube = input.includes("youtube.com") || input.includes("youtu.be");
+  let audioPath = input;
+  let metadata;
+  let tempFile;
+  if (isYoutube) {
+    console.log("Fetching video info...");
+    const info = await getVideoMetadata(input);
+    metadata = { title: info.title, artist: info.artist, url: info.url };
+    console.log(`${info.title} - ${info.artist}`);
+    tempFile = join(tmpdir(), `readme-waves-${info.id}.mp3`);
+    console.log("Downloading audio...");
+    await downloadAudio(input, tempFile);
+    audioPath = tempFile;
+  }
+  if (opts.video) {
+    const { generateVideo, getAudioDuration } = await import("./video-7X5JNMOZ.js");
+    const output = opts.output.endsWith(".svg") ? opts.output.replace(".svg", ".mp4") : opts.output;
+    const duration = await getAudioDuration(audioPath);
+    const fps = +opts.fps;
+    const totalFrames = Math.floor(duration * fps);
+    console.log(`Audio: ${duration.toFixed(1)}s, generating ${totalFrames} frames...`);
+    const spectrum = await extractSpectrumFromFile(audioPath, +opts.cols, totalFrames);
+    await mkdir(dirname(output), { recursive: true });
+    await generateVideo(spectrum, audioPath, output, +opts.rows, +opts.cols, fps);
+    console.log(`Video saved to: ${output}`);
+  } else {
+    console.log(`Extracting spectrum (${opts.cols} bands, ${opts.frames} frames)...`);
+    const spectrum = await extractSpectrumFromFile(audioPath, +opts.cols, +opts.frames);
+    console.log("Generating SVG...");
+    const svg = generateSvg(
+      spectrum,
+      {
+        rows: +opts.rows,
+        cols: +opts.cols,
+        animationDuration: +opts.duration,
+        theme: opts.theme
+      },
+      metadata
+    );
+    await mkdir(dirname(opts.output), { recursive: true });
+    await writeFile(opts.output, svg);
+    console.log(`Saved to: ${opts.output}`);
+  }
+  if (metadata) {
+    const jsonPath = opts.output.replace(/\.(svg|mp4)$/, ".json");
+    await writeFile(jsonPath, JSON.stringify(metadata, null, 2));
+    console.log(`Metadata: ${jsonPath}`);
+  }
+  if (tempFile) await unlink(tempFile).catch(() => {
+  });
+});
+program.parse();

package/dist/cli/video-7X5JNMOZ.js

@@ -0,0 +1,132 @@
+// cli/video.ts
+import { execFile } from "child_process";
+var COLORS = [
+  [22, 27, 34],
+  // level 0: empty
+  [0, 109, 50],
+  // level 1 (skip #0e4429, too dark)
+  [38, 166, 65],
+  // level 2
+  [57, 211, 83],
+  // level 3
+  [57, 211, 83]
+  // level 4 (same as 3 for top)
+];
+var BG = [13, 17, 23];
+function rowColor(r, rows) {
+  if (rows <= 1) return COLORS[3];
+  const ratio = r / (rows - 1);
+  if (ratio < 0.33) return COLORS[1];
+  if (ratio < 0.66) return COLORS[2];
+  return COLORS[3];
+}
+async function generateVideo(spectrum, audioPath, outputPath, rows, cols, fps) {
+  if (spectrum.length === 0 || spectrum[0].length === 0) {
+    throw new Error("Empty spectrum data");
+  }
+  const cellSize = 12;
+  const cellGap = 3;
+  const cellPitch = cellSize + cellGap;
+  const padding = 20;
+  const numBands = spectrum[0].length;
+  const gridWidth = numBands * cellPitch - cellGap;
+  const gridHeight = rows * cellPitch - cellGap;
+  let width = gridWidth + padding * 2;
+  let height = gridHeight + padding * 2;
+  width = width + 1 & ~1;
+  height = height + 1 & ~1;
+  const totalFrames = spectrum.length;
+  console.log(`Rendering video: ${width}x${height} @ ${fps}fps, ${totalFrames} frames, ${numBands} bands...`);
+  const ffmpeg = execFile("ffmpeg", [
+    "-y",
+    "-f",
+    "rawvideo",
+    "-pix_fmt",
+    "rgb24",
+    "-s",
+    `${width}x${height}`,
+    "-r",
+    String(fps),
+    "-i",
+    "pipe:0",
+    "-i",
+    audioPath,
+    "-c:v",
+    "libx264",
+    "-preset",
+    "fast",
+    "-pix_fmt",
+    "yuv420p",
+    "-c:a",
+    "aac",
+    "-b:a",
+    "192k",
+    "-shortest",
+    "-movflags",
+    "+faststart",
+    outputPath
+  ]);
+  const stdin = ffmpeg.stdin;
+  const frameSize = width * height * 3;
+  const buf = Buffer.alloc(frameSize);
+  for (let f = 0; f < totalFrames; f++) {
+    for (let i = 0; i < frameSize; i += 3) {
+      buf[i] = BG[0];
+      buf[i + 1] = BG[1];
+      buf[i + 2] = BG[2];
+    }
+    for (let band = 0; band < numBands; band++) {
+      const amp = spectrum[f][band];
+      const lit = Math.min(Math.round(amp * rows), rows);
+      for (let r = 0; r < rows; r++) {
+        const isLit = rows - r <= lit;
+        const color = isLit ? rowColor(r, rows) : COLORS[0];
+        const x0 = padding + band * cellPitch;
+        const y0 = padding + r * cellPitch;
+        for (let dy = 0; dy < cellSize; dy++) {
+          for (let dx = 0; dx < cellSize; dx++) {
+            const px = x0 + dx;
+            const py = y0 + dy;
+            if (px < width && py < height) {
+              const idx = (py * width + px) * 3;
+              buf[idx] = color[0];
+              buf[idx + 1] = color[1];
+              buf[idx + 2] = color[2];
+            }
+          }
+        }
+      }
+    }
+    stdin.write(buf);
+    if (f % 100 === 0) {
+      console.log(`  frame ${f + 1}/${totalFrames}`);
+    }
+  }
+  await new Promise((resolve, reject) => {
+    stdin.end(() => {
+      ffmpeg.on("close", (code) => {
+        if (code === 0) resolve();
+        else reject(new Error(`ffmpeg exited with code ${code}`));
+      });
+      ffmpeg.on("error", reject);
+    });
+  });
+}
+async function getAudioDuration(filePath) {
+  const { promisify } = await import("util");
+  const exec = promisify(execFile);
+  const { stdout } = await exec("ffprobe", [
+    "-v",
+    "quiet",
+    "-show_entries",
+    "format=duration",
+    "-of",
+    "csv=p=0",
+    filePath
+  ]);
+  return parseFloat(stdout.trim());
+}
+export {
+  generateVideo,
+  getAudioDuration
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "readme-waves",
+  "version": "1.0.0",
+  "description": "Generate animated music equalizer SVGs for GitHub profile READMEs",
+  "type": "module",
+  "bin": {
+    "readme-waves": "./dist/cli/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:cli": "tsup cli/index.ts --format esm --out-dir dist/cli --target node22",
+    "start": "next start"
+  },
+  "keywords": [
+    "github",
+    "readme",
+    "music",
+    "equalizer",
+    "waveform",
+    "svg"
+  ],
+  "author": "TakalaWang",
+  "license": "MIT",
+  "dependencies": {
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
+    "commander": "^14.0.3",
+    "next": "^16.2.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.2",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2"
+  }
+}