ok

skills-cursor/canvas/SKILL.md

@@ -94,13 +94,15 @@ Before returning canvas code, verify:
 
 ## Introducing the canvas
 
-When you create a canvas, add a short note in your chat response telling the user you created a canvas they can open beside the chat:
+Whenever you mention a canvas to the user — one you created, updated, or want them to open — **always** include a markdown link to that `.canvas.tsx` file using its full absolute path (for example, `[billing-review](/Users/<user>/.cursor/projects/<workspace>/canvases/billing-review.canvas.tsx)`). Use a short descriptive label as the link text; do not refer to a canvas by name or path alone without the link.
+
+When you create a canvas, add a short note in your chat response telling the user they can open it beside the chat, with that link:
 
 - **First canvas** — if no other `.canvas.tsx` files exist in the workspace's `canvases/` directory, include one sentence explaining what a canvas is.
 - **Unsolicited canvas** — if the user didn't ask for a canvas, include one sentence explaining why you chose it over plain text.
 
-Both can apply at once; one or two sentences total is enough. Skip the intro for subsequent canvases.
+Both can apply at once; one or two sentences total is enough. Skip the intro for subsequent canvases unless you are mentioning that canvas again (still link it).
 
 ## Troubleshooting
 
-If a canvas appears blank or missing, the most common cause is that it was not written under `/Users/<user>/.cursor/projects/<workspace>/canvases/` exactly — re-save it to that path. Do not debug this by trying to create the managed directory manually; focus on correcting the file path instead. Users can click the canvas file path in the response to open it, just like any other file path in Cursor. When present, the canvas server writes a `<name>.canvas.status.json` sidecar after each build with `status`, `diagnostics`, or `error` fields you can read; the file is best-effort and may not exist, so don't block on it.
+If a canvas appears blank or missing, the most common cause is that it was not written under `/Users/<user>/.cursor/projects/<workspace>/canvases/` exactly — re-save it to that path. Do not debug this by trying to create the managed directory manually; focus on correcting the file path instead. Users can click the canvas file path in the response to open it, just like any other file path in Cursor. Every canvas edit returns a `Canvas TypeScript check` line in the tool result reporting the file's current type errors (or "no errors") — treat that as the authoritative diagnostics signal.

skills-cursor/canvas/sdk/callout-tone-icons.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+type CalloutToneIconGlyph = "info" | "warning" | "circles-check" | "exclamation-circle";
+type CalloutToneForIcon = "info" | "success" | "warning" | "danger" | "neutral";
+/** Maps `Callout` tone to the same cursor icons used by `@anysphere/ui` toasts. */
+export declare const calloutToneIconGlyph: Record<Exclude<CalloutToneForIcon, "neutral">, CalloutToneIconGlyph>;
+export declare function CalloutToneIcon({ tone, color }: {
+    tone: CalloutToneForIcon;
+    color: string;
+}): JSX.Element;
+export {};
+//# sourceMappingURL=callout-tone-icons.d.ts.map

skills-cursor/canvas/sdk/canvas-tokens.d.ts

