@flesler/cursor-canvas-web 1.0.2 → 1.1.0

package/src/vendor/canvas/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: canvas
+description: >-
+  A Cursor Canvas is a live React app that the user can open beside the chat.
+  You MUST use a canvas when the agent produces a standalone analytical artifact
+  — quantitative analyses, billing investigations, security audits, architecture
+  reviews, data-heavy content, timelines, charts, tables, interactive
+  explorations, repeatable tools, or any response that benefits from visual
+  layout. Especially prefer a canvas when presenting results from MCP tools
+  (Datadog, Databricks, Linear, Sentry, Slack, etc.) where the data is the
+  deliverable — render it in a rich canvas rather than dumping it into a
+  markdown table or code block. If you catch yourself about to write a markdown
+  table, stop and use a canvas instead. You MUST also read this skill whenever
+  you create, edit, or debug any .canvas.tsx file.
+metadata:
+  surfaces:
+    - ide
+    - cloud
+environments:
+  - local
+  - cloud
+---
+A canvas is a single `.canvas.tsx` file the IDE compiles so the user can open it beside the chat. Follow the workflow below in order.
+
+## Workflow
+
+### 1. Decide whether to use a canvas
+
+The trigger is **user intent**, not response shape. Ask: would the user benefit from viewing this output as its **own durable standalone artifact outside the transcript**, separate from the chat? If the output is a means to an end (a drafted message, a code fix, a dashboard in another tool), skip the canvas.
+
+**Use a canvas when the agent produces new standalone analytical output:**
+- Quantitative analyses and metrics breakdowns (e.g. "send 500 requests and tell me how many fail")
+- Billing or account investigations that surface structured findings from database queries
+- Security audits or architecture reviews with categorized findings
+- Cross-system data analyses and overlap reports
+- Structured data from MCP tools (Databricks, Datadog, etc.) where a durable standalone artifact is the deliverable
+- Financial analyses, margin decompositions, usage trend reports
+- Large tables the user wants to revisit or refine
+
+**Do NOT use a canvas when:**
+- The user asks for work in a **specific tool** — "create a Datadog dashboard" means give them a Datadog dashboard, not a canvas
+- The user has a **specific deliverable** — "draft a support response", "fix this code", "make this PR"
+- The user is **working within an existing artifact** — improving an HTML dashboard, editing an existing file
+- The user is doing **targeted debugging** or active development, even if structured findings emerge along the way
+- An immutable visual output belongs inside the transcript rather than in a durable standalone artifact
+- Short factual answers, one-off file edits, or quick clarifying questions
+- MCP tools are queried as an **intermediate step** for a different deliverable (e.g. querying Stripe to draft a support reply)
+
+### 2. Write the canvas
+
+**Location.** Canvases live at `/Users/<user>/.cursor/projects/<workspace>/canvases/<name>.canvas.tsx`. The IDE only detects canvases written directly inside that exact directory — subfolders, alternate extensions, and other locations are not picked up. For a new canvas, always use the write file tool to create the `.canvas.tsx` file at that exact path; do not stop after telling the user the path or showing code in chat. Treat that managed `canvases/` directory as pre-provisioned by Cursor itself: write the canvas file directly there and do **not** spend turns creating the directory with `mkdir` or checking whether it exists before writing. Listing its contents for other purposes (e.g. checking for existing canvases) is fine. If you can't determine the workspace directory from absolute paths already in your environment (terminals, transcripts, recently-viewed files), list `~/.cursor/projects/` rather than guessing. Use a descriptive kebab-case filename ending in `.canvas.tsx`; preserve acronym capitalization and lowercase the rest.
+
+**File rules:**
+- Exactly one `.canvas.tsx` file per canvas. Never create helper files, style files, or supporting modules.
+- Import **only** from `cursor/canvas`. No relative imports, no npm packages, no Node built-ins.
+- Default-export the top-level component.
+- Embed all data inline. **No `fetch()`, no network calls.**
+
+**Never render empty states.** A canvas exists to show real content. If a section, chart, table, or component has no data to display, **omit it** — do not render it with placeholder text ("Add header here", "TODO", "Example"), a "No data" message, an empty array, zeroed rows, or an empty chart frame. If the entire canvas would be empty because you don't have the underlying data, do not produce a canvas — tell the user what's missing and ask for it instead.
+
+**Label every plot.** Charts and tables must be self-describing — a reader looking at the canvas alone should know exactly what they're seeing. For every plot include:
+- A title naming the **specific metric** (not "Metrics" — "API error rate by service").
+- **Axis labels with units** on both axes (e.g. "Date", "Latency (ms)").
+- 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.
+
+Apply the Design guidance below as you write, and complete its Pre-delivery self-check before returning the canvas.
+
+## Design guidance
+
+Be creative. The SDK gives you expressive building blocks — use them in whatever combination best serves the content. But avoid slop: no gradients, no emojis, no box-shadows, no rainbow coloring. Cursor canvases are flat, minimal, and purposeful.
+
+### Visual hierarchy
+
+Not everything deserves equal treatment. Primary content gets more space, larger headings, and accent color. Supporting content stays compact. Squint test: blur your eyes — can you tell what matters?
+
+**Color.** All colors from `useHostTheme()` tokens — read its JSDoc in the SDK declarations for the return shape and usage pattern. No hardcoded hex. Use accent color deliberately, not on everything.
+
+### Slop patterns — forbidden
+
+These specific patterns produce low-quality output. If 2+ are present, redesign.
+
+- **Gradients** — no `linear-gradient`, `radial-gradient`, `background-clip: text`.
+- **Emojis** — no emoji as icons, status indicators, bullets, or section markers.
+- **Box shadows** — no `box-shadow`. Flat surfaces only.
+- **Wall of identical cards** — every section wrapped in the same card style with no variation. Mix open sections with cards.
+- **Rainbow coloring** — a different color on every element. Most elements are neutral; color is used sparingly with purpose.
+- **Giant text** — font sizes above H1 (24px), or bold text stuffed in CardHeader.
+- **Decorative borders** — colored borders on every element. Borders are structural (subtle stroke tokens), not decorative.
+
+### Pre-delivery self-check
+
+Before returning canvas code, verify:
+1. Does the layout have visual hierarchy? One thing should stand out.
+2. Is there variety in the composition? Not just a single column of uniform blocks.
+3. Slop check: scan for the forbidden patterns above.
+
+## Introducing the canvas
+
+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 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. 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.

