@flesler/cursor-canvas-web 1.3.0 → 1.5.0

package/src/shim/cursor-canvas.tsx

@@ -0,0 +1,136 @@
+/**
+ * Mantine-backed implementation of the `cursor/canvas` module.
+ *
+ * A canvas authored against the real Cursor SDK imports only from
+ * `cursor/canvas`. A Vite alias + tsconfig path redirect that import here, so
+ * the same untouched canvas source renders in a plain web app on GitHub Pages.
+ *
+ * This barrel re-exports split UI/chart/diff/dag/todo modules so export builds
+ * can tree-shake unused Mantine and Recharts code. API-compatible with the real
+ * SDK at `~/.cursor/skills-cursor/canvas/sdk/*.d.ts`.
+ */
+
+export { useEffect, useMemo, useRef, useState } from 'react'
+export type { CSSProperties, RefObject } from 'react'
+export type {
+  CanvasHostThemeBrand,
+  CategoryPalette,
+  ChartPalette,
+  Color,
+} from '../vendor/canvas-sdk/canvas-tokens.js'
+export type { CollapsibleSectionProps } from '../vendor/canvas-sdk/collapsible-section.js'
+export type {
+  CheckboxProps,
+  IconButtonProps,
+  SelectOption,
+  SelectProps,
+  TextAreaProps,
+  TextInputProps,
+  ToggleProps,
+} from '../vendor/canvas-sdk/form-primitives.js'
+export type {
+  CanvasAction,
+  CanvasHostTheme,
+  SetCanvasState,
+} from '../vendor/canvas-sdk/hooks.js'
+export type { SwatchProps } from '../vendor/canvas-sdk/swatch.js'
+export type {
+  CanvasPalette,
+  CanvasTokens,
+} from '../vendor/canvas-sdk/theme.js'
+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 '../vendor/canvas-sdk/ui-primitives.js'
+export type {
+  UsageBarProps,
+  UsageBarSegment,
+} from '../vendor/canvas-sdk/usage-bar.js'
+
+export { mergeStyle, useCanvasAction, useCanvasState } from './canvas-hooks'
+export { BarChart } from './bar-chart'
+export { LineChart } from './line-chart'
+export { PieChart } from './pie-chart'
+export type {
+  BarChartProps,
+  CanvasBarChartExtra,
+  CanvasChartExtra,
+  CanvasChartScale,
+  CanvasChartValueAxisExtra,
+  CanvasLineChartExtra,
+  ChartDataPoint,
+  ChartReferenceLine,
+  ChartSeries,
+  ChartTone,
+  LineChartProps,
+  PieChartProps,
+} from './chart-shared'
+export { computeDAGLayout } from './dag'
+export type {
+  DAGLayoutEdge,
+  DAGLayoutNode,
+  DAGLayoutOptions,
+  DAGLayoutRank,
+  DAGLayoutResult,
+} from './dag'
+export { DiffStats, DiffView } from './diff'
+export type {
+  DiffLineData,
+  DiffLineType,
+  DiffStatsProps,
+  DiffViewProps,
+} from './diff'
+export {
+  canvasPaletteDark,
+  canvasPaletteGrokDark,
+  canvasPaletteGrokLight,
+  canvasPaletteLight,
+  canvasTokens,
+  canvasTokensLight,
+  categoryPaletteDark,
+  categoryPaletteLight,
+  colorPalette,
+  usageColorSequence,
+} from './theme'
+export { TodoList, TodoListCard } from './todo'
+export type {
+  TodoItem,
+  TodoListCardProps,
+  TodoListProps,
+  TodoStatus,
+} from './todo'
+export { useHostTheme } from './use-tokens'
+
+export { Button, IconButton } from './ui/actions'
+export { Card, CardBody, CardHeader } from './ui/card'
+export { Callout, Pill, Stat } from './ui/display'
+export { Checkbox, Select, TextArea, TextInput, Toggle } from './ui/form'
+export { Divider, Grid, Row, Spacer, Stack } from './ui/layout'
+export { CollapsibleSection, Swatch, UsageBar } from './ui/rich'
+export { Table } from './ui/table'
+export { Code, H1, H2, H3, Link, Text } from './ui/typography'

