@flesler/cursor-canvas-web 1.0.2 → 1.1.1

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 {};

package/src/vendor/canvas-sdk/collapsible-section.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Borderless disclosure row — chevron + structured header (title, optional
+ * leading slot, count, trailing slot) with a body that toggles open. Distilled
+ * from baby-glass `ContextTreeRow`'s lightweight list-row chrome (no card
+ * border, no background fill).
+ *
+ * For a bordered surface that collapses, use `<Card collapsible>` instead.
+ */
+import { type CSSProperties, type JSX, type ReactNode } from "react";
+export type CollapsibleSectionProps = {
+    /** Plain-text title rendered next to the disclosure chevron. */
+    title: string;
+    /**
+     * Optional leading visual (e.g. `<Swatch>`) shown between the chevron and
+     * the title.
+     */
+    leading?: ReactNode;
+    /**
+     * Optional small count rendered after the title (e.g. number of children).
+     */
+    count?: number;
+    /**
+     * Optional trailing node, right-aligned (e.g. token readout, badge, button).
+     * Rendered with `t.text.tertiary` color hint via the wrapper; the slot can
+     * override.
+     */
+    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. 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
+ * indented under the row so nested `CollapsibleSection`s read as a tree.
+ *
+ * For a bordered, card-shaped collapsible surface, use `<Card collapsible>`
+ * instead — `CollapsibleSection` has no border or background and is meant to
+ * sit in a list of similar rows.
+ *
+ * @example
+ * ```tsx
+ * // Basic
+ * <CollapsibleSection title="Conversation">
+ *   <Text>Messages go here.</Text>
+ * </CollapsibleSection>
+ *
+ * // With a colored category swatch + count + trailing token readout
+ * <CollapsibleSection
+ *   title="Tools"
+ *   count={4}
+ *   leading={<Swatch color="purple" />}
+ *   trailing={<Text size="small" tone="tertiary">12.3k</Text>}
+ * >
+ *   <CollapsibleSection title="Grep">
+ *     <Text>Search results.</Text>
+ *   </CollapsibleSection>
+ * </CollapsibleSection>
+ * ```
+ */
+export declare function CollapsibleSection({ title, leading, count, trailing, children, defaultOpen, style, }: CollapsibleSectionProps): JSX.Element;

package/src/vendor/canvas-sdk/dag-layout.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Pure layout math for directed acyclic graphs. Returns positioned node
+ * coordinates, edge anchor points, rank bounding boxes, and back-edge flags.
+ * Rendering is the caller's responsibility.
+ *
+ * Handles cycles gracefully: back-edges are detected via DFS, excluded from
+ * ranking, and flagged in the output so the caller can render them differently
+ * (e.g. dashed arcs).
+ */
+export type DAGLayoutOptions = {
+    /** Nodes to lay out. Only `id` is required. */
+    nodes: Array<{
+        id: string;
+    }>;
+    /** Directed edges. */
+    edges: Array<{
+        from: string;
+        to: string;
+    }>;
+    /** Flow direction. Default `"vertical"` (top-to-bottom). */
+    direction?: "vertical" | "horizontal";
+    /** Node box width in px. Default 160. */
+    nodeWidth?: number;
+    /** Node box height in px. Default 40. */
+    nodeHeight?: number;
+    /** Gap between ranks (layers) in px. Default 64. */
+    rankGap?: number;
+    /** Gap between sibling nodes in the same rank in px. Default 48. */
+    nodeGap?: number;
+    /** Padding around the bounding box in px. Default 24. */
+    padding?: number;
+};
+export type DAGLayoutNode = {
+    id: string;
+    /** Left edge of the node box. */
+    x: number;
+    /** Top edge of the node box. */
+    y: number;
+    /** Layer index (0 = root). */
+    rank: number;
+    /** Position within the rank (0-indexed). */
+    order: number;
+};
+export type DAGLayoutEdge = {
+    from: string;
+    to: string;
+    /** Suggested source anchor point (center of the outgoing side). */
+    sourceX: number;
+    sourceY: number;
+    /** Suggested target anchor point (center of the incoming side). */
+    targetX: number;
+    targetY: number;
+    /** True when this edge was identified as a back-edge (part of a cycle). */
+    isBackEdge: boolean;
+};
+export type DAGLayoutRank = {
+    /** Rank index (0 = root). */
+    rank: number;
+    /** Left edge of the rank bounding box. */
+    x: number;
+    /** Top edge of the rank bounding box. */
+    y: number;
+    /** Width of the rank bounding box. */
+    width: number;
+    /** Height of the rank bounding box. */
+    height: number;
+    /** Node ids in this rank, in order. */
+    nodeIds: string[];
+};
+export type DAGLayoutResult = {
+    nodes: DAGLayoutNode[];
+    edges: DAGLayoutEdge[];
+    /** Bounding box per rank — useful for drawing layer bands. */
+    ranks: DAGLayoutRank[];
+    /** The direction used for this layout. */
+    direction: "vertical" | "horizontal";
+    /** Total width of the bounding box. */
+    width: number;
+    /** Total height of the bounding box. */
+    height: number;
+};
+/**
+ * Compute a hierarchical layout for a directed graph.
+ *
+ * Returns node positions, edge anchor points, rank bounding boxes, and
+ * back-edge flags. The caller handles all rendering.
+ *
+ * @example
+ * ```ts
+ * const layout = computeDAGLayout({
+ *   nodes: [{ id: "a" }, { id: "b" }, { id: "c" }],
+ *   edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }],
+ * });
+ *
+ * // layout.nodes[i].x / .y → position your own SVG/HTML elements
+ * // layout.edges[i].sourceX/Y, targetX/Y → draw lines between them
+ * // layout.edges[i].isBackEdge → style cycle edges differently
+ * // layout.ranks[i] → draw layer bands behind each rank
+ * ```
+ */
+export declare function computeDAGLayout(options: DAGLayoutOptions): DAGLayoutResult;

package/src/vendor/canvas-sdk/diff-view.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Low-level diff primitives for the canvas SDK.
+ *
+ * The canvas diff surface is intentionally minimal — two components that
+ * compose with the generic `Card` / `CardHeader` / `CardBody` / `Pill` /
+ * `Text` primitives to build any diff layout an agent can imagine:
+ *
+ * - `DiffView` — a monospaced, syntax-highlighted unified diff renderer.
+ *   Drops into any container (a `Card`, a table cell, a bare layout,
+ *   nothing at all). No card chrome, no header, no path display. Pass
+ *   `path` to auto-detect the language for highlighting, or `language`
+ *   to override.
+ *
+ * - `DiffStats` — the canonical `+N` green / `-N` red glyph pair. Use
+ *   it anywhere a small "added/deleted" summary makes sense — in a
+ *   `CardHeader`'s `trailing` slot, next to a filename in a file tree,
+ *   inside a status row, etc.
+ *
+ * For file-level metadata the preferred composition is to use the
+ * generic `Card` family:
+ *
+ * ```tsx
+ * <Card collapsible>
+ *   <CardHeader trailing={<DiffStats additions={5} deletions={2} />}>
+ *     src/utils.ts
+ *   </CardHeader>
+ *   <CardBody style={{ padding: 0 }}>
+ *     <DiffView path="src/utils.ts" lines={lines} />
+ *   </CardBody>
+ * </Card>
+ * ```
+ */
+import type { CSSProperties, JSX } from "react";
+export type DiffStatsProps = {
+    additions?: number;
+    deletions?: number;
+    style?: CSSProperties;
+};
+/**
+ * Inline `+N` / `-N` glyph pair. Green additions, red deletions, with
+ * tabular numerals so columns of stats line up. Renders nothing when
+ * both counts are zero.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader trailing={<DiffStats additions={12} deletions={3} />}>
+ *   src/utils.ts
+ * </CardHeader>
+ *
+ * <Row gap={8}>
+ *   <Text>Refactor pass</Text>
+ *   <DiffStats additions={42} deletions={17} />
+ * </Row>
+ * ```
+ */
+export declare function DiffStats({ additions, deletions, style, }: DiffStatsProps): JSX.Element | null;
+export type DiffLineType = "added" | "removed" | "unchanged";
+export type DiffLineData = {
+    type: DiffLineType;
+    content: string;
+    lineNumber?: number;
+};
+export type DiffViewProps = {
+    lines: DiffLineData[];
+    /**
+     * File path used to infer the syntax-highlighting language from the
+     * extension (e.g. `"src/utils.ts"` → `typescript`). The most ergonomic
+     * way to enable highlighting — pass the same path you show in the
+     * enclosing card header. Unknown extensions silently render as plain
+     * text.
+     *
+     * If both `path` and `language` are provided, `language` wins.
+     */
+    path?: string;
+    /**
+     * Explicit language override for syntax highlighting (e.g.
+     * `"typescript"`, `"python"`, `"tsx"`). Use this when no file path is
+     * available, when the path's extension is misleading, or when the
+     * content is a snippet rather than a real file. Accepts common
+     * aliases (`ts`, `py`, `rs`, `md`, etc.). Unknown languages silently
+     * fall back to plain text.
+     *
+     * Highlighting is applied per line, so multi-line constructs (block
+     * comments, template literals) may not colorize perfectly across line
+     * boundaries. For typical diff-sized inputs this is fine.
+     */
+    language?: string;
+    /** Show line numbers in the gutter. Default `true`. */
+    showLineNumbers?: boolean;
+    /** Color line numbers green/red for added/removed lines. Default `true`. */
+    coloredLineNumbers?: boolean;
+    /** Show a 3px accent strip on the left edge for changed lines. Default `true`. */
+    showAccentStrip?: boolean;
+    style?: CSSProperties;
+};
+/**
+ * Unified diff body renderer with monospaced type, colored line
+ * backgrounds, line-number gutter, accent strip, and optional Shiki
+ * syntax highlighting.
+ *
+ * `DiffView` does not provide any surrounding chrome — place it inside
+ * a `Card` + `CardBody` (with `padding: 0`) when you want the standard
+ * bordered "file diff" look, or drop it anywhere else if you want the
+ * bare renderer.
+ *
+ * Pass `path` to enable syntax highlighting from the file extension.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader trailing={<DiffStats additions={2} deletions={1} />}>
+ *     src/utils.ts
+ *   </CardHeader>
+ *   <CardBody style={{ padding: 0 }}>
+ *     <DiffView
+ *       path="src/utils.ts"
+ *       lines={[
+ *         { type: "unchanged", content: "export function add(a: number, b: number): number {", lineNumber: 1 },
+ *         { type: "removed",   content: "  return a + b;", lineNumber: 2 },
+ *         { type: "added",     content: "  const result = a + b;", lineNumber: 2 },
+ *         { type: "added",     content: "  return result;", lineNumber: 3 },
+ *         { type: "unchanged", content: "}", lineNumber: 4 },
+ *       ]}
+ *     />
+ *   </CardBody>
+ * </Card>
+ * ```
+ */
+export declare function DiffView({ lines, path, language, showLineNumbers, coloredLineNumbers, showAccentStrip, style, }: DiffViewProps): JSX.Element;