package/src/vendor/canvas-sdk/callout-tone-icons.d.ts

@@ -0,0 +1,10 @@
+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 {};

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

@@ -0,0 +1,259 @@
+/**
+ * Design tokens for `cursor/canvas` (standalone; no UI framework dependency).
+ *
+ * Color values are pinned copies of the `packages/ui` cursor-core themes
+ * (`src/tokens/themes/cursor-core/{dark,light}.ts`) resolved through
+ * `CURSOR_SEMANTIC_RULES` (`src/tokens/semantic-schema.ts`). Alpha-hex entries
+ * are `base` at the rule's `mixTransparent` percent so they composite
+ * correctly over any surface. When the ui tokens change, re-derive these —
+ * they do not update automatically.
+ *
+ * Mapping (dark base #F0F0F0, light base #141414):
+ * - foreground*        → text-primary/secondary/tertiary/quaternary (100/74/60/36%)
+ * - editor/chrome/sidebar/elevated → the core surface hexes (elevated = editor)
+ * - fill*              → bg-primary/secondary/tertiary/quaternary (20/14/8/6%)
+ * - stroke*            → stroke-primary/secondary/tertiary (20/12/8%)
+ * - strokeFocused      → core `focus` at full opacity (NOT `--cursor-stroke-focused`,
+ *   which is 15% and layered with other cues in the app; in a canvas this is
+ *   the sole focus affordance)
+ * - accent/button*     → bg-accent / action-label / bg-accent-hover (mixTwo base 10%)
+ * - link               → text-link (= core blue)
+ * - diff*Line          → the core diff line backgrounds; diffStrip* keep the
+ *   canvas-specific alphas on the core green/red hues
+ */
+export declare const canvasPaletteDark: CanvasPalette;
+export declare const canvasPaletteLight: CanvasPalette;
+export declare const canvasPaletteGrokDark: CanvasPalette;
+export declare const canvasPaletteGrokLight: CanvasPalette;
+/**
+ * Parse a CSS hex color (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`) into 0–255
+ * RGB components. Returns `undefined` for anything we can't confidently parse
+ * (named colors, `rgb()`, etc.) so callers can fall back to the base palette.
+ *
+ * Hand-rolled rather than reusing a shared color util because this package is
+ * deliberately dependency-light (it is bundled into every canvas), and the host
+ * only ever sends hex (VS Code's `Color.Format.CSS.formatHex`).
+ */
+export declare function parseHexColor(value: string): {
+    r: number;
+    g: number;
+    b: number;
+} | undefined;
+/** Visual brand for canvas token resolve. Unknown values become `"cursor"`. */
+export type CanvasHostThemeBrand = "cursor" | "grok";
+export interface CanvasHostThemeOverrides {
+    readonly brand?: CanvasHostThemeBrand;
+    readonly primary?: string;
+    readonly editorBackground?: string;
+    readonly editorForeground?: string;
+}
+/** Unknown / omitted brand keeps the Cursor tables. */
+export declare function parseCanvasHostThemeBrand(value: unknown): CanvasHostThemeBrand;
+/**
+ * Overlay workbench editor surface colors onto the base palette so the canvas
+ * body and primitives using `bg.editor` match the active VS Code theme
+ * instead of the fixed Cursor light/dark editor hex.
+ */
+export declare function applyWorkbenchSurfaces(palette: CanvasPalette, surfaces: Pick<CanvasHostThemeOverrides, "editorBackground" | "editorForeground">): CanvasPalette;
+/**
+ * Overlay a host-provided primary/accent color (e.g. the active VS Code
+ * theme's accent) onto a base palette. Only the accent-adjacent entries
+ * change — accent, button background/hover, focus stroke, and links — plus a
+ * luminance-picked readable on-accent foreground. Every other entry (surfaces,
+ * text, fills, diff) keeps its base light/dark value, so any theme is
+ * supported without enumerating its full token set.
+ *
+ * Returns the base palette unchanged when `primary` isn't a hex color we can
+ * parse, keeping behaviour identical to hosts that only report a theme `kind`.
+ */
+export declare function applyPrimaryColor(palette: CanvasPalette, primary: string): CanvasPalette;
+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;
+}
+/**
+ * Chart color palette — distilled from portal-website analytics charts.
+ * 88% opacity (E0) softens vibrancy without dulling; palette maximizes
+ * hue + luminosity spread for distinguishable multi-series charts.
+ */
+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";
+};
+/**
+ * Shared category palette for canvas primitives that show categorical tints
+ * (`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` reuses the palette's
+ * `foregroundTertiary` (= `text-tertiary`, `mixTransparent base 60%`).
+ * `orange` is mixed 70/30 with red to keep
+ * Conversation distinct from Skills' yellow in light mode while staying warm.
+ *
+ * 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 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;
+export declare const categoryPaletteGrokDark: CategoryPalette;
+export declare const categoryPaletteGrokLight: CategoryPalette;
+/** 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: CategoryPalette;
+/**
+ * Auto-color rotation for `UsageBar` segments without an explicit `color`.
+ * Decoupled from `colorPalette`'s declaration order so the palette can grow
+ * or be reordered without changing how unspecified segments cycle.
+ *
+ * Matches the original `packages/ui` `ContextUsageTray` order so the same
+ * segment index lands on the same hue as the source.
+ */
+export declare const usageColorSequence: readonly Color[];
+/**
+ * Ordered array for automatic series coloring — alternates dark/light across
+ * distinct hue families for maximum perceptual separation.
+ */
+export declare const chartColorSequence: readonly string[];
+/**
+ * Sand data-categorical hues. Same key set as {@link chartPalette} so
+ * tone maps (`success` / `danger` / …) stay typed; the lead series colors
+ * are Sand blue / orange / purple.
+ */
+export declare const chartPaletteGrok: {
+    readonly green: "#00C972E8";
+    readonly darkGreen: "#009957E0";
+    readonly lightGreen: "#38D591E0";
+    readonly mintGreen: "#78E2B4E0";
+    readonly blue: "#1084FEE0";
+    readonly lightBlue: "#459FFEE0";
+    readonly indigo: "#0C64C1F0";
+    readonly lightIndigo: "#80BEFEE0";
+    readonly purple: "#9159FEF0";
+    readonly lightPurple: "#A97EFEE0";
+    readonly warmPink: "#FF309BE0";
+    readonly lightPink: "#FF5EB1E0";
+    readonly brightOrange: "#FF6700E0";
+    readonly deepOrange: "#C24E00E0";
+    readonly goldenYellow: "#FF9800E0";
+    readonly darkAmber: "#FF263CE0";
+    readonly warmPeach: "#FF8838E0";
+    readonly vibrantTeal: "#00BCA6E0";
+    readonly muted: "#777777E0";
+    readonly neutralLine: "#777777D0";
+};
+export declare const chartColorSequenceGrok: readonly string[];
+export type ChartPalette = {
+    readonly [K in keyof typeof chartPalette]: string;
+};
+/**
+ * Semantic colors for components (spacing and radius live in `theme.ts`).
+ * There is no `colors` bag — `theme.colors.bg.primary` is not a path.
+ * Use `theme.bg.editor`, `theme.fill.primary`, `theme.text.primary`,
+ * `theme.stroke.secondary`, `theme.accent.primary`.
+ */
+export interface 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: CategoryPalette;
+}
+export declare const canvasTokens: CanvasTokens;
+export declare const canvasTokensLight: CanvasTokens;
+/**
+ * Resolve the full token set for a host theme `kind`, optionally overlaying
+ * the active editor's primary/accent color via {@link applyPrimaryColor}.
+ *
+ * Light kinds (`light`, `hc-light`) use the light palette/categories; every
+ * other kind uses the dark ones. Centralizing the palette + category choice
+ * here keeps `useHostTheme` a thin reader of host state.
+ *
+ * Grok skips the host `primary` overlay: Grok owns ink accents
+ * (`#FAFAFA` / `#070707`). Hosts like Sand and VS Code always send
+ * `primary` (workbench `button.background`) and would otherwise wipe
+ * those inks. Workbench surfaces (`editorBackground` /
+ * `editorForeground`) still apply.
+ */
+export declare function buildHostTokens(kind: string, overrides?: CanvasHostThemeOverrides): {
+    tokens: CanvasTokens;
+    palette: CanvasPalette;
+    brand: CanvasHostThemeBrand;
+};
+export declare function chartThemeForBrand(brand: CanvasHostThemeBrand): {
+    palette: ChartPalette;
+    sequence: readonly string[];
+};

