From 454c7bda8513ab33cd6bd1c28cf728054c1b6b94 Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sat, 30 May 2026 16:08:12 -0600
Subject: [PATCH 1/8] Add rendering chart components

---
 .../src/commands/bedwars/bedwars.profile.tsx  |  48 ++++-
 apps/discord-bot/src/components/Badge.tsx     |  32 +++
 apps/discord-bot/src/components/BarChart.tsx  |  83 ++++++++
 apps/discord-bot/src/components/Graph.tsx     |  67 +++++++
 apps/discord-bot/src/components/StatDelta.tsx |  34 ++++
 apps/discord-bot/src/components/index.ts      |   4 +
 docs/rendering-components-prd.md              |  36 ++++
 packages/rendering/src/intrinsics/Graph.ts    | 182 ++++++++++++++++++
 packages/rendering/src/intrinsics/index.ts    |   1 +
 packages/rendering/src/jsx/instrinsics.ts     |   4 +-
 10 files changed, 489 insertions(+), 2 deletions(-)
 create mode 100644 apps/discord-bot/src/components/Badge.tsx
 create mode 100644 apps/discord-bot/src/components/BarChart.tsx
 create mode 100644 apps/discord-bot/src/components/Graph.tsx
 create mode 100644 apps/discord-bot/src/components/StatDelta.tsx
 create mode 100644 docs/rendering-components-prd.md
 create mode 100644 packages/rendering/src/intrinsics/Graph.ts

diff --git a/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx b/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx
index 452699499..80d7011d8 100644
--- a/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx
+++ b/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx
@@ -6,16 +6,20 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { BedWarsModes, FormattedGame, type GameMode } from "@statsify/schemas";
 import {
+  Badge,
+  BarChart,
   Container,
   Footer,
+  Graph,
   Header,
   Historical,
   SidebarItem,
+  StatDelta,
   Table,
   formatProgression,
 } from "#components";
