@flesler/cursor-canvas-web 1.4.0 → 1.5.0

package/src/shim/__tests__/useCanvasState.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import { useCanvasState } from 'cursor/canvas'
+
+describe('useCanvasState', () => {
+  it('returns the initial value when storage is empty', () => {
+    const { result } = renderHook(() => useCanvasState('count', 1))
+    expect(result.current[0]).toBe(1)
+  })
+
+  it('persists updates to localStorage under the canvas namespace', () => {
+    const { result } = renderHook(() => useCanvasState('count', 1))
+
+    act(() => result.current[1](42))
+
+    expect(result.current[0]).toBe(42)
+    expect(localStorage.getItem('canvas:count')).toBe('42')
+  })
+
+  it('supports functional updates', () => {
+    const { result } = renderHook(() => useCanvasState('count', 1))
+
+    act(() => result.current[1](prev => prev + 9))
+
+    expect(result.current[0]).toBe(10)
+  })
+
+  it('rehydrates a previously stored value on mount', () => {
+    localStorage.setItem('canvas:flag', JSON.stringify(true))
+
+    const { result } = renderHook(() => useCanvasState('flag', false))
+
+    expect(result.current[0]).toBe(true)
+  })
+})

package/src/shim/__tests__/useHostTheme.test.tsx

