@flesler/cursor-canvas-web 0.0.0-stage → 1.0.1

package/dist/runtime/index.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { Root } from 'react-dom/client';
+import { MantineColorScheme } from '@mantine/core';
+export interface CanvasRootProps {
+    children: ReactNode;
+    /** Initial color scheme; defaults to following the OS preference. */
+    defaultColorScheme?: MantineColorScheme;
+}
+/**
+ * Wraps a canvas in the `MantineProvider` the shim components require. Use this
+ * when you manage your own React root (e.g. inside an existing app tree).
+ */
+export declare function CanvasRoot({ children, defaultColorScheme, }: CanvasRootProps): import("react").JSX.Element;
+export interface MountCanvasOptions {
+    defaultColorScheme?: MantineColorScheme;
+    /** Skip `StrictMode` (e.g. for libraries that double-render badly). */
+    strict?: boolean;
+}
+/**
+ * One-call entry for a standalone page: resolves the container (element or id),
+ * mounts the canvas inside `CanvasRoot`, and returns the React root so callers
+ * can `unmount()` later.
+ */
+export declare function mountCanvas(container: HTMLElement | string, canvas: ReactNode, options?: MountCanvasOptions): Root;

package/dist/runtime.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("react"),l=require("react-dom/client"),m=require("@mantine/core");function u({children:t,defaultColorScheme:e="auto"}){return o.jsx(m.MantineProvider,{defaultColorScheme:e,children:t})}function f(t,e,c={}){const{defaultColorScheme:i="auto",strict:a=!0}=c,r=typeof t=="string"?document.getElementById(t):t;if(!r)throw new Error(`mountCanvas: container ${typeof t=="string"?`#${t}`:""} not found`);const n=l.createRoot(r),s=o.jsx(u,{defaultColorScheme:i,children:e});return n.render(a?o.jsx(d.StrictMode,{children:s}):s),n}exports.CanvasRoot=u;exports.mountCanvas=f;

package/dist/runtime.js

@@ -0,0 +1,23 @@
+import { jsx as r } from "react/jsx-runtime";
+import { StrictMode as s } from "react";
+import { createRoot as c } from "react-dom/client";
+import { MantineProvider as d } from "@mantine/core";
+function a({
+  children: t,
+  defaultColorScheme: o = "auto"
+}) {
+  return /* @__PURE__ */ r(d, { defaultColorScheme: o, children: t });
+}
+function C(t, o, i = {}) {
+  const { defaultColorScheme: u = "auto", strict: f = !0 } = i, e = typeof t == "string" ? document.getElementById(t) : t;
+  if (!e)
+    throw new Error(
+      `mountCanvas: container ${typeof t == "string" ? `#${t}` : ""} not found`
+    );
+  const n = c(e), m = /* @__PURE__ */ r(a, { defaultColorScheme: u, children: o });
+  return n.render(f ? /* @__PURE__ */ r(s, { children: m }) : m), n;
+}
+export {
+  a as CanvasRoot,
+  C as mountCanvas
+};

package/dist/shim/charts.d.ts

@@ -0,0 +1,62 @@
+import { CSSProperties } from 'react';
+export type ChartTone = 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+export type ChartDataPoint = {
+    label: string;
+    value: number;
+};
+export type ChartSeries = {
+    name: string;
+    data: number[];
+    tone?: ChartTone;
+};
+export type ChartReferenceLine = {
+    value: number;
+    label?: string;
+    tone?: ChartTone;
+};
+type ValueAxisProps = {
+    beginAtZero?: boolean;
+    yMin?: number;
+    yMax?: number;
+    referenceLines?: ChartReferenceLine[];
+};
+export type BarChartProps = ValueAxisProps & {
+    categories: string[];
+    series: ChartSeries[];
+    height?: number;
+    stacked?: boolean;
+    horizontal?: boolean;
+    normalized?: boolean;
+    valueSuffix?: string;
+    valuePrefix?: string;
+    showValues?: boolean;
+    style?: CSSProperties;
+};
+export type LineChartProps = ValueAxisProps & {
+    categories: string[];
+    series: ChartSeries[];
+    height?: number;
+    fill?: boolean;
+    valueSuffix?: string;
+    valuePrefix?: string;
+    showValues?: boolean;
+    showHoverGuide?: boolean;
+    style?: CSSProperties;
+};
+export type PieChartProps = {
+    data: Array<ChartDataPoint & {
+        tone?: ChartTone;
+    }>;
+    size?: number;
+    donut?: boolean;
+    style?: CSSProperties;
+};
+/**
+ * Fork-only export (not in IDE `index.d.ts`); keeps chart data shaping stable for
+ * Mantine — listed under “fork-only” in `pnpm run check:sdk-exports`.
+ */
+export declare function reshapeLineChartData(categories: string[], series: ChartSeries[]): Record<string, string | number>[];
+export declare function LineChart({ categories, series, height, fill, valueSuffix, valuePrefix, showValues, showHoverGuide, beginAtZero, yMin, yMax, referenceLines, style, }: LineChartProps): import("react").JSX.Element;
+export declare function BarChart({ categories, series, height, stacked, horizontal, normalized, valueSuffix, valuePrefix, showValues, beginAtZero, yMin, yMax, referenceLines, style, }: BarChartProps): import("react").JSX.Element;
+export declare function PieChart({ data, size, donut, style }: PieChartProps): import("react").JSX.Element;
+export {};

package/dist/shim/cursor-canvas.d.ts

@@ -0,0 +1,278 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Color } from './theme';
+export { useEffect, useMemo, useRef, useState } from 'react';
+export type { CSSProperties, RefObject } from 'react';
+export { BarChart, LineChart, PieChart, reshapeLineChartData } from './charts';
+export type { BarChartProps, ChartDataPoint, ChartReferenceLine, ChartSeries, ChartTone, LineChartProps, PieChartProps } from './charts';
+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, canvasPaletteLight, canvasTokens, canvasTokensLight, categoryPaletteDark, categoryPaletteLight, colorPalette, usageColorSequence } from './theme';
+export type { CanvasHostTheme, CanvasPalette, CanvasTokens, CategoryPalette, Color } from './theme';
+export { TodoList, TodoListCard } from './todo';
+export type { TodoItem, TodoListCardProps, TodoListProps, TodoStatus } from './todo';
+export { useHostTheme } from './use-tokens';
+export type SetCanvasState<T> = (action: T | ((prev: T) => T)) => void;
+/**
+ * Persistent state hook. The real SDK stores values in a `.canvas.data.json`
+ * sidecar; on the web we persist to `localStorage` under `canvas:<key>`.
+ */
+export declare function useCanvasState<T>(key: string, defaultValue: T): [T, SetCanvasState<T>];
+export type CanvasAction = {
+    type: 'openAgent';
+    agentId: string;
+} | {
+    type: 'newComposerChat';
+    userPrompt?: string;
+} | {
+    type: 'openFile';
+    path: string;
+    selection?: {
+        startLineNumber: number;
+        startColumn: number;
+        endLineNumber?: number;
+        endColumn?: number;
+    };
+};
+/**
+ * IDE actions are not available on the web host, so the returned dispatch is a
+ * no-op (it logs in dev). Exists for API parity with the real SDK.
+ */
+export declare function useCanvasAction(): (action: CanvasAction) => void;
+/** Shallow-merge two style objects, `override` winning. */
+export declare function mergeStyle(base: CSSProperties, override?: CSSProperties): CSSProperties;
+export interface H1Props {
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function H1({ children, style }: H1Props): import("react").JSX.Element;
+export interface H2Props {
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function H2({ children, style }: H2Props): import("react").JSX.Element;
+export interface H3Props {
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function H3({ children, style }: H3Props): import("react").JSX.Element;
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+export type TextTone = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+export interface TextProps {
+    children?: ReactNode;
+    tone?: TextTone;
+    size?: 'body' | 'small';
+    as?: 'p' | 'span';
+    weight?: TextWeight;
+    italic?: boolean;
+    truncate?: boolean | 'start' | 'end';
+    style?: CSSProperties;
+}
+export declare function Text({ children, tone, size, as, weight, italic, truncate, style, }: TextProps): import("react").JSX.Element;
+export interface CodeProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function Code({ children, style }: CodeProps): import("react").JSX.Element;
+export interface LinkProps {
+    children?: ReactNode;
+    href: string;
+    style?: CSSProperties;
+}
+export declare function Link({ children, href, style }: LinkProps): import("react").JSX.Element;
+export interface StackProps {
+    children?: ReactNode;
+    gap?: number;
+    style?: CSSProperties;
+}
+export declare function Stack({ children, gap, style }: StackProps): import("react").JSX.Element;
+export interface RowProps {
+    children?: ReactNode;
+    gap?: number;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'space-between';
+    wrap?: boolean;
+    style?: CSSProperties;
+}
+export declare function Row({ children, gap, align, justify, wrap, style, }: RowProps): import("react").JSX.Element;
+/** Flexible filler that pushes siblings apart inside a `Row`. */
+export declare function Spacer(): import("react").JSX.Element;
+export interface GridProps {
+    children?: ReactNode;
+    columns: number | string;
+    gap?: number;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    style?: CSSProperties;
+}
+export declare function Grid({ children, columns, gap, align, style }: GridProps): import("react").JSX.Element;
+export interface DividerProps {
+    style?: CSSProperties;
+}
+export declare function Divider({ style }: DividerProps): import("react").JSX.Element;
+export type CardVariant = 'default' | 'borderless';
+export type CardSize = 'base' | 'lg';
+export interface CardProps {
+    children?: ReactNode;
+    variant?: CardVariant;
+    size?: CardSize;
+    stickyHeader?: boolean;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    style?: CSSProperties;
+}
+export declare function Card({ children, variant, collapsible, defaultOpen, open: openProp, onOpenChange, style, }: CardProps): import("react").JSX.Element;
+export interface CardHeaderProps {
+    children?: ReactNode;
+    trailing?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function CardHeader({ children, trailing, style }: CardHeaderProps): import("react").JSX.Element;
+export interface CardBodyProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function CardBody({ children, style }: CardBodyProps): import("react").JSX.Element | null;
+export type StatTone = 'success' | 'danger' | 'warning' | 'info';
+export interface StatProps {
+    value: ReactNode;
+    label: string;
+    tone?: StatTone;
+    style?: CSSProperties;
+}
+export declare function Stat({ value, label, tone, style }: StatProps): import("react").JSX.Element;
+export type PillTone = 'neutral' | 'added' | 'deleted' | 'renamed' | 'success' | 'warning' | 'info';
+export type PillSize = 'sm' | 'md';
+export interface PillProps {
+    children?: ReactNode;
+    active?: boolean;
+    tone?: PillTone;
+    size?: PillSize;
+    leadingContent?: ReactNode;
+    keyboardHint?: string;
+    disabled?: boolean;
+    title?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+}
+export declare function Pill({ children, active, tone, size, leadingContent, keyboardHint, title, style, onClick, }: PillProps): import("react").JSX.Element;
+export type CalloutTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface CalloutProps {
+    children?: ReactNode;
+    tone?: CalloutTone;
+    title?: ReactNode;
+    icon?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function Callout({ children, tone, title, icon, style, }: CalloutProps): import("react").JSX.Element;
+export type TableColumnAlign = 'left' | 'center' | 'right';
+export type TableRowTone = 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+export interface TableProps {
+    headers: readonly ReactNode[];
+    rows: readonly (readonly ReactNode[])[];
+    columnAlign?: readonly (TableColumnAlign | undefined)[];
+    rowTone?: readonly (TableRowTone | undefined)[];
+    framed?: boolean;
+    striped?: boolean;
+    stickyHeader?: boolean;
+    style?: CSSProperties;
+    emptyMessage?: ReactNode;
+}
+export declare function Table({ headers, rows, columnAlign, rowTone, framed, striped, stickyHeader, style, emptyMessage, }: TableProps): import("react").JSX.Element;
+export interface ButtonProps {
+    children?: ReactNode;
+    variant?: 'primary' | 'secondary' | 'ghost';
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    style?: CSSProperties;
+    onClick?: () => void;
+}
+export declare function Button({ children, variant, disabled, type, style, onClick, }: ButtonProps): import("react").JSX.Element;
+export interface IconButtonProps {
+    children: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    title?: string;
+    variant?: 'default' | 'circle';
+    size?: 'sm' | 'md';
+    style?: CSSProperties;
+}
+export declare function IconButton({ children, onClick, disabled, title, variant, size, style, }: IconButtonProps): import("react").JSX.Element;
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+export declare function Select({ value, onChange, options, placeholder, disabled, style, }: SelectProps): import("react").JSX.Element;
+export interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: ReactNode;
+    style?: CSSProperties;
+}
+export declare function Checkbox({ checked, onChange, disabled, label, style, }: CheckboxProps): import("react").JSX.Element;
+export interface ToggleProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    style?: CSSProperties;
+}
+export declare function Toggle({ checked, onChange, disabled, size, style, }: ToggleProps): import("react").JSX.Element;
+export interface TextInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'search';
+    style?: CSSProperties;
+}
+export declare function TextInput({ value, onChange, placeholder, disabled, type, style, }: TextInputProps): import("react").JSX.Element;
+export interface TextAreaProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    rows?: number;
+    style?: CSSProperties;
+}
+export declare function TextArea({ value, onChange, placeholder, disabled, rows, style, }: TextAreaProps): import("react").JSX.Element;
+export interface SwatchProps {
+    color: Color;
+    style?: CSSProperties;
+}
+export declare function Swatch({ color, style }: SwatchProps): import("react").JSX.Element;
+export interface UsageBarSegment {
+    readonly id: string;
+    readonly value: number;
+    readonly color?: Color;
+}
+export interface UsageBarProps {
+    readonly segments: readonly UsageBarSegment[];
+    readonly total: number;
+    readonly topLeftLabel?: ReactNode;
+    readonly topRightLabel?: ReactNode;
+    readonly style?: CSSProperties;
+}
+export declare function UsageBar({ segments, total, topLeftLabel, topRightLabel, style, }: UsageBarProps): import("react").JSX.Element;
+export interface CollapsibleSectionProps {
+    title: string;
+    leading?: ReactNode;
+    count?: number;
+    trailing?: ReactNode;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    style?: CSSProperties;
+}
+export declare function CollapsibleSection({ title, leading, count, trailing, children, defaultOpen, style, }: CollapsibleSectionProps): import("react").JSX.Element;

package/dist/shim/dag.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 DAGLayoutOptions = {
+    nodes: Array<{
+        id: string;
+    }>;
+    edges: Array<{
+        from: string;
+        to: string;
+    }>;
+    direction?: 'vertical' | 'horizontal';
+    nodeWidth?: number;
+    nodeHeight?: number;
+    rankGap?: number;
+    nodeGap?: number;
+    padding?: number;
+};
+export type DAGLayoutNode = {
+    id: string;
+    x: number;
+    y: number;
+    rank: number;
+    order: number;
+};
+export type DAGLayoutEdge = {
+    from: string;
+    to: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    isBackEdge: boolean;
+};
+export type DAGLayoutRank = {
+    rank: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    nodeIds: string[];
+};
+export type DAGLayoutResult = {
+    nodes: DAGLayoutNode[];
+    edges: DAGLayoutEdge[];
+    ranks: DAGLayoutRank[];
+    direction: 'vertical' | 'horizontal';
+    width: number;
+    height: number;
+};
+export declare function computeDAGLayout(options: DAGLayoutOptions): DAGLayoutResult;

package/dist/shim/diff.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+export type DiffStatsProps = {
+    additions?: number;
+    deletions?: number;
+    style?: CSSProperties;
+};
+export declare function DiffStats({ additions, deletions, style, }: DiffStatsProps): import("react").JSX.Element | null;
+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;
+};
+export declare function DiffView({ lines, showLineNumbers, coloredLineNumbers, showAccentStrip, style, }: DiffViewProps): import("react").JSX.Element;