@flesler/cursor-canvas-web 1.1.2 → 1.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flesler/cursor-canvas-web",
   "private": false,
-  "version": "1.1.2",
+  "version": "1.2.1",
   "repository": "github:flesler/cursor-canvas-web",
   "type": "module",
   "description": "Deploy your Cursor canvases to the web.",
@@ -13,27 +13,31 @@
     "react",
     "shim"
   ],
-  "packageManager": "pnpm@11.5.2",
   "engines": {
-    "node": ">=22"
+    "node": ">=22.12.0",
+    "npm": ">=10.0.0"
   },
   "sideEffects": false,
   "files": [
     "dist",
-    "src/vendor"
+    "src/vendor",
+    "src/superset"
   ],
   "main": "./dist/cursor-canvas.cjs",
   "module": "./dist/cursor-canvas.js",
-  "types": "./src/vendor/canvas-sdk/index.d.ts",
+  "types": "./src/superset/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/vendor/canvas-sdk/index.d.ts",
+      "types": "./src/superset/index.d.ts",
       "import": "./dist/cursor-canvas.js",
       "require": "./dist/cursor-canvas.cjs"
     },
     "./canvas-sdk": {
       "types": "./src/vendor/canvas-sdk/index.d.ts"
     },
+    "./superset": {
+      "types": "./src/superset/index.d.ts"
+    },
     "./runtime": {
       "types": "./dist/runtime/index.d.ts",
       "import": "./dist/runtime.js",
@@ -46,26 +50,32 @@
     "build:lib": "vite build --config vite.lib.config.ts",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint .",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
+    "eslint": "eslint --cache --cache-strategy content",
+    "lint": "npm run eslint -- 'src/**/*.{ts,tsx}' 'scripts/**/*.ts' 'vite.config.ts' 'vite.lib.config.ts'",
+    "lint:fix": "npm run lint -- --fix",
     "test": "vitest run",
     "test:watch": "vitest",
     "sync:sdk": "bash scripts/sync-cursor-sdk-snapshot.sh",
+    "patch:vendor-paths": "tsx scripts/patch-vendor-paths.ts",
     "check:sdk-exports": "tsx scripts/diff-sdk-exports.ts --strict",
-    "test:contract": "pnpm run check:sdk-exports && tsx scripts/generate-contract-consumer.ts && tsc --noEmit && pnpm run build:lib",
-    "test:contract:fast": "pnpm run check:sdk-exports && tsx scripts/generate-contract-consumer.ts && tsc --noEmit",
+    "generate:contract-consumer": "tsx scripts/generate-contract-consumer.ts && npm run eslint -- --fix src/contract/consumer.ts",
+    "test:contract": "npm run check:sdk-exports && npm run generate:contract-consumer && tsc --noEmit && npm run build:lib",
+    "test:contract:fast": "npm run check:sdk-exports && npm run generate:contract-consumer && tsc --noEmit",
     "check:sdk-live": "tsx scripts/diff-sdk-exports.ts --strict \"${HOME}/.cursor/skills-cursor/canvas/sdk/index.d.ts\"",
-    "test:contract:strict": "pnpm run test:contract",
-    "test:contract:ci": "pnpm run test:contract",
+    "test:contract:strict": "npm run test:contract",
+    "test:contract:ci": "npm run test:contract",
     "sync:demo": "bash scripts/sync-demo-canvas.sh",
     "demo:screenshot": "bash scripts/readme-screenshot.sh",
     "test:demo-screenshots": "bash scripts/test-demo-screenshots.sh",
     "test:demo-screenshots:update": "bash scripts/test-demo-screenshots.sh --update",
     "test:render-compat": "bash scripts/test-render-compat.sh",
-    "ci:local": "pnpm typecheck && pnpm lint && pnpm test && pnpm test:contract:ci",
+    "ci:local": "npm run typecheck && npm run lint:fix && npm test && npm run test:contract:ci",
     "prepare": "[ \"$CI\" != \"true\" ] && [ -d node_modules/husky ] && husky || true",
-    "prepublishOnly": "pnpm typecheck && pnpm test && pnpm run check:sdk-exports && pnpm build:lib"
+    "prepublishOnly": "npm run typecheck && npm test && npm run check:sdk-exports && npm run build:lib"
+  },
+  "overrides": {
+    "vitest": "^4.1.11",
+    "@vitest/mocker": "^4.1.11"
   },
   "peerDependencies": {
     "@mantine/charts": "^8.3.0",
@@ -75,29 +85,33 @@
     "recharts": "^2.15.0 || ^3.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.20.0",
+    "@eslint/js": "^10.0.1",
     "@mantine/charts": "^8.3.18",
     "@mantine/core": "^8.3.18",
     "@mantine/hooks": "^8.3.18",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^22.13.1",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.68.0",
+    "@typescript-eslint/parser": "^8.68.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.20.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint": "^10.9.1",
+    "eslint-plugin-import-newlines": "^2.0.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-unused-imports": "^4.4.1",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
+    "jiti": "^2.7.0",
     "jsdom": "^26.0.0",
-    "prettier": "^3.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "recharts": "^3.10.1",
     "tsx": "^4.21.0",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.0",
     "vite": "^6.1.0",
     "vite-plugin-dts": "^5.0.2",
     "vitest": "^4.1.11"

package/src/superset/chart-extra.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Superset chart options, passed through the `extra` prop. The Cursor IDE
+ * ignores `extra`, so the same canvas renders there with SDK defaults.
+ */
+import type { YAxisProps } from 'recharts'
+
+/** Recharts `scale` shortcuts (`auto` + d3 scale names). */
+export type CanvasChartScale = NonNullable<YAxisProps['scale']>
+
+/**
+ * Recharts props forwarded to the value axis: Y on column and line charts, X on
+ * horizontal bar charts. Non-linear scales default `domain` to `[1, 'dataMax']`.
+ */
+export type CanvasChartValueAxisExtra = Pick<
+	Omit<YAxisProps, 'ref'>,
+  | 'scale'
+  | 'domain'
+  | 'type'
+  | 'allowDataOverflow'
+  | 'allowDecimals'
+  | 'tickCount'
+  | 'interval'
+  | 'padding'
+  | 'unit'
+  | 'name'
+>
+
+export type CanvasChartExtra = {
+	valueAxis?: CanvasChartValueAxisExtra
+}
+
+export type CanvasBarChartExtra = CanvasChartExtra
+
+export type CanvasLineChartExtra = CanvasChartExtra & {
+	/** Curved (`monotone`) segments; the IDE draws straight segments. */
+	smooth?: boolean;
+	/** Stack the filled areas. Requires `fill`. */
+	stacked?: boolean
+}

package/src/superset/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `cursor/canvas` typings for this shim: the vendored Cursor SDK plus superset
+ * features. Local exports below override the SDK's same-named exports.
+ *
+ * Superset props on SDK components go under `extra`, which the IDE ignores.
+ */
+import type { JSX } from 'react'
+import type { BarChartProps as SdkBarChartProps, LineChartProps as SdkLineChartProps } from '../vendor/canvas-sdk/index.js'
+import type { CanvasBarChartExtra, CanvasLineChartExtra } from './chart-extra.js'
+
+export * from '../vendor/canvas-sdk/index.js'
+export type * from './chart-extra.js'
+
+export type BarChartProps = SdkBarChartProps & {
+	extra?: CanvasBarChartExtra
+}
+
+export type LineChartProps = SdkLineChartProps & {
+	extra?: CanvasLineChartExtra;
+	/** @deprecated Use `extra.smooth`. */
+	smooth?: boolean
+}
+
+export declare function BarChart(props: BarChartProps): JSX.Element
+export declare function LineChart(props: LineChartProps): JSX.Element

package/src/vendor/canvas/SKILL.md

@@ -64,7 +64,7 @@ The trigger is **user intent**, not response shape. Ask: would the user benefit
 - A **legend** when more than one series is shown, with the exact series names from the source data.
 - The **source and time range** in a small caption (e.g. "Source: Datadog · last 7 days"). If a value is a transformation (mean, p95, normalized, smoothed), say so in the label.
 
-**Component discovery:** prefer built-in `cursor/canvas` components over hand-rolled markup. The full public surface (components, hooks, prop types, tokens) is declared in `~/.cursor/skills-cursor/canvas/sdk/index.d.ts` and its sibling `.d.ts` files — read them when you need exact exports, prop shapes, or hook signatures rather than guessing. Referencing an export that does not exist is the most common runtime error.
+**Component discovery:** prefer built-in `cursor/canvas` components over hand-rolled markup. The full public surface (components, hooks, prop types, tokens) is declared in `../canvas-sdk/index.d.ts` and its sibling `.d.ts` files — read them when you need exact exports, prop shapes, or hook signatures rather than guessing. Referencing an export that does not exist is the most common runtime error.
 
 Apply the Design guidance below as you write, and complete its Pre-delivery self-check before returning the canvas.
 

package/src/vendor/canvas-sdk/index.d.ts

@@ -3,7 +3,7 @@
  *
  * Be creative with layout — use Grid, Row, cards, charts, tables, and raw SVG
  * in whatever combination serves the content. Read
- * `~/.cursor/skills-cursor/canvas/SKILL.md` for full design guidance. Key
+ * `../canvas/SKILL.md` for full design guidance. Key
  * constraints:
  *
  * - Colors from `useHostTheme()` tokens (`theme.bg.editor`, not
@@ -15,51 +15,54 @@
  * - Run that skill's Pre-delivery self-check before returning code.
  */
 /** React authoring utilities re-exported so canvases need one public import. */
-export type { CSSProperties, RefObject } from "react";
-export { useEffect, useMemo, useRef, useState } from "react";
+export { useEffect, useMemo, useRef, useState } from "react"
+export type { CSSProperties, RefObject } from "react"
 /** Shared category color palette used by `Swatch`, `UsageBar`, etc. */
-export type { CanvasHostThemeBrand, CategoryPalette, ChartPalette, Color, } from "./canvas-tokens.js";
-export { categoryPaletteDark, categoryPaletteLight, colorPalette, usageColorSequence, } from "./canvas-tokens.js";
+export { categoryPaletteDark, categoryPaletteLight, colorPalette, usageColorSequence } from "./canvas-tokens.js"
+export type { CanvasHostThemeBrand, CategoryPalette, ChartPalette, Color } from "./canvas-tokens.js"
 /** Charts. */
-export type { BarChartProps, ChartDataPoint, ChartReferenceLine, ChartSeries, ChartTone, LineChartProps, PieChartProps, } from "./chart-primitives.js";
-export { BarChart, LineChart, PieChart } from "./chart-primitives.js";
+export { BarChart, LineChart, PieChart } from "./chart-primitives.js"
+export type { BarChartProps, ChartDataPoint, ChartReferenceLine, ChartSeries, ChartTone, LineChartProps, PieChartProps } from "./chart-primitives.js"
 /** Borderless collapsible disclosure row with a structured header. */
-export type { CollapsibleSectionProps } from "./collapsible-section.js";
-export { CollapsibleSection } from "./collapsible-section.js";
+export { CollapsibleSection } from "./collapsible-section.js"
+export type { CollapsibleSectionProps } from "./collapsible-section.js"
 /** DAG layout. */
-export type { DAGLayoutEdge, DAGLayoutNode, DAGLayoutOptions, DAGLayoutRank, DAGLayoutResult, } from "./dag-layout.js";
-export { computeDAGLayout } from "./dag-layout.js";
+export { computeDAGLayout } from "./dag-layout.js"
+export type { DAGLayoutEdge, DAGLayoutNode, DAGLayoutOptions, DAGLayoutRank, DAGLayoutResult } from "./dag-layout.js"
 /**
  * Diff rendering. Compose with the generic `Card` family for file-level
  * chrome: use `DiffView` inside a `CardBody` (with `padding: 0`) and put
  * `DiffStats` in the enclosing `CardHeader`'s `trailing` slot.
  */
-export type { DiffLineData, DiffLineType, DiffStatsProps, DiffViewProps } from "./diff-view.js";
-export { DiffStats, DiffView } from "./diff-view.js";
+export { DiffStats, DiffView } from "./diff-view.js"
+export type { DiffLineData, DiffLineType, DiffStatsProps, DiffViewProps } from "./diff-view.js"
 /** Form controls. */
-export type { CheckboxProps, IconButtonProps, SelectOption, SelectProps, TextAreaProps, TextInputProps, ToggleProps, } from "./form-primitives.js";
-export { Checkbox, IconButton, Select, TextArea, TextInput, Toggle } from "./form-primitives.js";
+export { Checkbox, IconButton, Select, TextArea, TextInput, Toggle } from "./form-primitives.js"
+export type { CheckboxProps, IconButtonProps, SelectOption, SelectProps, TextAreaProps, TextInputProps, ToggleProps } from "./form-primitives.js"
 /** Host state hooks. */
-export type { CanvasAction, CanvasHostTheme, SetCanvasState } from "./hooks.js";
-export { useCanvasAction, useCanvasState, useHostTheme } from "./hooks.js";
+export { useCanvasAction, useCanvasState, useHostTheme } from "./hooks.js"
+export type { CanvasAction, CanvasHostTheme, SetCanvasState } from "./hooks.js"
 /** Colored category swatch (uses the shared `Color` palette). */
-export type { SwatchProps } from "./swatch.js";
-export { Swatch } from "./swatch.js";
+export { Swatch } from "./swatch.js"
+export type { SwatchProps } from "./swatch.js"
 /** Semantic design tokens for custom styling. */
-export type { CanvasPalette, CanvasTokens } from "./theme.js";
-export { canvasPaletteDark, canvasPaletteGrokDark, canvasPaletteGrokLight, canvasPaletteLight, canvasTokens, canvasTokensLight, } from "./theme.js";
-export type { TodoItem, TodoListCardProps, TodoListProps, TodoStatus } from "./todo-list.js";
-export { TodoList, TodoListCard } from "./todo-list.js";
+export { canvasPaletteDark, canvasPaletteGrokDark, canvasPaletteGrokLight, canvasPaletteLight, canvasTokens, canvasTokensLight } from "./theme.js"
+export type { CanvasPalette, CanvasTokens } from "./theme.js"
+export { TodoList, TodoListCard } from "./todo-list.js"
+export type { TodoItem, TodoListCardProps, TodoListProps, TodoStatus } from "./todo-list.js"
 /** Component props types. */
-export type { ButtonProps, CalloutProps, CalloutTone, CardBodyProps, CardHeaderProps, CardProps, CardSize, CardVariant, CodeProps, DividerProps, GridProps, H1Props, H2Props, H3Props, LinkProps, PillProps, PillSize, PillTone, RowProps, StackProps, StatProps, StatTone, TableColumnAlign, TableProps, TableRowTone, TextProps, TextWeight, } from "./ui-primitives.js";
+export type { ButtonProps, CalloutProps, CalloutTone, CardBodyProps, CardHeaderProps, CardProps, CardSize, CardVariant, CodeProps, DividerProps, GridProps, H1Props, H2Props, H3Props, LinkProps, PillProps, PillSize, PillTone, RowProps, StackProps, StatProps, StatTone, TableColumnAlign, TableProps, TableRowTone, TextProps, TextWeight } from "./ui-primitives.js"
 /** Layout. */
 /** Typography. */
 /** Surfaces. */
 /** Actions. */
 /** Feedback. */
-export { Button, Callout, Card, CardBody, CardHeader, Code, Divider, Grid, H1, H2, H3, Link, 
-/** Shallow-merge two style objects. Useful for combining tokens with overrides. */
-mergeStyle, Pill, Row, Spacer, Stack, Stat, Table, Text, } from "./ui-primitives.js";
+export {
+    Button, Callout, Card, CardBody, CardHeader, Code, Divider, Grid, H1, H2, H3, Link,
+    /** Shallow-merge two style objects. Useful for combining tokens with overrides. */
+    mergeStyle, Pill, Row, Spacer, Stack, Stat, Table, Text
+} from "./ui-primitives.js"
 /** Usage bar — segmented progress meter with optional labels above. */
-export type { UsageBarProps, UsageBarSegment } from "./usage-bar.js";
-export { UsageBar } from "./usage-bar.js";
+export { UsageBar } from "./usage-bar.js"
+export type { UsageBarProps, UsageBarSegment } from "./usage-bar.js"
+

package/src/vendor/canvas-sdk/manifest.json

@@ -1,5 +1,5 @@
 {
-  "syncedAt": "2026-10-14",
+  "syncedAt": "2026-10-28",
   "sdkSource": "~/.cursor/skills-cursor/canvas/sdk",
-  "contentHash": "fa472d118abd7302800e2cd5c1009dd7fbd069f363e455ffde55c5bd6ef5d8d9"
+  "contentHash": "1f789dcd66ab671526d584b5d5e0270f5eaf2d8a503828d3b6982ff796ee0bd6"
 }