@flesler/cursor-canvas-web 0.0.0-stage → 1.0.0

package/dist/shim/theme.d.ts

@@ -0,0 +1,319 @@
+/**
+ * Design tokens + tone mappings for the shim.
+ *
+ * Mirrors the real `cursor/canvas` token surface (`canvasPaletteDark/Light`,
+ * `canvasTokens`, `colorPalette`, `usageColorSequence`, `Color`) so canvases
+ * that read tokens via `useHostTheme()` or import the palettes work unchanged.
+ * Values are aligned with the Cursor dark/light themes from the SDK.
+ */
+export declare const canvasPaletteDark: {
+    readonly foreground: "#E4E4E4EB";
+    readonly foregroundSecondary: "#E4E4E48D";
+    readonly foregroundTertiary: "#E4E4E45E";
+    readonly foregroundQuaternary: "#E4E4E442";
+    readonly editor: "#181818";
+    readonly chrome: "#141414";
+    readonly sidebar: "#141414";
+    readonly elevated: "#181818";
+    readonly fillPrimary: "#E4E4E430";
+    readonly fillSecondary: "#E4E4E41E";
+    readonly fillTertiary: "#E4E4E411";
+    readonly fillQuaternary: "#E4E4E40A";
+    readonly strokePrimary: "#E4E4E433";
+    readonly strokeSecondary: "#E4E4E41F";
+    readonly strokeTertiary: "#E4E4E414";
+    readonly strokeFocused: "#599CE7";
+    readonly accent: "#599CE7";
+    readonly buttonBackground: "#599CE7";
+    readonly buttonForeground: "#191c22";
+    readonly buttonHoverBackground: "#6AABE9";
+    readonly link: "#87c3ff";
+    readonly diffInsertedLine: "#3FA26633";
+    readonly diffRemovedLine: "#B8004933";
+    readonly diffStripAdded: "#3FA2668F";
+    readonly diffStripRemoved: "#FC6B838F";
+};
+export declare const canvasPaletteLight: {
+    readonly foreground: "#141414F0";
+    readonly foregroundSecondary: "#141414BD";
+    readonly foregroundTertiary: "#1414148A";
+    readonly foregroundQuaternary: "#1414145C";
+    readonly editor: "#FCFCFC";
+    readonly chrome: "#F8F8F8";
+    readonly sidebar: "#F3F3F3";
+    readonly elevated: "#FCFCFC";
+    readonly fillPrimary: "#14141433";
+    readonly fillSecondary: "#14141424";
+    readonly fillTertiary: "#14141414";
+    readonly fillQuaternary: "#1414140F";
+    readonly strokePrimary: "#14141433";
+    readonly strokeSecondary: "#1414141F";
+    readonly strokeTertiary: "#14141414";
+    readonly strokeFocused: "#3685BF";
+    readonly accent: "#3685BF";
+    readonly buttonBackground: "#3685BF";
+    readonly buttonForeground: "#FCFCFC";
+    readonly buttonHoverBackground: "#2E76AB";
+    readonly link: "#3685BF";
+    readonly diffInsertedLine: "#1F8A651F";
+    readonly diffRemovedLine: "#CF2D5614";
+    readonly diffStripAdded: "#1F8A65CC";
+    readonly diffStripRemoved: "#CF2D56CC";
+};
+export interface CanvasPalette {
+    readonly foreground: string;
+    readonly foregroundSecondary: string;
+    readonly foregroundTertiary: string;
+    readonly foregroundQuaternary: string;
+    readonly editor: string;
+    readonly chrome: string;
+    readonly sidebar: string;
+    readonly elevated: string;
+    readonly fillPrimary: string;
+    readonly fillSecondary: string;
+    readonly fillTertiary: string;
+    readonly fillQuaternary: string;
+    readonly strokePrimary: string;
+    readonly strokeSecondary: string;
+    readonly strokeTertiary: string;
+    readonly strokeFocused: string;
+    readonly accent: string;
+    readonly buttonBackground: string;
+    readonly buttonForeground: string;
+    readonly buttonHoverBackground: string;
+    readonly link: string;
+    readonly diffInsertedLine: string;
+    readonly diffRemovedLine: string;
+    readonly diffStripAdded: string;
+    readonly diffStripRemoved: string;
+}
+export type Color = 'gray' | 'purple' | 'green' | 'yellow' | 'cyan' | 'pink' | 'blue' | 'orange' | 'red';
+export type CategoryPalette = Readonly<Record<Color, string>>;
+export declare const categoryPaletteDark: CategoryPalette;
+export declare const categoryPaletteLight: CategoryPalette;
+declare function buildTokens(palette: CanvasPalette, category: CategoryPalette): {
+    bg: {
+        editor: string;
+        chrome: string;
+        elevated: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        link: string;
+        onAccent: string;
+    };
+    stroke: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        focused: string;
+    };
+    fill: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
+    accent: {
+        primary: string;
+        control: string;
+        controlHover: string;
+    };
+    diff: {
+        insertedLine: string;
+        removedLine: string;
+        stripAdded: string;
+        stripRemoved: string;
+    };
+    category: Readonly<Record<Color, string>>;
+};
+export type CanvasTokens = ReturnType<typeof buildTokens>;
+export declare const canvasTokens: {
+    bg: {
+        editor: string;
+        chrome: string;
+        elevated: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        link: string;
+        onAccent: string;
+    };
+    stroke: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        focused: string;
+    };
+    fill: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
+    accent: {
+        primary: string;
+        control: string;
+        controlHover: string;
+    };
+    diff: {
+        insertedLine: string;
+        removedLine: string;
+        stripAdded: string;
+        stripRemoved: string;
+    };
+    category: Readonly<Record<Color, string>>;
+};
+export declare const canvasTokensLight: {
+    bg: {
+        editor: string;
+        chrome: string;
+        elevated: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        link: string;
+        onAccent: string;
+    };
+    stroke: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        focused: string;
+    };
+    fill: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
+    accent: {
+        primary: string;
+        control: string;
+        controlHover: string;
+    };
+    diff: {
+        insertedLine: string;
+        removedLine: string;
+        stripAdded: string;
+        stripRemoved: string;
+    };
+    category: Readonly<Record<Color, string>>;
+};
+/** Legacy name; prefer `useHostTheme().category`. */
+export declare const colorPalette: Readonly<Record<Color, string>>;
+/** Auto-color rotation for `UsageBar` segments without an explicit color. */
+export declare const usageColorSequence: readonly Color[];
+/** Chart palette keys (IDE `canvas-tokens.d.ts` — not re-exported from SDK `index.d.ts`). */
+export declare const chartPalette: {
+    readonly green: "#1F8A65E8";
+    readonly darkGreen: "#0D855AE0";
+    readonly lightGreen: "#52B896E0";
+    readonly mintGreen: "#7DCAB0E0";
+    readonly blue: "#2E79B5E0";
+    readonly lightBlue: "#70B0D8E0";
+    readonly indigo: "#5A6CC0F0";
+    readonly lightIndigo: "#9AAADCE0";
+    readonly purple: "#7B64B8F0";
+    readonly lightPurple: "#AA98D8E0";
+    readonly warmPink: "#C85898E0";
+    readonly lightPink: "#E8A0C4E0";
+    readonly brightOrange: "#F0A040E0";
+    readonly deepOrange: "#C06028E0";
+    readonly goldenYellow: "#E8C030E0";
+    readonly darkAmber: "#C04848E0";
+    readonly warmPeach: "#F0A088E0";
+    readonly vibrantTeal: "#2A9A8AE0";
+    readonly muted: "#8888A8E0";
+    readonly neutralLine: "#888899D0";
+};
+export type ChartPalette = typeof chartPalette;
+/** Typography / spacing / radius from IDE `theme.d.ts` (available on `useHostTheme()`). */
+export declare const canvasTypography: {
+    readonly h1: {
+        readonly fontSize: "24px";
+        readonly lineHeight: "30px";
+        readonly fontWeight: 590;
+    };
+    readonly h2: {
+        readonly fontSize: "18px";
+        readonly lineHeight: "24px";
+        readonly fontWeight: 590;
+    };
+    readonly h3: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "22px";
+        readonly fontWeight: 590;
+    };
+    readonly body: {
+        readonly fontSize: "14px";
+        readonly lineHeight: "20px";
+        readonly fontWeight: 400;
+    };
+    readonly small: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "16px";
+        readonly fontWeight: 400;
+    };
+};
+export declare const canvasSpacing: {
+    readonly '0.5': 2;
+    readonly '1': 4;
+    readonly '1.5': 6;
+    readonly '2': 8;
+    readonly '2.5': 10;
+    readonly '3': 12;
+    readonly '3.5': 14;
+    readonly '4': 16;
+    readonly '4.5': 18;
+    readonly '5': 20;
+    readonly '6': 24;
+    readonly '7': 28;
+    readonly '8': 32;
+    readonly '9': 36;
+    readonly '10': 40;
+};
+export declare const canvasRadius: {
+    readonly none: 0;
+    readonly xs: 2;
+    readonly sm: 4;
+    readonly md: 6;
+    readonly lg: 8;
+    readonly xl: 12;
+    readonly full: 9999;
+};
+/** Ordered hues for automatic chart-series coloring. */
+export declare const chartColorSequence: readonly string[];
+/**
+ * Maps every semantic tone literal used across primitives to a hex color, so
+ * a `Stat tone="success"` and a `ChartSeries tone="success"` match.
+ */
+export declare const toneHex: Record<string, string>;
+/** Maps a semantic tone to a Mantine color name (for components that use it). */
+export declare const toneColor: Record<string, string>;
+/** Host theme returned by `useHostTheme()`. Extends the token groups. */
+export interface CanvasHostTheme extends CanvasTokens {
+    readonly kind: string;
+    readonly tokens: CanvasTokens;
+    readonly palette: CanvasPalette;
+    readonly category: CategoryPalette;
+    /** Used by some IDE canvases for custom SVG; see COMPAT.md. */
+    readonly chart: {
+        readonly palette: ChartPalette;
+        readonly sequence: readonly string[];
+    };
+    readonly radius: typeof canvasRadius;
+    readonly typography: typeof canvasTypography;
+    readonly spacing: typeof canvasSpacing;
+}
+export declare function buildHostTheme(kind: 'light' | 'dark'): CanvasHostTheme;
+export {};

