@flesler/cursor-canvas-web 1.5.0 → 1.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flesler/cursor-canvas-web",
   "private": false,
-  "version": "1.5.0",
+  "version": "1.5.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/flesler/cursor-canvas-web.git"

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

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { renderWithProvider } from '../../test/render'
+import { BarChart } from '../bar-chart'
+import { CHART_LEGEND_PROPS, CHART_TOOLTIP_PROPS } from '../chart-shared'
+import { LineChart } from '../line-chart'
+
+describe('chart label order', () => {
+  it('disables Recharts default legend and tooltip sorters', () => {
+    expect(CHART_LEGEND_PROPS.itemSorter).toBeNull()
+    expect(CHART_TOOLTIP_PROPS.itemSorter).toBeNull()
+  })
+
+  const series = [
+    { name: 'Off-heap reclaimed', data: [12, 18], tone: 'info' as const },
+    { name: 'Heap reclaimed', data: [58, 55], tone: 'warning' as const },
+  ]
+  const categories = ['T+5s', 'T+10s']
+  const seriesNames = series.map(s => s.name)
+
+  it.each([
+    ['LineChart', LineChart],
+    ['BarChart', BarChart],
+  ] as const)('keeps %s legend order in source series order', (_, Chart) => {
+    const { container } = renderWithProvider(
+      <Chart categories={categories} series={series} height={160} />,
+    )
+    const legend = container.querySelector('[class*="ChartLegend-legend"]')
+    expect(legend).toBeTruthy()
+    const names = legend!.querySelectorAll(
+      '[class*="ChartLegend-legendItemName"]',
+    )
+    expect([...names].map(el => el.textContent?.trim())).toEqual(seriesNames)
+  })
+})

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

@@ -32,4 +32,36 @@ describe('useCanvasState', () => {
 
     expect(result.current[0]).toBe(true)
   })
+
+  it('falls back to __canvasJsonState when localStorage throws', () => {
+    const storage = Object.getOwnPropertyDescriptor(globalThis, 'localStorage')
+    Object.defineProperty(globalThis, 'localStorage', {
+      configurable: true,
+      get() {
+        throw new DOMException('sandboxed', 'SecurityError')
+      },
+    })
+    ;(globalThis as { __canvasJsonState?: Record<string, unknown> }).__canvasJsonState = {
+      label: 'from-sidecar',
+    }
+
+    const { result } = renderHook(() => useCanvasState('label', 'default'))
+
+    expect(result.current[0]).toBe('from-sidecar')
+    delete (globalThis as { __canvasJsonState?: Record<string, unknown> }).__canvasJsonState
+    if (storage) {
+      Object.defineProperty(globalThis, 'localStorage', storage)
+    }
+  })
+
+  it('reads global __canvasJsonState when localStorage has no value', () => {
+    ;(globalThis as { __canvasJsonState?: Record<string, unknown> }).__canvasJsonState = {
+      label: 'from-sidecar',
+    }
+
+    const { result } = renderHook(() => useCanvasState('label', 'default'))
+
+    expect(result.current[0]).toBe('from-sidecar')
+    delete (globalThis as { __canvasJsonState?: Record<string, unknown> }).__canvasJsonState
+  })
 })

package/src/shim/bar-chart.tsx

@@ -1,7 +1,7 @@
 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'
