Canvas Component Development Skill

When to Use

Use this skill when:

• Creating Canvas panel or container components
• Adding Monaco editor features
• Building code preview/execution UI
• Implementing split-view layouts
• Adding toolbar actions (run, download, share)

Component Architecture

components/canvas/
├── canvas-container.tsx          # Root container with state
├── canvas-panel.tsx              # Full panel with editor + preview
├── canvas-editor.tsx             # Monaco wrapper
├── canvas-preview.tsx            # Execution preview
├── canvas-toolbar.tsx            # Actions toolbar
├── canvas-editor-error-boundary.tsx  # Error recovery
└── index.ts                      # Barrel exports

State Management (Zustand)

Canvas Store Pattern

import { create } from 'zustand';
import type { CanvasState, CanvasType, ViewMode } from '@/lib/canvas/types';

interface CanvasStore extends CanvasState {
  // Actions
  openCanvas: (config: CanvasConfig) => void;
  closeCanvas: () => void;
  updateContent: (content: string) => void;
  setViewMode: (mode: ViewMode) => void;
  undo: () => void;
  redo: () => void;

  // Generation
  startGeneration: (prompt: string) => void;
  completeGeneration: (content: string) => void;
}

export const useCanvasStore = create<CanvasStore>((set, get) => ({
  // Initial state
  isOpen: false,
  content: '',
  type: 'code',
  title: 'Untitled',
  language: 'python',
  viewMode: 'split',
  history: [],
  historyIndex: -1,
  generationPrompt: '',
  isGenerating: false,

  openCanvas: (config) => set({
    isOpen: true,
    type: config.type,
    title: config.title,
    language: config.language || getDefaultLanguage(config.type),
    content: config.initialContent || '',
    generationPrompt: config.generationPrompt || '',
    viewMode: 'split',
    history: [config.initialContent || ''],
    historyIndex: 0,
  }),

  updateContent: (content) => {
    const { history, historyIndex } = get();
    const newHistory = [...history.slice(0, historyIndex + 1), content];
    set({
      content,
      history: newHistory,
      historyIndex: newHistory.length - 1,
    });
  },
  // ...
}));

Monaco Editor Wrapper

Basic Setup

'use client';

import { useRef, useCallback } from 'react';
import MonacoEditor, { OnMount, OnChange } from '@monaco-editor/react';
import { getMonacoLanguage } from '@/lib/canvas/types';
import { CanvasEditorErrorBoundary } from './canvas-editor-error-boundary';

interface CanvasEditorProps {
  content: string;
  language: string;
  onChange: (value: string) => void;
  readOnly?: boolean;
  height?: string;
}

export function CanvasEditor({
  content,
  language,
  onChange,
  readOnly = false,
  height = '100%',
}: CanvasEditorProps) {
  const editorRef = useRef<any>(null);

  const handleMount: OnMount = (editor, monaco) => {
    editorRef.current = editor;

    // Configure Monaco for educational use
    monaco.editor.defineTheme('canvas-theme', {
      base: 'vs-dark',
      inherit: true,
      rules: [],
      colors: {
        'editor.background': '#1a1a1a',
      },
    });

    editor.updateOptions({
      fontSize: 14,
      lineHeight: 22,
      minimap: { enabled: false },
      scrollBeyondLastLine: false,
      wordWrap: 'on',
      tabSize: 4,
      insertSpaces: true,
    });
  };

  const handleChange: OnChange = (value) => {
    onChange(value || '');
  };

  return (
    <CanvasEditorErrorBoundary>
      <MonacoEditor
        height={height}
        language={getMonacoLanguage(language)}
        value={content}
        onChange={handleChange}
        onMount={handleMount}
        theme="canvas-theme"
        options={{
          readOnly,
          automaticLayout: true,
        }}
        loading={<EditorSkeleton />}
      />
    </CanvasEditorErrorBoundary>
  );
}

Error Boundary

'use client';