package/src/shim/dag.ts

@@ -0,0 +1,179 @@
+/**
+ * Pure layered DAG layout, matching the SDK's `computeDAGLayout` contract.
+ *
+ * Back-edges (cycles) are detected via DFS, excluded from ranking, and flagged
+ * in the output so callers can render them differently. Rendering is the
+ * caller's responsibility — this returns only coordinates and anchor points.
+ */
+
+export type {
+  DAGLayoutEdge,
+  DAGLayoutNode,
+  DAGLayoutOptions,
+  DAGLayoutRank,
+  DAGLayoutResult,
+} from '../vendor/canvas-sdk/dag-layout.js'
+
+import type { DAGLayoutEdge, DAGLayoutNode, DAGLayoutOptions, DAGLayoutRank, DAGLayoutResult } from '../vendor/canvas-sdk/dag-layout.js'
+
+export function computeDAGLayout(options: DAGLayoutOptions): DAGLayoutResult {
+  const {
+    nodes,
+    edges,
+    direction = 'vertical',
+    nodeWidth = 160,
+    nodeHeight = 40,
+    rankGap = 64,
+    nodeGap = 48,
+    padding = 24,
+  } = options
+
+  const ids = nodes.map(n => n.id)
+  const idSet = new Set(ids)
+  const adjacency = new Map<string, string[]>()
+  for (const id of ids) adjacency.set(id, [])
+  for (const e of edges) {
+    if (idSet.has(e.from) && idSet.has(e.to)) {
+      adjacency.get(e.from)!.push(e.to)
+    }
+  }
+
+  // Detect back-edges with a white/gray/black DFS.
+  const WHITE = 0
+  const GRAY = 1
+  const BLACK = 2
+  const state = new Map<string, number>(ids.map(id => [id, WHITE]))
+  const backEdges = new Set<string>()
+  const edgeKey = (from: string, to: string) => `${from}\u0000${to}`
+
+  const visit = (id: string) => {
+    state.set(id, GRAY)
+    for (const to of adjacency.get(id) ?? []) {
+      const s = state.get(to)
+      if (s === GRAY) backEdges.add(edgeKey(id, to))
+      else if (s === WHITE) visit(to)
+    }
+    state.set(id, BLACK)
+  }
+  for (const id of ids) if (state.get(id) === WHITE) visit(id)
+
+  // Longest-path ranking over the DAG (back-edges removed).
+  const forwardEdges = edges.filter(
+    e =>
+      idSet.has(e.from) &&
+      idSet.has(e.to) &&
+      !backEdges.has(edgeKey(e.from, e.to)),
+  )
+  const indegree = new Map<string, number>(ids.map(id => [id, 0]))
+  const forwardAdj = new Map<string, string[]>(ids.map(id => [id, []]))
+  for (const e of forwardEdges) {
+    forwardAdj.get(e.from)!.push(e.to)
+    indegree.set(e.to, (indegree.get(e.to) ?? 0) + 1)
+  }
+  const rank = new Map<string, number>(ids.map(id => [id, 0]))
+  const queue = ids.filter(id => (indegree.get(id) ?? 0) === 0)
+  while (queue.length > 0) {
+    const id = queue.shift()!
+    const r = rank.get(id)!
+    for (const to of forwardAdj.get(id)!) {
+      rank.set(to, Math.max(rank.get(to)!, r + 1))
+      indegree.set(to, indegree.get(to)! - 1)
+      if (indegree.get(to) === 0) queue.push(to)
+    }
+  }
+
+  // Group by rank, preserving input order within each rank.
+  const byRank = new Map<number, string[]>()
+  for (const id of ids) {
+    const r = rank.get(id)!
+    if (!byRank.has(r)) byRank.set(r, [])
+    byRank.get(r)!.push(id)
+  }
+  const rankIndices = [...byRank.keys()].sort((a, b) => a - b)
+
+  const isVertical = direction === 'vertical'
+  // Cross-axis span (px) of a rank with `count` nodes.
+  const span = (count: number) =>
+    count * (isVertical ? nodeWidth : nodeHeight) +
+    Math.max(0, count - 1) * nodeGap
+  const maxSpan = Math.max(
+    0,
+    ...rankIndices.map(r => span(byRank.get(r)!.length)),
+  )
+
+  const nodeOut = new Map<string, DAGLayoutNode>()
+  const ranksOut: DAGLayoutRank[] = []
+
+  rankIndices.forEach((r, rankPos) => {
+    const rankNodes = byRank.get(r)!
+    const rankSpan = span(rankNodes.length)
+    const crossStart = padding + (maxSpan - rankSpan) / 2
+    const mainPos =
+      padding + rankPos * ((isVertical ? nodeHeight : nodeWidth) + rankGap)
+
+    rankNodes.forEach((id, order) => {
+      const crossPos =
+        crossStart + order * ((isVertical ? nodeWidth : nodeHeight) + nodeGap)
+      const x = isVertical ? crossPos : mainPos
+      const y = isVertical ? mainPos : crossPos
+      nodeOut.set(id, { id, x, y, rank: r, order })
+    })
+
+    ranksOut.push({
+      rank: r,
+      x: isVertical ? crossStart : mainPos,
+      y: isVertical ? mainPos : crossStart,
+      width: isVertical ? rankSpan : nodeWidth,
+      height: isVertical ? nodeHeight : rankSpan,
+      nodeIds: rankNodes,
+    })
+  })
+
+  const anchor = (
+    node: DAGLayoutNode | undefined,
+    role: 'source' | 'target',
+  ) => {
+    if (!node) return { x: 0, y: 0 }
+    if (isVertical) {
+      return {
+        x: node.x + nodeWidth / 2,
+        y: role === 'source' ? node.y + nodeHeight : node.y,
+      }
+    }
+    return {
+      x: role === 'source' ? node.x + nodeWidth : node.x,
+      y: node.y + nodeHeight / 2,
+    }
+  }
+
+  const edgesOut: DAGLayoutEdge[] = edges
+    .filter(e => idSet.has(e.from) && idSet.has(e.to))
+    .map((e) => {
+      const source = anchor(nodeOut.get(e.from), 'source')
+      const target = anchor(nodeOut.get(e.to), 'target')
+      return {
+        from: e.from,
+        to: e.to,
+        sourceX: source.x,
+        sourceY: source.y,
+        targetX: target.x,
+        targetY: target.y,
+        isBackEdge: backEdges.has(edgeKey(e.from, e.to)),
+      }
+    })
+
+  const totalMain =
+    padding * 2 +
+    rankIndices.length * (isVertical ? nodeHeight : nodeWidth) +
+    Math.max(0, rankIndices.length - 1) * rankGap
+  const totalCross = padding * 2 + maxSpan
+
+  return {
+    nodes: [...nodeOut.values()],
+    edges: edgesOut,
+    ranks: ranksOut,
+    direction,
+    width: isVertical ? totalCross : totalMain,
+    height: isVertical ? totalMain : totalCross,
+  }
+}

