@kensaurus/skills 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,235 @@
+/**
+ * Design tokens for `cursor/canvas` (standalone; no UI framework dependency).
+ *
+ * Color values are aligned with the Cursor app dark theme (`packages/ui` `cursor-dark` sources).
+ */
+export declare const canvasPaletteDark: {
+    readonly foreground: "#E4E4E4EB";
+    readonly foregroundSecondary: "#E4E4E48D";
+    readonly foregroundTertiary: "#E4E4E45E";
+    readonly foregroundQuaternary: "#E4E4E442";
+    readonly editor: "#181818";
+    readonly chrome: "#141414";
+    readonly sidebar: "#141414";
+    readonly elevated: "#181818";
+    readonly fillPrimary: "#E4E4E430";
+    readonly fillSecondary: "#E4E4E41E";
+    readonly fillTertiary: "#E4E4E411";
+    readonly fillQuaternary: "#E4E4E40A";
+    readonly strokePrimary: "#E4E4E433";
+    readonly strokeSecondary: "#E4E4E41F";
+    readonly strokeTertiary: "#E4E4E414";
+    readonly accent: "#599CE7";
+    readonly buttonBackground: "#599CE7";
+    readonly buttonForeground: "#191c22";
+    readonly buttonHoverBackground: "#6AABE9";
+    readonly link: "#87c3ff";
+    readonly diffInsertedLine: "#3FA26633";
+    readonly diffRemovedLine: "#B8004933";
+    readonly diffStripAdded: "#3FA2668F";
+    readonly diffStripRemoved: "#FC6B838F";
+};
+/**
+ * Light-mode palette derived from `packages/ui/src/tokens/themes/cursor-core/light.ts`.
+ * Base color: #141414.  Same percentages as dark (regular light has no overrides
+ * in CURSOR_SEMANTIC_OVERRIDES — only high-contrast does).
+ */
+export declare const canvasPaletteLight: {
+    readonly foreground: "#141414F0";
+    readonly foregroundSecondary: "#141414BD";
+    readonly foregroundTertiary: "#1414148A";
+    readonly foregroundQuaternary: "#1414145C";
+    readonly editor: "#FCFCFC";
+    readonly chrome: "#F8F8F8";
+    readonly sidebar: "#F3F3F3";
+    readonly elevated: "#FCFCFC";
+    readonly fillPrimary: "#14141433";
+    readonly fillSecondary: "#14141424";
+    readonly fillTertiary: "#14141414";
+    readonly fillQuaternary: "#1414140F";
+    readonly strokePrimary: "#14141433";
+    readonly strokeSecondary: "#1414141F";
+    readonly strokeTertiary: "#14141414";
+    readonly accent: "#3685BF";
+    readonly buttonBackground: "#3685BF";
+    readonly buttonForeground: "#FCFCFC";
+    readonly buttonHoverBackground: "#2E76AB";
+    readonly link: "#3685BF";
+    readonly diffInsertedLine: "#1F8A651F";
+    readonly diffRemovedLine: "#CF2D5614";
+    readonly diffStripAdded: "#1F8A65CC";
+    readonly diffStripRemoved: "#CF2D56CC";
+};
+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 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";
+};
+/**
+ * Ordered array for automatic series coloring — alternates dark/light across
+ * distinct hue families for maximum perceptual separation.
+ */
+export declare const chartColorSequence: readonly ["#1F8A65E8", "#70B0D8E0", "#5A6CC0F0", "#F0A040E0", "#C06028E0", "#E8C030E0", "#C85898E0", "#F0A088E0", "#7B64B8F0", "#7DCAB0E0", "#8888A8E0", "#2A9A8AE0"];
+declare function buildTokens(palette: CanvasPalette): {
+    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;
+    };
+    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;
+    };
+};
+/** Semantic colors for components (spacing and radius live in `theme.ts`). */
+export declare const 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;
+    };
+    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;
+    };
+};
+export declare const canvasTokensLight: {
+    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;
+    };
+    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;
+    };
+};
+export type CanvasTokens = ReturnType<typeof buildTokens>;
+export {};
+//# sourceMappingURL=canvas-tokens.d.ts.map

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

@@ -0,0 +1,200 @@
+/**
+ * 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`, `Pill`, `Table`, and other SDK primitives so colors
+ * match across a canvas — e.g. a `Stat tone="success"` and a
+ * `ChartSeries tone="success"` render in the same green.
+ *
+ * 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;
+    data: number[];
+    tone?: ChartTone;
+};
+export type BarChartProps = {
+    /** 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 y-axis tick labels (e.g. "%"). */
+    valueSuffix?: string;
+    style?: CSSProperties;
+};
+export type LineChartProps = {
+    categories: string[];
+    series: ChartSeries[];
+    height?: number;
+    /** Fill the area under each line with a soft tint. */
+    fill?: boolean;
+    valueSuffix?: string;
+    style?: CSSProperties;
+};
+export type PieChartProps = {
+    data: Array<ChartDataPoint & {
+        tone?: ChartTone;
+    }>;
+    size?: number;
+    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
+ * />
+ * ```
+ */
+export declare function BarChart({ categories, series, height, stacked, horizontal, normalized, valueSuffix, style }: BarChartProps): JSX.Element;
+/**
+ * Multi-series line chart with optional area fill. Distilled from the
+ * portal-website Highcharts analytics charts.
+ *
+ * Each series draws a polyline with dot markers at each data point.
+ * Set `fill` to shade the area under every line. Hover over any category
+ * column to see a tooltip with all series values at that point.
+ *
+ * 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
+ * // <Pill 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" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function LineChart({ categories, series, height, fill, valueSuffix, 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.
+ *
+ * **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;
+//# sourceMappingURL=chart-primitives.d.ts.map

package/skills-cursor/canvas/sdk/dag-layout.d.ts

@@ -0,0 +1,102 @@
+/**
+ * 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;
+//# sourceMappingURL=dag-layout.d.ts.map

package/skills-cursor/canvas/sdk/diff-view.d.ts

@@ -0,0 +1,130 @@
+/**
+ * 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;
+//# sourceMappingURL=diff-view.d.ts.map