@rwoll/canvas-kit 0.0.0-stage → 0.1.1

package/dist/testing.d.ts

@@ -0,0 +1,49 @@
+import type { ActionInput, ActionResult, ActionsOf, AgentMessage, AnyCanvas, JobName, JobStatusOf, StateOf } from './define.ts';
+import type { JobAction } from './jobs.ts';
+import { CanvasHost, type JobOutcome, type OpenResult, type RunJobOptions } from './server/host.ts';
+import type { ReleaseInfo } from './server/release.ts';
+import type { StateStoreOptions } from './server/storage.ts';
+/** Actions a test can call: the canvas's own, `get_state`, and the built-in job actions. */
+export type HarnessAction<C extends AnyCanvas> = Extract<keyof ActionsOf<C>, string> | 'get_state' | JobAction;
+export type HarnessInput<C extends AnyCanvas, K> = K extends keyof ActionsOf<C> ? ActionInput<C, K> : K extends JobAction ? Record<string, unknown> : Record<string, never>;
+export type HarnessResult<C extends AnyCanvas, K> = K extends keyof ActionsOf<C> ? ActionResult<C, K> : K extends JobAction ? unknown : StateOf<C>;
+export interface TestCanvas<C extends AnyCanvas> {
+    readonly host: CanvasHost;
+    /** Temporary folder used instead of `<copilot-home>/extension-data`. */
+    readonly dataRoot: string;
+    /** Messages actions sent with `ctx.sendToAgent()`, oldest first. */
+    readonly sentToAgent: AgentMessage[];
+    open(instanceId: string, input?: unknown): Promise<OpenResult>;
+    invoke<K extends HarnessAction<C>>(instanceId: string, action: K, input?: HarnessInput<C, K>, source?: 'agent' | 'ui'): Promise<HarnessResult<C, K>>;
+    state(instanceId: string): StateOf<C> | undefined;
+    /** The instance's jobs, as `useJobs()` shows them. */
+    jobs(instanceId: string): JobStatusOf<C>[] | undefined;
+    /**
+     * Run a job now (even if not due or paused, unless `force: false`) for an instance
+     * or a saved key: a job's name, or the ID of a job added from a job with input.
+     */
+    runJob(id: JobName<C> | (string & {}), options?: RunJobOptions): Promise<JobOutcome>;
+    /** Run every due job once, as the host's timer does. */
+    tickJobs(): Promise<void>;
+    /** Close the host and delete the temporary data folder. */
+    close(): Promise<void>;
+}
+export interface TestCanvasOptions {
+    uiDir?: string;
+    dataRoot?: string;
+    release?: ReleaseInfo;
+    /** Replace the default recorder, for example to simulate a failed send. */
+    sendToAgent?: (message: AgentMessage) => Promise<void>;
+    /** The clock for `ctx.now()` and job schedules. */
+    now?: () => number;
+    /** Run due jobs on a timer (`auto`) or only through `runJob` and `tickJobs` (`manual`, the default). */
+    jobs?: 'auto' | 'manual';
+    /** Cross-process lock timings, for tests of contention. */
+    store?: StateStoreOptions;
+}
+/**
+ * Run a canvas definition with a real HTTP server and private storage in a
+ * temporary folder, without the Copilot SDK.
+ */
+export declare function createTestCanvas<C extends AnyCanvas>(canvas: C, options?: TestCanvasOptions): Promise<TestCanvas<C>>;
+//# sourceMappingURL=testing.d.ts.map

package/dist/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"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"}

package/dist/testing.js