package/dist/shim/todo.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+export type TodoStatus = 'pending' | 'in_progress' | 'completed' | 'cancelled';
+export interface TodoItem {
+    readonly id: string;
+    readonly content: string;
+    readonly status: TodoStatus;
+}
+export type TodoListProps = {
+    todos: readonly TodoItem[];
+    dimmedTodoIds?: ReadonlySet<string>;
+    onTodoClick?: (todo: TodoItem) => void;
+    style?: CSSProperties;
+};
+export declare function TodoList({ todos, dimmedTodoIds, onTodoClick, style, }: TodoListProps): import("react").JSX.Element | null;
+export type TodoListCardProps = {
+    todos: readonly TodoItem[];
+    dimmedTodoIds?: ReadonlySet<string>;
+    defaultExpanded?: boolean;
+    onTodoClick?: (todo: TodoItem) => void;
+    style?: CSSProperties;
+};
+export declare function TodoListCard({ todos, dimmedTodoIds, defaultExpanded, onTodoClick, style, }: TodoListCardProps): import("react").JSX.Element | null;

package/dist/shim/use-tokens.d.ts

@@ -0,0 +1,6 @@
+import { CanvasHostTheme } from './theme';
+/**
+ * Returns the host theme tokens for the active color scheme. Shared by the
+ * shim components and re-exported as the public `useHostTheme`.
+ */
+export declare function useHostTheme(): CanvasHostTheme;

