HTML-Tailwind Builder

flowchart TD
  classDef huidInput fill:#050b14,stroke:#00f0ff,stroke-width:1px,color:#00f0ff,font-family:monospace
  classDef huidCore fill:#0a1929,stroke:#00ff9d,stroke-width:2px,color:#ffffff,font-family:monospace
  classDef huidBuilder fill:#120524,stroke:#b200ff,stroke-width:1px,color:#e0c3fc,font-family:monospace
  classDef huidAtomic fill:#1c2105,stroke:#e5ff00,stroke-width:1px,color:#fcffc2,font-family:monospace
  
  subgraph Input ["Data & Registry"]
    JSON[JSON Configs]:::huidInput
    TPL[HBS Templates]:::huidInput
    REG[Component Registry]:::huidInput
  end

  subgraph Engine ["Generation Engine (Node.js)"]
    HBS[Handlebars Core]:::huidCore
    VAR[Variation Engine]:::huidCore
    EXP[Express Server]:::huidCore
  end

  subgraph Builders ["Interactive Constructors"]
    AB[Atom Builder]:::huidBuilder
    MB[Molecule Builder]:::huidBuilder
    SB[Section Builder]:::huidBuilder
  end

  subgraph Atomic ["Output Pipeline"]
    A[Atoms]:::huidAtomic
    M[Molecules]:::huidAtomic
    O[Organisms]:::huidAtomic
    S[Sections]:::huidAtomic
    P[Pages]:::huidAtomic
  end

  JSON --> REG
  TPL --> REG
  
  REG --> HBS
  VAR -.-> HBS
  
  HBS --> EXP
  
  EXP <--> Builders
  
  AB --> A
  MB --> M
  SB --> S
  
  A --> M
  M --> O
  O --> S
  S --> P