cp-toolkit 2.0.2 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cp-toolkit",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Copilot Toolkit - AI Agent framework for GitHub Copilot, Claude, Gemini CLI, and other AI assistants",
   "keywords": [
     "ai-agents",
@@ -16,11 +16,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/gensart-projs/cp-kit"
+    "url": "git+https://github.com/gensart-projs/cp-kit.git"
   },
   "type": "module",
   "bin": {
-    "cp-toolkit": "./bin/cp-toolkit.js"
+    "cp-toolkit": "bin/cp-toolkit.js"
   },
   "main": "./src/index.js",
   "files": [

package/src/commands/init.js

@@ -259,9 +259,8 @@ const TEMPLATE_INSTRUCTIONS = {
 };
 
 export async function initCommand(directory, options) {
-  const targetDir = directory ? path.resolve(directory) : process.cwd();
-  const dirName = path.basename(targetDir);
-  
+const templatesDir = path.resolve(__dirname, '../../templates');
+
   console.log(chalk.bold.cyan('\n🚀 cp-kit - GitHub Copilot Agent Toolkit\n'));
   
   // Create directory if needed
@@ -271,14 +270,12 @@ export async function initCommand(directory, options) {
   }
   
   // Check for existing configuration
-  const githubDir = path.join(targetDir, '.github');
-  const copilotFile = path.join(githubDir, 'copilot-instructions.md');
-  
-  if (fs.existsSync(copilotFile) && !options.force) {
+  const agentDir = path.join(targetDir, '.agent');
+  if (fs.existsSync(agentDir) && !options.force) {
     const { overwrite } = await prompts({
       type: 'confirm',
       name: 'overwrite',
-      message: 'cp-kit already initialized. Overwrite?',
+      message: 'cp-kit (.agent) already initialized. Overwrite?',
       initial: false
     });
     
@@ -287,19 +284,13 @@ export async function initCommand(directory, options) {
       return;
     }
   }
-  
-  // Interactive configuration - defaults include ALL agents and languages
-  const ALL_AGENT_NAMES = TEMPLATE_AGENTS.map(a => a.name);
-  const ALL_LANGUAGES = ['typescript', 'python', 'react'];
-  
+
+  // Interactive configuration
   let config = {
     projectName: dirName,
-    projectType: 'app',
-    languages: ALL_LANGUAGES,
-    agents: ALL_AGENT_NAMES,
-    includeMcp: true
+    installEverything: true
   };
-  
+
   if (!options.yes) {
     const response = await prompts([
       {
@@ -308,355 +299,132 @@ export async function initCommand(directory, options) {
         message: 'Project name:',
         initial: dirName
       },
-      {
-        type: 'select',
-        name: 'projectType',
-        message: 'Project type:',
-        choices: [
-          { title: 'Single App', value: 'app' },
-          { title: 'Monorepo', value: 'monorepo' },
-          { title: 'Library/Package', value: 'library' },
-          { title: 'API Only', value: 'api' }
-        ],
-        initial: 0
-      },
-      {
-        type: 'multiselect',
-        name: 'languages',
-        message: 'Languages used:',
-        choices: [
-          { title: 'TypeScript', value: 'typescript', selected: true },
-          { title: 'Python', value: 'python', selected: true },
-          { title: 'React/JSX', value: 'react', selected: true }
-        ],
-        min: 1
-      },
-      {
-        type: 'multiselect',
-        name: 'agents',
-        message: 'Select agents:',
-        choices: TEMPLATE_AGENTS.map(a => ({
-          title: `${a.name} - ${a.description}`,
-          value: a.name,
-          selected: true  // All agents selected by default
-        })),
-        min: 1
-      },
       {
         type: 'confirm',
-        name: 'includeMcp',
-        message: 'Include MCP server configuration?',
+        name: 'installEverything',
+        message: 'Install full Antigravity Kit (Agents, Skills, Workflows)?',
         initial: true
       }
     ]);
-    
-    if (!response.projectName) {
-      console.log(chalk.yellow('Aborted.'));
-      return;
-    }
-    
-    config = { ...config, ...response };
+     config = { ...config, ...response };
   }
-  
-  // Start installation
-  const spinner = ora('Creating cp-kit structure...').start();
-  
+
+  const spinner = ora('Installing Antigravity Kit...').start();
+
   try {
-    // Create .github structure
-    await fs.ensureDir(path.join(githubDir, 'agents'));
-    await fs.ensureDir(path.join(githubDir, 'instructions'));
-    
-    spinner.text = 'Creating copilot-instructions.md...';
-    
-    // Create main copilot-instructions.md
-    await fs.writeFile(copilotFile, generateCopilotInstructions(config));
-    
-    spinner.text = 'Creating agents...';
-    
-    // Create agents
-    for (const agentName of config.agents) {
-      const agent = TEMPLATE_AGENTS.find(a => a.name === agentName);
-      if (agent) {
-        await fs.writeFile(
-          path.join(githubDir, 'agents', `${agent.name}.md`),
-          generateAgentFile(agent)
-        );
-      }
-    }
-    
-    spinner.text = 'Creating instructions...';
-    
-    // Create instructions based on languages
-    const instructionsToCreate = new Set(['security', 'database']);
-    config.languages.forEach(lang => {
-      instructionsToCreate.add(lang);
-      if (lang === 'react') instructionsToCreate.add('typescript');
+    // 1. Copy Templates to .agent folder
+    await fs.ensureDir(agentDir);
+    await fs.copy(templatesDir, agentDir, {
+      overwrite: true,
+      filter: (src) => !src.includes('node_modules') && !src.includes('.git')
     });
     
-    for (const instrName of instructionsToCreate) {
-      const instr = TEMPLATE_INSTRUCTIONS[instrName];
-      if (instr) {
-        await fs.writeFile(
-          path.join(githubDir, 'instructions', `${instrName}.instructions.md`),
-          `---\napplyTo: "${instr.applyTo}"\n---\n\n${instr.content}\n`
-        );
-      }
-    }
+    spinner.text = 'Configuring GitHub Copilot...';
+
+    // 2. Setup .github/copilot-instructions.md
+    const githubDir = path.join(targetDir, '.github');
+    await fs.ensureDir(githubDir);
     
-    spinner.text = 'Creating AGENTS.md...';
+    const instructionsPath = path.join(githubDir, 'copilot-instructions.md');
+    const instructionsContent = generateCopilotInstructions(config);
+    await fs.writeFile(instructionsPath, instructionsContent);
+
+    // 3. Setup .vscode/mcp.json
+    spinner.text = 'Configuring MCP Server...';
+    const vscodeDir = path.join(targetDir, '.vscode');
+    await fs.ensureDir(vscodeDir);
     
-    // Create AGENTS.md at root
-    await fs.writeFile(path.join(targetDir, 'AGENTS.md'), generateAgentsMd(config));
+    const mcpConfig = {
+      "mcpServers": {
+        "antigravity-toolkit": {
+          "command": "node",
+          "args": [
+            "${workspaceFolder}/.agent/scripts/mcp-server.js"
+          ],
+          "env": {
+            "AGENT_ROOT": "${workspaceFolder}/.agent"
+          },
+          "disabled": false,
+          "autoApprove": []
+        },
+        "filesystem": {
+          "command": "npx",
+          "args": [
+            "-y",
+            "@modelcontextprotocol/server-filesystem",
+            "${workspaceFolder}"
+          ],
+          "disabled": false,
+          "autoApprove": []
+        },
+        "memory": {
+          "command": "npx",
+          "args": [
+            "-y",
+            "@modelcontextprotocol/server-memory"
+          ],
+          "disabled": false,
+          "autoApprove": []
+        }
+      }
+    };
     
-    // Create MCP configuration if requested
-    if (config.includeMcp) {
-      spinner.text = 'Setting up MCP...';
-      await fs.ensureDir(path.join(targetDir, '.vscode'));
-      await fs.writeFile(
-        path.join(targetDir, '.vscode', 'mcp.json'),
-        JSON.stringify(generateMcpConfig(), null, 2)
-      );
-    }
+    await fs.writeFile(
+      path.join(vscodeDir, 'mcp.json'), 
+      JSON.stringify(mcpConfig, null, 2)
+    );
+
+    // 4. Create root integration files if needed
+    // Copy AGENTS.md if it exists in templates root (which is now in .agent)
+    const agentsMdSrc = path.join(agentDir, 'AGENTS.md'); // Might not exist in root of reference
+    // If reference had AGENTS.md in root, it should be in agentDir now if we copied everything.
+    // Based on list_dir earlier, it wasn't there. It was likely outside. 
+    // We will generate a basic one if missing.
     
-    spinner.succeed(chalk.green('cp-kit initialized successfully!'));
-    
-    // Print summary
-    console.log('');
-    console.log(chalk.bold('📁 Created structure:'));
-    console.log(chalk.gray(''));
-    console.log(chalk.gray('  .github/'));
-    console.log(chalk.gray('  ├── copilot-instructions.md    # Global instructions'));
-    console.log(chalk.gray('  ├── agents/'));
-    config.agents.forEach((a, i) => {
-      const prefix = i === config.agents.length - 1 ? '└──' : '├──';
-      console.log(chalk.gray(`  │   ${prefix} ${a}.md`));
-    });
-    console.log(chalk.gray('  └── instructions/'));
-    const instrArray = Array.from(instructionsToCreate);
-    instrArray.forEach((i, idx) => {
-      const prefix = idx === instrArray.length - 1 ? '└──' : '├──';
-      console.log(chalk.gray(`      ${prefix} ${i}.instructions.md`));
-    });
-    console.log(chalk.gray(''));
-    console.log(chalk.gray('  AGENTS.md                      # Universal AI instructions'));
-    if (config.includeMcp) {
-      console.log(chalk.gray('  .vscode/mcp.json               # MCP configuration'));
-    }
-    
-    console.log('');
-    console.log(chalk.green('✓ GitHub Copilot will automatically load these instructions'));
-    console.log('');
-    console.log(chalk.bold('Next steps:'));
-    console.log(chalk.cyan('  1. Review .github/copilot-instructions.md'));
-    console.log(chalk.cyan('  2. Add agents with: cp-kit add agent <name>'));
-    console.log(chalk.cyan('  3. Verify setup with: cp-kit doctor'));
-    console.log('');
+    spinner.succeed(chalk.green('Antigravity Kit installed successfully!'));
     
+    console.log(chalk.bold('\nNext Steps:'));
+    console.log(`1. Open ${chalk.cyan('.github/copilot-instructions.md')} to see the setup.`);
+    console.log(`2. Reload Window to activate MCP server.`);
+    console.log(`3. Try typing ${chalk.yellow('/create')} or ${chalk.yellow('Is the agent active?')} in Copilot Chat.`);
+
   } catch (error) {
-    spinner.fail(chalk.red('Failed to initialize cp-kit'));
-    console.error(chalk.red(error.message));
-    process.exit(1);
+    spinner.fail('Installation failed.');
+    console.error(error);
   }
 }
 
-function generateCopilotInstructions(config) {
-  const langList = config.languages.map(l => {
-    switch (l) {
-      case 'typescript': return '**TypeScript**: Strict mode, ESLint + Prettier';
-      case 'python': return '**Python**: Black formatter, type hints, PEP 8';
-      case 'react': return '**React**: Functional components, hooks, Testing Library';
-      default: return l;
-    }
-  }).join('\n- ');
-
-  return `# GitHub Copilot Instructions
-
-> Repository-wide instructions for GitHub Copilot (2026 Standard)
-> Generated by cp-kit v1.0.0
-
-## Project Context
-
-**${config.projectName}** is a ${config.projectType} project.
-
-## Code Style
-
-- ${langList}
-- **Commits**: Conventional Commits format (\`feat:\`, \`fix:\`, \`docs:\`)
-
-## AI Agent Protocol
-
-### Available Agents
-
-${config.agents.map(a => {
-  const agent = TEMPLATE_AGENTS.find(t => t.name === a);
-  return `- **@${a}**: ${agent?.description || 'Specialist agent'}`;
-}).join('\n')}
-
-### Invoking Agents
-
-Use \`@agent-name\` in Copilot Chat:
-\`\`\`
-@frontend-specialist Create a responsive navbar component
-@security-auditor Review this authentication flow
-@orchestrator Implement user dashboard with API integration
-\`\`\`
-
-### Behavioral Modes
-
-| Mode | Trigger | Behavior |
-|------|---------|----------|
-| **BRAINSTORM** | "let's think", "options" | Explore ideas, no code |
-| **IMPLEMENT** | "build", "create" | Production-ready code |
-| **DEBUG** | "fix", "why", "error" | Root cause analysis |
-| **REVIEW** | "review", "check" | Quality assessment |
-
-## Socratic Gate
-
-For complex requests, **ASK before implementing**:
-- What is the expected behavior?
-- What are the edge cases?
-- What are the dependencies?
-
-## File References
-
-- Agent definitions: \`.github/agents/\`
-- Path-specific rules: \`.github/instructions/\`
-- Universal instructions: \`AGENTS.md\`
-${config.includeMcp ? `- MCP configuration: \`.vscode/mcp.json\`` : ''}
-
-## Do NOT
-
-- Skip understanding context before coding
-- Write code without identifying the domain
-- Ignore the Socratic Gate for complex requests
-- Use deprecated patterns without checking instructions
-`;
-}
-
 function generateAgentFile(agent) {
-  return `---
-name: ${agent.name}
-description: ${agent.description}
----
-
-# ${agent.name}
-
-> ${agent.description}
-
-## When to Use
-
-Invoke this agent for:
-${agent.triggers.map(t => `- ${t} related tasks`).join('\n')}
-
-## Trigger Keywords
-
-\`${agent.triggers.join('`, `')}\`
-
-## Skills
-
-${agent.skills.map(s => `- ${s}`).join('\n')}
-
-## Response Format
-
-\`\`\`
-🤖 **Applying @${agent.name}...**
-
-[specialized response following skill guidelines]
-\`\`\`
-
-## Integration
-
-This agent can collaborate with:
-- \`@orchestrator\` for multi-domain coordination
-- Other specialists via handoff protocol
-`;
+  // Deprecated generally, using static files now, but keeping for fallback
+  return \`---\nname: \${agent.name}\ndescription: \${agent.description}\nskills: [\${agent.skills.join(', ')}]\n---\n\n# \${agent.name}\n\n\${agent.description}\n\`;
 }
 
-function generateAgentsMd(config) {
-  return `# AGENTS.md
-
-> Universal Agent Instructions for AI Coding Assistants (2026 Standard)
-> Generated by cp-kit v1.0.0
-
----
-
-## 🏗️ Project Overview
-
-**${config.projectName}** - ${config.projectType}
-
-### Technologies
-
-${config.languages.map(l => `- ${l.charAt(0).toUpperCase() + l.slice(1)}`).join('\n')}
-
----
-
-## 🤖 AI Agent Protocol
-
-### Available Agents
-
-| Agent | Domain | Triggers |
-|-------|--------|----------|
-${config.agents.map(a => {
-  const agent = TEMPLATE_AGENTS.find(t => t.name === a);
-  return `| \`@${a}\` | ${agent?.description || '-'} | ${agent?.triggers.join(', ') || '-'} |`;
-}).join('\n')}
-
-### Request Classification
-
-| Type | Keywords | Action |
-|------|----------|--------|
-| **QUESTION** | "what is", "explain" | Text response only |
-| **SIMPLE CODE** | "fix", "add" (single file) | Inline edit |
-| **COMPLEX CODE** | "build", "create" | Use @orchestrator |
-| **REVIEW** | "review", "check" | Quality assessment |
-
-### Behavioral Modes
+function generateCopilotInstructions(config) {
+  return \`# GitHub Copilot Instructions
 
-| Mode | Behavior |
-|------|----------|
-| **BRAINSTORM** | Ask questions, explore options, no code |
-| **IMPLEMENT** | Fast execution, production-ready code |
-| **DEBUG** | Systematic investigation, root cause analysis |
-| **REVIEW** | Code quality, security, performance check |
+> **Antigravity Kit Active**
+> Profile: \${config.projectName}
 
----
+## 🧠 Core Protocols
 
-## 📂 Structure
+The user has installed the **Antigravity Agent Kit** in \`.agent/\`.
+You must follow the rules defined in \`.agent/rules/GEMINI.md\`.
 
-\`\`\`
-.github/
-├── copilot-instructions.md    # Global instructions (always active)
-├── agents/                    # Agent definitions
-└── instructions/              # Path-specific rules
-\`\`\`
+### Structure
+- **Agents:** \`.agent/agents/\` (Specialist personas)
+- **Skills:** \`.agent/skills/\` (Capabilities)
+- **Workflows:** \`.agent/workflows/\` (Procedures)
+- **Scripts:** \`.agent/scripts/\` (Tools)
 
----
+## 🚀 Activation
 
-*Generated by [cp-kit](https://github.com/anthropics/cp-kit) v1.0.0*
-`;
-}
+When the user asks for a specific role or task, look up the corresponding agent in \`.agent/agents/\`.
+Always read \`.agent/rules/GEMINI.md\` first.
 
-function generateMcpConfig() {
-  return {
-    "$schema": "https://raw.githubusercontent.com/microsoft/vscode/main/src/vs/workbench/contrib/mcp/browser/mcpConfigSchema.json",
-    servers: {
-      filesystem: {
-        type: "stdio",
-        command: "npx",
-        args: ["-y", "@anthropic-ai/mcp-server-filesystem@latest", "${workspaceFolder}"]
-      },
-      memory: {
-        type: "stdio",
-        command: "npx",
-        args: ["-y", "@anthropic-ai/mcp-server-memory@latest"]
-      },
-      sequentialThinking: {
-        type: "stdio",
-        command: "npx",
-        args: ["-y", "@anthropic-ai/mcp-server-sequential-thinking@latest"]
-      }
-    }
-  };
+## 🛠️ MCP Tools
+An MCP server is configured at \`.agent/scripts/mcp-server.js\`.
+Use it to list available tools, resources, and prompts.
+\`;
 }
-
 export default initCommand;
+

package/templates/.shared/ui-ux-pro-max/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause
+24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click