# Change Request: CR-001

> Created: 2026-01-24  
> Status: Approved  
> Classification: New Feature  
> Related Feature: FEATURE-016

## Request Details

**Requestor:** User  
**Date Received:** 2026-01-24  
**Priority:** Medium

## Description

Extend the Architecture DSL capabilities to include a standalone JavaScript library that:
1. Parses Architecture DSL to generate diagrams in HTML Canvas format
2. Can be used independently outside of X-IPE
3. Leverages the DSL grammar from FEATURE-015 and rendering rules from FEATURE-016

The current FEATURE-016 implementation uses HTML/CSS with Flexbox for rendering. This CR requests an alternative Canvas-based approach packaged as a reusable JS library.

## Business Justification

1. **Broader Reusability:** A standalone JS library can be used in any web application, not just X-IPE
2. **NPM Distribution:** Enables distribution via npm for easy integration
3. **Canvas Benefits:** Pixel-based rendering offers different export quality and programmatic control
4. **Complementary:** Doesn't replace HTML/CSS renderer, provides alternative for different use cases

## Impact Analysis

### Classification

**Type:** New Feature (FEATURE-017)

**Reasoning:**
This CR is classified as a NEW FEATURE (not a modification) because:

1. **Different Rendering Approach:**
   - FEATURE-016: HTML/CSS with Flexbox
   - CR Request: HTML Canvas API
   - These are fundamentally different technical implementations

2. **Different Deployment Model:**
   - FEATURE-016: X-IPE skill in `.github/skills/` folder
   - CR Request: Standalone NPM package
   - Different packaging and distribution

3. **Different User Experience:**
   - FEATURE-016: Template-based skill usage by AI agents
   - CR Request: Programmatic JavaScript API
   - Different consumption patterns

4. **Explicit Design Decision:**
   - FEATURE-016 specification explicitly chose HTML/CSS over Canvas (documented in specification lines 346-353)
   - Adding Canvas is a scope expansion, not a modification

### Affected Components

| Component | Impact Level | Details |
|-----------|--------------|---------|
| FEATURE-015 | Low | Reference only - DSL grammar used as input |
| FEATURE-016 | Low | Reference only - rendering rules used as visual guide |
| New FEATURE-017 | High | New feature created |

### Dependencies

- FEATURE-015: Architecture DSL Skill (provides DSL grammar)
- FEATURE-016: Architecture Diagram Renderer (provides rendering rules and visual reference)

## Proposed Approach

1. Create new FEATURE-017: Architecture DSL JavaScript Library
2. Implement DSL parser following FEATURE-015 grammar
3. Implement Canvas renderer following FEATURE-016 visual rules
4. Package as standalone NPM-compatible library
5. Provide TypeScript types and documentation

## Approval

- [x] Classification approved by human
- [x] Approach approved by human
- [x] Ready for execution

## Links

- Feature Specification: [specification.md](x-ipe-docs/requirements/EPIC-016/FEATURE-016-A/specification.md)
- Requirement Details: [requirement-details-part-2.md](../requirement-details-part-2.md)
- DSL Grammar: [grammar.md](../../../.github/skills/x-ipe-tool-architecture-dsl/references/grammar.md)
- Rendering Rules: [rendering-rules.md](../../../.github/skills/tool-architecture-draw/references/rendering-rules.md)

---