+import { barValueLabelProps, CHART_LEGEND_PROPS, CHART_LEGEND_STYLES, CHART_TOOLTIP_PROPS, defaultShowBarValues, horizontalBarProps, horizontalBarValueLabelProps, reshapeLineChartData, toMantineSeries, useChartColorProps, useSeriesColor, valueAxisChartProps, valueFormatter, verticalBarLabelProps, withPerCategoryBarColors } from './chart-shared'
 
 export function BarChart({
   categories,
@@ -52,6 +52,7 @@ export function BarChart({
       orientation={horizontal ? 'vertical' : 'horizontal'}
       withLegend={series.length > 1}
       legendProps={CHART_LEGEND_PROPS}
+      tooltipProps={CHART_TOOLTIP_PROPS}
       valueFormatter={valueFormatter(valueSuffix, valuePrefix)}
       withBarValueLabel={withBarValueLabel}
       {...(withBarValueLabel

package/src/shim/canvas-hooks.tsx

@@ -8,13 +8,15 @@ export function useCanvasState<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)
+      if (raw !== null) return JSON.parse(raw) as T
     } catch {
-      return defaultValue
+      // Sandboxed, SSR, or unavailable; fall through to inlined export state.
     }
+    const inline = inlineCanvasState<T>(key)
+    if (inline !== undefined) return inline
+    return defaultValue
   })
 
   const set = useCallback<SetCanvasState<T>>(
@@ -25,7 +27,7 @@ export function useCanvasState<T>(
             ? (action as (prev: T) => T)(prev)
             : action
         try {
-          localStorage?.setItem(storageKey, JSON.stringify(next))
+          localStorage.setItem(storageKey, JSON.stringify(next))
         } catch {
           // Ignore quota / unavailable storage; state still updates in memory.
         }
@@ -55,3 +57,13 @@ export function mergeStyle(
 ): CSSProperties {
   return { ...base, ...override }
 }
+
+function inlineCanvasState<T>(key: string): T | undefined {
+  try {
+    const bag = (globalThis as { __canvasJsonState?: Record<string, unknown> }).__canvasJsonState
+    if (!bag || !Object.hasOwn(bag, key)) return undefined
+    return bag[key] as T
+  } catch {
+    return undefined
+  }
+}

package/src/shim/chart-shared.tsx

@@ -2,7 +2,7 @@
  * 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 { LegendProps, XAxisProps, YAxisProps } from 'recharts'
 import type { CanvasChartValueAxisExtra } from '../superset/chart-extra'
 import type { BarChartProps } from '../superset/index'
 import { toneHex } from './theme'
@@ -26,9 +26,16 @@ export type {
 
 import type { ChartReferenceLine, ChartSeries, ChartTone } from '../vendor/canvas-sdk/chart-primitives.js'
 
+/** Recharts 3 defaults to sorting legend rows; keep SDK `series[]` order. */
 export const CHART_LEGEND_PROPS = {
   verticalAlign: 'bottom' as const,
   align: 'center' as const,
+  itemSorter: null,
+} satisfies Pick<LegendProps, 'verticalAlign' | 'align' | 'itemSorter'>
+
+/** Same for tooltip series rows (default `itemSorter: 'name'`). `null` disables sort at runtime. */
+export const CHART_TOOLTIP_PROPS = {
+  itemSorter: null as never,
 }
 
 export const CHART_LEGEND_STYLES = {

package/src/shim/line-chart.tsx

@@ -2,7 +2,7 @@ import type { LineChartCurveType } from '@mantine/charts'
 import { AreaChart, LineChart as MantineLineChart } from '@mantine/charts'
 import '@mantine/charts/styles.css'
 import type { LineChartProps } from '../superset/index'
-import { CHART_LEGEND_PROPS, CHART_LEGEND_STYLES, reshapeLineChartData, toMantineSeries, useChartColorProps, useSeriesColor, valueAxisChartProps, valueFormatter } from './chart-shared'
+import { CHART_LEGEND_PROPS, CHART_LEGEND_STYLES, CHART_TOOLTIP_PROPS, reshapeLineChartData, toMantineSeries, useChartColorProps, useSeriesColor, valueAxisChartProps, valueFormatter } from './chart-shared'
 
 export function LineChart({
   categories,
@@ -46,7 +46,10 @@ export function LineChart({
     legendProps: CHART_LEGEND_PROPS,
     valueFormatter: valueFormatter(valueSuffix, valuePrefix),
     withPointLabels: showValues ?? categories.length <= 20,
-    tooltipProps: showHoverGuide ? undefined : { cursor: false },
+    tooltipProps: {
+      ...CHART_TOOLTIP_PROPS,
+      ...(!showHoverGuide && { cursor: false }),
+    },
     styles: {
       ...CHART_LEGEND_STYLES,
       legendItemName: { color: chartColors.textColor },