package/src/vendor/canvas-sdk/chart-primitives.d.ts

@@ -0,0 +1,272 @@
+/**
+ * Chart primitives for `cursor/canvas` — multi-series, stacked, and pie charts
+ * rendered as pure inline SVG with zero external dependencies.
+ *
+ * Distilled from the portal-website Highcharts analytics charting layer.
+ */
+import type { CSSProperties, JSX } from "react";
+/**
+ * Semantic tone for a chart series or slice. Mirrors the tone vocabulary
+ * used by `Stat`, `Callout`, and `Table` `rowTone` so colors match across
+ * a canvas — e.g. a `Stat tone="success"` and a `ChartSeries tone="success"`
+ * render in the same green. `Pill` does not share this vocabulary.
+ *
+ * Omit `tone` to let the chart auto-assign a distinct color from the
+ * chart palette; supply `tone` only when the value carries semantic
+ * meaning that should match other tonal elements on the page.
+ */
+export type ChartTone = "success" | "danger" | "warning" | "info" | "neutral";
+/** A single labeled value, used by `PieChart`. */
+export type ChartDataPoint = {
+    label: string;
+    /** Non-negative numeric value. */
+    value: number;
+};
+/**
+ * A named data series for `BarChart` and `LineChart`.
+ * The `data` array aligns by index with the parent component's `categories`.
+ * If `tone` is omitted, a color is auto-assigned from the chart palette.
+ */
+export type ChartSeries = {
+    name: string;
+    /** Values aligned with `categories`. Must be numbers, not numeric strings. */
+    data: number[];
+    tone?: ChartTone;
+};
+/**
+ * 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`. */
+    series: ChartSeries[];
+    height?: number;
+    /** Stack series on top of each other instead of grouping side-by-side. */
+    stacked?: boolean;
+    /** Render horizontal bars instead of vertical columns. */
+    horizontal?: boolean;
+    /** Show as 100% stacked (implies `stacked`). */
+    normalized?: boolean;
+    /** 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 = 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;
+};
+/**
+ * Multi-series bar/column chart with optional stacking and normalization.
+ * Distilled from the portal-website Highcharts analytics charts.
+ *
+ * Pass `categories` for x-axis labels and one or more `series` whose `data`
+ * arrays align by index. With a single series you get simple bars; with
+ * multiple series the default is grouped (side-by-side) — set `stacked` for
+ * stacked columns or `normalized` for 100%-stacked share-mode.
+ *
+ * Colors are auto-assigned from the chart palette. With a **single series**,
+ * each bar gets a different color by category (so a chart of 5 categories
+ * shows 5 colors out of the box). With **multiple series**, each series gets
+ * its own color. A legend appears when there are 2+ series.
+ *
+ * For semantic coloring, pass `tone` on a series — it maps to the same
+ * palette entries used by `Stat`, `Pill`, and `Table` so your chart matches
+ * tonal elements elsewhere on the page.
+ *
+ * @example
+ * ```tsx
+ * // Simple single-series
+ * <BarChart
+ *   categories={["Mon", "Tue", "Wed"]}
+ *   series={[{ name: "Requests", data: [120, 90, 150] }]}
+ * />
+ *
+ * // Stacked multi-series (like portal AI commit chart)
+ * <BarChart
+ *   categories={["Mon", "Tue", "Wed"]}
+ *   series={[
+ *     { name: "IDE", data: [120, 90, 150] },
+ *     { name: "CLI", data: [30, 40, 25] },
+ *     { name: "Cloud", data: [50, 60, 70] },
+ *   ]}
+ *   stacked
+ * />
+ *
+ * // Semantic tones — "accepted" renders in the same green as
+ * // <Stat tone="success"> elsewhere on the page.
+ * <BarChart
+ *   categories={["Mon", "Tue", "Wed"]}
+ *   series={[
+ *     { name: "Accepted", data: [70, 80, 60], tone: "success" },
+ *     { name: "Rejected", data: [30, 20, 40], tone: "danger" },
+ *   ]}
+ *   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, 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 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.
+ *
+ * Colors are auto-assigned from the chart palette. For semantic coloring,
+ * pass `tone` on a series — it maps to the same palette entries used by
+ * `Stat`, `Pill`, and `Table`.
+ *
+ * @example
+ * ```tsx
+ * // Single line
+ * <LineChart
+ *   categories={["Jan", "Feb", "Mar", "Apr"]}
+ *   series={[{ name: "Revenue", data: [100, 140, 120, 180] }]}
+ * />
+ *
+ * // Multi-series with area fill
+ * <LineChart
+ *   categories={["Jan", "Feb", "Mar", "Apr"]}
+ *   series={[
+ *     { name: "Accepted", data: [50, 70, 60, 90] },
+ *     { name: "Suggested", data: [120, 140, 130, 160] },
+ *   ]}
+ *   fill
+ * />
+ *
+ * // Semantic tones — "errors" renders in the same red as a
+ * // <Stat tone="danger"> or <Callout tone="danger"> elsewhere on the page.
+ * <LineChart
+ *   categories={["00:00", "06:00", "12:00", "18:00"]}
+ *   series={[
+ *     { name: "p95 latency", data: [80, 95, 110, 90], tone: "info" },
+ *     { 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, 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.
+ *
+ * Unlike `BarChart` and `LineChart`, `PieChart` takes a flat `data` array of
+ * `{ label, value }` points — each slice is its own category. Colors are
+ * auto-assigned from the chart palette; pass `tone` on a point to give a
+ * slice a semantic color that matches other tonal elements on the page.
+ *
+ * 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 that shows the summed total.
+ *
+ * **Do not** use for bar-style comparisons — use `BarChart` instead.
+ *
+ * @example
+ * ```tsx
+ * // Basic pie
+ * <PieChart
+ *   data={[
+ *     { label: "IDE", value: 120 },
+ *     { label: "CLI", value: 30 },
+ *     { label: "Cloud", value: 50 },
+ *   ]}
+ * />
+ *
+ * // Donut with semantic tones
+ * <PieChart
+ *   data={[
+ *     { label: "Passing", value: 70, tone: "success" },
+ *     { label: "Failing", value: 30, tone: "danger" },
+ *   ]}
+ *   donut
+ * />
+ * ```
+ */
+export declare function PieChart({ data, size, donut, style, }: PieChartProps): JSX.Element;
+export {};