@@ -0,0 +1,42 @@
+import { mkdtemp, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { CanvasHost } from "./server/host.js";
+/**
+ * Run a canvas definition with a real HTTP server and private storage in a
+ * temporary folder, without the Copilot SDK.
+ */
+export async function createTestCanvas(canvas, options = {}) {
+    const ownsData = !options.dataRoot;
+    const dataRoot = options.dataRoot ?? (await mkdtemp(join(tmpdir(), 'canvas-kit-test-')));
+    const sentToAgent = [];
+    const host = new CanvasHost(canvas, {
+        uiDir: options.uiDir,
+        dataRoot,
+        release: options.release,
+        sendToAgent: options.sendToAgent ??
+            (async (message) => {
+                sentToAgent.push(message);
+            }),
+        now: options.now,
+        jobs: options.jobs ?? 'manual',
+        store: options.store,
+    });
+    return {
+        host,
+        dataRoot,
+        sentToAgent,
+        open: (instanceId, input) => host.open({ instanceId, input }),
+        invoke: (instanceId, action, input, source = 'agent') => host.invoke({ instanceId, actionName: action, input, source }),
+        state: instanceId => host.snapshot(instanceId)?.state,
+        jobs: instanceId => host.snapshot(instanceId)?.jobs,
+        runJob: (id, runOptions) => host.runJob(id, runOptions),
+        tickJobs: () => host.tickJobs(),
+        close: async () => {
+            await host.close();
+            if (ownsData)
+                await rm(dataRoot, { recursive: true, force: true });
+        },
+    };
+}
+//# sourceMappingURL=testing.js.map

package/dist/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC,OAAO,EAAE,UAAU,EAAwD,MAAM,kBAAkB,CAAC;AAsDpG;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAsB,MAAS,EAAE,UAA6B,EAAE;IACpG,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnC,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACzF,MAAM,WAAW,GAAmB,EAAE,CAAC;IACvC,MAAM,IAAI,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QAClC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,QAAQ;QACR,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,WAAW,EACT,OAAO,CAAC,WAAW;YACnB,CAAC,KAAK,EAAC,OAAO,EAAC,EAAE;gBACf,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5B,CAAC,CAAC;QACJ,GAAG,EAAE,OAAO,CAAC,GAAG;QAChB,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,QAAQ;QAC9B,KAAK,EAAE,OAAO,CAAC,KAAK;KACrB,CAAC,CAAC;IACH,OAAO;QACL,IAAI;QACJ,QAAQ;QACR,WAAW;QACX,IAAI,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;QAC7D,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,EAAE,CACtD,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAU;QACzE,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAA+B;QAC/E,IAAI,EAAE,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,IAAoC;QACnF,MAAM,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,UAAU,CAAC;QACvD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC/B,KAAK,EAAE,KAAK,IAAI,EAAE;YAChB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,IAAI,QAAQ;gBAAE,MAAM,EAAE,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACrE,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/vite.d.ts

@@ -0,0 +1,15 @@
+import type { PluginOption } from 'vite';
+export interface CanvasKitOptions {
+    /** Module whose default export is the `defineCanvas()` result, relative to the Vite root. */
+    entry?: string;
+    /** Plugin and extension folder name. Defaults to the canvas package folder name. */
+    name?: string;
+    /** `open_canvas` input for the dev server's preview instance. */
+    devInput?: unknown;
+}
+/**
+ * Vite plugins for a canvas package. `vite build` writes an installable plugin to
+ * `dist/plugin/`; `vite` serves the UI with the canvas definition running in-process.
+ */
+export declare function canvasKit(options?: CanvasKitOptions): PluginOption[];
+//# sourceMappingURL=vite.d.ts.map

package/dist/vite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAU,YAAY,EAAiB,MAAM,MAAM,CAAC;AAMhE,MAAM,WAAW,gBAAgB;IAC/B,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,GAAG,YAAY,EAAE,CAIxE"}

package/dist/vite.js

@@ -0,0 +1,213 @@
+import react from '@vitejs/plugin-react';
+import { readFileSync } from 'node:fs';
+import { mkdir, rm, writeFile } from 'node:fs/promises';
+import { isBuiltin } from 'node:module';
+import { basename, join, resolve, sep } from 'node:path';
+import { CanvasKitError } from "./errors.js";
+import { CanvasHost, injectBootstrap } from "./server/host.js";
+import { injectReleaseFooter } from "./server/release.js";
+const ENTRY_ID = 'virtual:canvas-kit/extension-entry';
+const RESOLVED_ENTRY_ID = `\0${ENTRY_ID}`;
+// canvas.mjs: the definition and a headless job runner, loadable without the Copilot SDK.
+const CANVAS_ENTRY_ID = 'virtual:canvas-kit/canvas-entry';
+const RESOLVED_CANVAS_ENTRY_ID = `\0${CANVAS_ENTRY_ID}`;
+const NAME_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const DEV_INSTANCE = 'dev';
+const VITEST_EXCLUDE = ['**/node_modules/**', '**/dist/**', 'e2e/**'];
+/**
+ * Vite plugins for a canvas package. `vite build` writes an installable plugin to
+ * `dist/plugin/`; `vite` serves the UI with the canvas definition running in-process.
+ */
+export function canvasKit(options = {}) {
+    // Under Vitest, skip the Playwright specs in e2e/; they run with `playwright test`.
+    if (process.env.VITEST)
+        return [react(), { name: 'canvas-kit:vitest', config: () => ({ test: { exclude: VITEST_EXCLUDE } }) }];
+    return [react(), canvasKitPlugin(options)];
+}
+function canvasKitPlugin(options) {
+    let root = process.cwd();
+    let name = '';
+    let pkg = { version: '', description: '' };
+    let entry = '';
+    let outRoot = '';
+    let devServer;
+    let devHost;
+    let devCanvas;
+    const devRelease = () => ({ name, version: pkg.version, channel: 'dev' });
+    const devHostFor = async (server) => {
+        const module = (await server.ssrLoadModule(entry));
+        const canvas = module.default;
+        if (canvas?.kind !== 'canvas-kit/canvas')
+            throw new Error(`${entry} must default-export defineCanvas(...)`);
+        if (!devHost || canvas !== devCanvas) {
+            await devHost?.close();
+            devCanvas = canvas;
+            devHost = new CanvasHost(canvas, {
+                dataRoot: join(root, 'node_modules', '.canvas-dev-data'),
+                release: devRelease(),
+                // There is no agent in the dev server; show what would have been sent.
+                sendToAgent: async (message) => {
+                    server.config.logger.info(`[canvas] Message for the agent (${message.mode ?? 'enqueue'}):\n${message.prompt}`);
+                },
+                log: (message, level) => {
+                    const logger = server.config.logger;
+                    if (level === 'error')
+                        logger.error(`[canvas] ${message}`);
+                    else if (level === 'warning')
+                        logger.warn(`[canvas] ${message}`);
+                    else
+                        logger.info(`[canvas] ${message}`);
+                },
+            });
+            // Opened once per definition, like an agent opening the canvas; page loads do not reopen it.
+            await devHost.openLocal({ instanceId: DEV_INSTANCE, input: options.devInput });
+        }
+        return devHost;
+    };
+    return {
+        name: 'canvas-kit',
+        config(config) {
+            root = resolve(config.root ?? process.cwd());
+            name = options.name ?? basename(root);
+            if (!NAME_PATTERN.test(name))
+                throw new Error(`Canvas plugin name must be kebab-case: ${name}`);
+            const manifest = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
+            if (!manifest.version || !manifest.description)
+                throw new Error(`${join(root, 'package.json')} needs a version and description`);
+            pkg = { version: manifest.version, description: manifest.description };
+            entry = resolve(root, options.entry ?? 'server/canvas.ts');
+            outRoot = join(root, 'dist', 'plugin');
+            const extensionDir = join(outRoot, 'extensions', name);
+            return {
+                base: './',
+                resolve: { dedupe: ['react', 'react-dom'] },
+                build: { outDir: join(extensionDir, 'ui'), emptyOutDir: true, chunkSizeWarningLimit: 1500 },
+                builder: {},
+                environments: {
+                    extension: {
+                        consumer: 'server',
+                        resolve: { noExternal: true },
+                        build: {
+                            outDir: extensionDir,
+                            emptyOutDir: false,
+                            copyPublicDir: false,
+                            target: 'node20',
+                            minify: false,
+                            rolldownOptions: {
+                                input: { extension: ENTRY_ID, canvas: CANVAS_ENTRY_ID },
+                                // The Copilot host injects its own SDK copy at runtime.
+                                external: [/^@github\/copilot-sdk(?:\/|$)/],
+                                output: {
+                                    format: 'es',
+                                    entryFileNames: '[name].mjs',
+                                    chunkFileNames: 'chunks/[name]-[hash].mjs',
+                                },
+                            },
+                        },
+                    },
+                },
+            };
+        },
+        resolveId: {
+            order: 'pre',
+            handler(id, importer) {
+                if (id === ENTRY_ID)
+                    return RESOLVED_ENTRY_ID;
+                if (id === CANVAS_ENTRY_ID)
+                    return RESOLVED_CANVAS_ENTRY_ID;
+                const fromSource = importer && !importer.includes(`${sep}node_modules${sep}`) && !importer.startsWith('\0');
+                if (this.environment.config.consumer === 'client' && fromSource && (id.startsWith('node:') || isBuiltin(id))) {
+                    this.error(`${importer} imports the Node.js module "${id}". UI code runs in the browser; ` +
+                        'move Node.js work into the canvas actions and use `import type` for server modules.');
+                }
+                return undefined;
+            },
+        },
+        load(id) {
+            if (id === RESOLVED_CANVAS_ENTRY_ID) {
+                return [
+                    "import { runCanvasJob } from '@rwoll/canvas-kit/server';",
+                    `import canvas from ${JSON.stringify(entry)};`,
+                    'export default canvas;',
+                    '/** Run a scheduled job for saved documents with no chat open; see `canvas-kit run`. */',
+                    'export function runJob(job, options) {',
+                    '  return runCanvasJob(canvas, job, options);',
+                    '}',
+                    '',
+                ].join('\n');
+            }
+            if (id !== RESOLVED_ENTRY_ID)
+                return undefined;
+            return [
+                "import { runCanvasExtension } from '@rwoll/canvas-kit/extension';",
+                `import canvas from ${JSON.stringify(CANVAS_ENTRY_ID)};`,
+                'await runCanvasExtension(canvas, {',
+                "  uiDir: new URL('./ui/', import.meta.url),",
+                "  releaseFile: new URL('../../release.json', import.meta.url),",
+                `  plugin: ${JSON.stringify({ name, version: pkg.version })},`,
+                '});',
+                '',
+            ].join('\n');
+        },
+        buildApp: {
+            order: 'pre',
+            async handler(builder) {
+                await rm(outRoot, { recursive: true, force: true });
+                await builder.build(builder.environments.client);
+                await builder.build(builder.environments.extension);
+                const manifest = { name, version: pkg.version, description: pkg.description, extensions: 'extensions/' };
+                await mkdir(join(outRoot, '.plugin'), { recursive: true });
+                await writeFile(join(outRoot, '.plugin', 'plugin.json'), `${JSON.stringify(manifest, null, 2)}\n`);
+            },
+        },
+        configureServer(server) {
+            devServer = server;
+            server.middlewares.use((request, response, next) => {
+                const path = new URL(request.url ?? '/', 'http://localhost').pathname;
+                if (!path.startsWith('/__canvas/')) {
+                    next();
+                    return;
+                }
+                void (async () => {
+                    let host;
+                    try {
+                        host = await devHostFor(server);
+                        if (request.method === 'POST' && request.headers.origin !== `http://${request.headers.host}`) {
+                            throw new CanvasKitError('forbidden', 'Same-origin POST required');
+                        }
+                        // Dev only: act as the agent, for example to preview a tour or proposal the UI cannot create.
+                        const agentAction = /^\/__canvas\/dev\/agent\/([a-z][a-z0-9_]*)$/.exec(path);
+                        if (agentAction && request.method === 'POST') {
+                            await host.runDevAgentAction(DEV_INSTANCE, agentAction[1], request, response);
+                            return;
+                        }
+                        await host.handleApi(DEV_INSTANCE, path.slice(1), request, response);
+                    }
+                    catch (error) {
+                        if (host)
+                            host.sendError(response, error);
+                        else
+                            next(error);
+                    }
+                })();
+            });
+            server.watcher.on('change', file => {
+                if (file.startsWith(join(root, 'server') + sep))
+                    server.ws.send({ type: 'full-reload' });
+            });
+            server.httpServer?.once('close', () => void devHost?.close());
+        },
+        transformIndexHtml: {
+            order: 'pre',
+            async handler(html, ctx) {
+                if (!ctx.server || !devServer)
+                    return html;
+                const host = await devHostFor(devServer);
+                const bootstrap = host.bootstrapFor(DEV_INSTANCE, '/');
+                const page = bootstrap ? injectBootstrap(html, bootstrap) : html;
+                return devCanvas?.versionFooter ? injectReleaseFooter(page, devRelease()) : page;
+            },
+        },
+    };
+}
+//# sourceMappingURL=vite.js.map

package/dist/vite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.js","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,118 @@
 {
   "name": "@rwoll/canvas-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Build Copilot canvas extensions with TypeScript and React: typed state and actions, a secure local host, a Vite build, test helpers, and marketplace publishing.",
+  "keywords": [
+    "copilot",
+    "github-copilot",
+    "canvas",
+    "copilot-extension",
+    "react",
+    "vite"
+  ],
+  "license": "MIT",
+  "author": "Ross A. Wollman",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rwoll/canvas-kit.git",
+    "directory": "packages/canvas-kit"
+  },
+  "homepage": "https://github.com/rwoll/canvas-kit/tree/main/packages/canvas-kit#readme",
+  "bugs": "https://github.com/rwoll/canvas-kit/issues",
+  "type": "module",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "bin": {
+    "canvas-kit": "./cli/canvas-kit.mjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "default": "./dist/client.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    },
+    "./extension": {
+      "types": "./dist/extension.d.ts",
+      "default": "./dist/extension.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    },
+    "./playwright": {
+      "types": "./dist/playwright.d.ts",
+      "default": "./dist/playwright.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
+    },
+    "./cli": "./cli/lib.mjs",
+    "./styles.css": "./styles.css",
+    "./tsconfig/*": "./tsconfig/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "cli",
+    "!cli/*.test.mjs",
+    "templates",
+    "styles.css",
+    "tsconfig",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@vitejs/plugin-react": "^6.1.1",
+    "zod": "^4.6.7"
+  },
+  "peerDependencies": {
+    "@github/copilot-sdk": "^1.0.25",
+    "@playwright/test": "^1.60.0",
+    "react": "^19.0.0",
+    "vite": "^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@github/copilot-sdk": {
+      "optional": true
+    },
+    "@playwright/test": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@github/copilot-sdk": "^1.0.25",
+    "@playwright/test": "^1.60.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "react": "^19.2.8",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -b",
+    "test": "vitest run"
+  }
 }