@@ -19,6 +19,7 @@ export declare const canvasPaletteDark: {
     readonly strokePrimary: "#E4E4E433";
     readonly strokeSecondary: "#E4E4E41F";
     readonly strokeTertiary: "#E4E4E414";
+    readonly strokeFocused: "#E4E4E4";
     readonly accent: "#599CE7";
     readonly buttonBackground: "#599CE7";
     readonly buttonForeground: "#191c22";
@@ -50,6 +51,7 @@ export declare const canvasPaletteLight: {
     readonly strokePrimary: "#14141433";
     readonly strokeSecondary: "#1414141F";
     readonly strokeTertiary: "#14141414";
+    readonly strokeFocused: "#3685BF";
     readonly accent: "#3685BF";
     readonly buttonBackground: "#3685BF";
     readonly buttonForeground: "#FCFCFC";
@@ -76,6 +78,7 @@ export interface CanvasPalette {
     readonly strokePrimary: string;
     readonly strokeSecondary: string;
     readonly strokeTertiary: string;
+    readonly strokeFocused: string;
     readonly accent: string;
     readonly buttonBackground: string;
     readonly buttonForeground: string;
@@ -115,24 +118,45 @@ export declare const chartPalette: {
 };
 /**
  * Shared category palette for canvas primitives that show categorical tints
- * (`Swatch`, `UsageBar` segments, etc.). Uses a coherent subset of
- * `chartPalette` so a category's color reads consistently across any
- * primitive that consumes it.
+ * (`Swatch`, `UsageBar` segments, etc.). Hexes mirror the cursor core hues
+ * from `packages/ui/src/tokens/themes/cursor-core/{dark,light}.ts` (via the
+ * `text-{hue}-primary` semantic tokens); `gray` mirrors `text-tertiary`
+ * (`mixTransparent base 54%`).
  *
  * The insertion order here is the canonical category order — primitives
  * that auto-assign colors (e.g. `UsageBar` segments without an explicit
  * `color`) cycle through these keys in order.
  */
+export declare const categoryPaletteDark: {
+    readonly gray: "#E4E4E48A";
+    readonly purple: "#9386F2";
+    readonly green: "#3FA266";
+    readonly yellow: "#F1B467";
+    readonly pink: "#B48EAD";
+    readonly blue: "#7BAFE9";
+    readonly orange: "#D08770";
+};
+export declare const categoryPaletteLight: {
+    readonly gray: "#1414148A";
+    readonly purple: "#7754D9";
+    readonly green: "#1F8A65";
+    readonly yellow: "#C08532";
+    readonly pink: "#B8448B";
+    readonly blue: "#3685BF";
+    readonly orange: "#DB704B";
+};
+/** Legacy `colorPalette` name kept for back-compat; per-theme tables are `categoryPalette{Dark,Light}`. React consumers should read `useHostTheme().category` so the color flips with the host theme. */
 export declare const colorPalette: {
-    readonly gray: "#8888A8E0";
-    readonly purple: "#7B64B8F0";
-    readonly green: "#1F8A65E8";
-    readonly yellow: "#E8C030E0";
-    readonly pink: "#C85898E0";
-    readonly blue: "#2E79B5E0";
-    readonly orange: "#F0A040E0";
+    readonly gray: "#E4E4E48A";
+    readonly purple: "#9386F2";
+    readonly green: "#3FA266";
+    readonly yellow: "#F1B467";
+    readonly pink: "#B48EAD";
+    readonly blue: "#7BAFE9";
+    readonly orange: "#D08770";
 };
 export type Color = keyof typeof colorPalette;
+export type CategoryPalette = Readonly<Record<Color, string>>;
 /**
  * Auto-color rotation for `UsageBar` segments without an explicit `color`.
  * Decoupled from `colorPalette`'s declaration order so the palette can grow
@@ -147,7 +171,7 @@ export declare const usageColorSequence: readonly Color[];
  * distinct hue families for maximum perceptual separation.
  */
 export declare const chartColorSequence: readonly ["#1F8A65E8", "#70B0D8E0", "#5A6CC0F0", "#F0A040E0", "#C06028E0", "#E8C030E0", "#C85898E0", "#F0A088E0", "#7B64B8F0", "#7DCAB0E0", "#8888A8E0", "#2A9A8AE0"];
-declare function buildTokens(palette: CanvasPalette): {
+declare function buildTokens(palette: CanvasPalette, category: CategoryPalette): {
     bg: {
         editor: string;
         chrome: string;
@@ -165,6 +189,7 @@ declare function buildTokens(palette: CanvasPalette): {
         primary: string;
         secondary: string;
         tertiary: string;
+        focused: string;
     };
     fill: {
         primary: string;
@@ -183,6 +208,7 @@ declare function buildTokens(palette: CanvasPalette): {
         stripAdded: string;
         stripRemoved: string;
     };
+    category: Readonly<Record<"blue" | "gray" | "green" | "orange" | "pink" | "purple" | "yellow", string>>;
 };
 /** Semantic colors for components (spacing and radius live in `theme.ts`). */
 export declare const canvasTokens: {
@@ -203,6 +229,7 @@ export declare const canvasTokens: {
         primary: string;
         secondary: string;
         tertiary: string;
+        focused: string;
     };
     fill: {
         primary: string;
@@ -221,6 +248,7 @@ export declare const canvasTokens: {
         stripAdded: string;
         stripRemoved: string;
     };
+    category: Readonly<Record<"blue" | "gray" | "green" | "orange" | "pink" | "purple" | "yellow", string>>;
 };
 export declare const canvasTokensLight: {
     bg: {
@@ -240,6 +268,7 @@ export declare const canvasTokensLight: {
         primary: string;
         secondary: string;
         tertiary: string;
+        focused: string;
     };
     fill: {
         primary: string;
@@ -258,6 +287,7 @@ export declare const canvasTokensLight: {
         stripAdded: string;
         stripRemoved: string;
     };
+    category: Readonly<Record<"blue" | "gray" | "green" | "orange" | "pink" | "purple" | "yellow", string>>;
 };
 export type CanvasTokens = ReturnType<typeof buildTokens>;
 export {};

skills-cursor/canvas/sdk/chart-primitives.d.ts

@@ -32,7 +32,41 @@ export type ChartSeries = {
     data: number[];
     tone?: ChartTone;
 };
-export type BarChartProps = {
+/**
+ * A dashed marker line drawn across the plot at a fixed value — for targets,
+ * SLOs, budgets, means, or limits. Drawn horizontally on line / vertical-bar
+ * charts and vertically on `horizontal` bar charts; either way it marks the
+ * value axis and is folded into the auto domain so it stays on-canvas.
+ */
+export type ChartReferenceLine = {
+    /** Position on the value axis, in the same units as the series data. */
+    value: number;
+    /** Short label drawn in a chip at the line's end. */
+    label?: string;
+    /** Line color. Omit for a muted neutral; set to match other tonal elements. */
+    tone?: ChartTone;
+};
+/**
+ * Shared value-axis controls (the y-axis, or the x-axis on `horizontal` bar
+ * charts). By default the axis starts at zero; override to zoom into a tight
+ * range. On stacked / normalized bars these are ignored — those always start
+ * at zero.
+ */
+type ValueAxisProps = {
+    /**
+     * Start the value axis at zero. Defaults to `true`. Set `false` to
+     * auto-fit the axis to the data range — useful for tightly-clustered
+     * series (e.g. uptime 99.0–99.9%) that a zero baseline would flatten.
+     */
+    beginAtZero?: boolean;
+    /** Explicit axis minimum. Overrides `beginAtZero`. */
+    yMin?: number;
+    /** Explicit axis maximum. */
+    yMax?: number;
+    /** Horizontal marker lines for targets / thresholds / means. */
+    referenceLines?: ChartReferenceLine[];
+};
+export type BarChartProps = ValueAxisProps & {
     /** Category labels along the independent axis. */
     categories: string[];
     /** One or more data series. Values align by index with `categories`. */
@@ -44,24 +78,42 @@ export type BarChartProps = {
     horizontal?: boolean;
     /** Show as 100% stacked (implies `stacked`). */
     normalized?: boolean;
-    /** Suffix for y-axis tick labels (e.g. "%"). */
+    /** Suffix for value labels (e.g. "%", " ms"). */
     valueSuffix?: string;
+    /** Prefix for value labels (e.g. "$"). Ignored in `normalized` mode. */
+    valuePrefix?: string;
+    /**
+     * Print each bar's value as a label. Defaults to auto: on for a single
+     * series with ≤8 categories, off otherwise. Set `true` to force labels on
+     * (e.g. grouped multi-series), or `false` to force them off. No effect on
+     * `stacked` / `normalized` charts — use the hover tooltip there.
+     */
+    showValues?: boolean;
     style?: CSSProperties;
 };
-export type LineChartProps = {
+export type LineChartProps = ValueAxisProps & {
     categories: string[];
     series: ChartSeries[];
     height?: number;
     /** Fill the area under each line with a soft tint. */
     fill?: boolean;
+    /** Suffix for value labels (e.g. "%", " ms"). */
     valueSuffix?: string;
+    /** Prefix for value labels (e.g. "$"). */
+    valuePrefix?: string;
+    /** Print the value next to every data point (≤20 categories). */
+    showValues?: boolean;
+    /** Draw a vertical guide through the cursor while hovering. Defaults to `true`. */
+    showHoverGuide?: boolean;
     style?: CSSProperties;
 };
 export type PieChartProps = {
     data: Array<ChartDataPoint & {
         tone?: ChartTone;
     }>;
+    /** Diameter in px. Defaults to 200. */
     size?: number;
+    /** Render as a donut with the summed total shown in the hollow center. */
     donut?: boolean;
     style?: CSSProperties;
 };
@@ -112,16 +164,25 @@ export type PieChartProps = {
  *   ]}
  *   stacked
  * />
+ *
+ * // Mark a target with a reference line. Grouped/single bars also accept
+ * // `yMin` / `yMax` to frame the axis (stacked bars stay zero-based).
+ * <BarChart
+ *   categories={["Mon", "Tue", "Wed", "Thu", "Fri"]}
+ *   series={[{ name: "Latency", data: [180, 210, 240, 200, 220] }]}
+ *   valueSuffix=" ms"
+ *   referenceLines={[{ value: 200, label: "Budget", tone: "warning" }]}
+ * />
  * ```
  */
-export declare function BarChart({ categories, series, height, stacked, horizontal, normalized, valueSuffix, style }: BarChartProps): JSX.Element;
+export declare function BarChart({ categories, series, height, stacked, horizontal, normalized, valueSuffix, valuePrefix, showValues, beginAtZero, yMin, yMax, referenceLines, style }: BarChartProps): JSX.Element;
 /**
  * Multi-series line chart with optional area fill. Distilled from the
  * portal-website Highcharts analytics charts.
  *
  * Each series draws a polyline with dot markers at each data point.
  * Set `fill` to shade the area under every line. Hover over any category
- * column to see a tooltip with all series values at that point.
+ * column to see a tooltip with all series values and a vertical cursor guide.
  *
  * This is **not** a time-series component — it does not parse dates.
  * Pass pre-formatted date strings as `categories` if plotting over time.
@@ -157,9 +218,19 @@ export declare function BarChart({ categories, series, height, stacked, horizont
  *     { name: "errors", data: [2, 4, 9, 3], tone: "danger" },
  *   ]}
  * />
+ *
+ * // Zoom into a tight range and mark an SLO. `beginAtZero={false}`
+ * // auto-fits the axis; `referenceLines` draws the target.
+ * <LineChart
+ *   categories={["Mon", "Tue", "Wed", "Thu", "Fri"]}
+ *   series={[{ name: "Uptime", data: [99.91, 99.95, 99.7, 99.99, 99.96] }]}
+ *   valueSuffix="%"
+ *   beginAtZero={false}
+ *   referenceLines={[{ value: 99.9, label: "SLO", tone: "danger" }]}
+ * />
  * ```
  */
-export declare function LineChart({ categories, series, height, fill, valueSuffix, style }: LineChartProps): JSX.Element;
+export declare function LineChart({ categories, series, height, fill, valueSuffix, valuePrefix, showValues, showHoverGuide, beginAtZero, yMin, yMax, referenceLines, style }: LineChartProps): JSX.Element;
 /**
  * Pie (or donut) chart with hover highlighting. Distilled from the
  * portal-website Highcharts analytics charts.
@@ -171,7 +242,7 @@ export declare function LineChart({ categories, series, height, fill, valueSuffi
  *
  * Hovering a slice expands it outward and dims the others; hovering a legend
  * item does the same. A tooltip with value and percentage appears below the
- * chart. Set `donut` for a hollow center.
+ * chart. Set `donut` for a hollow center that shows the summed total.
  *
  * **Do not** use for bar-style comparisons — use `BarChart` instead.
  *
@@ -197,4 +268,5 @@ export declare function LineChart({ categories, series, height, fill, valueSuffi
  * ```
  */
 export declare function PieChart({ data, size, donut, style }: PieChartProps): JSX.Element;
+export {};
 //# sourceMappingURL=chart-primitives.d.ts.map

skills-cursor/canvas/sdk/collapsible-section.d.ts

@@ -27,11 +27,13 @@ export type CollapsibleSectionProps = {
     trailing?: ReactNode;
     /** Body shown when expanded. */
     children?: ReactNode;
+    /** When true, the section starts expanded (uncontrolled). */
+    defaultOpen?: boolean;
     style?: CSSProperties;
 };
 /**
- * Borderless collapsible row with a structured header. Always starts closed
- * (uncontrolled, no `defaultOpen`).
+ * Borderless collapsible row with a structured header. Starts closed unless
+ * `defaultOpen` is set.
  *
  * Compose with `<Swatch>` in the `leading` slot for a colored category icon,
  * and put a token readout / pill / button in `trailing`. Body content is
@@ -61,5 +63,5 @@ export type CollapsibleSectionProps = {
  * </CollapsibleSection>
  * ```
  */
-export declare function CollapsibleSection({ title, leading, count, trailing, children, style }: CollapsibleSectionProps): JSX.Element;
+export declare function CollapsibleSection({ title, leading, count, trailing, children, defaultOpen, style }: CollapsibleSectionProps): JSX.Element;
 //# sourceMappingURL=collapsible-section.d.ts.map

skills-cursor/canvas/sdk/hooks.d.ts

@@ -106,6 +106,10 @@ export type { CanvasAction };
  * appended after the mention. The canvas file is resolved from the
  * action route's `canvasId`; do not pass the path from canvas UI.
  *
+ * **`openFile`** — Open an existing workspace file in the host IDE.
+ * `path` may be workspace-relative or absolute. Optional `selection`
+ * follows VS Code editor line/column fields.
+ *
  * @example
  * ```tsx
  * function AgentLink({ agentId, title }: { agentId: string; title: string }) {

skills-cursor/canvas/sdk/index.d.ts

@@ -11,10 +11,10 @@
  * - Run the pre-delivery self-check before returning code.
  */
 /** Shared category color palette used by `Swatch`, `UsageBar`, etc. */
-export type { Color } from "./canvas-tokens.js";
-export { colorPalette, usageColorSequence } from "./canvas-tokens.js";
+export type { CategoryPalette, Color } from "./canvas-tokens.js";
+export { categoryPaletteDark, categoryPaletteLight, colorPalette, usageColorSequence, } from "./canvas-tokens.js";
 /** Charts. */
-export type { BarChartProps, ChartDataPoint, ChartSeries, ChartTone, LineChartProps, PieChartProps, } from "./chart-primitives.js";
+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";

skills-cursor/canvas/sdk/swatch.d.ts

@@ -3,11 +3,11 @@
  * list/row decoration (category badges, the leading slot of
  * `CollapsibleSection`, etc.).
  *
- * Pulls colors from the shared `Color` palette so a category's swatch and
- * its `UsageBar` segment for the same `color` stay visually coherent.
+ * 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";
+import type { Color } from "./canvas-tokens.js";
 export type SwatchProps = {
     /** One of the 7 shared category hues. Matches `UsageBar` segment colors. */
     color: Color;

skills-cursor/canvas/sdk/ui-primitives.d.ts

@@ -108,7 +108,7 @@ export declare function Divider({ style }: DividerProps): JSX.Element;
 export declare function Spacer(): JSX.Element;
 /** Horizontal alignment for a table column. */
 export type TableColumnAlign = "left" | "center" | "right";
-/** Semantic tone for a table row — renders a translucent tinted background. */
+/** Semantic tone for a table row — marker dot in the first column. */
 export type TableRowTone = "success" | "danger" | "warning" | "info" | "neutral";
 export type TableProps = {
     /** Column titles, left to right. Column count is fixed by this array. */
@@ -121,9 +121,9 @@ export type TableProps = {
     /** Optional alignment per column index (headers/rows). Defaults to left. */
     columnAlign?: Array<TableColumnAlign | undefined>;
     /**
-     * Optional semantic tone per row index. Applies a translucent tinted
-     * background — use for status highlighting (e.g. failing services, warnings).
-     * Sparse: `undefined` entries are uncolored.
+     * Optional semantic tone per row index. Renders a small colored dot before
+     * the first column's content (no row fill or border). Sparse: `undefined`
+     * entries are unstyled.
      */
     rowTone?: Array<TableRowTone | undefined>;
     /** When true (default), bordered rounded shell with horizontal scroll if needed. */
@@ -451,17 +451,14 @@ export type ButtonProps = {
  * ```
  */
 export declare function Button({ children, variant, disabled, type, style, onClick }: ButtonProps): JSX.Element;
+/** @deprecated Pills always render neutral now; tones are ignored. */
 export type PillTone = "neutral" | "added" | "deleted" | "renamed" | "success" | "warning" | "info";
 export type PillSize = "sm" | "md";
 export type PillProps = {
     children?: ReactNode;
     /** Whether the pill is in its selected/active state (filled background). */
     active?: boolean;
-    /**
-     * Semantic tone. Recolors the border and text. When `active` is also
-     * set, fills the background with the tone color at low opacity.
-     * Defaults to `neutral` (current stroke/text tokens).
-     */
+    /** @deprecated Ignored — pills always render with neutral styling. */
     tone?: PillTone;
     /**
      * Visual size. `"md"` (default) is the standard pill. `"sm"` is a
@@ -497,7 +494,7 @@ export type PillProps = {
  * <Pill onClick={handlePlan} keyboardHint="⇧Tab">Plan new idea</Pill>
  * ```
  */
-export declare function Pill({ children, active, tone, size, leadingContent, keyboardHint, disabled, title, style, onClick }: PillProps): JSX.Element;
+export declare function Pill({ children, active, size, leadingContent, keyboardHint, disabled, title, style, onClick }: PillProps): JSX.Element;
 export type StatTone = "success" | "danger" | "warning" | "info";
 export type StatProps = {
     /** The primary metric value (number, percentage, short string). */
@@ -526,17 +523,17 @@ export type CalloutTone = "info" | "success" | "warning" | "danger" | "neutral";
 export type CalloutProps = {
     /** Body content. Plain strings, `<Text>`, `<Code>`, `<Link>`, or short lists. */
     children?: ReactNode;
-    /** Semantic tone. Recolors the border, background tint, and title text. */
+    /** Semantic tone. Selects a default leading icon when `icon` is omitted. */
     tone?: CalloutTone;
-    /** Optional bold title line, shown above the body in the tone color. */
+    /** Optional bold title line, shown above the body. */
     title?: ReactNode;
     /** Optional leading icon (emoji, inline SVG, or short text glyph). */
     icon?: ReactNode;
     style?: CSSProperties;
 };
 /**
- * Tinted, bordered notice block for warnings, tips, or short status messages
- * inline within a section.
+ * Inline notice for warnings, tips, or short status messages. Each `tone`
+ * renders a cursor icon matching `@anysphere/ui` toasts (override with `icon`).
  *
  * @example
  * ```tsx