@lace-cloud/canvas

Lace Cloud's visual canvas — the React + ReactFlow webview UI for visually composing Terraform modules. Transport-agnostic: drives either VS Code postMessage (extension host) or Connect-JSON over fetch (browser/Storybook).

Install

npm install @lace-cloud/canvas @lace-cloud/design-tokens react react-dom @xyflow/react

Usage (VS Code postMessage path)

import { App, type HostBridge, PostMessageEngine } from '@lace-cloud/canvas';
import { createRoot } from 'react-dom/client';
import '@lace-cloud/design-tokens/tokens.css';

const vscode = acquireVsCodeApi();
const engine = new PostMessageEngine(vscode);
const hostBridge: HostBridge = {
  signalReady: () => vscode.postMessage({ command: 'webviewReady' }),
  markDirty: () => vscode.postMessage({ command: 'markDirty' }),
  markClean: () => vscode.postMessage({ command: 'markClean' }),
  triggerGenerate: () => vscode.postMessage({ command: 'generate' }),
  openFile: (relativePath, line, column) =>
    vscode.postMessage({ command: 'openFile', relativePath, line, column }),
};

createRoot(document.getElementById('root')!).render(
  <App engine={engine} hostBridge={hostBridge} />
);

Usage (browser fetch path, Storybook + portal)

import { App, ConnectWebEngine, type HostBridge } from '@lace-cloud/canvas';

const engine = new ConnectWebEngine({ baseUrl: 'http://localhost:50051' });
engine.startSubscribe(); // open the StateUpdated stream

createRoot(document.getElementById('root')!).render(
  <App engine={engine} hostBridge={browserHostBridge} />
);

Read-only mode

<App engine={engine} hostBridge={hostBridge} readOnly />

For consumers that show state without letting users mutate it (portal's control plane is the driving example). Three-layer gating (xyflow native props + conditional handler installation + render gates) ensures no mutation slips through. See lace's CLAUDE.md for the full contract.

CanvasEngine interface

The contract between webview and backend. PostMessageEngine and ConnectWebEngine both implement it; consumers (App, hooks) work with either. See lace's AGENTS.md for the full method list.

License

Proprietary — see LICENSE.