@flesler/cursor-canvas-web 1.0.2 → 1.1.1

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

@@ -0,0 +1,194 @@
+/**
+ * Form primitives for `cursor/canvas`. Provides themed, controlled form controls
+ * for interactive canvas apps with persistent state. All `onChange` callbacks
+ * receive the **value directly** (not a DOM event), so they pair naturally
+ * with `useCanvasState`:
+ *
+ * ```tsx
+ * const [name, setName] = useCanvasState("name", "");
+ * <TextInput value={name} onChange={setName} placeholder="Enter name…" />
+ * ```
+ */
+import { type CSSProperties, type JSX, type ReactNode } from "react";
+export type TextInputProps = {
+    value?: string;
+    /** Called with the new string value on every keystroke. */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    type?: "text" | "email" | "password" | "number" | "url" | "search";
+    style?: CSSProperties;
+};
+/**
+ * Single-line text input (28px height). Use for names, titles, search
+ * queries, and short text fields.
+ *
+ * `onChange` receives the **string value**, not a DOM event — this pairs
+ * directly with `useCanvasState` setters.
+ *
+ * @example
+ * ```tsx
+ * const [name, setName] = useCanvasState("name", "");
+ *
+ * <TextInput value={name} onChange={setName} placeholder="Task title…" />
+ * ```
+ */
+export declare function TextInput({ value, onChange, placeholder, disabled, type, style, }: TextInputProps): JSX.Element;
+export type TextAreaProps = {
+    value?: string;
+    /** Called with the new string value on every keystroke. */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Minimum visible rows. Defaults to 3. */
+    rows?: number;
+    style?: CSSProperties;
+};
+/**
+ * Multi-line text input that auto-resizes to fit its content.
+ * Use for notes, descriptions, comments, and multi-line text fields.
+ *
+ * The textarea grows as the user types. Set `rows` for the minimum visible
+ * height (defaults to 3). Override with `style={{ height: "100px" }}` for a
+ * fixed size.
+ *
+ * @example
+ * ```tsx
+ * const [notes, setNotes] = useCanvasState("notes", "");
+ *
+ * <TextArea value={notes} onChange={setNotes} placeholder="Add notes…" rows={4} />
+ * ```
+ */
+export declare function TextArea({ value, onChange, placeholder, disabled, rows, style, }: TextAreaProps): JSX.Element;
+export type CheckboxProps = {
+    checked?: boolean;
+    /** Called with the new boolean value when toggled. */
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Optional label rendered beside the checkbox. Clicking the label toggles the checkbox. */
+    label?: ReactNode;
+    style?: CSSProperties;
+};
+/**
+ * Checkbox with optional label (accent blue when checked).
+ *
+ * Pass `label` to render a clickable text label beside the checkbox. Without a
+ * label, provide `title` or wrap in your own `<label>` for accessibility.
+ *
+ * @example
+ * ```tsx
+ * const [agreed, setAgreed] = useCanvasState("agreed", false);
+ *
+ * <Checkbox checked={agreed} onChange={setAgreed} label="I agree to the terms" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Checkbox in a list — no label, parent handles layout
+ * <Checkbox checked={item.done} onChange={(v) => toggleItem(item.id, v)} />
+ * ```
+ */
+export declare function Checkbox({ checked, onChange, disabled, label, style, }: CheckboxProps): JSX.Element;
+export type ToggleProps = {
+    checked?: boolean;
+    /** Called with the new boolean value when toggled. */
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** `sm` = 16px track, `md` = 20px track (default `sm`). */
+    size?: "sm" | "md";
+    style?: CSSProperties;
+};
+/**
+ * Boolean toggle switch. Uses the accent color for the "on" state and a
+ * neutral fill for "off".
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = useCanvasState("enabled", false);
+ *
+ * <Row gap={8} align="center">
+ *   <Text>Notifications</Text>
+ *   <Spacer />
+ *   <Toggle checked={enabled} onChange={setEnabled} />
+ * </Row>
+ * ```
+ */
+export declare function Toggle({ checked, onChange, disabled, size, style, }: ToggleProps): JSX.Element;
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectProps = {
+    value?: string;
+    /** Called with the new selected value. */
+    onChange?: (value: string) => void;
+    /** List of options. Each must have a unique `value`. */
+    options: SelectOption[];
+    /** Placeholder shown when no value is selected. */
+    placeholder?: string;
+    disabled?: boolean;
+    style?: CSSProperties;
+};
+/**
+ * Dropdown select (native `<select>` with themed styling).
+ *
+ * Uses a native `<select>` under the hood for reliable keyboard, screen-reader,
+ * and mobile support. The OS-rendered option list is themed for dark mode via
+ * `color-scheme` and per-option colors.
+ *
+ * @example
+ * ```tsx
+ * const [priority, setPriority] = useCanvasState("priority", "medium");
+ *
+ * <Select
+ *   value={priority}
+ *   onChange={setPriority}
+ *   options={[
+ *     { value: "low", label: "Low" },
+ *     { value: "medium", label: "Medium" },
+ *     { value: "high", label: "High" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Select({ value, onChange, options, placeholder, disabled, style, }: SelectProps): JSX.Element;
+export type IconButtonProps = {
+    /** Icon content: an SVG element, emoji, or unicode character. */
+    children: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Tooltip text. Always provide for accessibility since there is no text label. */
+    title?: string;
+    /**
+     * `"default"` is transparent until hovered; `"circle"` has a permanent
+     * background fill.
+     */
+    variant?: "default" | "circle";
+    /** `sm` = 16px, `md` = 20px (default `md`). */
+    size?: "sm" | "md";
+    style?: CSSProperties;
+};
+/**
+ * Compact icon-only button for inline actions on list items (delete, edit,
+ * expand, etc.). Accepts **any** `children` as the icon — use an inline SVG,
+ * an emoji, or a unicode character.
+ *
+ * Always provide `title` for accessibility (screen-reader label + tooltip).
+ *
+ * Canvas has no icon font, so pass icon content directly.
+ *
+ * @example
+ * ```tsx
+ * // Delete button on a card
+ * <IconButton title="Delete" onClick={() => remove(id)}>✕</IconButton>
+ *
+ * // Edit button with an SVG icon
+ * <IconButton title="Edit" variant="circle" size="sm" onClick={edit}>
+ *   <svg width={12} height={12} viewBox="0 0 12 12" fill="none">
+ *     <path d="M8.5 1.5l2 2L4 10H2V8z" stroke="currentColor" strokeWidth={1.2} />
+ *   </svg>
+ * </IconButton>
+ * ```
+ */
+export declare function IconButton({ children, onClick, disabled, title, variant, size, style, }: IconButtonProps): JSX.Element;

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

