@flesler/cursor-canvas-web 1.4.0 → 1.5.0

package/dist/pie-donut-DNbA0GeH.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("@mantine/charts"),h=require("./cursor-canvas.cjs"),m=180,p=540;function x(t){return Math.max(28,Math.round(t*.22))}function y({total:t,family:r,primary:i,subtitle:e}){return o.jsxs("text",{x:"50%",y:"50%",textAnchor:"middle",dominantBaseline:"central",fontFamily:r,children:[o.jsx("tspan",{x:"50%",dy:"-0.4em",fontSize:20,fontWeight:600,fill:i,children:t}),o.jsx("tspan",{x:"50%",dy:"1.55em",fontSize:16,fontWeight:500,fill:e,children:"Total"})]})}function d({data:t,size:r,highlighted:i}){const e=h.useHostTheme(),s=t.reduce((n,c)=>n+c.value,0),l={startAngle:m,endAngle:p},a=n=>({opacity:i===null||i===n?1:.35});return o.jsx(u.DonutChart,{data:t,size:r,thickness:x(r),withTooltip:!0,cellProps:n=>a(n.name),...l,children:o.jsx(y,{total:s,family:e.typography.fontFamily,primary:e.text.primary,subtitle:e.text.secondary})})}exports.PieDonutChart=d;

package/dist/pie-donut-qRBFP0tT.js

@@ -0,0 +1,63 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { DonutChart as p } from "@mantine/charts";
+import { useHostTheme as u } from "./cursor-canvas.js";
+const f = 180, h = 540;
+function y(t) {
+  return Math.max(28, Math.round(t * 0.22));
+}
+function d({
+  total: t,
+  family: o,
+  primary: r,
+  subtitle: e
+}) {
+  return /* @__PURE__ */ m(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      fontFamily: o,
+      children: [
+        /* @__PURE__ */ i("tspan", { x: "50%", dy: "-0.4em", fontSize: 20, fontWeight: 600, fill: r, children: t }),
+        /* @__PURE__ */ i("tspan", { x: "50%", dy: "1.55em", fontSize: 16, fontWeight: 500, fill: e, children: "Total" })
+      ]
+    }
+  );
+}
+function D({
+  data: t,
+  size: o,
+  highlighted: r
+}) {
+  const e = u(), l = t.reduce((n, c) => n + c.value, 0), s = {
+    startAngle: f,
+    endAngle: h
+  }, a = (n) => ({
+    opacity: r === null || r === n ? 1 : 0.35
+  });
+  return /* @__PURE__ */ i(
+    p,
+    {
+      data: t,
+      size: o,
+      thickness: y(o),
+      withTooltip: !0,
+      cellProps: (n) => a(n.name),
+      ...s,
+      children: /* @__PURE__ */ i(
+        d,
+        {
+          total: l,
+          family: e.typography.fontFamily,
+          primary: e.text.primary,
+          subtitle: e.text.secondary
+        }
+      )
+    }
+  );
+}
+export {
+  D as PieDonutChart
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flesler/cursor-canvas-web",
   "private": false,
-  "version": "1.4.0",
+  "version": "1.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/flesler/cursor-canvas-web.git"
@@ -20,9 +20,13 @@
     "node": ">=22.12.0",
     "npm": ">=10.0.0"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
+    "src/shim",
+    "src/runtime",
     "src/vendor",
     "src/superset"
   ],

