tui-trends 1.0.3 → 1.0.4

package/README.md

@@ -6,14 +6,14 @@ Cyberpunk Google Trends visualizer in your terminal.
 
 ## Install globally
 
-**From npm (once published):**
+**From npm:**
 
 ```bash
 npm install -g tui-trends
 tui-trends "buy bitcoin"
 ```
 
-**From this repo (no npm publish needed):**
+**From this repo:**
 
 ```bash
 npm install
@@ -28,38 +28,63 @@ tui-trends "buy bitcoin"
 npx tui-trends "buy bitcoin"
 ```
 
+## Usage
+
+```bash
+# Google Trends (default)
+tui-trends "buy bitcoin"
+
+# npm package download trends — no rate limits, great for testing
+tui-trends --npm react
+tui-trends --npm typescript
+tui-trends --npm next
+```
+
 ## Development
 
 ```bash
 npm install
-npm start -- "buy bitcoin"   # runs via tsx, no build step
-npm run dev -- "buy bitcoin" # tsx watch mode, reloads on save
+npm start -- "buy bitcoin"        # runs via tsx, no build step
+npm run dev -- "buy bitcoin"      # tsx watch mode, reloads on save
+npm start -- --npm react          # npm mode in dev
 ```
 
 ## Keybindings
 
-| Key   | Action                           |
-| ----- | -------------------------------- |
-| `q`   | Quit                             |
-| `r`   | Refresh / re-fetch data          |
-| `↑ ↓` | Scroll the related queries table |
+| Key       | Action                   |
+| --------- | ------------------------ |
+| `q`       | Quit                     |
+| `← →`    | Cycle through themes     |
+
+## Themes
+
+Cycle through 6 built-in colour themes with `←` / `→`:
+
+| # | Name        | Vibe                          |
+|---|-------------|-------------------------------|
+| 1 | Synthwave   | Neon cyan & hot pink (default)|
+| 2 | Matrix      | All green on black            |
+| 3 | C64         | Commodore 64 blue/white       |
+| 4 | Amber       | Phosphor amber monitor        |
+| 5 | Nord        | Muted arctic pastels          |
+| 6 | Blood Moon  | Deep red & orange             |
 
 ## What you'll see
 
 - **Loading screen** — animated spinner with ASCII art banner while data is fetched
