@flesler/cursor-canvas-web 1.0.2 → 1.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flesler/cursor-canvas-web",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.1.1",
   "repository": "github:flesler/cursor-canvas-web",
   "type": "module",
   "description": "Deploy your Cursor canvases to the web.",
@@ -19,17 +19,21 @@
   },
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src/vendor"
   ],
   "main": "./dist/cursor-canvas.cjs",
   "module": "./dist/cursor-canvas.js",
-  "types": "./dist/shim/cursor-canvas.d.ts",
+  "types": "./src/vendor/canvas-sdk/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/shim/cursor-canvas.d.ts",
+      "types": "./src/vendor/canvas-sdk/index.d.ts",
       "import": "./dist/cursor-canvas.js",
       "require": "./dist/cursor-canvas.cjs"
     },
+    "./canvas-sdk": {
+      "types": "./src/vendor/canvas-sdk/index.d.ts"
+    },
     "./runtime": {
       "types": "./dist/runtime/index.d.ts",
       "import": "./dist/runtime.js",
@@ -48,16 +52,20 @@
     "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 check:sdk-exports",
-    "check:sdk-live": "node scripts/diff-sdk-exports.mjs \"${HOME}/.cursor/skills-cursor/canvas/sdk/index.d.ts\"",
-    "test:contract:strict": "pnpm run build:lib && node scripts/generate-contract-consumer.mjs && pnpm exec tsc -p test/contract/tsconfig.json",
+    "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",
+    "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",
     "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",
     "prepare": "[ \"$CI\" != \"true\" ] && [ -d node_modules/husky ] && husky || true",
-    "prepublishOnly": "pnpm typecheck && pnpm test && pnpm build:lib"
+    "prepublishOnly": "pnpm typecheck && pnpm test && pnpm run check:sdk-exports && pnpm build:lib"
   },
   "peerDependencies": {
     "@mantine/charts": "^8.3.0",
@@ -71,9 +79,6 @@
     "@mantine/charts": "^8.3.18",
     "@mantine/core": "^8.3.18",
     "@mantine/hooks": "^8.3.18",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "recharts": "^3.10.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^22.13.1",
@@ -87,10 +92,14 @@
     "husky": "^9.1.7",
     "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": "^3.0.5"
+    "vitest": "^4.1.11"
   }
 }

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[];
+};