@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react'
+import { useHostTheme } from 'cursor/canvas'
+import type { ReactNode } from 'react'
+import { describe, expect, it } from 'vitest'
+import { CanvasMantineRoot } from '../canvas-mantine-root'
+
+function wrapper({ children }: { children: ReactNode }) {
+  return (
+    <CanvasMantineRoot defaultColorScheme="dark">{children}</CanvasMantineRoot>
+  )
+}
+
+describe('useHostTheme', () => {
+  it('exposes category, chart palette, fill, and kind (dark)', () => {
+    const { result } = renderHook(() => useHostTheme(), { wrapper })
+    const theme = result.current
+    expect(theme.kind).toBe('dark')
+    expect(theme.brand).toBe('cursor')
+    expect(theme.category.orange).toMatch(/^#/)
+    expect(theme.category.gray).toBe(theme.text.tertiary)
+    expect(theme.tokens.category.orange).toBe(theme.category.orange)
+    expect(theme.chart.palette.lightGreen).toBe('#52B896E0')
+    expect(theme.chart.sequence.length).toBeGreaterThan(0)
+    expect(theme.fill.secondary).toMatch(/^#/)
+    expect(theme.stroke.focused).toMatch(/^#/)
+    expect(theme.radius.md).toBe(6)
+    expect(theme.typography.body.fontSize).toBe('14px')
+  })
+
+  it('switches category table for light scheme', () => {
+    const lightWrap = ({ children }: { children: ReactNode }) => (
+      <CanvasMantineRoot defaultColorScheme="light">{children}</CanvasMantineRoot>
+    )
+    const dark = renderHook(() => useHostTheme(), { wrapper }).result.current
+    const light = renderHook(() => useHostTheme(), {
+      wrapper: lightWrap,
+    }).result.current
+    expect(light.kind).toBe('light')
+    expect(light.category.orange).toBe(light.tokens.category.orange)
+    expect(light.category.orange).not.toBe(dark.category.orange)
+    expect(light.category.gray).not.toBe(dark.category.gray)
+  })
+})

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

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { valueAxisChartProps } from '../chart-shared'
+
+describe('valueAxisChartProps', () => {
+  it('keeps the SDK zero-based domain without extra', () => {
+    expect(valueAxisChartProps({})).toEqual({
+      yAxisProps: { domain: [0, 'auto'] },
+      referenceLines: undefined,
+    })
+  })
+
+  it('merges extra.valueAxis over the SDK domain', () => {
+    const axis = valueAxisChartProps({ valueAxis: { tickCount: 3, domain: [5, 50] } })
+    expect(axis.yAxisProps).toEqual({ tickCount: 3, domain: [5, 50] })
+  })
+
+  it('defaults non-linear scales to a [1, dataMax] domain', () => {
+    const axis = valueAxisChartProps({ valueAxis: { scale: 'log' } })
+    expect(axis.yAxisProps).toEqual({
+      scale: 'log',
+      type: 'number',
+      allowDataOverflow: true,
+      allowDecimals: true,
+      domain: [1, 'dataMax'],
+    })
+  })
+
+  it('targets the X axis on horizontal bars', () => {
+    const axis = valueAxisChartProps({ horizontal: true, valueAxis: { unit: '%' } })
+    expect(axis.xAxisProps).toEqual({ domain: [0, 'auto'], unit: '%' })
+    expect(axis.yAxisProps).toBeUndefined()
+  })
+
+  it('applies extra on stacked charts, which have no SDK domain', () => {
+    expect(valueAxisChartProps({ stacked: true })).toEqual({ referenceLines: undefined })
+    const axis = valueAxisChartProps({ stacked: true, valueAxis: { tickCount: 4 } })
+    expect(axis.yAxisProps).toEqual({ tickCount: 4 })
+  })
+})

package/src/shim/bar-chart.tsx

@@ -0,0 +1,77 @@
+import { BarChart as MantineBarChart } from '@mantine/charts'
+import '@mantine/charts/styles.css'
+import type { BarChartProps } from '../superset/index'
+import { barValueLabelProps, CHART_LEGEND_PROPS, CHART_LEGEND_STYLES, defaultShowBarValues, horizontalBarProps, horizontalBarValueLabelProps, reshapeLineChartData, toMantineSeries, useChartColorProps, useSeriesColor, valueAxisChartProps, valueFormatter, verticalBarLabelProps, withPerCategoryBarColors } from './chart-shared'
+
+export function BarChart({
+  categories,
+  series,
+  height = 240,
+  stacked,
+  horizontal,
+  normalized,
+  valueSuffix,
+  valuePrefix,
+  showValues,
+  beginAtZero,
+  yMin,
+  yMax,
+  referenceLines,
+  style,
+  extra,
+}: BarChartProps) {
+  const seriesColor = useSeriesColor()
+  const chartColors = useChartColorProps()
+  const data = withPerCategoryBarColors(
+    reshapeLineChartData(categories, series),
+    series,
+    seriesColor,
+  )
+  const type = normalized ? 'percent' : stacked ? 'stacked' : 'default'
+  const axis = valueAxisChartProps({
+    beginAtZero,
+    yMin,
+    yMax,
+    referenceLines,
+    horizontal,
+    stacked,
+    normalized,
+    valueAxis: extra?.valueAxis,
+  })
+  const withBarValueLabel =
+    !stacked &&
+    !normalized &&
+    defaultShowBarValues(showValues, series, categories)
+  return (
+    <MantineBarChart
+      h={height}
+      data={data}
+      dataKey="category"
+      series={toMantineSeries(series, seriesColor)}
+      type={type}
+      orientation={horizontal ? 'vertical' : 'horizontal'}
+      withLegend={series.length > 1}
+      legendProps={CHART_LEGEND_PROPS}
+      valueFormatter={valueFormatter(valueSuffix, valuePrefix)}
+      withBarValueLabel={withBarValueLabel}
+      {...(withBarValueLabel
+        ? {
+          valueLabelProps: horizontal
+            ? horizontalBarValueLabelProps(chartColors.barLabelColor)
+            : barValueLabelProps(chartColors.barLabelColor),
+        }
+        : {})}
+      {...(horizontal
+        ? horizontalBarProps(extra?.categoryAxis?.width, withBarValueLabel)
+        : withBarValueLabel
+          ? verticalBarLabelProps()
+          : {})}
+      styles={{
+        ...CHART_LEGEND_STYLES,
+        legendItemName: { color: chartColors.textColor },
+      }}
+      {...axis}
+      style={style}
+    />
+  )
+}

package/src/shim/canvas-hooks.tsx

@@ -0,0 +1,57 @@
+import { useCallback, useState, type CSSProperties } from 'react'
+import type { CanvasAction, SetCanvasState } from '../vendor/canvas-sdk/hooks.js'
+
+export function useCanvasState<T>(
+  key: string,
+  defaultValue: T,
+): [T, SetCanvasState<T>] {
+  const storageKey = `canvas:${key}`
+
+  const [state, setState] = useState<T>(() => {
+    if (typeof localStorage === 'undefined') return defaultValue
+    try {
+      const raw = localStorage.getItem(storageKey)
+      return raw === null ? defaultValue : (JSON.parse(raw) as T)
+    } catch {
+      return defaultValue
+    }
+  })
+
+  const set = useCallback<SetCanvasState<T>>(
+    (action) => {
+      setState((prev) => {
+        const next =
+          typeof action === 'function'
+            ? (action as (prev: T) => T)(prev)
+            : action
+        try {
+          localStorage?.setItem(storageKey, JSON.stringify(next))
+        } catch {
+          // Ignore quota / unavailable storage; state still updates in memory.
+        }
+        return next
+      })
+    },
+    [storageKey],
+  )
+
+  return [state, set]
+}
+
+export function useCanvasAction(): (action: CanvasAction) => void {
+  return useCallback((action: CanvasAction) => {
+    if (import.meta.env?.DEV) {
+      console.info(
+        '[cursor/canvas shim] useCanvasAction (no-op on web):',
+        action,
+      )
+    }
+  }, [])
+}
+
+export function mergeStyle(
+  base: CSSProperties,
+  override?: CSSProperties,
+): CSSProperties {
+  return { ...base, ...override }
+}

package/src/shim/canvas-mantine-root.tsx

@@ -0,0 +1,129 @@
+import { MantineProvider, createTheme, type MantineColorScheme, type MantineColorsTuple, type MantineThemeOverride } from '@mantine/core'
+import { useMemo, useSyncExternalStore, type ReactNode } from 'react'
+import { resolveThemeForColorScheme, type ShimHostTheme } from './host-tokens'
+
+export interface CanvasMantineRootProps {
+  children: ReactNode;
+  defaultColorScheme?: MantineColorScheme
+}
+
+function solidScale(hex: string): MantineColorsTuple {
+  return [hex, hex, hex, hex, hex, hex, hex, hex, hex, hex]
+}
+
+/** Maps `useHostTheme()` / brand onto Mantine `theme` (primary, radii, headings). */
+export function createMantineThemeFromHost(host: ShimHostTheme): MantineThemeOverride {
+  const { typography: type, radius } = host
+  return createTheme({
+    primaryColor: 'accent',
+    colors: {
+      accent: solidScale(host.palette.accent),
+    },
+    fontFamily: type.fontFamily,
+    defaultRadius: `${radius.md}`,
+    radius: {
+      xs: `${radius.xs}px`,
+      sm: `${radius.sm}px`,
+      md: `${radius.md}px`,
+      lg: `${radius.lg}px`,
+      xl: `${radius.xl}px`,
+    },
+    headings: {
+      fontFamily: type.fontFamily,
+      fontWeight: String(type.h1.fontWeight),
+      sizes: {
+        h1: {
+          fontSize: type.h1.fontSize,
+          lineHeight: type.h1.lineHeight,
+          fontWeight: String(type.h1.fontWeight),
+        },
+        h2: {
+          fontSize: type.h2.fontSize,
+          lineHeight: type.h2.lineHeight,
+          fontWeight: String(type.h2.fontWeight),
+        },
+        h3: {
+          fontSize: type.h3.fontSize,
+          lineHeight: type.h3.lineHeight,
+          fontWeight: String(type.h3.fontWeight),
+        },
+        h4: {
+          fontSize: type.body.fontSize,
+          lineHeight: type.body.lineHeight,
+          fontWeight: String(type.body.fontWeight),
+        },
+      },
+    },
+  })
+}
+
+function subscribeSystemScheme(onChange: () => void): () => void {
+  const mq = window.matchMedia('(prefers-color-scheme: dark)')
+  mq.addEventListener('change', onChange)
+  return () => mq.removeEventListener('change', onChange)
+}
+
+function getSystemScheme(): 'light' | 'dark' {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+}
+
+function useResolvedPolarity(
+  defaultColorScheme: MantineColorScheme,
+): 'light' | 'dark' {
+  const system = useSyncExternalStore<'light' | 'dark'>(
+    subscribeSystemScheme,
+    getSystemScheme,
+    () => 'light',
+  )
+  if (defaultColorScheme === 'dark') {
+    return 'dark'
+  }
+  if (defaultColorScheme === 'light') {
+    return 'light'
+  }
+  return system
+}
+
+/**
+ * Mantine + canvas host tokens (brand, Grok radii/typography, accent primary).
+ * Not part of the `cursor/canvas` barrel.
+ */
+export function CanvasMantineRoot({
+  children,
+  defaultColorScheme = 'auto',
+}: CanvasMantineRootProps) {
+  const polarity = useResolvedPolarity(defaultColorScheme)
+  const host = useMemo(
+    () => resolveThemeForColorScheme(polarity),
+    [polarity],
+  )
+  const mantineTheme = useMemo(() => createMantineThemeFromHost(host), [host])
+
+  return (
+    <MantineProvider
+      theme={mantineTheme}
+      defaultColorScheme={defaultColorScheme}
+      forceColorScheme={polarity}
+    >
+      <div
+        data-cursor-canvas-host
+        style={{
+          minHeight: 'inherit',
+          background: host.bg.editor,
+          color: host.text.primary,
+          fontFamily: host.typography.fontFamily,
+        }}
+      >
+        {/* Canvas-authored responsive SVGs (e.g. DAG): IDE scales to width; do not clamp max-height. */}
+        <style>{`
+          [data-cursor-canvas-host] svg[viewBox][width='100%'] {
+            max-height: unset !important;
+          }
+        `}</style>
+        {children}
+      </div>
+    </MantineProvider>
+  )
+}

package/src/shim/chart-shared.tsx

@@ -0,0 +1,252 @@
+/**
+ * Shared chart data shaping and axis helpers (no @mantine/charts component imports).
+ */
+import type { ChartReferenceLineProps } from '@mantine/charts'
+import type { XAxisProps, YAxisProps } from 'recharts'
+import type { CanvasChartValueAxisExtra } from '../superset/chart-extra'
+import type { BarChartProps } from '../superset/index'
+import { toneHex } from './theme'
+import { useHostTheme } from './use-tokens'
+
+export type {
+  CanvasBarChartExtra,
+  CanvasChartExtra,
+  CanvasChartScale,
+  CanvasChartValueAxisExtra,
+  CanvasLineChartExtra,
+} from '../superset/chart-extra'
+export type { BarChartProps, LineChartProps } from '../superset/index'
+export type {
+  ChartDataPoint,
+  ChartReferenceLine,
+  ChartSeries,
+  ChartTone,
+  PieChartProps,
+} from '../vendor/canvas-sdk/chart-primitives.js'
+
+import type { ChartReferenceLine, ChartSeries, ChartTone } from '../vendor/canvas-sdk/chart-primitives.js'
+
+export const CHART_LEGEND_PROPS = {
+  verticalAlign: 'bottom' as const,
+  align: 'center' as const,
+}
+
+export const CHART_LEGEND_STYLES = {
+  legend: { justifyContent: 'center' },
+} as const
+
+export function useSeriesColor(): (
+  tone: ChartTone | undefined,
+  index: number,
+) => string {
+  const theme = useHostTheme()
+  const sequence = theme.chart.sequence
+  return (tone, index) =>
+    tone ? toneHex[tone] : sequence[index % sequence.length]
+}
+
+export function useChartColorProps(): { textColor: string; barLabelColor: string } {
+  const theme = useHostTheme()
+  const text = theme.text.primary
+  return { textColor: text, barLabelColor: text }
+}
+
+export function reshapeLineChartData(
+  categories: string[],
+  series: ChartSeries[],
+): Record<string, string | number>[] {
+  return categories.map((category, index) => {
+    const row: Record<string, string | number> = { category }
+    for (const s of series) {
+      row[s.name] = s.data[index] ?? 0
+    }
+    return row
+  })
+}
+
+export function toMantineSeries(
+  series: ChartSeries[],
+  seriesColor: (tone: ChartTone | undefined, index: number) => string,
+) {
+  return series.map((s, index) => ({
+    name: s.name,
+    color: seriesColor(s.tone, index),
+  }))
+}
+
+export function valueFormatter(valueSuffix?: string, valuePrefix?: string) {
+  return (value: number) => `${valuePrefix ?? ''}${value}${valueSuffix ?? ''}`
+}
+
+export function mantineReferenceLines(
+  lines: ChartReferenceLine[] | undefined,
+  horizontal: boolean,
+): ChartReferenceLineProps[] | undefined {
+  if (!lines?.length) {
+    return undefined
+  }
+  return lines.map(line => ({
+    ...(horizontal ? { x: line.value } : { y: line.value }),
+    label: line.label,
+    color: line.tone ? toneHex[line.tone] : toneHex.neutral,
+  }))
+}
+
+type ValueAxisProps = Pick<
+  BarChartProps,
+  'beginAtZero' | 'yMin' | 'yMax' | 'referenceLines'
+>
+
+type AxisChartProps = {
+  yAxisProps?: Omit<YAxisProps, 'ref'>;
+  xAxisProps?: Omit<XAxisProps, 'ref'>;
+  referenceLines?: ChartReferenceLineProps[]
+}
+
+const NON_LINEAR_SCALES = new Set(['log', 'symlog', 'pow', 'sqrt'])
+
+function normalizeValueAxisExtra(
+  valueAxis: CanvasChartValueAxisExtra,
+): CanvasChartValueAxisExtra {
+  const { scale } = valueAxis
+  if (typeof scale !== 'string' || !NON_LINEAR_SCALES.has(scale)) {
+    return valueAxis
+  }
+  return {
+    ...valueAxis,
+    type: valueAxis.type ?? 'number',
+    allowDataOverflow: valueAxis.allowDataOverflow ?? true,
+    allowDecimals: valueAxis.allowDecimals ?? true,
+    domain: valueAxis.domain ?? [1, 'dataMax'],
+  }
+}
+
+export function valueAxisChartProps(
+  opts: ValueAxisProps & {
+    horizontal?: boolean;
+    stacked?: boolean;
+    normalized?: boolean;
+    valueAxis?: CanvasChartValueAxisExtra
+  },
+): AxisChartProps {
+  const ref = mantineReferenceLines(opts.referenceLines, !!opts.horizontal)
+  let domain: [number | string, number | string] | undefined
+  if (!opts.stacked && !opts.normalized) {
+    const beginAtZero = opts.beginAtZero !== false
+    domain = [opts.yMin ?? (beginAtZero ? 0 : 'auto'), opts.yMax ?? 'auto']
+  }
+  const extra = opts.valueAxis ? normalizeValueAxisExtra(opts.valueAxis) : undefined
+  if (!domain && !extra) {
+    return { referenceLines: ref }
+  }
+  const axisProps = { ...(domain && { domain }), ...extra }
+  return opts.horizontal
+    ? { xAxisProps: axisProps as Omit<XAxisProps, 'ref'>, referenceLines: ref }
+    : { yAxisProps: axisProps, referenceLines: ref }
+}
+
+export function defaultShowBarValues(
+  showValues: boolean | undefined,
+  series: ChartSeries[],
+  categories: string[],
+): boolean {
+  if (showValues !== undefined) {
+    return showValues
+  }
+  return series.length === 1 && categories.length <= 8
+}
+
+export function withPerCategoryBarColors(
+  data: Record<string, string | number>[],
+  series: ChartSeries[],
+  seriesColor: (tone: ChartTone | undefined, index: number) => string,
+): Record<string, string | number>[] {
+  if (series.length !== 1 || series[0].tone) {
+    return data
+  }
+  return data.map((row, index) => ({
+    ...row,
+    color: seriesColor(undefined, index),
+  }))
+}
+
+const HORIZONTAL_CATEGORY_AXIS_WIDTH = 96
+const CATEGORY_LABEL_CHAR_WIDTH = 6.5
+
+function truncateCategoryAxisLabel(text: string, max: number): string {
+  if (text.length <= max) {
+    return text
+  }
+  return `${text.slice(0, Math.max(0, max - 1))}…`
+}
+
+function horizontalCategoryAxisTick(
+  labelMax: number,
+  props: {
+    x?: string | number;
+    y?: string | number;
+    payload?: { value?: string | number }
+  },
+) {
+  const x = typeof props.x === 'number' ? props.x : Number(props.x) || 0
+  const y = typeof props.y === 'number' ? props.y : Number(props.y) || 0
+  const full = String(props.payload?.value ?? '')
+  const display = truncateCategoryAxisLabel(full, labelMax)
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text
+        x={-10}
+        y={0}
+        dy={4}
+        textAnchor="end"
+        fill="currentColor"
+        fontSize={12}
+      >
+        <title>{full}</title>
+        {display}
+      </text>
+    </g>
+  )
+}
+
+function barValueLabelProps(barLabelColor: string) {
+  return {
+    fontWeight: 700,
+    fill: barLabelColor,
+  }
+}
+
+function horizontalBarValueLabelProps(barLabelColor: string) {
+  return {
+    ...barValueLabelProps(barLabelColor),
+    position: 'right' as const,
+  }
+}
+
+export function horizontalBarProps(
+  width = HORIZONTAL_CATEGORY_AXIS_WIDTH,
+  withValueLabel = false,
+) {
+  const labelMax = Math.floor(width / CATEGORY_LABEL_CHAR_WIDTH)
+  return {
+    yAxisProps: {
+      tick: (props: Parameters<typeof horizontalCategoryAxisTick>[1]) =>
+        horizontalCategoryAxisTick(labelMax, props),
+      width,
+    },
+    barChartProps: {
+      margin: { right: withValueLabel ? 48 : 32 },
+    },
+    gridAxis: 'y' as const,
+  }
+}
+
+function verticalBarLabelProps() {
+  return {
+    barChartProps: {
+      margin: { top: 22 },
+    },
+  }
+}
+
+export { barValueLabelProps, horizontalBarValueLabelProps, verticalBarLabelProps }