package/src/runtime/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * Web host runtime for canvases.
+ *
+ * This is intentionally a SEPARATE entry point from the `cursor/canvas` shim:
+ * the shim must mirror the real SDK and invent no extra exports, whereas these
+ * helpers are web-only glue (a Mantine provider + a mount helper) that replace
+ * the boilerplate a consuming app would otherwise copy from `main.tsx`.
+ *
+ * Consumers must still import Mantine's core stylesheet once in their app:
+ *   import '@mantine/core/styles.css';
+ * Chart canvases: `@mantine/charts/styles.css` is imported by bar/line/pie shim modules.
+ */
+import { type MantineColorScheme } from '@mantine/core'
+import { StrictMode, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { CanvasMantineRoot } from '../shim/canvas-mantine-root'
+
+export interface CanvasRootProps {
+  children: ReactNode;
+  /** Initial color scheme; defaults to following the OS preference. */
+  defaultColorScheme?: MantineColorScheme
+}
+
+/** @deprecated Use `CanvasMantineRoot` — same behavior. */
+export const CanvasRoot = CanvasMantineRoot
+
+export interface MountCanvasOptions {
+  defaultColorScheme?: MantineColorScheme;
+  /** Skip `StrictMode` (e.g. for libraries that double-render badly). */
+  strict?: boolean
+}
+
+/**
+ * One-call entry for a standalone page: resolves the container (element or id),
+ * mounts the canvas inside `CanvasMantineRoot`, and returns the React root so callers
+ * can `unmount()` later.
+ */
+export function mountCanvas(
+  container: HTMLElement | string,
+  canvas: ReactNode,
+  options: MountCanvasOptions = {},
+): Root {
+  const { defaultColorScheme = 'auto', strict = true } = options
+  const element =
+    typeof container === 'string'
+      ? document.getElementById(container)
+      : container
+  if (!element) {
+    throw new Error(
+      `mountCanvas: container ${
+        typeof container === 'string' ? `#${container}` : ''
+      } not found`,
+    )
+  }
+
+  const root = createRoot(element)
+  const tree = (
+    <CanvasMantineRoot defaultColorScheme={defaultColorScheme}>
+      {canvas}
+    </CanvasMantineRoot>
+  )
+  root.render(strict ? <StrictMode>{tree}</StrictMode> : tree)
+  return root
+}

package/src/shim/__tests__/barChart.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { horizontalBarProps, withPerCategoryBarColors } from '../chart-shared'
+
+const seriesColor = (tone: string | undefined, index: number) =>
+  tone ?? `c${index}`
+
+describe('withPerCategoryBarColors', () => {
+  const rows = [
+    { category: 'a', n: 1 },
+    { category: 'b', n: 2 },
+  ]
+
+  it('colors each category of a single series', () => {
+    expect(
+      withPerCategoryBarColors(
+        rows,
+        [{ name: 'n', data: [1, 2] }],
+        seriesColor,
+      ),
+    ).toEqual([
+      { category: 'a', n: 1, color: 'c0' },
+      { category: 'b', n: 2, color: 'c1' },
+    ])
+  })
+
+  it('keeps series colors for a toned or multi-series chart', () => {
+    expect(
+      withPerCategoryBarColors(
+        rows,
+        [{ name: 'n', data: [1, 2], tone: 'info' }],
+        seriesColor,
+      ),
+    ).toBe(rows)
+    expect(
+      withPerCategoryBarColors(
+        rows,
+        [
+          { name: 'n', data: [1, 2] },
+          { name: 'm', data: [3, 4] },
+        ],
+        seriesColor,
+      ),
+    ).toBe(rows)
+  })
+})
+
+describe('horizontalBarProps', () => {
+  it('draws only the value-axis grid', () => {
+    expect(horizontalBarProps().gridAxis).toBe('y')
+  })
+
+  it('widens the category axis with extra.categoryAxis.width', () => {
+    expect(horizontalBarProps().yAxisProps.width).toBe(96)
+    expect(horizontalBarProps(200).yAxisProps.width).toBe(200)
+  })
+
+  it('leaves room for value labels past the bar end', () => {
+    expect(horizontalBarProps(96, false).barChartProps.margin.right).toBe(32)
+    expect(horizontalBarProps(96, true).barChartProps.margin.right).toBe(48)
+  })
+})

package/src/shim/__tests__/canvas.smoke.test.tsx

@@ -0,0 +1,209 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+import DemoCanvas from '../../../.cursor/canvases/demo.canvas'
+import { renderWithProvider } from '../../test/render'
+
+// useCanvasState persists the active tab to localStorage; clear it so each test
+// starts from the canvas's default tab ('charts').
+beforeEach(() => localStorage.clear())
+
+describe('DemoCanvas showcase', () => {
+  it('renders the header theme toggle and repo link', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(
+      screen.getByRole('heading', { name: 'Cursor Canvas SDK showcase' }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('link', { name: /^(Dark mode|Light mode)$/ }),
+    ).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'open-canvas' })).toBeInTheDocument()
+  })
+
+  it('renders every section heading', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    for (const title of [
+      'How it works',
+      'Charts, tables & context',
+      'Chart guides & axes',
+      'Graph layout (computeDAGLayout)',
+      'Diff',
+      'Disclosure & tasks',
+      'Typography & theme',
+      'Host brand (Cursor vs Grok)',
+      'Forms (state persists via useCanvasState)',
+      'Data imports (JSON, YAML, TSV, CSV, JSONL)',
+    ]) {
+      expect(screen.getByRole('heading', { name: title })).toBeInTheDocument()
+    }
+  })
+
+  it('renders the "How it works" steps and the Stat cards', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    // Step titles ('Deploy' also names the form button), so match each unique
+    // step description instead.
+    for (const step of [
+      'Write a .canvas.tsx that imports only cursor/canvas.',
+      'Vite + tsconfig redirect cursor/canvas at build time.',
+      'Mantine implements the same API, props, and tones.',
+    ]) {
+      expect(screen.getByText(step)).toBeInTheDocument()
+    }
+    for (const stat of [
+      'Components',
+      'Hooks',
+      'Source of truth',
+    ]) {
+      expect(screen.getByText(stat)).toBeInTheDocument()
+    }
+  })
+
+  it('shows charts and callouts on the default tab', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    // Chart bodies mount in jsdom once ResizeObserver reports layout size.
+    expect(screen.getByText('Latency (ms)')).toBeInTheDocument()
+    expect(screen.getByText('Requests by source')).toBeInTheDocument()
+    expect(screen.getByText('Test outcomes (pie)')).toBeInTheDocument()
+    expect(screen.getByText('Test outcomes (donut)')).toBeInTheDocument()
+    expect(screen.getAllByText(/75%/).length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText(/9\.9%/).length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText('Total').length).toBeGreaterThanOrEqual(1)
+    // Callout tones.
+    expect(screen.getByText('Deployed')).toBeInTheDocument()
+    expect(screen.getByText('1 service degraded.')).toBeInTheDocument()
+    expect(
+      screen.getByText('Contract tests track the IDE SDK snapshot.'),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText('Neutral callout for secondary notices.'),
+    ).toBeInTheDocument()
+  })
+
+  it('renders chart guide section headers (axis, SLO, normalized, horizontal)', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(
+      screen.getByText('Uptime % (SLO line, fill, tight axis)'),
+    ).toBeInTheDocument()
+    expect(screen.getByText('Traffic share (normalized)')).toBeInTheDocument()
+    expect(
+      screen.getByText('Lane depth (horizontal, long labels)'),
+    ).toBeInTheDocument()
+    expect(screen.getByText('Grouped bars + budget line')).toBeInTheDocument()
+    expect(screen.getByText('Dual series, filled area')).toBeInTheDocument()
+    expect(screen.getByText('Weekly volume')).toBeInTheDocument()
+    // Reference-line labels render in real layout (Playwright), not jsdom charts.
+  })
+
+  it('reveals the data Table when the "table" tab is selected', () => {
+    renderWithProvider(<DemoCanvas />)
+    fireEvent.click(screen.getByText('table'))
+
+    for (const header of ['Service', 'Status', 'RPS']) {
+      expect(screen.getByText(header)).toBeInTheDocument()
+    }
+    for (const service of ['api-gateway', 'workers', 'billing']) {
+      expect(screen.getByText(service)).toBeInTheDocument()
+    }
+  })
+
+  it('reveals the UsageBar and Swatch legend on the "context" tab', () => {
+    renderWithProvider(<DemoCanvas />)
+    fireEvent.click(screen.getByText('context'))
+
+    expect(screen.getByText('64% full')).toBeInTheDocument()
+    expect(screen.getByText('76.8K / 120K tokens')).toBeInTheDocument()
+    for (const legend of ['tools', 'rules', 'conversation', 'skills']) {
+      expect(screen.getByText(legend)).toBeInTheDocument()
+    }
+  })
+
+  it('renders the DAG graph from computeDAGLayout', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(
+      screen.getByRole('img', { name: 'Agent loop graph' }),
+    ).toBeInTheDocument()
+  })
+
+  it('renders the DiffView body and DiffStats', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(
+      screen.getByText('export default function Showcase() {'),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText('export default function Demo() {'),
+    ).toBeInTheDocument()
+    expect(screen.getByText('+1')).toBeInTheDocument()
+    expect(screen.getByText('-1')).toBeInTheDocument()
+  })
+
+  it('renders the CollapsibleSections and both todo lists', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(screen.getByText('Tools')).toBeInTheDocument()
+    expect(screen.getByText('Grep')).toBeInTheDocument()
+    // The same todos feed both TodoListCard and the selectable TodoList.
+    expect(
+      screen.getAllByText('Scaffold Vite + shim alias').length,
+    ).toBeGreaterThanOrEqual(2)
+    expect(screen.getByText('Selected: 3')).toBeInTheDocument()
+  })
+
+  it('renders the typography samples', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(
+      screen.getByRole('heading', { name: 'Heading level 3' }),
+    ).toBeInTheDocument()
+    expect(screen.getByText('Semibold emphasis.')).toBeInTheDocument()
+    expect(screen.getByText('Italic remark.')).toBeInTheDocument()
+    expect(screen.getByText('deleted')).toBeInTheDocument()
+    expect(screen.getByText('renamed')).toBeInTheDocument()
+    expect(
+      screen.getByText('Quaternary — footnotes and source lines.'),
+    ).toBeInTheDocument()
+  })
+
+  it('renders the form controls wired to useCanvasState', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(screen.getByText('Environment snapshot')).toBeInTheDocument()
+    for (const field of ['Environment', 'Filter', 'Release note']) {
+      expect(screen.getByText(field)).toBeInTheDocument()
+    }
+    expect(screen.getByPlaceholderText('service name…')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('What changed…')).toBeInTheDocument()
+    expect(screen.getByLabelText('Verbose logging')).toBeInTheDocument()
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+    for (const button of ['Reset', 'Preview', 'Deploy']) {
+      expect(screen.getByRole('button', { name: button })).toBeInTheDocument()
+    }
+  })
+
+  it('renders the theme tokens and footer link', () => {
+    renderWithProvider(<DemoCanvas />)
+
+    expect(screen.getByText('Theme tokens (useHostTheme)')).toBeInTheDocument()
+    expect(screen.getByText(/brand: cursor/)).toBeInTheDocument()
+    for (const key of [
+      'text.primary',
+      'text.secondary',
+      'text.tertiary',
+      'text.quaternary',
+      'chart.accent',
+      'chart.link',
+      'chart.strokePrimary',
+      'category.orange',
+    ]) {
+      expect(screen.getByText(key)).toBeInTheDocument()
+    }
+    expect(
+      screen.getByRole('link', { name: 'open-canvas' }),
+    ).toBeInTheDocument()
+  })
+})

package/src/shim/__tests__/category-theme.test.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react'
+import { Swatch, UsageBar, useHostTheme } from 'cursor/canvas'
+import type { ReactNode } from 'react'
+import { describe, expect, it } from 'vitest'
+import { renderWithProvider } from '../../test/render'
+import { CanvasMantineRoot } from '../canvas-mantine-root'
+
+function schemeWrapper(scheme: 'light' | 'dark') {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <CanvasMantineRoot defaultColorScheme={scheme}>
+        {children}
+      </CanvasMantineRoot>
+    )
+  }
+}
+
+describe('category colors on host theme', () => {
+  it('exposes category on the host theme root and under tokens', () => {
+    const { result } = renderHook(() => useHostTheme(), {
+      wrapper: schemeWrapper('dark'),
+    })
+    const theme = result.current
+    expect(Object.keys(theme)).toContain('category')
+    expect(theme.tokens.category).toBe(theme.category)
+    expect(theme.category.gray).toBe(theme.text.tertiary)
+  })
+
+  it('Swatch gray follows the active color scheme', () => {
+    const darkBg = renderWithProvider(<Swatch color="gray" />, 'dark')
+      .container.querySelector('span')?.style.background
+    const lightBg = renderWithProvider(<Swatch color="gray" />, 'light')
+      .container.querySelector('span')?.style.background
+    expect(darkBg).toBeTruthy()
+    expect(lightBg).toBeTruthy()
+    expect(darkBg).not.toBe(lightBg)
+  })
+
+  it('UsageBar segment matches Swatch for the same hue', () => {
+    const { container } = renderWithProvider(
+      <>
+        <Swatch color="purple" />
+        <UsageBar
+          total={1}
+          segments={[{ id: 'a', value: 1, color: 'purple' }]}
+        />
+      </>,
+    )
+    const swatchBg = container.querySelector('span')?.style.background
+    const segment = Array.from(
+      container.querySelectorAll<HTMLElement>('div'),
+    ).find(
+      el => el.style.borderRadius === '3px' && el.style.width === '100%',
+    )?.style.background
+    expect(swatchBg).toBeTruthy()
+    expect(segment).toBe(swatchBg)
+  })
+})

package/src/shim/__tests__/dag.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import { computeDAGLayout } from 'cursor/canvas'
+
+describe('computeDAGLayout', () => {
+  it('ranks a linear chain by longest path', () => {
+    const layout = computeDAGLayout({
+      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
+      edges: [
+        { from: 'a', to: 'b' },
+        { from: 'b', to: 'c' },
+      ],
+    })
+    const rankOf = (id: string) => layout.nodes.find(n => n.id === id)?.rank
+
+    expect(rankOf('a')).toBe(0)
+    expect(rankOf('b')).toBe(1)
+    expect(rankOf('c')).toBe(2)
+    expect(layout.width).toBeGreaterThan(0)
+    expect(layout.height).toBeGreaterThan(0)
+    expect(layout.edges.every(e => !e.isBackEdge)).toBe(true)
+  })
+
+  it('detects a back-edge in a cycle and excludes it from ranking', () => {
+    const layout = computeDAGLayout({
+      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
+      edges: [
+        { from: 'a', to: 'b' },
+        { from: 'b', to: 'c' },
+        { from: 'c', to: 'a' },
+      ],
+    })
+
+    const back = layout.edges.find(e => e.from === 'c' && e.to === 'a')
+    expect(back?.isBackEdge).toBe(true)
+    expect(layout.edges.filter(e => e.isBackEdge)).toHaveLength(1)
+    // Ranking still proceeds over the remaining DAG.
+    expect(layout.nodes.find(n => n.id === 'c')?.rank).toBe(2)
+  })
+
+  it('lays out horizontally when requested', () => {
+    const layout = computeDAGLayout({
+      nodes: [{ id: 'a' }, { id: 'b' }],
+      edges: [{ from: 'a', to: 'b' }],
+      direction: 'horizontal',
+    })
+    expect(layout.direction).toBe('horizontal')
+    expect(layout.width).toBeGreaterThan(layout.height)
+  })
+})

package/src/shim/__tests__/host-tokens.test.ts

@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { applyPrimaryColor, buildHostTokens, canvasPaletteDark, canvasPaletteGrokDark, canvasPaletteLight, categoryPaletteDark, categoryPaletteLight, chartThemeForBrand, colorPalette, parseCanvasHostThemeBrand, resolveThemeForColorScheme, type Color } from '../host-tokens'
+
+const CATEGORY_HUES: readonly Color[] = [
+  'gray',
+  'purple',
+  'green',
+  'yellow',
+  'cyan',
+  'pink',
+  'blue',
+  'orange',
+  'red',
+]
+
+describe('host-tokens', () => {
+  afterEach(() => {
+    delete (window as Window & { __cursorCanvas?: unknown }).__cursorCanvas
+  })
+
+  it('parseCanvasHostThemeBrand defaults unknown to cursor', () => {
+    expect(parseCanvasHostThemeBrand('grok')).toBe('grok')
+    expect(parseCanvasHostThemeBrand('sand')).toBe('cursor')
+    expect(parseCanvasHostThemeBrand(undefined)).toBe('cursor')
+  })
+
+  it('buildHostTokens keeps Grok inks when primary is sent', () => {
+    const { palette, brand } = buildHostTokens('dark', {
+      brand: 'grok',
+      primary: '#ff00ff',
+    })
+    expect(brand).toBe('grok')
+    expect(palette.buttonForeground).toBe(canvasPaletteGrokDark.buttonForeground)
+    expect(palette.accent).toBe(canvasPaletteGrokDark.accent)
+  })
+
+  it('buildHostTokens applies primary overlay for cursor brand', () => {
+    const { palette } = buildHostTokens('dark', {
+      brand: 'cursor',
+      primary: '#ff6600',
+    })
+    expect(palette.accent).toBe('#ff6600')
+    expect(palette.buttonBackground).toBe('#ff6600')
+  })
+
+  it('chartThemeForBrand returns Grok chart colors', () => {
+    const grok = chartThemeForBrand('grok')
+    const cursor = chartThemeForBrand('cursor')
+    expect(grok.palette.blue).toBe('#1084FEE0')
+    expect(cursor.palette.blue).toBe('#2E79B5E0')
+    expect(grok.sequence[0]).not.toBe(cursor.sequence[0])
+  })
+
+  it('resolveTheme reads IDE bridge brand', () => {
+    (window as Window & { __cursorCanvas?: { state: { theme: object } } })
+      .__cursorCanvas = {
+        state: {
+          theme: { kind: 'dark', brand: 'grok' },
+        },
+      }
+    const theme = resolveThemeForColorScheme('dark')
+    expect(theme.brand).toBe('grok')
+    expect(theme.chart.palette.blue).toBe('#1084FEE0')
+    expect(theme.radius.md).toBe(8)
+    expect(theme.typography.fontFamily).toContain('ui-sans-serif')
+  })
+
+  it('applyPrimaryColor ignores invalid hex', () => {
+    const base = buildHostTokens('dark', {}).palette
+    expect(applyPrimaryColor(base, 'not-a-color')).toBe(base)
+  })
+
+  describe('category palette', () => {
+    it('uses foregroundTertiary for gray on static exports', () => {
+      expect(categoryPaletteDark.gray).toBe(
+        canvasPaletteDark.foregroundTertiary,
+      )
+      expect(categoryPaletteLight.gray).toBe(
+        canvasPaletteLight.foregroundTertiary,
+      )
+      expect(categoryPaletteDark.gray).not.toBe(categoryPaletteLight.gray)
+    })
+
+    it('keeps colorPalette as the dark table alias', () => {
+      expect(colorPalette).toBe(categoryPaletteDark)
+    })
+
+    it.each(CATEGORY_HUES)(
+      'buildHostTokens resolves category.%s in dark and light',
+      (hue) => {
+        const dark = buildHostTokens('dark', {}).tokens.category[hue]
+        const light = buildHostTokens('light', {}).tokens.category[hue]
+        expect(dark).toMatch(/^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/)
+        expect(light).toMatch(/^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/)
+      },
+    )
+
+    it('recomputes category gray after workbench foreground override', () => {
+      const { tokens } = buildHostTokens('dark', {
+        editorForeground: '#aabbcc',
+      })
+      expect(tokens.category.gray).toBe('#aabbcc')
+      expect(tokens.text.tertiary).toBe(tokens.category.gray)
+    })
+  })
+})

package/src/shim/__tests__/lineChart.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import type { ChartSeries } from 'cursor/canvas'
+import { reshapeLineChartData } from '../chart-shared'
+
+describe('reshapeLineChartData', () => {
+  it('reshapes parallel categories + series into row objects', () => {
+    const categories = ['Mon', 'Tue', 'Wed']
+    const series: ChartSeries[] = [
+      { name: 'Current', data: [10, 20, 30], tone: 'info' },
+      { name: 'Previous', data: [5, 15, 25], tone: 'neutral' },
+    ]
+
+    expect(reshapeLineChartData(categories, series)).toEqual([
+      { category: 'Mon', Current: 10, Previous: 5 },
+      { category: 'Tue', Current: 20, Previous: 15 },
+      { category: 'Wed', Current: 30, Previous: 25 },
+    ])
+  })
+
+  it('fills missing data points with 0', () => {
+    const rows = reshapeLineChartData(['a', 'b'], [{ name: 'S', data: [7] }])
+
+    expect(rows).toEqual([
+      { category: 'a', S: 7 },
+      { category: 'b', S: 0 },
+    ])
+  })
+})