package/package.json

@@ -1,6 +1,88 @@
 {
   "name": "@flesler/cursor-canvas-web",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "private": false,
+  "version": "1.0.0",
+  "repository": "github:flesler/cursor-canvas-web",
+  "type": "module",
+  "description": "Deploy your Cursor canvases to the web.",
+  "license": "MIT",
+  "keywords": [
+    "cursor",
+    "canvas",
+    "mantine",
+    "react",
+    "shim"
+  ],
+  "packageManager": "pnpm@11.5.2",
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/cursor-canvas.cjs",
+  "module": "./dist/cursor-canvas.js",
+  "types": "./dist/shim/cursor-canvas.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/shim/cursor-canvas.d.ts",
+      "import": "./dist/cursor-canvas.js",
+      "require": "./dist/cursor-canvas.cjs"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime.js",
+      "require": "./dist/runtime.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "sync:sdk": "bash scripts/sync-cursor-sdk-snapshot.sh",
+    "check:sdk-exports": "node scripts/diff-sdk-exports.mjs",
+    "test:contract": "pnpm run build:lib && pnpm run sync:sdk && node scripts/generate-contract-consumer.mjs && pnpm run check:sdk-exports && pnpm exec tsc -p test/contract/tsconfig.json",
+    "prepublishOnly": "pnpm typecheck && pnpm test && pnpm build:lib"
+  },
+  "peerDependencies": {
+    "@mantine/charts": "^8.3.0",
+    "@mantine/core": "^8.3.0",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
+    "recharts": "^2.15.0 || ^3.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.20.0",
+    "@mantine/charts": "^8.3.1",
+    "@mantine/core": "^8.3.1",
+    "@mantine/hooks": "^8.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.15.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",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.20.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.5.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^3.0.5"
+  }
+}