Canvas Types & Patterns Skill

When to Use

Use this skill when:

• Defining new Canvas types

• Working with Zod schemas

• Adding language support

• Creating utility functions for Canvas

Core Type Definitions

Canvas Types

// From lib/canvas/types.ts

export const CANVAS_TYPES = [ 'code', // Executable code with Monaco editor 'document', // Markdown/rich text editor 'visualization', // D3/Chart.js interactive visualizations 'quiz', // Interactive assessment 'flashcards', // Study cards with flip interaction 'diagram', // Mermaid/PlantUML diagrams 'math', // LaTeX mathematical expressions 'react', // React component preview ] as const;

export type CanvasType = (typeof CANVAS_TYPES)[number];

View Modes

export type ViewMode = 'code' | 'preview' | 'split';

Canvas State

export interface CanvasState { // Core state isOpen: boolean; content: string; type: CanvasType; title: string; language: string; viewMode: ViewMode;

// History for undo/redo history: string[]; historyIndex: number;

// Generation state generationPrompt: string; isGenerating: boolean; }

Zod Schemas

Canvas Configuration Schema

import { z } from 'zod';

export const CanvasConfigSchema = z.object({ type: z.enum(CANVAS_TYPES), title: z.string().max(100), language: z.string().optional(), initialContent: z.string().optional().default(''), generationPrompt: z.string().optional(), educationalContext: z.object({ topic: z.string().optional(), difficulty: z.enum(['beginner', 'intermediate', 'advanced']).optional(), learningObjective: z.string().optional(), }).optional(), // Artifact persistence tracking artifactId: z.string().uuid().optional(), conversationId: z.string().uuid().optional(), messageId: z.string().uuid().optional(), toolInvocationId: z.string().optional(), });

export type CanvasConfig = z.infer<typeof CanvasConfigSchema>;

Content Validation

/**

• Maximum canvas content size (1MB)
• Prevents memory abuse while allowing substantial code examples */ export const CANVAS_MAX_CONTENT_SIZE = 1_048_576;

export const CanvasContentSchema = z.object({ type: z.enum(CANVAS_TYPES), title: z.string().max(100), content: z.string().max(CANVAS_MAX_CONTENT_SIZE), language: z.string().optional(), metadata: z.object({ educationalObjective: z.string().optional(), difficulty: z.enum(['beginner', 'intermediate', 'advanced']).optional(), estimatedTime: z.number().optional(), prerequisites: z.array(z.string()).optional(), }).optional(), });

export type CanvasContent = z.infer<typeof CanvasContentSchema>;

Language Support

Tiered Language Support

export const SUPPORTED_LANGUAGES = { // P0 - Must have (curriculum analysis) tier1: [ { id: 'python', name: 'Python', extensions: ['.py'], monacoId: 'python' }, { id: 'javascript', name: 'JavaScript', extensions: ['.js'], monacoId: 'javascript' }, { id: 'html', name: 'HTML', extensions: ['.html'], monacoId: 'html' }, { id: 'css', name: 'CSS', extensions: ['.css'], monacoId: 'css' }, { id: 'sql', name: 'SQL', extensions: ['.sql'], monacoId: 'sql' }, { id: 'markdown', name: 'Markdown', extensions: ['.md'], monacoId: 'markdown' }, ], // P1 - High priority tier2: [ { id: 'typescript', name: 'TypeScript', extensions: ['.ts', '.tsx'], monacoId: 'typescript' }, { id: 'java', name: 'Java', extensions: ['.java'], monacoId: 'java' }, { id: 'r', name: 'R', extensions: ['.r'], monacoId: 'r' }, { id: 'latex', name: 'LaTeX', extensions: ['.tex'], monacoId: 'latex' }, ], // P2 - Secondary tier3: [ { id: 'c', name: 'C', extensions: ['.c', '.h'], monacoId: 'c' }, { id: 'cpp', name: 'C++', extensions: ['.cpp', '.hpp'], monacoId: 'cpp' }, ], } as const;

Execution Support Matrix

export const EXECUTION_SUPPORT: Record<string, 'pyodide' | 'iframe' | 'none'> = { python: 'pyodide', javascript: 'iframe', html: 'iframe', typescript: 'iframe', // Transpiled to JS react: 'iframe', css: 'iframe', sql: 'none', java: 'none', c: 'none', cpp: 'none', r: 'none', latex: 'none', markdown: 'none', mermaid: 'none', };

Utility Functions

Default Language by Canvas Type

export function getDefaultLanguage(type: CanvasType): string { const defaults: Record<CanvasType, string> = { code: 'python', visualization: 'html', react: 'typescript', document: 'markdown', diagram: 'mermaid', math: 'latex', quiz: 'json', flashcards: 'json', }; return defaults[type] || 'plaintext'; }

Monaco Language Mapping

export function getMonacoLanguage(language: string): string { const mapping: Record<string, string> = { python: 'python', javascript: 'javascript', typescript: 'typescript', tsx: 'typescript', jsx: 'javascript', html: 'html', css: 'css', markdown: 'markdown', json: 'json', sql: 'sql', java: 'java', c: 'c', cpp: 'cpp', csharp: 'csharp', go: 'go', rust: 'rust', latex: 'latex', mermaid: 'markdown', // No native mermaid support }; return mapping[language] || 'plaintext'; }

Execution Check

export function canExecute(language: string): boolean { return ( EXECUTION_SUPPORT[language] !== 'none' && EXECUTION_SUPPORT[language] !== undefined ); }

File Extension Mapping

export function getFileExtension(language: string): string { const extensions: Record<string, string> = { python: '.py', javascript: '.js', typescript: '.ts', html: '.html', css: '.css', markdown: '.md', json: '.json', sql: '.sql', java: '.java', c: '.c', cpp: '.cpp', }; return extensions[language] || '.txt'; }

Tool Result Types

Canvas Actions

export interface OpenCanvasResult { action: 'open_canvas'; canvasConfig: { type: CanvasType; title: string; language: string; initialContent: string; generationPrompt: string; educationalContext?: { topic?: string; difficulty?: 'beginner' | 'intermediate' | 'advanced'; learningObjective?: string; }; }; }

export interface UpdateCanvasResult { action: 'update_canvas'; updates: { content?: string; title?: string; language?: string; }; }

Adding New Canvas Types

Step 1: Add to Types

// In types.ts export const CANVAS_TYPES = [ // ... existing 'new_type', // Add here ] as const;

Step 2: Set Default Language

// In getDefaultLanguage() const defaults: Record<CanvasType, string> = { // ... existing new_type: 'json', // Add default };

Step 3: Update GenUI Components

// In genui renderer switch (canvasType) { // ... existing cases case 'new_type': return <NewTypeCanvas {...props} />; }

Adding New Languages

Step 1: Add to Tier

// In SUPPORTED_LANGUAGES tier2: [ // ... existing { id: 'rust', name: 'Rust', extensions: ['.rs'], monacoId: 'rust' }, ],

Step 2: Set Execution Support

// In EXECUTION_SUPPORT rust: 'none', // Or 'iframe' if you implement WASM execution

Step 3: Add Monaco Mapping

// In getMonacoLanguage() rust: 'rust',

Step 4: Add File Extension

// In getFileExtension() rust: '.rs',

Type Guards

Canvas Type Guard

export function isCanvasType(value: unknown): value is CanvasType { return typeof value === 'string' && CANVAS_TYPES.includes(value as CanvasType); }

Execution Support Guard

export function supportsExecution(language: string): language is 'python' | 'javascript' | 'typescript' | 'html' | 'react' | 'css' { return EXECUTION_SUPPORT[language] !== 'none' && EXECUTION_SUPPORT[language] !== undefined; }

Validation Patterns

Safe Parsing

import { CanvasConfigSchema } from '@/lib/canvas/types';

function parseCanvasConfig(input: unknown) { const result = CanvasConfigSchema.safeParse(input);

if (!result.success) { console.error('Invalid canvas config:', result.error.errors); return null; }

return result.data; }

Content Size Check

function isContentValid(content: string): boolean { const byteSize = new TextEncoder().encode(content).length; return byteSize <= CANVAS_MAX_CONTENT_SIZE; }

Testing Checklist

• All Canvas types have default languages

• All languages have Monaco mappings

• All languages have file extensions

• Execution support is correctly marked

• Zod schemas validate correctly

• Type guards work as expected

• Max content size is enforced