-- **Interest Over Time** — braille-rendered line chart (0–100 scale, last 12 months)
-- **Top Regions** — horizontal bar chart of countries with highest search interest
-- **Related Queries** — scrollable table of related search terms and their scores
+- **Line chart** — braille-rendered trend line (0–100 index, last 12 months)
+- **Bar chart** — top regions (Google mode) or peak download weeks (npm mode)
+- **Table** — related queries (Google mode) or monthly download breakdown (npm mode)
 
 ## Stack
 
 - [Rezi](https://rezitui.dev) — TypeScript TUI framework with native C rendering engine
 - [google-trends-api](https://www.npmjs.com/package/google-trends-api) — unofficial Google Trends client
-- [figlet](https://www.npmjs.com/package/figlet) — ASCII art banner
 - [tsx](https://github.com/privatenumber/tsx) — run TypeScript directly
 
 ## Notes
 
-- Requires an internet connection (hits `trends.google.com` directly)
-- Google Trends may rate-limit requests if called too frequently
+- Requires Node 18+ (uses native `fetch` for npm API)
+- Google Trends mode hits `trends.google.com` directly and may rate-limit if called repeatedly
+- Use `--npm` mode for unlimited local testing
 - Best displayed in a terminal at least 120 columns wide

package/dist/cli.js

@@ -1,14 +1,96 @@
 #!/usr/bin/env node
 
 // src/index.ts
-import { ui, rgb, draculaTheme } from "@rezi-ui/core";
+import {
+  ui,
+  rgb,
+  draculaTheme,
+  darkTheme,
+  nordTheme,
+  dimmedTheme
+} from "@rezi-ui/core";
 import { createNodeApp } from "@rezi-ui/node";
 import googleTrends from "google-trends-api";
-var NEON_CYAN = rgb(0, 255, 200);
-var NEON_PINK = rgb(255, 46, 151);
-var NEON_GREEN = rgb(80, 250, 123);
-var DIM_TEXT = rgb(98, 114, 164);
-var CHART_COLOR = "#00ffc8";
+var THEMES = [
+  {
+    name: "Synthwave",
+    rezi: draculaTheme,
+    chart: "#00ffc8",
+    accent1: rgb(80, 250, 123),
+    accent2: rgb(0, 255, 200),
+    accent3: rgb(255, 46, 151),
+    banner1: rgb(0, 255, 200),
+    banner2: rgb(255, 46, 151),
+    barVariant: "info",
+    dim: rgb(98, 114, 164),
+    border: rgb(0, 200, 160)
+  },
+  {
+    name: "Matrix",
+    rezi: darkTheme,
+    chart: "#00ff41",
+    accent1: rgb(0, 255, 65),
+    accent2: rgb(57, 255, 20),
+    accent3: rgb(0, 200, 40),
+    banner1: rgb(0, 255, 65),
+    banner2: rgb(0, 160, 30),
+    barVariant: "success",
+    dim: rgb(0, 100, 25),
+    border: rgb(0, 160, 40)
+  },
+  {
+    name: "C64",
+    rezi: darkTheme,
+    chart: "#acacff",
+    accent1: rgb(172, 172, 255),
+    accent2: rgb(255, 255, 255),
+    accent3: rgb(255, 255, 100),
+    banner1: rgb(172, 172, 255),
+    banner2: rgb(100, 100, 220),
+    barVariant: "info",
+    dim: rgb(80, 80, 160),
+    border: rgb(120, 120, 220)
+  },
+  {
+    name: "Amber",
+    rezi: dimmedTheme,
+    chart: "#ffaa00",
+    accent1: rgb(255, 200, 50),
+    accent2: rgb(255, 140, 0),
+    accent3: rgb(255, 100, 0),
+    banner1: rgb(255, 160, 0),
+    banner2: rgb(200, 80, 0),
+    barVariant: "warning",
+    dim: rgb(120, 70, 0),
+    border: rgb(180, 100, 0)
+  },
+  {
+    name: "Nord",
+    rezi: nordTheme,
+    chart: "#88c0d0",
+    accent1: rgb(163, 190, 140),
+    accent2: rgb(136, 192, 208),
+    accent3: rgb(180, 142, 173),
+    banner1: rgb(136, 192, 208),
+    banner2: rgb(94, 129, 172),
+    barVariant: "info",
+    dim: rgb(76, 86, 106),
+    border: rgb(94, 129, 172)
+  },
+  {
+    name: "Blood Moon",
+    rezi: darkTheme,
+    chart: "#ff3030",
+    accent1: rgb(255, 80, 80),
+    accent2: rgb(255, 140, 0),
+    accent3: rgb(255, 220, 50),
+    banner1: rgb(255, 48, 48),
+    banner2: rgb(180, 0, 0),
+    barVariant: "error",
+    dim: rgb(100, 30, 30),
+    border: rgb(180, 20, 20)
+  }
+];
 var BANNER_TEXT = "  _____ _   _ ___    _____ ____  _____ _   _ ____  ____  \n |_   _| | | |_ _|  |_   _|  _ \\| ____| \\ | |  _ \\/ ___| \n   | | | | | || |     | | | |_) |  _| |  \\| | | | \\___ \\ \n   | | | |_| || |     | | |  _ <| |___| |\\  | |_| |___) |\n   |_|  \\___/|___|    |_| |_| \\_\\_____|_| \\_|____/|____/ ";
 var BANNER_LINES = BANNER_TEXT.split("\n").filter((l) => l.length > 0);
 async function fetchTrends(keyword2) {
@@ -28,164 +110,211 @@ async function fetchTrends(keyword2) {
     })
   );
   const regionsJson = JSON.parse(regionsRaw);
-  const regions = (regionsJson.default?.geoMapData ?? []).map((d) => ({
-    geoName: String(d.geoName ?? ""),
-    value: Number(d.value?.[0] ?? 0)
-  })).sort((a, b) => b.value - a.value).slice(0, 8);
+  const regions = (regionsJson.default?.geoMapData ?? []).map((d) => ({ geoName: String(d.geoName ?? ""), value: Number(d.value?.[0] ?? 0) })).sort((a, b) => b.value - a.value).slice(0, 8);
   const queriesJson = JSON.parse(queriesRaw);
   const rankedList = queriesJson.default?.rankedList ?? [];
-  const queries = (rankedList[0]?.rankedKeyword ?? []).slice(0, 10).map((d) => ({
-    query: String(d.query ?? ""),
-    value: Number(d.value ?? 0)
+  const queries = (rankedList[0]?.rankedKeyword ?? []).slice(0, 12).map((d) => ({ query: String(d.query ?? ""), value: Number(d.value ?? 0) }));
+  return { timeline, regions, queries };
+}
+function monthLabel(yyyyMM) {
+  const names = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const [y, m] = yyyyMM.split("-");
+  return `${names[parseInt(m ?? "1") - 1] ?? "?"} '${(y ?? "").slice(2)}`;
+}
+async function fetchNpm(pkg) {
+  const res = await fetch(
+    `https://api.npmjs.org/downloads/range/last-year/${encodeURIComponent(pkg)}`
+  );
+  if (!res.ok) throw new Error(`npm registry error: ${res.status} ${res.statusText}`);
+  const json = await res.json();
+  if (json.error) throw new Error(`Package not found: "${pkg}"`);
+  const daily = json.downloads ?? [];
+  const weeks = [];
+  for (let i = 0; i < daily.length; i += 7) {
+    const chunk = daily.slice(i, Math.min(i + 7, daily.length));
+    const total = chunk.reduce((s, d) => s + d.downloads, 0);
+    weeks.push({ label: chunk[0].day, total });
+  }
+  const maxWeek = Math.max(...weeks.map((w) => w.total), 1);
+  const timeline = weeks.map((w) => ({
+    formattedTime: w.label,
+    value: Math.round(w.total / maxWeek * 100)
+  }));
+  const topWeeks = [...weeks].sort((a, b) => b.total - a.total).slice(0, 8);
+  const regions = topWeeks.map((w) => ({
+    // Show as "MMM 'YY" — e.g. "Mar '25"
+    geoName: monthLabel(w.label.slice(0, 7)) + " " + w.label.slice(8, 10),
+    value: Math.round(w.total / maxWeek * 100)
+  }));
+  const monthMap = /* @__PURE__ */ new Map();
+  for (const { day, downloads } of daily) {
+    const mo = day.slice(0, 7);
+    monthMap.set(mo, (monthMap.get(mo) ?? 0) + downloads);
+  }
+  const sortedMonths = [...monthMap.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+  const maxMonth = Math.max(...sortedMonths.map(([, v]) => v), 1);
+  const queries = sortedMonths.map(([mo, total]) => ({
+    query: monthLabel(mo),
+    value: Math.round(total / maxMonth * 100)
   }));
   return { timeline, regions, queries };
 }
-var keyword = process.argv[2] ?? "bitcoin";
+var rawArgs = process.argv.slice(2);
+var mode = "google";
+var keyword;
+if (rawArgs[0] === "--npm") {
+  mode = "npm";
+  keyword = rawArgs[1] ?? "react";
+} else {
+  keyword = rawArgs[0] ?? "bitcoin";
+}
 var app = createNodeApp({
-  initialState: { status: "loading", keyword, data: null, error: null },
-  theme: draculaTheme
+  initialState: { status: "loading", keyword, mode, data: null, error: null, themeIndex: 0 },
+  theme: THEMES[0].rezi
 });
-async function refetch() {
-  app.update((s) => ({ ...s, status: "loading", data: null, error: null }));
+async function fetchOnce(kw) {
   try {
-    const data = await fetchTrends(keyword);
+    const data = mode === "npm" ? await fetchNpm(kw) : await fetchTrends(kw);
     app.update((s) => ({ ...s, status: "ready", data }));
   } catch (err) {
-    const msg = err instanceof Error ? err.message : String(err);
+    const raw = err instanceof Error ? err.message : String(err);
+    const isRateLimit = raw.includes("<HEAD>") || raw.includes("DOCTYPE") || raw.includes("not valid JSON");
+    const msg = isRateLimit ? "Google Trends is rate-limiting requests from this IP.\n\nWait 1\u20132 minutes and try again." : raw;
     app.update((s) => ({ ...s, status: "error", error: msg }));
   }
 }
+function theme(state) {
+  return THEMES[state.themeIndex] ?? THEMES[0];
+}
+function themedHeader(title, subtitle, t) {
+  return ui.box({ border: "rounded", px: 1, py: 0, style: { fg: t.border } }, [
+    ui.row({ gap: 1, items: "center" }, [
+      ui.text(title, { variant: "heading" }),
+      ui.text(subtitle, { dim: true }),
+      ui.spacer({ flex: 1 })
+    ])
+  ]);
+}
+function xAxisLabels(timeline, count = 7) {
+  if (timeline.length === 0) return [];
+  const step = (timeline.length - 1) / (count - 1);
+  return Array.from({ length: count }, (_, i) => {
+    const raw = timeline[Math.round(i * step)]?.formattedTime ?? "";
+    if (raw.includes("-")) {
+      return monthLabel(raw.slice(0, 7));
+    }
+    const month = raw.slice(0, 3);
+    const year = raw.match(/\d{4}/)?.[0]?.slice(2) ?? "";
+    return year ? `${month} '${year}` : month;
+  });
+}
+function footer(state) {
+  const t = theme(state);
+  return ui.statusBar({
+    left: [
+      ui.text("[q]", { style: { fg: t.accent3, bold: true } }),
+      ui.text("quit", { style: { fg: t.dim } }),
+      ui.text("  [\u2190 \u2192]", { style: { fg: t.accent3, bold: true } }),
+      ui.text("cycle theme", { style: { fg: t.dim } })
+    ],
+    right: [
+      ui.text(`${t.name}  (${state.themeIndex + 1}/${THEMES.length})`, { style: { fg: t.accent2 } })
+    ]
+  });
+}
 function loadingView(state) {
+  const t = theme(state);
   return ui.page({
     body: ui.column({ gap: 1, items: "center", justify: "center" }, [
-      ui.column(
-        { gap: 0 },
-        BANNER_LINES.map(
-          (line, i) => ui.text(line, {
-            style: {
-              fg: i % 2 === 0 ? NEON_CYAN : NEON_PINK,
-              bold: true
-            },
-            key: String(i)
-          })
-        )
-      ),
+      ui.column({ gap: 0 }, BANNER_LINES.map(
+        (line, i) => ui.text(line, { style: { fg: i % 2 === 0 ? t.banner1 : t.banner2, bold: true }, key: String(i) })
+      )),
       ui.spacer({ size: 1 }),
       ui.row({ gap: 1, items: "center" }, [
         ui.spinner({ variant: "dots" }),
-        ui.text(`Fetching trends for "${state.keyword}"\u2026`, {
-          style: { fg: NEON_GREEN }
-        })
+        ui.text(`Fetching ${state.mode === "npm" ? "npm downloads" : "trends"} for "${state.keyword}"\u2026`, { style: { fg: t.accent1 } })
       ]),
-      ui.text("This may take a few seconds", { style: { fg: DIM_TEXT } })
-    ])
+      ui.text("This may take a few seconds", { style: { fg: t.dim } })
+    ]),
+    footer: footer(state)
   });
 }
 function errorView(state) {
+  const t = theme(state);
   return ui.page({
-    header: ui.header({ title: "TUI TRENDS", subtitle: "Failed to fetch data" }),
+    header: themedHeader("TUI TRENDS", `"${state.keyword}"`, t),
     body: ui.column({ gap: 2 }, [
       ui.callout(state.error ?? "Unknown error", { variant: "error" }),
-      ui.text("Press [r] to retry or [q] to quit", { style: { fg: DIM_TEXT } })
-    ])
-  });
-}
-function xAxisLabels(timeline, count = 7) {
-  if (timeline.length === 0) return [];
-  const step = (timeline.length - 1) / (count - 1);
-  return Array.from({ length: count }, (_, i) => {
-    const point = timeline[Math.round(i * step)];
-    const raw = point?.formattedTime ?? "";
-    const month = raw.slice(0, 3);
-    const year = raw.match(/\d{4}/)?.[0]?.slice(2) ?? "";
-    return year ? `${month} '${year}` : month;
+      ui.text("Press [q] to quit", { style: { fg: t.dim } })
+    ]),
+    footer: footer(state)
   });
 }
 function dashboardView(state) {
+  const t = theme(state);
   const data = state.data;
-  const timelineValues = data.timeline.map((t) => t.value);
-  const xLabels = xAxisLabels(data.timeline);
+  const isNpm = state.mode === "npm";
+  const vals = data.timeline.map((p) => p.value);
+  const xlabels = xAxisLabels(data.timeline);
   return ui.page({
-    header: ui.header({
-      title: "TUI TRENDS",
-      subtitle: `"${state.keyword}" \u2014 interest over the last 12 months`
-    }),
+    header: themedHeader(
+      "TUI TRENDS",
+      isNpm ? `"${state.keyword}" \u2014 npm downloads (weekly index, 0\u2013100)` : `"${state.keyword}" \u2014 interest over the last 12 months`,
+      t
+    ),
     body: ui.column({ gap: 1 }, [
-      // ── Interest over time ───────────────────────────────────────
-      ui.panel(
-        { title: "\u25B8  Interest Over Time", variant: "rounded", p: 1, gap: 1 },
-        [
-          ui.lineChart({
-            width: 90,
-            height: 12,
-            series: [{ label: state.keyword, color: CHART_COLOR, data: timelineValues }],
-            axes: {
-              y: { min: 0, max: 100 }
-            },
-            showLegend: false,
-            blitter: "braille"
-          }),
-          // Manual X-axis date labels
-          ui.row({ gap: 0 }, xLabels.flatMap((label, i) => [
-            ui.text(label, { style: { fg: DIM_TEXT }, key: `xl${i}` }),
-            ...i < xLabels.length - 1 ? [ui.spacer({ flex: 1, key: `xs${i}` })] : []
-          ])),
-          ui.row({ gap: 2 }, [
-            ui.text(`Peak: ${Math.max(...timelineValues)}`, { style: { fg: NEON_GREEN, bold: true } }),
-            ui.text(`Avg: ${Math.round(timelineValues.reduce((a, b) => a + b, 0) / timelineValues.length)}`, { style: { fg: NEON_CYAN } }),
-            ui.text(`Current: ${timelineValues.at(-1) ?? 0}`, { style: { fg: NEON_PINK } })
-          ])
-        ]
-      ),
-      // ── Bottom row: regions + queries ────────────────────────────
+      // ── Line chart ───────────────────────────────────────────────
+      ui.panel({ title: isNpm ? "\u25B8  Weekly Downloads" : "\u25B8  Interest Over Time", variant: "rounded", p: 1, gap: 1, style: { fg: t.border } }, [
+        ui.lineChart({
+          width: 90,
+          height: 12,
+          series: [{ label: state.keyword, color: t.chart, data: vals }],
+          axes: { y: { min: 0, max: 100 } },
+          showLegend: false,
+          blitter: "braille"
+        }),
+        ui.row({ gap: 0 }, xlabels.flatMap((label, i) => [
+          ui.text(label, { style: { fg: t.dim }, key: `xl${i}` }),
+          ...i < xlabels.length - 1 ? [ui.spacer({ flex: 1, key: `xs${i}` })] : []
+        ])),
+        ui.row({ gap: 2 }, [
+          ui.text(`Peak: ${Math.max(...vals)}`, { style: { fg: t.accent1, bold: true } }),
+          ui.text(`Avg: ${Math.round(vals.reduce((a, b) => a + b, 0) / vals.length)}`, { style: { fg: t.accent2 } }),
+          ui.text(`Current: ${vals.at(-1) ?? 0}`, { style: { fg: t.accent3 } })
+        ])
+      ]),
+      // ── Bottom row ───────────────────────────────────────────────
       ui.row({ gap: 1 }, [
-        ui.box({ flex: 1 }, [
-          ui.panel(
-            { title: "\u25B8  Top Regions", variant: "rounded", p: 1 },
-            [
-              ui.barChart(
-                data.regions.map((r) => ({
-                  label: r.geoName.length > 16 ? r.geoName.slice(0, 15) + "\u2026" : r.geoName,
-                  value: r.value,
-                  variant: "info"
-                })),
-                { orientation: "horizontal", showValues: true }
-              )
-            ]
-          )
+        ui.box({ flex: 1, border: "none" }, [
+          ui.panel({ title: isNpm ? "\u25B8  Peak Weeks" : "\u25B8  Top Regions", variant: "rounded", p: 1, style: { fg: t.border } }, [
+            ui.barChart(
+              data.regions.map((r) => ({
+                label: r.geoName.length > 16 ? r.geoName.slice(0, 15) + "\u2026" : r.geoName,
+                value: r.value,
+                variant: t.barVariant
+              })),
+              { orientation: "horizontal", showValues: true }
+            )
+          ])
         ]),
-        ui.box({ flex: 1 }, [
-          ui.panel(
-            { title: "\u25B8  Related Queries", variant: "rounded", p: 1 },
-            [
-              ui.table({
-                id: "related-queries",
-                columns: [
-                  { key: "query", header: "Query", flex: 1, overflow: "ellipsis" },
-                  { key: "value", header: "Score", width: 7, align: "right" }
-                ],
-                data: data.queries,
-                getRowKey: (r) => r.query,
-                showHeader: true,
-                borderStyle: { variant: "single", color: rgb(68, 71, 90) }
-              })
-            ]
-          )
+        ui.box({ flex: 1, border: "none" }, [
+          ui.panel({ title: isNpm ? "\u25B8  Monthly Breakdown" : "\u25B8  Related Queries", variant: "rounded", p: 1, style: { fg: t.border } }, [
+            ui.table({
+              id: "queries-table",
+              columns: [
+                { key: "query", header: isNpm ? "Month" : "Query", flex: 1, overflow: "ellipsis" },
+                { key: "value", header: isNpm ? "Index" : "Score", width: 7, align: "right" }
+              ],
+              data: data.queries,
+              getRowKey: (r) => r.query,
+              showHeader: true,
+              borderStyle: { variant: "single", color: t.dim }
+            })
+          ])
         ])
       ])
     ]),
-    footer: ui.statusBar({
-      left: [
-        ui.text("[q]", { style: { fg: NEON_PINK, bold: true } }),
-        ui.text("quit", { style: { fg: DIM_TEXT } }),
-        ui.text("  [r]", { style: { fg: NEON_PINK, bold: true } }),
-        ui.text("refresh", { style: { fg: DIM_TEXT } }),
-        ui.text("  [\u2191\u2193] scroll queries", { style: { fg: DIM_TEXT } })
-      ],
-      right: [
-        ui.text("powered by Google Trends", { style: { fg: DIM_TEXT } })
-      ]
-    })
+    footer: footer(state)
   });
 }
 app.view((state) => {
@@ -193,13 +322,23 @@ app.view((state) => {
   if (state.status === "error") return errorView(state);
   return dashboardView(state);
 });
+function cycleTheme(currentIndex, dir) {
+  const next = (currentIndex + dir + THEMES.length) % THEMES.length;
+  app.update((s) => ({ ...s, themeIndex: next }));
+}
 app.keys({
-  q: () => {
+  q: (ctx) => {
     void app.stop();
   },
-  r: () => {
-    void refetch();
+  left: (ctx) => {
+    cycleTheme(ctx.state.themeIndex, -1);
+  },
+  right: (ctx) => {
+    cycleTheme(ctx.state.themeIndex, 1);
+  },
+  t: (ctx) => {
+    cycleTheme(ctx.state.themeIndex, 1);
   }
 });
-void refetch();
+void fetchOnce(keyword);
 await app.start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tui-trends",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Cyberpunk Google Trends visualizer in your terminal",
   "license": "MIT",
   "type": "module",
@@ -22,8 +22,12 @@
     "@rezi-ui/core": "0.1.0-alpha.45",
     "@rezi-ui/native": "0.1.0-alpha.45",
     "@rezi-ui/node": "0.1.0-alpha.45",
+    "g": "^2.0.1",
     "google-trends-api": "^4.9.2"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "esbuild": "^0.27.3",