@@ -0,0 +1,173 @@
+import type { CanvasHostThemeBrand, CanvasPalette, CanvasTokens, ChartPalette } from "./canvas-tokens.js";
+import { type CanvasAction } from "./internal/canvas-action-dispatch.js";
+import { type CanvasRadius, type CanvasTypography } from "./theme.js";
+/**
+ * Host theme for the current canvas. Semantic color groups (`text`, `bg`,
+ * `fill`, `stroke`, `accent`, `diff`) live at the top level for ergonomic
+ * inline-style access; `tokens` is also present as a self-reference for
+ * callers that prefer a namespaced form. There is no `colors` bag —
+ * `theme.colors.bg.primary` is not a path.
+ */
+export interface CanvasHostTheme extends CanvasTokens {
+    readonly kind: string;
+    readonly brand: CanvasHostThemeBrand;
+    readonly tokens: CanvasTokens;
+    readonly palette: CanvasPalette;
+    readonly radius: CanvasRadius;
+    readonly typography: CanvasTypography;
+    readonly chart: {
+        readonly palette: ChartPalette;
+        readonly sequence: readonly string[];
+    };
+}
+/**
+ * Raw theme payload read from the host `theme` channel. Every field is typed
+ * `unknown` on purpose: the value crosses an untrusted JSON/SSE boundary
+ * (`window.__cursorCanvas.state`), so it is validated per-field at read time
+ * rather than trusted from the wire. Mirrors `CanvasHostThemeState` from
+ * `@anysphere/constants` (the producer side); kept local so this bundled SDK
+ * stays dependency-free.
+ */
+interface RawHostThemeState {
+    readonly kind?: unknown;
+    readonly brand?: unknown;
+    readonly primary?: unknown;
+    readonly editorBackground?: unknown;
+    readonly editorForeground?: unknown;
+}
+/** Exported for unit tests only; not part of the SDK surface (see index.ts). */
+export declare function resolveTheme(raw: RawHostThemeState | undefined): CanvasHostTheme;
+/**
+ * Returns the current host theme. When no host state is available (first
+ * paint, or a dead state bridge) it falls back to the page's
+ * `prefers-color-scheme` polarity instead of assuming dark.
+ *
+ * Semantic color groups are available directly on the returned object —
+ * `accent`, `text`, `bg`, `fill`, `stroke`, `diff` — as well as `kind`
+ * (`"dark"` | `"light"` | …), `brand` (`"cursor"` | `"grok"`, default
+ * `"cursor"` when the host omits it), and `palette` (the flat color
+ * palette). There is no `theme.colors` group.
+ *
+ * Call `useHostTheme()` inside each component that needs theme access —
+ * the returned object is scoped to that component, not shared across
+ * function boundaries.
+ *
+ * Stable paths for `style={{ ... }}` usage:
+ * - `text.primary / secondary / tertiary / quaternary` — text hierarchy
+ * - `bg.editor / chrome / elevated` — surface backgrounds
+ * - `fill.primary / secondary / tertiary / quaternary` — tinted fills
+ * - `stroke.primary / secondary / tertiary` — borders and dividers
+ * - `accent.primary / control` — accent blue and button background
+ * - `text.link` — link color
+ * - `text.onAccent` — text on accent-colored surfaces
+ *
+ * Prefer built-in components (`Card`, `Button`, `Text`, etc.) over raw
+ * token usage. Reach for tokens only when no component covers the case,
+ * and stick to flat solid colors — no gradients, no box-shadows.
+ *
+ * @example
+ * ```tsx
+ * function Overview() {
+ *   const theme = useHostTheme();
+ *   return (
+ *     <div style={{ background: theme.fill.tertiary, color: theme.text.secondary, padding: 8 }}>
+ *       <span style={{ color: theme.accent.primary }}>Accent text</span>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useHostTheme(): CanvasHostTheme;
+/**
+ * Setter for `useCanvasState`. Accepts either a new value or an updater
+ * function that receives the previous value.
+ */
+export type SetCanvasState<T> = (action: T | ((prev: T) => T)) => void;
+/**
+ * Persistent state hook for canvas applications. Works like `React.useState`
+ * but the value survives rebuilds, reloads, and IDE restarts — it is stored
+ * in a `.canvas.data.json` sidecar file next to the canvas source.
+ *
+ * Each key is a unique string chosen by the canvas author. Keys are stable
+ * regardless of hook call order or component tree structure.
+ *
+ * @param key - Unique string identifier for this piece of state.
+ * @param defaultValue - Value returned when no persisted value exists for `key`.
+ * @returns A `[value, setValue]` tuple, same shape as `React.useState`.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const [count, setCount] = useCanvasState("count", 0);
+ *   return <Button onClick={() => setCount(c => c + 1)}>{count}</Button>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * interface Column { id: string; title: string; cardIds: string[] }
+ * function KanbanBoard() {
+ *   const [columns, setColumns] = useCanvasState<Column[]>("columns", [
+ *     { id: "todo", title: "To Do", cardIds: [] },
+ *     { id: "doing", title: "In Progress", cardIds: [] },
+ *     { id: "done", title: "Done", cardIds: [] },
+ *   ]);
+ *   // ...
+ * }
+ * ```
+ */
+export declare function useCanvasState<T>(key: string, defaultValue: T): [T, SetCanvasState<T>];
+export type { CanvasAction };
+/**
+ * Returns a stable `dispatch` function for triggering IDE actions from
+ * canvas buttons. Actions are fire-and-forget — the canvas does not
+ * receive a response.
+ *
+ * ## Available actions
+ *
+ * **`openAgent`** — Navigate the IDE to an agent conversation.
+ * `agentId` is the conversation UUID (the filename stem from the
+ * `agent-transcripts/` directory). Works for both local and
+ * cloud/background agents in Glass and classic IDE modes.
+ *
+ * **`newComposerChat`** — Open a new local agent chat with the
+ * dispatching canvas file as an @mention. Optional `userPrompt` is
+ * 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 }) {
+ *   const dispatch = useCanvasAction();
+ *   return (
+ *     <Button onClick={() => dispatch({ type: "openAgent", agentId })}>
+ *       {title}
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function AskAboutCanvas() {
+ *   const dispatch = useCanvasAction();
+ *   return (
+ *     <Button
+ *       onClick={() =>
+ *         dispatch({
+ *           type: "newComposerChat",
+ *           userPrompt: "please explain what is using the most context",
+ *         })
+ *       }
+ *     >
+ *       Ask in chat
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useCanvasAction(): (action: CanvasAction) => void;

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;