import { Component, ReactNode } from 'react';
import { AlertTriangle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { resetMonacoLoader } from '@/lib/canvas/monaco-loader';

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

export class CanvasEditorErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  handleReset = () => {
    resetMonacoLoader();
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div className="flex flex-col items-center justify-center h-full gap-4 p-8 text-center">
          <AlertTriangle className="h-8 w-8 text-destructive" />
          <div>
            <h3 className="font-medium">Editor failed to load</h3>
            <p className="text-sm text-muted-foreground mt-1">
              This usually resolves after a page refresh.
            </p>
          </div>
          <Button onClick={this.handleReset} size="sm">
            <RefreshCw className="h-4 w-4 mr-2" />
            Try Again
          </Button>
        </div>
      );
    }

    return this.props.children;
  }
}

Split View Panel

Resizable Layout

'use client';

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
import { CanvasEditor } from './canvas-editor';
import { CanvasPreview } from './canvas-preview';
import { CanvasToolbar } from './canvas-toolbar';
import type { ViewMode } from '@/lib/canvas/types';

interface CanvasPanelProps {
  content: string;
  language: string;
  viewMode: ViewMode;
  onContentChange: (content: string) => void;
  onViewModeChange: (mode: ViewMode) => void;
  onRun: () => void;
}

export function CanvasPanel({
  content,
  language,
  viewMode,
  onContentChange,
  onViewModeChange,
  onRun,
}: CanvasPanelProps) {
  return (
    <div className="flex flex-col h-full">
      <CanvasToolbar
        viewMode={viewMode}
        onViewModeChange={onViewModeChange}
        onRun={onRun}
        language={language}
      />

      <div className="flex-1 min-h-0">
        {viewMode === 'split' ? (
          <ResizablePanelGroup direction="horizontal">
            <ResizablePanel defaultSize={50} minSize={30}>
              <CanvasEditor
                content={content}
                language={language}
                onChange={onContentChange}
              />
            </ResizablePanel>
            <ResizableHandle withHandle />
            <ResizablePanel defaultSize={50} minSize={30}>
              <CanvasPreview
                content={content}
                language={language}
              />
            </ResizablePanel>
          </ResizablePanelGroup>
        ) : viewMode === 'code' ? (
          <CanvasEditor
            content={content}
            language={language}
            onChange={onContentChange}
          />
        ) : (
          <CanvasPreview
            content={content}
            language={language}
          />
        )}
      </div>
    </div>
  );
}

Toolbar Actions

Standard Toolbar

'use client';

import { Play, Download, Copy, Code, Eye, Columns2, Undo, Redo } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { canExecute, getFileExtension } from '@/lib/canvas/types';
import type { ViewMode } from '@/lib/canvas/types';

interface CanvasToolbarProps {
  viewMode: ViewMode;
  onViewModeChange: (mode: ViewMode) => void;
  onRun: () => void;
  onUndo?: () => void;
  onRedo?: () => void;
  canUndo?: boolean;
  canRedo?: boolean;
  language: string;
  content?: string;
  isRunning?: boolean;
}

