@flesler/cursor-canvas-web 1.0.2 → 1.1.0

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

@@ -0,0 +1,65 @@
+/**
+ * Public API for authoring `.canvas.tsx` files via `cursor/canvas`.
+ *
+ * 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
+ * constraints:
+ *
+ * - Colors from `useHostTheme()` tokens (`theme.bg.editor`, not
+ *   `theme.colors.bg.primary`). No hardcoded hex.
+ * - Literal props are component-specific: `Pill.tone` has no `"danger"`
+ *   and is ignored; `Card.variant` is only `"default"` | `"borderless"`.
+ * - No gradients, no box-shadows, no emojis as decoration.
+ * - Don't wrap every section in Card — mix open sections with cards.
+ * - 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";
+/** 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";
+/** Charts. */
+export type { BarChartProps, ChartDataPoint, ChartReferenceLine, ChartSeries, ChartTone, LineChartProps, PieChartProps, } from "./chart-primitives.js";
+export { BarChart, LineChart, PieChart } 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";
+/** DAG layout. */
+export type { DAGLayoutEdge, DAGLayoutNode, DAGLayoutOptions, DAGLayoutRank, DAGLayoutResult, } from "./dag-layout.js";
+export { computeDAGLayout } 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";
+/** 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";
+/** Host state hooks. */
+export type { CanvasAction, CanvasHostTheme, SetCanvasState } from "./hooks.js";
+export { useCanvasAction, useCanvasState, useHostTheme } from "./hooks.js";
+/** Colored category swatch (uses the shared `Color` palette). */
+export type { SwatchProps } from "./swatch.js";
+export { Swatch } 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";
+/** 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";
+/** 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";
+/** Usage bar — segmented progress meter with optional labels above. */
+export type { UsageBarProps, UsageBarSegment } from "./usage-bar.js";
+export { UsageBar } from "./usage-bar.js";

package/src/vendor/canvas-sdk/internal/canvas-action-dispatch.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Stub for IDE `hooks.d.ts` — the skills-cursor SDK snapshot omits `internal/`.
+ * Keep in sync with Cursor's dispatch action union when syncing the SDK.
+ */
+export type CanvasAction =
+  | { type: 'openAgent'; agentId: string }
+  | { type: 'newComposerChat'; userPrompt?: string }
+  | {
+      type: 'openFile';
+      path: string;
+      selection?: {
+        startLineNumber: number;
+        startColumn: number;
+        endLineNumber?: number;
+        endColumn?: number;
+      };
+    };

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

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

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

@@ -0,0 +1,39 @@
+/**
+ * Colored category swatch — a small filled rounded box. Intended for inline
+ * list/row decoration (category badges, the leading slot of
+ * `CollapsibleSection`, etc.).
+ *
+ * Pulls colors from `useHostTheme().category` so a category's swatch and its
+ * `UsageBar` segment for the same `color` stay visually coherent.
+ */
+import type { CSSProperties, JSX } from "react";
+import type { Color } from "./canvas-tokens.js";
+export type SwatchProps = {
+    /** One of the shared category hues. Matches `UsageBar` segment colors. */
+    color: Color;
+    style?: CSSProperties;
+};
+/**
+ * Filled, rounded category swatch (24px). Use as the leading visual on
+ * category rows, list items, or as the `leading` slot of a
+ * `CollapsibleSection`.
+ *
+ * Colors come from the shared `Color` palette, so a category's swatch
+ * matches its `UsageBar` segment for the same `color`.
+ *
+ * @example
+ * ```tsx
+ * // Standalone — purple "tools" swatch
+ * <Swatch color="purple" />
+ *
+ * // As the `leading` slot on a CollapsibleSection
+ * <CollapsibleSection
+ *   title="Tools"
+ *   count={4}
+ *   leading={<Swatch color="purple" />}
+ * >
+ *   <Text>Tool calls go here.</Text>
+ * </CollapsibleSection>
+ * ```
+ */
+export declare function Swatch({ color, style }: SwatchProps): JSX.Element;

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

@@ -0,0 +1,107 @@
+import type { CanvasHostThemeBrand } from "./canvas-tokens.js";
+export type { CanvasHostThemeBrand, CanvasPalette, CanvasTokens, ChartPalette, } from "./canvas-tokens.js";
+export { canvasPaletteDark, canvasPaletteGrokDark, canvasPaletteGrokLight, canvasPaletteLight, canvasTokens, canvasTokensLight, chartThemeForBrand, parseCanvasHostThemeBrand, } from "./canvas-tokens.js";
+/** Typography presets used by the built-in `cursor/canvas` components. */
+export declare const canvasTypography: {
+    readonly fontFamily: "inherit";
+    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;
+    };
+};
+/**
+ * Cursor canvases inherit the host frame's face (Geist in IDE / Inter on
+ * portal). Do not force Geist into the SDK — hosts already load it.
+ */
+export declare const canvasFontFamilyCursor: "inherit";
+/**
+ * Sand's current `--sand-font-sans` stack. Hosts apply this same stack on
+ * the frame document so `inherit` matches the token. System faces only.
+ */
+export declare const canvasFontFamilyGrok: string;
+/** Spacing scale (px). */
+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 type CanvasSpacing = typeof canvasSpacing;
+/** Border radius (px). */
+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;
+};
+export type CanvasRadius = {
+    readonly [K in keyof typeof canvasRadius]: number;
+};
+export type CanvasTypography = {
+    readonly fontFamily: string;
+    readonly h1: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontWeight: number;
+    };
+    readonly h2: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontWeight: number;
+    };
+    readonly h3: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontWeight: number;
+    };
+    readonly body: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontWeight: number;
+    };
+    readonly small: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontWeight: number;
+    };
+};
+/** Sand-grounded radii: 8 / 10 / 14 on the md / lg / xl steps. */
+export declare const canvasRadiusGrok: CanvasRadius;
+export declare const canvasTypographyGrok: CanvasTypography;
+export declare function canvasRadiusForBrand(brand: CanvasHostThemeBrand): CanvasRadius;
+export declare function canvasTypographyForBrand(brand: CanvasHostThemeBrand): CanvasTypography;

package/src/vendor/canvas-sdk/todo-list.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties, JSX } 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>;
+    /** Called when a todo row is clicked (entire row is a button). */
+    onTodoClick?: (todo: TodoItem) => void;
+    style?: CSSProperties;
+};
+/**
+ * Task list with status icons and wrapping text. Each row is a **clickable**
+ * button; use `onTodoClick` to handle selection or navigation.
+ *
+ * @example
+ * ```tsx
+ * <TodoList
+ *   todos={items}
+ *   onTodoClick={(todo) => setActiveId(todo.id)}
+ * />
+ * ```
+ */
+export declare function TodoList({ todos, dimmedTodoIds, onTodoClick, style, }: TodoListProps): JSX.Element | null;
+export type TodoListCardProps = {
+    todos: readonly TodoItem[];
+    dimmedTodoIds?: ReadonlySet<string>;
+    defaultExpanded?: boolean;
+    onTodoClick?: (todo: TodoItem) => void;
+    style?: CSSProperties;
+};
+/**
+ * Bordered, collapsible todo list with summary header (N of M Done). Compose
+ * with `onTodoClick` for row actions.
+ *
+ * @example
+ * ```tsx
+ * <TodoListCard
+ *   todos={items}
+ *   defaultExpanded
+ *   onTodoClick={(todo) => console.log(todo.id)}
+ * />
+ * ```
+ */
+export declare function TodoListCard({ todos, dimmedTodoIds, defaultExpanded, onTodoClick, style, }: TodoListCardProps): JSX.Element | null;