bytespost-canvas 0.1.0

package/dist/protocol.d.ts

@@ -0,0 +1,212 @@
+/**
+ * Agent-bridge wire protocol (v1).
+ *
+ * The daemon relays each HTTP/CLI/MCP request to one browser tab over WebSocket
+ * as a `BridgeCommand`, and the tab answers with a `BridgeReply` carrying the
+ * same `id`. Browser tabs first announce themselves with a `hello` message so
+ * local agents can list and target every open canvas.
+ */
+export declare const PROTOCOL_VERSION: "1";
+/** Command kinds the daemon can ask the canvas to perform. */
+export type BridgeCommandType = 'health' | 'screenshot' | 'draw' | 'document_get' | 'document_nodes' | 'node_get' | 'node_update' | 'node_delete' | 'select_set' | 'select_clear' | 'viewport_fit' | 'viewport_zoom' | 'building_create';
+export interface CanvasTabInfo {
+    id: string;
+    title?: string;
+    app?: string;
+    url?: string;
+    canvasType?: string;
+    ready?: boolean;
+    document?: {
+        id?: string;
+        name?: string;
+        nodeCount?: number;
+    };
+    capabilities?: string[];
+    connectedAt?: string;
+    lastSeenAt?: string;
+}
+export interface BrowserHello {
+    type: 'hello';
+    tab: CanvasTabInfo;
+}
+/**
+ * A minimal, renderer-agnostic node spec the external agent sends. Coordinates
+ * are in canvas/WORLD space (the same units the editor's pointer tools use).
+ * `fill`/`stroke`/`color` accept a `#rrggbb` hex string; the browser converts
+ * it into the IR's {r,g,b,a} 0..1 color before constructing the NodeIR.
+ */
+export type DrawNodeSpec = {
+    type: 'rect';
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    /** Hex fill, e.g. '#3b82f6'. Omit for the editor default. */
+    fill?: string;
+    /** Hex stroke colour; when set a 1px (or `strokeWidth`) stroke is added. */
+    stroke?: string;
+    strokeWidth?: number;
+    /** Uniform corner radius in px. */
+    radius?: number;
+    name?: string;
+} | {
+    type: 'text';
+    x: number;
+    y: number;
+    text: string;
+    fontSize?: number;
+    /** Hex text colour, e.g. '#ffffff'. */
+    color?: string;
+    /** Optional fixed box width; height auto-grows. */
+    w?: number;
+    name?: string;
+} | {
+    type: 'frame';
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    fill?: string;
+    name?: string;
+} | {
+    type: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke?: string;
+    width?: number;
+    name?: string;
+};
+/** HTTP /v1/draw request body. */
+export interface DrawRequest {
+    nodes: DrawNodeSpec[];
+}
+/** A command the daemon sends to the canvas over WS. */
+export interface BridgeCommand {
+    /** Correlation id; the reply MUST echo this. */
+    id: string;
+    type: BridgeCommandType;
+    /** Present only for `draw` commands. */
+    nodes?: DrawNodeSpec[];
+    /** Present for node commands. */
+    nodeId?: string;
+    /** Present for `node_update`; shallow patch applied by the browser. */
+    patch?: Record<string, unknown>;
+    /** Present for selection commands. */
+    nodeIds?: string[];
+    /** Present for viewport zoom commands. */
+    zoom?: number;
+    /** Present for `building_create`. */
+    buildingType?: string;
+    /** Domain-specific tool payload, including building operations. */
+    input?: Record<string, unknown>;
+}
+/** Health reply payload. */
+export interface HealthReplyData {
+    ok: true;
+}
+/**
+ * Screenshot reply payload. The PNG is carried as a base64 string so the
+ * whole reply fits in one JSON text frame (SLICE 1 — simple over fast).
+ */
+export interface ScreenshotReplyData {
+    /** base64-encoded PNG bytes (no data: prefix). */
+    pngBase64: string;
+    width: number;
+    height: number;
+}
+/** Draw reply payload: the ids of the nodes that were created, in input order. */
+export interface DrawReplyData {
+    nodeIds: string[];
+}
+export interface DocumentNodesReplyData {
+    nodes: Array<{
+        id: string;
+        type?: string;
+        name?: string;
+        parentId?: string;
+        pageId?: string;
+        depth?: number;
+    }>;
+}
+export interface CommandReplyData {
+    [key: string]: unknown;
+}
+/** A reply the canvas sends back to the daemon. */
+export type BridgeReply = {
+    id: string;
+    ok: true;
+    type: 'health';
+    data: HealthReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'screenshot';
+    data: ScreenshotReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'draw';
+    data: DrawReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'document_get';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'document_nodes';
+    data: DocumentNodesReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'node_get';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'node_update';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'node_delete';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'select_set';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'select_clear';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'viewport_fit';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'viewport_zoom';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: true;
+    type: 'building_create';
+    data: CommandReplyData;
+} | {
+    id: string;
+    ok: false;
+    error: string;
+};
+/** HTTP /v1/health JSON shape. */
+export interface HealthResponse {
+    canvasConnected: boolean;
+    tabCount: number;
+    version: typeof PROTOCOL_VERSION;
+}

package/dist/protocol.js

@@ -0,0 +1,9 @@
+/**
+ * Agent-bridge wire protocol (v1).
+ *
+ * The daemon relays each HTTP/CLI/MCP request to one browser tab over WebSocket
+ * as a `BridgeCommand`, and the tab answers with a `BridgeReply` carrying the
+ * same `id`. Browser tabs first announce themselves with a `hello` message so
+ * local agents can list and target every open canvas.
+ */
+export const PROTOCOL_VERSION = '1';

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "bytespost-canvas",
+  "version": "0.1.0",
+  "description": "Local CLI + MCP server for the bytespost canvas — drive a running canvas tab from the terminal or any AI agent.",
+  "keywords": [
+    "bytespost",
+    "canvas",
+    "cli",
+    "mcp",
+    "ai",
+    "claude",
+    "agent",
+    "design",
+    "figma-like"
+  ],
+  "homepage": "https://app.bytespost.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yunfengsay/canvas-three-gpu.git",
+    "directory": "packages/agent-bridge"
+  },
+  "license": "MIT",
+  "author": "bytespost",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "canvas-bridge": "./dist/cli.js",
+    "canvas": "./dist/cli.js",
+    "canvasd": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && chmod +x dist/cli.js",
+    "prepublishOnly": "npm run build",
+    "serve": "tsx src/cli.ts serve",
+    "cli": "tsx src/cli.ts",
+    "test": "node --import tsx --test test/**/*.test.mjs"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "ws": "^8.18.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.39",
+    "@types/ws": "^8.5.12",
+    "tsx": "^4.19.2",
+    "typescript": "^5.8.3"
+  }
+}