export function CanvasToolbar({
  viewMode,
  onViewModeChange,
  onRun,
  onUndo,
  onRedo,
  canUndo,
  canRedo,
  language,
  content,
  isRunning,
}: CanvasToolbarProps) {
  const showRunButton = canExecute(language);

  const handleDownload = () => {
    const blob = new Blob([content || ''], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `code${getFileExtension(language)}`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleCopy = async () => {
    await navigator.clipboard.writeText(content || '');
    // Show toast
  };

  return (
    <div className="flex items-center justify-between px-2 py-1.5 border-b bg-muted/50">
      <div className="flex items-center gap-1">
        {/* View Mode Toggle */}
        <ToggleGroup
          type="single"
          value={viewMode}
          onValueChange={(v) => v && onViewModeChange(v as ViewMode)}
          size="sm"
        >
          <ToggleGroupItem value="code" aria-label="Code only">
            <Code className="h-4 w-4" />
          </ToggleGroupItem>
          <ToggleGroupItem value="split" aria-label="Split view">
            <Columns2 className="h-4 w-4" />
          </ToggleGroupItem>
          <ToggleGroupItem value="preview" aria-label="Preview only">
            <Eye className="h-4 w-4" />
          </ToggleGroupItem>
        </ToggleGroup>

        <div className="w-px h-4 bg-border mx-1" />

        {/* Undo/Redo */}
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7"
              onClick={onUndo}
              disabled={!canUndo}
            >
              <Undo className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Undo (Ctrl+Z)</TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7"
              onClick={onRedo}
              disabled={!canRedo}
            >
              <Redo className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Redo (Ctrl+Shift+Z)</TooltipContent>
        </Tooltip>
      </div>

      <div className="flex items-center gap-1">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleCopy}>
              <Copy className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Copy code</TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleDownload}>
              <Download className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Download</TooltipContent>
        </Tooltip>

        {showRunButton && (
          <Button
            size="sm"
            className="ml-2 gap-1"
            onClick={onRun}
            disabled={isRunning}
          >
            <Play className="h-3 w-3" />
            {isRunning ? 'Running...' : 'Run'}
          </Button>
        )}
      </div>
    </div>
  );
}

Keyboard Shortcuts

Hook Implementation

import { useHotkeys } from 'react-hotkeys-hook';

function CanvasWithShortcuts() {
  const { content, updateContent, undo, redo, canUndo, canRedo } = useCanvasStore();

  // Run code
  useHotkeys('mod+enter', () => handleRun(), { enableOnFormTags: true });

  // Undo/Redo (Monaco handles internal, this is for store)
  useHotkeys('mod+z', () => undo(), { enabled: canUndo });
  useHotkeys('mod+shift+z', () => redo(), { enabled: canRedo });

  // Toggle view modes
  useHotkeys('mod+1', () => setViewMode('code'));
  useHotkeys('mod+2', () => setViewMode('split'));
  useHotkeys('mod+3', () => setViewMode('preview'));
}

Educational Context Display

Learning Objective Header

interface EducationalContextProps {
  context?: {
    topic?: string;
    difficulty?: 'beginner' | 'intermediate' | 'advanced';
    learningObjective?: string;
  };
}

function EducationalContextHeader({ context }: EducationalContextProps) {
  if (!context?.learningObjective) return null;

  const difficultyColors = {
    beginner: 'bg-green-100 text-green-800',
    intermediate: 'bg-amber-100 text-amber-800',
    advanced: 'bg-red-100 text-red-800',
  };

  return (
    <div className="px-4 py-2 border-b bg-muted/30">
      <div className="flex items-center gap-2 text-sm">
        {context.difficulty && (
          <span className={cn(
            'px-2 py-0.5 rounded-full text-xs font-medium',
            difficultyColors[context.difficulty]
          )}>
            {context.difficulty}
          </span>
        )}
        {context.topic && (
          <span className="text-muted-foreground">
            {context.topic}
          </span>
        )}
      </div>
      <p className="text-sm mt-1">{context.learningObjective}</p>
    </div>
  );
}

Accessibility Requirements

WCAG 2.1 AA Checklist

• Focus visible on all interactive elements
• Keyboard navigation for all actions
• Screen reader labels for icons
• Color contrast 4.5:1 minimum
• Announced status changes (execution results)
• Skip links for editor navigation

// Example: Screen reader announcement
import { useEffect } from 'react';

function useAnnounce() {
  const announce = (message: string) => {
    const el = document.createElement('div');
    el.setAttribute('role', 'status');
    el.setAttribute('aria-live', 'polite');
    el.className = 'sr-only';
    el.textContent = message;
    document.body.appendChild(el);
    setTimeout(() => el.remove(), 1000);
  };
  return announce;
}

// Usage
const announce = useAnnounce();
announce('Code executed successfully');

Testing Checklist

• Monaco loads without errors
• Split view resizing works
• View mode toggles correctly
• Keyboard shortcuts function
• Undo/redo maintains history
• Copy/download work
• Mobile responsive
• Error boundary catches Monaco failures
• Educational context displays
• Accessibility requirements met