package/styles.css

@@ -0,0 +1,122 @@
+/* Base canvas styles: theme variables, typography, and accessible form controls. */
+:root {
+  --text: #4b4654;
+  --text-h: #08060d;
+  --muted: #6b6375;
+  --bg: #fff;
+  --surface: #f7f6f9;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #8a2be2;
+  --accent-contrast: #fff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --danger: #b42318;
+  --success: #067647;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 15px/1.5 var(--sans);
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #c4c8d0;
+    --text-h: #f3f4f6;
+    --muted: #9ca3af;
+    --bg: #16171d;
+    --surface: #1f2028;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-contrast: #16171d;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --danger: #fda29b;
+    --success: #75e0a7;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3 {
+  color: var(--text-h);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+code {
+  font-family: var(--mono);
+  font-size: 0.9em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--code-bg);
+  color: var(--text-h);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+input,
+select,
+textarea {
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+}
+
+button {
+  padding: 6px 14px;
+  border: 1px solid var(--accent);
+  border-radius: 6px;
+  background: var(--accent);
+  color: var(--accent-contrast);
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+[role='alert'] {
+  color: var(--danger);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/templates/canvas/README.md

@@ -0,0 +1,19 @@
+# __TITLE__
+
+__DESCRIPTION__
+
+Canvas ID: `__CANVAS_ID__`. Plugin name: `__NAME__`.
+
+- `server/canvas.ts`: state schema, open input, and agent and UI actions (Node.js).
+- `src/`: the React UI. It uses `import type` only from `server/`.
+- `server/*.test.ts`: unit tests for the canvas logic (Vitest).
+- `e2e/*.spec.ts`: browser tests against the built canvas (Playwright).
+
+```sh
+pnpm --filter __NAME__ dev     # UI with live canvas logic in a browser
+pnpm --filter __NAME__ test    # unit tests
+pnpm --filter __NAME__ build   # installable plugin in dist/plugin
+pnpm --filter __NAME__ e2e     # browser tests; needs the build and `playwright install chromium`
+```
+
+See the [canvas-kit guide](https://github.com/rwoll/canvas-kit/tree/main/packages/canvas-kit#readme) for the API.

package/templates/canvas/e2e/canvas.spec.ts

@@ -0,0 +1,15 @@
+import { canvasTest, expect } from '@rwoll/canvas-kit/playwright'
+import canvas from '../server/canvas.ts'
+
+const test = canvasTest(canvas)
+
+test('the user and the agent share live state', async ({ openCanvas, agent }) => {
+  const { page, state } = await openCanvas()
+
+  await page.getByRole('button', { name: 'Count is 0' }).click()
+  await expect(page.getByRole('button', { name: 'Count is 1' })).toBeVisible()
+  expect(state()).toEqual({ count: 1 })
+
+  await agent.invoke('reset')
+  await expect(page.getByRole('button', { name: 'Count is 0' })).toBeVisible()
+})

package/templates/canvas/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>__TITLE__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>