package/src/shim/diff.tsx

@@ -0,0 +1,161 @@
+/**
+ * Diff primitives. `DiffView` renders a unified diff body (colored line
+ * backgrounds, gutter, accent strip); `DiffStats` is the `+N`/`-N` glyph pair.
+ *
+ * `path` / `language` are accepted for API parity with the IDE SDK. Token
+ * coloring on the web is plain text until a lightweight highlighter lands
+ * (see open-canvas `docs/TODO.md` — Shiki is IDE-only and too heavy to ship).
+ */
+import type { CSSProperties } from 'react'
+import { toneHex } from './theme'
+import { useHostTheme } from './use-tokens'
+
+export type DiffStatsProps = {
+  additions?: number;
+  deletions?: number;
+  style?: CSSProperties
+}
+
+export function DiffStats({
+  additions = 0,
+  deletions = 0,
+  style,
+}: DiffStatsProps) {
+  if (additions === 0 && deletions === 0) return null
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        gap: 8,
+        fontVariantNumeric: 'tabular-nums',
+        fontSize: 12,
+        fontWeight: 600,
+        ...style,
+      }}
+    >
+      {additions > 0 && (
+        <span style={{ color: toneHex.added }}>+{additions}</span>
+      )}
+      {deletions > 0 && (
+        <span style={{ color: toneHex.deleted }}>-{deletions}</span>
+      )}
+    </span>
+  )
+}
+
+export type DiffLineType = 'added' | 'removed' | 'unchanged'
+export type DiffLineData = {
+  type: DiffLineType;
+  content: string;
+  lineNumber?: number
+}
+
+export type DiffViewProps = {
+  lines: DiffLineData[];
+  path?: string;
+  language?: string;
+  showLineNumbers?: boolean;
+  coloredLineNumbers?: boolean;
+  showAccentStrip?: boolean;
+  style?: CSSProperties
+}
+
+const SIGN: Record<DiffLineType, string> = {
+  added: '+',
+  removed: '-',
+  unchanged: ' ',
+}
+
+export function DiffView({
+  lines,
+  showLineNumbers = true,
+  coloredLineNumbers = true,
+  showAccentStrip = true,
+  style,
+}: DiffViewProps) {
+  const theme = useHostTheme()
+
+  const lineBg = (type: DiffLineType) =>
+    type === 'added'
+      ? theme.diff.insertedLine
+      : type === 'removed'
+        ? theme.diff.removedLine
+        : 'transparent'
+
+  const stripColor = (type: DiffLineType) =>
+    type === 'added'
+      ? theme.diff.stripAdded
+      : type === 'removed'
+        ? theme.diff.stripRemoved
+        : 'transparent'
+
+  const numberColor = (type: DiffLineType) => {
+    if (coloredLineNumbers && type === 'added') return toneHex.added
+    if (coloredLineNumbers && type === 'removed') return toneHex.deleted
+    return theme.text.tertiary
+  }
+
+  return (
+    <div
+      style={{
+        fontFamily:
+          'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace',
+        fontSize: 12.5,
+        lineHeight: '18px',
+        color: theme.text.primary,
+        overflowX: 'auto',
+        ...style,
+      }}
+    >
+      {lines.map((line, index) => (
+        <div
+          key={index}
+          style={{
+            display: 'flex',
+            alignItems: 'stretch',
+            background: lineBg(line.type),
+            borderLeft: showAccentStrip
+              ? `3px solid ${stripColor(line.type)}`
+              : undefined,
+          }}
+        >
+          {showLineNumbers && (
+            <span
+              style={{
+                flex: '0 0 auto',
+                width: 40,
+                textAlign: 'right',
+                paddingRight: 10,
+                userSelect: 'none',
+                color: numberColor(line.type),
+              }}
+            >
+              {line.lineNumber ?? ''}
+            </span>
+          )}
+          <span
+            style={{
+              flex: '0 0 auto',
+              width: 14,
+              textAlign: 'center',
+              userSelect: 'none',
+              color: numberColor(line.type),
+            }}
+          >
+            {SIGN[line.type]}
+          </span>
+          <pre
+            style={{
+              margin: 0,
+              padding: '0 8px',
+              whiteSpace: 'pre',
+              fontFamily: 'inherit',
+            }}
+          >
+            {line.content}
+          </pre>
+        </div>
+      ))}
+    </div>
+  )
+}