+import { BedWarsModes, FormattedGame, type GameMode } from "@statsify/schemas";
 import type { BaseProfileProps } from "#commands/base.hypixel-command";
 
 export interface BedWarsProfileProps extends BaseProfileProps {
@@ -35,6 +39,22 @@ export const BedWarsProfile = ({
 }: BedWarsProfileProps) => {
   const { bedwars } = player.stats;
   const stats = bedwars[mode.api];
+  const modeWins = [
+    { label: "Solo", value: bedwars.solo.wins || 0, color: "#4e79a7" },
+    { label: "Doubles", value: bedwars.doubles.wins || 0, color: "#76b7b2" },
+    { label: "3s", value: bedwars.threes.wins || 0, color: "#f28e2b" },
+    { label: "4s", value: bedwars.fours.wins || 0, color: "#e15759" },
+    { label: "4v4", value: bedwars["4v4"].wins || 0, color: "#9ca3af" },
+  ];
+  const ratioPoints = [
+    { label: t("stats.wlr"), value: stats.wlr || 0 },
+    { label: t("stats.fkdr"), value: stats.fkdr || 0 },
+    { label: t("stats.kdr"), value: stats.kdr || 0 },
+    { label: t("stats.bblr"), value: stats.bblr || 0 },
+  ];
+  const ratioAverage =
+    ratioPoints.reduce((total, point) => total + point.value, 0) / ratioPoints.length;
+  const fkdrDelta = (stats.fkdr || 0) - (bedwars.overall.fkdr || 0);
 
   const sidebar: SidebarItem[] = [
     [t("stats.tokens"), t(bedwars.tokens), "§2"],
@@ -113,6 +133,32 @@ export const BedWarsProfile = ({
           exp={bedwars.exp}
         />
       </Table.table>
+      <div width="100%">
+        <box width="1/2" direction="column" location="left">
+          <div width="100%">
+            <text>§lMode Wins</text>
+            <div width="remaining" />
+            <Badge>§bVisual</Badge>
+          </div>
+          <BarChart items={modeWins} />
+        </box>
+        <box width="1/2" direction="column" location="left">
+          <div width="100%">
+            <text>§lRatio Profile</text>
+            <div width="remaining" />
+            <StatDelta value={fkdrDelta} />
+          </div>
+          <Graph
+            points={ratioPoints}
+            height={112}
+            min={0}
+            max={Math.max(1, ...ratioPoints.map((point) => point.value))}
+            referenceValue={ratioAverage}
+            color="#9ca3af"
+            fillColor="rgba(156, 163, 175, 0.12)"
+          />
+        </box>
+      </div>
       <Footer logo={logo} user={user} />
     </Container>
   );
diff --git a/apps/discord-bot/src/components/Badge.tsx b/apps/discord-bot/src/components/Badge.tsx
new file mode 100644
index 000000000..541fe4382
--- /dev/null
+++ b/apps/discord-bot/src/components/Badge.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface BadgeProps {
+  children: string;
+  color?: JSX.IntrinsicElements["box"]["color"];
+  outline?: JSX.IntrinsicElements["box"]["outline"];
+}
+
+export const Badge = ({
+  children,
+  color = "rgba(255, 255, 255, 0.14)",
+  outline,
+}: BadgeProps) => (
+  <box
+    padding={{ top: 3, bottom: 3, left: 8, right: 8 }}
+    margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+    border={{ topLeft: 3, topRight: 3, bottomLeft: 3, bottomRight: 3 }}
+    color={color}
+    outline={outline}
+    outlineSize={2}
+    shadowDistance={2}
+    shadowOpacity={0.45}
+  >
+    <text margin={0} size={1.5}>{children}</text>
+  </box>
+);
diff --git a/apps/discord-bot/src/components/BarChart.tsx b/apps/discord-bot/src/components/BarChart.tsx
new file mode 100644
index 000000000..fc884ca8c
--- /dev/null
+++ b/apps/discord-bot/src/components/BarChart.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface BarChartItem {
+  label: string;
+  value: number;
+  color?: JSX.IntrinsicElements["box"]["color"];
+  formattedValue?: string;
+}
+
+export interface BarChartProps {
+  items: BarChartItem[];
+  width?: JSX.Measurement;
+  max?: number;
+  sort?: boolean;
+  showValues?: boolean;
+}
+
+export const BarChart = ({
+  items,
+  width = "100%",
+  max,
+  sort = true,
+  showValues = true,
+}: BarChartProps) => {
+  const sortedItems = sort ? [...items].sort((a, b) => b.value - a.value) : items;
+  const maximum = max ?? Math.max(1, ...sortedItems.map((item) => item.value));
+
+  return (
+    <div width={width} direction="column">
+      {sortedItems.map((item) => {
+        const percentage = item.value > 0 ?
+          Math.max(2, Math.min(100, Math.round((item.value / maximum) * 100))) :
+          0;
+
+        return (
+          <box
+            width="100%"
+            direction="column"
+            padding={{ top: 5, bottom: 5, left: 8, right: 8 }}
+            margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+          >
+            <div width="100%">
+              <text margin={{ top: 0, bottom: 3, left: 0, right: 4 }} size={1.75}>
+                {`§7${item.label}`}
+              </text>
+              <div width="remaining" />
+              {showValues ?
+                (
+                  <text margin={{ top: 0, bottom: 3, left: 4, right: 0 }} size={1.75}>
+                    {item.formattedValue ?? item.value.toLocaleString()}
+                  </text>
+                ) :
+                <></>}
+            </div>
+            <box
+              width="100%"
+              height={10}
+              margin={0}
+              padding={0}
+              color="rgba(255, 255, 255, 0.12)"
+              shadowDistance={0}
+            >
+              <box
+                width={`${percentage}%`}
+                height="100%"
+                margin={0}
+                padding={0}
+                color={item.color ?? "#9ca3af"}
+                shadowDistance={0}
+              />
+            </box>
+          </box>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/apps/discord-bot/src/components/Graph.tsx b/apps/discord-bot/src/components/Graph.tsx
new file mode 100644
index 000000000..6a96ce8b7
--- /dev/null
+++ b/apps/discord-bot/src/components/Graph.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface GraphPoint {
+  label: string;
+  value: number;
+}
+
+export interface GraphProps {
+  points: GraphPoint[];
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  color?: JSX.IntrinsicElements["graph"]["color"];
+  fillColor?: JSX.IntrinsicElements["graph"]["fillColor"];
+  referenceValue?: number;
+  min?: number;
+  max?: number;
+  smooth?: boolean;
+  showLabels?: boolean;
+}
+
+export const Graph = ({
+  points,
+  width = "100%",
+  height = 96,
+  color = "#9ca3af",
+  fillColor = "rgba(156, 163, 175, 0.14)",
+  referenceValue,
+  min,
+  max,
+  smooth = true,
+  showLabels = true,
+}: GraphProps) => {
+  const labels = points.length <= 5 ? points : [points[0], points.at(-1)!];
+
+  return (
+    <div width={width} direction="column">
+      <graph
+        width="100%"
+        height={height}
+        data={points.map((point) => point.value)}
+        min={min}
+        max={max}
+        color={color}
+        fillColor={fillColor}
+        referenceValue={referenceValue}
+        smooth={smooth}
+      />
+      {showLabels && labels.length ?
+        (
+          <div width="100%" location="center">
+            {labels.map((point) => (
+              <text margin={{ top: 0, bottom: 2, left: 8, right: 8 }} size={1.5}>
+                {`§7${point.label}`}
+              </text>
+            ))}
+          </div>
+        ) :
+        <></>}
+    </div>
+  );
+};
diff --git a/apps/discord-bot/src/components/StatDelta.tsx b/apps/discord-bot/src/components/StatDelta.tsx
new file mode 100644
index 000000000..a94d7cffb
--- /dev/null
+++ b/apps/discord-bot/src/components/StatDelta.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { Badge } from "./Badge.js";
+
+export interface StatDeltaProps {
+  value: number;
+  format?: (value: number) => string;
+  invertColor?: boolean;
+}
+
+export const StatDelta = ({
+  value,
+  format = (v) => v.toLocaleString(undefined, { maximumFractionDigits: 2 }),
+  invertColor = false,
+}: StatDeltaProps) => {
+  const rounded = Math.round(value * 100) / 100;
+  const isPositive = rounded > 0;
+  const isNegative = rounded < 0;
+  const isGood = isPositive !== invertColor;
+  const color = isPositive || isNegative ? (isGood ? "§a" : "§c") : "§7";
+  const sign = isPositive ? "+" : "";
+
+  return (
+    <Badge color={isPositive || isNegative ? "rgba(255, 255, 255, 0.12)" : "rgba(255, 255, 255, 0.08)"}>
+      {`${color}${sign}${format(rounded)}`}
+    </Badge>
+  );
+};
diff --git a/apps/discord-bot/src/components/index.ts b/apps/discord-bot/src/components/index.ts
index bdd58d484..9bfbda0da 100644
--- a/apps/discord-bot/src/components/index.ts
+++ b/apps/discord-bot/src/components/index.ts
@@ -7,8 +7,11 @@
  */
 
 export * from "./Background.js";
+export * from "./Badge.js";
+export * from "./BarChart.js";
 export * from "./Container.js";
 export * from "./Footer.js";
+export * from "./Graph.js";
 export * from "./Header/index.js";
 export * from "./Historical/index.js";
 export * from "./If.js";
@@ -17,5 +20,6 @@ export * from "./Multiline.js";
 export * from "./ProgressBar.js";
 export * from "./Sidebar.js";
 export * from "./Skin.js";
+export * from "./StatDelta.js";
 export * from "./Table/index.js";
 export * from "./GameList.js";
diff --git a/docs/rendering-components-prd.md b/docs/rendering-components-prd.md
new file mode 100644
index 000000000..1aeb2c3a4
--- /dev/null
+++ b/docs/rendering-components-prd.md
@@ -0,0 +1,36 @@
+# Statsify Rendering Components PRD
+
+## Goal
+
+Expand the Discord image JSX component library with reusable data-visualization and callout components that match existing Statsify cards: dense Minecraft-style profile images, strong stat hierarchy, compact tables, and progress-focused summaries.
+
+## Initial Scope
+
+- `Graph`: thin line/sparkline component for ratios, progression, or historical trend data. It should avoid legends and grid noise; commands provide nearby labels and context.
+- `BarChart`: horizontal comparison bars for mode breakdowns, resource totals, and ranked stat groups.
+- `Badge`: compact pill for rank tags, flags, personal bests, and small state labels.
+- `StatDelta`: signed inline change chip for session, period, and mode-vs-overall comparisons.
+
+## Implementation Direction
+
+- Keep chart primitives low level in `@statsify/rendering` only when Canvas path access is required. The new `graph` intrinsic owns the line, optional area fill, dots, and reference line.
+- Keep product-level components in `apps/discord-bot/src/components` so commands can compose them without knowing renderer internals.
+- Prefer pure JSX/`box` composition for rectangular visuals. This keeps BarChart, Badge, and StatDelta theme-compatible without renderer changes.
+- Use direct labels around charts instead of legends. For small Discord images, labels should be short and adjacent to the data.
+- Use muted gray as the default chart color, with one accent per chart when a command needs emphasis.
+- Sort horizontal bar charts by value by default. Commands can disable sorting when the natural order matters.
+
+## Demo Direction
+
+BedWars is the first demo surface because the public site already showcases BedWars profile cards and mode stats. The profile now includes:
+
+- A mode wins BarChart across Solo, Doubles, 3s, 4s, and 4v4.
+- A ratio Graph for WLR, FKDR, KDR, and BBLR.
+- A StatDelta comparing selected-mode FKDR against overall FKDR.
+- A Badge to mark the new visual block.
+
+## Follow-Ups
+
+- Add a true historical Graph to session commands once multi-point snapshots are available in command props.
+- Add a RadialProgress intrinsic only if circular progress is needed for a specific card; do not add gauges for one-off ratios.
+- Add render tests for graph geometry if chart components become shared outside the Discord bot.
diff --git a/packages/rendering/src/intrinsics/Graph.ts b/packages/rendering/src/intrinsics/Graph.ts
new file mode 100644
index 000000000..ccdc23d6a
--- /dev/null
+++ b/packages/rendering/src/intrinsics/Graph.ts
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+
+export interface GraphRenderProps {
+  data: number[];
+  min?: number;
+  max?: number;
+  color: JSX.Fill;
+  fillColor?: JSX.Fill;
+  referenceColor?: JSX.Fill;
+  referenceValue?: number;
+  lineWidth: number;
+  pointRadius: number;
+  smooth: boolean;
+  padding: number;
+}
+
+export interface GraphProps extends Partial<Omit<GraphRenderProps, "data">> {
+  data: number[];
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+const resolveNumber = (value = 0) => Number.isFinite(value) ? value : 0;
+
+const resolveFill = (fill: JSX.Fill | undefined, fallback: JSX.Fill) => fill ?? fallback;
+
+export const component: JSX.RawFC<GraphProps, GraphRenderProps, undefined> = ({
+  data,
+  width,
+  height = 100,
+  margin = 4,
+  location = "center",
+  align = "left",
+  min,
+  max,
+  color = "#9ca3af",
+  fillColor,
+  referenceColor = "rgba(255, 255, 255, 0.24)",
+  referenceValue,
+  lineWidth = 2,
+  pointRadius = data.length <= 6 ? 2 : 0,
+  smooth = false,
+  padding = 8,
+}) => ({
+  dimension: {
+    width,
+    height,
+    margin,
+  },
+  style: { location, direction: "row", align },
+  props: {
+    data,
+    min,
+    max,
+    color,
+    fillColor,
+    referenceColor,
+    referenceValue,
+    lineWidth,
+    pointRadius,
+    smooth,
+    padding,
+  },
+  children: undefined,
+});
+
+export const render: JSX.Render<GraphRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  {
+    data,
+    min,
+    max,
+    color,
+    fillColor,
+    referenceColor,
+    referenceValue,
+    lineWidth,
+    pointRadius,
+    smooth,
+    padding,
+  },
+  { x, y, width, height }
+) => {
+  const values = data.map(resolveNumber);
+
+  if (!values.length) return;
+
+  const computedMin = min ?? Math.min(...values);
+  const computedMax = max ?? Math.max(...values);
+  const range = computedMax - computedMin || 1;
+
+  const left = Math.round(x + padding);
+  const top = Math.round(y + padding);
+  const graphWidth = Math.max(1, Math.round(width - padding * 2));
+  const graphHeight = Math.max(1, Math.round(height - padding * 2));
+  const bottom = top + graphHeight;
+
+  const pointFor = (value: number, index: number) => {
+    const progress = values.length === 1 ? 0.5 : index / (values.length - 1);
+
+    return {
+      x: left + graphWidth * progress,
+      y: bottom - ((value - computedMin) / range) * graphHeight,
+    };
+  };
+
+  const points = values.map(pointFor);
+
+  const renderLine = () => {
+    ctx.beginPath();
+
+    for (const [index, point] of points.entries()) {
+      if (index === 0) {
+        ctx.moveTo(point.x, point.y);
+        continue;
+      }
+
+      const previous = points[index - 1];
+
+      if (smooth) {
+        const controlX = (previous.x + point.x) / 2;
+        ctx.bezierCurveTo(controlX, previous.y, controlX, point.y, point.x, point.y);
+      } else {
+        ctx.lineTo(point.x, point.y);
+      }
+    }
+  };
+
+  if (typeof referenceValue === "number") {
+    const referenceY = bottom - ((referenceValue - computedMin) / range) * graphHeight;
+
+    if (referenceY >= top && referenceY <= bottom) {
+      ctx.save();
+      ctx.strokeStyle = resolveFill(referenceColor, "rgba(255, 255, 255, 0.24)");
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath();
+      ctx.moveTo(left, referenceY);
+      ctx.lineTo(left + graphWidth, referenceY);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+
+  if (fillColor) {
+    renderLine();
+    ctx.lineTo(left + graphWidth, bottom);
+    ctx.lineTo(left, bottom);
+    ctx.closePath();
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+  }
+
+  renderLine();
+  ctx.strokeStyle = resolveFill(color, "#9ca3af");
+  ctx.lineWidth = lineWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.stroke();
+
+  if (!pointRadius) return;
+
+  ctx.fillStyle = resolveFill(color, "#9ca3af");
+
+  for (const point of points) {
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
+    ctx.fill();
+  }
+};
diff --git a/packages/rendering/src/intrinsics/index.ts b/packages/rendering/src/intrinsics/index.ts
index 79a4928c0..8539ba225 100644
--- a/packages/rendering/src/intrinsics/index.ts
+++ b/packages/rendering/src/intrinsics/index.ts
@@ -8,5 +8,6 @@
 
 export * as Box from "./Box.js";
 export * as Div from "./Div.js";
+export * as Graph from "./Graph.js";
 export * as Image from "./Image.js";
 export * as Text from "./Text.js";
diff --git a/packages/rendering/src/jsx/instrinsics.ts b/packages/rendering/src/jsx/instrinsics.ts
index 2958ba374..8d127bc8c 100644
--- a/packages/rendering/src/jsx/instrinsics.ts
+++ b/packages/rendering/src/jsx/instrinsics.ts
@@ -6,12 +6,13 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { Box, Div, Image, Text } from "#intrinsics";
+import { Box, Div, Graph, Image, Text } from "#intrinsics";
 import type { PropsWithChildren, RawFC, Render } from "./types.js";
 
 export const intrinsicElements = {
   div: Div.component,
   box: Box.component,
+  graph: Graph.component,
   img: Image.component,
   text: Text.component,
 };
@@ -35,6 +36,7 @@ export type IntrinsicRenders = {
 export const intrinsicRenders: IntrinsicRenders = {
   div: Div.render,
   box: Box.render,
+  graph: Graph.render,
   img: Image.render,
   text: Text.render,
 };

From f40365abd7a16e69fc0e0faba5418546ad5a59d6 Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 06:09:03 -0600
Subject: [PATCH 2/8] =?UTF-8?q?feat(rendering):=20phase=201=20=E2=80=94=20?=
 =?UTF-8?q?cross-cutting=20foundation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GAME_COLORS accent palette map + SEMANTIC_COLORS tokens (components/theme.ts)
- compact/fixedDecimal/ratioFormat number formatters (lib/format-number.ts)
- autoContrast/mcAutoContrast luminance-based text-color helpers (lib/auto-contrast.ts)
- Re-export theme tokens from components/index.ts
---
 apps/discord-bot/src/components/index.ts  |  1 +
 apps/discord-bot/src/components/theme.ts  | 42 +++++++++++++++++++++++
 apps/discord-bot/src/lib/auto-contrast.ts | 25 ++++++++++++++
 apps/discord-bot/src/lib/format-number.ts | 24 +++++++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 apps/discord-bot/src/components/theme.ts
 create mode 100644 apps/discord-bot/src/lib/auto-contrast.ts
 create mode 100644 apps/discord-bot/src/lib/format-number.ts

diff --git a/apps/discord-bot/src/components/index.ts b/apps/discord-bot/src/components/index.ts
index 9bfbda0da..aa80476cf 100644
--- a/apps/discord-bot/src/components/index.ts
+++ b/apps/discord-bot/src/components/index.ts
@@ -23,3 +23,4 @@ export * from "./Skin.js";
 export * from "./StatDelta.js";
 export * from "./Table/index.js";
 export * from "./GameList.js";
+export * from "./theme.js";
diff --git a/apps/discord-bot/src/components/theme.ts b/apps/discord-bot/src/components/theme.ts
new file mode 100644
index 000000000..8f772c2e2
--- /dev/null
+++ b/apps/discord-bot/src/components/theme.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export const SEMANTIC_COLORS = {
+  positive: "#4ade80",
+  negative: "#f87171",
+  neutral: "#9ca3af",
+  warning: "#fbbf24",
+} as const;
+
+export const GAME_COLORS = {
+  arcade: "#fbbf24",
+  arenaBrawl: "#f59e0b",
+  bedwars: "#ef4444",
+  blitzSg: "#22c55e",
+  buildBattle: "#d946ef",
+  copsAndCrims: "#f59e0b",
+  duels: "#6366f1",
+  general: "#64748b",
+  megaWalls: "#6b7280",
+  murderMystery: "#dc2626",
+  paintball: "#38bdf8",
+  pit: "#eab308",
+  quake: "#a855f7",
+  skyWars: "#38bdf8",
+  smashHeroes: "#d946ef",
+  speedUhc: "#f59e0b",
+  tntGames: "#ef4444",
+  turboKartRacers: "#4ade80",
+  uhc: "#f59e0b",
+  vampirez: "#dc2626",
+  walls: "#eab308",
+  warlords: "#ef4444",
+  woolGames: "#3b82f6",
+} as const;
+
+export type GameColorKey = keyof typeof GAME_COLORS;
diff --git a/apps/discord-bot/src/lib/auto-contrast.ts b/apps/discord-bot/src/lib/auto-contrast.ts
new file mode 100644
index 000000000..933bd06e7
--- /dev/null
+++ b/apps/discord-bot/src/lib/auto-contrast.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { hexToRgb } from "@statsify/rendering";
+
+const linearize = (c: number) => {
+  const s = c / 255;
+  return s <= 0.039_28 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+};
+
+const relativeLuminance = (r: number, g: number, b: number) =>
+  0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+
+export const autoContrast = (hex: string): "#000000" | "#ffffff" => {
+  const [r, g, b] = hexToRgb(hex);
+  return relativeLuminance(r, g, b) > 0.179 ? "#000000" : "#ffffff";
+};
+
+export const mcAutoContrast = (hex: string): "§0" | "§f" =>
+  autoContrast(hex) === "#000000" ? "§0" : "§f";
diff --git a/apps/discord-bot/src/lib/format-number.ts b/apps/discord-bot/src/lib/format-number.ts
new file mode 100644
index 000000000..167159db9
--- /dev/null
+++ b/apps/discord-bot/src/lib/format-number.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export const compact = (n: number): string => {
+  if (!Number.isFinite(n)) return "0";
+  const abs = Math.abs(n);
+  const sign = n < 0 ? "-" : "";
+  if (abs >= 1_000_000_000) return `${sign}${(abs / 1_000_000_000).toFixed(2).replace(/\.?0+$/, "")}B`;
+  if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(2).replace(/\.?0+$/, "")}M`;
+  if (abs >= 1000) return `${sign}${(abs / 1000).toFixed(1).replace(/\.0$/, "")}k`;
+  return `${sign}${abs}`;
+};
+
+export const fixedDecimal = (n: number, digits = 2): string => {
+  if (!Number.isFinite(n)) return "0";
+  return n.toFixed(digits);
+};
+
+export const ratioFormat = (n: number, digits = 2): string => fixedDecimal(n, digits);

From 455838ce80fb8a456c4a1f16b4c316c2c75cf1b3 Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 06:13:03 -0600
Subject: [PATCH 3/8] =?UTF-8?q?feat(rendering):=20phase=202=20=E2=80=94=20?=
 =?UTF-8?q?seven=20new=20canvas=20intrinsics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

arc, radar, donut (innerRadius:0 = pie), heatmap, gradient (linear-h/v + radial), path (arbitrary draw callback), sparkbar — each registered in intrinsicElements and intrinsicRenders following the Graph pattern.
---
 packages/rendering/src/intrinsics/Arc.ts      | 131 ++++++++++++++++
 packages/rendering/src/intrinsics/Donut.ts    | 101 +++++++++++++
 packages/rendering/src/intrinsics/Gradient.ts |  73 +++++++++
 .../src/intrinsics/HeatmapIntrinsic.ts        | 112 ++++++++++++++
 packages/rendering/src/intrinsics/Path.ts     |  49 ++++++
 packages/rendering/src/intrinsics/Radar.ts    | 140 ++++++++++++++++++
 packages/rendering/src/intrinsics/SparkBar.ts |  99 +++++++++++++
 packages/rendering/src/intrinsics/index.ts    |   7 +
 packages/rendering/src/jsx/instrinsics.ts     |  20 ++-
 9 files changed, 729 insertions(+), 3 deletions(-)
 create mode 100644 packages/rendering/src/intrinsics/Arc.ts
 create mode 100644 packages/rendering/src/intrinsics/Donut.ts
 create mode 100644 packages/rendering/src/intrinsics/Gradient.ts
 create mode 100644 packages/rendering/src/intrinsics/HeatmapIntrinsic.ts
 create mode 100644 packages/rendering/src/intrinsics/Path.ts
 create mode 100644 packages/rendering/src/intrinsics/Radar.ts
 create mode 100644 packages/rendering/src/intrinsics/SparkBar.ts

diff --git a/packages/rendering/src/intrinsics/Arc.ts b/packages/rendering/src/intrinsics/Arc.ts
new file mode 100644
index 000000000..263fe72ef
--- /dev/null
+++ b/packages/rendering/src/intrinsics/Arc.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+
+export interface ArcRenderProps {
+  value: number;
+  min: number;
+  max: number;
+  startAngle: number;
+  endAngle: number;
+  trackColor: JSX.Fill;
+  fillColor: JSX.Fill;
+  trackWidth: number;
+  fillWidth: number;
+  lineCap: CanvasLineCap;
+  centerLabel?: string;
+  centerLabelColor: JSX.Fill;
+  centerLabelSize: number;
+}
+
+export interface ArcProps extends Partial<Omit<ArcRenderProps, "value" | "min" | "max">> {
+  value: number;
+  min?: number;
+  max?: number;
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+export const component: JSX.RawFC<ArcProps, ArcRenderProps, undefined> = ({
+  value,
+  min = 0,
+  max = 100,
+  startAngle = -Math.PI * 0.75,
+  endAngle = Math.PI * 0.75,
+  trackColor = "rgba(255, 255, 255, 0.12)",
+  fillColor = "#9ca3af",
+  trackWidth = 8,
+  fillWidth = 8,
+  lineCap = "round",
+  centerLabel,
+  centerLabelColor = "#ffffff",
+  centerLabelSize = 14,
+  width = 80,
+  height = 80,
+  margin = 4,
+  location = "center",
+  align = "center",
+}) => ({
+  dimension: { width, height, margin },
+  style: { location, direction: "row", align },
+  props: {
+    value,
+    min,
+    max,
+    startAngle,
+    endAngle,
+    trackColor,
+    fillColor,
+    trackWidth,
+    fillWidth,
+    lineCap,
+    centerLabel,
+    centerLabelColor,
+    centerLabelSize,
+  },
+  children: undefined,
+});
+
+export const render: JSX.Render<ArcRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  {
+    value,
+    min,
+    max,
+    startAngle,
+    endAngle,
+    trackColor,
+    fillColor,
+    trackWidth,
+    fillWidth,
+    lineCap,
+    centerLabel,
+    centerLabelColor,
+    centerLabelSize,
+  },
+  { x, y, width, height }
+) => {
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const radius = Math.max(1, Math.min(width, height) / 2 - Math.max(trackWidth, fillWidth) / 2 - 2);
+
+  const sweep = endAngle - startAngle;
+  const clamped = Math.max(0, Math.min(1, (value - min) / (max - min || 1)));
+
+  ctx.save();
+  ctx.lineCap = lineCap;
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, startAngle, endAngle);
+  ctx.strokeStyle = trackColor;
+  ctx.lineWidth = trackWidth;
+  ctx.stroke();
+
+  if (clamped > 0) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, radius, startAngle, startAngle + sweep * clamped);
+    ctx.strokeStyle = fillColor;
+    ctx.lineWidth = fillWidth;
+    ctx.stroke();
+  }
+
+  if (centerLabel) {
+    ctx.fillStyle = centerLabelColor;
+    ctx.font = `bold ${centerLabelSize}px sans-serif`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(centerLabel, cx, cy);
+  }
+
+  ctx.restore();
+};
diff --git a/packages/rendering/src/intrinsics/Donut.ts b/packages/rendering/src/intrinsics/Donut.ts
new file mode 100644
index 000000000..5165b6e72
--- /dev/null
+++ b/packages/rendering/src/intrinsics/Donut.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+
+export interface DonutSegment {
+  value: number;
+  color: JSX.Fill;
+  label?: string;
+}
+
+export interface DonutRenderProps {
+  segments: DonutSegment[];
+  innerRadius: number;
+  gap: number;
+  startAngle: number;
+  labelColor: JSX.Fill;
+  labelSize: number;
+}
+
+export interface DonutProps extends Partial<Omit<DonutRenderProps, "segments">> {
+  segments: DonutSegment[];
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+export const component: JSX.RawFC<DonutProps, DonutRenderProps, undefined> = ({
+  segments,
+  innerRadius = 0.6,
+  gap = 0.02,
+  startAngle = -Math.PI / 2,
+  labelColor = "#ffffff",
+  labelSize = 11,
+  width = 120,
+  height = 120,
+  margin = 4,
+  location = "center",
+  align = "center",
+}) => ({
+  dimension: { width, height, margin },
+  style: { location, direction: "row", align },
+  props: { segments, innerRadius, gap, startAngle, labelColor, labelSize },
+  children: undefined,
+});
+
+export const render: JSX.Render<DonutRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  { segments, innerRadius, gap, startAngle, labelColor, labelSize },
+  { x, y, width, height }
+) => {
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const outerR = Math.max(1, Math.min(width, height) / 2 - 2);
+  const innerR = outerR * Math.max(0, Math.min(0.99, innerRadius));
+
+  const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+  if (total === 0) return;
+
+  ctx.save();
+
+  let angle = startAngle;
+
+  for (const seg of segments) {
+    const fraction = Math.max(0, seg.value) / total;
+    const sweep = Math.max(0, Math.PI * 2 * fraction - gap);
+
+    ctx.beginPath();
+    ctx.arc(cx, cy, outerR, angle + gap / 2, angle + gap / 2 + sweep);
+    if (innerR > 0) {
+      ctx.arc(cx, cy, innerR, angle + gap / 2 + sweep, angle + gap / 2, true);
+    } else {
+      ctx.lineTo(cx, cy);
+    }
+    ctx.closePath();
+    ctx.fillStyle = seg.color;
+    ctx.fill();
+
+    if (seg.label && fraction > 0.06) {
+      const midAngle = angle + gap / 2 + sweep / 2;
+      const labelR = innerR + (outerR - innerR) * 0.5;
+      ctx.fillStyle = labelColor;
+      ctx.font = `bold ${labelSize}px sans-serif`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(seg.label, cx + labelR * Math.cos(midAngle), cy + labelR * Math.sin(midAngle));
+    }
+
+    angle += Math.PI * 2 * fraction;
+  }
+
+  ctx.restore();
+};
diff --git a/packages/rendering/src/intrinsics/Gradient.ts b/packages/rendering/src/intrinsics/Gradient.ts
new file mode 100644
index 000000000..f86bd79f6
--- /dev/null
+++ b/packages/rendering/src/intrinsics/Gradient.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+import type { GradientColor } from "#hooks";
+
+export type GradientType = "linear-h" | "linear-v" | "radial";
+
+export interface GradientRenderProps {
+  type: GradientType;
+  colors: GradientColor[];
+  opacity: number;
+}
+
+export interface GradientProps extends Partial<GradientRenderProps> {
+  colors: GradientColor[];
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+export const component: JSX.RawFC<GradientProps, GradientRenderProps, undefined> = ({
+  colors,
+  type = "linear-v",
+  opacity = 1,
+  width = "100%",
+  height = "100%",
+  margin = 0,
+  location = "left",
+  align = "left",
+}) => ({
+  dimension: { width, height, margin },
+  style: { location, direction: "row", align },
+  props: { type, colors, opacity },
+  children: undefined,
+});
+
+export const render: JSX.Render<GradientRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  { type, colors, opacity },
+  { x, y, width, height }
+) => {
+  if (!colors.length) return;
+
+  ctx.save();
+  ctx.globalAlpha = opacity;
+
+  let gradient;
+  if (type === "radial") {
+    const cx = x + width / 2;
+    const cy = y + height / 2;
+    const r = Math.min(width, height) / 2;
+    gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+  } else if (type === "linear-h") {
+    gradient = ctx.createLinearGradient(x, y, x + width, y);
+  } else {
+    gradient = ctx.createLinearGradient(x, y, x, y + height);
+  }
+
+  for (const [offset, color] of colors) gradient.addColorStop(offset, color);
+
+  ctx.fillStyle = gradient;
+  ctx.fillRect(x, y, width, height);
+  ctx.restore();
+};
diff --git a/packages/rendering/src/intrinsics/HeatmapIntrinsic.ts b/packages/rendering/src/intrinsics/HeatmapIntrinsic.ts
new file mode 100644
index 000000000..cb8060b56
--- /dev/null
+++ b/packages/rendering/src/intrinsics/HeatmapIntrinsic.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+
+export interface HeatmapIntrinsicRenderProps {
+  cells: number[];
+  cols: number;
+  cellSize: number;
+  cellGap: number;
+  cellRadius: number;
+  lowColor: JSX.Fill;
+  highColor: JSX.Fill;
+  emptyColor: JSX.Fill;
+}
+
+export interface HeatmapIntrinsicProps extends Partial<Omit<HeatmapIntrinsicRenderProps, "cells" | "cols">> {
+  cells: number[];
+  cols: number;
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+export const component: JSX.RawFC<HeatmapIntrinsicProps, HeatmapIntrinsicRenderProps, undefined> = ({
+  cells,
+  cols,
+  cellSize = 12,
+  cellGap = 2,
+  cellRadius = 2,
+  lowColor = "rgba(255,255,255,0.08)",
+  highColor = "#4ade80",
+  emptyColor = "rgba(255,255,255,0.04)",
+  width,
+  height,
+  margin = 4,
+  location = "left",
+  align = "left",
+}) => {
+  const rows = Math.ceil(cells.length / cols);
+  const computedWidth = width ?? cols * (cellSize + cellGap) - cellGap;
+  const computedHeight = height ?? rows * (cellSize + cellGap) - cellGap;
+  return {
+    dimension: { width: computedWidth, height: computedHeight, margin },
+    style: { location, direction: "row", align },
+    props: { cells, cols, cellSize, cellGap, cellRadius, lowColor, highColor, emptyColor },
+    children: undefined,
+  };
+};
+
+const parseHexChannels = (s: string) => {
+  const m = s.match(/[\da-f]{2}/gi);
+  if (!m) return [0, 0, 0];
+  return m.slice(0, 3).map((x) => Number.parseInt(x, 16));
+};
+
+const lerpColor = (a: string, b: string, t: number): string => {
+  const [ar, ag, ab] = parseHexChannels(a);
+  const [br, bg, bb] = parseHexChannels(b);
+  const r = Math.round(ar + (br - ar) * t);
+  const g = Math.round(ag + (bg - ag) * t);
+  const bl = Math.round(ab + (bb - ab) * t);
+  return `#${[r, g, bl].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+};
+
+export const render: JSX.Render<HeatmapIntrinsicRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  { cells, cols, cellSize, cellGap, cellRadius, lowColor, highColor, emptyColor },
+  { x, y }
+) => {
+  const max = Math.max(1, ...cells);
+  ctx.save();
+
+  cells.forEach((value, index) => {
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+    const cx = x + col * (cellSize + cellGap);
+    const cy = y + row * (cellSize + cellGap);
+
+    if (value === 0) {
+      ctx.fillStyle = emptyColor;
+    } else if (typeof lowColor === "string" && typeof highColor === "string") {
+      ctx.fillStyle = lerpColor(lowColor, highColor, value / max);
+    } else {
+      ctx.fillStyle = highColor;
+    }
+
+    const r = cellRadius;
+    ctx.beginPath();
+    ctx.moveTo(cx + r, cy);
+    ctx.lineTo(cx + cellSize - r, cy);
+    ctx.arcTo(cx + cellSize, cy, cx + cellSize, cy + r, r);
+    ctx.lineTo(cx + cellSize, cy + cellSize - r);
+    ctx.arcTo(cx + cellSize, cy + cellSize, cx + cellSize - r, cy + cellSize, r);
+    ctx.lineTo(cx + r, cy + cellSize);
+    ctx.arcTo(cx, cy + cellSize, cx, cy + cellSize - r, r);
+    ctx.lineTo(cx, cy + r);
+    ctx.arcTo(cx, cy, cx + r, cy, r);
+    ctx.closePath();
+    ctx.fill();
+  });
+
+  ctx.restore();
+};
diff --git a/packages/rendering/src/intrinsics/Path.ts b/packages/rendering/src/intrinsics/Path.ts
new file mode 100644
index 000000000..e2da9e46c
--- /dev/null
+++ b/packages/rendering/src/intrinsics/Path.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+
+export type PathDrawFn = (ctx: CanvasRenderingContext2D, location: JSX.Location) => void;
+
+export interface PathRenderProps {
+  draw: PathDrawFn;
+}
+
+export interface PathProps {
+  draw: PathDrawFn;
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+export const component: JSX.RawFC<PathProps, PathRenderProps, undefined> = ({
+  draw,
+  width = "100%",
+  height = "100%",
+  margin = 0,
+  location = "left",
+  align = "left",
+}) => ({
+  dimension: { width, height, margin },
+  style: { location, direction: "row", align },
+  props: { draw },
+  children: undefined,
+});
+
+export const render: JSX.Render<PathRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  { draw },
+  location
+) => {
+  ctx.save();
+  draw(ctx, location);
+  ctx.restore();
+};
diff --git a/packages/rendering/src/intrinsics/Radar.ts b/packages/rendering/src/intrinsics/Radar.ts
new file mode 100644
index 000000000..eea9ab5b4
--- /dev/null
+++ b/packages/rendering/src/intrinsics/Radar.ts
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+
+export interface RadarSeries {
+  values: number[];
+  color: JSX.Fill;
+  fillColor?: JSX.Fill;
+}
+
+export interface RadarRenderProps {
+  labels: string[];
+  series: [RadarSeries] | [RadarSeries, RadarSeries];
+  gridColor: JSX.Fill;
+  gridLevels: number;
+  lineWidth: number;
+  labelColor: JSX.Fill;
+  labelSize: number;
+  padding: number;
+}
+
+export interface RadarProps extends Partial<Omit<RadarRenderProps, "labels" | "series">> {
+  labels: string[];
+  series: [RadarSeries] | [RadarSeries, RadarSeries];
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+export const component: JSX.RawFC<RadarProps, RadarRenderProps, undefined> = ({
+  labels,
+  series,
+  gridColor = "rgba(255, 255, 255, 0.15)",
+  gridLevels = 4,
+  lineWidth = 1.5,
+  labelColor = "rgba(255, 255, 255, 0.7)",
+  labelSize = 11,
+  padding = 24,
+  width = 160,
+  height = 160,
+  margin = 4,
+  location = "center",
+  align = "center",
+}) => ({
+  dimension: { width, height, margin },
+  style: { location, direction: "row", align },
+  props: { labels, series, gridColor, gridLevels, lineWidth, labelColor, labelSize, padding },
+  children: undefined,
+});
+
+const angleFor = (i: number, n: number) => (Math.PI * 2 * i) / n - Math.PI / 2;
+
+export const render: JSX.Render<RadarRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  { labels, series, gridColor, gridLevels, lineWidth, labelColor, labelSize, padding },
+  { x, y, width, height }
+) => {
+  const n = labels.length;
+  if (n < 3) return;
+
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const radius = Math.max(1, Math.min(width, height) / 2 - padding);
+
+  ctx.save();
+  ctx.lineWidth = lineWidth;
+
+  for (let level = 1; level <= gridLevels; level++) {
+    const r = (radius * level) / gridLevels;
+    ctx.beginPath();
+    for (let i = 0; i < n; i++) {
+      const a = angleFor(i, n);
+      const px = cx + r * Math.cos(a);
+      const py = cy + r * Math.sin(a);
+      if (i === 0) {
+        ctx.moveTo(px, py);
+      } else {
+        ctx.lineTo(px, py);
+      }
+    }
+    ctx.closePath();
+    ctx.strokeStyle = gridColor;
+    ctx.stroke();
+  }
+
+  for (let i = 0; i < n; i++) {
+    const a = angleFor(i, n);
+    ctx.beginPath();
+    ctx.moveTo(cx, cy);
+    ctx.lineTo(cx + radius * Math.cos(a), cy + radius * Math.sin(a));
+    ctx.strokeStyle = gridColor;
+    ctx.stroke();
+  }
+
+  for (const s of series) {
+    const pts = s.values.map((v, i) => {
+      const a = angleFor(i, n);
+      const r = radius * Math.max(0, Math.min(1, v));
+      return { px: cx + r * Math.cos(a), py: cy + r * Math.sin(a) };
+    });
+
+    if (s.fillColor) {
+      ctx.beginPath();
+      pts.forEach(({ px, py }, i) => (i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py)));
+      ctx.closePath();
+      ctx.fillStyle = s.fillColor;
+      ctx.fill();
+    }
+
+    ctx.beginPath();
+    pts.forEach(({ px, py }, i) => (i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py)));
+    ctx.closePath();
+    ctx.strokeStyle = s.color;
+    ctx.lineWidth = lineWidth;
+    ctx.stroke();
+  }
+
+  ctx.fillStyle = labelColor;
+  ctx.font = `${labelSize}px sans-serif`;
+  ctx.textBaseline = "middle";
+
+  for (let i = 0; i < n; i++) {
+    const a = angleFor(i, n);
+    const lx = cx + (radius + labelSize) * Math.cos(a);
+    const ly = cy + (radius + labelSize) * Math.sin(a);
+    ctx.textAlign = Math.cos(a) > 0.1 ? "left" : (Math.cos(a) < -0.1 ? "right" : "center");
+    ctx.fillText(labels[i], lx, ly);
+  }
+
+  ctx.restore();
+};
diff --git a/packages/rendering/src/intrinsics/SparkBar.ts b/packages/rendering/src/intrinsics/SparkBar.ts
new file mode 100644
index 000000000..49522b16b
--- /dev/null
+++ b/packages/rendering/src/intrinsics/SparkBar.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { type CanvasRenderingContext2D } from "skia-canvas";
+import type * as JSX from "#jsx";
+
+export interface SparkBarRenderProps {
+  data: number[];
+  min?: number;
+  max?: number;
+  color: JSX.Fill;
+  highlightColor: JSX.Fill;
+  gap: number;
+  radius: number;
+  highlightLast: boolean;
+  padding: number;
+}
+
+export interface SparkBarProps extends Partial<Omit<SparkBarRenderProps, "data">> {
+  data: number[];
+  width?: JSX.Measurement;
+  height?: JSX.Measurement;
+  margin?: JSX.Spacing;
+  location?: JSX.StyleLocation;
+  align?: JSX.StyleLocation;
+}
+
+export const component: JSX.RawFC<SparkBarProps, SparkBarRenderProps, undefined> = ({
+  data,
+  min,
+  max,
+  color = "#9ca3af",
+  highlightColor = "#4ade80",
+  gap = 2,
+  radius = 2,
+  highlightLast = false,
+  padding = 4,
+  width,
+  height = 40,
+  margin = 4,
+  location = "center",
+  align = "left",
+}) => ({
+  dimension: { width: width ?? data.length * 8 + (data.length - 1) * gap, height, margin },
+  style: { location, direction: "row", align },
+  props: { data, min, max, color, highlightColor, gap, radius, highlightLast, padding },
+  children: undefined,
+});
+
+const resolveNumber = (v = 0) => (Number.isFinite(v) ? v : 0);
+
+export const render: JSX.Render<SparkBarRenderProps> = (
+  ctx: CanvasRenderingContext2D,
+  { data, min, max, color, highlightColor, gap, radius, highlightLast, padding },
+  { x, y, width, height }
+) => {
+  const values = data.map(resolveNumber);
+  if (!values.length) return;
+
+  const computedMin = min ?? 0;
+  const computedMax = max ?? Math.max(1, ...values);
+  const range = computedMax - computedMin || 1;
+
+  const innerH = Math.max(1, height - padding * 2);
+  const barW = Math.max(1, (width - (values.length - 1) * gap) / values.length);
+  const lastIndex = values.length - 1;
+
+  ctx.save();
+
+  values.forEach((value, index) => {
+    const fraction = Math.max(0, Math.min(1, (value - computedMin) / range));
+    const barH = Math.max(radius * 2, innerH * fraction);
+    const bx = x + index * (barW + gap);
+    const by = y + padding + innerH - barH;
+
+    ctx.fillStyle = highlightLast && index === lastIndex ? highlightColor : color;
+
+    const r = Math.min(radius, barW / 2, barH / 2);
+    ctx.beginPath();
+    ctx.moveTo(bx + r, by);
+    ctx.lineTo(bx + barW - r, by);
+    ctx.arcTo(bx + barW, by, bx + barW, by + r, r);
+    ctx.lineTo(bx + barW, by + barH - r);
+    ctx.arcTo(bx + barW, by + barH, bx + barW - r, by + barH, r);
+    ctx.lineTo(bx + r, by + barH);
+    ctx.arcTo(bx, by + barH, bx, by + barH - r, r);
+    ctx.lineTo(bx, by + r);
+    ctx.arcTo(bx, by, bx + r, by, r);
+    ctx.closePath();
+    ctx.fill();
+  });
+
+  ctx.restore();
+};
diff --git a/packages/rendering/src/intrinsics/index.ts b/packages/rendering/src/intrinsics/index.ts
index 8539ba225..7d05505de 100644
--- a/packages/rendering/src/intrinsics/index.ts
+++ b/packages/rendering/src/intrinsics/index.ts
@@ -6,8 +6,15 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
+export * as Arc from "./Arc.js";
 export * as Box from "./Box.js";
 export * as Div from "./Div.js";
+export * as Donut from "./Donut.js";
+export * as Gradient from "./Gradient.js";
 export * as Graph from "./Graph.js";
+export * as Heatmap from "./HeatmapIntrinsic.js";
 export * as Image from "./Image.js";
+export * as Path from "./Path.js";
+export * as Radar from "./Radar.js";
+export * as SparkBar from "./SparkBar.js";
 export * as Text from "./Text.js";
diff --git a/packages/rendering/src/jsx/instrinsics.ts b/packages/rendering/src/jsx/instrinsics.ts
index 8d127bc8c..a49bf45cd 100644
--- a/packages/rendering/src/jsx/instrinsics.ts
+++ b/packages/rendering/src/jsx/instrinsics.ts
@@ -6,14 +6,21 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { Box, Div, Graph, Image, Text } from "#intrinsics";
+import { Arc, Box, Div, Donut, Gradient, Graph, Heatmap, Image, Path, Radar, SparkBar, Text } from "#intrinsics";
 import type { PropsWithChildren, RawFC, Render } from "./types.js";
 
 export const intrinsicElements = {
-  div: Div.component,
+  arc: Arc.component,
   box: Box.component,
+  div: Div.component,
+  donut: Donut.component,
+  gradient: Gradient.component,
   graph: Graph.component,
+  heatmap: Heatmap.component,
   img: Image.component,
+  path: Path.component,
+  radar: Radar.component,
+  sparkbar: SparkBar.component,
   text: Text.component,
 };
 
@@ -34,9 +41,16 @@ export type IntrinsicRenders = {
 };
 
 export const intrinsicRenders: IntrinsicRenders = {
-  div: Div.render,
+  arc: Arc.render,
   box: Box.render,
+  div: Div.render,
+  donut: Donut.render,
+  gradient: Gradient.render,
   graph: Graph.render,
+  heatmap: Heatmap.render,
   img: Image.render,
+  path: Path.render,
+  radar: Radar.render,
+  sparkbar: SparkBar.render,
   text: Text.render,
 };

From ab93766a73faeb902e386c1bd15bf2deb9eca94a Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 06:18:25 -0600
Subject: [PATCH 4/8] =?UTF-8?q?feat(rendering):=20phase=203=20=E2=80=94=20?=
 =?UTF-8?q?upgrade=20four=20shipped=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Graph: multi-series overlay, threshold bands, per-marker annotation, last-point callout, baselineZero, optional extra series (intrinsic also upgraded)
BarChart: horizontal orientation, gradient fill, threshold-color per bar, goal-line indicator
StatDelta: inverseGood (renamed from invertColor, backward-compat alias kept), neutralZone, mini-sparkline via <sparkbar>
Badge: solid/outline/soft variants, icon slot, sm/md/lg size scale, semantic status colors, pill/tag shape
---
 apps/discord-bot/src/components/Badge.tsx     | 107 +++++++--
 apps/discord-bot/src/components/BarChart.tsx  | 108 ++++++++-
 apps/discord-bot/src/components/Graph.tsx     |  61 ++++-
 apps/discord-bot/src/components/StatDelta.tsx |  38 ++-
 packages/rendering/src/intrinsics/Graph.ts    | 223 ++++++++++++++----
 5 files changed, 457 insertions(+), 80 deletions(-)

diff --git a/apps/discord-bot/src/components/Badge.tsx b/apps/discord-bot/src/components/Badge.tsx
index 541fe4382..bc5eed72a 100644
--- a/apps/discord-bot/src/components/Badge.tsx
+++ b/apps/discord-bot/src/components/Badge.tsx
@@ -6,27 +6,104 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
+import { SEMANTIC_COLORS } from "./theme.js";
+import type { Spacing } from "@statsify/rendering";
+
+export type BadgeVariant = "solid" | "outline" | "soft";
+export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeStatus = "positive" | "negative" | "neutral" | "warning";
+export type BadgeShape = "pill" | "tag";
+
 export interface BadgeProps {
   children: string;
   color?: JSX.IntrinsicElements["box"]["color"];
   outline?: JSX.IntrinsicElements["box"]["outline"];
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  status?: BadgeStatus;
+  shape?: BadgeShape;
+  icon?: string;
 }
 
+const STATUS_HEX: Record<BadgeStatus, string> = {
+  positive: SEMANTIC_COLORS.positive,
+  negative: SEMANTIC_COLORS.negative,
+  neutral: SEMANTIC_COLORS.neutral,
+  warning: SEMANTIC_COLORS.warning,
+};
+
+const PADDING: Record<BadgeSize, Spacing> = {
+  sm: { top: 2, bottom: 2, left: 5, right: 5 },
+  md: { top: 3, bottom: 3, left: 8, right: 8 },
+  lg: { top: 4, bottom: 4, left: 12, right: 12 },
+};
+
+const TEXT_SIZE: Record<BadgeSize, number> = {
+  sm: 1.25,
+  md: 1.5,
+  lg: 1.75,
+};
+
+const RADIUS: Record<BadgeShape, number> = {
+  pill: 8,
+  tag: 3,
+};
+
 export const Badge = ({
   children,
-  color = "rgba(255, 255, 255, 0.14)",
+  color,
   outline,
-}: BadgeProps) => (
-  <box
-    padding={{ top: 3, bottom: 3, left: 8, right: 8 }}
-    margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
-    border={{ topLeft: 3, topRight: 3, bottomLeft: 3, bottomRight: 3 }}
-    color={color}
-    outline={outline}
-    outlineSize={2}
-    shadowDistance={2}
-    shadowOpacity={0.45}
-  >
-    <text margin={0} size={1.5}>{children}</text>
-  </box>
-);
+  variant = "solid",
+  size = "md",
+  status,
+  shape = "tag",
+  icon,
+}: BadgeProps) => {
+  const statusHex = status ? STATUS_HEX[status] : undefined;
+  const radius = RADIUS[shape];
+
+  let resolvedColor = color;
+  let resolvedOutline = outline;
+
+  if (statusHex) {
+    if (variant === "solid") {
+      resolvedColor = resolvedColor ?? `${statusHex}cc`;
+    } else if (variant === "soft") {
+      resolvedColor = resolvedColor ?? `${statusHex}33`;
+    } else {
+      resolvedColor = resolvedColor ?? "rgba(255,255,255,0.06)";
+      resolvedOutline = resolvedOutline ?? (statusHex as JSX.IntrinsicElements["box"]["outline"]);
+    }
+  } else if (variant === "outline") {
+    resolvedColor = resolvedColor ?? "rgba(255, 255, 255, 0.06)";
+    resolvedOutline = resolvedOutline ?? ("rgba(255,255,255,0.35)" as JSX.IntrinsicElements["box"]["outline"]);
+  } else if (variant === "soft") {
+    resolvedColor = resolvedColor ?? "rgba(255, 255, 255, 0.08)";
+  } else {
+    resolvedColor = resolvedColor ?? "rgba(255, 255, 255, 0.14)";
+  }
+
+  return (
+    <box
+      padding={PADDING[size]}
+      margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+      border={{ topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius }}
+      color={resolvedColor}
+      outline={resolvedOutline}
+      outlineSize={2}
+      shadowDistance={2}
+      shadowOpacity={0.45}
+    >
+      <div direction="row">
+        {icon ?
+          (
+            <text margin={{ top: 0, bottom: 0, left: 0, right: 4 }} size={TEXT_SIZE[size]}>
+              {icon}
+            </text>
+          ) :
+          <></>}
+        <text margin={0} size={TEXT_SIZE[size]}>{children}</text>
+      </div>
+    </box>
+  );
+};
diff --git a/apps/discord-bot/src/components/BarChart.tsx b/apps/discord-bot/src/components/BarChart.tsx
index fc884ca8c..ac8c554a8 100644
--- a/apps/discord-bot/src/components/BarChart.tsx
+++ b/apps/discord-bot/src/components/BarChart.tsx
@@ -6,37 +6,130 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
+import { DeferredGradient, useGradient } from "@statsify/rendering";
+
 export interface BarChartItem {
   label: string;
   value: number;
   color?: JSX.IntrinsicElements["box"]["color"];
   formattedValue?: string;
+  threshold?: number;
+  thresholdColor?: JSX.IntrinsicElements["box"]["color"];
 }
 
+export type BarChartOrientation = "vertical" | "horizontal";
+
 export interface BarChartProps {
   items: BarChartItem[];
   width?: JSX.Measurement;
   max?: number;
   sort?: boolean;
   showValues?: boolean;
+  orientation?: BarChartOrientation;
+  goal?: number;
+  gradientFill?: boolean;
 }
 
+const resolveBarColor = (
+  item: BarChartItem,
+  gradientFill: boolean
+): JSX.IntrinsicElements["box"]["color"] | DeferredGradient => {
+  const base = item.threshold !== undefined && item.value >= item.threshold ?
+    (item.thresholdColor ?? "#4ade80") :
+    (item.color ?? "#9ca3af");
+
+  if (!gradientFill || typeof base !== "string") return base;
+
+  return useGradient("horizontal", [0, base], [1, `${base}88`]);
+};
+
 export const BarChart = ({
   items,
   width = "100%",
   max,
   sort = true,
   showValues = true,
+  orientation = "vertical",
+  goal,
+  gradientFill = false,
 }: BarChartProps) => {
   const sortedItems = sort ? [...items].sort((a, b) => b.value - a.value) : items;
   const maximum = max ?? Math.max(1, ...sortedItems.map((item) => item.value));
 
+  if (orientation === "horizontal") {
+    return (
+      <div width={width} direction="column">
+        {sortedItems.map((item) => {
+          const percentage = item.value > 0 ?
+            Math.max(2, Math.min(100, Math.round((item.value / maximum) * 100))) :
+            0;
+          const barColor = resolveBarColor(item, gradientFill);
+
+          return (
+            <div
+              width="100%"
+              padding={{ top: 4, bottom: 4, left: 8, right: 8 }}
+              margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+            >
+              <box
+                width={64}
+                direction="row"
+                padding={0}
+                shadowDistance={0}
+                color="rgba(0,0,0,0)"
+              >
+                <text margin={0} size={1.75}>{`§7${item.label}`}</text>
+              </box>
+              <box
+                width="remaining"
+                height={12}
+                margin={{ top: 0, bottom: 0, left: 4, right: 0 }}
+                padding={0}
+                color="rgba(255, 255, 255, 0.12)"
+                shadowDistance={0}
+              >
+                <box
+                  width={`${percentage}%`}
+                  height="100%"
+                  margin={0}
+                  padding={0}
+                  color={barColor as JSX.IntrinsicElements["box"]["color"]}
+                  shadowDistance={0}
+                />
+                {goal === undefined ?
+                  <></> :
+                  (
+                    <box
+                      width={2}
+                      height="100%"
+                      margin={0}
+                      padding={0}
+                      color="rgba(255,255,255,0.6)"
+                      shadowDistance={0}
+                    />
+                  )}
+              </box>
+              {showValues ?
+                (
+                  <text margin={{ top: 0, bottom: 0, left: 6, right: 0 }} size={1.75}>
+                    {item.formattedValue ?? item.value.toLocaleString()}
+                  </text>
+                ) :
+                <></>}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
   return (
     <div width={width} direction="column">
       {sortedItems.map((item) => {
         const percentage = item.value > 0 ?
           Math.max(2, Math.min(100, Math.round((item.value / maximum) * 100))) :
           0;
+        const barColor = resolveBarColor(item, gradientFill);
 
         return (
           <box
@@ -71,9 +164,22 @@ export const BarChart = ({
                 height="100%"
                 margin={0}
                 padding={0}
-                color={item.color ?? "#9ca3af"}
+                color={barColor as JSX.IntrinsicElements["box"]["color"]}
                 shadowDistance={0}
+                border={{ topLeft: 0, topRight: 3, bottomLeft: 0, bottomRight: 3 }}
               />
+              {goal === undefined ?
+                <></> :
+                (
+                  <box
+                    width={2}
+                    height="100%"
+                    margin={0}
+                    padding={0}
+                    color="rgba(255,255,255,0.6)"
+                    shadowDistance={0}
+                  />
+                )}
             </box>
           </box>
         );
diff --git a/apps/discord-bot/src/components/Graph.tsx b/apps/discord-bot/src/components/Graph.tsx
index 6a96ce8b7..c3857fbe5 100644
--- a/apps/discord-bot/src/components/Graph.tsx
+++ b/apps/discord-bot/src/components/Graph.tsx
@@ -11,8 +11,29 @@ export interface GraphPoint {
   value: number;
 }
 
-export interface GraphProps {
+export interface GraphSeries {
   points: GraphPoint[];
+  color?: JSX.IntrinsicElements["graph"]["color"];
+  fillColor?: JSX.IntrinsicElements["graph"]["fillColor"];
+  lineWidth?: number;
+}
+
+export interface GraphBand {
+  min: number;
+  max: number;
+  color: string;
+}
+
+export interface GraphMarker {
+  index: number;
+  label?: string;
+  color?: JSX.IntrinsicElements["graph"]["color"];
+  radius?: number;
+}
+
+export interface GraphProps {
+  points?: GraphPoint[];
+  series?: GraphSeries[];
   width?: JSX.Measurement;
   height?: JSX.Measurement;
   color?: JSX.IntrinsicElements["graph"]["color"];
@@ -20,12 +41,18 @@ export interface GraphProps {
   referenceValue?: number;
   min?: number;
   max?: number;
+  baselineZero?: boolean;
   smooth?: boolean;
   showLabels?: boolean;
+  bands?: GraphBand[];
+  markers?: GraphMarker[];
+  showLastValue?: boolean;
+  lastPointColor?: JSX.IntrinsicElements["graph"]["color"];
 }
 
 export const Graph = ({
-  points,
+  points = [],
+  series,
   width = "100%",
   height = 96,
   color = "#9ca3af",
@@ -33,28 +60,50 @@ export const Graph = ({
   referenceValue,
   min,
   max,
+  baselineZero,
   smooth = true,
   showLabels = true,
+  bands,
+  markers,
+  showLastValue,
+  lastPointColor,
 }: GraphProps) => {
-  const labels = points.length <= 5 ? points : [points[0], points.at(-1)!];
+  const allPoints = [
+    ...points,
+    ...(series ?? []).flatMap((s) => s.points),
+  ];
+  const labelPoints = allPoints.length <= 5 ? points : [points[0], points.at(-1)].filter(Boolean) as GraphPoint[];
+
+  const extraSeries = series?.map((s) => ({
+    data: s.points.map((p) => p.value),
+    color: s.color ?? "#9ca3af",
+    fillColor: s.fillColor,
+    lineWidth: s.lineWidth,
+  }));
 
   return (
     <div width={width} direction="column">
       <graph
         width="100%"
         height={height}
-        data={points.map((point) => point.value)}
+        data={points.map((p) => p.value)}
         min={min}
         max={max}
+        baselineZero={baselineZero}
         color={color}
         fillColor={fillColor}
         referenceValue={referenceValue}
         smooth={smooth}
+        series={extraSeries}
+        bands={bands}
+        markers={markers}
+        showLastPoint={showLastValue}
+        lastPointColor={lastPointColor}
       />
-      {showLabels && labels.length ?
+      {showLabels && labelPoints.length ?
         (
           <div width="100%" location="center">
-            {labels.map((point) => (
+            {labelPoints.map((point) => (
               <text margin={{ top: 0, bottom: 2, left: 8, right: 8 }} size={1.5}>
                 {`§7${point.label}`}
               </text>
diff --git a/apps/discord-bot/src/components/StatDelta.tsx b/apps/discord-bot/src/components/StatDelta.tsx
index a94d7cffb..166f2cf0f 100644
--- a/apps/discord-bot/src/components/StatDelta.tsx
+++ b/apps/discord-bot/src/components/StatDelta.tsx
@@ -11,24 +11,48 @@ import { Badge } from "./Badge.js";
 export interface StatDeltaProps {
   value: number;
   format?: (value: number) => string;
+  inverseGood?: boolean;
   invertColor?: boolean;
+  neutralZone?: number;
+  sparkline?: number[];
 }
 
 export const StatDelta = ({
   value,
   format = (v) => v.toLocaleString(undefined, { maximumFractionDigits: 2 }),
-  invertColor = false,
+  inverseGood = false,
+  invertColor,
+  neutralZone,
+  sparkline,
 }: StatDeltaProps) => {
+  const effectiveInverse = inverseGood || invertColor || false;
   const rounded = Math.round(value * 100) / 100;
-  const isPositive = rounded > 0;
-  const isNegative = rounded < 0;
-  const isGood = isPositive !== invertColor;
+  const absRounded = Math.abs(rounded);
+  const isNeutral = neutralZone !== undefined && absRounded <= neutralZone;
+  const isPositive = !isNeutral && rounded > 0;
+  const isNegative = !isNeutral && rounded < 0;
+  const isGood = isPositive !== effectiveInverse;
   const color = isPositive || isNegative ? (isGood ? "§a" : "§c") : "§7";
   const sign = isPositive ? "+" : "";
 
   return (
-    <Badge color={isPositive || isNegative ? "rgba(255, 255, 255, 0.12)" : "rgba(255, 255, 255, 0.08)"}>
-      {`${color}${sign}${format(rounded)}`}
-    </Badge>
+    <div direction="row">
+      {sparkline && sparkline.length > 1 ?
+        (
+          <sparkbar
+            data={sparkline}
+            width={sparkline.length * 5}
+            height={20}
+            color="rgba(255,255,255,0.3)"
+            highlightLast
+            highlightColor={isPositive || isNegative ? (isGood ? "#4ade80" : "#f87171") : "#9ca3af"}
+            margin={{ top: 0, bottom: 0, left: 0, right: 4 }}
+          />
+        ) :
+        <></>}
+      <Badge color={isPositive || isNegative ? "rgba(255, 255, 255, 0.12)" : "rgba(255, 255, 255, 0.08)"}>
+        {`${color}${sign}${format(rounded)}`}
+      </Badge>
+    </div>
   );
 };
diff --git a/packages/rendering/src/intrinsics/Graph.ts b/packages/rendering/src/intrinsics/Graph.ts
index ccdc23d6a..c2235f025 100644
--- a/packages/rendering/src/intrinsics/Graph.ts
+++ b/packages/rendering/src/intrinsics/Graph.ts
@@ -9,10 +9,31 @@
 import { type CanvasRenderingContext2D } from "skia-canvas";
 import type * as JSX from "#jsx";
 
+export interface GraphSeriesData {
+  data: number[];
+  color: JSX.Fill;
+  fillColor?: JSX.Fill;
+  lineWidth?: number;
+}
+
+export interface GraphBand {
+  min: number;
+  max: number;
+  color: JSX.Fill;
+}
+
+export interface GraphMarker {
+  index: number;
+  label?: string;
+  color?: JSX.Fill;
+  radius?: number;
+}
+
 export interface GraphRenderProps {
   data: number[];
   min?: number;
   max?: number;
+  baselineZero?: boolean;
   color: JSX.Fill;
   fillColor?: JSX.Fill;
   referenceColor?: JSX.Fill;
@@ -21,10 +42,15 @@ export interface GraphRenderProps {
   pointRadius: number;
   smooth: boolean;
   padding: number;
+  series?: GraphSeriesData[];
+  bands?: GraphBand[];
+  markers?: GraphMarker[];
+  showLastPoint?: boolean;
+  lastPointColor?: JSX.Fill;
 }
 
 export interface GraphProps extends Partial<Omit<GraphRenderProps, "data">> {
-  data: number[];
+  data?: number[];
   width?: JSX.Measurement;
   height?: JSX.Measurement;
   margin?: JSX.Spacing;
@@ -37,7 +63,7 @@ const resolveNumber = (value = 0) => Number.isFinite(value) ? value : 0;
 const resolveFill = (fill: JSX.Fill | undefined, fallback: JSX.Fill) => fill ?? fallback;
 
 export const component: JSX.RawFC<GraphProps, GraphRenderProps, undefined> = ({
-  data,
+  data = [],
   width,
   height = 100,
   margin = 4,
@@ -45,6 +71,7 @@ export const component: JSX.RawFC<GraphProps, GraphRenderProps, undefined> = ({
   align = "left",
   min,
   max,
+  baselineZero,
   color = "#9ca3af",
   fillColor,
   referenceColor = "rgba(255, 255, 255, 0.24)",
@@ -53,6 +80,11 @@ export const component: JSX.RawFC<GraphProps, GraphRenderProps, undefined> = ({
   pointRadius = data.length <= 6 ? 2 : 0,
   smooth = false,
   padding = 8,
+  series,
+  bands,
+  markers,
+  showLastPoint,
+  lastPointColor,
 }) => ({
   dimension: {
     width,
@@ -64,6 +96,7 @@ export const component: JSX.RawFC<GraphProps, GraphRenderProps, undefined> = ({
     data,
     min,
     max,
+    baselineZero,
     color,
     fillColor,
     referenceColor,
@@ -72,16 +105,60 @@ export const component: JSX.RawFC<GraphProps, GraphRenderProps, undefined> = ({
     pointRadius,
     smooth,
     padding,
+    series,
+    bands,
+    markers,
+    showLastPoint,
+    lastPointColor,
   },
   children: undefined,
 });
 
+const buildPoints = (
+  values: number[],
+  computedMin: number,
+  range: number,
+  left: number,
+  bottom: number,
+  graphWidth: number,
+  graphHeight: number
+) =>
+  values.map((value, index) => {
+    const progress = values.length === 1 ? 0.5 : index / (values.length - 1);
+    return {
+      x: left + graphWidth * progress,
+      y: bottom - ((value - computedMin) / range) * graphHeight,
+    };
+  });
+
+const tracePath = (
+  ctx: CanvasRenderingContext2D,
+  points: { x: number; y: number }[],
+  smooth: boolean
+) => {
+  ctx.beginPath();
+  for (const [index, point] of points.entries()) {
+    if (index === 0) {
+      ctx.moveTo(point.x, point.y);
+      continue;
+    }
+    const previous = points[index - 1];
+    if (smooth) {
+      const controlX = (previous.x + point.x) / 2;
+      ctx.bezierCurveTo(controlX, previous.y, controlX, point.y, point.x, point.y);
+    } else {
+      ctx.lineTo(point.x, point.y);
+    }
+  }
+};
+
 export const render: JSX.Render<GraphRenderProps> = (
   ctx: CanvasRenderingContext2D,
   {
     data,
     min,
     max,
+    baselineZero,
     color,
     fillColor,
     referenceColor,
@@ -90,15 +167,24 @@ export const render: JSX.Render<GraphRenderProps> = (
     pointRadius,
     smooth,
     padding,
+    series,
+    bands,
+    markers,
+    showLastPoint,
+    lastPointColor,
   },
   { x, y, width, height }
 ) => {
-  const values = data.map(resolveNumber);
+  const allData = [
+    ...data.map(resolveNumber),
+    ...(series ?? []).flatMap((s) => s.data.map(resolveNumber)),
+  ];
 
-  if (!values.length) return;
+  if (!allData.length) return;
 
-  const computedMin = min ?? Math.min(...values);
-  const computedMax = max ?? Math.max(...values);
+  const rawMin = min ?? Math.min(...allData);
+  const computedMin = baselineZero ? Math.min(0, rawMin) : rawMin;
+  const computedMax = max ?? Math.max(...allData);
   const range = computedMax - computedMin || 1;
 
   const left = Math.round(x + padding);
@@ -107,40 +193,25 @@ export const render: JSX.Render<GraphRenderProps> = (
   const graphHeight = Math.max(1, Math.round(height - padding * 2));
   const bottom = top + graphHeight;
 
-  const pointFor = (value: number, index: number) => {
-    const progress = values.length === 1 ? 0.5 : index / (values.length - 1);
-
-    return {
-      x: left + graphWidth * progress,
-      y: bottom - ((value - computedMin) / range) * graphHeight,
-    };
-  };
+  const primaryValues = data.map(resolveNumber);
 
-  const points = values.map(pointFor);
+  const mkPoints = (values: number[]) =>
+    buildPoints(values, computedMin, range, left, bottom, graphWidth, graphHeight);
 
-  const renderLine = () => {
-    ctx.beginPath();
-
-    for (const [index, point] of points.entries()) {
-      if (index === 0) {
-        ctx.moveTo(point.x, point.y);
-        continue;
-      }
-
-      const previous = points[index - 1];
-
-      if (smooth) {
-        const controlX = (previous.x + point.x) / 2;
-        ctx.bezierCurveTo(controlX, previous.y, controlX, point.y, point.x, point.y);
-      } else {
-        ctx.lineTo(point.x, point.y);
-      }
+  if (bands?.length) {
+    ctx.save();
+    for (const band of bands) {
+      const bandTop = bottom - ((band.max - computedMin) / range) * graphHeight;
+      const bandBottom = bottom - ((band.min - computedMin) / range) * graphHeight;
+      if (bandBottom < top || bandTop > bottom) continue;
+      ctx.fillStyle = band.color;
+      ctx.fillRect(left, Math.max(top, bandTop), graphWidth, Math.min(bottom, bandBottom) - Math.max(top, bandTop));
     }
-  };
+    ctx.restore();
+  }
 
   if (typeof referenceValue === "number") {
     const referenceY = bottom - ((referenceValue - computedMin) / range) * graphHeight;
-
     if (referenceY >= top && referenceY <= bottom) {
       ctx.save();
       ctx.strokeStyle = resolveFill(referenceColor, "rgba(255, 255, 255, 0.24)");
@@ -154,29 +225,79 @@ export const render: JSX.Render<GraphRenderProps> = (
     }
   }
 
-  if (fillColor) {
-    renderLine();
-    ctx.lineTo(left + graphWidth, bottom);
-    ctx.lineTo(left, bottom);
-    ctx.closePath();
-    ctx.fillStyle = fillColor;
-    ctx.fill();
+  const renderSeries = (
+    values: number[],
+    seriesColor: JSX.Fill,
+    seriesFill: JSX.Fill | undefined,
+    seriesLineWidth: number
+  ) => {
+    if (!values.length) return;
+    const pts = mkPoints(values);
+
+    if (seriesFill) {
+      tracePath(ctx, pts, smooth);
+      ctx.lineTo(left + graphWidth, bottom);
+      ctx.lineTo(left, bottom);
+      ctx.closePath();
+      ctx.fillStyle = seriesFill;
+      ctx.fill();
+    }
+
+    tracePath(ctx, pts, smooth);
+    ctx.strokeStyle = resolveFill(seriesColor, "#9ca3af");
+    ctx.lineWidth = seriesLineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.stroke();
+  };
+
+  for (const s of series ?? []) {
+    renderSeries(
+      s.data.map(resolveNumber),
+      s.color,
+      s.fillColor,
+      s.lineWidth ?? lineWidth
+    );
   }
 
-  renderLine();
-  ctx.strokeStyle = resolveFill(color, "#9ca3af");
-  ctx.lineWidth = lineWidth;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.stroke();
+  renderSeries(primaryValues, color, fillColor, lineWidth);
 
-  if (!pointRadius) return;
+  if (pointRadius && primaryValues.length) {
+    const pts = mkPoints(primaryValues);
+    ctx.fillStyle = resolveFill(color, "#9ca3af");
+    for (const point of pts) {
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
 
-  ctx.fillStyle = resolveFill(color, "#9ca3af");
+  if (markers?.length && primaryValues.length) {
+    const pts = mkPoints(primaryValues);
+    for (const marker of markers) {
+      const pt = pts[marker.index];
+      if (!pt) continue;
+      ctx.beginPath();
+      const r = marker.radius ?? pointRadius + 2;
+      ctx.arc(pt.x, pt.y, Math.max(2, r), 0, Math.PI * 2);
+      ctx.fillStyle = marker.color ?? color;
+      ctx.fill();
+    }
+  }
 
-  for (const point of points) {
+  if (showLastPoint && primaryValues.length) {
+    const pts = mkPoints(primaryValues);
+    const last = pts.at(-1)!;
+    const dotColor = lastPointColor ?? color;
     ctx.beginPath();
-    ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
+    ctx.arc(last.x, last.y, 4, 0, Math.PI * 2);
+    ctx.fillStyle = dotColor;
     ctx.fill();
+    const labelValue = primaryValues.at(-1)!;
+    ctx.fillStyle = dotColor;
+    ctx.font = "bold 10px sans-serif";
+    ctx.textAlign = "right";
+    ctx.textBaseline = "bottom";
+    ctx.fillText(labelValue.toFixed(2), last.x - 2, last.y - 4);
   }
 };

From 27d35353b6562cb2cc3d8ff1722e15a20fe94d97 Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 06:24:26 -0600
Subject: [PATCH 5/8] =?UTF-8?q?feat(rendering):=20phase=204=20=E2=80=94=20?=
 =?UTF-8?q?nine=20new=20discord-bot=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gauge (arc-based radial progress), RadarChart (N-axis polygon overlay), RankTag (Hypixel rank display), VersusPanel (two-player stat comparison, winner highlighted), LeaderboardRow (rank + name + value row), Trend (label + value + optional delta + sparkline), StatGrid (N-column stat cells), HeatmapChart (cell grid wrapping <heatmap> intrinsic with row/col labels), PrestigeIcon (threshold-colored arc badge) — all exported from components/index.ts
---
 apps/discord-bot/src/components/Gauge.tsx     | 51 ++++++++++
 .../src/components/HeatmapChart.tsx           | 61 ++++++++++++
 .../src/components/LeaderboardRow.tsx         | 52 ++++++++++
 .../src/components/PrestigeIcon.tsx           | 61 ++++++++++++
 .../discord-bot/src/components/RadarChart.tsx | 56 +++++++++++
 apps/discord-bot/src/components/RankTag.tsx   | 25 +++++
 apps/discord-bot/src/components/StatGrid.tsx  | 64 ++++++++++++
 apps/discord-bot/src/components/Trend.tsx     | 70 +++++++++++++
 .../src/components/VersusPanel.tsx            | 98 +++++++++++++++++++
 apps/discord-bot/src/components/index.ts      |  9 ++
 10 files changed, 547 insertions(+)
 create mode 100644 apps/discord-bot/src/components/Gauge.tsx
 create mode 100644 apps/discord-bot/src/components/HeatmapChart.tsx
 create mode 100644 apps/discord-bot/src/components/LeaderboardRow.tsx
 create mode 100644 apps/discord-bot/src/components/PrestigeIcon.tsx
 create mode 100644 apps/discord-bot/src/components/RadarChart.tsx
 create mode 100644 apps/discord-bot/src/components/RankTag.tsx
 create mode 100644 apps/discord-bot/src/components/StatGrid.tsx
 create mode 100644 apps/discord-bot/src/components/Trend.tsx
 create mode 100644 apps/discord-bot/src/components/VersusPanel.tsx

diff --git a/apps/discord-bot/src/components/Gauge.tsx b/apps/discord-bot/src/components/Gauge.tsx
new file mode 100644
index 000000000..71a0ae307
--- /dev/null
+++ b/apps/discord-bot/src/components/Gauge.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface GaugeProps {
+  value: number;
+  min?: number;
+  max?: number;
+  fillColor?: JSX.IntrinsicElements["arc"]["fillColor"];
+  trackColor?: JSX.IntrinsicElements["arc"]["trackColor"];
+  label?: string;
+  sublabel?: string;
+  size?: number;
+}
+
+export const Gauge = ({
+  value,
+  min = 0,
+  max = 100,
+  fillColor = "#9ca3af",
+  trackColor = "rgba(255,255,255,0.12)",
+  label,
+  sublabel,
+  size = 80,
+}: GaugeProps) => (
+  <div direction="column" location="center">
+    <arc
+      value={value}
+      min={min}
+      max={max}
+      fillColor={fillColor}
+      trackColor={trackColor}
+      startAngle={-Math.PI * 0.75}
+      endAngle={Math.PI * 0.75}
+      trackWidth={8}
+      fillWidth={8}
+      width={size}
+      height={size}
+      centerLabel={label}
+      centerLabelColor="#ffffff"
+      centerLabelSize={Math.round(size * 0.16)}
+    />
+    {sublabel ?
+      <text margin={{ top: 2, bottom: 0, left: 4, right: 4 }} size={1.5}>{`§7${sublabel}`}</text> :
+      <></>}
+  </div>
+);
diff --git a/apps/discord-bot/src/components/HeatmapChart.tsx b/apps/discord-bot/src/components/HeatmapChart.tsx
new file mode 100644
index 000000000..c64822209
--- /dev/null
+++ b/apps/discord-bot/src/components/HeatmapChart.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface HeatmapChartProps {
+  cells: number[];
+  cols: number;
+  rowLabels?: string[];
+  colLabels?: string[];
+  highColor?: JSX.IntrinsicElements["heatmap"]["highColor"];
+  cellSize?: number;
+  cellGap?: number;
+}
+
+export const HeatmapChart = ({
+  cells,
+  cols,
+  rowLabels,
+  colLabels,
+  highColor = "#4ade80",
+  cellSize = 12,
+  cellGap = 2,
+}: HeatmapChartProps) => (
+  <div direction="column">
+    {colLabels ?
+      (
+        <div direction="row" margin={{ top: 0, bottom: 2, left: 0, right: 0 }}>
+          {colLabels.map((label) => (
+            <div width={cellSize + cellGap} location="center">
+              <text margin={0} size={1.25}>{`§8${label}`}</text>
+            </div>
+          ))}
+        </div>
+      ) :
+      <></>}
+    <div direction="row">
+      {rowLabels ?
+        (
+          <div direction="column" margin={{ top: 0, bottom: 0, left: 0, right: 4 }}>
+            {rowLabels.map((label) => (
+              <div height={cellSize + cellGap} location="center">
+                <text margin={0} size={1.25}>{`§8${label}`}</text>
+              </div>
+            ))}
+          </div>
+        ) :
+        <></>}
+      <heatmap
+        cells={cells}
+        cols={cols}
+        highColor={highColor}
+        cellSize={cellSize}
+        cellGap={cellGap}
+      />
+    </div>
+  </div>
+);
diff --git a/apps/discord-bot/src/components/LeaderboardRow.tsx b/apps/discord-bot/src/components/LeaderboardRow.tsx
new file mode 100644
index 000000000..642d3db4b
--- /dev/null
+++ b/apps/discord-bot/src/components/LeaderboardRow.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface LeaderboardRowProps {
+  rank: number;
+  name: string;
+  value: string | number;
+  accentColor?: string;
+  width?: JSX.Measurement;
+}
+
+const rankColor = (rank: number): string => {
+  if (rank === 1) return "§#ffd700";
+  if (rank === 2) return "§#c0c0c0";
+  if (rank === 3) return "§#cd7f32";
+  return "§7";
+};
+
+const accentMc = (color: string) =>
+  color.startsWith("#") ? `§#${color.slice(1)}` : color;
+
+export const LeaderboardRow = ({
+  rank,
+  name,
+  value,
+  accentColor = "#9ca3af",
+  width = "100%",
+}: LeaderboardRowProps) => (
+  <box
+    width={width}
+    direction="row"
+    padding={{ top: 4, bottom: 4, left: 8, right: 8 }}
+    margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+  >
+    <div width={28}>
+      <text margin={0} size={1.75}>{`${rankColor(rank)}#${rank}`}</text>
+    </div>
+    <div width="remaining">
+      <text margin={{ top: 0, bottom: 0, left: 6, right: 6 }} size={1.75}>{`§f${name}`}</text>
+    </div>
+    <div location="right">
+      <text margin={0} size={1.75}>
+        {`${accentMc(accentColor)}${typeof value === "number" ? value.toLocaleString() : value}`}
+      </text>
+    </div>
+  </box>
+);
diff --git a/apps/discord-bot/src/components/PrestigeIcon.tsx b/apps/discord-bot/src/components/PrestigeIcon.tsx
new file mode 100644
index 000000000..35b0775d4
--- /dev/null
+++ b/apps/discord-bot/src/components/PrestigeIcon.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface PrestigeIconThreshold {
+  min: number;
+  color: string;
+  label?: string;
+}
+
+export interface PrestigeIconProps {
+  value: number;
+  thresholds: PrestigeIconThreshold[];
+  size?: number;
+  showLabel?: boolean;
+}
+
+const DEFAULT_COLOR = "#9ca3af";
+
+export const PrestigeIcon = ({
+  value,
+  thresholds,
+  size = 32,
+  showLabel = true,
+}: PrestigeIconProps) => {
+  const sorted = [...thresholds].sort((a, b) => b.min - a.min);
+  const match = sorted.find((t) => value >= t.min);
+  const color = match?.color ?? DEFAULT_COLOR;
+  const label = match?.label ?? String(value);
+
+  return (
+    <box
+      direction="column"
+      padding={{ top: 4, bottom: 4, left: 8, right: 8 }}
+      margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+      border={{ topLeft: 4, topRight: 4, bottomLeft: 4, bottomRight: 4 }}
+      color={`${color}33`}
+      shadowDistance={2}
+      shadowOpacity={0.4}
+    >
+      <arc
+        value={value}
+        min={0}
+        max={Math.max(...thresholds.map((t) => t.min))}
+        fillColor={color}
+        trackColor={`${color}33`}
+        width={size}
+        height={size}
+        trackWidth={5}
+        fillWidth={5}
+        centerLabel={showLabel ? label : undefined}
+        centerLabelColor={color}
+        centerLabelSize={Math.max(8, Math.round(size * 0.22))}
+      />
+    </box>
+  );
+};
diff --git a/apps/discord-bot/src/components/RadarChart.tsx b/apps/discord-bot/src/components/RadarChart.tsx
new file mode 100644
index 000000000..1b6cb605d
--- /dev/null
+++ b/apps/discord-bot/src/components/RadarChart.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface RadarChartAxis {
+  label: string;
+  value: number;
+  max?: number;
+}
+
+export interface RadarChartProps {
+  axes: RadarChartAxis[];
+  color?: string;
+  fillColor?: string;
+  secondarySeries?: RadarChartAxis[];
+  secondaryColor?: string;
+  secondaryFillColor?: string;
+  size?: number;
+}
+
+type IntrinsicSeries = JSX.IntrinsicElements["radar"]["series"];
+
+export const RadarChart = ({
+  axes,
+  color = "#9ca3af",
+  fillColor = "rgba(156, 163, 175, 0.2)",
+  secondarySeries,
+  secondaryColor = "#4ade80",
+  secondaryFillColor = "rgba(74, 222, 128, 0.15)",
+  size = 160,
+}: RadarChartProps) => {
+  const normalizeAxes = (axisArr: RadarChartAxis[]) =>
+    axisArr.map((a, i) => {
+      const globalMax = axes[i]?.max ?? Math.max(1, ...axes.map((x) => x.value));
+      return Math.max(0, Math.min(1, a.value / globalMax));
+    });
+
+  const primary = { values: normalizeAxes(axes), color, fillColor };
+
+  const series: IntrinsicSeries = secondarySeries ?
+    [primary, { values: normalizeAxes(secondarySeries), color: secondaryColor, fillColor: secondaryFillColor }] :
+    [primary];
+
+  return (
+    <radar
+      labels={axes.map((a) => a.label)}
+      series={series}
+      width={size}
+      height={size}
+    />
+  );
+};
diff --git a/apps/discord-bot/src/components/RankTag.tsx b/apps/discord-bot/src/components/RankTag.tsx
new file mode 100644
index 000000000..4a803b8bf
--- /dev/null
+++ b/apps/discord-bot/src/components/RankTag.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface RankTagProps {
+  rank: string;
+  size?: number;
+}
+
+export const RankTag = ({ rank, size = 1.75 }: RankTagProps) => (
+  <box
+    padding={{ top: 3, bottom: 3, left: 8, right: 8 }}
+    margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+    border={{ topLeft: 3, topRight: 3, bottomLeft: 3, bottomRight: 3 }}
+    color="rgba(255, 255, 255, 0.12)"
+    shadowDistance={2}
+    shadowOpacity={0.45}
+  >
+    <text margin={0} size={size}>{rank}</text>
+  </box>
+);
diff --git a/apps/discord-bot/src/components/StatGrid.tsx b/apps/discord-bot/src/components/StatGrid.tsx
new file mode 100644
index 000000000..059ba274e
--- /dev/null
+++ b/apps/discord-bot/src/components/StatGrid.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface StatGridItem {
+  label: string;
+  value: string | number;
+  color?: string;
+}
+
+export interface StatGridProps {
+  items: StatGridItem[];
+  columns?: number;
+  width?: JSX.Measurement;
+}
+
+const DEFAULT_COLOR = "#9ca3af";
+
+function chunk<T>(arr: T[], n: number): T[][] {
+  const result: T[][] = [];
+  for (let i = 0; i < arr.length; i += n) result.push(arr.slice(i, i + n));
+  return result;
+}
+
+export const StatGrid = ({
+  items,
+  columns = 3,
+  width = "100%",
+}: StatGridProps) => {
+  const rows = chunk(items, columns);
+
+  return (
+    <div width={width} direction="column">
+      {rows.map((row) => (
+        <div width="100%" direction="row">
+          {row.map((item) => {
+            const hex = item.color ?? DEFAULT_COLOR;
+            const mcColor = hex.startsWith("#") ? `§#${hex.slice(1)}` : hex;
+
+            return (
+              <box
+                width={`${Math.round(100 / columns)}%`}
+                direction="column"
+                padding={{ top: 5, bottom: 5, left: 8, right: 8 }}
+                margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+              >
+                <text margin={{ top: 0, bottom: 3, left: 0, right: 0 }} size={1.5}>
+                  {`§7${item.label}`}
+                </text>
+                <text margin={0} size={2}>
+                  {`${mcColor}${typeof item.value === "number" ? item.value.toLocaleString() : item.value}`}
+                </text>
+              </box>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/discord-bot/src/components/Trend.tsx b/apps/discord-bot/src/components/Trend.tsx
new file mode 100644
index 000000000..e32983ec4
--- /dev/null
+++ b/apps/discord-bot/src/components/Trend.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { StatDelta } from "./StatDelta.js";
+
+export interface TrendProps {
+  label: string;
+  value: number;
+  delta?: number;
+  sparkline?: number[];
+  format?: (v: number) => string;
+  inverseGood?: boolean;
+  accentColor?: string;
+  width?: JSX.Measurement;
+}
+
+export const Trend = ({
+  label,
+  value,
+  delta,
+  sparkline,
+  format,
+  inverseGood,
+  accentColor = "#9ca3af",
+  width = "100%",
+}: TrendProps) => {
+  const displayValue = format ? format(value) : value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  const mcColor = accentColor.startsWith("#") ? `§#${accentColor.slice(1)}` : accentColor;
+
+  return (
+    <box
+      width={width}
+      direction="column"
+      padding={{ top: 5, bottom: 5, left: 8, right: 8 }}
+      margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+    >
+      <text margin={{ top: 0, bottom: 3, left: 0, right: 0 }} size={1.5}>{`§7${label}`}</text>
+      <div width="100%" direction="row">
+        <text margin={0} size={2}>{`${mcColor}${displayValue}`}</text>
+        {delta === undefined ?
+          (sparkline && sparkline.length > 1 ?
+            (
+              <sparkbar
+                data={sparkline}
+                width={sparkline.length * 6}
+                height={24}
+                color={accentColor}
+                margin={{ top: 0, bottom: 0, left: 8, right: 0 }}
+              />
+            ) :
+            <></>) :
+          (
+            <div margin={{ top: 0, bottom: 0, left: 6, right: 0 }}>
+              <StatDelta
+                value={delta}
+                format={format}
+                inverseGood={inverseGood}
+                sparkline={sparkline}
+              />
+            </div>
+          )}
+      </div>
+    </box>
+  );
+};
diff --git a/apps/discord-bot/src/components/VersusPanel.tsx b/apps/discord-bot/src/components/VersusPanel.tsx
new file mode 100644
index 000000000..8ae6fa216
--- /dev/null
+++ b/apps/discord-bot/src/components/VersusPanel.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface VersusStatRow {
+  label: string;
+  leftValue: number | string;
+  rightValue: number | string;
+  higherIsBetter?: boolean;
+  format?: (v: number) => string;
+}
+
+export interface VersusPlayer {
+  name: string;
+  stats: VersusStatRow[];
+}
+
+export interface VersusPanelProps {
+  left: VersusPlayer;
+  right: VersusPlayer;
+  width?: JSX.Measurement;
+}
+
+const compareValues = (
+  left: number | string,
+  right: number | string,
+  higherIsBetter = true
+): "left" | "right" | "tie" => {
+  if (typeof left !== "number" || typeof right !== "number") return "tie";
+  if (left === right) return "tie";
+  return (left > right) === higherIsBetter ? "left" : "right";
+};
+
+const formatVal = (v: number | string, format?: (n: number) => string) =>
+  typeof v === "number" ?
+    (format ? format(v) : v.toLocaleString(undefined, { maximumFractionDigits: 2 })) :
+    v;
+
+const StatRow = ({ row, rightRow }: { row: VersusStatRow; rightRow: VersusStatRow | undefined }) => {
+  const rightValue = rightRow?.rightValue ?? row.rightValue;
+  const winner = compareValues(row.leftValue, rightValue, row.higherIsBetter);
+  const leftColor = winner === "left" ? "§a" : (winner === "right" ? "§c" : "§7");
+  const rightColor = winner === "right" ? "§a" : (winner === "left" ? "§c" : "§7");
+
+  return (
+    <box
+      width="100%"
+      direction="row"
+      padding={{ top: 4, bottom: 4, left: 8, right: 8 }}
+      margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+    >
+      <div width="1/3">
+        <text margin={0} size={1.75}>
+          {`${leftColor}${formatVal(row.leftValue, row.format)}`}
+        </text>
+      </div>
+      <div width="1/3" location="center">
+        <text margin={0} size={1.5}>{`§7${row.label}`}</text>
+      </div>
+      <div width="1/3" location="right">
+        <text margin={0} size={1.75}>
+          {`${rightColor}${formatVal(rightValue, row.format)}`}
+        </text>
+      </div>
+    </box>
+  );
+};
+
+export const VersusPanel = ({
+  left,
+  right,
+  width = "100%",
+}: VersusPanelProps) => {
+  const header = (
+    <div width="100%" direction="row" margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>
+      <div width="1/2">
+        <text margin={{ top: 0, bottom: 0, left: 8, right: 4 }} size={2}>{left.name}</text>
+      </div>
+      <div width="1/2" location="right">
+        <text margin={{ top: 0, bottom: 0, left: 4, right: 8 }} size={2}>{right.name}</text>
+      </div>
+    </div>
+  );
+
+  const rows = left.stats.map((row) => (
+    <StatRow row={row} rightRow={right.stats.find((r) => r.label === row.label)} />
+  ));
+
+  return (
+    <div width={width} direction="column">
+      {[header, ...rows]}
+    </div>
+  );
+};
diff --git a/apps/discord-bot/src/components/index.ts b/apps/discord-bot/src/components/index.ts
index aa80476cf..2497a6788 100644
--- a/apps/discord-bot/src/components/index.ts
+++ b/apps/discord-bot/src/components/index.ts
@@ -11,16 +11,25 @@ export * from "./Badge.js";
 export * from "./BarChart.js";
 export * from "./Container.js";
 export * from "./Footer.js";
+export * from "./Gauge.js";
 export * from "./Graph.js";
 export * from "./Header/index.js";
+export * from "./HeatmapChart.js";
 export * from "./Historical/index.js";
 export * from "./If.js";
+export * from "./LeaderboardRow.js";
 export * from "./List.js";
 export * from "./Multiline.js";
+export * from "./PrestigeIcon.js";
 export * from "./ProgressBar.js";
+export * from "./RadarChart.js";
+export * from "./RankTag.js";
 export * from "./Sidebar.js";
 export * from "./Skin.js";
 export * from "./StatDelta.js";
+export * from "./StatGrid.js";
 export * from "./Table/index.js";
 export * from "./GameList.js";
+export * from "./Trend.js";
+export * from "./VersusPanel.js";
 export * from "./theme.js";

From 2676f08888d15bd8a8c8cb0756f20698836e304e Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 06:32:59 -0600
Subject: [PATCH 6/8] =?UTF-8?q?feat(rendering):=20phase=205=20=E2=80=94=20?=
 =?UTF-8?q?/demo=20paginated=20showcase=20command?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

5-page paginated /demo command using PaginateService (≤5 pages → button row):
  Page 1 — Charts & Graphs: Graph (multi-series FKDR+WLR), BarChart (vertical + horizontal + gradient), sparkbar
  Page 2 — Radial & Distribution: Gauge, RadarChart, Donut (donut + pie via innerRadius:0), ProgressBar
  Page 3 — Stat Primitives: StatDelta variants, Trend + sparkline, StatGrid, Badge (all variants), RankTag, PrestigeIcon
  Page 4 — Comparison & Ranking: VersusPanel vs hardcoded Hypixel averages, LeaderboardRow, HeatmapChart (UUID-seeded)
  Page 5 — Theming & Kitchen Sink: GAME_COLORS palette grid, auto-contrast swatches, Badge kitchen sink
Real BedWars stats used wherever possible; trend/activity data seeded deterministically from player UUID.
---
 .../src/commands/demo/demo.command.tsx        |  78 ++++++++++
 .../src/commands/demo/pages/charts-graphs.tsx | 104 +++++++++++++
 .../demo/pages/comparison-ranking.tsx         | 127 ++++++++++++++++
 .../demo/pages/radial-distribution.tsx        | 125 ++++++++++++++++
 .../commands/demo/pages/stat-primitives.tsx   | 138 ++++++++++++++++++
 .../commands/demo/pages/theming-kitchen.tsx   | 134 +++++++++++++++++
 6 files changed, 706 insertions(+)
 create mode 100644 apps/discord-bot/src/commands/demo/demo.command.tsx
 create mode 100644 apps/discord-bot/src/commands/demo/pages/charts-graphs.tsx
 create mode 100644 apps/discord-bot/src/commands/demo/pages/comparison-ranking.tsx
 create mode 100644 apps/discord-bot/src/commands/demo/pages/radial-distribution.tsx
 create mode 100644 apps/discord-bot/src/commands/demo/pages/stat-primitives.tsx
 create mode 100644 apps/discord-bot/src/commands/demo/pages/theming-kitchen.tsx

diff --git a/apps/discord-bot/src/commands/demo/demo.command.tsx b/apps/discord-bot/src/commands/demo/demo.command.tsx
new file mode 100644
index 000000000..63bb951e8
--- /dev/null
+++ b/apps/discord-bot/src/commands/demo/demo.command.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import {
+  ApiService,
+  Command,
+  CommandContext,
+  PaginateService,
+  PlayerArgument,
+} from "@statsify/discord";
+import { Container } from "typedi";
+import { getBackground, getLogo } from "@statsify/assets";
+import { renderChartsPage } from "./pages/charts-graphs.js";
+import { renderComparisonPage } from "./pages/comparison-ranking.js";
+import { renderRadialPage } from "./pages/radial-distribution.js";
+import { renderStatPrimitivesPage } from "./pages/stat-primitives.js";
+import { renderThemingPage } from "./pages/theming-kitchen.js";
+import type { Image } from "skia-canvas";
+import type { Player, User } from "@statsify/schemas";
+
+export interface DemoPageProps {
+  player: Player;
+  skin: Image;
+  logo: Image;
+  badge?: Image;
+  background: Image;
+  user: User | null;
+}
+
+const DEFAULT_PLAYER = "hypixel";
+
+@Command({
+  description: () => "Component showcase (rendering demo)",
+  args: [new PlayerArgument("player", false)],
+  cooldown: 10,
+})
+export class DemoCommand {
+  private readonly apiService: ApiService;
+  private readonly paginateService: PaginateService;
+
+  public constructor() {
+    this.apiService = Container.get(ApiService);
+    this.paginateService = Container.get(PaginateService);
+  }
+
+  public async run(context: CommandContext) {
+    const user = context.getUser();
+    const playerTag = context.option<string | undefined>("player") ?? DEFAULT_PLAYER;
+
+    const [player, background, logo] = await Promise.all([
+      this.apiService.getPlayer(playerTag, user),
+      getBackground("bedwars", "overall"),
+      getLogo(user),
+    ]);
+
+    const [skin, badge] = await Promise.all([
+      this.apiService.getPlayerSkin(player.uuid, user),
+      this.apiService.getUserBadge(player.uuid),
+    ]);
+
+    const props: DemoPageProps = { player, skin, logo, badge, background, user };
+
+    const pages = [
+      { label: () => "Charts & Graphs", generator: () => renderChartsPage(props) },
+      { label: () => "Radial & Distribution", generator: () => renderRadialPage(props) },
+      { label: () => "Stat Primitives", generator: () => renderStatPrimitivesPage(props) },
+      { label: () => "Comparison & Ranking", generator: () => renderComparisonPage(props) },
+      { label: () => "Theming & Kitchen Sink", generator: () => renderThemingPage(props) },
+    ];
+
+    return this.paginateService.paginate(context, pages);
+  }
+}
diff --git a/apps/discord-bot/src/commands/demo/pages/charts-graphs.tsx b/apps/discord-bot/src/commands/demo/pages/charts-graphs.tsx
new file mode 100644
index 000000000..aa2c916ca
--- /dev/null
+++ b/apps/discord-bot/src/commands/demo/pages/charts-graphs.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { BarChart, Container, Footer, GAME_COLORS, Graph, Header } from "#components";
+import { getTheme } from "#themes";
+import { render } from "@statsify/rendering";
+import type { DemoPageProps } from "../demo.command.js";
+
+const seededPoints = (uuid: string, base: number, count: number) => {
+  const hex = uuid.replace(/-/g, "");
+  return Array.from({ length: count }, (_, i) => {
+    const h = hex.slice((i * 2) % 32, (i * 2) % 32 + 2);
+    const jitter = (Number.parseInt(h, 16) / 255 - 0.5) * 0.4;
+    return { label: `W${i + 1}`, value: Math.max(0, base * (1 + jitter)) };
+  });
+};
+
+export const renderChartsPage = ({
+  player,
+  skin,
+  logo,
+  badge,
+  background,
+  user,
+}: DemoPageProps) => {
+  const bw = player.stats.bedwars;
+  const overall = bw.overall;
+
+  const fkdrPoints = seededPoints(player.uuid, overall.fkdr, 10);
+  const wlrPoints = seededPoints(player.uuid, overall.wlr, 10);
+
+  const modeWins = [
+    { label: "Solo", value: bw.solo.wins || 0, color: GAME_COLORS.bedwars },
+    { label: "Doubles", value: bw.doubles.wins || 0, color: "#f97316" },
+    { label: "3s", value: bw.threes.wins || 0, color: "#facc15" },
+    { label: "4s", value: bw.fours.wins || 0, color: "#a78bfa" },
+    { label: "4v4", value: bw["4v4"].wins || 0, color: "#38bdf8" },
+  ];
+
+  const activityData = Array.from({ length: 12 }, (_, i) => {
+    const h = player.uuid.replace(/-/g, "").slice(i * 2, i * 2 + 2);
+    return Math.round((Number.parseInt(h, 16) / 255) * 80);
+  });
+
+  const canvas = render(
+    <Container background={background}>
+      <Header
+        skin={skin}
+        name={player.prefixName}
+        badge={badge}
+        title="§lCharts §f& §lGraphs"
+        description="§7Showcasing §fGraph§7, §fBarChart§7, §fsparkbar"
+        time="LIVE"
+        sidebar={[]}
+      />
+      <div width="100%" direction="row">
+        <div width="1/2" direction="column">
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lFKDR §8vs §7WLR Trend</text>
+            <Graph
+              points={fkdrPoints}
+              series={[{ points: wlrPoints, color: "#4ade80", fillColor: "rgba(74,222,128,0.12)" }]}
+              color={GAME_COLORS.bedwars}
+              fillColor="rgba(239,68,68,0.14)"
+              smooth
+              height={80}
+              showLastValue
+            />
+          </box>
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lRecent Activity</text>
+            <sparkbar
+              data={activityData}
+              height={36}
+              color={GAME_COLORS.bedwars}
+              highlightLast
+              highlightColor="#fbbf24"
+              width="100%"
+            />
+          </box>
+        </div>
+        <div width="1/2" direction="column">
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lMode Wins (Vertical)</text>
+            <BarChart items={modeWins} sort={false} />
+          </box>
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lMode Wins (Horizontal)</text>
+            <BarChart items={modeWins} sort={false} orientation="horizontal" gradientFill />
+          </box>
+        </div>
+      </div>
+      <Footer logo={logo} user={user} />
+    </Container>,
+    getTheme(user)
+  );
+
+  return canvas;
+};
diff --git a/apps/discord-bot/src/commands/demo/pages/comparison-ranking.tsx b/apps/discord-bot/src/commands/demo/pages/comparison-ranking.tsx
new file mode 100644
index 000000000..29ffec860
--- /dev/null
+++ b/apps/discord-bot/src/commands/demo/pages/comparison-ranking.tsx
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import {
+  Container,
+  Footer,
+  GAME_COLORS,
+  Header,
+  HeatmapChart,
+  LeaderboardRow,
+  VersusPanel,
+} from "#components";
+import { getTheme } from "#themes";
+import { render } from "@statsify/rendering";
+import type { DemoPageProps } from "../demo.command.js";
+
+const HYPIXEL_BW_AVERAGES = {
+  fkdr: 1.2,
+  wlr: 0.8,
+  kdr: 0.9,
+  bblr: 0.7,
+};
+
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+export const renderComparisonPage = ({
+  player,
+  skin,
+  logo,
+  badge,
+  background,
+  user,
+}: DemoPageProps) => {
+  const bw = player.stats.bedwars;
+  const overall = bw.overall;
+
+  const heatCells = Array.from({ length: 7 * 8 }, (_, i) => {
+    const hex = player.uuid.replace(/-/g, "");
+    const h = hex.slice(i % 32, i % 32 + 2);
+    return Math.round((Number.parseInt(h, 16) / 255) * 60);
+  });
+
+  const leaderboardEntries = [
+    { rank: 1, name: "§6§lHyperion_Max", value: 28.4 },
+    { rank: 2, name: "§b§lSkyblaze", value: 21.7 },
+    { rank: 3, name: "§a§lVineBreaker", value: 18.3 },
+    { rank: 4, name: player.username, value: overall.fkdr },
+    { rank: 5, name: "§7VoidStrider", value: Math.max(0, overall.fkdr - 0.8) },
+  ].sort((a, b) => b.value - a.value).map((e, i) => ({ ...e, rank: i + 1 }));
+
+  const leftPlayer = {
+    name: player.prefixName,
+    stats: [
+      { label: "FKDR", leftValue: overall.fkdr, rightValue: HYPIXEL_BW_AVERAGES.fkdr },
+      { label: "WLR", leftValue: overall.wlr, rightValue: HYPIXEL_BW_AVERAGES.wlr },
+      { label: "KDR", leftValue: overall.kdr, rightValue: HYPIXEL_BW_AVERAGES.kdr },
+      { label: "BBLR", leftValue: overall.bblr, rightValue: HYPIXEL_BW_AVERAGES.bblr },
+    ],
+  };
+
+  const rightPlayer = {
+    name: "§7Hypixel Average",
+    stats: [
+      { label: "FKDR", leftValue: overall.fkdr, rightValue: HYPIXEL_BW_AVERAGES.fkdr },
+      { label: "WLR", leftValue: overall.wlr, rightValue: HYPIXEL_BW_AVERAGES.wlr },
+      { label: "KDR", leftValue: overall.kdr, rightValue: HYPIXEL_BW_AVERAGES.kdr },
+      { label: "BBLR", leftValue: overall.bblr, rightValue: HYPIXEL_BW_AVERAGES.bblr },
+    ],
+  };
+
+  const canvas = render(
+    <Container background={background}>
+      <Header
+        skin={skin}
+        name={player.prefixName}
+        badge={badge}
+        title="§lComparison §f& §lRanking"
+        description="§7Showcasing §fVersusPanel§7, §fLeaderboardRow§7, §fHeatmapChart"
+        time="LIVE"
+        sidebar={[]}
+      />
+      <div width="100%" direction="row">
+        <div width="1/2" direction="column">
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lvs Hypixel Average</text>
+            <VersusPanel left={leftPlayer} right={rightPlayer} />
+          </box>
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            {[
+              <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lFKDR Leaderboard (Simulated)</text>,
+              ...leaderboardEntries.map((e) => (
+                <LeaderboardRow
+                  rank={e.rank}
+                  name={e.name}
+                  value={e.value.toFixed(2)}
+                  accentColor={GAME_COLORS.bedwars}
+                />
+              )),
+            ]}
+          </box>
+        </div>
+        <div width="1/2" direction="column">
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lWeekly Activity Heatmap §8(seeded)</text>
+            <HeatmapChart
+              cells={heatCells}
+              cols={8}
+              rowLabels={DAYS}
+              highColor={GAME_COLORS.bedwars}
+              cellSize={14}
+              cellGap={3}
+            />
+          </box>
+        </div>
+      </div>
+      <Footer logo={logo} user={user} />
+    </Container>,
+    getTheme(user)
+  );
+
+  return canvas;
+};
diff --git a/apps/discord-bot/src/commands/demo/pages/radial-distribution.tsx b/apps/discord-bot/src/commands/demo/pages/radial-distribution.tsx
new file mode 100644
index 000000000..b752a0607
--- /dev/null
+++ b/apps/discord-bot/src/commands/demo/pages/radial-distribution.tsx
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import {
+  Container,
+  Footer,
+  GAME_COLORS,
+  Gauge,
+  Header,
+  ProgressBar,
+  RadarChart,
+} from "#components";
+import { LocalizeFunction } from "@statsify/discord";
+import { getTheme } from "#themes";
+import { render } from "@statsify/rendering";
+import type { DemoPageProps } from "../demo.command.js";
+
+const fakeT = String as unknown as LocalizeFunction;
+
+export const renderRadialPage = ({
+  player,
+  skin,
+  logo,
+  badge,
+  background,
+  user,
+}: DemoPageProps) => {
+  const bw = player.stats.bedwars;
+  const overall = bw.overall;
+
+  const levelFrac = bw.level - Math.floor(bw.level);
+  const levelPct = Math.round(levelFrac * 100);
+  const totalWins = bw.overall.wins || 0;
+  const totalLosses = bw.overall.losses || 1;
+
+  const radarAxes = [
+    { label: "FKDR", value: overall.fkdr, max: 10 },
+    { label: "WLR", value: overall.wlr, max: 5 },
+    { label: "KDR", value: overall.kdr, max: 5 },
+    { label: "BBLR", value: overall.bblr, max: 5 },
+    { label: "FK/G", value: overall.fkdr * 2.5, max: 20 },
+  ];
+
+  const modeWins = [
+    { value: bw.solo.wins || 1, color: GAME_COLORS.bedwars },
+    { value: bw.doubles.wins || 1, color: "#f97316" },
+    { value: bw.threes.wins || 1, color: "#facc15" },
+    { value: bw.fours.wins || 1, color: "#a78bfa" },
+    { value: bw["4v4"].wins || 1, color: "#38bdf8" },
+  ];
+
+  const canvas = render(
+    <Container background={background}>
+      <Header
+        skin={skin}
+        name={player.prefixName}
+        badge={badge}
+        title="§lRadial §f& §lDistribution"
+        description="§7Showcasing §fGauge§7, §fRadarChart§7, §fDonut§7, §fProgressBar"
+        time="LIVE"
+        sidebar={[]}
+      />
+      <div width="100%" direction="row">
+        <div width="1/3" direction="column" location="center">
+          <box width="100%" direction="column" padding={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 6, left: 0, right: 0 }}>§lPrestige Level</text>
+            <Gauge
+              value={levelPct}
+              min={0}
+              max={100}
+              fillColor={GAME_COLORS.bedwars}
+              label={`${Math.floor(bw.level)}✫`}
+              sublabel={`${levelPct}% to next`}
+              size={100}
+            />
+          </box>
+          <box width="100%" direction="column" padding={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 6, left: 0, right: 0 }}>§lWin Rate</text>
+            <ProgressBar
+              color={GAME_COLORS.bedwars}
+              numerator={totalWins}
+              denominator={totalWins + totalLosses}
+              t={fakeT}
+            />
+          </box>
+        </div>
+        <div width="1/3" direction="column" location="center">
+          <box width="100%" direction="column" padding={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 6, left: 0, right: 0 }}>§lStat Radar</text>
+            <RadarChart axes={radarAxes} color={GAME_COLORS.bedwars} fillColor="rgba(239,68,68,0.2)" size={140} />
+          </box>
+        </div>
+        <div width="1/3" direction="column" location="center">
+          <box width="100%" direction="column" padding={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 6, left: 0, right: 0 }}>§lMode Distribution</text>
+            <donut
+              segments={modeWins}
+              innerRadius={0.55}
+              width={120}
+              height={120}
+            />
+          </box>
+          <box width="100%" direction="column" padding={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 6, left: 0, right: 0 }}>§lMode Share (Pie)</text>
+            <donut
+              segments={modeWins}
+              innerRadius={0}
+              width={120}
+              height={120}
+            />
+          </box>
+        </div>
+      </div>
+      <Footer logo={logo} user={user} />
+    </Container>,
+    getTheme(user)
+  );
+
+  return canvas;
+};
diff --git a/apps/discord-bot/src/commands/demo/pages/stat-primitives.tsx b/apps/discord-bot/src/commands/demo/pages/stat-primitives.tsx
new file mode 100644
index 000000000..cea6836c4
--- /dev/null
+++ b/apps/discord-bot/src/commands/demo/pages/stat-primitives.tsx
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import {
+  Badge,
+  Container,
+  Footer,
+  GAME_COLORS,
+  Header,
+  PrestigeIcon,
+  RankTag,
+  StatDelta,
+  StatGrid,
+  Trend,
+} from "#components";
+import { getTheme } from "#themes";
+import { render } from "@statsify/rendering";
+import type { DemoPageProps } from "../demo.command.js";
+
+const seededSpark = (uuid: string, base: number) => {
+  const hex = uuid.replace(/-/g, "");
+  return Array.from({ length: 8 }, (_, i) => {
+    const h = hex.slice((i * 3) % 30, (i * 3) % 30 + 2);
+    return Math.max(0, base + (Number.parseInt(h, 16) / 255 - 0.5) * base * 0.6);
+  });
+};
+
+const BEDWARS_PRESTIGE: Array<{ min: number; color: string; label: string }> = [
+  { min: 0, color: "#9ca3af", label: "None" },
+  { min: 100, color: "#ef4444", label: "Ruby" },
+  { min: 500, color: "#a855f7", label: "Amethyst" },
+  { min: 1000, color: "#eab308", label: "Gold" },
+  { min: 2000, color: "#38bdf8", label: "Diamond" },
+  { min: 3000, color: "#c0c0c0", label: "Platinum" },
+];
+
+export const renderStatPrimitivesPage = ({
+  player,
+  skin,
+  logo,
+  badge,
+  background,
+  user,
+}: DemoPageProps) => {
+  const bw = player.stats.bedwars;
+  const overall = bw.overall;
+  const fkdrSpark = seededSpark(player.uuid, overall.fkdr);
+  const wlrSpark = seededSpark(player.uuid, overall.wlr);
+
+  const statItems = [
+    { label: "FKDR", value: overall.fkdr, color: GAME_COLORS.bedwars },
+    { label: "WLR", value: overall.wlr, color: "#4ade80" },
+    { label: "KDR", value: overall.kdr, color: "#facc15" },
+    { label: "BBLR", value: overall.bblr, color: "#a78bfa" },
+    { label: "Final Kills", value: overall.finalKills, color: GAME_COLORS.bedwars },
+    { label: "Wins", value: overall.wins, color: "#4ade80" },
+    { label: "Losses", value: overall.losses, color: "#f87171" },
+    { label: "Deaths", value: overall.deaths, color: "#f87171" },
+    { label: "Beds Broken", value: overall.bedsBroken, color: "#fbbf24" },
+  ];
+
+  const canvas = render(
+    <Container background={background}>
+      <Header
+        skin={skin}
+        name={player.prefixName}
+        badge={badge}
+        title="§lStat Primitives"
+        description="§7Showcasing §fStatDelta§7, §fTrend§7, §fStatGrid§7, §fBadge§7, §fRankTag§7, §fPrestigeIcon"
+        time="LIVE"
+        sidebar={[]}
+      />
+      <div width="100%" direction="row">
+        <div width="1/2" direction="column">
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lStat Grid</text>
+            <StatGrid items={statItems} columns={3} />
+          </box>
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lTrends</text>
+            <Trend label="FKDR" value={overall.fkdr} delta={overall.fkdr - 1} sparkline={fkdrSpark} accentColor={GAME_COLORS.bedwars} />
+            <Trend label="WLR" value={overall.wlr} delta={overall.wlr - 0.5} sparkline={wlrSpark} accentColor="#4ade80" />
+            <Trend label="Losses" value={overall.losses} delta={overall.losses} inverseGood accentColor="#f87171" />
+          </box>
+        </div>
+        <div width="1/2" direction="column">
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lStatDelta Variants</text>
+            <div direction="row">
+              <StatDelta value={1.23} />
+              <StatDelta value={-0.45} />
+              <StatDelta value={0} />
+            </div>
+            <div direction="row" margin={{ top: 4, bottom: 0, left: 0, right: 0 }}>
+              <StatDelta value={5} inverseGood />
+              <StatDelta value={overall.fkdr - 1} sparkline={fkdrSpark} />
+            </div>
+          </box>
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lBadge Variants</text>
+            <div direction="row">
+              <Badge>§fSolid</Badge>
+              <Badge variant="outline">§7Outline</Badge>
+              <Badge variant="soft">§8Soft</Badge>
+            </div>
+            <div direction="row" margin={{ top: 4, bottom: 0, left: 0, right: 0 }}>
+              <Badge status="positive" shape="pill">§aPositive</Badge>
+              <Badge status="negative" shape="pill">§cNegative</Badge>
+              <Badge status="warning">§eWarning</Badge>
+            </div>
+          </box>
+          <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+            <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lRank §f& §lPrestige</text>
+            <div direction="row">
+              <RankTag rank={player.prefixName} />
+            </div>
+            <div direction="row" margin={{ top: 4, bottom: 0, left: 0, right: 0 }}>
+              <PrestigeIcon
+                value={Math.floor(bw.level)}
+                thresholds={BEDWARS_PRESTIGE}
+                size={36}
+              />
+            </div>
+          </box>
+        </div>
+      </div>
+      <Footer logo={logo} user={user} />
+    </Container>,
+    getTheme(user)
+  );
+
+  return canvas;
+};
diff --git a/apps/discord-bot/src/commands/demo/pages/theming-kitchen.tsx b/apps/discord-bot/src/commands/demo/pages/theming-kitchen.tsx
new file mode 100644
index 000000000..1a72ef3a0
--- /dev/null
+++ b/apps/discord-bot/src/commands/demo/pages/theming-kitchen.tsx
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import {
+  Badge,
+  Container,
+  Footer,
+  GAME_COLORS,
+  Gauge,
+  Header,
+  SEMANTIC_COLORS,
+  StatGrid,
+} from "#components";
+import { autoContrast } from "#lib/auto-contrast";
+import { getTheme } from "#themes";
+import { render } from "@statsify/rendering";
+import type { DemoPageProps } from "../demo.command.js";
+
+const PALETTE: Array<{ label: string; color: string; accentKey: keyof typeof GAME_COLORS }> = [
+  { label: "§cBed§fWars", color: GAME_COLORS.bedwars, accentKey: "bedwars" },
+  { label: "§bSky§eWars", color: GAME_COLORS.skyWars, accentKey: "skyWars" },
+  { label: "§bDuels", color: GAME_COLORS.duels, accentKey: "duels" },
+  { label: "§5Quake", color: GAME_COLORS.quake, accentKey: "quake" },
+];
+
+const SWATCHES = [
+  SEMANTIC_COLORS.positive,
+  SEMANTIC_COLORS.negative,
+  SEMANTIC_COLORS.neutral,
+  SEMANTIC_COLORS.warning,
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#4ade80",
+  "#38bdf8",
+  "#6366f1",
+  "#d946ef",
+  "#ffffff",
+];
+
+export const renderThemingPage = ({
+  player,
+  skin,
+  logo,
+  badge,
+  background,
+  user,
+}: DemoPageProps) => {
+  const bw = player.stats.bedwars;
+  const overall = bw.overall;
+
+  const canvas = render(
+    <Container background={background}>
+      <Header
+        skin={skin}
+        name={player.prefixName}
+        badge={badge}
+        title="§lTheming §f& §lKitchen Sink"
+        description="§7GAME_COLORS palettes · auto-contrast · semantic colors"
+        time="LIVE"
+        sidebar={[]}
+      />
+      <div width="100%" direction="column">
+        <div width="100%" direction="row">
+          {PALETTE.map(({ label, color, accentKey }) => {
+            const statItems = [
+              { label: "FKDR", value: overall.fkdr, color: GAME_COLORS[accentKey] },
+              { label: "WLR", value: overall.wlr, color: GAME_COLORS[accentKey] },
+              { label: "KDR", value: overall.kdr, color: GAME_COLORS[accentKey] },
+            ];
+
+            return (
+              <box
+                width="1/4"
+                direction="column"
+                padding={{ top: 5, bottom: 5, left: 6, right: 6 }}
+                margin={{ top: 2, bottom: 2, left: 4, right: 4 }}
+              >
+                <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }} size={1.75}>{label}</text>
+                <Gauge
+                  value={Math.round((bw.level % 1) * 100)}
+                  fillColor={color}
+                  label={`${Math.floor(bw.level)}`}
+                  size={64}
+                />
+                <StatGrid items={statItems} columns={1} />
+              </box>
+            );
+          })}
+        </div>
+        <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+          <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lAuto-Contrast Swatches</text>
+          <div direction="row">
+            {SWATCHES.map((hex) => {
+              const textColor = autoContrast(hex) === "#000000" ? "§0" : "§f";
+              return (
+                <box
+                  width={24}
+                  height={24}
+                  margin={2}
+                  padding={0}
+                  color={hex}
+                  shadowDistance={0}
+                >
+                  <text margin={0} size={1.25}>{textColor}A</text>
+                </box>
+              );
+            })}
+          </div>
+        </box>
+        <box width="100%" direction="column" padding={{ top: 5, bottom: 5, left: 8, right: 8 }}>
+          <text margin={{ top: 0, bottom: 4, left: 0, right: 0 }}>§lBadge Kitchen Sink</text>
+          <div direction="row">
+            <Badge size="sm">§7Small</Badge>
+            <Badge size="md">§fMedium</Badge>
+            <Badge size="lg">§bLarge</Badge>
+            <Badge variant="outline" shape="pill">§7Pill</Badge>
+            <Badge status="positive" variant="soft" size="sm">§aGood</Badge>
+            <Badge status="negative" variant="soft" size="sm">§cBad</Badge>
+          </div>
+        </box>
+      </div>
+      <Footer logo={logo} user={user} />
+    </Container>,
+    getTheme(user)
+  );
+
+  return canvas;
+};

From 21c07149558d86bc37df7580afac31c755221c42 Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 06:42:58 -0600
Subject: [PATCH 7/8] fix(rendering): replace location="right" with spacer-div
 pattern

location="right" on a container hits the unimplemented branch in getPositionalDelta (util.ts:96). Replace all three occurrences (VersusPanel header, VersusPanel stat row, LeaderboardRow value) with the established <div width="remaining" /> spacer pattern used throughout the codebase.
---
 apps/discord-bot/src/components/LeaderboardRow.tsx | 13 +++++--------
 apps/discord-bot/src/components/VersusPanel.tsx    |  6 ++++--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/discord-bot/src/components/LeaderboardRow.tsx b/apps/discord-bot/src/components/LeaderboardRow.tsx
index 642d3db4b..031d37851 100644
--- a/apps/discord-bot/src/components/LeaderboardRow.tsx
+++ b/apps/discord-bot/src/components/LeaderboardRow.tsx
@@ -40,13 +40,10 @@ export const LeaderboardRow = ({
     <div width={28}>
       <text margin={0} size={1.75}>{`${rankColor(rank)}#${rank}`}</text>
     </div>
-    <div width="remaining">
-      <text margin={{ top: 0, bottom: 0, left: 6, right: 6 }} size={1.75}>{`§f${name}`}</text>
-    </div>
-    <div location="right">
-      <text margin={0} size={1.75}>
-        {`${accentMc(accentColor)}${typeof value === "number" ? value.toLocaleString() : value}`}
-      </text>
-    </div>
+    <text margin={{ top: 0, bottom: 0, left: 6, right: 6 }} size={1.75}>{`§f${name}`}</text>
+    <div width="remaining" />
+    <text margin={0} size={1.75}>
+      {`${accentMc(accentColor)}${typeof value === "number" ? value.toLocaleString() : value}`}
+    </text>
   </box>
 );
diff --git a/apps/discord-bot/src/components/VersusPanel.tsx b/apps/discord-bot/src/components/VersusPanel.tsx
index 8ae6fa216..3f936b312 100644
--- a/apps/discord-bot/src/components/VersusPanel.tsx
+++ b/apps/discord-bot/src/components/VersusPanel.tsx
@@ -61,7 +61,8 @@ const StatRow = ({ row, rightRow }: { row: VersusStatRow; rightRow: VersusStatRo
       <div width="1/3" location="center">
         <text margin={0} size={1.5}>{`§7${row.label}`}</text>
       </div>
-      <div width="1/3" location="right">
+      <div width="1/3">
+        <div width="remaining" />
         <text margin={0} size={1.75}>
           {`${rightColor}${formatVal(rightValue, row.format)}`}
         </text>
@@ -80,7 +81,8 @@ export const VersusPanel = ({
       <div width="1/2">
         <text margin={{ top: 0, bottom: 0, left: 8, right: 4 }} size={2}>{left.name}</text>
       </div>
-      <div width="1/2" location="right">
+      <div width="1/2">
+        <div width="remaining" />
         <text margin={{ top: 0, bottom: 0, left: 4, right: 8 }} size={2}>{right.name}</text>
       </div>
     </div>

From 7832c9f8a5a1fdfdc84ccfcb0427368e57184c07 Mon Sep 17 00:00:00 2001
From: Robert <codrrrr@gmail.com>
Date: Sat, 6 Jun 2026 20:11:52 -0600
Subject: [PATCH 8/8] Delete docs directory

---
 docs/rendering-components-prd.md | 36 --------------------------------
 1 file changed, 36 deletions(-)
 delete mode 100644 docs/rendering-components-prd.md

diff --git a/docs/rendering-components-prd.md b/docs/rendering-components-prd.md
deleted file mode 100644
index 1aeb2c3a4..000000000
--- a/docs/rendering-components-prd.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Statsify Rendering Components PRD
-
-## Goal
-
-Expand the Discord image JSX component library with reusable data-visualization and callout components that match existing Statsify cards: dense Minecraft-style profile images, strong stat hierarchy, compact tables, and progress-focused summaries.
-
-## Initial Scope
-
-- `Graph`: thin line/sparkline component for ratios, progression, or historical trend data. It should avoid legends and grid noise; commands provide nearby labels and context.
-- `BarChart`: horizontal comparison bars for mode breakdowns, resource totals, and ranked stat groups.
-- `Badge`: compact pill for rank tags, flags, personal bests, and small state labels.
-- `StatDelta`: signed inline change chip for session, period, and mode-vs-overall comparisons.
-
-## Implementation Direction
-
-- Keep chart primitives low level in `@statsify/rendering` only when Canvas path access is required. The new `graph` intrinsic owns the line, optional area fill, dots, and reference line.
-- Keep product-level components in `apps/discord-bot/src/components` so commands can compose them without knowing renderer internals.
-- Prefer pure JSX/`box` composition for rectangular visuals. This keeps BarChart, Badge, and StatDelta theme-compatible without renderer changes.
-- Use direct labels around charts instead of legends. For small Discord images, labels should be short and adjacent to the data.
-- Use muted gray as the default chart color, with one accent per chart when a command needs emphasis.
-- Sort horizontal bar charts by value by default. Commands can disable sorting when the natural order matters.
-
-## Demo Direction
-
-BedWars is the first demo surface because the public site already showcases BedWars profile cards and mode stats. The profile now includes:
-
-- A mode wins BarChart across Solo, Doubles, 3s, 4s, and 4v4.
-- A ratio Graph for WLR, FKDR, KDR, and BBLR.
-- A StatDelta comparing selected-mode FKDR against overall FKDR.
-- A Badge to mark the new visual block.
-
-## Follow-Ups
-
-- Add a true historical Graph to session commands once multi-point snapshots are available in command props.
-- Add a RadialProgress intrinsic only if circular progress is needed for a specific card; do not add gauges for one-off ratios.
-- Add render tests for graph geometry if chart components become shared outside the Discord bot.